/* BeachGo — Site institucional · tokens do Design System (beachgo-tokens.css) */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#FF9900; --primary-dark:#E68A00; --primary-light:#FFB84D;
  --secondary:#121212;
  --bg:#FFFDF9; --sand:#FFF5E6; --sand-border:#FFE0B2; --card:#FFFFFF;
  --text-primary:#212121; --text-secondary:#424242; --muted:#757575;
  --border:#E8E0D4; --divider:#F5F5F5;
  --success:#4CAF50;
  --radius-card:12px; --radius-button:8px; --radius-lg:20px; --radius-pill:100px;
  --font-sans:'Urbanist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --shadow-lift:0 12px 32px rgba(255,153,0,.16);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
html,body{max-width:100%; overflow-x:hidden;}
body{
  margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  font-family:var(--font-sans); color:var(--text-primary); background:var(--bg);
  line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--primary-dark);}
img{max-width:100%;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px; width:100%;}

/* ---------- Topbar ---------- */
.topbar{background:rgba(255,253,249,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--divider); position:sticky; top:0; z-index:50;}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:16px;}
.topbar img{height:44px; width:auto; display:block;}
.topbar nav{display:flex; gap:26px; align-items:center;}
.topbar nav a{color:var(--text-secondary); text-decoration:none; font-weight:600; font-size:15px; transition:color .2s;}
.topbar nav a:hover{color:var(--primary-dark);}
.btn{
  display:inline-block; background:var(--primary); color:#fff !important; text-decoration:none;
  padding:12px 22px; border-radius:var(--radius-button); font-weight:700; font-size:15px;
  transition:background .2s, transform .15s, box-shadow .2s; border:none; cursor:pointer;
}
.btn:hover{background:var(--primary-dark); transform:translateY(-1px); box-shadow:var(--shadow-lift);}
.btn.ghost{background:transparent; color:var(--primary-dark) !important; border:2px solid var(--primary); padding:10px 20px;}
.btn.ghost:hover{background:var(--sand); box-shadow:none;}
.topbar .btn{padding:10px 18px; font-size:14px;}
@media(max-width:760px){ .topbar nav a:not(.btn){display:none;} }

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,#FFFDF9 0%,#FFF3DD 78%,#FFE9C4 100%);}
.hero::before{ /* sol */
  content:''; position:absolute; top:-180px; right:-120px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,184,77,.55) 0%, rgba(255,153,0,.22) 45%, transparent 70%);
  pointer-events:none;
}
.hero .wrap{display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:88px; padding-bottom:150px; position:relative;}
@media(max-width:640px){ .hero .wrap{padding-top:64px; padding-bottom:110px;} }

.hero h1{font-size:clamp(38px,6vw,64px); line-height:1.1; font-weight:800; letter-spacing:-1.4px; margin:0 0 20px;}
.hero h1 .hl{color:var(--primary-dark); position:relative; white-space:nowrap;}
.hero h1 .hl svg{position:absolute; left:0; bottom:-10px; width:100%; height:12px;}
.hero p.lead{font-size:19px; color:var(--text-secondary); margin:0 auto 30px; max-width:560px;}

.badges{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;}
.store-badge{
  display:flex; align-items:center; gap:10px; background:var(--secondary); color:#fff; text-decoration:none;
  border-radius:10px; padding:9px 16px; line-height:1.15; transition:transform .15s, opacity .2s;
}
.store-badge:hover{transform:translateY(-2px);}
.store-badge svg{width:22px; height:22px; flex-shrink:0;}
.store-badge small{display:block; font-size:10px; opacity:.75; letter-spacing:.4px; text-transform:uppercase;}
.store-badge b{font-size:15px; font-weight:700;}
.soon{font-size:12px; color:var(--muted); margin-top:10px;}

/* pílula de contexto acima do h1 */
.pill{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--sand-border);
  color:var(--primary-dark); font-weight:700; font-size:13px; border-radius:var(--radius-pill);
  padding:6px 14px; margin-bottom:18px; box-shadow:0 2px 10px rgba(255,153,0,.08);
}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(76,175,80,.18);}

/* ondas na base do hero */
.waves{position:absolute; left:0; right:0; bottom:-2px; line-height:0; z-index:3; pointer-events:none;}
.waves svg{display:block; width:100%; height:90px;}
@media(max-width:640px){ .waves svg{height:56px;} }

/* ---------- Seções ---------- */
section{padding:72px 0;}
.eyebrow{color:var(--primary-dark); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 8px;}
h2.title{font-size:clamp(26px,3.4vw,36px); font-weight:800; letter-spacing:-.6px; margin:0 0 14px; line-height:1.2;}
p.sub{color:var(--text-secondary); font-size:16.5px; max-width:640px; margin:0 0 40px;}
.center{text-align:center;}
.center p.sub{margin-left:auto; margin-right:auto;}

/* destaques (o que é) */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:820px){ .feat-grid{grid-template-columns:1fr;} }
.feat{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px 26px; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.feat:hover{transform:translateY(-4px); border-color:var(--primary); box-shadow:var(--shadow-lift);}
.feat .ico{width:52px; height:52px; border-radius:14px; background:var(--sand); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.feat .ico svg{width:26px; height:26px; stroke:var(--primary-dark); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.feat h3{margin:0 0 6px; font-size:18px; font-weight:700;}
.feat p{margin:0; font-size:14.5px; color:var(--text-secondary);}

/* como funciona */
.how{background:var(--sand); border-top:1px solid var(--sand-border); border-bottom:1px solid var(--sand-border); position:relative;}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step;}
@media(max-width:820px){ .steps-grid{grid-template-columns:1fr; max-width:460px; margin:0 auto;} }
.step{background:var(--card); border:1px solid var(--sand-border); border-radius:var(--radius-lg); padding:30px 26px; position:relative;}
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:-20px; left:24px; width:44px; height:44px; border-radius:50%;
  background:var(--primary); color:#fff; font-weight:800; font-size:19px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(255,153,0,.35);
}
.step h3{margin:14px 0 6px; font-size:17.5px; font-weight:700;}
.step p{margin:0; font-size:14.5px; color:var(--text-secondary);}

/* para quem */
.who-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:820px){ .who-grid{grid-template-columns:1fr;} }
.who{
  background:linear-gradient(180deg,#fff, #FFFBF4); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 26px; display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.who:hover{transform:translateY(-4px); border-color:var(--primary); box-shadow:var(--shadow-lift);}
.who .tag{align-self:flex-start; background:var(--sand); color:var(--primary-dark); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; border-radius:var(--radius-pill); padding:5px 12px; margin-bottom:14px;}
.who h3{margin:0 0 8px; font-size:19px; font-weight:800;}
.who p{margin:0 0 18px; font-size:14.5px; color:var(--text-secondary); flex:1;}
.who a.link{font-weight:700; font-size:14.5px; text-decoration:none;}
.who a.link:hover{text-decoration:underline;}

/* CTA final */
.cta{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border-radius:24px;
  padding:52px 40px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta::before{content:''; position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.14);}
.cta::after{content:''; position:absolute; right:60px; bottom:-90px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.10);}
.cta h2{margin:0 0 6px; font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.4px;}
.cta p{margin:0; opacity:.94; font-size:15.5px; max-width:520px;}
.cta .btn{background:#fff; color:var(--primary-dark) !important; position:relative; z-index:1;}
.cta .btn:hover{background:var(--sand); box-shadow:none;}

/* ---------- Footer (padrão legal-site) ---------- */
footer{background:var(--secondary); color:#cfcfcf; padding:32px 0; font-size:13px; border-top:3px solid var(--primary); margin-top:72px;}
footer .wrap{display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center;}
footer .foot-nav{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 22px;}
footer a{color:#fff; text-decoration:none; font-weight:600;}
footer a:hover{color:var(--primary-light);}
footer .legal{color:#9E9E9E; line-height:1.5;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;}

/* hero load-in */
.hero .fade{opacity:0; transform:translateY(16px); animation:rise .7s ease forwards;}
.hero .f1{animation-delay:.05s;} .hero .f2{animation-delay:.15s;} .hero .f3{animation-delay:.25s;} .hero .f4{animation-delay:.35s;}
@keyframes rise{to{opacity:1; transform:none;}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
  .hero .fade{opacity:1; transform:none;}
}