@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --bg: #f7f5ff;
  --bg2: #ede9ff;
  --bg3: #ffffff;
  --purple: #7c5cbf;
  --purple-dark: #5a3d9a;
  --purple-light: #c4b5f4;
  --purple-pale: #ede9ff;
  --accent: #a78bfa;
  --accent2: #e879f9;
  --text: #1e1333;
  --text2: #5b4d7a;
  --text3: #9b8cb8;
  --border: #ddd6fe;
  --white: #ffffff;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', sans-serif;
  --shadow: 0 4px 32px rgba(124,92,191,0.10);
  --shadow2: 0 2px 12px rgba(124,92,191,0.08);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); font-weight:300; overflow-x:hidden; line-height:1.7; }

/* ── NAV ── */
nav {
  position:fixed; top:0; width:100%; z-index:200;
  background:rgba(247,245,255,0.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  height:70px;
  transition:box-shadow .3s;
}
nav.scrolled { box-shadow:var(--shadow); }
.nav-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.nav-logo-mark {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple) 0%,var(--accent) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--serif); font-size:1rem; font-style:italic; font-weight:400;
  flex-shrink:0;
}
.nav-logo-text { display:flex; flex-direction:column; line-height:1.2; }
.nav-logo-text strong { font-family:var(--serif); font-size:.9rem; font-weight:600; color:var(--text); }
.nav-logo-text span { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); font-weight:400; }
.nav-links { display:flex; align-items:center; gap:.2rem; }
.nav-links a {
  padding:.45rem .9rem; color:var(--text2); text-decoration:none;
  font-size:.82rem; font-weight:400; letter-spacing:.02em;
  border-radius:6px; transition:all .2s;
}
.nav-links a:hover, .nav-links a.active { background:var(--purple-pale); color:var(--purple); }
.nav-cta {
  padding:.5rem 1.4rem; background:var(--purple); color:#fff !important;
  border-radius:50px !important; font-weight:500 !important;
  transition:background .2s !important;
}
.nav-cta:hover { background:var(--purple-dark) !important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--text); border-radius:2px; transition:.3s; }
.mobile-nav {
  display:none; position:fixed; top:70px; left:0; width:100%; z-index:199;
  background:var(--white); border-bottom:1px solid var(--border);
  flex-direction:column; padding:1rem 5%;
}
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:.8rem 0; color:var(--text2); text-decoration:none; font-size:.95rem; border-bottom:1px solid var(--border); }
.mobile-nav a:last-child { border-bottom:none; }

/* ── PAGE HEADER (inner pages) ── */
.page-header {
  background:linear-gradient(135deg, #f0ebff 0%, #faf5ff 50%, #e8e0ff 100%);
  padding:8rem 5% 4rem;
  text-align:center;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-header::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(167,139,250,.15) 0%, transparent 70%);
  pointer-events:none;
}
.page-header::after {
  content:''; position:absolute; bottom:-40px; left:-40px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,121,249,.1) 0%, transparent 70%);
  pointer-events:none;
}
.page-header .breadcrumb { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--purple); margin-bottom:.8rem; }
.page-header h1 { font-family:var(--serif); font-size:clamp(2rem,5vw,3.6rem); font-weight:400; color:var(--text); line-height:1.2; margin-bottom:1rem; }
.page-header h1 em { color:var(--purple); font-style:italic; }
.page-header p { font-size:1.05rem; color:var(--text2); max-width:580px; margin:0 auto; line-height:1.8; }

/* ── GENERAL LAYOUT ── */
.container { max-width:1140px; margin:0 auto; padding:0 5%; }
section { padding:5.5rem 5%; }
.section-label { font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--purple); margin-bottom:.6rem; font-weight:500; }
h2 { font-family:var(--serif); font-size:clamp(1.7rem,3.5vw,2.8rem); font-weight:400; line-height:1.25; margin-bottom:1rem; color:var(--text); }
h2 em { font-style:italic; color:var(--purple); }
.lead { font-size:1rem; color:var(--text2); line-height:1.85; max-width:600px; }
.divider { width:44px; height:2px; background:var(--accent); border-radius:2px; margin:1.2rem 0 2rem; }

/* ── BUTTONS ── */
.btn { display:inline-block; text-decoration:none; font-family:var(--sans); font-weight:500; letter-spacing:.04em; cursor:pointer; transition:all .25s; border:none; }
.btn-purple { padding:.75rem 2rem; background:var(--purple); color:#fff; border-radius:50px; font-size:.85rem; }
.btn-purple:hover { background:var(--purple-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,92,191,.3); }
.btn-outline { padding:.7rem 1.8rem; background:transparent; color:var(--purple); border:1.5px solid var(--purple); border-radius:50px; font-size:.85rem; }
.btn-outline:hover { background:var(--purple); color:#fff; }

/* ── CARDS ── */
.card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:2rem; box-shadow:var(--shadow2); transition:all .3s; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--purple-light); }
.card-num { font-family:var(--serif); font-size:2.2rem; color:var(--purple-light); font-weight:400; line-height:1; margin-bottom:.6rem; }
.card h3 { font-family:var(--serif); font-size:1.2rem; font-weight:600; margin-bottom:.7rem; color:var(--text); }
.card p { font-size:.88rem; color:var(--text2); line-height:1.75; }
.card-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.tag { font-size:.68rem; padding:.3rem .75rem; background:var(--purple-pale); color:var(--purple); border-radius:50px; font-weight:500; letter-spacing:.04em; }

/* ── GRID HELPERS ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }

/* ── PILL LIST ── */
.pill-list { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.pill { padding:.38rem 1rem; background:var(--bg2); color:var(--text2); border-radius:50px; font-size:.78rem; font-weight:400; border:1px solid var(--border); }

/* ── HIGHLIGHT BOX ── */
.highlight-box { background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%); color:#fff; border-radius:20px; padding:3rem; }
.highlight-box h3 { font-family:var(--serif); font-size:1.6rem; font-weight:400; margin-bottom:1rem; }
.highlight-box p { opacity:.85; line-height:1.8; font-size:.95rem; }

/* ── QUOTE ── */
.blockquote { border-left:3px solid var(--accent); padding:1.5rem 2rem; background:var(--purple-pale); border-radius:0 12px 12px 0; margin:2rem 0; }
.blockquote p { font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--text); line-height:1.7; }
.blockquote cite { display:block; margin-top:.8rem; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--purple); font-style:normal; }

/* ── CTA BANNER ── */
.cta-banner { background:linear-gradient(135deg,var(--purple) 0%,#9c5ce6 50%,var(--purple-dark) 100%); color:#fff; border-radius:24px; padding:4rem 3rem; text-align:center; margin:4rem 0; }
.cta-banner h2 { color:#fff; margin-bottom:.8rem; }
.cta-banner p { opacity:.85; max-width:500px; margin:0 auto 2rem; }
.btn-white { background:#fff; color:var(--purple); padding:.75rem 2rem; border-radius:50px; font-size:.85rem; font-weight:500; text-decoration:none; display:inline-block; transition:all .25s; }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.btn-white-outline { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); padding:.7rem 1.8rem; border-radius:50px; font-size:.85rem; font-weight:400; text-decoration:none; display:inline-block; transition:all .25s; margin-left:1rem; }
.btn-white-outline:hover { border-color:#fff; background:rgba(255,255,255,.1); }

/* ── FOOTER ── */
footer { background:var(--text); color:rgba(255,255,255,.7); }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; padding:4rem 5%; }
.footer-brand strong { font-family:var(--serif); font-size:1.1rem; color:#fff; display:block; margin-bottom:.4rem; }
.footer-brand em { font-style:italic; font-size:.82rem; color:var(--purple-light); display:block; margin-bottom:1rem; }
.footer-brand p { font-size:.82rem; line-height:1.75; }
.footer-col h4 { font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--purple-light); margin-bottom:1.2rem; font-weight:500; }
.footer-col a { display:block; font-size:.85rem; color:rgba(255,255,255,.6); text-decoration:none; margin-bottom:.6rem; transition:color .2s; }
.footer-col a:hover { color:#fff; }
.footer-col p { font-size:.85rem; margin-bottom:.5rem; line-height:1.6; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 5%; display:flex; justify-content:space-between; align-items:center; font-size:.78rem; flex-wrap:wrap; gap:.5rem; }
.footer-bottom a { color:rgba(255,255,255,.5); text-decoration:none; }
.social-links { display:flex; gap:.8rem; }
.social-links a { width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:.75rem; color:rgba(255,255,255,.6); text-decoration:none; transition:all .2s; }
.social-links a:hover { border-color:var(--purple-light); color:var(--purple-light); }

/* ── ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  nav { padding:0 4%; }
  section { padding:4rem 4%; }
  .page-header { padding:7rem 4% 3rem; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .footer-top { grid-template-columns:1fr; gap:2rem; }
  .cta-banner { padding:3rem 1.8rem; }
  .btn-white-outline { margin-left:0; margin-top:.8rem; }
  .highlight-box { padding:2rem; }
}