*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#fff;--fg:#050505;--muted:#6b7280;--border:#e6e6e6;
  --hero:#b6d2ff;--cta:#d8001b;--link:#0057d9;--contact:#0057ff;
  --soft:#f3f3f3;--softblue:#eaf1fb;--footer:#f3f3f3;
}
html,body{margin:0;padding:0}
body{font-family:Inter,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0;margin:0}
.container{max-width:1280px;margin:0 auto;padding:0 24px}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;height:80px;background:#fff;border-bottom:1px solid var(--border)}
.nav-container{max-width:1280px;margin:0 auto;height:80px;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-icon{width:36px;height:36px;border-radius:6px;background:var(--hero);display:flex;align-items:center;justify-content:center;color:var(--link)}
.brand-name{font-size:22px;font-weight:700;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:35px}
.nav-links a,.nav-links button{font-size:15px;color:#111;display:inline-flex;align-items:center;gap:6px}
.caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #111}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--hero);border:1px solid var(--border)}
@media(max-width:900px){.nav-links a:not(.nav-whatsapp),.nav-links button{display:none}}

/* Hero */
.hero{background:var(--hero);text-align:center;padding:96px 0 0}
.hero h1{max-width:820px;margin:0 auto;font-size:64px;font-weight:800;line-height:1.08;letter-spacing:-.02em}
.lead{max-width:780px;margin:28px auto 0;font-size:20px;line-height:1.6;color:#3b3b3b}
.red-cta{background:var(--cta);color:#fff;padding:18px 38px;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.06em;border-radius:3px;margin-top:40px;transition:opacity .15s}
.red-cta:hover{opacity:.9}

/* Mail mockup */
.mail-mockup{position:relative;max-width:1150px;margin:64px auto 0;text-align:left}
.mm-window{display:flex;height:560px;background:#fff;border-radius:14px;border:1px solid rgba(0,0,0,.06);box-shadow:0 30px 80px -30px rgba(0,0,0,.25);overflow:hidden}
.mm-sidebar{width:220px;background:#1e2533;color:rgba(255,255,255,.75);padding:16px;font-size:13px}
.mm-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;margin-bottom:24px}
.mm-logo{width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,.1)}
.mm-new{width:100%;background:rgba(255,255,255,.1);color:#fff;padding:8px;border-radius:4px;font-size:12px;font-weight:600;margin-bottom:20px}
.mm-item{display:flex;justify-content:space-between;padding:8px;border-radius:4px;margin-bottom:2px}
.mm-item.active{background:rgba(255,255,255,.1);color:#fff}
.mm-badge{font-size:10px}
.mm-list{width:300px;border-right:1px solid var(--border);background:#fff}
.mm-search{padding:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;font-size:12px}
.mm-search input{flex:1;border:0;outline:0;font-size:12px}
.mm-row{padding:12px 16px;border-bottom:1px solid #f0f0f0}
.mm-row.mm-current{background:rgba(255,246,201,.6)}
.mm-top{display:flex;justify-content:space-between;font-size:12px;font-weight:600}
.mm-top span{color:var(--muted);font-weight:400}
.mm-sub{font-size:12px;font-weight:500;margin-top:2px}
.mm-snip{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-preview{flex:1;padding:24px;position:relative;background:#fff}
.mm-pv-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:16px}
.mm-pv-title{font-size:15px;font-weight:600}
.mm-pv-meta{font-size:11px;color:var(--muted);margin-top:2px}
.mm-pv-enc{font-size:11px;color:var(--muted)}
.mm-pv-body{margin-top:16px;font-size:13px;line-height:1.6;color:#444}
.mm-pv-body ul{list-style:disc;padding-left:20px;margin:8px 0}
.mm-pv-body li{margin:4px 0}
.mm-attach{display:flex;gap:12px;margin-top:20px}
.mm-attach>div{border:1px solid var(--border);padding:8px 10px;border-radius:6px;font-size:11px}
.mm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.85);color:#fff;font-size:20px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.mm-phone{position:absolute;right:-16px;bottom:-40px;width:180px;height:360px;background:#0f1320;border:6px solid #0f1320;border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.3);padding:14px;color:rgba(255,255,255,.8);overflow:hidden}
.mm-phone-head{font-size:10px;opacity:.6;margin-bottom:10px}
.mm-phone-row{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px}
.mm-phone-row span{display:block;font-size:9px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.mm-phone{display:none}.mm-sidebar{display:none}}

/* Testimonials */
.testimonials{padding:128px 24px}
.t-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
@media(max-width:800px){.t-grid{grid-template-columns:1fr}}
.t-card{position:relative}
.t-badge{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.t-card p{font-size:18px;line-height:1.7;color:#2a2a2a;margin:0}
.t-name{margin-top:24px;font-weight:700}
.t-title{font-size:13px;color:var(--muted)}
.t-arrows{position:absolute;right:0;top:50%;display:flex;gap:8px}
.t-arrows button{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:16px}

/* Feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding:112px 24px}
.feature.reverse>.feature-text{order:2}
.feature.reverse>.feature-visual{order:1}
@media(max-width:900px){.feature{grid-template-columns:1fr;gap:48px;padding:64px 24px}.feature.reverse>.feature-text,.feature.reverse>.feature-visual{order:initial}}
.feature h2{font-size:44px;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0}
.feature p{font-size:18px;line-height:1.65;color:#444;margin:24px 0 0}
.text-link{display:inline-flex;align-items:center;gap:8px;margin-top:32px;color:var(--link);font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase}

/* Shield */
.shield-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:480px}
.shield-bg{position:absolute;width:480px;height:480px;border-radius:50%;background:repeating-radial-gradient(circle at center,#fde6ec 0 30px,#fff 30px 60px)}
.shield{position:relative;width:200px;height:240px;background:linear-gradient(135deg,#c9a47a,#8b6f48);clip-path:polygon(50% 0,100% 15%,100% 65%,50% 100%,0 65%,0 15%);box-shadow:inset -20px 0 30px rgba(0,0,0,.2),0 20px 40px rgba(0,0,0,.15);border:6px solid #d7d7da}
.pause-btn{position:absolute;bottom:16px;right:16px;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:0 2px 6px rgba(0,0,0,.08)}

/* Email card */
.email-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px -20px rgba(0,0,0,.15);padding:24px}
.ec-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}
.ec-input{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:10px;padding:16px;font-size:18px}
.ec-input .muted{color:var(--muted)}
.caret-blink{display:inline-block;width:1px;height:20px;background:#111;margin-left:auto;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ec-user{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:12px}
.av{width:36px;height:36px;border-radius:50%;background:var(--hero);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.av.big{width:40px;height:40px}
.ec-user>div:last-child b{display:block;font-size:13px}
.ec-user>div:last-child span{display:block;font-size:11px;color:var(--muted)}

/* Admin */
.admin-wrap{position:relative}
.admin-bg{position:absolute;inset:-40px;background:radial-gradient(circle at 30% 40%,#dbe7f5,transparent 60%);border-radius:40px;z-index:-1}
.admin-panel{display:flex;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 60px -20px rgba(0,0,0,.18);overflow:hidden}
.admin-side{width:170px;background:#fafbfd;border-right:1px solid var(--border);padding:16px;font-size:12px;color:#555}
.admin-title{font-weight:700;color:#111;margin-bottom:16px}
.admin-item{padding:8px;border-radius:4px}
.admin-item.active{background:var(--softblue);color:#111;font-weight:600}
.admin-main{flex:1;padding:20px}
.admin-sub{font-size:14px;font-weight:700;margin-bottom:12px}
.admin-user{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #f0f0f0}
.admin-user .av{width:28px;height:28px;font-size:11px}
.ud{flex:1}
.ud b{display:block;font-size:12px}
.ud span{display:block;font-size:10px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.dot.green{background:#22c55e}
.admin-float{position:absolute;right:-16px;bottom:32px;width:220px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.15);padding:16px}
.af-head{display:flex;align-items:center;gap:12px}
.af-head b{display:block;font-size:12px}
.af-head span{display:block;font-size:10px;color:var(--muted)}
.blue-btn{background:var(--link);color:#fff;font-weight:700;font-size:11px;padding:8px 14px;border-radius:4px;margin-top:12px}
.blue-btn.full{width:100%;font-size:12px;padding:10px}

/* Retention */
.retention{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 60px -20px rgba(0,0,0,.15);padding:24px;position:relative}
.r-title{font-size:13px;font-weight:700;margin-bottom:16px}
.r-pill{background:var(--soft);padding:10px 12px;border-radius:8px;font-size:12px;font-weight:500;margin-bottom:16px}
.r-box{border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:16px}
.r-box .muted{display:block;font-size:10px;letter-spacing:.1em;color:var(--muted)}
.r-box b{font-size:14px}
.r-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.r-date{border:1px solid var(--border);border-radius:6px;padding:8px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.r-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{font-size:10px;padding:4px 10px;border-radius:999px;background:var(--hero)}
.r-check{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:16px}
.r-sync{position:absolute;right:-16px;top:-16px;width:56px;height:56px;border-radius:50%;background:var(--hero);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--link);font-size:24px}

/* Mobile band */
.mobile-band{background:#fafaf7}
.store-row{display:flex;gap:12px;margin-top:24px}
.store-row.small .store{padding:6px 12px}
.store{background:#000;color:#fff;padding:10px 16px;border-radius:8px;display:block}
.store span{display:block;font-size:11px;opacity:.7}
.store b{display:block;font-size:14px}
.phone{position:relative;width:280px;height:560px;background:#0f1320;border:10px solid #0f1320;border-radius:40px;box-shadow:0 30px 60px rgba(0,0,0,.3);margin:0 auto;overflow:hidden;color:rgba(255,255,255,.85);padding:16px;font-size:12px}
.phone-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.phone-head b{display:block;font-size:13px}
.phone-head span{display:block;font-size:10px;opacity:.6}
.pav{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1)}
.phone-search{background:rgba(255,255,255,.05);padding:8px 12px;border-radius:8px;font-size:11px;margin-bottom:16px}
.phone-label{font-size:10px;letter-spacing:.1em;opacity:.5;margin:12px 0 4px}
.phone-folder{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.phone-nav{position:absolute;left:0;right:0;bottom:0;height:48px;background:#0f1320;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-around;color:rgba(255,255,255,.7)}
.darkmode-toggle{display:flex;justify-content:center;align-items:center;gap:12px;padding:0 0 48px;font-size:13px}
.switch{display:inline-block;width:36px;height:20px;border-radius:999px;background:#111;position:relative}
.switch::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff}

/* Streams */
.streams{display:flex;flex-direction:column;gap:12px}
.stream-msg{display:flex;gap:12px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:16px}
.stream-msg b{font-size:13px;display:block}
.stream-msg p{margin:2px 0 0;font-size:13px;color:#444}
.stream-reply{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:10px}
.stream-reply input{flex:1;border:0;outline:0;font-size:12px}
.stream-reply button{color:var(--link);font-weight:700;font-size:11px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:112px 24px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{padding:40px;border-radius:16px;min-height:420px;display:flex;flex-direction:column}
.card.grey{background:#f3f3f3}
.card.blue{background:#eaf1fb}
.card-icon{font-size:32px;margin-bottom:24px;color:var(--link)}
.card h3{font-size:22px;font-weight:800;line-height:1.2;margin:0}
.card p{font-size:15px;line-height:1.65;color:#444;flex:1;margin:16px 0 0}
.card a{margin-top:24px}

/* FAQ */
.faq{max-width:900px;margin:0 auto;padding:112px 24px}
.faq-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:48px}
.faq-head h2{font-size:40px;font-weight:800;margin:0;line-height:1.2}
.faq-head p{margin-top:8px;color:#555;max-width:600px}
.pill{border:1px solid var(--border);border-radius:999px;padding:8px 20px;font-size:13px;font-weight:600;background:#fff}
.pill.grey{background:#f3f3f3;border-color:transparent}
.faq-list{border-top:1px solid var(--border)}
.faq-list details{border-bottom:1px solid var(--border)}
.faq-list summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:600}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:24px;font-weight:400;color:#555}
.faq-list details[open] summary::after{content:"−"}
.faq-list details>div{padding:0 0 24px;font-size:15px;line-height:1.7;color:#444}
.show-more{display:flex;justify-content:center;margin-top:24px}

/* Final CTA */
.final-cta{text-align:center;padding:128px 24px}
.final-cta h2{font-size:56px;font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0}
.final-cta p{font-size:20px;color:#444;margin:16px 0 0}
.final-cta .red-cta{margin-top:40px}

/* Footer */
.site-footer{background:var(--footer);color:#222}
.site-footer .container{padding:80px 24px}
.footer-top{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-bottom:64px}
@media(max-width:900px){.footer-top{grid-template-columns:1fr}}
.promos{display:flex;flex-direction:column;gap:16px}
.promo{background:#fff;border:1px solid var(--border);padding:24px;border-radius:12px}
.kicker{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.promo b{display:block;margin-top:8px}
.promo a{display:inline-block;margin-top:12px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:700px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
.footer-cols h4{font-size:13px;font-weight:700;margin:0 0 12px}
.footer-cols li{font-size:13px;color:#555;margin-bottom:8px;cursor:pointer}
.footer-cols li:hover{color:#111}
.other-products{border-top:1px solid var(--border);padding-top:40px;display:grid;grid-template-columns:2fr 1fr;gap:40px}
@media(max-width:900px){.other-products{grid-template-columns:1fr}}
.other-products h4{font-size:13px;font-weight:700;margin:0 0 16px}
.op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){.op-grid{grid-template-columns:1fr}}
.op{background:#fff;border:1px solid var(--border);border-radius:8px;padding:16px}
.op b{display:block;font-size:14px}
.op span{display:block;font-size:12px;color:var(--muted)}
.contact-row{margin-top:40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.mail{font-size:14px;font-weight:600;color:var(--link)}
.socials{display:flex;gap:12px}
.socials a{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:600}
.trust{margin-top:48px;border-top:1px solid var(--border);padding-top:32px}
.trust h4{font-size:13px;font-weight:700;margin:0 0 16px}
.badges{display:flex;flex-wrap:wrap;gap:12px}
.badges span{background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:11px;font-weight:600;color:#555}
.search-row{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}
.search-box{flex:1;min-width:280px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 16px}
.search-box input{flex:1;border:0;outline:0;font-size:13px;background:transparent;padding:6px 0}
.search-box button{width:28px;height:28px;border-radius:4px;background:#111;color:#fff;font-size:13px}
.lang{background:#fff;border:1px solid var(--border);border-radius:6px;padding:12px 16px;font-size:13px}
.legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:#666}
.legal a{cursor:pointer}.legal a:hover{color:#111}
.copy{margin-top:16px;font-size:12px;color:#666}

/* Floating contact */
.floating-contact{position:fixed;right:28px;bottom:24px;z-index:2000;background:var(--contact);color:#fff;border-radius:4px;padding:16px 24px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 10px 30px rgba(0,87,255,.4);display:inline-flex;align-items:center;gap:8px;transition:opacity .15s}
.floating-contact:hover{opacity:.92}

/* Optiact interactive animation layer */
.animate-hero h1,
.animate-hero .lead,
.animate-hero .hero-cta,
.animate-hero .mail-mockup{
  opacity:0;
  transform:translateY(22px);
  animation:heroReveal .75s ease forwards;
}
.animate-hero .lead{animation-delay:.12s}
.animate-hero .hero-cta{animation-delay:.22s}
.animate-hero .mail-mockup{animation-delay:.34s}
@keyframes heroReveal{to{opacity:1;transform:translateY(0)}}

.mail-mockup::before,
.mail-mockup::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  filter:blur(.2px);
}
.mail-mockup::before{
  width:160px;height:160px;left:-58px;top:70px;
  background:rgba(0,87,217,.11);
  animation:floatBlob 7s ease-in-out infinite;
}
.mail-mockup::after{
  width:120px;height:120px;right:100px;bottom:-62px;
  background:rgba(216,0,27,.10);
  animation:floatBlob 8s ease-in-out infinite reverse;
}
@keyframes floatBlob{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(12px,-18px,0) scale(1.08)}}

.mm-window{
  transform-style:preserve-3d;
  transition:transform .35s ease, box-shadow .35s ease;
}
.mail-mockup:hover .mm-window{
  transform:translateY(-8px) perspective(1200px) rotateX(1deg) rotateY(-1deg);
  box-shadow:0 40px 90px -35px rgba(0,0,0,.38);
}
.mm-brand,.mm-new,.mm-item,.mm-search,.mm-row,.mm-pv-head,.mm-pv-body,.mm-attach,.mm-phone-row{
  animation:softPop .55s ease both;
}
.mm-new{animation-delay:.08s}.mm-item:nth-of-type(2){animation-delay:.13s}.mm-item:nth-of-type(3){animation-delay:.18s}.mm-item:nth-of-type(4){animation-delay:.23s}.mm-item:nth-of-type(5){animation-delay:.28s}.mm-item:nth-of-type(6){animation-delay:.33s}.mm-item:nth-of-type(7){animation-delay:.38s}
.mm-row:nth-child(2){animation-delay:.12s}.mm-row:nth-child(3){animation-delay:.18s}.mm-row:nth-child(4){animation-delay:.24s}.mm-row:nth-child(5){animation-delay:.30s}.mm-row:nth-child(6){animation-delay:.36s}.mm-row:nth-child(7){animation-delay:.42s}
@keyframes softPop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

.mm-item,
.mm-row,
.ec-user{
  transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mm-item{
  width:100%;text-align:left;align-items:center;
}
.mm-item:hover,
.mm-item:focus-visible{
  background:rgba(255,255,255,.16);
  color:#fff;
  transform:translateX(3px);
}
.mm-row{
  display:block;width:100%;text-align:left;background:#fff;color:inherit;
}
.mm-row:hover,
.mm-row:focus-visible{
  background:#fff9dc;
  transform:translateX(4px);
  box-shadow:inset 3px 0 0 var(--cta);
}
.mm-row.mm-current{
  background:rgba(255,246,201,.92);
  box-shadow:inset 3px 0 0 var(--cta);
}
.mm-preview.preview-pulse{animation:previewPulse .45s ease}
@keyframes previewPulse{50%{transform:scale(.985);background:#fffdf0}}
.mm-play{
  overflow:hidden;
  transition:transform .25s ease, background .25s ease;
}
.mm-play::before{
  content:"";position:absolute;inset:-8px;border-radius:inherit;border:2px solid rgba(0,0,0,.18);animation:ringPulse 1.8s ease-out infinite;
}
.mm-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#d8001b}
.mm-play span{position:relative;z-index:1}
@keyframes ringPulse{0%{transform:scale(.75);opacity:.8}100%{transform:scale(1.35);opacity:0}}
.mm-phone{
  animation:phoneFloat 5.5s ease-in-out infinite;
}
@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.mm-phone-row.active{
  background:rgba(255,255,255,.08);
  border-radius:10px;
  padding-left:8px;
  padding-right:8px;
}

.workflow-visual{position:relative;min-height:360px;display:flex;align-items:center;justify-content:center}
.workflow-visual::before{
  content:"";position:absolute;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,87,217,.14),transparent 60%);
  animation:workflowGlow 4s ease-in-out infinite;
}
@keyframes workflowGlow{50%{transform:scale(1.08);opacity:.72}}
.interactive-card{position:relative;z-index:2;width:min(100%,440px);transition:transform .35s ease, box-shadow .35s ease}
.workflow-visual:hover .interactive-card{transform:translateY(-8px);box-shadow:0 28px 70px -24px rgba(0,0,0,.22)}
.workflow-orbit{
  position:absolute;z-index:1;background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.08);
  border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;color:#333;
}
.workflow-orbit.one{right:20px;top:42px;animation:orbitFloatA 5s ease-in-out infinite}
.workflow-orbit.two{left:18px;bottom:56px;animation:orbitFloatB 6s ease-in-out infinite}
@keyframes orbitFloatA{50%{transform:translate(-12px,14px)}}
@keyframes orbitFloatB{50%{transform:translate(14px,-12px)}}
.ec-user{width:100%;background:#fff;text-align:left}
.ec-user:hover,.ec-user:focus-visible,.ec-user.active{border-color:rgba(0,87,217,.45);background:#f4f8ff;transform:translateY(-2px)}
.workflow-status{margin-top:14px;border-radius:10px;background:#f7f7f7;padding:12px;font-size:12px;font-weight:700;color:#333;min-height:42px}
.workflow-status.is-changing{animation:statusChange .35s ease}
@keyframes statusChange{50%{transform:translateY(-3px);background:#fff6c9}}
.workflow-progress{height:6px;border-radius:999px;background:#ececec;overflow:hidden;margin-top:12px}
.workflow-progress span{display:block;width:33%;height:100%;background:var(--link);border-radius:999px;animation:progressRun 3s ease-in-out infinite}
@keyframes progressRun{0%{width:20%;transform:translateX(0)}50%{width:70%;transform:translateX(20%)}100%{width:35%;transform:translateX(190%)}}

@media(max-width:900px){
  .mail-mockup::before,.mail-mockup::after,.workflow-orbit{display:none}
  .mail-mockup:hover .mm-window{transform:none}
  .workflow-visual{min-height:auto}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .mail-mockup:hover .mm-window,.workflow-visual:hover .interactive-card{transform:none}
}


/* Updated navigation, CTA, process, contact, and current-site footer */
.nav-whatsapp{
  background:#111;
  color:#fff!important;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
}
.cta-pair{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:40px;
}
.cta-pair.hero-cta{margin-top:40px}
.cta-pair .red-cta{margin-top:0}
.outline-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 28px;
  min-height:54px;
  border:1px solid rgba(0,0,0,.16);
  border-radius:3px;
  font-weight:800;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:#fff;
  color:#111;
}
.process{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#17233d 0%,#101828 100%);
  color:#fff;
  padding:112px 0;
}
.process .section-head{
  max-width:760px;
  margin:0 0 36px;
}
.process .section-head h2{
  font-size:clamp(36px,4vw,56px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 12px;
}
.process .section-head p{color:rgba(255,255,255,.76);font-size:18px;margin:0}
.process-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}
.process-card{
  position:relative;
  min-height:260px;
  padding:24px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}
.process-card:hover,.process-card.active{
  transform:translateY(-6px);
  background:rgba(255,255,255,.13);
  box-shadow:0 24px 60px rgba(0,0,0,.24);
}
.process-card.reset{opacity:.86}
.process-code{
  display:inline-block;
  margin-bottom:14px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  color:#fff6c9;
}
.process-card h3{
  font-size:20px;
  line-height:1.18;
  margin:0 0 12px;
}
.process-card p{
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.74);
  margin:0;
}
.contact-cta{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  padding:112px 24px;
}
.contact-kicker{
  display:inline-flex;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--link);
  margin-bottom:16px;
}
.contact-cta h2{
  font-size:clamp(38px,5vw,58px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0;
}
.contact-cta p{
  font-size:18px;
  line-height:1.65;
  color:#444;
  margin:20px 0 0;
}
.contact-actions-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.18);
  display:grid;
  gap:12px;
}
.contact-action{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fafafa;
}
.contact-action.primary{
  background:var(--hero);
  border-color:rgba(0,0,0,.08);
}
.contact-action span{
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.contact-action b{font-size:16px}
.current-footer{
  background:radial-gradient(circle at top,#10203d 0%,#081224 70%);
  color:#fff;
  padding:64px 0 28px;
}
.current-footer .footer-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr .85fr .85fr;
  gap:24px;
  align-items:start;
  margin-bottom:32px;
}
.current-footer h4{
  margin:0 0 14px;
  font-size:16px;
  letter-spacing:.03em;
}
.current-footer p,.current-footer li,.current-footer a{
  color:rgba(255,255,255,.78);
  font-size:15px;
}
.current-footer ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.current-footer .footer-brand{max-width:36ch}
.current-footer .copyright{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:16px;
  text-align:center;
  color:rgba(255,255,255,.65);
  font-size:14px;
}
.floating-contact{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:800;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
@media(max-width:1100px){
  .process-grid,.current-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .current-footer .footer-grid>:first-child{grid-column:1/-1}
}
@media(max-width:900px){
  .contact-cta{grid-template-columns:1fr;gap:28px;padding:72px 24px}
  .process{padding:76px 0}
  .process-grid,.current-footer .footer-grid{grid-template-columns:1fr}
  .current-footer .footer-grid>:first-child{grid-column:auto}
  .contact-action{align-items:flex-start;flex-direction:column}
}


/* Optiact media logo + favicon support */
.brand-logo{background:#fff;border:1px solid var(--border);overflow:hidden;padding:4px}
.brand-logo img{width:100%;height:100%;object-fit:contain}
.mm-logo{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.mm-logo img{width:80%;height:80%;object-fit:contain}
.footer-logo{width:46px;height:46px;object-fit:contain;margin-bottom:12px;background:#fff;border-radius:10px;padding:5px}


/* =====================================================
   Mobile responsiveness polish
   Structure and content are unchanged; these rules only
   adapt spacing, width, typography, and layout behaviour.
   ===================================================== */
html{scroll-padding-top:88px;overflow-x:hidden}
body{overflow-x:hidden}
.brand-icon img,.mm-logo img,.footer-logo{max-width:100%}
.feature-visual{min-width:0}

@media(max-width:1024px){
  .hero h1{font-size:clamp(42px,7vw,64px)}
  .lead{font-size:clamp(17px,2.2vw,20px)}
  .feature h2{font-size:clamp(34px,5vw,44px)}
  .feature{gap:56px}
  .process-card{min-height:auto}
}

@media(max-width:900px){
  .site-header{height:auto;min-height:72px}
  .nav-container{height:auto;min-height:72px;gap:14px;padding-top:12px;padding-bottom:12px}
  .brand-name{font-size:20px}
  .nav-whatsapp{padding:9px 12px;font-size:13px;white-space:nowrap}
  .hero{padding-top:72px}
  .mail-mockup{margin-top:46px;width:100%}
  .mm-window{height:auto;min-height:0;display:block;overflow:hidden}
  .mm-list{width:100%;border-right:0;border-bottom:1px solid var(--border)}
  .mm-row{padding:14px 16px}
  .mm-preview{width:100%;padding:20px}
  .mm-pv-head{gap:14px;align-items:flex-start}
  .mm-attach{flex-wrap:wrap}
  .feature{padding-left:24px;padding-right:24px}
  .shield-wrap{min-height:360px;overflow:hidden}
  .shield-bg{width:min(82vw,420px);height:min(82vw,420px)}
  .shield{width:min(42vw,190px);height:min(50vw,230px)}
  .admin-float{position:static;width:100%;margin-top:16px}
  .r-sync{right:8px;top:-22px}
  .store-row{flex-wrap:wrap}
  .phone{width:min(280px,86vw);height:540px}
  .final-cta h2{font-size:clamp(36px,7vw,56px)}
  .final-cta p{font-size:18px}
}

@media(max-width:760px){
  .container{padding-left:18px;padding-right:18px}
  .nav-container{padding-left:18px;padding-right:18px}
  .hero{padding-top:58px}
  .hero h1{font-size:clamp(36px,11vw,52px);line-height:1.06}
  .lead{font-size:16px;line-height:1.6;margin-top:20px}
  .cta-pair{width:100%;gap:10px}
  .red-cta,.outline-cta{width:100%;max-width:360px;min-height:52px;text-align:center;padding:15px 20px;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
  .testimonials{padding:72px 18px}
  .t-grid{gap:34px}
  .t-card p{font-size:16px}
  .t-arrows{position:static;margin-top:18px}
  .feature{padding:72px 18px;gap:38px}
  .feature p{font-size:16px;line-height:1.65}
  .text-link{font-size:12px;letter-spacing:.12em;line-height:1.4}
  .workflow-visual{width:100%}
  .interactive-card,.email-card{width:100%;padding:18px}
  .ec-input{font-size:16px;padding:14px;min-width:0;overflow:hidden}
  .admin-panel{width:100%}
  .admin-side{width:132px;padding:14px 10px}
  .admin-main{padding:16px 12px;min-width:0}
  .admin-user{gap:8px}
  .ud b,.ud span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .r-dates{grid-template-columns:1fr}
  .cards{padding:72px 18px;gap:18px}
  .card{min-height:auto;padding:28px}
  .faq{padding:72px 18px}
  .faq-head{margin-bottom:32px}
  .faq-head h2{font-size:34px}
  .faq-list summary{font-size:15px;gap:14px;align-items:flex-start}
  .contact-cta{padding:72px 18px}
  .contact-action b{font-size:15px;word-break:break-word}
  .final-cta{padding:82px 18px}
  .current-footer{padding-top:48px}
  .current-footer .footer-grid{gap:28px}
  .floating-contact{right:14px;bottom:14px;padding:12px 14px;font-size:12px}
}

@media(max-width:560px){
  .nav-container{align-items:flex-start}
  .brand-icon{width:34px;height:34px;flex:0 0 34px}
  .nav-links{gap:0;margin-left:auto}
  .hero h1 br{display:none}
  .mail-mockup{margin-top:36px}
  .mm-window{border-radius:12px}
  .mm-search input{min-width:0}
  .mm-pv-head{flex-direction:column}
  .mm-pv-enc{align-self:flex-start}
  .mm-play{width:54px;height:54px}
  .feature h2{font-size:clamp(30px,9vw,38px)}
  .feature h2 br{display:none}
  .shield-wrap{min-height:300px}
  .admin-panel{display:block}
  .admin-side{width:100%;border-right:0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .admin-title{grid-column:1/-1;margin-bottom:6px}
  .admin-item{text-align:center}
  .ud b,.ud span{max-width:190px}
  .stream-msg{padding:14px;gap:10px}
  .stream-reply{align-items:stretch;flex-direction:column}
  .stream-reply button{align-self:flex-end}
  .process{padding:64px 0}
  .process .section-head h2{font-size:34px}
  .process .section-head p{font-size:16px}
  .process-card{padding:20px;border-radius:18px}
  .contact-actions-card{padding:14px}
  .contact-action{padding:16px}
  .current-footer .footer-grid{grid-template-columns:1fr}
  .floating-contact{left:14px;right:14px;bottom:12px;border-radius:12px}
  .current-footer{padding-bottom:78px}
}

@media(max-width:380px){
  .container,.nav-container{padding-left:14px;padding-right:14px}
  .brand-name{font-size:18px}
  .nav-whatsapp{font-size:12px;padding:8px 10px}
  .hero h1{font-size:34px}
  .mm-preview{padding:16px}
  .mm-attach>div{width:100%}
  .phone{width:100%;height:520px}
  .contact-action b{font-size:14px}
}

/* =====================================================
   Hero background image update
   The uploaded "hero image.png" now fills the full hero
   section behind the H1, paragraph, and CTA buttons on
   desktop and mobile. Keep the image file in the same
   folder as index.html and styles.css, or update the URL.
   ===================================================== */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#b6d2ff;
  min-height:calc(100svh - 80px);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("hero image.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.02);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(182,210,255,.58) 0%,rgba(182,210,255,.48) 44%,rgba(182,210,255,.60) 100%),
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.48) 0%,rgba(255,255,255,.18) 32%,rgba(255,255,255,0) 64%);
}
.hero .container{
  position:relative;
  z-index:1;
}
.hero h1,
.hero .lead{
  text-shadow:0 3px 24px rgba(255,255,255,.72);
}
.hero .mail-mockup{
  position:relative;
  z-index:1;
}

@media(max-width:900px){
  .hero{
    min-height:calc(100svh - 72px);
  }
  .hero::before{
    background-position:58% center;
  }
  .hero::after{
    background:
      linear-gradient(180deg,rgba(182,210,255,.63) 0%,rgba(182,210,255,.54) 48%,rgba(182,210,255,.64) 100%),
      radial-gradient(circle at 50% 12%,rgba(255,255,255,.52) 0%,rgba(255,255,255,.22) 34%,rgba(255,255,255,0) 68%);
  }
}

@media(max-width:560px){
  .hero::before{
    background-position:62% center;
  }
  .hero::after{
    background:
      linear-gradient(180deg,rgba(182,210,255,.68) 0%,rgba(182,210,255,.58) 50%,rgba(182,210,255,.68) 100%),
      radial-gradient(circle at 50% 10%,rgba(255,255,255,.58) 0%,rgba(255,255,255,.24) 38%,rgba(255,255,255,0) 72%);
  }
}

/* =====================================================
   Hero H1 blue technology sweep animation
   Adds a moving Optiact-blue highlight across the main
   headline while keeping the headline mostly black.
   ===================================================== */
.hero h1{
  background:linear-gradient(
    90deg,
    #050505 0%,
    #050505 34%,
    #0057ff 45%,
    #66a6ff 50%,
    #0057ff 55%,
    #050505 66%,
    #050505 100%
  );
  background-size:260% 100%;
  background-position:120% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:heroReveal .75s ease forwards, heroBlueTechSweep 3.6s ease-in-out 1s infinite;
}

@keyframes heroBlueTechSweep{
  0%{background-position:120% 0}
  48%{background-position:-35% 0}
  100%{background-position:-35% 0}
}

@media(prefers-reduced-motion:reduce){
  .hero h1{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    background:none!important;
    -webkit-text-fill-color:#050505;
    color:#050505;
  }
}


/* =====================================================
   Optiact Live Business Dashboard hero upgrade
   Adds industry tabs, KPI cards, before/after value,
   richer mobile status chips, and a more app-like UI.
   ===================================================== */
.optiact-demo{
  max-width:1180px;
}
.demo-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 auto 18px;
}
.demo-tab{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  color:#172033;
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.demo-tab:hover,.demo-tab:focus-visible,.demo-tab.active{
  background:#0f172a;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(15,23,42,.22);
}
.optiact-demo .mm-window{
  height:auto;
  min-height:620px;
  display:grid;
  grid-template-columns:210px minmax(310px,.92fr) minmax(390px,1.18fr);
  background:linear-gradient(135deg,#fbfdff 0%,#eef5ff 100%);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 35px 90px -35px rgba(15,23,42,.45);
}
.optiact-demo .mm-sidebar{
  width:auto;
  background:linear-gradient(180deg,#111827 0%,#172033 100%);
}
.optiact-demo .mm-new{
  background:linear-gradient(135deg,#0057ff,#3b82f6);
  box-shadow:0 12px 26px rgba(0,87,255,.24);
}
.optiact-demo .mm-board{
  width:auto;
  border-right:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.82);
}
.mm-appbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.75);
}
.mm-appbar strong{
  display:block;
  font-size:17px;
  line-height:1.15;
  letter-spacing:-.02em;
}
.mm-eyebrow{
  display:block;
  margin-bottom:2px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--link);
}
.mm-live-dot{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#047857;
  padding:6px 9px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.mm-live-dot::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 6px rgba(34,197,94,.14);
}
.mm-kpis{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:14px 16px 16px;
  border-bottom:1px solid var(--border);
}
.mm-kpi{
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  border-radius:14px;
  padding:12px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.mm-kpi span{
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mm-kpi b{
  display:block;
  margin-top:4px;
  font-size:20px;
  line-height:1;
  letter-spacing:-.03em;
}
.mm-kpi.warning b{color:#d97706}
.mm-kpi.is-updating{animation:kpiTick .42s ease}
@keyframes kpiTick{50%{transform:translateY(-3px);box-shadow:0 16px 30px rgba(0,87,255,.12)}}
.optiact-demo .mm-search{
  background:#fff;
}
.mm-section-title{
  padding:12px 16px 8px;
  color:#475569;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.optiact-demo .mm-row{
  margin:0 10px 8px;
  width:calc(100% - 20px);
  border:1px solid rgba(15,23,42,.06);
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
}
.optiact-demo .mm-row.mm-current{
  background:#fffdf0;
  border-color:rgba(216,0,27,.22);
  box-shadow:inset 3px 0 0 var(--cta),0 12px 28px rgba(216,0,27,.08);
}
.optiact-demo .mm-preview{
  padding:24px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
.mm-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0;
}
.mm-compare>div{
  border-radius:14px;
  padding:14px;
  border:1px solid rgba(15,23,42,.08);
}
.mm-before{
  background:#fff7ed;
}
.mm-after{
  background:#eff6ff;
}
.mm-compare span{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#64748b;
}
.mm-compare b{
  display:block;
  font-size:12px;
  line-height:1.45;
}
.mm-status-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:18px 0;
}
.mm-status-grid div{
  border-radius:12px;
  padding:12px;
  background:#0f172a;
  color:#fff;
}
.mm-status-grid span{
  display:block;
  font-size:10px;
  opacity:.66;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}
.mm-status-grid b{
  display:block;
  margin-top:4px;
  font-size:18px;
  letter-spacing:-.02em;
}
.mm-demo-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 16px;
  border-radius:999px;
  background:var(--cta);
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 16px 34px rgba(216,0,27,.24);
}
.mm-demo-cta:hover{opacity:.92}
.optiact-demo .mm-play{
  left:auto;
  right:22px;
  top:auto;
  bottom:22px;
  transform:none;
  width:46px;
  height:46px;
  font-size:14px;
  background:#111827;
}
.optiact-demo .mm-play:hover{transform:scale(1.06);background:#d8001b}
.optiact-demo .mm-play::before{border-color:rgba(216,0,27,.18)}
.optiact-demo .mm-phone{
  right:-18px;
  bottom:-56px;
  width:210px;
  height:410px;
  background:#0b1220;
  color:#e5e7eb;
  padding:14px;
}
.optiact-demo .mm-phone-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  font-size:10px;
  opacity:1;
}
.optiact-demo .mm-phone-head span{
  opacity:.6;
}
.optiact-demo .mm-phone-head b{
  color:#fff;
  font-size:10px;
  text-align:right;
}
.mm-phone-kpi{
  margin:10px 0 12px;
  border-radius:16px;
  padding:12px;
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:#fff;
  box-shadow:0 14px 30px rgba(37,99,235,.22);
}
.mm-phone-kpi b{
  display:block;
  font-size:22px;
  line-height:1;
}
.mm-phone-kpi span{
  display:block;
  margin-top:5px;
  font-size:9px;
  opacity:.72;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.optiact-demo .mm-phone-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:9px 0;
}
.optiact-demo .mm-phone-row b{
  display:block;
  font-size:11px;
}
.optiact-demo .mm-phone-row span{
  font-size:9px;
  max-width:116px;
}
.optiact-demo .mm-phone-row em{
  flex:0 0 auto;
  font-style:normal;
  font-size:8px;
  font-weight:900;
  border-radius:999px;
  padding:4px 6px;
  color:#111827;
  background:#bfdbfe;
}
.optiact-demo .mm-phone-row.active{
  background:rgba(255,255,255,.08);
  margin-left:-8px;
  margin-right:-8px;
}
.optiact-demo .mm-phone-nav{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid rgba(255,255,255,.1);
  background:#0b1220;
  padding:9px 6px 11px;
}
.optiact-demo .mm-phone-nav span{
  text-align:center;
  font-size:8px;
  color:rgba(255,255,255,.66);
}
@media(max-width:1100px){
  .optiact-demo .mm-window{
    grid-template-columns:190px minmax(285px,.95fr) minmax(340px,1.05fr);
  }
  .mm-kpi b{font-size:18px}
}
@media(max-width:900px){
  .optiact-demo .mm-window{
    grid-template-columns:1fr;
    min-height:0;
  }
  .optiact-demo .mm-board{
    border-right:0;
    border-bottom:1px solid var(--border);
  }
  .optiact-demo .mm-sidebar{display:none}
  .optiact-demo .mm-phone{
    display:block;
    position:relative;
    right:auto;
    bottom:auto;
    width:min(330px,90vw);
    height:390px;
    margin:22px auto 0;
  }
}
@media(max-width:560px){
  .demo-tabs{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding:2px 2px 10px;
    scrollbar-width:none;
  }
  .demo-tabs::-webkit-scrollbar{display:none}
  .demo-tab{white-space:nowrap}
  .mm-kpis,.mm-compare,.mm-status-grid{
    grid-template-columns:1fr 1fr;
  }
  .optiact-demo .mm-preview{padding:18px}
  .mm-status-grid div:nth-child(3){grid-column:1/-1}
  .mm-demo-cta{width:100%;padding-right:54px;padding-left:18px}
  .optiact-demo .mm-play{right:18px;bottom:18px;width:40px;height:40px}
}
@media(max-width:380px){
  .mm-kpis,.mm-compare{grid-template-columns:1fr}
}

/* Mobile header dropdown menu */
.mobile-menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:9px 13px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  color:#111;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.mobile-menu-toggle .menu-symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  font-size:16px;
  line-height:1;
  transition:transform .22s ease;
}
.site-header.nav-open .mobile-menu-toggle .menu-symbol{transform:rotate(180deg)}

@media(max-width:900px){
  .site-header{overflow:visible}
  .nav-container{position:relative;justify-content:space-between}
  .mobile-menu-toggle{display:inline-flex;order:3}
  .nav-links{order:2;margin-left:auto}
  .nav-links a:not(.nav-whatsapp){display:none!important}
  .nav-links .nav-whatsapp{display:inline-flex!important}

  .site-header.nav-open .nav-links{
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 10px);
    z-index:1200;
    display:grid;
    gap:8px;
    padding:12px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:0 24px 60px rgba(0,0,0,.18);
    backdrop-filter:blur(14px);
  }
  .site-header.nav-open .nav-links a{
    display:flex!important;
    width:100%;
    justify-content:space-between;
    align-items:center;
    padding:13px 14px;
    border-radius:12px;
    font-size:15px;
    font-weight:750;
    color:#111;
  }
  .site-header.nav-open .nav-links a:hover,
  .site-header.nav-open .nav-links a:focus-visible{
    background:#f3f7ff;
    color:var(--link);
  }
  .site-header.nav-open .nav-links .nav-whatsapp{
    justify-content:center;
    margin-top:4px;
    background:#111;
    color:#fff!important;
  }
}

@media(max-width:420px){
  .nav-whatsapp{padding:9px 11px;font-size:12px}
  .mobile-menu-toggle .menu-text{display:none}
  .mobile-menu-toggle{padding:9px 11px;min-width:42px}
  .mobile-menu-toggle .menu-symbol{font-size:18px}
}


/* =====================================================
   Elite dark-performance restyle for ONLY:
   <div class="mail-mockup optiact-demo">
   Inspired by the supplied premium BMW M-style MD system:
   black canvas, white type, 1px hairlines, sharp geometry,
   uppercase machined labels, and restrained tri-colour accents.
   ===================================================== */
.mail-mockup.optiact-demo{
  --elite-canvas:#000000;
  --elite-soft:#0d0d0d;
  --elite-card:#1a1a1a;
  --elite-elevated:#262626;
  --elite-hairline:#3c3c3c;
  --elite-ink:#ffffff;
  --elite-body:#bbbbbb;
  --elite-body-strong:#e6e6e6;
  --elite-muted:#7e7e7e;
  --elite-blue-light:#0066b1;
  --elite-blue-dark:#1c69d4;
  --elite-red:#e22718;
  --elite-success:#0fa336;
  --elite-warning:#f4b400;
  max-width:min(1180px,100%);
  color:var(--elite-ink);
  margin-top:72px;
}

.mail-mockup.optiact-demo::before,
.mail-mockup.optiact-demo::after{
  display:none;
}

.mail-mockup.optiact-demo .demo-tabs{
  position:relative;
  justify-content:flex-start;
  gap:0;
  margin:0;
  padding-top:4px;
  background:var(--elite-canvas);
  border:1px solid var(--elite-hairline);
  border-bottom:0;
  overflow:hidden;
}

.mail-mockup.optiact-demo .demo-tabs::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:280px;
  height:4px;
  background:linear-gradient(90deg,var(--elite-blue-light) 0 33.333%,var(--elite-blue-dark) 33.333% 66.666%,var(--elite-red) 66.666% 100%);
}

.mail-mockup.optiact-demo .demo-tab{
  min-height:48px;
  padding:15px 18px;
  border:0;
  border-right:1px solid var(--elite-hairline);
  border-radius:0;
  background:transparent;
  color:var(--elite-body);
  box-shadow:none;
  backdrop-filter:none;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:1.5px;
  text-transform:uppercase;
  transform:none;
}

.mail-mockup.optiact-demo .demo-tab:hover,
.mail-mockup.optiact-demo .demo-tab:focus-visible,
.mail-mockup.optiact-demo .demo-tab.active{
  background:var(--elite-soft);
  color:var(--elite-ink);
  box-shadow:inset 0 -2px 0 var(--elite-ink);
  transform:none;
}

.mail-mockup.optiact-demo .mm-window{
  position:relative;
  min-height:640px;
  border:1px solid var(--elite-hairline);
  border-radius:0;
  background:var(--elite-canvas);
  box-shadow:none;
  overflow:hidden;
}

.mail-mockup.optiact-demo .mm-window::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  z-index:3;
  background:linear-gradient(90deg,var(--elite-blue-light) 0 33.333%,var(--elite-blue-dark) 33.333% 66.666%,var(--elite-red) 66.666% 100%);
}

.mail-mockup.optiact-demo:hover .mm-window{
  transform:none;
  box-shadow:none;
}

.mail-mockup.optiact-demo .mm-sidebar{
  background:var(--elite-canvas);
  color:var(--elite-body);
  border-right:1px solid var(--elite-hairline);
  padding:26px 18px 18px;
}

.mail-mockup.optiact-demo .mm-brand{
  margin-bottom:28px;
  color:var(--elite-ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-logo{
  width:34px;
  height:34px;
  border-radius:0;
  border:1px solid var(--elite-hairline);
  background:#fff;
}

.mail-mockup.optiact-demo .mm-new{
  min-height:48px;
  margin-bottom:24px;
  border:1px solid var(--elite-ink);
  border-radius:0;
  background:transparent;
  color:var(--elite-ink);
  box-shadow:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-new:hover,
.mail-mockup.optiact-demo .mm-new:focus-visible{
  background:var(--elite-ink);
  color:var(--elite-canvas);
}

.mail-mockup.optiact-demo .mm-item{
  width:100%;
  min-height:42px;
  padding:13px 0;
  border-radius:0;
  border-bottom:1px solid var(--elite-hairline);
  color:var(--elite-body);
  background:transparent;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  transform:none;
}

.mail-mockup.optiact-demo .mm-item:hover,
.mail-mockup.optiact-demo .mm-item:focus-visible,
.mail-mockup.optiact-demo .mm-item.active{
  background:transparent;
  color:var(--elite-ink);
  transform:none;
}

.mail-mockup.optiact-demo .mm-item.active{
  box-shadow:inset 4px 0 0 var(--elite-red);
  padding-left:12px;
}

.mail-mockup.optiact-demo .mm-badge{
  min-width:24px;
  padding:3px 6px;
  border:1px solid var(--elite-hairline);
  background:var(--elite-card);
  color:var(--elite-ink);
  font-size:10px;
  text-align:center;
}

.mail-mockup.optiact-demo .mm-board{
  background:var(--elite-soft);
  border-right:1px solid var(--elite-hairline);
}

.mail-mockup.optiact-demo .mm-appbar{
  padding:26px 22px 20px;
  border-bottom:1px solid var(--elite-hairline);
  background:var(--elite-canvas);
}

.mail-mockup.optiact-demo .mm-eyebrow,
.mail-mockup.optiact-demo .mm-section-title,
.mail-mockup.optiact-demo .mm-kpi span,
.mail-mockup.optiact-demo .mm-compare span,
.mail-mockup.optiact-demo .mm-status-grid span,
.mail-mockup.optiact-demo .mm-phone-kpi span{
  color:var(--elite-muted);
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-appbar strong{
  color:var(--elite-ink);
  font-size:22px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-live-dot{
  border:1px solid var(--elite-hairline);
  border-radius:0;
  background:transparent;
  color:var(--elite-ink);
  padding:9px 11px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
}

.mail-mockup.optiact-demo .mm-live-dot::before{
  background:var(--elite-success);
  box-shadow:none;
}

.mail-mockup.optiact-demo .mm-kpis{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  padding:0;
  border-bottom:1px solid var(--elite-hairline);
  background:var(--elite-soft);
}

.mail-mockup.optiact-demo .mm-kpi{
  min-height:112px;
  padding:21px 18px;
  border:0;
  border-right:1px solid var(--elite-hairline);
  border-bottom:1px solid var(--elite-hairline);
  border-radius:0;
  background:var(--elite-card);
  box-shadow:none;
}

.mail-mockup.optiact-demo .mm-kpi:nth-child(2n){
  border-right:0;
}

.mail-mockup.optiact-demo .mm-kpi b{
  margin-top:10px;
  color:var(--elite-ink);
  font-size:30px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}

.mail-mockup.optiact-demo .mm-kpi.warning b{
  color:var(--elite-warning);
}

.mail-mockup.optiact-demo .mm-search{
  padding:17px 22px;
  border-bottom:1px solid var(--elite-hairline);
  background:var(--elite-soft);
  color:var(--elite-muted);
}

.mail-mockup.optiact-demo .mm-search input{
  background:transparent;
  color:var(--elite-ink);
  font-weight:300;
}

.mail-mockup.optiact-demo .mm-search input::placeholder{
  color:var(--elite-muted);
}

.mail-mockup.optiact-demo .mm-section-title{
  padding:18px 22px 13px;
  border-bottom:1px solid var(--elite-hairline);
  background:var(--elite-canvas);
  color:var(--elite-body-strong);
  font-size:11px;
}

.mail-mockup.optiact-demo .mm-row{
  position:relative;
  width:100%;
  margin:0;
  padding:18px 22px;
  border:0;
  border-bottom:1px solid var(--elite-hairline);
  border-radius:0;
  background:var(--elite-soft);
  color:var(--elite-ink);
  box-shadow:none;
  transform:none;
}

.mail-mockup.optiact-demo .mm-row:hover,
.mail-mockup.optiact-demo .mm-row:focus-visible{
  background:var(--elite-card);
  transform:none;
  box-shadow:none;
}

.mail-mockup.optiact-demo .mm-row.mm-current{
  background:var(--elite-card);
  border-color:var(--elite-hairline);
  box-shadow:none;
}

.mail-mockup.optiact-demo .mm-row.mm-current::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--elite-blue-light) 0 33.333%,var(--elite-blue-dark) 33.333% 66.666%,var(--elite-red) 66.666% 100%);
}

.mail-mockup.optiact-demo .mm-top{
  color:var(--elite-ink);
  font-size:12px;
}

.mail-mockup.optiact-demo .mm-top b{
  font-weight:700;
  letter-spacing:.4px;
}

.mail-mockup.optiact-demo .mm-top span,
.mail-mockup.optiact-demo .mm-snip,
.mail-mockup.optiact-demo .mm-pv-meta{
  color:var(--elite-muted);
  font-weight:300;
}

.mail-mockup.optiact-demo .mm-sub{
  margin-top:6px;
  color:var(--elite-body-strong);
  font-size:12px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-snip{
  margin-top:3px;
  font-size:11px;
}

.mail-mockup.optiact-demo .mm-preview{
  padding:30px 28px;
  background:var(--elite-canvas);
  color:var(--elite-body);
}

.mail-mockup.optiact-demo .mm-pv-head{
  gap:18px;
  border-bottom:1px solid var(--elite-hairline);
  padding-bottom:22px;
}

.mail-mockup.optiact-demo .mm-pv-title{
  color:var(--elite-ink);
  font-size:26px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-pv-enc{
  flex:0 0 auto;
  border:1px solid var(--elite-hairline);
  padding:9px 11px;
  color:var(--elite-body);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-compare{
  gap:0;
  margin:24px 0;
  border:1px solid var(--elite-hairline);
}

.mail-mockup.optiact-demo .mm-compare>div{
  border:0;
  border-right:1px solid var(--elite-hairline);
  border-radius:0;
  padding:22px;
  background:var(--elite-soft);
}

.mail-mockup.optiact-demo .mm-compare>div:last-child{
  border-right:0;
}

.mail-mockup.optiact-demo .mm-after{
  background:
    linear-gradient(90deg,var(--elite-blue-light) 0 33.333%,var(--elite-blue-dark) 33.333% 66.666%,var(--elite-red) 66.666% 100%) top left/100% 4px no-repeat,
    var(--elite-soft);
}

.mail-mockup.optiact-demo .mm-compare b{
  color:var(--elite-body-strong);
  font-size:13px;
  font-weight:300;
  line-height:1.55;
}

.mail-mockup.optiact-demo .mm-pv-body{
  color:var(--elite-body);
  font-size:15px;
  font-weight:300;
  line-height:1.65;
}

.mail-mockup.optiact-demo .mm-pv-body p{
  color:var(--elite-body-strong);
}

.mail-mockup.optiact-demo .mm-pv-body ul{
  padding-left:0;
  list-style:none;
}

.mail-mockup.optiact-demo .mm-pv-body li{
  position:relative;
  padding:10px 0 10px 18px;
  border-bottom:1px solid var(--elite-hairline);
}

.mail-mockup.optiact-demo .mm-pv-body li::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  width:6px;
  height:6px;
  background:var(--elite-red);
}

.mail-mockup.optiact-demo .mm-status-grid{
  gap:0;
  margin:24px 0;
  border:1px solid var(--elite-hairline);
}

.mail-mockup.optiact-demo .mm-status-grid div{
  border-radius:0;
  border-right:1px solid var(--elite-hairline);
  padding:20px;
  background:var(--elite-soft);
  color:var(--elite-ink);
}

.mail-mockup.optiact-demo .mm-status-grid div:last-child{
  border-right:0;
}

.mail-mockup.optiact-demo .mm-status-grid b{
  color:var(--elite-ink);
  font-size:28px;
  font-weight:800;
  line-height:1;
}

.mail-mockup.optiact-demo .mm-demo-cta{
  min-height:48px;
  border:1px solid var(--elite-ink);
  border-radius:0;
  background:transparent;
  color:var(--elite-ink);
  box-shadow:none;
  padding:16px 24px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-demo-cta:hover,
.mail-mockup.optiact-demo .mm-demo-cta:focus-visible{
  opacity:1;
  background:var(--elite-ink);
  color:var(--elite-canvas);
}

.mail-mockup.optiact-demo .mm-play{
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border:1px solid var(--elite-hairline);
  border-radius:50%;
  background:var(--elite-card);
  color:var(--elite-ink);
  box-shadow:none;
}

.mail-mockup.optiact-demo .mm-play:hover,
.mail-mockup.optiact-demo .mm-play:focus-visible{
  transform:none;
  background:var(--elite-ink);
  color:var(--elite-canvas);
}

.mail-mockup.optiact-demo .mm-play::before{
  display:none;
}

.mail-mockup.optiact-demo .mm-phone{
  right:-26px;
  bottom:-62px;
  width:218px;
  height:418px;
  padding:16px;
  border:1px solid var(--elite-hairline);
  border-radius:24px;
  background:var(--elite-canvas);
  color:var(--elite-body);
  box-shadow:none;
}

.mail-mockup.optiact-demo .mm-phone-head{
  border-bottom:1px solid var(--elite-hairline);
  padding-bottom:12px;
  color:var(--elite-body);
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-phone-head b{
  color:var(--elite-ink);
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-phone-kpi{
  margin:14px 0 12px;
  border:1px solid var(--elite-hairline);
  border-radius:0;
  background:
    linear-gradient(90deg,var(--elite-blue-light) 0 33.333%,var(--elite-blue-dark) 33.333% 66.666%,var(--elite-red) 66.666% 100%) top left/100% 4px no-repeat,
    var(--elite-soft);
  color:var(--elite-ink);
  box-shadow:none;
  padding:16px 12px 12px;
}

.mail-mockup.optiact-demo .mm-phone-kpi b{
  font-size:25px;
  font-weight:800;
}

.mail-mockup.optiact-demo .mm-phone-row{
  padding:12px 0;
  border-bottom:1px solid var(--elite-hairline);
  color:var(--elite-body);
}

.mail-mockup.optiact-demo .mm-phone-row.active{
  margin-left:0;
  margin-right:0;
  border-left:4px solid var(--elite-red);
  background:var(--elite-card);
  padding-left:10px;
  padding-right:8px;
}

.mail-mockup.optiact-demo .mm-phone-row b{
  color:var(--elite-ink);
  font-size:11px;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-phone-row span{
  color:var(--elite-muted);
  font-weight:300;
}

.mail-mockup.optiact-demo .mm-phone-row em{
  border:1px solid var(--elite-hairline);
  border-radius:0;
  background:transparent;
  color:var(--elite-body-strong);
  font-size:8px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo .mm-phone-nav{
  border-top:1px solid var(--elite-hairline);
  background:var(--elite-canvas);
}

.mail-mockup.optiact-demo .mm-phone-nav span{
  color:var(--elite-muted);
  font-size:8px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
}

@media(max-width:1100px){
  .mail-mockup.optiact-demo .mm-window{
    grid-template-columns:190px minmax(285px,.95fr) minmax(340px,1.05fr);
  }
  .mail-mockup.optiact-demo .mm-kpi b{
    font-size:24px;
  }
}

@media(max-width:900px){
  .mail-mockup.optiact-demo{
    margin-top:52px;
  }
  .mail-mockup.optiact-demo .demo-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }
  .mail-mockup.optiact-demo .demo-tabs::-webkit-scrollbar{
    display:none;
  }
  .mail-mockup.optiact-demo .demo-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .mail-mockup.optiact-demo .mm-window{
    grid-template-columns:1fr;
    min-height:0;
  }
  .mail-mockup.optiact-demo .mm-board{
    border-right:0;
    border-bottom:1px solid var(--elite-hairline);
  }
  .mail-mockup.optiact-demo .mm-phone{
    width:min(330px,90vw);
    height:400px;
    margin:24px auto 0;
  }
}

@media(max-width:560px){
  .mail-mockup.optiact-demo .demo-tabs{
    padding-bottom:0;
  }
  .mail-mockup.optiact-demo .demo-tab{
    min-height:46px;
    padding:14px 15px;
    font-size:11px;
  }
  .mail-mockup.optiact-demo .mm-appbar,
  .mail-mockup.optiact-demo .mm-preview{
    padding-left:18px;
    padding-right:18px;
  }
  .mail-mockup.optiact-demo .mm-kpis,
  .mail-mockup.optiact-demo .mm-compare,
  .mail-mockup.optiact-demo .mm-status-grid{
    grid-template-columns:1fr;
  }
  .mail-mockup.optiact-demo .mm-kpi,
  .mail-mockup.optiact-demo .mm-compare>div,
  .mail-mockup.optiact-demo .mm-status-grid div{
    border-right:0;
  }
  .mail-mockup.optiact-demo .mm-compare>div,
  .mail-mockup.optiact-demo .mm-status-grid div{
    border-bottom:1px solid var(--elite-hairline);
  }
  .mail-mockup.optiact-demo .mm-compare>div:last-child,
  .mail-mockup.optiact-demo .mm-status-grid div:last-child{
    border-bottom:0;
  }
  .mail-mockup.optiact-demo .mm-pv-title{
    font-size:22px;
  }
  .mail-mockup.optiact-demo .mm-demo-cta{
    width:100%;
    padding-right:64px;
  }
  .mail-mockup.optiact-demo .mm-play{
    right:18px;
    bottom:18px;
  }
}

/* =====================================================
   Industry-specific mockup themes
   Food stays on the existing elite dark-performance look.
   Salon uses the warm Starbucks-inspired retail system.
   School uses the sober Cohere-inspired enterprise AI system.
   These rules affect ONLY <div class="mail-mockup optiact-demo">.
   ===================================================== */

/* ---------- Salon / Starbucks-inspired warm retail flagship ---------- */
.mail-mockup.optiact-demo[data-theme="salon"]{
  --sb-green:#006241;
  --sb-accent:#00754A;
  --sb-house:#1E3932;
  --sb-uplift:#2b5148;
  --sb-light:#d4e9e2;
  --sb-gold:#cba258;
  --sb-canvas:#f2f0eb;
  --sb-ceramic:#edebe9;
  --sb-card:#ffffff;
  --sb-ink:rgba(0,0,0,.87);
  --sb-soft:rgba(0,0,0,.58);
  --sb-white:#ffffff;
  --sb-hairline:rgba(0,0,0,.12);
  --sb-shadow:0 0 .5px rgba(0,0,0,.14),0 1px 1px rgba(0,0,0,.24),0 14px 32px rgba(30,57,50,.10);
  --elite-canvas:var(--sb-canvas);
  --elite-soft:var(--sb-ceramic);
  --elite-card:var(--sb-card);
  --elite-elevated:var(--sb-house);
  --elite-hairline:var(--sb-hairline);
  --elite-ink:var(--sb-ink);
  --elite-body:var(--sb-soft);
  --elite-body-strong:var(--sb-ink);
  --elite-muted:var(--sb-soft);
  --elite-blue-light:var(--sb-green);
  --elite-blue-dark:var(--sb-accent);
  --elite-red:var(--sb-gold);
  --elite-success:var(--sb-accent);
  --elite-warning:var(--sb-gold);
  color:var(--sb-ink);
}

.mail-mockup.optiact-demo[data-theme="salon"] .demo-tabs{
  gap:10px;
  padding:12px;
  margin-bottom:18px;
  border:0;
  border-radius:28px;
  background:var(--sb-card);
  box-shadow:var(--sb-shadow);
  overflow:visible;
}

.mail-mockup.optiact-demo[data-theme="salon"] .demo-tabs::before{
  display:none;
}

.mail-mockup.optiact-demo[data-theme="salon"] .demo-tab{
  min-height:42px;
  padding:10px 16px;
  border:1px solid var(--sb-accent);
  border-radius:50px;
  background:transparent;
  color:var(--sb-accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:none;
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}

.mail-mockup.optiact-demo[data-theme="salon"] .demo-tab:hover,
.mail-mockup.optiact-demo[data-theme="salon"] .demo-tab:focus-visible,
.mail-mockup.optiact-demo[data-theme="salon"] .demo-tab.active{
  background:var(--sb-accent);
  color:var(--sb-white);
  box-shadow:0 0 6px rgba(0,0,0,.18),0 8px 12px rgba(0,0,0,.10);
  transform:translateY(-1px) scale(.98);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-window{
  border:0;
  border-radius:22px;
  background:var(--sb-canvas);
  box-shadow:0 0 .5px rgba(0,0,0,.14),0 1px 1px rgba(0,0,0,.24),0 28px 70px rgba(30,57,50,.16);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-window::before{
  height:8px;
  background:var(--sb-green);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-sidebar{
  border-right:0;
  background:var(--sb-house);
  color:rgba(255,255,255,.70);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-brand{
  color:var(--sb-white);
  font-size:13px;
  letter-spacing:-.01em;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-logo{
  border:0;
  border-radius:12px;
  background:var(--sb-white);
  box-shadow:0 0 6px rgba(0,0,0,.18);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-new,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-demo-cta{
  min-height:46px;
  border:1px solid var(--sb-accent);
  border-radius:50px;
  background:var(--sb-accent);
  color:var(--sb-white);
  box-shadow:0 0 6px rgba(0,0,0,.20),0 8px 12px rgba(0,0,0,.12);
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:none;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-new:hover,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-new:focus-visible,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-demo-cta:hover,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-demo-cta:focus-visible{
  background:var(--sb-green);
  color:var(--sb-white);
  transform:scale(.95);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-item{
  margin-bottom:8px;
  min-height:42px;
  padding:10px 12px;
  border:0;
  border-radius:50px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-item:hover,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-item:focus-visible,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-item.active{
  background:rgba(255,255,255,.14);
  color:var(--sb-white);
  box-shadow:none;
  padding-left:12px;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-badge{
  border:0;
  border-radius:50px;
  background:var(--sb-accent);
  color:var(--sb-white);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-board{
  border-right:0;
  background:var(--sb-ceramic);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-appbar,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-section-title{
  border-bottom:0;
  background:var(--sb-canvas);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-appbar strong{
  color:var(--sb-green);
  font-size:24px;
  font-weight:800;
  letter-spacing:-.16px;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-eyebrow,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-section-title,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-kpi span,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-compare span,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-status-grid span,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-kpi span{
  color:var(--sb-soft);
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-live-dot,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-pv-enc{
  border:1px solid var(--sb-accent);
  border-radius:50px;
  background:transparent;
  color:var(--sb-accent);
  font-size:11px;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-kpis{
  gap:12px;
  padding:0 18px 18px;
  border:0;
  background:var(--sb-ceramic);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-kpi{
  min-height:104px;
  border:0;
  border-radius:12px;
  background:var(--sb-card);
  box-shadow:var(--sb-shadow);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-kpi b,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-status-grid b{
  color:var(--sb-green);
  font-size:30px;
  letter-spacing:-.16px;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-kpi.warning b{
  color:var(--sb-gold);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-search{
  margin:0 18px 14px;
  border:1px solid var(--sb-hairline);
  border-radius:50px;
  background:var(--sb-card);
  color:var(--sb-soft);
  box-shadow:var(--sb-shadow);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-row{
  margin:0 18px 10px;
  width:calc(100% - 36px);
  border:0;
  border-radius:12px;
  background:var(--sb-card);
  color:var(--sb-ink);
  box-shadow:var(--sb-shadow);
  overflow:hidden;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-row:hover,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-row:focus-visible,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-row.mm-current{
  background:var(--sb-light);
  box-shadow:0 0 0 1px rgba(0,117,74,.25),0 8px 18px rgba(0,0,0,.10);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-row.mm-current::before{
  width:6px;
  background:var(--sb-accent);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-sub{
  color:var(--sb-green);
  font-size:13px;
  font-weight:800;
  letter-spacing:-.01em;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-preview{
  margin:18px 18px 18px 0;
  border-radius:22px;
  background:var(--sb-card);
  box-shadow:var(--sb-shadow);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-pv-head{
  border-bottom:1px solid var(--sb-hairline);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-pv-title{
  color:var(--sb-green);
  font-size:34px;
  line-height:1.12;
  letter-spacing:-.16px;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-pv-body,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-pv-body p,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-compare b{
  color:var(--sb-soft);
  font-weight:500;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-compare,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-status-grid{
  gap:12px;
  border:0;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-compare>div,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-status-grid div{
  border:0;
  border-radius:12px;
  background:var(--sb-canvas);
  box-shadow:var(--sb-shadow);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-after{
  background:var(--sb-light);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-pv-body li{
  border-bottom:1px solid var(--sb-hairline);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-pv-body li::before{
  border-radius:50%;
  background:var(--sb-accent);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-play{
  border:0;
  border-radius:50%;
  background:var(--sb-accent);
  color:var(--sb-white);
  box-shadow:0 0 6px rgba(0,0,0,.24),0 8px 12px rgba(0,0,0,.14);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-play:hover,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-play:focus-visible{
  background:var(--sb-green);
  color:var(--sb-white);
  transform:scale(.95);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone{
  border:0;
  border-radius:38px;
  background:var(--sb-house);
  color:rgba(255,255,255,.78);
  box-shadow:0 0 6px rgba(0,0,0,.24),0 8px 12px rgba(0,0,0,.14);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-head,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-nav{
  border-color:rgba(255,255,255,.14);
  background:transparent;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-head b,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-row b{
  color:var(--sb-white);
  letter-spacing:-.01em;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-kpi{
  border:0;
  border-radius:18px;
  background:var(--sb-accent);
  box-shadow:0 0 6px rgba(0,0,0,.18);
  color:var(--sb-white);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-kpi b,
.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-kpi span{
  color:var(--sb-white);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-row{
  border-color:rgba(255,255,255,.10);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-row.active{
  border-left:0;
  border-radius:14px;
  background:rgba(255,255,255,.12);
}

.mail-mockup.optiact-demo[data-theme="salon"] .mm-phone-row em{
  border:1px solid rgba(255,255,255,.38);
  border-radius:50px;
  color:var(--sb-white);
  text-transform:none;
}

/* ---------- School / Cohere-inspired enterprise AI command center ---------- */
.mail-mockup.optiact-demo[data-theme="school"]{
  --co-black:#000000;
  --co-near:#17171c;
  --co-green:#003c33;
  --co-navy:#071829;
  --co-blue:#1863dc;
  --co-coral:#ff7759;
  --co-soft-coral:#ffad9b;
  --co-stone:#eeece7;
  --co-pale-green:#edfce9;
  --co-white:#ffffff;
  --co-ink:#212121;
  --co-muted:#93939f;
  --co-slate:#75758a;
  --co-hairline:#d9d9dd;
  --elite-canvas:var(--co-white);
  --elite-soft:#f7f7f5;
  --elite-card:var(--co-white);
  --elite-elevated:var(--co-near);
  --elite-hairline:var(--co-hairline);
  --elite-ink:var(--co-ink);
  --elite-body:#4d4d55;
  --elite-body-strong:var(--co-ink);
  --elite-muted:var(--co-muted);
  --elite-blue-light:var(--co-blue);
  --elite-blue-dark:var(--co-green);
  --elite-red:var(--co-coral);
  --elite-success:#0fa336;
  --elite-warning:var(--co-coral);
  color:var(--co-ink);
}

.mail-mockup.optiact-demo[data-theme="school"] .demo-tabs{
  gap:10px;
  margin-bottom:22px;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}

.mail-mockup.optiact-demo[data-theme="school"] .demo-tabs::before{
  display:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .demo-tab{
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--co-hairline);
  border-radius:30px;
  background:var(--co-white);
  color:var(--co-ink);
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .demo-tab:hover,
.mail-mockup.optiact-demo[data-theme="school"] .demo-tab:focus-visible,
.mail-mockup.optiact-demo[data-theme="school"] .demo-tab.active{
  background:var(--co-near);
  color:var(--co-white);
  box-shadow:none;
  transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-window{
  border:1px solid var(--co-hairline);
  border-radius:22px;
  background:var(--co-white);
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-window::before{
  height:0;
  background:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-sidebar{
  border-right:1px solid rgba(255,255,255,.10);
  background:var(--co-green);
  color:rgba(255,255,255,.72);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-brand{
  color:var(--co-white);
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-logo{
  border:0;
  border-radius:8px;
  background:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-new{
  min-height:44px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:32px;
  background:var(--co-white);
  color:var(--co-green);
  box-shadow:none;
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-new:hover,
.mail-mockup.optiact-demo[data-theme="school"] .mm-new:focus-visible{
  background:transparent;
  color:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-item{
  min-height:42px;
  padding:11px 10px;
  border:0;
  border-radius:10px;
  color:rgba(255,255,255,.70);
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-item:hover,
.mail-mockup.optiact-demo[data-theme="school"] .mm-item:focus-visible,
.mail-mockup.optiact-demo[data-theme="school"] .mm-item.active{
  background:rgba(255,255,255,.10);
  color:var(--co-white);
  box-shadow:inset 3px 0 0 var(--co-coral);
  padding-left:14px;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-badge{
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-board{
  border-right:1px solid var(--co-hairline);
  background:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-appbar{
  padding:28px 24px 18px;
  border-bottom:1px solid var(--co-hairline);
  background:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-appbar strong{
  color:var(--co-ink);
  font-size:32px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.64px;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-eyebrow,
.mail-mockup.optiact-demo[data-theme="school"] .mm-section-title,
.mail-mockup.optiact-demo[data-theme="school"] .mm-kpi span,
.mail-mockup.optiact-demo[data-theme="school"] .mm-compare span,
.mail-mockup.optiact-demo[data-theme="school"] .mm-status-grid span,
.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-kpi span{
  color:var(--co-muted);
  font-size:12px;
  font-weight:500;
  letter-spacing:.28px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-live-dot{
  border:1px solid var(--co-soft-coral);
  border-radius:999px;
  background:#fff7f4;
  color:var(--co-ink);
  padding:8px 12px;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-live-dot::before{
  background:var(--co-coral);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-kpis{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:18px;
  border-bottom:1px solid var(--co-hairline);
  background:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-kpi{
  min-height:104px;
  border:1px solid #f2f2f2;
  border-radius:16px;
  background:var(--co-stone);
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-kpi b{
  color:var(--co-ink);
  font-size:30px;
  font-weight:500;
  letter-spacing:-.6px;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-kpi.warning b{
  color:var(--co-coral);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-search{
  margin:0 18px 18px;
  padding:14px 16px;
  border:1px solid var(--co-hairline);
  border-radius:8px;
  background:var(--co-white);
  color:var(--co-muted);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-section-title{
  padding:14px 18px;
  border-top:1px solid var(--co-hairline);
  border-bottom:1px solid var(--co-hairline);
  background:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-row{
  padding:18px;
  border-bottom:1px solid var(--co-hairline);
  background:var(--co-white);
  color:var(--co-ink);
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-row:hover,
.mail-mockup.optiact-demo[data-theme="school"] .mm-row:focus-visible,
.mail-mockup.optiact-demo[data-theme="school"] .mm-row.mm-current{
  background:#fff7f4;
  box-shadow:inset 4px 0 0 var(--co-coral);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-row.mm-current::before{
  display:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-sub{
  color:var(--co-ink);
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-snip,
.mail-mockup.optiact-demo[data-theme="school"] .mm-top span,
.mail-mockup.optiact-demo[data-theme="school"] .mm-pv-meta{
  color:var(--co-muted);
  font-weight:400;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-preview{
  margin:18px 18px 18px 0;
  border-radius:22px;
  background:var(--co-green);
  color:rgba(255,255,255,.78);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-pv-head{
  border-bottom:1px solid rgba(255,255,255,.15);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-pv-title{
  color:var(--co-white);
  font-size:36px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.72px;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-pv-enc{
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-compare,
.mail-mockup.optiact-demo[data-theme="school"] .mm-status-grid{
  gap:12px;
  border:0;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-compare>div,
.mail-mockup.optiact-demo[data-theme="school"] .mm-status-grid div{
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.78);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-after{
  background:rgba(255,119,89,.12);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-compare span,
.mail-mockup.optiact-demo[data-theme="school"] .mm-status-grid span{
  color:rgba(255,255,255,.58);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-compare b,
.mail-mockup.optiact-demo[data-theme="school"] .mm-status-grid b,
.mail-mockup.optiact-demo[data-theme="school"] .mm-pv-body,
.mail-mockup.optiact-demo[data-theme="school"] .mm-pv-body p{
  color:rgba(255,255,255,.86);
  font-weight:400;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-pv-body li{
  border-bottom:1px solid rgba(255,255,255,.14);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-pv-body li::before{
  border-radius:999px;
  background:var(--co-coral);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-demo-cta{
  min-height:48px;
  border:1px solid var(--co-white);
  border-radius:32px;
  background:var(--co-white);
  color:var(--co-green);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-demo-cta:hover,
.mail-mockup.optiact-demo[data-theme="school"] .mm-demo-cta:focus-visible{
  background:transparent;
  color:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-play{
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(0,0,0,.18);
  color:var(--co-white);
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-play:hover,
.mail-mockup.optiact-demo[data-theme="school"] .mm-play:focus-visible{
  background:var(--co-white);
  color:var(--co-green);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-phone{
  border:1px solid var(--co-hairline);
  border-radius:30px;
  background:var(--co-near);
  color:rgba(255,255,255,.78);
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-head,
.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-nav{
  border-color:rgba(255,255,255,.12);
  background:transparent;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-head b,
.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-row b{
  color:var(--co-white);
  font-size:11px;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-kpi{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:var(--co-green);
  color:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-kpi b,
.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-kpi span{
  color:var(--co-white);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-row{
  border-color:rgba(255,255,255,.08);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-row.active{
  border-left:0;
  border-radius:12px;
  background:rgba(255,119,89,.14);
}

.mail-mockup.optiact-demo[data-theme="school"] .mm-phone-row em{
  border:1px solid rgba(255,173,155,.50);
  border-radius:999px;
  background:rgba(255,119,89,.12);
  color:var(--co-soft-coral);
  text-transform:none;
}

@media(max-width:900px){
  .mail-mockup.optiact-demo[data-theme="salon"] .mm-preview,
  .mail-mockup.optiact-demo[data-theme="school"] .mm-preview{
    margin:0;
    border-radius:0 0 22px 22px;
  }
  .mail-mockup.optiact-demo[data-theme="salon"] .mm-row,
  .mail-mockup.optiact-demo[data-theme="school"] .mm-row{
    width:auto;
  }
  .mail-mockup.optiact-demo[data-theme="school"] .mm-board{
    border-bottom:1px solid var(--co-hairline);
  }
}

@media(max-width:560px){
  .mail-mockup.optiact-demo[data-theme="salon"] .demo-tabs,
  .mail-mockup.optiact-demo[data-theme="school"] .demo-tabs{
    border-radius:18px;
    overflow-x:auto;
  }
  .mail-mockup.optiact-demo[data-theme="salon"] .mm-pv-title,
  .mail-mockup.optiact-demo[data-theme="school"] .mm-pv-title{
    font-size:26px;
  }
}

/* =====================================================
   Additional industry-specific mockup themes
   Medical Practice uses the Miro-inspired visual workspace system:
   white canvas, black pill CTAs, canary-yellow brand accents,
   pastel whiteboard cards, large rounded corners.
   Delivery uses the MongoDB-inspired data-platform system:
   deep teal bands, bright green CTA pills, terminal/code mockup feel,
   12px cards and clean technical spacing.
   These rules affect ONLY <div class="mail-mockup optiact-demo">.
   ===================================================== */

/* ---------- Medical Practice / Miro-inspired visual workspace ---------- */
.mail-mockup.optiact-demo[data-theme="medical"]{
  --miro-yellow:#ffd02f;
  --miro-yellow-deep:#e7b900;
  --miro-yellow-light:#fff5be;
  --miro-blue:#4262ff;
  --miro-coral:#ff9d7a;
  --miro-coral-light:#ffe1d7;
  --miro-teal:#8fd8cb;
  --miro-teal-light:#dcf6f1;
  --miro-rose:#f7bfd2;
  --miro-rose-light:#ffe0eb;
  --miro-mint:#d7f7c2;
  --miro-canvas:#ffffff;
  --miro-surface:#f7f7f5;
  --miro-soft:#f4f4f0;
  --miro-ink:#050038;
  --miro-charcoal:#2d2a54;
  --miro-slate:#6f6c90;
  --miro-hairline:#e7e6ee;
  --miro-shadow:rgba(5,0,56,.08) 0 12px 32px -4px;
  --elite-canvas:var(--miro-canvas);
  --elite-soft:var(--miro-surface);
  --elite-card:var(--miro-canvas);
  --elite-elevated:var(--miro-ink);
  --elite-hairline:var(--miro-hairline);
  --elite-ink:var(--miro-ink);
  --elite-body:var(--miro-charcoal);
  --elite-body-strong:var(--miro-ink);
  --elite-muted:var(--miro-slate);
  --elite-blue-light:var(--miro-yellow);
  --elite-blue-dark:var(--miro-teal);
  --elite-red:var(--miro-coral);
  --elite-success:#0fa336;
  --elite-warning:var(--miro-coral);
  color:var(--miro-ink);
  font-family:Inter,"Roobert PRO",-apple-system,BlinkMacSystemFont,sans-serif;
}

.mail-mockup.optiact-demo[data-theme="medical"] .demo-tabs{
  gap:10px;
  margin-bottom:22px;
  padding:12px;
  border:1px solid var(--miro-hairline);
  border-radius:999px;
  background:var(--miro-canvas);
  box-shadow:rgba(5,0,56,.06) 0 4px 12px;
  overflow:visible;
}

.mail-mockup.optiact-demo[data-theme="medical"] .demo-tabs::before{
  display:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .demo-tab{
  min-height:44px;
  padding:12px 18px;
  border:1px solid var(--miro-hairline);
  border-radius:999px;
  background:var(--miro-canvas);
  color:var(--miro-ink);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .demo-tab:hover,
.mail-mockup.optiact-demo[data-theme="medical"] .demo-tab:focus-visible,
.mail-mockup.optiact-demo[data-theme="medical"] .demo-tab.active{
  background:var(--miro-ink);
  color:#fff;
  border-color:var(--miro-ink);
  transform:none;
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-window{
  border:1px solid var(--miro-hairline);
  border-radius:28px;
  background:var(--miro-canvas);
  box-shadow:var(--miro-shadow);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-window::before{
  height:12px;
  background:var(--miro-yellow);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-sidebar{
  border-right:1px solid var(--miro-hairline);
  background:var(--miro-ink);
  color:rgba(255,255,255,.72);
  padding-top:30px;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-brand{
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-logo{
  border:0;
  border-radius:10px;
  background:var(--miro-yellow);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-new,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-demo-cta{
  min-height:46px;
  border:0;
  border-radius:999px;
  background:var(--miro-ink);
  color:#fff;
  box-shadow:none;
  padding:12px 24px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-new{
  background:var(--miro-yellow);
  color:var(--miro-ink);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-new:hover,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-new:focus-visible,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-demo-cta:hover,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-demo-cta:focus-visible{
  background:var(--miro-charcoal);
  color:#fff;
  transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-item{
  min-height:42px;
  margin-bottom:8px;
  padding:10px 12px;
  border:0;
  border-radius:999px;
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-item:hover,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-item:focus-visible,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-item.active{
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:inset 4px 0 0 var(--miro-yellow);
  padding-left:14px;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-badge{
  border:0;
  border-radius:999px;
  background:var(--miro-yellow);
  color:var(--miro-ink);
  font-weight:700;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-board{
  border-right:1px solid var(--miro-hairline);
  background:var(--miro-surface);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-appbar{
  border-bottom:1px solid var(--miro-hairline);
  background:var(--miro-canvas);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-appbar strong{
  color:var(--miro-ink);
  font-size:32px;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-1px;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-eyebrow,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-section-title,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-kpi span,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-compare span,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-status-grid span,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-kpi span{
  color:var(--miro-slate);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-live-dot,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-pv-enc{
  border:1px solid var(--miro-hairline);
  border-radius:999px;
  background:var(--miro-yellow-light);
  color:var(--miro-ink);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-live-dot::before{
  background:var(--miro-yellow-deep);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-kpis{
  gap:14px;
  padding:18px;
  border-bottom:1px solid var(--miro-hairline);
  background:var(--miro-surface);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-kpi{
  min-height:106px;
  border:0;
  border-radius:28px;
  background:var(--miro-canvas);
  box-shadow:rgba(5,0,56,.04) 0 1px 2px;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-kpi:nth-child(1){background:var(--miro-yellow-light)}
.mail-mockup.optiact-demo[data-theme="medical"] .mm-kpi:nth-child(2){background:var(--miro-teal-light)}
.mail-mockup.optiact-demo[data-theme="medical"] .mm-kpi:nth-child(3){background:var(--miro-rose-light)}
.mail-mockup.optiact-demo[data-theme="medical"] .mm-kpi:nth-child(4){background:var(--miro-coral-light)}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-kpi b,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-status-grid b{
  color:var(--miro-ink);
  font-size:30px;
  font-weight:600;
  letter-spacing:-1px;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-kpi.warning b{
  color:var(--miro-ink);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-search{
  margin:0 18px 16px;
  border:1px solid var(--miro-hairline);
  border-radius:8px;
  background:#fff;
  color:var(--miro-slate);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-section-title{
  padding:16px 18px 12px;
  border:0;
  background:var(--miro-surface);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-row{
  width:calc(100% - 36px);
  margin:0 18px 12px;
  padding:18px;
  border:1px solid var(--miro-hairline);
  border-radius:20px;
  background:#fff;
  color:var(--miro-ink);
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-row:hover,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-row:focus-visible,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-row.mm-current{
  background:var(--miro-yellow-light);
  box-shadow:inset 6px 0 0 var(--miro-yellow);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-row.mm-current::before{
  display:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-sub{
  color:var(--miro-ink);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-snip,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-top span,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-pv-meta{
  color:var(--miro-slate);
  font-weight:400;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-preview{
  margin:18px 18px 18px 0;
  border:1px solid var(--miro-hairline);
  border-radius:28px;
  background:#fff;
  color:var(--miro-charcoal);
  box-shadow:var(--miro-shadow);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-pv-head{
  border-bottom:1px solid var(--miro-hairline);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-pv-title{
  color:var(--miro-ink);
  font-size:38px;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-1.5px;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-compare,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-status-grid{
  gap:14px;
  border:0;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-compare>div,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-status-grid div{
  border:1px solid var(--miro-hairline);
  border-radius:20px;
  background:var(--miro-surface);
  color:var(--miro-charcoal);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-after{
  background:var(--miro-teal-light);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-compare b,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-pv-body,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-pv-body p{
  color:var(--miro-charcoal);
  font-weight:400;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-pv-body li{
  border-bottom:1px solid var(--miro-hairline);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-pv-body li::before{
  border-radius:999px;
  background:var(--miro-yellow);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-play{
  border:0;
  border-radius:50%;
  background:var(--miro-yellow);
  color:var(--miro-ink);
  box-shadow:rgba(5,0,56,.12) 0 16px 48px -8px;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-play:hover,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-play:focus-visible{
  background:var(--miro-ink);
  color:#fff;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone{
  border:1px solid var(--miro-hairline);
  border-radius:34px;
  background:var(--miro-ink);
  color:rgba(255,255,255,.78);
  box-shadow:var(--miro-shadow);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-head,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-nav{
  border-color:rgba(255,255,255,.12);
  background:transparent;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-head b,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-row b{
  color:#fff;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-kpi{
  border:0;
  border-radius:20px;
  background:var(--miro-yellow);
  color:var(--miro-ink);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-kpi b,
.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-kpi span{
  color:var(--miro-ink);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-row{
  border-color:rgba(255,255,255,.08);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-row.active{
  border-left:0;
  border-radius:14px;
  background:rgba(255,208,47,.14);
}

.mail-mockup.optiact-demo[data-theme="medical"] .mm-phone-row em{
  border:1px solid rgba(255,208,47,.50);
  border-radius:999px;
  background:rgba(255,208,47,.14);
  color:var(--miro-yellow);
  text-transform:none;
}

/* ---------- Delivery / MongoDB-inspired data platform ---------- */
.mail-mockup.optiact-demo[data-theme="delivery"]{
  --mdb-green:#00ed64;
  --mdb-green-dark:#00684a;
  --mdb-green-soft:#e3fcf7;
  --mdb-teal-deep:#001e2b;
  --mdb-teal-mid:#023430;
  --mdb-canvas-dark:#0b1f2a;
  --mdb-canvas:#ffffff;
  --mdb-surface:#f9fbfa;
  --mdb-surface-soft:#f2f7f6;
  --mdb-feature:#e3fcf7;
  --mdb-ink:#001e2b;
  --mdb-charcoal:#21313c;
  --mdb-slate:#5d6c74;
  --mdb-steel:#889397;
  --mdb-hairline:#d5dde0;
  --mdb-hairline-dark:rgba(255,255,255,.16);
  --mdb-shadow:rgba(0,30,43,.12) 0 12px 24px -4px;
  --elite-canvas:var(--mdb-teal-deep);
  --elite-soft:var(--mdb-canvas-dark);
  --elite-card:var(--mdb-teal-mid);
  --elite-elevated:var(--mdb-green);
  --elite-hairline:var(--mdb-hairline-dark);
  --elite-ink:#ffffff;
  --elite-body:rgba(255,255,255,.78);
  --elite-body-strong:#ffffff;
  --elite-muted:rgba(255,255,255,.58);
  --elite-blue-light:var(--mdb-green);
  --elite-blue-dark:var(--mdb-green-dark);
  --elite-red:var(--mdb-green);
  --elite-success:var(--mdb-green);
  --elite-warning:var(--mdb-green);
  color:#fff;
  font-family:Inter,"Euclid Circular A",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .demo-tabs{
  gap:10px;
  margin-bottom:18px;
  padding:10px;
  border:1px solid var(--mdb-hairline);
  border-radius:18px;
  background:var(--mdb-canvas);
  box-shadow:rgba(0,30,43,.04) 0 1px 2px;
  overflow:visible;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .demo-tabs::before{
  display:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .demo-tab{
  min-height:42px;
  padding:10px 18px;
  border:1px solid var(--mdb-hairline);
  border-radius:999px;
  background:#fff;
  color:var(--mdb-ink);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .demo-tab:hover,
.mail-mockup.optiact-demo[data-theme="delivery"] .demo-tab:focus-visible,
.mail-mockup.optiact-demo[data-theme="delivery"] .demo-tab.active{
  background:var(--mdb-ink);
  color:#fff;
  border-color:var(--mdb-ink);
  box-shadow:none;
  transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-window{
  border:1px solid var(--mdb-hairline-dark);
  border-radius:16px;
  background:var(--mdb-teal-deep);
  box-shadow:var(--mdb-shadow);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-window::before{
  height:5px;
  background:var(--mdb-green);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-sidebar{
  border-right:1px solid var(--mdb-hairline-dark);
  background:var(--mdb-teal-deep);
  color:rgba(255,255,255,.70);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-brand{
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-logo{
  border:0;
  border-radius:8px;
  background:#fff;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-new,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-demo-cta{
  min-height:44px;
  border:0;
  border-radius:999px;
  background:var(--mdb-green);
  color:var(--mdb-ink);
  box-shadow:none;
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-new:hover,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-new:focus-visible,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-demo-cta:hover,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-demo-cta:focus-visible{
  background:#fff;
  color:var(--mdb-ink);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-item{
  min-height:42px;
  padding:11px 10px;
  border:0;
  border-radius:8px;
  color:rgba(255,255,255,.70);
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-item:hover,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-item:focus-visible,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-item.active{
  background:rgba(0,237,100,.10);
  color:#fff;
  box-shadow:inset 3px 0 0 var(--mdb-green);
  padding-left:14px;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-badge{
  border:1px solid var(--mdb-hairline-dark);
  border-radius:999px;
  background:rgba(0,237,100,.10);
  color:var(--mdb-green);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-board{
  border-right:1px solid var(--mdb-hairline-dark);
  background:var(--mdb-canvas-dark);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-appbar{
  border-bottom:1px solid var(--mdb-hairline-dark);
  background:var(--mdb-teal-deep);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-appbar strong{
  color:#fff;
  font-size:30px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.5px;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-eyebrow,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-section-title,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-kpi span,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-compare span,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-status-grid span,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-kpi span{
  color:rgba(255,255,255,.58);
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-live-dot,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-pv-enc{
  border:1px solid var(--mdb-hairline-dark);
  border-radius:999px;
  background:rgba(0,237,100,.08);
  color:var(--mdb-green);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-live-dot::before{
  background:var(--mdb-green);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-kpis{
  gap:12px;
  padding:18px;
  border-bottom:1px solid var(--mdb-hairline-dark);
  background:var(--mdb-canvas-dark);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-kpi{
  min-height:104px;
  border:1px solid var(--mdb-hairline-dark);
  border-radius:12px;
  background:var(--mdb-teal-mid);
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-kpi b,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-status-grid b{
  color:#fff;
  font-size:30px;
  font-weight:600;
  letter-spacing:-.5px;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-kpi.warning b{
  color:var(--mdb-green);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-search{
  margin:0 18px 16px;
  border:1px solid var(--mdb-hairline-dark);
  border-radius:8px;
  background:var(--mdb-teal-deep);
  color:rgba(255,255,255,.58);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-search input{
  color:#fff;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-section-title{
  border-top:1px solid var(--mdb-hairline-dark);
  border-bottom:1px solid var(--mdb-hairline-dark);
  background:var(--mdb-teal-deep);
  color:rgba(255,255,255,.70);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-row{
  padding:18px;
  border-bottom:1px solid var(--mdb-hairline-dark);
  background:var(--mdb-canvas-dark);
  color:#fff;
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-row:hover,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-row:focus-visible,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-row.mm-current{
  background:rgba(0,237,100,.08);
  box-shadow:inset 4px 0 0 var(--mdb-green);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-row.mm-current::before{
  display:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-sub{
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-snip,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-top span,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-pv-meta{
  color:rgba(255,255,255,.58);
  font-weight:400;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-preview{
  margin:18px 18px 18px 0;
  border:1px solid var(--mdb-hairline-dark);
  border-radius:16px;
  background:var(--mdb-canvas-dark);
  color:rgba(255,255,255,.78);
  box-shadow:rgba(0,30,43,.12) 0 12px 24px -4px;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-pv-head{
  border-bottom:1px solid var(--mdb-hairline-dark);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-pv-title{
  color:#fff;
  font-size:34px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.5px;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-compare,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-status-grid{
  gap:12px;
  border:0;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-compare>div,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-status-grid div{
  border:1px solid var(--mdb-hairline-dark);
  border-radius:12px;
  background:var(--mdb-teal-deep);
  color:rgba(255,255,255,.78);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-after{
  background:rgba(0,237,100,.10);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-compare b,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-pv-body,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-pv-body p{
  color:rgba(255,255,255,.86);
  font-weight:400;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-pv-body li{
  border-bottom:1px solid var(--mdb-hairline-dark);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-pv-body li::before{
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--mdb-green);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-play{
  border:1px solid var(--mdb-hairline-dark);
  border-radius:50%;
  background:var(--mdb-green);
  color:var(--mdb-ink);
  box-shadow:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-play:hover,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-play:focus-visible{
  background:#fff;
  color:var(--mdb-ink);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone{
  border:1px solid var(--mdb-hairline-dark);
  border-radius:24px;
  background:var(--mdb-teal-deep);
  color:rgba(255,255,255,.78);
  box-shadow:var(--mdb-shadow);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-head,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-nav{
  border-color:var(--mdb-hairline-dark);
  background:transparent;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-head b,
.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-row b{
  color:#fff;
  letter-spacing:0;
  text-transform:none;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-kpi{
  border:1px solid var(--mdb-hairline-dark);
  border-radius:12px;
  background:var(--mdb-teal-mid);
  color:#fff;
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-kpi b{
  color:var(--mdb-green);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-kpi span{
  color:rgba(255,255,255,.70);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-row{
  border-color:var(--mdb-hairline-dark);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-row.active{
  border-left:0;
  border-radius:10px;
  background:rgba(0,237,100,.10);
}

.mail-mockup.optiact-demo[data-theme="delivery"] .mm-phone-row em{
  border:1px solid rgba(0,237,100,.45);
  border-radius:999px;
  background:rgba(0,237,100,.10);
  color:var(--mdb-green);
  text-transform:none;
}

@media(max-width:900px){
  .mail-mockup.optiact-demo[data-theme="medical"] .mm-preview,
  .mail-mockup.optiact-demo[data-theme="delivery"] .mm-preview{
    margin:0;
    border-radius:0 0 20px 20px;
  }
  .mail-mockup.optiact-demo[data-theme="medical"] .mm-row,
  .mail-mockup.optiact-demo[data-theme="delivery"] .mm-row{
    width:auto;
  }
}

@media(max-width:560px){
  .mail-mockup.optiact-demo[data-theme="medical"] .demo-tabs,
  .mail-mockup.optiact-demo[data-theme="delivery"] .demo-tabs{
    border-radius:18px;
    overflow-x:auto;
  }
  .mail-mockup.optiact-demo[data-theme="medical"] .mm-pv-title,
  .mail-mockup.optiact-demo[data-theme="delivery"] .mm-pv-title{
    font-size:26px;
  }
}

/* =====================================================
   Mobile dashboard polish
   Scope: ONLY the Optiact live dashboard mockup.
   Purpose: on phone-sized screens, replace the wide desktop
   dashboard composition with a proper mobile-app dashboard view,
   while preserving each industry's existing visual theme.
   ===================================================== */
@media(max-width:760px){
  .mail-mockup.optiact-demo{
    width:min(100%,440px);
    max-width:440px;
    margin:42px auto 0;
    padding:0;
  }

  .mail-mockup.optiact-demo::before,
  .mail-mockup.optiact-demo::after{
    display:none!important;
  }

  .mail-mockup.optiact-demo .demo-tabs{
    width:100%;
    max-width:100%;
    display:flex;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:8px;
    padding:10px;
    margin:0 auto 16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  .mail-mockup.optiact-demo .demo-tabs::-webkit-scrollbar{
    display:none;
  }

  .mail-mockup.optiact-demo .demo-tab{
    flex:0 0 auto;
    min-height:42px;
    padding:10px 14px;
    font-size:11px;
    line-height:1;
    white-space:nowrap;
    scroll-snap-align:start;
  }

  /* Hide the desktop/tablet dashboard only on phone screens. */
  .mail-mockup.optiact-demo .mm-window{
    display:none!important;
  }

  /* Promote the existing mobile dashboard preview into the main phone UI. */
  .mail-mockup.optiact-demo .mm-phone{
    display:block!important;
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:min(392px,92vw)!important;
    height:612px!important;
    margin:0 auto!important;
    padding:18px!important;
    overflow:hidden!important;
    animation:none!important;
  }

  .mail-mockup.optiact-demo .mm-phone-head{
    min-height:54px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:0 0 14px;
    margin:0 0 14px;
  }

  .mail-mockup.optiact-demo .mm-phone-head span{
    display:block;
    font-size:10px!important;
    line-height:1.2;
    opacity:.72;
  }

  .mail-mockup.optiact-demo .mm-phone-head b{
    display:block;
    max-width:180px;
    font-size:18px!important;
    line-height:1.05!important;
    text-align:right;
    white-space:normal;
  }

  .mail-mockup.optiact-demo .mm-phone-kpi{
    min-height:106px;
    margin:0 0 16px;
    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
  }

  .mail-mockup.optiact-demo .mm-phone-kpi b{
    font-size:clamp(34px,10vw,46px)!important;
    line-height:.95!important;
    letter-spacing:-1.2px;
  }

  .mail-mockup.optiact-demo .mm-phone-kpi span{
    font-size:11px!important;
    line-height:1.2;
  }

  .mail-mockup.optiact-demo .mm-phone-row{
    min-height:72px;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 10px!important;
    margin:0 0 6px;
  }

  .mail-mockup.optiact-demo .mm-phone-row>div{
    min-width:0;
    flex:1 1 auto;
  }

  .mail-mockup.optiact-demo .mm-phone-row b{
    display:block;
    font-size:14px!important;
    line-height:1.15!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mail-mockup.optiact-demo .mm-phone-row span{
    display:block;
    max-width:220px;
    margin-top:3px;
    font-size:11px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  .mail-mockup.optiact-demo .mm-phone-row em{
    flex:0 0 auto;
    max-width:88px;
    padding:5px 8px;
    font-size:9px!important;
    line-height:1;
    text-align:center;
    white-space:nowrap;
  }

  .mail-mockup.optiact-demo .mm-phone-nav{
    min-height:58px;
    height:58px;
    padding:10px 6px max(10px,env(safe-area-inset-bottom));
    align-items:center;
  }

  .mail-mockup.optiact-demo .mm-phone-nav span{
    font-size:9px!important;
    line-height:1;
  }
}

@media(max-width:390px){
  .mail-mockup.optiact-demo{
    width:100%;
    max-width:100%;
  }

  .mail-mockup.optiact-demo .demo-tabs{
    width:calc(100vw - 32px);
  }

  .mail-mockup.optiact-demo .demo-tab{
    min-height:40px;
    padding:10px 12px;
    font-size:10px;
  }

  .mail-mockup.optiact-demo .mm-phone{
    width:min(360px,92vw)!important;
    height:586px!important;
    padding:15px!important;
  }

  .mail-mockup.optiact-demo .mm-phone-head b{
    max-width:150px;
    font-size:16px!important;
  }

  .mail-mockup.optiact-demo .mm-phone-kpi{
    min-height:96px;
    padding:16px;
  }

  .mail-mockup.optiact-demo .mm-phone-row{
    min-height:66px;
    padding:10px 8px!important;
  }

  .mail-mockup.optiact-demo .mm-phone-row b{
    font-size:13px!important;
  }

  .mail-mockup.optiact-demo .mm-phone-row span{
    font-size:10px!important;
    max-width:180px;
  }
}

/* Website positioning image carousel */
.website-position-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.website-position-card .t-card-copy{
  margin-bottom:0;
}
.website-showcase{
  position:relative;
  margin-top:24px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%);
  box-shadow:0 18px 50px -28px rgba(0,0,0,.28);
}
.website-showcase-viewport{
  overflow:hidden;
  border-radius:22px;
}
.website-showcase-track{
  display:flex;
  will-change:transform;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.website-showcase-slide{
  flex:0 0 100%;
  margin:0;
  aspect-ratio:16/10;
  background:#eef2f7;
}
.website-showcase-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.website-showcase-slide.is-active img{
  animation:websiteImageReveal .45s ease both;
}
@keyframes websiteImageReveal{
  from{opacity:.65;transform:scale(1.018)}
  to{opacity:1;transform:scale(1)}
}
.website-showcase-dots{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:4;
  display:flex;
  gap:7px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  backdrop-filter:blur(8px);
}
.website-showcase-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#c7ced8;
  transition:width .2s ease,background .2s ease,transform .2s ease;
}
.website-showcase-dot.active{
  width:22px;
  background:var(--link);
}
.website-showcase-dot:hover,
.website-showcase-dot:focus-visible{
  transform:scale(1.15);
}
.website-position-card .t-arrows{
  top:auto;
  right:16px;
  bottom:16px;
  z-index:5;
}
.website-position-card .t-arrows button{
  width:40px;
  height:40px;
  border-color:rgba(0,0,0,.10);
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  backdrop-filter:blur(8px);
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.website-position-card .t-arrows button:hover,
.website-position-card .t-arrows button:focus-visible{
  transform:translateY(-2px);
  background:#fff;
  border-color:rgba(0,87,217,.32);
}
@media(max-width:760px){
  .website-showcase{margin-top:20px;border-radius:18px}
  .website-showcase-viewport{border-radius:18px}
  .website-showcase-slide{aspect-ratio:4/3}
  .website-showcase-dots{left:14px;bottom:14px}
  .website-position-card .t-arrows{position:static;margin-top:14px;justify-content:flex-start}
}



/* =====================================================
   Website Build Package side-scroll section
   Replaces the reliable cloud section with a practical,
   future-ready website package carousel.
   ===================================================== */
.website-includes{
  position:relative;
  overflow:hidden;
  padding:112px 0;
  background:
    radial-gradient(circle at 12% 18%,rgba(0,87,217,.12),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%);
}
.website-includes::before{
  content:"";
  position:absolute;
  inset:auto -8% 8% auto;
  width:360px;
  height:360px;
  border-radius:50%;
  background:rgba(216,0,27,.06);
  filter:blur(4px);
  animation:includeBlob 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes includeBlob{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-22px,-18px,0) scale(1.08)}
}
.website-includes .container{
  position:relative;
  z-index:1;
}
.website-includes-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
  margin-bottom:26px;
}
.website-includes .eyebrow{
  display:inline-flex;
  margin-bottom:14px;
  color:var(--link);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.website-includes h2{
  max-width:780px;
  margin:0;
  font-size:clamp(38px,4.8vw,60px);
  line-height:1.06;
  letter-spacing:-.035em;
}
.website-includes-head p{
  max-width:790px;
  margin:18px 0 0;
  color:#444;
  font-size:18px;
  line-height:1.65;
}
.includes-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.includes-controls button{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  font-size:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.includes-controls button:hover,
.includes-controls button:focus-visible{
  transform:translateY(-2px);
  background:#111;
  color:#fff;
}
.includes-scroll-hint{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.includes-scroll-hint::after{
  content:"→";
  display:inline-block;
  animation:hintSlide 1.4s ease-in-out infinite;
}
@keyframes hintSlide{
  0%,100%{transform:translateX(0);opacity:.55}
  50%{transform:translateX(8px);opacity:1}
}
.includes-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:10px 0 22px;
  cursor:grab;
}
.includes-viewport.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}
.includes-viewport::-webkit-scrollbar{
  height:10px;
}
.includes-viewport::-webkit-scrollbar-track{
  background:rgba(0,0,0,.06);
  border-radius:999px;
}
.includes-viewport::-webkit-scrollbar-thumb{
  background:rgba(0,87,217,.42);
  border-radius:999px;
}
.includes-grid{
  display:flex;
  gap:18px;
  width:max-content;
}
.include-card{
  position:relative;
  width:min(390px,82vw);
  min-height:520px;
  scroll-snap-align:start;
  padding:28px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:28px;
  background:rgba(255,255,255,.86);
  box-shadow:0 22px 60px -34px rgba(0,0,0,.32);
  backdrop-filter:blur(10px);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.include-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(0,87,217,.10),rgba(216,0,27,.05),rgba(255,255,255,0));
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.include-card:hover,
.include-card.is-active{
  transform:translateY(-8px);
  border-color:rgba(0,87,217,.28);
  box-shadow:0 30px 80px -34px rgba(0,87,217,.42);
}
.include-card:hover::before,
.include-card.is-active::before{
  opacity:1;
}
.include-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  margin-bottom:22px;
  background:#111;
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.include-card h3{
  position:relative;
  margin:0;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.02em;
}
.include-card p{
  position:relative;
  margin:14px 0 18px;
  color:#444;
  font-size:15px;
  line-height:1.65;
}
.include-card ul{
  position:relative;
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.include-card li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#333;
  font-size:14px;
  line-height:1.45;
}
.include-card li::before{
  content:"✓";
  flex:0 0 20px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:var(--hero);
  color:var(--link);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  margin-top:1px;
}
.includes-progress{
  height:6px;
  margin:2px 0 30px;
  border-radius:999px;
  background:rgba(0,0,0,.07);
  overflow:hidden;
}
.includes-progress span{
  display:block;
  width:16.666%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--link),var(--cta));
  transition:transform .35s ease,width .35s ease;
}
.upgrade-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px 32px;
  align-items:center;
  margin-top:34px;
  padding:36px;
  border-radius:30px;
  color:#fff;
  background:
    radial-gradient(circle at 80% 15%,rgba(182,210,255,.28),transparent 34%),
    linear-gradient(135deg,#081224 0%,#10203d 48%,#0057d9 100%);
  box-shadow:0 30px 90px -42px rgba(0,0,0,.55);
}
.upgrade-card::before{
  content:"";
  position:absolute;
  inset:-40% auto auto -10%;
  width:280px;
  height:280px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  animation:upgradeGlow 6s ease-in-out infinite;
}
@keyframes upgradeGlow{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(16px) scale(1.12)}
}
.upgrade-card span,
.upgrade-card h3,
.upgrade-card p,
.upgrade-card a{
  position:relative;
  z-index:1;
}
.upgrade-card span{
  grid-column:1/-1;
  justify-self:start;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff6c9;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.upgrade-card h3{
  max-width:670px;
  margin:0;
  font-size:clamp(28px,3vw,42px);
  line-height:1.08;
  letter-spacing:-.03em;
}
.upgrade-card p{
  grid-column:1/2;
  max-width:830px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.7;
}
.upgrade-card a{
  grid-column:2/3;
  grid-row:2/4;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:230px;
  min-height:54px;
  padding:15px 22px;
  border-radius:999px;
  background:#fff;
  color:#081224;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:transform .2s ease,background .2s ease;
}
.upgrade-card a:hover,
.upgrade-card a:focus-visible{
  transform:translateY(-2px);
  background:#fff6c9;
}

@media(max-width:900px){
  .website-includes{padding:78px 0}
  .website-includes-head{align-items:flex-start;flex-direction:column}
  .includes-controls{align-self:flex-end}
  .include-card{min-height:500px}
  .upgrade-card{
    grid-template-columns:1fr;
    padding:28px;
  }
  .upgrade-card p,
  .upgrade-card a{
    grid-column:1;
    grid-row:auto;
  }
  .upgrade-card a{
    justify-self:start;
    min-width:0;
    width:100%;
    text-align:center;
  }
}
@media(max-width:560px){
  .website-includes{padding:64px 0}
  .website-includes h2{font-size:34px}
  .website-includes-head p{font-size:16px}
  .includes-controls button{width:40px;height:40px}
  .include-card{
    width:82vw;
    min-height:520px;
    padding:22px;
    border-radius:22px;
  }
  .include-card h3{font-size:22px}
  .include-card li{font-size:13px}
  .upgrade-card{
    margin-top:24px;
    padding:24px;
    border-radius:24px;
  }
}

@media(prefers-reduced-motion:reduce){
  .website-includes::before,
  .includes-scroll-hint::after,
  .upgrade-card::before{animation:none!important}
}


/* =====================================================
   Optiact pricing cards section
   Inserted after the custom email / workflow section.
   Classes are prefixed with opt- to avoid changing other
   existing cards, icons, badges, and package sections.
   ===================================================== */
.opt-pricing-section{
  --opt-navy:#07172f;
  --opt-navy-2:#0d2548;
  --opt-blue:#1f7cff;
  --opt-cyan:#28d7ff;
  --opt-green:#15c784;
  --opt-text:#102033;
  --opt-muted:#667085;
  --opt-line:rgba(15,33,62,.12);
  --opt-card:rgba(255,255,255,.92);
  --opt-shadow:0 24px 80px rgba(5,18,41,.18);
  --opt-radius:28px;
  position:relative;
  overflow:hidden;
  padding:96px 20px;
  background:
    radial-gradient(circle at top left,rgba(40,215,255,.22),transparent 35%),
    radial-gradient(circle at bottom right,rgba(31,124,255,.18),transparent 38%),
    linear-gradient(135deg,#f7fbff 0%,#eef5ff 52%,#fff 100%);
  color:var(--opt-text);
}
.opt-pricing-section::before,
.opt-pricing-section::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(3px);
  opacity:.72;
  pointer-events:none;
}
.opt-pricing-section::before{
  width:340px;
  height:340px;
  right:-130px;
  top:80px;
  background:rgba(31,124,255,.12);
}
.opt-pricing-section::after{
  width:240px;
  height:240px;
  left:-90px;
  bottom:80px;
  background:rgba(21,199,132,.12);
}
.opt-pricing-container{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
}
.opt-pricing-header{
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
}
.opt-pricing-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid rgba(31,124,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:var(--opt-blue);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.opt-pricing-header h2{
  margin:18px 0 12px;
  font-size:clamp(32px,5vw,58px);
  line-height:.98;
  letter-spacing:-.055em;
  color:var(--opt-navy);
}
.opt-pricing-header p{
  margin:0;
  font-size:18px;
  line-height:1.65;
  color:var(--opt-muted);
}
.opt-billing-toggle{
  width:fit-content;
  margin:0 auto 34px;
  padding:6px;
  display:flex;
  gap:6px;
  border:1px solid var(--opt-line);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 14px 44px rgba(15,33,62,.08);
}
.opt-billing-toggle button{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:11px 18px;
  background:transparent;
  color:var(--opt-muted);
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.opt-billing-toggle button:hover,
.opt-billing-toggle button:focus-visible{
  transform:translateY(-1px);
}
.opt-billing-toggle button.is-active{
  background:var(--opt-navy);
  color:#fff;
  box-shadow:0 10px 26px rgba(7,23,47,.22);
}
.opt-pricing-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.opt-price-card{
  position:relative;
  overflow:hidden;
  min-height:620px;
  padding:30px;
  border:1px solid rgba(15,33,62,.1);
  border-radius:var(--opt-radius);
  background:var(--opt-card);
  box-shadow:var(--opt-shadow);
  backdrop-filter:blur(18px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.opt-price-card:hover{
  transform:translateY(-6px);
  box-shadow:0 32px 90px rgba(5,18,41,.24);
  border-color:rgba(31,124,255,.28);
}
.opt-price-card.opt-featured{
  color:#fff;
  border-color:rgba(40,215,255,.34);
  background:
    radial-gradient(circle at 20% 0%,rgba(40,215,255,.32),transparent 28%),
    radial-gradient(circle at 100% 10%,rgba(31,124,255,.38),transparent 34%),
    linear-gradient(145deg,var(--opt-navy) 0%,var(--opt-navy-2) 100%);
}
.opt-price-card.opt-featured::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.14) 45%,transparent 70%);
  transform:translateX(-120%);
  animation:optPricingShine 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes optPricingShine{
  0%,55%{transform:translateX(-120%)}
  75%,100%{transform:translateX(120%)}
}
.opt-card-top{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:28px;
}
.opt-price-card-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(31,124,255,.14),rgba(40,215,255,.14));
  font-size:28px;
}
.opt-featured .opt-price-card-icon{
  background:rgba(255,255,255,.12);
}
.opt-price-badge{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(21,199,132,.12);
  color:var(--opt-green);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
}
.opt-featured .opt-price-badge{
  background:rgba(40,215,255,.16);
  color:#93ecff;
}
.opt-price-card h3{
  position:relative;
  z-index:1;
  margin:0 0 8px;
  font-size:32px;
  letter-spacing:-.04em;
}
.opt-card-subtitle{
  position:relative;
  z-index:1;
  margin:0 0 26px;
  color:var(--opt-muted);
  line-height:1.55;
}
.opt-featured .opt-card-subtitle,
.opt-featured .opt-small-note,
.opt-featured .opt-feature-list li{
  color:rgba(255,255,255,.78);
}
.opt-price-line{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-bottom:8px;
}
.opt-currency{
  margin-bottom:10px;
  color:var(--opt-blue);
  font-size:22px;
  font-weight:950;
}
.opt-featured .opt-currency{
  color:var(--opt-cyan);
}
.opt-price{
  font-size:clamp(48px,8vw,76px);
  font-weight:950;
  line-height:.9;
  letter-spacing:-.08em;
}
.opt-period{
  margin-bottom:10px;
  color:var(--opt-muted);
  font-weight:900;
}
.opt-featured .opt-period{
  color:rgba(255,255,255,.72);
}
.opt-small-note{
  position:relative;
  z-index:1;
  min-height:24px;
  margin:0 0 24px;
  color:var(--opt-muted);
  font-size:14px;
}
.opt-feature-list{
  position:relative;
  z-index:1;
  list-style:none;
  margin:0 0 30px;
  padding:24px 0 0;
  border-top:1px solid var(--opt-line);
  display:grid;
  gap:14px;
}
.opt-featured .opt-feature-list{
  border-top-color:rgba(255,255,255,.14);
}
.opt-feature-list li{
  display:flex;
  gap:11px;
  align-items:flex-start;
  color:#344054;
  line-height:1.45;
  font-size:15px;
}
.opt-feature-list li::before{
  content:"✓";
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(21,199,132,.12);
  color:var(--opt-green);
  font-size:13px;
  font-weight:950;
}
.opt-featured .opt-feature-list li::before{
  background:rgba(40,215,255,.16);
  color:#93ecff;
}
.opt-card-action{
  position:relative;
  z-index:1;
  width:100%;
  border:0;
  border-radius:18px;
  padding:16px 18px;
  background:var(--opt-navy);
  color:#fff;
  font-size:15px;
  font-weight:950;
  cursor:pointer;
  transition:transform .2s ease,opacity .2s ease;
}
.opt-card-action:hover,
.opt-card-action:focus-visible{
  transform:translateY(-2px);
}
.opt-featured .opt-card-action{
  background:linear-gradient(135deg,var(--opt-blue),var(--opt-cyan));
  color:#02152d;
}
.opt-foundation-card{
  margin-top:24px;
  padding:22px;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(31,124,255,.18);
  border-radius:24px;
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 55px rgba(15,33,62,.08);
}
.opt-foundation-card strong{
  display:block;
  margin-bottom:4px;
  color:var(--opt-navy);
  font-size:18px;
}
.opt-foundation-card p{
  margin:0;
  color:var(--opt-muted);
  line-height:1.5;
}
.opt-foundation-pill{
  flex:0 0 auto;
  padding:12px 16px;
  border-radius:999px;
  background:#eaf3ff;
  color:var(--opt-blue);
  font-weight:950;
  white-space:nowrap;
}
.opt-selection-output{
  margin:18px auto 0;
  min-height:24px;
  text-align:center;
  color:var(--opt-muted);
  font-weight:800;
}
@media(max-width:820px){
  .opt-pricing-section{
    padding:72px 16px;
  }
  .opt-pricing-header h2{
    font-size:clamp(32px,11vw,46px);
  }
  .opt-pricing-header p{
    font-size:16px;
  }
  .opt-pricing-cards{
    display:flex;
    overflow-x:auto;
    gap:16px;
    scroll-snap-type:x mandatory;
    padding:6px 4px 18px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .opt-pricing-cards::-webkit-scrollbar{
    display:none;
  }
  .opt-price-card{
    min-width:86%;
    min-height:auto;
    scroll-snap-align:center;
    padding:24px;
  }
  .opt-foundation-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .opt-billing-toggle{
    width:100%;
    justify-content:center;
  }
  .opt-billing-toggle button{
    flex:1;
  }
}
@media(max-width:420px){
  .opt-price-card{
    min-width:91%;
  }
  .opt-card-top{
    flex-direction:column;
  }
  .opt-foundation-pill{
    white-space:normal;
  }
}

/* =====================================================
   Optiact Dark Digital Solutions CTA
   Replaces the old Contact + Final CTA with a capability
   showcase for websites and web apps.
   ===================================================== */
.solutions-cta{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 18%,rgba(0,87,255,.32),transparent 34%),
    radial-gradient(circle at 8% 100%,rgba(216,0,27,.18),transparent 30%),
    linear-gradient(135deg,#071329 0%,#061124 48%,#020714 100%);
  color:#fff;
  padding:78px 0 72px;
}
.solutions-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:120px 120px;
  opacity:.18;
}
.solutions-cta::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,#0057ff 0 34%,#2f7dff 34% 68%,#d8001b 68% 100%);
}
.solutions-cta-shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(260px,.95fr) minmax(520px,1.55fr) minmax(250px,.8fr);
  grid-template-areas:
    "copy capabilities contact"
    "copy steps contact";
  gap:34px;
  align-items:start;
}
.solutions-cta-copy{grid-area:copy}
.solutions-cta-kicker,
.solutions-capabilities-kicker{
  display:inline-flex;
  margin-bottom:18px;
  color:#c7d2fe;
  font-size:12px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.solutions-cta-copy h2{
  max-width:430px;
  margin:0;
  font-size:clamp(36px,4vw,56px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:900;
}
.solutions-cta-copy p{
  max-width:360px;
  margin:20px 0 0;
  color:rgba(255,255,255,.78);
  font-size:17px;
  line-height:1.55;
}
.solutions-cta-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:44px;
}
.solutions-red-btn,
.solutions-outline-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:15px 24px;
  border-radius:4px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .2s ease,opacity .2s ease,background .2s ease,border-color .2s ease;
}
.solutions-red-btn{
  background:var(--cta);
  color:#fff;
  box-shadow:0 18px 36px rgba(216,0,27,.22);
}
.solutions-outline-btn{
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  background:rgba(255,255,255,.03);
}
.solutions-red-btn:hover,
.solutions-outline-btn:hover{
  transform:translateY(-2px);
  opacity:.92;
}
.solutions-capabilities{
  grid-area:capabilities;
  min-width:0;
}
.solutions-feature-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  border-top:1px solid rgba(255,255,255,.13);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.solutions-feature-card{
  position:relative;
  min-height:172px;
  padding:28px 16px 24px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.13);
  transition:background .25s ease,transform .25s ease;
}
.solutions-feature-card:first-child{border-left:1px solid rgba(255,255,255,.13)}
.solutions-feature-card:hover{
  background:rgba(255,255,255,.06);
  transform:translateY(-4px);
}
.solutions-feature-icon{
  width:34px;
  height:34px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2f7dff;
}
.solutions-feature-icon svg,
.solutions-contact-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.solutions-feature-card h3{
  min-height:42px;
  margin:0;
  color:#fff;
  font-size:13px;
  line-height:1.15;
  letter-spacing:-.01em;
  font-weight:900;
}
.solutions-feature-card p{
  margin:10px auto 0;
  max-width:120px;
  color:rgba(255,255,255,.68);
  font-size:11px;
  line-height:1.45;
}
.solutions-contact-card{
  grid-area:contact;
  padding:26px;
  border-radius:8px;
  background:linear-gradient(180deg,#0b63ff 0%,#0052df 100%);
  box-shadow:0 24px 70px rgba(0,87,255,.28);
}
.solutions-contact-card h3{
  margin:0 0 20px;
  font-size:20px;
  line-height:1.1;
  letter-spacing:-.02em;
}
.solutions-contact-item{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:66px;
  padding:13px 14px;
  margin-bottom:12px;
  border-radius:7px;
  background:#fff;
  color:#071329;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  transition:transform .2s ease,box-shadow .2s ease;
}
.solutions-contact-item:hover{
  transform:translateX(3px);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.solutions-contact-icon{
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2f7dff;
}
.solutions-contact-item small{
  display:block;
  color:#64748b;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.solutions-contact-item b{
  display:block;
  margin-top:5px;
  color:#061124;
  font-size:14px;
  line-height:1.15;
  word-break:break-word;
}
.solutions-secure-note{
  display:flex;
  align-items:center;
  gap:9px;
  margin:22px 0 0;
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:800;
}
.solutions-steps{
  grid-area:steps;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.13);
}
.solutions-steps article{
  position:relative;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.solutions-steps article:not(:last-child)::after{
  content:"→";
  position:absolute;
  top:14px;
  right:-18px;
  color:rgba(255,255,255,.38);
  font-weight:900;
}
.solutions-steps span{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#0b2a5f;
  font-size:13px;
  font-weight:900;
}
.solutions-steps h4{
  margin:0;
  color:#fff;
  font-size:14px;
  line-height:1.2;
}
.solutions-steps p{
  margin:5px 0 0;
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.45;
}

@media(max-width:1180px){
  .solutions-cta-shell{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "copy contact"
      "capabilities capabilities"
      "steps steps";
  }
  .solutions-cta-copy h2{max-width:620px}
  .solutions-cta-copy p{max-width:520px}
  .solutions-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .solutions-feature-card:nth-child(3n){border-right:1px solid rgba(255,255,255,.13)}
  .solutions-feature-card:nth-child(n+4){border-top:1px solid rgba(255,255,255,.13)}
}

@media(max-width:760px){
  .solutions-cta{padding:64px 0}
  .solutions-cta-shell{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "capabilities"
      "steps"
      "contact";
    gap:28px;
  }
  .solutions-cta-copy h2{
    font-size:clamp(34px,10vw,46px);
  }
  .solutions-cta-buttons a{
    width:100%;
    max-width:360px;
  }
  .solutions-feature-grid{
    grid-template-columns:1fr 1fr;
  }
  .solutions-feature-card{
    min-height:158px;
    border-top:1px solid rgba(255,255,255,.13);
  }
  .solutions-feature-card:nth-child(odd){border-left:1px solid rgba(255,255,255,.13)}
  .solutions-feature-card:nth-child(even){border-right:1px solid rgba(255,255,255,.13)}
  .solutions-steps{
    grid-template-columns:1fr;
    gap:16px;
  }
  .solutions-steps article:not(:last-child)::after{display:none}
  .solutions-contact-card{padding:22px}
}

@media(max-width:420px){
  .solutions-feature-grid{grid-template-columns:1fr}
  .solutions-feature-card{
    min-height:auto;
    border-left:1px solid rgba(255,255,255,.13);
    border-right:1px solid rgba(255,255,255,.13);
  }
  .solutions-feature-card p{max-width:220px}
}