/*
Theme Name: Designed By Stu
Theme URI: https://designedbystu.com
Author: Stuart Cookney
Author URI: https://designedbystu.com
Description: Freelance website design, Stoke on Trent
Version: 3.8
*/

/* === TOKENS === */
:root { --blue:#1A4CFF; --blue-dk:#0F34CC; --orange:#FF5500; --green:#00C472; --dark:#0C0C0C; --dark-2:#161616; --dark-3:#1E1E1E; --light:#F5F5F2; --light-2:#EBEBE8; --white:#FFFFFF; --mid:#5f5f5f; --border-light:rgba(0,0,0,0.07); --border-dark:rgba(255,255,255,0.08); --font-head:'Bricolage Grotesque',sans-serif; --font-body:'DM Sans',sans-serif; --ease:cubic-bezier(0.16,1,0.3,1); --radius:4px; --radius-lg:12px; --promo-h:38px; }
@media (max-width:600px){ :root{ --promo-h:36px; } }

/* === RESET === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--dark); background:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* === UTILITIES === */
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 40px; }
.section-pad { margin:80px 0; }
.tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--orange); }
.tag::before { content:''; display:block; width:20px; height:2px; background:var(--orange); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:0.03em; padding:16px 32px; border-radius:var(--radius); transition:all 0.25s var(--ease); cursor:pointer; border:2px solid transparent; }
.btn .arrow { transition:transform 0.25s var(--ease); }
.btn:hover .arrow { transform:translateX(4px); }
.btn-primary { background:var(--orange); color:var(--white); }
.btn-primary:hover { background:#e04d00; transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--white); border-color:rgba(255,255,255,0.3); }
.btn-ghost:hover { border-color:var(--white); background:rgba(255,255,255,0.06); }
.btn-ghost-dark { background:transparent; color:var(--dark); border-color:rgba(0,0,0,0.28); }
.btn-ghost-dark:hover { background:var(--dark); color:var(--white); border-color:var(--dark); transform:translateY(-2px); }
.btn-dark { background:var(--dark); color:var(--white); }
.btn-dark:hover { background:var(--dark-3); transform:translateY(-2px); }
.btn-blue { background:var(--blue); color:var(--white); }
.btn-blue:hover { background:var(--blue-dk); transform:translateY(-2px); }
.btn-white { background:var(--white); color:var(--blue); font-size:14px; font-weight:700; padding:18px 36px; }
.btn-white:hover { background:var(--light); transform:translateY(-2px); }
.btn-outline-dark { background:transparent; color:var(--dark); border-color:rgba(0,0,0,0.2); }
.btn-outline-dark:hover { border-color:var(--dark); background:rgba(0,0,0,0.04); }

/* Section headings */
.section-title { font-family:var(--font-head); font-size:clamp(36px,4.5vw,62px); font-weight:800; line-height:1.02; letter-spacing:-0.035em; color:var(--dark); padding-bottom:20px; }
.section-title .accent { color:var(--blue); }
.section-title.light { color:var(--white); }
.section-header,.hp-section-header { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:64px; }
.section-desc { font-family:var(--font-body); font-size:16px; color:var(--mid); line-height:1.7; max-width:800px; margin-right:auto; }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(32px); transition:opacity 0.7s var(--ease),transform 0.7s var(--ease); }
.reveal.in-view { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* Page hero */
.page-hero { background:var(--dark); padding:160px 0 80px; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 80% 50%,rgba(26,76,255,0.10) 0%,transparent 70%); pointer-events:none; }
.page-hero-inner { position:relative; z-index:2; }
.page-hero .tag { margin-bottom:20px; }
.page-hero-title { font-family:var(--font-head); font-size:clamp(44px,6vw,88px); font-weight:800; line-height:0.96; letter-spacing:-0.04em; color:var(--white); margin-bottom:24px; }
.page-hero-title .accent { color:var(--blue); }
.page-hero-sub { font-family:var(--font-body); font-size:clamp(16px,1.5vw,18px); color:rgba(255,255,255,0.5); line-height:1.65; max-width:520px; }

/* === PROMO / CALLOUT BAR === */
.promo-bar { position:fixed; top:0; left:0; right:0; z-index:110; background:linear-gradient(90deg,var(--green) 0%,var(--blue) 52%,var(--orange) 110%); color:var(--white); }
.promo-bar-inner { display:flex; align-items:center; justify-content:center; gap:12px; padding:9px 20px; text-align:center; font-family:var(--font-body); font-size:13.5px; font-weight:500; letter-spacing:0.01em; }
.promo-bar .promo-pulse { width:8px; height:8px; border-radius:50%; background:#fff; flex:none; box-shadow:0 0 0 0 rgba(255,255,255,0.8); animation:promoPulse 2s infinite; }
.promo-bar strong { font-weight:800; }
.promo-bar a.promo-link { color:#fff; display:inline-flex; align-items:center; gap:5px; font-weight:700; border-bottom:1.5px solid rgba(255,255,255,0.6); padding-bottom:1px; white-space:nowrap; }
.promo-bar a.promo-link:hover { border-color:#fff; }
.promo-bar a.promo-link svg { width:13px; height:13px; }
@keyframes promoPulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,0.7);} 70%{box-shadow:0 0 0 9px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }
@media (max-width:600px){ .promo-bar-inner{ font-size:10px; gap:8px; padding:8px 14px; } .promo-bar .promo-hide-sm{ display:none; } }

/* === NAVIGATION === */
.site-nav { position:fixed; top:var(--promo-h,38px); left:0; right:0; z-index:100; padding:24px 0; transition:padding 0.3s var(--ease),background 0.3s var(--ease),box-shadow 0.3s var(--ease); }
.site-nav.scrolled { padding:14px 0; background:rgba(12,12,12,0.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(255,255,255,0.06); }
.site-nav.nav-light.scrolled { background:rgba(255,255,255,0.96); box-shadow:0 1px 0 rgba(0,0,0,0.08); }
.site-nav.nav-light .nav-wordmark { color:var(--dark); }
.site-nav.nav-light .nav-links a { color:rgba(0,0,0,0.55); }
.site-nav.nav-light .nav-links a:hover { color:var(--dark); }
.site-nav.nav-light .nav-toggle span { background:var(--dark); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-wordmark { font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--white); letter-spacing:-0.02em; }
.nav-wordmark span { color:var(--orange); }
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-links a { font-family:var(--font-body); font-size:13px; font-weight:500; color:rgba(255,255,255,0.65); letter-spacing:0.02em; transition:color 0.2s; }
.nav-links a:hover,.nav-links a.active { color:var(--white); }
.nav-links a.active { font-weight:600; }
.nav-cta { background:var(--orange) !important; color:var(--white) !important; padding:10px 22px; border-radius:var(--radius); font-weight:600 !important; font-size:13px !important; transition:background 0.2s,transform 0.2s !important; }
.nav-cta:hover { background:#e04d00 !important; transform:translateY(-1px); }
/* Services dropdown (desktop) */
.nav-dropdown-wrap { position:relative; }
.nav-dropdown-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer; background:none; border:0; padding:0; font-family:var(--font-body); font-size:13px; font-weight:500; color:rgba(255,255,255,0.65); letter-spacing:0.02em; transition:color 0.2s; }
.nav-dropdown-toggle:hover, .nav-dropdown-wrap:focus-within .nav-dropdown-toggle, .nav-dropdown-toggle.active { color:var(--white); }
.nav-dropdown-toggle.active { font-weight:600; }
.site-nav.nav-light .nav-dropdown-toggle { color:rgba(0,0,0,0.55); }
.site-nav.nav-light .nav-dropdown-toggle:hover, .site-nav.nav-light .nav-dropdown-wrap:focus-within .nav-dropdown-toggle, .site-nav.nav-light .nav-dropdown-toggle.active { color:var(--dark); }
.nav-caret { width:9px; height:9px; transition:transform 0.2s; }
.nav-dropdown-wrap:hover .nav-caret, .nav-dropdown-wrap:focus-within .nav-caret { transform:rotate(180deg); }
.nav-dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px); min-width:236px; background:var(--dark-2); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg); padding:8px; box-shadow:0 20px 44px rgba(0,0,0,0.35); display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transition:opacity 0.18s,transform 0.18s; z-index:120; }
.nav-dropdown::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; }
.nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown-wrap:focus-within .nav-dropdown { opacity:1; visibility:visible; transform:translateX(-50%) translateY(10px); }
.nav-dropdown a { display:block; padding:10px 14px; border-radius:var(--radius); font-family:var(--font-body); font-size:13px; font-weight:500; color:rgba(255,255,255,0.7) !important; white-space:nowrap; transition:background 0.15s,color 0.15s; }
.nav-dropdown a:hover, .nav-dropdown a.active { background:rgba(255,255,255,0.06); color:var(--white) !important; }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--white); transition:all 0.3s; }
.mobile-nav-overlay { display:none; position:fixed; inset:0; background:var(--dark); z-index:99; padding:100px 40px 40px; flex-direction:column; gap:8px; }
.mobile-nav-overlay.open { display:flex; }
.mobile-nav-overlay a { font-family:var(--font-head); font-size:32px; font-weight:800; color:rgba(255,255,255,0.5); letter-spacing:-0.03em; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.06); transition:color 0.2s; }
.mobile-nav-overlay a:hover { color:var(--white); }
.mobile-nav-overlay .mob-cta { color:var(--orange) !important; border-bottom:none; margin-top:16px; }
.mob-nav-label { font-family:var(--font-head); font-size:32px; font-weight:800; color:rgba(255,255,255,0.5); letter-spacing:-0.03em; padding:12px 0 4px; }
.mobile-nav-overlay .mob-nav-sub { font-size:20px; font-weight:600; padding:8px 0 8px 18px; border-bottom:none; color:rgba(255,255,255,0.4); }

/* === FOOTER === */
.site-footer { background:var(--dark-2); padding:72px 0 40px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; margin-bottom:60px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.06); }
.footer-brand .wordmark { font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--white); letter-spacing:-0.02em; margin-bottom:16px; }
.footer-brand .wordmark span { color:var(--orange); }
.footer-brand p { font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,0.62); line-height:1.7; max-width:380px; }
.footer-cta { margin-top:26px; }
.footer-col .footer-col-title { font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--white); letter-spacing:0.06em; text-transform:uppercase; margin:0 0 20px; line-height:1.2; }
.footer-col ul { display:flex; flex-direction:column; gap:12px; }
.footer-col ul li a { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,0.62); transition:color 0.2s; }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-bottom p { font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,0.5); }
.footer-bottom a { color:rgba(255,255,255,0.4); transition:color 0.2s; }
.footer-bottom a:hover { color:rgba(255,255,255,0.8); }

/* === SHARED COMPONENTS === */

/* Stats */
.stats { background:var(--white); border-bottom:1px solid var(--border-light); }
.stats-inner { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { padding:48px 32px; border-right:1px solid var(--border-light); }
.stat-item:last-child { border-right:none; }
.stat-number { font-family:var(--font-head); font-size:clamp(36px,4vw,56px); font-weight:800; line-height:1; letter-spacing:-0.04em; color:var(--dark); margin-bottom:8px; }
.stat-number span { color:var(--blue); }
.stat-label { font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--mid); }

/* Work cards */
.work-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-light); display:flex; flex-direction:column; transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease); }
.work-card:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,0.10); }
.work-img { width:100%; background:var(--light); position:relative; overflow:hidden; }
.work-img img { width:100%; height:auto; display:block; }
.work-img-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,#ebebeb 0%,#dedede 100%); }
.work-img-placeholder svg { opacity:0.25; }
.work-img-placeholder span { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--mid); }
.work-body { padding:28px 28px 24px; flex:1; display:flex; flex-direction:column; }
.work-client { font-family:var(--font-head); font-size:18px; font-weight:700; color:var(--dark); margin-bottom:6px; letter-spacing:-0.02em; }
.work-type { font-size:12px; color:var(--mid); margin-bottom:16px; }
.work-link { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--blue); letter-spacing:0.02em; margin-bottom:20px; transition:gap 0.2s var(--ease); }
.work-link:hover { gap:10px; }
.work-site-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--blue); margin-top:16px; transition:gap 0.2s; }
.work-site-link:hover { gap:10px; }
.work-review { margin-top:auto; padding-top:20px; border-top:1px solid rgba(0,0,0,0.06); }
.work-review-text { font-family:var(--font-body); font-size:13px; line-height:1.65; color:var(--mid); font-style:italic; margin-bottom:12px; }
.work-review-author { font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--dark); }
.work-stars { display:flex; gap:3px; color:#FFBA00; margin-bottom:10px; }
.work-footer-note { margin-top:48px; text-align:center; }
.work-footer-note p { font-size:14px; color:var(--mid); margin-bottom:20px; }

/* CTA band */
.cta-band { background:var(--blue); padding:100px 0; position:relative; overflow:hidden; }
.cta-band::before { content:'STU'; position:absolute; right:-40px; top:50%; transform:translateY(-50%); font-family:var(--font-head); font-size:clamp(160px,22vw,320px); font-weight:800; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.06); pointer-events:none; line-height:1; letter-spacing:-0.06em; }
.cta-inner { display:grid; grid-template-columns:1fr auto; align-items:center; gap:60px; }
.cta-headline { font-family:var(--font-head); font-size:clamp(36px,5vw,68px); font-weight:800; line-height:1.0; letter-spacing:-0.04em; color:var(--white); }
.cta-headline em { font-style:normal; opacity:0.55; }
.cta-actions,.cta-actions-col { display:flex; flex-direction:column; gap:14px; align-items:flex-start; flex-shrink:0; }
.cta-contact-line { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,0.55); }
.cta-contact-line a { color:rgba(255,255,255,0.85); border-bottom:1px solid rgba(255,255,255,0.3); transition:color 0.2s,border-color 0.2s; }
.cta-contact-line a:hover { color:var(--white); border-color:var(--white); }

/* Packages cards (shared) */
.packages-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.pkg-card { border-radius:var(--radius-lg); padding:44px 40px; display:flex; flex-direction:column; position:relative; transition:transform 0.3s var(--ease); }
.pkg-card:hover { transform:translateY(-6px); }
.pkg-card.gold { background:var(--white); border:1px solid rgba(0,0,0,0.09); }
.pkg-card.platinum { background:var(--blue); color:var(--white); }
.pkg-card.diamond { background:var(--dark); color:var(--white); }
.pkg-badge { position:absolute; top:-14px; left:40px; background:var(--orange); color:var(--white); font-family:var(--font-body); font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:5px 14px; border-radius:20px; }
.pkg-tier { font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:20px; opacity:0.6; }
.pkg-price { font-family:var(--font-head); font-size:52px; font-weight:800; line-height:1; letter-spacing:-0.04em; margin-bottom:6px; }
.pkg-price-period { font-family:var(--font-body); font-size:14px; font-weight:400; opacity:0.6; margin-bottom:28px; }
.pkg-divider { height:1px; background:currentColor; opacity:0.1; margin-bottom:28px; }
.pkg-tagline { font-family:var(--font-body); font-size:15px; font-weight:500; line-height:1.5; margin-bottom:24px; }
.pkg-features { flex:1; display:flex; flex-direction:column; gap:12px; margin-bottom:36px; }
.pkg-feature { display:flex; align-items:flex-start; gap:12px; font-family:var(--font-body); font-size:14px; line-height:1.45; }
.pkg-feature-icon { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.pkg-card.platinum .pkg-feature-icon path,.pkg-card.diamond .pkg-feature-icon path { stroke:rgba(255,255,255,0.7); }
.pkg-card.gold .pkg-feature-icon path { stroke:var(--green); }
.pkg-cta { display:block; width:100%; text-align:center; padding:16px; border-radius:var(--radius); font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:0.02em; transition:all 0.25s var(--ease); cursor:pointer; }
.pkg-card.gold .pkg-cta { background:var(--dark); color:var(--white); }
.pkg-card.gold .pkg-cta:hover { background:var(--blue); }
.pkg-card.platinum .pkg-cta { background:var(--white); color:var(--blue); }
.pkg-card.platinum .pkg-cta:hover { background:var(--light); }
.pkg-card.diamond .pkg-cta { background:var(--orange); color:var(--white); }
.pkg-card.diamond .pkg-cta:hover { background:#e04d00; }
.packages-addons { margin-top:40px; padding:28px 36px; background:var(--white); border-radius:var(--radius-lg); border:1px solid rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.addons-text { font-size:15px; }
.addons-pills { display:flex; gap:10px; flex-wrap:wrap; }
.addon-pill { background:var(--light); border:1px solid rgba(0,0,0,0.08); border-radius:20px; padding:8px 18px; font-size:13px; font-weight:600; }
.addon-pill span { color:var(--mid); font-weight:400; }

/* === FORMS === */
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-label { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--dark); }
.form-input,.form-select,.form-textarea { font-family:var(--font-body); font-size:15px; font-weight:400; color:var(--dark); background:var(--white); border:1.5px solid rgba(0,0,0,0.14); border-radius:var(--radius); padding:14px 18px; transition:border-color 0.2s,box-shadow 0.2s; outline:none; width:100%; appearance:none; -webkit-appearance:none; }
.form-input::placeholder,.form-textarea::placeholder { color:rgba(0,0,0,0.3); }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,76,255,0.1); }
.form-textarea { resize:vertical; min-height:140px; }
.form-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; padding-right:44px; cursor:pointer; }
.form-submit { background:var(--orange); color:var(--white); font-family:var(--font-body); font-size:15px; font-weight:600; padding:18px 40px; border:none; border-radius:var(--radius); cursor:pointer; transition:background 0.2s,transform 0.2s; display:inline-flex; align-items:center; gap:10px; }
.form-submit:hover { background:#e04d00; transform:translateY(-2px); }
.form-submit .arrow { transition:transform 0.25s var(--ease); }
.form-submit:hover .arrow { transform:translateX(4px); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-stack { display:flex; flex-direction:column; gap:16px; }
.wpcf7-response-output { font-family:var(--font-body); font-size:14px; padding:14px 18px; border-radius:var(--radius); margin-top:16px; border:none !important; }
.wpcf7-mail-sent-ok { background:rgba(0,196,114,0.1); color:#00864f; }
.wpcf7-validation-errors { background:rgba(255,85,0,0.1); color:#cc4400; }

/* === RESPONSIVE GLOBAL === */
@media (max-width:1024px) {
  .container { padding:0 28px; }
  .section-header,.hp-section-header { grid-template-columns:1fr; gap:20px; }
  .section-desc { max-width:100%; margin-left:0; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item:nth-child(3),.stat-item:nth-child(4) { border-top:1px solid var(--border-light); }
  .cta-inner { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .container { padding:0 20px; }
  .nav-links { display:none; }
  .nav-toggle { display:flex; background:none;border:none}
  .stats-inner { grid-template-columns:1fr 1fr; }
  .stat-item { padding:32px 20px; }
  .footer-top { grid-template-columns:1fr; gap:36px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .cta-band { padding:72px 0; }
  .page-hero { padding:130px 0 60px; }
}

/* === PROSE === */
.prose-wrap { max-width:760px; margin:0 auto; }
.prose-wrap h2 { font-family:var(--font-head); font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-0.03em; color:var(--dark); margin:56px 0 16px; line-height:1.1; }
.prose-wrap h2:first-child { margin-top:0; }
.prose-wrap h3 { font-family:var(--font-head); font-size:clamp(20px,2vw,26px); font-weight:700; letter-spacing:-0.02em; color:var(--dark); margin:40px 0 12px; line-height:1.2; }
.prose-wrap h4 { font-family:var(--font-head); font-size:18px; font-weight:700; color:var(--dark); margin:32px 0 8px; }
.prose-wrap p { font-family:var(--font-body); font-size:17px; line-height:1.75; color:var(--mid); margin-bottom:20px; }
.prose-wrap p:last-child { margin-bottom:0; }
.prose-wrap a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.prose-wrap a:hover { color:var(--dark); }
.prose-wrap ul,.prose-wrap ol { font-family:var(--font-body); font-size:17px; line-height:1.75; color:var(--mid); margin:0 0 24px 0; padding-left:28px; }
.prose-wrap ul li { list-style:disc; margin-bottom:8px; }
.prose-wrap ol li { list-style:decimal; margin-bottom:8px; }
.prose-wrap ul ul,.prose-wrap ol ol { margin:8px 0 8px 16px; }
.prose-wrap blockquote { border-left:3px solid var(--blue); margin:32px 0; padding:16px 24px; background:rgba(26,76,255,0.04); border-radius:0 8px 8px 0; }
.prose-wrap blockquote p { font-size:18px; font-style:italic; color:var(--dark); margin:0; }
.prose-wrap hr { border:none; border-top:1px solid rgba(0,0,0,0.1); margin:48px 0; }
.prose-wrap table { width:100%; border-collapse:collapse; font-size:15px; margin-bottom:32px; }
.prose-wrap th { background:var(--dark); color:var(--white); font-family:var(--font-head); font-weight:700; padding:12px 16px; text-align:left; }
.prose-wrap td { padding:12px 16px; border-bottom:1px solid rgba(0,0,0,0.07); color:var(--mid); vertical-align:top; }
.prose-wrap tr:last-child td { border-bottom:none; }
.prose-wrap tr:nth-child(even) td { background:rgba(0,0,0,0.02); }
.prose-wrap img { max-width:100%; height:auto; border-radius:var(--radius); margin:8px 0 24px; }
.prose-wrap strong { color:var(--dark); font-weight:700; }
.prose-wrap em { font-style:italic; }
.prose-wrap code { font-family:monospace; font-size:14px; background:rgba(0,0,0,0.06); padding:2px 6px; border-radius:4px; color:var(--dark); }
.prose-wrap pre { background:var(--dark); color:rgba(255,255,255,0.85); padding:24px; border-radius:var(--radius); overflow-x:auto; margin-bottom:24px; font-family:monospace; font-size:14px; line-height:1.6; }
.prose-wrap pre code { background:none; padding:0; color:inherit; }
.prose-meta { font-family:var(--font-body); font-size:13px; color:rgba(0,0,0,0.35); margin-bottom:48px; padding-bottom:32px; border-bottom:1px solid rgba(0,0,0,0.08); }
@media (max-width:600px) {
  .prose-wrap { padding:0; }
  .prose-wrap table { font-size:13px; }
  .prose-wrap th,.prose-wrap td { padding:10px 12px; }
}

/* === FRONT PAGE === */
.hero { min-height:88vh; background:var(--dark); display:flex; flex-direction:column; justify-content:flex-end; padding-top:172px; padding-bottom:80px; position:relative; overflow:hidden; }
.hero-abstract { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(100px); will-change:transform; }
.hero-orb-1 { width:clamp(350px,40vw,650px); height:clamp(350px,40vw,650px); background:radial-gradient(circle,rgba(26,76,255,0.22) 0%,transparent 70%); top:-15%; right:-8%; animation:orbFloat1 14s ease-in-out infinite; }
.hero-orb-2 { width:clamp(280px,32vw,500px); height:clamp(280px,32vw,500px); background:radial-gradient(circle,rgba(255,85,0,0.16) 0%,transparent 70%); bottom:-12%; left:-6%; animation:orbFloat2 18s ease-in-out infinite; }
.hero-orb-3 { width:clamp(180px,20vw,320px); height:clamp(180px,20vw,320px); background:radial-gradient(circle,rgba(90,50,200,0.14) 0%,transparent 70%); top:28%; left:32%; animation:orbFloat3 11s ease-in-out infinite; }
.hero-dots { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,0.06) 1px,transparent 1px); background-size:40px 40px; -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,transparent 25%,black 75%); mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,transparent 25%,black 75%); }
.hero-geo { position:absolute; inset:0; width:100%; height:100%; animation:geoBreath 20s ease-in-out infinite; }
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-4%,3%) scale(1.06)} 66%{transform:translate(3%,-2%) scale(0.96)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(4%,-4%) scale(1.08)} 66%{transform:translate(-3%,3%) scale(0.93)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-3%,2%) scale(1.18)} }
@keyframes geoBreath { 0%,100%{opacity:1} 50%{opacity:0.65} }
.hero-content { position:relative; z-index:2; }
.hero-eyebrow { margin-bottom:28px; }
.hero-headline { font-family:var(--font-head); font-size:clamp(45px,6.5vw,100px); font-weight:800; line-height:0.94; letter-spacing:-0.04em; color:var(--white); margin-bottom:36px; }
.hero-headline .hl-blue { color:var(--blue); }
.hero-headline .hl-line { display:block; }
.hero-areas { display:flex; flex-wrap:wrap; gap:8px; margin-top:-16px; margin-bottom:2px; }
.hero-area { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:0.01em; color:rgba(255,255,255,0.72); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); padding:6px 13px 6px 11px; border-radius:100px; transition:border-color 0.25s var(--ease), color 0.25s var(--ease); }
.hero-area::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--blue); flex:0 0 auto; }
.hero-area:hover { color:#fff; border-color:rgba(255,255,255,0.28); }
.areas-served { background:var(--dark); padding:100px 0; border-top:1px solid var(--border-dark); }
.areas-served-head { max-width:680px; margin-bottom:40px; }
.areas-served .section-title { color:var(--white); }
.areas-served .section-desc { color:rgba(255,255,255,0.6); max-width:680px; }
.areas-grid { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; padding:0; }
.area-chip { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14px; font-weight:500; color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); padding:9px 16px; border-radius:100px; transition:border-color 0.25s var(--ease), color 0.25s var(--ease); }
.area-chip::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--blue); flex:0 0 auto; }
.area-chip:hover { color:#fff; border-color:rgba(255,255,255,0.28); }
.areas-note { font-size:15px; color:rgba(255,255,255,0.55); }
.areas-note a { color:var(--blue); font-weight:600; }
.areas-note a:hover { text-decoration:underline; }
@media (max-width:640px){ .areas-served { padding:64px 0; } }
.hero-bottom { display:flex; flex-direction:column; align-items:flex-start; gap:26px; margin-top:40px; }
.hero-sub { font-size:clamp(16px,1.6vw,19px); color:rgba(255,255,255,0.55); line-height:1.65; max-width:620px; }
.hero-bottom .hero-social-proof { margin:0; }
.hero-actions { display:flex; align-items:center; justify-content:flex-start; gap:14px; flex-wrap:wrap; }
.packages { background:var(--light); padding:120px 0; }
.why { background:var(--white); padding:120px 0; }
.why-lead { font-size:17px; color:var(--mid); line-height:1.7; margin-bottom:40px; margin-top:20px; }
.why-stat-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.why-stat-box { background:var(--light); border-radius:var(--radius-lg); padding:28px; }
.why-stat-box .num { font-family:var(--font-head); font-size:40px; font-weight:800; letter-spacing:-0.04em; line-height:1; margin-bottom:6px; }
.why-stat-box .num span { color:var(--orange); }
.why-stat-box .lbl { font-size:13px; color:var(--mid); }
.why-right { display:flex; flex-direction:column; }
.why-item { border-bottom:1px solid rgba(0,0,0,0.07); padding:28px 0; display:grid; grid-template-columns:32px 1fr; gap:20px; align-items:start; }
.why-item:first-child { border-top:1px solid rgba(0,0,0,0.07); }
.why-num { font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--orange); margin-top:2px; }
.why-item-text h4 { font-family:var(--font-head); font-size:18px; font-weight:700; margin-bottom:6px; }
.why-item-text p { font-size:14px; color:var(--mid); line-height:1.65; }
.work-hp { background:var(--light); padding:120px 0; }
.work-grid-hp { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.how { background:var(--dark); padding:120px 0; position:relative; overflow:hidden; }
.how::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(26,76,255,0.08) 0%,transparent 60%); pointer-events:none; }
.how-header-title { color:var(--white); margin-bottom:64px; max-width:560px; }
.how-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.how-grid::before { content:''; position:absolute; top:40px; left:calc(10% + 20px); right:calc(10% + 20px); height:1px; background:rgba(255,255,255,0.08); }
.how-step { padding:0 24px; }
.how-step-number { width:80px; height:80px; border:1px solid rgba(255,255,255,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:22px; font-weight:800; color:var(--white); margin-bottom:28px; background:var(--dark-2); position:relative; z-index:1; }
.how-step h4 { font-family:var(--font-head); font-size:17px; font-weight:700; color:var(--white); margin-bottom:10px; letter-spacing:-0.02em; }
.how-step p { font-size:13px; color:rgba(255,255,255,0.45); line-height:1.65; }
.how-footer-row { margin-top:72px; padding-top:48px; border-top:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.how-footer-note { font-size:14px; color:rgba(255,255,255,0.4); max-width:480px; line-height:1.6; }
.how-footer-note strong { color:var(--white); font-weight:600; }
@media (max-width:1024px) {
  .packages-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .why-grid { grid-template-columns:1fr; gap:48px; }
  .how-grid { grid-template-columns:1fr 1fr; gap:40px; }
  .how-grid::before { display:none; }
  .work-grid-hp { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .hero-deco { display:none; }
  .hero-bottom { grid-template-columns:1fr; }
  .hero-actions { justify-content:flex-start; }
  .packages,.why,.how,.work-hp { padding:80px 0; }
  .how-grid { grid-template-columns:1fr; }
  .work-grid-hp { grid-template-columns:1fr; }
  .why-stat-pair { grid-template-columns:1fr; }
}

/* === ABOUT === */
.about-intro { padding:100px 0; background:var(--white); }
.about-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-photo { position:relative; }
.about-photo::before { content:''; position:absolute; top:-16px; left:-16px; right:16px; bottom:16px; border:2px solid var(--blue); border-radius:var(--radius-lg); z-index:0; opacity:0.25; }
.about-photo-frame { width:100%; aspect-ratio:4/5; background:var(--light); border-radius:var(--radius-lg); overflow:hidden; position:relative; z-index:1; }
.about-photo-frame img { width:100%; height:100%; object-fit:cover; }
.about-photo-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:linear-gradient(135deg,#ebebeb 0%,#ddddd9 100%); }
.about-photo-placeholder p { font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--mid); }
.about-stat-chip { position:absolute; background:var(--white); border-radius:50px; padding:12px 20px; display:flex; align-items:center; gap:10px; box-shadow:0 8px 32px rgba(0,0,0,0.10); z-index:2; }
.about-stat-chip .n { font-family:var(--font-head); font-size:22px; font-weight:800; color:var(--dark); letter-spacing:-0.04em; line-height:1; }
.about-stat-chip .n span { color:var(--blue); }
.about-stat-chip .l { font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--mid); line-height:1.3; }
.chip-years { bottom:-20px; left:-20px; }
.chip-agency { top:28px; right:-20px; }
.about-copy { padding-top:8px; }
.about-copy .tag { margin-bottom:20px; }
.about-copy h1 { font-family:var(--font-head); font-size:clamp(36px,4vw,54px); font-weight:800; letter-spacing:-0.035em; line-height:1.03; color:var(--dark); margin-bottom:24px; }
.about-copy h1 span { color:var(--blue); }
.about-copy p { font-family:var(--font-body); font-size:16px; line-height:1.75; color:#555; margin-bottom:20px; }
.about-copy p strong { color:var(--dark); font-weight:600; }
.about-cta-row { display:flex; align-items:center; gap:20px; margin-top:36px; flex-wrap:wrap; }
.about-skills { background:var(--light); padding:80px 0; }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.skill-card { background:var(--white); border-radius:var(--radius-lg); padding:36px 32px; border:1px solid var(--border-light); }
.skill-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.skill-icon.blue { background:rgba(26,76,255,0.08); }
.skill-icon.orange { background:rgba(255,85,0,0.08); }
.skill-icon.green { background:rgba(0,196,114,0.08); }
.skill-title { font-family:var(--font-head); font-size:20px; font-weight:700; letter-spacing:-0.02em; margin-bottom:10px; }
.skill-desc { font-family:var(--font-body); font-size:14px; color:var(--mid); line-height:1.65; }
.about-journey { background:var(--white); padding:100px 0; }
.journey-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-top:60px; }
.timeline { display:flex; flex-direction:column; }
.timeline-item { display:grid; grid-template-columns:80px 1fr; gap:24px; padding-bottom:40px; position:relative; }
.timeline-item:not(:last-child)::after { content:''; position:absolute; left:39px; top:32px; bottom:0; width:1px; background:var(--border-light); }
.timeline-year { font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--blue); padding-top:2px; }
.timeline-content h4 { font-family:var(--font-head); font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--dark); margin-bottom:6px; }
.timeline-content p { font-family:var(--font-body); font-size:14px; color:var(--mid); line-height:1.65; }
.why-solo h3 { font-family:var(--font-head); font-size:28px; font-weight:800; letter-spacing:-0.03em; color:var(--dark); margin-bottom:24px; }
.why-solo-list { display:flex; flex-direction:column; gap:20px; }
.why-solo-item { display:flex; gap:16px; align-items:flex-start; }
.why-solo-num { font-family:var(--font-head); font-size:28px; font-weight:800; color:var(--blue); opacity:0.25; line-height:1; flex-shrink:0; width:32px; }
.why-solo-text h5 { font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--dark); margin-bottom:4px; }
.why-solo-text p { font-family:var(--font-body); font-size:14px; color:var(--mid); line-height:1.6; }
@media (max-width:1024px) {
  .about-intro-grid { grid-template-columns:1fr; gap:60px; }
  .about-photo { max-width:420px; }
  .skills-grid { grid-template-columns:1fr 1fr; }
  .journey-grid { grid-template-columns:1fr; gap:60px; }
}
@media (max-width:640px) {
  .about-intro,.about-journey { padding:60px 0; }
  .about-skills { padding:60px 0; }
  .skills-grid { grid-template-columns:1fr; }
  .chip-agency { display:none; }
}

/* === WORK PAGE === */
.work-page { background:var(--light); padding:100px 0; }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.work-filter { display:flex; align-items:center; gap:8px; margin-bottom:48px; flex-wrap:wrap; }
.filter-btn { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; padding:10px 20px; border-radius:40px; border:1.5px solid rgba(0,0,0,0.12); background:transparent; color:var(--mid); cursor:pointer; transition:all 0.2s; }
.filter-btn:hover { border-color:var(--dark); color:var(--dark); }
.filter-btn.active { background:var(--dark); color:var(--white); border-color:var(--dark); }
.work-placeholder-message { grid-column:1/-1; text-align:center; padding:80px 40px; background:var(--white); border-radius:var(--radius-lg); border:1px dashed rgba(0,0,0,0.12); }
.work-placeholder-message p { font-family:var(--font-body); font-size:15px; color:var(--mid); }
@media (max-width:1024px) { .work-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .work-page { padding:60px 0; } .work-grid { grid-template-columns:1fr; } }

/* === PACKAGES PAGE === */
.pkg-page-hero { padding-bottom:0; }
.pkg-hero-bottom { display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid rgba(255,255,255,0.06); margin-top:60px; }
.pkg-hero-stat { padding:32px 40px; border-right:1px solid rgba(255,255,255,0.06); }
.pkg-hero-stat:last-child { border-right:none; }
.pkg-hero-stat .n { font-family:var(--font-head); font-size:36px; font-weight:800; color:var(--white); letter-spacing:-0.04em; line-height:1; margin-bottom:6px; }
.pkg-hero-stat .n span { color:var(--blue); }
.pkg-hero-stat .l { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,0.4); }
.packages-page { background:var(--light); padding:100px 0; }
.addons-section { background:var(--white); padding:80px 0; }
.addons-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.addon-card { background:var(--light); border-radius:var(--radius-lg); padding:36px 32px; border:1px solid rgba(0,0,0,0.06); }
.addon-icon { width:44px; height:44px; background:var(--dark); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.addon-title { font-family:var(--font-head); font-size:20px; font-weight:700; letter-spacing:-0.02em; margin-bottom:6px; }
.addon-price { font-family:var(--font-head); font-size:28px; font-weight:800; letter-spacing:-0.03em; color:var(--blue); margin-bottom:16px; }
.addon-price span { font-size:14px; font-weight:400; color:var(--mid); font-family:var(--font-body); }
.addon-desc { font-family:var(--font-body); font-size:14px; color:var(--mid); line-height:1.65; margin-bottom:20px; }
.addon-features { display:flex; flex-direction:column; gap:10px; }
.addon-feature { display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-size:13px; color:var(--dark); line-height:1.4; }
.addon-feature svg { flex-shrink:0; margin-top:1px; }
.after-plan { background:var(--dark); border-radius:var(--radius-lg); padding:44px 48px; margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.after-plan-text h3 { font-family:var(--font-head); font-size:26px; font-weight:800; color:var(--white); letter-spacing:-0.03em; margin-bottom:8px; }
.after-plan-text p { font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,0.5); max-width:480px; line-height:1.65; }
.after-plan-price { font-family:var(--font-head); font-size:48px; font-weight:800; color:var(--white); letter-spacing:-0.04em; flex-shrink:0; }
.after-plan-price span { font-size:15px; font-weight:400; color:rgba(255,255,255,0.4); font-family:var(--font-body); }
.included-banner { background:var(--blue); padding:28px 40px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:24px; }
.included-banner p { font-family:var(--font-body); font-size:15px; color:rgba(255,255,255,0.8); }
.included-banner p strong { color:var(--white); font-weight:700; }
.included-pills { display:flex; gap:10px; flex-wrap:wrap; }
.included-pill { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:20px; padding:7px 16px; font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--white); }
.pkg-contact { background:var(--light); padding:100px 0; }
.pkg-contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:start; }
.pkg-contact-left .section-title { margin-bottom:20px; }
.pkg-contact-left p { font-family:var(--font-body); font-size:16px; color:var(--mid); line-height:1.7; margin-bottom:32px; }
.contact-meta { display:flex; flex-direction:column; gap:16px; }
.contact-meta-item { display:flex; align-items:center; gap:14px; font-family:var(--font-body); font-size:14px; color:var(--dark); }
.contact-meta-item .icon { width:40px; height:40px; background:var(--white); border:1px solid var(--border-light); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-meta-item a { color:var(--dark); border-bottom:1px solid var(--border-light); transition:border-color 0.2s; }
.contact-meta-item a:hover { border-color:var(--dark); }
.pkg-form { background:var(--white); border-radius:var(--radius-lg); padding:48px 44px; border:1px solid var(--border-light); }
.pkg-form h3 { font-family:var(--font-head); font-size:24px; font-weight:800; letter-spacing:-0.03em; margin-bottom:28px; }
@media (max-width:1024px) {
  .addons-grid { grid-template-columns:1fr 1fr; }
  .pkg-contact-grid { grid-template-columns:1fr; gap:48px; }
  .pkg-hero-bottom { grid-template-columns:1fr; }
  .pkg-hero-stat { border-right:none; border-bottom:1px solid rgba(255,255,255,0.06); }
}
@media (max-width:640px) {
  .packages-page,.pkg-contact { padding:60px 0; }
  .addons-section { padding:60px 0; }
  .addons-grid { grid-template-columns:1fr; }
  .pkg-form { padding:32px 24px; }
  .after-plan { flex-direction:column; gap:20px; }
}

/* === CONTACT PAGE === */
.contact-page { padding:100px 0; background:var(--light); }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:start; }
.contact-info .tag { margin-bottom:20px; }
.contact-info h2 { font-family:var(--font-head); font-size:clamp(36px,4vw,52px); font-weight:800; letter-spacing:-0.04em; line-height:1.02; color:var(--dark); margin-bottom:20px; }
.contact-info h2 span { color:var(--blue); }
.contact-info > p { font-family:var(--font-body); font-size:16px; color:var(--mid); line-height:1.7; margin-bottom:48px; }
.contact-details { display:flex; flex-direction:column; gap:4px; margin-bottom:48px; }
.contact-detail { display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid var(--border-light); }
.contact-detail:first-child { border-top:1px solid var(--border-light); }
.contact-detail-icon { width:40px; height:40px; background:var(--white); border:1px solid var(--border-light); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--dark); }
.contact-detail-label { font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--mid); margin-bottom:3px; }
.contact-detail-value { font-family:var(--font-body); font-size:15px; font-weight:500; color:var(--dark); }
.contact-detail-value a { color:var(--dark); transition:color 0.2s; }
.contact-detail-value a:hover { color:var(--blue); }
.response-badge { display:inline-flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--border-light); border-radius:40px; padding:10px 20px; font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--dark); }
.response-dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.85)} }
.contact-form-wrap { background:var(--white); border-radius:var(--radius-lg); padding:52px 48px; border:1px solid var(--border-light); }
.contact-form-wrap h3 { font-family:var(--font-head); font-size:26px; font-weight:800; letter-spacing:-0.03em; margin-bottom:6px; }
.contact-form-wrap > p { font-family:var(--font-body); font-size:14px; color:var(--mid); margin-bottom:32px; }
.contact-map { background:var(--white); padding:0 0 80px; }
.map-frame { width:100%; height:360px; background:var(--light); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-light); position:relative; }
.map-frame iframe { width:100%; height:100%; border:none; display:block; }
.map-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.map-placeholder p { font-family:var(--font-body); font-size:13px; color:var(--mid); }
.contact-faq { background:var(--light); padding:80px 0; }
.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:56px; }
.faq-item { background:var(--white); border-radius:var(--radius-lg); padding:28px 32px; border:1px solid var(--border-light); }
.faq-q { font-family:var(--font-head); font-size:17px; font-weight:700; letter-spacing:-0.02em; color:var(--dark); margin-bottom:10px; }
.faq-a { font-family:var(--font-body); font-size:14px; color:var(--mid); line-height:1.65; }
.form-success { display: flex; align-items: flex-start; gap: 1rem; background: #f0faf4; border: 1px solid #a8dfc0; border-radius: 0.75rem; padding: 1.25rem 1.5rem; color: #1a6640; }
.form-success svg { flex-shrink: 0; margin-top: 2px; color: #1a9955; }
.form-success strong { display: block; margin-bottom: 0.25rem; }
.form-success p { margin: 0; font-size: 0.9rem; }
.form-error { background: #fff4f4; border: 1px solid #f5b8b8; border-radius: 0.75rem; padding: 1rem 1.5rem; color: #8b1a1a; font-size: 0.9rem; }
.form-error a { color: inherit; text-decoration: underline; }
@media (max-width:1024px) {
  .contact-grid { grid-template-columns:1fr; gap:48px; }
  .contact-form-wrap { padding:40px 36px; }
  .faq-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .contact-page,.contact-faq { padding:60px 0; }
  .contact-form-wrap { padding:32px 24px; }
  .map-frame { height:280px; }
}

/* === BLOG === */
.blog-page { background:var(--light); padding:80px 0 100px; }
.blog-featured { margin-bottom:60px; }
.blog-featured-card { display:grid; grid-template-columns:1.1fr 1fr; background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-light); transition:box-shadow 0.3s var(--ease); }
.blog-featured-card:hover { box-shadow:0 20px 48px rgba(0,0,0,0.08); }
.blog-featured-img { aspect-ratio:4/3; background:var(--dark); position:relative; overflow:hidden; }
.blog-featured-img img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-featured-img-placeholder { position:absolute; inset:0; background:linear-gradient(135deg,var(--dark-2) 0%,var(--dark-3) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.blog-featured-img-placeholder .watermark { font-family:var(--font-head); font-size:120px; font-weight:800; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.06); line-height:1; letter-spacing:-0.06em; user-select:none; }
.blog-featured-body { padding:52px 48px; display:flex; flex-direction:column; justify-content:center; }
.blog-cat { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--blue); background:rgba(26,76,255,0.08); padding:5px 12px; border-radius:20px; margin-bottom:20px; width:fit-content; }
.blog-title-lg { font-family:var(--font-head); font-size:clamp(24px,2.5vw,36px); font-weight:800; letter-spacing:-0.035em; line-height:1.1; color:var(--dark); margin-bottom:16px; transition:color 0.2s; }
.blog-featured-card:hover .blog-title-lg { color:var(--blue); }
.blog-excerpt { font-family:var(--font-body); font-size:15px; color:var(--mid); line-height:1.7; margin-bottom:28px; }
.blog-meta { display:flex; align-items:center; gap:16px; font-family:var(--font-body); font-size:12px; color:var(--mid); }
.blog-meta-dot { width:3px; height:3px; border-radius:50%; background:var(--mid); opacity:0.4; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-light); display:flex; flex-direction:column; transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease); }
.blog-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.08); }
.blog-card-img { aspect-ratio:16/9; background:var(--dark); position:relative; overflow:hidden; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-img-placeholder { position:absolute; inset:0; background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%); }
.blog-card-body { padding:28px 28px 24px; flex:1; display:flex; flex-direction:column; }
.blog-title { font-family:var(--font-head); font-size:19px; font-weight:700; letter-spacing:-0.025em; line-height:1.2; color:var(--dark); margin:12px 0; transition:color 0.2s; }
.blog-card:hover .blog-title { color:var(--blue); }
.blog-excerpt-sm { font-family:var(--font-body); font-size:14px; color:var(--mid); line-height:1.65; flex:1; margin-bottom:20px; }
.blog-read-more { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--blue); transition:gap 0.2s var(--ease); margin-top:auto; }
.blog-read-more:hover { gap:10px; }
.blog-pagination { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:64px; }
.blog-pagination a,.blog-pagination span { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius); font-family:var(--font-body); font-size:14px; font-weight:500; border:1.5px solid var(--border-light); background:var(--white); color:var(--dark); transition:all 0.2s; }
.blog-pagination a:hover { border-color:var(--blue); color:var(--blue); }
.blog-pagination .current { background:var(--blue); border-color:var(--blue); color:var(--white); }
.blog-empty { text-align:center; padding:100px 40px; background:var(--white); border-radius:var(--radius-lg); border:1px dashed rgba(0,0,0,0.12); }
.blog-empty h3 { font-family:var(--font-head); font-size:24px; font-weight:800; letter-spacing:-0.03em; margin-bottom:12px; }
.blog-empty p { font-family:var(--font-body); font-size:15px; color:var(--mid); }
ul.page-numbers {display:flex;gap:10px}
@media (max-width:1024px) {
  .blog-featured-card { grid-template-columns:1fr; }
  .blog-featured-img { aspect-ratio:16/9; }
  .blog-featured-body { padding:36px; }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .blog-page { padding:60px 0; }
  .blog-grid { grid-template-columns:1fr; }
  .blog-featured-body { padding:28px 24px; }
}

/* === SINGLE POST === */
.post-hero { background:var(--dark); padding:160px 0 80px; }
.post-hero-inner { max-width:75%; }
.post-hero .blog-cat { margin-bottom:20px; display:inline-flex; }
.post-title { font-family:var(--font-head); font-size:clamp(36px,5.5vw,72px); font-weight:800; line-height:0.97; letter-spacing:-0.04em; color:var(--white); margin-bottom:24px; }
.post-subtitle { font-family:var(--font-body); font-size:clamp(16px,1.5vw,19px); color:rgba(255,255,255,0.5); line-height:1.65; margin-bottom:32px; max-width:580px; }
.post-byline { display:flex; align-items:center; gap:16px; padding-top:28px; border-top:1px solid rgba(255,255,255,0.08); }
.byline-avatar { width:44px; height:44px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--white); flex-shrink:0; overflow:hidden; }
.byline-avatar img { width:100%; height:100%; object-fit:cover; }
.byline-name { font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--white); margin-bottom:2px; }
.byline-meta { font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,0.4); }
.byline-meta span { margin:0 6px; opacity:0.5; }
.post-featured-img { background:var(--dark-2); }
.post-featured-img .container { padding-top:0; }
.post-img-frame { width:100%; aspect-ratio:21/9; overflow:hidden; border-radius:0 0 var(--radius-lg) var(--radius-lg); background:var(--dark-3); position:relative; }
.post-img-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.post-img-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--dark-2),var(--dark-3)); }
.post-img-placeholder .wm { font-family:var(--font-head); font-size:clamp(80px,14vw,180px); font-weight:800; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.05); letter-spacing:-0.05em; line-height:1; user-select:none; }
.post-layout { background:var(--white); padding:80px 0 100px; }
.post-layout-inner { display:grid; grid-template-columns:1fr 280px; gap:80px; align-items:start; }
.post-content { font-family:var(--font-body); font-size:17px; line-height:1.75; color:#3a3a3a; }
.post-content h2 { font-family:var(--font-head); font-size:clamp(24px,2.5vw,34px); font-weight:800; letter-spacing:-0.035em; line-height:1.1; color:var(--dark); margin:52px 0 20px; }
.post-content h3 { font-family:var(--font-head); font-size:clamp(20px,2vw,26px); font-weight:700; letter-spacing:-0.025em; line-height:1.2; color:var(--dark); margin:40px 0 16px; }
.post-content p { margin-bottom:24px; }
.post-content p:last-child { margin-bottom:0; }
.post-content ul,.post-content .wp-block-list { list-style:none; padding-left:0; margin-bottom:28px; }
.post-content ul li,.post-content .wp-block-list li { position:relative; padding-left:26px; margin-bottom:12px; line-height:1.7; }
.post-content ul li::before,.post-content .wp-block-list li::before { content:''; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--blue); border-radius:1px; transform:rotate(45deg); opacity:0.85; }
.post-content ol { list-style:none; counter-reset:post-ol; padding-left:0; margin-bottom:28px; }
.post-content ol li { position:relative; padding-left:40px; margin-bottom:14px; line-height:1.7; counter-increment:post-ol; }
.post-content ol li::before { content:counter(post-ol); position:absolute; left:0; top:1px; width:24px; height:24px; background:var(--blue); color:#fff; border-radius:50%; font-size:12px; font-weight:700; font-family:var(--font-head); display:flex; align-items:center; justify-content:center; }
.post-content strong { color:var(--dark); font-weight:600; }
.post-content a { color:var(--blue); border-bottom:1px solid rgba(26,76,255,0.3); transition:border-color 0.2s; }
.post-content a:hover { border-color:var(--blue); }
.post-content blockquote { border-left:3px solid var(--blue); padding:8px 28px; margin:36px 0; font-size:19px; color:var(--dark); font-style:italic; line-height:1.6; }
.post-content code { font-family:'SF Mono','Fira Code',monospace; font-size:14px; background:rgba(26,76,255,0.06); color:var(--blue); padding:2px 7px; border-radius:4px; }
.post-content img { width:100%; border-radius:var(--radius-lg); margin:36px 0; }
.post-content hr { border:none; border-top:1px solid var(--border-light); margin:48px 0; }
.post-content .post-table { overflow-x:auto; margin:36px 0; border:1px solid var(--border-light); border-radius:var(--radius-lg); -webkit-overflow-scrolling:touch; }
.post-content table { width:100%; min-width:640px; border-collapse:collapse; font-size:14px; margin:0; }
.post-content table th,.post-content table td { padding:13px 16px; text-align:left; vertical-align:top; line-height:1.5; border-bottom:1px solid var(--border-light); }
.post-content table thead th { background:var(--dark); color:#fff; font-family:var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:-0.01em; }
.post-content table tbody td:first-child,.post-content table tbody th:first-child { font-weight:600; color:var(--dark); }
.post-content table tbody td:last-child { background:rgba(26,76,255,0.04); color:var(--dark); font-weight:500; }
.post-content table tbody tr:last-child th,.post-content table tbody tr:last-child td { border-bottom:none; }
.post-content table strong { color:var(--dark); }
.post-content .post-table p { margin:0; }
.post-cta-callout { background:var(--blue); border-radius:var(--radius-lg); padding:40px 44px; margin:48px 0; }
.post-cta-callout h4 { font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--white); letter-spacing:-0.03em; margin-bottom:10px; }
.post-cta-callout p { font-family:var(--font-body); font-size:15px; color:rgba(255,255,255,0.7); margin-bottom:20px !important; }
.post-cta-callout .btn { font-size:14px; padding:14px 28px; }
.post-sidebar { position:sticky; top:100px; }
.sidebar-card { background:var(--light); border-radius:var(--radius-lg); padding:28px 24px; border:1px solid var(--border-light); margin-bottom:20px; }
.sidebar-card h4 { font-family:var(--font-head); font-size:15px; font-weight:700; letter-spacing:-0.01em; color:var(--dark); margin-bottom:16px; }
.toc-list { display:flex; flex-direction:column; gap:8px; }
.toc-list a { font-family:var(--font-body); font-size:13px; color:var(--mid); transition:color 0.2s; display:block; padding:4px 0; border-bottom:1px solid rgba(0,0,0,0.05); }
.toc-list a:hover { color:var(--blue); }
.sidebar-cta { background:var(--dark); border-radius:var(--radius-lg); padding:28px 24px; margin-bottom:20px; }
.sidebar-cta h4 { font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--white); letter-spacing:-0.03em; margin-bottom:10px; }
.sidebar-cta p { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:16px; line-height:1.6; }
.sidebar-cta .btn { width:100%; justify-content:center; font-size:13px; padding:13px; }
.author-card { display:flex; align-items:flex-start; gap:14px; }
.author-avatar { width:48px; height:48px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--white); flex-shrink:0; overflow:hidden; }
.author-avatar img { width:100%; height:100%; object-fit:cover; }
.author-info .name { font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--dark); margin-bottom:4px; }
.author-info .bio { font-family:var(--font-body); font-size:12px; color:var(--mid); line-height:1.6; }
.post-related { background:var(--light); padding:80px 0; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
/* WhatsApp float  all screen sizes */
.whatsapp-float{position:fixed;bottom:24px;right:24px;background:linear-gradient(135deg,#25d366,#128c7e);height:56px;border-radius:50px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px 0 16px;gap:10px;box-shadow:0 4px 20px rgba(37,211,102,.4);z-index:9998;transition:all .3s;text-decoration:none;color:#fff}
.whatsapp-float:hover{box-shadow:0 6px 30px rgba(37,211,102,.6);transform:translateY(-2px)}
.whatsapp-icon{width:26px;height:26px;flex-shrink:0}
.whatsapp-text{font-family:var(--font-body);font-weight:700;font-size:14px;white-space:nowrap;color:#fff}
@media (max-width:640px){
  .whatsapp-float{bottom:16px;right:16px;width:52px;height:52px;padding:0;border-radius:50%;justify-content:center}
  .whatsapp-text{display:none}
}

/* === WHY SECTION (with image) === */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.why-img-col { position:relative; }
.why-img-col::before { content:''; position:absolute; top:-16px; left:-16px; right:16px; bottom:16px; border:2px solid var(--blue); border-radius:24px; z-index:0; opacity:0.25; }
.why-img-wrap { position:relative; z-index:1; border-radius:24px; overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,0.18); }
.why-cartoon { width:100%; height:auto; display:block; }
.why-items { margin-top:40px; display:flex; flex-direction:column; gap:28px; }

@media (max-width:900px) {
  	.why-grid { grid-template-columns:1fr; gap:48px; }
  	.why-img-col { max-width:400px; margin:0 auto; }
}

@media (max-width:1024px) {
  .post-layout-inner { grid-template-columns:1fr; }
  .post-sidebar { position:static; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .post-img-frame { aspect-ratio:16/9; border-radius:0; }
  .related-grid { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:760px) and (max-width:768px) {
  .hero {justify-content: center;min-height: 70vh}
  .btn {padding: 16px 20px}
  .how-footer-row {flex-wrap: nowrap;}
}
@media (max-width:640px) {
  .hero { min-height:auto; justify-content:flex-start; padding-top:120px; padding-bottom:52px; }
  .hero-actions { gap:10px; flex-wrap:nowrap; width:100%; }
  .hero-actions .btn { flex:1 1 0; min-width:0; justify-content:center; padding:14px 10px; font-size:12.5px; letter-spacing:0.01em; }
  .hero-actions .btn .arrow { display:none; }
  .post-hero { padding:130px 0 60px; }
  .post-layout { padding:60px 0; }
  .post-content { font-size:16px; }
  .post-sidebar { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr; }
  .post-related { padding:60px 0; }
}
@media (max-width:480px) {
	.tag {font-size:9px}
	.btn {padding:16px 20px}
}


/* === FREE WEBSITE OFFER BAND === */
.free-band { background:var(--dark); padding:0; }
.free-band-inner { position:relative; overflow:hidden; background:linear-gradient(135deg,#0a1f7a 0%,var(--blue) 60%,#0a1f7a 130%); border-radius:var(--radius-lg); padding:64px 56px; display:grid; grid-template-columns:1.4fr 0.9fr; gap:48px; align-items:center; }
.free-band-inner::before { content:''; position:absolute; right:-120px; top:-120px; width:360px; height:360px; background:radial-gradient(circle,rgba(0,196,114,0.55),transparent 65%); }
.free-band-inner::after { content:''; position:absolute; left:-100px; bottom:-140px; width:340px; height:340px; background:radial-gradient(circle,rgba(255,85,0,0.45),transparent 65%); }
.free-band-content { position:relative; z-index:2; }
.free-band .free-tag { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.16); color:#fff; backdrop-filter:blur(6px); font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; padding:7px 16px; border-radius:100px; margin-bottom:22px; }
.free-band h2 { font-family:var(--font-head); font-size:clamp(30px,4vw,52px); font-weight:800; line-height:0.98; letter-spacing:-0.04em; color:#fff; margin-bottom:18px; }
.free-band h2 em { font-style:normal; color:#7dffc4; }
.free-band p { font-family:var(--font-body); font-size:17px; color:rgba(255,255,255,0.82); line-height:1.6; max-width:46ch; margin-bottom:26px; }
.free-band-ticks { display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-bottom:32px; }
.free-band-ticks li { display:flex; align-items:flex-start; gap:9px; color:#fff; font-family:var(--font-body); font-size:14.5px; font-weight:500; }
.free-band-ticks svg { flex:none; width:18px; height:18px; margin-top:1px; color:#7dffc4; }
.free-band-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.free-band-actions .small-note { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,0.6); }
.free-counter-box { position:relative; z-index:2; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-lg); padding:36px 28px; text-align:center; backdrop-filter:blur(8px); }
.free-counter-box .big { font-family:var(--font-head); font-weight:800; font-size:clamp(64px,9vw,92px); line-height:1; color:#fff; letter-spacing:-0.04em; }
.free-counter-box .big span { color:#7dffc4; }
.free-counter-box .cap { font-family:var(--font-body); font-size:15px; color:rgba(255,255,255,0.85); margin-top:6px; }
.free-counter-box .bars { display:flex; gap:6px; justify-content:center; margin:22px 0 14px; }
.free-counter-box .bars i { width:26px; height:9px; border-radius:3px; background:rgba(255,255,255,0.22); }
.free-counter-box .bars i.on { background:#7dffc4; }
.free-counter-box small { font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,0.6); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { background:#00a861; color:#fff; }
@media (max-width:880px){ .free-band-inner{ grid-template-columns:1fr; padding:44px 32px; gap:32px; } .free-band-ticks{ grid-template-columns:1fr; } }

/* === ONE-OFF PACKAGE CARD PRICE NOTE === */
.pkg-price-period.one-off { color:var(--orange); font-weight:700; }
.pkg-card.diamond .pkg-price-period.one-off { color:#ff8f4d; }

/* === ONE-PAGE LANDING: OPTION CARDS === */
.options-section { background:var(--light); padding:90px 0; }
.options-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; align-items:stretch; }
.option-card { background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:44px 40px; display:flex; flex-direction:column; }
.option-card.is-free { background:var(--dark); color:#fff; border-color:transparent; }
.option-card .opt-eyebrow { font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.option-card.is-free .opt-eyebrow { color:#7dffc4; }
.option-card .opt-price { font-family:var(--font-head); font-weight:800; font-size:56px; line-height:1; letter-spacing:-0.04em; margin-bottom:6px; }
.option-card .opt-price small { font-size:17px; font-weight:600; color:var(--mid); letter-spacing:0; }
.option-card.is-free .opt-price small { color:rgba(255,255,255,0.6); }
.option-card .opt-tagline { font-family:var(--font-body); font-size:15px; color:var(--mid); margin-bottom:26px; }
.option-card.is-free .opt-tagline { color:rgba(255,255,255,0.7); }
.option-card ul { display:grid; gap:12px; margin-bottom:30px; flex:1; }
.option-card ul li { display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-size:14.5px; line-height:1.5; }
.option-card ul svg { flex:none; width:18px; height:18px; margin-top:1px; color:var(--green); }
.option-card.is-free ul svg { color:#7dffc4; }
@media (max-width:760px){ .options-grid{ grid-template-columns:1fr; } }

/* === PACKAGES: COMPARISON TABLE === */
.cmp-section { background:var(--white); padding:100px 0; }
.cmp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border-light); border-radius:var(--radius-lg); margin-top:48px; }
.cmp-table { width:100%; min-width:720px; border-collapse:collapse; font-family:var(--font-body); }
.cmp-table th, .cmp-table td { padding:15px 22px; text-align:center; border-bottom:1px solid var(--border-light); font-size:14.5px; color:var(--dark); vertical-align:middle; }
.cmp-table thead th { background:var(--light); font-family:var(--font-head); font-weight:700; letter-spacing:-0.01em; border-bottom:1px solid var(--border-light); position:sticky; top:0; z-index:2; }
.cmp-table thead th .cmp-plan-name { display:block; font-size:16px; }
.cmp-table thead th .cmp-plan-price { display:block; font-size:12.5px; font-weight:500; color:var(--mid); margin-top:2px; }
.cmp-table tbody th[scope="row"] { text-align:left; font-weight:500; color:var(--dark); position:sticky; left:0; background:var(--white); z-index:1; min-width:230px; }
.cmp-table thead th:first-child { text-align:left; position:sticky; left:0; z-index:3; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom:0; }
.cmp-table tbody tr:nth-child(even) th[scope="row"], .cmp-table tbody tr:nth-child(even) td { background:#fbfbfa; }
.cmp-table tbody tr:hover td, .cmp-table tbody tr:hover th[scope="row"] { background:var(--light-2); }
.cmp-col-pop { background:rgba(26,76,255,0.05) !important; }
.cmp-table thead th.cmp-col-pop { background:var(--blue) !important; color:var(--white); }
.cmp-table thead th.cmp-col-pop .cmp-plan-price { color:rgba(255,255,255,0.82); }
.cmp-pop-flag { display:inline-block; background:var(--orange); color:#fff; font-family:var(--font-body); font-size:9.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:3px 9px; border-radius:20px; margin-bottom:8px; }
.cmp-yes { color:var(--green); display:inline-flex; }
.cmp-yes svg { width:19px; height:19px; }
.cmp-no { color:#c4c4c0; font-size:18px; line-height:1; }
.cmp-addon { font-size:12.5px; font-weight:600; color:var(--mid); letter-spacing:0.02em; }
.cmp-strong { font-family:var(--font-head); font-weight:700; }
.cmp-note { font-family:var(--font-body); font-size:13px; color:var(--mid); margin-top:16px; text-align:center; }

/* === PACKAGES: FAQ ACCORDION === */
.pkg-faq-section { background:var(--light); padding:100px 0; }
.pkg-faq { max-width:840px; margin:48px auto 0; display:grid; gap:12px; }
.faq-acc { border:1px solid var(--border-light); border-radius:var(--radius); background:#fff; overflow:hidden; }
.faq-acc-btn { width:100%; text-align:left; background:none; border:0; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:18px; cursor:pointer; }
.faq-acc-btn h3 { font-family:var(--font-head); font-size:17px; font-weight:700; color:var(--dark); letter-spacing:-0.01em; margin:0; line-height:1.3; }
.faq-acc-icon { flex:none; width:24px; height:24px; border-radius:6px; background:var(--light); display:grid; place-items:center; color:var(--blue); transition:transform 0.25s var(--ease),background 0.25s,color 0.25s; }
.faq-acc-icon svg { width:14px; height:14px; }
.faq-acc-btn[aria-expanded="true"] .faq-acc-icon { transform:rotate(45deg); background:var(--blue); color:#fff; }
.faq-acc-panel { padding:0 26px 24px; }
.faq-acc-panel p { font-family:var(--font-body); font-size:15px; color:var(--mid); line-height:1.7; margin:0; }
.faq-acc-panel a { color:var(--blue); text-decoration:underline; }
.faq-acc-panel[hidden] { display:none; }
@media (max-width:600px){ .cmp-section,.pkg-faq-section{ padding:64px 0; } .faq-acc-btn{ padding:18px 20px; } .faq-acc-btn h3{ font-size:15.5px; } }
.cmp-cta { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--dark); color:#fff; font-family:var(--font-body); font-size:13px; font-weight:600; padding:11px 20px; border-radius:var(--radius); white-space:nowrap; transition:background 0.2s,transform 0.2s; }
.cmp-cta:hover { background:var(--blue); transform:translateY(-2px); color:#fff; }
.cmp-table thead th.cmp-col-pop .cmp-cta, .cmp-col-pop .cmp-cta { background:var(--blue); }
.cmp-col-pop .cmp-cta:hover { background:var(--blue-dk); }
.cmp-table tfoot td { padding:22px; border-top:1px solid var(--border-light); background:#fff; }
.cmp-table tfoot th[scope="row"] { background:#fff; }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ===========================================================
   PACKAGES REVISION (2-col cards + one-off banner, full-width free band)
   =========================================================== */
/* Full-width blue free-offer band */
.free-band { background:linear-gradient(120deg,#0a1f7a 0%,var(--blue) 55%,#0a1f7a 130%); padding:84px 0; overflow:hidden; }
.free-band-inner { background:transparent; border-radius:0; padding:0; overflow:visible; }

/* Two pricing cards, centred */
.packages-grid.cols-2 { grid-template-columns:repeat(2,1fr); max-width:860px; margin-left:auto; margin-right:auto; }

/* One-off full-width banner under the two cards */
.oneoff-banner { max-width:860px; margin:20px auto 0; background:var(--dark); color:#fff; border-radius:var(--radius-lg); padding:30px 40px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.oneoff-banner .ob-left { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.oneoff-banner .ob-price { font-family:var(--font-head); font-weight:800; font-size:46px; line-height:1; color:#fff; white-space:nowrap; letter-spacing:-0.03em; }
.oneoff-banner .ob-price small { display:block; font-size:13px; color:var(--orange); font-weight:600; letter-spacing:0.04em; margin-top:4px; }
.oneoff-banner .ob-text h3 { font-family:var(--font-head); font-size:21px; font-weight:700; color:#fff; margin-bottom:5px; letter-spacing:-0.02em; }
.oneoff-banner .ob-text p { font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,0.68); line-height:1.55; max-width:52ch; }
.oneoff-banner .ob-cta { flex:none; background:var(--orange); color:#fff; font-family:var(--font-body); font-size:14px; font-weight:600; padding:15px 28px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px; transition:background 0.2s,transform 0.2s; }
.oneoff-banner .ob-cta:hover { background:#e04d00; transform:translateY(-2px); color:#fff; }
@media (max-width:760px){ .packages-grid.cols-2{ grid-template-columns:1fr; max-width:480px; } .oneoff-banner{ flex-direction:column; align-items:flex-start; padding:28px 26px; } }

/* Add-ons: two cards centred */
.addons-grid.cols-2 { grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto; }
@media (max-width:760px){ .addons-grid.cols-2{ grid-template-columns:1fr; } }

/* One-off banner: dual buttons (orange + green) */
.ob-actions { display:flex; gap:12px; flex-wrap:wrap; flex:none; align-items:center; }
.oneoff-banner .ob-cta--green { background:var(--green); }
.oneoff-banner .ob-cta--green:hover { background:#00a861; }
.free-band { scroll-margin-top:120px; }
@media (max-width:760px){ .ob-actions{ width:100%; } .ob-actions .ob-cta{ flex:1 1 auto; justify-content:center; } }

/* ===========================================================
   PACKAGES PAGE: SEO CONTENT SECTIONS
   =========================================================== */
/* Breadcrumb (in dark hero) */
.pkg-breadcrumb { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:22px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pkg-breadcrumb a { color:rgba(255,255,255,0.72); }
.pkg-breadcrumb a:hover { color:#fff; }
.pkg-breadcrumb .sep { opacity:0.45; }
.pkg-breadcrumb [aria-current] { color:#fff; }

/* Intro lead paragraph (inside packages section) */
.pkg-intro-lead { font-family:var(--font-body); font-size:clamp(17px,1.7vw,21px); line-height:1.65; color:var(--dark); max-width:900px; margin-bottom:56px; }
.pkg-intro-lead a { color:var(--blue); text-decoration:underline; }

/* Why pay monthly */
.why-monthly { background:var(--white); padding:100px 0; }
.wm-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.wm-card { border-radius:var(--radius-lg); padding:40px; border:1px solid var(--border-light); }
.wm-card.old { background:var(--light); }
.wm-card.new { background:var(--dark); color:#fff; }
.wm-label { font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:16px; display:inline-block; }
.wm-card.old .wm-label { color:var(--mid); }
.wm-card.new .wm-label { color:var(--green); }
.wm-amount { font-family:var(--font-head); font-weight:800; font-size:clamp(34px,4.5vw,48px); letter-spacing:-0.04em; line-height:1; margin-bottom:6px; color:var(--dark); }
.wm-card.new .wm-amount { color:#fff; }
.wm-sub { font-family:var(--font-body); font-size:14px; color:var(--mid); }
.wm-card.new .wm-sub { color:rgba(255,255,255,0.6); }
.wm-card ul { display:grid; gap:12px; margin-top:24px; }
.wm-card li { display:flex; gap:11px; font-family:var(--font-body); font-size:14.5px; line-height:1.5; align-items:flex-start; color:var(--dark); }
.wm-card.new li { color:rgba(255,255,255,0.85); }
.wm-card li svg { flex:none; width:18px; height:18px; margin-top:1px; }
.wm-card.old li svg { color:#cf5b50; }
.wm-card.new li svg { color:var(--green); }
@media (max-width:760px){ .wm-grid{ grid-template-columns:1fr; } .why-monthly{ padding:64px 0; } }

/* Testimonials */
.pkg-reviews { background:var(--light); padding:100px 0; }
.tq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.tq-card { background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:32px; display:flex; flex-direction:column; }
.tq-stars { display:flex; gap:3px; color:#FFBA00; margin-bottom:18px; }
.tq-stars svg { width:16px; height:16px; }
.tq-quote { font-family:var(--font-body); font-size:15px; line-height:1.65; color:var(--dark); flex:1; }
.tq-author { margin-top:22px; font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--dark); }
.tq-author span { display:block; font-family:var(--font-body); font-weight:400; font-size:13px; color:var(--mid); margin-top:3px; }
@media (max-width:880px){ .tq-grid{ grid-template-columns:1fr; } .pkg-reviews{ padding:64px 0; } }

/* Industries (BrightLocal style) */
.industries { background:var(--white); padding:100px 0; }
.ind-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.ind-card { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-light); display:flex; flex-direction:column; transition:transform 0.35s var(--ease),box-shadow 0.35s; }
.ind-card:hover { transform:translateY(-6px); box-shadow:0 24px 56px -24px rgba(0,0,0,0.28); }
.ind-media { aspect-ratio:16/7; display:grid; place-items:center; position:relative; }
.ind-media svg.ind-ic { width:60px; height:60px; color:#fff; opacity:0.95; }
.ind-tag { position:absolute; top:18px; left:18px; background:rgba(255,255,255,0.18); backdrop-filter:blur(6px); color:#fff; font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:5px 12px; border-radius:20px; }
.ind-card:nth-child(1) .ind-media { background:linear-gradient(135deg,var(--blue),#0a1f7a); }
.ind-card:nth-child(2) .ind-media { background:linear-gradient(135deg,var(--green),#067a4a); }
.ind-card:nth-child(3) .ind-media { background:linear-gradient(135deg,var(--orange),#b83c00); }
.ind-card:nth-child(4) .ind-media { background:linear-gradient(135deg,#2a2a2a,#0c0c0c); }
.ind-body { padding:34px 36px 36px; background:#fff; flex:1; display:flex; flex-direction:column; }
.ind-card.dark .ind-body { background:var(--dark); }
.ind-body h3 { font-family:var(--font-head); font-size:clamp(22px,2.4vw,28px); font-weight:800; letter-spacing:-0.03em; color:var(--dark); margin-bottom:12px; }
.ind-card.dark .ind-body h3 { color:#fff; }
.ind-body p { font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--mid); margin-bottom:26px; flex:1; }
.ind-card.dark .ind-body p { color:rgba(255,255,255,0.68); }
.ind-cta { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14px; font-weight:600; padding:13px 26px; border-radius:100px; border:1.5px solid var(--dark); color:var(--dark); transition:background 0.2s,color 0.2s,transform 0.2s,border-color 0.2s; }
.ind-cta:hover { background:var(--dark); color:#fff; transform:translateY(-2px); }
.ind-card.dark .ind-cta { border-color:rgba(255,255,255,0.32); color:#fff; }
.ind-card.dark .ind-cta:hover { background:#fff; color:var(--dark); border-color:#fff; }
@media (max-width:760px){ .ind-grid{ grid-template-columns:1fr; } .industries{ padding:64px 0; } }

/* ===========================================================
   STYLE REVISIONS (BrightLocal-inspired): one-off banner + testimonials
   =========================================================== */
/* One-off banner: bold gradient CTA strip */
.oneoff-banner { max-width:860px; margin:24px auto 0; background:linear-gradient(120deg,#0a1f7a 0%,var(--blue) 58%,#0a1f7a 130%); color:#fff; border-radius:var(--radius-lg); padding:40px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; position:relative; overflow:hidden; }
.oneoff-banner::after { content:''; position:absolute; right:-90px; top:-90px; width:280px; height:280px; background:radial-gradient(circle,rgba(255,255,255,0.12),transparent 65%); pointer-events:none; }
.oneoff-banner .ob-left { display:flex; align-items:center; gap:24px; position:relative; z-index:1; flex:1 1 420px; }
.oneoff-banner .ob-icon { flex:none; width:52px; height:52px; display:grid; place-items:center; color:#fff; }
.oneoff-banner .ob-icon svg { width:38px; height:38px; }
.oneoff-banner .ob-text h3 { font-family:var(--font-head); font-size:clamp(23px,2.6vw,31px); font-weight:800; color:#fff; letter-spacing:-0.03em; line-height:1.06; margin-bottom:9px; }
.oneoff-banner .ob-text p { font-family:var(--font-body); font-size:14.5px; line-height:1.55; color:rgba(255,255,255,0.78); max-width:48ch; margin:0; }
.oneoff-banner .ob-actions { position:relative; z-index:1; }
@media (max-width:820px){ .oneoff-banner{ padding:32px 30px; } .oneoff-banner .ob-left{ flex:1 1 100%; } }

/* Testimonials: bold-quote cream cards */
.pkg-reviews { background:var(--white); }
.tq-card { background:#FBF6E3; border:1px solid #F0E7C4; border-radius:18px; padding:40px 36px; min-height:330px; }
.tq-stars { color:#E8A400; margin-bottom:20px; }
.tq-quote { font-family:var(--font-head); font-size:clamp(19px,1.85vw,23px); font-weight:700; line-height:1.3; letter-spacing:-0.02em; color:var(--dark); }
.tq-author { margin-top:28px; }
.tq-author span { color:#8b8a7c; }

/* ===========================================================
   TWEAKS
   =========================================================== */
/* Remove padding-bottom under section titles */
.section-title { padding-bottom:0; }

/* Centre the contact form submit button content */
.form-submit { justify-content:center; }

/* One-off banner: solid black, fully centred */
.oneoff-banner { background:var(--dark); flex-direction:column; text-align:center; justify-content:center; gap:22px; }
.oneoff-banner::after { display:none; }
.oneoff-banner .ob-left { flex:0 1 auto; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.oneoff-banner .ob-text p { margin:0 auto; max-width:60ch; }
.oneoff-banner .ob-actions { justify-content:center; width:100%; }

/* Testimonial quote: smaller, lighter, tighter so long reviews don't dominate */
.tq-card { min-height:auto; padding:34px 32px; }
.tq-quote { font-size:clamp(15px,1.25vw,17px); line-height:1.5; font-weight:600; letter-spacing:-0.005em; }
.tq-stars { margin-bottom:16px; }
.tq-stars svg { width:14px; height:14px; }
.tq-author { margin-top:24px; }

/* Industry cards: real photos */
.ind-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.ind-media::before { content:''; position:absolute; inset:0 0 auto 0; height:55%; background:linear-gradient(to bottom, rgba(0,0,0,0.42), transparent); z-index:1; pointer-events:none; }
.ind-media .ind-tag { z-index:2; }

/* Contact form reassurance line under submit */
.form-reassure { text-align:center; font-family:var(--font-body); font-size:13px; color:var(--mid); margin-top:14px; }

/* Restore hero bottom spacing after removing the stat strip */
.pkg-page-hero { padding-bottom:80px; }
@media (max-width:600px){ .pkg-page-hero { padding-bottom:56px; } }

/* Packages hero: social proof + CTA row */
.hero-social-proof { font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,0.62); margin-top:24px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero-social-proof .hsp-stars { color:#FFBA00; letter-spacing:2px; font-size:15px; }
.hero-cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
@media (max-width:600px){ .hero-cta-row .btn { width:100%; justify-content:center; } }

/* Wider hero subhead */
.page-hero-sub { max-width:720px; }

/* Add-on enquire link */
.addon-link { display:inline-block; margin-top:18px; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--blue); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease; }
.addon-link:hover { border-bottom-color:var(--blue); }

/* ============================================================
   ROI CALCULATOR
============================================================ */
.roi-section { padding:90px 0; background:var(--white); }
.roi-card { display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--white); border:1px solid var(--border-light); border-radius:var(--radius-lg); overflow:hidden; margin-top:40px; box-shadow:0 18px 50px rgba(0,0,0,0.06); }
.roi-inputs { padding:44px; display:flex; flex-direction:column; gap:30px; }
.roi-field { display:flex; flex-direction:column; gap:12px; }
.roi-field > label { font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--dark); letter-spacing:0.01em; }
.roi-field > label strong { color:var(--blue); font-weight:700; margin-left:4px; }
.roi-money { display:flex; align-items:center; border:1.5px solid rgba(0,0,0,0.14); border-radius:var(--radius); overflow:hidden; transition:border-color 0.2s,box-shadow 0.2s; }
.roi-money:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,76,255,0.12); }
.roi-money-sym { padding:14px 0 14px 18px; font-family:var(--font-head); font-weight:700; color:var(--mid); font-size:18px; }
.roi-money input { flex:1; border:none; outline:none; padding:14px 18px; font-family:var(--font-head); font-size:18px; font-weight:700; color:var(--dark); background:transparent; width:100%; -moz-appearance:textfield; }
.roi-money input::-webkit-outer-spin-button,.roi-money input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.roi-range-ends { display:flex; justify-content:space-between; font-family:var(--font-body); font-size:12px; color:var(--mid); margin-top:-4px; }
input[type="range"]#roi-jobs { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:var(--light-2); outline:none; cursor:pointer; }
input[type="range"]#roi-jobs::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--blue); border:4px solid var(--white); box-shadow:0 2px 8px rgba(26,76,255,0.4); cursor:pointer; }
input[type="range"]#roi-jobs::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:var(--blue); border:4px solid var(--white); box-shadow:0 2px 8px rgba(26,76,255,0.4); cursor:pointer; }
.roi-plans { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.roi-plan { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 18px; border:1.5px solid rgba(0,0,0,0.14); border-radius:var(--radius); background:var(--white); cursor:pointer; transition:all 0.2s var(--ease); text-align:left; }
.roi-plan:hover { border-color:rgba(26,76,255,0.5); }
.roi-plan.is-active { border-color:var(--blue); background:rgba(26,76,255,0.05); box-shadow:0 0 0 3px rgba(26,76,255,0.1); }
.roi-plan-name { font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--dark); }
.roi-plan-price { font-family:var(--font-head); font-size:22px; font-weight:700; color:var(--dark); letter-spacing:-0.01em; }
.roi-plan-price small { font-size:13px; font-weight:600; color:var(--mid); }
.roi-results { padding:44px; background:var(--dark); color:var(--white); display:flex; flex-direction:column; gap:24px; }
.roi-headline-lead { display:block; font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,0.65); margin-bottom:8px; }
.roi-headline-big { font-family:var(--font-head); font-size:clamp(24px,2.4vw,30px); font-weight:700; line-height:1.15; letter-spacing:-0.015em; }
.roi-headline-big strong { color:var(--green); }
.roi-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,0.1); border-radius:var(--radius); overflow:hidden; }
.roi-stat { background:var(--dark-2); padding:20px; display:flex; flex-direction:column; gap:6px; }
.roi-stat-wide { grid-column:1 / -1; }
.roi-stat-label { font-family:var(--font-body); font-size:12px; font-weight:500; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.04em; }
.roi-stat-num { font-family:var(--font-head); font-size:clamp(22px,2.2vw,28px); font-weight:700; letter-spacing:-0.01em; }
.roi-pos { color:var(--green); }
.roi-neg { color:var(--orange); }
.roi-return { font-family:var(--font-body); font-size:15px; color:rgba(255,255,255,0.85); margin:0; }
.roi-return strong { color:var(--white); font-weight:700; }
.roi-cta { align-self:flex-start; }
.roi-disclaimer { font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,0.45); line-height:1.5; margin:0; }
@media (max-width:860px){
    .roi-card { grid-template-columns:1fr; }
    .roi-inputs,.roi-results { padding:32px 26px; }
}
@media (max-width:420px){
    .roi-plans { grid-template-columns:1fr; }
    .roi-stats { grid-template-columns:1fr; }
}

/* Home: space between intro copy and the photo/grid below */
.why-intro { margin-bottom:60px; }
@media (max-width:860px){ .why-intro { margin-bottom:40px; } }

/* ============================================================
   FREE ONE-PAGE LANDING (page-one-page-website)
============================================================ */
.fp-hero { position:relative; background:var(--dark); color:var(--white); padding:160px 0 90px; overflow:hidden; }
@media (max-width:600px){ .fp-hero { padding:130px 0 60px; } }
.fp-hero-glow { position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:900px; height:600px; background:radial-gradient(closest-side, rgba(0,196,114,0.18), transparent 70%); pointer-events:none; }
.fp-hero-inner { position:relative; z-index:2; max-width:810px; }
.fp-hero-eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--green); background:rgba(0,196,114,0.1); border:1px solid rgba(0,196,114,0.25); padding:8px 16px; border-radius:100px; margin-bottom:26px; }
.fp-pulse { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(0,196,114,0.6); animation:fpPulse 2s infinite; }
@keyframes fpPulse { 0%{box-shadow:0 0 0 0 rgba(0,196,114,0.5)} 70%{box-shadow:0 0 0 9px rgba(0,196,114,0)} 100%{box-shadow:0 0 0 0 rgba(0,196,114,0)} }
.fp-hero-title { font-family:var(--font-head); font-size:clamp(40px,6vw,76px); font-weight:800; line-height:0.98; letter-spacing:-0.035em; margin-bottom:24px; }
.fp-free { color:rgba(255,255,255,0.55); }
.fp-free em { font-style:normal; color:var(--green); }
.fp-hero-sub { font-family:var(--font-body); font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:rgba(255,255,255,0.72); max-width:620px; margin-bottom:32px; }
.fp-hero-sub strong { color:var(--white); font-weight:600; }
.fp-urgency { display:flex; flex-wrap:wrap; gap:18px; align-items:stretch; margin-bottom:34px; }
.fp-countdown { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:18px 22px; }
.fp-cd-unit { display:flex; flex-direction:column; align-items:center; min-width:46px; }
.fp-cd-num { font-family:var(--font-head); font-size:30px; font-weight:800; line-height:1; letter-spacing:-0.02em; color:var(--white); font-variant-numeric:tabular-nums; }
.fp-cd-lbl { font-family:var(--font-body); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.45); margin-top:7px; }
.fp-cd-sep { font-family:var(--font-head); font-size:26px; font-weight:700; color:rgba(255,255,255,0.25); align-self:flex-start; margin-top:2px; }
.fp-spots { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:16px 22px; display:flex; flex-direction:column; justify-content:center; gap:9px; }
.fp-spots-top { font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,0.72); }
.fp-spots-top strong { color:var(--green); font-weight:700; }
.fp-spots-bar { display:flex; gap:6px; }
.fp-spot { width:34px; height:8px; border-radius:100px; }
.fp-spot.is-open { background:var(--green); }
.fp-spot.is-taken { background:rgba(255,255,255,0.16); }
.fp-spots-note { font-family:var(--font-body); font-size:11px; color:rgba(255,255,255,0.4); }
.fp-hero-cta { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.fp-hero-trust { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,0.6); }
.fp-stars { color:#FFB400; letter-spacing:2px; margin-right:6px; }
@media (max-width:560px){
    .fp-urgency { flex-direction:column; }
    .fp-countdown,.fp-spots { width:100%; }
    .fp-countdown { justify-content:space-between; }
}

/* Speed steps */
.fp-speed { background:var(--white); padding:96px 0; }
.fp-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.fp-step { background:var(--light); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:34px 30px; }
.fp-step-num { font-family:var(--font-head); font-size:34px; font-weight:800; color:var(--blue); letter-spacing:-0.02em; margin-bottom:14px; }
.fp-step h4 { font-family:var(--font-head); font-size:19px; font-weight:700; color:var(--dark); margin-bottom:10px; }
.fp-step p { font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--mid); }
@media (max-width:760px){ .fp-steps { grid-template-columns:1fr; } }

/* What you get */
.fp-get { background:var(--light); padding:96px 0; }
.fp-get-grid { display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:center; }
.fp-get-copy .tag { margin-bottom:0; }
.fp-get-copy > p { font-family:var(--font-body); font-size:16px; line-height:1.65; color:var(--mid); margin:18px 0 28px; }
.fp-get-price { display:flex; align-items:center; gap:18px; padding:22px 26px; background:var(--white); border:1px solid var(--border-light); border-radius:var(--radius-lg); margin-bottom:28px; }
.fp-get-price-big { font-family:var(--font-head); font-size:54px; font-weight:800; color:var(--green); line-height:1; letter-spacing:-0.03em; }
.fp-get-price-sub { font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--mid); }
.fp-get-list { display:flex; flex-direction:column; gap:4px; }
.fp-get-list li { display:flex; align-items:flex-start; gap:14px; padding:18px 20px; background:var(--white); border:1px solid var(--border-light); border-radius:var(--radius); }
.fp-get-list li svg { width:20px; height:20px; flex-shrink:0; color:var(--green); margin-top:1px; }
.fp-get-list li strong { display:block; font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--dark); margin-bottom:2px; }
.fp-get-list li span { font-family:var(--font-body); font-size:13.5px; line-height:1.5; color:var(--mid); }
@media (max-width:820px){ .fp-get-grid { grid-template-columns:1fr; gap:36px; } }

/* Benefits */
.fp-benefits { background:var(--white); padding:96px 0; }
.fp-benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.fp-benefit { padding:32px 30px; border:1px solid var(--border-light); border-radius:var(--radius-lg); transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease); }
.fp-benefit:hover { transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,0.06); }
.fp-benefit-icon { width:50px; height:50px; border-radius:12px; background:rgba(26,76,255,0.08); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.fp-benefit h3 { font-family:var(--font-head); font-size:19px; font-weight:700; color:var(--dark); margin-bottom:10px; letter-spacing:-0.01em; }
.fp-benefit p { font-family:var(--font-body); font-size:14px; line-height:1.62; color:var(--mid); }
@media (max-width:860px){ .fp-benefit-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .fp-benefit-grid { grid-template-columns:1fr; } }

/* Grow / push to paid */
.fp-grow { background:var(--light); padding:96px 0; }
.fp-work { background:var(--white); }

/* Free landing testimonials: white card, italic quote (scoped) */
.pkg-reviews.fp-reviews { background:var(--light); }
.fp-reviews .tq-grid { grid-template-columns:repeat(2,1fr); gap:28px; max-width:1040px; margin-left:auto; margin-right:auto; }
.fp-reviews .tq-card { background:#fff; border:1px solid var(--border-light); border-radius:20px; padding:46px 48px; box-shadow:0 12px 44px rgba(0,0,0,0.05); min-height:auto; }
.fp-reviews .tq-stars { color:#FFB400; margin-bottom:24px; }
.fp-reviews .tq-stars svg { width:18px; height:18px; }
.fp-reviews .tq-quote { font-family:var(--font-body); font-style:italic; font-weight:400; font-size:clamp(17px,1.45vw,20px); line-height:1.55; letter-spacing:0; color:#3a3a3a; }
.fp-reviews .tq-author { margin-top:30px; font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--dark); }
.fp-reviews .tq-author span { font-family:var(--font-body); font-weight:400; font-size:14px; color:var(--mid); margin-top:6px; }
@media (max-width:760px){ .fp-reviews .tq-grid { grid-template-columns:1fr; } .fp-reviews .tq-card { padding:34px 30px; } }

/* Home: mini local-SEO intro above pricing */
.seo-intro { text-align:center; max-width:840px; margin:0 auto 64px; }
.seo-intro .tag { margin-bottom:16px; }
.seo-intro-title { font-family:var(--font-head); font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-0.03em; line-height:1.05; color:var(--dark); margin-bottom:18px; }
.seo-intro-lead { font-family:var(--font-body); font-size:16px; line-height:1.7; color:var(--mid); margin:0; }