/* ═══════════════════════════════════════════════════════════════
   ArkQuant official site — base: tokens, reset, type, buttons, nav
   Tokens mirror the app's Theme.swift 1:1. Do not hardcode colors
   elsewhere — always go through the variables below.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* backgrounds (app: Theme.bg / bgElev / bgElev2 / bgElev3) */
  --bg:#0c0c0e; --bg-deep:#070708; --bg-elev:#171719; --bg-elev2:#202024; --bg-elev3:#28282d;
  /* borders */
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.12);
  /* text (text-3 is decorative/large-only: 3.5:1 on --bg) */
  --text:#f3f3f5; --text-2:#9a9aa3; --text-3:#67676f;
  /* brand & semantics */
  --brand:#f2a33c; --brand-soft:#ffd38a; --risk:#e8943a;
  --up:#36c77c; --dn:#e5544c; --info:#4d92e8;
  --up-dim:rgba(54,199,124,.14); --dn-dim:rgba(229,84,76,.14);
  --brand-dim:rgba(232,148,58,.16); --info-dim:rgba(77,146,232,.14);
  --ink-on-amber:#1a1208;
  /* radii (app: Theme.Radius) */
  --r-chip:8px; --r-button:13px; --r-input:14px; --r-card:18px; --r-sheet:20px; --r-large:23px;
  /* recipes */
  --amber-grad:linear-gradient(135deg,#ffc068,#f2a33c,#ec8f25);
  --screen-grad:radial-gradient(900px at 50% 0%,#1a1a1f 0%,#0a0a0c 55%,#060607 100%);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --shadow-card:0 15px 38px -6px rgba(0,0,0,.55);
  --nav-h:64px;
}

/* ——— reset ——— */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;background:var(--bg-deep)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg-deep);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:700}
button{font:inherit}
::selection{background:rgba(242,163,60,.28);color:#fff}

svg.ic{width:1.1em;height:1.1em;flex:none}

/* ——— layout helpers ——— */
.container{max-width:1160px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{position:relative;padding-block:clamp(72px,10vw,128px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ——— typography ——— */
h1,h2,h3{line-height:1.14;letter-spacing:-.02em;text-wrap:balance;font-weight:700}
h1{font-size:clamp(2.4rem,5.5vw,4.05rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.55rem)}
h3{font-size:1.06rem;letter-spacing:-.01em}
.lead{font-size:clamp(1.02rem,1.5vw,1.17rem);color:var(--text-2);max-width:34em}
.lead strong{color:var(--text);font-weight:600}
.amber{color:var(--brand)}
.up{color:var(--up)}
.dn{color:var(--dn)}
code{font-family:var(--mono);font-size:.9em;background:var(--bg-elev2);border:1px solid var(--border);border-radius:6px;padding:.08em .4em;color:var(--text-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--brand);border-radius:1px}

.section-head{max-width:640px;margin-bottom:clamp(36px,5vw,60px)}
.section-head h2{margin-top:14px}
.section-sub{margin-top:14px;color:var(--text-2);font-size:1.03rem}

/* ——— buttons ——— */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding-inline:24px;border-radius:var(--r-button);
  font-weight:700;font-size:.98rem;white-space:nowrap;
  transition:transform .15s ease,box-shadow .25s ease,background-color .2s ease,border-color .2s ease;
}
.btn:active{transform:scale(.97)}
.btn-amber{
  background:var(--amber-grad);color:var(--ink-on-amber);
  box-shadow:0 10px 26px -6px rgba(242,163,60,.5);
}
.btn-amber:hover{box-shadow:0 14px 34px -6px rgba(242,163,60,.62);transform:translateY(-1px)}
.btn-ghost{
  background:rgba(255,255,255,.04);color:var(--text);
  border:1px solid var(--border-strong);
}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.btn-sm{height:40px;padding-inline:18px;font-size:.88rem;border-radius:11px}
.btn-lg{height:58px;padding-inline:34px;font-size:1.06rem;border-radius:15px}

/* ——— app-icon tile (logo has a solid black bg — never show it bare) ——— */
.tile{
  display:inline-grid;place-items:center;overflow:hidden;background:#000;
  border-radius:29%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 14px rgba(0,0,0,.5);
}
.tile img{width:100%;height:100%;object-fit:cover}
.tile-nav{width:34px;height:34px}
.tile-cta{width:72px;height:72px;border-radius:22px;margin-bottom:26px}

/* ——— skip link & focus ——— */
.skip-link{
  position:fixed;top:10px;left:10px;z-index:200;padding:10px 16px;
  background:var(--bg-elev2);border:1px solid var(--border-strong);border-radius:10px;
  font-weight:600;transform:translateY(-64px);transition:transform .2s ease;
}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ——— nav ——— */
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  background:rgba(12,12,14,.72);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background-color .3s ease;
}
.site-nav.scrolled{border-bottom-color:var(--border);background:rgba(10,10,12,.82)}
.nav-inner{display:flex;align-items:center;gap:28px;height:100%}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand-name{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{
  padding:8px 13px;border-radius:9px;font-size:.9rem;font-weight:600;color:var(--text-2);
  transition:color .18s ease,background-color .18s ease;
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-cta{flex:none}
@media (max-width:719px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
}

/* ——— glows & grain (pre-blurred gradients; no filter:blur) ——— */
.glow{position:absolute;border-radius:50%;pointer-events:none}
.grain{
  position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ——— scroll reveal (opt-in; hidden state only when JS is present) ——— */
html.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js [data-reveal].is-revealed{opacity:1;transform:none}
html.js [data-reveal-delay="1"]{transition-delay:.1s}
html.js [data-reveal-delay="2"]{transition-delay:.2s}
html.js [data-reveal-delay="3"]{transition-delay:.3s}

/* ——— footer ——— */
.site-footer{border-top:1px solid var(--border);background:var(--bg);padding-block:52px 40px}
.footer-grid{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.footer-tag{margin-top:14px;color:var(--text-2);font-size:.92rem}
.footer-links{display:flex;flex-wrap:wrap;gap:24px 64px}
.footer-col{display:flex;flex-direction:column;gap:9px;min-width:130px}
.footer-h{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:3px}
.footer-links a{color:var(--text-2);font-size:.9rem;font-weight:600;transition:color .18s ease}
.footer-links a:hover{color:var(--text)}
.footer-legal{margin-top:40px;padding-top:26px;border-top:1px solid var(--border)}
.footer-legal p{color:var(--text-2);font-size:.8rem;max-width:70em;opacity:.75}
.footer-copy{margin-top:12px}

/* ——— reduced motion: kill everything animated ——— */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1;transform:none}
}