:root{
  --bg:#05070b;
  --panel:#0c1520;
  --accent:#3ba4ff;
  --accent-soft:rgba(59,164,255,.18);
  --ink:#e6f1ff;
  --muted:#9aa9bf;
  --border:#18263a;
  --danger:#ffb03b;
}

*,
*::before,
*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 50% -160px,#182235 0,#05070b 55%);
  color:var(--ink);
}

.wrap{
  max-width:980px;
  margin:0 auto;
  padding:16px 18px 24px;
}

/* Header */
.top-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 16px;
  margin-bottom:18px;
}
.logo{
  font-weight:800;
  font-size:22px;
  letter-spacing:.08em;
}
.tagline{
  font-size:13px;
  color:var(--muted);
}

/* Hero */
.hero{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  background:linear-gradient(145deg,#0d1623,#05070b);
  border-radius:16px;
  padding:20px 18px;
  border:1px solid var(--border);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
}

.hero-main{
  flex:1 1 260px;
  min-width:0;
}

.hero-side{
  flex:0 0 260px;
  display:flex;
  justify-content:center;
  align-items:center;
}

h1{
  margin:0 0 10px;
  font-size:24px;
}
.lead{
  margin:0 0 16px;
  font-size:14px;
  color:var(--muted);
}

/* Buttons */
.cta-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}

.btn{
  border-radius:999px;
  padding:10px 18px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:700;
  letter-spacing:.03em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease,color .18s ease;
}

.btn.primary{
  background:linear-gradient(135deg,#3ba4ff,#7cd0ff);
  color:#04101f;
  box-shadow:0 10px 28px rgba(0,0,0,.6);
}
.btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 36px rgba(0,0,0,.75);
}
.btn.primary:active{
  transform:translateY(0);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}

.btn.primary[disabled]{
  cursor:default;
  opacity:.55;
  box-shadow:none;
}

.btn.ghost{
  background:rgba(4,10,20,.7);
  color:var(--ink);
  border-color:var(--border);
}
.btn.ghost:hover{
  background:#111a29;
  transform:translateY(-1px);
}
.btn.ghost:active{
  transform:translateY(0);
}

/* Status / note */
.status-msg{
  font-size:12px;
  margin:0 0 6px;
  color:var(--muted);
}
.status-msg.ok{
  color:#8fe388;
}
.status-msg.warn{
  color:var(--danger);
}
.note{
  font-size:12px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(9,18,32,.9);
  border:1px solid var(--border);
  color:var(--muted);
}

/* Phone mock */
.phone-shell{
  width:210px;
  height:410px;
  border-radius:32px;
  border:2px solid #222f45;
  padding:16px 10px;
  background:radial-gradient(circle at 10% 0%,#283b63 0,#05070b 55%);
  box-shadow:0 18px 50px rgba(0,0,0,.9);
  position:relative;
}
.phone-notch{
  position:absolute;
  top:11px;
  left:50%;
  transform:translateX(-50%);
  width:72px;
  height:16px;
  background:#05070b;
  border-radius:10px;
}
.phone-screen{
  width:100%;
  height:100%;
  border-radius:24px;
  background:linear-gradient(180deg,#060d16,#020509);
  padding:32px 14px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.screen-header{
  font-weight:700;
  font-size:14px;
  text-align:center;
}
.screen-list{
  list-style:none;
  padding-left:0;
  margin:0;
  font-size:11px;
  color:var(--muted);
}
.screen-list li{
  padding:5px 7px;
  border-radius:9px;
  background:rgba(22,35,58,.9);
  border:1px solid rgba(105,151,255,.35);
  margin-bottom:5px;
}

/* iOS card */
.ios-card{
  margin-top:18px;
  padding:14px 14px 12px;
  border-radius:14px;
  border:1px dashed var(--accent-soft);
  background:rgba(9,15,26,.9);
}
.ios-card h2{
  margin:0 0 8px;
  font-size:16px;
}
.ios-card ol{
  margin:0 0 6px;
  padding-left:18px;
  font-size:13px;
}
.ios-card li{
  margin:3px 0;
}
.muted{
  color:var(--muted);
  font-size:12px;
}

/* Footer */
.footer{
  margin-top:20px;
  text-align:center;
  font-size:11px;
  color:var(--muted);
}

/* Small screens */
@media (max-width:720px){
  .hero{
    padding:16px 14px;
  }
  .hero-side{
    order:-1;
  }
  h1{font-size:20px;}
}