/* Minifig — shared stylesheet for all editions (SW / OP / GO / HP / SH) */

:root{
  --accent:#2A63FF;
  --accent-dark:#1a49cc;
  --bg:#0b0f19;
  --bg-elevated:#121828;
  --bg-elevated-2:#171f33;
  --text:#f5f6fa;
  --text-muted:#9aa3b8;
  --border:rgba(255,255,255,0.08);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --maxw:1120px;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* background glow */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(700px 500px at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(600px 400px at 10% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(16px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--border);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:17px; letter-spacing:-0.01em; }
.brand .mark{ width:36px; height:36px; border-radius:10px; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:14.5px; color:var(--text-muted); transition:color .15s ease; }
.nav-links a:hover{ color:var(--text); }
.nav-cta{ display:flex; gap:10px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-weight:600; font-size:14.5px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 8px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-ghost{ background:var(--bg-elevated); color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ background:var(--bg-elevated-2); }
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.btn-disabled{ background:var(--bg-elevated); color:var(--text-muted); cursor:default; opacity:.6; }
.btn-disabled:hover{ transform:none; background:var(--bg-elevated); }
.btn-disabled:active{ transform:none; }

/* store badges */
.store-row{ display:flex; flex-wrap:wrap; gap:12px; }
.store-btn{
  display:flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:14px;
  background:var(--bg-elevated); border:1px solid var(--border);
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.store-btn:hover{ border-color:color-mix(in srgb, var(--accent) 60%, var(--border)); transform:translateY(-1px); }
.store-btn svg{ width:22px; height:22px; flex:none; }
.store-btn .lines{ display:flex; flex-direction:column; line-height:1.1; }
.store-btn .lines small{ font-size:10.5px; color:var(--text-muted); font-weight:500; }
.store-btn .lines strong{ font-size:15px; font-weight:700; }
.store-btn.disabled{ opacity:.55; pointer-events:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:88px 0 60px; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent);
  padding:7px 14px; border-radius:999px; margin-bottom:22px;
}
.hero h1{ font-size:clamp(34px,4.6vw,54px); line-height:1.06; letter-spacing:-0.02em; margin:0 0 20px; }
.hero p.lead{ font-size:18px; line-height:1.6; color:var(--text-muted); max-width:520px; margin:0 0 32px; }
.hero .store-row{ margin-bottom:22px; }
.trust{ font-size:13px; color:var(--text-muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.trust .dot{ width:3px; height:3px; border-radius:50%; background:var(--text-muted); }

/* phone mockup */
.phone-stage{ position:relative; display:flex; justify-content:center; }
.phone{
  width:290px; height:598px; border-radius:44px;
  background:linear-gradient(180deg,#1c2333,#0e1220);
  border:10px solid #05070c; box-shadow:0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04) inset;
  position:relative; overflow:hidden; z-index:1;
}
.phone .notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#05070c; border-radius:0 0 16px 16px; z-index:3; }
.phone-screen{ position:absolute; inset:0; background:var(--bg); padding:34px 16px 16px; display:flex; flex-direction:column; gap:12px; }
.phone-title{ font-size:19px; font-weight:800; letter-spacing:-0.01em; }
.phone-search{ height:34px; border-radius:10px; background:var(--bg-elevated); border:1px solid var(--border); display:flex; align-items:center; padding:0 10px; gap:6px; color:var(--text-muted); font-size:11.5px; }
.phone-search svg{ width:13px; height:13px; }
.phone-list{ background:var(--bg-elevated); border-radius:16px; overflow:hidden; border:1px solid var(--border); }
.phone-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-bottom:1px solid var(--border); }
.phone-row:last-child{ border-bottom:none; }
.phone-avatar{ width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, white 10%), var(--accent)); flex:none; }
.phone-row .lines{ flex:1; min-width:0; }
.phone-row .lines .l1{ height:7px; width:78%; border-radius:4px; background:rgba(255,255,255,.55); margin-bottom:5px; }
.phone-row .lines .l2{ height:6px; width:42%; border-radius:4px; background:rgba(255,255,255,.18); }
.phone-row .status{ width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(255,255,255,.25); flex:none; }
.phone-row .status.on{ background:var(--accent); border-color:var(--accent); }
.phone-index{ position:absolute; right:6px; top:120px; display:flex; flex-direction:column; gap:2px; }
.phone-index span{ font-size:7px; color:var(--text-muted); text-align:center; }

.float-card{
  position:absolute; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:16px; padding:12px 14px; box-shadow:0 20px 40px -18px rgba(0,0,0,.55); z-index:2;
  backdrop-filter:blur(10px);
}
.float-card .k{ font-size:10.5px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.float-card .v{ font-size:19px; font-weight:800; margin-top:2px; }
.float-card.top{ top:-7%; left:-12%; }
.float-card.bottom{ bottom:8%; right:-10%; }
.float-card .v.accent{ color:var(--accent); }

/* real screenshot mockup */
.shots{ position:relative; width:290px; height:598px; margin:0 auto; }
.shot{
  position:absolute; width:260px; aspect-ratio:9/19.5; border-radius:40px;
  border:8px solid #05070c; box-shadow:0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04) inset;
  background:#05070c; object-fit:cover;
}
.shot-a{ left:0; top:0; z-index:2; }
.shot-b{ right:-30px; bottom:0; z-index:1; transform:scale(.92); opacity:.96; }

@media (max-width:900px){
  .shots{ transform:scale(.92); }
}
@media (max-width:560px){
  .shot-b{ display:none; }
}

/* language switch */
.lang-switch{ display:flex; gap:2px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:999px; padding:3px; }
.lang-switch button{
  border:none; background:transparent; color:var(--text-muted); font-size:12.5px; font-weight:700;
  padding:6px 10px; border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.lang-switch button.active{ background:var(--accent); color:#fff; }
.lang-switch button:hover:not(.active){ color:var(--text); }

/* ---------- Sections ---------- */
section{ position:relative; z-index:1; padding:70px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); letter-spacing:-0.02em; margin:0 0 14px; }
.section-head p{ color:var(--text-muted); font-size:16.5px; line-height:1.6; margin:0; }

.features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:26px 24px; transition:transform .18s ease, border-color .18s ease;
}
.feature-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.feature-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); margin-bottom:16px;
}
.feature-icon svg{ width:22px; height:22px; }
.feature-card h3{ font-size:17px; margin:0 0 8px; letter-spacing:-0.01em; }
.feature-card p{ font-size:14.5px; color:var(--text-muted); line-height:1.55; margin:0; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; padding-top:8px; }
.step::before{
  counter-increment:step; content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; margin-bottom:18px;
  background:var(--accent); color:#fff; font-weight:800; font-size:15px;
}
.step h3{ font-size:16.5px; margin:0 0 8px; }
.step p{ font-size:14.5px; color:var(--text-muted); line-height:1.55; margin:0; }

.cta-band{
  background:linear-gradient(135deg, var(--bg-elevated), var(--bg-elevated-2));
  border:1px solid var(--border); border-radius:32px;
  padding:56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{ font-size:clamp(24px,3vw,32px); margin:0 0 10px; letter-spacing:-0.01em; }
.cta-band p{ color:var(--text-muted); margin:0; font-size:15.5px; max-width:420px; }

footer{ border-top:1px solid var(--border); padding:40px 0; position:relative; z-index:1; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-legal{ font-size:12.5px; color:var(--text-muted); line-height:1.6; max-width:640px; margin-top:18px; }
.footer-links{ display:flex; gap:20px; }
.footer-links a{ font-size:13.5px; color:var(--text-muted); }
.footer-links a:hover{ color:var(--text); }

/* light mode */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --bg-elevated:#ffffff; --bg-elevated-2:#eef0f6;
    --text:#12141c; --text-muted:#5c6478; --border:rgba(10,12,20,0.08);
    color-scheme: light;
  }
  .phone{ background:linear-gradient(180deg,#e9ecf3,#f6f7fb); border-color:#0e1220; }
  .phone-row .lines .l1{ background:rgba(10,12,20,.55); }
  .phone-row .lines .l2{ background:rgba(10,12,20,.18); }
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .phone-stage{ margin-top:20px; transform:scale(.92); }
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .cta-band{ padding:36px; flex-direction:column; text-align:center; }
}
@media (max-width:560px){
  .features-grid{ grid-template-columns:1fr; }
  .float-card{ display:none; }
  .hero{ padding:56px 0 40px; }
  .wrap{ padding:0 18px; }
}