:root{
  --purple:#8047fe;
  --text:#FFFFFF;

  --header-h:96px;
  --header-pad-x:24px;

  --container:1200px;
  --pad-x:clamp(16px,4vw,56px);

  --title: clamp(84px, 7.3vw, 150px);
  --subtitle: clamp(18px, 1.55vw, 24px);

  --social-w: 56px;
  --social-h: 28px;
  --social-radius: 8px;
  --social-icon: 16px;

  --store-h: 76px;
  --store-radius: 18px;
  --store-pad-x: 40px;

  --phone-sm:clamp(170px,16vw,240px);
  --phone-md:clamp(210px,19vw,295px);

  --hero-left-shift: 60px;
  --hero-left-shift-mobile: 28px;

  --header-btn-w: 180px;
  --header-btn-py: 15px;
  --header-btn-px: 18px;

  --header-btn-h: 64px;

  --page-blur: 34px;
  --page-dim: 0.20;
  --glass-border: rgba(255,255,255,0.10);
  --glass-fill: rgba(10, 6, 20, 0.18);

  --mobile-hero-top: 56px;

  --lang-h: 38px;
  --lang-radius: 14px;
  --lang-bg: rgba(10, 6, 20, 0.55);
  --lang-stroke: rgba(255,255,255,0.14);
  --lang-active: rgba(255,255,255,0.12);

  --p1-size: 6px;
  --p2-size: 8px;
  --p3-size: 4px;
  --p4-size: 10px;
  --p5-size: 5px;

  --p-a1: 0.55;
  --p-a2: 0.34;
  --p-glow: 10px;
  --p-blur: 0.6px;

  --p-dur-1: 38s;
  --p-dur-2: 52s;
  --p-dur-3: 44s;
  --p-dur-4: 60s;
  --p-dur-5: 48s;
}

*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;display:block;}
a{color:inherit;}
html,body{height:100%;}

body{
  font-family:"Montserrat",sans-serif;
  color:var(--text);

  background:
    url("./assets/bg.svg") center / cover no-repeat fixed;
  background-color:#000;

  overflow-x:hidden;
  padding-top:var(--header-h);

  position:relative;
  isolation:isolate;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;

  background: rgba(0,0,0,var(--page-dim));

  -webkit-backdrop-filter: blur(var(--page-blur)) saturate(1.15) contrast(1.05);
  backdrop-filter: blur(var(--page-blur)) saturate(1.15) contrast(1.05);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 50% 40%,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 35%,
      rgba(0,0,0,0.00) 70%
    );
  opacity:.55;
}

@keyframes floatParticle {
  0%   { transform: translate3d(0, 18vh, 0); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate3d(26px, -55vh, 0); opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(-18px, -130vh, 0); opacity: 0; }
}

.particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.particle{
  position:absolute;
  bottom:-24vh;
  left:var(--x, 50%);
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius:999px;

  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255, var(--p-a1)) 0%,
    rgba(128,71,254, var(--p-a2)) 38%,
    rgba(128,71,254, 0) 72%
  );

  filter: blur(var(--p-blur));
  -webkit-filter: blur(var(--p-blur));

  box-shadow:
    0 0 var(--p-glow) rgba(159,95,255, 0.24),
    0 0 18px rgba(255,255,255, 0.10);

  opacity: 0;
  will-change: transform, opacity;

  animation: floatParticle var(--d, 44s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.particle.p1{ --x: 10%; --s: var(--p1-size); --d: var(--p-dur-1); --delay: -6s; }
.particle.p2{ --x: 26%; --s: var(--p2-size); --d: var(--p-dur-2); --delay: -18s; }
.particle.p3{ --x: 44%; --s: var(--p3-size); --d: var(--p-dur-3); --delay: -28s; }
.particle.p4{ --x: 68%; --s: var(--p4-size); --d: var(--p-dur-4); --delay: -10s; }
.particle.p5{ --x: 84%; --s: var(--p5-size); --d: var(--p-dur-5); --delay: -22s; }

.particle.p6{ --x: 18%; --s: 4px;  --d: 57s; --delay: -34s; }
.particle.p7{ --x: 36%; --s: 7px;  --d: 63s; --delay: -40s; }
.particle.p8{ --x: 58%; --s: 5px;  --d: 50s; --delay: -16s; }
.particle.p9{ --x: 76%; --s: 4px;  --d: 46s; --delay: -8s;  }
.particle.p10{--x: 92%; --s: 6px;  --d: 66s; --delay: -26s; }

.particle.p11{ --x: 6%;  --s: 5px;  --d: 72s; --delay: -52s; }
.particle.p12{ --x: 32%; --s: 4px;  --d: 54s; --delay: -21s; }
.particle.p13{ --x: 62%; --s: 7px;  --d: 68s; --delay: -37s; }
.particle.p14{ --x: 88%; --s: 5px;  --d: 58s; --delay: -15s; }

@media (max-width: 980px){
  :root{
    --p-a1: 0.48;
    --p-a2: 0.28;
    --p-glow: 8px;
    --p-blur: 0.5px;
  }
  .particle.p7,
  .particle.p10{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .particles{ display:none; }
}

.main-header{ z-index:1000; }
.hero{ position:relative; z-index:2; }

.container{
  width:min(var(--container),100% - (var(--pad-x) * 2));
  margin-inline:auto;
}

.main-header{
  height:var(--header-h);

  background: var(--glass-fill);
  border-bottom:1px solid var(--glass-border);

  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);

  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
}

.main-header .container{
  width: 100%;
  margin: 0;
  padding-left: var(--header-pad-x);
  padding-right: var(--header-pad-x);
}

.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:relative;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.header-logo{
  width:52px;
  height:52px;
  object-fit:contain;
}

.logo-text{
  font-weight:900;
  letter-spacing:1px;
  font-size:1.35rem;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.lang-switch{
  display:flex;
  align-items:center;
  height: var(--lang-h);
  padding: 4px;
  border-radius: var(--lang-radius);
  background: var(--lang-bg);
  border: 1px solid var(--lang-stroke);

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.lang-btn{
  height: calc(var(--lang-h) - 8px);
  min-width: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: calc(var(--lang-radius) - 6px);
  background: transparent;
  color: rgba(255,255,255,0.88);
  font-weight: 900;
  letter-spacing: .6px;
  cursor: pointer;
  font-size: .82rem;
}

.lang-btn.is-active{
  background: var(--lang-active);
  color: #fff;
}

.nav-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  justify-content:flex-end;
}

.btn{
  text-decoration:none;
  font-weight:900;

  font-size: .95rem;
  letter-spacing:.6px;

  width: var(--header-btn-w);
  padding: var(--header-btn-py) var(--header-btn-px);

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  white-space: normal;
  line-height: 1.05;

  border-radius:14px;
  transition:transform .15s ease, opacity .15s ease;
}

.nav-buttons .btn{
  height: var(--header-btn-h);
}

.btn:hover{transform:translateY(-1px);opacity:.95;}

.btn-outline,
.btn-solid{
  background: rgba(10, 6, 20, 0.78);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.menu-toggle{
  display:none;
}

.menu-btn{
  display:none;
}

.nav-mobile{
  display:none;
}

.nav-mobile-top{
  margin-bottom: 10px;
}

.hero{
  min-height:calc(100svh - var(--header-h));
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-grid{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  align-items:center;
  gap:clamp(18px,4vw,56px);
  padding-block:clamp(18px,4vh,46px);
}

.hero-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left: var(--hero-left-shift);
}

.social-icons{
  display:flex;
  gap:12px;
  margin-bottom:18px;
}

.social{
  width:var(--social-w);
  height:var(--social-h);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--social-radius);
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  text-decoration:none;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.social img{
  width:var(--social-icon);
  height:var(--social-icon);
  opacity:.95;
}

.social-accent{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

.main-title{
  font-weight:900;
  text-transform:uppercase;
  font-size:var(--title);
  line-height:0.86;
  letter-spacing:1px;
  margin-bottom:12px;
}

.subtitle{
  font-size:var(--subtitle);
  font-weight:500;
  opacity:.86;
  margin-bottom:22px;
}

.store-buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.store{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: var(--store-h);
  padding-inline: var(--store-pad-x);
  border-radius: var(--store-radius);

  overflow:hidden;
  border:1px solid rgba(255,255,255,0.30);
  background: rgba(0,0,0,0.18);
  text-decoration:none;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.store img{
  height: calc(var(--store-h) - 16px);
  width:auto;
}

@media (max-height: 820px){
  :root{
    --title: clamp(72px, 7vw, 120px);
    --hero-left-shift: 40px;
  }
}

@media (max-width: 980px){
  :root{
    --header-h: 96px;
    --header-pad-x: 14px;

    --title: clamp(64px, 14vw, 120px);
    --subtitle: clamp(18px, 4.2vw, 22px);

    --social-w: 58px;
    --social-h: 28px;
    --social-icon: 16px;

    --store-h: 66px;
    --store-radius: 18px;
    --store-pad-x: 22px;

    --page-blur: 28px;

    --mobile-hero-top: 70px;
  }

  body{ overflow-y:auto; }

  .nav-buttons{
    display:none;
  }

  .menu-toggle{
    display:block;
    position:absolute;
    opacity:0;
    pointer-events:none;
  }

  .menu-btn{
    display:inline-flex;
    width:44px;
    height:44px;
    border-radius:14px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.14);
    background: rgba(10, 6, 20, 0.55);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .menu-btn span{
    position:relative;
    width:18px;
    height:2px;
    background:#fff;
    border-radius:2px;
    display:block;
    opacity:.92;
  }
  .menu-btn span::before,
  .menu-btn span::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:#fff;
    border-radius:2px;
    opacity:.92;
  }
  .menu-btn span::before{ top:-6px; }
  .menu-btn span::after{ top:6px; }

  .nav-mobile{
    display:block;
    position:absolute;
    top: calc(100% + 10px);
    right: var(--header-pad-x);
    width: min(280px, calc(100vw - (var(--header-pad-x) * 2)));
    padding: 12px;
    border-radius: 18px;

    background: rgba(10, 6, 20, 0.62);
    border: 1px solid rgba(255,255,255,0.14);

    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);

    box-shadow: 0 18px 40px rgba(0,0,0,0.45);

    opacity:0;
    transform: translateY(-6px);
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }

  #mobile-menu-toggle:checked ~ .nav-mobile{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }

  .lang-switch--mobile{
    width:100%;
    justify-content:space-between;
  }
  .lang-switch--mobile .lang-btn{
    flex:1;
    min-width: 0;
  }
  .lang-switch--mobile .lang-btn + .lang-btn{
    margin-left: 6px;
  }

  .nav-mobile .m-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    padding: 14px 14px;
    border-radius: 16px;
    font-weight: 900;
    letter-spacing: .6px;
    text-decoration:none;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .nav-mobile .m-btn + .m-btn{
    margin-top:10px;
  }

  .hero{
    overflow:visible;
    min-height:auto;
    padding-bottom:36px;
    padding-top: var(--mobile-hero-top);
  }

  .hero-grid{
    grid-template-columns:1fr;
    padding-block:22px 10px;
  }

  .hero-left{
    text-align:left;
    align-items:flex-start;
    padding-left: var(--hero-left-shift-mobile);
    padding-right: 12px;
  }

  .social-icons{justify-content:flex-start;}
  .store-buttons{justify-content:flex-start;}
}

@media (max-width: 520px){
  .header-logo{width:34px;height:34px;}
  .logo-text{font-size:1rem;}
  :root{
    --hero-left-shift-mobile: 18px;
    --mobile-hero-top: 62px;
  }

  .lang-switch{
    height: 34px;
  }
  .lang-btn{
    font-size: .78rem;
    padding: 0 10px;
  }
}