/* ───────── João Andrade · identidade THUNBS ───────── */
:root {
  --ink: #1b2150; --dim: #59608f; --faint: #8a90b8;
  --glass: rgba(255,255,255,.36); --glass2: rgba(255,255,255,.58); --edge: rgba(255,255,255,.75);
  --iri: linear-gradient(100deg, #7fb2ff, #b9a4ff 35%, #ffb3e6 65%, #9fe7ff);
  --chrome: linear-gradient(180deg, #ffffff 0%, #d4ddff 42%, #6b79d0 52%, #c9d2ff 70%, #f2f4ff 100%);
  --ia: #c04fd8; --ads: #5b6cff; --vsl: #2f9a5a; --reels: #1aa38f; --frag: #e2456c; --vlog: #e08a1e; --sites: #7a5af8; --design: #2f86e0;
  --shadow: 0 24px 50px rgba(30,40,110,.22);
  --surface: #fff; --surface-soft: rgba(255,255,255,.62); --surface-hud: rgba(255,255,255,.86); --fade: rgba(245,240,255,.93);
  --cta-bg: #1b2150; --cta-fg: #fff; --badge-ink: #1b2150;
  --ease: cubic-bezier(.2,.9,.2,1);
  --disp: "Unbounded", system-ui, sans-serif;
  --ui: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@view-transition { navigation: auto; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); font: 15px/1.45 var(--ui); -webkit-font-smoothing: antialiased; }
body { background: #b4c8ea; overflow-x: hidden; animation: pageIn .6s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(27,33,80,.35); border-radius: 8px; }
::selection { background: #b9a4ff; color: var(--ink); }

.sky { position: fixed; inset: -60px; z-index: -2; background: url(../assets/dream.jpg) center 15% / cover; filter: blur(var(--skyblur, 30px)) saturate(1.1); transform: scale(1.08); }
.veil { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.25) 70%, rgba(255,240,250,.45)); }
.star { position: absolute; width: 22px; height: 22px; background: var(--surface); pointer-events: none;
  clip-path: polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); filter: drop-shadow(0 0 8px #fff); animation: tw 3.2s ease-in-out infinite; }
.star.fx { position: fixed; }
@keyframes tw { 50% { transform: scale(.55) rotate(25deg); opacity: .55; } }

/* ───────── modo noturno ───────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef0ff; --dim: #aab1e2; --faint: #7d85bd;
  --glass: rgba(16,20,54,.5); --glass2: rgba(32,38,90,.62); --edge: rgba(160,170,255,.2);
  --surface: #262d68; --surface-soft: rgba(40,47,108,.62); --surface-hud: rgba(12,15,40,.78); --fade: rgba(12,14,38,.94);
  --shadow: 0 24px 50px rgba(0,0,12,.55);
  --cta-bg: #f1f2ff; --cta-fg: #1b2150;
  --ia: #e07af5; --ads: #8b97ff; --vsl: #4fd08a; --reels: #3fd6be; --frag: #ff6f93; --vlog: #ffb14d; --sites: #a48cff; --design: #6fb2ff;
}
:root[data-theme="dark"] body { background: #070a1e; }
:root[data-theme="dark"] .sky { filter: blur(var(--skyblur, 30px)) brightness(.3) saturate(1.5) hue-rotate(12deg); }
:root[data-theme="dark"] .veil { background:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 62%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 44% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 41%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 71% 23%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 83% 71%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 91% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 84%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 36% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 65% 92%, #fff 50%, transparent 51%),
  radial-gradient(ellipse at 70% 0%, rgba(120,90,255,.25), transparent 60%),
  linear-gradient(180deg, rgba(6,8,28,.2), rgba(10,8,40,.55)); }
:root[data-theme="dark"] .chrome, :root[data-theme="dark"] .chrome.slam span { filter: drop-shadow(0 2px 0 #3a4494) drop-shadow(0 0 22px rgba(150,140,255,.45)); }
:root[data-theme="dark"] .nav .logo { filter: drop-shadow(0 0 14px rgba(150,160,255,.55)); }
:root[data-theme="dark"] ::selection { background: #6b5cff; color: #fff; }

/* botão de tema */
.theme { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(14px); font-size: 17px; flex: none; transition: transform .5s var(--ease); }
.theme:hover { transform: rotate(-25deg) scale(1.08); }
.theme .sun, :root[data-theme="dark"] .theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: inline; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* nav */
.nav { position: relative; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 16px 40px; }
.nav .logo { height: 40px; filter: drop-shadow(0 4px 10px rgba(40,50,120,.25)); transition: transform .3s var(--ease); }
.nav .brand:hover .logo { transform: rotate(-4deg) scale(1.06); }
.nav .brand { display: flex; align-items: center; gap: 14px; }
.nav .who { font-size: 12.5px; color: var(--dim); line-height: 1.2; padding-left: 14px; border-left: 1px solid rgba(27,33,80,.18); }
.nav .who b { display: block; color: var(--ink); font-size: 14px; }
.pill { margin-left: auto; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(14px); box-shadow: 0 6px 20px rgba(30,40,110,.1); }
.pill a { padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--dim); transition: color .2s; }
.pill a:hover { color: var(--ink); }
.pill a.on { background: var(--surface); color: var(--ink); box-shadow: 0 4px 12px rgba(40,50,120,.15); }
.cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 19px; border-radius: 999px; background: var(--cta-bg); color: var(--cta-fg); font-weight: 600; font-size: 13.5px; box-shadow: 0 8px 20px rgba(27,33,80,.3); transition: transform .25s var(--ease), box-shadow .25s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27,33,80,.38); }
.ghost { display: inline-flex; align-items: center; gap: 8px; padding: 11px 19px; border-radius: 999px; background: var(--glass2); border: 1px solid var(--edge); font-weight: 600; font-size: 13.5px; backdrop-filter: blur(10px); transition: background .2s; }
.ghost:hover { background: var(--surface); }

/* utilitários */
.glass { background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 26px; box-shadow: var(--shadow); }
.chrome { font-family: var(--disp); font-weight: 900; letter-spacing: -.035em; line-height: .95;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a4494) drop-shadow(0 10px 18px rgba(30,40,110,.35)); }
.solid { font-family: var(--disp); font-weight: 900; letter-spacing: -.03em; color: var(--ink); }
.eyebrow { font: 600 11px var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--iri); color: var(--badge-ink); font: 800 10.5px var(--disp); letter-spacing: .05em; }
/* controle de volume */
.vol { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--surface-hud); backdrop-filter: blur(8px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.vol button { padding: 3px 6px; font: 700 11px var(--disp); color: var(--ink); white-space: nowrap; }
.vol input { -webkit-appearance: none; appearance: none; width: 0; height: 4px; border-radius: 4px; opacity: 0; transition: width .3s var(--ease), opacity .3s; cursor: pointer;
  background: linear-gradient(90deg, var(--c, #7a5af8) var(--p, 50%), var(--edge) var(--p, 50%)); }
.vol.on input, .vol:hover input, .vol:focus-within input { width: 84px; opacity: 1; }
.vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c, #7a5af8); }
.vol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c, #7a5af8); }
@media (hover: none) { .vol input { width: 70px; opacity: 1; } }
.wrap { padding: 0 40px; max-width: 1440px; margin: 0 auto; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; opacity: 0; transition: all .3s var(--ease); z-index: 50; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
footer.foot { padding: 30px 40px 40px; display: flex; gap: 20px; align-items: center; color: var(--dim); font-size: 13px; }
footer.foot .sp { flex: 1; }

/* entrada com impacto */
.slam span { display: inline-block; opacity: 0; transform: translateY(.35em) scale(1.25); filter: blur(12px); animation: slam .7s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
@keyframes slam { to { opacity: 1; transform: none; filter: none; } }
.chrome { padding-top: .16em; padding-bottom: .06em; }
.chrome.slam { background: none; filter: none; color: inherit; padding-top: 0; }
.chrome.slam span { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .2em .02em .06em;
  animation-name: slamC; }
@keyframes slamC { to { opacity: 1; transform: none; filter: drop-shadow(0 2px 0 #3a4494) drop-shadow(0 10px 18px rgba(30,40,110,.35)); } }
.rise { opacity: 0; transform: translateY(18px); animation: rise .8s var(--ease) forwards; animation-delay: var(--d, .3s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.flash { position: fixed; inset: 0; background: var(--surface); z-index: 100; pointer-events: none; animation: flash .55s ease-out forwards; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; visibility: hidden; } }

@media (max-width: 860px) {
  .nav { padding: 14px 16px; flex-wrap: wrap; }
  .nav .who { display: none; }
  .nav .cta { display: none; }
  .pill a { padding: 7px 12px; }
  .wrap { padding: 0 16px; }
  footer.foot { padding: 24px 16px 32px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}