*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

/* One gradient for the whole page, light blue at the very top to deep blue at the very bottom, so the
   color changes with every pixel you scroll. app.js (paintTones) pins the stops to real positions:
     0 .............. --tone-top      (hero)
     end of "how" ... --tone-light    (last point where dark text sits on the background)
     mission text ... --tone-dark     (first point where light text sits on the background)
     page bottom .... --tone-bottom   (footer)
   The dark-text-to-light-text crossing falls in the empty space between "how" and the mission.
   Contrast: ink on --tone-light 6.1:1; on-dark-muted on --tone-dark 5.6:1. The fallback below uses
   rough percentages until the script measures the page. */
:root { --tone-top: #d4e3f8; --tone-light: #7f9dcf; --tone-dark: #2f5288; --tone-bottom: #081630; }
body {
  background-color: var(--tone-top);
  background-image: linear-gradient(to bottom, var(--tone-top) 0%, var(--tone-light) 30%, var(--tone-dark) 37%, var(--tone-bottom) 100%);
}
.tone-shift { height: clamp(120px, 22vh, 240px); }

/* Dark blocks: light text; cards inside keep their own dark-on-white text. */
.tone-dark { color: var(--on-dark); }
.tone-dark :focus-visible { outline-color: var(--fig-yellow); }
.tone-dark .card, .tone-dark .contact-card { color: var(--ink); }
.tone-dark .card :focus-visible, .tone-dark .contact-card :focus-visible { outline-color: var(--brand); }
.tone-dark .section-sub, .tone-dark .contact-intro > p, .tone-dark .empty { color: #d3dae6; }
.tone-dark .section-sub strong { color: var(--on-dark); }
.tone-dark .empty a { color: #cfe0ff; }
.tone-dark .search input { color: var(--ink); border-color: transparent; }
.tone-dark .chip { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 28%); color: var(--on-dark); }
.tone-dark .chip:hover { border-color: rgb(255 255 255 / 70%); }
.tone-dark .chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.tone-dark .contact-points li:nth-child(1) .ico { color: #ff8a90; }
.tone-dark .contact-points li:nth-child(2) .ico { color: #6fdc8c; }
.tone-dark .contact-points li:nth-child(3) .ico { color: var(--fig-yellow); }
.tone-dark .contact-points li:nth-child(4) .ico { color: #9dbcff; }

img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-s); }
.skip:focus { top: 12px; }

/* Scroll progress in the five logo colors */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--fig-red) 0 20%, var(--fig-green) 20% 40%, var(--fig-yellow) 40% 60%, var(--fig-blue) 60% 80%, var(--fig-black) 80%);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-m); border: 2px solid transparent;
  font-weight: 600; text-decoration: none; cursor: pointer; letter-spacing: 0.005em;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-ghost { border-color: var(--line); background: var(--card); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card); cursor: pointer; box-shadow: var(--shadow-1); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* --hdr-rgb is the page color right behind the header, set on scroll by app.js */
  background: rgb(var(--hdr-rgb, 211 226 247) / 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur), color var(--dur);
}
.site-header.is-scrolled { border-bottom-color: rgb(11 29 58 / 10%); }
.site-header.is-dark { color: var(--on-dark); }
.site-header.is-dark.is-scrolled { border-bottom-color: rgb(255 255 255 / 10%); }
.site-header.is-dark :focus-visible { outline-color: var(--fig-yellow); }
.header-row { display: flex; align-items: center; gap: var(--space-4); min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo img { width: 40px; height: 40px; }
.logo-word { font-weight: 800; font-stretch: 88%; letter-spacing: -0.01em; font-size: 19px; margin: 0; }
.nav { display: flex; gap: var(--space-4); margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; padding: 10px 2px; position: relative; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav-count { font-size: 12px; font-weight: 700; background: var(--brand-tint); color: var(--brand-strong); border-radius: 999px; padding: 1px 7px; margin-left: 2px; }
.nav-count:empty { display: none; }
.lang-switch { position: relative; display: inline-flex; align-items: center; }
.lang-switch .ico { position: absolute; left: 10px; width: 16px; height: 16px; pointer-events: none; }
.lang-switch select {
  appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 12px 0 32px; border-radius: var(--radius-m);
  border: 1.5px solid var(--line); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer;
}
.lang-switch select { border-color: rgb(11 29 58 / 22%); }
.site-header.is-dark .lang-switch select { border-color: rgb(255 255 255 / 28%); }
.lang-switch select option { color: var(--ink); }
@media (max-width: 960px) {
  .install-btn span { display: none; }
  .install-btn { padding: 0 10px; }
}
@media (max-width: 720px) {
  .header-row { gap: 12px; }
  .nav { gap: 14px; font-size: 15px; }
  .nav-count { display: none; }
  .lang-switch select { padding: 0 8px 0 28px; }
  .lang-switch .ico { left: 8px; }
  .nav a:first-child { display: none; }
  .logo-word { display: none; }
  .install-btn span { display: none; }
}
@media (max-width: 480px) {
  .nav { display: none; }
  .lang-switch { margin-left: auto; }
}

/* Type */
.eyebrow { margin: 0 0 var(--space-3); font-size: 15px; font-weight: 600; color: var(--brand); }
.eyebrow-dark { color: #ffe08a; }
.section-title { margin: 0; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 800; font-stretch: 90%; }

/* Reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(20px); }
/* Safety net: if scripts never run, show the content anyway. */
.js .reveal:not(.is-in) { animation: reveal-fallback 0.4s 2.5s forwards; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
.reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Hero: headline wraps around the globe */
.hero { padding-block: var(--space-5) var(--space-6); overflow: hidden; }
.hero-inner { display: grid; justify-items: center; text-align: center; }
.hero-title {
  margin: 0; display: grid; justify-items: center;
  font-size: clamp(38px, 7vw, 88px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; font-stretch: 85%;
}
.hero-line { display: block; text-wrap: balance; }
.hero-globe {
  position: relative; display: block;
  width: min(92vw, clamp(300px, 46vw, 540px)); aspect-ratio: 454 / 306;
  margin-block: clamp(12px, 2.5vw, 28px) clamp(16px, 3vw, 36px);
  transform: translateY(calc(var(--parallax, 0) * 1px)) scale(calc(1 - var(--shrink, 0)));
  will-change: transform;
}
/* Soft contact shadow so the globe sits on the page instead of floating on a cutout */
.hero-globe::after {
  content: ""; position: absolute; left: 24%; right: 24%; bottom: -6%; height: 9%; z-index: -1;
  background: radial-gradient(closest-side, rgb(11 29 58 / 22%), transparent);
  filter: blur(4px);
}
.hero-globe img, .hero-globe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-globe video, .hero-globe .hero-globe-anim { opacity: 0; transition: opacity 400ms ease; }
.hero-globe.is-playing video, .hero-globe.is-playing .hero-globe-anim { opacity: 1; }
.hero-globe.is-playing .hero-globe-still { opacity: 0; transition: opacity 400ms ease 200ms; }
.hero-lead { max-width: 52ch; font-size: clamp(17px, 1.8vw, 20px); color: var(--ink-soft); margin: var(--space-4) 0 var(--space-4); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* How it works */
.how { padding-block: var(--space-7) var(--space-6); }
.how-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-6); }
.how-sticky { position: sticky; top: 100px; align-self: start; }
.how-counter { margin: var(--space-3) 0 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.how-counter span { color: var(--ink); font-size: 30px; }
/* Cards close together; the extra space below lets the last one reach the middle of the screen. */
.how-steps { list-style: none; margin: 0; display: grid; gap: clamp(16px, 2.5vh, 28px); padding: 6vh 0 22vh; }
.how-step {
  position: relative; background: var(--card); border-radius: var(--radius-l); padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 8px);
  box-shadow: var(--shadow-1); overflow: hidden;
  opacity: 0.5; transform: scale(0.97); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow);
}
.how-step::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--fig); z-index: 1; }
.how-step.is-active { opacity: 1; transform: none; box-shadow: var(--shadow-2); }
.how-step > :not(.how-step-art) { position: relative; }
.how-num { font-size: 15px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.how-step h3 { font-size: 30px; font-stretch: 90%; letter-spacing: -0.02em; margin: 4px 0 var(--space-2); }
.how-step p { margin: 0; color: var(--ink-soft); font-size: 18px; }

/* Illustration stage under the sticky title: layers cross-fade (opacity/transform set by app.js). */
.how-art { position: relative; width: min(100%, 420px, 50vh); aspect-ratio: 1; margin-top: var(--space-3); }
.how-art .art { position: absolute; inset: 0; opacity: 0; }
.how-art .art:first-child { opacity: 1; }
.how-step-art { display: none; }
@media (max-width: 860px) {
  .how-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .how-sticky { position: static; }
  .how-counter, .how-art { display: none; }
  .how-steps { gap: var(--space-3); padding: 0; }
  .how-step { opacity: 1; transform: none; }
  /* Phones: each card carries its own illustration, faint, in the top corner beside the title (clear of the paragraph). */
  .how-step-art { display: block; position: absolute; top: -18px; right: -12px; width: 150px; height: 150px; opacity: calc(0.06 + 0.2 * var(--art, 0)); pointer-events: none; }
  .how-step-art .art { width: 100%; height: 100%; }
}

/* Line art */
.art { display: block; width: 100%; height: 100%; overflow: visible; will-change: opacity, transform; }
.art .ln { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art .thin { stroke-width: 2; opacity: 0.45; }
.art .globe-fill { fill: #fff; opacity: 0.55; }
.art .mer { transform-box: fill-box; transform-origin: center; animation: art-meridian 6s linear infinite; animation-delay: var(--d); }
@keyframes art-meridian { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.04); } 100% { transform: scaleX(1); } }
.art .pin { transform-box: fill-box; transform-origin: 50% 100%; animation: art-pin 4.5s var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes art-pin { 0% { transform: scale(0); opacity: 0; } 12% { transform: scale(1.15); opacity: 1; } 20%, 78% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.6); opacity: 0; } }
.art .orbit { transform-origin: 200px 200px; animation: art-orbit 14s linear infinite; }
@keyframes art-orbit { to { transform: rotate(360deg); } }
.art .lens { fill: rgb(255 255 255 / 55%); stroke: var(--brand); stroke-width: 4; }
.art .spot { transform-origin: 200px 18px; animation: art-sway 6s ease-in-out infinite alternate; }
@keyframes art-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.art .tile { animation: art-tile 7s var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes art-tile { 0% { transform: translateY(16px); opacity: 0; } 9%, 82% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.art .tile-bg { fill: #fff; stroke: var(--brand); stroke-width: 2.5; }
.art .signal { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 100; stroke-dashoffset: 10; animation: art-signal 3s ease-in infinite; animation-delay: var(--d); }
@keyframes art-signal { 0% { stroke-dashoffset: 10; } 70%, 100% { stroke-dashoffset: -100; } }
.art .person { transform-box: fill-box; transform-origin: center; animation: art-nod 3s ease-in-out infinite; animation-delay: var(--d); }
@keyframes art-nod { 0%, 100% { transform: none; } 15% { transform: translateY(-4px); } }
.art .beat { transform-box: fill-box; transform-origin: center; animation: art-beat 1.5s ease-in-out infinite; }
@keyframes art-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(1); } 36% { transform: scale(1.14); } }
/* Illustrations out of view don't animate. */
.art.is-idle, .art.is-idle * { animation-play-state: paused; }
}

/* Mission / vision statements */
.statement { padding-block: clamp(96px, 18vh, 200px); }
.statement-text { margin: 0; max-width: 24ch; font-size: clamp(30px, 4.8vw, 62px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; font-stretch: 90%; }
.statement-text .w { color: rgb(244 247 252 / 22%); transition: color 240ms linear; }
.statement-text .w.on { color: var(--on-dark); }
.statement + .statement { padding-top: 0; }

/* Products */
.products { padding-block: var(--space-7); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-sub { max-width: 40ch; margin: 0; color: var(--ink-soft); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; min-height: 48px; padding: 0 16px 0 44px; border-radius: var(--radius-m); border: 1.5px solid var(--line); background: var(--card); }
.search input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px rgb(7 66 183 / 12%); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: var(--radius-m); border: 1.5px solid var(--line); background: var(--card); font-weight: 500; font-size: 15px; cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.demo-note { font-size: 14px; background: #fff6d6; color: #5c4200; border-radius: var(--radius-s); padding: 10px 14px; }

.product-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius-l);
  overflow: hidden; border: 1px solid var(--line); transition: border-color var(--dur), box-shadow var(--dur);
}
.card:hover { border-color: #c3cde0; box-shadow: var(--shadow-2); }
.card.pop { animation: pop var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes pop { from { opacity: 0; transform: translateY(14px); } }
.card-media { aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .card-media img { transform: scale(1.03); }
/* No photo yet: quiet panel with a faded logo */
.placeholder-media { width: 100%; height: 100%; display: grid; place-items: center; background: var(--paper-2); }
.placeholder-media img { width: 80px; height: 80px; opacity: 0.35; filter: grayscale(0.6); }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); flex: 1; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-s); background: var(--paper-2); color: var(--ink-soft); }
.tag .ico { width: 14px; height: 14px; }
.card h3 { margin: 4px 0 0; font-size: 22px; font-stretch: 92%; letter-spacing: -0.015em; line-height: 1.2; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card opens detail */
.card p { margin: 0; color: var(--ink-soft); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: var(--space-3); position: relative; z-index: 1; }
.card-actions .btn { flex: 1 1 auto; min-height: 44px; font-size: 16px; padding: 0 14px; white-space: nowrap; }
.card-media { position: relative; }
.card-play {
  position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgb(11 29 58 / 72%); color: #fff; backdrop-filter: blur(4px);
}
.card-play .ico, .card-actions .btn .ico { width: 18px; height: 18px; }
.new-badge { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-s); background: var(--fig-yellow); color: var(--ink); }
.skeleton { min-height: 380px; background: linear-gradient(100deg, var(--card) 40%, var(--paper-2) 50%, var(--card) 60%) var(--card); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { text-align: center; padding: var(--space-6) var(--space-3); color: var(--ink-soft); }

/* Contact */
.contact { padding-block: var(--space-7); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: start; }
.contact-intro > p { font-size: 19px; color: var(--ink-soft); }
.contact-points { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.contact-points li { display: flex; gap: 14px; }

.contact-points .ico { margin-top: 3px; }
.contact-card { background: var(--card); border-radius: var(--radius-l); padding: var(--space-4); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

.reason-label { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-bottom: var(--space-4); }
.reasons button {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--radius-m); background: var(--card); color: var(--ink-soft);
  font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
.reasons button .ico { color: var(--brand); }
.reasons button:hover { border-color: var(--ink-soft); color: var(--ink); }
.reasons button[aria-selected="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brand); }
@media (max-width: 400px) { .reasons { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .reasons button { font-size: 14px; padding: 8px 10px; gap: 8px; } }
.form-intro { margin: 0; padding: 12px 14px; border-radius: var(--radius-s); background: var(--brand-tint); color: var(--ink); font-size: 15px; }
.group-title { margin: 6px 0 -4px; font-size: 14px; font-weight: 700; color: var(--muted); }
.check-field { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-start; min-height: 44px; font-size: 15px; cursor: pointer; }
.check-field input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.check-field.has-error { color: var(--danger); }

/* Forms */
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-weight: 600; font-size: 15px; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-s);
  border: 1.5px solid var(--line); background: var(--paper); font-size: 16px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(7 66 183 / 12%); background: var(--card); }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 14px; font-weight: 500; margin: 0; }
.hint { margin: -4px 0 0; font-size: 14px; color: var(--muted); }
.form-error { margin: 0; padding: 10px 14px; border-radius: var(--radius-s); background: #fde7e8; color: #7a0710; font-size: 15px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { text-align: center; padding: var(--space-5) var(--space-3); }
.form-success:focus { outline: none; }
.form-success h3 { font-size: 26px; margin: var(--space-3) 0 var(--space-2); }
.form-success p { color: var(--ink-soft); }
.success-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #dff3e4; color: var(--ok); animation: pop var(--dur-slow) var(--ease-out); }
.success-icon .ico { width: 32px; height: 32px; }

/* Product modal */
.modal { width: min(760px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--radius-l); background: var(--card); color: var(--ink); box-shadow: 0 30px 80px rgb(0 0 0 / 30%); overflow: auto; overscroll-behavior: contain; }
.modal::backdrop { background: rgb(11 29 58 / 55%); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in var(--dur) var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px); } }
.modal-close-form { position: sticky; top: 0; height: 0; z-index: 2; }
.modal-close { position: absolute; right: 14px; top: 14px; }
.modal-media { aspect-ratio: 16 / 9; background: var(--paper-2); }
.modal-media img, .modal-media .placeholder-media { width: 100%; height: 100%; object-fit: cover; }
.modal-media .placeholder-media img { width: 96px; height: 96px; object-fit: contain; }
.modal-body { padding: var(--space-5); display: grid; gap: var(--space-2); }
@media (max-width: 560px) { .modal-body { padding: var(--space-4); } }
.modal-title { margin: 0; font-size: clamp(28px, 4vw, 40px); font-stretch: 90%; letter-spacing: -0.025em; line-height: 1.05; }
.modal-tagline { margin: 0; font-size: 19px; color: var(--ink-soft); }
.modal-desc { color: var(--ink-soft); }
.modal-desc p { margin: 0 0 12px; }
.modal-desc p:last-child { margin-bottom: 0; }
.modal-desc strong { color: var(--ink); }
.modal-maker { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.modal-maker:empty { display: none; }

/* Click-to-load video (the YouTube iframe only loads after the tap) */
.video { position: relative; width: 100%; height: 100%; background: #000; cursor: pointer; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: opacity var(--dur); }
.video:hover img { opacity: 1; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand); color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.video-play .ico { width: 30px; height: 30px; margin-left: 4px; }
.video:hover .video-play { transform: translate(-50%, -50%) scale(1.06); }
.modal-price { margin: 0; font-weight: 700; }
.modal-price:empty { display: none; }
.link-ext { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand); width: fit-content; }
.link-ext .ico { width: 16px; height: 16px; }
.interest-form { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-m); background: var(--paper-2); }
.interest-form h3 { margin: 0; font-size: 21px; }

/* Footer */
.site-footer { color: var(--on-dark); background: transparent; padding-block: var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); }
.footer-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; }
.footer-row p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-links a { color: var(--on-dark); font-weight: 600; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--fig-yellow); }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand img { width: 36px; height: 36px; }
.site-footer .muted { color: var(--on-dark-muted); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--radius-m); box-shadow: var(--shadow-2); font-weight: 500; animation: pop var(--dur) var(--ease-out); max-width: calc(100% - 32px); }

@media (prefers-reduced-motion: reduce) { .art, .art * { animation: none !important; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .statement-text .w { color: var(--on-dark); }
  .how-step { opacity: 1; transform: none; }
  .hero-globe { transform: none; }
}
.check-field .field-error { flex-basis: 100%; padding-left: 34px; }
.check-field > span { flex: 1 1 0; min-width: 0; }