/* ============ VEELO :: tokens ============ */
:root{
  --pink: #E4358F;
  --pink-deep: #B61F75;
  --yellow: #FFD23F;
  --mint: #7DD3A0;
  --lavender: #B095F0;
  --coral: #FF8A65;
  --sky: #5DADE2;

  --cream: #FFF6EC;
  --cream-2: #FFEFDD;
  --ink: #1A1326;
  --ink-soft: #4A3D5C;
  --line: rgba(26,19,38,0.12);

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 36px;
  --r-xl: 56px;

  --shadow-soft: 0 30px 60px -20px rgba(228, 53, 143, 0.25),
                 0 12px 24px -12px rgba(26, 19, 38, 0.18);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Sora", system-ui, sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html, body { background: var(--cream); color: var(--ink); }
body{
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.wrap{ max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; }

/* ============ utility type ============ */
.eyebrow{
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:""; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; color: var(--ink); }
h1{ font-size: clamp(56px, 9vw, 132px); font-weight: 800; font-variation-settings: "wdth" 100; }
h2{ font-size: clamp(38px, 5.5vw, 72px); }
h3{ font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.01em; }
.lede{ font-size: clamp(18px, 1.4vw, 22px); color: var(--ink-soft); max-width: 60ch; line-height: 1.5; }

.tag-italic{ font-style: italic; font-family: var(--display); font-weight: 500; }
.color-pink{ color: var(--pink); }
.color-coral{ color: var(--coral); }
.color-mint{ color: var(--mint); }
.color-lav{ color: var(--lavender); }
.color-yellow{ color: var(--yellow); }
.color-sky{ color: var(--sky); }

/* ============ Nav ============ */
.nav{
  position: sticky; top: 0; z-index: 50;
  padding: 18px 0;
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--cream) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.scrolled{ border-bottom-color: var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content: space-between; gap: 24px; }
.nav-logo{ height: 38px; }
.nav-links{ display:flex; align-items:center; gap: 34px; }
.nav-links a{
  font-weight: 500; font-size: 15px;
  position: relative; padding: 6px 2px;
}
.nav-links a::after{
  content:""; position:absolute; left: 0; right: 0; bottom: -2px;
  height: 6px; background: var(--yellow); border-radius: 999px;
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}
.nav-links a:hover::after{ transform: scaleX(1); }

.btn{
  display: inline-flex; align-items:center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
  background: var(--ink); color: var(--cream);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); background: var(--pink); box-shadow: var(--shadow-soft); }
.btn.btn-pink{ background: var(--pink); color: #fff; }
.btn.btn-pink:hover{ background: var(--ink); }
.btn .arr{
  display:inline-block; transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.btn:hover .arr{ transform: translateX(4px); }

/* ============ Hero ============ */
.hero{
  position: relative; padding: 80px 0 120px;
  overflow: hidden;
}
.hero-content{
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center;
  position: relative; z-index: 2;
}
.hero h1 .word{
  display: inline-block;
}
.hero h1 .stroke{
  position: relative; display: inline-block;
}
.hero h1 .stroke::after{
  content:""; position: absolute; left: -4%; right: -4%; bottom: 6%;
  height: 28%; background: var(--yellow); border-radius: 24px;
  z-index: -1;
}
.hero h1 .pink{ color: var(--pink); font-style: italic; font-weight: 700; }
.hero .lede{ margin-top: 28px; }
.hero .ctas{ display:flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; align-items:center; }
.hero .meta-pill{
  display:inline-flex; align-items:center; gap: 10px; padding: 10px 18px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: 14px; font-weight: 500;
}
.hero .meta-pill .dot{ width: 8px; height: 8px; border-radius:50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in oklab, var(--mint) 30%, transparent); }

/* hero illustration */
.hero-art{
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  justify-self: end;
}
.blob{
  position: absolute; border-radius: 50%;
  filter: blur(0);
  animation: drift 14s ease-in-out infinite;
}
.blob.b1{ width: 58%; height: 58%; left: 8%; top: 6%;
  background: radial-gradient(circle at 30% 30%, #ffb1d6, var(--pink) 75%);
  animation-duration: 16s;
}
.blob.b2{ width: 42%; height: 42%; right: 4%; top: 12%;
  background: radial-gradient(circle at 30% 30%, #fff0a8, var(--yellow) 75%);
  animation-duration: 12s; animation-delay: -3s;
}
.blob.b3{ width: 48%; height: 48%; right: 6%; bottom: 4%;
  background: radial-gradient(circle at 30% 30%, #c2efd5, var(--mint) 75%);
  animation-duration: 18s; animation-delay: -6s;
}
.blob.b4{ width: 36%; height: 36%; left: 4%; bottom: 6%;
  background: radial-gradient(circle at 30% 30%, #e1d3ff, var(--lavender) 75%);
  animation-duration: 15s; animation-delay: -9s;
}
@keyframes drift{
  0%, 100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(20px,-14px) scale(1.04); }
  66%{ transform: translate(-12px,18px) scale(.97); }
}

/* dotted pattern overlay on hero */
.dot-grid{
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: .07; pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 95%);
}

.float-icon{
  position: absolute; z-index: 3;
  background: #fff; border-radius: 18px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.18), 0 6px 12px -6px rgba(0,0,0,.08);
  padding: 14px;
  display: grid; place-items: center;
  animation: bob 6s ease-in-out infinite;
}
.float-icon.fi-1{ top: 4%; left: -4%; animation-delay: 0s; }
.float-icon.fi-2{ top: 38%; right: -6%; animation-delay: -2s; background: var(--ink); color: var(--cream); }
.float-icon.fi-3{ bottom: -2%; left: 18%; animation-delay: -4s; background: var(--yellow); }
@keyframes bob{
  0%, 100%{ transform: translateY(0) rotate(-3deg); }
  50%{ transform: translateY(-12px) rotate(3deg); }
}

/* sparkles */
.sparkle{ position: absolute; pointer-events:none; }
.sparkle svg{ width: 100%; height: 100%; }
.sparkle.s1{ width: 36px; height: 36px; top: -20px; right: 32%; color: var(--coral); animation: spin 8s linear infinite; }
.sparkle.s2{ width: 22px; height: 22px; top: 45%; left: -32px; color: var(--pink); animation: spin 12s linear infinite reverse; }
.sparkle.s3{ width: 28px; height: 28px; bottom: -12px; right: 10%; color: var(--lavender); animation: spin 10s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ============ Marquee ============ */
.marquee{
  position: relative;
  padding: 22px 0;
  background: var(--ink); color: var(--cream);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(-1.4deg);
  margin: 40px -40px;
}
.marquee-track{
  display: flex; gap: 56px; width: max-content;
  animation: marquee 36s linear infinite;
  align-items: center;
}
.marquee-track span{
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 56px;
  white-space: nowrap;
}
.marquee-track .star{ color: var(--pink); font-size: 0.6em; }
.marquee-track .pink-word{ color: var(--pink); font-style: italic; }
.marquee-track .yellow-word{ color: var(--yellow); }
.marquee-track .mint-word{ color: var(--mint); }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============ Section base ============ */
section{ position: relative; padding: 120px 0; }
.section-head{ max-width: 720px; margin-bottom: 60px; }
.section-head h2{ margin-top: 18px; }
.section-head .lede{ margin-top: 22px; }

/* ============ Services grid ============ */
#servicos{ background: var(--cream); }
.services-grid{
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px;
}
.svc{
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative; overflow: hidden;
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  isolation: isolate;
}
.svc:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(0,0,0,.18); }
.svc .svc-num{
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .14em; opacity: .55;
}
.svc h3{ margin-top: 18px; font-size: clamp(22px, 1.9vw, 28px); }
.svc p{ font-size: 15px; line-height: 1.55; margin-top: 12px; opacity: .85; }
.svc .svc-art{ position: absolute; right: -20px; bottom: -20px; width: 140px; height: 140px; z-index: -1; opacity: .9; pointer-events: none; }
.svc > div{ position: relative; z-index: 1; padding-right: 70px; }

.svc.svc-pink{ grid-column: span 6; background: var(--pink); color: #fff; }
.svc.svc-pink h3, .svc.svc-pink .svc-num{ color: #fff; }
.svc.svc-yellow{ grid-column: span 3; background: var(--yellow); color: var(--ink); }
.svc.svc-mint{ grid-column: span 3; background: var(--mint); color: var(--ink); }
.svc.svc-lav{ grid-column: span 4; background: var(--lavender); color: var(--ink); }
.svc.svc-coral{ grid-column: span 4; background: var(--coral); color: var(--ink); }
.svc.svc-ink{ grid-column: span 4; background: var(--ink); color: var(--cream); }
.svc.svc-ink h3{ color: var(--cream); }
.svc.svc-sky{ grid-column: span 6; background: var(--sky); color: var(--ink); }
.svc.svc-cream{ grid-column: span 6; background: #fff; color: var(--ink); border: 1px solid var(--line); }

/* ============ How we work / process ============ */
#processo{
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  padding-top: 140px;
}
.steps{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  margin-top: 60px;
  position: relative;
}
.step{
  background: #fff;
  border-radius: var(--r-md);
  padding: 28px;
  border: 1px solid var(--line);
  position: relative;
  transition: transform .3s ease, border-color .3s ease;
}
.step:hover{ transform: translateY(-4px); border-color: var(--pink); }
.step .num{
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 24px;
  color: #fff;
  margin-bottom: 18px;
}
.step:nth-child(1) .num{ background: var(--pink); }
.step:nth-child(2) .num{ background: var(--coral); }
.step:nth-child(3) .num{ background: var(--lavender); }
.step:nth-child(4) .num{ background: var(--mint); color: var(--ink); }
.step h3{ font-size: 20px; }
.step p{ font-size: 14.5px; color: var(--ink-soft); margin-top: 8px; }

/* connecting squiggle */
.steps-connector{
  position: absolute; left: 0; right: 0; top: -28px;
  height: 40px; opacity: .5; pointer-events: none;
}

/* ============ Social media spotlight ============ */
#social{
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: 0;
}
#social .eyebrow{ color: var(--yellow); }
#social h2{ color: var(--cream); }
#social h2 .pink{ color: var(--pink); font-style: italic; }
#social .lede{ color: color-mix(in oklab, var(--cream) 80%, transparent); }
.social-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center;
  margin-top: 60px;
}
.social-list{ display: flex; flex-direction: column; gap: 14px; }
.social-item{
  display: flex; gap: 22px; align-items: flex-start;
  padding: 22px 4px;
  border-bottom: 1px solid color-mix(in oklab, var(--cream) 14%, transparent);
}
.social-item:last-child{ border-bottom: none; }
.social-item .icon{
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
}
.social-item h3{ color: var(--cream); font-size: 19px; }
.social-item p{ font-size: 14.5px; opacity: .75; margin-top: 4px; line-height: 1.5; }

.phone-mock{
  position: relative;
  width: 100%; max-width: 360px; aspect-ratio: 9/18.5;
  margin: 0 auto;
  background: linear-gradient(160deg, #2a1d3a, #0d0815);
  border-radius: 44px;
  padding: 14px;
  box-shadow: 0 40px 80px -30px rgba(228, 53, 143, .35),
              0 0 0 2px rgba(255,255,255,.05) inset;
}
.phone-screen{
  width: 100%; height: 100%; border-radius: 32px;
  background: var(--cream); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-screen .ph-header{
  padding: 24px 18px 10px; display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--ink); font-size: 13px;
}
.phone-screen .ph-header .av{
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--coral));
}
.phone-screen .ph-feed{
  flex: 1; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.ph-card{
  background: #fff; border-radius: 14px; padding: 12px; border: 1px solid var(--line);
  display: flex; gap: 10px; align-items: center;
  animation: phFloat 8s ease-in-out infinite;
}
.ph-card:nth-child(2){ animation-delay: -2s; }
.ph-card:nth-child(3){ animation-delay: -4s; background: var(--pink); color: #fff; border-color: transparent; }
.ph-card:nth-child(4){ animation-delay: -6s; background: var(--yellow); }
@keyframes phFloat{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(4px); }
}
.ph-card .ph-thumb{
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--mint), var(--sky));
}
.ph-card:nth-child(2) .ph-thumb{ background: linear-gradient(135deg, var(--lavender), var(--pink)); }
.ph-card:nth-child(3) .ph-thumb{ background: linear-gradient(135deg, #fff, var(--yellow)); }
.ph-card:nth-child(4) .ph-thumb{ background: linear-gradient(135deg, var(--coral), var(--pink)); }
.ph-card .ph-lines{ flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ph-card .ph-lines span{
  display: block; height: 6px; background: currentColor; opacity: .15; border-radius: 4px;
}
.ph-card .ph-lines span:nth-child(2){ width: 60%; }

.phone-orbit{
  position: absolute; inset: 0; pointer-events: none;
}
.phone-orbit .chip{
  position: absolute; background: var(--cream); color: var(--ink);
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.4);
  display: inline-flex; align-items: center; gap: 8px;
  animation: bob 6s ease-in-out infinite;
}
.phone-orbit .chip.c1{ top: 8%; left: -16%; background: var(--pink); color: #fff; }
.phone-orbit .chip.c2{ top: 32%; right: -12%; animation-delay: -2s; }
.phone-orbit .chip.c3{ bottom: 14%; left: -8%; background: var(--yellow); animation-delay: -4s; }

/* ============ Numbers / proof band ============ */
.proof{
  background: var(--ink);
  color: var(--cream);
  padding: 0 0 120px;
}
.proof-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-top: 60px;
  border-top: 1px solid color-mix(in oklab, var(--cream) 14%, transparent);
}
.stat .num{
  font-family: var(--display);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.stat .num .sym{ color: var(--pink); }
.stat .num.yellow{ color: var(--yellow); }
.stat .num.mint{ color: var(--mint); }
.stat .num.coral{ color: var(--coral); }
.stat .lbl{ margin-top: 16px; opacity: .75; font-size: 14px; max-width: 220px; line-height: 1.5; }

/* ============ CTA ============ */
#contato{
  background: var(--ink);
  color: var(--cream);
  padding: 0 0 140px;
}
.cta-card{
  background: var(--pink);
  border-radius: var(--r-xl);
  padding: 80px 60px;
  position: relative; overflow: hidden;
  color: #fff;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
.cta-card h2{ color: #fff; font-size: clamp(38px, 4.5vw, 64px); }
.cta-card .lede{ color: rgba(255,255,255,.85); margin-top: 18px; }
.cta-card .btn{ background: var(--ink); color: var(--cream); font-size: 16px; padding: 18px 28px; }
.cta-card .btn:hover{ background: var(--yellow); color: var(--ink); }
.cta-form{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 2;
}
.cta-form input, .cta-form textarea{
  background: rgba(255,255,255,.9); border: none;
  border-radius: 12px; padding: 14px 16px;
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  width: 100%;
  transition: box-shadow .25s ease;
}
.cta-form input:focus, .cta-form textarea:focus{
  outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.4);
}
.cta-form textarea{ resize: vertical; min-height: 80px; }
.cta-form button{
  background: var(--ink); color: var(--cream);
  padding: 14px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
  margin-top: 4px;
  transition: background .25s ease, transform .25s ease;
}
.cta-form button:hover{ background: var(--yellow); color: var(--ink); transform: translateY(-2px); }
.cta-card .cta-deco{
  position: absolute; pointer-events: none;
}
.cta-card .cta-deco.d1{ width: 240px; height: 240px; border-radius: 50%; background: var(--yellow); top: -100px; right: 30%; opacity: .35; filter: blur(20px); }
.cta-card .cta-deco.d2{ width: 200px; height: 200px; border-radius: 50%; background: var(--coral); bottom: -80px; left: 20%; opacity: .35; filter: blur(20px); }
.cta-card .cta-sparkle{ position: absolute; }
.cta-card .cta-sparkle.s1{ top: 30px; right: 80px; width: 32px; height: 32px; color: var(--yellow); animation: spin 10s linear infinite; }
.cta-card .cta-sparkle.s2{ bottom: 32px; right: 240px; width: 22px; height: 22px; color: #fff; animation: spin 8s linear infinite reverse; }

/* ============ Footer ============ */
footer{
  background: var(--ink);
  color: var(--cream);
  padding: 60px 0 40px;
  border-top: 1px solid color-mix(in oklab, var(--cream) 14%, transparent);
}
.foot-top{
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px;
}
.foot-logo{
  height: 44px;
  opacity: 1;
}
.foot-tag{ margin-top: 18px; opacity: .65; font-size: 14px; max-width: 32ch; line-height: 1.55; }
.foot-col h4{
  font-family: var(--body); text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; font-weight: 700; color: var(--pink); margin-bottom: 18px;
}
.foot-col ul{ list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot-col a{ font-size: 14.5px; opacity: .8; transition: opacity .2s ease, color .2s ease; }
.foot-col a:hover{ opacity: 1; color: var(--yellow); }
.foot-bottom{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, var(--cream) 14%, transparent);
  font-size: 13px; opacity: .55;
}

/* ============ Scroll reveal ============ */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity: 1; transform: none; }
.reveal.d1{ transition-delay: .08s; }
.reveal.d2{ transition-delay: .16s; }
.reveal.d3{ transition-delay: .24s; }
.reveal.d4{ transition-delay: .32s; }

/* ============ Responsive ============ */
@media (max-width: 1100px){
  .nav-links{ gap: 22px; }
}

@media (max-width: 980px){
  .hero{ padding: 40px 0 80px; }
  .hero-content{ grid-template-columns: 1fr; gap: 40px; }
  .hero-art{ max-width: 420px; justify-self: center; }
  section{ padding: 80px 0; }
  .services-grid{ gap: 16px; }
  .svc.svc-pink, .svc.svc-sky, .svc.svc-cream{ grid-column: span 12; }
  .svc.svc-yellow, .svc.svc-mint{ grid-column: span 6; }
  .svc.svc-lav, .svc.svc-coral, .svc.svc-ink{ grid-column: span 12; }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .social-grid{ grid-template-columns: 1fr; gap: 50px; }
  .proof-grid{ grid-template-columns: repeat(2, 1fr); }
  .cta-card{ grid-template-columns: 1fr; padding: 50px 30px; gap: 32px; }
  .foot-top{ grid-template-columns: 1fr 1fr; gap: 30px; }
  .nav-links{ display: none; }
}

@media (max-width: 720px){
  .wrap{ padding: 0 22px; }

  /* Nav — keep button visible but make it tight */
  .nav{ padding: 14px 0; }
  .nav-logo{ height: 32px; }
  .nav .btn{ padding: 11px 16px; font-size: 13.5px; }
  .nav .btn .arr{ display: none; }

  /* Hero */
  .hero{ padding: 24px 0 60px; }
  .hero-content{ gap: 32px; }
  h1{ font-size: clamp(42px, 11vw, 56px); line-height: 1.05; }
  .lede{ font-size: 16px; }
  .hero .ctas{ gap: 10px; margin-top: 28px; }
  .hero .ctas .btn{ width: 100%; justify-content: center; padding: 14px 18px; }
  .hero .meta-pill{ width: 100%; justify-content: center; }
  .hero-art{ max-width: 320px; aspect-ratio: 1/1; }
  .float-icon.fi-1{ width: 64px !important; height: 64px !important; left: 0; }
  .float-icon.fi-2{ width: 76px !important; height: 76px !important; right: 0; }
  .float-icon.fi-3{ width: 60px !important; height: 60px !important; left: 22%; bottom: 2%; }
  .float-icon.fi-2 svg{ width: 44px !important; height: 44px !important; }

  /* Marquee — kill negative margins on mobile */
  .marquee{ margin: 30px 0; transform: rotate(-1deg); padding: 18px 0; }
  .marquee-track span{ font-size: 24px; gap: 36px; }
  .marquee-track{ gap: 36px; }

  /* Sections */
  section{ padding: 64px 0; }
  h2{ font-size: clamp(32px, 8vw, 44px); }
  h3{ font-size: 20px; }
  .section-head{ margin-bottom: 36px; }
  .section-head .lede{ margin-top: 16px; }

  /* Services — all stacked */
  .services-grid{ gap: 14px; }
  .services-grid > *{ grid-column: span 12 !important; }
  .svc{ padding: 26px; min-height: auto; }
  .svc h3{ font-size: 22px; }
  .svc .svc-art{ width: 120px; height: 120px; right: -16px; bottom: -16px; }

  /* Processo */
  .steps{ grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .step{ padding: 22px; }
  .step .num{ width: 44px; height: 44px; font-size: 20px; margin-bottom: 14px; }

  /* Social section */
  #social{ border-radius: 32px 32px 0 0; }
  .social-grid{ margin-top: 40px; gap: 60px; }
  .social-item{ gap: 16px; padding: 18px 0; }
  .social-item .icon{ width: 42px; height: 42px; border-radius: 12px; padding: 8px; }
  .social-item h3{ font-size: 17px; }
  .social-item p{ font-size: 14px; }

  /* Phone mock — shrink and contain orbits */
  .phone-mock{ max-width: 260px; border-radius: 36px; padding: 10px; }
  .phone-screen{ border-radius: 26px; }
  .phone-screen .ph-header{ padding: 18px 14px 8px; font-size: 12px; }
  .phone-screen .ph-header .av{ width: 24px; height: 24px; }
  .phone-orbit .chip{ font-size: 11px; padding: 6px 10px; }
  .phone-orbit .chip.c1{ left: -6%; top: 4%; }
  .phone-orbit .chip.c2{ right: -4%; top: 30%; }
  .phone-orbit .chip.c3{ left: -2%; bottom: 10%; }

  /* Proof */
  .proof-grid{ grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 36px; }
  .proof{ padding-bottom: 80px; }
  .stat .num{ font-size: clamp(40px, 11vw, 56px); }
  .stat .lbl{ font-size: 13px; margin-top: 10px; }

  /* CTA */
  #contato{ padding-bottom: 80px; }
  .cta-card{ padding: 40px 24px; border-radius: 32px; }
  .cta-card h2{ font-size: clamp(30px, 7vw, 40px); }
  .cta-card .lede{ font-size: 15px; }
  .cta-card div[style*="margin-top:32px"]{ gap: 10px !important; }
  .cta-card div[style*="margin-top:32px"] .btn{
    width: 100%; justify-content: center;
    padding: 14px 18px; font-size: 14px;
    word-break: break-all;
  }
  .cta-form{ padding: 18px; gap: 12px; }
  .cta-form input, .cta-form textarea{ font-size: 16px; padding: 12px 14px; } /* 16px evita zoom no iOS */
  .cta-form button{ padding: 14px 18px; font-size: 14px; }
  /* Sparkles do CTA: reposicionar pra dentro do card */
  .cta-card .cta-sparkle.s1{ top: 20px; right: 24px; width: 24px; height: 24px; }
  .cta-card .cta-sparkle.s2{ bottom: 16px; left: 24px; right: auto; width: 18px; height: 18px; }

  /* Footer */
  footer{ padding: 50px 0 32px; }
  .foot-top{ grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-bottom: 32px; }
  .foot-top > div:first-child{ grid-column: span 2; }
  .foot-logo{ height: 38px; }
  .foot-tag{ font-size: 13.5px; }
  .foot-col h4{ font-size: 11px; margin-bottom: 12px; }
  .foot-bottom{ flex-direction: column; gap: 10px; text-align: center; padding-top: 20px; font-size: 12px; }
}

@media (max-width: 400px){
  .wrap{ padding: 0 18px; }
  .nav .btn{ padding: 10px 14px; font-size: 13px; }
  .nav-logo{ height: 30px; }
  h1{ font-size: 38px; }
  .hero-art{ max-width: 280px; }
  .foot-top{ grid-template-columns: 1fr; }
  .foot-top > div:first-child{ grid-column: span 1; }
  .proof-grid{ grid-template-columns: 1fr; }
}