/* Sculpt & Scale — visual theme (Oct 2026 refresh)
   Loaded AFTER each page's own <style> so it wins. Delete the <link> to theme.css to revert.
   Look: pure black, Poppins, glowing hero, pill section labels, glossy gradient buttons, soft rounded cards. */

:root {
  --blue: #1A6FD4;
  --blue-light: #4a95f2;
  --blue-deep: #0d4a9c;
  --blue-dim: rgba(26,111,212,0.12);
  --blue-border: rgba(74,149,242,0.28);
  --black: #000000;
  --dark: #000000;
  --card: #0c0c0c;
  --card-2: #141414;
  --border: rgba(255,255,255,0.07);
  --white: #F5F5F5;
  --grey: #B3B3B3;
  --grey-light: #D6D6D6;
  --font: 'Poppins', 'Inter', system-ui, sans-serif;
  --card-bg: linear-gradient(180deg, #111111 0%, #0a0a0a 100%);
  --btn-bg: linear-gradient(180deg, #3b8ff5 0%, #1A6FD4 45%, #0f4fa6 100%);
}

html, body { background: #000 !important; }
body { font-family: var(--font); color: var(--white); letter-spacing: -0.005em; }
body :is(button, input, select, textarea, .maths-input, .cc-banner, .skip-link) { font-family: var(--font); }

/* headings: Poppins semibold, tight */
body :is(h1, h2, h3, .section-title, .case-headline) { font-family: var(--font); letter-spacing: -0.03em; }
body :is(h1, .section-title) { font-weight: 600; }
body :is(h2, h3) { font-weight: 600; }
body :is(.proof-stat-num, .case-metric-num, .hero-focal-num, .yt-feat-stat-num, .maths-result-num, .cs-metric-num, .cs-roas-num) { font-weight: 600; letter-spacing: -0.03em; }

/* Poppins reads heavier than Inter: bring 800/900 weights down to semibold */
body :is(h3, h4, strong, b, .faq-q, .obj-question, .for-col-title, .case-headline, .cs-headline) { font-weight: 600; }

/* section labels that had an inline display:block (e.g. in the final CTA card) */
body .section-tag[style*="display:block"] { display: flex !important; width: fit-content; margin-left: auto; margin-right: auto; }

/* ── NAV: floating rounded bar ── */
body nav {
  top: 12px; left: 50%; right: auto; transform: translateX(-50%);
  width: min(1180px, calc(100% - 24px)); height: 60px; padding: 0 12px 0 18px;
  background: rgba(14,14,14,0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}
body nav .nav-links a { font-weight: 400; color: #bdbdbd; }
body nav .nav-links a:hover, body nav .nav-links a.active { color: #fff; }
body nav .btn { padding: 10px 20px; }
body .mobile-menu {
  top: 80px; left: 12px; right: 12px; border-radius: 14px;
  background: rgba(14,14,14,0.96); border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
}

/* ── BUTTONS: glossy gradient with a soft ring ── */
body .btn { border-radius: 10px; font-weight: 500; letter-spacing: 0; }
body :is(.btn-blue, .cc-accept) {
  background: var(--btn-bg); color: #fff !important;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 4px rgba(26,111,212,0.14), 0 10px 30px rgba(26,111,212,0.35);
}
body :is(.btn-blue, .cc-accept):hover { background: var(--btn-bg); filter: brightness(1.12); transform: translateY(-1px); }
body .btn-ghost, body .btn-outline {
  background: rgba(255,255,255,0.03); color: var(--white);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
body .btn-ghost:hover, body .btn-outline:hover { background: rgba(255,255,255,0.07); color: #fff; border-color: rgba(255,255,255,0.22); }
body .btn-lg { padding: 15px 34px; border-radius: 12px; }

/* ── HERO: big blue glow from the top, like light through smoke ── */
body :is(.hero, .page-hero) { background: #000; border-bottom: 0; isolation: isolate; }
body :is(.hero, .page-hero)::before {
  top: -240px; left: 50%; transform: translateX(-50%);
  width: 150%; max-width: 2000px; height: 820px; z-index: -1;
  background:
    radial-gradient(40% 50% at 18% 45%, rgba(26,111,212,0.85) 0%, transparent 70%),
    radial-gradient(36% 46% at 84% 38%, rgba(13,74,156,0.95) 0%, transparent 72%),
    radial-gradient(60% 45% at 50% 30%, rgba(45,131,239,0.45) 0%, transparent 70%),
    radial-gradient(30% 30% at 62% 55%, rgba(120,180,255,0.25) 0%, transparent 70%);
  filter: blur(50px); opacity: 1;
}
body :is(.hero, .page-hero)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: -1;
  background: linear-gradient(180deg, transparent, #000); pointer-events: none;
}
body section.hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.045em; }
body .page-hero h1 { font-weight: 600; letter-spacing: -0.04em; }
body :is(.hero, .page-hero) h1 span { color: var(--blue-light); }
body :is(.hero-sub, .page-hero p) { color: #bdbdbd; }

/* small label above the hero heading: plain text, like "Trusted by…" */
body :is(.hero-tag, .page-hero-tag) {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: #e6e6e6; text-transform: none; letter-spacing: 0; font-weight: 500;
  border-radius: 8px; backdrop-filter: blur(8px);
}
body .hero-tag::before { background: var(--blue-light); box-shadow: 0 0 10px var(--blue-light); }

body .seed { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); border-radius: 8px; }
body :is(.hero-trust-item .tick, .seed-tick) { color: var(--blue-light); }
body .hero-focal { background: var(--card-bg); border-color: rgba(255,255,255,0.08); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 80px rgba(26,111,212,0.12); }

/* ── SECTIONS: one continuous black page, no banding ── */
body :is(.problem, .system, .proof-section, .objections, .youtube, .for-you, .cta-section, .compare-section, .proof-bar, footer, section) { background: #000; border-top: 0; border-bottom: 0; }
body section.section { padding-top: 112px; padding-bottom: 112px; }

/* section label: small dark pill with a blue square, e.g. "▪ Our Results" */
body .section-tag {
  display: inline-flex; align-items: center; gap: 8px; width: auto;
  background: #141414; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
  padding: 5px 11px; margin-bottom: 18px;
  font-size: 0.75rem !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important;
  color: #e6e6e6 !important;
}
body .section-tag::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--blue-light); box-shadow: 0 0 8px var(--blue-light); flex-shrink: 0; }
body .section-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
body .section-sub { color: #b3b3b3; }

/* centre the header block of each section (label, title, intro) */
body .section-inner > :is(.section-tag) { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
body .section-inner > :is(.section-title, .section-sub),
body :is(.system-header) > :is(.section-title, .section-sub) { text-align: center; margin-left: auto; margin-right: auto; }
body .section-inner > .section-title { max-width: 820px; }
body .resources-inner > :is(.section-title, .section-sub) { text-align: center; margin-left: auto; margin-right: auto; }
body .resources-inner > .section-title { font-weight: 600 !important; }

/* booking page banner: black with the hero glow instead of a navy block */
body .booking-banner { background: #000; border-bottom: 0; position: relative; overflow: hidden; isolation: isolate; }
body .booking-banner::before {
  content: ''; position: absolute; top: -260px; left: 50%; transform: translateX(-50%);
  width: 150%; max-width: 2000px; height: 700px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 45%, rgba(26,111,212,0.8) 0%, transparent 70%),
    radial-gradient(36% 46% at 82% 38%, rgba(13,74,156,0.9) 0%, transparent 72%),
    radial-gradient(60% 45% at 50% 30%, rgba(45,131,239,0.4) 0%, transparent 70%);
  filter: blur(50px);
}
body .booking-banner-tag { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #e6e6e6; border-radius: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; }
body .booking-banner h1 { font-weight: 600; letter-spacing: -0.04em; }
body .system-header > .section-tag { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
body .system-header { text-align: center; }

/* proof bar: numbers sit in their own soft card */
body .proof-bar { padding: 24px 5% 8px; }
body .proof-bar-inner { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 28px 16px; }
body .proof-stat-num { color: #fff; }

/* ── CARDS ── */
body :is(.pain-card, .pillar, .system-flow, .case-card, .obj-card, .yt-card, .yt-featured, .for-col, .cta-card, .maths-card, .onboard-step, .faq-item, .compare-grid, .resource-card, .info-card, .cs-card, .service-card) {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
body :is(.pain-card, .pillar, .case-card, .obj-card, .yt-card, .resource-card, .cs-card, .service-card):hover { border-color: rgba(74,149,242,0.35); }
body .pillar::before { height: 1px; background: linear-gradient(90deg, transparent, var(--blue-light), transparent); }
body .pillar :is(.pillar-list li::before) { color: var(--blue-light); }
body .faq-q:hover { background: rgba(255,255,255,0.03); }

/* icon tiles: filled blue gradient squares with white line icons */
body :is(.flow-icon) {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--btn-bg); border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 24px rgba(26,111,212,0.35);
}
body .flow-icon svg { stroke: #fff; }
body .pain-icon svg { stroke: var(--blue-light); }

/* case study cards: dark header with a blue glow instead of the navy block */
body .case-card-header {
  background: radial-gradient(120% 140% at 0% 0%, rgba(26,111,212,0.28) 0%, transparent 60%), #0d0d0d;
  border-bottom: 1px solid var(--border);
}
body .case-metric-num { color: #fff; }
body .case-quote { background: rgba(255,255,255,0.03); border-left-color: var(--blue-light); border-radius: 0 10px 10px 0; }

/* comparison: the Sculpt & Scale column glows blue, like a highlighted plan */
body .compare-header.bad { background: #0e0e0e; }
body .compare-header.good { background: linear-gradient(180deg, #1d6fd6 0%, #0f4fa6 100%); color: #fff !important; border-color: transparent; }
body .compare-cell.good { background: rgba(26,111,212,0.10); color: #fff; }
body .compare-cell.good .cx { color: var(--blue-light); }

/* ROI maths band: black with a soft glow instead of a navy strip */
body .maths-section { background: radial-gradient(60% 50% at 50% 0%, rgba(26,111,212,0.18) 0%, transparent 70%), #000; border: 0; }
body .maths-card.featured { background: radial-gradient(100% 80% at 50% 0%, rgba(26,111,212,0.18), transparent 70%), #0c0c0c; border-color: var(--blue-border); }
body .maths-input { background: #141414; }

/* final CTA card: blue glow like TradeBoss's highlighted card */
body .cta-card {
  background: radial-gradient(90% 70% at 50% 0%, rgba(26,111,212,0.40) 0%, transparent 70%), #0a0a0a;
  border-color: rgba(74,149,242,0.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 30px 90px rgba(26,111,212,0.18);
}
body .cta-card::before { display: none; }

body .yt-thumb-placeholder { background: radial-gradient(80% 80% at 50% 30%, rgba(26,111,212,0.3), transparent 70%), #0a0a0a; }

/* sticky bar + footer */
body .sticky-bar { background: rgba(8,8,8,0.9); border-top: 1px solid rgba(255,255,255,0.08); }
body footer { border-top: 1px solid rgba(255,255,255,0.06); }
body .cc-banner { background: #0e0e0e; border-color: rgba(255,255,255,0.1); border-radius: 16px; }

@media (max-width: 768px) {
  body nav { top: 8px; width: calc(100% - 16px); height: 58px; }
  body .mobile-menu { top: 74px; left: 8px; right: 8px; }
  body section.hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  body section.section { padding-top: 80px; padding-bottom: 80px; }
  body :is(.hero, .page-hero)::before { width: 260%; height: 600px; top: -220px; }
}

/* ── CLOSER TO TRADEBOSS (17 Oct 2026, pass 2) ─────────────────────────────
   Same structure, your blue. Delete from here down to go back to pass 1. */

/* hero glow: a dark smoky sweep across the top instead of a bright blue wash */
body :is(.hero, .page-hero)::before {
  top: -320px; height: 760px; opacity: 0.9; filter: blur(60px);
  background:
    linear-gradient(160deg, transparent 22%, rgba(26,111,212,0.55) 40%, rgba(13,74,156,0.35) 52%, transparent 66%),
    radial-gradient(38% 42% at 72% 30%, rgba(13,74,156,0.85) 0%, transparent 70%),
    radial-gradient(30% 36% at 22% 22%, rgba(26,111,212,0.5) 0%, transparent 70%);
}
body .booking-banner::before { opacity: 0.75; }

/* hero label: plain small text, like "Trusted by Trades Businesses" */
body :is(.hero-tag, .page-hero-tag) {
  background: none; border: 0; padding: 0; backdrop-filter: none;
  color: #cfcfcf; font-size: 0.9rem; font-weight: 400;
}
body .hero-tag::before { display: none; }

/* hero headline: all white, big, tight */
body section.hero h1 { font-size: clamp(2.6rem, 6.6vw, 5.2rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.05em; }
body :is(.hero, .page-hero) h1 span { color: #fff; }
body .page-hero h1 { font-weight: 500; }
body .hero-headline-sub { color: #e6e6e6; }
body :is(.hero-sub, .page-hero p) { color: #a3a3a3; }
body .hero-sub strong { color: #e6e6e6; font-weight: 500; }

/* "Yes, even if…" lines: plain ticks, no boxes */
body .seed { background: none; border: 0; padding: 4px 6px; color: #cfcfcf; }

/* section headings fade from white to grey, like TradeBoss */
body .section-title {
  font-weight: 500;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 35%, #8c8c8c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #fff;
}
body .section-title * { -webkit-text-fill-color: transparent; }
body .section-sub { color: #8f8f8f; }

/* section label: round glowing dot */
body .section-tag { background: #0f0f0f; border-radius: 7px; }
body .section-tag::before { border-radius: 50%; }

/* buttons: deeper, solid, quieter glow */
:root { --btn-bg: linear-gradient(180deg, #2f80e8 0%, #1A6FD4 40%, #0d4a9c 100%); }
body :is(.btn-blue, .cc-accept) {
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1px rgba(13,74,156,0.6), 0 8px 24px rgba(26,111,212,0.22);
}

/* nav: darker, more solid bar */
body nav { background: rgba(10,10,10,0.82); border-color: rgba(255,255,255,0.07); border-radius: 12px; }

/* cards: darker, flatter */
body :is(.pain-card, .pillar, .system-flow, .case-card, .obj-card, .yt-card, .yt-featured, .for-col, .maths-card, .onboard-step, .faq-item, .compare-grid, .resource-card, .info-card, .cs-card, .service-card) {
  background: #0a0a0a; border-color: rgba(255,255,255,0.06);
}
body .flow-icon {
  background: radial-gradient(100% 100% at 50% 0%, rgba(26,111,212,0.55), rgba(13,74,156,0.25)), #0d0d0d;
  border-color: rgba(74,149,242,0.3); box-shadow: 0 6px 20px rgba(26,111,212,0.2);
}

/* fade-up on scroll (site.js adds .reveal; nothing is hidden without JavaScript) */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 768px) {
  body section.hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
}

/* nav at tablet/small-laptop widths: links sit to the right of the logo instead of overlapping it */
@media (min-width: 769px) and (max-width: 1080px) {
  body nav .nav-links { position: static; transform: none; margin-left: auto; gap: 18px; }
  body nav .nav-links a { white-space: nowrap; font-size: 0.82rem; }
  body nav .nav-logo-text { font-size: 1.15rem; }
}

/* nav logo: the image file has a black square background, so show only the blue circle */
body :is(nav .nav-logo-img, .footer-logo-img) { clip-path: circle(26.5% at 50% 50%); transform: scale(1.75); mix-blend-mode: normal; filter: none; }