/* ============================================================
   SIGNAL360 bespoke stylesheet
   Design system carried from signal360.co.za
   Navy #0C131C · Amber #F2A63C · Text #C2CAD4 · Troola teal #26C1C1
   Type: Sora (display) · Hanken Grotesk (body) · Space Mono (mono)
   ============================================================ */

:root{
  --navy:        #0C131C;
  --navy-800:    #0F1822;
  --navy-700:    #12202D;
  --panel:       #101A24;
  --panel-2:     #16324F;
  --line:        rgba(194,202,212,0.12);
  --line-strong: rgba(194,202,212,0.22);
  --amber:       #F2A63C;
  --amber-2:     #F2A830;
  --amber-soft:  rgba(242,166,60,0.10);
  --teal:        #06B6A4;
  --teal-deep:   #048C7E;
  --text:        #C2CAD4;
  --text-dim:    #9AA7B5;
  --text-mute:   #7E8EA0;
  --white:       #F4F7FA;
  --paper:       #F4F7FA;
  --paper-2:     #E7ECF2;
  --ink:         #0C131C;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 72px);
  --r: 14px;

  --font-display: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--navy);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--amber); color:var(--navy); }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(72px, 11vw, 150px); position:relative; }
.section--tight{ padding-block:clamp(52px,7vw,92px); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; color:var(--white); margin:0; letter-spacing:-0.02em; line-height:1.02; }
.display{ font-size:clamp(2.7rem, 7.2vw, 6.4rem); font-weight:800; letter-spacing:-0.035em; line-height:0.98; }
.h1{ font-size:clamp(2.2rem, 5.2vw, 4.2rem); font-weight:800; letter-spacing:-0.03em; line-height:1.0; }
.h2{ font-size:clamp(1.8rem, 3.6vw, 3.1rem); font-weight:700; line-height:1.04; }
.h3{ font-size:clamp(1.25rem, 2vw, 1.7rem); font-weight:600; }
.lede{ font-size:clamp(1.12rem, 1.7vw, 1.42rem); line-height:1.5; color:var(--text); max-width:44ch; }
.muted{ color:var(--text-dim); }
.mono{ font-family:var(--font-mono); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--amber);
  display:inline-flex;
  align-items:center;
  gap:0.7em;
  margin-bottom:1.4rem;
}
.eyebrow .num{ color:var(--text-mute); }
.eyebrow--teal{ color:var(--teal); }

.amber{ color:var(--amber); }
.teal{ color:var(--teal); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.92em 1.5em; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--amber{ background:var(--amber); color:var(--navy); font-weight:700; }
.btn--amber:hover{ background:#ffbf5c; box-shadow:0 12px 40px -12px rgba(242,166,60,.6); }
.btn--ghost{ border-color:var(--line-strong); color:var(--white); }
.btn--ghost:hover{ border-color:var(--amber); color:var(--amber); }
.btn--teal{ background:var(--teal); color:#06201f; font-weight:700; }
.btn--teal:hover{ background:#0AD3BF; box-shadow:0 12px 40px -12px rgba(6,182,164,.55); }
.btn .arw{ transition:transform .25s; }
.btn:hover .arw{ transform:translateX(4px); }

/* text link */
.tlink{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); border-bottom:1px solid rgba(242,166,60,.35); padding-bottom:2px; transition:.2s; }
.tlink:hover{ border-color:var(--amber); }

/* ---------- Logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:.62rem; }
.logo__mark{ width:26px; height:26px; flex:none; }
.logo__word{ font-family:var(--font-display); font-weight:800; font-size:1.16rem; letter-spacing:-0.01em; color:var(--white); line-height:1; }
.logo__word .n360{ color:var(--amber); }
.logo--footer .logo__word{ font-size:1.35rem; }

/* troola wordmark */
.troola-word{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; color:var(--white); display:inline-flex; align-items:baseline; gap:.14em; }
.troola-word .dot{ display:inline-block; width:.5em; height:.5em; background:var(--teal); border-radius:2px; transform:translateY(-.02em); }

/* ---------- Header ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut);
  background:rgba(12,19,28,0.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, padding .3s;
}
.nav.is-scrolled{ background:rgba(12,19,28,0.92); border-bottom-color:var(--line); padding-block:11px; }
.nav__links{ display:flex; align-items:center; gap:2.1rem; }
.nav__links a{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); transition:color .2s; position:relative; }
.nav__links a:hover, .nav__links a.active{ color:var(--white); }
.nav__links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:var(--amber); }
.nav__right{ display:flex; align-items:center; gap:1.4rem; }
.nav__toggle{ display:none; background:none; border:0; color:var(--white); cursor:pointer; padding:8px; }
.nav__toggle svg{ width:26px; height:26px; }

.mobile-menu{ position:fixed; inset:0; z-index:79; background:var(--navy); transform:translateY(-100%); transition:transform .4s cubic-bezier(.7,0,.2,1); display:flex; flex-direction:column; justify-content:center; padding:var(--gut); gap:.4rem; }
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--white); padding:.5rem 0; border-bottom:1px solid var(--line); }
.mobile-menu a .mm-num{ font-family:var(--font-mono); font-size:.8rem; color:var(--amber); margin-right:1rem; vertical-align:super; }

/* ---------- Hero canvas ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero__canvas{ position:absolute; inset:0; z-index:0; }
.hero__img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero__veil{ position:absolute; inset:0; z-index:1; background:
   radial-gradient(120% 80% at 68% 42%, rgba(242,166,60,.10), transparent 55%),
   linear-gradient(180deg, rgba(12,19,28,.35) 0%, rgba(12,19,28,.55) 40%, var(--navy) 96%); }
.hero__inner{ position:relative; z-index:2; width:100%; padding-top:96px; padding-bottom:64px; }
.hero__inner .display{ max-width:16ch; }

/* readout ticker */
.readout{ display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin-top:2.4rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; color:var(--text-mute); text-transform:uppercase; }
.readout span b{ color:var(--amber); font-weight:700; }

/* ---------- Generic components ---------- */
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.two{ grid-template-columns:repeat(2,1fr); }
.three{ grid-template-columns:repeat(3,1fr); }
.four{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.split--rev{ grid-template-columns:1.1fr 0.9fr; }

.kicker-head{ max-width:22ch; }
.section-head{ margin-bottom:clamp(40px,5vw,72px); }
.section-head .h2{ max-width:20ch; }
.section-head p{ max-width:52ch; margin-top:1.2rem; color:var(--text-dim); }

/* stat block */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--navy); padding:clamp(24px,3vw,40px); }
.stat__n{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,4.6vw,4rem); color:var(--white); letter-spacing:-0.04em; line-height:1; }
.stat__n .u{ color:var(--amber); }
.stat__l{ margin-top:.9rem; font-size:.92rem; color:var(--text-dim); line-height:1.4; }

/* card */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,2.6vw,36px); transition:border-color .3s, transform .3s, background .3s; }
.card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.card__ix{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; color:var(--amber); }
.card h3{ margin:1.1rem 0 .7rem; }
.card p{ color:var(--text-dim); font-size:.98rem; }
.card__icon{ width:44px; height:44px; margin-bottom:.4rem; }

/* loop steps */
.loop{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.loop__step{ background:var(--navy); padding:clamp(26px,2.8vw,40px); position:relative; }
.loop__step .card__icon{ width:40px; height:40px; }
.loop__ix{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--text-mute); }
.loop__ix b{ color:var(--amber); }
.loop__step h3{ margin:1rem 0 .3rem; color:var(--white); }
.loop__word{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.loop__step p{ color:var(--text-dim); font-size:.94rem; margin-top:.5rem; }

/* light section */
.light{ background:var(--paper); color:#324055; }
.light h1,.light h2,.light h3,.light h4{ color:var(--ink); }
.light .muted{ color:#5B6A7B; }
.light .eyebrow{ color:#B67C1F; }
.light .card{ background:#fff; border-color:rgba(12,19,28,.09); box-shadow:0 1px 0 rgba(12,19,28,.04); }
.light .card p{ color:#5B6A7B; }
.light .rule{ background:rgba(12,19,28,.10); }
.light .stat{ background:var(--paper); }
.light .stats{ background:rgba(12,19,28,.10); border-color:rgba(12,19,28,.10); }
.light .stat__n{ color:var(--ink); }
.light .stat__l{ color:#5B6A7B; }

/* pull quote */
.pull{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3.4vw,2.9rem); line-height:1.16; letter-spacing:-0.02em; color:var(--white); max-width:24ch; }
.pull .amber{ color:var(--amber); }
.attr{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-top:2rem; }

/* image plate */
.plate{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); position:relative; }
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate--tall{ aspect-ratio:4/5; }
.plate--wide{ aspect-ratio:16/10; }
.shot{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line-strong); box-shadow:0 40px 100px -40px rgba(0,0,0,.8); }
.shot img{ width:100%; }

/* module list */
.modgroup{ margin-bottom:clamp(40px,5vw,70px); }
.modgroup__head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.6rem; }
.modgroup__head .mono{ color:var(--amber); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }
.modgroup__head .cnt{ color:var(--text-mute); font-family:var(--font-mono); font-size:.78rem; }
.mods{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.mod{ background:var(--navy); padding:clamp(20px,2.2vw,28px); }
.mod h4{ font-size:1.02rem; color:var(--white); display:flex; align-items:center; gap:.6rem; }
.mod .tag{ font-family:var(--font-mono); font-size:.66rem; padding:.15em .55em; border-radius:100px; background:var(--amber-soft); color:var(--amber); letter-spacing:.05em; }
.mod .tag--teal{ background:rgba(38,193,193,.12); color:var(--teal); }
.mod p{ color:var(--text-dim); font-size:.9rem; margin-top:.5rem; }

/* audience tabs */
.aud{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.aud__c{ background:var(--navy); padding:clamp(24px,2.6vw,36px); }
.aud__role{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--white); }
.aud__role .amber{ color:var(--amber); }
.aud__c p{ color:var(--text-dim); font-size:.95rem; margin-top:.9rem; }

/* pricing */
.price{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,28px); }
.price__c{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:clamp(30px,3.2vw,48px); position:relative; }
.price__c--feat{ border-color:rgba(242,166,60,.4); background:linear-gradient(180deg,rgba(242,166,60,.06),transparent 60%),var(--panel); }
.price__tier{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.price__amt{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,3.4vw,2.8rem); color:var(--white); letter-spacing:-.03em; margin:.8rem 0 .2rem; }
.price__amt .per{ font-size:1rem; color:var(--text-mute); font-weight:400; }
.price__sub{ color:var(--text-dim); font-size:.95rem; }
.price ul{ list-style:none; padding:0; margin:1.6rem 0 0; }
.price li{ display:flex; gap:.7rem; padding:.55rem 0; border-top:1px solid var(--line); font-size:.95rem; color:var(--text); }
.price li::before{ content:"✓"; color:var(--amber); font-weight:700; }
.guarantee{ margin-top:1.6rem; padding:1rem 1.2rem; border-radius:10px; background:var(--amber-soft); font-size:.88rem; color:var(--amber); font-family:var(--font-mono); letter-spacing:.02em; line-height:1.5; }

/* forms */
.form{ display:grid; gap:1.3rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.field input, .field select, .field textarea{
  background:var(--navy-800); border:1px solid var(--line-strong); border-radius:10px;
  padding:.95em 1em; color:var(--white); font-family:var(--font-body); font-size:1rem; transition:border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber); background:var(--navy-700); }
.field textarea{ min-height:130px; resize:vertical; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.form__note{ font-size:.82rem; color:var(--text-mute); }
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F2A63C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.1em center; }

/* CTA band */
.cta{ text-align:center; }
.cta .h1{ max-width:20ch; margin:0 auto 1.4rem; }
.cta .lede{ margin:0 auto 2.4rem; }
.cta__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* footer */
.footer{ border-top:1px solid var(--line); padding-block:clamp(48px,6vw,80px) 40px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,60px); }
.footer p{ color:var(--text-mute); font-size:.94rem; max-width:34ch; margin-top:1.2rem; }
.footer h5{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); margin:0 0 1.1rem; }
.footer__col a{ display:block; color:var(--text-dim); padding:.35rem 0; font-size:.96rem; transition:color .2s; }
.footer__col a:hover{ color:var(--amber); }
.footer__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:clamp(40px,5vw,64px); padding-top:1.6rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--text-mute); text-transform:uppercase; }
.footer__bottom .end{ color:var(--text-dim); }

/* signal line accent */
.sig-line{ display:flex; align-items:center; gap:.8rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); }
.sig-line::before{ content:""; width:34px; height:1px; background:var(--amber); }

/* reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* page hero (interior) */
.phead{ padding-top:clamp(140px,16vh,200px); padding-bottom:clamp(40px,5vw,72px); }
.phead .display{ max-width:15ch; }
.phead .lede{ margin-top:1.8rem; }

/* misc */
.tag-inline{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); }
.note-strip{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); text-align:center; padding:1rem; border:1px dashed var(--line); border-radius:100px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .split, .split--rev{ grid-template-columns:1fr; gap:36px; }
  .four{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .loop{ grid-template-columns:repeat(2,1fr); }
  .mods{ grid-template-columns:repeat(2,1fr); }
  .aud{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  body{ font-size:16px; }
  .two, .three{ grid-template-columns:1fr; }
  .four, .stats, .loop, .mods, .aud, .price{ grid-template-columns:1fr; }
  .field--row{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .hero__inner .display{ max-width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   v2 revisions: exact logo, card motion, hero band, larger shots
   ============================================================ */

/* exact svg logo mark */
.logo__mark{ width:25px; height:25px; display:inline-flex; }
.logo__mark svg{ width:100%; height:100%; display:block; }
.logo--footer .logo__mark{ width:30px; height:30px; }

/* raise hero image presence */
.hero__img{ opacity:.6; }

/* ---- Card motion: cursor spotlight + accent line + lift ---- */
.card,.mod,.loop__step,.aud__c,.stat{ position:relative; overflow:hidden; }
.card>*,.mod>*,.loop__step>*,.aud__c>*,.stat>*{ position:relative; z-index:1; }
.card::before,.mod::before,.loop__step::before,.aud__c::before,.stat::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(242,166,60,.18), transparent 62%);
  transition:opacity .4s ease;
}
.card:hover::before,.mod:hover::before,.loop__step:hover::before,.aud__c:hover::before,.stat:hover::before{ opacity:1; }
.card::after,.mod::after,.loop__step::after,.aud__c::after,.stat::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%; z-index:2;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.card:hover::after,.mod:hover::after,.loop__step:hover::after,.aud__c:hover::after,.stat:hover::after{ transform:scaleX(1); }
/* standalone cards can lift */
.card{ transition:border-color .35s, transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s; }
.card:hover{ transform:translateY(-6px); border-color:rgba(242,166,60,.5); box-shadow:0 30px 66px -34px rgba(242,166,60,.5); }
.light .card:hover{ box-shadow:0 28px 60px -30px rgba(12,19,28,.4); border-color:rgba(242,166,60,.6); }
/* grid cells: inset ring instead of lift (containers clip) */
.mod,.loop__step,.aud__c,.stat{ transition:background .35s, box-shadow .4s; }
.mod:hover,.loop__step:hover,.aud__c:hover,.stat:hover{ background:var(--navy-700); box-shadow:inset 0 0 0 1px rgba(242,166,60,.35); }
.light .stat:hover{ background:#fff; box-shadow:inset 0 0 0 1px rgba(242,166,60,.5); }
@media (prefers-reduced-motion: reduce){
  .card:hover,.mod:hover,.loop__step:hover,.aud__c:hover,.stat:hover{ transform:none; }
  .card::after,.mod::after,.loop__step::after,.aud__c::after,.stat::after{ transition:none; }
}

/* ---- reveal: add gentle scale ---- */
.reveal{ transform:translateY(24px) scale(.985); }
.reveal.in{ transform:none; }

/* ---- Hero image band (About / interior) ---- */
.hero-band{ position:relative; min-height:74vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-band>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-band .veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(12,19,28,.94) 0%, rgba(12,19,28,.74) 46%, rgba(12,19,28,.28) 100%),
             linear-gradient(180deg, rgba(12,19,28,.35) 0%, transparent 30%, var(--navy) 99%); }
.hero-band__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(46px,6vw,88px); padding-top:clamp(150px,20vh,240px); }
.hero-band__inner .display{ max-width:16ch; }

/* ---- Larger Troola screenshots (60%+ bigger, full-width blocks) ---- */
.shot--xl{ margin-top:clamp(28px,3.5vw,52px); }
.shot--xl img{ width:100%; display:block; }
.shot-frame{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-strong); box-shadow:0 50px 120px -50px rgba(0,0,0,.85); }
.shot-lead{ max-width:60ch; }

/* ---- Centered single-column form ---- */
.form-wrap{ max-width:780px; margin:0 auto; }

.logo__mark img{ width:100%; height:100%; display:block; }

/* exact Troola logo (wordmark + teal square), image, dark sections only */
.troola-logo{ height:0.9em; width:auto; display:inline-block; vertical-align:-0.09em; }
.troola-logo--hero{ height:clamp(60px,11vw,132px); width:auto; display:block; }

/* exact Troola lockup (mark-less wordmark + teal square) per Troola design system v1.0 */
.troola-lockup{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em; color:var(--white); white-space:nowrap; display:inline-block; }
.troola-lockup .sq{ display:inline-block; width:0.16em; height:0.16em; border-radius:0.02em; background:#06B6A4; vertical-align:baseline; margin-left:0.04em; }
.troola-lockup--hero{ font-size:clamp(3.4rem,9vw,7rem); line-height:1; }

/* ============================================================
   v3: accessibility, focus, skip-link, mobile hero, thank-you, trust
   ============================================================ */

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--amber); outline-offset:3px; border-radius:6px;
}
:focus:not(:focus-visible){ outline:none; }

/* skip to content */
.skip-link{
  position:fixed; left:16px; top:-60px; z-index:200;
  background:var(--amber); color:var(--navy); font-family:var(--font-mono);
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.7em 1.1em; border-radius:8px; transition:top .2s;
}
.skip-link:focus{ top:16px; }

/* mobile: keep hero CTA above the fold, trim readout */
@media (max-width: 640px){
  .hero{ min-height:88svh; }
  .hero__inner{ padding-top:84px; padding-bottom:40px; }
  .hero__inner .lede{ font-size:1.05rem; margin-top:1.3rem !important; }
  .readout{ margin-top:1.6rem; gap:.4rem 1.4rem; }
  .readout span:nth-child(n+3){ display:none; }
}

/* form success (thank-you) state */
.form-done{ display:none; text-align:center; padding:1rem 0; }
.form.is-done .form-fields{ display:none; }
.form.is-done .form-done{ display:block; animation:fade .5s ease; }
.form-done .tick{ width:54px; height:54px; margin:0 auto 1.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--amber-soft); color:var(--amber); font-size:1.6rem; border:1px solid rgba(242,166,60,.4); }
.form-done h3{ margin-bottom:.6rem; }
.form-done p{ color:var(--text-dim); max-width:42ch; margin:0 auto; }

/* mailto fallback line */
.form-fallback{ display:none; margin-top:.4rem; }
.form-fallback a{ color:var(--amber); border-bottom:1px solid rgba(242,166,60,.4); }

/* trust strip */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust__inner{ display:flex; align-items:center; justify-content:center; gap:clamp(1.4rem,4vw,3.2rem);
  flex-wrap:wrap; padding-block:clamp(24px,3vw,40px); }
.trust__label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute); }
.trust__item{ font-family:var(--font-display); font-weight:600; color:var(--text); font-size:clamp(.95rem,1.4vw,1.1rem); }
.trust__item .amber{ color:var(--amber); }

/* next-steps note (demo) */
.next-steps{ margin-top:1.6rem; padding:1rem 1.2rem; border-radius:10px; border:1px solid var(--line);
  background:var(--navy-800); font-size:.9rem; color:var(--text-dim); }
.next-steps b{ color:var(--white); font-weight:600; }

/* ============================================================
   v4: bespoke "signal convergence" tech graphic (code, no image)
   ============================================================ */
.signal-graphic{ position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:radial-gradient(120% 130% at 82% 45%, rgba(242,166,60,.07), transparent 58%), var(--navy-800); }
.signal-graphic svg{ width:100%; height:auto; display:block; }
.sg-line{ fill:none; stroke:var(--amber); stroke-width:1.4; opacity:.55; stroke-dasharray:5 9; animation:sgflow 7s linear infinite; }
.sg-line.b{ opacity:.3; }
@keyframes sgflow{ to{ stroke-dashoffset:-140; } }
.sg-chip rect{ fill:var(--navy-700); stroke:var(--line-strong); stroke-width:1; }
.sg-chip text{ fill:var(--text-dim); font-family:var(--font-mono); font-size:15px; letter-spacing:.02em; }
.sg-dot{ fill:var(--amber); }
.sg-core-label{ fill:var(--white); font-family:var(--font-display); font-weight:700; font-size:19px; }
.sg-core-sub{ fill:var(--text-mute); font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.sg-grid circle{ fill:rgba(194,202,212,.05); }
@media (prefers-reduced-motion: reduce){ .sg-line{ animation:none; } }