:root{ --hell:#ff3b1f; --lava:#ff7a1a; --sulfur:#ffc24a; --line:rgba(255,255,255,.08); --muted:#b9a9a6; }
  html{ scroll-behavior:smooth; }
  body{ background:#0b0708; color:#f4ebe8; overflow-x:hidden; }
  ::selection{ background:var(--hell); color:#fff; }

  /* ---------- fundo ---------- */
  .bg{ position:fixed; inset:0; z-index:-3; pointer-events:none;
    background:
      radial-gradient(60% 40% at 80% 0%, rgba(255,59,31,.16), transparent 70%),
      radial-gradient(50% 40% at 0% 60%, rgba(158,15,26,.18), transparent 70%),
      #0b0708; }
  .grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  /* lava viva — só existe para o vidro ter o que refratar */
  .blobs{ position:fixed; inset:0; z-index:-2; pointer-events:none; filter:blur(70px); opacity:.42; }
  .blobs b{ position:absolute; border-radius:50%; animation:drift var(--t) ease-in-out infinite alternate; }
  @keyframes drift{ to{ transform:translate(var(--x),var(--y)) scale(1.2); } }

  /* ---------- LIQUID GLASS ----------
     base (todos os navegadores): tinta escura p/ legibilidade + blur + aro especular.
     Chromium: o JS injeta um filtro SVG por elemento que curva o fundo só nas bordas (lente). */
  .glass{ position:relative; isolation:isolate;
    background:linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 45%, rgba(255,255,255,.05)), rgba(20,11,12,.55);
    -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
    box-shadow:
      inset 1px 1px 0 0 rgba(255,255,255,.38),
      inset -1px -1px 0 0 rgba(255,255,255,.10),
      inset 0 0 22px rgba(255,255,255,.04),
      0 12px 40px -12px rgba(0,0,0,.65); }
  .glass::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(320px circle at var(--mx,20%) var(--my,-20%), rgba(255,255,255,.10), transparent 60%);
    opacity:.9; transition:opacity .3s; }
  .glass.fixed{ position:fixed; }

  /* ---------- tipografia ---------- */
  .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sulfur); }
  .h-sec{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.03em; line-height:.95; }
  .grad{ background:linear-gradient(180deg,#fff 10%,#ffc9b0 60%,#ff8a5c); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .muted{ color:var(--muted); }

  /* ---------- ASCII Blender ---------- */
  #ascii{ font-family:'JetBrains Mono',monospace; line-height:1; letter-spacing:0; white-space:pre; user-select:none;
    font-size:clamp(5.5px, 1.2vw, 14px); }
  .ascii-wrap{ mask-image:radial-gradient(closest-side, #000 75%, transparent); -webkit-mask-image:radial-gradient(closest-side, #000 75%, transparent); }

  /* ---------- Luci ---------- */
  .luci-img{ filter:drop-shadow(0 0 1.5px rgba(255,140,90,.9)) drop-shadow(0 8px 18px rgba(255,60,30,.35)); }
  .luci-float{ animation:lounge 5s ease-in-out infinite; transform-origin:50% 90%; }
  @keyframes lounge{ 50%{ transform:translateY(-6px) rotate(-2deg); } }

  /* ---------- cards de trabalho (bento) ---------- */
  .work{ cursor:pointer; outline:none; }
  .thumb{ position:relative; overflow:hidden; border-radius:24px; width:100%; isolation:isolate;
    background:
      radial-gradient(110% 80% at 85% 115%, hsl(var(--h) 90% 48% / .9), transparent 60%),
      radial-gradient(70% 60% at 0% 0%, hsl(var(--h) 80% 30% / .45), transparent 70%),
      #120a0b;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); transition:box-shadow .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
  .work:hover .thumb, .work:focus-visible .thumb{ box-shadow:inset 0 0 0 1px rgba(255,120,80,.45), 0 24px 60px -24px hsl(var(--h) 90% 45% / .8); transform:translateY(-4px); }
  .thumb::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.22;
    background-image:linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size:28px 28px; mask-image:radial-gradient(90% 90% at 70% 100%, #000, transparent); }
  .thumb::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(8,4,5,.35) 0%, transparent 30%, transparent 45%, rgba(8,4,5,.88) 100%); }
  /* ícone gigante recortado, como pôster */
  .thumb .art{ position:absolute; z-index:0; right:-10%; top:-8%; width:68%; aspect-ratio:1; transform:rotate(-12deg); opacity:.17;
    transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .5s; }
  .thumb .art svg{ width:100%; height:100%; color:#fff; }
  .work:hover .thumb .art{ transform:rotate(-3deg) scale(1.08); opacity:.28; }
  .thumb .play{ position:absolute; z-index:3; left:50%; top:46%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
    display:grid; place-items:center; opacity:0; transform:scale(.6); transition:all .4s cubic-bezier(.3,1.5,.5,1); }
  .work:hover .thumb .play, .work:focus-visible .thumb .play{ opacity:1; transform:none; }
  .w-top{ position:absolute; z-index:2; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .w-chip{ display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#f4ebe8;
    padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.45); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter:blur(6px); }
  .w-chip svg{ width:13px; height:13px; color:var(--sulfur); }
  .w-info{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:20px 22px 22px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
  .w-title{ font-family:'Space Grotesk'; font-weight:700; font-size:24px; line-height:1.05; letter-spacing:-.02em; }
  .L-feat .w-title, .L-big .w-title{ font-size:clamp(28px,3.4vw,44px); }
  .w-meta{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; color:#d8cbc8; }
  .w-meta .tool{ width:20px; height:20px; border-radius:6px; display:grid; place-items:center; }
  .w-go{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.25); transition:background .3s, transform .4s cubic-bezier(.3,1.5,.5,1); }
  .work:hover .w-go{ background:var(--hell); transform:rotate(45deg); }
  .w-bar{ position:absolute; z-index:3; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.08); }
  .w-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--hell),var(--sulfur)); transition:width .3s; }
  .work:hover .w-bar i{ width:100%; transition:width 2.4s linear; }
  .f-count{ font-family:'JetBrains Mono',monospace; font-size:10px; opacity:.55; margin-left:5px; }
  .filter-btn{ position:relative; z-index:1; font-size:14px; padding:8px 16px; border-radius:999px; color:var(--muted); transition:color .35s; white-space:nowrap; }
  .filter-btn:hover{ color:#fff; }
  .filter-btn.on{ color:#140c0d; }
  /* pílula que desliza (com stretch) até o filtro ativo */
  .filter-pill{ position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:#f4ebe8;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.08), 0 4px 14px -4px rgba(255,255,255,.35); pointer-events:none; }
  .work.hide{ display:none; }
  /* trabalhos "em breve" (combate) */
  .work-soon{ cursor:default; }
  .work-soon .thumb{ filter:saturate(.7); }
  .soon-wrap{ position:absolute; z-index:2; inset:0; display:grid; place-items:center; padding-bottom:30px; }
  .work-soon .thumb{ container-type:inline-size; }
  /* "soon" grande e translúcido, com um reflexo de luz passando devagar */
  .soon-word{ grid-area:1 / 1; font-family:'Space Grotesk'; font-weight:700; letter-spacing:-.06em; line-height:.8; font-size:min(30cqw, 168px);
    color:transparent; background:linear-gradient(105deg, rgba(255,255,255,.05) 35%, rgba(255,214,180,.22) 50%, rgba(255,255,255,.05) 65%);
    background-size:260% 100%; -webkit-background-clip:text; background-clip:text; animation:soon-shine 5s linear infinite; user-select:none; }
  @keyframes soon-shine{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
  .soon-stack{ grid-area:1 / 1; display:flex; flex-direction:column; align-items:center; gap:16px; }
  /* logos do Blender acendendo em sequência, como um indicador de carregamento */
  .soon-row{ display:flex; align-items:center; gap:16px; }
  .sw-logo{ width:24px; height:24px; display:grid; place-items:center; animation:sw-glow 1.9s ease-in-out infinite; animation-delay:calc(var(--i) * .16s); }
  .sw-logo .si{ width:100%; height:100%; color:inherit; }
  @keyframes sw-glow{
    0%,55%,100%{ color:rgba(244,235,232,.22); transform:translateY(0) scale(.88); filter:none; }
    22%{ color:#ff7a1a; transform:translateY(-5px) scale(1.12); filter:drop-shadow(0 0 8px rgba(255,122,26,.75)); }
  }
  .soon-label{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.42em; text-transform:uppercase; color:rgba(255,211,138,.75); padding-left:.42em; }
  .work-soon:hover .sw-logo{ animation-duration:1.3s; }  .soon-chip{ color:#ffd38a; box-shadow:inset 0 0 0 1px rgba(255,194,74,.35); }
  .work-soon:hover .thumb{ transform:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
  /* layout do bento: o JS escolhe as classes L-* conforme quantos cards o filtro deixa visíveis */
  #grid .thumb{ aspect-ratio:4/3; }
  #grid .L-feat .thumb, #grid .L-wide .thumb, #grid .L-full .thumb, #grid .L-big .thumb, #grid .L-tall .thumb, #grid .L-fullSm .thumb{ aspect-ratio:16/9; }
  @media (min-width:640px){
    #grid .L-feat, #grid .L-wide, #grid .L-full, #grid .L-big, #grid .L-tall, #grid .L-fullSm{ grid-column:span 2; }
  }
  @media (min-width:1024px){
    #grid .thumb{ aspect-ratio:auto !important; height:100%; }
    #grid .L-fullSm{ grid-column:span 1; }
    #grid .L-feat{ grid-column:span 2; grid-row:span 2; }
    #grid .L-wide, #grid .L-wideLg{ grid-column:span 2; }
    #grid .L-full{ grid-column:span 3; }
    #grid .L-big{ grid-column:span 3; grid-row:span 2; }
    #grid .L-tall{ grid-column:span 1; grid-row:span 2; }
  }
  /* cards com vídeo real: quadro parado, prévia ao passar o mouse */
  .w-vid{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.75);
    transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .5s; }
  .work:hover .w-vid, .w-vid.playing{ transform:scale(1.04); filter:none; }
  .thumb.has-vid .art{ display:none; }
  .thumb.has-vid .w-bar i{ transition:none !important; }
  .work:hover .thumb.has-vid .play{ opacity:0; }
  #m-thumb .m-vid{ position:absolute; inset:0; z-index:4; width:100%; height:100%; object-fit:contain; background:#000; }
  #m-thumb.has-vid .art, #m-thumb.has-vid .play{ display:none; }
  /* ---------- reveal ---------- */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
  .reveal.in{ opacity:1; transform:none; }

  /* ---------- keycaps (do moodboard) ---------- */
  .key{ --c1:#ff7a1a; --c2:#c2410c; --c3:#7c2d12;
    display:grid; place-items:center; width:var(--s,84px); height:var(--s,84px); border-radius:24%;
    background:linear-gradient(145deg,var(--c1),var(--c2));
    box-shadow:inset 0 -9px 0 var(--c3), inset 0 3px 5px rgba(255,255,255,.45), 0 22px 36px -12px rgba(0,0,0,.7);
    font-family:'Space Grotesk'; font-weight:700; color:rgba(0,0,0,.6);
    animation:bob var(--d,6s) ease-in-out infinite; transform:rotate(var(--r,0deg)); }
  .key.ash{ --c1:#f3eeee; --c2:#cbc1c1; --c3:#8f8484; }
  .key.coal{ --c1:#3a2a2c; --c2:#1c1214; --c3:#090506; color:var(--lava); }
  @keyframes bob{ 50%{ transform:rotate(calc(var(--r,0deg) * -1)) translateY(-14px); } }

  /* ---------- processo: cards fixos; um balão infla dentro de cada um e estoura ---------- */
  .rail{ position:relative; height:28px; }
  .rail .seg{ position:absolute; top:50%; left:50%; width:calc(100% + 1.25rem); height:2px; margin-top:-1px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
  .rail .seg i{ position:absolute; inset:0; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--hell),var(--sulfur)); }
  .rail .node{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; z-index:1;
    background:#1c1113; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); transition:all .4s; }
  .rail .node.lit{ background:var(--sulfur); box-shadow:0 0 0 4px rgba(255,194,74,.18), 0 0 18px var(--lava); }
  .rail .node.done{ background:#3ddc84; box-shadow:0 0 0 4px rgba(61,220,132,.18), 0 0 12px rgba(61,220,132,.8); }
  .fuse-spark{ position:absolute; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; z-index:2; pointer-events:none;
    background:#fff; box-shadow:0 0 6px 2px #ffd36a, 0 0 18px 6px rgba(255,90,30,.8); }

  .step{ --p:0; display:flex; flex-direction:column; overflow:hidden; }
  .step::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
    box-shadow:inset 0 0 0 1.5px rgba(255,90,40,calc(var(--p) * .85)); transition:box-shadow .4s; }
  .step.done::before{ box-shadow:inset 0 0 0 1.5px rgba(61,220,132,.55); }
  /* palco do balão */
  .bstage{ position:relative; height:210px; margin:-8px -8px 0; border-radius:20px; overflow:hidden;
    background:
      radial-gradient(70% 80% at 50% 100%, rgba(255,59,31,calc(.08 + var(--p) * .45)), transparent 70%),
      radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 14px 14px,
      rgba(0,0,0,.18);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
  .balloon{ position:absolute; left:50%; bottom:-8px; width:122px; height:186px; margin-left:-61px; overflow:visible; }
  .balloon .body{ transform-box:fill-box; transform-origin:50% 100%; transform:scale(.34,.3); }
  .balloon .string{ transform-box:fill-box; transform-origin:50% 0; animation:sway 2.4s ease-in-out infinite; }
  @keyframes sway{ 50%{ transform:rotate(6deg); } }
  .step.done .balloon{ visibility:hidden; }
  .burst{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
  .burst line{ stroke:var(--sulfur); stroke-width:3; stroke-linecap:round; }
  .done-mark{ position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
    display:grid; place-items:center; background:#3ddc84; color:#06240f; box-shadow:0 0 0 8px rgba(61,220,132,.15), 0 0 30px rgba(61,220,132,.55);
    transform:scale(0); }
  .step.done .done-mark{ animation:mark .6s cubic-bezier(.3,1.7,.5,1) forwards; }
  @keyframes mark{ from{ transform:scale(0) rotate(-120deg); } to{ transform:scale(1); } }
  .step .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .step.active .meta, .step.done .meta{ color:var(--sulfur); }
  .step .gauge{ height:4px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
  .step .gauge i{ display:block; height:100%; width:calc(var(--p) * 100%); border-radius:inherit; background:linear-gradient(90deg,var(--hell),var(--sulfur)); }
  .step.done .gauge i{ background:#3ddc84; }
  .confetti{ position:absolute; left:0; top:0; pointer-events:none; z-index:30; border-radius:2px; }

  /* ---------- preços ---------- */
  /* capas estáticas dos produtos */
  .pact-thumb{ container-type:inline-size; position:relative; height:230px; margin:10px 10px 0; border-radius:24px; overflow:hidden; isolation:isolate;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
  .pact-thumb::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, rgba(10,5,6,.55)), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55)); }
  .thumb-roblox{ background:radial-gradient(70% 90% at 70% 100%, rgba(255,90,40,.45), transparent 70%), radial-gradient(60% 70% at 20% 0%, rgba(158,15,26,.55), transparent 70%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 16px 16px, #120809; }
  .thumb-bigtext{ position:absolute; z-index:1; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
    font-family:'Space Grotesk'; font-weight:700; font-size:min(23cqw, 112px); line-height:.84; letter-spacing:-.05em;
    color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.28);
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 75%); -webkit-background-clip:text; background-clip:text;
    transition:transform .8s cubic-bezier(.2,.8,.2,1), -webkit-text-stroke-color .4s; }
  .pact:hover .thumb-bigtext{ transform:scale(1.05); -webkit-text-stroke-color:rgba(255,170,120,.55); }  .thumb-art{ position:absolute; z-index:1; left:0; bottom:0; width:100%; height:100%; filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
  .thumb-custom{ background:radial-gradient(70% 90% at 30% 100%, rgba(255,160,40,.4), transparent 70%), radial-gradient(60% 70% at 85% 0%, rgba(200,40,20,.5), transparent 70%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 16px 16px, #120809; }
  .thumb-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 58%; transform:scale(1.35); filter:saturate(1.1) contrast(1.05); }
  .thumb-custom::before{ display:none; content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(70% 90% at 50% 110%, rgba(255,80,30,.35), transparent 70%); mix-blend-mode:screen; }
  .thumb-tag{ position:absolute; z-index:3; left:14px; bottom:12px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#f4ebe8;
    padding:5px 11px; border-radius:999px; background:rgba(0,0,0,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter:blur(6px); }
  .thumb-logo{ position:absolute; z-index:3; top:12px; right:12px; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#fff;
    box-shadow:0 6px 14px -6px rgba(0,0,0,.7); }
  .thumb-logo-hot{ background:linear-gradient(135deg,var(--sulfur),var(--hell)); }
  .pact:hover .thumb-vid, .pact:hover .thumb-art{ transform:scale(1.04); }
  .thumb-vid, .thumb-art{ transition:transform .8s cubic-bezier(.2,.8,.2,1); }
  .pact:hover .thumb-vid{ transform:scale(1.4); }

  #pacts{ perspective:1400px; }
  .pact{ transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .9s ease; overflow:hidden; }
  .pact-hot{ background:linear-gradient(160deg, rgba(255,59,31,.18), rgba(255,255,255,.02) 55%), rgba(20,11,12,.55); }
  .pact-hot::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; box-shadow:inset 0 0 0 1.5px rgba(255,90,40,.4); }
  .pact-stage{ position:relative; height:230px; margin:10px 10px 0; border-radius:24px; overflow:hidden;
    background:radial-gradient(60% 80% at 50% 110%, rgba(255,59,31,.35), transparent 70%),
               radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 16px 16px, #0d0809;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
  .stage-chip{ position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:7px;
    font-family:'JetBrains Mono',monospace; font-size:11px; color:#e9dcd8; padding:5px 11px; border-radius:999px;
    background:rgba(0,0,0,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
  .stage-chip .rec{ width:7px; height:7px; border-radius:50%; background:var(--hell); animation:pulse-rec 1.2s ease-in-out infinite; }
  @keyframes pulse-rec{ 50%{ opacity:.25; } }

  /* boneco R6 diabinho andando */
  .walk{ background-position:0 0, 0 0, 0 0; animation:scroll-dots 1s linear infinite; }
  @keyframes scroll-dots{ to{ background-position:0 0, -32px 0, 0 0; } }
  .ground{ position:absolute; left:0; right:0; bottom:30px; height:2px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 14px, transparent 14px 30px); animation:ground .5s linear infinite; }
  @keyframes ground{ to{ background-position:-30px 0; } }
  .r6{ position:absolute; left:50%; bottom:32px; width:56px; height:112px; margin-left:-28px; animation:r6bob .25s ease-in-out infinite alternate; }
  @keyframes r6bob{ to{ transform:translateY(-4px); } }
  .r6 .part{ position:absolute; border-radius:3px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.18); }
  .r6 .head{ left:14px; top:0; width:28px; height:26px; border-radius:6px; background:#e8382a; }
  .r6 .head::before, .r6 .head::after{ content:""; position:absolute; top:-9px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:11px solid #a50f17; }
  .r6 .head::before{ left:1px; transform:rotate(-14deg); } .r6 .head::after{ right:1px; transform:rotate(14deg); }
  .r6 .eye{ position:absolute; top:9px; width:5px; height:7px; background:#1a0a0a; border-radius:1px; }
  .r6 .eye.l{ left:7px; } .r6 .eye.r{ right:7px; }
  .r6 .torso{ left:10px; top:28px; width:36px; height:40px; background:#2a2d3a; z-index:1; }
  .r6 .arm{ top:28px; width:17px; height:40px; background:#e8382a; transform-origin:50% 4px; }
  .r6 .al{ left:-8px; animation:swing .5s ease-in-out infinite alternate; }
  .r6 .ar{ right:-8px; animation:swing .5s ease-in-out infinite alternate-reverse; z-index:2; }
  .r6 .leg{ top:68px; width:17px; height:40px; background:#1a1c26; transform-origin:50% 2px; }
  .r6 .ll{ left:10px; animation:swing .5s ease-in-out infinite alternate-reverse; }
  .r6 .lr{ right:10px; animation:swing .5s ease-in-out infinite alternate; }
  @keyframes swing{ from{ transform:rotate(32deg); } to{ transform:rotate(-32deg); } }
  .shadow-r6{ position:absolute; left:50%; bottom:24px; width:70px; height:10px; margin-left:-35px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(0,0,0,.7), transparent); animation:shadow-bob .25s ease-in-out infinite alternate; }
  @keyframes shadow-bob{ to{ transform:scaleX(.85); opacity:.7; } }

  /* cauda de diabo com ossos estilo Blender */
  .tail-root{ position:absolute; left:calc(50% - 150px); top:58%; }
  @media (max-width:640px){ .tail-root{ left:calc(50% - 108px); transform:scale(.72); } }
  .bone{ position:absolute; left:0; top:-8px; width:44px; height:16px; transform-origin:3px 50%;
    animation:tailwag 2.4s ease-in-out infinite; animation-delay:calc(var(--i) * -.24s); }
  .bone .bone{ left:39px; top:0; }
  .bone > svg{ position:absolute; inset:0; width:44px; height:16px; overflow:visible; }
  .bone.active > svg polygon{ fill:rgba(255,214,140,.35); stroke:#ffd68c; }
  .bone .tip{ position:absolute; left:38px; top:-6px; width:26px; height:28px; }
  @keyframes tailwag{ 0%,100%{ transform:rotate(-8deg); } 50%{ transform:rotate(8deg); } }

  /* linhas de preço */
  .line-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-top:1px solid rgba(255,255,255,.08); }
  .money{ display:flex; align-items:center; gap:8px; white-space:nowrap; font-family:'Space Grotesk'; font-weight:700; font-size:32px; line-height:1; }
  .money .rbx-ico{ width:24px; height:24px; color:#f0b93a; transition:opacity .3s, width .3s; }
  .money .amt-wrap{ display:inline-block; overflow:hidden; height:1.1em; line-height:1.1em; vertical-align:bottom; }
  .money .amt{ display:inline-block; }
  .money.is-usd{ color:#3ddc84; }
  .money.is-usd .rbx-ico{ opacity:0; width:0; }
  .money .from{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
  .money .devex-tag{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:400; color:var(--muted); padding:2px 6px; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
  .min-chip{ display:inline-block; font-size:13px; padding:7px 14px; border-radius:999px; color:#ffd38a; background:rgba(255,194,74,.1); box-shadow:inset 0 0 0 1px rgba(255,194,74,.3); }
  .min-chip b{ color:#fff; }
  .see-ex{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; font-size:14px; font-weight:600;
    background:rgba(255,255,255,.07); box-shadow:inset 1px 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.08); transition:background .25s, transform .25s; }
  .see-ex svg{ color:var(--hell); transition:transform .3s; }
  .see-ex:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }
  .see-ex:hover svg{ transform:scale(1.25); }
  .min-chip{ display:inline-flex !important; align-items:center; gap:5px; line-height:1.2; }
  .money.mini{ display:inline-flex; align-items:center; gap:4px; font-family:inherit; font-size:inherit; font-weight:700; line-height:1.2; }
  .money.mini .amt-wrap{ height:1.2em; line-height:1.2em; vertical-align:middle; }
  .money.mini .rbx-ico{ width:13px; height:13px; }
  .money.mini.is-usd{ color:#fff; }

  /* ---------- about: Luci em ASCII no fogo ---------- */
  .luci-stage{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end; container-type:inline-size; border-radius:24px; overflow:hidden; cursor:crosshair;
    background:radial-gradient(80% 50% at 50% 105%, rgba(255,80,20,.3), transparent 70%), #070304;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -40px 80px -40px rgba(255,90,30,.35); }
  #luci-ascii{ background:radial-gradient(34% 40% at 52% 40%, rgba(255,92,30,.55), rgba(190,30,20,.25) 55%, transparent 100%); font-weight:600; display:block; margin:0; padding:24px 0 30px; font-family:'JetBrains Mono',monospace; line-height:1; letter-spacing:0;
    white-space:pre; user-select:none; text-align:center; font-size:calc((100cqw - 8px) / 110 / .6); }
  .skill{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:18px; background:rgba(255,255,255,.035);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); transition:background .3s, transform .3s, box-shadow .3s; }
  .skill:hover{ background:rgba(255,59,31,.09); box-shadow:inset 0 0 0 1px rgba(255,90,40,.35); transform:translateY(-2px); }
  .skill-ico{ flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:var(--hell);
    background:rgba(255,59,31,.12); transition:transform .4s cubic-bezier(.3,1.6,.5,1), background .3s, color .3s; }
  .skill-ico svg{ width:20px; height:20px; }
  .skill:hover .skill-ico{ transform:rotate(-8deg) scale(1.1); background:var(--hell); color:#fff; }
  .tool-tile{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 8px; border-radius:18px; text-align:center;
    font-size:13px; font-weight:500; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .35s cubic-bezier(.3,1.6,.5,1), background .3s; }
  .tool-tile:hover{ transform:translateY(-4px); background:rgba(255,255,255,.07); }
  .about-cta{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 18px; border-radius:20px;
    background:linear-gradient(135deg, rgba(61,220,132,.08), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(61,220,132,.22); }
  .tool-logo{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
    box-shadow:inset 0 -4px 0 rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.35), 0 10px 20px -10px rgba(0,0,0,.8); }

  /* ---------- about: card de origem ---------- */
  .origin-tile{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:22px; position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    transition:transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .3s; }
  .origin-tile::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
    background:radial-gradient(120px circle at 30px 50%, rgba(255,194,74,.18), transparent 70%); }
  .origin-tile:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(255,194,74,.35), 0 16px 30px -18px rgba(255,140,40,.6); }
  .origin-tile:hover::after{ opacity:1; }
  .origin-ico{ flex:none; width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
    background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -8px 16px -10px rgba(255,140,40,.4); }
  .tile-label{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--sulfur); }
  .flag-wave{ width:40px; height:29px; border-radius:5px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); transform-origin:0 50%;
    animation:wave-flag 2.6s ease-in-out infinite; }
  @keyframes wave-flag{ 0%,100%{ transform:perspective(120px) rotateY(0) skewY(0); } 50%{ transform:perspective(120px) rotateY(-18deg) skewY(-3deg); } }
  .origin-tile:hover .flag-wave{ animation-duration:1.1s; }
  /* bandeira em 11 fatias: cada uma sobe/desce com atraso e escurece nas dobras → onda de verdade */
  .flag-box{ position:relative; }
  .pole{ position:absolute; left:9px; top:9px; bottom:9px; width:2.5px; border-radius:2px; background:linear-gradient(90deg,#c9b38a,#7a6440); }
  .pole::before{ content:""; position:absolute; top:-3px; left:-1.5px; width:5.5px; height:5.5px; border-radius:50%; background:#ffd77a; box-shadow:0 0 6px rgba(255,215,122,.7); }
  .bflag{ position:absolute; left:12px; top:12px; display:flex; width:36px; height:25px; filter:drop-shadow(0 5px 6px rgba(0,0,0,.45)); }
  .bflag i{ flex:1; height:100%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' preserveAspectRatio='none'%3E%3Crect width='28' height='20' fill='%23009c3b'/%3E%3Cpath d='M14 2.5 25.5 10 14 17.5 2.5 10z' fill='%23ffdf00'/%3E%3Ccircle cx='14' cy='10' r='4.4' fill='%23002776'/%3E%3Cpath d='M9.8 9.2c2.8-.5 5.8.1 8.3 1.6' stroke='%23fff' stroke-width='.8' fill='none'/%3E%3C/svg%3E") no-repeat; background-size:36px 25px; background-position:calc(var(--i) * -3.2727px) 0;
    --amp:calc(.3px + var(--i) * .26px); animation:flag-wave 1.8s ease-in-out infinite; animation-delay:calc(var(--i) * -.13s); }
  .bflag i:first-child{ border-radius:2px 0 0 2px; } .bflag i:last-child{ border-radius:0 2px 2px 0; }
  @keyframes flag-wave{
    0%,100%{ transform:translateY(calc(var(--amp) * -1)) skewY(-4deg); filter:brightness(1.12); }
    50%{ transform:translateY(var(--amp)) skewY(4deg); filter:brightness(.72); }
  }
  .origin-tile:hover .bflag i{ animation-duration:.9s; }
  /* globo: continentes deslizando dentro da esfera + sombreamento + satélite em órbita */
  .globe3d{ width:52px; height:52px; overflow:visible; filter:drop-shadow(0 0 8px rgba(255,140,60,.35)); }
  .g-spin{ animation:g-spin 9s linear infinite; }
  @keyframes g-spin{ to{ transform:translateX(-48px); } }
  .g-br{ fill:#ff3b1f; fill-opacity:1; }
  .g-sat{ offset-path:path('M44.0 17.5 A21 6.5 -18 1 1 4.0 30.5 A21 6.5 -18 1 1 44.0 17.5'); animation:g-sat 5s linear infinite; filter:drop-shadow(0 0 3px #fff); }
  @keyframes g-sat{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
  .origin-tile:hover .g-spin{ animation-duration:3s; }
  .globe{ width:32px; height:32px; color:var(--sulfur); }
  .globe-meridian{ transform-origin:12px 12px; animation:spin-meridian 4s linear infinite; }
  .origin-tile:hover .globe-meridian{ animation-duration:1.4s; }
  @keyframes spin-meridian{ 0%{ transform:scaleX(1); } 25%{ transform:scaleX(0); } 50%{ transform:scaleX(-1); } 75%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }
  .caret{ display:inline-block; width:2px; height:.9em; margin-left:3px; vertical-align:-.08em; background:var(--hell); animation:caret 1s steps(1) infinite; }
  @keyframes caret{ 50%{ opacity:0; } }
  .lang{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; padding:3px 10px; border-radius:999px;
    background:rgba(255,194,74,.1); color:#ffd38a; box-shadow:inset 0 0 0 1px rgba(255,194,74,.25); }
  .lang b{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; padding:1px 5px; border-radius:999px; background:var(--sulfur); color:#3a1800; }
  /* ---------- about: card "Behind the keyframes" ---------- */
  @property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  .kf-card{ overflow:hidden; }
  .kf-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3;
    background:conic-gradient(from var(--ang), transparent 0 62%, rgba(255,59,31,.9) 74%, #ffc24a 80%, transparent 90%);
    -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 exclude, linear-gradient(#000 0 0); animation:border-spin 7s linear infinite; }
  @keyframes border-spin{ to{ --ang:360deg; } }
  /* mini graph editor */
  .kf-card > :not(.graph-ed){ position:relative; z-index:1; }
  @media (max-width:1023px){ .graph-ed{ display:none; } }
  .graph-ed{ position:absolute; z-index:0; top:22px; right:22px; width:min(24%,240px); opacity:.6; pointer-events:none;
    mask-image:radial-gradient(120% 120% at 100% 0%, #000 55%, transparent); -webkit-mask-image:radial-gradient(120% 120% at 100% 0%, #000 55%, transparent); }
  .ge-curve{ fill:none; stroke:var(--hell); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:320; stroke-dashoffset:320; }
  .reveal.in .ge-curve{ animation:draw-curve 1.6s .3s cubic-bezier(.6,0,.2,1) forwards; }
  @keyframes draw-curve{ to{ stroke-dashoffset:0; } }
  .ge-handles path{ stroke:rgba(255,194,74,.55); stroke-width:1; stroke-dasharray:3 3; }
  .ge-keys rect{ fill:var(--sulfur); stroke:#2a1a00; }
  .ge-ball{ fill:#fff; filter:drop-shadow(0 0 6px #ffc24a); offset-path:path('M10 100 C 50 100, 60 18, 110 18 S 170 100, 210 100');
    animation:ride 2.4s cubic-bezier(.45,0,.55,1) infinite alternate; }
  @keyframes ride{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
  /* "keyframes": letras entram com squash & stretch */
  .kf-word{ display:inline-block; white-space:nowrap; }
  .kf-word .ch{ display:inline-block; transform-origin:50% 100%; }
  .reveal.in .kf-word .ch{ animation:letter-pop .7s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(.25s + var(--i) * 55ms); }
  @keyframes letter-pop{ 0%{ transform:translateY(60%) scale(.6,1.4); opacity:0; } 60%{ transform:translateY(-8%) scale(1.15,.85); opacity:1; } 100%{ transform:none; } }
  .kf-word .ch:hover{ animation:letter-hop .5s cubic-bezier(.3,1.5,.5,1); }
  @keyframes letter-hop{ 40%{ transform:translateY(-22%) scale(.9,1.12); } 70%{ transform:translateY(0) scale(1.12,.88); } }
  /* trilha de keyframes sob o título */
  .kf-track{ position:relative; height:14px; margin-top:14px; max-width:420px; }
  .kf-track::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(255,255,255,.12); }
  .kf-track i{ position:absolute; top:50%; left:var(--x); width:9px; height:9px; margin:-4.5px 0 0 -4.5px; transform:rotate(45deg); background:#2a1a12;
    box-shadow:inset 0 0 0 1px rgba(255,194,74,.5); animation:key-lit 3s linear infinite; }
  .kf-track i:nth-child(1){ animation-delay:0s; } .kf-track i:nth-child(2){ animation-delay:.9s; } .kf-track i:nth-child(3){ animation-delay:1.86s; } .kf-track i:nth-child(4){ animation-delay:2.94s; }
  @keyframes key-lit{ 0%,8%{ background:var(--sulfur); box-shadow:0 0 10px var(--sulfur); } 20%,100%{ background:#2a1a12; box-shadow:inset 0 0 0 1px rgba(255,194,74,.5); } }
  .kf-track b{ position:absolute; top:-3px; bottom:-3px; width:2px; background:#4c8dff; box-shadow:0 0 8px #4c8dff; animation:play 3s linear infinite; }
  /* destaques na bio desenhados como marca-texto */
  .hl{ color:#fff; background:linear-gradient(90deg, rgba(255,59,31,.45), rgba(255,122,26,.35)) no-repeat 0 88% / 0% 38%; padding:0 2px; border-radius:3px;
    transition:background-size .7s cubic-bezier(.2,.8,.2,1); }
  .reveal.in .hl{ background-size:100% 38%; }
  .reveal.in .hl:nth-of-type(1){ transition-delay:.5s; } .reveal.in .hl:nth-of-type(2){ transition-delay:.65s; } .reveal.in .hl:nth-of-type(3){ transition-delay:.8s; }
  .reveal.in .hl:nth-of-type(4){ transition-delay:.95s; } .reveal.in .hl:nth-of-type(5){ transition-delay:1.1s; }
  /* entrada em cascata dos blocos */
  .reveal .skill, .reveal .tool-tile{ opacity:0; transform:translateY(16px); }
  .reveal.in .skill, .reveal.in .tool-tile{ animation:tile-in .6s cubic-bezier(.2,.9,.2,1) forwards; animation-delay:calc(.5s + var(--i) * 90ms); }
  .reveal.in .tool-tile{ animation-delay:calc(.85s + var(--i) * 90ms); }
  @keyframes tile-in{ to{ opacity:1; transform:none; } }
  .tool-logo{ animation:tool-bob 3.2s ease-in-out infinite; animation-delay:calc(var(--i) * -.5s); }
  @keyframes tool-bob{ 50%{ transform:translateY(-4px) rotate(-3deg); } }
  .tool-tile:hover{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--glow) 55%, transparent), 0 14px 30px -14px var(--glow); }
  .about-cta{ position:relative; overflow:hidden; }
  .about-cta::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(61,220,132,.16) 50%, transparent 70%);
    transform:translateX(-100%); animation:cta-shine 3.5s ease-in-out infinite; pointer-events:none; }
  @keyframes cta-shine{ 60%,100%{ transform:translateX(100%); } }

  /* ---------- about: coluna direita reconstruída ---------- */
  .sub-head{ display:flex; align-items:center; gap:10px; margin:40px 0 14px; font-family:'JetBrains Mono',monospace; font-size:11px;
    letter-spacing:.16em; text-transform:uppercase; color:#d8cbc8; }
  .sub-head span{ color:var(--hell); }
  .sub-head i{ flex:1; height:1px; background:linear-gradient(90deg, rgba(255,90,40,.5), transparent); transform-origin:left; transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.8,.2,1) .4s; }
  .reveal.in .sub-head i{ transform:none; }

  /* cards de especialidade com mini animação */
  .skill2{ position:relative; width:100%; height:100%; display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto; column-gap:14px; row-gap:6px;
    align-items:center; text-align:left; padding:14px 16px 14px 14px; border-radius:20px; overflow:hidden; isolation:isolate;
    background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
    transition:transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .3s; }
  .skill2::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s;
    background:radial-gradient(160px circle at 32px 50%, rgba(255,59,31,.22), transparent 70%); }
  .skill2:hover, .skill2:focus-visible{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(255,90,40,.45), 0 18px 34px -20px rgba(255,59,31,.8); outline:none; }
  .skill2:hover::before, .skill2:focus-visible::before{ opacity:1; }
  .sk-viz{ grid-row:span 2; width:64px; height:64px; border-radius:16px; background:rgba(0,0,0,.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); overflow:visible; }
  .sk-text{ display:flex; flex-direction:column; }
  .sk-text b{ font-weight:600; }
  .sk-text small{ font-size:13px; color:var(--muted); }
  .sk-go{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--sulfur); opacity:.55; transition:opacity .3s, gap .3s; }
  .sk-go svg{ width:12px; height:12px; }
  .skill2:hover .sk-go{ opacity:1; gap:7px; }
  .sk-ground{ stroke:rgba(255,255,255,.18); stroke-width:1.2; }
  /* bola quicando (squash & stretch) */
  .sk-ball{ fill:var(--hell); transform-box:fill-box; transform-origin:50% 100%; animation:sk-bounce 1s infinite; }
  .sk-ghost{ fill:var(--hell); }
  .sk-shadow{ fill:rgba(0,0,0,.6); transform-box:fill-box; transform-origin:center; animation:sk-shadow 1s infinite; }
  @keyframes sk-bounce{
    0%,100%{ transform:translateY(0) scale(1.3,.7); animation-timing-function:cubic-bezier(.2,.6,.35,1); }
    8%{ transform:translateY(-6px) scale(.82,1.2); }
    50%{ transform:translateY(-30px) scale(1); animation-timing-function:cubic-bezier(.65,0,.8,.4); }
    92%{ transform:translateY(-4px) scale(.85,1.18); }
  }
  @keyframes sk-shadow{ 0%,100%{ transform:scale(1.2); opacity:.8; } 50%{ transform:scale(.45); opacity:.25; } }
  /* cadeia de ossos estilo Blender */
  .sk-bone{ fill:rgba(255,161,61,.2); stroke:#ffa13d; stroke-width:1.1; stroke-linejoin:round; }
  .sk-bone-act{ fill:rgba(255,214,140,.35); stroke:#ffd68c; }
  .sk-joint{ fill:#ffa13d; }
  .sk-b1{ transform-origin:20px 54px; animation:sk-swing 2.6s ease-in-out infinite; }
  .sk-b2{ transform-origin:22px 24px; animation:sk-swing 2.6s ease-in-out infinite -.35s; }
  .sk-b3{ transform-origin:42px 12px; animation:sk-swing 2.6s ease-in-out infinite -.7s; }
  @keyframes sk-swing{ 0%,100%{ transform:rotate(-9deg); } 50%{ transform:rotate(9deg); } }
  /* câmera: enquadramento com dolly-in e gravação */
  .sk-cam{ transform-origin:32px 32px; animation:sk-dolly 3.2s ease-in-out infinite; }
  .sk-frame{ fill:none; stroke:#f4ebe8; stroke-width:1.6; stroke-linecap:round; }
  .sk-subject{ fill:var(--hell); animation:sk-subj 3.2s ease-in-out infinite; }
  .sk-subject-b{ fill:none; stroke:var(--hell); stroke-width:3; stroke-linecap:round; animation:sk-subj 3.2s ease-in-out infinite; }
  .sk-rec{ fill:#ff3b1f; animation:pulse-rec 1s steps(1) infinite; }
  .sk-dolly{ stroke:rgba(255,255,255,.18); stroke-width:1; stroke-dasharray:2 3; }
  .sk-dolly-dot{ fill:var(--sulfur); animation:sk-track 3.2s ease-in-out infinite; }
  @keyframes sk-dolly{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.78); } }
  @keyframes sk-subj{ 0%,100%{ transform:translateX(-6px); } 50%{ transform:translateX(6px); } }
  @keyframes sk-track{ 0%,100%{ transform:translateX(-18px); } 50%{ transform:translateX(18px); } }
  /* golpe: arco do corte + impacto + linhas de velocidade */
  .sk-slash{ fill:none; stroke:rgba(255,194,74,.35); stroke-width:7; stroke-linecap:round; stroke-dasharray:70; stroke-dashoffset:70; animation:sk-slash 1.6s cubic-bezier(.2,.8,.2,1) infinite; }
  .sk-slash-core{ fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-dasharray:70; stroke-dashoffset:70; animation:sk-slash 1.6s cubic-bezier(.2,.8,.2,1) infinite; }
  .sk-hit{ fill:var(--sulfur); transform-origin:44px 39px; animation:sk-hit 1.6s ease-out infinite; }
  .sk-speed{ stroke:rgba(255,255,255,.35); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:10; animation:sk-speed 1.6s linear infinite; }
  @keyframes sk-slash{ 0%{ stroke-dashoffset:70; opacity:1; } 30%{ stroke-dashoffset:0; opacity:1; } 60%,100%{ stroke-dashoffset:-70; opacity:0; } }
  @keyframes sk-hit{ 0%,22%{ transform:scale(0) rotate(0); opacity:0; } 30%{ transform:scale(1.3) rotate(20deg); opacity:1; } 55%,100%{ transform:scale(.4) rotate(45deg); opacity:0; } }
  @keyframes sk-speed{ to{ stroke-dashoffset:-40; } }
  .skill2:hover .sk-viz *{ animation-duration:.6s; }
  .skill2:hover .sk-cam, .skill2:hover .sk-subject, .skill2:hover .sk-subject-b, .skill2:hover .sk-dolly-dot{ animation-duration:1.6s; }
  .skill2:hover .sk-b1, .skill2:hover .sk-b2, .skill2:hover .sk-b3{ animation-duration:1.3s; }

  /* ferramentas como fichas */
  .tool-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:18px;
    background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .3s, background .3s; }
  .tool-row b{ display:flex; align-items:center; gap:8px; font-weight:600; }
  .tool-row small{ display:block; font-size:12.5px; color:var(--muted); }
  .tool-row:hover{ transform:translateY(-3px); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--glow) 55%, transparent), 0 14px 30px -16px var(--glow); }
  .tool-row:hover .tool-logo{ animation-duration:.8s; }
  .tool-main{ font-style:normal; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    padding:2px 7px; border-radius:999px; background:var(--sulfur); color:#3a1800; }
  .reveal .tool-row{ opacity:0; transform:translateY(16px); }
  .reveal.in .tool-row{ animation:tile-in .6s cubic-bezier(.2,.9,.2,1) forwards; animation-delay:calc(.85s + var(--i) * 90ms); }
  .reveal li:has(> .skill2){ opacity:0; transform:translateY(16px); }
  .reveal.in li:has(> .skill2){ animation:tile-in .6s cubic-bezier(.2,.9,.2,1) forwards; animation-delay:calc(.5s + var(--i) * 90ms); }

  /* chamada final */
  .about-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  @media (min-width:1024px){ .about-cta{ min-height:var(--cap-h, auto); padding-left:22px; padding-right:22px; } }
  .cta-ring{ position:relative; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(61,220,132,.12); box-shadow:inset 0 0 0 1px rgba(61,220,132,.35); }
  .cta-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:600; color:#fff;
    background:#5865f2; box-shadow:0 10px 26px -10px rgba(88,101,242,.9); transition:transform .3s cubic-bezier(.3,1.5,.5,1), background .3s; }
  .cta-btn:hover{ transform:translateY(-2px) scale(1.03); background:#6d78ff; }

  /* ---------- contato ---------- */
  .contact-card{ position:relative; overflow:hidden; }
  .contact-card::before{ content:""; position:absolute; inset:-30%; z-index:-1; pointer-events:none;
    background:radial-gradient(40% 40% at 75% 55%, rgba(255,80,30,.22), transparent 70%), radial-gradient(35% 35% at 15% 20%, rgba(158,15,26,.25), transparent 70%);
    animation:contact-drift 14s ease-in-out infinite alternate; }
  @keyframes contact-drift{ to{ transform:translate(-4%, 3%) scale(1.05); } }
  .send-list{ display:grid; gap:8px; max-width:440px; }
  .send-list li{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
  .send-list span{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--hell); }
  .send-list b{ display:block; font-weight:600; font-size:15px; }
  .send-list small{ display:block; font-size:13px; color:var(--muted); }
  .reveal .send-list li{ opacity:0; transform:translateX(-12px); }
  .reveal.in .send-list li{ animation:send-in .6s cubic-bezier(.2,.9,.2,1) forwards; animation-delay:calc(.4s + var(--i) * .1s); }
  @keyframes send-in{ to{ opacity:1; transform:none; } }
  .discord-btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; font-weight:600; color:#fff; background:#5865f2;
    box-shadow:0 14px 34px -12px rgba(88,101,242,.85); transition:transform .3s cubic-bezier(.3,1.6,.5,1), background .25s; }
  .discord-btn:hover{ background:#6d78ff; transform:translateY(-2px); }
  .discord-btn svg{ transition:transform .3s; } .discord-btn:hover svg:last-child{ transform:translate(2px,-2px); }
  .copy-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 18px; border-radius:999px; font-weight:600; font-size:14px; color:#e9dcd8;
    background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:background .25s, color .25s; }
  .copy-btn:hover{ background:rgba(255,255,255,.1); color:#fff; }
  .copy-btn.done{ color:#7dffb0; box-shadow:inset 0 0 0 1px rgba(61,220,132,.45); }
  /* o documento do pacto */
  .pact-doc{ position:relative; padding:26px 26px 22px; border-radius:24px; transform:rotate(1.2deg); transition:transform .6s cubic-bezier(.2,.8,.2,1);
    background:linear-gradient(160deg, #241517, #170d0f); box-shadow:inset 0 0 0 1px rgba(255,194,74,.18), inset 0 0 60px rgba(0,0,0,.45), 0 40px 80px -30px rgba(0,0,0,.9); }
  .pact-doc::before{ content:""; position:absolute; inset:10px; border-radius:16px; pointer-events:none; border:1px dashed rgba(255,194,74,.16); }
  .pact-doc:hover{ transform:rotate(0) translateY(-4px); }
  .pd-head{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,211,138,.7); }
  .pd-title{ margin-top:14px; font-family:'Space Grotesk'; font-weight:700; font-size:26px; letter-spacing:-.02em; }
  .pd-rows{ margin-top:14px; }
  .pd-rows > div{ display:grid; grid-template-columns:110px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:14px; }
  .pd-rows dt{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
  .pd-rows dd{ color:#f4ebe8; }
  .pd-open{ display:flex; align-items:center; gap:8px; color:#7dffb0 !important; }
  .reveal .pd-rows > div{ opacity:0; }
  .reveal.in .pd-rows > div{ animation:send-in .5s ease forwards; animation-delay:calc(.5s + var(--i) * .08s); }
  .pd-sign{ display:flex; align-items:flex-end; gap:16px; margin-top:16px; }
  /* assinatura caligráfica: o texto é revelado da esquerda p/ a direita seguindo a ponta da caneta */
  .sig{ position:relative; width:max-content; padding:0 6px; animation:sig-glow 2.4s ease-in-out infinite; }
  @keyframes sig-glow{ 0%,100%{ filter:drop-shadow(0 0 5px rgba(255,40,10,.75)) drop-shadow(0 0 16px rgba(255,80,20,.35)); }
    50%{ filter:drop-shadow(0 0 8px rgba(255,60,10,.9)) drop-shadow(0 0 26px rgba(255,110,30,.5)); } }
  .sig-text{ display:block; font-family:'Mrs Saint Delafield', cursive; font-size:76px; line-height:1; padding:8px 18px 0 4px;
    background:linear-gradient(0deg, #7a0a12 0%, #d8180f 28%, #ff3b1f 48%, #ff7a1a 70%, #ffc24a 88%, #fff1c4 100%);
    background-size:100% 230%; -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:url(#sig-fire); clip-path:inset(0 100% 0 0); animation:fire-flow 1.4s ease-in-out infinite alternate; }
  @keyframes fire-flow{ from{ background-position:0 100%; } to{ background-position:0 30%; } }
  .sig-flourish{ position:absolute; left:0; bottom:-6px; width:100%; height:auto; overflow:visible; }
  .sig-flourish path{ fill:none; stroke:url(#fl-grad); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; filter:url(#sig-fire); }
  .sig-nib{ position:absolute; top:52%; left:0; width:8px; height:8px; border-radius:50%; background:#fff3c4; opacity:0;
    box-shadow:0 0 8px 3px rgba(255,190,90,.95), 0 0 20px 8px rgba(255,50,15,.65); }
  .sig-embers{ position:absolute; inset:0; pointer-events:none; opacity:0; }
  .sig-embers i{ position:absolute; left:var(--x); bottom:30%; width:3px; height:3px; border-radius:50%; background:#ffc24a;
    box-shadow:0 0 6px 2px rgba(255,90,20,.85); animation:sig-ember 2.2s ease-out infinite; animation-delay:var(--d); }
  @keyframes sig-ember{ 0%{ transform:translate(0,0) scale(1); opacity:0; } 15%{ opacity:1; } 100%{ transform:translate(-8px,-46px) scale(.2); opacity:0; } }
  .reveal.in .sig-text{ animation:sig-write 1.9s cubic-bezier(.55,.05,.35,1) 1.1s forwards, fire-flow 1.4s ease-in-out infinite alternate; }
  .reveal.in .sig-nib{ animation:sig-nib 1.9s cubic-bezier(.55,.05,.35,1) 1.1s forwards; }
  .reveal.in .sig-flourish path{ animation:sign .7s cubic-bezier(.5,0,.3,1) 2.85s forwards; }
  .reveal.in .sig-embers{ animation:embers-on .6s ease 2.6s forwards; }
  @keyframes embers-on{ to{ opacity:1; } }
  @keyframes sig-write{ to{ clip-path:inset(0 0 0 0); } }
  @keyframes sig-nib{ 0%{ opacity:1; left:4%; top:60%; } 30%{ top:30%; } 55%{ top:62%; } 80%{ top:40%; } 96%{ opacity:1; } 100%{ opacity:0; left:92%; top:55%; } }
  @keyframes sign{ to{ stroke-dashoffset:0; } }  .pd-signed{ margin-top:12px; font-size:12px; font-style:italic; color:var(--muted); }
  /* selo de cera com o "S" em relevo */
  .seal{ position:relative; flex:none; width:108px; height:108px; filter:drop-shadow(0 12px 14px rgba(0,0,0,.65)); opacity:0; transform:scale(1.8) rotate(-30deg); }
  .seal svg{ position:absolute; inset:0; width:100%; height:100%; }
  .seal-emb{ position:absolute; left:50%; top:50%; width:44px; height:60px; margin:-30px 0 0 -22px;
    -webkit-mask:url(../logo-mask.png) center / contain no-repeat; mask:url(../logo-mask.png) center / contain no-repeat;
    background:linear-gradient(150deg, #8e0c14, #4f050b); }
  /* "S" afundado na cera: sombra no alto-esquerda, luz na borda de baixo-direita */
  .seal-emb-dark{ background:#2a0105; transform:translate(-1.4px, -1.6px); opacity:.9; }
  .seal-emb-light{ background:#ff9c80; transform:translate(1.3px, 1.5px); opacity:.6; }  .reveal.in .seal{ animation:stamp .6s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay:3.4s; }
  @keyframes stamp{ 0%{ opacity:0; transform:scale(1.9) rotate(-30deg); filter:drop-shadow(0 40px 30px rgba(0,0,0,.4)); }
    70%{ opacity:1; transform:scale(.9) rotate(-8deg); } 100%{ opacity:1; transform:scale(1) rotate(-12deg); } }  /* ---------- stats do hero ---------- */
  .stat-tile{ display:block; padding:16px 18px; border-radius:22px; transition:transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .3s; }
  .stat-label{ display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  .stat-label svg{ width:15px; height:15px; color:var(--hell); flex:none; }
  .stat-sub{ margin-top:6px; font-size:12.5px; color:var(--muted); }
  .stat-go{ color:var(--sulfur); white-space:nowrap; }
  .stat-go svg{ display:inline; width:11px; height:11px; transition:transform .3s; }
  .stat-link:hover{ transform:translateY(-3px); box-shadow:inset 1px 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,90,40,.45), 0 18px 34px -18px rgba(255,59,31,.8); }
  .stat-link:hover .stat-go svg{ transform:translate(2px,-2px); }
  .reel-stack{ display:flex; flex:none; }
  .reel-stack video{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:#1a0d0e; box-shadow:0 0 0 2px #1a0d0e, 0 0 0 3px rgba(255,90,40,.45);
    transition:transform .35s cubic-bezier(.3,1.5,.5,1); }
  .reel-stack video + video{ margin-left:-12px; }
  .stat-link:hover .reel-stack video:nth-child(1){ transform:translateX(-4px) rotate(-6deg); }
  .stat-link:hover .reel-stack video:nth-child(3){ transform:translateX(4px) rotate(6deg); }
  .year{ height:6px; border-radius:99px; background:rgba(255,255,255,.1); position:relative; overflow:hidden; }
  .year::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,var(--hell),var(--sulfur));
    transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
  .stats.in .year::after{ transform:none; }
  .stats.in .year:nth-child(2)::after{ transition-delay:.25s; } .stats.in .year:nth-child(3)::after{ transition-delay:.5s; } .stats.in .year:nth-child(4)::after{ transition-delay:.75s; }
  .rig{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; font-weight:600; font-size:14px;
    background:rgba(255,255,255,.07); box-shadow:inset 1px 1px 0 rgba(255,255,255,.18);
    opacity:0; transform:translateY(10px) scale(.9); transition:all .5s cubic-bezier(.3,1.5,.5,1) calc(.6s + var(--i) * .12s), background .25s 0s; }
  .rig:hover{ background:rgba(255,255,255,.14); }
  .rig-hot{ background:linear-gradient(135deg,var(--hell),#c2261b); box-shadow:inset 1px 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px rgba(255,59,31,.7); }
  .rig-hot:hover{ background:linear-gradient(135deg,var(--lava),var(--hell)); }
  .stats.in .rig{ opacity:1; transform:none; }

  /* ---------- squash & stretch (faixa de ícones saltando) ---------- */
  .stage{ --dur:2s; --jump:120px; --cap:76px; }
  @media (max-width:640px){ .stage{ --jump:80px; --cap:50px; } }
  .hop{ position:absolute; left:50%; bottom:46px; margin-left:calc(var(--cap) / -2);
    animation:hop var(--dur) infinite; animation-delay:var(--d); }
  @keyframes hop{
    0%,100%{ transform:translateY(0); animation-timing-function:cubic-bezier(.15,.7,.35,1); }   /* sobe: ease-out */
    50%{ transform:translateY(calc(var(--jump) * -1)); animation-timing-function:cubic-bezier(.65,0,.85,.3); } /* desce: ease-in */
  }
  .cap{ width:var(--cap); height:var(--cap); border-radius:26%; display:grid; place-items:center; transform-origin:50% 100%;
    background:linear-gradient(145deg,var(--c1),var(--c2));
    box-shadow:inset 0 calc(var(--cap) * -.1) 0 var(--c3), inset 0 3px 5px rgba(255,255,255,.45), 0 16px 30px -12px rgba(0,0,0,.8);
    animation:squash var(--dur) infinite; animation-delay:var(--d); }
  @keyframes squash{
    0%,100%{ transform:scale(1.28,.72); }      /* contato com o chão */
    7%{ transform:scale(.84,1.2); }            /* stretch na saída */
    22%,78%{ transform:scale(1,1); }
    92%{ transform:scale(.86,1.18); }          /* stretch na queda */
  }
  .shadow{ position:absolute; left:50%; bottom:38px; width:calc(var(--cap) * 1.1); height:12px; margin-left:calc(var(--cap) * -.55);
    border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.75), transparent);
    animation:shadow var(--dur) infinite; animation-delay:var(--d); }
  @keyframes shadow{ 0%,100%{ transform:scale(1.25); opacity:.9; } 50%{ transform:scale(.4); opacity:.25; } }
  .floor{ position:absolute; left:0; right:0; bottom:44px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); }
  .ruler{ background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px calc(100% / 48));
    background-size:100% 6px; background-repeat:no-repeat; background-position:bottom; }
  .playhead{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#4c8dff; box-shadow:0 0 10px #4c8dff;
    animation:play var(--dur) linear infinite; }
  .playhead::before{ content:""; position:absolute; top:-4px; left:-5px; width:12px; height:10px; border-radius:3px; background:#4c8dff; }
  @keyframes play{ from{ left:0; } to{ left:100%; } }
  .kf{ position:absolute; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; transform:rotate(45deg); background:#ffc24a; border:1px solid #2a1a00; }

  /* ---------- ícones oficiais via máscara (Simple Icons) ---------- */
  .si{ display:inline-block; background:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
  .si-blender{ --i:url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/blender.svg); }
  .si-roblox{ --i:url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/roblox.svg); }
  .si-studio{ --i:url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/robloxstudio.svg); }
  .si-discord{ --i:url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/discord.svg); }

  /* painel suspenso "Past works" */
  .nav-drop{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
  .nav-drop svg{ width:14px; height:14px; transition:transform .35s cubic-bezier(.3,1.4,.5,1); }
  .nav-drop[aria-expanded="true"]{ color:#fff; }
  .nav-drop[aria-expanded="true"]::after{ transform:scaleX(1); }
  .nav-drop[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .works-menu{ position:absolute; left:0; right:0; top:100%; padding:0 16px; pointer-events:none; opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .25s, transform .4s cubic-bezier(.2,.9,.2,1), visibility 0s .4s; }
  .works-menu.open{ pointer-events:auto; opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .4s cubic-bezier(.2,.9,.2,1); }
  .wm-inner{ max-width:80rem; margin:10px auto 0; padding:22px; border-radius:26px; max-height:calc(100vh - 110px); overflow:auto;
    background:rgba(14,8,9,.94); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -30px rgba(0,0,0,.9); }
  .wm-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:6px; }
  .wm-all{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--sulfur); white-space:nowrap; }
  .wm-all svg{ width:13px; height:13px; transition:transform .3s; }
  .wm-all:hover svg{ transform:translate(2px,-2px); }
  .wm-cat{ display:flex; align-items:center; gap:10px; margin:18px 0 10px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#d8cbc8; }
  .wm-cat i{ flex:1; height:1px; background:linear-gradient(90deg, rgba(255,90,40,.45), transparent); }
  .wm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
  .wm-item{ text-align:left; opacity:0; transform:translateY(10px); transition:opacity .35s, transform .45s cubic-bezier(.2,.9,.2,1); }
  .works-menu.open .wm-item{ opacity:1; transform:none; transition-delay:calc(var(--i) * 30ms); }
  .wm-thumb{ position:relative; display:block; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#120a0b; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
  .wm-thumb video{ width:100%; height:100%; object-fit:cover; filter:brightness(.8); transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
  .wm-item:hover .wm-thumb video, .wm-item:focus-visible .wm-thumb video{ transform:scale(1.06); filter:none; }
  .wm-item:hover .wm-thumb, .wm-item:focus-visible .wm-thumb{ box-shadow:inset 0 0 0 1.5px rgba(255,90,40,.6); }
  .wm-item:focus-visible{ outline:none; }
  .wm-dur{ position:absolute; right:8px; bottom:8px; font-family:'JetBrains Mono',monospace; font-size:10px; padding:2px 7px; border-radius:999px; background:rgba(0,0,0,.6); }
  .wm-play{ position:absolute; left:50%; top:50%; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; display:grid; place-items:center;
    background:rgba(255,59,31,.9); opacity:0; transform:scale(.6); transition:all .3s cubic-bezier(.3,1.5,.5,1); }
  .wm-play svg{ width:16px; height:16px; color:#fff; }
  .wm-item:hover .wm-play{ opacity:1; transform:none; }
  .wm-title{ display:block; margin-top:8px; font-size:13.5px; font-weight:600; }
  .wm-meta{ display:block; font-size:12px; color:var(--muted); }
  /* marca */
  .brand{ display:flex; align-items:center; gap:10px; padding:0 14px 0 4px; }
  .brand-mark{ width:auto; height:38px; margin:-4px 0; filter:drop-shadow(0 0 6px rgba(255,170,40,.45)) drop-shadow(0 3px 6px rgba(0,0,0,.6));
    transition:transform .5s cubic-bezier(.3,1.6,.5,1), filter .4s; }
  .brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.1); filter:drop-shadow(0 0 12px rgba(255,190,60,.85)) drop-shadow(0 3px 6px rgba(0,0,0,.6)); }  .brand-text{ display:flex; flex-direction:column; line-height:1; }
  .brand-name{ font-family:'Space Grotesk'; font-weight:700; font-size:18px; letter-spacing:-.04em; }
  .brand-name i{ width:6px; height:6px; margin-top:6px; transform:rotate(45deg); background:var(--hell); box-shadow:0 0 8px rgba(255,59,31,.8); border-radius:1px; }
  .brand-tag{ margin-top:3px; font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
  @media (max-width:420px){ .brand-tag{ display:none; } }
  /* nav: barra larga clássica */
  .nav{ position:fixed; z-index:50; top:0; left:0; right:0; transition:translate .45s cubic-bezier(.2,.8,.2,1), background .35s, box-shadow .35s, backdrop-filter .35s; }
  .nav-inner{ max-width:80rem; margin:0 auto; height:72px; padding:0 24px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; transition:height .35s; }
  .nav-inner > :last-child{ justify-self:end; }
  .nav.nav-scrolled{ background:rgba(12,7,8,.72); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 1px 0 rgba(255,255,255,.07), 0 18px 40px -24px rgba(0,0,0,.9); }
  .nav.nav-scrolled .nav-inner{ height:62px; }
  .nav.nav-hidden{ translate:0 -100%; }
  .nav-links{ gap:6px; }
  .navlink{ position:relative; padding:10px 14px; color:#bfb1ae; font-size:14.5px; font-weight:500; transition:color .25s; }
  .navlink::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px;
    background:linear-gradient(90deg,var(--hell),var(--sulfur)); transform:scaleX(0); transition:transform .35s cubic-bezier(.3,1.3,.5,1); }
  .navlink:hover, .navlink.on{ color:#fff; }
  .navlink:hover::after, .navlink.on::after{ transform:scaleX(1); }
  .nav-cta{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px 10px 15px; border-radius:999px;
    font-size:14px; font-weight:600; color:#140c0d; background:#f4ebe8; transition:background .25s, transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; }
  .nav-cta:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(255,255,255,.35); }
  .nav-cta svg{ transition:transform .3s; }
  .nav-cta:hover svg{ transform:translate(2px,-2px); }
  .nav-dot{ width:8px; height:8px; border-radius:50%; background:#2fbf6e; animation:pulse 2s infinite; flex:none; }
  .nav-progress{ position:absolute; left:0; right:0; bottom:0; height:2px; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .3s; }
  .nav.nav-scrolled .nav-progress{ opacity:1; }
  .nav-progress i{ display:block; height:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,var(--hell),var(--sulfur)); }
  @media (max-width:767px){ .nav-inner{ grid-template-columns:1fr auto; padding:0 16px; } .nav-cta{ padding:9px 14px 9px 12px; } }  .nav-burger{ width:40px; height:40px; margin-left:2px; border-radius:50%; display:grid; place-content:center; gap:5px; background:rgba(255,255,255,.07); }
  .nav-burger i{ display:block; width:16px; height:2px; border-radius:2px; background:#f4ebe8; transition:transform .35s cubic-bezier(.3,1.4,.5,1); }
  .nav-burger[aria-expanded="true"] i:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
  .nav-sheet{ position:fixed; z-index:49; top:70px; left:12px; right:12px; padding:10px; border-radius:26px; display:flex; flex-direction:column; gap:2px;
    opacity:0; visibility:hidden; transform:translateY(-12px) scale(.97); transform-origin:top center; transition:opacity .3s, transform .4s cubic-bezier(.2,.9,.2,1), visibility 0s .4s; }
  .nav-sheet.open{ opacity:1; visibility:visible; transform:none; transition:opacity .3s, transform .4s cubic-bezier(.2,.9,.2,1); }
  .sheet-link{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px; font-family:'Space Grotesk'; font-weight:700; font-size:24px;
    opacity:0; transform:translateY(8px); transition:opacity .35s, transform .45s cubic-bezier(.2,.9,.2,1), background .25s; }
  .sheet-link span{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400; color:var(--hell); }
  .sheet-link svg{ width:18px; height:18px; margin-left:auto; color:var(--muted); }
  .sheet-link:active, .sheet-link:hover{ background:rgba(255,255,255,.06); }
  .nav-sheet.open .sheet-link, .nav-sheet.open .sheet-cta{ opacity:1; transform:none; transition-delay:calc(.05s + var(--i) * .05s); }
  .sheet-cta{ margin-top:6px; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px; border-radius:18px; font-weight:600; color:#140c0d; background:#f4ebe8;
    opacity:0; transform:translateY(8px); transition:opacity .35s, transform .45s cubic-bezier(.2,.9,.2,1); }
  /* lightbox do vídeo: o card "cresce" até virar o modal (e volta ao fechar) */
  html{ scrollbar-gutter:stable; }
  html.locked{ overflow:hidden; }
  .lightbox{ position:fixed; inset:0; margin:auto; padding:0; border:0; color:#f4ebe8;
    width:min(92vw,960px); max-height:92vh; overflow:auto; border-radius:28px; transform-origin:0 0;
    background:#140c0d; box-shadow:0 0 0 1px rgba(255,255,255,.08), inset 1px 1px 0 rgba(255,255,255,.18), 0 40px 120px -20px rgba(0,0,0,.9); }
  .lightbox::backdrop{ background:rgba(5,2,3,.78); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%);
    opacity:0; transition:opacity .45s ease; }
  .lightbox.show::backdrop{ opacity:1; }
  .lightbox .lb-body > *{ opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
  .lightbox.show .lb-body > *{ opacity:1; transform:none; }
  .lightbox.show .lb-body > :nth-child(1){ transition-delay:.18s; } .lightbox.show .lb-body > :nth-child(2){ transition-delay:.24s; }
  .lightbox.show .lb-body > :nth-child(3){ transition-delay:.30s; } .lightbox.show .lb-body > :nth-child(4){ transition-delay:.36s; }
  .lightbox .lb-close{ opacity:0; transform:scale(.6) rotate(-90deg); transition:all .45s cubic-bezier(.3,1.5,.5,1) .2s; }
  .lightbox.show .lb-close{ opacity:1; transform:none; }
  #m-thumb{ min-height:0; height:auto; border-radius:0; }
  #m-thumb::after{ background:linear-gradient(180deg, transparent 50%, rgba(8,4,5,.5)); }
  #m-thumb .art{ right:auto; left:50%; top:50%; width:34%; transform:translate(-50%,-50%) rotate(-8deg); opacity:.22; }
  .lightbox .lb-close:hover{ transform:rotate(90deg) scale(1.08); transition-delay:0s; }

  .status-dot{ animation:pulse 2s infinite; }
  @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(61,220,132,.6);} 100%{ box-shadow:0 0 0 10px rgba(61,220,132,0);} }

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