/*
Theme Name: GBPBeast Child
Theme URI: https://gbpbeast.com
Description: Custom Hello Elementor child theme for GBPBeast.com — a Google Business Profile Optimization and Management Service. Bright, clean, professional design with a multi-step lead form wizard, conversion-focused hero, and service pricing tiers.
Author: GBPBeast
Author URI: https://gbpbeast.com
Template: hello-elementor
Version: 1.0.0
Text Domain: gbpbeast-child
License: GNU General Public License v2 or later
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand palette — deep ink blue + vivid coral, on bright neutral */
  --gbp-ink:        #0d1b3e;   /* deep navy ink */
  --gbp-ink-2:      #16285a;   /* secondary navy */
  --gbp-blue:       #2563eb;   /* trust blue / Google-adjacent */
  --gbp-blue-soft:  #e8f0ff;
  --gbp-coral:      #ff5a36;   /* energetic accent (the "beast") */
  --gbp-coral-dark: #e8451f;
  --gbp-gold:       #ffb020;   /* review stars / highlights */
  --gbp-mint:       #16b878;   /* success / "rankings up" */
  --gbp-paper:      #ffffff;
  --gbp-cloud:      #f5f8ff;   /* section tint */
  --gbp-mist:       #eef3fb;
  --gbp-line:       #dde6f4;
  --gbp-muted:      #5b6b87;
  --gbp-text:       #1a2342;

  /* Typography */
  --gbp-font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --gbp-font-body:    "Plus Jakarta Sans", "Segoe UI", sans-serif;

  /* Spacing & shape */
  --gbp-radius:      18px;
  --gbp-radius-sm:   12px;
  --gbp-radius-lg:   28px;
  --gbp-shadow:      0 18px 48px -18px rgba(13, 27, 62, 0.28);
  --gbp-shadow-sm:   0 6px 20px -8px rgba(13, 27, 62, 0.22);
  --gbp-shadow-coral:0 18px 40px -14px rgba(255, 90, 54, 0.45);
  --gbp-maxw:        1200px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
body.gbpbeast {
  font-family: var(--gbp-font-body);
  color: var(--gbp-text);
  background: var(--gbp-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.gbp-wrap { max-width: var(--gbp-maxw); margin: 0 auto; padding: 0 24px; }

.gbpbeast h1, .gbpbeast h2, .gbpbeast h3, .gbpbeast h4 {
  font-family: var(--gbp-font-display);
  color: var(--gbp-ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

.gbpbeast h2.gbp-section-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  text-align: center;
}

.gbp-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gbp-coral);
  margin-bottom: 14px;
}

.gbp-lead {
  font-size: 1.12rem;
  color: var(--gbp-muted);
  max-width: 640px;
  margin: 0 auto;
}

.gbp-section { padding: 96px 0; }
.gbp-section--tint { background: var(--gbp-cloud); }
.gbp-section--ink {
  background: linear-gradient(160deg, var(--gbp-ink) 0%, var(--gbp-ink-2) 100%);
  color: #cdd8f0;
}
.gbp-section--ink h2, .gbp-section--ink h3 { color: #fff; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.gbp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gbp-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 16px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.gbp-btn--primary {
  background: var(--gbp-coral);
  color: #fff;
  box-shadow: var(--gbp-shadow-coral);
}
.gbp-btn--primary:hover { transform: translateY(-2px); background: var(--gbp-coral-dark); }
.gbp-btn--ghost {
  background: transparent;
  color: var(--gbp-ink);
  border: 2px solid var(--gbp-line);
}
.gbp-btn--ghost:hover { border-color: var(--gbp-blue); color: var(--gbp-blue); }
.gbp-btn--block { width: 100%; justify-content: center; }
.gbp-btn--lg { padding: 19px 38px; font-size: 1.12rem; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.gbp-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gbp-line);
}
.gbp-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px;
}
.gbp-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--gbp-font-display);
  font-weight: 800; font-size: 1.35rem; color: var(--gbp-ink);
  text-decoration: none; letter-spacing: -0.02em;
}
.gbp-logo__mark {
  width: 36px; height: 40px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.gbp-logo__mark svg {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 5px 10px rgba(255, 90, 54, 0.35));
}
.gbp-logo b { color: var(--gbp-coral); }
.gbp-nav { display: flex; align-items: center; gap: 30px; }
.gbp-nav a { color: var(--gbp-ink); text-decoration: none; font-weight: 600; font-size: 0.96rem; }
.gbp-nav a:hover { color: var(--gbp-coral); }
.gbp-nav__cta { padding: 11px 22px; font-size: 0.95rem; }
.gbp-burger { display: none; background: none; border: 0; cursor: pointer; }

/* ==========================================================================
   HERO
   ========================================================================== */
.gbp-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(8,18,46,0.93) 0%, rgba(13,27,62,0.82) 48%, rgba(13,27,62,0.55) 100%),
    var(--gbp-hero-image, linear-gradient(120deg,#0d1b3e,#16285a));
  background-size: cover;
  background-position: center;
}
.gbp-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: 84px 0 96px;
}
.gbp-hero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 8px 16px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; margin-bottom: 22px;
}
.gbp-hero__pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gbp-mint); box-shadow: 0 0 0 4px rgba(22,184,120,.25); }
.gbp-hero h1 {
  color: #fff;
  font-size: clamp(2.3rem, 4.8vw, 3.7rem);
  font-weight: 800;
  margin-bottom: 20px;
}
.gbp-hero h1 .hl { color: var(--gbp-gold); }
.gbp-hero__sub { font-size: 1.18rem; color: #d4ddf2; max-width: 540px; margin-bottom: 30px; }
.gbp-hero__checks { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 0; }
.gbp-hero__checks span { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.98rem; }
.gbp-hero__checks .ic { color: var(--gbp-mint); font-weight: 800; }
.gbp-hero__stars { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 0.95rem; color: #d4ddf2; }
.gbp-hero__stars .stars { color: var(--gbp-gold); letter-spacing: 2px; font-size: 1.1rem; }

/* ==========================================================================
   LEAD FORM WIZARD
   ========================================================================== */
.gbp-wizard {
  background: #fff;
  color: var(--gbp-text);
  border-radius: var(--gbp-radius-lg);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5);
  padding: 34px;
  position: relative;
}
.gbp-wizard__head { text-align: center; margin-bottom: 22px; }
.gbp-wizard__head h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.gbp-wizard__head p { color: var(--gbp-muted); font-size: 0.95rem; margin: 0; }
.gbp-wizard__free {
  display:inline-block; background: var(--gbp-blue-soft); color: var(--gbp-blue);
  font-weight: 700; font-size: 0.8rem; padding: 5px 13px; border-radius: 999px; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* progress */
.gbp-wiz-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; }
.gbp-wiz-progress .seg { flex: 1; height: 6px; border-radius: 99px; background: var(--gbp-mist); overflow: hidden; }
.gbp-wiz-progress .seg i { display: block; height: 100%; width: 0; background: var(--gbp-coral); transition: width .4s ease; }
.gbp-wiz-progress .seg.done i, .gbp-wiz-progress .seg.active i { width: 100%; }
.gbp-wiz-count { font-size: 0.8rem; font-weight: 700; color: var(--gbp-muted); white-space: nowrap; }

/* steps */
.gbp-wiz-step { display: none; animation: gbpFade .35s ease; }
.gbp-wiz-step.active { display: block; }
@keyframes gbpFade { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }
.gbp-wiz-step h4 { font-size: 1.15rem; margin-bottom: 4px; }
.gbp-wiz-step p.hint { color: var(--gbp-muted); font-size: 0.9rem; margin: 0 0 18px; }

.gbp-field { margin-bottom: 16px; }
.gbp-field label { display:block; font-weight: 600; font-size: 0.9rem; margin-bottom: 7px; }
.gbp-field input, .gbp-field select, .gbp-field textarea {
  width: 100%; padding: 14px 16px; border: 2px solid var(--gbp-line);
  border-radius: var(--gbp-radius-sm); font-size: 1rem; font-family: inherit;
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.gbp-field input:focus, .gbp-field select:focus, .gbp-field textarea:focus {
  outline: none; border-color: var(--gbp-blue); box-shadow: 0 0 0 4px var(--gbp-blue-soft);
}
.gbp-field input.gbp-error { border-color: var(--gbp-coral); }

/* choice cards */
.gbp-choices { display: grid; gap: 12px; }
.gbp-choice {
  display: flex; align-items: center; gap: 14px;
  border: 2px solid var(--gbp-line); border-radius: var(--gbp-radius-sm);
  padding: 15px 16px; cursor: pointer; transition: all .15s ease; background:#fff;
}
.gbp-choice:hover { border-color: var(--gbp-blue); background: var(--gbp-blue-soft); }
.gbp-choice.selected { border-color: var(--gbp-coral); background: #fff5f2; }
.gbp-choice input { display: none; }
.gbp-choice .emoji { font-size: 1.4rem; }
.gbp-choice .lab b { display:block; font-weight: 700; font-size: 0.98rem; }
.gbp-choice .lab small { color: var(--gbp-muted); }

.gbp-wiz-nav { display: flex; gap: 12px; margin-top: 24px; }
.gbp-wiz-nav .gbp-btn { flex: 1; }
.gbp-wiz-back { flex: 0 0 auto !important; width: auto !important; }

.gbp-wiz-done { text-align: center; padding: 18px 0; }
.gbp-wiz-done .check {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--gbp-mint); color: #fff; display: grid; place-items: center; font-size: 2rem;
  box-shadow: 0 12px 30px -8px rgba(22,184,120,.5);
}
.gbp-trust-row { display:flex; justify-content:center; gap:18px; margin-top:18px; color:var(--gbp-muted); font-size:0.8rem; }

/* ==========================================================================
   LOGO / TRUST STRIP
   ========================================================================== */
.gbp-strip { padding: 30px 0; border-bottom: 1px solid var(--gbp-line); }
.gbp-strip__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.gbp-strip p { margin:0; font-weight:700; color:var(--gbp-muted); font-size:0.9rem; }
.gbp-strip .stat { text-align:center; }
.gbp-strip .stat b { display:block; font-family:var(--gbp-font-display); font-size:1.7rem; color:var(--gbp-ink); font-weight:800; }
.gbp-strip .stat span { font-size:0.82rem; color:var(--gbp-muted); }

/* ==========================================================================
   FREE OFFER CARDS
   ========================================================================== */
.gbp-grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; margin-top:54px; }
.gbp-card {
  background:#fff; border:1px solid var(--gbp-line); border-radius:var(--gbp-radius);
  padding:32px 28px; box-shadow:var(--gbp-shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.gbp-card:hover { transform:translateY(-6px); box-shadow:var(--gbp-shadow); }
.gbp-card__icon {
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  font-size:1.5rem; margin-bottom:18px; background:var(--gbp-blue-soft); color:var(--gbp-blue);
}
.gbp-card h3 { font-size:1.2rem; margin-bottom:8px; }
.gbp-card p { color:var(--gbp-muted); font-size:0.96rem; margin:0; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.gbp-pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:54px; align-items:stretch; }
.gbp-price {
  position:relative; background:#fff; border:2px solid var(--gbp-line);
  border-radius:var(--gbp-radius-lg); padding:36px 30px; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
  box-sizing:border-box;
}
.gbp-price * { box-sizing:border-box; }
.gbp-price .gbp-btn--block { max-width:100%; }
.gbp-price:hover { transform:translateY(-6px); box-shadow:var(--gbp-shadow); }
.gbp-price--featured {
  border-color:var(--gbp-coral);
  box-shadow:0 30px 60px -24px rgba(255,90,54,.4);
  transform:scale(1.03);
}
.gbp-price--featured:hover { transform:scale(1.03) translateY(-6px); }

/* On service pages the featured card stands alone in a 2-col split;
   the scale() transform there causes edge overflow, so neutralize it. */
.gbpbeast-service .gbp-price--featured { transform:none; }
.gbpbeast-service .gbp-price--featured:hover { transform:translateY(-6px); }
.gbpbeast-service .gbp-split { align-items:flex-start; }
.gbpbeast-service .gbp-split > div { min-width:0; }
.gbp-price__badge {
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background:var(--gbp-coral); color:#fff; font-weight:700; font-size:0.78rem;
  padding:7px 18px; border-radius:999px; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap;
}
.gbp-price h3 { font-size:1.25rem; margin-bottom:6px; }
.gbp-price .desc { color:var(--gbp-muted); font-size:0.9rem; min-height:42px; margin-bottom:18px; }
.gbp-price .amt { font-family:var(--gbp-font-display); font-weight:800; color:var(--gbp-ink); font-size:2.6rem; line-height:1; }
.gbp-price .amt sup { font-size:1.1rem; top:-1.1em; margin-right:2px; }
.gbp-price .per { color:var(--gbp-muted); font-size:0.92rem; margin-bottom:24px; }
.gbp-price ul { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:11px; }
.gbp-price li { display:flex; gap:10px; font-size:0.95rem; color:var(--gbp-text); }
.gbp-price li .ic { color:var(--gbp-mint); font-weight:800; flex:0 0 auto; }
.gbp-price li.off { color:#9aa6c0; }
.gbp-price li.off .ic { color:#cfd7e8; }
.gbp-price .gbp-btn { margin-top:auto; }
.gbp-guarantee {
  margin-top:40px; text-align:center; display:flex; align-items:center; justify-content:center; gap:12px;
  font-weight:700; color:var(--gbp-ink); flex-wrap:wrap;
}
.gbp-guarantee .seal {
  background:var(--gbp-mint); color:#fff; padding:8px 16px; border-radius:999px; font-size:0.9rem;
  display:inline-flex; align-items:center; gap:8px;
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.gbp-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:54px; counter-reset:step; }
.gbp-step { position:relative; padding-top:18px; }
.gbp-step__num {
  font-family:var(--gbp-font-display); font-weight:800; font-size:3rem;
  color:var(--gbp-coral); opacity:.25; line-height:1; margin-bottom:8px;
}
.gbp-step h3 { font-size:1.2rem; margin-bottom:8px; }
.gbp-step p { color:var(--gbp-muted); margin:0; }

/* ==========================================================================
   FEATURE / AUTOPILOT SPLIT
   ========================================================================== */
.gbp-split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.gbp-split__media {
  border-radius:var(--gbp-radius-lg); overflow:hidden; box-shadow:var(--gbp-shadow);
  background:linear-gradient(140deg,var(--gbp-ink),var(--gbp-blue)); aspect-ratio:4/3;
  display:grid; place-items:center; color:#fff; position:relative;
}
.gbp-split ul { list-style:none; padding:0; margin:24px 0 30px; display:grid; gap:14px; }
.gbp-split li { display:flex; gap:12px; align-items:flex-start; }
.gbp-split li .ic { width:26px;height:26px;border-radius:8px;background:var(--gbp-mint);color:#fff;display:grid;place-items:center;flex:0 0 auto;font-weight:800;font-size:0.8rem; }
.gbp-split li b { display:block; }
.gbp-split li span { color:var(--gbp-muted); font-size:0.92rem; }

/* mock rank widget */
.gbp-rankcard {
  background:#fff; color:var(--gbp-text); border-radius:var(--gbp-radius); padding:22px; width:80%;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.gbp-rankcard .row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--gbp-line); }
.gbp-rankcard .row:last-child { border:0; }
.gbp-rankcard .row .pos { font-weight:800; color:var(--gbp-mint); }
.gbp-rankcard .row .up { color:var(--gbp-mint); font-size:0.8rem; font-weight:700; }

/* ==========================================================================
   REVIEWS / TESTIMONIALS
   ========================================================================== */
.gbp-reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px; }
.gbp-review { background:#fff; border:1px solid var(--gbp-line); border-radius:var(--gbp-radius); padding:28px; box-shadow:var(--gbp-shadow-sm); }
.gbp-review .stars { color:var(--gbp-gold); letter-spacing:2px; margin-bottom:14px; }
.gbp-review p { font-size:0.98rem; margin:0 0 18px; }
.gbp-review .who { display:flex; align-items:center; gap:12px; }
.gbp-review .who .av { width:42px; height:42px; border-radius:50%; background:var(--gbp-blue-soft); color:var(--gbp-blue); display:grid; place-items:center; font-weight:800; }
.gbp-review .who b { display:block; font-size:0.95rem; }
.gbp-review .who small { color:var(--gbp-muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.gbp-faq { max-width:820px; margin:48px auto 0; }
.gbp-faq__item { border-bottom:1px solid var(--gbp-line); }
.gbp-faq__q {
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--gbp-font-display); font-weight:700; font-size:1.08rem; color:var(--gbp-ink);
  padding:22px 40px 22px 0; position:relative;
}
.gbp-faq__q::after { content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--gbp-coral); transition:transform .2s ease; }
.gbp-faq__item.open .gbp-faq__q::after { content:"−"; }
.gbp-faq__a { max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--gbp-muted); }
.gbp-faq__a div { padding:0 0 22px; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.gbp-finalcta { text-align:center; }
.gbp-finalcta h2 { font-size:clamp(2rem,4vw,3rem); color:#fff; margin-bottom:16px; }
.gbp-finalcta p { font-size:1.15rem; color:#cdd8f0; max-width:620px; margin:0 auto 32px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.gbp-footer { background:var(--gbp-ink); color:#9fb0d4; padding:64px 0 28px; }
.gbp-footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.gbp-footer a { color:#9fb0d4; text-decoration:none; display:block; padding:5px 0; font-size:0.95rem; }
.gbp-footer a:hover { color:#fff; }
.gbp-footer h4 { color:#fff; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; }
.gbp-footer .gbp-logo { color:#fff; margin-bottom:14px; }
.gbp-footer__bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.85rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .gbp-hero__inner { grid-template-columns:1fr; gap:40px; padding:60px 0; }
  .gbp-grid-3, .gbp-pricing, .gbp-steps, .gbp-reviews { grid-template-columns:1fr; }
  .gbp-split { grid-template-columns:1fr; gap:36px; }
  .gbp-price--featured { transform:none; }
  .gbp-price--featured:hover { transform:translateY(-6px); }
  .gbp-footer__grid { grid-template-columns:1fr 1fr; }
  .gbp-nav { display:none; }
  .gbp-burger { display:block; }
  .gbp-rankcard { width:100%; }
}
@media (max-width: 560px) {
  .gbp-section { padding:64px 0; }
  .gbp-wizard { padding:24px 20px; }
  .gbp-footer__grid { grid-template-columns:1fr; }
  .gbp-strip__inner { justify-content:center; gap:30px; }
}