@font-face{font-family:'Janna LT';src:url('../../fonts/JannaLT-Regular.35fd3f06.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Janna LT';src:url('../../fonts/JannaLT-Bold.3d91fe36.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Janna LT';src:url('../../fonts/JannaLT-Bold.3d91fe36.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Janna LT';src:url('../../fonts/JannaLT-Bold.3d91fe36.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
/* Same line metrics as Janna LT, so text doesn't jump when the web font swaps in. */
@font-face{font-family:'Janna LT Fallback';src:local('Segoe UI'),local('Tahoma'),local('Geeza Pro'),local('Arial');ascent-override:128%;descent-override:58%;line-gap-override:0%}

/* Images are served as <picture><source WebP><img PNG></picture>. Taking the
   wrapper out of the layout box tree keeps every existing selector and every
   flex/grid rule written against the <img> working unchanged. */
picture{display:contents}

/* Every <img> now carries its intrinsic width/height so the browser can
   reserve space before the file arrives (no layout shift). Those attributes
   would otherwise force the rendered height whenever CSS constrains only the
   width, so let height follow the aspect ratio by default. Specificity is 0-0-1,
   so any `.class img{height:…}` rule still wins. */
img{height:auto}

/* Skip link — first focusable element on every page, visible only on focus.
   Hidden by clipping rather than an off-screen offset: on an RTL page a
   negative `left` is inline-end and would give the document a horizontal
   scrollbar. */
.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;
  z-index:9999;background:#1f628e;color:#fff;padding:10px 18px;
  border-radius:0 0 8px 8px;font-weight:700;text-decoration:none}

/* ── LIGHT THEME (default) ── */
:root{
  --bg:#f5f8ff;
  --bg2:#eaf0fd;
  --card:#ffffff;
  --card2:#dce8fb;
  --blue:#1f628e;
  --blue-l:#2a7ab0;
  --blue-d:#0e2f44;
  --dark:#0e2f44;
  --blue-glow:rgba(31,98,142,.09);
  --sky:#0EA5E9;
  --sky-d:#0284C7;
  --txt:#0F172A;
  --txt2:#475569;
  --txt3:#5d6c83; /* AA (4.5:1) on bg, bg2 and card */
  --bdr:rgba(31,98,142,.18);
  --bdr2:rgba(31,98,142,.09);
  --shadow:0 2px 18px rgba(31,98,142,.08);
  --shadow-md:0 6px 32px rgba(31,98,142,.13);
  --r:12px;
  --rl:20px;

  /* Light-only component colors */
  --hdr-bg:#ffffff;
  --hdr-bdr:#e2e8f0;
  --nav-link-color:#3d4757;
  --nav-drop-bg:#ffffff;
  --pain-card-bg:#ffffff;
  --pain-card-title:#0f172a;
  --cmp-bad-hd-bg:#FFEDEA;
  --cmp-bad-hd-color:#BA1A1A;
  --cmp-bad-hd-bdr:#FFDAD6;
  --cmp-good-hd-bg:#C7FDDF;
  --cmp-good-hd-color:#1E4F3A;
  --cmp-good-hd-bdr:#9ED2B5;
  --cmp-bad-cell-bg:#ffffff;
  --cmp-bad-cell-bdr:#FFDAD6;
  --cmp-good-cell-bg:#F4FFF6;
  --cmp-good-cell-bdr:#B9EED1;
  --cmp-x-bg:#FFEDEA;
  --cmp-x-bdr:#FFB4AB;
  --cmp-chk-bg:#C7FDDF;
  --cmp-chk-bdr:#9ED2B5;
  --cmp-title-color:#0f172a;
  --cmp-body-color:#64748b;
  --faq-bg:var(--card);
  --section-compare-bg:#ffffff;
  --theme-icon-moon:block;
  --theme-icon-sun:none;
}

/* ── DARK THEME ── */
[data-theme="dark"]{
  --bg:#0d1829;
  --bg2:#111f35;
  --card:#162033;
  --card2:#1a2840;
  --blue:#4a9fd4;
  --blue-l:#5db0e8;
  --blue-d:#1e3a52;
  --dark:#1e3a52;
  --blue-glow:rgba(74,159,212,.12);
  --sky:#38bdf8;
  --sky-d:#0ea5e9;
  --txt:#e2e8f0;
  --txt2:#94a3b8;
  --txt3:#7c8ca2; /* AA (4.5:1) on bg, bg2 and card */
  --bdr:rgba(74,159,212,.22);
  --bdr2:rgba(74,159,212,.10);
  --shadow:0 2px 18px rgba(0,0,0,.30);
  --shadow-md:0 6px 32px rgba(0,0,0,.45);

  --hdr-bg:#0f1e30;
  --hdr-bdr:rgba(74,159,212,.12);
  --nav-link-color:#cbd5e1;
  --nav-drop-bg:#162033;
  --pain-card-bg:#1a2840;
  --pain-card-title:#e2e8f0;
  --cmp-bad-hd-bg:color-mix(in srgb,#BA1A1A 14%,transparent);
  --cmp-bad-hd-color:#FFB4AB;
  --cmp-bad-hd-bdr:color-mix(in srgb,#BA1A1A 35%,transparent);
  --cmp-good-hd-bg:color-mix(in srgb,#376851 30%,transparent);
  --cmp-good-hd-color:#9ED2B5;
  --cmp-good-hd-bdr:#1E4F3A;
  --cmp-bad-cell-bg:color-mix(in srgb,#BA1A1A 6%,transparent);
  --cmp-bad-cell-bdr:color-mix(in srgb,#BA1A1A 22%,transparent);
  --cmp-good-cell-bg:color-mix(in srgb,#376851 10%,transparent);
  --cmp-good-cell-bdr:#1E4F3A;
  --cmp-x-bg:color-mix(in srgb,#BA1A1A 18%,transparent);
  --cmp-x-bdr:color-mix(in srgb,#BA1A1A 40%,transparent);
  --cmp-chk-bg:#1E4F3A;
  --cmp-chk-bdr:#376851;
  --cmp-title-color:#e2e8f0;
  --cmp-body-color:#94a3b8;
  --faq-bg:var(--card);
  --section-compare-bg:#0f1e30;
  --theme-icon-moon:none;
  --theme-icon-sun:block;
}

/* ── Material Design 3 system tokens ──────────────────────────────────────
   Color roles map onto the brand palette above, so both themes follow it.
   New and refactored rules use these names; --r, --rl, --shadow and
   --shadow-md are kept as aliases of the shape and elevation scales. */
:root{
  --md-sys-color-primary:var(--blue);
  --md-sys-color-on-primary:#ffffff;
  --md-sys-color-primary-filled:var(--blue);  /* behind white text */
  --md-sys-color-primary-container:var(--card2);
  --md-sys-color-on-primary-container:var(--blue-d);
  --md-sys-color-secondary:var(--sky-d);
  --md-sys-color-tertiary:#ffc400;
  --md-sys-color-on-tertiary:#1a1200;
  --md-sys-color-surface:var(--bg);
  --md-sys-color-surface-container-low:var(--bg2);
  --md-sys-color-surface-container:var(--card);
  --md-sys-color-surface-container-high:var(--card2);
  --md-sys-color-on-surface:var(--txt);
  --md-sys-color-on-surface-variant:var(--txt2);
  --md-sys-color-outline:#7b8ba1;          /* ≥3:1 on every surface: field borders */
  --md-sys-color-outline-variant:var(--bdr);
  --md-sys-color-error:#c53030;            /* 5.5:1 on white */
  --md-sys-color-inverse-surface:var(--ftr-bg);
  --md-sys-color-inverse-on-surface:#94a3b8;

  /* Type scale (size / line height) */
  --md-sys-typescale-display-large-size:3.5625rem;--md-sys-typescale-display-large-line-height:4rem;
  --md-sys-typescale-display-medium-size:2.8125rem;--md-sys-typescale-display-medium-line-height:3.25rem;
  --md-sys-typescale-display-small-size:2.25rem;--md-sys-typescale-display-small-line-height:2.75rem;
  --md-sys-typescale-headline-large-size:2rem;--md-sys-typescale-headline-large-line-height:2.5rem;
  --md-sys-typescale-headline-medium-size:1.75rem;--md-sys-typescale-headline-medium-line-height:2.25rem;
  --md-sys-typescale-headline-small-size:1.5rem;--md-sys-typescale-headline-small-line-height:2rem;
  --md-sys-typescale-title-large-size:1.375rem;--md-sys-typescale-title-large-line-height:1.75rem;
  --md-sys-typescale-title-medium-size:1rem;--md-sys-typescale-title-medium-line-height:1.5rem;
  --md-sys-typescale-title-small-size:.875rem;--md-sys-typescale-title-small-line-height:1.25rem;
  --md-sys-typescale-body-large-size:1rem;--md-sys-typescale-body-large-line-height:1.5rem;
  --md-sys-typescale-body-medium-size:.875rem;--md-sys-typescale-body-medium-line-height:1.25rem;
  --md-sys-typescale-body-small-size:.75rem;--md-sys-typescale-body-small-line-height:1rem;
  --md-sys-typescale-label-large-size:.875rem;--md-sys-typescale-label-large-line-height:1.25rem;
  --md-sys-typescale-label-medium-size:.75rem;--md-sys-typescale-label-medium-line-height:1rem;
  --md-sys-typescale-label-small-size:.6875rem;--md-sys-typescale-label-small-line-height:1rem;

  /* Shape */
  --md-sys-shape-corner-none:0;
  --md-sys-shape-corner-extra-small:4px;
  --md-sys-shape-corner-small:8px;
  --md-sys-shape-corner-medium:12px;
  --md-sys-shape-corner-large:16px;
  --md-sys-shape-corner-large-increased:20px;
  --md-sys-shape-corner-extra-large:28px;
  --md-sys-shape-corner-full:9999px;
  --r:var(--md-sys-shape-corner-medium);
  --rl:var(--md-sys-shape-corner-large-increased);

  /* Elevation (brand-tinted) */
  --md-sys-elevation-level0:none;
  --md-sys-elevation-level1:0 1px 4px rgba(31,98,142,.08);
  --md-sys-elevation-level2:0 2px 18px rgba(31,98,142,.08);
  --md-sys-elevation-level3:0 6px 32px rgba(31,98,142,.13);
  --md-sys-elevation-level4:0 10px 40px rgba(31,98,142,.16);
  --md-sys-elevation-level5:0 14px 48px rgba(31,98,142,.20);
  --shadow:var(--md-sys-elevation-level2);
  --shadow-md:var(--md-sys-elevation-level3);

  /* Motion */
  --md-sys-motion-easing-standard:cubic-bezier(.2,0,0,1);
  --md-sys-motion-easing-emphasized-decelerate:cubic-bezier(.05,.7,.1,1);
  --md-sys-motion-easing-emphasized-accelerate:cubic-bezier(.3,0,.8,.15);
  --md-sys-motion-duration-short2:100ms;
  --md-sys-motion-duration-short3:150ms;
  --md-sys-motion-duration-short4:200ms;
  --md-sys-motion-duration-medium1:250ms;
  --md-sys-motion-duration-medium2:300ms;
  --md-sys-motion-duration-medium3:350ms;
  --md-sys-motion-duration-medium4:400ms;
  --md-sys-motion-duration-long1:450ms;
  --md-sys-motion-duration-long2:500ms;
  --md-sys-motion-duration-long4:600ms;

  /* State layers */
  --md-sys-state-hover-opacity:.08;
  --md-sys-state-focus-opacity:.10;
  --md-sys-state-pressed-opacity:.10;
  --md-sys-state-dragged-opacity:.16;
}
[data-theme="dark"]{
  --md-sys-color-on-primary:#04223a;       /* 5.6:1 on the light-blue primary */
  --md-sys-color-primary-filled:#2a7ab0;   /* white text 4.7:1 (the dark .btn-p blue) */
  --md-sys-color-outline:#64809f;
  --md-sys-color-error:#fca5a5;
  --md-sys-elevation-level1:0 1px 4px rgba(0,0,0,.25);
  --md-sys-elevation-level2:0 2px 18px rgba(0,0,0,.30);
  --md-sys-elevation-level3:0 6px 32px rgba(0,0,0,.45);
  --md-sys-elevation-level4:0 10px 40px rgba(0,0,0,.50);
  --md-sys-elevation-level5:0 14px 48px rgba(0,0,0,.55);
}

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip, not hidden: hidden turns html/body into scroll containers,
   which silently breaks position:sticky on the header (and the course player).
   hidden stays first as the fallback for browsers without clip. */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{font-family:'Janna LT','Janna LT Fallback','Cairo',sans-serif;background:var(--bg);color:var(--txt);line-height:1.7;font-size:16px;overflow-x:hidden;overflow-x:clip}

/* ── UTILS ── */
.container{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
.lbl{font-size:.78rem;font-weight:700;color:var(--blue);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:14px}
.h2{font-size:clamp(1.75rem,4vw,2.7rem);font-weight:900;line-height:1.25;margin-bottom:18px}
.blue{color:var(--blue)}
.sky{color:var(--sky)}
.sub{font-size:1.05rem;color:var(--txt2);line-height:1.85;max-width:620px}

/* fade-up */
.fu{opacity:0;transform:translateY(26px);transition:opacity var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard),transform var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard)}
.fu.vis{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
/* The first screen is never hidden: the hero headline is the page's largest
   paint, and fading it in from opacity:0 after the script runs delayed LCP by
   up to a second. Same for visitors who ask for less motion. */
#hero .fu,main>section:first-of-type .fu,.crs-hero .fu{opacity:1;transform:none;transition:none}
/* Without JS (see the <noscript> rule in each page) or with reduced motion,
   nothing waits for the IntersectionObserver to become visible. */
@media (prefers-reduced-motion:reduce){
  .fu{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* ── BUTTONS ── */
.btn-p{display:inline-flex;align-items:center;gap:10px;background:var(--dark);color:#fff;font-family:'Janna LT','Janna LT Fallback','Cairo',sans-serif;font-weight:800;font-size:1rem;padding:15px 34px;border-radius:var(--md-sys-shape-corner-medium);border:none;cursor:pointer;text-decoration:none;transition-property:background-color,color,border-color,box-shadow,transform,opacity;transition-duration:var(--md-sys-motion-duration-medium1);transition-timing-function:var(--md-sys-motion-easing-standard);box-shadow:0 4px 18px rgba(14,47,68,.35)}
/* dark mode: --dark is too close to the page background, so use the brand blue (white text ~4.6:1) */
[data-theme="dark"] .btn-p{background:var(--md-sys-color-primary-filled);box-shadow:0 4px 18px rgba(0,0,0,.35)}
.btn-p:hover{background:#ffc400;color:#1a1200;transform:translateY(-2px);box-shadow:none}
.btn-s{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--blue);font-family:'Janna LT','Janna LT Fallback','Cairo',sans-serif;font-weight:700;font-size:1rem;padding:14px 30px;border-radius:var(--md-sys-shape-corner-medium);border:1.5px solid var(--bdr);cursor:pointer;text-decoration:none;transition-property:background-color,color,border-color,box-shadow,transform,opacity;transition-duration:var(--md-sys-motion-duration-medium1);transition-timing-function:var(--md-sys-motion-easing-standard)}
.btn-s:hover{background:var(--md-sys-color-primary-filled);color:#fff;border-color:var(--blue);transform:translateY(-1px)}

/* ── HEADER ── */
.hdr{position:sticky;top:0;z-index:200;background:var(--hdr-bg);box-shadow:0 1px 3px rgba(0,0,0,.07);transition:background var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)}
.hdr-main-wrap{border-bottom:1px solid var(--hdr-bdr)}
/* Same width as .container, so the logo and the demo button line up with the page */
.hdr-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:flex-start;height:64px;gap:16px}
.logo-img{height:28px;width:auto;display:block;flex-shrink:0}
.logo{display:flex;align-items:center;text-decoration:none}
.hdr-nav{display:flex;align-items:center;gap:4px}
/* Logo and actions at the two ends, menu centred on the page between them. */
@media(min-width:961px){.hdr-in{display:grid;grid-template-columns:1fr auto 1fr}.logo{justify-self:start}.hdr-actions{justify-self:end;margin-inline-start:0}}
@media(min-width:961px) and (max-width:1180px){.nav-link{padding:8px 10px}}
.hdr-btn{background:#ffc400;color:#1a1200;font-family:'Janna LT','Janna LT Fallback','Cairo',sans-serif;font-weight:700;font-size:.84rem;padding:8px 18px;border-radius:var(--md-sys-shape-corner-small);border:none;cursor:pointer;transition-property:background-color,color,border-color,box-shadow,transform,opacity;transition-duration:var(--md-sys-motion-duration-short4);transition-timing-function:var(--md-sys-motion-easing-standard);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.hdr-btn:hover{background:#e6b000;color:#1a1200;transform:translateY(-1px)}
.hdr-actions{display:flex;align-items:center;gap:10px;margin-inline-start:auto}

/* ── DUAL LOGO (light / dark) ── */
.logo-dark{display:none}
.logo-light{display:block}
[data-theme="dark"] .logo-dark{display:block}
[data-theme="dark"] .logo-light{display:none}

/* ── LANG SWITCH ── */
.lang-switch{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--md-sys-shape-corner-small);background:transparent;border:1px solid transparent;color:var(--blue);font-size:.8rem;font-weight:800;text-decoration:none;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);flex-shrink:0;letter-spacing:.5px}
.lang-switch:hover{background:var(--bg2);border-color:var(--bdr)}

/* ── THEME TOGGLE ── */
.theme-toggle{width:36px;height:36px;border-radius:var(--md-sys-shape-corner-small);background:transparent;border:1px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);flex-shrink:0;line-height:1}
.theme-toggle:hover{background:var(--bg2);border-color:var(--bdr)}
.theme-toggle{color:var(--nav-link-color)}
.theme-toggle svg{width:20px;height:20px;fill:currentColor}
.theme-icon-moon{display:var(--theme-icon-moon,block)}
.theme-icon-sun{display:var(--theme-icon-sun,none)}

/* ── NAV ITEMS ── */
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:5px;color:var(--nav-link-color);text-decoration:none;padding:8px 14px;border-radius:var(--md-sys-shape-corner-small);font-size:14px;font-weight:400;transition-property:background-color,color,border-color,box-shadow,transform,opacity;transition-duration:var(--md-sys-motion-duration-short3);transition-timing-function:var(--md-sys-motion-easing-standard);white-space:nowrap;background:transparent;border:none;cursor:pointer;font-family:'Janna LT','Janna LT Fallback','Cairo',sans-serif;line-height:1.7}
.nav-link:hover,.nav-item.open>.nav-link{background:var(--bg2);color:var(--blue)}
.nav-arrow{font-size:.6rem;color:var(--txt3);transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);display:inline-block;margin-top:1px}
.nav-item.open>.nav-link .nav-arrow{transform:rotate(180deg)}

/* ── DROPDOWNS ── */
.nav-drop{display:none;position:absolute;top:calc(100% + 8px);inset-inline-start:0;background:var(--nav-drop-bg);border:1px solid var(--bdr2);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--shadow-md);min-width:210px;padding:8px;z-index:300}
.nav-item.open>.nav-drop{display:block}
.nav-drop-link{display:block;padding:9px 14px;border-radius:var(--md-sys-shape-corner-small);font-size:.9rem;font-weight:400;color:var(--txt);text-decoration:none;transition:background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);white-space:nowrap}
.nav-drop-link:hover{background:var(--bg2);color:var(--blue)}

/* ── MEGA MENU ── */
.nav-mega{display:none;position:absolute;top:calc(100% + 8px);inset-inline-start:-60px;background:var(--nav-drop-bg);border:1px solid var(--bdr2);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--shadow-md);padding:20px;z-index:300;min-width:480px}
.nav-item.open>.nav-mega{display:flex;flex-direction:column;gap:0}
.mega-cols{display:flex;gap:0}
.mega-all{border-top:1px solid var(--bdr2);margin-top:10px;padding-top:10px}
.mega-all-link{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-radius:var(--md-sys-shape-corner-small);font-size:.82rem;font-weight:700;color:var(--blue);text-decoration:none;transition:background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);white-space:nowrap}
.mega-all-link:hover{background:var(--bg2)}
.mega-col{flex:1}
.mega-col+.mega-col{border-inline-start:1px solid var(--bdr2);margin-inline-start:12px;padding-inline-start:12px}
.mega-col-title{font-size:.72rem;font-weight:800;color:var(--blue);letter-spacing:2px;text-transform:uppercase;padding:4px 14px 10px;display:block}
.mega-link{display:block;padding:8px 14px;border-radius:var(--md-sys-shape-corner-small);font-size:.88rem;font-weight:400;color:var(--txt);text-decoration:none;transition:background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);white-space:nowrap}
.mega-link:hover{background:var(--bg2);color:var(--blue)}
.mega-link--more{color:var(--blue);margin-top:4px}

/* ── HERO ── */
#hero{padding:72px 0 88px;position:relative;overflow:hidden;background:linear-gradient(150deg,var(--bg) 55%,var(--bg2) 100%)}
.hero-blob{position:absolute;top:-140px;left:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(31,98,142,.06) 0%,transparent 70%);pointer-events:none}
.hero-blob2{position:absolute;bottom:-100px;right:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.07) 0%,transparent 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(31,98,142,.08);border:1px solid var(--bdr);color:var(--blue);font-size:.82rem;font-weight:700;padding:7px 18px;border-radius:var(--md-sys-shape-corner-full);margin-bottom:22px;letter-spacing:.5px}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--sky);flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
.hero-h{font-size:clamp(1.75rem,4vw,2.85rem);font-weight:900;line-height:1.22;margin-bottom:18px;color:var(--txt)}
.hero-h span{color:var(--blue)}
.hero-sub{font-size:1rem;color:var(--txt2);line-height:1.92;margin-bottom:30px;max-width:540px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.trust-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--txt2)}
.trust-chk{color:var(--sky);font-weight:900;font-size:1rem}
.trust-sep{color:var(--txt3);font-size:.7rem}
.hero-cover-col{display:flex;align-items:center;justify-content:center;container-type:inline-size}
.hero-cover-img{width:125%;height:auto;display:block;border-radius:0;border:none;box-shadow:none;max-width:none;mix-blend-mode:multiply}
[data-theme="dark"] .hero-cover-img{mix-blend-mode:lighten;opacity:.85}

/* ── Hero stacked-card carousel (vector, stays crisp at any zoom) ── */
.hero-stack{
  /* Chart colours from the brand tonal palettes (blue, gold, jade) */
  --hg-teal:#4F96D4;--hg-pink:#D6A400;--hg-green:#00629D;--hg-amber:#F7BE00;--hg-indigo:#004A78;
  --sky:#004A78;
  position:relative;width:112%;aspect-ratio:1.16/1;
  -webkit-font-smoothing:antialiased
}
.hero-stack *{box-sizing:border-box}

.stack-card{
  position:absolute;inset:0;margin:auto;width:94%;height:90%;overflow:hidden;
  background:var(--card);border:1px solid var(--bdr2);border-radius:var(--rl);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 24px -8px rgba(15,23,42,.1);
  padding:1.15em 1.3em 1.25em;font-size:3.85cqw;line-height:1.2;
  direction:ltr;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums;
  transition:transform .65s cubic-bezier(.4,0,.2,1),opacity .55s var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-standard);
  transform:translateY(calc(var(--depth,0) * 15px)) translateX(calc(var(--depth,0) * 8px)) rotate(calc(var(--depth,0) * 1.4deg)) scale(calc(1 - var(--depth,0) * 0.05));
  opacity:calc(1 - var(--depth,0) * 0.13);
  z-index:calc(10 - var(--depth,0));
}
.stack-card[data-depth="0"]{box-shadow:0 2px 5px rgba(15,23,42,.05),0 18px 30px -10px rgba(15,23,42,.14),0 34px 60px -18px rgba(15,23,42,.2)}
[data-theme="dark"] .hero-stack{--sky:#99CBFF}
[data-theme="dark"] .stack-card{box-shadow:0 1px 2px rgba(0,0,0,.2),0 10px 24px -8px rgba(0,0,0,.35)}
[data-theme="dark"] .stack-card[data-depth="0"]{box-shadow:0 2px 5px rgba(0,0,0,.3),0 18px 30px -10px rgba(0,0,0,.45),0 34px 60px -18px rgba(0,0,0,.55)}
.stack-card::before{
  content:'';position:absolute;top:-30%;inset-inline-end:-20%;width:65%;aspect-ratio:1/1;
  background:radial-gradient(circle,var(--sky) 0%,transparent 72%);opacity:.14;
  filter:blur(6px);pointer-events:none;z-index:0
}
[data-theme="dark"] .stack-card::before{opacity:.2}

.stack-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:.5em;margin-bottom:1.7em}
.stack-head-left{display:flex;align-items:center;gap:.6em;min-width:0}
.stack-icon{width:2.1em;height:2.1em;border-radius:.7em;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sky),var(--blue));box-shadow:0 4px 10px rgba(14,165,233,.3)}
.stack-icon svg{width:1.05em;height:1.05em;color:#fff}
.stack-head-text{min-width:0;display:flex;flex-direction:column;gap:.18em}
.stack-title{font-size:.86em;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.stack-subtitle{font-size:.44em;font-weight:600;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stack-dot{width:.5em;height:.5em;border-radius:50%;background:#4F8168;flex-shrink:0;margin-top:.4em;box-shadow:0 0 0 3px #B9EED1;animation:pulse 2s infinite}
.stack-badge{font-size:.44em;font-weight:800;color:var(--blue);background:rgba(31,98,142,.09);padding:.6em .9em;border-radius:2em;white-space:nowrap;flex-shrink:0;margin-top:.1em}
.stack-badge.up{color:#376851;background:#C7FDDF}

.stack-body{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;transform-origin:center top}
.stack-card[data-depth="0"] .stack-body{animation:stackPop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes stackPop{from{opacity:.4;transform:translateY(6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.hg-donut-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:1.3em}
.hg-donut-wrap{position:relative;flex-shrink:0;height:min(100%,10.5em);aspect-ratio:1/1;display:flex;filter:drop-shadow(0 6px 14px rgba(15,23,42,.1))}
.hg-donut{width:100%;height:100%;transform:rotate(-90deg)}
.hg-donut circle{stroke-linecap:round;stroke-width:8}
.hg-donut-total{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hg-donut-total b{font-size:.72em;font-weight:800;color:var(--txt);line-height:1.1;letter-spacing:-.02em}
.hg-donut-total span{font-size:.36em;font-weight:700;color:var(--txt3);margin-top:.3em;text-transform:uppercase;letter-spacing:.04em}
.hg-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em;min-width:0}
.hg-legend li{display:flex;align-items:center;gap:.4em;font-size:.48em;color:var(--txt2);font-weight:600}
.hg-legend i{width:.65em;height:.65em;border-radius:.3em;flex-shrink:0;display:block}
.hg-legend .hg-legend-lbl{min-width:0;text-transform:none;letter-spacing:normal;margin-bottom:0;color:inherit;font-weight:inherit;font-size:inherit}
.hg-legend .val{margin-inline-start:auto;padding-inline-start:.6em;color:var(--txt3);font-weight:800;flex-shrink:0}

.hg-line-area{flex:1;min-height:0;display:flex;gap:.6em;align-items:stretch}
.hg-yaxis{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.hg-yaxis span{font-size:.46em;color:var(--txt2);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.hg-grid line{stroke:var(--bdr2)}
[data-theme="dark"] .hg-grid line{stroke:rgba(255,255,255,.08)}
.hg-linechart{flex:1;min-width:0;width:100%;height:100%;display:block;overflow:visible}
.hg-line-glow{opacity:.16;filter:blur(2px)}
.hg-line-main{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.15s cubic-bezier(.4,0,.2,1)}
.stack-card[data-depth="0"] .hg-line-main,
.stack-card[data-depth="0"] .hg-line-glow{stroke-dashoffset:0}
.hg-line-glow{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.15s cubic-bezier(.4,0,.2,1)}
.hg-linechart circle{opacity:0;transition:opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard) 1s}
.stack-card[data-depth="0"] .hg-linechart circle{opacity:1}
.hg-xaxis{flex-shrink:0;display:flex;justify-content:space-between;margin-top:.7em;direction:ltr}
.hg-xaxis span{font-size:.44em;color:var(--txt2);font-weight:800;letter-spacing:.01em}

.stack-kpi-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stack-kpi-val{display:flex;align-items:baseline;gap:.28em;font-size:3em;font-weight:800;color:var(--txt);letter-spacing:-.02em}
.stack-kpi-val svg{width:.38em;height:.38em;color:#4F8168;align-self:center}
.stack-kpi-lbl{font-size:.5em;color:var(--txt3);font-weight:700;margin-top:.7em;text-transform:uppercase;letter-spacing:.04em}
.stack-kpi-delta{font-size:.52em;font-weight:800;color:#376851;background:#C7FDDF;padding:.55em 1.1em;border-radius:2em;display:inline-flex;margin-top:1.1em}
.stack-kpi-spark{width:70%;height:3.6em;display:block;margin-top:1.3em;overflow:visible}

.stack-bar-area{flex:1;min-height:0;display:flex;align-items:stretch}
.stack-bar-chart{flex:1;min-width:0;width:100%;height:100%;display:block;overflow:visible}
.stack-bar-chart rect.bar{transform-origin:bottom;transition:transform var(--md-sys-motion-duration-long4) cubic-bezier(.34,1.56,.64,1)}
.stack-bar-chart rect.bar{transform:scaleY(0)}
.stack-bar-chart rect.bar:nth-of-type(1){transition-delay:.04s}
.stack-bar-chart rect.bar:nth-of-type(2){transition-delay:.11s}
.stack-bar-chart rect.bar:nth-of-type(3){transition-delay:.18s}
.stack-bar-chart rect.bar:nth-of-type(4){transition-delay:.25s}
.stack-bar-chart rect.bar:nth-of-type(5){transition-delay:.32s}
.stack-card[data-depth="0"] .stack-bar-chart rect.bar{transform:scaleY(1)}
.stack-bar-chart .val{font-size:13px;font-weight:800;fill:var(--txt);font-variant-numeric:tabular-nums;opacity:0;transition:opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard) var(--md-sys-motion-duration-long2)}
.stack-card[data-depth="0"] .stack-bar-chart .val{opacity:1}
.stack-bar-xaxis{flex-shrink:0;display:flex;justify-content:space-between;gap:.3em;margin-top:.65em;direction:ltr}
.stack-bar-xaxis span{flex:1;font-size:.46em;color:var(--txt2);font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── per-card accent identity: each new card sets --acc1/--acc2 inline ── */
.hero-stack .stack-icon{background:linear-gradient(135deg,var(--acc1,var(--sky)),var(--acc2,var(--blue)));box-shadow:0 4px 12px -2px color-mix(in srgb,var(--acc1,var(--sky)) 55%,transparent)}
.hero-stack .stack-card::before{background:radial-gradient(circle,var(--acc2,var(--sky)) 0%,transparent 72%)}
.hero-stack .stack-card::after{content:'';position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--acc1,var(--sky)),var(--acc2,var(--blue)));z-index:2;border-radius:var(--rl) var(--rl) 0 0}

/* ── mini legend (branch comparison / revenue year comparison) ── */
.hg-mini-legend{flex-shrink:0;display:flex;gap:1.2em;justify-content:center;font-size:.44em;font-weight:700;color:var(--txt2);margin-top:.6em}
.hg-mini-legend i{width:.9em;height:.42em;border-radius:.15em;display:inline-block;margin-inline-end:.35em;vertical-align:middle}

/* ── stock alert list (low stock) ── */
.hg-alert-cols{flex-shrink:0;display:flex;justify-content:space-between;font-size:.36em;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;padding-bottom:.5em;margin-bottom:.3em;border-bottom:1px solid var(--bdr2)}
.hg-alert-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.5em}
.hg-alert-row{display:flex;align-items:center;gap:.5em}
.hg-alert-name{flex:1;min-width:0;font-size:.46em;font-weight:700;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hg-alert-track{width:5.6em;height:.5em;border-radius:.3em;background:var(--bg2);overflow:hidden;flex-shrink:0;position:relative}
.hg-alert-fill{position:absolute;inset-inline-start:0;top:0;bottom:0;border-radius:.3em;width:var(--w)}
.hg-alert-fill.crit{background:linear-gradient(90deg,#BA1A1A,#DE3730)}
.hg-alert-fill.warn{background:linear-gradient(90deg,#B58A00,#F7BE00)}
.hg-alert-qty{flex-shrink:0;font-size:.42em;font-weight:800;text-align:center;padding:.35em .7em;border-radius:1em;min-width:1.6em}
.hg-alert-qty.crit{color:#BA1A1A;background:#FFDAD6}
.hg-alert-qty.warn{color:#775A00;background:#FFDF99}
[data-theme="dark"] .stack-badge.up,[data-theme="dark"] .stack-kpi-delta{color:#9ED2B5;background:#1E4F3A}
[data-theme="dark"] .stack-badge.crit,[data-theme="dark"] .hg-alert-qty.crit{color:#FFB4AB;background:#93000A}
[data-theme="dark"] .hg-alert-qty.warn{color:#FFDF99;background:#5A4300}
[data-theme="dark"] .stack-dot{box-shadow:0 0 0 3px #1E4F3A}
.stack-badge.crit{color:#BA1A1A;background:#FFDAD6}

/* ── pie chart (sales channels) — reuses .hg-donut-body/.hg-donut-wrap/.hg-legend ── */
.hg-pie{width:100%;height:100%}
.hg-pie path{stroke:var(--card);stroke-width:.6}

/* ── cash position: total/detail toggle + stacked/grouped bar transition ── */
.hg-toggle{flex-shrink:0;display:flex;justify-content:center;gap:.4em;margin-bottom:.6em}
.hg-toggle-btn{font-family:inherit;font-size:.42em;font-weight:800;padding:.5em 1.15em;border-radius:var(--md-sys-shape-corner-full);border:1px solid var(--bdr);background:var(--bg2);color:var(--txt2);cursor:pointer;transition-property:background-color,color,border-color,box-shadow,transform,opacity;transition-duration:var(--md-sys-motion-duration-short4);transition-timing-function:var(--md-sys-motion-easing-standard)}
.hg-toggle-btn.active{background:var(--acc1,var(--blue));border-color:var(--acc1,var(--blue));color:#fff}
.hg-cash-legend{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.3em 1em;font-size:.4em;font-weight:700;color:var(--txt2);margin-bottom:.5em}
.hg-cash-legend i{width:.7em;height:.7em;border-radius:50%;display:inline-block;margin-inline-end:.3em;vertical-align:middle}
.hg-cashbar-svg rect.cb-bar{x:calc(var(--tx) * 1px);y:calc(var(--ty) * 1px);width:calc(var(--tw) * 1px);height:calc(var(--th) * 1px);transition:x var(--md-sys-motion-duration-long4) cubic-bezier(.4,0,.2,1),y var(--md-sys-motion-duration-long4) cubic-bezier(.4,0,.2,1),width var(--md-sys-motion-duration-long4) cubic-bezier(.4,0,.2,1),height var(--md-sys-motion-duration-long4) cubic-bezier(.4,0,.2,1)}
.hg-cashbar-svg.is-detail rect.cb-bar{x:calc(var(--dx) * 1px);y:calc(var(--dy) * 1px);width:calc(var(--dw) * 1px);height:calc(var(--dh) * 1px)}

/* ── revenue overview: stat row + zero baseline (year-over-year) ── */
.hg-rev-stats{flex-shrink:0;display:flex;background:var(--bg2);border-radius:.8em;overflow:hidden;margin-top:.8em}
.hg-rev-stat{flex:1;padding:.6em .5em;text-align:center;display:flex;flex-direction:column;gap:.3em}
.hg-rev-stat+.hg-rev-stat{border-inline-start:1px solid var(--bdr2)}
.hg-rev-stat-lbl{font-size:.4em;font-weight:700;color:var(--txt3);line-height:1.3}
.hg-rev-stat-val{font-size:.64em;font-weight:900;color:var(--acc1,var(--blue));font-variant-numeric:tabular-nums}
.hg-grid-zero{stroke:var(--txt3)!important;stroke-width:1.4;opacity:.5}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-cover-col{display:none}
  #hero{padding:56px 0 68px}
  .hdr-nav{display:none}
}
@media(max-width:600px){
  #hero{padding:40px 0 52px}
  .hero-btns{flex-direction:column}
  .btn-p,.btn-s{width:100%;justify-content:center}
  .trust-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .trust-sep{display:none}
}

/* ── PROBLEM ── */
#problem{background:var(--dark);position:relative;overflow:hidden}
#problem .container{position:relative;z-index:1}
#problem .lbl{color:rgba(255,255,255,.45)}
.prob-head{font-size:clamp(1.45rem,3.2vw,2.2rem);font-weight:900;color:#fff;line-height:1.35;margin-bottom:24px;max-width:820px}
.prob-intro{font-size:.98rem;color:rgba(255,255,255,.68);line-height:1.98;margin-bottom:44px;max-width:740px}

.prob-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-bottom:36px}
@media(max-width:820px){.prob-split{grid-template-columns:1fr;gap:20px}}
.prob-col{display:flex;flex-direction:column;height:100%}

.cycle-box{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:var(--md-sys-shape-corner-large);padding:26px 28px;display:flex;flex-direction:column;flex:1}
.panel-label{display:inline-flex;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:var(--md-sys-shape-corner-full);padding:6px 18px;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.8);letter-spacing:.5px;margin-bottom:20px;width:fit-content}

.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}
.pain-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--md-sys-shape-corner-medium);padding:16px 15px;display:flex;gap:12px;align-items:flex-start;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.pain-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.pain-ico{font-size:1.4rem;flex-shrink:0;margin-top:2px}
.pain-x{width:22px;height:22px;border-radius:50%;background:rgba(239,68,68,.15);border:1.5px solid rgba(239,68,68,.32);display:flex;align-items:center;justify-content:center;color:#f87171;font-size:.65rem;font-weight:900;flex-shrink:0;margin-top:2px}
.pain-main{font-size:.9rem;font-weight:800;color:#fff;margin-bottom:4px;line-height:1.4}
.pain-but{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.65}
@media(max-width:600px){.pain-grid{grid-template-columns:1fr}}

.cycle-rows{display:flex;flex-direction:column;gap:0;flex:1}
.cycle-row{display:flex;align-items:flex-start;gap:14px;position:relative;padding-bottom:16px}
.cycle-row:last-child{padding-bottom:0}
.cycle-row:not(:last-child)::after{content:'';position:absolute;inset-inline-start:16px;top:32px;bottom:0;width:1.5px;background:rgba(255,255,255,.12)}
.cycle-dot{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:rgba(255,255,255,.55);flex-shrink:0;position:relative;z-index:1}
.cycle-txt .c-main{font-size:.93rem;font-weight:700;color:#fff;padding-top:6px;line-height:1.5}
.cycle-txt .c-but{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:2px}
.prob-close{border-inline-start:3px solid var(--sky);padding:18px 22px;background:rgba(255,255,255,.05);border-start-start-radius:var(--md-sys-shape-corner-medium);border-end-start-radius:var(--md-sys-shape-corner-medium);margin-top:20px}
.prob-close-main{font-size:.95rem;font-weight:800;color:#fff;margin-bottom:6px}
.prob-close-sub{font-size:.88rem;color:rgba(255,255,255,.62);line-height:1.85}
.cycle-strip{display:flex;align-items:stretch;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:var(--md-sys-shape-corner-large);padding:20px 24px;gap:0}
.cstep{flex:1;display:flex;align-items:flex-start;gap:14px}
.cstep-n{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:rgba(255,255,255,.55);flex-shrink:0;margin-top:2px}
.cstep-main{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:3px}
.cstep-sub{font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.55}
.cstep-arr{flex-shrink:0;color:rgba(255,255,255,.2);font-size:1.2rem;align-self:center;padding:0 16px}
@media(max-width:600px){.cycle-strip{flex-direction:column;gap:16px}.cstep-arr{display:none}}

/* ── WHY ── */
#why{background:var(--bg)}
.why-head{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:900;color:var(--txt);margin-bottom:20px;line-height:1.3}
.why-intro{font-size:1rem;color:var(--txt2);line-height:2;margin-bottom:36px;max-width:800px}
.why-sub{font-size:1rem;font-weight:800;color:var(--blue);margin-bottom:24px;display:flex;align-items:center;gap:10px}
.why-sub::after{content:'';flex:1;height:1px;background:var(--bdr2)}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.feat-card{background:var(--card);border:1px solid var(--bdr2);border-radius:var(--rl);padding:30px 28px;box-shadow:var(--shadow);transition:transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),border-color var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);display:flex;flex-direction:column}
.feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--bdr)}
.feat-icon{width:50px;height:50px;border-radius:var(--md-sys-shape-corner-large);background:rgba(31,98,142,.08);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:18px;flex-shrink:0}
.feat-title{font-size:1.02rem;font-weight:800;color:var(--blue);margin-bottom:12px;line-height:1.4}
.feat-body{font-size:.88rem;color:var(--txt2);line-height:1.9;flex:1}
.feat-body p{margin-bottom:10px}.feat-body p:last-child{margin-bottom:0}
@media(max-width:700px){.feat-grid{grid-template-columns:1fr}}

/* ── COMPARE ── */
#compare{background:var(--section-compare-bg);padding:88px 0}
.cmp-hd{text-align:center;margin-bottom:52px}
.cmp-hd p{color:var(--txt2);font-size:1rem;max-width:560px;margin:12px auto 0;line-height:1.9}
.cmp-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;max-width:900px;margin:0 auto}
.cmp-col-hd{padding:16px 22px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:.95rem;border-radius:var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0 0;border:1px solid}
.cmp-col-hd--bad{background:var(--cmp-bad-hd-bg);color:var(--cmp-bad-hd-color);border-color:var(--cmp-bad-hd-bdr);border-bottom:none}
.cmp-col-hd--good{background:var(--cmp-good-hd-bg);color:var(--cmp-good-hd-color);border-color:var(--cmp-good-hd-bdr);border-bottom:none}
.cmp-col-ico{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:900;flex-shrink:0}
.cmp-col-hd--bad .cmp-col-ico{background:var(--cmp-x-bg);color:#BA1A1A}
.cmp-col-hd--good .cmp-col-ico{background:var(--cmp-chk-bg);color:#376851}
.cmp-cell{padding:16px 20px;display:flex;gap:11px;align-items:flex-start;border:1px solid;border-top:none}
.cmp-cell--bad{background:var(--cmp-bad-cell-bg);border-color:var(--cmp-bad-cell-bdr)}
.cmp-cell--good{background:var(--cmp-good-cell-bg);border-color:var(--cmp-good-cell-bdr)}
.cmp-cell--bad.cmp-last{border-radius:0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large)}
.cmp-cell--good.cmp-last{border-radius:0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large)}
.cmp-x{width:18px;height:18px;border-radius:50%;background:var(--cmp-x-bg);border:1.5px solid var(--cmp-x-bdr);display:flex;align-items:center;justify-content:center;color:#BA1A1A;font-size:.55rem;font-weight:900;flex-shrink:0;margin-top:3px}
.cmp-chk{width:18px;height:18px;border-radius:50%;background:var(--cmp-chk-bg);border:1.5px solid var(--cmp-chk-bdr);display:flex;align-items:center;justify-content:center;color:#376851;font-size:.65rem;font-weight:900;flex-shrink:0;margin-top:3px}
/* Compare table: Jade for "with Edara", Error tones for "without" (brand tonal palettes) */
[data-theme="dark"] .cmp-chk,[data-theme="dark"] .cmp-col-hd--good .cmp-col-ico{color:#9ED2B5}
[data-theme="dark"] .cmp-x,[data-theme="dark"] .cmp-col-hd--bad .cmp-col-ico{color:#FF897D}
.cmp-title{font-size:.87rem;font-weight:800;color:var(--cmp-title-color);margin-bottom:3px}
.cmp-body{font-size:.78rem;color:var(--cmp-body-color);line-height:1.6}
@media(max-width:640px){
  #compare{padding:60px 0}
  .cmp-hd{margin-bottom:32px}
  .cmp-cols{gap:0 8px}
  .cmp-col-hd{padding:11px 10px;font-size:.85rem;gap:6px}
  .cmp-col-ico{width:20px;height:20px;font-size:.55rem}
  .cmp-cell{padding:12px 10px;gap:8px}
  .cmp-title{font-size:.88rem}
  .cmp-body{font-size:.78rem;line-height:1.55}
  .cmp-x,.cmp-chk{width:16px;height:16px;font-size:.55rem}
}
@media(max-width:480px){
  #compare{padding:52px 0}
  .cmp-cols{gap:0 6px}
  .cmp-col-hd{padding:10px 8px;font-size:.82rem}
  .cmp-col-ico{display:none}
  .cmp-cell{padding:11px 10px;gap:8px;align-items:center}
  .cmp-title{font-size:.9rem;margin-bottom:0;line-height:1.4}
  .cmp-body{display:none}
  .cmp-x,.cmp-chk{width:18px;height:18px;font-size:.6rem;flex-shrink:0;margin-top:0}
}
@media(max-width:360px){
  .cmp-cols{grid-template-columns:1fr;gap:0}
  .cmp-col-hd--good{margin-top:12px;border-radius:var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0 0;border-bottom:none}
  .cmp-cell--bad.cmp-last{border-radius:0;border-bottom:1px solid var(--cmp-bad-cell-bdr)}
  .cmp-cell--good.cmp-last{border-radius:0 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large)}
}

/* ── FEATURES DETAIL ── */
#features{background:var(--bg2)}
.rm-header{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:center;margin-bottom:44px}
.rm-intro{font-size:1rem;color:var(--txt2);line-height:2;margin-bottom:10px;max-width:680px}
.rm-note-top{font-size:.97rem;font-weight:700;color:var(--txt);margin-bottom:0}
.rm-header--center{grid-template-columns:1fr;text-align:center}
.rm-header--center .rm-intro{margin-inline:auto;max-width:760px}
@media(max-width:768px){
  .rm-header{grid-template-columns:1fr;gap:20px}
}
.rm-cards{display:flex;flex-direction:column;gap:14px}
.rm-card{background:var(--card);border:1px solid var(--bdr2);border-radius:var(--rl);padding:28px 32px;display:grid;grid-template-columns:68px 1fr;gap:26px;box-shadow:var(--shadow);transition:border-color var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard)}
.rm-card:hover{border-color:var(--bdr);box-shadow:var(--shadow-md)}
.rm-num{width:48px;height:48px;border-radius:50%;background:var(--md-sys-color-primary-filled);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:900;flex-shrink:0;box-shadow:0 4px 14px rgba(31,98,142,.22);margin-top:4px}
.rm-content-title{font-size:1.04rem;font-weight:800;color:var(--blue);margin-bottom:10px}
.rm-content-body{font-size:.89rem;color:var(--txt2);line-height:1.92;margin-bottom:14px}
.rm-outcome{background:rgba(31,98,142,.06);border-inline-start:3px solid var(--blue);border-start-start-radius:var(--md-sys-shape-corner-small);border-end-start-radius:var(--md-sys-shape-corner-small);padding:12px 16px}
.rm-outcome-lbl{font-size:.72rem;font-weight:800;color:var(--blue);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}
.rm-outcome-txt{font-size:.85rem;color:var(--txt2);line-height:1.75}
.rm-note{margin-top:36px;background:rgba(31,98,142,.06);border:1.5px solid var(--bdr);border-radius:var(--r);padding:22px 26px}
.rm-note p{font-size:.9rem;color:var(--txt2);line-height:1.85}
.rm-note p+p{margin-top:10px}
.rm-note-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.rm-note strong{color:var(--blue)}
@media(max-width:600px){.rm-card{grid-template-columns:1fr;gap:14px}}

/* ── SNAKE ROADMAP ── */
.rm-snake{margin-bottom:0}
.rm-srow{display:grid;gap:0;position:relative}
.rm-srow--3{grid-template-columns:1fr 24px 1fr 24px 1fr}
.rm-srow--ltr{direction:ltr}
.rm-srow--1{display:flex}
.rm-snode{background:var(--card);border:1px solid var(--bdr2);border-radius:var(--r);padding:20px 18px;box-shadow:var(--shadow);transition:border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.rm-srow--ltr .rm-snode{direction:rtl}
[dir="ltr"] .rm-srow--ltr .rm-snode{direction:ltr}
/* English reads left to right, so the snake is mirrored: alternate rows run
   right to left and each turn drops on the opposite side. */
[dir="ltr"] .rm-srow--ltr{direction:rtl}
.rm-snode--w{flex:1}
.rm-snode:hover{border-color:var(--bdr);box-shadow:var(--shadow-md)}
.rm-snum2{width:34px;height:34px;border-radius:50%;background:var(--md-sys-color-primary-filled);color:#fff;font-size:.82rem;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(31,98,142,.22);margin-bottom:10px;flex-shrink:0}
.rm-stitle{font-size:.92rem;font-weight:800;color:var(--blue);margin-bottom:7px;line-height:1.4}
.rm-sbody{font-size:.81rem;color:var(--txt2);line-height:1.88;margin-bottom:10px}
.rm-soutcome{background:rgba(31,98,142,.06);border-inline-start:3px solid var(--blue);border-start-start-radius:var(--md-sys-shape-corner-small);border-end-start-radius:var(--md-sys-shape-corner-small);padding:9px 12px;margin-top:8px}
.rm-soutcome-lbl{font-size:.65rem;font-weight:800;color:var(--blue);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px}
.rm-soutcome-txt{font-size:.78rem;color:var(--txt2);line-height:1.7}
.rm-sconn{display:flex;align-items:center;justify-content:center;position:relative;align-self:center}
.rm-sconn::before{content:'';width:100%;height:2px;background:rgba(31,98,142,.35)}
.rm-sturn{height:20px;position:relative;overflow:visible}
.rm-sturn::before{content:'';position:absolute;width:2px;background:rgba(31,98,142,.35);top:0;bottom:0}
[data-theme="dark"] .rm-sconn::before{background:#ffc400;opacity:.35}
[data-theme="dark"] .rm-sturn::before{background:#ffc400;opacity:.35}
.rm-sturn--l::before{left:calc((100% - 48px)/6 + 1px)}
.rm-sturn--l::after{left:calc((100% - 48px)/6 + 1px);transform:translateX(-50%)}
.rm-sturn--r::before{right:calc((100% - 48px)/6 + 1px)}
.rm-sturn--r::after{right:calc((100% - 48px)/6 + 1px);transform:translateX(50%)}
[dir="ltr"] .rm-sturn--l::before,[dir="ltr"] .rm-sturn--l::after{left:auto;right:calc((100% - 48px)/6 + 1px)}
[dir="ltr"] .rm-sturn--l::after{transform:translateX(50%)}
[dir="ltr"] .rm-sturn--r::before,[dir="ltr"] .rm-sturn--r::after{right:auto;left:calc((100% - 48px)/6 + 1px)}
[dir="ltr"] .rm-sturn--r::after{transform:translateX(-50%)}
@media(max-width:768px){
  .rm-srow--3,.rm-srow--ltr{grid-template-columns:1fr;direction:rtl}
  [dir="ltr"] .rm-srow--3,[dir="ltr"] .rm-srow--ltr{direction:ltr}
  .rm-sconn{display:none}
  .rm-sturn{display:none}
  .rm-srow--3,.rm-srow--ltr,.rm-srow--1{display:flex;flex-direction:column;gap:12px}
  /* the rows stack too, with the same gap as the cards inside a row */
  .rm-snake{display:flex;flex-direction:column;gap:12px}
  /* the wide card's side-by-side paragraphs (an inline grid) go one under the other */
  .rm-snode--w [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:10px!important}
}

/* ── BENEFITS ── */
#benefits{background:var(--dark);position:relative;overflow:hidden}
#benefits .lbl{color:rgba(255,255,255,.45)}
#benefits .h2{color:#fff;text-align:center}
.ben-header{text-align:center;margin-bottom:52px;position:relative;z-index:1}
.ben-header .lbl{display:inline-block}
.ben-intro{font-size:1.02rem;color:rgba(255,255,255,.66);line-height:1.9;max-width:660px;margin:0 auto}
.ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1}
.ben-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-top:2.5px solid #99cbff;border-radius:var(--r);padding:24px 22px;display:flex;flex-direction:column;gap:11px;transition:background var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard)}
.ben-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.2)}
.ben-ico{display:none}
.ben-title{font-size:.97rem;font-weight:700;color:#fff;line-height:1.4}
.ben-desc{font-size:.85rem;color:rgba(255,255,255,.8);line-height:1.8;flex:1}
@media(max-width:900px){.ben-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.ben-grid{grid-template-columns:1fr}}

/* ── FAQ ── */
#faq{background:var(--bg2)}
.faq-header{margin-bottom:52px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.faq-item{border:1px solid var(--bdr2);border-inline-start:3px solid transparent;border-radius:var(--r);overflow:hidden;transition:border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),border-inline-start-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);background:var(--faq-bg)}
.faq-item.open{border-color:rgba(31,98,142,.18);border-inline-start-color:var(--blue);box-shadow:var(--shadow)}
.faq-q{width:100%;background:transparent;border:none;padding:18px 20px;font-family:'Janna LT','Janna LT Fallback','Cairo',sans-serif;font-size:.95rem;font-weight:700;color:var(--txt);text-align:start;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);line-height:1.45}
.faq-q:hover{background:rgba(31,98,142,.03)}
[data-theme="dark"] .faq-q:hover{background:rgba(74,159,212,.06)}
.faq-arr{width:24px;height:24px;border-radius:50%;background:rgba(31,98,142,.08);display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--blue);flex-shrink:0;transition:transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.faq-item.open .faq-arr{transform:rotate(180deg);background:var(--md-sys-color-primary-filled);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard)}
.faq-ai{padding:0 20px 18px;font-size:.88rem;color:var(--txt2);line-height:1.9;background:transparent}
.faq-ai p{margin-bottom:8px}.faq-ai p:last-child{margin-bottom:0}
@media(max-width:700px){.faq-list{grid-template-columns:1fr}}

/* ── FINAL CTA ── */
#final{text-align:center;position:relative;overflow:hidden;background:var(--dark)}
#benefits+#final{background:color-mix(in srgb,var(--dark) 80%,#00629d);border-top:1px solid rgba(255,255,255,.1)}
#clients{background:var(--bg2)}
.final-in{position:relative}
.final-h{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-bottom:18px;color:#fff}
.final-h span{color:#bfdbfe}
.final-sub{font-size:1.02rem;color:rgba(255,255,255,.7);max-width:620px;margin:0 auto 40px;line-height:1.9}
.final-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
#final .lbl{color:rgba(255,255,255,.4)}
/* Demo button in Edara Gold, like the header button (brand pairing: gold on navy) */
#final .btn-p{background:#F7BE00;color:#251A00}
#final .btn-p:hover{background:#D6A400;color:#251A00}
#final .btn-s{color:#fff;border-color:rgba(255,255,255,.3)}
#final .btn-s:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* ── FOOTER ── */
footer{background:var(--blue-d);padding:28px 0;text-align:center;color:rgba(255,255,255,.4);font-size:.82rem}
footer a{color:rgba(255,255,255,.5);text-decoration:none}
footer a:hover{color:#fff}

/* ── DIVIDERS / SEPARATORS ── */
.section-divider{height:1px;background:var(--bdr2);margin:0}
.sep-cta{background:rgba(31,98,142,.06);border:1.5px solid var(--bdr);border-radius:var(--rl);padding:48px 40px;text-align:center}
[data-theme="dark"] .sep-cta{background:rgba(74,159,212,.06)}
.sep-cta h2{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:900;color:var(--txt);margin-bottom:22px;line-height:1.45}
.sep-cta h2 span{color:var(--blue)}
.sep-wrap{padding:64px 0}

/* ── HAMBURGER / MOBILE NAV ── */
.hbg{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:transparent;border:none;cursor:pointer;padding:4px;border-radius:var(--md-sys-shape-corner-small);transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);flex-shrink:0}
.hbg:hover{background:var(--bg2)}
.hbg-bar{width:22px;height:2px;background:var(--txt);border-radius:var(--md-sys-shape-corner-extra-small);transition:transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard),opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard)}
.hbg[aria-expanded="true"] .hbg-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hbg[aria-expanded="true"] .hbg-bar:nth-child(2){opacity:0}
.hbg[aria-expanded="true"] .hbg-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:960px){.hdr-nav{display:none}.hbg{display:flex}}
.mob-nav{display:none;background:var(--hdr-bg);border-bottom:1px solid var(--hdr-bdr)}
.mob-nav.open{display:block}
.mob-nav-inner{padding:16px 20px 20px;max-height:80vh;overflow-y:auto}
.mob-summary{display:block;padding:11px 12px;border-radius:var(--md-sys-shape-corner-small);font-size:.95rem;color:var(--txt2);text-decoration:none;font-weight:500;transition:background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);cursor:pointer}
.mob-summary:hover{background:var(--bg2);color:var(--txt)}
.mob-summary--acc{display:flex;align-items:center;justify-content:space-between;list-style:none}
.mob-summary--acc::-webkit-details-marker{display:none}
.mob-chevron{font-size:1.1rem;color:var(--txt3);transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);line-height:1}
.mob-details[open] .mob-chevron{transform:rotate(90deg)}
.mob-detail-body{padding:2px 0 6px 0}
.mob-link{display:block;padding:8px 20px;border-radius:var(--md-sys-shape-corner-small);font-size:.9rem;color:var(--txt2);text-decoration:none;transition:background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.mob-link:hover{background:var(--bg2);color:var(--txt)}
.mob-section-title{font-size:.7rem;font-weight:800;color:var(--blue);letter-spacing:2px;text-transform:uppercase;padding:10px 20px 4px;display:block}
.mob-cta-wrap{padding-top:12px;margin-top:4px;border-top:1px solid var(--bdr2)}
.mob-nav-cta{display:block;text-align:center;background:var(--dark);color:#fff;padding:12px;border-radius:var(--md-sys-shape-corner-medium);font-weight:700;text-decoration:none;font-size:.95rem;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.mob-nav-cta:hover{background:var(--blue-l)}

/* ── RESPONSIVE ── */
@media(max-width:600px){
  .container{padding:0 16px}
  section{padding:64px 0}
  .final-btns{flex-direction:column}
  .btn-s,.btn-p{width:100%;justify-content:center}
  .sep-cta{padding:36px 20px}
  .h2{font-size:clamp(1.5rem,5.5vw,2.2rem)}
  .sub{font-size:.95rem}
  .lbl{font-size:.72rem;letter-spacing:1.8px}
  .pain-grid{gap:10px}
  .pain-card{padding:14px 12px}
  .feat-card{padding:22px 18px}
  .rm-note{padding:18px 16px}
  .rm-note-btns{flex-direction:column}
  .rm-note-btns .btn-p,.rm-note-btns .btn-s{width:100%;justify-content:center}
  .faq-header{margin-bottom:36px}
  /* header actions don't fit alongside the full logo at phone widths — the CTA
     button is redundant here since the mobile drawer has its own (.mob-nav-cta) */
  .hdr-in{padding:0 16px;gap:10px}
  .hdr-btn{display:none}
}
@media(max-width:340px){
  .theme-toggle{display:none}
}

/* ── FOOTER ── */
:root{--ftr-bg:#0a1525;--ftr-top-bdr:rgba(255,255,255,.06);--ftr-bottom-bdr:rgba(255,255,255,.08)}
.ftr{background:var(--ftr-bg);color:#94a3b8;font-family:'Janna LT','Janna LT Fallback','Cairo',sans-serif}
.ftr-top{max-width:1160px;margin:0 auto;padding:60px 24px 48px;display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px 32px;border-bottom:1px solid var(--ftr-top-bdr)}
.ftr-brand{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.ftr-logo-img{height:32px;width:auto;opacity:.9}
.ftr-tagline{font-size:.84rem;line-height:1.8;color:#8a99ae;max-width:260px}
.ftr-social{display:flex;gap:10px;margin-top:4px}
.ftr-social-link{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--md-sys-shape-corner-small);background:rgba(255,255,255,.05);color:#8a99ae;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);border:1px solid rgba(255,255,255,.06)}
.ftr-social-link:hover{background:rgba(74,159,212,.15);color:#4a9fd4;border-color:rgba(74,159,212,.2)}
.ftr-col{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:start}
.ftr-col-title{font-size:.78rem;font-weight:800;color:#e2e8f0;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
.ftr-link{font-size:.85rem;color:#8a99ae;text-decoration:none;transition:color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);line-height:1.4}
.ftr-link:hover{color:#4a9fd4}
.ftr-bottom{max-width:1160px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ftr-copy{font-size:.8rem;color:#7f8ea4}
.ftr-legal{display:flex;align-items:center;gap:10px}
.ftr-legal-link{font-size:.8rem;color:var(--md-sys-color-inverse-on-surface);text-decoration:none;transition:color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.ftr-legal-link:hover{color:#94a3b8}
.ftr-legal-sep{color:#334155}
/* Brand + four link columns is too tight below ~1024px: brand gets its own row. */
@media(max-width:1024px){
  .ftr-top{grid-template-columns:repeat(4,1fr);gap:36px 24px}
  .ftr-brand{grid-column:1/-1}
}
@media(max-width:768px){
  .ftr-top{grid-template-columns:1fr 1fr;gap:32px 24px}
  .ftr-brand{grid-column:1/-1}
  .ftr-tagline{max-width:100%}
  .ftr-bottom{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 24px}
}
/* Phones keep two columns: four stacked lists (~37 links) would make the
   footer several screens long. Links are short enough to sit side by side. */
@media(max-width:480px){
  .ftr-top{gap:28px 16px;padding:44px 16px 36px}
  /* Taller tap area, same rhythm: padding added, column gap taken back. */
  .ftr-col{gap:4px}
  .ftr-link{font-size:.82rem;padding:5px 0}
}

/* English feature pages set some copy in the system UI font (was an inline style, hence !important). */
.f-sys{font-family:system-ui,sans-serif!important}

/* Demo form: reCAPTCHA widget slot (304x78), reserved so the button does not jump when it loads. */
.rd-captcha{min-height:78px;margin:4px 0 14px}

/* Pricing: both billing periods as a plain table (tools/pricing.mjs). */
.pr-sum{max-width:960px;margin:28px auto 0;padding:0 16px;overflow-x:auto}
.pr-sum table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--bdr2);border-radius:var(--md-sys-shape-corner-large);overflow:hidden;font-size:.9rem}
.pr-sum caption{caption-side:top;text-align:start;color:var(--txt2);font-size:.85rem;padding:0 4px 10px}
.pr-sum th,.pr-sum td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--bdr2)}
.pr-sum thead th{background:var(--bg2);color:var(--txt2);font-size:.78rem;font-weight:700;line-height:1.5}
.pr-sum tbody th{text-align:start;color:var(--txt);font-weight:800}
.pr-sum td{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums}
.pr-sum tbody tr:last-child>*{border-bottom:0}
@media (max-width:600px){.pr-sum table{min-width:560px}}

/* ── MD3 foundations: focus, state layers, touch targets ──────────────── */

/* Focus: a visible ring for keyboard users on every control. */
:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:2px}

/* State layers: pressed and keyboard-focused buttons get a 10% overlay of
   their own text colour (hover keeps the brand's existing treatment). */
:is(button,.btn-p,.btn-s,.hdr-btn,.pr-btn,.lang-switch,.mob-nav-cta):is(:active,:focus-visible){
  --md-state:color-mix(in srgb,currentColor calc(var(--md-sys-state-pressed-opacity) * 100%),transparent);
  background-image:linear-gradient(var(--md-state),var(--md-state));
}

/* Touch targets: at least 48×48 whatever the control's size, without
   changing how it looks (inset resolves against the control's own box). */
:is(.theme-toggle,.lang-switch,.hbg,.ftr-social-link){position:relative}
:is(.theme-toggle,.lang-switch,.hbg,.ftr-social-link)::after{content:"";position:absolute;inset:min(0px,calc(50% - 24px))}

/* ── Mobile demo bar (built by nav-loader.js initCtaBar) ─────────────────────
   Phones only: the header's demo button is hidden under 600px. Slides in past
   the first screen and out whenever another demo CTA or the footer is visible;
   visibility:hidden while out, so it never takes keyboard focus. */
.cta-bar{display:none}
@media(max-width:600px){
  .cta-bar{position:fixed;inset-inline:0;bottom:0;z-index:150;display:flex;align-items:center;gap:10px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--bdr);
    box-shadow:0 -6px 24px rgba(15,23,42,.10);transform:translateY(110%);visibility:hidden;
    transition:transform .25s ease,visibility 0s linear .25s}
  .cta-bar.show{transform:none;visibility:visible;transition:transform .25s ease}
  .cta-bar-btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;
    background:#ffc400;color:#1a1200;font-weight:800;font-size:.92rem;line-height:1.3;text-align:center;
    border-radius:var(--md-sys-shape-corner-small);text-decoration:none}
  .cta-bar-btn:active{background:#e6b000}
  .cta-bar a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
  /* room so the bar never covers the end of the page */
  body.has-cta-bar{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
}
@media(max-width:600px) and (prefers-reduced-motion:reduce){.cta-bar,.cta-bar.show{transition:none}}

/* ── SMART HEADER (nav-loader.js sets the classes) ──
   .at-top    : over the hero, no fill, so it blends into the page
   .is-hidden : scrolling down, slid out of the way
   otherwise  : scrolling up, back as frosted glass */
.hdr{transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
.hdr .hdr-main-wrap{transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
.hdr.is-scrolled{background:var(--hdr-bg);background:color-mix(in srgb,var(--hdr-bg) 78%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 6px 24px -12px rgba(15,30,48,.25)}
.hdr.at-top:not(.menu-open){background:transparent;box-shadow:none}
.hdr.at-top:not(.menu-open) .hdr-main-wrap{border-bottom-color:transparent}
.hdr.is-hidden{transform:translateY(-100%)}
/* With no fill at the top, the hero's background and corner blob must run up
   behind the header (64px bar + 1px border); stopping under it left a pale
   band across the top of the page. */
#hero{margin-top:-65px;padding-top:137px}
@media(max-width:960px){#hero{padding-top:121px}}
@media(max-width:600px){#hero{padding-top:105px}}
/* The other page openers do the same with a transparent top border their
   background paints under, so their padding rules stay as they are. */
.v2-hero,.crs-hero,.ct-hero,.pt-hero,.pr-hero,.lrn-hero{margin-top:-65px;border-top:65px solid transparent;background-origin:border-box}
@media(prefers-reduced-motion:reduce){.hdr,.hdr .hdr-main-wrap{transition:none}}

/* ── HERO: centred, tinted, integrations row ── */
#hero{background:color-mix(in srgb,var(--blue) 11%,var(--bg));padding-bottom:72px}
.hero-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-center .hero-h{font-size:clamp(2.2rem,5vw,4rem);font-weight:700;line-height:1.3;color:var(--dark)}
[data-theme="dark"] .hero-center .hero-h{color:var(--txt)}
.hero-center .hero-sub{max-width:760px;margin-inline:auto;font-size:1.12rem}
.hero-center .hero-btns,.hero-center .trust-bar{justify-content:center}
.hero-center .trust-bar{margin-top:18px}
.hero-logos{direction:ltr;width:min(640px,100%);margin-top:34px;padding:10px 0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.hero-logos-track{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:marqueeL 36s linear infinite}
.hero-logos:hover .hero-logos-track{animation-play-state:paused}
.hero-logos li{flex-shrink:0;margin-right:14px;display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:var(--card);border:1px solid var(--bdr2);box-shadow:var(--shadow);overflow:hidden}
.hero-logos img{width:40px;height:40px;object-fit:contain;border-radius:6px;transform:scale(var(--k,1))}
@keyframes marqueeL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hero-logos-track{animation:none}}
@media(max-width:600px){
  #hero{padding-bottom:52px}
  .hero-center .hero-sub{font-size:1rem}
  .hero-logos{margin-top:28px}
  .hero-logos li{margin-right:10px}
  .hero-logos li{width:52px;height:52px;border-radius:14px}
  .hero-logos img{width:34px;height:34px}
}

/* ── HERO: word highlights ── */
.hero-center .hero-h .hl-line{position:relative;display:inline-block;color:inherit}
.hl-line svg{position:absolute;left:-.26em;top:-.06em;width:calc(100% + .52em);height:calc(100% + .14em);overflow:visible;pointer-events:none}
.hl-line path{fill:none;stroke:var(--sky);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:hl-draw 1.1s cubic-bezier(.65,0,.35,1) .35s forwards}
html[dir="rtl"] .hl-line svg{transform:scaleX(-1)}
/* Light gold #FFDF99 from the brand guidelines, for contrast with the blue text */
.hl-mark{background:linear-gradient(#ffdf99,#ffdf99) no-repeat 0 86%/0 34%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.08em;animation:hl-sweep .9s cubic-bezier(.65,0,.35,1) .9s forwards}
/* Dark theme: the phrase itself turns Edara Gold (gold on navy), over Edara Blue tone 30 */
[data-theme="dark"] .hero-h .hl-mark{color:#F7BE00;background-image:linear-gradient(#004A78,#004A78)}
html[dir="rtl"] .hl-mark{background-position:100% 86%}
/* Edara Gold for a heading word on the navy band (brand pairing: gold on navy) */
.hl-gold{color:#F7BE00}
.hl-em{font-weight:700;color:var(--dark)}
[data-theme="dark"] .hl-em{color:var(--txt)}
@keyframes hl-draw{to{stroke-dashoffset:0}}
@keyframes hl-sweep{to{background-size:100% 34%}}
@media(prefers-reduced-motion:reduce){
  .hl-line path{animation:none;stroke-dashoffset:0}
  .hl-mark{animation:none;background-size:100% 34%}
}

/* Hero headline: the last words are typed in, with a blinking cursor.
   The text is revealed with clip-path (no letter splitting, so Arabic stays joined);
   the cursor (::after) moves with it as a percentage of the phrase's width. */
.hero-h .hl-type{position:relative;display:inline-block;color:#00629D}
[data-theme="dark"] .hero-h .hl-type{color:#99CBFF}
.hero-h .hl-type>span{color:inherit;display:inline-block;clip-path:inset(0 100% 0 0);animation:hl-type-ltr 1.1s steps(8) .8s forwards}
html[dir="rtl"] .hero-h .hl-type>span{clip-path:inset(0 0 0 100%);animation-name:hl-type-rtl}
.hl-type::after{content:"";position:absolute;top:.12em;bottom:.12em;inset-inline-start:0;width:3px;margin-inline-start:2px;background:currentColor;animation:hl-caret-move 1.1s steps(8) .8s forwards,hl-caret-blink .8s step-end infinite}
@keyframes hl-type-ltr{to{clip-path:inset(0 0 0 0)}}
@keyframes hl-type-rtl{to{clip-path:inset(0 0 0 0)}}
@keyframes hl-caret-move{to{inset-inline-start:100%}}
@keyframes hl-caret-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hero-h .hl-type>span,html[dir="rtl"] .hero-h .hl-type>span{animation:none;clip-path:none}
  .hl-type::after{display:none}
}

/* ── HERO strip: wordmark tiles ── */
.hero-logos li.wide{width:auto;padding-inline:16px}
.hero-logos li.wide img{width:auto;height:var(--h);border-radius:0;transform:none}
/* brand logos keep their colours: tiles stay white in dark mode, like the clients strip */
[data-theme="dark"] .hero-logos li,[data-theme="dark"] .integ-item-inner{background:#eef2f7;border-color:rgba(255,255,255,.14)}
@media(max-width:600px){.hero-logos li.wide{padding-inline:12px}.hero-logos li.wide img{height:calc(var(--h)*.85)}}

/* ── INTEGRATIONS: two rings — stores close to Edara, other tools on the outer orbit ── */
#integrations .integ-hub--10{max-width:620px}
#integrations .integ-hub--10 .integ-center{width:124px;height:124px}
#integrations .integ-hub--10 .integ-item-inner{width:92px;height:92px;padding:18px}
#integrations .integ-hub--10 .integ-item--wide .integ-item-inner{padding:12px}
#integrations .integ-item--1{left:50.0%;top:22.0%}
#integrations .integ-item--2{left:76.63%;top:41.35%}
#integrations .integ-item--3{left:66.46%;top:72.65%}
#integrations .integ-item--4{left:33.54%;top:72.65%}
#integrations .integ-item--5{left:23.37%;top:41.35%}
#integrations .integ-item--6{left:75.27%;top:15.21%}
#integrations .integ-item--7{left:90.9%;top:63.29%}
#integrations .integ-item--8{left:50.0%;top:93.0%}
#integrations .integ-item--9{left:9.1%;top:63.29%}
#integrations .integ-item--10{left:24.73%;top:15.21%}
#integrations .integ-hub--10 :is(.integ-item--6,.integ-item--7,.integ-item--8,.integ-item--9,.integ-item--10) .integ-item-inner{width:78px;height:78px;padding:15px}
#integrations .integ-hub--10 .integ-item--wide:is(.integ-item--6,.integ-item--7,.integ-item--8,.integ-item--9,.integ-item--10) .integ-item-inner{padding:14px}
.integ-orbit{fill:none;stroke:var(--bdr2);stroke-width:1;vector-effect:non-scaling-stroke}
#integrations .integ-item--7 .integ-item-inner{animation:integFloat1 7.8s ease-in-out infinite}
#integrations .integ-item--8 .integ-item-inner{animation:integFloat2 6.8s ease-in-out infinite}
#integrations .integ-item--9 .integ-item-inner{animation:integFloat3 8.2s ease-in-out infinite}
#integrations .integ-item--10 .integ-item-inner{animation:integFloat4 7.2s ease-in-out infinite}
@media(max-width:640px){
  #integrations .integ-hub--10{max-width:330px}
  #integrations .integ-item--1{left:50.0%;top:25.0%}#integrations .integ-item--2{left:73.78%;top:42.27%}#integrations .integ-item--3{left:64.69%;top:70.23%}#integrations .integ-item--4{left:35.31%;top:70.23%}#integrations .integ-item--5{left:26.22%;top:42.27%}#integrations .integ-item--6{left:74.1%;top:16.83%}#integrations .integ-item--7{left:88.99%;top:62.67%}#integrations .integ-item--8{left:50.0%;top:91.0%}#integrations .integ-item--9{left:11.01%;top:62.67%}#integrations .integ-item--10{left:25.9%;top:16.83%}
  #integrations .integ-orbit--in{r:25px}#integrations .integ-orbit--out{r:41px}
  #integrations .integ-hub--10 .integ-center{width:82px;height:82px}
  #integrations .integ-hub--10 .integ-item-inner{width:56px;height:56px;padding:11px}
  #integrations .integ-hub--10 .integ-item--wide .integ-item-inner{padding:7px}
  #integrations .integ-hub--10 :is(.integ-item--6,.integ-item--7,.integ-item--8,.integ-item--9,.integ-item--10) .integ-item-inner{width:48px;height:48px;padding:9px}
  #integrations .integ-hub--10 .integ-item--wide:is(.integ-item--6,.integ-item--7,.integ-item--8,.integ-item--9,.integ-item--10) .integ-item-inner{padding:6px}
}
@media(prefers-reduced-motion:reduce){#integrations .integ-item-inner{animation:none}}