:root {
  --ink: #f7fbff;
  --muted: #9cafc8;
  --muted-2: #6f839f;
  --navy: #071220;
  --navy-2: #0d1e34;
  --surface: #10243f;
  --surface-2: #162e50;
  --line: rgba(173, 203, 243, .16);
  --blue: #2f7cff;
  --blue-2: #78aaff;
  --blue-soft: #dfeaff;
  --green: #31ca92;
  --danger: #f28080;
  --shadow: 0 24px 64px rgba(0,0,0,.27);
  --radius: 26px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--ink); background: var(--navy); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button, input, select { font: inherit; }
button { cursor:pointer; }
img { max-width:100%; }
.site-shell { overflow:hidden; }
.container { width:min(var(--max), calc(100% - 42px)); margin:0 auto; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:#bdd4ff; font-size:.76rem; letter-spacing:.13em; font-weight:780; text-transform:uppercase; }
.eyebrow i { display:block; width:8px; height:8px; background:var(--green); border-radius:999px; box-shadow:0 0 0 5px rgba(49,202,146,.12); }
.nav { position:sticky; top:0; z-index:30; background:rgba(7,18,32,.76); border-bottom:1px solid rgba(178,207,244,.1); backdrop-filter:blur(16px); }
.nav-wrap { height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; max-width:236px; }
.brand img { display:block; width:214px; height:auto; }
.nav-links { display:flex; align-items:center; gap:28px; color:#cbd9eb; font-weight:600; font-size:.94rem; }
.nav-links a { transition:color .2s ease; }
.nav-links a:hover { color:#fff; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.button { border:0; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 19px; border-radius:14px; font-weight:760; letter-spacing:-.01em; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { background:linear-gradient(135deg, var(--blue), #5e9cff); color:#fff; box-shadow:0 12px 28px rgba(47,124,255,.28); }
.button.primary:hover { box-shadow:0 16px 34px rgba(47,124,255,.4); }
.button.secondary { color:#eaf3ff; background:rgba(229,241,255,.07); border:1px solid rgba(203,221,246,.22); }
.button.secondary:hover { background:rgba(229,241,255,.12); }
.button.small { min-height:42px; padding:0 15px; border-radius:12px; font-size:.9rem; }
.button svg { width:18px; height:18px; }
.menu-button { display:none; background:none; color:#fff; border:0; padding:6px; }
.hero { position:relative; padding:88px 0 62px; background:radial-gradient(circle at 75% 0%, rgba(61,132,255,.22), transparent 34%), radial-gradient(circle at 10% 85%, rgba(20,84,167,.24), transparent 32%), var(--navy); }
.hero:after { content:""; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg, transparent, rgba(120,170,255,.3), transparent); }
.hero-grid { display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); align-items:center; gap:60px; }
.hero-copy h1 { margin:17px 0 20px; font-size:clamp(2.85rem, 5.3vw, 5.15rem); letter-spacing:-.065em; line-height:.99; max-width:760px; }
.hero-copy h1 .accent { color:#77aaff; }
.hero-copy p { color:#b5c5d9; font-size:1.13rem; line-height:1.68; max-width:635px; margin:0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; }
.cred-list { display:flex; flex-wrap:wrap; gap:10px 18px; margin:30px 0 0; color:#c7d7e9; font-size:.93rem; }
.cred-list span { display:inline-flex; align-items:center; gap:8px; }
.cred-list b { display:inline-grid; place-items:center; width:19px; height:19px; border:1px solid rgba(129,179,255,.55); color:#9fc3ff; border-radius:999px; font-size:.7rem; }
.hero-visual { position:relative; }
.hero-visual:before { content:""; position:absolute; width:82%; height:75%; right:-10%; bottom:-11%; background:radial-gradient(circle, rgba(47,124,255,.34), rgba(47,124,255,0) 67%); filter:blur(16px); z-index:0; }
.hero-visual img { position:relative; z-index:1; width:100%; filter:drop-shadow(0 35px 45px rgba(0,0,0,.34)); }
.demo-bar { position:relative; margin-top:9px; display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; min-height:78px; padding:14px 18px; border:1px solid rgba(152,190,239,.18); background:rgba(20,43,73,.64); border-radius:19px; }
.demo-bar .pulse { display:grid; place-items:center; width:36px; height:36px; border-radius:999px; background:rgba(49,202,146,.14); border:1px solid rgba(72,218,167,.44); }
.demo-bar .pulse:after { content:""; width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 7px rgba(49,202,146,.12); }
.demo-bar strong { display:block; font-size:.94rem; }
.demo-bar small { display:block; color:#9ab0c9; margin-top:1px; }
.trust-strip { background:#0c1a2c; padding:18px 0; border-bottom:1px solid rgba(185,213,250,.08); }
.trust-items { display:flex; flex-wrap:wrap; gap:12px 25px; align-items:center; justify-content:space-between; color:#aabbd0; font-size:.9rem; }
.trust-items span { display:inline-flex; gap:10px; align-items:center; }
.trust-items b { color:#e5efff; font-weight:760; }
.section { padding:104px 0; }
.section.light { background:#edf5ff; color:#0e2037; }
.section.bluefade { background:linear-gradient(180deg, #0b1b30 0%, #102a4a 100%); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:38px; }
.section-heading h2 { margin:8px 0 0; max-width:730px; font-size:clamp(2rem, 3.4vw, 3.35rem); letter-spacing:-.052em; line-height:1.05; }
.section-heading p { max-width:405px; margin:0; color:#a9bad0; font-size:1.03rem; }
.light .section-heading p { color:#59708c; }
.studio { border:1px solid rgba(180,211,248,.17); background:linear-gradient(145deg, rgba(18,40,69,.95), rgba(9,24,43,.98)); border-radius:30px; padding:28px; box-shadow:var(--shadow); }
.studio-top { display:flex; gap:24px; align-items:flex-end; justify-content:space-between; padding:0 0 24px; border-bottom:1px solid rgba(180,211,248,.14); }
.studio-top h3 { margin:5px 0 0; font-size:1.5rem; letter-spacing:-.03em; }
.studio-top p { margin:0; max-width:470px; color:#9db1c9; font-size:.96rem; }
.studio-grid { display:grid; grid-template-columns:minmax(260px,.74fr) minmax(0,1.26fr); gap:28px; padding-top:28px; }
.control-panel { display:grid; align-content:start; gap:16px; }
.control-label { display:block; color:#dfeeff; font-size:.84rem; font-weight:720; margin-bottom:8px; }
.input { width:100%; padding:13px 14px; border:1px solid rgba(171,205,247,.19); border-radius:13px; color:#f1f7ff; background:rgba(5,17,32,.55); outline:0; transition:border .15s ease, box-shadow .15s ease; }
.input::placeholder { color:#7187a2; }
.input:focus { border-color:rgba(104,165,255,.85); box-shadow:0 0 0 4px rgba(47,124,255,.13); }
.choice-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.choice { position:relative; text-align:left; min-height:57px; padding:10px 11px; color:#b8c9dd; background:rgba(8,22,39,.63); border:1px solid rgba(173,204,242,.14); border-radius:13px; font-weight:650; font-size:.9rem; transition:.16s ease; }
.choice:hover, .choice.active { color:#fff; border-color:rgba(97,157,255,.78); background:rgba(47,124,255,.16); }
.choice.active:after { content:""; width:7px; height:7px; position:absolute; top:11px; right:11px; border-radius:99px; background:#78aaff; box-shadow:0 0 0 4px rgba(120,170,255,.12); }
.template-note { margin:0; color:#87a3c3; font-size:.84rem; line-height:1.55; }
.template-note b { color:#dcecff; }
.preview { position:relative; min-height:504px; overflow:hidden; border-radius:22px; border:1px solid rgba(202,224,255,.23); background:#f6f9fd; color:#10223b; }
.preview-top { position:absolute; top:0; inset-inline:0; height:78px; padding:0 22px; background:#fff; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e4edf8; }
.preview-brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.03em; }
.preview-brand .demo-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg, var(--blue), #8eb9ff); color:#fff; font-size:.85rem; }
.preview-top .status { display:inline-flex; gap:7px; align-items:center; color:#416781; font-size:.76rem; font-weight:730; }
.status i { width:7px; height:7px; background:#31ca92; border-radius:99px; }
.preview-body { padding:126px 32px 34px; background:linear-gradient(180deg, #f7fbff, #eaf3ff); min-height:504px; }
.preview-kicker { color:#2870e7; font-weight:780; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.preview h4 { max-width:468px; margin:9px 0 12px; font-size:clamp(1.75rem, 3.1vw, 2.55rem); line-height:1.01; letter-spacing:-.055em; }
.preview p { max-width:460px; color:#5b728d; margin:0; font-size:.97rem; line-height:1.62; }
.preview-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:23px; }
.preview-button { border:0; min-height:40px; padding:0 14px; border-radius:11px; font-size:.84rem; font-weight:760; }
.preview-button.primary { background:#2f7cff; color:white; }
.preview-button.ghost { color:#24569a; background:#e4efff; }
.preview-chat { position:absolute; right:22px; bottom:20px; width:min(283px, calc(100% - 44px)); padding:15px; background:#0e2645; border:1px solid rgba(121,168,232,.38); border-radius:18px; box-shadow:0 14px 28px rgba(20,56,103,.21); color:#fff; }
.chat-head { display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.chat-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#78aaff,#2f7cff); font-size:.82rem; font-weight:800; }
.chat-head strong { display:block; font-size:.84rem; }
.chat-head span { display:block; color:#a9ccff; font-size:.69rem; margin-top:1px; }
.chat-bubble { padding:10px 11px; margin:8px 0; border-radius:11px; font-size:.78rem; line-height:1.42; }
.chat-bubble.bot { background:#183960; border-bottom-left-radius:3px; }
.chat-bubble.user { margin-left:22px; background:#2f7cff; border-bottom-right-radius:3px; }
.chat-typing { display:flex; gap:4px; padding-top:3px; }
.chat-typing i { width:5px; height:5px; border-radius:99px; background:#a7c5ee; animation:blink 1.25s infinite; }
.chat-typing i:nth-child(2){animation-delay:.16s}.chat-typing i:nth-child(3){animation-delay:.32s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.demo-link { width:100%; margin-top:2px; color:#dceaff; background:transparent; border:1px dashed rgba(145,190,255,.43); min-height:44px; border-radius:12px; font-weight:740; font-size:.85rem; }
.demo-link:hover { background:rgba(93,151,242,.1); }
.flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.flow-step { position:relative; padding:24px; min-height:232px; border-radius:22px; color:#122642; background:#fff; border:1px solid #dfe9f7; box-shadow:0 10px 25px rgba(21,53,91,.06); }
.flow-step .step-number { display:flex; align-items:center; justify-content:space-between; color:#4c6d92; font-size:.78rem; letter-spacing:.1em; font-weight:760; }
.flow-step .step-icon { display:grid; place-items:center; width:34px; height:34px; color:#fff; background:linear-gradient(145deg,#2f7cff,#77aaff); border-radius:11px; font-size:1rem; }
.flow-step h3 { margin:45px 0 8px; font-size:1.35rem; letter-spacing:-.035em; }
.flow-step p { margin:0; color:#59708c; font-size:.91rem; line-height:1.6; }
.industry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.industry-card { padding:24px; min-height:205px; border:1px solid rgba(185,214,249,.17); border-radius:22px; background:rgba(8,25,45,.52); transition:transform .18s ease, background .18s ease, border .18s ease; }
.industry-card:hover { transform:translateY(-5px); border-color:rgba(120,170,255,.66); background:rgba(24,55,97,.82); }
.industry-card .icon { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#cce1ff; background:rgba(58,126,242,.18); font-size:1.16rem; }
.industry-card h3 { margin:23px 0 8px; font-size:1.18rem; letter-spacing:-.025em; }
.industry-card p { margin:0; color:#a9bcd4; font-size:.9rem; line-height:1.56; }
.industry-card a { display:inline-flex; gap:7px; align-items:center; margin-top:20px; color:#94bdff; font-weight:760; font-size:.86rem; }
.proof-wrap { display:grid; grid-template-columns: .92fr 1.08fr; gap:58px; align-items:center; }
.proof-copy h2 { margin:10px 0 17px; font-size:clamp(2rem,3.4vw,3.55rem); letter-spacing:-.055em; line-height:1.06; }
.proof-copy p { color:#b6c7dc; max-width:520px; font-size:1.04rem; }
.proof-points { display:grid; gap:17px; margin-top:29px; }
.proof-points div { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; }
.proof-points b { display:block; margin-top:2px; }
.proof-points p { margin:5px 0 0; color:#9fb4cd; font-size:.92rem; }
.check { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#88b7ff; background:rgba(60,133,255,.14); border:1px solid rgba(111,166,255,.26); }
.metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.metric { min-height:184px; padding:23px; border-radius:22px; background:linear-gradient(145deg, #112b4b, #0d2039); border:1px solid rgba(164,201,244,.16); }
.metric:nth-child(1){grid-column:span 2; min-height:205px; background:linear-gradient(145deg, #173e74, #102a50); }
.metric .metric-top { display:flex; justify-content:space-between; align-items:center; color:#b9ceea; font-size:.8rem; font-weight:760; letter-spacing:.09em; }
.metric .metric-value { display:block; margin-top:30px; font-size:clamp(2.1rem,4.5vw,4.15rem); font-weight:830; letter-spacing:-.065em; line-height:.9; }
.metric .metric-desc { display:block; margin-top:11px; color:#abc0d8; font-size:.91rem; }
.metric .metric-badge { display:grid; place-items:center; width:33px; height:33px; border-radius:11px; color:#cbe0ff; background:rgba(117,169,255,.15); }
.calls { position:relative; overflow:hidden; padding:66px; border-radius:30px; color:#061528; background:linear-gradient(110deg,#eff6ff 0%,#e0edff 55%,#c9e0ff 100%); }
.calls:after { content:""; position:absolute; width:480px; height:480px; right:-118px; top:-240px; border:1px solid rgba(48,116,216,.16); border-radius:50%; box-shadow:0 0 0 52px rgba(48,116,216,.07), 0 0 0 104px rgba(48,116,216,.04); }
.calls > * { position:relative; z-index:1; }
.calls .eyebrow { color:#2e69bd; }
.calls h2 { max-width:710px; margin:11px 0 17px; font-size:clamp(2.15rem,4.5vw,4.25rem); letter-spacing:-.062em; line-height:1.02; }
.calls p { max-width:650px; color:#466887; font-size:1.05rem; }
.calls .button.secondary { color:#174d93; border-color:rgba(44,109,198,.28); background:rgba(255,255,255,.56); }
.footer { padding:44px 0 31px; background:#06111f; }
.footer-grid { display:grid; grid-template-columns:1.25fr .8fr .8fr; gap:38px; padding-bottom:38px; border-bottom:1px solid rgba(183,211,248,.12); }
.footer-brand img { width:220px; }
.footer-brand p { max-width:335px; color:#91a8c3; margin:16px 0 0; font-size:.93rem; line-height:1.63; }
.footer-links h4 { margin:0 0 12px; color:#d9e8fb; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; }
.footer-links a { display:block; margin:8px 0; color:#93a9c3; font-size:.92rem; }
.footer-links a:hover { color:#e7f1ff; }
.footer-bottom { display:flex; justify-content:space-between; gap:16px; padding-top:21px; color:#7186a0; font-size:.79rem; }
.modal { position:fixed; inset:0; z-index:70; display:none; place-items:center; padding:20px; background:rgba(2,10,19,.78); backdrop-filter:blur(9px); }
.modal.open { display:grid; }
.modal-card { position:relative; width:min(880px,100%); max-height:min(800px, calc(100vh - 40px)); overflow:auto; border-radius:24px; color:#10223b; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.44); }
.modal-card .modal-header { padding:25px 27px 21px; background:linear-gradient(145deg,#eff6ff,#fff); border-bottom:1px solid #e6edf7; }
.modal-card h3 { margin:0; font-size:1.58rem; letter-spacing:-.04em; }
.modal-card p { margin:7px 0 0; color:#5a708d; }
.modal-close { position:absolute; top:17px; right:17px; display:grid; place-items:center; width:39px; height:39px; border:0; border-radius:12px; color:#385879; background:#e7f0fd; font-size:1.3rem; }
.modal-body { padding:24px 27px 29px; }
.calendar-wrap { overflow:hidden; min-height:590px; border:1px solid #dce7f4; border-radius:16px; background:#fff; }
.calendar-wrap iframe { display:block; width:100%; min-height:615px; border:0; }
.toast { position:fixed; left:50%; bottom:22px; z-index:100; transform:translate(-50%, 110px); padding:12px 16px; color:#fff; background:#14325a; border:1px solid rgba(155,197,252,.35); border-radius:12px; box-shadow:0 15px 35px rgba(0,0,0,.25); font-size:.9rem; font-weight:680; opacity:0; transition:.25s ease; }
.toast.show { transform:translate(-50%,0); opacity:1; }
.privacy-note { margin-top:16px; color:#6c829e; font-size:.8rem; }
@media (max-width: 950px) {
  .nav-links { display:none; }
  .menu-button { display:block; }
  .nav.open .nav-links { display:flex; position:absolute; top:84px; left:0; right:0; padding:20px 24px; flex-direction:column; align-items:stretch; background:#0a192c; border-bottom:1px solid var(--line); }
  .nav.open .nav-links a { padding:8px 0; }
  .hero { padding-top:65px; }
  .hero-grid, .proof-wrap { grid-template-columns:1fr; gap:40px; }
  .hero-visual { max-width:650px; margin:0 auto; }
  .flow-grid { grid-template-columns:repeat(2,1fr); }
  .industry-grid { grid-template-columns:repeat(2,1fr); }
  .studio-grid { grid-template-columns:1fr; }
  .control-panel { grid-template-columns:repeat(2,1fr); align-items:end; }
  .control-panel .full { grid-column:span 2; }
  .footer-grid { grid-template-columns:1.3fr 1fr; }
}
@media (max-width: 640px) {
  .container { width:min(100% - 30px, var(--max)); }
  .nav-wrap { height:73px; }
  .brand { max-width:191px; }
  .brand img { width:186px; }
  .nav-actions .button.secondary { display:none; }
  .nav.open .nav-links { top:73px; }
  .hero { padding:51px 0 42px; }
  .hero-copy h1 { font-size:clamp(2.58rem, 12vw, 3.7rem); }
  .hero-copy p { font-size:1rem; }
  .hero-actions .button { width:100%; }
  .hero-actions .button.secondary { width:100%; }
  .demo-bar { grid-template-columns:auto 1fr; }
  .demo-bar .button { grid-column:1/-1; width:100%; }
  .section { padding:73px 0; }
  .section-heading { display:block; margin-bottom:25px; }
  .section-heading p { margin-top:15px; }
  .studio { padding:17px; border-radius:23px; }
  .studio-top { display:block; }
  .studio-top p { margin-top:9px; }
  .studio-grid { padding-top:19px; gap:19px; }
  .control-panel { display:grid; grid-template-columns:1fr; }
  .control-panel .full { grid-column:auto; }
  .choice-list { grid-template-columns:1fr 1fr; }
  .preview { min-height:530px; }
  .preview-top { padding:0 15px; }
  .preview-body { padding:113px 19px 23px; }
  .preview h4 { font-size:2rem; }
  .preview-chat { right:12px; bottom:12px; width:calc(100% - 24px); }
  .flow-grid, .industry-grid, .metrics { grid-template-columns:1fr; }
  .flow-step { min-height:184px; }
  .metric:nth-child(1){grid-column:auto; }
  .calls { padding:38px 24px; }
  .footer-grid { grid-template-columns:1fr; gap:26px; }
  .footer-bottom { flex-direction:column; }
  .calendar-wrap, .calendar-wrap iframe { min-height:620px; }
  .modal { padding:10px; }
  .modal-card .modal-header, .modal-body { padding:20px; }
}