/* ============================================================================
   NABGHA DESIGN OS  ·  نظام تصميم نبغة
   AI-first Education Operating System — one source of truth.
   Namespaced .nx-*  ·  Light + Dark  ·  60fps transform/opacity motion
   ·  WCAG-AA focus states  ·  honors prefers-reduced-motion.
   Brand: blue #2563EB  ·  AI accent: violet #7C3AED.
   ========================================================================== */

/* ------------------------------- TOKENS ---------------------------------- */
:root{
  /* brand + AI (constant across themes) */
  --brand:#2563EB; --brand-600:#2563EB; --brand-700:#1D4ED8; --brand-500:#3B82F6; --brand-050:#EFF4FF;
  --ai:#7C3AED;    --ai-600:#7C3AED;    --ai-500:#8B5CF6;    --ai-050:#F3EEFE;
  /* warm accent — the friendly third colour that breaks the cool blue/purple
     and gives the page (a kids' product) rhythm + warmth. Used sparingly. */
  --warm:#F59E0B; --warm-600:#D97706; --warm-500:#FBBF24; --warm-050:#FEF4E3;
  --success:#22C55E; --warn:#F59E0B; --danger:#EF4444;
  --grad-brand:linear-gradient(120deg,#2563EB,#7C3AED);
  --grad-ai:linear-gradient(120deg,#7C3AED,#3B82F6);
  --grad-warm:linear-gradient(120deg,#FBBF24,#F97316);
  --grad-aurora:linear-gradient(120deg,#2563EB 0%,#7C3AED 45%,#3B82F6 100%);
  --grad-mesh:
    radial-gradient(60% 80% at 15% 10%,rgba(37,99,235,.26),transparent 60%),
    radial-gradient(55% 70% at 88% 18%,rgba(124,58,237,.24),transparent 60%),
    radial-gradient(48% 60% at 78% 82%,rgba(245,158,11,.18),transparent 62%),
    radial-gradient(70% 90% at 40% 100%,rgba(59,130,246,.16),transparent 60%);

  /* semantic — LIGHT */
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9; --surface-3:#E9EEF6;
  --ink:#0F172A; --ink-2:#475569; --ink-3:#94A3B8;
  --line:#E2E8F0; --line-2:#EEF2F7;
  --primary:#2563EB; --primary-ink:#FFFFFF; --primary-soft:#EFF4FF;
  --accent:#7C3AED; --accent-soft:#F3EEFE;
  --success-soft:#E7F9EE; --warn-soft:#FEF3E2; --danger-soft:#FDECEC;
  --glass:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.65);
  --focus:0 0 0 3px rgba(37,99,235,.30);

  /* typography */
  --f-display:'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-body:'IBM Plex Sans Arabic','Alexandria',system-ui,sans-serif;
  --f-num:'Alexandria','IBM Plex Sans Arabic',sans-serif;
  --t-xs:12px; --t-sm:13.5px; --t-md:15px; --t-lg:17px; --t-xl:20px;
  --t-2xl:clamp(22px,2.4vw,28px); --t-3xl:clamp(28px,3.4vw,38px);
  --t-4xl:clamp(34px,5vw,58px); --t-hero:clamp(40px,6.4vw,76px);
  --lh:1.7; --lh-tight:1.15;

  /* spacing (8·16·24·32·48·64) */
  --s0:4px; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  /* radius (base 20) */
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  /* elevation — very soft */
  --e1:0 1px 2px rgba(15,23,42,.04),0 2px 8px rgba(15,23,42,.05);
  --e2:0 6px 18px -6px rgba(15,23,42,.08),0 18px 44px -18px rgba(15,23,42,.14);
  --e3:0 30px 80px -28px rgba(37,99,235,.30);
  --glow-ai:0 0 0 1px rgba(124,58,237,.14),0 14px 46px -10px rgba(124,58,237,.40);
  --glow-brand:0 0 0 1px rgba(37,99,235,.14),0 14px 46px -10px rgba(37,99,235,.40);

  /* motion */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:560ms;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1); --spring:cubic-bezier(.34,1.56,.64,1);

  --container:1200px;
}

:root[data-theme="dark"]{
  --bg:#0B1220; --surface:#0F1A2E; --surface-2:#152238; --surface-3:#1C2C46;
  --ink:#F1F5F9; --ink-2:#9FB0C9; --ink-3:#647089;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.06);
  --primary:#5B8DEF; --primary-ink:#0B1220; --primary-soft:rgba(91,141,239,.15);
  --accent:#A78BFA; --accent-soft:rgba(124,58,237,.18);
  --success-soft:rgba(34,197,94,.15); --warn-soft:rgba(245,158,11,.15); --danger-soft:rgba(239,68,68,.16);
  --glass:rgba(17,27,48,.62); --glass-line:rgba(255,255,255,.10);
  --focus:0 0 0 3px rgba(91,141,239,.40);
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 6px 18px -6px rgba(0,0,0,.5),0 22px 50px -18px rgba(0,0,0,.7);
  --e3:0 30px 80px -28px rgba(0,0,0,.75);
  --grad-mesh:
    radial-gradient(60% 80% at 15% 10%,rgba(37,99,235,.34),transparent 60%),
    radial-gradient(55% 70% at 90% 20%,rgba(124,58,237,.32),transparent 60%),
    radial-gradient(70% 90% at 60% 100%,rgba(59,130,246,.20),transparent 60%);
}

/* --------------------------------- BASE ---------------------------------- */
.nx,.nx *{box-sizing:border-box}
.nx-body{
  margin:0;font-family:var(--f-body);background:var(--bg);color:var(--ink);
  line-height:var(--lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background var(--dur-3) var(--ease),color var(--dur-3) var(--ease);
}
.nx-body *{box-sizing:border-box}
.nx-container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.nx-display{font-family:var(--f-display);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.02em}
.nx-num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.nx-grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.nx-ai-text{background:var(--grad-ai);-webkit-background-clip:text;background-clip:text;color:transparent}
.nx-muted{color:var(--ink-2)} .nx-faint{color:var(--ink-3)}
a{color:inherit}

/* --------------------------------- ICON ---------------------------------- */
.nx-ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* -------------------------------- BUTTONS -------------------------------- */
.nx-btn{
  font-family:var(--f-body);font-weight:600;font-size:var(--t-sm);line-height:1;
  border:1px solid transparent;border-radius:var(--r-pill);padding:12px 20px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
  background:var(--grad-brand);color:#fff;box-shadow:0 10px 24px -10px rgba(37,99,235,.6);
  transition:transform var(--dur-1) var(--ease-out),filter var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;text-decoration:none;
}
.nx-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 36px -12px rgba(37,99,235,.72)}
.nx-btn:active{transform:translateY(0) scale(.98)}
.nx-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.nx-btn[disabled],.nx-btn.is-loading{opacity:.6;cursor:not-allowed;transform:none;filter:none}
.nx-btn.is-loading{color:transparent}
.nx-btn.is-loading::after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:nx-spin .7s linear infinite}
/* ripple */
.nx-btn::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.45),transparent 45%);
  opacity:0;transition:opacity var(--dur-3) var(--ease)}
.nx-btn:active::before{opacity:1;transition:none}
.nx-btn--ai{background:var(--grad-ai);box-shadow:0 10px 24px -10px rgba(124,58,237,.6)}
.nx-btn--ai:hover{box-shadow:var(--glow-ai)}
.nx-btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--e1)}
.nx-btn--ghost:hover{border-color:var(--brand);color:var(--brand);filter:none}
.nx-btn--soft{background:var(--primary-soft);color:var(--primary);box-shadow:none}
.nx-btn--soft:hover{filter:brightness(.98)}
.nx-btn--white{background:#fff;color:var(--brand);box-shadow:var(--e2)}
.nx-btn--sm{padding:9px 15px;font-size:var(--t-xs)}
.nx-btn--lg{padding:15px 28px;font-size:var(--t-lg)}
.nx-btn--block{width:100%}

/* --------------------------------- CHIP ---------------------------------- */
.nx-chip{font-size:var(--t-sm);font-weight:600;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);border-radius:var(--r-pill);padding:8px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1),transform var(--dur-1)}
.nx-chip:hover{color:var(--ink);transform:translateY(-1px)}
.nx-chip.is-active{background:var(--grad-brand);color:#fff;border-color:transparent}
.nx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--t-xs);letter-spacing:.02em;
  color:var(--brand);background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);
  padding:7px 15px;border-radius:var(--r-pill)}
.nx-eyebrow--ai{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.nx-eyebrow--warm{color:var(--warm-600);background:var(--warm-050);border-color:color-mix(in srgb,var(--warm) 26%,transparent)}

/* --------------------------------- BADGE --------------------------------- */
.nx-badge{font-size:var(--t-xs);font-weight:700;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--primary-soft);color:var(--primary);display:inline-flex;align-items:center;gap:5px}
.nx-badge--ai{background:var(--accent-soft);color:var(--accent)}
.nx-badge--success{background:var(--success-soft);color:var(--success)}
.nx-badge--warn{background:var(--warn-soft);color:var(--warn)}
.nx-badge--danger{background:var(--danger-soft);color:var(--danger)}
.nx-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px var(--success-soft)}

/* --------------------------------- INPUT --------------------------------- */
.nx-field{display:flex;flex-direction:column;gap:7px}
.nx-label{font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.nx-input,.nx-select,.nx-textarea{
  font-family:var(--f-body);font-size:var(--t-md);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;width:100%;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.nx-input:focus,.nx-select:focus,.nx-textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.nx-input::placeholder{color:var(--ink-3)}
.nx-textarea{min-height:104px;resize:vertical}

/* --------------------------------- CARD ---------------------------------- */
.nx-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--e1);padding:var(--s3);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.nx-card--interactive{cursor:pointer}
.nx-card--interactive:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:var(--line-2)}
.nx-glass{background:var(--glass);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--e2)}

/* KPI */
.nx-kpi{position:relative;overflow:hidden}
.nx-kpi-ic{position:absolute;inset-inline-end:18px;top:18px;color:var(--ink-3);opacity:.7}
.nx-kpi-val{font-family:var(--f-num);font-size:var(--t-3xl);font-weight:800;line-height:1}
.nx-kpi-lbl{font-size:var(--t-sm);color:var(--ink-3);margin-top:6px;font-weight:600}
.nx-kpi-delta{font-size:var(--t-xs);font-weight:800;margin-top:9px;display:inline-flex;align-items:center;gap:4px}
.nx-kpi-delta.up{color:var(--success)} .nx-kpi-delta.down{color:var(--danger)}

/* ------------------------------ SEGMENTED / TABS -------------------------- */
.nx-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px;gap:3px}
.nx-seg button{font-family:var(--f-body);font-size:var(--t-sm);font-weight:600;border:0;background:transparent;
  color:var(--ink-2);border-radius:var(--r-pill);padding:9px 16px;cursor:pointer;transition:color var(--dur-2)}
.nx-seg button.is-active{background:var(--surface);color:var(--brand);box-shadow:var(--e1)}
:root[data-theme="dark"] .nx-seg button.is-active{background:var(--grad-brand);color:#fff}

/* -------------------------------- TABLE ---------------------------------- */
.nx-table{width:100%;border-collapse:collapse;font-size:var(--t-md)}
.nx-table th{text-align:start;font-size:var(--t-sm);color:var(--ink-3);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--line)}
.nx-table td{padding:14px 16px;border-bottom:1px solid var(--line-2)}
.nx-table tbody tr{transition:background var(--dur-1)}
.nx-table tbody tr:hover{background:var(--surface-2)}

/* --------------------------- PROGRESS ring/bar --------------------------- */
.nx-ring{--val:0;--sz:120px;--stroke:11px;width:var(--sz);height:var(--sz);border-radius:50%;position:relative;
  background:conic-gradient(var(--brand) calc(var(--val)*1%),var(--accent) calc(var(--val)*1%),var(--line) 0);
  transition:background var(--dur-4) var(--ease-out)}
.nx-ring::after{content:"";position:absolute;inset:var(--stroke);border-radius:50%;background:var(--surface)}
.nx-ring .nx-ring-txt{position:absolute;inset:0;display:grid;place-content:center;font-family:var(--f-num);font-weight:800;font-size:24px}
.nx-bar{height:9px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.nx-bar>i{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--grad-brand);
  transition:width var(--dur-4) var(--ease-out)}

/* ------------------------------- SKELETON -------------------------------- */
.nx-skeleton{position:relative;overflow:hidden;background:var(--surface-3);border-radius:var(--r-xs)}
.nx-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:nx-shimmer 1.4s infinite}
:root[data-theme="dark"] .nx-skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
.nx-skeleton--text{height:12px;margin:7px 0} .nx-skeleton--title{height:22px;width:60%}
.nx-skeleton--block{height:90px} .nx-skeleton--avatar{width:46px;height:46px;border-radius:50%}

/* --------------------------------- TOAST --------------------------------- */
.nx-toasts{position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:300;display:flex;flex-direction:column;gap:10px}
.nx-toast{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 17px;
  font-size:var(--t-md);font-weight:600;box-shadow:var(--e2);display:flex;align-items:center;gap:11px;min-width:240px;
  animation:nx-toast-in var(--dur-3) var(--spring)}
.nx-toast--ok{border-inline-start:3px solid var(--success)}
.nx-toast--err{border-inline-start:3px solid var(--danger)}

/* ----------------------------- MODAL / DRAWER ---------------------------- */
.nx-scrim{position:fixed;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(6px);
  display:grid;place-items:center;z-index:200;padding:20px;opacity:0;pointer-events:none;transition:opacity var(--dur-2)}
.nx-scrim.is-open{opacity:1;pointer-events:auto}
.nx-modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e3);
  width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:28px;
  transform:translateY(16px) scale(.98);transition:transform var(--dur-3) var(--spring)}
.nx-scrim.is-open .nx-modal{transform:none}

/* -------------------------------- EMPTY ---------------------------------- */
.nx-empty{text-align:center;padding:48px 24px;color:var(--ink-2)}
.nx-empty .nx-empty-ic{width:64px;height:64px;border-radius:var(--r);display:grid;place-items:center;margin:0 auto 16px;
  background:var(--primary-soft);color:var(--brand)}

/* --------------------------------- NAV ----------------------------------- */
.nx-nav-link{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-sm);color:var(--ink-2);
  font-weight:600;font-size:var(--t-md);position:relative;cursor:pointer;text-decoration:none;
  transition:color var(--dur-2),background var(--dur-2)}
.nx-nav-link:hover{background:var(--surface-2);color:var(--ink)}
.nx-nav-link.is-active{color:var(--brand);background:var(--primary-soft)}
.nx-nav-link.is-active::before{content:"";position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:3px;border-radius:var(--r-pill);background:var(--grad-brand)}

/* -------------------------- AI ENGINE / FEATURE tile --------------------- */
.nx-engine{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s3);box-shadow:var(--e1),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2)}
.nx-engine:hover{transform:translateY(-5px);box-shadow:var(--e2);border-color:transparent}
.nx-engine::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;
  background:var(--grad-aurora);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity var(--dur-3)}
.nx-engine:hover::after{opacity:1}
.nx-engine-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--primary-soft);color:var(--brand);transition:transform var(--dur-3) var(--spring)}
.nx-engine:hover .nx-engine-ic{transform:scale(1.08) rotate(-4deg)}
.nx-engine-ic.ai{background:var(--accent-soft);color:var(--accent)}
/* duotone rhythm: the non-AI engine icons go WARM so the 8-card grid reads as a
   balanced warm/cool duotone instead of a flat single hue. */
.nx-engine-ic:not(.ai){background:var(--warm-050);color:var(--warm-600)}
.nx-engine h3{font-family:var(--f-display);font-size:var(--t-lg);font-weight:700;margin:0 0 6px}
.nx-engine p{color:var(--ink-2);font-size:var(--t-sm);margin:0}

/* ------------------------------- TIMELINE -------------------------------- */
.nx-time{position:relative;display:flex;flex-direction:column;gap:6px;padding-inline-start:8px}
.nx-time-step{display:flex;align-items:flex-start;gap:16px;position:relative;padding:10px 0}
.nx-time-rail{position:relative;display:flex;flex-direction:column;align-items:center;flex:none}
.nx-time-node{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;z-index:1;
  background:var(--surface);border:2px solid var(--line);color:var(--ink-3);
  transition:transform var(--dur-3) var(--spring),border-color var(--dur-3),color var(--dur-3),background var(--dur-3)}
.nx-time-step.is-in .nx-time-node{background:var(--grad-brand);border-color:transparent;color:#fff;transform:scale(1.06)}
.nx-time-line{width:2px;flex:1;min-height:22px;background:var(--line)}
.nx-time-step:last-child .nx-time-line{display:none}
.nx-time-body{padding-top:9px}
.nx-time-body h4{font-family:var(--f-display);font-size:var(--t-lg);margin:0 0 3px}
.nx-time-body p{color:var(--ink-2);font-size:var(--t-sm);margin:0}

/* --------------------------- HERO / GRADIENT FX -------------------------- */
.nx-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.nx-aurora::before{content:"";position:absolute;inset:-30%;background:var(--grad-mesh);
  filter:blur(20px);animation:nx-drift 22s var(--ease) infinite alternate}
.nx-grid-fade{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%);mask:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%)}
.nx-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nx-particles i{position:absolute;display:block;width:7px;height:7px;border-radius:50%;
  background:var(--grad-ai);opacity:.5;animation:nx-float 9s var(--ease) infinite}
.nx-particles i:nth-child(3n){background:var(--brand);width:5px;height:5px}
.nx-particles i:nth-child(4n){width:9px;height:9px;opacity:.35}

/* -------------------------- REVEAL / MOTION utils ------------------------ */
/* Fail-safe: hidden for the entrance animation, but a delayed keyframe forces
   visibility after 1.4s even if the IntersectionObserver never runs (JS off /
   observer error) — content is NEVER permanently invisible. */
.nx-reveal{opacity:0;transform:translateY(20px);animation:nx-failsafe 0s linear 1.4s forwards}
.nx-reveal.nx-in{opacity:1;transform:none;animation:none;transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
@keyframes nx-failsafe{to{opacity:1;transform:none}}
.nx-reveal[data-d="1"]{transition-delay:.06s}.nx-reveal[data-d="2"]{transition-delay:.12s}
.nx-reveal[data-d="3"]{transition-delay:.18s}.nx-reveal[data-d="4"]{transition-delay:.24s}
.nx-reveal[data-d="5"]{transition-delay:.30s}.nx-reveal[data-d="6"]{transition-delay:.36s}
.nx-pop{animation:nx-pop var(--dur-3) var(--spring)}
.nx-floaty{animation:nx-bob 6s var(--ease) infinite}

@keyframes nx-spin{to{transform:rotate(360deg)}}
@keyframes nx-shimmer{100%{transform:translateX(100%)}}
@keyframes nx-toast-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes nx-pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@keyframes nx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes nx-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2%,-2%,0) scale(1.08)}}
@keyframes nx-float{0%{transform:translateY(10px)}50%{transform:translateY(-14px)}100%{transform:translateY(10px)}}
@keyframes nx-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes nx-grad-move{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ------------------------------ RESPONSIVE ------------------------------- */
.nx-grid{display:grid;gap:var(--s3)}
.nx-grid-2{grid-template-columns:repeat(2,1fr)}
.nx-grid-3{grid-template-columns:repeat(3,1fr)}
.nx-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.nx-grid-3,.nx-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.nx-grid-2,.nx-grid-3,.nx-grid-4{grid-template-columns:1fr}.nx-container{padding-inline:18px}}

/* ------------------------------ ACCESSIBILITY ---------------------------- */
.nx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nx-btn:focus-visible,.nx-chip:focus-visible,.nx-nav-link:focus-visible,
.nx-input:focus-visible,.nx-seg button:focus-visible{outline:none;box-shadow:var(--focus)}
:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .nx-reveal{opacity:1;transform:none}
  .nx-aurora::before,.nx-particles i,.nx-floaty{animation:none !important}
}