/*
Theme Name: Vishav Book Publication
Theme URI: https://vishavbook.com
Author: Vishav Book
Description: Professional handwriting work landing page with white/green/yellow gradient design
Version: 3.0
License: GNU General Public License v2 or later
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --green: #2e9e54;
  --green-light: #4db87a;
  --green-dark: #1a6b35;
  --yellow: #eab308;
  --yellow-light: #facc15;
  --gold: #ca8a04;
  --lime: #65a30d;
  --white: #ffffff;
  --bg-light: #f8faf5;
  --text-dark: #1a3320;
  --text-muted: #4a6b50;
  --border-light: #e2e8d8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--text-dark); background: var(--white); }

/* Animations */
@keyframes gradientShift { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)} }
@keyframes slideUp { from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)} }
@keyframes bounceIn { 0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.95)}100%{transform:scale(1)} }
@keyframes morphBlob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}25%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}50%{border-radius:50% 60% 30% 60%/30% 60% 70% 40%}75%{border-radius:60% 40% 60% 30%/70% 40% 50% 60%} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 20px rgba(46,158,84,.3)}50%{box-shadow:0 0 50px rgba(46,158,84,.6)} }
@keyframes shimmer { 0%{background-position:-200% 0}100%{background-position:200% 0} }

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-slide-up { animation: slideUp .8s ease-out forwards; }
.animate-bounce-in { animation: bounceIn .8s ease-out forwards; }
.animate-morph-blob { animation: morphBlob 8s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

.text-gradient-primary {
  background: linear-gradient(135deg, var(--green), var(--yellow), var(--lime));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero */
.bg-hero {
  background: linear-gradient(135deg, #fff 0%, #f5faf0 30%, #fefce8 60%, #f0fdf4 100%);
  background-size: 300% 300%; animation: gradientShift 8s ease infinite;
  min-height: 100vh; position: relative; overflow: hidden; padding: 6rem 0 4rem;
}
.hero-blob { position: absolute; filter: blur(60px); animation: morphBlob 8s ease-in-out infinite; }

/* Navbar */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all .5s; padding: 1rem 0; }
.navbar.scrolled { background: rgba(255,255,255,.7); backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(46,158,84,.06); padding: .5rem 0; }
.navbar .logo-text span:last-child { background: linear-gradient(135deg, var(--green), var(--yellow), var(--lime)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Buttons */
.btn-telegram-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; padding: .75rem 1.75rem; border-radius: 9999px;
  background: linear-gradient(135deg, var(--green), var(--lime), var(--yellow));
  background-size: 200% 200%; color: #fff; text-decoration: none;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
  position: relative; overflow: hidden; animation: gradientShift 3s ease infinite;
}
.btn-telegram-pill:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 35px rgba(46,158,84,.5), 0 0 20px rgba(234,179,8,.2); }

.btn-outline-light {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; padding: .75rem 1.5rem; border-radius: 9999px;
  border: 2px solid rgba(46,158,84,.3); color: var(--green); text-decoration: none;
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.btn-outline-light:hover { border-color: var(--green); background: rgba(46,158,84,.05); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(46,158,84,.15); }

/* Cards */
.card-feature {
  border-radius: 1rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.7); backdrop-filter: blur(16px);
  transition: all .5s;
}
.card-feature:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 50px rgba(46,158,84,.12); border-color: rgba(46,158,84,.3); }

.stat-card { border-radius: 1rem; padding: 1.5rem; background: #fff; border: 1px solid rgba(0,0,0,.05); transition: all .5s; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(46,158,84,.1); }

.pricing-card {
  border-radius: 1.5rem; padding: 2rem; border: 2px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.7); backdrop-filter: blur(16px); transition: all .5s;
}
.pricing-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 60px rgba(46,158,84,.15); }
.pricing-card-popular { border-color: var(--green); box-shadow: 0 10px 40px rgba(46,158,84,.2); background: linear-gradient(135deg, rgba(255,255,255,.9), #f0fdf4); }

/* Sections */
.bg-muted { background: #f8faf5; }
.bg-cta {
  background: linear-gradient(135deg, #f0fdf4 0%, #fefce8 30%, #f0fdf4 60%, #fff 100%);
  background-size: 300% 300%; animation: gradientShift 6s ease infinite;
}
.bg-footer { background: linear-gradient(135deg, #14301e 0%, #1a3320 100%); }

/* Glass */
.glass-light { background: rgba(255,255,255,.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 8px 32px rgba(46,158,84,.06); }

.icon-wrap {
  width: 3.5rem; height: 3.5rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(46,158,84,.15), rgba(234,179,8,.1));
}
.step-circle {
  width: 5rem; height: 5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto;
  background: linear-gradient(135deg, rgba(46,158,84,.15), rgba(234,179,8,.1));
}
.step-num {
  position: absolute; top: -.5rem; right: -.5rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700;
  background: linear-gradient(135deg, var(--green), var(--yellow)); color: #fff;
}
.badge-popular {
  position: absolute; top: -1rem; left: 50%; transform: translateX(-50%);
  padding: .25rem 1rem; border-radius: 9999px; font-size: .875rem; font-weight: 700;
  background: linear-gradient(135deg, var(--green), var(--yellow)); color: #fff;
}

section { padding: 5rem 0; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; }
.text-muted { color: var(--text-muted); }

@media (min-width: 768px) {
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
}

img { max-width: 100%; height: auto; }
.rounded-2xl { border-radius: 1rem; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.15); }
.overflow-hidden { overflow: hidden; }