/* AOKYE — tactical modern. Dark base, amber accent, industrial data feel. */
:root{
  --bg:#111417; --bg2:#1A1D21; --panel:#20242A; --line:#2E343C;
  --txt:#E7EAF0; --txt2:#9AA3AE; --amber:#F59E0B; --amber-d:#D97706;
  --head:'Barlow Condensed',sans-serif; --body:'Barlow',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--body);font-size:17px;line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--amber);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.center{text-align:center}
.mono{font-family:var(--mono)} .small{font-size:13.5px;color:var(--txt2)}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.28em;color:var(--amber);margin-bottom:14px}
h2{font-family:var(--head);font-weight:700;font-size:clamp(30px,4.2vw,44px);letter-spacing:.02em;text-transform:uppercase;margin-bottom:36px;line-height:1.12}

/* buttons */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--head);font-weight:600;font-size:19px;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 34px;border-radius:4px;transition:.18s;cursor:pointer}
.btn-primary{background:var(--amber);color:#141414;box-shadow:0 6px 24px rgba(245,158,11,.25)}
.btn-primary:hover{background:var(--amber-d);transform:translateY(-2px)}
.btn-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;font-weight:400;opacity:.75}
.btn-ghost{border:1px solid var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-lg{font-size:23px;padding:19px 46px}
.btn-sm{padding:10px 20px;font-size:15.5px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(17,20,23,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt)}
.brand-name{font-family:var(--head);font-weight:700;font-size:23px;letter-spacing:.14em}
.brand-name sup{font-size:10px;color:var(--txt2)}
.links{display:flex;gap:26px;margin-left:auto}
.links a{font-family:var(--head);font-weight:500;font-size:16.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);transition:.15s}
.links a:hover{color:var(--amber)}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;margin-left:auto}
.burger span{width:24px;height:2px;background:var(--txt);transition:.2s}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;background:url('/assets/img/hero-scene.webp') center/cover no-repeat;opacity:.28;filter:saturate(.85)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(17,20,23,.96) 30%,rgba(17,20,23,.55) 70%,rgba(17,20,23,.85))}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-top:96px;padding-bottom:96px}
.hero h1{font-family:var(--head);font-weight:700;font-size:clamp(46px,6.4vw,76px);line-height:1.02;letter-spacing:.015em;text-transform:uppercase}
.hl{color:var(--amber)}
.lede{color:var(--txt2);font-size:19px;max-width:560px;margin:22px 0 34px}
.lede strong{color:var(--txt)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.stars{margin-top:26px;display:flex;align-items:center;gap:10px;color:var(--txt2);font-size:15px}
.star-mark{color:var(--amber);letter-spacing:2px;font-size:18px}
.star-mark em{font-style:normal;font-size:13px}
.hero-fig{position:relative}
.hero-fig .glow{position:absolute;inset:8%;background:radial-gradient(circle,rgba(245,158,11,.16),transparent 65%);filter:blur(8px)}
.hero-fig img{position:relative;border-radius:8px;border:1px solid var(--line);background:#fff;padding:18px}
.fig-tag{margin-top:12px;font-size:11px;letter-spacing:.12em;color:var(--txt2);text-align:center}

/* trustbar */
.trustbar{background:var(--bg2);border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px 24px}
.trust-item{font-family:var(--head);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);text-align:center}
.trust-item .mono{color:var(--amber);font-weight:600;margin-right:8px}

/* sections */
.section{padding:92px 0}
.section-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* features */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:84px}
.feature:last-child{margin-bottom:0}
.feature.alt .feature-media{order:2}
.feature-media img{width:100%;height:auto;border-radius:8px;border:1px solid var(--line);background:#fff;padding:10px}
.feature-no{font-size:60px;color:var(--line);font-weight:600;line-height:1;margin-bottom:4px}
.feature-text h3{font-family:var(--head);font-size:31px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-bottom:14px}
.feature-text p{color:var(--txt2)}
.ticks{list-style:none;margin-top:16px}
.ticks li{padding:7px 0 7px 26px;position:relative;color:var(--txt)}
.ticks li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:2px;background:var(--amber)}

/* specs */
.spec-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--panel);border:1px solid var(--line)}
.spec-table td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--txt2)}
.spec-table tr:first-child td{color:var(--amber);letter-spacing:.12em;font-size:12px;background:#181B20}
.spec-table td:first-child{color:var(--txt);letter-spacing:.06em}
.spec-note{border-left:2px solid var(--amber);padding-left:24px}
.spec-note blockquote{font-size:18px;font-style:italic;color:var(--txt);line-height:1.6}
.spec-note figcaption{margin-top:14px;font-size:12px;letter-spacing:.16em;color:var(--txt2)}

/* field cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.2s}
.card:hover{border-color:var(--amber);transform:translateY(-4px)}
.card img{width:100%;height:auto;background:#fff;border-bottom:1px solid var(--line)}
.card h3{font-family:var(--head);font-size:21px;letter-spacing:.05em;text-transform:uppercase;padding:20px 22px 8px}
.card p{color:var(--txt2);font-size:15.5px;padding:0 22px 24px}

/* compare */
.table-scroll{overflow-x:auto}
.compare{width:100%;border-collapse:collapse;min-width:640px;background:var(--panel);border:1px solid var(--line)}
.compare th,.compare td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:16px;color:var(--txt2)}
.compare thead th{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:16.5px;color:var(--txt);background:#181B20}
.compare th.us,.compare td.us{color:var(--txt);background:rgba(245,158,11,.07)}
.compare th.us{color:var(--amber)}
.compare td:first-child{color:var(--txt);font-weight:500}

/* reviews & faq */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.review{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:24px 26px;margin-bottom:20px}
.review .stars{margin:0 0 10px}
.review p{font-size:16.5px}
.review cite{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--txt2);letter-spacing:.06em}
.faq{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin-bottom:14px;padding:0 22px}
.faq summary{font-family:var(--head);font-size:20px;letter-spacing:.04em;text-transform:uppercase;padding:18px 0;cursor:pointer;color:var(--txt);list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:14px;color:var(--amber);font-size:26px;font-family:var(--mono)}
.faq[open] summary::after{content:"–"}
.faq p{color:var(--txt2);padding:0 0 20px}
.two-col .kicker:first-child,.two-col h2{margin-bottom:24px}

/* final cta */
.cta-final{padding:110px 0;background:linear-gradient(160deg,#1A1D21,#141007 140%);border-top:1px solid var(--line)}
.cta-final h2{margin-bottom:10px}
.cta-final .lede{margin:0 auto 36px}
.cta-final .small{margin-top:18px;letter-spacing:.12em}

/* footer */
.footer{background:#0C0E10;border-top:1px solid var(--line);padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:40px}
.foot-h{color:var(--amber);font-size:12px;letter-spacing:.2em;margin-bottom:14px}
.footer a{display:block;color:var(--txt2);margin-bottom:8px;font-size:15.5px}
.footer a:hover{color:var(--amber)}
.legalwrap{border-top:1px solid var(--line);padding:22px 24px}
.legalwrap .small{font-size:12.5px}

/* reveal animation */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;padding-top:64px;padding-bottom:72px;gap:44px}
  .hero-fig{max-width:520px;margin:0 auto}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .feature{grid-template-columns:1fr;gap:26px;margin-bottom:64px}
  .feature.alt .feature-media{order:0}
  .spec-grid,.two-col{grid-template-columns:1fr;gap:36px}
  .cards{grid-template-columns:1fr;max-width:520px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .links{position:fixed;inset:62px 0 auto 0;background:rgba(17,20,23,.97);flex-direction:column;gap:0;padding:10px 0 20px;border-bottom:1px solid var(--line);display:none}
  .links.open{display:flex}
  .links a{padding:13px 26px}
  .burger{display:flex}
  .nav-cta{display:none}
  .hero-ctas .btn{width:100%}
  h2{margin-bottom:26px}
  .section{padding:64px 0}
}