:root{
  --bg:#061227;
  --bg2:#0a2340;
  --panel:rgba(31,63,93,.72);
  --panel2:rgba(35,75,105,.76);
  --line:#1886a5;
  --cyan:#23d6ee;
  --teal:#2dd8c7;
  --orange:#ff9f12;
  --coral:#ff6f7f;
  --text:#edf7ff;
  --muted:#9db2c8;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 80% 20%,rgba(25,133,165,.13),transparent 26rem),
    linear-gradient(180deg,#061127 0%,#08203a 60%,#07182b 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.28;
  background-image:radial-gradient(circle,rgba(71,224,219,.85) 0 1.4px,transparent 2px);
  background-size:210px 210px;
}
.road{
  position:fixed;
  left:-8vw; right:-8vw;
  height:120px;
  border-top:2px solid rgba(69,170,210,.12);
  border-radius:50%;
  pointer-events:none;
}
.road-a{top:21%;transform:rotate(-2deg)}
.road-b{bottom:15%;transform:rotate(3deg)}
.page{position:relative;width:min(930px,calc(100% - 24px));margin:0 auto;padding:28px 0 52px}
.hero{display:flex;gap:18px;align-items:center;padding:8px 2px}
.app-icon{
  width:88px;height:88px;border-radius:26px;
  box-shadow:0 0 0 1px rgba(35,214,238,.18),0 18px 44px rgba(0,0,0,.34)
}
.eyebrow{margin:0 0 6px;color:var(--cyan);font-size:.78rem;font-weight:900;letter-spacing:.16em}
.eyebrow.dark{color:#0e2237}
h1{margin:0;font-size:clamp(2.45rem,6vw,4rem);line-height:1.02;letter-spacing:-.04em}
.subtitle{margin:8px 0 0;color:var(--muted);font-size:1rem}
.effective{
  display:inline-flex;gap:10px;align-items:center;
  margin:18px 0 4px;padding:10px 14px;border-radius:999px;
  border:1px solid rgba(35,214,238,.28);background:rgba(16,44,72,.8);
  color:var(--muted)
}
.effective strong{color:var(--cyan)}
.card{
  display:grid;grid-template-columns:52px 1fr;gap:18px;
  margin:16px 0;padding:25px 26px;border-radius:30px;
  background:linear-gradient(145deg,rgba(45,83,116,.78),rgba(24,49,79,.78));
  border:1px solid rgba(61,147,175,.52);
  box-shadow:0 18px 38px rgba(0,0,0,.18);
  backdrop-filter:blur(12px)
}
.card.intro{border-color:rgba(35,214,238,.60)}
.card h2,.feature-card h2,.contact h2{margin:0 0 10px;font-size:1.3rem;letter-spacing:-.02em}
.card p,.feature-card p{margin:0 0 12px;color:var(--muted);line-height:1.72}
.card p:last-child,.feature-card p:last-child{margin-bottom:0}
.icon-chip{
  width:52px;height:52px;border-radius:18px;display:grid;place-items:center;
  font-weight:900;font-size:1.08rem;color:#051323;
  box-shadow:0 10px 24px rgba(0,0,0,.20)
}
.cyan{background:linear-gradient(135deg,#27dff5,#2d8cff)}
.teal{background:linear-gradient(135deg,#35dfcf,#23b8ab)}
.orange{background:linear-gradient(135deg,#ffb020,#ff7b11)}
a{color:var(--cyan);font-weight:800;text-decoration:none}
a:hover{text-decoration:underline}
.feature-card{
  position:relative;overflow:hidden;
  margin:16px 0;padding:25px 26px;border-radius:30px;
  background:linear-gradient(145deg,rgba(31,68,98,.84),rgba(24,47,76,.84));
  border:1px solid rgba(45,216,199,.55);
  box-shadow:0 18px 38px rgba(0,0,0,.18)
}
.feature-card.deletion{border-color:rgba(255,159,18,.50)}
.feature-card:after{
  content:"";position:absolute;inset:auto -70px -110px auto;width:220px;height:220px;border-radius:50%;opacity:.16;filter:blur(4px)
}
.feature-card.retention:after{background:var(--teal)}
.feature-card.deletion:after{background:var(--orange)}
.feature-topline{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:10px;
  font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)
}
.deletion .feature-topline{color:var(--orange)}
.route-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.04)}
.teal-dot{background:var(--teal)}
.orange-dot{background:var(--orange)}
.contact{
  margin-top:20px;padding:28px;border-radius:30px;
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(135deg,#20d8ee 0%,#35d7c7 55%,#ffab20 100%);
  color:#0b1d2e;box-shadow:0 20px 44px rgba(0,0,0,.20)
}
.contact p{margin:.35rem 0 0;line-height:1.6;color:#163149;max-width:620px}
.mail-btn{
  display:inline-flex;padding:14px 18px;border-radius:18px;background:#07182b;color:#fff;
  box-shadow:0 10px 24px rgba(4,18,35,.24)
}
footer{padding:24px 4px 0;color:#7f99b0;font-size:.88rem}
@media(max-width:640px){
  .page{width:min(100% - 18px,930px);padding-top:18px}
  .hero{gap:12px}
  .app-icon{width:68px;height:68px;border-radius:20px}
  h1{font-size:2.15rem}
  .subtitle{font-size:.94rem}
  .card{grid-template-columns:44px 1fr;gap:14px;padding:21px 18px;border-radius:24px}
  .icon-chip{width:44px;height:44px;border-radius:15px}
  .feature-card,.contact{padding:22px 18px;border-radius:24px}
  .mail-btn{width:100%;justify-content:center;text-align:center;word-break:break-all}
}