/* ═══════════════════════════════════════════════════════════════════════
   CREATO STUDIO — site imersivo · uma agência, dois mundos
   Paleta: #1A1A1A grafite · #F9FAFB gelo · #D4D4D4 cinza · #9E23B2 roxo
   Marketing = CLARO · IA & Tech = ESCURO · roxo conecta os dois
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@500,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap');

:root {
  --graphite:#1A1A1A; --ice:#F9FAFB; --gray:#D4D4D4; --purple:#9E23B2; --purple-deep:#7A1A8A; --purple-soft:#D98FE6;

  --bg: var(--graphite); --surface:#222225; --surface-2:#2A2A2E;
  --border: rgba(212,212,212,.12); --line: rgba(212,212,212,.20);
  --text: var(--ice); --muted: var(--gray); --faint: rgba(212,212,212,.46);
  --accent: var(--purple); --accent-soft: rgba(158,35,178,.16);
  --shadow: 0 30px 60px -34px rgba(0,0,0,.65); --aura:.24; --dot: rgba(212,212,212,.07);

  --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --maxw:1140px;
}
body.world-mkt {
  --bg: var(--ice); --surface:#FFFFFF; --surface-2:#F2F2F4;
  --border:#E7E7EB; --line:#DCDCE1; --text: var(--graphite);
  --muted: rgba(26,26,26,.60); --faint: rgba(26,26,26,.42);
  --accent-soft: rgba(158,35,178,.08); --shadow: 0 26px 60px -30px rgba(26,26,26,.26);
  --aura:.12; --dot: rgba(26,26,26,.08);
}
body.world-tech {
  --bg: var(--graphite); --surface:#222225; --surface-2:#2A2A2E;
  --border: rgba(212,212,212,.12); --line: rgba(212,212,212,.20); --text: var(--ice);
  --muted: var(--gray); --faint: rgba(212,212,212,.46);
  --accent-soft: rgba(158,35,178,.16); --shadow: 0 30px 60px -34px rgba(0,0,0,.65);
  --aura:.24; --dot: rgba(212,212,212,.07);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background: var(--graphite); color: var(--ice); font-family:'Space Grotesk',system-ui,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.world-mkt { background: var(--ice); }
body[data-screen="entry"] { overflow:hidden; height:100dvh; background: var(--graphite); }

h1,h2,h3,h4 { font-family:'Satoshi',sans-serif; margin:0; line-height:1.1; letter-spacing:-.02em; }
a { color:inherit; text-decoration:none; }
em { font-style:normal; color: var(--accent); }
strong { color: var(--text); font-weight:600; }
.wrap { width:100%; max-width: var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }

/* ── Screens ────────────────────────────────────────────────────────────── */
.screen { display:none; }
.screen.is-active { display:block; }
.world { background: var(--bg); color: var(--text); }
.world.is-active { animation: worldIn .6s var(--ease-out) both; }
@keyframes worldIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }


/* ═══════════════════════════════════════════════════════════════════════
   ENTRADA — split diagonal (estado controlado via JS p/ fluidez)
   ═══════════════════════════════════════════════════════════════════════ */
.entry { position:fixed; inset:0; z-index:10; }
.split { position:relative; height:100dvh; width:100%; overflow:hidden; }

.panel { position:absolute; inset:0; display:flex; align-items:center; cursor:pointer; transition: clip-path .5s var(--ease), background .5s var(--ease), opacity .5s var(--ease); }
.panel--mkt  { background: var(--ice); color: var(--graphite); justify-content:flex-start; padding-left: clamp(1.6rem,9vw,9rem); z-index:1; }
.panel--tech {
  background: var(--graphite); color: var(--ice); justify-content:flex-end; padding-right: clamp(1.6rem,9vw,9rem); z-index:2;
  --seam-top:57%; --seam-bot:45%;
  clip-path: polygon(var(--seam-top) 0, 100% 0, 100% 100%, var(--seam-bot) 100%);
  filter: drop-shadow(-1px 0 0 rgba(158,35,178,.7)) drop-shadow(-9px 0 26px rgba(158,35,178,.4));
  will-change: clip-path;
}
.panel__glow { position:absolute; width:85%; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.18; pointer-events:none; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.panel--mkt  .panel__glow { background: radial-gradient(circle, rgba(158,35,178,.45), transparent 64%); left:-16%; top:4%; }
.panel--tech .panel__glow { background: radial-gradient(circle, rgba(158,35,178,.85), transparent 64%); right:-16%; bottom:0; opacity:.3; }

.panel__inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:.55rem; max-width:26ch; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.panel--mkt  .panel__inner { align-items:flex-start; text-align:left; }
.panel--tech .panel__inner { align-items:flex-end; text-align:right; }
.panel__eyebrow { font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color: var(--purple); font-weight:600; }
.panel__title { font-family:'Satoshi',sans-serif; font-weight:900; letter-spacing:-.03em; font-size: clamp(2.2rem,6vw,4.8rem); line-height:.96; color: var(--purple); transition: transform .5s var(--ease); }
.panel--mkt  .panel__tag { color: rgba(26,26,26,.6); }
.panel--tech .panel__tag { color: var(--gray); }
.panel__tag { font-size: clamp(.9rem,1.5vw,1.06rem); }
.panel__enter { margin-top:.9rem; display:inline-flex; align-items:center; gap:.5rem; font-family:'Satoshi',sans-serif; font-weight:600; font-size:.9rem; padding:.66rem 1.3rem; border-radius:100px; border:1.5px solid currentColor; opacity:0; transform:translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s, color .3s, border-color .3s; }
.panel__enter svg { width:17px; height:17px; transition: transform .3s var(--ease); }

/* estado de hover dirigido por JS (.split.is-mkt / .is-tech) — sem flicker */
@media (hover:hover) and (min-width:781px) {
  .split.is-tech .panel--tech { --seam-top:41%; --seam-bot:29%; background: linear-gradient(120deg,#1A1A1A 40%,#2A0E30); }
  .split.is-mkt  .panel--tech { --seam-top:73%; --seam-bot:61%; }
  .split.is-mkt  .panel--mkt  { background: linear-gradient(120deg,#FFFFFF 40%,#F4E9F6); }

  .split.is-tech .panel--tech .panel__glow,
  .split.is-mkt  .panel--mkt  .panel__glow { opacity:.55; transform:scale(1.16); }
  .split.is-tech .panel--tech .panel__title,
  .split.is-mkt  .panel--mkt  .panel__title { transform:scale(1.04); }
  .split.is-tech .panel--tech .panel__enter,
  .split.is-mkt  .panel--mkt  .panel__enter { opacity:1; transform:none; background: var(--purple); color:#fff; border-color: var(--purple); }
  .split.is-tech .panel--tech .panel__enter svg,
  .split.is-mkt  .panel--mkt  .panel__enter svg { transform:translateX(4px); }
  .split.is-mkt  .panel--tech .panel__inner,
  .split.is-tech .panel--mkt  .panel__inner { opacity:.5; }
}

/* Núcleo da marca (chip branco — logo tem fundo branco) */
.entry__core { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.entry__badge { display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:1.1rem 1.6rem 1rem; border-radius:20px; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 24px 60px -22px rgba(0,0,0,.5); }
.entry__logo-img { height:42px; width:auto; display:block; }
.entry__logo-text { display:none; font-family:'Satoshi',sans-serif; font-weight:600; font-size:1.5rem; color: var(--graphite); }
.entry__logo-text b { color: var(--purple); font-weight:900; }
.entry__sub { font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color: rgba(26,26,26,.55); }

/* Saída ao escolher */
body.is-leaving .entry__core { opacity:0; transition: opacity .3s ease; }
body.is-leaving.choose-tech .panel--tech { --seam-top:0%; --seam-bot:0%; }
body.is-leaving.choose-tech .panel--mkt { opacity:0; }
body.is-leaving.choose-mkt .panel--tech { --seam-top:100%; --seam-bot:100%; opacity:0; }


/* ═══════════════════════════════════════════════════════════════════════
   HEADER dos mundos
   ═══════════════════════════════════════════════════════════════════════ */
.world-nav { position:fixed; top:0; left:0; right:0; z-index:40; display:none; align-items:center; justify-content:space-between; padding:.8rem clamp(1.25rem,4vw,3rem); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom:1px solid var(--border); }
.world-nav.is-visible { display:flex; }
.world-nav__brand { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:9px; padding:5px 9px; cursor:pointer; display:inline-flex; align-items:center; transition: transform .2s var(--ease), box-shadow .25s; }
.world-nav__brand:hover { transform:translateY(-1px); box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
.world-nav__logo-img { height:24px; width:auto; display:block; }
.world-nav__logo-text { display:none; font-family:'Satoshi',sans-serif; font-weight:600; font-size:1.05rem; color: var(--graphite); }
.world-nav__logo-text b { color: var(--purple); font-weight:900; }
.world-nav__switch { display:flex; align-items:center; gap:.7rem; }
.world-nav__here { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--faint); }
.world-nav__toggle { display:inline-flex; align-items:center; gap:.5rem; background: var(--surface); border:1px solid var(--line); border-radius:100px; padding:.48rem .9rem; color: var(--text); cursor:pointer; font-family:'Space Grotesk',sans-serif; transition: border-color .25s, transform .2s var(--ease); }
.world-nav__toggle:hover { border-color: var(--purple); transform:translateY(-1px); }
.world-nav__toggle-label { font-size:.7rem; color: var(--muted); }
.world-nav__toggle-target { font-family:'Satoshi',sans-serif; font-weight:600; font-size:.82rem; }
.world-nav__toggle svg { width:16px; height:16px; color: var(--purple); }


/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFIA
   ═══════════════════════════════════════════════════════════════════════ */
.eyebrow { display:inline-block; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color: var(--accent); font-weight:600; margin:0 0 1.1rem; }
.section__eyebrow { display:inline-block; font-family:'Satoshi',sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin-bottom:.7rem; }
.section__head { max-width:56ch; margin-bottom:2.4rem; }
.section__title { font-weight:700; font-size: clamp(1.55rem,3vw,2.25rem); margin-bottom:.7rem; }
.section__lead { color: var(--muted); font-size: clamp(1rem,1.5vw,1.12rem); }


/* ═══════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════ */
.hero { position:relative; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:7rem 0 5rem; overflow:hidden; }
.hero__aura { position:absolute; z-index:0; width:72vmax; aspect-ratio:1; border-radius:50%; top:-28%; left:-8%; filter:blur(90px); opacity: var(--aura); background: radial-gradient(circle, var(--purple), transparent 62%); animation: floaty 18s ease-in-out infinite alternate; }
@keyframes floaty { to { transform: translate(10%,8%) scale(1.12); } }
.hero__grid { position:absolute; inset:0; z-index:0; opacity:.6; background-image: linear-gradient(var(--dot) 1px, transparent 1px), linear-gradient(90deg, var(--dot) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image: radial-gradient(78% 60% at 50% 32%, #000, transparent 76%); mask-image: radial-gradient(78% 60% at 50% 32%, #000, transparent 76%); }
.hero .wrap { position:relative; z-index:1; }
.hero__title { font-weight:900; font-size: clamp(2.3rem,5.4vw,4rem); margin-bottom:1.2rem; max-width:18ch; }
.hero__lead { color: var(--muted); font-size: clamp(1.02rem,1.7vw,1.2rem); max-width:48ch; margin-bottom:2rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__scroll { position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:1; width:25px; height:40px; border:2px solid var(--line); border-radius:100px; display:flex; justify-content:center; padding-top:7px; }
.hero__scroll span { width:4px; height:8px; border-radius:4px; background: var(--accent); animation: scrollDot 1.7s ease-in-out infinite; }
@keyframes scrollDot { 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(11px);opacity:0} 100%{opacity:0} }


/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.5rem; font-family:'Satoshi',sans-serif; font-weight:600; font-size:.96rem; padding:.82rem 1.55rem; border-radius:100px; cursor:pointer; border:1.5px solid transparent; transition: transform .2s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: linear-gradient(135deg, var(--purple), var(--purple-deep)); color:#fff; box-shadow:0 12px 30px -12px rgba(158,35,178,.6); }
.btn--solid:hover { box-shadow:0 18px 40px -12px rgba(158,35,178,.72); }
.btn--solid::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); }
.btn--solid:hover::after { animation: sheen .85s ease; }
@keyframes sheen { from{left:-60%} to{left:130%} }
.btn--ghost { background:transparent; border-color: var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--purple); background: var(--accent-soft); }
.btn--lg { padding:.98rem 2rem; font-size:1.02rem; }


/* ═══════════════════════════════════════════════════════════════════════
   SECTIONS — diferenciação rítmica + transições fluidas
   ═══════════════════════════════════════════════════════════════════════ */
.section { padding: clamp(4rem,8vw,7rem) 0; position:relative; }
.section > .wrap { position:relative; z-index:1; }
.section--soft { background: var(--surface); }
.section--spot::after { content:""; position:absolute; z-index:0; width:46vmax; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, var(--purple), transparent 64%); filter:blur(100px); opacity: calc(var(--aura) * .8); pointer-events:none; }
.section--spot.spot-br::after { right:-14%; bottom:-18%; }
.section--spot.spot-tr::after { right:-12%; top:-16%; }
.section--pattern::before { content:""; position:absolute; inset:0; z-index:0; opacity:.9; pointer-events:none; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size:24px 24px; -webkit-mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent 78%); mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent 78%); }

.section--soft, .section--band { position:relative; }
.section--soft::before, .section--soft::after, .section--band::before, .section--band::after { content:""; position:absolute; left:0; right:0; height:80px; z-index:0; pointer-events:none; }
.section--soft::before { top:0; background: linear-gradient(var(--bg), transparent); }
.section--soft::after { bottom:0; background: linear-gradient(transparent, var(--bg)); }
.section--band { padding: clamp(4.5rem,9vw,7.5rem) 0; }
.section--band::before { top:0; background: linear-gradient(var(--bg), transparent); }
.section--band::after { bottom:0; background: linear-gradient(transparent, var(--bg)); }
body.world-mkt .section--band { background: radial-gradient(120% 120% at 50% 0%, #2A0E30 0%, #1A1A1A 55%); --text: var(--ice); --muted: var(--gray); --faint: rgba(212,212,212,.5); color: var(--ice); }
body.world-tech .section--band { background: radial-gradient(120% 120% at 50% 0%, #2A0E30 0%, #1A1A1A 60%); }

/* ── Reels ──────────────────────────────────────────────────────────────── */
.reel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.reel { position:relative; aspect-ratio:9/16; border-radius:16px; overflow:hidden; border:1px solid var(--border); background: var(--surface); cursor:pointer; padding:0; transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; }
.reel:hover { transform:translateY(-6px); border-color: var(--purple); box-shadow: var(--shadow); }
.reel__media { position:absolute; inset:0; background: linear-gradient(160deg,#2a0e30,#1c1320 55%,#141016); }
.reel__media::after { content:""; position:absolute; inset:0; opacity:.55; background: radial-gradient(60% 50% at 50% 36%, rgba(158,35,178,.34), transparent 70%); }
.reel__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center; color:#fff; transition: transform .3s var(--ease), background .3s; }
.reel__play svg { width:21px; height:21px; margin-left:2px; }
.reel:hover .reel__play { transform:translate(-50%,-50%) scale(1.14); background: var(--purple); border-color:transparent; }
.reel__tag { position:absolute; top:.65rem; left:.65rem; z-index:2; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; padding:.24rem .58rem; border-radius:100px; background: rgba(0,0,0,.5); backdrop-filter:blur(4px); color:#fff; }

.placeholder-note { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin-top:1.5rem; font-size:.84rem; color: var(--faint); }
.placeholder-note svg { width:16px; height:16px; flex-shrink:0; color: var(--accent); }
.placeholder-note code { font-family:'Space Grotesk',monospace; font-size:.8rem; background: var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:.08rem .4rem; color: var(--muted); }

/* ── Landing pages & sites ──────────────────────────────────────────────── */
.sites-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.site { display:flex; flex-direction:column; gap:.8rem; }
.site__frame { position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow); transition: transform .35s var(--ease), border-color .3s; }
.site:hover .site__frame { transform:translateY(-6px) scale(1.01); border-color: var(--purple); }
.site__bar { display:flex; gap:6px; padding:.55rem .7rem; background: var(--surface-2); border-bottom:1px solid var(--border); }
.site__bar i { width:9px; height:9px; border-radius:50%; background: var(--line); }
.site__shot { display:block; height:calc(100% - 30px); }
.site__shot.s1 { background: linear-gradient(135deg,#9E23B2 0%,#7A1A8A 60%,#4a1054 100%); }
.site__shot.s2 { background: linear-gradient(135deg,#2A0E30,#1A1A1A 70%); }
.site__shot.s3 { background: linear-gradient(135deg,#F2E6F4,#FFFFFF 60%); position:relative; }
.site__shot.s3::after { content:""; position:absolute; left:12%; top:22%; width:46%; height:14%; border-radius:6px; background:#9E23B2; box-shadow:0 30px 0 -2px rgba(158,35,178,.25), 0 56px 0 -6px rgba(26,26,26,.12); }
.site__label { display:inline-flex; align-items:center; gap:.45rem; font-family:'Satoshi',sans-serif; font-weight:600; font-size:.92rem; color: var(--text); transition: gap .25s var(--ease), color .25s; }
.site__label svg { width:15px; height:15px; color: var(--accent); }
.site:hover .site__label { gap:.7rem; color: var(--accent); }

/* ── Frase de impacto ───────────────────────────────────────────────────── */
.statement { font-family:'Satoshi',sans-serif; font-weight:700; line-height:1.32; font-size: clamp(1.35rem,3.2vw,2.05rem); max-width:24ch; margin:0 0 2.6rem; letter-spacing:-.01em; }
.statement em { color: var(--accent); }

/* ── Features ───────────────────────────────────────────────────────────── */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.cards-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.feature { background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:1.7rem 1.5rem; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.feature:hover { transform:translateY(-5px); border-color: var(--purple); box-shadow: var(--shadow); }
.feature__icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; margin-bottom:1rem; background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--purple) 28%, transparent); }
.feature__icon svg { width:23px; height:23px; color: var(--accent); }
.feature h3 { font-size:1.12rem; font-weight:600; margin-bottom:.45rem; }
.feature p { color: var(--muted); font-size:.94rem; margin:0; }

/* ── Sinergia ───────────────────────────────────────────────────────────── */
.synergy { text-align:center; }
.synergy__formula { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem .9rem; font-family:'Satoshi',sans-serif; font-weight:900; font-size: clamp(1.6rem,5vw,3.4rem); margin-bottom:1.2rem; }
.synergy__op { color: var(--gray); font-weight:600; opacity:.85; }
.synergy__term { color: var(--text); }
.synergy__result { color: var(--accent); }
.synergy__text { color: var(--muted); font-size: clamp(1.02rem,1.8vw,1.22rem); max-width:46ch; margin:0 auto; }

/* ── Aplicativos Creato — CARROSSEL ─────────────────────────────────────── */
.carousel { position:relative; }
.carousel__track { display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:1rem .25rem 1.5rem; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.carousel__track::-webkit-scrollbar { display:none; }
.carousel .app { scroll-snap-align:center; flex:0 0 min(86vw, 360px); }
.app { display:flex; flex-direction:column; gap:.9rem; background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:1.7rem 1.6rem; transition: transform .5s var(--ease), opacity .5s var(--ease), border-color .3s, box-shadow .3s; }
.carousel .app:not(.is-active) { opacity:.62; transform: scale(.94); }
.carousel .app.is-active { opacity:1; transform: translateY(-6px) scale(1.02); border-color: var(--purple); box-shadow: var(--shadow); }
.app__icon { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; flex-shrink:0; background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--purple) 28%, transparent); animation: iconBob 4s ease-in-out infinite; }
@keyframes iconBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.app__icon svg { width:26px; height:26px; color: var(--accent); overflow:visible; }
.app__icon svg * { transform-box: fill-box; transform-origin: center; }
.app__body { display:flex; flex-direction:column; }
.app__badge { align-self:flex-start; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:.24rem .6rem; border-radius:100px; margin-bottom:.6rem; color: var(--accent); background: var(--accent-soft); border:1px solid color-mix(in srgb, var(--purple) 26%, transparent); }
.app h3 { font-size:1.14rem; font-weight:600; margin-bottom:.4rem; }
.app p { color: var(--muted); font-size:.93rem; margin:0; }
.app__cta { display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-family:'Satoshi',sans-serif; font-weight:600; font-size:.88rem; color: var(--accent); transition: gap .25s var(--ease); }
.app__cta svg { width:15px; height:15px; }
.app__cta:hover { gap:.65rem; }

/* ícones animados por sistema */
.ic-pulse { animation: icPulse 2.2s ease-in-out infinite; }
@keyframes icPulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.82)} }
.ic-col2 { animation: icShift 2.6s ease-in-out infinite; }
@keyframes icShift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.ic-d1 { animation: icType 1.4s ease-in-out infinite; }
.ic-d2 { animation: icType 1.4s ease-in-out .2s infinite; }
.ic-d3 { animation: icType 1.4s ease-in-out .4s infinite; }
@keyframes icType { 0%,100%{opacity:.3; transform:translateY(0)} 50%{opacity:1; transform:translateY(-1.5px)} }
.ic-draw { transform-origin:left center; animation: icDraw 2.4s ease-in-out infinite; }
@keyframes icDraw { 0%,100%{transform:scaleX(.25)} 50%{transform:scaleX(1)} }
.ic-line { stroke-dasharray:22; stroke-dashoffset:22; animation: icLine 3s ease-in-out infinite; }
@keyframes icLine { 0%{stroke-dashoffset:22} 45%,100%{stroke-dashoffset:0} }
.ic-dot { animation: icDotBob 1.6s ease-in-out infinite; }
@keyframes icDotBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* controles do carrossel */
.carousel__controls { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:.4rem; }
.carousel__btn { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background: var(--surface); color: var(--text); cursor:pointer; display:grid; place-items:center; transition: border-color .25s, transform .2s var(--ease), background .25s; }
.carousel__btn:hover { border-color: var(--purple); transform:translateY(-2px); background: var(--surface-2); }
.carousel__btn svg { width:20px; height:20px; }
.carousel__dots { display:flex; gap:.5rem; }
.carousel__dot { width:8px; height:8px; border-radius:50%; background: var(--line); border:0; cursor:pointer; padding:0; transition: background .25s, transform .25s; }
.carousel__dot.is-active { background: var(--purple); transform:scale(1.35); }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.steps li { display:flex; flex-direction:column; gap:.8rem; padding:1.5rem; background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius:16px; transition: border-color .3s, transform .3s var(--ease); }
.steps li:hover { border-color: var(--purple); transform:translateY(-4px); }
.steps__n { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Satoshi',sans-serif; font-weight:700; color:#fff; background: linear-gradient(135deg, var(--purple), var(--purple-deep)); }
.steps h4 { font-size:1.05rem; margin-bottom:.25rem; }
.steps p { color: var(--muted); font-size:.9rem; margin:0; }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.cta { padding: clamp(4.5rem,10vw,8rem) 0; text-align:center; position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; inset:0; z-index:0; opacity: var(--aura); background: radial-gradient(50% 60% at 50% 50%, var(--purple), transparent 70%); filter:blur(60px); }
.cta .wrap { position:relative; z-index:1; }
.cta__title { font-size: clamp(1.9rem,4.5vw,3rem); font-weight:900; margin-bottom:.9rem; }
.cta__text { color: var(--muted); font-size: clamp(1.02rem,1.8vw,1.2rem); max-width:42ch; margin:0 auto 2rem; }
.cta__actions { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

.foot { padding:2.4rem 0; border-top:1px solid var(--border); color: var(--faint); font-size:.84rem; }
.foot__inner { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.foot__brand { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:8px; padding:4px 8px; display:inline-flex; }
.foot__logo { height:18px; width:auto; display:block; }


/* ═══════════════════════════════════════════════════════════════════════
   Reveal + stagger
   ═══════════════════════════════════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in { opacity:1; transform:none; }
.cards-3.reveal, .cards-4.reveal, .reel-grid.reveal, .steps.reveal, .sites-grid.reveal { opacity:1; transform:none; }
.cards-3.reveal > *, .cards-4.reveal > *, .reel-grid.reveal > *, .steps.reveal > *, .sites-grid.reveal > * { opacity:0; transform:translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i,0) * 70ms); }
.cards-3.reveal.is-in > *, .cards-4.reveal.is-in > *, .reel-grid.reveal.is-in > *, .steps.reveal.is-in > *, .sites-grid.reveal.is-in > * { opacity:1; transform:none; }


/* ═══════════════════════════════════════════════════════════════════════
   Modal
   ═══════════════════════════════════════════════════════════════════════ */
.vmodal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.vmodal.is-open { display:flex; }
.vmodal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.78); backdrop-filter: blur(4px); }
.vmodal__box { position:relative; z-index:1; max-width:440px; width:100%; color: var(--ice); background:#222225; border:1px solid rgba(212,212,212,.14); border-radius:18px; padding:2.2rem; text-align:center; animation: modalUp .25s var(--ease-out); }
@keyframes modalUp { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
.vmodal__icon { width:54px; height:54px; border-radius:14px; margin:0 auto 1.1rem; display:flex; align-items:center; justify-content:center; background: rgba(158,35,178,.18); }
.vmodal__icon svg { width:27px; height:27px; color: var(--purple); }
.vmodal__box h3 { font-size:1.35rem; margin-bottom:.6rem; }
.vmodal__box p { color: var(--gray); font-size:.94rem; margin:0; }
.vmodal__box code { font-family:'Space Grotesk',monospace; background:#1A1A1A; border:1px solid rgba(212,212,212,.14); border-radius:5px; padding:.08rem .4rem; font-size:.84rem; color: var(--ice); }
.vmodal__close { position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%; background:#1A1A1A; border:1px solid rgba(212,212,212,.14); color: var(--gray); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vmodal__close:hover { color: var(--ice); border-color: var(--purple); }


/* ═══════════════════════════════════════════════════════════════════════
   Responsivo
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:980px) {
  .cards-4, .steps { grid-template-columns:repeat(2,1fr); }
  .reel-grid { grid-template-columns:repeat(2,1fr); }
  .sites-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:780px) {
  .panel { align-items:center; justify-content:center; padding:0; }
  .panel--mkt .panel__inner { align-items:center; text-align:center; margin-top:-26vh; }
  .panel--tech { z-index:2; --seam-l:54%; --seam-r:46%; clip-path: polygon(0 var(--seam-l), 100% var(--seam-r), 100% 100%, 0 100%); filter: drop-shadow(0 -1px 0 rgba(158,35,178,.7)) drop-shadow(0 -8px 26px rgba(158,35,178,.4)); }
  .panel--tech .panel__inner { align-items:center; text-align:center; margin-bottom:-24vh; }
  .panel__glow { width:120%; }
  .cards-3 { grid-template-columns:1fr; }
  .section__head { margin-bottom:1.9rem; }
  body.is-leaving.choose-mkt .panel--tech { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); opacity:0; }
  body.is-leaving.choose-tech .panel--tech { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
}
@media (max-width:480px) {
  body { font-size:16px; }
  .cards-4, .steps, .sites-grid { grid-template-columns:1fr; }
  .reel-grid { grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .world-nav__here { display:none; }
  .hero { padding:6rem 0 4rem; }
  .entry__logo-img { height:34px; }
  .entry__logo-text { font-size:1.3rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Acessibilidade
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal, .cards-3.reveal > *, .cards-4.reveal > *, .reel-grid.reveal > *, .steps.reveal > *, .sites-grid.reveal > * { opacity:1 !important; transform:none !important; }
}
:focus-visible { outline:2px solid var(--purple); outline-offset:3px; border-radius:6px; }