/* ==========================================================================
   FLEX CODE — Corporate Design System
   Palette from the Flex Code brand sheet:
     navy #0D1B2A · indigo #1E3A8A · royal #2563EB · cyan #06B6D4 · ice #E6F6FF

   THEMES
   Light is the default. Dark is applied by `data-theme="dark"` on <html>
   (set by the inline script in each page's <head>, which honours a saved
   choice first and the operating-system preference otherwise), and by the
   prefers-color-scheme media query when JavaScript is unavailable.

   ! The dark token block appears TWICE — once for [data-theme="dark"] and
   ! once inside the media query. Keep the two copies in sync.
   ========================================================================== */

/* ---------- 1. Tokens — light (default) ---------- */
:root{
  color-scheme:light;

  /* Brand ramp. ★ = straight from the brand sheet. */
  --b-900:#081018;
  --b-800:#0D1B2A;  /* navy   ★ */
  --b-700:#1E3A8A;  /* indigo ★ */
  --b-600:#2563EB;  /* royal  ★ */
  --b-500:#3B82F6;
  --b-400:#06B6D4;  /* cyan   ★ */
  --b-300:#22D3EE;
  --b-200:#67E8F9;
  --b-100:#A9E4F5;
  --b-050:#E6F6FF;  /* ice    ★ */

  /* Accent roles — resolved against the current surface */
  --accent:#2563EB;
  --accent-strong:#1E3A8A;
  --accent-soft:#E6F6FF;
  --accent-soft-tx:#1E3A8A;
  --accent-line:rgba(37,99,235,.15);

  /* Surfaces */
  --surface:#FFFFFF;
  --surface-alt:#F2F9FF;
  --card:#FFFFFF;
  --line:#DCEAF7;
  --line-strong:#C3DBF0;

  /* Always-dark surfaces: hero, .sec--dark, header, footer, CTA */
  --inv:#0D1B2A;
  --inv-2:#152C42;
  --inv-3:#1D3A56;
  --inv-line:rgba(255,255,255,.09);
  --inv-line-strong:rgba(255,255,255,.20);
  --inv-accent:#22D3EE;

  /* Text */
  --tx:#0D1B2A;
  --tx-2:#41566E;
  --tx-3:#5B7089;
  --tx-inv:#FFFFFF;
  --tx-inv-2:#AFC4DA;
  --tx-inv-3:#7B93AE;


  /* Chrome = hero, header, footer. Light in the light theme, dark in the dark theme.
     Feature bands (.sec--dark, .cta) stay brand navy in BOTH themes — see --inv. */
  --chrome:#F3F9FF;
  --chrome-grad:linear-gradient(168deg,#FFFFFF 0%,#E9F3FF 58%,#F7FBFF 100%);
  --chrome-tx:#0D1B2A;
  --chrome-tx-2:#41566E;
  --chrome-tx-3:#5B7089;
  --chrome-line:#DCEAF7;
  --chrome-line-strong:#C3DBF0;
  --chrome-accent:#2563EB;
  --chrome-hover:rgba(13,27,42,.06);
  --chrome-mark:#0D1B2A;
  --grid-line:rgba(13,27,42,.055);
  --pix:#2563EB;
  --hdr:rgba(255,255,255,.82);
  --hdr-scroll:rgba(255,255,255,.96);

  /* Effects */
  --grad:linear-gradient(135deg,#1E3A8A 0%,#2563EB 52%,#06B6D4 100%);
  --grad-btn:linear-gradient(135deg,#1E3A8A 0%,#2563EB 100%);  /* white text sits on this */
  --grad-tx:linear-gradient(135deg,#1E3A8A,#0891B2);
  --grad-hero-tx:linear-gradient(100deg,#2563EB,#0891B2);
  --grad-soft:linear-gradient(135deg,rgba(30,58,138,.08),rgba(6,182,212,.12));
  --glow:0 0 0 1px rgba(6,182,212,.30), 0 18px 50px -18px rgba(37,99,235,.6);
  --sh-1:0 1px 2px rgba(13,27,42,.05), 0 6px 20px -10px rgba(13,27,42,.14);
  --sh-2:0 2px 4px rgba(13,27,42,.05), 0 18px 45px -18px rgba(13,27,42,.22);
  --sh-3:0 30px 70px -30px rgba(30,58,138,.45);
  --btn-sh:0 10px 26px -12px rgba(37,99,235,.75);
  --btn-sh-h:0 16px 34px -12px rgba(37,99,235,.9);
  --aurora-a:#2563EB;
  --aurora-b:#06B6D4;

  /* Geometry */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --maxw:1200px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(72px,9vw,132px);

  /* Type */
  --ff:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-ar:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- 2. Tokens — dark (copy 1 of 2: explicit choice) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --accent:#60A5FA;
  --accent-strong:#93C5FD;
  --accent-soft:#14293F;
  --accent-soft-tx:#A6CFF8;
  --accent-line:rgba(96,165,250,.24);

  --surface:#0A1522;
  --surface-alt:#0F1E30;
  --card:#142438;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.17);

  --inv:#060F1A;
  --inv-2:#122236;
  --inv-3:#1A3049;
  --inv-line:rgba(255,255,255,.08);

  --tx:#EAF2FA;
  --tx-2:#A8BDD4;
  --tx-3:#7E94AC;

  --chrome:#060F1A;
  --chrome-grad:none;
  --chrome-tx:#FFFFFF;
  --chrome-tx-2:#AFC4DA;
  --chrome-tx-3:#7B93AE;
  --chrome-line:rgba(255,255,255,.08);
  --chrome-line-strong:rgba(255,255,255,.20);
  --chrome-accent:#22D3EE;
  --chrome-hover:rgba(255,255,255,.09);
  --chrome-mark:#FFFFFF;
  --grid-line:rgba(255,255,255,.045);
  --pix:#22D3EE;
  --hdr:rgba(6,15,26,.92);
  --hdr-scroll:rgba(6,15,26,.97);

  --grad-tx:linear-gradient(135deg,#60A5FA,#22D3EE);
  --grad-hero-tx:linear-gradient(100deg,#06B6D4,#22D3EE);
  --grad-soft:linear-gradient(135deg,rgba(96,165,250,.16),rgba(34,211,238,.16));
  --sh-1:0 1px 2px rgba(0,0,0,.40), 0 6px 20px -10px rgba(0,0,0,.60);
  --sh-2:0 2px 4px rgba(0,0,0,.45), 0 18px 45px -18px rgba(0,0,0,.70);
  --sh-3:0 30px 70px -30px rgba(0,0,0,.85);
  --btn-sh:0 10px 26px -12px rgba(37,99,235,.55);
  --btn-sh-h:0 16px 34px -12px rgba(59,130,246,.70);
}

/* ---------- 3. Tokens — dark (copy 2 of 2: OS preference, no JavaScript) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --accent:#60A5FA;
    --accent-strong:#93C5FD;
    --accent-soft:#14293F;
    --accent-soft-tx:#A6CFF8;
    --accent-line:rgba(96,165,250,.24);

    --surface:#0A1522;
    --surface-alt:#0F1E30;
    --card:#142438;
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.17);

    --inv:#060F1A;
    --inv-2:#122236;
    --inv-3:#1A3049;
    --inv-line:rgba(255,255,255,.08);

    --tx:#EAF2FA;
    --tx-2:#A8BDD4;
    --tx-3:#7E94AC;

    --chrome:#060F1A;
    --chrome-grad:none;
    --chrome-tx:#FFFFFF;
    --chrome-tx-2:#AFC4DA;
    --chrome-tx-3:#7B93AE;
    --chrome-line:rgba(255,255,255,.08);
    --chrome-line-strong:rgba(255,255,255,.20);
    --chrome-accent:#22D3EE;
    --chrome-hover:rgba(255,255,255,.09);
    --chrome-mark:#FFFFFF;
    --grid-line:rgba(255,255,255,.045);
    --pix:#22D3EE;
    --hdr:rgba(6,15,26,.92);
    --hdr-scroll:rgba(6,15,26,.97);

    --grad-tx:linear-gradient(135deg,#60A5FA,#22D3EE);
    --grad-hero-tx:linear-gradient(100deg,#06B6D4,#22D3EE);
    --grad-soft:linear-gradient(135deg,rgba(96,165,250,.16),rgba(34,211,238,.16));
    --sh-1:0 1px 2px rgba(0,0,0,.40), 0 6px 20px -10px rgba(0,0,0,.60);
    --sh-2:0 2px 4px rgba(0,0,0,.45), 0 18px 45px -18px rgba(0,0,0,.70);
    --sh-3:0 30px 70px -30px rgba(0,0,0,.85);
    --btn-sh:0 10px 26px -12px rgba(37,99,235,.55);
    --btn-sh-h:0 16px 34px -12px rgba(59,130,246,.70);
  }
}

/* ---------- 4. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;background:var(--surface)}
body{
  margin:0;font-family:var(--ff);color:var(--tx);background:var(--surface);
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .25s ease,color .25s ease;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--b-300);color:#0D1B2A}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- 5. Typography ---------- */
h1,h2,h3,h4{font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--tx)}
.h-display{font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.03;letter-spacing:-.035em}
.h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.h2{font-size:clamp(1.85rem,3.4vw,2.7rem)}
.h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em}
.h4{font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(1.06rem,1.6vw,1.28rem);line-height:1.62;color:var(--tx-2)}
.sm{font-size:.95rem}
.xs{font-size:.84rem}
.muted{color:var(--tx-2)}
.mono{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.06em}
strong{font-weight:700;color:var(--tx)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad);flex:none}
.on-dark .eyebrow,.sec--dark .eyebrow,.hero .eyebrow,.cta .eyebrow{color:var(--inv-accent)}
.grad-text{
  background:var(--grad-hero-tx);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sec--dark .grad-text,.cta .grad-text{background:linear-gradient(100deg,var(--b-400),var(--b-300));
  -webkit-background-clip:text;background-clip:text}

/* ---------- 6. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1360px}
.wrap-narrow{max-width:820px}
.sec{padding-block:var(--sec);position:relative}
.sec--tight{padding-block:clamp(52px,6vw,84px)}
.sec--paper{background:var(--surface-alt)}
.sec--dark{background:var(--inv);color:var(--tx-inv)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:var(--tx-inv)}
.sec--dark .lead,.sec--dark .muted{color:var(--tx-inv-2)}
.sec--dark strong{color:var(--tx-inv)}
.sec--grad{background:var(--grad);color:var(--tx-inv)}
.sec--grad h2,.sec--grad h3{color:var(--tx-inv)}

.grid{display:grid;gap:clamp(20px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--top{align-items:start}
@media (max-width:980px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.stack>*+*{margin-top:1rem}
.center{text-align:center}
.sec-head{max-width:720px;margin-bottom:clamp(36px,4.5vw,60px)}
.sec-head.center{margin-inline:auto}

/* ---------- 7. Buttons ---------- */
.btn{
  --bg:var(--grad-btn);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.92em 1.6em;border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:700;font-size:.97rem;letter-spacing:-.01em;cursor:pointer;
  background:var(--bg);color:var(--fg);position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s,color .22s,border-color .22s;
  box-shadow:var(--btn-sh);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--btn-sh-h)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .22s}
.btn:hover svg{transform:translateX(3px)}
[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(3px)}
.btn--ghost{background:transparent;color:var(--tx);border-color:var(--line-strong);box-shadow:none}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);box-shadow:none}
.btn--light{background:#fff;color:#0D1B2A;box-shadow:var(--sh-1)}
.btn--light:hover{color:var(--b-600)}
.btn--onDark{background:rgba(255,255,255,.07);color:#fff;border-color:var(--inv-line-strong);box-shadow:none;backdrop-filter:blur(6px)}
.btn--onDark:hover{background:rgba(255,255,255,.14);border-color:rgba(34,211,238,.5);box-shadow:none}
.btn--sm{padding:.66em 1.15em;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45em;font-weight:700;color:var(--accent);
  font-size:.95rem;transition:gap .2s,color .2s;
}
.link-arrow:hover{gap:.75em;color:var(--accent-strong)}
.link-arrow svg{width:1em;height:1em}
[dir="rtl"] .link-arrow svg{transform:scaleX(-1)}
.sec--dark .link-arrow,.hero .link-arrow,.cta .link-arrow{color:var(--inv-accent)}
.sec--dark .link-arrow:hover{color:var(--b-200)}

/* ---------- 8. Header / Nav ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--b-700);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

.hdr{
  position:sticky;top:0;z-index:100;
  background:var(--hdr);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--chrome-line);
  transition:background-color .3s,border-color .3s,box-shadow .3s;
}
.hdr--scrolled{background:var(--hdr-scroll);box-shadow:0 10px 30px -22px rgba(13,27,42,.45)}
:root[data-theme="dark"] .hdr--scrolled{box-shadow:0 10px 30px -20px rgba(0,0,0,.9)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr--scrolled{box-shadow:0 10px 30px -20px rgba(0,0,0,.9)}
}
.hdr__in{display:flex;align-items:center;gap:clamp(14px,3vw,36px);height:76px}
.brand{display:flex;align-items:center;gap:11px;flex:none;font-weight:800;letter-spacing:-.03em;color:var(--chrome-mark);font-size:1.16rem}
.brand__mark{width:34px;height:34px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt small{font-size:.53rem;letter-spacing:.26em;font-weight:600;color:var(--chrome-accent);margin-top:4px}

.nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav a{
  padding:.55em .82em;border-radius:var(--r-pill);font-size:.93rem;font-weight:600;
  color:var(--chrome-tx-2);transition:color .2s,background .2s;white-space:nowrap;
}
.nav a:hover{color:var(--chrome-tx);background:var(--chrome-hover)}
.nav a[aria-current="page"]{color:var(--chrome-accent);background:var(--chrome-hover)}
.hdr__cta{display:flex;align-items:center;gap:9px;flex:none}
.lang{
  display:inline-flex;align-items:center;gap:.4em;padding:.5em .85em;border-radius:var(--r-pill);
  border:1px solid var(--chrome-line-strong);color:var(--chrome-tx);font-weight:700;font-size:.84rem;transition:.2s;
}
.lang:hover{border-color:var(--chrome-accent);color:var(--chrome-accent)}

/* theme toggle */
.tglt{
  width:40px;height:40px;flex:none;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--r-pill);border:1px solid var(--chrome-line-strong);
  background:transparent;color:var(--chrome-tx);transition:.2s;padding:0;
}
.tglt:hover{border-color:var(--chrome-accent);color:var(--chrome-accent);background:var(--chrome-hover)}
.tglt svg{width:18px;height:18px}
.tglt .i-moon{display:block}
.tglt .i-sun{display:none}
:root[data-theme="dark"] .tglt .i-moon{display:none}
:root[data-theme="dark"] .tglt .i-sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tglt .i-moon{display:none}
  :root:not([data-theme="light"]) .tglt .i-sun{display:block}
}

.burger{display:none;width:42px;height:42px;border:1px solid var(--chrome-line-strong);border-radius:12px;background:transparent;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--chrome-tx);position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--chrome-tx);transition:.25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1120px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--chrome);border-bottom:1px solid var(--chrome-line);
    padding:16px var(--gut) 26px;margin:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s;
    max-height:calc(100dvh - 76px);overflow:auto;
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:.85em 1em;font-size:1.02rem;border-radius:10px}
  .hdr__cta .btn{display:none}
}

/* ---------- 9. Decoration (pixel motif from the logo) ---------- */
.pixfield{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pixfield i{
  position:absolute;display:block;border-radius:2px;background:var(--pix);opacity:.5;
  animation:pixpulse 5.5s ease-in-out infinite;
}
.sec--dark .pixfield i,.cta .pixfield i{background:var(--b-300)}
@keyframes pixpulse{0%,100%{opacity:.15;transform:scale(.85)}50%{opacity:.75;transform:scale(1)}}
.gridlines{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 78%);
}
.sec--dark .gridlines,.cta .gridlines{
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
}
.aurora{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.aurora--a{width:620px;height:620px;background:radial-gradient(circle,var(--aurora-a),transparent 66%);
  top:-220px;inset-inline-start:-160px;opacity:.16}
.aurora--b{width:540px;height:540px;background:radial-gradient(circle,var(--aurora-b),transparent 62%);
  bottom:-260px;inset-inline-end:-140px;opacity:.13}
.sec--dark .aurora--a,.cta .aurora--a,.ftr .aurora--a{opacity:.34}
.sec--dark .aurora--b,.cta .aurora--b{opacity:.24}
:root[data-theme="dark"] .aurora--a{opacity:.34}
:root[data-theme="dark"] .aurora--b{opacity:.24}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .aurora--a{opacity:.34}
  :root:not([data-theme="light"]) .aurora--b{opacity:.24}
}

/* ---------- 10. Hero ---------- */
.hero{position:relative;background:var(--chrome);background-image:var(--chrome-grad);
  color:var(--chrome-tx);overflow:hidden;isolation:isolate}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:180px;
  background:linear-gradient(180deg,transparent,var(--chrome));pointer-events:none;
}
.hero__in{position:relative;z-index:2;padding-block:clamp(84px,12vw,148px) clamp(78px,10vw,120px)}
.hero h1{color:var(--chrome-tx)}
.hero .lead{color:var(--chrome-tx-2);max-width:56ch}
.hero .eyebrow{color:var(--chrome-accent)}
.hero .link-arrow{color:var(--chrome-accent)}
.hero .link-arrow:hover{color:var(--accent-strong)}
.hero .tick{color:var(--chrome-tx-2)}
.hero .tick svg{color:var(--chrome-accent)}
.hero--page .hero__in{padding-block:clamp(64px,8vw,104px) clamp(56px,7vw,88px)}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,68px);align-items:center}
.hero__grid--solo{grid-template-columns:1fr;max-width:820px}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr}}

/* the ghost button in a hero follows the chrome, not the always-dark bands */
.hero .btn--onDark{background:transparent;color:var(--chrome-tx);border-color:var(--chrome-line-strong);backdrop-filter:none}
.hero .btn--onDark:hover{background:var(--chrome-hover);border-color:var(--chrome-accent);color:var(--chrome-accent)}

.pill{
  display:inline-flex;align-items:center;gap:.6em;padding:.5em 1em .5em .6em;border-radius:var(--r-pill);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent-soft-tx);font-size:.82rem;font-weight:600;margin-bottom:1.4rem;
}
.pill b{background:var(--grad-btn);color:#fff;border-radius:var(--r-pill);padding:.18em .7em;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.sec--dark .pill,.cta .pill{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.32);color:var(--b-200)}

.breadcrumb{display:flex;gap:.5em;align-items:center;font-size:.84rem;color:var(--chrome-tx-3);margin-bottom:1.1rem;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--chrome-accent)}
.breadcrumb span{opacity:.6}
.breadcrumb [aria-current="page"]{color:var(--chrome-tx);opacity:1;font-weight:600}

/* ---------- 11. Cards ---------- */
.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s;
  overflow:hidden;height:100%;
}
.card::before{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
[dir="rtl"] .card::before{transform-origin:right}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:.55rem}
.card p{color:var(--tx-2);font-size:.98rem}
.card--dark{background:var(--inv-2);border-color:var(--inv-line);color:var(--tx-inv)}
.card--dark h3{color:var(--tx-inv)}
.card--dark p{color:var(--tx-inv-2)}
.card--dark:hover{border-color:rgba(34,211,238,.35);box-shadow:var(--glow)}
.sec--dark .card{background:var(--inv-2);border-color:var(--inv-line);color:var(--tx-inv)}
.sec--dark .card h3{color:var(--tx-inv)}
.sec--dark .card p{color:var(--tx-inv-2)}
.card--flat{border-radius:var(--r);box-shadow:none}
.card--flat:hover{transform:none;box-shadow:var(--sh-1)}
.card__num{font-family:var(--ff-mono);font-size:.78rem;color:var(--accent);letter-spacing:.14em;margin-bottom:1rem;display:block}
.sec--dark .card__num,.card--dark .card__num{color:var(--inv-accent)}

.ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.15rem;
  background:var(--grad-soft);border:1px solid var(--accent-line);color:var(--accent);flex:none;
}
.ico svg{width:24px;height:24px;stroke-width:1.7}
.card--dark .ico,.sec--dark .ico{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.28);color:var(--b-300)}

.tick{display:flex;gap:.7em;align-items:flex-start;color:var(--tx-2);font-size:.97rem;padding-block:.34em}
.tick svg{width:19px;height:19px;flex:none;margin-top:.28em;color:var(--accent)}
.sec--dark .tick,.hero .tick{color:var(--tx-inv-2)}
.sec--dark .tick svg,.hero .tick svg{color:var(--inv-accent)}

/* ---------- 12. Stats, logos, chips, notes ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stats>div{background:var(--card);padding:clamp(22px,3vw,32px);text-align:center}
.stats b{display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.04em;
  background:var(--grad-tx);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stats span{display:block;margin-top:.5rem;font-size:.86rem;color:var(--tx-2);font-weight:600}
.stats--dark{background:var(--inv-line);border-color:var(--inv-line)}
.stats--dark>div{background:var(--inv-2)}
.stats--dark span{color:var(--tx-inv-2)}
@media (max-width:880px){.stats{grid-template-columns:repeat(2,1fr)}}

.logos{display:flex;flex-wrap:wrap;gap:14px 42px;align-items:center;justify-content:center}
.logos div{
  font-weight:700;letter-spacing:.02em;color:var(--tx-3);font-size:1rem;
  border:1px dashed var(--line-strong);border-radius:10px;padding:.6em 1.2em;
}
.sec--dark .logos div{color:var(--tx-inv-3);border-color:var(--inv-line-strong)}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  padding:.44em .95em;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-soft-tx);
  font-size:.85rem;font-weight:600;border:1px solid var(--accent-line);
}
.sec--dark .chip{background:rgba(255,255,255,.06);color:var(--b-200);border-color:var(--inv-line-strong)}

.note{
  border-inline-start:3px solid var(--b-400);background:var(--accent-soft);
  padding:1rem 1.25rem;border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--tx-2);font-size:.95rem;
}
[dir="rtl"] .note{border-radius:var(--r-sm) 0 0 var(--r-sm)}

.frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--inv-2);
  border:1px solid var(--inv-line);box-shadow:var(--sh-3);
}
.frame img{width:100%}
.frame--pad{padding:clamp(24px,4vw,48px)}

/* Logo panel. The artwork follows the theme the same way every other card does:
   the light lockup on a white card, the dark lockup on a near-black one. Declared
   as a background image so only the active theme's file is ever downloaded. */
.frame--logo{
  aspect-ratio:640/625;
  max-width:420px;
  margin-inline:auto;
  background:#FFFFFF url("../img/flexcode-logo-light.jpg") center/contain no-repeat;
  border-color:var(--line-strong);
  box-shadow:0 30px 70px -34px rgba(13,27,42,.35);
}
:root[data-theme="dark"] .frame--logo{
  background-color:#060F1A;
  background-image:url("../img/flexcode-logo-dark.jpg");
  border-color:var(--inv-line-strong);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .frame--logo{
    background-color:#060F1A;
    background-image:url("../img/flexcode-logo-dark.jpg");
    border-color:var(--inv-line-strong);
  }
}

/* ---------- 13. Steps, accordion, CTA ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.steps li{position:relative;padding:clamp(22px,3vw,30px) 0 clamp(22px,3vw,30px) 74px;border-top:1px solid var(--line)}
[dir="rtl"] .steps li{padding:clamp(22px,3vw,30px) 74px clamp(22px,3vw,30px) 0}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;inset-inline-start:0;top:clamp(22px,3vw,30px);
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--grad-btn);color:#fff;font-weight:800;font-size:.92rem;font-family:var(--ff-mono);
}
.steps h3{margin-bottom:.35rem}
.steps p{color:var(--tx-2);font-size:.97rem}
.sec--dark .steps li{border-color:var(--inv-line)}
.sec--dark .steps p{color:var(--tx-inv-2)}

.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;font-weight:700;font-size:1.05rem;position:relative;transition:color .2s}
[dir="rtl"] .acc summary{padding:1.35rem 0 1.35rem 2.5rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;inset-inline-end:.4rem;top:1.7rem;width:13px;height:13px;
  border-inline-end:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s;
}
[dir="rtl"] .acc summary::after{border-inline-end:0;border-inline-start:2px solid var(--accent);transform:rotate(-45deg)}
.acc details[open] summary{color:var(--accent)}
.acc details[open] summary::after{transform:rotate(-135deg);top:2rem}
[dir="rtl"] .acc details[open] summary::after{transform:rotate(135deg)}
.acc p{padding-bottom:1.5rem;color:var(--tx-2);max-width:74ch}

.cta{position:relative;overflow:hidden;background:var(--inv);border-radius:var(--r-xl);
  padding:clamp(38px,6vw,72px);color:var(--tx-inv);isolation:isolate;border:1px solid var(--inv-line)}
.cta h2{color:var(--tx-inv);max-width:20ch}
.cta p{color:var(--tx-inv-2);max-width:52ch}
.cta__in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.cta__in>div:first-child{flex:1 1 420px}
.cta__in .btn-row{flex:0 1 auto}
@media (max-width:760px){.cta__in .btn-row{width:100%}.cta__in .btn{flex:1 1 auto}}

/* ---------- 14. Forms ---------- */
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.05rem}
.field label{font-size:.86rem;font-weight:700;color:var(--tx)}
.field label i{color:var(--accent);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;padding:.85em 1em;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--tx);font-size:.97rem;transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:132px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-line)
}
.form-note{font-size:.82rem;color:var(--tx-3);margin-top:.9rem}
.form-ok{display:none;padding:1rem 1.2rem;border-radius:var(--r-sm);background:var(--accent-soft);
  border:1px solid var(--accent-line);color:var(--accent-soft-tx);font-weight:600;font-size:.95rem;margin-bottom:1rem}
.form-ok.show{display:block}

/* ---------- 15. Jobs, posts ---------- */
.job{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:1.4rem 0;border-bottom:1px solid var(--line)}
.job:first-child{border-top:1px solid var(--line)}
.job__meta{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.4rem}

.post{display:flex;flex-direction:column;height:100%}
.post__tag{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.post h3{font-size:1.16rem;margin-bottom:.6rem}
.post .post__foot{margin-top:auto;padding-top:1.2rem;font-size:.82rem;color:var(--tx-3)}

/* ---------- 16. Footer ---------- */
.ftr{background:var(--chrome);color:var(--chrome-tx-2);padding-block:clamp(56px,7vw,84px) 30px;
  position:relative;overflow:hidden;border-top:1px solid var(--chrome-line)}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,52px)}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr h4{color:var(--chrome-tx);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem}
.ftr li+li{margin-top:.6rem}
.ftr a{font-size:.94rem;transition:color .2s}
.ftr a:hover{color:var(--chrome-accent)}
.ftr__bottom{margin-top:clamp(38px,5vw,58px);padding-top:24px;border-top:1px solid var(--chrome-line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--chrome-tx-3)}
.social{display:flex;gap:10px;margin-top:1.3rem}
.social a{width:38px;height:38px;border-radius:11px;border:1px solid var(--chrome-line-strong);
  display:grid;place-items:center;color:var(--chrome-tx-2);transition:.2s}
.social a:hover{border-color:var(--chrome-accent);color:var(--chrome-accent);background:var(--chrome-hover)}
.social svg{width:17px;height:17px}

/* ---------- 17. Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}

/* ---------- 18. Partner attribution ---------- */
.card p .xs.muted.nowrap{
  display:block;margin-top:.7rem;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.card--dark p .xs.muted.nowrap,.sec--dark .card p .xs.muted.nowrap{color:var(--inv-accent)}
.card h3 .xs.muted{font-weight:600;letter-spacing:.04em;white-space:nowrap}
.sec--dark .card h3 .xs.muted{color:var(--tx-inv-3)}

/* ---------- 19. Utilities ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}
.maxw-60{max-width:60ch}
.nowrap{white-space:nowrap}
.hide-sm{display:initial}
@media (max-width:620px){.hide-sm{display:none}}