:root{
  --bg0:#070b14;
  --bg1:#0b1220;
  --fg0:#e9efff;
  --fg1:#b9c4e5;
  --muted:#93a3cf;
  --line:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.04);
  --shadow: 0 16px 50px rgba(0,0,0,.45);
  --glowA: rgba(90, 140, 255, .22);
  --glowB: rgba(64, 235, 190, .14);
  --true: #44d19e;
  --false:#ff5b6e;
  --unclear:#ffd166;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 900px at 15% 10%, rgba(60,120,255,.14), transparent 60%),
              radial-gradient(900px 700px at 85% 20%, rgba(70,230,190,.10), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--fg0);
  overflow-x:hidden;
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #d7e2ff;
}

.container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

.bg{position:fixed;inset:0;pointer-events:none;z-index:-1}
.bg__grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(900px 420px at 50% 0%, black 25%, transparent 70%);
  opacity:.55;
}
.bg__glow{
  position:absolute;
  width:860px;height:860px;
  filter: blur(40px);
  opacity:.95;
}
.bg__glow--a{left:-220px;top:-260px;background:radial-gradient(circle at 30% 30%, var(--glowA), transparent 62%)}
.bg__glow--b{right:-240px;top:-180px;background:radial-gradient(circle at 60% 35%, var(--glowB), transparent 62%)}

.header{
  position:sticky;top:0;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,11,20,.78), rgba(7,11,20,.40));
  border-bottom:1px solid var(--line);
  z-index:10;
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}

.brand{display:flex;gap:12px;align-items:center}
.brand__mark{
  width:40px;height:40px;border-radius:12px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 45%),
    linear-gradient(135deg, rgba(70,140,255,.9), rgba(60,230,190,.65));
  box-shadow: 0 12px 30px rgba(60,120,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#071022;
}
.brand__name{font-weight:750;letter-spacing:.2px}
.brand__tag{font-size:12px;color:var(--muted);margin-top:2px}
.brand--small .brand__mark{width:34px;height:34px;border-radius:11px}
.brand--small .brand__tag{opacity:.9}

.nav{display:flex;gap:18px;align-items:center}
.nav__link{
  color:var(--fg1);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  opacity:.92;
}
.nav__link:hover{color:var(--fg0)}
.nav__link--cta{
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background: rgba(255,255,255,.05);
}

.main{padding: 38px 0 0}
.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:34px;
  align-items:start;
  padding: 34px 0 18px;
}
.hero__title{
  margin:0;
  font-size: clamp(32px, 3.4vw, 54px);
  line-height:1.05;
  letter-spacing:-.6px;
}
.hero__titleAccent{
  display:inline-block;
  background: linear-gradient(90deg, rgba(90,160,255,1), rgba(70,230,190,1));
  -webkit-background-clip: text;
  background-clip:text;
  color:transparent;
}
.hero__subtitle{
  margin:16px 0 0;
  color:var(--fg1);
  font-size:16px;
  line-height:1.65;
  max-width: 58ch;
}
.hero__cta{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  font-weight:750;
  font-size:14px;
  letter-spacing:.15px;
  text-decoration:none;
  border:1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  user-select:none;
}
.btn--primary{
  border-color: rgba(90,160,255,.40);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 45%),
    linear-gradient(135deg, rgba(90,160,255,.95), rgba(70,230,190,.78));
  color:#061021;
}
.btn--primary:hover{filter:saturate(1.06) brightness(1.03)}
.btn--ghost{
  background: rgba(255,255,255,.05);
  color:var(--fg0);
}
.btn--ghost:hover{background: rgba(255,255,255,.07)}
.btn--wide{width:100%}

.hero__stats{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.stat{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:16px;
  padding:12px 12px;
  box-shadow: var(--shadow);
}
.stat__k{font-weight:900;font-size:16px}
.stat__v{color:var(--muted);font-size:12px;margin-top:4px}

.hero__panel .panel{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-radius:20px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel__top{
  padding:14px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}
.dots{display:flex;gap:6px}
.dots span{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.16)}
.panel__title{font-weight:750;color:var(--fg1);font-size:13px}
.panel__body{padding:14px 14px 16px}
.panel__note{margin-top:12px;color:var(--muted);font-size:12px}

.toastPreview{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px 12px;
  margin-top:10px;
}
.toastPreview:first-child{margin-top:0}
.toastPreview__badge{
  font-weight:900;
  font-size:11px;
  letter-spacing:.8px;
  padding:6px 9px;
  border-radius:999px;
  color:#071022;
  background: rgba(255,255,255,.9);
}
.toastPreview--true .toastPreview__badge{background: color-mix(in oklab, var(--true), white 18%)}
.toastPreview--false .toastPreview__badge{background: color-mix(in oklab, var(--false), white 18%)}
.toastPreview--unclear .toastPreview__badge{background: color-mix(in oklab, var(--unclear), white 18%)}
.toastPreview__text{color:var(--fg0);font-weight:650;line-height:1.45}
.muted{color:var(--muted);font-weight:600}

.meterPreview{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px 12px;
  margin-bottom: 10px;
}
.meterPreview__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.meterPreview__title{
  font-weight:900;
  font-size:12px;
  color: rgba(240,246,255,.92);
}
.meterPreview__counts{
  font-weight:850;
  font-size:11px;
  color: var(--fg1);
  white-space: nowrap;
}
.meterPreview__counts .t{color: color-mix(in oklab, var(--true), white 15%)}
.meterPreview__counts .f{color: color-mix(in oklab, var(--false), white 15%)}
.meterPreview__counts .sep{opacity:.7; padding: 0 6px}
.meterPreview__bar{
  position:relative;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  margin-top: 10px;
}
.meterPreview__fill{
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--false) 0%, var(--unclear) 50%, var(--true) 100%);
  opacity:.95;
}
.meterPreview__marker{
  position:absolute;
  top:-3px;
  width:5px;
  height:16px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.92);
  border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.32), 0 0 0 7px rgba(90,160,255,.14);
}

/* Privacy policy page */
.policy{display:grid;gap:12px}
.policy__card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, var(--card), var(--card2));
  border-radius:18px;
  padding:14px 14px 16px;
  box-shadow: var(--shadow);
}
.policy__k{color:var(--muted);font-weight:900;font-size:12px;letter-spacing:.4px;text-transform:uppercase}
.policy__v{margin-top:8px;color:rgba(233,239,255,.92);line-height:1.65;font-weight:600}
.policy__list{margin:8px 0 0 18px;padding:0}
.policy__list li{margin:6px 0}
.policy__link{color: rgba(130,190,255,.95);text-decoration:none;font-weight:800}
.policy__link:hover{text-decoration:underline}

.featureGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}

.section{padding: 44px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.section__title{margin:0;font-size:24px;letter-spacing:-.25px}
.section__subtitle{margin:0;color:var(--fg1);max-width:70ch;line-height:1.6}

.steps{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, var(--card), var(--card2));
  border-radius:18px;
  padding:14px 14px 16px;
  box-shadow: var(--shadow);
}
.featureIcon{
  --a: rgba(90,160,255,.55);
  --b: rgba(70,230,190,.30);
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 65% 70%, var(--b), transparent 60%),
    linear-gradient(135deg, color-mix(in oklab, var(--a), transparent 70%), rgba(255,255,255,.02));
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  color: rgba(232,240,255,.96);
}
.featureIcon svg{
  width: 20px;
  height: 20px;
}

/* Meaningful color accents (professional, not emoji) */
.featureIcon--toasts{
  --a: rgba(255, 209, 102, .60); /* amber */
  --b: rgba(90, 160, 255, .28);  /* blue */
  color: rgba(255, 236, 198, .96);
}
.featureIcon--meter{
  --a: rgba(68, 209, 158, .55); /* green */
  --b: rgba(255, 91, 110, .22); /* red */
  color: rgba(210, 255, 240, .96);
}
.featureIcon--audio{
  --a: rgba(90, 160, 255, .58); /* blue */
  --b: rgba(122, 166, 255, .18);
  color: rgba(220, 232, 255, .96);
}
.featureIcon--control{
  --a: rgba(70, 230, 190, .45); /* teal */
  --b: rgba(90, 160, 255, .20);
  color: rgba(210, 255, 245, .96);
}
.card__icon{
  width:32px;height:32px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  font-weight:900;
}
.card__title{margin-top:10px;font-weight:850}
.card__text{margin-top:8px;color:var(--fg1);line-height:1.65}

.privacy{
  margin-top:18px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.privacy__item{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap:14px;
  padding:14px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.privacy__item:first-child{border-top:none}
.privacy__k{color:var(--muted);font-weight:800}
.privacy__v{color:var(--fg1);line-height:1.65}

.download{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-radius:22px;
  padding:16px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  box-shadow: var(--shadow);
}
.download__content{padding:4px}
.download__foot{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.pill{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:10px 10px;
  border-radius:999px;
  color:var(--fg1);
  font-weight:650;
  font-size:12px;
}
.pill strong{color:var(--fg0)}

.mini{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:18px;
  padding:14px 14px 16px;
}
.mini__title{font-weight:900}
.mini__text{margin-top:8px;color:var(--fg1);line-height:1.65}
.mini__text ul{margin:8px 0 0;padding-left:18px}
.mini__code{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius:14px;
  padding:12px;
}

.footer{
  margin-top: 24px;
  border-top:1px solid var(--line);
  background: rgba(7,11,20,.55);
  backdrop-filter: blur(10px);
}
.footer__inner{padding:18px 0;display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.footer__link{color:var(--fg1);text-decoration:none;font-weight:700;font-size:13px}
.footer__link:hover{color:var(--fg0)}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr;gap:18px}
  .steps{grid-template-columns:1fr}
  .featureGrid{grid-template-columns:1fr}
  .download{grid-template-columns:1fr}
  .privacy__item{grid-template-columns:1fr}
  .nav{display:none}
  .hero__stats{grid-template-columns:1fr}
}