:root{
  --bg:#06080c;
  --bg2:#0d1219;
  --panel:rgba(255,255,255,.05);
  --panel-2:rgba(255,255,255,.08);
  --text:#f4f6f8;
  --muted:#adb6c2;
  --line:rgba(255,255,255,.10);
  --gold:#c7a86b;
  --gold-2:#e2c58d;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --radius:24px;
  --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(199,168,107,.10), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.05), transparent 20%),
    linear-gradient(180deg,#05070a 0%,#0a1016 50%,#06080c 100%);
  min-height:100vh;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 32px), var(--max));margin:0 auto}
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px);
  background:rgba(6,8,12,.72);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0;
}
.brand{display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.18em; text-transform:uppercase}
.brand-mark{
  width:40px; height:40px; border-radius:14px; position:relative;
  border:1px solid rgba(199,168,107,.45);
  background:linear-gradient(135deg, rgba(199,168,107,.18), rgba(255,255,255,.05));
  box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark:before,.brand-mark:after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:999px; background:linear-gradient(180deg, #f8e7be, #b48e4c);
}
.brand-mark:before{width:18px;height:3px}
.brand-mark:after{width:3px;height:18px}
.nav-links{display:flex;gap:18px;flex-wrap:wrap}
.nav-links a{color:var(--muted);font-size:.96rem}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow:var(--shadow); font-weight:700;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
  border-color:rgba(199,168,107,.46);
  background:linear-gradient(180deg, rgba(199,168,107,.26), rgba(199,168,107,.12));
}
.btn.ghost{
  background:rgba(255,255,255,.03);
}
.hero{padding:84px 0 46px}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border:1px solid rgba(199,168,107,.35); border-radius:999px;
  background:rgba(199,168,107,.08); color:#ead7a9; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase;
}
h1{
  margin:18px 0 14px; font-size:clamp(2.7rem,6vw,5.6rem);
  line-height:.95; letter-spacing:-.05em;
}
h2.section-title{
  margin:0 0 10px; font-size:clamp(1.8rem,3vw,2.8rem); letter-spacing:-.04em;
}
.lead,.section-sub{color:var(--muted); max-width:780px; line-height:1.7}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:center}
.panel,.feature,.quote,.specs,.device-card,.cta,.mini-card,.stat{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.panel,.feature,.quote,.specs,.cta,.mini-card,.stat{padding:24px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.badge{
  display:inline-flex; padding:8px 10px; border-radius:999px; font-size:.85rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}
.grid-2,.grid-3,.grid-4{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
section{padding:34px 0}
.feature h3,.panel h3,.quote h3,.specs h3,.mini-card h3,.stat h3{margin:0 0 10px}
p{line-height:1.7}
.muted{color:var(--muted)}
.hr{height:1px; background:var(--line); margin:16px 0}
.spec-list{display:grid; gap:12px; margin-top:8px}
.spec-row{
  display:flex; justify-content:space-between; gap:16px; padding:12px 0;
  border-bottom:1px solid var(--line);
}
.spec-row:last-child{border-bottom:none}
.device-card{padding:28px; overflow:hidden; position:relative}
.device-card:before{
  content:""; position:absolute; width:320px; height:320px; left:-60px; top:-80px;
  border-radius:50%; background:radial-gradient(circle, rgba(199,168,107,.18), transparent 62%);
}
.device-frame{
  width:min(330px, 88%); aspect-ratio:9/19; margin:6px auto 0;
  border-radius:36px; padding:12px;
  background:linear-gradient(160deg,#7a6846,#171a20 40%,#b09b77 100%);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.device-inner{
  height:100%; border-radius:28px; overflow:hidden; position:relative;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,153,51,.14), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(199,168,107,.18), transparent 26%),
    linear-gradient(180deg, #0b0f15, #06080c 48%, #10161f);
}
.notch{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:38%; height:26px; border-radius:0 0 18px 18px; background:#05070a;
  border:1px solid rgba(255,255,255,.06); border-top:none;
}
.screen{
  position:absolute; inset:58px 18px 18px;
  display:grid; grid-template-rows:auto auto 1fr auto; gap:14px;
}
.ui-time{font-size:1.9rem; font-weight:800}
.ui-sub{color:#d4dbe3}
.ui-cards{display:grid; gap:12px}
.ui-card{
  padding:14px; border-radius:18px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.showcase{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center;
}
.metric{
  font-size:2rem; font-weight:800; letter-spacing:-.04em; color:var(--gold-2);
}
footer{padding:36px 0 60px; color:var(--muted)}
.footer-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:24px;
}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1; transform:translateY(0)}
.glow{
  box-shadow:0 0 0 1px rgba(199,168,107,.2), 0 0 40px rgba(199,168,107,.12);
}
.small{font-size:.92rem}
@media (max-width: 980px){
  .hero-grid,.grid-4,.grid-3,.grid-2,.showcase{grid-template-columns:1fr}
  .nav-inner{flex-direction:column; align-items:flex-start}
}