/* ── Hero: Split layout override ── */
    #hero { min-height: 100dvh; }
    .hero-location { display: none; }

    .hero-split {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      padding: 120px 48px 80px;
      align-items: center;
    }

    .hero-content {
      display: flex;
      flex-direction: column;
    }
    .hero-content .hero-badge { margin-bottom: 32px; align-self: flex-start; }
    #hero .hero-content h1   { text-align: left; margin-bottom: 22px; }
    #hero .hero-sub          { text-align: left; margin-left: 0; margin-right: 0; margin-bottom: 36px; }
    #hero .hero-actions      { justify-content: flex-start; margin-bottom: 48px; }
    #hero .hero-stats        { margin: 0; justify-content: flex-start; max-width: 100%; }

    /* Canvas panel */
    .hero-visual {
      position: relative;
      height: 480px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      flex-shrink: 0;
    }
    #hero-canvas { display: block; width: 100%; height: 100%; }

    .hero-visual-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 55%, var(--color-surface) 100%);
      pointer-events: none;
    }
    [data-theme="light"] .hero-visual-overlay {
      background: linear-gradient(to bottom, transparent 55%, var(--color-surface) 100%);
    }

    .hero-visual-tag {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background: var(--badge-bg);
      border: 1px solid var(--badge-border);
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 0.67rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--badge-color);
    }

    /* ── Services: Bento grid ── */
    .services-bento {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 14px;
      max-width: 1100px;
      margin: 52px auto 0;
    }

    .bento-card {
      background: var(--badge-bg);
      border: 1px solid var(--color-border);
      border-radius: 24px;
      padding: 6px;
      cursor: pointer;
      transition: border-color 0.5s cubic-bezier(0.32,0.72,0,1), transform 0.3s cubic-bezier(0.32,0.72,0,1);
      text-decoration: none;
    }

    .bento-card:hover {
      border-color: rgba(232,144,64,0.4);
      transform: translateY(-2px);
    }

    .bento-card-inner {
      background: var(--color-card-bg);
      border-radius: 18px;
      padding: 36px;
      height: 100%;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      position: relative;
      overflow: hidden;
    }

    .bento-website { grid-column: 1; grid-row: 1; }
    .bento-automation { grid-column: 2; grid-row: 1; }
    .bento-ads { grid-column: 1; grid-row: 2; }
    .bento-crm { grid-column: 2; grid-row: 2; }
    .bento-ai { grid-column: 1 / -1; grid-row: 3; }

    .bento-ghost-num {
      position: absolute;
      bottom: -10px;
      right: 16px;
      font-family: 'Fraunces', serif;
      font-size: 7rem;
      font-weight: 800;
      color: var(--color-accent);
      opacity: 0.05;
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }

    .bento-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--badge-bg);
      border: 1px solid var(--badge-border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-accent);
      margin-bottom: 20px;
      transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    }

    .bento-card:hover .bento-icon {
      transform: scale(1.08) rotate(-5deg);
    }

    .bento-card h3 {
      font-family: 'DM Sans', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 10px;
    }

    .bento-card p {
      font-size: 0.875rem;
      color: var(--color-muted);
      line-height: 1.7;
      margin-bottom: 18px;
      max-width: 360px;
    }

    .bento-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 20px;
    }

    .bento-tag {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--badge-color);
      background: var(--badge-bg);
      border: 1px solid var(--badge-border);
      border-radius: 4px;
      padding: 3px 9px;
    }

    .bento-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--color-accent);
      text-decoration: none;
      transition: gap 0.15s;
    }

    .bento-link:hover { gap: 9px; }

    .bento-new-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(232,144,64,0.15);
      border: 1px solid var(--badge-border);
      color: var(--badge-color);
      border-radius: 999px;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 3px 10px;
      margin-bottom: 12px;
    }

    .bento-ai .bento-card-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center;
    }

    .bento-ai .bento-card-inner p {
      max-width: none;
    }

    .bento-ai-visual {
      background: var(--badge-bg);
      border: 1px solid var(--badge-border);
      border-radius: 12px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .bento-ai-tool {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--color-muted);
    }

    .bento-ai-tool-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-accent);
      flex-shrink: 0;
    }

    .services-view-all {
      text-align: center;
      margin-top: 36px;
    }

    /* ── Pillars: Editorial panels ── */
    .pillars-editorial {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      max-width: 1100px;
      margin: 48px auto 0;
      border: 1px solid var(--color-border);
      border-radius: 20px;
      overflow: hidden;
    }
    .pillar-panel {
      padding: 48px 40px;
      border-right: 1px solid var(--color-border);
      position: relative;
      overflow: hidden;
    }
    .pillar-panel:last-child { border-right: none; }

    .pillar-panel-ghost {
      position: absolute;
      top: -20px;
      right: 12px;
      font-family: 'Fraunces', Georgia, serif;
      font-size: 7rem;
      font-weight: 800;
      color: var(--color-accent);
      opacity: 0.06;
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }

    .pillar-panel-icon {
      width: 50px;
      height: 50px;
      background: var(--badge-bg);
      border: 1px solid var(--badge-border);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-accent);
      margin-bottom: 20px;
    }

    .pillar-panel h3 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 10px;
      line-height: 1.3;
    }
    .pillar-panel p {
      font-size: 0.9rem;
      color: var(--color-muted);
      line-height: 1.7;
    }

    /* ── Process: Timeline ── */
    .process-timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: 1100px;
      margin: 52px auto 0;
      position: relative;
    }
    .process-timeline::before {
      content: '';
      position: absolute;
      top: 26px;
      left: calc(6.5% + 27px);
      right: calc(6.5% + 27px);
      height: 1px;
      background: linear-gradient(to right, var(--color-accent) 0%, var(--color-border) 100%);
      pointer-events: none;
    }
    .process-item { padding: 0 20px 0 0; }
    .process-item:last-child { padding-right: 0; }

    .process-item-num {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 2px solid var(--color-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Fraunces', Georgia, serif;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--color-accent);
      margin-bottom: 24px;
      background: var(--color-bg);
      position: relative;
      z-index: 1;
    }
    .process-item h3 {
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--color-text);
    }
    .process-item p {
      font-size: 0.85rem;
      color: var(--color-muted);
      line-height: 1.7;
    }

    /* Pricing: hide emoji icon divs */
    .pricing-icon { display: none; }

    /* ── Responsive ── */

    @media (max-width: 900px) {

      .testimonial-inner { padding: 64px 20px !important; }

      .hero-split {
        grid-template-columns: 1fr;
        padding: 100px 24px 60px;
        gap: 36px;
      }
      .hero-visual { height: 260px; }
      .hero-content .hero-badge { align-self: center; }
      #hero .hero-content h1,
      #hero .hero-sub { text-align: center; }
      #hero .hero-actions { justify-content: center; }
      #hero .hero-stats { justify-content: center; }

      .services-bento {
        grid-template-columns: 1fr;
      }

      .bento-website,
      .bento-automation,
      .bento-ads,
      .bento-crm,
      .bento-ai {
        grid-column: 1;
        grid-row: auto;
      }

      .bento-ai .bento-card-inner {
        grid-template-columns: 1fr;
      }

      .bento-ai-visual {
        display: none;
      }

      .pillars-editorial {
        grid-template-columns: 1fr;
        border-radius: 16px;
      }
      .pillar-panel { border-right: none; border-bottom: 1px solid var(--color-border); }
      .pillar-panel:last-child { border-bottom: none; }

      .process-timeline { grid-template-columns: 1fr 1fr; gap: 32px; }
      .process-timeline::before { display: none; }

      /* Monthly plans callout: reduce padding and allow stacking */
      .monthly-plans-callout {
        padding: 28px 24px !important;
      }
      .monthly-plans-callout-text {
        min-width: 0 !important;
      }
      .monthly-plans-prices {
        width: 100%;
        justify-content: stretch;
      }
      .monthly-plans-prices > div {
        flex: 1;
      }
    }

    @media (max-width: 768px) {
      /* Testimonial: 3-col stats grid → stack to 1 col */
      .testimonial-stats-grid {
        grid-template-columns: 1fr !important;
      }
      .testimonial-stats-grid > div {
        border-right: none !important;
        border-bottom: 1px solid var(--color-border);
        padding: 24px 20px !important;
      }
      .testimonial-stats-grid > div:last-child {
        border-bottom: none;
      }

      /* Hero stats: allow wrapping on smaller tablets */
      .hero-stats { max-width: 100%; }
      .hero-stat { min-width: 100px; }
    }

    @media (max-width: 560px) {
      .process-timeline { grid-template-columns: 1fr; }
      .hero-split { padding: 88px 16px 40px; }

      /* Bento card padding reduction */
      .bento-card-inner { padding: 24px 20px; }

      /* Pillar panels: reduce padding */
      .pillar-panel { padding: 32px 24px; }

      /* Hero visual: shorter on small phones */
      .hero-visual { height: 200px; }

      /* Hero actions: stack buttons vertically */
      #hero .hero-actions {
        flex-direction: column;
        align-items: center;
      }
      #hero .hero-actions .btn-primary,
      #hero .hero-actions .btn-secondary {
        width: 100%;
        justify-content: center;
      }

      /* Hero stats: tighter padding */
      .hero-stat { padding: 12px 10px; }
      .hero-stat strong { font-size: 1.1rem; }

      /* Monthly plans callout: full-width vertical stack */
      .monthly-plans-callout {
        padding: 24px 20px !important;
      }
      .monthly-plans-prices {
        flex-direction: column !important;
        width: 100%;
      }
      .monthly-plans-prices > div {
        width: 100% !important;
        padding: 16px !important;
      }
      .monthly-plans-cta-wrap {
        width: 100%;
      }
      .monthly-plans-cta-wrap .btn-primary {
        width: 100%;
        justify-content: center;
      }

      /* Section label padding fix */
      section { padding: 52px 16px; }
    }

    @media (max-width: 480px) {
      /* Testimonial author row: stack vertically */
      .testimonial-author-row {
        flex-direction: column !important;
        align-items: flex-start !important;
      }

      /* Pricing grid max-width: full on very small screens */
      .pricing-grid { max-width: 100%; padding: 0 16px; }

      /* Services bento inner padding */
      .bento-card-inner { padding: 20px 16px; }
    }