:root{
  color-scheme:dark;
  --bg:#0d1014;
  --panel:#151a20;
  --panel2:#1b2129;
  --text:#f5f8fc;
  --muted:#aab5c3;
  --muted2:#7f8b99;
  --line:#29323d;
  --blue:#1596db;
  --blue-soft:#79cfff;
  --green:#24c52f;
  --orange:#f38a12;
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 14% 0%, rgba(21,150,219,.14), transparent 31rem),
    radial-gradient(circle at 82% 2%, rgba(36,197,47,.07), transparent 25rem),
    radial-gradient(circle at 42% 100%, rgba(243,138,18,.055), transparent 32rem),
    var(--bg);
  font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.55;
  text-rendering:optimizeLegibility;
}

a{color:inherit}
img{max-width:100%}
.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}

header{
  height:68px;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:rgba(13,16,20,.8);
  backdrop-filter:blur(16px);
}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px;padding-inline:14px}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:650;
  font-size:18px;
  letter-spacing:-.02em;
}
.brand img{width:34px;height:34px;display:block}
nav{display:flex;align-items:center;gap:23px;color:#cbd5e1;font-size:14px}
nav a{text-decoration:none;transition:color .15s ease}
nav a:hover{color:white}
.nav-download{
  padding:8px 13px;
  border-radius:9px;
  color:white;
  background:rgba(21,150,219,.16);
  border:1px solid rgba(21,150,219,.42);
}
.nav-download:hover{background:rgba(21,150,219,.24)}

main{overflow:hidden}
section{scroll-margin-top:90px}

/* home */
.hero{
  padding:82px 0 55px;
  text-align:center;
}
.hero-logo{
  width:112px;
  height:112px;
  margin:0 auto 24px;
  filter:drop-shadow(0 18px 40px rgba(21,150,219,.13));
}
.eyebrow{
  color:var(--blue-soft);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
h1{
  max-width:920px;
  margin:16px auto 22px;
  font-size:clamp(44px,7.4vw,78px);
  line-height:.99;
  letter-spacing:-.055em;
  font-weight:720;
}
.gradient{
  background:linear-gradient(105deg,#fff 18%,#8cd8ff 60%,#8df094);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:48px;
}
.button{
  min-height:46px;
  padding:11px 19px;
  border-radius:10px;
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:650;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.button:hover{transform:translateY(-1px)}
.button.primary{
  background:var(--blue);
  border-color:#42b4ee;
  color:#fff;
  box-shadow:0 12px 28px rgba(21,150,219,.18);
}
.button.primary:hover{background:#1aa1e9}
.button.secondary{background:rgba(255,255,255,.035);color:#dce5ef}
.button.secondary:hover{background:rgba(255,255,255,.065);border-color:#3a4654}
.meta{
  display:flex;
  gap:9px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:24px;
}
.download-meta{justify-content:flex-start;margin-top:20px}
.pill{
  padding:7px 11px;
  border-radius:9px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.024);
  color:#cdd7e2;
  font-size:13px;
}
.shot{
  margin:56px auto 0;
  max-width:1080px;
  overflow:hidden;
  border:1px solid #35414f;
  border-radius:15px;
  background:#171a1e;
  box-shadow:0 34px 95px rgba(0,0,0,.42);
}
.shot img{display:block;width:100%;height:auto}
.section{padding:72px 0}
.section h2{
  margin:0 0 12px;
  font-size:clamp(30px,4vw,44px);
  letter-spacing:-.038em;
  line-height:1.08;
}
.section-intro{
  max-width:none;
  margin:0 0 35px;
  color:var(--muted);
  font-size:18px;
}
.families{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.family{
  position:relative;
  min-height:310px;
  padding:28px;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.016));
}
.family::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-100px;
  top:-110px;
  border-radius:50%;
  filter:blur(8px);
  opacity:.12;
}
.family.blue::after{background:var(--blue)}
.family.orange::after{background:var(--orange)}
.family.green::after{background:var(--green)}
.family img{width:94px;height:94px;display:block;margin-bottom:21px;position:relative;z-index:1}
.family h3{margin:0 0 9px;font-size:21px;letter-spacing:-.02em}
.family p{margin:0;color:var(--muted)}
.family.blue{border-top-color:rgba(21,150,219,.75)}
.family.orange{border-top-color:rgba(243,138,18,.75)}
.family.green{border-top-color:rgba(36,197,47,.72)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  min-height:175px;
  padding:24px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.dot{
  width:9px;
  height:9px;
  margin-right:8px;
  display:inline-block;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 16px rgba(21,150,219,.58);
}
.native-panel{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.022);
  padding:34px;
}
.native-panel p{max-width:none;margin:0 0 24px;color:var(--muted);font-size:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:8px 11px;
  border-radius:8px;
  border:1px solid #303a46;
  background:#151a20;
  color:#d6e0ea;
  font-size:13px;
}
.download-heading{max-width:820px}
.download-heading .section-intro{margin-bottom:35px}
.download-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.download-option{
  min-height:330px;
  padding:34px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.014));
}
.download-option.store-option{
  border-color:rgba(21,150,219,.42);
  background:
    radial-gradient(circle at 100% 0%,rgba(21,150,219,.12),transparent 18rem),
    linear-gradient(180deg,rgba(21,150,219,.055),rgba(255,255,255,.014));
}
.download-option.source-option{
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.045),transparent 18rem),
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
}
.download-option-label{
  margin-bottom:9px;
  color:var(--blue-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.source-option .download-option-label{color:#c3ced9}
.download-option h3{margin:0 0 10px;font-size:28px;letter-spacing:-.03em}
.download-option p{margin:0;color:var(--muted)}
.download-meta{justify-content:flex-start;margin-top:22px}
.download-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:28px}
.license-note{margin-top:13px!important;font-size:13px;color:var(--muted2)!important}

/* privacy */
.privacy-hero{padding:76px 0 34px;text-align:center}
.privacy-icon{
  width:88px;
  height:88px;
  margin:0 auto 22px;
  display:block;
  filter:drop-shadow(0 18px 40px rgba(21,150,219,.13));
}
.privacy-hero h1{
  margin:13px auto 14px;
  font-size:clamp(42px,7vw,66px);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:720;
}
.lede{max-width:760px;margin:0 auto;color:var(--muted);font-size:18px}
.effective{margin-top:16px;color:var(--muted2);font-size:13px}
.privacy-panel{
  max-width:900px;
  margin:22px auto 0;
  padding:38px 42px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.014)),
    rgba(21,26,32,.8);
  box-shadow:0 28px 80px rgba(0,0,0,.2);
}
.summary{
  padding:18px 20px;
  margin-bottom:34px;
  border:1px solid rgba(21,150,219,.28);
  border-radius:12px;
  background:rgba(21,150,219,.07);
  color:#dce8f4;
}
.summary strong{color:#fff}
.policy-section{padding:27px 0;border-top:1px solid rgba(255,255,255,.065)}
.policy-section:first-of-type{border-top:0;padding-top:0}
.policy-section h2{margin:0 0 10px;font-size:22px;line-height:1.2;letter-spacing:-.025em;font-weight:680}
.policy-section p{margin:0 0 13px;color:#c7d1dc}
.policy-section p:last-child{margin-bottom:0}
.policy-section ul{margin:10px 0 0;padding-left:22px;color:#c7d1dc}
.policy-section li{margin:7px 0}
.policy-section a{color:var(--blue-soft);text-underline-offset:3px}
.policy-section a:hover{color:#b9e8ff}
.small{color:var(--muted2)!important;font-size:13px}

footer{
  margin-top:72px;
  padding:38px 0 48px;
  border-top:1px solid rgba(255,255,255,.065);
  color:#84909d;
  font-size:13px;
}
footer .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer .links{display:flex;gap:18px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:#dce5ef}

:focus-visible{outline:2px solid #5bc4ff;outline-offset:3px}

@media(max-width:860px){
  .families,.grid{grid-template-columns:1fr}
  .family{min-height:auto}
  .download-options{grid-template-columns:1fr}
}
@media(max-width:700px){
  .wrap{width:min(100% - 26px,var(--max))}
  header{height:60px}
  nav a:not(.nav-download){display:none}
  .hero{padding-top:56px}
  .hero-logo{width:94px;height:94px}
  .section{padding:58px 0}
  .download-option{min-height:0;padding:28px}
  .native-panel{padding:28px}
  .privacy-hero{padding-top:52px}
  .privacy-icon{width:78px;height:78px}
  .privacy-panel{padding:28px 22px}
  h1{font-size:clamp(40px,12vw,58px)}
}