/* ========================================================
   SIMPLITECHPRO — DIRECTION C v3.4 — HOMEPAGE STYLES
   Homepage-only sections. Shared components in shared-dc.css.
   ======================================================== */

/* ── LOCAL ALIASES (map to dc tokens) ── */
:root {
  --navy:       var(--dc-navy);
  --navy-mid:   var(--dc-navy-mid);
  --navy-card:  var(--dc-navy-card);
  --navy-deep:  var(--dc-navy-deep);
  --orange:     var(--dc-orange);
  --orange-h:   var(--dc-orange-h);
  --orange-bd:  var(--dc-orange-bd);
  --white:      var(--dc-white);
  --light-bg:   var(--dc-light-bg);
  --light-bd:   var(--dc-light-bd);
  --text-dark:  var(--dc-text-dark);
  --text-body:  var(--dc-text-body);
  --d60: var(--dc-d60);
  --d50: var(--dc-d50);
  --d30: var(--dc-d30);
  --d12: var(--dc-d12);
  --d07: var(--dc-d07);
  --d05: var(--dc-d05);
  --ease: var(--dc-ease);
}

/* ========================================================
   HERO
   ======================================================== */
/* Night-sky wrapper: hero + ticker + plan cards share one continuous starfield. */
.starfield {
  position: relative;
  /* v2.0: overflow:hidden → clip. hidden makes .starfield a (never-scrolling) scroll
     container, which kills position:sticky on the smoke canvas inside; clip clips the
     same without creating a scroll container, so the sticky canvas engages. */
  overflow: clip;
  background: var(--navy-deep);   /* the canvas (and the cards) sit over this */
}

.hero {
  /* Fill the viewport ABOVE the logo bar + trust band and vertically-centre the content,
     so the hero is balanced (not crammed at the top, no void below) and the logo bar stays
     in the landing view. Overrides style.css's old .hero { min-height:100vh; align-items:center }. */
  min-height: calc(100vh - 250px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px 0;
  position: relative;
  overflow: hidden;
  background: transparent;        /* the .starfield wrapper carries the dark background now */
}

/* Smoke canvas — v2.0 (CEO 2026-07-04): spans the WHOLE .starfield (hero + Featured
   Builds + packages). The holder is absolute over the full wrapper; the canvas inside
   is STICKY and viewport-sized, so the shader always renders exactly one viewport of
   pixels (same cost as the old hero-only canvas — the mobile budget is unchanged).
   Content sections sit above it at z-index:2. */
.hero-fx-holder {
  /* CEO 2026-07-04 (post-wiring review): the smoke runs behind the hero + Featured
     Builds ONLY — not the plans. hero-fx.js sets this holder's height to end at the
     teaser's bottom edge (fallback = full wrapper if JS is off). */
  position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 0;
  pointer-events: none;
}
.hero-canvas {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  display: block; pointer-events: none;
}
/* Seam guard: fade the smoke into flat navy just before the HOLDER ends (= after the
   Featured Builds), so the handoff to the flat-navy plans zone never shows a hard edge
   (the known hero gotcha — any continued light must sit above the bottom fade). */
.hero-fx-holder::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  background: linear-gradient(to bottom, rgba(4,10,21,0) 0%, var(--navy-deep) 92%);
  z-index: 1; pointer-events: none;
}

/* Under reduced motion the canvas stays visible: hero-fx.js paints ONE still
   frame of the aurora (no motion). So no display:none here. */

.hero-inner {
  position: relative; z-index: 2;
  display: block;                 /* override style.css .hero-inner { display:grid; gap:60px } — the phantom gap */
  max-width: 760px;
}

.hero h1 {
  font-size: clamp(47px, 6.6vw, 85px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
  color: var(--white);
}

.hero h1 em { color: var(--orange); font-style: italic; }

.hero-sub {
  font-size: 18px; font-weight: 400; color: var(--d50);
  max-width: 500px; line-height: 1.6; margin-bottom: 40px;
}

.hero-btns {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 0;
}

.btn-ghost {
  color: #fff; border: 1px solid var(--d30); padding: 15px 22px;
  border-radius: 8px; font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.03);                  /* frosted-glass feel over the smoke */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  text-decoration: none;
}
.btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.07); }

/* Trust bar — a centered band of items, sits below the logo wall (moved out of the hero). */
.trust-band {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  padding: 4px 24px 34px;
}
.hero-trust {
  display: flex; gap: 32px; flex-wrap: wrap; align-items: center; justify-content: center;
  margin: 0;
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--d50); }
.trust-item i { color: var(--orange); font-size: 16px; }
.trust-text { display: inline-block; }

/* Mobile floating quote bar (homepage only): hidden over the hero, slides up from
   the bottom once the plan cards scroll into view. hero-fx.js toggles .visible.
   Scoped to index.css so other pages keep their always-visible bar. */
.mobile-quote-bar { transform: translateY(115%); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.mobile-quote-bar.visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .mobile-quote-bar { transition: none; } }

/* ========================================================
   INTEGRATION WALL  ("integrates with" logo marquee)
   Replaces the old stats ticker. Two rows drift opposite ways;
   logos sit muted/monochrome and light up in their brand colour
   on hover. Transparent background so the shared starfield shows
   through the gaps. hero-fx.js doubles each track's content and
   adds .is-live to start a seamless loop (per-item margin keeps
   the loop exactly periodic). Static under reduced motion / no JS.
   ======================================================== */
.intg-wall {
  position: relative;   /* sit above the starfield canvas */
  z-index: 2;
  padding: 6px 0 28px;  /* pulled up close to the hero buttons (in the landing view) */
}

.intg-label {
  text-align: center;
  margin: 0 0 22px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--d50);
}

.intg-row {
  display: flex;
  overflow: hidden;
  /* Vertical breathing room INSIDE the clip box (overflow clips to the padding box):
     the optically-scaled marks (up to 1.5x of the 30px box = ±7.5px) and the hover
     lift (-2px) were being sliced top/bottom. Padding un-clips them; the equal
     negative margin keeps the page spacing pixel-identical. */
  padding: 12px 0;
  margin: -12px 0;
  /* fade the logos into the background at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.intg-row + .intg-row { margin-top: 12px; }

.intg-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  will-change: transform;
}
/* Animate only once hero-fx.js has doubled the content (seamless -50% loop). */
.intg-track.is-live { animation: intgScroll 100s linear infinite; }  /* single row = ~2x length, so ~2x duration keeps the same calm speed */
.intg-row--rev .intg-track.is-live { animation-direction: reverse; }
.intg-row:hover .intg-track.is-live { animation-play-state: paused; }

@keyframes intgScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Each logo: muted steel by default (reads "off"), brand colour on hover. */
.intg {
  flex: 0 0 auto;
  margin-right: 58px;            /* per-item gap → exact loop periodicity */
  height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9aabc2;
  opacity: 0.7;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.intg:hover { color: var(--brand); opacity: 1; transform: translateY(-2px); }

.intg-mark { height: 100%; width: auto; display: block; }

/* Round / sparse / wide-short marks read smaller than dense logos at the same box height
   — scale them up (more for the very short/wide ones) so the row looks even. */
.intg[title="HubSpot"] .intg-mark,
.intg[title="QuickBooks"] .intg-mark,
.intg[title="Xero"] .intg-mark,
.intg[title="WhatsApp Business"] .intg-mark,
.intg[title="Calendly"] .intg-mark { transform: scale(1.18); }
.intg[title="Zoho CRM"] .intg-mark { transform: scale(1.4); }
.intg[title="Odoo"] .intg-mark { transform: scale(1.5); }

/* WooCommerce: its Simple-Icons artwork is a wide badge filling only ~20% of the
   24x24 canvas height, so box-height scaling can't save it (still tiny at 1.5x).
   The svg's viewBox is instead CROPPED to the artwork (index.html: "0 9.3 24 5.4")
   and the box sized here like a text wordmark — real layout width, no bleed. */
.intg[title="WooCommerce"] { height: 20px; }

.intg--word {
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .intg-track.is-live { animation: none; }
}

/* ========================================================
   PACKAGES
   ======================================================== */
.packages {
  padding: 120px 0;
  position: relative;        /* sit above the starfield canvas */
  z-index: 2;
  background: transparent;   /* no grid, no glow — the clean starfield shows through */
}

.packages-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: stretch; }

@keyframes pkg-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.55; } }
.pkg-skeleton {
  background: var(--navy-card); border: 1px solid var(--d07); border-radius: 16px;
  height: 480px; animation: pkg-pulse 1.6s ease-in-out infinite;
}
.pkg-skeleton--mid { margin-top: -12px; height: 504px; border-color: rgba(232,100,26,0.2); }

.package-card {
  background: var(--navy-card); border: 1px solid var(--d07); border-radius: 16px;
  padding: 40px 34px 34px; position: relative;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.package-card:hover { border-color: rgba(232,100,26,0.3); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.35); }
.package-card.featured {
  border-color: rgba(232,100,26,0.5); margin-top: -12px;
  background: linear-gradient(160deg, rgba(232,100,26,0.08) 0%, var(--navy-card) 55%);
}
.package-card.featured:hover { box-shadow: 0 16px 48px rgba(232,100,26,0.18); }

.featured-pill {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: white; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 20px; border-radius: 100px;
}

.pkg-icon {
  width: 52px; height: 52px; border-radius: 12px; background: var(--d07); border: 1px solid var(--d07);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  font-size: 22px; color: var(--orange); transition: background 0.2s;
}
.package-card:hover .pkg-icon { background: rgba(232,100,26,0.1); }
.pkg-tier { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); margin-bottom: 8px; }
.pkg-name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.pkg-price { font-size: 46px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px; }
.pkg-price sup { font-size: 20px; font-weight: 600; vertical-align: super; margin-right: 2px; opacity: 0.7; }
.pkg-price sub { font-size: 14px; font-weight: 400; color: var(--d30); vertical-align: baseline; }
.pkg-desc { font-size: 14px; color: var(--d50); line-height: 1.65; margin: 18px 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--d07); }
.pkg-features { margin-bottom: 32px; }
.pkg-features li { font-size: 14px; color: rgba(255,255,255,0.65); padding: 9px 0; border-bottom: 1px solid var(--d05); display: flex; align-items: flex-start; gap: 10px; }
.pkg-features li:last-child { border-bottom: none; }
.pkg-features li i { color: var(--orange); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.pkg-cta { display: block; text-align: center; padding: 14px 20px; border-radius: 9px; font-size: 14px; font-weight: 700; transition: all 0.2s; text-decoration: none; }
.pkg-cta.primary { background: var(--orange); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 4px 20px rgba(232,100,26,0.25); }
.pkg-cta.primary:hover { background: var(--orange-h); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 6px 28px rgba(232,100,26,0.4); }
.pkg-cta.outline { border: 1px solid var(--d12); color: var(--d50); }
.pkg-cta.outline:hover { border-color: var(--d30); color: white; }

/* ========================================================
   WHY — light section with hex background
   ======================================================== */
.why {
  background-color: var(--light-bg);
  background-image: url('images/bg-hex-light.png');
  background-repeat: repeat;
  background-size: 420px auto;
  padding: 120px 0;
  position: relative;
  z-index: 1;
}
/* Soft seam easing the hard dark→light cut — reads as ambient shadow cast by
   the dark section above. Sits in the empty top padding, above nothing clickable. */
.why::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(13,21,32,0.16), transparent);
  pointer-events: none;
}

.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

.why-card {
  background: linear-gradient(155deg, #ffffff 0%, #f4f8fc 100%);
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 18px;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 4px 24px rgba(26,35,50,0.07),
    0 1px 4px rgba(26,35,50,0.05);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, transparent);
}
.why-card::after {
  content: '';
  position: absolute;
  top: -40px; left: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(232,100,26,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.why-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 16px 48px rgba(26,35,50,0.11),
    0 4px 12px rgba(232,100,26,0.07);
}
.why-num { font-size: 42px; font-weight: 900; color: rgba(26,35,50,0.08); letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; }
.why-card h3 { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.why-card p { font-size: 14px; color: var(--text-body); line-height: 1.7; }

/* ========================================================
   SHOWCASE TEASER — real demo builds (sits inside the starfield,
   between the trust bar and the packages; cards link to the
   on-domain case-study pages)
   ======================================================== */
.showcase-teaser {
  padding: 36px 0 0;         /* v2.0: tightened — the empty band between the trust bar and Featured Builds removed (CEO 2026-07-04) */
  position: relative;        /* sit above the starfield canvas */
  z-index: 2;
  background: transparent;
}
/* CEO 2026-07-04 (post-wiring review): the 7 builds ride ONE horizontal scroll row
   (visible scrollbar + snap) instead of a 3-up grid — calmer section, all 7 reachable. */
.showcase-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: 400px; gap: 24px;
  overflow-x: auto;
  /* no scroll-snap: the row AUTO-DRIFTS (hero-fx.js initAutoRows) and snap would
     fight the per-frame scrollLeft writes (CEO 2026-07-04: auto-scrolling rows) */
  /* CEO 2026-07-10: fill the viewport width from FIRST PAINT — flat 28px gutter. (The old
     content-edge calc left a ~380px empty gutter on wide screens until the 30px/s drift
     cleared it.) hero-fx.js starts the loop at the seam origin so cards sit flush edge-to-edge. */
  padding: 0 28px 6px;
  scrollbar-width: none;                                 /* Firefox — dots replace the scrollbar (CEO 2026-07-07) */
  -ms-overflow-style: none;                              /* old Edge/IE */
}
.showcase-grid::-webkit-scrollbar { height: 0; width: 0; display: none; }   /* WebKit/Blink */

/* Dot pagination — 3 dots that replace the scrollbar under each auto-advancing card row
   (CEO 2026-07-07). Injected + driven by hero-fx.js initAutoRows(); shared by both rows. */
.row-dots { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 16px 0 2px; }
.row-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.22); cursor: pointer;
  transition: background .3s var(--ease), width .3s var(--ease);
}
.row-dot:hover { background: rgba(255,255,255,0.42); }
.row-dot.is-active { width: 26px; background: var(--orange); }
.row-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
a.portfolio-card { display: block; text-decoration: none; }
/* Teaser cards: text sits BELOW the photo (CEO 2026-07-03 — keep the screenshot clean).
   Compound selector: must out-rank the base .portfolio-info overlay rule declared later. */
.portfolio-info.portfolio-info--below {
  position: static;
  background: none;
  padding: 20px 22px 22px;
}
/* v2.0 — tier badge + admin pill on the teaser cards */
.pf-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.pf-tier, .pf-cap {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
}
.pf-tier { border: 1px solid rgba(232,100,26,0.45); background: rgba(232,100,26,0.08); color: var(--orange); }
.pf-cap { border: 1px solid var(--d12); background: rgba(255,255,255,0.03); color: var(--white); }
.pf-cap .ti { font-size: 12px; color: var(--orange); }
.showcase-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 48px; }
.showcase-all-link {
  display: inline-block; padding: 14px 34px; border-radius: 9px;
  background: var(--d07); border: 1px solid var(--d12);
  font-size: 14px; font-weight: 700; color: var(--white); text-decoration: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.showcase-all-link:hover { border-color: var(--orange); background: rgba(232,100,26,0.10); transform: translateY(-2px); }
@media (max-width: 900px) {
  .showcase-grid { grid-auto-columns: min(400px, 84vw); }   /* card peeks = swipe affordance */
}

.portfolio-card {
  background: var(--navy-card); border: 1px solid var(--d07); border-radius: 0; /* v2.0: square corners on mockup cards */ overflow: hidden;
  border-top-color: var(--d12);      /* "lit from above" glass edge on the media card */
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); cursor: pointer;
}
.portfolio-card:hover { border-color: rgba(232,100,26,0.35); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.portfolio-thumb {
  height: 260px; position: relative; overflow: hidden;
}
.portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portfolio-info {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 52px 22px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
}
.portfolio-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange); margin-bottom: 6px; }
.portfolio-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.portfolio-desc { font-size: 13px; color: var(--d50); }

/* ========================================================
   PROCESS — light section with hex background
   ======================================================== */
.process {
  background-color: var(--white);
  background-image: url('images/bg-hex-light.png');
  background-repeat: repeat;
  background-size: 420px auto;
  padding: 120px 0;
  position: relative;
  z-index: 1;
}
/* (The dark→light seam ::before was removed 2026-07-03 — the section above
   is now the light .why, so no dark edge to blend.) */

.process .section-header { text-align: center; }
.process .section-header p { margin-left: auto; margin-right: auto; }

.process-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 52px; position: relative; }
.process-connector { position: absolute; top: 28px; left: calc(16.5% + 14px); right: calc(16.5% + 14px); height: 1px; background: var(--light-bd); }
.process-step { position: relative; }
.step-circle {
  width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: white;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 28px; position: relative; z-index: 1;
  transition: background .25s, box-shadow .25s;
}
.process-step:hover .step-circle { background: var(--orange); box-shadow: 0 4px 20px rgba(232,100,26,0.3); }
.process-step h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; letter-spacing: -0.01em; }
.process-step p { font-size: 14px; color: var(--text-body); line-height: 1.7; }

/* ========================================================
   INDUSTRIES WE SERVE — capability card grid
   (replaces the owner-voice testimonials slider, CEO 2026-07-04;
   Canada-wide framing, no client names / metrics / faces)
   ======================================================== */
.industries {
  padding: 120px 0;
  background-color: var(--navy-mid);
  background-image:
    radial-gradient(ellipse 60% 55% at 10% 40%, rgba(232,100,26,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 90% 70%, rgba(70,130,255,0.04) 0%, transparent 65%);
}

.industries .section-header { text-align: center; }
.industries .section-header h2 { color: var(--white); }
.industries .section-header p { margin: 0 auto; }

/* CEO 2026-07-04: the 12 industries ride ONE horizontal scroll row too (same treatment
   as the Featured Builds — visible scrollbar + snap). */
.ind-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: 340px; gap: 20px; margin-top: 64px;
  overflow-x: auto;                                      /* auto-drifts too — no snap */
  /* CEO 2026-07-10: flat 28px gutter — fills the viewport width from first paint (same as .showcase-grid) */
  padding: 0 28px 6px;
  scrollbar-width: none;                                 /* dots replace the scrollbar (CEO 2026-07-07) */
  -ms-overflow-style: none;
}
.ind-grid::-webkit-scrollbar { height: 0; width: 0; display: none; }
.ind-card {
  background: var(--navy-card);
  border: 1px solid var(--d07);
  border-radius: 16px;
  padding: 28px 26px;
  position: relative;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* "Lit from above" hairline — matches the plan cards. */
.ind-card::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 30%, rgba(255,255,255,0.14) 70%, transparent);
  pointer-events: none;
}
.ind-card:hover {
  border-color: rgba(232,100,26,0.28);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  transform: translateY(-3px);
}
.ind-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(232,100,26,0.10); border: 1px solid rgba(232,100,26,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--orange); margin-bottom: 16px;
}
.ind-name { font-size: 16px; font-weight: 700; color: var(--white); letter-spacing: -0.01em; margin-bottom: 4px; }
.ind-sub { font-size: 11.5px; color: var(--d50); margin-bottom: 12px; }
.ind-line { font-size: 13.5px; color: var(--d50); line-height: 1.7; }
.ind-cta { text-align: center; margin-top: 48px; }

@media (max-width: 640px) {
  .ind-grid { grid-auto-columns: min(340px, 84vw); }   /* card peeks = swipe affordance */
}

/* ========================================================
   FAQ
   ======================================================== */
.faq {
  padding: 120px 0;
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse 60% 50% at 95% 50%, rgba(232,100,26,0.05) 0%, transparent 65%),
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 100% 100%, 80px 80px, 80px 80px;
  background-attachment: fixed;
}

.faq-layout { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; }
.faq-aside { position: sticky; top: 120px; }
.faq-aside h2 { font-size: clamp(26px,3.5vw,40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 18px; margin-top: 14px; }
.faq-aside p { font-size: 15px; color: var(--d50); line-height: 1.7; margin-bottom: 28px; }
.faq-aside-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--orange); transition: gap 0.2s; text-decoration: none; }
.faq-aside-cta:hover { gap: 12px; }
.faq-item { border-bottom: 1px solid var(--d07); padding: 22px 0; }
.faq-item:first-child { border-top: 1px solid var(--d07); }
.faq-q { font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; cursor: pointer; line-height: 1.45; }
.faq-icon { color: var(--orange); font-size: 20px; font-weight: 300; flex-shrink: 0; line-height: 1; }
.faq-a { font-size: 14px; color: var(--d50); margin-top: 14px; line-height: 1.75; display: none; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-icon { content: '−'; }

/* ========================================================
   CTA BANNER
   ======================================================== */
.cta-banner {
  border-top: 1px solid rgba(232,100,26,0.22);
  padding: 120px 0;
  position: relative;
  text-align: center;
  background-color: #0a1420;
  background-image:
    radial-gradient(ellipse 90% 90% at 50% 50%, rgba(232,100,26,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(70,130,255,0.05) 0%, transparent 65%),
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
  background-attachment: fixed;
  overflow: hidden;
}

.cta-banner::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,100,26,0.5), transparent);
  pointer-events: none;
}

.cta-inner { position: relative; max-width: 680px; margin: 0 auto; }
.cta-inner h2 { font-size: clamp(26px,4vw,46px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 16px; }
.cta-inner h2 em { font-style: normal; color: var(--orange); }
.cta-inner p { font-size: 16px; color: var(--d50); margin-bottom: 40px; }

.btn-cta {
  display: inline-block; background: var(--orange); color: white; padding: 17px 40px; border-radius: 9px;
  font-size: 16px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 4px 24px rgba(232,100,26,0.3);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); text-decoration: none;
}
.btn-cta:hover { background: var(--orange-h); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 8px 36px rgba(232,100,26,0.45); }
.cta-sub { font-size: 13px; color: var(--d30); margin-top: 16px; }

/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width: 1024px) {
  .packages-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .package-card.featured { margin-top: 0; }
  .why-grid { grid-template-columns: repeat(2,1fr); }
  .faq-layout { grid-template-columns: 1fr; gap: 48px; }
  .faq-aside { position: static; }
  /* Disable fixed parallax on mobile — background-attachment:fixed causes scroll
     jank / page jumping on mobile browsers (per-frame repaint + address-bar resize).
     Desktop keeps the parallax effect. */
  .faq,
  .cta-banner { background-attachment: scroll; }
}

@media (max-width: 768px) {
  /* Mobile: natural top-flow (no forced viewport height / centering). */
  .hero { min-height: 0; display: block; padding: 28px 0 22px; }
  /* Left-aligned hero on mobile. */
  .hero-inner { max-width: 100%; }
  /* Integration wall: tighter spacing + smaller marks on small screens. */
  .intg { margin-right: 42px; height: 26px; }
  .intg[title="WooCommerce"] { height: 17px; }  /* keep the cropped wordmark proportional */
  .intg--word { font-size: 16px; }
  /* Trust bar on mobile: large left-aligned items spread evenly down the section. */
  .trust-band { justify-content: flex-start; align-items: stretch; min-height: 42vh; padding: 8px 24px 40px; }
  .hero-trust { flex-direction: column; align-items: flex-start; justify-content: space-evenly; gap: 8px; }
  .trust-item { font-size: 28px; gap: 16px; }
  .trust-item i { font-size: 32px; }
  .why-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: 36px; }
  .process-connector { display: none; }
}