:root { --acid:#c6ff00; --red:#ff2d22; --white:#f5f4ef; --black:#050605; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:#020302; }
body { color:var(--white); font-family:Arial,Helvetica,sans-serif; overflow:hidden; }
.hero {
  position:relative; isolation:isolate; width:100%; max-width:560px; min-height:100svh;
  margin:auto; overflow:hidden; padding:20px 18px calc(24px + env(safe-area-inset-bottom));
  background:#050605; box-shadow:0 0 90px #000;
}
.hero-photo { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero::before {
  content:""; position:absolute; z-index:-2; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.05) 44%,rgba(0,0,0,.18) 66%,rgba(0,0,0,.93) 93%),
             linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.32) 49%,transparent 78%);
}
.hero::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; box-shadow:inset 0 0 90px rgba(0,0,0,.68); }
.noise { position:absolute; inset:0; z-index:20; pointer-events:none; opacity:.048; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.leaf-rain { position:absolute; z-index:3; inset:0; overflow:hidden; pointer-events:none; transition:opacity .3s ease; }
.falling-leaf { position:absolute; top:-14vh; left:var(--x); width:var(--size); color:rgba(180,233,45,var(--alpha)); filter:blur(var(--blur)) drop-shadow(0 0 7px rgba(198,255,0,.28)); animation:leaf-fall var(--duration) linear var(--delay) infinite; will-change:transform; }
.falling-leaf svg { display:block; width:100%; fill:currentColor; }
body.fx-off .leaf-rain { opacity:0; }
body.fx-off .falling-leaf { animation-play-state:paused; }
.powder-drift { position:absolute; z-index:3; right:-1%; top:69%; width:21%; height:9%; pointer-events:none; transform:rotate(0deg); transition:opacity .3s ease; }
.powder-speck { position:absolute; left:var(--px); bottom:var(--py); width:var(--ps); height:var(--ps); border-radius:50%; background:rgba(255,255,255,var(--pa)); box-shadow:0 0 4px rgba(255,255,255,.45); animation:powder-float var(--pd) ease-in-out var(--pdelay) infinite; will-change:transform,opacity; }
body.fx-off .powder-drift { opacity:0; }
body.fx-off .powder-speck { animation-play-state:paused; }
@keyframes leaf-fall { 0%{transform:translate3d(0,-15vh,0) rotate(0deg)} 45%{transform:translate3d(var(--drift),47vh,0) rotate(210deg)} 100%{transform:translate3d(calc(var(--drift) * -.45),116vh,0) rotate(470deg)} }
@keyframes powder-float { 0%,100%{transform:translate3d(0,0,0);opacity:.15} 38%{transform:translate3d(-15px,-11px,0);opacity:1} 72%{transform:translate3d(9px,-5px,0);opacity:.42} }
header { position:relative; z-index:10; display:flex; align-items:center; height:48px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.17); }
.logo-mark { display:grid; place-items:center; width:36px; height:36px; border:1.5px solid var(--acid); border-radius:50%; color:var(--acid); font:700 19px Impact,"Arial Narrow",sans-serif; background:rgba(0,0,0,.45); box-shadow:0 0 22px rgba(198,255,0,.35); }
.logo-text { margin-left:9px; font:700 13px/.95 Impact,"Arial Narrow",sans-serif; letter-spacing:.1em; text-shadow:0 2px 10px #000; }
.logo-text small { color:#9da293; font-size:7px; letter-spacing:.17em; }
.status { margin-left:auto; color:#c3c6bd; font:700 8px Arial,sans-serif; letter-spacing:.1em; text-shadow:0 1px 6px #000; }
.status i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--acid); box-shadow:0 0 10px var(--acid); }
.fx-toggle { display:flex; align-items:center; gap:4px; min-height:27px; margin-left:10px; padding:4px 7px; color:var(--acid); background:rgba(0,0,0,.48); border:1px solid rgba(198,255,0,.4); border-radius:14px; cursor:pointer; }
.fx-toggle svg { width:13px; height:13px; fill:currentColor; }
.fx-toggle b { font:700 7px Arial,sans-serif; letter-spacing:.05em; }
.fx-toggle[aria-pressed="false"] { color:#777d72; border-color:rgba(255,255,255,.18); }
.fx-toggle:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.copy { position:relative; z-index:6; margin-top:clamp(28px,5.8vh,58px); max-width:340px; text-shadow:0 3px 18px rgba(0,0,0,.92); }
.eyebrow { width:max-content; margin:0 0 10px; padding:5px 8px; color:#d8dbd1; background:rgba(0,0,0,.5); border:1px solid rgba(198,255,0,.28); border-radius:2px; font:700 7px Arial,sans-serif; letter-spacing:.15em; }
h1 { margin:0; font:700 clamp(62px,19vw,98px)/.8 Impact,"Arial Narrow",sans-serif; letter-spacing:-.025em; text-transform:uppercase; }
h1 em { color:var(--acid); font-style:normal; text-shadow:0 0 25px rgba(198,255,0,.3),0 3px 16px #000; }
h1 span { display:inline-block; font-size:.51em; letter-spacing:-.018em; }
.delivery { display:flex; align-items:center; gap:10px; width:max-content; margin-top:14px; padding:7px 10px 7px 0; background:linear-gradient(90deg,rgba(0,0,0,.58),transparent); }
.delivery b { color:var(--acid); font:700 29px Impact,"Arial Narrow",sans-serif; line-height:1; border-right:1px solid rgba(198,255,0,.65); padding-right:10px; }
.delivery span { color:#f0f1eb; font:800 9px/1.35 Arial,sans-serif; letter-spacing:.11em; }
.action { position:absolute; z-index:10; left:18px; right:18px; bottom:calc(23px + env(safe-area-inset-bottom)); text-align:center; }
.bottom-promises { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; width:100%; margin:12px 0 0; text-align:left; }
.bottom-promises > div { display:flex; align-items:center; min-height:44px; gap:8px; padding:6px 9px; border:1px solid rgba(198,255,0,.42); background:rgba(3,5,3,.76); backdrop-filter:blur(7px); box-shadow:0 7px 20px rgba(0,0,0,.24); }
.bottom-promises i { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; color:#090b08; background:var(--acid); font:normal 900 12px Arial,sans-serif; box-shadow:0 0 13px rgba(198,255,0,.32); }
.bottom-promises span,.bottom-promises small { display:block; }
.bottom-promises span { color:#f2f3ed; font:700 7px/1.25 Arial,sans-serif; letter-spacing:.055em; }
.bottom-promises small { margin-top:3px; color:var(--acid); font-size:6px; letter-spacing:.09em; }
.telegram-link { width:100%; min-height:64px; display:flex; align-items:center; justify-content:center; gap:13px; color:#fff; background:linear-gradient(180deg,#ff3b31,#e91e14); border:1px solid #ff837d; box-shadow:0 16px 38px rgba(255,45,34,.42),inset 0 1px rgba(255,255,255,.18); text-decoration:none; font:700 18px Impact,"Arial Narrow",sans-serif; letter-spacing:.055em; transition:.18s ease; }
.telegram-link:hover { transform:translateY(-2px); filter:brightness(1.08); }
.telegram-link:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.telegram-link svg { width:25px; fill:currentColor; }
.action p { margin:8px 0 0; color:#aaaFA5; font:700 7px Arial,sans-serif; letter-spacing:.16em; text-shadow:0 1px 6px #000; }
@media (max-width:370px) { .bottom-promises{grid-template-columns:1fr}.bottom-promises > div{min-height:38px}.bottom-promises i{width:24px;height:24px;flex-basis:24px} }
@media (max-width:560px) { .falling-leaf:nth-child(n+10){display:none}.status{display:none}.fx-toggle{margin-left:auto} }
@media (max-height:700px) { .copy{margin-top:10px}.eyebrow{margin-bottom:5px}h1{font-size:50px}.delivery{margin-top:6px}.bottom-promises{margin-top:8px}.bottom-promises > div{min-height:39px;padding-block:5px}.telegram-link{min-height:52px} }
@media (min-width:860px) {
  .hero { max-width:none; padding:30px 5vw; background:radial-gradient(circle at 72% 48%,#1a2310 0,#070907 27%,#020302 65%); }
  .hero-photo { left:auto; right:2vw; width:56vw; height:100%; object-fit:contain; object-position:right center; }
  .hero::before { background:linear-gradient(90deg,#020302 0%,rgba(2,3,2,.97) 31%,rgba(2,3,2,.58) 53%,rgba(2,3,2,.05) 78%),linear-gradient(180deg,rgba(0,0,0,.18),transparent 61%,rgba(0,0,0,.74)); }
  .hero::after { box-shadow:inset 0 0 130px rgba(0,0,0,.62); }
  header { height:58px; padding-bottom:16px; }
  .logo-mark { width:42px; height:42px; font-size:22px; }
  .logo-text { font-size:15px; }
  .copy { margin-top:clamp(46px,7vh,85px); max-width:650px; }
  .eyebrow { font-size:9px; padding:6px 10px; }
  h1 { font-size:clamp(84px,9vw,142px); }
  .delivery { margin-top:20px; }
  .delivery b { font-size:38px; }
  .delivery span { font-size:11px; }
  .action { left:5vw; right:auto; width:min(450px,38vw); bottom:clamp(28px,6vh,64px); }
  .bottom-promises { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:24px; }
  .bottom-promises > div { min-height:56px; padding:10px 12px; }
  .bottom-promises span { font-size:8px; }
  .bottom-promises small { font-size:7px; }
  .powder-drift { right:-1vw; top:71%; width:11vw; height:9%; }
}
@media (min-width:860px) {
  html[data-view="phone"] body { overflow:auto; }
  html[data-view="phone"] .hero { max-width:390px; min-height:844px; height:844px; padding:20px 18px 24px; background:#050605; }
  html[data-view="phone"] .hero-photo { inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
  html[data-view="phone"] .hero::before { background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.05) 44%,rgba(0,0,0,.18) 66%,rgba(0,0,0,.93) 93%),linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.32) 49%,transparent 78%); }
  html[data-view="phone"] .hero::after { box-shadow:inset 0 0 90px rgba(0,0,0,.68); }
  html[data-view="phone"] header { height:48px; padding-bottom:13px; }
  html[data-view="phone"] .logo-mark { width:36px; height:36px; font-size:19px; }
  html[data-view="phone"] .logo-text { font-size:13px; }
  html[data-view="phone"] .copy { margin-top:49px; max-width:340px; }
  html[data-view="phone"] .eyebrow { padding:5px 8px; font-size:7px; }
  html[data-view="phone"] h1 { font-size:74px; }
  html[data-view="phone"] .delivery { margin-top:14px; }
  html[data-view="phone"] .delivery b { font-size:29px; }
  html[data-view="phone"] .delivery span { font-size:9px; }
  html[data-view="phone"] .action { left:18px; right:18px; width:auto; bottom:23px; }
  html[data-view="phone"] .bottom-promises { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px; }
  html[data-view="phone"] .bottom-promises > div { min-height:44px; padding:6px 9px; }
  html[data-view="phone"] .bottom-promises span { font-size:7px; }
  html[data-view="phone"] .bottom-promises small { font-size:6px; }
  html[data-view="phone"] .status { display:none; }
  html[data-view="phone"] .fx-toggle { margin-left:auto; }
  html[data-view="phone"] .powder-drift { right:-1%; top:69%; width:21%; height:9%; }
}
@media (prefers-reduced-motion:reduce) { .falling-leaf,.powder-drift{animation:none;display:none} }