/* ---------- Fonts (same vendored files the app itself uses) ---------- */
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url('vendor/fonts/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('vendor/fonts/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('vendor/fonts/fraunces-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap; src:url('vendor/fonts/lora-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Lora'; font-style:italic; font-weight:400; font-display:swap; src:url('vendor/fonts/lora-latin-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Lora'; font-style:normal; font-weight:500; font-display:swap; src:url('vendor/fonts/lora-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('vendor/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('vendor/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('vendor/fonts/inter-latin-600-normal.woff2') format('woff2'); }

:root{
  /* Minimalist light theme with magical purple/indigo accents */
  --ink-900:#ffffff;       /* Clean white background */
  --ink-800:#f8fafc;       /* Soft gray for cards */
  --ink-700:#e2e8f0;       /* Light borders */
  --ink-600:#cbd5e1;       /* Muted lines */
  --brass:#8b5cf6;         /* Magic Purple Accent */
  --brass-bright:#a855f7;  /* Brighter Magic Accent */
  --cream:#1e293b;         /* Dark Slate for crisp text */
  --cream-soft:#64748b;    /* Lighter slate for subtitles */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Lora', Georgia, serif;
  --font-ui:'Inter', -apple-system, sans-serif;
  --radius:16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body {
  margin: 0; 
  background-color: #fafafa;
  /* 3-Color Magical Marbled Background: Indigo, Purple, and Teal */
  background-image: 
    radial-gradient(at 0% 0%, rgba(168, 85, 247, 0.07) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.07) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(20, 184, 166, 0.07) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(168, 85, 247, 0.07) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(99, 102, 241, 0.05) 0px, transparent 60%);
  background-attachment: fixed;
  background-size: cover;
  
  color: var(--cream);
  font-family: var(--font-body); 
  line-height: 1.7; 
  font-size: 16px;
}
h1,h2,h3{ font-family:var(--font-display); color:var(--cream); margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
section{ padding:100px 24px; max-width:1080px; margin:0 auto; }

.eyebrow{
  font-family:var(--font-ui); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brass); margin:0 0 12px; font-weight:600;
}
.eyebrow.center{ text-align:center; }
.section-title{ font-size:clamp(28px,4vw,40px); font-weight:600; margin-bottom:16px; }
.section-sub{ font-family:var(--font-ui); color:var(--cream-soft); font-size:15px; max-width:560px; margin:0 auto 48px; text-align:center; }
section > .section-title{ text-align:center; }

.btn{
  display:inline-block; font-family:var(--font-ui); font-weight:600; font-size:14.5px;
  padding:13px 24px; border-radius:999px; text-decoration:none; transition:all .2s ease;
  border:1px solid transparent;
}
.btn:hover{ transform:translateY(-2px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2); }
.btn-brass{ background:var(--brass); color:#ffffff; background-image: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); }
.btn-brass:hover{ opacity: 0.9; }
.btn-ghost{ background:transparent; border-color:var(--ink-600); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }

/* ---------- Nav ---------- */
.nav{
  display:flex; align-items:center; gap:32px; padding:20px 32px;
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ink-700);
}
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:18px; }
.nav-brand img{ width:28px; height:28px; border-radius:7px; }
.nav-links{ display:flex; gap:26px; margin-left:auto; font-family:var(--font-ui); font-size:14px; font-weight:500;}
.nav-links a{ text-decoration:none; color:var(--cream-soft); transition:color .15s; }
.nav-links a:hover{ color:var(--brass); }
.nav-cta{
  font-family:var(--font-ui); font-weight:600; font-size:13.5px; text-decoration:none;
  color:#ffffff; background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); padding:9px 18px; border-radius:999px;
}
@media (max-width:760px){ .nav-links{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  display:flex; align-items:center; gap:60px; padding-top:80px; padding-bottom:80px;
  max-width:1160px;
}
.hero-copy{ flex:1.1; min-width:320px; }
.hero-copy h1{ font-size:clamp(38px,5.5vw,58px); font-weight:600; line-height:1.08; margin-bottom:22px; }
.hero-sub{ font-size:17px; color:var(--cream-soft); max-width:480px; margin-bottom:32px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.hero-note{ font-family:var(--font-ui); font-size:12.5px; color:var(--cream-soft); opacity:.7; }

/* ---------- Hero Art (Glassy Magic Tabs) ---------- */
.hero-art{ flex:1; min-width:280px; display:flex; justify-content:center; }
.tab-stack{ position:relative; width:280px; height:320px; }
.tab-card{
  position:absolute; width:240px; padding:22px 20px; border-radius:14px;
  background:rgba(255, 255, 255, 0.7); backdrop-filter:blur(10px); 
  border:1px solid rgba(139, 92, 246, 0.15);
  box-shadow:0 15px 35px rgba(99, 102, 241, 0.08);
}
.tab-card-1{ top:100px; left:20px; z-index:3; }
.tab-card-2{ top:50px; left:0; z-index:2; transform:rotate(-6deg); opacity:.9; }
.tab-card-3{ top:0; left:40px; z-index:1; transform:rotate(5deg); opacity:.75; }
.tab-card-label{ font-family:var(--font-display); font-weight:600; color:var(--brass); font-size:15px; display:block; margin-bottom:14px; }
.tab-card-lines span{ display:block; height:8px; background:var(--ink-700); border-radius:4px; margin-bottom:8px; }
.tab-card-lines span:nth-child(2){ width:85%; }
.tab-card-lines span:nth-child(3){ width:70%; }
.tab-card-lines span.short{ width:45%; }
@media (max-width:900px){ .hero{ flex-direction:column; text-align:center; } .hero-sub{ margin-left:auto; margin-right:auto; } .hero-ctas{ justify-content:center; } }

/* ---------- Features ---------- */
.feature-groups{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:32px; margin-top:56px; }
.feature-group h3{ font-size:19px; color:var(--brass); margin-bottom:16px; }
.feature-group ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.feature-group li{ font-size:14.5px; color:var(--cream-soft); line-height:1.6; }
.feature-group strong{ color:var(--cream); }
.pro-chip{
  display:inline-block; font-family:var(--font-ui); font-size:9.5px; font-weight:700; letter-spacing:.06em;
  color:var(--ink-900); background:var(--brass-bright); padding:1px 7px; border-radius:999px; margin-left:6px; vertical-align:middle;
}

/* ---------- Pricing ---------- */
.pricing-cards{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.price-card{
  flex:1; min-width:280px; max-width:340px; background:var(--ink-900); border:1px solid var(--ink-700);
  border-radius:var(--radius); padding:36px 32px; position:relative; box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.price-card-featured{ border-color:rgba(139, 92, 246, 0.4); box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1); }
.price-card-badge{
  font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:var(--brass); display:inline-block; padding:4px 12px; border-radius:999px; margin-bottom:16px;
}
.price-card h3{ font-size:20px; margin-bottom:6px; }
.price-tag{ font-family:var(--font-display); font-size:38px; font-weight:600; margin:0 0 24px; color:var(--brass);}
.price-tag span{ font-family:var(--font-ui); font-size:13px; font-weight:400; color:var(--cream-soft); }
.price-card ul{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:11px; }
.price-card li{ font-size:14px; color:var(--cream-soft); padding-left:20px; position:relative; }
.price-card li::before{ content:'✓'; position:absolute; left:0; color:var(--brass); font-weight:700; }
.price-card .btn{ display:block; text-align:center; }

/* ---------- Download & About ---------- */
.download-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px; margin-top:16px; }
.download-card{ background:var(--ink-900); border:1px solid var(--ink-700); border-radius:var(--radius); padding:32px 26px; text-align:center; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}
.download-icon{ font-size:34px; margin-bottom:14px; }
.download-card h3{ font-size:18px; margin-bottom:8px; }
.download-card p{ font-size:13.5px; color:var(--cream-soft); margin-bottom:22px; min-height:56px; }
.about{ text-align:center; }
.about-inner{ max-width:640px; margin:0 auto; }
.about-icon{ width:56px; height:56px; border-radius:14px; margin:0 auto 20px; }
.about p{ color:var(--cream-soft); font-size:15.5px; }
.about-name-note{ font-size:14px !important; opacity:.8; margin-bottom:24px !important; }
.about-closer{ font-weight:600; color:var(--cream) !important; margin-top:28px; }

/* ---------- Problem section ---------- */
.problem{ text-align:center; }
.problem-lines{
  font-family:var(--font-body); font-size:17px; color:var(--cream-soft);
  max-width:520px; margin:0 auto 36px; line-height:1.9;
}
.problem-tagline{
  font-family:var(--font-display); font-size:19px; font-weight:600;
  color:var(--brass); margin-top:28px;
}

/* ---------- Series promo section ---------- */
.series-promo{
  text-align:center; background:var(--ink-800); border-radius:32px;
  border:1px solid var(--ink-700);
}

/* ---------- Pricing card copy refinements ---------- */
.price-tag-term{
  display:block; font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cream-soft); margin-top:2px;
}
.price-card-tagline{ font-size:14px; color:var(--cream-soft); margin:-14px 0 22px; }
.price-card-note{ font-size:12px; color:var(--cream-soft); opacity:.75; margin:-6px 0 22px; }

/* ---------- Examples grid ---------- */
.examples-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:22px; margin-top:48px; }
.example-card{
  background:var(--ink-800); border:1px solid var(--ink-700); border-radius:var(--radius);
  padding:26px 24px;
}
.example-card h3{ font-size:16.5px; margin-bottom:8px; color:var(--brass); }
.example-card p{ font-size:14px; color:var(--cream-soft); margin:0; }

/* ---------- Footer & Modals ---------- */
.site-footer{ border-top:1px solid var(--ink-700); padding:48px 24px; background:var(--ink-800);}
.footer-inner{ max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:24px; justify-content:space-between; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; }
.footer-brand img{ width:24px; height:24px; border-radius:6px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:22px; font-family:var(--font-ui); font-size:13px; font-weight:500;}
.footer-links button{ text-decoration:none; color:var(--cream-soft); background:none; border:none; padding:0; font:inherit; cursor:pointer; transition:color .15s;}
.footer-links button:hover{ color:var(--brass); }
.footer-links a{ text-decoration:none; color:var(--cream-soft); transition:color .15s;}
.footer-links a:hover{ color:var(--brass); }
.footer-meta{ font-family:var(--font-ui); font-size:12.5px; color:var(--cream-soft); opacity:.7; width:100%; text-align:center; margin-top:8px; }

/* Modal Styles */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(30, 41, 59, 0.4); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
.modal-content { background: #ffffff; width: 100%; max-width: 650px; max-height: 85vh; overflow-y: auto; border-radius: 20px; padding: 40px; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.1); color: var(--cream); font-family: var(--font-body); }
.modal-content h1, .modal-content h2 { margin-top: 1.5em; margin-bottom: 0.5em; font-family: var(--font-display); color: var(--cream); }
.modal-content p, .modal-content ul { color: var(--cream-soft); font-size: 15px; margin-bottom: 1em; }
.modal-close { position: absolute; top: 20px; right: 20px; background: var(--ink-800); border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 20px; color: var(--cream-soft); display:flex; align-items:center; justify-content:center; transition: background 0.2s;}
.modal-close:hover { background: var(--ink-700); color: var(--cream); }