/* ═══════════════════════════════════════════════════════════════
   DataShaft — main.css
   Shared design system: tokens, base, components, service pages.
   Loaded by every page. Cached after first visit.
   Page-unique styles live in assets/css/home.css or a small
   inline block on the one page that needs them.
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#FF4D00; --violet:#5945FC; --cream:#FAF7F2; --black:#0E0F11; --success:#16C784;
  --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:32px; --wrap:1240px;
  --f:'Switzer','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --grad:linear-gradient(120deg,var(--orange) 0%,#FF7A3D 55%,var(--violet) 100%);
  --grad-btn:linear-gradient(120deg,#D93F00 0%,#E8551A 45%,var(--violet) 100%);
}
[data-theme="light"]{
  --bg:#FAF7F2; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F0EDE8;
  --line:#E6E1D9; --line-2:#CFC8BC; --tx:#0E0F11; --tx-2:#3B3B3B; --tx-3:#8A8378;
  --glass:rgba(250,247,242,.82); --shadow:0 20px 55px rgba(14,15,17,.10);
  --mesh-1:rgba(255,77,0,.16); --mesh-2:rgba(89,69,252,.12);
  --accent:var(--orange); --accent-2:var(--violet); --accent-tx:#C43800;
}
[data-theme="dark"]{
  --bg:#0E0F11; --bg-2:#141518; --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.07);
  --line:rgba(250,247,242,.10); --line-2:rgba(250,247,242,.18);
  --tx:#FAF7F2; --tx-2:rgba(250,247,242,.68); --tx-3:rgba(250,247,242,.44);
  --glass:rgba(14,15,17,.76); --shadow:0 24px 70px rgba(0,0,0,.55);
  --mesh-1:rgba(255,77,0,.26); --mesh-2:rgba(89,69,252,.20);
  --accent:var(--orange); --accent-2:var(--violet); --accent-tx:#FF7A3D;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--bg);color:var(--tx);line-height:1.65;font-size:17px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .4s var(--ease),color .4s var(--ease)}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;position:relative;z-index:1}
.narrow{max-width:880px}
section{position:relative;padding:88px 0}
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.035em;font-weight:700}
h1{font-size:clamp(36px,5.2vw,64px);font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:20px;letter-spacing:-.02em;line-height:1.3}
h4{font-size:16.5px}
p{margin-bottom:18px;color:var(--tx-2)}p:last-child{margin-bottom:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-tx);margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.6}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--tx-2);max-width:62ch}
.grad-tx{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mesh i{position:absolute;border-radius:50%;filter:blur(90px)}
.m1{width:560px;height:560px;background:var(--mesh-1);top:-180px;left:-120px}
.m2{width:460px;height:460px;background:var(--mesh-2);top:60px;right:-140px}

.nav{position:sticky;top:0;z-index:200;background:var(--glass);backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 32px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.03em}
.brand img{height:30px;width:auto;display:block}
.brand .logo-dark{display:none}
[data-theme="dark"] .brand .logo-light{display:none}
[data-theme="dark"] .brand .logo-dark{display:block}
.menu{display:flex;gap:4px;list-style:none}
.menu a{padding:9px 14px;font-size:14.5px;font-weight:500;color:var(--tx-2);border-radius:10px;transition:.2s;display:block}
.menu a:hover{color:var(--tx);background:var(--surface-2)}
.nav-cta{display:flex;gap:10px;align-items:center}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--tx-2);transition:.25s}
.icon-btn:hover{color:var(--accent-tx);border-color:var(--line-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:var(--r-sm);
  font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:var(--f);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;white-space:nowrap}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:0 10px 30px rgba(255,77,0,.34)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(255,77,0,.48)}
.btn-ghost{background:var(--surface);color:var(--tx);border-color:var(--line-2)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn-wa{background:#25D366;color:#08331A}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-lg{padding:17px 32px;font-size:16px}

.crumb{padding:18px 0 0;font-size:13.5px;color:var(--tx-3)}
.crumb a{color:var(--accent-tx);font-weight:500}
.crumb span{margin:0 8px;opacity:.5}

.hero{padding:44px 0 72px;overflow:hidden}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:100px;background:var(--surface);
  border:1px solid var(--line);font-size:13px;color:var(--tx-2);margin-bottom:24px;font-weight:500}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.hero h1{margin-bottom:22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 18px}
.reply{font-size:14px;color:var(--tx-3);display:flex;align-items:center;gap:8px}
.reply .dot{width:8px;height:8px;border-radius:50%;background:var(--success)}

.trust{border-block:1px solid var(--line);padding:24px 0;background:var(--bg-2)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;text-align:center}
.tgrid b{font-size:26px;font-weight:800;letter-spacing:-.035em;display:block}
.tgrid span{font-size:12.5px;color:var(--tx-3)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;transition:.35s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.metricline{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--tx-3)}
.metricline b{color:var(--accent-tx);font-weight:700}

.week{display:grid;grid-template-columns:104px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--line)}
.week:last-child{border-bottom:none}
.week .w{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-tx);padding-top:3px}
.week h3{font-size:16.5px;margin-bottom:5px}.week p{font-size:14.5px;margin:0}

.chk{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.chk:last-child{border-bottom:none}
.chk .tick{width:22px;height:22px;border-radius:50%;background:rgba(255,77,0,.12);display:grid;place-items:center;flex:none;margin-top:2px}
.chk .tick svg{width:12px;height:12px;stroke:var(--accent-tx);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.chk b{display:block;font-size:15.5px;margin-bottom:2px}
.chk p{font-size:14px;margin:0;color:var(--tx-3)}

.band{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;position:relative}
.band.feat{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,77,0,.10)}
.band .tagx{position:absolute;top:-11px;left:28px;background:var(--grad-btn);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:4px 11px;border-radius:100px}
.band .amt{font-size:32px;font-weight:800;letter-spacing:-.04em;margin:10px 0 4px}
.band .amt small{font-size:14px;font-weight:600;color:var(--tx-3);letter-spacing:0}
.band ul{list-style:none;margin-top:16px}
.band li{font-size:14px;color:var(--tx-2);padding:6px 0 6px 22px;position:relative}
.band li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.45}

.case{background:var(--black);color:#FAF7F2;border-radius:var(--r-xl);padding:44px;overflow:hidden}
.case h2{color:#fff}.case p{color:rgba(250,247,242,.72)}
.case .nums{display:flex;gap:44px;flex-wrap:wrap;margin-top:28px;padding-top:26px;border-top:1px solid rgba(250,247,242,.14)}
.case .nums b{display:block;font-size:36px;font-weight:800;letter-spacing:-.045em;color:#FF7A3D;line-height:1}
.case .nums span{font-size:13px;color:rgba(250,247,242,.55)}

.read a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 20px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;transition:.25s var(--ease);font-size:15px;font-weight:500}
.read a:hover{transform:translateX(4px);border-color:var(--accent);color:var(--accent-tx)}
.read a span{color:var(--tx-3);font-size:18px}

.artmeta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--tx-3);margin:14px 0 0}
.artmeta .badge{padding:4px 11px;border-radius:100px;background:var(--surface);border:1px solid var(--line);font-weight:600;color:var(--accent-tx);font-size:12px}

.prose{font-size:16.5px;line-height:1.75;color:var(--tx-2);max-width:74ch}
.prose h2{font-size:24px;margin:40px 0 14px;letter-spacing:-.02em;color:var(--tx)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18.5px;margin:28px 0 10px;color:var(--tx)}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--tx);font-weight:700}
.prose a{color:var(--accent-tx);text-decoration:underline;text-decoration-color:rgba(255,77,0,.35);text-underline-offset:2px}
.prose a:hover{text-decoration-color:var(--accent-tx)}
.prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);color:var(--tx-3);font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:20px 0 26px;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:10px 14px;border:1px solid var(--line);vertical-align:top}
.prose th{background:var(--surface);font-weight:700;color:var(--tx)}
.migrate-note{font-size:13px;color:var(--tx-3);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg);padding:16px 20px;margin-top:36px}

.faq{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 0;font-weight:600;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--accent-tx);font-weight:400;line-height:1}
.faq[open] summary::after{content:"−"}
.faq p{padding-bottom:20px;font-size:15.5px;max-width:80ch}

.cta-band{border-radius:var(--r-xl);padding:64px 44px;text-align:center;background:var(--black);position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(250,247,242,.7);max-width:56ch;margin:16px auto 30px}

.ftr{border-top:1px solid var(--line);padding:60px 0 28px;background:var(--bg-2)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}
.ftr .fh{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:14px;font-weight:700}
.ftr a{display:block;padding:5px 0;font-size:14px;color:var(--tx-2)}
.ftr a:hover{color:var(--accent-tx)}
.fbtm{border-top:1px solid var(--line);margin-top:38px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--tx-3)}

.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:300;padding:11px 14px;gap:10px;background:var(--glass);backdrop-filter:blur(20px);border-top:1px solid var(--line)}
.sticky .btn{flex:1}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}


@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}
@media(max-width:900px){.menu,.nav-cta .btn-primary{display:none}section{padding:60px 0}.wrap{padding:0 20px}
  body{padding-bottom:70px}.sticky{display:flex}
  .week{grid-template-columns:1fr;gap:6px}.case{padding:30px 24px}.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}

/* ── comparison table (ecommerce, web development) ── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin-top:26px}
table.cmp{width:100%;border-collapse:collapse;min-width:680px;font-size:14.5px}
table.cmp th{text-align:left;padding:16px 18px;background:var(--surface-2);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tx-3);font-weight:700;border-bottom:1px solid var(--line)}
table.cmp td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--tx-2)}
table.cmp tr:last-child td{border-bottom:none}
table.cmp td:first-child{font-weight:700;color:var(--tx)}
.yes{color:var(--success);font-weight:600}
.no{color:var(--tx-3)}

/* ── tech stack chips (web development) ── */
.stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.stack span{padding:9px 17px;border-radius:100px;background:var(--surface);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--tx-2)}

/* ── light case card (web design) ── */
.case-light{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:40px;overflow:hidden}

/* ── before / after (web design) ── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.ba-col{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--surface-2)}
.ba-col.after{border-color:var(--accent);background:rgba(255,77,0,.05)}
.ba-col h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);margin-bottom:14px}
.ba-col.after h3{color:var(--accent-tx)}
.ba-col dl{display:grid;grid-template-columns:1fr auto;gap:9px 12px;font-size:14.5px}
.ba-col dt{color:var(--tx-3)}
.ba-col dd{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ba-col.after dd{color:var(--accent-tx)}

/* ── speed comparison bars (web design) ── */
.speed{background:var(--black);border-radius:var(--r-xl);padding:44px;color:#FAF7F2}
.speed h2{color:#fff}
.speed p{color:rgba(250,247,242,.72)}
.bars{margin-top:30px}
.bar-row{display:grid;grid-template-columns:150px 1fr 86px;gap:16px;align-items:center;padding:11px 0}
.bar-row .lbl{font-size:14px;color:rgba(250,247,242,.8);font-weight:500}
.bar-track{display:block;height:12px;border-radius:100px;background:rgba(250,247,242,.10);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:100px;background:rgba(250,247,242,.28);width:0;transition:width 1.3s var(--ease)}
.bar-row.us .bar-fill{background:linear-gradient(90deg,#FF4D00,#FF7A3D)}
.bar-row .val{font-size:14px;font-weight:700;text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.bar-row.us .val{color:#FF7A3D}

@media(prefers-reduced-motion:reduce){.bar-fill{transition:none}}
@media(max-width:900px){
  .speed,.case-light{padding:30px 24px}
  .ba{grid-template-columns:1fr}
  .bar-row{grid-template-columns:110px 1fr 66px;gap:10px}
}


/* ── promoted: shared by multiple service pages ── */
h1{font-size:clamp(38px,5.4vw,66px);font-weight:800;letter-spacing:-.045em}
/* hero */
.hero{padding:44px 0 76px;overflow:hidden}
.band .amt{font-size:34px;font-weight:800;letter-spacing:-.04em;margin:10px 0 4px}
/* case study */
.case{background:var(--black);color:#FAF7F2;border-radius:var(--r-xl);padding:44px;position:relative;overflow:hidden}
.case .nums b{display:block;font-size:38px;font-weight:800;letter-spacing:-.045em;color:#FF7A3D;line-height:1}

/* ---- mega nav (moved from home.css so it works on every page, not just index.html) ---- */
.menu>li{position:static}
.menu>li>button{display:flex;align-items:center;gap:6px;padding:9px 14px;font-size:14.5px;font-weight:500;color:var(--tx-2);background:none;border:0;font-family:var(--f);cursor:pointer;border-radius:10px;transition:.2s}
.menu>li>button:hover{color:var(--tx);background:var(--surface-2)}
.chev{width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:.25s}
.menu li.on .chev{transform:rotate(-135deg) translateY(-2px)}
.mega{display:none;position:absolute;top:calc(100% + 14px);left:32px;right:32px;transform:translateY(-8px);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 26px 60px rgba(14,15,17,.16);padding:30px;grid-template-columns:repeat(3,1fr) 260px;gap:30px;opacity:0;transition:.3s var(--ease)}
.menu li.on .mega{display:grid;opacity:1;transform:translateY(0)}
.mcol .mh{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:13px;font-weight:700}
.mcol a{display:block;padding:6px 0;font-size:14px;color:var(--tx-2);transition:.18s;font-weight:500}
.mcol a:hover{color:var(--accent-tx);transform:translateX(3px)}
.mpromo{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.mpromo .ph{font-size:16px;text-transform:none;letter-spacing:-.02em;color:var(--tx);margin-bottom:7px}
.mpromo p{font-size:13px;color:var(--tx-3);margin-bottom:16px;line-height:1.5}
.mega-foot{grid-column:1/-1;display:flex;gap:26px;padding-top:20px;margin-top:4px;border-top:1px solid var(--line)}
.mega-foot a{font-size:13.5px;font-weight:600;color:var(--accent-tx)}
.mega-foot a:hover{text-decoration:underline}
.mpromo .btn-primary{color:#fff!important;text-align:center;justify-content:center}
@media(max-width:1240px){.menu li.on .mega{grid-template-columns:repeat(3,1fr) 230px;gap:24px}}
@media(max-width:1080px){.menu li.on .mega{grid-template-columns:1fr 1fr;gap:22px}.mpromo{grid-column:1/-1}.mega-foot{flex-wrap:wrap;gap:16px}}