/* ============================================================ Coach comercial — sistema de diseño compartido Claro premium (Stripe/Mercury). Un acento: blurple #635bff. Escala tipográfica: 11/12/13/14/15/16/20/24/32+. Espaciado x4. Radios: 8 controles/chips · 12 tarjetas · 16 marcos jumbo. ============================================================ */ :root{ --text-1:#0f0f14; --text-2:#3e3e48; --text-3:#63636d; --border:#e1e4ec; --border-strong:#ccd0dc; --surface-2:#e8ebf2; --bg:#eef0f6; --card:#ffffff; --band-accent:#f1f1fb; --accent:#635bff; --accent-dark:#4f46e5; --accent-tint:rgba(99,91,255,.08); --accent-tint-2:rgba(99,91,255,.14); --ok:#16a34a; --ok-tint:rgba(22,163,74,.1); --warn:#d97706; --warn-tint:rgba(217,119,6,.1); --bad:#dc2626; --bad-tint:rgba(220,38,38,.08); --radius-ctl:8px; --radius-card:12px; --shadow-1:0 1px 2px rgba(16,24,40,.04); --shadow-2:0 4px 12px rgba(16,24,40,.06); --shadow-float:0 24px 60px -20px rgba(16,24,40,.14); --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--font); color:var(--text-1); background:var(--bg); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(700px 400px at 15% -5%,rgba(99,91,255,.05),transparent 70%), radial-gradient(600px 360px at 90% 0%,rgba(99,91,255,.04),transparent 70%); } ::selection{background:var(--accent-tint-2)} a{color:var(--accent-dark);text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{ outline:2px solid transparent;outline-offset:2px; box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent-dark); border-radius:var(--radius-ctl); } img,svg{display:block;max-width:100%} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .skip{position:absolute;left:-9999px;top:0;background:var(--card);padding:8px 16px;border-radius:var(--radius-ctl);z-index:100} .skip:focus{left:16px;top:12px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- reveal on scroll ---------- Solo se oculta contenido si JS está presente (html.js lo pone un script inline en el ); sin JS todo es visible desde el primer render. */ .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} .js [data-reveal].in{opacity:1;transform:none} .js [data-reveal-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} .js [data-reveal-stagger].in>*{opacity:1;transform:none} .js [data-reveal-stagger].in>*:nth-child(2){transition-delay:.08s} .js [data-reveal-stagger].in>*:nth-child(3){transition-delay:.16s} .js [data-reveal-stagger].in>*:nth-child(4){transition-delay:.24s} .js [data-reveal-stagger].in>*:nth-child(5){transition-delay:.32s} .js [data-reveal-stagger].in>*:nth-child(6){transition-delay:.4s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important} .js [data-reveal],.js [data-reveal-stagger]>*{opacity:1;transform:none} .pl-dot{display:none} } /* ---------- nav ---------- */ .nav{ position:sticky;top:0;z-index:50; background:rgba(238,240,246,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); transition:background .3s,box-shadow .3s,border-color .3s; } .nav.scrolled{ background:rgba(255,255,255,.92); box-shadow:var(--shadow-2); border-bottom-color:transparent; } .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px} .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:var(--text-1);white-space:nowrap} .brand-mark{ width:28px;height:28px;border-radius:8px; background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .brand-mark svg{width:16px;height:16px;stroke:#fff} .nav-links{display:flex;align-items:center;gap:28px;list-style:none} .nav-links a{color:var(--text-2);font-size:14px;font-weight:500} .nav-links a:hover{color:var(--text-1)} .nav-links a.active{color:var(--accent-dark);font-weight:600} .menu-cta,.menu-login{display:none} .nav-cta{display:flex;align-items:center;gap:12px} .nav-burger{ display:none;align-items:center;justify-content:center; width:38px;height:38px;background:transparent;border:1px solid var(--border); border-radius:var(--radius-ctl);cursor:pointer;color:var(--text-1); } .nav-burger svg{width:18px;height:18px;stroke:currentColor} .nav-burger .icon-close{display:none} .nav-burger[aria-expanded="true"] .icon-open{display:none} .nav-burger[aria-expanded="true"] .icon-close{display:block} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font);font-size:14px;font-weight:500;line-height:1; padding:10px 16px;border-radius:var(--radius-ctl);border:1px solid transparent; cursor:pointer;transition:background .15s,border-color .15s,color .15s; white-space:nowrap; } .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-dark)} .btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border)} .btn-ghost:hover{background:var(--surface-2);color:var(--text-1)} .btn-lg{padding:14px 24px;font-size:15px} .btn svg{width:16px;height:16px} /* ---------- typography / section heads ---------- */ h1{font-size:clamp(34px,5vw,54px);line-height:1.12;font-weight:600;letter-spacing:-.02em;margin-bottom:20px} h2{font-size:clamp(26px,3.4vw,36px);line-height:1.2;font-weight:600;letter-spacing:-.015em;margin-bottom:16px} .h1-hero .word{display:inline-block;opacity:0;transform:translateY(24px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards} @keyframes rise{to{opacity:1;transform:none}} section{padding:96px 0} .sec-head{text-align:center;max-width:640px;margin:0 auto 56px} .sec-eyebrow{ font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--accent-dark);margin-bottom:12px; } .sec-sub{font-size:16px;color:var(--text-2)} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:500;color:var(--accent-dark); background:var(--accent-tint);border:1px solid rgba(99,91,255,.18); padding:6px 12px;border-radius:999px;margin-bottom:24px; } .eyebrow svg{width:14px;height:14px} /* ---------- page hero (subpages) ---------- */ .page-hero{padding:88px 0 40px;text-align:center} .page-hero .wrap{max-width:760px} .page-hero p{font-size:clamp(16px,2vw,20px);color:var(--text-2)} /* ---------- hero (home) ---------- */ .hero{position:relative;overflow:hidden;padding:88px 0 0} .hero-in{position:relative;text-align:center;max-width:780px;margin:0 auto} .hero-sub{font-size:clamp(16px,2vw,20px);color:var(--text-2);line-height:1.65;max-width:620px;margin:0 auto 32px} .hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px} .hero-note{font-size:13px;color:var(--text-3)} .live-dot{ display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--ok);margin-right:6px;vertical-align:1px; animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.35)}50%{box-shadow:0 0 0 6px rgba(22,163,74,0)}} /* ---------- browser mockup ---------- */ .mockup-stage{position:relative;margin:56px auto 0;max-width:960px;padding:0 12px} .mockup{ background:var(--card);border:1px solid var(--border);border-radius:16px 16px 0 0; border-bottom:none;box-shadow:var(--shadow-float); overflow:hidden;text-align:left; } .mock-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)} .mock-dot{width:10px;height:10px;border-radius:50%;background:var(--border)} .mock-url{margin-left:12px;font-size:12px;color:var(--text-3);background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 12px;flex:1;max-width:280px} .mock-body{display:grid;grid-template-columns:200px 1fr;min-height:380px} .mock-side{background:var(--surface-2);border-right:1px solid var(--border);padding:16px 10px} .mock-side-group{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:0 10px;margin:14px 0 6px} .mock-side-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);padding:8px 10px;border-radius:8px;font-weight:500} .mock-side-item svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0} .mock-side-item.active{background:var(--accent-tint);color:var(--accent-dark)} .mock-main{padding:20px 24px} .mock-title{font-size:15px;font-weight:600;margin-bottom:16px} .mock-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px} .mock-kpi{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 14px} .mock-kpi-label{font-size:11px;color:var(--text-3);margin-bottom:4px} .mock-kpi-val{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .mock-kpi-delta{font-size:11px;font-weight:500;color:var(--ok)} .mock-table{border:1px solid var(--border);border-radius:8px;overflow:hidden} .mock-row{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;padding:12px 16px;font-size:13px;border-top:1px solid var(--border);background:var(--card)} .mock-row:first-child{border-top:none;background:var(--surface-2);font-size:11px;color:var(--text-3);font-weight:500} .mock-row-name{font-weight:500} .mock-row-meta{font-size:11px;color:var(--text-3)} .pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;font-variant-numeric:tabular-nums} .pill-ok{background:var(--ok-tint);color:#15803d} .pill-warn{background:var(--warn-tint);color:#b45309} .pill-bad{background:var(--bad-tint);color:#b91c1c} .pill-area{background:var(--accent-tint);color:var(--accent-dark);font-weight:500} /* ---------- logos strip ---------- */ .logos{padding:36px 0;border-top:1px solid var(--border)} .logos-label{text-align:center;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px} .logos-row{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px} .logos-row li{font-size:16px;font-weight:600;color:var(--text-3);letter-spacing:-.01em} /* ---------- cards: pains / steps / feats / use ---------- */ .pains{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .pain{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:28px;transition:border-color .15s,box-shadow .15s} .pain:hover{border-color:var(--border-strong);box-shadow:var(--shadow-1)} .pain-icon{width:40px;height:40px;border-radius:var(--radius-ctl);background:var(--accent-tint);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .pain-icon svg{width:20px;height:20px;stroke:var(--accent-dark)} .pain h3{font-size:16px;font-weight:600;margin-bottom:8px} .pain p{font-size:14px;color:var(--text-2)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .step{position:relative;padding:28px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card)} .step-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;margin-bottom:16px} .step h3{font-size:16px;font-weight:600;margin-bottom:8px} .step p{font-size:14px;color:var(--text-2)} .feats{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .feat{padding:24px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg);transition:border-color .15s,box-shadow .15s} .feat:hover{border-color:var(--border-strong);box-shadow:var(--shadow-1)} .feat-icon{width:36px;height:36px;border-radius:var(--radius-ctl);background:var(--accent-tint);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .feat-icon svg{width:18px;height:18px;stroke:var(--accent-dark)} .feat h3{font-size:15px;font-weight:600;margin-bottom:6px} .feat p{font-size:13px;color:var(--text-2)} .feat-link{font-size:13px;font-weight:500;display:inline-block;margin-top:10px} .use-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .use-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card);padding:32px;transition:border-color .15s,box-shadow .15s} .use-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-2)} .use-num{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent-dark);letter-spacing:.08em;margin-bottom:12px} .use-card h3{font-size:20px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em} .use-card>p{font-size:14px;color:var(--text-2);margin-bottom:16px} .use-list{list-style:none;display:grid;gap:10px} .use-list li{display:flex;gap:10px;font-size:14px;color:var(--text-2);align-items:flex-start} .use-list svg{width:16px;height:16px;stroke:var(--accent-dark);flex-shrink:0;margin-top:2px} /* ---------- highlights (copy + visual) ---------- */ .hl{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:96px} .hl:last-child{margin-bottom:0} .hl-copy .sec-eyebrow{margin-bottom:10px} .hl-copy h3,.hl-copy h2.hl-title{font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:16px} .hl-copy p{font-size:15px;color:var(--text-2);margin-bottom:16px} .hl-list{list-style:none;display:grid;gap:10px} .hl-list li{display:flex;gap:10px;font-size:14px;color:var(--text-2);align-items:flex-start} .hl-list svg{width:16px;height:16px;stroke:var(--accent-dark);flex-shrink:0;margin-top:2px} .hl-visual{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-2);padding:24px} .hl.rev .hl-visual{order:-1} /* ---------- quote / score components ---------- */ .quote-card{border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:12px;background:var(--bg)} .quote-card:last-child{margin-bottom:0} .quote-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .quote-who{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)} .tstamp{font-size:11px;font-weight:600;color:var(--accent-dark);background:var(--accent-tint);padding:2px 8px;border-radius:8px;font-variant-numeric:tabular-nums} .quote-card p{font-size:13px;color:var(--text-1);font-style:italic} .quote-verdict{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--text-2);margin-top:10px;font-style:normal} .quote-verdict svg{width:14px;height:14px;flex-shrink:0;margin-top:2px} .score-line{display:flex;align-items:center;gap:12px;margin-bottom:10px} .score-name{font-size:13px;color:var(--text-2);width:110px;flex-shrink:0} .score-track{flex:1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden} .score-fill{height:100%;border-radius:999px;background:var(--accent);transition:width 1s cubic-bezier(.2,.7,.2,1)} .score-val{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;width:34px;text-align:right} /* ---------- chat bubbles ---------- */ .chat{display:grid;gap:10px} .chat-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.5} .chat-them{background:var(--surface-2);border:1px solid var(--border);justify-self:start;border-bottom-left-radius:4px} .chat-me{background:var(--accent);color:#fff;justify-self:end;border-bottom-right-radius:4px} .chat-label{font-size:11px;color:var(--text-3);justify-self:start;margin-top:2px} .chat-label.right{justify-self:end} /* ---------- notification cards ---------- */ .tg-card{border:1px solid var(--border);border-radius:8px;background:var(--bg);padding:16px;margin-bottom:12px} .tg-card:last-child{margin-bottom:0} .tg-head{display:flex;align-items:center;gap:8px;margin-bottom:6px} .tg-head svg{width:15px;height:15px;stroke:var(--accent-dark)} .tg-title{font-size:13px;font-weight:600} .tg-time{margin-left:auto;font-size:11px;color:var(--text-3)} .tg-card p{font-size:13px;color:var(--text-2)} /* ---------- stats / counters ---------- */ .stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--band-accent)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center} .stat-val{font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-1)} .stat-val .stat-suffix{color:var(--accent-dark)} .stat-label{font-size:13px;color:var(--text-3);margin-top:6px} /* ---------- pipeline diagram ---------- */ .pipeline-wrap{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-2);padding:32px;overflow-x:auto} .pipeline-svg{width:100%;height:auto;min-width:880px} .pipeline-svg text{font-family:var(--font)} .arch-list{list-style:none;display:grid;gap:0;margin-top:48px;counter-reset:arch} .arch-item{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:24px 12px;border-top:1px solid var(--border);transition:padding-left .2s} .arch-item:hover{padding-left:20px} .arch-num{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent-dark);padding-top:3px} .arch-item h3{font-size:16px;font-weight:600;margin-bottom:6px} .arch-item p{font-size:14px;color:var(--text-2)} /* ---------- demo player ---------- */ .demo-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start} .demo-call{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-2);overflow:hidden} .demo-call-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface-2)} .demo-call-head svg{width:16px;height:16px;stroke:var(--accent-dark)} .demo-call-title{font-size:13px;font-weight:600} .demo-call-sub{margin-left:auto;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums} .demo-lines{padding:20px;min-height:320px;max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:10px} .demo-line{max-width:88%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.5;animation:msg-in .4s cubic-bezier(.2,.7,.2,1)} .js .demo-line{display:none} .js .demo-line.show{display:block} .demo-line.prospecto{background:var(--surface-2);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:4px} .demo-line.comercial{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px} @keyframes msg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .demo-typing{display:none;align-self:flex-start;padding:12px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;border-bottom-left-radius:4px} .demo-typing.show{display:flex;gap:4px} .demo-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:bounce 1.2s ease-in-out infinite} .demo-typing span:nth-child(2){animation-delay:.15s} .demo-typing span:nth-child(3){animation-delay:.3s} @keyframes bounce{0%,60%,100%{transform:none}30%{transform:translateY(-4px)}} .demo-analysis{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-2);padding:24px} .demo-analysis-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .demo-analysis-head h3{font-size:15px;font-weight:600} .demo-nota{font-size:32px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .demo-nota small{font-size:14px;color:var(--text-3);font-weight:400} .demo-tag{margin-bottom:12px;animation:msg-in .4s cubic-bezier(.2,.7,.2,1)} .js .demo-tag{display:none} .js .demo-tag.show{display:block} .demo-replay{margin-top:20px;text-align:center} /* ---------- calculator ---------- */ .calc{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-2);padding:40px;max-width:880px;margin:0 auto} .calc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px} .calc-field label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:10px} .calc-field output{font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums} .calc-range{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer} .calc-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--accent) var(--fill,50%),var(--border) var(--fill,50%))} .calc-range::-moz-range-track{height:6px;border-radius:999px;background:var(--border)} .calc-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)} .calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent);margin-top:-7px;box-shadow:var(--shadow-1)} .calc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:var(--shadow-1)} .calc-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px} .calc-cell{border:1px solid var(--border);border-radius:var(--radius-card);padding:24px} .calc-cell-title{font-size:13px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px} .calc-cell-title svg{width:15px;height:15px;stroke:currentColor} .calc-line{display:flex;justify-content:space-between;font-size:13px;color:var(--text-2);padding:6px 0;border-top:1px solid var(--border)} .calc-line:first-of-type{border-top:none} .calc-line strong{color:var(--text-1);font-variant-numeric:tabular-nums;font-weight:500} .calc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-strong)} .calc-total-label{font-size:13px;font-weight:500;color:var(--text-2)} .calc-total-val{font-size:24px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.3} .calc-cell-you{background:var(--bg)} .calc-cell-coach{background:var(--accent-tint);border-color:rgba(99,91,255,.25)} .calc-cell-coach .calc-line{border-top-color:rgba(99,91,255,.15)} .calc-cell-coach .calc-total{border-top-color:rgba(99,91,255,.3)} .calc-cell-coach .calc-total-val{color:var(--accent-dark)} .calc-verdict{text-align:center;font-size:15px;color:var(--text-2);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px} .calc-verdict strong{color:var(--text-1)} .calc-note{text-align:center;font-size:12px;color:var(--text-3);margin-top:16px} /* ---------- includes grid ---------- */ .includes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 32px;max-width:760px;margin:0 auto} .includes-grid li{display:flex;gap:10px;font-size:14px;color:var(--text-2);align-items:flex-start;list-style:none} .includes-grid svg{width:16px;height:16px;stroke:var(--accent-dark);flex-shrink:0;margin-top:3px} /* ---------- pricing cards ---------- */ .price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:24px;justify-content:center} .price{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card);padding:32px;display:flex;flex-direction:column} .price.hot{border-color:var(--accent);box-shadow:var(--shadow-2);position:relative} .price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:11px;font-weight:600;padding:4px 14px;border-radius:999px;white-space:nowrap} .price-name{font-size:15px;font-weight:600;margin-bottom:4px} .price-desc{font-size:13px;color:var(--text-3);margin-bottom:20px} .price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:24px} .price-num{font-size:40px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .price-per{font-size:14px;color:var(--text-3)} .price-note{font-size:13px;color:var(--text-3);margin:-16px 0 24px} .price ul{list-style:none;display:grid;gap:12px;margin-bottom:28px} .price li{display:flex;gap:10px;font-size:14px;color:var(--text-2);align-items:flex-start} .price li svg{width:16px;height:16px;stroke:var(--accent-dark);flex-shrink:0;margin-top:2px} .price .btn{margin-top:auto;width:100%} /* ---------- comparison table ---------- */ .cmp-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;font-size:14px} .cmp-scroll{overflow-x:auto;border-radius:var(--radius-card)} .cmp-table th{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);text-align:left;padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--border)} .cmp-table td{padding:14px 20px;border-top:1px solid var(--border);color:var(--text-2);vertical-align:top} .cmp-table td:first-child{color:var(--text-1);font-weight:500} .cmp-table tbody tr:hover{background:var(--surface-2)} .cmp-table .cmp-hi{color:var(--accent-dark);font-weight:500} /* ---------- FAQ accordion ---------- */ .faq-list{max-width:720px;margin:0 auto;display:grid;gap:12px} .faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden} .faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-size:15px;font-weight:500} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary svg{width:16px;height:16px;stroke:var(--text-3);flex-shrink:0;transition:transform .2s} .faq-item[open] summary svg{transform:rotate(45deg)} .faq-item summary:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-dark)} .faq-item .faq-a{padding:0 20px 16px;font-size:14px;color:var(--text-2)} /* ---------- final CTA ---------- */ .final{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:72px 32px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-1)} .final::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 260px at 50% 0%,var(--accent-tint),transparent 70%)} .final-in{position:relative;max-width:560px;margin:0 auto} .final h2{margin-bottom:12px} .final p{color:var(--text-2);font-size:16px;margin-bottom:28px} .final-note{margin-top:16px;font-size:13px;color:var(--text-3)} /* ---------- footer ---------- */ footer{border-top:1px solid var(--border);padding:56px 0 40px;background:var(--card)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} .foot-brand p{font-size:13px;color:var(--text-3);margin-top:12px;max-width:260px} .foot-col .foot-h{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px} .foot-col ul{list-style:none;display:grid;gap:10px} .foot-col a{font-size:14px;color:var(--text-2)} .foot-col a:hover{color:var(--text-1)} .foot-base{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border)} .foot-copy{font-size:13px;color:var(--text-3)} /* ---------- responsive ---------- */ @media (max-width:900px){ .nav-burger{display:inline-flex} .nav-links{ display:none;position:absolute;top:64px;left:0;right:0; flex-direction:column;gap:0;padding:8px 24px 16px; background:var(--card);border-bottom:1px solid var(--border); box-shadow:var(--shadow-2); } .nav-links.open{display:flex} .nav-links a{display:block;padding:12px 0;font-size:15px} .nav-links .menu-login{display:block} .nav-links .menu-cta{display:block;margin-top:10px} .nav-links .menu-cta .btn{display:flex;width:100%;padding:13px 0;color:#fff} .pain-grid,.use-grid,.calc-inputs,.calc-compare{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .feat-grid{grid-template-columns:1fr 1fr} .hl{grid-template-columns:1fr;gap:28px;margin-bottom:72px} .hl.rev .hl-visual{order:0} .price-grid{grid-template-columns:1fr} .demo-wrap{grid-template-columns:1fr} .mock-body{grid-template-columns:1fr} .mock-side{display:none} .mock-kpis{grid-template-columns:repeat(2,1fr)} .stats-grid{grid-template-columns:repeat(2,1fr)} .includes-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .calc{padding:24px} section{padding:72px 0} } @media (max-width:560px){ .feat-grid{grid-template-columns:1fr} .mock-row{grid-template-columns:1fr auto} .mock-row .pill-area,.mock-row .mock-row-meta:nth-child(3), .mock-row:first-child span:nth-child(2),.mock-row:first-child span:nth-child(3){display:none} .hero{padding-top:64px} .nav-cta .btn-ghost{display:none} .price .btn{white-space:normal;line-height:1.4} .stats-grid{grid-template-columns:1fr 1fr} .foot-grid{grid-template-columns:1fr} } @media (max-width:480px){ .nav-cta{gap:8px} .nav-cta .btn-primary{padding:9px 12px;font-size:13px} } @media (max-width:360px){ .brand-name{display:none} }