/* =====================================================================
   VELOCITRON — design system v2
   Arah desain: "kelas coding yang berasa main" — playful, berani warna,
   tombol & kartu bergaya sticker (border tebal + bayangan offset),
   huruf judul bundar (Baloo 2), diselingi elemen bintang/roket sebagai
   penanda dunia coding-untuk-anak. Bahasa desain konsisten dipakai
   berulang supaya terasa satu produk, bukan tempelan dekorasi acak.
   ===================================================================== */

:root{
  --ink:#241748;           /* ungu tua hangat, dipakai sebagai "hitam" di seluruh halaman */
  --ink-soft:#372367;
  --primary:#6C4CE0;       /* ungu utama — identitas coding/magic */
  --primary-light:#8B72EF;
  --accent:#FF8A3D;        /* oranye — energi, roket */
  --accent-2:#2FD9C5;      /* mint — dipakai tipis sebagai penyeimbang */
  --spark:#FFC93C;         /* kuning — bintang, highlight */
  --pink:#FF5D8F;          /* merah muda — aksen ketiga kartu/ikon */
  --bg:#FFF8EC;            /* krem hangat, terasa "kertas gambar" */
  --surface:#FFFFFF;
  --text:#2E2154;
  --muted:#6C5D91;
  --border:#241748;        /* border tebal dipakai sebagai elemen struktur, bukan garis tipis abu */
  --border-soft:#E7DCF9;
  --gradient-brand: linear-gradient(135deg, var(--primary) 0%, #9B6BF2 45%, var(--pink) 100%);

  --font-display:'Baloo 2', 'Space Grotesk', sans-serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:30px;
  --radius-pill:999px;

  --pop-2: 3px 3px 0 var(--ink);
  --pop-3: 5px 5px 0 var(--ink);
  --pop-6: 8px 8px 0 var(--ink);
  --shadow-soft: 0 20px 45px -25px rgba(36,23,72,0.35);

  --maxw:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 8px 8px, rgba(36,23,72,0.07) 1.6px, transparent 1.6px);
  background-size:28px 28px;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--ink); line-height:1.18; font-weight:700; }
p{ margin:0; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}

.section{ padding:96px 0; position:relative; }
.section--tight{ padding:64px 0; }

/* ---------------------------------------------------------------------
   Header / nav
--------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(255,248,236,0.88);
  backdrop-filter:blur(10px);
  border-bottom:3px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  border-bottom-color:var(--ink);
  box-shadow:0 6px 0 -3px rgba(36,23,72,0.05);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
  position:relative;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--ink);
}
.brand-mark{ border-radius:12px; }
.nav-links{
  display:flex; align-items:center; gap:28px;
  font-weight:600; font-size:0.95rem;
}
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a:hover{ color:var(--primary); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
  border:2.5px solid var(--ink);
  background:var(--surface);
  box-shadow:var(--pop-2);
}
.nav-toggle span{
  display:block; width:20px; height:2.5px; background:var(--ink); position:relative;
}
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2.5px; background:var(--ink);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

/* ---------------------------------------------------------------------
   Eyebrow badges — dipakai sebagai penanda topik tiap section,
   tiap section punya warna/ikon berbeda supaya bukan sekadar label generik
--------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:0.86rem;
  font-weight:600;
  color:var(--ink);
  background:var(--spark);
  border:2.5px solid var(--ink);
  padding:6px 16px 6px 12px;
  border-radius:var(--radius-pill);
  box-shadow:var(--pop-2);
}
.eyebrow .dot-emoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex-shrink:0;
  color:var(--ink);
}
.eyebrow .dot-emoji svg{
  width:100%;
  height:100%;
  display:block;
}

.section-head{
  max-width:640px;
  margin-bottom:48px;
}
.section-head h2{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); margin-top:16px; }
.section-head p{ color:var(--muted); margin-top:14px; font-size:1.02rem; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------------------------------------------------------------------
   Buttons — gaya "sticker button": border tebal + bayangan offset,
   ditekan saat hover/klik supaya berasa interaktif seperti UI game
--------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-family:var(--font-display);
  font-size:1rem;
  border:2.5px solid var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  white-space:nowrap;
}
.btn:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; }
.btn--primary{
  background:var(--accent);
  color:var(--ink);
  box-shadow:var(--pop-3);
}
.btn--primary:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); background:#FF9B5C; }
.btn--primary:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.btn--ghost{
  background:var(--surface);
  color:var(--ink);
  box-shadow:var(--pop-2);
}
.btn--ghost:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:#FFF1DC; }
.btn--ghost:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.btn--light{
  background:var(--ink);
  color:#fff;
  border-color:rgba(255,255,255,0.5);
  box-shadow:4px 4px 0 rgba(255,255,255,0.25);
}
.btn--light:hover{ transform:translate(-2px,-2px); }
.btn--block{ width:100%; }


/* ---------------------------------------------------------------------
   Hero
--------------------------------------------------------------------- */
.hero{
  padding:64px 0 110px;
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute; inset:-25% -10% auto -10%;
  height:520px;
  background:radial-gradient(50% 50% at 20% 10%, rgba(255,138,61,0.16), transparent 70%),
             radial-gradient(45% 45% at 85% 5%, rgba(108,76,224,0.14), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.hero-copy{
  animation:fadeUp .7s ease both;
}
.hero-copy h1{
  font-size:clamp(2.2rem, 4.6vw, 3.5rem);
  margin-top:18px;
}
.hero-copy h1 .highlight{
  color:var(--primary);
  position:relative;
  white-space:nowrap;
}
.hero-copy h1 .highlight::after{
  content:"";
  position:absolute; left:-3px; right:-3px; bottom:0.02em;
  height:0.32em;
  background:var(--spark);
  opacity:0.55;
  z-index:-1;
  border-radius:6px;
  transform:rotate(-1.2deg);
}
.hero-copy p{
  margin-top:20px;
  font-size:1.08rem;
  color:var(--muted);
  max-width:52ch;
}
.hero-actions{
  display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;
}
.hero-visual{
  animation:fadeUp .7s ease .12s both;
  position:relative;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
.hero-trust{
  display:flex; gap:26px; margin-top:40px; flex-wrap:wrap;
}
.hero-trust div{ display:flex; flex-direction:column; }
.hero-trust strong{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink); }
.hero-trust span{ font-size:0.82rem; color:var(--muted); }

/* mascot + confetti decorations around the terminal card */
.hero-sticker{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:2.5px solid var(--ink);
  box-shadow:var(--pop-2);
  animation:float 5s ease-in-out infinite;
}
.hero-sticker svg{ width:60%; height:60%; }
.hero-sticker--star{
  width:56px; height:56px;
  background:var(--spark);
  top:-18px; left:-14px;
  animation-delay:.2s;
}
.hero-sticker--bolt{
  width:48px; height:48px;
  background:var(--accent-2);
  bottom:-14px; left:36px;
  animation-delay:1.1s;
}
.hero-sticker--heart{
  width:44px; height:44px;
  background:var(--pink);
  top:38%; right:-18px;
  animation-delay:.6s;
}
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero-sticker{ animation:none; }
}

.terminal{
  background:var(--ink);
  border-radius:var(--radius-lg);
  border:2.5px solid var(--ink);
  padding:22px;
  box-shadow:var(--pop-6);
  position:relative;
  transition:transform .3s ease;
}
.terminal-bar{
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.terminal-bar span{ width:11px; height:11px; border-radius:50%; }
.terminal-bar span:nth-child(1){ background:var(--pink); }
.terminal-bar span:nth-child(2){ background:var(--spark); }
.terminal-bar span:nth-child(3){ background:var(--accent-2); }
.terminal-bar em{
  font-style:normal; margin-left:auto;
  font-family:var(--font-mono); font-size:0.72rem; color:rgba(255,255,255,0.5);
}
.terminal-body{
  font-family:var(--font-mono);
  font-size:0.86rem;
  color:#F1E9FF;
  min-height:220px;
}
.terminal-body .line{ display:flex; gap:8px; margin-bottom:8px; }
.terminal-body .prompt{ color:var(--spark); flex-shrink:0; }
.terminal-body .typed{ white-space:pre-wrap; word-break:break-word; }
.terminal-body .cursor{
  display:inline-block; width:7px; height:1.1em; background:var(--spark);
  animation:blink 1s steps(1) infinite; vertical-align:text-bottom;
}
@keyframes blink{ 50%{ opacity:0; } }
.terminal-status{
  margin-top:14px; display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:0.82rem; color:var(--accent-2);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.terminal-status.show{ opacity:1; transform:none; }
.rocket-track{
  position:absolute; right:26px; bottom:22px; top:22px; width:26px;
  overflow:hidden; pointer-events:none;
}
.rocket-track svg{
  position:absolute; left:0; bottom:-40px;
  width:22px; height:22px; color:var(--accent);
  opacity:0;
}
.rocket-track svg.launch{
  animation:launch 2.6s ease-in forwards;
}
@keyframes launch{
  0%{ opacity:0; bottom:-40px; }
  10%{ opacity:1; }
  85%{ opacity:1; }
  100%{ bottom:100%; opacity:0; }
}

.stats{
  background:var(--ink);
  color:#fff;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  padding-block:44px;
}
.stat{ position:relative; }
.stat strong{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3vw,2.3rem);
  color:var(--spark);
  display:block;
}
.stat span{ font-size:0.88rem; color:rgba(255,255,255,0.75); }

/* ---------------------------------------------------------------------
   Program tabs
--------------------------------------------------------------------- */
.level-tabs{
  display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap;
}
.level-tab{
  padding:10px 22px;
  border-radius:var(--radius-pill);
  border:2.5px solid var(--ink);
  background:var(--surface);
  font-family:var(--font-display);
  font-weight:600; font-size:0.94rem; color:var(--ink);
  box-shadow:var(--pop-2);
  transition:all .18s ease;
}
.level-tab:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.level-tab[aria-selected="true"]{
  background:var(--primary);
  color:#fff;
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--ink);
}
.level-panel{
  animation:fadeUp .35s ease both;
}
.level-panel{ display:none; }
.level-panel.active{ display:block; }

.level-card{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:36px;
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-lg);
  padding:36px;
  box-shadow:var(--pop-6);
}
.level-card h3{ font-size:1.5rem; }
.level-card .level-desc{ color:var(--muted); margin-top:12px; }
.level-tags{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.level-tags span{
  font-family:var(--font-mono); font-size:0.74rem;
  padding:5px 10px; border-radius:8px;
  background:#F1EBFF; color:var(--primary);
  border:1.5px solid var(--border-soft);
}

.format-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.format-item{
  border:2px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:18px;
  background:var(--bg);
  transition:border-color .2s ease, transform .2s ease;
}
.format-item:hover{ border-color:var(--primary); transform:translateY(-2px); }
.format-item h4{ font-size:1rem; display:flex; align-items:center; gap:8px; }
.format-item svg{ width:18px; height:18px; color:var(--primary); flex-shrink:0; }
.format-item p{ font-size:0.86rem; color:var(--muted); margin-top:8px; }

/* ---------------------------------------------------------------------
   Service cards — tiap kartu punya warna ikon berbeda supaya
   halaman terasa penuh warna tanpa jadi berantakan (satu palet konsisten)
--------------------------------------------------------------------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.service-card{
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:26px 22px;
  box-shadow:var(--pop-3);
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink); }
.service-icon{
  width:46px; height:46px; border-radius:14px;
  background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  border:2px solid var(--ink);
}
.service-card:nth-child(2) .service-icon{ background:var(--accent); }
.service-card:nth-child(3) .service-icon{ background:var(--pink); }
.service-card:nth-child(4) .service-icon{ background:var(--accent-2); }
.service-icon svg{ width:22px; height:22px; color:var(--ink); }
.service-card h3{ font-size:1.05rem; }
.service-card p{ font-size:0.88rem; color:var(--muted); margin-top:10px; }

.process-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  counter-reset:step;
}
.process-item{ position:relative; padding-top:8px; }
.process-item::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.9rem;
  color:var(--ink);
  background:var(--spark);
  border:2px solid var(--ink);
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.process-item h3{ font-size:1.05rem; }
.process-item p{ font-size:0.88rem; color:var(--muted); margin-top:8px; }
.process-item:not(:last-child)::after{
  content:"";
  position:absolute; top:17px; left:100%; transform:translateX(10px);
  width:calc(100% - 20px); height:2px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px);
  opacity:0.25;
  display:none;
}
@media (min-width:900px){
  .process-item:not(:last-child)::after{ display:block; }
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.why-card{
  padding:26px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:2.5px solid var(--ink);
  box-shadow:var(--pop-2);
  transition:transform .2s ease, box-shadow .2s ease;
}
.why-card:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.why-card svg{ width:28px; height:28px; color:var(--primary); }
.why-card:nth-child(2) svg{ color:var(--accent); }
.why-card:nth-child(3) svg{ color:var(--pink); }
.why-card:nth-child(4) svg{ color:var(--accent-2); }
.why-card:nth-child(5) svg{ color:var(--primary); }
.why-card:nth-child(6) svg{ color:var(--accent); }
.why-card h3{ font-size:1.05rem; margin-top:14px; }
.why-card p{ font-size:0.88rem; color:var(--muted); margin-top:8px; }

/* ---------------------------------------------------------------------
   Client / partner logo strip
--------------------------------------------------------------------- */
.client-logo-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:48px;
}
.client-logo{
  display:flex;
  align-items:center;
  justify-content:center;
}
.client-logo img{
  max-height:80px;
  max-width:220px;
  width:auto;
  object-fit:contain;
  filter:grayscale(1) opacity(0.6);
  transition:filter .25s ease;
}
.client-logo img:hover{ filter:grayscale(0) opacity(1); }

.client-logo-fallback{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.92rem;
  color:var(--muted);
  text-align:center;
}

@media (max-width:760px){
    .hero-actions{
    flex-wrap:nowrap;
    gap:10px;
  }
  .hero-actions .btn{
    flex:1 1 0;          
    min-width:0;
    padding:12px 10px;
    font-size:0.9rem;
    white-space:normal;  
    text-align:center;
    line-height:1.2;
  }

  .client-logo-strip{ gap:32px; }
  .client-logo img{ max-height:56px; max-width:160px; }
}

.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.testi-card{
  background:var(--surface);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  padding:26px;
  box-shadow:var(--pop-3);
  transition:transform .2s ease, box-shadow .2s ease;
   display:flex;
  flex-direction:column;
}
.testi-card:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink); }
.testi-stars{ color:var(--spark); font-size:0.95rem; letter-spacing:2px; }
.testi-card p{ margin-top:14px; color:var(--ink-soft); font-size:0.94rem;   flex-grow:1; }
.testi-person{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top: 20px;}
.testi-avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--primary);
  border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:0.9rem;
  flex-shrink:0;
}
.testi-card:nth-child(2) .testi-avatar{ background:var(--accent); }
.testi-card:nth-child(3) .testi-avatar{ background:var(--pink); }
.testi-person strong{ display:block; font-size:0.9rem; }
.testi-person span{ font-size:0.78rem; color:var(--muted); }

.faq-list{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  background:var(--surface);
  padding:6px 22px;
  transition:box-shadow .25s ease, transform .25s ease;
}
.faq-item:hover{ transform:translate(-2px,-2px); box-shadow:var(--pop-2); }
.faq-item summary{
  cursor:pointer; font-weight:700; font-family:var(--font-display); padding:16px 0;
  display:flex; align-items:center; justify-content:space-between;
  list-style:none;
  color:var(--ink);
  transition:color .2s ease;
}
.faq-item summary:hover{ color:var(--primary); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-size:1.5rem; color:var(--primary); font-family:var(--font-display);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.faq-item[open]:not(.is-closing) summary::after{ transform:rotate(45deg); }
.faq-item p{ padding-bottom:18px; color:var(--muted); font-size:0.92rem; }

.contact{
  background:var(--ink);
  border-radius:var(--radius-lg);
  border:2.5px solid var(--ink);
  box-shadow:var(--pop-6);
  padding:48px;
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:44px;
  color:#fff;
}
.contact-info h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.1rem); }
.contact-info p{ color:rgba(255,255,255,0.78); margin-top:14px; }
.contact-list{ margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.contact-list li{ display:flex; align-items:center; gap:12px; font-size:0.92rem; }
.contact-list svg{ width:18px; height:18px; color:var(--spark); flex-shrink:0; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-size:0.84rem; color:rgba(255,255,255,0.85); font-weight:600; }
.form-field input,
.form-field select,
.form-field textarea{
  background:rgba(255,255,255,0.08);
  border:2px solid rgba(255,255,255,0.3);
  border-radius:14px;
  padding:12px 14px;
  color:#fff;
  font-family:var(--font-body);
  font-size:0.94rem;
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:rgba(255,255,255,0.45); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:2px solid var(--spark); outline-offset:1px;
  border-color:transparent;
}
.form-field textarea{ resize:vertical; min-height:100px; }
.form-error{ font-size:0.76rem; color:var(--spark); min-height:14px; }
.form-hint{ font-size:0.78rem; color:rgba(255,255,255,0.55); margin-top:10px; }
.form-note{
  margin-top:14px; font-size:0.8rem; color:rgba(255,255,255,0.6);
  display:flex; align-items:center; gap:8px;
}
.form-note svg{ width:14px; height:14px; color:var(--spark); flex-shrink:0; }
.form-status{
  margin-top:16px; padding:12px 16px; border-radius:12px;
  font-size:0.88rem; display:none; border:2px solid transparent;
}
.form-status.show{ display:block; }
.form-status.success{ background:rgba(47,217,197,0.15); color:var(--accent-2); border-color:rgba(47,217,197,0.4); }
.form-status.error{ background:rgba(255,93,143,0.14); color:var(--pink); border-color:rgba(255,93,143,0.4); }
  
.hp-field{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

.scroll-top{
  position:fixed;
  right:22px; bottom:22px;
  width:50px; height:50px;
  border-radius:50%;
  background:var(--accent);
  color:var(--ink);
  border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--pop-3);
  opacity:0;
  transform:translateY(14px) scale(0.9);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background-color .2s ease;
  z-index:60;
}
.scroll-top.visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.scroll-top:hover{ background:var(--spark); transform:translate(-2px,-2px); }
.scroll-top:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; }
.scroll-top svg{ width:20px; height:20px; }

@media (max-width:760px){
  .scroll-top{ right:16px; bottom:16px; width:46px; height:46px; }
}

@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .terminal{ max-width:520px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid, .testi-grid{ grid-template-columns:repeat(2,1fr); }
  .process-list{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav-links, .nav-cta .btn--ghost{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header.open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface); padding:20px 24px; gap:18px;
    border-bottom:2.5px solid var(--ink);
  }
  .level-card{ grid-template-columns:1fr; }
  .format-grid{ grid-template-columns:1fr; }
  .service-grid, .why-grid, .testi-grid, .process-list{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .contact{ padding:28px; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .section{ padding:64px 0; }
  .hero-sticker{ display:none; }
}