/* Blog V3 — base styles. All rules scoped under .blog-v3-page. */
/* colors tokens (IntelliXR design system) */
/* IntelliXR — Color System
   Primarily black, white, and one accent. Blue is the primary voice;
   pink is the single accent, used sparingly. Slate is structural neutral;
   Carbon is the near-black foundation.

   Color psychology (from brand doc):
   - Signal Blue  — engineered, XR-native. Reads as intelligent + credible.
   - Spectral Pink — spatial, immersive energy from the XR light spectrum.
   - Slate         — enterprise calm; structural neutral for chrome + secondary text.
   - Carbon        — precise, premium depth; grounds intelligence + compliance. */

.blog-v3-page{
  /* ---- Foundation ---- */
  --white: #ffffff;
  --carbon: #030405;        /* near-black ink — the foundation */

  /* ---- Signal Blue (primary voice) — tints & shades ---- */
  --blue-10: #cddeff;
  --blue-20: #abc9ff;
  --blue-30: #82aeff;
  --blue-40: #5892fe;
  --blue-50: #2e77fe;
  --blue: #045cfe;          /* base — Signal Blue */
  --blue-60: #034dd4;
  --blue-70: #033da9;
  --blue-80: #022e7f;
  --blue-90: #011f55;
  --blue-100: #011233;

  /* ---- Spectral Pink (PRIMARY) — tints & shades ---- */
  --pink-10: #ffebff;
  --pink-20: #ffdeff;
  --pink-30: #ffceff;
  --pink-40: #ffbdff;
  --pink-50: #ffadff;
  --pink: #ff9cff;          /* base — Spectral Pink */
  --pink-60: #d582d5;
  --pink-70: #aa68aa;
  --pink-80: #804e80;
  --pink-90: #553455;
  --pink-100: #331f33;

  /* ---- Slate (structural neutral) — derived ramp around #545A7F ---- */
  --slate-10: #eceef4;
  --slate-20: #d4d7e2;
  --slate-30: #b0b5c9;
  --slate-40: #8b91ad;
  --slate: #545a7f;         /* base — Slate */
  --slate-60: #464b6a;
  --slate-70: #363a54;
  --slate-80: #262a3f;
  --slate-90: #171a29;
  --slate-100: #0c0e18;

  /* ---- Iris Violet (accent) — tints & shades around #C9AAFF ---- */
  --violet-20: #e7dbff;
  --violet-40: #d6c2ff;
  --violet: #c9aaff;        /* base — Iris Violet accent */
  --violet-60: #a487d6;
  --violet-80: #6f5a99;

  /* ================= SEMANTIC ALIASES ================= */
  /* Default surface model is DARK (cinematic). See [data-theme="light"] below. */

  /* Backgrounds */
  --bg-base: var(--carbon);
  --bg-raised: #0a0c14;
  --bg-sunken: #010204;

  /* Text */
  --text-strong: var(--white);
  --text-body: rgba(255, 255, 255, 0.82);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.34);
  --text-on-accent: var(--carbon);   /* primary/accent are light — use dark ink */

  /* Accents — Pink is primary, Blue supports, Violet is the accent */
  --accent-primary: var(--pink);
  --accent-primary-hover: var(--pink-50);
  --accent-primary-press: var(--pink-60);
  --accent-support: var(--blue);
  --accent-secondary: var(--violet);

  /* Lines & borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);
  --focus-ring: var(--blue-40);

  /* Status (kept clinical + restrained) */
  --success: #3ecf8e;
  --warning: #ffcf5c;
  --danger: #ff5d5d;
  --info: var(--blue-40);
}

/* ---- Light theme: white foundation, carbon type ---- */
.blog-v3-page[data-theme="light"]{
  --bg-base: var(--white);
  --bg-raised: #f5f6fa;
  --bg-sunken: #eceef4;

  --text-strong: var(--carbon);
  --text-body: rgba(3, 4, 5, 0.80);
  --text-muted: rgba(3, 4, 5, 0.55);
  --text-faint: rgba(3, 4, 5, 0.34);

  --border-subtle: rgba(3, 4, 5, 0.07);
  --border-default: rgba(3, 4, 5, 0.12);
  --border-strong: rgba(3, 4, 5, 0.24);
}

/* typography tokens (IntelliXR design system) */
/* IntelliXR — Typography
   Raleway across the board: clinical UI to investor decks.
   Precise, geometric letterforms signal engineered clarity.
   Weights: 300 Light · 400 Regular. */

.blog-v3-page{
  --font-sans: 'Raleway', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Numeric / data readouts reuse Raleway with tabular figures where needed */
  --font-mono: 'Raleway', ui-sans-serif, system-ui, sans-serif;

  /* Weights — Light + Regular only */
  --fw-light: 300;        /* @kind font */
  --fw-regular: 400;      /* @kind font */

  /* Type scale (1.250 major-third-ish, tuned) */
  --text-display: 4.5rem;    /* 72px — hero / cover */
  --text-h1: 3rem;           /* 48px */
  --text-h2: 2.25rem;        /* 36px */
  --text-h3: 1.5rem;         /* 24px */
  --text-h4: 1.25rem;        /* 20px */
  --text-lg: 1.125rem;       /* 18px */
  --text-base: 1rem;         /* 16px */
  --text-sm: 0.875rem;       /* 14px */
  --text-xs: 0.75rem;        /* 12px */
  --text-2xs: 0.6875rem;     /* 11px — labels / eyebrows */

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — tight display, wide technical labels */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.22em;   /* spaced-out technical eyebrows (see mood board) */
}

/* spacing tokens (IntelliXR design system) */
/* IntelliXR — Spacing & Layout
   8-point base grid. Structured, modular, deployable at scale. */

.blog-v3-page{
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
  --section-y: 96px;

  /* Corner radii — engineered, restrained (not pill-soft) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
}

/* effects tokens (IntelliXR design system) */
/* IntelliXR — Effects: glassmorphism, gradients, blur, shadow, motion
   Cinematic + immersive. Quiet spatial depth. Glass surfaces float over
   blurred blue/purple gradient fields (see mood board). Used with restraint —
   engineered, not decorative. */

.blog-v3-page{
  /* ---- Blur (backdrop) ---- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;
  --blur-xl: 48px;

  /* ---- Glass surfaces ----
     On dark: frosted white films. On light: frosted carbon films. */
  --glass-fill: rgba(255, 255, 255, 0.06);
  --glass-fill-strong: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.35);

  /* ---- Signature gradients (from mood board) ---- */
  /* Cinematic radial aura — the core brand backdrop */
  --grad-aura: radial-gradient(120% 120% at 50% 0%,
      #1a2a6e 0%, #0a1236 42%, var(--carbon) 78%);
  /* Signal glow — blue core bleeding into spectral pink at the edge */
  --grad-signal: radial-gradient(90% 90% at 30% 30%,
      var(--blue-40) 0%, var(--blue) 38%, var(--blue-80) 72%, var(--carbon) 100%);
  /* Spectral sweep — blue → pink, the "insight" accent gradient */
  --grad-spectral: linear-gradient(120deg, var(--blue) 0%, #6b4bff 52%, var(--pink) 100%);
  /* Lens layers — soft vertical light diffraction (image: gradient-lens) */
  --grad-lens: linear-gradient(90deg,
      rgba(4, 92, 254, 0) 0%, rgba(130, 174, 255, 0.28) 45%,
      rgba(255, 156, 255, 0.18) 70%, rgba(4, 92, 254, 0) 100%); /* @kind color */
  /* Text-on-media protection gradient */
  --grad-scrim: linear-gradient(180deg, rgba(3, 4, 5, 0) 0%, rgba(3, 4, 5, 0.85) 100%); /* @kind color */

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(1, 8, 24, 0.4);
  --shadow-md: 0 8px 24px rgba(1, 8, 24, 0.45);
  --shadow-lg: 0 24px 60px rgba(1, 8, 24, 0.55);
  /* Signal glow — accent bloom for focal elements (use sparingly) */
  --shadow-glow-blue: 0 0 0 1px rgba(4, 92, 254, 0.35), 0 12px 40px rgba(4, 92, 254, 0.35);
  --shadow-glow-pink: 0 0 0 1px rgba(255, 156, 255, 0.30), 0 12px 40px rgba(255, 156, 255, 0.28);
  /* Primary glow → follows the primary accent (pink) */
  --shadow-glow-primary: var(--shadow-glow-pink);
  /* Diagonal blue → pink sweep for primary buttons */
  --grad-button: linear-gradient(135deg, var(--blue) 0%, #7b4bff 52%, var(--pink) 100%);
  --grad-button-hover: linear-gradient(135deg, var(--blue-50) 0%, #8f63ff 52%, var(--pink-50) 100%);
  /* Inner top highlight for glass edges */
  --shadow-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.18);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-med: 260ms;    /* @kind other */
  --dur-slow: 480ms;   /* @kind other */
}


body.blog-v3-body{margin:0;background:#030405}
/* scoped reset */
.blog-v3-page,.blog-v3-page *,.blog-v3-page *::before,.blog-v3-page *::after{box-sizing:border-box}
.blog-v3-page{display:block;position:relative;min-height:100vh;width:100%;overflow: clip;background:var(--bg-base);color:var(--text-body);font-family:var(--font-sans);font-weight:400;transition:background var(--dur-slow) var(--ease-standard),color var(--dur-med) var(--ease-standard);-webkit-font-smoothing:antialiased;line-height:1.5;font-size:16px}
.blog-v3-page :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd){margin:0;padding:0}
.blog-v3-page :where(ul,ol){list-style:none}
.blog-v3-page :where(img,svg,video){max-width:100%;height:auto}
.blog-v3-page img{display:block;border:0}
.blog-v3-page a{color:var(--blue-40);text-decoration:none;background:none;box-shadow:none}
.blog-v3-page a:hover{color:var(--blue-30)}
.blog-v3-page button{font:inherit;margin:0}
.blog-v3-page :where(h1,h2,h3,h4){font-family:var(--font-sans);text-transform:none}
.blog-v3-page :focus-visible{outline:2px solid var(--focus-ring,#5892fe);outline-offset:2px}
.blog-v3-page > *:not(.blog-v3-bg-aura):not(.blog-v3-bg-lens):not(.blog-v3-scrollfab){position:relative;z-index:1}
.blog-v3-page .blog-v3-article{display:block}
.blog-v3-page [data-pinkdot]{background:#ff78d6;box-shadow:0 0 10px #ff78d6}
.blog-v3-page .blog-v3-bg-aura{position:fixed;inset:0;z-index:0;background:var(--grad-aura);pointer-events:none}
.blog-v3-page .blog-v3-bg-lens{position:fixed;inset:-10% 0 0 0;z-index:0;background:var(--grad-lens);mix-blend-mode:screen;pointer-events:none}
.blog-v3-page .blog-v3-cloud{position:absolute;top:0;left:0;width:640px;height:520px;margin:-260px 0 0 -320px;z-index:1;pointer-events:none;opacity:0;filter:blur(30px);will-change:transform}
.blog-v3-page .blog-v3-scrollfab{position:fixed;right:28px;bottom:28px;z-index:80;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass-fill-strong);border:1px solid var(--glass-border);color:var(--text-strong);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));box-shadow:var(--shadow-glass-inset),var(--shadow-md);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-med) var(--ease-emphasis)}
.blog-v3-page .blog-v3-scrollfab:hover{border-color:var(--blue-40);transform:translateY(-3px);box-shadow:var(--shadow-glass-inset),var(--shadow-glow-blue)}
.blog-v3-page .blog-v3-scrollfab-icon{transition:transform var(--dur-med) var(--ease-emphasis);transform:rotate(0deg)}
/* shared post card */
.blog-v3-page .blog-v3-pinkdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff78d6;box-shadow:0 0 10px #ff78d6}
.blog-v3-page .blog-v3-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--glass-fill);border:1px solid var(--glass-border);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));box-shadow:var(--shadow-glass-inset),var(--shadow-md);color:inherit;transition:border-color var(--dur-med) var(--ease-standard),transform var(--dur-med) var(--ease-emphasis)}
.blog-v3-page .blog-v3-card:hover{border-color:var(--border-strong);transform:translateY(-2px);color:inherit}
.blog-v3-page .blog-v3-card:focus-visible{outline:2px solid var(--focus-ring,#5892fe);outline-offset:3px}
.blog-v3-page .blog-v3-card-media{position:relative;height:clamp(180px,16vw,230px);overflow:hidden}
.blog-v3-page .blog-v3-tone-deep{background:radial-gradient(70% 90% at 50% 60%, rgba(88,146,254,0.35) 0%, rgba(255,156,255,0.12) 48%, transparent 76%), linear-gradient(135deg,#0b1236 0%,#152159 55%,#2a1a5e 100%)}
.blog-v3-page .blog-v3-tone-bright{background:radial-gradient(70% 90% at 50% 55%, rgba(130,174,255,0.55) 0%, rgba(201,170,255,0.28) 50%, transparent 80%), linear-gradient(135deg,#3d5fd6 0%,#5b4bc4 50%,#8a5bc8 100%)}
.blog-v3-page .blog-v3-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-emphasis)}
.blog-v3-page .blog-v3-card:hover .blog-v3-card-media img{transform:scale(1.03)}
.blog-v3-page .blog-v3-card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.blog-v3-page .blog-v3-card-cat{font-size:10.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue-30)}
.blog-v3-page .blog-v3-card-title{margin:12px 0 0;font-size:1.18rem;font-weight:400;line-height:1.3;letter-spacing:-0.015em;color:var(--text-strong);text-wrap:balance}
.blog-v3-page .blog-v3-card-excerpt{margin:10px 0 0;flex:1;font-size:0.9rem;line-height:1.55;color:var(--text-muted);text-wrap:pretty}
.blog-v3-page .blog-v3-card-meta{margin-top:18px;font-size:12.5px;color:var(--text-faint)}
/* spacing before footer */
.blog-v3-page > *:last-child,.blog-v3-page .blog-v3-posts-grid{padding-bottom:120px}
@media (max-width:1024px){.blog-v3-page > *:last-child,.blog-v3-page .blog-v3-posts-grid{padding-bottom:80px}}
@media (max-width:767px){.blog-v3-page > *:last-child,.blog-v3-page .blog-v3-posts-grid{padding-bottom:60px}}
@media (prefers-reduced-motion:reduce){.blog-v3-page *{animation:none!important;transition:none!important}}