:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --text:#0b1220;
  --muted:#637184;
  --primary:#00c8d5;
  --ring:rgba(0,200,213,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 70% -10%, rgba(0,200,213,.14), rgba(0,200,213,0) 60%),
    linear-gradient(180deg, #f7fbfc, #fbfeff);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.shell{max-width:900px;margin:0 auto;padding:20px}

.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 18px;
  border:1px solid rgba(11,18,32,.06);
  border-radius:20px;
  background:color-mix(in srgb, var(--surface) 92%, white);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.05),
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 6px rgba(0,200,213,.04);
}

.brand{display:flex;gap:14px;align-items:center}
.brand-icon{
  width:64px;height:64px;border-radius:18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 0 0 4px rgba(0,200,213,.08);
  outline: 1px solid rgba(99,113,132,.1);
}
.brand-meta{display:flex;flex-direction:column}
.brand-title{margin:0;font-size:24px;line-height:1.1;letter-spacing:.2px}
.brand-sub{margin:2px 0 0 0;color:var(--muted);font-size:14px}

.ratings{text-align:right}
.score{font-weight:800;font-size:30px;line-height:1}
.stars{font-size:14px;letter-spacing:1px;color:#ffb400}
.count{font-size:12px;color:var(--muted)}

.hero{
  margin:22px 0 8px;
  position:relative;
  border:1px solid rgba(11,18,32,.06);
  border-radius:22px;
  padding:20px;
  background:linear-gradient(135deg, rgba(0,200,213,.08), rgba(0,200,213,.02));
  box-shadow:
    0 12px 40px rgba(0, 200, 213, .12),
    0 1px 0 rgba(255,255,255,.7) inset;
}
.badge{
  position:absolute;top:-12px;right:16px;
  background:rgba(0,200,213,.12);
  color:#006d73;border:1px solid rgba(0,200,213,.35);
  padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;
}

.cta{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:560px){.cta{grid-template-columns:1fr 1fr}}

.btn{
  appearance:none;border:none;border-radius:14px;
  padding:14px 16px;font-weight:800;font-size:16px;
  cursor:pointer;display:block;width:100%;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, outline-color .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  outline: 0 solid transparent;
}
.btn:active{transform:translateY(1px)}

.btn-primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, white), var(--primary));
  color:#012327;
}
.btn-primary:hover{filter:brightness(1.03)}
.btn-primary:focus-visible{outline: 4px solid color-mix(in srgb, var(--primary) 30%, transparent)}

.btn-surface{
  background:#ffffff;color:#0b1220;
  border:1px solid rgba(11,18,32,.06);
}
.btn-surface:hover{background:#fbfeff}
.btn-surface:focus-visible{outline: 4px solid rgba(0,200,213,.25)}

.w-full{width:100%}

.section{margin:22px 0}
.section-title{margin:0 0 12px 0;font-size:18px}

.card{
  background:linear-gradient(180deg, #ffffff, #fbfeff);
  border:1px solid rgba(11,18,32,.06);
  border-radius:18px;padding:16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.7) inset;
}
.list{margin:10px 0 0 18px;color:var(--muted)}
.list li{margin:6px 0}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:740px){.grid{grid-template-columns:1fr 1fr}}

.shots{
  display:flex;gap:12px;overflow:auto;padding-bottom:6px;scroll-snap-type:x mandatory;
  border-radius:18px;
}
.shots img{
  height:420px;border-radius:16px;flex-shrink:0;scroll-snap-align:start;
  box-shadow:0 16px 40px rgba(0,0,0,.1), 0 0 0 1px rgba(11,18,32,.06);
  background:#fff;
}
@media (max-width:420px){.shots img{height:320px}}

.reviews{display:grid;gap:12px}
.review{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid rgba(11,18,32,.06);border-radius:16px;padding:12px;
  background:linear-gradient(180deg, #ffffff, #fbfeff);
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.avatar{width:42px;height:42px;border-radius:12px;overflow:hidden;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.06)}
.avatar img{width:100%;height:100%;object-fit:cover}
.review-body{flex:1}
.review-head{display:flex;align-items:center;justify-content:space-between}
.mini-stars{font-size:13px;color:#ffb400}

.footer{margin:22px 0;color:var(--muted);text-align:center}

/* iOS guide modal */
.ios-guide{
  position:fixed;inset:0;background:rgba(0,0,0,.25);
  display:none;align-items:flex-end;justify-content:center;padding:24px;z-index:9999
}
.ios-card{
  background:#ffffff;border:1px solid rgba(11,18,32,.06);
  width:100%;max-width:520px;border-radius:18px 18px 0 0;
  padding:18px 16px 20px 16px;
  box-shadow:0 -12px 30px rgba(0,0,0,.12);
}
.ios-handle{width:56px;height:5px;background:#e6eef0;border-radius:999px;margin:0 auto 10px}
.ios-arrow{width:44px;height:44px;margin:8px auto 6px;position:relative}
.ios-arrow::after{
  content:"";display:block;width:28px;height:28px;
  border-left:3px solid var(--primary);border-bottom:3px solid var(--primary);
  transform:rotate(-45deg);margin:0 auto;animation:bounce 1s infinite
}
@keyframes bounce{0%{transform:translateY(0) rotate(-45deg)}50%{transform:translateY(-6px) rotate(-45deg)}100%{transform:translateY(0) rotate(-45deg)}}
.ios-steps{color:var(--muted);text-align:center}

/* Accessibility focus styles */
:focus-visible{
  outline: 4px solid rgba(0,200,213,.25);
  outline-offset: 1px;
}


/* ===== Dark theme =====
   Auto: users with dark OS/browser theme get this.
   Manual: add data-theme="dark" to <html> or <body> to force dark.
*/
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1218;
    --surface:#0f1723;
    --text:#e8f1f4;
    --muted:#a4b1c2;
    --primary:#00c8d5;
    --ring:rgba(0,200,213,.25);
  }
  body{
    color:var(--text);
    background:
      radial-gradient(1000px 600px at 70% -10%, rgba(0,200,213,.10), rgba(0,200,213,0) 60%),
      linear-gradient(180deg, #0b1218, #0e1520);
  }
  .topbar{
    border:1px solid rgba(255,255,255,.06);
    background:color-mix(in srgb, #0f1723 92%, black);
    backdrop-filter: saturate(180%) blur(8px);
    box-shadow:
      0 10px 30px rgba(0,0,0,.45),
      0 1px 0 rgba(255,255,255,.05) inset,
      0 0 0 6px rgba(0,200,213,.06);
  }
  .brand-sub,.count,.list,.footer,.ios-steps{color:var(--muted)}
  .hero{
    border:1px solid rgba(255,255,255,.06);
    background:linear-gradient(135deg, rgba(0,200,213,.12), rgba(0,200,213,.06));
    box-shadow:
      0 12px 40px rgba(0,0,0,.5),
      0 1px 0 rgba(255,255,255,.05) inset;
  }
  .badge{
    background:rgba(0,200,213,.12);
    color:#9ff2f7;border:1px solid rgba(0,200,213,.4);
  }
  .btn-surface{
    background:#101826;color:#dfe8ef;border:1px solid rgba(255,255,255,.08);
  }
  .btn-surface:hover{background:#0f1a2a}
  .card,.review{
    background:linear-gradient(180deg, #0f1825, #0b121a);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 8px 24px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;
  }
  .shots img{
    background:#0c1420;
    box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  }
  .mini-stars,.stars{color:#ffd36b}
}

/* Manual force: add data-theme="dark" to <html> or <body> */
[data-theme="dark"]{
  --bg:#0b1218;
  --surface:#0f1723;
  --text:#e8f1f4;
  --muted:#a4b1c2;
  --primary:#00c8d5;
  --ring:rgba(0,200,213,.25);
}
[data-theme="dark"] body{
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 70% -10%, rgba(0,200,213,.10), rgba(0,200,213,0) 60%),
    linear-gradient(180deg, #0b1218, #0e1520);
}
[data-theme="dark"] .topbar{
  border:1px solid rgba(255,255,255,.06);
  background:color-mix(in srgb, #0f1723 92%, black);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 6px rgba(0,200,213,.06);
}
[data-theme="dark"] .brand-sub,[data-theme="dark"] .count,[data-theme="dark"] .list,[data-theme="dark"] .footer,[data-theme="dark"] .ios-steps{color:var(--muted)}
[data-theme="dark"] .hero{
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(135deg, rgba(0,200,213,.12), rgba(0,200,213,.06));
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;
}
[data-theme="dark"] .badge{
  background:rgba(0,200,213,.12); color:#9ff2f7; border:1px solid rgba(0,200,213,.4);
}
[data-theme="dark"] .btn-surface{
  background:#101826;color:#dfe8ef;border:1px solid rgba(255,255,255,.08);
}
[data-theme="dark"] .btn-surface:hover{background:#0f1a2a}
[data-theme="dark"] .card,[data-theme="dark"] .review{
  background:linear-gradient(180deg, #0f1825, #0b121a);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;
}
[data-theme="dark"] .shots img{
  background:#0c1420;
  box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="dark"] .mini-stars,[data-theme="dark"] .stars{color:#ffd36b}