/* GRYPH corporate homepage — single production stylesheet. */
:root{
  --bg:#04121f;
  --bg-deep:#020b13;
  --ink:#f5f9fc;
  --muted:#9eb1c1;
  --line:rgba(255,255,255,.11);
  --blue:#2e9eff;
  --light:#68c4ff;
  --shell:1440px;
  --gutter:clamp(24px,4.2vw,72px);
  --header-h:66px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-width:320px;overflow-x:hidden;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
main{overflow:hidden}
.shell{width:min(100%,var(--shell));margin-inline:auto;padding-inline:var(--gutter)}
.scene{position:relative;isolation:isolate}
.skip-link{position:fixed;z-index:99;top:8px;left:8px;padding:10px 14px;background:#fff;color:var(--bg);transform:translateY(-160%)}
.skip-link:focus{transform:none}
a:focus-visible{outline:2px solid var(--light);outline-offset:4px}
.eyebrow{margin:0 0 22px;color:var(--light);font-size:.69rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
h1,h2{margin:0;font-weight:850;letter-spacing:-.06em}
h1 span,h2 span{color:var(--light)}

/* Header */
.site-header{position:fixed;z-index:40;inset:0 0 auto;border-bottom:1px solid var(--line);background:rgba(4,18,31,.76);backdrop-filter:blur(22px)}
.header-shell{min-height:var(--header-h);display:flex;align-items:center;justify-content:flex-start}
.brand{display:flex;align-items:center;gap:12px;font-size:.9rem;font-weight:850;letter-spacing:.14em}
.brand img{width:31px;height:auto}

/* Hero */
.hero{min-height:100svh;padding-top:var(--header-h);background:radial-gradient(circle at 11% 25%,rgba(46,158,255,.14),transparent 30%),radial-gradient(circle at 80% 42%,rgba(46,158,255,.08),transparent 28%),var(--bg)}
.hero-grid{min-height:calc(100svh - var(--header-h));display:grid;grid-template-columns:minmax(0,820px);align-items:center;padding-top:54px;padding-bottom:88px}
.hero-copy{position:relative;z-index:4;max-width:820px}
.hero .eyebrow{max-width:360px}
.hero h1{max-width:820px;margin-bottom:30px;font-size:clamp(3.6rem,6.1vw,7rem);line-height:.9}
.hero .lead{max-width:660px;margin:0;color:#b7c8d5;font-size:clamp(1.03rem,1.42vw,1.33rem);line-height:1.58}

/* Problem */
.problem{min-height:72svh;display:grid;align-items:center;overflow:hidden;border-block:1px solid var(--line);background:radial-gradient(circle at 70% 45%,rgba(46,158,255,.14),transparent 32%),var(--bg-deep)}
.problem-inner{position:relative;z-index:2;padding-top:92px;padding-bottom:92px}
.problem h2{max-width:980px;font-size:clamp(4.3rem,9vw,10rem);line-height:.84}
.problem-punch{max-width:660px;margin:34px 0 0;color:#b7c8d5;font-size:clamp(1.12rem,1.8vw,1.5rem);line-height:1.55}
.choice-rail{position:absolute;z-index:0;left:-5%;right:-5%;top:15%;display:flex;gap:clamp(34px,5vw,82px);white-space:nowrap;transform:rotate(-7deg);color:rgba(104,196,255,.09);font-size:clamp(2.6rem,6.5vw,7rem);font-weight:900;letter-spacing:-.05em;opacity:.82}
.choice-rail span:nth-child(even){transform:translateY(1.05em)}

/* Nightly ritual */
.scroll-story{min-height:90svh;display:grid;align-items:center;background:linear-gradient(145deg,#061827,#04121f 70%)}
.scroll-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.75fr);gap:clamp(70px,10vw,160px);align-items:center;padding-top:92px;padding-bottom:92px}
.scroll-story h2{font-size:clamp(4rem,7.2vw,8rem);line-height:.91}
.scroll-observations{max-width:560px;border-top:1px solid rgba(104,196,255,.25)}
.scroll-observations p{margin:0;padding:24px 2px;border-bottom:1px solid var(--line);color:#8097a8;font-size:clamp(1.05rem,1.55vw,1.32rem);line-height:1.5}
.scroll-observations p:nth-child(2){color:#91a7b7}
.scroll-observations p:nth-child(3){color:#a7bac8}
.scroll-observations p:nth-child(4){color:#c2d0da}
.scroll-observations .last{padding-top:30px;padding-bottom:30px;color:var(--light);font-size:clamp(1.35rem,2vw,1.7rem);font-weight:800}

/* Insight */
.about{min-height:70svh;display:grid;align-items:center}
.about-grid{display:grid;grid-template-columns:1fr;align-items:center;padding-top:92px;padding-bottom:92px}
.about-intro{max-width:820px}
.about h2{font-size:clamp(3.2rem,6vw,6.9rem);line-height:.91}

/* Belief */
.turn{min-height:74svh;display:grid;align-items:center;overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(145deg,#071b2c,#04121f 68%)}
.turn-glow{position:absolute;z-index:-1;width:56vw;height:56vw;right:-12vw;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(46,158,255,.17),transparent 64%)}
.turn-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:clamp(60px,8vw,130px);align-items:center;padding-top:92px;padding-bottom:92px}
.turn-copy{max-width:900px}
.turn h2{font-size:clamp(3.2rem,6vw,6.9rem);line-height:.91}
.fragment-stage{position:relative;justify-self:end;width:min(100%,500px);aspect-ratio:1}
.fragment-orbit{position:absolute;inset:9%;border:1px solid rgba(104,196,255,.17);border-radius:50%;box-shadow:inset 0 0 70px rgba(46,158,255,.05)}
.ghost-mark{position:absolute;inset:31%;display:grid;place-items:center;opacity:.1;filter:blur(.5px)}
.ghost-mark img{width:100%}
.fragment{position:absolute;background:linear-gradient(145deg,var(--blue),var(--light));box-shadow:0 0 48px rgba(46,158,255,.24);animation:drift 7s ease-in-out infinite}
.f1{left:15%;top:16%;width:21%;height:19%;border-radius:17% 17% 17% 5%}
.f2{right:15%;top:18%;width:14%;height:14%;border-radius:20%;animation-delay:-1.2s}
.f3{left:18%;bottom:16%;width:14%;height:14%;border-radius:20%;animation-delay:-2.2s}
.f4{right:14%;bottom:13%;width:22%;height:21%;border-radius:6% 18% 18% 18%;animation-delay:-3.2s;background:var(--light)}

/* Brand reveal — intentionally dominant and independently testable. */
.mystery{position:relative;display:grid;align-items:center;min-height:62svh;overflow:hidden;background:var(--bg-deep)}
.mystery-lines{display:none}
.mystery::before{content:"";position:absolute;inset:-4% -22%;background:radial-gradient(circle at 50% 48%,rgba(46,158,255,.2),rgba(12,121,216,.06) 31%,rgba(4,18,31,0) 68%);pointer-events:none}
.mystery-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:80px;padding-bottom:80px}
.reveal-intro{max-width:620px;margin:0 0 38px;color:var(--light);font-size:.68rem;font-weight:800;line-height:1.5;letter-spacing:.34em;text-transform:uppercase;opacity:.86}
.gryph-reveal{position:relative;z-index:2;display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;gap:clamp(28px,3vw,42px);width:max-content;max-width:calc(100vw - (2 * var(--gutter)))}
.gryph-reveal::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:118%;height:190%;border-radius:50%;background:radial-gradient(circle,rgba(46,158,255,.15),rgba(46,158,255,0) 68%);filter:blur(18px);transform:translate(-50%,-50%)}
.gryph-reveal img{width:clamp(112px,10.5vw,154px);max-width:none;height:auto;filter:drop-shadow(0 0 38px rgba(46,158,255,.36))}
.gryph-reveal span{display:block;color:var(--ink);font-size:clamp(7.5rem,15vw,13rem);font-weight:900;line-height:.78;letter-spacing:.045em;white-space:nowrap;text-shadow:0 0 42px rgba(46,158,255,.2)}
.reveal-meta{margin:38px 0 0;color:var(--ink);font-size:.78rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase}
.mystery-note{margin:20px 0 0;color:#a9bdcb;font-size:1.04rem;line-height:1.5;letter-spacing:.025em}

/* Signup */
.updates{border-top:1px solid var(--line);background:radial-gradient(circle at 18% 45%,rgba(46,158,255,.12),transparent 31%),linear-gradient(145deg,#061827,#04121f 70%)}
.updates-grid{min-height:62svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);gap:clamp(70px,10vw,160px);align-items:center;padding-top:74px;padding-bottom:78px}
.updates h2{font-size:clamp(3.4rem,6vw,6.8rem);line-height:.91}
.updates-copy>p:last-child{max-width:520px;margin:32px 0 0;color:#b7c8d5;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55}
.signup-panel{position:relative;padding:clamp(26px,3.2vw,44px);border:1px solid rgba(104,196,255,.18);background:rgba(5,24,40,.64);box-shadow:0 30px 90px rgba(0,0,0,.18)}
.signup-form>label{display:block;margin-bottom:12px;color:var(--light);font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.email-row{display:grid;grid-template-columns:minmax(0,1fr) 58px;border-bottom:1px solid rgba(104,196,255,.48)}
.email-row input{width:100%;min-width:0;padding:14px 0 16px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:1.15rem}
.email-row input::placeholder{color:#60798d}
.email-row:focus-within{border-color:var(--light);box-shadow:0 1px 0 var(--light)}
.email-row button{border:0;background:transparent;color:var(--light);font-size:1.65rem;cursor:pointer}
.email-row button:hover{transform:translateX(3px)}
.email-row input:-webkit-autofill,.email-row input:-webkit-autofill:hover,.email-row input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #061827 inset;box-shadow:0 0 0 1000px #061827 inset;caret-color:var(--ink);transition:background-color 9999s ease-out 0s}
.signup-note,.form-status{margin:16px 0 0;color:#7890a2;font-size:.78rem;line-height:1.5}
.signup-note a{color:inherit;text-underline-offset:3px}
.signup-note a:hover{color:var(--light)}
.form-status{min-height:1.2em;color:var(--light)}
.form-status[data-state="error"]{color:#b9cddd}
.protected-form button[disabled]{opacity:.48;cursor:not-allowed}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Footer */
footer{border-top:1px solid var(--line);color:#b5c6d3}
.footer-shell{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.footer-wordmark{font-size:.82rem;font-weight:850;letter-spacing:.18em}
.footer-wordmark:hover{color:var(--light)}
.footer-right{display:flex;align-items:center;gap:35px}
.footer-right>span{color:var(--light);font-weight:850;font-size:1.05rem}
small{color:#758b9d}
footer a{color:inherit;text-underline-offset:3px}
footer a:hover{color:var(--light)}

@keyframes drift{50%{transform:translate(6px,-6px) rotate(3deg);filter:brightness(1.12)}}

@media(max-width:1040px){
  .turn-grid{gap:60px}
}

@media(max-width:860px){
  .hero-grid{min-height:auto;padding-top:clamp(92px,15vh,150px);padding-bottom:clamp(110px,18vh,180px)}
  .scroll-story{min-height:auto}
  .scroll-story-grid,.turn-grid,.updates-grid{grid-template-columns:1fr}
  .scroll-story-grid{gap:42px;padding-top:74px;padding-bottom:74px}
  .about{min-height:auto}
  .about-grid{padding-top:74px;padding-bottom:74px}
  .turn{min-height:auto}
  .turn-grid{padding-top:74px;padding-bottom:74px}
  .fragment-stage{justify-self:center;width:min(72vw,470px)}
  .updates-grid{min-height:auto;gap:48px;padding-top:72px;padding-bottom:72px}
  .signup-panel{max-width:650px}
}

@media(max-width:620px){
  :root{--gutter:clamp(24px,6vw,30px);--header-h:66px}
  .site-header{background:rgba(4,18,31,.9);backdrop-filter:blur(18px)}
  .header-shell{min-height:var(--header-h)}
  .brand{gap:10px;font-size:.76rem;letter-spacing:.13em}
  .brand img{width:25px}

  .hero{min-height:auto;padding-top:var(--header-h)}
  .hero-grid{display:block;padding-top:72px;padding-bottom:96px}
  .hero .eyebrow{max-width:290px;margin-bottom:18px;font-size:.61rem;line-height:1.5}
  .hero h1{max-width:560px;margin-bottom:28px;font-size:clamp(2.75rem,12vw,3.85rem);line-height:.92;letter-spacing:-.052em}
  .hero .lead{max-width:520px;font-size:1rem;line-height:1.65}

  .problem{min-height:auto}
  .problem-inner{padding-top:76px;padding-bottom:82px}
  .problem .eyebrow{margin-bottom:17px}
  .problem h2{font-size:clamp(3.05rem,13vw,4.45rem);line-height:.88}
  .problem-punch{max-width:520px;margin-top:24px;font-size:.96rem;line-height:1.5}
  .choice-rail{top:22%;font-size:2.75rem;opacity:.68}

  .scroll-story-grid{padding-top:76px;padding-bottom:86px;gap:38px}
  .scroll-story .eyebrow{margin-bottom:17px}
  .scroll-story h2{font-size:clamp(3rem,13.2vw,4.25rem);line-height:.9}
  .scroll-observations p{padding:19px 2px;font-size:1rem;line-height:1.5}
  .scroll-observations .last{padding-top:25px;padding-bottom:25px;font-size:1.35rem}

  .about-grid{padding-top:84px;padding-bottom:88px}
  .about .eyebrow{margin-bottom:17px}
  .about h2{font-size:clamp(2.95rem,12.5vw,4.15rem);line-height:.91}

  .turn-grid{padding-top:82px;padding-bottom:78px;gap:30px}
  .turn .eyebrow{margin-bottom:17px}
  .turn h2{font-size:clamp(2.72rem,11.3vw,3.72rem);line-height:.94}
  .fragment-stage{width:min(62vw,280px)}

  .mystery{min-height:58svh}
  .mystery::before{inset:-8% -42%}
  .mystery-inner{padding-top:68px;padding-bottom:68px}
  .reveal-intro{max-width:320px;margin-bottom:34px;font-size:.61rem;line-height:1.55;letter-spacing:.27em}
  .gryph-reveal{grid-template-columns:clamp(62px,18vw,82px) minmax(0,1fr);gap:clamp(12px,3.4vw,16px);width:min(92vw,480px);max-width:none}
  .gryph-reveal img{width:100%;max-width:none}
  .gryph-reveal span{min-width:0;font-size:clamp(3.4rem,17vw,4.8rem);line-height:.8;letter-spacing:.012em}
  .reveal-meta{margin-top:32px;font-size:.69rem;letter-spacing:.27em}
  .mystery-note{margin-top:16px;font-size:.98rem}

  .updates-grid{padding-top:68px;padding-bottom:74px;gap:30px}
  .updates .eyebrow{margin-bottom:17px}
  .updates h2{font-size:clamp(2.75rem,11.5vw,3.85rem);line-height:.92}
  .updates-copy>p:last-child{margin-top:20px;font-size:.96rem}
  .signup-panel{padding:22px 20px}
  .email-row{grid-template-columns:minmax(0,1fr) 48px}
  .email-row input{font-size:1rem}

  .footer-shell{min-height:72px}
  .footer-right{gap:18px}
}

@media(max-width:390px){
  .hero h1{font-size:2.52rem}
  .problem h2{font-size:2.95rem}
  .scroll-story h2{font-size:3rem}
  .about h2{font-size:2.9rem}
  .turn h2{font-size:2.65rem}
  .updates h2{font-size:2.7rem}
}

@media(max-width:340px){
  .gryph-reveal{grid-template-columns:58px minmax(0,1fr);gap:11px;width:92vw}
  .gryph-reveal span{font-size:3.3rem;letter-spacing:.008em}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fragment{animation:none!important}
}