/* ============================================
   WonderLab Corporate — Base styles
   Cinematic immersive hero version
   ============================================ */

:root {
  --w-bg-0: #04070A;
  --w-bg-1: #07101A;
  --w-bg-2: #0B1622;
  --w-ink: #FFFFFF;
  --w-ink-dim: rgba(255,255,255,.74);
  --w-ink-soft: rgba(255,255,255,.54);
  --w-ink-ghost: rgba(255,255,255,.30);
  --w-line: rgba(255,255,255,.08);
  --w-line-strong: rgba(255,255,255,.16);

  --w-cyan:  #2DE3C8;
  --w-cyan-2:#3FE6B6;
  --w-green: #4DE38A;
  --w-aqua:  #36DCD4;

  --w-grad: linear-gradient(92deg, #2DE3C8 0%, #3FE6B6 50%, #4DE38A 100%);
  --w-grad-flow: linear-gradient(92deg,
    #2DE3C8 0%, #36DCD4 25%, #3FE6B6 50%,
    #4DE38A 75%, #2DE3C8 100%);

  --w-mono: 'JetBrains Mono', ui-monospace, monospace;
  --w-maxw: 1320px;
  --w-gutter: 32px;
  --w-ease: cubic-bezier(.22,1,.36,1);

  --type-display: 'JetBrains Mono', ui-monospace, monospace;
  --type-body:    'Inter', system-ui, sans-serif;
}

body[data-type="grotesk"] {
  --type-display: 'Space Grotesk', system-ui, sans-serif;
  --type-body:    'Inter', system-ui, sans-serif;
}
body[data-type="serif"] {
  --type-display: 'Fraunces', Georgia, serif;
  --type-body:    'Inter', system-ui, sans-serif;
}
body[data-type="mono"] {
  --type-display: 'JetBrains Mono', ui-monospace, monospace;
  --type-body:    'Inter', system-ui, sans-serif;
}
body[data-type="bold"] {
  --type-display: 'Archivo Black', 'Space Grotesk', system-ui, sans-serif;
  --type-body:    'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--w-bg-0);
  color: var(--w-ink);
  font-family: var(--type-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  letter-spacing: -.005em;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4 {
  font-family: var(--type-display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.04;
  margin: 0;
  text-wrap: pretty;
}
body[data-type="mono"] h1,
body[data-type="mono"] h2,
body[data-type="mono"] h3 { letter-spacing: -.05em; font-weight: 500; }

h1 { font-size: clamp(44px, 6vw, 86px); text-wrap: balance; }
h2 { font-size: clamp(32px, 4vw, 54px); max-width: 22ch; }
h3 { font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; }
h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--w-ink-dim); }
p { margin: 0; color: var(--w-ink-dim); text-wrap: pretty; }

.eyebrow {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--w-cyan);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--w-cyan); }

.gradient-text {
  background: var(--w-grad-flow);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradFlow 9s linear infinite;
}
@keyframes gradFlow { 0% { background-position: 0% 50%; } 100% { background-position: -300% 50%; } }

.container {
  max-width: var(--w-maxw);
  margin: 0 auto;
  padding: 0 var(--w-gutter);
  position: relative;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--type-body);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s var(--w-ease);
  text-decoration: none;
  color: #04070A;
  background: transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--w-grad);
  color: #04070A;
  box-shadow: 0 8px 30px rgba(45,227,200,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(45,227,200,.4); }
.btn-ghost {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.03);
  color: var(--w-ink);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--w-cyan); color: var(--w-cyan); }
.btn-wa {
  background: rgba(37,211,102,.1);
  border-color: rgba(37,211,102,.4);
  color: #25D366;
}
.btn-wa:hover { background: rgba(37,211,102,.2); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--w-ease), transform .8s var(--w-ease); }
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .gradient-text { animation: none !important; }
}

/* Logo */
.logo-img { display: block; height: 28px; width: auto; }
@media (max-width: 720px) { .logo-img { height: 22px; } }
.hidden { display: none !important; }