/* BGBizMedia — AI Growth Theme
   Ported 1:1 from the supplied bgbizmedia_apple_style_preview.html.
   Class names are prefixed with bgbiz- (the original file used bare
   names like .card, .section, .nav) so this doesn't collide with your
   theme's own CSS. Colors, sizes, spacing and breakpoints are otherwise
   unchanged from the source file.
*/

:root{
  --bgbiz-bg:#f5f5f7;
  --bgbiz-ink:#1d1d1f;
  --bgbiz-muted:#6e6e73;
  --bgbiz-blue:#0071e3;
  --bgbiz-dark:#000;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Arial,sans-serif !important;
  color:var(--bgbiz-ink);
  letter-spacing:-.01em;
}

/* Nav */
.bgbiz-nav{position:sticky;top:0;z-index:20;height:52px;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center}
.bgbiz-navin{width:min(1100px,92%);margin:auto;display:flex;align-items:center;justify-content:space-between}
.bgbiz-logo{font-weight:700;font-size:17px;letter-spacing:-.04em}
.bgbiz-links{display:flex;gap:28px;font-size:12px;color:#424245}
.bgbiz-links a{text-decoration:none;color:inherit}
.bgbiz-cta{font-size:12px;background:#0071e3;color:#fff;padding:8px 15px;border-radius:999px;text-decoration:none}

/* Hero */
.bgbiz-hero{min-height:760px;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 20px 90px;background:linear-gradient(#fff 0%,#f5f5f7 72%)}
.bgbiz-hero h1{font-size:clamp(58px,9vw,112px);line-height:.92;letter-spacing:-.065em;margin:0;font-weight:700;max-width:1050px}
.bgbiz-hero .bgbiz-sub{font-size:clamp(22px,3vw,34px);line-height:1.15;color:#6e6e73;max-width:780px;margin:34px auto 0}
.bgbiz-hero .bgbiz-actions{margin-top:35px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* Pills / buttons */
.bgbiz-pill{padding:13px 22px;border-radius:999px;font-size:16px;text-decoration:none;display:inline-block}
.bgbiz-primary{background:#0071e3;color:#fff}
.bgbiz-secondary{color:#0071e3;background:transparent}

/* Generic section */
.bgbiz-section{padding:110px 5%;background:var(--bgbiz-bg)}
.bgbiz-section.bgbiz-dark{background:#000;color:#fff}
.bgbiz-section.bgbiz-white{background:#fff}
.bgbiz-kicker{text-align:center;color:#6e6e73;font-size:17px;font-weight:600;margin-bottom:14px}
.bgbiz-dark .bgbiz-kicker{color:#aaa}
.bgbiz-section h2{text-align:center;font-size:clamp(44px,6vw,78px);line-height:.98;letter-spacing:-.055em;margin:0 auto 22px;max-width:950px}
.bgbiz-lead{text-align:center;color:#6e6e73;font-size:21px;max-width:720px;line-height:1.4;margin:0 auto 60px}
.bgbiz-dark .bgbiz-lead{color:#a1a1a6}

/* AI feature panel */
.bgbiz-feature{width:min(1120px,100%);margin:auto;min-height:560px;border-radius:34px;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 25%,#34475d,#090a0c 60%);display:flex;align-items:flex-end;padding:52px}
.bgbiz-feature:before{content:"AI";position:absolute;right:8%;top:5%;font-size:clamp(150px,28vw,360px);font-weight:800;letter-spacing:-.09em;color:rgba(255,255,255,.08)}
.bgbiz-featuretxt{position:relative;z-index:1;max-width:650px}
.bgbiz-featuretxt h3{font-size:clamp(42px,5vw,68px);line-height:.98;margin:0 0 15px;letter-spacing:-.05em}
.bgbiz-featuretxt p{font-size:19px;line-height:1.45;color:#c8c8ca;margin:0}

/* Services grid */
.bgbiz-grid{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.bgbiz-card{border-radius:30px;min-height:430px;padding:38px;display:flex;flex-direction:column;justify-content:space-between;background:#f5f5f7}
.bgbiz-card.bgbiz-black{background:#000;color:#fff}
.bgbiz-card.bgbiz-blue{background:#0071e3;color:#fff}
.bgbiz-card h3{font-size:40px;line-height:1;letter-spacing:-.05em;margin:0;max-width:440px}
.bgbiz-card p{font-size:18px;line-height:1.45;color:#6e6e73;max-width:430px}
.bgbiz-card.bgbiz-black p,.bgbiz-card.bgbiz-blue p{color:rgba(255,255,255,.72)}

/* Process */
.bgbiz-process{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d2d2d7;border-radius:28px;overflow:hidden}
.bgbiz-step{background:#fff;padding:38px;min-height:260px}
.bgbiz-num{font-size:14px;color:#6e6e73}
.bgbiz-step h3{font-size:28px;letter-spacing:-.03em}
.bgbiz-step p{color:#6e6e73;line-height:1.5}

/* Final CTA */
.bgbiz-final{text-align:center;padding:140px 20px;background:#fff}
.bgbiz-final h2{font-size:clamp(52px,8vw,96px);line-height:.92;letter-spacing:-.065em;margin:0 auto 28px}
.bgbiz-final p{color:#6e6e73;font-size:22px;max-width:650px;margin:auto}
.bgbiz-final a{display:inline-block;margin-top:32px}

/* Footer */
.bgbiz-footer{background:#f5f5f7;padding:50px 5%;color:#6e6e73;font-size:13px}
.bgbiz-foot{width:min(1100px,100%);margin:auto;display:flex;justify-content:space-between;gap:20px}

@media(max-width:760px){
  .bgbiz-links{display:none}
  .bgbiz-hero{min-height:650px}
  .bgbiz-section{padding:80px 5%}
  .bgbiz-grid,.bgbiz-process{grid-template-columns:1fr}
  .bgbiz-feature{min-height:500px;padding:32px;border-radius:25px}
  .bgbiz-card{min-height:350px}
  .bgbiz-foot{flex-direction:column}
}

/* ------------------------------------------------------------------
   Elementor bridging rules — only needed when these classes are used
   on native Elementor Sections/Columns (via Advanced > CSS Classes)
   instead of via the [bgbiz_*] shortcodes. Elementor wraps its own
   Section > Container > Column > Widget-Wrap markup around whatever
   class you add, so a couple of the original flex rules need to be
   re-pointed at Elementor's actual flex container one level down.
   These rules are inert (do nothing) on plain HTML, so it's safe to
   keep them even if you only ever use the shortcodes.
------------------------------------------------------------------ */

/* Hero action buttons: center + wrap the two buttons inside Elementor's
   own row container instead of the empty outer section. */
.bgbiz-actions > .elementor-container{
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

/* AI feature panel: stretch Elementor's container to the panel's full
   height, then push the text column to the bottom edge. */
.bgbiz-feature{ display:flex; }
.bgbiz-feature > .elementor-container{
  display:flex;
  align-items:flex-end;
}

/* Service cards: stretch Elementor's widget-wrap to the card's full
   height, then space the heading group and description apart. */
.bgbiz-card{ display:flex; }
.bgbiz-card > .elementor-widget-wrap{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}

/* Card number badges, used instead of the shortcode's inline style
   overrides — apply alongside bgbiz-kicker on the number widget. */
.bgbiz-num-badge{ text-align:left; margin-bottom:0; }
.bgbiz-num-dark{ color:#aaa; }
.bgbiz-num-blue{ color:#cfe5ff; }

/* Process row: white columns divided by thin lines, rounded as a
   group — recreates the original's grid gap/background trick using
   ordinary Elementor columns. */
.bgbiz-process-row{
  border-radius:28px;
  overflow:hidden;
  background:#d2d2d7;
}
.bgbiz-process-row .elementor-column{ background:#fff; }
.bgbiz-process-row .elementor-column:not(:first-child){
  border-left:1px solid #d2d2d7;
}
.bgbiz-process-row .bgbiz-step{ background:transparent; }

/* Services grid rows: horizontal gap between the two cards in each row. */
.bgbiz-grid-row > .elementor-container{ gap:18px; }

@media(max-width:760px){
  .bgbiz-process-row .elementor-column:not(:first-child){ border-left:none; border-top:1px solid #d2d2d7; }
}