/* ============================================================
   RISSO AGENCY — Landing Page
   Estetica DARK CIBERNETICA. Preto profundo + dourado + cromado.
   Referencias: Solo Leveling (painel de status), agencias premium tech.
   Combina com a logo oficial (preto + cromado + dourado).
   ============================================================ */
:root{
  --bg:#080808;
  --bg-alt:#0f0f0f;
  --bg-card:#111111;
  --bg-card-alt:#161616;
  --surface:#121212;
  --fg:#ffffff;
  --fg-muted:#e8e8e8;
  --fg-dim:#a0a0a0;
  --line:#1f1f1f;
  --line-strong:#2a2a2a;

  /* dourado principal — Solo Leveling vibe */
  --gold:#d4af37;
  --gold-lt:#e8c75a;
  --gold-dk:#a8861f;
  --gold-glow:rgba(212,175,55,0.35);
  --gold-glow-soft:rgba(212,175,55,0.15);

  /* cromado/prata — combina com o "RISSO" da logo */
  --silver:#f0f0f0;
  --silver-dk:#a0a0a0;

  --ink:#000000;
  --danger:#ff4d4d;

  --shadow-glow:0 0 16px var(--gold-glow);
  --shadow-glow-lg:0 0 28px var(--gold-glow);
  --shadow-glow-soft:0 0 10px var(--gold-glow-soft);
  --shadow-deep:0 12px 32px rgba(0,0,0,0.55);

  --font-display:"Orbitron", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Rajdhani", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --container:1180px;
  --pad-x:clamp(1.25rem, 5vw, 3rem);
  --sec-pad-y:clamp(4.5rem, 9vw, 8.5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(transparent 95%, rgba(212,175,55,0.04) 95%),
    linear-gradient(90deg, transparent 95%, rgba(212,175,55,0.04) 95%);
  background-size:64px 64px;
  background-position:0 0;
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--gold-lt);font-weight:500}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad-x);
  position:relative;
}

/* ---------- eyebrow / labels mono ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.2rem;
  font-weight:500;
  text-shadow:0 0 8px var(--gold-glow-soft);
}
.eyebrow.center{text-align:center}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.25rem;
  padding:.85rem var(--pad-x);
  background:rgba(8,8,8,0.88);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 1px 0 0 var(--gold-glow-soft);
}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.site-nav{display:flex;gap:.15rem;flex-wrap:wrap}
.site-nav a{
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.15em;
  padding:.4rem .7rem;
  border:1px solid transparent;
  border-radius:3px;
  color:var(--fg-muted);
  text-transform:uppercase;
  transition:color .2s ease, border-color .2s ease, text-shadow .2s ease, background .2s ease;
}
.site-nav a:hover{
  color:var(--gold);
  border-color:var(--gold-dk);
  background:rgba(212,175,55,0.06);
  text-shadow:0 0 8px var(--gold-glow);
}
.nav-cta{
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.15em;
  padding:.55rem 1rem;
  background:transparent;
  color:var(--gold);
  border:1px solid var(--gold);
  border-radius:3px;
  text-transform:uppercase;
  box-shadow:0 0 10px var(--gold-glow-soft), inset 0 0 10px var(--gold-glow-soft);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.nav-cta:hover{
  background:var(--gold);
  color:var(--ink);
  box-shadow:0 0 24px var(--gold-glow);
}
.nav-toggle{
  display:none;
  font-family:var(--font-mono);
  font-size:.78rem;font-weight:600;letter-spacing:.15em;
  background:transparent;
  color:var(--gold);
  border:1px solid var(--gold-dk);
  border-radius:3px;
  padding:.5rem .8rem;
  cursor:pointer;
  text-transform:uppercase;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(4rem,10vw,8rem) 0 clamp(3rem,7vw,5.5rem);
  background:
    radial-gradient(80% 60% at 80% -10%, rgba(212,175,55,0.12), transparent 60%),
    radial-gradient(60% 50% at 10% 100%, rgba(212,175,55,0.06), transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--line-strong);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(212,175,55,0.04) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(212,175,55,0.04) 39px 40px);
  pointer-events:none;
  mask-image:radial-gradient(80% 80% at 50% 50%, black, transparent);
}
.hero .container{position:relative;z-index:1}
.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.9rem,1.4rem + 5.2vw,5.6rem);
  line-height:1.04;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin-bottom:1.8rem;
  color:var(--fg);
  text-shadow:0 0 24px rgba(0,0,0,0.6);
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}
.hero-title .ember{
  color:var(--gold);
  display:inline-block;
  text-shadow:0 0 24px var(--gold-glow), 0 0 48px var(--gold-glow-soft);
}
.hero-sub{
  max-width:50ch;
  font-size:clamp(1.05rem,1rem + 0.4vw,1.25rem);
  color:var(--fg-muted);
  margin-bottom:1.8rem;
  line-height:1.6;
}
.hero-quote{
  font-family:var(--font-mono);
  font-size:clamp(1rem,0.95rem + 0.5vw,1.35rem);
  font-weight:400;
  color:var(--silver);
  border-left:2px solid var(--gold);
  padding:.5rem 0 .5rem 1.2rem;
  margin-bottom:2.6rem;
  font-style:italic;
  text-shadow:0 0 12px rgba(192,192,192,0.15);
}
.hero-stats{
  display:flex;flex-wrap:wrap;gap:1.4rem 3rem;
  margin-bottom:2.8rem;
  padding:1.6rem 0;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
}
.stat{display:flex;flex-direction:column;gap:.25rem}
.stat-num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.2rem,1.6rem + 2.8vw,3.4rem);
  line-height:1;
  color:var(--gold);
  letter-spacing:.005em;
  text-shadow:0 0 16px var(--gold-glow);
}
.stat-label{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-muted);
  max-width:20ch;
}

/* ---------- botao principal (CTA) ---------- */
.btn-brutal{
  display:inline-block;
  position:relative;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:1rem 1.8rem;
  background:linear-gradient(180deg, var(--gold-lt), var(--gold));
  color:var(--ink);
  border:1px solid var(--gold-lt);
  border-radius:4px;
  box-shadow:0 0 24px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 24px rgba(0,0,0,0.5);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-brutal:hover{
  transform:translateY(-2px);
  box-shadow:0 0 36px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.45), 0 12px 32px rgba(0,0,0,0.55);
  filter:brightness(1.06);
}
.btn-brutal.big{font-size:1.15rem;padding:1.15rem 2.4rem;letter-spacing:.14em}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:linear-gradient(180deg, #0a0a0a, #0f0f0f);
  border-top:1px solid var(--gold-dk);
  border-bottom:1px solid var(--gold-dk);
  overflow:hidden;
  padding:.85rem 0;
  box-shadow:inset 0 0 24px rgba(212,175,55,0.08);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee-track span{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.86rem;
  letter-spacing:.22em;
  color:var(--gold);
  white-space:nowrap;
  padding-right:1rem;
  text-shadow:0 0 8px var(--gold-glow-soft);
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{
  position:relative;
  padding:var(--sec-pad-y) 0;
  border-bottom:1px solid var(--line-strong);
}
.section.alt{background:var(--bg-alt)}
.section::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-dk), transparent);
  opacity:.4;
}
.sec-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.7rem,1.3rem + 2.2vw,2.9rem);
  line-height:1.08;
  letter-spacing:.005em;
  margin-bottom:1.4rem;
  color:var(--fg);
  text-transform:uppercase;
}
.sec-title.center{text-align:center;margin-inline:auto;max-width:22ch}
.sec-title em{
  color:var(--gold);
  font-style:italic;
  text-shadow:0 0 18px var(--gold-glow);
}

/* ============================================================
   REVEAL (scroll animation)
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease, transform .65s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink);
  color:var(--fg-muted);
  padding:2rem 0;
  border-top:1px solid var(--gold-dk);
  box-shadow:0 -1px 0 0 var(--gold-glow-soft);
}
.footer-inner{display:flex;align-items:center;gap:1rem;justify-content:center}
.footer-inner p{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.14em;
  color:var(--fg-dim);
  text-transform:uppercase;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:760px){
  .site-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:.2rem;
    background:var(--bg);
    border-bottom:1px solid var(--line-strong);
    padding:.8rem var(--pad-x);
    display:none;
  }
  .site-nav.open{display:flex}
  .site-nav a{width:100%}
  .nav-cta{display:none}
  .nav-toggle{display:inline-block}
  .hero-stats{gap:1.2rem 2rem}

  /* eyebrow menor e com quebra elegante */
  .eyebrow{
    font-size:.62rem;
    letter-spacing:.16em;
    line-height:1.5;
    overflow-wrap:break-word;
    word-break:keep-all;
  }
  .eyebrow.center{
    text-align:center;
    max-width:34ch;
    margin-left:auto;
    margin-right:auto;
  }

  /* contraste do corpo no mobile */
  body{font-size:1.02rem;line-height:1.65}
  .hero-sub{font-size:1.05rem;color:#c8c8c8;line-height:1.65}
  .alfa-card p, .diff-card p, .kpi-card p,
  .section.dark p, .section.dark .problem-cols p,
  .final-card p{color:#c8c8c8}

  /* espacamentos confortaveis */
  .hero{padding:clamp(3rem,8vw,5rem) 0 clamp(2.4rem,6vw,4rem)}
  .alfa-card, .diff-card, .kpi-card{padding:1.5rem 1.25rem}
  .hero-quote{padding-left:1rem}
}
@media (max-width:480px){
  .hero-title{
    font-size:clamp(1.7rem,1rem + 6.6vw,2.7rem);
    line-height:1.06;
    hyphens:none;
    -webkit-hyphens:none;
    overflow-wrap:normal;
    word-break:normal;
  }
  .eyebrow{font-size:.58rem;letter-spacing:.14em}
  .stat-num{font-size:clamp(1.9rem,1.4rem + 3vw,2.6rem)}
  .stat-label{font-size:.66rem;letter-spacing:.12em}
  .btn-brutal{font-size:.88rem;padding:.95rem 1.4rem;letter-spacing:.1em}
  .btn-brutal.big{font-size:1rem;padding:1.05rem 1.6rem;letter-spacing:.12em}
  .sec-title{font-size:clamp(1.5rem,1.1rem + 3vw,2.2rem);line-height:1.12}
  .section{padding:clamp(3.2rem,8vw,5rem) 0}
  .alfa-letter{width:62px;height:62px;font-size:2.2rem}
}
@media (max-width:420px){
  .hero-quote{font-size:1rem;word-break:break-word}
  .hero-title{font-size:1.75rem}
  .hero-sub{font-size:1rem}
  .container{padding-inline:1.1rem}
}
@media (max-width:380px){
  .hero-title{font-size:1.6rem}
  .sec-title{font-size:1.4rem}
  .eyebrow{font-size:.55rem;letter-spacing:.12em}
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
}