:root { --ink:#27213d; --purple:#6f5aa7; --lavender:#ece7f7; --cream:#fffdf9; --gold:#d3a861; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:Poppins,"Noto Sans Devanagari",sans-serif; }
.hero { min-height:100vh; position:relative; isolation:isolate; overflow:hidden; padding:0 8vw; color:#fff; background:radial-gradient(circle at 74% 25%,#8e79bd 0%,#65528f 23%,transparent 46%),radial-gradient(circle at 12% 90%,#3e375e 0%,transparent 42%),linear-gradient(135deg,#201b39,#43335f 55%,#282043); }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.34; background-image:linear-gradient(120deg,transparent 48%,rgba(255,255,255,.1) 49%,transparent 50%); background-size:110px 110px; }
nav { height:88px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }.logo { color:#fff; font-family:"Playfair Display",serif; font-size:1.65rem; text-decoration:none; letter-spacing:.05em; }.logo span,footer span { color:#e8bc70; }
.nav-links { display:flex; gap:2rem; }.nav-links a { color:#eeeaf8; font-size:.88rem; text-decoration:none; }.nav-links a:hover { color:#fff; }.menu-button { display:none; border:0; background:transparent; color:#fff; font-size:1.5rem; }
.hero-content { max-width:690px; min-height:calc(100vh - 88px); display:flex; flex-direction:column; justify-content:center; padding-bottom:6rem; }.eyebrow { font-size:.72rem; letter-spacing:.16em; font-weight:600; color:var(--gold); margin:0 0 1.1rem; }.hero h1,.section-heading h2,.chapters h2,.about h2 { font-family:"Playfair Display","Noto Sans Devanagari",serif; font-size:clamp(3.3rem,7.6vw,6.8rem); font-weight:500; line-height:1.04; letter-spacing:-.04em; margin:0; }.hero h1 em,h2 em { color:#f0cd8d; font-weight:500; }.hero-text { max-width:500px; font-size:1rem; line-height:1.85; color:#e6e1f2; margin:1.55rem 0 2.25rem; }
.explore-button { align-self:flex-start; display:inline-flex; gap:1rem; align-items:center; color:#fff; text-decoration:none; padding:1rem 1.35rem; border:1px solid rgba(255,255,255,.45); border-radius:99px; font-size:.84rem; background:rgba(255,255,255,.08); transition:.25s; }.explore-button:hover { transform:translateY(-3px); background:#fff; color:var(--purple); }.explore-button span { font-size:1.2rem; }.scroll-note { position:absolute; right:8vw; bottom:2.5rem; color:#dcd4eb; font-size:.74rem; text-decoration:none; }.scroll-note span { display:block; text-align:center; font-size:1.2rem; }
.collection { padding:7.5rem 8vw; background:var(--cream); }.section-heading { text-align:center; max-width:570px; margin:0 auto 3.8rem; }.section-heading h2,.chapters h2,.about h2 { font-size:clamp(2.6rem,5vw,4.5rem); color:var(--ink); }.section-heading h2 em,.chapters h2 em,.about h2 em { color:var(--purple); }.section-heading > p:last-child { color:#6e6a7b; font-size:.92rem; line-height:1.75; }
.poetry-grid { max-width:1120px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }.poem-card { min-height:315px; padding:2rem; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #e7e0f1; background:#fff; box-shadow:0 12px 35px rgba(51,37,80,.07); transition:.25s; }.poem-card:nth-child(2) { background:#f3effa; }.poem-card:nth-child(3) { background:#fdf6e9; }.poem-card:hover { transform:translateY(-7px); box-shadow:0 18px 40px rgba(51,37,80,.14); }.poem-number { color:var(--gold); font-family:"Playfair Display",serif; font-size:1.1rem; }.poem-card h3 { font-family:"Playfair Display","Noto Sans Devanagari",serif; font-size:1.75rem; font-weight:500; margin:1.5rem 0 .7rem; }.poem-card blockquote { margin:0; white-space:pre-line; color:#555064; font-family:"Noto Sans Devanagari",Poppins,sans-serif; line-height:1.85; font-size:.94rem; }.poem-footer { color:#8b8498; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-top:1.2rem; }.empty-message { text-align:center; color:#777; }
.chapters { background:var(--lavender); padding:6rem 12vw; display:flex; align-items:center; justify-content:space-between; gap:3rem; }.chapters > div:first-child { max-width:600px; }.chapters > div:first-child > p:last-child,.about > p:last-child { max-width:540px; color:#625d70; font-size:.92rem; line-height:1.8; }.coming-soon { min-width:200px; padding:2rem; text-align:center; background:var(--ink); color:#fff; transform:rotate(3deg); box-shadow:12px 14px 0 #d8ceeb; }.coming-soon span { color:var(--gold); font-size:1.5rem; }.coming-soon p { color:#cfc5e4; font-size:.7rem; letter-spacing:.14em; margin:1rem 0 .3rem; }.coming-soon strong { font-family:"Playfair Display",serif; font-size:1.45rem; font-weight:500; }
.about { padding:7rem 8vw; text-align:center; background:#fff; }.about > p:last-child { margin:1.2rem auto 0; } footer { text-align:center; padding:1.6rem; background:var(--ink); color:#cfc8dd; font-size:.78rem; }
.premium { display:flex; align-items:center; justify-content:space-between; gap:4rem; padding:7rem 12vw; color:#fff; background:radial-gradient(circle at 83% 35%,#8870be,transparent 33%),linear-gradient(135deg,#211936,#443063); }.premium-copy { max-width:590px; }.premium h2 { font-family:"Playfair Display","Noto Sans Devanagari",serif; font-size:clamp(2.9rem,5vw,4.5rem); font-weight:500; margin:.1rem 0 1rem; }.premium h2 em { color:#f0cd8d; }.premium-copy > p:not(.eyebrow) { color:#e1d9ef; line-height:1.8; font-size:.93rem; }.premium ul { padding:0; margin:1.5rem 0 0; list-style:none; color:#fff; font-size:.87rem; line-height:2.1; }.premium li::before { content:"+"; color:#e8bc70; margin-right:.65rem; }.pricing-card { min-width:290px; text-align:center; padding:2.4rem 2rem; color:var(--ink); background:#fffdf8; box-shadow:14px 14px 0 rgba(0,0,0,.16); }.plan-label { color:var(--purple); font-weight:600; font-size:.68rem; letter-spacing:.14em; }.price { font-family:"Playfair Display",serif; font-size:3.2rem; margin:.8rem 0 .1rem; }.price span { font-family:Poppins,sans-serif; color:#787080; font-size:.78rem; }.price-note { color:#777080; font-size:.74rem; }.payment-button { width:100%; margin:1.25rem 0 .65rem; padding:.95rem 1rem; border:0; color:#fff; background:var(--purple); font:600 .84rem Poppins,sans-serif; cursor:pointer; transition:.2s; }.payment-button:hover { background:#554486; transform:translateY(-2px); }.payment-button span { margin-left:.7rem; }.pricing-card small { color:#89818e; font-size:.65rem; }.premium-preview { padding:5rem 8vw 7rem; text-align:center; background:#f7f3fb; }.locked-card { max-width:600px; margin:1.5rem auto 0; padding:2.6rem 2rem; background:#fff; border:1px solid #e3dcec; }.lock { color:var(--gold); font-size:1.8rem; }.locked-card p { color:var(--purple); font-size:.7rem; letter-spacing:.12em; }.locked-card h3 { color:#464051; font:500 1.45rem/1.5 "Playfair Display","Noto Sans Devanagari",serif; }.text-button { border:0; color:var(--purple); background:transparent; font:600 .78rem Poppins,sans-serif; cursor:pointer; text-decoration:underline; }.payment-modal { position:fixed; width:min(90vw,440px); border:0; padding:2.5rem; color:var(--ink); text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.35); }.payment-modal::backdrop { background:rgba(30,22,48,.7); }.payment-modal h2 { font:500 2.2rem "Playfair Display",serif; margin:.2rem 0 1rem; }.payment-modal p:not(.eyebrow) { color:#655e70; font-size:.88rem; line-height:1.75; }.payment-modal a { display:inline-block; margin-top:.7rem; color:#fff; background:var(--purple); padding:.8rem 1.2rem; text-decoration:none; font-size:.8rem; }.close-modal { position:absolute; top:.65rem; right:.85rem; border:0; background:transparent; color:#766c81; font-size:1.5rem; cursor:pointer; }
@media (max-width:720px) { .hero,.collection,.about { padding-left:6vw; padding-right:6vw; }.nav-links { display:none; position:absolute; top:70px; right:0; padding:1rem; background:#3d315b; flex-direction:column; }.nav-links.open { display:flex; }.menu-button { display:block; }.scroll-note { right:6vw; }.poetry-grid { grid-template-columns:1fr; }.poem-card { min-height:260px; }.chapters,.premium { padding:4.5rem 8vw; flex-direction:column; align-items:flex-start; }.coming-soon { align-self:center; }.pricing-card { align-self:center; min-width:min(290px,100%); }.hero-content { padding-bottom:3rem; }.hero h1 { font-size:clamp(3rem,14vw,4.7rem); } }