:root{
  --bg: #000000;
  --panelA: #0a0a0a;
  --panelB: #111111;
  --panelC: #161616;
  --text: #ffffff;
  --muted: #a1a1a6;
  --accent: #2997ff;
  --border: rgba(255,255,255,0.08);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 30px 90px rgba(0,0,0,0.55);

  --container: min(1180px, calc(100% - 56px));
  --ease-out: cubic-bezier(.2,.9,.2,1);
  --ease-inout: cubic-bezier(.6,0,.2,1);
}

*{box-sizing:border-box}
html,body{
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit}

.skip{
  position:absolute;
  left:16px;
  top:16px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.1);
  border:1px solid var(--border);
  transform:translateY(-140%);
  transition:transform .2s var(--ease-out);
  z-index:9999;
}
.skip:focus{transform:translateY(0)}

.container{width:var(--container); margin:0 auto}

/* Smooth scroll shell */
[data-smooth-root]{position:relative}
[data-smooth-content]{will-change:transform}

/* Top navigation */
.navWrap{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  background:rgba(0,0,0,0.55);
  border-bottom:1px solid var(--border);
}
.nav{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:var(--container);
  margin:0 auto;
  gap:18px;
}
.brand{display:flex; align-items:center; gap:10px; min-width:max-content}
.brandMark{
  width:22px; height:22px; border-radius:6px;
}
.brandText{font-weight:600; letter-spacing:-0.01em}

.navLinks{display:flex; gap:18px; align-items:center}
.navLink{
  font-size:13px;
  color:rgba(255,255,255,0.85);
  padding:10px 6px;
  border-radius:10px;
  transition:background .2s var(--ease-out), color .2s var(--ease-out);
}
.navLink:hover{background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.95)}

.navRight{display:flex; align-items:center; gap:10px}
.navMenu{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  display:none;
  align-items:center;
  justify-content:center;
}
.navMenuLines{
  width:16px; height:10px; position:relative; display:block;
}
.navMenuLines:before,.navMenuLines:after{
  content:"";
  position:absolute; left:0; right:0;
  height:1px;
  background:rgba(255,255,255,0.7);
}
.navMenuLines:before{top:1px}
.navMenuLines:after{bottom:1px}

.navDrawer{
  display:none;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.82);
}
.navDrawerInner{width:var(--container); margin:0 auto; padding:12px 0 16px; display:flex; flex-direction:column; gap:8px}
.navDrawerLink{
  padding:12px 10px;
  border-radius:12px;
  color:rgba(255,255,255,0.92);
  border:1px solid transparent;
}
.navDrawerLink:hover{background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.05)}
.navDrawer[data-open="true"]{display:block}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.92);
  transition:transform .18s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out);
  will-change:transform;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12)}
.btn:active{transform:translateY(0)}
.btnPrimary{
  background:linear-gradient(180deg, rgba(41,151,255,0.95), rgba(41,151,255,0.72));
  border-color:rgba(41,151,255,0.35);
  color:#071320;
  font-weight:650;
}
.btnPrimary:hover{background:linear-gradient(180deg, rgba(41,151,255,1), rgba(41,151,255,0.8))}
.btnGhost{background:rgba(255,255,255,0.02)}
.btnLarge{height:44px; padding:0 18px; font-size:14px}
.btnXL{height:52px; padding:0 22px; font-size:15px}

/* Type */
.eyebrow{
  margin:0 0 12px;
  font-size:12px;
  color:rgba(255,255,255,0.78);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.h2{
  margin:0;
  font-size: clamp(34px, 4.6vw, 56px);
  letter-spacing:-0.03em;
  line-height:1.05;
}
.p{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.5;
  font-size:16px;
  max-width:60ch;
}
.lead{font-size:18px; line-height:1.55}
.kicker{
  margin:0;
  color:rgba(255,255,255,0.85);
  letter-spacing:-0.02em;
  font-size: clamp(16px, 2vw, 20px);
}
.center{text-align:center}

/* Hero */
.hero{
  position:relative;
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(41,151,255,0.22), rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 20% 10%, rgba(255,255,255,0.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #000, #000);
  min-height:140vh;
}
.heroSticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  gap:48px;
  padding:64px 0 28px;
}
.heroTitle{
  margin:0;
  font-size: clamp(52px, 7vw, 92px);
  letter-spacing:-0.05em;
  line-height:0.95;
}
.heroSubhead{
  margin:18px 0 0;
  font-size: clamp(18px, 2.2vw, 24px);
  color:rgba(255,255,255,0.92);
  letter-spacing:-0.02em;
}
.heroDesc{margin-top:14px}
.heroActions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.heroMeta{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.metaPill{
  display:inline-flex; align-items:center; gap:10px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  color:rgba(255,255,255,0.78);
  font-size:13px;
}
.metaDot{
  width:8px; height:8px; border-radius:99px;
  background:rgba(255,255,255,0.25);
  box-shadow:0 0 0 3px rgba(255,255,255,0.06);
}
.metaDotBlue{
  background:rgba(41,151,255,0.85);
  box-shadow:0 0 0 3px rgba(41,151,255,0.18);
}

.heroVisual{position:relative}
.laptop{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  transform-origin:50% 65%;
  filter: drop-shadow(0 35px 80px rgba(0,0,0,0.75));
}
.laptopGlow{
  position:absolute;
  inset:-60px;
  background: radial-gradient(60% 45% at 50% 40%, rgba(41,151,255,0.25), rgba(41,151,255,0) 65%);
  transform:translateZ(0);
  pointer-events:none;
}
.heroFade{
  position:absolute;
  left:0; right:0; bottom:0;
  height:120px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,1));
}

/* Sections */
.section{padding:110px 0}
.intro{padding:82px 0 90px; background:linear-gradient(180deg, #000, var(--panelA))}
.introGrid{display:grid; grid-template-columns: 1.2fr 0.8fr; gap:34px; margin-top:14px; align-items:start}

.feature{position:relative; border-top:1px solid var(--border)}
.feature:before,
.newtab:before,
.privacy:before,
.platform:before,
.download:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: calc(var(--sectionGlow, 0) * 0.55);
  background:
    radial-gradient(700px 420px at 20% 10%, rgba(41,151,255,0.18), rgba(0,0,0,0) 65%),
    radial-gradient(760px 520px at 80% 20%, rgba(255,255,255,0.07), rgba(0,0,0,0) 70%);
  transition: opacity .2s var(--ease-out);
}
.feature > .container,
.newtab > .container,
.privacy > .container,
.platform > .container,
.download > .container{position:relative}
.featureA{background:linear-gradient(180deg, var(--panelA), var(--panelB))}
.featureB{background:linear-gradient(180deg, var(--panelB), var(--panelC))}
.featureC{background:linear-gradient(180deg, var(--panelC), var(--panelB))}
.featureD{background:linear-gradient(180deg, var(--panelB), var(--panelA))}

.featureGrid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items:center;
  gap:52px;
}
.featureGrid.reverse{grid-template-columns: 1.1fr 0.9fr}
.featureGrid.reverse .featureCopy{order:2}
.featureCopy{max-width:520px}
.featureMedia{position:relative}
.shot{
  width:100%;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  box-shadow: var(--shadow-soft);
}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.chip{
  height:32px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  color:rgba(255,255,255,0.82);
  font-size:13px;
}

/* New tab */
.newtab{
  background:
    radial-gradient(900px 600px at 70% 10%, rgba(41,151,255,0.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--panelA), #000);
  border-top:1px solid var(--border);
}
.newtabHeader{display:flex; align-items:flex-end; justify-content:space-between; gap:34px}
.newtabHeader .p{max-width:58ch}
.newtabMedia{margin-top:38px; position:relative}
.floatShot{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow: 0 60px 140px rgba(0,0,0,0.7);
  background:rgba(255,255,255,0.02);
}

/* Privacy */
.privacy{background:linear-gradient(180deg, #000, var(--panelB)); border-top:1px solid var(--border)}
.privacyGrid{display:grid; grid-template-columns: 1fr 1fr; gap:54px; align-items:start}
.privacyList{display:flex; flex-direction:column; gap:14px}
.privacyRow{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 16px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
}
.privacyIcon{
  width:34px; height:34px; border-radius:12px;
  flex:0 0 auto;
}

.privacyTitle{font-weight:650; letter-spacing:-0.02em}
.privacyDesc{color:var(--muted); margin-top:4px; line-height:1.4}

/* Platform */
.platform{background:linear-gradient(180deg, var(--panelB), #000); border-top:1px solid var(--border)}
.platformHeader{display:flex; align-items:flex-end; justify-content:space-between; gap:34px}
.platformGrid{
  margin-top:36px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
.device{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  padding:22px;
}
.deviceLabel{
  margin-top:14px;
  color:rgba(255,255,255,0.86);
  font-weight:650;
  letter-spacing:-0.02em;
}
.deviceImg{width:100%}

/* Download */
.download{background:linear-gradient(180deg, #000, var(--panelA)); border-top:1px solid var(--border)}
.downloadInner{padding:24px 0 10px}
.downloadActions{display:flex; justify-content:center; margin-top:22px}
.downloadMeta{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.downloadPill{
  min-width:220px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  gap:18px;
}
.downloadKey{color:rgba(255,255,255,0.70); font-size:13px}
.downloadVal{color:rgba(255,255,255,0.92); font-size:13px; font-weight:650}

/* Footer */
.footer{border-top:1px solid var(--border); background:#000; padding:30px 0 42px}
.footerInner{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap}
.footerBrand{display:flex; gap:12px; align-items:center}
.footerLogo{
  width:22px; height:22px; border-radius:6px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(41,151,255,0.55), rgba(41,151,255,0) 65%), rgba(255,255,255,0.03);
  border:1px solid var(--border);
}
.footerName{font-weight:650; letter-spacing:-0.02em}
.footerFine{color:var(--muted); font-size:13px; margin-top:2px}
.footerLinks{display:flex; gap:14px; flex-wrap:wrap}
.footerLink{color:rgba(255,255,255,0.78); font-size:13px; padding:8px 10px; border-radius:12px}
.footerLink:hover{background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.90)}
.footerMeta{margin-left:auto}
.footerTag{
  height:32px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  color:rgba(255,255,255,0.78);
  font-size:13px;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.modal[data-open="true"]{display:flex}
.modalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.62);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.modalPanel{
  position:relative;
  width:min(560px, calc(100% - 32px));
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(18,18,18,0.95), rgba(10,10,10,0.92));
  box-shadow: 0 70px 160px rgba(0,0,0,0.75);
  overflow:hidden;
}
.modalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--border);
}
.modalTitle{font-weight:750; letter-spacing:-0.02em}
.modalClose{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.82);
}
.modalBody{padding:16px}
.modalP{margin:0; color:rgba(255,255,255,0.86); line-height:1.5}
.modalCallout{
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(41,151,255,0.22);
  background:rgba(41,151,255,0.08);
  padding:14px 14px;
}
.modalCalloutTitle{font-weight:700; letter-spacing:-0.02em}
.modalCalloutDesc{margin-top:6px; color:rgba(255,255,255,0.80); line-height:1.45}
.modalActions{display:flex; justify-content:flex-end; margin-top:16px}

/* Reveal animations */
[data-reveal]{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.isIn [data-reveal].in{
  opacity:1;
  transform: translateY(0);
}
.in{opacity:1 !important; transform: translateY(0) !important}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none; transition:none}
  .btn{transition:none}
  [data-smooth-content]{transform:none !important}
}

/* Responsive */
@media (max-width: 920px){
  .navLinks{display:none}
  .navMenu{display:flex}
  .heroGrid{grid-template-columns:1fr; gap:26px; padding-top:46px}
  .heroCopy{max-width:680px}
  .introGrid{grid-template-columns:1fr}
  .featureGrid,.featureGrid.reverse{grid-template-columns:1fr}
  .featureGrid.reverse .featureCopy{order:0}
  .newtabHeader,.platformHeader{flex-direction:column; align-items:flex-start}
  .privacyGrid{grid-template-columns:1fr}
  .platformGrid{grid-template-columns:1fr}
  .footerMeta{margin-left:0}
}

@media (max-width: 520px){
  :root{ --container: calc(100% - 32px); }
  .section{padding:86px 0}
  .btnXL{width:100%}
  .downloadPill{min-width:unset; width:100%}
}