:root{
  --night:#161019;--night-2:#1F1724;--night-3:#2A2032;
  --line:#3A2E44;--line-2:#4A3B56;
  --vellum:#EDE6DA;--vellum-2:#B9AEC0;--vellum-3:#7E7189;
  --brass:#C89B4C;--brass-dim:#7C6234;--brass-glow:rgba(200,155,76,.13);
  --verd:#5E9B8C;--madder:#B4566A;
  --disp:Georgia,"Iowan Old Style","Times New Roman",serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"SF Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--night);color:var(--vellum);font-family:var(--ui);
  background-image:radial-gradient(110% 60% at 50% -8%,#251B2E 0%,var(--night) 60%);
  background-attachment:fixed;min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{max-width:600px;width:100%;margin:0 auto;padding:44px 20px 60px}

/* ── шапка ── */
header{text-align:center;margin-bottom:34px}
.mark{width:54px;height:54px;margin:0 auto 18px;display:block}
.mark path,.mark circle{stroke:var(--brass);fill:none;stroke-width:1.1;
  stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.7s cubic-bezier(.4,0,.2,1) forwards}
.mark path:nth-child(2){animation-delay:.35s}
.mark circle{animation-delay:.75s;stroke-dasharray:40;stroke-dashoffset:40}
@keyframes draw{to{stroke-dashoffset:0}}
h1{font:400 44px/.94 var(--disp);letter-spacing:.02em;margin:0 0 12px}
.tag{font:15.5px/1.6 var(--ui);color:var(--vellum-2);margin:0 auto;max-width:33ch}

/* ── счётчики ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:28px 0 8px}
.stat{background:var(--night-2);padding:14px 8px;text-align:center}
.stat b{display:block;font:400 27px/1 var(--disp);color:var(--brass)}
.stat span{display:block;font:600 8.5px/1.3 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--vellum-3);margin-top:7px}

/* ── карта дня ── */
.today{border:1px solid var(--line);background:var(--night-2);padding:16px 18px;
  margin:26px 0 8px;display:flex;align-items:center;gap:15px;transition:.18s;
  position:relative;overflow:hidden}
.today::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 100% at 0% 50%,var(--brass-glow),transparent 65%)}
.today:hover{border-color:var(--brass-dim)}
.today .mini{width:34px;height:52px;border:1px solid var(--brass-dim);border-radius:2px;flex:none;
  display:flex;align-items:center;justify-content:center;font:400 15px var(--disp);
  color:var(--brass);position:relative;background:var(--night-3)}
.today .tx{flex:1;position:relative;min-width:0}
.today b{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-dim);margin-bottom:6px}
.today p{margin:0;font:15px/1.4 var(--ui);color:var(--vellum)}
.today .arr{color:var(--brass);font-size:19px;flex:none;position:relative}

/* ── секции ── */
.sect{margin-top:38px;padding-top:20px;border-top:1px solid var(--line)}
.sect h2{font:600 10px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass-dim);margin:0 0 4px}
.sect .why{font:13px/1.55 var(--ui);color:var(--vellum-3);margin:0 0 6px;max-width:44ch}

/* ── продукт ── */
.item{display:flex;align-items:flex-start;gap:16px;padding:21px 0;
  border-top:1px solid var(--line);transition:padding-left .16s}
.item:first-of-type{border-top:none}
.item:hover{padding-left:5px}
.item:hover .gl path,.item:hover .gl circle,.item:hover .gl line{stroke:var(--brass)}
.item:hover h3{color:var(--brass)}
.gl{width:40px;height:40px;flex:none;margin-top:2px}
.gl path,.gl circle,.gl line{stroke:var(--brass-dim);fill:none;stroke-width:1;transition:stroke .16s}
.txt{flex:1;min-width:0}
h3{font:400 22px/1.15 var(--disp);margin:0 0 5px;transition:color .16s}
.desc{font:14px/1.5 var(--ui);color:var(--vellum-2);margin:0 0 9px}
.badge{display:inline-block;font:600 8.5px/1 var(--mono);letter-spacing:.15em;
  text-transform:uppercase;padding:5px 8px;border:1px solid var(--line-2);
  color:var(--vellum-3);margin:0 4px 4px 0}
.badge.free{border-color:var(--verd);color:var(--verd)}
.badge.paid{border-color:var(--brass-dim);color:var(--brass)}
.badge.ret{border-color:var(--line-2);color:var(--vellum-2)}

/* ── скоро ── */
.soon{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:14px}
.sc{background:var(--night-2);padding:13px 14px;opacity:.82}
.sc b{display:block;font:400 15.5px/1.25 var(--disp);color:var(--vellum-2);margin-bottom:5px}
.sc em{display:block;font:600 8px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  font-style:normal;color:var(--vellum-3)}
.sc i{display:inline-block;font:600 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  font-style:normal;color:var(--brass-dim);border:1px solid var(--line-2);padding:3px 6px;margin-top:7px}
@media(max-width:480px){.soon{grid-template-columns:1fr}}

footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  text-align:center;font:12px/1.7 var(--ui);color:var(--vellum-3)}
@media(max-width:400px){
  .wrap{padding:32px 16px 50px} h1{font-size:36px} h3{font-size:20px}
  .gl{width:34px;height:34px} .stat b{font-size:23px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}