:root{
    --bg:#0a0a10;
    --bg-elevated:#111020;
    --bg-card:#15142a;
    --border:#242238;
    --border-soft:#1c1b30;
    --violet:#8c5cff;
    --violet-dim:#6a45c9;
    --violet-soft:rgba(140,92,255,.14);
    --lime:#c6ff5c;
    --text:#f3f1fa;
    --text-muted:#9891b8;
    --text-faint:#5f5a80;
    --radius:18px;
    --maxw:1180px;
    font-family:'Manrope',system-ui,sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden; max-width:100vw;}
  @media (hover:none), (pointer:coarse){ html{scroll-behavior:auto;} }
  body{
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer;}

  h1,h2,h3,h4{
    font-family:'Unbounded', sans-serif;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.01em;
  }

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px, 4vw, 28px);}

  /* Background hex texture */
  .hex-field{
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 0 L84 24 L84 72 L42 96 L0 72 L0 24 Z' fill='none' stroke='%238c5cff' stroke-opacity='0.09' stroke-width='1.2'/%3E%3C/svg%3E");
    background-size:84px 96px;
    pointer-events:none;
  }

  :focus-visible{outline:2px solid var(--lime); outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(10,10,16,.82);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-soft);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px clamp(16px, 4vw, 28px); max-width:var(--maxw); margin:0 auto;
  }
  .logo{
    display:flex; align-items:center; gap:9px;
    font-family:'Unbounded', sans-serif; font-weight:700; font-size:19px;
  }
  .logo-img{
    height:34px; width:auto; display:block; flex-shrink:0;
  }
  nav.links{display:flex; gap:28px;}
  nav.links a{
    font-size:14.5px; color:var(--text-muted); font-weight:600;
    transition:color .15s;
  }
  nav.links a:hover{color:var(--text);}
  .nav-right{display:flex; align-items:center; gap:14px;}
  .balance-pill{
    display:flex; align-items:center; gap:8px;
    background:var(--bg-card); border:1px solid var(--border);
    padding:8px 14px; border-radius:100px; font-size:14px; font-weight:700; white-space:nowrap;
  }
  .balance-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--lime);}
  .lang-switch{
    display:flex; align-items:center; justify-content:center;
    min-width:44px; height:34px; padding:0 14px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:100px;
    font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--text);
    transition:border-color .15s, color .15s;
  }
  .lang-switch:hover{border-color:var(--violet); color:var(--violet);}
  .nav-toggle{
    display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px;
  }
  .nav-toggle span{width:22px; height:2px; background:var(--text);}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; padding:88px 0 64px; overflow:hidden;
  }
  .hero .hex-field{ height:520px; top:-40px; opacity:.9; mask-image:linear-gradient(to bottom, black, transparent);}
  .hero-inner{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
  .kicker{
    color:var(--violet); font-weight:700; font-size:14px; margin-bottom:16px;
    display:flex; align-items:center; gap:8px;
  }
  .kicker .hex-mini{
    width:14px; height:14px;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background:var(--violet);
  }
  h1.hero-title{
    font-size:52px; max-width:560px; margin-bottom:18px;
  }
  .hero-sub{
    color:var(--text-muted); font-size:17px; max-width:460px; margin-bottom:32px;
  }
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; border-radius:12px; font-weight:700; font-size:15px;
    border:1px solid transparent; transition:transform .15s, background .15s, border-color .15s;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--violet); color:#0a0a10;}
  .btn-primary:hover{background:#9d70ff;}
  .btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
  .btn-ghost:hover{border-color:var(--violet);}

  .step-shot{
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; line-height:0;
    clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  }
  .step-shot img{
    display:block; width:100%; height:auto;
  }

  /* ---------- SECTION shared ---------- */
  section{padding:64px 0;}
  .section-gap-lg{margin-top:56px;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:34px; gap:16px; flex-wrap:wrap;}
  .section-head h2{font-size:32px;}
  .section-head p{color:var(--text-muted); font-size:15px; max-width:420px;}

  /* ---------- SHOP ---------- */
  .server-select{
    display:inline-flex; gap:4px; background:var(--bg-elevated); border:1px solid var(--border-soft);
    border-radius:100px; padding:4px; margin-bottom:18px;
  }
  .server-btn{
    padding:9px 20px; border-radius:100px; border:none; background:transparent;
    color:var(--text-faint); font-weight:700; font-size:13.5px;
    transition:background .15s, color .15s;
  }
  .server-btn.active{background:var(--violet); color:#0a0a10;}
  .server-btn:not(.active):hover{color:var(--text);}

  .tabs{display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap;}
  .tab{
    padding:10px 18px; border-radius:100px; border:1px solid var(--border);
    background:transparent; color:var(--text-muted); font-weight:700; font-size:14px;
    transition:.15s;
  }
  .tab.active{background:var(--violet); border-color:var(--violet); color:#0a0a10;}
  .tab:not(.active):hover{border-color:var(--violet); color:var(--text);}

  .shop-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  }
  .shop-grid[hidden]{display:none;}
  .card{
    background:var(--bg-card); border:1px solid var(--violet);
    border-radius:var(--radius); padding:26px;
    clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
    display:flex; flex-direction:column; gap:16px;
    transition:border-color .15s, transform .15s;
  }
  .card:hover{border-color:var(--violet-dim); transform:translateY(-3px);}
  .card.featured{background:linear-gradient(160deg, var(--bg-card), #1c1836);}
  .card-top{display:flex; align-items:center; justify-content:space-between;}
  .rank-icon{
    display:inline-block;
    width:44px; height:44px;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  .badge{
    font-size:11.5px; font-weight:700; color:var(--lime);
    background:rgba(198,255,92,.12); padding:4px 10px; border-radius:100px;
  }
  .card h3{font-size:20px;}
  .duration-select{
    display:flex; gap:6px; background:var(--bg-elevated); border:1px solid var(--border-soft);
    border-radius:10px; padding:4px;
  }
  .dur-btn{
    flex:1; background:transparent; border:none; border-radius:7px;
    padding:8px 6px; font-size:12.5px; font-weight:700; color:var(--text-faint);
    white-space:nowrap; transition:background .15s, color .15s, box-shadow .15s;
  }
  .dur-btn.active{background:var(--violet); color:#0a0a10; box-shadow:0 4px 14px rgba(140,92,255,.35);}
  .dur-btn:not(.active):hover{color:var(--text);}
  .price{font-family:'Unbounded'; font-size:26px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
  .price span{font-size:14px; color:var(--text-faint); font-weight:500; font-family:'Manrope';}
  .price .price-current{font-family:'Unbounded'; font-size:26px; font-weight:inherit; color:var(--text);}
  .price .price-current.price-sale{color:#ff5c6a;}
  .price .price-old{
    font-family:'Manrope'; font-size:15px; font-weight:700; color:var(--text-faint);
    text-decoration:line-through; text-decoration-thickness:1.5px;
  }
  .perks{display:flex; flex-direction:column; gap:9px; color:var(--text-muted); font-size:14px; flex:1;}
  .perks li{display:flex; gap:9px; align-items:flex-start;}
  .perks li::before{content:"◆"; color:var(--violet); font-size:9px; margin-top:6px; flex-shrink:0;}
  .card .btn{justify-content:center; width:100%;}

  /* ---------- USEFUL LINKS ---------- */
  .useful-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  }
  .useful-card{
    background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:14px;
    padding:22px; transition:border-color .15s, background .15s;
  }
  .useful-card:hover{border-color:var(--violet-dim); background:var(--bg-card);}
  .useful-card .u-icon{
    width:34px; height:34px; border-radius:8px; background:var(--violet-soft);
    display:flex; align-items:center; justify-content:center; color:var(--violet); font-weight:700;
    margin-bottom:14px; font-family:'Unbounded'; font-size:14px;
  }
  .useful-card h4{font-size:15.5px; margin-bottom:6px;}
  .useful-card p{font-size:13.5px; color:var(--text-faint);}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--border-soft); padding:56px 0 26px; position:relative; overflow:hidden;}
  footer .hex-field{height:100%; opacity:.5; mask-image:linear-gradient(to top, black, transparent);}
  .footer-grid{
    position:relative; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px;
  }
  .footer-brand p{color:var(--text-faint); font-size:14px; max-width:320px; margin:14px 0 18px;}
  .socials{display:flex; gap:10px; flex-wrap:wrap;}
  .socials a{
    padding:8px 13px; border-radius:8px; border:1px solid var(--border); font-size:13px; font-weight:600;
    color:var(--text-muted); transition:.15s;
  }
  .socials a:hover{border-color:var(--violet); color:var(--text);}
  .footer-col h4{font-size:13.5px; color:var(--text-faint); margin-bottom:16px; font-weight:700;}
  .footer-col ul{display:flex; flex-direction:column; gap:11px;}
  .footer-col a{color:var(--text-muted); font-size:14px; transition:color .15s;}
  .footer-col a:hover{color:var(--text);}
  .footer-bottom{
    border-top:1px solid var(--border-soft); padding-top:22px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    color:var(--text-faint); font-size:12.5px;
  }

  /* ---------- PRODUCT PAGE (отдельная страница product.html) ---------- */
  .product-page{min-height:60vh;}

  .product-page-top{padding-top:24px;}
  .product-page-back{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:100px;
    padding:9px 18px 9px 14px; color:var(--text-muted); font-size:13.5px; font-weight:700;
    transition:color .15s, border-color .15s, background .15s, transform .15s;
  }
  .product-page-back:hover{color:var(--text); border-color:var(--violet-dim); background:var(--violet-soft);}
  .product-page-back:hover span:first-child{transform:translateX(-2px);}
  .product-page-back span:first-child{font-size:16px; line-height:1; transition:transform .15s;}

  /* Баннер: пропорции берутся из картинки (--banner-ratio задаёт JS), высота ограничена
     относительно экрана. Картинка целиком (contain) поверх своей размытой копии — так
     и широкий, и квадратный баннер выглядят цельно без обрезки. */
  .product-page-banner{
    --banner-ratio:3.2;
    position:relative; isolation:isolate; overflow:hidden;
    width:100%; aspect-ratio:var(--banner-ratio);
    max-height:clamp(170px, 38vh, 400px);
    margin-bottom:24px; border-radius:16px; line-height:0;
    border:1px solid var(--border-soft); background:var(--bg-elevated);
  }
  .product-page-banner[hidden]{display:none;}
  .product-page-banner::before{
    content:""; position:absolute; inset:-30px; z-index:-1;
    background:var(--banner-bg, none) center / cover no-repeat;
    filter:blur(26px) saturate(1.15); opacity:.6; transform:scale(1.05);
  }
  .product-page-banner img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; object-position:center; display:block;
  }

  .product-page-body{
    display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px, 5vw, 48px);
    padding-top:clamp(18px, 3.5vw, 28px); padding-bottom:clamp(48px, 8vw, 80px);
    align-items:start;
  }

  .product-page-info .rank-icon{width:clamp(36px, 7vw, 48px); height:clamp(36px, 7vw, 48px); margin-bottom:20px;}
  .product-page-info h1{font-family:'Unbounded'; font-size:clamp(22px, 5.2vw, 32px); margin-bottom:10px; line-height:1.25;}
  .product-page-info .duration-select{
    display:flex; gap:10px; margin-bottom:22px; max-width:100%; flex-wrap:wrap;
    background:none; border:none; border-radius:0; padding:0;
  }
  .product-page-info .dur-btn{
    flex:0 0 auto; padding:clamp(8px, 1.6vw, 10px) clamp(14px, 3vw, 20px); font-size:clamp(12.5px, 2.6vw, 14px); border-radius:100px;
    background:transparent; border:1px solid var(--border); color:var(--text-muted);
    transition:border-color .15s, color .15s, background .15s, box-shadow .15s;
  }
  .product-page-info .dur-btn:not(.active):hover{border-color:var(--violet-dim); color:var(--text); background:var(--violet-soft);}
  .product-page-info .dur-btn.active{
    background:var(--violet-soft); border-color:var(--violet); color:var(--text);
    box-shadow:0 0 0 3px rgba(140,92,255,.12);
  }
  .product-page-info .price{
    font-family:'Unbounded'; font-size:clamp(20px, 4.4vw, 28px); color:var(--violet); margin-bottom:22px;
    display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  }
  .product-page-info .price .price-current{font-family:'Unbounded'; font-size:clamp(20px, 4.4vw, 28px); color:var(--violet);}
  .product-page-info .price .price-current.price-sale{color:#ff5c6a;}
  .product-page-info .price .price-old{
    font-family:'Manrope'; font-size:clamp(13.5px, 2.6vw, 16px); font-weight:700; color:var(--text-faint);
    text-decoration:line-through; text-decoration-thickness:1.5px;
  }

  /* Выбор количества (слайдер) — показывается, если у товара есть quantity в data.php.
     --qty-fill (в %) выставляет JS: им закрашена пройденная часть дорожки. */
  .qty-box{
    max-width:460px; margin-bottom:24px; padding:16px 18px 14px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
  }
  .qty-box[hidden]{display:none;}
  .qty-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px;}
  .qty-head label{color:var(--text-muted); font-size:13.5px; font-weight:700;}
  .qty-value{font-family:'Unbounded'; font-size:clamp(18px, 4vw, 22px); color:var(--text); font-variant-numeric:tabular-nums;}

  .qty-slider{
    --qty-fill:0%;
    -webkit-appearance:none; appearance:none;
    display:block; width:100%; height:32px; margin:0; background:transparent; cursor:pointer;
    touch-action:pan-y; /* по горизонтали двигаем ползунок, вертикальный скролл страницы не блокируем */
  }
  .qty-slider:focus{outline:none;}
  .qty-slider::-webkit-slider-runnable-track{
    height:6px; border-radius:100px;
    background:linear-gradient(90deg, var(--violet) var(--qty-fill), var(--border) var(--qty-fill));
  }
  .qty-slider::-moz-range-track{
    height:6px; border-radius:100px;
    background:linear-gradient(90deg, var(--violet) var(--qty-fill), var(--border) var(--qty-fill));
  }
  .qty-slider::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:22px; height:22px; margin-top:-8px; border-radius:50%;
    background:var(--text); border:3px solid var(--violet);
    box-shadow:0 0 0 4px rgba(140,92,255,.16); transition:box-shadow .15s, transform .15s;
  }
  .qty-slider::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%;
    background:var(--text); border:3px solid var(--violet);
    box-shadow:0 0 0 4px rgba(140,92,255,.16); transition:box-shadow .15s, transform .15s;
  }
  .qty-slider:hover::-webkit-slider-thumb, .qty-slider:active::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(140,92,255,.24);}
  .qty-slider:hover::-moz-range-thumb, .qty-slider:active::-moz-range-thumb{box-shadow:0 0 0 6px rgba(140,92,255,.24);}
  .qty-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--lime); outline-offset:3px;}
  .qty-slider:focus-visible::-moz-range-thumb{outline:2px solid var(--lime); outline-offset:3px;}

  .qty-scale{display:flex; justify-content:space-between; margin-top:2px; color:var(--text-faint); font-size:12px; font-weight:700;}
  .qty-total{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    margin-top:14px; padding-top:12px; border-top:1px solid var(--border-soft);
    color:var(--text-muted); font-size:13.5px; font-weight:700;
  }
  .qty-total[hidden]{display:none;}
  .qty-total strong{font-family:'Unbounded'; font-size:clamp(16px, 3.6vw, 19px); color:var(--violet); white-space:nowrap;}
  @media (pointer:coarse){
    .qty-slider{height:40px;}
    .qty-slider::-webkit-slider-thumb{width:26px; height:26px; margin-top:-10px;}
    .qty-slider::-moz-range-thumb{width:20px; height:20px;}
  }

  .product-page-form-wrap{
    background:var(--bg-card); border:1px solid var(--border); border-radius:18px;
    padding:clamp(18px, 3.6vw, 30px) clamp(16px, 3.2vw, 26px); position:sticky; top:88px; /* 88px — под липкой шапкой */
  }
  .product-page-form-wrap .step-label{color:var(--text-faint); font-size:12.5px; font-weight:700; margin-bottom:6px;}
  .product-page-form-wrap h4{font-size:17px; margin-bottom:20px;}

  /* товар не загрузился — форму покупки прячем, остаётся сообщение и кнопка «Назад» */
  .product-page.is-error .product-page-form-wrap{display:none;}
  .product-page.is-error .product-page-body{grid-template-columns:1fr; max-width:640px;}
  .product-page.is-error .product-page-info .rank-icon{display:none;}

  @media (max-width:800px){
    .product-page-top{padding-top:16px;}
    .product-page-body{grid-template-columns:1fr; padding-top:20px;}
    .product-page-form-wrap{position:static; top:auto;}
    .product-page-banner{max-height:clamp(150px, 32vh, 300px); border-radius:14px; margin-bottom:20px;}
  }

  /* ---------- Отдельное окно выбора способа оплаты ---------- */
  .modal-overlay{
    position:fixed; inset:0; z-index:100; overflow-x:hidden;
    background:rgba(6,6,10,.72); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; visibility:hidden; transition:opacity .18s;
  }
  .modal-overlay.open{opacity:1; visibility:visible;}
  .modal{
    background:var(--bg-card); border:1px solid var(--border); border-radius:20px;
    transform:translateY(14px) scale(.98); transition:transform .18s;
  }
  .modal-overlay.open .modal{transform:translateY(0) scale(1);}
  .modal-close{
    position:absolute; top:18px; right:18px; z-index:2;
    width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
    background:var(--bg-elevated); color:var(--text-muted); font-size:16px; line-height:1;
  }
  .modal-close:hover{color:var(--text); border-color:var(--violet);}

  .modal-desc{color:var(--text-muted); font-size:14px; line-height:1.7;}
  .modal-desc p{margin-bottom:12px;}
  .modal-desc h5{color:var(--text); font-size:13.5px; margin:18px 0 8px; font-family:'Manrope'; font-weight:700;}
  .modal-desc ul{display:flex; flex-direction:column; gap:8px;}
  .modal-desc ul li{display:flex; gap:8px;}
  .modal-desc ul li::before{content:"◆"; color:var(--violet); font-size:8px; margin-top:6px; flex-shrink:0;}

  .field{margin-bottom:16px; display:grid; grid-template-columns:minmax(0,1fr);}
  .field label{grid-row:1;}
  .field label{display:block; font-size:13px; font-weight:700; color:var(--text-muted); margin-bottom:7px;}
  .field input{
    grid-row:2;
    /* Браузер сам прокручивает к полю при фокусе: просим оставить запас сверху (подпись) и снизу (подсказка) */
    scroll-margin:96px 0 112px;
    width:100%; background:var(--bg); border:1px solid var(--border); border-radius:10px;
    padding:12px 14px; color:var(--text); font-size:14px; font-family:inherit;
  }
  .field input:focus{border-color:var(--violet); outline:none;}
  .field-hint, .field-error{grid-row:3; grid-column:1; font-size:12px; margin-top:6px;}
  .field-hint{color:var(--text-faint);}
  .field-error{color:#ff8a8a; visibility:hidden;}
  .field.invalid input{border-color:#ff6a6a;}
  .field.invalid .field-error{visibility:visible;}
  .field.invalid .field-hint{visibility:hidden;}

  .agree-row{
    display:flex; gap:10px; align-items:flex-start; margin:8px 0 22px;
    font-size:13px; color:var(--text-muted); line-height:1.5;
  }
  .agree-row input{margin-top:3px; width:16px; height:16px; accent-color:var(--violet); flex-shrink:0;}
  .agree-row a{color:var(--lime); font-weight:600;}

  .modal-submit{width:100%; justify-content:center;}
  .modal-submit:disabled{opacity:.45; cursor:not-allowed; transform:none;}

  .modal-success{display:none; flex-direction:column; align-items:flex-start; gap:14px; margin:auto 0;}
  .modal-success.show{display:flex;}
  .modal-success .check{
    width:46px; height:46px; border-radius:12px; background:var(--violet-soft); color:var(--violet);
    display:flex; align-items:center; justify-content:center; font-size:20px; font-family:'Unbounded';
  }
  .modal-success h4{font-size:18px;}
  .modal-success p{color:var(--text-muted); font-size:14px; line-height:1.6;}

  /* ---------- Отдельное окно выбора способа оплаты ---------- */
  .modal.payment-modal{
    display:flex; flex-direction:column;
    width:100%; max-width:420px; height:auto; max-height:88vh;
    padding:30px 26px; overflow-y:auto; overflow-x:hidden;
  }
  .modal-back{
    align-self:flex-start; background:none; border:none; color:var(--text-faint);
    font-size:13px; font-weight:700; padding:0; margin-bottom:14px; transition:color .15s;
  }
  .modal-back:hover{color:var(--violet);}
  .payment-modal h4{font-size:17px; margin-bottom:6px;}
  .payment-hint{color:var(--text-muted); font-size:13px; margin-bottom:18px;}
  .payment-methods{display:flex; flex-direction:column; gap:10px;}
  .payment-method-btn{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; text-align:left; background:var(--bg); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px; color:var(--text); font-size:14.5px; font-weight:700;
    transition:border-color .15s, background .15s;
  }
  .payment-method-btn::after{
    content:"→"; color:var(--text-faint); font-weight:700; transition:color .15s, transform .15s;
    flex-shrink:0;
  }
  .payment-method-btn:hover:not(:disabled){border-color:var(--violet); background:var(--bg-elevated);}
  .payment-method-btn:hover:not(:disabled)::after{color:var(--violet); transform:translateX(2px);}
  .payment-method-btn:disabled{opacity:.5; cursor:not-allowed;}
  .payment-method-left{display:flex; align-items:center; gap:12px; min-width:0;}
  .payment-method-icon{width:24px; height:24px; border-radius:6px; flex-shrink:0; display:block;}
  .payment-method-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .payment-method-amount{margin-left:auto; color:var(--text-muted); font-weight:800; white-space:nowrap; flex-shrink:0;}
  .payment-methods .state-box{padding:24px 0;}

  @media (max-width:640px){
    .modal.payment-modal{max-width:100%;}
  }

  @media (max-width:920px){
    .hero-inner{grid-template-columns:1fr;}
    .shop-grid{grid-template-columns:repeat(2,1fr);}
    .useful-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:680px){
    nav.links{
      position:fixed; inset:64px 0 0 0; background:var(--bg); flex-direction:column;
      padding:28px; gap:22px; transform:translateX(100%); transition:transform .25s; z-index:40;
    }
    nav.links.open{transform:translateX(0);}
    .nav-toggle{display:flex;}
    header.nav.menu-open{
      background:var(--bg);
      /* backdrop-filter на шапке делает её "системой координат" для всех
         вложенных элементов с position:fixed (в т.ч. для самой nav.links) —
         из-за этого панель меню считала свои отступы (inset:64px 0 0 0)
         от размеров шапки (~64px), а не от экрана, и не растягивалась на
         весь экран вниз. Пока меню открыто, блюр не нужен (фон и так
         сплошной), поэтому просто отключаем его — и nav.links снова
         позиционируется от viewport, как и должна.
      */
      backdrop-filter:none;
    }
    h1.hero-title{font-size:36px;}
    .hero-ctas{width:100%;}
    .btn{width:100%; justify-content:center;}
    .shop-grid{grid-template-columns:1fr;}
    .useful-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr; gap:30px;}
    .section-head{flex-direction:column;}
    .section-gap-lg{margin-top:24px;}
  }

  /* ---------- SMALL PHONES (~480px и ниже, вплоть до 375x667) ---------- */
  @media (max-width:480px){
    /* Шапка */
    .nav-inner{padding-top:12px; padding-bottom:12px; gap:8px;}
    .logo{font-size:16px; gap:7px;}
    .logo-img{height:28px;}
    .nav-right{gap:8px;}
    .balance-pill{padding:6px 10px; gap:6px; font-size:12px;}
    .lang-switch{min-width:36px; height:30px; padding:0 10px; font-size:12px;}
    .nav-toggle{padding:5px;}
    .nav-toggle span{width:19px;}
    nav.links{inset:58px 0 0 0; padding:22px 16px; gap:18px;}

    /* Герой */
    .hero{padding:44px 0 32px;}
    .hero .hex-field{height:340px; top:-24px;}
    .kicker{font-size:12px; margin-bottom:12px;}
    h1.hero-title{font-size:26px; margin-bottom:12px;}
    .hero-sub{font-size:14px; margin-bottom:22px;}
    .hero-ctas{gap:10px; margin-bottom:30px;}
    .btn{padding:13px 18px; font-size:14px;}
    .step-shot{border-radius:14px;}

    /* Общие секции */
    section{padding:40px 0;}
    .section-gap-lg{margin-top:20px;}
    .section-head{margin-bottom:20px; gap:10px;}
    .section-head h2{font-size:22px;}
    .section-head p{font-size:13px;}

    /* Магазин */
    .server-select{padding:3px; gap:3px; margin-bottom:14px; max-width:100%; overflow-x:auto;}
    .server-btn{padding:7px 13px; font-size:12.5px; white-space:nowrap;}
    .tabs{gap:7px; margin-bottom:20px;}
    .tab{padding:8px 14px; font-size:12.5px;}
    .shop-grid{gap:12px;}
    .card{padding:18px; gap:12px; border-radius:14px;}
    .rank-icon{width:36px; height:36px;}
    .card h3{font-size:17px;}
    .badge{font-size:10.5px; padding:3px 8px;}
    .dur-btn{padding:7px 4px; font-size:11px;}
    .price{font-size:21px;}
    .price .price-current{font-size:21px;}
    .price span{font-size:12px;}
    .perks{font-size:13px; gap:7px;}

    /* Полезное */
    .useful-grid{gap:12px;}
    .useful-card{padding:16px;}
    .useful-card .u-icon{width:30px; height:30px; margin-bottom:10px; font-size:13px;}
    .useful-card h4{font-size:14.5px;}
    .useful-card p{font-size:13px;}

    /* Футер */
    footer{padding:40px 0 22px;}
    .footer-grid{gap:26px; margin-bottom:28px;}
    .footer-brand p{font-size:13px; margin:12px 0 16px;}
    .socials a{padding:7px 11px; font-size:12px;}
    .footer-col h4{font-size:12.5px; margin-bottom:12px;}
    .footer-col ul{gap:10px;}
    .footer-col a{font-size:13.5px;}
    .footer-bottom{flex-direction:column; align-items:flex-start; gap:6px; font-size:11.5px;}

    /* Страница товара */
    .product-page-top{padding-top:14px;}
    .product-page-back{padding:8px 14px 8px 12px; font-size:13px;}
    .product-page-body{padding-bottom:56px;}
    .product-page-banner{border-radius:12px; margin-bottom:16px; max-height:clamp(140px, 30vh, 260px);}
    .product-page-info .duration-select{gap:8px; margin-bottom:16px;}
    .modal-desc{font-size:13px;}
    .modal-desc h5{font-size:13px; margin:14px 0 7px;}
    .product-page-form-wrap .step-label{font-size:11.5px;}
    .product-page-form-wrap h4{font-size:15.5px; margin-bottom:16px;}
    .modal-submit{padding:13px 18px; font-size:14px;}

    /* Формы и модалки */
    .field{margin-bottom:13px;}
    .field input{padding:11px 12px;}
    .agree-row{font-size:12.5px; gap:8px;}
    .modal.payment-modal{border-radius:16px;}
    .payment-method-btn{padding:12px 12px; font-size:13.5px;}
    .payment-method-icon{width:22px; height:22px;}
    .payment-hint{font-size:12.5px;}
  }

  /* ---------- ЭКСТРА-УЗКИЕ ЭКРАНЫ (iPhone SE и т.п., 375px и уже) ---------- */
  @media (max-width:380px){
    .nav-inner{padding-top:10px; padding-bottom:10px; gap:6px;}
    .logo{font-size:14.5px; gap:6px;}
    .logo-img{height:26px;}
    .nav-right{gap:6px;}
    .balance-pill{padding:6px 9px; font-size:11.5px;}
    .balance-pill .balance-label{display:none;}
    .lang-switch{min-width:32px; height:28px; padding:0 8px; font-size:11.5px;}
    h1.hero-title{font-size:23px;}
    .hero-sub{font-size:13.5px;}
    .server-btn{padding:6px 11px; font-size:12px;}
    .tab{padding:7px 12px; font-size:12px;}
    .card{padding:15px;}
    .dur-btn{font-size:10.5px; padding:7px 3px;}

    .product-page-back{padding:7px 12px 7px 10px; font-size:12.5px;}
    .product-page-banner{max-height:clamp(120px, 26vh, 220px);}
  }

  /* ---------- API STATES (loading / error / empty) ---------- */
  .state-box{
    grid-column:1 / -1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; padding:48px 20px; text-align:center;
    color:var(--text-muted); font-size:14px;
  }
  .state-box.is-error{color:#ff9a9a;}
  .spinner{
    width:26px; height:26px; border-radius:50%;
    border:3px solid var(--border); border-top-color:var(--violet);
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .retry-btn{
    background:var(--violet-soft); color:var(--violet); border:none; border-radius:8px;
    padding:9px 16px; font-size:13px; font-weight:700;
  }
  .retry-btn:hover{background:var(--violet); color:#0a0a10;}
  .skeleton-card{
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px; height:260px; position:relative; overflow:hidden;
  }
  .skeleton-card::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
    transform:translateX(-100%); animation:shimmer 1.3s infinite;
  }
  @keyframes shimmer{100%{transform:translateX(100%);}}
  .server-select[data-loading="true"], .tabs[data-loading="true"]{opacity:.5; pointer-events:none;}

  /* ---------- ПОЛЯ ВВОДА НА ТЕЛЕФОНАХ ---------- */
  /* Шрифт поля ≥16px: иначе iOS Safari при фокусе сам приближает страницу и «уводит» экран от поля. */
  @media (max-width:800px), (pointer:coarse){
    .field input{font-size:16px;}
  }