/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL STYLES — aeolus.agency
   Design source of truth. Loaded on every page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section layout ── */
.home-section        { padding: 5rem 3rem; max-width: 1100px; margin: 0 auto; }
.home-section-full   { padding: 5rem 3rem; }
.home-section-full .inner { max-width: 1100px; margin: 0 auto; }

/* ── Background tokens ── */
.bg-card   { background: #161b22; }
.bg-base   { background: #0d1117; }
.bg-purple { background: rgba(102,51,246,0.08); }

/* ── Section typography ── */
.section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; margin-bottom: 1rem; }
.section-sub   { color: var(--gray); font-size: 1.05rem; line-height: 1.7; max-width: 720px; }
.section-intro { color: var(--gray); font-size: 0.98rem; line-height: 1.75; max-width: 720px; margin-top: 1rem; }

/* ── Card base (universal hover) ── */
.problem-card,
.service-item,
.who-card,
.trigger-card,
.stack-tile { transition: transform 0.2s ease, box-shadow 0.2s ease; }

.problem-card:hover,
.service-item:hover,
.who-card:hover,
.trigger-card:hover,
.stack-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(102,51,246,0.15); }

/* ── Flex grid pattern (centers orphan rows) ── */
.problem-grid,
.services-grid,
.who-grid,
.trigger-grid { display: flex; flex-wrap: wrap; justify-content: center; }

.problem-grid  { gap: 1.25rem; margin-top: 2.5rem; }
.services-grid { gap: 1rem; margin-top: 2.5rem; }
.who-grid      { gap: 1.25rem; margin-top: 2.5rem; }
.trigger-grid  { gap: 1.25rem; margin-top: 2.5rem; }

.problem-card  { flex: 0 1 calc(33.33% - 1rem); min-width: 0; }
.service-item  { flex: 0 1 calc(33.33% - 0.75rem); min-width: 0; }
.who-card      { flex: 0 1 calc(50% - 0.75rem); min-width: 0; }
.trigger-card  { flex: 0 1 calc(33.33% - 1rem); min-width: 0; }

/* ── Problem cards ── */
.problem-card { background: #0d1117; border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; }
.problem-card .prob-icon { margin-bottom: 0.75rem; }
.problem-card .prob-icon svg { width: 32px; height: 32px; stroke: var(--white); stroke-width: 1.5; fill: none; }
.problem-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.problem-card p  { font-size: 0.88rem; color: var(--gray); line-height: 1.6; margin: 0; }

.problem-closing     { text-align: center; margin-top: 3rem; }
.problem-closing h3  { font-size: 1.25rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; }
.problem-closing p   { color: var(--gray); font-size: 0.95rem; max-width: 640px; margin: 0 auto; line-height: 1.7; }

/* ── Approach numbered sections ── */
.approach-item { margin-top: 3rem; display: flex; gap: 2rem; align-items: flex-start; }
.approach-num  { font-size: 3.5rem; font-weight: 800; color: var(--accent); line-height: 1; flex-shrink: 0; min-width: 60px; }
.approach-content { flex: 1; min-width: 0; }
.approach-content .approach-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.approach-content h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.75rem; }
.approach-content p  { font-size: 0.92rem; color: var(--gray); line-height: 1.7; margin-bottom: 0.75rem; }
.approach-content a  { color: var(--accent); font-size: 0.88rem; font-weight: 600; }

/* ── Service items ── */
.service-item { padding: 1.5rem; background: #0d1117; border: 1px solid var(--border); border-radius: 10px; }
.service-item .svc-icon { margin-bottom: 0.75rem; }
.service-item .svc-icon svg { width: 32px; height: 32px; stroke: var(--white); stroke-width: 1.5; fill: none; }
.service-item h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
.service-item p  { font-size: 0.85rem; color: var(--gray); margin: 0; line-height: 1.6; }

/* ── Who we work with ── */
.who-card    { background: #161b22; border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem; }
.who-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.who-card p  { font-size: 0.88rem; color: var(--gray); margin: 0; line-height: 1.5; }

/* ── Trigger cards ── */
.trigger-card { background: rgba(102,51,246,0.04); border: 1px solid rgba(102,51,246,0.15); border-radius: 10px; padding: 1.5rem; }
.trigger-card .trig-icon { margin-bottom: 0.75rem; }
.trigger-card .trig-icon svg { width: 32px; height: 32px; stroke: var(--white); stroke-width: 1.5; fill: none; }
.trigger-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.trigger-card p  { font-size: 0.85rem; color: var(--gray); line-height: 1.6; margin: 0; }

.trigger-closing { text-align: center; margin-top: 3rem; }
.trigger-closing h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.trigger-closing p  { color: var(--gray); font-size: 0.92rem; max-width: 560px; margin: 0 auto 0.5rem; line-height: 1.6; }
.trigger-closing .trigger-question { color: var(--white); font-weight: 600; font-size: 1rem; margin-top: 1rem; margin-bottom: 1.5rem; }

/* ── Stack grid ── */
.stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.stack-tile { background: #0d1117; border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; text-align: center; }
.stack-tile .s-icon { margin-bottom: 0.6rem; }
.stack-tile .s-icon svg { width: 32px; height: 32px; stroke: var(--white); stroke-width: 1.5; fill: none; }
.stack-tile h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.25rem; }
.stack-tile p  { font-size: 0.78rem; color: var(--gray); margin: 0; line-height: 1.4; }

/* ── Founder ── */
.founder-section { padding: 4rem 2rem 2rem; }
.founder-inner   { max-width: 960px; margin: 0 auto; display: flex; gap: 3.5rem; align-items: flex-start; }
.founder-photo-col { flex-shrink: 0; }
.founder-headshot  { width: 280px; height: 280px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); }
.founder-content-col { flex: 1; min-width: 0; }
.founder-quote { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; line-height: 1.4; color: var(--accent2); margin: 0.75rem 0 1.5rem; font-style: italic; }
.founder-creds { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; }
.founder-creds li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; font-weight: 600; color: var(--white); }
.founder-creds li svg { color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; }
.founder-bio  { color: var(--gray); font-size: 0.95rem; line-height: 1.75; margin-bottom: 1.25rem; }
.founder-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 700; color: var(--accent2); text-decoration: none; transition: gap 0.15s; }
.founder-link:hover { gap: 0.75rem; text-decoration: none; }

/* ── Lead form ── */
.lead-section { padding: 4rem 2rem; }
.lead-inner   { max-width: 620px; margin: 0 auto; text-align: center; }
.lead-inner h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; margin-bottom: 0.75rem; }
.lead-inner .lead-sub { color: var(--gray); margin-bottom: 0.75rem; font-size: 1.05rem; line-height: 1.7; }
.lead-inner .lead-supporting { color: var(--gray); margin-bottom: 2.5rem; font-size: 0.92rem; line-height: 1.7; }
.lead-form { background: #161b22; border: 1px solid var(--border); border-radius: 12px; padding: 2rem; text-align: left; }
.lead-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lead-form .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.lead-form label { font-size: 0.82rem; font-weight: 600; color: var(--gray); }
.lead-form input, .lead-form select, .lead-form textarea { background: #0d1117; border: 1px solid var(--border); border-radius: 6px; color: var(--white); padding: 0.7rem 0.9rem; font-size: 0.9rem; font-family: inherit; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--accent); }
.lead-form select option { background: #0d1117; }
.lead-form textarea { resize: vertical; width: 100%; }
.lead-pricing { font-size: 0.85rem; color: var(--gray); margin-top: 1.5rem; line-height: 1.7; text-align: left; }

/* ── Footer ── */
.site-footer { background: #0d1117; border-top: 1px solid var(--border); padding: 4rem 2rem 2rem; }
.footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 3rem; align-items: start; }
.footer-col h4 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 1rem; }
.footer-col a  { display: block; color: var(--gray); text-decoration: none; font-size: 0.88rem; margin-bottom: 0.5rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { max-width: 1100px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; color: var(--gray); }
.footer-bottom a { color: var(--gray); }

/* ── Gradient Hero (canonical) — alias: .solutions-sub-hero ── */
.gradient-hero,
.solutions-sub-hero {
  background: radial-gradient(ellipse at 50% 0%, rgba(102,51,246,0.12) 0%, transparent 65%), var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 6rem 2rem 4.5rem;
  text-align: center;
}
.gradient-hero h1,
.solutions-sub-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  max-width: 820px;
  margin: 0 auto 1.25rem;
}
.gradient-hero .hero-sub,
.solutions-sub-hero .hero-sub {
  font-size: 1.05rem;
  color: var(--gray);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Featured product tile ── */
.featured-product {
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}
.featured-product .fp-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.featured-product h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.featured-product p {
  color: var(--gray);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.featured-product .fp-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: gap 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.featured-product .fp-link:hover { gap: 0.65rem; }

/* ── Related solutions grid ── */
.related-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.related-card {
  flex: 0 1 calc(33.33% - 1rem);
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--white);
  transition: border-color 0.2s, transform 0.15s;
  display: block;
}
.related-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  text-decoration: none;
}
.related-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.related-card p { font-size: 0.85rem; color: var(--gray); margin: 0; line-height: 1.5; }
@media (max-width: 768px) {
  .related-card { flex: 0 1 100%; }
}

/* ── Solutions sub-page sections ── */
.sol-section {
  padding: 4rem 2rem;
}
.sol-section .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.sol-section.bg-card { background: var(--bg-card); }
.sol-section.bg-base { background: var(--bg-base); }

/* Featured product tile */
.featured-product {
  max-width: 560px;
  margin: 1.5rem auto 0;
  background: var(--bg-base);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}
.sol-section.bg-base .featured-product { background: var(--bg-card); }
.featured-product .fp-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.featured-product h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.5rem; }
.featured-product p { color: var(--gray); font-size: 0.95rem; margin-bottom: 1.25rem; line-height: 1.6; }
.featured-product .fp-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.15s;
}
.featured-product .fp-link:hover { gap: 0.65rem; }

/* Related solutions grid */
.related-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.related-card {
  flex: 0 1 calc(33.33% - 1rem);
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--white);
  transition: border-color 0.2s, transform 0.15s;
  display: block;
}
.related-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.related-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.related-card p { font-size: 0.85rem; color: var(--gray); margin: 0; line-height: 1.5; }
@media (max-width: 768px) { .related-card { flex: 0 1 100%; } }

/* Ready-to-talk CTA block */
.sol-cta {
  padding: 5rem 2rem;
  text-align: center;
  background: var(--bg-card);
}
.sol-cta h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.75rem; }
.sol-cta p { color: var(--gray); margin-bottom: 1.5rem; font-size: 1rem; }

/* ── Active nav link ── */
.nav-links a.nav-active { color: var(--accent); }

/* ── Consistent content margins (applies globally, defers to solutions.css where already defined) ── */
.section-inner, .page-content {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 768px) {
  .section-inner, .page-content {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .problem-card  { flex: 0 1 100%; }
  .service-item  { flex: 0 1 100%; }
  .trigger-card  { flex: 0 1 100%; }
  .who-card      { flex: 0 1 100%; }
  .stack-grid    { grid-template-columns: repeat(2, 1fr); }
  .approach-item { flex-direction: column; gap: 0.75rem; }
  .approach-num  { font-size: 2.5rem; }
}
@media (max-width: 680px) {
  .founder-inner    { flex-direction: column; gap: 2rem; align-items: center; text-align: center; }
  .founder-headshot { width: 200px; height: 200px; }
  .founder-creds li { justify-content: center; }
}
@media (max-width: 640px) {
  .home-hero          { min-height: unset; padding: 3.5rem 1.25rem 3rem; }
  .home-section       { padding: 2.5rem 1.25rem; }
  .home-section-full  { padding: 2.5rem 1.25rem; }
  .lead-form          { padding: 1.5rem; }
  .lead-form .form-row { grid-template-columns: 1fr; }
  .site-footer        { padding: 2.5rem 1.25rem 1.5rem; }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-bottom      { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
}
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stack-grid  { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PROMOTED SHARED COMPONENTS
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Feature Cards / Tiles ─── */
.feature-card, .tile {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 32px;
  border-top: 3px solid #6633f6;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover, .tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(102,51,246,0.15);
}

/* ─── Card Grid orphan centering (3-col layouts) ─── */
.card-grid > *:last-child:nth-child(3n+1) { grid-column: 2; }

/* ─── Value Grid orphan centering (fractional + customers) ─── */
.value-grid > *:last-child:nth-child(3n+1) { grid-column: 2; }

/* ─── Page Hero ─── */
.page-hero { padding: 80px 24px; text-align: center; }
.page-hero .section-inner { max-width: 1100px; margin: 0 auto; }

/* ─── Alternating Sections ─── */
.section-base { background: var(--bg-base); padding: 80px 24px; }
.section-card { background: var(--bg-card); padding: 80px 24px; }

/* ─── CTA Section ─── */
.cta-section { background: var(--bg-card); padding: 80px 24px; text-align: center; }

/* ─── Lucide Icon Defaults ─── */
[data-lucide] { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; vertical-align: middle; display: inline-block; }
.icon-lg [data-lucide], [data-lucide].icon-lg { width: 20px; height: 20px; }
.icon-sm [data-lucide], [data-lucide].icon-sm { width: 14px; height: 14px; }
.card-header, .feature-header, .benefit-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.card-header [data-lucide], .feature-header [data-lucide], .benefit-header [data-lucide] { flex-shrink: 0; width: 18px; height: 18px; }

/* ─── Pull Quote ─── */
.pull-quote { border-left: 3px solid var(--accent); padding: 1rem 1.5rem; margin: 2rem 0; background: var(--bg-card); border-radius: 0 8px 8px 0; }
.pull-quote p { font-size: 1.05rem; font-style: italic; color: var(--white); margin: 0; line-height: 1.7; }

/* ─── Persona Hero (for/* industry pages) ─── */
.persona-hero { padding: 80px 48px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(102,51,246,0.1) 0%, transparent 60%); }
.persona-hero .hero-inner { max-width: 1100px; margin: 0 auto; }
.persona-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.12; max-width: 820px; margin: 0 auto 1.25rem; }
.persona-hero .hero-sub { font-size: 1.05rem; color: var(--gray); max-width: 640px; margin: 0 auto 2.5rem; line-height: 1.7; }
.persona-cta { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 3rem; text-align: center; }
.persona-cta h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--white); }

/* ─── ICP Hero / Body / Section (for/* ICP pages) ─── */
.icp-hero { padding: 80px 48px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(102,51,246,0.1) 0%, transparent 60%); }
.icp-hero .hero-inner { max-width: 1100px; margin: 0 auto; }
.icp-hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.1; max-width: 820px; margin: 0 auto 1.25rem; }
.icp-hero .hero-sub { font-size: 1.1rem; color: var(--gray); max-width: 620px; margin: 0 auto 2.5rem; line-height: 1.7; }
.icp-body { max-width: 1100px; margin: 0 auto; padding: 0 3rem 5rem; }
.icp-section { margin-bottom: 3.5rem; }
.icp-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.icp-section p { color: var(--gray); line-height: 1.8; margin-bottom: 1rem; font-size: 1rem; }
.icp-section p strong { color: var(--white); }

/* ─── ICP CTA / Quote Form (for/* ICP pages) ─── */
.icp-cta { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 2.5rem; text-align: center; }
.icp-cta h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.75rem; }
.icp-cta p { color: var(--gray); margin-bottom: 1.75rem; }
.quote-form { text-align: left; max-width: 480px; margin: 0 auto; }
.form-note { font-size: 0.78rem; color: var(--gray); text-align: center; margin-top: 0.75rem; }
.form-success { text-align: center; padding: 1.5rem; }
.form-success .success-icon { font-size: 2rem; color: var(--accent); margin-bottom: 0.5rem; }

/* ─── Shared decision/what-we-do lists ─── */
.decision-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.decision-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; }
.decision-card .d-num { font-size: 0.75rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.decision-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.decision-card p { font-size: 0.85rem; color: var(--gray); margin: 0; line-height: 1.6; }
.what-we-do-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.what-we-do-list li { display: flex; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.what-we-do-list li:last-child { border-bottom: none; }
.what-we-do-list li span { color: var(--accent); font-weight: 700; min-width: 1.5rem; }
.checklist { list-style: none; padding: 0; margin: 1.5rem 0; }
.checklist li { display: flex; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.checklist li:last-child { border-bottom: none; }
.checklist li span { color: var(--accent); font-weight: 700; min-width: 1.5rem; }

/* ─── Google Sub-pages: Sub Hero / Sub Body / Sub Section ─── */
.sub-hero { padding: 5rem 2rem 4rem; text-align: center; }
.sub-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.1; max-width: 780px; margin: 0 auto 1.25rem; }
.sub-hero .hero-sub { font-size: 1.05rem; color: var(--gray); max-width: 580px; margin: 0 auto 2.5rem; line-height: 1.7; }
.sub-body { max-width: 1100px; margin: 0 auto; padding: 0 3rem 5rem; }
.sub-section { margin-bottom: 3.5rem; }
.sub-section h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; }
.sub-section p { color: var(--gray); line-height: 1.8; font-size: 0.98rem; margin-bottom: 0.9rem; }
.sub-section p strong { color: var(--white); }

/* ─── CTA Form Wrap / Mini Form (google sub-pages + msp) ─── */
.cta-form-wrap, .audit-form-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 2.5rem; text-align: center; }
.cta-form-wrap h2, .audit-form-wrap h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
.cta-form-wrap .sub, .audit-form-wrap .sub { color: var(--gray); margin-bottom: 2rem; }
.mini-form { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.mini-form input { background: var(--bg-base); border: 1px solid var(--border); border-radius: 7px; color: var(--white); padding: 0.75rem 1rem; font-size: 0.9rem; width: 210px; }
.mini-form input::placeholder { color: var(--gray); }
.mini-form input:focus { outline: none; border-color: var(--accent); }

/* ─── Value Grid / Value Card (fractional + customers) ─── */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.value-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; position: relative; overflow: hidden; }
.value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.value-card h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.value-card p { color: var(--gray); font-size: 0.9rem; line-height: 1.6; }

/* ─── Hero Full (solutions sub-pages) ─── */
.hero-full { padding: 5.5rem 0 4.5rem; }

/* ─── Trial Hero / Trust Grid / Big CTA (try/* pages) ─── */
.trial-hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 5rem 2rem; max-width: 900px; margin: 0 auto; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 3rem; }
.trust-item { background: var(--bg-card); padding: 1.4rem; text-align: center; }
.trust-item strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--accent); margin-bottom: 0.2rem; }
.trust-item span { font-size: 0.8rem; color: var(--gray); }
.big-cta-wrap { margin-top: 3.5rem; text-align: center; }
.big-cta { display: inline-block; background: var(--green); color: var(--white); padding: 1.1rem 3rem; border-radius: 8px; font-size: 1.15rem; font-weight: 800; transition: opacity 0.2s; }
.big-cta:hover { opacity: 0.88; text-decoration: none; }
.proof-strip { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.25rem; justify-content: center; }
.proof-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--gray); }

/* Hero CTA buttons */
.hero-cta-group { display: flex; flex-direction: column; gap: 0; align-items: stretch; margin-top: 32px; width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
.hero-cta-group .btn-primary, .hero-cta-group .btn-ghost { width: 100%; text-align: center; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; box-sizing: border-box; }
.btn-primary, button.btn-primary, input[type="submit"] { display: inline-block; background: #6633f6 !important; color: #ffffff !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 16px 32px; border-radius: 8px; font-weight: 700; font-size: 16px; text-decoration: none; text-align: center; cursor: pointer; min-width: 260px; }
.btn-primary:hover, button.btn-primary:hover { background: #5522e0 !important; text-decoration: none; color: #ffffff !important; }
.btn-ghost { display: inline-block; background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.3); padding: 16px 32px; border-radius: 8px; font-weight: 600; font-size: 16px; text-decoration: none; text-align: center; cursor: pointer; min-width: 260px; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.6); text-decoration: none; color: #ffffff; }
@media (min-width: 768px) { .hero-cta-group { flex-direction: row; align-items: stretch; max-width: none; width: auto; margin-left: 0; margin-right: 0; justify-content: center; } .hero-cta-group .btn-primary, .hero-cta-group .btn-ghost { width: auto; } }

/* iOS Safari tap highlight + focus ring suppression */
a, button, input[type="submit"], .btn-primary, .btn-ghost, .form-submit { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
a:focus, a:focus-visible, button:focus, button:focus-visible, .btn-primary:focus, .btn-primary:focus-visible, .btn-ghost:focus, .btn-ghost:focus-visible, .form-submit:focus, .form-submit:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; }
.hero-cta-group a:focus, .hero-cta-group a:active, .hero-cta-group a:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; -webkit-tap-highlight-color: transparent; }