/* =========================
   GG Content Labs — styles.css
   Clean drop-in rebuild
   (hero panel + smaller flask + physics particles stage)
   ========================= */

:root{
  --bg: #0b0f17;
  --fg: #e9eefc;
  --muted: rgba(233,238,252,.72);

  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.09);
  --line: rgba(255,255,255,.12);

  --shadow: 0 20px 60px rgba(0,0,0,.45);

  --radius: 18px;
  --shell: 1120px;
  --pad: 22px;
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }

body{
  margin:0;
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  background:
    radial-gradient(circle at 30% 10%, rgba(120,140,255,.18) 0%, transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(70,220,255,.10) 0%, transparent 60%),
    var(--bg);
  background-repeat: no-repeat;
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

.shell{
  width: min(var(--shell), calc(100% - 44px));
  margin: 0 auto;
}

/* =========================
   Ambient grid + cursor glow
   ========================= */
.bg-grid{
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity: .35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(600px 400px at 30% 10%, black 35%, transparent 70%);
}

.cursor-glow{
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  pointer-events:none;
  filter: blur(40px);
  opacity: .22;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 30%, rgba(120,140,255,.55), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(70,220,255,.45), transparent 60%);
  mix-blend-mode: screen;
}

/* =========================
   Header
   ========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 20; /* keep above fx stage */
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 22px;
  backdrop-filter: blur(14px);
  background: rgba(11,15,23,.55);
  border-bottom: 1px solid var(--line);
}

.brand{ display:flex; gap:10px; align-items:center; }
.brand__logo{
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.brand__text{ font-weight: 650; letter-spacing:.2px; opacity:.92; }

.nav{ display:flex; gap: 18px; align-items:center; }
.nav a{ opacity:.88; }
.nav a:hover{ opacity:1; }

.nav-toggle{
  display:none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  margin: 5px 0;
  background: rgba(255,255,255,.8);
}

/* Backdrop for mobile nav */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 19;
  display: none;
}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.25);
}
.btn:focus-visible{
  outline: 2px solid rgba(70,220,255,.45);
  outline-offset: 3px;
}
.btn--ghost{
  background: transparent;
  box-shadow: none;
}

/* =========================
   Hero
   ========================= */
.hero{
  position: relative;
  padding: 48px 0 32px; /* tightened */
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(520px 240px at 55% 55%, rgba(120,140,255,.10), transparent 70%);
}

/* =========================
   HERO PANEL (glass card)
   ========================= */
.hero-panel{
  position: relative;
  padding: 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  overflow: hidden; /* panel stays clean; particles are on #fx-stage */
  margin: 6px 0 18px;
}

.hero-panel::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 30% 20%, rgba(120,140,255,.16), transparent 55%),
    radial-gradient(circle at 75% 55%, rgba(70,220,255,.10), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

.hero-panel > *{
  position: relative;
  z-index: 1;
}

/* HERO BRAND: text left, art right */
.hero-brand{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
  margin: 0;
}

.hero-brand__text{
  max-width: 68ch;
  padding-right: 10px;
}

/* Gradient H1 */
.hero-brand__name{
  margin: 0 0 10px;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.8px;
  background: linear-gradient(90deg,
    rgba(233,238,252,1) 0%,
    rgba(160,245,255,.95) 45%,
    rgba(120,140,255,.95) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(70,220,255,.08);
}

@supports not (-webkit-background-clip: text){
  .hero-brand__name{ color: var(--fg); }
}

.hero-brand__tagline{
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 55ch;
}

.hero-brand__cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================
   Flask wrap + glow layers
   ========================= */
.hero-brand__logo-wrap{
  position: relative;
  display: grid;
  place-items: center;
  justify-self: end;
  align-self: start;

  width: min(270px, 30vw);
  aspect-ratio: 1 / 1;

  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;

  transform: translateY(10px);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s ease;
  cursor: pointer;

  isolation: isolate;

  /* particle emitter defaults */
  --emit-x: 50%;
  --emit-y: 18%;

  /* touch ergonomics */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* prevent image-style drag selection */
.hero-flask{ -webkit-user-drag: none; }

.hero-brand__halo{
  position: absolute;
  inset: -18%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 40% 35%, rgba(120,140,255,.26), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(70,220,255,.18), transparent 62%);
  filter: blur(22px);
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}

.hero-brand__glow{
  position: absolute;
  inset: -28%;
  background:
    radial-gradient(circle at 35% 30%, rgba(120,140,255,.42), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(70,220,255,.30), transparent 60%),
    radial-gradient(circle at 10% 60%, rgba(70,220,255,.22), transparent 65%),
    radial-gradient(circle at 80% 20%, rgba(120,140,255,.22), transparent 60%);
  filter: blur(26px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.hero-flask{
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  transform: translateZ(26px);
  filter:
    drop-shadow(0 18px 60px rgba(0,0,0,.60))
    drop-shadow(0 0 24px rgba(70,220,255,.10));
  will-change: transform, filter;
  pointer-events: none; /* interactions handled by wrap */
}

@media (prefers-reduced-motion: no-preference){
  .hero-brand__logo-wrap:hover .hero-flask{
    filter:
      drop-shadow(0 18px 60px rgba(0,0,0,.60))
      drop-shadow(0 0 34px rgba(70,220,255,.18));
  }
}

/* =========================
   Cards under hero
   ========================= */
.hero__cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.card{
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.card h2{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: .2px;
}
.card ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

/* =========================
   Sections
   ========================= */
.section{ padding: 56px 0; }

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.section__head h2{
  margin:0;
  font-size: 22px;
  letter-spacing: -0.2px;
}
.section__head p{
  margin:0;
  color: var(--muted);
  max-width: 60ch;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.work-card{
  padding: var(--pad);
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.work-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.work-card h3{ margin: 0 0 8px; font-size: 16px; }
.work-card p{ margin: 0 0 10px; color: var(--muted); }
.work-card__meta{
  font-size: 12px;
  color: rgba(233,238,252,.78);
  opacity: .9;
}

.section__cta{ margin-top: 18px; }

/* =========================
   Footer
   ========================= */
.site-footer{
  border-top: 0;
  padding: 28px 0;
  background: linear-gradient(
    to bottom,
    rgba(11,15,23,0) 0%,
    rgba(11,15,23,.35) 25%,
    rgba(11,15,23,.55) 100%
  );
  backdrop-filter: blur(10px);
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: var(--muted);
}

.footer__made{
  opacity: .75;
  margin-left: 8px;
  white-space: nowrap;
}

.footer__links{ display:flex; gap: 14px; }
.footer__links a:hover{ color: var(--fg); }

@media (max-width: 520px){
  .footer__inner{ flex-direction: column; align-items:flex-start; }
  .footer__made{
    display: block;
    margin-left: 0;
    margin-top: 6px;
    white-space: normal;
  }
}

/* =========================
   Mobile layout
   ========================= */
@media (max-width: 920px){
  .nav{ display:none; }
  .nav-toggle{ display:block; }

  .hero{ padding: 44px 0 26px; }

  .hero__cards{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }

  .hero-panel{
    padding: 18px;
    margin-bottom: 16px;
  }

  .hero-brand{
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }

  /* flask above text, centered */
  .hero-brand__logo-wrap{
    order: -1;
    justify-self: center;
    align-self: start;
    width: min(260px, 72vw);
    transform: none;
    margin: 6px 0 2px;
  }

  .hero-brand__text{
    max-width: 46ch;
    margin: 0 auto;
    text-align: left;
    padding-right: 0;
  }

  .hero-brand__cta{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .hero-brand__cta .btn{
    width: 100%;
    padding: 12px 14px;
  }
}

/* MOBILE NAV PANEL */
@media (max-width: 920px){
  .nav{
    position: fixed;
    top: 64px;
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(11,15,23,.72);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
    z-index: 21; /* above header and stage */
  }

  html.nav-open .nav{ display: flex; }
  html.nav-open .nav-backdrop{ display: block; }
}

/* Extra-small phones */
@media (max-width: 420px){
  .hero-brand__logo-wrap{
    width: min(240px, 84vw);
  }
  .hero-brand__text{
    max-width: 40ch;
  }
}

/* =========================
   Bottom fade
   ========================= */
main{ position: relative; }
main::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(11,15,23,0), rgba(11,15,23,.35));
  pointer-events: none;
}

/* =========================
   Physics FX stage (global overlay)
   ========================= */
#fx-stage{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 15;         /* above hero content, below nav */
  overflow: visible;   /* particles can fly outside */
}

/* particle containers positioned via JS transforms */
#fx-stage .fx-particle{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(0,0,0) translate(-50%,-50%);
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 220ms ease;
}

#fx-stage .fx-particle.is-on{ opacity: 1; }
#fx-stage .fx-particle.is-fading{ opacity: 0; }

/* glyphs (symbols / emojis) */
#fx-stage .fx-glyph{
  font-size: var(--s, 16px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: rgba(233,238,252,.88);
  text-shadow:
    0 10px 22px rgba(0,0,0,.55),
    0 0 18px rgba(70,220,255,.10);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
  user-select: none;
  -webkit-user-select: none;
}

/* bubbles */
#fx-stage .fx-bubble{
  width: var(--s, 12px);
  height: var(--s, 12px);
  border-radius: 999px;
  border: 1px solid rgba(160,245,255,.65);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,.35),
    rgba(70,220,255,.10) 40%,
    transparent 70%
  );
  filter: blur(.2px) drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

/* =========================
   Contact page (clean + stable controls)
   ========================= */

.contact-head{ margin-bottom: 16px; }

.contact-title{
  margin: 0 0 10px;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.6px;
  background: linear-gradient(90deg,
    rgba(233,238,252,1) 0%,
    rgba(160,245,255,.95) 45%,
    rgba(120,140,255,.95) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

.contact-layout{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  margin-top: 18px;
}

.contact-card{
  padding: var(--pad);
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.contact-form{
  display: grid;
  gap: 12px;
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;      /* keeps bottoms aligned */
}
.form-row > *{ min-width: 0; }

.field{
  display: grid;
  gap: 8px;
}

.field__label{
  font-size: 13px;
  color: rgba(233,238,252,.78);
}

/* -------------------------
   Stable single-line controls
   (prevents password managers from changing height)
   ------------------------- */

:root{
  --control-h: 46px;
  --control-pad-x: 12px;
  --control-pad-r: 46px; /* reserve space for injected icons */
}

.field__control{
  height: var(--control-h);
  min-height: var(--control-h);
  max-height: var(--control-h);

  display: grid;
  align-items: center;
  box-sizing: border-box;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(11,15,23,.35);

  overflow: hidden; /* critical: prevents injected elements from affecting layout */
}

/* input itself is borderless and fills the wrapper */
.field__control .field__input{
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg);

  font: inherit;
  line-height: 1.2;

  padding: 0 var(--control-pad-r) 0 var(--control-pad-x);

  appearance: none;
  -webkit-appearance: none;
}

/* Focus styles applied to wrapper so it never causes layout shift */
.field__control:focus-within{
  border-color: rgba(70,220,255,.45);
  box-shadow: 0 0 0 3px rgba(70,220,255,.14);
}

/* -------------------------
   Textarea (keeps your original look)
   ------------------------- */

.field__textarea{
  width: 100%;
  box-sizing: border-box;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(11,15,23,.35);
  color: var(--fg);

  padding: 12px var(--control-pad-x);
  outline: none;

  resize: vertical;
  min-height: 160px;

  font: inherit;
  line-height: 1.4;

  appearance: none;
  -webkit-appearance: none;
}

.field__textarea:focus{
  border-color: rgba(70,220,255,.45);
  box-shadow: 0 0 0 3px rgba(70,220,255,.14);
}

/* Autofill readability */
.field__control .field__input:-webkit-autofill{
  -webkit-text-fill-color: var(--fg);
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 9999px rgba(11,15,23,.35) inset;
}

.field__control .field__input:autofill{
  filter: none;
}

/* Honeypot */
.hp{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile-wrap{ margin-top: 2px; }

.form-actions{
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.form-status{
  margin: 0;
  color: rgba(233,238,252,.78);
  min-height: 1.3em;
}

.form-fallback{
  margin: 6px 0 0;
  color: rgba(233,238,252,.70);
  font-size: 13px;
}

.inline-link{
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .95;
}
.inline-link:hover{ opacity: 1; }

.contact-aside{ align-self: start; }

.aside-title{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: .2px;
}

.aside-list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.aside-divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 16px 0;
}

@media (max-width: 920px){
  .contact-layout{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}

/* =========================
   404 / error page
   ========================= */
.error-panel{
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-width: 880px;
  overflow: visible; /* prevent any clipping */
}

.error-kicker{
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(233,238,252,.72);
}

.error-title{
  margin: 0 0 10px;
  font-size: clamp(34px, 5vw, 56px);

  /* Fix: prevent descenders (g/y/p) getting clipped with gradient text */
  line-height: 1.12;        /* was 1.05 */
  padding-bottom: .12em;    /* adds “descender room” */
  display: inline-block;    /* makes padding apply correctly */
  overflow: visible;

  letter-spacing: -0.7px;
  background: linear-gradient(90deg,
    rgba(233,238,252,1) 0%,
    rgba(160,245,255,.95) 45%,
    rgba(120,140,255,.95) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

.error-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.error-links{
  margin-top: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: .92;
}

.error-links a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px){
  .error-actions{ width: 100%; }
  .error-actions .btn{ width: 100%; text-align: center; }
}