/* ScanCove — shared design system
   iOS / glassmorphism, light, blue #0A84FF */
:root{
  --blue:#0a84ff; --blue-d:#0062cc; --blue-soft:#eaf3ff; --blue-soft2:#dcebff;
  --ink:#0e1216; --ink2:#39424c; --sub:#6a727c; --faint:#9aa1ab;
  --line:#e7eaef; --line2:#eef1f5;
  --bg:#f4f6fa; --bg2:#eef2f7; --card:#ffffff;
  --green:#1f9d57; --green-soft:#e7f6ee;
  --purple:#7b5cff; --purple-soft:#eee9ff;
  --orange:#f08a3c; --orange-soft:#fdeede;
  --gold:#b8902f; --gold-2:#caa24a; --gold-soft:#f7efda;
  --glass:rgba(255,255,255,.72);
  --r:16px; --r-md:20px; --r-lg:28px; --r-xl:34px;
  --sh-sm:0 1px 2px rgba(16,26,40,.05);
  --sh:0 2px 6px rgba(16,26,40,.05), 0 18px 40px rgba(16,26,40,.07);
  --sh-lg:0 8px 18px rgba(16,26,40,.07), 0 40px 80px rgba(16,26,40,.10);
  --maxw:1180px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK SC", "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5; letter-spacing:-0.003em;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.hidden{display:none !important;}

/* ---------- background wash ---------- */
.page-bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(900px 520px at 78% -8%, #e3eeff 0%, rgba(227,238,255,0) 60%),
    radial-gradient(760px 480px at 8% 4%, #eaf1ff 0%, rgba(234,241,255,0) 55%),
    linear-gradient(180deg,#f6f8fc 0%, #f3f6fa 100%);
}

/* ---------- header ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--glass); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(231,234,239,.9);
}
.nav-in{display:flex; align-items:center; gap:28px; height:64px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.02em;}
.brand img{width:32px; height:32px; border-radius:9px;}
.brand .b2{color:var(--blue);}
.nav-links{display:flex; align-items:center; gap:6px; margin-left:8px;}
.nav-links a{
  font-size:15px; font-weight:500; color:var(--ink2); padding:8px 13px; border-radius:10px; white-space:nowrap;
  transition:background .15s, color .15s;
}
.nav-links a:hover{background:rgba(10,132,255,.08); color:var(--blue);}
.nav-links a.active{color:var(--blue); font-weight:600;}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:12px;}

/* language switcher */
.lang{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--ink2);
  background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:11px; padding:8px 12px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.lang-btn:hover{border-color:#cfd6df;}
.lang-btn svg{width:16px; height:16px; opacity:.7;}
.lang-btn .chev{width:12px; height:12px; opacity:.5;}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); width:210px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-lg);
  padding:7px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s; z-index:60;
  max-height:70vh; overflow:auto;
}
.lang-menu.open{opacity:1; visibility:visible; transform:translateY(0);}
.lang-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  background:none; border:none; font:inherit; font-size:14.5px; color:var(--ink2);
  padding:9px 11px; border-radius:10px; cursor:pointer; text-align:left;
}
.lang-menu button:hover{background:var(--bg2);}
.lang-menu button.sel{color:var(--blue); font-weight:600;}
.lang-menu button .tick{width:15px; height:15px; opacity:0;}
.lang-menu button.sel .tick{opacity:1;}
.lang-menu .nat{color:var(--faint); font-size:12.5px;}
.lang-menu button.sel .nat{color:var(--blue);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font:inherit; font-weight:600; cursor:pointer; border:none; transition:transform .12s, box-shadow .15s, background .15s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--blue); color:#fff; padding:12px 22px; border-radius:13px; font-size:15px; box-shadow:0 6px 18px rgba(10,132,255,.30);}
.btn-primary:hover{background:#0a78e8;}
.btn-ghost{background:rgba(255,255,255,.7); color:var(--ink); padding:12px 20px; border-radius:13px; font-size:15px; border:1px solid var(--line);}
.btn-ghost:hover{border-color:#cfd6df;}
.btn-lg{padding:15px 30px; font-size:16.5px; border-radius:15px;}
.btn-sm{padding:8px 16px; font-size:14px; border-radius:11px;}

/* App Store badge */
.appstore{
  display:inline-flex; align-items:center; gap:11px; background:#000; color:#fff;
  padding:11px 18px 11px 16px; border-radius:14px; transition:transform .12s, opacity .15s;
}
.appstore:hover{opacity:.88;}
.appstore:active{transform:translateY(1px);}
.appstore svg{width:26px; height:26px;}
.appstore .as-t{display:flex; flex-direction:column; line-height:1.15; text-align:left;}
.appstore .as-t small{font-size:10.5px; opacity:.85; font-weight:400; letter-spacing:.02em;}
.appstore .as-t b{font-size:18px; font-weight:600; letter-spacing:-.01em;}
.appstore.soon{background:#1b1f24;}
.soon-tag{font-size:11px; font-weight:700; color:var(--blue); background:var(--blue-soft); padding:4px 9px; border-radius:7px; letter-spacing:.02em;}

/* ---------- section primitives ---------- */
section{position:relative;}
.sec{padding:88px 0;}
.sec-tight{padding:64px 0;}
.kicker{font-size:13px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue);}
.h-sec{font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-.025em; line-height:1.08;}
.lede{font-size:clamp(16px,1.6vw,18.5px); color:var(--sub); line-height:1.6;}
.center{text-align:center;}
.sec-head{max-width:680px; margin:0 auto 52px;}
.sec-head .kicker{margin-bottom:14px; display:block;}
.sec-head .h-sec{margin-bottom:16px;}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh); }
.glass-card{background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.7); box-shadow:var(--sh);}

/* feature tile icon */
.ico{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; flex:none;}
.ico svg{width:27px; height:27px;}
.ico.blue{background:linear-gradient(160deg,#4aa3ff,#0a78f0); color:#fff;}
.ico.green{background:linear-gradient(160deg,#3fcf86,#1f9d57); color:#fff;}
.ico.purple{background:linear-gradient(160deg,#9b85ff,#7b5cff); color:#fff;}
.ico.orange{background:linear-gradient(160deg,#ffb066,#f08a3c); color:#fff;}
.ico.gold{background:linear-gradient(160deg,#e2c478,#b8902f); color:#fff;}
.ico.teal{background:linear-gradient(160deg,#4fd6d0,#1aa9a3); color:#fff;}
.ico.soft{box-shadow:none;}
.ico.blue.soft{background:var(--blue-soft); color:var(--blue);}
.ico.green.soft{background:var(--green-soft); color:var(--green);}
.ico.purple.soft{background:var(--purple-soft); color:var(--purple);}
.ico.orange.soft{background:var(--orange-soft); color:var(--orange);}

/* ---------- phone frame ---------- */
.phone{
  position:relative; width:var(--pw,300px); aspect-ratio:853/1844;
  background:#0c0f13; border-radius:calc(var(--pw,300px) * .14);
  padding:calc(var(--pw,300px) * .032);
  box-shadow:0 6px 16px rgba(16,26,40,.10), 0 26px 56px rgba(16,26,40,.14);
}
.phone .screen{width:100%; height:100%; border-radius:calc(var(--pw,300px) * .108); overflow:hidden; background:#fff; position:relative;}
.phone .screen img{width:100%; height:100%; object-fit:cover; object-position:top;}
.phone .notch{
  position:absolute; top:calc(var(--pw,300px) * .052); left:50%; transform:translateX(-50%);
  width:34%; height:calc(var(--pw,300px) * .058); background:#0c0f13; border-radius:99px; z-index:3;
}

/* ---------- footer ---------- */
.footer{background:#0d1117; color:#aeb6c0; padding:64px 0 38px; margin-top:40px;}
.footer .ft-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer .brand{color:#fff; margin-bottom:14px;}
.footer .ft-tag{font-size:14px; line-height:1.6; max-width:300px; color:#8b94a0;}
.footer h5{color:#fff; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.footer ul a{font-size:14.5px; color:#aeb6c0; transition:color .15s;}
.footer ul a:hover{color:#fff;}
.footer .ft-bottom{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:26px; flex-wrap:wrap;}
.footer .ft-bottom small{font-size:13px; color:#79828e;}
.footer .ft-email{color:#5db0ff;}
.footer .ft-lang{display:flex; align-items:center; gap:8px; font-size:14px;}
.footer .ft-lang select{
  background:rgba(255,255,255,.06); color:#cfd6df; border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:8px 12px; font:inherit; font-size:14px; cursor:pointer;
}

/* ---------- mobile nav ---------- */
.burger{display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.6); cursor:pointer; align-items:center; justify-content:center;}
.burger svg{width:20px; height:20px;}
.mobile-menu{display:none;}

@media (max-width:880px){
  .nav-links{
    display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:4px;
    background:var(--card); border-bottom:1px solid var(--line); padding:14px 20px 20px; box-shadow:var(--sh);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:13px 14px; font-size:16px;}
  .burger{display:flex;}
  .nav-right .btn-primary, .nav-right .appstore{display:none;}
  .footer .ft-top{grid-template-columns:1fr 1fr; gap:30px;}
  .footer .ft-brandcol{grid-column:1 / -1;}
}
@media (max-width:560px){
  .container{padding:0 20px;}
  .sec{padding:62px 0;}
  .footer .ft-top{grid-template-columns:1fr;}
  .footer .ft-bottom{flex-direction:column; align-items:flex-start;}
}