@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   PIXLET — Design tokens
   Convention: semantic kebab-case (BEM-ish)
   Layout engine: CSS Grid (primary) + Flex (aux)
   Spacing scale (1rem base): 0.5 / 1 / 1.5 / 2 / 3 / 4 / 5 / 7
   Radius language: 20 / 28 / 34 / 999
   Shadow language: soft dark ambient + neon glow
   ============================================================ */

:root{
  --bg:      #0a0d16;
  --bg-2:    #0d111f;
  --surface: #141a2b;
  --surface-2:#1a2237;
  --line:    rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);

  --ink:     #f3f7ff;
  --ink-2:   #b4c0d8;
  --ink-3:   #8695b4;

  --pink:    #ff3d9a;
  --blue:    #3b78ff;
  --lemon:   #e8f24a;

  --grad:        linear-gradient(115deg, var(--pink) 0%, var(--lemon) 52%, var(--blue) 100%);
  --grad-soft:   linear-gradient(115deg, rgba(255,61,154,.20), rgba(232,242,74,.12) 52%, rgba(59,120,255,.20));
  --grad-text:   linear-gradient(115deg, #ff5fb0 0%, var(--lemon) 52%, #5ea0ff 100%);

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, monospace;

  --radius-s: 20px;
  --radius-m: 28px;
  --radius-l: 34px;

  --pad: clamp(1.15rem, 4.5vw, 2.25rem);

  --shadow: 0 24px 50px -28px rgba(0,0,0,.85);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -24px rgba(255,61,154,.30);
  --focus: 0 0 0 3px rgba(232,242,74,.55);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:clamp(1rem,.6rem + .55vw,1.075rem);
  line-height:1.6;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(255,61,154,.20), transparent 60%),
    radial-gradient(1000px 640px at 105% 0%,  rgba(59,120,255,.22), transparent 58%),
    radial-gradient(900px 700px at 50% 120%,  rgba(232,242,74,.12), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
::selection{ background:var(--lemon); color:#0a0d16; }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:12px; }

/* ---------- container ---------- */
.wrap{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding-inline:var(--pad);
}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.03;
  letter-spacing:-.015em;
  font-weight:700;
}
.h1{ font-size:clamp(2.4rem, 1rem + 4.7vw, 4.4rem); }
.h2{ font-size:clamp(1.95rem, 1rem + 2.9vw, 3.05rem); }
.h3{ font-size:clamp(1.2rem, .95rem + .9vw, 1.55rem); font-weight:600; }
p{ color:var(--ink-2); }
.lead{ font-size:clamp(1.1rem,.95rem + .5vw,1.32rem); color:var(--ink-2); }
.muted{ color:var(--ink-3); }
.grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--lemon);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:var(--grad); display:inline-block;
}

/* ---------- section shell ---------- */
.sec{ padding-block:clamp(4rem, 7vw, 7rem); position:relative; }
.sec-head{ max-width:46rem; margin-bottom:clamp(2rem,4vw,3.25rem); }
.sec-head .h2{ margin:.9rem 0 1rem; }
.sec-head p{ color:var(--ink-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-body); font-weight:700; font-size:1rem;
  line-height:1; padding:1rem 1.6rem; border-radius:16px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{
  background:var(--grad); color:#0a0d16;
  box-shadow:0 12px 34px -12px rgba(255,61,154,.65);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 46px -14px rgba(255,61,154,.75); }
.btn-ghost{
  background:rgba(255,255,255,.03); color:var(--ink);
  border-color:var(--line-strong);
}
.btn-ghost:hover{ transform:translateY(-3px); background:rgba(255,255,255,.08); border-color:var(--lemon); }
.btn-sm{ padding:.7rem 1.1rem; font-size:.9rem; border-radius:12px; }
.btn-block{ width:100%; }

/* ---------- header / nav ---------- */
.site-head{ position:sticky; top:0; z-index:100; }
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(9,12,20,.62);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.topbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:74px;
}
.brand{ display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand__mark{
  width:40px; height:40px; border-radius:12px; background:var(--grad);
  display:grid; place-items:center;
  box-shadow:0 8px 22px -8px rgba(255,61,154,.7);
}
.brand__mark svg{ width:24px; height:24px; }
.brand__name{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  letter-spacing:-.02em; color:var(--ink);
}
.nav{ display:flex; align-items:center; gap:.35rem; }
.nav__link{
  text-decoration:none; color:var(--ink-2); font-weight:600; font-size:.95rem;
  padding:.55rem .8rem; border-radius:11px; position:relative;
  transition:color .2s ease, background .2s ease;
}
.nav__link:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.nav__link.is-active{ color:var(--lemon); }
.nav__link.is-active::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.15rem;
  height:2px; border-radius:2px; background:var(--grad);
}
.head-actions{ display:flex; align-items:center; gap:.55rem; }

.burger{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:12px; right:12px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:22px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(4.5rem, 8vw, 7.5rem); overflow:hidden; }
.hero__grid{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1.05fr .95fr; align-items:center;
}
.hero__title{ margin:1.3rem 0 1.4rem; }
.hero__sub{ font-size:clamp(1.05rem,.95rem + .5vw,1.28rem); max-width:34rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.4rem; }
.hero__meta li{ list-style:none; display:flex; align-items:center; gap:.5rem; font-size:.92rem; color:var(--ink-2); font-weight:500; }
.hero__meta li svg{ width:18px; height:18px; color:var(--lemon); flex:none; }

/* hero visual: pixel sticker stage */
.stage{ position:relative; aspect-ratio:1/1; max-width:520px; width:100%; margin:0 auto; }
.stage__ring{
  position:absolute; inset:6%; border-radius:var(--radius-l);
  background:var(--grad-soft); border:1px solid var(--line);
  filter:blur(2px);
}
.stage__grid{
  position:absolute; inset:14%; border-radius:26px; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.05) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(255,255,255,.05) 23px 24px),
    var(--surface);
  border:1px solid var(--line);
}
.stage__blob{
  position:absolute; inset:24%; border-radius:44%;
  background:radial-gradient(circle at 35% 30%, rgba(255,61,154,.55), transparent 55%),
             radial-gradient(circle at 70% 70%, rgba(59,120,255,.55), transparent 55%);
  filter:blur(6px);
}
.chip{
  position:absolute; display:grid; place-items:center;
  border-radius:18px; border:1px solid var(--line-strong);
  background:rgba(20,26,43,.85); backdrop-filter:blur(6px);
  box-shadow:var(--shadow);
}
.chip svg{ width:44%; height:44%; }
.chip--1{ width:92px; height:92px; top:4%;  left:8%;  background:linear-gradient(135deg, rgba(255,61,154,.25), rgba(20,26,43,.9)); animation:float 6s ease-in-out infinite; }
.chip--2{ width:74px; height:74px; top:20%; right:6%; background:linear-gradient(135deg, rgba(232,242,74,.25), rgba(20,26,43,.9)); animation:float 7s ease-in-out infinite .6s; }
.chip--3{ width:84px; height:84px; bottom:6%; left:14%; background:linear-gradient(135deg, rgba(59,120,255,.28), rgba(20,26,43,.9)); animation:float 5.4s ease-in-out infinite .3s; }
.chip--4{ width:64px; height:64px; bottom:16%; right:14%; background:linear-gradient(135deg, rgba(255,95,176,.22), rgba(20,26,43,.9)); animation:float 6.5s ease-in-out infinite .9s; }
.stage__badge{
  position:absolute; top:8%; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lemon);
  background:rgba(10,13,22,.8); border:1px solid var(--line);
  padding:.35rem .8rem; border-radius:999px;
}

/* ---------- card grid ---------- */
.grid-cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.1rem,2vw,1.5rem);
}
.card{
  position:relative; padding:1.9rem; border-radius:var(--radius-m);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--grad); opacity:0; transition:opacity .3s ease;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow-glow); }
.card:hover::before{ opacity:1; }
.card__ico{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:var(--grad-soft); border:1px solid var(--line); margin-bottom:1.3rem;
}
.card__ico svg{ width:28px; height:28px; }
.card h3{ margin-bottom:.6rem; }
.card p{ font-size:.98rem; }

/* ---------- stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
}
.stat{
  padding:2rem 1.6rem; border-radius:var(--radius-m); text-align:center;
  background:var(--surface); border:1px solid var(--line);
}
.stat__num{
  font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(2.1rem,1.3rem + 2.4vw,3.3rem);
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__label{ margin-top:.7rem; font-size:.95rem; color:var(--ink-2); font-weight:500; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden;
  padding:clamp(2.6rem,5vw,4rem) clamp(1.5rem,4vw,3rem);
  border-radius:var(--radius-l);
  background:var(--surface-2); border:1px solid var(--line-strong);
  box-shadow:var(--shadow-glow);
}
.cta-band__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center;
}
.cta-band h2{ margin-bottom:.7rem; }
.cta-band__in p{ max-width:32rem; }
.cta-band__in .btn-primary{ white-space:nowrap; }
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--grad); opacity:.12; pointer-events:none;
}
.cta-band::after{
  content:""; position:absolute; width:320px; height:320px; border-radius:50%;
  right:-80px; top:-120px; background:var(--grad); filter:blur(70px); opacity:.4; z-index:0;
}

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:.9rem; max-width:52rem; }
.faq__item{
  border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--surface); overflow:hidden;
}
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  text-align:left; cursor:pointer; background:transparent; border:0;
  padding:1.25rem 1.4rem; font-family:var(--font-display); font-weight:600;
  font-size:1.08rem; color:var(--ink);
}
.faq__q .faq__mark{
  flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--grad-soft); border:1px solid var(--line);
  font-family:var(--font-mono); font-weight:700; color:var(--lemon);
  transition:transform .3s ease;
}
.faq__a{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease;
}
.faq__a > div{ overflow:hidden; }
.faq__a p{ padding:0 1.4rem 1.4rem; font-size:.99rem; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__item.is-open .faq__mark{ transform:rotate(45deg); }
.faq__item.is-open{ border-color:var(--line-strong); }

/* ---------- form / contact ---------- */
.form{ display:grid; gap:1.1rem; max-width:34rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-size:.9rem; font-weight:600; color:var(--ink-2); }
.field input,.field textarea{
  width:100%; padding:1rem 1.1rem; border-radius:14px;
  background:var(--bg-2); border:1px solid var(--line-strong); color:var(--ink);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,.field textarea:focus{ border-color:var(--lemon); box-shadow:var(--focus); outline:none; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }

/* ---------- footer ---------- */
.foot{
  margin-top:clamp(3rem,6vw,6rem);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,26,43,.55), rgba(9,12,20,.9));
  padding-block:clamp(3rem,5vw,4.5rem) 2rem;
}
.foot__grid{
  display:grid; gap:2.5rem;
  grid-template-columns:1.6fr 1fr 1fr 1.3fr;
}
.foot__brand .brand{ margin-bottom:1rem; }
.foot__brand p{ max-width:24rem; font-size:.95rem; }
.foot__col h4{
  font-family:var(--font-mono); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lemon);
  margin-bottom:1.1rem;
}
.foot__col a{
  display:block; text-decoration:none; color:var(--ink-2); font-size:.95rem;
  padding:.42rem 0; transition:color .2s ease, transform .2s ease;
}
.foot__col a:hover{ color:var(--ink); transform:translateX(4px); }
.foot__news p{ font-size:.95rem; margin-bottom:1rem; }
.foot__news form{ display:flex; gap:.6rem; }
.foot__news input{
  flex:1; min-width:0; padding:.85rem 1rem; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--line-strong); color:var(--ink);
}
.foot__news input:focus{ outline:none; border-color:var(--lemon); box-shadow:var(--focus); }
.foot__news .btn{ padding:.85rem 1.1rem; }
.foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--ink-3);
}
.foot__bottom nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.foot__bottom a{ text-decoration:none; transition:color .2s ease; }
.foot__bottom a:hover{ color:var(--lemon); }

/* ---------- misc helpers ---------- */
.divider{ height:1px; background:var(--line); }
.center{ text-align:center; }
.center .sec-head{ margin-inline:auto; }

/* ---------- keyframes ---------- */
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-16px); }
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero__grid{ grid-template-columns:1fr; }
  .stage{ max-width:440px; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:820px){
  .burger{ display:grid; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:.15rem;
    padding:1rem var(--pad) 1.5rem;
    background:rgba(9,12,20,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav__link{ padding:.85rem 1rem; font-size:1.05rem; }
  .nav__link.is-active::after{ display:none; }
  .nav__link.is-active{ background:rgba(255,255,255,.05); }
  .head-actions .btn{ display:none; }
  .grid-cards{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .cta-band__in{ grid-template-columns:1fr; }
  .cta-band__in .btn{ width:100%; }
  .form__row{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  .hero__meta{ gap:1rem; }
}
@media (max-width:480px){
  .grid-cards{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
}img,svg,video{max-width:100%;height:auto}*{box-sizing:border-box}body{margin:0}html{-webkit-text-size-adjust:100%}