/* =========================================================
   Vishv Book Publication — main theme stylesheet
   White background + vibrant gradients + animations
   ========================================================= */

:root{
  --vb-bg:#ffffff;
  --vb-ink:#16161e;
  --vb-muted:#5b5b6b;
  --vb-card:#ffffff;
  --vb-border:rgba(22,22,30,.10);
  --vb-primary:#7c3aed;          /* violet */
  --vb-primary-2:#ec4899;        /* pink   */
  --vb-accent:#f97316;           /* coral  */
  --vb-cyan:#06b6d4;
  --vb-radius:14px;
  --vb-grad:linear-gradient(135deg,#7c3aed 0%,#ec4899 55%,#f97316 100%);
  --vb-grad-soft:linear-gradient(135deg,rgba(124,58,237,.12),rgba(236,72,153,.10),rgba(249,115,22,.10));
  --vb-shadow:0 30px 60px -25px rgba(124,58,237,.35),0 10px 30px -15px rgba(236,72,153,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--vb-bg);color:var(--vb-ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.vb-container{max-width:1180px;margin:0 auto;padding:0 24px}
.vb-narrow{max-width:820px}
.vb-center{text-align:center}
.vb-max-sm{max-width:360px}
.vb-small{font-size:12px}
.vb-muted{color:var(--vb-muted)}

/* ---- NAV ---- */
.vb-nav{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--vb-border);
}
.vb-nav__inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.vb-logo{display:flex;align-items:center;gap:10px;font-family:"Fraunces",serif;font-weight:600;font-size:18px}
.vb-logo__mark{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--vb-grad);color:#fff;font-family:"Fraunces",serif;font-weight:700;
  box-shadow:var(--vb-shadow);
}
.vb-logo__mark--sm{width:26px;height:26px;font-size:14px;border-radius:7px}
.vb-dot{color:var(--vb-primary)}
.vb-nav__menu{display:none;gap:28px;font-size:14px;color:var(--vb-muted)}
.vb-nav__menu a:hover{color:var(--vb-ink)}
@media(min-width:880px){.vb-nav__menu{display:flex}}

/* ---- Buttons ---- */
.vb-btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;padding:10px 18px;font-weight:600;font-size:14px;
  border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .2s;
  font-family:inherit;
}
.vb-btn--lg{padding:14px 24px;font-size:15px}
.vb-btn--primary{background:var(--vb-grad);color:#fff;box-shadow:var(--vb-shadow)}
.vb-btn--primary:hover{transform:translateY(-2px)}
.vb-btn--ghost{background:#fff;border-color:var(--vb-border);color:var(--vb-ink)}
.vb-btn--ghost:hover{background:#fafafa}
.vb-btn--invert{background:#fff;color:var(--vb-primary)}

/* ---- HERO ---- */
.vb-hero{position:relative;overflow:hidden;padding:80px 0 110px;background:
  radial-gradient(circle at 18% 12%,rgba(124,58,237,.10),transparent 45%),
  radial-gradient(circle at 82% 18%,rgba(249,115,22,.10),transparent 45%),
  radial-gradient(circle at 50% 95%,rgba(6,182,212,.10),transparent 55%),
  #fff;
}
@media(min-width:980px){.vb-hero{padding:120px 0 140px}}

.vb-hero__grid{display:grid;gap:48px;align-items:center;position:relative}
@media(min-width:980px){.vb-hero__grid{grid-template-columns:7fr 5fr}}

.vb-pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--vb-border);background:rgba(255,255,255,.7);
  padding:6px 12px;border-radius:999px;font-size:12px;color:var(--vb-muted);
  backdrop-filter:blur(6px);
}
.vb-pill svg{color:var(--vb-primary)}
.vb-h1{
  font-family:"Fraunces",serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(2.6rem,7vw,5.2rem);line-height:.95;margin:18px 0 0;
}
.vb-grad{background:var(--vb-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.vb-lead{margin:18px 0 0;max-width:520px;font-size:18px;color:var(--vb-muted)}
.vb-lead strong{color:var(--vb-ink)}
.vb-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.vb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:460px;margin-top:36px}
.vb-stat__k{font-family:"Fraunces",serif;font-size:28px}
.vb-stat__v{font-size:12px;color:var(--vb-muted)}

/* 3D book carousel */
.vb-hero__visual{position:relative;height:520px;display:flex;align-items:center;justify-content:center}
.vb-scene{perspective:1400px}
.vb-carousel{
  position:relative;width:200px;height:300px;transform-style:preserve-3d;
  animation:vb-spin 28s linear infinite;
}
.vb-carousel:hover{animation-play-state:paused}
.vb-carousel>div{
  position:absolute;inset:0;
  transform:rotateY(var(--a)) translateZ(340px);
  border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(22,22,30,.30),0 0 0 1px rgba(22,22,30,.06);
  backface-visibility:hidden;
}
.vb-carousel img{width:100%;height:100%;object-fit:cover}
@keyframes vb-spin{from{transform:rotateY(0) rotateX(-8deg)}to{transform:rotateY(360deg) rotateX(-8deg)}}

.vb-float-badge{
  position:absolute;padding:10px 16px;border-radius:999px;font-weight:600;font-size:13px;
  box-shadow:var(--vb-shadow);animation:vb-float 6s ease-in-out infinite;
  background:#fff;border:1px solid var(--vb-border);
}
.vb-float-badge--top{top:24px;right:6px;background:var(--vb-grad);color:#fff;border:none;transform:rotate(6deg)}
.vb-float-badge--bot{bottom:24px;left:6px;animation-delay:1.2s;color:var(--vb-muted)}
@keyframes vb-float{0%,100%{transform:translateY(0) rotate(var(--r,0))}50%{transform:translateY(-12px) rotate(var(--r,0))}}
.vb-float-badge--top{--r:6deg}
.vb-float-badge--bot{--r:-3deg}

/* Blobs */
.vb-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:vb-blob 14s ease-in-out infinite;pointer-events:none}
.vb-blob--1{width:460px;height:460px;top:-120px;left:-80px;background:rgba(124,58,237,.45)}
.vb-blob--2{width:400px;height:400px;top:160px;right:-80px;background:rgba(249,115,22,.40);animation-delay:3s}
.vb-blob--3{width:380px;height:380px;bottom:-120px;left:35%;background:rgba(6,182,212,.35);animation-delay:6s}
@keyframes vb-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.15)}66%{transform:translate(-30px,20px) scale(.92)}}

/* Sparkles */
.vb-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--vb-primary);animation:vb-twinkle 2.6s ease-in-out infinite;pointer-events:none}
@keyframes vb-twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}}

.vb-rise{animation:vb-rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes vb-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ---- Sections ---- */
.vb-section{padding:88px 0}
.vb-section--alt{background:linear-gradient(180deg,#fafaff,#fff);border-top:1px solid var(--vb-border);border-bottom:1px solid var(--vb-border)}
.vb-section__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.vb-eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--vb-primary);margin-bottom:10px}
.vb-h2{font-family:"Fraunces",serif;font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.05;letter-spacing:-.02em;margin:0;max-width:720px}
.vb-h2 em{font-style:italic;color:var(--vb-muted)}

/* Plans */
.vb-plans{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:680px){.vb-plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.vb-plans{grid-template-columns:repeat(4,1fr)}}
.vb-plan{
  position:relative;background:#fff;border:1px solid var(--vb-border);
  border-radius:18px;padding:26px;display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.vb-plan:hover{transform:translateY(-4px);box-shadow:var(--vb-shadow)}
.vb-plan--featured{background:var(--vb-grad);color:#fff;border:none;box-shadow:var(--vb-shadow)}
@media(min-width:1020px){.vb-plan--featured{transform:translateY(-12px)}}
.vb-plan--featured .vb-muted,.vb-plan--featured a{color:#fff}
.vb-plan__tag{
  position:absolute;top:-12px;left:24px;background:#fff;color:var(--vb-primary);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:5px 10px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.vb-plan--featured .vb-plan__tag{background:#fff;color:var(--vb-primary)}
.vb-plan__days{display:flex;align-items:baseline;gap:8px}
.vb-plan__num{font-family:"Fraunces",serif;font-size:56px;line-height:1}
.vb-plan__d{font-size:14px;opacity:.75}
.vb-plan__title{font-family:"Fraunces",serif;font-size:22px;margin:14px 0 6px}
.vb-plan__list{list-style:none;padding:0;margin:14px 0 0;font-size:14px;line-height:1.9;opacity:.92}
.vb-plan__pay{margin-top:20px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08)}
.vb-plan--featured .vb-plan__pay{border-color:rgba(255,255,255,.25)}
.vb-plan__salary{font-family:"Fraunces",serif;font-size:34px;font-weight:600;margin-top:4px}
.vb-plan__salary span{margin-left:4px}
.vb-plan a{margin-top:20px;justify-content:center}

.vb-info-grid{display:grid;gap:16px;margin-top:36px}
@media(min-width:780px){.vb-info-grid{grid-template-columns:1fr 1fr}}
.vb-info{background:#fff;border:1px solid var(--vb-border);border-radius:14px;padding:18px;font-size:14px;color:var(--vb-muted)}
.vb-info strong{color:var(--vb-ink)}

/* Steps */
.vb-steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--vb-border);border-radius:18px;overflow:hidden;margin-top:48px}
@media(min-width:680px){.vb-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.vb-steps{grid-template-columns:repeat(4,1fr)}}
.vb-step{background:#fff;padding:28px;transition:background .2s ease}
.vb-step:hover{background:#fafaff}
.vb-step__n{font-family:"Fraunces",serif;font-size:28px;background:var(--vb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vb-step__title{font-family:"Fraunces",serif;font-size:22px;margin:16px 0 8px}

/* Proof */
.vb-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.vb-trust__card{
  display:flex;flex-direction:column;text-align:left;
  background:#fff;border:1px solid var(--vb-border);border-radius:14px;
  padding:16px 18px;min-width:230px;
}
.vb-trust__card strong{font-size:15px}
.vb-trust__card span{font-size:13px;color:var(--vb-muted)}

/* FAQ */
.vb-faq{margin-top:36px;border-top:1px solid var(--vb-border);border-bottom:1px solid var(--vb-border)}
.vb-faq__item{padding:22px 4px;border-bottom:1px solid var(--vb-border)}
.vb-faq__item:last-child{border-bottom:none}
.vb-faq__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-family:"Fraunces",serif;font-size:20px}
.vb-faq__item summary::-webkit-details-marker{display:none}
.vb-faq__plus{color:var(--vb-primary);font-size:24px;transition:transform .25s ease}
.vb-faq__item[open] .vb-faq__plus{transform:rotate(45deg)}
.vb-faq__item p{margin:12px 0 0;color:var(--vb-muted)}

/* Final CTA */
.vb-final{
  position:relative;overflow:hidden;border-radius:28px;
  background:var(--vb-grad-soft);border:1px solid var(--vb-border);
  padding:56px 28px;
}

/* Footer */
.vb-footer{border-top:1px solid var(--vb-border);padding:32px 0}
.vb-footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--vb-muted)}
.vb-footer__brand{display:flex;align-items:center;gap:10px}
.vb-footer__links{display:flex;gap:20px}
.vb-footer__links a:hover{color:var(--vb-ink)}

.vb-prose p{margin:0 0 1em}
.vb-prose h2,.vb-prose h3{font-family:"Fraunces",serif}