/* ==========================================================================
   iltzaam — marketing site
   Same system as the portal: DM Sans, deep teal / slate / periwinkle / mist.
   No inline styles anywhere (the site runs under a strict CSP).
   ========================================================================== */
@font-face{font-family:"DM Sans";src:url("fonts/dmsans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dmsans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dmsans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dmsans-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --teal:#16333B;--slate:#576486;--peri:#8896BB;--peri-l:#A9B5D6;--mist:#F1F1F2;--ink:#161518;
  --canvas:#EEF1F8;--card:#FFFFFF;--card-border:#DFE4EE;--hairline:#D5DBE7;
  --text:#161518;--muted:#566075;--link:#4A5779;--surface:#E6EBF5;--chip:rgba(87,100,134,.12);
  --ok:#1F7A5C;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
html[data-theme="dark"]{
  --canvas:#0B0B0D;--card:#131315;--card-border:rgba(255,255,255,.10);--hairline:#26262A;
  --text:#F1F1F2;--muted:#9AA3B8;--link:#A9B5D6;--surface:#18181A;--chip:rgba(136,150,187,.16);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--peri-l);outline-offset:3px;border-radius:6px}
.ic{display:block;flex-shrink:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--mist);color:var(--teal);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:16px}
html.theme-anim,html.theme-anim *{transition:background-color .3s ease,color .3s ease,border-color .3s ease !important}

/* ---------- Logo (identical to the portal's) ---------- */
.lm{display:block;overflow:visible}
.lm-primary{--lm-tile:#16333B;--lm-tick:#F1F1F2;--lm-dot:#A9B5D6}
.lm-reverse{--lm-tile:#F1F1F2;--lm-tick:#16333B;--lm-dot:#576486}
.lm-glyph{--lm-tick:#F1F1F2;--lm-dot:#F1F1F2}
.lm-tile{fill:var(--lm-tile)}
.lm-tick{stroke:var(--lm-tick);stroke-dasharray:1;stroke-dashoffset:0}
.lm-dot{fill:var(--lm-dot);transform-box:view-box;transform-origin:156px 46px}
.lm-ring{stroke:var(--lm-dot);opacity:0;transform-box:view-box;transform-origin:156px 46px}
.lm-intro .lm-tile{transform-box:view-box;transform-origin:100px 100px;animation:lm-tile .45s var(--ease) both}
.lm-intro .lm-tick{stroke-dashoffset:1;opacity:0;animation:lm-draw .62s cubic-bezier(.65,0,.35,1) .22s forwards}
.lm-intro .lm-dot{animation:lm-drop .56s cubic-bezier(.34,1.56,.64,1) .82s both}
.lm-intro .lm-ring{animation:lm-ripple .75s ease-out 1.12s forwards}
@keyframes lm-tile{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes lm-draw{0%{stroke-dashoffset:1;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes lm-drop{0%{transform:translate(22px,-30px) scale(.2);opacity:0}55%{transform:none;opacity:1}75%{transform:scale(1.35)}100%{transform:none;opacity:1}}
@keyframes lm-ripple{0%{transform:scale(1);opacity:.75}100%{transform:scale(3);opacity:0}}
.lm-loop .lm-tick{stroke-dashoffset:1;animation:lm-draw-loop 8s cubic-bezier(.65,0,.35,1) infinite}
.lm-loop .lm-dot{animation:lm-dot-loop 8s cubic-bezier(.34,1.56,.64,1) infinite}
.lm-loop .lm-ring{animation:lm-ring-loop 8s ease-out infinite}
@keyframes lm-draw-loop{0%{stroke-dashoffset:1;opacity:1}11%{stroke-dashoffset:0}86%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes lm-dot-loop{0%,13%{transform:translate(22px,-30px) scale(.2);opacity:0}18%{transform:none;opacity:1}20.5%{transform:scale(1.35)}23%,86%{transform:none;opacity:1}95%,100%{transform:none;opacity:0}}
@keyframes lm-ring-loop{0%,21%{transform:scale(1);opacity:0}21.5%{opacity:.75}31%,100%{transform:scale(3);opacity:0}}
@keyframes glow-drift{from{transform:translate(-6%,-4%) scale(1)}to{transform:translate(8%,6%) scale(1.15)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,138,148,.5)}70%{box-shadow:0 0 0 8px rgba(255,138,148,0)}100%{box-shadow:0 0 0 0 rgba(255,138,148,0)}}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:72px;padding:0 max(32px,calc(50% - 558px));display:flex;align-items:center;justify-content:space-between;color:var(--mist);
  transition:background-color .3s ease,box-shadow .3s ease}
.nav.scrolled{background:rgba(22,51,59,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(241,241,242,.12)}
.brand{display:flex;align-items:center;gap:12px;color:var(--mist);text-decoration:none}
.wordmark{display:flex;flex-direction:column;line-height:1.05;font-size:22px;font-weight:700;letter-spacing:-0.5px}
.wordmark small{font-size:13px;font-weight:500;letter-spacing:0;color:rgba(241,241,242,.62);margin-top:3px;font-family:"Segoe UI","Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{-webkit-appearance:none;appearance:none;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--mist);
  border:1px solid rgba(241,241,242,.28);border-radius:10px;cursor:pointer;transition:background-color .2s ease,transform .2s var(--ease)}
.icon-btn:hover{background:rgba(241,241,242,.1)}
.icon-btn:active{transform:scale(.94)}
.theme-ic-sun{display:none}
html[data-theme="dark"] .theme-ic-sun{display:block}
html[data-theme="dark"] .theme-ic-moon{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:12px;font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s ease,background-color .25s ease,border-color .25s ease}
.btn-primary{background:var(--mist);color:var(--teal)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.btn-primary .arrow{transition:transform .25s var(--ease)}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--mist);border-color:rgba(241,241,242,.32)}
.btn-ghost:hover{background:rgba(241,241,242,.1);border-color:rgba(241,241,242,.6)}
.btn-sm{height:42px;padding:0 18px;font-size:15px;border-radius:10px}
.btn:active{transform:translateY(1px) scale(.99)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;color:var(--mist);padding:156px 0 112px;border-radius:0 0 48px 48px;
  background:linear-gradient(125deg,#16333B 0%,#1D3C47 45%,#3F4E70 85%,#8896BB 135%)}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.hero::before{width:820px;height:820px;right:-240px;top:-340px;background:radial-gradient(closest-side,rgba(136,150,187,.55),transparent);animation:glow-drift 16s ease-in-out infinite alternate}
.hero::after{width:600px;height:600px;left:-220px;bottom:-300px;background:radial-gradient(closest-side,rgba(225,233,246,.16),transparent);animation:glow-drift 21s ease-in-out infinite alternate-reverse}
.hero-glyph{position:absolute;z-index:-1;right:-140px;bottom:-190px;width:760px;height:760px;opacity:.08;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--peri-l)}
/* Hero label: an editorial dateline, not a badge. A dot drops in like the logo's, then a hairline draws out. */
.hero .eyebrow{display:inline-flex;align-items:center;gap:12px;padding:0;color:var(--peri-l)}
.hero .eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--peri-l);animation:dot-in .6s cubic-bezier(.34,1.56,.64,1) .55s both,dot-ripple 2.8s ease-out 1.3s infinite}
.hero .eyebrow::after{content:"";flex:none;width:64px;height:1px;background:linear-gradient(90deg,rgba(169,181,214,.75),rgba(169,181,214,0));transform-origin:left;animation:rule-draw 1s var(--ease) .7s both}
@keyframes dot-in{0%{transform:scale(0);opacity:0}60%{transform:scale(1.5);opacity:1}100%{transform:none;opacity:1}}
@keyframes dot-ripple{0%{box-shadow:0 0 0 0 rgba(169,181,214,.5)}70%,100%{box-shadow:0 0 0 9px rgba(169,181,214,0)}}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:none}}
h1{font-size:clamp(40px,5.2vw,66px);line-height:1.04;font-weight:700;letter-spacing:-0.035em;margin:20px 0 22px;text-wrap:balance}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:rgba(241,241,242,.78);max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.fineprint{margin-top:26px;font-size:14px;color:rgba(241,241,242,.58);max-width:48ch}
.rise{opacity:0;animation:rise .8s var(--ease) forwards}
.d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}.d4{animation-delay:.48s}.d5{animation-delay:.6s}

/* ---------- The three-scene story (same one as the portal's sign-in page) ---------- */
.story{max-width:470px;margin-left:auto;width:100%}
.story-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.sb{font-size:12px;font-weight:600;color:rgba(241,241,242,.62)}
.sb i{display:block;height:3px;margin-bottom:7px;border-radius:999px;background:rgba(241,241,242,.18);overflow:hidden;position:relative}
.sb i::after{content:"";position:absolute;inset:0;background:#E1E9F6;transform-origin:left;transform:scaleX(0)}
.sb-1 i::after{animation:sb1 18s linear infinite}.sb-2 i::after{animation:sb2 18s linear infinite}.sb-3 i::after{animation:sb3 18s linear infinite}
@keyframes sb1{0%{transform:scaleX(0)}33.3%,100%{transform:scaleX(1)}}
@keyframes sb2{0%,33.3%{transform:scaleX(0)}66.6%,100%{transform:scaleX(1)}}
@keyframes sb3{0%,66.6%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.sb-1{animation:sbl1 18s infinite}.sb-2{animation:sbl2 18s infinite}.sb-3{animation:sbl3 18s infinite}
@keyframes sbl1{0%,32%{color:#F1F1F2}34%,100%{color:rgba(241,241,242,.62)}}
@keyframes sbl2{0%,33%{color:rgba(241,241,242,.62)}35%,65%{color:#F1F1F2}67%,100%{color:rgba(241,241,242,.62)}}
@keyframes sbl3{0%,66%{color:rgba(241,241,242,.62)}68%,99%{color:#F1F1F2}100%{color:rgba(241,241,242,.62)}}
.story-stage{display:grid}
.scene{grid-area:1/1;padding:22px 24px;border-radius:22px;min-height:200px;background:rgba(241,241,242,.08);border:1px solid rgba(241,241,242,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0}
.scene-1{animation:scene1 18s var(--ease) infinite}.scene-2{animation:scene2 18s var(--ease) infinite}.scene-3{animation:scene3 18s var(--ease) infinite}
@keyframes scene1{0%{opacity:0;transform:translateY(12px)}3%,30%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes scene2{0%,33.3%{opacity:0;transform:translateY(12px)}36.5%,63.5%{opacity:1;transform:none}66.6%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes scene3{0%,66.6%{opacity:0;transform:translateY(12px)}69.8%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.cl-head{display:flex;align-items:center;gap:14px}
.cl-ticker{width:48px;height:48px;flex-shrink:0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(241,241,242,.14);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
.cl-what{flex:1;min-width:0}.cl-what b{display:block;font-weight:600;font-size:16px}.cl-what small{color:rgba(241,241,242,.66);font-size:13px}
.cl-status{position:relative;display:inline-grid;font-size:12px;font-weight:600}
.cl-status .st{grid-area:1/1;padding:4px 12px;border-radius:999px;opacity:0;text-align:center;white-space:nowrap}
.st-1{background:rgba(241,241,242,.16);color:#F1F1F2;animation:st1 18s infinite}
.st-2{background:rgba(226,177,88,.22);color:#F5D9A6;animation:st2 18s infinite}
.st-3{background:rgba(92,203,158,.24);color:#B9F0D9;animation:st3 18s infinite}
@keyframes st1{0%,10%{opacity:1}11.5%,100%{opacity:0}}
@keyframes st2{0%,10%{opacity:0}11.5%,20.5%{opacity:1}22%,100%{opacity:0}}
@keyframes st3{0%,20.5%{opacity:0}22%,33%{opacity:1}34%,100%{opacity:0}}
.cl-bar{height:4px;margin:18px 0 14px;border-radius:999px;background:rgba(241,241,242,.14);overflow:hidden}
.cl-bar span{display:block;height:100%;width:100%;border-radius:inherit;transform-origin:left;background:linear-gradient(90deg,#8896BB,#E1E9F6);animation:clbar 18s var(--ease) infinite}
@keyframes clbar{0%{transform:scaleX(.12)}10%{transform:scaleX(.34)}11.5%,20.5%{transform:scaleX(.67)}22%,100%{transform:scaleX(1)}}
.cl-steps{display:grid;gap:10px;font-size:14px}
.step{display:flex;align-items:center;gap:10px;color:rgba(241,241,242,.5)}
.step i{width:18px;height:18px;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(241,241,242,.35);position:relative}
.step i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#E1E9F6;transform:scale(0)}
.step-1{color:#F1F1F2}.step-1 i{border-color:#E1E9F6}.step-1 i::after{transform:none}
.step-2{animation:step2 18s infinite}.step-2 i::after{animation:dot2 18s var(--ease) infinite}
.step-3{animation:step3 18s infinite}.step-3 i::after{animation:dot3 18s var(--ease) infinite}
@keyframes step2{0%,10.5%{color:rgba(241,241,242,.5)}12%,100%{color:#F1F1F2}}
@keyframes dot2{0%,10.5%{transform:scale(0)}12.5%,100%{transform:none}}
@keyframes step3{0%,21%{color:rgba(241,241,242,.5)}22.5%,100%{color:#B9F0D9}}
@keyframes dot3{0%,21%{transform:scale(0)}23%,100%{transform:none}}
.sc-kicker{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:rgba(241,241,242,.7)}
.sc-headline{margin:12px 0 6px;font-size:16px;line-height:1.45;font-weight:500}
.sc-meta{font-size:12px;color:rgba(241,241,242,.55)}
.sc-match{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 12px;border-radius:999px;font-size:13px;background:rgba(201,55,68,.22);color:#FFD3D8;opacity:0;transform:scale(.9);animation:scmatch 18s var(--ease) infinite}
@keyframes scmatch{0%,45%{opacity:0;transform:scale(.9)}48%,63.5%{opacity:1;transform:none}66.6%,100%{opacity:0}}
.sc-dot{width:8px;height:8px;border-radius:50%;background:#FF8A94;animation:pulse 1.6s ease-out infinite}
.sc-q{margin-left:auto;max-width:88%;width:fit-content;padding:10px 14px;border-radius:16px 16px 4px 16px;background:rgba(241,241,242,.16);font-size:14px;line-height:1.45}
.sc-a{margin-top:14px;opacity:0;transform:translateY(6px);animation:sca 18s var(--ease) infinite}
@keyframes sca{0%,77%{opacity:0;transform:translateY(6px)}80%,97%{opacity:1;transform:none}100%{opacity:0}}
.sc-verdict{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(226,177,88,.25);color:#F5D9A6}
.sc-a p{margin:8px 0 10px;font-size:14px;line-height:1.5;color:rgba(241,241,242,.85)}
.sc-cite{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#B9F0D9;opacity:0;animation:sccite 18s infinite}
@keyframes sccite{0%,85%{opacity:0}88%,97%{opacity:1}100%{opacity:0}}

/* ---------- Sections ---------- */
.section{padding:112px 0 0}
.section h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1;font-weight:700;letter-spacing:-0.03em;margin:14px 0 0;text-wrap:balance}
.section-lead{margin-top:16px;max-width:56ch;color:var(--muted);font-size:18px}
.section .eyebrow{color:var(--slate)}
html[data-theme="dark"] .section .eyebrow{color:var(--peri-l)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:34px 30px 32px;background:var(--card);border:1px solid var(--card-border);border-radius:24px;
  transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(136,150,187,.2),transparent 62%)}
.card:hover{transform:translateY(-4px);border-color:rgba(87,100,134,.5);box-shadow:0 18px 40px rgba(22,51,59,.12)}
html[data-theme="dark"] .card:hover{box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card:hover::before{opacity:1}
.card > *{position:relative}
.chip-ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#F1F1F2}
.chip-1{background:linear-gradient(135deg,#16333B,#3F4E70)}
.chip-2{background:linear-gradient(135deg,#3F4E70,#8896BB)}
.chip-3{background:linear-gradient(135deg,#576486,#A9B5D6)}
.card h3{font-size:26px;font-weight:700;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:600;letter-spacing:0;padding:3px 10px;border-radius:999px;background:var(--chip);color:var(--link)}
.card p{color:var(--muted)}
.ticks{display:grid;gap:9px;margin-top:6px;font-size:15px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .ic{color:var(--ok);margin-top:3px}
html[data-theme="dark"] .ticks .ic{color:#5CCB9E}

.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px;margin-top:48px}
.trust-item{display:flex;flex-direction:column;gap:10px}
.trust-item .chip{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--link)}
.trust-item h3{font-size:19px;font-weight:600;letter-spacing:-0.01em}
.trust-item p{color:var(--muted);font-size:16px}

.cta-band{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 40px;padding:56px 56px;border-radius:32px;color:var(--mist);
  background:linear-gradient(115deg,#16333B 0%,#1D3C47 50%,#3F4E70 100%)}
.cta-band::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-140px;top:-220px;border-radius:50%;background:radial-gradient(closest-side,rgba(136,150,187,.5),transparent);animation:glow-drift 14s ease-in-out infinite alternate}
.cta-band h2{margin:0;font-size:clamp(28px,3.2vw,40px)}
.cta-band p{margin-top:10px;color:rgba(241,241,242,.75);max-width:46ch}
.cta-copy{flex:1 1 320px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-section{padding:112px 0 96px}

.footer{background:#0F252B;color:rgba(241,241,242,.72);padding:48px 0 40px;font-size:14px}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.footer .brand{color:var(--mist)}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:rgba(241,241,242,.8);text-decoration:none}
.footer-links a:hover{color:#fff;text-decoration:underline}
.legal{margin-top:28px;padding-top:24px;border-top:1px solid rgba(241,241,242,.14);max-width:92ch;line-height:1.6;color:rgba(241,241,242,.55)}

/* ---------- Scroll reveal (only when JS is running) ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .cards .reveal:nth-child(2),html.js .trust-grid .reveal:nth-child(2),html.js .trust-grid .reveal:nth-child(5){transition-delay:.1s}
html.js .cards .reveal:nth-child(3),html.js .trust-grid .reveal:nth-child(3),html.js .trust-grid .reveal:nth-child(6){transition-delay:.2s}

/* ---------- 404 ---------- */
.nf{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:32px;color:var(--mist);position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(125deg,#16333B 0%,#1D3C47 45%,#3F4E70 85%,#8896BB 135%)}
.nf h1{margin:6px 0 0}
.nf p{color:rgba(241,241,242,.75)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero{padding:124px 0 84px;border-radius:0 0 32px 32px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .story{margin-left:0;max-width:520px}
  .cards{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section{padding-top:88px}
  .cta-band{padding:40px 28px;border-radius:26px}
  .cta-section{padding:88px 0 72px}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .nav{padding:0 16px}
  .wordmark small{display:none}
  .hero .eyebrow{font-size:12px;letter-spacing:1.3px;gap:10px}
  .hero .eyebrow::after{display:none}
  .trust-grid{grid-template-columns:1fr;gap:28px}
  .btn{width:100%}
  .btn-sm{width:auto}
  .cta-row .btn,.cta-actions .btn{width:100%}
  .cta-actions{width:100%}
  .hero-glyph{width:420px;height:420px;right:-120px;bottom:-110px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rise{opacity:1}
  html.js .reveal{opacity:1;transform:none}
  .lm-tick{stroke-dashoffset:0 !important;opacity:1 !important}
  .lm-dot,.lm-tile{transform:none !important;opacity:1 !important}
  .lm-ring{opacity:0 !important}
  .scene-1{opacity:1}.st-3{opacity:1}
  .step-2,.step-3{color:#F1F1F2}.step-3{color:#B9F0D9}
  .step-2 i::after,.step-3 i::after{transform:none}
  .cl-bar span{transform:none}.sb-1 i::after{transform:none}
}

/* wordmark: outlined logo drawing (accent-coloured i-dot), never live text */
.wm-svg{display:block;height:14px;width:auto}
.brand-text .wm-svg{margin-bottom:5px}
.wordmark{align-items:stretch}
.wordmark .wm-svg{height:17px}
.wordmark .wm-ar{display:block;height:13px;width:auto;align-self:flex-end;margin-top:5px}
@media (max-width:640px){.wordmark .wm-ar{display:none}}