/* home.css — ScaleUp New marketing Home unique styles, ported VERBATIM from Home.html <style>.
   Loaded AFTER features-pages.css so Home's rules win (incl. --brand:#4f46e5 override).
   Chrome classes (.nav/.site-foot/.dd-menu/.footer-lang) match the shared marketing partials;
   the shared .drawer partial is styled by features-pages.css. */
  /* ============== Indigo SaaS palette ============== */
  :root {
    --bg:           #ffffff;
    --bg-soft:      #f8fafc;
    --surface:      #ffffff;
    --surface-2:    #f7f8fa;
    --line:         #e6e8ee;
    --line-strong:  #cfd3dc;

    --ink:          #0f172a;
    --ink-2:        #475569;
    --ink-3:        #64748b;
    --ink-4:        #94a3b8;

    --brand:        #4f46e5;
    --brand-hover:  #3f37c8;
    --brand-soft:   #eef0ff;
    --brand-tint:   #e0e7ff;

    /* Calendar event pastels (kept distinct from brand) */
    --c-reformer: #f1efe6; --c-reformer-ink: #5c4a1e;
    --c-flow:     #fde4d3; --c-flow-ink:     #7a3420;
    --c-group:    #d3eadb; --c-group-ink:    #1f4a35;
    --c-private:  #e8dcf5; --c-private-ink:  #4a2b7a;
    --c-burn:     #e2ecc4; --c-burn-ink:     #3a4a10;
    --c-sunrise:  #dbe9ff; --c-sunrise-ink:  #1e3a6b;

    --radius:    8px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 6px 24px -8px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, 0.18);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex; flex-direction: column;
  }
  a { color: inherit; text-decoration: none; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; font-size: 14px; font-weight: 500;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius); cursor: pointer;
    font-family: inherit; transition: background .15s, border-color .15s, color .15s;
  }
  .btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
  .btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
  .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
  .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
  .btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
  .btn.large { padding: 13px 22px; font-size: 14.5px; }
  .btn.on-dark { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.24); backdrop-filter: blur(6px); }
  .btn.on-dark:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); }

  /* ============== HEADER ============== */
  .nav {
    position: sticky; top: 0; z-index: 30;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    max-width: 1240px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 28px; gap: 32px;
  }
  .brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em;
    color: var(--ink);
  }
  .brand-mark {
    width: 26px; height: 26px;
    background: var(--brand); border-radius: 7px;
    position: relative;
  }
  .brand-mark::before, .brand-mark::after {
    content: ''; position: absolute;
    background: rgba(255,255,255,0.85);
    border-radius: 1.5px;
  }
  .brand-mark::before { left: 6px; right: 6px; top: 7px; height: 2px; }
  .brand-mark::after  { left: 6px; right: 6px; bottom: 7px; height: 2px; }
  .nav-links {
    display: flex; gap: 4px; flex: 1; justify-content: center;
  }
  .nav-links a {
    padding: 8px 14px; font-size: 14px; font-weight: 500;
    color: var(--ink-2); border-radius: 7px;
  }
  .nav-links a:hover { background: var(--surface-2); color: var(--ink); }
  .nav-links a.active { color: var(--ink); }
  .find-studio{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;font-size:14px;font-weight:600;background:#d1fae5;color:#047857;border:1px solid #a7f3d0;transition:background .15s,border-color .15s;}
  .find-studio:hover{background:#bbf7d0;border-color:#6ee7b7;}
  .find-studio svg{transition:transform .15s;}
  .find-studio:hover svg{transform:translate(2px,-2px);}
  .nav-links .has-dd { position:relative; }
  .nav-links .dd-toggle { padding:8px 14px; font-size:14px; font-weight:500; color:var(--ink-2); border-radius:7px; display:inline-flex; align-items:center; gap:5px; background:transparent; border:0; cursor:pointer; font-family:inherit; }
  .nav-links .dd-toggle:hover { background:var(--surface-2); color:var(--ink); }
  .nav-links .dd-toggle svg { transition:transform .2s; }
  .has-dd:hover .dd-toggle svg, .has-dd:focus-within .dd-toggle svg { transform:rotate(180deg); }
  .dd-menu { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; width:340px; opacity:0; pointer-events:none; transition:opacity .16s,transform .16s; z-index:40; }
  .dd-menu::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }
  .has-dd:hover .dd-menu, .has-dd:focus-within .dd-menu { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .dd-menu a { display:flex; gap:12px; padding:11px 12px; border-radius:10px; align-items:flex-start; color:var(--ink-2); }
  .dd-txt { display:flex; flex-direction:column; }
  .dd-menu a:hover { background:var(--surface-2); }
  .dd-ico { width:34px; height:34px; border-radius:9px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
  .dd-txt .t { font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
  .dd-txt .d { font-size:12px; color:var(--ink-3); margin-top:1px; line-height:1.4; }
  .feat-link { margin-top:auto; padding-top:6px; font-size:13.5px; font-weight:600; color:var(--brand-hover); display:inline-flex; align-items:center; gap:5px; }
  .feat-link svg { transition:transform .15s; }
  .feat:hover .feat-link svg { transform:translateX(3px); }
  .nav-actions { display: flex; align-items: center; gap: 8px; }

  /* Hamburger (mobile only) */
  .menu-btn {
    width: 38px; height: 38px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); cursor: pointer;
    display: none; place-items: center;
    transition: background .15s, border-color .15s;
  }
  .menu-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }

  .nav-drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
  .nav-drawer .scrim { position: absolute; inset: 0; background: rgba(15,23,42,0.32); opacity: 0; transition: opacity .22s ease; pointer-events: none; }
  .nav-drawer.open .scrim { opacity: 1; pointer-events: auto; }
  .nav-drawer .panel {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: min(360px, 88vw);
    background: var(--bg);
    border-right: 1px solid var(--line);
    box-shadow: 30px 0 60px -20px rgba(15, 23, 42, 0.18);
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .22s ease;
    pointer-events: auto; overflow-y: auto;
  }
  .nav-drawer.open .panel { transform: translateX(0); }
  .nav-drawer .head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
  }
  .nav-drawer .sec { padding: 22px 22px 6px; }
  .nav-drawer .sec h5 {
    margin: 0 0 12px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  }
  .nav-drawer ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
  }
  .nav-drawer ul a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; border-radius: 10px;
    text-decoration: none; color: var(--ink);
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
  }
  .nav-drawer ul a:hover { background: var(--surface-2); }
  .nav-drawer ul a.active { background: var(--brand-soft); border-color: var(--brand-tint); }
  .nav-drawer ul a.active .lbl { color: var(--brand-hover); }
  .nav-drawer ul a .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .nav-drawer ul a .lbl { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
  .nav-drawer ul a .row svg { color: var(--ink-3); }
  .nav-drawer ul a:hover .row svg { color: var(--brand); }
  .nav-drawer ul a .desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

  /* ============== HERO (full-bleed image) ============== */
  .hero {
    position: relative; isolation: isolate;
    padding: 120px 28px 140px;
    text-align: center; color: #fff;
    overflow: hidden;
  }
  .hero-bg {
    position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(135deg, #1e1b4b 0%, #3730a3 35%, #4338ca 70%, #6366f1 100%);
    overflow: hidden;
  }
  /* SVG-illustrated "studio interior" placeholder */
  .hero-bg svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-overlay {
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(ellipse at 50% 100%, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0) 60%),
      radial-gradient(circle at 80% 20%, rgba(79,70,229,0.4) 0%, transparent 50%),
      linear-gradient(180deg, rgba(15,23,42,0.15) 0%, rgba(15,23,42,0.45) 100%);
  }

  .hero-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    padding: 6px 14px 6px 8px; border-radius: 999px;
    font-size: 12.5px; color: rgba(255,255,255,0.92); font-weight: 500;
    margin-bottom: 28px;
    backdrop-filter: blur(8px);
  }
  .hero-pill .tag {
    background: var(--brand); color: #fff;
    font-size: 10px; padding: 3px 8px; border-radius: 999px;
    font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  }

  .hero h1 {
    font-size: clamp(40px, 5.6vw, 72px);
    line-height: 1.04; letter-spacing: -0.035em; font-weight: 600;
    margin: 0 auto 22px; max-width: 920px; color: #fff;
  }
  .hero h1 em {
    font-style: normal;
    background: linear-gradient(120deg, #c7d2fe, #a5b4fc 60%, #818cf8);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero .lede {
    font-size: 18px; line-height: 1.55;
    color: rgba(255,255,255,0.78);
    margin: 0 auto 32px; max-width: 620px;
  }
  .hero-ctas {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 56px;
  }

  .hero-trust {
    display: flex; gap: 12px; justify-content: center; align-items: center;
    flex-wrap: wrap;
    color: rgba(255,255,255,0.78); font-size: 13px;
  }
  .hero-trust .stat-row {
    display: flex; gap: 28px; flex-wrap: wrap; justify-content: center;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.18);
    width: 100%; max-width: 720px; margin: 0 auto;
  }
  .hero-trust .stat .num {
    font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: #fff;
  }
  .hero-trust .stat .lbl {
    font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.6); font-weight: 600; margin-top: 2px;
  }

  /* Floating mock calendar overlapping the hero ↔ next section */
  .hero-mock-wrap {
    position: relative; z-index: 5;
    max-width: 1100px; margin: -80px auto -80px;
    padding: 0 28px;
  }
  .hero-mock {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 14px;
    overflow: hidden;
  }
  .mock-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 6px 14px;
  }
  .mock-bar .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--line-strong); }
  .mock-cal {
    background: var(--bg-soft);
    border-radius: 10px;
    padding: 16px;
  }
  .mock-cal-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
  }
  .mock-cal-head .ttl { font-size: 14px; font-weight: 600; }
  .mock-cal-head .nav-pill {
    display: inline-flex; gap: 4px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  }
  .mock-cal-head .nav-pill button {
    width: 26px; height: 26px; border: 0; background: transparent;
    border-radius: 999px; font-size: 13px; color: var(--ink-2); cursor: pointer;
    display: grid; place-items: center;
  }
  .mock-cal-head .nav-pill button:hover { background: var(--surface-2); }
  .mock-cal-head .nav-pill .label { padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; }

  .mock-grid {
    display: grid; grid-template-columns: 36px repeat(5, 1fr);
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--line); overflow: hidden;
  }
  .mock-grid .col-h {
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600;
    padding: 9px 6px; border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: center;
  }
  .mock-grid .col-h:last-child { border-right: 0; }
  .mock-grid .col-h .d { font-size: 13px; color: var(--ink); margin-top: 2px; font-weight: 600; letter-spacing: -0.01em; }
  .mock-grid .col-h.today .d { color: var(--brand); }
  .mock-grid .time-cell {
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    height: 44px; padding: 5px 6px 0;
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    color: var(--ink-3); text-align: right;
  }
  .mock-grid .day-slot {
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    height: 44px; padding: 3px;
    position: relative;
  }
  .mock-grid .day-slot:nth-child(6n) { border-right: 0; }
  .mock-grid .day-slot:last-child { border-right: 0; }
  .mock-event {
    border-radius: 5px; padding: 5px 7px;
    font-size: 10.5px; line-height: 1.2; font-weight: 500;
    cursor: pointer; height: 100%;
    overflow: hidden;
  }
  .mock-event .who { font-size: 9px; opacity: 0.78; margin-top: 1px; font-family: 'JetBrains Mono', monospace; font-weight: 400; }
  .mock-event[data-c="reformer"] { background: var(--c-reformer); color: var(--c-reformer-ink); }
  .mock-event[data-c="flow"] { background: var(--c-flow); color: var(--c-flow-ink); }
  .mock-event[data-c="group"] { background: var(--c-group); color: var(--c-group-ink); }
  .mock-event[data-c="private"] { background: var(--c-private); color: var(--c-private-ink); }
  .mock-event[data-c="burn"] { background: var(--c-burn); color: var(--c-burn-ink); }
  .mock-event[data-c="sunrise"] { background: var(--c-sunrise); color: var(--c-sunrise-ink); }
  .mock-event.fade { animation: fadeIn .35s both; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } }

  /* ============== Section chrome ============== */
  section.block {
    padding: 100px 28px 80px;
  }
  section.block.tinted { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
  .sec-head .kicker {
    display: inline-block;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--brand); font-weight: 600; margin-bottom: 12px;
  }
  .sec-head h2 {
    margin: 0 0 14px; font-size: clamp(30px, 3.6vw, 44px);
    letter-spacing: -0.025em; line-height: 1.1; font-weight: 600;
    color: var(--ink);
  }
  .sec-head p {
    margin: 0 auto; font-size: 16.5px; line-height: 1.55; color: var(--ink-2);
    max-width: 620px;
  }

  /* ============== FEATURES ============== */
  .features {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    max-width: 1180px; margin: 0 auto;
  }
  .feat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color .18s, transform .18s, box-shadow .18s;
  }
  .feat:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .feat .ico {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center;
  }
  .feat h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; font-weight: 600; }
  .feat p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
  .feat .bullets {
    list-style: none; padding: 0; margin: 6px 0 0;
    display: flex; flex-direction: column; gap: 6px;
  }
  .feat .bullets li {
    font-size: 13px; color: var(--ink-2);
    display: flex; gap: 8px; align-items: flex-start;
  }
  .feat .bullets svg { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
  .feat.wide { grid-column: span 2; }
  .feat.wide .bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }

  /* ============== PRICING ============== */
  .pricing {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    max-width: 1100px; margin: 0 auto;
  }
  .price-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
    display: flex; flex-direction: column; gap: 18px;
    position: relative;
  }
  .price-card.featured {
    background: var(--ink); color: #fff;
    border-color: var(--ink);
    transform: translateY(-12px);
    box-shadow: var(--shadow-lg);
  }
  .price-card.featured .tier { color: #a5b4fc; }
  .price-card.featured .price { color: #fff; }
  .price-card.featured .desc { color: rgba(255,255,255,0.7); }
  .price-card.featured ul li { color: rgba(255,255,255,0.85); }
  .price-card.featured ul svg { color: #a5b4fc; }
  .price-card.featured ul { border-color: rgba(255,255,255,0.18); }
  .price-card .tag {
    position: absolute; top: -10px; right: 20px;
    background: var(--brand); color: #fff;
    font-size: 10.5px; padding: 4px 10px; border-radius: 999px;
    letter-spacing: 0.06em; font-weight: 600; text-transform: uppercase;
  }
  .price-card .tier {
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--brand); font-weight: 600;
  }
  .price-card .price {
    font-size: 38px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--ink); line-height: 1;
  }
  .price-card .price .unit {
    font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 4px;
  }
  .price-card.featured .price .unit { color: rgba(255,255,255,0.6); }
  .price-card .desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
  .price-card ul {
    list-style: none; padding: 18px 0 0; margin: 0;
    display: flex; flex-direction: column; gap: 9px;
    border-top: 1px solid var(--line);
  }
  .price-card ul li {
    font-size: 13.5px; color: var(--ink-2);
    display: flex; gap: 8px; align-items: flex-start;
  }
  .price-card ul svg { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
  .price-card .btn { justify-content: center; padding: 12px; margin-top: auto; }
  .price-card.featured .btn.primary { background: var(--brand); border-color: var(--brand); }
  .price-card.featured .btn.primary:hover { background: #6366f1; border-color: #6366f1; }
  /* Dynamic cards: struck-through pre-discount monthly price + billing-cadence note */
  .price-card .price .was {
    font-size: 16px; font-weight: 500; color: var(--ink-3);
    text-decoration: line-through; margin-right: 8px; letter-spacing: -0.01em;
  }
  .price-card.featured .price .was { color: rgba(255,255,255,0.45); }
  .price-card .billed { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
  .price-card.featured .billed { color: rgba(255,255,255,0.55); }
  /* Fewer than 3 published packages: keep the row centered and balanced */
  .pricing.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 740px; }
  .pricing.cols-1 { grid-template-columns: 1fr; max-width: 380px; }

  /* ============== TESTIMONIALS ============== */
  .testimonials {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    max-width: 1180px; margin: 0 auto;
  }
  .quote {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 26px;
    display: flex; flex-direction: column; gap: 18px;
  }
  .quote .stars { color: var(--brand); font-size: 14px; letter-spacing: 0.1em; }
  .quote blockquote {
    margin: 0; font-size: 15.5px; line-height: 1.55;
    color: var(--ink); letter-spacing: -0.005em;
  }
  .quote .who {
    display: flex; align-items: center; gap: 12px;
    margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  }
  .quote .who .ava {
    width: 38px; height: 38px; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; font-weight: 600; font-size: 13px;
  }
  .quote .who .name { font-size: 13.5px; font-weight: 500; }
  .quote .who .role { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

  /* ============== FAQ ============== */
  .faq { max-width: 760px; margin: 0 auto; }
  .faq details {
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }
  .faq details[open] { padding-bottom: 22px; }
  .faq summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-size: 16.5px; font-weight: 500; color: var(--ink);
    letter-spacing: -0.01em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: '+'; font-size: 22px; color: var(--ink-3);
    transition: transform .2s; font-weight: 400; line-height: 1;
  }
  .faq details[open] summary::after { content: '−'; color: var(--brand); }
  .faq details p {
    margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
    max-width: 640px;
  }

  /* ============== CTA ============== */
  .cta-band {
    margin: 0 28px 88px;
    background: var(--ink);
    color: #fff;
    border-radius: 22px;
    padding: 56px 48px;
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 40px; align-items: center;
    position: relative; overflow: hidden;
    max-width: 1180px; margin-left: auto; margin-right: auto;
  }
  .cta-band::before {
    content: ''; position: absolute; right: -120px; top: -120px;
    width: 460px; height: 460px; border-radius: 999px;
    background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
    opacity: 0.45;
  }
  .cta-band h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.1; letter-spacing: -0.025em; font-weight: 600;
  }
  .cta-band p {
    margin: 0; font-size: 15.5px; color: rgba(255,255,255,0.78); line-height: 1.5;
    max-width: 460px;
  }
  .cta-form {
    background: var(--surface); color: var(--ink);
    border-radius: 14px; padding: 22px;
    position: relative; z-index: 1;
  }
  .cta-form h3 {
    margin: 0 0 16px; font-size: 13px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  }
  .cta-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cta-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .cta-form label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
  .cta-form input {
    width: 100%; border: 1px solid var(--line); border-radius: 8px;
    padding: 11px 13px; font: inherit; font-size: 14px;
    background: var(--surface); color: var(--ink);
  }
  .cta-form input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .cta-form .industry { margin-bottom: 16px; }
  .cta-form .industry .lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
  .cta-form .radios { display: flex; flex-wrap: wrap; gap: 8px; }
  .cta-form .radios label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
  }
  .cta-form .radios label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-hover); }
  .cta-form .radios input { width: auto; accent-color: var(--brand); margin: 0; }
  .cta-form .btn.primary { width: 100%; justify-content: center; padding: 13px; margin-top: 2px; }
  .cta-form .fine {
    margin: 12px 0 0; font-size: 11.5px; color: var(--ink-3);
  }
  .pop-wrap { position: relative; }
  .footer-lang { display:inline-flex; align-items:center; gap:9px; padding:7px 11px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-family:inherit; cursor:pointer; }
  .footer-lang:hover { border-color:var(--ink-3); }
  .footer-lang .lang-code { font-size:12.5px; font-weight:600; }
  .footer-lang .lang-flag { display:inline-flex; }
  .footer-lang svg { color:var(--ink-3); }
  .fl { width:21px; height:14px; border-radius:3px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.1); }
  .pop-menu { position:absolute; bottom:calc(100% + 8px); left:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px -12px rgba(15,23,42,.22); padding:6px; min-width:200px; opacity:0; transform:translateY(6px) scale(.98); transform-origin:bottom left; pointer-events:none; transition:opacity .15s,transform .15s; z-index:40; }
  .pop-wrap.open .pop-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .lang-item { width:100%; display:flex; align-items:center; gap:11px; padding:9px 12px; border:0; background:transparent; border-radius:9px; cursor:pointer; font-family:inherit; font-size:13.5px; color:var(--ink); text-align:left; }
  .lang-item .flag { display:inline-flex; width:21px; }
  .lang-item .nm { flex:1; }
  .lang-item:hover { background:var(--surface-2); }
  .lang-item.active { color:var(--brand-hover); font-weight:600; background:var(--brand-soft); }
  .lang-item .code { font-size:11px; color:var(--ink-3); font-weight:600; }
  .lang-item.active .code { color:var(--brand-hover); }
  /* ============== FOOTER ============== */
  .site-foot {
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
    padding: 48px 28px 28px;
  }
  .foot-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
  }
  .foot-brand p {
    margin: 12px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.55; max-width: 280px;
  }
  .site-foot h4 {
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink); font-weight: 600; margin: 0 0 12px;
  }
  .site-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .site-foot ul a { font-size: 13.5px; color: var(--ink-2); }
  .site-foot ul a:hover { color: var(--brand); }
  .foot-legal {
    max-width: 1240px; margin: 32px auto 0; padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--ink-3);
  }
  .foot-legal .social { display: flex; gap: 18px; }

  /* ============== Mobile ============== */
  @media (max-width: 1024px) {
    .nav-links { display: none; }
    .menu-btn { display: grid; }
    .nav-inner { gap: 12px; padding: 12px 16px; }
    .nav-actions .btn.ghost { display: none; }
    .nav-actions .btn.primary { padding: 9px 14px; font-size: 13.5px; }
    .hero { padding: 80px 16px 100px; }
    .hero-mock-wrap { padding: 0 16px; margin-top: -60px; margin-bottom: -60px; }
    .features, .pricing, .pricing.cols-2, .pricing.cols-1, .testimonials { grid-template-columns: 1fr; }
    .feat.wide { grid-column: span 1; }
    .feat.wide .bullets { grid-template-columns: 1fr; }
    .price-card.featured { transform: none; }
    .cta-band { grid-template-columns: 1fr; padding: 36px 24px; margin: 0 16px 60px; }
    section.block { padding: 80px 16px 60px; }
    .foot-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
    .foot-legal { flex-direction: column; gap: 14px; }
    .mock-grid { grid-template-columns: 28px repeat(5, 1fr); }
  }