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

html,
body {
  margin: 0;
  padding: 0;
  background: #fafafa;
  color: #161d1f;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Inter",
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* ===== Top navigation bar ============================================
   Full-width fixed bar layered above the canvas reveal. Does not
   participate in the scroll-stage flow, so the canvas animation in
   script.js is unaffected. */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 30;
  background: rgba(250, 250, 250, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  color: #161d1f;
}

.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.topbar-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex: 0 0 auto;
}

.topbar-logo {
  height: 32px;
  width: auto;
  display: block;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1 1 auto;
  justify-content: center;
}

.topbar-link {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
  padding: 6px 2px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color 120ms ease, border-color 120ms ease;
}

.topbar-link:hover,
.topbar-link:focus-visible {
  color: #1c89a7;
  outline: none;
}

.topbar-link.active,
.topbar-link[aria-expanded="true"] {
  color: #1c89a7;
  font-weight: 700;
  border-bottom-color: #1c89a7;
}

.topbar-link .caret {
  font-size: 20px;
  line-height: 1;
  margin-left: -2px;
  transition: transform 120ms ease;
}

.topbar-link[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.topbar-tagline {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  flex: 0 0 auto;
}

.topbar-tagline .heart {
  display: inline-block;
  font-size: 13px;
  vertical-align: -1px;
  margin: 0 1px;
  font-style: normal;
}

.topbar-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #161d1f;
  background: transparent;
  text-decoration: none;
  flex: 0 0 auto;
  transition: background 0.15s ease, color 0.15s ease;
}
.topbar-cart:hover {
  background: rgba(28, 137, 167, 0.08);
  color: #1c89a7;
}
.topbar-cart:active { transform: translateY(1px); }
.topbar-cart .material-symbols-outlined { font-size: 22px; }

.topbar-cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ee8b1a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(250, 250, 250, 0.95);
  pointer-events: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar-menu {
  position: relative;
}

/* Mobile-only hamburger trigger and its dropdown (hidden on desktop). */
.topbar-menu--mobile {
  display: none;
}

.topbar-hamburger {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #161d1f;
  transition: background-color 120ms ease, color 120ms ease;
}

.topbar-hamburger:hover,
.topbar-hamburger:focus-visible {
  background: rgba(28, 137, 167, 0.08);
  color: #1c89a7;
  outline: none;
}

.topbar-hamburger[aria-expanded="true"] {
  background: rgba(28, 137, 167, 0.12);
  color: #1c89a7;
}

.topbar-hamburger .material-symbols-outlined {
  font-size: 28px;
  line-height: 1;
}

.topbar-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.topbar-dropdown[hidden] {
  display: none;
}

.topbar-dropdown a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #161d1f;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.topbar-dropdown a:hover,
.topbar-dropdown a:focus-visible {
  background: rgba(28, 137, 167, 0.08);
  color: #1c89a7;
  outline: none;
}

.topbar-dropdown .dd-label {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

.topbar-dropdown .dd-value {
  font-weight: 600;
}

@media (max-width: 768px) {
  .topbar-inner {
    padding: 10px 16px;
    gap: 6px;
    justify-content: flex-start;
  }
  .topbar-logo {
    height: 26px;
  }
  /* Desktop nav is fully replaced by the hamburger dropdown on mobile. */
  .topbar-nav {
    display: none;
  }
  /* Show the tagline pinned next to the logo with a thin separator. */
  .topbar-tagline {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-tagline::before {
    content: "|";
    margin-right: 6px;
    color: rgba(0, 0, 0, 0.22);
    font-weight: 400;
    font-style: normal;
  }
  .topbar-tagline .heart {
    font-size: 11px;
  }
  /* Cart icon stays visible on mobile; takes the auto-margin so it sits
     flush-right of the tagline, with the hamburger immediately after it. */
  .topbar-cart {
    width: 34px;
    height: 34px;
    margin-left: auto;
  }
  .topbar-cart .material-symbols-outlined { font-size: 21px; }

  /* Hamburger group floats to the right of the bar (next to cart on mobile). */
  .topbar-menu--mobile {
    display: block;
    margin-left: 0;
  }
  /* Right-anchored dropdown that extends leftward from the page's right
     margin, so it stays on-screen and "points to the left". Uses fixed
     positioning so it's not constrained by the small hamburger container. */
  .topbar-dropdown--mobile {
    position: fixed;
    top: 60px;
    right: 16px;
    left: auto;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  /* Contact + Configurators expand inline via native <details>. The
     <summary> is styled to match a regular dropdown row; the chevron icon
     flips when the group is open. */
  .topbar-dropdown--mobile summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #161d1f;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .topbar-dropdown--mobile summary::-webkit-details-marker {
    display: none;
  }
  .topbar-dropdown--mobile summary::marker {
    content: "";
  }
  .topbar-dropdown--mobile summary:hover,
  .topbar-dropdown--mobile summary:focus-visible {
    background: rgba(28, 137, 167, 0.08);
    color: #1c89a7;
    outline: none;
  }
  .topbar-dropdown--mobile .dd-chevron {
    font-size: 20px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.4);
    transition: transform 120ms ease;
  }
  .topbar-dropdown--mobile details[open] .dd-chevron {
    transform: rotate(180deg);
    color: #1c89a7;
  }
  /* Indent the nested links so they read as sub-items of the open group. */
  .topbar-dropdown--mobile details > a {
    padding-left: 32px;
    font-size: 13px;
  }
}

/* ===== Scroll-driven reveal stage ===================================== */
/* Scroll-down cue: a gently bouncing chevron pinned to the bottom-center
   of the viewport. Faded in ~1s after load, hidden permanently the first
   time the user scrolls more than 40px. Click-to-scroll-one-viewport. */
.scroll-cue {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ee8b1a;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease, color 0.15s ease;
}
.scroll-cue.is-shown  { opacity: 0.9; }
.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
.scroll-cue:hover     { color: #b85d00; opacity: 1; }
.scroll-cue:focus-visible {
  outline: 2px solid #ee8b1a;
  outline-offset: 4px;
}
.scroll-cue-icon {
  display: block;
  font-size: 36px;
  line-height: 1;
  animation: scroll-cue-bounce 1.6s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue       { transition: none; }
  .scroll-cue-icon  { animation: none; }
}

/* Heights use `svh` (small viewport height) instead of `vh` so the canvas
   does not grow when mobile browsers collapse their URL bar mid-scroll —
   `svh` is locked to the toolbar-visible viewport size. `vh` is kept as a
   fallback for browsers that don't support svh (pre-2022). */
.scroll-stage {
  position: relative;
  height: 500vh;
  height: 500svh;
  width: 100%;
}

.sticky-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The canvas is flex-centered in .sticky-wrap. On desktop it occupies a
   compact 55% so the product reads as a card with #FAFAFA breathing room.
   On mobile the portrait viewport already letterboxes the 16:9 frame
   vertically, so we fill the full viewport width. */
#reveal {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  #reveal {
    width: 55%;
    height: 55%;
  }
}

/* ===== Hero tagline reveal (scroll-driven typewriter) =================
   The F1 design from clickaboo_headline_E_finetuned.html. No sticky pin —
   the section is only as tall as its content + breathing room, so the
   transition from keyboard reveal to product banners stays tight. The
   typewriter is driven by the section's position relative to the viewport
   (see script.js). Empty spans get hydrated by JS. */

.hero-stage {
  position: relative;
  width: 100%;
  padding: 72px 0;
}

.hero-card {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: left;
  font-family: "Fredoka", "Plus Jakarta Sans", system-ui, sans-serif;
}

.hero-headline {
  margin: 0 0 18px;
  font-size: clamp(42px, 5.625vw, 70px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 400;
  /* Reserve vertical space so the card doesn't shift as letters type in. */
  min-height: 1.5em;
}

.hero-mici {
  font-weight: 600;
  font-size: 0.84em;
  color: #1a8fd4;
}

.hero-mari {
  font-weight: 700;
  font-size: 1.12em;
  color: #ee8b1a;
}

.hero-sub {
  margin: 0;
  font-size: clamp(19px, 1.875vw, 21px);
  line-height: 1.65;
  color: #6b7785;
  font-weight: 400;
  /* Reserve final-size height so the headline above doesn't drift up as text
     types in. One line on desktop where the sentence fits; mobile bumps to
     two lines. */
  min-height: 1.65em;
}

/* Blinking caret on the element currently being typed. */
.hero-mici.typing::after,
.hero-mari.typing::after,
.hero-sub.typing::after {
  content: "|";
  display: inline-block;
  margin-left: 2px;
  color: currentColor;
  font-weight: 400;
  animation: hero-caret 0.8s steps(1) infinite;
}

@keyframes hero-caret {
  0%, 50% { opacity: 0.85; }
  50.01%, 100% { opacity: 0; }
}

@media (max-width: 768px) {
  .hero-stage {
    padding: 48px 0;
  }
  .hero-card {
    padding: 0 16px;
  }
  .hero-mari {
    display: block;
  }
  .hero-sub {
    min-height: 3.3em;
  }
}

/* ===== Product banners (Clickaboo Keys / Clickaroons / Clickamoojis) === */
.banner-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 40px;
}

.banner-section:last-of-type {
  padding-bottom: 96px;
}

.banner {
  background: #eef5f7;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
}

@media (min-width: 768px) {
  .banner {
    flex-direction: row;
  }
}

.banner-text {
  flex: 1 1 50%;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  background: linear-gradient(to bottom right, #eef5f7, #ffffff);
}

@media (min-width: 768px) {
  .banner-text {
    padding: 80px;
  }
}

.banner-text-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(241, 114, 26, 0.18);
  color: #f1721a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.banner-icon .material-symbols-outlined {
  font-size: 28px;
  line-height: 1;
}

.banner-title {
  display: block;
  height: clamp(36px, 4.5vw, 52px);
  width: auto;
  max-width: 100%;
  margin: 0;
  align-self: flex-start;
}

.banner-body {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.6);
  max-width: 46ch;
}

@media (max-width: 768px) {
  .banner-body {
    font-size: 16px;
  }
}

.banner-image {
  flex: 1 1 50%;
  position: relative;
  background: #dde4e6;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .banner-image {
    min-height: 460px;
  }
}

.banner-image img {
  width: 80%;
  max-width: 480px;
  height: auto;
  max-height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.18));
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.banner-image--keys img {
  /* The keyboard keychain is portrait and tall; let it breathe vertically */
  width: auto;
  max-width: 50%;
  max-height: 90%;
}

.banner:hover .banner-image img {
  transform: scale(1.18);
}

/* Tactile orange CTA shared by all three banners — narrower variant of
   the original hero CTA, with the Material Symbols arrow icon. */
.banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: #f1721a;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 0 #773200;
  border-top: 0.5px solid rgba(255, 255, 255, 0.3);
  transition: transform 100ms ease, box-shadow 100ms ease,
    background-color 120ms ease;
  align-self: flex-start;
}

.banner-cta .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
}

.banner-cta:hover {
  background: #d8651a;
}

.banner-cta:focus-visible {
  outline: 3px solid rgba(241, 114, 26, 0.35);
  outline-offset: 3px;
}

.banner-cta:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #773200;
}

@media (max-width: 768px) {
  .banner-section {
    padding: 8px 16px;
  }
  .banner-section:last-of-type {
    padding-bottom: 56px;
  }
}

#preload-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 20;
  pointer-events: none;
  transition: opacity 600ms ease 200ms;
}

#preload-indicator span {
  display: block;
  height: 100%;
  width: 0%;
  background: #1a99a8;
  transition: width 120ms linear;
}

#preload-indicator.done {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-stage {
    height: 100vh;
    height: 100svh;
  }
}