/* Original style.css */
@font-face {
  font-family: "Jawn Oficial Site";
  src: url("assets/fonts/Jawn_fonteOficial-Regular.ttf?v=official-fix-2") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ─── Variables ─── */
:root {
  --bg: #000;
  --text: #fff;
  --muted: #d8d8d8;
  --muted-soft: rgba(255, 255, 255, .62);
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .32);
  --panel: rgba(0, 0, 0, .50);
  --shadow: 0 24px 90px rgba(0, 0, 0, .58);
  --radius: 28px;
  --container: 1180px;
  --font-jawn: "Jawn Oficial Site", "Bebas Neue", "Space Grotesk", Inter, sans-serif;
  --accent: #1487ff;
  --accent-dim: #0a5fcc;
  --accent-glow: rgba(20, 135, 255, .38);
  --accent-soft: rgba(20, 135, 255, .14);
  --neon-blue: #1487ff;
  --neon-cyan: #8bdcff;
  --gold: #f5a623;
  --gold-dim: rgba(245, 166, 35, .22);
  --page-gutter: clamp(14px, 4vw, 32px);
  --section-gap: clamp(54px, 8vw, 86px);
  --touch-target: 44px;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  min-width: 320px;
  scroll-padding-top: clamp(82px, 11vw, 118px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
  background: #000;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
  -webkit-tap-highlight-color: rgba(139, 220, 255, .18);
}


@supports (height: 100svh) {
  body { min-height: 100svh; }
}

body.cursor-ready,
body.cursor-ready a,
body.cursor-ready button { cursor: none; }

a { color: inherit; text-decoration: none; }
img, video, svg { display: block; }
img, video { max-width: 100%; }
img { height: auto; }
button { border: 0; font: inherit; color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid rgba(139, 220, 255, .92);
  outline-offset: 4px;
}

h1, h2, h3, p, li, a, strong, small, span { overflow-wrap: break-word; }

/* ─── Fixed Layers ─── */
.bg-video-stack, .bg-video, .noise, .vignette, .scanlines, .light-follow, .corner-blur,
.cursor-dot, .cursor-ring, .cursor-trail {
  position: fixed;
  pointer-events: none;
}

.bg-video-stack, .bg-video, .noise, .vignette, .scanlines, .light-follow { inset: 0; }

.bg-video-stack {
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.bg-video {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #000;
  filter: saturate(.82) contrast(1.12) brightness(.88);
  transform: translateZ(0) scale(1.015);
  backface-visibility: hidden;
  will-change: opacity, transform;
  opacity: 0;
  transition: opacity 1.15s ease-in-out, transform 7s ease-out;
}

.bg-video.is-visible {
  opacity: 1;
  transform: translateZ(0) scale(1.03);
}

.bg-video.is-static {
  opacity: 1;
}

.noise {
  z-index: 1;
  opacity: .055;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.scanlines {
  z-index: 2;
  opacity: .028;
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(180deg, transparent, transparent 2px, rgba(0,0,0,.7) 2px, rgba(0,0,0,.7) 4px);
}

.vignette {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(0,0,0,.60), rgba(0,0,0,.14) 46%, rgba(0,0,0,.52)),
    linear-gradient(180deg, rgba(0,0,0,.44), transparent 34%, rgba(0,0,0,.78)),
    radial-gradient(circle at center, transparent 44%, rgba(0,0,0,.50) 100%);
}

.corner-blur {
  z-index: 3;
  width: min(34vw, 360px);
  height: min(34vw, 360px);
  border-radius: 50%;
  opacity: .54;
  background: radial-gradient(circle, rgba(0,0,0,.18), transparent 68%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateZ(0);
  mask-image: radial-gradient(circle, #000 0 48%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle, #000 0 48%, transparent 76%);
}

.corner-blur-tl { top: -8vw; left: -8vw; }
.corner-blur-tr { top: -8vw; right: -8vw; }
.corner-blur-bl { bottom: -8vw; left: -8vw; }
.corner-blur-br { right: -8vw; bottom: -8vw; }

.light-follow {
  z-index: 4;
  opacity: .32;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(142,220,255,.07) 0 2.1rem, rgba(20,135,255,.038) 5.4rem, transparent 10.2rem);
  transition: background .08s linear;
}

/* ─── Cursor ─── */
.cursor-dot, .cursor-ring, .cursor-trail {
  top: 0; left: 0;
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.cursor-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--neon-cyan) 42%, var(--neon-blue) 100%);
  box-shadow: 0 0 7px rgba(139,220,255,.52), 0 0 13px rgba(20,135,255,.24);
}

.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(139, 220, 255, .72);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(20,135,255,.13), rgba(0,0,0,.04) 58%, transparent 70%);
  box-shadow: inset 0 0 14px rgba(139,220,255,.16), 0 0 13px rgba(20,135,255,.34), 0 0 32px rgba(20,135,255,.13);
  transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.cursor-ring::before, .cursor-ring::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.cursor-ring::before {
  inset: 7px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: inherit;
}

.cursor-ring::after {
  top: 50%; left: 50%;
  width: 18px; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.86), transparent);
  box-shadow: 0 0 12px rgba(139,220,255,.78);
  transform: translate(-50%, -50%) rotate(var(--cursor-angle, -18deg));
}

.cursor-trail {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: rgba(139, 220, 255, .82);
  box-shadow: 0 0 12px rgba(20,135,255,.58);
  mix-blend-mode: screen;
}

body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring { opacity: 1; }

body.cursor-ready .cursor-trail { opacity: var(--trail-opacity, .18); }

body.cursor-hidden .cursor-dot,
body.cursor-hidden .cursor-ring,
body.cursor-hidden .cursor-trail { opacity: 0; }

body.cursor-hover .cursor-dot { width: 10px; height: 10px; }

body.cursor-hover .cursor-ring {
  width: 58px; height: 58px;
  border-color: rgba(255,255,255,.88);
  background: radial-gradient(circle, rgba(139,220,255,.18), rgba(20,135,255,.08) 56%, transparent 72%);
  box-shadow: inset 0 0 13px rgba(255,255,255,.12), 0 0 11px rgba(139,220,255,.30), 0 0 26px rgba(20,135,255,.11);
}

body.cursor-hover .cursor-ring::after { width: 28px; }

body.is-video-dragging .cursor-ring {
  width: 30px; height: 30px;
  border-color: rgba(139,220,255,.58);
  background: rgba(20,135,255,.06);
}

body.is-video-dragging .light-follow { opacity: .18; }
body.is-video-dragging .cursor-trail { opacity: .04 !important; }

/* ─── Topbar ─── */
.topbar {
  position: fixed;
  top: 22px; left: 50%;
  z-index: 50;
  width: min(560px, calc(100% - 32px));
  min-height: 60px; height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
  overflow: hidden;
}

/* Glass inner highlight — shared by topbar, glass-panel, profile-card, video-card */
.topbar::before, .glass-panel::before, .profile-card::before, .video-card a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 32%, rgba(255,255,255,.08) 70%, transparent);
  opacity: .45;
}

/* Topbar animation override */
.topbar[data-animate] { transform: translate3d(-50%, 22px, 0); }
.topbar[data-animate].is-visible { transform: translate3d(-50%, 0, 0); }

.live-badge {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px;
  border: 1px solid rgba(20,135,255,.40);
  border-radius: 999px;
  background: rgba(20,135,255,.12);
  color: #fff;
  font-size: .68rem; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}

.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--neon-blue);
  box-shadow: 0 0 8px var(--neon-blue);
  animation: livePulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--neon-blue); }
  50%       { opacity: .5; box-shadow: 0 0 14px var(--neon-blue); }
}

.nav-links {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  gap: clamp(20px, 5vw, 56px);
  width: 100%;
  justify-content: center;
}

.nav-links a {
  padding: 12px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #e9e9e9;
  font-family: var(--font-jawn);
  font-size: 1.08rem; font-weight: 400;
  letter-spacing: .025em; line-height: 1;
  text-shadow: 0 1px 10px rgba(0,0,0,.32), 0 0 1px currentColor;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  min-height: var(--touch-target);
  display: grid; place-items: center;
}

.nav-links a:hover, .nav-links a:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* ─── Shell ─── */
.site-shell, .footer {
  position: relative;
  z-index: 10;
  width: min(var(--container), calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
}

.site-shell {
  padding-top: clamp(92px, 12dvh, 116px);
  padding-bottom: clamp(40px, 7vw, 64px);
}

/* ─── Hero grid ─── */
.hero-grid {
  position: relative;
  min-height: calc(100dvh - 150px);
  display: grid;
  grid-template-columns: minmax(220px, clamp(245px, 28vw, 420px)) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 88px);
  align-items: center;
  justify-content: center;
  padding: 18px 0 clamp(76px, 10vw, 104px);
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding-top: clamp(20px, 6vw, 64px);
  min-width: 0;
  width: 100%;
}

/* ─── Shared float animation (used by profile card, title, description, links section) ─── */
@keyframes jawnFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.25deg); }
  50%       { transform: translate3d(0, -10px, 0) rotate(.35deg); }
}

@keyframes jawnFloatAlt {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(.18deg); }
  50%       { transform: translate3d(0, -10px, 0) rotate(-.28deg); }
}

/* ─── Profile card ─── */
.profile-card {
  position: relative;
  width: clamp(210px, 22vw, 255px);
  padding: 9px;
  overflow: visible;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(0,0,0,.36));
  box-shadow: 0 18px 68px rgba(0,0,0,.50);
  backdrop-filter: blur(14px);
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform, filter;
}

.profile-card[data-animate].is-visible {
  animation: jawnFloat 6.2s ease-in-out infinite;
}

.profile-card::before { z-index: 3; }

.profile-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px;
  border-radius: 34px;
  opacity: .42;
  filter: blur(12px);
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(139,220,255,.24), transparent 38%),
    radial-gradient(circle at 78% 78%, rgba(20,135,255,.22), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 58%);
  animation: frameAuraFloat 6.2s ease-in-out infinite;
}

.profile-card:hover,
.profile-card:focus-within {
  border-color: rgba(139,220,255,.46);
  background: linear-gradient(145deg, rgba(139,220,255,.14), rgba(0,0,0,.42) 58%, rgba(20,135,255,.10));
  box-shadow: 0 24px 90px rgba(0,0,0,.62), 0 0 34px rgba(20,135,255,.18);
}

.profile-card:hover::after,
.profile-card:focus-within::after { opacity: .72; filter: blur(18px); transform: translateY(2px) scale(1.04); }

@keyframes frameAuraFloat {
  0%, 100% { opacity: .34; filter: blur(12px); }
  50%       { opacity: .58; filter: blur(16px); }
}

.avatar-float {
  position: relative; z-index: 2;
  border-radius: 18px;
}

.avatar-float::after {
  content: "";
  position: absolute; z-index: 4;
  inset: -5px;
  pointer-events: none;
  border: 1px solid rgba(139,220,255,.28);
  border-radius: 23px;
  opacity: .46;
  mix-blend-mode: screen;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.045),
    0 0 12px rgba(139,220,255,.14),
    0 0 26px rgba(20,135,255,.08);
  animation: framePulseRing 6.2s ease-in-out infinite;
  will-change: opacity, box-shadow;
}

.avatar-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: #050505;
  box-shadow: inset 0 0 18px rgba(139,220,255,.035), 0 14px 34px rgba(0,0,0,.30);
  transform: translateZ(14px);
  transition: transform .42s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease;
}

.avatar-frame img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.06);
  transform: scale(1.02);
  transition: transform .55s ease, filter .35s ease;
}

.avatar-frame::before {
  content: "";
  position: absolute; z-index: 3;
  inset: -35%; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 42%, rgba(139,220,255,.22) 50%, transparent 58%);
  transform: translateX(-70%) rotate(8deg);
  transition: opacity .35s ease, transform .72s ease;
}

.avatar-frame::after {
  content: "";
  position: absolute; z-index: 2;
  inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,.28)),
    radial-gradient(circle at 50% 12%, rgba(139,220,255,.12), transparent 42%);
}

.profile-card:hover .avatar-frame,
.profile-card:focus-within .avatar-frame {
  border-color: rgba(139,220,255,.58);
  box-shadow:
    inset 0 0 32px rgba(139,220,255,.10),
    0 22px 54px rgba(0,0,0,.38),
    0 0 0 1px rgba(139,220,255,.20),
    0 0 26px rgba(20,135,255,.22);
  filter: drop-shadow(0 0 10px rgba(139,220,255,.16));
}

.profile-card:hover .avatar-frame img,
.profile-card:focus-within .avatar-frame img {
  filter: saturate(1.02) contrast(1.07) brightness(1.02);
  transform: scale(1.04);
}

.profile-card:hover .avatar-frame::before,
.profile-card:focus-within .avatar-frame::before {
  opacity: 1;
  transform: translateX(70%) rotate(8deg);
}

.profile-card:hover .avatar-float::after,
.profile-card:focus-within .avatar-float::after {
  border-color: rgba(139,220,255,.50);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 0 22px rgba(139,220,255,.28),
    0 0 44px rgba(20,135,255,.18);
}

@keyframes framePulseRing {
  0%, 100% {
    opacity: .48;
    box-shadow: 0 0 0 1px rgba(255,255,255,.055), 0 0 14px rgba(139,220,255,.13), 0 0 28px rgba(20,135,255,.08);
  }
  50% {
    opacity: .72;
    box-shadow: 0 0 0 1px rgba(255,255,255,.075), 0 0 20px rgba(139,220,255,.20), 0 0 38px rgba(20,135,255,.13);
  }
}

/* ─── Hero copy ─── */
.hero-copy {
  position: relative;
  width: 100%;
  max-width: min(100%, 440px);
  text-align: center;
  isolation: isolate;
}

.hero-copy::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -18px -20px -20px;
  border-radius: 34px;
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.12) 68%, transparent);
  pointer-events: none;
}

/* Hero title — float + glitch */
.hero-title {
  position: relative;
  width: min(100%, clamp(235px, 34vw, 344px));
  margin: 0 auto;
  color: #fff;
  font-family: var(--font-jawn);
  font-weight: 400;
  font-size: clamp(4.15rem, 8.2vw, 7.9rem);
  line-height: .82;
  letter-spacing: clamp(.045em, .95vw, .12em);
  text-transform: uppercase;
  text-shadow: 0 10px 0 rgba(255,255,255,.10), 0 0 40px rgba(255,255,255,.12), 0 0 80px rgba(20,135,255,.08);
  filter: drop-shadow(0 14px 13px rgba(0,0,0,.72)) drop-shadow(0 0 14px rgba(139,220,255,.22));
  transform-origin: center;
  will-change: transform, filter;
  /* glitch runs separately, float is applied via .is-visible below */
}

.hero-copy[data-animate].is-visible .hero-title {
  animation: jawnTitleFloat 6.2s ease-in-out infinite, glitchIdle 8s ease-in-out infinite;
}

@keyframes jawnTitleFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.18deg); }
  50%       { transform: translate3d(0, -10px, 0) rotate(.28deg); }
}

@keyframes glitchIdle {
  0%, 86%, 100% { filter: drop-shadow(0 14px 13px rgba(0,0,0,.72)) drop-shadow(0 0 14px rgba(139,220,255,.22)); }
  88%  { transform: translate3d(-2px, 0, 0) skewX(-1.5deg); filter: brightness(1.12); }
  89%  { transform: translate3d(2px, 0, 0) skewX(1.5deg);  filter: brightness(1.05); }
  90%  { transform: none; filter: drop-shadow(0 14px 13px rgba(0,0,0,.72)) drop-shadow(0 0 14px rgba(139,220,255,.22)); }
  92%  { transform: translate3d(-1px, 1px, 0) skewX(.8deg); }
  93%  { transform: none; }
}

.hero-title::before {
  content: attr(data-text);
  position: absolute; inset: 0; z-index: -2;
  color: var(--neon-blue);
  opacity: .40;
  transform: translate(-3px, 1px);
  mix-blend-mode: screen;
  animation: glitchRed 8s ease-in-out infinite;
  pointer-events: none;
}

.hero-title::after {
  content: attr(data-text);
  position: absolute; inset: 0; z-index: -1;
  color: rgba(255,255,255,.10);
  transform: translate(3px, 2px);
  pointer-events: none;
}

@keyframes glitchRed {
  0%, 86%, 100% { transform: translate(-3px, 1px); opacity: .55; }
  88%  { transform: translate(-6px, -1px); opacity: .8; }
  89%  { transform: translate(1px, 2px);  opacity: .3; }
  90%  { transform: translate(-3px, 1px); opacity: .55; }
  92%  { transform: translate(-5px, 0); opacity: .7; }
  93%  { transform: translate(-3px, 1px); opacity: .55; }
}

.hero-description {
  max-width: min(100%, 41rem);
  margin: 22px auto 0;
  padding: 0 10px;
  text-align: center;
  color: #eee;
  font-size: clamp(.98rem, 1.35vw, 1.17rem);
  transform-origin: center;
}

.hero-copy[data-animate].is-visible .hero-description {
  animation: none;
}

/* ─── Scroll hint ─── */
.scroll-hint {
  position: absolute;
  left: 50%; bottom: 16px; z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-align: center;
  opacity: .9;
  transform: translateX(-50%);
  transition: opacity .2s ease, filter .2s ease;
}

.scroll-hint span {
  color: var(--muted-soft);
  font-size: .68rem; font-weight: 900;
  letter-spacing: .28em; text-transform: uppercase;
}

.scroll-hint strong {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 18px 44px rgba(0,0,0,.42), 0 0 34px rgba(0,122,255,.22);
  backdrop-filter: blur(12px);
  font-size: 1.55rem; line-height: 1;
  animation: scrollHintArrow 1.55s ease-in-out infinite;
}

.scroll-hint:hover, .scroll-hint:focus-visible {
  opacity: 1;
  filter: drop-shadow(0 0 16px rgba(255,255,255,.20));
}

.scroll-hint:focus-visible {
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 8px;
  border-radius: 999px;
}

@keyframes scrollHintArrow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(9px); }
}

/* ─── Section headings ─── */
.links-section, .videos-section { padding: 0; }

.videos-section[data-animate].is-visible {
  animation: none;
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted-soft);
  font-family: var(--font-jawn);
  font-size: 1.18rem; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase;
  text-shadow: 0 0 16px rgba(139, 220, 255, .12);
}

.section-kicker::before {
  content: "";
  display: inline-block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--neon-blue);
  flex-shrink: 0;
}

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.section-heading.compact { display: block; margin-bottom: 18px; }
.section-heading.compact h2 { display: none; }

.videos-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.videos-kicker { margin: 0; }

.drag-helper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(139,220,255,.22);
  border-radius: 999px;
  color: rgba(255,255,255,.76);
  background: linear-gradient(135deg, rgba(7,16,32,.70), rgba(0,0,0,.38));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.28), 0 0 22px rgba(20,135,255,.10);
  backdrop-filter: blur(10px);
  font-size: .72rem; font-weight: 850;
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.drag-helper span {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  color: #fff;
  background: rgba(139,220,255,.14);
  box-shadow: 0 0 16px rgba(139,220,255,.18);
  font-size: .92rem;
  animation: dragHintPulse 1.65s ease-in-out infinite;
}

@keyframes dragHintPulse {
  0%, 100% { transform: translateX(0); opacity: .82; }
  50%       { transform: translateX(4px); opacity: 1; }
}

h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4.3vw, 4rem);
  line-height: 1;
  letter-spacing: -.06em;
}

.members-header h2,
.community-card h2,
.contact-card h2 {
  font-family: var(--font-jawn);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: .9;
}

/* ─── Links section: sem flutuação contínua; mantém hover/shine/magnetic dos botões ─── */

/* ─── Social buttons ─── */
.social-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
  gap: clamp(10px, 1.8vw, 14px);
  width: 100%;
  overflow: visible;
  padding: 2px 0 10px;
}

.social-button {
  --button-bg: linear-gradient(135deg, #1f1f1f, #070707);
  position: relative;
  min-width: 0;
  height: auto;
  min-height: var(--touch-target);
  padding: 12px clamp(12px, 2vw, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.008);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 14px 28px rgba(0,0,0,.24);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.social-button::before, .social-button::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.social-button::before { z-index: -1; background: var(--button-bg); opacity: .46; }
.social-button::after { background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 52%, rgba(0,0,0,.15)); opacity: .38; }

.social-button:hover, .social-button:focus-visible {
  border-color: rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 36px rgba(0,0,0,.34);
  transform: translateY(-4px) scale(1.04);
}

.social-button:hover::before, .social-button:focus-visible::before { opacity: .64; }
.social-button:hover::after, .social-button:focus-visible::after { opacity: .9; }

.social-button .btn-shine {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none; z-index: 2;
}

.social-button:hover .btn-shine,
.social-button:focus-visible .btn-shine { transform: translateX(120%); }

.social-button:hover .social-icon,
.social-button:focus-visible .social-icon { animation: iconBounce .45s cubic-bezier(.36,.07,.19,.97); }

@keyframes iconBounce {
  0%   { transform: translateY(0) rotate(0deg); }
  30%  { transform: translateY(-5px) rotate(-8deg); }
  60%  { transform: translateY(2px) rotate(4deg); }
  80%  { transform: translateY(-2px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.social-button.kick { --button-bg: linear-gradient(135deg, #3ca91a, #16560e); }
.social-button.kick:hover, .social-button.kick:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 44px rgba(0,0,0,.42), 0 0 28px rgba(74,190,36,.50);
}
.social-button.youtube:hover, .social-button.youtube:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 44px rgba(0,0,0,.42), 0 0 28px rgba(196,27,27,.50);
}
.social-button.tiktok:hover, .social-button.tiktok:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 44px rgba(0,0,0,.42), 0 0 24px rgba(255,255,255,.12);
}
.social-button.instagram:hover, .social-button.instagram:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 44px rgba(0,0,0,.42), 0 0 28px rgba(227,60,155,.50);
}
.social-button.discord:hover, .social-button.discord:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 44px rgba(0,0,0,.42), 0 0 28px rgba(99,101,241,.60);
}

.social-button.youtube   { --button-bg: linear-gradient(135deg, #c41b1b 0%, #7d0808 100%); }
.social-button.tiktok {
  --button-bg: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
  background: rgba(0,0,0,.90);
  border-color: rgba(255,255,255,.18);
}
.social-button.instagram { --button-bg: linear-gradient(135deg, #9146d8 0%, #e33c9b 58%, #c72c80 100%); }
.social-button.discord   { --button-bg: linear-gradient(135deg, #6365f1 0%, #3540b9 100%); }

.social-icon, .social-icon svg { width: 20px; height: 20px; min-width: 20px; }

.social-icon {
  position: relative; z-index: 1;
  display: grid; place-items: center;
}

.social-icon svg { fill: currentColor; }

.social-button strong {
  position: relative; z-index: 1;
  display: block;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-jawn);
  font-size: .94rem; font-weight: 400;
  letter-spacing: .065em; line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── General buttons ─── */
.mini-link, .primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--touch-target);
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font-jawn);
  font-weight: 400;
  letter-spacing: .075em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.30), 0 0 1px currentColor;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.mini-link, .secondary-button {
  border: 1px solid var(--line);
  color: #fff;
  background: rgba(255,255,255,.07);
}

.primary-button {
  border: 1px solid rgba(20, 135, 255, .36);
  color: #fff;
  background: linear-gradient(135deg, #1a6fff 0%, #0d4bcc 55%, #071e6b 100%);
  box-shadow: 0 18px 54px rgba(20, 135, 255, .22);
}

.mini-link:hover, .secondary-button:hover,
.mini-link:focus-visible, .secondary-button:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 70px rgba(0,0,0,.42);
}

.primary-button:hover, .primary-button:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 24px 64px rgba(20, 135, 255, .36);
  border-color: rgba(139, 220, 255, .52);
}

/* ─── Video rail ─── */
.video-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(260px, 39vw, 370px);
  gap: clamp(12px, 2vw, 18px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 4px;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 10px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  scrollbar-width: none; -ms-overflow-style: none;
  align-items: stretch;
}

.video-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }

.video-rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.video-rail.is-dragging .video-card,
.video-rail.is-dragging .video-card a,
.video-rail.is-dragging .video-card a:hover,
.video-rail.is-dragging .video-card a:focus-visible { transform: none !important; transition: none !important; }

.video-rail.is-dragging .thumb::before { display: none; }

.video-card { scroll-snap-align: start; height: 100%; }

.video-card a {
  position: relative; contain: layout;
  display: flex; flex-direction: column;
  height: 100%;
  min-height: clamp(270px, 32vw, 314px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(20px, 3vw, 28px);
  background: rgba(0,0,0,.52);
  box-shadow: 0 18px 56px rgba(0,0,0,.30);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,.12);
}

.video-card a:hover, .video-card a:focus-visible {
  border-color: var(--line-strong);
  background: rgba(255,255,255,.08);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 70px rgba(0,0,0,.42);
}

.thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: clamp(148px, 18vw, 190px);
  flex: 0 0 auto;
  display: flex;
  align-items: end; justify-content: space-between;
  overflow: hidden;
  padding: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 9rem),
    radial-gradient(circle at 74% 34%, rgba(255,255,255,.12), transparent 9rem),
    linear-gradient(135deg, #151515, #030303);
}

.thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0 30%, rgba(255,255,255,.12) 46%, transparent 62%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}

.video-card:hover .thumb::before { transform: translateX(100%); }

.thumb span {
  position: relative;
  color: rgba(255,255,255,.16);
  font-family: "Bebas Neue", sans-serif;
  font-size: 4.6rem; line-height: .8;
}

.thumb b {
  position: relative;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 34px rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

.video-info {
  padding: 18px;
  min-height: clamp(112px, 13vw, 128px);
  display: flex; flex-direction: column;
}

.video-info strong {
  display: -webkit-box;
  min-height: 3.6em;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 1.05rem; line-height: 1.2;
}

.video-info small {
  display: block;
  margin-top: auto;
  color: var(--muted);
  font-size: .72rem; font-weight: 850;
  letter-spacing: .10em; text-transform: uppercase;
}


.video-rail-single {
  display: block;
  overflow: visible;
  cursor: default;
  user-select: auto;
  -webkit-user-select: auto;
}

.video-playlist-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(20px, 3vw, 28px);
  background: rgba(0,0,0,.56);
  box-shadow: 0 18px 56px rgba(0,0,0,.30);
}

.video-playlist-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: clamp(215px, 36vw, 420px);
  background:
    radial-gradient(circle at 30% 20%, rgba(20,135,255,.20), transparent 9rem),
    linear-gradient(135deg, #101010, #020202);
}

.video-playlist-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-playlist-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(14px, 2.4vw, 18px);
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.28));
}

.video-playlist-info strong {
  display: block;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.15;
}

.video-playlist-info span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}

.video-playlist-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(20,135,255,.36);
  border-radius: 999px;
  background: rgba(20,135,255,.12);
  color: #fff;
  font-family: var(--font-jawn);
  font-size: .88rem;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.video-playlist-link:hover,
.video-playlist-link:focus-visible {
  border-color: rgba(139,220,255,.56);
  background: rgba(20,135,255,.20);
}

/* ─── Members section ─── */
.members-section { padding-top: var(--section-gap); }

.members-panel { padding: clamp(24px, 4vw, 44px); }

.members-section[data-animate].is-visible .members-panel {
  animation: none;
}

.members-header { max-width: 720px; }

.members-header p:not(.section-kicker) {
  margin-top: 14px;
  color: #eee;
  font-size: 1.04rem;
}

.member-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.member-card {
  contain: layout;
  position: relative;
  min-height: 350px;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: clamp(20px, 3vw, 28px);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(0,0,0,.42));
  box-shadow: 0 18px 58px rgba(0,0,0,.28);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.member-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 22% 10%, rgba(255,255,255,.12), transparent 9rem),
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 45%);
  pointer-events: none;
}

.member-card:hover, .member-card:focus-within {
  border-color: rgba(20,135,255,.28);
  background: linear-gradient(145deg, rgba(20,135,255,.05), rgba(0,0,0,.40));
  box-shadow: 0 24px 74px rgba(0,0,0,.40), 0 0 30px rgba(20,135,255,.05);
  transform: translateY(-4px);
}

.featured-member {
  border-color: rgba(20,135,255,.28);
  box-shadow:
    0 20px 70px rgba(20,135,255,.14),
    0 18px 58px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(20,135,255,.10);
}

.featured-member::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(20,135,255,.06), transparent 48%, rgba(20,135,255,.04) 100%);
  pointer-events: none;
}

.featured-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
  padding: 4px 12px;
  border: 1px solid rgba(20,135,255,.50);
  border-radius: 999px;
  background: rgba(20,135,255,.14);
  color: var(--neon-cyan);
  font-size: .64rem; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
  position: relative; z-index: 1;
  width: fit-content;
}

.member-card-top, .member-card ul, .member-button { position: relative; z-index: 1; }

.member-card-top h3 { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.12rem; line-height: 1.15; }
.member-card-top strong { display: block; margin-top: 6px; color: #f2f2f2; font-size: 1.04rem; }

.member-card ul { display: grid; gap: 10px; margin: 24px 0 28px; list-style: none; color: #efefef; font-size: .94rem; font-weight: 650; }
.member-card li { display: flex; gap: 10px; }
.member-card li::before { content: "✦"; flex: 0 0 auto; color: var(--neon-cyan); }

.member-button {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 50px;
  margin-top: auto; padding: 0 22px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.10);
  font-family: var(--font-jawn); font-weight: 400;
  letter-spacing: .075em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.30), 0 0 1px currentColor;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.featured-member .member-button {
  background: rgba(20,135,255,.14);
  border-color: rgba(20,135,255,.36);
  color: var(--neon-cyan);
}

.featured-member .member-button:hover, .featured-member .member-button:focus-visible {
  background: rgba(20,135,255,.24);
  border-color: rgba(139,220,255,.58);
  box-shadow: 0 18px 48px rgba(20,135,255,.24);
}

.member-button:hover, .member-button:focus-visible {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.18);
  box-shadow: 0 18px 48px rgba(255,255,255,.10);
  transform: translateY(-2px);
}

/* ─── Community section ─── */
.community-section { padding-top: var(--section-gap); }

.glass-panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.community-card { padding: clamp(26px, 5vw, 54px); }

.community-section[data-animate].is-visible .community-card {
  animation: none;
}

.community-card::after {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  filter: blur(60px);
  pointer-events: none;
}

.community-card p:not(.section-kicker) {
  max-width: 660px;
  margin-top: 18px;
  color: #eee;
  font-size: 1.06rem;
}

.community-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ─── Contact section ─── */
.contact-section { padding-top: var(--section-gap); }

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 4vw, 44px);
  padding: clamp(26px, 5vw, 54px);
  background:
    radial-gradient(circle at 12% 12%, rgba(139,220,255,.14), transparent 18rem),
    radial-gradient(circle at 84% 24%, rgba(20,135,255,.16), transparent 15rem),
    var(--panel);
}

.contact-section[data-animate].is-visible .contact-card {
  animation: none;
}

.contact-card::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(20,135,255,.16);
  filter: blur(70px);
  pointer-events: none;
}

.contact-copy {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.contact-card p:not(.section-kicker) {
  margin-top: 18px;
  color: #eee;
  font-size: 1.06rem;
}

.contact-mail-button {
  position: relative;
  z-index: 1;
  min-width: min(100%, 330px);
  min-height: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 22px;
  overflow: hidden;
  border: 1px solid rgba(139,220,255,.34);
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, rgba(20,135,255,.20), rgba(255,255,255,.075));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 54px rgba(20,135,255,.14);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.contact-mail-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .58s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
}

.contact-mail-button:hover,
.contact-mail-button:focus-visible {
  border-color: rgba(139,220,255,.62);
  background: linear-gradient(135deg, rgba(20,135,255,.28), rgba(255,255,255,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 64px rgba(20,135,255,.26);
  transform: translateY(-3px);
}

.contact-mail-button:hover::before,
.contact-mail-button:focus-visible::before { transform: translateX(120%); }

.contact-mail-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--neon-cyan);
  background: rgba(139,220,255,.12);
  box-shadow: 0 0 28px rgba(139,220,255,.18);
}

.contact-mail-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.contact-mail-button small,
.contact-mail-button strong {
  display: block;
  line-height: 1;
}

.contact-mail-button small {
  margin-bottom: 7px;
  color: rgba(255,255,255,.64);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.contact-mail-button strong {
  font-family: var(--font-jawn);
  font-size: clamp(1rem, 2vw, 1.28rem);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ─── Back to top ─── */
.back-to-top {
  position: fixed;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 40;
  width: 54px; height: 54px;
  min-height: var(--touch-target);
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.58);
  box-shadow: 0 18px 48px rgba(0,0,0,.46), 0 0 34px rgba(0,122,255,.24), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(.92);
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.back-to-top.is-visible { opacity: .94; pointer-events: auto; transform: translateY(0) scale(1); }

.back-to-top span {
  display: block;
  font-size: 1.65rem; font-weight: 900; line-height: 1;
}

.back-to-top.is-visible {
  animation: none;
}

.back-to-top:hover, .back-to-top:focus-visible {
  opacity: 1;
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.12);
  box-shadow: 0 20px 56px rgba(0,0,0,.52), 0 0 42px rgba(0,122,255,.32), inset 0 1px 0 rgba(255,255,255,.18);
}

.back-to-top:focus-visible { outline: 2px solid rgba(255,255,255,.76); outline-offset: 7px; }

@keyframes backToTopPulse {
  0%, 100% { transform: translateY(2px); }
  50%       { transform: translateY(-5px); }
}

/* ─── Footer ─── */
.footer {
  display: flex; justify-content: space-between; gap: 16px;
  margin-bottom: 34px;
  padding-top: 22px;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .86rem;
}

.footer span:first-child {
  font-family: var(--font-jawn);
  font-weight: 400;
  letter-spacing: .055em;
  line-height: 1;
}

/* ─── Reveal animations ─── */
[data-animate] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
[data-animate].is-visible { opacity: 1; transform: translateY(0); }

.magnetic { backface-visibility: hidden; }

/* content-visibility for below-fold sections */
.members-section, .community-section, .contact-section {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
  scroll-margin-top: clamp(86px, 11vw, 120px);
}

.links-section, .videos-section { scroll-margin-top: clamp(86px, 11vw, 120px); }

/* ─── YouTube thumb ─── */
.youtube-thumb {
  align-items: flex-end; justify-content: space-between;
  background: #060606;
}

.youtube-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}

.youtube-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.62)),
    radial-gradient(circle at 76% 28%, rgba(0,122,255,.22), transparent 42%);
  pointer-events: none;
}

.video-card a:hover .youtube-thumb img,
.video-card a:focus-visible .youtube-thumb img {
  filter: brightness(1.08) saturate(1.12);
  transform: scale(1.08);
}

.youtube-thumb span, .youtube-thumb b { z-index: 1; }
.youtube-thumb span { color: rgba(255,255,255,.34); text-shadow: 0 8px 28px rgba(0,0,0,.7); }

/* Fallback ghost/color thumbs */
.ghost-thumb  { background: linear-gradient(135deg, #1a1a1a, #060606); }
.red-thumb    { background: linear-gradient(135deg, #3a0a0a, #1a0404); }
.purple-thumb { background: linear-gradient(135deg, #1c0a2e, #0a0416); }
.blue-thumb   { background: linear-gradient(135deg, #0a122e, #020510); }

/* ─── Responsive ─── */
@media (hover: none), (pointer: coarse) {
  body.cursor-ready, body.cursor-ready a, body.cursor-ready button { cursor: auto; }
  .cursor-dot, .cursor-ring, .cursor-trail { display: none; }
  .light-follow { display: none; }

  /* disable hover transforms on touch */
  .magnetic, .social-button:hover, .social-button:focus-visible,
  .member-card:hover, .member-card:focus-within,
  .video-card a:hover, .video-card a:focus-visible,
  .primary-button:hover, .secondary-button:hover,
  .mini-link:hover, .member-button:hover, .contact-mail-button:hover { transform: none !important; }

  .profile-card:hover .avatar-frame img,
  .profile-card:focus-within .avatar-frame img { transform: scale(1.02); }
}

@media (max-width: 980px) {
  .topbar {
    left: 50%; right: auto;
    top: max(10px, env(safe-area-inset-top));
    width: min(520px, calc(100vw - max(18px, env(safe-area-inset-left) + env(safe-area-inset-right) + 18px)));
    max-width: calc(100vw - 18px);
    margin-inline: 0;
  }

  .nav-links { gap: clamp(6px, 2vw, 14px); }

  .nav-links a {
    flex: 1 1 0; min-width: 0;
    font-size: clamp(.84rem, 2.9vw, 1.06rem);
    padding-inline: clamp(6px, 2.2vw, 13px);
    white-space: nowrap;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin-inline: auto;
    align-items: start;
    min-height: auto;
  }

  .hero-left {
    justify-self: center;
    max-width: min(100%, 560px);
    margin-inline: auto;
  }

  .hero-right { padding-top: 0; }

  .profile-card { width: clamp(230px, 32vw, 265px); }

  .member-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-card { min-height: auto; }

  .scroll-hint {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 16px;
    margin-bottom: 8px;
    align-self: center;
    justify-self: center;
    grid-column: 1 / -1;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .topbar { width: min(520px, calc(100vw - 32px)); padding-inline: 14px; }
  .nav-links a { font-size: clamp(1rem, 2vw, 1.08rem); }
}

@media (max-width: 760px) {
  .topbar { width: calc(100% - 22px); min-height: 56px; padding: 8px 10px; }
  .nav-links { gap: clamp(6px, 2vw, 12px); }

  .hero-grid { gap: clamp(28px, 7vw, 42px); padding-top: 0; padding-bottom: clamp(68px, 16vw, 88px); }

  .scroll-hint {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 8px;
    align-self: center;
    justify-self: center;
  }

  .profile-card { width: clamp(205px, 62vw, 255px); }

  .social-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .videos-topline { align-items: stretch; flex-direction: column; }
  .drag-helper { width: 100%; justify-content: center; text-align: center; font-size: .66rem; letter-spacing: .055em; white-space: normal; }

  .video-rail {
    grid-auto-columns: minmax(252px, 84vw);
    margin-inline: calc(var(--page-gutter) * -.35);
    padding-inline: calc(var(--page-gutter) * .35);
    scroll-padding-inline: calc(var(--page-gutter) * .35);
  }

  .thumb { min-height: 142px; }

  .member-levels { grid-template-columns: 1fr; }

  .members-panel, .community-card, .contact-card { padding: clamp(20px, 5vw, 28px); }

  .community-actions { align-items: stretch; }

  .contact-card { grid-template-columns: 1fr; }
  .contact-mail-button { justify-content: flex-start; }
  .primary-button, .secondary-button, .mini-link, .member-button, .contact-mail-button { width: 100%; }
}

@media (max-width: 520px) {
  :root { --page-gutter: 14px; --touch-target: 46px; }

  .topbar { width: calc(100% - 18px); border-radius: 24px; }
  .nav-links a { flex: 1 1 0; min-width: 0; padding-inline: 8px; }

  .hero-left { gap: 20px; }

  .hero-title {
    width: min(100%, 288px);
    font-size: clamp(3.38rem, 20vw, 4.9rem);
    letter-spacing: clamp(.035em, 1.45vw, .075em);
  }

  .hero-description { max-width: 32rem; font-size: .96rem; line-height: 1.58; }

  .section-kicker { gap: 8px; margin-bottom: 12px; font-size: 1.02rem; letter-spacing: .18em; }
  .section-kicker::before { width: 14px; }

  .social-buttons { grid-template-columns: 1fr; }
  .social-button { justify-content: flex-start; min-height: 54px; padding-inline: 18px; }

  .video-rail { grid-auto-columns: minmax(238px, 88vw); }
  .video-card a { min-height: 258px; }
  .thumb { min-height: 134px; padding: 14px; }
  .thumb span { font-size: 3.45rem; }
  .thumb b { width: 44px; height: 44px; }
  .video-info { min-height: 108px; padding: 16px; }
  .video-info strong { min-height: auto; font-size: 1rem; }

  h2, .members-header h2, .community-card h2, .contact-card h2 {
    font-size: clamp(2.35rem, 14vw, 3.15rem);
    letter-spacing: .005em;
  }

  .members-header p:not(.section-kicker),
  .community-card p:not(.section-kicker),
  .contact-card p:not(.section-kicker) { font-size: .98rem; }

  .member-card { padding: 20px; }

  .footer { align-items: center; text-align: center; flex-direction: column; }
  .live-badge { display: none; }
}

@media (max-width: 380px) {
  .topbar { padding-inline: 8px; }
  .nav-links { gap: 3px; }
  .nav-links a { font-size: clamp(.74rem, 3.35vw, .88rem); letter-spacing: 0; padding-inline: 4px; }
  .hero-title { font-size: clamp(3.1rem, 19vw, 4.1rem); }
  .hero-description { font-size: .93rem; }
  .profile-card { width: min(220px, 72vw); }
  .video-rail { grid-auto-columns: minmax(226px, 90vw); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .site-shell { padding-top: 82px; }
  .hero-grid { min-height: auto; padding-bottom: 56px; }
  .profile-card { width: clamp(180px, 24vw, 220px); }
  .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .scroll-hint strong, .back-to-top span { transform: none !important; }
  .bg-video { display: none; }
  body { background-attachment: scroll; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .glass-panel, .profile-card, .social-button, .back-to-top {
    background-color: rgba(0, 0, 0, .78);
  }
}


@media (max-width: 760px) {
  .corner-blur {
    width: min(52vw, 260px);
    height: min(52vw, 260px);
    opacity: .44;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .corner-blur { display: none; }
}

@media (min-width: 1181px) {
  .hero-grid { max-width: var(--container); margin-inline: auto; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .member-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .section-kicker { letter-spacing: .22em; }
}

/* ── Loading indicator do video rail ── */
.video-rail-loading {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 2rem 1rem;
  min-width: 100%;
  justify-content: center;
}

.video-rail-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #e63232);
  opacity: .4;
  animation: rail-pulse 1.2s ease-in-out infinite;
}

.video-rail-loading-dot:nth-child(2) { animation-delay: .2s; }
.video-rail-loading-dot:nth-child(3) { animation-delay: .4s; }

@keyframes rail-pulse {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50%       { opacity: 1;  transform: scale(1.15); }
}


/* ─────────────────────────────────────────────
   Touch mobile suave: aba de redes sociais
   ───────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  .links-section {
    touch-action: pan-y;
  }

  .social-buttons {
    touch-action: pan-y;
    overscroll-behavior: contain;
    contain: layout paint;
    -webkit-overflow-scrolling: touch;
  }

  .social-button {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transform: translateZ(0);
    will-change: auto;
    transition: transform .14s ease, opacity .14s ease, border-color .14s ease, box-shadow .14s ease;
  }

  .social-button:hover,
  .social-button:focus-visible {
    border-color: rgba(255,255,255,.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 14px 28px rgba(0,0,0,.24);
  }

  .social-button:hover::before,
  .social-button:focus-visible::before { opacity: .46; }

  .social-button:hover::after,
  .social-button:focus-visible::after { opacity: .38; }

  .social-button .btn-shine { display: none; }

  .social-button:hover .social-icon,
  .social-button:focus-visible .social-icon {
    animation: none !important;
  }

  .social-button:active {
    opacity: .92;
    transform: scale(.985) translateZ(0) !important;
  }
}

/* ─────────────────────────────────────────────
   Ajustes de performance / scroll suave
   ───────────────────────────────────────────── */
body {
  background-color: #000;
  background-image: none;
  background-attachment: scroll;
}

.bg-video {
  background-color: #000;
  background-image: none;
  filter: none;
  opacity: .84;
  will-change: auto;
  transition: opacity .24s ease;
}

.bg-video.is-loaded { opacity: .88; }
.bg-video.is-static { opacity: .78; }

/* O site tem poucas seções; deixar tudo pronto evita o “engasgo” quando desce a página. */
.members-section, .community-section, .contact-section {
  content-visibility: visible;
  scroll-margin-top: clamp(86px, 11vw, 120px);
}

/* Backdrop blur em elementos grandes pode travar bastante em iPhone/Android. */
@media (max-width: 760px), (prefers-reduced-data: reduce) {
  .noise, .corner-blur { display: none; }
  .scanlines { opacity: .018; }
  .vignette {
    background:
      linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.16) 48%, rgba(0,0,0,.55)),
      linear-gradient(180deg, rgba(0,0,0,.38), transparent 36%, rgba(0,0,0,.74));
  }

  .topbar, .glass-panel, .profile-card, .social-button, .drag-helper, .back-to-top,
  .member-card, .contact-mail-button, .primary-button, .secondary-button {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .profile-card[data-animate].is-visible,
  .profile-card::after,
  .avatar-float::after,
  .hero-title,
  .scroll-hint strong,
  .video-rail-loading-dot {
    animation: none !important;
  }

  .profile-card::after,
  .avatar-float::after {
    filter: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .profile-card,
  .hero-title,
  .avatar-float::after,
  .profile-card::after { will-change: auto; }
}


/* ─────────────────────────────────────────────
   Correção do toque no celular
   ───────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  html, body {
    overscroll-behavior-x: none;
  }

  .video-rail {
    cursor: auto;
    touch-action: auto;
    overscroll-behavior-inline: auto;
    scroll-behavior: auto;
    scroll-snap-type: x proximity;
    user-select: auto;
    -webkit-user-select: auto;
    -webkit-overflow-scrolling: touch;
  }

  .video-rail.is-dragging {
    cursor: auto;
    scroll-snap-type: x proximity;
  }

  .video-card,
  .video-card a,
  .youtube-thumb,
  .youtube-thumb img {
    touch-action: auto;
  }

  .video-card a {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
}


@media (max-width: 620px) {
  .video-playlist-info {
    align-items: stretch;
    flex-direction: column;
  }

  .video-playlist-link {
    width: 100%;
  }
}

.social-button strong { white-space: normal; text-align: center; }

.social-buttons { grid-auto-rows: 1fr; }
.social-item { position: relative; display: grid; min-width: 0; }
.social-item:hover, .social-item:focus-within { z-index: 5; }
.social-profile-photo {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 84px;
  height: 84px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: #101018;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 22px) scale(.65);
  transition: transform .42s cubic-bezier(.2,1.55,.4,1), opacity .22s ease-out;
}
@media (hover: hover) {
  .social-item:hover .social-profile-photo {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
.social-button:focus-visible + .social-profile-photo {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.social-buttons { contain: none; }
@media (prefers-reduced-motion: reduce) {
  .social-profile-photo { transition: none; }
}

.videos-topline h2 { font-size: clamp(24px, 3vw, 36px); line-height: 1.1; margin: 0; }
.video-controls { display: flex; gap: 6px; }
.video-controls button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(12,18,28,.84); color: white; font: 24px/1 sans-serif; cursor: pointer;
}
.video-controls button:hover, .video-controls button:focus-visible { border-color: var(--accent); }
.video-controls button:disabled { opacity: .36; cursor: default; }

/* Vídeos: carregamento sem cartões antigos */
.video-loading-label, .video-rail-unavailable { color: rgba(255,255,255,.76); font-size: .9rem; }
.video-rail-unavailable { padding: 2rem 1rem; }
.video-rail-unavailable a { color: white; text-decoration: underline; }

/* Refinamento da apresentação — retrato quadrado, moldura leve e composição compacta */
.hero-left { gap: clamp(20px, 3vw, 26px); }
.profile-card {
  width: clamp(220px, 23vw, 286px);
  padding: 7px;
  border-radius: 25px;
  border: 1px solid rgba(165, 215, 255, .25);
  background: linear-gradient(145deg, rgba(52, 107, 166, .25), rgba(9, 17, 32, .93) 43%, rgba(12, 40, 85, .65));
  box-shadow: 0 20px 55px rgba(0,0,0,.56), 0 0 0 1px rgba(42, 140, 255, .09), 0 0 38px rgba(0, 116, 255, .1);
}
.profile-card::after {
  inset: -15px;
  border-radius: 34px;
  background: radial-gradient(ellipse at 50% 55%, rgba(0, 112, 255, .28), transparent 68%);
}
.avatar-float { border-radius: 18px; }
.avatar-float::after {
  inset: -4px;
  border-radius: 22px;
  border-color: rgba(110, 192, 255, .26);
  box-shadow: 0 0 15px rgba(16, 111, 255, .12);
}
.avatar-frame {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px solid rgba(144, 203, 255, .20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 12px 36px rgba(0,0,0,.30);
}
.avatar-frame img {
  object-fit: cover;
  object-position: center 39%;
  filter: saturate(.95) contrast(1.06);
  transform: scale(1.025);
}
.avatar-frame::after {
  background: linear-gradient(180deg, rgba(2, 13, 34, .04) 55%, rgba(0, 5, 15, .24)), radial-gradient(circle at 22% 0%, rgba(40, 140, 255, .09), transparent 54%);
}
.hero-copy { max-width: 420px; }
.hero-copy::before { inset: -12px -10px -14px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .2), transparent 73%); }
.hero-title {
  width: fit-content;
  max-width: 100%;
  font-size: clamp(4rem, 7.2vw, 6.6rem);
  letter-spacing: .09em;
  line-height: .98;
  text-shadow: 0 6px 0 rgba(255,255,255,.07), 0 0 30px rgba(34,140,255,.18);
}
.hero-description {
  margin-top: 18px;
  max-width: 350px;
  padding: 0 12px;
  line-height: 1.62;
  font-size: clamp(.98rem, 1.25vw, 1.08rem);
  color: rgba(241, 246, 255, .91);
  text-wrap: pretty;
}
@media (max-width: 980px) {
  .profile-card { width: clamp(220px, 34vw, 264px); }
}
@media (max-width: 760px) {
  .profile-card { width: clamp(212px, 61vw, 260px); }
  .hero-left { gap: 20px; }
  .hero-title { font-size: clamp(3.6rem, 17vw, 5.1rem); letter-spacing: .075em; }
  .hero-description { max-width: 345px; font-size: .98rem; margin-top: 15px; }
}
@media (max-width: 380px) {
  .profile-card { width: min(226px, 70vw); }
  .hero-title { font-size: clamp(3.1rem, 17vw, 4rem); }
}

/* Abertura minimalista JAWN.EXE, com o fundo real desfocado ao fundo. */
.xp-boot {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: rgba(2, 7, 18, .48);
  backdrop-filter: blur(20px) saturate(.85);
  -webkit-backdrop-filter: blur(20px) saturate(.85);
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility .55s ease;
}
.xp-boot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(20,135,255,.12), transparent 60%);
}
.xp-boot.is-closing { opacity: 0; visibility: hidden; pointer-events: none; }
.jawn-boot-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  animation: jawn-boot-enter .55s ease both;
}
.jawn-boot-logo {
  font-family: var(--font-jawn);
  font-weight: 400;
  font-size: clamp(5.5rem, 17vw, 9rem);
  line-height: .9;
  letter-spacing: .045em;
  color: #fff;
  text-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 38px rgba(27,127,255,.26);
}
.jawn-boot-caption {
  color: rgba(225,238,255,.86);
  font: 500 clamp(.85rem, 2.5vw, 1rem) 'Space Grotesk', Inter, sans-serif;
  letter-spacing: .09em;
}
.jawn-boot-spinner {
  width: 31px;
  height: 31px;
  border: 3px solid rgba(135,195,255,.18);
  border-top-color: #52aaff;
  border-right-color: #c8e9ff;
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(20,135,255,.12);
  animation: jawn-boot-spin .85s linear infinite;
}
@keyframes jawn-boot-spin { to { transform: rotate(360deg); } }
@keyframes jawn-boot-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .xp-boot { transition: none; }
  .jawn-boot-content, .jawn-boot-spinner { animation: none; }
}

/* Layout sem a barra superior de Contato: conteúdo começa mais alto. */
.site-shell {
  padding-top: clamp(24px, 4.2vw, 52px);
}
.hero-grid {
  min-height: calc(100dvh - 220px);
  padding-top: 0;
  padding-bottom: clamp(46px, 6vw, 72px);
}
@media (max-width: 980px) {
  .hero-grid { min-height: auto; }
}
@media (max-width: 760px) {
  .site-shell { padding-top: clamp(18px, 5vw, 32px); }
  .hero-grid { padding-bottom: clamp(46px, 11vw, 66px); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .site-shell { padding-top: 20px; }
}

/* Indicador de mais conteúdo — posicionado no fim da apresentação. */
.hero-grid > .scroll-hint {
  bottom: 6px;
  gap: 7px;
  text-decoration: none;
}
.hero-grid > .scroll-hint span {
  font-family: var(--font-jawn);
  font-weight: 400;
  font-size: clamp(.98rem, 1.5vw, 1.18rem);
  letter-spacing: .1em;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
}
.hero-grid > .scroll-hint strong {
  width: 37px;
  height: 37px;
  font-size: 1.3rem;
  border-color: rgba(80, 164, 255, .42);
  background: rgba(3, 15, 36, .66);
}
@media (max-width: 760px) {
  .hero-grid > .scroll-hint {
    display: inline-flex;
    bottom: 0;
  }
  .hero-grid {
    padding-bottom: 115px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-grid > .scroll-hint strong { animation: none; }
}

/* Sem indicador: aproxima o contato do fim dos vídeos, em todas as telas. */
.hero-grid {
  min-height: auto;
  padding-bottom: clamp(12px, 2vw, 24px);
}
.contact-section {
  padding-top: clamp(12px, 2.5vw, 30px);
}
@media (max-width: 760px) {
  .hero-grid { padding-bottom: 16px; }
  .contact-section { padding-top: 16px; }
}


/* JAWN.EXE — acabamento cinematográfico leve, usando o background real */
.xp-boot {
  isolation: isolate;
  background: rgba(1, 5, 14, .54);
  backdrop-filter: blur(22px) saturate(.98) brightness(.74);
  -webkit-backdrop-filter: blur(22px) saturate(.98) brightness(.74);
}
.xp-boot::before {
  z-index: -1;
  background:
    radial-gradient(ellipse 52% 38% at 50% 45%, rgba(18, 107, 233, .24), transparent 78%),
    radial-gradient(ellipse 30% 32% at 76% 25%, rgba(21, 98, 227, .10), transparent 85%),
    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .25));
}
.xp-boot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .48;
  background: radial-gradient(ellipse 38% 35% at center, transparent 48%, rgba(0,0,0,.42));
}
.jawn-boot-content {
  width: min(450px, 100%);
  gap: 14px;
  padding: clamp(28px, 7vw, 48px) 24px;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 25%, rgba(35, 111, 255, .065), transparent 72%);
  filter: drop-shadow(0 28px 30px rgba(0,0,0,.30));
}
.jawn-boot-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(310px, 80vw);
  height: 110px;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(25, 124, 255, .21);
  filter: blur(60px);
  border-radius: 50%;
  pointer-events: none;
}
.jawn-boot-logo {
  font-size: clamp(5.5rem, 17vw, 9rem);
  letter-spacing: .06em;
  text-shadow:
    0 3px 0 rgba(143, 190, 248, .16),
    0 7px 5px rgba(0,0,0,.58),
    0 20px 24px rgba(0,0,0,.55),
    0 0 25px rgba(65,148,255,.27),
    0 0 68px rgba(19,104,255,.19);
}
.jawn-boot-caption {
  margin-top: 3px;
  color: #dcecff;
  font-weight: 600;
  letter-spacing: .075em;
  text-shadow: 0 2px 13px rgba(0,0,0,.95), 0 0 22px rgba(35,139,255,.20);
}
.jawn-boot-spinner {
  position: relative;
  width: 38px;
  height: 38px;
  margin-top: 12px;
  border: 3px solid rgba(119, 181, 245, .16);
  border-top-color: #f3fbff;
  border-right-color: #65b8ff;
  border-bottom-color: #2471cd;
  box-shadow:
    0 0 0 7px rgba(46,130,248,.055),
    0 0 21px rgba(51,148,255,.36),
    inset 0 0 12px rgba(39,141,255,.13);
  animation: jawn-boot-spin .95s linear infinite;
}
.jawn-boot-spinner::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,184,255,.29), transparent 78%);
}
@media (max-width: 480px) {
  .jawn-boot-content { padding: 28px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .jawn-boot-spinner { animation: none; }
}

/* O título "Vídeos recentes" usa a tipografia oficial do canal */
.videos-topline h2 {
  font-family: var(--font-jawn);
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1.08;
}


/* Indicador de atividade inspirado no Windows 10/11: seis pontos independentes
   com aceleração, desaceleração e entrada em sequência. */
.jawn-boot-spinner {
  position: relative;
  width: 42px;
  height: 42px;
  margin-top: 14px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  filter: none;
  animation: none;
}
.jawn-boot-spinner::after { content: none; }
.jawn-boot-spinner span {
  position: absolute;
  top: calc(50% - 2.5px);
  left: calc(50% - 2.5px);
  width: 5px;
  height: 5px;
  margin: 0;
  border-radius: 50%;
  background: #f5f8ff;
  box-shadow: 0 0 4px rgba(255,255,255,.12);
  opacity: 0;
  transform-origin: 2.5px 2.5px;
  animation: jawn-windows-chase 2.75s cubic-bezier(.55,.12,.31,.98) infinite;
  animation-delay: calc(var(--i) * .115s - 2.75s);
}
@keyframes jawn-windows-chase {
  0% { opacity: 0; transform: rotate(-40deg) translateY(-16px); }
  8% { opacity: 1; }
  27% { transform: rotate(65deg) translateY(-16px); }
  58% { transform: rotate(240deg) translateY(-16px); }
  79% { opacity: 1; transform: rotate(322deg) translateY(-16px); }
  91% { opacity: 0; }
  100% { opacity: 0; transform: rotate(370deg) translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) {
  .jawn-boot-spinner span {
    animation: none;
    opacity: .95;
    transform: rotate(calc(var(--i) * 60deg)) translateY(-16px);
  }
}


/* Confirmação no próprio cartão, usando a fonte oficial JAWN */
.contact-mail-button { cursor: pointer; font: inherit; text-align: left; }
.contact-mail-button #contactEmailValue {
  font-family: var(--font-jawn);
  letter-spacing: .045em;
  transition: color .2s ease, text-shadow .2s ease;
}
.contact-mail-button.is-copied {
  border-color: rgba(114, 207, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 25px rgba(41,151,255,.28);
}
.contact-mail-button.is-copied #contactEmailValue {
  color: #fff;
  text-shadow: 0 0 12px rgba(77,180,255,.55);
}
.contact-mail-button.is-copy-error { border-color: rgba(255,163,149,.75); }
@media (prefers-reduced-motion: reduce) {
  .contact-mail-button #contactEmailValue { transition: none; }
}


/* E-mail: dimensões estáveis e microinteração no clique. */
.contact-mail-button {
  width: 330px;
  max-width: 100%;
  height: 82px;
  min-height: 82px;
  min-width: 0;
  box-sizing: border-box;
}
.contact-mail-button > span:last-child {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
}
.contact-mail-button #contactEmailLabel,
.contact-mail-button #contactEmailValue {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.contact-mail-button.is-click-animated {
  animation: email-button-click .55s cubic-bezier(.2,.8,.25,1) both;
}
.contact-mail-button.is-click-animated::before {
  animation: email-button-shine .65s ease-out both;
}
.contact-mail-button.is-click-animated .contact-mail-icon {
  animation: email-icon-tap .54s ease-out both;
}
.contact-mail-button.is-click-animated #contactEmailValue {
  animation: email-text-reveal .42s ease-out both;
}
@keyframes email-button-click {
  0% { filter: brightness(1); }
  28% { filter: brightness(1.42); }
  100% { filter: brightness(1); }
}
@keyframes email-button-shine {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
@keyframes email-icon-tap {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.13); }
}
@keyframes email-text-reveal {
  from { opacity: .45; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 370px) {
  .contact-mail-button { padding-inline: 14px; gap: 9px; }
  .contact-mail-button strong { font-size: .96rem; letter-spacing: .025em; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-mail-button.is-click-animated,
  .contact-mail-button.is-click-animated::before,
  .contact-mail-button.is-click-animated .contact-mail-icon,
  .contact-mail-button.is-click-animated #contactEmailValue { animation: none; }
}

/* Sinalização clara para copiar: mantém o cartão 330 × 82 px */
.contact-mail-button { position: relative; cursor: copy; }
.contact-mail-button #contactEmailLabel {
  color: #b3e3ff;
  font-family: var(--font-jawn);
  font-size: .83rem;
  letter-spacing: .075em;
  text-shadow: 0 0 9px rgba(62,163,255,.35);
}
.contact-mail-button:not(.is-copied):not(.is-copy-error):hover,
.contact-mail-button:not(.is-copied):not(.is-copy-error):focus-visible {
  border-color: rgba(120,209,255,.94);
  box-shadow: 0 0 0 2px rgba(62,164,255,.17), 0 0 30px rgba(38,139,255,.32);
}
.contact-mail-button.is-copied {
  box-shadow: inset 0 0 18px rgba(70,169,255,.28), 0 0 0 2px rgba(92,209,255,.35), 0 0 35px rgba(41,165,255,.48);
}
.contact-mail-button.is-copied .contact-mail-icon {
  background: rgba(84,199,255,.28);
  color: #fff;
}
.contact-mail-button.is-click-animated { animation: email-confirm-pop .65s ease-out both; }
@keyframes email-confirm-pop {
  0%,100% { filter: brightness(1); }
  22% { filter: brightness(1.8); }
  52% { filter: brightness(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-mail-button.is-click-animated { animation: none; }
}


/* ===== MBJAWN · Refinamento visual 2026 ===== */
/* Contraste e resposta tátil dos botões, sem alterar dimensões. */
.social-button {
  --pointer-x: 50%; --pointer-y: 50%;
  outline-offset: 4px;
  transition: transform .22s cubic-bezier(.2,.75,.25,1), border-color .22s ease, box-shadow .22s ease;
}
.social-button::after {
  background:
    radial-gradient(circle 110px at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.15), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 54%, rgba(0,0,0,.14));
}
@media (hover: hover) and (pointer: fine) {
  .social-button:hover, .social-button:focus-visible {
    transform: translateY(-2px) scale(1.015);
    border-color: rgba(255,255,255,.43);
  }
}
.social-button:active { filter: brightness(1.14); }
.social-icon { flex: 0 0 auto; }

/* Identificação dos canais dentro da imagem, sempre legível. */
.video-channel-badge {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 3;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(5,16,30,.83);
  color: #f1f7ff;
  font: 700 .68rem/1 Inter, sans-serif;
  font-style: normal;
  letter-spacing: .065em;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}
.video-channel-badge.is-lives {
  background: rgba(15,53,113,.87);
  border-color: rgba(103,183,255,.53);
}
.video-card a {
  outline-offset: 4px;
  box-shadow: 0 18px 56px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
.video-card a:hover, .video-card a:focus-visible {
  border-color: rgba(108,181,255,.62);
  box-shadow: 0 20px 60px rgba(0,0,0,.46), 0 0 26px rgba(21,115,241,.14);
}
.video-card .youtube-thumb img { transition: transform .52s cubic-bezier(.2,.65,.2,1), filter .4s ease; }
.video-card .youtube-thumb::after { background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 40%, rgba(0,0,0,.60)); }

/* Moldura e apresentação: luz discreta, preservando foto quadrada. */
.avatar-frame {
  box-shadow: 0 24px 60px rgba(0,0,0,.48), 0 0 35px rgba(35,127,255,.11), inset 0 1px 0 rgba(224,240,255,.15);
}
.hero-title { text-shadow: 0 8px 0 rgba(255,255,255,.08), 0 14px 32px rgba(0,0,0,.50), 0 0 38px rgba(46,135,255,.19); }
.hero-description { text-wrap: pretty; }

/* Mobile: cards confortáveis e menos trabalho de pintura no GPU. */
@media (max-width: 760px) {
  .video-rail { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .video-card a { min-height: 0; }
  .video-info { min-height: 110px; }
  .video-channel-badge { font-size: .61rem; top: 10px; left: 10px; }
  .social-button { min-height: 54px; }
  .video-card .thumb img { transform: scale(1.005); }
  .avatar-frame { box-shadow: 0 16px 38px rgba(0,0,0,.42), 0 0 20px rgba(35,127,255,.11); }
  .hero-title { will-change: auto; }
}
@media (max-width: 520px) {
  .social-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .social-button { justify-content: center; padding: 12px 8px; min-width: 0; }
  .social-button strong { font-size: clamp(.73rem, 2.55vw, .86rem); }
  .video-rail { grid-auto-columns: minmax(220px, min(84vw, 315px)); }
  .video-info strong { font-size: .96rem; }
}
@media (max-width: 360px) {
  .social-buttons { grid-template-columns: 1fr; }
  .video-rail { grid-auto-columns: minmax(210px, 85vw); }
}
@media (hover: none), (pointer: coarse) {
  .social-button::after { background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 52%); }
  .video-card .youtube-thumb img { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .video-card .youtube-thumb img, .social-button { transition: none; }
}


/* Original polish.css */
/* MBJAWN / Visual polish — 2026
   Camada final de design. Preserva os estilos anteriores e centraliza os refinamentos.
   Sem bibliotecas ou fontes externas adicionais. */
:root {
  --jawn-blue: #378fff;
  --jawn-ice: #a2deff;
  --jawn-ease: cubic-bezier(.22,1,.36,1);
  --jawn-glass: rgba(6, 13, 29, .77);
  --jawn-hairline: rgba(162, 214, 255, .17);
}

/* Layout: melhor hierarquia, sem alterar a posição geral das seções */
.site-shell { isolation: isolate; }
.hero-grid { gap: clamp(24px, 5.25vw, 76px); }
.hero-left, .hero-right { position: relative; }
.hero-copy { position: relative; }
.hero-description {
  max-width: 37ch;
  margin-inline: auto;
  line-height: 1.68;
  text-wrap: pretty;
  color: rgba(236,246,255,.87);
  text-shadow: 0 2px 22px rgba(0,0,0,.56);
}
.hero-title {
  text-shadow: 0 6px 2px rgba(0,0,0,.36), 0 17px 30px rgba(0,0,0,.48), 0 0 58px rgba(40,132,255,.22);
}

/* Moldura: vidro, profundidade e borda azul fina */
.profile-card {
  border-color: rgba(143,208,255,.32);
  box-shadow: 0 27px 65px rgba(0,0,0,.43), 0 0 0 1px rgba(105,174,255,.075), 0 0 68px rgba(20,118,252,.13);
}
.avatar-frame { position: relative; isolation: isolate; }
.avatar-frame::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.21), inset 0 -17px 30px rgba(0,0,0,.10);
  background: linear-gradient(145deg, rgba(168,219,255,.09), transparent 43%, rgba(2,13,32,.10));
}

/* Títulos: contraste elegante e separadores finos */
.section-kicker {
  color: #80c2ff;
  text-shadow: 0 0 24px rgba(55,143,255,.19);
  letter-spacing: .135em;
}
.section-heading h2, .videos-topline h2, .contact-copy h2 {
  text-wrap: balance;
  text-shadow: 0 7px 28px rgba(0,0,0,.52);
}
.videos-topline {
  position: relative;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(159,210,255,.13);
  margin-bottom: 12px;
}

/* Botões: camadas de vidro que respondem ao cursor sem mover o layout */
.social-item { min-width: 0; }
.social-button {
  isolation: isolate;
  border-color: rgba(195,222,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19), inset 0 -1px 0 rgba(0,0,0,.20), 0 14px 26px rgba(0,0,0,.30);
  transition: border-color .25s ease, box-shadow .3s var(--jawn-ease), filter .25s ease, transform .3s var(--jawn-ease);
}
.social-button .btn-shine {
  background: radial-gradient(ellipse 68% 150% at var(--spot-x, 50%) var(--spot-y, 50%),rgba(255,255,255,.22),transparent 80%);
  transform: none;
  opacity: 0;
  transition: opacity .28s ease;
}
.social-button:hover .btn-shine, .social-button:focus-visible .btn-shine { transform: none; opacity: 1; }
.social-button:hover, .social-button:focus-visible {
  border-color: rgba(220,238,255,.45);
  filter: brightness(1.08);
}
.social-button:active { filter: brightness(1.16); }
.social-button strong { text-shadow: 0 1px 9px rgba(0,0,0,.25); }
.social-button .social-icon { filter: drop-shadow(0 2px 5px rgba(0,0,0,.20)); }
.social-button.tiktok { background: linear-gradient(140deg,#111316,#020304); }
.social-button.kick { border-color: rgba(165,255,156,.24); }
.social-button.youtube { border-color: rgba(255,174,174,.24); }
.social-button.instagram { border-color: rgba(255,199,247,.28); }

/* Cards: superfície mais coesa, thumb reforçada, microelevação */
.video-rail { padding-block: 6px 18px; scroll-padding-inline: 5px; }
.video-card a {
  border-color: rgba(159,208,255,.17);
  background: linear-gradient(154deg, rgba(12,23,44,.90), rgba(2,6,15,.96));
  box-shadow: 0 18px 40px rgba(0,0,0,.37), inset 0 1px 0 rgba(255,255,255,.09);
  transition: transform .32s var(--jawn-ease), border-color .28s ease, box-shadow .32s var(--jawn-ease);
}
.video-card a:hover, .video-card a:focus-visible {
  border-color: rgba(126,198,255,.58);
  box-shadow: 0 23px 52px rgba(0,0,0,.48), 0 0 30px rgba(35,126,255,.13), inset 0 1px 0 rgba(255,255,255,.12);
}
.video-info { background: linear-gradient(180deg, rgba(7,12,24,.87), rgba(7,10,19,.98)); }
.video-info strong { text-wrap: pretty; }
.video-channel-badge {
  box-shadow: 0 3px 12px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(7px);
}
.video-rail:focus-visible { outline: 2px solid #89caff; outline-offset: 3px; border-radius: 10px; }
.video-controls button {
  transition: background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s var(--jawn-ease);
}
.video-controls button:not(:disabled):hover { transform: translateY(-2px); }
.video-controls button:disabled { cursor: default; opacity: .37; }

/* Contato: destaque sutil e confirmação sem salto de dimensões */
.contact-section { position: relative; }
.contact-card {
  border: 1px solid rgba(164,213,255,.22);
  background: linear-gradient(125deg, rgba(10,20,40,.82), rgba(2,7,18,.82));
  box-shadow: 0 24px 65px rgba(0,0,0,.37), inset 0 1px 0 rgba(255,255,255,.08);
}
.contact-mail-button {
  flex-shrink: 0;
  border-color: rgba(128,197,255,.35);
  box-shadow: 0 12px 35px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10);
  transition: border-color .2s ease, background .25s ease, box-shadow .25s var(--jawn-ease);
}
.contact-mail-button:hover, .contact-mail-button:focus-visible {
  box-shadow: 0 17px 42px rgba(0,0,0,.36), 0 0 28px rgba(34,130,255,.15), inset 0 1px 0 rgba(255,255,255,.15);
}
.contact-mail-button.is-copied {
  border-color: rgba(134,221,255,.90);
  box-shadow: 0 0 0 1px rgba(134,221,255,.12), 0 0 34px rgba(33,153,255,.32), inset 0 1px 0 rgba(255,255,255,.19);
}
.footer { border-top: 1px solid rgba(158,203,255,.12); }

/* Microajustes de responsividade: mais respiro, sem rolagem lateral */
@media (max-width: 980px) {
  .hero-grid { gap: clamp(20px,3vw,40px); }
}
@media (max-width: 760px) {
  :root { --page-gutter: 18px; }
  .site-shell { padding-top: clamp(20px,5vw,42px); }
  .hero-grid { row-gap: 28px; }
  .hero-description { max-width: 38ch; font-size: clamp(.94rem,3.6vw,1.09rem); }
  .social-buttons { gap: 11px; }
  .social-button { min-height: 49px; }
  .video-card a { box-shadow: 0 12px 30px rgba(0,0,0,.33); }
  .contact-card { gap: 20px; }
  .contact-mail-button { max-width: 100%; }
}
@media (max-width: 390px) {
  :root { --page-gutter: 14px; }
  .social-buttons { gap: 9px; }
  .social-button strong { font-size: .81rem; }
  .contact-mail-button #contactEmailValue { font-size: clamp(.93rem, 4.5vw, 1.14rem); }
}
@media (hover: none), (pointer: coarse) {
  .social-button .btn-shine { opacity: .09; }
  .social-button { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .video-channel-badge { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .social-button, .video-card a, .video-controls button, .contact-mail-button { transition: none !important; }
  .social-button:hover, .video-card a:hover { transform: none !important; }
}


/* ================================================================
   MBJAWN STUDIO — design system v2
   Acabamento global. Reaproveita o visual do canal e evita novos assets.
   ================================================================ */
:root {
  --studio-highlight: #92ccff;
  --studio-border: rgba(155,207,255,.21);
  --studio-ring: 0 0 0 1px rgba(128,198,255,.19), 0 0 35px rgba(22,109,239,.15);
  --studio-ease: cubic-bezier(.21,.8,.25,1);
}
html { scroll-padding-top: 28px; }
body { background: #02050b; }
::selection { background: rgba(48,142,255,.47); color: white; }

/* Profundidade discreta que acompanha a identidade noturna */
.vignette {
  background:
    linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.16) 48%, rgba(0,0,0,.60)),
    linear-gradient(180deg, rgba(0,0,0,.32), transparent 33%, rgba(0,0,0,.85)),
    radial-gradient(ellipse 70% 68% at 50% 39%, transparent 27%, rgba(0,0,0,.53));
}
.site-shell { padding-bottom: clamp(44px, 5vw, 74px); }
.hero-grid { column-gap: clamp(32px, 6vw, 78px); }
.hero-left { gap: clamp(18px, 2.8vw, 28px); }
.hero-description { color: #ecf4ff; font-weight: 450; }

/* Foto: tratamento de galeria com brilho de borda que não pula no hover */
.profile-card {
  transition: box-shadow .4s var(--studio-ease), border-color .35s ease, filter .35s ease;
  box-shadow: 0 28px 65px rgba(0,0,0,.54), 0 0 0 1px rgba(116,194,255,.10), 0 0 68px rgba(22,113,255,.12);
}
.profile-card:hover {
  border-color: rgba(158,220,255,.52);
  box-shadow: 0 34px 75px rgba(0,0,0,.56), 0 0 0 1px rgba(152,208,255,.15), 0 0 58px rgba(33,136,255,.23);
}
.avatar-frame img { transition: filter .55s ease, transform .55s var(--studio-ease); }
.profile-card:hover .avatar-frame img { filter: saturate(1.06) contrast(1.03); }

/* Visual consistente nos subtítulos e headings */
.section-kicker { font-family: var(--font-jawn); font-size: clamp(1.1rem, 1.7vw, 1.38rem); letter-spacing: .115em; }
.section-heading h2, .contact-copy h2, .videos-topline h2 {
  text-shadow: 0 6px 24px rgba(0,0,0,.6), 0 0 38px rgba(63,141,255,.08);
}
.videos-topline h2 { font-family: var(--font-jawn); letter-spacing: .018em; }
.videos-topline { border-image: linear-gradient(90deg, rgba(114,188,255,.32), rgba(114,188,255,.03)) 1; }

/* Cartões de redes com acabamento único, respeitando as cores existentes */
.social-item { perspective: 800px; }
.social-button {
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  transform: translateZ(0);
  transition: border-color .23s ease, box-shadow .3s var(--studio-ease), filter .23s ease, transform .3s var(--studio-ease);
}
.social-button:hover, .social-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(0,0,0,.43), 0 0 22px rgba(70,149,255,.13), inset 0 1px 0 rgba(255,255,255,.23);
}
.social-button:active { transform: translateY(0) scale(.992); }
.social-button .social-icon { transition: transform .3s var(--studio-ease); }
.social-button:hover .social-icon { transform: scale(1.07); }
.social-button strong { letter-spacing: .025em; }

/* Carrossel: cards legíveis e elegantes mesmo sem thumbnails */
.videos-section { min-width: 0; }
.video-card a {
  border-radius: 21px;
  overflow: hidden;
  outline-offset: 3px;
}
.video-card a:hover, .video-card a:focus-visible { transform: translateY(-4px); }
.video-card .thumb { isolation: isolate; }
.video-card .thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(170,226,255,.09), transparent 42%);
}
.video-card .thumb.thumb-missing {
  background: radial-gradient(ellipse at 65% 35%, #24508d, #060e21 68%);
}
.video-channel-badge { letter-spacing: .06em; }
.video-info strong { line-height: 1.32; }
.video-rail { overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
.video-card { scroll-snap-align: start; }
.video-controls button:not(:disabled):active { transform: scale(.93); }
.video-error-state {
  min-width: min(100%, 490px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--studio-border);
  border-radius: 18px;
  background: linear-gradient(130deg,rgba(11,25,47,.87),rgba(3,8,19,.92));
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
}
.video-error-state strong { font-size: 1.02rem; color: #f3f8ff; }
.video-error-state p { color: #aebdd1; font-size: .9rem; }
.video-error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px; }
.video-retry-button,.video-external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 10px;
  padding: 10px 14px;
  font: 600 .88rem Inter,system-ui,sans-serif;
  cursor: pointer;
  border: 1px solid rgba(137,197,255,.27);
  background: rgba(43,115,210,.19);
  transition: background .2s ease,border-color .2s ease;
}
.video-external-link { background: rgba(255,255,255,.06); }
.video-retry-button:hover,.video-external-link:hover { background: rgba(65,138,255,.30); border-color: rgba(164,217,255,.66); }

/* Contato: mesmo tamanho, mas call-to-action bem mais evidente */
.contact-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(19px, 2vw, 27px);
}
.contact-card::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: radial-gradient(ellipse 40% 80% at 95% 50%, rgba(32,119,253,.12), transparent 92%);
}
.contact-copy p:not(.section-kicker) { color: rgba(231,242,255,.80); }
.contact-mail-button { overflow: hidden; isolation: isolate; }
.contact-mail-button:focus-visible { outline: 2px solid #92ccff; outline-offset: 3px; }
.contact-mail-button #contactEmailLabel { color: #a9d9ff; }
.contact-mail-button.is-copied { background: linear-gradient(130deg, rgba(19,73,125,.75), rgba(4,20,43,.90)); }
.footer { color: rgba(219,236,255,.61); letter-spacing: .045em; }
.back-to-top { box-shadow: 0 12px 28px rgba(0,0,0,.43), var(--studio-ring); }

/* Somente animações suaves em dispositivos que realmente suportam hover */
@media (max-width: 980px) {
  .hero-grid { padding-bottom: clamp(25px, 5vw, 48px); }
  .hero-right { width: 100%; }
}
@media (max-width: 760px) {
  .site-shell { padding-top: clamp(24px, 5vw, 44px); }
  .hero-grid { gap: clamp(22px, 5vw, 32px); }
  .hero-description { line-height: 1.58; }
  .social-button { border-radius: 15px; }
  .video-card a { border-radius: 17px; }
  .video-rail { scroll-snap-type: x mandatory; }
  .contact-card { padding: 22px 19px; }
  .contact-mail-button { min-height: 60px; }
}
@media (max-width: 480px) {
  .video-rail { grid-auto-columns: minmax(235px, 86vw); }
  .video-error-state { min-width: 0; width: 100%; }
  .video-error-actions > * { flex: 1; }
  .video-info strong { font-size: .94rem; }
  .footer { font-size: .72rem; }
}
@media (hover: none), (pointer: coarse) {
  .social-button:hover, .video-card a:hover { transform: none; }
  .social-button:active { filter: brightness(1.10); }
  .profile-card:hover .avatar-frame img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .social-button, .video-card a, .profile-card, .avatar-frame img,
  .video-retry-button, .video-external-link { transition: none !important; }
  .social-button:hover, .video-card a:hover { transform: none !important; }
}

/* Fotos das redes: não revelar o placeholder, somente a imagem confirmada. */
.social-profile-photo[hidden] { display: none !important; }


/* Otimização universal: mantém a identidade visual sem filtros de custo alto. */
.bg-video { will-change: auto !important; transition: none !important; transform: none !important; }
.bg-video-stack { background: #000 url('assets/fundo-site-poster.jpg') center center / cover no-repeat; }
.bg-video:not(.is-loaded) { opacity: 0 !important; }
.bg-video.is-loaded { opacity: 1 !important; }
.corner-blur { display: none !important; }
.noise { opacity: .025; }

/* Modo leve para prévia local / máquinas com menos recursos. */
.performance-lite, .performance-lite * { scroll-behavior: auto !important; }
.performance-lite .cursor-dot,
.performance-lite .cursor-ring,
.performance-lite .cursor-trail,
.performance-lite .light-follow,
.performance-lite .noise,
.performance-lite .scanlines,
.performance-lite .corner-blur { display: none !important; }
.performance-lite .profile-card,
.performance-lite .social-button,
.performance-lite .video-card,
.performance-lite .contact-card,
.performance-lite .glass-panel,
.performance-lite .video-channel-badge,
.performance-lite .social-item,
.performance-lite .topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.performance-lite .avatar-float,
.performance-lite .avatar-frame,
.performance-lite .hero-title,
.performance-lite .profile-card,
.performance-lite .social-button,
.performance-lite .video-card,
.performance-lite .social-profile-photo,
.performance-lite .contact-mail-button { animation: none !important; }
.performance-lite .profile-card:hover,
.performance-lite .video-card:hover,
.performance-lite .social-button:hover,
.performance-lite .avatar-frame:hover { transform: none !important; }
.performance-lite .profile-card::before,
.performance-lite .social-button::before,
.performance-lite .social-button::after { filter: none !important; }
.performance-lite [data-animate] { transition-duration: .18s !important; }
.performance-lite .vignette { background: linear-gradient(180deg, rgba(0,0,0,.23), rgba(0,0,0,.55)); }
@media (max-width: 760px) {
  .corner-blur, .noise, .scanlines, .light-follow { display: none !important; }
  .bg-video { filter: none !important; }
}


/* Qualidade adaptativa: os três níveis compartilham o mesmo layout. */
.quality-control {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 120;
  padding: 9px 13px;
  min-height: 38px;
  border: 1px solid rgba(130,190,255,.33);
  border-radius: 99px;
  background: rgba(2,9,25,.88);
  color: #d8edff;
  font: 600 12px/1.25 Inter, sans-serif;
  letter-spacing: .015em;
  cursor: pointer;
  box-shadow: 0 5px 24px rgba(0,0,0,.32);
  -webkit-tap-highlight-color: transparent;
}
.quality-control:hover, .quality-control:focus-visible {
  border-color: rgba(146,211,255,.88);
  background: #10203a;
}
.performance-balanced .cursor-dot,
.performance-balanced .cursor-ring,
.performance-balanced .cursor-trail,
.performance-balanced .light-follow,
.performance-balanced .noise,
.performance-balanced .scanlines,
.performance-balanced .corner-blur { display: none !important; }
.performance-balanced .profile-card,
.performance-balanced .social-button,
.performance-balanced .video-card,
.performance-balanced .contact-card,
.performance-balanced .glass-panel,
.performance-balanced .social-item { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.performance-balanced .avatar-float,
.performance-balanced .social-profile-photo { animation: none !important; }
.performance-balanced .profile-card::before,
.performance-balanced .social-button::after { filter: none !important; }
.performance-balanced .bg-video { filter: none !important; }
.performance-lite .bg-video-stack { background: #000 url('assets/fundo-site-poster.jpg') center / cover no-repeat; }
.performance-lite .bg-video { display: none !important; }
.performance-lite .vignette { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.performance-lite .social-button, .performance-lite .video-card,
.performance-balanced .social-button, .performance-balanced .video-card { will-change: auto !important; }
@media (max-width: 760px) {
  .quality-control { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); font-size: 11px; padding: 8px 10px; }
}


/* Performance Edition 6: refinamentos unificados e responsivos */
:root { color-scheme: dark; }
.social-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.social-item { min-width: 0; }
.social-item > .social-button { width: 100%; min-width: 0; min-height: 56px; }
.social-profile-photo { pointer-events: none; }
.social-item:has(.social-profile-photo[hidden]) .social-profile-photo { display: none; }
.video-rail { scrollbar-width: thin; scrollbar-color: rgba(89,168,245,.35) transparent; }
.video-card { contain: layout style; }
.video-card .thumb img { object-fit: cover; transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .performance-high .video-card:hover .thumb img { transform: scale(1.035); }
}
@media (max-width: 1050px) {
  .social-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .hero-left, .hero-right { width: 100%; min-width: 0; }
  .hero-left { text-align: center; }
  .social-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .social-item > .social-button { min-height: 54px; }
  .video-rail { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .video-card { scroll-snap-align: start; }
  .contact-card { gap: 20px; }
}
@media (max-width: 360px) {
  .social-buttons { grid-template-columns: minmax(0,1fr); }
  .social-item > .social-button { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-card .thumb img { transition: none !important; }
}

/* Carrossel infinito: reposicionamento imperceptível, sem scroll smooth/snap na troca de cópia. */
.video-rail.is-infinite { overscroll-behavior-x: contain; }
.video-rail.is-loop-reset, .video-rail.is-loop-reset * { scroll-behavior: auto !important; scroll-snap-type: none !important; }
.video-rail.is-infinite .video-card[data-loop-clone] { scroll-snap-align: start; }

/* Arrasto ativo até soltar o mouse, mesmo fora do carrossel. */
body.is-video-dragging,
body.is-video-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
body.is-video-dragging .video-rail {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}


/* ── Foto JAWN · Spotlight interativo (sem efeitos pesados no modo econômico) ── */
.avatar-frame { --light-x: 50%; --light-y: 45%; }
.avatar-spotlight {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 140px at var(--light-x) var(--light-y), rgba(192,231,255,.24), rgba(52,153,255,.10) 35%, transparent 72%);
  mix-blend-mode: screen;
  transition: opacity .35s ease;
}
/* Evita a passagem brusca da faixa anterior; o reflexo agora acompanha o cursor. */
.profile-card .avatar-frame::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  .performance-high .profile-card:hover .avatar-frame,
  body:not(.performance-lite):not(.performance-balanced) .profile-card:hover .avatar-frame {
    transform: translate3d(0, -5px, 14px) scale(1.015);
    border-color: rgba(163,224,255,.80);
    box-shadow: 0 28px 54px rgba(0,0,0,.50), 0 0 0 1px rgba(109,203,255,.34), 0 0 35px rgba(34,145,255,.28);
  }
  .performance-high .profile-card:hover .avatar-spotlight,
  body:not(.performance-lite):not(.performance-balanced) .profile-card:hover .avatar-spotlight { opacity: 1; }
  .performance-high .profile-card:hover .avatar-frame img,
  body:not(.performance-lite):not(.performance-balanced) .profile-card:hover .avatar-frame img {
    transform: scale(1.065);
    filter: saturate(1.075) contrast(1.04) brightness(1.025);
  }
  /* Modo equilibrado mantém apenas uma borda suave, sem reflexo de mouse. */
  .performance-balanced .profile-card:hover .avatar-frame {
    transform: translateZ(14px);
    box-shadow: 0 16px 34px rgba(0,0,0,.35), 0 0 16px rgba(45,143,255,.13);
  }
}
.performance-lite .avatar-spotlight, .performance-balanced .avatar-spotlight { display: none !important; }
.performance-lite .profile-card:hover .avatar-frame, .performance-lite .profile-card:hover .avatar-frame img { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .avatar-spotlight { display:none !important; }
  .profile-card:hover .avatar-frame, .profile-card:hover .avatar-frame img { transition: none !important; transform: none !important; }
}


/* Original experience.css */
/* MBJAWN — camada de experiência. Mantém o design-base e respeita os três perfis de hardware. */
:root {
  --experience-ease: cubic-bezier(.16,1,.3,1);
  --skeleton-base: #0e1b31;
  --skeleton-highlight: #253d5e;
}
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* Entrada em sequência: sem bloquear a página ou esperar o YouTube. */
@media (prefers-reduced-motion: no-preference) {
  .performance-high .hero-left .profile-card.is-visible { animation: intro-photo .8s var(--experience-ease) both; }
  .performance-high .hero-copy.is-visible { animation: intro-copy .75s var(--experience-ease) both; animation-delay: .12s; }
  .performance-high .links-section.is-visible { animation: intro-links .76s var(--experience-ease) both; animation-delay: .21s; }
  .performance-high .hero-title { animation: intro-title-glow 1.2s ease-out both; }
  .performance-balanced .hero-left .profile-card.is-visible,
  .performance-balanced .hero-copy.is-visible,
  .performance-balanced .links-section.is-visible { animation: intro-balanced .38s ease-out both; }
}
@keyframes intro-photo { from { opacity:0; filter:brightness(.6); translate:0 22px; } to { opacity:1; filter:brightness(1); translate:0 0; } }
@keyframes intro-copy { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
@keyframes intro-links { from { opacity:0; translate:14px 10px; } to { opacity:1; translate:0 0; } }
@keyframes intro-balanced { from {opacity:0} to {opacity:1} }
@keyframes intro-title-glow { 0% {text-shadow:0 8px 24px rgba(0,0,0,.5),0 0 60px rgba(23,137,255,.38)} 100% {text-shadow:0 6px 2px rgba(0,0,0,.36),0 17px 30px rgba(0,0,0,.48),0 0 58px rgba(40,132,255,.22)} }

/* Efeitos por rede, apenas em dispositivos com mouse. Não alteram dimensões. */
@media (hover:hover) and (pointer:fine) {
  .performance-high .social-button {
    --social-halo: rgba(69,145,255,.26);
    transition: transform .3s var(--experience-ease), box-shadow .3s ease, filter .2s ease, border-color .3s ease;
  }
  .performance-high .social-button.youtube { --social-halo: rgba(255,64,76,.34); }
  .performance-high .social-button.tiktok { --social-halo: rgba(255,255,255,.23); }
  .performance-high .social-button.instagram { --social-halo: rgba(243,83,167,.34); }
  .performance-high .social-button.discord { --social-halo: rgba(130,123,255,.36); }
  .performance-high .social-button.kick { --social-halo: rgba(95,245,102,.27); }
  .performance-high .social-button:hover,
  .performance-high .social-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0,0,0,.4),0 0 25px var(--social-halo),inset 0 1px 0 rgba(255,255,255,.25);
  }
  .performance-high .social-button:hover .social-icon,
  .performance-high .social-button:focus-visible .social-icon { transform: translateY(-1px) scale(1.09); }
  .performance-balanced .social-button:hover { filter:brightness(1.08); }
}
.social-button:focus-visible, .video-controls button:focus-visible,
.video-card a:focus-visible, .quality-control:focus-visible, .contact-mail-button:focus-visible {
  outline: 2px solid #b0e3ff !important;
  outline-offset: 3px;
}
.social-button strong { text-wrap:balance; }

/* Skeletons ocupam o mesmo espaço aproximado dos cards, sem saltos no layout. */
.video-rail { min-height: 250px; }
.video-skeleton-rail {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(12px,1.8vw,22px);
  width: 100%;
  grid-column: 1 / -1;
  min-width: 0;
  align-items: start;
}
.video-skeleton-card {
  min-width:0;
  background:linear-gradient(145deg,rgba(10,24,44,.82),rgba(3,9,20,.9));
  border:1px solid rgba(150,204,255,.14);
  border-radius:18px;
  padding:8px 8px 14px;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.video-skeleton-thumb { width:100%; aspect-ratio:16/9; border-radius:12px; background:var(--skeleton-base); }
.video-skeleton-line { height:11px; border-radius:5px; background:var(--skeleton-base); margin:15px 6px 0; }
.video-skeleton-line.short { width:55%; height:9px; margin-top:8px; opacity:.75; }
@media (prefers-reduced-motion:no-preference) {
  .performance-high .video-skeleton-thumb, .performance-high .video-skeleton-line,
  .performance-balanced .video-skeleton-thumb, .performance-balanced .video-skeleton-line {
    background:linear-gradient(105deg,var(--skeleton-base) 12%,var(--skeleton-highlight) 46%,var(--skeleton-base) 80%);
    background-size:220% 100%;
    animation:skeleton-sweep 1.75s linear infinite;
  }
}
@keyframes skeleton-sweep {to {background-position-x:-220%}}
.video-drag-hint { font-size:.75rem; font-weight:600; letter-spacing:.055em; color:rgba(177,216,255,.7); text-align:right; margin:0 4px 10px; }
.video-rail.is-coasting, .video-rail.is-dragging { scroll-snap-type:none!important; scroll-behavior:auto!important; }
.video-rail.is-coasting .video-card a { pointer-events:none; }

/* Conteúdo fora da primeira tela: navegação mais leve, sem afetar SEO. */
@supports (content-visibility:auto) {
  .contact-section { content-visibility:auto; contain-intrinsic-size:auto 340px; }
}

/* Toque, leitura e largura útil no celular. */
@media(max-width:760px) {
  .site-shell { width:calc(100% - 28px); }
  .hero-grid { gap:clamp(24px,6vw,34px); }
  .hero-left { gap:clamp(14px,3vw,22px); }
  .hero-description { max-width:42ch; font-size:clamp(.92rem,3.7vw,1.04rem); line-height:1.57; }
  .social-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .social-button { min-height:54px; }
  .video-drag-hint { text-align:left; font-size:.72rem; }
  .video-rail { min-height:230px; overscroll-behavior-inline:contain; touch-action:pan-x pan-y; }
  .video-skeleton-rail { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .video-skeleton-card:nth-of-type(3) { display:none; }
  .contact-section { scroll-margin-top:15px; }
  .contact-mail-button { min-height:62px; }
}
@media(max-width:420px) {
  .site-shell { width:calc(100% - 24px); }
  .social-buttons { gap:8px; }
  .social-button strong { font-size:clamp(.79rem,3.25vw,.92rem); }
  .video-skeleton-rail { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .video-skeleton-card:nth-of-type(3) { display:none; }
}
@media(max-width:360px) {
  .social-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .social-button { padding-inline:7px; }
}
.performance-lite .video-skeleton-thumb, .performance-lite .video-skeleton-line { animation:none!important; background:var(--skeleton-base)!important; }
.performance-lite .video-drag-hint { opacity:.8; }
@media(prefers-reduced-motion:reduce) {
  .hero-left .profile-card, .hero-copy, .links-section, .hero-title {animation:none!important;}
  .video-skeleton-thumb,.video-skeleton-line { animation:none!important; }
  .social-button, .video-card a, .social-icon { transition:none!important; }
  .social-button:hover,.social-button:focus-visible { transform:none!important; }
}


/* Original jawn-typography.css */
/* Fonte ORIGINAL Jawn_fonteOficial-Regular.ttf, incluída no pacote.
   Aplicada aos títulos e aos controles de destaque; textos longos permanecem legíveis. */
:root {
  --font-jawn-display: "Jawn Oficial Site", "Bebas Neue", sans-serif;
}

/* Textos principais: seletores específicos para impedir substituições de estilo. */
#hero-title,
.hero-title,
#links-title,
#videos-title,
#contact-title,
.section-heading h2,
.videos-topline h2,
.contact-copy h2,
.section-kicker,
.social-button strong,
.contact-mail-button small,
.contact-mail-button strong,
#contactEmailLabel,
#contactEmailValue,
.performance-toggle,
.performance-option,
.video-controls button,
.video-retry-button,
.back-to-top {
  font-family: "Jawn Oficial Site", "Bebas Neue", sans-serif !important;
  font-synthesis: none;
  font-weight: 400 !important;
}

/* Mantém textos de explicação em fonte de leitura. */
.hero-description,
.video-info strong,
.video-info small,
.contact-copy > p:not(.section-kicker) {
  font-family: Inter, system-ui, sans-serif;
}

#links-title, #videos-title, #contact-title,
.section-heading h2, .videos-topline h2, .contact-copy h2 {
  letter-spacing: .025em;
  line-height: 1.12;
}
.social-button strong, #contactEmailValue { letter-spacing: .055em; }
.section-kicker { letter-spacing: .12em; }
@media (max-width: 760px) {
  #videos-title { font-size: clamp(1.75rem, 6.5vw, 2.3rem); }
  .social-button strong { letter-spacing: .02em; }
}


/* Original creator.css */
/* MBJAWN — Creator Edition. Uma identidade própria, menos corporativa. */
:root { --creator-ink:#080e19; --creator-blue:#398bfb; --creator-light:#e8f1ff; }
html {scroll-padding-top:24px}
body {background:#05080f}
.bg-video-stack {opacity:.32}
.noise {opacity:.035}
.scanlines,.corner-blur {display:none !important}
.vignette {background:linear-gradient(90deg,rgba(4,8,18,.93),rgba(3,8,19,.64) 56%,rgba(3,8,19,.84)),linear-gradient(0deg,#05080f 0%,transparent 36%)}
.site-shell {width:min(1180px,calc(100% - 60px));padding-top:40px}
.creator-topline {display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:44px;font-family:'Space Grotesk',Inter,sans-serif;font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:#a0b5d1}
.creator-brand {display:flex;align-items:center;gap:11px;font-weight:800;color:#eaf2ff}
.creator-brand .creator-square {width:12px;height:12px;background:#4791f7;border:2px solid #9dc6ff;box-shadow:3px 3px 0 #153461;transform:rotate(-8deg)}
.creator-topline a {border-bottom:1px solid #5c83c0;padding-bottom:4px;color:#d6e7ff;transition:color .2s}
.creator-topline a:hover {color:#fff}
.hero-grid {min-height:0;align-items:start;grid-template-columns:minmax(260px,.88fr) minmax(0,1.25fr);gap:clamp(32px,6vw,88px);padding:0 0 32px}
.hero-left {gap:0;align-items:stretch;padding:0 0 10px}
.profile-card {width:min(100%,360px);padding:8px;border-radius:18px;margin:0 auto;transform:rotate(-2deg);background:#111c30;border:1px solid #6682aa;box-shadow:13px 14px 0 rgba(17,47,93,.75),0 28px 45px rgba(0,0,0,.45);backdrop-filter:none}
.profile-card[data-animate].is-visible {animation:none}
.profile-card:after {display:none}
.avatar-frame {border-radius:12px}
.profile-card:hover,.profile-card:focus-within {transform:rotate(0deg) translateY(-5px);box-shadow:7px 8px 0 rgba(17,47,93,.8),0 32px 50px rgba(0,0,0,.4)}
.creator-photo-note {position:absolute;right:-15px;bottom:19px;z-index:6;transform:rotate(5deg);padding:9px 15px;background:#dcebff;color:#11213c;font:800 .77rem 'Space Grotesk',Inter,sans-serif;box-shadow:5px 5px 0 #1556a3;border-radius:3px;letter-spacing:.03em}
.hero-copy {width:100%;margin-top:32px;text-align:left}
.hero-title {width:auto;margin:0;text-align:left;font-size:clamp(6rem,10vw,10rem);letter-spacing:.025em;line-height:.83;filter:none;text-shadow:6px 6px 0 #173d78,0 20px 28px rgba(0,0,0,.6)}
.hero-copy[data-animate].is-visible .hero-title {animation:none}
.hero-title::before,.hero-title::after {display:none}
.creator-hello {font:700 .83rem 'Space Grotesk',Inter,sans-serif;letter-spacing:.06em;color:#79b3ff;text-align:left;margin:5px 0 16px;text-transform:uppercase}
.hero-description {margin:19px 0 0;max-width:360px;padding:0;text-align:left;color:#d3deed;font-size:clamp(.98rem,1.6vw,1.12rem);line-height:1.8}
.creator-doodle {font:700 .81rem 'Space Grotesk',Inter,sans-serif;margin-top:18px;color:#88acd7;transform:rotate(-2deg);width:fit-content}
.hero-right {padding-top:16px;gap:35px}
.links-section {position:relative}
.section-heading.compact {margin-bottom:16px}
.section-kicker {display:inline-flex;align-items:center;gap:10px;font-size:1.15rem !important;color:#9fc4f6;letter-spacing:.11em}
.section-kicker::before {content:'//';font:700 .83rem 'Space Grotesk',sans-serif;color:#4a8de5}
.section-heading.compact h2 {display:block;margin-top:8px;font:500 clamp(1.1rem,2vw,1.35rem) 'Space Grotesk',Inter,sans-serif;color:#d3dfed;letter-spacing:-.03em}
.social-buttons {gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
.social-item {min-width:0}
.social-button {border-radius:12px !important;min-height:62px;box-shadow:5px 6px 0 rgba(5,12,26,.85),inset 0 1px 0 rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.2);backdrop-filter:none;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.social-button:hover,.social-button:focus-visible {transform:translateY(-3px) rotate(-.7deg) !important;box-shadow:5px 10px 0 rgba(5,12,26,.9),0 15px 30px rgba(10,38,84,.22);filter:brightness(1.11)}
.social-button strong {font-size:clamp(1.1rem,1.6vw,1.38rem);line-height:1.1}
.social-profile-photo {z-index:5}
.videos-section {border-top:1px dashed rgba(146,182,225,.38);padding-top:26px;margin-top:2px}
.videos-topline {margin-bottom:9px}
#videos-title {font-size:clamp(2.5rem,4.5vw,4.2rem);line-height:1;letter-spacing:.02em}
.video-drag-hint {font-family:'Space Grotesk',Inter,sans-serif !important;color:#94a6c0;letter-spacing:.02em;font-size:.8rem}
.video-rail {grid-auto-columns:clamp(235px,30vw,315px);gap:14px;padding:7px 6px 18px}
.video-card a {border-radius:13px;min-height:255px;background:#101725;box-shadow:5px 7px 0 #0a2852;border:1px solid #3f5573}
.video-card a:hover,.video-card a:focus-visible {transform:translateY(-4px) rotate(-.4deg);border-color:#83b6ff;box-shadow:6px 12px 0 #123e79}
.video-card .thumb {aspect-ratio:16/9;min-height:0}
.video-info {background:#101725}
.video-controls button {border-radius:9px !important}
.contact-section {padding-top:clamp(30px,4vw,55px)}
.contact-card {border:1px solid #42608c;border-radius:17px;background:linear-gradient(115deg,rgba(14,28,50,.98),rgba(6,16,32,.96));box-shadow:8px 10px 0 #102345;padding:clamp(24px,4vw,42px)}
.contact-card::after {display:none}
.contact-card h2 {font-size:clamp(2.5rem,5vw,4.5rem);line-height:.95}
.contact-card p:not(.section-kicker) {color:#b7c7dc}
.contact-mail-button {border-radius:11px !important}
.footer {border-top:1px solid rgba(126,161,209,.24);padding-top:18px;font-family:'Space Grotesk',Inter,sans-serif;color:#8c9cb7}
.creator-signoff {font-size:.72rem;color:#739ed3;letter-spacing:.04em}
@media (min-width:1050px) {.hero-grid {grid-template-columns:minmax(260px,390px) minmax(0,1fr)} .hero-right{max-width:690px}}
@media (max-width:800px) {
 .site-shell {width:min(680px,calc(100% - 34px));padding-top:23px}
 .creator-topline {margin-bottom:28px;font-size:.67rem}
 .hero-grid {display:flex;flex-direction:column;gap:20px;padding-bottom:25px}
 .hero-left {width:100%;align-items:center}
 .profile-card {width:clamp(210px,58vw,310px)}
 .hero-copy {max-width:550px;margin-top:32px;text-align:center}
 .hero-title {text-align:center;font-size:clamp(6rem,20vw,9rem)}
 .hero-description {margin:12px auto 0;text-align:center;max-width:500px}
 .creator-hello,.creator-doodle {text-align:center;margin-left:auto;margin-right:auto}
 .hero-right {width:100%;padding-top:10px;gap:25px}
 .social-buttons {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .video-rail {grid-auto-columns:minmax(250px,75vw)}
 .contact-card {grid-template-columns:1fr;gap:24px}
}
@media (max-width:420px) {
 .creator-topline {font-size:.56rem;letter-spacing:.055em}
 .site-shell {width:calc(100% - 28px)}
 .social-button {min-height:57px}
 .social-button strong {font-size:1.09rem}
 .profile-card {width:230px}
 .creator-photo-note {right:-9px;font-size:.67rem}
 .video-rail {grid-auto-columns:minmax(230px,78vw)}
}
@media (prefers-reduced-motion:reduce) {
 .profile-card,.social-button,.video-card a {transition:none!important}
}
/* Os efeitos econômicos sempre prevalecem. */
body[data-quality="economy"] .creator-photo-note {box-shadow:2px 2px 0 #1556a3}

/* Remove entrada pesada apenas nos elementos editoriais, mantendo os reveals existentes. */
@media (max-width:800px){.hero-left,.hero-right{min-width:0}}


/* Controles flutuantes: coluna organizada, sem sobreposição ou movimento magnético. */
.quality-control {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 120;
  min-width: 118px;
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: 1px solid rgba(111, 176, 251, .5);
  background: rgba(8, 19, 38, .95);
  color: #e5f1ff;
  box-shadow: 3px 4px 0 rgba(5, 18, 39, .95), 0 12px 26px rgba(0,0,0,.25);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.quality-control:hover, .quality-control:focus-visible {
  background: #142b4d;
  border-color: #8ec4ff;
  box-shadow: 3px 4px 0 #0c2b57, 0 0 16px rgba(62, 141, 243, .2);
}
.back-to-top,
.back-to-top.is-visible {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(83px, calc(env(safe-area-inset-bottom) + 83px));
  width: 43px;
  height: 43px;
  min-height: 43px;
  border-radius: 13px;
  background: rgba(8, 19, 38, .95);
  border-color: rgba(111,176,251,.5);
  box-shadow: 3px 4px 0 rgba(5,18,39,.95), 0 12px 26px rgba(0,0,0,.25);
}
.back-to-top span {font-size: 1.35rem;}
.back-to-top.is-visible { transform: translate3d(0, 0, 0); }
.back-to-top:hover, .back-to-top:focus-visible {
  background: #142b4d;
  box-shadow: 3px 4px 0 #0c2b57, 0 0 16px rgba(62,141,243,.2);
  transform: translate3d(0, -2px, 0);
}
@media (max-width: 600px) {
  .quality-control {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    min-width: 108px;
    height: 36px;
    font-size: 11px;
    padding: 0 10px;
  }
  .back-to-top, .back-to-top.is-visible {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(68px, calc(env(safe-area-inset-bottom) + 68px));
    width: 40px;
    height: 40px;
    min-height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quality-control, .back-to-top {transition: none !important;}
}


/* Original personal.css */
/* JAWN / personal website — mais pessoal, menos template.
   Original: referências gerais de páginas de creators, sem copiar interfaces de terceiros. */
:root {
  --personal-paper: #d7e7ff;
  --personal-blue: #67a7ff;
  --personal-navy: #0c1c33;
  --personal-line: rgba(146, 185, 237, .24);
  --personal-font: 'Jawn Oficial Site', 'Bebas Neue', 'Space Grotesk', sans-serif;
}

/* A camada do background continua visível, porém com contraste adequado. */
body {
  background: #040912;
}
.site-shell { padding-top: clamp(18px, 3.3vw, 38px); }
.bg-video-stack { opacity: .46; }
.vignette {
  background:
    linear-gradient(90deg, rgba(3,7,15,.87), rgba(3,8,20,.54) 47%, rgba(3,7,15,.78)),
    linear-gradient(0deg, #040912 0%, transparent 38%, rgba(3,7,15,.34));
}

/* Navegação que parece feita pelo próprio creator. */
.creator-topline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(145px,1fr) auto minmax(145px,1fr);
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin-bottom: 39px;
  padding: 10px 0 14px;
  border-bottom: 1px dashed var(--personal-line);
  color: #cbdefa;
}
.creator-brand {
  justify-self: start;
  font-family: var(--personal-font);
  font-size: clamp(1.22rem, 1.75vw, 1.55rem);
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.creator-brand .creator-square {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  transform: rotate(-9deg);
  border: 2px solid #d9e9ff;
  box-shadow: 3px 3px 0 #153461;
}
.creator-brand-dot {color:#64a8ff}
.creator-quicknav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px,2.3vw,30px);
  min-width: 0;
}
.creator-quicknav a {
  position: relative;
  padding: 9px 2px;
  font-size: .74rem;
  font-weight: 700;
  color: #cbd9f0;
  letter-spacing: .055em;
  text-transform: lowercase;
  white-space: nowrap;
  transition: color .2s ease;
}
.creator-quicknav a::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; bottom: 4px;
  height: 1px;
  background: #86bdff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.creator-quicknav a:hover,
.creator-quicknav a:focus-visible { color: #fff; }
.creator-quicknav a:hover::after,
.creator-quicknav a:focus-visible::after { transform: scaleX(1); }
.creator-topline-meta {
  justify-self: end;
  text-align: right;
  color: #90aed7;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: lowercase;
}
.creator-topline-meta span {color:#8ac3ff;font-size:1rem;vertical-align:middle}

/* Foto: imperfeição intencional, moldura de arquivo pessoal. */
.hero-grid { gap: clamp(32px, 5.5vw, 74px); }
.hero-left { position: relative; }
.profile-card {
  position: relative;
  width: min(100%, 358px);
  transform: rotate(-2.5deg);
  border: 1px solid #8099c0;
  border-radius: 14px;
  background: linear-gradient(145deg, #243852, #09182c);
  padding: 10px 10px 22px;
  box-shadow: 9px 11px 0 #132e58, 0 24px 47px rgba(0, 0, 0, .48);
  isolation: isolate;
}
.profile-card:hover,.profile-card:focus-within {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 6px 7px 0 #173a6c, 0 29px 48px rgba(0, 0, 0, .52);
}
.profile-card::before {opacity: .18}
.profile-card .avatar-frame {border-radius: 9px}
.creator-photo-note {
  right: -20px;
  bottom: 34px;
  z-index: 8;
  background: #dceaff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 2px;
  color: #172c4e;
  transform: rotate(7deg);
  padding: 9px 14px;
  box-shadow: 4px 5px 0 #3565aa;
  font-size: .79rem;
}
.creator-photo-count {
  position: absolute;
  bottom: 4px; left: 13px;
  z-index: 6;
  font: 600 .58rem/1.2 'Space Grotesk', Inter, sans-serif;
  letter-spacing: .15em;
  color: #8aaacd;
}

/* Introdução pessoal / zine digital. */
.hero-copy {margin-top: 28px}
.creator-hello {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #a9ccfb;
  font-size: .72rem;
  letter-spacing: .075em;
  margin-bottom: 12px;
}
.creator-handstar {color:#8fc1ff;font-size:1.35rem;line-height:1}
.hero-title {
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(6.2rem, 12.5vw, 11rem);
  line-height: .85;
  letter-spacing: .01em;
  text-shadow: 6px 7px 0 #16427a, 0 18px 30px rgba(0,0,0,.52);
}
.hero-title::before,.hero-title::after {display:none}
.creator-hero-subtitle {
  display: inline-block;
  margin: 14px 0 3px;
  color: #dbeaff;
  font: 700 .72rem/1.25 'Space Grotesk', Inter, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-description {
  max-width: 368px;
  margin-top: 12px;
  font-size: clamp(.96rem, 1.6vw, 1.08rem);
  line-height: 1.7;
  color: #d4e0f2;
}
.creator-doodle {
  margin-top: 17px;
  padding: 7px 10px;
  font: 700 .75rem/1.45 'Space Grotesk',Inter,sans-serif;
  color: #b6d3fc;
  letter-spacing: .01em;
  border-left: 2px solid #6ba6f3;
  background: rgba(23,61,107,.22);
  transform: rotate(-.8deg);
}
.creator-mini-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 16px 0 0;
  color: #7f9fc8;
  font: 600 .66rem/1.45 'Space Grotesk',Inter,sans-serif;
  letter-spacing: .025em;
}
.creator-mini-notes span:nth-child(2) {transform:rotate(-2deg)}

/* Redes em cartões simples, leves e reconhecíveis. */
.links-section {position:relative}
.section-kicker {color:#b6d4ff;letter-spacing:.11em}
.section-kicker::before {content:'✳';font:400 .9rem 'Space Grotesk',sans-serif;color:#6aa9fa}
.section-heading.compact h2 {
  font: 500 clamp(1.1rem,2vw,1.43rem)/1.28 'Space Grotesk',Inter,sans-serif;
  letter-spacing: -.02em;
  text-transform: lowercase;
  color: #e8f0ff;
}
.creator-handarrow {display:inline-block;color:#7eb8ff;transform:rotate(8deg)}
.creator-section-note {
  width: fit-content;
  color: #90afd9;
  font: 600 .72rem/1.4 'Space Grotesk',Inter,sans-serif;
  margin-top: 6px;
}
.social-buttons {gap: 12px}
.social-button {
  min-height: 65px;
  border-radius: 10px !important;
  box-shadow: 4px 5px 0 rgba(3,11,25,.92), 0 11px 20px rgba(0,0,0,.19);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.social-button:hover,.social-button:focus-visible {
  transform: translateY(-3px) rotate(-.7deg) !important;
  box-shadow: 4px 9px 0 rgba(3,11,25,.92), 0 13px 25px rgba(0,0,0,.24);
}
.social-button strong { font-size: clamp(1.05rem, 1.5vw, 1.26rem); }
.social-button .social-icon {width:20px;height:20px}
.social-profile-photo {z-index:15}

/* Vídeos / seção editorial. */
.videos-section {
  position: relative;
  border-top: 1px dashed rgba(122,168,230,.38);
  padding-top: 21px;
  margin-top: 8px;
}
.creator-section-index {
  color: #a0bde5;
  font: 700 .7rem/1.4 'Space Grotesk',Inter,sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
#videos-title {position:relative;font-size:clamp(2.5rem,5vw,4.2rem);letter-spacing:.01em}
.creator-video-star {
  color:#8dbfff;
  font: 400 .52em/1 'Space Grotesk',sans-serif;
  vertical-align: top;
  margin-left: 4px;
}
.video-rail {padding-top: 11px}
.video-card a {
  border: 1px solid #51719b;
  border-radius: 10px;
  box-shadow: 5px 6px 0 #102c55;
  overflow: hidden;
}
.video-card a:hover,.video-card a:focus-visible {box-shadow:5px 10px 0 #154276}
.video-info {padding-top: 15px}
.video-controls button {border-radius: 10px!important}

/* Faixa editorial leve, abaixo dos cards. */
.creator-tape {
  position: relative;
  overflow: hidden;
  margin: 33px 0 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(142,188,244,.36);
  border-bottom: 1px solid rgba(142,188,244,.36);
  background: rgba(24,62,110,.30);
  transform: rotate(-1deg);
}
.creator-tape-inner {
  display: flex;
  width: max-content;
  gap: 48px;
  animation: creator-tape-scroll 28s linear infinite;
}
.creator-tape-inner span {
  flex: 0 0 auto;
  white-space: nowrap;
  font: 400 clamp(1.08rem,2.4vw,1.65rem)/1 var(--personal-font);
  letter-spacing: .09em;
  color: #aed3ff;
}
@keyframes creator-tape-scroll { to {transform:translateX(calc(-50% - 24px))} }

/* Contato descomplicado. */
.contact-section {margin-top: 10px;padding-top:clamp(20px,3.5vw,44px)}
.contact-card {
  position:relative;
  background: linear-gradient(135deg, rgba(12,27,48,.96),rgba(4,12,25,.96));
  border:1px solid rgba(129,170,232,.47);
  box-shadow:7px 9px 0 #0c274e;
  border-radius:14px;
}
.contact-card h2 {font-size: clamp(2.4rem,5.4vw,5rem);line-height:.9;text-transform:lowercase}
.contact-mail-button {border-radius:10px!important}

/* Rodapé pequeno, com recado escondido funcional. */
.footer { display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px; }
.creator-easter-egg {position:relative;margin-left:auto;font-family:'Space Grotesk',Inter,sans-serif;font-size:.68rem;color:#a0bfeb}
.creator-easter-egg summary {cursor:pointer;list-style:none;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.creator-easter-egg summary::-webkit-details-marker {display:none}
.creator-easter-egg summary:hover,.creator-easter-egg summary:focus-visible {color:#fff}
.creator-easter-egg p {position:absolute;bottom:calc(100% + 10px);right:0;z-index:12;width:max-content;max-width:72vw;padding:11px 13px;border-radius:8px;background:#d6e7ff;color:#0b2040;box-shadow:4px 4px 0 #255087;font-weight:700}

/* Em telas pequenas, a navegação vira uma linha rolável e o hero não aperta. */
@media (max-width:1020px) {
  .creator-topline {grid-template-columns:1fr auto;row-gap:9px}
  .creator-topline-meta {display:none}
  .creator-quicknav {justify-content:flex-end}
}
@media (max-width:800px) {
  .creator-topline {margin-bottom:28px}
  .profile-card {width:clamp(210px,56vw,305px)}
  .creator-hello {justify-content:center}
  .creator-hero-subtitle {margin-top: 11px}
  .hero-title {margin:0 auto;font-size:clamp(6rem,20vw,9rem)}
  .creator-mini-notes {justify-content:center}
  .creator-doodle {max-width:95%;margin-left:auto;margin-right:auto}
  .creator-section-note {margin-top:6px}
  .creator-tape {margin:24px -7px 10px}
}
@media (max-width:560px) {
  .site-shell {width:calc(100% - 30px)}
  .creator-topline {grid-template-columns:1fr;gap:5px;margin-bottom:21px;padding-top:3px}
  .creator-brand {font-size:1.38rem}
  .creator-quicknav {justify-content:flex-start;gap:clamp(11px,4.4vw,25px);overflow-x:auto;max-width:100%;scrollbar-width:none}
  .creator-quicknav::-webkit-scrollbar {display:none}
  .creator-quicknav a {font-size:.72rem;min-height:32px}
  .hero-grid {gap:15px}
  .profile-card {width:clamp(210px,64vw,284px)}
  .creator-photo-note {right:-8px;bottom:29px;font-size:.72rem}
  .creator-hello {font-size:.66rem}
  .hero-description {font-size:1rem;line-height:1.7}
  .creator-mini-notes {font-size:.59rem}
  .hero-right {gap:25px}
  .social-buttons {gap:9px}
  .social-button {min-height:59px}
  .social-button strong {font-size:1.04rem}
  .creator-tape {margin-top:24px}
  .creator-tape-inner span {font-size:1.14rem}
  .footer {gap:10px;font-size:.75rem}
  .creator-easter-egg {margin-left:0}
}
@media (max-width:355px) {
  .social-buttons {grid-template-columns:1fr}
  .creator-quicknav {gap:12px}
  .creator-quicknav a {font-size:.65rem}
}
@media (prefers-reduced-motion: reduce) {
  .creator-tape-inner {animation:none}
  .creator-quicknav a::after {transition:none}
  .social-button, .profile-card {transition:none!important}
}
body[data-quality='economy'] .creator-tape-inner,
body.performance-lite .creator-tape-inner {animation:none}
body[data-quality='economy'] .creator-photo-note,
body.performance-lite .creator-photo-note {box-shadow:2px 2px 0 #255087}

/* Acabamento: título sempre em uma linha na coluna esquerda, sem invadir os links. */
.hero-title {
  white-space: nowrap;
  font-size: clamp(5.5rem, 8.3vw, 8.8rem);
}
/* A largura do botão de e-mail fica intacta, mas o texto inteiro continua legível. */
.contact-mail-button #contactEmailValue {
  font-size: clamp(.77rem, 1.02vw, .94rem) !important;
  letter-spacing: .005em !important;
}
@media (max-width:800px) {
  .hero-title { font-size: clamp(5.2rem, 19vw, 8.2rem); }
  .contact-mail-button #contactEmailValue { font-size: .96rem !important; }
}
@media (max-width:420px) {
  .hero-title { font-size: clamp(4.7rem, 19vw, 7rem); }
  .contact-mail-button #contactEmailValue { font-size: .91rem !important; }
}


/* Original v3.css */
/* Creator Edition V3 — acabamento autoral e responsivo */
:root{--v3-blue:#318fff;--v3-ice:#c6e4ff}
html{scroll-padding-top:32px}body{overflow-x:clip}.site-shell{max-width:1320px}
.creator-topline{border-bottom:1px solid rgba(117,177,255,.18);padding-bottom:16px}
.creator-quicknav a{transition:color .2s,background-color .2s}.creator-quicknav a:hover,.creator-quicknav a:focus-visible{color:#fff;background:rgba(65,144,255,.12)}
.hero-title{font-family:"Jawn Oficial Site",sans-serif!important;letter-spacing:.015em;text-shadow:0 5px 0 rgba(7,18,38,.85),0 15px 38px rgba(21,100,231,.3)}
.hero-description{max-width:44ch;text-wrap:pretty}.creator-hello,.creator-hero-subtitle,.creator-doodle{color:var(--v3-ice)}
.avatar-frame{border-color:rgba(154,210,255,.55);box-shadow:0 22px 54px rgba(0,0,0,.38),0 0 0 5px rgba(34,117,231,.08)}
.creator-photo-note{transform:rotate(-5deg);box-shadow:3px 4px 0 #0d315a}
.section-heading h2,.videos-topline h2,.contact-copy h2{text-wrap:balance}.section-kicker,.creator-section-index{color:#8dbaff}
.social-button{position:relative;isolation:isolate;transition:filter .2s,box-shadow .2s!important}
.social-button::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 52%);opacity:.35;transition:opacity .2s}
.social-button:hover::before,.social-button:focus-visible::before{opacity:.9}.social-button:hover{filter:brightness(1.12);box-shadow:0 8px 25px rgba(0,0,0,.3)}
.social-button.youtube:hover{box-shadow:0 8px 25px rgba(234,37,45,.24)}.social-button.tiktok:hover{box-shadow:-4px 4px 0 rgba(37,244,238,.13),4px -4px 0 rgba(254,44,85,.12)}
.social-button.instagram:hover{box-shadow:0 8px 25px rgba(222,55,149,.24)}.social-button.discord:hover{box-shadow:0 8px 25px rgba(88,101,242,.29)}.social-button.kick:hover{box-shadow:0 8px 25px rgba(68,220,42,.2)}
.videos-section{min-width:0}.video-rail{scrollbar-width:none;overscroll-behavior-x:contain}.video-rail::-webkit-scrollbar{display:none}
.video-card{border:1px solid rgba(130,177,232,.25);box-shadow:0 14px 32px rgba(0,0,0,.23);transition:border-color .2s,box-shadow .2s}
.video-card:hover,.video-card:focus-within{border-color:rgba(116,190,255,.7);box-shadow:0 17px 35px rgba(0,0,0,.32),0 0 18px rgba(39,127,245,.12)}
.video-info{background:linear-gradient(155deg,rgba(12,22,39,.98),rgba(8,15,28,.94))}.video-info strong{line-height:1.42;overflow-wrap:anywhere}
.video-drag-hint{font-family:"Jawn Oficial Site",sans-serif!important;letter-spacing:.04em}.contact-card{border:1px solid rgba(119,175,240,.26)}.contact-mail-button{min-width:0}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid #b8ddff!important;outline-offset:4px}
@media(min-width:1024px){.hero-grid{column-gap:clamp(28px,4vw,74px)}}
@media(max-width:800px){.hero-left{display:flex;flex-direction:column;align-items:center;text-align:center}.hero-copy{width:100%;max-width:560px}.hero-description{margin-inline:auto}.hero-right,.videos-section{width:100%;min-width:0}.video-rail{max-width:100%}}
@media(max-width:560px){.site-shell{width:calc(100% - 28px)}.creator-topline{gap:10px}.creator-quicknav{padding-bottom:3px}.creator-hello{letter-spacing:.02em}.creator-mini-notes{flex-wrap:wrap}.social-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.social-button{min-width:0}.social-button strong{overflow-wrap:anywhere}.contact-card,.contact-mail-button{min-width:0;max-width:100%}.creator-tape{overflow:hidden}}
@media(max-width:360px){.social-buttons{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body.performance-lite .social-button,body.performance-lite .video-card{box-shadow:none!important;filter:none!important}body.performance-lite .avatar-frame{box-shadow:0 7px 20px rgba(0,0,0,.28)}


/* Inline head styles */
/* Creator Edition V3 — textos essenciais */
.creator-topline{margin-bottom:clamp(12px,2vw,24px)!important}
.hero-copy{gap:10px!important}
.hero-description{margin-block:8px 0!important}
.section-heading.compact{margin-bottom:16px!important}
.videos-section{margin-top:20px!important}
.contact-copy{gap:6px!important}
.footer{justify-content:center!important}


/* Inline head styles */
.creator-topline{justify-content:flex-start!important}.creator-quicknav{display:none!important}

/* Original social-glass.css */

/* MBJAWN: cores originais em vidro translúcido */
.social-section-caption {
  color:#a9c5e9; font-size:12px; margin:-5px 0 17px;
  font-weight:500; letter-spacing:.01em;
}
.social-buttons .social-button {
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(13px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(145%)!important;
  border:1px solid rgba(255,255,255,.19)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 7px 20px rgba(0,0,0,.18)!important;
}
.social-buttons .social-button.youtube {background:linear-gradient(115deg,rgba(180,30,36,.49),rgba(102,9,16,.31))!important}
.social-buttons .social-button.tiktok {background:linear-gradient(115deg,rgba(43,43,47,.68),rgba(6,6,9,.48))!important}
.social-buttons .social-button.instagram {background:linear-gradient(115deg,rgba(112,57,178,.49),rgba(194,43,125,.39))!important}
.social-buttons .social-button.discord {background:linear-gradient(115deg,rgba(87,103,229,.51),rgba(45,57,160,.34))!important}
.social-buttons .social-button.kick {background:linear-gradient(115deg,rgba(44,132,35,.47),rgba(13,69,30,.32))!important}
.social-buttons .social-button:hover {
  filter:brightness(1.17)!important;
  border-color:rgba(255,255,255,.37)!important;
}
.social-buttons .social-button::before {opacity:.22!important}
body.performance-lite .social-buttons .social-button,
body[data-quality="lite"] .social-buttons .social-button {
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
@media(max-width:560px){.social-section-caption{font-size:11px;margin-bottom:15px}}


/* Original hero-center.css */
/* Centraliza nome e descricao com a foto, em qualquer largura de tela */
.hero-left {display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:0!important}
.profile-card {margin-inline:auto!important;align-self:center!important}
.hero-copy {display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:560px!important;margin:28px auto 0!important;text-align:center!important}
.hero-title {width:auto!important;max-width:100%!important;margin-inline:auto!important;text-align:center!important}
.hero-description {width:100%!important;max-width:42ch!important;margin:14px auto 0!important;text-align:center!important;text-wrap:pretty!important}
@media(max-width:560px){.hero-copy{margin-top:24px!important}.hero-description{padding-inline:4px!important}}


/* Original social-title.css */

    /* Título das redes com a mesma presença de VÍDEOS RECENTES */
    #links-title {
      font-family: "Jawn Oficial Site", "Jawn V4", sans-serif !important;
      font-size: clamp(2.1rem, 4.4vw, 3.5rem) !important;
      line-height: 1.08 !important;
      letter-spacing: .045em !important;
      font-weight: 400 !important;
      text-transform: uppercase !important;
      color: #fff !important;
      margin: 0 0 12px !important;
      text-shadow: 0 6px 25px rgba(26, 108, 220, .16);
    }
    @media (max-width: 520px) {
      #links-title { font-size: clamp(1.7rem, 7.8vw, 2.35rem) !important; }
    }
    

/* Original v4-refinements.css */

/* MBJAWN V4 — efeitos leves e progressivos */
:root {--v4-blue:#75b9ff}
.avatar-frame {
  --v4-tilt-x:0deg;--v4-tilt-y:0deg;
  transform:perspective(1000px) rotateX(var(--v4-tilt-x)) rotateY(var(--v4-tilt-y)) translateZ(0)!important;
  transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.2,.75,.2,1),box-shadow .3s ease!important;
  will-change:auto;
}
.profile-card:hover .avatar-frame {box-shadow:0 20px 45px rgba(0,0,0,.42),0 0 26px rgba(45,143,255,.24)!important}
.creator-photo-note {transition:transform .35s cubic-bezier(.2,.75,.2,1)!important}
.profile-card:hover .creator-photo-note {transform:rotate(-5deg) translate(3px,-5px)!important}
.social-buttons .social-button {
  --v4-glass-x:50%;--v4-glass-y:50%;
  isolation:isolate;
}
.social-buttons .social-button::after {
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle 105px at var(--v4-glass-x) var(--v4-glass-y),rgba(255,255,255,.22),transparent 82%);
  opacity:0;transition:opacity .23s ease;
}
.social-buttons .social-button:hover::after,.social-buttons .social-button:focus-visible::after {opacity:1}
.social-buttons .social-button > * {position:relative;z-index:1}
.video-card {overflow:hidden}
.video-card .youtube-thumb {overflow:hidden}
.video-card .youtube-thumb img {
  transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s ease!important;
}
.video-card:hover .youtube-thumb img,.video-card:focus-within .youtube-thumb img {
  transform:scale(1.055)!important;filter:brightness(.91) saturate(1.12);
}
.video-card .play-overlay,.video-card .video-play {
  transition:transform .25s ease,opacity .25s ease,background-color .25s ease;
}
.video-card:hover .play-overlay,.video-card:hover .video-play {transform:scale(1.07)}
/* Apenas elementos visíveis: transições executadas uma vez */
.v4-reveal {opacity:0;transform:translate3d(0,17px,0);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.v4-reveal.v4-visible {opacity:1;transform:translate3d(0,0,0)}
/* Scroll horizontal com toque nativo e sem conflitos de gestos */
.video-rail {touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.video-rail.is-dragging,.video-rail.is-coasting {scroll-behavior:auto!important;scroll-snap-type:none!important}
.video-rail.is-coasting {cursor:grab}
.video-skeleton-rail {min-height:320px}
@media(max-width:700px){
  .hero-grid {padding-top:0!important}
  .hero-left {gap:14px!important}
  .hero-description {max-width:37ch;margin-inline:auto!important;line-height:1.65}
  .links-section {margin-top:18px}
  .social-buttons {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .social-buttons .social-button {min-height:56px;min-width:0}
  #links-title,#videos-title {overflow-wrap:anywhere}
  .video-rail {scroll-padding-inline:8px}
  .video-card {scroll-snap-align:start}
  .video-skeleton-rail {min-height:280px}
}
@media(max-width:360px){
  .social-buttons .social-button {font-size:11px;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){
  .v4-reveal {opacity:1!important;transform:none!important;transition:none!important}
  .avatar-frame {transform:none!important;transition:none!important}
  .social-buttons .social-button::after {display:none!important}
  .video-card .youtube-thumb img {transition:none!important}
}
body.performance-lite .v4-reveal,body.performance-balanced .v4-reveal {transition-duration:.25s}
body.performance-lite .avatar-frame,body.performance-lite .video-card .youtube-thumb img {transform:none!important}
body.performance-lite .social-buttons .social-button::after {display:none!important}


/* Inline head styles */
/* PixGG — donate integrado à identidade azul, com transparência */
.social-buttons .social-button.pixgg {
  background:linear-gradient(115deg,rgba(27,126,222,.55),rgba(15,54,118,.42))!important;
  border:1px solid rgba(110,194,255,.38)!important;
  backdrop-filter:blur(13px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(145%)!important;
}
.social-buttons .social-button.pixgg:hover {
  box-shadow:0 8px 25px rgba(31,138,242,.26)!important;
}
.social-buttons .social-button.pixgg .social-icon svg {fill:currentColor}
body.performance-lite .social-buttons .social-button.pixgg {
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}


/* Original brand-floating.css */

/* MBJAWN — assinatura animada: O melhor do bairro 😎 */
.creator-topline {overflow:visible!important;justify-content:center!important}
.creator-brand {
  --brand-shine:#a6d8ff;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:0!important;max-width:100%;text-decoration:none!important;
  font-family:"Jawn Oficial Site","Jawn V4",sans-serif!important;
  font-size:clamp(17px,2.6vw,29px)!important;
  font-weight:400!important;line-height:1.6!important;
  letter-spacing:.018em!important;color:#f4f8ff!important;
  white-space:nowrap;isolation:isolate;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.8));
  transition:filter .3s ease!important;
}
.creator-brand .brand-letter {
  display:inline-block!important;
  position:relative;
  animation:brand-float 2.8s ease-in-out infinite;
  animation-delay:calc(var(--letter-index)*-0.105s);
  transform-origin:center 65%;
  text-shadow:0 1px 0 #214978,0 0 11px rgba(62,149,255,.18);
  transition:color .2s,text-shadow .25s;
}
.creator-brand .brand-space {display:inline-block;min-width:.27em}
.creator-brand .brand-face {
  display:inline-block;margin-left:.34em;
  font-family:system-ui,sans-serif;font-size:1.02em;
  animation:brand-face-float 3s ease-in-out infinite;
  filter:drop-shadow(0 3px 6px rgba(49,139,255,.35));
}
.creator-brand:hover .brand-letter,.creator-brand:focus-visible .brand-letter {
  color:var(--brand-shine);
  text-shadow:0 0 8px rgba(95,177,255,.62),0 0 18px rgba(38,120,255,.3);
  animation-duration:1.45s;
}
.creator-brand:hover .brand-face,.creator-brand:focus-visible .brand-face {animation-duration:1.4s}
@keyframes brand-float {
  0%,100% {transform:translate3d(0,0,0) rotate(0deg)}
  50% {transform:translate3d(0,-4px,0) rotate(-1.4deg)}
}
@keyframes brand-face-float {
  0%,100% {transform:translateY(0) rotate(-7deg)}
  50% {transform:translateY(-6px) rotate(8deg)}
}
@media(max-width:460px){
  .creator-brand {font-size:clamp(14px,4.2vw,20px)!important;letter-spacing:0!important}
  .creator-brand .brand-space {min-width:.22em}
  .creator-brand .brand-face {margin-left:.22em}
}
@media(prefers-reduced-motion:reduce){
  .creator-brand .brand-letter,.creator-brand .brand-face {animation:none!important;transform:none!important}
}
body.performance-lite .creator-brand .brand-letter,
body.performance-lite .creator-brand .brand-face,
body[data-quality="lite"] .creator-brand .brand-letter,
body[data-quality="lite"] .creator-brand .brand-face {animation:none!important;transform:none!important}


/* Original brand-centered.css */

/* Assinatura centralizada com o retrato, sem linha nem ação de clique */
.creator-topline {
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-inline:auto!important;
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  padding-bottom:0!important;
  background:transparent!important;
}
.creator-topline::before,.creator-topline::after {content:none!important;display:none!important}
.creator-brand {
  width:max-content!important;
  max-width:100%!important;
  margin-inline:auto!important;
  text-align:center!important;
  cursor:default!important;
  pointer-events:none!important;
  border:0!important;
  text-decoration:none!important;
  user-select:none;
}
.creator-brand::before,.creator-brand::after {content:none!important;display:none!important}


/* Original drag-hint-size.css */
/* Destaque legível para a dica de arrastar */
.video-drag-hint {font-size:clamp(15px,1.65vw,19px)!important;font-weight:700!important;letter-spacing:.035em!important;line-height:1.45!important;color:#c7ddff!important;opacity:1!important;text-shadow:0 2px 12px rgba(27,115,238,.35)!important;margin-block:12px 15px!important;}
@media(max-width:600px){.video-drag-hint{font-size:15px!important;margin-block:10px 13px!important}}


/* Original donate-wide.css */
/* Fix definitivo: exatamente duas colunas, donate ocupa ambas. */
.social-buttons {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;}
.social-buttons > a.social-button.pixgg {grid-column:1 / -1!important;grid-row:auto!important;display:flex!important;width:100%!important;max-width:none!important;min-width:0!important;justify-self:stretch!important;box-sizing:border-box!important;}
@media(max-width:390px){.social-buttons{grid-template-columns:1fr!important}}


/* Original donate-full-width-final.css */
/* MBJAWN — donate full-width, independentemente de regras antigas. */
#redes .social-buttons {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:100%!important;gap:12px!important;}
#redes .social-buttons > a.social-button.pixgg {grid-column:1 / span 2!important;grid-row:auto!important;display:flex!important;width:100%!important;min-width:0!important;max-width:100%!important;justify-self:stretch!important;box-sizing:border-box!important;}
#redes .social-buttons > a.social-button.pixgg > strong {text-align:center!important;}
@media(max-width:520px){#redes .social-buttons {gap:10px!important}}


/* Original donate-20261112-wide-fix.css */
/* Correção final: o último botão ocupa as duas colunas, até a borda do Kick. */
html body #redes .social-buttons > a.social-button.pixgg {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}
html body #redes .social-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}
@media (max-width:520px) {
 html body #redes .social-buttons {grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}


/* Original donate-layout-v5.css */

/* Donate is now a separate full-width row, independent of social grid rules. */
#redes .donate-full-row {
 display:block!important;
 width:100%!important;
 max-width:none!important;
 min-width:0!important;
 margin-top:12px!important;
 box-sizing:border-box!important;
}
#redes .donate-full-row > a.social-button.pixgg {
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 width:100%!important;
 max-width:none!important;
 min-width:0!important;
 box-sizing:border-box!important;
}
@media(max-width:650px){#redes .donate-full-row{margin-top:10px!important}}


/* Original photo-light-fix.css */
/* Remover reflexo/luz localizada na foto sem alterar moldura e tilt. */
.profile-card .avatar-spotlight,
.profile-card:hover .avatar-spotlight,
.profile-card .avatar-frame::before,
.profile-card:hover .avatar-frame::before {
  display:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
}
.profile-card .avatar-frame::after {
  background:transparent!important;
}
/* O cursor customizado não desenha um halo sobre o retrato. */
body:has(.avatar-frame:hover) .light-follow {opacity:0!important}


/* Original jawn-magnetic.css */
/* JAWN — magnetic elastic title, preserving the official font */
.hero-title {display:flex!important;justify-content:center;align-items:center;gap:0!important;width:max-content!important;max-width:100%;isolation:isolate;animation:none!important;filter:none!important;transform:none!important;overflow:visible}
.hero-copy[data-animate].is-visible .hero-title {animation:none!important}
.hero-title::before,.hero-title::after {content:none!important;display:none!important}
.hero-title .magnetic-letter {display:inline-block;position:relative;flex:0 0 auto;transform:translate3d(var(--mx,0px),var(--my,0px),0) rotate(var(--mr,0deg));text-shadow:0 10px 0 rgba(255,255,255,.08),var(--mag-shadow,0 0 0 transparent);transition:transform 600ms cubic-bezier(.18,1.45,.35,1),text-shadow .3s ease;will-change:auto;user-select:none}
.hero-title .magnetic-letter:hover {--mag-shadow:3px 6px 12px rgba(28,126,255,.35)}
.hero-title.magnetic-ready .magnetic-letter {transition:transform 105ms ease-out,text-shadow .2s ease}
.hero-title.magnetic-return .magnetic-letter {transition:transform 730ms cubic-bezier(.18,1.5,.3,1),text-shadow .35s ease}
.hero-title.magnetic-enter .magnetic-letter {animation:magnetic-entrance .72s both cubic-bezier(.2,1.25,.3,1);animation-delay:calc(var(--i)*95ms)}
@keyframes magnetic-entrance {from{opacity:0;transform:translate3d(0,-20px,0) rotate(-5deg)}to{opacity:1;transform:translate3d(0,0,0) rotate(0deg)}}
@media(hover:none),(pointer:coarse){.hero-title .magnetic-letter{transition:none!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.hero-title .magnetic-letter{animation:none!important;transition:none!important;transform:none!important}}
body.performance-lite .hero-title .magnetic-letter,body[data-quality="lite"] .hero-title .magnetic-letter{animation:none!important;transition:none!important;transform:none!important}


/* Original jawn-photo-holo.css */
/* Efeito holografico aplicado SOMENTE nas bordas. Sem brilho sobre o rosto. */
.profile-card .avatar-float {isolation:isolate;cursor:default;outline-offset:8px}
.profile-card .avatar-float:focus-visible {outline:2px solid #8bdcff}
.profile-card .avatar-frame::before {display:none!important;opacity:0!important}
.profile-card .avatar-frame::after {background:linear-gradient(180deg,transparent 75%,rgba(0,0,0,.19))!important}
.profile-card .holo-edge {position:absolute;inset:-5px;border-radius:23px;pointer-events:none;z-index:5;padding:2px;opacity:.75;
 background:conic-gradient(from var(--holo-angle,0deg),transparent 0deg,transparent 245deg,#4ca8ff 280deg,#c7efff 305deg,transparent 335deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
 filter:drop-shadow(0 0 5px #48a6ff);transition:opacity .3s ease}
.profile-card:hover .holo-edge,.profile-card .avatar-float:focus-visible .holo-edge {opacity:1}
.profile-card .holo-pulse {position:absolute;z-index:6;inset:-5px;pointer-events:none;border-radius:23px;border:2px solid #8bd8ff;opacity:0}
.profile-card .avatar-float.holo-clicked .holo-pulse {animation:holo-click-wave .65s ease-out both}
@keyframes holo-click-wave {0%{opacity:.95;transform:scale(1);box-shadow:0 0 13px #57adff}100%{opacity:0;transform:scale(1.095);box-shadow:0 0 28px #57adff}}
.profile-card .creator-photo-note {transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .3s ease!important}
.profile-card:hover .creator-photo-note {transform:translate3d(3px,-4px,0) rotate(-4deg)!important;filter:drop-shadow(0 5px 6px rgba(15,73,153,.35))}
@media(prefers-reduced-motion:reduce){.profile-card .holo-edge{opacity:.5!important;background:rgba(97,185,255,.55)!important}.profile-card .holo-pulse{animation:none!important}.profile-card:hover .creator-photo-note{transform:none!important}}
body.performance-lite .profile-card .holo-edge,body[data-quality="lite"] .profile-card .holo-edge {background:rgba(97,185,255,.4)!important;opacity:.45!important;filter:none!important}
body.performance-lite .profile-card .holo-pulse,body[data-quality="lite"] .profile-card .holo-pulse {animation:none!important}

/* Cursor comum sobre a foto, sem ícone de clique. */
.profile-card .avatar-float, .profile-card .avatar-float * { cursor:default!important; }


/* Original roblox-cursor.css */
/* Cursor Roblox antigo: 28px, sem luz ou rastro. */
@media (hover:hover) and (pointer:fine) {
 html, body, body * { cursor: url("./roblox-normal.png") 1 0, auto !important; }
 a, a *, button, button *, summary, summary *, select,
 label[for], [role="button"], [role="button"] *,
 input[type="button"], input[type="submit"] {
   cursor: url("./roblox-pointer.png") 1 1, pointer !important;
 }
 input[type="text"],input[type="email"],input[type="search"],textarea,[contenteditable="true"] {cursor:text!important}
}
@media (hover:none), (pointer:coarse) { html,body,body * {cursor:auto!important} }


/* Original ui-sizing-v2.css */
/* Elementos solicitados: contato, copyright e controles flutuantes. */
.contact-mail-button {
 min-height:100px!important;
 min-width:min(100%,350px)!important;
 padding:20px 25px!important;
 gap:16px!important;
 border-radius:14px!important;
}
.contact-mail-icon {width:52px!important;height:52px!important;flex:0 0 52px!important}
.contact-mail-icon svg {width:25px!important;height:25px!important}
#contactEmailLabel {font-size:12px!important;letter-spacing:.105em!important;line-height:1.5!important}
#contactEmailValue {font-size:clamp(14px,1.3vw,17px)!important;line-height:1.5!important;overflow-wrap:anywhere}
.footer {font-size:clamp(14px,1.15vw,16px)!important;padding-top:24px!important;padding-bottom:24px!important;letter-spacing:.055em!important}
.back-to-top {width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;border-radius:16px!important;font-size:27px!important}
.back-to-top span {font-size:27px!important;line-height:1!important}
.quality-control {min-height:49px!important;padding:12px 17px!important;font-size:14px!important;border-radius:15px!important;line-height:1.25!important;white-space:nowrap!important}
@media(max-width:600px) {
 .contact-mail-button {width:100%!important;min-width:0!important;min-height:88px!important;padding:16px 18px!important}
 .contact-mail-icon {width:46px!important;height:46px!important;flex-basis:46px!important}
 .quality-control {font-size:12px!important;padding:10px 13px!important;min-height:43px!important}
 .back-to-top {width:47px!important;height:47px!important;min-width:47px!important;min-height:47px!important}
 .footer {font-size:14px!important}
}


/* Original jawn-flip.css */

/* Foto dupla face: preserva a moldura e os efeitos externos. */
.profile-card .avatar-float,.profile-card .avatar-float * {cursor:url("./roblox-pointer.png") 2 1,pointer!important}
.profile-card .avatar-frame {perspective:1000px;overflow:hidden!important}
.profile-card .jawn-flip-inner {position:relative;width:100%;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.75,.2,1)}
.profile-card .jawn-flip-front,.profile-card .jawn-flip-back {position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:inherit}
.profile-card .jawn-flip-front {position:relative;width:100%;height:100%}
.profile-card .jawn-flip-front img {display:block;width:100%;height:100%;object-fit:cover}
.profile-card .jawn-flip-back {transform:rotateY(180deg);background:#fff;display:flex;align-items:center;justify-content:center}
.profile-card .jawn-flip-back img {display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.profile-card .avatar-float.jawn-flipped .jawn-flip-inner {transform:rotateY(180deg)}
.profile-card .avatar-float.jawn-flipped .creator-photo-note {opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.profile-card .jawn-flip-inner{transition:none!important}}


/* Original brand-cursor-final.css */
/* MBJAWN: assinatura maior, centralizada e sem clique */
.creator-topline .creator-brand {font-size:clamp(23px,2.65vw,39px)!important;line-height:1.35!important;letter-spacing:.01em!important;cursor:inherit!important}
@media(max-width:700px){.creator-topline .creator-brand{font-size:clamp(19px,4.6vw,27px)!important;letter-spacing:0!important}}
@media(max-width:380px){.creator-topline .creator-brand{font-size:18px!important}}
/* O cursor Roblox enviado é aplicado ao site inteiro, inclusive sobre elementos filhos. */
@media(hover:hover) and (pointer:fine){
 html,body,body.cursor-ready,body.cursor-ready *,body *,
 .profile-card,.avatar-frame,.creator-photo-note {cursor:url('./roblox-normal.png') 1 0,auto!important}
 a,a *,button,button *,summary,summary *,select,[role="button"],[role="button"] *,
 input[type="button"],input[type="submit"],
 .profile-card .avatar-float,.profile-card .avatar-float * {cursor:url('./roblox-pointer.png') 1 1,pointer!important}
 input[type="text"],input[type="email"],input[type="search"],textarea,[contenteditable="true"]{cursor:text!important}
}
@media(hover:none),(pointer:coarse){html,body,body *{cursor:auto!important}}
.cursor-dot,.cursor-ring,.cursor-trail,.jawn-cursor-tag{display:none!important}


/* Original videos-no-lines.css */
/* Remove somente as duas linhas da seção Vídeos recentes. */
.videos-section { border-top: none !important; }
.videos-topline { border-bottom: none !important; }


/* Original donate-blue-accent.css */
/* Donate com identidade azul, distinto do TikTok e mantendo transparência. */
#redes .donate-full-row > a.social-button.pixgg,
#redes .donate-full-row > a.social-button.pixgg:hover,
#redes .donate-full-row > a.social-button.pixgg:focus-visible {
 background:linear-gradient(110deg,rgba(25,106,189,.78) 0%,rgba(12,67,141,.75) 55%,rgba(10,42,100,.78) 100%)!important;
 border:1px solid rgba(87,180,255,.65)!important;
 color:#fff!important;
 box-shadow:inset 0 1px 0 rgba(215,239,255,.17),0 8px 24px rgba(0,74,155,.16)!important;
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#redes .donate-full-row > a.social-button.pixgg:hover {filter:brightness(1.13);box-shadow:inset 0 1px 0 rgba(215,239,255,.22),0 10px 28px rgba(19,112,222,.24)!important}


/* Original social-caption-font-fix.css */
/* Legenda das redes: leitura mais confortável no desktop e no celular. */
#redes .social-section-caption {
  font-size: 18px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}
@media (max-width: 560px) {
  #redes .social-section-caption { font-size: 15px !important; }
}


/* Original contact-font-size-v3.css */
/* Aumenta somente os dois textos do botao de e-mail. */
#contato .contact-mail-button #contactEmailLabel { font-size: 15px !important; line-height: 1.45 !important; letter-spacing: .09em !important; }
#contato .contact-mail-button #contactEmailValue { font-size: 20px !important; line-height: 1.45 !important; letter-spacing: .015em !important; overflow-wrap: anywhere; }
@media(max-width: 600px) {
 #contato .contact-mail-button #contactEmailLabel { font-size: 13px !important; }
 #contato .contact-mail-button #contactEmailValue { font-size: 17px !important; }
}


/* Original contact-title-animation.css */
/* Título CONTATO: entrada retrô, onda no hover e acessibilidade. */
#contact-title.contact-type-title{display:inline-flex;align-items:baseline;position:relative;isolation:isolate;white-space:nowrap;cursor:default}
#contact-title .contact-type-letter{display:inline-block;opacity:1;transform:translateY(0);will-change:auto}
#contact-title .contact-type-caret{display:inline-block;width:.065em;height:.85em;margin-left:.09em;vertical-align:-.06em;background:#67bfff;opacity:0;box-shadow:0 0 8px #258dff;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  body:not(.contact-title-ready) #contact-title .contact-type-letter{opacity:1}
  body.contact-title-ready #contact-title:not(.contact-type-visible) .contact-type-letter{opacity:0}
  body.contact-title-ready #contact-title.contact-type-visible .contact-type-letter{animation:contactTypeIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--letter-index)*240ms)}
  body.contact-title-ready #contact-title.contact-type-visible .contact-type-caret{animation:contactCaret .8s steps(1,end) 0s 3 forwards}
  #contact-title.contact-type-done .contact-type-letter{animation:none!important;opacity:1!important}
  #contact-title.contact-type-done .contact-type-caret{display:none}
  #contact-title.contact-type-done:hover .contact-type-letter{animation:contactWave .45s ease both!important;animation-delay:calc(var(--letter-index)*45ms)!important}
  @keyframes contactTypeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  @keyframes contactCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
  @keyframes contactWave{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
}
@media(prefers-reduced-motion:reduce){#contact-title .contact-type-letter{opacity:1!important;animation:none!important}#contact-title .contact-type-caret{display:none!important}}


/* Original video-grab-cursor.css */
/* Cursor de mão nos vídeos: mão Roblox ao apontar, agarrar durante o arrasto. */
@media (hover:hover) and (pointer:fine) {
 html body #videoRail, html body #videoRail *,
 html body .video-rail, html body .video-rail * {
  cursor: url("./roblox-pointer.png") 1 1, grab !important;
 }
 html body #videoRail.is-dragging, html body #videoRail.is-dragging *,
 html body.is-video-dragging #videoRail, html body.is-video-dragging #videoRail * {
  cursor: grabbing !important;
 }
}


/* Original final-polish.css */

/* Creator Edition — refinamentos de acabamento, sem bibliotecas externas */
#redes .social-buttons > .social-item, #redes .donate-full-row > .social-button {
 transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,opacity .5s ease!important;
}
@media (prefers-reduced-motion:no-preference) {
 #redes .social-buttons > .social-item.jawn-enter-pending,
 #redes .donate-full-row > .social-button.jawn-enter-pending {
  opacity:0;transform:translate3d(0,14px,0)!important;
 }
 #redes .social-buttons > .social-item.jawn-entered,
 #redes .donate-full-row > .social-button.jawn-entered {
  animation:jawn-social-in .52s both cubic-bezier(.2,.7,.2,1);
  animation-delay:var(--jawn-delay,0ms);
 }
 @keyframes jawn-social-in {
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
 }
}
#videos .video-card img,#videos .youtube-thumb img {
 transition:transform .42s cubic-bezier(.2,.7,.2,1),filter .32s ease;
}
@media(hover:hover) and (pointer:fine) {
 #videos .video-card:hover img,#videos .youtube-thumb:hover img {
  transform:scale(1.045);filter:saturate(1.06);
 }
}
#videoRail {touch-action:pan-x pan-y;overscroll-behavior-x:contain}
#redes .social-button, #redes .donate-full-row .social-button,
#videos .video-controls button, #contato .contact-mail-button {min-height:48px}
@media(max-width:700px) {
 .hero-grid {row-gap:clamp(12px,3vw,24px)}
 #redes .social-buttons {gap:10px!important}
 #redes .social-button {min-height:54px}
 #videos .video-controls button {min-width:44px;min-height:44px}
 #videoRail {-webkit-overflow-scrolling:touch;scroll-padding-inline:12px}
 #contato .contact-mail-button {max-width:100%;overflow-wrap:anywhere}
}
/* Easter egg: toast compacto com identidade visual do site */
.jawn-achievement {
 position:fixed;z-index:99999;right:24px;bottom:24px;
 width:min(390px,calc(100vw - 32px));box-sizing:border-box;
 color:#f4f8ff;background:linear-gradient(145deg,#0d1c33 0%,#071120 100%);
 border:1px solid rgba(99,167,255,.42);border-radius:16px;overflow:hidden;
 box-shadow:0 18px 54px rgba(0,0,0,.58),0 0 32px rgba(34,116,255,.12);
 font-family:inherit;opacity:0;transform:translateY(18px) scale(.97);
 visibility:hidden;pointer-events:none;
 transition:opacity .28s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility .28s ease;
}
.jawn-achievement.is-open {opacity:1;transform:none;visibility:visible;pointer-events:auto}
.jawn-achievement::before {
 content:"";position:absolute;left:0;right:0;top:0;height:2px;
 background:linear-gradient(90deg,#2683ff,#90d9ff,#2683ff);
}
.jawn-achievement-top {
 display:flex;align-items:center;gap:8px;padding:12px 15px 8px;
}
.jawn-achievement-mark {
 display:grid;place-items:center;width:21px;height:21px;
 border:1px solid rgba(111,190,255,.45);border-radius:6px;
 color:#9ad7ff;background:rgba(44,121,224,.13);font-size:13px;
}
.jawn-achievement-app {
 color:#a7c7e8;font-size:11px;font-weight:800;letter-spacing:.14em;
}
.jawn-achievement-close {
 margin-left:auto;width:30px;height:30px;display:grid;place-items:center;
 padding:0;border:1px solid transparent;border-radius:8px;
 color:#a9c3df;background:transparent;font:normal 22px/1 Arial,sans-serif;
 cursor:pointer;transition:background .2s,color .2s;
}
.jawn-achievement-close:hover,.jawn-achievement-close:focus-visible {
 color:white;background:rgba(118,173,242,.16);
}
.jawn-achievement-content {
 display:flex;align-items:center;gap:14px;padding:5px 18px 20px;
}
.jawn-achievement-icon {
 flex:0 0 58px;width:58px;height:58px;display:grid;place-items:center;
 color:#c6edff;font-size:30px;line-height:1;
 border-radius:15px;border:1px solid rgba(95,181,255,.4);
 background:radial-gradient(circle at 30% 20%,rgba(101,203,255,.35),rgba(30,79,164,.4) 60%,rgba(11,30,68,.8));
 box-shadow:inset 0 1px rgba(255,255,255,.16),0 5px 18px rgba(15,88,199,.18);
 text-shadow:0 0 14px rgba(128,208,255,.8);
}
.jawn-achievement-copy {min-width:0;display:flex;flex-direction:column;gap:4px}
.jawn-achievement-eyebrow {
 font:700 10px/1.3 inherit;color:#7bbfff;letter-spacing:.11em;
}
.jawn-achievement-title {
 font-size:clamp(15px,4vw,18px);font-weight:850;line-height:1.2;
 letter-spacing:.015em;color:#fff;overflow-wrap:normal;
}
.jawn-achievement-subtitle {font-size:12px;line-height:1.4;color:#a8bed8}
@media(max-width:700px){
 .jawn-achievement{right:16px;bottom:16px}
 .jawn-achievement-content{gap:12px;padding:4px 14px 17px}
 .jawn-achievement-icon{flex-basis:50px;width:50px;height:50px}
}
@media(prefers-reduced-motion:reduce) {
 #redes .social-item,#redes .social-button,#videos .video-card img,.jawn-achievement {animation:none!important;transition:none!important}
}
body.performance-lite #redes .social-item,body.performance-lite #redes .social-button {animation:none!important}
body.performance-lite #videos .video-card img {transform:none!important}


/* Easter egg — identidade MBJAWN: preto, azul elétrico e tipografia oficial */
.jawn-achievement {
 background:rgba(3,7,15,.96)!important;
 border:1px solid rgba(31,143,255,.6)!important;
 border-radius:14px!important;
 box-shadow:0 18px 55px rgba(0,0,0,.68),0 0 28px rgba(20,135,255,.13)!important;
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
}
.jawn-achievement::before {
 height:2px!important;
 background:linear-gradient(90deg,transparent,#1487ff 24%,#8bdcff 52%,#1487ff 80%,transparent)!important;
}
.jawn-achievement-top {padding:12px 17px 7px!important}
.jawn-achievement-mark {
 background:transparent!important;border:0!important;
 color:#1487ff!important;font-size:19px!important;
}
.jawn-achievement-app {
 font-family:var(--font-jawn,"Jawn Oficial Site",sans-serif)!important;
 font-size:17px!important;font-weight:400!important;
 letter-spacing:.1em!important;color:#fff!important;
}
.jawn-achievement-close {color:#9ca9bc!important}
.jawn-achievement-content {gap:15px!important;padding:6px 18px 20px!important}
.jawn-achievement-icon {
 flex-basis:54px!important;width:54px!important;height:54px!important;
 border-radius:12px!important;
 border:1px solid rgba(20,135,255,.65)!important;
 background:rgba(20,135,255,.08)!important;
 color:#8bdcff!important;font-size:29px!important;
 box-shadow:inset 0 0 17px rgba(20,135,255,.14)!important;
}
.jawn-achievement-eyebrow {
 color:#75bbff!important;font-size:10px!important;
 letter-spacing:.15em!important;font-family:Inter,system-ui,sans-serif!important;
}
.jawn-achievement-title {
 font-family:var(--font-jawn,"Jawn Oficial Site",sans-serif)!important;
 font-weight:400!important;font-size:clamp(24px,6vw,31px)!important;
 line-height:1.02!important;letter-spacing:.025em!important;
 color:#fff!important;
}
.jawn-achievement-subtitle {color:#b2bbcc!important;font-size:12px!important}
@media(max-width:380px){
 .jawn-achievement-content{gap:10px!important;padding-inline:13px!important}
 .jawn-achievement-title{font-size:23px!important}
 .jawn-achievement-icon{flex-basis:45px!important;width:45px!important;height:45px!important}
}

/* Final performance and accessibility safeguards */
@media (prefers-reduced-motion: reduce) {
 #redes .social-item,#redes .social-button { opacity:1!important; transform:none!important; }
}
body.performance-lite #redes .social-item,body.performance-lite #redes .social-button {opacity:1!important;transform:none!important}
:focus-visible {outline-color:#85c9ff;outline-offset:3px}


/* Inline styles migrated from HTML */
.creator-brand .brand-letter[data-letter-index="0"]{--letter-index:0}
.creator-brand .brand-letter[data-letter-index="2"]{--letter-index:2}
.creator-brand .brand-letter[data-letter-index="3"]{--letter-index:3}
.creator-brand .brand-letter[data-letter-index="4"]{--letter-index:4}
.creator-brand .brand-letter[data-letter-index="5"]{--letter-index:5}
.creator-brand .brand-letter[data-letter-index="6"]{--letter-index:6}
.creator-brand .brand-letter[data-letter-index="7"]{--letter-index:7}
.creator-brand .brand-letter[data-letter-index="9"]{--letter-index:9}
.creator-brand .brand-letter[data-letter-index="10"]{--letter-index:10}
.creator-brand .brand-letter[data-letter-index="12"]{--letter-index:12}
.creator-brand .brand-letter[data-letter-index="13"]{--letter-index:13}
.creator-brand .brand-letter[data-letter-index="14"]{--letter-index:14}
.creator-brand .brand-letter[data-letter-index="15"]{--letter-index:15}
.creator-brand .brand-letter[data-letter-index="16"]{--letter-index:16}
.creator-brand .brand-letter[data-letter-index="17"]{--letter-index:17}
.hero-title .magnetic-letter[data-magnetic-index="0"]{--i:0}
.hero-title .magnetic-letter[data-magnetic-index="1"]{--i:1}
.hero-title .magnetic-letter[data-magnetic-index="2"]{--i:2}
.hero-title .magnetic-letter[data-magnetic-index="3"]{--i:3}

#redes .social-buttons {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:none!important;}

/* Safari iOS: ensure the back image actually appears after tapping. */
.profile-card .jawn-flip-inner{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.profile-card .jawn-flip-front,.profile-card .jawn-flip-back{position:absolute!important;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.profile-card .jawn-flip-back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.profile-card .avatar-float.jawn-flipped .jawn-flip-inner{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
/* Reliable 2D image switch on touch screens avoids WebKit backface bugs. */
@media (hover:none) and (pointer:coarse){
.profile-card .jawn-flip-inner,.profile-card .avatar-float.jawn-flipped .jawn-flip-inner{-webkit-transform:none!important;transform:none!important}
.profile-card .jawn-flip-front,.profile-card .jawn-flip-back{-webkit-transform:none!important;transform:none!important;transition:opacity .32s ease}
.profile-card .jawn-flip-front{opacity:1;visibility:visible}
.profile-card .jawn-flip-back{opacity:0;visibility:hidden;pointer-events:none}
.profile-card .avatar-float.jawn-flipped .jawn-flip-front{opacity:0;visibility:hidden}
.profile-card .avatar-float.jawn-flipped .jawn-flip-back{opacity:1;visibility:visible}
}
@media (prefers-reduced-motion:reduce){.profile-card .jawn-flip-front,.profile-card .jawn-flip-back{transition:none!important}}

@media (hover:none) and (pointer:coarse) {
 #videoRail.video-rail {scroll-snap-type:x proximity!important;scroll-behavior:auto!important;-webkit-overflow-scrolling:touch}
}