/* Tech Machine AI: brand + "feed the machine" layer. Linked last. Palette: Navy #14234B, Cream #F5F1E8, Cyan #22C3E6, Ink #0B0F1A. */
:root{
  --tm-navy:#14234B;--tm-cream:#F5F1E8;--tm-cyan:#22C3E6;--tm-ink:#0B0F1A;
  --bg:#0B0F1A;--bg2:#0D1428;--panel:#101A38;--panel-paid:#14234B;
  --panel-line:rgba(120,150,225,.24);--panel-line-paid:rgba(120,150,225,.40);--vi:#4A6BC8;
  --hair:rgba(245,241,232,.10);--hair2:rgba(245,241,232,.16);
  --u-line:#222F58;
  --glow:radial-gradient(closest-side,rgba(34,195,230,.10),rgba(20,35,75,.35) 55%,transparent);
}
html,body{background:#0B0F1A}
.site-head,.hero{--bg:#0B0F1A}
.site-head{background:rgba(11,15,26,.82)}
main>section:not(.hero),body>section:not(.hero),.foot{background-color:#0B0F1A}
.ba,.how,.faq{background-color:#0B0F1A}
.about,.book{background-color:#0D1428}

/* ---------- header + footer logo ---------- */
.brand img{height:48px;width:auto}
@media (max-width:767.98px){.brand img{height:34px}}
@media (max-width:420px){.brand img{height:30px}}
.site-head .brand-tag{display:none!important}
.foot-l img{height:40px;width:auto}
.foot-l{gap:12px 24px}
.foot-copy{margin-top:24px;font-size:14px;line-height:22px;color:var(--tx3)}
.foot-copy a{color:var(--tx2);text-decoration:none;border-bottom:1px solid rgba(245,241,232,.3)}
.foot-copy a:hover{color:#fff;border-bottom-color:var(--ac)}

/* ---------- hero ---------- */
html body .hero{background:#0B0F1A;position:relative;isolation:isolate;overflow:hidden}
html body .hero::before{display:block;content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(52% 60% at 12% 0%,rgba(34,195,230,.085),transparent 70%),
    radial-gradient(60% 70% at 92% 30%,rgba(20,35,75,.75),transparent 72%),
    linear-gradient(rgba(245,241,232,.026) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(245,241,232,.026) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(80% 85% at 50% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(80% 85% at 50% 0%,#000 30%,transparent 78%)}
/* faint cog mark: the feed port points at the headline */
html body .hero::after{content:"";position:absolute;z-index:-1;left:auto;right:-170px;bottom:-190px;top:auto;width:720px;height:720px;transform:none;
  background:url(assets/icon-dark.svg) center/contain no-repeat;opacity:.04;pointer-events:none;border:0}
@media (max-width:1023.98px){html body .hero::after{width:480px;height:480px;right:-170px;bottom:-110px}}
@media (max-width:767.98px){html body .hero::after{display:none}}
html body .hero h1{font-size:clamp(56px,5.7vw,84px)!important;line-height:1.06!important}
html body .hero .tm-eyebrow{margin:0 0 20px;font:600 clamp(16px,1.3vw,19px)/1.3 'Inter',system-ui,sans-serif;letter-spacing:.01em;color:var(--tm-cyan);text-align:inherit}
html body .hero h1 .h1g{color:var(--tm-cyan)}
html body .hero h1 .h1a,html body .hero h1 .h1a .h1l{display:block}
@media (min-width:1024px){html body .hero h1 .h1a .h1l{white-space:nowrap!important}}
.dg-lines path{stroke-dasharray:5 7;stroke-linecap:butt}
@media (max-width:1023.98px){html body .hero h1{font-size:clamp(52px,8.4vw,76px)!important}}
@media (max-width:1023.98px){
  html body .hero h1 .h1l{display:inline!important;white-space:normal!important}
  html body .hero h1{text-wrap:balance}
  html body .hero h1 .h1a{display:block!important}
  html body .hero h1 .h1a .h1l:not(.h1g){display:block!important;text-wrap:balance}
  html body .hero h1 .h1a .h1g{display:block!important;white-space:nowrap!important}
}
@media (min-width:560px) and (max-width:1023.98px){html body .hero h1{font-size:clamp(38px,6.1vw,58px)!important}}
@media (max-width:559.98px){html body .hero h1{font-size:clamp(34px,10.4vw,60px)!important;line-height:1.08!important}}
html body .hero .sub{max-width:660px!important;text-wrap:pretty}
@media (min-width:1024px){html body .hero .sub{font-size:22px!important;line-height:1.5!important}}

/* ---------- panels in navy ---------- */
.wid-card,.tl-card,.ba-table,.calc,.bk-card{background:linear-gradient(180deg,#121D40 0%,#0F1936 100%);border-color:var(--panel-line)}
.calc-r{background:linear-gradient(160deg,#17285A,#14234B 60%,#101C3E)!important;border-left:1px solid var(--panel-line-paid)}
.calc-r::before{background:linear-gradient(90deg,rgba(34,195,230,.0),rgba(34,195,230,.9),rgba(34,195,230,.0))!important;opacity:1!important}
.tlv,.rcp{background:#0B1230;border-color:var(--u-line)}
.pain-list{border-color:var(--u-line);background:linear-gradient(180deg,#101A38,#0C1330)}
.pain-card{border-color:var(--u-line)}
.ba-row,.ba-head{border-color:var(--u-line)!important}
.about::before,.book::after{display:none}
.bk-form input{background:#0B1230!important;border-color:rgba(245,241,232,.22)}
.bk-form input:focus{border-color:var(--tm-cyan)!important}
.tl-ck .ck,.ba-wt .ck{stroke:var(--tm-cyan)}
/* purple is retired: slider fills and hairlines go navy to cyan */
.sl input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#2F55B8,#22C3E6) 0 0/var(--p) 100% no-repeat,rgba(245,241,232,.14)}
.sl input[type=range]::-moz-range-progress{background:linear-gradient(90deg,#2F55B8,#22C3E6)}

/* ---------- "01" diagram: the feed cog machine ---------- */
.dg{background:#070A14;border-color:#222F58;position:relative;overflow:hidden}
.dg::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 60% at 50% 52%,rgba(20,35,75,.65),transparent 72%)}
.dg-body{position:relative;z-index:1}
.dg-lbl{color:var(--tx3);letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:600}
.dg-tile{background:#0C1330;border-color:#222F58}
.dg-tile .dg-ic{color:var(--tm-cyan)}
.dg-row{background:rgba(34,195,230,.08);border-color:rgba(34,195,230,.34)}
.dg-core{width:220px;height:220px}
.dg-ring{display:none}
.dg-box{width:210px;height:210px;border:0;border-radius:0;background:transparent;box-shadow:none}
.dg-box img{width:210px;height:210px;filter:drop-shadow(0 0 28px rgba(34,195,230,.18))}
.dg-name,.dg-sub{background:#070A14}
.dg-cap{max-width:640px;margin-left:auto;margin-right:auto;color:var(--tx2);font-size:17px;line-height:26px;text-wrap:balance}
@media (max-width:819.98px){
  .dg-core{width:150px;height:150px;margin-top:0}
  .dg-box{width:140px;height:140px}.dg-box img{width:140px;height:140px}
  .dg-cap{font-size:16px;line-height:24px}
}

/* hero fills the first screen again (>=768px): section 01 always starts below the fold.
   Content is centered, with a bit more bottom padding so it sits slightly above center. */
@media (min-width:768px){html body .hero{min-height:calc(100vh - var(--nav-h))!important;min-height:calc(100svh - var(--nav-h))!important;justify-content:center!important;padding-top:72px!important;padding-bottom:104px!important}
  html body .whatido{padding-top:120px!important}}