:root{
  --bg:#0a0a0a;
  --bg-2:#111111;
  --paper:#ffffff;
  --ink:#0a0a0a;
  --ink-2:rgba(10,10,10,.65);
  --line-d:rgba(255,255,255,.08);
  --line-l:rgba(10,10,10,.08);
  --mute-d:rgba(255,255,255,.55);
  --mute-d-2:rgba(255,255,255,.38);
  --accent:#001df3;
  --accent-ink:#ffffff;
  --radius:14px;
  --max:1240px;
  --pad:28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:"Geist",ui-sans-serif,system-ui,sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* iOS Safari fit-to-viewport guard. html+body birlikte taşımayı kestiğinde
   iOS sayfayı %80'e küçültmek yerine doğru genişlikte render eder. */
html,body{overflow-x:clip;max-width:100%;width:100%}
@supports not (overflow-x:clip){
  html,body{overflow-x:hidden}
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;padding:0}
.serif{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-weight:400;letter-spacing:-.01em;font-style:italic}
.mono{font-family:"Geist Mono",ui-monospace,monospace;letter-spacing:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d);
  display:inline-flex;align-items:center;gap:10px}
.eyebrow.l{color:rgba(10,10,10,.5)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(196,255,61,.18)}

/* ────────── DARK SECTION ────────── */
.dark{background:var(--bg);color:#fff;position:relative;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 75% -10%,rgba(196,255,61,.10),transparent 60%),
    radial-gradient(800px 500px at 0% 90%,rgba(255,255,255,.04),transparent 60%);
  z-index:0}
.dark>*{position:relative;z-index:1}
.dark .grid-bg{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1000px 600px at 50% 0%,#000 30%,transparent 80%);
          mask-image:radial-gradient(1000px 600px at 50% 0%,#000 30%,transparent 80%);
  pointer-events:none;z-index:0}

/* ────────── NAV ────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:9999;backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  background:rgba(10,10,10,.55);border-bottom:1px solid var(--line-d)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em;font-size:17px;height:36px}
.brand-logo{height:30px;width:auto;display:block}
/* Nav logosu daima kontrastlı kalsın — nav'ın koyu yarı saydam zemini üzerinde
   marka mavisi yerine beyaz olarak render edilsin. mix-blend-mode: difference
   alternatif olarak deneyenebilir, fakat fixed nav + cam efekti ile en stabil
   sonucu filter ile beyaza çevirmek veriyor. */
.nav .brand-logo{filter:brightness(0) invert(1)}
.foot-brand .brand-logo{height:40px}

/* App / Play store badges in footer */
.store-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px 9px 14px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  color:#fff;transition:background .2s ease,border-color .2s ease,transform .15s ease}
.store-badge:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.store-badge:active{transform:translateY(1px)}
.store-ico{width:22px;height:22px;flex-shrink:0;color:#fff}
.store-tx{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store-tx .t{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute-d);font-family:"Geist Mono",monospace;margin-bottom:2px}
.store-tx b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--mute-d)}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-countdown{display:flex;align-items:center;gap:4px;background:rgba(0,29,243,.08);border:1px solid rgba(0,29,243,.18);border-radius:12px;padding:6px 14px}
.ncd-unit{display:flex;flex-direction:column;align-items:center;min-width:28px}
.ncd-val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);line-height:1.1}
.ncd-lbl{font-size:9px;font-weight:500;color:#888;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.ncd-sep{font-size:14px;font-weight:700;color:var(--accent);opacity:.5;margin-bottom:8px}
.btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;
  border-radius:10px;font-size:14px;font-weight:500;border:1px solid transparent;
  transition:transform .15s ease,background .2s ease,border-color .2s ease;
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-ghost{color:#fff;border-color:var(--line-d);background:transparent}
.btn-ghost:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:600;
  box-shadow:0 0 0 1px rgba(0,0,0,.1) inset, 0 8px 30px -10px rgba(196,255,61,.5)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-dark{background:#0a0a0a;color:#fff}
.btn-dark:hover{background:#1a1a1a}
.btn-line{color:var(--ink);border-color:var(--line-l);background:#fff}
.btn-line:hover{border-color:rgba(10,10,10,.3)}
.btn-lg{height:48px;padding:0 24px;font-size:15px;border-radius:12px}
.arr{width:14px;height:14px}

/* ────────── HERO ────────── */
.hero{padding:64px 0 80px;position:relative}
.hero-eyebrow{margin-bottom:28px}
.hero h1{font-size:clamp(44px,7.5vw,92px);line-height:.96;letter-spacing:-.035em;
  font-weight:500;margin:0 0 24px;max-width:14ch}
.hero h1 .serif{color:var(--accent);font-weight:400}
.hero p.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--mute-d);
  max-width:54ch;margin:0 0 36px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-cta .note{color:var(--mute-d-2);font-size:13px;margin-left:6px}
.hero-meta{display:flex;gap:48px;margin-top:64px;flex-wrap:wrap}
.hero-meta .item{display:flex;flex-direction:column;gap:4px}
.hero-meta .num{font-size:32px;font-weight:500;letter-spacing:-.02em}
.hero-meta .num .serif{color:var(--accent)}
.hero-meta .lab{font-size:11px;color:var(--mute-d);font-family:"Geist Mono",monospace;
  text-transform:uppercase;letter-spacing:.12em;max-width:18ch}

/* dashboard mock */
.hero-mock{margin-top:64px;position:relative;border-radius:18px;
  background:linear-gradient(180deg,#141414,#0c0c0c);
  border:1px solid var(--line-d);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden}
.hero-mock::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 200px at 50% -10%,rgba(196,255,61,.10),transparent 60%)}
.mock-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;
  border-bottom:1px solid var(--line-d);font-size:12px;color:var(--mute-d);
  font-family:"Geist Mono",monospace;position:relative;z-index:1}
.mock-bar .dots{display:flex;gap:6px;margin-right:10px}
.mock-bar .dots i{width:9px;height:9px;border-radius:50%;background:#2a2a2a;display:block}
.mock-bar .url{flex:1;text-align:center;color:var(--mute-d-2)}
.mock-grid{display:grid;grid-template-columns:220px 1fr;min-height:420px;position:relative;z-index:1}
.mock-side{border-right:1px solid var(--line-d);padding:18px 14px;
  display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--mute-d)}
.mock-side .grp{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute-d-2);padding:14px 10px 6px;font-family:"Geist Mono",monospace}
.mock-side .grp:first-child{padding-top:0}
.mock-side a{padding:7px 10px;border-radius:8px;display:flex;align-items:center;gap:10px}
.mock-side a.active{background:rgba(255,255,255,.06);color:#fff}
.mock-side a:hover{color:#fff}
.mock-side .dotcl{width:6px;height:6px;border-radius:2px;background:var(--mute-d-2);flex-shrink:0}
.mock-side a.active .dotcl{background:var(--accent)}
.mock-side a:hover{color:#fff}
.mock-main{padding:22px 26px;display:flex;flex-direction:column;gap:18px;min-width:0}
.mock-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mock-h{font-size:18px;font-weight:500;letter-spacing:-.01em}
.mock-tabs{display:flex;gap:4px;font-size:12px;background:rgba(255,255,255,.04);
  padding:3px;border-radius:9px;border:1px solid var(--line-d)}
.mock-tabs span{padding:5px 10px;border-radius:6px;color:var(--mute-d)}
.mock-tabs span.on{background:#fff;color:#0a0a0a}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{border:1px solid var(--line-d);border-radius:11px;padding:12px 14px;background:rgba(255,255,255,.02)}
.kpi .l{font-size:10px;color:var(--mute-d);font-family:"Geist Mono",monospace;text-transform:uppercase;letter-spacing:.1em}
.kpi .v{font-size:22px;font-weight:500;margin-top:6px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .d{font-size:11px;margin-top:4px;color:var(--accent);font-family:"Geist Mono",monospace}
.kpi .d.dn{color:#ff7a7a}

.chart{border:1px solid var(--line-d);border-radius:11px;padding:14px 16px;background:rgba(255,255,255,.02)}
.chart .ct{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;color:var(--mute-d)}
.chart svg{display:block;width:100%;height:100px}
.match-list{border:1px solid var(--line-d);border-radius:11px;overflow:hidden}
.match-h{display:grid;grid-template-columns:1fr 110px 110px 90px;gap:12px;
  padding:9px 14px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute-d-2);background:rgba(255,255,255,.02);border-bottom:1px solid var(--line-d);
  font-family:"Geist Mono",monospace}
.match-row{display:grid;grid-template-columns:1fr 110px 110px 90px;gap:12px;
  padding:11px 14px;font-size:13px;border-bottom:1px solid var(--line-d);align-items:center}
.match-row:last-child{border-bottom:0}
.match-row .ttl{display:flex;align-items:center;gap:10px;min-width:0}
.match-row .ttl b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.match-row .ttl .tag{font-family:"Geist Mono",monospace;font-size:10px;color:var(--mute-d-2);
  padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.05);flex-shrink:0}
.match-row .bar{height:6px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.match-row .bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.match-row .pct{font-variant-numeric:tabular-nums;color:#fff;font-size:12px}
.match-row .val{font-variant-numeric:tabular-nums;text-align:right;color:#fff;font-size:13px}

/* ────────── LOGO BAR ────────── */
.logos{padding:48px 0 24px;background:var(--bg);color:#fff}
.logos .lab{text-align:center;color:var(--mute-d);font-family:"Geist Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:28px}
/* Industries row — replaces former logo wall */
.industries{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:stretch}
.ind{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px 10px;color:rgba(10,10,10,.55);
  border-left:1px solid var(--line-l);
  transition:color .25s ease,background .25s ease}
.ind:first-child{border-left:0}
.ind:hover{color:var(--ink);background:rgba(10,10,10,.02)}
.ind-ico{width:34px;height:34px;display:grid;place-items:center}
.ind-ico svg{width:30px;height:30px;display:block}
.ind-t{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;font-weight:500;color:rgba(10,10,10,.6);text-align:center}
.ind:hover .ind-t{color:var(--ink)}
@media (max-width:1020px){ .industries{grid-template-columns:repeat(4,1fr)} .ind:nth-child(5){border-left:0} }
@media (max-width:680px){ .industries{grid-template-columns:repeat(2,1fr)} .ind{border-left:0!important;border-top:1px solid var(--line-l)} .ind:nth-child(-n+2){border-top:0} }

/* ────────── SECTIONS ────────── */
section{padding:160px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(36px,4.6vw,60px);line-height:1.02;letter-spacing:-.025em;
  font-weight:500;margin:14px 0 0;max-width:18ch}
.sec-head h2 .serif{font-weight:400}
.sec-head .right{max-width:38ch;color:var(--ink-2);font-size:16px;line-height:1.55}
.sec-head.dark-head h2{color:#fff}
.sec-head.dark-head .right{color:var(--mute-d)}

/* ────────── BENTO FEATURES ────────── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);gap:14px}
.cell{background:#fff;border:1px solid var(--line-l);border-radius:18px;
  padding:24px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.cell.cd{background:#0a0a0a;color:#fff;border-color:transparent}
.cell h3{font-size:22px;font-weight:500;letter-spacing:-.015em;margin:0 0 8px;line-height:1.15}
.cell.feat h3{font-size:28px;letter-spacing:-.02em}
.cell p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}
.cell.cd p{color:var(--mute-d)}
.cell .tag{display:inline-flex;align-items:center;gap:6px;font-family:"Geist Mono",monospace;
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);
  padding:4px 8px;border-radius:6px;background:rgba(10,10,10,.05);margin-bottom:16px;align-self:flex-start}
.cell.cd .tag{color:var(--accent);background:rgba(196,255,61,.1)}
.cell .copy-bot{margin-top:auto}
.c-1{grid-column:span 4;grid-row:span 2;min-height:380px}
.c-2{grid-column:span 2;grid-row:span 1}
.c-3{grid-column:span 2;grid-row:span 1}
.c-4{grid-column:span 2;grid-row:span 1}
.c-5{grid-column:span 2;grid-row:span 1}
.c-6{grid-column:span 2;grid-row:span 1}
.c-7{grid-column:span 2;grid-row:span 1;min-height:300px}
.c-8{grid-column:span 2;grid-row:span 1;min-height:300px}
.c-9{grid-column:span 2;grid-row:span 1;min-height:300px}

/* viz inside cells */
.viz-feed{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;flex:1;justify-content:center;max-width:90%}
.feed-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:13px}
.feed-row .lg-tag{font-family:"Geist Mono",monospace;font-size:10px;padding:3px 7px;
  border-radius:5px;background:rgba(196,255,61,.15);color:var(--accent);letter-spacing:.05em}
.feed-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-row .meta{color:var(--mute-d);font-size:11px;font-family:"Geist Mono",monospace}
.feed-row .pill{font-size:10px;padding:3px 8px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-family:"Geist Mono",monospace}

/* AES-256 ve SIGNED stamp lime yeşil kuralları doğrudan kendi seçicilerinde
   (.vv-enc / .vc-sign-stamp) — c-7/c-8/c-9 tag'leri ise default blue accent
   bırakıldı (.dk .cell.cd .tag kuralı uygulanıyor). */

/* ── AI · PROJECT ANALYSIS (C8 — phase progress, sized to match C7/C9 viz) */
.viz-analyzer{display:flex;flex-direction:column;gap:14px;margin-bottom:20px;
  flex:1;justify-content:center;max-width:96%;min-height:170px}
.va-phases{display:flex;flex-direction:column;gap:10px;padding:6px 0}
.va-phase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 38px;
  gap:11px;align-items:center;
  opacity:0;transform:translateX(-8px);
  animation:vaIn .7s cubic-bezier(.2,.6,.25,1) var(--d,0s) forwards}
@keyframes vaIn{to{opacity:1;transform:translateX(0)}}
.va-ph-l{font-size:11.5px;color:#fff;font-weight:500;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.va-ph-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.06);
  overflow:hidden;position:relative}
.va-ph-bar i{position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.6),var(--accent));
  border-radius:99px;display:block;
  box-shadow:0 0 10px rgba(var(--accent-rgb),.45);
  animation:vaBarFill 1.4s cubic-bezier(.3,.6,.2,1) calc(var(--d,0s) + .2s) forwards}
@keyframes vaBarFill{to{width:var(--w,0)}}
.va-ph-v{font-family:"Geist Mono",monospace;font-size:11px;font-weight:600;
  color:var(--accent);text-align:right;font-variant-numeric:tabular-nums}

.va-insights{display:flex;flex-direction:column;gap:6px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06)}
.va-ins{display:flex;align-items:center;gap:9px;
  font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.01em;
  color:var(--mute-d);
  opacity:0;transform:translateY(6px);
  animation:vaIn .6s cubic-bezier(.2,.6,.25,1) var(--d,0s) forwards}
.va-ins-ico{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  flex-shrink:0;box-shadow:0 0 0 1px currentColor inset}
.va-ins-ico svg{width:11px;height:11px;display:block}
.va-on .va-ins-ico,.va-up .va-ins-ico{color:var(--accent)}
.va-warn .va-ins-ico{color:#ffb547}
.va-on .va-ins-ico{background:rgba(var(--accent-rgb),.14)}
.va-up .va-ins-ico{background:rgba(var(--accent-rgb),.14)}
.va-warn .va-ins-ico{background:rgba(255,181,71,.14)}
.va-ins-t{color:#fff;font-weight:500;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ── AI · CONTRACT BUILDER (C9 — document with animated signature) ── */
.viz-contract{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;min-height:140px}
.vc-doc{position:relative;width:88%;max-width:280px;
  background:linear-gradient(180deg,#1a1a1a,#0e0e0e);
  border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:11px;padding:13px 14px 12px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6),
             0 0 0 1px rgba(var(--accent-rgb),.08) inset,
             0 0 30px -8px rgba(var(--accent-rgb),.25);
  animation:vcDocIn .9s cubic-bezier(.2,.6,.25,1) backwards}
@keyframes vcDocIn{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
.vc-doc-h{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.vc-doc-tag{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  color:var(--accent);font-weight:600;text-transform:uppercase}
.vc-doc-id{font-family:"Geist Mono",monospace;font-size:9.5px;color:var(--mute-d);
  letter-spacing:.04em}
.vc-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.vc-lines i{display:block;height:4px;border-radius:99px;width:0;
  background:rgba(255,255,255,.16);
  animation:vcLineDraw .65s cubic-bezier(.3,.6,.2,1) var(--d,0s) forwards}
.vc-lines i.vc-l-accent{background:linear-gradient(90deg,rgba(var(--accent-rgb),.7),rgba(var(--accent-rgb),.3));
  box-shadow:0 0 10px rgba(var(--accent-rgb),.45)}
@keyframes vcLineDraw{to{width:var(--w,80%)}}
.vc-sign{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.vc-sign-line{flex:1;min-width:0}
.vc-sign-svg{width:100%;height:26px;display:block}
.vc-sign-path{stroke-dasharray:200;stroke-dashoffset:200;
  filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.65));
  animation:vcSignDraw 1.4s cubic-bezier(.4,.2,.3,1) 1.05s forwards}
@keyframes vcSignDraw{to{stroke-dashoffset:0}}
.vc-sign-stamp{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:5px 9px;border-radius:7px;
  background:rgba(196,255,61,.16);border:1px solid rgba(196,255,61,.42);
  color:#c4ff3d;font-family:"Geist Mono",monospace;font-size:9.5px;
  letter-spacing:.06em;font-weight:600;text-transform:uppercase;
  opacity:0;transform:scale(.85);
  animation:vcStampIn .35s cubic-bezier(.4,1.6,.5,1) 2.45s forwards}
@keyframes vcStampIn{to{opacity:1;transform:scale(1)}}
.vc-sign-stamp svg{width:11px;height:11px}
.vc-sparks{position:absolute;inset:0;pointer-events:none}
.vc-sparks span{position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--accent);opacity:0;
  box-shadow:0 0 8px rgba(var(--accent-rgb),.7);
  animation:vcSpark 1.4s ease-out 2.55s forwards}
.vc-sparks span:nth-child(1){left:46%;top:50%;animation-delay:2.55s}
.vc-sparks span:nth-child(2){left:54%;top:54%;animation-delay:2.62s}
.vc-sparks span:nth-child(3){left:48%;top:42%;animation-delay:2.68s}
.vc-sparks span:nth-child(4){left:58%;top:46%;animation-delay:2.76s}
.vc-sparks span:nth-child(5){left:42%;top:54%;animation-delay:2.82s}
@keyframes vcSpark{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx,12px),var(--ty,-18px)) scale(.3)}
}
.vc-sparks span:nth-child(1){--tx:-18px;--ty:-22px}
.vc-sparks span:nth-child(2){--tx:22px;--ty:-12px}
.vc-sparks span:nth-child(3){--tx:-10px;--ty:-28px}
.vc-sparks span:nth-child(4){--tx:26px;--ty:-22px}
.vc-sparks span:nth-child(5){--tx:-26px;--ty:-8px}

/* ── PROJECT VAULT (C7 — cloud security with folders) ──────────────── */
.viz-vault{position:relative;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;margin-bottom:20px;
  min-height:170px;padding:6px 0 0}
.vv-cloud{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  z-index:2}
.vv-cloud-svg{width:96px;height:60px;display:block;
  filter:drop-shadow(0 8px 22px rgba(var(--accent-rgb),.35));
  animation:vvFloat 4s ease-in-out infinite}
@keyframes vvFloat{50%{transform:translateY(-4px)}}
.vv-shield{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:28px;height:28px;color:var(--accent);
  filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.55));
  animation:vvPulse 2.4s ease-in-out infinite}
@keyframes vvPulse{50%{transform:translateX(-50%) scale(1.08)}}
.vv-shield svg{width:100%;height:100%;display:block}
.vv-enc{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#c4ff3d;
  padding:3px 9px;border-radius:99px;
  background:rgba(196,255,61,.12);
  border:1px solid rgba(196,255,61,.36)}

.vv-rays{position:absolute;left:0;right:0;top:78px;width:100%;height:70px;
  pointer-events:none;z-index:1}
.vv-ray{stroke:rgba(var(--accent-rgb),.6);stroke-width:1;fill:none;
  stroke-dasharray:4 5;stroke-dashoffset:0;
  filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.45));
  animation:vvRayFlow 1.6s linear var(--d,0s) infinite}
@keyframes vvRayFlow{to{stroke-dashoffset:-18}}

.vv-folders{display:flex;justify-content:space-around;width:100%;gap:6px;
  margin-top:30px;z-index:2;position:relative}
.vv-folder{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 10px;border-radius:9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(var(--accent-rgb),.22);
  min-width:0;flex:1;max-width:78px;
  position:relative;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5),
             0 0 0 1px rgba(var(--accent-rgb),.06) inset;
  opacity:0;transform:translateY(8px);
  animation:vvFolderIn .65s cubic-bezier(.2,.6,.25,1) var(--d,0s) forwards}
@keyframes vvFolderIn{to{opacity:1;transform:translateY(0)}}
.vv-folder-ico{width:26px;height:20px;color:var(--accent);
  filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.35))}
.vv-folder-n{font-size:10.5px;font-weight:600;color:#fff;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vv-folder-c{font-family:"Geist Mono",monospace;font-size:9.5px;
  color:var(--mute-d);letter-spacing:.04em}
.vv-folder-lock{position:absolute;top:6px;right:6px;width:11px;height:11px;
  color:var(--accent);opacity:.8}
.vv-folder-lock svg{width:100%;height:100%;display:block}
   AI'ın projeyi planlarken milestone'ları sırayla "üretiyormuş gibi"
   pop-in eden bir akış. Her satırın kendi animation-delay'i var. */
.viz-scope{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;flex:1;
  justify-content:center;max-width:96%}
.scope-prompt{display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(var(--accent-rgb),.4);
  font-size:13px;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.05),
             0 12px 30px -12px rgba(var(--accent-rgb),.3)}
.scope-prompt .sp-ico{width:18px;height:18px;color:var(--accent);flex-shrink:0;
  animation:spSparkle 2.4s ease-in-out infinite}
.scope-prompt .sp-ico svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.6))}
@keyframes spSparkle{
  0%,100%{transform:scale(1) rotate(0deg);opacity:1}
  50%{transform:scale(1.2) rotate(15deg);opacity:.85}
}
.scope-prompt .sp-text{color:rgba(255,255,255,.88);flex:1;font-weight:500;letter-spacing:-.005em}
.scope-prompt .sp-loader{display:inline-flex;gap:5px;flex-shrink:0}
.scope-prompt .sp-loader i{width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.35;display:block;
  animation:spLoad 1.2s ease-in-out infinite}
.scope-prompt .sp-loader i:nth-child(2){animation-delay:.18s}
.scope-prompt .sp-loader i:nth-child(3){animation-delay:.36s}
@keyframes spLoad{
  0%,100%{opacity:.3;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.25)}
}

.scope-list{display:flex;flex-direction:column;gap:7px}
.scope-row{display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-size:13px;
  opacity:0;transform:translateY(10px);filter:blur(6px);
  animation:scopeCycle 7s cubic-bezier(.2,.6,.25,1) var(--d,0s) infinite}
.scope-row .sr-num{font-family:"Geist Mono",monospace;font-size:10px;
  padding:3px 7px;border-radius:5px;
  background:rgba(var(--accent-rgb),.16);color:var(--accent);
  letter-spacing:.05em;font-weight:600;flex-shrink:0}
.scope-row .sr-name{flex:1;min-width:0;color:#fff;font-weight:500;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scope-row .sr-meta{color:var(--mute-d);font-size:11px;
  font-family:"Geist Mono",monospace;flex-shrink:0}
.scope-row .sr-pill{font-size:10px;padding:3px 8px;border-radius:99px;
  background:rgba(255,255,255,.08);color:#fff;font-weight:500;
  font-family:"Geist Mono",monospace;flex-shrink:0}
@keyframes scopeCycle{
  0%      {opacity:0;transform:translateY(10px);filter:blur(6px)}
  10%,82% {opacity:1;transform:translateY(0);filter:blur(0)}
  92%,100%{opacity:0;transform:translateY(-6px);filter:blur(4px)}
}

.viz-docs{position:relative;height:140px;margin-bottom:8px}
.doc{position:absolute;width:84px;height:108px;background:#fff;border-radius:6px;
  border:1px solid rgba(10,10,10,.08);box-shadow:0 10px 30px -10px rgba(0,0,0,.18);
  padding:9px;display:flex;flex-direction:column;gap:4px}
.doc i{display:block;height:3px;border-radius:2px;background:rgba(10,10,10,.1)}
.doc i.short{width:55%}
.doc i.acc{background:var(--accent);width:32%;height:5px;margin-bottom:4px}
.doc.d1{left:0;top:14px;transform:rotate(-5deg)}
.doc.d2{left:62px;top:0;transform:rotate(2deg);z-index:2}
.doc.d3{left:124px;top:18px;transform:rotate(-2deg)}
.doc-tag{position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:"Geist Mono",monospace;font-size:10px;color:var(--ink-2);
  padding:5px 9px;background:#fff;border:1px solid var(--line-l);border-radius:7px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);display:flex;align-items:center;gap:6px}
.doc-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

.viz-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.pipe-col{background:rgba(10,10,10,.04);border-radius:8px;padding:6px 4px;min-height:100px;
  display:flex;flex-direction:column;gap:4px}
.pipe-col .ph{font-size:9px;font-family:"Geist Mono",monospace;text-align:center;
  color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em;padding:4px 0}
.pipe-card{background:#fff;border-radius:6px;padding:6px 8px;font-size:11px;
  border:1px solid var(--line-l);font-weight:500}
.pipe-card.acc{background:var(--accent);border-color:transparent;color:var(--accent-ink)}

.viz-spark{margin-bottom:14px;height:80px;flex:1;display:flex;align-items:end}
.viz-spark svg{width:100%;height:100%}

/* Finance (income/expense) chart — thin smooth lines + stats strip */
.viz-finance{display:flex;flex-direction:column;gap:14px;margin-bottom:14px;flex:1;justify-content:flex-end}
.vf-chart{width:100%;height:78px;display:block;
  filter:drop-shadow(0 6px 14px rgba(196,255,61,.15))}
.vf-line-income{
  stroke-dasharray:380;
  stroke-dashoffset:380;
  animation:vfDraw 1.8s cubic-bezier(.2,.6,.25,1) .15s forwards}
@keyframes vfDraw{to{stroke-dashoffset:0}}
.vf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.vf-stat{display:flex;flex-direction:column;gap:3px;line-height:1.1}
.vf-lab{display:inline-flex;align-items:center;gap:6px;
  font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute-d)}
.vf-sw{width:8px;height:8px;border-radius:2px;display:inline-block}
.vf-sw.income{background:#c4ff3d;box-shadow:0 0 6px rgba(196,255,61,.5)}
.vf-sw.expense{background:rgba(255,255,255,.35)}
.vf-val{font-family:"Geist Mono",monospace;font-size:15px;font-weight:600;
  letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.vf-val.income{color:#c4ff3d}
.vf-val.net{color:#c4ff3d;text-shadow:0 0 12px rgba(196,255,61,.4)}

.viz-compose{font-family:"Geist Mono",monospace;font-size:11px;line-height:1.6;
  color:var(--mute-d);background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:14px;margin-bottom:8px;max-width:96%;flex:1;overflow:hidden;
  position:relative}
.viz-compose .ln{display:block}
.viz-compose .ln .k{color:var(--accent)}
.viz-compose .cursor{display:inline-block;width:7px;height:13px;background:var(--accent);
  vertical-align:middle;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ────────── HOW IT WORKS ────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{position:relative;padding:32px 28px;border-radius:18px;background:#0a0a0a;color:#fff;
  border:1px solid var(--line-d);overflow:hidden;min-height:400px;display:flex;flex-direction:column}
.step .n{font-family:"Geist Mono",monospace;font-size:11px;color:var(--accent);
  letter-spacing:.16em;text-transform:uppercase}
.step h3{font-size:28px;font-weight:500;letter-spacing:-.02em;margin:18px 0 10px;line-height:1.05}
.step h3 .serif{font-weight:400}
.step p{color:var(--mute-d);font-size:14px;line-height:1.55;margin:0 0 24px}
.step .stage{margin-top:auto;border:1px solid var(--line-d);border-radius:12px;padding:14px;
  background:rgba(255,255,255,.02);min-height:140px;display:flex;flex-direction:column;gap:8px}

/* mini visuals for steps */
.s1-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mute-d)}
.s1-row .chk{width:14px;height:14px;border-radius:4px;background:var(--accent);
  display:grid;place-items:center;color:var(--accent-ink);font-size:9px;font-weight:700;flex-shrink:0}
.s1-row .chk.off{background:rgba(255,255,255,.08);color:transparent}
.s1-row .chk.live{background:transparent;color:var(--accent);font-size:14px;border-radius:50%;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15)}
.s1-row .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s1-row .v{color:#fff;font-family:"Geist Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em}

/* Step 2 — bid comparison list */
.s2-bids{display:flex;flex-direction:column;gap:6px}
.bid-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.bid-row.top{background:linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04));
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 8px 24px -8px rgba(var(--accent-rgb),.35)}
.bid-row .bi{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bid-row .bi b{font-size:13px;font-weight:500;color:#fff;letter-spacing:-.005em}
.bid-row .bi span{font-size:10.5px;color:var(--mute-d);font-family:"Geist Mono",monospace;letter-spacing:.04em}
.bid-row .bm{display:flex;flex-direction:column;gap:1px;text-align:right;flex-shrink:0}
.bid-row .bm b{font-size:13px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.bid-row .bm span{font-size:10.5px;color:var(--mute-d);font-family:"Geist Mono",monospace}

/* Step 3 — TenderSecure escrow card */
.s3-secure{display:flex;flex-direction:column;gap:6px;height:100%}
.s3-head{display:flex;align-items:center;gap:10px;padding:8px 4px 10px;
  border-bottom:1px solid var(--line-d);margin-bottom:4px}
.s3-ico{width:32px;height:32px;border-radius:9px;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.05));
  border:1px solid rgba(var(--accent-rgb),.4);color:var(--accent);
  display:grid;place-items:center;flex-shrink:0}
.s3-ico svg{width:18px;height:18px}
.s3-title{display:flex;flex-direction:column;gap:1px;line-height:1.1}
.s3-title b{font-size:14px;font-weight:600;letter-spacing:-.005em;color:#fff}
.s3-title span{font-size:10.5px;color:var(--accent);font-family:"Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.s3-row.paid{color:#fff;font-size:13px;padding-top:10px;margin-top:auto;
  border-top:1px solid var(--line-d);border-bottom:0;padding-bottom:0;
  transition:color .4s ease}
.s3-row.paid b{font-family:"Geist Mono",monospace;transition:color .4s ease}

/* pending → paid morph */
.s3-row.paid.is-pending{color:rgba(255,255,255,.55)}
.s3-row.paid.is-pending b{color:rgba(255,255,255,.7)}
.s3-row.paid.is-paid{color:var(--accent)}
.s3-row.paid.is-paid b{color:var(--accent)}
.s3-status{display:inline-flex;align-items:center;gap:9px}
.s3-icn{width:14px;height:14px;display:inline-flex;flex-shrink:0}
.s3-icn svg{width:14px;height:14px;display:block}
.s3-dot-c{transition:opacity .25s ease,transform .35s cubic-bezier(.5,0,.2,1);transform-origin:center}
.s3-check-p{stroke-dasharray:14;stroke-dashoffset:14}
.is-paid .s3-dot-c{opacity:0;transform:scale(.3)}
.is-paid .s3-check-p{animation:s3-draw .55s .12s cubic-bezier(.4,.6,.2,1) forwards}
@keyframes s3-draw{to{stroke-dashoffset:0}}
.s3-label{display:inline-grid;line-height:1.2}
.s3-l-pending,.s3-l-paid{grid-area:1/1;transition:opacity .4s ease,transform .4s cubic-bezier(.4,.6,.2,1)}
.s3-l-paid{opacity:0;transform:translateY(10px)}
.is-paid .s3-l-pending{opacity:0;transform:translateY(-10px)}
.is-paid .s3-l-paid{opacity:1;transform:translateY(0)}

.s3-row{display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--mute-d);padding:6px 0;border-bottom:1px solid var(--line-d)}
.s3-row:last-child{border:0;color:#fff;font-size:15px;padding-top:10px;margin-top:auto}
.s3-row b{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums;font-family:"Geist Mono",monospace}

/* ────────── USE CASES (Verifiable Talent) ────────── */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* legacy .case kept for fallback but new layout uses .tc-card + .cs-steps */
.case{padding:30px;border-radius:18px;border:1px solid var(--line-l);background:#fff;
  display:flex;flex-direction:column;min-height:320px}
.case .icn{width:42px;height:42px;border-radius:11px;background:var(--accent);
  display:grid;place-items:center;color:var(--accent-ink);margin-bottom:22px;font-weight:600}
.case h3{font-size:22px;font-weight:500;letter-spacing:-.015em;margin:0 0 10px}
.case p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0 0 18px}
.case ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:13px;color:var(--ink-2)}
.case ul li{display:flex;gap:10px;align-items:flex-start}
.case ul li::before{content:"";display:block;width:5px;height:5px;border-radius:50%;
  background:var(--ink);margin-top:8px;flex-shrink:0}

/* "For everyone who builds" section sits on white now — section head ink */
.lt-cases{background:#fff;color:var(--ink)}
.lt-cases .sec-head h2{color:var(--ink)}
.lt-cases .sec-head .right{color:var(--ink-2)}
.lt-cases .eyebrow.l{color:rgba(10,10,10,.5)}
.lt-cases .eyebrow .dot{background:var(--accent)}

/* ── TALENT CARD (Verifiable Expertise hero) ────────────────────────────
   A premium dark card showing a verified profile: ring score, skill bars,
   stamp. Sits above 3 step cards in the use-cases section. */
.tc-card{margin-top:8px;border-radius:24px;
  background:linear-gradient(180deg,#0f0f0f,#0a0a0a);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.75),
             0 0 0 1px rgba(var(--accent-rgb),.04) inset,
             0 0 80px -20px rgba(var(--accent-rgb),.18) inset;
  padding:36px 40px;color:#fff;position:relative;overflow:hidden}
.tc-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 28% 30%,rgba(var(--accent-rgb),.18),transparent 60%),
             radial-gradient(40% 40% at 90% 90%,rgba(var(--accent-rgb),.08),transparent 60%)}
.tc-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.04) 1px,transparent 1.2px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 80%);
          mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 80%)}
.tc-grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}

/* LEFT — identity + ring */
.tc-left{display:flex;flex-direction:column;gap:22px;min-width:0}
.tc-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  padding:6px 11px;border-radius:99px;
  background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.32)}
.tc-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);
  animation:hbpulse 1.8s ease-in-out infinite}

.tc-id{display:flex;align-items:center;gap:14px}
.tc-mono{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,#2a2a2a,#141414);
  border:1px solid rgba(255,255,255,.1);
  font-weight:600;font-size:18px;letter-spacing:.02em;color:#fff;flex-shrink:0;
  box-shadow:0 8px 18px -6px rgba(0,0,0,.5)}
.tc-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.tc-meta b{font-size:18px;font-weight:600;letter-spacing:-.01em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-meta span{font-size:13px;color:var(--mute-d);margin-top:3px;
  font-family:"Geist Mono",monospace;letter-spacing:.02em}

.tc-ring{position:relative;width:180px;height:180px;align-self:flex-start;margin-top:4px}
.tc-ring .sr-svg{width:100%;height:100%;display:block}
.tc-score{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.tc-score-num{font-size:46px;font-weight:500;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:#fff;line-height:1;
  text-shadow:0 0 24px rgba(var(--accent-rgb),.45)}
.tc-score-sub{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute-d);margin-top:6px}

.tc-stamp{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  padding:8px 13px 8px 11px;border-radius:10px;
  background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.28);color:var(--accent);
  font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500}
.tc-stamp svg{width:16px;height:16px;flex-shrink:0}

/* PORTRAIT + SCORE showcase — dotted female portrait next to the score */
.tc-showcase{display:flex;align-items:center;gap:24px;margin-top:4px}
.tc-portrait{position:relative;width:180px;aspect-ratio:5/6;flex-shrink:0;
  background:radial-gradient(60% 50% at 50% 40%,rgba(var(--accent-rgb),.1),transparent 70%)}
.tc-portrait-svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 18px rgba(var(--accent-rgb),.25));
  animation:tcPortraitIn 1.2s cubic-bezier(.3,.7,.2,1) backwards}
@keyframes tcPortraitIn{0%{opacity:0;transform:translateY(8px) scale(.95)}100%{opacity:1;transform:none}}
.tc-portrait-ring{position:absolute;inset:-6px;border-radius:50%;
  border:1px dashed rgba(var(--accent-rgb),.35);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 90%);
          mask-image:linear-gradient(180deg,#000 60%,transparent 90%);
  pointer-events:none;animation:tcRingSpin 28s linear infinite}
@keyframes tcRingSpin{to{transform:rotate(360deg)}}
.tc-portrait-scan{transform-origin:center;
  animation:tcScan 3.4s cubic-bezier(.4,0,.4,1) infinite}
@keyframes tcScan{
  0%{transform:translateY(20px);opacity:0}
  10%,90%{opacity:.55}
  50%{transform:translateY(220px);opacity:.35}
  100%{transform:translateY(220px);opacity:0}
}

.tc-score-block{display:flex;flex-direction:column;gap:8px;min-width:0}
.tc-score-num{font-size:72px;font-weight:500;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:#fff;line-height:.95;
  text-shadow:0 0 32px rgba(var(--accent-rgb),.55)}
.tc-score-divider{height:1px;width:48px;
  background:linear-gradient(90deg,var(--accent),transparent)}
.tc-score-meta{display:flex;flex-direction:column;gap:3px;line-height:1.1}
.tc-score-meta span{font-family:"Geist Mono",monospace;font-size:13px;color:var(--accent);
  letter-spacing:.02em;font-weight:500}
.tc-score-meta small{font-family:"Geist Mono",monospace;font-size:9.5px;
  letter-spacing:.18em;color:var(--mute-d);text-transform:uppercase;font-weight:500}

/* RIGHT — skill breakdown */
.tc-right{min-width:0;display:flex;flex-direction:column;gap:14px}
.tc-section{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-d);
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.tc-subs{display:flex;flex-direction:column;gap:14px}
.tc-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;
  gap:14px;align-items:center;
  opacity:0;transform:translateX(-8px);
  animation:tcSubIn .8s cubic-bezier(.2,.6,.25,1) var(--d,0s) forwards}
@keyframes tcSubIn{to{opacity:1;transform:translateX(0)}}
.tc-sub-l{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.tc-sub-l b{font-size:14.5px;font-weight:500;color:#fff;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-sub-l span{font-size:10.5px;color:var(--mute-d);font-family:"Geist Mono",monospace;
  margin-top:3px;letter-spacing:.04em}
.tc-sub-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.06);
  overflow:hidden;position:relative}
.tc-sub-bar i{position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.6),var(--accent));
  border-radius:99px;display:block;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.5);
  animation:tcBarFill 1.4s cubic-bezier(.3,.6,.2,1) calc(var(--d,0s) + .15s) forwards}
@keyframes tcBarFill{to{width:var(--w,0)}}
.tc-sub-v{font-family:"Geist Mono",monospace;font-size:16px;font-weight:600;
  color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 0 10px rgba(var(--accent-rgb),.35)}

/* ── 3 STEP CARDS (Prove · Rank · Lift) ─────────────────────────────── */
.cs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.cs-step{padding:28px 28px 30px;border-radius:18px;
  background:#0a0a0a;border:1px solid rgba(255,255,255,.08);
  color:#fff;display:flex;flex-direction:column;min-height:380px;
  position:relative;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
  transition:border-color .25s ease,transform .25s ease}
.cs-step:hover{border-color:rgba(var(--accent-rgb),.3);transform:translateY(-2px)}
.cs-tag{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);align-self:flex-start;
  padding:5px 10px;border-radius:6px;background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.25);margin-bottom:18px}
.cs-viz{flex:1;display:flex;flex-direction:column;justify-content:center;
  min-height:140px;margin-bottom:22px}
.cs-copy{margin-top:auto}
.cs-copy h3{font-size:22px;font-weight:500;letter-spacing:-.015em;
  margin:0 0 10px;line-height:1.15;color:#fff}
.cs-copy p{font-size:13.5px;line-height:1.55;color:var(--mute-d);margin:0}

/* CARD 1 — PROVE: list of tests with checks */
.cs-viz-prove{display:flex;flex-direction:column;gap:7px}
.cv-test{display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translateY(8px);
  animation:cvIn .7s cubic-bezier(.2,.6,.25,1) var(--d,0s) forwards}
@keyframes cvIn{to{opacity:1;transform:translateY(0)}}
.cv-check{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.18);
  color:var(--accent);flex-shrink:0;
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35) inset}
.cv-check svg{width:12px;height:12px;display:block}
.cv-name{flex:1;font-size:13px;color:#fff;font-weight:500;letter-spacing:-.005em;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-score{font-family:"Geist Mono",monospace;font-size:12px;font-weight:600;
  color:var(--accent);flex-shrink:0;letter-spacing:.02em}

/* CARD 2 — RANK: big counting number */
.cs-viz-rank{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px}
.cv-rank-label{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-d)}
.cv-rank-num{font-size:60px;font-weight:500;letter-spacing:-.035em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 0 32px rgba(var(--accent-rgb),.35)}
.cv-rank-num .cv-hash{color:var(--accent);font-weight:400;margin-right:2px}
.cv-rank-meta{display:flex;gap:14px;align-items:center;justify-content:center;
  font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--mute-d);
  margin-top:2px;flex-wrap:wrap}
.cv-up{color:var(--accent)}
.cv-rank-track{position:relative;width:100%;height:5px;border-radius:99px;
  background:rgba(255,255,255,.06);margin-top:12px;overflow:hidden}
.cv-rank-bar{position:absolute;left:0;top:0;height:100%;width:99.4%;
  background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.4));
  border-radius:99px;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.4);
  transform-origin:left center;animation:cvRankBar 2.4s cubic-bezier(.3,.7,.2,1) .3s backwards;
  transform:scaleX(0)}
@keyframes cvRankBar{to{transform:scaleX(1)}}
.cv-rank-you{position:absolute;right:0.6%;top:50%;width:10px;height:10px;
  background:var(--accent);border-radius:50%;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.3),
             0 0 12px rgba(var(--accent-rgb),.7);
  transform:translateY(-50%);
  animation:hbpulse 1.6s ease-in-out infinite}

/* CARD 3 — LIFT: company score before/after */
.cs-viz-lift{display:flex;flex-direction:column;justify-content:center}
.cv-co{display:flex;flex-direction:column;gap:6px}
.cv-co-name{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.005em;
  margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cv-co-name::before{content:"";width:6px;height:6px;border-radius:2px;
  background:var(--accent)}
.cv-co-row{display:flex;justify-content:space-between;align-items:baseline;
  font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--mute-d);text-transform:uppercase}
.cv-co-v{font-family:"Geist Mono",monospace;font-size:15px;font-weight:600;color:#fff;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.cv-co-v.after{color:var(--accent);text-shadow:0 0 12px rgba(var(--accent-rgb),.4)}
.cv-co-v em{font-style:normal;font-size:10.5px;color:var(--accent);
  margin-left:4px;font-weight:500;letter-spacing:.08em}
.cv-co-track{height:5px;border-radius:99px;background:rgba(255,255,255,.06);
  overflow:hidden;margin-bottom:6px;position:relative}
.cv-co-bar{display:block;height:100%;width:0;border-radius:99px;
  animation:cvCoBar 1.4s cubic-bezier(.3,.6,.2,1) forwards}
.cv-co-bar.before{background:rgba(255,255,255,.3);animation-delay:.3s}
.cv-co-bar.after{background:linear-gradient(90deg,rgba(var(--accent-rgb),.6),var(--accent));
  box-shadow:0 0 12px rgba(var(--accent-rgb),.45);animation-delay:1.1s}
@keyframes cvCoBar{to{width:var(--w,0)}}

/* responsive */
@media (max-width:1020px){
  .tc-card{padding:30px 26px}
  .tc-grid{grid-template-columns:1fr;gap:32px}
  .tc-showcase{justify-content:center;gap:20px}
  .tc-portrait{width:150px}
  .tc-score-num{font-size:60px}
  .cs-steps{grid-template-columns:1fr;gap:14px}
  .cs-step{min-height:320px}
}
@media (max-width:680px){
  .tc-card{padding:24px 20px;border-radius:20px}
  .tc-showcase{flex-direction:row;gap:16px}
  .tc-portrait{width:120px}
  .tc-score-num{font-size:48px}
  .tc-section{font-size:9.5px}
  .tc-meta b{font-size:16px}
  .tc-sub{grid-template-columns:minmax(0,1fr) 60px auto;gap:10px}
  .tc-sub-l b{font-size:13.5px}
  .cs-step{padding:24px 22px;min-height:auto}
  .cv-rank-num{font-size:48px}
}


/* ────────── TESTIMONIALS ────────── */
.quotes{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.q{padding:32px;border-radius:18px;background:#efeee8;border:1px solid rgba(10,10,10,.04);
  display:flex;flex-direction:column;min-height:300px}
.q.big{background:#0a0a0a;color:#fff;border-color:transparent;grid-row:span 2;min-height:300px}
.q blockquote{margin:0 0 24px;font-size:19px;line-height:1.4;letter-spacing:-.005em;font-weight:500}
.q.big blockquote{font-size:28px;line-height:1.25}
.q blockquote::before{content:"“";display:block;font-family:"Instrument Serif",serif;font-style:italic;
  font-size:48px;line-height:.4;margin-bottom:16px;color:var(--ink-2)}
.q.big blockquote::before{color:var(--accent)}
.q .by{margin-top:auto;display:flex;align-items:center;gap:12px}
.q .av{width:38px;height:38px;border-radius:50%;background:#d6d3c7;display:grid;place-items:center;
  font-weight:600;font-size:13px;color:#0a0a0a;flex-shrink:0}
.q.big .av{background:var(--accent);color:var(--accent-ink)}
.q .who b{display:block;font-weight:500;font-size:14px}
.q .who span{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.q.big .who span{color:var(--mute-d)}

/* ────────── PRICING ────────── */
.price-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:stretch}
.tier{padding:24px 22px;border-radius:16px;background:#fff;border:1px solid var(--line-l);
  display:flex;flex-direction:column}
.tier.featured{background:#0a0a0a;color:#fff;border-color:transparent;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.25)}
.tier .ribbon{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;height:14px}
.tier h3{font-size:19px;font-weight:500;margin:0 0 8px;letter-spacing:-.01em}
.tier .blurb{font-size:13px;color:var(--ink-2);margin:0 0 20px;min-height:36px;line-height:1.4}
.tier.featured .blurb{color:var(--mute-d)}
.tier .price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.tier .price b{font-size:36px;font-weight:500;letter-spacing:-.025em;line-height:1}
.tier .price span{color:var(--ink-2);font-size:13px}
.tier.featured .price span{color:var(--mute-d)}
.tier .per{font-size:10px;color:var(--ink-2);margin-bottom:20px;font-family:"Geist Mono",monospace;
  text-transform:uppercase;letter-spacing:.08em;line-height:1.4;min-height:28px}
.tier.featured .per{color:var(--mute-d)}
.tier .cta{margin-bottom:20px}
.tier .cta .btn{width:100%;justify-content:center;padding:0 12px;height:42px;font-size:13px}
.tier ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line-l);
  display:flex;flex-direction:column;gap:9px;font-size:12.5px}
.tier.featured ul{border-color:var(--line-d)}
.tier ul li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);line-height:1.45}
.tier.featured ul li{color:#e5e5e5}
.tier ul li::before{content:"✓";color:var(--ink);font-weight:600;font-size:12px;margin-top:1px;flex-shrink:0}
.tier.featured ul li::before{color:var(--accent)}

/* ── CUSTOMERS (Quotes) — black section with mixed cards ──────────── */
.lt-quotes{background:#000;color:#fff;position:relative;isolation:isolate}
.lt-quotes::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 600px at 80% 10%,rgba(196,255,61,.10),transparent 60%),
    radial-gradient(700px 500px at 10% 90%,rgba(0,29,243,.10),transparent 60%)}
.lt-quotes>*{position:relative;z-index:1}
.lt-quotes .sec-head h2{color:#fff}
.lt-quotes .sec-head h2 .serif{color:#c4ff3d;text-shadow:0 0 28px rgba(196,255,61,.4)}
.lt-quotes .sec-head .right{color:rgba(255,255,255,.65)}
.lt-quotes .eyebrow.l{color:rgba(255,255,255,.55)}
.lt-quotes .eyebrow .dot{background:#c4ff3d}

/* Other quotes — white cards on black */
.lt-quotes .q{background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.06);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.lt-quotes .q blockquote{color:var(--ink)}
.lt-quotes .q blockquote::before{color:rgba(10,10,10,.35)}
.lt-quotes .q .who b{color:var(--ink)}
.lt-quotes .q .who span{color:var(--ink-2)}
/* Avatar circles — lime green */
.lt-quotes .q .av{background:#c4ff3d;color:#0a0a0a;
  box-shadow:0 0 0 1px rgba(0,0,0,.05) inset,0 6px 14px -4px rgba(196,255,61,.4)}

/* Big featured quote — blue */
.lt-quotes .q.big{background:#001df3;color:#fff;border-color:transparent;
  box-shadow:0 50px 100px -24px rgba(0,29,243,.55),
             0 0 0 1px rgba(255,255,255,.06) inset}
.lt-quotes .q.big blockquote{color:#fff}
.lt-quotes .q.big blockquote::before{color:#c4ff3d}
.lt-quotes .q.big .who b{color:#fff}
.lt-quotes .q.big .who span{color:rgba(255,255,255,.7)}
.lt-quotes .q.big .av{background:#c4ff3d;color:#001df3;
  box-shadow:0 0 0 1px rgba(0,0,0,.1) inset,0 8px 18px -4px rgba(196,255,61,.5)}

/* ── PRICING — back on white background ──────────────────────────── */
#pricing{background:#fff;color:var(--ink)}
#pricing .sec-head h2{color:var(--ink)}
#pricing .sec-head .right{color:var(--ink-2)}
#pricing .eyebrow.l{color:rgba(10,10,10,.5)}
#pricing .tier{background:#fff;color:var(--ink);border:1px solid var(--line-l);box-shadow:none}
#pricing .tier h3{color:var(--ink)}
#pricing .tier .blurb{color:var(--ink-2)}
#pricing .tier ul li{color:var(--ink-2)}
#pricing .tier ul li::before{color:var(--ink)}
/* Featured tier still gets the brand accent treatment on the light bg */
#pricing .tier.featured{background:#0a0a0a;color:#fff;border-color:transparent;
  box-shadow:0 40px 90px -20px rgba(var(--accent-rgb),.45),
             0 0 0 1px rgba(var(--accent-rgb),.32) inset}
#pricing .tier.featured h3{color:#fff}
#pricing .tier.featured .blurb{color:var(--mute-d)}
#pricing .tier.featured ul li{color:#e5e5e5}
#pricing .tier.featured ul li::before{color:var(--accent)}
#pricing .tier.featured .ribbon{color:var(--accent)}

/* ── Billing toggle (Monthly / Yearly) ── */
.bill-toggle{display:inline-flex;padding:4px;border-radius:99px;
  background:rgba(10,10,10,.05);border:1px solid rgba(10,10,10,.08);
  gap:2px}
.bt-opt{display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:99px;font-size:13px;font-weight:500;
  color:var(--ink-2);background:transparent;cursor:pointer;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
  border:0;line-height:1;font-family:inherit;letter-spacing:-.005em;
  white-space:nowrap}
.bt-opt:hover{color:var(--ink)}
.bt-opt.is-on{background:#0a0a0a;color:#fff;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.25)}
.bt-save{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.08em;
  color:#c4ff3d;padding:3px 7px;border-radius:99px;
  background:rgba(196,255,61,.18);border:1px solid rgba(196,255,61,.4);
  font-weight:600;text-transform:uppercase}
.bt-opt:not(.is-on) .bt-save{color:#1f8a5b;background:rgba(31,138,91,.1);
  border-color:rgba(31,138,91,.3)}

/* Pricing slider controls — hidden by default, visible on tablet & mobile
   where price-grid becomes a horizontal scroll. Matches hero slider chrome. */
.price-ctrl{display:none}
@media (max-width:1020px){
  .price-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;
    padding:20px 0 0;margin-top:8px}
  .ps-arr{width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(10,10,10,.12);background:#fff;color:var(--ink);
    display:grid;place-items:center;cursor:pointer;
    transition:background .2s ease,border-color .2s ease,transform .15s ease;
    box-shadow:0 6px 16px -8px rgba(0,0,0,.18)}
  .ps-arr:hover{background:#fafafa;border-color:rgba(10,10,10,.22)}
  .ps-arr:active{transform:translateY(1px)}
  .ps-arr svg{width:16px;height:16px}
}

/* ────────── FAQ ────────── */
.faq{display:grid;grid-template-columns:.9fr 1.4fr;gap:80px;align-items:start}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line-l)}
.faq-item{border-bottom:1px solid var(--line-l);padding:22px 0;cursor:pointer}
.faq-item .qrow{display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-item .qrow h4{font-size:18px;font-weight:500;margin:0;letter-spacing:-.005em}
.faq-item .qrow .plus{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-l);
  display:grid;place-items:center;flex-shrink:0;font-size:14px;transition:transform .25s ease,background .2s ease}
.faq-item.open .qrow .plus{transform:rotate(45deg);background:var(--ink);color:var(--accent);border-color:transparent}
.faq-item .ans{max-height:0;overflow:hidden;transition:max-height .35s ease,margin .35s ease,opacity .25s ease;
  font-size:15px;line-height:1.55;color:var(--ink-2);opacity:0;max-width:62ch}
.faq-item.open .ans{max-height:300px;margin-top:14px;opacity:1}

.faq-side h2{font-size:clamp(36px,4.6vw,56px);line-height:1.02;letter-spacing:-.025em;
  font-weight:500;margin:14px 0 18px;max-width:14ch}
.faq-side h2 .serif{font-weight:400}
.faq-side p{color:var(--ink-2);font-size:16px;line-height:1.55;max-width:34ch}

/* ────────── CTA BAND ────────── */
.cta-band{padding:140px 0;background:var(--bg);color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:auto -10% -50% -10%;height:600px;
  background:radial-gradient(ellipse at center top,rgba(196,255,61,.22),transparent 60%);
  filter:blur(40px);pointer-events:none}
.cta-band::after{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(800px 400px at 50% 30%,#000 30%,transparent 80%);
          mask-image:radial-gradient(800px 400px at 50% 30%,#000 30%,transparent 80%);
  pointer-events:none}
.cta-inner{text-align:center;position:relative;z-index:2}
.cta-inner h2{font-size:clamp(48px,7.5vw,104px);line-height:.95;letter-spacing:-.035em;
  font-weight:500;margin:18px auto 24px;max-width:14ch}
.cta-inner h2 .serif{color:var(--accent);font-weight:400}
.cta-inner p{color:var(--mute-d);font-size:18px;line-height:1.5;max-width:48ch;margin:0 auto 36px}
.cta-row{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ────────── FOOTER ────────── */
footer{background:#0a0a0a;color:#fff;padding:60px 0 32px;border-top:1px solid var(--line-d)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.foot-grid .col h5{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-d);margin:0 0 16px;font-weight:500}
.foot-grid .col a{display:block;font-size:14px;color:#e5e5e5;padding:5px 0}
.foot-grid .col a:hover{color:var(--accent)}
.foot-brand p{color:var(--mute-d);font-size:14px;line-height:1.55;margin:14px 0 0;max-width:32ch}
.foot-brand .brand{margin-bottom:0}
.foot-bot{border-top:1px solid var(--line-d);padding-top:24px;display:flex;
  justify-content:space-between;align-items:center;font-size:11px;color:var(--mute-d);
  font-family:"Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.foot-bot .ll{display:flex;gap:24px}

/* brighter accent for serif word emphasis on dark — avoids saturation crush */
.dark .hero h1 .serif,
.dark .step h3 .serif,
.cta-inner h2 .serif{
  color:var(--accent);
  text-shadow:0 0 24px rgba(var(--accent-rgb),.5)}

/* ═══════════════════════════════════════════════════════════════════════
   THEME INVERSION — flips section backgrounds:
   Hero/Logos/Steps/CTA/Footer → LIGHT
   Features/Cases/Quotes/Pricing/FAQ → DARK
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   HERO SLIDER — dark hero canvas with 2 stacked slides
   ═══════════════════════════════════════════════════════════════════════ */
.dk-hero-wrap{background:var(--bg);color:#fff;position:relative;isolation:isolate;
  transition:background-color .65s ease}
/* Slide 0 = pure BLACK (Welcome) */
.dk-hero-wrap[data-slide="0"]{background-color:#000}
.dk-hero-wrap[data-slide="0"]::before{opacity:0}
.dk-hero-wrap[data-slide="0"] .grid-bg{opacity:0}
/* Slide 1 = logo blue background (#001df3) */
.dk-hero-wrap[data-slide="1"]{background:#001df3}
/* Slide 2 = accent green background (#c3ff3d) */
.dk-hero-wrap[data-slide="2"]{background:#c3ff3d}
.dk-hero-wrap[data-slide="2"] .hero h1{color:#000}
.dk-hero-wrap[data-slide="2"] .hero h1 .serif{color:#000}
.dk-hero-wrap[data-slide="2"] .hero p.lede{color:#000}
.dk-hero-wrap[data-slide="2"] .hero-eyebrow{color:#000}
.dk-hero-wrap[data-slide="2"] .hero-eyebrow .dot{background:#000}
.dk-hero-wrap>.grid-bg{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1200px 700px at 50% 0%,#000 30%,transparent 80%);
          mask-image:radial-gradient(1200px 700px at 50% 0%,#000 30%,transparent 80%);
  pointer-events:none;z-index:0}
.dk-hero-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 700px at 80% -10%,rgba(var(--accent-rgb),.13),transparent 60%),
    radial-gradient(800px 600px at 0% 100%,rgba(var(--accent-rgb),.05),transparent 60%)}
.dk-hero-wrap>*{position:relative;z-index:1}
.dk-hero-wrap .nav{background:rgba(10,10,10,.55);border-bottom:1px solid var(--line-d)}

/* ═════════════════════════════════════════════════════════════════════════
   WELCOME SLIDE (slide 0) — iPhone-style cycling translations
   Cursive handwritten word that "draws" left-to-right (clip-path sweep),
   holds, then fades up + blurs as the next translation draws in.
   ═════════════════════════════════════════════════════════════════════════ */
.welcome-slide{display:flex;align-items:center;justify-content:center;
  min-height:600px;padding:96px 0 60px;position:relative}
.welcome-stage{position:relative;width:100%;
  height:1.4em;display:flex;align-items:center;justify-content:center;
  font-family:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-weight:200;font-style:normal;
  font-size:clamp(45.36px,9vw,156px);line-height:1.05;
  color:#fff;letter-spacing:-.035em}
.welcome-word{position:absolute;top:50%;left:50%;
  white-space:nowrap;text-align:center;color:#fff;
  text-shadow:0 0 60px rgba(255,255,255,.18),0 0 16px rgba(255,255,255,.1);
  transform:translate(-50%,-50%);z-index:5}
.welcome-enter{animation:welIn .65s cubic-bezier(.22,.61,.36,1) both}
.welcome-exit{animation:welOut .55s cubic-bezier(.4,0,.2,1) both}
@keyframes welIn{
  0%{opacity:0;transform:translate(-50%,calc(-50% + 22px));filter:blur(10px)}
  100%{opacity:1;transform:translate(-50%,-50%);filter:blur(0)}
}
@keyframes welOut{
  0%{opacity:1;transform:translate(-50%,-50%);filter:blur(0)}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 22px));filter:blur(10px)}
}

/* Tagline that lives BELOW the welcome word — each tagline is the same
   "The World Works Here" thought translated into the active language.
   Per-word stagger + 3D rotateX entry, gentle whole-tagline fade on exit. */
.welcome-tagline{position:absolute;top:50%;left:50%;
  --tag-offset:calc(6vw + 44px);
  transform:translate(-50%,calc(-50% + var(--tag-offset)));
  z-index:5;
  white-space:nowrap;text-align:center;
  font-family:"Roboto",ui-sans-serif,system-ui,sans-serif;
  font-weight:100;font-style:normal;text-transform:capitalize;
  font-size:clamp(21.6px,2.64vw,40.8px);
  line-height:1.12;letter-spacing:-.01em;
  color:#c3ff3d;
  text-shadow:0 0 24px rgba(195,255,61,.44),0 0 9px rgba(195,255,61,.22);
  pointer-events:none;
  perspective:600px}
.welcome-tagline .wt-word{display:inline-block;margin-right:.32em;
  will-change:transform,opacity,filter}
.welcome-tagline .wt-word:last-child{margin-right:0}
.tag-enter .wt-word{
  opacity:0;
  transform:translateY(22px) rotateX(28deg);
  filter:blur(6px);
  transform-origin:50% 100%;
  animation:tagWordIn .9s cubic-bezier(.2,.6,.25,1) forwards}
@keyframes tagWordIn{
  to{opacity:1;transform:translateY(0) rotateX(0deg);filter:blur(0)}
}
.tag-exit{animation:tagOut .55s cubic-bezier(.4,0,.2,1) forwards}
@keyframes tagOut{
  from{opacity:1;transform:translate(-50%,calc(-50% + var(--tag-offset)));filter:blur(0)}
  to{opacity:0;transform:translate(-50%,calc(-50% + var(--tag-offset) - 16px));filter:blur(10px)}
}

/* App Store + Google Play badges — alt sağa yaslı glassmorphic stil.
   Siyah zemin için tercih edilen "stroke + glass" treatment — Apple/Vercel
   tarzı landing'lerden taşınan modern badge tasarımı. */
.store-badges{position:absolute;bottom:calc(-43px - 75px);right:32px;z-index:10;
  display:flex;gap:10px;align-items:center;pointer-events:auto}
.store-badge{display:inline-flex;align-items:center;gap:11px;
  height:54px;padding:0 20px;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  color:#fff;text-decoration:none;
  font-family:"Geist",ui-sans-serif,system-ui,sans-serif;
  transition:background .25s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.6,.25,1);
  white-space:nowrap}
.store-badge:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.32);
  transform:translateY(-1px)}
.store-badge svg{width:22px;height:22px;flex-shrink:0;fill:#fff}
.store-badge .sb-text{display:flex;flex-direction:column;line-height:1;
  text-align:left}
.store-badge .sb-eyebrow{font-size:9.5px;font-weight:400;
  letter-spacing:.06em;color:rgba(255,255,255,.72);
  text-transform:uppercase;margin-bottom:3px}
.store-badge .sb-main{font-size:15.5px;font-weight:500;
  letter-spacing:-.005em}

/* Mobile padding fix for slides 2 & 3 (Hero + HeroExperts) — 50px breathing
   room so content does not touch the viewport edges, plus top padding so the
   content clears the fixed top bar (62px nav height + buffer). */
@media (max-width:768px){
  .hero-slides .hero-experts.wrap{
    padding-left:50px;padding-right:50px;
    padding-top:78px}
}

/* Tablet */
@media (max-width:900px){
  .store-badges{bottom:24px;right:20px;gap:8px}
  .store-badge{height:48px;padding:0 14px;gap:9px;border-radius:11px}
  .store-badge svg{width:20px;height:20px}
  .store-badge .sb-eyebrow{font-size:8.5px}
  .store-badge .sb-main{font-size:13.5px}
}

/* Phone — store badges positioned near the very bottom of the viewport,
   well below the slider controls, as indicated by the arrow in the reference. */
@media (max-width:540px){
  .store-badges{bottom:16px;left:16px;right:16px;
    justify-content:center;gap:8px}
  .store-badge{flex:1 1 auto;justify-content:center;
    height:46px;padding:0 12px;gap:8px;max-width:178px}
}

/* Small phone */
@media (max-width:360px){
  .store-badge{height:44px;padding:0 10px}
  .store-badge .sb-eyebrow{font-size:8px;margin-bottom:2px}
  .store-badge .sb-main{font-size:12.5px}
}

/* ═════════════════════════════════════════════════════════════════════════
   PRODUCT VIDEO SECTION — Two-column layout: copy on left, video on right
   ═════════════════════════════════════════════════════════════════════════ */
.product-video-section{padding:120px 0 100px;position:relative;
  background:#000;color:#fff}
.pv-wrap{display:grid;grid-template-columns:0.9fr 1.4fr;gap:72px;align-items:center;max-width:1280px}
.pv-content{text-align:left;max-width:520px}
.pv-eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65);
  margin-bottom:20px}
.pv-eyebrow .dot{width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);
  animation:pvDotPulse 2s ease-in-out infinite}
@keyframes pvDotPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.75;transform:scale(1.15)}
}
.pv-h2{font-size:clamp(38px,4.8vw,56px);line-height:1.08;
  letter-spacing:-.035em;margin:0 0 24px;color:#fff}
.pv-h2 .serif{font-family:"Instrument Serif",ui-serif,Georgia,serif;
  font-style:italic;color:var(--accent)}
.pv-lede{font-size:clamp(16px,1.8vw,19px);line-height:1.6;
  color:rgba(255,255,255,.75);margin:0}
.pv-cta{display:flex;gap:12px;flex-wrap:wrap}
.pv-frame{width:100%;border-radius:16px;overflow:hidden;
  border:2px solid rgba(var(--accent-rgb),.5);
  box-shadow:0 0 60px 8px rgba(var(--accent-rgb),.45),
             0 20px 40px -10px rgba(var(--accent-rgb),.35);
  background:#0a0a0a;position:relative;aspect-ratio:16/9}
.pv-video{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:900px){
  .product-video-section{padding:80px 0 64px}
  .pv-wrap{grid-template-columns:1fr;gap:48px;text-align:center}
  .pv-content{max-width:100%;text-align:center;margin:0 auto}
  .pv-h2{margin-bottom:18px}
  .pv-cta{justify-content:center}
  .pv-frame{border-radius:14px;max-width:680px;margin:0 auto}
}
@media (max-width:680px){
  .product-video-section{padding:64px 0 48px}
  .pv-wrap{gap:36px}
  .pv-frame{border-radius:12px}
  .pv-cta{flex-direction:column;width:100%}
  .pv-cta .btn{width:100%}
}

/* Intro icon — runs once before the welcome cycle begins.
   Phases:
   1. 0-30%   tiny → text-size, WHITE
   2. 30-45%  holds at text-size while color shifts white→blue
   3. 45-100% grows huge into the background and fades to a faint watermark */
.welcome-intro-icon{position:absolute;top:50%;left:50%;
  width:clamp(40px,5.6vw,96px);aspect-ratio:229/369;
  transform:translate(-50%,-50%) scale(.04);
  opacity:0;pointer-events:none;z-index:1;
  animation:introIcon 4s cubic-bezier(.45,.05,.2,1) forwards;
  will-change:transform,opacity}
.welcome-intro-icon img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;display:block}
.ii-white{filter:brightness(0) invert(1);
  animation:iiWhiteOut 4s linear forwards}
.ii-blue{opacity:0;animation:iiBlueIn 4s linear forwards}
@keyframes introIcon{
  0%   {transform:translate(-50%,-50%) scale(.04);opacity:0}
  6%   {opacity:1}
  30%  {transform:translate(-50%,-50%) scale(1);opacity:1}
  46%  {transform:translate(-50%,-50%) scale(1);opacity:1}
  100% {transform:translate(-50%,-50%) scale(3);opacity:.11}
}
@keyframes iiWhiteOut{
  0%   {opacity:1}
  38%  {opacity:1}
  52%  {opacity:0}
  100% {opacity:0}
}
@keyframes iiBlueIn{
  0%   {opacity:0}
  38%  {opacity:0}
  52%  {opacity:1}
  100% {opacity:1}
}

/* slide stack — both slides occupy same grid cell, fade between */
.hero-slider{position:relative}
.hero-slides{display:grid}
.hero-slides>.hero-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .55s ease,transform .65s cubic-bezier(.22,.61,.36,1),visibility 0s linear .55s}
.hero-slides>.hero-slide.is-on{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .55s ease,transform .65s cubic-bezier(.22,.61,.36,1),visibility 0s linear}

/* slider controls — under the slides, centered */
.hero-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;
  padding:8px 28px 56px;position:relative;z-index:2;max-width:var(--max);margin:0 auto;pointer-events:none}
.hero-ctrl > *{pointer-events:auto}
.hs-arr{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:#fff;display:grid;place-items:center;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;cursor:pointer}
.hs-arr:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.hs-arr:active{transform:translateY(1px)}
.hs-arr svg{width:16px;height:16px}
.hs-dots{display:flex;gap:8px;padding:0 6px}
.hs-dot{position:relative;width:44px;height:5px;border-radius:99px;background:rgba(255,255,255,.1);
  overflow:hidden;border:0;cursor:pointer;padding:0;
  transition:background .2s ease,width .25s ease}
.hs-dot.on{width:64px;background:rgba(255,255,255,.16)}
.hs-dot .hs-dot-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent);border-radius:99px}
.hs-dot.on .hs-dot-fill{animation:hsfill 9s linear forwards}
/* pause the active dot's fill while the user hovers the slider */
.hero-slider:hover .hs-dot.on .hs-dot-fill{animation-play-state:paused}
@keyframes hsfill{from{width:0}to{width:100%}}
.hs-count{font-family:"Geist Mono",monospace;font-size:11px;color:var(--mute-d);letter-spacing:.14em;
  text-transform:uppercase;margin-left:6px;font-variant-numeric:tabular-nums}
.hs-count b{color:#fff;font-weight:600}

/* ── SLIDE 1 — apply dark theme to the existing Hero markup ───────────── */
.dk-hero-wrap .hero h1{color:#fff}
.dk-hero-wrap .hero h1 .serif{color:var(--accent);text-shadow:0 0 30px rgba(var(--accent-rgb),.5)}
.dk-hero-wrap .hero p.lede{color:var(--mute-d)}

/* Slide 1 (Global Network) — mixed text colors on blue bg */
.dk-hero-wrap[data-slide="1"] .hero h1{color:#000}
.dk-hero-wrap[data-slide="1"] .hero h1 .serif{color:#fff}
.dk-hero-wrap[data-slide="1"] .hero p.lede{color:#000}
.dk-hero-wrap .hero-meta .num{color:#fff}
.dk-hero-wrap .hero-meta .num .serif{color:var(--accent)}
.dk-hero-wrap .hero-meta .lab{color:var(--mute-d)}
.dk-hero-wrap .eyebrow{color:var(--mute-d)}

/* Slide 1 — text-only variant inside the slider */
.hero-text{padding:64px 0 32px;display:flex;flex-direction:column;justify-content:center;min-height:540px}
.hero-text .hero-cta{margin-bottom:0}

/* HERO SHARED — metrics + dashboard mock under the slider */
.hero-shared{padding:24px 28px 96px;max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.hero-shared .hero-meta{margin-top:0;margin-bottom:48px;padding-top:32px;
  border-top:1px solid rgba(255,255,255,.08)}
.hero-shared .hero-mock{margin-top:0}

/* ═══════════════════════════════════════════════════════════════════════
   HERO EXPERTS — slide 2
   ═══════════════════════════════════════════════════════════════════════ */
.hero-experts{padding:48px 0 32px;position:relative;display:flex;flex-direction:column;justify-content:center;min-height:540px}
.he-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center;margin-bottom:0}
.he-content .hero-eyebrow{margin-bottom:28px}
/* Sol metni hafifçe sağa kaydır (Slide 1 Hero ve Slide 2 HeroExperts). */
.he-content{padding-left:32px}
/* Slide 1 (Hero) lede — beyaz */
.hero-slides>.hero-slide:nth-child(2) .he-content p.lede{color:#fff}
/* Slide 1 (Hero) "Get Started" — siyah buton */
.hero-slides>.hero-slide:nth-child(2) .he-content .btn-primary{
  background:#0a0a0a;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 10px 30px -10px rgba(0,0,0,.5)}
.hero-slides>.hero-slide:nth-child(2) .he-content .btn-primary:hover{
  background:#1a1a1a;filter:none}
/* Slide 2 (HeroExperts) "How it works" — beyaz buton */
.hero-slides>.hero-slide:nth-child(3) .he-content .btn-ghost{
  background:#fff;color:#0a0a0a;border-color:#fff}
.hero-slides>.hero-slide:nth-child(3) .he-content .btn-ghost:hover{
  background:#f0f0f0;border-color:#f0f0f0}
@media (max-width:1020px){ .he-content{padding-left:0} }
.he-content h1{font-size:clamp(40px,6.2vw,82px);line-height:.98;letter-spacing:-.035em;
  font-weight:500;margin:0 0 22px;max-width:16ch;color:#fff}
.he-content h1 .serif{color:var(--accent);font-weight:400;text-shadow:0 0 30px rgba(var(--accent-rgb),.5)}
.he-content p.lede{font-size:clamp(16px,1.5vw,18px);line-height:1.55;color:var(--mute-d);
  max-width:50ch;margin:0 0 36px}
.he-content .hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* portrait column */
.he-portrait{position:relative;aspect-ratio:4/5;min-height:520px}
.he-frame{position:relative;width:100%;height:100%}
.he-frame image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;
  border-radius:22px;overflow:hidden;
  box-shadow:0 60px 120px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
/* accent glow behind portrait */
.he-glow{position:absolute;inset:-30px -30px -10px;border-radius:32px;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 60% at 75% 30%,rgba(var(--accent-rgb),.28),transparent 70%),
             radial-gradient(50% 55% at 20% 90%,rgba(var(--accent-rgb),.16),transparent 70%);
  filter:blur(40px);opacity:.9}

/* expert pill — top-left of portrait */
.he-pill{position:absolute;left:-18px;top:24px;display:flex;align-items:center;gap:12px;
  padding:10px 16px 10px 10px;border-radius:14px;
  background:rgba(14,14,14,.82);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.1);z-index:3;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.55);
  animation:hefloat 6s ease-in-out infinite}
.he-pill .he-av{width:36px;height:36px;border-radius:50%;
  background:linear-gradient(140deg,#3a3a3a,#1c1c1c);color:#fff;
  border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;font-weight:600;font-size:13px;letter-spacing:.02em;flex-shrink:0}
.he-pi{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.he-pi b{font-size:13.5px;font-weight:600;color:#fff;letter-spacing:-.005em;white-space:nowrap}
.he-pi span{font-size:11px;color:var(--mute-d);font-family:"Geist Mono",monospace;
  letter-spacing:.02em;margin-top:2px;white-space:nowrap}
.he-online{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:99px;
  background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.3);
  color:var(--accent);font-family:"Geist Mono",monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-left:6px;white-space:nowrap}
.he-online .live{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);animation:hbpulse 1.6s ease-in-out infinite}
@keyframes hbpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}

/* TenderSecure shield card — bottom-right of portrait */
.he-shield{position:absolute;right:-26px;bottom:60px;width:268px;
  background:linear-gradient(180deg,#161616,#0c0c0c);border-radius:16px;
  border:1px solid rgba(var(--accent-rgb),.38);padding:16px 18px;z-index:3;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7),
             0 0 0 1px rgba(255,255,255,.04),
             0 20px 50px -16px rgba(var(--accent-rgb),.35);
  animation:hefloat 7s ease-in-out infinite -2s}
.he-shield-h{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.he-shield-ic{width:32px;height:32px;border-radius:9px;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05));
  border:1px solid rgba(var(--accent-rgb),.4);color:var(--accent);
  display:grid;place-items:center;flex-shrink:0}
.he-shield-ic svg{width:17px;height:17px}
.he-shield-tx{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.he-shield-tx b{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.005em}
.he-shield-tx span{font-size:10.5px;color:var(--accent);font-family:"Geist Mono",monospace;
  text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.he-shield-row{display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--mute-d);padding:7px 0}
.he-shield-row b{font-size:12.5px;color:#fff;font-weight:500;font-family:"Geist Mono",monospace;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.he-shield-row+.he-shield-row{border-top:1px dashed rgba(255,255,255,.06)}

/* chat bubble — bottom-left */
.he-quote{position:absolute;left:-26px;bottom:-12px;max-width:260px;
  background:#fff;color:var(--ink);border-radius:16px 16px 16px 4px;padding:14px 16px;z-index:3;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.5),0 0 0 1px rgba(10,10,10,.04);
  animation:hefloat 8s ease-in-out infinite -4s}
.he-q-mark{position:absolute;top:-6px;left:14px;font-family:"Instrument Serif",serif;
  font-size:48px;line-height:.5;color:var(--accent);font-style:italic}
.he-quote p{margin:6px 0 8px;font-size:13.5px;line-height:1.45;color:var(--ink);letter-spacing:-.005em}
.he-q-meta{font-family:"Geist Mono",monospace;font-size:10px;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.1em}

@keyframes hefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* metrics row on slide 2 (now lives in hero-shared) */
.hero-experts .hero-meta{display:none}

/* ── SLIDE 1 ─ Network visual (replaces image-slot) ───────────────────── */
.hn-wrap .he-frame{overflow:visible}
/* Masaüstünde globe %10 küçük + biraz aşağı */
@media (min-width:1021px){
  .hn-wrap{transform:scale(.9) translateY(40px);transform-origin:center top}
}
.hn-base{position:absolute;inset:0;border-radius:22px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%,#1a1a1a,#0a0a0a 60%),
    linear-gradient(180deg,#161616,#0a0a0a);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04) inset}
.hn-mesh{position:absolute;inset:0;
  background-image:radial-gradient(circle at 1.4px 1.4px,rgba(255,255,255,.16) 1.4px,transparent 1.6px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 50%,#000 30%,transparent 85%);
          mask-image:radial-gradient(ellipse 75% 85% at 50% 50%,#000 30%,transparent 85%)}
.hn-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(45% 40% at 32% 30%,rgba(var(--accent-rgb),.22),transparent 70%),
    radial-gradient(40% 40% at 70% 70%,rgba(var(--accent-rgb),.14),transparent 70%);
  mix-blend-mode:screen}
.hn-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hn-lines path{fill:none;stroke:rgba(var(--accent-rgb),.55);stroke-width:.18;
  stroke-dasharray:.6 .8;stroke-linecap:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.45));opacity:.9}
.hn-acc{position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%);z-index:2;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16),0 0 32px rgba(var(--accent-rgb),.65)}
.hn-acc::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff;opacity:.85}
.hn-acc .hn-ring{position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid rgba(var(--accent-rgb),.6);
  animation:hnring 2.6s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes hnring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.hn-a1{left:24%;top:32%}
.hn-a2{left:62%;top:24%}
.hn-a2 .hn-ring{animation-delay:.5s}
.hn-a3{left:72%;top:62%}
.hn-a3 .hn-ring{animation-delay:1s}
.hn-a4{left:34%;top:75%}
.hn-a4 .hn-ring{animation-delay:1.6s}

/* avatar variant for slide 1 pill (replaces face initials) */
.hn-av{background:linear-gradient(140deg,rgba(var(--accent-rgb),.28),rgba(var(--accent-rgb),.08))!important;
  border:1px solid rgba(var(--accent-rgb),.42)!important;color:var(--accent)!important}
.hn-av svg{width:18px;height:18px}

/* ═════════════════════════════════════════════════════════════════════════
   SLIDE 1 — GLOBE VISUAL (Earth-from-space)
   Replaces the dot-mesh network. A curved Earth horizon at the bottom,
   stars above, and lime accent dots pulsing on the visible surface with
   arcing connectors between them.
   ═════════════════════════════════════════════════════════════════════════ */
.he-globe-viz{position:absolute;inset:0;border-radius:22px;overflow:hidden;
  background:
    radial-gradient(140% 90% at 50% 110%,#1638a8 0%,#0a1f6a 20%,#070f48 45%,#04082a 80%,#020416 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset}

/* stars in upper space */
.hgv-stars{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1}
.hgv-stars circle{fill:rgba(255,255,255,.55)}
.hgv-stars .st-b{fill:rgba(255,255,255,.85)}

/* Earth sphere — large circle anchored at bottom, mostly off-screen */
.hgv-earth{position:absolute;left:50%;top:62%;
  width:220%;aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 30%,#3a6cf0 0%,#1a3aa8 25%,#0b1a78 45%,#06104a 65%,#030820 90%);
  box-shadow:
    inset 0 24px 60px rgba(180,220,255,.22),
    inset 0 0 120px rgba(0,40,200,.35),
    inset 0 -40px 80px rgba(2,4,20,.6),
    0 -16px 40px rgba(180,220,255,.18),
    0 -2px 0 rgba(220,240,255,.5);
  z-index:1}
.hgv-earth-mesh{position:absolute;inset:0;border-radius:50%;
  background-image:radial-gradient(circle at 1.4px 1.4px,rgba(255,255,255,.18) 1.2px,transparent 1.4px);
  background-size:14px 14px;
  mix-blend-mode:screen;
  opacity:.85;
  animation:hgv-drift 90s linear infinite}
@keyframes hgv-drift{from{background-position:0 0}to{background-position:-280px 0}}
/* subtle cloud streaks across Earth */
.hgv-earth-clouds{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(ellipse 28% 4% at 35% 28%,rgba(255,255,255,.18),transparent 80%),
    radial-gradient(ellipse 38% 4% at 65% 38%,rgba(255,255,255,.12),transparent 80%),
    radial-gradient(ellipse 22% 3% at 50% 22%,rgba(255,255,255,.14),transparent 80%),
    radial-gradient(ellipse 30% 3% at 30% 48%,rgba(255,255,255,.08),transparent 80%);
  mix-blend-mode:screen;opacity:.9;z-index:2}

/* atmospheric horizon glow */
.hgv-atmosphere{position:absolute;left:0;right:0;top:60%;height:60px;
  background:linear-gradient(180deg,transparent,rgba(180,220,255,.22) 60%,rgba(255,255,255,.35) 92%,transparent);
  pointer-events:none;z-index:2;mix-blend-mode:screen}

/* arc connectors between accent dots */
.hgv-arcs{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:3}
.hgv-arcs path{fill:none;stroke:rgba(195,255,61,.4);stroke-width:.2;
  stroke-dasharray:.6 .8;stroke-linecap:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(195,255,61,.45))}

/* pulsing accent dots on Earth's visible surface */
.hgv-acc{position:absolute;width:13px;height:13px;border-radius:50%;
  background:#c3ff3d;transform:translate(-50%,-50%);z-index:4;
  box-shadow:0 0 0 4px rgba(195,255,61,.18),0 0 28px rgba(195,255,61,.65)}
.hgv-acc::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:#fff;opacity:.85}
.hgv-acc .hgv-ring{position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid rgba(195,255,61,.6);
  animation:hgv-ring 2.8s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes hgv-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(3.6);opacity:0}}
.hgv-a1{left:22%;top:80%}
.hgv-a2{left:50%;top:74%}
.hgv-a2 .hgv-ring{animation-delay:.5s}
.hgv-a3{left:76%;top:82%}
.hgv-a3 .hgv-ring{animation-delay:1s}
.hgv-a4{left:35%;top:88%}
.hgv-a4 .hgv-ring{animation-delay:1.5s}
.hgv-a5{left:64%;top:90%}
.hgv-a5 .hgv-ring{animation-delay:2s}

/* ═════════════════════════════════════════════════════════════════════════
   SLIDE 2 — SECURITY TIMELINE
   A vertical project timeline with a security check stamp at every stage.
   Sized to match slide 1's visual footprint (.he-portrait).
   ═════════════════════════════════════════════════════════════════════════ */
.st-wrap{
  position:relative;width:100%;
  margin:0 auto;
  min-height:560px;
  display:flex;align-items:stretch}
/* Webview only — slide 2 animasyonu hafif küçültülmüş + aşağıya kaydırılmış */
@media (min-width:1021px){
  .st-wrap{max-width:620px;min-height:500px;margin:60px auto 0}
}
.st-frame{
  position:absolute;inset:0;
  background:#000;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:20px 20px 18px;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 50px -10px rgba(195,255,61,.18) inset;
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  overflow:hidden}

/* faint dot mesh behind everything */
.st-frame::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1.2px 1.2px,rgba(255,255,255,.06) 1px,transparent 1.2px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 40%,transparent 90%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 40%,transparent 90%);
  opacity:.6}
/* lime corner glow */
.st-frame::after{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:
    radial-gradient(45% 35% at 88% 6%,rgba(195,255,61,.18),transparent 60%),
    radial-gradient(40% 40% at 8% 92%,rgba(195,255,61,.10),transparent 60%);
  mix-blend-mode:screen;z-index:0}

/* Header — TenderSecure heading row */
.st-head{display:flex;align-items:center;gap:12px;
  padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.10);position:relative;z-index:2}
.st-head-ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(180deg,rgba(195,255,61,.22),rgba(195,255,61,.05));
  border:1px solid rgba(195,255,61,.4);
  display:grid;place-items:center;color:#c3ff3d}
.st-head-ic svg{width:18px;height:18px}
.st-head-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.st-head-tx b{font-size:14.5px;font-weight:600;color:#fff;letter-spacing:-.005em}
.st-head-tx span{font-size:11px;color:rgba(255,255,255,.6);
  font-family:"Geist Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.st-live{display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:99px;flex-shrink:0;
  background:rgba(195,255,61,.14);border:1px solid rgba(195,255,61,.35);
  color:#c3ff3d;font-family:"Geist Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.12em;font-weight:600;text-transform:uppercase}
.st-live-dot{width:5px;height:5px;border-radius:50%;background:#c3ff3d;
  box-shadow:0 0 0 3px rgba(195,255,61,.25);
  animation:stLiveDot 1.6s ease-in-out infinite}
@keyframes stLiveDot{0%,100%{opacity:1}50%{opacity:.55}}

/* The timeline list — scrolls stages upward while progress fills downward */
.st-list{position:relative;z-index:2;list-style:none;padding:0;margin:0;flex:1;
  display:flex;flex-direction:column;justify-content:flex-start;gap:0;
  overflow:hidden}
.st-list-inner{display:flex;flex-direction:column;
  animation:stListScroll 14s linear infinite}
@keyframes stListScroll{
  0%{transform:translateY(0)}
  100%{transform:translateY(-50%)}
}

/* Vertical track behind all step nodes — fixed, doesn't scroll */
.st-track{position:absolute;left:14px;top:8px;bottom:8px;width:2px;
  background:rgba(255,255,255,.10);border-radius:2px;overflow:hidden;pointer-events:none;z-index:3}
.st-track-fill{position:absolute;left:0;top:0;width:100%;height:0%;
  background:linear-gradient(180deg,#c3ff3d 0%,rgba(195,255,61,.65) 100%);
  box-shadow:0 0 12px rgba(195,255,61,.6);
  animation:stTrack 14s linear infinite}
@keyframes stTrack{
  0%{height:0%}
  100%{height:100%}
}

/* Each step — statically visible; emphasis comes from the pulsing node ring and traveling track fill */
.st-step{position:relative;display:flex;align-items:center;gap:14px;
  padding:7px 0;min-height:46px}

/* Node — circular check stamp */
.st-node{position:relative;width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 30% 30%,rgba(195,255,61,.35),rgba(195,255,61,.08));
  border:1.5px solid rgba(195,255,61,.55);
  display:grid;place-items:center;color:#c3ff3d;
  box-shadow:0 0 0 5px rgba(0,0,0,.0),0 0 18px rgba(195,255,61,.35);
  z-index:1}
.st-node svg{width:13px;height:13px}
.st-node-ring{position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid rgba(195,255,61,.7);
  animation:stNodeRing 2.2s cubic-bezier(.3,.6,.4,1) infinite;
  animation-delay:calc(var(--i) * 0.35s);
  opacity:.8}
@keyframes stNodeRing{
  0%{transform:scale(.55);opacity:.85}
  100%{transform:scale(1.9);opacity:0}
}

/* Row content */
.st-row{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.st-stage{display:flex;align-items:center;gap:10px;min-width:0}
.st-stage-num{font-family:"Geist Mono",ui-monospace,monospace;
  font-size:10.5px;color:rgba(255,255,255,.45);letter-spacing:.06em;
  width:22px;flex-shrink:0}
.st-stage-name{font-size:13px;font-weight:500;color:#fff;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Right-side security check chip */
.st-check{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:4px 9px;border-radius:99px;
  background:rgba(195,255,61,.12);
  border:1px solid rgba(195,255,61,.32);
  color:#c3ff3d;
  font-family:"Geist Mono",ui-monospace,monospace;
  font-size:9.5px;font-weight:600;letter-spacing:.10em;text-transform:uppercase}
.st-check svg{width:11px;height:11px;flex-shrink:0}
.st-check-tx{white-space:nowrap}

/* Warn tone — dispute raised (amber) */
.st-step--warn .st-node{
  background:radial-gradient(circle at 30% 30%,rgba(255,176,64,.35),rgba(255,176,64,.08));
  border-color:rgba(255,176,64,.6);
  color:#ffb040;
  box-shadow:0 0 18px rgba(255,176,64,.4)}
.st-step--warn .st-node-ring{border-color:rgba(255,176,64,.7)}
.st-step--warn .st-check{
  background:rgba(255,176,64,.14);
  border-color:rgba(255,176,64,.4);
  color:#ffb040}

/* Accent tone — expert intervenes (white) */
.st-step--accent .st-node{
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4),rgba(255,255,255,.1));
  border-color:rgba(255,255,255,.7);
  color:#fff;
  box-shadow:0 0 22px rgba(255,255,255,.45)}
.st-step--accent .st-node-ring{border-color:rgba(255,255,255,.8)}
.st-step--accent .st-check{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.5);
  color:#fff}

/* Footer protocol line */
.st-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  padding-top:14px;margin-top:14px;
  border-top:1px solid rgba(255,255,255,.08)}
.st-foot-tx{font-family:"Geist Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.55)}

/* Responsive — collapse the right chip on tablet */
@media (max-width:900px){
  .st-frame{padding:20px 18px 16px}
  .st-stage-name{font-size:13.5px}
  .st-check{padding:3px 7px;font-size:9px}
  .st-track{left:15px}
}
@media (max-width:540px){
  .st-frame{padding:18px 14px 14px}
  .st-head{margin-bottom:10px;padding-bottom:10px}
  .st-head-ic{width:30px;height:30px}
  .st-head-tx b{font-size:13px}
  .st-head-tx span{font-size:10px}
  .st-live{font-size:9px;padding:4px 8px}
  .st-node{width:30px;height:30px}
  .st-node svg{width:14px;height:14px}
  .st-track{left:14px}
  .st-stage-name{font-size:12.5px}
  .st-check-tx{display:none}
  .st-check{padding:4px 6px}
  .st-foot-tx{font-size:9px;letter-spacing:.12em}
}

/* ═════════════════════════════════════════════════════════════════════════
   SLIDE 2 — WORLD CITIES MAP (Istanbul / Dubai / Berlin / Rome)
   Big dotted world map on brand blue, with pulsing city beacons + arcs.
   ═════════════════════════════════════════════════════════════════════════ */
.wcm-wrap{position:relative;width:100%;height:100%;min-height:520px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 4px}
.wcm-svg{width:100%;height:auto;max-height:560px;display:block;
  filter:drop-shadow(0 0 80px rgba(195,255,61,.15))}

/* City halo pulse */
.wcm-halo{animation:wcmHalo 3.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes wcmHalo{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.5)}
}

/* Concentric rings — staggered breathing */
.wcm-ring-out{animation:wcmRingOut 4.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes wcmRingOut{
  0%,100%{opacity:.9;transform:scale(1)}
  50%{opacity:.25;transform:scale(1.55)}
}
.wcm-ring-mid{animation:wcmRingMid 3.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes wcmRingMid{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(1.3)}
}

/* Solid core dot — gentle breathing */
.wcm-dot{animation:wcmDot 2.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes wcmDot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.78;transform:scale(1.14)}
}

/* City label — soft fade in sync with beacon */
.wcm-label-g{animation:wcmLabel 6s ease-in-out infinite}
@keyframes wcmLabel{
  0%,100%{opacity:.95}
  50%{opacity:.55}
}

/* Static dashed arcs — slow drift */
.wcm-arc-static{animation:wcmArcDrift 14s linear infinite}
@keyframes wcmArcDrift{to{stroke-dashoffset:-36}}

/* Bright pulse traveling along each arc */
.wcm-arc-pulse{
  stroke-dasharray: 14 700;
  stroke-dashoffset: 0;
  opacity:.85;
  animation: wcmArcPulse 6.4s linear infinite;
}
@keyframes wcmArcPulse{
  0%{stroke-dashoffset: 714; opacity:0}
  10%{opacity:.9}
  90%{opacity:.9}
  100%{stroke-dashoffset: 0; opacity:0}
}

/* Status strip under the map */
.wcm-status{
  margin-top:18px;display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;
  font-family:"Geist Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase
}
.wcm-status b{font-weight:700;color:#fff}
.wcm-status-tx{color:rgba(255,255,255,.75)}
.wcm-status-dot{width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.25);
  animation:wcmStatusDot 1.8s ease-in-out infinite}
@keyframes wcmStatusDot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.85)}
}

/* Responsive — narrower on tablet/mobile */
@media (max-width:900px){
  .wcm-wrap{min-height:380px}
  .wcm-svg{max-height:420px}
}
@media (max-width:540px){
  .wcm-wrap{min-height:320px}
  .wcm-svg{max-height:340px}
  .wcm-status{font-size:10px;padding:6px 12px}
}

/* ═════════════════════════════════════════════════════════════════════════
   SLIDE 2 — PROJECT SHIELD VISUAL (replaces image-slot)
   A "the project is protected" visualization built from concentric rings,
   slowly orbiting guardian dots, and a pulsing lime "project core" at
   center. Same visual language as slide 1's network — slow motion only.
   ═════════════════════════════════════════════════════════════════════════ */
.he-shield-viz{position:absolute;inset:0;width:100%;height:100%;
  border-radius:22px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,#0e1880,#06104a 55%,#03082f 100%),
    linear-gradient(180deg,#0e1880,#04082f);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.6),
             0 0 0 1px rgba(255,255,255,.04) inset,
             0 0 80px rgba(255,255,255,.06) inset}

/* dot-mesh background — matches slide 1's network visual */
.hsv-mesh{position:absolute;inset:0;
  background-image:radial-gradient(circle at 1.4px 1.4px,rgba(255,255,255,.16) 1.3px,transparent 1.6px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 32%,transparent 85%);
          mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 32%,transparent 85%)}
.hsv-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38% 38% at 50% 50%,rgba(195,255,61,.22),transparent 70%);
  mix-blend-mode:screen}

/* concentric rings — centered square SVG */
.hsv-rings{position:absolute;top:50%;left:50%;
  width:80%;aspect-ratio:1;transform:translate(-50%,-50%);
  z-index:1;pointer-events:none}
.hsv-rings .ring{fill:none;vector-effect:non-scaling-stroke}
.hsv-rings .r1{stroke:rgba(255,255,255,.14);stroke-width:1}
.hsv-rings .r2{stroke:rgba(255,255,255,.34);stroke-width:1;stroke-dasharray:4 8}
.hsv-rings .r3{stroke:rgba(255,255,255,.18);stroke-width:1}
.hsv-rings .r4{stroke:rgba(195,255,61,.45);stroke-width:1;stroke-dasharray:2 6}
.hsv-spin-slow{transform-box:view-box;transform-origin:200px 200px;
  animation:hsv-rot 42s linear infinite}
.hsv-spin-rev{transform-box:view-box;transform-origin:200px 200px;
  animation:hsv-rot 30s linear infinite reverse}
@keyframes hsv-rot{to{transform:rotate(360deg)}}

/* corner brackets — "secured zone" */
.hsv-corners{position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;overflow:visible}
.hsv-corners path{fill:none;stroke:rgba(255,255,255,.38);stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* orbiting guardian dots — each .hsv-orbit is a centered square that rotates */
.hsv-orbit{position:absolute;top:50%;left:50%;pointer-events:none;
  transform-origin:center;z-index:2}
.hsv-orbit-1{width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;
  animation:hsv-rot 22s linear infinite}
.hsv-orbit-2{width:50%;aspect-ratio:1;margin:-25% 0 0 -25%;
  animation:hsv-rot 34s linear infinite reverse;animation-delay:-9s}
.hsv-orbit-3{width:66%;aspect-ratio:1;margin:-33% 0 0 -33%;
  animation:hsv-rot 46s linear infinite;animation-delay:-18s}
.hsv-orbit-4{width:84%;aspect-ratio:1;margin:-42% 0 0 -42%;
  animation:hsv-rot 58s linear infinite reverse;animation-delay:-30s}

.hsv-guard{position:absolute;top:-5px;left:50%;
  width:10px;height:10px;border-radius:50%;
  background:#fff;transform:translateX(-50%);
  box-shadow:0 0 0 4px rgba(255,255,255,.14),0 0 22px rgba(255,255,255,.45)}
.hsv-orbit-4 .hsv-guard{width:8px;height:8px}
.hsv-link{position:absolute;top:0;left:50%;width:1px;height:50%;
  background:linear-gradient(180deg,rgba(195,255,61,.45) 0%,rgba(195,255,61,.12) 55%,transparent 100%);
  transform:translateX(-50%)}

/* top "Project shielded" label */
.hsv-label{position:absolute;top:30px;left:50%;transform:translateX(-50%);
  z-index:4;display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 11px;border-radius:99px;
  background:rgba(195,255,61,.12);
  border:1px solid rgba(195,255,61,.35);
  color:#c3ff3d;
  font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}
.hsv-label svg{width:13px;height:13px;color:#c3ff3d}

/* center "project" core — lime pulsing dot */
.hsv-core{position:absolute;top:50%;left:50%;
  width:22px;height:22px;border-radius:50%;
  transform:translate(-50%,-50%);z-index:5}
.hsv-core-dot{position:absolute;inset:0;border-radius:50%;
  background:#c3ff3d;
  box-shadow:0 0 0 6px rgba(195,255,61,.18),
             0 0 0 12px rgba(195,255,61,.08),
             0 0 48px rgba(195,255,61,.7)}
.hsv-core-ring{position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(195,255,61,.55);
  animation:hsv-corePulse 3.6s cubic-bezier(.3,.6,.4,1) infinite}
.hsv-core-ring:nth-child(3){animation-delay:1.8s}
@keyframes hsv-corePulse{0%{transform:scale(.4);opacity:.85}100%{transform:scale(9);opacity:0}}

/* bottom status line */
.hsv-sub{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  z-index:4;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);
  white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════════
   SLIDE 2 — BRAND-BLUE BACKGROUND TREATMENT
   When the wrapper is on slide 2, swap accent colors to white so content
   still pops against the saturated brand blue.
   ═══════════════════════════════════════════════════════════════════════ */
.dk-hero-wrap[data-slide="2"]::before{opacity:0;transition:opacity .55s ease}
.dk-hero-wrap[data-slide="2"]::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 75% -10%,rgba(255,255,255,.22),transparent 65%),
    radial-gradient(900px 600px at 10% 110%,rgba(0,0,0,.35),transparent 60%)}
.dk-hero-wrap[data-slide="2"] .grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}

/* Nav blends with brand blue */
.dk-hero-wrap[data-slide="2"] .nav{background:rgba(0,16,180,.55);border-bottom-color:rgba(255,255,255,.12)}

/* Headline serif word: keep white text but allow the lime marker underline */
.dk-hero-wrap[data-slide="2"] .hero-experts .he-content h1 .serif{
  color:#001df3;text-shadow:0 0 32px rgba(0,29,243,.45)}
/* (no marker override here — falls through to the default lime SVG marker) */

/* Lede + eyebrow on blue */
.dk-hero-wrap[data-slide="2"] .hero-experts .lede{color:rgba(255,255,255,.85)}
.dk-hero-wrap[data-slide="2"] .hero-experts .eyebrow,
.dk-hero-wrap[data-slide="2"] .hero-experts .hero-eyebrow{color:rgba(255,255,255,.78)}
.dk-hero-wrap[data-slide="2"] .hero-experts .eyebrow .dot,
.dk-hero-wrap[data-slide="2"] .hero-experts .hero-eyebrow .dot{
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}

/* Primary CTA — BLACK on the blue slide */
.dk-hero-wrap[data-slide="2"] .hero-experts .btn-primary{
  background:#0a0a0a;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 14px 40px -10px rgba(0,0,0,.55)}
.dk-hero-wrap[data-slide="2"] .hero-experts .btn-primary:hover{background:#1a1a1a;filter:none}
.dk-hero-wrap[data-slide="2"] .hero-experts .btn-ghost{
  color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.dk-hero-wrap[data-slide="2"] .hero-experts .btn-ghost:hover{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}

/* Expert pill — adjust for blue bg */
.dk-hero-wrap[data-slide="2"] .he-pill{
  background:rgba(8,10,60,.78);border-color:rgba(255,255,255,.14)}
.dk-hero-wrap[data-slide="2"] .he-pi span{color:rgba(255,255,255,.75)}
.dk-hero-wrap[data-slide="2"] .he-online{
  background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32);color:#fff}
.dk-hero-wrap[data-slide="2"] .he-online .live{
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}

/* TenderSecure shield — white accents instead of brand-blue accents */
.dk-hero-wrap[data-slide="2"] .he-shield{
  background:linear-gradient(180deg,#0c1456,#050a35);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55),
             0 0 0 1px rgba(255,255,255,.06),
             0 20px 50px -16px rgba(0,0,0,.35)}
.dk-hero-wrap[data-slide="2"] .he-shield-h{border-bottom-color:rgba(255,255,255,.1)}
.dk-hero-wrap[data-slide="2"] .he-shield-ic{
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.35);color:#fff}
.dk-hero-wrap[data-slide="2"] .he-shield-tx span{color:#fff}
.dk-hero-wrap[data-slide="2"] .he-shield-row b{color:#fff}
.dk-hero-wrap[data-slide="2"] .he-shield-row+.he-shield-row{border-top-color:rgba(255,255,255,.08)}

/* Chat bubble accent (the quote mark) on blue */
.dk-hero-wrap[data-slide="2"] .he-quote .he-q-mark{color:#001df3}

/* Portrait frame shadow on blue */
.dk-hero-wrap[data-slide="2"] .he-frame image-slot{
  box-shadow:0 60px 120px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
/* Glow behind portrait — switch to white tint */
.dk-hero-wrap[data-slide="2"] .he-glow{
  background:radial-gradient(50% 60% at 75% 30%,rgba(255,255,255,.18),transparent 70%),
             radial-gradient(50% 55% at 20% 90%,rgba(255,255,255,.08),transparent 70%)}

/* Slider controls on blue bg */
.dk-hero-wrap[data-slide="2"] .hs-arr{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.dk-hero-wrap[data-slide="2"] .hs-arr:hover{
  background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.dk-hero-wrap[data-slide="2"] .hs-dot{background:rgba(255,255,255,.18)}
.dk-hero-wrap[data-slide="2"] .hs-dot.on{background:rgba(255,255,255,.28)}
.dk-hero-wrap[data-slide="2"] .hs-dot .hs-dot-fill{background:#fff}
.dk-hero-wrap[data-slide="2"] .hs-count{color:rgba(255,255,255,.75)}
.dk-hero-wrap[data-slide="2"] .hs-count b{color:#fff}

/* ═════════════════════════════════════════════════════════════════════
   SLIDE 3 (4. slider) — AI Project Automation, vibrant orange theme.
   "Hemen Başla" (white btn / orange text), şeffaf ikinci buton, beyaz nav.
   ═════════════════════════════════════════════════════════════════════ */
.dk-hero-wrap[data-slide="3"]{background:#ee5a24;transition:background-color .65s ease}
.dk-hero-wrap[data-slide="3"]::before{
  background:
    radial-gradient(900px 600px at 85% 0%,rgba(255,200,140,.32),transparent 60%),
    radial-gradient(700px 500px at 0% 100%,rgba(60,15,5,.45),transparent 60%);
  opacity:1}
.dk-hero-wrap[data-slide="3"] .grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:64px 64px;opacity:1}

/* Hero text on orange */
.dk-hero-wrap[data-slide="3"] .hero-automate h1,
.dk-hero-wrap[data-slide="3"] .hero-automate h1 .serif{
  color:#fff;text-shadow:0 4px 24px rgba(80,20,5,.28)}
.dk-hero-wrap[data-slide="3"] .hero-automate p.lede{color:#000}
.dk-hero-wrap[data-slide="3"] .hero-automate .hero-eyebrow{color:rgba(58,18,5,.7)}
.dk-hero-wrap[data-slide="3"] .hero-automate .hero-eyebrow .dot{
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.28)}

/* Buttons: primary white-on-orange, ghost transparent */
.dk-hero-wrap[data-slide="3"] .hero-automate .ha-btn-primary{
  background:#fff;color:#ee5a24;font-weight:600;
  box-shadow:0 14px 36px -10px rgba(60,15,5,.45),0 0 0 1px rgba(255,255,255,.6) inset}
.dk-hero-wrap[data-slide="3"] .hero-automate .ha-btn-primary:hover{
  background:#fff8f4;transform:translateY(-1px)}
.dk-hero-wrap[data-slide="3"] .hero-automate .ha-btn-ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.dk-hero-wrap[data-slide="3"] .hero-automate .ha-btn-ghost:hover{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}

/* Slider controls */
.dk-hero-wrap[data-slide="3"] .hs-arr{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff}
.dk-hero-wrap[data-slide="3"] .hs-arr:hover{
  background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.55)}
.dk-hero-wrap[data-slide="3"] .hs-dot{background:rgba(255,255,255,.22)}
.dk-hero-wrap[data-slide="3"] .hs-dot.on{background:rgba(255,255,255,.32)}
.dk-hero-wrap[data-slide="3"] .hs-dot .hs-dot-fill{background:#fff}
.dk-hero-wrap[data-slide="3"] .hs-count{color:rgba(255,255,255,.8)}
.dk-hero-wrap[data-slide="3"] .hs-count b{color:#fff}
.dk-hero-wrap[data-slide="3"] .nav{background:rgba(180,55,18,.55);border-bottom-color:rgba(255,255,255,.18)}

/* ═════════════════════════════════════════════════════════════════════
   AI AGENT visual + animated timeline (slide 3 right column)
   ═════════════════════════════════════════════════════════════════════ */
.ha-viz{position:relative;width:100%;min-height:560px;
  display:flex;align-items:center;justify-content:center}

/* Background timeline — puslu, foreground'un altında */
.ha-timeline{position:absolute;inset:30px 0 30px 0;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:8px;pointer-events:none;z-index:1;
  filter:blur(.3px);opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%)}
.ha-tl-step{display:flex;align-items:center;gap:14px;
  padding:11px 16px;border-radius:12px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:haTlSlide 9s ease-in-out infinite;
  animation-delay:calc(var(--i) * -2.25s)}
@keyframes haTlSlide{
  0%,100%{transform:translateX(0)}
  50%    {transform:translateX(8px)}
}
.ha-tl-num{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.1em;
  font-weight:600;color:#fff;padding:3px 7px;border-radius:5px;
  background:rgba(0,0,0,.18);flex-shrink:0}
.ha-tl-name{font-size:13px;color:#fff;font-weight:500;flex:1;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-tl-bar{flex:0 0 90px;height:5px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.ha-tl-bar i{display:block;height:100%;width:var(--w,40%);background:#fff;border-radius:99px;
  animation:haBarPulse 2.4s ease-in-out infinite}
@keyframes haBarPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* Foreground AI agent card */
.ha-agent{position:relative;z-index:2;width:100%;max-width:420px;
  background:rgba(255,255,255,.96);
  color:#2b1208;
  border-radius:20px;
  padding:22px 22px 20px;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 50px 100px -30px rgba(60,15,5,.55),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 24px 50px -16px rgba(60,15,5,.35);
  animation:haFloat 6s ease-in-out infinite}
@keyframes haFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.ha-agent-head{display:flex;align-items:center;gap:12px;
  padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid rgba(60,15,5,.08)}
.ha-agent-ico{width:38px;height:38px;border-radius:10px;
  background:linear-gradient(140deg,#ee5a24,#ff7a3a);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 10px 22px -8px rgba(238,90,36,.55)}
.ha-agent-ico svg{width:22px;height:22px;
  animation:haSparkle 2.4s ease-in-out infinite}
@keyframes haSparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(15deg)}}
.ha-agent-tx{display:flex;flex-direction:column;gap:1px;line-height:1.15;min-width:0}
.ha-agent-tx b{font-size:14px;font-weight:600;color:#2b1208;letter-spacing:-.005em}
.ha-agent-tx span{font-size:10.5px;color:rgba(60,15,5,.6);
  font-family:"Geist Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
.ha-agent-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;color:#ee5a24;font-family:"Geist Mono",monospace;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;white-space:nowrap}
.ha-agent-dot{width:7px;height:7px;border-radius:50%;background:#ee5a24;
  box-shadow:0 0 0 3px rgba(238,90,36,.22);animation:haPulse 1.4s ease-in-out infinite}
@keyframes haPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}

.ha-progress{margin-bottom:14px}
.ha-progress-row{display:flex;justify-content:space-between;align-items:center;
  font-size:11.5px;font-family:"Geist Mono",monospace;
  text-transform:uppercase;letter-spacing:.06em;
  color:rgba(60,15,5,.6);margin-bottom:6px}
.ha-progress-row .ha-progress-v{color:#ee5a24;font-weight:600;font-variant-numeric:tabular-nums}
.ha-progress-bar{height:6px;border-radius:99px;background:rgba(238,90,36,.12);overflow:hidden}
.ha-progress-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#ee5a24,#ff8a4a);
  animation:haFill 2.6s cubic-bezier(.4,.6,.2,1) infinite}
@keyframes haFill{
  0%   {width:0;opacity:1}
  85%  {width:100%;opacity:1}
  100% {width:100%;opacity:.3}
}

.ha-stats{display:flex;align-items:stretch;gap:14px;
  padding:12px 4px;margin-bottom:14px;
  border-top:1px solid rgba(60,15,5,.06);
  border-bottom:1px solid rgba(60,15,5,.06)}
.ha-stat{flex:1;display:flex;flex-direction:column;gap:2px}
.ha-stat-divider{flex:0 0 1px;background:rgba(60,15,5,.08)}
.ha-stat-v{font-size:18px;font-weight:600;letter-spacing:-.01em;color:#2b1208;
  font-variant-numeric:tabular-nums}
.ha-stat-l{font-size:10px;color:rgba(60,15,5,.55);
  font-family:"Geist Mono",monospace;text-transform:uppercase;letter-spacing:.06em}

.ha-tasks{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px}
.ha-task{display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:9px;
  background:rgba(238,90,36,.05);
  border:1px solid rgba(238,90,36,.12);
  font-size:12.5px;
  opacity:0;transform:translateY(8px);filter:blur(3px);
  animation:haTaskIn .65s cubic-bezier(.2,.6,.25,1) var(--d,0s) forwards}
@keyframes haTaskIn{
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.ha-task-chk{width:16px;height:16px;display:grid;place-items:center;flex-shrink:0}
.ha-task-chk svg{width:14px;height:14px}
.ha-task--done .ha-task-chk{color:#1f8a5b}
.ha-task--live .ha-task-chk{color:#ee5a24;
  animation:haPulse 1.4s ease-in-out infinite}
.ha-task--queued .ha-task-chk{color:rgba(60,15,5,.35)}
.ha-task-phase{font-family:"Geist Mono",monospace;font-size:9.5px;
  padding:3px 6px;border-radius:5px;background:rgba(60,15,5,.06);color:rgba(60,15,5,.6);
  letter-spacing:.05em;font-weight:600;flex-shrink:0}
.ha-task-name{flex:1;min-width:0;color:#2b1208;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:relative}
/* Sequential strike-through for done tasks. Draws from left to right. */
.ha-task--done .ha-task-name{text-decoration:none;color:#2b1208}
.ha-task--done .ha-task-name::after{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:1.2px;width:0;background:rgba(60,15,5,.5);
  animation:haStrike .6s cubic-bezier(.55,0,.25,1) var(--strike-d,1s) forwards}
@keyframes haStrike{
  to{width:100%}
}
/* fade text after strike completes */
.ha-task--done .ha-task-name{
  animation:haDoneFade .4s ease var(--strike-d,1s) forwards}
@keyframes haDoneFade{
  to{color:rgba(60,15,5,.45)}
}
.ha-task-date{font-family:"Geist Mono",monospace;font-size:10.5px;
  color:rgba(60,15,5,.55);flex-shrink:0;font-variant-numeric:tabular-nums}

/* Tablet & mobile */
@media (max-width:1020px){
  .ha-viz{min-height:480px;margin:0 auto;max-width:520px}
  .ha-agent{max-width:100%}
}
@media (max-width:680px){
  .ha-viz{min-height:420px}
  .ha-agent{padding:18px 16px 16px}
  .ha-stat-v{font-size:16px}
}

/* ── LIGHT HERO WRAPPER ── (deprecated — kept for fallback) ── */
.lt.hero-wrap{background:var(--paper);color:var(--ink);position:relative;isolation:isolate}
.lt.hero-wrap>.grid-bg{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(10,10,10,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,10,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1100px 600px at 50% 0%,#000 30%,transparent 80%);
          mask-image:radial-gradient(1100px 600px at 50% 0%,#000 30%,transparent 80%);
  pointer-events:none;z-index:0}
.lt.hero-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(var(--accent-rgb),.08),transparent 60%),
    radial-gradient(700px 500px at 0% 90%,rgba(var(--accent-rgb),.04),transparent 60%)}
.lt.hero-wrap>*{position:relative;z-index:1}

/* NAV on light */
.lt .nav{background:rgba(250,250,247,.72);border-bottom:1px solid var(--line-l)}
.lt .nav-links{color:var(--ink-2)}
.lt .nav-links a:hover{color:var(--ink)}
.lt .btn-ghost{color:var(--ink);border-color:var(--line-l)}
.lt .btn-ghost:hover{border-color:rgba(10,10,10,.25);background:rgba(10,10,10,.03)}

/* HERO on light */
.lt .hero h1{color:var(--ink)}
.lt .hero p.lede{color:var(--ink-2)}
.lt .hero-cta .note{color:rgba(10,10,10,.45)}
.lt .hero-meta .num{color:var(--ink)}
.lt .hero-meta .lab{color:rgba(10,10,10,.55)}
.lt .eyebrow{color:rgba(10,10,10,.5)}
.lt .hero-mock{box-shadow:0 60px 120px -30px rgba(10,10,10,.2),0 0 0 1px rgba(10,10,10,.04)}

/* ── LIGHT LOGOS ── */
.logos{background:var(--paper);color:var(--ink)}
.logos .lab{color:rgba(10,10,10,.5)}
.logos-row{opacity:.65}
.logos-row .lg{color:var(--ink)}

/* ── DARK WRAPPER for inverted sections ── */
.dk{background:var(--bg);color:#fff;position:relative;isolation:isolate}
.dk>.grid-bg{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1100px 600px at 50% 0%,#000 30%,transparent 80%);
          mask-image:radial-gradient(1100px 600px at 50% 0%,#000 30%,transparent 80%);
  pointer-events:none;z-index:0}
.dk::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 800px at 80% -5%,rgba(var(--accent-rgb),.10),transparent 60%),
    radial-gradient(800px 600px at 0% 95%,rgba(255,255,255,.03),transparent 60%)}
.dk>*{position:relative;z-index:1}
.dk .sec-head h2{color:#fff}
.dk .sec-head .right{color:var(--mute-d)}
.dk .eyebrow.l{color:var(--mute-d)}
.dk .sec-head h2 .serif{color:var(--accent);text-shadow:0 0 30px rgba(var(--accent-rgb),.45)}

/* ── BENTO inside .dk ── */
.dk .cell{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);color:#fff}
.dk .cell h3{color:#fff}
.dk .cell p{color:var(--mute-d)}
.dk .cell .tag{color:var(--mute-d);background:rgba(255,255,255,.05)}
.dk .cell.cd{background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.02));
  border-color:rgba(var(--accent-rgb),.28)}
.dk .cell.cd .tag{color:var(--accent);background:rgba(var(--accent-rgb),.14)}
.dk .doc{background:#1a1a1a;border-color:rgba(255,255,255,.08);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.dk .doc i{background:rgba(255,255,255,.1)}
.dk .doc i.acc{background:var(--accent)}
.dk .doc-tag{background:#1a1a1a;border-color:rgba(255,255,255,.08);color:var(--mute-d);
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.dk .pipe-col{background:rgba(255,255,255,.03)}
.dk .pipe-col .ph{color:var(--mute-d)}
.dk .pipe-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:#fff}
.dk .pipe-card.acc{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.dk .viz-spark svg path[stroke="#0a0a0a"]{stroke:#fff}

/* ── CASES inside .dk ── */
.dk .case{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#fff}
.dk .case h3{color:#fff}
.dk .case p{color:var(--mute-d)}
.dk .case ul{color:var(--mute-d)}
.dk .case ul li::before{background:var(--accent)}

/* ── QUOTES inside .dk ── */
.dk .q{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#fff}
.dk .q blockquote{color:#fff}
.dk .q blockquote::before{color:var(--mute-d)}
.dk .q .av{background:rgba(255,255,255,.1);color:#fff}
.dk .q .who b{color:#fff}
.dk .q .who span{color:var(--mute-d)}
.dk .q.big{background:linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04));
  border-color:rgba(var(--accent-rgb),.32)}
.dk .q.big blockquote::before{color:var(--accent)}
.dk .q.big .av{background:var(--accent);color:var(--accent-ink)}

/* ── PRICING inside .dk ── */
.dk .tier{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#fff;box-shadow:none}
.dk .tier h3{color:#fff}
.dk .tier .blurb{color:var(--mute-d)}
.dk .tier .price b{color:#fff}
.dk .tier .price span,.dk .tier .per{color:var(--mute-d)}
.dk .tier ul{border-top-color:rgba(255,255,255,.08)}
.dk .tier ul li{color:var(--mute-d)}
.dk .tier ul li::before{color:var(--accent)}
.dk .tier.featured{background:linear-gradient(180deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.04));
  border-color:rgba(var(--accent-rgb),.4);
  box-shadow:0 30px 80px -20px rgba(var(--accent-rgb),.4)}
.dk .tier.featured .ribbon{color:var(--accent)}
.dk .btn-line{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.12)}
.dk .btn-line:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.dk .btn-dark{background:#fff;color:#0a0a0a}
.dk .btn-dark:hover{background:#e8e8e8}

/* ── FAQ inside .dk ── */
.dk .faq-side h2{color:#fff}
.dk .faq-side p{color:var(--mute-d)}
.dk .faq-list{border-top-color:rgba(255,255,255,.1)}
.dk .faq-item{border-bottom-color:rgba(255,255,255,.1)}
.dk .faq-item .qrow h4{color:#fff}
.dk .faq-item .qrow .plus{border-color:rgba(255,255,255,.18);color:#fff}
.dk .faq-item.open .qrow .plus{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.dk .faq-item .ans{color:var(--mute-d)}

/* ── LIGHT STEPS ── */
.lt-steps{background:var(--paper)}
.lt-steps .step{background:#fff;color:var(--ink);border:1px solid var(--line-l);
  box-shadow:0 1px 0 rgba(10,10,10,.02)}
.lt-steps .step .n{color:var(--ink-2);font-weight:500}
.lt-steps .step h3{color:var(--ink)}
.lt-steps .step p{color:var(--ink-2)}
.lt-steps .step .stage{border-color:var(--line-l);background:var(--paper)}
.lt-steps .s1-row{color:var(--ink-2)}
.lt-steps .s1-row .v{color:var(--ink)}
.lt-steps .s1-row .chk.off{background:rgba(10,10,10,.06)}
.lt-steps .s1-row .chk.live{background:transparent;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
/* Step 2 bids on light */
.lt-steps .bid-row{background:#fff;border:1px solid var(--line-l);box-shadow:0 1px 0 rgba(10,10,10,.02);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),background .25s ease,color .25s ease,box-shadow .3s ease,border-color .25s ease;
  cursor:pointer}
.lt-steps .bid-row .bi b{color:var(--ink);transition:color .25s ease}
.lt-steps .bid-row .bi span{color:var(--ink-2);transition:color .25s ease}
.lt-steps .bid-row .bm b{color:var(--ink);transition:color .25s ease}
.lt-steps .bid-row .bm span{color:var(--ink-2);transition:color .25s ease}
.lt-steps .bid-row.top{background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.02));
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 12px 30px -10px rgba(var(--accent-rgb),.35)}
/* Hover: lift + flip to dark */
.lt-steps .bid-row:hover{
  transform:translateY(-3px) translateX(2px);
  background:#0a0a0a;
  border-color:#0a0a0a;
  box-shadow:0 22px 48px -16px rgba(0,0,0,.4)}
.lt-steps .bid-row:hover .bi b{color:#fff}
.lt-steps .bid-row:hover .bi span{color:rgba(255,255,255,.55)}
.lt-steps .bid-row:hover .bm b{color:var(--accent)}
.lt-steps .bid-row:hover .bm span{color:rgba(255,255,255,.55)}
/* Step 3 TenderSecure on light */
.lt-steps .s3-head{border-bottom-color:var(--line-l)}
.lt-steps .s3-title b{color:var(--ink)}
.lt-steps .s3-row{color:var(--ink-2);border-bottom-color:var(--line-l)}
.lt-steps .s3-row:last-child{color:var(--ink)}
.lt-steps .s3-row b{color:var(--ink)}
.lt-steps .s3-row.paid{color:var(--ink);border-top-color:var(--line-l)}
.lt-steps .s3-row.paid b{color:var(--ink)}
.lt-steps .s3-row.paid.is-pending{color:rgba(10,10,10,.45)}
.lt-steps .s3-row.paid.is-pending b{color:rgba(10,10,10,.55)}
.lt-steps .s3-row.paid.is-paid{color:var(--accent)}
.lt-steps .s3-row.paid.is-paid b{color:var(--accent)}
.lt-steps .step h3 .serif{color:var(--accent);text-shadow:none}

/* ── LIGHT CTA ── */
.lt-cta{background:var(--paper);color:var(--ink)}
.lt-cta::before{background:radial-gradient(ellipse at center top,rgba(var(--accent-rgb),.18),transparent 60%);filter:blur(50px)}
.lt-cta::after{background-image:
    linear-gradient(rgba(10,10,10,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,10,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(800px 400px at 50% 30%,#000 30%,transparent 80%);
          mask-image:radial-gradient(800px 400px at 50% 30%,#000 30%,transparent 80%)}
.lt-cta .cta-inner h2{color:var(--ink)}
.lt-cta .cta-inner h2 .serif{color:var(--accent);text-shadow:0 0 30px rgba(var(--accent-rgb),.4)}
.lt-cta .cta-inner p{color:var(--ink-2)}
.lt-cta .eyebrow{color:rgba(10,10,10,.5)}
.lt-cta .btn-ghost{color:var(--ink);border-color:var(--line-l)}
.lt-cta .btn-ghost:hover{border-color:rgba(10,10,10,.3);background:rgba(10,10,10,.03)}

/* ── LIGHT FOOTER ── */
.lt-footer{background:var(--paper);color:var(--ink);border-top:1px solid var(--line-l)}
.lt-footer .foot-grid .col h5{color:rgba(10,10,10,.5)}
.lt-footer .foot-grid .col a{color:var(--ink-2)}
.lt-footer .foot-grid .col a:hover{color:var(--accent)}
.lt-footer .foot-brand p{color:var(--ink-2)}
.lt-footer .foot-bot{border-top-color:var(--line-l);color:rgba(10,10,10,.5)}

/* ── Hand-drawn marker underlines on featured serif accent words ── */
.hero h1 .serif,
#features .sec-head h2 .serif,
#how .sec-head h2 .serif,
#cases .sec-head h2 .serif,
#pricing .sec-head h2 .serif,
#cta .cta-inner h2 .serif{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 32' preserveAspectRatio='none'><path d='M6,17 C40,8 95,25 150,15 C200,7 250,22 314,13' stroke='%23c3ff3d' stroke-width='9' fill='none' stroke-linecap='round' opacity='0.95'/><path d='M10,23 C50,16 100,28 160,20 C210,13 255,26 308,21' stroke='%23c3ff3d' stroke-width='5' fill='none' stroke-linecap='round' opacity='0.65'/><path d='M14,11 C45,5 70,14 90,9' stroke='%23c3ff3d' stroke-width='3' fill='none' stroke-linecap='round' opacity='0.5'/></svg>");
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:100% 0.42em;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  padding-bottom:0.08em;
  text-shadow:none}

/* Steps section: section description style + TenderSecure mark + secure CTA */
.lt-steps .sec-head .right{display:flex;flex-direction:column;gap:18px;align-items:flex-start;max-width:42ch}
.lt-steps .sec-head .right p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55}
.ts-mark{font-weight:600;color:var(--ink);position:relative;white-space:nowrap;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04));
  border:1px solid rgba(var(--accent-rgb),.4);
  padding:1px 9px;border-radius:6px;
  box-shadow:0 6px 18px -6px rgba(var(--accent-rgb),.4)}
.btn-secure{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;
  border-radius:10px;background:#fff;border:1px solid var(--line-l);color:var(--ink);
  font-size:13.5px;font-weight:500}
.btn-secure svg{color:var(--accent)}
.btn-secure:hover{border-color:rgba(10,10,10,.25);background:#fafaf7}

/* Pricing — wider rail so 5 columns stay roomy on desktop */
#pricing .wrap{max-width:1560px;padding:0 40px}
#pricing .price-grid{grid-template-columns:1fr 1fr 1.28fr 1fr 1fr;gap:12px;align-items:stretch}
#pricing .tier{padding:30px 26px;border-radius:18px}
#pricing .tier h3{font-size:22px}
#pricing .tier .blurb{font-size:14px;min-height:40px}
#pricing .tier .price b{font-size:42px}
#pricing .tier .per{font-size:11px;min-height:30px}
#pricing .tier .cta .btn{height:46px;font-size:14px}
#pricing .tier ul{font-size:13px;gap:10px;padding-top:18px}

/* Premium → larger, lifted, glowing */
#pricing .tier.featured{
  padding:40px 32px;
  border-radius:22px;
  margin:-18px -4px -18px -4px;
  z-index:2;
  position:relative;
  box-shadow:0 40px 90px -20px rgba(var(--accent-rgb),.55),
             0 0 0 1px rgba(var(--accent-rgb),.45) inset}
#pricing .tier.featured h3{font-size:28px;letter-spacing:-.02em}
#pricing .tier.featured .blurb{font-size:15px;min-height:44px}
#pricing .tier.featured .price b{font-size:56px;letter-spacing:-.03em}
#pricing .tier.featured .price{margin-bottom:8px}
#pricing .tier.featured .per{font-size:12px;min-height:34px}
#pricing .tier.featured .cta .btn{height:50px;font-size:15px}
#pricing .tier.featured ul{font-size:14px;gap:11px;padding-top:22px}
#pricing .tier.featured .ribbon{font-size:11px;letter-spacing:.18em;height:16px}

/* inline frame — same blue glow language as the Premium tier */
.hl-mark{
  display:inline-block;
  padding:3px 11px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04));
  border:1px solid rgba(var(--accent-rgb),.45);
  box-shadow:0 12px 30px -10px rgba(var(--accent-rgb),.5),
             0 0 0 1px rgba(var(--accent-rgb),.15) inset;
  color:#fff;
  font-weight:500;
  white-space:nowrap;
}
.hl-mark:not(.dk *){color:var(--ink)}

/* responsive */
@media (max-width:1020px){
  .bento,.kpis,.viz-pipe{grid-template-columns:1fr 1fr}
  .mock-grid{grid-template-columns:1fr}
  .mock-side{display:none}
  .steps,.cases,.quotes,.foot-grid{grid-template-columns:1fr 1fr}
  /* Hero slider responsive — stack text + visual */
  .hero-experts{padding:32px 0 16px;min-height:auto}
  .he-grid{grid-template-columns:1fr;gap:48px}
  .he-content{text-align:left}
  .he-content h1{max-width:18ch}
  .he-portrait{min-height:480px;max-width:520px;margin:0 auto;width:100%}
  .he-shield{right:-12px;width:240px}
  .he-quote{left:-12px;max-width:240px}
  .he-pill{left:-8px}
  /* Pricing → horizontal scroll on tablet & mobile */
  #pricing .wrap{padding:0}
  #pricing .sec-head{padding:0 28px}
  .price-scroll{overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:18px 28px 28px;
    margin:-18px 0 0;
    scrollbar-width:none;
    scroll-padding-left:28px}
  .price-scroll::-webkit-scrollbar{display:none;width:0;height:0}
  .price-scroll::-webkit-scrollbar-track{background:transparent}
  .price-scroll::-webkit-scrollbar-thumb{background:transparent}
  .price-grid{display:flex;flex-wrap:nowrap;grid-template-columns:unset;
    gap:12px;width:max-content;align-items:stretch}
  .price-grid .tier{width:280px;flex:0 0 280px;scroll-snap-align:start}
  #pricing .tier.featured{margin:-18px 0;width:320px;flex:0 0 320px}
  .faq{grid-template-columns:1fr;gap:32px}
  .c-1{grid-column:span 2;grid-row:span 1;min-height:380px}
  .c-7{grid-column:span 2}
  .c-8{grid-column:span 2}
  .c-9{grid-column:span 2}
  .quotes .q.big{grid-row:span 1}
  .quotes{grid-template-columns:1fr 1fr}
  .hero-meta{gap:32px}
}
@media (max-width:680px){
  .nav-links{display:none}
  .hero{padding:36px 0 56px}
  section{padding:100px 0}
  .bento,.steps,.cases,.kpis,.viz-pipe,.foot-grid,.quotes{grid-template-columns:1fr}
  /* Mobilde bento cell'leri her zaman tam genişlik + tek satır — c-1'in
     desktop span:4 ve span:2 değerlerinin clamp edilmesi bazı tarayıcılarda
     bozuk hücre genişliği üretiyordu. */
  .bento .cell{grid-column:1/-1;grid-row:auto;width:100%;min-width:0}
  /* Hero slider — mobile */
  .hero-experts{padding:20px 0 8px;min-height:auto}
  .he-grid{gap:32px}
  .he-content h1{font-size:clamp(34px,9vw,52px)}
  .he-content p.lede{font-size:15px}
  .he-content .hero-cta .btn-lg{height:46px;padding:0 20px;font-size:14px}
  .he-portrait{min-height:380px;max-width:100%;aspect-ratio:1/1.1}
  .he-shield{width:210px;right:-4px;bottom:32px;padding:13px 14px}
  .he-shield-row{font-size:11.5px;padding:5px 0}
  .he-shield-tx b{font-size:13px}
  .he-quote{max-width:200px;left:-4px;padding:11px 13px;bottom:-8px}
  .he-quote p{font-size:12px;margin:6px 0 6px}
  .he-q-meta{font-size:9.5px}
  .he-pill{left:6px;top:8px;padding:8px 12px 8px 8px;max-width:calc(100% - 12px)}
  .he-pill .he-av{width:28px;height:28px;font-size:11px}
  .he-pi b{font-size:12px}
  .he-pi span{font-size:10px}
  .he-online{display:none}
  /* Network visual — tighter glow on small screens */
  .hn-acc{width:11px;height:11px}
  .hn-mesh{background-size:14px 14px}
  /* slider controls — compact on mobile */
  .hero-ctrl{padding:0 16px 40px;gap:12px}
  .hs-arr{width:36px;height:36px}
  .hs-dot{width:30px}
  .hs-dot.on{width:44px}
  .hs-count{display:none}
  .c-1,.c-7,.c-8,.c-9{grid-column:span 1}
  /* Grid item default min-width:auto — nowrap içerikler hücreyi viewport'tan
     taşırmasın diye min-width:0 + overflow:hidden zorlanıyor. */
  .cell{min-width:0;overflow:hidden}
  /* AI · PROJECT PLANNING — mobilde row taşmasın, prompt ve rows kompakt */
  .c-1{min-height:380px}
  .viz-scope{max-width:100%;gap:8px;min-width:0}
  .scope-prompt{font-size:12px;padding:10px 12px;gap:10px;flex-wrap:wrap;min-width:0}
  .scope-row{font-size:12px;padding:9px 11px;gap:8px;min-width:0}
  .scope-row .sr-name{flex:1;min-width:0}
  .scope-row .sr-meta{display:none}
  .quotes .q.big{grid-row:span 1}
  .hero-meta{gap:20px}
  .hero-meta .num{font-size:24px}
  .match-h,.match-row{grid-template-columns:1fr 70px 90px;gap:8px;font-size:12px;padding:9px 12px}
  .match-h .pct-c,.match-row .pct{display:none}
  .foot-bot{flex-direction:column;gap:12px;align-items:flex-start}
  .sec-head{margin-bottom:36px}
  .cta-band{padding:96px 0}
  .nav-cta .btn-ghost{display:none}
  /* Pricing on mobile — even tighter cards */
  .price-grid .tier{width:260px;flex:0 0 260px;padding:24px 22px}
  #pricing .tier.featured{width:300px;flex:0 0 300px;padding:32px 26px}
  #pricing .tier.featured h3{font-size:24px}
  #pricing .tier.featured .price b{font-size:46px}
}

/* ═══════════════════════════════════════════════════════════════════════
   INSTANT SERVICES — Hire a real pro, in seconds.
   Light section that follows the RENTAL marketplace. Animated search bar
   types real briefs, category chips swirl in, verified pros materialize.
   ═══════════════════════════════════════════════════════════════════════ */
.lt-services{background:#fafaf7;color:var(--ink);padding:160px 0;position:relative;overflow:hidden}
.lt-services::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(700px 500px at 90% 0%,rgba(0,29,243,.06),transparent 60%),
    radial-gradient(600px 400px at 5% 100%,rgba(196,255,61,.08),transparent 60%)}
.lt-services .wrap{position:relative;z-index:1}

.sv-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:88px;align-items:center}

/* LEFT — copy column */
.sv-left .eyebrow.l{color:rgba(10,10,10,.55);margin-bottom:22px}
.sv-left .eyebrow .dot{background:#001df3}
.sv-h{font-size:clamp(40px,5.2vw,72px);line-height:1.02;letter-spacing:-.03em;
  font-weight:500;margin:0 0 26px;color:var(--ink);max-width:14ch}
.sv-h .serif{color:#001df3;font-weight:400;
  text-shadow:0 0 30px rgba(0,29,243,.18)}
.sv-d{font-size:17px;line-height:1.6;color:var(--ink-2);
  margin:0 0 40px;max-width:50ch}
.sv-bullets{display:flex;flex-direction:column;gap:22px}
.sv-bullet{display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start}
.sv-bullet-icn{width:32px;height:32px;border-radius:10px;
  background:linear-gradient(180deg,rgba(0,29,243,.12),rgba(0,29,243,.04));
  border:1px solid rgba(0,29,243,.28);color:#001df3;
  display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.sv-bullet-icn svg{width:16px;height:16px}
.sv-bullet-t{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.005em;margin-bottom:5px}
.sv-bullet-d{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:46ch}

/* RIGHT — animated panel */
.sv-right{position:relative}
.sv-panel{position:relative;width:100%;
  background:#fff;
  border-radius:24px;
  border:1px solid rgba(10,10,10,.06);
  padding:24px;
  box-shadow:0 60px 120px -30px rgba(0,0,0,.18),
             0 0 0 1px rgba(255,255,255,.6) inset;
  overflow:hidden;isolation:isolate}
.sv-panel::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 1.2px 1.2px,rgba(0,29,243,.06) 1px,transparent 1.4px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(70% 50% at 50% 0%,#000,transparent 80%);
          mask-image:radial-gradient(70% 50% at 50% 0%,#000,transparent 80%);
  opacity:.7}
.sv-panel>*{position:relative;z-index:1}

/* Search bar */
.sv-search{display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;
  background:#fafaf7;border:1px solid rgba(0,29,243,.24);
  box-shadow:0 0 0 4px rgba(0,29,243,.05),
             0 14px 30px -14px rgba(0,29,243,.22)}
.sv-search-icn{width:18px;height:18px;color:#001df3;flex-shrink:0}
.sv-search-icn svg{width:100%;height:100%}
.sv-search-tx{flex:1;font-size:14.5px;color:var(--ink);letter-spacing:-.005em;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:1.4}
.sv-caret{display:inline-block;width:2px;height:1em;background:#001df3;
  margin-left:1px;vertical-align:-2px;animation:svBlink .9s steps(2) infinite}
@keyframes svBlink{50%{opacity:0}}
.sv-search-tag{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:#001df3;
  padding:4px 8px;border-radius:6px;background:rgba(0,29,243,.1);
  border:1px solid rgba(0,29,243,.3);flex-shrink:0}

/* Category chips — floating */
.sv-cats{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 18px}
.sv-chip{display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px 7px 8px;border-radius:99px;
  background:#fff;border:1px solid rgba(10,10,10,.08);
  font-size:12.5px;font-weight:500;color:var(--ink);letter-spacing:-.005em;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.12);
  opacity:0;transform:translateY(8px) scale(.95);
  animation:svChipIn .65s cubic-bezier(.2,.6,.25,1) var(--d,0s) forwards,
            svChipFloat 8s ease-in-out infinite calc(var(--d,0s) + 1s)}
.sv-chip-icn{width:18px;height:18px;border-radius:6px;
  background:rgba(0,29,243,.1);color:#001df3;
  display:grid;place-items:center;flex-shrink:0}
.sv-chip-icn svg{width:13px;height:13px;display:block}
@keyframes svChipIn{
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes svChipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
/* Stagger the float so they don't all bob in unison */
.sv-chip:nth-child(odd){animation-delay:var(--d,0s),calc(var(--d,0s) + 1.4s)}

/* Verified pros — matched list */
.sv-pros{margin-top:6px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(0,29,243,.04),transparent);
  border:1px solid rgba(0,29,243,.14);border-radius:14px}
.sv-pros-head{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px}
.sv-pros-l{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  color:rgba(10,10,10,.55);font-weight:600}
.sv-pros-c{display:inline-flex;align-items:center;gap:6px;
  font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.08em;
  color:#001df3;font-weight:600;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;background:rgba(0,29,243,.08)}
.sv-pros-dot{width:6px;height:6px;border-radius:50%;background:#001df3;
  box-shadow:0 0 0 3px rgba(0,29,243,.18);animation:hbpulse 1.6s ease-in-out infinite}

.sv-pro{display:grid;grid-template-columns:36px 1fr auto auto;gap:11px;align-items:center;
  padding:9px 0;border-top:1px dashed rgba(10,10,10,.08);
  opacity:0;transform:translateY(8px);filter:blur(4px);
  transition:opacity .55s ease,transform .65s cubic-bezier(.2,.6,.25,1),filter .55s ease;
  transition-delay:var(--d,0s)}
.sv-pro:first-of-type{border-top:1px solid rgba(10,10,10,.06)}
.sv-pro.is-on{opacity:1;transform:translateY(0);filter:blur(0)}
.sv-pro-av{width:34px;height:34px;border-radius:9px;
  background:linear-gradient(140deg,#0a0a0a,#1f1f1f);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:12px;letter-spacing:.02em;
  flex-shrink:0}
.sv-pro-meta{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.sv-pro-meta b{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-pro-meta span{font-size:11px;color:var(--ink-2);font-family:"Geist Mono",monospace;
  letter-spacing:.04em;margin-top:2px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-pro-score{display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sv-pro-score svg{width:12px;height:12px;color:#001df3}
.sv-pro-tick{width:22px;height:22px;border-radius:50%;
  background:rgba(0,29,243,.1);color:#001df3;
  display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,29,243,.32) inset}
.sv-pro-tick svg{width:12px;height:12px}

@media (max-width:1020px){
  .lt-services{padding:120px 0}
  .sv-grid{grid-template-columns:1fr;gap:56px}
}
@media (max-width:680px){
  .lt-services{padding:80px 0}
  .sv-h{font-size:clamp(34px,8.5vw,52px)}
  .sv-d{font-size:15px}
  .sv-bullets{gap:18px}
  .sv-panel{padding:18px 16px}
  .sv-search{padding:12px 14px;gap:10px}
  .sv-search-tx{font-size:13px}
  .sv-pros{padding:12px 14px}
  .sv-pro{grid-template-columns:32px 1fr auto auto;gap:9px}
  .sv-pro-av{width:30px;height:30px;font-size:11px}
  .sv-pro-meta b{font-size:13px}
  .sv-pro-meta span{font-size:10px}
}

/* ═══════════════════════════════════════════════════════════════════════
   RENTAL MARKETPLACE — Rare gear · Verified hands · Zero downtime
   Black section after "For everyone who builds" with an animated rental
   card showing equipment + two-sided verification + escrow timeline.
   ═══════════════════════════════════════════════════════════════════════ */
.lt-rental{background:#000;color:#fff;padding:140px 0;position:relative;overflow:hidden}
.lt-rental::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px 600px at 78% 14%,rgba(196,255,61,.12),transparent 60%),
             radial-gradient(700px 500px at 8% 90%,rgba(196,255,61,.05),transparent 60%);
  z-index:0}
.lt-rental::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(900px 600px at 50% 30%,#000 30%,transparent 80%);
          mask-image:radial-gradient(900px 600px at 50% 30%,#000 30%,transparent 80%)}
.lt-rental .wrap{position:relative;z-index:1}

.rs-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:center}

/* LEFT — copy column */
.rs-left .eyebrow{color:rgba(255,255,255,.65);margin-bottom:22px}
.rs-h{font-size:clamp(40px,5.2vw,72px);line-height:1.02;letter-spacing:-.03em;
  font-weight:500;margin:0 0 26px;color:#fff;max-width:14ch}
.rs-h .serif{color:#c4ff3d;font-weight:400;
  text-shadow:0 0 30px rgba(196,255,61,.45)}
.rs-d{font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);
  margin:0 0 36px;max-width:48ch}
.rs-features{display:flex;flex-direction:column}
.rs-feat{display:grid;grid-template-columns:46px 1fr;gap:14px;
  padding:18px 0;border-top:1px solid rgba(255,255,255,.08);align-items:start}
.rs-feat:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.rs-feat-num{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:.16em;
  color:#c4ff3d;font-weight:600;padding-top:5px}
.rs-feat-t{font-size:16px;font-weight:600;color:#fff;letter-spacing:-.005em;
  margin-bottom:5px}
.rs-feat-d{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.55;max-width:46ch}

/* RIGHT — rental card stage */
.rs-right{position:relative}
.rc{position:relative;width:100%;min-height:520px;padding:80px 24px 28px;
  border-radius:24px;
  background:linear-gradient(180deg,#0e0e0e,#070707);
  border:1px solid rgba(196,255,61,.15);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.75),
             0 0 0 1px rgba(255,255,255,.03) inset,
             0 0 60px -10px rgba(196,255,61,.18) inset;
  overflow:hidden;isolation:isolate}
.rc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(circle at 1.2px 1.2px,rgba(255,255,255,.04) 1px,transparent 1.3px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent 80%);
          mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent 80%)}

/* flow lines from badges to equipment */
.rc-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.rc-flow-line{stroke:rgba(196,255,61,.55);stroke-width:1.2;fill:none;
  stroke-dasharray:4 6;
  filter:drop-shadow(0 0 5px rgba(196,255,61,.4));
  animation:rcFlowDash 1.8s linear infinite;
  animation-delay:var(--d,0s)}
@keyframes rcFlowDash{to{stroke-dashoffset:-20}}

/* Verified ID badges (owner & renter) */
.rc-id{position:absolute;top:18px;display:flex;align-items:center;gap:10px;
  padding:9px 12px 9px 9px;border-radius:11px;
  background:rgba(14,14,14,.85);backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(196,255,61,.32);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6),
             0 0 0 1px rgba(255,255,255,.02) inset;
  z-index:3;max-width:46%;
  opacity:0;transform:translateY(-8px);
  animation:rcIdIn .7s cubic-bezier(.2,.6,.25,1) .3s forwards}
.rc-owner{left:18px}
.rc-renter{right:18px;animation-delay:.55s}
@keyframes rcIdIn{to{opacity:1;transform:translateY(0)}}
.rc-id-av{width:32px;height:32px;border-radius:8px;
  background:linear-gradient(140deg,#2a2a2a,#141414);
  border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center;color:#fff;
  font-weight:600;font-size:11.5px;letter-spacing:.02em;flex-shrink:0}
.rc-id-meta{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.rc-id-meta b{font-size:12.5px;font-weight:600;color:#fff;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-id-meta span{font-size:9.5px;color:rgba(255,255,255,.6);
  font-family:"Geist Mono",monospace;letter-spacing:.04em;margin-top:2px;
  text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-id-check{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(196,255,61,.16);color:#c4ff3d;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(196,255,61,.45) inset,
             0 0 10px rgba(196,255,61,.35)}
.rc-id-check svg{width:11px;height:11px;display:block}

/* CENTER equipment listing */
.rc-eq{position:relative;z-index:2;margin:32px auto 22px;max-width:340px;
  background:linear-gradient(180deg,#1a1a1a,#0c0c0c);
  border:1px solid rgba(196,255,61,.28);
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 60px -16px rgba(0,0,0,.55),
             0 0 50px -10px rgba(196,255,61,.2);
  opacity:0;transform:translateY(12px) scale(.97);
  animation:rcEqIn .9s cubic-bezier(.2,.6,.25,1) .85s forwards}
@keyframes rcEqIn{to{opacity:1;transform:none}}
.rc-eq-img{position:relative;aspect-ratio:16/8;
  background:
    radial-gradient(60% 80% at 50% 50%,rgba(196,255,61,.1),transparent 70%),
    linear-gradient(180deg,#1c1c1c,#101010);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:grid;place-items:center;overflow:hidden}
.rc-eq-svg{width:90%;height:90%;display:block}
.rc-arm{transform-origin:96px 78px;
  animation:excDig 4s cubic-bezier(.45,.05,.4,1) infinite;
  filter:drop-shadow(0 0 8px rgba(196,255,61,.35))}
@keyframes excDig{
  0%, 100% { transform: rotate(0deg) }
  30%      { transform: rotate(-14deg) }
  50%      { transform: rotate(-18deg) }
  72%      { transform: rotate(6deg) }
}
.rc-eq-avail{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;
  gap:6px;padding:5px 10px;border-radius:99px;
  background:rgba(196,255,61,.16);border:1px solid rgba(196,255,61,.4);
  color:#c4ff3d;font-family:"Geist Mono",monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;z-index:2}
.rc-eq-dot{width:6px;height:6px;border-radius:50%;background:#c4ff3d;
  box-shadow:0 0 0 3px rgba(196,255,61,.25);
  animation:hbpulse 1.6s ease-in-out infinite}
.rc-eq-body{padding:16px 18px 18px}
.rc-eq-head h3{font-size:19px;font-weight:600;letter-spacing:-.01em;
  margin:0 0 4px;color:#fff;line-height:1.15}
.rc-eq-head p{font-size:12px;color:rgba(255,255,255,.6);margin:0;
  font-family:"Geist Mono",monospace;letter-spacing:.04em;text-transform:uppercase}
.rc-eq-row{display:flex;justify-content:space-between;align-items:center;
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.rc-eq-price{font-size:24px;font-weight:500;letter-spacing:-.025em;color:#fff;
  font-variant-numeric:tabular-nums}
.rc-eq-price span{font-size:12px;color:rgba(255,255,255,.55);font-weight:400;
  margin-left:4px;letter-spacing:.04em}
.rc-eq-loc{display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:rgba(255,255,255,.7);
  font-family:"Geist Mono",monospace;letter-spacing:.02em}
.rc-eq-loc svg{width:11px;height:13px;color:#c4ff3d}

/* BOTTOM escrow + timeline */
.rc-timeline{position:relative;z-index:2;
  padding:14px 18px;border-radius:13px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translateY(8px);
  animation:rcEqIn .7s cubic-bezier(.2,.6,.25,1) 1.2s forwards}
.rc-tl-head{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;gap:10px;flex-wrap:wrap}
.rc-tl-lab{font-size:12.5px;color:#fff;font-weight:500;letter-spacing:-.005em}
.rc-tl-tag{display:inline-flex;align-items:center;gap:6px;
  font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.08em;
  color:#c4ff3d;text-transform:uppercase;font-weight:600;
  padding:3px 8px;border-radius:6px;
  background:rgba(196,255,61,.12);border:1px solid rgba(196,255,61,.32)}
.rc-tl-tag svg{width:11px;height:11px;flex-shrink:0}
.rc-tl-track{height:5px;border-radius:99px;background:rgba(255,255,255,.06);
  overflow:hidden;position:relative;margin-bottom:8px}
.rc-tl-track i{position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,rgba(196,255,61,.6),#c4ff3d);
  border-radius:99px;box-shadow:0 0 10px rgba(196,255,61,.45);
  animation:rcTlFill 2.2s cubic-bezier(.3,.6,.2,1) 1.4s forwards}
@keyframes rcTlFill{to{width:38%}}
.rc-tl-foot{font-family:"Geist Mono",monospace;font-size:10.5px;
  color:rgba(255,255,255,.55);letter-spacing:.04em;text-transform:uppercase}

@media (max-width:1020px){
  .lt-rental{padding:100px 0}
  .rs-grid{grid-template-columns:1fr;gap:48px}
  .rc{min-height:auto;padding:64px 22px 24px}
  .rc-id{max-width:44%}
}
@media (max-width:680px){
  .lt-rental{padding:72px 0}
  .rs-h{font-size:clamp(34px,8.5vw,52px)}
  .rs-d{font-size:15px}
  .rs-feat{grid-template-columns:36px 1fr;gap:10px}
  .rc{padding:60px 14px 20px;border-radius:20px}
  .rc-id{padding:7px 9px 7px 7px;top:14px;max-width:48%}
  .rc-owner{left:12px}
  .rc-renter{right:12px}
  .rc-id-av{width:28px;height:28px;font-size:10.5px}
  .rc-id-meta b{font-size:11.5px}
  .rc-id-meta span{font-size:8.5px}
  .rc-eq{margin-top:28px}
  .rc-eq-head h3{font-size:17px}
  .rc-eq-price{font-size:20px}
}

/* ═══════════════════════════════════════════════════════════════════════
   APPLE-STYLE SCROLL REVEAL — elementler viewport'a girdikçe yumuşak
   fade + rise + hafif scale ile beliriveriyor. .sr-in class'ı eklenince
   final state'e doğru spring-like ease ile geçiş yapıyor.
   ═══════════════════════════════════════════════════════════════════════ */
[data-sr]{
  opacity:0;
  transform:translateY(80px) scale(.96);
  filter:blur(8px);
  transition:opacity 1.3s cubic-bezier(.2,.65,.2,1),
             transform 1.4s cubic-bezier(.2,.65,.2,1),
             filter 1s cubic-bezier(.2,.65,.2,1);
  will-change:opacity,transform,filter}
[data-sr].sr-in{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0)}

/* Slower, deeper rise for hero-style large blocks */
[data-sr="lg"]{transform:translateY(120px) scale(.93);
  transition-duration:1.5s,1.7s,1.2s}

/* Side-slide variant */
[data-sr="left"]{transform:translateX(-80px) scale(.97)}
[data-sr="left"].sr-in{transform:translateX(0) scale(1)}
[data-sr="right"]{transform:translateX(80px) scale(.97)}
[data-sr="right"].sr-in{transform:translateX(0) scale(1)}

/* Stagger children (when a parent has [data-sr-stagger]) */
[data-sr-stagger]>*{
  opacity:0;
  transform:translateY(56px);
  filter:blur(6px);
  transition:opacity 1.1s cubic-bezier(.2,.65,.2,1),
             transform 1.2s cubic-bezier(.2,.65,.2,1),
             filter .9s cubic-bezier(.2,.65,.2,1)}
[data-sr-stagger].sr-in>*{
  opacity:1;transform:translateY(0);filter:blur(0)}
[data-sr-stagger].sr-in>*:nth-child(1){transition-delay:.08s}
[data-sr-stagger].sr-in>*:nth-child(2){transition-delay:.2s}
[data-sr-stagger].sr-in>*:nth-child(3){transition-delay:.32s}
[data-sr-stagger].sr-in>*:nth-child(4){transition-delay:.44s}
[data-sr-stagger].sr-in>*:nth-child(5){transition-delay:.56s}
[data-sr-stagger].sr-in>*:nth-child(6){transition-delay:.68s}
[data-sr-stagger].sr-in>*:nth-child(7){transition-delay:.8s}
[data-sr-stagger].sr-in>*:nth-child(8){transition-delay:.92s}
[data-sr-stagger].sr-in>*:nth-child(9){transition-delay:1.04s}

/* Parallax — translateY based on a CSS var the script writes (-1..1) */
[data-sr-parallax]{
  transform:translateY(calc(var(--sr-p,0) * 60px));
  transition:transform .6s cubic-bezier(.2,.65,.2,1);
  will-change:transform}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  [data-sr],[data-sr-stagger]>*{
    transition:none!important;
    opacity:1!important;transform:none!important;filter:none!important}
  [data-sr-parallax]{transform:none!important}
}

/* ────────── FOOTER STORE BADGES (resim referansı) ──────────
   Tam siyah dolgu, hafif beyaz ışıltılı çerçeve — App Store/Google Play
   resmî indirme rozetleriyle birebir aynı görünüm. */
footer .foot-grid .store-row{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
footer .foot-grid .store-badge{
  background:#000;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  height:60px;
  width:170px;
  padding:0 20px;
  gap:14px;
  white-space:nowrap;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,
             0 8px 18px -8px rgba(0,0,0,.6)}
footer .foot-grid .store-badge svg{flex-shrink:0}
footer .foot-grid .store-badge .sb-text{
  display:flex;flex-direction:column;align-items:flex-start;
  line-height:1;text-align:left}
footer .foot-grid .store-badge:hover{
  background:#0a0a0a;
  border-color:rgba(255,255,255,.35);
  transform:translateY(-1px)}
footer .foot-grid .store-badge svg{width:22px;height:22px;fill:#fff}
footer .foot-grid .store-badge .sb-text{gap:2px}
footer .foot-grid .store-badge .sb-eyebrow{
  font-size:9px;font-weight:500;
  letter-spacing:.08em;color:rgba(255,255,255,.8);
  text-transform:uppercase;margin-bottom:2px;
  font-family:"Geist",ui-sans-serif,system-ui,sans-serif}
footer .foot-grid .store-badge .sb-main{
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff}

@media (max-width:680px){
  footer .foot-grid .store-badge{height:54px;padding:0 18px 0 16px;gap:12px;border-radius:12px}
  footer .foot-grid .store-badge svg{width:22px;height:22px}
  footer .foot-grid .store-badge .sb-eyebrow{font-size:9.5px}
  footer .foot-grid .store-badge .sb-main{font-size:16px}
}

/* ═══════════════════════════════════════════════════════════════════════
   iOS / küçük ekran taşma onarımları
   Welcome-stage'deki büyük "nowrap" çeviriler, shield/quote kartlarının
   negatif konumları ve nav'ın geniş içeriği viewport'tan taşıyordu — bu
   blok hepsini kapsayıcılarına hapseder ve gerektiğinde font'u kısar.
   ═══════════════════════════════════════════════════════════════════════ */
.dk-hero-wrap,
.welcome-slide,
.hero-experts,
.hero-slider,
.hero-slides,
.hero-slide,
.product-video-section,
.cta-band,
.dark,
section,
footer{max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){
  .dk-hero-wrap,.welcome-slide,.hero-experts,.hero-slider,.hero-slides,
  .hero-slide,.product-video-section,.cta-band,.dark,section,footer{overflow-x:hidden}
}

/* Grid/flex'in min-content fitting yüzünden welcome-slide intrinsic olarak
   içindeki nowrap metnin genişliğine kadar büyüyebiliyordu — min-width:0
   bunu kırar ve içerik viewport'a sığar. */
.hero-slides,
.hero-slide,
.welcome-slide,
.welcome-stage{min-width:0}

/* Welcome word / tagline mobilde küçültülür; max-width KOYMA — text-align:center
   + white-space:nowrap birleşince max-width metni sola kaydırır. Ebeveyn
   `.dk-hero-wrap` zaten `overflow-x:clip` ile taşmayı keser. */

@media (max-width:680px){
  .welcome-stage{font-size:clamp(36px,10vw,68px)}
  .welcome-tagline{font-size:clamp(15px,4.2vw,22px);
    --tag-offset:calc(9vw + 28px)}
  /* he-shield ve he-quote: mobilde negatif konum yerine içeriye al. */
  .he-shield{right:8px;width:min(210px,calc(100% - 24px))}
  .he-quote{left:8px;max-width:min(210px,calc(100% - 24px))}
  .he-pill{max-width:calc(100% - 24px)}
  /* hl-mark satır içi rozet — uzun cümlede taşmasın */
  .hl-mark{white-space:normal}
  /* Hide CTA buttons on slides 3 (TenderSecure) and 4 (AI Automation) on mobile */
  .hero-slides>.hero-slide:nth-child(3) .hero-cta,
  .hero-slides>.hero-slide:nth-child(4) .hero-cta{ display:none }
  /* Slide 1 (Hero) — mobilde içerik (metin + globe animasyonu) biraz aşağıya. */
  .hero-slides>.hero-slide:nth-child(2) .hero-experts{padding-top:150px}
  /* Slide 2 (HeroExperts) — mobilde içerik (metin + timeline) biraz aşağıya. */
  .hero-slides>.hero-slide:nth-child(3) .hero-experts{padding-top:150px}
  /* Slide 3 (HeroAutomate) — mobilde içerik (metin + animasyon) biraz aşağıya. */
  .hero-slides>.hero-slide:nth-child(4) .hero-experts{padding-top:150px}
  /* SecurityTimeline'i mobilde küçült + ortala, ekrana sığsın. */
  .hero-slides>.hero-slide:nth-child(3) .st-wrap{
    max-width:320px;min-height:0;aspect-ratio:5/6.2;margin:0 auto}
  .hero-slides>.hero-slide:nth-child(3) .he-grid{justify-items:center}
  /* 4. slayttaki AI animasyon container'ını 3. slaytla aynı boyuta getir */
  .hero-slides>.hero-slide:nth-child(4) .ha-viz{
    max-width:320px;min-height:0;aspect-ratio:5/6.2;margin:0 auto}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBİL SLIDER YÜKSEKLİĞİ — iOS-safe.
   - Welcome slayt'a svh tabanlı min-height (URL bar açıkken bile sabit)
   - Diğer slaytlarda padding kısaltılır
   - Store badges welcome-slide'ın içinde dolayısıyla onun yüksekliğine
     göre konumlanır (negatif bottom o yüzden makul kalır)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* Welcome slayt — kelimelerin nefes alacağı sabit yükseklik */
  .welcome-slide{min-height:calc(78svh - 100px);padding:120px 0 96px}
  /* fallback: svh desteklemeyen tarayıcılar */
  @supports not (height:1svh){
    .welcome-slide{min-height:460px}
  }
  /* Store badges welcome slayt'ın altına otursun */
  .store-badges{bottom:24px}

  /* Diğer slaytlar */
  .hero-text{min-height:0;padding:24px 0 8px}
  .hero-experts{min-height:0;padding-bottom:8px}
  .hero-slides>.hero-slide:nth-child(2) .hero-experts,
  .hero-slides>.hero-slide:nth-child(3) .hero-experts,
  .hero-slides>.hero-slide:nth-child(4) .hero-experts{padding-top:130px}
  .he-portrait{min-height:280px;aspect-ratio:1/1}
  .hero-slides>.hero-slide:nth-child(3) .st-wrap{
    max-width:100%;min-height:420px;aspect-ratio:auto;margin:0 auto}
  .ha-viz{min-height:340px}
  .hero-ctrl{padding:8px 16px 20px}
}

/* Daha kısa ekranlarda (telefon yatay / küçük telefon) daha sıkı */
@media (max-width:680px) and (max-height:740px){
  .welcome-slide{padding:96px 0 80px}
  .hero-slides>.hero-slide:nth-child(2) .hero-experts,
  .hero-slides>.hero-slide:nth-child(3) .hero-experts,
  .hero-slides>.hero-slide:nth-child(4) .hero-experts{padding-top:105px}
  .he-portrait{min-height:240px}
  .hero-slides>.hero-slide:nth-child(3) .st-wrap{max-width:100%;min-height:300px;aspect-ratio:auto}
  .ha-viz{min-height:300px}
  .hero-ctrl{padding:4px 16px 16px}
}

/* En küçük telefonlarda (≤380px) ek güvenlik */
@media (max-width:380px){
  .welcome-stage{font-size:clamp(32px,9vw,56px)}
  .welcome-tagline{font-size:14px}
  .nav-inner{height:56px}
  :root{--pad:18px}
}