/* ===== DESIGN TOKENS ===== */
:root {
  /* Brand cyan, darkened until it carries text-level contrast on white. */
  --primary: #2997FF;
  --primary-dark: #0071E3;
  --secondary: #2997FF;
  --accent: #0071E3;
  --accent-hover: #0066CC;
  --accent-light: rgba(0, 113, 227, 0.08);

  /* Apple's two-surface system: pure white and the light-grey companion. */
  --bg: #F5F5F7;
  --bg-white: #FFFFFF;
  --bg-elevated: #FBFBFD;
  --bg-dark: #1D1D1F;
  --bg-dark-lighter: #2C2C2E;
  --fill: rgba(118, 118, 128, 0.08);
  --fill-strong: rgba(118, 118, 128, 0.14);

  --text: #1D1D1F;
  --text-light: #6E6E73;
  --text-muted: #86868B;
  --text-on-dark: rgba(245, 245, 247, 0.72);
  --text-white: #F5F5F7;

  --border: rgba(0, 0, 0, 0.10);
  --border-light: rgba(0, 0, 0, 0.06);

  /* Diffuse, low-contrast elevation — never a hard drop shadow. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.05), 0 14px 40px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.06), 0 24px 60px rgba(0, 0, 0, 0.07);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 980px;

  --font-heading: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Monaco, Consolas, monospace;

  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg-white);
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: rgba(0, 113, 227, 0.16);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.22);
  border-radius: 6px;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  -webkit-tap-highlight-color: transparent;
}

/* Apple headlines are semibold and optically tightened — the larger the tighter. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--text);
}

h1 {
  letter-spacing: -0.035em;
}

h2 {
  letter-spacing: -0.028em;
}

h4,
h5,
h6 {
  line-height: 1.3;
  letter-spacing: -0.014em;
}

/* ===== UTILITIES ===== */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
}

.section {
  padding: 110px 0;
}

/* Eyebrow: no rule, no heavy tracking — colour and size carry the hierarchy. */
.section-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}

.section-label::before {
  content: none;
}

.section-title {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--text-light);
  max-width: 640px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.section-header {
  margin-bottom: 56px;
}

.section-header.center {
  text-align: center;
}

.section-header.center .section-label {
  justify-content: center;
}

.section-header.center .section-subtitle {
  margin: 0 auto;
}

/* ===== REVEAL ANIMATION ===== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 40px;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
  /* Near-opaque white: the homepage hero behind this bar is near-black, so any
     real translucency composites down to grey instead of reading as white. */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
}

.navbar.scrolled {
  top: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

.navbar-inner {
  /* Wider than the 1120 content container on purpose: the bar should reach
     toward the viewport edges so the logo isn't stranded in the middle. */
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  /* Never let flex squeeze the mark — the nav collapses to a hamburger instead. */
  flex: 0 0 auto;
  min-width: 0;
}

/* Nudge the mark toward the edge without moving the rest of the bar. The inner
   row is capped at 1280 and auto-centred, so on wide screens the logo sits
   further in than it needs to. Desktop row only — below the collapse point the
   bar already hugs the edge and this would push the logo off-screen. */
/* Only pull the logo outward where the row has slack to give. Below 1400 the
   six links plus the search already fill the bar, so a negative margin there
   just pushes the CTA off-screen. */
@media (min-width: 1401px) {
  .navbar {
    padding: 0 32px;
    /* Tightest point of this band is 1401 itself: 47px gap + 16px of logo
       travel = 63px of room, so 56px of growth stays clear. */
    --nav-search-w: 196px;
    --nav-search-open: 364px;
    --nav-logo-shift: -16px;
  }

  .navbar-logo {
    margin-left: -16px;
  }
}

.logo-img {
  height: 76px;
  width: auto;
  object-fit: contain;
  transition: var(--transition);
  filter: none;
}

.navbar.scrolled .logo-img {
  height: 66px;
  filter: none;
}

/* Footer now sits on the light surface, so the logo keeps its own colour. */
.footer-logo-img {
  height: auto;
  width: 176px;
  filter: none;
  opacity: 1;
}

/* Visually hidden but still read out — used by the nav search label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Wide enough that the hover fill blocks never touch each other. */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Fill the row and pack right: identical to the old space-between result at
     rest, but now the free space belongs to the nav, so the search can actually
     grow into it on hover instead of being clamped to its content width. */
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Always-on product search, sitting between the menu and the CTA. Colours and
   easing come from the existing tokens so it reads as part of the current bar
   rather than a transplant. */
/* The search takes width from the row, so the links must never wrap, and the
   CTA must not be shrunk into its own arrow. */
.navbar-nav > a {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Hover/focus grows the field and slides the logo toward the edge to pay for
   it. The budget per band is (logo→menu gap + how far the logo can still go
   left), so the amounts are set per breakpoint rather than shared. */
.navbar {
  --nav-search-w: 196px;
  --nav-search-open: 364px;
  --nav-logo-shift: -16px;
}

.nav-search {
  flex: 0 1 var(--nav-search-w);
  min-width: 132px;
  /* anchor for the suggestion panel */
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  /* Tighter on the left so the magnifier sits close to the pill edge and the
     placeholder gets the extra room. */
  /* 3px of the vertical padding lives on the input instead — see the caret note
     on .nav-search input. Pill height is unchanged. */
  padding: 5px 15px 5px 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  background: var(--fill);
  transition: flex-basis 0.38s var(--ease), background 0.3s var(--ease),
    border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

@media (min-width: 1081px) {
  .nav-search:hover,
  .nav-search:focus-within {
    flex-basis: var(--nav-search-open);
  }

  .navbar-logo {
    transition: transform 0.38s var(--ease);
  }

  /* transform alone is only visual — the negative margin is what actually hands
     the freed width over to the nav. */
  .navbar-inner:has(.nav-search:hover) .navbar-logo,
  .navbar-inner:has(.nav-search:focus-within) .navbar-logo {
    transform: translateX(var(--nav-logo-shift));
    margin-right: var(--nav-logo-shift);
  }

  /* Let the expanded search use the CTA's full slot as well. Keeping the
     transition on the same easing curve makes the field and button feel like
     one continuous Apple-style control transformation. */
  .navbar-inner:has(.nav-search:hover) .navbar-cta,
  .navbar-inner:has(.nav-search:focus-within) .navbar-cta {
    max-width: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    gap: 0;
    opacity: 0;
    transform: translateX(10px) scale(0.96);
    pointer-events: none;
  }
}

.nav-search:hover {
  background: var(--fill-strong);
}

.nav-search:focus-within {
  border-color: var(--accent);
  background: var(--bg-white);
  box-shadow: 0 0 0 4px var(--accent-light);
}

.nav-search svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.nav-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  /* The caret is drawn the full height of the line box, so with no padding it
     sits flush against the input's top and bottom edges and reads as clipped.
     This buys it 3px of clearance; the pill gives up the same 3px so its height
     does not change. Must be padding, not line-height — line-height would grow
     the line box and the caret right along with it. */
  padding: 3px 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}

.nav-search input::placeholder {
  color: var(--text-muted);
}

/* The pill already shows focus via :focus-within, so the global :focus-visible
   ring would draw a second one inside it. The input clears `outline` above but
   that rule uses box-shadow, so it has to be cleared here too. */
.nav-search input:focus-visible {
  box-shadow: none;
}

.nav-search input::-webkit-search-cancel-button {
  display: none;
}

/* Replaces the native cancel button hidden above, which is unstyleable and
   absent outside WebKit. Only rendered once there is something to clear, so the
   resting pill keeps its original proportions. */
.nav-search-clear {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.nav-search-clear[hidden] {
  display: none;
}

.nav-search-clear svg {
  width: 11px;
  height: 11px;
}

.nav-search-clear:hover {
  background: var(--fill-strong);
  color: var(--text);
}

.nav-search-clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ===== NAV SEARCH SUGGESTIONS ===== */
/* Anchored to the field's right edge so it stays inside the bar when the
   resting field is narrower than the panel's own minimum. The material matches
   the navbar's — same translucency and blur — so the panel reads as the bar
   extending downward rather than a card dropped on top of it. */
.nav-suggest {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  width: 100%;
  /* Wider than the field it hangs from: part numbers plus a spec line need
     more room than the resting search pill has. */
  min-width: 400px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  /* Near-opaque for the same reason the navbar is: the hero behind it is a
     busy dark photo, and 11px grey meta text cannot survive real translucency. */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: 20;
}

.nav-suggest[hidden] {
  display: none;
}

/* Same curve as the field's own expansion, so the panel reads as part of that
   one control opening rather than a separate popup. */
.nav-suggest:not([hidden]) {
  animation: nav-suggest-in 0.26s var(--ease);
}

@keyframes nav-suggest-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- header: quiet context line, never competes with the rows ---- */
.nav-suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.nav-suggest-aside {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.nav-suggest-spinner {
  display: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--border);
  border-top-color: var(--text-muted);
  border-radius: 50%;
}

.nav-suggest.is-loading .nav-suggest-spinner {
  display: block;
  animation: nav-suggest-spin 0.6s linear infinite;
}

@keyframes nav-suggest-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Results stay put while the next request is in flight — only their weight
   drops, so the panel never flashes empty mid-typing. */
.nav-suggest-list {
  transition: opacity 0.2s var(--ease);
}

.nav-suggest.is-loading .nav-suggest-list {
  opacity: 0.45;
}

/* ---- rows ---- */
.nav-suggest-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: none;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.18s var(--ease);
}

.nav-suggest-item + .nav-suggest-item {
  margin-top: 1px;
}

/* Pointer highlighting is suppressed while arrowing (.kbd), so only one row is
   ever lit at a time. */
@media (hover: hover) {
  .nav-suggest:not(.kbd) .nav-suggest-item:hover {
    background: var(--fill);
  }
}

.nav-suggest-item.active {
  background: var(--fill);
}

.nav-suggest-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* 3:2, matching the renders: measured across all 474 of them the aspect clusters
   at 1.25 / 1.50 / 1.75, median 1.59. The renders carry their own grey studio
   backdrop out to the frame edge, so anything the image does not cover shows up
   as a band of tile behind it — hence cover, not contain. The products sit well
   inside their frames, so the crop only ever takes backdrop. No border either:
   the image is the tile now, and a hairline would just re-draw the box. */
.nav-suggest-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Only ever visible in the moment before the render loads. */
  background: var(--bg);
  border-radius: 11px;
}

.nav-suggest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.32s var(--ease);
}

/* The gentle push-in on hover is the same language as the product cards below. */
@media (hover: hover) {
  .nav-suggest:not(.kbd) .nav-suggest-item:hover .nav-suggest-thumb img {
    transform: scale(1.07);
  }
}

.nav-suggest-item.active .nav-suggest-thumb img {
  transform: scale(1.07);
}

.nav-suggest-noimg {
  font-size: 0.625rem;
  color: var(--text-muted);
}

/* Recent-search rows carry a glyph where products carry a render, so this
   column is sized to the glyph rather than kept at the render's width — a
   52px runway in front of 17px of icon just reads as a hole. */
.nav-suggest-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.nav-suggest-icon svg {
  width: 17px;
  height: 17px;
}

/* min-width:0 is what actually lets the two lines ellipsis inside the flex row. */
.nav-suggest-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-suggest-part {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Weight and colour rather than a highlighter block: a column of monospace
   codes stays scannable, and the matched run keeps the same rhythm. */
.nav-suggest-part mark {
  background: none;
  color: var(--accent);
  font-weight: 700;
}

.nav-suggest-meta {
  overflow: hidden;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reveals on approach — the row is a link, and this is what says so. */
.nav-suggest-chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--ease), transform 0.24s var(--ease), color 0.2s var(--ease);
}

@media (hover: hover) {
  .nav-suggest:not(.kbd) .nav-suggest-item:hover .nav-suggest-chevron {
    opacity: 1;
    transform: translateX(0);
    color: var(--accent);
  }
}

.nav-suggest-item.active .nav-suggest-chevron {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent);
}

/* ---- footer action ---- */
.nav-suggest-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}

.nav-suggest-foot[hidden] {
  display: none;
}

.nav-suggest-action {
  justify-content: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
}

.nav-suggest-action .nav-suggest-chevron {
  width: 13px;
  height: 13px;
  color: var(--accent);
}

.nav-suggest-clear {
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.nav-suggest-clear:hover {
  background: var(--fill);
  color: var(--text);
}

.nav-suggest-status {
  padding: 10px 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* ---- first-keystroke placeholder, so the panel opens at its real height ---- */
.nav-suggest-skeleton {
  display: block;
  height: 68px;
  margin-bottom: 1px;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--fill) 30%, var(--fill-strong) 50%, var(--fill) 70%);
  background-size: 220% 100%;
  animation: nav-suggest-shimmer 1.3s var(--ease) infinite;
}

@keyframes nav-suggest-shimmer {
  from {
    background-position: 140% 0;
  }

  to {
    background-position: -40% 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .nav-suggest:not([hidden]),
  .nav-suggest-skeleton,
  .nav-suggest.is-loading .nav-suggest-spinner {
    animation: none;
  }

  .nav-suggest-thumb img,
  .nav-suggest-chevron {
    transition: none;
  }
}

/* Nav links keep the original bracket-and-fill hover animation, retuned to the
   Apple palette (brand accent fill, softer easing) rather than removed. */
.navbar-nav > a:not(.navbar-cta) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  position: relative;
  display: block;
  padding: 8px 16px;
  letter-spacing: -0.01em;
  transition: color 0.35s var(--ease);
  z-index: 1;
}

.navbar.scrolled .navbar-nav > a:not(.navbar-cta) {
  color: var(--text);
}

.navbar-nav > a:not(.navbar-cta)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: scaleY(2);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.navbar-nav > a:not(.navbar-cta)::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: calc(100% - 4px);
  background-color: var(--accent);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  z-index: -1;
  border-radius: 4px;
}

.navbar-nav > a:not(.navbar-cta):hover,
.navbar.scrolled .navbar-nav > a:not(.navbar-cta):hover {
  color: #fff;
}

.navbar-nav > a:not(.navbar-cta):hover::before,
.navbar-nav > a:not(.navbar-cta):hover::after {
  transform: scaleY(1);
  opacity: 1;
}

.navbar-nav > a.nav-current:not(.navbar-cta) {
  color: var(--accent);
}

.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 8px 18px;
  background: var(--accent);
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  max-width: 148px;
  transition: background 0.3s var(--ease), transform 0.38s var(--ease),
    box-shadow 0.3s var(--ease), max-width 0.38s var(--ease),
    margin 0.38s var(--ease), padding 0.38s var(--ease),
    gap 0.38s var(--ease), opacity 0.24s var(--ease);
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.22);
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}

.navbar-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  border-radius: inherit;
}

.navbar-cta:hover::before {
  opacity: 1;
}

.navbar-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 113, 227, 0.32);
}

.navbar-cta:active {
  transform: scale(0.97);
}

.navbar-cta span,
.navbar-cta svg {
  position: relative;
  z-index: 1;
}

.navbar-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s var(--ease);
}

.navbar-cta:hover svg {
  transform: translateX(2px);
}

.navbar-cta:hover::after {
  width: 0 !important;
  display: none;
}

/* mobile menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

.navbar.scrolled .menu-toggle span {
  background: var(--text);
}

/* The always-on search takes ~170–200px out of the row, so the compact link
   spacing has to start well above the old 1200 mark — otherwise the CTA is
   pushed past the right edge in the 1081–1400 band. The bar height and logo
   step down separately at 1200, so 1366-class laptops keep the full-size bar. */
@media (max-width: 1400px) {
  /* 1201 is the tight end here: 8px gap + 40px of logo travel = 48px. */
  .navbar {
    --nav-search-w: 192px;
    --nav-search-open: 338px;
    --nav-logo-shift: -32px;
  }

  .navbar-nav {
    gap: 10px;
  }

  .navbar-nav > a:not(.navbar-cta) {
    padding: 8px 12px;
    font-size: 0.875rem;
  }

  .navbar-cta {
    margin-left: 8px;
    padding: 8px 16px;
  }

  .nav-search {
    min-width: 120px;
    padding: 4px 12px 4px 7px;
  }

  .logo-img,
  .navbar.scrolled .logo-img {
    height: 66px;
  }
}

/* The logo is 4:1, so full size only fits beside the nav on wide screens.
   Step the bar and mark down one notch here, and ease the link spacing just
   enough that the row still clears the logo at the bottom of this band. */
@media (max-width: 1200px) {
  .navbar {
    /* Trim the bar's gutter and pull the logo out with it: that's where the
       room for the full-width resting search comes from in this band. */
    padding: 0 14px;
    --nav-search-w: 190px;
    --nav-search-open: 306px;
    /* logo already sits 6px off the gutter here — anything more pushes it
       off-screen when the field opens. */
    --nav-logo-shift: -6px;
  }

  .navbar-logo {
    margin-left: -8px;
  }

  .navbar-inner {
    height: 76px;
  }

  .logo-img,
  .navbar.scrolled .logo-img {
    height: 66px;
  }

  .hero {
    padding-top: 140px;
  }

  /* Last band before the hamburger: one more notch off the spacing so the CTA
     still lands inside the viewport. 8px gap + 11px padding keeps the hover
     fill blocks from touching. */
  .navbar-nav {
    gap: 6px;
  }

  .navbar-nav > a:not(.navbar-cta) {
    padding: 8px 10px;
    font-size: 0.875rem;
  }

  .navbar-cta {
    margin-left: 6px;
    padding: 8px 14px;
  }

  .nav-search {
    min-width: 150px;
    padding: 4px 10px 4px 7px;
  }
}

/* Six links plus the CTA stop fitting beside the logo around 1080px — the row
   used to wrap onto two lines and squeeze the logo. Collapse into the hamburger
   here instead, which keeps the logo at full size. Breakpoint is mirrored by
   NAV_COLLAPSE_WIDTH in index.js. */
@media (max-width: 1080px) {
  .navbar {
    padding: 0 20px;
  }

  .navbar-nav {
    display: none;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    border-radius: 10px;
  }

  .menu-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.22);
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .navbar-nav.open {
    display: flex;
    flex-direction: column;
    /* the base rule centres items for the horizontal row; stretch them here */
    align-items: stretch;
    /* the base rule packs the row to the right; in a column that would push
       everything to the bottom */
    justify-content: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100svh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
    padding: 10px 20px 20px;
    background: #fff;
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border: none;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    box-shadow: none;
  }

  /* In the drawer the row becomes a column, so flex-basis would be read as a
     height — reset it and let the search span the full width instead. */
  .navbar-nav.open .nav-search {
    order: -1;
    flex: none;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
  }

  /* Collapsed bar: the search only exists inside the open drawer. */
  .navbar-nav:not(.open) .nav-search {
    display: none;
  }

  /* The drawer is already full-width, so the panel's desktop minimum would
     only push it past the viewport edge. The drawer clips its own overflow,
     so keep the panel short enough to land inside it — roughly the six nav
     links it covers — rather than being cut off at the drawer's edge. */
  .navbar-nav.open .nav-suggest {
    min-width: 0;
    max-height: min(46vh, 316px);
  }

  .navbar-nav.open > a:not(.navbar-cta) {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 11px 4px;
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
  }

  .navbar-nav.open > a:not(.navbar-cta)::before,
  .navbar-nav.open > a:not(.navbar-cta)::after {
    display: none;
  }

  .navbar-nav.open > a:not(.navbar-cta):hover {
    color: var(--accent);
  }

  .navbar-nav.open .navbar-cta {
    display: inline-flex;
    width: 100%;
    max-width: none;
    min-height: 48px;
    justify-content: center;
    margin: 16px 0 0;
  }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 152px 0 60px;
  overflow: hidden;
  background: #000;
}

/* No glow blobs — the photograph and one neutral scrim do all the work. */
.hero::before,
.hero::after {
  content: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.62;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.6) 44%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.44) 100%);
}

.hero-shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 34px;
  width: 100%;
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.hero-copy {
  max-width: 920px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.10);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 16px;
  box-shadow: none;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.hero-badge .pulse {
  width: 6px;
  height: 6px;
  background: var(--secondary);
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

.hero-overline {
  display: block;
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.58);
}

.hero-overline::before {
  content: none;
}

.hero h1 {
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  font-weight: 600;
  color: #fff;
  margin-bottom: 18px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: none;
}

.hero h1 .highlight {
  display: inline;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  background-clip: initial;
  color: var(--secondary);
}

.hero-desc {
  font-size: 1.1875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  letter-spacing: -0.012em;
  margin-bottom: 28px;
  max-width: 56ch;
}

.hero-desc-nowrap {
  display: inline-block;
  white-space: nowrap;
  max-width: none;
}

@media (max-width: 768px) {
  .hero-desc-nowrap {
    display: block;
    white-space: normal;
  }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 28px;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(238, 248, 255, 0.92);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
}

.hero-meta span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: none;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

/* Solid fill vs. hairline outline — flat, pill, no shadow, no lift. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  padding: 12px 26px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  border-radius: var(--radius-pill);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.22);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 113, 227, 0.34);
}

.btn-primary:active {
  transform: scale(0.975);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  padding: 12px 26px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.btn-outline:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.btn-outline:active {
  transform: scale(0.975);
}

.btn-primary svg,
.btn-outline svg {
  width: 16px;
  height: 16px;
}

.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(238, 248, 255, 0.72);
  font-size: 0.84rem;
}

.hero-trust-item::before {
  content: '';
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
}

/* hero stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-stat {
  position: relative;
  padding: 0;
}

.hero-stat:not(:last-child) {
  border-right: none;
  margin-right: 0;
}

.hero-stat::before {
  content: none;
}

.hero-stat .stat-value {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}

.hero-stat .stat-value .accent {
  color: var(--secondary);
  font-size: 0.72em;
  font-weight: 500;
}

.hero-stat .stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* ===== PRODUCTS ===== */
.products {
  position: relative;
  background: var(--bg-white);
  overflow: hidden;
}

/* Grid-paper texture removed — flat surfaces only. */
.products::before {
  content: none;
}

.products .container {
  position: relative;
  z-index: 1;
}

/* -- Product Controls -- */
.product-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.product-search {
  width: min(100%, 390px);
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.product-search:focus-within {
  background: var(--bg-white);
  border-color: rgba(0, 113, 227, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.14);
}

.product-search > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.product-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

.product-search input::placeholder {
  color: var(--text-muted);
}

.product-search input::-webkit-search-cancel-button {
  display: none;
}

.product-search-clear {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--text-muted);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.product-search-clear:hover,
.product-search-clear:focus-visible {
  color: var(--text);
  background: var(--fill-strong);
  outline: none;
}

.product-search-clear svg {
  width: 16px;
  height: 16px;
}

.product-count {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}

/* -- Series Group Tabs -- */
.product-tabs-wrap {
  display: block;
  margin-bottom: 32px;
}

.product-tabs {
  display: flex;
  gap: 8px;
  padding: 0 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}

.product-tabs::-webkit-scrollbar {
  display: none;
}

/* Segmented-control feel: no border, filled pill for the selected item. */
.product-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-light);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.16s var(--ease);
  white-space: nowrap;
}

.product-tab:hover {
  color: var(--text);
  background: var(--fill);
  border-color: transparent;
}

.product-tab.active {
  background: var(--text);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

.product-tab:active {
  transform: scale(0.97);
}

.product-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.22);
}

.product-tab-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--fill-strong);
  font-size: 0.6875rem;
  line-height: 1.5;
  text-align: center;
}

.product-tab.active .product-tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

/* -- Product Grid -- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* -- Product Card -- */
.product-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.product-card::before {
  content: none;
}

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(41, 151, 255, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0, 113, 227, 0.03));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: 0;
}

.product-card:hover::after,
.product-card:focus-within::after {
  opacity: 1;
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

.product-card-trigger {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.product-card-trigger:focus-visible {
  outline: none;
}

.product-card:focus-within {
  box-shadow:
    0 0 0 4px rgba(0, 113, 227, 0.2),
    var(--shadow-lg);
}

.product-card-visual {
  position: relative;
  padding: 10px 10px 0;
}

/* -- Product Image -- */
.product-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
  border-radius: var(--radius-md);
  border: none;
  box-shadow: none;
}

.product-card-image::before,
.product-card-image::after {
  content: none;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-card-image img,
.product-card:focus-within .product-card-image img {
  transform: scale(1.02);
}

.product-card-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px;
  pointer-events: none;
}

.product-card-view-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: none;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  box-shadow: none;
}

.product-card-view-pill svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.product-card:hover .product-card-view-pill,
.product-card:focus-within .product-card-view-pill {
  opacity: 1;
  transform: translateY(0);
}

/* -- Product Card Body -- */
.product-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px 15px;
}

.product-card-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.product-series-name {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.product-group-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--fill);
  color: var(--text-light);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
}

.product-card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 400;
  flex-shrink: 0;
}

.product-card-action-text {
  opacity: 1;
}

.product-card-action svg {
  width: 14px;
  height: 14px;
  transition: transform 0.22s var(--ease);
}

.product-card:hover .product-card-action svg,
.product-card:focus-within .product-card-action svg {
  transform: translateX(3px);
}

.product-empty {
  grid-column: 1 / -1;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--bg);
  border: none;
  border-radius: var(--radius-lg);
  text-align: center;
}

.product-empty svg {
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  color: var(--text-muted);
}

.product-empty h3 {
  margin-bottom: 6px;
  font-size: 1.0625rem;
}

.product-empty p {
  color: var(--text-light);
  font-size: 0.9375rem;
}

/* -- Load More Button -- */
.products-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.products-load-more-wrap[hidden],
.product-search-clear[hidden] {
  display: none;
}

.products-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 11px 28px;
  background: var(--fill);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.16s var(--ease);
}

.products-load-more-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 113, 227, 0.28);
}

.products-load-more-btn:active {
  transform: scale(0.975);
}

.products-load-more-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.products-load-more-btn:hover svg {
  transform: translateY(2px);
}

/* -- Lightbox -- */
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.lightbox-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1180px;
  width: min(92%, 1180px);
  max-height: 90vh;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-lightbox.open .lightbox-content {
  transform: scale(1) translateY(0);
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.16s var(--ease);
}

.lightbox-close svg {
  width: 18px;
  height: 18px;
  color: white;
}

.lightbox-close:hover {
  background: var(--accent);
  border-color: transparent;
}

.lightbox-close:active {
  transform: scale(0.94);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.16s var(--ease);
}

.lightbox-nav svg {
  width: 20px;
  height: 20px;
  color: white;
}

.lightbox-nav:hover {
  background: var(--accent);
  border-color: transparent;
}

.lightbox-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.lightbox-prev {
  left: -72px;
}

.lightbox-next {
  right: -72px;
}

.lightbox-image-wrap {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-white);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.lightbox-img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: white;
  padding: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.lightbox-info {
  width: 100%;
  padding: 18px 4px 0;
  text-align: center;
}

.lightbox-title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 6px;
}

.lightbox-series {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.lightbox-desc {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin-bottom: 14px;
}

.lightbox-specs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.lightbox-specs .spec-tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  border: 1px solid rgba(52, 246, 242, 0.25);
}

@keyframes productFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== WHY CHOOSE US =====
   Based on the "Why Choose Us v4 light" design, tightened vertically and
   stripped of its rules/dividers so separation comes from whitespace. */
.section.why-us {
  position: relative;
  padding: 84px 0;
  background: #FBFBFD;
  overflow: hidden;
}

.why-us::before {
  content: '';
  position: absolute;
  top: -220px;
  left: 50%;
  width: 1100px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(0, 113, 227, 0.07) 0%,
    rgba(0, 113, 227, 0.02) 45%,
    rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

.why-us .container {
  position: relative;
  z-index: 1;
}

.why-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 0.72fr);
  gap: 48px;
  align-items: center;
}

.why-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why-eyebrow {
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.why-title {
  margin: 0;
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--text);
}

.why-lead {
  margin: 0;
  max-width: 520px;
  font-size: 1.1875rem;
  line-height: 1.5;
  font-weight: 300;
  color: var(--text-light);
  text-wrap: pretty;
}

.why-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.why-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.2;
  font-weight: 400;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.22);
}

.why-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 113, 227, 0.34);
}

.why-btn:active {
  transform: scale(0.975);
}

.why-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--accent);
  transition: color 0.2s var(--ease);
}

.why-link-chev {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.28s var(--ease);
}

.why-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.why-link:hover .why-link-chev {
  transform: translateX(4px);
}

.why-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 300px;
  margin-left: auto;
}

.why-hero-media::before {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}

.why-hero-media:hover::before {
  transform: scale(1.08);
  opacity: 0.75;
}

.why-hero-media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  box-shadow: 0 14px 36px -20px rgba(0, 0, 0, 0.22);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.why-hero-media:hover img {
  transform: scale(1.03);
  box-shadow: 0 22px 52px -22px rgba(0, 0, 0, 0.3);
}

/* Numbered points — one hairline overall, columns held apart by space. */
.why-points {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--border-light);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 40px;
}

.why-point {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform 0.35s var(--ease);
}

/* Sits on the grid's shared hairline, like a tab indicator for that column. */
.why-point::before {
  content: '';
  position: absolute;
  top: -27px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.why-point:hover {
  transform: translateY(-2px);
}

.why-point:hover::before {
  transform: scaleX(1);
}

.why-point-num {
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  transition: color 0.3s var(--ease), transform 0.35s var(--ease);
}

.why-point:hover .why-point-num {
  color: var(--accent-hover);
  transform: translateX(2px);
}

.why-point h3 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color 0.3s var(--ease);
}

.why-point:hover h3 {
  color: var(--accent);
}

.why-point p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--text-light);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .section.why-us {
    padding: 64px 0;
  }

  .why-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .why-hero-media {
    order: -1;
    max-width: 220px;
    margin: 0 auto;
  }

  .why-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 36px;
    gap: 28px 36px;
  }

  /* Rows 2+ have no hairline above them, so drop the indicator entirely. */
  .why-point::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .section.why-us {
    padding: 56px 0;
  }

  .why-hero-media {
    max-width: 180px;
  }

  .why-lead {
    font-size: 1.0625rem;
  }

  .why-points {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 30px;
  }
}

/* ===== APPLICATIONS — GEOMETRIC BENTO GRID ===== */
.applications {
  background: var(--bg-white);
}

.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 228px 228px 228px;
  grid-template-areas:
    "tall  wide-r  wide-r"
    "tall  mid-c   mid-r"
    "wide-l wide-l  bot-r";
  gap: 14px;
}

/* ---- base card ---- */
.app-bento-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.app-bento-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-xl);
  z-index: 2;
}

/* ---- grid placement ---- */
.bento-tall-left    { grid-area: tall; }
.bento-wide-right   { grid-area: wide-r; }
.bento-mid-center   { grid-area: mid-c; }
.bento-mid-right    { grid-area: mid-r; }
.bento-wide-left    { grid-area: wide-l; }
.bento-bottom-right { grid-area: bot-r; }

/* ---- background image ---- */
.app-bento-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.5s ease;
  filter: brightness(0.85);
}

.app-bento-card:hover .app-bento-bg {
  transform: scale(1.08);
  filter: brightness(0.7);
}

/* ---- dark overlay gradient ---- */
.app-bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.08) 100%
  );
  z-index: 1;
  transition: background 0.5s ease;
}

.app-bento-card:hover .app-bento-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

/* ---- text content ---- */
.app-bento-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 28px;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-bento-card:hover .app-bento-content {
  transform: translateY(-4px);
}

.app-bento-en {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 7px;
  display: block;
  transition: color 0.4s var(--ease);
}

.app-bento-card:hover .app-bento-en {
  color: var(--secondary);
}

.app-bento-content h3 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 7px;
  line-height: 1.15;
  letter-spacing: -0.024em;
}

.app-bento-content p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
  letter-spacing: -0.006em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 460px;
}

/* ========================================
   CARD-SPECIFIC OVERRIDES
   ======================================== */

/* -- TALL LEFT: larger title -- */
.bento-tall-left .app-bento-content h3 {
  font-size: 1.75rem;
  letter-spacing: -0.03em;
}

.bento-tall-left .app-bento-content p {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.bento-tall-left .app-bento-content {
  padding: 32px;
}

/* -- WIDE cards: larger titles -- */
.bento-wide-right .app-bento-content h3,
.bento-wide-left .app-bento-content h3 {
  font-size: 1.75rem;
  letter-spacing: -0.03em;
}

.bento-wide-right .app-bento-content p,
.bento-wide-left .app-bento-content p {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.bento-wide-right .app-bento-content,
.bento-wide-left .app-bento-content {
  padding: 32px;
}

/* -- SMALL cards: compact text -- */
.bento-mid-center .app-bento-content,
.bento-mid-right .app-bento-content,
.bento-bottom-right .app-bento-content {
  padding: 22px;
}

.bento-mid-center .app-bento-content h3,
.bento-mid-right .app-bento-content h3,
.bento-bottom-right .app-bento-content h3 {
  font-size: 1.1875rem;
  margin-bottom: 5px;
}

.bento-mid-center .app-bento-content p,
.bento-mid-right .app-bento-content p,
.bento-bottom-right .app-bento-content p {
  font-size: 0.8125rem;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ===== CERTIFICATIONS / STATS =====
   Design "1a": centred spec bar — headline, a four-column stat row split by
   hairlines, then the certifications as capsule tags. Spacing pulled in from
   the design's canvas values so the section doesn't dominate the page. */
.certifications {
  padding: 84px 0;
  background: var(--bg);
}

.cert-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cert-eyebrow {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--accent);
}

.cert-title {
  margin: 12px 0 0;
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.cert-lead {
  margin: 18px 0 0;
  max-width: 660px;
  font-size: 1.1875rem;
  line-height: 1.52;
  font-weight: 400;
  letter-spacing: 0.004em;
  color: var(--text-light);
  text-wrap: pretty;
}

/* -- stat row -- */
.cert-stats {
  width: 100%;
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cert-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}

.cert-stat + .cert-stat {
  border-left: 1px solid var(--border);
}

.cert-stat-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.cert-stat-value > span:first-child {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cert-stat-unit {
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.cert-stat-label {
  font-size: 0.9375rem;
  letter-spacing: 0.006em;
  color: var(--text-light);
  text-align: center;
}

/* -- certification capsules -- */
.cert-badges {
  width: 100%;
  margin-top: 52px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.cert-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.004em;
  cursor: default;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.cert-badge:hover {
  border-color: rgba(0, 0, 0, 0.28);
  background: #fff;
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: none;
}

@media (max-width: 900px) {
  .certifications {
    padding: 64px 0;
  }

  .cert-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 44px;
    row-gap: 32px;
  }

  /* 2x2: only the right-hand column keeps a divider */
  .cert-stat + .cert-stat {
    border-left: none;
  }

  .cert-stat:nth-child(even) {
    border-left: 1px solid var(--border);
  }

  .cert-stat:nth-child(n + 3) {
    padding-top: 32px;
    border-top: 1px solid var(--border);
  }

  .cert-badges {
    margin-top: 44px;
    padding-top: 28px;
  }
}

@media (max-width: 560px) {
  .certifications {
    padding: 56px 0;
  }

  .cert-lead {
    font-size: 1.0625rem;
  }

  .cert-stats {
    margin-top: 36px;
    row-gap: 26px;
  }

  .cert-stat {
    padding: 0 10px;
  }

  .cert-stat:nth-child(n + 3) {
    padding-top: 26px;
  }

  .cert-stat-unit {
    font-size: 1rem;
  }

  .cert-stat-label {
    font-size: 0.875rem;
  }

  .cert-badges {
    margin-top: 36px;
    padding-top: 24px;
    gap: 8px;
  }

  .cert-badge {
    padding: 9px 16px;
    font-size: 0.875rem;
  }
}

/* Single column — dividers have to flip from vertical to horizontal. */
@media (max-width: 420px) {
  .cert-stats {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .cert-stat {
    padding: 0;
  }

  .cert-stat + .cert-stat,
  .cert-stat:nth-child(even) {
    border-left: none;
  }

  .cert-stat + .cert-stat,
  .cert-stat:nth-child(n + 3) {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
  }
}

/* ===== CLIENTS ===== */
.clients {
  background: var(--bg-white);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.client-card {
  padding: 28px 16px;
  text-align: center;
  cursor: default;
}

.client-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
}

.client-logo-img {
  max-width: 400px;
  max-height: 200px;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.client-card:hover .client-logo-img {
  transform: scale(1.12);
}

/* ===== NEWS ===== */
.news {
  background: var(--bg);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.news-card {
  display: block;
  color: inherit;
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.news-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.news-img {
  width: 100%;
  height: 190px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.news-img .news-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-img .news-icon svg {
  width: 44px;
  height: 44px;
  color: rgba(0, 0, 0, 0.22);
}

.news-body {
  padding: 24px 24px 26px;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.news-date {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.news-tag {
  font-size: 0.75rem;
  padding: 3px 10px;
  background: var(--fill);
  color: var(--text-light);
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.news-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  margin-bottom: 10px;
  line-height: 1.3;
}

.news-card p {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.5;
  letter-spacing: -0.008em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--accent);
  margin-top: 16px;
  transition: var(--transition);
}

.news-read-more svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}

.news-card:hover .news-read-more svg {
  transform: translateX(4px);
}

/* ===== FOOTER ===== */
/* Apple's footer is the light-grey surface, not a dark slab. */
.footer {
  background: var(--bg);
  padding: 56px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-light);
}

.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 14px;
}

.footer-brand .footer-logo .logo-icon {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-brand .footer-logo .logo-icon svg {
  width: 18px;
  height: 18px;
  color: white;
}

.footer-brand p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 300px;
}

.footer-col h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}

.footer-col a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 5px 0;
  transition: color 0.2s var(--ease);
}

.footer-col a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-col a svg {
  width: 14px;
  height: 14px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
}

.footer-contact-item svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-contact-item span {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.footer-bottom {
  padding: 20px 0 24px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ===== COUNTER ANIMATION ===== */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s, background 0.2s var(--ease);
  box-shadow: var(--shadow-md);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 113, 227, 0.34);
}

.back-to-top:active {
  transform: scale(0.94);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  color: var(--text);
  transition: color 0.25s var(--ease);
}

.back-to-top:hover svg {
  color: #fff;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero {
    padding-bottom: 56px;
  }

  .hero-main {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    padding-top: 20px;
  }

  .hero-stat,
  .hero-stat:not(:last-child) {
    padding: 0;
    margin-right: 0;
    border-right: none;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .app-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 196px 196px 196px 196px;
    grid-template-areas:
      "tall  wide-r"
      "tall  mid-c"
      "mid-r  bot-r"
      "wide-l wide-l";
  }

  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lightbox-prev {
    left: -56px;
  }

  .lightbox-next {
    right: -56px;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 72px 0;
  }

  .navbar-nav {
    display: none;
  }

  .navbar-cta.desktop {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .navbar {
    left: 0;
    right: 0;
    top: 0;
    padding: 0 20px;
    border-radius: 0;
  }

  /* mobile nav open */
  .navbar-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    padding: 16px 22px 22px;
    gap: 2px;
    border: none;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    box-shadow: none;
  }

  .navbar-nav.open > a:not(.navbar-cta) {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--text);
    padding: 11px 0;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
  }

  .navbar-nav.open > a:not(.navbar-cta):last-of-type {
    border-bottom: none;
  }

  .navbar-nav.open .navbar-cta {
    display: inline-flex;
    width: fit-content;
    margin: 16px 0 0;
  }

  .hero {
    padding: 110px 0 44px;
  }

  .hero-shell {
    gap: 32px;
  }

  .hero-main {
    gap: 32px;
  }

  .hero-badge {
    margin-bottom: 16px;
  }

  .hero-overline {
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
  }

  .hero h1 {
    font-size: clamp(2.25rem, 9vw, 2.75rem);
    max-width: none;
  }

  .hero-desc {
    font-size: 1.0625rem;
    margin-bottom: 26px;
  }

  .hero-meta {
    gap: 8px 14px;
    margin-bottom: 24px;
  }

  .hero-meta span {
    font-size: 0.82rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 24px;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
  }

  .hero-trust-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    padding-top: 18px;
  }

  .hero-stat {
    padding: 0;
  }

  .hero-stat .stat-value {
    font-size: 1.75rem;
  }

  .product-toolbar {
    align-items: flex-end;
    gap: 12px;
  }

  .product-search {
    width: min(100%, 420px);
  }

  .product-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product-tabs::-webkit-scrollbar {
    display: none;
  }

  .product-tab {
    padding: 8px 16px;
    font-size: 0.8125rem;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .product-card-body {
    padding: 9px 12px 12px;
  }

  .product-card-copy {
    gap: 6px;
  }

  .product-series-name {
    font-size: 0.9375rem;
  }

  .product-card-view-pill {
    letter-spacing: -0.005em;
  }

  .product-card-action {
    font-size: 0.8125rem;
  }

  .app-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 200px);
    grid-template-areas:
      "tall"
      "wide-r"
      "mid-c"
      "mid-r"
      "wide-l"
      "bot-r";
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .client-card {
    padding: 12px 8px;
  }

  .client-logo-wrap {
    height: 104px;
  }

  .client-logo-img {
    max-width: 100%;
    max-height: 72px;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .lightbox-prev {
    left: 12px;
  }

  .lightbox-next {
    right: 12px;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
  }

  .lightbox-img {
    max-height: 360px;
  }
}

@media (max-width: 540px) {
  .product-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .product-search {
    width: 100%;
  }

  .product-count {
    text-align: right;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .client-card {
    padding: 10px 6px;
  }

  .client-logo-wrap {
    height: 92px;
  }

  .client-logo-img {
    max-width: 100%;
    max-height: 64px;
  }
}

@media (max-width: 375px) {
  .container {
    padding: 0 16px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-overline {
    letter-spacing: 0.01em;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }
}

/* ===== FEATURED PRODUCT MOSAIC ===== */
.products .section-header {
  margin-bottom: 42px;
}

.products .container {
  max-width: 1400px;
  padding-left: 22px;
  padding-right: 22px;
}

.product-showcase-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(280px, 1fr));
  gap: 14px;
}

.product-showcase-card {
  min-height: 280px;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: none;
  background: var(--bg);
}

.product-showcase-card-1 {
  grid-column: span 2;
}

.product-showcase-card-3 {
  grid-column: 4;
  grid-row: 1 / span 2;
}

.product-showcase-card .product-card-trigger {
  display: block;
  overflow: hidden;
}

.product-showcase-card .product-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: inherit;
  background: var(--bg);
}

/* One soft top scrim so the dark caption stays readable over any product shot. */
.product-showcase-card .product-card-image::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 55%;
  z-index: 1;
  opacity: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.product-showcase-card .product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

.product-showcase-card-3 .product-card-image img {
  object-position: 51% center;
}

.product-showcase-card:hover,
.product-showcase-card:focus-within {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.product-showcase-card:hover .product-card-image img,
.product-showcase-card:focus-within .product-card-image img {
  transform: scale(1.055);
  filter: contrast(1.02);
}

.product-showcase-card .product-card-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 4px rgba(0, 113, 227, 0.35);
  border-radius: inherit;
}

.product-showcase-copy {
  position: absolute;
  z-index: 3;
  top: 32px;
  left: 34px;
  right: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.product-showcase-copy .product-series-name {
  color: var(--text);
  font-size: clamp(1.25rem, 1.5vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  text-shadow: none;
}

/* The accent rule is the one flourish kept — it stands in for a link chevron. */
.product-series-rule {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.product-showcase-card:hover .product-series-rule,
.product-showcase-card:focus-within .product-series-rule {
  width: 40px;
}

.product-showcase-arrow {
  position: absolute;
  z-index: 3;
  left: 34px;
  bottom: 30px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.product-showcase-arrow svg {
  width: 16px;
  height: 16px;
}

.product-showcase-card:hover .product-showcase-arrow,
.product-showcase-card:focus-within .product-showcase-arrow {
  color: #fff;
  background: var(--accent);
  transform: translateX(3px);
}

.product-showcase-more {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.product-showcase-more-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 26px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.22);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.product-showcase-more-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--ease);
}

.product-showcase-more-link:hover,
.product-showcase-more-link:focus-visible {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 113, 227, 0.32);
}

.product-showcase-more-link:active {
  transform: scale(0.975);
}

.product-showcase-more-link:hover svg,
.product-showcase-more-link:focus-visible svg {
  transform: translateX(3px);
}

.product-showcase-more-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.24);
}

@media (max-width: 1024px) {
  .product-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(250px, 1fr));
  }

  .product-showcase-card-1,
  .product-showcase-card-3 {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .products .section-header {
    margin-bottom: 30px;
  }

  .product-showcase-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 10px;
  }

  .product-showcase-card {
    min-height: 235px;
  }

  .product-showcase-copy {
    top: 26px;
    left: 26px;
  }

  .product-showcase-arrow {
    left: 26px;
    bottom: 24px;
  }

  .product-showcase-more {
    margin-top: 26px;
  }

  .product-showcase-more-link {
    width: 100%;
    min-height: 48px;
  }
}

/* ===== REFINED CLIENT LOGO GRID ===== */
.clients-grid {
  gap: 14px;
}

.client-card {
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.client-logo-wrap {
  width: 100%;
  height: 86px;
  overflow: hidden;
}

.client-logo-img {
  width: 158px;
  height: 158px;
  max-width: none;
  max-height: none;
  flex: 0 0 auto;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
}

.client-card:hover {
  background: transparent;
  box-shadow: none;
}

.client-card:hover .client-logo-img {
  transform: scale(1.035);
}

@media (max-width: 768px) {
  .clients-grid {
    gap: 10px;
  }

  .client-card {
    min-height: 102px;
    padding: 10px 12px;
  }

  .client-logo-wrap {
    height: 78px;
  }

  .client-logo-img {
    width: 142px;
    height: 142px;
  }
}

/* ===== COMPREHENSIVE MOBILE EXPERIENCE ===== */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 68px;
  }

  body.menu-open {
    overflow: hidden;
  }

  a,
  button {
    touch-action: manipulation;
  }

  .container,
  .products .container {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .section {
    padding: 58px 0;
  }

  .section-header,
  .products .section-header {
    margin-bottom: 34px;
  }

  .section-label {
    margin-bottom: 8px;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
  }

  .section-title {
    margin-bottom: 12px;
    font-size: clamp(1.875rem, 8vw, 2.375rem);
  }

  .section-subtitle {
    font-size: 1rem;
    line-height: 1.5;
  }

  .navbar {
    padding: 0 14px;
  }

  .navbar-inner {
    height: 72px;
  }

  .logo-img,
  .navbar.scrolled .logo-img {
    height: 64px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 10px;
  }

  .menu-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.22);
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .navbar-nav.open {
    max-height: calc(100svh - 72px);
    padding: 10px 18px 18px;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .navbar-nav.open > a:not(.navbar-cta) {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 11px 4px;
    border-bottom: 1px solid var(--border-light);
  }

  .navbar-nav.open > a:not(.navbar-cta)::before,
  .navbar-nav.open > a:not(.navbar-cta)::after {
    display: none;
  }

  .navbar-nav.open .navbar-cta {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    margin-top: 12px;
  }

  .hero {
    min-height: auto;
    padding: 106px 0 46px;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .hero-bg img {
    object-position: 62% center;
  }

  .hero-bg::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.66) 70%, rgba(0, 0, 0, 0.5) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.42));
  }

  .hero-shell {
    gap: 26px;
  }

  .hero-badge {
    padding: 6px 12px;
    margin-bottom: 14px;
  }

  .hero-overline {
    margin-bottom: 12px;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
  }

  .hero h1 {
    margin-bottom: 16px;
    font-size: clamp(2.1rem, 10vw, 2.8rem);
    line-height: 1.12;
  }

  .hero-desc {
    margin-bottom: 22px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
  }

  .btn-primary,
  .btn-outline {
    min-height: 48px;
    padding: 11px 16px;
    font-size: 0.9375rem;
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding-top: 18px;
  }

  .hero-stat,
  .hero-stat:not(:last-child) {
    min-width: 0;
    margin: 0;
    padding: 14px !important;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: var(--radius-md);
  }

  .hero-stat .stat-value {
    margin-bottom: 6px;
    font-size: clamp(1.45rem, 7vw, 1.8rem);
  }

  .hero-stat .stat-label {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .product-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 8px;
  }

  .product-showcase-card,
  .product-showcase-card-1,
  .product-showcase-card-3 {
    min-width: 0;
    min-height: 190px;
    grid-column: auto;
    grid-row: auto;
  }

  .product-showcase-copy {
    top: 20px;
    right: 20px;
    left: 20px;
    gap: 5px;
  }

  .product-showcase-copy .product-series-name {
    font-size: 1.0625rem;
  }

  .product-series-rule {
    width: 20px;
  }

  .product-showcase-arrow {
    left: 20px;
    bottom: 18px;
    width: 36px;
    height: 36px;
  }

  .app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas: none;
    gap: 9px;
  }

  .app-bento-card,
  .bento-tall-left,
  .bento-wide-right,
  .bento-mid-center,
  .bento-mid-right,
  .bento-wide-left,
  .bento-bottom-right {
    min-width: 0;
    min-height: 190px;
    grid-area: auto;
    border-radius: var(--radius-lg);
  }

  .app-grid .app-bento-content,
  .app-grid .bento-tall-left .app-bento-content,
  .app-grid .bento-wide-right .app-bento-content,
  .app-grid .bento-wide-left .app-bento-content {
    padding: 17px;
  }

  .app-grid .app-bento-content h3,
  .app-grid .bento-tall-left .app-bento-content h3,
  .app-grid .bento-wide-right .app-bento-content h3,
  .app-grid .bento-wide-left .app-bento-content h3 {
    margin-bottom: 4px;
    font-size: 1.125rem;
    letter-spacing: -0.024em;
  }

  .app-bento-en {
    margin-bottom: 4px;
    font-size: 0.75rem;
    letter-spacing: 0;
  }

  .app-grid .app-bento-content p {
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }

  .client-card {
    min-width: 0;
    min-height: 94px;
    padding: 7px;
  }

  .client-logo-wrap {
    height: 76px;
  }

  .client-logo-img {
    width: 136px;
    height: 136px;
  }

  .news-grid {
    gap: 14px;
  }

  .news-card {
    border-radius: var(--radius-lg);
  }

  .news-img {
    height: 150px;
  }

  .news-body {
    padding: 18px;
  }

  .news-meta {
    margin-bottom: 9px;
  }

  .news-card h3 {
    font-size: 1.0625rem;
  }

  .news-read-more {
    min-height: 40px;
    margin-top: 10px;
  }

  .footer {
    padding-top: 48px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
    padding-bottom: 36px;
  }

  .footer-brand,
  .footer-col:last-child {
    grid-column: 1 / -1;
  }

  .footer-logo-img {
    width: 176px;
    height: auto;
  }

  .footer-brand p {
    max-width: 100%;
  }

  .footer-col h4 {
    margin-bottom: 12px;
  }

  .footer-col a {
    min-height: 40px;
    padding: 8px 0;
  }

  .footer-contact-item {
    margin-bottom: 12px;
  }

  .footer-contact-item span {
    overflow-wrap: anywhere;
  }

  .footer-bottom {
    padding: 20px 0;
    line-height: 1.7;
  }

  .product-lightbox {
    padding: 12px;
  }

  .lightbox-content {
    width: 100%;
    max-height: calc(100svh - 24px);
  }

  .lightbox-image-wrap {
    border-radius: var(--radius-md);
  }

  .lightbox-img {
    max-height: 58svh;
  }

  .lightbox-close,
  .lightbox-nav {
    width: 44px;
    height: 44px;
  }

  .lightbox-info {
    padding-top: 12px;
  }

  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .container,
  .products .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section {
    padding: 52px 0;
  }

  .section-header,
  .products .section-header {
    margin-bottom: 28px;
  }

  .hero {
    padding-top: 100px;
  }

  .hero h1 {
    font-size: 2.05rem;
  }

  .hero-actions {
    grid-template-columns: 1fr;
  }

  .hero-stat,
  .hero-stat:not(:last-child) {
    padding: 12px !important;
  }

  .hero-stat .stat-value {
    font-size: 1.48rem;
  }

  .product-showcase-grid {
    grid-template-columns: 1fr;
  }

  .product-showcase-card,
  .product-showcase-card-1,
  .product-showcase-card-3 {
    min-height: 195px;
  }

  .app-grid {
    grid-template-columns: 1fr;
  }

  .app-bento-card,
  .bento-tall-left,
  .bento-wide-right,
  .bento-mid-center,
  .bento-mid-right,
  .bento-wide-left,
  .bento-bottom-right {
    min-height: 195px;
  }

  .footer-grid {
    gap: 26px 16px;
  }
}

@media (max-width: 360px) {
  .hero-stats {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand,
  .footer-col:last-child {
    grid-column: auto;
  }
}

@media (hover: none) and (pointer: coarse) {
  .product-card:hover,
  .app-bento-card:hover,
  .news-card:hover,
  .client-card:hover .client-logo-img,
  .why-point:hover,
  .why-hero-media:hover img {
    transform: none;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .hero-badge .pulse {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* ===== FINAL MOBILE POLISH ===== */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 768px) {
  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .navbar {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .navbar-inner {
    width: 100%;
    min-width: 0;
  }

  .navbar-logo {
    min-width: 0;
    max-width: calc(100% - 58px);
  }

  .navbar-nav.open {
    max-height: calc(100dvh - 72px);
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    padding-left: max(18px, env(safe-area-inset-left));
  }

  .hero-copy,
  .hero-actions,
  .hero-stats,
  .product-showcase-grid,
  .why-hero,
  .why-points,
  .app-grid,
  .cert-stats,
  .clients-grid,
  .news-grid,
  .footer-grid {
    min-width: 0;
  }

  .hero h1,
  .section-title,
  .news-card h3,
  .footer-contact-item span {
    overflow-wrap: anywhere;
  }

  .hero-actions a,
  .product-showcase-more-link,
  .news-read-more {
    min-height: 44px;
  }

  .product-showcase-card,
  .app-bento-card,
  .news-card {
    -webkit-tap-highlight-color: transparent;
  }

  .product-showcase-card:active,
  .app-bento-card:active,
  .news-card:active {
    transform: scale(.99);
  }

  .clients-grid {
    align-items: center;
  }

  .client-logo-img {
    object-fit: contain;
  }

  .footer-bottom {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    overflow-wrap: anywhere;
  }
}

@media (max-width: 540px) {
  .section {
    padding: 48px 0;
  }

  .hero {
    padding-bottom: 38px;
  }

  .hero-actions {
    grid-template-columns: 1fr;
  }

  .product-showcase-grid,
  .app-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .product-showcase-card,
  .product-showcase-card-1,
  .product-showcase-card-3,
  .app-bento-card,
  .bento-tall-left,
  .bento-wide-right,
  .bento-mid-center,
  .bento-mid-right,
  .bento-wide-left,
  .bento-bottom-right {
    min-height: 220px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand,
  .footer-col:last-child {
    grid-column: auto;
  }

  .footer-col a {
    min-height: 42px;
  }
}

@media (max-width: 390px) {
  .container,
  .products .container {
    padding-right: 14px;
    padding-left: 14px;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  .hero-stats {
    gap: 8px;
  }

  .clients-grid {
    gap: 8px;
  }
}