/* ============ TOKENS ============ */
:root{
  --bg: #0a0a0d;
  --bg-soft: #111117;
  --bg-card: #16161d;
  --ink: #f4f4f2;
  --ink-dim: #9d9da8;
  --line: rgba(244,244,242,0.1);
  --lime: #d4ff3f;
  --lime-dim: rgba(212,255,63,0.15);
  --cyan: #5ef2ff;
  --violet: #b28dff;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: none;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; letter-spacing:-0.02em; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background: var(--lime); color:#0a0a0d; }

@media (hover:none){
  body{ cursor:auto; }
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ============ PRELOADER ============ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 24px;
}
.preloader-inner{ overflow:hidden; display:flex; gap:14px; }
.preloader-word{
  font-family: var(--font-display); font-weight:700; font-size: clamp(2rem, 6vw, 4rem);
  color: var(--ink); opacity:0.15;
}
.preloader-word:first-child{ color: var(--lime); opacity:1; }
.preloader-bar{ width: 220px; height:2px; background: var(--line); overflow:hidden; }
.preloader-bar span{ display:block; height:100%; width:0%; background: var(--lime); }

/* ============ CURSOR ============ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9998;
  border-radius:50%; transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{ width:6px; height:6px; background: var(--lime); }
.cursor-ring{ width:36px; height:36px; border:1px solid rgba(244,244,242,0.4); transition: width .25s var(--ease), height .25s var(--ease), border-color .25s; }
.cursor-ring.hover{ width:64px; height:64px; border-color: var(--lime); background: var(--lime-dim); }

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  z-index:9997;
}

/* ============ GRID OVERLAY ============ */
.grid-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image: linear-gradient(rgba(244,244,242,0.025) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(244,244,242,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mix-blend-mode: normal;
}

/* ============ HEADER ============ */
.header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding: 18px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.scrolled{
  padding: 10px 0;
  background: rgba(10,10,13,0.75);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line);
}
.header-inner{
  max-width: 1320px; margin:0 auto; padding: 0 32px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{
  width:38px; height:38px; border-radius:10px; background: var(--lime);
  color:#0a0a0d; font-family: var(--font-display); font-weight:700; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.logo-text{ display:flex; flex-direction:column; font-family: var(--font-display); font-weight:600; font-size:1rem; line-height:1.1; }
.logo-text em{ font-style:normal; color: var(--lime); }
.logo-text small{ font-family: var(--font-body); font-weight:500; font-size:0.55rem; letter-spacing:0.14em; color: var(--ink-dim); margin-top:2px; }

.main-nav ul{ display:flex; gap: 32px; }
.main-nav a{
  position:relative; font-size:0.85rem; font-weight:500; color: var(--ink-dim);
  padding: 6px 0; transition: color .3s;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--lime); transition: width .35s var(--ease);
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:18px; }
.lang-switch{
  background:none; border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  color: var(--ink-dim); font-family: var(--font-body); font-size:0.75rem; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.lang-option{ padding:2px 4px; transition: color .25s; }
.lang-option.active{ color: var(--lime); font-weight:600; }
.lang-sep{ opacity:0.3; }

.burger{ width:36px; height:36px; border:1px solid var(--line); border-radius:8px; background:none; display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; }
.burger span{ width:16px; height:1.5px; background: var(--ink); transition: all .3s var(--ease); }
.burger.active span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:0; right:0; height:100vh; width:min(84vw,360px); z-index:480;
  background: var(--bg-soft); border-left:1px solid var(--line);
  transform: translateX(100%); transition: transform .5s var(--ease);
  display:flex; align-items:center; padding: 0 40px;
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu ul{ display:flex; flex-direction:column; gap:22px; width:100%; }
.mobile-menu a{ font-family: var(--font-display); font-size:1.3rem; font-weight:600; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding: 15px 26px;
  border-radius: 999px; font-weight:600; font-size:0.9rem; white-space:nowrap;
  transition: transform .35s var(--ease), background .35s, color .35s, box-shadow .35s;
  will-change: transform;
}
.btn svg{ transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(4px); }
.btn-primary{ background: var(--lime); color:#0a0a0d; box-shadow: 0 0 0 rgba(212,255,63,0); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(212,255,63,0.45); }
.btn-ghost{ background: transparent; border:1px solid var(--line); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--lime); color: var(--lime); transform: translateY(-3px); }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding: 160px 32px 80px; overflow:hidden; isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.blob{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:0.5;
  will-change: transform;
}
.blob-a{ width:520px; height:520px; background: var(--lime); top:-160px; left:-120px; opacity:0.18; }
.blob-b{ width:460px; height:460px; background: var(--cyan); bottom:-180px; right:-100px; opacity:0.14; }
.blob-c{ width:340px; height:340px; background: var(--violet); top:40%; left:55%; opacity:0.1; }

.hero-lines{ position:absolute; inset:0; display:flex; justify-content:space-evenly; }
.hero-lines span{ width:1px; height:100%; background: linear-gradient(180deg, transparent, rgba(244,244,242,0.06), transparent); }

.hero-marquee{
  position:absolute; top:120px; left:0; width:100%; overflow:hidden; z-index:-1;
  transform: rotate(-2deg) scale(1.05);
}
.marquee-track{ display:flex; width:max-content; }
.marquee-track span{
  font-family: var(--font-display); font-weight:700; font-size: clamp(1.4rem, 4vw, 2.6rem);
  color: transparent; -webkit-text-stroke: 1px rgba(244,244,242,0.14); white-space:nowrap; padding-right:0;
}

.hero-content{ max-width: 1320px; margin: 0 auto; width:100%; }
.hero-eyebrow{
  display:flex; align-items:center; gap:10px; font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--ink-dim); margin-bottom:28px; font-weight:500;
}
.eyebrow-dot{ width:8px; height:8px; border-radius:50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(212,255,63,0.6); animation: pulseDot 2s infinite; }
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(212,255,63,0.5); }
  70%{ box-shadow: 0 0 0 10px rgba(212,255,63,0); }
  100%{ box-shadow: 0 0 0 0 rgba(212,255,63,0); }
}

.hero-title{ font-size: clamp(2.4rem, 6vw, 5rem); font-weight:700; line-height:1.05; max-width: 18ch; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line > * { display:inline-block; }
.hl{ font-style:normal; color: var(--lime); }

.hero-subtitle{ margin: 34px 0 44px; max-width:56ch; color: var(--ink-dim); font-size:1.05rem; line-height:1.7; }

.hero-cta{ display:flex; align-items:center; gap: 40px; flex-wrap:wrap; }
.hero-scroll-hint{ display:flex; align-items:center; gap:12px; color: var(--ink-dim); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; }
.scroll-mouse{ width:22px; height:34px; border:1px solid var(--line); border-radius:12px; display:flex; justify-content:center; padding-top:6px; }
.scroll-mouse span{ width:3px; height:6px; border-radius:2px; background: var(--lime); animation: scrollDown 1.6s infinite; }
@keyframes scrollDown{ 0%{ transform: translateY(0); opacity:1; } 100%{ transform: translateY(12px); opacity:0; } }

/* ============ SECTION SHARED ============ */
section{ position:relative; padding: 140px 32px; max-width:1320px; margin:0 auto; }
.section-head{ margin-bottom: 80px; max-width:640px; }
.section-tag{ font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--lime); font-weight:600; margin-bottom:16px; }
.section-head h2{ font-size: clamp(1.9rem, 4vw, 3rem); font-weight:700; }
.section-head.light .section-tag{ color:#0a0a0d; }

/* ============ SOLUTIONS ============ */
.solution-row{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items:center;
  padding: 60px 0; border-top:1px solid var(--line);
}
.solution-row:last-child{ border-bottom:1px solid var(--line); }
.solution-row.reverse{ direction:rtl; }
.solution-row.reverse > *{ direction:ltr; }

.media-card{
  position:relative; aspect-ratio: 4/3; border-radius:24px; overflow:hidden;
  display:flex; align-items:flex-end; padding:28px;
  border: 1px solid var(--line);
}
.card-strategy{ background: radial-gradient(circle at 30% 20%, rgba(212,255,63,0.28), var(--bg-card) 65%); }
.card-growth{ background: radial-gradient(circle at 70% 20%, rgba(94,242,255,0.24), var(--bg-card) 65%); }
.card-technology{ background: radial-gradient(circle at 30% 80%, rgba(178,141,255,0.24), var(--bg-card) 65%); }
.media-pin{ position:absolute; top:24px; left:24px; font-size:1.6rem; }
.media-tag{
  font-family: var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:-0.02em;
  color: var(--ink);
}

.solution-index{ font-family: var(--font-display); font-size:0.85rem; color: var(--lime); font-weight:600; letter-spacing:0.1em; }
.solution-copy h3{ font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 14px 0 20px; font-weight:600; }
.solution-copy p{ color: var(--ink-dim); line-height:1.75; margin-bottom: 30px; font-size:1rem; }
.solution-copy strong{ color: var(--ink); }

/* ============ METHODOLOGY ============ */
.methodology{ max-width:none; background: var(--lime); color:#0a0a0d; border-radius: 40px; margin: 0 24px; padding: 120px 5vw; }
.methodology .section-tag{ color:#0a0a0d; opacity:0.6; }
.methodology h2{ color:#0a0a0d; }

.method-track{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.method-line{ position:absolute; top:22px; left:0; right:0; height:2px; background: rgba(10,10,13,0.15); }
.method-line-fill{ display:block; height:100%; width:0%; background:#0a0a0d; }
.method-step{ position:relative; padding-top: 50px; }
.method-num{ position:absolute; top:0; left:0; font-family: var(--font-display); font-weight:700; font-size:1.1rem; background:#0a0a0d; color: var(--lime); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.method-step h3{ font-size:1.2rem; margin-bottom:12px; font-weight:700; }
.method-step p{ font-size:0.92rem; line-height:1.65; opacity:0.75; }

/* ============ TRANSFORM ============ */
.transform-table{ display:grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); border-radius:24px; overflow:hidden; border:1px solid var(--line); }
.transform-col-head{
  padding: 26px 34px; font-family: var(--font-display); font-weight:600; font-size:1.05rem; background: var(--bg-card);
  display:flex; flex-direction:column; gap:10px;
}
.transform-col-head em{ font-style:normal; font-family: var(--font-body); font-weight:400; font-size:0.8rem; color: var(--ink-dim); }
.dot{ width:10px; height:10px; border-radius:50%; }
.dot-red{ background:#ff6a5e; }
.dot-lime{ background: var(--lime); }
.transform-row{ padding: 30px 34px; background: var(--bg-soft); color: var(--ink-dim); line-height:1.7; font-size:0.95rem; }
.transform-row:nth-of-type(odd){ }

/* ============ RESULTS ============ */
.results{ max-width:none; background: linear-gradient(180deg, var(--bg-soft), var(--bg)); padding: 140px 32px; }
.results .section-head{ max-width:640px; margin-left:auto; margin-right:auto; text-align:center; }
.results-grid{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.result-card{
  background: var(--bg-card); border:1px solid var(--line); border-radius:24px; padding: 44px 34px;
  transition: transform .4s var(--ease), border-color .4s;
}
.result-card:hover{ transform: translateY(-8px); border-color: var(--lime); }
.result-icon{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; background: var(--lime-dim); color: var(--lime); font-size:1.5rem; font-family: var(--font-display); margin-bottom:26px; }
.result-card h3{ font-size:1.25rem; margin-bottom:14px; font-weight:600; }
.result-card p{ color: var(--ink-dim); line-height:1.7; font-size:0.95rem; }

/* ============ ABOUT ============ */
.about-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items:center; }
.about-text{ color: var(--ink-dim); line-height:1.8; font-size:1.05rem; margin: 28px 0 38px; }
.about-text strong{ color: var(--lime); }

.about-visual{ display:flex; align-items:center; justify-content:center; }
.about-orbit{ position:relative; width:340px; height:340px; }
.orbit-core{
  position:absolute; inset:0; margin:auto; width:120px; height:120px; border-radius:50%;
  background: var(--lime); color:#0a0a0d; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:1.4rem; z-index:2;
}
.orbit-ring{ position:absolute; inset:0; margin:auto; border:1px solid var(--line); border-radius:50%; }
.ring-1{ width:180px; height:180px; }
.ring-2{ width:250px; height:250px; border-style:dashed; }
.ring-3{ width:340px; height:340px; }
.orbit-chip{
  position:absolute; padding:8px 16px; border-radius:999px; background: var(--bg-card); border:1px solid var(--line);
  font-size:0.7rem; letter-spacing:0.08em; font-weight:600; white-space:nowrap;
}
.chip-1{ top:6%; left:50%; transform: translateX(-50%); color: var(--lime); }
.chip-2{ bottom:16%; left:0%; color: var(--cyan); }
.chip-3{ bottom:16%; right:0%; color: var(--violet); }

/* ============ FOOTER ============ */
.footer{ background: var(--bg-soft); border-top:1px solid var(--line); padding-top: 60px; overflow:hidden; }
.footer-marquee{ overflow:hidden; margin-bottom: 70px; transform: rotate(-1deg); }
.footer-marquee .marquee-track span{
  font-family: var(--font-display); font-weight:700; font-size: clamp(1.2rem,3vw,2rem);
  color: var(--lime); white-space:nowrap;
}
.footer-main{ max-width:1320px; margin:0 auto; padding: 0 32px 70px; display:grid; grid-template-columns: 1fr 2fr; gap: 60px; }
.footer-brand{ display:flex; align-items:center; gap:10px; height:fit-content; }
.footer-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.footer-col h4{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--ink-dim); margin-bottom:20px; font-weight:600; }
.footer-col a{ display:block; color: var(--ink); opacity:0.85; padding:7px 0; font-size:0.95rem; transition: color .25s, transform .25s; }
.footer-col a:hover{ color: var(--lime); transform: translateX(4px); }
.footer-bottom{
  border-top:1px solid var(--line); padding: 26px 32px; max-width:1320px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color: var(--ink-dim); font-size:0.82rem;
}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed; bottom: 28px; right: 28px; z-index:400; width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,0.6);
}
.wa-pulse{ position:absolute; inset:0; border-radius:50%; background:#25D366; animation: waPulse 2.2s infinite; z-index:-1; }
@keyframes waPulse{
  0%{ transform: scale(1); opacity:0.6; }
  100%{ transform: scale(1.8); opacity:0; }
}

/* ============ REVEAL BASE (JS toggles .in) ============ */
.reveal-up, .reveal-left, .reveal-right{ opacity:0; will-change: transform, opacity; }
.reveal-up{ transform: translateY(60px); }
.reveal-left{ transform: translateX(-80px); }
.reveal-right{ transform: translateX(80px); }
.reveal-up.in, .reveal-left.in, .reveal-right.in{
  opacity:1; transform: translate(0,0);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--d, 0) * 1s);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
  .solution-row, .solution-row.reverse{ grid-template-columns: 1fr; direction:ltr; }
  .method-track{ grid-template-columns: 1fr 1fr; row-gap:60px; }
  .method-line{ display:none; }
  .transform-table{ grid-template-columns: 1fr; }
  .transform-col-head:nth-child(2){ order:2; }
  .results-grid{ grid-template-columns: 1fr; }
  .about-inner{ grid-template-columns: 1fr; }
  .about-visual{ order:-1; }
  .footer-main{ grid-template-columns: 1fr; }
  .footer-cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .hero{ padding: 140px 20px 60px; }
  section{ padding: 90px 20px; }
  .methodology{ margin:0; border-radius:24px; padding: 80px 24px; }
  .method-track{ grid-template-columns: 1fr; }
  .footer-cols{ grid-template-columns: 1fr; }
  .lang-switch{ display:none; }
}