:root{
  --blue:#0342E5; --blue-d:#0233B8; --blue-l:#1A8CFF; --green:#01BE68; --navy:#061B40; --ink:#0B1B3A;
  --muted:#5B6B86; --line:#E3EAF5; --bg:#F7FAFF; --card:#fff; --r:22px;
  --shadow:0 1px 2px rgba(6,27,64,.05),0 12px 32px -12px rgba(6,27,64,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1160px,100% - 32px);margin-inline:auto}
section{scroll-margin-top:90px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:999px;font-weight:600;font-size:.98rem;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px -8px rgba(3,66,229,.6)}
.btn-primary:hover{background:var(--blue-d)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:#c9d6ec}
.btn-light{background:#fff;color:var(--blue)}
.eyebrow{display:inline-block;padding:.35rem .9rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.82rem;font-weight:600;color:var(--muted)}
h1,h2,h3{letter-spacing:-.025em;line-height:1.1}
h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:750;font-weight:700}
.sec-head{text-align:center;max-width:680px;margin:0 auto 3rem}
.sec-head p{color:var(--muted);margin-top:1rem;font-size:1.08rem}
.sec-head .eyebrow{margin-bottom:1.1rem}

/* nav */
header{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:.55rem .6rem .55rem 1.3rem;box-shadow:var(--shadow)}
.nav .logo img{height:32px;width:auto}
.nav ul{display:flex;gap:2rem;list-style:none;font-weight:500;font-size:.96rem}
.nav ul a:hover{color:var(--blue)}
.nav .right{display:flex;align-items:center;gap:.4rem}
.nav .login{font-weight:600;padding:.6rem 1rem;font-size:.96rem}
.burger{display:none;background:none;border:0;width:42px;height:42px;border-radius:50%;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:5px auto;border-radius:2px;transition:.2s}
.mobile-menu{display:none}

/* hero */
.hero{padding:150px 0 70px;position:relative;
  background:
   radial-gradient(60% 55% at 12% 25%,rgba(1,190,104,.20),transparent 70%),
   radial-gradient(55% 55% at 90% 20%,rgba(26,140,255,.22),transparent 70%),
   radial-gradient(40% 40% at 55% 100%,rgba(3,66,229,.08),transparent 70%),
   linear-gradient(#F4FBFA,#fff)}
.hero .center{text-align:center;max-width:700px;margin:0 auto;position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.3rem .9rem .3rem .3rem;font-size:.85rem;font-weight:500;box-shadow:var(--shadow)}
.badge b{background:var(--blue);color:#fff;border-radius:999px;padding:.15rem .65rem;font-weight:600;font-size:.78rem}
.hero h1{font-size:clamp(2.3rem,6vw,4.1rem);font-weight:800;margin:1.4rem 0 1.2rem}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--blue),var(--blue-l) 55%,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(1.02rem,2vw,1.25rem);color:var(--muted);max-width:640px;margin:0 auto}
.chips{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:center;margin:1.6rem 0 2rem;font-weight:500;font-size:.95rem}
.chips span{display:inline-flex;align-items:center;gap:.5rem}
.chips i{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;color:var(--blue);font-size:.8rem;box-shadow:var(--shadow)}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.fine{margin-top:1rem;font-size:.86rem;color:var(--muted)}
.float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:1rem 1.1rem;font-size:.82rem;z-index:1}
.f1{left:max(0px,calc(50% - 660px));top:210px;width:250px;transform:rotate(-6deg)}
.f2{right:max(0px,calc(50% - 660px));top:200px;width:250px;transform:rotate(5deg)}
.f3{right:max(10px,calc(50% - 630px));top:390px;width:230px;transform:rotate(-3deg)}
.float h4{font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:.3rem}
.float .big{font-size:1.7rem;font-weight:750;letter-spacing:-.03em}
.up{color:var(--green);font-weight:600;font-size:.78rem}
.tag{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.72rem;font-weight:600;margin:.15rem .15rem 0 0}
.t-g{background:#E4F8EE;color:#08844A}.t-b{background:#E6EDFF;color:var(--blue)}.t-a{background:#FFF1DA;color:#A36200}.t-r{background:#FFE6E6;color:#C23434}
.mini-btn{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:.25rem .8rem;font-size:.74rem;font-weight:600;margin-top:.5rem}
.row{display:flex;align-items:center;gap:.6rem}
.dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:.95rem}
.dot.red{background:#FFE6E6;color:#C23434}
.hero-mobile-cards{display:none}

/* who */
.who{padding:34px 0 8px;text-align:center}
.who p{color:var(--muted);font-weight:500;margin-bottom:1.1rem}
.pills{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.pills span{padding:.55rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:.93rem;color:var(--navy)}

/* features */
.features{padding:90px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;transition:transform .2s,box-shadow .2s,background .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);background:#fff}
.card .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--blue-l),var(--blue));font-size:1.3rem;box-shadow:0 8px 18px -8px rgba(3,66,229,.6)}
.card:nth-child(3n+2) .ic{background:linear-gradient(135deg,#27E08B,var(--green));box-shadow:0 8px 18px -8px rgba(1,190,104,.6)}
.card h3{font-size:1.22rem;font-weight:700;margin-top:.3rem}
.card p{color:var(--muted);font-size:.98rem}

/* steps */
.steps{padding:30px 0 90px}
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{position:relative;padding:1.8rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:"0" counter(s);font-weight:800;font-size:2.6rem;letter-spacing:-.04em;background:linear-gradient(135deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:1.25rem;margin:.4rem 0 .5rem}
.step p{color:var(--muted)}

/* showcase */
.show{background:var(--navy);color:#fff;padding:90px 0;position:relative;overflow:hidden}
.show::before{content:"";position:absolute;width:700px;height:700px;right:-200px;top:-250px;background:radial-gradient(circle,rgba(26,140,255,.35),transparent 65%)}
.show::after{content:"";position:absolute;width:600px;height:600px;left:-220px;bottom:-300px;background:radial-gradient(circle,rgba(1,190,104,.25),transparent 65%)}
.show .wrap{position:relative;z-index:1}
.show .sec-head p{color:#B7C4DE}
.show .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#CFE0FF}
.panel{background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:0 30px 70px -20px rgba(0,0,0,.5);overflow:hidden}
.panel .bar{display:flex;align-items:center;gap:.4rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:#FBFCFF}
.panel .bar i{width:10px;height:10px;border-radius:50%;background:#dfe6f3}
.panel .bar span{margin-left:.6rem;font-size:.8rem;color:var(--muted);font-weight:500}
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
th{text-align:left;padding:.8rem 1.1rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
td{padding:.85rem 1.1rem;border-bottom:1px solid #EEF2F9;white-space:nowrap}
tr:last-child td{border-bottom:0}
.who-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#E6EDFF;color:var(--blue);font-weight:700;font-size:.75rem;margin-right:.5rem;vertical-align:middle}
.pl{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-size:.7rem}
.note{margin-top:1rem;text-align:center;color:#8EA0C2;font-size:.82rem}
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.mini3 div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1.3rem}
.mini3 h3{font-size:1.05rem;margin-bottom:.4rem}
.mini3 p{color:#B7C4DE;font-size:.94rem}

/* pricing */
.pricing{padding:90px 0}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;background:#fff;display:flex;flex-direction:column;gap:1rem;position:relative}
.plan.pop{background:linear-gradient(180deg,#F1F6FF,#fff);border-color:#B9CDFA;box-shadow:var(--shadow)}
.plan .pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:.74rem;font-weight:700;padding:.3rem .9rem;border-radius:999px}
.plan h3{font-size:1.15rem}
.price{font-size:2.8rem;font-weight:800;letter-spacing:-.04em}
.price small{font-size:1rem;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;display:grid;gap:.65rem;color:var(--muted);font-size:.97rem;flex:1}
.plan li{display:flex;gap:.6rem}
.plan li::before{content:"✓";color:var(--green);font-weight:800}
.plan li b{color:var(--ink)}
.pnote{text-align:center;color:var(--muted);margin-top:1.5rem;font-size:.92rem}

/* faq */
.faq{padding:30px 0 90px}
.faqlist{max-width:780px;margin:0 auto;display:grid;gap:12px}
details{border:1px solid var(--line);border-radius:18px;background:#fff;padding:1.1rem 1.3rem}
details[open]{background:var(--bg)}
summary{cursor:pointer;font-weight:600;font-size:1.04rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;color:var(--blue);line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:.8rem}

/* cta */
.ctaband{padding:0 0 90px}
.band{border-radius:32px;padding:clamp(2rem,6vw,4.2rem) 1.5rem;text-align:center;color:#fff;background:radial-gradient(60% 90% at 90% 0,rgba(1,190,104,.55),transparent 60%),linear-gradient(135deg,var(--blue-l),var(--blue) 55%,#0229A8)}
.band h2{max-width:720px;margin:0 auto 1rem}
.band p{max-width:560px;margin:0 auto 1.8rem;opacity:.9;font-size:1.1rem}
.band .cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}

footer{border-top:1px solid var(--line);padding:50px 0 30px;background:var(--bg)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.fgrid img{height:32px;width:auto;margin-bottom:1rem}
.fgrid p{color:var(--muted);max-width:320px;font-size:.95rem}
.fgrid h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.9rem}
.fgrid a{display:block;margin-bottom:.55rem;font-size:.95rem}
.fgrid a:hover{color:var(--blue)}
.copy{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* responsive */
@media (max-width:1380px){.f1,.f2,.f3{display:none}.hero-mobile-cards{display:grid}}
@media (max-width:980px){
  .nav ul,.nav .login,.nav .right .btn{display:none}
  .burger{display:block}
  .mobile-menu{position:absolute;left:16px;right:16px;top:74px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:1rem;box-shadow:var(--shadow);display:none;flex-direction:column;gap:.2rem}
  .mobile-menu.open{display:flex}
  .mobile-menu a{padding:.85rem 1rem;border-radius:12px;font-weight:600}
  .mobile-menu a:hover{background:var(--bg)}
  .mobile-menu .btn{margin-top:.4rem;color:#fff}
  .grid3,.stepgrid,.plans,.mini3{grid-template-columns:1fr 1fr}
  .plans .plan:last-child{grid-column:1/-1}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero{padding:120px 0 50px}
  .grid3,.stepgrid,.plans,.mini3{grid-template-columns:1fr}
  .plans .plan:last-child{grid-column:auto}
  .features,.pricing,.show{padding:64px 0}
  .btn{width:100%}
  .cta{flex-direction:column;align-items:stretch;padding:0 4px}
  .sec-head{margin-bottom:2rem}
  .fgrid{grid-template-columns:1fr}
  .copy{flex-direction:column}
}
.hero-mobile-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:2.4rem auto 0;max-width:620px;position:relative;z-index:2}
.hero-mobile-cards .float{position:static;transform:none;width:auto}
@media (max-width:640px){.hero-mobile-cards{grid-template-columns:1fr}}

/* ===== v2 additions ===== */
.nav ul li{position:relative}
.dd>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 3px 7px}
.dd-menu{position:absolute;top:100%;left:-14px;min-width:220px;padding:.5rem;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);display:none;flex-direction:column}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:flex}
.dd-menu a{padding:.6rem .9rem;border-radius:12px;font-weight:500;font-size:.94rem}
.dd-menu a:hover{background:var(--bg);color:var(--blue)}
.mobile-menu .sub{padding-left:1.8rem;font-weight:500;color:var(--muted);font-size:.95rem}
.mobile-menu .lbl{padding:.6rem 1rem .1rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.pagehead{padding:140px 0 56px;text-align:center;background:radial-gradient(55% 80% at 10% 0,rgba(1,190,104,.16),transparent 70%),radial-gradient(55% 80% at 95% 0,rgba(26,140,255,.18),transparent 70%),linear-gradient(#F4FBFA,#fff)}
.pagehead h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;margin:1rem auto .9rem;max-width:860px}
.pagehead p{color:var(--muted);font-size:1.12rem;max-width:660px;margin:0 auto}
.pagehead .cta{margin-top:1.8rem}
.crumbs{font-size:.86rem;color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.sec{padding:70px 0}
.sec.alt{background:var(--bg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.two h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:1rem}
.two p{color:var(--muted);margin-bottom:.8rem}
.checks{list-style:none;display:grid;gap:.7rem;margin-top:1rem}
.checks li{display:flex;gap:.65rem;color:var(--ink)}
.checks li::before{content:"✓";color:#fff;background:var(--green);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:.75rem;font-weight:800;flex:none;margin-top:2px}
.vis{border-radius:var(--r);background:linear-gradient(135deg,#EAF2FF,#E7FBF1);border:1px solid var(--line);padding:2.2rem;display:grid;place-items:center;min-height:300px}
.vis svg{width:min(260px,70%);height:auto}

/* browser frame + dashboard mock */
.bf{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px -28px rgba(6,27,64,.35);overflow:hidden;text-align:left}
.bf .bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:#FBFCFF}
.bf .bar i{width:10px;height:10px;border-radius:50%;background:#dfe6f3}
.bf .bar span{margin-left:.6rem;font-size:.78rem;color:var(--muted);font-weight:500;background:#F0F4FB;border-radius:999px;padding:.15rem .8rem}
.dash{display:grid;grid-template-columns:150px 1fr;min-height:330px;font-size:.8rem}
.dash aside{border-right:1px solid var(--line);padding:.9rem .7rem;background:#FAFCFF;display:grid;gap:.2rem;align-content:start}
.dash aside b{display:block;padding:.45rem .6rem;border-radius:9px;font-weight:600;color:var(--muted)}
.dash aside b.on{background:#E6EDFF;color:var(--blue)}
.dash main{padding:1rem 1.1rem;display:grid;gap:.9rem;align-content:start}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.tile{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.tile small{color:var(--muted);font-weight:600;display:block}
.tile strong{font-size:1.35rem;letter-spacing:-.03em}
.bars{display:flex;align-items:flex-end;gap:6px;height:92px;border:1px solid var(--line);border-radius:12px;padding:.7rem}
.bars i{flex:1;background:linear-gradient(var(--blue-l),var(--blue));border-radius:5px 5px 2px 2px;display:block}
.bars i.g{background:linear-gradient(#27E08B,var(--green))}
.mrow{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem 0;border-bottom:1px solid #EEF2F9;font-size:.78rem}
.mrow:last-child{border-bottom:0}
.hero-vis{position:relative;max-width:900px;margin:3.2rem auto 0;z-index:2}
.phone{position:absolute;right:-18px;bottom:-34px;width:190px;background:#0B1B3A;border-radius:32px;padding:9px;box-shadow:0 30px 60px -20px rgba(6,27,64,.55)}
.phone .scr{background:linear-gradient(#F2F7FF,#fff);border-radius:24px;padding:1rem .8rem 1.1rem;min-height:300px;text-align:center;font-size:.78rem}
.phone .notch{width:70px;height:16px;background:#0B1B3A;border-radius:0 0 12px 12px;margin:-1rem auto .8rem}
.phone .av{width:64px;height:64px;margin:.6rem auto .6rem;border-radius:50%;background:linear-gradient(135deg,var(--blue-l),var(--blue));display:grid;place-items:center;color:#fff;font-size:1.6rem;box-shadow:0 0 0 8px rgba(3,66,229,.1),0 0 0 18px rgba(3,66,229,.06);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(3,66,229,.12),0 0 0 26px rgba(3,66,229,.04)}}
.phone .acts{display:flex;justify-content:center;gap:1.2rem;margin-top:1.1rem}
.phone .acts span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.1rem}
.phone .no{background:#E5484D}.phone .yes{background:var(--green)}
.phone small{color:var(--muted);display:block}

/* flow animation */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.flow .st{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.2rem;text-align:center;transition:.35s;position:relative}
.flow .st .n{width:46px;height:46px;border-radius:50%;margin:0 auto .7rem;display:grid;place-items:center;background:#EEF3FF;color:var(--blue);font-size:1.2rem;transition:.35s}
.flow .st h3{font-size:1rem;margin-bottom:.3rem}
.flow .st p{color:var(--muted);font-size:.86rem}
.flow .st.on{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-4px)}
.flow .st.on .n{background:var(--blue);color:#fff}
.flow .st.done .n{background:var(--green);color:#fff}
.flow .st:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:34px;color:#9fb2d6;z-index:2;font-weight:700}

/* tabs showcase */
.tabs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.tabs button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#DCE7FF;border-radius:999px;padding:.55rem 1.1rem;font:600 .92rem Inter,sans-serif;cursor:pointer}
.tabs button[aria-selected=true]{background:#fff;color:var(--blue);border-color:#fff}
.tabpane{display:none}.tabpane.on{display:block}
.det{display:grid;grid-template-columns:1.4fr 1fr;gap:0;font-size:.9rem}
.det>div{padding:1.4rem}
.det>div+div{border-left:1px solid var(--line);background:#FBFCFF}
.det h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.6rem}
.wave{display:flex;align-items:center;gap:3px;height:54px;background:#F2F6FD;border-radius:12px;padding:0 .9rem;margin:.7rem 0 1rem}
.wave i{flex:1;background:var(--blue-l);border-radius:2px;display:block;min-width:2px}
.player{display:flex;align-items:center;gap:.8rem}
.vm{background:#F2F6FD;border-radius:12px;padding:.9rem 1rem;color:var(--ink);line-height:1.5}
.bell{max-width:420px;margin:0 auto;padding:1rem}
.bell .it{display:flex;gap:.8rem;padding:.8rem;border-radius:14px;border:1px solid var(--line);margin-bottom:.7rem;align-items:center}
.bell .it .dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none}
.bell .it .dot.r{background:#FFE6E6;color:#C23434}.bell .it .dot.a{background:#FFF1DA;color:#A36200}
.bell .it small{display:block;color:var(--muted)}
.bell .it .mini-btn{margin:0 0 0 auto;white-space:nowrap}
.rep{padding:1.4rem;display:grid;gap:1rem}
.rep .tiles{grid-template-columns:repeat(4,1fr)}
.rep .bars{height:140px}

/* security + industries + cards */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sgrid .card{background:#fff}
.igrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.icard{display:block;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;background:#fff;transition:.2s}
.icard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.icard .ic{font-size:1.8rem;margin-bottom:.5rem}
.icard h3{font-size:1.1rem;margin-bottom:.35rem}
.icard p{color:var(--muted);font-size:.93rem}
.icard span{display:inline-block;margin-top:.7rem;color:var(--blue);font-weight:600;font-size:.9rem}
.story{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center;background:linear-gradient(135deg,#F1F6FF,#EAFBF3);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem}
.story .badge2{width:72px;height:72px;border-radius:20px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-weight:800;color:var(--blue);font-size:1.1rem;box-shadow:var(--shadow)}
.story p{color:var(--muted)}

/* pricing page */
.cmp{width:100%;border-collapse:collapse;min-width:620px;background:#fff}
.cmpwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.cmp th,.cmp td{padding:.95rem 1.1rem;border-bottom:1px solid #EEF2F9;text-align:center;font-size:.95rem}
.cmp th:first-child,.cmp td:first-child{text-align:left;font-weight:600}
.cmp thead th{background:var(--bg);font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink)}
.cmp tr:last-child td{border-bottom:0}
.yes{color:var(--green);font-weight:800}
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;box-shadow:var(--shadow)}
.calc label{display:block;font-weight:600;margin:.2rem 0 .4rem}
.calc input[type=range]{width:100%;accent-color:var(--blue)}
.calc .val{color:var(--blue);font-weight:700}
.calc .out{background:linear-gradient(135deg,#F1F6FF,#EAFBF3);border-radius:18px;padding:1.4rem;display:grid;align-content:center;gap:.4rem}
.calc .out .big{font-size:2.4rem;font-weight:800;letter-spacing:-.04em}

/* forms */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;box-shadow:var(--shadow)}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:grid;gap:.35rem}
.fld.full{grid-column:1/-1}
.fld label{font-weight:600;font-size:.9rem}
.fld input,.fld select,.fld textarea{font:inherit;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(3,66,229,.12)}
.pf{display:flex}.pf span{display:grid;place-items:center;padding:0 .9rem;border:1.5px solid var(--line);border-right:0;border-radius:14px 0 0 14px;background:var(--bg);font-weight:600;color:var(--muted)}
.pf input{border-radius:0 14px 14px 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{margin-top:1rem;padding:.9rem 1.1rem;border-radius:14px;font-weight:500;display:none}
.msg.ok{display:block;background:#E4F8EE;color:#08744A}.msg.err{display:block;background:#FFE6E6;color:#B42323}
.cside{display:grid;gap:14px;align-content:start}
.cbox{border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;background:#fff}
.cbox h3{font-size:1.05rem;margin-bottom:.3rem}
.cbox p,.cbox a{color:var(--muted)}
.cbox a{font-weight:600;color:var(--blue)}

/* prose (legal, blog) */
.prose{max-width:760px;margin:0 auto;padding:0 0 70px}
.prose h2{font-size:1.5rem;margin:2.2rem 0 .7rem}
.prose h3{font-size:1.15rem;margin:1.5rem 0 .4rem}
.prose p,.prose li{color:#33425e;margin-bottom:.8rem}
.prose ul,.prose ol{padding-left:1.3rem;margin-bottom:.8rem}
.prose a{color:var(--blue);font-weight:500}
.prose .upd{color:var(--muted);font-size:.9rem}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.post{display:block;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;background:#fff;transition:.2s}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post small{color:var(--muted);font-weight:600}
.post h3{font-size:1.25rem;margin:.5rem 0}
.post p{color:var(--muted)}
.hgroup{max-width:820px;margin:0 auto 2.2rem}
.hgroup h2{font-size:1.5rem;margin:2rem 0 1rem}
.faqwrap{display:grid;gap:12px}

/* whatsapp + 404 */
.wa{position:fixed;right:18px;bottom:18px;z-index:60;display:none;align-items:center;gap:.5rem;background:#25D366;color:#fff;border-radius:999px;padding:.75rem 1.1rem;font-weight:700;box-shadow:0 12px 30px -10px rgba(37,211,102,.7)}
.wa.show{display:inline-flex}
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:140px 16px 60px}
.nf h1{font-size:clamp(4rem,14vw,8rem);font-weight:800;letter-spacing:-.06em;background:linear-gradient(90deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:980px){
  .two,.two.cont,.calc,.det{grid-template-columns:1fr}
  .det>div+div{border-left:0;border-top:1px solid var(--line)}
  .flow{grid-template-columns:1fr 1fr}.flow .st::after{display:none}
  .sgrid,.igrid{grid-template-columns:1fr 1fr}
  .rep .tiles{grid-template-columns:1fr 1fr}
  .phone{right:8px;bottom:-60px;width:160px}
  .dash{grid-template-columns:1fr}.dash aside{display:none}
}
@media (max-width:640px){
  .flow,.sgrid,.igrid,.posts,.fgrid2{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .phone{position:relative;right:auto;bottom:auto;margin:1.2rem auto 0;width:210px}
  .hero-vis{margin-top:2.2rem}
  .story{grid-template-columns:1fr}
  .pagehead{padding:120px 0 40px}
  .sec{padding:48px 0}
  .calc{padding:1.2rem}
}

.checks.bad li::before{content:"✕";background:#E5484D}
.plans.two-up{grid-template-columns:repeat(2,1fr)}
.pills a span{transition:.15s}.pills a:hover span{border-color:var(--blue);color:var(--blue)}
.pagehead .crumbs{margin-bottom:.4rem}
nav [aria-current=page]{color:var(--blue)}

.two.cont{align-items:start;grid-template-columns:1.4fr 1fr}
@media (max-width:980px){.two.cont{grid-template-columns:1fr}}

@media (max-width:640px){.dash .tiles{grid-template-columns:repeat(3,1fr)}.dash .tile strong{font-size:1.1rem}.dash .tile{padding:.55rem}}

/* right-side drawer menu on phone/tablet */
.scrim{display:none}
.mm-top{display:flex;justify-content:space-between;align-items:center;padding:.2rem .6rem 1rem;margin-bottom:.4rem;border-bottom:1px solid var(--line)}
.mm-top img{height:25px;width:auto}
.mm-top button{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);font-size:1rem;cursor:pointer;color:var(--ink)}
@media (max-width:980px){
  .scrim{display:block;position:fixed;inset:0;background:rgba(6,27,64,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:70}
  .scrim.open{opacity:1;visibility:visible}
  .mobile-menu,.mobile-menu.open{display:flex;position:fixed;top:0;right:0;bottom:0;left:auto;width:min(86vw,340px);height:100dvh;border:0;border-radius:26px 0 0 26px;padding:1rem 1rem 1.4rem;overflow-y:auto;z-index:80;transform:translateX(105%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s;box-shadow:-20px 0 60px -20px rgba(6,27,64,.4)}
  .mobile-menu.open{transform:none;visibility:visible}
  .mobile-menu a{font-size:1.02rem}
  body.menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.mobile-menu,.scrim{transition:none}}