*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:         #F7F6F3;
      --bg2:        #FFFFFF;
      --ink:        #0D1117;
      --ink2:       #1E293B;
      --muted:      #6B7280;
      --border:     #E5E7EB;
      --accent:     #2563EB;
      --accent-l:   #3B82F6;
      --accent-bg:  #EFF6FF;
      --dark:       #0A0F1E;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', -apple-system, sans-serif; color: var(--ink); background: var(--bg2); overflow-x: hidden; }

    .container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
    .section-pad { padding: 96px 0; }

    /* EYEBROW */
    .eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
      color: var(--accent); display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    }
    .eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--accent); flex-shrink: 0; }

    h1, h2 { font-family: 'Fraunces', serif; letter-spacing: -.03em; line-height: 1.0; }
    .section-h2 { font-size: clamp(32px,3.5vw,52px); font-weight: 700; margin-bottom: 14px; color: var(--ink); }
    .section-h2 em { font-style: italic; font-weight: 300; color: var(--accent); display: block; }
    .section-sub { font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 520px; }

    /* BUTTONS */
    .btn-primary {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--ink); color: #fff;
      padding: 16px 30px; border-radius: 4px; font-size: 15px; font-weight: 700;
      text-decoration: none; transition: all .25s;
    }
    .btn-primary:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,99,235,.25); }
    .btn-primary svg { width: 13px; height: 13px; stroke: #fff; fill: none; transition: transform .2s; }
    .btn-primary:hover svg { transform: translateX(4px); }
    .btn-ghost { color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .2s; }
    .btn-ghost:hover { color: var(--ink); }

    /* NAV */
    nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; padding: 18px 0; transition: background .3s, box-shadow .3s; }
    nav.scrolled { background: rgba(255,255,255,.95); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--border); }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; }
    .nav-logo { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -.025em; display: flex; align-items: center; gap: 8px; }
    .nav-logo-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
    .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
    .nav-links a { color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .2s; }
    .nav-links a:hover { color: var(--ink); }
    .nav-cta { background: var(--ink) !important; color: #fff !important; padding: 10px 22px !important; border-radius: 4px; transition: background .2s !important; }
    .nav-cta:hover { background: var(--accent) !important; }
    .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
    .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .3s; }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* MOBILE STICKY CTA */
    .mobile-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400; background: rgba(255,255,255,.97); backdrop-filter: blur(16px); border-top: 1px solid var(--border); padding: 12px 20px; }
    .mobile-sticky a { display: block; width: 100%; text-align: center; padding: 14px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }

    /* ── 1. HERO ── */
    #hero { background: var(--bg2); padding: 140px 0 96px; border-bottom: 1px solid var(--border); }
    .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
    .hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 20px; height: 1px; background: var(--accent); }
    h1.hero-h1 { font-size: clamp(44px,5vw,74px); font-weight: 900; color: var(--ink); line-height: .95; margin-bottom: 24px; letter-spacing: -.04em; }
    h1.hero-h1 em { font-style: italic; font-weight: 300; color: var(--accent); display: block; }
    .hero-sub { font-size: 18px; color: var(--muted); line-height: 1.75; margin-bottom: 40px; max-width: 480px; }
    .hero-actions { display: flex; align-items: center; gap: 20px; margin-bottom: 48px; flex-wrap: wrap; }
    .hero-proof { display: flex; gap: 40px; padding-top: 40px; border-top: 1px solid var(--border); flex-wrap: wrap; }
    .proof-item { display: flex; flex-direction: column; gap: 4px; }
    .proof-num { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
    .proof-num em { font-style: italic; color: var(--accent); }
    .proof-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

    /* Phone mockup */
    .hero-visual { display: flex; justify-content: center; align-items: center; }
    .phone-wrap { position: relative; }
    .phone-mock { width: 260px; height: 520px; background: #0D1021; border: 1.5px solid #2A2A3E; border-radius: 36px; overflow: hidden; box-shadow: 0 32px 64px rgba(13,17,23,.18), 0 0 0 1px rgba(0,0,0,.06); }
    .phone-notch { width: 80px; height: 22px; background: #060910; border-radius: 0 0 14px 14px; margin: 0 auto; }
    .mock-nav-bar { background: #0D1021; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); }
    .mock-logo-text { font-family: 'Fraunces', serif; font-size: 10px; font-weight: 700; color: #C9A84C; letter-spacing: -.01em; }
    .mock-book-pill { background: #C9A84C; color: #0D1021; font-size: 7px; font-weight: 700; padding: 3px 7px; border-radius: 2px; }
    .mock-hero-area { background: linear-gradient(160deg,#0D1021 0%,#1a1535 100%); padding: 20px 14px 16px; }
    .mock-eyebrow-text { font-size: 7px; letter-spacing: 2px; text-transform: uppercase; color: #C9A84C; margin-bottom: 8px; }
    .mock-headline { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 6px; }
    .mock-headline em { font-style: italic; font-weight: 300; color: #C9A84C; display: block; }
    .mock-body-text { font-size: 7px; color: rgba(255,255,255,.45); line-height: 1.5; margin-bottom: 14px; }
    .mock-cta-btn { background: #C9A84C; color: #0D1021; font-size: 8px; font-weight: 700; padding: 7px 12px; display: inline-block; border-radius: 2px; }
    .mock-services-area { background: #0A0F1E; padding: 14px; }
    .mock-svc-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
    .mock-svc-row:last-child { border-bottom: none; }
    .mock-svc-name { font-size: 7px; color: rgba(255,255,255,.65); }
    .mock-svc-price { font-size: 7px; color: #C9A84C; font-weight: 600; }
    .mock-float-badge { position: absolute; bottom: 40px; right: -18px; background: var(--ink); color: #fff; font-size: 9px; font-weight: 700; padding: 8px 14px; border-radius: 2px; box-shadow: 0 4px 16px rgba(13,17,23,.2); white-space: nowrap; }

    /* ── 2. TRUST STRIP ── */
    #trust-strip { background: var(--dark); padding: 56px 0; text-align: center; }
    #trust-strip h2 { font-family: 'Fraunces', serif; font-size: clamp(24px,3vw,40px); font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -.025em; line-height: 1.1; }
    #trust-strip p { font-size: 15px; color: rgba(255,255,255,.55); max-width: 580px; margin: 0 auto; line-height: 1.75; }

    /* ── 3. HOW IT WORKS ── */
    #clarity { background: var(--bg2); }
    .clarity-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 52px; }
    .clarity-card { background: var(--bg2); padding: 32px 26px; transition: background .2s; }
    .clarity-card:hover { background: #FAFBFF; }
    .clarity-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
    .clarity-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 10px; }
    .clarity-copy { font-size: 14px; color: var(--muted); line-height: 1.75; }

    /* ── 4. HOW IT WORKS ── */
    #how { background: var(--bg); }
    .steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 52px; }
    .step-card { background: var(--bg2); padding: 40px 32px; transition: background .2s; }
    .step-card:hover { background: #FAFBFF; }
    .step-num { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; font-weight: 600; }
    .step-title { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
    .step-desc { font-size: 14px; color: var(--muted); line-height: 1.85; }
    .step-callout { background: var(--accent-bg); border: 1px solid #DBEAFE; border-left: 3px solid var(--accent); padding: 28px 36px; margin-top: 1px; display: flex; gap: 36px; align-items: flex-start; }
    .step-callout blockquote { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; color: var(--ink); font-style: italic; flex: 1; line-height: 1.3; }
    .step-callout p { font-size: 14px; color: var(--muted); line-height: 1.75; flex: 1; padding-top: 4px; }

    /* ── 4. PORTFOLIO ── */
    #portfolio { background: var(--bg2); }
    .portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 52px; }
    .demo-card { display: block; text-decoration: none; border: 1px solid var(--border); overflow: hidden; transition: all .3s; }
    .demo-card:hover { border-color: #BAC8E8; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(13,17,23,.09); }
    .demo-swatch { height: 160px; display: flex; align-items: flex-end; padding: 12px 14px; }
    .demo-palette-label { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; }
    .demo-card-body { background: var(--bg2); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--border); }
    .demo-name { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
    .demo-note { font-size: 11px; color: var(--muted); }
    .demo-link { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 4px; transition: gap .2s; }
    .demo-card:hover .demo-link { gap: 8px; }
    .portfolio-caption { text-align: center; font-size: 14px; color: var(--muted); line-height: 1.8; max-width: 680px; margin: 48px auto 0; }

    /* ── 5. PRICING ── */
    #pricing { background: var(--bg); }
    .pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 52px; }
    .pricing-card { background: var(--bg2); border: 1px solid var(--border); padding: 36px 28px; position: relative; transition: all .3s; }
    .pricing-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(13,17,23,.08); }
    .pricing-card.featured { border-color: var(--accent); }
    .pricing-popular { position: absolute; top: -12px; left: 20px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; letter-spacing: .06em; text-transform: uppercase; }
    .pricing-tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
    .pricing-price { font-family: 'Fraunces', serif; font-size: 46px; font-weight: 700; color: var(--ink); line-height: 1; margin-bottom: 4px; letter-spacing: -.025em; }
    .pricing-price sup { font-size: 20px; vertical-align: super; font-weight: 400; color: var(--muted); }
    .pricing-price-note { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
    .pricing-divider { height: 1px; background: var(--border); margin-bottom: 18px; }
    .pricing-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
    .pricing-features li { display: flex; gap: 9px; font-size: 13px; color: var(--ink2); align-items: flex-start; line-height: 1.4; }
    .pricing-features li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
    .pricing-btn { display: block; width: 100%; text-align: center; padding: 12px; font-size: 13px; font-weight: 700; border-radius: 4px; text-decoration: none; transition: all .2s; }
    .pricing-btn-outline { border: 1px solid var(--border); color: var(--ink); background: transparent; }
    .pricing-btn-outline:hover { border-color: var(--ink); }
    .pricing-btn-solid { background: var(--ink); color: #fff; border: 1px solid transparent; }
    .pricing-btn-solid:hover { background: var(--accent); transform: translateY(-1px); }
    .pricing-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 28px; }

    /* ── 6. WHY BLUECAT ── */
    #why { background: var(--bg2); }
    .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 52px; }
    .why-block { background: var(--bg2); padding: 36px 32px; transition: background .2s; }
    .why-block:hover { background: #FAFBFF; }
    .why-q { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
    .why-a { font-size: 14px; color: var(--muted); line-height: 1.9; }

    /* ── 7. PROOF POINTS ── */
    #proof { background: var(--bg); }
    .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 52px; }
    .proof-item-block { background: var(--bg2); padding: 36px 32px; transition: background .2s; }
    .proof-item-block:hover { background: #FAFBFF; }
    .proof-check { font-size: 20px; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
    .proof-title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
    .proof-desc { font-size: 14px; color: var(--muted); line-height: 1.85; }

    /* ── 8. BOOKING CTA ── */
    #cta { background: var(--accent-bg); border-top: 1px solid #DBEAFE; }
    .cta-inner { text-align: center; max-width: 600px; margin: 0 auto; }
    .cta-eyebrow { justify-content: center; }
    .cta-eyebrow::before, .cta-eyebrow::after { content: ''; width: 20px; height: 1px; background: var(--accent); }
    .cta-h2 { font-size: clamp(30px,3.5vw,48px); font-weight: 700; color: var(--ink); margin-bottom: 14px; }
    .cta-h2 em { font-style: italic; font-weight: 300; color: var(--accent); display: block; }
    .cta-sub { font-size: 16px; color: var(--muted); line-height: 1.75; margin-bottom: 32px; }
    .chips-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; }
    .chip { font-size: 12px; color: var(--muted); background: #fff; border: 1px solid #DBEAFE; padding: 5px 14px; border-radius: 100px; }
    .cta-email { font-size: 13px; color: var(--muted); margin-top: 20px; }
    .cta-email a { color: var(--accent); text-decoration: none; }
    .cta-email a:hover { text-decoration: underline; }

    /* ── 9. INFO BAR ── */
    #info { background: var(--dark); padding: 44px 0; }
    .info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
    .info-item { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.6; }
    .info-item strong { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); margin-bottom: 3px; }

    /* ── 10. FOOTER ── */
    footer { background: var(--bg2); padding: 32px 0; border-top: 1px solid var(--border); }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
    .footer-brand { font-family: 'Fraunces', serif; font-size: 14px; font-weight: 700; color: var(--ink); }
    .footer-tagline { font-size: 13px; color: var(--muted); margin-top: 3px; }
    .footer-copy { font-size: 13px; color: var(--muted); }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .container { padding: 0 32px; }
      .hero-grid { gap: 48px; }
    }
    @media (max-width: 900px) {
      .steps-grid { grid-template-columns: 1fr; }
      .clarity-grid { grid-template-columns: 1fr 1fr; }
      .portfolio-grid { grid-template-columns: 1fr 1fr; }
      .why-grid, .proof-grid { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; }
      .step-callout { flex-direction: column; gap: 12px; }
      .info-grid { grid-template-columns: 1fr; gap: 20px; }
    }
    @media (max-width: 768px) {
      .container { padding: 0 20px; }
      nav { padding: 14px 0; }
      .nav-links { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.98); flex-direction: column; align-items: center; justify-content: center; gap: 32px; z-index: 400; list-style: none; }
      .nav-links.open { display: flex; }
      .nav-links a { font-size: 20px; font-weight: 600; color: var(--ink); }
      .nav-hamburger { display: flex; position: relative; z-index: 500; }
      #hero { padding: 110px 0 72px; }
      .hero-grid { grid-template-columns: 1fr; gap: 48px; }
      .hero-visual { order: -1; }
      .phone-mock { width: 200px; height: 400px; }
      .section-pad { padding: 60px 0; }
      .portfolio-grid { grid-template-columns: 1fr; }
      .clarity-grid { grid-template-columns: 1fr; }
      .mobile-sticky { display: block; }
      body { padding-bottom: 68px; }
      .hero-proof { gap: 24px; }
      .step-callout { padding: 24px 20px; }
    }

    /* ════════════════════════════════════════════════════
       SERVICE-PAGE ADDITIONS  (shared across service pages)
       ════════════════════════════════════════════════════ */

    /* Per-service accent themes — override the brand vars on <body> */
    body.theme-green { --accent:#16A34A; --accent-l:#22C55E; --accent-bg:#ECFDF3; }
    body.theme-sky   { --accent:#0284C7; --accent-l:#38BDF8; --accent-bg:#E0F2FE; }
    body.theme-teal  { --accent:#0D9488; --accent-l:#2DD4BF; --accent-bg:#ECFDFB; }

    /* Active nav item */
    .nav-links a.active { color: var(--ink); position: relative; }
    .nav-links a.active::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent); border-radius:2px; }

    /* Service chip row under hero eyebrow */
    .svc-tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
    .svc-tag { font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--accent); background:var(--accent-bg); border:1px solid var(--border); padding:5px 12px; border-radius:100px; }

    /* Stat cost-strip cards (dark section) */
    .stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px; }
    .stat-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:26px 22px; text-align:left; }
    .stat-big { font-family:'Fraunces',serif; font-size:38px; font-weight:700; color:#fff; line-height:1; letter-spacing:-.02em; }
    .stat-big em { font-style:italic; color:var(--accent-l); }
    .stat-lab { font-size:13px; color:rgba(255,255,255,.55); line-height:1.6; margin-top:10px; }

    /* Two-up duo grid (what it does / who it's for) — borrows why-grid look */
    .duo-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:52px; }
    .duo-block { background:var(--bg2); padding:38px 34px; }
    .duo-block h3 { font-family:'Fraunces',serif; font-size:20px; font-weight:700; color:var(--ink); margin-bottom:18px; }
    .duo-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
    .duo-list li { display:flex; gap:11px; font-size:14.5px; color:var(--ink2); line-height:1.5; align-items:flex-start; }
    .duo-list li::before { content:''; width:7px; height:7px; margin-top:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }

    /* Centred / narrow pricing */
    .pricing-grid.cols-1 { grid-template-columns:minmax(0,440px); justify-content:center; }
    .pricing-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,400px)); justify-content:center; }

    /* ── HERO DEVICE VISUALS ── */
    .device { width:300px; background:#0D1021; border:1.5px solid #2A2A3E; border-radius:30px; padding:14px; box-shadow:0 32px 64px rgba(13,17,23,.20),0 0 0 1px rgba(0,0,0,.06); position:relative; }
    .device-head { display:flex; align-items:center; gap:10px; padding:4px 6px 14px; border-bottom:1px solid rgba(255,255,255,.07); }
    .device-avatar { width:34px; height:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .device-avatar svg { width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2; }
    .device-name { font-size:13px; font-weight:700; color:#fff; line-height:1.1; }
    .device-sub { font-size:10px; color:rgba(255,255,255,.4); margin-top:1px; }
    .device-float { position:absolute; bottom:30px; right:-16px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:8px 14px; border-radius:4px; box-shadow:0 6px 18px rgba(13,17,23,.28); white-space:nowrap; }

    /* Chat bubbles (WhatsApp) */
    .chat-body { padding:16px 6px 8px; display:flex; flex-direction:column; gap:10px; }
    .bub { max-width:78%; font-size:11.5px; line-height:1.45; padding:9px 12px; border-radius:14px; }
    .bub.sys { align-self:center; background:rgba(255,255,255,.06); color:rgba(255,255,255,.55); font-size:10px; padding:5px 11px; border-radius:8px; }
    .bub.out { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
    .bub.in  { align-self:flex-start; background:#1E2230; color:rgba(255,255,255,.88); border-bottom-left-radius:4px; }

    /* Call card (Phone) */
    .call-status { display:flex; align-items:center; gap:8px; padding:14px 6px 12px; }
    .call-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-l); box-shadow:0 0 0 4px rgba(56,189,248,.18); }
    .call-status span { font-size:11px; color:rgba(255,255,255,.6); font-weight:600; letter-spacing:.04em; }
    .transcript { display:flex; flex-direction:column; gap:9px; padding:6px 4px; }
    .tline { font-size:11px; line-height:1.45; }
    .tline b { display:block; font-size:8.5px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px; }
    .tline.ai b { color:var(--accent-l); } .tline.ai { color:rgba(255,255,255,.85); }
    .tline.cust b { color:rgba(255,255,255,.4); } .tline.cust { color:rgba(255,255,255,.6); }
    .capture-card { margin-top:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:12px; }
    .capture-card .ct { font-size:8.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-l); margin-bottom:7px; }
    .capture-card .cr { display:flex; justify-content:space-between; font-size:10.5px; padding:3px 0; color:rgba(255,255,255,.7); }
    .capture-card .cr span:last-child { color:#fff; font-weight:600; }

    /* Review card (Reviews) */
    .review-shell { background:#fff; border:1px solid var(--border); border-radius:18px; padding:0; width:320px; box-shadow:0 32px 64px rgba(13,17,23,.16); overflow:hidden; }
    .review-top { background:var(--accent-bg); padding:18px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); }
    .gmark { width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; color:var(--accent); flex-shrink:0; }
    .review-top .rt-name { font-size:13px; font-weight:700; color:var(--ink); }
    .review-top .rt-sub { font-size:11px; color:var(--muted); }
    .review-card { padding:16px 20px; border-bottom:1px solid var(--border); }
    .review-card:last-child { border-bottom:none; }
    .review-card .rc-head { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
    .rc-ava { width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
    .rc-name { font-size:12px; font-weight:600; color:var(--ink); }
    .rc-stars { color:#FBBC05; font-size:12px; letter-spacing:1px; }
    .rc-text { font-size:12px; color:var(--muted); line-height:1.55; }
    .review-float { position:absolute; top:-14px; right:-10px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:7px 13px; border-radius:100px; box-shadow:0 6px 18px rgba(13,17,23,.22); }

    @media (max-width:900px){ .stat-grid{ grid-template-columns:1fr; } .duo-grid{ grid-template-columns:1fr; } .pricing-grid.cols-2{ grid-template-columns:1fr; } }
    @media (max-width:768px){ .device,.review-shell{ width:260px; } }