/* =========================================================
   ASTRO.GROUP — Design tokens
   ========================================================= */
:root{
  --void:        #07090a;
  --void-soft:   #0c0f11;
  --deep-blue:   #12233d;
  --orange:      #f95603;
  --orange-dim:  #c94402;
  --white:       #ffffff;
  --off-white:   #f5f5f5;
  --grey:        #a0a0a0;
  --grey-dim:    #6c7075;

  --glass-bg:      rgba(255,255,255,0.045);
  --glass-border:  rgba(255,255,255,0.10);
  --glass-bg-orange:     rgba(7,9,10,0.14);
  --glass-border-orange: rgba(7,9,10,0.22);

  --font-display: 'Google Sans Flex', 'Google Sans', 'Inter', sans-serif;
  --font-body: 'Google Sans Text', 'Google Sans Flex', 'Inter', sans-serif;

  --container: 1200px;
  --radius: 20px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background: var(--void);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

::selection{ background: var(--orange); color: var(--void); }

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

/* =========================================================
   Decorative cursor spark
   ========================================================= */
.spark-cursor{
  position:fixed; top:0; left:0; width:22px; height:22px;
  pointer-events:none; z-index:9999;
  transform: translate(-50%,-50%);
  opacity:0; transition: opacity .3s var(--ease);
  mix-blend-mode: screen;
}
.spark-cursor svg{ width:100%; height:100%; fill: var(--orange); filter: drop-shadow(0 0 6px rgba(249,86,3,.8)); }
@media (hover:hover) and (pointer:fine){
  .spark-cursor.active{ opacity:.9; }
}

/* =========================================================
   Typography
   ========================================================= */
.eyebrow{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.eyebrow-dark{ color: rgba(255,255,255,.85); }

.section-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 22px;
}
.dot-accent{ color: var(--orange); }
.dark-on-orange{ color: var(--white); }
.section-text{
  color: var(--grey);
  font-size: 1.05rem;
  max-width: 560px;
  line-height: 1.7;
}
.dark-on-orange-text{ color: rgba(255,255,255,.85); max-width: 640px; }

strong{ color: var(--white); font-weight:600; }

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  padding: 26px 0;
  transition: padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav-inner{
  max-width: var(--container);
  margin:0 auto;
  padding: 0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav.scrolled{
  padding: 16px 0;
  background: rgba(7,9,10,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255,255,255,.08);
}
.nav-logo img{ height: 24px; width:auto; }
.nav-links{ display:flex; gap: 38px; }
.nav-links a{
  font-size: .92rem; font-weight:500; color: var(--off-white);
  opacity:.82; transition: opacity .25s var(--ease);
  position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background: var(--orange); transition: width .3s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: .92rem; font-weight:600;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn-plus{ font-size: 1.1rem; font-weight:600; line-height:1; margin-top:-1px; }
.btn-nav{
  background: var(--orange); color: var(--white);
}
.btn-nav:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(249,86,3,.4); }

.nav-burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-burger span{ width:22px; height:2px; background:var(--white); border-radius:2px; transition: all .3s var(--ease); }
.nav-mobile{
  display:none; flex-direction:column; gap: 4px;
  max-width: var(--container); margin: 14px auto 0; padding: 14px 24px;
  background: rgba(7,9,10,.92);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(18px);
}
.nav-mobile a{ padding: 12px 4px; font-size: .98rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-mobile a:last-child{ border-bottom:none; }
.nav-mobile.open{ display:flex; }

/* =========================================================
   Cosmic background (hero → ecossistema)
   ========================================================= */
.cosmic-bg{
  position:absolute; top:0; left:0; width:100%; height: 3400px;
  z-index:0; pointer-events:none;
  background: var(--void);
}
.cosmic-sticky{
  position: sticky; top:0; left:0; width:100%; height: 100svh;
  overflow:hidden;
}
.cosmic-video{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
  opacity:.55;
}
.cosmic-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(7,9,10,.35) 0%, rgba(7,9,10,.15) 30%, rgba(7,9,10,.55) 75%, var(--void) 100%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(7,9,10,.1), rgba(7,9,10,.65) 70%);
}
.nebula{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:.28;
}
.nebula-1{ width:640px; height:640px; top:-120px; right:-180px; background: radial-gradient(circle, var(--orange), transparent 70%); opacity:.14; }

main{ position:relative; z-index:1; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding: 160px 0 100px;
  position:relative;
  text-align:left;
}
.hero .container{ width:100%; text-align:left; }
.hero-inner{ max-width: 640px; margin:0; text-align:left; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start; }
.hero-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 22px;
  text-align:left;
}
.hero-text{
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--grey);
  max-width: 520px;
  text-align:left;
  margin: 0 0 40px;
}
.btn-primary{
  background: var(--orange); color:var(--white);
  padding: 15px 32px;
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(249,86,3,.45); }
.btn-ghost{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  color: var(--white);
  padding: 15px 32px;
}
.btn-ghost:hover{ background: rgba(255,255,255,.08); transform: translateY(-3px); }

.scroll-cue{
  position:absolute; bottom: 36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: var(--grey-dim); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
.scroll-cue span{
  width:1px; height:34px;
  background: linear-gradient(to bottom, var(--orange), transparent);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ transform: scaleY(0); transform-origin: top; opacity:0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity:1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity:1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity:0; }
}

/* =========================================================
   Sections (shared)
   ========================================================= */
.section{ padding: 140px 0; position:relative; }

/* Reveal-on-scroll */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: filter, opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }
.reveal.evaporating{ transition: none; }

/* Glass card base */
.glass-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--radius);
  padding: 40px;
}

/* =========================================================
   Sobre
   ========================================================= */
.about-card{
  position:relative;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  padding: 64px 60px;
  overflow:hidden;
}
.about-dots{
  position:absolute; top:30px; right:32px;
  display:flex; align-items:center; gap:12px;
}
.about-dots .dot{
  width:12px; height:12px; border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  background:transparent;
}
.about-dots .dot.active{ background: var(--white); border-color: var(--white); }
.about-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
}
.about-text p{
  font-size: 1.02rem; color: var(--grey); line-height:1.7;
  max-width: 420px; margin-left:auto;
}

/* =========================================================
   Serviços
   ========================================================= */
.services-grid{
  margin-top: 56px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.service-card{
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.service-card:hover{
  transform: translateY(-6px);
  border-color: rgba(249,86,3,.4);
  background: rgba(255,255,255,.065);
}
.service-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(249,86,3,.12);
  color: var(--orange);
  margin-bottom: 22px;
}
.service-icon svg{ width:22px; height:22px; }
.service-card h3{ font-family: var(--font-display); font-size:1.12rem; font-weight:700; color:var(--white); margin-bottom:10px; }
.service-card p{ font-size:.94rem; color: var(--grey); line-height:1.6; }

/* =========================================================
   Diferenciais
   ========================================================= */
.diff-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.section-text{ margin-top: 18px; }
.diff-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.diff-list li{
  display:flex; align-items:center; gap:14px;
  font-size: 1.02rem; font-weight:500; color: var(--white);
  padding: 18px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.diff-list li:hover{ transform: translateX(4px); border-color: rgba(249,86,3,.4); }
.check-icon{ width:20px; height:20px; flex:0 0 20px; color: var(--orange); }

/* =========================================================
   Ecossistema (fundo laranja)
   ========================================================= */
.ecosystem{
  background: var(--orange);
  position:relative; z-index:2;
  margin-top: -1px;
  padding: 150px 0;
}
.ecosystem::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 85% 0%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}
/* Header row: title on the left, supporting text beside it — instead of
   stacked centered blocks, this keeps the eyebrow+title as one column and
   lets the paragraph sit to its right, aligned to the same baseline. */
.ecosystem-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 64px;
}
.ecosystem-heading{ max-width: 480px; flex: 0 1 auto; }
.ecosystem-heading .section-title{ margin-bottom: 0; }
.ecosystem .section-text{ margin-top: 6px; flex: 0 1 480px; }

.portals-grid{
  margin-top: 56px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.portal-card{
  display:block;
  background: var(--glass-bg-orange);
  border: 1px solid var(--glass-border-orange);
  backdrop-filter: blur(16px);
  border-radius: var(--radius);
  padding: 32px;
  color: var(--white);
  transition: transform .4s var(--ease), background .4s var(--ease), filter .4s var(--ease), opacity .4s var(--ease);
}
.portal-live{ background: rgba(7,9,10,.9); border-color: rgba(7,9,10,.9); }
.portal-live h3, .portal-live .portal-status, .portal-live p, .portal-live .portal-link{ color: var(--white); }
.portal-card:hover{ transform: translateY(-6px); }
.portal-live:hover{ background: #101315; }
.portal-status{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom: 18px;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid currentColor;
  opacity:.85;
}
.portal-card h3{ font-family: var(--font-display); font-size:1.35rem; font-weight:800; margin-bottom:6px; }
.portal-card p{ font-size:.92rem; opacity:.75; margin-bottom: 18px; }
.portal-link{ font-size:.88rem; font-weight:600; }
.portal-soon{ opacity:.85; }
.portal-soon h3, .portal-soon p{ opacity:.65; }

/* Depth effect: the two "coming soon" cards fade further back the closer
   they are to the right edge, like the reference — a light blur on the
   middle card, a heavier blur + lower opacity on the last one. */
.portal-soon-near{ filter: blur(1.5px); opacity:.75; }
.portal-soon-far{ filter: blur(3px); opacity:.55; }
.portal-soon-near:hover, .portal-soon-far:hover{ transform: none; }

@media (max-width: 860px){
  .ecosystem-header{ flex-direction: column; gap: 24px; }
  .ecosystem .section-text{ flex-basis: auto; max-width: 640px; }
}

/* =========================================================
   Processo
   ========================================================= */
/* Section itself needs no default vertical padding — the pinned inner
   block handles its own spacing, sized to its content (not a forced 100vh),
   so there's no dead empty space while it's pinned. */
.process-section{ padding-top: 0; padding-bottom: 0; }

/* Scroll spacer: gives the pinned block room to "hold" on screen while the
   cards cascade in. Its exact height is computed in script.js from the
   pinned content's real height, so it never leaves excess empty space. */
.process-pin-wrapper{
  position: relative;
}
/* The WHOLE processo block (eyebrow, title and cards) pins together and
   stays fully visible and still — nothing scrolls up/out of view — while
   the cards cascade in underneath it. .process-pin-inner reserves the full
   100vh in the document exactly the same way whether it's stuck or not, so
   it can never overlap the section above while scrolling down towards it. */
.process-pin-inner{
  position: sticky;
  top: 0;
  height: 100vh;
}
/* Centers the actual content vertically inside that 100vh box. This is a
   plain absolutely-positioned block (not a flex child) so it always spans
   the full width and lets .container's own `margin:auto` center it
   horizontally exactly like every other section on the page. */
.process-pin-content{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.process-track{
  position: relative;
  margin-top: 70px;
  height: 150px;
}
.process-card{
  position: absolute;
  top: 0;
  display:flex; align-items:center; gap: 24px;
  width: fit-content;
  max-width: 480px;
  padding: 40px 44px;
  will-change: transform, opacity, filter;
}
/* Every card sits on the exact same line (no vertical stagger at all) —
   only shifted further right than the last, close to the section's right
   edge, so the previous card's number badge keeps peeking out on the left
   instead of being fully covered. */
.process-card:nth-child(1){ left: 0;   z-index: 1; }
.process-card:nth-child(2){ left: 150px; z-index: 2; }
.process-card:nth-child(3){ left: 300px; z-index: 3; }
.process-card:nth-child(4){ left: 450px; z-index: 4; }
.process-card:nth-child(5){ left: 600px; z-index: 5; }
/* Cards 2-5 start hidden (blurred, transparent, offset further right of
   their resting spot); card 1 starts hidden too but with no horizontal
   offset, since it only fades + unblurs into place. All animate in via
   inline styles set by script.js. */
.process-card{
  opacity: 0;
  filter: blur(14px);
  pointer-events: none;
}
.process-card:not(:first-child){
  transform: translateX(220px);
}
.process-num{
  flex:none;
  width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--void-soft);
  border: 1px solid var(--glass-border);
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
  color: var(--orange);
}
.process-card h3{ font-size:1.35rem; font-weight:700; color: var(--white); line-height:1.3; }

/* =========================================================
   CTA final
   ========================================================= */
.cta-final{ padding: 60px 0 150px; }
.cta-card{
  position:relative; overflow:hidden;
  text-align:center; padding: 72px 40px;
  background: linear-gradient(160deg, rgba(249,86,3,.10), rgba(18,35,61,.35));
}
.cta-card::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(480px circle at var(--mx,50%) var(--my,50%), rgba(249,86,3,.30) 0%, rgba(249,86,3,.14) 35%, rgba(249,86,3,.05) 60%, transparent 80%);
  filter: blur(45px);
  opacity:0; transition: opacity .6s var(--ease);
  pointer-events:none;
}
.cta-card.glow-active::before{ opacity:1; }
.cta-card > *{ position:relative; z-index:1; }
.cta-card .section-title, .cta-card .section-text{ margin-left:auto; margin-right:auto; }
.cta-card .btn-primary{ margin-top: 12px; }

/* =========================================================
   Footer / Contato
   ========================================================= */
.footer{ padding-top: 100px; padding-bottom: 40px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px;
  padding-bottom: 60px;
}
.footer-logo{ height: 24px; margin-bottom: 18px; }
.footer-tagline{ color: var(--grey); max-width: 320px; }
.footer-contact .footer-link{
  display:block; font-family: var(--font-display); font-weight:700;
  font-size:1.3rem; color: var(--white); margin-bottom: 10px;
  transition: color .25s var(--ease);
}
.footer-contact .footer-link:hover{ color: var(--orange); }
.footer-social{ display:flex; gap:22px; margin-top: 24px; }
.footer-social a{ font-size:.88rem; color: var(--grey); transition: color .25s var(--ease); }
.footer-social a:hover{ color: var(--orange); }
.footer-bottom{
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.06);
  font-size:.8rem; color: var(--grey-dim);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .btn-nav{ display:none; }
  .nav-burger{ display:flex; }
  .about-grid, .diff-grid{ grid-template-columns: 1fr; gap: 30px; }
  .services-grid{ grid-template-columns: 1fr 1fr; }
  .portals-grid{ grid-template-columns: 1fr; }
  .process-card{ padding: 32px 30px; max-width: 400px; }
  .process-card:nth-child(1){ left: 0; }
  .process-card:nth-child(2){ left: 110px; }
  .process-card:nth-child(3){ left: 220px; }
  .process-card:nth-child(4){ left: 330px; }
  .process-card:nth-child(5){ left: 440px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px){
  .section{ padding: 90px 0; }
  .services-grid{ grid-template-columns: 1fr; }
  .diff-list{ grid-template-columns: 1fr; }
  .hero{ padding-top: 130px; }
  .container{ padding-left: 20px; padding-right: 20px; }
  .hero-title{ font-size: 38px; }
  .about-card{ padding: 40px 28px; }
  .about-text p{ margin-left:0; max-width:none; }
  .process-track{ height: 130px; }
  .process-card{ max-width: 78vw; padding: 26px 22px; gap: 16px; }
  .process-card:nth-child(1){ left: 0; }
  .process-card:nth-child(2){ left: 70px; }
  .process-card:nth-child(3){ left: 140px; }
  .process-card:nth-child(4){ left: 210px; }
  .process-card:nth-child(5){ left: 280px; }
  .process-card:not(:first-child){ transform: translateX(140px); }
  .process-num{ width:48px; height:48px; font-size:.92rem; }
  .process-card h3{ font-size:1.12rem; }
}

/* Process section — below this width there isn't enough horizontal room for
   the scroll-driven cascade (cards end up overlapping and running off the
   edge of the screen). Switch to a simple static vertical list instead;
   script.js detects this breakpoint and shows all cards in place without
   animating them. */
@media (max-width: 760px){
  .process-pin-inner{ position: static; height: auto; }
  .process-pin-content{ position: static; transform: none; padding: 40px 0; }
  .process-track{
    position: static; height: auto; margin-top: 32px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .process-card{
    position: static;
    width: 100%; max-width: none;
  }
}