/* =============================
   Funkit — Logo-matched Theme (V1.1)
   ============================= */
:root{
  --navy:#0F172A;        /* deep navy background */
  --blue:#3B82F6;        /* wordmark blue */
  --lime:#C8FA5F;        /* power U+i accent */
  --ink:#0A0F1A;         /* very dark for text on lime */
  --surface:#111A2E;     /* cards */
  --line:rgba(255,255,255,.08);
  --text:#E6EAF2;
  --muted:#A9B4C7;
  --radius:16px;
  --shadow:0 8px 24px rgba(3, 7, 18, .35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--navy);
  line-height:1.6;
}

/* Typography */
h1,h2,h3{font-family:Poppins, Inter, system-ui, sans-serif;margin:0 0 .5rem}
h1{font-size:clamp(2.4rem, 2.6vw + 1.6rem, 3.8rem);line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.8rem, 1.2vw + 1.1rem, 2.2rem)}
p{margin:.5rem 0 1rem;color:var(--text)}
small, .meta{color:var(--muted)}

/* Layout helpers */
.container{width:min(1120px, 92%); margin-inline:auto}
.grid{display:grid; gap:1.2rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid-3{grid-template-columns:1fr}}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(15,23,42,.75);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.logo{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.logo-word{display:flex; align-items:center; gap:.15rem; font-family:Poppins, sans-serif; font-weight:800; letter-spacing:.2px; font-size:1.5rem}
.logo-word .f, .logo-word .nkit{color:var(--blue)}
.logo-word .power{display:inline-flex; width:30px; height:30px; border-radius:10px; align-items:center; justify-content:center; background:transparent}
.logo-word .power img{width:28px;height:28px; display:block}

.nav-actions{display:flex; align-items:center; gap:1.2rem}
.nav-links{display:flex; gap:1rem; align-items:center}
.nav-links a{
  color:var(--text);
  text-decoration:none;
  padding:.5rem .7rem;
  border-radius:10px;
  transition:background .2s ease, color .2s ease;
}
.nav-links a:not(.cta):hover,
.nav-links a:not(.cta):focus-visible{background:rgba(255,255,255,.06)}
.nav-links a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.nav-links .cta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.6rem 1rem;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:600;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, filter .2s ease, transform .15s ease;
  transform:translateY(0);
}

/* Hero */
.hero{padding:clamp(60px, 8vw, 120px) 0 52px}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:2rem}
@media (max-width:980px){.hero-inner{grid-template-columns:1fr}}
.hero h1 em{font-style:normal; color:var(--blue)}
.hero p{color:var(--muted)}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.05rem;
  border-radius:12px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font-weight:600;
  transition:background .2s ease, color .2s ease, filter .2s ease, transform .15s ease;
}
.btn:not(.primary):hover{background:rgba(255,255,255,.06)}
.btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn.primary,
.nav-links .cta{
  background:var(--lime);
  color:var(--ink);
  border:none;
  box-shadow:var(--shadow);
}
.btn.primary:hover,
.nav-links .cta:hover{
  filter:brightness(1.05);
  transform:translateY(-1px) scale(1.03);
}
.btn.primary:active{
  transform:scale(.98);
}
.nav-links .cta:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.nav-links .cta:active{transform:scale(.98)}
.btn.ghost{border:1px solid rgba(200,250,95,.35); color:var(--lime)}

.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.25rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.lang-switch button{
  font:inherit;
  background:none;
  border:none;
  color:var(--muted);
  padding:.25rem .6rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lang-switch button:hover,
.lang-switch button:focus-visible{
  color:var(--ink);
  background:var(--lime);
}
.lang-switch button:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.lang-switch button.active{
  background:var(--lime);
  color:var(--ink);
  box-shadow:var(--shadow);
}

@media (max-width:720px){
  .nav{flex-direction:column; align-items:flex-start; gap:.75rem}
  .nav-actions{width:100%; flex-wrap:wrap; justify-content:space-between}
  .nav-links{flex-wrap:wrap}
}

.hero-media{
  position:relative; aspect-ratio:16/10; border-radius:var(--radius);
  background:linear-gradient(145deg, rgba(59,130,246,.12), rgba(200,250,95,.10));
  border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden;
}
.hero-play{position:absolute; inset:0; display:grid; place-items:center; cursor:pointer}
.hero-play button{
  width:72px;height:72px;border-radius:50%; border:3px solid var(--lime);
  background:rgba(0,0,0,.25); color:var(--navy);
}
.hero-play button::after{content:''; display:block; margin: 0 auto; width:0;height:0;border-left:18px solid var(--lime); border-top:11px solid transparent;border-bottom:11px solid transparent; transform:translateX(2px)}
.hero-media--sticker{display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at top, rgba(200,250,95,.25), rgba(15,23,42,.9));}
.hero-sticker{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:2rem 3rem;
  border-radius:50% 45% 55% 50%;
  background:repeating-linear-gradient(135deg, #fffbeb, #fffbeb 10px, #fde047 10px, #fde047 20px);
  color:#1f2937;
  text-transform:uppercase;
  font-weight:700;
  text-align:center;
  box-shadow:0 15px 35px rgba(0,0,0,.35);
  transform:rotate(-6deg);
}
.hero-sticker span{font-size:1rem; letter-spacing:.3em}
.hero-sticker strong{font-size:1.4rem; letter-spacing:.1em}

/* Proof bar */
.proof{padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.proof ul{display:flex; gap:1.2rem; flex-wrap:wrap; list-style:none; padding:0; margin:0}
.proof li{display:flex; align-items:center; gap:.75rem; padding:.5rem 1.1rem; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.07); color:var(--muted)}
.proof-label{white-space:nowrap}
.proof-logos{display:flex; align-items:center; gap:.75rem}
.proof-logo{display:block; height:1.85rem; width:auto}

@media (max-width:640px){
  .proof ul{gap:.75rem}
  .proof li{padding:.45rem .9rem; gap:.6rem}
  .proof-logo{height:1.6rem}
}

/* Kits */
.section{padding:76px 0}
.kits .card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.2rem; box-shadow: var(--shadow);
}
.card h3{margin:.4rem 0; color:var(--blue)}
.card .meta{color:var(--muted); font-size:.95rem}
.card .actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem}
.badge{display:inline-flex; gap:.45rem; align-items:center; background:rgba(200,250,95,.12); color:var(--lime); border:1px solid rgba(200,250,95,.3); padding:.2rem .6rem; border-radius:999px; font-size:.85rem}

/* Compare / Why */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.compare .tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem}
.compare .tile h4{margin:.2rem 0  .6rem; color:var(--blue)}
.compare ul{
  margin:0;
  padding-left:0;
  list-style:none;
  color:var(--muted);
}
.compare li{
  position:relative;
  padding-left:2.1rem;
  margin-bottom:.6rem;
}
.compare li:last-child{margin-bottom:0}
.compare li::before{
  content:'';
  position:absolute;
  top:.2rem;
  left:0;
  width:1.3rem;
  height:1.3rem;
  background-repeat:no-repeat;
  background-size:contain;
}
.compare .tile:first-child li::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23DC2626%22%20d%3D%22M2%203h4v12H2V3zm20%2011c0%201.1-.9%202-2%202h-6.31l.95%204.57.03.32c0%20.41-.17.79-.44%201.06L13.17%2021%206.59%2014.41C6.22%2014.05%206%2013.55%206%2013V3c0-1.1.9-2%202-2h9c.78%200%201.48.45%201.84%201.13l3.02%205.48c.09.25.14.52.14.8v3z%22/%3E%3C/svg%3E");
}
.compare .tile:last-child li::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%2316A34A%22%20d%3D%22M2%2021h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17%201%206.59%207.59C6.22%207.95%206%208.45%206%209v10c0%201.1.9%202%202%202h9c.78%200%201.48-.45%201.84-1.13l3.02-5.48c.09-.25.14-.52.14-.8v-3z%22/%3E%3C/svg%3E");
}
@media (max-width:980px){.compare{grid-template-columns:1fr}}

/* CTA wide */
.cta-wide{padding:56px 0; background:rgba(59,130,246,.08); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-wide .box{display:flex; gap:1rem; align-items:center; justify-content:space-between; background:rgba(255,255,255,.02); border:1px solid var(--line); padding:1rem; border-radius:var(--radius)}
.cta-wide h3{color:var(--lime)}
@media (max-width:980px){.cta-wide .box{flex-direction:column; align-items:stretch}}

/* Contact */
.contact{border-top:1px solid var(--line); background:rgba(17,26,46,.6)}
.contact__intro{margin-bottom:2rem}
.contact__grid{grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start}
.contact__details,
.contact__form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow)}
.contact__details ul{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:1.1rem}
.contact__details li span{font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:.75rem}
.contact__form form{display:flex; flex-direction:column; gap:.6rem}
.contact__form label{font-size:.95rem; font-weight:600}
.contact__form input,
.contact__form textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(15,23,42,.4);
  color:var(--text);
  padding:.85rem 1rem;
  font:inherit;
}
.contact__form input:focus,
.contact__form textarea:focus{outline:2px solid var(--blue); border-color:var(--blue)}
.contact__feedback{min-height:1.4rem; font-size:.9rem; color:var(--muted); margin:0}
.contact__feedback.is-success{color:var(--lime)}
.contact__feedback.is-error{color:#f87171}
.contact__form button[disabled]{opacity:.65; cursor:not-allowed}
.contact__form button.is-loading::after{
  content:'…';
  margin-left:.4rem;
}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr; gap:1.5rem}}

/* Footer */
.footer{padding:48px 0; color:var(--muted)}

/* Cookie banner */
.cookie{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  display:none; background:rgba(15,23,42,.96); border:1px solid var(--line); border-radius:16px; padding:1rem; box-shadow:var(--shadow)
}
.cookie.visible{display:block}
.cookie .row{display:flex; gap:.8rem; align-items:center; justify-content:space-between}
.cookie p{margin:0; color:var(--muted)}
.cookie .btns{display:flex; gap:.5rem}

/* Modal (video) */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; place-items:center; z-index:150}
.modal.open{display:grid}
.modal .panel{width:min(960px, 92%); background:#0b1222; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.modal header{display:flex; justify-content:space-between; align-items:center; padding:.6rem 1rem; border-bottom:1px solid var(--line)}
.modal header h4{margin:0; color:var(--blue)}
.modal .content{aspect-ratio:16/9; background:#000}
.modal .content iframe{width:100%; height:100%; border:0}
.close{background:none;border:1px solid var(--line); color:#fff; border-radius:10px; padding:.4rem .6rem; cursor:pointer}
.close:hover{background:rgba(255,255,255,.08)}