/* ===================================================================
   Callon — Main Stylesheet
   --------------------------------------------------------------------
   Estrutura:
   1. Variáveis e tokens
   2. Reset / base
   3. Backgrounds (grid, canvas 3D)
   4. Tipografia (gradient, glow)
   5. Layout (nav, marquee, reveal)
   ================================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --c-bg: #06070C;
  --c-bg-2: #030308;
  --c-text: #E7EAF2;

  --c-orange-300: #FFB16A;
  --c-orange-400: #FF8C2A;
  --c-orange-500: #FF6A00;
  --c-orange-600: #E85A00;

  --c-border: rgba(255,140,42,0.18);
  --c-border-strong: rgba(255,140,42,0.5);

  --gradient-primary: linear-gradient(95deg, #FF6A00 0%, #FF8C2A 60%, #FFB16A 100%);
  --gradient-text: linear-gradient(95deg, #FFB16A 0%, #FF8C2A 40%, #FF6A00 100%);

  --shadow-glow-soft: 0 0 22px -8px rgba(255,140,42,.5);
  --shadow-glow-orange:
    0 0 0 1px rgba(255,140,42,.35),
    0 12px 28px -10px rgba(255,106,0,.55),
    0 0 24px -6px rgba(255,140,42,.45);

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Sora', 'Inter', sans-serif;

  --radius-card: 24px;
  --easing: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 2. BASE ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
}
.font-display { font-family: var(--font-display); letter-spacing: -.02em; }

/* ---------- 3. BACKGROUNDS ---------- */
.grid-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255,106,0,.25), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(255,140,42,.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 80%, rgba(255,106,0,.12), transparent 60%),
    linear-gradient(180deg, var(--c-bg), var(--c-bg-2) 60%, var(--c-bg));
}
.grid-bg::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,140,42,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,42,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}
#bg3d{ position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- 4. TIPOGRAFIA EFEITO ---------- */
.gradient-text{
  background: var(--gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.gradient-bg{ background: var(--gradient-primary); }
.text-glow{ text-shadow: 0 0 30px rgba(255,140,42,.4), 0 0 60px rgba(255,106,0,.25); }
.num-glow{ text-shadow: 0 0 40px rgba(255,140,42,.5); }

/* ---------- 5. GLOW UTILITIES ---------- */
.glow-orange{ box-shadow: var(--shadow-glow-orange); }
.glow-soft{ box-shadow: var(--shadow-glow-soft); }

/* ---------- 6. CARDS ---------- */
.card-dark{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .4s var(--easing);
}
.card-dark::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-card);
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,140,42,.45), rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: background .4s var(--easing);
}
.card-dark:hover{ transform: translateY(-4px); }
.card-dark:hover::before{
  background: linear-gradient(135deg, rgba(255,140,42,.9), rgba(255,106,0,.3) 50%, rgba(255,255,255,.05));
}

.feature-card{ transform-style: preserve-3d; transition: transform .5s ease; }
.feature-card .icon-3d{ transform: translateZ(40px); transition: transform .5s; }
.feature-card:hover{
  transform: perspective(1100px) rotateX(6deg) rotateY(-8deg) translateY(-4px);
}
.feature-card:hover .icon-3d{ transform: translateZ(60px); }

.tilt{ transform-style: preserve-3d; transition: transform .6s var(--easing); }
.tilt:hover{
  transform: perspective(1200px) rotateX(4deg) rotateY(-6deg) translateY(-6px);
}

/* ---------- 7. BOTOES / CTA ---------- */
.cta-pulse{ position: relative; }
.cta-pulse::after{
  content: "";
  position: absolute; inset: -3px;
  border-radius: 9999px;
  border: 1.5px solid var(--c-orange-400);
  opacity: .6;
  animation: ringPulse 2s infinite;
  pointer-events: none;
}
@keyframes ringPulse{
  0%   { transform: scale(.98); opacity: .7; }
  100% { transform: scale(1.08); opacity: 0; }
}

/* ---------- 8. NAV ---------- */
.nav-scroll{ transition: all .3s; }
.nav-scroll.scrolled{
  background: rgba(6,7,12,.75);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 6px 30px -10px rgba(0,0,0,.7);
  border-bottom: 1px solid rgba(255,140,42,.15);
}

.logo-mark{
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-orange-500), var(--c-orange-400));
  display: grid; place-items: center;
  color: #fff; font-weight: 800;
  font-family: var(--font-display);
  box-shadow: 0 0 25px -5px rgba(255,140,42,.7);
}

/* ---------- 9. MARQUEE ---------- */
.marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{ display: flex; gap: 3rem; animation: marq 28s linear infinite; }
@keyframes marq{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- 10. REVEAL ON SCROLL ---------- */
.reveal{ opacity: 0; transform: translateY(30px); }
.reveal.in{ opacity: 1; transform: none; transition: all .9s var(--easing); }

/* ---------- 11. SPOTLIGHT CURSOR ---------- */
.spotlight{ position: relative; overflow: hidden; }
.spotlight::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255,140,42,.15), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.spotlight:hover::after{ opacity: 1; }

/* ---------- 12. STEPS / DIVIDERS ---------- */
.step-num{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 96px;
  line-height: 1;
  background: linear-gradient(180deg, var(--c-orange-400) 0%, var(--c-orange-500) 60%, rgba(255,106,0,0) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(255,140,42,.4));
}
.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,140,42,.5), transparent);
}

/* ---------- 13. FAQ ---------- */
details[open] .faq-arrow{ transform: rotate(180deg); color: var(--c-orange-400); }
.faq-arrow{ transition: transform .3s, color .3s; }
details > summary{ list-style: none; }
details > summary::-webkit-details-marker{ display: none; }