/* ARKdata · sharp layer: loaded last. Squarer geometry, hairline rules, solid buttons, fewer glows.
   Remove the <link> in build.py to go back to the softer look. */
:root{--radius:4px;--acc:#38e1ff}
.aurora i{opacity:.22}
.aurora i:nth-child(3){opacity:.14}

/* nav + buttons */
header.top .wrap{border-radius:6px}
header nav a{border-radius:3px}
header .lang{border-radius:3px}
.menu{border-radius:4px}
.btn{border-radius:3px;font:600 12.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.btn.lg{padding:18px 26px;font-size:13px}
.btn.sm{padding:11px 16px;font-size:11.5px}
.btn:hover{transform:none}
/* buttons: dark instruments, not white slabs. Primary = a thin blue→teal edge, a glowing status light and a
   scan line that sweeps across on hover. Ghost = a quiet outline that lights up cyan. */
.btn{overflow:hidden;isolation:isolate;transition:color .25s,border-color .25s,background .35s,box-shadow .35s}
.btn.primary{color:#e9f6ff;border:1px solid transparent;
  background:linear-gradient(180deg,#0c1a2e,#08111f) padding-box,linear-gradient(115deg,#3b82f6,#22d3ee 55%,#2dd4bf) border-box;
  box-shadow:0 10px 30px -16px rgba(34,211,238,.7),inset 0 1px 0 rgba(255,255,255,.07)}
.btn.primary::before{content:"";width:6px;height:6px;flex:none;border-radius:1px;background:#22d3ee;
  box-shadow:0 0 0 3px rgba(34,211,238,.14),0 0 12px 1px rgba(34,211,238,.9);animation:led 2.6s ease-in-out infinite}
@keyframes led{0%,100%{opacity:1}50%{opacity:.45}}
.btn.primary::after{display:block;content:"";position:absolute;inset:0 auto 0 -45%;width:40%;z-index:-1;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.28),rgba(255,255,255,.12),transparent);transition:left .7s var(--ease)}
.btn.primary:hover{color:#fff;
  background:linear-gradient(180deg,#10233d,#0a1628) padding-box,linear-gradient(115deg,#7aa7ff,#22d3ee 50%,#5eead4) border-box;
  box-shadow:0 0 0 4px rgba(34,211,238,.08),0 14px 40px -14px rgba(34,211,238,.9),inset 0 1px 0 rgba(255,255,255,.1)}
.btn.primary:hover::after{left:110%}
.btn.primary:focus-visible,.btn.ghost:focus-visible{outline:2px solid #22d3ee;outline-offset:3px}
.btn.ghost{border:1px solid var(--line2);background:rgba(255,255,255,.015);color:#c9d4e4}
.btn.ghost:hover{border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.05);color:#fff;box-shadow:inset 0 0 18px -8px rgba(34,211,238,.6)}
@media (prefers-reduced-motion:reduce){.btn.primary::before{animation:none}.btn.primary::after{display:none}}
.pill,.pill b{border-radius:2px}
.pill b{background:#eef3fa;color:#03060c;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px}

/* type: one accent only, in the hero; elsewhere the second half of a headline is quiet grey */
h2 em,h2 em.grad,.final h2 em{background:none;-webkit-text-fill-color:currentColor;color:#5d6a80;font-size:1em}
.amount{background:none;color:var(--fg);-webkit-text-fill-color:var(--fg)}
.kicker{color:#cfd8e6}
.kicker .idx{border-radius:0;border-style:solid;border-color:var(--line2);color:var(--acc)}
.head:not(.center) .kicker{display:flex;width:100%}
.head:not(.center) .kicker::after{content:"";flex:1;height:1px;background:var(--line)}

/* surfaces */
.scanner{border-radius:8px}
.lens-tag,.maptag,.droid span,.tile .tag,.badge,.draft,.todo{border-radius:2px}
.tile,.priv,.svc,.tier,.principle,.card,.facts,.cmp,.ov a,.notice{border-radius:4px}
.tile:hover,.priv:hover{transform:none}
.photogrid i,.map,.thumbs i,.ph{border-radius:2px}
.bars span.b{border-radius:0}
.step .num{border-radius:4px;box-shadow:none}
.step .num::after{border-radius:6px}
.tl .num{border-radius:4px}
.tl .meta span,.tier.feat .label em{border-radius:2px}
.priv .ic{border-radius:3px}
.priv .ic::after{border-radius:5px}
.faq summary::after{border-radius:2px}
.form input,.form select,.form textarea{border-radius:3px}
.pricebox{border-radius:4px;padding:0;border:1px solid var(--line2)}
.pricebox::before{display:none}
.pricebox .inner{border-radius:3px;background:linear-gradient(180deg,#0a111d,#05080e)}
.final{border-radius:6px;background:radial-gradient(800px 320px at 50% 0%,rgba(56,225,255,.1),transparent 70%),linear-gradient(180deg,#09101b,#04070d)}

/* ------------------------------------------------ two levels */
.levels{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);background:rgba(255,255,255,.012)}
.levels::before,.levels::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;border-color:var(--acc);border-style:solid}
.levels::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.levels::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.lvl{position:relative;display:flex;flex-direction:column;padding:38px 40px 32px;color:var(--fg);transition:background .25s}
.lvl + .lvl{border-left:1px solid var(--line2)}
.lvl.deep{background:linear-gradient(180deg,rgba(42,123,255,.09),rgba(56,225,255,.02) 70%)}
.lvl.deep::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:linear-gradient(90deg,#2a7bff,#38e1ff)}
a.lvl:hover{background:rgba(255,255,255,.035)}
a.lvl.deep:hover{background:linear-gradient(180deg,rgba(42,123,255,.14),rgba(56,225,255,.03) 70%)}
.lvl-top{display:flex;justify-content:space-between;gap:16px;font:600 11.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.lvl-no{color:var(--acc)}
.lvl-time{color:var(--muted);text-align:right}
.lvl h3{font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-.045em;font-weight:740;margin:30px 0 16px}
.lvl > p{color:var(--muted);font-size:16.5px;max-width:470px;margin:0 0 26px}
.lvl ul{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.lvl li{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.lvl li svg{width:17px;height:17px;color:var(--muted)}
.lvl.deep li svg{color:var(--acc)}
.lvl .fit{font-size:14.5px;color:var(--muted);border-left:2px solid var(--line2);padding-left:14px;margin:-6px 0 30px}
.lvl-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
a.lvl .lvl-foot span:last-child{color:var(--fg)}
a.lvl:hover .lvl-foot span:last-child{color:var(--acc)}
.lvl.big{padding:46px 44px 38px}
.orgs{display:grid;grid-template-columns:180px 1fr auto;gap:28px;align-items:center;padding:22px 40px;border:1px solid var(--line2);border-top:0;color:var(--muted);font-size:15px;transition:background .25s}
.orgs b{font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg)}
.orgs em,.orgs a{font:600 11.5px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
a.orgs:hover{background:rgba(255,255,255,.03)}
a.orgs:hover em,.orgs a:hover{color:var(--acc)}
.orgs.wide{scroll-margin-top:110px}
.lvl{scroll-margin-top:110px}

@media (max-width:860px){
  .levels{grid-template-columns:1fr}
  .lvl + .lvl{border-left:0;border-top:1px solid var(--line2)}
  .lvl,.lvl.big{padding:30px 22px 26px}
  .orgs{grid-template-columns:1fr;gap:10px;padding:20px 22px}
}

/* keep "n-a uitat." together: never break a headline at the hyphen */
h1 .l2 em{white-space:nowrap}
/* the statement's highlighted words: solid accent instead of the gradient */
.scrub b .w.on{background:none;-webkit-text-fill-color:currentColor;color:var(--acc)}
/* the closing corner tick sits on the organisations row, which closes the block */
.levels:has(+ .orgs)::after{display:none}
.orgs{position:relative}
.levels + .orgs::after{content:"";position:absolute;width:14px;height:14px;bottom:-1px;right:-1px;border:solid var(--acc);border-width:0 1px 1px 0;pointer-events:none}
.lvl-no,.lvl-foot > span:first-child{white-space:nowrap}
@media (max-width:860px){.lvl-top{font-size:10.5px;letter-spacing:.12em}}
/* the statement is three short beats now: bigger, one per line on wide screens */
.statement .scrub{font-size:clamp(34px,5.6vw,80px);line-height:1.04;letter-spacing:-.045em;font-weight:700}
.statement .scrub em{color:inherit}
.statement .scrub .beat{display:block}

/* "what we find": four wordless teasers instead of seven explanations */
.bento.teaser .t-lock{grid-row:span 2;display:flex;flex-direction:column}
.bento.teaser .t-lock .row-list{margin-top:auto}
.bento.teaser .tile h3{font-size:clamp(24px,2.5vw,34px);line-height:1.05;letter-spacing:-.035em;font-weight:700;margin:0 0 24px}
.bento.teaser .t-lock .row-list > div{padding:16px 0}
.hero .lead b{color:var(--fg);font-weight:600}
@media (max-width:860px){.bento.teaser .t-lock{grid-row:auto}.bento.teaser .t-lock .row-list{margin-top:8px}}

/* header: never shrink on scroll (it squeezed the links into the logo and the button), keep the
   logo subtitle and the button on one line; below 1200px the links fold into the menu */
/* scrolled: the same header, same size, on a frosted full-width bar (no floating pill that shrinks) */
header.top,header.top.scrolled{padding:0;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.top .wrap,header.top.scrolled .wrap{max-width:1180px;height:68px;border-radius:0;border:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
header.top.scrolled{background:rgba(4,7,13,.78);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line)}
header.top .brand,header.top .btn,header .lang{flex:none}
header .bw small{white-space:nowrap}
header nav{gap:2px}
header nav a{padding:7px 11px;white-space:nowrap}

/* ARKdata lockup: ARK bold, data light in cyan (like the logo sheet); replaces ARKdata's spaced mono capitals */
.brand{letter-spacing:0}
.bw b{font:800 21px/1 var(--sans);letter-spacing:-.035em;padding-left:0}
.bw b i{font-style:normal;font-weight:400;color:#5fd8f5}
.wordmark i{font-style:normal;font-weight:300}   /* same faint ghost colour as ARK */
.brand.logo.big .bw b{font-size:27px}
@media (max-width:640px){.bw b{font-size:19px}}
.wordmark{font-family:var(--sans)!important;letter-spacing:-.045em!important;font-weight:800}

/* contact page while only the details card is shown (no email yet, so no request form) */
.contact:has(> .card:only-child){grid-template-columns:1fr;max-width:720px}