/* Dialnium AI Quote - public website (software landing page). Brand colour comes from Admin > Settings (--brand). */
:root{--brand:#0b5fff;--brand-d:#073a9e;--soft:#eef3ff;--acc:#f57c00;--ink:#0f1b33;--mut:#5b6b85;--bg:#f5f8fd;--line:#e1e8f5;--r:18px;
--sh:0 1px 2px #0b2a6b0d,0 10px 28px #0b2a6b12;--sh2:0 2px 4px #0b2a6b10,0 22px 48px #0b2a6b26}
@supports (color:color-mix(in srgb,red,blue)){:root{--brand-d:color-mix(in srgb,var(--brand) 50%,#000);--soft:color-mix(in srgb,var(--brand) 8%,#fff)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--brand)}img{max-width:100%;height:auto}.w{max-width:1160px;margin:auto;padding:0 22px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-4px}
h1,h2,h3{letter-spacing:-.02em}

/* ---------- Header ---------- */
.hd{position:sticky;top:0;z-index:30;background:#ffffffe6;backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.hd.sc{border-color:var(--line);box-shadow:0 6px 24px #0b2a6b0f}
.hd-in{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;font-size:21px;margin-right:auto}
.brand img{height:44px;width:auto;max-width:250px;object-fit:contain;display:block}
.nv{display:flex;align-items:center;gap:4px}
.nv a{padding:9px 15px;border-radius:10px;text-decoration:none;color:#33425e;font-weight:600;font-size:15px;transition:background .15s,color .15s}
.nv a:hover{background:var(--soft);color:var(--brand)}.nv a.on{color:var(--brand);background:var(--soft)}
.nv .nv-cta{margin-left:8px;background:var(--acc);color:#fff;box-shadow:0 8px 18px #f57c0040}.nv .nv-cta:hover{background:#e06f00;color:#fff;transform:translateY(-1px)}
.bg{display:none;width:44px;height:44px;border:0;background:var(--soft);border-radius:12px;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.bg span{width:20px;height:2.5px;border-radius:2px;background:var(--brand);transition:transform .2s,opacity .2s}
.bg.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.bg.on span:nth-child(2){opacity:0}.bg.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding:70px 0;
background:radial-gradient(760px 380px at 90% -10%,#f57c0055,transparent 62%),radial-gradient(620px 340px at -6% 112%,#0000004d,transparent 60%),linear-gradient(135deg,var(--brand-d),var(--brand))}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#ffffff26 1.2px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:linear-gradient(115deg,transparent 40%,#000);mask-image:linear-gradient(115deg,transparent 40%,#000)}
.hero .w{position:relative;z-index:1}.hero.big{padding:76px 0 120px}
.hero h1{margin:0 0 16px;font-size:clamp(30px,4vw,46px);line-height:1.1;font-weight:800;max-width:780px}
.hero .lead{margin:0;font-size:clamp(16px,2vw,19px);opacity:.93;max-width:620px}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:30px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;padding:7px 15px;border-radius:99px;background:#ffffff1f;border:1px solid #ffffff40;font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#7dffb2;box-shadow:0 0 0 4px #7dffb233}
.btns{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.b1,.b2,.b3{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:13px;font:inherit;font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.b1{background:#fff;color:var(--brand);box-shadow:0 10px 24px #00000026}.b1:hover{transform:translateY(-2px);box-shadow:0 14px 30px #0000003a}
.b2{border:2px solid #ffffffaa;color:#fff;padding:12px 24px}.b2:hover{background:#ffffff1f;transform:translateY(-2px)}
.b3{background:var(--soft);color:var(--brand);padding:12px 20px;margin-top:6px}.b3:hover{background:var(--brand);color:#fff}
.form .b1,.sec .b1{background:var(--brand);color:#fff;box-shadow:0 10px 22px #0b2a6b33}
.aud{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.aud span{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:12px;background:#ffffff1a;border:1px solid #ffffff38;font-weight:600;font-size:14px}
.aud .ic{width:19px;height:19px}

/* phones */
.phone{background:#0e1626;padding:7px;border-radius:30px;box-shadow:0 2px 4px #0b2a6b30,0 26px 50px #0b2a6b40;position:relative}
.phone img{display:block;width:100%;border-radius:24px;background:#fff}
.stage{position:relative;height:520px;width:100%}
.stage .phone{position:absolute;width:252px}
.stage .p1{left:2%;top:34px;transform:rotate(-4deg);z-index:1}.stage .p2{right:2%;top:0;transform:rotate(3deg);z-index:2}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;background:#fff;color:var(--ink);padding:11px 16px 11px 12px;border-radius:15px;box-shadow:0 14px 34px #00000040;font-size:12.5px;line-height:1.35;animation:fl 5s ease-in-out infinite}
.chip i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e6f7ec;color:#14883f}.chip i .ic{width:18px;height:18px}
.chip b{display:block;font-size:13.5px;color:var(--ink)}.chip span{color:var(--mut)}
.chip.c1{left:-6%;bottom:60px}.chip.c2{right:-2%;bottom:20px;animation-delay:1.2s}.chip.c2 i{background:#eaf1ff;color:var(--brand)}
.chip.c3{left:34%;top:-6px;animation-delay:2.4s}.chip.c3 i{background:#fff1df;color:var(--acc)}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* stats strip */
.stats{position:relative;z-index:2;margin-top:-62px;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh2);padding:6px}
.stats div{padding:20px 22px;border-right:1px solid var(--line)}.stats div:last-child{border:0}
.stats b{display:block;font-size:28px;line-height:1.15;letter-spacing:-.02em;background:linear-gradient(135deg,var(--brand),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{color:var(--mut);font-size:14px}

/* ---------- Sections ---------- */
.sec{padding:72px 0 80px}main.w.sec{padding:56px 22px 80px}
.head{text-align:center;max-width:760px;margin:0 auto 38px}
.kick{display:inline-block;margin-bottom:10px;font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.head h2,.show-tx h2{margin:0 0 12px;font-size:clamp(25px,3.4vw,38px);line-height:1.15;font-weight:800}
.intro{max-width:780px;font-size:17.5px;color:#34435f}.intro p{margin:0 0 16px}.intro.c{margin:auto;text-align:center}.intro.wide{font-size:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}.head+.grid3{margin-top:0}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--sh);transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:#cdd9f0}
.card h3{margin:14px 0 6px;font-size:19px;line-height:1.3}.card p{margin:0;color:var(--mut);font-size:15.5px}
.icb{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;box-shadow:0 10px 20px #0b2a6b33}.icb .ic{width:24px;height:24px}
.band{background:var(--bg);padding:72px 0;margin:72px 0;border-block:1px solid var(--line)}.band.alt{background:linear-gradient(180deg,#fff,var(--soft))}
.sec>.w:first-child{margin-top:0}
.tg{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:99px;background:#fff1df;color:#c25f00}
.way{position:relative}.way .tg{position:absolute;right:20px;top:22px}.way.dk{background:linear-gradient(160deg,var(--brand-d),var(--brand));border:0;color:#fff}.way.dk p{color:#dbe6ff}.way.dk .icb{background:#ffffff26;box-shadow:none}.way.dk .tg{background:#fff;color:var(--brand)}

/* showcase rows */
.show{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;margin:0 0 84px}.show.rev{grid-template-columns:1.15fr .85fr}.show.rev .show-img{order:2}
.show-img{display:flex;justify-content:center;position:relative}.show-img::before{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,var(--soft),transparent);z-index:0}
.show-img .phone{width:min(290px,100%);position:relative;z-index:1}
.show-tx p{color:#42516c;font-size:17px;margin:0 0 16px}
.tk{list-style:none;padding:0;margin:0 0 16px}.tk li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:16px}
.tk .ic{width:22px;height:22px;padding:4px;border-radius:50%;background:#e6f7ec;color:#14883f;stroke-width:2.6;margin-top:2px}
.cmd{position:relative;z-index:1;width:100%;max-width:440px;background:#0e1626;border-radius:20px;padding:0 0 20px;box-shadow:var(--sh2);color:#e8eefc;overflow:hidden}
.cmd-h{display:flex;align-items:center;gap:7px;padding:14px 18px;background:#162036}.cmd-h span{width:11px;height:11px;border-radius:50%;background:#ff5f57}.cmd-h span:nth-child(2){background:#febc2e}.cmd-h span:nth-child(3){background:#28c840}.cmd-h b{margin-left:10px;font-size:12.5px;color:#9fb2d8;font-weight:600}
.cmd pre{margin:0;padding:22px 22px 8px;font:600 15.5px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfe0ff;white-space:pre-wrap}
.cmd-ar{display:grid;place-items:center;color:var(--acc);padding:4px 0}.cmd-ar .ic{width:26px;height:26px}
.cmd-r{margin:0 18px;display:flex;gap:12px;align-items:center;background:#fff;color:var(--ink);padding:13px 15px;border-radius:14px;font-size:13px;line-height:1.35}
.cmd-r i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e6f7ec;color:#14883f;flex:none}.cmd-r b{display:block;font-size:14px}.cmd-r span{color:var(--mut)}

/* steps */
.steps4{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0;margin:0;counter-reset:s;position:relative}
.steps4 li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;box-shadow:var(--sh)}
.steps4 li b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#ffa23a);color:#fff;font-size:18px;box-shadow:0 8px 18px #f57c0040}
.steps4 li:nth-child(3) b{background:linear-gradient(135deg,var(--brand),var(--brand-d))}
.steps4 h3{margin:14px 0 4px;font-size:17.5px}.steps4 p{margin:0;color:var(--mut);font-size:15px}

/* comparison */
.cmp{border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--sh);max-width:900px;margin:0 auto 84px;background:#fff}
.cr{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:14px;padding:15px 22px;border-top:1px solid var(--line);align-items:center;font-size:15.5px}
.cr:first-child{border:0}.cr b{font-weight:700}.cr span{color:var(--mut)}.cr .y{color:#146a37;font-weight:700;background:#e9f7ee;padding:7px 13px;border-radius:10px}
.cr.ch{background:var(--ink);color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase}.cr.ch span{color:#a9b6d3}.cr.ch .y{background:var(--acc);color:#fff}

/* who + options */
.who{text-align:center}.who .icb{margin:auto}
.opt .card{display:flex;flex-direction:column;gap:6px;position:relative}.opt .card h3{margin:8px 0 2px}.opt .card p{font-size:15px}.opt p b{color:var(--ink)}
.opt .url{font:700 14px ui-monospace,Menlo,Consolas,monospace;background:var(--soft);color:var(--brand);padding:9px 13px;border-radius:10px;margin:6px 0 8px}
.opt .hl{background:linear-gradient(165deg,var(--brand-d),var(--brand));color:#fff;border:0;transform:translateY(-8px)}.opt .hl:hover{transform:translateY(-12px)}.opt .hl p,.opt .hl p b{color:#e3ebff}.opt .hl .url{background:#ffffff22;color:#fff}.opt .hl .tg{background:#fff;color:var(--brand);align-self:flex-start}
.opt .tg{align-self:flex-start}
.cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:64px 0 10px;padding:42px 44px;border-radius:26px;color:#fff;position:relative;overflow:hidden;
background:radial-gradient(420px 220px at 95% 0,#f57c0066,transparent 65%),linear-gradient(135deg,var(--brand-d),var(--brand))}
.cta h2{margin:0 0 8px;font-size:clamp(23px,3vw,32px);line-height:1.15}.cta p{margin:0;opacity:.9;max-width:560px}.cta .btns{margin:0;flex:none}
main.w .cta{margin-top:54px}

/* features page */
.fl{margin-top:34px}.fl .card{padding:24px}.fl .icb{width:44px;height:44px;border-radius:12px}.fl .icb .ic{width:22px;height:22px}.fl h3{font-size:17.5px}
.shots{display:flex;gap:26px;justify-content:center;margin:60px 0 10px;flex-wrap:wrap}.shots .phone{width:230px}.shots .phone:nth-child(2){transform:translateY(-22px)}

/* why */
.tick{display:flex;gap:16px;align-items:flex-start;padding:20px 22px}
.tick span{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}.tick span .ic{width:17px;height:17px;stroke-width:2.8}
.tick p{color:var(--ink);font-size:16.5px}

/* contact */
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.cl{list-style:none;padding:0;margin:28px 0 0}.cl li{padding:14px 0;border-bottom:1px solid #edf0f7}.cl a{font-weight:600;text-decoration:none}.cl a:hover{text-decoration:underline}
.cl b{display:block;font-size:12px;text-transform:uppercase;color:var(--mut);letter-spacing:.07em;margin-bottom:2px}
.form{display:flex;flex-direction:column;gap:13px;padding:30px;box-shadow:var(--sh2)}.form:hover{transform:none}.form h3{margin:0 0 4px;font-size:21px}
.form input,.form textarea{width:100%;padding:14px 15px;border:1px solid #d6dcea;border-radius:12px;font:inherit;background:#fbfcff;transition:border-color .15s,box-shadow .15s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px var(--soft)}
.form .b1{width:100%;justify-content:center}.hp{position:absolute;left:-9999px}
.ok{background:#e8f8ee;color:#12663a;padding:16px;border-radius:12px;font-weight:600}.er{background:#fdecec;color:#a02027;padding:13px;border-radius:12px;font-size:14px}

/* footer */
.ft-bar{background:linear-gradient(180deg,#0d1a33,#08112a);color:#b8c4dc;padding:56px 0 0}
.ft-in{display:grid;grid-template-columns:1.7fr 1fr 1.1fr 1.3fr;gap:34px}
.ft-bar b{display:block;color:#fff;font-size:15px;margin-bottom:6px}.ft-bar p{margin:6px 0;font-size:14.5px}
.ft-bar a{display:block;color:#b8c4dc;text-decoration:none;font-size:14.5px;padding:3px 0;transition:color .15s,transform .15s}.ft-bar a:hover{color:#fff;transform:translateX(3px)}
.cp{margin-top:38px;padding:18px;text-align:center;border-top:1px solid #ffffff1a;font-size:13px;color:#8e9bb8}

/* chat button + window */
.fab{position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--acc),#ff9d2e);box-shadow:0 12px 30px #f57c0066;cursor:pointer;display:grid;place-items:center;z-index:40;transition:transform .2s}
.fab:hover{transform:scale(1.08)}.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}
.teaser{position:fixed;right:96px;bottom:34px;z-index:40;opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .3s,transform .3s}.teaser.on{opacity:1;transform:none;pointer-events:auto}
.teaser button{border:0;background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:14px;padding:11px 18px;border-radius:99px;box-shadow:0 10px 30px #0b2a6b33;cursor:pointer}
.cw{position:fixed;right:22px;bottom:100px;width:395px;height:min(640px,calc(100vh - 128px));background:#fff;border-radius:20px;box-shadow:0 22px 70px #0b2a6b55;overflow:hidden;z-index:50;display:none}
.cw.on{display:block;animation:up .28s ease}@keyframes up{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.cw iframe{width:100%;height:100%;border:0;display:block}
.cx{position:absolute;top:13px;right:13px;z-index:2;background:#ffffff2e;border:0;color:#fff;width:32px;height:32px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1;transition:background .15s}.cx:hover{background:#ffffff55}
body.chat-on .fab,body.chat-on .teaser{opacity:0;pointer-events:none}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}.rv.in{opacity:1;transform:none}
.card.rv.in:hover{transform:translateY(-4px)}.opt .hl.rv.in{transform:translateY(-8px)}.shots .phone.rv.in:nth-child(2){transform:translateY(-22px)}

/* responsive */
@media(max-width:1020px){.hero-in{grid-template-columns:1fr}.stage{height:470px;max-width:480px;margin:10px auto 0}.hero.big{padding:60px 0 110px}
 .grid3{grid-template-columns:repeat(2,1fr)}.ft-in{grid-template-columns:1fr 1fr}.show,.show.rev{grid-template-columns:1fr;gap:34px;margin-bottom:64px}.show.rev .show-img{order:0}
 .steps4{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.stats div:nth-child(2){border-right:0}.stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:820px){.bg{display:flex}.hd-in{height:64px}.brand img{height:38px}
 .nv{position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 18px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px #0b2a6b1a;display:none}.nv.on{display:flex}
 .nv a{padding:13px 14px;font-size:16px}.nv .nv-cta{margin:8px 0 0;text-align:center}}
@media(max-width:700px){
 .grid3,.two,.grid2,.ft-in,.steps4{grid-template-columns:1fr}.two{gap:28px}.hero{padding:46px 0}.hero.big{padding:44px 0 96px}
 .btns .b1,.btns .b2{flex:1;justify-content:center;text-align:center}.aud span{font-size:13px}
 .stage{height:430px}.stage .phone{width:200px}.chip{font-size:11.5px;padding:9px 12px 9px 10px}.chip.c1{left:-2%;bottom:44px}.chip.c2{right:0;bottom:6px}.chip.c3{left:24%}
 .stats{margin-top:-52px;border-radius:18px}.stats div{padding:15px 16px}.stats b{font-size:23px}.stats span{font-size:12.5px}
 .sec{padding:48px 0 56px}main.w.sec{padding:40px 20px 56px}.band{padding:52px 0;margin:52px 0}
 .cr{grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px 16px}.cr b{grid-column:1/-1;font-size:14.5px}.cr.ch{display:none}.cr span:nth-of-type(1)::before{content:"Before: ";font-weight:700}
 .cta{flex-direction:column;align-items:flex-start;padding:30px 24px}.cta .btns{width:100%}.opt .hl{transform:none}
 .shots .phone{width:170px}.shots .phone:nth-child(2){transform:none}.form{padding:22px}
 .teaser{display:none}.cw{right:0;left:0;bottom:0;width:100%;height:100%;border-radius:0}.fab{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}