:root{
  --bg:#031008;
  --card:#111412;
  --card-deep:#0d100e;
  --text:#f7faf8;
  --muted:#a7b0aa;
  --green:#29d86e;
  --green-bright:#74f3a5;
  --green-soft:#14321f;
  --yellow:#ffdc3b;
  --cyan:#56d7ff;
  --blue:#2f8cff;
  --line:rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}

body{
  overflow:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 8%,rgba(34,177,84,.30),transparent 27rem),
    radial-gradient(circle at 100% 100%,rgba(35,57,106,.28),transparent 28rem),
    linear-gradient(180deg,#031108 0%,#07120c 58%,#080811 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

.page-glow{
  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(115px);
  opacity:.15;
  pointer-events:none;
}
.page-glow-left{left:-240px;top:-150px;background:#20cf69}
.page-glow-right{right:-240px;bottom:-170px;background:#27356d}

.page-shell{
  position:relative;
  z-index:2;
  width:100%;
  height:100svh;
  display:grid;
  place-items:center;
  padding:14px;
}

.landing-card{
  width:min(100%,520px);
  height:min(calc(100svh - 28px),920px);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto auto auto auto auto auto auto;
  align-content:space-between;
  gap:clamp(8px,1.15svh,14px);
  padding:clamp(20px,3svh,34px) clamp(22px,5vw,34px) 15px;
  border:1px solid rgba(88,228,138,.14);
  border-radius:42px;
  background:
    radial-gradient(circle at 50% -10%,rgba(41,208,105,.055),transparent 42%),
    linear-gradient(180deg,rgba(17,20,18,.988),rgba(13,16,14,.994));
  box-shadow:0 28px 90px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.025);
}

.hero{text-align:center}
.eyebrow{
  margin-bottom:8px;
  color:#7fdc9d;
  font-size:clamp(8px,2.2vw,11px);
  line-height:1;
  font-weight:900;
  letter-spacing:.20em;
}
.hero h1{
  margin:0;
  font-size:clamp(37px,8.9vw,60px);
  line-height:.94;
  letter-spacing:-.060em;
  font-weight:950;
  color:#fff;
  white-space:nowrap;
}
.hero h1 span{
  background:linear-gradient(180deg,#d7ffe3 0%,#74f3a5 38%,#2fd670 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 12px rgba(47,214,112,.16));
}
.hero p{
  margin:10px 0 0;
  color:#a8aaa9;
  font-size:clamp(13px,3.4vw,18px);
  line-height:1.2;
  font-weight:600;
}
.hero p strong{color:#eef8f1}
.hero p span{color:#8fdaaa}
.hero p i{padding:0 5px;color:#646a66;font-style:normal}

.rate-card{
  width:100%;
  padding:14px 18px 15px;
  border:1px solid rgba(52,215,113,.31);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% -15%,rgba(41,216,110,.14),transparent 60%),
    linear-gradient(180deg,rgba(15,35,22,.93),rgba(12,26,18,.96));
  box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025),0 0 28px rgba(41,216,110,.05);
  text-align:center;
}
.rate-label{
  color:#69d58e;
  font-size:clamp(9px,2.4vw,12px);
  line-height:1;
  font-weight:900;
  letter-spacing:.20em;
}
.rate-main{
  width:min(100%,350px);
  margin:5px auto 0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:12px;
}
.rate-main>strong{
  color:var(--green);
  font-size:clamp(62px,15.5vw,88px);
  line-height:.82;
  letter-spacing:-.075em;
  font-weight:950;
  text-shadow:0 0 22px rgba(41,216,110,.18);
  white-space:nowrap;
}
.rate-unit{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding-bottom:6px;
}
.rate-unit b{
  color:#fff;
  font-size:clamp(13px,3.3vw,18px);
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}
.rate-unit span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#819187;
  font-size:clamp(7px,1.9vw,9px);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.rate-unit span i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green-bright);
  box-shadow:0 0 10px rgba(116,243,165,.60);
}

.trust-card{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:14px 16px;
  border:1.5px solid rgba(41,216,110,.72);
  border-radius:25px;
  background:linear-gradient(120deg,rgba(17,35,23,.96),rgba(13,24,18,.97));
  box-shadow:0 0 26px rgba(41,216,110,.06),inset 0 1px 0 rgba(255,255,255,.025);
}
.trust-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,#4bea88,#18b95a);
  box-shadow:0 10px 24px rgba(22,185,87,.22),0 0 0 6px rgba(41,216,110,.05);
}
.trust-icon svg{width:28px;height:28px}
.trust-copy{min-width:0}
.trust-copy h2{
  margin:0;
  color:#f7faf8;
  font-size:clamp(15px,4vw,22px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:950;
}
.trust-copy h2 span{color:var(--green)}
.trust-copy p{
  margin:5px 0 0;
  color:#b9c0bb;
  font-size:clamp(10px,2.9vw,14px);
  line-height:1.2;
  font-weight:600;
}
.trust-badge{
  padding:7px 9px;
  border-radius:999px;
  color:#132017;
  background:linear-gradient(180deg,#fff0a1,#ffd957);
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.05em;
  white-space:nowrap;
}

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.benefit{
  min-width:0;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.benefit-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:18px;
  font-weight:950;
}
.benefit div{min-width:0}
.benefit strong{
  display:block;
  font-size:clamp(11px,3vw,15px);
  line-height:1.05;
  font-weight:900;
  white-space:nowrap;
}
.benefit small{
  display:block;
  margin-top:4px;
  color:#7e8982;
  font-size:clamp(8px,2.2vw,11px);
  line-height:1;
  font-weight:700;
  white-space:nowrap;
}
.benefit-payment .benefit-icon{color:var(--green);background:rgba(41,216,110,.10)}
.benefit-payment strong{color:#8df0b0}
.benefit-bulk .benefit-icon{color:var(--yellow);background:rgba(255,220,59,.09)}
.benefit-bulk strong{color:#ffe379}
.benefit-day .benefit-icon{color:var(--cyan);background:rgba(86,215,255,.09)}
.benefit-day strong{color:#8ae3ff}
.benefit-support .benefit-icon{color:#d7b0ff;background:rgba(177,111,255,.09)}
.benefit-support strong{color:#dcbaff}

.primary-btn,
.telegram-btn{
  min-height:64px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,filter .18s ease;
}
.primary-btn:active,.telegram-btn:active{transform:scale(.985)}
.primary-btn svg,.telegram-btn svg{width:33px;height:33px;flex:0 0 auto}
.primary-btn>span,.telegram-btn>span{min-width:0;text-align:center}
.primary-btn strong,.telegram-btn strong{
  display:block;
  font-size:clamp(15px,4.2vw,22px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.primary-btn small,.telegram-btn small{
  display:block;
  margin-top:4px;
  font-size:clamp(8px,2.2vw,11px);
  line-height:1;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}

.primary-btn{
  color:#061109;
  background:linear-gradient(90deg,#39df7b,#25cd68);
  box-shadow:0 16px 34px rgba(36,208,107,.22),0 0 25px rgba(36,208,107,.10),inset 0 1px 0 rgba(255,255,255,.28);
}
.primary-btn small{color:#1a5c35}
.primary-btn>b{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 11px;
  border-radius:999px;
  color:#16170e;
  background:var(--yellow);
  font-size:10px;
  line-height:1;
  font-weight:950;
}
.primary-btn>b i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#24b75b;
  box-shadow:0 0 8px rgba(36,183,91,.55);
}

.telegram-btn{
  grid-template-columns:auto minmax(0,1fr);
  color:#dff5ff;
  border:1px solid rgba(86,215,255,.24);
  background:linear-gradient(90deg,#122331,#14243a 52%,#1b2341);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.16);
}
.telegram-btn svg{color:var(--cyan)}
.telegram-btn strong{color:#65d9ff}
.telegram-btn small{color:#839aac}

.proof-strip{
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:999px;
  background:#171a18;
  color:#8b918d;
  font-size:clamp(9px,2.4vw,12px);
  line-height:1;
  font-weight:750;
  white-space:nowrap;
}
.proof-strip span:nth-of-type(1){color:#86e7a8}
.proof-strip span:nth-of-type(2){color:#ffe075}
.proof-strip span:nth-of-type(3){color:#78d9ff}
.proof-strip i{color:#515652;font-style:normal}

.footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#555d58;
  font-size:8px;
  line-height:1;
}
.footer button{
  border:0;
  padding:0;
  color:#68716b;
  background:none;
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
}