/* ========================================================= Corenta — product site Craft pass: real type, depth, dark/light rhythm, bento ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap'); :root{ /* Core brand */ --iris:#6366f1; --iris-2:#4f46e5; --iris-d:#3730a3; --violet:#a855f7; --violet-2:#9333ea; --pink:#ec4899; --cyan:#22d3ee; --emerald:#10b981; --amber:#f59e0b; --rose:#f43f5e; /* light tints */ --iris-l:#eef0ff; --violet-l:#f7f0ff; --cyan-l:#ecfeff; --emerald-l:#ecfdf5; --amber-l:#fffbeb; --rose-l:#fff1f2; --pink-l:#fdf2f8; /* Ink */ --ink:#0a0a12; --ink-1:#1c1c2e; --ink-2:#4b4b63; --ink-3:#8a8aa3; --line:#e8e8f0; --line-2:#f1f1f7; --paper:#fff; --paper-2:#fafafd; --tint:#f5f5fb; /* Night */ --night:#07070f; --night-1:#0f0f1e; --night-2:#181830; --night-line:rgba(255,255,255,.09); --night-tx:#a5a5c4; --grad:linear-gradient(120deg,#6366f1,#a855f7 50%,#ec4899); --grad-2:linear-gradient(120deg,#22d3ee,#6366f1); --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --display:"Bricolage Grotesque","Plus Jakarta Sans",-apple-system,Helvetica,Arial,sans-serif; --r:12px; --r-lg:18px; --r-xl:26px; --r-2xl:34px; --e:cubic-bezier(.22,.61,.36,1); --e2:cubic-bezier(.16,1,.3,1); /* layered shadows — the difference between flat and real */ --sh-1:0 1px 2px rgba(10,10,18,.04),0 2px 6px rgba(10,10,18,.04); --sh-2:0 2px 4px rgba(10,10,18,.04),0 8px 20px -6px rgba(10,10,18,.10); --sh-3:0 4px 8px rgba(10,10,18,.04),0 18px 40px -12px rgba(10,10,18,.16); --sh-4:0 8px 16px rgba(10,10,18,.06),0 40px 80px -20px rgba(10,10,18,.28); --sh-glow:0 0 0 1px rgba(99,102,241,.14),0 20px 60px -18px rgba(99,102,241,.45); --wrap:1320px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;overflow-x:clip} body{ font-family:var(--font);background:var(--paper);color:var(--ink-2); line-height:1.6;font-size:16px;overflow-x:clip; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-feature-settings:"cv02","cv03","cv04","ss01"; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul{list-style:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--iris);color:#fff} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:28px} .sec{padding:100px 0;position:relative} .sec--tint{background:var(--tint)} .sec--night{background:var(--night);color:var(--night-tx)} .sec--night h1,.sec--night h2,.sec--night h3,.sec--night h4{color:#fff} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--iris-2);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600} .skip:focus{left:0} :focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px} /* ---------- Type ---------- */ h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.08;font-weight:700;letter-spacing:-.025em} .d1{font-size:clamp(2.6rem,5vw,4.4rem);font-weight:800;letter-spacing:-.035em} .d2{font-size:clamp(2rem,3.4vw,3.1rem);font-weight:700;letter-spacing:-.03em} .d3{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:700;letter-spacing:-.022em} .lede{font-size:1.15rem;color:var(--ink-2);max-width:58ch;line-height:1.62;letter-spacing:-.005em} .sec--night .lede{color:var(--night-tx)} .eyebrow{ display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:100px;margin-bottom:20px; } .eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .eb-i{background:var(--iris-l);color:var(--iris-2)} .eb-v{background:var(--violet-l);color:var(--violet-2)} .eb-c{background:var(--cyan-l);color:#0e7490} .eb-e{background:var(--emerald-l);color:#047857} .eb-a{background:var(--amber-l);color:#b45309} .eb-r{background:var(--rose-l);color:#be123c} .eb-p{background:var(--pink-l);color:#be185d} .eb-w{background:rgba(255,255,255,.08);color:#c7c7e8;border:1px solid var(--night-line)} .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .grad-c{background:var(--grad-2);-webkit-background-clip:text;background-clip:text;color:transparent} .shd{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end;margin-bottom:52px} .shd p{font-size:1.05rem;padding-bottom:6px} .shd--solo{grid-template-columns:1fr;max-width:800px;margin-bottom:48px} .shd--mid{grid-template-columns:1fr;gap:16px;text-align:center;max-width:760px;margin-inline:auto} .shd--mid .eyebrow{margin-inline:auto} /* an eyebrow is a pill, never a bar: grid items stretch by default */ .shd>.eyebrow{justify-self:start} .shd--mid>.eyebrow{justify-self:center} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 22px;border-radius:11px;font-weight:600;font-size:.95rem;letter-spacing:-.01em; transition:transform .18s var(--e),box-shadow .22s var(--e),background .18s,color .18s,border-color .18s; white-space:nowrap;position:relative; } .btn svg{width:16px;height:16px;transition:transform .22s var(--e)} .btn--p{background:var(--ink);color:#fff;box-shadow:var(--sh-2)} .btn--p:hover{transform:translateY(-2px);box-shadow:var(--sh-3)} .btn--p:hover svg{transform:translateX(3px)} .btn--g{ background:linear-gradient(120deg,#6366f1,#8b5cf6 55%,#a855f7);color:#fff; box-shadow:0 1px 2px rgba(99,102,241,.4),0 10px 28px -8px rgba(139,92,246,.6); } .btn--g:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(99,102,241,.5),0 18px 40px -10px rgba(139,92,246,.7)} .btn--g:hover svg{transform:translateX(3px)} .btn--o{border:1px solid var(--line);color:var(--ink);background:#fff;box-shadow:var(--sh-1)} .btn--o:hover{border-color:#c9c9dd;transform:translateY(-2px);box-shadow:var(--sh-2)} .btn--w{background:#fff;color:var(--ink);box-shadow:var(--sh-2)} .btn--w:hover{transform:translateY(-2px);box-shadow:var(--sh-3)} .btn--wo{border:1px solid rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.04)} .btn--wo:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);transform:translateY(-2px)} .btn--lg{padding:15px 28px;font-size:1rem;border-radius:12px} .btn--sm{padding:9px 16px;font-size:.88rem;border-radius:9px} .btn--blk{width:100%} .lnk{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--iris-2);font-size:.93rem} .lnk svg{width:14px;height:14px;transition:transform .2s var(--e)} .lnk:hover svg{transform:translateX(3px)} .sec--night .lnk{color:#a5b4fc} /* ---------- Logo ---------- */ .logo{display:inline-flex;align-items:center;gap:10px} .logo__m{ width:29px;height:29px;border-radius:8px;flex:none;position:relative; background:linear-gradient(135deg,#6366f1,#a855f7 60%,#ec4899); display:grid;grid-template-columns:1fr 1fr;gap:2.5px;padding:5.5px; box-shadow:0 1px 2px rgba(99,102,241,.4),0 4px 12px -3px rgba(139,92,246,.5); } .logo__m span{background:#fff;border-radius:1.5px} .logo__m span:nth-child(2){opacity:.62} .logo__m span:nth-child(3){opacity:.45} .logo__m span:nth-child(4){opacity:.82} .logo__t{font-size:1.15rem;font-weight:800;letter-spacing:-.04em;color:var(--ink)} .logo--w .logo__t{color:#fff} /* ---------- NAV ---------- */ .nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(232,232,240,.8)} .nav__in{display:flex;align-items:center;gap:24px;height:66px} .nav__menu{display:flex;align-items:center;gap:1px;flex:1} .nav__menu>a,.drop__btn{padding:8px 12px;font-size:.92rem;font-weight:500;color:var(--ink-2);border-radius:8px;transition:color .16s,background .16s;display:inline-flex;align-items:center;gap:5px} .nav__menu>a:hover,.drop__btn:hover{color:var(--ink);background:var(--tint)} .nav__menu>a.on{color:var(--ink);font-weight:600} .nav__act{display:flex;align-items:center;gap:8px} .drop{position:relative} .drop__btn svg{width:12px;height:12px;transition:transform .2s;opacity:.6} .drop.open .drop__btn{color:var(--ink);background:var(--tint)} .drop.open .drop__btn svg{transform:rotate(180deg)} .drop__menu{ position:absolute;top:calc(100% + 12px);left:-12px;width:600px;background:#fff; border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-4); padding:10px;display:none;grid-template-columns:1fr 1fr;gap:1px;z-index:90; } .drop.open .drop__menu{display:grid;animation:pop .18s var(--e2)} @keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .drop__menu a{display:flex;gap:12px;padding:12px;border-radius:13px;transition:background .16s} .drop__menu a:hover{background:var(--tint)} .drop__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none} .drop__ic .ic{width:17px;height:17px} .drop__menu b{display:block;font-size:.88rem;color:var(--ink);font-weight:600;line-height:1.35;letter-spacing:-.01em} .drop__menu span{font-size:.79rem;color:var(--ink-3);line-height:1.4} .menu-cta{display:none} .burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);align-items:center;justify-content:center;color:var(--ink)} .burger svg{width:19px;height:19px} .scrim{position:fixed;inset:0;background:rgba(10,10,18,.4);opacity:0;visibility:hidden;transition:opacity .3s;z-index:70} .scrim.on{opacity:1;visibility:visible} /* ---------- HERO (dark, rich) ---------- */ .hero{ position:relative;overflow:hidden;background:var(--night);color:var(--night-tx); padding:96px 0 0; } .hero::before{ content:"";position:absolute;inset:0; background: radial-gradient(900px 500px at 18% -5%,rgba(99,102,241,.35),transparent 60%), radial-gradient(700px 480px at 82% 8%,rgba(168,85,247,.28),transparent 62%), radial-gradient(600px 400px at 55% 60%,rgba(236,72,153,.16),transparent 65%); pointer-events:none; } .hero::after{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%); mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%); pointer-events:none; } .hero__in{position:relative;z-index:2;text-align:center;max-width:940px;margin:0 auto} .hero h1{color:#fff;font-size:clamp(2.7rem,5.6vw,4.7rem);font-weight:900;letter-spacing:-.048em;line-height:1.02;margin-bottom:24px} .hero h1 .grad{background:linear-gradient(110deg,#a5b4fc,#d8b4fe 45%,#f9a8d4);-webkit-background-clip:text;background-clip:text;color:transparent} .hero .lede{color:#b8b8d8;font-size:1.2rem;max-width:60ch;margin:0 auto} .hero__cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .hero__note{margin-top:18px;font-size:.86rem;color:#7e7ea4} .pill{ display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:100px; background:rgba(255,255,255,.05);border:1px solid var(--night-line); font-size:.85rem;font-weight:500;color:#c7c7e8;margin-bottom:28px; backdrop-filter:blur(10px); } .pill b{background:linear-gradient(120deg,#6366f1,#a855f7);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:100px} /* hero product shot: big, floating, real depth */ .hero__shot{ position:relative;z-index:2;margin:62px auto 0;max-width:1180px; padding-bottom:100px; } .hero__shot .shot{ box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.4), 0 40px 90px -20px rgba(0,0,0,.7),0 -1px 0 rgba(255,255,255,.06) inset; transform:perspective(2200px) rotateX(2.2deg); } .hero__glowline{ position:absolute;left:12%;right:12%;top:-1px;height:1px;z-index:3; background:linear-gradient(90deg,transparent,rgba(165,180,252,.8),transparent); } .hero__fade{position:absolute;left:0;right:0;bottom:0;height:190px;background:linear-gradient(to bottom,transparent,var(--night));z-index:3;pointer-events:none} /* ---------- Page hero (inner) ---------- */ .phero{padding:72px 0 60px;position:relative;overflow:hidden;background:linear-gradient(180deg,#fafaff,#fff)} .phero::before{ content:"";position:absolute;inset:0; background:radial-gradient(700px 340px at 12% 0%,rgba(99,102,241,.10),transparent 62%), radial-gradient(560px 300px at 88% 10%,rgba(168,85,247,.09),transparent 62%); } .phero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center} .phero__in>*{min-width:0} .shotfit{position:relative;overflow:hidden;border-radius:var(--r-xl); box-shadow:var(--sh-4);aspect-ratio:1000/700} .shotfit>.shot{width:1000px;transform-origin:0 0;box-shadow:none;border-radius:var(--r-xl)} .shotfit.fitted{aspect-ratio:auto;box-shadow:var(--sh-4)} .phero--solo .phero__in{grid-template-columns:1fr;max-width:840px} .phero h1{margin-bottom:18px} .phero__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:11px} /* ---------- Product mockup (bigger, denser, real) ---------- */ .shot{background:#fff;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-4)} .shot--flat{box-shadow:var(--sh-2);border:1px solid var(--line);border-radius:var(--r-lg)} .shot__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#f7f7fb;border-bottom:1px solid var(--line)} .shot__bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57;flex:none} .shot__bar i:nth-child(2){background:#febc2e} .shot__bar i:nth-child(3){background:#28c840} .shot__url{margin-left:10px;font-size:.72rem;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:100px;padding:4px 14px;font-weight:500} .ui{display:grid;grid-template-columns:172px 1fr;min-height:500px;background:#f7f7fb;font-size:14px} .ui--nos{grid-template-columns:1fr} .side{background:#0f0f1e;padding:16px 11px;display:flex;flex-direction:column;gap:2px} .side__b{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:.9rem;padding:4px 9px 16px;letter-spacing:-.02em} .side__b span{width:17px;height:17px;border-radius:5px;background:var(--grad);flex:none} .side a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:.82rem;font-weight:500;color:#8b8bab} .side a.on{background:rgba(255,255,255,.08);color:#fff;font-weight:600} .side .ic{width:15px;height:15px} .main{padding:20px} .main__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .main__h b{display:block;font-size:1rem;color:var(--ink);font-weight:700;letter-spacing:-.02em} .main__h span{font-size:.78rem;color:var(--ink-3)} .av{width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700} .kpis{display:grid;gap:10px;margin-bottom:14px} .kpis--3{grid-template-columns:repeat(3,1fr)} .kpis--4{grid-template-columns:repeat(4,1fr)} .kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;box-shadow:var(--sh-1)} .kpi span{display:block;font-size:.68rem;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.06em} .kpi b{display:block;font-size:1.32rem;font-weight:800;color:var(--ink);line-height:1.2;margin-top:4px;letter-spacing:-.03em} .kpi i{font-size:.68rem;font-weight:600;font-style:normal;color:#059669} .kpi--i{box-shadow:inset 0 2px 0 var(--iris),var(--sh-1)} .kpi--v{box-shadow:inset 0 2px 0 var(--violet),var(--sh-1)} .kpi--c{box-shadow:inset 0 2px 0 var(--cyan),var(--sh-1)} .kpi--e{box-shadow:inset 0 2px 0 var(--emerald),var(--sh-1)} .kpi--a{box-shadow:inset 0 2px 0 var(--amber),var(--sh-1)} .kpi--r{box-shadow:inset 0 2px 0 var(--rose),var(--sh-1)} .kpi--t{box-shadow:inset 0 2px 0 var(--cyan),var(--sh-1)} .card2{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:11px;box-shadow:var(--sh-1)} .card2__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;min-width:0} .card2__h b{font-size:.85rem;color:var(--ink);font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .card2__h span{font-size:.72rem;color:var(--ink-3);flex:none;white-space:nowrap} .chart{display:flex;align-items:flex-end;gap:9px;height:88px} .chart .b{flex:1;display:flex;align-items:flex-end;gap:3px;height:100%} .chart .b span{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(to top,var(--iris-2),var(--iris))} .chart .b span:nth-child(2){background:#dcdcf5} .gantt{display:grid;gap:7px} .gantt__r{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center} .gantt__r em{font-style:normal;font-size:.74rem;color:var(--ink-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gantt__t{height:18px;background:var(--line-2);border-radius:5px;position:relative} .gantt__t i{position:absolute;top:0;bottom:0;border-radius:5px;display:block;box-shadow:var(--sh-1)} .g-i{background:linear-gradient(90deg,#6366f1,#818cf8)} .g-v{background:linear-gradient(90deg,#a855f7,#c084fc)} .g-t{background:linear-gradient(90deg,#06b6d4,#22d3ee)} .g-a{background:linear-gradient(90deg,#f59e0b,#fbbf24)} .g-e{background:linear-gradient(90deg,#10b981,#34d399)} .g-r{background:linear-gradient(90deg,#f43f5e,#fb7185)} .rws{display:grid;gap:7px} .rw{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:var(--sh-1)} .rw b{font-size:.8rem;color:var(--ink);font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rw span{font-size:.72rem;color:var(--ink-3)} .pip{width:7px;height:7px;border-radius:50%;flex:none} .pip--e{background:var(--emerald)}.pip--a{background:var(--amber)}.pip--v{background:var(--violet)} .pip--i{background:var(--iris)}.pip--r{background:var(--rose)} .chip{font-size:.66rem;font-weight:600;padding:3px 9px;border-radius:100px;letter-spacing:.01em} .chip--e{background:var(--emerald-l);color:#047857} .chip--a{background:var(--amber-l);color:#b45309} .chip--i{background:var(--iris-l);color:var(--iris-2)} .chip--r{background:var(--rose-l);color:#be123c} .tree{display:grid;gap:4px;font-size:.78rem} .tree div{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;color:var(--ink-2)} .tree div.on{background:var(--iris-l);color:var(--iris-2);font-weight:600} .tree .ic{width:14px;height:14px;flex:none;opacity:.8} .tree .in1{padding-left:24px}.tree .in2{padding-left:38px} .tr{display:grid;gap:9px} .tr__l{display:flex;gap:9px} .tr__a{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.6rem;font-weight:700;color:#fff} .tr__x{font-size:.78rem;color:var(--ink-2);line-height:1.5} .tr__x b{color:var(--ink);font-weight:600} .pbar{height:7px;background:var(--line-2);border-radius:100px;overflow:hidden;margin-top:6px} .pbar i{display:block;height:100%;border-radius:100px} /* floating cards on hero shot */ .fl{ position:absolute;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.7); border-radius:14px;padding:11px 15px;display:flex;align-items:center;gap:11px;z-index:5; box-shadow:0 8px 20px -6px rgba(0,0,0,.3),0 24px 60px -16px rgba(0,0,0,.5); backdrop-filter:blur(16px); } .fl b{display:block;font-size:.8rem;color:var(--ink);font-weight:700;letter-spacing:-.01em} .fl span{font-size:.72rem;color:var(--ink-3)} .fl .ic{width:26px;height:26px;padding:6px;border-radius:8px;flex:none} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* ---------- MARQUEE ---------- */ .mq{padding:52px 0;background:#fff;overflow:hidden;border-bottom:1px solid var(--line)} .mq__l{text-align:center;font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:30px} .mq__row{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .mq__row+.mq__row{margin-top:22px} .mq__t{display:flex;align-items:center;gap:74px;padding-right:74px;flex:none;animation:mq-l 48s linear infinite} .mq__row--rev .mq__t{animation-name:mq-r} .mq__row:hover .mq__t{animation-play-state:paused} .mq__t img{height:36px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) opacity(.45);transition:filter .3s} .mq__t img:hover{filter:grayscale(0) opacity(1)} .mq__t .txt{display:flex;flex-direction:column;line-height:1.15;opacity:.45;flex:none} .mq__t .txt b{font-size:.95rem;font-weight:800;color:var(--ink);letter-spacing:-.03em} .mq__t .txt span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} @keyframes mq-l{to{transform:translateX(-50%)}} @keyframes mq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}} /* ---------- BENTO ---------- */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .bcell{ position:relative;border-radius:var(--r-xl);padding:28px;overflow:hidden; background:var(--night-1);border:1px solid var(--night-line); transition:transform .35s var(--e),border-color .35s; display:flex;flex-direction:column; } .bcell:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)} .bcell::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none} .bcell h3{color:#fff;font-size:1.15rem;margin-bottom:9px;letter-spacing:-.03em} .bcell p{color:#9494b8;font-size:.92rem;flex:1} .bcell .lnk{margin-top:16px;color:#a5b4fc} .bcell__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;position:relative} .bcell__ic .ic{width:20px;height:20px} .b-6{grid-column:span 6}.b-4{grid-column:span 4}.b-3{grid-column:span 3}.b-2{grid-column:span 2} .bcell--wide{flex-direction:row;align-items:center;gap:36px} .bcell--wide>div:first-child{flex:1} .bcell--wide .bcell__viz{flex:1.1;min-width:0} .k-i{background:rgba(99,102,241,.14);color:#a5b4fc} .k-v{background:rgba(168,85,247,.14);color:#d8b4fe} .k-c{background:rgba(34,211,238,.14);color:#67e8f9} .k-e{background:rgba(16,185,129,.14);color:#6ee7b7} .k-a{background:rgba(245,158,11,.14);color:#fcd34d} .k-r{background:rgba(244,63,94,.14);color:#fda4af} .k-p{background:rgba(236,72,153,.14);color:#f9a8d4} .bcell--glow-i::before{background:radial-gradient(400px 200px at 20% 0%,rgba(99,102,241,.22),transparent 65%)} .bcell--glow-v::before{background:radial-gradient(400px 200px at 20% 0%,rgba(168,85,247,.2),transparent 65%)} .bcell--glow-c::before{background:radial-gradient(400px 200px at 20% 0%,rgba(34,211,238,.18),transparent 65%)} .bcell--glow-e::before{background:radial-gradient(400px 200px at 20% 0%,rgba(16,185,129,.18),transparent 65%)} .bcell--glow-a::before{background:radial-gradient(400px 200px at 20% 0%,rgba(245,158,11,.18),transparent 65%)} .bcell--glow-r::before{background:radial-gradient(400px 200px at 20% 0%,rgba(244,63,94,.18),transparent 65%)} .bcell>*{position:relative;z-index:1} /* mini viz inside bento */ .mini{background:rgba(255,255,255,.04);border:1px solid var(--night-line);border-radius:14px;padding:14px} .mini__r{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.78rem;color:#b4b4d4} .mini__r:last-child{border-bottom:none} .mini__r b{color:#fff;font-weight:500;flex:1;font-size:.78rem} .mini__bar{height:8px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden;margin-top:7px} .mini__bar i{display:block;height:100%;border-radius:100px} /* ---------- Cards (light) ---------- */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:22px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:26px; transition:transform .3s var(--e),box-shadow .3s,border-color .3s;display:flex;flex-direction:column; box-shadow:var(--sh-1); } .card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:#dcdcec} .card__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px} .card__ic .ic{width:20px;height:20px} .card h3{font-size:1.05rem;margin-bottom:8px} .card p{font-size:.93rem;flex:1} .card .lnk{margin-top:15px} .i-i{background:var(--iris-l);color:var(--iris-2)} .i-v{background:var(--violet-l);color:var(--violet-2)} .i-c{background:var(--cyan-l);color:#0e7490} .i-e{background:var(--emerald-l);color:#047857} .i-a{background:var(--amber-l);color:#b45309} .i-r{background:var(--rose-l);color:#be123c} .i-p{background:var(--pink-l);color:#be185d} .i-s{background:var(--cyan-l);color:#0e7490} .i-t{background:var(--cyan-l);color:#0e7490} /* feature rows */ .frow{display:grid;grid-template-columns:1fr 1.12fr;gap:64px;align-items:center;padding:64px 0} .frow>*{min-width:0} .frow+.frow{border-top:1px solid var(--line-2)} .frow--flip .frow__c{order:2} .frow h3{font-size:1.75rem;margin-bottom:14px;letter-spacing:-.035em} .frow p{font-size:1.02rem;margin-bottom:18px} .flist{display:grid;gap:11px} .flist li{display:block;position:relative;padding-left:31px;font-size:.95rem;color:var(--ink-2);line-height:1.62} .flist>li>i{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:6px} .flist i::after{content:"";position:absolute;left:7px;top:5px;width:4px;height:8px;border-style:solid;border-width:0 2px 2px 0;transform:rotate(45deg)} .flist i.c-i{background:var(--iris-l)} .flist i.c-i::after{border-color:var(--iris-2)} .flist i.c-v{background:var(--violet-l)} .flist i.c-v::after{border-color:var(--violet-2)} .flist i.c-t,.flist i.c-c,.flist i.c-s{background:var(--cyan-l)} .flist i.c-t::after,.flist i.c-c::after,.flist i.c-s::after{border-color:#0e7490} .flist i.c-a{background:var(--amber-l)} .flist i.c-a::after{border-color:#b45309} .flist i.c-r{background:var(--rose-l)} .flist i.c-r::after{border-color:#be123c} .flist i.c-e{background:var(--emerald-l)} .flist i.c-e::after{border-color:#047857} /* stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden} .stats>div{min-width:0} .stats div{padding:30px 26px;background:#fff} .stats b{display:block;font-size:2.1rem;font-weight:800;color:var(--ink);letter-spacing:-.045em;line-height:1} .stats span{font-size:.88rem;color:var(--ink-3);margin-top:6px;display:block} .sec--night .stats{background:var(--night-line);border-color:var(--night-line)} .sec--night .stats div{background:var(--night-1)} .sec--night .stats b{color:#fff} .sec--night .stats span{color:#8b8bab} /* steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stp{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-1);transition:transform .3s var(--e),box-shadow .3s} .stp:hover{transform:translateY(-3px);box-shadow:var(--sh-3)} .stp__n{width:36px;height:36px;border-radius:11px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem;margin-bottom:16px;box-shadow:0 6px 16px -5px rgba(139,92,246,.6)} .stp h3{font-size:1.05rem;margin-bottom:7px} .stp p{font-size:.92rem} /* callout */ .callout{ position:relative;overflow:hidden;border-radius:var(--r-2xl);padding:64px; background:var(--night);display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:center; } .callout::before{content:"";position:absolute;inset:0;background: radial-gradient(700px 340px at 8% 0%,rgba(99,102,241,.4),transparent 62%), radial-gradient(600px 320px at 92% 100%,rgba(236,72,153,.3),transparent 62%)} .callout::after{content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 30% 50%,#000,transparent 70%);mask-image:radial-gradient(circle at 30% 50%,#000,transparent 70%)} .callout>*{position:relative;z-index:1} .callout h2{color:#fff;font-size:clamp(1.7rem,2.8vw,2.4rem);margin-bottom:13px} .callout p{color:#b0b0d0;font-size:1.05rem} .callout__a{display:flex;flex-direction:column;gap:11px} /* pricing */ .ptable{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start} .pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);padding:36px;position:relative;display:flex;flex-direction:column;box-shadow:var(--sh-1)} .pcard--hot{border-color:transparent;box-shadow:var(--sh-glow)} .pcard--hot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .pcard__tag{position:absolute;top:-13px;left:36px;background:var(--grad);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:100px;box-shadow:0 6px 16px -5px rgba(139,92,246,.7)} .pcard h3{font-size:1.25rem;margin-bottom:7px} .pcard__d{font-size:.93rem;color:var(--ink-3);margin-bottom:22px;min-height:44px} .pcard__p{font-size:1.6rem;font-weight:800;color:var(--ink);letter-spacing:-.04em;margin-bottom:5px} .pcard__pn{font-size:.85rem;color:var(--ink-3);margin-bottom:26px} .pcard ul{display:grid;gap:12px;margin-bottom:28px;flex:1} .pcard li{display:flex;gap:10px;font-size:.93rem} .pcard li i{width:19px;height:19px;border-radius:6px;background:var(--emerald-l);flex:none;position:relative;margin-top:1px} .pcard li i::after{content:"";position:absolute;left:6.5px;top:4.5px;width:4px;height:8px;border:solid #047857;border-width:0 2px 2px 0;transform:rotate(45deg)} /* faq — heading holds the left rail, questions fill the rest of the page */ .faqwrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,5vw,76px);align-items:start} .faqwrap__h{position:sticky;top:112px} .faqwrap__h .d2{margin-bottom:16px} .faqwrap__h p{font-size:1.02rem;color:var(--ink-2);line-height:1.65;max-width:34ch} .faqwrap__h .btn{margin-top:24px} @media (max-width:900px){ .faqwrap{grid-template-columns:1fr;gap:32px} .faqwrap__h{position:static} } .faq{display:grid;gap:11px;max-width:900px} .faqwrap .faq{max-width:none} .qa{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s} .qa:hover{border-color:#d8d8ee;box-shadow:var(--sh-1)} .qa.open{border-color:#c7c7ea;box-shadow:var(--sh-2)} .qa button{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.015em} .qa__i{width:30px;height:30px;border-radius:50%;background:var(--tint);display:grid;place-items:center;flex:none;color:var(--iris-2);transition:all .3s var(--e2)} .qa:hover .qa__i{background:#e6e6fa} .qa__i svg{width:13px;height:13px;transition:transform .25s} .qa.open .qa__i{background:var(--grad);color:#fff} .qa.open .qa__i svg{transform:rotate(45deg)} .qa__a{max-height:0;overflow:hidden;transition:max-height .35s var(--e2)} .qa__a p{padding:0 26px 22px;font-size:.95rem;line-height:1.68;max-width:62ch} /* table */ .tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1)} .tbl th{background:var(--paper-2);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)} .tbl td{padding:16px 20px;border-bottom:1px solid var(--line-2);font-size:.94rem;vertical-align:top} .tbl tr:last-child td{border-bottom:none} .tbl td b{color:var(--ink);font-weight:600} /* form */ .form{background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);padding:36px;box-shadow:var(--sh-3)} .form h3{font-size:1.2rem;margin-bottom:20px} .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .fld{margin-bottom:14px;display:flex;flex-direction:column;gap:6px} .fld label{font-size:.83rem;font-weight:600;color:var(--ink)} .fld input,.fld textarea,.fld select{font:inherit;font-size:.95rem;color:var(--ink);padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);transition:border-color .18s,box-shadow .18s,background .18s;resize:vertical;width:100%} .fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3)} .fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--iris);background:#fff;box-shadow:0 0 0 4px rgba(99,102,241,.12)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .status{display:none;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:10px;font-size:.9rem;margin-bottom:14px;line-height:1.5} .status.show{display:flex} .status.ok{background:var(--emerald-l);border:1px solid #a7f3d0;color:#047857} .status.err{background:var(--rose-l);border:1px solid #fecdd3;color:#be123c} .btn.load{opacity:.6;pointer-events:none} .fine{margin-top:12px;text-align:center;font-size:.82rem;color:var(--ink-3)} .crumb{font-size:.84rem;color:var(--ink-3);margin-bottom:16px;display:flex;align-items:center;gap:8px} .crumb a:hover{color:var(--iris-2)} .crumb span{opacity:.4} /* ---------- FOOTER ---------- */ .foot{background:var(--night);color:#8b8bab;padding:72px 0 28px;position:relative;overflow:hidden} .foot::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 12% 0%,rgba(99,102,241,.16),transparent 62%)} .foot>*{position:relative;z-index:1} .foot__g{display:grid;grid-template-columns:1.55fr repeat(5,1fr);gap:34px;margin-bottom:52px} .foot__brand{grid-column:span 1} .foot__c{margin-top:22px;display:grid;gap:9px} .foot__c a{margin-bottom:0} .foot__wa{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#0b2e18!important;font-weight:700;border-radius:100px;padding:9px 15px;width:fit-content;font-size:.87rem;transition:filter .2s} .foot__wa:hover{filter:brightness(1.08)} .foot__wa svg{width:16px;height:16px;flex:none} .foot__tag{margin-top:17px;font-size:.92rem;max-width:29ch;color:#8b8bab} .foot h4{font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#fff;margin-bottom:16px} .foot__g a{display:block;font-size:.92rem;margin-bottom:10px;transition:color .18s} .foot__g a:hover{color:#fff} .foot__loc{display:block;font-size:.86rem;color:#63637f;margin-top:14px} .foot__b{border-top:1px solid var(--night-line);padding-top:26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:#63637f} .up{position:fixed;right:22px;bottom:22px;z-index:60;width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(139,92,246,.8);opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);transition:all .3s var(--e2)} .up svg{width:17px;height:17px} .up.show{opacity:1;visibility:visible;transform:none} .up:hover{transform:translateY(-3px)} .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e2),transform .7s var(--e2)} .rv.in{opacity:1;transform:none} .ic{display:inline-block;width:20px;height:20px;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;flex:none} /* ---------- Responsive ---------- */ @media (max-width:1180px){ .bento{grid-template-columns:repeat(4,1fr)} .b-6{grid-column:span 4}.b-4{grid-column:span 4}.b-3{grid-column:span 2}.b-2{grid-column:span 2} .g4{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .foot__g{grid-template-columns:1fr 1fr 1fr;gap:32px} } @media (max-width:1000px){ .nav,.nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff} .nav__menu{position:fixed;inset:0 0 0 auto;width:min(330px,88vw);background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:88px 20px 30px;gap:2px;transform:translateX(100%);transition:transform .36s var(--e2);z-index:80;box-shadow:-18px 0 48px -20px rgba(10,10,18,.4);overflow-y:auto} .nav__menu.on{transform:translateX(0)} .nav__menu>a,.drop__btn{padding:13px 14px;font-size:1rem;width:100%;justify-content:space-between} .drop__menu{position:static;width:100%;box-shadow:none;border:none;padding:2px 0 8px;grid-template-columns:1fr;background:transparent} .drop__menu a{padding:10px} .burger{display:inline-flex} .nav__act .btn{display:none} .menu-cta{display:block;margin-top:14px} .menu-cta .btn{width:100%;justify-content:center} .phero__in{grid-template-columns:1fr;gap:42px} .g3{grid-template-columns:1fr 1fr} .frow{grid-template-columns:1fr;gap:34px;padding:44px 0} .frow--flip .frow__c{order:0} .callout{grid-template-columns:1fr;padding:44px 34px} .shd{grid-template-columns:1fr;gap:16px} .ptable{grid-template-columns:1fr} .bcell--wide{flex-direction:column;align-items:stretch;gap:22px} } @media (max-width:660px){ .wrap{padding-inline:20px} .sec{padding:66px 0} .hero{padding-top:64px} .hero__shot{margin-top:44px;padding-bottom:60px} .bento{grid-template-columns:1fr} .b-6,.b-4,.b-3,.b-2{grid-column:span 1} .g2,.g3,.g4,.steps{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .stats div{padding:22px 15px} .stats b{font-size:1.7rem} .stats span{font-size:.78rem} .f2{grid-template-columns:1fr} .foot__g{grid-template-columns:1fr 1fr} .foot__b{flex-direction:column} .fl{display:none} .ui{grid-template-columns:1fr;min-height:0} .side{display:none} .kpis--4{grid-template-columns:1fr 1fr} .callout{padding:34px 24px} .hero__shot .shot{transform:none} .app{grid-template-columns:1fr} .app .asb{display:none} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .rv{opacity:1;transform:none} } /* ========================================================= Compatibility layer — existing markup uses these names ========================================================= */ .eyebrow--i{background:var(--iris-l);color:var(--iris-2)} .eyebrow--v{background:var(--violet-l);color:var(--violet-2)} .eyebrow--t,.eyebrow--s,.eyebrow--c{background:var(--cyan-l);color:#0e7490} .eyebrow--a{background:var(--amber-l);color:#b45309} .eyebrow--r{background:var(--rose-l);color:#be123c} .eyebrow--e{background:var(--emerald-l);color:#047857} .eyebrow--w{background:rgba(255,255,255,.08);color:#c7c7e8;border:1px solid var(--night-line)} /* module cards on inner pages */ .mcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:26px; transition:transform .3s var(--e),box-shadow .3s,border-color .3s;display:flex;flex-direction:column;box-shadow:var(--sh-1)} .mcard:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:#dcdcec} .mcard__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px} .mcard__ic .ic{width:20px;height:20px} .mcard h3{font-size:1.05rem;margin-bottom:8px} .mcard p{font-size:.93rem;flex:1} .mcard .lnk{margin-top:15px} /* decorative blobs on inner heroes */ .blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0} /* inner-page hero grid (home hero is overridden below) */ .hero__in{position:relative;z-index:2} .hero__cta{display:flex;flex-wrap:wrap;gap:12px} .hero__stats{margin-top:34px;padding-top:26px;border-top:1px solid var(--night-line);display:flex;gap:44px;justify-content:center;flex-wrap:wrap} .hero__stats div b{display:block;font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:-.04em} .hero__stats div span{font-size:.82rem;color:#8b8bab} /* ---------- Icon classes (mask URLs live here, not inline) ---------- */ .ic--home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E")} .ic--doc{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E")} .ic--mic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3C/svg%3E")} .ic--people{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")} .ic--task{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E")} .ic--cash{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E")} .ic--shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")} .ic--chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E")} .ic--spark{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E")} .ic--phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")} .ic--mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")} .ic--build{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M16 6h.01M8 10h.01M16 10h.01M8 14h.01M16 14h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M16 6h.01M8 10h.01M16 10h.01M8 14h.01M16 14h.01'/%3E%3C/svg%3E")} .ic--scale{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 7h14M7 7l-4 7h8zM17 7l-4 7h8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 7h14M7 7l-4 7h8zM17 7l-4 7h8z'/%3E%3C/svg%3E")} .ic--brief{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E")} .ic--bank{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M3 10h18L12 3 3 10zM5 10v11M19 10v11M9 10v11M15 10v11'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M3 10h18L12 3 3 10zM5 10v11M19 10v11M9 10v11M15 10v11'/%3E%3C/svg%3E")} .ic--energy{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E")} .ic--cart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E")} .ic--health{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E")} .ic--globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E")} .ic--folder{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")} .ic--lock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")} .ic--clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")} /* ========================================================= REALISTIC APP CHROME — looks like actual software ========================================================= */ .app{background:#fff;border-radius:14px;overflow:hidden;display:grid;grid-template-columns:214px 1fr;min-height:560px;font-size:13px;color:#3d4257} .app--nos{grid-template-columns:1fr} /* ---- sidebar ---- */ .asb{background:#141527;display:flex;flex-direction:column;padding:0;border-right:1px solid rgba(255,255,255,.06)} .asb__ws{display:flex;align-items:center;gap:9px;padding:13px 13px;border-bottom:1px solid rgba(255,255,255,.07)} .asb__av{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#6366f1,#a855f7);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex:none} .asb__ws div{min-width:0;flex:1} .asb__ws b{display:block;color:#fff;font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .asb__ws span{display:block;color:#6f7291;font-size:10.5px} .asb__ws em{color:#6f7291;font-style:normal;font-size:11px} .asb__srch{margin:11px 11px 6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:6px 9px;display:flex;align-items:center;gap:7px;color:#6f7291;font-size:11.5px} .asb__srch .ic{width:12px;height:12px} .asb__srch kbd{margin-left:auto;background:rgba(255,255,255,.07);border-radius:4px;padding:1px 5px;font-size:9.5px;font-family:inherit;color:#8b8eb0} .asb__grp{padding:11px 13px 5px;font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#5c5f7d} .asb__nav{display:flex;flex-direction:column;gap:1px;padding:0 8px} .asb__nav a{display:flex;align-items:center;gap:9px;padding:6.5px 9px;border-radius:6px;font-size:12.5px;font-weight:450;color:#9a9dbb;white-space:nowrap} .asb__nav a .ic{width:14px;height:14px;opacity:.85;flex:none} .asb__nav a.on{background:rgba(255,255,255,.09);color:#fff;font-weight:550} .asb__nav a .n{margin-left:auto;background:rgba(255,255,255,.09);border-radius:20px;padding:1px 6px;font-size:9.5px;color:#a8abc9;font-weight:600} .asb__nav a.on .n{background:#6366f1;color:#fff} .asb__foot{margin-top:auto;padding:11px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:8px} .asb__foot .fc{width:26px;height:26px} .asb__foot b{color:#c9cbe4;font-size:11.5px;font-weight:500;display:block;line-height:1.25} .asb__foot span{color:#5c5f7d;font-size:10px} /* ---- main column ---- */ .amn{display:flex;flex-direction:column;background:#fbfbfd;min-width:0} .atop{display:flex;align-items:center;gap:12px;padding:11px 18px;background:#fff;border-bottom:1px solid #e9eaf2} .atop__bc{font-size:12.5px;color:#8b8fa8;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .atop__bc b{color:#12141f;font-weight:650;overflow:hidden;text-overflow:ellipsis} .atop .faces,.atop__btn{flex:none} .atop__bc i{opacity:.4;font-style:normal} .atop__sp{flex:1} .atop__btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e4ee;border-radius:7px;padding:5.5px 11px;font-size:12px;font-weight:550;color:#3d4257;background:#fff} .atop__btn .ic{width:12px;height:12px;opacity:.6} .atop__btn--p{background:#4f46e5;border-color:#4f46e5;color:#fff} .atop__btn--p .ic{opacity:1} .faces{display:flex;align-items:center} .faces .fc{width:26px;height:26px;margin-left:-8px} .faces .fc:first-child{margin-left:0} .atabs{display:flex;gap:3px;padding:0 18px;background:#fff;border-bottom:1px solid #e9eaf2;overflow-x:auto;scrollbar-width:none} .atabs::-webkit-scrollbar{display:none} .atabs a{flex:none;white-space:nowrap} .atabs a{padding:9px 12px;font-size:12.5px;font-weight:550;color:#8b8fa8;border-bottom:2px solid transparent;margin-bottom:-1px} .atabs a.on{color:#4f46e5;border-bottom-color:#4f46e5} .abody{padding:16px 18px;overflow:hidden;flex:1} .afilters{display:flex;align-items:center;gap:7px;margin-bottom:13px;flex-wrap:wrap} .afil{display:inline-flex;align-items:center;gap:5px;border:1px solid #e2e4ee;background:#fff;border-radius:6px;padding:4.5px 9px;font-size:11.5px;color:#5b6076;font-weight:500} .afil .ic{width:11px;height:11px;opacity:.5} .afil--on{background:#eef0ff;border-color:#c9cdf7;color:#4338ca;font-weight:600} /* stat row */ .astats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px} .astat{background:#fff;border:1px solid #e9eaf2;border-radius:10px;padding:12px 13px} .astat span{display:block;font-size:10.5px;color:#8b8fa8;font-weight:550;letter-spacing:.02em} .astat b{display:block;font-size:20px;font-weight:750;color:#12141f;letter-spacing:-.03em;line-height:1.25;margin-top:3px} .astat i{font-style:normal;font-size:10.5px;font-weight:650;display:inline-flex;align-items:center;gap:3px} .astat .u{color:#059669}.astat .d{color:#e11d48} .astat__spark{display:flex;align-items:flex-end;gap:2.5px;height:22px;margin-top:9px} .astat__spark s{flex:1;background:linear-gradient(to top,#c7cbf0,#e3e5f8);border-radius:2px;text-decoration:none;min-height:2px} /* real data table */ .atbl{background:#fff;border:1px solid #e9eaf2;border-radius:10px;overflow:hidden} .atbl__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid #e9eaf2} .atbl__h span{flex:none} .atbl__h b{font-size:12.5px;font-weight:650;color:#12141f} .atbl__h span{font-size:11px;color:#8b8fa8} .atbl table{width:100%;border-collapse:collapse} .atbl th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#9296ad;padding:8px 14px;background:#fafbfd;border-bottom:1px solid #eef0f5} .atbl td{padding:9px 14px;border-bottom:1px solid #f2f3f8;font-size:12px;color:#4a4f66;vertical-align:middle;white-space:nowrap} .atbl th{white-space:nowrap} .atbl tr:last-child td{border-bottom:none} .atbl .nm{color:#12141f;font-weight:600;display:flex;align-items:center;gap:8px} .atbl .sw{width:7px;height:7px;border-radius:2px;flex:none} .who{display:flex;align-items:center;gap:7px} .who .fc{width:22px;height:22px} .st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2.5px 8px;border-radius:20px} .st::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .st--go{background:#ecfdf5;color:#047857} .st--wa{background:#fffbeb;color:#b45309} .st--ri{background:#fff1f2;color:#be123c} .st--in{background:#eef0ff;color:#4338ca} .st--nu{background:#f3f4f8;color:#6b7086} .prog{display:flex;align-items:center;gap:8px;min-width:98px} .prog s{flex:1;height:5px;background:#eceef5;border-radius:20px;overflow:hidden;text-decoration:none} .prog s b{display:block;height:100%;border-radius:20px} .prog em{font-style:normal;font-size:11px;color:#6b7086;font-weight:600;width:30px;text-align:right} /* gantt inside app */ .agantt{background:#fff;border:1px solid #e9eaf2;border-radius:10px;padding:14px;margin-top:12px} .agantt__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px} .agantt__h b{font-size:12.5px;font-weight:650;color:#12141f} .agantt__h span{font-size:11px;color:#8b8fa8} .agantt__q{display:grid;grid-template-columns:118px repeat(4,1fr);gap:0;font-size:9.5px;color:#9296ad;font-weight:650;letter-spacing:.05em;margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid #f0f1f6} .agantt__q i{font-style:normal;text-align:center} .agr{display:grid;grid-template-columns:118px 1fr;gap:0;align-items:center;padding:4px 0} .agr em{font-style:normal;font-size:11.5px;color:#4a4f66;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px} .agr__t{position:relative;height:20px;background:linear-gradient(90deg,#f4f5f9 1px,transparent 1px) 0 0/25% 100%;border-radius:4px} .agr__t b{position:absolute;top:3px;bottom:3px;border-radius:4px;display:flex;align-items:center;padding:0 7px;font-size:9.5px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden} .agr__t s{position:absolute;top:3px;bottom:3px;border-radius:4px;border:1.5px dashed #c9cdd9;text-decoration:none} /* file browser */ .afiles{display:grid;grid-template-columns:186px 1fr;gap:12px} .atree{background:#fff;border:1px solid #e9eaf2;border-radius:10px;padding:9px} .atree a{display:flex;align-items:center;gap:7px;padding:5.5px 8px;border-radius:6px;font-size:11.5px;color:#5b6076;font-weight:500} .atree a.on{background:#eef0ff;color:#4338ca;font-weight:650} .atree a .ic{width:13px;height:13px;opacity:.75;flex:none} .atree .l1{padding-left:22px} .atree .n{margin-left:auto;font-size:10px;color:#a3a7bd} /* transcript / activity */ .achat{background:#fff;border:1px solid #e9eaf2;border-radius:10px;padding:14px} .acmsg{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid #f4f5f9} .acmsg:last-child{border-bottom:none} .acmsg i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;font-style:normal;flex:none} .acmsg div{min-width:0} .acmsg b{font-size:11.5px;color:#12141f;font-weight:650;display:block} .acmsg b s{text-decoration:none;color:#a3a7bd;font-weight:500;margin-left:6px;font-size:10.5px} .acmsg p{font-size:11.5px;color:#5b6076;line-height:1.5;margin-top:1px} /* two-column split inside app */ .asplit{display:grid;grid-template-columns:1fr 1fr;gap:12px} .apanel{background:#fff;border:1px solid #e9eaf2;border-radius:10px;padding:14px} .apanel__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px} .apanel__h b{font-size:12.5px;font-weight:650;color:#12141f} .apanel__h span{font-size:11px;color:#8b8fa8} .doc{padding:9px 0;border-bottom:1px solid #f4f5f9;font-size:11.5px;color:#5b6076;line-height:1.55} .doc:last-child{border-bottom:none} .doc b{display:block;color:#12141f;font-weight:650;font-size:11.5px;margin-bottom:2px} .acols{display:grid;gap:9px} .abar{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#5b6076} .abar em{font-style:normal;width:78px;flex:none} .abar s{flex:1;height:7px;background:#eceef5;border-radius:20px;overflow:hidden;text-decoration:none} .abar s b{display:block;height:100%;border-radius:20px} .abar u{text-decoration:none;font-size:11px;font-weight:650;color:#12141f;width:34px;text-align:right} /* chart in app */ .achart{display:flex;align-items:flex-end;gap:10px;height:104px;padding-top:6px} .achart div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px} .achart div s{width:100%;display:flex;align-items:flex-end;gap:2px;height:88px;text-decoration:none} .achart div s b{flex:1;border-radius:3px 3px 0 0} .achart div em{font-style:normal;font-size:9.5px;color:#9296ad} .c-ind{background:#6366f1}.c-vio{background:#a855f7}.c-cya{background:#06b6d4} .c-amb{background:#f59e0b}.c-eme{background:#10b981}.c-ros{background:#f43f5e} .c-ind-l{background:#dfe1fb}.c-eme-l{background:#d6f5e6} @media (max-width:660px){ .app{grid-template-columns:1fr;min-height:0} .asb{display:none} .astats{grid-template-columns:1fr 1fr} .afiles,.asplit{grid-template-columns:1fr} .atbl{overflow-x:auto} } /* app icon masks */ .ic--home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E")} .ic--task{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E")} .ic--folder{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")} .ic--doc{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E")} .ic--mic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3C/svg%3E")} .ic--lock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")} .ic--people{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")} .ic--cash{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E")} .ic--chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E")} .ic--clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")} .ic--search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")} .ic--filter{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E")} .ic--plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")} .ic--chev{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")} .ic--cog{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E")} .ic--dl{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E")} .ic--shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")} .ic--spark{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E")} .ic--grid{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E")} /* ====== SPOTS ====== */ /* ========================================================================= PRODUCT VIGNETTES — composed for a ~620px column. Fixed proportions, nothing wraps, nothing clips. Motion on reveal. ========================================================================= */ .cv-spot{ position:relative;border-radius:26px;padding:26px;min-width:0; background:linear-gradient(150deg,var(--p1),var(--p2)); isolation:isolate;overflow:visible; } .cv-spot__glow{ position:absolute;inset:0;border-radius:26px;z-index:-1;pointer-events:none; background:radial-gradient(60% 55% at 78% 8%,rgba(255,255,255,.85),transparent 70%); } .cv-spot__chip{ position:absolute;left:-6px;bottom:-14px;z-index:3; background:#fff;border-radius:100px;padding:7px 8px; box-shadow:0 2px 6px rgba(10,10,18,.07),0 16px 34px -10px rgba(10,10,18,.24); } .cv-spot__chip .cv-cp{font-size:11.5px} .cv-sp{ background:#fff;border-radius:15px;overflow:hidden;min-width:0; border:1px solid rgba(16,18,38,.07); box-shadow:0 1px 2px rgba(10,10,18,.05),0 18px 40px -14px rgba(10,10,18,.26); font-size:13px;color:#242838; } .cv-sp__h{ display:flex;align-items:center;gap:9px;padding:13px 15px; border-bottom:1px solid #eef0f6;background:#fcfcfe;white-space:nowrap; overflow:hidden;min-width:0; } .cv-sp__h b{overflow:hidden;text-overflow:ellipsis} .cv-sp__h b{font-weight:700;font-size:13.2px;color:#12141f;letter-spacing:-.01em} .cv-sp__mut{color:#8a90a6;font-size:12px;font-weight:500} .cv-sp__h .cv-sp__mut+.cv-cp,.cv-sp__h .cv-cp{margin-left:auto} .cv-sp__d{width:9px;height:9px;border-radius:3px;flex:none} .cv-sp__b{padding:15px;min-width:0} .cv-sp__f{padding:13px 15px;border-top:1px solid #eef0f6;background:#fbfbfe} .cv-cp{ display:inline-flex;align-items:center;gap:5px;flex:none; font-size:11.5px;font-weight:650;line-height:1;padding:5px 9px;border-radius:100px; background:#f1f2f7;color:#5c6379;white-space:nowrap; } .cv-cp--i{background:#eef2ff;color:#4338ca} .cv-cp--g{background:#dcfce7;color:#15803d} .cv-cp--w{background:#fef3c7;color:#a16207} .cv-cp--r{background:#fee2e2;color:#b91c1c} .cv-cp--n{background:#f1f2f7;color:#5c6379} .cv-cp::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.65} .cv-hint{font-size:12.5px;line-height:1.55;color:#5c6379} .cv-hint--w{color:#92400e} .fc{flex:none;border-radius:50%;display:block} /* ---------------------------------------------------------------- gantt */ .cv-sp--gantt .cv-sp__b{padding:14px 15px 18px;position:relative} .cv-gq{display:grid;grid-template-columns:148px 1fr;align-items:center;margin-bottom:10px} .cv-gq>div{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid #eef0f6} .cv-gq i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#a3a8bd; text-align:center;border-right:1px solid #eef0f6;padding-bottom:6px} .cv-gr{display:grid;grid-template-columns:148px 1fr;align-items:center;height:32px} .cv-gr--slip{height:40px} .cv-gr em{font-style:normal;font-size:12.2px;font-weight:600;color:#414759; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px} .cv-gt{position:relative;height:100%; background:repeating-linear-gradient(90deg,#eef0f6 0 1px,transparent 1px 25%)} .cv-gt b{position:absolute;top:9px;left:var(--l);width:var(--w);height:13px;border-radius:7px; transform-origin:left center} .cv-gt s{position:absolute;top:26px;height:7px;border-radius:4px; border:1.4px dashed #b6bccd;background:transparent;text-decoration:none} .cv-gr--slip .cv-gt b{top:5px} .cv-gt u{position:absolute;top:3px; font-size:10.5px;font-weight:700;color:#b91c1c;background:#fee2e2; padding:3px 7px;border-radius:100px;text-decoration:none;white-space:nowrap} .cv-gnow{position:absolute;left:calc(148px + 15px + 52%);top:44px;bottom:14px;width:1.6px; background:linear-gradient(#f43f5e,rgba(244,63,94,.15))} .cv-gnow span{position:absolute;top:-19px;left:50%;transform:translateX(-50%); font-size:10px;font-weight:700;color:#fff;background:#f43f5e;padding:2px 6px;border-radius:5px} .rv.in .cv-gt b{animation:cvgbar .85s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.12s * var(--i))} @keyframes cvgbar{from{transform:scaleX(0);opacity:.4}to{transform:scaleX(1);opacity:1}} /* ---------------------------------------------------------------- board */ .cv-sp--board .cv-sp__b{padding:13px;background:#f7f8fc} .cv-kb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .cv-kcol{min-width:0} .cv-kcol__h{display:flex;align-items:center;gap:6px;font-size:11.6px;font-weight:700;color:#414759; padding:0 3px 9px;white-space:nowrap;overflow:hidden} .cv-kcol__h i{font-style:normal;margin-left:auto;font-size:10.5px;color:#9096ab; background:#eceef5;border-radius:100px;padding:1px 6px} .cv-kc{background:#fff;border:1px solid #e9ebf3;border-radius:10px;padding:10px;margin-bottom:8px; box-shadow:0 1px 2px rgba(10,10,18,.05)} .cv-kc__t{display:block;font-size:12.2px;font-weight:640;color:#1b1e2c;line-height:1.35; margin-bottom:9px} .cv-kc__f{display:flex;align-items:center;gap:6px} .cv-kc__f span{font-size:11px;font-weight:650;color:#7a8098;margin-left:auto} .cv-kadd{font-size:11.5px;font-weight:600;color:#a3a8bd;padding:5px 3px} .rv.in .cv-kc{animation:cvpop .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.07s * var(--i))} @keyframes cvpop{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}} /* -------------------------------------------------------------- meeting */ .cv-sp--mtg .cv-sp__h{background:#14162a;border-bottom-color:#252843} .cv-sp--mtg .cv-sp__h b{color:#fff} .cv-sp--mtg .cv-sp__h .cv-sp__mut{color:#8b91ad;font-variant-numeric:tabular-nums} .cv-rec{width:9px;height:9px;border-radius:50%;background:#f43f5e;flex:none; box-shadow:0 0 0 0 rgba(244,63,94,.6);animation:cvrec 2s infinite} @keyframes cvrec{70%{box-shadow:0 0 0 8px rgba(244,63,94,0)}100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}} .cv-wave{display:flex;align-items:center;gap:2.5px;margin-left:auto;height:20px} .cv-wave i{width:2.5px;border-radius:2px;background:linear-gradient(#818cf8,#c084fc); height:5px;animation:cvwv 1.15s ease-in-out infinite;animation-delay:calc(var(--i) * -.08s)} @keyframes cvwv{0%,100%{height:4px;opacity:.55}50%{height:17px;opacity:1}} .cv-tr{display:flex;flex-direction:column;gap:11px} .cv-trl{display:flex;gap:9px;align-items:flex-start} .cv-trl>div{min-width:0} .cv-trl b{display:block;font-size:11.6px;font-weight:700;color:#6d738d;margin-bottom:2px} .cv-trl p{margin:0;font-size:12.8px;line-height:1.45;color:#242838; background:#f4f5fa;border-radius:3px 11px 11px 11px;padding:8px 11px} .rv.in .cv-trl{animation:cvslidein .55s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(.35s + .45s * var(--i))} @keyframes cvslidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .cv-aihd{display:flex;align-items:center;gap:9px;margin-bottom:10px} .cv-aib{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700; padding:5px 10px;border-radius:100px;color:#fff; background:linear-gradient(120deg,#6366f1,#a855f7 55%,#ec4899)} .cv-aib::before{content:"✦";font-size:11px} .cv-ac{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff; border:1px solid #e9ebf3;border-radius:9px;margin-top:7px} .cv-ac__t{font-size:12.4px;font-weight:600;color:#242838;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;flex:1} .cv-ac__x{width:15px;height:15px;border-radius:4px;border:1.8px solid #cbd0e0;flex:none} .cv-ac__x--on{background:#10b981;border-color:#10b981;position:relative} .cv-ac__x--on::after{content:"";position:absolute;left:4.4px;top:1.4px;width:4px;height:8px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)} .rv.in .cv-ac{animation:cvpop .5s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(1.75s + .18s * var(--i))} /* ------------------------------------------------------------- approval */ .cv-docr{display:flex;align-items:center;gap:11px;padding:12px;background:#f7f8fc; border:1px solid #e9ebf3;border-radius:11px;margin-bottom:18px} .cv-docr>div{min-width:0;flex:1} .cv-docr b{display:block;font-size:13px;font-weight:700;color:#12141f;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .cv-docr span{font-size:11.8px;color:#7a8098} .cv-ft{font-size:9.6px;font-weight:800;letter-spacing:.04em;color:#fff;padding:6px 7px; border-radius:6px;flex:none;background:#6b7280} .cv-ft--pdf{background:#dc2626}.cv-ft--xls{background:#059669} .cv-ft--dwg{background:#2563eb}.cv-ft--doc{background:#4f46e5} .cv-chain{display:grid;grid-template-columns:repeat(3,1fr);position:relative;padding:4px 0 2px} .cv-chain__l{position:absolute;top:26px;left:16%;right:16%;height:2.5px;border-radius:2px; background:linear-gradient(90deg,#10b981 0 58%,#e5e7f0 58%)} .cv-cn{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:1} .cv-cn__a{position:relative} .cv-cn__m{position:absolute;right:-3px;bottom:-2px;width:19px;height:19px;border-radius:50%; display:grid;place-items:center;border:2.4px solid #fff} .cv-cn__m--ok{background:#10b981} .cv-cn__m--ok svg{width:11px;height:11px} .cv-cn__m--w{background:#f59e0b;animation:cvrec 2s infinite;box-shadow:0 0 0 0 rgba(245,158,11,.55)} .cv-cn b{font-size:12px;font-weight:700;color:#12141f;white-space:nowrap} .cv-cn span{font-size:11.2px;color:#8a90a6} .rv.in .cv-cn{animation:cvpop .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.2s * var(--i))} .rv.in .cv-chain__l{animation:cvwipe .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.15s} @keyframes cvwipe{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}} /* ---------------------------------------------------------------- files */ .cv-sp--files .cv-sp__b{padding:9px} .cv-sbox{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:11.8px; color:#9096ab;background:#f1f2f7;border-radius:8px;padding:6px 8px;font-weight:500} .cv-sbox kbd{font:inherit;font-size:10.5px;font-weight:700;background:#fff;border:1px solid #e0e3ee; border-radius:4px;padding:1px 5px;color:#7a8098} .cv-fr{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px} .cv-fr:hover{background:#f7f8fc} .cv-fr__n{font-size:12.7px;font-weight:620;color:#242838;flex:1;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cv-ver{font-size:10.6px;font-weight:700;color:#6d738d;background:#f1f2f7;border-radius:5px; padding:2px 6px;flex:none} .rv.in .cv-fr{animation:cvslidein .45s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(.06s * var(--i))} /* ------------------------------------------------------------ data room */ .cv-lockic{width:17px;height:17px;flex:none;border-radius:4px;background:#4338ca;position:relative} .cv-lockic::after{content:"";position:absolute;left:5.5px;top:4px;width:6px;height:5px; border:1.8px solid #fff;border-bottom:none;border-radius:3px 3px 0 0} .cv-lockic::before{content:"";position:absolute;left:6.5px;top:8.5px;width:4px;height:4.5px; background:#fff;border-radius:1px} .cv-rmg{display:grid;grid-template-columns:1fr 1fr;gap:11px} .cv-rmp{background:#f7f8fc;border:1px solid #e9ebf3;border-radius:11px;padding:11px;min-width:0} .cv-rmp__t{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;color:#9096ab; margin-bottom:9px} .cv-tgl{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.2px; font-weight:600;color:#414759;white-space:nowrap} .cv-tgl i{margin-left:auto;width:30px;height:17px;border-radius:100px;background:#d5d9e6; position:relative;flex:none;transition:background .3s} .cv-tgl i::after{content:"";position:absolute;top:2.4px;left:2.4px;width:12px;height:12px; border-radius:50%;background:#fff;transition:transform .3s; box-shadow:0 1px 2px rgba(0,0,0,.2)} .cv-tgl i.on{background:#10b981} .cv-tgl i.on::after{transform:translateX(13px)} .cv-wm{margin-top:9px;padding-top:9px;border-top:1px dashed #dfe3ee;font-size:11.2px; color:#7a8098;line-height:1.4} .cv-rmp--l{background:#fff} .cv-lg{display:flex;align-items:center;gap:6px;padding:5px 0;font-size:11.4px;white-space:nowrap} .cv-lg b{font-weight:700;color:#242838} .cv-lg span{color:#7a8098;overflow:hidden;text-overflow:ellipsis;min-width:0} .cv-lg em{font-style:normal;margin-left:auto;color:#a3a8bd;font-variant-numeric:tabular-nums} .rv.in .cv-tgl i{animation:none} .rv.in .cv-lg{animation:cvslidein .45s backwards;animation-delay:calc(.4s + .12s * var(--i))} /* --------------------------------------------------------------- people */ .cv-pstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px} .cv-pstrip div{background:#f7f8fc;border-radius:10px;padding:9px 10px;min-width:0} .cv-pstrip b{display:block;font-size:17px;font-weight:800;color:#12141f;letter-spacing:-.02em} .cv-pstrip span{font-size:10.8px;color:#8a90a6;font-weight:600;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;display:block} .cv-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .cv-pcard{background:#fff;border:1px solid #e9ebf3;border-radius:12px;padding:12px 9px; text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0} .cv-pcard .fc{margin-bottom:4px} .cv-pcard b{font-size:12.2px;font-weight:700;color:#12141f;white-space:nowrap} .cv-pcard span{font-size:11px;color:#8a90a6;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:100%} .cv-pcard .cv-cp{margin-top:5px} .rv.in .cv-pcard{animation:cvpop .55s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(.07s * var(--i))} /* --------------------------------------------------------------- budget */ .cv-mstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:15px} .cv-mstrip div{border-left:2.5px solid #eef0f6;padding-left:10px} .cv-mstrip div:first-child{border-left-color:#6366f1} .cv-mstrip span{display:block;font-size:10.8px;font-weight:650;color:#8a90a6;margin-bottom:2px} .cv-mstrip b{font-size:18px;font-weight:800;color:#12141f;letter-spacing:-.025em} .cv-bg{display:grid;grid-template-columns:120px 1fr 74px;align-items:center;gap:11px; height:31px} .cv-bg em{font-style:normal;font-size:12.2px;font-weight:600;color:#414759;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .cv-bg__t{position:relative;height:16px;background:#f1f2f7;border-radius:8px;overflow:hidden} .cv-bg__t b{position:absolute;left:0;top:0;height:100%;width:var(--w);border-radius:8px; transform-origin:left} .cv-bg__t s{position:absolute;left:var(--w);top:-3px;height:22px;width:2.5px;background:#12141f; border-radius:2px;text-decoration:none;opacity:.72} .cv-bg__v{font-size:11.6px;font-weight:700;color:#5c6379;text-align:right; font-variant-numeric:tabular-nums;white-space:nowrap} .cv-bg__v.cv-bad{color:#b45309} .cv-lgd{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:11.2px; font-weight:600;color:#8a90a6} .cv-lgd i{width:11px;height:11px;border-radius:3px;background:#6366f1;flex:none} .cv-lgd .cv-lgd__b{width:2.5px;height:13px;border-radius:2px;background:#12141f;margin-left:12px} .rv.in .cv-bg__t b{animation:cvgbar .9s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(.1s * var(--i))} /* ---------------------------------------------------------------- chart */ .cv-chwrap{margin-bottom:14px} .cv-cht{width:100%;height:auto;display:block;overflow:visible} .cv-cht__l{stroke-dasharray:1400;stroke-dashoffset:0} .rv.in .cv-cht__l{animation:cvdraw 1.5s cubic-bezier(.4,0,.2,1) backwards} @keyframes cvdraw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}} .rv.in .cv-cht__a{animation:cvfadeup .9s ease backwards;animation-delay:.5s} @keyframes cvfadeup{from{opacity:0}to{opacity:1}} .rv.in .cv-cht__p{animation:cvpop .5s backwards;animation-delay:1.25s} .cv-chx{display:grid;grid-template-columns:repeat(12,1fr);margin-top:4px;padding:0 4px} .cv-chx i{font-style:normal;font-size:10.4px;font-weight:650;color:#a3a8bd;text-align:center} .cv-kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .cv-kt{background:#f7f8fc;border-radius:11px;padding:11px;min-width:0} .cv-kt span{display:block;font-size:10.8px;font-weight:650;color:#8a90a6;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;margin-bottom:2px} .cv-kt b{font-size:19px;font-weight:800;color:#12141f;letter-spacing:-.025em;display:block} .cv-kt i{font-style:normal;font-size:10.8px;font-weight:700} .cv-kt .up{color:#15803d}.cv-kt .cv-dn{color:#0369a1} /* ------------------------------------------------------ command palette */ .cv-pal{background:#14162a;border-radius:15px;overflow:hidden; border:1px solid rgba(255,255,255,.09); box-shadow:0 1px 2px rgba(10,10,18,.2),0 26px 54px -16px rgba(10,10,18,.55)} .cv-pal__q{display:flex;align-items:center;gap:11px;padding:15px 16px; border-bottom:1px solid rgba(255,255,255,.09)} .cv-pal__q .ic{width:17px;height:17px;background:#8b91ad;flex:none} .cv-pal__q>span{font-size:15px;font-weight:600;color:#fff;flex:1;display:flex;align-items:center} .cv-car{width:1.8px;height:17px;background:#818cf8;margin-left:2px;animation:cvblink 1.05s steps(1) infinite} @keyframes cvblink{50%{opacity:0}} .cv-pal__q kbd{font:inherit;font-size:10.5px;font-weight:700;color:#8b91ad; background:rgba(255,255,255,.08);border-radius:5px;padding:3px 7px} .cv-pal__g{font-size:10.2px;font-weight:800;letter-spacing:.1em;color:#6e7492;padding:12px 16px 6px} .cv-cr{display:flex;align-items:center;gap:11px;padding:9px 16px} .cv-cr.on{background:rgba(129,140,248,.14)} .cv-cr>div{min-width:0;flex:1} .cv-cr b{display:block;font-size:12.9px;font-weight:650;color:#fff;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .cv-cr span{font-size:11.4px;color:#8b91ad} .cv-cr em{font-style:normal;color:#818cf8;font-size:14px} .cv-cr__i{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;flex:none} .cv-cr__i .ic{width:15px;height:15px} .cv-pal__f{font-size:11.4px;color:#6e7492;padding:11px 16px; border-top:1px solid rgba(255,255,255,.09);margin-top:6px} .rv.in .cv-cr{animation:cvslidein .45s backwards;animation-delay:calc(.45s + .1s * var(--i))} /* ---------------------------------------------------------- certificate */ .cv-crt{border:1px solid #e9ebf3;border-radius:11px;overflow:hidden} .cv-crt__r{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:9px 12px;border-bottom:1px solid #f1f2f7;white-space:nowrap} .cv-crt__r:last-child{border-bottom:none} .cv-crt__r span{font-size:12.2px;color:#5c6379;font-weight:550} .cv-crt__r b{font-size:12.8px;font-weight:700;color:#12141f;font-variant-numeric:tabular-nums} .cv-crt__r--tot{background:#f7f8fc} .cv-crt__r--tot span{font-weight:700;color:#12141f} .cv-crt__r--tot b{font-size:15px;color:#4338ca} .cv-crt__p{display:flex;align-items:center;gap:11px;margin-top:13px;white-space:nowrap} .cv-crt__p span{font-size:11.6px;font-weight:650;color:#8a90a6} .cv-crt__bar{flex:1;height:9px;background:#f1f2f7;border-radius:100px;overflow:hidden} .cv-crt__bar b{display:block;height:100%;width:var(--w);border-radius:100px; background:linear-gradient(90deg,#6366f1,#a855f7);transform-origin:left} .cv-crt__p em{font-style:normal;font-size:12.6px;font-weight:800;color:#12141f} .rv.in .cv-crt__bar b{animation:cvgbar 1s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.25s} .cv-signrow{display:flex;align-items:center;gap:6px} .cv-signrow .fc{margin-right:-9px;box-shadow:0 0 0 2.4px #fbfbfe} .cv-signrow .cv-sp__mut{margin-left:14px} .cv-btnf{margin-left:auto;font-size:12px;font-weight:700;color:#fff;padding:8px 13px; border-radius:9px;background:linear-gradient(120deg,#4f46e5,#7c3aed);white-space:nowrap; box-shadow:0 2px 8px rgba(79,70,229,.32)} .cv-btno{font-size:12px;font-weight:700;color:#414759;padding:8px 13px;border-radius:9px; background:#fff;border:1px solid #e0e3ee;white-space:nowrap} /* -------------------------------------------------------------- insight */ .cv-ins{background:#fff;border-radius:15px;padding:17px; border:1px solid rgba(16,18,38,.07); box-shadow:0 1px 2px rgba(10,10,18,.05),0 18px 40px -14px rgba(10,10,18,.26)} .cv-ins__h{display:flex;align-items:center;gap:9px;margin-bottom:11px} .cv-ins__p{font-size:13.6px;line-height:1.6;color:#242838;margin:0 0 13px} .cv-ins__p b{font-weight:700;color:#12141f} .cv-ins__m{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px} .cv-ins__m div{background:#f7f8fc;border-radius:11px;padding:11px} .cv-ins__m span{display:block;font-size:10.8px;font-weight:650;color:#8a90a6;margin-bottom:2px} .cv-ins__m b{font-size:14.5px;font-weight:800;color:#12141f;letter-spacing:-.02em} .cv-ins__a{display:flex;gap:8px} .cv-ins__a .cv-btnf{margin-left:0} /* ---------------------------------------------------------------- phone */ .cv-phone{width:252px;margin:0 auto;background:#14162a;border-radius:32px;padding:9px; position:relative;box-shadow:0 3px 8px rgba(10,10,18,.16),0 30px 60px -18px rgba(10,10,18,.5)} .cv-phone__n{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:66px;height:5px; border-radius:100px;background:rgba(255,255,255,.28);z-index:2} .cv-phone__s{background:#fff;border-radius:24px;padding:26px 14px 14px;overflow:hidden} .cv-ph__h{display:flex;align-items:center;gap:7px;font-size:12.6px;font-weight:700;color:#12141f; margin-bottom:11px} .cv-ph__img{height:82px;border-radius:11px;margin-bottom:11px;position:relative; background:linear-gradient(150deg,#c7d2fe,#a5b4fc 45%,#818cf8);display:grid; place-items:end start;padding:9px} .cv-ph__img::after{content:"";position:absolute;right:9px;top:9px;width:22px;height:22px; border-radius:50%;background:rgba(255,255,255,.9)} .cv-ph__img span{font-size:10.4px;font-weight:700;color:#fff;position:relative; text-shadow:0 1px 3px rgba(0,0,0,.35)} .cv-ph__r{display:flex;justify-content:space-between;align-items:center;padding:7px 0; border-bottom:1px solid #f1f2f7;font-size:12.2px} .cv-ph__r span{color:#7a8098;font-weight:550} .cv-ph__r b{font-weight:700;color:#12141f} .cv-ph__cta{margin-top:12px;text-align:center;font-size:12.6px;font-weight:700;color:#fff; padding:11px;border-radius:11px;background:linear-gradient(120deg,#4f46e5,#7c3aed)} .cv-ph__off{margin-top:8px;text-align:center;font-size:10.6px;font-weight:600;color:#a16207; background:#fef3c7;border-radius:7px;padding:6px} /* ------------------------------------------------------------- builder */ .cv-sp--build .cv-sp__b{background:#f7f8fc;padding:13px} .cv-bld{display:grid;grid-template-columns:126px 1fr;gap:11px} .cv-pal2{background:#fff;border:1px solid #e9ebf3;border-radius:11px;padding:10px;min-width:0} .cv-pal2__t{display:block;font-size:9.8px;font-weight:800;letter-spacing:.1em;color:#a3a8bd; margin-bottom:8px} .cv-pb{display:block;font-size:11.4px;font-weight:650;padding:6px 8px;border-radius:7px; margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab} .rv.in .cv-pb{animation:cvslidein .4s backwards;animation-delay:calc(.05s * var(--i))} .cv-bf{background:#fff;border:1px solid #e9ebf3;border-radius:11px;padding:12px;min-width:0} .cv-bf__t{display:block;font-size:12.6px;font-weight:800;color:#12141f;margin-bottom:10px} .cv-bfr{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#f7f8fc; border-radius:8px;margin-bottom:7px;white-space:nowrap} .cv-bfr em{font-style:normal;font-size:11.2px;font-weight:650;color:#8a90a6;width:88px;flex:none} .cv-bfr i{font-style:normal;font-size:12.2px;font-weight:600;color:#242838;overflow:hidden; text-overflow:ellipsis} .cv-bfr__p{display:flex;align-items:center;gap:6px} .cv-bfr--drop{background:transparent;border:1.8px dashed #c7cddf;justify-content:center; animation:cvbreathe 2.4s ease-in-out infinite} .cv-bfr--drop em{width:auto;color:#9096ab} @keyframes cvbreathe{50%{border-color:#818cf8;background:rgba(129,140,248,.06)}} /* ----------------------------------------------------------------- risk */ .cv-sp--risk .cv-sp__b{padding:13px} .cv-rkg{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:12px} .cv-rkg>*{min-width:0} .cv-rk{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #f4f5fa; white-space:nowrap} .cv-rk:last-child{border-bottom:none} .cv-rk__n{font-size:12.2px;font-weight:600;color:#242838;flex:1;min-width:0;overflow:hidden; text-overflow:ellipsis} .cv-rk__s{font-size:11.2px;font-weight:650;color:#8a90a6;width:60px;text-align:right} .cv-heat{background:#f7f8fc;border-radius:11px;padding:10px} .cv-heat>span{display:block;font-size:9.8px;font-weight:700;color:#9096ab;margin-bottom:8px; line-height:1.3} .cv-heat__g{display:grid;grid-template-columns:repeat(5,1fr);gap:3px} .cv-heat__g i{aspect-ratio:1;border-radius:3px;font-style:normal;font-size:9.6px;font-weight:800; color:#12141f;display:grid;place-items:center} .rv.in .cv-rk{animation:cvslidein .45s backwards;animation-delay:calc(.06s * var(--i))} .rv.in .cv-heat__g i{animation:cvfadeup .5s backwards;animation-delay:calc(.3s + .02s * var(--i))} /* -------------------------------------------------------------- profile */ .cv-sp--prof .cv-sp__b{padding:17px} .cv-prof{display:flex;align-items:center;gap:13px;margin-bottom:15px} .cv-prof__i{min-width:0} .cv-prof__i b{display:block;font-size:16.5px;font-weight:800;color:#12141f;letter-spacing:-.02em} .cv-prof__i>span{font-size:12.4px;color:#7a8098} .cv-prof__c{display:flex;gap:6px;margin-top:7px} .cv-pgrid2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:15px} .cv-pcell{background:#f7f8fc;border-radius:11px;padding:10px 11px;min-width:0} .cv-pcell span{display:block;font-size:10.6px;font-weight:650;color:#8a90a6;margin-bottom:2px} .cv-pcell b{font-size:12.8px;font-weight:700;color:#12141f;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;display:block} .cv-tml{border-left:2px solid #eef0f6;padding-left:15px;margin-left:5px} .cv-tml__i{position:relative;padding:5px 0} .cv-tml__i::before{content:"";position:absolute;left:-20px;top:10px;width:8px;height:8px; border-radius:50%;background:#a5b4fc;border:2px solid #fff;box-shadow:0 0 0 1.5px #eef0f6} .cv-tml__i:first-child::before{background:#4f46e5} .cv-tml__i b{font-size:12.4px;font-weight:700;color:#242838;margin-right:8px} .cv-tml__i span{font-size:11.4px;color:#9096ab} .rv.in .cv-tml__i{animation:cvslidein .45s backwards;animation-delay:calc(.25s + .1s * var(--i))} /* ----------------------------------------------------------- board pack */ .cv-sp--pack .cv-sp__b{background:#f7f8fc;padding:16px 13px} .cv-pk{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;align-items:end} .cv-pk__pg{background:#fff;border:1px solid #e9ebf3;border-radius:9px;padding:11px; position:relative;box-shadow:0 8px 20px -10px rgba(10,10,18,.3)} .cv-pk__pg:nth-child(2){transform:translateY(-11px)} .cv-pk__n{position:absolute;top:-8px;right:-6px;width:21px;height:21px;border-radius:50%; background:#4f46e5;color:#fff;font-size:10.6px;font-weight:800;display:grid;place-items:center; border:2px solid #fff} .cv-pk__pg>i{display:block;height:4.5px;border-radius:3px;background:#e5e7f0;margin-bottom:5px} .cv-pk__pg>i.cv-w{width:58%} .cv-pk__ch{height:44px;margin:9px 0;border-radius:6px; background:linear-gradient(180deg,rgba(99,102,241,.28),rgba(99,102,241,.04)); border-bottom:2px solid #6366f1} .cv-pk__bars{height:44px;margin:9px 0;display:flex;align-items:flex-end;gap:4px} .cv-pk__bars s{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:#a855f7; text-decoration:none;transform-origin:bottom} .cv-pk__rows{height:44px;margin:9px 0;display:flex;flex-direction:column;justify-content:center;gap:5px} .cv-pk__rows u{height:5px;border-radius:3px;background:#fde68a;text-decoration:none} .cv-pk__rows u:nth-child(2){background:#fecaca;width:78%} .cv-pk__rows u:nth-child(3){background:#bbf7d0;width:88%} .cv-pk__rows u:nth-child(4){background:#e5e7f0;width:64%} .cv-pk__pg em{font-style:normal;font-size:10.6px;font-weight:700;color:#6d738d;display:block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rv.in .cv-pk__pg{animation:cvpop .55s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(.12s * var(--i,0))} .rv.in .cv-pk__bars s{animation:cvgrow .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.35s} @keyframes cvgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}} .cv-sendrow{display:flex;align-items:center;gap:6px} .cv-sendrow .fc{margin-right:-9px;box-shadow:0 0 0 2.4px #fbfbfe} .cv-sendrow .cv-sp__mut{margin-left:15px} /* ---------------------------------------------------------------- steps */ .cv-stps{margin-bottom:14px} .cv-stp{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #f4f5fa} .cv-stp:last-child{border-bottom:none} .cv-stp span{width:22px;height:22px;border-radius:50%;flex:none;border:2px solid #e0e3ee; position:relative} .cv-stp b{font-size:13.2px;font-weight:650;color:#414759} .cv-stp--done span{background:#10b981;border-color:#10b981} .cv-stp--done span::after{content:"";position:absolute;left:7px;top:3.4px;width:5px;height:9px; border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(43deg)} .cv-stp--done b{color:#12141f} .cv-stp--now span{border-color:#f59e0b;background:#fff;animation:cvrec 2s infinite; box-shadow:0 0 0 0 rgba(245,158,11,.5)} .cv-stp--now b{color:#12141f;font-weight:800} .cv-stp--next{opacity:.55} .rv.in .cv-stp{animation:cvslidein .45s backwards;animation-delay:calc(.1s * var(--i))} /* --------------------------------------------------------- icon tints */ .cv-i-i{background:#eef2ff}.cv-i-i .ic{background:#4338ca} .cv-i-v{background:#f5f3ff}.cv-i-v .ic{background:#6d28d9} .cv-i-t{background:#ecfeff}.cv-i-t .ic{background:#0e7490} .cv-i-e{background:#ecfdf5}.cv-i-e .ic{background:#047857} .cv-i-a{background:#fff7ed}.cv-i-a .ic{background:#c2410c} .cv-i-s{background:#f0f9ff}.cv-i-s .ic{background:#0369a1} .cv-i-r{background:#fdf2f8}.cv-i-r .ic{background:#be185d} .cv-i-w{background:#fefce8}.cv-i-w .ic{background:#a16207} .cv-pb.cv-i-i{background:#eef2ff;color:#4338ca}.cv-pb.cv-i-v{background:#f5f3ff;color:#6d28d9} .cv-pb.cv-i-t{background:#ecfeff;color:#0e7490}.cv-pb.cv-i-e{background:#ecfdf5;color:#047857} .cv-pb.cv-i-a{background:#fff7ed;color:#c2410c}.cv-pb.cv-i-s{background:#f0f9ff;color:#0369a1} .cv-pb.cv-i-r{background:#fdf2f8;color:#be185d}.cv-pb.cv-i-w{background:#fefce8;color:#a16207} /* ------------------------------------------------------------ responsive */ @media (max-width:1180px){ .cv-spot{padding:22px} .cv-bg{grid-template-columns:104px 1fr 70px} .cv-gq,.cv-gr{grid-template-columns:126px 1fr} .cv-gnow{left:calc(126px + 15px + 52%)} } @media (max-width:1100px){ .cv-rkg{grid-template-columns:minmax(0,1fr)} .cv-heat{display:none} } @media (max-width:900px){ .cv-spot{padding:20px} .cv-rmg{grid-template-columns:1fr} .cv-rkg{grid-template-columns:1fr} .cv-heat{display:none} } @media (max-width:640px){ .cv-spot{padding:15px;border-radius:20px} .cv-sp__h .cv-sp__mut{display:none} .cv-sp__h{gap:7px;padding:11px 12px} .cv-sp__b{padding:11px} .cv-spot__chip{left:0;bottom:-12px} .cv-pstrip{grid-template-columns:repeat(2,1fr)} .cv-pgrid{grid-template-columns:repeat(2,1fr)} .cv-kb{grid-template-columns:1fr} .cv-kcol:nth-child(n+3){display:none} .cv-pk{grid-template-columns:1fr 1fr} .cv-pk__pg:nth-child(3){display:none} .cv-bld{grid-template-columns:1fr} .cv-pal2{display:flex;gap:5px;overflow:hidden} .cv-pal2__t{display:none} .cv-pb{margin-bottom:0} .cv-gq,.cv-gr{grid-template-columns:92px 1fr} .cv-gr em{font-size:11.2px} .cv-gnow{display:none} .cv-gt u{display:none} .cv-rk__s{display:none} .cv-rk__n{font-size:11.6px} .cv-rk{gap:6px} .cv-bg{grid-template-columns:82px 1fr 62px} .cv-ins__m{grid-template-columns:1fr} .cv-kgrid,.cv-mstrip{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion:reduce){ .rv.in *,.cv-wave i,.cv-rec,.cv-car,.cv-bfr--drop{animation:none!important} } /* very narrow legacy phones (320px) */ @media (max-width:359px){ .shot__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px} .cv-cp{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block; line-height:1.5;padding:4px 8px} .cv-cp::before{display:none} .cv-mstrip b,.cv-kt b,.cv-pstrip b{font-size:15px} .cv-crt__r{gap:8px} .cv-crt__r span,.cv-crt__r b{font-size:11.4px} .steps li,.sec li{overflow-wrap:anywhere} .wrap{padding-inline:16px} } /* ---------- Solutions menu ---------- */ .drop__menu--sol{grid-template-columns:1fr;min-width:390px;padding:10px} .drop__grp{display:block;font-size:.64rem;font-weight:800;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-3);padding:12px 10px 6px} .drop__grp:first-child{padding-top:6px} .drop__flag{background:linear-gradient(120deg,var(--iris-l),var(--violet-l)); border-radius:12px} .drop__all{display:block;padding:12px 10px 8px;font-size:.84rem;font-weight:700; color:var(--iris-2);border-top:1px solid var(--line-2);margin-top:8px} .drop__all:hover{color:var(--violet-2)} @media (max-width:1000px){ .drop__menu--sol{min-width:0;width:100%} .drop__grp{padding:10px 4px 4px} } /* ---------- Editions grid (landing + solutions hub) ---------- */ .eds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ed{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl); padding:24px;transition:transform .28s var(--e2),box-shadow .28s,border-color .28s;min-width:0} .ed:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:#d8d8f0} .ed__i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px} .ed__i .ic{width:21px;height:21px} .ed h3{font-size:1.12rem;margin-bottom:7px;letter-spacing:-.022em} .ed p{font-size:.93rem;color:var(--ink-2);line-height:1.6;margin-bottom:14px} .ed__l{display:flex;flex-wrap:wrap;gap:6px} .ed__l span{font-size:.72rem;font-weight:650;color:var(--ink-3);background:var(--paper-2); border-radius:100px;padding:4px 9px;white-space:nowrap} .ed__go{margin-top:16px;font-size:.87rem;font-weight:700;color:var(--iris-2);display:inline-block} /* the stack diagram: one core, many editions */ .stack{display:grid;gap:14px;max-width:840px;margin-inline:auto} .stack__row{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:20px 24px} .stack__row--core{background:linear-gradient(120deg,#12122a,#1d1b3f);border-color:transparent; color:#fff;box-shadow:var(--sh-3)} .stack__row--core h4{color:#fff} .stack__row h4{font-size:1rem;margin-bottom:5px;letter-spacing:-.02em} .stack__row p{font-size:.9rem;color:var(--ink-3);margin:0} .stack__row--core p{color:#a9abd4} .stack__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .stack__chips span{font-size:.75rem;font-weight:650;padding:5px 10px;border-radius:100px; background:rgba(255,255,255,.09);color:#c9cbe8} .stack__row:not(.stack__row--core) .stack__chips span{background:var(--paper-2);color:var(--ink-2)} .stack__arrow{display:grid;place-items:center;color:var(--ink-3);font-size:1.1rem;line-height:1} @media (max-width:900px){ .eds{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .eds{grid-template-columns:1fr} .ed{padding:20px} } /* ========================================================================= SWIPE GALLERY — drag or flick through the real screens ========================================================================= */ .gal{position:relative} .gal__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:8px 0 26px; scrollbar-width:none;-ms-overflow-style:none;cursor:grab} .gal__track::-webkit-scrollbar{display:none} .gal__track.drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none} .gal__s{flex:0 0 min(760px,86%);scroll-snap-align:center;min-width:0; transition:opacity .4s var(--e2),transform .4s var(--e2)} .gal__s:not(.on){opacity:.42;transform:scale(.965)} .gal__cap{display:flex;align-items:baseline;gap:11px;margin-bottom:13px;flex-wrap:wrap} .gal__cap b{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--ink); letter-spacing:-.02em} .gal__cap span{font-size:.88rem;color:var(--ink-3)} .gal__f{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line); box-shadow:var(--sh-4);background:#fff} .gal__f .shot{border-radius:0;box-shadow:none;border:none} .gal__f .app{border-radius:0;min-height:0} .gal__ui{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:6px} .gal__dots{display:flex;gap:8px} .gal__dot{width:8px;height:8px;border-radius:50%;background:var(--line);border:none;padding:0; cursor:pointer;transition:all .3s var(--e2)} .gal__dot.on{background:var(--iris);width:26px;border-radius:100px} .gal__nav{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff; display:grid;place-items:center;cursor:pointer;color:var(--ink-2); transition:all .25s var(--e2);flex:none} .gal__nav:hover{border-color:var(--iris);color:var(--iris-2);box-shadow:var(--sh-2)} .gal__nav svg{width:17px;height:17px} .gal__hint{text-align:center;font-size:.82rem;color:var(--ink-3);margin-top:14px} .gal__hint kbd{font:inherit;font-size:.76rem;font-weight:700;background:var(--paper-2); border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ink-2)} @media (max-width:760px){ .gal__s{flex:0 0 90%} .gal__nav{display:none} .gal__cap b{font-size:.96rem} } /* ========================================================================= EDITION SCREENS — every screen carries the data of its own industry ========================================================================= */ .ev-t{width:100%;border-collapse:collapse;font-size:12.2px;table-layout:fixed} .ev-t th:first-child,.ev-t td:first-child{width:32%} .ev-t th{text-align:left;font-size:9.9px;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:#9096ab;padding:0 10px 8px;white-space:nowrap} .ev-t td{padding:8px 10px;border-top:1px solid #f2f3f8;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;color:#3c4257} .ev-t tbody tr:first-child td{border-top:1px solid #eef0f6} .ev-t .nm{font-weight:650;color:#15182a} .ev-t .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:#15182a} .ev-t .who{display:flex;align-items:center;gap:7px} .ev-t .who .fc{width:21px;height:21px} .rv.in .ev-t tbody tr{animation:cvslidein .45s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(.05s * var(--i))} /* a coloured dot that classifies the row */ .ev-d{width:8px;height:8px;border-radius:3px;display:inline-block;margin-right:7px; vertical-align:middle;flex:none} /* KPI strip */ .ev-k{display:grid;gap:9px;margin-bottom:13px} .ev-k--4{grid-template-columns:repeat(4,1fr)} .ev-k--3{grid-template-columns:repeat(3,1fr)} .ev-k div{background:#f7f8fc;border-radius:11px;padding:10px 11px;min-width:0} .ev-k span{display:block;font-size:10.5px;font-weight:650;color:#8a90a6;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;margin-bottom:2px} .ev-k b{font-size:17px;font-weight:800;color:#12141f;letter-spacing:-.025em;display:block; line-height:1.15} .ev-k i{font-style:normal;font-size:10.4px;font-weight:700} .ev-k .u{color:#15803d}.ev-k .d{color:#b45309} /* horizontal comparison bars */ .ev-b{display:grid;grid-template-columns:118px 1fr 64px;align-items:center;gap:10px;height:29px} .ev-b em{font-style:normal;font-size:12px;font-weight:600;color:#414759;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .ev-b__t{height:14px;background:#f1f2f7;border-radius:7px;overflow:hidden;position:relative} .ev-b__t b{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:7px; transform-origin:left} .ev-b__v{font-size:11.4px;font-weight:700;color:#5c6379;text-align:right; font-variant-numeric:tabular-nums} .rv.in .ev-b__t b{animation:cvgbar .9s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(.08s * var(--i))} /* card grid — rooms, wards, classes */ .ev-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .ev-g__c{border:1px solid #e9ebf3;border-radius:10px;padding:9px;min-width:0;background:#fff} .ev-g__c b{display:block;font-size:12px;font-weight:750;color:#15182a;white-space:nowrap} .ev-g__c span{display:block;font-size:10.4px;color:#8a90a6;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;margin-top:1px} .ev-g__c em{font-style:normal;display:inline-block;margin-top:6px;font-size:9.8px; font-weight:750;padding:2px 6px;border-radius:100px} .ev-g__c--on{border-color:#c7d2fe;background:#f5f7ff} .rv.in .ev-g__c{animation:cvpop .5s cubic-bezier(.22,1,.36,1) backwards; animation-delay:calc(.04s * var(--i))} /* week roster */ .ev-r{display:grid;grid-template-columns:104px repeat(5,1fr);gap:4px;align-items:center} .ev-r__h{font-size:9.8px;font-weight:800;letter-spacing:.06em;color:#9096ab;text-align:center; text-transform:uppercase} .ev-r__n{font-size:11.6px;font-weight:600;color:#414759;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;display:flex;align-items:center;gap:6px} .ev-r__n .fc{width:19px;height:19px} .ev-r__c{height:24px;border-radius:6px;display:grid;place-items:center;font-size:9.6px; font-weight:750} .rv.in .ev-r__c{animation:cvpop .45s backwards;animation-delay:calc(.02s * var(--i))} /* two panels side by side */ .ev-s{display:grid;grid-template-columns:1fr 1fr;gap:11px} .ev-s__p{background:#f7f8fc;border:1px solid #e9ebf3;border-radius:11px;padding:11px;min-width:0} .ev-s__t{display:block;font-size:10.2px;font-weight:800;letter-spacing:.08em;color:#9096ab; margin-bottom:9px;text-transform:uppercase} .ev-s__r{display:flex;align-items:center;gap:7px;padding:5px 0;font-size:11.6px;white-space:nowrap} .ev-s__r b{font-weight:700;color:#242838;overflow:hidden;text-overflow:ellipsis;min-width:0} .ev-s__r span{color:#7a8098;margin-left:auto;font-variant-numeric:tabular-nums} @media (max-width:1180px){ .ev-b{grid-template-columns:96px 1fr 58px} .ev-g{grid-template-columns:repeat(3,1fr)} } @media (max-width:900px){ .ev-s{grid-template-columns:1fr} } @media (max-width:820px){ .ev-t th:nth-child(3),.ev-t td:nth-child(3){display:none} .ev-t th:first-child,.ev-t td:first-child{width:38%} } @media (max-width:560px){ .ev-t th:nth-child(4),.ev-t td:nth-child(4){display:none} .ev-t{font-size:11.4px} .ev-t th,.ev-t td{padding-left:7px;padding-right:7px} .ev-s__r{font-size:10.8px} } @media (max-width:640px){ .ev-k--4{grid-template-columns:1fr 1fr} .ev-g{grid-template-columns:1fr 1fr} .ev-r{grid-template-columns:76px repeat(5,1fr)} .ev-r__n{font-size:10.4px} .ev-b{grid-template-columns:70px 1fr 52px} .ev-t .hide-s{display:none} } /* footer legal links */ .foot__legal{display:flex;gap:22px;flex-wrap:wrap} .foot__legal a{font-size:.86rem;color:var(--night-tx);opacity:.72;transition:opacity .2s} .foot__legal a:hover{opacity:1;color:#fff} @media (max-width:660px){ .foot__legal{gap:16px} } /* legal + error pages: the hero sits directly on its prose */ .phero--solo{padding-bottom:24px} .phero--solo+.sec{padding-top:36px} /* phones: the app screen keeps its shape instead of collapsing */ @media (max-width:660px){ .mq__t{gap:44px;padding-right:44px} .mq__t img{height:28px;max-width:118px} .app{min-height:0} .amn{min-width:0} .atbl{overflow-x:auto;-webkit-overflow-scrolling:touch} .atabs{overflow-x:auto;scrollbar-width:none} .atabs::-webkit-scrollbar{display:none} .aviews,.mviews{overflow:hidden} } /* phones — these must sit after the base rules to win the cascade */ @media (max-width:660px){ .hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;justify-content:stretch} .hero__stats div{min-width:0;text-align:center} .hero__stats div b{font-size:1.3rem} .hero__stats div span{font-size:.7rem;line-height:1.3;display:block;letter-spacing:-.01em} .atop__bc{display:none} .atop{gap:8px} } @media (max-width:344px){ .hero__stats{grid-template-columns:1fr 1fr} .hero__stats div:last-child{grid-column:1/-1} } /* small caption under a table cell's heading */ .tbl__s{font-size:.8rem;color:var(--ink-3);margin-top:3px;font-weight:500} .tbl td .cv-cp{vertical-align:middle} /* ---------- brand assets ---------- */ .bagrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .ba{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff} .ba__p{display:grid;place-items:center;padding:40px 26px;background:var(--paper-2);min-height:170px} .ba__p--d{background:var(--night)} .ba__p img{max-width:200px;max-height:88px;width:auto;height:auto} .ba__m{padding:20px 22px;border-top:1px solid var(--line-2)} .ba__m b{display:block;font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-.02em} .ba__m>span{display:block;font-size:.88rem;color:var(--ink-3);margin-top:3px} .ba__l{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px} .ba__d{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700; color:var(--iris-2);background:var(--iris-l);border-radius:100px;padding:7px 14px; transition:background .2s,color .2s} .ba__d:hover{background:var(--iris);color:#fff} .swgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sw{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;min-width:0} .sw__c{display:block;height:64px;border-radius:10px;margin-bottom:13px} .sw b{display:block;font-size:.95rem;color:var(--ink);font-weight:700} .sw code{display:block;font-size:.82rem;color:var(--ink-3);margin:3px 0 7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .sw__u{font-size:.82rem;color:var(--ink-3);line-height:1.5} .gradbar{display:block;height:16px;border-radius:100px;max-width:520px;margin-inline:auto; background:linear-gradient(120deg,#6366f1,#a855f7 50%,#ec4899)} /* ---------- tutorials ---------- */ .tutgrp{margin-bottom:44px} .tutgrp h3{margin-bottom:18px} .tutlist{display:grid;gap:10px} .tut{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);padding:16px 20px;transition:border-color .22s,transform .22s,box-shadow .22s} .tut:hover{border-color:#cfcff0;transform:translateY(-2px);box-shadow:var(--sh-2)} .tut>div{flex:1;min-width:0} .tut b{display:block;font-size:.98rem;font-weight:650;color:var(--ink);letter-spacing:-.015em} .tut span{display:block;font-size:.88rem;color:var(--ink-3);margin-top:2px;line-height:1.5} .tut em{font-style:normal;font-size:.8rem;font-weight:700;color:var(--ink-3); background:var(--paper-2);border-radius:100px;padding:5px 11px;flex:none} .tut__i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none} .tut__i .ic{width:18px;height:18px} .doclist{list-style:none;margin-top:12px;display:grid;gap:8px} .doclist li{font-size:.9rem;color:var(--ink-2);padding-left:16px;position:relative;line-height:1.5} .doclist li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px; border-radius:50%;background:var(--iris);opacity:.5} @media (max-width:900px){ .bagrid{grid-template-columns:1fr} .swgrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .swgrid{grid-template-columns:1fr} .tut{padding:14px 15px;gap:11px} .tut em{display:none} .tut__i{width:32px;height:32px} } /* footer responsive */ @media (max-width:1180px){ .foot__g{grid-template-columns:1.4fr repeat(3,1fr);gap:30px} .foot__brand{grid-column:1/-1;max-width:none} .foot__tag{max-width:46ch} .foot__c{grid-auto-flow:column;grid-template-columns:none;width:fit-content; align-items:center;gap:20px} } @media (max-width:760px){ .foot__g{grid-template-columns:1fr 1fr;gap:28px 24px} .foot__c{grid-auto-flow:row;width:auto;align-items:start;gap:10px} .foot__loc{margin-top:0} } @media (max-width:460px){ .foot__g{grid-template-columns:1fr} .foot__b{flex-direction:column;align-items:flex-start;gap:12px} } /* ---------- floating WhatsApp ---------- */ .wafab{position:fixed;left:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center; gap:10px;background:#25d366;color:#08301a;border-radius:100px;padding:13px 19px; font-weight:750;font-size:.92rem;letter-spacing:-.01em; box-shadow:0 4px 12px rgba(10,10,18,.16),0 18px 40px -14px rgba(37,211,102,.7); transition:transform .24s var(--e2),box-shadow .24s} .wafab:hover{transform:translateY(-3px);color:#08301a; box-shadow:0 6px 16px rgba(10,10,18,.2),0 24px 50px -14px rgba(37,211,102,.85)} .wafab svg{width:21px;height:21px;flex:none} @media (max-width:660px){ .wafab{left:16px;bottom:16px;padding:13px;border-radius:50%} .wafab span{display:none} .wafab svg{width:23px;height:23px} } @media print{ .wafab{display:none} } /* wide comparison tables scroll inside their own box on phones */ @media (max-width:820px){ .ptable{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0; scrollbar-width:thin;border-radius:var(--r-xl)} .ptable>.tbl{min-width:600px} .ptable::after{content:"";display:block;height:2px} } @media (max-width:560px){ .ptable>.tbl{min-width:520px;font-size:.88rem} .tbl th,.tbl td{padding:12px 14px} } /* ========================================================================= v13 — a plainer, more credible look. One brand colour used sparingly, solid type, real borders, no glow. These rules come last on purpose: they win over the older ones above. ========================================================================= */ :root{ --iris:#4f46e5;--iris-2:#4338ca;--iris-d:#3730a3; --violet:#4f46e5;--violet-2:#4338ca;--pink:#4f46e5;--cyan:#0e7490; --iris-l:#eef0fb;--violet-l:#eef0fb;--cyan-l:#e8f4f7;--pink-l:#eef0fb; --ink:#0f1222;--ink-1:#1f2333;--ink-2:#4b5163;--ink-3:#737a8c; --line:#e4e6ec;--line-2:#eef0f4;--paper:#fff;--paper-2:#f8f9fb;--tint:#f5f6f8; --night:#0f1222;--night-1:#171a2b;--night-2:#1f2338;--night-line:rgba(255,255,255,.1);--night-tx:#a9aec0; --grad:var(--iris);--grad-2:var(--iris); --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --r:8px;--r-lg:10px;--r-xl:12px;--r-2xl:14px; --sh-1:0 1px 2px rgba(15,18,34,.05); --sh-2:0 1px 2px rgba(15,18,34,.05),0 4px 12px -4px rgba(15,18,34,.08); --sh-3:0 1px 2px rgba(15,18,34,.05),0 12px 32px -12px rgba(15,18,34,.14); --sh-4:0 2px 4px rgba(15,18,34,.05),0 24px 48px -16px rgba(15,18,34,.16); --sh-glow:none; } body{font-feature-settings:"cv11","ss01";letter-spacing:0} h1,h2,h3,h4{font-weight:650;letter-spacing:-.02em;line-height:1.12} .d1{font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:650;letter-spacing:-.028em;line-height:1.08} .d2{font-size:clamp(1.65rem,2.7vw,2.3rem);font-weight:650;letter-spacing:-.024em} .d3{font-weight:650;letter-spacing:-.015em} .lede{font-size:1.1rem;line-height:1.6} .grad,.grad-c{background:none;-webkit-background-clip:border-box;background-clip:border-box; color:inherit;-webkit-text-fill-color:currentColor} ::selection{background:var(--iris);color:#fff} /* eyebrow: a small label, not a pill */ .eyebrow[class]{background:none;border:none;padding:0;border-radius:0;color:var(--iris); font-size:.74rem;font-weight:650;letter-spacing:.08em;margin-bottom:14px} .eyebrow::before{display:none} .sec--night .eyebrow[class],.eb-w[class]{color:#a5b4fc} /* buttons: flat, one colour */ .btn{border-radius:8px;padding:11px 18px;font-weight:600;font-size:.93rem;transition:background .15s,border-color .15s,color .15s} .btn:hover,.btn--p:hover,.btn--g:hover,.btn--o:hover,.btn--w:hover,.btn--wo:hover{transform:none} .btn:hover svg,.btn--g:hover svg,.btn--p:hover svg{transform:none} .btn--g{background:var(--iris);box-shadow:none} .btn--g:hover{background:var(--iris-2);box-shadow:none} .btn--p{background:var(--ink);box-shadow:none} .btn--p:hover{background:#1f2333;box-shadow:none} .btn--o{border:1px solid #d3d6df;box-shadow:none} .btn--o:hover{border-color:#aeb3c1;box-shadow:none;background:var(--paper-2)} .btn--w{box-shadow:none} .btn--w:hover{background:#f1f2f6;box-shadow:none} .btn--wo{border:1px solid rgba(255,255,255,.28);background:transparent} .btn--wo:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)} .btn--lg{padding:13px 22px;font-size:.98rem;border-radius:9px} .btn--sm{padding:8px 14px;font-size:.86rem;border-radius:7px} .lnk{color:var(--iris);font-weight:600} .lnk:hover svg{transform:translateX(2px)} .sec--night .lnk{color:#a5b4fc} /* logo: a solid indigo tile */ .logo__m{background:var(--iris);box-shadow:none;border-radius:7px} .logo__t{font-weight:700;letter-spacing:-.03em} /* nav */ .nav{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)} .nav__in{height:64px} .nav__menu>a,.drop__btn{font-weight:500;color:var(--ink-1)} .drop__menu{border-radius:12px;box-shadow:var(--sh-4);border-color:var(--line)} .drop__menu a{border-radius:8px} .drop__ic{border-radius:8px} .i-i,.i-v,.i-c,.i-e,.i-a,.i-r,.i-p,.i-s,.i-t{background:var(--iris-l);color:var(--iris)} .drop__flag{background:var(--paper-2)} /* ---------- landing hero: white, left-aligned, the product underneath ---------- */ .hero{background:#fff;color:var(--ink-2);padding:64px 0 0;overflow:visible} .hero::before,.hero::after{display:none} .hero__in{text-align:left;max-width:800px;margin:0} .hero h1{color:var(--ink);font-size:clamp(2.4rem,4.6vw,3.7rem);font-weight:650;letter-spacing:-.03em;line-height:1.06;margin-bottom:20px} .hero .lede{color:var(--ink-2);font-size:1.15rem;margin:0;max-width:56ch} .hero__cta{justify-content:flex-start;margin-top:30px} .hero__note{color:var(--ink-3);margin-top:16px} .hero__stats,.pill,.hero__glowline,.hero__fade,.hnotes,.horb,.blob{display:none} .hero__shot{margin:52px auto 0;max-width:var(--wrap);padding:0 28px 72px} .hero__shot .shot{transform:none;box-shadow:var(--sh-4);border:1px solid var(--line)} .hero__shot .shot .app{min-height:600px} .hero .btn--wo{border:1px solid #d3d6df;color:var(--ink);background:#fff} .hero .btn--wo:hover{border-color:#aeb3c1;background:var(--paper-2)} /* the customer strip: still, not a marquee */ .mq{padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)} .mq__l{margin-bottom:24px;letter-spacing:.1em;font-size:.72rem} .mq__row{-webkit-mask-image:none;mask-image:none;justify-content:center;overflow:visible} .mq__t{animation:none;flex-wrap:wrap;justify-content:center;padding-right:0;gap:28px 52px;width:100%} .mq__t img{height:32px;max-width:140px;filter:grayscale(1) opacity(.62)} .mq__t .txt{opacity:.62} .mq__t .txt b{font-weight:700} /* inner-page hero */ .phero{background:#fff;padding:64px 0 56px} .phero::before{display:none} .phero--solo{padding-bottom:16px} .crumb{margin-bottom:22px} /* screens */ .shot,.shotfit,.shotfit>.shot,.gal__f{border-radius:12px} .shot{border:1px solid var(--line);box-shadow:var(--sh-4);position:relative} .shotfit{box-shadow:none;border:1px solid var(--line)} .shotfit.fitted{box-shadow:var(--sh-4)} .shotfit>.shot{border:none} .shot__bar{background:#f4f5f8;border-bottom:1px solid var(--line);padding:10px 14px} .shot__url{border-radius:6px;font-size:.7rem;color:var(--ink-3)} .gal__f{box-shadow:var(--sh-4)} .gal__cap b{font-weight:650} .gal__dot.on{background:var(--iris)} .gal__nav:hover{border-color:var(--iris);color:var(--iris)} .gal__hint kbd{border-radius:4px} /* modules grid, on a light ground */ .sec--night{background:var(--tint);color:var(--ink-2)} .sec--night h1,.sec--night h2,.sec--night h3,.sec--night h4{color:var(--ink)} .sec--night .lede{color:var(--ink-2)} .bento{grid-template-columns:repeat(3,1fr);gap:14px} .b-4,.bcell--wide{grid-column:span 2} .b-2,.b-3{grid-column:span 1} .bcell{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;transition:border-color .2s} .bcell:hover{transform:none;border-color:#c5c9d6} .bcell::before{display:none} .bcell h3{color:var(--ink);font-size:1.06rem;font-weight:650;letter-spacing:-.015em} .bcell p{color:var(--ink-2);font-size:.92rem} .bcell .lnk{color:var(--iris);margin-top:14px} .bcell__ic[class]{background:var(--iris-l);color:var(--iris);width:36px;height:36px;border-radius:9px;margin-bottom:16px} .bcell__ic .ic{width:18px;height:18px} .mini{background:var(--paper-2);border:1px solid var(--line);border-radius:10px} .mini__bar{background:#e2e5ee} .mini__bar i{border-radius:100px} .g-i{background:var(--iris)}.g-v{background:#6d5ae6}.g-t{background:#0e7490} .g-a{background:#b45309}.g-e{background:#047857}.g-r{background:#be123c} .sec--night .stats{background:var(--line);border-color:var(--line)} .sec--night .stats div{background:#fff} .sec--night .stats b{color:var(--ink)} .sec--night .stats span{color:var(--ink-3)} /* cards and blocks: 12px corners, borders, no lift */ .card,.mcard,.ed,.stp,.pcard,.qa,.tbl,.form,.stats,.stack__row,.tut,.ba,.sw{border-radius:12px;box-shadow:none} .card:hover,.mcard:hover,.ed:hover,.stp:hover,.tut:hover{transform:none;box-shadow:none;border-color:#c5c9d6} .card__ic,.mcard__ic,.ed__i,.tut__i{border-radius:9px;width:38px;height:38px} .card__ic .ic,.mcard__ic .ic,.ed__i .ic{width:18px;height:18px} .stp__n{background:var(--ink);box-shadow:none;border-radius:8px;width:32px;height:32px;font-size:.88rem;font-weight:650} .frow h3{font-size:1.5rem;font-weight:650;letter-spacing:-.022em} .flist>li>i{border-radius:5px} .flist i.c-i,.flist i.c-v,.flist i.c-t,.flist i.c-c,.flist i.c-s,.flist i.c-a,.flist i.c-r,.flist i.c-e{background:var(--iris-l)} .flist i.c-i::after,.flist i.c-v::after,.flist i.c-t::after,.flist i.c-c::after,.flist i.c-s::after,.flist i.c-a::after,.flist i.c-e::after{border-color:var(--iris)} .flist i.c-r{background:#fbecec}.flist i.c-r::after{border-color:#b91c1c} .stats b{font-weight:650;letter-spacing:-.03em;font-size:1.9rem} .callout{background:var(--night);border-radius:14px;padding:56px} .callout::before,.callout::after{display:none} .callout h2{font-weight:650} .callout p{color:var(--night-tx)} .pcard{padding:32px} .pcard--hot{border-color:var(--iris);box-shadow:none} .pcard--hot::before{display:none} .pcard__tag{background:var(--iris);box-shadow:none;border-radius:6px;letter-spacing:.06em} .pcard__p{font-weight:650;letter-spacing:-.025em} .pcard li i{border-radius:5px;background:var(--iris-l)} .pcard li i::after{border-color:var(--iris)} .qa{border-radius:10px} .qa.open{box-shadow:none;border-color:#c5c9d6} .qa__i{color:var(--iris)} .qa.open .qa__i{background:var(--iris)} .qa:hover .qa__i{background:var(--iris-l)} .tbl th{font-size:.72rem;font-weight:650;color:var(--ink-3)} .fld input,.fld textarea,.fld select{border-radius:8px;background:#fff} .fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--iris);box-shadow:0 0 0 3px rgba(79,70,229,.14)} .status{border-radius:8px} .stack__row--core{background:var(--night);box-shadow:none} .ed__l span,.stack__chips span{border-radius:6px} .ed__go{color:var(--iris)} .gradbar{background:var(--iris)} .ba__d{border-radius:6px} .ba__d:hover{background:var(--iris)} .doclist li::before{background:var(--iris)} .tut em{border-radius:6px} /* footer, back-to-top, whatsapp */ .foot{background:var(--night)} .foot::before{display:none} .foot h4{font-weight:650} .foot__wa{border-radius:8px;font-weight:600} .up{background:var(--ink);box-shadow:var(--sh-2);border-radius:10px} .wafab{border-radius:10px;font-weight:600;box-shadow:0 2px 6px rgba(15,18,34,.14),0 12px 28px -12px rgba(15,18,34,.3)} .wafab:hover{transform:none;box-shadow:0 2px 6px rgba(15,18,34,.18),0 12px 28px -12px rgba(15,18,34,.35)} @media (max-width:660px){ .wafab{border-radius:50%} } /* reveal: quieter */ .rv{transform:translateY(12px);transition:opacity .55s var(--e2),transform .55s var(--e2)} /* ---------- product vignettes on a flat ground ---------- */ .cv-spot{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:24px} .cv-spot__glow{display:none} .cv-spot__chip{border:1px solid var(--line);box-shadow:var(--sh-2);border-radius:8px} .cv-sp{border-radius:10px;box-shadow:var(--sh-3)} .cv-cp{border-radius:6px} .cv-aib{background:var(--iris-l);color:var(--iris-2);border-radius:6px} .cv-aib::before{content:none} .cv-btnf,.cv-ph__cta{background:var(--iris);box-shadow:none;border-radius:7px} .cv-btno{border-radius:7px} .cv-crt__bar b{background:var(--iris)} .cv-wave i{background:var(--iris)} .cv-pal{border-radius:10px} .cv-ins{border-radius:10px} .cv-phone{border-radius:28px} .cv-phone__s{border-radius:20px} .cv-ph__img{background:linear-gradient(150deg,#c7d2fe,#a5b4fc 55%,#818cf8)} .cv-kc,.cv-rmp,.cv-pcard,.cv-crt,.cv-kt,.cv-pcell,.cv-pk__pg,.cv-bf,.cv-pal2,.cv-ac{border-radius:8px} .cv-pk__bars s{background:var(--iris)} .cv-pk__ch{background:linear-gradient(180deg,rgba(79,70,229,.22),rgba(79,70,229,.03));border-bottom-color:var(--iris)} .kpi,.card2,.rw{border-radius:10px;box-shadow:none} .av,.side__b span,.asb__av{background:var(--iris)} .chart .b span{background:var(--iris)} .g-i,.g-v,.g-t,.g-a,.g-e,.g-r{background-image:none} /* app chrome */ .app{border-radius:0} .atop__btn{border-radius:6px} .atop__btn--p{background:var(--iris);border-color:var(--iris)} .afil{border-radius:6px} .afil--on{background:var(--iris-l);border-color:#c7cbf2;color:var(--iris-2)} .astat,.atbl,.agantt,.atree,.achat,.apanel{border-radius:8px} .asb__nav a.on .n{background:var(--iris)} .atabs a.on{color:var(--iris);border-bottom-color:var(--iris)} .atree a.on{background:var(--iris-l);color:var(--iris-2)} .st{border-radius:6px} .aviews{position:relative;min-width:0;min-height:var(--vh,0)} .aview{display:none;min-width:0} .aview.on{display:block} .mviews{display:grid;position:relative;min-width:0} .mview{grid-area:1/1;display:none;flex-direction:column;min-width:0} .mview.on{display:flex} .mview .amn{flex:1;min-height:0} @media (max-width:660px){ .aviews,.mviews{overflow:hidden} } /* ---------- landing page rhythm: one header pattern, one left edge ---------- */ .sec{padding:88px 0} .hero{padding:72px 0 0} .hero__in{text-align:center;max-width:820px;margin:0 auto} .hero .lede{margin:0 auto} .hero__cta{justify-content:center} .hero__shot{margin-top:48px} .shd,.shd--solo,.shd--mid{display:block;max-width:720px;margin:0 0 40px;text-align:left} .shd>div{margin:0} .shd p,.shd .lede{padding:0;margin-top:14px;font-size:1.05rem;max-width:none;color:var(--ink-2)} .shd--mid .eyebrow,.shd>.eyebrow,.shd--mid>.eyebrow{margin-inline:0;justify-self:start} .frow{padding:56px 0} .frow:first-of-type{padding-top:8px} .stats{margin-top:0} /* what you get: six plain statements, ruled, no cards */ .bens{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px;border-top:1px solid var(--line);padding-top:36px} .ben{min-width:0} .ben b{display:block;font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px} .ben h3{font-size:1.06rem;font-weight:650;letter-spacing:-.015em;margin-bottom:8px} .ben p{font-size:.95rem;color:var(--ink-2);line-height:1.6} .ben p+p{margin-top:8px;color:var(--ink-3);font-size:.9rem} /* who runs it, and for what: a table, because tables line up */ .orgtbl{width:100%;border-collapse:collapse;border-top:1px solid var(--line)} .orgtbl th{text-align:left;font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:14px 16px 12px 0;border-bottom:1px solid var(--line)} .orgtbl td{padding:18px 16px 18px 0;border-bottom:1px solid var(--line-2);vertical-align:top;font-size:.95rem;color:var(--ink-2);line-height:1.55} .orgtbl td:first-child{width:22%;color:var(--ink);font-weight:600} .orgtbl td:first-child a{color:var(--ink)} .orgtbl td:first-child a:hover{color:var(--iris)} .orgtbl td:nth-child(2){width:36%} .orgtbl td:last-child{width:14%;text-align:right;padding-right:0;white-space:nowrap} .orgtbl td:last-child a{color:var(--iris);font-weight:600;font-size:.9rem} .orgtbl td small{display:block;color:var(--ink-3);font-size:.86rem;margin-top:3px;font-weight:400} .sec__more{margin-top:28px} @media (max-width:1000px){ .bens{grid-template-columns:1fr 1fr} } @media (max-width:820px){ .orgtbl thead{display:none} .orgtbl,.orgtbl tbody,.orgtbl tr,.orgtbl td{display:block;width:auto} .orgtbl td{padding:6px 0;border:none} .orgtbl td:first-child{padding-top:18px;font-size:1.02rem} .orgtbl td:last-child{text-align:left;padding-bottom:18px;border-bottom:1px solid var(--line-2)} .orgtbl td:first-child,.orgtbl td:nth-child(2),.orgtbl td:last-child{width:auto} } @media (max-width:660px){ .bens{grid-template-columns:1fr;gap:28px} .sec{padding:64px 0} } /* ---------- the walkthrough pointer and what it does ---------- */ .dcur{position:absolute;left:0;top:0;width:18px;height:18px;z-index:12;pointer-events:none; opacity:0;transition:opacity .35s;will-change:transform; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 4px 8px rgba(0,0,0,.22))} .dcur.on{opacity:1} .dcur svg{width:100%;height:100%;fill:#fff;stroke:#0f1222;stroke-width:1.5;stroke-linejoin:round; transition:transform .09s;transform-origin:4px 3px} .dcur.press svg{transform:scale(.86)} .dring{position:absolute;left:0;top:0;width:26px;height:26px;margin:-9px 0 0 -9px;border-radius:50%; border:2px solid rgba(79,70,229,.85);opacity:0;pointer-events:none;z-index:11} .dring.go{animation:dring .55s ease-out} @keyframes dring{0%{opacity:.9;scale:.35}100%{opacity:0;scale:1.6}} .atabs a.dhover{color:#12141f} .atop__btn.dhover{background:#f3f4f9} .atop__btn--p.dhover{background:var(--iris-2)} .asb__nav a.dhover{background:rgba(255,255,255,.06);color:#fff} .asb__srch.dhover{border-color:rgba(255,255,255,.2)} tr.dhover td{background:#f8f9fc} .atree a.dhover{background:#f3f4f9} .abar.dhover{color:#12141f} .agr__t b.dhover{filter:brightness(1.08)} .st.dhover{filter:brightness(.95)} .dpress{filter:brightness(.93)} tr.dsel td{background:#eef0fb!important} tr.dsel td:first-child{box-shadow:inset 3px 0 0 var(--iris)} .dpop{position:absolute;z-index:13;background:#14162a;color:#fff;border-radius:9px;padding:9px 12px; white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(5px); transition:opacity .22s,transform .22s;font-size:12px; box-shadow:0 2px 6px rgba(10,10,18,.3),0 18px 40px -14px rgba(10,10,18,.55)} .dpop.on{opacity:1;transform:none} .dpop b{display:block;font-size:12.4px;font-weight:600;letter-spacing:-.01em} .dpop span{display:block;font-size:11.2px;color:#a3a8c4;margin-top:1px} .dpop em{display:inline-block;font-style:normal;font-size:10.4px;font-weight:600;margin-top:6px; padding:2px 7px;border-radius:5px;background:#312e81;color:#c7d2fe} .dpop .apop__b--r{background:#7f1d1d;color:#fecaca} .dpop .apop__b--g{background:#14532d;color:#bbf7d0} .dpop .apop__b--w{background:#713f12;color:#fde68a} .dpop .apop__b--i{background:#312e81;color:#c7d2fe} .dtoast{position:absolute;right:16px;bottom:16px;z-index:13;display:flex;gap:10px;align-items:center; background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px 10px 11px; box-shadow:0 2px 6px rgba(15,18,34,.08),0 18px 40px -14px rgba(15,18,34,.3); opacity:0;transform:translateY(10px);transition:opacity .28s,transform .28s;pointer-events:none} .dtoast.on{opacity:1;transform:none} .dtoast i{width:24px;height:24px;border-radius:7px;background:#16a34a;position:relative;flex:none} .dtoast i::after{content:"";position:absolute;left:8.5px;top:5px;width:5px;height:10px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)} .dtoast b{display:block;font-size:12.4px;font-weight:600;color:#12141f;letter-spacing:-.01em;white-space:nowrap} .dtoast span{font-size:11.2px;color:#7a8098;white-space:nowrap} .asb__srch.typing{background:#fff;color:#12141f;border-color:#6366f1} .asb__srch.typing .ic{background:#6366f1} .dtype{font-size:11.5px;font-weight:500;color:#12141f} .dcaret{display:inline-block;width:1.5px;height:12px;background:#4f46e5;margin-left:1px;vertical-align:-2px; animation:dblink 1s steps(1) infinite} @keyframes dblink{50%{opacity:0}} @media (max-width:660px){ .dtoast{right:10px;bottom:10px;padding:8px 11px} .dtoast b,.dtoast span{white-space:normal} } /* ========================================================================= Phones and tablets — these come last so nothing above can override them. ========================================================================= */ @media (max-width:1180px){ .bento{grid-template-columns:repeat(2,1fr)} .b-4,.bcell--wide{grid-column:span 2} .b-2,.b-3{grid-column:span 1} } @media (max-width:1000px){ .frow{grid-template-columns:1fr;gap:30px;padding:40px 0} .callout{grid-template-columns:1fr;padding:40px 32px} .phero__in{grid-template-columns:1fr;gap:36px} } @media (max-width:760px){ /* app screens: natural width, the layout inside reflows instead of shrinking */ .shotfit{aspect-ratio:auto} .shotfit>.shot{width:100%} .app{grid-template-columns:1fr;min-height:0} .app .asb{display:none} .astats{grid-template-columns:1fr 1fr} .afiles,.asplit{grid-template-columns:1fr} .atbl{overflow-x:auto;-webkit-overflow-scrolling:touch} .atbl table{min-width:560px} .abody{padding:12px} .atop{padding:10px 12px;flex-wrap:wrap} .atabs{padding:0 6px} .agr,.agantt__q{grid-template-columns:92px 1fr} .hero__shot .shot .app{min-height:0} .gal__s{flex:0 0 92%} } @media (max-width:660px){ .wrap{padding-inline:20px} .sec{padding:60px 0} .hero{padding:52px 0 0} .hero h1{font-size:2.1rem} .hero .lede{font-size:1.02rem} .hero__cta{gap:10px} .hero__cta .btn{width:100%;justify-content:center} .hero__shot{margin-top:36px;padding:0 20px 52px} .hero__shot .shot{border-radius:10px} .bento{grid-template-columns:1fr;gap:12px} .b-6,.b-4,.b-3,.b-2,.bcell--wide{grid-column:span 1} .bcell{padding:20px} .bcell--wide{flex-direction:column;align-items:stretch;gap:18px} .g2,.g3,.g4,.steps,.eds{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .stats div{padding:20px 16px} .stats b{font-size:1.5rem} .callout{padding:32px 22px} .callout h2{font-size:1.5rem} .callout__a .btn{width:100%} .pcard{padding:24px 20px} .cv-spot{padding:14px;border-radius:12px} .frow{padding:32px 0} .frow h3{font-size:1.3rem} .shd,.shd--solo,.shd--mid{margin-bottom:28px} .d1{font-size:2rem} .d2{font-size:1.5rem} .mq{padding:32px 0} .mq__t{gap:22px 32px} .mq__t img{height:26px;max-width:110px} .gal__cap{margin-bottom:10px} .gal__cap b{font-size:.95rem} .foot{padding:52px 0 24px} .phero{padding:44px 0 36px} .phero__cta .btn{width:100%;justify-content:center} .dtoast{max-width:calc(100% - 20px)} .dpop{max-width:calc(100% - 24px);white-space:normal} } @media (max-width:400px){ .hero h1{font-size:1.85rem} .astats{grid-template-columns:1fr} .atop__btn{padding:5px 8px;font-size:11px} } /* ========================================================================= Phones, second pass — nothing scrolls sideways, nothing is cut off. ========================================================================= */ /* two class names the markup uses that had no rule */ .card__i{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;margin-bottom:16px;flex:none} .card__i .ic{width:18px;height:18px} .hint{font-size:.9rem;color:var(--ink-3);line-height:1.55} .cv-lgd .lgd__a{background:#f59e0b} /* walkthrough artefacts stay hidden on a gallery slide that is not the current one */ .gal__s:not(.on) .dcur,.gal__s:not(.on) .dring,.gal__s:not(.on) .dpop,.gal__s:not(.on) .dtoast{opacity:0!important} @media (max-width:660px){ /* --- app screens: fewer columns, whole rows, no sideways scrolling --- */ .shot__url{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .atabs{flex-wrap:wrap;gap:0 2px;padding:0 8px} .atabs a{padding:8px 8px;font-size:12px} .astats{grid-template-columns:1fr 1fr;gap:8px} .astat{padding:9px 10px} .astat b{font-size:16px} .atbl{overflow:hidden} .atbl table{min-width:0;width:100%;table-layout:fixed} .atbl th,.atbl td{padding:8px 8px;white-space:normal;overflow-wrap:anywhere} .atbl th:not(:first-child):not(:nth-last-child(-n+2)), .atbl td:not(:first-child):not(:nth-last-child(-n+2)){display:none} .atbl th:first-child,.atbl td:first-child{width:44%} .atbl .nm{flex-wrap:wrap;gap:6px} .atbl .who span{overflow-wrap:anywhere} .prog{min-width:0;gap:5px} .prog em{width:28px} .apanel table td{padding:6px 4px} .atree a{white-space:normal} .agantt__q,.agr{grid-template-columns:84px 1fr} .agr em{font-size:10.5px} .abar em{width:64px;font-size:11px} .acmsg p,.doc{overflow-wrap:anywhere} .afil{font-size:11px;padding:4px 7px} .dpop{left:12px!important;right:12px;max-width:none;white-space:normal} /* --- ordinary tables stack into blocks --- */ .ptable{overflow:visible} .ptable>.tbl{min-width:0;font-size:.93rem} .ptable::after{display:none} .tbl thead{display:none} .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%} .tbl tr{padding:14px 16px;border-bottom:1px solid var(--line)} .tbl tr:last-child{border-bottom:none} .tbl td{padding:5px 0;border:none;font-size:.93rem} .tbl td[data-th]::before{content:attr(data-th);display:block;font-size:.68rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px} .tbl td[data-th=""]::before{display:none} .tbl td:first-child{padding-top:0} .tbl td:first-child b{font-size:1rem} /* --- vignettes: let text wrap instead of cutting it with an ellipsis --- */ .cv-sp__h{flex-wrap:wrap;white-space:normal;overflow:visible;gap:6px 9px} .cv-sp__h b{white-space:normal;overflow:visible;text-overflow:clip;min-width:0} .ev-t{table-layout:auto} .ev-t th:first-child,.ev-t td:first-child{width:auto} .ev-t td,.ev-t .nm,.ev-r__n,.cv-fr__n,.cv-ac__t,.cv-rk__n,.cv-kc__t,.cv-pcard b,.cv-pcard span,.cv-pcell b, .cv-cn b,.cv-lg span,.cv-lg,.cv-tgl,.cv-crt__r,.cv-crt__r span,.cv-bfr,.cv-bfr i,.cv-ph__r,.cv-pb,.cv-docr b,.cv-kt span, .cv-pstrip span,.cv-mstrip span,.ev-k span,.ev-g__c b,.ev-g__c span,.ev-s__r,.ev-s__r b,.cv-bg em,.cv-gr em, .cv-trl b,.cv-cr b,.cv-stp b,.cv-tml__i b,.cv-hint,.ev-b em{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} .cv-lg{flex-wrap:wrap} .cv-lg em{margin-left:0;width:100%;font-size:10.5px} .cv-crt__r{white-space:normal;flex-wrap:wrap} .cv-gq,.cv-gr{grid-template-columns:76px 1fr} .cv-gr{height:auto;min-height:32px} .cv-gr em{font-size:10.5px;line-height:1.25;padding-right:8px} .cv-bg{grid-template-columns:72px 1fr 56px;height:auto;min-height:31px} .cv-bg em{font-size:11px;line-height:1.25} .ev-b{grid-template-columns:70px 1fr 48px;height:auto;min-height:29px} .ev-b em{font-size:11px;line-height:1.25} .ev-r{grid-template-columns:70px repeat(5,1fr);gap:3px} .ev-r__n{font-size:10px;line-height:1.2} .ev-r__c{font-size:8.6px} .cv-kb{grid-template-columns:1fr 1fr} .cv-pgrid{grid-template-columns:1fr 1fr} .cv-bfr em{width:76px} .cv-pal2{flex-wrap:wrap} .cv-pb{overflow:visible} } @media (max-width:400px){ .astats{grid-template-columns:1fr 1fr} .atop__btn{padding:5px 8px;font-size:11px} .atbl th:first-child,.atbl td:first-child{width:48%} } @media (max-width:660px){ .atbl th{white-space:nowrap;overflow-wrap:normal;padding:8px 6px} .atbl .nm{flex-wrap:nowrap;align-items:flex-start} .atbl .nm .sw{width:7px;height:7px;margin-top:5px;flex:0 0 7px} .gal__s{flex:0 0 100%} .gal__track{gap:16px} } /* the brand-page swatch card (.sw) was bleeding into the app tables' colour dots */ .atbl .sw,.apanel .sw,.nm .sw{padding:0;border:none;border-radius:2px;width:7px;height:7px;min-width:7px;flex:0 0 7px;background-clip:padding-box} @media (max-width:660px){ .atbl td{overflow-wrap:normal;word-break:normal} .atbl th:first-child,.atbl td:first-child{width:46%} .atbl .nm .sw{margin-top:5px} } /* customer strip: logos whose wordmark sits low in a tall canvas need more height to read at the same size */ .mq__t img[alt^="KK Advisors"]{height:50px;max-width:170px} .mq__t img[alt^="Kiiza"]{height:44px;max-width:190px} @media (max-width:660px){ .mq__t img[alt^="KK Advisors"]{height:40px;max-width:140px} .mq__t img[alt^="Kiiza"]{height:36px;max-width:150px} }