/* ===== Brand: Teal-first Dark Theme ===== */
:root{
  --gp-bg-0:#061316;
  --gp-bg-1:#081a1e;
  --gp-bg-2:#0a2328;

  --gp-teal-1:#0d9488; /* teal-600 */
  --gp-teal-2:#14b8a6; /* teal-500 */
  --gp-teal-3:#2dd4bf; /* teal-400 */
  --gp-cyan:#06b6d4;   /* cyan-500 */
  --gp-emerald:#10b981;

  --gp-brand-grad: linear-gradient(90deg, var(--gp-teal-2), var(--gp-cyan), var(--gp-emerald));
  --gp-card: rgba(255,255,255,0.04);
  --gp-card-border: rgba(45,212,191,0.35);
  --gp-shadow: 0 10px 30px rgba(0,0,0,0.45);
  --gp-ring: 0 0 0 3px rgba(20,184,166,0.25);
}

/* Background mesh + subtle stars */
.gp-bg{
  min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(1500px 600px at 10% -10%, rgba(20,184,166,0.15), transparent 60%),
    radial-gradient(1100px 500px at 120% 10%, rgba(6,182,212,0.15), transparent 60%),
    linear-gradient(180deg, var(--gp-bg-0) 0%, var(--gp-bg-1) 50%, var(--gp-bg-2) 100%);
}

/* Navbar */
.gp-nav{
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.0));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gp-brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.gp-logo{
  width:36px; height:36px; display:inline-grid; place-items:center;
  background: var(--gp-brand-grad); color:#001615; font-weight:800; border-radius:10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), var(--gp-shadow);
}
.gp-wordmark{ font-weight:700; letter-spacing:.2px; }
.gp-accent{ background:var(--gp-brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gp-link{ color:#b7c9c9 !important; }
.gp-link:hover{ color:#e7fffb !important; }

/* Buttons */
.btn-gp{
  background: var(--gp-brand-grad); color:#002b29; border:none;
  box-shadow: 0 10px 25px rgba(20,184,166,0.25);
}
.btn-gp:hover{ opacity:.95; color:#002b29; }
.btn-outline-gp{
  color: var(--gp-teal-3); border:1px solid var(--gp-teal-2); background: transparent;
}
.btn-outline-gp:hover{ background: rgba(20,184,166,0.15); }

/* Cards */
.gp-card{
  background: var(--gp-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  box-shadow: var(--gp-shadow);
}
.gp-card-border{ border: 1px solid var(--gp-card-border); }
.gp-card-body{ padding:1.25rem; }

/* Inputs */
.gp-input{
  background:#0b1618 !important; color:#d9f7f2 !important; border:1px solid rgba(45,212,191,0.25) !important;
}
.gp-input:focus{ box-shadow: var(--gp-ring); border-color: var(--gp-teal-3) !important; }

/* Footer */
.gp-footer{
  margin-top:auto; padding:1.2rem 0;
  border-top:1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.35));
}

/* Hero */
.gp-hero{ padding: 3.5rem 0; position:relative; }
.gp-title{ font-weight:800; letter-spacing:.4px; }
.gp-title-accent{ background:var(--gp-brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gp-lead{ max-width:720px; margin:0 auto; }
.gp-chip{
  display:inline-block; padding:.35rem .6rem; border-radius:999px; font-size:.8rem; letter-spacing:.4px;
  color:#0a2d2a; background:var(--gp-brand-grad); font-weight:700;
}

/* Blobs */
.gp-blob{ position:absolute; filter: blur(40px); opacity:.6; pointer-events:none; }
.gp-blob-a{ width:380px; height:380px; left:-120px; top:-80px; background:radial-gradient(closest-side, rgba(20,184,166,.6), transparent); animation: float 11s ease-in-out infinite; }
.gp-blob-b{ width:300px; height:300px; right:-80px; top:40px; background:radial-gradient(closest-side, rgba(6,182,212,.5), transparent); animation: float 13s ease-in-out infinite; }
.gp-blob-c{ width:260px; height:260px; left:40%; bottom:-60px; background:radial-gradient(closest-side, rgba(16,185,129,.5), transparent); animation: float 15s ease-in-out infinite; }
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-14px) }
}

/* Code slab */
.gp-code{
  background:#0a1618; color:#c9fffb; padding:1rem; border-radius:12px; border:1px solid rgba(45,212,191,0.25);
  max-height:480px; overflow:auto;
}
.gp-codebox{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Gradient text utility */
.gp-gtxt{ background: var(--gp-brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }