/* DEVO MTA — base styles */

:root{
  --bg:        #0d0c0a;
  --bg-2:      #131210;
  --surface:   #16140f;
  --surface-2: #1c1a14;
  --line:      #2a2620;
  --line-soft: #1f1d18;
  --text:      #ece6d6;
  --text-mid:  #b7b0a0;
  --text-dim:  #7c7568;
  --accent:    #ff6a2c;
  --accent-2:  #ff8a4c;
  --accent-dim:#c43d12;
  --danger:    #ff4d4d;
  --ok:        #5cd07c;

  --maxw: 1240px;
  --pad-x: clamp(20px, 4vw, 56px);

  --f-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% 0%, #1a1612 0%, var(--bg) 60%, var(--bg) 100%);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100svh;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:#1a0a02; }

/* Grain overlay — subtle film texture */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ================= NAV ================= */

.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:32px;
  padding:18px var(--pad-x);
  background:rgba(13,12,10,.78);
  backdrop-filter:blur(10px) saturate(120%);
  border-bottom:1px solid var(--line-soft);
}

.nav__brand{
  display:flex; align-items:center; gap:12px;
  margin-right:auto;
}
.nav__brand img{
  filter:drop-shadow(0 0 8px rgba(255,106,44,.15));
}
.nav__brand-text{
  display:flex; flex-direction:column; line-height:1;
}
.nav__brand-line1{
  font-family:var(--f-display);
  font-weight:700; font-size:20px; letter-spacing:.04em;
}
.nav__brand-line2{
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:.18em; color:var(--text-dim);
  margin-top:4px;
}

.nav__menu{
  display:flex; align-items:center; gap:28px;
}
.nav__menu a{
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-mid); font-weight:500;
  position:relative; padding:6px 0;
  transition:color .15s ease;
}
.nav__menu a:hover{ color:var(--text); }
.nav__menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--accent);
  transition:right .25s ease;
}
.nav__menu a:hover::after{ right:0; }

.nav__burger{
  display:none;
  width:38px; height:38px; padding:0; border:1px solid var(--line);
  background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:4px;
}
.nav__burger span{
  display:block; width:18px; height:1.5px; background:var(--text);
}

/* ================= BUTTONS ================= */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-family:var(--f-display);
  font-size:14px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--small{ padding:10px 16px; font-size:12px; }
.btn--accent{
  background:var(--accent); color:#1a0a02;
  border-color:var(--accent);
  box-shadow:0 8px 24px -10px rgba(255,106,44,.55);
}
.btn--accent:hover{
  background:var(--accent-2); border-color:var(--accent-2);
  transform:translateY(-1px);
}
.btn--ghost{
  background:transparent; color:var(--text);
  border-color:var(--line);
}
.btn--ghost:hover{
  border-color:var(--text); color:var(--text);
}

/* ================= HERO ================= */

.hero{
  padding:clamp(48px, 8vw, 96px) var(--pad-x) 0;
  max-width:var(--maxw); margin:0 auto;
  position:relative; z-index:2;
  isolation:isolate;
}

/* --- ambient background glows --- */
.hero::before,
.hero::after{
  content:""; position:absolute;
  pointer-events:none; z-index:0;
  border-radius:50%;
  will-change:transform;
}
.hero::before{
  top:-12%; right:-8%;
  width:min(620px, 60%); aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,106,44,.16), transparent 62%);
  filter:blur(40px);
  animation:hero-drift-1 26s ease-in-out infinite alternate;
}
.hero::after{
  bottom:8%; left:-10%;
  width:min(540px, 55%); aspect-ratio:1;
  background:radial-gradient(circle, rgba(196,61,18,.13), transparent 68%);
  filter:blur(60px);
  animation:hero-drift-2 32s ease-in-out infinite alternate;
}
@keyframes hero-drift-1{
  0%   { transform: translate(0, 0)        scale(1); }
  100% { transform: translate(-6%, 6%)     scale(1.08); }
}
@keyframes hero-drift-2{
  0%   { transform: translate(0, 0)        scale(1); }
  100% { transform: translate(8%, -8%)     scale(1.06); }
}

.hero__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
  position:relative;
  z-index:1;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:28px;
}
.dot{
  width:6px; height:6px; background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,106,44,.18);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(255,106,44,.18); }
  50%{ box-shadow:0 0 0 6px rgba(255,106,44,.05); }
}

.display{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(40px, 6.4vw, 84px);
  line-height:.95;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:0 0 28px;
  color:var(--text);
  word-spacing:-.05em;
}
.display--accent{
  color:var(--accent);
  font-style:italic;
  font-weight:600;
}

.lede{
  font-size:clamp(16px, 1.4vw, 18px);
  line-height:1.55;
  color:var(--text-mid);
  max-width:54ch;
  margin:0 0 36px;
}

.hero__cta{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-bottom:40px;
}

.hero__tags{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:8px 0;
  border-top:1px solid var(--line-soft);
  padding-top:24px;
}
.hero__tags li{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
  padding-right:18px; margin-right:18px;
  border-right:1px solid var(--line-soft);
}
.hero__tags li:last-child{ border-right:0; }

/* ---- server card ---- */
.server-card{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--line);
  padding:24px;
  position:relative;
  font-family:var(--f-mono);
  font-size:13px;
}
.server-card::before{
  content:""; position:absolute; top:-1px; left:-1px;
  width:18px; height:18px;
  border-top:2px solid var(--accent);
  border-left:2px solid var(--accent);
}
.server-card::after{
  content:""; position:absolute; bottom:-1px; right:-1px;
  width:18px; height:18px;
  border-bottom:2px solid var(--accent);
  border-right:2px solid var(--accent);
}

.server-card__head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px dashed var(--line);
}
.status{ display:inline-flex; align-items:center; gap:9px; }
.status__dot{
  width:8px; height:8px; background:var(--ok);
  border-radius:50%;
  box-shadow:0 0 8px var(--ok);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{
  0%,100%{ opacity:1; }
  50%{ opacity:.55; }
}
.status__label{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text);
}
.server-card__ver{
  font-size:11px; color:var(--text-dim); letter-spacing:.1em;
}

.server-card__row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
}
.server-card__row:last-of-type{ border-bottom:0; }
.server-card__key{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
}
.server-card__val{ color:var(--text); }
.num{ font-variant-numeric:tabular-nums; }
.num--dim{ color:var(--text-dim); }

.server-card__ip{
  margin-top:20px; padding-top:18px;
  border-top:1px dashed var(--line);
}
.server-card__ip .server-card__key{ display:block; margin-bottom:10px; }

/* IP block */
.ip{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  background:var(--bg-2);
  border:1px solid var(--line);
  padding:10px 12px;
}
.ip code{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--accent-2);
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ip__copy{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--line);
  color:var(--text-mid);
  padding:6px 10px;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  flex-shrink:0;
  transition:color .15s, border-color .15s;
}
.ip__copy:hover{ color:var(--accent); border-color:var(--accent); }
.ip__copy.is-copied{ color:var(--ok); border-color:var(--ok); }
.ip--large{ padding:14px 18px; }
.ip--large code{ font-size:15px; }

/* hero rule + marquee */
.hero__rule{
  height:1px; background:var(--line-soft);
  margin:clamp(48px, 7vw, 90px) 0 0;
  position:relative; z-index:1;
}
.marquee{
  margin-top:-1px;
  padding:18px 0;
  overflow:hidden;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-2);
  position:relative; z-index:1;
}
.marquee__track{
  display:flex; gap:36px; white-space:nowrap;
  animation:marquee 40s linear infinite;
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.22em;
  color:var(--text-dim);
}
.marquee__track span{ display:inline-block; }
@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ================= SKYLINE STRIP ================= */

.skyline{
  width:100%;
  height:clamp(180px, 22vw, 280px);
  margin-top:clamp(48px, 7vw, 90px);
  position:relative; z-index:2;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
  background:#0d0c0a;
}
.skyline svg{ display:block; width:100%; height:100%; }

/* ================= SECTION ================= */

.section{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(72px, 10vw, 130px) var(--pad-x);
  position:relative; z-index:2;
}
.section__head{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:48px;
  border-bottom:1px solid var(--line-soft);
  padding-bottom:22px;
}
.section__num{
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.22em;
  color:var(--accent);
}
.section__title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(32px, 4.5vw, 52px);
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
  line-height:1;
}

/* ---- ABOUT ---- */

.about{
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.about__main p{
  font-size:clamp(16px, 1.3vw, 18px);
  line-height:1.65;
  color:var(--text-mid);
  margin:0 0 18px;
  max-width:60ch;
}
.about__main p:last-child{ margin-bottom:0; }
.about__main strong{ color:var(--text); font-weight:600; }

.about__side{
  display:flex; flex-direction:column; gap:18px;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--line);
  position:relative;
}
.side-stat{
  padding:14px 0;
  border-bottom:1px dashed var(--line);
}
.side-stat:last-child{ border-bottom:0; padding-bottom:0; }
.side-stat:first-child{ padding-top:0; }
.side-stat__num{
  font-family:var(--f-display);
  font-weight:600;
  font-size:42px;
  line-height:1;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.side-stat__plus{
  color:var(--accent);
  font-size:.7em;
  margin-left:2px;
  font-weight:500;
}
.side-stat__label{
  margin-top:6px;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
}

/* ---- FEATS (NOT a grid of cards) ---- */

.feats{
  list-style:none; padding:0; margin:0;
  border-top:1px solid var(--line-soft);
}
.feat{
  display:grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap:32px;
  align-items:start;
  padding:32px 0;
  border-bottom:1px solid var(--line-soft);
  transition:background .25s ease;
}
.feat:hover{
  background:linear-gradient(90deg, rgba(255,106,44,.04), transparent 70%);
}
.feat__index{
  font-family:var(--f-mono);
  font-size:13px; letter-spacing:.1em;
  color:var(--accent);
  padding-top:6px;
}
.feat__title{
  font-family:var(--f-display);
  font-weight:600; font-size:clamp(22px, 2.4vw, 30px);
  margin:0 0 10px;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.feat__body p{
  margin:0;
  font-size:16px; line-height:1.6;
  color:var(--text-mid);
  max-width:64ch;
}
.feat__tag{
  font-family:var(--f-mono);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim);
  padding:5px 10px;
  border:1px solid var(--line);
  white-space:nowrap;
  align-self:start;
  margin-top:8px;
}

/* ---- SHOP ---- */

.section--shop{
  background:
    linear-gradient(180deg, transparent, rgba(255,106,44,.03), transparent),
    var(--bg);
}
.shop-intro{
  margin-bottom:48px;
  max-width:72ch;
}
.shop-intro p{
  margin:0 0 14px;
  font-size:16px; line-height:1.65;
  color:var(--text-mid);
}
.shop-intro p:last-child{ margin-bottom:0; }
.shop-intro__pay strong{ color:var(--accent); font-weight:600; }

.shop{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.product{
  position:relative;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--line);
  padding:32px;
  display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .25s ease;
}
.product:hover{
  border-color:#3a2e22;
  transform:translateY(-2px);
}
.product::before{
  content:""; position:absolute; top:-1px; left:-1px;
  width:22px; height:22px;
  border-top:2px solid var(--accent);
  border-left:2px solid var(--accent);
}
.product--BATTLEPASS::before{
  border-color:#c9a96e;
}
.product__head{ margin-bottom:18px; }
.product__kicker{
  display:inline-block;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
  padding:4px 8px;
  border:1px solid var(--accent);
}
.product--BATTLEPASS .product__kicker{
  color:#c9a96e; border-color:#c9a96e;
}
.product__title{
  font-family:var(--f-display);
  font-weight:700; font-size:clamp(28px, 3vw, 36px);
  margin:0;
  letter-spacing:.005em;
  text-transform:uppercase;
  line-height:1.05;
}
.product__desc{
  margin:0 0 18px;
  font-size:15px; line-height:1.6;
  color:var(--text-mid);
}
.product__perks{
  list-style:none; padding:0;
  margin:0 0 24px;
  display:flex; flex-direction:column; gap:10px;
}
.product__perks li{
  position:relative;
  padding-left:22px;
  font-size:14px; color:var(--text-mid);
}
.product__perks li::before{
  content:""; position:absolute; left:0; top:9px;
  width:10px; height:1.5px; background:var(--accent);
}
.product--BATTLEPASS .product__perks li::before{ background:#c9a96e; }

.product__priceline{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:16px 0;
  border-top:1px dashed var(--line);
  border-bottom:1px dashed var(--line);
  margin-bottom:18px;
}
.product__priceline--fixed{ padding:20px 0; }
.product__price-label{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim);
}
.product__price{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(32px, 3.4vw, 42px);
  line-height:1;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.product__price-cur{
  color:var(--accent);
  font-weight:500;
  margin-left:4px;
}
.product--BATTLEPASS .product__price-cur{ color:#c9a96e; }

.product__field{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:18px;
}
.product__field-label{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim);
}
.product__field input[type="text"],
.product__field input[type="number"]{
  background:var(--bg-2);
  border:1px solid var(--line);
  color:var(--text);
  padding:14px 16px;
  font-family:var(--f-mono);
  font-size:15px;
  letter-spacing:.02em;
  width:100%;
  outline:none;
  transition:border-color .15s, background .15s;
}
.product__field input:focus{
  border-color:var(--accent);
  background:var(--bg);
}
.product__field input:invalid:not(:placeholder-shown){
  border-color:var(--danger);
}
.product__field-hint{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.06em; color:var(--text-dim);
}
.product__amount{
  display:flex; align-items:stretch;
  border:1px solid var(--line);
  background:var(--bg-2);
}
.product__amount input{
  border:0 !important;
  background:transparent !important;
  flex:1;
}
.product__amount-unit{
  display:flex; align-items:center;
  padding:0 16px;
  border-left:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--accent);
}
.product__buy{ width:100%; justify-content:center; }
.product--BATTLEPASS .product__buy.btn--accent{
  background:#c9a96e;
  border-color:#c9a96e;
  color:#1a1308;
  box-shadow:0 8px 24px -10px rgba(201,169,110,.55);
}
.product--BATTLEPASS .product__buy.btn--accent:hover{
  background:#dab982;
  border-color:#dab982;
}
.product__legal{
  margin:16px 0 0;
  font-size:12px; line-height:1.5;
  color:var(--text-dim);
}

/* ================= FOOTER ================= */

.footer{
  border-top:1px solid var(--line);
  padding:56px var(--pad-x) 28px;
  background:var(--bg-2);
  position:relative; z-index:2;
}

.footer__top{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap:40px; align-items:center;
  padding-bottom:36px;
  border-bottom:1px solid var(--line-soft);
}

.footer__brand{
  display:flex; align-items:center; gap:14px;
  color:var(--text);
}
.footer__brand-text{
  display:flex; flex-direction:column;
}
.footer__name{
  font-family:var(--f-display);
  font-weight:700; font-size:22px;
  letter-spacing:.04em;
  line-height:1;
}
.footer__sub{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.12em; color:var(--text-dim);
  margin-top:6px;
}

.footer__nav{
  display:flex; gap:28px;
  justify-content:center;
}
.footer__nav a{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mid);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.footer__nav a:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.footer__socials{
  display:flex; gap:10px;
  justify-content:flex-end;
}
.footer__social{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border:1px solid var(--line);
  color:var(--text-mid);
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  transition:color .15s, border-color .15s, background .15s;
}
.footer__social:hover{
  color:var(--accent);
  border-color:var(--accent);
}
.footer__social svg{ flex-shrink:0; }

.footer__pay{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(280px, 1fr);
  gap:36px; align-items:center;
  padding:32px 0;
  border-bottom:1px solid var(--line-soft);
}
.footer__pay-title{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.footer__pay-text p{
  margin:0;
  font-size:13px; line-height:1.55;
  color:var(--text-mid);
  max-width:62ch;
}
.footer__pay-banner{
  display:flex; justify-content:flex-end; align-items:center;
}
.footer__pay-banner a{
  display:inline-block;
  transition:transform .2s ease, filter .2s ease;
  filter:saturate(.9);
}
.footer__pay-banner a:hover{
  transform:translateY(-2px);
  filter:saturate(1.1);
}
.footer__pay-banner img{ max-width:100%; height:auto; }

.footer__bottom{
  max-width:var(--maxw); margin:0 auto;
  padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--text-dim);
  font-family:var(--f-mono);
  letter-spacing:.06em;
}
.footer__muted{ color:var(--text-dim); }

/* ================= PAY BANNER ================= */

.paybanner{
  position:relative; z-index:30;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-bottom:2px solid var(--accent);
  overflow:hidden;
  animation:paybanner-in .45s cubic-bezier(.2,.7,.2,1) both;
}
.paybanner--fail{ border-bottom-color:var(--danger); }
.paybanner.is-hiding{
  animation:paybanner-out .3s cubic-bezier(.5,0,.5,1) forwards;
}

.paybanner__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:16px var(--pad-x);
  display:flex; align-items:center; gap:18px;
}

.paybanner__icon{
  width:42px; height:42px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,106,44,.14);
  color:var(--accent);
  border:1px solid rgba(255,106,44,.35);
}
.paybanner--fail .paybanner__icon{
  background:rgba(255,77,77,.12);
  color:var(--danger);
  border-color:rgba(255,77,77,.35);
}

.paybanner__text{ flex:1; min-width:0; }
.paybanner__title{
  display:block;
  font-family:var(--f-display);
  font-weight:600; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--text);
  line-height:1.2;
}
.paybanner__msg{
  display:block;
  font-size:13px; line-height:1.5;
  color:var(--text-mid);
  margin-top:4px;
  max-width:80ch;
}

.paybanner__close{
  flex-shrink:0;
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text-mid);
  cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.paybanner__close:hover{
  color:var(--text);
  border-color:var(--text);
  background:rgba(255,255,255,.04);
}

@keyframes paybanner-in{
  from{ transform:translateY(-100%); opacity:0; }
  to  { transform:translateY(0); opacity:1; }
}
@keyframes paybanner-out{
  from{ transform:translateY(0); opacity:1; }
  to  { transform:translateY(-100%); opacity:0; }
}

@media (max-width: 720px){
  .paybanner__inner{ padding:14px 16px; gap:12px; }
  .paybanner__icon{ width:36px; height:36px; }
  .paybanner__icon svg{ width:18px; height:18px; }
  .paybanner__title{ font-size:13px; letter-spacing:.03em; }
  .paybanner__msg{ font-size:12px; line-height:1.45; }
  .paybanner__close{ width:32px; height:32px; }
}

/* ================= TOAST ================= */

.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--text); color:var(--bg);
  padding:10px 18px;
  font-family:var(--f-mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase;
  z-index:50;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.is-shown{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ================= REVEAL ANIM ================= */

.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto; }
}

/* ================= RESPONSIVE ================= */

/* --- планшет: 1024px и меньше --- */
@media (max-width: 1024px){
  .hero__grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .about{
    grid-template-columns:1fr;
    gap:32px;
  }
  .about__side{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .about__side .side-stat{
    flex:1 1 30%;
    border-bottom:0;
    padding:0;
  }

  .shop{ grid-template-columns:1fr; gap:18px; }

  .footer__top{
    grid-template-columns:1fr 1fr;
    gap:32px;
    text-align:left;
  }
  .footer__nav{ justify-content:flex-start; grid-column:1/-1; order:3; }
  .footer__socials{ justify-content:flex-end; }
}

/* --- мобильные / маленькие планшеты: 720px --- */
@media (max-width: 720px){
  :root{
    --pad-x: 18px;
  }

  /* nav */
  .nav{ gap:14px; padding:14px var(--pad-x); }
  .nav__menu{ display:none; }
  .nav__burger{ display:flex; }
  .nav.is-open .nav__menu{
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    padding:18px var(--pad-x);
    background:rgba(13,12,10,.97);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    gap:14px;
  }
  .nav.is-open .nav__menu a{
    font-size:16px;
    padding:8px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .nav__brand-line1{ font-size:18px; }
  .nav__brand-line2{ font-size:9px; }
  .nav .btn--small{ padding:8px 12px; font-size:11px; }

  /* hero */
  .hero{ padding:36px var(--pad-x) 0; }
  .eyebrow{ font-size:10px; margin-bottom:20px; }
  .display{
    font-size:clamp(38px, 11vw, 56px);
    margin-bottom:20px;
  }
  .lede{ font-size:15px; margin-bottom:28px; }
  .hero__cta{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-bottom:28px;
  }
  .hero__cta .btn{ justify-content:center; width:100%; }
  .hero__tags{
    flex-direction:column;
    align-items:flex-start;
    padding-top:20px;
  }
  .hero__tags li{
    border-right:0;
    border-bottom:1px solid var(--line-soft);
    margin-right:0; padding-right:0;
    padding:10px 0;
    margin-bottom:0;
    width:100%;
  }
  .hero__tags li:last-child{ border-bottom:0; }

  /* server-card */
  .server-card{ padding:18px; }
  .server-card__row{ padding:8px 0; }
  .ip code{ font-size:11px; }
  .ip__copy{ padding:5px 8px; font-size:10px; }
  .ip__copy-label{ display:none; }

  /* marquee — чуть меньше */
  .marquee__track{ font-size:10px; gap:24px; }

  /* skyline */
  .skyline{ height:clamp(120px, 28vw, 180px); margin-top:48px; }

  /* sections */
  .section{ padding:56px var(--pad-x); }
  .section__head{
    margin-bottom:32px;
    padding-bottom:16px;
    gap:14px;
  }
  .section__num{ font-size:11px; }

  /* about */
  .about__main p{ font-size:15px; }
  .about__side{
    flex-direction:column;
    gap:14px;
    padding:18px;
  }
  .about__side .side-stat{
    flex:1 1 auto;
    padding:14px 0;
    border-bottom:1px dashed var(--line);
  }
  .about__side .side-stat:last-child{ border-bottom:0; padding-bottom:0; }
  .about__side .side-stat:first-child{ padding-top:0; }
  .side-stat__num{ font-size:34px; }

  /* feats */
  .feat{
    grid-template-columns:auto 1fr;
    gap:12px 16px;
    padding:24px 0;
  }
  .feat__index{ padding-top:4px; }
  .feat__title{ font-size:20px; margin-bottom:8px; }
  .feat__body p{ font-size:14px; line-height:1.55; }
  .feat__tag{
    grid-column:1/-1;
    justify-self:start;
    margin-top:6px;
    padding:4px 8px;
    font-size:9px;
  }

  /* shop */
  .section--shop .shop-intro{ margin-bottom:32px; }
  .shop-intro p{ font-size:14px; }
  .product{ padding:22px; }
  .product__title{ font-size:24px; }
  .product__desc{ font-size:14px; margin-bottom:16px; }
  .product__perks li{ font-size:13px; }
  .product__price{ font-size:32px; }
  .product__field input[type="text"],
  .product__field input[type="number"]{
    padding:12px 14px;
    font-size:14px;
    /* нужно >=16px для iOS чтобы не зумило при фокусе, но
       тут условно — на сервере ник, цифры тоже ок без зума */
  }
  .product__buy{ padding:14px 18px; font-size:13px; }

  /* footer */
  .footer{ padding:40px var(--pad-x) 24px; }
  .footer__top{
    grid-template-columns:1fr;
    gap:24px;
    text-align:left;
    padding-bottom:24px;
  }
  .footer__brand{ justify-content:flex-start; }
  .footer__nav{
    flex-wrap:wrap;
    gap:16px;
    justify-content:flex-start;
  }
  .footer__socials{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }
  .footer__social{ padding:8px 12px; font-size:10px; }
  .footer__pay{
    grid-template-columns:1fr;
    text-align:left;
    gap:20px;
    padding:24px 0;
  }
  .footer__pay-banner{ justify-content:flex-start; }
  .footer__pay-banner img{ max-width:240px; }
  .footer__bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding-top:20px;
  }
}

/* --- маленькие телефоны: 420px --- */
@media (max-width: 420px){
  :root{ --pad-x: 14px; }

  .display{ font-size:clamp(32px, 12vw, 44px); }
  .lede{ font-size:14px; }
  .section{ padding:44px var(--pad-x); }
  .section__title{ font-size:26px; }
  .feat{ padding:20px 0; }
  .feat__title{ font-size:18px; }
  .product{ padding:18px; }
  .product__title{ font-size:22px; }
  .product__price{ font-size:28px; }
  .server-card__head{ padding-bottom:14px; margin-bottom:14px; }
  .ip__copy-label{ display:none; }
}