/* Klyn Sales — Inteligência Comercial e Gestão de Dados */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --canvas:#013332;
  --canvas-deep:#01201e;
  --panel:#0b3f3a;
  --panel-2:#0e4a44;
  --panel-border: rgba(211,232,61,0.16);
  --field-border:#4f7a71;
  --blue-deep:#0A4683;
  --blue-bright:#2E69DD;
  --accent:#D3E83D;
  --accent-hover:#e6f66c;
  --accent-muted: rgba(211,232,61,0.14);
  --accent-ink:#0b2a1c;
  --text-primary:#F3F7EF;
  --text-secondary:#a9c7c0;
  --text-tertiary:#82a9a2;
  --tshadow: 0 1px 2px rgba(1,20,19,.7), 0 8px 24px rgba(1,20,19,.35);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-text: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --radius: 18px;
  --container: min(1180px, 92vw);
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%; scroll-behavior:auto}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:var(--accent-ink)}

img{max-width:100%; display:block}
a{color:inherit}
button{font-family:inherit}

.skip-link{
  position:absolute; left:1rem; top:-60px;
  background:var(--accent); color:var(--accent-ink);
  padding:.7em 1.2em; border-radius:10px; font-weight:600;
  z-index:200; transition:top .25s var(--ease-out);
}
.skip-link:focus{top:1rem}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.01em}
p{margin:0}

.kicker{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before{content:""; width:1.3em; height:1px; background:var(--accent); opacity:.7}

.container{width:var(--container); margin-inline:auto}

/* ---------- ambient background layer ---------- */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 8%, rgba(46,105,221,.16), transparent 60%),
    radial-gradient(50% 40% at 88% 82%, rgba(211,232,61,.07), transparent 60%),
    var(--canvas);
  animation: ambientDrift 70s ease-in-out infinite alternate;
}
@keyframes ambientDrift{
  0%{ background-position: 0 0, 0 0; }
  100%{ background-position: 30px -20px, -20px 30px; }
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 0;
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(1,51,50,.88), rgba(1,51,50,.6));
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-out), padding .3s var(--ease-out);
}
.nav.scrolled{border-bottom-color:var(--panel-border); padding:.75rem 0}
.nav-inner{width:var(--container); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none}
.brand img{height:34px; width:auto}
.brand-word{font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em}
.brand-word span{color:var(--accent)}

.nav-links{display:flex; align-items:center; gap:2.1rem; list-style:none; margin:0; padding:0}
.nav-links a{
  text-decoration:none; font-size:.92rem; color:var(--text-secondary);
  transition:color .2s var(--ease-out);
}
.nav-links a:hover{color:var(--text-primary)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-text); font-weight:600; font-size:.92rem;
  padding:.85em 1.5em; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; text-shadow:none;
  transition:transform .35s var(--ease-out), background .25s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn-accent{background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 0 rgba(211,232,61,0)}
.btn-accent:hover{background:var(--accent-hover); box-shadow:0 8px 30px -6px rgba(211,232,61,.55)}
.btn-ghost{background:transparent; border-color:rgba(243,247,239,.45); color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

.nav-cta{display:flex; align-items:center; gap:.9rem}
.menu-toggle{
  display:none; background:none; border:1px solid rgba(243,247,239,.45); border-radius:10px;
  width:42px; height:42px; align-items:center; justify-content:center; color:var(--text-primary);
}
.menu-toggle svg{width:20px; height:20px}

@media (pointer:coarse){ .btn{min-height:44px} }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:92svh; display:flex; align-items:center;
  padding-top:6vh; padding-bottom:8vh; overflow:clip;
}
.hero-canvas{
  position:absolute; inset:-6% -6%; z-index:0;
  filter:saturate(1.05);
}
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 38%, rgba(1,51,50,0) 30%, rgba(1,32,30,.85) 100%);
}
.hero-inner{
  position:relative; z-index:2; width:var(--container); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center;
}
.hero-copy{max-width:52ch}
.hero-copy .kicker{margin-bottom:1.4rem}
.hero-copy h1{
  font-size:clamp(2.35rem, 4.1vw, 3.6rem);
  text-shadow:var(--tshadow);
}
.hero-copy h1 em{color:var(--accent); font-style:normal}
.hero-sub{
  margin-top:1.4rem; font-size:1.08rem; color:var(--text-secondary); max-width:46ch;
  text-shadow:0 1px 3px rgba(1,20,19,.6);
}
.hero-actions{display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap}
.hero-meta{
  display:flex; gap:1.6rem; margin-top:2.6rem; flex-wrap:wrap;
}
.hero-meta div{font-family:var(--font-mono); font-size:.76rem; color:var(--text-tertiary); letter-spacing:.04em}
.hero-meta strong{display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--text-primary); font-weight:600}

.hero-visual{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center}
.hero-visual svg{width:100%; height:100%; max-width:440px}
.hero-scroll-cue{
  position:absolute; left:50%; bottom:2.4rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--text-tertiary); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em;
  z-index:2; opacity:.85;
}
.hero-scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--accent), transparent); animation:cuePulse 2.2s ease-in-out infinite}
@keyframes cuePulse{0%,100%{opacity:.25} 50%{opacity:1}}
@media (max-height:640px){ .hero-scroll-cue{display:none} }

/* ---------- generic section rhythm ---------- */
section{position:relative; z-index:1; padding:clamp(4.5rem,9vw,8rem) 0}
.section-head{max-width:62ch; margin-bottom:3rem}
.section-head .kicker{margin-bottom:1rem}
.section-head h2{font-size:clamp(1.8rem,3vw,2.6rem)}
.section-head p{margin-top:1rem; color:var(--text-secondary); font-size:1.05rem}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
.stagger > *{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.stagger.in > *{opacity:1; transform:none}
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:90ms}
.stagger.in > *:nth-child(3){transition-delay:180ms}
.stagger.in > *:nth-child(4){transition-delay:270ms}
.stagger.in > *:nth-child(5){transition-delay:360ms}

/* ---------- problem section ---------- */
.problem{background:linear-gradient(180deg, transparent, rgba(1,32,30,.4) 20%, rgba(1,32,30,.4) 80%, transparent)}
.problem-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center}
.problem-copy p{font-size:1.12rem; color:var(--text-secondary); margin-bottom:1.1rem}
.problem-copy strong{color:var(--text-primary); font-weight:600}
.leak-diagram{position:relative}
.leak-diagram svg{width:100%; height:auto}

/* ---------- stats bar ---------- */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--panel-border); border:1px solid var(--panel-border); border-radius:var(--radius);
  overflow:hidden;
}
.stat{background:var(--panel); padding:2.1rem 1.5rem; text-align:center}
.stat .num{font-family:var(--font-display); font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:700; color:var(--accent)}
.stat .label{margin-top:.5rem; font-size:.9rem; color:var(--text-secondary)}

/* ---------- cards / solutions ---------- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
.card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:1.9rem 1.6rem; position:relative; overflow:hidden;
  transition:transform .45s var(--ease-out), border-color .3s var(--ease-out);
}
.card:hover{transform:translateY(-4px); border-color:rgba(211,232,61,.4)}
.card .icon{width:42px; height:42px; margin-bottom:1.3rem; color:var(--accent)}
.card .icon svg{width:100%; height:100%}
.card h3{font-size:1.08rem; margin-bottom:.6rem}
.card p{color:var(--text-secondary); font-size:.94rem}
.card::after{
  content:""; position:absolute; inset:auto -30% -30% auto; width:140px; height:140px;
  background:radial-gradient(circle, var(--accent-muted), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease-out);
}
.card:hover::after{opacity:1}

/* ---------- process / how it works ---------- */
.process{position:relative}
.process-track{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.process-line{position:absolute; top:26px; left:8%; right:8%; height:2px; z-index:0}
.process-line svg{width:100%; height:2px; display:block}
.process-line path{stroke:var(--panel-border); stroke-width:2; fill:none}
.process-line path.draw{stroke:var(--accent); stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.4s var(--ease-out)}
.process-line.in path.draw{stroke-dashoffset:0}
.step{position:relative; z-index:1}
.step .num-badge{
  width:52px; height:52px; border-radius:50%; background:var(--canvas-deep); border:1px solid var(--panel-border);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); color:var(--accent);
  margin-bottom:1.2rem; font-size:.95rem;
}
.step h3{font-size:1.1rem; margin-bottom:.5rem}
.step p{color:var(--text-secondary); font-size:.94rem}

/* ---------- interactive funnel moment ---------- */
.funnel-moment{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:24px;
  padding:clamp(2rem,4vw,3.5rem); display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
}
.funnel-copy h2{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:.9rem}
.funnel-copy p{color:var(--text-secondary); margin-bottom:1.8rem}
.hold-btn{
  position:relative; display:inline-flex; align-items:center; gap:.9rem;
  background:var(--canvas-deep); border:1px solid var(--panel-border); color:var(--text-primary);
  padding:.9em 1.7em .9em 1.1em; border-radius:999px; cursor:pointer; user-select:none;
  -webkit-user-select:none; touch-action:none; font-weight:600; font-size:.95rem;
  overflow:hidden;
}
.hold-btn .ring{width:34px; height:34px; flex-shrink:0}
.hold-btn .ring circle{fill:none; stroke-width:3}
.hold-btn .ring .track{stroke:rgba(243,247,239,.15)}
.hold-btn .ring .fill{stroke:var(--accent); stroke-dasharray:100.5; stroke-dashoffset:100.5; transform:rotate(-90deg); transform-origin:50% 50%}
.hold-btn .fill-bg{position:absolute; inset:0; background:var(--accent-muted); transform:scaleX(0); transform-origin:left; z-index:0}
.hold-btn span{position:relative; z-index:1}
.hold-btn .ring{position:relative; z-index:1}
.hold-hint{margin-top:1rem; font-family:var(--font-mono); font-size:.76rem; color:var(--text-tertiary)}

.funnel-viz{position:relative; aspect-ratio:1/.85}
.funnel-viz svg{width:100%; height:100%}
.funnel-viz .dot{opacity:.25; transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.funnel-viz.charged .dot{opacity:1}
.funnel-viz .core{opacity:0; transform:scale(.6); transform-origin:center; transition:opacity .6s var(--ease-out) .3s, transform .6s var(--ease-out) .3s}
.funnel-viz.charged .core{opacity:1; transform:scale(1)}
.funnel-viz .core-glow{opacity:0; transition:opacity .8s var(--ease-out) .4s}
.funnel-viz.charged .core-glow{opacity:1}
.funnel-result{margin-top:1.2rem; font-family:var(--font-mono); font-size:.82rem; color:var(--text-tertiary); text-align:center; min-height:1.2em}
.funnel-result strong{color:var(--accent)}

/* ---------- audience ---------- */
.audience{display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem; align-items:center}
.audience-card{
  background:linear-gradient(155deg, var(--panel), var(--canvas-deep));
  border:1px solid var(--panel-border); border-radius:var(--radius); padding:2.4rem;
}
.audience-card p{font-size:1.15rem; color:var(--text-primary); line-height:1.55}
.audience-list{list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.1rem}
.audience-list li{display:flex; gap:.9rem; align-items:flex-start; color:var(--text-secondary)}
.audience-list svg{width:20px; height:20px; flex-shrink:0; margin-top:.15rem; color:var(--accent)}

/* ---------- differentiator ---------- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.compare-col{border-radius:var(--radius); padding:2rem; border:1px solid var(--panel-border)}
.compare-col.no{background:transparent}
.compare-col.yes{background:linear-gradient(160deg, rgba(211,232,61,.09), transparent); border-color:rgba(211,232,61,.35)}
.compare-col h3{font-size:1rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.3rem; font-weight:500}
.compare-col.no h3{color:var(--text-tertiary)}
.compare-col.yes h3{color:var(--accent)}
.compare-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem}
.compare-col li{display:flex; gap:.7rem; font-size:.96rem; color:var(--text-secondary)}
.compare-col.yes li{color:var(--text-primary)}
.compare-col svg{width:18px; height:18px; flex-shrink:0; margin-top:.2rem}
.compare-col.no svg{color:var(--text-tertiary)}
.compare-col.yes svg{color:var(--accent)}

/* ---------- faq ---------- */
.faq{max-width:74ch}
.faq-item{border-bottom:1px solid var(--panel-border)}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--text-primary);
  padding:1.4rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  cursor:pointer; font-family:var(--font-display); font-size:1.02rem; font-weight:600;
}
.faq-q .plus{width:20px; height:20px; flex-shrink:0; position:relative}
.faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--accent); transition:transform .3s var(--ease-out)}
.faq-q .plus::before{left:0; top:50%; width:100%; height:2px; transform:translateY(-50%)}
.faq-q .plus::after{top:0; left:50%; width:2px; height:100%; transform:translateX(-50%)}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg); opacity:0}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out)}
.faq-a p{padding:0 0 1.5rem; color:var(--text-secondary); max-width:64ch}

/* ---------- CTA / contact ---------- */
.cta-section{
  background:linear-gradient(160deg, var(--panel), var(--canvas-deep));
  border:1px solid var(--panel-border); border-radius:28px; padding:clamp(2.2rem,5vw,4rem);
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
}
.cta-copy h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:1rem}
.cta-copy p{color:var(--text-secondary); font-size:1.05rem; max-width:42ch}
.cta-list{list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:.8rem}
.cta-list li{display:flex; gap:.7rem; color:var(--text-secondary); font-size:.92rem}
.cta-list svg{width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:.15rem}

form.lead-form{display:flex; flex-direction:column; gap:1rem}
.field{display:flex; flex-direction:column; gap:.5rem}
.field label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary)}
.field input, .field textarea{
  background:var(--canvas-deep); border:1px solid var(--field-border); border-radius:12px;
  padding:.85em 1em; color:var(--text-primary); font-family:var(--font-text); font-size:.96rem;
  transition:border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder{color:var(--text-tertiary)}
.field input:focus, .field textarea:focus{border-color:var(--accent); outline:none}
.field textarea{resize:vertical; min-height:96px}
.lead-form .btn{margin-top:.4rem; width:100%}
.form-success{display:none; text-align:center; padding:2.5rem 1rem}
.form-success.show{display:block}
.form-success svg{width:44px; height:44px; color:var(--accent); margin:0 auto 1rem}
.form-success h3{font-size:1.2rem; margin-bottom:.5rem}
.form-success p{color:var(--text-secondary)}
.lead-form.hide{display:none}

/* ---------- footer ---------- */
footer{padding:3.5rem 0 2.5rem; border-top:1px solid var(--panel-border)}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap}
.footer-brand{display:flex; align-items:center; gap:.7rem}
.footer-brand img{height:28px}
.footer-nav{display:flex; gap:1.8rem; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.footer-nav a{text-decoration:none; color:var(--text-secondary); font-size:.9rem}
.footer-nav a:hover{color:var(--accent)}
.footer-bottom{margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--panel-border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem}
.footer-bottom p{color:var(--text-tertiary); font-size:.82rem; font-family:var(--font-mono)}

/* ---------- ambient whisper elements ---------- */
.whisper{position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; z-index:0}
.whisper-1{width:340px; height:340px; background:var(--blue-bright); top:-80px; right:-80px; animation:whisperFloat 14s ease-in-out infinite -3s}
.whisper-2{width:260px; height:260px; background:var(--accent); bottom:-60px; left:-60px; opacity:.14; animation:whisperFloat 18s ease-in-out infinite -8s}
@keyframes whisperFloat{0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-24px) scale(1.06)}}

/* ---------- responsive ---------- */
@media (max-width: 1040px){
  .hero-inner{grid-template-columns:1fr; text-align:left}
  .hero-visual{max-width:360px; margin-inline:auto; order:-1}
  .cards{grid-template-columns:repeat(2,1fr)}
  .problem-grid{grid-template-columns:1fr; gap:2.5rem}
  .audience{grid-template-columns:1fr}
  .funnel-moment{grid-template-columns:1fr}
  .cta-section{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .nav-links, .nav-cta .btn-ghost{display:none}
  .menu-toggle{display:inline-flex}
  .stats{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .process-track{grid-template-columns:1fr; gap:2.2rem}
  .process-line{display:none}
  section{padding:3.6rem 0}
}
@media (max-width: 480px){
  .hero-meta{gap:1.2rem}
}

/* ---------- mobile nav sheet ---------- */
.mobile-sheet{
  position:fixed; inset:0; z-index:150; background:rgba(1,26,25,.92); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease-out);
}
.mobile-sheet.open{opacity:1; pointer-events:auto}
.mobile-sheet a{font-family:var(--font-display); font-size:1.6rem; text-decoration:none; color:var(--text-primary)}
.mobile-sheet .close{position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; color:var(--text-primary); width:42px; height:42px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal, .stagger > *{opacity:1 !important; transform:none !important}
  .process-line path.draw{stroke-dashoffset:0 !important}
}
body.paused *, body.paused *::before, body.paused *::after{animation-play-state:paused !important}