/* ================= tokens : light is the default ================= */
:root{
  --bg:            #F4F6FB;
  --surface:       #FFFFFF;
  --surface-2:     #EDF0F7;
  --border:        color-mix(in srgb, #141A24 8%, transparent);
  --hair:          color-mix(in srgb, #141A24 5%, transparent);
  --ink:           #141A24;
  --ink-dim:       #59647A;
  --accent:        #2743E0;
  --accent-strong: #1B31B8;
  --accent-ink:    #FFFFFF;
  --wa:            #25D366;
  --wa-strong:     #1EBE5A;
  --wa-ink:        #08160D;

  /* profundidade em camadas : uma curta + uma longa e difusa */
  --shadow-sm: 0 1px 2px color-mix(in srgb,var(--ink) 7%, transparent),
               0 8px 20px -10px color-mix(in srgb,var(--ink) 22%, transparent);
  --shadow-lg: 0 2px 6px color-mix(in srgb,var(--ink) 8%, transparent),
               0 34px 60px -22px color-mix(in srgb,var(--ink) 30%, transparent);

  /* filament colours — fixed across themes */
  --coral:#FF6B4A; --sky:#4FB0E6; --mint:#3FC29B; --sun:#EFB63F;
  --grape:#9A66D6; --slate:#7C8B99; --blue:#3956EE;

  --f-display:"Fredoka","Baloo 2",system-ui,sans-serif;
  --f-brand:"Fredoka","Baloo 2",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --f-script:"Pacifico","Brush Script MT",cursive;

  --pad-x: clamp(1.15rem, 5vw, 5.5rem);
  --maxw: 1200px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C1220; --surface:#141E33; --surface-2:#1C2846;
    --border:color-mix(in srgb,#EEF1F7 14%, transparent);
    --hair:color-mix(in srgb,#EEF1F7 8%, transparent);
    --ink:#EEF1F7; --ink-dim:#9AA8C6; --accent:#6E8BFF; --accent-strong:#8DA3FF;
    --accent-ink:#0A1020;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 40px 70px -24px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1220; --surface:#141E33; --surface-2:#1C2846;
  --border:color-mix(in srgb,#EEF1F7 14%, transparent);
  --hair:color-mix(in srgb,#EEF1F7 8%, transparent);
  --ink:#EEF1F7; --ink-dim:#9AA8C6; --accent:#6E8BFF; --accent-strong:#8DA3FF;
  --accent-ink:#0A1020;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 40px 70px -24px rgba(0,0,0,.7);
  color-scheme: dark;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background-color .3s ease, color .3s ease;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
img,svg{ max-width:100%; }

::selection{ background:var(--accent); color:var(--accent-ink); }
:root{ caret-color:var(--accent); }
*{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-dim); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* ================= scroll progress : bico da impressora descendo ================= */
.scrollbar{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:200; pointer-events:none;
  background:color-mix(in srgb,var(--ink) 7%, transparent);
}
.scrollbar-fill{
  height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));
}
.scrollbar-nozzle{
  position:absolute; top:-3px; left:calc(var(--p,0) * 100%);
  width:9px; height:9px; margin-left:-4px; border-radius:2px 2px 3px 3px;
  background:var(--accent); box-shadow:0 0 10px var(--accent);
}
.scrollbar-nozzle::after{
  content:""; position:absolute; left:2px; right:2px; top:100%; height:4px;
  background:var(--accent); clip-path:polygon(0 0,100% 0,50% 100%);
}
@media (prefers-reduced-motion: reduce){ .scrollbar-nozzle{ box-shadow:none; } }

/* ================= preloader ================= */
/* sem JS não aparece — evita overlay travado */
.preloader{ display:none; }
.js .preloader{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.25rem;
  background:var(--bg);
  transition:opacity .55s ease, visibility .55s ease;
}
.js .preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

.pl-stage{ width:84px; height:96px; position:relative; }
.pl-cube{ width:84px; height:84px; display:block; overflow:visible; }
/* cada face é uma camada da impressão: sobe da base e assenta */
.pl-face{
  transform-box:fill-box; transform-origin:50% 100%;
  opacity:0;
  animation:pl-layer 2.4s cubic-bezier(.2,.7,.2,1) infinite;
}
.pl-face--right{ animation-delay:0s; }     /* base */
.pl-face--left { animation-delay:.16s; }    /* meio */
.pl-face--top  { animation-delay:.32s; }    /* topo */

/* bico da impressora varrendo enquanto "imprime" */
.pl-nozzle{
  position:absolute; left:50%; top:0; width:14px; height:12px;
  margin-left:-7px; border-radius:2px 2px 3px 3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-strong));
  clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);
  animation:pl-sweep 2.4s ease-in-out infinite;
}

@keyframes pl-layer{
  0%   { opacity:0; transform:translateY(11px) scaleY(.55); }
  16%  { opacity:1; transform:translateY(0) scaleY(1); }
  70%  { opacity:1; transform:translateY(0) scaleY(1); }
  86%  { opacity:0; transform:translateY(-7px) scaleY(1); }
  100% { opacity:0; transform:translateY(11px) scaleY(.55); }
}
@keyframes pl-sweep{
  0%,100%{ transform:translate(-16px,4px); opacity:0; }
  10%    { opacity:1; }
  16%    { transform:translate(16px,6px); }
  32%    { transform:translate(-14px,18px); opacity:1; }
  46%    { transform:translate(14px,30px); }
  55%    { transform:translate(0,34px); opacity:0; }
}

.pl-word{
  font-family:var(--f-brand); font-weight:700; font-size:1.15rem; letter-spacing:-.01em;
  color:var(--ink); opacity:0; animation:pl-in .5s ease .45s forwards;
}
.pl-word b{ color:var(--accent); }
@keyframes pl-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

.pl-bar{
  width:130px; height:3px; border-radius:2px; overflow:hidden;
  background:color-mix(in srgb,var(--ink) 12%, transparent);
}
.pl-bar i{
  display:block; height:100%; width:42%; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));
  animation:pl-run 1.15s ease-in-out infinite;
}
@keyframes pl-run{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }

@media (prefers-reduced-motion: reduce){
  .pl-face{ opacity:1; animation:none; }
  .pl-nozzle{ display:none; }
  .pl-bar i{ animation:pl-run 1.4s linear infinite; }
  .pl-word{ animation:none; opacity:1; }
}

/* ================= reveals ================= */
.js .rise{ opacity:0; transform:translateY(20px); }
.js .rise.seen{ opacity:1; transform:none; transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){
  .js .rise{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ================= layout scaffolding ================= */
.section{ padding-block:clamp(4rem,8vw,7rem); padding-inline:var(--pad-x); }
.section--tight{ padding-block:clamp(2.4rem,5vw,3.6rem); }
.wrap{ max-width:var(--maxw); margin-inline:auto; }
.lead{ max-width:56ch; color:var(--ink-dim); font-size:clamp(1rem,1.5vw,1.15rem); }

.h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.05; letter-spacing:-.01em;
  margin-bottom:.7rem;
}

/* seção com textura de camada (linhas + brilho anisotrópico) */
.section--texture{ position:relative; isolation:isolate; }
.section--texture::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, color-mix(in srgb,var(--ink) 3.5%, transparent) 26px 27px),
    linear-gradient(102deg, transparent 30%, color-mix(in srgb,var(--accent) 6%, transparent) 48%, transparent 66%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-display); font-weight:600; font-size:.95rem;
  padding:.85rem 1.4rem; border-radius:100px; border:1.5px solid var(--accent);
  transition:transform .16s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn--fill{ background:var(--accent); color:var(--accent-ink); }
.btn--fill:hover{ background:var(--accent-strong); border-color:var(--accent-strong); transform:translateY(-2px); }
.btn--line{ background:transparent; color:var(--ink); }
.btn--line:hover{ background:color-mix(in srgb,var(--accent) 12%, transparent); transform:translateY(-2px); }
.btn.wa{ background:var(--wa); border-color:var(--wa); color:var(--wa-ink); }
.btn.wa:hover{ background:var(--wa-strong); border-color:var(--wa-strong); transform:translateY(-2px); box-shadow:0 8px 22px -8px color-mix(in srgb,var(--wa) 70%, transparent); }
.btn.wa svg{ width:1.15em; height:1.15em; }

/* ================= header ================= */
.top{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:1rem;
  padding:.8rem var(--pad-x);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
  transition:background-color .3s ease, border-color .3s ease;
}
.brand{ display:flex; align-items:center; gap:.5rem; font-family:var(--f-brand); font-weight:700; font-size:1.25rem; letter-spacing:-.01em; color:var(--ink); margin-right:auto; }
.brand > span{ display:inline-block; }
.brand b{ color:var(--accent); font-weight:700; }
.cube{ width:26px; height:26px; flex:none; display:block; }
.top nav{ display:flex; gap:1.5rem; font-size:.9rem; }
.top nav a{ color:var(--ink-dim); transition:color .18s ease; }
.top nav a:hover{ color:var(--ink); }
@media (max-width:760px){ .top nav{ display:none; } }

/* ===== switch de tema (dia / noite) — via Uiverse.io / JustCode14 ===== */
.switch{
  font-size:13px; position:relative; display:inline-block;
  width:4em; height:2.2em; border-radius:30px; flex:none;
  box-shadow:0 0 10px rgba(0,0,0,.1);
}
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
  position:absolute; cursor:pointer; inset:0;
  background-color:#2a2a2a; transition:.4s; border-radius:30px; overflow:hidden;
}
.switch .slider:before{
  position:absolute; content:""; height:1.2em; width:1.2em; border-radius:20px;
  left:.5em; bottom:.5em; transition:.4s;
  transition-timing-function:cubic-bezier(.81,-.04,.38,1.5);
  box-shadow:inset 8px -4px 0 0 #fff;
}
.switch input:checked + .slider{ background-color:#00a6ff; }
.switch input:checked + .slider:before{
  transform:translateX(1.8em); box-shadow:inset 15px -4px 0 15px #ffcf48;
}
.switch .star{
  background-color:#fff; border-radius:50%; position:absolute;
  width:5px; height:5px; transition:all .4s;
}
.switch .star_1{ left:2.5em; top:.5em; }
.switch .star_2{ left:2.2em; top:1.2em; }
.switch .star_3{ left:3em;   top:.9em; }
.switch input:checked ~ .slider .star{ opacity:0; }
.switch .cloud{
  width:3.5em; position:absolute; bottom:-1.4em; left:-1.1em;
  opacity:0; transition:all .4s;
}
.switch input:checked ~ .slider .cloud{ opacity:1; }
.switch:focus-within{ outline:2px solid var(--accent); outline-offset:3px; }

.top .btn{ padding:.58rem 1.05rem; font-size:.86rem; white-space:nowrap; }
@media (max-width:560px){
  .top{ gap:.55rem; }
  .brand{ font-size:1rem; gap:.42rem; }
  .cube{ width:22px; height:22px; }
  .top .btn .lbl{ display:none; }
  .top .btn{ padding:.5rem .7rem; }
}

/* ================= hero — o Cubo Infinito é o objeto, a frase se monta em volta ================= */
.hero{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(1.4rem,4vw,3rem) var(--pad-x) clamp(3rem,7vw,5rem);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
/* trava items de flex-column pra não esticarem no eixo cruzado e vazarem */
.hero > *,
.hero-core > *{ max-width:100%; }

.hero-eyebrow{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-dim);
  margin-bottom:clamp(1rem,3vw,1.8rem);
}
.hero-eyebrow span{ margin:0 .55em; color:var(--accent); }

/* núcleo: a frase se monta em volta do cubo, tudo num eixo central e sem card */
.hero-core{
  display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:600px;
}
.hero-title{ display:contents; }
.ht-line{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.05rem,7.4vw,4.35rem); line-height:.95; letter-spacing:-.03em;
  color:var(--ink); text-wrap:balance; position:relative; z-index:2;
}
.ht-dot{ color:var(--accent); }

.ht-top   { order:1; }
.hc-stage { order:2; }
.hc-plate { order:3; }
.ht-bot   { order:4; }
.hc-tag   { order:5; }

/* cubo grande e solto — sem borda, sem sombra, sem card */
.hc-stage{
  position:relative; width:min(600px,100%); aspect-ratio:1/1;
  margin-top:-7%;             /* respiro entre "Dobra, gira," e o cubo */
  overflow:hidden;
}
/* nada de máscara/gradiente por cima: o iframe já recebe o --bg do tema, então
   não tem retângulo branco, e a sombra de contato do cubo já se dissolve sozinha */
.hc-embed{
  position:absolute; inset:-7%; width:114%; height:114%;   /* aproxima o cubo, corta o ar morto */
  border:0; display:block; background:transparent;
}
/* o cubo assentado nas primeiras camadas — camada por camada */
.hc-plate{
  display:flex; flex-direction:column-reverse; align-items:center; gap:5px;
  width:min(320px,56%); margin-top:-13%; position:relative; z-index:2;
}
.hc-plate i{ height:2.5px; border-radius:2px; }
.hc-plate i:nth-child(1){ width:100%; background:color-mix(in srgb,var(--ink-dim) 62%, transparent); }
.hc-plate i:nth-child(2){ width:62%;  background:color-mix(in srgb,var(--accent) 62%, transparent); }
.hc-plate i:nth-child(3){ width:34%;  background:var(--accent); }

.ht-bot{ margin-top:clamp(2.4rem,6vw,4rem); }

.hc-tag{ margin-top:1.1rem; display:flex; flex-direction:column; align-items:center; gap:3px; }
.hc-tag b{ font-family:var(--f-display); font-weight:600; font-size:1rem; color:var(--ink); letter-spacing:.01em; }
.hc-tag span{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim);
}

.hero-lead{ max-width:46ch; margin-top:clamp(1.8rem,4vw,2.6rem); }
.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:1.6rem; }
.hero-specs{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  row-gap:.4rem; margin-top:2.2rem; padding-top:1.4rem;
  border-top:1px solid var(--hair); max-width:520px;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-dim);
}
.hero-specs li{ display:flex; align-items:center; }
.hero-specs li:not(:first-child)::before{
  content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); margin:0 .9rem;
}

/* revelação em sequência no load */
.js .hero-eyebrow,
.js .ht-line,
.js .hc-stage,
.js .hc-tag,
.js .hero-lead,
.js .hero-cta,
.js .hero-specs{ opacity:0; transform:translateY(18px); }
.js .hc-stage{ transform:translateY(18px) scale(.96); }
.js body.loaded .hero-eyebrow{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
.js body.loaded .ht-top{ opacity:1; transform:none; transition:opacity .55s ease .06s, transform .85s cubic-bezier(.18,.82,.25,1) .06s; }
.js body.loaded .hc-stage{ opacity:1; transform:none; transition:opacity .7s ease .2s, transform .8s cubic-bezier(.2,.75,.2,1) .2s; }
.js body.loaded .ht-bot{ opacity:1; transform:none; transition:opacity .55s ease .4s, transform .85s cubic-bezier(.18,.82,.25,1) .4s; }
.js body.loaded .hc-tag{ opacity:1; transform:none; transition:opacity .6s ease .5s, transform .6s ease .5s; }
.js body.loaded .hero-lead{ opacity:1; transform:none; transition:opacity .6s ease .56s, transform .6s ease .56s; }
.js body.loaded .hero-cta{ opacity:1; transform:none; transition:opacity .6s ease .64s, transform .6s ease .64s; }
.js body.loaded .hero-specs{ opacity:1; transform:none; transition:opacity .6s ease .72s, transform .6s ease .72s; }
/* a frase "Dobra, gira, / monta de novo." desce pra encaixar no load */
.js .ht-top, .js .ht-bot{ opacity:0; transform:translateY(-34px); }
.js .hc-plate i{ transform:scaleX(0); }
.js body.loaded .hc-plate i{ transform:scaleX(1); transition:transform .5s cubic-bezier(.2,.75,.2,1); }
.js body.loaded .hc-plate i:nth-child(1){ transition-delay:.3s; }
.js body.loaded .hc-plate i:nth-child(2){ transition-delay:.42s; }
.js body.loaded .hc-plate i:nth-child(3){ transition-delay:.54s; }

@media (prefers-reduced-motion:reduce){
  .js .hero-eyebrow,.js .ht-line,.js .ht-top,.js .ht-bot,.js .hc-stage,.js .hc-tag,
  .js .hero-lead,.js .hero-cta,.js .hero-specs,
  .js .hc-plate i{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* flagship — infinity cube 3D (Three.js) */
.flagship{ position:relative; }
.stage{
  position:relative; aspect-ratio:1/1; border-radius:22px; overflow:hidden;
  background:radial-gradient(120% 110% at 50% 22%, color-mix(in srgb,var(--blue) 15%, var(--surface)), var(--surface));
  border:1px solid var(--hair); box-shadow:var(--shadow-lg);
}
#cubeCanvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:none; cursor:grab;
}
#cubeCanvas:active{ cursor:grabbing; }
.cube-fallback{ position:absolute; inset:0; display:grid; place-items:center; }
.stage > svg{ position:absolute; left:11%; top:11%; width:78%; height:78%; filter:drop-shadow(0 10px 10px color-mix(in srgb,var(--ink) 16%, transparent)); }
.slicer{ position:absolute; inset:0; filter:drop-shadow(0 12px 12px color-mix(in srgb,var(--ink) 14%, transparent)); }
.slice{ position:absolute; overflow:hidden; will-change:transform; }
.slice > svg{ position:absolute; left:0; width:100%; }

.flag-tag{
  position:absolute; left:14px; bottom:14px;
  background:var(--ink); color:var(--bg);
  font-family:var(--f-mono); font-size:.76rem; padding:.4rem .7rem; border-radius:8px; letter-spacing:.02em;
}

/* ================= personalizado : bancada da oficina + texto 3D ================= */
.workbench{
  --wb-bg:#0A0F1E; --wb-ink:#EAF0FF; --wb-dim:#9FB2E0; --wb-neon:#6E8BFF;
  --kc-plate:#4257C8;      /* corpo do chaveiro */
  --kc-plate-lo:#1B2452;   /* lateral extrudada */
  --kc-name:#EAF0FF;       /* nome em relevo */
  --kc-metal:#C3CCDE;      /* argola */
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(70% 55% at 15% 0%, color-mix(in srgb,var(--wb-neon) 16%, transparent), transparent 70%),
    var(--wb-bg);
  color:var(--wb-ink);
  border-block:1px solid #1E2C52;
}
.workbench::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,255,255,.025) 30px 31px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 20%, #000 85%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 20%, #000 85%, transparent);
}
.workbench::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--wb-neon) 60%, transparent), transparent);
}
/* no tema escuro a bancada precisa vir pra frente, não sumir no fundo */
:root[data-theme="dark"] .workbench,
:root:not([data-theme="light"]) .workbench{ --wb-bg:#15213F; border-block-color:#2C3E6E; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .workbench{ --wb-bg:#15213F; border-block-color:#2C3E6E; }
}
.workbench .h2{ color:var(--wb-ink); }
.workbench .lead{ color:var(--wb-dim); }
.kc-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (max-width:860px){ .kc-grid{ grid-template-columns:1fr; } }

.kc-field{ margin-top:1.5rem; max-width:360px; }
.kc-field label{ display:block; font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--wb-dim); margin-bottom:.55rem; }
.kc-field input{
  width:100%; background:#0C1330; border:1.5px solid #2A3A66; color:var(--wb-ink);
  font-family:var(--f-display); font-weight:600; font-size:1.1rem; padding:.8rem 1rem; border-radius:12px;
  text-transform:uppercase; letter-spacing:.08em;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.kc-field input:focus{ outline:none; border-color:var(--wb-neon); box-shadow:0 0 0 4px color-mix(in srgb,var(--wb-neon) 25%, transparent); }
.kc-hint{ font-family:var(--f-mono); font-size:.72rem; color:var(--wb-dim); margin-top:.6rem; }
.workbench .btn.wa{ margin-top:1.5rem; }

.kc3d{
  position:relative; perspective:1200px; perspective-origin:50% 45%;
  min-height:clamp(280px,44vw,380px); display:grid; place-items:center;
  padding-inline:clamp(2.4rem,6vw,3.4rem); padding-bottom:1.6rem;
  cursor:grab; border-radius:20px;
}
.kc3d:active{ cursor:grabbing; }
.kc3d:focus-visible{ outline:2px solid var(--wb-neon); outline-offset:4px; }

.kc-stage{
  position:relative; width:100%; display:grid; place-items:center;
  transform-style:preserve-3d;
  transform:rotateX(-14deg) rotateY(-24deg);
  animation:kcswing 7s ease-in-out infinite alternate;
}
.kc3d.grab .kc-stage{
  animation:none;
  transform:rotateX(var(--rx,-14deg)) rotateY(var(--ry,-24deg));
  transition:transform .12s linear;
}
@keyframes kcswing{ from{ transform:rotateX(-16deg) rotateY(-33deg); } to{ transform:rotateX(-9deg) rotateY(13deg); } }
@media (prefers-reduced-motion:reduce){ .kc-stage{ animation:none; } }

.kc-obj{ position:relative; transform-style:preserve-3d; }
.kc-obj.is-swap{ animation:kcswap .4s ease; }
@keyframes kcswap{ from{ opacity:0; transform:translateY(12px) rotateY(-14deg); } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .kc-obj.is-swap{ animation:none; } }

.kc-piece{
  position:relative; display:inline-block; transform-style:preserve-3d;
  font-family:var(--f-display); font-weight:700; line-height:1;
  font-size:clamp(1.7rem,6.2vw,3.4rem); text-transform:uppercase; letter-spacing:.04em;
  padding:.36em .52em;
}
/* nome extrudado */
.kc-name{ position:relative; display:block; transform-style:preserve-3d; transform:translateZ(9px); }
.kc-nl{
  position:absolute; inset:0; white-space:nowrap; color:var(--kc-plate-lo);
  transform:translateZ(calc(var(--i) * -2.3px));
}
.kc-nl:first-child{ position:relative; }
.kc-piece[data-mode="emboss"] .kc-nl:first-child{
  color:var(--kc-name); text-shadow:0 0 18px color-mix(in srgb,var(--wb-neon) 45%, transparent);
}

/* nome em letra cursiva com contorno (o nome é a peça) */
.kc-piece[data-mode="script"]{
  font-family:var(--f-script); font-weight:400; text-transform:none; letter-spacing:0;
  font-size:clamp(2.2rem,8vw,4.4rem); padding:.1em .32em .28em;
}
.kc-piece[data-mode="script"] .kc-nl{ color:var(--kc-plate); }
.kc-piece[data-mode="script"] .kc-nl:first-child{
  color:color-mix(in srgb,var(--kc-plate) 80%, #fff);
  text-shadow:0 0 16px color-mix(in srgb,var(--wb-neon) 38%, transparent);
}
.kc-stroke{
  position:relative; display:block; white-space:nowrap;
  color:var(--kc-name); -webkit-text-stroke:.17em var(--kc-name);
  transform:translateZ(-5px);
}

/* nome afundado (gravado) */
.kc-piece[data-mode="engrave"] .kc-name{ transform:translateZ(1.5px); }
.kc-piece[data-mode="engrave"] .kc-nl{ display:none; }
.kc-piece[data-mode="engrave"] .kc-nl:first-child{
  display:block; color:color-mix(in srgb,var(--kc-plate) 24%, #04050d);
  text-shadow:0 2px 0 color-mix(in srgb,var(--kc-plate) 88%, #fff), 0 -1.5px 2px #000000a6;
}

/* corpo do chaveiro */
.kc-plate{
  position:absolute; inset:0; border-radius:.3em; transform-style:preserve-3d;
  transform:translateZ(-1px);
}
.kc-pl{
  position:absolute; inset:0; border-radius:inherit; background:var(--kc-plate-lo);
  transform:translateZ(calc(var(--i) * -3px));
}
.kc-pl:first-child{
  background:linear-gradient(150deg, color-mix(in srgb,var(--kc-plate) 86%, #fff), var(--kc-plate) 58%, color-mix(in srgb,var(--kc-plate) 78%, #000));
  box-shadow:inset 0 1px 0 #ffffff33;
}
.kc-hole{
  position:absolute; left:.16em; top:50%; width:.34em; height:.34em; margin-top:-.17em;
  border-radius:50%; background:var(--wb-bg);
  box-shadow:inset 0 0 0 .03em #00000059, inset 0 2px 3px #000;
  transform:translateZ(3px);
}

/* setas de troca de modelo */
.kc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-display); font-size:1.5rem; line-height:1; padding-bottom:3px;
  color:var(--wb-ink); background:color-mix(in srgb,#0E1734 82%, transparent);
  border:1px solid #33437A; cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.kc-arrow:hover{ border-color:var(--wb-neon); box-shadow:0 0 0 4px color-mix(in srgb,var(--wb-neon) 22%, transparent); }
.kc-arrow:active{ transform:translateY(-50%) scale(.92); }
.kc-arrow--prev{ left:0; }
.kc-arrow--next{ right:0; }

.kc3d-foot{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; gap:.7rem; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--wb-dim);
}
.kc3d-foot b{
  font-family:var(--f-display); font-weight:600; font-size:.82rem; letter-spacing:.02em;
  text-transform:none; color:var(--wb-ink);
}
.kc3d-foot b::after{
  content:""; display:inline-block; width:1px; height:.9em; margin-left:.75rem;
  background:currentColor; opacity:.35; vertical-align:middle;
}
@media (max-width:520px){
  .kc-arrow{ width:38px; height:38px; font-size:1.3rem; }
}

/* ================= catálogo : bento ================= */
.cat-top{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.count{ font-family:var(--f-mono); font-size:.82rem; color:var(--ink-dim); }
.filters{ display:flex; gap:.5rem; margin:1.8rem 0 1.6rem; flex-wrap:wrap; }
.chip{
  font-family:var(--f-display); font-weight:500; font-size:.85rem; padding:.42rem .95rem; border-radius:100px;
  border:1px solid var(--border); background:transparent; color:var(--ink-dim);
  transition:color .16s ease, border-color .16s ease, background-color .16s ease;
}
.chip:hover{ color:var(--ink); border-color:var(--ink-dim); }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.2rem; align-items:start; }
@media (max-width:900px){ .grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } }

.card{
  position:relative; display:flex; flex-direction:column;
  grid-column:span 2;
  background:var(--surface); border:1px solid var(--hair); border-radius:20px;
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease, background-color .3s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--accent) 35%, var(--border)); }
.card.hide{ display:none; }
.card--feat{ grid-column:span 4; }
.card--promo{ grid-column:span 2; }
@media (max-width:900px){
  .card--feat{ grid-column:span 4; }
  .card--promo{ grid-column:span 2; }
}
@media (max-width:560px){
  .card, .card--feat, .card--promo{ grid-column:span 1; }
}

/* peça carro-chefe : layout horizontal, acompanha a altura da fileira */
@media (min-width:640px){
  .card--feat{ flex-direction:row; align-items:stretch; align-self:stretch; }
  .card--feat .card-open{ flex:0 0 44%; display:flex; }
  .card--feat .bed{ aspect-ratio:auto; width:100%; height:100%; min-height:200px; }
  .card--feat .card-bar{ width:4px; height:auto; align-self:stretch; flex:none; }
  .card--feat .cbody{ flex:1; justify-content:center; }
}

.badge{
  position:absolute; top:12px; left:12px; z-index:3;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; text-align:center;
  font-family:var(--f-display); font-weight:700; font-size:.8rem; line-height:1;
  box-shadow:0 6px 14px -4px color-mix(in srgb,var(--accent) 60%, transparent);
}
.badge span{ display:block; font-size:.56rem; font-weight:600; letter-spacing:.05em; margin-top:1px; }

.card-open{ display:block; color:inherit; }
.bed{
  position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 20%, var(--bed-tint), var(--surface));
}
.card--feat .card-open{ width:100%; }
.bed svg{ width:70%; height:auto; max-height:74%; filter:drop-shadow(0 12px 12px color-mix(in srgb,var(--ink) 15%, transparent)); transition:transform .25s ease; }
.card--feat .bed svg{ width:72%; }
.card:hover .bed svg{ transform:translateY(-4px) scale(1.03); }
.bed img, .bed video{ width:100%; height:100%; object-fit:cover; }
/* foto de produto: tile branco arredondado com a peça inteira e um respiro,
   funciona igual no tema claro e no escuro */
.bed img{
  object-fit:contain; padding:8%;
  background:#fff; border-radius:14px;
}
.card--feat .bed img{ padding:6%; border-radius:16px; }
.more-card .bed img{ padding:7%; border-radius:12px; }
/* se a foto não carregar, cai na ilustração */
.media-fb{ display:none; }
.bed img.is-broken,
.p-media img.is-broken{ display:none; }
.bed img.is-broken + .media-fb,
.p-media img.is-broken + .media-fb{ display:contents; }
.bed .slicer{ filter:none; }
.bed .slice{ filter:drop-shadow(0 4px 5px color-mix(in srgb,var(--ink) 12%, transparent)); }

.bed-hover{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:color-mix(in srgb,var(--ink) 32%, transparent);
  opacity:0; transition:opacity .18s ease;
}
.ver-pill{
  font-family:var(--f-display); font-weight:600; font-size:.85rem;
  background:var(--surface); color:var(--ink); padding:.55rem 1.05rem; border-radius:100px;
  display:inline-flex; align-items:center; gap:.4rem; box-shadow:var(--shadow-lg);
  transform:translateY(7px); transition:transform .18s ease;
}
.ver-pill svg{ width:14px; height:14px; }
.card:hover .bed-hover, .card-open:focus-visible .bed-hover{ opacity:1; }
.card:hover .ver-pill, .card-open:focus-visible .ver-pill{ transform:none; }
@media (hover: none){
  .bed-hover{ opacity:1; background:transparent; align-items:end; padding:10px; }
  .ver-pill{ transform:none; font-size:.74rem; padding:.4rem .8rem; }
}
@media (prefers-reduced-motion: reduce){ .bed-hover, .ver-pill, .bed svg{ transition:none; } }

.card-bar{ height:4px; background:var(--accent); opacity:.5; }
.card--feat .card-bar, .card:hover .card-bar{ opacity:1; }

.cbody{ padding:1rem 1rem 1.1rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; flex:1; }
.card--feat .cbody{ align-items:flex-start; padding:1.4rem; gap:.55rem; }
.cbody h3{
  font-family:var(--f-display); font-weight:600; font-size:1.04rem; letter-spacing:-.01em;
  text-align:center; min-height:2.5em; display:flex; align-items:center;
}
.card--feat .cbody h3{ font-size:1.5rem; min-height:0; text-align:left; }
.cbody h3 a{ transition:color .16s ease; }
.cbody h3 a:hover{ color:var(--accent); }
.card--feat .blurb{ color:var(--ink-dim); font-size:.98rem; }
.card--feat .chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.card--feat .chips span{ font-family:var(--f-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); border:1px solid var(--border); padding:.2rem .55rem; border-radius:6px; }
.spec{ font-family:var(--f-mono); font-size:.68rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em; text-align:center; }
.card--feat .spec{ text-align:left; }
.prices{ display:flex; align-items:baseline; justify-content:center; gap:.5rem; margin-top:.15rem; }
.card--feat .prices{ justify-content:flex-start; }
.price-was{ font-size:.85rem; color:var(--ink-dim); text-decoration:line-through; }
.price-now{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--ink); }
.card--feat .price-now{ font-size:1.7rem; }
.on-sale .price-now{ color:var(--accent); }
.card-cta{ display:flex; gap:.5rem; width:100%; margin-top:.7rem; }
.card--feat .card-cta{ max-width:340px; }
.buy{
  font-family:var(--f-display); font-weight:600; font-size:.86rem;
  border-radius:100px; padding:.62rem .7rem; cursor:pointer; flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:transparent; color:var(--accent);
  border:1.5px solid color-mix(in srgb,var(--accent) 32%, var(--border));
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.buy:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.buy svg{ width:1.1em; height:1.1em; }
.card--feat .buy{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); padding:.8rem 1rem; font-size:.95rem; }
.card--feat .buy:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }

/* card : em repouso mostra só imagem + nome.
   ao passar o mouse, o próprio card cresce devagar e o painel de compra
   aparece dentro dele — mesma borda, mesmo arredondado, sem emenda. */
.card:hover, .card:focus-within{ z-index:5; }

.card-reveal{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1);
}
.card-reveal-inner{
  overflow:hidden; min-height:0;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:0 1rem;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease .06s, transform .4s ease .06s;
}
.card-reveal-inner .card-cta{ margin-top:.2rem; }
.card-reveal-inner > *:last-child{ margin-bottom:1.1rem; }

.card:hover .card-reveal,
.card:focus-within .card-reveal{ grid-template-rows:1fr; }
.card:hover .card-reveal-inner,
.card:focus-within .card-reveal-inner{ opacity:1; transform:none; }

/* feat : reveal dentro da coluna de texto, alinhado à esquerda */
.card--feat .card-reveal-inner{ align-items:flex-start; padding:0; }
.card--feat .card-reveal-inner > *:last-child{ margin-bottom:0; }
.card--feat .card-reveal-inner{ padding-top:.2rem; }

@media (hover:none){
  .card-reveal{ grid-template-rows:1fr; }
  .card-reveal-inner{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .card-reveal{ transition:grid-template-rows .18s linear; }
  .card-reveal-inner{ transition:opacity .12s ease; transform:none; }
}

.card--promo{
  align-items:center; justify-content:center; text-align:center;
  padding:2rem 1.5rem; gap:.7rem;
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb,var(--accent) 8%, transparent), transparent 70%),
    var(--surface);
}
.card--promo h3{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; }
.card--promo p{ color:var(--ink-dim); font-size:.95rem; max-width:34ch; }
.card--promo .btn{ margin-top:.3rem; }

/* ================= como funciona ================= */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.4rem; counter-reset:s; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
.step{ border-top:2px solid var(--accent); padding-top:1rem; }
.step::before{ counter-increment:s; content:"0" counter(s); font-family:var(--f-mono); font-size:.78rem; color:var(--accent); letter-spacing:.1em; }
.step h4{ font-family:var(--f-display); font-weight:600; font-size:1.2rem; margin:.5rem 0 .35rem; }
.step p{ color:var(--ink-dim); font-size:.94rem; }

/* ================= process facts ================= */
.facts{ border-top:1px solid var(--hair); background:var(--surface); }
.facts .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
@media (max-width:760px){ .facts .wrap{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .facts .wrap{ grid-template-columns:1fr; } }
.fact b{ display:block; font-family:var(--f-display); font-weight:600; font-size:1.05rem; margin-bottom:.3rem; }
.fact span{ color:var(--ink-dim); font-size:.9rem; }

/* ================= footer ================= */
.foot{ border-top:1px solid var(--hair); padding:3rem var(--pad-x) 2.4rem; }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:2rem 3rem; align-items:flex-start; }
.foot .brand{ font-size:1.1rem; margin:0; }
.foot p{ color:var(--ink-dim); font-size:.9rem; max-width:30ch; margin-top:.5rem; }
.foot-links{ display:flex; gap:1.3rem; font-size:.9rem; margin-left:auto; }
.foot-links a{ color:var(--ink-dim); transition:color .16s ease; }
.foot-links a:hover{ color:var(--accent); }
.foot-meta{ width:100%; margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--hair); font-family:var(--f-mono); font-size:.72rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em; }

/* ================= página do produto ================= */
.product-page{ padding:clamp(1.6rem,4vw,3rem) var(--pad-x) clamp(4rem,8vw,6rem); }
.back-link{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-display); font-weight:500; font-size:.92rem; color:var(--ink-dim); margin-bottom:1.6rem; transition:color .16s ease; }
.back-link:hover{ color:var(--accent); }
.product{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
@media (max-width:860px){ .product{ grid-template-columns:1fr; } }
.p-media-col{ min-width:0; }
.p-media{
  position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--hair); box-shadow:var(--shadow-lg);
  aspect-ratio:1/1; display:grid; place-items:center; padding:2.5rem;
  background:radial-gradient(120% 120% at 50% 25%, var(--bed-tint,#e9ecff), var(--surface));
}
.p-media > svg,
.p-media .media-fb svg{ width:74%; max-height:78%; filter:drop-shadow(0 16px 14px color-mix(in srgb,var(--ink) 18%, transparent)); }
.p-media img, .p-media video{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
.p-media img{ object-fit:contain; }
.media-soon{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:.6rem; text-align:center;
  font-family:var(--f-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-dim); background:color-mix(in srgb,var(--surface) 82%, transparent);
}
/* miniaturas quando o produto tem mais de uma foto */
.p-thumbs{ display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }
.p-thumb{
  width:64px; height:64px; padding:0; border-radius:12px; overflow:hidden; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--hair);
  transition:border-color .16s ease, transform .16s ease;
}
.p-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.p-thumb:hover{ transform:translateY(-2px); }
.p-thumb.is-on{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%, transparent); }

/* bolinhas de cor do produto */
.p-colors{ display:flex; flex-direction:column; gap:.55rem; }
.p-colors-label{
  font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-dim);
}
.p-colors-label b{
  font-family:var(--f-display); font-weight:600; font-size:.92rem; letter-spacing:0; text-transform:none; color:var(--ink);
}
.p-swatches{ display:flex; gap:.55rem; }
.p-swatch{
  width:34px; height:34px; padding:3px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--border);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.p-swatch > span{
  display:block; width:100%; height:100%; border-radius:50%;
  background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
.p-swatch:hover{ transform:translateY(-2px); }
.p-swatch.is-on{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%, transparent); }
.p-swatch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.p-info{ display:flex; flex-direction:column; gap:1rem; padding-top:.4rem; }
.p-tag{
  align-self:flex-start; font-family:var(--f-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%, var(--border)); padding:.28rem .65rem; border-radius:100px;
}
.p-info h1{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.05; letter-spacing:-.015em; }
.p-info .prices{ justify-content:flex-start; gap:.7rem; margin:0; }
.p-info .price-now{ font-size:1.8rem; color:var(--accent); }
.p-info .price-was{ font-size:1rem; }
.p-off{ font-family:var(--f-display); font-weight:700; font-size:.8rem; background:var(--accent); color:var(--accent-ink); padding:.16rem .5rem; border-radius:6px; align-self:center; }
/* preço ainda a definir */
.price-tbd{ color:var(--ink-dim); font-weight:600; }
.card--feat .price-tbd, .card .price-tbd{ font-size:1.05rem; }
.p-info .price-tbd{ font-size:1.4rem; color:var(--ink); }
.p-desc{ color:var(--ink-dim); font-size:1.02rem; max-width:46ch; }

/* card das raridades da miniatura (Ovo Surpresa) */
.p-rarity{
  border:1px solid var(--hair); border-radius:14px; padding:.9rem 1.1rem;
  background:color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.p-rarity-title{
  display:block; font-family:var(--f-mono); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-dim); margin-bottom:.6rem;
}
.p-rarity ul{ list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.p-rarity li{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; }
.p-rarity li i{ width:10px; height:10px; border-radius:50%; background:var(--d,var(--accent)); flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
.p-rarity li b{ font-weight:500; color:var(--ink); }
.p-rarity li span{ margin-left:auto; font-family:var(--f-mono); font-size:.84rem; color:var(--ink-dim); }
.p-specs{
  list-style:none; display:flex; flex-direction:column; gap:.5rem;
  font-family:var(--f-mono); font-size:.8rem; color:var(--ink-dim);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:1rem 0; margin:.3rem 0;
}
.p-specs li{ display:flex; justify-content:space-between; gap:1rem; }
.p-specs b{ color:var(--ink); font-weight:500; }
.p-buy{ align-self:flex-start; padding:.9rem 1.8rem; font-size:1rem; flex:0 0 auto; }
.p-note{ font-size:.85rem; color:var(--ink-dim); }
.notfound{ font-size:1.15rem; padding:3rem 0; }
.notfound a{ color:var(--accent); }
.more{ margin-top:clamp(3.5rem,8vw,6rem); }
.more .h2{ font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:1.4rem; }
.more-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:860px){ .more-grid{ grid-template-columns:repeat(2,1fr); } }
.more-card{
  display:flex; flex-direction:column; gap:.3rem;
  background:var(--surface); border:1px solid var(--hair); border-radius:16px; overflow:hidden; padding-bottom:.9rem;
  transition:transform .16s ease, box-shadow .2s ease, border-color .16s ease;
}
.more-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--accent) 35%, var(--border)); }
.more-card .bed{ aspect-ratio:1/1; margin-bottom:.5rem; }
.more-card .bed svg{ width:66%; }
.more-name{ font-family:var(--f-display); font-weight:600; font-size:.92rem; padding:0 .9rem; }
.more-price{ font-family:var(--f-display); font-weight:700; font-size:.92rem; color:var(--accent); padding:0 .9rem; }

/* ================= small screens ================= */
@media (max-width:560px){
  .hero .ht-line{ font-size:clamp(1.7rem,9vw,2.6rem); letter-spacing:-.035em; }
  .hero-core{ padding-inline:.6rem; }
  .hc-stage{ margin-top:-3%; }
  .ht-bot{ margin-top:clamp(1.8rem,7vw,2.8rem); }
  .hero .lead, .lead{ max-width:none; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
  .cat-top{ align-items:flex-start; }
  .product-page{ padding-top:1.2rem; }
}