:root{--bg:#fafaf9;--surface:#fff;--surface-alt:#f5f5f3;--border:#e7e5e4;--text:#1c1917;--muted:#78716c;--muted2:#a8a29e;--accent:#3b82f6;--accent-soft:#eff6ff} *{margin:0;padding:0;box-sizing:border-box} body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden} a{text-decoration:none;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} button:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-outline:focus-visible{outline-offset:2px} input:focus-visible{outline:none} /* ── Nav ── */ nav{ position:sticky;top:0;z-index:100; background:rgba(250,250,249,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border);padding:16px 36px; display:flex;align-items:center;justify-content:space-between; } .nav-logo{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text)} .nav-mark{ width:45px;height:45px;border-radius:50%;object-fit:contain; } .nav-name{font-size:19px;font-weight:800;letter-spacing:-0.3px} .nav-links{display:flex;align-items:center;gap:28px} .nav-links a{color:var(--muted);font-size:15px;font-weight:600;transition:color 0.15s;cursor:pointer} .nav-links a:hover{color:var(--text)} .nav-links a.nav-active{color:var(--text) !important;font-weight:700 !important} .nav-cta{ background:var(--accent);color:#fff !important; padding:10px 24px;border-radius:10px;font-weight:700; transition:opacity 0.15s,transform 0.15s; } .nav-cta:hover{opacity:0.9;transform:translateY(-1px)} /* ── Footer ── */ footer{ text-align:center;padding:24px; border-top:1px solid var(--border); font-size:12px;color:var(--muted2); } .footer-link-accent{color:var(--accent)} .footer-link-muted{color:var(--muted2)} .plan-cta-full{width:100%;justify-content:center} .legal-note{margin-top:6px;font-size:11px;color:var(--muted2)} .legal-note a{color:var(--muted2);text-decoration:underline} /* ── Page sections ── */ .page-section{display:none} .page-section.active{display:block} /* Full-viewport pages */ .page-viewport{display:none} .page-viewport.active{display:flex;flex-direction:column} .page-viewport main{ display:flex;flex-direction:column; align-items:center; padding:100px 48px 48px;gap:36px; } /* ── Shared component styles ── */ .btn-primary{ display:inline-flex;align-items:center;gap:8px; background:var(--accent);color:#fff; padding:14px 30px;border-radius:12px; font-size:16px;font-weight:700;font-family:inherit; border:none;cursor:pointer;white-space:nowrap; transition:opacity 0.15s,transform 0.15s; box-shadow:0 6px 24px rgba(0,0,0,0.12); } .btn-primary:hover{opacity:0.92;transform:translateY(-2px)} .btn-secondary{ display:inline-flex;align-items:center;gap:6px; background:var(--surface);border:1px solid var(--border);color:var(--text); padding:15px 28px;border-radius:12px; font-size:16px;font-weight:700;font-family:inherit;cursor:pointer; transition:border-color 0.15s,transform 0.15s; } .btn-secondary:hover{border-color:var(--accent);transform:translateY(-1px)} .btn-outline{ display:inline-flex;align-items:center;gap:8px; background:transparent;color:var(--text); border:1px solid var(--border); padding:12px 24px;border-radius:12px; font-size:15px;font-weight:700;font-family:inherit; cursor:pointer;width:100%;justify-content:center; transition:border-color 0.15s,transform 0.15s; } .btn-outline:hover{border-color:var(--accent);transform:translateY(-2px)} .header{text-align:center} .header h1{ font-size:clamp(32px,5vw,52px);font-weight:800; letter-spacing:-0.04em;line-height:1.1;margin-bottom:10px; } .header h1 em{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent);font-weight:700} .header p{font-size:18px;color:var(--muted)} /* ═══════════════════════════════════════════════════ HOME ═══════════════════════════════════════════════════ */ .hero{ display:flex;flex-direction:column;align-items:center; padding:80px 40px 60px;max-width:1100px;margin:0 auto;text-align:center; } .hero-top{margin-bottom:32px} .hero-row{ display:flex;align-items:center;gap:40px;width:100%;margin-bottom:32px; } .hero-text{flex:1;min-width:0;text-align:left} .hero-badge{ display:inline-flex;align-items:center;gap:6px; background:var(--surface-alt);border:1px solid var(--border); border-radius:20px;padding:6px 16px; font-size:12px;font-weight:700;color:var(--muted); text-transform:uppercase;letter-spacing:0.6px; margin:16px 0 0; } .hero-badge span{color:var(--accent)} .hero h1{ font-size:clamp(32px,5vw,52px);font-weight:800; letter-spacing:-0.04em;line-height:1.1;margin-bottom:0; } .hero h1 em{ font-family:'Playfair Display',serif;font-style:italic; color:var(--accent);font-weight:700; } .hero p{ font-size:clamp(15px,1.8vw,18px);color:var(--muted); line-height:1.55;margin:0; } .hero-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} .hero-video{ flex:1;min-width:0;border-radius:14px;overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.08);border:1px solid var(--border); } .hero-video video{width:100%;display:block;border-radius:14px} .stats-bar{ display:flex;align-items:center;justify-content:center;gap:48px; padding:40px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border); } .stat{text-align:center} .stat-val{font-size:32px;font-weight:800;letter-spacing:-0.03em;color:var(--accent)} .stat-label{font-size:13px;font-weight:600;color:var(--muted);margin-top:2px} .pages-nav{ max-width:800px;margin:0 auto;padding:64px 24px;text-align:center; } .pages-nav h2{ font-size:clamp(20px,3vw,28px);font-weight:800; letter-spacing:-0.03em;margin-bottom:32px; } .pages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .page-card{ background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:32px 24px;text-align:center;cursor:pointer; transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s; } .page-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 12px 32px rgba(0,0,0,0.08)} .page-icon{font-size:36px;margin-bottom:14px} .page-title{font-size:17px;font-weight:700;margin-bottom:6px} .page-desc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:16px} .page-link{ display:inline-flex;align-items:center;gap:4px; color:var(--accent);font-size:14px;font-weight:700; transition:gap 0.2s; } .page-card:hover .page-link{gap:8px} /* ═══════════════════════════════════════════════════ HOW IT WORKS ═══════════════════════════════════════════════════ */ .steps{display:flex;align-items:flex-start;justify-content:center;gap:0} .step{ display:flex;flex-direction:column;align-items:center; width:280px;text-align:center; } .step-clickable{cursor:pointer;transition:transform 0.2s} .step-clickable:hover{transform:translateY(-3px)} .step-num{ width:62px;height:62px;border-radius:50%; background:var(--accent);color:#fff; font-size:26px;font-weight:800; display:flex;align-items:center;justify-content:center; margin-bottom:16px; } .step h3{font-size:20px;font-weight:700;margin-bottom:8px} .step p{font-size:15px;color:var(--muted);line-height:1.5;padding:0 4px} .step-value{font-size:18px;font-weight:700;color:var(--accent);margin-top:10px} .step-arrow{display:flex;align-items:center;padding:0 14px;margin-top:16px} .step-arrow svg{width:36px;height:36px;color:var(--accent)} .details{display:flex;gap:18px;justify-content:center;width:100%;max-width:1100px} .detail{ flex:1; background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:24px;transition:border-color 0.15s; } .detail:hover{border-color:var(--accent)} .detail-icon{font-size:28px;margin-bottom:10px} .detail-title{font-size:17px;font-weight:700;margin-bottom:5px} .detail-desc{font-size:14px;color:var(--muted);line-height:1.5} .cta-row{display:flex;align-items:center;gap:18px} .cta-row p{font-size:16px;color:var(--muted)} .cta-link{ display:inline-flex;align-items:center;gap:6px; color:var(--accent);font-weight:700;font-size:16px; cursor:pointer;transition:gap 0.2s; } .cta-link:hover{gap:10px} /* ═══════════════════════════════════════════════════ FEATURES ═══════════════════════════════════════════════════ */ .page-header{ text-align:center;padding:100px 24px 20px; max-width:720px;margin:0 auto; } .page-header h1{ font-size:clamp(32px,5vw,52px);font-weight:800; letter-spacing:-0.04em;line-height:1.1;margin-bottom:10px; } .page-header h1 em{ font-family:'Playfair Display',serif;font-style:italic; color:var(--accent);font-weight:700; } .page-header p{ font-size:18px;color:var(--muted); line-height:1.55;max-width:520px;margin:0 auto; } .section{max-width:800px;margin:0 auto;padding:48px 24px 0} .section-label{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:700;color:var(--accent); text-transform:uppercase;letter-spacing:0.8px; margin-bottom:12px; } .section h2{ font-size:clamp(20px,3vw,28px);font-weight:800; letter-spacing:-0.03em;margin-bottom:8px; } .section>p{font-size:15px;color:var(--muted);line-height:1.5;margin-bottom:28px;max-width:560px} .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .feat{ display:flex;gap:14px;align-items:flex-start; background:var(--surface);border:1px solid var(--border);border-radius:12px; padding:20px;transition:border-color 0.2s; } .feat:hover{border-color:var(--accent)} .feat-icon{font-size:22px;flex-shrink:0;margin-top:1px} .feat-title{font-size:15px;font-weight:700;margin-bottom:3px} .feat-desc{font-size:14px;color:var(--muted);line-height:1.5} .compare{max-width:800px;margin:0 auto;padding:48px 24px} .compare h2{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-0.03em;margin-bottom:8px} .compare>p{font-size:15px;color:var(--muted);margin-bottom:28px} .compare-table{ width:100%;border-collapse:collapse;text-align:left; background:var(--surface);border:1px solid var(--border);border-radius:14px; overflow:hidden; } .compare-table th{ padding:14px 20px;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:0.6px;color:var(--muted); background:var(--surface-alt);border-bottom:1px solid var(--border); } .compare-table th:last-child{color:var(--accent)} .compare-table td{padding:14px 20px;font-size:15px;border-bottom:1px solid var(--border)} .compare-table tr:last-child td{border-bottom:none} .compare-table td:first-child{font-weight:600;color:var(--muted)} .compare-table td:nth-child(2){color:var(--muted2)} .compare-table td:last-child{font-weight:600;color:var(--text)} .cta-bar{ text-align:center;padding:48px 24px; border-top:1px solid var(--border); } .cta-bar h2{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-0.03em;margin-bottom:8px} .cta-bar h2 em{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent)} .cta-bar p{font-size:16px;color:var(--muted);margin-bottom:24px} .cta-bar .btn-primary{width:auto} /* ═══════════════════════════════════════════════════ PRICING ═══════════════════════════════════════════════════ */ .pricing-main{ display:flex;flex-direction:column; align-items:center; padding:100px 48px 48px;gap:20px; } .pricing-grid{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px; width:100%;max-width:1100px;align-items:stretch; } .price-card{ background:var(--surface);border:1px solid var(--border);border-radius:18px; padding:24px 22px;text-align:center;position:relative; display:flex;flex-direction:column; transition:border-color 0.2s,box-shadow 0.2s; } .price-card:hover{box-shadow:0 8px 32px rgba(0,0,0,0.06)} .price-card.featured{border:2px solid var(--accent)} .price-badge{ position:absolute;top:-12px;left:50%;transform:translateX(-50%); background:var(--accent);color:#fff; padding:4px 16px;border-radius:20px; font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px; } .price-tier{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px} .price-val{font-size:48px;font-weight:800;letter-spacing:-0.04em;margin:2px 0 1px} .price-val span{font-size:17px;font-weight:600;color:var(--muted);letter-spacing:0} .price-note{font-size:13px;color:var(--muted);margin-bottom:14px} .price-list{list-style:none;text-align:left;margin-bottom:14px;flex:1} .price-list li{ padding:5px 0;font-size:14px;font-weight:500; display:flex;align-items:center;gap:10px; border-bottom:1px solid var(--border); } .price-list li:last-child{border-bottom:none} .li-check{color:var(--accent);font-weight:800;font-size:15px;flex-shrink:0} .li-x{color:var(--muted2);font-weight:800;font-size:15px;flex-shrink:0} .li-muted{color:var(--muted2)} .guarantee{font-size:13px;color:var(--muted);text-align:center} .math{max-width:640px;margin:0 auto;padding:48px 24px} .math h2{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-0.03em;margin-bottom:8px;text-align:center} .math>p{font-size:15px;color:var(--muted);text-align:center;margin-bottom:28px} .math-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px} .math-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)} .math-row:last-child{border-bottom:none} .math-label{font-size:15px;color:var(--muted)} .math-value{font-size:16px;font-weight:700} .math-value.negative{color:#ef4444} .math-value.positive{color:#22c55e} .math-divider{height:2px;background:var(--accent);margin:4px 0;border:none} .math-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0 4px} .math-total .math-label{font-size:16px;font-weight:700;color:var(--text)} .math-total .math-value{font-size:22px;font-weight:800;color:var(--accent)} .faq{max-width:640px;margin:0 auto;padding:16px 24px 48px} .faq h2{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-0.03em;margin-bottom:28px;text-align:center} .faq-item{border-bottom:1px solid var(--border);padding:16px 0} .faq-item:first-child{border-top:1px solid var(--border)} .faq-q{font-size:16px;font-weight:700;margin-bottom:5px} .faq-a{font-size:15px;color:var(--muted);line-height:1.6} /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ /* ── Burger menu ── */ .burger{ display:none;background:none;border:none;cursor:pointer; padding:10px;margin:-10px;flex-direction:column;gap:5px; -webkit-tap-highlight-color:transparent; } .burger span{ display:block;width:22px;height:2px;background:var(--text); border-radius:2px;transition:transform 0.25s,opacity 0.2s; } .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-overlay{ display:none;position:fixed;top:0;left:0;right:0;bottom:0; background:var(--bg);z-index:9998; flex-direction:column;align-items:stretch;justify-content:flex-start; padding:80px 24px 40px;overflow-y:auto; } .mobile-overlay.open{display:flex} .mobile-overlay a{ display:block;text-align:left; font-size:18px;font-weight:600;color:var(--text); padding:18px 8px;border-bottom:1px solid var(--border); } .mobile-overlay a:first-child{border-top:1px solid var(--border)} .mobile-overlay a.active{color:var(--accent)} .mobile-overlay .nav-cta{ margin-top:24px;border:none;border-bottom:none; padding:16px 32px;border-radius:12px;font-size:17px; text-align:center;width:100%;background:var(--accent);color:#fff; } .contact-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 160px);min-height:calc(100dvh - 160px);text-align:center;padding:60px 24px} .contact-info{display:flex;flex-direction:column;gap:12px;margin-top:32px;margin-bottom:48px} .contact-row{font-size:18px;font-weight:600;color:var(--text);letter-spacing:-0.01em} .contact-form-intro{font-size:16px;color:var(--muted);margin-bottom:20px;max-width:420px} .contact-form{display:flex;flex-direction:column;gap:14px;width:100%;max-width:420px} .contact-form input,.contact-form textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--border);font-size:16px;font-family:inherit;color:var(--text);background:var(--card);outline:none;transition:border-color .15s} .contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent)} .contact-form textarea{resize:vertical;min-height:120px} .contact-form .btn-primary{width:100%;padding:14px;font-size:16px;border-radius:12px;cursor:pointer;margin-top:4px} .contact-status{font-size:14px;min-height:20px} @media(max-width:760px){ .burger{display:flex;z-index:9999;position:relative} nav{padding:12px 16px;z-index:9999} .nav-links{display:none} .hero{ padding:40px 20px 32px; } .hero-row{flex-direction:column;gap:24px} .hero-text{text-align:center} .hero-badge{margin-bottom:16px} .hero h1{font-size:clamp(28px,7vw,42px);margin-bottom:16px} .hero p{font-size:15px} .hero-actions{flex-direction:column;align-items:stretch;gap:10px} .hero-actions .btn-primary,.hero-actions .btn-secondary{width:100%;justify-content:center} .stats-bar{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 16px} .stat-val{font-size:24px} .stat-label{font-size:11px} .pages-grid{grid-template-columns:1fr} .pages-nav{padding:40px 20px} .page-card{padding:24px 20px} .feat-grid{grid-template-columns:1fr} .compare{overflow-x:auto;-webkit-overflow-scrolling:touch} .compare-table{font-size:13px;min-width:480px} .compare-table th,.compare-table td{padding:10px 12px} .pricing-main{padding:60px 16px 32px;gap:14px} .pricing-grid{grid-template-columns:1fr;max-width:400px} .page-viewport main{padding:60px 16px 32px;gap:20px} .page-header{padding:60px 20px 16px} .section{padding:32px 20px 0} .steps{flex-direction:column;align-items:center} .step-arrow svg{transform:rotate(90deg)} .step-arrow{padding:4px 0} .details{flex-direction:column} .cta-bar{padding:32px 20px} footer{padding:20px 16px} } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════ HERO CALL CARD (rotating example conversation) ═══════════════════════════════════════════════════ */ .call-card{ flex:1;min-width:0;text-align:left; background:var(--surface);border:1px solid var(--border);border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,0.08);overflow:hidden; } .call-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface-alt); } .call-who{font-size:14px;font-weight:700} .call-who small{display:block;font-size:12px;font-weight:600;color:var(--muted)} .call-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#16a34a} .call-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 1.6s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .call-body{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:212px;transition:opacity .3s} .call-body.fading{opacity:0} .bubble{max-width:85%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45} .bubble.caller{align-self:flex-end;background:var(--surface-alt);border:1px solid var(--border);border-bottom-right-radius:4px} .bubble.ai{align-self:flex-start;background:var(--accent-soft);color:#1e3a8a;border-bottom-left-radius:4px} .call-result{ display:flex;align-items:center;gap:8px; padding:12px 18px;border-top:1px solid var(--border); font-size:13px;font-weight:700;color:#15803d;background:#f0fdf4; } .call-dots{display:flex;justify-content:center;gap:6px;padding:0 0 12px} .call-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--border);cursor:pointer;padding:0} .call-dots button.on{background:var(--accent)} /* ═══════════════════════════════════════════════════ INDUSTRIES ═══════════════════════════════════════════════════ */ .industries{max-width:1100px;margin:0 auto;padding:64px 24px 8px;text-align:center} .industries h2{font-size:clamp(22px,3.4vw,32px);font-weight:800;letter-spacing:-0.03em;margin-bottom:8px} .industries>p{font-size:16px;color:var(--muted);margin:0 auto 32px;max-width:560px} .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left} .ind-card{ background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:24px;display:flex;flex-direction:column;gap:10px; transition:transform .2s,border-color .2s,box-shadow .2s; } a.ind-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 12px 32px rgba(0,0,0,0.08)} .ind-icon{font-size:30px} .ind-title{font-size:17px;font-weight:700} .ind-list{list-style:none;display:flex;flex-direction:column;gap:6px;flex:1} .ind-list li{font-size:14px;color:var(--muted);line-height:1.4;padding-left:18px;position:relative} .ind-list li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800} .ind-link{color:var(--accent);font-size:14px;font-weight:700} .ind-card.ind-other{background:var(--accent-soft);border-color:#bfdbfe} .pages-grid.four{grid-template-columns:repeat(2,1fr)} /* ═══════════════════════════════════════════════════ CUSTOM AI / SUBPAGES ═══════════════════════════════════════════════════ */ .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .svc{ background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px; transition:border-color .2s; } .svc:hover{border-color:var(--accent)} .svc-icon{font-size:30px;margin-bottom:10px} .svc h3{font-size:18px;font-weight:700;margin-bottom:6px} .svc p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:12px} .svc ul{list-style:none;display:flex;flex-direction:column;gap:6px} .svc li{font-size:14px;line-height:1.4;padding-left:18px;position:relative} .svc li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700} .hero-simple{max-width:760px;margin:0 auto;padding:90px 24px 24px;text-align:center} .hero-simple h1{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-0.04em;line-height:1.1;margin-bottom:14px} .hero-simple h1 em{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent);font-weight:700} .hero-simple p{font-size:18px;color:var(--muted);line-height:1.55;margin-bottom:28px} .steps-wrap{max-width:1000px;margin:0 auto;padding:56px 24px 8px} .steps-wrap h2{font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-0.03em;margin-bottom:28px;text-align:center} @media(max-width:900px){ .ind-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .ind-grid,.svc-grid,.pages-grid.four{grid-template-columns:1fr} .industries{padding:40px 16px 0} .call-body{min-height:0} .hero-simple{padding:56px 16px 16px} .hero-simple p{font-size:16px} .steps-wrap{padding:40px 16px 0} } /* ═══════════════════════════════════════════════════ ICONS (inline Lucide SVGs in tinted tiles) ═══════════════════════════════════════════════════ */ .ind-icon,.page-icon,.detail-icon,.feat-icon,.svc-icon{ display:flex;align-items:center;justify-content:center;flex-shrink:0; background:var(--accent-soft);color:var(--accent);font-size:0; } .ind-icon{width:48px;height:48px;border-radius:14px} .ind-icon svg{width:24px;height:24px} .ind-card.ind-other .ind-icon{background:var(--surface)} .page-icon{width:52px;height:52px;border-radius:16px;margin:0 auto 16px} .page-icon svg{width:26px;height:26px} .detail-icon{width:44px;height:44px;border-radius:12px;margin-bottom:12px} .detail-icon svg{width:22px;height:22px} .feat-icon{width:38px;height:38px;border-radius:10px;margin-top:0} .feat-icon svg{width:20px;height:20px} .svc-icon{width:52px;height:52px;border-radius:16px;margin-bottom:14px} .svc-icon svg{width:26px;height:26px} .section-label svg{width:15px;height:15px} .contact-row a{display:inline-flex;align-items:center;gap:10px} .contact-row svg{width:20px;height:20px;color:var(--accent)} .call-result svg{width:16px;height:16px;flex-shrink:0} /* ═══════════════════════════════════════════════════════════════════ V3 — one flowing background, glass surfaces, phone mockups, scroll story ═══════════════════════════════════════════════════════════════════ */ :root{--ink:#0b1020;--violet:#7c5cff;--glass:rgba(255,255,255,0.72);--glass-border:rgba(255,255,255,0.9);--scrollp:0} body{background:#f6f7fb} /* The page sits on one soft gradient that drifts as you scroll */ body::before{ content:"";position:fixed;inset:-20vh -10vw;z-index:-1;pointer-events:none; background: radial-gradient(42vw 38vw at 12% 8%, rgba(59,130,246,0.20), transparent 70%), radial-gradient(38vw 34vw at 92% 18%, rgba(124,92,255,0.17), transparent 70%), radial-gradient(46vw 40vw at 70% 85%, rgba(56,189,248,0.14), transparent 70%), radial-gradient(40vw 36vw at 8% 80%, rgba(167,139,250,0.14), transparent 70%); transform:translate3d(0, calc(var(--scrollp) * -12vh), 0) rotate(calc(var(--scrollp) * 8deg)); will-change:transform; } nav{background:rgba(246,247,251,0.72);border-bottom:1px solid rgba(15,23,42,0.06)} .nav-phone{ display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:999px;border:1px solid rgba(59,130,246,0.35); color:var(--accent) !important;background:rgba(255,255,255,0.6); } .nav-phone svg{width:15px;height:15px} .nav-phone:hover{background:#fff} .nav-phone span{white-space:nowrap} .nav-demo{ padding:9px 18px;border-radius:10px;border:1px solid rgba(59,130,246,0.35); color:var(--accent) !important;background:rgba(255,255,255,0.6);font-weight:700 !important;white-space:nowrap; transition:background 0.15s,transform 0.15s; } .nav-demo:hover{background:#fff;transform:translateY(-1px)} .nav-cta{white-space:nowrap} @media(max-width:1260px){.nav-links{gap:20px}.nav-links a{font-size:14px}.nav-cta,.nav-demo{padding:9px 16px}} @media(max-width:940px){.nav-links a[href="/#industries"]{display:none}} .hero3-call{ display:flex;align-items:center;gap:14px;width:max-content;margin-top:26px; color:var(--text);text-decoration:none; } .hero3-call svg{width:34px;height:34px;color:var(--accent);flex-shrink:0;stroke-width:1.8} .hero3-call .hc-txt{display:flex;flex-direction:column;text-align:left;line-height:1.1} .hero3-call b{font-size:clamp(28px,3.4vw,36px);font-weight:800;letter-spacing:-0.03em; background:linear-gradient(90deg,#3b82f6,#7c5cff);-webkit-background-clip:text;background-clip:text;color:transparent} .hero3-call small{margin-top:4px;font-size:14px;font-weight:600;color:var(--muted)} .hero3-call:hover b{filter:brightness(1.1)} .eyebrow{ display:inline-flex;align-items:center;gap:8px; padding:6px 14px;border-radius:999px; background:var(--glass);border:1px solid var(--glass-border); font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent); box-shadow:0 1px 2px rgba(15,23,42,0.04); } .eyebrow.on-dark{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.14);color:#93c5fd} .live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,0.6);animation:livepulse 2s infinite} @keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} .btn-glass{ display:inline-flex;align-items:center;gap:8px; padding:14px 22px;border-radius:12px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer; background:var(--glass);border:1px solid var(--glass-border);color:var(--text); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 1px 2px rgba(15,23,42,0.05);transition:transform .15s, background .15s;white-space:nowrap; } .btn-glass svg{width:17px;height:17px;color:var(--accent)} .btn-glass:hover{transform:translateY(-2px);background:#fff} .btn-glass.on-dark{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25);color:#fff} .btn-glass.on-dark svg{color:#fff} .btn-light{background:#fff !important;color:var(--accent) !important} /* ── Hero ── */ .hero3{ display:grid;grid-template-columns:1.1fr 0.9fr;align-items:center;gap:56px; max-width:1180px;margin:0 auto;padding:72px 40px 56px; } .hero3 h1,.hero3 .hero3-title{font-size:clamp(40px,5.4vw,68px);font-weight:800;letter-spacing:-0.045em;line-height:1.03;margin:22px 0 20px;color:var(--text)} /* Homepage: the keyword line is the real

, styled as the small pill */ .hero3 h1.eyebrow{font-size:12px;font-weight:700;letter-spacing:0.06em;line-height:normal;margin:0;color:var(--accent)} .hero3 h1 em,.hero3 .hero3-title em{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;color:var(--accent);background:linear-gradient(90deg,var(--accent),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:4px} .hero3-sub{font-size:clamp(16px,1.6vw,19px);color:var(--muted);line-height:1.6;max-width:560px} .hero3-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .hero3-proof{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin-top:24px} .hero3-proof li{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--muted)} .hero3-proof svg{width:16px;height:16px;color:#16a34a} .hero3-visual{display:flex;justify-content:center} /* ── Phone mockup ── */ .device{ position:relative;width:min(380px,100%);padding:12px;border-radius:46px; background:linear-gradient(160deg,#1e293b,#0b1020); box-shadow:0 40px 80px -20px rgba(30,41,90,0.45),0 0 0 1px rgba(255,255,255,0.06) inset; } .device-notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:90px;height:22px;border-radius:999px;background:#05070f;z-index:2} .device .call-card{border-radius:34px;border:none;box-shadow:none;padding-top:34px;min-height:540px;display:flex;flex-direction:column} .device .call-body{flex:1;min-height:300px} .call-live .wave{display:inline-flex;align-items:flex-end;gap:2px;height:12px;margin-right:2px} .call-live .wave i{width:3px;border-radius:2px;background:#22c55e;animation:wave 1s ease-in-out infinite} .call-live .wave i:nth-child(2){animation-delay:.15s}.call-live .wave i:nth-child(3){animation-delay:.3s}.call-live .wave i:nth-child(4){animation-delay:.45s} @keyframes wave{0%,100%{height:3px}50%{height:12px}} .call-live::before{display:none} .call-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 16px} .call-foot .call-dots{padding:0;margin-left:auto} .call-play{ display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:none;cursor:pointer; background:var(--accent);color:#fff;font:inherit;font-size:13px;font-weight:700; } .call-play svg{width:14px;height:14px} .call-play.playing{background:#0f172a} .bubble{animation:bubbleIn .35s ease-out both} @keyframes bubbleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ── Glass surfaces for existing blocks ── */ .glass-band,.stats-bar{background:var(--glass);border:1px solid var(--glass-border);border-left:none;border-right:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .ind-card,.page-card,.feat,.detail,.price-card,.math-card,.svc,.compare-table,.contact-form input,.contact-form textarea{ background:var(--glass);border-color:var(--glass-border); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 1px 2px rgba(15,23,42,0.04),0 10px 30px -12px rgba(30,41,90,0.12); } .industries h2,.pages-nav h2{font-size:clamp(26px,3.6vw,40px);letter-spacing:-0.035em} .industries{padding-top:96px} footer{border-top-color:rgba(15,23,42,0.06)} /* ── Scroll story ── */ .story{ position:relative;margin:88px 0 0;padding:96px 24px 40px;color:#e2e8f0;overflow:clip; background: radial-gradient(60vw 40vw at 15% 10%, rgba(59,130,246,0.22), transparent 70%), radial-gradient(50vw 40vw at 90% 60%, rgba(124,92,255,0.22), transparent 70%), var(--ink); } .story-head{text-align:center;max-width:760px;margin:0 auto 40px} .story-head h2{color:#fff;font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-0.04em;line-height:1.08;margin-top:18px} .story-head h2 em{font-family:'Playfair Display',serif;font-style:italic;color:#93c5fd} .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1080px;margin:0 auto} .story-phone-col{position:relative} .story-device{position:sticky;top:max(96px, calc(50vh - 290px));margin:0 auto} .story-screens{position:relative;height:540px;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#111a33,#0d1428)} .story-screen{ position:absolute;inset:0;padding:56px 20px 20px;display:flex;flex-direction:column;gap:12px; opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s ease, transform .45s ease; } .story-screen.active{opacity:1;transform:none} .story-screen[data-screen="1"]{align-items:center;justify-content:center;text-align:center} .ring-wrap{position:relative;width:120px;height:120px;margin-bottom:18px} .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(34,197,94,0.5);animation:ringout 2s ease-out infinite} .ring.r2{animation-delay:1s} @keyframes ringout{from{transform:scale(.6);opacity:1}to{transform:scale(1.25);opacity:0}} .ring-icon{position:absolute;inset:26px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 30px rgba(34,197,94,0.4)} .ring-icon svg{width:30px;height:30px} .ss-title{font-size:22px;font-weight:800;color:#fff} .ss-sub{font-size:14px;color:#94a3b8;margin-top:4px} .ss-pill{margin-top:18px;padding:7px 14px;border-radius:999px;background:rgba(34,197,94,0.15);color:#4ade80;font-size:13px;font-weight:700} .ss-head{font-size:14px;font-weight:700;color:#fff;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.08)} .ss-live{color:#4ade80;font-weight:600} .story-screen .bubble{max-width:88%;font-size:14px} .story-screen .bubble.caller{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.08);color:#e2e8f0} .story-screen .bubble.ai{background:rgba(59,130,246,0.22);color:#dbeafe} .ss-card{margin-top:30px;border-radius:18px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);padding:16px;display:grid;gap:8px} .ss-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .ss-tag{font-size:12px;font-weight:800;color:#fdba74;text-transform:uppercase;letter-spacing:.05em} .ss-urgent{font-size:11px;font-weight:800;color:#fff;background:#ef4444;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em} .ss-row{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.04)} .ss-row span{color:#94a3b8}.ss-row b{color:#fff;text-align:right} .ss-notif{margin-top:30px;display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,0.95);color:#0f172a;box-shadow:0 12px 30px rgba(0,0,0,0.35)} .ss-notif-icon{width:36px;height:36px;border-radius:10px;background:#ef4444;color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0} .ss-notif b{display:block;font-size:14px}.ss-notif span{font-size:12px;color:#64748b} .ss-list{display:grid;gap:8px;margin-top:6px} .ss-li{display:flex;justify-content:space-between;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.05);border-left:3px solid rgba(255,255,255,0.15);font-size:14px} .ss-li b{color:#fff}.ss-li span{color:#94a3b8;font-size:12px;font-weight:700;text-transform:uppercase} .ss-li.hot{border-left-color:#ef4444}.ss-li.hot span{color:#fca5a5} .story-steps{padding:6vh 0 12vh} .story-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .4s ease} .story-step.active{opacity:1} .story-num{font-size:14px;font-weight:800;letter-spacing:.1em;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px} .story-step h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-0.03em;color:#fff;margin-bottom:12px;line-height:1.15} .story-step p{font-size:17px;line-height:1.6;color:#94a3b8;max-width:440px} .story-mini{display:none} /* ── Dashboard showcase ── */ .showcase{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:center;max-width:1180px;margin:0 auto;padding:110px 40px 40px} .showcase h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-0.04em;line-height:1.08;margin:18px 0 16px} .showcase h2 em{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent)} .showcase p{font-size:17px;line-height:1.6;color:var(--muted);margin-bottom:26px} .showcase-shot{margin:0;perspective:1600px} .showcase-shot img{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 40px 90px -30px rgba(15,23,42,0.55),0 0 0 1px rgba(15,23,42,0.06);transform:rotateY(-7deg) rotateX(2deg);transition:transform .6s ease} .showcase-shot:hover img{transform:none} .showcase-shot figcaption{margin-top:12px;font-size:12px;color:var(--muted2);text-align:center} /* ── Final CTA band ── */ .final-cta{ max-width:1100px;margin:40px auto 72px;padding:64px 32px;border-radius:28px;text-align:center;color:#fff; background:radial-gradient(40vw 30vw at 20% 0%, rgba(255,255,255,0.18), transparent 70%),linear-gradient(120deg,#2563eb,#7c5cff); box-shadow:0 30px 80px -30px rgba(59,80,246,0.6); } .final-cta h2{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-0.04em} .final-cta p{font-size:17px;opacity:.88;margin:12px auto 28px;max-width:560px} .final-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} /* ── Scroll reveal ── */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease} .reveal.in{opacity:1;transform:none} /* ── Responsive ── */ @media(max-width:900px){ .hero3{grid-template-columns:1fr;gap:40px;padding:44px 20px 32px;text-align:center} .hero3-sub{margin:0 auto} .hero3-actions,.hero3-proof{justify-content:center} .hero3-call{margin-left:auto;margin-right:auto} .device{width:min(340px,100%)} .device .call-card{min-height:470px} .story{padding:72px 16px 24px} .story-grid{grid-template-columns:1fr;gap:0} .story-phone-col{display:none} .story-steps{padding:0} .story-step{min-height:auto;opacity:1;padding:28px 0;border-top:1px solid rgba(255,255,255,0.08)} .story-mini{display:block;margin-top:18px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#111a33,#0d1428);border:1px solid rgba(255,255,255,0.08)} .story-mini .story-screen{position:relative;inset:auto;opacity:1;transform:none;padding:22px 18px;min-height:0} .story-mini .ss-card,.story-mini .ss-notif{margin-top:0} .showcase{grid-template-columns:1fr;gap:32px;padding:72px 20px 24px;text-align:center} .showcase-shot img{transform:none} .final-cta{margin:32px 16px 48px;padding:48px 20px} } @media(max-width:760px){ .hero3-actions{flex-direction:column;align-items:stretch} .hero3-actions .btn-primary,.hero3-actions .btn-glass{justify-content:center} .final-actions{flex-direction:column;align-items:stretch} .final-actions a{justify-content:center} } @media (prefers-reduced-motion: reduce){ body::before{transform:none !important} .reveal{opacity:1;transform:none} .story-screen{transition:none} .live-dot,.ring,.call-live .wave i{animation:none !important} } .call-play[hidden]{display:none} .story-step h3,.showcase h2,.hero3 h1,.hero3 .hero3-title{text-wrap:balance} /* ═══ Lean pages: How it works + Features ═══ */ .lean-head{text-align:center;max-width:720px;margin:0 auto;padding:80px 20px 40px} .lean-head h1{font-size:clamp(36px,5vw,60px);font-weight:800;letter-spacing:-0.045em;line-height:1.05;margin:18px 0 12px;text-wrap:balance} .lean-head h1 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:4px} .lean-head p{font-size:18px;color:var(--muted)} .how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto;padding:0 24px} .how-card{position:relative;text-align:center;padding:28px 24px 30px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 2px rgba(15,23,42,0.04),0 18px 40px -20px rgba(30,41,90,0.25)} .how-num{position:absolute;top:16px;left:18px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center} .how-visual{height:170px;margin:10px 0 18px;border-radius:18px;background:linear-gradient(180deg,#111a33,#0d1428);display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden} .how-card h3{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin-bottom:6px} .how-card p{font-size:16px;color:var(--muted)} .hv-ring{position:relative;width:96px;height:96px} .hv-ring span{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(34,197,94,0.55);animation:ringout 2s ease-out infinite} .hv-ring span:nth-child(2){animation-delay:1s} .hv-ring-icon{position:absolute;inset:22px;border-radius:50%;background:#22c55e;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(34,197,94,0.45)} .hv-ring-icon svg{width:24px;height:24px} .hv-chat{width:100%;display:flex;flex-direction:column;gap:8px} .hv-chat .bubble{font-size:13px;max-width:85%} .hv-chat .bubble.caller{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.08);color:#e2e8f0} .hv-chat .bubble.ai{background:rgba(59,130,246,0.25);color:#dbeafe} .hv-notif{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:16px;background:#fff;text-align:left;box-shadow:0 12px 30px rgba(0,0,0,0.35)} .hv-notif-icon{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .hv-notif-icon svg{width:20px;height:20px} .hv-notif b{display:block;font-size:14px;color:#0f172a}.hv-notif span{font-size:12px;color:#64748b} .chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:32px auto 0;padding:0 20px} .chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);font-size:14px;font-weight:700;color:var(--text);box-shadow:0 1px 2px rgba(15,23,42,0.05)} .chip svg{width:16px;height:16px;color:var(--accent)} .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);gap:16px;max-width:1120px;margin:0 auto;padding:0 24px} .tile{position:relative;overflow:hidden;padding:22px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 2px rgba(15,23,42,0.04),0 14px 34px -18px rgba(30,41,90,0.22);display:flex;flex-direction:column} .tile h3{font-size:18px;font-weight:800;letter-spacing:-0.02em;margin:14px 0 4px} .tile p{font-size:14px;color:var(--muted)} .tile-ico{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center} .tile-ico svg{width:20px;height:20px} .tile-xl{grid-column:span 2;grid-row:span 2} .tile-wide{grid-column:span 2} .tile-dark{background:radial-gradient(30vw 20vw at 20% 0%, rgba(59,130,246,0.35), transparent 70%),radial-gradient(30vw 20vw at 100% 100%, rgba(124,92,255,0.35), transparent 70%),var(--ink);border-color:rgba(255,255,255,0.08);color:#fff} .tile-dark h3{font-size:clamp(24px,2.6vw,32px);color:#fff} .tile-dark p{color:#94a3b8;font-size:16px} .tile-dark .tile-ico{background:rgba(255,255,255,0.1);color:#93c5fd} .bigwave{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;height:120px;padding-top:20px} .bigwave i{width:6px;border-radius:4px;background:linear-gradient(180deg,#60a5fa,#a78bfa);animation:bigwave 1.4s ease-in-out infinite;height:20%} .bigwave i:nth-child(odd){animation-duration:1.1s} .bigwave i:nth-child(3n){animation-duration:1.7s} .bigwave i:nth-child(4n){animation-delay:.2s}.bigwave i:nth-child(5n){animation-delay:.4s}.bigwave i:nth-child(7n){animation-delay:.6s} @keyframes bigwave{0%,100%{height:15%}50%{height:90%}} .mini-list{margin-top:14px;display:grid;gap:6px} .ml{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#fff;border-left:3px solid #cbd5e1;font-size:13px} .ml b{font-weight:600;color:var(--text)} .ml span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .ml.hot{border-left-color:#ef4444}.ml.hot span{color:#dc2626} .ml.warm{border-left-color:#f59e0b}.ml.warm span{color:#b45309} .mini-transcript{margin-top:14px;display:grid;gap:6px;font-size:13px} .mini-transcript div{padding:9px 12px;border-radius:12px;background:#fff;color:var(--muted)} .mini-transcript b{color:var(--accent);margin-right:6px} .mini-bars{margin-top:auto;padding-top:14px;display:flex;align-items:flex-end;gap:6px;height:70px} .mini-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--accent),#93c5fd)} @media(max-width:960px){ .bento{grid-template-columns:repeat(2,1fr)} .tile-xl{grid-column:span 2;grid-row:span 1} } @media(max-width:760px){ .lean-head{padding:52px 16px 28px} .how-steps{grid-template-columns:1fr;padding:0 16px} .bento{grid-template-columns:1fr;padding:0 16px} .tile-xl,.tile-wide{grid-column:span 1} .bigwave{height:90px} } @media (prefers-reduced-motion: reduce){.bigwave i,.hv-ring span{animation:none !important}} /* ═══ How it works v2: onboarding + call timeline ═══ */ .part-label{display:flex;align-items:center;gap:16px;max-width:1080px;margin:8px auto 22px;padding:0 24px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .part-label::before,.part-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(15,23,42,0.15),transparent)} .how-steps + .part-label{margin-top:56px} .how-visual.light{background:linear-gradient(180deg,#f8faff,#eef2ff);flex-direction:column;gap:14px} .how-card h3{margin-bottom:0} .hv-url{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #e2e8f0;font-size:14px;font-weight:600;color:#334155} .hv-url svg{width:18px;height:18px;color:var(--accent);flex-shrink:0} .hv-url span{flex:1;text-align:left} .hv-url b{width:28px;height:28px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center} .hv-url b svg{width:15px;height:15px;color:#fff} .hv-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .hv-tags i{font-style:normal;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid #dbeafe;color:var(--accent)} .hv-tests{display:grid;gap:7px;width:100%} .hv-tests div{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;font-size:13px;font-weight:600;color:#334155} .hv-tests b{width:22px;height:22px;border-radius:50%;background:#dcfce7;color:#16a34a;display:flex;align-items:center;justify-content:center} .hv-tests b svg{width:13px;height:13px} .hv-forward{display:flex;align-items:center;gap:10px} .hv-pill{padding:10px 14px;border-radius:14px;background:#fff;border:1px solid #e2e8f0;font-size:14px;font-weight:700;color:#0f172a;text-align:center} .hv-pill small{display:block;font-size:11px;font-weight:600;color:var(--muted2)} .hv-arrow{color:var(--accent)}.hv-arrow svg{width:22px;height:22px;animation:nudge 1.6s ease-in-out infinite} @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}} .hv-ai{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(80,90,246,0.6)} .timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1080px;margin:0 auto;padding:0 24px} .timeline::before{content:"";position:absolute;left:12%;right:12%;top:44px;height:2px;background:linear-gradient(90deg,var(--accent),var(--violet));opacity:.35} .tl-node{display:flex;flex-direction:column;align-items:center;text-align:center} .tl-time{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent);margin-bottom:10px} .tl-dot{position:relative;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 0 0 5px rgba(59,130,246,0.12);margin-bottom:16px;z-index:1} .tl-card{width:100%;min-height:150px;padding:18px 16px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 34px -18px rgba(30,41,90,0.25);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px} .tl-card b{font-size:16px;font-weight:800;letter-spacing:-0.01em} .tl-card small{font-size:12px;color:var(--muted)} .tl-ico{width:52px;height:52px;border-radius:50%;background:#22c55e;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(34,197,94,0.15)} .tl-ico svg{width:24px;height:24px} .tl-ico.shake{animation:ringshake 2.4s ease-in-out infinite} @keyframes ringshake{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(-12deg)}70%{transform:rotate(12deg)}75%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}85%{transform:rotate(0)}} .tl-card .bubble{font-size:13px;max-width:100%;text-align:left} .tl-q{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .tl-q i{font-style:normal;font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)} .tl-notif{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#0f172a;color:#fff;font-size:13px;font-weight:700;box-shadow:0 10px 24px -10px rgba(15,23,42,0.6)} .tl-notif svg{width:16px;height:16px;color:#fbbf24} @media(max-width:860px){ .timeline{grid-template-columns:1fr;gap:0;padding:0 20px} .timeline::before{left:43px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,var(--accent),var(--violet))} .tl-node{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:start;text-align:left;padding-bottom:18px} .tl-time{grid-column:1;grid-row:1;margin:0;text-align:center} .tl-dot{grid-column:1;grid-row:2;margin:6px auto 0} .tl-card{grid-column:2;grid-row:1 / span 2;min-height:0;flex-direction:row;justify-content:flex-start;align-items:center} .tl-card b{order:2}.tl-card small{display:none} } @media (prefers-reduced-motion: reduce){.hv-arrow svg,.tl-ico.shake{animation:none !important}} /* ═══ Features v2: every tile shows, not tells ═══ */ .bento{grid-auto-rows:minmax(190px,auto)} .tile{justify-content:space-between;gap:14px} .tile h3{margin:0;font-size:19px} .tile h3 em{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent)} .tile-dark h3{font-size:clamp(26px,2.8vw,34px)} .viz-policy{display:grid;grid-template-columns:1fr auto 1.4fr;align-items:center;gap:10px} .vp-rule,.vp-reply{padding:12px 14px;border-radius:14px;font-size:14px;font-weight:600;line-height:1.35} .vp-rule{background:#fff;border:1px dashed #cbd5e1;color:#0f172a} .vp-reply{background:var(--accent-soft);color:#1e3a8a} .vp-rule small,.vp-reply small{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:3px} .vp-reply small{color:#60a5fa} .vp-arrow{color:var(--violet)}.vp-arrow svg{width:22px;height:22px} .viz-tags{display:flex;flex-wrap:wrap;gap:8px} .viz-tags i{font-style:normal;font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px} .t-blue{background:#dbeafe;color:#1d4ed8}.t-orange{background:#ffedd5;color:#c2410c}.t-green{background:#dcfce7;color:#15803d} .t-violet{background:#ede9fe;color:#6d28d9}.t-gray{background:#f1f5f9;color:#475569}.t-red{background:#fee2e2;color:#b91c1c} .viz-player{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid #e2e8f0} .viz-player b{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .viz-player b svg{width:14px;height:14px} .vpl-wave{flex:1;display:flex;align-items:center;gap:3px;height:26px} .vpl-wave i{flex:1;border-radius:2px;background:#cbd5e1;height:40%} .vpl-wave i:nth-child(3n){height:85%}.vpl-wave i:nth-child(4n){height:60%}.vpl-wave i:nth-child(5n){height:100%}.vpl-wave i:nth-child(7n){height:30%} .vpl-wave i:nth-child(-n+11){background:var(--accent)} .viz-player span{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums} .tile .mini-transcript{margin-top:0} .viz-duo{display:flex;align-items:center;justify-content:center;gap:10px;flex:1} .viz-duo span{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)} .viz-duo span:last-child{background:#ede9fe;color:var(--violet)} .viz-duo span svg{width:26px;height:26px} .viz-duo em{font-style:normal;font-weight:800;color:var(--muted2);font-size:20px} .viz-clock{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px} .viz-clock b{font-size:34px;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,var(--accent),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .viz-clock span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#15803d;background:#dcfce7;padding:5px 10px;border-radius:999px} .viz-clock span svg{width:14px;height:14px} .viz-langs{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px} .viz-langs span{font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--text)} .viz-langs span:nth-child(2){color:var(--accent)} .viz-langs span:nth-child(3){color:var(--violet);opacity:.75} @media(max-width:760px){.viz-policy{grid-template-columns:1fr}.vp-arrow{display:none}} @media(max-width:860px){.tl-time{position:relative;z-index:1;background:#f6f7fb;padding:3px 0;border-radius:6px}} /* ═══ How it works v3: three steps, nothing else ═══ */ .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .step3{text-align:left;padding:20px 20px 26px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 2px rgba(15,23,42,0.04),0 14px 34px -18px rgba(30,41,90,0.22)} .step3-visual{height:150px;border-radius:16px;background:linear-gradient(180deg,#f8faff,#eef2ff);display:flex;align-items:center;justify-content:center;padding:18px;margin-bottom:22px} .step3-visual .hv-notif{box-shadow:0 10px 24px -12px rgba(15,23,42,0.35)} .step3-num{font-size:13px;font-weight:800;letter-spacing:.08em;background:linear-gradient(90deg,var(--accent),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px} .step3 h3{font-size:21px;font-weight:800;letter-spacing:-0.025em;margin-bottom:6px} .step3 p{font-size:15px;color:var(--muted)} @media(max-width:860px){.steps3{grid-template-columns:1fr}} /* ═══ One container width for every page ═══ */ :root{--container:1120px} .hero3,.showcase,.industries,.pages-nav,.bento,.steps3,.how-steps,.section,.compare,.math,.faq,.pricing-main .pricing-grid,.story-grid,.steps-wrap,.part-label{ max-width:var(--container);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;box-sizing:content-box; } .hero3,.showcase{padding-left:24px;padding-right:24px} .final-cta{max-width:var(--container);margin-left:auto;margin-right:auto} .pricing-main .pricing-grid{padding:0} .story-grid{padding:0} .industries > p,.lean-head p,.section > p{max-width:620px} .industries > p{margin-left:auto;margin-right:auto} /* Learn more: one row of four */ .pages-grid.four{grid-template-columns:repeat(4,1fr)} /* Feature grids use the full width */ .section .feat-grid{grid-template-columns:repeat(4,1fr)} .section{padding-top:72px} .section h2{font-size:clamp(24px,3vw,34px)} /* Do the math → a row of stat tiles */ .math{padding-top:72px;padding-bottom:24px} .math > p{max-width:620px;margin-left:auto;margin-right:auto} .math-card{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px;border-radius:22px} .math-row{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:4px;padding:16px 18px;border:none;border-radius:16px;background:rgba(255,255,255,0.85)} .math-row:last-child{border-bottom:none} .math-value{font-size:24px;font-weight:800;letter-spacing:-0.02em} .math-label{font-size:13px} .math-divider{grid-column:1/-1;margin:2px 0;opacity:.25} .math-divider ~ .math-row{grid-column:span 2} .math-total{grid-column:span 2;flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:4px;padding:16px 18px;border-radius:16px;background:linear-gradient(120deg,#ecfdf5,#eff6ff)} .math-total .math-value{font-size:28px} /* FAQ → two columns */ .faq{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;padding-top:72px} .faq h2{grid-column:1/-1} .faq-item:nth-child(2){border-top:1px solid var(--border)} .faq-item:first-of-type{border-top:1px solid var(--border)} @media(max-width:960px){ .pages-grid.four,.section .feat-grid{grid-template-columns:repeat(2,1fr)} .math-card{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .hero3,.showcase,.industries,.pages-nav,.bento,.steps3,.section,.compare,.math,.faq,.steps-wrap{padding-left:16px;padding-right:16px} .pages-grid.four,.section .feat-grid,.math-card,.faq{grid-template-columns:1fr} .math-divider ~ .math-row,.math-total{grid-column:auto} } .hero{max-width:var(--container);padding-left:24px;padding-right:24px;box-sizing:content-box} @media(max-width:760px){.hero{padding-left:16px;padding-right:16px}} /* How it works v4: no boxes — gradient icons joined by a dashed line */ .steps3{gap:32px;padding-top:24px;padding-bottom:16px} .step3{position:relative;text-align:center;padding:0;background:none;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .step3-icon{ position:relative;z-index:1;width:88px;height:88px;margin:0 auto 26px;border-radius:28px; display:flex;align-items:center;justify-content:center;color:#fff; background:linear-gradient(135deg,var(--accent),var(--violet)); box-shadow:0 18px 40px -14px rgba(80,90,246,0.55),inset 0 1px 0 rgba(255,255,255,0.35); } .step3-icon svg{width:38px;height:38px} .step3:not(:last-child)::after{ content:"";position:absolute;top:44px;left:calc(50% + 60px);right:calc(-50% + 60px); border-top:2px dashed rgba(99,102,241,0.35); } .step3-num{margin-bottom:6px} .step3 h3{font-size:22px} .step3 p{font-size:16px} @media(max-width:860px){ .steps3{gap:44px} .step3:not(:last-child)::after{top:auto;bottom:-34px;left:50%;right:auto;height:24px;border-top:none;border-left:2px dashed rgba(99,102,241,0.35)} } .steps3{padding-bottom:56px} @media(max-width:900px){.final-cta{margin-left:16px;margin-right:16px}} /* ═══ Full site footer ═══ */ .site-footer{text-align:left;padding:64px 24px 28px;border-top:none;background:#0b1020;color:#cbd5e1;font-size:15px} .sf-inner{max-width:var(--container);margin:0 auto;display:flex;flex-direction:column;gap:44px} .sf-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px} .sf-brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start} .sf-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:19px} .sf-logo img{border-radius:50%} .sf-brand p{color:#94a3b8;line-height:1.55;max-width:320px} .sf-call{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,0.18);color:#fff;font-weight:700} .sf-call svg{width:16px;height:16px} .sf-call:hover{background:rgba(255,255,255,0.06)} .site-footer nav{display:flex;flex-direction:column;gap:12px} .site-footer nav b{color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase} .site-footer nav a{color:#cbd5e1} .site-footer nav a:hover{color:#fff} .sf-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.1);font-size:13px;color:#94a3b8} @media(max-width:860px){.sf-cols{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1}} @media(max-width:480px){.sf-cols{grid-template-columns:1fr}} /* ═══ "Built for" industry row ═══ */ .built-for{max-width:var(--container);margin:0 auto;padding:0 24px 40px;box-sizing:content-box;display:flex;align-items:center;flex-wrap:wrap;gap:10px} .built-for span{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:6px} .built-for a{padding:9px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);font-weight:700;font-size:14px;color:var(--text);transition:border-color .15s,transform .15s} .built-for a:hover{border-color:var(--accent);transform:translateY(-1px)} @media(max-width:900px){.built-for{justify-content:center;padding:0 16px 32px}} /* ═══ Sticky quick actions on phones ═══ */ .m-sticky{display:none} @media(max-width:760px){ .m-sticky{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:900;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(15,23,42,0.08)} .m-sticky a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;font-weight:700;font-size:15px} .m-call{border:1px solid #c7d2fe;background:#fff;color:var(--accent)} .m-call svg{width:16px;height:16px} .m-trial{background:var(--accent);color:#fff} body{padding-bottom:76px} } /* ═══ Pricing v2 ═══ */ .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%;max-width:var(--container);margin:8px auto 0;align-items:stretch} .plan{position:relative;display:flex;flex-direction:column;gap:16px;padding:30px 28px;border-radius:24px;background:#fff;border:1px solid var(--border);text-align:left} .plan-name{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .plan-price{font-size:52px;font-weight:800;letter-spacing:-0.04em;line-height:1} .plan-price span{font-size:17px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:2px} .plan-mins{padding:12px 14px;border-radius:14px;background:var(--surface-alt);font-size:15px;color:var(--muted)} .plan-mins b{color:var(--text)} .plan p{font-size:15px;color:var(--muted);line-height:1.5;flex:1} .plan-btn{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;border:1px solid #d6d3d1;color:var(--text);font-weight:700;transition:border-color .15s,transform .15s} .plan-btn:hover{border-color:var(--accent);transform:translateY(-1px)} .plan-pro{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 30px 60px -28px rgba(30,41,90,0.6)} .plan-pro .plan-name{color:#a5b4fc} .plan-pro .plan-price span,.plan-pro p{color:#cbd5e1} .plan-pro .plan-mins{background:rgba(255,255,255,0.08);color:#cbd5e1} .plan-pro .plan-mins b{color:#fff} .plan-pro .plan-btn{background:#fff;border-color:#fff;color:var(--ink);font-weight:800} .plan-badge{position:absolute;top:-12px;left:28px;padding:5px 12px;border-radius:999px;background:#4f46e5;color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .included{width:100%;max-width:var(--container);margin:20px auto 0;box-sizing:border-box;padding:26px 28px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-border);text-align:left;display:flex;flex-direction:column;gap:18px} .included-title{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .included-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px} .included-grid div{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px} .inc-ico{width:26px;height:26px;border-radius:8px;background:#eef2ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;flex-shrink:0} .inc-ico svg{width:14px;height:14px} .included-note{font-size:14px;color:var(--muted)} /* FAQ accordion */ details.faq-item{border-top:none;border-bottom:none;padding:0;margin-bottom:10px;border-radius:16px;background:#fff;border:1px solid var(--border)} details.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:14px 20px;margin:0;font-size:16px;font-weight:700} details.faq-item summary::-webkit-details-marker{display:none} details.faq-item summary::after{content:"+";font-size:22px;font-weight:600;color:#4f46e5;flex-shrink:0} details.faq-item[open] summary::after{content:"\2013"} details.faq-item .faq-a{padding:0 20px 18px} .faq{align-items:start} @media(max-width:960px){.plans{grid-template-columns:1fr;max-width:460px}.included-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.included-grid{grid-template-columns:1fr}} /* ═══ Industry pages: sample call ═══ */ .sample-call{--tint:var(--accent);max-width:var(--container);margin:0 auto;padding:40px 24px 8px;box-sizing:content-box;display:flex;flex-direction:column;gap:28px} .sc-head{display:flex;flex-direction:column;gap:10px;max-width:640px} .sc-kicker{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tint)} .sc-head h2{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-0.04em;line-height:1.08} .sc-head h2 em{font-family:'Playfair Display',serif;font-style:italic;color:var(--tint)} .sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch} .sc-call{padding:24px;border-radius:24px;background:var(--ink);color:#e2e8f0;display:flex;flex-direction:column;gap:16px} .sc-call-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#94a3b8} .sc-live{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:#e2e8f0;text-transform:uppercase;letter-spacing:.06em;font-size:12px} .sc-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e} .sc-turns{display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.5} .sc-turns b{margin-right:6px} .sc-caller{color:#7dd3fc}.sc-ai{color:#c4b5fd} .sc-receive{padding:24px;border-radius:24px;background:#fff;border:1px solid var(--border);display:flex;flex-direction:column;gap:14px} .sc-receive-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:16px} .sc-tag{padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--tint) 14%,#fff);color:var(--tint);font-size:12px;font-weight:800} .sc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .sc-field{padding:12px 14px;border-radius:14px;background:var(--surface-alt);display:flex;flex-direction:column;gap:2px} .sc-field span{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .sc-field b{font-size:15px} .sc-callback{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;background:var(--tint);color:#fff;font-weight:700} .sc-qas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .sc-qa{padding:22px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:6px} .sc-qa b{font-size:16px} .sc-qa span{font-size:15px;color:var(--muted);line-height:1.5} @media(max-width:860px){.sc-grid,.sc-qas{grid-template-columns:1fr}.sample-call{padding:32px 16px 0}} /* footer columns are