/* ==========================================================================
   pages.css — Shared Subpage Styles
   Styles common to multiple subpages (kontakt, cenik, faq, registrace,
   prehled-funkci, dokumentace) but NOT on the home page.
   Includes: page-hero, feature-grid-6, detail rows, mockup illustrations,
   and shared subpage responsive overrides.
   ========================================================================== */

/* ===== PAGE HERO (subpages) ===== */
.page-hero {
  position: relative; z-index: 1;
  max-width: 1260px; margin: 0 auto;
  padding: 11rem 2rem 3rem;
  text-align: center;
}

.page-hero .overline {
  font-family: var(--font-head); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 3px;
  color: var(--secondary); margin-bottom: 1rem;
  animation: fadeSlideUp .7s var(--ease-out-expo) both;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -1.5px;
  margin-bottom: 1.2rem;
  animation: fadeSlideUp .7s var(--ease-out-expo) .1s both;
}

.page-hero h1 .highlight {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.page-hero-subtitle {
  font-size: 1.1rem; color: var(--gray-500);
  max-width: 600px; margin: 0 auto 2rem;
  line-height: 1.8;
  animation: fadeSlideUp .7s var(--ease-out-expo) .2s both;
}

.page-hero-buttons {
  display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
  animation: fadeSlideUp .7s var(--ease-out-expo) .3s both;
}

.page-hero-meta {
  display: flex; gap: 1.8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem;
  animation: fadeSlideUp .7s var(--ease-out-expo) .4s both;
}

.page-hero-meta-item {
  font-size: .8rem; color: var(--gray-400);
  font-family: var(--font-head); font-weight: 500;
}

.page-hero-meta-item + .page-hero-meta-item::before {
  content: '\00B7'; margin-right: 1.8rem; color: var(--gray-300);
}

/* ===== PAGE HERO SEPARATOR ===== */
.page-hero-sep-wrap {
  max-width: 1260px; margin: 0 auto; padding: 0 2rem;
}
.page-hero-sep {
  height: 2px; background: var(--gray-200);
  border-radius: 1px; opacity: .6; mix-blend-mode: multiply;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* ===== FEATURE CARDS (6-grid) ===== */
.feature-grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.fg-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 2rem; transition: all .35s var(--ease-out-expo); position: relative; overflow: hidden;
}
.fg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .04), 0 24px 64px rgba(0, 0, 0, .07), 0 2px 6px rgba(0, 0, 0, .02);
  border-color: transparent;
}
.fg-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem;
}
.fg-card-icon--blue { background: #EEF4FF; color: var(--primary); }
.fg-card-icon--orange { background: #FFF0EC; color: var(--orange); }
.fg-card-icon--yellow { background: #FFF7D6; color: #B8960A; }
.fg-card-icon--green { background: #DCFCE7; color: #16A34A; }
.fg-card-icon--purple { background: #F3E8FF; color: #7C3AED; }
.fg-card-icon--secondary { background: #E8F4FD; color: var(--secondary); }
.fg-card h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; letter-spacing: -.3px; margin-bottom: .6rem; }
.fg-card p { font-size: .88rem; color: var(--gray-500); line-height: 1.7; }

/* ===== ALTERNATING DETAIL ROWS ===== */
.detail-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  margin-bottom: 5rem;
}
.detail-row:last-child { margin-bottom: 0; }
.detail-row--reverse { direction: rtl; }
.detail-row--reverse > * { direction: ltr; }

.detail-visual {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  min-height: 320px; display: flex; align-items: center; justify-content: center;
}
.detail-visual--blue { background: linear-gradient(135deg, #EEF4FF, #DBEAFE); }
.detail-visual--orange { background: linear-gradient(135deg, #FFF0EC, #FFEDD5); }
.detail-visual--green { background: linear-gradient(135deg, #DCFCE7, #D1FAE5); }
.detail-visual--yellow { background: linear-gradient(135deg, #FFF7D6, #FEF3C7); }
.detail-visual--purple { background: linear-gradient(135deg, #F3E8FF, #EDE9FE); }

.detail-illust { width: 100%; max-width: 520px; }

.detail-content .overline {
  font-family: var(--font-head); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--secondary); margin-bottom: .6rem;
}
.detail-content h3 {
  font-family: var(--font-head); font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800; letter-spacing: -.5px; margin-bottom: 1rem;
}
.detail-content p { font-size: 1rem; color: var(--gray-500); line-height: 1.75; margin-bottom: 0; }

/* Shared f-link (used on multiple subpages) */
.f-link {
  font-family: var(--font-head); font-size: .82rem; font-weight: 700;
  color: var(--primary); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.f-link svg { transition: transform .2s; }
.f-link:hover svg { transform: translateX(4px); }

/* ===== MOCKUP ILLUSTRATIONS (prehled-funkci) ===== */
.mockup-inbox {
  width: 280px; padding: 1rem; background: rgba(255, 255, 255, .85);
  border-radius: var(--radius); border: 1px solid var(--gray-200);
  box-shadow: 0 8px 32px rgba(17, 66, 174, .08);
}
.mockup-inbox-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.mockup-inbox-title { font-family: var(--font-head); font-size: .8rem; font-weight: 700; color: var(--gray-900); display: flex; align-items: center; gap: .4rem; }
.mockup-inbox-badge { background: var(--secondary); color: var(--white); font-size: .55rem; font-weight: 700; padding: .1rem .4rem; border-radius: var(--radius-pill); }
.mockup-lead {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
  border-radius: 8px; margin-bottom: .3rem; background: var(--white);
  border: 1px solid var(--gray-100); transition: all .3s;
}
.mockup-lead:hover { border-color: var(--secondary); }
.mockup-lead-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mockup-lead-dot--blue { background: var(--secondary); }
.mockup-lead-dot--orange { background: var(--orange); }
.mockup-lead-dot--green { background: #16A34A; }
.mockup-lead-info { flex: 1; }
.mockup-lead-name { font-family: var(--font-head); font-size: .7rem; font-weight: 700; color: var(--gray-900); }
.mockup-lead-src { font-size: .58rem; color: var(--gray-400); }
.mockup-lead-tag { font-size: .5rem; font-weight: 600; padding: .1rem .35rem; border-radius: var(--radius-pill); font-family: var(--font-head); }
.mockup-lead-tag--email { background: #EEF4FF; color: var(--primary); }
.mockup-lead-tag--form { background: #FFF0EC; color: var(--orange); }
.mockup-lead-tag--web { background: #DCFCE7; color: #16A34A; }

/* Offer mockup */
.mockup-offer {
  width: 300px; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 8px 32px rgba(17, 66, 174, .12); display: flex;
  background: var(--white); border: 1px solid var(--gray-200);
}
.mockup-offer-sidebar {
  width: 90px; min-width: 90px; background: linear-gradient(160deg, var(--dark), #0e2460);
  padding: .8rem .6rem; display: flex; flex-direction: column; justify-content: space-between; color: rgba(255, 255, 255, .9);
}
.mockup-offer-logo { width: 20px; height: 20px; margin-bottom: .8rem; opacity: .8; }
.mockup-offer-title { font-family: var(--font-head); font-size: .55rem; font-weight: 800; color: var(--white); line-height: 1.3; margin-bottom: .3rem; }
.mockup-offer-sub { font-size: .42rem; color: rgba(255, 255, 255, .4); line-height: 1.4; }
.mockup-offer-main { flex: 1; padding: .8rem; display: flex; flex-direction: column; gap: .4rem; }
.mockup-offer-h { font-family: var(--font-head); font-size: .6rem; font-weight: 700; color: var(--gray-900); }
.mockup-offer-text { font-size: .45rem; color: var(--gray-500); line-height: 1.5; }
.mockup-offer-row { display: flex; justify-content: space-between; padding: .2rem 0; border-bottom: 1px solid var(--gray-100); font-size: .48rem; }
.mockup-offer-row-name { color: var(--gray-700); }
.mockup-offer-row-price { font-weight: 700; color: var(--gray-900); font-family: var(--font-head); }
.mockup-offer-total { display: flex; justify-content: space-between; padding: .3rem 0; border-top: 1.5px solid var(--gray-200); font-family: var(--font-head); font-weight: 800; font-size: .55rem; }
.mockup-offer-total-val { color: var(--primary); }
.mockup-offer-btn {
  align-self: flex-start; padding: .15rem .5rem; border-radius: 4px;
  background: #11b875; color: var(--white); font-family: var(--font-head);
  font-size: .45rem; font-weight: 700; border: none;
}

/* Slide dots for offer mockup */
.mockup-slide-dots { display: flex; gap: .25rem; justify-content: center; margin-top: .4rem; }
.mockup-slide-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gray-200); }
.mockup-slide-dot.active { background: var(--primary); width: 14px; border-radius: 3px; }

/* ===== FORM CARD (shared across kontakt, dokumentace) ===== */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 3rem;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

/* ===== RESPONSIVE — SUBPAGES ===== */
@media (max-width: 1024px) {
  .page-hero { padding-top: 7.5rem; }
  .feature-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .detail-row, .detail-row--reverse { grid-template-columns: 1fr; gap: 2rem; direction: ltr; }
  .detail-illust { width: 100%; max-width: 520px; }
}

@media (max-width: 600px) {
  .detail-visual { max-width: 100%; }
  .detail-illust { max-width: 100%; }
}

@media (max-width: 640px) {
  .feature-grid-6 { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 1.8rem; }
  .form-card { padding: 2rem 1.5rem; }
}

/* ==========================================================================
   KEYFRAME ANIMATIONS (shared across subpages)
   ========================================================================== */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 155, 252, .2); }
  50%      { box-shadow: 0 0 0 6px rgba(26, 155, 252, 0); }
}

@keyframes notifFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ==========================================================================
   SPLIT HERO (solution pages — pro-obchodni-tymy, etc.)
   ========================================================================== */
.split-hero {
  position: relative; z-index: 1; max-width: 1260px; margin: 0 auto;
  padding: 11rem 2rem 4rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.split-hero-content { animation: fadeSlideUp .7s var(--ease-out-expo) both; }
.split-hero .overline {
  font-family: var(--font-head); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 3px; color: var(--secondary); margin-bottom: 1rem;
}
.split-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 900;
  letter-spacing: -1.5px; margin-bottom: 1.2rem;
}
.split-hero h1 .highlight {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.split-hero-subtitle {
  font-size: 1.1rem; color: var(--gray-500); max-width: 460px;
  line-height: 1.8; margin-bottom: 2rem;
}
.split-hero-buttons { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.split-hero-meta { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.split-hero-meta-item {
  font-size: .82rem; color: var(--gray-400);
  font-family: var(--font-head); font-weight: 600;
}

/* ===== HERO ILLUSTRATION CARD ===== */
.hero-illust {
  animation: fadeSlideUp .8s var(--ease-out-expo) .2s both;
  position: relative;
}
.hero-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 1.8rem; box-shadow: 0 8px 40px rgba(17, 66, 174, .07), 0 2px 8px rgba(0, 0, 0, .03);
  position: relative;
}
.hero-card-header { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.hero-card-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-card-title {
  font-family: var(--font-head); font-size: .9rem; font-weight: 700; color: var(--gray-900);
}
.hero-card-sub { font-size: .72rem; color: var(--gray-400); }

/* Hero card timeline steps */
.hero-card-timeline { display: flex; flex-direction: column; gap: 0; }
.hc-step {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .65rem 0; position: relative;
}
.hc-step:not(:last-child) { border-bottom: 1px solid var(--gray-100); }
.hc-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hc-dot--done { background: #DCFCE7; color: #16A34A; }
.hc-dot--active {
  background: #E8F4FD; color: var(--secondary);
  animation: hcPulse 2s ease-in-out infinite;
}
.hc-info { flex: 1; }
.hc-label {
  font-family: var(--font-head); font-size: .78rem; font-weight: 700; color: var(--gray-900);
}
.hc-time { font-size: .65rem; color: var(--gray-400); }
.hc-badge {
  font-size: .6rem; font-weight: 600; padding: .15rem .5rem;
  border-radius: var(--radius-pill); font-family: var(--font-head);
  flex-shrink: 0; align-self: center;
}
.hc-badge--fast { background: #DCFCE7; color: #16A34A; }
.hc-badge--auto { background: #EEF4FF; color: var(--primary); }

/* Floating notification */
.hero-notif {
  position: absolute; top: -20px; right: -12px; z-index: 3;
  background: var(--dark); border-radius: var(--radius-sm);
  padding: .5rem .9rem; display: flex; align-items: center; gap: .5rem;
  box-shadow: 0 8px 24px rgba(4, 8, 54, .25);
  animation: notifFloat 3s ease-in-out infinite;
}
.hero-notif-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2ACB42;
  animation: hcPulse 2s ease-in-out infinite;
}
.hero-notif-text {
  font-family: var(--font-head); font-size: .72rem; font-weight: 700; color: var(--white);
}

/* ==========================================================================
   PROBLEM / SOLUTION ROWS (solution pages)
   ========================================================================== */
.ps-rows { display: flex; flex-direction: column; gap: 1.2rem; }
.ps-row {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: all .3s var(--ease-out-expo);
}
.ps-row:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .04), 0 12px 40px rgba(0, 0, 0, .05);
  border-color: transparent;
}
.ps-left {
  padding: 2rem 2.2rem; background: var(--white);
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--gray-100);
}
.ps-left-label {
  font-family: var(--font-head); font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: #DC2626; margin-bottom: .6rem;
}
.ps-left h3 {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 800;
  letter-spacing: -.3px; margin-bottom: .6rem;
}
.ps-left p { font-size: .88rem; color: var(--gray-500); line-height: 1.7; }
.ps-right {
  padding: 2rem 2.2rem;
  background: linear-gradient(135deg, rgba(17, 66, 174, .02), rgba(26, 155, 252, .03));
  display: flex; flex-direction: column; justify-content: center;
}
.ps-right-label {
  font-family: var(--font-head); font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--primary); margin-bottom: .6rem;
  display: flex; align-items: center; gap: .4rem;
}
.ps-right h4 {
  font-family: var(--font-head); font-size: .95rem; font-weight: 700;
  color: var(--gray-900); margin-bottom: .5rem;
}
.ps-right p { font-size: .88rem; color: var(--gray-700); line-height: 1.7; }

/* ==========================================================================
   WORKFLOW STEPS (solution pages)
   ========================================================================== */
.workflow { padding: 3rem 0; }
.workflow-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: wf;
}
.wf-step { text-align: center; position: relative; }
.wf-step::before {
  counter-increment: wf; content: counter(wf);
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 1.2rem;
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white);
  box-shadow: 0 4px 16px rgba(17, 66, 174, .15);
}
.wf-step h4 {
  font-family: var(--font-head); font-size: .95rem; font-weight: 700; margin-bottom: .5rem;
}
.wf-step p {
  font-size: .85rem; color: var(--gray-500); line-height: 1.65;
  max-width: 240px; margin: 0 auto;
}
.wf-step:not(:last-child)::after {
  content: ''; position: absolute; top: 26px; left: calc(50% + 36px);
  width: calc(100% - 72px); height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

/* ==========================================================================
   KEY FEATURES — 4-column cards (solution pages)
   ========================================================================== */
.kf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.kf-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 1.5rem; transition: all .3s var(--ease-out-expo);
}
.kf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04), 0 16px 40px rgba(0, 0, 0, .06);
  border-color: transparent;
}
.kf-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #EEF4FF; color: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.kf-card h4 {
  font-family: var(--font-head); font-size: .95rem; font-weight: 700;
  margin-bottom: .4rem; letter-spacing: -.2px;
}
.kf-card p { font-size: .82rem; color: var(--gray-500); line-height: 1.6; }

/* ==========================================================================
   TIMELINE (jak-to-funguje page)
   ========================================================================== */
.timeline {
  position: relative; padding: 2rem 0 0 0; max-width: 760px; margin: 0 auto;
}
.tl-step {
  display: flex; align-items: flex-start; gap: 2rem;
  margin-bottom: 2.5rem; position: relative;
}
.tl-step:not(:last-child)::before {
  content: ''; position: absolute; left: 28px; transform: translateX(-50%);
  top: 28px; bottom: -2.5rem; width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: 2px; z-index: 0;
}
.tl-step:last-child { margin-bottom: 0; }
.tl-marker {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white);
  box-shadow: 0 4px 16px rgba(17, 66, 174, .18);
  position: relative; z-index: 2;
}
.tl-content {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 1.5rem 1.8rem; flex: 1; transition: all .35s var(--ease-out-expo);
}
.tl-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .04), 0 24px 64px rgba(0, 0, 0, .07);
  border-color: transparent;
}
.tl-content-header { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.tl-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tl-icon--blue   { background: #EEF4FF; color: var(--primary); }
.tl-icon--green  { background: #DCFCE7; color: #16A34A; }
.tl-icon--orange { background: #FFF0EC; color: var(--orange); }
.tl-icon--yellow { background: #FFF7D6; color: #B8960A; }
.tl-icon--purple { background: #F3E8FF; color: #7C3AED; }
.tl-content h3 {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; letter-spacing: -.3px;
}
.tl-content p { font-size: .88rem; color: var(--gray-500); line-height: 1.7; }

/* ==========================================================================
   BENEFIT CARDS (jak-to-funguje page)
   ========================================================================== */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.benefit-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 2rem; transition: all .35s var(--ease-out-expo); text-align: center;
}
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .04), 0 24px 64px rgba(0, 0, 0, .07);
  border-color: transparent;
}
.benefit-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem;
}
.benefit-icon--blue   { background: #EEF4FF; color: var(--primary); }
.benefit-icon--green  { background: #DCFCE7; color: #16A34A; }
.benefit-icon--orange { background: #FFF0EC; color: var(--orange); }
.benefit-card h3 {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 800;
  letter-spacing: -.3px; margin-bottom: .6rem;
}
.benefit-card p { font-size: .88rem; color: var(--gray-500); line-height: 1.7; }

/* ==========================================================================
   RESPONSIVE — SOLUTION PAGES & JAK-TO-FUNGUJE
   ========================================================================== */
@media (max-width: 1024px) {
  /* Split hero — single column */
  .split-hero { grid-template-columns: 1fr; padding-top: 7.5rem; text-align: center; }
  .split-hero-subtitle { margin: 0 auto 2rem; }
  .split-hero-buttons { justify-content: center; }
  .split-hero-meta { justify-content: center; }
  .hero-illust { max-width: 100%; margin: 0 auto; text-align: left; }
  .hero-card { width: 100%; max-width: 560px; margin: 0 auto; }
  .hero-notif { right: 0; }

  /* Workflow & key features — 2 columns */
  .workflow-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-step:not(:last-child)::after { display: none; }
  .kf-grid { grid-template-columns: repeat(2, 1fr); }

  /* Benefits — single column */
  .benefit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Problem/solution rows — stack */
  .ps-row { grid-template-columns: 1fr; }
  .ps-left { border-right: none; border-bottom: 1px solid var(--gray-100); }
}

@media (max-width: 640px) {
  /* Workflow & key features — single column */
  .workflow-grid, .kf-grid { grid-template-columns: 1fr; }

  /* Benefits — single column (reinforced) */
  .benefit-grid { grid-template-columns: 1fr; }

  /* Timeline adjustments */
  .tl-step { gap: 1rem; }
  .tl-step:not(:last-child)::before { left: 24px; }
  .tl-marker { width: 48px; height: 48px; font-size: 1rem; }
  .tl-content { padding: 1.2rem; }
}

/* ===== FEATURES SECTION (func-grid) ===== */
.features-section{background:linear-gradient(180deg,var(--bg),#EDF2FF,var(--bg))}
.func-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.func-item{
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);
  padding:1.5rem;transition:all .3s var(--ease-out-expo);
}
.func-item:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(0,0,0,.04),0 16px 40px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.02);
  border-color:transparent;
}
.func-icon{
  width:44px;height:44px;border-radius:12px;background:#EEF4FF;color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.func-item h4{font-family:var(--font-head);font-size:.95rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.2px}
.func-item p{font-size:.82rem;color:var(--gray-500);line-height:1.6}

/* ===== INTEGRATIONS ===== */
.integrations-header{margin-bottom:2rem}
.integrations-header .overline{font-family:var(--font-head);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--secondary);margin-bottom:.8rem}
.integrations-header h2{font-family:var(--font-head);font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-1px;color:var(--gray-900)}
/* integrations-logos and int-logo in app.css */

@media(max-width:1024px){
  .func-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .func-grid{grid-template-columns:1fr}
}

/* ===== CTA BANNER ===== */
.cta-banner{
  background:linear-gradient(135deg,var(--dark),#0e2460);border-radius:var(--radius-lg);
  padding:4rem 3rem;text-align:center;color:var(--white);position:relative;overflow:hidden;
}
.cta-grid{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));grid-auto-rows:48px}
.cta-grid-cell{border-right:1px solid rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.03)}
.cta-grid-cell.lit{background:rgba(255,255,255,.025)}
.cta-grid-cell.lit2{background:rgba(26,155,252,.04)}
.cta-grid-cell.lit3{background:rgba(255,255,255,.04)}
.cta-grid-cell.bright-border{border-color:rgba(255,255,255,.07)}
.cta-banner h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;letter-spacing:-1px;margin-bottom:.8rem;color:var(--white)}
.cta-banner p{font-size:1.05rem;color:rgba(255,255,255,.6);max-width:480px;margin:0 auto 2rem;line-height:1.7}
.cta-banner .btn-cta{background:var(--white);color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04)}
.cta-banner .btn-cta:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.12),0 10px 24px rgba(0,0,0,.10)}