/* ═══════════════════════════════════════════════════════════════════
   Ideofuzion — Landing & Blog page stylesheet
   Self-contained design system for static SEO pages (no React).
   Mirrors the main site's tokens: Inter / Space Grotesk / Orbitron,
   #FF6600 orange, #2563EB blue, #080C18 dark, #1E293B navy.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (same files the SPA uses) ──────────────────── */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Orbitron'; font-style:normal; font-weight:400 900; font-display:swap; src:url('/assets/fonts/orbitron-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Design tokens ────────────────────────────────────────────────── */
:root {
  --orange:#FF6600; --blue:#2563EB; --dark:#080C18; --navy:#1E293B;
  --bg:#F8FAFC; --muted:#64748B; --border:#E2E8F0; --white:#fff;
  --ink:#0F172B; --maxw:1180px;
}

/* ── Reset ────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--white); color:var(--navy); line-height:1.6; overflow-x:hidden; }
img,svg { display:block; max-width:100%; }
a { color:inherit; }

/* ── Header ───────────────────────────────────────────────────────── */
.lp-header {
  position:sticky; top:0; z-index:100; height:72px;
  background:rgba(248,250,252,0.92); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:24px; padding:0 48px;
}
.lp-header__logo { display:flex; align-items:center; flex-shrink:0; }
.lp-header__logo img { height:38px; width:auto; }
.lp-nav { display:flex; gap:22px; margin:0 auto; }
.lp-nav a { font-weight:500; font-size:14px; color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .2s; }
.lp-nav a:hover { color:var(--orange); }
.lp-header__cta {
  background:var(--navy); color:var(--white); border-radius:24px;
  padding:11px 22px; font-weight:600; font-size:15px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  transition:filter .2s, transform .15s;
}
.lp-header__cta:hover { filter:brightness(1.12); transform:translateY(-2px); }

/* ── Hero ─────────────────────────────────────────────────────────── */
.lp-hero {
  position:relative; overflow:hidden; background:var(--dark); color:var(--white);
  padding:96px 48px 88px;
}
.lp-hero::before { content:''; position:absolute; inset:0; background:
  radial-gradient(ellipse 70% 60% at 15% 30%, rgba(37,99,235,0.22) 0%, transparent 60%),
  radial-gradient(ellipse 60% 60% at 90% 80%, rgba(255,102,0,0.14) 0%, transparent 60%); pointer-events:none; }
.lp-hero::after { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size:38px 38px; pointer-events:none; }
.lp-hero__inner { position:relative; max-width:var(--maxw); margin:0 auto; }
.lp-eyebrow { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; letter-spacing:2.2px; color:var(--orange); text-transform:uppercase; margin-bottom:16px; }
.lp-hero h1 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(32px,5vw,56px); line-height:1.08; letter-spacing:-1.5px; max-width:920px; margin-bottom:22px; }
.lp-hero h1 .grad { background-image:linear-gradient(90deg,#fff 0%, #FF8534 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lp-hero__sub { font-size:clamp(16px,2vw,19px); line-height:1.7; color:rgba(255,255,255,0.62); max-width:680px; margin-bottom:32px; }
.lp-hero__cta { display:flex; flex-wrap:wrap; gap:14px; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:9px; border-radius:999px; font-weight:600; font-size:16px; text-decoration:none; padding:14px 30px; transition:filter .2s, transform .15s, background .2s, border-color .2s; cursor:pointer; line-height:1; }
.btn-orange { background:var(--orange); color:var(--white); box-shadow:0 8px 24px rgba(255,102,0,0.28); }
.btn-orange:hover { filter:brightness(1.1); transform:translateY(-2px); }
.btn-ghost { background:rgba(255,255,255,0.06); color:var(--white); border:1px solid rgba(255,255,255,0.16); }
.btn-ghost:hover { background:rgba(255,255,255,0.12); transform:translateY(-2px); }
.btn-navy { background:var(--navy); color:var(--white); }
.btn-navy:hover { filter:brightness(1.15); transform:translateY(-2px); }

/* ── Hero stats row ───────────────────────────────────────────────── */
.lp-stats { display:flex; flex-wrap:wrap; gap:36px; margin-top:44px; padding-top:32px; border-top:1px solid rgba(255,255,255,0.1); }
.lp-stats__item .num { font-family:'Orbitron',monospace; font-weight:700; font-size:30px; color:var(--orange); line-height:1; }
.lp-stats__item:nth-child(even) .num { color:#60A5FA; }
.lp-stats__item .lbl { font-size:13px; color:rgba(255,255,255,0.45); margin-top:6px; }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.lp-crumb { background:var(--bg); border-bottom:1px solid var(--border); }
.lp-crumb ol { max-width:var(--maxw); margin:0 auto; padding:14px 48px; list-style:none; display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); }
.lp-crumb a { color:var(--muted); text-decoration:none; }
.lp-crumb a:hover { color:var(--orange); }
.lp-crumb li[aria-current] { color:var(--navy); font-weight:600; }
.lp-crumb li:not(:last-child)::after { content:'›'; margin-left:8px; opacity:.5; }

/* ── Section shell ────────────────────────────────────────────────── */
.lp-section { padding:80px 48px; }
.lp-section--bg { background:var(--bg); }
.lp-section--dark { background:var(--dark); color:var(--white); }
.lp-section__inner { max-width:var(--maxw); margin:0 auto; }
.lp-section__inner--narrow { max-width:820px; }
.lp-label { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; letter-spacing:2.2px; color:var(--muted); text-transform:uppercase; margin-bottom:14px; }
.lp-section--dark .lp-label { color:var(--orange); }
.lp-h2 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(26px,3.6vw,40px); line-height:1.15; letter-spacing:-1px; color:var(--ink); margin-bottom:20px; }
.lp-section--dark .lp-h2 { color:var(--white); }
.lp-h3 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px; line-height:1.3; color:var(--ink); margin:32px 0 10px; }

/* ── Prose (article / body copy) ──────────────────────────────────── */
.prose { font-size:17px; line-height:1.78; color:#334155; }
.prose > p { margin-bottom:20px; }
.prose h2 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(24px,3vw,32px); line-height:1.2; letter-spacing:-0.5px; color:var(--ink); margin:44px 0 16px; }
.prose h3 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px; color:var(--ink); margin:32px 0 10px; }
.prose ul, .prose ol { margin:0 0 22px 22px; }
.prose li { margin-bottom:10px; }
.prose a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover { color:var(--orange); }
.prose strong { color:var(--ink); font-weight:700; }
.prose blockquote { border-left:3px solid var(--orange); padding:6px 0 6px 22px; margin:24px 0; color:var(--navy); font-style:italic; }

/* ── Card grid ────────────────────────────────────────────────────── */
.lp-grid { display:grid; gap:18px; }
.lp-grid--2 { grid-template-columns:repeat(2,1fr); }
.lp-grid--3 { grid-template-columns:repeat(3,1fr); }
.lp-card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:28px 24px; transition:border-color .25s, box-shadow .25s, transform .25s; }
.lp-card:hover { border-color:rgba(255,102,0,0.4); box-shadow:0 18px 44px -28px rgba(15,23,42,0.25); transform:translateY(-4px); }
.lp-card__icon { width:44px; height:44px; border-radius:12px; background:rgba(255,102,0,0.1); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.lp-card__icon svg { width:22px; height:22px; }
.lp-card h3 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:var(--ink); margin-bottom:8px; }
.lp-card p { font-size:14px; color:var(--muted); line-height:1.65; }
.lp-section--dark .lp-card { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.09); }
.lp-section--dark .lp-card h3 { color:var(--white); }
.lp-section--dark .lp-card p { color:rgba(255,255,255,0.55); }

/* ── Checklist ────────────────────────────────────────────────────── */
.lp-checks { list-style:none; display:grid; gap:14px; }
.lp-checks li { display:flex; gap:12px; align-items:flex-start; font-size:16px; color:#334155; line-height:1.6; }
.lp-checks svg { flex-shrink:0; margin-top:3px; }

/* ── FAQ (CSS-only accordion) ─────────────────────────────────────── */
.lp-faq { display:grid; gap:12px; }
.lp-faq details { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:0 22px; overflow:hidden; }
.lp-faq summary { list-style:none; cursor:pointer; padding:20px 0; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:'+'; font-size:24px; font-weight:400; color:var(--orange); transition:transform .2s; }
.lp-faq details[open] summary::after { transform:rotate(45deg); }
.lp-faq details > p { padding:0 0 22px; font-size:15px; line-height:1.7; color:var(--muted); }

/* ── CTA band ─────────────────────────────────────────────────────── */
.lp-cta { position:relative; overflow:hidden; background:var(--dark); color:var(--white); padding:72px 48px; text-align:center; }
.lp-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,102,0,0.16) 0%, transparent 60%); pointer-events:none; }
.lp-cta__inner { position:relative; max-width:720px; margin:0 auto; }
.lp-cta h2 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(26px,3.6vw,38px); line-height:1.15; letter-spacing:-1px; margin-bottom:16px; }
.lp-cta p { font-size:17px; color:rgba(255,255,255,0.6); margin-bottom:30px; }

/* ── Internal-link cross-sell strip ───────────────────────────────── */
.lp-related { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.lp-related a { display:block; background:var(--white); border:1px solid var(--border); border-radius:14px; padding:22px; text-decoration:none; transition:border-color .25s, transform .25s; }
.lp-related a:hover { border-color:rgba(255,102,0,0.45); transform:translateY(-3px); }
.lp-related .k { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--ink); margin-bottom:6px; }
.lp-related .d { font-size:13px; color:var(--muted); }

/* ── Footer ───────────────────────────────────────────────────────── */
.lp-footer { background:var(--white); border-top:1px solid var(--border); padding:64px 48px 32px; }
.lp-footer__inner { max-width:var(--maxw); margin:0 auto; }
.lp-footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.lp-footer h4 { font-weight:700; font-size:15px; color:var(--navy); margin-bottom:16px; }
.lp-footer__col a { display:block; font-size:13px; color:var(--muted); text-decoration:none; margin-bottom:10px; transition:color .2s; }
.lp-footer__col a:hover { color:var(--orange); }
.lp-footer__tag { font-weight:700; font-size:14px; color:var(--navy); margin:16px 0 6px; }
.lp-footer__desc { font-size:13px; color:var(--muted); line-height:1.7; max-width:300px; }
.lp-footer__bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); }
.lp-footer__bottom .links { display:flex; gap:22px; }
.lp-footer__bottom a { color:var(--muted); text-decoration:none; }

/* ── Blog listing ─────────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border); border-radius:16px; overflow:hidden; text-decoration:none; transition:border-color .25s, box-shadow .25s, transform .25s; }
.blog-card:hover { border-color:rgba(255,102,0,0.4); box-shadow:0 18px 44px -28px rgba(15,23,42,0.22); transform:translateY(-5px); }
.blog-card__img { aspect-ratio:16/9; background:linear-gradient(135deg,#0D1425,#1a2340); overflow:hidden; }
.blog-card__img img { width:100%; height:100%; object-fit:cover; }
.blog-card__body { padding:22px; display:flex; flex-direction:column; flex-grow:1; }
.blog-card__tag { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; color:var(--orange); letter-spacing:.5px; margin-bottom:8px; }
.blog-card__body h3 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:var(--ink); line-height:1.35; margin-bottom:10px; }
.blog-card__body p { font-size:14px; color:var(--muted); line-height:1.6; flex-grow:1; }
.blog-card__meta { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }

/* ── Article header ───────────────────────────────────────────────── */
.article-head { background:var(--dark); color:var(--white); padding:80px 48px 64px; position:relative; overflow:hidden; }
.article-head::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 70% at 80% 20%, rgba(37,99,235,0.2) 0%, transparent 60%); pointer-events:none; }
.article-head__inner { position:relative; max-width:820px; margin:0 auto; }
.article-head h1 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,4.2vw,46px); line-height:1.12; letter-spacing:-1px; margin:16px 0 20px; }
.article-head__meta { display:flex; flex-wrap:wrap; gap:18px; font-size:14px; color:rgba(255,255,255,0.55); }
.article-body { max-width:820px; margin:0 auto; padding:64px 48px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:1023px) {
  .lp-grid--3, .blog-grid, .lp-related { grid-template-columns:repeat(2,1fr); }
  .lp-footer__grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:767px) {
  .lp-header { padding:0 20px; gap:12px; }
  .lp-nav { display:none; }
  .lp-hero, .lp-section, .lp-cta, .article-head, .article-body { padding-left:20px; padding-right:20px; }
  .lp-hero { padding-top:64px; padding-bottom:56px; }
  .lp-section { padding-top:56px; padding-bottom:56px; }
  .lp-grid--2, .lp-grid--3, .blog-grid, .lp-related { grid-template-columns:1fr; }
  .lp-crumb ol { padding:12px 20px; }
  .lp-footer { padding:48px 20px 28px; }
  .lp-footer__grid { grid-template-columns:1fr 1fr; gap:24px; }
  .lp-stats { gap:24px; }
  .lp-footer__bottom { flex-direction:column; align-items:flex-start; }
}
@media (max-width:460px) {
  .lp-footer__grid { grid-template-columns:1fr; }
}