/*
Theme Name: Work From Home
Theme URI: https://example.com/work-from-home
Author: Work From Home
Author URI: https://example.com
Description: Govt-verified handwriting work landing page theme. Animated hero, pricing, testimonials and Telegram CTAs.
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: wfh
Tags: landing-page, one-page, custom-colors, custom-logo, full-width-template
*/

:root{
  --bg:#f6f7fb;
  --fg:#1a1830;
  --ink:#1a1830;
  --muted:#6c6a85;
  --card:#ffffff;
  --border:#e6e6f0;
  --brand:#3b6ef5;
  --brand-2:#23c0d8;
  --radius:14px;
  --shadow-card:0 20px 50px -20px rgba(40,30,90,.25);
  --shadow-glow:0 10px 40px -10px rgba(59,110,245,.5);
  --gradient-brand:linear-gradient(135deg,#3b6ef5,#23c0d8);
  --gradient-hero:linear-gradient(135deg,#eef2ff 0%,#dceeff 50%,#fde6f1 100%);
  --font-display:"Fraunces",Georgia,serif;
  --font-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.1}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.italic{font-style:italic}
.text-gradient{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:700;font-size:14px;transition:transform .2s, background .2s}
.btn:hover{transform:scale(1.05)}
.btn-primary{background:var(--gradient-brand);color:#fff;box-shadow:var(--shadow-glow)}
.btn-outline{border:2px solid var(--brand);color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff}
.btn-dark{border:2px solid var(--fg)}
.btn-dark:hover{background:var(--fg);color:#fff}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--border);font-size:12px;font-weight:600}
.eyebrow{font-size:12px;letter-spacing:.3em;color:var(--brand);font-weight:700;text-transform:uppercase}

/* Top bar */
.topbar{background:var(--ink);color:rgba(255,255,255,.9);font-size:12px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
.topbar .grp{display:flex;gap:18px;align-items:center}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,247,251,.85);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--border)}
.nav .container{display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:44px;height:44px;border-radius:12px;background:var(--gradient-brand);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-glow);font-size:20px}
.brand .name{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1}
.brand .sub{font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:4px}
.nav-links{display:none;gap:32px;font-size:14px;font-weight:500}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a:hover{color:var(--brand)}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--gradient-hero);padding:60px 0 0}
.hero .grid{display:grid;gap:48px;align-items:center}
@media(min-width:1024px){.hero .grid{grid-template-columns:1fr 1fr}}
.hero h1{font-size:clamp(40px,6vw,72px);font-weight:700;margin-top:24px}
.hero p.lead{margin-top:24px;font-size:18px;color:var(--muted);max-width:560px}
.hero .pills{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.hero .stats{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:480px}
.stat{padding:18px;border-radius:18px;color:#fff;box-shadow:var(--shadow-card)}
.stat-1{background:linear-gradient(135deg,#3b6ef5,#5f9bff)}
.stat-2{background:linear-gradient(135deg,#1a1830,#2e2a55)}
.stat-3{background:linear-gradient(135deg,#ff4d8d,#c042c2)}
.stat .v{font-size:24px;font-weight:800}
.stat .l{font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.85;margin-top:4px}
.hero .cta-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

/* Hero collage */
.collage{position:relative;height:560px}
@media(min-width:1024px){.collage{height:640px}}
.collage .card-img{position:absolute;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-card)}
.collage .img-1{top:0;right:32px;width:62%}
.collage .img-1 img{height:340px;object-fit:cover;width:100%}
.collage .img-2{bottom:0;left:0;width:60%}
.collage .img-2 img{height:380px;object-fit:cover;width:100%}
.float{animation:floatA 6s ease-in-out infinite}
.float-slow{animation:floatB 7s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(-3deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.verified-bubble{position:absolute;top:16px;right:16px;width:64px;height:64px;border-radius:50%;background:var(--gradient-brand);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;text-align:center;line-height:1.1;animation:pulseRing 1.8s infinite}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(59,110,245,.6)}100%{box-shadow:0 0 0 18px rgba(59,110,245,0)}}
.approved-pill{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#fff;color:var(--brand);padding:6px 16px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid rgba(59,110,245,.3)}
.float-card{position:absolute;background:#fff;border-radius:18px;padding:12px 20px 12px 12px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-card)}
.float-card .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:18px}
.float-card .ic.b{background:var(--gradient-brand)}
.float-card .ic.d{background:var(--ink)}
.float-card .t{font-size:14px;font-weight:800}
.float-card .s{font-size:12px;color:var(--muted)}
.fc-1{top:44%;right:0}
.fc-2{bottom:96px;right:16px}

/* Marquee */
.marquee{overflow:hidden;padding:12px 0;font-size:14px;font-weight:700;letter-spacing:.1em}
.marquee.dark{background:var(--ink);color:#fff}
.marquee.brand{background:var(--gradient-brand);color:#fff}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite;gap:48px;padding-left:48px}
.marquee.reverse .marquee-track{animation-direction:reverse}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* About */
section{padding:96px 0}
.about-grid{display:grid;gap:56px;align-items:center}
@media(min-width:1024px){.about-grid{grid-template-columns:1fr 1fr}}
.about-img{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-card)}
.about-img img{height:460px;object-fit:cover;width:100%}
.about-stats{position:absolute;left:24px;right:24px;bottom:24px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:18px;padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.about-stats .v{font-family:var(--font-display);font-weight:800;font-size:20px}
.about-stats .l{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.about h2{font-size:clamp(32px,4vw,52px);font-weight:700;margin-top:16px}
.about p{margin-top:20px;color:var(--muted);font-size:18px}
.about ul{margin-top:24px;list-style:none;display:flex;flex-direction:column;gap:12px}
.about li{display:flex;gap:12px;align-items:flex-start}
.about li .ck{width:24px;height:24px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;font-size:12px;flex-shrink:0}
.kpis{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{padding:16px;border-radius:18px;border:1px solid var(--border);background:#fff}
.kpi .v{font-family:var(--font-display);font-weight:800;font-size:22px}
.kpi .l{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* Features dark */
.features{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.features .head{text-align:center;max-width:640px;margin:0 auto}
.features .head .eyebrow{color:var(--brand-2)}
.features h2{font-size:clamp(32px,4vw,52px);margin-top:16px}
.feat-grid{margin-top:56px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.feat{padding:28px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:transform .3s, border-color .3s}
.feat:hover{transform:translateY(-4px);border-color:var(--brand)}
.feat .ic{width:48px;height:48px;border-radius:14px;background:var(--gradient-brand);display:grid;place-items:center;font-size:22px;box-shadow:var(--shadow-glow)}
.feat .n{font-family:ui-monospace,monospace;font-size:12px;color:var(--brand-2);margin-top:20px}
.feat h3{font-size:20px;font-weight:800;margin-top:4px}
.feat p{color:rgba(255,255,255,.7);font-size:14px;margin-top:8px}

/* Process */
.proc-head{text-align:center;max-width:640px;margin:0 auto}
.proc-head h2{font-size:clamp(32px,4vw,52px);margin-top:16px}
.proc-head p{margin-top:16px;color:var(--muted)}
.proc-grid{margin-top:56px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.step{padding:32px;border-radius:26px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card);transition:box-shadow .3s}
.step:hover{box-shadow:var(--shadow-glow)}
.step .num{font-family:var(--font-display);font-weight:800;font-size:72px;opacity:.85;line-height:1;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.step .lbl{font-size:12px;letter-spacing:.2em;color:var(--muted);margin-top:16px}
.step h3{font-size:24px;font-weight:800;margin-top:8px}
.step p{margin-top:12px;color:var(--muted)}
.proc-cta{text-align:center;margin-top:48px}

/* Pricing */
.pricing{background:rgba(238,240,248,.4)}
.price-head{text-align:center;max-width:640px;margin:0 auto}
.price-head h2{font-size:clamp(32px,4vw,52px);margin-top:16px}
.price-head p{margin-top:16px;color:var(--muted)}
.plans{margin-top:56px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.plan{position:relative;padding:32px;border-radius:26px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card);transition:transform .3s}
.plan:hover{transform:translateY(-8px)}
.plan.popular{border-color:var(--brand);box-shadow:var(--shadow-glow);transform:scale(1.04)}
.plan .pop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gradient-brand);color:#fff;font-size:12px;font-weight:800;padding:6px 16px;border-radius:999px}
.plan .name{font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.plan .price{font-family:var(--font-display);font-weight:800;font-size:48px;margin-top:12px;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .ms{font-size:12px;color:var(--muted)}
.plan ul{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px;font-size:14px}
.plan li{display:flex;align-items:center;gap:8px}
.plan li:before{content:"✓";color:var(--brand);font-weight:800}
.plan .dep{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:14px}
.plan .cta{display:block;text-align:center;padding:14px;border-radius:999px;margin-top:24px;font-weight:700}
.trust{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;font-size:12px}
.trust span{padding:8px 16px;border-radius:999px;background:var(--card);border:1px solid var(--border);display:inline-flex;gap:8px;align-items:center}

/* Reviews */
.rev-head{text-align:center;max-width:640px;margin:0 auto}
.rev-head h2{font-size:clamp(32px,4vw,52px);margin-top:16px}
.rev-head p{margin-top:16px;color:var(--muted)}
.rev-rows{margin-top:56px;display:flex;flex-direction:column;gap:24px;overflow:hidden}
.rev-row{overflow:hidden}
.rev-track{display:flex;width:max-content;gap:20px;animation:marquee 45s linear infinite}
.rev-row.reverse .rev-track{animation-direction:reverse;animation-duration:40s}
.review{width:340px;flex-shrink:0;padding:24px;border-radius:26px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card)}
.review .stars{color:#f5b400;font-size:14px}
.review p{margin-top:12px;color:rgba(26,24,48,.8)}
.review .who{margin-top:20px;display:flex;gap:12px;align-items:center}
.review .ava{width:40px;height:40px;border-radius:50%;background:var(--gradient-brand);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.review .nm{font-size:14px;font-weight:800}
.review .vf{font-size:10px;color:var(--brand)}

/* CTA */
.cta-wrap{padding:96px 0}
.cta-box{position:relative;overflow:hidden;border-radius:40px;background:var(--ink);color:#fff;padding:80px 24px;text-align:center}
.cta-box .blob{position:absolute;width:320px;height:320px;border-radius:50%;filter:blur(80px);opacity:.4}
.cta-box .blob.a{top:-80px;right:-80px;background:var(--brand)}
.cta-box .blob.b{bottom:-80px;left:-80px;background:var(--brand-2)}
.cta-box h2{font-size:clamp(36px,5vw,64px);margin-top:16px;position:relative}
.cta-box p{margin:20px auto 0;max-width:520px;color:rgba(255,255,255,.7);position:relative}
.cta-box .btn{margin-top:32px;position:relative}

/* Footer */
.footer{border-top:1px solid var(--border);padding:40px 0;font-size:14px;color:var(--muted)}
.footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer .brand .name{color:var(--fg)}
.footer .brand .sub{font-size:11px}