
:root{
  --bg:#050505;
  --panel:#111111;
  --panel2:#171717;
  --yellow:#FFD400;
  --yellow2:#FFB800;
  --text:#F7F7F7;
  --muted:#B8B8B8;
  --border:rgba(255,212,0,.25);
  --shadow:0 0 38px rgba(255,212,0,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,212,0,.13), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(255,184,0,.08), transparent 20%),
    var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{width:min(1120px, calc(100% - 32px)); margin:0 auto}
.nav{
  position:sticky; top:0; z-index:10;
  background:rgba(5,5,5,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,212,0,.12);
}
.nav-inner{height:76px; display:flex; align-items:center; justify-content:space-between; gap:22px}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.8px}
.brand img{width:50px;height:50px;border-radius:14px;object-fit:cover;box-shadow:var(--shadow)}
.brand span{font-size:22px;color:var(--yellow)}
.nav-links{display:flex; gap:18px; align-items:center; color:var(--muted); font-size:14px}
.nav-links a:hover{color:var(--yellow)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 20px; border-radius:999px;
  font-weight:800; border:1px solid var(--border);
  background:linear-gradient(135deg,var(--yellow),var(--yellow2));
  color:#090909; box-shadow:0 0 24px rgba(255,212,0,.22);
}
.btn.secondary{background:transparent;color:var(--yellow);box-shadow:none}
.hero{padding:78px 0 54px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);background:rgba(255,212,0,.08);
  color:var(--yellow);padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px;
}
h1{font-size:clamp(38px,5vw,72px);line-height:1.02;margin:18px 0 18px;letter-spacing:-2px}
h1 strong{color:var(--yellow)}
.lead{font-size:18px;line-height:1.75;color:#D6D6D6;max-width:680px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.phone-card{
  background:linear-gradient(180deg,#111,#070707);
  border:1px solid var(--border);
  border-radius:34px;
  padding:26px;
  min-height:560px;
  box-shadow:0 0 70px rgba(255,212,0,.16);
  position:relative; overflow:hidden;
}
.phone-card:before{
  content:"";position:absolute;inset:-80px -40px auto auto;width:260px;height:260px;border-radius:50%;
  background:rgba(255,212,0,.16);filter:blur(55px)
}
.phone-top{display:flex;align-items:center;gap:12px;position:relative}
.phone-top img{width:78px;height:78px;border-radius:20px;object-fit:cover}
.phone-top h3{margin:0;font-size:26px;color:var(--yellow)}
.phone-top p{margin:4px 0 0;color:var(--muted)}
.mock-card{
  margin-top:22px;background:#0b0b0b;border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:18px;position:relative
}
.mock-row{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:14px 0;color:#ddd}
.mock-row span:first-child{color:var(--muted)}
.yellow-line{height:4px;background:linear-gradient(90deg,var(--yellow),transparent);border-radius:999px;margin:18px 0}
.store-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.store{
  background:#0a0a0a;border:1px solid var(--border);border-radius:14px;padding:12px 16px;min-width:168px
}
.store small{display:block;color:var(--muted);font-size:11px}
.store b{display:block;color:var(--yellow);font-size:16px;margin-top:2px}
.section{padding:54px 0}
.section h2{font-size:34px;margin:0 0 14px}
.section p.sub{color:var(--muted);line-height:1.7;margin:0 0 26px;max-width:780px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:linear-gradient(180deg,var(--panel2),#0d0d0d);
  border:1px solid rgba(255,212,0,.16);
  border-radius:22px;padding:24px;min-height:190px
}
.card .icon{font-size:28px;margin-bottom:14px}
.card h3{margin:0 0 10px;color:var(--yellow)}
.card p{margin:0;color:#CFCFCF;line-height:1.65}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:#0d0d0d;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:20px}
.step b{color:var(--yellow);font-size:22px}
.step p{color:#ccc;line-height:1.55}
.cta{
  background:linear-gradient(135deg,rgba(255,212,0,.14),rgba(255,184,0,.04));
  border:1px solid var(--border);border-radius:28px;padding:32px;display:flex;
  justify-content:space-between;align-items:center;gap:20px
}
.footer{border-top:1px solid rgba(255,212,0,.12);padding:34px 0;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:20px}
.footer a{display:block;margin:8px 0;color:#D0D0D0}
.footer a:hover{color:var(--yellow)}
.page{padding:54px 0 80px}
.legal{
  background:rgba(17,17,17,.92);border:1px solid rgba(255,212,0,.16);
  border-radius:26px;padding:34px;line-height:1.75;color:#E6E6E6
}
.legal h1{font-size:42px;letter-spacing:-1px}
.legal h2{color:var(--yellow);margin-top:32px}
.legal ul{padding-left:22px}
.notice{background:rgba(255,212,0,.08);border:1px solid var(--border);padding:16px;border-radius:16px;color:#F1F1F1}
.contact-box{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contact-item{background:#0d0d0d;border:1px solid rgba(255,212,0,.16);border-radius:18px;padding:20px}
.contact-item b{color:var(--yellow);display:block;margin-bottom:8px}
@media(max-width:900px){
  .hero-grid,.cards,.steps,.footer-grid,.contact-box{grid-template-columns:1fr}
  .nav-inner{height:auto;padding:14px 0;align-items:flex-start}
  .nav-links{display:none}
  .phone-card{min-height:auto}
  .cta{flex-direction:column;align-items:flex-start}
}
