/*
Theme Name: Vishv Publishers
Theme URI: https://vishvpublishers.example
Author: Vishv Publishers
Author URI: https://vishvpublishers.example
Description: Landing-page theme for Vishv Publishers — handwriting work platform. White background, amber accents, animated sections, Telegram CTAs.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vishv-publishers
Tags: landing-page, one-page, custom-colors, custom-logo, translation-ready
*/

:root{
  --bg:#ffffff;
  --fg:#0b1220;
  --muted:#6b7280;
  --amber-50:#fff8eb;
  --amber-100:#fdecc8;
  --amber-200:#fbd996;
  --amber-300:#f6bf60;
  --amber-400:#f0a82e;
  --amber-500:#e0901a;
  --amber-600:#b8720f;
  --amber-700:#8a560b;
  --amber-900:#4a2f08;
  --orange-500:#ef7a1a;
  --orange-600:#d35d0a;
  --emerald-50:#ecfdf5;
  --emerald-700:#047857;
  --border:#fdecc8;
  --shadow-soft: 0 30px 60px -25px rgba(224,144,26,.35);
  --shadow-glow: 0 18px 40px -12px rgba(239,122,26,.5);
  --grad-amber: linear-gradient(90deg,var(--amber-500),var(--orange-500));
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.font-display{font-family:'Fraunces',ui-serif,Georgia,serif;letter-spacing:-.02em}
.container{max-width:1180px;margin:0 auto;padding:0 1rem}
.text-center{text-align:center}
.muted{color:var(--muted)}
.grad-text{background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.8);
  border-bottom:1px solid var(--border);
}
.site-header .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.65rem 1.25rem;border-radius:999px;font-weight:600;font-size:.9rem;
  border:1px solid transparent;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;
  position:relative;overflow:hidden;
}
.btn-primary{background:var(--grad-amber);color:#fff;box-shadow:var(--shadow-glow)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02)}
.btn-outline{background:#fff;color:var(--fg);border-color:var(--amber-200)}
.btn-outline:hover{border-color:var(--amber-400)}
.btn-lg{padding:.95rem 1.75rem;font-size:1rem}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-100%);transition:transform .7s ease;
}
.btn:hover::after{transform:translateX(100%)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:5rem 0 7rem}
.hero .grid{display:grid;gap:3rem;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero .grid{grid-template-columns:1fr 1fr;gap:2rem}}
.hero .blob{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:.6;pointer-events:none;z-index:-1;
}
.hero .blob.a{width:28rem;height:28rem;top:-8rem;left:-8rem;background:radial-gradient(closest-side,var(--amber-100),transparent);animation:floatA 14s ease-in-out infinite}
.hero .blob.b{width:32rem;height:32rem;bottom:-10rem;right:-8rem;background:radial-gradient(closest-side,var(--amber-200),transparent);animation:floatB 16s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,-15px)}}

.badge-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem 1rem;border-radius:999px;font-size:.85rem;font-weight:500;
  background:var(--amber-50);color:var(--amber-900);border:1px solid var(--amber-100);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.h1{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.05;margin:1.25rem 0 0;letter-spacing:-.02em}
.lead{font-size:1.1rem;color:var(--muted);max-width:34rem;margin:1.25rem 0 0;line-height:1.65}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:2.25rem;max-width:30rem}
.stat{
  background:rgba(255,255,255,.85);border:1px solid var(--amber-100);
  border-radius:1rem;padding:1rem;text-align:center;backdrop-filter:blur(8px);
  transition:transform .25s ease;
}
.stat:hover{transform:translateY(-4px)}
.stat .v{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700}
.stat .l{font-size:.75rem;color:var(--muted);margin-top:.25rem}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--amber-50);color:var(--amber-900);
  padding:.4rem .75rem;border-radius:999px;font-size:.75rem;font-weight:500;
  border:1px solid var(--amber-100);
}
.chip svg{width:14px;height:14px}

.hero-art{position:relative}
.hero-art .frame{
  border-radius:1.5rem;overflow:hidden;
  box-shadow:var(--shadow-soft);ring:1px solid var(--amber-100);
  animation:floatY 6s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.floater{
  position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border:1px solid var(--amber-100);border-radius:1rem;padding:.6rem .9rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);display:flex;align-items:center;gap:.6rem;
}
.floater.bl{bottom:-1rem;left:-.5rem}
.floater.tr{top:-.5rem;right:-.5rem;background:rgba(255,255,255,.95);color:var(--emerald-700);font-size:.85rem;font-weight:500;border-color:#bbf7d0}
.floater .ico{width:38px;height:38px;border-radius:.75rem;background:var(--grad-amber);color:#fff;display:flex;align-items:center;justify-content:center}
.floater .amt{font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;line-height:1}
.floater .lbl{font-size:.7rem;color:var(--muted);margin-top:2px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* Sections */
section{padding:6rem 0}
.section-head{max-width:42rem;margin:0 auto;text-align:center}
.section-head h2{font-family:'Fraunces',serif;font-size:clamp(2rem,4.5vw,3rem);margin:0;letter-spacing:-.02em}
.section-head p{color:var(--muted);font-size:1.05rem;margin-top:1rem}

/* Features */
.features-grid{
  display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem;
}
@media(min-width:640px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.features-grid{grid-template-columns:repeat(3,1fr)}}
.feature{
  background:#fff;border:1px solid var(--amber-100);border-radius:1.5rem;
  padding:1.75rem;box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:transform .3s ease, box-shadow .3s ease;position:relative;overflow:hidden;
}
.feature::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s ease;z-index:0;
  background:radial-gradient(60% 60% at 0% 0%,var(--amber-50),transparent);
}
.feature:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(0,0,0,.12)}
.feature:hover::before{opacity:1}
.feature .ico{
  width:48px;height:48px;border-radius:14px;background:var(--grad-amber);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 8px 20px -6px rgba(224,144,26,.5);
  transition:transform .3s ease;position:relative;z-index:1;
}
.feature:hover .ico{transform:rotate(6deg) scale(1.08)}
.feature h3{font-family:'Fraunces',serif;font-size:1.2rem;margin:1.1rem 0 .5rem;position:relative;z-index:1}
.feature p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6;position:relative;z-index:1}

/* How it works */
.howit{background:linear-gradient(180deg,rgba(253,236,200,.25),#fff 60%)}
.steps{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:3.5rem}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step .img-wrap{position:relative;border-radius:1.5rem;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.18);border:1px solid var(--amber-100)}
.step .img-wrap img{height:230px;width:100%;object-fit:cover;transition:transform .7s ease}
.step:hover .img-wrap img{transform:scale(1.05)}
.step .num{
  position:absolute;left:1.25rem;bottom:-1.2rem;width:3.4rem;height:3.4rem;border-radius:1rem;
  background:var(--grad-amber);color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.step h3{font-family:'Fraunces',serif;font-size:1.5rem;margin:2rem 0 .5rem}
.step p{color:var(--muted);margin:0}

.center-cta{text-align:center;margin-top:3.5rem}

/* Pricing */
.plans{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem;align-items:stretch}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{
  background:#fff;border:1px solid var(--amber-100);border-radius:1.5rem;padding:2rem;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,.03);transition:transform .3s ease, box-shadow .3s ease;
}
.plan:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(0,0,0,.15)}
.plan.popular{border-color:var(--amber-300);box-shadow:0 20px 60px -20px rgba(246,191,96,.5)}
@media(min-width:900px){.plan.popular{transform:scale(1.04)}.plan.popular:hover{transform:scale(1.04) translateY(-8px)}}
.plan.popular::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,transparent 30%,var(--amber-100) 50%,transparent 70%);
  background-size:200% 100%;animation:shimmer 6s linear infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.plan>*{position:relative;z-index:1}
.plan .ribbon{
  position:absolute;top:1rem;right:1rem;background:var(--grad-amber);color:#fff;
  font-size:.7rem;font-weight:700;padding:.3rem .65rem;border-radius:999px;letter-spacing:.05em;z-index:2;
  display:inline-flex;align-items:center;gap:.3rem;
}
.plan .label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-700)}
.plan .price{font-family:'Fraunces',serif;font-size:3rem;font-weight:700;margin-top:.5rem;line-height:1}
.plan .salary{color:var(--muted);font-size:.9rem;margin-top:.25rem}
.plan ul{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-direction:column;gap:.75rem}
.plan li{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem}
.plan li .tick{
  flex:0 0 20px;width:20px;height:20px;border-radius:999px;background:var(--amber-100);
  color:var(--amber-700);display:inline-flex;align-items:center;justify-content:center;margin-top:1px;
}
.plan li .tick svg{width:12px;height:12px}
.plan li .v{color:var(--muted)}
.plan li .k{font-weight:600;color:var(--fg)}
.plan .btn{margin-top:auto;justify-content:center;width:100%}

/* Final CTA */
.final{position:relative;overflow:hidden;text-align:center}
.final::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--amber-50),var(--amber-100),var(--amber-50));
  background-size:200% 100%;animation:slide 12s linear infinite;
}
@keyframes slide{0%{background-position:0 0}100%{background-position:200% 0}}
.final h2{font-family:'Fraunces',serif;font-size:clamp(2.2rem,5vw,3.75rem);margin:0}
.final p{color:var(--muted);font-size:1.1rem;max-width:36rem;margin:1.25rem auto 0}

/* Footer */
.site-footer{border-top:1px solid var(--amber-100);background:#fff;padding:3rem 0}
.site-footer .row{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}
@media(min-width:700px){.site-footer .row{flex-direction:row;justify-content:space-between;text-align:left}}
.site-footer .copy{font-size:.75rem;color:var(--muted);text-align:center;margin-top:2rem}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}