/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── ROOT VARIABLES ─── */
:root{
  --pu:#7C6FFF;--pu-hi:#A89EFF;--pu-lo:#4A3FD4;--pu-d:rgba(124,111,255,0.10);--pu-b:rgba(124,111,255,0.22);
  --te:#4FD8EB;--te-d:rgba(79,216,235,0.09);--te-b:rgba(79,216,235,0.22);
  --gn:#34D399;--gn-d:rgba(52,211,153,0.09);--gn-b:rgba(52,211,153,0.22);
  --am:#FBBF24;--am-d:rgba(251,191,36,0.09);--am-b:rgba(251,191,36,0.22);
  --rd:#F87171;--rd-d:rgba(248,113,113,0.09);--rd-b:rgba(248,113,113,0.22);
  --bg:#030407;--s1:#08090F;--s2:#0E1018;--s3:#141824;--s4:#1C2133;
  --bd:rgba(255,255,255,0.055);--bd2:rgba(255,255,255,0.10);--bd3:rgba(255,255,255,0.16);
  --tx:#EEF0FF;--tx2:rgba(238,240,255,0.65);--tx3:rgba(238,240,255,0.56);--tx4:rgba(238,240,255,0.50);--tx5:rgba(238,240,255,0.10);
}
[data-theme="light"]{
  --pu:#7C6FFF;--pu-hi:#624DEB;--pu-lo:#4A3FD4;
  --te:#0EA5C4;--gn:#10B981;--am:#D97706;--rd:#DC2626;
  --bg:#F0F1F5;--s1:#FFFFFF;--s2:#F4F5F9;--s3:#EBECF2;--s4:#DEE0E8;
  --bd:rgba(0,0,0,0.06);--bd2:rgba(0,0,0,0.12);--bd3:rgba(0,0,0,0.20);
  --tx:#1A1B2E;--tx2:rgba(26,27,46,0.62);--tx3:rgba(26,27,46,0.66);--tx4:rgba(26,27,46,0.64);--tx5:rgba(26,27,46,0.12);
}

/* ─── BASE ─── */
html{scroll-behavior:smooth}
body{font-family:"DM Sans",system-ui,sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ─── NOISE BACKGROUND ─── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(124,111,255,0.06) 0%,transparent 70%);
}
.noise{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}

/* ─── NAV ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:60px;display:flex;align-items:center;
  padding:0 40px;
  background:rgba(3,4,7,0.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bd);
  transition:all .3s;
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-mark{
  width:30px;height:30px;border-radius:8px;
  background:var(--pu);
  display:flex;align-items:center;justify-content:center;
}
.nav-name{font-family:"Syne",sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:-.04em;color:var(--tx)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:40px}
.nav-link{padding:6px 14px;font-size:13.5px;font-weight:500;color:var(--tx3);text-decoration:none;border-radius:8px;transition:all .15s;border:1px solid transparent}
.nav-link:hover{color:var(--tx);background:rgba(255,255,255,.04);border-color:var(--bd)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn-nav-ghost{padding:7px 16px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--tx2);background:none;border:1px solid var(--bd2);cursor:pointer;font-family:inherit;transition:all .15s;text-decoration:none;display:flex;align-items:center}
.btn-nav-ghost:hover{color:var(--tx);border-color:var(--bd3);background:rgba(255,255,255,.04)}
.btn-nav-fill{padding:7px 18px;border-radius:8px;font-size:13.5px;font-weight:700;color:#fff;background:var(--pu);border:none;cursor:pointer;font-family:inherit;transition:all .15s;text-decoration:none;display:flex;align-items:center}
.btn-nav-fill:hover{background:var(--pu-hi)}

/* ─── LAYOUT ─── */
section{position:relative;z-index:1}
.container{max-width:1160px;margin:0 auto;padding:0 32px}
.container-narrow{max-width:800px;margin:0 auto;padding:0 32px}

/* ─── HERO ─── */
.hero{
  min-height:100vh;display:flex;align-items:center;
  padding:120px 0 80px;
  position:relative;overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  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:64px 64px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,black 0%,transparent 75%);
}
.hero-orbit{display:none}
.hero-inner{position:relative;z-index:1}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:100px;
  background:rgba(124,111,255,.1);border:1px solid rgba(124,111,255,.28);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pu-hi);margin-bottom:28px;
}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--pu)}
.hero-h1{
  font-family:"Syne",sans-serif;font-weight:800;
  font-size:clamp(2.75rem,5vw,4rem);
  letter-spacing:-.045em;line-height:1.04;
  margin-bottom:24px;
}.hero-h1 .line2{color:var(--pu-hi)}
.hero-sub{
  font-size:18px;color:var(--tx2);line-height:1.75;
  max-width:580px;margin-bottom:40px;font-weight:400;
}
.hero-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:64px}
.btn-hero{
  padding:13px 28px;border-radius:10px;font-size:15px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:8px;text-decoration:none;
}.btn-hero-p{background:var(--pu);color:#fff;border:none}
.btn-hero-p:hover{background:var(--pu-hi)}
.btn-hero-s{
  background:rgba(255,255,255,.05);color:var(--tx);
  border:1px solid var(--bd2);
}
.btn-hero-s:hover{background:rgba(255,255,255,.08);border-color:var(--bd3);transform:translateY(-2px)}

.hero-stats{
  display:flex;gap:0;border:1px solid var(--bd);border-radius:14px;
  background:var(--s2);
  overflow:hidden;max-width:700px;
}
.hstat{
  flex:1;padding:18px 20px;border-right:1px solid var(--bd);
  transition:background .2s;
}
.hstat:last-child{border-right:none}
.hstat:hover{background:rgba(124,111,255,.06)}
.hstat-val{font-family:"Syne",sans-serif;font-size:1.7rem;font-weight:800;letter-spacing:-.03em;color:var(--tx);line-height:1;margin-bottom:4px}
.hstat-lbl{font-size:11.5px;color:var(--tx3);font-weight:500}

/* ─── MARQUEE STRIP ─── */
.strip{
  padding:18px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
  background:rgba(8,9,15,.5);overflow:hidden;
}
.strip-inner{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;width:100%}
.strip-inner>.strip-item:nth-child(n+11){display:none}
.strip-item{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em}
.strip-dot{width:5px;height:5px;border-radius:50%}

/* ─── SECTION HEADERS ─── */
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pu-hi);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-h2{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(1.85rem,3vw,2.6rem);letter-spacing:-.035em;line-height:1.15;margin-bottom:18px}
.section-h2 em{font-style:normal;color:var(--pu-hi)}
.section-sub{font-size:16px;color:var(--tx2);line-height:1.75;max-width:560px}

/* ─── FEATURES SECTION ─── */
.features-section{padding:100px 0}
.features-header{margin-bottom:64px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bd);border-radius:16px;overflow:hidden;border:1px solid var(--bd)}
.feat-card{
  background:var(--s1);padding:32px;
  transition:all .2s;cursor:default;
  position:relative;overflow:hidden;
}
.feat-card:hover{background:var(--s2);transform:translateY(-1px)}
.feat-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.feat-title{font-family:"Syne",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:10px}
.feat-desc{font-size:13.5px;color:var(--tx3);line-height:1.7}
.feat-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:100px;margin-bottom:14px}

/* ─── IT SUPPORT SERVICES ─── */
.services-section{padding:100px 0}
.support-badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 40px}
.support-badge{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--tx2);background:var(--s2);border:1px solid var(--bd);border-radius:100px;padding:9px 16px}
.support-badge svg{color:var(--gn);flex-shrink:0}
.service-mini{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.service-mini li{font-size:13px;color:var(--tx3);padding-left:18px;position:relative}
.service-mini li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--pu);opacity:.7}
.services-list{margin-top:64px;background:var(--s2);border:1px solid var(--bd);border-radius:14px;padding:36px}
.services-h3{font-family:"Syne",sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.03em;margin-bottom:24px}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.services-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ─── PRODUCT SHOWCASE ─── */
.showcase-section{padding:100px 0;overflow:hidden}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.showcase-grid.rev{direction:rtl}.showcase-grid.rev>*{direction:ltr}
.showcase-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.showcase-h3{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(1.6rem,2.4vw,2.05rem);letter-spacing:-.03em;line-height:1.2;margin-bottom:18px}
.showcase-p{font-size:15px;color:var(--tx2);line-height:1.8;margin-bottom:28px}
.showcase-list{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.showcase-item{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--tx2)}
.showcase-check{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
}
.showcase-screen{
  border-radius:14px;overflow:hidden;
  background:var(--s2);border:1px solid var(--bd2);
  box-shadow:0 24px 56px rgba(0,0,0,.45);
  position:relative;
}
.screen-bar{
  height:36px;background:var(--s3);border-bottom:1px solid var(--bd);
  display:flex;align-items:center;padding:0 14px;gap:6px;
}
.sbar-dot{width:10px;height:10px;border-radius:50%}
.screen-body{padding:20px}
.mini-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--s4);margin-bottom:6px;font-size:11px}
.mini-badge{padding:2px 7px;border-radius:100px;font-size:9.5px;font-weight:700}
.mini-bar{height:4px;border-radius:100px;background:var(--s3);overflow:hidden;flex:1}
.mini-bar-fill{height:100%;border-radius:100px}
.mini-stat{background:var(--s3);border:1px solid var(--bd);border-radius:10px;padding:14px;text-align:center}
.mini-stat-val{font-family:"Syne",sans-serif;font-size:1.4rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:4px}
.mini-stat-lbl{font-size:9.5px;color:var(--tx4);text-transform:uppercase;letter-spacing:.05em}

/* ─── INTEGRATIONS ─── */
.integrations-section{padding:100px 0}
.int-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:56px}
.int-pill{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:100px;
  background:var(--s2);border:1px solid var(--bd2);
  font-size:13.5px;font-weight:600;color:var(--tx2);
  transition:all .2s;cursor:default;
}
.int-pill:hover{background:var(--s3);border-color:var(--bd3);color:var(--tx);transform:translateY(-2px)}
.int-logo{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}

/* ─── PRICING ─── */
.pricing-section{padding:100px 0}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.pricing-category{margin-bottom:80px}
.pricing-category:last-child{margin-bottom:0}
.pricing-category-header{text-align:center;margin-bottom:8px}
.pricing-category-title{font-family:"Syne",sans-serif;font-weight:700;font-size:1.6rem;margin-bottom:6px}
.pricing-category-sub{font-size:14px;color:var(--tx3)}
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}
.pricing-toggle-label{font-size:14px;font-weight:500;color:var(--tx3);cursor:pointer;transition:color .2s}
.pricing-toggle-label.active{color:var(--tx)}
.pricing-toggle-switch{width:48px;height:26px;background:var(--s3);border:1px solid var(--bd2);border-radius:13px;position:relative;cursor:pointer;transition:all .2s}
.pricing-toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--pu);transition:transform .2s}
.pricing-toggle-switch.annual::after{transform:translateX(22px)}
.pricing-save-badge{display:inline-block;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.22);color:var(--gn);font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;margin-left:8px}
.price-card{
  background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:32px;
  position:relative;overflow:hidden;transition:border-color .2s,transform .2s;
}
.price-card:hover{border-color:var(--bd2);transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.price-card.featured{border-color:rgba(124,111,255,.35);background:var(--s2)}
.price-card.featured::before{content:"Most Popular";position:absolute;top:16px;right:-30px;background:var(--pu);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 40px;transform:rotate(45deg)}
.price-name{font-family:"Syne",sans-serif;font-weight:700;font-size:1.1rem;margin-bottom:4px}
.price-desc{font-size:13px;color:var(--tx3);margin-bottom:20px}
.price-val{font-family:"Syne",sans-serif;font-weight:800;font-size:2.4rem;letter-spacing:-.03em;margin-bottom:4px}
.price-val .currency{font-size:1rem;font-weight:600;color:var(--tx3);vertical-align:top;margin-right:2px}
.price-period{font-size:12px;color:var(--tx4);margin-bottom:24px}
.price-divider{height:1px;background:var(--bd);margin:20px 0}
.price-features{list-style:none;margin-bottom:28px}
.price-features li{font-size:13px;color:var(--tx2);padding:6px 0;display:flex;align-items:center;gap:10px}
.price-features li::before{content:"";width:16px;height:16px;border-radius:50%;background:rgba(52,211,153,.09);border:1px solid rgba(52,211,153,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.price-btn{width:100%;padding:12px;border-radius:10px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;border:none;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.price-btn-p{background:var(--pu);color:#fff}
.price-btn-p:hover{background:var(--pu-hi)}
.price-btn-s{background:var(--s2);color:var(--tx2);border:1px solid var(--bd2)}
.price-btn-s:hover{border-color:rgba(124,111,255,.22);color:var(--pu);background:rgba(124,111,255,.06)}
.price-note{font-size:12px;color:var(--tx4);text-align:center;margin-top:16px}

/* ─── CTA ─── */
.cta-section{padding:120px 0}
.cta-box{
  border-radius:16px;padding:72px 64px;text-align:center;
  background:var(--s1);border:1px solid var(--bd2);
  position:relative;overflow:hidden;
}
.cta-h2{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(1.9rem,3.2vw,2.7rem);letter-spacing:-.035em;line-height:1.15;margin-bottom:18px}
.cta-sub{font-size:17px;color:var(--tx2);line-height:1.7;max-width:520px;margin:0 auto 40px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ─── FOOTER ─── */
footer{position:relative;z-index:1;border-top:1px solid var(--bd);padding:60px 0 32px}
.footer-inner{display:flex;gap:60px;flex-wrap:wrap}
.footer-brand{flex:2;min-width:240px}
.footer-brand p{font-size:13.5px;color:var(--tx3);line-height:1.75;max-width:280px;margin-top:14px}
.footer-col{flex:1;min-width:130px}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4);margin-bottom:16px}
.footer-col a{display:block;font-size:13.5px;color:var(--tx3);text-decoration:none;margin-bottom:10px;transition:color .15s}
.footer-col a:hover{color:var(--tx)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid var(--bd);color:var(--tx4);font-size:12.5px;flex-wrap:wrap;gap:24px}
.footer-dots{display:flex;gap:6px;margin-left:auto}
.fdot{width:8px;height:8px;border-radius:50%}

/* ─── PAGE HEADER / BODY (privacy, terms, security) ─── */
.page-header{padding:140px 0 60px;text-align:center}
.page-h1{font-family:"Syne",sans-serif;font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1.2}
.page-sub{color:var(--tx2);font-size:1.1rem;margin-top:16px;line-height:1.6}
.page-body{padding:0 0 100px}
.page-body h2{font-family:"Syne",sans-serif;font-size:1.5rem;font-weight:600;margin-top:48px;margin-bottom:16px;letter-spacing:-.02em}
.page-body p{color:var(--tx2);line-height:1.7;margin-bottom:16px;font-size:15px}
.page-body ul{padding-left:20px;color:var(--tx2);line-height:1.7;margin-bottom:20px;font-size:15px}
.page-body li{margin-bottom:6px}
.page-body strong{color:var(--tx)}
.page-body a{color:var(--pu-hi);text-decoration:none}
.page-body a:hover{text-decoration:underline}
.page-body .card{background:var(--s1);border:1px solid var(--bd2);border-radius:14px;padding:28px;margin-bottom:20px}
.page-body .card h3{margin-top:0;font-size:1.05rem;font-weight:600;margin-bottom:10px}

/* ─── PRICING PAGE (standalone) ─── */
.btn-primary{padding:12px 28px;border-radius:10px;font-size:14px;font-weight:700;color:#fff;background:var(--pu);border:none;cursor:pointer;font-family:inherit;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn-primary:hover{background:var(--pu-hi)}
.btn-outline{padding:12px 28px;border-radius:10px;font-size:14px;font-weight:600;color:var(--tx2);background:transparent;border:1px solid var(--bd2);cursor:pointer;font-family:inherit;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn-outline:hover{color:var(--tx);border-color:var(--bd3);background:rgba(255,255,255,.04);transform:translateY(-2px)}
.toggle-lbl{font-size:14px;color:var(--tx2);transition:color .2s}
.toggle-lbl.active{color:var(--tx);font-weight:600}
.toggle-track{width:48px;height:26px;border-radius:13px;background:var(--s3);border:1px solid var(--bd2);cursor:pointer;position:relative;transition:all .2s}
.toggle-track.on{background:rgba(124,111,255,.10);border-color:rgba(124,111,255,.22)}
.toggle-knob{width:20px;height:20px;border-radius:50%;background:var(--tx3);position:absolute;top:2px;left:2px;transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.toggle-track.on .toggle-knob{left:24px;background:var(--pu)}
.save-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(52,211,153,.12);color:var(--gn);margin-left:6px;letter-spacing:.02em}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:40px}
.plan-group-hdr{font-family:"Syne",sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--tx);margin:32px 0 18px;display:flex;align-items:center;gap:14px}
.plan-group-hdr::after{content:"";flex:1;height:1px;background:var(--bd3)}
.plan-card{background:var(--s1);border:1px solid var(--bd2);border-radius:14px;padding:36px;position:relative;transition:border-color .2s}
.plan-card:hover{border-color:var(--bd3)}
.plan-card.featured{border-color:rgba(124,111,255,.35)}
.plan-card.featured:hover{border-color:rgba(124,111,255,.55)}
.plan-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 12px;border-radius:20px;background:rgba(124,111,255,.15);color:var(--pu-hi);margin-bottom:16px}
.plan-name{font-family:"Syne",sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:-.03em;margin-bottom:6px}
.plan-desc{color:var(--tx3);font-size:14px;line-height:1.5;margin-bottom:24px;min-height:40px}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}
.plan-currency{font-size:16px;font-weight:600;color:var(--tx2)}
.plan-amount{font-family:"Syne",sans-serif;font-size:2.8rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.plan-amount.placeholder{color:var(--tx3)}
.plan-period{color:var(--tx3);font-size:14px;margin-bottom:24px}
.plan-divider{height:1px;background:var(--bd);margin:24px 0}
.plan-features{list-style:none;padding:0;margin-bottom:28px}
.plan-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--tx2);padding:6px 0;line-height:1.5}
.plan-features li svg{flex-shrink:0;margin-top:3px}
.plan-features .na{color:var(--tx4)}
.plan-footnote{text-align:center;color:var(--tx4);font-size:13px;margin-top:40px;line-height:1.6}
.plan-footnote a{color:var(--pu-hi);text-decoration:none}
.plan-footnote a:hover{text-decoration:underline}
.compare{margin-top:64px}
.compare-grid{border:1px solid var(--bd);border-radius:10px;overflow:hidden;max-width:600px;margin:0 auto}
.compare-row{display:flex;border-bottom:1px solid var(--bd)}
.compare-row:last-child{border-bottom:none}
.compare-hdr{background:var(--s2);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3)}
.compare-cell{flex:1;padding:14px 18px;font-size:14px;display:flex;align-items:center;gap:6px}

/* ─── FAQ ─── */
.faq{padding-bottom:100px}
.faq h2{font-family:"Syne",sans-serif;font-size:1.8rem;font-weight:700;text-align:center;letter-spacing:-.03em;margin-bottom:40px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.faq-item{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:24px}
.faq-q{font-weight:600;font-size:14px;margin-bottom:8px}
.faq-a{color:var(--tx2);font-size:14px;line-height:1.6}

/* ─── AUTH PAGE (register, login, verify-email) ─── */
.auth-bg{
  background:var(--bg);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.glow,.glow2{display:none}
.brand{display:flex;align-items:center;justify-content:center;gap:10px}
.brand-mark{width:40px;height:40px;border-radius:10px;background:var(--pu);display:flex;align-items:center;justify-content:center;font-family:"Syne",sans-serif;font-size:18px;font-weight:800;color:#fff}
.brand-text{font-family:"Syne",sans-serif;font-size:22px;font-weight:800}
.brand-sub{font-size:13px;color:var(--tx3);text-align:center}
.reactivate-note{font-size:13px;color:var(--tx3);text-align:center;line-height:1.6;margin:14px 0 22px}
.reactivate-help{font-size:12px;color:var(--tx3);text-align:center;margin-top:20px}

/* ─── REGISTER CARD ─── */
.register-card{position:relative;z-index:1;width:100%;max-width:480px;margin:20px;padding:32px;background:var(--s1);border:1px solid var(--bd);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.35);animation:fadeUp .6s ease}

/* ─── FEATURE CARDS & MARKDOWN PAGES ─── */
.features{width:100%}
.pt-section{padding-top:120px}
.pt-40{padding-top:40px}
.pt-60{padding-top:60px}
.pb-0{padding-bottom:0}
.pb-100{padding-bottom:100px}
.section-title{font-family:"Syne",sans-serif;font-size:clamp(1.55rem,2.6vw,2.05rem);font-weight:800;letter-spacing:-.032em;line-height:1.2;margin-bottom:48px}
.subject-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--bd2);border-radius:100px;font-size:12px;color:var(--tx2);margin-bottom:24px}
.subject-tag-wrap{text-align:left}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.feature-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:24px}
.feature-card h3{font-family:"Syne",sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin:14px 0 8px}
.feature-card p{font-size:13.5px;color:var(--tx2);line-height:1.7}
.feature-icon{width:40px;height:40px;border-radius:10px;background:rgba(124,111,255,0.10);border:1px solid rgba(124,111,255,0.18);display:flex;align-items:center;justify-content:center}
.demo-access{margin:0 auto;max-width:560px;text-align:center}
.demo-credentials{padding:0}
.demo-cta-title{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(1.8rem,3.5vw,2.6rem);letter-spacing:-.04em;line-height:1.1;margin-bottom:16px}
.demo-cta-sub{color:var(--tx2);font-size:15px;line-height:1.7;margin-bottom:24px}

/* ─── MARKETING FOOTER ─── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;background:rgba(11,11,18,0.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd)}
.site-footer{border-top:1px solid var(--bd);padding:64px 0 32px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand .nav-logo{margin-bottom:12px}
.footer-desc{color:var(--tx3);font-size:13.5px;line-height:1.7;max-width:320px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links h4{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2);margin-bottom:6px}
.footer-links a{color:var(--tx3);font-size:13.5px;transition:color .2s}
.footer-links a:hover{color:var(--pu-hi)}
.footer-links--row{display:flex;flex-direction:row;flex-wrap:wrap;gap:24px;align-items:center}

@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
}

/* ─── FORM STYLES ─── */
.mkt-form{display:flex;flex-direction:column;gap:16px}
.mkt-newsletter{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:300px}
.mkt-newsletter .form-input{width:100%}
.consent-label{font-size:11.5px;color:var(--tx3);line-height:1.5}
.mkt-msg{font-size:13px;line-height:1.6;min-height:18px}
.mkt-msg-ok{color:var(--te)}
.mkt-msg-err{color:#F87171}
.mkt-msg-info{color:var(--tx2)}
.mkt-form .btn-p{align-self:flex-start}
.footer-newsletter-label{font-size:12.5px;color:var(--tx3);margin-top:14px}
.captcha-row{display:flex;gap:10px}
.captcha-row .form-input{flex:1}
.btn-captcha{width:44px;height:44px;flex-shrink:0;border:1px solid var(--bd2);border-radius:10px;background:var(--s1);color:var(--tx2);font-size:18px;cursor:pointer;transition:border-color .2s,color .2s}
.btn-captcha:hover{border-color:var(--pu-hi);color:var(--pu-hi)}
.fs-12{font-size:12px}
.mt-6{margin-top:6px}
.hero-cta.cta-center{justify-content:center}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:12px;font-weight:600;color:var(--tx2)}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;font-weight:500;color:var(--tx2);margin-bottom:5px}
.form-input{width:100%;padding:10px 12px;background:var(--s2);border:1px solid var(--bd2);border-radius:10px;color:var(--tx);font-family:"DM Sans",sans-serif;font-size:13px;transition:all .2s;outline:none}
.form-input:focus{border-color:var(--pu);box-shadow:0 0 0 3px rgba(124,111,255,0.10)}
.form-input::placeholder{color:var(--tx4)}
.form-input::-webkit-textarea{resize:vertical}
.mkt-form{width:100%}
.mkt-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.mkt-msg{margin-top:12px;font-size:13px;line-height:1.5;display:none}
.mkt-msg-ok{display:block;color:var(--gn)}
.mkt-msg-err{display:block;color:#f87171}
.captcha-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.captcha-row .form-input{flex:1}
.btn-captcha{padding:10px 14px;background:var(--s2);border:1px solid var(--bd2);border-radius:10px;color:var(--tx2);font-size:15px;cursor:pointer;transition:all .2s}
.btn-captcha:hover{border-color:var(--pu);color:var(--pu-hi)}
.pw-reqs{list-style:none;margin:8px 0 0;padding:0;font-size:12px;color:var(--tx3);font-family:"DM Sans",sans-serif}
.pw-reqs li{position:relative;padding-left:20px;margin-bottom:4px;transition:color .2s}
.pw-reqs li::before{content:"";position:absolute;left:0;top:3px;width:12px;height:12px;border:1px solid var(--bd2);border-radius:50%;transition:all .2s}
.pw-reqs li.ok{color:var(--gn)}
.pw-reqs li.ok::before{background:var(--gn);border-color:var(--gn)}
.pw-reqs li.ok::after{content:"";position:absolute;left:4px;top:6px;width:5px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}

/* ─── SELECT GROUP ─── */
.select-group{display:flex;gap:8px;flex-wrap:wrap}
.select-opt{flex:1;padding:8px 10px;background:var(--s2);border:1px solid var(--bd2);border-radius:10px;color:var(--tx2);font-family:"DM Sans",sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;text-align:center;min-width:70px}
.select-opt:hover{border-color:var(--bd3);color:var(--tx)}
.select-opt.active{background:rgba(124,111,255,0.10);border-color:var(--pu);color:var(--pu-hi);box-shadow:0 0 0 1px rgba(124,111,255,0.22)}

/* ─── AGENT COUNT ─── */
.agent-count{display:flex;align-items:center;gap:10px}
.agent-count input{width:70px;text-align:center;padding:8px 10px;background:var(--s2);border:1px solid var(--bd2);border-radius:10px;color:var(--tx);font-family:"DM Sans",sans-serif;font-size:14px;font-weight:600;outline:none;transition:all .2s}
.agent-count input:focus{border-color:var(--pu);box-shadow:0 0 0 3px rgba(124,111,255,0.10)}
.agent-count input::-webkit-inner-spin-button{-webkit-appearance:none}
.agent-count .max-label{font-size:11px;color:var(--tx4)}

/* ─── BUTTONS ─── */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border-radius:10px;font-family:"DM Sans",sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s}
.btn-p{background:var(--pu);color:#fff}
.btn-p:hover{background:var(--pu-hi)}
.btn-p:disabled{opacity:.5;cursor:not-allowed}
.btn-sso{background:var(--s2);color:var(--tx);border:1px solid var(--bd2)}
.btn-sso:hover{background:var(--s3);border-color:var(--bd3)}
.sso-group{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.sso-row{display:flex;gap:10px}
.sso-row .btn{flex:1}
.sso-divider{display:flex;align-items:center;gap:12px;margin:18px 0 20px;color:var(--tx4);font-size:12px}
.sso-divider::before,.sso-divider::after{content:'';flex:1;height:1px;background:var(--bd)}

/* ─── DIVIDER ─── */
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--tx4);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--bd)}

/* ─── PRICE SUMMARY ─── */
.price-summary{margin:10px 0 14px;padding:10px 14px;background:rgba(124,111,255,0.06);border:1px solid rgba(124,111,255,0.10);border-radius:10px;font-size:12px;line-height:1.6}
.price-summary strong{color:var(--tx)}
.price-summary span{color:var(--tx2)}

/* ─── TOAST ─── */
.toast{position:fixed;top:20px;right:20px;padding:14px 20px;border-radius:10px;font-size:14px;font-weight:500;z-index:1000;animation:fadeUp .3s ease;display:none;max-width:360px}
.toast.show{display:block}
.toast-gn{background:rgba(52,211,153,0.09);border:1px solid rgba(52,211,153,0.22);color:var(--gn)}
.toast-rd{background:rgba(248,113,113,0.09);border:1px solid rgba(248,113,113,0.22);color:var(--rd)}
.toast-pu{background:rgba(124,111,255,0.10);border:1px solid rgba(124,111,255,0.22);color:var(--pu)}

/* ─── SPINNER ─── */
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:none}
.loading .spinner{display:block}
.loading .btn-text{display:none}

/* ─── SUCCESS SCREEN ─── */
.success-screen{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:100;flex-direction:column;gap:16px}
.success-screen.show{display:flex}
.success-check{width:64px;height:64px;border-radius:50%;background:rgba(52,211,153,0.09);border:2px solid rgba(52,211,153,0.22);display:flex;align-items:center;justify-content:center}
.success-check svg{width:28px;height:28px;stroke:var(--gn);stroke-width:3;fill:none;stroke-dasharray:24;stroke-dashoffset:24;animation:checkmark .5s ease .2s forwards}
.success-screen h3{font-family:"Syne",sans-serif;font-size:22px}
.success-screen p{color:var(--tx2);font-size:14px}

/* ─── LOGIN LINK ─── */
.login-link{text-align:center;margin-top:16px;font-size:13px;color:var(--tx3)}
.login-link a{color:var(--pu);text-decoration:none}

/* ─── TRUST ─── */
.trust{position:fixed;bottom:20px;left:0;right:0;text-align:center;font-size:11px;color:var(--tx4);z-index:1}
.trust a{color:var(--tx3)}
.auth-bg footer{position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;padding:10px 20px !important;border-top:none !important;background:transparent;z-index:1}
.auth-bg footer .footer-bottom{display:block !important;text-align:center;padding:4px 0 !important;border-top:none !important;margin-top:0 !important;padding-top:0 !important;line-height:1.6}
.auth-bg .trust{bottom:72px}

/* ─── TABS (login) ─── */
.tabs{display:flex;background:var(--s2);border-radius:10px;padding:4px;margin-bottom:24px;border:1px solid var(--bd)}
.tab{flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;color:var(--tx3);border-radius:8px;cursor:pointer;transition:all .2s;border:none;background:none}
.tab:hover{color:var(--tx2)}
.tab.active{background:var(--s3);color:var(--tx);box-shadow:0 2px 8px rgba(0,0,0,0.3)}

/* ─── MAGIC LINK SENT ─── */
.magic-link-sent{text-align:center;padding:40px 0;display:none}
.magic-link-sent h3{font-family:"Syne",sans-serif;font-size:20px;margin-bottom:12px}
.magic-link-sent p{color:var(--tx2);font-size:14px;line-height:1.6}

/* ─── BACK LINK ─── */
.back-link{position:absolute;top:16px;left:20px;color:var(--tx3);font-size:13px;display:flex;align-items:center;gap:4px;transition:color .2s;text-decoration:none}
.back-link:hover{color:var(--tx)}

/* ─── VERIFY EMAIL ─── */
.verify-card{position:relative;z-index:1;width:100%;max-width:420px;margin:20px;padding:40px;background:var(--s1);border:1px solid var(--bd);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.35);animation:fadeUp .6s ease;text-align:center}
.state-loading .icon-placeholder{display:none}
.state-loading .spinner-lg{display:block}
.state-success .icon-placeholder{display:none}
.state-success .success-icon{display:flex}
.state-success .success-icon svg{width:48px;height:48px;stroke:var(--gn);stroke-width:2.5;fill:none;stroke-dasharray:24;stroke-dashoffset:24;animation:checkmark .5s ease .2s forwards}
.state-error .icon-placeholder{display:none}
.state-error .error-icon{display:flex}
.spinner-lg{width:48px;height:48px;border:3px solid rgba(255,255,255,0.1);border-top-color:var(--pu);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 20px;display:none}
.icon-placeholder{width:48px;height:48px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.success-icon,.error-icon{width:48px;height:48px;border-radius:50%;margin:0 auto 20px;align-items:center;justify-content:center;display:none}
.success-icon{background:rgba(52,211,153,0.09);border:2px solid rgba(52,211,153,0.22)}
.error-icon{background:rgba(248,113,113,0.09);border:2px solid rgba(248,113,113,0.22)}
.error-icon svg{width:28px;height:28px;stroke:var(--rd);stroke-width:2.5;fill:none}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes checkmark{0%{stroke-dashoffset:24}100%{stroke-dashoffset:0}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
.fade-up{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}
.d4{animation-delay:.24s}.d5{animation-delay:.30s}.d6{animation-delay:.36s}
.orbit-ring{animation:spin-slow 20s linear infinite;transform-origin:center}
.orbit-ring-2{animation:spin-slow 32s linear infinite reverse;transform-origin:center}
.float{animation:floatY 6s ease-in-out infinite}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  .nav-links{display:none}
  .hero-h1{font-size:clamp(2.5rem,8vw,4rem)}
  .feat-grid{grid-template-columns:1fr}
  .showcase-grid{grid-template-columns:1fr;gap:40px}
  .showcase-grid.rev{direction:ltr}
  .hero-orbit{display:none}
  .pricing-grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;gap:20px}
  .faq-grid{grid-template-columns:1fr}
  nav{padding:0 20px}
  .container{padding:0 20px}
  .cta-box{padding:48px 24px}
  .footer-inner{flex-direction:column;gap:32px}
}
@media(max-width:600px){
  .hero-stats{flex-direction:column}
  .hstat{border-right:none;border-bottom:1px solid var(--bd)}
  .hstat:last-child{border-bottom:none}
}
@media(max-width:480px){
  .register-card,.verify-card,.login-card{margin:12px;padding:28px 20px}
  .form-row{flex-direction:column;gap:0}
  .select-group{flex-direction:column}
  .sso-row{flex-direction:column}
}

/* ─── LOGIN CARD ─── */
.login-card{position:relative;z-index:1;width:100%;max-width:420px;margin:20px;padding:40px;background:var(--s1);border:1px solid var(--bd);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.35);animation:fadeUp .6s ease}

/* ─── FORM ROW (login variant) ─── */
.form-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.form-row a{font-size:13px;color:var(--pu)}

/* ─── CSP-SAFE LOGIN CLASSES ─── */
.hidden{display:none!important}
.remember-label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx2);cursor:pointer}
.consent-label{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;color:var(--tx2);cursor:pointer}
.consent-checkbox{accent-color:var(--pu);margin-top:2px;flex-shrink:0}
.consent-group{margin-bottom:16px}
.consent-link{color:var(--pu-hi)}
.mfa-header{text-align:center;margin-bottom:24px}
.mfa-subtitle{font-size:13px;color:var(--tx2);margin-bottom:4px}
.mfa-email{font-size:14px;font-weight:600}
.mfa-code-input{text-align:center;font-size:20px;letter-spacing:8px}
.back-to-signin-wrap{text-align:center;margin-top:16px}
.back-to-signin{font-size:13px;color:var(--tx3)}
.invite-header{text-align:center;margin-bottom:24px}
.invite-title{font-size:14px;color:var(--te);font-weight:600;margin-bottom:4px}
.invite-subtitle{font-size:13px;color:var(--tx3)}

/* ─── CSP-FRIENDLY UTILITY CLASSES ─── */
.hidden{display:none}
.label-sub{color:var(--tx4);font-weight:400}
.consent-wrapper{margin-bottom:14px}
.consent-label{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;color:var(--tx2);cursor:pointer}
.consent-checkbox{accent-color:var(--pu);margin-top:2px;flex-shrink:0}
.consent-link{color:var(--pu-hi)}
.error-btn{margin-top:8px}
.state-notoken .error-icon{display:flex}

/* ─── CSP-SAFE FOOTER CLASSES ─── */
.footer-brand .nav-logo{text-decoration:none;display:flex}
.footer-brand .nav-mark{width:28px;height:28px;border-radius:7px}
.footer-brand .nav-name{margin-left:9px}
.fdot-pu{background:var(--pu)}.fdot-te{background:var(--te)}.fdot-gn{background:var(--gn)}

/* ─── CSP-SAFE COOKIE BANNER ─── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(8,9,15,.95);backdrop-filter:blur(16px);border-top:1px solid var(--bd2);padding:16px 32px;display:none;animation:fadeUp .3s ease}
.cookie-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cookie-text{color:var(--tx2);font-size:13px;line-height:1.5}
.cookie-link{color:var(--pu-hi);text-decoration:none}
.cookie-btn{padding:8px 24px;border-radius:8px;font-size:13px;font-weight:600;color:#fff;background:var(--pu);border:none;cursor:pointer;font-family:inherit}

/* ─── CSP-SAFE PAGE BODY ─── */
.info-block{padding-left:20px;border-left:2px solid var(--bd2);margin-bottom:16px}

/* ─── CSP-SAFE STRIP DOTS ─── */
.dot-pu{background:var(--pu)}.dot-te{background:var(--te)}.dot-gn{background:var(--gn)}.dot-am{background:var(--am)}

/* ─── CSP-SAFE SHOWCASE ─── */
.showcase-grid.mb-lg{margin-bottom:100px}
.showcase-label.pu{color:var(--pu-hi)}.showcase-label.te{color:var(--te)}
.dot-sm{width:6px;height:6px;border-radius:50%}
.dot-sm-pu{background:var(--pu)}.dot-sm-te{background:var(--te)}
.check-pu{background:rgba(124,111,255,.12);border:1px solid rgba(124,111,255,.25)}
.check-te{background:rgba(79,216,235,.1);border:1px solid rgba(79,216,235,.22)}
.check-gn{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.22)}
.btn-inline{display:inline-flex}
.ml-xs{margin-left:4px}

/* ─── CSP-SAFE SCREEN MOCKUP ─── */
.sbar-red{background:#FF5F57}.sbar-yellow{background:#FFBD2E}.sbar-green{background:#28C840}
.sbar-label{font-size:11px;color:var(--tx4);margin-left:8px;font-family:'Geist Mono',monospace}
.stats-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stats-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.val-pu{color:var(--pu-hi)}.val-te{color:var(--te)}.val-gn{color:var(--gn)}.val-am{color:var(--am)}
.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx4);margin-bottom:8px}
.mono-pu{font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--pu-hi)}
.mono-te{font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--te)}
.mono-gn{font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--gn)}
.mono-am{font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--am)}
.row-text{flex:1;font-size:10.5px;color:var(--tx2)}
.badge-pu{background:rgba(124,111,255,.12);color:var(--pu-hi)}
.badge-am{background:rgba(251,191,36,.12);color:var(--am)}
.badge-rd{background:rgba(248,113,113,.12);color:var(--rd)}
.mt-sm{margin-top:12px}
.sla-header{display:flex;justify-content:space-between;font-size:9.5px;color:var(--tx4);margin-bottom:5px}
.bar-fill-pu-te{width:100%;background:var(--pu)}
.bar-fill-87{width:87%}
.delay-half{animation-delay:.5s}
.dot-pip{width:8px;height:8px;border-radius:50%}
.dot-pip-pu{background:var(--pu)}.dot-pip-te{background:var(--te)}.dot-pip-gn{background:var(--gn)}.dot-pip-am{background:var(--am)}

/* ─── CSP-SAFE BUTTON VARIANTS ─── */
.btn-crm-te{border-color:var(--te-b);color:var(--te)}

/* ─── CSP-SAFE FEATURE TAGS & ICONS ─── */
.tag-pu{background:var(--pu-d);color:var(--pu-hi);border:1px solid var(--pu-b)}
.icon-pu{background:rgba(124,111,255,.12);border:1px solid rgba(124,111,255,.22)}
.tag-te{background:var(--te-d);color:var(--te);border:1px solid var(--te-b)}
.icon-te{background:rgba(79,216,235,.1);border:1px solid rgba(79,216,235,.2)}
.tag-gn{background:var(--gn-d);color:var(--gn);border:1px solid var(--gn-b)}
.icon-gn{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.2)}
.tag-am{background:var(--am-d);color:var(--am);border:1px solid var(--am-b)}
.icon-am{background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.2)}
.tag-rd{background:var(--rd-d);color:var(--rd);border:1px solid var(--rd-b)}
.icon-rd{background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.2)}

/* ─── CSP-SAFE INTEGRATION LOGOS ─── */
.int-bg-payfast{background:rgba(39,158,130,.15)}
.int-bg-smtp{background:rgba(124,111,255,.15)}
.int-bg-mail{background:rgba(79,216,235,.12)}

/* ─── CSP-SAFE UTILITIES ─── */
.text-center{text-align:center}
.justify-center{justify-content:center}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-lg{margin-top:32px}
.mt-xl{margin-top:40px}
.mb-0{margin-bottom:0}
.pt-section{padding-top:140px}
.pt-40{padding-top:40px}
.pt-60{padding-top:60px}
.pb-0{padding-bottom:0}
.pb-100{padding-bottom:100px}
.cmp-flex{flex:1.5}
.cmp-strike{text-decoration:line-through;color:var(--tx4)}
.cmp-bold{font-weight:600;color:var(--pu)}
.cmp-note{text-align:center;color:var(--tx4);font-size:13px;margin-top:16px}
.cmp-hdr-text{text-align:center;font-size:18px;margin-bottom:24px;color:var(--tx)}
.cmp-hdr-accent{color:var(--gn)}
.cmp-cell-center{color:var(--tx4)}

/* ─── CSP-SAFE DEMO/DOCS CLASSES ─── */
.w-full{width:100%}
.mb-md{margin-bottom:16px}
.mb-lg{margin-bottom:32px}
.link-ac{color:var(--pu-hi)}
.demo-cta-title{font-family:'Syne',sans-serif;font-size:clamp(24px,4vw,36px);font-weight:700;margin-bottom:16px}
.demo-cta-sub{color:var(--tx2);font-size:18px;margin-bottom:32px;max-width:500px;margin-left:auto;margin-right:auto}
.demo-cta-btn{font-size:16px;padding:16px 40px}
.hero-title{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.035em;line-height:1.15;margin-bottom:16px}
.btn-captcha{padding:10px 14px;border:1px solid var(--bd2);border-radius:8px;background:var(--s2);color:var(--tx);font-size:18px;cursor:pointer;flex-shrink:0;transition:border-color .15s,background .15s}
.btn-captcha:hover:not(:disabled){background:var(--s3);border-color:var(--bd3)}
.btn-captcha:disabled{opacity:.4;cursor:not-allowed}
.label-sub{font-size:12px;color:var(--tx4);margin-top:4px}

/* ─── CSP INLINE-STYLE REPLACEMENTS ─── */
.app-footer-bar{text-align:center;padding:8px;font-size:11px;color:var(--muted,#888);border-top:1px solid var(--border,#1e1e2e)}
.app-footer-bar a{color:var(--pu,#7C6FFF);text-decoration:none}
.noscript-fallback{text-align:center;padding:3rem;font-family:sans-serif}
.badge-sm{font-size:9px;margin-left:4px}
.topbar-inner{width:100%}
.topbar-left{align-items:center;gap:12px}
.topbar-right{align-items:center;gap:8px}
.so-body-pad{padding:16px}
.offline-body{margin:0;background:#0B0B12;color:#C2C8D4;font-family:'Inter','Segoe UI',system-ui,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:2rem;box-sizing:border-box}
.offline-title{font-size:1.5rem;color:#E8EBF0;margin-bottom:0.5rem}
.offline-desc{color:#8890A4;margin-top:0;max-width:360px;line-height:1.5}
.offline-retry{display:inline-block;margin-top:1.5rem;padding:0.6rem 1.5rem;background:#5B6AF0;color:#fff;border:none;border-radius:8px;font-size:0.95rem;cursor:pointer;text-decoration:none}
.portal-footer-meta{font-size:.75rem;opacity:.5;text-align:center;padding:6px 0}
.share-footer{text-align:center;padding:16px;border-top:1px solid var(--border,#222);margin-top:auto}

/* ─── WHATSAPP FLOATING BUTTON ─── */
.wa-float{position:fixed;bottom:22px;right:22px;z-index:120;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:#25D366;color:#fff;font-weight:600;font-size:13px;text-decoration:none;box-shadow:0 8px 24px rgba(37,211,102,.35);transition:transform .15s,background .15s}
.wa-float:hover{background:#1EBE5A;transform:translateY(-2px)}
.wa-float svg{flex-shrink:0;display:block}
.wa-float .wa-label{line-height:1}
@media (max-width:520px){.wa-float{bottom:16px;right:16px;padding:13px}.wa-float .wa-label{display:none}}

/* ─── BLOG ─── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.blog-card{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--border,#222);border-radius:14px;background:var(--card,#12121a);text-decoration:none;transition:border-color .15s,transform .15s}
.blog-card:hover{border-color:var(--pu-hi);transform:translateY(-2px)}
.blog-card-meta{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.blog-card-title{font-size:16px;line-height:1.4;color:var(--tx);margin:0}
.blog-card-excerpt{font-size:13px;line-height:1.6;color:var(--tx3);margin:0}
.blog-card-link{font-size:13px;font-weight:600;color:var(--pu-hi);margin-top:auto}
.blog-arrow{display:inline-block;transition:transform .15s}
.blog-card:hover .blog-arrow{transform:translateX(3px)}
.blog-article{padding-bottom:8px}
.blog-article-meta{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.blog-prose{color:var(--tx2);font-size:15px;line-height:1.75;max-width:760px}
.blog-prose p{margin:0 0 14px}
.blog-prose h3{font-size:16px;color:var(--tx);margin:22px 0 8px}
.blog-prose ul{margin:0 0 14px;padding-left:20px}
.blog-prose li{margin-bottom:6px}
.blog-prose strong{color:var(--tx)}
.blog-prose a{color:var(--pu-hi)}
.blog-prose-cta{margin-top:20px;padding:14px 16px;border:1px solid var(--border,#222);border-radius:10px;background:var(--card,#12121a)}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr}}
@media (max-width:520px){.blog-grid{grid-template-columns:1fr}.blog-article{margin:0}}

/* ─── TRUST INDICATORS ─── */
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.trust-item{display:flex;gap:12px;padding:16px;border:1px solid var(--border,#222);border-radius:12px;background:var(--card,#12121a)}
.trust-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--surface,#16162199);display:flex;align-items:center;justify-content:center}
.trust-body{min-width:0}
.trust-title{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:2px}
.trust-text{font-size:12px;color:var(--tx3);line-height:1.5}
@media (max-width:900px){.trust-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust-strip{grid-template-columns:1fr}}
section[id]{scroll-margin-top:84px}
::selection{background:rgba(124,111,255,.3)}
a:focus-visible,button:focus-visible{outline:2px solid var(--pu-hi);outline-offset:2px}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}