/*
  Tech Turn Technology v1.6
  Simplified soft Navy + Soft White palette for security assurance.
  Two source colours only:
    --ink: #0B1F33
    --base: #F7F9FC
*/
:root{
  --ink:#0B1F33;
  --base:#F7F9FC;

  --bg:var(--base);
  --bg-raised:color-mix(in srgb,var(--base) 97%,var(--ink));
  --panel:color-mix(in srgb,var(--base) 93%,var(--ink));
  --panel-strong:color-mix(in srgb,var(--base) 88%,var(--ink));
  --text:var(--ink);
  --muted:color-mix(in srgb,var(--ink) 58%,var(--base));
  --line:color-mix(in srgb,var(--ink) 12%,var(--base));
  --line-strong:color-mix(in srgb,var(--ink) 24%,var(--base));
  --shadow-soft:color-mix(in srgb,var(--ink) 10%,var(--base));
  --shadow-strong:color-mix(in srgb,var(--ink) 20%,var(--base));
  --accent:var(--ink);

  --max:1160px;
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:26px;
  --radius-full:9999px;
  --border:2px;
  --pop-shadow:6px 6px 0 var(--shadow-strong);
  --pop-shadow-hover:8px 8px 0 var(--shadow-strong);
  --pop-shadow-active:3px 3px 0 var(--shadow-strong);
  --bounce:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:"Plus Jakarta Sans","Avenir Next",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  background-color:var(--bg);
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1.1px);
  background-size:26px 26px;
}
a{color:inherit;text-decoration:none;text-underline-offset:.22em}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}
h1,h2,h3,h4,.brand,.btn,.metric{font-family:"Outfit","Avenir Next",ui-sans-serif,system-ui,sans-serif}
.container{width:min(var(--max),calc(100% - 40px));margin:auto;position:relative}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--accent);color:var(--ink);padding:10px 14px;border:2px solid var(--ink);border-radius:var(--radius-full);z-index:999;box-shadow:4px 4px 0 var(--ink)}

/* Top frame */
.topbar{background:var(--ink);border-bottom:1px dashed var(--line);color:color-mix(in srgb,var(--base) 88%,var(--ink));font-size:.83rem;letter-spacing:.02em}
.topbar .container{display:flex;justify-content:space-between;gap:16px;padding:8px 0}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--base) 92%,transparent);backdrop-filter:blur(14px);border-bottom:2px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.025em}
.mark{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:12px 12px 12px 3px;background:var(--base);color:var(--ink);font-weight:900;box-shadow:3px 3px 0 var(--shadow-strong);transition:transform .25s var(--bounce),box-shadow .25s var(--bounce)}
.brand:hover .mark{transform:translate(-2px,-2px) rotate(-3deg);box-shadow:6px 6px 0 var(--shadow-strong)}
.nav-links{display:flex;gap:21px;align-items:center;font-size:.92rem}
.nav-links>a:not(.nav-cta){position:relative;color:var(--ink);font-weight:650;padding:8px 0}
.nav-links>a:not(.nav-cta):after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:2px;background:var(--accent);transition:right .22s var(--bounce)}
.nav-links>a:not(.nav-cta):hover,.nav-links>a[aria-current="page"]{color:var(--ink)}
.nav-links>a:not(.nav-cta):hover:after,.nav-links>a[aria-current="page"]:after{right:0}
.nav-cta{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);padding:9px 14px;border-radius:var(--radius-full);color:var(--base)!important;background:var(--ink);font-weight:800;box-shadow:4px 4px 0 var(--shadow-strong);transition:transform .2s var(--bounce),box-shadow .2s var(--bounce)}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow-strong)}
.menu-btn{display:none;border:2px solid var(--ink);background:var(--base);color:var(--ink);border-radius:12px;padding:8px 10px;box-shadow:3px 3px 0 var(--shadow-strong)}

/* Hero, Stable Grid / Wild Decoration */
.hero{padding:94px 0 78px;position:relative;overflow:hidden;border-bottom:2px solid var(--line)}
.hero .container{z-index:2;padding-right:min(32vw,360px)}
.hero:before{
  content:"";position:absolute;width:330px;height:330px;right:max(4vw,36px);top:70px;border:3px solid var(--ink);border-radius:50%;background:color-mix(in srgb,var(--base) 98%,var(--ink));box-shadow:10px 10px 0 var(--shadow-soft);transform:rotate(-7deg);pointer-events:none
}
.hero:after{
  content:"";position:absolute;width:210px;height:210px;right:max(10vw,110px);top:120px;border:2px solid var(--ink);border-radius:48% 48% 8px 48%;background-color:var(--panel);background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 45%,transparent) 1.5px,transparent 1.6px);background-size:19px 19px;transform:rotate(10deg);pointer-events:none
}
.geo-layer{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.geo-shape{position:absolute;display:block;border:2px solid var(--accent)}
.geo-shape.a{width:42px;height:42px;right:6%;top:88px;border-radius:50%;background:var(--ink);box-shadow:4px 4px 0 var(--shadow-soft)}
.geo-shape.b{width:34px;height:34px;right:28%;bottom:70px;transform:rotate(28deg);background:color-mix(in srgb,var(--base) 96%,var(--ink));box-shadow:4px 4px 0 var(--shadow-soft)}
.geo-shape.c{width:68px;height:24px;right:4%;bottom:84px;border-radius:var(--radius-full);transform:rotate(-12deg);background:var(--panel-strong)}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.76rem;color:var(--ink);font-weight:900;display:inline-flex;align-items:center;gap:9px}
.eyebrow:before{content:"";width:12px;height:12px;background:var(--ink);border-radius:50% 50% 3px 50%;transform:rotate(20deg)}
.hero h1{font-size:clamp(2.7rem,5.1vw,5.25rem);line-height:1.01;letter-spacing:-.055em;margin:.4em 0 .34em;max-width:860px;text-wrap:balance}
.lead{font-size:1.17rem;color:var(--muted);max-width:760px}
.actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:30px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 18px;border-radius:var(--radius-full);font-weight:800;border:2px solid var(--ink);background:var(--base);color:var(--ink);transition:transform .22s var(--bounce),box-shadow .22s var(--bounce),background .22s ease,color .22s ease;will-change:transform}
.btn:after{content:"→";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid currentColor;font-size:.88rem;line-height:1}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--pop-shadow-hover);color:var(--base);background:var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--pop-shadow-active)}
.btn.primary{background:var(--ink);color:var(--base);box-shadow:var(--pop-shadow)}
.btn.primary:hover{box-shadow:var(--pop-shadow-hover)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--ink);color:var(--base);box-shadow:var(--pop-shadow)}
.btn[disabled]{opacity:.58;cursor:not-allowed;transform:none;box-shadow:none}

.trust-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.trust-strip span{font-size:.82rem;font-weight:700;border:2px solid var(--line);background:var(--bg-raised);color:var(--muted);padding:7px 11px;border-radius:var(--radius-full);box-shadow:2px 2px 0 var(--shadow-soft)}

/* Layout primitives */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.section{padding:80px 0;position:relative}
.section.tight{padding:52px 0}
.section.alt{background:var(--bg-raised);border-top:2px dashed var(--line);border-bottom:2px dashed var(--line);overflow:hidden}
.section.alt:before{content:"";position:absolute;width:180px;height:180px;left:-72px;top:38px;border:2px solid var(--ink);border-radius:50%;opacity:.15}
.section.alt:after{content:"";position:absolute;width:120px;height:120px;right:-42px;bottom:30px;background-image:linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 50%,var(--line) 50%,var(--line) 75%,transparent 75%);background-size:14px 14px;transform:rotate(9deg);opacity:.22}
.section h2{font-size:clamp(2.05rem,3vw,3.25rem);letter-spacing:-.045em;line-height:1.08;margin:.25em 0 .35em;text-wrap:balance}
.section-intro{max-width:780px;color:var(--muted);margin-bottom:32px}

/* Cards */
.card{position:relative;border:2px solid var(--line-strong);background:var(--panel);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 7px;padding:26px;box-shadow:6px 6px 0 var(--shadow-soft);transition:transform .26s var(--bounce),box-shadow .26s var(--bounce),border-color .26s ease;isolation:isolate}
.card:nth-child(even){border-radius:var(--radius-lg) 7px var(--radius-lg) var(--radius-lg)}
.card:before{content:"";position:absolute;width:16px;height:16px;right:18px;top:18px;border:2px solid var(--ink);border-radius:50%;opacity:.45}
.card:hover{transform:translate(-2px,-2px) rotate(-.2deg);box-shadow:7px 7px 0 var(--shadow-strong);border-color:var(--ink)}
.card:nth-child(even):hover{transform:translate(-2px,-2px) rotate(.35deg)}
.card h3{margin:.1em 0 .55em;font-size:1.22rem;letter-spacing:-.02em}
.card p{color:var(--muted);margin:.4em 0}
.kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink);font-weight:900}
.metric{font-size:2rem;font-weight:850;letter-spacing:-.04em}
.pillars{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px;position:relative}
.pillars:before{content:"";position:absolute;left:8%;right:8%;top:50%;border-top:2px dashed var(--line-strong);z-index:0}
.pillars>.card{z-index:1;background:var(--panel)}
.hero-panel{margin-top:44px;display:grid;grid-template-columns:1.4fr .8fr;gap:22px}

/* Steps and lists */
.steps{counter-reset:step}
.step{position:relative;padding-left:64px}
.step:after{content:"";position:absolute;left:41px;top:24px;width:24px;border-top:2px dashed var(--line-strong)}
.step:before{counter-increment:step;content:counter(step);position:absolute;left:17px;top:18px;width:36px;height:36px;display:grid;place-items:center;border-radius:50% 50% 6px 50%;background:var(--accent);border:2px solid var(--accent);color:var(--ink);font-weight:900;box-shadow:4px 4px 0 var(--shadow-strong);transform:rotate(-5deg)}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{padding:8px 0 8px 34px;position:relative;color:var(--muted)}
.checklist li:before{content:"✓";position:absolute;left:0;top:9px;display:grid;place-items:center;width:21px;height:21px;border:2px solid var(--accent);border-radius:50%;color:var(--accent);font-size:.75rem;font-weight:900}
.warning,.notice{border:2px solid var(--line-strong);background:var(--panel);padding:18px;border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 4px;color:var(--muted);box-shadow:5px 5px 0 var(--shadow-soft)}
.warning{border-style:dashed}
.quote{font-size:1.22rem;border-left:4px solid var(--accent);padding:18px 0 18px 20px;color:var(--text)}

/* Tables, tags and articles */
.table-wrap{overflow:auto;border:2px solid var(--line-strong);border-radius:var(--radius-md);box-shadow:5px 5px 0 var(--shadow-soft)}
.table{width:100%;border-collapse:collapse;min-width:700px;background:var(--panel)}
.table th,.table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{background:var(--panel-strong);color:var(--text);font-family:"Outfit","Avenir Next",ui-sans-serif,system-ui,sans-serif}
.table td{color:var(--muted)}
.tag{display:inline-block;border:2px solid var(--line);background:var(--bg-raised);color:var(--muted);padding:3px 9px;border-radius:var(--radius-full);font-size:.76rem;font-weight:700}
.breadcrumb{font-size:.87rem;color:var(--muted);padding-top:24px}
.article{max-width:820px}
.article h1{font-size:clamp(2.3rem,4vw,4.2rem);line-height:1.06;letter-spacing:-.05em;text-wrap:balance}
.article h2{margin-top:1.65em}
.article h3{margin-top:1.5em}
.article p,.article li{color:var(--muted)}
.article .meta{color:var(--muted);font-size:.91rem}
.article code{background:var(--panel);padding:.15em .4em;border:1px solid var(--line);border-radius:6px;color:var(--accent)}
.toc{background:var(--panel);border:2px dashed var(--line-strong);border-radius:var(--radius-md);padding:20px;box-shadow:5px 5px 0 var(--shadow-soft)}
.toc a{display:block;color:var(--muted);padding:4px 0}

/* Forms */
form{margin:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-weight:850;font-size:.79rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.field input,.field textarea,.field select{width:100%;border:2px solid var(--line-strong);background:color-mix(in srgb,var(--base) 97%,var(--accent));color:var(--text);border-radius:var(--radius-md);padding:13px 14px;font:inherit;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:3px 3px 0 var(--shadow-strong);transform:translate(-1px,-1px)}
.field textarea{min-height:145px;resize:vertical}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.consent-row label{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.consent-row input{width:auto;margin-right:8px;vertical-align:middle;accent-color:var(--ink)}
.subtle{color:var(--muted);font-size:.89rem}
.divider{height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 7px,transparent 7px 13px);margin:26px 0}
.form-status{display:flex;align-items:center;gap:8px;min-height:1.5em;margin-top:10px;color:var(--muted)}
.form-status.ok,.form-status.bad{color:var(--ink)}
.form-status.bad{text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:1px}

/* Score / state treatments. Labels carry meaning; colour is deliberately not the only signal. */
.score{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line)}
.score:last-child{border-bottom:0}
.score b{font-size:.82rem;border:1px solid var(--line-strong);border-radius:var(--radius-full);padding:2px 8px;color:var(--ink)}
.status-good,.status-mid,.status-bad{color:var(--ink)}
.status-mid{border-style:dashed!important}
.status-bad{text-decoration:underline;text-decoration-style:wavy}
.icon{font-size:1.35rem;color:var(--ink)}

/* Footer */
.footer{border-top:2px solid var(--line);margin-top:56px;background:var(--ink);position:relative;overflow:hidden}
.footer:before{content:"";position:absolute;width:220px;height:220px;right:-70px;top:20px;border:2px dashed var(--line-strong);border-radius:50%;opacity:.45}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:58px 0}
.footer h4{margin:0 0 10px}
.footer a{display:block;color:var(--muted);padding:3px 0;font-size:.91rem}
.footer .small{color:var(--muted);font-size:.83rem}
.copyright{border-top:1px dashed var(--line);padding:18px 0;color:var(--muted);font-size:.83rem}

/* Focus, icon tooltips and mobile navigation */
:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.icon-btn{position:relative;isolation:isolate}
.icon-btn[data-tooltip]:before,.icon-btn[data-tooltip]:after{position:absolute;left:50%;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .14s ease,transform .14s ease;z-index:90}
.icon-btn[data-tooltip]:before{content:attr(data-tooltip);bottom:calc(100% + 12px);transform:translate(-50%,5px);white-space:nowrap;background:var(--ink);color:var(--base);border:2px solid var(--ink);border-radius:var(--radius-full);padding:6px 9px;font-size:.75rem;font-weight:850;box-shadow:3px 3px 0 var(--shadow-strong)}
.icon-btn[data-tooltip]:after{content:"";bottom:calc(100% + 3px);transform:translate(-50%,5px);border:7px solid transparent;border-top-color:var(--ink)}
.icon-btn[data-tooltip]:hover:before,.icon-btn[data-tooltip]:hover:after,.icon-btn[data-tooltip]:focus-visible:before,.icon-btn[data-tooltip]:focus-visible:after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.menu-btn.icon-btn{width:44px;height:44px;padding:0;place-items:center}
.menu-icon{display:grid;gap:4px;width:18px}
.menu-icon span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .18s ease,opacity .18s ease}
.menu-btn.is-open .menu-icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn.is-open .menu-icon span:nth-child(2){opacity:0}
.menu-btn.is-open .menu-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Route skeleton. Delayed so fast cached navigations do not flash. */
.route-skeleton{position:fixed;inset:0;z-index:80;background:var(--bg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease .14s,visibility 0s linear .26s}
.route-loading .route-skeleton{opacity:1;visibility:visible;transition:opacity .12s ease .14s,visibility 0s linear .14s}
.route-skeleton-inner{width:min(900px,calc(100% - 40px));margin:150px auto 0}
.skeleton-line,.skeleton-cards span{display:block;position:relative;overflow:hidden;background:var(--panel);border:2px solid var(--line);border-radius:var(--radius-md)}
.skeleton-line:after,.skeleton-cards span:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 12%,transparent),transparent);animation:skeleton-shimmer 1.15s infinite}
.skeleton-kicker{width:180px;height:13px;margin-bottom:24px}
.skeleton-title{width:78%;height:54px;margin:10px 0}
.skeleton-title.short{width:58%}
.skeleton-copy{width:70%;height:16px;margin-top:26px}
.skeleton-copy.short{width:48%;margin-top:10px}
.skeleton-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.skeleton-cards span{height:150px;box-shadow:5px 5px 0 var(--shadow-soft)}
@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}

/* Optimistic form state. Success appears only after API confirmation. */
.form-status.pending{color:var(--muted)}
.status-spinner{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;display:inline-block;flex:0 0 auto;animation:spin .72s linear infinite}
.status-check{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink);color:var(--ink);font-weight:900}
@keyframes spin{to{transform:rotate(360deg)}}
form[aria-busy="true"] input,form[aria-busy="true"] textarea,form[aria-busy="true"] select{opacity:.78}

/* Entrance motion: content remains readable without JavaScript. */
.pop-enter{animation:pop-enter .52s var(--bounce) both}
@keyframes pop-enter{0%{opacity:.35;transform:translateY(14px) scale(.975)}100%{opacity:1;transform:none}}
@keyframes icon-wiggle{0%,100%{transform:rotate(0)}35%{transform:rotate(4deg)}70%{transform:rotate(-4deg)}}
.card:hover .kicker,.brand:hover .mark{animation:icon-wiggle .35s ease}

@media(max-width:1040px){
  .nav-links{gap:15px;font-size:.87rem}
  .hero .container{padding-right:290px}
  .hero:before{width:280px;height:280px;right:24px}
  .hero:after{width:170px;height:170px;right:82px}
}
@media(max-width:920px){
  .nav-links{display:none;position:absolute;top:74px;left:0;right:0;background:var(--base);border-bottom:2px solid var(--ink);padding:20px 24px 24px;flex-direction:column;align-items:flex-start;box-shadow:0 10px 0 var(--shadow-soft)}
  .nav-links.open{display:flex}
  .nav-links .nav-cta{margin-top:8px}
  .menu-btn.icon-btn{display:grid}
  .menu-btn.icon-btn[data-tooltip]:before,.menu-btn.icon-btn[data-tooltip]:after{display:none}
  .grid-4,.grid-3,.pillars,.hero-panel{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero{padding-top:66px}
  .hero .container{padding-right:220px}
  .hero:before{width:210px;height:210px;top:80px;right:18px;box-shadow:9px 9px 0 var(--shadow-strong)}
  .hero:after{width:126px;height:126px;top:122px;right:58px}
  .geo-shape.b,.geo-shape.c{display:none}
}
@media(max-width:680px){
  :root{--pop-shadow:3px 3px 0 var(--shadow-strong);--pop-shadow-hover:4px 4px 0 var(--shadow-strong);--pop-shadow-active:2px 2px 0 var(--shadow-strong)}
  .container{width:min(var(--max),calc(100% - 28px))}
  .grid-2,.grid-3,.grid-4,.pillars,.hero-panel,.form-grid,.footer-grid{grid-template-columns:1fr}
  .hero{padding:58px 0 48px}
  .hero .container{padding-right:0}
  .hero h1{font-size:clamp(2.55rem,13vw,3.7rem)}
  .hero:before,.hero:after,.geo-layer{display:none}
  .section{padding:58px 0}
  .topbar .container{display:block}
  .topbar .container span:last-child{display:none}
  .nav{min-height:66px}
  .nav-links{top:66px}
  .field.full{grid-column:auto}
  .card{box-shadow:3px 3px 0 var(--shadow-soft);padding:22px}
  .card:hover,.card:nth-child(even):hover{transform:none;box-shadow:4px 4px 0 var(--shadow-strong)}
  .pillars:before{left:23px;right:auto;top:5%;bottom:5%;height:90%;border-top:0;border-left:2px dashed var(--line-strong)}
  .pillars>.card{margin-left:12px}
  .btn{width:100%}
  .actions{gap:12px}
  .route-skeleton-inner{margin-top:112px}
  .skeleton-title{width:100%;height:42px}
  .skeleton-title.short{width:76%}
  .skeleton-copy{width:94%}
  .skeleton-cards{grid-template-columns:1fr}
  .skeleton-cards span:nth-child(n+2){display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .route-loading .route-skeleton{transition:none}
}


/* ============================================================
   v1.6 Visual-first homepage
   Problem -> flow -> readiness -> deliverables -> start
   ============================================================ */
.visual-home{background:var(--base)}
.vh-section{padding:64px 0;border-bottom:1px solid var(--line)}
.vh-centered{text-align:center;max-width:760px;margin:0 auto 34px}
.vh-centered p{margin:.45rem auto 0;color:var(--muted);max-width:650px}
.vh-section-title{font-size:clamp(1.8rem,2.7vw,2.65rem);letter-spacing:-.035em;line-height:1.08;margin:0 0 26px;text-align:center}
.vh-eyebrow{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:850;color:var(--ink)}
.vh-eyebrow:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink)}
.vh-icon-svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.vh-hero{padding:72px 0 68px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:linear-gradient(135deg,var(--base),var(--bg-raised))}
.vh-hero:before{content:"";position:absolute;right:-120px;bottom:-220px;width:440px;height:440px;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 0 34px color-mix(in srgb,var(--ink) 2%,transparent),0 0 0 68px color-mix(in srgb,var(--ink) 1.5%,transparent);pointer-events:none}
.vh-hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr);gap:56px;align-items:center}
.vh-hero-copy h1{font-size:clamp(3rem,5vw,5rem);letter-spacing:-.055em;line-height:1.02;margin:.38em 0 .3em;max-width:720px;text-wrap:balance}
.vh-hero-copy>p{font-size:1.12rem;color:var(--muted);max-width:640px;margin:0}
.vh-hero-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:10px;position:relative}
.vh-flow-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;color:var(--ink);min-width:0}
.vh-flow-node .vh-icon-svg{width:92px;height:92px;padding:23px;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--bg-raised);box-shadow:4px 4px 0 var(--shadow-soft);margin-bottom:7px}
.vh-flow-node-final .vh-icon-svg{background:var(--ink);color:var(--base);border-color:var(--ink)}
.vh-flow-node b{font-size:.92rem;line-height:1.2}.vh-flow-node span{font-size:.82rem;color:var(--muted);line-height:1.2}
.vh-arrow{font-size:1.55rem;color:var(--ink);padding-top:34px}

.vh-problems{background:var(--base)}
.vh-problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vh-problem-card{position:relative;display:grid;grid-template-columns:82px 1fr;gap:20px;align-items:center;border:1.5px solid var(--line-strong);border-radius:20px;background:var(--bg-raised);padding:24px 44px 24px 22px;color:var(--ink);box-shadow:4px 4px 0 var(--shadow-soft);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.vh-problem-card:hover{color:var(--ink);transform:translateY(-2px);box-shadow:6px 6px 0 var(--shadow-soft);border-color:var(--ink)}
.vh-problem-icon{width:76px;height:76px;color:var(--ink)}
.vh-problem-card h3{margin:0 0 8px;font-size:1.16rem}
.vh-problem-card ul{list-style:none;padding:0;margin:0;display:grid;gap:5px;font-size:.83rem;color:var(--muted)}
.vh-problem-card li{display:flex;align-items:flex-start;gap:7px}.vh-mini-check{display:grid;place-items:center;width:16px;height:16px;border:1.5px solid var(--ink);border-radius:50%;font-size:.62rem;line-height:1;color:var(--ink);margin-top:2px;flex:0 0 auto}
.vh-card-arrow{position:absolute;right:18px;top:18px;width:26px;height:26px;border:1.5px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;font-weight:800}

.vh-model{background:var(--bg-raised)}
.vh-model-flow{display:grid;grid-template-columns:1fr 54px 1fr 54px 1fr 54px 1fr;align-items:center}
.vh-model-step{position:relative;text-align:center}
.vh-step-no{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--base);display:grid;place-items:center;font-weight:850;font-size:.83rem;z-index:2}
.vh-model-icon{height:142px;border:1.5px solid var(--line-strong);border-radius:18px;background:var(--base);display:grid;place-items:center;padding:34px;box-shadow:3px 3px 0 var(--shadow-soft)}
.vh-model-icon .vh-icon-svg{width:72px;height:72px}
.vh-model-step h3{font-size:1.15rem;margin:-34px 0 24px;position:relative;z-index:2}
.vh-output{border:1.5px solid var(--line-strong);border-radius:12px;background:var(--base);padding:10px 12px;font-size:.86rem;font-weight:700}
.vh-model-arrow{text-align:center;color:var(--ink);font-size:1.5rem;opacity:.75}

.vh-readiness{background:var(--base)}
.vh-compare{max-width:880px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.vh-compare-head{display:grid;grid-template-columns:1fr 180px 1fr;text-align:center;font-size:.78rem;font-weight:800;margin-bottom:7px}.vh-compare-head span:first-child{grid-column:1}.vh-compare-head span:last-child{grid-column:3;background:var(--ink);color:var(--base);border-radius:999px;padding:4px 10px;justify-self:center}.vh-compare-head span:first-child{background:var(--panel);border-radius:999px;padding:4px 10px;justify-self:center}
.vh-meter-row{display:grid;grid-template-columns:1fr 180px 1fr;gap:20px;align-items:center;padding:13px 0;border-top:1px dashed var(--line)}
.vh-meter-side{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center}.vh-meter-side.target{grid-template-columns:1fr 42px}.vh-meter-side b{font-size:.82rem}
.vh-meter{height:10px;background:var(--panel-strong);border-radius:999px;overflow:hidden}.vh-meter i{display:block;height:100%;background:color-mix(in srgb,var(--ink) 34%,var(--base));border-radius:inherit}.vh-meter-side.target .vh-meter i{background:var(--ink)}
.vh-meter-label{text-align:center;font-size:.86rem;font-weight:750}

.vh-deliverables{background:var(--bg-raised)}
.vh-deliverable-strip{display:grid;grid-template-columns:repeat(5,1fr);border:1.5px solid var(--line-strong);border-radius:18px;background:var(--base);overflow:hidden;box-shadow:3px 3px 0 var(--shadow-soft)}
.vh-deliverable{display:grid;justify-items:center;text-align:center;gap:10px;padding:22px 14px;border-right:1px solid var(--line)}.vh-deliverable:last-child{border-right:0}.vh-deliverable .vh-icon-svg{width:44px;height:44px}.vh-deliverable b{font-size:.84rem}

.vh-start{background:var(--base)}
.vh-start-flow{display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr;align-items:center;max-width:950px;margin:0 auto}
.vh-start-step{display:grid;grid-template-columns:36px 74px 1fr;gap:14px;align-items:center}.vh-start-step>span{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--base);display:grid;place-items:center;font-size:.8rem;font-weight:850;align-self:start}.vh-start-icon{width:74px;height:74px;border-radius:50%;background:var(--panel);padding:19px}.vh-start-step h3{font-size:1rem;margin:0 0 3px}.vh-start-step p{font-size:.82rem;color:var(--muted);margin:0}.vh-dash{height:1px;border-top:1.5px dashed var(--line-strong)}

.vh-final{padding:24px 0 44px;background:var(--base)}
.vh-final-inner{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:24px;background:var(--ink);color:var(--base);padding:24px 28px;border-radius:18px;overflow:hidden;position:relative}
.vh-final-inner:after{content:"";position:absolute;right:-70px;top:-110px;width:250px;height:250px;border:1px solid color-mix(in srgb,var(--base) 20%,transparent);border-radius:50%;box-shadow:0 0 0 32px color-mix(in srgb,var(--base) 4%,transparent)}
.vh-final-icon{width:64px;height:64px;border:1.5px solid color-mix(in srgb,var(--base) 45%,transparent);border-radius:50%;padding:15px;position:relative;z-index:1}.vh-final h2{font-size:clamp(1.3rem,2.1vw,2rem);letter-spacing:-.03em;margin:0;max-width:520px;position:relative;z-index:1}.vh-final-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:16px;background:var(--base);color:var(--ink);border-radius:999px;padding:13px 18px;font-weight:800;border:1.5px solid var(--base)}.vh-final-btn:hover{color:var(--ink);transform:translateY(-1px)}

@media(max-width:1040px){
 .vh-hero-grid{grid-template-columns:1fr;gap:38px}.vh-hero-copy{max-width:760px}.vh-hero-flow{max-width:720px}.vh-problem-grid{grid-template-columns:1fr}.vh-problem-card{grid-template-columns:74px 1fr}.vh-model-flow{grid-template-columns:1fr 38px 1fr}.vh-model-step:nth-of-type(3){margin-top:46px}.vh-model-step:nth-of-type(4){margin-top:46px}.vh-model-arrow:nth-of-type(2){display:none}.vh-deliverable-strip{grid-template-columns:repeat(3,1fr)}.vh-deliverable{border-bottom:1px solid var(--line)}.vh-start-flow{grid-template-columns:1fr;gap:18px}.vh-dash{height:34px;border-top:0;border-left:1.5px dashed var(--line-strong);margin-left:50px}.vh-final-inner{grid-template-columns:60px 1fr}.vh-final-btn{grid-column:2;justify-self:start}.vh-compare-head,.vh-meter-row{grid-template-columns:1fr 145px 1fr;gap:12px}}
@media(max-width:680px){
 .vh-section{padding:48px 0}.vh-hero{padding:52px 0}.vh-hero-copy h1{font-size:clamp(2.45rem,12vw,3.35rem)}.vh-hero-copy>p{font-size:1rem}.vh-hero-flow{grid-template-columns:1fr 22px 1fr;row-gap:18px}.vh-flow-node .vh-icon-svg{width:76px;height:76px;padding:19px}.vh-arrow{padding-top:27px}.vh-arrow:nth-of-type(2){display:none}.vh-flow-node:nth-of-type(5),.vh-flow-node:nth-of-type(7){margin-top:4px}.vh-problem-card{grid-template-columns:58px 1fr;padding:20px 38px 20px 18px}.vh-problem-icon{width:54px;height:54px}.vh-model-flow{grid-template-columns:1fr;gap:18px}.vh-model-arrow{transform:rotate(90deg);height:22px}.vh-model-step:nth-of-type(3),.vh-model-step:nth-of-type(4){margin-top:0}.vh-model-icon{height:118px;padding:26px}.vh-model-step h3{margin:-28px 0 18px}.vh-compare-head{display:none}.vh-meter-row{grid-template-columns:1fr;gap:7px;padding:16px 0}.vh-meter-label{grid-row:1;text-align:left}.vh-meter-side,.vh-meter-side.target{grid-template-columns:40px 1fr}.vh-meter-side.target{grid-template-columns:1fr 40px}.vh-deliverable-strip{grid-template-columns:1fr 1fr}.vh-deliverable{border-right:1px solid var(--line)}.vh-deliverable:nth-child(even){border-right:0}.vh-start-step{grid-template-columns:32px 62px 1fr}.vh-start-icon{width:62px;height:62px;padding:16px}.vh-final-inner{grid-template-columns:1fr;text-align:center;justify-items:center}.vh-final h2{max-width:100%}.vh-final-btn{grid-column:auto;justify-self:auto}.vh-final-icon{width:58px;height:58px}}


/* ==========================================================
   Tech Turn Technology v1.7
   Retriever-inspired visual refresh

   Direction:
   - quiet graphite / paper palette
   - system-native typography
   - thin borders and flat surfaces
   - restrained radius
   - no decorative dot field / hard pop shadows
   - visual hierarchy through whitespace, not ornament

   Public Retriever brand assets use #1f2328 for light-mode
   wordmark text and #e6edf3 for the dark-mode counterpart.
   ========================================================== */

:root{
  --ink:#1F2328;
  --base:#FFFFFF;
  --bg:#F6F8FA;
  --bg-raised:#FFFFFF;
  --panel:#FFFFFF;
  --panel-strong:#EAEEF2;
  --text:#1F2328;
  --muted:#57606A;
  --line:#D8DEE4;
  --line-strong:#AFB8C1;
  --shadow-soft:color-mix(in srgb,var(--ink) 5%,transparent);
  --shadow-strong:color-mix(in srgb,var(--ink) 9%,transparent);
  --accent:#1F2328;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --pop-shadow:none;
  --pop-shadow-hover:none;
  --pop-shadow-active:none;
}

body{
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.6;
  background:var(--bg);
}

h1,h2,h3,h4,.brand,.btn,.metric{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

a:hover{color:#0969DA}

/* Remove the old framed / playful treatment. */
.topbar{display:none}
.site-header{
  top:0;
  background:color-mix(in srgb,#FFFFFF 94%,transparent);
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid var(--line);
}
.nav{min-height:68px;gap:24px}
.brand{gap:10px;font-weight:700;letter-spacing:-.018em}
.mark{
  width:38px;height:38px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:#FFFFFF;
  color:var(--ink);
  box-shadow:none;
  font-weight:800;
}
.brand:hover .mark{transform:none;box-shadow:none}
.nav-links{gap:20px;font-size:.9rem}
.nav-links>a:not(.nav-cta){font-weight:600;color:var(--ink)}
.nav-links>a:not(.nav-cta):after{
  bottom:1px;height:1px;background:var(--ink);
}
.nav-cta{
  border:1px solid var(--ink);
  padding:9px 14px;
  border-radius:10px;
  background:var(--ink);
  color:#FFFFFF!important;
  box-shadow:none;
  font-weight:650;
}
.nav-cta:hover{transform:none;box-shadow:none;background:#0D1117}
.menu-btn{
  border:1px solid var(--line-strong);
  background:#FFFFFF;
  color:var(--ink);
  border-radius:9px;
  box-shadow:none;
}

/* Interior hero: editorial and quiet. */
.hero{
  padding:84px 0 68px;
  border-bottom:1px solid var(--line);
  background:#FFFFFF;
}
.hero .container{padding-right:0;max-width:1160px}
.hero:before,.hero:after,.geo-layer{display:none!important}
.eyebrow,.vh-eyebrow{
  letter-spacing:.105em;
  font-size:.72rem;
  font-weight:700;
}
.eyebrow:before,.vh-eyebrow:before{
  width:6px;height:6px;
  border-radius:50%;
  transform:none;
}
.hero h1{
  max-width:900px;
  letter-spacing:-.048em;
}
.lead{color:var(--muted);font-size:1.12rem}

/* Buttons: compact product-site controls. */
.btn{
  min-height:44px;
  padding:10px 15px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:#FFFFFF;
  color:var(--ink);
  box-shadow:none;
  font-weight:650;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.btn:after{
  width:auto;height:auto;
  border:0;
  font-size:1rem;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:none;
  color:var(--ink);
  background:#F3F4F6;
  border-color:#8C959F;
}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.primary{
  background:var(--ink);
  color:#FFFFFF;
  border-color:var(--ink);
  box-shadow:none;
}
.btn.primary:hover{background:#0D1117;box-shadow:none;color:#FFFFFF}
.btn.ghost{background:#FFFFFF;color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:#F3F4F6;color:var(--ink);box-shadow:none}

/* Layout and cards. */
.section{padding:72px 0}
.section.alt{
  background:#F6F8FA;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section.alt:before,.section.alt:after{display:none}
.section h2{letter-spacing:-.038em}
.section-intro{color:var(--muted)}
.card{
  border:1px solid var(--line);
  border-radius:14px!important;
  background:#FFFFFF;
  padding:26px;
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.card:before{display:none}
.card:hover,.card:nth-child(even):hover{
  transform:translateY(-2px);
  box-shadow:none;
  border-color:#8C959F;
  background:#FFFFFF;
}
.card p{color:var(--muted)}
.trust-strip span{
  border:1px solid var(--line);
  background:#FFFFFF;
  color:var(--muted);
  box-shadow:none;
}

/* Forms. */
.form-grid input,.form-grid textarea,.form-grid select,
.field input,.field textarea,.field select{
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:#FFFFFF;
  color:var(--ink);
  box-shadow:none;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:#6E7781;
  box-shadow:0 0 0 3px rgba(9,105,218,.10);
  transform:none;
  outline:none;
}

/* Footer. */
.footer{
  background:#1F2328;
  border-top:0;
}
.footer,.footer a,.footer h4{color:#E6EDF3}
.footer .small{color:#8C959F}

/* ==================== Visual homepage ==================== */
.visual-home{background:#FFFFFF}
.vh-section{
  padding:70px 0;
  border-bottom:1px solid var(--line);
}
.vh-section-title{letter-spacing:-.04em}
.vh-centered p{color:var(--muted)}

.vh-hero{
  padding:86px 0 80px;
  border-bottom:1px solid var(--line);
  background:#FFFFFF;
}
.vh-hero:before{display:none}
.vh-hero-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr);
  gap:64px;
}
.vh-hero-copy h1{
  letter-spacing:-.055em;
  font-weight:750;
}
.vh-hero-copy>p{color:var(--muted)}

.vh-flow-node .vh-icon-svg{
  width:88px;height:88px;
  padding:23px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#F6F8FA;
  box-shadow:none;
}
.vh-flow-node-final .vh-icon-svg{
  background:#1F2328;
  color:#FFFFFF;
  border-color:#1F2328;
}
.vh-flow-node b{font-weight:650}
.vh-arrow{color:#6E7781;font-size:1.25rem}

.vh-problems{background:#F6F8FA}
.vh-problem-grid{gap:16px}
.vh-problem-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:#FFFFFF;
  box-shadow:none;
  padding:24px 42px 24px 22px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.vh-problem-card:hover{
  transform:translateY(-2px);
  box-shadow:none;
  border-color:#8C959F;
  background:#FFFFFF;
}
.vh-problem-card h3{font-weight:650}
.vh-problem-card ul{color:var(--muted)}
.vh-mini-check{
  border:1px solid #8C959F;
  color:#57606A;
}
.vh-card-arrow{
  width:24px;height:24px;
  border:1px solid var(--line);
  color:#57606A;
}

.vh-model{background:#FFFFFF}
.vh-model-flow{gap:0}
.vh-step-no{
  width:28px;height:28px;
  background:#1F2328;
  color:#FFFFFF;
  font-weight:650;
}
.vh-model-icon{
  height:136px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#F6F8FA;
  box-shadow:none;
}
.vh-output{
  border:1px solid var(--line);
  border-radius:9px;
  background:#FFFFFF;
  font-weight:600;
}
.vh-model-arrow{color:#8C959F}

.vh-readiness{background:#F6F8FA}
.vh-compare{
  max-width:900px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.vh-compare-head span:last-child{
  background:#1F2328;
  color:#FFFFFF;
}
.vh-compare-head span:first-child{
  background:#EAEEF2;
}
.vh-meter-row{border-top:1px solid var(--line)}
.vh-meter{height:8px;background:#D8DEE4}
.vh-meter i{background:#8C959F}
.vh-meter-side.target .vh-meter i{background:#1F2328}

.vh-deliverables{background:#FFFFFF}
.vh-deliverable-strip{
  border:1px solid var(--line);
  border-radius:14px;
  background:#F6F8FA;
  box-shadow:none;
}
.vh-deliverable{border-right:1px solid var(--line)}
.vh-start{background:#F6F8FA}
.vh-start-step>span{
  background:#1F2328;color:#FFFFFF;font-weight:650
}
.vh-start-icon{
  background:#FFFFFF;
  border:1px solid var(--line);
}
.vh-dash{border-color:#AFB8C1}

.vh-final{
  padding:36px 0 54px;
  background:#FFFFFF;
}
.vh-final-inner{
  background:#1F2328;
  color:#FFFFFF;
  border-radius:14px;
  padding:28px 30px;
}
.vh-final-inner:after{display:none}
.vh-final-icon{
  border:1px solid #57606A;
}
.vh-final-btn{
  background:#FFFFFF;
  color:#1F2328;
  border:1px solid #FFFFFF;
  border-radius:10px;
  font-weight:650;
}

/* Keep tooltips and loading states restrained. */
.icon-btn[data-tooltip]:before{
  background:#1F2328;
  color:#FFFFFF;
  border:1px solid #1F2328;
  box-shadow:none;
}
.icon-btn[data-tooltip]:after{border-top-color:#1F2328}
.skeleton-line,.skeleton-cards span{
  border:1px solid var(--line);
  background:#EAEEF2;
}
.skeleton-line:after,.skeleton-cards span:after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
}

@media(max-width:820px){
  .nav-links{
    background:#FFFFFF;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(31,35,40,.08);
  }
}


/* ==========================================================
   Tech Turn Technology v1.8
   Dark technical presence inspired by Retriever's visual language.

   Typography:
   - neutral sans-serif for headings and body
   - monospace for navigation, labels, controls, examples and metrics

   This is an adaptation, not a copy of Retriever's site.
   ========================================================== */

:root{
  --tt-bg:#1D1D1D;
  --tt-bg-deep:#181818;
  --tt-panel:#242424;
  --tt-panel-2:#292929;
  --tt-line:#373737;
  --tt-line-soft:#303030;
  --tt-text:#F4F4F1;
  --tt-muted:#A8A59F;
  --tt-mono:#BCA98C;
  --tt-white:#FFFFFF;
  --tt-accent:#B89B72;
  --tt-danger:#D96C6C;
  --tt-success:#6FBF8B;
  --tt-shadow:0 18px 50px rgba(0,0,0,.22);

  --font-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  --ink:var(--tt-text);
  --base:var(--tt-bg);
  --bg:var(--tt-bg);
  --bg-raised:var(--tt-panel);
  --panel:var(--tt-panel);
  --panel-strong:var(--tt-panel-2);
  --text:var(--tt-text);
  --muted:var(--tt-muted);
  --line:var(--tt-line);
  --line-strong:#474747;
  --accent:var(--tt-accent);
  --shadow-soft:rgba(0,0,0,.18);
  --shadow-strong:rgba(0,0,0,.28);
}

html{background:var(--tt-bg-deep)}
body{
  background:var(--tt-bg);
  color:var(--tt-text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.58;
}
body:before{display:none!important}
a{color:var(--tt-text)}
a:hover{color:var(--tt-white)}
p,.lead,.section-intro{color:var(--tt-muted)}
h1,h2,h3,h4,.brand{font-family:var(--font-sans);color:var(--tt-text)}
h1,h2{font-weight:500;letter-spacing:-.045em}
h3{font-weight:500;letter-spacing:-.018em}

.topbar{display:none!important}
.site-header{
  position:sticky;
  top:0;
  background:rgba(29,29,29,.94);
  border-bottom:1px solid var(--tt-line);
  backdrop-filter:blur(14px);
}
.nav{min-height:76px;gap:22px}
.brand{font-weight:600}
.mark{
  width:34px;height:34px;
  border:1px solid #575757;
  border-radius:8px;
  background:#F4F4F1;
  color:#1D1D1D;
  box-shadow:none;
  font-family:var(--font-mono);
  font-weight:700;
}
.nav-links{
  gap:19px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.nav-links>a:not(.nav-cta){
  color:#B7B3AD;
  font-weight:500;
}
.nav-links>a:not(.nav-cta):hover,
.nav-links>a[aria-current="page"]{
  color:#FFFFFF;
}
.nav-links>a:not(.nav-cta):after{
  height:1px;
  background:#FFFFFF;
  bottom:-7px;
}
.nav-cta{
  border:1px solid #F4F4F1;
  border-radius:4px;
  background:#F4F4F1;
  color:#1D1D1D!important;
  padding:10px 13px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:none;
}
.nav-cta:hover{background:#FFFFFF;color:#111!important;transform:none}
.menu-btn{
  background:transparent;
  border:1px solid #4B4B4B;
  border-radius:4px;
  color:#FFFFFF;
  box-shadow:none;
}

/* Retriever-like section rhythm */
.hero,.vh-hero,.section,.vh-section,.faq-hero,.faq-section{
  background:var(--tt-bg);
  border-bottom:1px solid var(--tt-line);
}
.hero,.vh-hero{padding:104px 0 92px}
.section,.vh-section{padding:98px 0}
.section.alt,.vh-problems,.vh-readiness,.vh-start{background:#1F1F1F}
.hero:before,.hero:after,.vh-hero:before,.section.alt:before,.section.alt:after{display:none!important}

.eyebrow,.vh-eyebrow,.faq-kicker,
.vh-output,.vh-compare-head,.vh-meter-label,
.vh-step-no,.trust-strip span,.metric,
.btn,.faq-more,.tech-label{
  font-family:var(--font-mono);
}
.eyebrow,.vh-eyebrow,.faq-kicker{
  color:var(--tt-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:500;
}
.eyebrow:before,.vh-eyebrow:before{display:none}
.hero h1,.vh-hero-copy h1{
  font-size:clamp(3rem,6vw,5.4rem);
  line-height:.98;
  font-weight:500;
}
.hero .lead,.vh-hero-copy>p{
  max-width:680px;
  font-size:1.12rem;
  color:var(--tt-muted);
}

/* restrained dotted technical field */
.vh-hero-flow,
.vh-model-icon,
.vh-deliverable-strip,
.card,
.faq-shell{
  position:relative;
}
.vh-hero-flow:before,
.vh-model-icon:before,
.vh-deliverable-strip:before,
.example-panel:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(188,169,140,.18) 1px,transparent 1px);
  background-size:10px 10px;
  mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent);
}

.btn{
  border-radius:4px;
  min-height:44px;
  padding:11px 15px;
  font-size:.74rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:none;
}
.btn.primary{
  background:#F4F4F1;
  color:#1D1D1D;
  border:1px solid #F4F4F1;
}
.btn.primary:hover{background:#FFFFFF;color:#111;transform:none}
.btn.ghost{
  background:#353535;
  color:#F4F4F1;
  border:1px solid #3F3F3F;
}
.btn.ghost:hover{background:#3D3D3D;color:#FFF;transform:none}

.card,.vh-problem-card,.vh-model-icon,.vh-output,.vh-deliverable-strip,
.vh-start-icon,.vh-final-inner,.form-shell,.faq-item{
  background:var(--tt-panel);
  border:1px solid var(--tt-line);
  box-shadow:none;
}
.card,.vh-problem-card,.vh-deliverable-strip,.vh-final-inner{border-radius:10px!important}
.card:hover,.vh-problem-card:hover{background:#272727;border-color:#4A4A4A;transform:none}

.vh-problem-card{
  padding:26px 44px 26px 24px;
}
.vh-problem-card h3,.vh-model-step h3{color:#FFF}
.vh-problem-card li,.vh-problem-card p{color:var(--tt-muted)}
.vh-mini-check{
  border:1px solid #575757;
  color:#C4C0BA;
  font-family:var(--font-mono);
}
.vh-card-arrow{
  border:0;
  background:transparent;
  font-family:var(--font-mono);
  color:var(--tt-mono);
}

.vh-model-flow{gap:0}
.vh-step-no{
  background:#F4F4F1;
  color:#1D1D1D;
  border:0;
}
.vh-model-icon{
  min-height:138px;
  background:#232323;
  border-radius:8px;
}
.vh-output{
  border-radius:4px;
  color:#E9E8E4;
  background:#202020;
  font-size:.74rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.vh-model-arrow,.vh-arrow{color:#8E8982;font-family:var(--font-mono)}

.vh-flow-node .vh-icon-svg{
  width:90px;height:90px;
  border:1px solid #454545;
  border-radius:8px;
  background:#242424;
  color:#F4F4F1;
  box-shadow:none;
}
.vh-flow-node-final .vh-icon-svg{
  background:#F4F4F1;
  color:#1D1D1D;
  border-color:#F4F4F1;
}
.vh-flow-node b{color:#FFF;font-weight:500}
.vh-flow-node span{color:var(--tt-muted)}

.vh-compare{
  max-width:940px;
  border-top:1px solid var(--tt-line);
  border-bottom:1px solid var(--tt-line);
}
.vh-compare-head span{
  background:transparent!important;
  color:var(--tt-mono)!important;
  font-size:.72rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.vh-meter-row{border-top:1px solid var(--tt-line-soft)}
.vh-meter{height:7px;background:#333}
.vh-meter i{background:#71685B}
.vh-meter-side.target .vh-meter i{background:#D9D5CF}
.vh-meter-side b{font-family:var(--font-mono);font-weight:500}

.vh-deliverable{
  border-right:1px solid var(--tt-line);
}
.vh-deliverable b{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.vh-start-step>span{
  background:#F4F4F1;
  color:#1D1D1D;
  font-family:var(--font-mono);
}
.vh-start-icon{border-radius:8px;background:#242424}
.vh-dash{border-color:#525252}

.vh-final{
  padding:54px 0;
  background:#181818;
}
.vh-final-inner{
  padding:34px;
  background:#242424;
}
.vh-final-inner:after{display:none}
.vh-final-btn{
  background:#F4F4F1;
  color:#1D1D1D;
  border-radius:4px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.vh-final-btn:hover{background:#FFF;color:#111}

/* Forms */
.form-grid input,.form-grid textarea,.form-grid select,
.field input,.field textarea,.field select{
  background:#202020;
  color:#F4F4F1;
  border:1px solid #454545;
  border-radius:5px;
  box-shadow:none;
}
.form-grid input::placeholder,.form-grid textarea::placeholder,
.field input::placeholder,.field textarea::placeholder{color:#77736D}
label,.field label{font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:#B8B4AE!important;
  box-shadow:0 0 0 2px rgba(244,244,241,.08)!important;
}

/* FAQ */
.faq-hero{padding:120px 0 86px}
.faq-shell{max-width:980px}
.faq-hero h1{
  margin:.3rem 0 1rem;
  font-size:clamp(3.6rem,7vw,6rem);
  font-weight:400;
  letter-spacing:-.055em;
}
.faq-hero p{font-size:1.13rem;color:var(--tt-muted)}
.faq-section{padding:58px 0 110px}
.faq-item{
  border:0;
  border-top:1px solid var(--tt-line);
  border-radius:0!important;
  background:transparent;
}
.faq-item:last-child{border-bottom:1px solid var(--tt-line)}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px 0;
  color:#FFF;
  font-size:1rem;
  font-weight:500;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-toggle{
  width:18px;height:18px;position:relative;flex:0 0 18px;
}
.faq-toggle:before,.faq-toggle:after{
  content:"";position:absolute;left:4px;right:4px;top:8px;height:1px;background:#A9A59E;
}
.faq-toggle:after{transform:rotate(90deg)}
.faq-item[open] .faq-toggle:after{transform:rotate(0)}
.faq-answer{
  max-width:760px;
  padding:0 0 22px;
}
.faq-answer p{margin:0;color:var(--tt-muted)}
.faq-home-list{margin-top:42px}
.faq-more{text-align:center;margin-top:28px}
.vh-faq{background:#1D1D1D}

/* Footer */
.footer{
  background:#181818;
  border-top:1px solid var(--tt-line);
  color:#B4B0AA;
}
.footer h4,.footer a{color:#E7E5E1}
.footer .small{color:#817D77}

/* technical / example typography */
code,pre,.example,.example-panel,
.vh-output,.vh-meter-label,.vh-compare-head,
.metric,.trust-strip span{
  font-family:var(--font-mono);
}
code,pre,.example-panel{
  background:#222;
  color:#E9E6E0;
  border:1px solid #3A3A3A;
}
pre{padding:18px;border-radius:6px;overflow:auto}

/* keep symbols intact and avoid typographic replacement by icon fonts */
.vh-arrow,.vh-card-arrow,.vh-mini-check,.faq-toggle{font-variant-ligatures:none}

@media(max-width:1040px){
  .nav-links{gap:13px;font-size:.66rem}
  .nav-cta{font-size:.63rem;padding:9px 10px}
}
@media(max-width:820px){
  .nav-links{
    background:#1D1D1D;
    border-bottom:1px solid var(--tt-line);
    box-shadow:0 16px 36px rgba(0,0,0,.34);
  }
  .nav-links>a{padding:12px 0}
  .hero,.vh-hero{padding:76px 0 64px}
  .section,.vh-section{padding:72px 0}
}


/* ==========================================================
   Tech Turn Technology v1.8.2
   Motion restoration for the v1.8 dark visual system.

   The visual design remains unchanged. This layer restores
   the restrained entrance and interaction motion used by the
   earlier Tech Turn builds.
   ========================================================== */

:root{
  --motion-ease:cubic-bezier(.22,.8,.28,1);
  --motion-ease-pop:cubic-bezier(.2,.9,.3,1.12);
}

/* Scroll entrance. Content is hidden only after JS opts in. */
.motion-ready [data-motion]{
  opacity:0;
  transform:translateY(18px) scale(.988);
  transition:
    opacity .58s var(--motion-ease),
    transform .58s var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
  will-change:opacity,transform;
}
.motion-ready [data-motion].is-visible{
  opacity:1;
  transform:none;
}

/* Flow nodes and model cards get a slightly more tactile entrance. */
.motion-ready .vh-flow-node[data-motion],
.motion-ready .vh-model-step[data-motion],
.motion-ready .vh-problem-card[data-motion]{
  transform:translateY(20px) scale(.975);
}
.motion-ready .vh-flow-node[data-motion].is-visible,
.motion-ready .vh-model-step[data-motion].is-visible,
.motion-ready .vh-problem-card[data-motion].is-visible{
  transform:none;
}

/* Readiness meters animate from zero to their original inline width. */
.motion-ready .vh-meter i[data-meter-motion]{
  width:0!important;
  transition:width .9s var(--motion-ease);
  transition-delay:var(--meter-delay,0ms);
}
.motion-ready .vh-meter i[data-meter-motion].is-visible{
  width:var(--meter-target)!important;
}

/* FAQ answers softly enter while keeping native details behaviour. */
.faq-item[open] .faq-answer{
  animation:tt-faq-open .24s ease both;
}
@keyframes tt-faq-open{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}

/* Keep the new flat visuals, but restore interaction motion. */
.btn,
.nav-cta,
.vh-final-btn{
  transition:
    transform .18s var(--motion-ease),
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}
.btn:hover,
.nav-cta:hover,
.vh-final-btn:hover{
  transform:translateY(-2px);
}
.btn:active,
.nav-cta:active,
.vh-final-btn:active{
  transform:translateY(0) scale(.985);
}

.vh-problem-card,
.card,
.vh-start-icon,
.vh-model-icon{
  transition:
    transform .22s var(--motion-ease),
    background-color .22s ease,
    border-color .22s ease;
}
.vh-problem-card:hover,
.card:hover{
  transform:translateY(-3px);
}

.vh-flow-node .vh-icon-svg{
  transition:
    transform .24s var(--motion-ease-pop),
    border-color .2s ease,
    background-color .2s ease;
}
.vh-flow-node:hover .vh-icon-svg{
  transform:translateY(-3px) scale(1.035);
}

.vh-model-step:hover .vh-model-icon{
  transform:translateY(-3px);
}

.vh-arrow{
  transition:transform .2s var(--motion-ease),color .2s ease;
}
.vh-hero-flow:hover .vh-arrow{
  transform:translateX(3px);
}

/* Technical dot fields remain visually identical but gain very subtle life. */
.vh-hero-flow:before,
.vh-model-icon:before,
.vh-deliverable-strip:before,
.example-panel:before{
  animation:tt-grid-drift 14s linear infinite alternate;
}
@keyframes tt-grid-drift{
  from{background-position:0 0}
  to{background-position:10px 6px}
}

/* Header logo motion from the earlier visual system, toned down for v1.8. */
.brand .mark{
  transition:transform .26s var(--motion-ease-pop);
}
.brand:hover .mark{
  animation:none;
  transform:rotate(-3deg) scale(1.045);
}

/* Respect accessibility preference completely. */
@media(prefers-reduced-motion:reduce){
  .motion-ready [data-motion],
  .motion-ready .vh-meter i[data-meter-motion]{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    width:var(--meter-target,auto)!important;
  }
  .faq-item[open] .faq-answer,
  .vh-hero-flow:before,
  .vh-model-icon:before,
  .vh-deliverable-strip:before,
  .example-panel:before{
    animation:none!important;
  }
  .btn:hover,
  .nav-cta:hover,
  .vh-final-btn:hover,
  .vh-problem-card:hover,
  .card:hover,
  .vh-flow-node:hover .vh-icon-svg,
  .vh-model-step:hover .vh-model-icon,
  .vh-hero-flow:hover .vh-arrow,
  .brand:hover .mark{
    transform:none!important;
  }
}