/* ==========================================================================
   Sinar Streamline — Compiled CSS
   Design System v2.0 — Enterprise Refactor
   ========================================================================== */

/* ---------- CSS Custom Properties (Design Tokens) ---------- */
:root {
  /* Brand Colors */
  --brand:         oklch(0.62 0.17 240);
  --brand-deep:    oklch(0.5 0.16 253);
  --brand-soft:    oklch(0.95 0.03 235);
  --accent-green:  oklch(0.72 0.17 162);

  /* Semantic Color Tokens */
  --background:            oklch(0.99 0.008 235);
  --foreground:            oklch(0.18 0.02 250);
  --card:                  oklch(1 0 0);
  --card-foreground:       oklch(0.18 0.02 250);
  --popover:               oklch(1 0 0);
  --popover-foreground:    oklch(0.18 0.02 250);
  --primary:               oklch(0.62 0.17 240);
  --primary-foreground:    oklch(1 0 0);
  --secondary:             oklch(0.96 0.02 235);
  --secondary-foreground:  oklch(0.5 0.16 253);
  --muted:                 oklch(0.97 0.01 235);
  --muted-foreground:      oklch(0.5 0.03 250);
  --accent:                oklch(0.72 0.17 162);
  --accent-foreground:     oklch(1 0 0);
  --destructive:           oklch(0.6 0.24 27);
  --destructive-foreground:oklch(1 0 0);
  --border:                oklch(0.92 0.015 235);
  --input:                 oklch(0.92 0.015 235);
  --ring:                  oklch(0.62 0.17 240);

  /* Color Aliases (backward-compat) */
  --color-background:        var(--background);
  --color-foreground:        var(--foreground);
  --color-card:              var(--card);
  --color-card-foreground:   var(--card-foreground);
  --color-popover:           var(--popover);
  --color-popover-foreground:var(--popover-foreground);
  --color-primary:           var(--primary);
  --color-primary-foreground:var(--primary-foreground);
  --color-secondary:         var(--secondary);
  --color-secondary-foreground:var(--secondary-foreground);
  --color-muted:             var(--muted);
  --color-muted-foreground:  var(--muted-foreground);
  --color-accent:            var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive:       var(--destructive);
  --color-destructive-foreground:var(--destructive-foreground);
  --color-border:            var(--border);
  --color-input:             var(--input);
  --color-ring:              var(--ring);
  --color-brand:             var(--brand);
  --color-brand-deep:        var(--brand-deep);
  --color-brand-soft:        var(--brand-soft);

  /* Typography */
  --font-sans:    "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  /* ── Design System Typography Scale ── */
  --type-hero:    clamp(2.25rem, 5vw, 3.75rem);    /* 36px → 60px */
  --type-h2:      clamp(1.875rem, 3.5vw, 3rem);    /* 30px → 48px */
  --type-h3:      clamp(1.25rem, 2vw, 1.5rem);     /* 20px → 24px */
  --type-lead:    clamp(1rem, 1.5vw, 1.125rem);    /* 16px → 18px */
  --type-body:    clamp(0.9375rem, 1.2vw, 1rem);   /* 15px → 16px */
  --type-caption: 0.875rem;                        /* 14px */
  --type-label:   0.75rem;                         /* 12px */
  --type-btn:     0.9375rem;                       /* 15px */
  --type-badge:   0.75rem;                         /* 12px */

  /* ── Design System Border Radius ── */
  --radius:      0.625rem;          /* backward-compat */
  --radius-sm:   0.5rem;            /* 8px  — inputs, chips */
  --radius-md:   0.625rem;          /* 10px — buttons */
  --radius-lg:   0.875rem;          /* 14px — cards, modals */
  --radius-xl:   1.25rem;           /* 20px — panels, CTA block */
  --radius-full: 9999px;            /* badges, avatars */

  /* ── Design System Shadows ── */
  --shadow-soft:  0 8px 24px -8px oklch(0.5 0.15 240 / 0.12);
  --shadow-glass: 0 16px 48px -16px oklch(0.4 0.15 240 / 0.22);
  --shadow-lift:  0 24px 64px -16px oklch(0.4 0.15 240 / 0.32);
  --shadow-hero:  0 40px 80px -24px oklch(0.4 0.15 240 / 0.5);

  /* Legacy shadows (keep for backward-compat) */
  --shadow-glass-legacy: 0 20px 60px -20px oklch(0.4 0.15 240 / 0.25);

  /* ── Design System Icon Sizes ── */
  --icon-sm: 2.5rem;    /* 40px */
  --icon-md: 3rem;      /* 48px */
  --icon-lg: 3.5rem;    /* 56px */
  --icon-xl: 4rem;      /* 64px */

  /* ── Section Spacing ── */
  --section-py: 5rem;   /* 80px base — overridden at breakpoints */

  /* ══════════════════════════════════════════════════════════════════
     MOBILE-FIRST DESIGN TOKENS
     Base values below are the MOBILE design. Every min-width media
     query further down scales them UP. Never author a max-width
     override — change the base instead.
     ══════════════════════════════════════════════════════════════════ */

  /* Type scale — fluid between 320px and 430px, then stepped */
  --fs-hero:    clamp(1.75rem, 8.5vw, 2.25rem);   /* 28 → 36px */
  --fs-h2:      clamp(1.6875rem, 7.2vw, 1.875rem);/* 27 → 30px */
  --fs-h3:      1.25rem;                          /* 20px */
  --fs-lead:    1.0625rem;                        /* 17px */
  --fs-body:    1rem;                             /* 16px */
  --fs-caption: 0.8125rem;                        /* 13px */
  --fs-eyebrow: 0.75rem;                          /* 12px */
  --fs-btn-m:   1rem;                             /* 16px — never lower, iOS zoom */

  /* Line heights */
  --lh-hero:  1.2;
  --lh-h2:    1.25;
  --lh-h3:    1.35;
  --lh-body:  1.65;

  /* Spacing rhythm */
  --sec-py:       3.5rem;   /* 56px  section padding */
  --container-px: 1.25rem;  /* 20px  gutter */
  --card-p:       1.25rem;  /* 20px  card padding */
  --card-gap:     1rem;     /* 16px  gap between cards */
  --stack-gap:    0.75rem;  /* 12px  gap between stacked buttons */
  --head-gap:     2.5rem;   /* 40px  section header → content */

  /* Component sizing */
  --icon-tile:  2.75rem;   /* 44px  card icon tile */
  --tap-min:    3rem;      /* 48px  minimum touch target */
  --avatar:     2.25rem;   /* 36px  trust-row avatars */
  --fs-card:    1rem;      /* 16px  body copy inside cards */

  /* ── Motion System ──
     One easing curve for the whole site. Durations sit inside 180–440ms:
     long enough to read as motion, short enough that nothing feels delayed.
     Redefining these four tokens retunes every `transition:` in the sheet. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:   180ms var(--ease-out);
  --t-medium: 260ms var(--ease-out);
  --t-slow:   420ms var(--ease-out);
  --t-spring: 250ms var(--ease-out);
  --t-reveal: 440ms;  /* scroll-reveal only; easing applied at the call site */
}

/* Section spacing responsive scale */
@media (min-width: 768px)  { :root { --section-py: 6rem;   } }  /* 96px */
@media (min-width: 1024px) { :root { --section-py: 7.5rem; } }  /* 120px */

/* ── Mobile-first token scale-up ──────────────────────────────────── */

/* Large phones — a little more breathing room once we clear 400px */
@media (min-width: 400px) {
  :root {
    --container-px: 1.5rem;   /* 24px */
    --card-p:       1.375rem; /* 22px */
  }
}

/* Small tablets / large phones landscape */
@media (min-width: 640px) {
  :root {
    --sec-py:       4.5rem;   /* 72px */
    --card-gap:     1.25rem;  /* 20px */
    --head-gap:     3rem;     /* 48px */
    --card-p:       1.5rem;   /* 24px */
    --icon-tile:    3rem;     /* 48px */
  }
}

/* Tablet */
@media (min-width: 768px) {
  :root {
    --fs-hero:    2.75rem;    /* 44px */
    --fs-h2:      2.25rem;    /* 36px */
    --fs-h3:      1.3125rem;  /* 21px */
    --fs-lead:    1.125rem;   /* 18px */
    --sec-py:     5rem;       /* 80px */
    --container-px: 2rem;     /* 32px */
    --avatar:     2.5rem;     /* 40px */
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --fs-hero:      3.25rem;   /* 52px */
    --fs-h2:        2.75rem;   /* 44px */
    --fs-h3:        1.5rem;    /* 24px */
    --fs-body:      1.0625rem; /* 17px */
    --fs-lead:      1.1875rem; /* 19px */
    --fs-caption:   0.875rem;  /* 14px */
    --fs-btn-m:     0.9375rem; /* 15px — desktop pointer, no iOS zoom risk */
    --sec-py:       7.5rem;    /* 120px */
    --container-px: 2.5rem;    /* 40px */
    --card-p:       1.75rem;   /* 28px */
    --card-gap:     1.5rem;    /* 24px */
    --head-gap:     4rem;      /* 64px */
    --icon-tile:    3.5rem;    /* 56px */
    --fs-card:      0.9375rem; /* 15px — cards are narrow in 3/4-up grids */
  }
}

/* Wide desktop — the headline gets its full presence back */
@media (min-width: 1280px) {
  :root {
    --fs-hero: 3.75rem;  /* 60px */
    --fs-h2:   3rem;     /* 48px */
    --fs-lead: 1.25rem;  /* 20px */
  }
}

/* ---------- Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--color-border);
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  /* Safety net against horizontal scroll from decorative overflow.
     `clip` (not `hidden`) so it does not become a scroll container. */
  overflow-x: clip;
  /* Belt-and-braces with scroll-margin-top below: covers focus-driven and
     browser-initiated scrolls that ignore an element's scroll-margin. */
  scroll-padding-top: 5.5rem;
}
/* Opt in rather than opting out later — an unconditional `smooth` also
   hijacks focus jumps and in-page search for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Anchor links must clear the fixed header */
:target { scroll-margin-top: 5.5rem; }
[id] { scroll-margin-top: 5.5rem; }
@media (min-width: 1024px) {
  html { scroll-padding-top: 6.5rem; }
  [id] { scroll-margin-top: 6.5rem; }
}
body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  line-height: inherit;
}
::selection { background: var(--brand); color: white; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
/* sinar_image() wraps images in <picture>. `display: contents` removes the
   wrapper from the box tree so every `.tile img` / `.hero__figure img` rule
   in this sheet keeps matching, and flex/grid parents are unaffected. */
picture { display: contents; }
a { color: inherit; text-decoration: inherit; }
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  font-family: var(--font-display);
}
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* ---------- Custom Utilities ---------- */
.glass-card {
  background: color-mix(in oklab, white 70%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: var(--shadow-glass);
}
.glass-dark {
  background: color-mix(in oklab, var(--brand-deep) 30%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in oklab, white 20%, transparent);
}
.gradient-brand {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
}
.gradient-hero {
  background: linear-gradient(135deg, oklch(0.5 0.16 253) 0%, oklch(0.62 0.17 240) 50%, oklch(0.72 0.17 200) 100%);
}
.text-gradient {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Keyframes ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes float-slow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -12px, 0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
/* Capped at 1.45 — at 1.8 the WhatsApp FAB halo pushed past the right
   viewport edge on 320–375px screens and created horizontal scroll. */
@keyframes pulse-ring {
  0%   { transform: scale3d(0.9, 0.9, 1); opacity: 1; }
  100% { transform: scale3d(1.45, 1.45, 1); opacity: 0; }
}
@keyframes pulse { 50% { opacity: .5; } }

.animate-fade-up   { animation: fade-up 440ms var(--ease-out) both; }
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2s var(--ease-out) infinite; }
.animate-pulse      { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ---------- Layout ---------- */
.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed     { position: fixed; }
.inset-0   { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-0  { top: 0; }
.top-6  { top: 1.5rem; }
.top-10 { top: 2.5rem; }
.-top-0\.5 { top: -0.125rem; }
.-top-6    { top: -1.5rem; }
.-top-24   { top: -6rem; }
.-top-40   { top: -10rem; }
.right-6    { right: 1.5rem; }
.-right-0\.5 { right: -0.125rem; }
.-right-4   { right: -1rem; }
.-right-16  { right: -4rem; }
.-right-24  { right: -6rem; }
.-right-40  { right: -10rem; }
.bottom-4   { bottom: 1rem; }
.bottom-6   { bottom: 1.5rem; }
.-bottom-8  { bottom: -2rem; }
.-bottom-24 { bottom: -6rem; }
.-bottom-40 { bottom: -10rem; }
.left-4   { left: 1rem; }
.left-6   { left: 1.5rem; }
.-left-4  { left: -1rem; }
.-left-6  { left: -1.5rem; }
.-left-16 { left: -4rem; }
.-left-24 { left: -6rem; }
.-left-40 { left: -10rem; }
.left-\[10\%\]  { left: 10%; }
.right-\[10\%\] { right: 10%; }
.z-40        { z-index: 40; }
.z-50        { z-index: 50; }
.z-\[100\]   { z-index: 100; }
.-z-10       { z-index: -10; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }

/* ---------- Display ---------- */
.block       { display: block; }
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
/* `!important` because this is purely a JS toggle now, and component rules
   later in the file (.form-note{display:flex}) would otherwise win on
   source order and leave hidden elements visible. */
.hidden      { display: none !important; }

/* ---------- Flexbox ---------- */
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.flex-1     { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.shrink-0 { flex-shrink: 0; }

/* ---------- Gap ---------- */
.gap-1   { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-10  { gap: 2.5rem; }
.gap-12  { gap: 3rem; }
.gap-14  { gap: 3.5rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* ---------- Space ---------- */
.-space-x-3 > :not(:first-child) { margin-left: -0.75rem; }
.space-y-1  > :not(:first-child) { margin-top: 0.25rem; }
.space-y-3  > :not(:first-child) { margin-top: 0.75rem; }
.space-y-4  > :not(:first-child) { margin-top: 1rem; }
.space-y-5  > :not(:first-child) { margin-top: 1.25rem; }

/* ---------- Grid ---------- */
.grid-cols-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.place-items-center { place-items: center; }

/* ---------- Columns (Masonry) ---------- */
.columns-1 { columns: 1; }

/* ---------- Sizing ---------- */
.h-1    { height: 0.25rem; }
.h-2    { height: 0.5rem; }
.h-2\.5 { height: 0.625rem; }
.h-3\.5 { height: 0.875rem; }
.h-4    { height: 1rem; }
.h-5    { height: 1.25rem; }
.h-6    { height: 1.5rem; }
.h-7    { height: 1.75rem; }
.h-9    { height: 2.25rem; }
.h-10   { height: 2.5rem; }
.h-11   { height: 2.75rem; }
.h-12   { height: 3rem; }
.h-14   { height: 3.5rem; }
.h-16   { height: 4rem; }
.h-20   { height: 5rem; }
.h-24   { height: 6rem; }
.h-32   { height: 8rem; }
.h-48   { height: 12rem; }
.h-64   { height: 16rem; }
.h-72   { height: 18rem; }
.h-px   { height: 1px; }
.h-full { height: 100%; }
.h-\[520px\] { height: 520px; }
.h-\[560px\] { height: 560px; }
.h-\[600px\] { height: 600px; }
.h-\[500px\] { height: 500px; }

.w-2    { width: 0.5rem; }
.w-2\.5 { width: 0.625rem; }
.w-3\.5 { width: 0.875rem; }
.w-4    { width: 1rem; }
.w-5    { width: 1.25rem; }
.w-6    { width: 1.5rem; }
.w-7    { width: 1.75rem; }
.w-9    { width: 2.25rem; }
.w-10   { width: 2.5rem; }
.w-11   { width: 2.75rem; }
.w-12   { width: 3rem; }
.w-14   { width: 3.5rem; }
.w-16   { width: 4rem; }
.w-48   { width: 12rem; }
.w-72   { width: 18rem; }
.w-full { width: 100%; }
.w-\[600px\] { width: 600px; }
.w-\[500px\] { width: 500px; }

.min-h-screen { min-height: 100vh; }

.max-w-md       { max-width: 28rem; }
.max-w-sm       { max-width: 24rem; }
.max-w-lg       { max-width: 32rem; }
.max-w-xl       { max-width: 36rem; }
.max-w-2xl      { max-width: 42rem; }
.max-w-\[240px\] { max-width: 240px; }
.max-w-\[1280px\]{ max-width: 1280px; }
.max-w-\[560px\] { max-width: 560px; }
.max-h-\[85vh\]  { max-height: 85vh; }
.max-w-\[92vw\]  { max-width: 92vw; }

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }

/* ---------- Spacing ---------- */
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2rem;    padding-right: 2rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2    { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3    { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-4    { padding-top: 1rem;     padding-bottom: 1rem; }
.py-14   { padding-top: 3.5rem;   padding-bottom: 3.5rem; }
.py-16   { padding-top: 4rem;     padding-bottom: 4rem; }
.py-20   { padding-top: 5rem;     padding-bottom: 5rem; }
.py-24   { padding-top: 6rem;     padding-bottom: 6rem; }
.pt-6    { padding-top: 1.5rem; }
.pt-8    { padding-top: 2rem; }
.pt-20   { padding-top: 5rem; }
.pt-28   { padding-top: 7rem; }
.pb-6    { padding-bottom: 1.5rem; }
.pb-10   { padding-bottom: 2.5rem; }
.pb-20   { padding-bottom: 5rem; }

.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-7  { margin-top: 1.75rem; }
.mt-8  { margin-top: 2rem; }
.mt-9  { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-16 { margin-top: 4rem; }
.ml-1  { margin-left: 0.25rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Typography ---------- */
.text-\[10px\]  { font-size: 10px; }
.text-\[11px\]  { font-size: 11px; }
.text-\[12px\]  { font-size: 12px; }
.text-\[15px\]  { font-size: 15px; }
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
/* FIXED: text-2xl was incorrectly 1.25rem (same as text-xl). Now corrected. */
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 2.75rem;  line-height: 1.1; }
.text-6xl  { font-size: 3.5rem;   line-height: 1; }
.text-7xl  { font-size: 4rem;     line-height: 1; }
/* FIXED: was labeled [40px] but set to 32px — corrected to 40px */
.text-\[40px\]  { font-size: 2.5rem;  line-height: 1.2; }
/* Hero scale — used via xl: responsive */
.text-\[52px\]  { font-size: 3.25rem; line-height: 1.1; }
.text-\[60px\]  { font-size: 3.75rem; line-height: 1.1; }

.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black     { font-weight: 900; }

.tracking-tight   { letter-spacing: -0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }

.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.05\] { line-height: 1.05; }
.leading-\[1\.15\] { line-height: 1.15; }
.leading-\[1\.4\]  { line-height: 1.4; }

.uppercase   { text-transform: uppercase; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.resize-none { resize: none; }

/* ---------- Colors ---------- */
.text-white            { color: #fff; }
.text-foreground       { color: var(--foreground); }
.text-foreground\/80   { color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.text-foreground\/85   { color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.text-foreground\/70   { color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.text-foreground\/40   { color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.text-foreground\/60   { color: color-mix(in oklab, var(--foreground) 60%, transparent); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary          { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-destructive      { color: var(--destructive); }
.text-\[--color-accent\]       { color: var(--color-accent); }
.text-\[--color-accent-green\] { color: var(--accent-green); }
.text-white\/60  { color: rgba(255,255,255,0.6); }
.text-white\/70  { color: rgba(255,255,255,0.7); }
.text-white\/75  { color: rgba(255,255,255,0.75); }
.text-white\/80  { color: rgba(255,255,255,0.8); }
.text-white\/85  { color: rgba(255,255,255,0.85); }
.text-white\/90  { color: rgba(255,255,255,0.9); }

.bg-white          { background-color: #fff; }
.bg-white\/10      { background-color: rgba(255,255,255,0.1); }
.bg-white\/15      { background-color: rgba(255,255,255,0.15); }
.bg-white\/20      { background-color: rgba(255,255,255,0.2); }
.bg-white\/40      { background-color: rgba(255,255,255,0.4); }
.bg-white\/60      { background-color: rgba(255,255,255,0.6); }
.bg-white\/70      { background-color: rgba(255,255,255,0.7); }
.bg-transparent    { background-color: transparent; }
.bg-background     { background-color: var(--background); }
.bg-primary\/10    { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-primary\/15    { background-color: color-mix(in oklab, var(--primary) 15%, transparent); }
.bg-\[--color-accent\]\/10  { background-color: color-mix(in oklab, var(--color-accent) 10%, transparent); }
.bg-\[--color-accent\]\/15  { background-color: color-mix(in oklab, var(--color-accent) 15%, transparent); }
.bg-\[--color-accent\]      { background-color: var(--color-accent); }
.bg-\[\#25D366\]   { background-color: #25D366; }
.bg-black\/80      { background-color: rgba(0,0,0,0.8); }
.bg-destructive\/10 { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); }
.bg-\[--color-brand-deep\]  { background-color: var(--brand-deep); }
.bg-\[--color-brand-soft\]  { background-color: var(--brand-soft); }

/* ---------- Gradients ---------- */
.bg-gradient-to-b  { background-image: linear-gradient(to bottom,    var(--tw-gradient-stops)); }
.bg-gradient-to-t  { background-image: linear-gradient(to top,       var(--tw-gradient-stops)); }
.bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right,     var(--tw-gradient-stops)); }

.from-\[--color-brand-soft\]      { --tw-gradient-from: var(--brand-soft);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-white                       { --tw-gradient-from: #fff;                --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-transparent                 { --tw-gradient-from: transparent;          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[--color-brand-deep\]\/40  { --tw-gradient-from: color-mix(in oklab, var(--brand-deep) 40%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[--color-brand-deep\]\/70  { --tw-gradient-from: color-mix(in oklab, var(--brand-deep) 70%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-primary                     { --tw-gradient-from: var(--primary);       --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }

.via-background    { --tw-gradient-stops: var(--tw-gradient-from), var(--background), var(--tw-gradient-to, transparent); }
.via-transparent   { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, transparent); }
.via-primary\/40   { --tw-gradient-stops: var(--tw-gradient-from), color-mix(in oklab, var(--primary) 40%, transparent), var(--tw-gradient-to, transparent); }

.to-background             { --tw-gradient-to: var(--background); }
.to-transparent            { --tw-gradient-to: transparent; }
.to-white                  { --tw-gradient-to: #fff; }
.to-\[--color-brand-soft\]\/40 { --tw-gradient-to: color-mix(in oklab, var(--brand-soft) 40%, transparent); }
.to-\[--color-brand-soft\]\/60 { --tw-gradient-to: color-mix(in oklab, var(--brand-soft) 60%, transparent); }
.to-\[--color-accent\]     { --tw-gradient-to: var(--color-accent); }

/* ---------- Borders ---------- */
.border   { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; }
.border-white      { border-color: #fff; }
.border-white\/10  { border-color: rgba(255,255,255,0.1); }
.border-white\/60  { border-color: rgba(255,255,255,0.6); }
.border-white\/70  { border-color: rgba(255,255,255,0.7); }
.border-border     { border-color: var(--border); }
.border-border\/60 { border-color: color-mix(in oklab, var(--border) 60%, transparent); }
.border-input      { border-color: var(--input); }
.border-primary\/30   { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.border-\[--color-accent\]\/30  { border-color: color-mix(in oklab, var(--color-accent) 30%, transparent); }
.border-destructive\/30 { border-color: color-mix(in oklab, var(--destructive) 30%, transparent); }

/* Border Radius — utility aliases using design tokens */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: calc(var(--radius-lg) + 2px); } /* ~16px — kept for backward-compat */
.rounded-2xl  { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.ring-1 { box-shadow: 0 0 0 1px var(--tw-ring-color, var(--ring)); }
.ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color, var(--ring)); }
.ring-white      { --tw-ring-color: #fff; }
.ring-primary\/20 { --tw-ring-color: color-mix(in oklab, var(--primary) 20%, transparent); }

/* ---------- Shadows ---------- */
.shadow    { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

/* ---------- Opacity ---------- */
.opacity-0   { opacity: 0; }
.opacity-10  { opacity: 0.1; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-70  { opacity: 0.7; }
.opacity-75  { opacity: 0.75; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-\[0\.08\] { opacity: 0.08; }

/* ---------- Filters ---------- */
.blur-2xl { filter: blur(40px); }
.blur-3xl { filter: blur(64px); }
.blur-md  { filter: blur(12px); }
.backdrop-blur    { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-sm { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.grayscale        { filter: grayscale(100%); }

/* ---------- Transitions (standardized durations) ---------- */
.transition-all     { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 200ms; }
.transition-colors  { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 200ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 200ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 200ms; }
.duration-300  { transition-duration: 300ms; }
.duration-500  { transition-duration: 500ms; }
.duration-\[900ms\]  { transition-duration: 600ms; }   /* capped at 600 for performance */
.duration-\[1200ms\] { transition-duration: 800ms; }   /* capped at 800 for performance */

/* ---------- Object ---------- */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ---------- Fill ---------- */
.fill-current { fill: currentColor; }

/* ---------- Outline ---------- */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

/* ---------- Cursor ---------- */
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-60:disabled         { opacity: 0.6; }

/* ---------- Hover States ---------- */
.hover\:text-primary:hover    { color: var(--primary); }
.hover\:text-white:hover      { color: #fff; }
.hover\:bg-white\/60:hover    { background-color: rgba(255,255,255,0.6); }
.hover\:bg-white\/70:hover    { background-color: rgba(255,255,255,0.7); }
.hover\:bg-white\/20:hover    { background-color: rgba(255,255,255,0.2); }
.hover\:bg-\[--color-accent\]:hover  { background-color: var(--color-accent); }
.hover\:bg-primary\/90:hover  { background-color: color-mix(in oklab, var(--primary) 90%, transparent); }
.hover\:bg-accent:hover       { background-color: var(--accent); }
.hover\:border-primary\/30:hover { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.hover\:scale-105:hover       { transform: scale(1.05); }
.hover\:scale-110:hover       { transform: scale(1.1); }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.hover\:-translate-y-1:hover  { transform: translateY(-0.25rem); }
.hover\:-translate-y-2:hover  { transform: translateY(-0.5rem); }
.hover\:opacity-100:hover     { opacity: 1; }
.hover\:grayscale-0:hover     { filter: grayscale(0); }

/* ---------- Group Hover ---------- */
.group:hover .group-hover\:opacity-100  { opacity: 1; }
.group:hover .group-hover\:scale-110    { transform: scale(1.1); }
.group:hover .group-hover\:rotate-3    { transform: rotate(3deg); }
.group:hover .group-hover\:scale-110.group-hover\:rotate-3 { transform: scale(1.1) rotate(3deg); }
.group:hover .group-hover\:translate-x-1  { transform: translateX(0.25rem); }
.group:hover .group-hover\:-translate-x-1 { transform: translateX(-0.25rem); }
.group:hover .group-hover\:text-primary\/10 { color: color-mix(in oklab, var(--primary) 10%, transparent); }
.group:hover .group-hover\:gap-3   { gap: 0.75rem; }
.group:hover .group-hover\:w-16    { width: 4rem; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

/* ---------- Focus States ---------- */
.focus\:border-primary:focus  { border-color: var(--primary); }
.focus\:ring-1:focus          { box-shadow: 0 0 0 1px var(--tw-ring-color, var(--ring)); }
.focus\:ring-2:focus          { box-shadow: 0 0 0 2px var(--tw-ring-color, var(--ring)); }
.focus\:ring-primary:focus    {
  --tw-ring-color: var(--primary);
  box-shadow: 0 0 0 1px var(--tw-ring-color);
}
.focus\:ring-primary\/20:focus {
  --tw-ring-color: color-mix(in oklab, var(--primary) 20%, transparent);
  box-shadow: 0 0 0 3px var(--tw-ring-color);
}

/* ---------- Column Fill ---------- */
.\[column-fill\:_balance\] { column-fill: balance; }

/* ============================================================================
   RESTORED UTILITIES
   These classes were referenced in templates but had no definition, so they
   failed silently (missing shadows, zero-width circles, unstyled watermarks).
   ============================================================================ */

/* Sizing */
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-\[2px\] { width: 2px; }
.h-56 { height: 14rem; }

/* Positioning */
.-top-16    { top: -4rem; }
.-bottom-6  { bottom: -1.5rem; }
.-right-0   { right: 0; }
.right-4    { right: 1rem; }
.bottom-10  { bottom: 2.5rem; }
.left-1\/2  { left: 50%; }
.z-0        { z-index: 0; }
.z-10       { z-index: 10; }
.-translate-x-1\/2 { transform: translateX(-50%); }

/* Colors */
.bg-white\/5   { background-color: rgba(255,255,255,0.05); }
.bg-white\/80  { background-color: rgba(255,255,255,0.8); }
.bg-\[--color-accent\]\/20 { background-color: color-mix(in oklab, var(--color-accent) 20%, transparent); }
.border-white\/40 { border-color: rgba(255,255,255,0.4); }
.from-\[--color-brand-soft\]\/60 { --tw-gradient-from: color-mix(in oklab, var(--brand-soft) 60%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.text-foreground\/90 { color: color-mix(in oklab, var(--foreground) 90%, transparent); }
.text-primary\/5     { color: color-mix(in oklab, var(--primary) 5%, transparent); }

/* Spacing */
.mt-0\.5 { margin-top: 0.125rem; }
.mt-4    { margin-top: 1rem; }
.mt-12   { margin-top: 3rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-10   { margin-bottom: 2.5rem; }
.pt-32   { padding-top: 8rem; }
.pb-24   { padding-bottom: 6rem; }

/* Typography */
.text-9xl { font-size: 6rem; line-height: 1; }
.tracking-normal { letter-spacing: 0; }

/* Misc */
.cursor-pointer { cursor: pointer; }
.transition {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
  transition-duration: 200ms;
}

/* ---------- Named Brand Shadows ----------
   Replaces the 12 arbitrary shadow-[…] values that were never defined.
   One vocabulary, used everywhere. */
.shadow-brand-sm { box-shadow: 0 8px 20px -6px oklch(0.5 0.16 240 / 0.45); }
.shadow-brand-md { box-shadow: 0 15px 30px -10px oklch(0.5 0.16 240 / 0.45); }
.shadow-brand-lg { box-shadow: 0 24px 50px -18px oklch(0.45 0.15 240 / 0.45); }
.shadow-brand-xl { box-shadow: 0 40px 80px -30px oklch(0.42 0.15 240 / 0.55); }
.shadow-green    { box-shadow: 0 15px 35px -10px rgba(37, 211, 102, 0.55); }
.shadow-ink      { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25); }

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   sm: 640px  |  md: 768px  |  lg: 1024px  |  xl: 1280px
   ============================================================================ */

/* --- sm (≥640px) --- */
@media (min-width: 640px) {
  .sm\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:columns-2     { columns: 2; }
  .sm\:text-lg       { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-4xl      { font-size: 2.25rem;  line-height: 2.5rem; }
  .sm\:text-5xl      { font-size: 2.75rem;  line-height: 1.1; }
  .sm\:p-8           { padding: 2rem; }
  .sm\:px-14         { padding-left: 3.5rem; padding-right: 3.5rem; }
  .sm\:py-20         { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:flex          { display: flex; }
  .sm\:h-80          { height: 20rem; }
}

/* --- md (≥768px) --- */
@media (min-width: 768px) {
  .md\:flex-row      { flex-direction: row; }
  .md\:text-left     { text-align: left; }
  .md\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- lg (≥1024px) --- */
@media (min-width: 1024px) {
  .lg\:flex               { display: flex; }
  .lg\:hidden             { display: none; }
  .lg\:block              { display: block; }
  .lg\:grid-cols-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4        { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-6        { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1\.05fr_1fr\]     { grid-template-columns: 1.05fr 1fr; }
  .lg\:grid-cols-\[1fr_1\.15fr\]     { grid-template-columns: 1fr 1.15fr; }
  .lg\:grid-cols-\[1\.4fr_1fr_1fr_1\.2fr\] { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .lg\:columns-3     { columns: 3; }
  .lg\:gap-10        { gap: 2.5rem; }
  .lg\:gap-16        { gap: 4rem; }
  .lg\:px-10         { padding-left: 2.5rem; padding-right: 2.5rem; }
  .lg\:py-32         { padding-top: 8rem; padding-bottom: 8rem; }
  .lg\:pt-32         { padding-top: 8rem; }
  .lg\:text-5xl      { font-size: 3rem; line-height: 1.1; }
  .lg\:text-6xl      { font-size: 3.5rem; line-height: 1.1; }
  .lg\:text-xl       { font-size: 1.25rem; line-height: 1.75rem; }
  .lg\:-right-8      { right: -2rem; }
  .lg\:h-\[400px\]   { height: 25rem; }
  .lg\:min-h-\[520px\] { min-height: 520px; }
}

/* --- xl (≥1280px) --- */
@media (min-width: 1280px) {
  .xl\:text-\[52px\] { font-size: 3.25rem; line-height: 1.1; }
  .xl\:text-\[60px\] { font-size: 3.75rem; line-height: 1.1; }
  .xl\:block         { display: block; }
}

/* ---------- WordPress-specific resets ---------- */
.wp-block-separator { border-color: var(--border); }
.entry-content > *:not(.alignwide):not(.alignfull) { max-width: 1280px; margin-left: auto; margin-right: auto; }

/* ---------- 404 & Search Results ---------- */
.sinar-page-content { padding: 6rem 1.5rem; max-width: 1280px; margin: 0 auto; min-height: 60vh; }

/* ---------- Blog / Archive Layout ---------- */
.sinar-posts-grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .sinar-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .sinar-posts-grid { grid-template-columns: repeat(3, 1fr); } }
.sinar-post-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform var(--t-medium), box-shadow var(--t-medium);
}
.sinar-post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(11,125,216,0.2); }
.sinar-post-card img { width: 100%; height: 200px; object-fit: cover; }
.sinar-post-card-body { padding: 1.5rem; }
.sinar-post-card-body h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.5rem; }
.sinar-post-card-body h2 a { color: var(--foreground); }
.sinar-post-card-body h2 a:hover { color: var(--primary); }
.sinar-post-card-body .excerpt { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.625; }
.sinar-post-card-body .meta    { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 1rem; }

/* Single post */
.sinar-single-content { max-width: 720px; margin: 0 auto; }
.sinar-single-content h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 1rem; }
.sinar-single-content .entry-content { font-size: 1.0625rem; line-height: 1.75; color: var(--foreground); }
.sinar-single-content .entry-content p { margin-bottom: 1.5rem; }
.sinar-single-content .entry-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; }
.sinar-single-content .entry-content h3 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.sinar-single-content .entry-content img { border-radius: var(--radius-lg); margin: 1.5rem 0; }
.sinar-single-content .entry-content a { color: var(--primary); text-decoration: underline; }
.sinar-single-content .entry-content ul,
.sinar-single-content .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.sinar-single-content .entry-content li { margin-bottom: 0.5rem; list-style: disc; }


/* ============================================================================
   DESIGN SYSTEM — COMPONENT CLASSES
   Enterprise Refactor v2.0
   ============================================================================ */

/* ---------- Screen Reader Only ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visually hidden until it takes keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--foreground);
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: var(--shadow-glass);
}

/* ---------- Focus Visible System ---------- */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Remove global focus-visible outline for form elements that have custom focus styles */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}
/* Remove default outline for mouse users, keep for keyboard users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Section Utilities ---------- */
.section-py {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}
.section-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

/* ---------- Button System ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap-min); /* 48px — WCAG 2.5.5 */
  padding: 0 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--fs-btn-m);  /* 16px on mobile — below this iOS zooms */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  transition:
    transform var(--t-spring),
    box-shadow var(--t-spring),
    background-color var(--t-fast),
    border-color var(--t-fast),
    opacity var(--t-fast);
}
.btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
/* Lift only on real pointers — on touch it fires as a sticky :hover */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-2px);
  }
}
.btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
@media (min-width: 640px) { .btn { padding: 0 1.5rem; } }

/* Button row — stacked full-width on mobile, inline once there is room.
   Primary CTA always first in source order so it reads as dominant. */
.btn-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--stack-gap);
}
.btn-row > .btn { width: 100%; }
@media (min-width: 640px) {
  .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.875rem; }
  .btn-row > .btn { width: auto; }
  .btn-row--center { justify-content: center; }
}

/* On-gradient button variants (CTA panel) */
.btn-white {
  background: #fff;
  color: var(--brand-deep);
  border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.28);
}
.btn-white:hover:not(:disabled) { background: rgba(255,255,255,0.92); }
.btn-outline-white {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.btn-outline-white:hover:not(:disabled) { background: rgba(255,255,255,0.22); border-color: #fff; }

/* WhatsApp green */
.btn-wa { background-color: #25D366; color: #fff; border-color: transparent; box-shadow: 0 10px 28px -10px rgba(37,211,102,0.6); }
.btn-wa:hover:not(:disabled) { background-color: #1da851; }

/* Primary Button — brand gradient */
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 28px -8px oklch(0.5 0.16 240 / 0.55);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 14px 36px -8px oklch(0.5 0.16 240 / 0.7);
}

/* Secondary Button — glass */
.btn-secondary {
  background: color-mix(in oklab, white 72%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: color-mix(in oklab, white 60%, transparent);
  color: var(--foreground);
  box-shadow: var(--shadow-glass);
}
.btn-secondary:hover:not(:disabled) {
  background: color-mix(in oklab, white 85%, transparent);
}

/* Accent Button — green */
.btn-accent {
  background-color: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 28px -8px oklch(0.72 0.17 162 / 0.45);
}
.btn-accent:hover:not(:disabled) {
  box-shadow: 0 14px 36px -8px oklch(0.72 0.17 162 / 0.6);
}

/* Ghost White Button — for use on dark/gradient backgrounds */
.btn-ghost-white {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.btn-ghost-white:hover:not(:disabled) {
  background: rgba(255,255,255,0.25);
}

/* ---------- Card System ---------- */
/* Glass Card — primary card style */
.card-glass {
  background: color-mix(in oklab, white 72%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius-lg);
}

/* White Card — solid white alternate */
.card-white {
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-lg);
}

/* Card hover states */
.card-hover {
  transition:
    transform var(--t-medium),
    box-shadow var(--t-medium);
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

/* ---------- Icon Container System ---------- */
.icon-wrap {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}
.icon-wrap-sm  { width: var(--icon-sm); height: var(--icon-sm); }  /* 40px */
.icon-wrap-md  { width: var(--icon-md); height: var(--icon-md); }  /* 48px */
.icon-wrap-lg  { width: var(--icon-lg); height: var(--icon-lg); }  /* 56px */
.icon-wrap-xl  { width: var(--icon-xl); height: var(--icon-xl); }  /* 64px */
.icon-wrap-round { border-radius: var(--radius-full) !important; }

/* ---------- Badge System ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  padding: 0.4rem 1rem;
  font-size: var(--type-badge);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.badge-primary { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.badge-accent  { background: color-mix(in oklab, var(--accent)  10%, transparent); color: var(--accent); }
.badge-glass   {
  background: color-mix(in oklab, white 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: var(--shadow-soft);
}
.badge-white   { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); color: white; }

/* ---------- Navbar Scrolled State (moved from header.php inline style) ---------- */
.header-scrolled {
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  background-color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 4px 30px -10px oklch(0.5 0.16 240 / 0.15);
}

/* ---------- Gallery Lightbox (moved from gallery.php inline style) ---------- */
#sinar-lightbox.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
#sinar-lightbox.hidden {
  display: none;
}

/* ---------- Image Height Utilities ---------- */
.img-fluid-about {
  height: 16rem;    /* 256px mobile */
  width: 100%;
  object-fit: cover;
}
@media (min-width: 640px)  { .img-fluid-about { height: 24rem; } }  /* 384px */
@media (min-width: 768px)  { .img-fluid-about { height: 28rem; } }  /* 448px */
@media (min-width: 1024px) { .img-fluid-about { height: 34rem; } }  /* 544px */

.img-fluid-hero {
  height: 18rem;    /* 288px mobile */
  width: 100%;
  object-fit: cover;
}
@media (min-width: 640px)  { .img-fluid-hero { height: 22rem; } }  /* 352px */
@media (min-width: 768px)  { .img-fluid-hero { height: 26rem; } }  /* 416px */
@media (min-width: 1024px) { .img-fluid-hero { height: 32rem; } }  /* 512px */
@media (min-width: 1280px) { .img-fluid-hero { height: 36rem; } }  /* 576px */

/* ---------- Form Components ---------- */
.form-input {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: rgba(255,255,255,0.85);
  padding: 0.75rem 1rem;
  /* 16px is a hard floor: Safari force-zooms the viewport on focus for
     anything smaller, which was happening on every field. */
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--foreground);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
textarea.form-input { min-height: 7.5rem; resize: vertical; }
select.form-input {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem;
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent);
}
.form-input::placeholder { color: var(--muted-foreground); opacity: 0.75; }
.form-label {
  display: block;
  margin-bottom: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: color-mix(in oklab, var(--foreground) 65%, transparent);
}
.form-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  padding: 0.75rem 0.875rem;
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.45;
}
.form-note svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.1rem; }
.form-note--ok  { border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--foreground); }
.form-note--err { border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent); background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }

/* ============================================================================
   COVERAGE / SERVICE AREA SECTION
   Self-contained component classes (no Tailwind build in this theme)
   ============================================================================ */

/* Map panel — deep brand-blue canvas so the network stands out (bg only) */
.map-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  /* Portrait on mobile. At 4/3 the stage collapsed to ~138px tall and the
     nine city labels became illegible; 3/4 restores usable label scale. */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% -8%, oklch(0.44 0.13 252 / 0.55) 0%, transparent 60%),
    linear-gradient(160deg, oklch(0.30 0.10 255) 0%, oklch(0.22 0.08 258) 55%, oklch(0.15 0.06 260) 100%);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  box-shadow:
    0 40px 80px -28px oklch(0.40 0.15 240 / 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (min-width: 480px) { .map-panel { aspect-ratio: 1 / 1; } }
@media (min-width: 640px) { .map-panel { aspect-ratio: 4 / 3; } }

/* Desktop: match the taller left column so both edges line up (sejajar) */
@media (min-width: 1024px) {
  .map-panel { aspect-ratio: auto; height: 100%; min-height: 440px; }
}

/* SVG label scale. font-size here is in viewBox user units, so it must grow
   as the rendered panel shrinks or the labels turn to specks. */
.map-canvas text { font-size: 15px; }
@media (min-width: 480px) { .map-canvas text { font-size: 13px; } }
@media (min-width: 640px) { .map-canvas text { font-size: 12px; } }
@media (min-width: 1024px){ .map-canvas text { font-size: 11px; } }

/* Stage — holds the animated network above the docked footer */
.map-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* Faint dot-grid texture overlay */
.map-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.55;
  pointer-events: none;
}

/* Ambient brand glow behind the network.
   Gradient falloff rather than `filter: blur(56px)` — this sits directly
   behind an SVG whose SMIL animations repaint continuously, so a filter here
   was being re-rastered against live content. */
.map-glow {
  position: absolute;
  top: 30%;
  left: 48%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side,
    color-mix(in oklab, var(--brand) 100%, transparent) 0%,
    color-mix(in oklab, var(--brand) 55%, transparent) 34%,
    color-mix(in oklab, var(--brand) 18%, transparent) 62%,
    transparent 100%);
  opacity: 0.40;
  pointer-events: none;
}

/* SVG network canvas sits above glow/texture, fills the stage.
   `content-visibility: auto` lets the browser skip rendering the whole
   animated network while it is off-screen. Safe here because the element is
   absolutely positioned with `inset: 0`, so its box comes from the
   containing block and size containment cannot shift the layout. */
.map-canvas {
  position: absolute;
  inset: 0;
  z-index: 10;
  height: 100%;
  width: 100%;
  content-visibility: auto;
  contain-intrinsic-size: auto 100%;
}

/* Docked network strip — flush, full-width bar at the base of the panel */
.map-footer {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  padding: 0.75rem 0.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(to top, oklch(0.16 0.05 260 / 0.92), oklch(0.20 0.06 258 / 0.35));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.map-footer-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1 1 12rem;
}
.map-footer-info > div { min-width: 0; }
.map-footer__title { font-size: 0.8125rem; font-weight: 700; color: #fff; line-height: 1.2; }
.map-footer__sub   { font-size: 0.8125rem; color: rgba(255,255,255,0.7); line-height: 1.3; margin-top: 1px; }
.map-footer__icon  { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
.map-footer__icon svg { width: 1.125rem; height: 1.125rem; }
.map-footer__live { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.8); }
@media (min-width: 640px) {
  .map-footer { padding: 0.8rem 1.1rem; }
  .map-footer__title { font-size: 0.875rem; }
  .map-footer__sub   { font-size: 0.8125rem; }
  .map-footer__icon  { width: 2.5rem; height: 2.5rem; }
  .map-footer__icon svg { width: 1.25rem; height: 1.25rem; }
  .map-footer__live  { font-size: 0.75rem; }
}

/* City chips */
.area-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--foreground);
  background: color-mix(in oklab, white 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--primary) 12%, transparent);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--t-medium),
    box-shadow var(--t-medium),
    border-color var(--t-fast),
    color var(--t-fast);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .area-chip:hover {
    transform: translateY(-3px);
    color: var(--primary);
    border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    box-shadow: var(--shadow-lift);
  }
  .area-chip:hover .area-chip-icon { transform: scale(1.15); }
}
.area-chip-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform var(--t-spring);
}
@media (min-width: 640px) { .area-chip { padding: 0.5rem 0.9rem; gap: 0.5rem; } }

/* Mini stat block — 3-up grid so the columns stay equal at every width */
.area-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1.75rem;
  max-width: 28rem;
}
@media (min-width: 400px) { .area-stats { gap: 0.625rem; } }
@media (min-width: 640px) { .area-stats { gap: 0.75rem; } }
.area-stat {
  min-width: 0;
  padding: 0.75rem 0.375rem;
  border-radius: var(--radius-md);
  text-align: center;
  background: color-mix(in oklab, white 62%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-medium), box-shadow var(--t-medium);
}
@media (hover: hover) and (pointer: fine) {
  .area-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}
.area-stat .stat-num {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.area-stat .stat-label {
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  /* Sentence case on mobile: uppercase + tracking needs ~30% more width
     than a 3-up grid has at 320px. */
  letter-spacing: 0;
  color: var(--muted-foreground);
}
@media (min-width: 400px) {
  .area-stat { padding: 0.875rem 0.5rem; }
  .area-stat .stat-num { font-size: 1.375rem; }
}
@media (min-width: 640px) {
  .area-stat { padding: 1rem 0.75rem; }
  .area-stat .stat-num { font-size: 1.5rem; }
  .area-stat .stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
}

/* ============================================================================
   COMPONENT LAYER — MOBILE FIRST
   ----------------------------------------------------------------------------
   Every base rule below IS the mobile design. min-width queries scale it up.
   There are no max-width overrides: if mobile needs to change, change the base.
   ============================================================================ */

/* ---------- Page shell ---------- */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}
.section {
  position: relative;
  padding-top: var(--sec-py);
  padding-bottom: var(--sec-py);
}
.section--tint-down { background-image: linear-gradient(to bottom, #fff, color-mix(in oklab, var(--brand-soft) 60%, transparent)); }
.section--tint-up   { background-image: linear-gradient(to bottom, color-mix(in oklab, var(--brand-soft) 60%, transparent), #fff); }
.section--tint-soft { background-image: linear-gradient(to bottom, #fff, color-mix(in oklab, var(--brand-soft) 40%, transparent)); }

/* ---------- Section header ---------- */
.sec-head { max-width: 42rem; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec__title {
  margin-top: 0.875rem;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--foreground);
  text-wrap: balance;
}
.sec__lead {
  margin-top: 0.875rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted-foreground);
  text-wrap: pretty;
}
.sec-head--center .sec__lead { margin-left: auto; margin-right: auto; max-width: 36rem; }

/* ---------- Badge (mobile-tuned) ---------- */
.badge { padding: 0.4rem 0.8125rem; gap: 0.375rem; }
.badge svg { width: 0.8125rem; height: 0.8125rem; flex-shrink: 0; }
@media (min-width: 640px) { .badge { padding: 0.4rem 1rem; gap: 0.5rem; } }

/* ---------- Card grid ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
  margin-top: var(--head-gap);
}
/* The reveal wrapper is the grid item, so it must stretch or the cards
   inside it can never be equal height. */
.grid-cards > * { min-width: 0; height: 100%; }
@media (min-width: 640px) {
  .grid-cards--2, .grid-cards--3, .grid-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Card ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Clips .card__glow, which is deliberately larger than the card */
  overflow: hidden;
  padding: var(--card-p);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, white 72%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-medium), box-shadow var(--t-medium);
}
@media (hover: hover) and (pointer: fine) {
  .card--hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
}
.card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--icon-tile);
  height: var(--icon-tile);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -8px oklch(0.5 0.16 240 / 0.5);
  transition: transform var(--t-medium);
}
.card__icon svg { width: 1.375rem; height: 1.375rem; }
@media (min-width: 640px)  { .card__icon svg { width: 1.5rem;   height: 1.5rem; } }
@media (min-width: 1024px) { .card__icon svg { width: 1.625rem; height: 1.625rem; } }
@media (hover: hover) and (pointer: fine) {
  .card--hover:hover .card__icon { transform: scale(1.08) rotate(3deg); }
}
.card__title {
  margin-top: 1.125rem;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
  text-wrap: balance;
}
.card__text {
  margin-top: 0.5rem;
  font-size: var(--fs-card, 1rem);
  line-height: var(--lh-body);
  color: var(--muted-foreground);
  text-wrap: pretty;
}
.card__link {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.375rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.25rem;
  min-height: 2.75rem; /* 44px tap target */
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  transition: gap var(--t-fast);
}
.card__link svg { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) { .card__link:hover { gap: 0.75rem; } }
.card__rule {
  margin-top: 1.25rem;
  height: 3px;
  width: 2.5rem;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--primary), var(--accent));
  opacity: 0.75;
  transition: width var(--t-medium);
}
@media (hover: hover) and (pointer: fine) { .card--hover:hover .card__rule { width: 4rem; } }
/* Gradient falloff instead of `filter: blur(40px)` — same look, and the
   hover opacity transition stays a pure compositor operation. */
.card__glow { position: absolute; top: -4rem; right: -4rem; z-index: 0; width: 12rem; height: 12rem; border-radius: 9999px; opacity: 0; pointer-events: none; background: radial-gradient(circle closest-side, oklch(0.62 0.17 240 / 0.35), oklch(0.62 0.17 240 / 0.2) 42%, oklch(0.62 0.17 240 / 0.07) 70%, transparent 100%); transition: opacity var(--t-slow); }
@media (hover: hover) and (pointer: fine) { .card--hover:hover .card__glow { opacity: 1; } }
.card__watermark {
  position: absolute;
  top: 1rem;
  right: 1.125rem;
  z-index: 0;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  /* This was `text-primary/5`, which did not exist — the numerals were
     rendering in solid foreground on top of the card copy. */
  color: color-mix(in oklab, var(--primary) 8%, transparent);
  pointer-events: none;
}
.card > *:not(.card__watermark):not(.card__glow) { position: relative; z-index: 1; }

/* ============================== HERO ================================== */
.hero {
  position: relative;
  overflow: hidden;
  /* Height is content-driven on mobile. `min-height:100vh` was forcing a
     screen-and-a-half of empty space on top of already-tall content. */
  padding-top: 6.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 768px)  { .hero { padding-top: 8rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-top: 9rem;
    padding-bottom: 6rem;
  }
  .hero > .wrap { width: 100%; }
}
.hero__bg { position: absolute; inset: 0; z-index: -10; background-image: linear-gradient(to bottom, var(--brand-soft), var(--background) 45%, var(--background)); }
/* No `filter: blur(64px)` here — on a 600px box that is an expensive raster
   the GPU redoes whenever the tile repaints. A multi-stop radial gradient
   produces the same soft falloff for free. */
.hero__orb { position: absolute; z-index: -10; border-radius: 9999px; pointer-events: none; }
.hero__orb--a { top: -8rem; right: -8rem; width: 20rem;  height: 20rem;  opacity: 0.35; background: radial-gradient(circle closest-side, oklch(0.72 0.17 200/0.6), oklch(0.72 0.17 200/0.34) 38%, oklch(0.72 0.17 200/0.12) 66%, transparent 100%); }
.hero__orb--b { bottom: -8rem; left: -8rem; width: 17rem; height: 17rem; opacity: 0.28; background: radial-gradient(circle closest-side, oklch(0.72 0.17 162/0.5), oklch(0.72 0.17 162/0.28) 38%, oklch(0.72 0.17 162/0.1) 66%, transparent 100%); }
@media (min-width: 1024px) {
  .hero__orb--a { top: -10rem; right: -10rem; width: 37.5rem; height: 37.5rem; }
  .hero__orb--b { bottom: -10rem; left: -10rem; width: 31.25rem; height: 31.25rem; }
}

.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr 1fr; gap: 3rem; } }

.hero__title {
  margin-top: 1.125rem;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--foreground);
  text-wrap: balance;
  max-width: 18ch;
}
@media (min-width: 1024px) { .hero__title { max-width: 15ch; } }

/* Was 18px BOLD, which fought the headline for attention. Now a clear
   second level: same colour family, lighter weight, smaller. */
.hero__lead {
  margin-top: 0.875rem;
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  /* 500, not 600: at 3 lines on a 320px screen a semibold deck reads as a
     second headline and flattens the hierarchy. */
  font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 82%, transparent);
  text-wrap: pretty;
}
.hero__desc {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted-foreground);
  text-wrap: pretty;
}
.hero__actions { margin-top: 1.75rem; }
@media (min-width: 768px) { .hero__actions { margin-top: 2.25rem; } }

/* Trust row — the note takes its own line when there is no room beside
   the avatars, instead of squeezing into a 3-line sliver. */
.hero__trust { margin-top: 2rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 0.875rem; }
.hero__avatars { display: flex; flex-shrink: 0; }
.hero__avatars img {
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 9999px;
  border: 2px solid #fff;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(15,26,46,0.16);
}
.hero__avatars img + img { margin-left: -0.625rem; }
.hero__trust-body { flex: 1 1 11rem; min-width: 0; }
.hero__rating { display: flex; align-items: center; gap: 0.1875rem; color: var(--accent-green); }
.hero__rating svg { width: 0.875rem; height: 0.875rem; }
.hero__rating-val { margin-left: 0.25rem; font-size: 0.8125rem; font-weight: 800; color: var(--foreground); }
.hero__trust-note { margin-top: 0.1875rem; font-size: var(--fs-caption); line-height: 1.35; color: var(--muted-foreground); }

.hero__media { position: relative; }
.hero__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.hero__figure img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .hero__figure img { aspect-ratio: 5 / 4; } }

.hero__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, white 84%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow-glass);
  max-width: calc(100% - 1.5rem);
}
.hero__float-icon { display: grid; place-items: center; flex-shrink: 0; width: 1.875rem; height: 1.875rem; border-radius: var(--radius-sm); }
.hero__float-icon svg { width: 0.9375rem; height: 0.9375rem; }
.hero__float-label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; line-height: 1; color: var(--muted-foreground); }
.hero__float-value { display: block; margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; color: var(--foreground); white-space: nowrap; }
/* One float only on mobile — two overlays smothered a 4:3 photo at 280px. */
.hero__float--top { display: none; }
.hero__float--bottom { left: 0.625rem; bottom: 0.625rem; }
@media (min-width: 768px) {
  .hero__float { padding: 0.75rem 1rem; gap: 0.75rem; }
  .hero__float-icon { width: 2.5rem; height: 2.5rem; }
  .hero__float-icon svg { width: 1.25rem; height: 1.25rem; }
  .hero__float-label { font-size: 0.75rem; }
  .hero__float-value { font-size: 0.875rem; }
  .hero__float--top { display: flex; top: 1.25rem; left: 1.25rem; }
  .hero__float--bottom { left: auto; right: 1.25rem; bottom: 1.25rem; }
}

.hero__stats { margin-top: var(--card-gap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.hero__stats > * { min-width: 0; height: 100%; }
.stat-tile {
  min-width: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  text-align: center;
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, white 72%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: var(--shadow-soft);
}
.stat-tile__num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-tile__label { margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--muted-foreground); }
@media (min-width: 400px)  { .stat-tile { padding: 1.125rem 1rem; } .stat-tile__num { font-size: 1.75rem; } }
@media (min-width: 1024px) { .stat-tile { padding: 1.25rem; } .stat-tile__num { font-size: 2rem; } .stat-tile__label { font-size: 0.8125rem; } }

/* ============================== HEADER ================================ */
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  /* backdrop-filter is deliberately NOT transitioned: animating a blur
     radius forces a full re-blur of the backdrop every frame, and it fired
     at the exact moment scrolling started. */
  transition: background-color var(--t-medium), box-shadow var(--t-medium);
  /* Own a stable compositor layer so the fixed header is not re-rastered
     into the page tiles on every scroll frame. */
  transform: translateZ(0);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 4.5rem; }
@media (min-width: 1024px) { .nav { height: 5rem; } }

.brand { display: flex; align-items: center; gap: 0.625rem; min-width: 0; min-height: 2.75rem; }
.brand__mark { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); box-shadow: 0 8px 20px -6px oklch(0.5 0.16 240 / 0.5); transition: transform var(--t-spring); }
.brand__mark svg { width: 1.25rem; height: 1.25rem; color: #fff; }
.brand__dot { position: absolute; top: -2px; right: -2px; width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--accent-green); box-shadow: 0 0 0 2px #fff; }
.brand__name { display: block; font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; color: var(--foreground); white-space: nowrap; }
.brand__tag { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1; color: var(--muted-foreground); }
@media (min-width: 400px)  { .brand__name { font-size: 1rem; } }
@media (min-width: 1024px) {
  .brand__mark { width: 2.75rem; height: 2.75rem; }
  .brand__mark svg { width: 1.5rem; height: 1.5rem; }
  .brand:hover .brand__mark { transform: scale(1.05); }
}

.nav__desktop, .nav__cta { display: none; }
@media (min-width: 1024px) {
  .nav__desktop { display: flex; align-items: center; gap: 0.125rem; }
  .nav__cta { display: flex; align-items: center; }
}
.nav__link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.625rem 0.875rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: color-mix(in oklab, var(--foreground) 80%, transparent); transition: color var(--t-fast), background-color var(--t-fast); }
.nav__link:hover { color: var(--primary); background-color: rgba(255,255,255,0.6); }

.nav__toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: var(--shadow-soft);
  color: var(--foreground);
}
.nav__toggle svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 1024px) { .nav__toggle { display: none; } }

.menu { display: none; padding-bottom: 1rem; }
.menu.is-open { display: block; }
@media (min-width: 1024px) { .menu, .menu.is-open { display: none; } }
.menu__panel {
  padding: 0.625rem;
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, white 90%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow-glass);
  max-height: calc(100dvh - 7rem);
  overflow-y: auto;
}
.menu__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 1rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 600;
  color: color-mix(in oklab, var(--foreground) 88%, transparent);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.menu__link + .menu__link { margin-top: 0.125rem; }
.menu__link:hover { background-color: rgba(255,255,255,0.8); color: var(--primary); }
.menu__cta { width: 100%; margin-top: 0.625rem; }

/* ============================== BRANDS ================================ */
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; align-items: center; margin-top: 1.5rem; }
.brands__item { text-align: center; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1.3; color: color-mix(in oklab, var(--foreground) 55%, transparent); transition: color var(--t-fast), transform var(--t-fast); }
@media (hover: hover) and (pointer: fine) { .brands__item:hover { color: var(--primary); transform: translateY(-3px); } }
@media (min-width: 640px)  { .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .brands__item { font-size: 1rem; } }
@media (min-width: 1024px) { .brands { grid-template-columns: repeat(6, minmax(0, 1fr)); } .brands__item { font-size: 1.0625rem; letter-spacing: 0.04em; } }
.brands-note { text-align: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; line-height: 1.5; color: var(--muted-foreground); }
@media (min-width: 640px) { .brands-note { font-size: 0.75rem; letter-spacing: 0.3em; } }

/* ============================== ABOUT ================================= */
.about__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.about__media { position: relative; }
@media (min-width: 480px) { .about__media { margin-bottom: 1.75rem; } }
.about__figure { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.about__figure img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; transition: transform var(--t-slow); }
@media (min-width: 1024px) { .about__figure img { aspect-ratio: 4 / 5; } }
@media (hover: hover) and (pointer: fine) { .about__figure:hover img { transform: scale(1.05); } }
/* Below 480px this sits under the image as a normal block — the original
   used `-right-0`, which is not a class, so it had no anchor at all. */
.about__badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, white 82%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: var(--shadow-glass);
}
@media (min-width: 480px)  { .about__badge { position: absolute; right: 1rem; bottom: -1.25rem; margin-top: 0; max-width: 15rem; } }
@media (min-width: 1024px) { .about__badge { right: -1.5rem; bottom: -1.75rem; } }
.about__badge svg { width: 2.25rem; height: 2.25rem; flex-shrink: 0; color: var(--accent-green); }
.about__badge-num { font-size: 1.375rem; font-weight: 800; line-height: 1.1; background: linear-gradient(135deg, var(--brand-deep), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about__badge-text { margin-top: 0.125rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.35; color: var(--muted-foreground); }
/* Kept inside the gutter on mobile so it reads as a deliberate accent rather
   than a shape sliced by the viewport edge. */
.about__deco { position: absolute; top: -0.75rem; left: -0.75rem; z-index: -1; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); opacity: 0.9; }
@media (min-width: 640px) { .about__deco { top: -1rem; left: -1rem; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-lg); } }
@media (min-width: 768px) { .about__deco { top: -1.5rem; left: -1.5rem; width: 6rem; height: 6rem; } }

.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.75rem; }
.feat-grid > * { min-width: 0; height: 100%; }
.feat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  height: 100%;
  padding: 0.875rem;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, white 72%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-medium), box-shadow var(--t-medium);
}
@media (hover: hover) and (pointer: fine) { .feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } }
.feat__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; box-shadow: 0 8px 16px -8px oklch(0.5 0.16 240 / 0.5); }
.feat__icon svg { width: 1.125rem; height: 1.125rem; }
.feat__label { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; color: var(--foreground); }
@media (min-width: 400px) { .feat { flex-direction: row; align-items: center; } .feat__label { font-size: 0.875rem; } }
@media (min-width: 640px) { .feat-grid { gap: 1rem; } .feat { padding: 1rem; gap: 0.875rem; } .feat__icon { width: 2.75rem; height: 2.75rem; } .feat__icon svg { width: 1.25rem; height: 1.25rem; } }

/* ============================== PROCESS =============================== */
.steps { position: relative; display: grid; gap: 1.25rem; margin-top: var(--head-gap); }
/* A real element this time — the original relied on left-1/2, w-[2px] and
   -translate-x-1/2, none of which existed. */
.steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 1.75rem;
  top: 2rem;
  bottom: 2rem;
  width: 2px;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--primary) 32%, transparent), transparent);
}
.step { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 1rem; text-align: left; }
.step__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 16px 32px -14px oklch(0.5 0.16 240 / 0.5), 0 0 0 1px color-mix(in oklab, var(--primary) 14%, transparent);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background-image: none;
}
.step__num span { background: linear-gradient(135deg, var(--brand-deep), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step__body { min-width: 0; padding-top: 0.375rem; }
.step__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; color: var(--foreground); }
.step__text { margin-top: 0.375rem; font-size: var(--fs-card, 1rem); line-height: var(--lh-body); color: var(--muted-foreground); text-wrap: pretty; }
@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .steps::before { display: none; }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
  .steps::before { display: block; left: 12%; right: 12%; top: 2.5rem; bottom: auto; width: auto; height: 1px; background: linear-gradient(to right, transparent, color-mix(in oklab, var(--primary) 40%, transparent), transparent); }
  .step { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .step__num { width: 5rem; height: 5rem; font-size: 1.25rem; }
  .step__body { padding-top: 1.25rem; max-width: 15rem; }
}

/* ============================== GALLERY =============================== */
.gallery__head { display: grid; gap: 1rem; }
@media (min-width: 768px) { .gallery__head { grid-template-columns: 1fr auto; align-items: end; gap: 2.5rem; } }
.gallery__note { max-width: 28rem; font-size: var(--fs-card, 1rem); line-height: var(--lh-body); color: var(--muted-foreground); }
.masonry { margin-top: var(--head-gap); columns: 1; column-gap: var(--card-gap); }
@media (min-width: 640px)  { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
/* Without this a tile can be split across two columns mid-image. */
.masonry > * { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: var(--card-gap); }
.tile { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); cursor: pointer; }
.tile img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; transition: transform var(--t-slow); }
@media (min-width: 640px) { .tile--tall img { aspect-ratio: 3 / 4; } }
.tile__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  color: #fff;
  background: linear-gradient(to top, color-mix(in oklab, var(--brand-deep) 88%, transparent), transparent);
}
.tile__caption { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; text-align: left; }
.tile__icon { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tile__icon svg { width: 0.9375rem; height: 0.9375rem; }
/* Touch devices have no hover, so the caption stays visible there. */
@media (hover: hover) and (pointer: fine) {
  .tile__bar { opacity: 0; transition: opacity var(--t-medium); }
  .tile:hover .tile__bar, .tile:focus-visible .tile__bar { opacity: 1; }
  .tile:hover img { transform: scale(1.06); }
}
.lightbox__close {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top));
  right: 1rem;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 9999px;
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.lightbox__close:hover { background: rgba(255,255,255,0.26); }

/* ============================== COVERAGE ============================== */
.coverage__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .coverage__grid { grid-template-columns: 1fr 1.15fr; gap: 4rem; } }
.coverage__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin-top: 1.75rem; }

/* ============================ TESTIMONIALS ============================ */
.stars { display: flex; gap: 0.1875rem; color: var(--accent-green); }
.stars svg { width: 0.9375rem; height: 0.9375rem; }
.quote { margin-top: 1rem; flex: 1 1 auto; font-size: var(--fs-card, 1rem); line-height: var(--lh-body); color: color-mix(in oklab, var(--foreground) 90%, transparent); text-wrap: pretty; }
.quote-foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); display: flex; align-items: center; gap: 0.75rem; }
.quote-foot img { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 2px #fff, var(--shadow-soft); }
.quote-name { font-size: 0.875rem; font-weight: 800; line-height: 1.2; color: var(--foreground); }
.quote-role { margin-top: 2px; font-size: 0.8125rem; line-height: 1.3; color: var(--muted-foreground); }

/* ============================== CONTACT =============================== */
.contact__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 1fr 1.15fr; gap: 4rem; } }
.contact-list { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.contact-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-md); background: color-mix(in oklab, white 60%, transparent); border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.contact-item__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); }
.contact-item__icon svg { width: 1.125rem; height: 1.125rem; }
.contact-item__body { min-width: 0; }
.contact-item__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; color: var(--muted-foreground); }
.contact-item__value { margin-top: 0.125rem; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--foreground); overflow-wrap: anywhere; }
a.contact-item__value { display: flex; align-items: center; min-height: 2.75rem; }
.contact-item__value:hover { color: var(--primary); }
.form {
  display: grid;
  gap: 1rem;
  padding: var(--card-p);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, white 72%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: var(--shadow-glass);
}
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }

/* ================================ CTA ================================= */
.cta-panel {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.25rem;
  border-radius: var(--radius-xl);
  text-align: center;
  background: linear-gradient(135deg, oklch(0.5 0.16 253) 0%, oklch(0.62 0.17 240) 50%, oklch(0.72 0.17 200) 100%);
  box-shadow: var(--shadow-hero);
}
@media (min-width: 640px)  { .cta-panel { padding: 3.5rem 2.5rem; } }
@media (min-width: 1024px) { .cta-panel { padding: 5rem 4rem; } }
.cta-panel__inner { position: relative; z-index: 1; }
.cta-panel__dots { position: absolute; inset: 0; opacity: 0.08; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 24px 24px; }
.cta-panel__orb { position: absolute; border-radius: 9999px; filter: blur(64px); pointer-events: none; }
.cta-panel__orb--a { top: -6rem; right: -6rem; width: 14rem; height: 14rem; background: rgba(255,255,255,0.12); }
.cta-panel__orb--b { bottom: -6rem; left: -6rem; width: 14rem; height: 14rem; background: color-mix(in oklab, var(--accent) 22%, transparent); }
.cta__title { margin-top: 1.125rem; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 800; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.cta__lead { margin: 0.875rem auto 0; max-width: 34rem; font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255,255,255,0.88); text-wrap: pretty; }
.cta__actions { margin-top: 1.75rem; }
@media (min-width: 640px) { .cta__actions { margin-top: 2.25rem; } }

/* ============================== FOOTER ================================ */
.footer { position: relative; overflow: hidden; background-color: var(--brand-deep); color: #fff; padding-top: 3.5rem; }
@media (min-width: 1024px) { .footer { padding-top: 5rem; } }
.footer__dots { position: absolute; inset: 0; opacity: 0.1; background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 0); background-size: 32px 32px; }
.footer__inner { position: relative; z-index: 1; }
.footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 640px)  { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3rem; } }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 1024px) { .footer__brand { grid-column: auto; } }
/* The brand lockup is reused on a dark ground here. `.text-white` sits far
   earlier in this file, so at equal specificity `.brand__name` won and the
   logotype rendered dark navy on blue. Scope the colour instead. */
.footer .brand__name { color: #fff; }
.footer .brand__tag  { color: rgba(255,255,255,0.72); }
.footer__text { margin-top: 1.25rem; max-width: 26rem; font-size: var(--fs-card, 1rem); line-height: var(--lh-body); color: rgba(255,255,255,0.72); }
.footer__social { display: flex; gap: 0.625rem; margin-top: 1.25rem; }
.footer__social a { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-md); background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color var(--t-fast); }
.footer__social a:hover { background: var(--accent); }
.footer__social svg { width: 1.125rem; height: 1.125rem; }
.footer__title { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #fff; }
.footer__list { display: grid; margin-top: 0.625rem; }
.footer__link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.9375rem; line-height: 1.4; color: rgba(255,255,255,0.75); transition: color var(--t-fast); }
.footer__link:hover { color: #fff; }
.footer__link svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.footer__contact { display: grid; gap: 0.25rem; margin-top: 0.625rem; }
.footer__contact li { display: flex; gap: 0.625rem; align-items: flex-start; min-height: 2.75rem; padding-top: 0.375rem; font-size: 0.9375rem; line-height: 1.45; color: rgba(255,255,255,0.8); }
.footer__contact svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.15rem; color: var(--accent-green); }
.footer__contact a { display: inline-flex; align-items: center; min-height: 2.75rem; overflow-wrap: anywhere; }
.footer__contact a:hover { color: #fff; }
.footer__map { margin-top: 2.5rem; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); }
.footer__map iframe { display: block; width: 100%; height: 14rem; border: 0; filter: grayscale(100%); opacity: 0.75; transition: opacity var(--t-slow), filter var(--t-slow); }
.footer__map iframe:hover { opacity: 1; filter: grayscale(0); }
@media (min-width: 640px)  { .footer__map iframe { height: 18rem; } }
@media (min-width: 1024px) { .footer__map { margin-top: 4rem; } .footer__map iframe { height: 25rem; } }
.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  /* Reserves the strip the fixed WhatsApp button occupies. */
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.14);
  display: grid;
  gap: 0.75rem;
  text-align: center;
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.78);
}
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; }
.footer__legal span { opacity: 0.75; }
@media (min-width: 1024px) {
  .footer__bottom { margin-top: 4rem; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; text-align: left; }
  .footer__legal { justify-content: center; }
  .footer__credit { text-align: right; }
}
@media (min-width: 1440px) { .footer__bottom { padding-bottom: 1.5rem; } }

/* ============================ FLOATING CTA ============================ */
.fab { position: fixed; z-index: 40; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 640px) { .fab { right: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom)); } }
.fab__label { display: none; }
@media (min-width: 640px) {
  .fab__label {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.25);
    transition: transform var(--t-spring);
  }
  .fab:hover .fab__label { transform: translateX(-4px); }
}
.fab__label-top { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); }
.fab__label-main { font-size: 0.8125rem; font-weight: 700; color: var(--foreground); }
.fab__btn { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: #25D366; color: #fff; box-shadow: 0 15px 35px -10px rgba(37,211,102,0.7); transition: transform var(--t-spring); }
.fab__btn svg { width: 1.75rem; height: 1.75rem; }
.fab:hover .fab__btn { transform: scale(1.08); }
.fab__ring { position: absolute; inset: 0; z-index: -1; border-radius: 9999px; background: #25D366; }

/* ---------- Glass → Flat below 1024px ---------- */
/* `backdrop-filter` makes each element a backdrop root: the browser must
   re-sample and re-blur everything behind it on every frame it moves. With
   ~20 glass surfaces on the page that is the dominant cost of a mobile
   scroll, and the fixed header pays it continuously.
   Below 1024px we swap the blur for a denser fill of the same colour. It is
   a paint substitution, not a visual downgrade — on a phone, where these
   sit over flat brand gradients rather than photography, the two are almost
   indistinguishable. Desktop keeps full glass. */
@media (max-width: 1023.98px) {
  .glass-card, .glass-dark, .header-scrolled, .menu__panel, .nav__toggle,
  .badge-glass, .badge-white, .hero__float, .stat-tile, .feat, .area-chip,
  .area-stat, .card, .card-glass, .tile__icon, .about__badge, .map-footer,
  .form, .btn-secondary, .btn-outline-white, .btn-ghost-white,
  .footer__social a,
  .backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-xl {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Compensate the lost frosting with a denser fill. */
  .glass-card,
  .badge-glass                      { background: color-mix(in oklab, white 92%, transparent); }
  .btn-secondary, .card-glass, .area-chip, .card, .stat-tile, .feat, .form,
  .hero__float, .about__badge       { background: color-mix(in oklab, white 94%, transparent); }
  .area-stat                        { background: color-mix(in oklab, white 88%, transparent); }
  .header-scrolled                  { background-color: rgba(255,255,255,0.95); }
  .menu__panel                      { background: color-mix(in oklab, white 98%, transparent); }
  .nav__toggle                      { background: rgba(255,255,255,0.95); }

  /* These sit on dark/gradient backdrops — a light bump is enough. */
  .glass-dark      { background: color-mix(in oklab, var(--brand-deep) 55%, transparent); }
  .badge-white,
  .btn-ghost-white { background: rgba(255,255,255,0.24); }
  .btn-outline-white { background: rgba(255,255,255,0.2); }
  .tile__icon      { background: rgba(255,255,255,0.32); }
  .footer__social a { background: rgba(255,255,255,0.16); }
}

/* ---------- Scroll Reveal (CSS-first, no flash) ---------- */
/* The initial state lives here rather than in JS, so content never paints
   visible and then blanks out. `.js` is set synchronously in <head>.
   The stagger is a CSS `transition-delay` fed by JS at init (--reveal-delay),
   so the compositor owns the timing and no per-element timers exist. */
.js .sinar-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .sinar-reveal.is-visible { opacity: 1; transform: none; }
/* will-change is scoped to the ~440ms an element is actually in flight.
   Declaring it on the base rule would promote all 42 reveals to their own
   compositor layer at page load and hold that memory forever — the exact
   overuse it is meant to avoid. JS adds `is-settled` on transitionend. */
.js .sinar-reveal.is-visible:not(.is-settled) { will-change: opacity, transform; }

/* ---------- Off-Screen Animation Pause ---------- */
/* JS toggles this via IntersectionObserver: decorative loops (float, pulse
   rings, the coverage radar) stop costing frames once they scroll away.
   SMIL <animate> ignores this and is paused via svg.pauseAnimations(). */
.is-paused,
.is-paused * { animation-play-state: paused !important; }

/* ---------- Prefers Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sinar-reveal,
  .js .sinar-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
    will-change: auto !important;
  }
  /* JS skips the parallax entirely under this preference; this also clears
     any inline transform left behind by a mid-session preference change. */
  .sinar-hero-parallax { transform: none !important; }
  .animate-float-slow,
  .animate-pulse-ring,
  .animate-fade-up,
  .animate-pulse {
    animation: none !important;
  }
  /* Hide the most prominent SVG (SMIL) motion on the coverage map */
  .radar-sweep,
  .radar-sonar {
    display: none !important;
  }
}