/*
Theme Name: Webappo Innovations
Theme URI: https://webappo.com
Author: Webappo (rebuilt with Claude Code)
Description: Clean, hand-coded WordPress theme matching webappo.com — websites & Android apps for small businesses. No builder/JS dependency. SEO-optimized.
Version: 2.0
License: GNU General Public License v2 or later
Text Domain: webappo
*/

/* ============================= TOKENS ============================= */
:root{
  --blue:#018ffd;
  --blue-hover:#0075cf;
  --blue-dark:#0a2a4a;
  --blue-soft:#e6f7ff;          /* live light-blue section bg */
  --navy:#0a2a4a;               /* live dark section bg #0A2A4A */
  --ink:#1d1e20;
  --ink-2:#171526;
  --green:#25d366;
  --white:#ffffff;
  --gray-50:#eceff3;            /* live light-gray section bg */
  --gray-100:#eef1f5;
  --gray-200:#dadce0;
  --text-soft:#54606b;
  --radius:16px;
  --radius-lg:20px;
  --shadow:0 12px 40px rgba(13,20,26,.08);
  --shadow-lg:0 24px 70px rgba(1,143,253,.20);
  --maxw:1200px;
  --head:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --body:'Inter','Open Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}

/* ============================= RESET ============================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);line-height:1.65;background:var(--white);-webkit-font-smoothing:antialiased}
/* Fluid-scale feel like the live Zyro site (desktop only) */
@media(min-width:1025px){body{zoom:1.05}}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;line-height:1.3;letter-spacing:normal;color:#1d1e20}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-block;padding:15px 32px;border-radius:50px;font-weight:600;font-size:16px;font-family:var(--body);transition:.25s;cursor:pointer;border:2px solid transparent;text-align:center}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-hover);border-color:var(--blue-hover);transform:translateY(-2px);box-shadow:0 12px 30px rgba(1,143,253,.4)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:#fff;color:var(--blue);border-color:#fff}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}
.section{padding:96px 0}
.eyebrow{color:var(--blue);font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:15px;display:block;margin-bottom:14px}
.section-head{text-align:center;max-width:none;margin:0 auto 60px}
.section-head h2{font-size:48px;font-weight:600;margin-bottom:16px}
.section-head p{color:var(--text-soft);font-size:18px}

/* ============================= HEADER ============================= */
.site-header{position:sticky;top:0;z-index:100;background:#ffffff;border-bottom:1px solid var(--gray-200)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:136px;gap:20px}
.logo{display:inline-flex;align-items:center}
.site-logo{height:76px;width:auto;max-width:282px;display:block}
.nav-menu{display:flex;gap:32px;align-items:center;margin-left:auto}
.nav-menu a{font-weight:400;font-size:16px;line-height:1.5;color:#0d141a;font-family:var(--body);transition:.2s;text-decoration:none}
.nav-menu a:hover{color:var(--blue)}
.nav-menu a:focus,.nav-menu a:focus-visible,.nav-menu a:active,.nav-menu a:visited{text-decoration:none;outline:none}
.header-cta{display:flex;gap:12px;align-items:center}
.nav-login{font-weight:600;font-size:15px;color:var(--blue)}
.nav-menu a.nav-cta{background:#176be0;color:#fff!important;padding:12px 28px;border-radius:50px;font-weight:600;font-size:15px;line-height:1.4;white-space:nowrap}
.nav-menu a.nav-cta:hover{background:#0f57c0}
.menu-toggle{display:none;background:none;border:none;font-size:28px;cursor:pointer;color:var(--navy);line-height:1}

/* ============================= HERO ============================= */
.hero{position:relative;min-height:420px;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:rgba(13,20,26,.45)}
.hero-inner{position:relative;z-index:1;padding:70px 0;max-width:1000px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(28px,3.4vw,48px);font-weight:700;color:#fff;line-height:1.2;margin-bottom:20px;background:rgba(255,255,255,.1);padding:clamp(14px,1.8vw,26px) clamp(18px,2.5vw,36px);white-space:nowrap;display:inline-block}
.hero p{font-size:18px;color:#fff;margin-bottom:30px;line-height:1.3}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ============================= TRUST INTRO ============================= */
.intro{text-align:center;padding:80px 0 40px}
.intro h2{font-size:40px;font-weight:800;margin-bottom:14px}
.intro p{color:var(--text-soft);font-size:19px;max-width:680px;margin:0 auto}

/* ============================= STATS ============================= */
.stats{padding:50px 0 96px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:900px;margin:0 auto}
.stat{text-align:center;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius);padding:36px 20px}
.stat .num{font-family:var(--head);font-size:54px;font-weight:800;color:var(--blue);line-height:1}
.stat .label{font-size:16px;color:var(--text-soft);margin-top:10px;font-weight:500}

/* ============================= SERVICES ============================= */
.services{background:var(--gray-50)}
/* Live layout: floating product images + text, no card boxes */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.svc-img{height:215px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:24px}
.svc-img img{max-height:215px;width:auto;max-width:100%}
.svc h3{font-size:20px;margin-bottom:12px;color:var(--navy)}
.svc p{color:var(--text-soft);font-size:15px;margin-bottom:12px}
.svc p.ideal2{color:var(--ink);font-size:14.5px}
.svc p.ideal2 strong{color:var(--navy)}
@media(max-width:980px){.svc-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.card-img{height:200px;overflow:hidden;background:var(--blue-soft)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:28px 26px 32px}
.card h3{font-size:22px;margin-bottom:12px}
.card p{color:var(--text-soft);font-size:15.5px}

/* ============================= GLOBAL PRESENCE ============================= */
.global-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.global-text h2{font-size:48px;font-weight:600;margin-bottom:18px}
.global-text p{color:var(--text-soft);font-size:17px;margin-bottom:16px}
.global-img img{border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* ============================= INTRO 2-COL ============================= */
.intro-block{padding:80px 0}
.intro-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:48px;align-items:center}
.intro-left h2{font-size:48px;font-weight:600;margin-bottom:16px}
.intro-left>p{color:var(--text-soft);font-size:17px;margin-bottom:28px}
.intro-stats{display:flex;gap:30px;margin-bottom:28px}
.istat .num{font-family:var(--head);font-size:40px;font-weight:800;color:var(--blue);line-height:1}
.istat .label{font-size:14px;color:var(--text-soft);margin-top:6px}
.intro-right img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;aspect-ratio:568/431;object-fit:cover}

/* ============================= REVIEWS ============================= */
.reviews-icon,.globe-icon{height:42px;width:auto;vertical-align:middle;margin-right:10px;display:inline-block}
.globe-icon{height:120px;margin-right:22px}
.reviews-icon{height:110px;margin-right:16px;margin-top:-28px;margin-bottom:-28px}
/* Tighter heading→subtitle→widget spacing in review sections (matches live) */
.reviews-block .section-head,.about-feedback .section-head{margin-bottom:22px}
.reviews-block .section-head h2,.about-feedback .section-head h2{margin-bottom:8px}
.map-head{display:flex;align-items:center;justify-content:center;gap:8px;font-size:48px;font-weight:600;flex-wrap:wrap}
.tcard .rtitle{font-size:17px;color:var(--navy);margin:4px 0 10px}
.reviews-invite{text-align:center;color:var(--text-soft);margin-top:34px;font-size:15px}
.reviews-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:16px 24px;margin-bottom:30px;flex-wrap:wrap}
.rb-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rb-title{font-family:var(--head);font-weight:700;font-size:18px;color:var(--navy)}
.rb-stars{color:#f5a623;font-size:18px;letter-spacing:1px}
.rb-count{color:var(--text-soft);font-size:14px}
.rb-btn{background:var(--blue);color:#fff;font-weight:600;font-size:14px;padding:10px 22px;border-radius:50px;transition:.2s}
.rb-btn:hover{background:var(--blue-hover)}

/* ============================= CREATING 2-COL ============================= */
.creating-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.creating-img img{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.creating-list .cline{padding:18px 0;border-bottom:1px solid var(--gray-200)}
.creating-list .cline:last-child{border-bottom:none}
.creating-list h4{font-size:20px;color:var(--navy);margin-bottom:6px}
.creating-list p{color:var(--text-soft);font-size:15px}

/* ============================= GET IN TOUCH ============================= */
.touch-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.touch-form .field{margin-bottom:18px}
.touch-form label{display:block;font-weight:600;font-size:14px;margin-bottom:7px;color:var(--navy)}
.touch-form input,.touch-form textarea{width:100%;padding:13px 16px;border:1.5px solid var(--gray-200);border-radius:10px;font-family:var(--body);font-size:15px}
.touch-form input:focus,.touch-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,143,253,.12)}
.touch-form textarea{min-height:110px;resize:vertical}
.touch-img img{border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* ============================= SERVICE LISTS ============================= */
.svclists-block{background:#ffffff}
.creating-block{background:#eceff3}
/* Outlined dark pill (live "Contact Us" under stats) */
.btn-outline-dark{background:transparent;color:var(--navy);border:1.5px solid var(--navy);padding:13px 34px;border-radius:50px;font-weight:600;font-size:15px;display:inline-block;transition:.2s}
.btn-outline-dark:hover{background:var(--navy);color:#fff}
.svclists-intro{text-align:center;color:#171a1e;font-weight:700;font-size:17px;margin:0 0 48px;background:#eef0f3;padding:17px 24px;border-radius:4px}
/* Masonry-style columns so short/long lists pack without blank gaps */
.svclists-grid{columns:3;column-gap:44px}
.svccol{break-inside:avoid;margin-bottom:36px}
.svccol h4{font-size:18px;color:var(--navy);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--blue);display:inline-block}
.svccol ul li{position:relative;padding:6px 0 6px 24px;color:var(--text-soft);font-size:14.5px}
.svccol ul li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:800}
.svccol p.wcu{color:var(--text-soft);font-size:14.5px;line-height:1.7;margin:0}
@media(max-width:900px){.intro-grid,.creating-grid,.touch-grid{grid-template-columns:1fr;gap:34px}.svclists-grid{columns:2}.intro-stats{flex-wrap:wrap;gap:20px}}
@media(max-width:600px){.svclists-grid{columns:1}.map-head{font-size:28px}}

/* ============================= MAP / GLOBAL ============================= */
.map-section{text-align:center;background:#e6f7ff}
.map-section h2{font-size:48px;font-weight:600;margin-bottom:14px}
.map-section .sub{color:var(--text-soft);font-size:18px;max-width:640px;margin:-28px auto 36px}
.map-wrap{max-width:980px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.map-wrap img{width:100%;display:block}

/* (Interactive map now rendered by the client's D3 widget in parts/interactive-map.php) */

/* Service "Ideal For" tag */
.card .ideal{margin-top:14px;padding-top:14px;border-top:1px dashed var(--gray-200);font-size:13.5px;color:var(--navy)}
.card .ideal b{color:var(--blue)}

/* ============================= AUDIENCE ============================= */
.audience{background:var(--gray-50)}
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.aud{background:#fff;border-radius:var(--radius);padding:34px 28px;text-align:center;box-shadow:var(--shadow)}
.aud .emoji{font-size:44px;margin-bottom:16px}
.aud h4{font-size:20px;margin-bottom:10px}
.aud p{color:var(--text-soft);font-size:15px}

/* ============================= TESTIMONIALS ============================= */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tcard{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:30px 28px}
.tcard .stars{color:#f5a623;font-size:18px;margin-bottom:14px;letter-spacing:2px}
.tcard p{color:var(--ink);font-size:15.5px;font-style:italic;margin-bottom:18px}
.tcard .who{display:flex;align-items:center;gap:12px}
.tcard .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#6fc0ff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--head)}
.tcard .who b{display:block;font-family:var(--head);font-size:15px}
.tcard .who span{font-size:13px;color:var(--text-soft)}

/* ============================= CTA BAND ============================= */
.cta-band{background:linear-gradient(120deg,var(--blue),#0a64c0);color:#fff;text-align:center;border-radius:var(--radius-lg);padding:72px 32px}
.cta-band h2{font-size:40px;font-weight:800;color:#fff;margin-bottom:16px}
.cta-band p{font-size:19px;opacity:.94;max-width:600px;margin:0 auto 30px}
.cta-band .btn{background:#fff;color:var(--blue);border-color:#fff}
.cta-band .btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.25)}

/* ============================= CITIES ============================= */
.cities{background:var(--navy);color:#fff;text-align:center}
.cities h2{color:#fff;font-size:38px;font-weight:800;margin-bottom:14px}
.cities .sub{color:#aebccb;font-size:18px;margin-bottom:40px}
.city-tags{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.city-tags span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:9px 20px;border-radius:50px;font-size:14px;color:#d4dde6}

/* ============================= FOOTER ============================= */
.site-footer{background:#0a2a4a;color:#c3d0de;padding:70px 0 40px}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;row-gap:34px}
.footer-brand{width:440px;max-width:100%}
.footer-contact{width:270px;max-width:100%}
.footer-links{width:210px;max-width:100%}
.footer-grid h4{color:#fff;font-size:20px;margin-bottom:20px;font-family:var(--head);font-weight:700}
.footer-grid a{color:#dbe4ee;font-size:15px;display:block;padding:7px 0;transition:.2s}
.footer-grid a:hover{color:#fff}
.footer-brand p{font-size:15px;max-width:330px;line-height:1.7;color:#dbe4ee}
.socials{display:flex;gap:24px;margin:24px 0}
.socials a{display:inline-flex;transition:.2s}
.socials a img{width:48px;height:48px;object-fit:contain;display:block}
.socials a:hover{transform:translateY(-2px)}
.footer-brand p.footer-copy{font-size:14px;line-height:1.7;color:#cdd8e4;max-width:440px;margin-top:8px}
.footer-contact p{font-size:15px;margin-bottom:16px;color:#dbe4ee}
.footer-contact p a{color:#dbe4ee;display:inline;padding:0}
.footer-contact p a:hover{color:#fff}
.footer-links a{padding:3px 0}
.footer-links .ul-gap{margin-top:18px}
/* Footer action buttons — live: rounded rectangle, Send Us Message blue #176be0, Payments green #00bd13 */
.footer-grid a.btn-foot{display:block;width:250px;max-width:100%;text-align:center;color:#fff!important;font-weight:600;font-size:16px;padding:15px 20px;border-radius:8px;margin-top:16px;transition:.2s}
.footer-grid a.btn-foot-blue{background:#176be0}
.footer-grid a.btn-foot-blue:hover{background:#0f57c0;transform:translateY(-1px)}
.footer-grid a.btn-foot-green{background:#00bd13}
.footer-grid a.btn-foot-green:hover{background:#04a512;transform:translateY(-1px)}


/* ============================= ABOUT PAGE ============================= */
.about-stats-wrap{display:flex;align-items:center;justify-content:flex-end}
.about-stats-box{background:#176be0;border-radius:10px;padding:56px 44px;display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:center;color:#fff;width:100%;max-width:460px}
.about-stats-box .num{font-family:var(--head);font-size:46px;font-weight:800;line-height:1;color:#fff}
.about-stats-box .label{font-size:15px;margin-top:10px;color:#fff;opacity:.95}
.about-feedback{background:#eceff3}
.feature-invite{margin-top:36px;color:var(--ink);font-size:16px}
.feature-invite strong{color:#171526}
@media(max-width:900px){.about-stats-wrap{justify-content:center}}

/* ============================= AFFILIATE PAGE (single continuous flow) ============================= */
.aff-page{background:linear-gradient(180deg,#f5faff 0%,#ffffff 30%,#f8fbff 100%);padding:80px 0 100px}
/* Fluid width — spreads on large screens instead of the boxed 1200px column */
.aff-page .container{max-width:min(1560px,94vw)}
.aff-intro{max-width:760px;margin:0 auto;text-align:center}
.aff-intro h2{font-size:48px;margin-bottom:16px}
.aff-h{text-align:center;font-size:48px;font-weight:600;color:#1d1e20;margin:80px 0 30px}
.aff-who{text-align:center;color:var(--text-soft);font-size:16px;max-width:640px;margin:-14px auto 26px}
.aff-register{text-align:center;margin-bottom:0}
.aff-blue{color:#176be0}
.btn.aff-btn-green{background:#00bd13;color:#fff;box-shadow:0 8px 24px rgba(0,189,19,.3)}
.btn.aff-btn-green:hover{background:#04a512;transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,189,19,.4)}
.aff-green{color:#16a34a}
.aff-lead{color:var(--text-soft);font-size:18px;margin-bottom:28px}
.aff-note{color:#5f6a75;font-size:14px;margin-top:16px}
.affc{margin:0 auto 26px;max-width:420px}
.affc-dd{position:relative;display:block;background:#fff;border:1.5px solid var(--blue);border-radius:12px;padding:12px 18px;cursor:pointer;font-size:15.5px;color:#0a2a4a;font-weight:600;text-align:left;user-select:none}
.affc-caret{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--blue)}
.affc-list{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--gray-200);border-radius:12px;box-shadow:0 14px 40px rgba(13,20,26,.16);z-index:30;max-height:280px;overflow:auto;text-align:left}
.affc-item{padding:11px 18px;font-size:15px;font-weight:500;color:#1d1e20;cursor:pointer}
.affc-item:hover{background:#eaf4ff}
.affc-amount{margin-top:14px;color:var(--blue);font-weight:700;font-size:18px}
.aff-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.affb{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow)}
.affb-ic{font-size:26px;line-height:1}
.affb p{color:var(--text-soft);font-size:15px;margin:0}
.affb p strong{color:var(--navy);font-family:var(--head);font-weight:600;font-size:18px}
.affb-num{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:17px}
.aff-how3{grid-template-columns:repeat(3,1fr)}
.aff-how4{grid-template-columns:repeat(4,1fr)}
/* Keep step titles on one line; font scales down before wrapping */
.aff-how3 .affb p strong,.aff-how4 .affb p strong{white-space:nowrap;font-size:clamp(13px,1.15vw,17px)}
@media(max-width:700px){.aff-how3 .affb p strong,.aff-how4 .affb p strong{white-space:normal;font-size:17px}}
.aff-share-label{font-weight:700;color:#1d1e20;text-align:center;margin:48px 0 16px;font-size:18px}
.aff-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.aff-pills span{background:#eaf4ff;border:1px solid #d5e8fb;padding:8px 16px;border-radius:50px;font-size:14px;color:#0a2a4a;font-weight:500}
.aff-tagline{margin-top:18px;font-size:16px;color:#176be0;font-weight:600;text-align:center}
@media(max-width:900px){.aff-benefits{grid-template-columns:1fr 1fr}.aff-benefits.aff-how3{grid-template-columns:1fr}}
@media(max-width:600px){.aff-benefits{grid-template-columns:1fr}.aff-intro h2{font-size:30px}.aff-h{font-size:30px;margin:56px 0 24px}}

/* ============================= LEGAL PAGES ============================= */
/* Plain white document layout (Disclaimer, Privacy Policy, etc.) — like live */
.legal-doc{background:#fff;padding:70px 0 100px}
.legal-doc .container{max-width:880px}
.legal-doc h1{font-size:40px;font-weight:800;margin-bottom:44px;color:#171526}
.legal-doc h2{font-family:var(--body);font-size:17px;font-weight:700;color:#171a1e;margin:32px 0 10px;letter-spacing:0}
.legal-doc p{color:#3d4750;font-size:16px;line-height:1.75;margin-bottom:13px}
.legal-doc p strong{color:#171a1e}
.legal-doc a{color:var(--blue);text-decoration:underline}
.legal-doc a:hover{color:var(--blue-hover)}

/* Terms & Conditions hub — 3-column grid of gray boxes, like live */
.legal-hub{background:#fff;padding:80px 0 110px;text-align:center}
.legal-hub h1{font-size:54px;font-weight:800;margin-bottom:16px;color:#171526}
.lh-sub{color:var(--ink);font-size:18px;margin-bottom:64px}
.lh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 72px;max-width:1160px;margin:0 auto}
.lh-box{display:flex;align-items:center;justify-content:center;min-height:90px;background:#eef1f4;padding:24px 20px;font-family:var(--head);font-weight:700;font-size:19px;color:var(--ink-2);border-radius:2px;transition:.2s}
.lh-box:hover{background:#e2e8ee;transform:translateY(-2px)}
@media(max-width:900px){.lh-grid{grid-template-columns:1fr 1fr;gap:30px}.legal-hub h1{font-size:38px}}
@media(max-width:600px){.lh-grid{grid-template-columns:1fr}.legal-doc h1{font-size:30px}}

/* ============================= INNER PAGES ============================= */
.page-hero{position:relative;background:url(images/creating.jpg) center/cover no-repeat;color:#fff;padding:96px 0;text-align:center}
.page-hero::before{content:"";position:absolute;inset:0;background:rgba(13,20,26,.45)}
.page-hero>.container{position:relative;z-index:1}
.page-hero h1{color:#fff;font-size:48px;font-weight:600}
.page-hero p{color:rgba(255,255,255,.9);font-size:18px;margin-top:14px}
/* Affiliate hero: split banner — content left on navy gradient, happy person with cash right */
/* Referral banner — full-width image, text on its built-in left zone.
   Height is capped so the banner is always WIDER than the image's aspect:
   cover then only crops top/bottom, never the left text-safe zone. */
.aff-banner{position:relative;background:#e3f2fd;height:min(328px,45vw);display:flex;align-items:center;overflow:hidden}
.afb-bg{position:absolute;right:0;top:0;height:100%;aspect-ratio:1376/768;background:url(images/aff-banner-woman.png) center/contain no-repeat;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
.afb-grid{display:block;width:100%;position:relative;z-index:1}
.afb-text{width:44%;min-width:300px}
.afb-img{display:none}
.aff-banner .afb-text h1{font-size:16px;margin-bottom:8px}
.aff-banner .afb-headline{font-size:clamp(20px,2.9vw,32px);margin-bottom:10px;white-space:nowrap}
.aff-banner .afb-sub{font-size:clamp(11px,1.38vw,15px);line-height:1.5;margin-bottom:16px;white-space:nowrap;max-width:none}
.aff-banner .afb-cta{padding:11px 32px;font-size:15px}
.afb-text h1{font-size:20px;font-weight:600;color:#3d4750;margin-bottom:14px;letter-spacing:.01em}
.afb-headline{font-family:var(--head);font-size:clamp(28px,2.9vw,42px);font-weight:700;color:#0a2a4a;line-height:1.25;margin-bottom:14px}
.afb-amount{color:#16a34a;font-weight:800}
.afb-sub{color:#3d4750;font-size:16.5px;line-height:1.6;margin-bottom:26px;max-width:480px}
.afb-cta{padding:14px 42px;font-size:16px}
.afb-tnc{position:absolute;left:22px;bottom:10px;font-size:12px;color:#3d4750;z-index:1}
@media(max-width:1024px){
  .aff-banner{background:#e3f2fd;height:auto;display:block;padding:30px 0 0}
  .afb-bg{display:none}
  .afb-text{width:100%;min-width:0;text-align:center;padding-bottom:14px}
  .aff-banner .afb-headline{white-space:normal;font-size:clamp(22px,5.8vw,32px)}
  .aff-banner .afb-sub{white-space:normal;font-size:14.5px;max-width:480px}
  .afb-sub{margin-left:auto;margin-right:auto}
  .afb-img{display:block;max-width:640px;margin:0 auto}
  .afb-img img{width:100%;height:auto;display:block}
  .afb-tnc{position:static;text-align:center;padding:6px 0}
}

/* Reviews page: light-blue heading band (matches live) */
.reviews-band{background:#e3f2fd;padding:44px 0}
.rvb-inner{display:flex;align-items:center;justify-content:center;gap:38px}
.rvb-icon{height:175px;width:auto}
.rvb-text h1{font-size:56px;font-weight:600;color:#1d1e20;margin-bottom:8px}
.rvb-text p{color:#3d4750;font-size:16px}
.reviews-grid-wrap{background:#fff;padding:56px 0 70px}
@media(max-width:760px){.rvb-inner{flex-direction:column;text-align:center;gap:16px}.rvb-icon{height:100px}.rvb-text h1{font-size:32px}}
.page-body{padding:70px 0}
.page-body .container{max-width:840px}
.page-body h2{font-size:28px;margin:32px 0 14px}
.page-body h3{font-size:21px;margin:24px 0 10px}
.page-body p{color:var(--text-soft);margin-bottom:16px}
.page-body ul{margin:0 0 18px 0}
.page-body ul li{position:relative;padding:7px 0 7px 28px;color:var(--text-soft)}
.page-body ul li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:800}

/* FAQ accordion */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--gray-200);border-radius:12px;margin-bottom:14px;padding:0 22px;transition:.2s}
.faq details[open]{box-shadow:var(--shadow);border-color:var(--blue)}
.faq summary{font-family:var(--head);font-weight:600;font-size:17px;color:var(--navy);padding:20px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:24px;font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--text-soft);padding:0 0 20px;margin:0}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{text-align:center;padding:30px 24px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius)}
.step .n{width:50px;height:50px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--head);font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.step h4{font-size:19px;margin-bottom:8px}
.step p{color:var(--text-soft);font-size:14.5px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;transition:.3s}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.post-img{height:180px;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover}
.post-body{padding:22px 24px 26px}
.post .tag{color:var(--blue);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.post h3{font-size:19px;margin:8px 0 10px}
.post p{color:var(--text-soft);font-size:14.5px}
.post-img{display:block}
.post h3 a{color:inherit}
.post h3 a:hover{color:var(--blue)}
.post-more{color:var(--blue);font-weight:600;font-size:14px;display:inline-block;margin-top:10px}
.blog-empty{text-align:center;color:var(--text-soft);font-size:17px}
.blog-pages{display:flex;gap:8px;justify-content:center;margin-top:44px}
.blog-pages .page-numbers{padding:9px 16px;border:1px solid var(--gray-200);border-radius:8px;font-weight:600;color:#0a2a4a}
.blog-pages .page-numbers.current{background:var(--blue);color:#fff;border-color:var(--blue)}
@media(max-width:980px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.posts{grid-template-columns:1fr}}

/* Single blog post */
.blog-single{background:#fff;padding:70px 0 100px}
.blog-single .container{max-width:880px}
.bs-head{text-align:center;margin-bottom:30px}
.bs-head .tag{color:var(--blue);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.bs-head h1{font-size:44px;margin:10px 0 12px}
.bs-meta{color:var(--text-soft);font-size:15px}
.bs-img{border-radius:var(--radius);overflow:hidden;margin-bottom:34px}
.bs-img img{width:100%;height:auto}
.bs-content{font-size:17px;color:#2a333c;line-height:1.75}
.bs-content h2{font-size:30px;margin:38px 0 14px}
.bs-content h3{font-size:23px;margin:30px 0 12px}
.bs-content p{margin-bottom:18px}
.bs-content ul,.bs-content ol{margin:0 0 18px 22px}
.bs-content ul{list-style:disc}
.bs-content ol{list-style:decimal}
.bs-content li{margin-bottom:8px}
.bs-content img{border-radius:12px}
.bs-back{margin-top:40px}
.bs-back a{color:var(--blue);font-weight:600}
@media(max-width:600px){.bs-head h1{font-size:30px}}

/* ============================= CONTACT PAGE (live layout) ============================= */
.page-hero.hero-contact{background-image:url(images/contact-hero.jpg)}
.contact2-form-wrap{background:#fff;padding:56px 0 70px}
.contact2{max-width:1000px;margin:0 auto;padding:0 24px}
.c2-label{display:block;font-size:15px;color:#1d1e20;margin:20px 0 8px;font-weight:400}
.c2-input{width:100%;background:#ececec;border:none;border-radius:4px;padding:13px 14px;font-family:var(--body);font-size:15px;color:#1d1e20}
.c2-input::placeholder{color:#9aa0a6}
.c2-input:focus{outline:2px solid rgba(1,143,253,.35)}
.c2-textarea{min-height:110px;resize:vertical}
.c2-radios label{display:block;font-size:15px;color:#3d4750;margin:4px 0;font-weight:400;cursor:pointer}
.c2-radios input{margin-right:8px}
.c2-consent{display:block;font-size:14.5px;color:#5f6a75;line-height:1.6;font-weight:400;cursor:pointer}
.c2-consent input{margin-right:8px}
.c2-submit{text-align:center;margin-top:30px}
.contact2-strip{background:#e8edf2;padding:44px 0}
.contact2-strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.contact2-strip h4{font-size:18px;color:#0a2a4a;margin-bottom:12px}
.contact2-strip p{color:#1d1e20;font-size:15px;margin:4px 0}
.contact2-strip a{color:#1d1e20}
.contact2-maps{background:#fff;padding:70px 0 80px;text-align:center}
.c2-address{color:#1d1e20;font-size:16px;line-height:1.6;margin-bottom:22px}
.c2-address strong{color:#171526}
.c2-address-2{margin-top:70px}
.c2-map iframe{width:100%;max-width:1000px;height:225px;border:0;display:block;margin:0 auto}
@media(max-width:760px){.contact2-strip-grid{grid-template-columns:1fr}.contact2-head h1{font-size:38px}}

/* Contact form */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info h3{font-size:24px;margin-bottom:16px}
.contact-info p{color:var(--text-soft);margin-bottom:14px}
.contact-info .ci{display:flex;gap:12px;align-items:center;margin-bottom:14px;font-size:16px}
.contact-info .ci .ic{width:42px;height:42px;border-radius:10px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-size:20px}
.cform{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.cform .field{margin-bottom:18px}
.cform label{display:block;font-weight:600;font-size:14px;margin-bottom:7px;color:var(--navy)}
.cform input,.cform textarea{width:100%;padding:13px 16px;border:1.5px solid var(--gray-200);border-radius:10px;font-family:var(--body);font-size:15px;transition:.2s}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,143,253,.12)}
.cform textarea{min-height:120px;resize:vertical}
.cform .btn-primary{width:100%;cursor:pointer}
.form-banner{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-weight:600}
.form-banner.ok{background:#e7f8ee;color:#16794c;border:1px solid #b7e6cb}
.form-banner.err{background:#fdeaea;color:#c0392b;border:1px solid #f4c2c2}

/* ============================= RESPONSIVE ============================= */
/* Compact header for narrow desktops (prevents nav overflow with zoom) */
@media(max-width:1200px) and (min-width:841px){
  .nav-menu{gap:16px}
  .nav-menu a{font-size:14px}
  .nav-menu a.nav-cta{padding:10px 18px;font-size:14px}
  .site-logo{height:58px;max-width:215px}
}
@media(max-width:980px){
  .cards,.aud-grid,.tcards{grid-template-columns:1fr 1fr}
  .global-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
  .footer-grid{justify-content:flex-start;gap:40px 60px}
  .footer-brand{width:100%}
  .hero h1{font-size:44px}
}
/* Hamburger from 840px down: full nav stops fitting below ~840 */
@media(max-width:840px){
  .header-inner{height:73px}
  .site-logo{height:47px;max-width:175px}
  .nav-menu{display:none;position:absolute;top:73px;left:0;right:0;background:#fff;flex-direction:column;padding:22px;gap:16px;border-bottom:1px solid var(--gray-200);margin:0}
  .nav-menu.open{display:flex}
  .menu-toggle{display:block}
}
@media(max-width:760px){
  .section{padding:64px 0}
  .cards,.aud-grid,.tcards,.stats-grid{grid-template-columns:1fr}
  .footer-grid{flex-direction:column;gap:30px}
  .footer-brand,.footer-contact,.footer-links{width:100%}
  .footer-contact .btn-foot{width:100%}
  .section-head h2,.intro-left h2,.global-text h2,.cta-band h2,.cities h2{font-size:30px}
  .hero h1{font-size:28px;white-space:normal;display:block}
  .hero p{font-size:18px}
}