/* ══════════════════════════════════════════════
   ReadFlow — Science of Reading page
   All selectors scoped under .sor-wrapper
   ══════════════════════════════════════════════ */

:root {
  --accent:#6366f1;--accent-light:#818cf8;--accent-deep:#4f46e5;
  --warm:#f59e0b;--warm-light:#fbbf24;--green:#34d399;--red:#f87171;
  --text:#1e293b;--text-muted:#64748b;--text-light:#94a3b8;
  --surface:#f8fafc;--white:#ffffff;--border:#e2e8f0;--dark:#0a0e1a;
}

/* Animations */
.sor-wrapper .fi { opacity:0; transform:translateY(36px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1) }
.sor-wrapper .fi.v { opacity:1; transform:none }

/* Global resets inside wrapper */
.sor-wrapper { font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; color:var(--text) }
.sor-wrapper h1, .sor-wrapper h2, .sor-wrapper h3, .sor-wrapper h4 { text-transform:none; letter-spacing:-0.02em; margin:0; padding:0 }
.sor-wrapper p { margin:0; padding:0 }
.sor-wrapper a { text-decoration:none }
.sor-wrapper button { text-transform:none; letter-spacing:normal; cursor:pointer; font-family:'DM Sans',sans-serif }

/* ═══ HERO ═══ */
.sor-wrapper .sor-hero { background:var(--dark); padding:140px 24px 100px; position:relative; overflow:hidden; text-align:center }
.sor-wrapper .sor-hero::before { content:''; position:absolute; inset:0; opacity:.03; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.5) 1px,transparent 0); background-size:32px 32px }
.sor-wrapper .sor-hero-glow { position:absolute; top:-20%; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%); border-radius:50%; filter:blur(80px) }
.sor-wrapper .sor-hero-inner { max-width:800px; margin:0 auto; position:relative; z-index:2 }
.sor-wrapper .sor-hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.2); border-radius:100px; padding:6px 18px; margin-bottom:32px }
.sor-wrapper .sor-hero-badge span:first-child { width:6px; height:6px; border-radius:50%; background:var(--green) }
.sor-wrapper .sor-hero-badge span:last-child { color:var(--accent-light); font-size:13px; font-weight:600; letter-spacing:.02em }
.sor-wrapper .sor-hero h1 { font-size:52px; font-weight:800; color:#fff; line-height:1.15; letter-spacing:-.03em; margin-bottom:20px }
.sor-wrapper .sor-hero h1 em { font-style:normal; background:linear-gradient(135deg,var(--accent),var(--accent-light),#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.sor-wrapper .sor-hero-desc { font-size:18px; line-height:1.75; color:rgba(255,255,255,.5); max-width:620px; margin:0 auto 40px }
.sor-wrapper .sor-hero-stats { display:flex; justify-content:center; gap:48px; flex-wrap:wrap }
.sor-wrapper .sor-hero-stat { text-align:center }
.sor-wrapper .sor-hero-stat-num { font-size:32px; font-weight:800; color:var(--accent-light); letter-spacing:-.02em }
.sor-wrapper .sor-hero-stat-label { font-size:13px; color:rgba(255,255,255,.35); margin-top:4px }

/* ═══ INTRO QUOTE ═══ */
.sor-wrapper .sor-intro { padding:80px 24px; background:var(--surface); border-bottom:1px solid var(--border) }
.sor-wrapper .sor-intro-inner { max-width:800px; margin:0 auto; text-align:center }
.sor-wrapper .sor-intro-quote { font-size:24px; line-height:1.7; color:var(--text); font-weight:500; font-style:italic; position:relative; padding:0 40px }
.sor-wrapper .sor-intro-quote::before { content:'\201C'; position:absolute; top:-20px; left:0; font-size:80px; font-family:'DM Serif Display',serif; color:var(--accent); opacity:.12; line-height:1 }
.sor-wrapper .sor-intro-cite { display:block; margin-top:20px; font-size:14px; color:var(--text-muted); font-style:normal; font-weight:600 }

/* ═══ SHARED ═══ */
.sor-wrapper .sor-section { padding:100px 24px }
.sor-wrapper .sor-section.alt { background:var(--surface) }
.sor-wrapper .sor-section.dark { background:var(--dark); color:#fff }
.sor-wrapper .sor-inner { max-width:1100px; margin:0 auto }
.sor-wrapper .sor-eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:12px; display:block }
.sor-wrapper .sor-eyebrow.light { color:var(--accent-light) }
.sor-wrapper .sor-h2 { font-size:38px; font-weight:800; line-height:1.2; letter-spacing:-.02em; margin-bottom:16px; text-align:left; display:block }
.sor-wrapper .sor-h2.light { color:#fff }
.sor-wrapper .sor-subdesc { font-size:17px; line-height:1.7; color:var(--text-muted); max-width:640px; margin-bottom:48px }
.sor-wrapper .sor-subdesc.light { color:rgba(255,255,255,.5) }

/* ═══ THEORY CARDS ═══ */
.sor-wrapper .sor-theories { display:grid; grid-template-columns:repeat(2,1fr); gap:24px }
.sor-wrapper .sor-theory { border-radius:20px; padding:36px 32px; border:1px solid var(--border); background:var(--white); position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s }
.sor-wrapper .sor-theory:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.06) }
.sor-wrapper .sor-theory-num { position:absolute; top:20px; right:24px; font-size:72px; font-weight:900; opacity:.04; line-height:1; color:var(--accent) }
.sor-wrapper .sor-theory-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px }
.sor-wrapper .sor-theory h3 { font-size:20px; font-weight:800; color:var(--text); margin-bottom:4px }
.sor-wrapper .sor-theory-src { font-size:12px; color:var(--accent); font-weight:600; margin-bottom:12px; display:block }
.sor-wrapper .sor-theory p { font-size:15px; color:var(--text-muted); line-height:1.7; text-align:left }
.sor-wrapper .sor-theory-full { grid-column:1/3 }

/* ═══ TIMELINE ═══ */
.sor-wrapper .sor-timeline { position:relative; padding-left:48px }
.sor-wrapper .sor-timeline::before { content:''; position:absolute; top:0; bottom:0; left:19px; width:2px; background:linear-gradient(to bottom,var(--accent),var(--accent-light),#a78bfa,#7c3aed,#6d28d9,#5b21b6) }
.sor-wrapper .sor-tl-item { position:relative; margin-bottom:48px; padding-left:24px }
.sor-wrapper .sor-tl-item:last-child { margin-bottom:0 }
.sor-wrapper .sor-tl-dot { position:absolute; left:-48px; top:4px; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; z-index:2; box-shadow:0 4px 16px rgba(0,0,0,.1) }
.sor-wrapper .sor-tl-content { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:28px 28px 24px }
.sor-wrapper .sor-tl-content h3 { font-size:18px; font-weight:700; color:var(--text); margin-bottom:2px; text-align:left }
.sor-wrapper .sor-tl-content .sor-tl-sub { font-size:12px; font-weight:600; margin-bottom:10px; display:block }
.sor-wrapper .sor-tl-content p { font-size:14px; color:var(--text-muted); line-height:1.7; text-align:left }
.sor-wrapper .sor-tl-content .sor-tl-tag { display:inline-block; font-size:11px; font-weight:700; border-radius:6px; padding:3px 10px; margin-top:12px; letter-spacing:.03em }

/* ═══ ADAPTIVE FLOW ═══ */
.sor-wrapper .sor-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.sor-wrapper .sor-flow-card { background:rgba(255,255,255,.04); border-radius:18px; border:1px solid rgba(255,255,255,.06); padding:32px 24px; text-align:center; transition:all .3s }
.sor-wrapper .sor-flow-card:hover { background:rgba(255,255,255,.07) }
.sor-wrapper .sor-flow-icon { font-size:36px; margin-bottom:14px }
.sor-wrapper .sor-flow-card h3 { font-size:17px; font-weight:700; color:#fff; margin-bottom:8px }
.sor-wrapper .sor-flow-card p { font-size:14px; color:rgba(255,255,255,.5); line-height:1.65; text-align:center }

/* ═══ REFERENCES ═══ */
.sor-wrapper .sor-refs { display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.sor-wrapper .sor-ref { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:24px; display:flex; gap:16px; align-items:flex-start; transition:transform .3s }
.sor-wrapper .sor-ref:hover { transform:translateY(-2px) }
.sor-wrapper .sor-ref-icon { width:40px; height:40px; border-radius:10px; background:rgba(99,102,241,.06); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0 }
.sor-wrapper .sor-ref h4 { font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px; text-align:left }
.sor-wrapper .sor-ref p { font-size:13px; color:var(--text-muted); line-height:1.55; text-align:left }

/* ═══ CTA ═══ */
.sor-wrapper .sor-cta { background:var(--dark); padding:100px 24px; text-align:center; position:relative; overflow:hidden }
.sor-wrapper .sor-cta-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:700px; background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 60%); border-radius:50%; filter:blur(80px) }
.sor-wrapper .sor-cta-inner { max-width:650px; margin:0 auto; position:relative; z-index:2 }
.sor-wrapper .sor-cta h2 { font-size:38px; font-weight:800; color:#fff; margin-bottom:16px; letter-spacing:-.02em; line-height:1.25; text-align:center }
.sor-wrapper .sor-cta p { font-size:17px; color:rgba(255,255,255,.5); line-height:1.7; margin-bottom:36px; text-align:center }
.sor-wrapper .sor-cta-btn { background:linear-gradient(135deg,var(--accent),#7c3aed); color:#fff; border:none; padding:18px 40px; border-radius:14px; font-size:17px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; box-shadow:0 8px 40px rgba(99,102,241,.35); transition:all .3s; display:inline-block; text-decoration:none }
.sor-wrapper .sor-cta-btn:hover { transform:translateY(-2px); box-shadow:0 16px 48px rgba(99,102,241,.5); color:#fff }

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px) {
  .sor-wrapper .sor-hero h1 { font-size:34px }
  .sor-wrapper .sor-theories, .sor-wrapper .sor-refs, .sor-wrapper .sor-flow { grid-template-columns:1fr }
  .sor-wrapper .sor-theory-full { grid-column:1/2 }
  .sor-wrapper .sor-h2 { font-size:30px }
  .sor-wrapper .sor-hero-stats { gap:24px }
  .sor-wrapper .sor-intro-quote { font-size:19px; padding:0 16px }
  .sor-wrapper .sor-timeline { padding-left:40px }
  .sor-wrapper .sor-tl-dot { left:-40px; width:34px; height:34px; font-size:12px }
}
@media(min-width:600px) and (max-width:900px) {
  .sor-wrapper .sor-theories, .sor-wrapper .sor-flow { grid-template-columns:repeat(2,1fr) }
}