/* Landing page sections */

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 40px; overflow: clip; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 820px; height: 820px; background: radial-gradient(closest-side, rgba(255, 90, 31, .10), rgba(255, 90, 31, 0) 70%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 64px; align-items: center; min-height: min(680px, calc(100dvh - 72px)); }
.hero h1 { max-width: 12ch; }
.hero .lead { margin-top: 24px; max-width: 44ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: 14px; color: var(--ink-2); }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note .i { width: 16px; height: 16px; color: var(--success-ink); }

/* live call card */
.callcard-wrap { position: relative; }
.callcard { position: relative; overflow: hidden; }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cc-live { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.cc-live .tag { font-variant-numeric: tabular-nums; }
.cc-biz { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.cc-caller { display: flex; align-items: center; gap: 14px; padding: 16px 20px 4px; }
.cc-av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); flex: none; }
.cc-caller b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.cc-caller span { font-size: 13px; color: var(--ink-2); }
.cc-wave { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 24px; }
.cc-wave i { width: 3px; border-radius: 3px; background: var(--ink); height: 30%; opacity: .25; transition: height 120ms var(--ease), opacity 120ms var(--ease); }
.cc-wave.on i { opacity: .9; animation: wv 900ms var(--ease) infinite alternate; }
.cc-wave.on i:nth-child(2) { animation-delay: -200ms; } .cc-wave.on i:nth-child(3) { animation-delay: -450ms; } .cc-wave.on i:nth-child(4) { animation-delay: -100ms; } .cc-wave.on i:nth-child(5) { animation-delay: -650ms; }
.cc-wave.caller i { background: var(--accent); }
@keyframes wv { from { height: 20%; } to { height: 100%; } }
.cc-body { height: 292px; padding: 8px 20px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px); mask-image: linear-gradient(to bottom, transparent 0, #000 48px); }
.msg { display: grid; gap: 4px; max-width: 86%; animation: msgIn 260ms var(--ease); }
.msg .who { font-size: 11.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.msg p { padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; }
.msg.ai p { background: var(--surface-2); border-top-left-radius: 4px; }
.msg.caller { margin-left: auto; justify-items: end; }
.msg.caller p { background: var(--ink); color: #fff; border-top-right-radius: 4px; }
.msg .caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: blink 900ms steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } }
.typing { display: inline-flex; gap: 4px; padding: 14px; background: var(--surface-2); border-radius: 14px; border-top-left-radius: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); opacity: .4; animation: tp 1s var(--ease) infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tp { 30% { opacity: 1; transform: translateY(-2px); } }
.cc-fields { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.cc-f { padding: 12px 20px; min-height: 64px; }
.cc-f:nth-child(odd) { border-right: 1px solid var(--line); }
.cc-f:nth-child(n+3) { border-top: 1px solid var(--line); }
.cc-f dt { font-size: 11.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.cc-f dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; min-height: 22px; display: flex; align-items: center; }
.cc-f dd:empty::before { content: ""; width: 72%; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #EFEDE8 0, #F7F6F2 40%, #EFEDE8 80%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.cc-f dd.pop { animation: fieldIn 320ms var(--ease); }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes fieldIn { from { opacity: 0; transform: translateY(4px); } }

.cc-toast { position: absolute; left: -32px; bottom: 28px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-pop); opacity: 0; transform: translateY(10px) scale(.97); transition: opacity 260ms var(--ease), transform 320ms var(--ease); pointer-events: none; }
.cc-toast.show { opacity: 1; transform: none; }
.cc-toast .ok { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--success-soft); color: var(--success-ink); }
.cc-toast b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.cc-toast b em { font-style: normal; color: var(--ink); }
.cc-toast span { font-size: 12.5px; color: var(--ink-2); }
.cc-sms { position: absolute; right: -28px; top: -58px; width: 248px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: var(--sh-pop); opacity: 0; transform: translateY(-8px); transition: opacity 260ms var(--ease), transform 320ms var(--ease); pointer-events: none; }
.cc-sms.show { opacity: 1; transform: none; }
.cc-sms .from { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #B9BCC4; margin-bottom: 6px; }
.cc-sms .from svg { width: 16px; height: 16px; }
.cc-sms p { font-size: 13px; line-height: 1.45; }
.cc-caption { margin-top: 20px; font-size: 13px; color: var(--ink-2); text-align: center; }

/* ---------- Founding ---------- */
.founding-sec { padding: 8px 0 24px; }

/* ---------- Demo builder ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; overflow: hidden; }
.demo-l { padding: 48px; display: grid; align-content: start; gap: 20px; }
.demo-r { padding: 40px; background: var(--surface-2); border-left: 1px solid var(--line); display: grid; align-content: center; min-height: 420px; }
.demo form { display: grid; gap: 12px; margin-top: 8px; }
.demo-row { display: flex; gap: 10px; }
.demo-row .input-group { flex: 1; min-width: 0; }
.stages { list-style: none; display: grid; gap: 4px; }
.stage { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; padding: 12px 0; opacity: .55; transition: opacity var(--t) var(--ease); }
.stage.active, .stage.done { opacity: 1; }
.stage .st-ic { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); }
.stage .st-ic .i { width: 16px; height: 16px; }
.stage.active .st-ic { border-color: var(--ink); color: var(--ink); }
.stage.active .st-ic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); animation: spin 900ms linear infinite; }
.stage.done .st-ic { background: var(--ink); border-color: var(--ink); color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage b { display: block; font-size: 15.5px; font-weight: 600; }
.stage .st-d { font-size: 13.5px; color: var(--ink-2); min-height: 20px; }
.stage-bar { height: 3px; margin-top: 8px; border-radius: 3px; background: #E3E0DA; overflow: hidden; }
.stage-bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.stage.active .stage-bar i { transition: transform var(--dur, 1200ms) cubic-bezier(.4, .1, .2, 1); transform: scaleX(1); }
.stage.done .stage-bar i { transform: scaleX(1); }
.stage:not(.active) .stage-bar { display: none; }
.demo-empty { display: grid; gap: 12px; justify-items: start; }
.demo-empty .mini-phone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); }
.demo-ready { display: grid; gap: 16px; animation: fieldIn 360ms var(--ease); }
.demo-ready .ready-tag { justify-self: start; }
.demo-num { font-size: clamp(34px, 4vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.demo-ready .row { display: flex; flex-wrap: wrap; gap: 10px; }
[hidden] { display: none !important; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: s; }
.step { position: relative; padding-top: 28px; border-top: 1px solid var(--line-2); }
.step::before { counter-increment: s; content: counter(s); position: absolute; top: -17px; left: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.step:first-child::before { background: var(--ink); border-color: var(--ink); color: #fff; }
.step h3 { margin-top: 8px; }
.step p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
.step-viz { margin-top: 24px; padding: 16px; border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 14px; min-height: 96px; display: grid; align-content: center; gap: 8px; }
.code-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 600; font-variant-numeric: tabular-nums; justify-self: start; }
.step-viz .row { display: flex; align-items: center; gap: 10px; }
.sms-mini { padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--surface-2); font-size: 13.5px; line-height: 1.45; }

/* ---------- Calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); overflow: hidden; }
.calc-in { padding: 40px; display: grid; gap: 28px; }
.calc-row { display: grid; gap: 6px; }
.calc-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.calc-row label { font-weight: 600; font-size: 15.5px; }
.calc-row .help { margin-top: -2px; }
.calc-val { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); padding: 0 10px; min-height: 40px; }
.calc-val input { width: 64px; border: 0; background: transparent; text-align: right; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; padding: 0; min-height: 38px; -moz-appearance: textfield; }
.calc-val input::-webkit-outer-spin-button, .calc-val input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc-val:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255,90,31,.28); }
.calc-val span { color: var(--ink-2); font-size: 15px; }
.calc-out { padding: 40px; background: var(--surface-2); border-left: 1px solid var(--line); display: grid; align-content: start; gap: 24px; }
.calc-out .est { display: flex; align-items: center; gap: 10px; }
.calc-big { font-size: clamp(52px, 6vw, 72px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; color: var(--ink); }
.calc-big .per { font-size: 20px; letter-spacing: -0.01em; color: var(--ink-2); font-weight: 500; margin-left: 4px; }
.calc-big .amt { color: var(--accent); }
.calc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-kpis div { padding: 14px 16px; border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--line); }
.calc-kpis b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.calc-kpis span { font-size: 13px; color: var(--ink-2); }
.payback { padding: 18px; border-radius: var(--r-ctl); background: var(--ink); color: #fff; display: grid; gap: 12px; }
.payback p { font-size: 16px; line-height: 1.45; }
.payback p b { color: #FF8A5F; font-weight: 600; }
.payback .seg { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); justify-self: start; }
.payback .seg button { color: #C9CBD1; min-height: 36px; font-size: 13.5px; padding: 0 12px; }
.payback .seg button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.calc-fine { font-size: 12.5px; color: var(--ink-2); }

/* ---------- Bento features ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { position: relative; padding: 28px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); display: flex; flex-direction: column; align-items: stretch; gap: 10px; overflow: hidden; min-height: 280px; }
.tile .ti { align-self: flex-start; }
.tile .ti { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); margin-bottom: 6px; }
.tile h3 { font-size: 19px; }
.tile p { color: var(--ink-2); font-size: 15.5px; max-width: 42ch; }
.tile .viz { margin-top: auto; padding-top: 20px; }
.t-a { grid-column: span 4; } .t-b { grid-column: span 2; } .t-c { grid-column: span 2; } .t-d { grid-column: span 4; } .t-e { grid-column: span 3; } .t-f { grid-column: span 3; }
.t-b { background: var(--accent-soft); border-color: var(--accent-line); }
.t-b .ti { background: #fff; }
.t-d { background: var(--ink); color: #fff; border-color: var(--ink); }
.t-d p { color: #B9BCC4; }
.t-d .ti { background: rgba(255,255,255,.08); color: #fff; }
.t-f { background: var(--surface-2); }
.t-f .ti { background: #fff; }
.hours { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 72px; }
.hours i { display: block; border-radius: 3px; background: #ECEAE5; height: 100%; }
.hours i.off { background: #F4F3EF; }
.hours i.call { background: var(--ink); }
.hours i.call.after { background: var(--accent); }
.hours-lbl { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hours-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.hours-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hours-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--ink); }
.hours-legend i.a { background: var(--accent); }
.slot { display: grid; gap: 6px; }
.slot div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #fff; font-size: 13.5px; border: 1px solid var(--accent-line); }
.slot div.new { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,90,31,.14); }
.slot b { font-weight: 600; font-variant-numeric: tabular-nums; }
.xfer { display: grid; gap: 8px; font-size: 13.5px; }
.xfer .kw { display: flex; flex-wrap: wrap; gap: 6px; }
.xfer .line { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger-ink); font-weight: 600; }
.phone-sms { max-width: 360px; padding: 14px; border-radius: 16px; background: #1A1D24; border: 1px solid #2A2E37; }
.phone-sms .from { display: flex; justify-content: space-between; font-size: 12px; color: #9EA2AC; margin-bottom: 8px; }
.phone-sms p { font-size: 14px; line-height: 1.5; color: #EDEEF0; }
.phone-sms p b { color: #fff; }
.t-d { justify-content: center; }
.t-d .split { display: grid; grid-template-columns: 1fr minmax(0, 360px); gap: 28px; align-items: center; }
.spam { display: grid; gap: 6px; font-size: 13.5px; }
.spam div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.spam div span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.spam .i { width: 16px; height: 16px; color: var(--ink-2); }
.lang { display: grid; gap: 8px; }
.lang p { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #fff; font-size: 14px; max-width: 34ch; }
.lang p:lang(es) { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--ink); color: #fff; }

/* ---------- Trades ---------- */
.trades-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.trade-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 15px; color: var(--ink-2); transition: all var(--t) var(--ease); }
.trade-tab:hover { color: var(--ink); border-color: #BDB9B0; }
.trade-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.trade-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; overflow: hidden; }
.trade-panel .tp-l { padding: 40px; display: grid; align-content: start; gap: 20px; }
.trade-panel .tp-r { padding: 32px; background: var(--surface-2); border-left: 1px solid var(--line); display: grid; gap: 12px; align-content: center; }
.quote-big { font-size: 26px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; }
.quote-big .serif { font-size: 1.1em; }
.does { list-style: none; display: grid; gap: 12px; }
.does li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15.5px; color: var(--ink-2); }
.does li .i { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }
.outcome { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.outcome .ok { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--success-soft); color: var(--success-ink); flex: none; }
.outcome b { display: block; font-size: 15px; font-weight: 600; }
.outcome span { font-size: 13px; color: var(--ink-2); }
.outcome .val { white-space: nowrap; margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 16px; }
.tp-r .msg { max-width: 92%; animation: none; }
.tp-r .msg.ai p { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Compare ---------- */
.compare-wrap { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); }
.compare { min-width: 760px; }
.compare th, .compare td { padding: 18px 20px; font-size: 15px; }
.compare thead th { font-size: 15px; color: var(--ink); font-weight: 600; vertical-align: bottom; }
.compare thead th small { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.compare tbody th { font-weight: 500; color: var(--ink); width: 30%; }
.compare .cc { background: #FFF7F2; box-shadow: inset 1px 0 0 var(--accent-line), inset -1px 0 0 var(--accent-line); }
.compare thead .cc { border-top: 3px solid var(--accent); }
.compare td .i { width: 20px; height: 20px; display: inline-block; vertical-align: -5px; margin-right: 4px; }
.compare .cost td, .compare .cost th { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.compare .cost .muted-cell { color: var(--ink); }
.compare-foot { margin-top: 16px; font-size: 13.5px; color: var(--ink-2); }
.sn { display: inline-block; padding: 0 6px; margin-left: 4px; border-radius: 4px; background: var(--warning-soft); color: var(--warning-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ---------- Pricing teaser ---------- */
.pt { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.pt-list { overflow: hidden; }
.pt-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; padding: 22px 24px; text-decoration: none; transition: background-color var(--t-fast) var(--ease); }
.pt-row + .pt-row { border-top: 1px solid var(--line); }
.pt-row:hover { background: #FCFBF9; }
.pt-row b { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.pt-row .small { color: var(--ink-2); }
.pt-row .price { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pt-row .price span { font-size: 14px; color: var(--ink-2); font-weight: 500; letter-spacing: 0; }
.pt-row .i { color: var(--ink-2); transition: transform var(--t) var(--ease); }
.pt-row:hover .i { transform: translateX(3px); color: var(--ink); }
.pt-row.pop { background: #FFF9F5; }
.pt-points { list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.pt-points li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.pt-points .i { color: var(--success-ink); }

/* ---------- FAQ layout ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq-side { position: sticky; top: 104px; display: grid; gap: 16px; }

/* ---------- Final CTA ---------- */
.final { position: relative; overflow: hidden; padding: 88px 48px; border-radius: 24px; background: var(--ink); color: #fff; text-align: center; display: grid; justify-items: center; gap: 20px; }
.final::before { content: ""; position: absolute; left: 50%; top: 100%; width: 900px; height: 600px; transform: translate(-50%, -45%); background: radial-gradient(closest-side, rgba(255, 90, 31, .32), rgba(255, 90, 31, 0)); pointer-events: none; }
.final > * { position: relative; }
.final p { color: #B9BCC4; font-size: 18px; max-width: 48ch; }
.final .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.final .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.24); box-shadow: none; }
.final .btn-ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.04); }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; min-height: 0; }
  .hero h1 { max-width: 14ch; }
  .callcard-wrap { max-width: 560px; }
  .cc-toast { left: 12px; }
  .cc-sms { right: 12px; }
}
@media (max-width: 900px) {
  .demo, .calc, .trade-panel { grid-template-columns: 1fr; }
  .demo-r, .calc-out, .trade-panel .tp-r { border-left: 0; border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; gap: 48px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .t-a, .t-d { grid-column: span 2; } .t-b, .t-c { grid-column: span 1; } .t-e, .t-f { grid-column: span 2; }
  .pt, .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-side { position: static; }
  .t-d .split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero { padding: 32px 0 48px; }
  .hero .lead { margin-top: 20px; }
  .hero-ctas { margin-top: 28px; }
  .hero-ctas .btn { width: 100%; }
  .cc-body { height: 300px; padding: 8px 16px 12px; }
  .cc-head, .cc-caller { padding-left: 16px; padding-right: 16px; }
  .cc-f { padding: 10px 16px; }
  .cc-toast { left: 10px; right: 10px; bottom: 30px; }
  .cc-sms { right: 10px; top: -40px; width: 232px; }
  .cc-biz { display: none; }
  .demo-l, .demo-r, .calc-in, .calc-out, .trade-panel .tp-l, .trade-panel .tp-r { padding: 24px; }
  .demo-r { min-height: 0; }
  .demo-row { flex-direction: column; }
  .demo-row .btn { width: 100%; }
  .bento { grid-template-columns: 1fr; }
  .t-a, .t-b, .t-c, .t-d, .t-e, .t-f { grid-column: span 1; }
  .tile { min-height: 0; padding: 24px; }
  .hours { grid-template-columns: repeat(24, 1fr); gap: 2px; height: 56px; }
  .trades-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 20px; padding: 2px var(--gutter); scrollbar-width: none; }
  .trades-tabs::-webkit-scrollbar { display: none; }
  .trade-tab { flex: none; }
  .quote-big { font-size: 22px; }
  .pt-row { grid-template-columns: 1fr auto; padding: 18px 20px; gap: 12px; }
  .pt-row > .i { display: none; }
  .final { padding: 56px 24px; border-radius: 20px; }
  .final .row .btn { width: 100%; }
  .faq .ans { padding-right: 0; }
  .calc-kpis b { font-size: 20px; }
  .compare-wrap { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .compare { min-width: 0; display: block; }
  .compare thead { display: none; }
  .compare tbody { display: grid; gap: 12px; }
  .compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; box-shadow: var(--sh-1); }
  .compare tbody tr + tr td, .compare tbody tr + tr th { border-top: 0; }
  .compare tbody th[scope=row] { grid-column: 1 / -1; width: auto; padding: 14px 16px 10px; font-weight: 600; border-bottom: 1px solid var(--line); }
  .compare td { padding: 10px 16px 12px; font-size: 14.5px; }
  .compare td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
  .compare td.cc { box-shadow: none; }
  .compare .cost td, .compare .cost th { font-size: 15.5px; }
}