
:root {
    --pink-300: #F4949B;     --pink-600: #B03A55;     --pink-700: #962F48;     --pink-100: #F9DDE0;     --pink-50:  #FDEEF0;     --logo-script-top:    #C4737B;   --logo-script-bottom: #B66A75;

    --ink-900:  #1F2A44;     --ink-950:  #0E0D10;     --gray-700: #3A3F4B;     --gray-600: #5B6270;     --gray-500: #6B7280;     --gray-300: #D8DCE4;     --gray-100: #EBEDF1;     --slate-300: #B8C8D4;    --white:    #FFFFFF;
  --offwhite: #F6F6F8;     --on-dark-muted: #B9BDC8; 
    --error-600:   #B42318;   --error-50:    #FDECEA;
  --success-700: #1F7A4D;   --success-50:  #E8F5EE;
  --focus-ring:         #962F48;   --focus-ring-on-dark: #F4949B;   --disabled-bg: #EBEDF1;
  --disabled-fg: #5B6270;

    --bg-page:        var(--white);
  --bg-band-soft:   var(--gray-100);
  --bg-band-pink:   var(--pink-50);
  --bg-band-dark:   var(--ink-950);
  --bg-card:        var(--white);
  --text-strong:    var(--ink-900);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-600);
  --text-accent:    var(--pink-600);
  --text-link:      var(--pink-700);
  --border-subtle:  var(--gray-300);
  --border-field:   var(--gray-500);
  --btn-primary-bg:       var(--pink-600);
  --btn-primary-bg-hover: var(--pink-700);
  --btn-primary-fg:       var(--white);
  --btn-on-dark-bg:       var(--pink-300);     --btn-on-dark-bg-hover: #F7A9AF;
  --btn-on-dark-fg:       var(--ink-900);      --btn-outline-border:   var(--ink-900);

    --overlay-card: linear-gradient(180deg, rgba(14,13,16,0.05) 15%, rgba(14,13,16,0.62) 50%, rgba(14,13,16,0.86) 100%);
  --overlay-hero: linear-gradient(180deg, rgba(14,13,16,0) 20%, rgba(14,13,16,0.55) 55%, rgba(14,13,16,0.84) 100%);
  --glass-chip:   rgba(255,255,255,0.92);

    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-extrabold: 800;

    --fs-display: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);      --fs-h2:      clamp(1.75rem, 1.4rem + 1.2vw, 2.75rem);    --fs-h3:      clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);   --fs-lead:    clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);   --fs-body:    1rem;         --fs-caption: 0.875rem;     --fs-button:  1rem;         --fs-nav:     0.9375rem;    --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --lh-tight: 1.3;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-eyebrow: 0.08em;

    --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --section-y: 48px;              --container-pad: 12px;          --container-max: 1248px;        --grid-cols: 12;
  --grid-gap: 16px;               --prose-max: 720px;           
    --radius-sm: 8px;
  --radius-field: 12px;
  --radius-md: 16px;     --radius-lg: 24px;     --radius-pill: 999px;
    --shadow-card:   0 4px 16px rgba(31,42,68,0.08);
  --shadow-header: 0 1px 0 rgba(31,42,68,0.08);
  --shadow-bar:    0 -4px 16px rgba(31,42,68,0.10);
  --shadow-handle: 0 2px 8px rgba(14,13,16,0.35);

    --header-h: 80px;               --sticky-bar-h: 56px;           --touch-min: 48px;
  --btn-h: 48px;
  --btn-h-lg: 56px;
  --field-h: 48px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --logo-h-header: 52px;          --logo-h-min: 48px;
  --logo-mark-h-min: 28px;

    --ratio-hero-mobile: 4 / 5;
  --ratio-hero-desktop-photo: 4 / 5;   --ratio-service: 3 / 4;
  --ratio-compare: 4 / 5;
  --ratio-compare-wide: 1 / 1;         --ratio-video: 9 / 16;

    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-reveal: 850ms;
  --reveal-distance: 52px; --reveal-x: 56px; --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-stagger: 120ms;
  --hover-zoom: 1.03;

    --bp-sm: 640px;
  --bp-md: 768px;     --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (min-width: 640px)  { :root { --container-pad: 16px; --section-y: 64px; } }
@media (min-width: 768px)  { :root { --grid-gap: 24px; } }
@media (min-width: 1024px) { :root { --section-y: 80px; --header-h: 88px; --logo-h-header: 60px; } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-reveal: 0ms;
    --reveal-distance: 0px; --reveal-x: 0px;
    --reveal-stagger: 0ms;
    --hover-zoom: 1;
  }
}
