/* Land Passport — Derby (derbypilot.foxintelligence.co.uk)
   Brand type, colour schemes, live reach panel, section 03 marks, FAQ, motion and responsive layer.
   Loaded after derby-briefing-polish.css. */

/* ---------- 1. Colour schemes ---------- */
:root,html[data-theme="green"]{
 --bg:#081315;--hero-a:#081416;--hero-b:#0a1b20;--hero-c:#091319;--hero-glow:rgba(29,91,86,.24);
 --nav-bg:rgba(8,19,21,.9);--sec-1:#09171a;--sec-2a:#102525;--sec-2b:#09181b;--sec-contact:#091719;--sec-foot:#061113;
 --stage:#0b191b;--card-a:#17312e;--card-b:#102322;--card-c:#0e2224;--contrast-new:#14302e;
 --light-1:#f6f5ef;--light-2:#ebece5;
 --text:#f6f5ef;--text-soft:#c8d7d4;--text-mute:#a9b9b5;--nav-link:#c8d4d1;--eyebrow:#c8ad76;--gold:#c8ad76;--gold2:#e0c895;
 --line:rgba(226,231,220,.18);--panel:rgba(9,26,28,.72);--panel-line:rgba(200,173,118,.28);--spot:rgba(200,173,118,.10);
 --mark-stroke:#d9b77c;--mark-text:#efe6d2;
}
html[data-theme="navy"]{
 --bg:#08111f;--hero-a:#08111e;--hero-b:#0c1a30;--hero-c:#09121f;--hero-glow:rgba(52,92,156,.26);
 --nav-bg:rgba(8,16,30,.9);--sec-1:#0a1526;--sec-2a:#12213a;--sec-2b:#0a1527;--sec-contact:#0a1426;--sec-foot:#060d18;
 --stage:#0b1628;--card-a:#18294a;--card-b:#101d36;--card-c:#0d1a30;--contrast-new:#15264a;
 --light-1:#f4f5f7;--light-2:#e8ebf0;
 --text:#f3f5f9;--text-soft:#c6d0df;--text-mute:#9fadc2;--nav-link:#c4cfdf;--eyebrow:#cdb27a;--gold:#c8ad76;--gold2:#e2cb98;
 --line:rgba(214,224,242,.16);--panel:rgba(10,22,42,.74);--panel-line:rgba(200,173,118,.3);--spot:rgba(120,160,230,.10);
 --mark-stroke:#d9b77c;--mark-text:#eef0f6;
}
html[data-theme="grey"]{
 --bg:#eceef1;--hero-a:#f3f4f6;--hero-b:#e8ebef;--hero-c:#dfe3e8;--hero-glow:rgba(200,173,118,.22);
 --nav-bg:rgba(243,244,246,.9);--sec-1:#e5e8ec;--sec-2a:#dfe3e8;--sec-2b:#eef0f3;--sec-contact:#e4e7eb;--sec-foot:#d8dce1;
 --stage:#1c232b;--card-a:#2a3440;--card-b:#202831;--card-c:#1b222a;--contrast-new:#26303b;
 --light-1:#f8f9fa;--light-2:#eef0f2;
 --text:#16212b;--text-soft:#3b4853;--text-mute:#5c6874;--nav-link:#33404b;--eyebrow:#7d6330;--gold:#a8874a;--gold2:#7a5c26;
 --line:rgba(22,33,43,.14);--panel:rgba(255,255,255,.72);--panel-line:rgba(122,92,38,.28);--spot:rgba(168,135,74,.14);
 --mark-stroke:#d9b77c;--mark-text:#efe6d2;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);transition:background-color .45s ease,color .45s ease}

/* ---------- 2. Typography: Space Grotesk (display) + Inter (text) + Plex Mono (labels) ---------- */
body{font-family:var(--font);font-weight:400;letter-spacing:-.006em;font-feature-settings:"cv11","ss01","ss03"}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.045em;line-height:1.0}
h1{font-size:clamp(3.2rem,5.5vw,6.1rem)}
h2{font-size:clamp(2.5rem,4.2vw,4.5rem)}
.hero h1 span{font-style:normal;font-weight:500;background:linear-gradient(100deg,var(--gold2) 0%,var(--gold) 38%,#f4e2b8 50%,var(--gold) 62%,var(--gold2) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldSheen 7s ease-in-out infinite}
@keyframes goldSheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.contrast h3,.film-copy h3,.passport-top strong,.passport-metrics .phase-title,.context-item h3,.track-item h3,.pilot-table h3,.pilot-number b,.passport-orb .central{font-family:var(--serif);font-weight:500;letter-spacing:-.03em}
.contrast h3{font-size:clamp(1.8rem,2.6vw,2.7rem)}
.context-item h3,.track-item h3,.pilot-table h3{font-size:1.5rem}
.film-copy h3{font-size:clamp(1.6rem,2.3vw,2.2rem)}
.passport-metrics .phase-title{font-size:clamp(1.35rem,1.9vw,1.85rem)}
.pilot-number b{letter-spacing:-.06em}
.brand-copy strong{font-family:var(--serif);font-weight:600;letter-spacing:.22em;font-size:.82rem}
.btn{font-family:var(--font);font-weight:600;letter-spacing:.01em}
.lead{font-weight:300;font-size:clamp(1.12rem,1.35vw,1.36rem)}
.phase-btn strong,.mini-links a,.record-list span{font-weight:500}
.brand-logo{width:44px;height:44px;flex:none;object-fit:contain;filter:drop-shadow(0 0 10px rgba(200,173,118,.25));transition:transform .4s}
.brand:hover .brand-logo{transform:translateY(-2px) scale(1.04)}

/* ---------- 3. Themed surfaces ---------- */
.site-nav{background:var(--nav-bg);border-bottom-color:var(--line);transition:background-color .45s ease}
.nav-menu a{color:var(--nav-link)}.nav-menu a:hover{color:var(--text)}
.brand-symbol{border-color:var(--gold);color:var(--gold)}
.hero{background:radial-gradient(ellipse 65% 50% at 83% 45%,var(--hero-glow),transparent 65%),linear-gradient(135deg,var(--hero-a) 0%,var(--hero-b) 57%,var(--hero-c) 100%)}
.hero .lead{color:var(--text-soft)}.hero-disclaimer{color:var(--text-mute);border-top-color:var(--line)}
.hero h1 span{color:var(--gold2)}
.eyebrow{color:var(--eyebrow)}
.btn.ghost{color:var(--text);border-color:color-mix(in srgb,var(--text) 40%,transparent)}
.lifecycle{background:radial-gradient(ellipse 45% 48% at 78% 43%,var(--hero-glow),transparent 70%),var(--sec-1);border-top-color:var(--line)}
.lifecycle-copy .lead{color:var(--text-soft)}
.phase-btn{color:var(--text-soft);border-color:var(--line);background:color-mix(in srgb,var(--text) 3%,transparent)}
.phase-btn[aria-selected=true]{color:var(--text)}
.phase-btn small{color:var(--text-mute)}
.passport-card{color:#f6f5ef;background:linear-gradient(145deg,var(--card-a) 0%,var(--card-b) 58%,var(--card-c) 100%)}
.contrast.new{background:var(--contrast-new)}
.problem,.pilot,.faq{background:var(--light-1)}
.derby{background:linear-gradient(165deg,var(--sec-2a),var(--sec-2b));border-top-color:var(--line)}
.derby .lead,.gap-note{color:var(--text-soft)}
.context-item{border-color:var(--line);background:color-mix(in srgb,var(--text) 4%,transparent)}
.context-item p{color:var(--text-soft)}
.context-item a{color:var(--gold2)}
.contact{background:radial-gradient(ellipse 80% 100% at 50% 100%,var(--hero-glow),transparent 65%),var(--sec-contact)}
.contact .lead{color:var(--text-soft)}.sig{color:var(--text-mute);border-top-color:var(--line)}.sig strong{color:var(--text)}.sig a{color:var(--gold2)}
.foot{background:var(--sec-foot);color:var(--text-mute)}.foot a{color:var(--text-soft)}
html[data-theme] #proof.demo{background:var(--stage)!important}
html[data-theme] #proof.demo .derby-twin-embedded,html[data-theme] #proof.demo .derby-twin-embedded iframe{background:var(--stage)!important}
html[data-theme="grey"] .hero h1{color:#16212b}
html[data-theme="grey"] .on-light .eyebrow{color:#7d6330}
html[data-theme="grey"] .btn{color:#14202a}
html[data-theme="grey"] .contact .btn.ghost,html[data-theme="grey"] .hero .btn.ghost{color:#16212b;border-color:rgba(22,33,43,.4)}
html[data-theme="grey"] .film-dialog{color:#fff}
html[data-theme="grey"] ::selection{color:#16212b}

/* ---------- 4. Theme switch + mobile menu ---------- */
.theme-switch{display:flex;gap:4px;align-items:center;margin-left:14px;padding:4px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--text) 4%,transparent)}
.theme-switch button{width:28px;height:28px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;padding:0;transition:transform .2s}
.theme-switch button:hover{transform:scale(1.08)}
.theme-switch .sw{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.sw-navy{background:linear-gradient(135deg,#1b2d52,#0a1426)}
.sw-green{background:linear-gradient(135deg,#1f4a40,#0a1a1c)}
.sw-grey{background:linear-gradient(135deg,#f3f4f6,#c9ced5)}
.theme-switch button[aria-checked="true"]{box-shadow:0 0 0 1.5px var(--gold)}
.nav-toggle{display:none;width:44px;height:44px;margin-left:6px;border:1px solid var(--line);border-radius:3px;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--text);transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 5. Hero: spotlight + live reach panel ---------- */
.hero{--mx:70%;--my:40%}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(420px circle at var(--mx) var(--my),var(--spot),transparent 70%);opacity:0;transition:opacity .5s}
.hero.spot-on:after{opacity:1}
.hero{padding-top:150px}
.live-stats{position:absolute;top:26px;right:max(38px,calc((100% - 1200px)/2));z-index:4;width:322px;padding:13px 15px 11px;border:1px solid var(--panel-line);border-radius:6px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.ls-head{display:flex;align-items:center;gap:8px;font:500 .6rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:9px}
.ls-dot{width:7px;height:7px;border-radius:50%;background:#6fd3a5;box-shadow:0 0 0 0 rgba(111,211,165,.55);animation:lsPulse 2.2s ease-out infinite}
@keyframes lsPulse{0%{box-shadow:0 0 0 0 rgba(111,211,165,.55)}70%{box-shadow:0 0 0 9px rgba(111,211,165,0)}100%{box-shadow:0 0 0 0 rgba(111,211,165,0)}}
.ls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;margin:0}
.ls-grid div{border-top:1px solid var(--line);padding-top:6px;min-width:0}
.ls-grid dt{font:500 .55rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute)}
.ls-grid dd{margin:2px 0 0;font:600 1.18rem/1.15 var(--font);color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.live-stats[data-state="loading"] dd{opacity:.45}
.ls-foot{margin:9px 0 0;font-size:.62rem;line-height:1.45;color:var(--text-mute)}

/* ---------- 6. Section 03: one-line heading, marks, caption, links ---------- */
#proof .derby-twin-intro{max-width:none}
#proof .derby-twin-intro h2.one-line{white-space:nowrap;font-size:clamp(1.3rem,4.6vw,4.5rem);margin:12px 0 26px;color:#f2f1e8}
.id-marks{display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,64px);margin:0 auto 6px}
.id-mark{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--mark-text)}
.id-mark svg{width:clamp(64px,7vw,92px);height:auto;fill:none;stroke:var(--mark-stroke);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 0 14px rgba(217,183,124,.18))}
.id-mark svg path{stroke-dasharray:1;stroke-dashoffset:0}
.js-motion .id-marks:not(.drawn) .id-mark svg path{stroke-dashoffset:1;stroke-opacity:0}
.js-motion .id-marks .id-mark svg path{transition:stroke-dashoffset 1.6s cubic-bezier(.6,.05,.25,1),stroke-opacity .25s}
.js-motion .id-marks .id-mark svg path:nth-child(2n){transition-delay:.12s}
.js-motion .id-marks .id-mark svg path:nth-child(3n){transition-delay:.24s}
.js-motion .id-marks .id-mark:last-child svg path{transition-delay:.45s}
.id-mark figcaption{font:500 clamp(.62rem,.9vw,.8rem)/1.3 var(--font);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.id-mark:hover svg{filter:drop-shadow(0 0 20px rgba(217,183,124,.42))}
.id-link{position:relative;width:clamp(60px,12vw,170px);height:30px;display:flex;align-items:center;margin-bottom:28px}
.id-link-line{position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(217,183,124,.5)}
.id-link-pulse{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#e2c48b;box-shadow:0 0 12px rgba(226,196,139,.9);animation:idFlow 3.2s ease-in-out infinite}
@keyframes idFlow{0%{left:0;opacity:0}12%{opacity:1}50%{left:calc(100% - 9px)}88%{opacity:1}100%{left:0;opacity:0}}
.id-link-tag{position:absolute;left:50%;top:100%;transform:translate(-50%,2px);font:500 .55rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a9b8b0;white-space:nowrap}
.derby-twin-caption{margin:22px auto 0;max-width:760px;text-align:center;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.7;color:#b8c8c0}
#proof.demo .derby-twin-links{margin-top:30px}
#proof.demo .derby-twin-links a{font-size:clamp(1.05rem,1.45vw,1.3rem);font-weight:500;padding:26px 2px 27px;letter-spacing:-.005em}
#proof.demo .derby-twin-links a span:last-child{font-size:1.45rem;transition:transform .25s}
#proof.demo .derby-twin-links a:hover span:last-child{transform:translate(3px,-3px)}

/* ---------- 7. FAQ ---------- */
.faq{color:var(--ink);padding:100px 0;border-top:1px solid rgba(20,40,40,.1)}
.faq .section-header{margin-bottom:34px}
.faq-list{border-top:1px solid #d3d9d1;max-width:920px}
html[data-theme="navy"] .faq-list,html[data-theme="navy"] .faq-item{border-color:#d3d8e2}
.faq-item{border-bottom:1px solid #d3d9d1}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;font:500 clamp(1.08rem,1.5vw,1.32rem)/1.3 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:#4a6a5c}
html[data-theme="navy"] .faq-item summary:hover{color:#2d4a7a}
.faq-icon{position:relative;flex:none;width:30px;height:30px;border:1px solid #b9c3ba;border-radius:50%}
.faq-icon:before,.faq-icon:after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:#8c7445;transform:translate(-50%,-50%);transition:transform .3s}
.faq-icon:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-icon:after{transform:translate(-50%,-50%) rotate(0)}
.faq-body{padding:0 4px 24px;max-width:780px}
.faq-body p{margin:0;color:#4d5e58;font-size:.98rem;line-height:1.8}
.faq-item[open] .faq-body{animation:faqIn .45s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 8. Motion helpers ---------- */
.tilt{transform-style:preserve-3d;transition:opacity .7s ease,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;will-change:transform}
.tilt.tilting{transition:transform .08s linear}
.btn.magnetic{transition:background .25s,transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.reveal{transition-delay:var(--rd,0s)}
.hero-graphics.hero-land-iq{will-change:transform}

/* ---------- 9. Responsive ---------- */
@media (max-width:1180px){.live-stats{width:290px}.ls-grid dd{font-size:1.05rem}.theme-switch{margin-left:8px}.nav-menu{gap:20px}}
@media (max-width:1240px){.nav-menu{gap:16px}.nav-menu a{font-size:.76rem;white-space:nowrap}}
@media (max-width:1180px){
 .nav-toggle{display:flex}
 .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;padding:6px max(19px,calc((100% - 680px)/2)) 18px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(0,0,0,.28);max-height:calc(100svh - 74px);overflow:auto}
 .nav-menu a{white-space:normal}
 .nav-menu.open{display:flex;animation:faqIn .3s ease}
 .nav-menu a{padding:14px 2px;font-size:.95rem;border-bottom:1px solid var(--line)}
 .nav-menu a:last-child{border-bottom:0}
 .theme-switch{margin-left:auto}
 .nav-cta{margin-left:8px}
}
@media (max-width:820px){
 .hero{padding-top:28px;flex-direction:column;align-items:stretch}
 .live-stats{position:relative;top:auto;right:auto;width:min(680px,calc(100% - 38px));margin:0 auto 34px}
 .ls-grid{grid-template-columns:repeat(6,1fr)}
 .id-link{width:clamp(36px,10vw,90px)}
}
@media (max-width:600px){
 .nav-cta{display:none}
 .nav-inner{gap:10px}
 .brand-copy small{font-size:.5rem;letter-spacing:.08em}
 .theme-switch{gap:2px;padding:3px}
 .nav-toggle{width:40px;height:40px;flex:none}
 #proof.demo .derby-twin-hint{display:none}
 .theme-switch button{width:26px;height:26px}
 .ls-grid{grid-template-columns:repeat(3,1fr)}
 .ls-grid dd{font-size:1.02rem}
 h1{font-size:clamp(2.9rem,12.5vw,3.9rem)}
 h2{font-size:clamp(2.4rem,10vw,3.2rem)}
 #proof .derby-twin-intro h2.one-line{font-size:clamp(1.1rem,5.6vw,1.8rem);margin-bottom:20px}
 .id-marks{gap:10px}
 .id-mark svg{width:56px}
 .id-mark figcaption{font-size:.56rem;letter-spacing:.1em}
 .id-link-tag{display:none}
 .id-link{margin-bottom:22px}
 .derby-twin-caption{font-size:.95rem;margin-top:16px}
 #proof.demo .derby-twin-links a{font-size:1.02rem;padding:19px 3px}
 .faq{padding:72px 0}
 .faq-item summary{font-size:1.05rem;padding:18px 2px}
 .wrap,.nav-inner{width:calc(100% - 32px)}
 .live-stats{width:calc(100% - 32px)}
}
@media (max-width:420px){.brand-copy small{display:none}.brand-symbol{width:28px;height:28px;font-size:18px}.ls-grid dd{font-size:.95rem}}
@media (hover:none){.tilt{transform:none!important}}
@media (prefers-reduced-motion:reduce){.ls-dot,.id-link-pulse{animation:none}.hero:after{display:none}.js-motion .id-marks:not(.drawn) .id-mark svg path{stroke-dashoffset:0}}

/* ---------- 10. Hero photograph: land to city, blended into the scheme ---------- */
.hero-photo{position:absolute;inset:-4%;z-index:-1;pointer-events:none;background:url('/assets/derby-hero-land-to-city.webp') center 52%/cover no-repeat;opacity:.34;mix-blend-mode:luminosity;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,#000 55%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,#000 55%,rgba(0,0,0,0) 100%);animation:heroDrift 38s ease-in-out infinite alternate}
.hero:before{z-index:-1}
.hero-scan{position:absolute;left:0;right:0;top:0;height:180px;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent,var(--spot) 50%,transparent);opacity:.9;animation:heroScan 11s linear infinite}
@keyframes heroDrift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
@keyframes heroScan{from{transform:translateY(-200px)}to{transform:translateY(1000px)}}
html[data-theme="navy"] .hero-photo{opacity:.38}
html[data-theme="grey"] .hero-photo{mix-blend-mode:multiply;opacity:.13;filter:grayscale(1) contrast(1.1)}
.hero .wrap,.live-stats{position:relative;z-index:2}
.live-stats{position:absolute}
@media (max-width:820px){.hero-photo{background-image:url('/assets/derby-hero-land-to-city-1000.webp');opacity:.26}.live-stats{position:relative}}

/* ---------- 11. Connection motion: flow rails, step sync, FAQ thread ---------- */
.flow-rail{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:15px;height:22px;margin:16px 0 0}
.flow-rail[data-label="pilot"]{gap:17px;margin:46px 0 0}
.flow-rail[data-label="pilot"]+.pilot-track{margin-top:14px}
.flow-cell{display:flex;align-items:center;gap:9px;min-width:0}
.flow-node{flex:none;width:11px;height:11px;border-radius:50%;border:1.5px solid #a88a52;background:var(--light-1);animation:nodeGlow calc(var(--n) * 1.1s) ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s)}
.flow-seg{position:relative;flex:1;height:1.5px;margin-right:6px;background:repeating-linear-gradient(90deg,#b9a274 0 7px,transparent 7px 12px);background-size:12px 100%;animation:segMove .9s linear infinite;opacity:.85}
.flow-seg:after{content:'';position:absolute;right:-5px;top:50%;width:7px;height:7px;border-top:1.5px solid #a88a52;border-right:1.5px solid #a88a52;transform:translateY(-50%) rotate(45deg)}
.flow-cell:last-child .flow-seg{background:linear-gradient(90deg,#b9a274,transparent)}
.flow-cell:last-child .flow-seg:after{opacity:.35}
.flow-pulse{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#d4b475;box-shadow:0 0 12px 2px rgba(212,180,117,.75);animation:flowRun calc(var(--n) * 1.1s) linear infinite;z-index:1}
@keyframes segMove{to{background-position:12px 0}}
@keyframes flowRun{0%{left:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes nodeGlow{0%,34%,100%{background:var(--light-1);box-shadow:0 0 0 0 rgba(200,173,118,0)}8%,24%{background:#c8ad76;box-shadow:0 0 0 6px rgba(200,173,118,.18)}}
.protocol div{transition:border-color .3s;animation:stepSync 4.4s ease-in-out infinite}
.protocol div:nth-child(2){animation-delay:1.1s}.protocol div:nth-child(3){animation-delay:2.2s}.protocol div:nth-child(4){animation-delay:3.3s}
.track-item{animation:stepSync 3.3s ease-in-out infinite}
.track-item:nth-child(2){animation-delay:1.1s}.track-item:nth-child(3){animation-delay:2.2s}
@keyframes stepSync{0%,34%,100%{border-top-color:#b9c3ba}8%,24%{border-top-color:#c8ad76}}
.track-item{border-top-width:2px}
.faq-list{position:relative;padding-left:44px}
.faq-thread{position:absolute;left:15px;top:0;bottom:0;width:1.5px;background:linear-gradient(180deg,#d3d9d1,#c9b88f 50%,#d3d9d1)}
.faq-pulse{position:absolute;left:-3.5px;top:0;width:8.5px;height:8.5px;border-radius:50%;background:#c8ad76;box-shadow:0 0 12px 2px rgba(200,173,118,.7);animation:faqRun 6.5s ease-in-out infinite}
@keyframes faqRun{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:calc(100% - 9px);opacity:0}}
.faq-item{position:relative}
.faq-item:before{content:'';position:absolute;left:-34px;top:29px;width:10px;height:10px;border-radius:50%;border:1.5px solid #b9a274;background:var(--light-1);transition:background .3s,box-shadow .3s;z-index:1}
.faq-item:not(:last-child):after{content:'';position:absolute;left:-31.5px;bottom:-5px;width:5px;height:5px;border-right:1.5px solid #b9a274;border-bottom:1.5px solid #b9a274;transform:rotate(45deg);z-index:1;background:var(--light-1)}
.faq-item[open]:before,.faq-item:hover:before{background:#c8ad76;box-shadow:0 0 0 6px rgba(200,173,118,.18)}
@media (max-width:600px){.faq-list{padding-left:30px}.faq-thread{left:9px}.faq-item:before{left:-26px;top:25px}.faq-item:not(:last-child):after{left:-23.5px}.flow-rail{gap:8px}.flow-cell{gap:5px}}

/* ---------- 12. Section 03: hint bottom-right ---------- */
html[data-theme] #proof.demo .derby-twin-hint{top:auto;bottom:clamp(18px,2.6vw,32px);right:clamp(16px,2.6vw,36px)}

/* ---------- 13. Expandable contact form ---------- */
#contactToggle .ct-icon{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font-size:.95rem;line-height:1;transition:transform .35s}
#contactToggle[aria-expanded="true"] .ct-icon{transform:rotate(45deg)}
.contact-panel{max-width:860px;margin:30px auto 0;text-align:left}
.contact-panel.open{animation:panelIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.contact-form{position:relative;border:1px solid var(--panel-line);border-radius:10px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:clamp(20px,3vw,32px);box-shadow:0 24px 60px rgba(0,0,0,.22);overflow:hidden}
.contact-form:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:formBeam 3.5s ease-in-out infinite}
@keyframes formBeam{from{background-position:-60% 0}to{background-position:160% 0}}
.cf-head{display:flex;align-items:center;gap:9px;font:500 .62rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:18px}
.cf-dot{width:7px;height:7px;border-radius:50%;background:#6fd3a5;animation:lsPulse 2.2s ease-out infinite}
.cf-topics{border:0;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.cf-topics legend{font:500 .7rem var(--font);color:var(--text-mute);margin-bottom:9px;padding:0}
.cf-topics label{position:relative;cursor:pointer}
.cf-topics input{position:absolute;opacity:0;pointer-events:none}
.cf-topics span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:.8rem;color:var(--text-soft);transition:all .2s}
.cf-topics label:hover span{border-color:var(--gold)}
.cf-topics input:checked+span{background:var(--gold);border-color:var(--gold);color:#14211f}
.cf-topics input:focus-visible+span{outline:2px solid var(--gold2);outline-offset:3px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.cf-field{display:flex;flex-direction:column;gap:6px}
.cf-field>span{font:500 .62rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.cf-field b{color:var(--gold);font-weight:500}
.cf-field input,.cf-field textarea{width:100%;font:400 .98rem/1.5 var(--font);color:var(--text);background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--line);border-radius:6px;padding:12px 13px;transition:border-color .2s,box-shadow .2s,background .2s}
.cf-field textarea{resize:vertical;min-height:120px}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent);background:color-mix(in srgb,var(--text) 6%,transparent)}
.cf-field input[aria-invalid="true"],.cf-field textarea[aria-invalid="true"]{border-color:#d9776b}
.cf-wide{grid-column:1/-1}
.cf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;flex-wrap:wrap}
.cf-note{margin:0;font-size:.76rem;color:var(--text-mute);max-width:430px}
.cf-note a{color:var(--gold2)}
.cf-status{margin:14px 0 0;font-size:.86rem;min-height:1.3em;color:var(--text-soft)}
.cf-status.ok{color:#79d4a9}.cf-status.err{color:#e4917f}
.contact-form.sending #contactSend{opacity:.7;pointer-events:none}
.contact-form.sent .cf-grid,.contact-form.sent .cf-topics,.contact-form.sent .cf-foot{display:none}
.contact-form.sent .cf-status{font-size:1.05rem;margin:4px 0}
@media (max-width:600px){.cf-grid{grid-template-columns:1fr}.cf-foot{flex-direction:column;align-items:stretch}.cf-foot .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.hero-photo,.hero-scan,.flow-node,.flow-seg,.flow-pulse,.protocol div,.track-item,.faq-pulse,.contact-form:before,.hero h1 span{animation:none!important}.hero-scan,.flow-pulse,.faq-pulse{display:none}}