:root {
  --bg: #07090d;
  --surface: #0d1118;
  --surface-2: #111720;
  --paper: #f3f4f1;
  --ink: #10141b;
  --muted: #9ca5b2;
  --line: rgba(255, 255, 255, .13);
  --blue: #176ff2;
  --content: 1192px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: #f7f8fa;
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::after {
  position: fixed;
  z-index: 90;
  inset: 0;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  content: '';
  pointer-events: none;
}
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #68a3ff; outline-offset: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }

/* Retorno ao ecossistema D3 — mesma marca usada em /sites e /core, no
   lugar de uma navbar completa. Some ao rolar para baixo, volta ao subir. */
.brand-mark {
  position: fixed;
  z-index: 70;
  top: 16px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: #fff;
  opacity: .92;
  transition: opacity .3s ease, translate .35s cubic-bezier(.22, 1, .36, 1), background .3s ease, border-color .3s ease;
}
.brand-mark:hover { opacity: 1; translate: -3px 0; }
.brand-mark.is-stuck {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(7, 9, 13, .74);
  backdrop-filter: saturate(1.6) blur(16px);
}
.brand-mark__chevron { width: 16px; height: 16px; flex: none; }
.brand-mark img { display: block; width: auto; height: 56px; filter: brightness(0) invert(1); }

@media (max-width: 640px) {
  .brand-mark { top: 16px; left: 16px; gap: 7px; }
  .brand-mark__chevron { width: 13px; height: 13px; }
  .brand-mark img { height: 42px; }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 48px;
  border-radius: 3px;
  background: #fff;
  color: #0a0d12;
  padding: 14px 19px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .25s ease, translate .25s ease, scale .25s ease, background .25s ease, box-shadow .25s ease;
}
.button:hover { background: #e9eff9; box-shadow: 0 10px 30px rgba(10, 25, 48, .18); translate: 0 -2px; scale: 1.015; }
.button:active { translate: 0 0; scale: .98; }
.icon { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.button .icon { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.button:hover .icon-arrow { transform: translate(3px, -3px); }
.button-small { min-height: 42px; padding: 11px 16px; font-size: 11px; }
.text-link { display: inline-flex; gap: 7px; border-bottom: 1px solid #68717e; color: inherit; padding-bottom: 7px; font-size: 12px; font-weight: 700; text-decoration: none; }
.text-link .icon { width: 15px; height: 15px; transition: transform .3s ease; }
.text-link:hover .icon-arrow { transform: translate(2px, -2px); }
.eyebrow { margin: 0 0 21px; color: #b8c0cb; font: 500 10px 'DM Mono', monospace; letter-spacing: 1.35px; text-transform: uppercase; }

.hero {
  position: relative;
  display: grid;
  overflow: clip;
  width: min(1240px, 100%);
  min-height: 100svh;
  margin: auto;
  padding: 112px 24px 54px;
  grid-template-columns: minmax(320px, .92fr) minmax(480px, 1.08fr);
  align-items: center;
}
.hero::before {
  position: absolute;
  top: -28%;
  right: -25%;
  width: min(76vw, 1050px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 92, 190, .18), transparent 66%);
  content: '';
  pointer-events: none;
}
.hero::after { position: absolute; z-index: -1; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 72% 45%,#000,transparent 68%); content: ''; }
.hero-copy { position: relative; z-index: 3; }
.hero .eyebrow span { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 16px var(--blue); }
h1 { max-width: 660px; margin-bottom: 25px; font-size: clamp(46px, 5.1vw, 76px); line-height: 1.03; letter-spacing: -.065em; }
.lede { max-width: 455px; margin-bottom: 33px; color: #adb5c1; font-size: 16px; line-height: 1.68; }
.actions { display: flex; align-items: center; gap: 28px; }

.stage { position: relative; min-width: 0; }
.hero-stage { height: min(77vh, 700px); min-height: 510px; }
.hero-stage::after {
  position: absolute;
  z-index: 0;
  top: 11%;
  left: 9%;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 58% 35%, rgba(67, 124, 255, .19), rgba(16, 23, 39, .08) 47%, transparent 69%);
  content: '';
}
.nfc-pulse { position: absolute; z-index: 1; top: 50%; left: 55%; display: grid; width: 90px; height: 90px; border: 1px solid rgba(69,137,255,.3); border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.3); place-items: center; pointer-events: none; }
.nfc-pulse::before,.nfc-pulse::after { position: absolute; inset: -1px; border: 1px solid rgba(69,137,255,.45); border-radius: inherit; content: ''; }
.nfc-pulse span { color: #bcd4ff; font: 7px 'DM Mono',monospace; letter-spacing: 1px; }
.hero-stage.signal-active .nfc-pulse { animation: pulse-core 1.6s ease-out; }
.hero-stage.signal-active .nfc-pulse::before { animation: pulse-wave 1.45s .1s ease-out; }
.hero-stage.signal-active .nfc-pulse::after { animation: pulse-wave 1.45s .34s ease-out; }
@keyframes pulse-core { 15%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); } }
@keyframes pulse-wave { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(4.4); } }
canvas { position: relative; z-index: 2; display: block; width: 100%; height: 100%; outline: 0; opacity: 0; cursor: grab; touch-action: none; transition: opacity .4s ease; }
canvas[hidden] { display: none; }
.stage.is-dragging canvas { cursor: grabbing; }
.stage.webgl-ready canvas { opacity: 1; }
.stage .canvas-loader { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; opacity: .72; transform: translate(-50%,-50%); place-items: center; transition: opacity .3s ease; pointer-events: none; }
.stage .canvas-loader span { width: 4px; height: 4px; border-radius: 50%; background: #6d9fff; box-shadow: 0 -11px 0 rgba(109,159,255,.22); animation: model-loader 1.2s linear infinite; }
.stage.webgl-ready .canvas-loader, .stage.fallback-active .canvas-loader { opacity: 0; }
@keyframes model-loader { to { transform: rotate(360deg); } }
.canvas-boot-fallback { position: absolute; z-index: 6; inset: 0; display: grid; margin: 0; color: #818b99; background: rgba(7,9,13,.96); font: 9px 'DM Mono',monospace; letter-spacing: 1px; opacity: 0; visibility: hidden; animation: boot-fallback-visible 0s 15s forwards; place-items: center; pointer-events: none; }
.stage.webgl-ready .canvas-boot-fallback, .stage.fallback-active .canvas-boot-fallback { display: none; animation: none; }
@keyframes boot-fallback-visible { to { opacity: 1; visibility: visible; } }
.stage.fallback-active .canvas-hint, .stage.fallback-active .view-controls, .stage.fallback-active .showcase-switcher, .stage.fallback-active .showcase-variants, .stage.fallback-active .showcase-summary, .stage.fallback-active .stage-label { display: none; }
.webgl-fallback { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; }
.webgl-fallback-message { display: grid; color: #818b99; font: 9px 'DM Mono', monospace; letter-spacing: 1px; place-items: center; }
.canvas-hint { position: absolute; z-index: 5; bottom: 42px; left: 50%; display: flex; align-items: center; gap: 9px; color: #b0b8c4; font: 10px 'DM Mono', monospace; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity .35s, transform .35s; }
.stage.webgl-ready .canvas-hint { opacity: 1; }
.hero-stage canvas { top: 54px; height: calc(100% - 54px); }
.hero-stage .canvas-hint { top: 15px; bottom: auto; left: 1%; transform: none; }
.hero-stage .view-controls { top: 7px; right: 1%; bottom: auto; }
.stage.webgl-ready .canvas-hint.is-hidden { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; }
.hero-stage.webgl-ready .canvas-hint.is-hidden { transform: translateY(8px); }
.drag-icon { display: grid; width: 25px; height: 25px; border: 1px solid #566274; border-radius: 50%; color: #f1f4f8; place-items: center; }
.drag-icon .icon { width: 13px; height: 13px; }
.stage-label { position: absolute; z-index: 4; top: 22%; left: 8%; display: flex; align-items: center; gap: 9px; color: #8d98a8; font: 9px 'DM Mono', monospace; letter-spacing: 1.1px; writing-mode: vertical-rl; }
.stage-label span { width: 1px; height: 31px; background: #667388; }
.stage-label b { font: inherit; font-weight: 500; }
.showcase-summary { position: absolute; z-index: 5; bottom: 25px; left: 1%; display: grid; max-width: 152px; gap: 4px; color: #f3f6fa; pointer-events: none; }
.showcase-summary > span { color: #8190a3; font: 8px 'DM Mono', monospace; letter-spacing: 1px; }
.showcase-summary strong { font-size: 13px; letter-spacing: -.035em; }
.showcase-summary small { color: #aeb9c7; font: 8px/1.45 'DM Mono', monospace; letter-spacing: .4px; }
.showcase-switcher { position: absolute; z-index: 6; right: 1%; bottom: 18px; left: 28%; display: grid; overflow: hidden; border: 1px solid rgba(229,235,245,.17); border-radius: 6px; background: rgba(7,10,15,.66); grid-template-columns: repeat(4, minmax(0, 1fr)); backdrop-filter: blur(14px); }
.showcase-switcher button { display: grid; min-width: 0; min-height: 49px; border: 0; border-right: 1px solid rgba(229,235,245,.12); background: transparent; color: #9faaba; padding: 8px 11px; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; cursor: pointer; text-align: left; transition: color .25s ease, background .25s ease; }
.showcase-switcher button:last-child { border-right: 0; }
.showcase-switcher button > span { grid-row: span 2; align-self: center; color: #718096; font: 8px 'DM Mono', monospace; letter-spacing: .6px; }
.showcase-switcher button b { overflow: hidden; color: inherit; font: 700 10px/1.1 Manrope, sans-serif; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.showcase-switcher button small { overflow: hidden; color: #718096; font: 8px/1.22 'DM Mono', monospace; letter-spacing: .35px; text-overflow: ellipsis; white-space: nowrap; }
.showcase-switcher button:hover, .showcase-switcher button.is-active { background: rgba(255,255,255,.1); color: #fff; }
.showcase-switcher button.is-active > span, .showcase-switcher button.is-active small { color: #bcd6ff; }
.showcase-variants { position: absolute; z-index: 5; top: 7px; right: 145px; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: rgba(7,10,15,.64); opacity: 0; pointer-events: none; backdrop-filter: blur(12px); transition: opacity .35s; }
.stage.webgl-ready .showcase-variants { opacity: 1; pointer-events: auto; }
.showcase-variants button { min-height: 38px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #9ea9b9; padding: 9px 11px; cursor: pointer; font: 9px 'DM Mono', monospace; letter-spacing: .3px; white-space: nowrap; }
.showcase-variants button:last-child { border-right: 0; }
.showcase-variants button:hover, .showcase-variants button.is-active { background: rgba(255,255,255,.1); color: #fff; }
.hero-stage.is-switching canvas { opacity: .62; }
.view-controls { position: absolute; z-index: 5; right: 1%; bottom: 34px; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: rgba(7, 10, 15, .64); opacity: 0; pointer-events: none; backdrop-filter: blur(12px); transition: opacity .35s; }
.stage.webgl-ready .view-controls { opacity: 1; pointer-events: auto; }
.view-controls button { min-height: 38px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #cbd1db; padding: 9px 11px; cursor: pointer; font: 10px 'DM Mono', monospace; }
.view-controls button:last-child { border-right: 0; }
.view-controls [data-view='reset'] { display: grid; min-width: 38px; padding: 9px; place-items: center; }
.view-controls [data-view='reset'] .icon { width: 14px; height: 14px; }
.view-controls button:hover, .view-controls button.is-active { background: rgba(255,255,255,.09); color: #fff; }
.hero-scroll { position: absolute; bottom: 24px; left: 24px; color: #808a98; font: 9px 'DM Mono', monospace; letter-spacing: 1px; }
.hero-scroll span { display: inline-block; width: 42px; height: 1px; margin-left: 10px; background: #707a88; vertical-align: middle; }

.section { position: relative; padding: clamp(94px, 11vw, 154px) max(24px, calc((100vw - var(--content)) / 2)); isolation: isolate; }
.section-index { position: absolute; top: 32px; right: max(24px, calc((100vw - var(--content)) / 2)); color: currentColor; font: 9px 'DM Mono', monospace; letter-spacing: 1.2px; opacity: .38; }

.products { overflow: clip; background: radial-gradient(ellipse at 76% 7%, rgba(31, 92, 204, .16), transparent 36%), #090d13; }
.products::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 92px 92px; content: ''; mask-image: linear-gradient(to bottom, #000, transparent 72%); opacity: .42; pointer-events: none; }
.products-intro { position: relative; z-index: 1; max-width: 690px; margin-bottom: clamp(42px, 6vw, 72px); }
.products h2, .product-flow h2, .faq h2, .portfolio h2, .closing h2 { margin-bottom: 0; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -.065em; }
.products-intro > p:not(.eyebrow) { max-width: 490px; margin: 23px 0 0; color: #aeb7c5; font-size: 14px; line-height: 1.7; }
.product-grid { position: relative; z-index: 1; display: grid; grid-auto-rows: 1fr; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.product-card { --product-media-height: clamp(226px, 20vw, 282px); position: relative; display: grid; min-width: 0; min-height: 646px; height: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: linear-gradient(155deg, rgba(22, 29, 40, .98), rgba(9, 13, 20, .97)); box-shadow: 0 25px 72px rgba(0,0,0,.24); padding: clamp(16px, 2vw, 23px); grid-template-rows: auto var(--product-media-height) minmax(158px, 1fr) auto auto; isolation: isolate; }
.product-card::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(83,132,243,.14), transparent 48%); content: ''; opacity: .7; pointer-events: none; }
.product-card--card::before { background: radial-gradient(circle at 50% 14%, rgba(140,151,174,.16), transparent 44%); }
.product-card--phone::before { background: radial-gradient(circle at 49% 28%, rgba(86,132,238,.21), transparent 42%); }
.product-card--adhesive::before { background: radial-gradient(circle at 50% 26%, rgba(100,144,238,.16), transparent 46%); }
.product-card__topline { display: flex; margin-bottom: 12px; color: #7f8b9d; font: 500 9px 'DM Mono', monospace; letter-spacing: 1.15px; justify-content: space-between; }
.product-stage { position: relative; display: grid; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: radial-gradient(circle at 50% 38%, rgba(51,82,143,.32), rgba(10,14,22,.34) 48%, rgba(5,8,13,.65) 100%); place-items: center; isolation: isolate; }
.product-stage::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.065), transparent 27%, transparent 70%, rgba(33,83,190,.12)); content: ''; pointer-events: none; }
.product-art { position: absolute; z-index: 2; bottom: 0; left: 50%; display: block; width: auto; height: 94%; max-width: 92%; object-fit: contain; filter: drop-shadow(0 22px 14px rgba(0,0,0,.42)); transform: translateX(-50%); transition: opacity .32s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.product-art--personalized { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }
.product-card.is-personalized .product-art--standard { opacity: 0; transform: translateX(-50%) translateY(-10px); pointer-events: none; }
.product-card.is-personalized .product-art--personalized { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.product-stage__reflection { position: absolute; z-index: 1; bottom: 5%; left: 50%; width: 56%; height: 10%; border-radius: 50%; background: rgba(137,172,234,.18); filter: blur(15px); transform: translateX(-50%); }
.product-card__copy { display: flex; min-height: 0; padding-top: 23px; flex-direction: column; }
.product-card__copy .eyebrow { margin-bottom: 13px; color: #9ca9bc; }
.product-card h3 { margin: 0 0 12px; font-size: clamp(23px, 2.1vw, 30px); line-height: 1.05; letter-spacing: -.06em; }
.product-card__copy > p:last-child { margin: 0; color: #aab3c0; font-size: 13px; line-height: 1.62; }
.product-variants { display: flex; width: max-content; max-width: 100%; overflow: hidden; margin-top: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(255,255,255,.035); align-self: start; }
.product-variants button { min-height: 34px; border: 0; border-right: 1px solid rgba(255,255,255,.1); background: transparent; color: #8d99aa; padding: 8px 10px; cursor: pointer; font: 500 9px 'DM Mono', monospace; letter-spacing: .55px; transition: background .25s ease, color .25s ease; }
.product-variants button:last-child { border-right: 0; }
.product-variants button:hover, .product-variants button.is-active, .product-variants button[aria-pressed='true'] { background: rgba(255,255,255,.12); color: #fff; }
.soon-badge { display: inline-block; margin-left: 6px; padding: 2px 5px; border-radius: 3px; background: rgba(255,255,255,.14); color: #cbd3de; font-size: 7px; letter-spacing: .4px; text-transform: uppercase; vertical-align: 1px; }
.product-card .text-link { width: max-content; margin-top: 20px; border-color: rgba(202,214,234,.45); color: #f2f5f9; align-self: start; }
.product-card .text-link:hover { border-color: #fff; }

.product-stage > canvas { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; }
.product-stage .canvas-loader { z-index: 4; }
.product-stage .canvas-hint { z-index: 4; bottom: 14px; font-size: 8px; }
.product-stage .drag-icon { width: 20px; height: 20px; }
.product-stage .canvas-boot-fallback { z-index: 6; }
.tag-preview { position: relative; z-index: 1; display: grid; color: #eff4fe; transform-style: preserve-3d; transition: opacity .36s ease, transform .5s cubic-bezier(.22,1,.36,1); place-items: center; }
.stage.webgl-ready .tag-preview { opacity: 0; transform: translateY(12px) scale(.94); pointer-events: none; }
.tag-preview--adhesive { width: min(70%, 215px); aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(238,244,255,.76); border-radius: 18px; background: #f7f8f8; box-shadow: inset 7px 7px 14px rgba(255,255,255,.13), inset -15px -16px 24px rgba(0,0,0,.36), 0 24px 26px rgba(0,0,0,.48); transform: perspective(760px) rotateX(38deg) rotateZ(12deg); }
.tag-preview--adhesive::after { position: absolute; z-index: 2; inset: 1px; border: 1px solid rgba(255,255,255,.32); border-radius: 17px; content: ''; pointer-events: none; }
.tag-preview__art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .3s ease, opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.tag-preview__art--personalized { opacity: 0; transform: translateY(5px); }
.product-card.is-personalized .tag-preview__art--standard { opacity: 0; transform: translateY(-5px); }
.product-card.is-personalized .tag-preview__art--personalized { opacity: 1; transform: none; }

/* The printed face is intentionally full bleed. The rounded clipping and a
   low exterior shadow are the only visible physical finish — never a white
   mat or a secondary frame around either supplied artwork. */
.card-preview { position: relative; z-index: 1; width: auto; height: min(92%, 260px); aspect-ratio: 541 / 970; overflow: hidden; border-radius: clamp(9px, 1vw, 13px); background: transparent; box-shadow: 0 22px 26px rgba(0,0,0,.48), 0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.24) inset; transform: perspective(760px) rotateX(12deg) rotateY(-17deg) rotateZ(-3deg); transform-style: preserve-3d; }
.card-preview__art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; transition: filter .3s ease, opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.card-preview__art--personalized { opacity: 0; transform: translateY(9px); }
.card-preview__glare { position: absolute; z-index: 1; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.14), transparent 23%, transparent 71%, rgba(255,255,255,.05)); mix-blend-mode: screen; opacity: .62; pointer-events: none; }
.product-card.is-personalized .card-preview__art--standard { opacity: 0; transform: translateY(-9px); }
.product-card.is-personalized .card-preview__art--personalized { opacity: 1; transform: none; }

/* A logo-free, premium handset keeps the tag in its real-use context. Its
   titanium/graphite language intentionally mirrors the 3D phone: a satin rear,
   flat polished perimeter, discreet controls and a rounded triple-lens module. */
.phone-tag-preview { position: relative; z-index: 1; display: grid; width: min(88%, 226px); height: min(94%, 284px); place-items: center; }
.phone-tag-preview__shadow { position: absolute; bottom: 8%; width: 74%; height: 10%; border-radius: 50%; background: rgba(0,0,0,.58); filter: blur(14px); transform: rotate(-9deg); }
.phone-tag-preview__device { position: relative; z-index: 1; display: block; width: 58%; min-width: 102px; max-width: 142px; aspect-ratio: .485; border: 1px solid rgba(213,222,230,.74); border-radius: 23px; background: linear-gradient(108deg, #84919d 0%, #46525e 3.5%, #202832 8%, #11171e 49%, #1b232c 86%, #586572 96%, #a4afb8 100%); box-shadow: -3px 3px 0 rgba(8,11,15,.96), 5px 9px 0 #65717d, 14px 25px 30px rgba(0,0,0,.57), inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 rgba(0,0,0,.88); transform: perspective(780px) rotateX(9deg) rotateY(-24deg) rotateZ(6deg); transform-origin: 50% 54%; transform-style: preserve-3d; }
.phone-tag-preview__device::before { position: absolute; z-index: 2; inset: 1px; border: 1px solid rgba(255,255,255,.24); border-radius: 21px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.42), inset 1px 1px 1px rgba(255,255,255,.14); content: ''; pointer-events: none; }
.phone-tag-preview__device::after { position: absolute; z-index: 3; top: 6%; right: -5px; bottom: 6%; width: 6px; border-radius: 0 5px 5px 0; background: linear-gradient(90deg, #11161c, #87939f 48%, #252d36); box-shadow: 1px 0 0 rgba(255,255,255,.25), 2px 0 3px rgba(0,0,0,.42); content: ''; }
.phone-tag-preview__rear { position: absolute; z-index: 0; inset: 3px; overflow: hidden; border-radius: 19px; background: radial-gradient(ellipse at 18% 10%, rgba(205,224,240,.13), transparent 32%), radial-gradient(ellipse at 86% 88%, rgba(80,105,130,.16), transparent 42%), linear-gradient(135deg, #27313b 0%, #1b222a 34%, #11171e 69%, #202a34 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.075), inset 10px 12px 17px rgba(255,255,255,.025), inset -12px -13px 18px rgba(0,0,0,.3); }
.phone-tag-preview__rear::after { position: absolute; inset: 0; background: linear-gradient(125deg, transparent 30%, rgba(186,211,235,.07) 47%, transparent 62%); content: ''; opacity: .82; }
.phone-tag-preview__edge { position: absolute; z-index: 3; top: 9%; bottom: 9%; width: 5px; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, #131920, #87939f 57%, #38434e); box-shadow: -1px 0 0 rgba(255,255,255,.24), -2px 1px 3px rgba(0,0,0,.42); }
.phone-tag-preview__edge--left { left: -5px; }
.phone-tag-preview__antenna { position: absolute; z-index: 4; width: 8px; height: 1px; background: rgba(196,207,217,.72); box-shadow: 0 1px 1px rgba(0,0,0,.5); }
.phone-tag-preview__antenna--top-left { top: 16%; left: -4px; transform: rotate(-11deg); }
.phone-tag-preview__antenna--bottom-left { bottom: 15%; left: -4px; transform: rotate(10deg); }
.phone-tag-preview__antenna--top-right { top: 18%; right: -7px; transform: rotate(11deg); }
.phone-tag-preview__antenna--bottom-right { right: -7px; bottom: 17%; transform: rotate(-10deg); }
.phone-tag-preview__buttons { position: absolute; z-index: 5; top: 27%; left: -8px; display: grid; gap: 7px; }
.phone-tag-preview__button { display: block; width: 5px; border: 1px solid rgba(255,255,255,.26); border-radius: 4px 0 0 4px; background: linear-gradient(90deg, #121820, #87939f); box-shadow: -1px 1px 2px rgba(0,0,0,.44); }
.phone-tag-preview__button--action { height: 10px; margin-bottom: 5px; }
.phone-tag-preview__button--volume-up, .phone-tag-preview__button--volume-down { height: 16px; }
.phone-tag-preview__button--power { position: absolute; z-index: 5; top: 39%; right: -8px; width: 5px; height: 25px; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #182029, #87939f); box-shadow: 1px 1px 2px rgba(0,0,0,.44); }
.phone-tag-preview__camera { position: absolute; z-index: 6; top: 7.5%; left: 8.5%; width: 37%; aspect-ratio: 1.025; border: 1px solid rgba(192,204,216,.42); border-radius: 13px; background: radial-gradient(circle at 26% 18%, rgba(166,185,202,.16), transparent 31%), linear-gradient(145deg, #4b5966 0%, #252d37 27%, #0d1218 76%, #313c47 100%); box-shadow: 1px 1px 0 rgba(255,255,255,.15) inset, -3px 5px 7px rgba(0,0,0,.39), 0 0 0 1px rgba(0,0,0,.38); }
.phone-tag-preview__camera::after { position: absolute; inset: 7%; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; content: ''; pointer-events: none; }
.phone-tag-preview__lens { position: absolute; z-index: 1; display: block; width: 35%; aspect-ratio: 1; border: 1px solid rgba(192,208,224,.5); border-radius: 50%; background: radial-gradient(circle at 34% 27%, #bad7f0 0 6%, #5f7f9d 11%, #1c2c3b 29%, #05080d 65%, #111b27 100%); box-shadow: 0 0 0 2px rgba(3,6,10,.8), 0 1px 3px rgba(0,0,0,.76), inset 1px 1px 1px rgba(255,255,255,.29); }
.phone-tag-preview__lens::after { position: absolute; top: 19%; left: 24%; width: 23%; aspect-ratio: 1; border-radius: 50%; background: rgba(207,232,250,.34); box-shadow: 0 0 3px rgba(171,215,250,.28); content: ''; }
.phone-tag-preview__lens--one { top: 10%; left: 10%; }
.phone-tag-preview__lens--two { top: 11%; right: 10%; }
.phone-tag-preview__lens--three { bottom: 10%; left: 17%; }
.phone-tag-preview__flash { position: absolute; z-index: 1; right: 11%; bottom: 16%; width: 13%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: radial-gradient(circle, #fffde8 0 25%, #c9c8aa 38%, #626253 100%); box-shadow: 0 0 4px rgba(255,249,202,.38); }
.phone-tag-preview__sensor { position: absolute; z-index: 1; top: 49%; right: 13%; width: 10%; aspect-ratio: 1; border: 1px solid rgba(214,224,231,.37); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #7891a0 0 13%, #1a242b 42%, #07090c 78%); }
.phone-tag-preview__bottom-detail { position: absolute; z-index: 5; bottom: -4px; left: 50%; display: flex; width: 49%; height: 4px; align-items: center; justify-content: center; gap: 3px; transform: translateX(-50%); }
.phone-tag-preview__speaker { display: block; width: 2px; height: 2px; border-radius: 50%; background: #060a0e; box-shadow: 0 1px 0 rgba(215,225,234,.16); }
.phone-tag-preview__port { display: block; width: 16px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #05080b, #2b3742 48%, #05080b); box-shadow: inset 0 1px 0 rgba(172,191,206,.18); }
.phone-tag-preview__tag-mount { position: absolute; z-index: 7; top: 56%; left: 50%; width: 53.5%; aspect-ratio: 1; border: 1px solid rgba(2,4,7,.84); border-radius: 50%; background: linear-gradient(140deg, #1b222a, #05070a 77%); box-shadow: 0 4px 7px rgba(0,0,0,.53); transform: translate(-50%,-50%) translateZ(12px); }
.phone-tag-preview__tag { position: absolute; z-index: 8; top: 56%; left: 50%; display: grid; width: 49%; aspect-ratio: 1; border: 1px solid rgba(184,213,238,.78); border-radius: 50%; background: radial-gradient(circle at 31% 24%, #8cb7e5 0%, #386caa 20%, #183d6b 48%, #0b1d35 76%, #07111d 100%); box-shadow: 0 1px 0 rgba(232,244,255,.46) inset, 0 0 0 2px rgba(6,11,19,.58), 0 9px 11px rgba(0,0,0,.48); transform: translate(-50%,-50%) translateZ(18px); place-items: center; }
.phone-tag-preview__tag::before { position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.52); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(8,30,63,.24); content: ''; }
.phone-tag-preview__tag::after { position: absolute; width: 22%; height: 22%; border: 1px solid rgba(255,255,255,.44); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.045), 0 0 0 9px rgba(255,255,255,.035); content: ''; }
.phone-tag-preview__tag-mark { position: absolute; z-index: 1; width: 30%; height: 30%; border: 1px solid rgba(247,251,255,.65); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.07), 0 0 0 8px rgba(255,255,255,.045); }
.phone-tag-preview__tag-mark::before, .phone-tag-preview__tag-mark::after { position: absolute; top: 50%; left: 50%; width: 2px; border-radius: 2px; background: rgba(247,251,255,.82); content: ''; transform: translate(-50%,-50%); }
.phone-tag-preview__tag-mark::before { height: 46%; }
.phone-tag-preview__tag-mark::after { width: 46%; height: 2px; }

/* The supplied studio render is the product reference for this card. It keeps
   the handset, camera cluster and applied tag as one photographic object
   instead of recreating a second, less faithful CSS interpretation. */
.product-stage--phone { background: radial-gradient(ellipse at 48% 42%, rgba(34,67,123,.36), rgba(9,13,21,.72) 58%, rgba(3,5,9,.92) 100%); }
.product-stage--phone .phone-tag-preview { position: absolute; z-index: 1; inset: 0; display: grid; width: auto; height: auto; box-sizing: border-box; padding: clamp(6px, 1vw, 12px); isolation: isolate; place-items: center; }
.phone-tag-preview__render { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; min-width: 0; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(0,0,0,.46)); transition: filter .35s ease, opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.phone-tag-preview__render--personalized { opacity: 0; transform: translateY(8px); }
.product-card.is-personalized .phone-tag-preview__render--standard { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.product-card.is-personalized .phone-tag-preview__render--personalized { opacity: 1; transform: none; pointer-events: auto; }

/* Personalized variants use a neutral studio treatment so the client's future
   visual identity remains the focus instead of a competing product palette. */
.product-card.is-personalized { border-color: rgba(232,236,242,.24); background: linear-gradient(145deg, #181b20, #090a0d 68%); box-shadow: 0 27px 78px rgba(0,0,0,.34); }
.product-card.is-personalized::before { background: radial-gradient(circle at 48% 6%, rgba(238,241,246,.15), transparent 48%), linear-gradient(135deg, rgba(255,255,255,.045), transparent 36%); opacity: 1; }
.product-card.is-personalized .product-card__topline, .product-card.is-personalized .product-card__copy .eyebrow { color: #b9c0ca; }
.product-card.is-personalized .product-stage { border-color: rgba(235,238,243,.2); background: radial-gradient(circle at 48% 26%, rgba(210,216,226,.19), rgba(27,30,36,.48) 47%, rgba(4,5,7,.94) 100%); }
.product-card.is-personalized .product-stage::before { background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 27%, transparent 68%, rgba(255,255,255,.035)); }
.product-card.is-personalized .product-art--personalized { filter: grayscale(1) contrast(1.08) brightness(.98) drop-shadow(0 22px 14px rgba(0,0,0,.54)); }
.product-card.is-personalized .product-stage > canvas { filter: grayscale(1) contrast(1.12) brightness(.94); }
.product-card.is-personalized .product-stage__reflection { background: rgba(223,228,236,.17); }
.product-card.is-personalized .product-variants { border-color: rgba(241,244,248,.28); background: rgba(255,255,255,.055); }
.product-card.is-personalized .product-variants button[data-product-variant='personalized'] { background: #eceef1; color: #101216; }
.product-card.is-personalized .product-variants button[data-product-variant='personalized']::before { display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: currentColor; content: ''; vertical-align: middle; }
.product-card.is-personalized .card-preview { box-shadow: 0 22px 26px rgba(0,0,0,.58), 0 2px 0 rgba(255,255,255,.19) inset; }
.product-card.is-personalized .card-preview__glare { opacity: .76; }
.product-card.is-personalized .phone-tag-preview__device { border-color: rgba(239,242,247,.72); background: linear-gradient(112deg, #959aa1 0%, #3e444c 14%, #101216 49%, #4b5158 100%); box-shadow: -3px 3px 0 #050609, 5px 9px 0 #8f959c, 14px 25px 30px rgba(0,0,0,.62), inset 1px 1px 0 rgba(255,255,255,.68), inset -1px -1px 0 rgba(0,0,0,.86); }
.product-card.is-personalized .phone-tag-preview__rear { background: radial-gradient(circle at 23% 17%, rgba(255,255,255,.18), transparent 21%), linear-gradient(135deg, #70757c 0%, #30353b 29%, #101216 68%, #474c53 100%); }
.product-card.is-personalized .phone-tag-preview__edge, .product-card.is-personalized .phone-tag-preview__device::after, .product-card.is-personalized .phone-tag-preview__button { background: linear-gradient(90deg, #171a1e, #b7bcc3 53%, #3c4148); }
.product-card.is-personalized .phone-tag-preview__camera { border-color: rgba(229,234,240,.56); background: linear-gradient(145deg, #757b83 0%, #24282f 27%, #07080a 77%, #444951 100%); }
.product-card.is-personalized .phone-tag-preview__lens { border-color: rgba(225,230,237,.58); background: radial-gradient(circle at 34% 28%, #d4d9de 0 7%, #707780 13%, #23282e 32%, #060709 68%, #16191d 100%); }
.product-card.is-personalized .phone-tag-preview__tag-mount { background: linear-gradient(140deg, #2e3339, #07080a 77%); }
.product-card.is-personalized .phone-tag-preview__tag { border-color: rgba(246,247,249,.82); background: radial-gradient(circle at 32% 26%, #d1d5da 0%, #888f98 27%, #3c424a 60%, #101216 100%); }
.product-card.is-personalized .phone-tag-preview__tag::before, .product-card.is-personalized .tag-preview--adhesive::after { border-color: rgba(255,255,255,.44); }
.product-card.is-personalized .phone-tag-preview__tag-mark { border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 0 8px rgba(255,255,255,.045); }
.product-card.is-personalized .product-stage--phone { background: radial-gradient(ellipse at 48% 42%, rgba(202,208,219,.16), rgba(12,14,18,.78) 58%, rgba(3,4,6,.96) 100%); }
.product-card.is-personalized .phone-tag-preview__render { filter: drop-shadow(0 20px 18px rgba(0,0,0,.52)); }
.product-card.is-personalized .tag-preview--adhesive { border-color: rgba(241,243,246,.65); background: linear-gradient(145deg, #7e8793, #262b32 59%, #090a0c); box-shadow: inset 7px 7px 14px rgba(255,255,255,.14), inset -15px -16px 24px rgba(0,0,0,.48), 0 24px 26px rgba(0,0,0,.52); }
.product-card.is-personalized .tag-preview__grid { background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); }
.product-card.is-personalized .tag-preview__mark--personalized { color: #f4f5f7; text-shadow: 0 1px 7px rgba(0,0,0,.65); }

/* Customer artwork is a layer over the existing personalised mockup, never a
   replacement for its product body, QR/NFC information or studio lighting.
   It is hidden until the shared uploader contains a valid image. */
.product-customization { position: absolute; display: block; opacity: 0; pointer-events: none; transition: opacity .32s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.product-customization[hidden] { display: none; }
.product-customization__surface { position: absolute; overflow: hidden; isolation: isolate; }
.product-customization__surface > img { position: absolute; top: calc(50% + var(--card-artwork-y, 0%)); left: calc(50% + var(--card-artwork-x, 0%)); display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translate(-50%, -50%) rotate(var(--card-artwork-rotation, 0deg)) scale(var(--card-artwork-scale, 1)); transform-origin: center; will-change: transform, left, top; }
.product-card.is-personalized .product-customization:not([hidden]) { opacity: 1; }

/* The plaque artwork is restricted to its upper printed face. The trapezoid
   follows the perspective already present in the supplied studio render while
   the lower NFC and QR areas remain the original mockup. */
.product-customization--plaque { z-index: 3; bottom: 0; left: 50%; width: auto; height: 94%; max-width: 92%; aspect-ratio: 1024 / 1536; transform: translateX(-50%) translateY(10px); }
.product-card.is-personalized .product-customization--plaque:not([hidden]) { transform: translateX(-50%); }
.product-customization--plaque .product-customization__surface { top: 5.8%; right: 15.2%; bottom: 43.4%; left: 17.4%; clip-path: polygon(0 0, 96% 10%, 100% 91%, 1.5% 100%); }

/* The card keeps its outer trim, lower NFC message and glare. Its parent owns
   the existing 3D perspective transform, so the inserted artwork follows it
   without a second distortion pass. */
.product-customization--card { z-index: 1; inset: 0; transform: translateY(9px); }
.product-card.is-personalized .product-customization--card:not([hidden]) { transform: none; }
.product-customization--card .product-customization__surface { top: 20%; right: 10%; bottom: 43%; left: 10%; border-radius: 7%; }

/* The phone is a photographic render. A source-aspect frame aligns the small
   circular tag with the rendered handset and leaves its camera/body untouched. */
.product-customization--phone { z-index: 2; inset: 0; display: grid; transform: translateY(8px); place-items: center; }
.product-card.is-personalized .product-customization--phone:not([hidden]) { transform: none; }
.product-customization--phone .product-customization__frame { position: relative; width: auto; height: 100%; max-width: 100%; aspect-ratio: 1086 / 1448; }
.product-customization--phone .product-customization__surface { top: 54.1%; left: 39.4%; width: 21.2%; height: 15.9%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(218,230,240,.2), inset 0 0 13px rgba(0,0,0,.25); }
.product-customization--phone .product-customization__surface::after { position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(235,244,251,.28); border-radius: inherit; background: linear-gradient(130deg, rgba(255,255,255,.13), transparent 32%, rgba(0,0,0,.18)); content: ''; pointer-events: none; }

/* The table tag retains its rim and bottom NFC/QR label; only the central
   identity field is replaced by the visitor's artwork. */
.product-customization--tag-table { z-index: 1; inset: 0; transform: translateY(5px); }
.product-card.is-personalized .product-customization--tag-table:not([hidden]) { transform: none; }
.product-customization--tag-table .product-customization__surface { top: 24%; right: 14%; bottom: 35%; left: 14%; border-radius: 11%; }
.product-customization--tag-table .product-customization__surface::after { position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(245,248,252,.18); border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%, rgba(0,0,0,.12)); content: ''; pointer-events: none; }

/* The personalization workspace extends the current product section instead
   of changing any card or showcase geometry. It stays out of the layout until
   a visitor intentionally selects the personalized route. */
.personalization-panel { position: relative; margin-top: clamp(18px, 3vw, 34px); border: 1px solid rgba(225,232,244,.16); border-radius: 15px; background: linear-gradient(135deg, rgba(19,25,35,.98), rgba(8,11,17,.98)); box-shadow: 0 24px 60px rgba(0,0,0,.2); padding: clamp(19px, 3vw, 31px); isolation: isolate; }
.personalization-panel::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle at 78% 0%, rgba(58,111,220,.16), transparent 42%); content: ''; pointer-events: none; }
.personalization-panel[hidden] { display: none; }
.personalization-panel__intro { max-width: 620px; }
.personalization-panel__intro .eyebrow { margin-bottom: 12px; color: #a9b6c8; }
.personalization-panel__intro h3 { max-width: 600px; margin: 0 0 11px; font-size: clamp(25px, 3.1vw, 38px); line-height: 1.06; letter-spacing: -.055em; }
.personalization-panel__intro h3 span { color: #cddcff; }
.personalization-panel__intro > p:last-child { max-width: 565px; margin-bottom: 0; color: #aab4c2; font-size: 13px; line-height: 1.65; }
.personalization-journey__steps { position: relative; z-index: 1; display: grid; overflow: hidden; margin: clamp(20px, 3vw, 30px) 0 0; padding: 0; border: 1px solid rgba(225,232,244,.13); border-radius: 10px; background: rgba(5,8,13,.42); grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; }
.personalization-journey__steps li { display: grid; min-width: 0; min-height: 76px; border-right: 1px solid rgba(225,232,244,.1); color: #7f8c9e; padding: 13px 12px; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; transition: background .28s ease, color .28s ease; }
.personalization-journey__steps li:last-child { border-right: 0; }
.personalization-journey__steps li > span { color: #62738b; font: 9px 'DM Mono', monospace; letter-spacing: .65px; }
.personalization-journey__steps li > div { display: grid; min-width: 0; gap: 4px; }
.personalization-journey__steps b { overflow: hidden; color: #bdc7d3; font-size: 10px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.personalization-journey__steps small { overflow: hidden; color: inherit; font: 8px/1.35 'DM Mono', monospace; letter-spacing: .15px; text-overflow: ellipsis; white-space: nowrap; }
.personalization-journey__steps li[data-state='active'] { background: rgba(88,135,228,.13); color: #b7cff7; }
.personalization-journey__steps li[data-state='active'] > span { color: #92b8ff; }
.personalization-journey__steps li[data-state='active'] b { color: #f2f6fc; }
.personalization-journey__steps li[data-state='complete'] > span { color: #a9d8c1; }
.personalization-journey__steps li[data-state='complete'] b { color: #e4ebf4; }
.personalization-panel__workspace { display: grid; margin-top: clamp(22px, 3vw, 31px); grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: clamp(15px, 2.5vw, 28px); align-items: start; }
.personalization-upload, .personalization-editor { min-width: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(5,8,13,.48); }
.personalization-upload { display: flex; min-height: 100%; padding: clamp(17px, 2.4vw, 24px); flex-direction: column; align-items: flex-start; }
.personalization-upload__copy { display: grid; align-items: start; grid-template-columns: 27px minmax(0, 1fr); gap: 10px; }
.personalization-upload__index, .personalization-editor__topline > span { color: #708097; font: 9px 'DM Mono', monospace; letter-spacing: .8px; }
.personalization-upload__copy b { display: block; margin: 0 0 8px; color: #f2f5f8; font-size: 14px; letter-spacing: -.025em; }
.personalization-upload__copy p { margin: 0; color: #99a6b8; font-size: 12px; line-height: 1.58; }
.personalization-upload__trigger { position: relative; margin-top: 23px; overflow: hidden; cursor: pointer; }
.personalization-upload__trigger input { position: absolute; inline-size: 1px; block-size: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.personalization-upload__trigger:focus-within { outline: 2px solid #68a3ff; outline-offset: 4px; }
.personalization-upload__filename { width: 100%; overflow: hidden; margin: 15px 0 0; color: #bec8d6; font: 9px/1.5 'DM Mono', monospace; letter-spacing: .35px; text-overflow: ellipsis; white-space: nowrap; }
.personalization-status, .personalization-quality { min-height: 1.5em; margin: 10px 0 0; color: #9eacbd; font-size: 11px; line-height: 1.5; }
.personalization-status[data-upload-state='ready'], .personalization-quality[data-quality='ready'] { color: #a9d8c1; }
.personalization-status[data-upload-state='warning'], .personalization-quality[data-quality='warning'] { color: #f0ce91; }
.personalization-status[data-upload-state='error'], .personalization-quality[data-quality='error'] { color: #ffafb0; }
.personalization-editor { padding: clamp(14px, 2vw, 19px); }
.personalization-editor[hidden] { display: none; }
.personalization-editor__topline { display: flex; min-height: 20px; align-items: center; gap: 8px; }
.personalization-editor__topline > span:nth-child(2) { color: #aab6c6; }
.personalization-surfaces { display: flex; overflow: hidden; margin-left: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; }
.personalization-surfaces button { min-height: 27px; border: 0; border-right: 1px solid rgba(255,255,255,.11); background: transparent; color: #99a6b7; padding: 5px 8px; cursor: pointer; font: 8px 'DM Mono', monospace; letter-spacing: .35px; }
.personalization-surfaces button:last-child { border-right: 0; }
.personalization-surfaces button.is-active { background: rgba(255,255,255,.12); color: #fff; }
.personalization-preview-wrap { display: grid; margin-top: 13px; grid-template-columns: minmax(0, 1fr) minmax(126px, .32fr); gap: 14px; align-items: end; }
.personalization-preview { --personalization-aspect: 1; --safe-area-inset: 7%; position: relative; width: min(100%, 356px); overflow: hidden; border: 1px solid rgba(235,241,249,.33); border-radius: 8px; background: repeating-conic-gradient(from 45deg, rgba(255,255,255,.05) 0 25%, rgba(255,255,255,.02) 0 50%) 50% / 15px 15px, #10151d; aspect-ratio: var(--personalization-aspect); cursor: grab; touch-action: none; }
.personalization-preview:focus-visible { outline: 2px solid #68a3ff; outline-offset: 4px; }
.personalization-preview.is-dragging { cursor: grabbing; }
.personalization-preview img { position: absolute; top: calc(50% + var(--artwork-y, 0%)); left: calc(50% + var(--artwork-x, 0%)); display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--artwork-rotation, 0deg)) scale(var(--artwork-scale, 1)); transform-origin: center; will-change: transform, left, top; }
.personalization-preview__safe-area { position: absolute; z-index: 1; inset: var(--safe-area-inset); border: 1px dashed rgba(247,250,255,.76); box-shadow: 0 0 0 999px rgba(4,7,11,.13); pointer-events: none; }
.personalization-preview[data-personalization-surface-shape='circle'], .personalization-preview[data-personalization-surface-shape='circle'] .personalization-preview__safe-area { border-radius: 50%; }
.personalization-preview-wrap > p { max-width: 152px; margin: 0 0 2px; color: #8f9daf; font: 10px/1.55 'DM Mono', monospace; letter-spacing: .15px; }
.personalization-controls { display: grid; margin-top: 17px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 16px; }
.personalization-controls label { display: grid; min-width: 0; gap: 7px; color: #bac4d0; font: 8px 'DM Mono', monospace; letter-spacing: .55px; }
.personalization-controls input { width: 100%; accent-color: #85afff; cursor: ew-resize; }
.personalization-editor__actions { display: flex; margin-top: 17px; align-items: center; flex-wrap: wrap; gap: 16px; }
.personalization-editor__actions .text-link { border: 0; background: transparent; color: #dce6f5; padding: 0; cursor: pointer; font: 700 10px Manrope, sans-serif; }
.personalization-editor__actions .text-link:hover { color: #fff; }
.personalization-editor__clear { color: #aab5c3 !important; }
.personalization-editor__clear:hover { color: #ffced0 !important; }
.personalization-quality { margin-bottom: 0; }
.personalization-visualization { display: flex; margin-top: clamp(16px, 2.4vw, 24px); border: 1px solid rgba(202,219,247,.16); border-radius: 10px; background: linear-gradient(110deg, rgba(47,83,144,.17), rgba(7,10,16,.38)); padding: clamp(15px, 2vw, 20px); align-items: center; justify-content: space-between; gap: 20px; }
.personalization-visualization[hidden], .personalization-confirmation[hidden] { display: none; }
.personalization-visualization__copy { display: grid; min-width: 0; gap: 6px; }
.personalization-visualization__copy > span, .personalization-confirmation__copy > span { color: #8ca8d5; font: 9px 'DM Mono', monospace; letter-spacing: .8px; }
.personalization-visualization__copy b, .personalization-confirmation__copy b { color: #eff4fb; font-size: 14px; letter-spacing: -.025em; }
.personalization-visualization__copy p, .personalization-confirmation__copy p { max-width: 560px; margin: 0; color: #a8b5c6; font-size: 12px; line-height: 1.55; }
.personalization-visualization .text-link { flex: none; border-color: rgba(196,213,242,.46); color: #f0f5fc; white-space: nowrap; }
.personalization-confirmation { display: flex; margin-top: 13px; border: 1px solid rgba(225,232,244,.19); border-radius: 10px; background: rgba(242,247,255,.045); padding: clamp(16px, 2.2vw, 22px); align-items: center; justify-content: space-between; gap: 22px; }
.personalization-confirmation__copy { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.personalization-confirmation__copy > div { display: grid; gap: 6px; }
.personalization-confirmation__cta { flex: none; white-space: nowrap; }
.personalization-confirmation__cta[aria-disabled='true'] { opacity: .46; cursor: not-allowed; pointer-events: none; }

.product-flow { display: grid; overflow: clip; background: var(--surface); grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: clamp(52px, 9vw, 150px); align-items: start; }
.flow-intro { max-width: 455px; }
.flow-content { min-width: 0; }
.flow-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.flow-list li { display: grid; padding: 29px 0; border-bottom: 1px solid var(--line); grid-template-columns: 74px 1fr; gap: 18px; }
.flow-list span { color: #788496; font: 10px 'DM Mono', monospace; letter-spacing: 1px; }
.flow-list h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.05em; }
.flow-list p { max-width: 370px; margin: 0; color: #aeb7c4; font-size: 13px; line-height: 1.62; }
.benefit-stack { display: grid; margin-top: 32px; border-top: 1px solid var(--line); grid-template-columns: minmax(148px, .58fr) 1fr; gap: 24px; align-items: start; }
.benefit-stack .eyebrow { margin: 20px 0; color: #8290a2; }
.benefit-stack ul { display: grid; margin: 0; padding: 15px 0 0; list-style: none; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.benefit-stack li { display: flex; align-items: center; gap: 8px; color: #d9e1eb; font-size: 12px; line-height: 1.35; }
.benefit-stack li::before { width: 5px; height: 5px; border-radius: 50%; background: #70a7ff; box-shadow: 0 0 12px rgba(112,167,255,.65); content: ''; flex: none; }

.faq { background: var(--paper); color: var(--ink); }
.faq .eyebrow { color: #5b636e; }
.faq h2 { margin-bottom: 51px; }
.faq-list { border-top: 1px solid #c8cbcc; }
.faq details { border-bottom: 1px solid #c8cbcc; }
.faq summary { display: flex; padding: 22px 0; cursor: pointer; font-size: 17px; font-weight: 700; list-style: none; justify-content: space-between; gap: 22px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { font-size: 22px; font-weight: 400; transition: transform .25s; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 690px; margin: 0 0 22px; color: #606872; font-size: 14px; line-height: 1.7; }

.portfolio { overflow: clip; background: #0a0d12; }
.portfolio::before { position: absolute; inset: 0; background: radial-gradient(circle at 88% 10%, rgba(203,212,226,.13), transparent 27%), linear-gradient(128deg, rgba(255,255,255,.032), transparent 31%); content: ''; pointer-events: none; }
.portfolio__intro { position: relative; z-index: 1; display: grid; max-width: 970px; margin-bottom: clamp(42px, 5.4vw, 65px); grid-template-columns: minmax(0, 1.1fr) minmax(210px, .65fr); gap: clamp(28px, 7vw, 112px); align-items: end; }
.portfolio__intro .eyebrow { margin-bottom: 18px; color: #b8c1cc; }
.portfolio__intro > p { max-width: 350px; margin: 0 0 5px; color: #aeb7c3; font-size: 13px; line-height: 1.72; }
.portfolio__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.portfolio-project { min-width: 0; overflow: hidden; border: 1px solid rgba(232,237,244,.13); background: linear-gradient(145deg, rgba(24,28,34,.96), rgba(9,11,15,.98)); box-shadow: 0 24px 58px rgba(0,0,0,.19); transition: border-color .35s ease, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
.portfolio-project--wide { grid-column: span 7; }
.portfolio-project--tall { grid-column: span 5; }
.portfolio-project--compact { grid-column: span 5; }
.portfolio-project--landscape { grid-column: span 7; }
.portfolio-project__media { position: relative; min-height: 210px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.09); background: radial-gradient(circle at 52% 36%, rgba(224,229,237,.11), transparent 34%), linear-gradient(135deg, #1b2028, #0c0f14 68%); isolation: isolate; }
.portfolio-project--wide .portfolio-project__media { aspect-ratio: 1.48; }
.portfolio-project--tall .portfolio-project__media { aspect-ratio: 1.08; }
.portfolio-project--compact .portfolio-project__media, .portfolio-project--landscape .portfolio-project__media { aspect-ratio: 1.64; }
.portfolio-project__media--table { background: radial-gradient(circle at 68% 25%, rgba(241,243,244,.15), transparent 30%), linear-gradient(150deg, #252522, #0c0d0f 69%); }
.portfolio-project__media--networking { background: radial-gradient(circle at 30% 28%, rgba(204,211,220,.14), transparent 28%), linear-gradient(140deg, #20242a, #0a0c10 73%); }
.portfolio-project__media--retail { background: radial-gradient(circle at 65% 38%, rgba(218,224,232,.11), transparent 32%), linear-gradient(130deg, #171a20, #080a0d 72%); }
.portfolio-project__media::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(112deg, transparent 33%, rgba(255,255,255,.09) 49%, transparent 63%); content: ''; opacity: .36; transform: translateX(-135%); transition: transform .9s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.portfolio-project__placeholder { position: absolute; z-index: 1; inset: 0; display: block; }
.portfolio-project__placeholder-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,.92), transparent 78%); mask-image: linear-gradient(135deg, rgba(0,0,0,.92), transparent 78%); opacity: .65; }
.portfolio-project__placeholder-frame { position: absolute; inset: clamp(18px, 4vw, 42px); border: 1px solid rgba(240,244,250,.23); }
.portfolio-project__placeholder-frame::before, .portfolio-project__placeholder-frame::after { position: absolute; background: rgba(242,245,248,.32); content: ''; }
.portfolio-project__placeholder-frame::before { top: 50%; left: 50%; width: 37%; height: 1px; transform: translate(-50%,-50%); }
.portfolio-project__placeholder-frame::after { top: 50%; left: 50%; width: 1px; height: 37%; transform: translate(-50%,-50%); }
.portfolio-project__placeholder-note, .portfolio-project__placeholder-index { position: absolute; color: rgba(239,243,248,.68); font: 500 8px 'DM Mono', monospace; letter-spacing: 1px; }
.portfolio-project__placeholder-note { bottom: 15px; left: 16px; }
.portfolio-project__placeholder-index { top: 15px; right: 16px; color: rgba(239,243,248,.43); }
.portfolio-project__copy { padding: clamp(19px, 2.4vw, 28px); }
.portfolio-project__copy .eyebrow { margin-bottom: 12px; color: #aeb8c5; font-size: 8px; }
.portfolio-project__copy h3 { max-width: 430px; margin: 0 0 10px; font-size: clamp(21px, 2.25vw, 29px); line-height: 1.08; letter-spacing: -.055em; }
.portfolio-project__copy > p:not(.eyebrow) { max-width: 430px; margin: 0; color: #aab3c0; font-size: 12px; line-height: 1.62; }
.portfolio-project__copy small { display: block; margin-top: 20px; color: #858f9d; font: 500 8px 'DM Mono', monospace; letter-spacing: .85px; }
.portfolio-project:hover { border-color: rgba(242,246,250,.3); box-shadow: 0 30px 75px rgba(0,0,0,.31); transform: translateY(-4px); }
.portfolio-project:hover .portfolio-project__media::after { transform: translateX(135%); }

.closing { display: flex; min-height: 530px; background: linear-gradient(135deg, #edf1f7, #dfe8f7); color: #0d1626; padding-top: 110px; padding-bottom: 110px; flex-direction: column; justify-content: center; }
.closing .eyebrow { color: #546174; }
.closing h2 { margin-bottom: 35px; font-size: clamp(48px, 7.1vw, 100px); }
.closing .button { width: max-content; background: #1157c9; color: #fff; }
.mobile-cta { display: none; }
.mobile-cta.is-suppressed { opacity: 0 !important; transform: translateY(120%) !important; pointer-events: none; }

/* ── RODAPÉ ──────────────────────────────────────────────
   Mesma estrutura e conteúdo do rodapé compartilhado do
   ecossistema D3, no idioma visual do próprio NFC. */
.site-footer { background: var(--surface); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(38px, 6vw, 90px);
  padding: clamp(56px, 6vw, 84px) max(24px, calc((100vw - var(--content)) / 2)) clamp(40px, 4vw, 58px);
}
.site-footer__logo img { display: block; width: auto; height: 27px; filter: brightness(0) invert(1); }
.site-footer__brand p { max-width: 32ch; margin-top: 20px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.site-footer__social { display: flex; gap: 8px; margin-top: 24px; }
.site-footer__social a {
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: #c8d2e0;
  place-items: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease, translate .25s cubic-bezier(.22, 1, .36, 1);
}
.site-footer__social a:hover { background: #fff; border-color: #fff; color: #0a0d12; translate: 0 -2px; }
.site-footer__social .icon { width: 16px; height: 16px; }
.site-footer__nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1.05fr); gap: 30px; }
.site-footer__col strong {
  display: block;
  margin-bottom: 15px;
  color: #62738b;
  font: 500 9.5px 'DM Mono', monospace;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.site-footer__col > a, .site-footer__col > span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  color: #c2ccda;
  font-size: 13.5px;
  line-height: 1.5;
  transition: color .22s ease;
}
.site-footer__col > a > span, .site-footer__col > span > span { min-width: 0; overflow-wrap: anywhere; }
.site-footer__col > a:hover { color: #fff; }
.site-footer__col .icon { width: 14px; height: 14px; margin-top: 3px; color: #62738b; flex: none; }
.site-footer__bottom { border-top: 1px solid var(--line); }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 22px max(24px, calc((100vw - var(--content)) / 2));
  color: #62738b;
  font: 9.5px 'DM Mono', monospace;
  letter-spacing: .9px;
}
.site-footer__bottom-inner a { transition: color .22s ease; }
.site-footer__bottom-inner a:hover { color: #fff; }

@media (max-width: 1080px) {
  .site-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}

@media (max-width: 520px) {
  .site-footer__col:nth-child(n+3) { grid-column: 1 / -1; }
}

.scroll-progress { position: fixed; z-index: 80; top: 50%; right: 16px; display: flex; height: 120px; align-items: center; gap: 8px; mix-blend-mode: difference; transform: translateY(-50%); pointer-events: none; }
.scroll-progress::before { width: 1px; height: 100%; background: rgba(255,255,255,.16); content: ''; }
.scroll-progress span { position: absolute; top: 0; left: 0; width: 1px; height: calc(100% * var(--progress,0)); background: #fff; transform-origin: top; }
.scroll-progress b { color: rgba(255,255,255,.58); font: 8px 'DM Mono',monospace; writing-mode: vertical-rl; }
.studio-cursor { position: fixed; z-index: 100; top: 0; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; mix-blend-mode: difference; opacity: 0; pointer-events: none; transition: width .25s,height .25s,margin .25s,opacity .2s; }
.studio-cursor.is-visible { opacity: 1; }
.studio-cursor.is-active { width: 42px; height: 42px; margin: -21px 0 0 -21px; background: rgba(255,255,255,.92); }
.studio-cursor.is-canvas { opacity: 0; }
.studio-cursor b { position: absolute; top: 50%; left: 50%; color: #000; font: 7px 'DM Mono',monospace; transform: translate(-50%,-50%); }
.custom-cursor a,.custom-cursor button,.custom-cursor summary { cursor: none; }

@media (max-width: 1120px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card { --product-media-height: clamp(250px, 34vw, 328px); min-height: 654px; }
}

/* Four product choices still need their full names at tablet widths. Tighten
   only the internal control spacing here instead of changing the showcase
   structure or abbreviating a product name. */
@media (min-width: 801px) and (max-width: 1120px) {
  .showcase-switcher button { padding-inline: 7px; column-gap: 4px; }
  .showcase-switcher button b { font-size: 9px; }
}

@media (max-width: 1020px) {
  .hero { grid-template-columns: minmax(280px,.9fr) minmax(400px,1.1fr); }
  h1 { font-size: clamp(44px, 6vw, 62px); }
  .product-card { --product-media-height: clamp(244px, 34vw, 312px); min-height: 648px; padding: 16px; }
  .product-card h3 { font-size: 24px; }
  .personalization-panel__workspace { grid-template-columns: 1fr; }
  .personalization-journey__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .personalization-journey__steps li:nth-child(3) { border-right: 0; }
  .personalization-journey__steps li:nth-child(n + 4) { border-top: 1px solid rgba(225,232,244,.1); }
  .personalization-journey__steps li:nth-child(4) { grid-column: span 2; }
  .personalization-upload { min-height: 0; }
  .portfolio-project__media { min-height: 185px; }
  .scroll-progress,.studio-cursor { display: none; }
}

@media (max-width: 800px) {
  .hero { display: flex; min-height: 830px; padding: 96px 16px 38px; flex-direction: column; }
  .hero-copy { width: 100%; }
  h1 { font-size: clamp(42px, 12.2vw, 52px); }
  .lede { font-size: 14px; }
  .actions { gap: 18px; }
  .actions .button { padding-inline: 16px; }
  .hero-stage { width: calc(100% + 20px); height: 468px; min-height: 468px; margin-top: -5px; }
  .stage-label, .hero-scroll { display: none; }
  .canvas-hint { bottom: 24px; }
  .hero-stage canvas { top: 52px; height: calc(100% - 116px); }
  .hero-stage .canvas-hint { top: 12px; left: 14px; }
  .hero-stage .view-controls { top: 8px; right: 3%; bottom: auto; }
  .showcase-variants { top: 8px; right: 145px; }
  .showcase-variants button { padding-inline: 8px; font-size: 8px; }
  .showcase-summary { display: none; }
  .showcase-switcher { right: 10px; bottom: 10px; left: 10px; }
  .showcase-switcher button { min-height: 55px; padding: 8px 7px; column-gap: 5px; }
  .showcase-switcher button b { font-size: 9px; }
  .showcase-switcher button small { font-size: 7px; }
  .section { padding: 88px 20px; }
  .section-index { top: 20px; right: 20px; }
  .products-intro { margin-bottom: 39px; }
  .products h2, .product-flow h2, .faq h2, .portfolio h2 { font-size: 39px; }
  .product-grid { grid-template-columns: 1fr; gap: 16px; }
  .product-card { min-height: 0; height: auto; padding: 18px; grid-template-rows: auto min(75vw, 350px) auto auto auto; }
  .product-card__copy { padding-top: 22px; padding-bottom: 22px; }
  .product-variants { margin-top: 0; }
  .product-card .text-link { margin-top: 18px; }
  .personalization-panel { margin-top: 16px; padding: 18px; }
  .personalization-panel__intro h3 { font-size: 27px; }
  .personalization-panel__workspace { margin-top: 20px; }
  .personalization-journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personalization-journey__steps li { min-height: 66px; border-right: 1px solid rgba(225,232,244,.1); border-top: 1px solid rgba(225,232,244,.1); padding: 11px 10px; }
  .personalization-journey__steps li:nth-child(-n + 2) { border-top: 0; }
  .personalization-journey__steps li:nth-child(3) { border-right: 1px solid rgba(225,232,244,.1); }
  .personalization-journey__steps li:nth-child(2n) { border-right: 0; }
  .personalization-journey__steps li:nth-child(4) { grid-column: auto; }
  .personalization-journey__steps li:last-child { grid-column: span 2; }
  .personalization-preview-wrap { grid-template-columns: 1fr; }
  .personalization-preview { margin-inline: auto; }
  .personalization-preview-wrap > p { max-width: 330px; text-align: center; justify-self: center; }
  .personalization-visualization, .personalization-confirmation { align-items: flex-start; flex-direction: column; }
  .personalization-confirmation__cta { width: 100%; }
  .product-flow { display: block; }
  .flow-intro { margin-bottom: 46px; }
  .flow-list li { padding: 24px 0; grid-template-columns: 49px 1fr; gap: 12px; }
  .flow-list h3 { font-size: 21px; }
  .benefit-stack { margin-top: 26px; grid-template-columns: 1fr; gap: 0; }
  .benefit-stack .eyebrow { margin: 18px 0 10px; }
  .benefit-stack ul { padding: 6px 0 0; gap: 10px 16px; }
  .faq h2 { margin-bottom: 37px; }
  .faq summary { font-size: 15px; }
  .portfolio__intro { display: block; margin-bottom: 36px; }
  .portfolio__intro > p { margin-top: 22px; }
  .portfolio__grid { grid-template-columns: 1fr; gap: 15px; }
  .portfolio-project--wide, .portfolio-project--tall, .portfolio-project--compact, .portfolio-project--landscape { grid-column: 1; }
  .portfolio-project__media { min-height: 192px; }
  .portfolio-project--wide .portfolio-project__media, .portfolio-project--compact .portfolio-project__media, .portfolio-project--landscape .portfolio-project__media { aspect-ratio: 1.45; }
  .portfolio-project--tall .portfolio-project__media { aspect-ratio: 1.22; }
  .portfolio-project__placeholder-frame { inset: 20px; }
  .portfolio-project__copy { padding: 20px; }
  .portfolio-project__copy h3 { font-size: 23px; }
  .closing { min-height: 490px; padding: 80px 20px; }
  .mobile-cta { position: fixed; z-index: 30; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; display: flex; min-height: 52px; align-items: center; justify-content: space-between; border-radius: 4px; background: #fff; color: #0a0d12; padding: 15px 18px; font-size: 12px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 35px rgba(0,0,0,.28); opacity: 0; transform: translateY(120%); transition: opacity .35s, transform .35s; }
  .mobile-cta.active { opacity: 1; transform: none; }
}

@media (max-width: 365px) {
  h1 { font-size: 40px; }
  .actions { align-items: flex-start; flex-direction: column; }
  .hero { min-height: 920px; }
  .hero-stage { height: 446px; min-height: 446px; }
  .view-controls button { padding-inline: 8px; }
  /* At this width the product name is more useful than its ordinal. Keeping
     the full label in a single column prevents an ellipsis without reducing
     the 55px touch target of each of the four product choices. */
  .showcase-switcher button { padding-inline: 3px; grid-template-columns: 1fr; row-gap: 1px; text-align: center; }
  .showcase-switcher button > span { display: none; }
  .showcase-switcher button b { font-size: 8px; }
  .showcase-switcher button small { font-size: 6px; }
  .product-card { padding: 14px; }
  .product-variants button { padding-inline: 8px; }
  .personalization-journey__steps { grid-template-columns: 1fr; }
  .personalization-journey__steps li, .personalization-journey__steps li:nth-child(4), .personalization-journey__steps li:last-child { grid-column: auto; border-right: 0; }
  .personalization-journey__steps li:nth-child(n + 2) { border-top: 1px solid rgba(225,232,244,.1); }
}

/* Keep the full handset inside the compact one-column stage rather than
   cropping its titanium perimeter on narrow phones. */
@media (max-width: 390px) {
  .phone-tag-preview__device { width: min(55%, 122px); min-width: 0; }
}

@media (max-width: 340px) {
  .phone-tag-preview__device { width: min(50%, 106px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (pointer: coarse) {
  canvas { touch-action: pan-y; }
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }