/* ===== Kommo Maroc — Département Commercial IA · shared design system ===== */
:root{
  --bg:#08060F; --bg2:#0D0A1C; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.07);
  --glass-bd:rgba(255,255,255,.12); --ink:#F4F2FB; --ink-soft:#A99FCE; --ink-faint:#7B7299;
  --violet:#7C5CFF; --violet-2:#A287FF; --indigo:#5B3DF5; --magenta:#B14BFF;
  --yellow:#FFD23B; --green:#34E0A1; --red:#FF6B70;
  --maxw:1240px; --ease:cubic-bezier(.16,1,.3,1); --glow:0 0 60px -10px rgba(124,92,255,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.disp{font-family:'Sora',sans-serif;letter-spacing:-.025em;line-height:1.04}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sec-pad{padding:100px 0}
@media(max-width:760px){.sec-pad{padding:64px 0}}
.muted{color:var(--ink-soft)}

/* background fx */
.bg-fx{position:fixed;inset:0;z-index:-3;background:
  radial-gradient(1200px 700px at 80% -5%,rgba(124,92,255,.30),transparent 55%),
  radial-gradient(900px 600px at 5% 15%,rgba(177,75,255,.18),transparent 55%),
  radial-gradient(800px 600px at 50% 110%,rgba(91,61,245,.22),transparent 55%),var(--bg)}
.aurora{position:fixed;inset:-20% -10% auto -10%;height:80vh;z-index:-2;filter:blur(70px);opacity:.6;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.aurora .a1{width:46vw;height:46vw;background:#6B43FF;top:-6vw;left:6vw;animation:dr1 20s var(--ease) infinite alternate}
.aurora .a2{width:38vw;height:38vw;background:#B14BFF;top:2vw;right:4vw;animation:dr2 24s var(--ease) infinite alternate}
.aurora .a3{width:30vw;height:30vw;background:#3D7BFF;top:18vw;left:40vw;opacity:.7;animation:dr3 18s var(--ease) infinite alternate}
@keyframes dr1{to{transform:translate3d(8vw,6vw,0) scale(1.15)}}
@keyframes dr2{to{transform:translate3d(-7vw,4vw,0) scale(1.1)}}
@keyframes dr3{to{transform:translate3d(4vw,-5vw,0) scale(1.2)}}
.grid-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;mask:radial-gradient(circle at 50% 30%,#000,transparent 75%);-webkit-mask:radial-gradient(circle at 50% 30%,#000,transparent 75%)}

/* shared bits */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--violet-2);background:rgba(124,92,255,.10);border:1px solid rgba(124,92,255,.25);padding:7px 15px;border-radius:100px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px 2px rgba(52,224,161,.8);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.grad-txt{background:linear-gradient(100deg,#A287FF,#B14BFF 40%,#FFD23B);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:16px;padding:15px 27px;border-radius:100px;border:none;cursor:pointer;font-family:'Plus Jakarta Sans';transition:transform .25s var(--ease),box-shadow .25s var(--ease);will-change:transform}
.btn-primary{background:linear-gradient(100deg,#7C5CFF,#5B3DF5);color:#fff;box-shadow:0 10px 30px -8px rgba(124,92,255,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -10px rgba(124,92,255,.85)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--glass-bd);backdrop-filter:blur(8px)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--violet);color:var(--violet-2)}
.btn-lg{padding:18px 34px;font-size:17px}
.btn-block{width:100%}
.shine-bd{position:relative}
.shine-bd::before{content:"";position:absolute;inset:0;border-radius:100px;padding:1px;background:linear-gradient(120deg,rgba(255,255,255,.7),transparent 40%,transparent 60%,rgba(255,210,59,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;pointer-events:none}

/* nav */
header{position:sticky;top:0;z-index:60;backdrop-filter:saturate(160%) blur(16px);background:rgba(8,6,15,.6);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:38px;width:auto;display:block;background:#fff;padding:6px 13px;border-radius:12px;box-shadow:0 8px 24px -10px rgba(124,92,255,.5)}
.foot .logo img{height:34px}
.nav-links{display:flex;gap:30px;align-items:center;font-size:15px;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover{color:#fff}
@media(max-width:900px){.nav-links{display:none}}

/* reveal + heads */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.sec-head{max-width:760px;margin:0 auto 56px;text-align:center}
.sec-head h2{font-size:clamp(30px,3.8vw,48px);font-weight:800;margin:16px 0 14px}
.sec-head p{font-size:18px;color:var(--ink-soft)}

/* glass + spotlight */
.glass{position:relative;background:var(--surface);border:1px solid var(--glass-bd);border-radius:24px;overflow:hidden;transition:transform .4s var(--ease),border-color .3s}
.glass::after{content:"";position:absolute;inset:0;border-radius:24px;opacity:0;transition:opacity .3s;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(124,92,255,.18),transparent 60%)}
.glass:hover{transform:translateY(-5px);border-color:rgba(124,92,255,.5)}
.glass:hover::after{opacity:1}

/* hero */
.hero{padding:64px 0 50px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(40px,5.6vw,72px);font-weight:800;margin:22px 0 18px}
.hero p.lead{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:38ch;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.trust-row{display:flex;gap:24px;margin-top:36px;flex-wrap:wrap;align-items:center}
.trust-row .num{font-family:'Sora';font-weight:800;font-size:27px}
.trust-row .lbl{font-size:13px;color:var(--ink-faint)}
.trust-sep{width:1px;height:38px;background:rgba(255,255,255,.12)}
#canvas-wrap{position:relative;aspect-ratio:1/1;max-width:540px;margin:0 auto;width:100%}
#three-canvas{width:100%;height:100%;display:block}
.canvas-fallback{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#A287FF,#5B3DF5 45%,#2A1C6B);filter:blur(6px);opacity:0;transition:opacity .6s}
.float-card{position:absolute;background:rgba(20,16,38,.7);border:1px solid var(--glass-bd);border-radius:15px;padding:11px 15px;box-shadow:0 16px 40px -16px rgba(0,0,0,.7);backdrop-filter:blur(10px);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.float-card .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.fc1{top:6%;left:-3%;animation:bob 5s var(--ease) infinite alternate}
.fc2{bottom:16%;right:-5%;animation:bob 6s var(--ease) infinite alternate-reverse}
.fc3{bottom:0;left:10%;animation:bob 7s var(--ease) infinite alternate}
@keyframes bob{to{transform:translateY(-14px)}}
@media(max-width:960px){.float-card{display:none}#canvas-wrap{max-width:330px;margin-top:20px}}
.ic-v{background:rgba(124,92,255,.18);color:var(--violet-2)}
.ic-y{background:rgba(255,210,59,.16);color:var(--yellow)}
.ic-g{background:rgba(52,224,161,.16);color:var(--green)}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);padding:18px 0;mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:48px;white-space:nowrap;animation:scroll 28s linear infinite;width:max-content}
.marquee span{font-family:'Sora';font-weight:600;font-size:16px;color:var(--ink-faint);display:flex;align-items:center;gap:12px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* problem calc */
.calc{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;max-width:920px;margin:0 auto}
@media(max-width:760px){.calc{grid-template-columns:1fr}}
.calc-rows{display:flex;flex-direction:column;gap:13px}
.calc-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--glass-bd);border-radius:15px;padding:16px 20px}
.calc-row .v{font-family:'Sora';font-weight:700;font-size:20px}
.calc-row.loss{background:rgba(255,107,112,.12);border-color:rgba(255,107,112,.4)}
.calc-row.loss .v{color:#FF9DA0}
.calc-big{text-align:center}
.calc-big .n{font-family:'Sora';font-weight:800;font-size:clamp(50px,8vw,86px);color:#FF8B8F;line-height:1;text-shadow:0 0 40px rgba(255,107,112,.35)}
.calc-big .sub{color:var(--ink-soft);margin-top:8px}

/* bento agents */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.cell{padding:30px;display:block;color:inherit}
a.cell{cursor:pointer}
.cell .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px}
.cell h3{font-size:21px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.cell h3 .arr{margin-left:auto;color:var(--ink-faint);transition:transform .3s,color .3s}
a.cell:hover h3 .arr{transform:translateX(4px);color:var(--violet-2)}
.cell p{color:var(--ink-soft);font-size:15px}
.cell .tag{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--violet-2);background:rgba(124,92,255,.12);padding:5px 12px;border-radius:100px}
.span3{grid-column:span 3}.span2{grid-column:span 2}.span6{grid-column:span 6}
.cell.hero-cell{background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(91,61,245,.10))}
.flow-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.flow-step{display:flex;gap:8px;font-weight:600;font-size:14px;background:rgba(255,255,255,.06);padding:9px 15px;border-radius:100px;border:1px solid var(--glass-bd)}
.flow-step span{color:var(--violet-2)}
.flow-arrow{color:var(--ink-faint)}
@media(max-width:900px){.bento{grid-template-columns:1fr}.span3,.span2,.span6{grid-column:span 1}}

/* offer stack */
.offer-card{max-width:760px;margin:0 auto;border-radius:30px}
.offer-top{background:linear-gradient(120deg,#7C5CFF,#5B3DF5);padding:30px 36px;text-align:center}
.offer-top h3{font-size:26px;font-weight:800}
.offer-top p{color:#E7E0FF;margin-top:6px}
.stack{padding:8px 36px}
.stack-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.stack-row .l{display:flex;align-items:center;gap:13px}
.stack-row .ck{width:24px;height:24px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex-shrink:0}
.stack-row b{font-weight:600;font-size:15.5px}
.stack-row .val{font-family:'Sora';font-weight:600;color:var(--ink-soft);white-space:nowrap}
.stack-total{padding:24px 36px;background:rgba(124,92,255,.1)}
.stack-total .tr{display:flex;justify-content:space-between;align-items:center}
.stack-total .anchor{font-family:'Sora';font-weight:700;font-size:20px;text-decoration:line-through;color:var(--ink-faint)}
.stack-total .price{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;gap:14px}
.stack-total .pl{font-size:14px;color:var(--ink-soft)}
.stack-total .pv{font-family:'Sora';font-weight:800;font-size:38px;line-height:1}
.stack-total .pv small{font-size:15px;font-weight:600;color:var(--ink-soft)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{padding:32px;display:flex;flex-direction:column}
.tier.feat{border:1.5px solid var(--violet);box-shadow:var(--glow)}
.tier .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(100deg,#7C5CFF,#5B3DF5);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 16px;border-radius:100px;text-transform:uppercase;white-space:nowrap;box-shadow:var(--glow)}
.tier h3{font-size:20px;font-weight:700}
.tier .sub{color:var(--ink-soft);font-size:14px;margin:6px 0 18px;min-height:42px}
.tier .amt{font-family:'Sora';font-weight:800;font-size:34px}
.tier .amt small{font-size:15px;font-weight:600;color:var(--ink-soft)}
.tier .per{font-size:13px;color:var(--ink-faint);margin-bottom:18px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:8px 0 26px;flex:1}
.tier li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.tier li svg{flex-shrink:0;margin-top:3px;color:var(--violet-2)}
.anchor-line{text-align:center;max-width:680px;margin:40px auto 0;font-size:16px;color:var(--ink-soft);background:var(--surface);border:1px dashed var(--glass-bd);border-radius:18px;padding:20px 26px}
.anchor-line b{color:#fff}
.devis-note{text-align:center;max-width:680px;margin:18px auto 0;font-size:15px;color:var(--ink-soft)}
.devis-note b{color:var(--violet-2)}

/* guarantee */
.guar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.guar{grid-template-columns:1fr}}
.guar .g{padding:28px;text-align:center}
.guar .g .ic{width:54px;height:54px;border-radius:16px;margin:0 auto 16px;display:grid;place-items:center;background:rgba(124,92,255,.14);color:var(--violet-2)}
.guar .g h4{font-size:17px;font-weight:700;margin-bottom:8px}
.guar .g p{font-size:14px;color:var(--ink-soft)}

/* compare */
.tbl{max-width:980px;margin:0 auto;overflow-x:auto;border:1px solid var(--glass-bd);border-radius:22px;background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:16px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid rgba(255,255,255,.06)}
th{font-family:'Sora';font-weight:600;font-size:13px;color:var(--ink-faint);text-transform:uppercase}
.col-us{background:rgba(124,92,255,.14);font-weight:700;color:var(--violet-2)}
td.col-us{color:#fff}
.yes{color:var(--green);font-weight:700}.no{color:var(--ink-faint)}

/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}
.tcard{padding:28px}
.stars{color:var(--yellow);font-size:15px;letter-spacing:2px;margin-bottom:14px}
.tcard q{font-size:15.5px;display:block;margin-bottom:18px;font-style:italic}
.tperson{display:flex;align-items:center;gap:12px}
.tperson .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-family:'Sora'}
.tperson b{display:block;font-size:14.5px}.tperson span{font-size:13px;color:var(--ink-faint)}

/* cta */
.cta-band{border-radius:34px;margin:0 16px;text-align:center;overflow:hidden;position:relative;background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(177,75,255,.12))}
.cta-band .inner{position:relative;padding:74px 24px}
.cta-band h2{font-size:clamp(30px,4vw,52px);font-weight:800;margin-bottom:16px}
.cta-band p{color:var(--ink-soft);font-size:18px;max-width:540px;margin:0 auto 14px}
.scarcity{display:inline-flex;align-items:center;gap:9px;background:rgba(255,210,59,.12);border:1px solid rgba(255,210,59,.4);color:#FFD98A;font-weight:600;font-size:14px;padding:9px 18px;border-radius:100px;margin:6px 0 26px}
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

footer{padding:48px 0 60px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding-top:32px}
.foot .contact{display:flex;gap:30px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-soft)}
.foot .contact b{color:var(--ink-faint);display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:3px}

/* ===== agent detail pages ===== */
.ahero{padding:70px 0 40px;text-align:center;max-width:820px;margin:0 auto}
.ahero .abig{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;margin:0 auto 22px;box-shadow:var(--glow)}
.ahero h1{font-size:clamp(34px,5vw,58px);font-weight:800;margin-bottom:16px}
.ahero p{font-size:19px;color:var(--ink-soft);max-width:46ch;margin:0 auto}
.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft);font-weight:600;font-size:14px;margin-bottom:6px}
.back-link:hover{color:#fff}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.stepc{padding:26px;position:relative}
.stepc .no{font-family:'Sora';font-weight:800;font-size:15px;width:32px;height:32px;border-radius:50%;background:rgba(124,92,255,.16);color:var(--violet-2);display:grid;place-items:center;margin-bottom:16px}
.stepc h4{font-size:17px;font-weight:700;margin-bottom:8px}
.stepc p{font-size:14px;color:var(--ink-soft)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.stats{grid-template-columns:1fr}}
.statc{padding:30px;text-align:center}
.statc .big{font-family:'Sora';font-weight:800;font-size:clamp(30px,4vw,44px);line-height:1}
.statc .lbl{color:var(--ink-soft);font-size:14px;margin-top:8px}
.note-small{text-align:center;font-size:13px;color:var(--ink-faint);max-width:640px;margin:24px auto 0}

/* quiz */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(4,3,10,.7);backdrop-filter:blur(8px)}
.quiz{position:relative;background:#120E26;border:1px solid var(--glass-bd);width:100%;max-width:600px;border-radius:26px;box-shadow:0 50px 120px -30px rgba(0,0,0,.8);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.quiz-top{padding:20px 26px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between}
.progress{height:6px;background:rgba(255,255,255,.1);border-radius:100px;flex:1;margin-right:16px;overflow:hidden}
.progress .bar{height:100%;width:8%;background:linear-gradient(90deg,#7C5CFF,#B14BFF);border-radius:100px;transition:width .5s var(--ease)}
.quiz-close{background:none;border:none;cursor:pointer;color:var(--ink-faint);font-size:24px;line-height:1}
.quiz-body{padding:34px 30px;overflow-y:auto}
.q-kick{font-size:13px;font-weight:700;color:var(--violet-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.q-title{font-family:'Sora';font-size:24px;font-weight:700;margin-bottom:8px}
.q-help{color:var(--ink-soft);font-size:15px;margin-bottom:22px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--glass-bd);border-radius:13px;padding:15px 16px;cursor:pointer;transition:all .2s var(--ease);font-weight:500;font-size:15px}
.opt:hover{border-color:var(--violet);background:rgba(124,92,255,.1)}
.opt.sel{border-color:var(--violet);background:rgba(124,92,255,.16);color:#fff;font-weight:600}
.opt .bx{width:22px;height:22px;border-radius:7px;border:2px solid var(--glass-bd);flex-shrink:0;display:grid;place-items:center}
.opt.sel .bx{background:var(--violet);border-color:var(--violet)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-weight:600;font-size:14px}
.field input{background:rgba(255,255,255,.05);border:1.5px solid var(--glass-bd);border-radius:12px;padding:14px 15px;font-size:15px;font-family:inherit;color:#fff;transition:border .2s}
.field input:focus{outline:none;border-color:var(--violet)}
.field input::placeholder{color:var(--ink-faint)}
.quiz-foot{padding:18px 30px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;gap:12px}
.lnk-back{background:none;border:none;color:var(--ink-soft);font-weight:600;cursor:pointer;font-size:15px}
.result-loss{text-align:center;background:linear-gradient(135deg,rgba(255,107,112,.18),rgba(124,92,255,.12));border:1px solid rgba(255,107,112,.3);border-radius:18px;padding:24px;margin-bottom:18px}
.result-loss .n{font-family:'Sora';font-weight:800;font-size:44px;color:#FF8B8F;text-shadow:0 0 30px rgba(255,107,112,.4)}
.result-loss .s{color:var(--ink-soft);font-size:14px}
.needs{display:flex;flex-direction:column;gap:8px;margin:4px 0 16px}
.need{display:flex;align-items:center;gap:11px;background:rgba(52,224,161,.07);border:1px solid rgba(52,224,161,.22);border-radius:12px;padding:11px 14px;font-size:14px;animation:needIn .4s var(--ease) both}
.need .ck{width:20px;height:20px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex-shrink:0}
.need b{color:#fff}.need span{color:var(--ink-soft)}
@keyframes needIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.all-in{text-align:center;background:rgba(124,92,255,.14);border:1px solid var(--violet);border-radius:14px;padding:16px;margin-bottom:16px;font-weight:600}
.all-in b{color:var(--violet-2)}
.reco{border:1.5px solid var(--violet);background:rgba(124,92,255,.12);border-radius:15px;padding:16px;margin-bottom:16px}
.reco b{color:var(--violet-2)}
.hidden{display:none!important}

/* ===== polish ===== */
::selection{background:rgba(124,92,255,.4);color:#fff}
*::-webkit-scrollbar{width:11px}
*::-webkit-scrollbar-thumb{background:rgba(124,92,255,.4);border-radius:10px;border:3px solid var(--bg)}
*::-webkit-scrollbar-track{background:var(--bg)}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.tier.feat::before{content:"";position:absolute;inset:-1.5px;border-radius:24px;padding:1.5px;background:conic-gradient(from var(--ang,0deg),#7C5CFF,#B14BFF,#FFD23B,#7C5CFF);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:angspin 6s linear infinite;pointer-events:none}
@keyframes angspin{to{--ang:360deg}}
.tier.feat>*{position:relative}
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--glass-bd);border:1px solid var(--glass-bd);border-radius:24px;overflow:hidden}
.stat-band .s{background:var(--bg2);padding:30px 18px;text-align:center}
.stat-band .s .b{font-family:'Sora';font-weight:800;font-size:clamp(28px,4vw,40px);line-height:1}
.stat-band .s .l{color:var(--ink-soft);font-size:13.5px;margin-top:6px}
@media(max-width:760px){.stat-band{grid-template-columns:repeat(2,1fr)}}

/* product mockup */
.crmui{padding:18px;display:grid;gap:14px}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpic{background:rgba(255,255,255,.04);border:1px solid var(--glass-bd);border-radius:14px;padding:14px}
.kpic .b{font-family:'Sora';font-weight:800;font-size:22px}
.kpic .b.g{color:var(--green)}
.kpic .l{font-size:11.5px;color:var(--ink-faint)}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kcol{background:rgba(255,255,255,.03);border:1px solid var(--glass-bd);border-radius:14px;padding:12px;min-height:150px}
.kcol h5{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:10px;display:flex;justify-content:space-between}
.kcard{background:rgba(20,16,38,.85);border:1px solid var(--glass-bd);border-radius:11px;padding:11px 12px;margin-bottom:9px;font-size:13px;animation:kin .6s var(--ease) both}
.kcard .nm{font-weight:600;display:flex;align-items:center}
.kcard .am{color:var(--violet-2);font-weight:700;font-size:12.5px;margin-top:4px}
.kcard .pin{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px}
@keyframes kin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wachat{position:absolute;right:-16px;bottom:-18px;width:236px;background:#0c1f17;border:1px solid rgba(52,224,161,.3);border-radius:16px;padding:13px;box-shadow:0 26px 64px -22px rgba(0,0,0,.85)}
.wahead{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#7ff0c0;margin-bottom:9px}
.wahead .av{width:22px;height:22px;border-radius:50%;background:#25D366;display:grid;place-items:center}
.wamsg{font-size:12.5px;padding:8px 11px;border-radius:12px;margin-bottom:7px;max-width:88%}
.wamsg.in{background:rgba(255,255,255,.08);border-bottom-left-radius:3px}
.wamsg.out{background:#1f6b4a;color:#eafff5;margin-left:auto;border-bottom-right-radius:3px}
.typing{display:inline-flex;gap:3px;padding:3px 0}.typing i{width:5px;height:5px;border-radius:50%;background:#7ff0c0;animation:ty 1.2s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes ty{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(max-width:560px){.wachat{position:static;width:auto;margin-top:14px}}
/* method cards */
.method{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.mcard{padding:26px}
.mcard .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:rgba(124,92,255,.16);color:var(--violet-2)}
.mcard h4{font-size:17px;font-weight:700;margin-bottom:8px}
.mcard p{font-size:14px;color:var(--ink-soft)}
.mcard .pill{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;color:var(--yellow);background:rgba(255,210,59,.12);padding:4px 11px;border-radius:100px}
.glass{transition:transform .2s var(--ease),border-color .3s}