:root{
  --bg:#070708;
  --bg2:#0e0e10;
  --card:#141418;
  --line:rgba(255,255,255,.08);
  --text:#f5f5f7;
  --muted:#a4a4ad;
  --gold:#d8a04b;
  --gold2:#8e6530;
  --radius:30px;
  --max:1260px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 80% 0%, rgba(216,160,75,.18), transparent 28%),
    radial-gradient(circle at 0% 15%, rgba(216,160,75,.08), transparent 24%),
    linear-gradient(180deg, #0a0a0b 0%, #050506 100%);
}
a{text-decoration:none;color:inherit}
.wrap{width:min(calc(100% - 40px), var(--max)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 20px;
  backdrop-filter:blur(18px);
  background:rgba(10,10,12,.62);
  border-bottom:1px solid var(--line);
}
.brand{font-size:1.2rem; font-weight:700; letter-spacing:-.03em}
.nav{display:flex; gap:24px}
.nav a{color:var(--muted); font-size:.97rem}
.nav a:hover{color:var(--text)}
.langs{display:flex; gap:8px}
.lang{
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:#fff;
  border-radius:999px; padding:8px 10px; cursor:pointer; font-size:1rem;
}
.lang.active{border-color:rgba(216,160,75,.35); background:rgba(216,160,75,.12)}
.hero{
  min-height:calc(100vh - 80px);
  display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;
  padding:84px 0 56px;
}
.eyebrow{color:var(--gold); font-weight:700; margin:0 0 14px; letter-spacing:.01em}
h1,h2,h3{margin:0}
h1{
  font-size:clamp(42px, 7vw, 80px);
  line-height:.95; letter-spacing:-.05em; max-width:760px;
}
h2{
  font-size:clamp(28px, 4vw, 48px);
  line-height:1; letter-spacing:-.04em;
}
h3{font-size:1.32rem; letter-spacing:-.02em}
.lead,.feature p,.copy p,.card p,.panel p,.footer p{
  color:var(--muted); line-height:1.62; font-size:1.04rem;
}
.cta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:28px 0 24px}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 22px; border-radius:999px;
  background:linear-gradient(180deg, #e1af61 0%, #c88f43 100%);
  color:#241505; font-weight:700; box-shadow:0 18px 40px rgba(216,160,75,.2);
}
.note{color:var(--muted)}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.fact,.card,.feature,.panel{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(24,24,28,.88), rgba(17,17,21,.9));
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.fact{padding:16px 18px}
.fact strong{display:block; margin-bottom:4px}
.fact span{color:var(--muted); font-size:.95rem}

.hero-phones{position:relative; min-height:760px}
.device{
  position:relative;
  width:min(320px, 100%);
  padding:12px;
  border-radius:44px;
  background:linear-gradient(180deg,#1c1d22 0%, #0f1013 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 80px rgba(0,0,0,.45);
}
.device::before{
  content:"";
  position:absolute; left:50%; top:7px; transform:translateX(-50%);
  width:36%; height:19px; background:#090a0d; border-radius:0 0 16px 16px; z-index:2;
}
.device img{
  display:block; width:100%; aspect-ratio:9/19.5; object-fit:cover;
  border-radius:32px; background:#000;
}
.hero-phones .center{position:absolute; left:50%; top:60px; transform:translateX(-50%); z-index:3}
.hero-phones .tilt-left{position:absolute; left:0; top:170px; transform:rotate(-10deg); z-index:2}
.hero-phones .tilt-right{position:absolute; right:0; top:140px; transform:rotate(10deg); z-index:1}
.hero-phones .large{width:300px}
.section{padding:36px 0 10px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-bottom:28px}
.card{padding:24px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px}
.feature{padding:24px; min-height:210px}
.section-head{max-width:820px; margin-bottom:18px}
.showcases{padding-top:36px; padding-bottom:24px}
.row{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:26px; align-items:center;
  padding:42px 0; border-top:1px solid var(--line);
}
.row.reverse{grid-template-columns:1.05fr .95fr}
.row.reverse .copy{order:2}
.row.reverse .phones{order:1}
.phones{display:grid; gap:14px; align-items:end}
.phones.two{grid-template-columns:repeat(2,1fr)}
.phones.three{grid-template-columns:repeat(3,1fr)}
.phones .small{width:100%}
.panel{padding:36px; margin:40px auto 56px; background:
  radial-gradient(circle at 100% 0%, rgba(216,160,75,.14), transparent 30%),
  linear-gradient(180deg, rgba(24,24,28,.92), rgba(15,15,19,.94));
}
.footer{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  padding:30px 0 56px; border-top:1px solid var(--line);
}
.contact a{color:var(--gold)}

@media (max-width: 1100px){
  .hero{grid-template-columns:1fr; min-height:auto}
  .hero-phones{min-height:900px}
  .stats,.grid3,.footer,.row,.row.reverse{grid-template-columns:1fr}
  .row.reverse .copy,.row.reverse .phones{order:initial}
}
@media (max-width: 800px){
  .nav{display:none}
  .facts,.stats,.grid3,.phones.two,.phones.three{grid-template-columns:1fr}
  .hero-phones{min-height:1050px}
  .hero-phones .tilt-left{left:10px; top:420px; transform:rotate(-6deg)}
  .hero-phones .center{top:30px}
  .hero-phones .tilt-right{right:10px; top:730px; transform:rotate(6deg)}
  .device{width:min(290px,100%)}
}


.appstore-link{display:inline-flex;align-items:center}
.appstore-link svg{display:block;width:160px;height:auto}
.panel-screenshot{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:center}
.browser-shot{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#ece9e4;box-shadow:0 20px 60px rgba(0,0,0,.24)}
.browser-shot img{display:block;width:100%;height:auto}
.device{padding:9px;border-radius:36px;background:linear-gradient(180deg,#1b1c20 0%, #0d0e11 100%)}
.device::before{top:6px;width:34%;height:16px;border-radius:0 0 14px 14px}
.device img{border-radius:28px}
.phones .device.small{width:100%;padding:8px;border-radius:32px}
.phones .device.small img{border-radius:24px}
@media (max-width:1100px){.panel-screenshot{grid-template-columns:1fr}}

.app-icon{
  width:72px;
  height:72px;
  border-radius:16px;
  margin-bottom:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

.nav-left{display:flex;align-items:center}
.nav-icon{
  width:28px;
  height:28px;
  border-radius:6px;
  margin-right:10px;
}


/* Apple-like sticky header refinements */
.topbar{
  transition: padding .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.topbar.scrolled{
  padding: 10px 20px;
  background: rgba(10,10,12,.78);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border-bottom-color: rgba(255,255,255,.1);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  transition: gap .28s ease, transform .28s ease;
}
.brand-icon{
  width:28px;
  height:28px;
  border-radius:7px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition: width .28s ease, height .28s ease, border-radius .28s ease, transform .28s ease, box-shadow .28s ease;
}
.brand-text{
  transition: font-size .28s ease, opacity .28s ease, letter-spacing .28s ease;
}
.topbar.scrolled .brand{
  gap:8px;
}
.topbar.scrolled .brand-icon{
  width:22px;
  height:22px;
  border-radius:6px;
  transform: translateY(-0.5px);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.topbar.scrolled .brand-text{
  font-size:1.02rem;
  letter-spacing:-.02em;
}
.topbar.scrolled .nav a{
  color:#b8b8c0;
}
.topbar.scrolled .langs{
  transform: scale(.96);
  transform-origin:right center;
  transition: transform .28s ease;
}
@supports (backdrop-filter: blur(18px)) {
  .topbar.scrolled{
    backdrop-filter: blur(22px);
  }
}

@media (max-width: 800px){
  .topbar.scrolled{
    padding: 10px 14px;
  }
  .topbar.scrolled .brand-icon{
    width:21px;
    height:21px;
  }
}