:root{
  --bg:#071524; --card:#0b1e31; --card2:#081a2b;
  --grad1:#3b82f6; --grad2:#06b6d4; /* более насыщенная кнопка */
  --text:#f8fcff; --muted:#cfe1ef;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#071524;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;scroll-behavior:smooth}

/* waves */
body::before, body::after{
  content:""; position:fixed; inset:-20% -10% auto -10%; height:60%;
  background:radial-gradient(50% 60% at 20% 30%, rgba(0,213,255,.10), transparent 60%),
             radial-gradient(40% 50% at 80% 0%, rgba(0,140,255,.12), transparent 60%);
  filter:blur(20px); z-index:-2; animation:wave 15s ease-in-out infinite alternate;
}
body::after{
  inset:auto -10% -15% -10%; height:55%;
  background:radial-gradient(50% 60% at 70% 70%, rgba(0,213,255,.10), transparent 60%),
             radial-gradient(40% 50% at 10% 80%, rgba(0,140,255,.12), transparent 60%);
  animation-duration:18s;
}
@keyframes wave{0%{transform:translateY(0)}100%{transform:translateY(-18px)}}

a{color:#eaf6ff;text-decoration:none}
img,svg{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 18px}

/* header */
.header{z-index:1200; position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px);background:rgba(7,21,36,.55);border-bottom:1px solid rgba(255,255,255,.06);z-index:1001}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.logo{display:flex;gap:12px;align-items:center}
.logo img{width:40px;height:40px;border-radius:8px;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.logo strong{font-size:20px;letter-spacing:.2px;color:#fff}
.nav{display:flex;gap:22px;flex-wrap:wrap}
.nav a{color:#fff;font-weight:700;opacity:.95}
.nav a:hover{opacity:1;text-shadow:0 0 22px rgba(160,220,255,.55)}

/* buttons — белый шрифт и новое свечение */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:linear-gradient(90deg,var(--grad1),var(--grad2));color:#fff;font-weight:800;box-shadow:0 8px 24px rgba(0,170,255,.22);transition:box-shadow .25s ease, transform .1s ease}
.btn:hover{box-shadow:0 18px 42px rgba(0,170,255,.38), 0 0 0 1px rgba(0,213,255,.22) inset}
.btn:active{transform:translateY(1px)}

/* hero */
.hero{padding:52px 0 20px;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center}
.hero h1{font-size:42px;line-height:1.12;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 14px}
.hero small{color:#b9d7ea}
.hero-art img{width:100%;height:auto;max-height:320px;object-fit:contain;animation:float 8s ease-in-out infinite;will-change:transform}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

/* metrics */
.metrics{display:flex;gap:22px;padding:14px 0;border-top:1px solid rgba(255,255,255,.06)}
.metrics .item{opacity:.95}
.metrics .value{font-size:20px;font-weight:900}

/* sections & cards */
.section{padding:34px 0} /* ещё меньше отступы */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(14px);transition:transform .35s ease, box-shadow .35s ease, opacity .45s ease}
.card.visible{opacity:1;transform:translateY(0)}
.card:hover{box-shadow:0 18px 42px rgba(0,170,255,.30), 0 0 0 1px rgba(0,213,255,.18) inset}
.card__icon{width:26px;height:26px;margin-bottom:8px;opacity:.95}
.card h3{margin:.2em 0 .2em}
.card p{color:var(--muted);margin:0}

/* news & faq */
.news{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.news .card{min-height:108px}
.details{background:var(--card2);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px}
.details+.details{margin-top:8px}
details>summary{cursor:pointer;font-weight:700;list-style:none}
details>summary::-webkit-details-marker{display:none}

/* footer */
.footer{padding:20px 0;border-top:1px solid rgba(255,255,255,.06);color:#b9cfe0}

/* responsive */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .nav{gap:12px}
  .logo img{width:34px;height:34px}
  .hero h1{font-size:34px}
  .section{padding:28px 0}
  .metrics{gap:16px}
}

/* ---- Mobile fixes ---- */
:root{ --safe-top: env(safe-area-inset-top, 0px); }

.header{z-index:1200;  padding-top: calc(8px + var(--safe-top)); }

/* nav: prevent wrapping mess on narrow screens */
@media (max-width: 760px){
  .nav{gap:14px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:6px}
  .nav a{display:inline-block; padding:8px 0}
}

/* hero: buttons in a row wrapper */
.btn-row{display:flex; gap:12px; flex-wrap:wrap}
@media (max-width: 560px){
  .hero h1{font-size:30px}
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%; justify-content:center}
  .hero__grid{gap:12px}
  .metrics{gap:12px}
}

/* avoid two-line crowding under header */
@media (max-width: 380px){
  .logo strong{font-size:18px}
}


.burger{display:none; width:40px; height:40px; border:none; background:transparent; position:relative}
.burger span{position:absolute; left:9px; right:9px; height:2.5px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:26px}

.mobile-panel{display:none}

@media (max-width:760px){
  .nav{display:none}              /* hide desktop nav */
  .header .btn{display:none}      /* hide header CTA */
  .burger{display:inline-block}
  .mobile-panel{display:block; position:fixed; top:0; left:0; right:0; transform:translateY(-110%);
    background:rgba(7,21,36,.85); backdrop-filter:blur(10px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.08); padding:calc(10px + env(safe-area-inset-top,0px)) 16px 16px;
    transition:transform .28s ease; z-index:999}
  .mobile-panel.open{transform:translateY(0)}
  .mobile-panel a{display:block; padding:12px 4px; color:#fff; font-weight:700}
  .mobile-panel .mobile-cta{margin-top:6px; display:block}
  /* animate burger into X */
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}



.burger{display:none; width:40px; height:40px; border:none; background:transparent; position:relative; margin-left:8px}
.burger span{position:absolute; left:9px; right:9px; height:2.5px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:26px}
.mobile-panel{display:none}
.mobile-overlay{display:none}

@media (max-width:760px){
  .nav{display:none}
  .header-cta{display:none}
  .burger{display:inline-block}
  .mobile-panel{display:block; position:fixed; top:0; left:0; right:0; transform:translateY(-110%);
    background:rgba(7,21,36,.93); backdrop-filter:blur(10px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.08); padding:calc(10px + env(safe-area-inset-top,0px)) 16px 16px;
    transition:transform .28s ease; z-index:999}
  .mobile-panel.open{transform:translateY(0)}
  .mobile-panel a{display:block; padding:12px 4px; color:#fff; font-weight:700}
  .mobile-panel .mobile-cta{margin-top:6px; display:block}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* body scroll lock removed */
  .mobile-overlay{display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:998; opacity:0; pointer-events:none; transition:opacity .2s}
  .mobile-overlay.open{opacity:1; pointer-events:auto}
}

/* === Burger + panel === */
.burger{display:none;width:40px;height:40px;border:none;background:transparent;position:relative;margin-left:8px}
.burger span{position:absolute;left:9px;right:9px;height:2.5px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:26px}
.mobile-panel{display:none}
.mobile-overlay{display:none}
@media (max-width:760px){
  .nav{display:none}
  .header-cta{display:none}
  .burger{display:inline-block}
  .mobile-panel{display:block;position:fixed;top:0;left:0;right:0;transform:translateY(-110%); z-index:1000;
    background:rgba(7,21,36,.93);backdrop-filter:blur(10px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.08);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 16px;
    transition:transform .28s ease;z-index:999}
  .mobile-panel.open{transform:translateY(0)}
  .mobile-panel a{display:block;padding:12px 4px;color:#fff;font-weight:700}
  .mobile-panel .mobile-cta{margin-top:6px;display:block}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* body scroll lock removed */
  .mobile-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:998;opacity:0;pointer-events:none;transition:opacity .2s}
  .mobile-overlay.open{opacity:1;pointer-events:auto}
}
/* SAFE: hero illustration constraints */
.hero{overflow:hidden}
.hero-art img{width:100%;height:auto !important;max-height:320px !important;object-fit:contain !important;display:block}
@media (max-width:560px){ .hero-art img{max-height:260px !important} }

@media (max-width:760px){
  /* panel under header */
  .mobile-panel{padding-top:72px;}
  .mobile-overlay{z-index:999;}
}

/* ===== Mobile panel close & spacing tweaks ===== */
@media (max-width:760px){
  .mobile-panel{padding-top:calc(56px + env(safe-area-inset-top,0px));}
  .mobile-panel a{padding:14px 6px}
  .mobile-close{
    position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); right:12px;
    width:36px; height:36px; border:none; background:transparent; z-index:1201;
  }
  .mobile-close::before, .mobile-close::after{
    content:""; position:absolute; left:8px; right:8px; top:17px; height:2px;
    background:#fff; border-radius:2px;
  }
  .mobile-close::before{ transform:rotate(45deg); }
  .mobile-close::after{ transform:rotate(-45deg); }
}
/* Ensure overlay stays below header and close button */
.mobile-overlay{z-index:1100}
.mobile-panel{z-index:1150}