/* =========================================================
   GOtorank — Landing Page "Antigravity"
   ========================================================= */
:root{
  --void: #030303;
  --deep: #0A0806;
  --charcoal: #14100C;
  --charcoal-2: #1C1610;
  --line: rgba(247,243,236,0.08);
  --line-2: rgba(247,243,236,0.14);

  --ember: #FF6A1A;
  --amber: #FFA53D;
  --hot: #FF3B1F;
  --gold: #FFC24B;

  --paper: #F7F3EC;
  --mist: #9C9284;
  --mist-dim: #6E6659;

  --ff-display:'Anton', sans-serif;
  --ff-body:'Inter', sans-serif;
  --ff-mono:'IBM Plex Mono', monospace;

  --maxw: 1400px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:var(--deep);}
body{
  font-family:var(--ff-body);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
::selection{background:var(--ember);color:var(--void);}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;position:relative;z-index:2;}

/* ============ ambient background (flat, no orbs) ============ */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--deep);}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.particles{position:fixed; inset:0; z-index:1; pointer-events:none;}
.particle{
  position:absolute; font-family:var(--ff-mono); font-size:11px; color:var(--mist);
  opacity:0; white-space:nowrap; animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{opacity:0; transform:translateY(0) translateX(0);}
  8%{opacity:0.45;}
  92%{opacity:0.3;}
  100%{opacity:0; transform:translateY(-90vh) translateX(var(--drift,20px));}
}

/* ============ reveal utility ============ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-delay-1.is-visible{transition-delay:.08s;}
.reveal-delay-2.is-visible{transition-delay:.16s;}
.reveal-delay-3.is-visible{transition-delay:.24s;}
.reveal-delay-4.is-visible{transition-delay:.32s;}

/* ============ type ============ */
.eyebrow{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ember); box-shadow:0 0 16px 2px rgba(255,106,26,0.6);}
.h1{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(48px, 8vw, 112px);
  line-height:1.1; letter-spacing:0.001em;
  margin:0 0 28px; padding-top:.1em;
}
.h1 .glow{
  display:block;
  background:linear-gradient(100deg, var(--ember), var(--gold) 60%, var(--amber));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.h1.glow{
  background:linear-gradient(100deg, var(--ember), var(--gold) 60%, var(--amber));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.h2{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(32px, 4.8vw, 58px);
  line-height:1.1; letter-spacing:0.001em;
  margin:0 0 20px; padding-top:.08em;
}
.h2 .glow{
  background:linear-gradient(100deg, var(--ember), var(--gold) 60%, var(--amber));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lede{font-size:clamp(17px,1.8vw,21px); line-height:1.65; color:var(--mist); max-width:600px;}
.section-head{max-width:760px; margin:0 auto 60px; text-align:center;}
.section-head.left{margin-left:0; text-align:left;}

/* ============ nav ============ */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  background:rgba(10,8,6,0.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav img{height:38px;}
.nav__cta{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-2); padding:10px 20px; border-radius:100px;
  transition:border-color .25s ease, background .25s ease;
}
.nav__cta:hover{border-color:var(--amber); background:rgba(255,165,61,0.08);}

/* ============ buttons ============ */
.btn{
  position:relative; font-family:var(--ff-body); font-weight:700; font-size:14.5px;
  padding:15px 30px; border-radius:100px;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.btn--solid{
  background:linear-gradient(100deg, var(--ember), var(--hot)); color:var(--paper);
  box-shadow:0 0 0 1px rgba(255,106,26,0.4), 0 20px 40px -14px rgba(255,58,26,0.55);
}
.btn--ghost{
  background:rgba(247,243,236,0.04); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-2); color:var(--paper);
}
.btn:hover{transform:translateY(-3px);}
.btn small{display:block; font-weight:500; font-size:10.5px; opacity:.7; margin-bottom:1px;}

/* ============ hero ============ */
.hero{position:relative; z-index:2; min-height:96vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 24px 80px;}
.hero p.lede{max-width:520px; margin:0 auto 44px; text-align:center;}
.hero__ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:90px;}

.floatcard-wrap{position:relative; z-index:2; width:100%; max-width:420px; perspective:1200px;}
.floatcard{
  background:rgba(20,16,12,0.55); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line-2); border-radius:28px; padding:26px 24px 22px;
  box-shadow:0 40px 90px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,165,61,0.08), inset 0 1px 0 rgba(247,243,236,0.08);
  transform-style:preserve-3d; animation:hover-float 6s ease-in-out infinite; transition:transform .15s ease-out;
}
@keyframes hover-float{0%,100%{transform:translateY(0) rotateX(0) rotateY(0);}50%{transform:translateY(-16px) rotateX(1deg) rotateY(-1deg);}}
.floatcard__head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.floatcard__label{font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist);}
.floatcard__live{font-family:var(--ff-mono); font-size:10.5px; color:var(--gold); display:flex; align-items:center; gap:6px;}
.floatcard__live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ember);animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.row{display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:14px; margin-bottom:6px; background:rgba(247,243,236,0.025);}
.row--top{background:linear-gradient(90deg, rgba(255,106,26,0.14), transparent);}
.row__pos{font-family:var(--ff-display); font-size:16px; width:20px; text-align:center; color:var(--mist); flex:none;}
.row--top .row__pos{color:var(--gold);}
.row__av{width:32px;height:32px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--ember),var(--amber));display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:11px;font-weight:700;color:var(--void);}
.row__name{font-size:13px;font-weight:600;flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row__km{font-family:var(--ff-mono);font-weight:600;font-size:13px;color:var(--gold);}
.row--top .row__km{color:var(--ember);}
.orbit-icon{position:absolute; width:46px;height:46px; border-radius:50%; background:rgba(20,16,12,0.6); backdrop-filter:blur(10px); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:0 12px 30px -8px rgba(0,0,0,0.6);}
.orbit-icon--1{top:-22px; right:-18px; animation:orbit1 9s ease-in-out infinite;}
.orbit-icon--2{bottom:10px; left:-26px; animation:orbit2 11s ease-in-out infinite;}
@keyframes orbit1{0%,100%{transform:translate(0,0) rotate(0);}50%{transform:translate(10px,-14px) rotate(8deg);}}
@keyframes orbit2{0%,100%{transform:translate(0,0) rotate(0);}50%{transform:translate(-12px,10px) rotate(-7deg);}}

.scroll-cue{margin-top:70px; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist);}
.scroll-cue__line{width:1px; height:34px; background:linear-gradient(var(--ember), transparent); animation:scrolldown 1.8s ease-in-out infinite;}
@keyframes scrolldown{0%{transform:scaleY(0); transform-origin:top;}50%{transform:scaleY(1); transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0); transform-origin:bottom;}}

/* ============ marquee ============ */
.marquee{position:relative; z-index:2; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; overflow:hidden; background:rgba(255,255,255,0.015);}
.marquee__track{display:flex; gap:56px; white-space:nowrap; animation:scroll 26s linear infinite; width:max-content;}
.marquee__track span{font-family:var(--ff-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist);}
.marquee__track span b{color:var(--amber); font-weight:600;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============ sections ============ */
section{position:relative; z-index:2; padding:120px 0;}

/* glass card base */
.glass{
  background:rgba(20,16,12,0.5); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:24px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.glass:hover{border-color:rgba(255,165,61,0.35); box-shadow:0 30px 60px -22px rgba(255,106,26,0.25); transform:translateY(-4px);}

/* problema */
.problema__grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start;}
.problema__list{display:flex; flex-direction:column; gap:16px;}
.problema__item{padding:24px 26px;}
.problema__item svg{color:var(--hot); margin-bottom:14px;}
.problema__item b{display:block; font-size:15.5px; margin-bottom:6px;}
.problema__item p{margin:0; font-size:14.5px; line-height:1.6; color:var(--mist);}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.step{padding:30px 24px;}
.step__num{font-family:var(--ff-mono); font-size:12px; color:var(--amber); margin-bottom:20px;}
.step__icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg, rgba(255,106,26,0.22), rgba(255,194,75,0.08));display:flex;align-items:center;justify-content:center;color:var(--ember);margin-bottom:18px;}
.step h3{font-family:var(--ff-body); font-weight:700; font-size:16px; margin:0 0 9px;}
.step p{font-size:13.5px; line-height:1.6; color:var(--mist); margin:0;}

/* showcase */
.showcase{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.showcase__phones{display:flex; justify-content:center; align-items:flex-end; gap:22px;}
.phone{
  width:220px; border-radius:34px; padding:9px;
  background:rgba(20,16,12,0.5); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-2);
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.55);
  animation:hover-float 7s ease-in-out infinite;
}
.phone--offset{margin-bottom:44px; animation-delay:.6s;}
.phone img{border-radius:26px; width:100%; display:block;}
.showcase__points{display:flex; flex-direction:column; gap:24px; margin-top:26px;}
.point{display:flex; gap:16px;}
.point__dot{flex:none;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--ember),var(--gold));display:flex;align-items:center;justify-content:center;color:var(--void);}
.point b{display:block; font-size:16px; margin-bottom:4px;}
.point p{margin:0; font-size:14px; line-height:1.55; color:var(--mist);}

/* desafio diario — glass banner instead of solid strip */
.strip{
  padding:56px 46px;
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.strip::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 90% 140% at 0% 50%, rgba(255,106,26,0.16), transparent 70%);
}
.strip h2{margin:0 0 12px; font-size:clamp(26px,3.4vw,42px);}
.strip p{color:var(--mist); font-size:15.5px; max-width:460px; margin:0; line-height:1.6;}
.strip__stats{display:flex; justify-content:flex-end; gap:0;}
.strip__stat{text-align:center; padding:0 22px; border-left:1px solid var(--line-2);}
.strip__stat:first-child{border-left:none;}
.strip__stat b{display:block; font-family:var(--ff-display); font-size:34px; line-height:1;
  background:linear-gradient(100deg, var(--ember), var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.strip__stat span{font-family:var(--ff-mono); font-size:10.5px; color:var(--mist); text-transform:uppercase; letter-spacing:.06em;}

/* para quem é */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.fit__card{padding:34px 30px;}
.fit__card h3{font-family:var(--ff-display); text-transform:uppercase; font-size:21px; margin:0 0 18px; padding-top:.05em;}
.fit__card--yes h3{color:var(--gold);}
.fit__card ul{display:flex; flex-direction:column; gap:14px;}
.fit__card li{display:flex; gap:11px; font-size:14px; line-height:1.5; color:var(--mist);}
.fit__card li svg{flex:none; margin-top:2px;}

/* faq */
.faq{max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq__item{padding:6px 26px; overflow:hidden;}
.faq__q{width:100%; text-align:left; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; font-size:16px; font-weight:600; color:var(--paper); font-family:inherit;}
.faq__q svg{flex:none; transition:transform .3s ease; color:var(--ember);}
.faq__item[open] .faq__q svg{transform:rotate(45deg);}
.faq__a{padding:0 0 22px; font-size:14.5px; line-height:1.65; color:var(--mist); max-width:640px;}

/* CTA final */
.final{text-align:center;}
.final .section-head{margin-bottom:40px;}
.final__ctas{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:36px;}

/* footer */
.footer{border-top:1px solid var(--line); padding:44px 0; position:relative; z-index:2;}
.footer__row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer__logo img{height:20px;}
.footer__links{display:flex; gap:26px; align-items:center;}
.footer__links a{font-family:var(--ff-mono); font-size:12px; color:var(--mist); display:flex; align-items:center; gap:7px; transition:color .2s ease;}
.footer__links a:hover{color:var(--amber);}
.footer__copy{font-family:var(--ff-mono); font-size:11px; color:var(--mist-dim); margin-top:22px;}

/* sticky mobile cta */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:rgba(10,8,6,0.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2); padding:12px 18px;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  transform:translateY(120%); transition:transform .3s ease;
}
.sticky-cta.is-visible{transform:translateY(0);}
.sticky-cta__txt{font-size:13px; color:var(--paper); font-weight:600; line-height:1.3;}
.sticky-cta__txt span{display:block; font-family:var(--ff-mono); font-size:10px; color:var(--mist); font-weight:400;}
.sticky-cta .btn{padding:10px 18px; font-size:13px;}

/* ============ responsive ============ */
@media (max-width: 980px){
  .wrap{padding:0 28px;}
  .problema__grid{grid-template-columns:1fr; gap:36px;}
  .steps{grid-template-columns:1fr 1fr;}
  .showcase{grid-template-columns:1fr; gap:44px;}
  .showcase__phones{order:2;}
  .strip{grid-template-columns:1fr; text-align:center; gap:26px;}
  .strip p{margin:0 auto;}
  .strip__stats{justify-content:center;}
  .fit{grid-template-columns:1fr;}
}

@media (max-width: 760px){
  .nav{padding:14px 22px;}
  .nav img{height:28px;}
  .nav__cta{padding:9px 16px; font-size:11px;}

  section{padding:72px 0;}
  .hero{padding:96px 20px 64px;}
  .hero__ctas{margin-bottom:64px;}
  .h1{font-size:clamp(36px,10vw,58px);}
  .h2{font-size:clamp(26px,7vw,36px);}
  .lede{font-size:16px;}
  .eyebrow{font-size:11px; letter-spacing:.12em;}

  .floatcard-wrap{max-width:340px;}
  .orbit-icon{width:38px;height:38px;font-size:16px;}
  .orbit-icon--1{top:-16px; right:-10px;}
  .orbit-icon--2{left:-14px;}

  .problema__item{padding:20px 20px;}
  .steps{grid-template-columns:1fr 1fr; gap:14px;}
  .step{padding:22px 18px;}

  .showcase__phones{gap:14px;}
  .phone{width:150px;}
  .phone--offset{margin-bottom:26px;}
  .showcase__points{gap:20px;}

  .strip{padding:36px 26px;}
  .strip__stats{flex-wrap:wrap; gap:18px 0;}
  .strip__stat{padding:0 16px;}
  .strip__stat b{font-size:28px;}

  .fit__card{padding:26px 22px;}
  .faq__item{padding:4px 18px;}
  .faq__q{font-size:14.5px; padding:16px 0;}

  .final__ctas{gap:12px;}

  .footer__row{flex-direction:column; align-items:flex-start; gap:22px;}
  .footer__links{flex-wrap:wrap; gap:18px 22px;}
}

@media (max-width: 620px){
  section{padding:64px 0;}
  .hero{min-height:auto;}
  .steps{grid-template-columns:1fr;}
  .sticky-cta{display:flex;}
  body{padding-bottom:74px;}
}

@media (max-width: 420px){
  .wrap{padding:0 18px;}
  .nav{padding:12px 16px;}
  .nav img{height:24px;}
  .nav__cta .hide-xs{display:none;}
  .hero{padding:88px 16px 56px;}
  .btn{padding:13px 22px; font-size:13.5px;}
  .floatcard{padding:20px 18px 18px;}
  .row__name{font-size:12px;}
  .marquee__track{gap:34px;}
  .marquee__track span{font-size:11.5px;}
  .final h2.glow{font-size:clamp(30px,9vw,44px) !important;}
}