/*
Theme Name: Vishv Book Publishers
Theme URI: https://vishavbook.online/
Author: Vishv Book Publishers
Description: Official Hiring Portal landing page theme with animated hero, plans, and how-it-works sections.
Version: 1.1
License: GPL v2 or later
Text Domain: vishv-book
*/

:root{
  --vb-bg:#f1faf6;
  --vb-fg:#0c2a22;
  --vb-card:#ffffff;
  --vb-muted:#5b7a72;
  --vb-border:#d6ece2;
  --vb-primary:#0fa37f;
  --vb-primary-2:#14b8a6;
  --vb-primary-glow:#34d4b7;
  --vb-orange:#f59e3b;
  --vb-pink:#ef6a4a;
  --vb-grad: linear-gradient(135deg,#0fa37f,#14b8a6);
  --vb-grad-warm: linear-gradient(135deg,#f59e3b,#ef6a4a);
  --vb-grad-hero: linear-gradient(135deg,#eafaf2,#dff5ee);
  --vb-shadow-glow: 0 20px 60px -15px rgba(15,163,127,.45);
  --vb-shadow-card: 0 10px 40px -10px rgba(15,163,127,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:var(--vb-grad-hero);
  color:var(--vb-fg);
  min-height:100vh;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.text-grad{background:var(--vb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:18px 36px;border-radius:18px;
  background:var(--vb-grad);color:#fff;font-weight:800;font-size:17px;
  box-shadow:var(--vb-shadow-glow);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;overflow:hidden;
}
.btn-cta:hover{transform:translateY(-4px)}
.btn-cta .shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:200% 100%;animation:vb-shine 3s linear infinite}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--vb-border);box-shadow:var(--vb-shadow-card);font-size:13px;font-weight:500;backdrop-filter:blur(8px)}

/* HERO */
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;text-align:center}
.hero h1{font-size:clamp(36px,6vw,72px);font-weight:900;margin:0;letter-spacing:-.02em;max-width:900px}
.hero .sub{margin-top:14px;font-size:clamp(18px,2.2vw,24px);font-weight:600;color:var(--vb-primary)}
.logo-wrap{position:relative;width:112px;height:112px;margin-bottom:24px}
.logo-wrap .glow{position:absolute;inset:0;border-radius:999px;background:var(--vb-grad);filter:blur(28px);opacity:.4;animation:vb-pulse 2s ease-out infinite}
.logo-wrap svg{position:relative;width:100%;height:100%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.15))}

.perks{margin-top:64px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:880px}
@media(min-width:768px){.perks{grid-template-columns:repeat(4,1fr)}}
.perk{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid var(--vb-border);box-shadow:var(--vb-shadow-card);transition:transform .3s, box-shadow .3s}
.perk:hover{transform:translateY(-6px);box-shadow:var(--vb-shadow-glow)}
.perk .ic{display:flex;align-items:center;justify-content:center;padding:12px;border-radius:14px;background:var(--vb-grad);color:#fff}
.perk span{font-weight:600;font-size:14px;text-align:center}

/* Blobs */
.blob{position:absolute;border-radius:999px;filter:blur(60px);opacity:.5;pointer-events:none;animation:vb-blob 18s ease-in-out infinite}
.blob.b1{width:380px;height:380px;background:#0fa37f;top:-100px;left:-80px}
.blob.b2{width:340px;height:340px;background:#f59e3b;bottom:-80px;right:-60px;animation-delay:-4s}
.blob.b3{width:300px;height:300px;background:#ef6a4a;top:40%;right:10%;animation-delay:-8s}
.blob.b4{width:360px;height:360px;background:#34d4b7;bottom:10%;left:20%;animation-delay:-12s}

/* Float icons */
.float-ic{position:absolute;color:var(--vb-primary);opacity:.5;animation:vb-floaty 5s ease-in-out infinite}
.float-ic.delay1{animation-delay:-2s;color:var(--vb-orange);opacity:.7}
.float-ic.delay2{animation-delay:-1s;color:var(--vb-pink);opacity:.6}
.float-ic.coin{animation:vb-coin 3s ease-in-out infinite;color:var(--vb-primary)}
@media(max-width:767px){.float-ic{display:none}}

/* Sections */
section{padding:80px 24px;position:relative;overflow:hidden}
.section-title{text-align:center;max-width:720px;margin:0 auto 50px}
.section-title h2{font-size:clamp(32px,5vw,48px);font-weight:900;margin:12px 0 16px}
.section-title .eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--vb-primary)}
.section-title p{color:var(--vb-muted);font-size:17px}

/* Advance banner */
.advance{position:relative;max-width:780px;margin:48px auto 0;padding:40px;border-radius:28px;background:var(--vb-grad-warm);color:#fff;box-shadow:var(--vb-shadow-glow);overflow:hidden}
.advance .b1,.advance .b2{position:absolute;border-radius:999px;background:rgba(255,255,255,.15);animation:vb-blob 18s ease-in-out infinite}
.advance .b1{width:160px;height:160px;top:-40px;right:-40px}
.advance .b2{width:130px;height:130px;bottom:-30px;left:-30px;animation-delay:-5s}
.advance .row{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
@media(min-width:768px){.advance .row{flex-direction:row;text-align:left}}
.advance .pen{width:64px;height:64px;animation:vb-pen 2.4s ease-in-out infinite;transform-origin:bottom right}
.advance h3{font-size:clamp(26px,4vw,36px);font-weight:900;margin:4px 0 0}
.advance .label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.9}

/* Plans */
.plans{display:grid;grid-template-columns:1fr;gap:24px;max-width:1180px;margin:0 auto}
@media(min-width:640px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{position:relative;padding:26px;border-radius:24px;background:var(--vb-card);border:1px solid var(--vb-border);box-shadow:var(--vb-shadow-card);transition:transform .3s, box-shadow .3s}
.plan:hover{transform:translateY(-8px);box-shadow:var(--vb-shadow-glow)}
.plan.featured{border-color:var(--vb-primary);box-shadow:0 0 0 3px rgba(15,163,127,.2),var(--vb-shadow-card)}
.plan .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:5px 16px;border-radius:999px;background:var(--vb-grad);color:#fff;font-size:12px;font-weight:700;box-shadow:var(--vb-shadow-glow);white-space:nowrap}
.plan .head{display:flex;align-items:center;justify-content:space-between}
.plan .id{font-size:48px;font-weight:900}
.plan .pico{padding:8px;border-radius:12px;background:rgba(15,163,127,.1);color:var(--vb-primary)}
.plan .eyebrow{margin-top:18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--vb-muted)}
.plan .salary{font-size:36px;font-weight:900;margin-top:4px}
.plan ul{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:10px}
.plan ul li{display:flex;align-items:center;gap:8px;font-size:14px}
.plan ul li svg{color:var(--vb-primary);flex-shrink:0}
.plan .apply{display:inline-flex;width:100%;justify-content:center;align-items:center;gap:8px;padding:14px;border-radius:14px;background:var(--vb-grad);color:#fff;font-weight:700;font-size:14px;box-shadow:var(--vb-shadow-card);transition:box-shadow .25s}
.plan .apply:hover{box-shadow:var(--vb-shadow-glow)}

.plans-foot{max-width:720px;margin:48px auto 0;text-align:center}
.plans-foot p{margin:14px 0}
.plans-foot .hindi{font-size:17px;font-weight:600}
.plans-foot .en{font-size:14px;color:var(--vb-muted);font-style:italic}

/* Steps */
.steps{position:relative;max-width:1180px;margin:64px auto 0;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps::before{content:"";display:none;position:absolute;top:48px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(15,163,127,.4),transparent)}
@media(min-width:1024px){.steps::before{display:block}}
.step{position:relative}
.step .ic-wrap{position:relative;z-index:1;width:80px;height:80px;margin:0 auto;border-radius:18px;background:var(--vb-grad);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--vb-shadow-glow);transform:rotate(3deg);transition:transform .3s}
.step .ic-wrap:hover{transform:rotate(0)}
.step .num{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:999px;background:var(--vb-card);color:var(--vb-primary);font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid var(--vb-primary);box-shadow:var(--vb-shadow-card)}
.step .body{margin-top:24px;padding:24px;border-radius:18px;background:rgba(255,255,255,.85);border:1px solid var(--vb-border);box-shadow:var(--vb-shadow-card);transition:transform .3s, box-shadow .3s}
.step .body:hover{transform:translateY(-6px);box-shadow:var(--vb-shadow-glow)}
.step h3{margin:0;font-size:18px;font-weight:700}
.step p{margin:8px 0 0;font-size:14px;color:var(--vb-muted)}

/* Footer */
.site-footer{padding:40px 24px;text-align:center;font-size:14px;color:var(--vb-muted);border-top:1px solid var(--vb-border)}
.site-footer .brand{display:inline-flex;align-items:center;gap:10px;color:var(--vb-fg);font-weight:700}
.site-footer .brand svg{width:28px;height:28px}

/* Animations */
@keyframes vb-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.1)}66%{transform:translate(-30px,40px) scale(.95)}}
@keyframes vb-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes vb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(15,163,127,.5)}50%{box-shadow:0 0 0 24px rgba(15,163,127,0)}}
@keyframes vb-shine{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes vb-pen{0%,100%{transform:rotate(-10deg) translateX(-4px)}50%{transform:rotate(10deg) translateX(8px)}}
@keyframes vb-coin{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
@keyframes vb-fade-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:vb-fade-up .8s ease-out both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}.d5{animation-delay:.5s}.d6{animation-delay:.6s}