/* ============================================================================
   Neptune.ly — corporate site design system
   Derived from Neptune Odyssey token doctrine (M3 + M3 Expressive) and themed
   with the Neptune 2026 brand: Navy #07315F · Coral #EB4E4D · Sky #3BC1EE
   Light + dark · LTR + RTL · reduced-motion safe · no external dependencies.
   ========================================================================== */

/* ---------- token layer (Neptune corporate brandprint) ---------- */
:root{
  /* brand constants */
  --npt-brand-navy:#07315F;
  --npt-brand-coral:#EB4E4D;
  --npt-brand-sky:#3BC1EE;
  --npt-brand-slate:#3A4F54;
  --npt-brand-teal:#00A8AE;
  --npt-brand-beige:#F0CE9D;

  /* M3 roles — light */
  --md-sys-color-primary:oklch(0.34 0.095 255);            /* navy */
  --md-sys-color-on-primary:oklch(0.99 0.01 255);
  --md-sys-color-primary-container:oklch(0.91 0.045 255);
  --md-sys-color-on-primary-container:oklch(0.24 0.08 255);
  --md-sys-color-secondary:oklch(0.44 0.035 230);           /* slate */
  --md-sys-color-on-secondary:oklch(0.99 0.01 230);
  --md-sys-color-secondary-container:oklch(0.92 0.02 230);
  --md-sys-color-on-secondary-container:oklch(0.26 0.03 230);
  --md-sys-color-tertiary:oklch(0.62 0.19 25);              /* coral */
  --md-sys-color-on-tertiary:oklch(0.99 0.01 25);
  --md-sys-color-tertiary-container:oklch(0.92 0.06 25);
  --md-sys-color-on-tertiary-container:oklch(0.3 0.12 25);
  --md-sys-color-info:oklch(0.72 0.13 230);                 /* sky */
  --md-sys-color-success:oklch(0.545 0.13 152);
  --md-sys-color-error:oklch(0.52 0.2 27);
  --md-sys-color-on-error:oklch(0.99 0.02 27);
  --md-sys-color-background:oklch(0.985 0.005 250);
  --md-sys-color-on-background:oklch(0.17 0.03 255);
  --md-sys-color-surface:oklch(0.985 0.005 250);
  --md-sys-color-on-surface:oklch(0.17 0.03 255);
  --md-sys-color-surface-variant:oklch(0.9 0.015 250);
  --md-sys-color-on-surface-variant:oklch(0.4 0.025 252);
  --md-sys-color-outline:oklch(0.62 0.02 252);
  --md-sys-color-outline-variant:oklch(0.87 0.012 250);
  --md-sys-color-surface-container-lowest:oklch(1 0 0);
  --md-sys-color-surface-container-low:oklch(0.968 0.006 250);
  --md-sys-color-surface-container:oklch(0.95 0.008 250);
  --md-sys-color-surface-container-high:oklch(0.93 0.01 250);
  --md-sys-color-surface-container-highest:oklch(0.91 0.012 250);
  --md-sys-color-inverse-surface:oklch(0.24 0.04 255);
  --md-sys-color-inverse-on-surface:oklch(0.96 0.006 250);
  --md-sys-color-scrim:oklch(0.08 0.02 255);

  /* type */
  --npt-font-display:'Nunito';
  --npt-font-text:'Nunito';
  --npt-font-display-ar:'Beiruti';
  --npt-font-text-ar:'Beiruti';
  --npt-display-tracking:-0.02em;
  --npt-display-weight:800;

  /* shape (Neptune scale) */
  --npt-corner-xs:8px; --npt-corner-sm:12px; --npt-corner-md:16px;
  --npt-corner-lg:24px; --npt-corner-xl:32px; --npt-corner-2xl:44px;
  --npt-corner-full:999px;

  /* motion — smooth-fluid */
  --npt-ease-standard:cubic-bezier(.2,0,0,1);
  --npt-ease-emphasized:cubic-bezier(.2,0,0,1);
  --npt-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --npt-dur-fast:240ms; --npt-dur-standard:300ms; --npt-dur-slow:500ms;

  /* glass — oceanic */
  --npt-glass-tint:color-mix(in oklab, var(--md-sys-color-primary) 8%,
                    color-mix(in oklab, var(--md-sys-color-surface) 70%, transparent));
  --npt-glass-blur:18px;

  /* signature motif — sonar tide-rings (brand concentric circles) */
  --npt-motif:repeating-radial-gradient(circle at 86% 6%,
      color-mix(in oklab, currentColor 11%, transparent) 0 1.5px, transparent 1.5px 27px);
  --npt-motif-strength:.9;

  --npt-shadow-key:0 18px 44px -18px color-mix(in oklab, var(--md-sys-color-primary) 42%, transparent);
  --npt-shadow-soft:0 8px 28px -12px color-mix(in oklab, var(--md-sys-color-scrim) 26%, transparent);

  --npt-header-h:72px;
  color-scheme:light;
}

[data-mode="dark"]{
  --md-sys-color-primary:oklch(0.78 0.09 240);              /* sky-lifted navy */
  --md-sys-color-on-primary:oklch(0.2 0.07 252);
  --md-sys-color-primary-container:oklch(0.34 0.08 252);
  --md-sys-color-on-primary-container:oklch(0.91 0.05 240);
  --md-sys-color-secondary:oklch(0.8 0.03 235);
  --md-sys-color-on-secondary:oklch(0.24 0.03 240);
  --md-sys-color-secondary-container:oklch(0.33 0.035 245);
  --md-sys-color-on-secondary-container:oklch(0.9 0.03 235);
  --md-sys-color-tertiary:oklch(0.72 0.16 25);
  --md-sys-color-on-tertiary:oklch(0.26 0.1 25);
  --md-sys-color-tertiary-container:oklch(0.4 0.13 25);
  --md-sys-color-on-tertiary-container:oklch(0.93 0.05 25);
  --md-sys-color-info:oklch(0.78 0.12 230);
  --md-sys-color-success:oklch(0.78 0.12 152);
  --md-sys-color-error:oklch(0.78 0.13 27);
  --md-sys-color-on-error:oklch(0.24 0.1 27);
  --md-sys-color-background:oklch(0.145 0.025 255);
  --md-sys-color-on-background:oklch(0.93 0.01 250);
  --md-sys-color-surface:oklch(0.145 0.025 255);
  --md-sys-color-on-surface:oklch(0.93 0.01 250);
  --md-sys-color-surface-variant:oklch(0.33 0.03 252);
  --md-sys-color-on-surface-variant:oklch(0.79 0.02 248);
  --md-sys-color-outline:oklch(0.57 0.02 250);
  --md-sys-color-outline-variant:oklch(0.31 0.025 252);
  --md-sys-color-surface-container-lowest:oklch(0.105 0.022 255);
  --md-sys-color-surface-container-low:oklch(0.17 0.026 255);
  --md-sys-color-surface-container:oklch(0.19 0.028 255);
  --md-sys-color-surface-container-high:oklch(0.23 0.03 255);
  --md-sys-color-surface-container-highest:oklch(0.28 0.032 255);
  --md-sys-color-inverse-surface:oklch(0.93 0.01 250);
  --md-sys-color-inverse-on-surface:oklch(0.21 0.03 255);
  --md-sys-color-scrim:oklch(0 0 0);
  --npt-glass-tint:color-mix(in oklab, var(--md-sys-color-primary) 10%,
                    color-mix(in oklab, var(--md-sys-color-surface) 62%, transparent));
  --npt-shadow-key:0 18px 44px -16px color-mix(in oklab, var(--md-sys-color-primary) 30%, transparent);
  color-scheme:dark;
}

[dir="rtl"]{
  --npt-font-display:var(--npt-font-display-ar);
  --npt-font-text:var(--npt-font-text-ar);
  --npt-display-tracking:0;
}

/* ---------- reset + base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--npt-font-text),system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--md-sys-color-background);
  color:var(--md-sys-color-on-background);
  line-height:1.6;font-size:16.5px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100dvh;display:flex;flex-direction:column;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
main{flex:1}
::selection{background:color-mix(in oklab,var(--npt-brand-coral) 30%,transparent)}
:focus-visible{outline:3px solid color-mix(in oklab,var(--md-sys-color-tertiary) 70%,transparent);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;inset-inline-start:12px;top:-72px;z-index:200;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);padding:10px 18px;border-radius:var(--npt-corner-full);transition:top var(--npt-dur-fast) var(--npt-ease-standard)}
.skip-link:focus{top:12px}

/* language visibility — html[lang] drives which strings show */
[lang="en"] [data-l]:not([data-l~="en"]){display:none!important}
[lang="ar"] [data-l]:not([data-l~="ar"]){display:none!important}

.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
@media (max-width:640px){.wrap{width:calc(100% - 36px)}}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--npt-font-display),system-ui,sans-serif;letter-spacing:var(--npt-display-tracking);line-height:1.14;font-weight:var(--npt-display-weight);text-wrap:balance}
.display-xl{font-size:clamp(2.5rem,6.2vw,4.4rem);font-weight:900}
.display-lg{font-size:clamp(2rem,4.4vw,3.1rem)}
.display-md{font-size:clamp(1.55rem,3vw,2.15rem)}
.lede{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--md-sys-color-on-surface-variant);max-width:62ch;text-wrap:pretty}
[dir="rtl"] body,[dir="rtl"] .lede{line-height:1.85}
.eyebrow{
  font-family:var(--npt-font-display),sans-serif;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--md-sys-color-tertiary);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";inline-size:9px;block-size:9px;border-radius:50%;background:var(--npt-brand-coral);flex:none}
[dir="rtl"] .eyebrow{letter-spacing:0}
.muted{color:var(--md-sys-color-on-surface-variant)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in oklab,var(--md-sys-color-surface) 82%,transparent);
  -webkit-backdrop-filter:blur(var(--npt-glass-blur)) saturate(1.4);
  backdrop-filter:blur(var(--npt-glass-blur)) saturate(1.4);
  box-shadow:0 1px 0 color-mix(in oklab,var(--md-sys-color-outline-variant) 70%,transparent);
  transition:box-shadow var(--npt-dur-standard) var(--npt-ease-standard);
}
.site-header.scrolled{
  box-shadow:0 1px 0 color-mix(in oklab,var(--md-sys-color-outline-variant) 80%,transparent),var(--npt-shadow-soft);
}
/* mode-driven logo swap */
.only-dark{display:none}
[data-mode="dark"] .only-dark{display:block}
[data-mode="dark"] .only-light{display:none}
/* language-driven logo swap (composes with only-light/only-dark) */
[lang="ar"] .only-en{display:none!important}
[lang="en"] .only-ar{display:none!important}
.nav{display:flex;align-items:center;gap:26px;min-height:var(--npt-header-h)}
.nav__logo{flex:none;display:flex;align-items:center}
.nav__logo img{block-size:30px;inline-size:auto}
.nav__links{display:flex;gap:4px;margin-inline-start:auto;align-items:center}
.nav__links a{
  padding:9px 15px;border-radius:var(--npt-corner-full);font-weight:700;font-size:15px;
  color:var(--md-sys-color-on-surface-variant);
  transition:background var(--npt-dur-fast) var(--npt-ease-standard),color var(--npt-dur-fast) var(--npt-ease-standard);
}
.nav__links a:hover{background:color-mix(in oklab,var(--md-sys-color-primary) 9%,transparent);color:var(--md-sys-color-on-surface)}
.nav__links a[aria-current="page"]{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.nav__actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  inline-size:42px;block-size:42px;border-radius:var(--npt-corner-full);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--md-sys-color-on-surface-variant);
  border:1.5px solid var(--md-sys-color-outline-variant);
  transition:all var(--npt-dur-fast) var(--npt-ease-standard);
}
.icon-btn:hover{background:color-mix(in oklab,var(--md-sys-color-primary) 9%,transparent);transform:translateY(-1px)}
.icon-btn svg{inline-size:19px;block-size:19px}
[data-mode="dark"] .icon-sun{display:block}
[data-mode="dark"] .icon-moon{display:none}
.icon-sun{display:none}
.lang-btn{min-inline-size:46px;font-weight:800;font-size:14px;padding-inline:10px}
.nav__burger{display:none}
.nav__cta{display:inline-flex}
@media (max-width:960px){
  .nav__links{
    display:none;position:fixed;inset-inline:14px;top:calc(var(--npt-header-h) + 8px);
    flex-direction:column;align-items:stretch;padding:14px;gap:6px;
    background:var(--md-sys-color-surface-container-low);
    border:1px solid var(--md-sys-color-outline-variant);
    border-radius:var(--npt-corner-lg);box-shadow:var(--npt-shadow-key);
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:13px 18px}
  .nav__burger{display:inline-flex}
  /* beat .btn's later-in-file equal-specificity display */
  .nav__actions .nav__cta{display:none}
}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-block-size:50px;padding:12px 26px;border-radius:var(--npt-corner-full);
  font-family:var(--npt-font-display),sans-serif;font-weight:800;font-size:16px;
  background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);
  overflow:hidden;isolation:isolate;
  transition:transform var(--npt-dur-fast) var(--npt-ease-spring),box-shadow var(--npt-dur-fast) var(--npt-ease-standard),background var(--npt-dur-fast) var(--npt-ease-standard);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--npt-shadow-key)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.btn--coral{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}
.btn--ghost{background:transparent;border:1.8px solid var(--md-sys-color-outline);color:var(--md-sys-color-on-surface)}
.btn--ghost:hover{border-color:var(--md-sys-color-primary);box-shadow:none;background:color-mix(in oklab,var(--md-sys-color-primary) 7%,transparent)}
.btn--onnavy{background:#fff;color:var(--npt-brand-navy)}
.btn--ghost-onnavy{background:transparent;border:1.8px solid color-mix(in oklab,#fff 42%,transparent);color:#fff}
.btn--ghost-onnavy:hover{border-color:#fff;background:color-mix(in oklab,#fff 12%,transparent);box-shadow:none}
/* specular sheen — Odyssey npt-cta recipe (4.8s · hold-sweep-hold 62–82%) */
.btn--sheen::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(110deg,transparent 32%,
    color-mix(in oklab, currentColor 38%, transparent) 50%,transparent 68%);
  transform:translateX(-130%);
  animation:npt-sheen 4.8s var(--npt-ease-standard) infinite;
}
[dir="rtl"] .btn--sheen::after{animation-name:npt-sheen-rtl}
@keyframes npt-sheen{0%,62%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}
@keyframes npt-sheen-rtl{0%,62%{transform:translateX(130%)}82%,100%{transform:translateX(-130%)}}
/* arrow nudge ±4px / 2.4s */
.btn .arrow{display:inline-flex;animation:npt-nudge 2.4s var(--npt-ease-standard) infinite}
.btn .arrow svg{inline-size:18px;block-size:18px}
[dir="rtl"] .btn .arrow svg{transform:scaleX(-1)}
@keyframes npt-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
[dir="rtl"] .btn .arrow{animation-name:npt-nudge-rtl}
@keyframes npt-nudge-rtl{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:clip;color:#fff;
  background:linear-gradient(135deg,#062A52 0%,var(--npt-brand-navy) 46%,#0A4178 100%);
}
.hero::before{ /* sonar rings radiating from the coral dot */
  content:"";position:absolute;inset:-40%;pointer-events:none;color:#fff;
  background:
    repeating-radial-gradient(circle at 72% 38%,
      color-mix(in oklab,var(--npt-brand-coral) 34%,transparent) 0 1.5px,transparent 1.5px 64px);
  opacity:.5;
  -webkit-mask-image:radial-gradient(circle at 72% 38%,#000 0%,transparent 62%);
  mask-image:radial-gradient(circle at 72% 38%,#000 0%,transparent 62%);
  animation:npt-rings 26s linear infinite;
}
@keyframes npt-rings{from{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}
.hero::after{ /* coral + sky key-light glows */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 420px at 84% 12%,color-mix(in oklab,var(--npt-brand-coral) 26%,transparent),transparent 70%),
    radial-gradient(700px 520px at 8% 92%,color-mix(in oklab,var(--npt-brand-sky) 20%,transparent),transparent 72%);
}
.hero__inner{position:relative;z-index:2;padding-block:clamp(84px,12vw,150px);display:grid;gap:34px;max-width:880px}
.hero .eyebrow{color:color-mix(in oklab,#fff 82%,var(--npt-brand-coral))}
.hero h1{color:#fff}
.hero h1 .thin{font-weight:300}
.hero .lede{color:color-mix(in oklab,#fff 78%,transparent);max-width:56ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__foot{display:flex;gap:26px;flex-wrap:wrap;align-items:center;color:color-mix(in oklab,#fff 62%,transparent);font-size:14px;font-weight:600}
.hero--page .hero__inner{padding-block:clamp(64px,8vw,96px)}

/* stat chips */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.stat{
  background:color-mix(in oklab,#fff 9%,transparent);
  border:1px solid color-mix(in oklab,#fff 16%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:var(--npt-corner-lg);padding:18px 20px;
}
.stat b{font-family:var(--npt-font-display),sans-serif;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;display:block;color:#fff;font-variant-numeric:tabular-nums}
.stat b .plus{color:var(--npt-brand-coral)}
.stat span{font-size:13.5px;color:color-mix(in oklab,#fff 66%,transparent);font-weight:600}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,9vw,110px)}
.section--tint{background:var(--md-sys-color-surface-container-low)}
.section-head{display:grid;gap:14px;max-width:760px;margin-block-end:clamp(34px,5vw,54px)}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--md-sys-color-surface-container-lowest);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--npt-corner-lg);padding:26px;
  transition:transform var(--npt-dur-standard) var(--npt-ease-spring),
             box-shadow var(--npt-dur-standard) var(--npt-ease-standard),
             border-color var(--npt-dur-standard) var(--npt-ease-standard);
}
a.card:hover{transform:translateY(-5px);box-shadow:var(--npt-shadow-key);border-color:color-mix(in oklab,var(--md-sys-color-primary) 26%,var(--md-sys-color-outline-variant))}
[data-mode="dark"] .card{background:var(--md-sys-color-surface-container-low)}
.card h3{font-size:1.22rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card p{font-size:15px;color:var(--md-sys-color-on-surface-variant)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card__sub{
  font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--md-sys-color-tertiary);margin-block-start:-6px;
}
[dir="rtl"] .card__sub{letter-spacing:0}
.card--component{
  border-inline-start:4px solid var(--npt-brand-coral);
  background:var(--md-sys-color-surface-container-lowest);
}
.card__go{
  margin-block-start:auto;display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:14.5px;color:var(--md-sys-color-tertiary);
}
.card__go svg{inline-size:16px;block-size:16px;transition:transform var(--npt-dur-fast) var(--npt-ease-spring)}
a.card:hover .card__go svg{transform:translateX(4px)}
[dir="rtl"] .card__go svg{transform:scaleX(-1)}
[dir="rtl"] a.card:hover .card__go svg{transform:scaleX(-1) translateX(4px)}

/* product identity chip */
.pmark{
  inline-size:52px;block-size:52px;flex:none;border-radius:var(--npt-corner-md);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--pmark-fg,#fff);
  background:var(--pmark-bg,linear-gradient(135deg,var(--npt-brand-navy),#0A4178));
  box-shadow:0 10px 22px -10px color-mix(in oklab,var(--md-sys-color-primary) 55%,transparent);
}
.pmark svg{inline-size:26px;block-size:26px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--npt-corner-full);
  background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);
}
.badge--oss{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.badge--flag{background:color-mix(in oklab,var(--npt-brand-sky) 22%,var(--md-sys-color-surface-container-lowest));color:var(--md-sys-color-on-surface)}
[dir="rtl"] .badge{letter-spacing:0}

/* pills */
.pills,.pills-inline{display:flex;flex-wrap:wrap;gap:9px}
.pill{
  font-size:13.5px;font-weight:700;padding:7px 15px;border-radius:var(--npt-corner-full);
  background:color-mix(in oklab,var(--md-sys-color-primary) 8%,transparent);
  border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant);
}

/* checklist */
.checklist{display:grid;gap:11px}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.checklist li::before{
  content:"";flex:none;inline-size:20px;block-size:20px;margin-block-start:3px;border-radius:50%;
  background:var(--md-sys-color-tertiary-container) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a63a30' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
[data-mode="dark"] .checklist li::before{background-color:var(--md-sys-color-tertiary-container)}

/* ---------- glass panel on navy ---------- */
.navy-panel{
  position:relative;overflow:clip;border-radius:var(--npt-corner-2xl);color:#fff;
  background:linear-gradient(135deg,#062A52,var(--npt-brand-navy) 55%,#0A4178);
  padding:clamp(36px,6vw,64px);
}
.navy-panel::before{
  content:"";position:absolute;inset:0;color:#fff;pointer-events:none;opacity:.75;
  background:repeating-radial-gradient(circle at 88% 10%,
    color-mix(in oklab,var(--npt-brand-coral) 30%,transparent) 0 1.4px,transparent 1.4px 34px);
  -webkit-mask-image:radial-gradient(circle at 88% 10%,#000,transparent 70%);
  mask-image:radial-gradient(circle at 88% 10%,#000,transparent 70%);
}
.navy-panel > *{position:relative;z-index:1}

/* ---------- marquee (clients / heritage) ---------- */
.truststrip{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:center;justify-content:center;opacity:.92}
.truststrip .t{
  font-family:var(--npt-font-display),sans-serif;font-weight:800;font-size:15.5px;
  color:var(--md-sys-color-on-surface-variant);display:inline-flex;align-items:center;gap:9px;
}
.truststrip .t::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--npt-brand-coral);opacity:.75}

/* ---------- forms ---------- */
.field{display:grid;gap:7px}
.field label{font-weight:800;font-size:14px}
.field input,.field select,.field textarea{
  font:inherit;color:inherit;inline-size:100%;
  background:var(--md-sys-color-surface-container-lowest);
  border:1.6px solid var(--md-sys-color-outline-variant);
  border-radius:var(--npt-corner-sm);padding:13px 16px;
  transition:border-color var(--npt-dur-fast) var(--npt-ease-standard),box-shadow var(--npt-dur-fast) var(--npt-ease-standard);
}
[data-mode="dark"] .field input,[data-mode="dark"] .field select,[data-mode="dark"] .field textarea{background:var(--md-sys-color-surface-container-low)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--md-sys-color-primary);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--md-sys-color-primary) 16%,transparent);
}
.field textarea{min-block-size:140px;resize:vertical}
.field .hint{font-size:12.5px;color:var(--md-sys-color-on-surface-variant)}
.form-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.form-note{font-size:13px;color:var(--md-sys-color-on-surface-variant)}
.hp-field{position:absolute;inset-inline-start:-9999px;opacity:0;block-size:0;overflow:hidden} /* honeypot */
.form-status{display:none;padding:14px 18px;border-radius:var(--npt-corner-sm);font-weight:700;font-size:15px}
.form-status.ok{display:block;background:color-mix(in oklab,var(--md-sys-color-success) 16%,var(--md-sys-color-surface-container-lowest));color:var(--md-sys-color-on-surface)}
.form-status.err{display:block;background:color-mix(in oklab,var(--md-sys-color-error) 14%,var(--md-sys-color-surface-container-lowest));color:var(--md-sys-color-on-surface)}

/* ---------- footer ---------- */
.site-footer{
  position:relative;overflow:clip;color:#fff;margin-block-start:auto;
  background:linear-gradient(160deg,var(--npt-brand-navy),#052546 70%);
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-radial-gradient(circle at 12% 110%,
    color-mix(in oklab,var(--npt-brand-coral) 26%,transparent) 0 1.3px,transparent 1.3px 44px);
  -webkit-mask-image:radial-gradient(circle at 12% 110%,#000,transparent 66%);
  mask-image:radial-gradient(circle at 12% 110%,#000,transparent 66%);
}
.site-footer .wrap{position:relative;z-index:1}
.footer-grid{display:grid;gap:34px;grid-template-columns:1.4fr repeat(3,minmax(140px,1fr));padding-block:56px 30px}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-brand img{block-size:34px;inline-size:auto;margin-block-end:14px}
.footer-brand p{font-size:14px;color:color-mix(in oklab,#fff 62%,transparent);max-width:34ch}
.footer-col h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#fff 55%,transparent);margin-block-end:14px}
[dir="rtl"] .footer-col h4{letter-spacing:0}
.footer-col ul{display:grid;gap:9px}
.footer-col a{font-size:14.5px;font-weight:600;color:color-mix(in oklab,#fff 82%,transparent);transition:color var(--npt-dur-fast) var(--npt-ease-standard)}
.footer-col a:hover{color:var(--npt-brand-coral)}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  padding-block:20px;border-block-start:1px solid color-mix(in oklab,#fff 14%,transparent);
  font-size:13px;color:color-mix(in oklab,#fff 55%,transparent);
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--npt-ease-standard),transform .7s var(--npt-ease-emphasized)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .65s var(--npt-ease-standard),transform .65s var(--npt-ease-emphasized)}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > :nth-child(2){transition-delay:.07s}
.reveal-stagger.in > :nth-child(3){transition-delay:.14s}
.reveal-stagger.in > :nth-child(4){transition-delay:.21s}
.reveal-stagger.in > :nth-child(5){transition-delay:.28s}
.reveal-stagger.in > :nth-child(6){transition-delay:.35s}
.reveal-stagger.in > :nth-child(7){transition-delay:.42s}
.reveal-stagger.in > :nth-child(8){transition-delay:.49s}
.reveal-stagger.in > :nth-child(9){transition-delay:.56s}

/* ---------- misc ---------- */
.kbd-note{font-size:13px;color:var(--md-sys-color-on-surface-variant)}
.divider-dot{display:flex;align-items:center;gap:14px}
.divider-dot::before,.divider-dot::after{content:"";flex:1;block-size:1px;background:var(--md-sys-color-outline-variant)}
.divider-dot i{inline-size:10px;block-size:10px;border-radius:50%;background:var(--npt-brand-coral)}
.contact-rows{display:grid;gap:14px}
.contact-rows a{display:flex;gap:14px;align-items:center;font-weight:700;padding:16px 18px;border-radius:var(--npt-corner-md);background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--md-sys-color-outline-variant);transition:transform var(--npt-dur-fast) var(--npt-ease-spring),box-shadow var(--npt-dur-fast) var(--npt-ease-standard)}
[data-mode="dark"] .contact-rows a{background:var(--md-sys-color-surface-container-low)}
.contact-rows a:hover{transform:translateY(-2px);box-shadow:var(--npt-shadow-soft)}
.contact-rows .ic{inline-size:44px;block-size:44px;flex:none;border-radius:var(--npt-corner-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.contact-rows .ic svg{inline-size:20px;block-size:20px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* breadcrumbs on product pages */
.crumbs{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:700;color:color-mix(in oklab,#fff 62%,transparent)}
.crumbs a:hover{color:#fff}
.crumbs svg{inline-size:13px;block-size:13px;opacity:.6}
[dir="rtl"] .crumbs svg{transform:scaleX(-1)}

/* spec table */
.spec{display:grid;gap:0;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--npt-corner-lg);overflow:hidden}
.spec > div{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:16px;padding:16px 22px;font-size:15px}
.spec > div:nth-child(odd){background:var(--md-sys-color-surface-container-low)}
.spec b{font-weight:800}
@media (max-width:560px){.spec > div{grid-template-columns:1fr}}

/* reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.reveal-stagger > *{opacity:1!important;transform:none!important}
}