/*
Theme Name: Global Book Publication
Theme URI: https://globalbookpublication.example
Author: Global Book Publication
Author URI: https://globalbookpublication.example
Description: Landing-page WordPress theme for Global Book Publication — handwriting work platform. Includes animated hero, benefits, process, pricing, testimonials, and CTA sections with a warm gradient design.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gbp
Tags: landing-page, one-page, custom-colors, custom-logo, featured-images, theme-options
*/

:root{
  --bg:#fdfaf4;
  --fg:#0e2820;
  --muted:#6b6357;
  --card:#ffffff;
  --border:#ecdfd5;
  --brand-orange:#ff8a3d;
  --brand-pink:#ff4f7a;
  --brand-magenta:#e84393;
  --brand-purple:#7d5fff;
  --grad: linear-gradient(90deg,#ff8a3d,#ff4f7a,#e84393,#7d5fff);
  --grad-bg: linear-gradient(135deg,#fff3e6 0%,#ffe2d3 35%,#ffd0e3 70%,#e9defc 100%);
  --shadow-glow: 0 30px 80px -20px rgba(255,79,122,.45);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(253,250,244,.75);backdrop-filter:blur(14px);border-bottom:1px solid rgba(236,223,213,.6)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 6px 18px rgba(255,79,122,.35)}
.logo-mark svg{width:22px;height:22px}
.logo-text{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:15px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:12px;background:var(--grad);color:#fff;box-shadow:var(--shadow-glow);transition:transform .2s ease,box-shadow .2s ease;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--fg);box-shadow:0 6px 20px rgba(0,0,0,.06)}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--grad-bg)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, rgba(232,67,147,.18) 1px, transparent 0);background-size:28px 28px;opacity:.5;pointer-events:none}
.blob{position:absolute;filter:blur(60px);opacity:.3;background:var(--grad);border-radius:50%;animation:blob 18s ease-in-out infinite;pointer-events:none}
.blob.b1{left:-120px;top:40px;width:320px;height:320px}
.blob.b2{right:-100px;bottom:0;width:280px;height:280px;animation-delay:-6s}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr;gap:48px;padding:80px 0;align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr 1fr;padding:120px 0}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--border);font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--brand-pink);box-shadow:0 0 0 0 rgba(255,79,122,.6);animation:pulse 2s infinite}
.h1{font-size:clamp(40px,6vw,76px);font-weight:900;line-height:1.05;letter-spacing:-.02em;margin:24px 0 0}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:20px;color:var(--muted);font-size:17px;max-width:560px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px;max-width:460px}
.stat .v{font-size:26px;font-weight:800}
.stat .l{font-size:12px;color:var(--muted)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.badge .ico{width:14px;height:14px;color:var(--brand-pink)}

.hero-art{position:relative}
.hero-art .glow{position:absolute;inset:-24px;background:var(--grad);filter:blur(60px);opacity:.55;border-radius:40px;animation:blob 14s ease-in-out infinite}
.hero-art img{position:relative;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.18);transform:rotate(-3deg);animation:floatR 8s ease-in-out infinite}
.float-card{position:absolute;background:#fff;border-radius:18px;padding:12px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 18px 40px rgba(0,0,0,.14);animation:float 6s ease-in-out infinite}
.float-card .ic{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff}
.float-card small{display:block;font-size:10px;color:var(--muted)}
.float-card strong{display:block;font-size:13px}
.fc-1{left:-12px;top:-22px}
.fc-2{right:-12px;top:35%;padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;animation-delay:-2s}
.fc-3{right:24px;bottom:-18px;animation-delay:-4s}

/* Marquee */
.marquee{position:relative;border-top:1px solid rgba(236,223,213,.6);border-bottom:1px solid rgba(236,223,213,.6);background:rgba(255,255,255,.4);backdrop-filter:blur(8px);padding:14px 0;overflow:hidden}
.marquee .track{display:flex;gap:48px;white-space:nowrap;animation:marquee 30s linear infinite;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--muted)}

/* Sections */
section.block{padding:96px 0;position:relative;overflow:hidden}
section.block.alt{background:var(--grad-bg)}
section.block.alt::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, rgba(232,67,147,.18) 1px, transparent 0);background-size:28px 28px;opacity:.3;pointer-events:none}
.label{text-align:center;font-size:12px;font-weight:800;letter-spacing:.25em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font-size:clamp(32px,4vw,52px);font-weight:900;text-align:center;letter-spacing:-.02em;margin:10px 0 14px}
.sub{text-align:center;color:var(--muted);max-width:640px;margin:0 auto}

.grid-3{display:grid;grid-template-columns:1fr;gap:22px;margin-top:52px}
@media(min-width:720px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--card);border-radius:22px;padding:28px;transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.10)}
.card .ico{width:48px;height:48px;border-radius:14px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px rgba(255,79,122,.35)}
.card h3{margin:18px 0 8px;font-size:20px}
.card p{margin:0;color:var(--muted);font-size:14px}

/* Process */
.process-wrap{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;margin-top:52px}
@media(min-width:1000px){.process-wrap{grid-template-columns:1fr 1fr}}
.process-img{position:relative}
.process-img .glow{position:absolute;inset:-20px;background:var(--grad);filter:blur(60px);opacity:.45;border-radius:32px;animation:blob 16s ease-in-out infinite}
.process-img img{position:relative;border-radius:28px;transform:rotate(2deg);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.steps{display:flex;flex-direction:column;gap:18px}
.step{display:flex;gap:18px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:22px;transition:transform .25s ease, box-shadow .25s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.step .n{position:relative}
.step .n .ic{width:56px;height:56px;border-radius:18px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 14px 28px rgba(255,79,122,.35)}
.step .n .tag{position:absolute;top:-8px;right:-8px;background:#fff;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:900;background-clip:text;-webkit-background-clip:text;color:transparent;background-image:var(--grad);box-shadow:0 4px 10px rgba(0,0,0,.06)}
.step h4{margin:0;font-size:18px}
.step p{margin:6px 0 0;color:var(--muted);font-size:14px}

/* Showcase / numbers */
.show{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:1000px){.show{grid-template-columns:1fr 1fr}}
.show img{border-radius:28px;transform:rotate(-2deg);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px}
.kpi .ic{width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center}
.kpi .v{font-size:28px;font-weight:900;margin-top:10px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .l{font-size:12px;color:var(--muted)}

/* Pricing */
.plans{display:grid;grid-template-columns:1fr;gap:22px;margin-top:52px}
@media(min-width:880px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;border:1px solid var(--border);background:#fff;border-radius:26px;padding:30px;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease}
.plan:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.10)}
.plan.featured{background:var(--grad);color:#fff;border:0;box-shadow:var(--shadow-glow)}
.plan .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#fff;color:var(--fg);padding:5px 14px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.plan h3{margin:0;font-size:20px}
.plan .price{margin-top:10px;font-size:38px;font-weight:900}
.plan .price small{font-size:14px;opacity:.7;font-weight:600}
.plan ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;align-items:center;gap:10px;font-size:14px}
.plan li .chk{width:18px;height:18px;border-radius:999px;background:#fff3e6;display:grid;place-items:center;color:var(--brand-pink);font-weight:900}
.plan.featured li .chk{background:rgba(255,255,255,.2);color:#fff}
.plan .btn{margin-top:24px;justify-content:center}
.plan.featured .btn{background:#fff;color:var(--fg);box-shadow:0 10px 24px rgba(0,0,0,.18)}

/* Testimonials */
.reviews{display:grid;grid-template-columns:1fr;gap:22px;margin-top:52px}
@media(min-width:760px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{position:relative;background:#fff;border:1px solid var(--border);border-radius:24px;padding:26px;transition:transform .25s ease, box-shadow .25s ease}
.review:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.10)}
.review .stars{color:var(--brand-orange);font-size:14px}
.review blockquote{margin:14px 0 0;font-size:14px}
.review .who{display:flex;align-items:center;gap:10px;margin-top:18px}
.review .av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800}

/* CTA */
.cta{background:var(--grad);color:#fff;text-align:center;padding:96px 24px}
.cta h2{font-size:clamp(32px,4vw,52px);font-weight:900;margin:0 0 14px;letter-spacing:-.02em}
.cta p{max-width:560px;margin:0 auto 28px;opacity:.92}
.cta .btn{background:#fff;color:var(--fg)}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:32px 0}
.site-footer .inner{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:space-between}
@media(min-width:720px){.site-footer .inner{flex-direction:row}}
.site-footer p{margin:0;font-size:12px;color:var(--muted)}

/* Animations */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatR{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(-1deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,79,122,.7)}70%{box-shadow:0 0 0 14px rgba(255,79,122,0)}100%{box-shadow:0 0 0 0 rgba(255,79,122,0)}}
@keyframes blob{0%,100%{border-radius:42% 58% 70% 30% / 45% 35% 65% 55%;transform:translate(0,0) scale(1)}33%{border-radius:65% 35% 40% 60% / 55% 60% 40% 45%;transform:translate(20px,-14px) scale(1.05)}66%{border-radius:35% 65% 55% 45% / 60% 40% 60% 40%;transform:translate(-14px,10px) scale(.97)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}