/* ════════════ PAGE TOKENS & BASE ════════════ */
body.home { font-family: var(--font-sans); color: #111827; background: #fff; }
.amz-wrap { max-width: 1320px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .amz-wrap { padding: 0 1.5rem; } }

/* ── Solid, sticky white header with dark text. Force the slim version always so it
      does NOT jump (resize logo / padding) the moment you start scrolling. ── */
.header-base, .header-scrolled, .header-scrolled-pre, .header-scrolled-up {
  position: sticky !important; top: 0 !important; transform: none !important; opacity: 1 !important;
  background: #fff !important; border-bottom: 1px solid #e8edf2; transition: none !important;
  padding-top: .5rem !important; padding-bottom: .5rem !important;
}
header #logo-image { width: 11rem !important; height: auto !important; }
header nav a:not(.bg-primary-500):not(.bg-primary-600),
header nav button:not(#theme-toggle) { color: rgb(var(--color-gray-700)) !important; }
header nav a:not(.bg-primary-500):not(.bg-primary-600):hover,
header nav button:not(#theme-toggle):hover { color: rgb(var(--color-gray-900)) !important; background-color: rgb(var(--color-gray-50)) !important; }

/* ════════════ BREADCRUMB ════════════ */
.amz-breadcrumb { display: none; } /* hidden for now — keeps markup + schema for easy restore */
.amz-breadcrumb { background: #f8fafc; border-bottom: 1px solid #eef2f6; }
.amz-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: .75rem 0; font-size: .8125rem; color: #64748b; }
.amz-breadcrumb a { color: #64748b; text-decoration: none; }
.amz-breadcrumb a:hover { color: rgb(var(--color-primary-600)); text-decoration: underline; }
.amz-breadcrumb li[aria-hidden] { color: #cbd5e1; }
.amz-breadcrumb li:last-child { color: #111827; font-weight: 600; }

/* ════════════ PDP GRID ════════════ */
.pdp { padding: 1.5rem 0 1rem; }
.pdp .amz-wrap { max-width: 1320px; }  /* full width — the 16:9 slider keeps the first screen short */
/* Desktop: text rail 1/3 (left) · image slider 2/3 (right) */
.pdp__grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 900px) { .pdp__grid { grid-template-columns: minmax(0,1fr) minmax(0,2.35fr); gap: 2.25rem; align-items: stretch; } }
/* Right column equals the left column's height: the image grows to fill the space above the thumbs */
@media (min-width: 900px) { .amz-side { order: 1; } .pdp__gallery { order: 2; display: flex; flex-direction: column; } .amz-hero { aspect-ratio: auto; flex: 1 1 0%; min-height: 0; } }
/* Mobile reflow: title + reviews → slider → Download CTA → price card */
.btn-buy.amz-cta-mobile { display: none; }
@media (max-width: 899px) {
  .pdp { padding: .5rem 0 1rem; }
  .pdp__grid { display: flex; flex-direction: column; gap: .7rem; }
  .amz-side { display: contents; }
  .amz-side__content { order: 1; margin: 0; }
  .info__title { margin-bottom: .35rem; }
  .info__rating { margin-bottom: 0; }
  .pdp__gallery { order: 2; }
  .amz-thumbsrow { margin-top: .5rem; }
  .buybox { order: 4; margin-top: 0; padding-top: .85rem; display: flex; flex-direction: column; }
  .delivery { order: 5; }
  /* Put the email field + button right under the slider (above the fold): price → form → includes list */
  .buybox__label { order: 1; }
  .buybox__price { order: 2; margin-bottom: .5rem; }
  .buybox__lead  { order: 3; margin-top: 0; }
  .buybox__incl  { order: 4; margin: 1.1rem 0 0; }
}
/* The image slider stays on top on mobile (it is first in the DOM). */
.pdp__gallery { min-width: 0; }

/* ── Gallery (left) ── */
.amz-hero { aspect-ratio: 16/9; border-radius: .75rem; overflow: hidden; position: relative; background: #f3f4f6; }
.amz-hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; border-radius: .75rem; will-change: transform; }
.amz-hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; border-radius: .75rem; z-index: 2; will-change: transform; }
.amz-zoom-lens { position: absolute; pointer-events: none; display: none; border: 2px solid rgba(14,165,233,.65); background: rgba(14,165,233,.12); border-radius: .25rem; box-sizing: border-box; z-index: 3; }
.amz-hero.is-zooming .amz-zoom-lens { display: block; }
.amz-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; border-radius: .75rem; }
.gallery__zoomhint { display: flex; align-items: center; justify-content: center; gap: .375rem; margin-top: .625rem; font-size: .8125rem; color: #94a3b8; }
.gallery__zoomhint svg { width: 16px; height: 16px; }
/* Thumb row: scrollable image strip (left) + pinned 3D cell (right) */
.amz-thumbsrow { display: flex; gap: .5rem; margin-top: .75rem; align-items: flex-start; }
/* fixed height reserves the scrollbar's space, so showing/hiding it never shifts the page */
.amz-thumbs { display: flex; align-items: flex-start; gap: .5rem; overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-width: 0; height: 68px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.amz-thumbs::-webkit-scrollbar { height: 6px; }
.amz-thumbs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.amz-thumbs::-webkit-scrollbar-track { background: transparent; }
.amz-thumb { position: relative; flex: 0 0 auto; height: 56px; aspect-ratio: 16/9; border-radius: .5rem; overflow: hidden; border: 1.5px solid #e5e7eb; cursor: pointer; transition: border-color .15s, transform .15s; background: none; padding: 0; font-family: inherit; }
@media (min-width: 640px) { .amz-thumb { height: 64px; } .amz-thumbs { height: 76px; } }
.amz-thumb--ar { flex: 0 0 auto; box-shadow: -8px 0 12px -8px rgba(15,23,42,.18); }

/* ── Finish options (variant swatches) ── */
/* Finish swatches — color circles overlaid vertically on the right of the hero */
.amz-swatches { position: absolute; top: 50%; right: .85rem; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: .55rem; padding: .5rem .4rem; border-radius: 9999px; background: rgba(255,255,255,.55); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(15,23,42,.18); }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff; padding: 0; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; }
.swatch:hover { transform: scale(1.15); }
.swatch.is-active { transform: scale(1.15); box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px rgb(var(--color-primary-500)); }
/* Mobile: a single horizontal row along the bottom of the image (the 16:9 hero is too short for a vertical column) */
@media (max-width: 899px) {
  .amz-swatches { flex-direction: row; top: auto; bottom: .6rem; right: auto; left: 50%; transform: translateX(-50%); gap: .4rem; padding: .35rem .5rem; max-width: calc(100% - 1rem); }
  .swatch { width: 24px; height: 24px; }
}
.amz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amz-thumb:hover { border-color: rgb(var(--color-primary-400)); transform: translateY(-1px); }
.amz-thumb.is-active { border-color: rgb(var(--color-primary-500)); box-shadow: 0 0 0 2px rgba(14,165,233,.25); }
.amz-thumb__overlay { position: absolute; inset: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .375rem; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; text-align: center; background: linear-gradient(135deg, rgba(14,165,233,.92), rgba(2,132,199,.92)); }
.amz-thumb--ar:hover .amz-thumb__overlay { background: linear-gradient(135deg, rgba(14,165,233,1), rgba(2,132,199,1)); }
.amz-thumb__overlay svg { width: 20px; height: 20px; }
/* Canvas 360° spinner (drawn to canvas so frames don't flicker) */
.amz-360 { position: absolute; inset: 0; width: 100%; height: 100%; display: none; z-index: 3; border-radius: .75rem; background: #fff; cursor: grab; touch-action: pan-y; }
.amz-360:active { cursor: grabbing; }
.amz-360-hint { position: absolute; left: 50%; bottom: .85rem; transform: translateX(-50%); z-index: 5; display: none; align-items: center; gap: .35rem; background: rgba(15,23,42,.62); color: #fff; font-size: .75rem; font-weight: 600; padding: .32rem .7rem; border-radius: 9999px; pointer-events: none; transition: opacity .3s; }
.amz-thumb--360 .amz-thumb__overlay { background: linear-gradient(135deg, rgba(2,132,199,.92), rgba(8,47,73,.94)); }
.view3d-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; font-size: .8125rem; font-weight: 600; color: rgb(var(--color-primary-600)); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.view3d-link:hover { color: rgb(var(--color-primary-700)); text-decoration: underline; }
.view3d-link svg { width: 16px; height: 16px; }

/* ── Product info (center) ── */
.amz-side { position: relative; }
.amz-side__content { transition: opacity .15s; }
.amz-side.is-zoomed .amz-side__content { opacity: 0; pointer-events: none; }
.amz-zoom-pane { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1/1; max-height: 100%; display: none; background: #fff no-repeat; border-radius: .75rem; border: 1px solid #e5e7eb; box-shadow: 0 10px 40px rgba(0,0,0,.08); z-index: 5; pointer-events: none; }
.amz-side.is-zoomed .amz-zoom-pane { display: block; }
@media (hover:none) and (pointer:coarse) { .amz-zoom-lens, .amz-zoom-pane { display: none !important; } }
@media (max-width: 899px) { .amz-zoom-lens, .amz-zoom-pane { display: none !important; } .amz-hero { cursor: default; } }
.info__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--color-primary-600)); }
.info__title { font-family: var(--font-display); font-size: clamp(1.65rem, 2.4vw, 2.35rem); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: #0f172a; margin: 0 0 .6rem; }
.info__title em { font-style: normal; color: rgb(var(--color-primary-600)); }
/* Single-column layout (phones + tablet portrait): scale the title up. On phones the
   vw term fills the line width; on wider tablets the 2.7rem cap keeps it balanced. */
@media (max-width: 899px) { .info__title { font-size: clamp(1.9rem, 8.6vw, 2.7rem); line-height: 1.1; } }
.info__rating { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #475569; margin-bottom: .625rem; }
.info__stars { display: inline-flex; gap: 1px; }
.info__stars svg { width: 16px; height: 16px; }
.info__rating strong { color: #0f172a; }
.info__rating a { color: rgb(var(--color-primary-600)); text-decoration: underline; }
.info__desc { font-size: .9375rem; color: #475569; line-height: 1.55; padding-bottom: 0; }
.incl__head { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #334155; margin: .875rem 0 .5rem; }
.incl__grid { display: grid; grid-template-columns: 1fr; gap: .4rem 1.5rem; }
@media (min-width: 520px) { .incl__grid { grid-template-columns: 1fr 1fr; } }
.incl__item { display: flex; align-items: center; gap: .55rem; font-size: .875rem; color: #334155; }
.incl__item svg { width: 18px; height: 18px; flex-shrink: 0; color: rgb(var(--color-primary-500)); }
.incl__item--muted svg { color: #94a3b8; }
.delivery { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e5e7eb; }
.delivery__row { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; color: #0f172a; }
.delivery__row svg { width: 18px; height: 18px; color: rgb(var(--color-primary-600)); flex-shrink: 0; }
.delivery__note { font-size: .8125rem; color: #64748b; margin-top: .25rem; padding-left: 1.625rem; }

/* ── Buy box (right) ── */
.buybox { border: 1px solid #e2e8f0; border-radius: .875rem; padding: 1rem 1.25rem; box-shadow: 0 4px 20px rgba(15,23,42,.05); background: #fff; margin-top: .5rem; }
.buybox__label { font-size: .8125rem; color: #64748b; }
.buybox__price { font-family: var(--font-display); font-size: 2.925rem; font-weight: 700; line-height: 1; color: #0f172a; margin: 0 0 .25rem; }
.buybox__price sup { font-size: 1.125rem; font-weight: 600; top: -1.1rem; }
.buybox__priceunit { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: #64748b; margin-left: .4rem; }
.buybox__pricenote { font-size: .8125rem; color: #64748b; line-height: 1.4; margin-bottom: 1.25rem; }
.buybox__incl { list-style: none; margin: 1rem 0 1.25rem; padding: 1rem 0 0; border-top: 1px solid #eef2f6; display: flex; flex-direction: column; gap: .7rem; }
.buybox__incl li { display: flex; align-items: center; gap: .625rem; font-size: 1.0625rem; color: #334155; }
.buybox__incl svg { width: 18px; height: 18px; flex-shrink: 0; color: rgb(var(--color-primary-500)); }
.buybox__pack { font-family: var(--font-display); margin-bottom: .25rem; }
.buybox__pack span { display: block; font-weight: 700; line-height: 1.2; font-size: 1.3rem; letter-spacing: -.01em; }
.buybox__pack-a { color: #0f172a; }
.buybox__pack-b { color: rgb(var(--color-primary-600)); }
.btn-buy { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .7rem 1rem; border-radius: 9999px; font-weight: 700; font-size: .9375rem; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .15s, transform .15s, box-shadow .15s; border: 1px solid transparent; }
.btn-buy--primary { background: rgb(var(--color-primary-500)); color: #fff; box-shadow: 0 4px 14px rgba(14,165,233,.3); }
.btn-buy--primary:hover { background: rgb(var(--color-primary-600)); transform: translateY(-1px); }
.btn-buy--ghost { background: #fff; color: rgb(var(--color-primary-600)); border-color: rgb(var(--color-primary-300)); margin-top: .625rem; }
.btn-buy--ghost:hover { background: rgb(var(--color-primary-50)); border-color: rgb(var(--color-primary-500)); }
.buybox__perks { list-style: none; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #eef2f6; display: flex; flex-direction: column; gap: .625rem; }
.buybox__perks li { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: #475569; }
.buybox__perks svg { width: 16px; height: 16px; flex-shrink: 0; color: rgb(var(--color-primary-500)); }
.buybox__perks li.is-lock svg { color: #64748b; }
.paybar { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #eef2f6; }
.paybar__lock { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: #64748b; margin-right: auto; }
.paybar__lock svg { width: 14px; height: 14px; }
.pay { height: 22px; width: 34px; border: 1px solid #e2e8f0; border-radius: .25rem; display: inline-flex; align-items: center; justify-content: center; font-size: .5rem; font-weight: 800; letter-spacing: .02em; background: #fff; color: #1a1f71; }
.pay--mc { color: #eb001b; } .pay--ax { color: #2e77bc; } .pay--pp { color: #003087; }

/* ════════════ TRUST STRIP (client logos) ════════════ */
.logos-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.75rem 1.25rem; align-items:center; width:100%; margin:0; }
@media (min-width:640px)  { .logos-strip { grid-template-columns:repeat(6,minmax(0,1fr)); gap:2rem 1.75rem; } }
@media (min-width:1024px) { .logos-strip { grid-template-columns:repeat(12,minmax(0,1fr)); gap:2.25rem 1.75rem; } }
.logos-strip img { height:2rem; width:100%; min-width:0; object-fit:contain; object-position:center; filter:grayscale(1); opacity:.55; transition:opacity .2s; margin:0; display:block; }
.logos-strip img:hover { opacity:.9; }
/* Mobile: cap at 12 logos (4 per row × 3 rows) */
@media (max-width:639px) { .logos-strip .logo-extra { display:none; } }

/* ════════════ DEMO SCHEDULER ════════════ */
.step-dots { display:flex; gap:.5rem; align-items:center; }
.step-dot { width:.625rem; height:.625rem; border-radius:50%; background:#e5e7eb; transition:background .2s; }
.step-dot.active { background:rgb(var(--color-primary-500)); }
.sched-card { background:#fff; border-radius:1.5rem; padding:2rem; box-shadow:0 8px 48px rgba(0,0,0,.2); }
.sched-step { display:none; }
.sched-step.active { display:block; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.cal-month-label { font-size:.9375rem; font-weight:700; color:#111; }
.cal-nav { width:2rem; height:2rem; border-radius:.5rem; border:1px solid #e5e7eb; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#555; transition:background .15s; flex-shrink:0; }
.cal-nav:hover { background:#f3f4f6; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.2rem; }
.cal-dow { text-align:center; font-size:.625rem; font-weight:700; color:#9ca3af; text-transform:uppercase; padding:.25rem 0; letter-spacing:.04em; }
.cal-day { text-align:center; padding:.5rem .125rem; border-radius:.4375rem; font-size:.8125rem; cursor:pointer; transition:background .12s,color .12s; color:#111; background:transparent; border:none; font-family:inherit; width:100%; }
.cal-day:hover:not(:disabled) { background:rgb(var(--color-primary-50)); color:rgb(var(--color-primary-600)); }
.cal-day.selected { background:rgb(var(--color-primary-500)); color:#fff; font-weight:700; }
.cal-day.today:not(.selected):not(:disabled) { font-weight:700; box-shadow:inset 0 0 0 1.5px rgb(var(--color-primary-400)); color:rgb(var(--color-primary-600)); }
.cal-day:disabled { color:#d1d5db; cursor:not-allowed; background:transparent; }
.cal-day.cal-empty { cursor:default; pointer-events:none; }
.time-slots-wrap { margin-top:1.125rem; border-top:1px solid #f3f4f6; padding-top:1.125rem; }
.time-slots-label { font-size:.8125rem; font-weight:600; color:#374151; margin-bottom:.5rem; display:flex; align-items:baseline; gap:.375rem; flex-wrap:wrap; }
.time-slots-label span { font-weight:400; color:#9ca3af; font-size:.75rem; }
.time-slots-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; }
.time-slot { padding:.5rem .125rem; border-radius:.4375rem; border:1px solid #e5e7eb; background:#fff; font-size:.75rem; text-align:center; cursor:pointer; transition:all .12s; color:#374151; font-family:inherit; line-height:1.3; }
.time-slot:hover { border-color:rgb(var(--color-primary-400)); color:rgb(var(--color-primary-600)); background:rgb(var(--color-primary-50)); }
.time-slot.selected { background:rgb(var(--color-primary-500)); border-color:rgb(var(--color-primary-500)); color:#fff; font-weight:600; }
.sched-summary { display:flex; align-items:flex-start; gap:.625rem; background:rgb(var(--color-primary-50)); border:1px solid rgb(var(--color-primary-100)); border-radius:.75rem; padding:.75rem 1rem; margin-bottom:1.25rem; font-size:.875rem; color:rgb(var(--color-primary-700)); line-height:1.5; }
.sched-field { display:flex; flex-direction:column; gap:.3rem; }
.sched-field label { font-size:.8125rem; font-weight:600; color:#374151; }
.sched-field input,.sched-field select,.sched-field textarea { width:100%; padding:.5625rem .8125rem; border-radius:.5625rem; border:1px solid #d1d5db; font-size:.9375rem; font-family:inherit; background:#fff; color:#111; transition:border-color .15s; outline:none; box-sizing:border-box; }
.sched-field input:focus,.sched-field select:focus,.sched-field textarea:focus { border-color:rgb(var(--color-primary-500)); box-shadow:0 0 0 3px rgba(14,165,233,.12); }
.sched-field input::placeholder,.sched-field textarea::placeholder { color:#9ca3af; }
.sched-err { font-size:.8125rem; color:#ef4444; margin-top:.2rem; display:none; }
.sched-err.show { display:block; }
#sched-btn-next:disabled { opacity:.45; cursor:not-allowed; }

/* ════════════ FEATURE ROW ════════════ */
.sec { padding: 3.5rem 0; }
.sec--alt { background: #f8fafc; border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; }
.sec__head { text-align: center; max-width: 640px; margin: 0 auto 2.25rem; }
.sec__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.01em; color: #0f172a; }
.sec__sub { font-size: .9375rem; color: #64748b; margin-top: .6rem; line-height: 1.55; }
html.dark .sec__sub { color: #94a3b8; }
.feat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
@media (min-width: 700px) { .feat-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .feat-grid { grid-template-columns: repeat(6,1fr); } }
.feat { background: #fff; border: 1px solid #e8edf2; border-radius: .75rem; padding: 1.25rem 1rem; text-align: center; transition: transform .15s, box-shadow .15s, border-color .15s; }
.feat:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,23,42,.07); border-color: rgb(var(--color-primary-200)); }
.feat__icon { width: 44px; height: 44px; border-radius: .625rem; background: rgb(var(--color-primary-50)); color: rgb(var(--color-primary-600)); display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; }
.feat__icon svg { width: 22px; height: 22px; }
.feat__t { font-size: .875rem; font-weight: 700; color: #0f172a; margin-bottom: .3rem; }
.feat__d { font-size: .75rem; color: #64748b; line-height: 1.45; }

/* ════════════ DELIVERABLES ════════════ */
.deliv-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
@media (min-width: 700px) { .deliv-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 1024px) { .deliv-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } }
.deliv { text-align: center; }
.deliv__thumb { aspect-ratio: 1/1; border-radius: .75rem; overflow: hidden; border: 1px solid #e8edf2; background: #f3f4f6; position: relative; }
.deliv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deliv__badge { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; background: linear-gradient(135deg, rgba(8,47,73,.82), rgba(2,132,199,.82)); color: #fff; }
.deliv__badge svg { width: 30px; height: 30px; }
.deliv__badge span { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; }
.deliv__t { font-size: .8125rem; font-weight: 700; color: #0f172a; margin-top: .625rem; }
.deliv__s { font-size: .75rem; color: #94a3b8; }

/* ════════════ HOW IT WORKS ════════════ */
.steps { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 980px; margin: 0 auto; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3,1fr); gap: 2rem; } }
.step { display: flex; gap: 1rem; }
.step__num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: rgb(var(--color-primary-500)); color: #fff; font-weight: 700; font-size: .875rem; display: flex; align-items: center; justify-content: center; }
.step__icon { color: rgb(var(--color-primary-600)); margin-bottom: .5rem; }
.step__icon svg { width: 26px; height: 26px; }
.step__t { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: .375rem; }
.step__d { font-size: .875rem; color: #64748b; line-height: 1.6; }

/* ════════════ BOTTOM CTA ════════════ */
.cta-band { background: rgb(var(--color-primary-950)); color: #fff; }
.cta-band__inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; padding: 2.5rem 0; }
@media (min-width: 860px) { .cta-band__inner { flex-direction: row; text-align: left; justify-content: space-between; padding: 2rem 0; } }
.cta-band__media { width: 100%; max-width: 280px; aspect-ratio: 16/10; border-radius: .75rem; overflow: hidden; flex-shrink: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-band__title { font-family: var(--font-display); font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 700; }
.cta-band__sub { font-size: .9375rem; color: rgba(255,255,255,.7); margin-top: .5rem; }
.cta-band__actions { display: flex; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; justify-content: center; }
.cta-band__actions .btn-buy { width: auto; padding: .8125rem 1.5rem; }
.cta-band .btn-buy--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cta-band .btn-buy--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ════════════ FAQ ════════════ */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 0 3.5rem; max-width: 1080px; margin: 0 auto; }
@media (min-width: 860px) { .faq-grid { grid-template-columns: 1fr 1fr; } }
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-q { display: flex; gap: .75rem; align-items: center; padding: 1.25rem 0; cursor: pointer; width: 100%; text-align: left; background: none; border: none; font-family: inherit; font-size: .9375rem; font-weight: 700; color: #0f172a; }
.faq-q svg { width: 20px; height: 20px; flex-shrink: 0; margin-left: auto; transition: transform .2s; color: rgb(var(--color-primary-500)); }
.faq-item.open .faq-q svg { transform: rotate(90deg); }
.faq-a { display: none; padding-bottom: 1.25rem; padding-right: 1.5rem; font-size: .875rem; color: #64748b; line-height: 1.7; }
.faq-item.open .faq-a { display: block; }

/* ════════════ GALLERY MODAL ════════════ */
.amz-modal { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; padding: 1rem; }
.amz-modal.is-open { display: flex; }
.amz-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.amz-modal__dialog { position: relative; background: #fff; border-radius: .625rem; width: min(96vw, 1100px); height: min(92vh, 760px); padding: 1.25rem; padding-top: 3rem; box-shadow: 0 25px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.amz-modal__close { position: absolute; top: .5rem; right: .5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: transparent; border: none; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 2; }
.amz-modal__close:hover { background: rgba(0,0,0,.06); }
.amz-modal__layout { display: flex; gap: 1rem; flex: 1; min-height: 0; }
.amz-modal__strip { display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; overflow-x: hidden; flex-shrink: 0; width: 74px; scrollbar-width: thin; padding-right: .25rem; }
.amz-modal__strip button { width: 100%; aspect-ratio: 1/1; border-radius: .375rem; overflow: hidden; border: 2px solid #e5e7eb; background: #fff; padding: 0; cursor: pointer; opacity: .78; transition: opacity .15s, border-color .15s; flex-shrink: 0; }
.amz-modal__strip button:hover { opacity: 1; border-color: rgb(var(--color-primary-300)); }
.amz-modal__strip button.is-active { opacity: 1; border-color: rgb(var(--color-primary-500)); box-shadow: 0 0 0 2px rgba(14,165,233,.18); }
.amz-modal__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amz-modal__stage { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.amz-modal__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@media (max-width: 640px) {
  .amz-modal__dialog { padding: .875rem; padding-top: 2.75rem; width: 100%; height: 95vh; max-height: none; }
  .amz-modal__layout { flex-direction: column-reverse; }
  .amz-modal__strip { flex-direction: row; width: auto; max-height: 74px; overflow-x: auto; overflow-y: hidden; padding-right: 0; padding-bottom: .25rem; }
  .amz-modal__strip button { width: 64px; }
}

/* ════════════ 3D / AR MODAL ════════════ */
.ar-modal { position: fixed; inset: 0; z-index: 10002; display: none; align-items: center; justify-content: center; padding: 1rem; }
.ar-modal.is-open { display: flex; }
.ar-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); }
.ar-modal__dialog { position: relative; background: #0a0a0a; border-radius: 1rem; width: min(96vw, 900px); height: min(92vh, 700px); overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.ar-modal__close { position: absolute; top: .625rem; right: .625rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,.15); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; transition: background .15s; backdrop-filter: blur(8px); }
.ar-modal__close:hover { background: rgba(255,255,255,.3); }
.ar-modal__iframe { flex: 1; width: 100%; height: 100%; border: none; display: block; background: #0a0a0a; }
@media (max-width: 640px) { .ar-modal { padding: .5rem; } .ar-modal__dialog { width: 100%; height: 100%; max-height: none; border-radius: .5rem; } }

/* ════════════════════ DARK THEME ════════════════════ */
html.dark body.home { background: #0b1220; color: #e2e8f0; }

/* Header: dark surface, light nav text, whitened logo */
html.dark .header-base, html.dark .header-scrolled, html.dark .header-scrolled-pre, html.dark .header-scrolled-up { background: #0b1220 !important; border-bottom-color: #1e293b; }
html.dark header #logo-image { filter: brightness(0) invert(1); }
html.dark header nav a:not(.bg-primary-500):not(.bg-primary-600), html.dark header nav button:not(#theme-toggle) { color: rgba(255,255,255,.82) !important; }
html.dark header nav a:not(.bg-primary-500):not(.bg-primary-600):hover, html.dark header nav button:not(#theme-toggle):hover { color: #fff !important; background-color: rgba(255,255,255,.08) !important; }

/* PDP — left text column */
html.dark .info__title { color: #f1f5f9; }
html.dark .info__rating { color: #94a3b8; }
html.dark .info__rating strong { color: #f1f5f9; }
html.dark .info__desc { color: #94a3b8; border-bottom-color: #1e293b; }
html.dark .incl__head { color: #cbd5e1; }
html.dark .incl__item { color: #cbd5e1; }
html.dark .delivery { border-top-color: #1e293b; }
html.dark .delivery__row { color: #f1f5f9; }
html.dark .delivery__note { color: #94a3b8; }
html.dark .gallery__zoomhint { color: #64748b; }

/* PDP — gallery */
html.dark .amz-hero { background: #1e293b; }
html.dark .amz-thumb { border-color: #334155; }
html.dark .amz-swatches { background: rgba(15,23,42,.55); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
html.dark .swatch { border-color: #e2e8f0; }
html.dark .swatch.is-active { box-shadow: 0 0 0 2px #0b1220, 0 0 0 4px rgb(var(--color-primary-400)); }

/* Buy box */
html.dark .buybox { background: #111827; border-color: #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
html.dark .buybox__label, html.dark .buybox__pricenote { color: #94a3b8; }
html.dark .buybox__incl { border-top-color: #1e293b; }
html.dark .buybox__incl li { color: #cbd5e1; }
html.dark .buybox__pack-a { color: #f1f5f9; }
html.dark .buybox__pack-b { color: rgb(var(--color-primary-300)); }
html.dark .buybox__price { color: #f8fafc; }
html.dark .buybox__priceunit { color: #94a3b8; }
html.dark .btn-buy--ghost { background: transparent; color: rgb(var(--color-primary-300)); border-color: rgba(125,211,252,.4); }
html.dark .btn-buy--ghost:hover { background: rgba(125,211,252,.08); border-color: rgb(var(--color-primary-400)); }

/* Trust strip (inline bg needs override) */
html.dark section[style*="eef1f5"] { background: #0f172a !important; border-color: #1e293b; }
html.dark .logos-strip img { filter: grayscale(1) brightness(0) invert(1); opacity: .65; }
html.dark .logos-strip img:hover { opacity: 1; }

/* Generic light sections */
html.dark .sec { background: #0b1220; }
html.dark .sec--alt { background: #0f172a; border-top-color: #1e293b; border-bottom-color: #1e293b; }
html.dark .sec__title { color: #f1f5f9; }

/* Feature cards */
html.dark .feat { background: #111827; border-color: #1e293b; }
html.dark .feat:hover { box-shadow: 0 10px 28px rgba(0,0,0,.4); border-color: rgba(56,189,248,.35); }
html.dark .feat__icon { background: rgba(56,189,248,.12); color: rgb(var(--color-primary-300)); }
html.dark .feat__t { color: #f1f5f9; }
html.dark .feat__d { color: #94a3b8; }

/* Deliverables */
html.dark .deliv__thumb { background: #1e293b; border-color: #1e293b; }
html.dark .deliv__t { color: #f1f5f9; }
html.dark .deliv__s { color: #64748b; }

/* How it works */
html.dark .step__t { color: #f1f5f9; }
html.dark .step__d { color: #94a3b8; }

/* FAQ */
html.dark .faq-item { border-bottom-color: #1e293b; }
html.dark .faq-q { color: #f1f5f9; }
html.dark .faq-a { color: #94a3b8; }

/* Modals */
html.dark .amz-modal__dialog { background: #111827; }
html.dark .amz-modal__close { color: #cbd5e1; }
html.dark .amz-modal__close:hover { background: rgba(255,255,255,.08); }

/* ════════════ INLINE BUYBOX LEAD FORM ════════════ */
.buybox__lead { margin-top: .1rem; }
.buybox__lead-input { width: 100%; padding: .72rem 1rem; border: 1.5px solid #d1d5db; border-radius: 9999px; font-size: .9375rem; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; color: #111827; }
.buybox__lead-input:focus { border-color: rgb(var(--color-primary-500)); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.buybox__lead-input::placeholder { color: #9ca3af; }
.buybox__lead .btn-buy { margin-top: .55rem; }
.buybox__lead-error { display: none; margin-top: .5rem; font-size: .8125rem; color: #dc2626; }
.buybox__lead-error.show { display: block; }
.buybox__lead-success { display: none; margin-top: .25rem; padding: .85rem 1rem; background: #dcfce7; color: #166534; border-radius: .7rem; font-size: .875rem; line-height: 1.45; text-align: center; }
.buybox__lead-success.show { display: block; }
.buybox__lead-success-text { margin: 0 0 .7rem; font-weight: 600; }
.buybox__lead-success .btn-buy { margin-top: 0; }
html.dark .buybox__lead-input { background: #0b1220; border-color: #334155; color: #e2e8f0; }
html.dark .buybox__lead-success { background: rgba(22,101,52,.2); color: #86efac; }

/* ════════════ SERVICES SLIDER (full range) ════════════ */
.svc-sec { padding: 3.5rem 0 4rem; overflow: hidden; }
.svc-lead { max-width: 46rem; font-size: .95rem; color: #475569; line-height: 1.65; margin-top: .85rem; }
html.dark .svc-lead { color: #94a3b8; }
.embla { overflow: hidden; margin-top: 2rem; cursor: grab; }
.embla:active { cursor: grabbing; }
.embla__container { display: flex; }
.embla__slide { flex: 0 0 auto; padding: 0 .5rem; }
.svc-card { display: flex; flex-direction: column; width: 18rem; height: 26rem; border-radius: .85rem; overflow: hidden; background: #eef1f5; box-shadow: 0 4px 18px rgba(15,23,42,.06); }
@media (min-width: 768px) { .svc-card { width: 20rem; height: 30rem; } }
.svc-card__media { flex: 1 1 auto; min-height: 0; position: relative; }
.svc-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.svc-card__panel { flex: 0 0 auto; padding: 1rem 1.15rem 1.2rem; }
.svc-card__t { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; color: #0f172a; }
.svc-card__d { font-size: .8125rem; line-height: 1.5; color: #475569; margin-top: .5rem; }
.svc-card__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; font-size: .8125rem; font-weight: 600; color: rgb(var(--color-primary-600)); text-decoration: none; }
.svc-card__more svg { width: 15px; height: 15px; }
.svc-card__more:hover { text-decoration: underline; }
html.dark .svc-card { background: #111827; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
html.dark .svc-card__t { color: #f1f5f9; }
html.dark .svc-card__d { color: #94a3b8; }
html.dark .svc-card__more { color: rgb(var(--color-primary-300)); }
/* When hover-expand is NOT active (touch / narrow), the description stays visible — so lock
   the image/text proportions and clamp the copy, keeping every card's text block the same height. */
@media (hover: none), (max-width: 1023px) {
  .svc-card__media { flex: 0 0 56%; }
  .svc-card__panel { flex: 1 1 auto; }
  .svc-card__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6rem; }
  .svc-card__d { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Desktop hover-expand: description collapsed until hover; touch devices always show it */
@media (hover: hover) and (min-width: 1024px) {
  .svc-card { transition: transform .25s ease, box-shadow .25s ease; }
  .svc-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(15,23,42,.16); }
  .svc-card__d, .svc-card__more { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease; }
  .svc-card:hover .svc-card__d { max-height: 9rem; opacity: 1; margin-top: .5rem; }
  .svc-card:hover .svc-card__more { max-height: 2rem; opacity: 1; margin-top: .7rem; }
}

/* ════════════ TESTIMONIALS ════════════ */
.tst-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.tst-nav { display: flex; gap: .5rem; flex-shrink: 0; }
.tst-nav button { width: 2.75rem; height: 2.75rem; border-radius: 9999px; border: none; background: #0f172a; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, opacity .15s; }
.tst-nav button:hover { background: #1e293b; }
.tst-nav button:disabled { opacity: .4; cursor: default; }
.tst-nav svg { width: 20px; height: 20px; }
html.dark .tst-nav button { background: #e2e8f0; color: #0b1220; }
.testimonials-scroll.tst-row { display: flex; gap: 1.25rem; overflow-x: auto; padding: .5rem .25rem 1.25rem; scroll-behavior: smooth; scrollbar-width: none; }
.testimonials-scroll.tst-row::-webkit-scrollbar { display: none; }
.tst-card { flex: 0 0 auto; width: 20rem; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 1.35rem; padding: 1.5rem; display: flex; flex-direction: column; }
@media (min-width: 640px) { .tst-card { width: 27rem; padding: 1.75rem 2rem; } }
.tst-cardhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.tst-idbox { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.tst-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: #fff; flex-shrink: 0; }
.tst-stars { display: inline-flex; gap: 1px; }
.tst-stars svg { width: 15px; height: 15px; }
.tst-logo { height: 1.5rem; max-width: 6.5rem; object-fit: contain; opacity: .7; flex-shrink: 0; }
html.dark .tst-logo { filter: brightness(0) invert(1); opacity: .8; }
.tst-quote { font-size: .95rem; line-height: 1.6; color: #334155; flex: 1; }
.tst-quote::before { content: "\201C"; display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.75rem; line-height: .55; color: rgb(var(--color-primary-500)); margin-bottom: .35rem; }
.tst-meta { margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.tst-name { font-weight: 700; font-size: .9rem; color: #0f172a; }
.tst-role { font-size: .8rem; color: #64748b; line-height: 1.4; }
html.dark .tst-card { background: #111827; border-color: #1e293b; }
html.dark .tst-quote { color: #cbd5e1; }
html.dark .tst-name { color: #f1f5f9; }
html.dark .tst-meta { border-top-color: #1e293b; }