.one-nl-wrap {
display:flex;flex-direction:column;gap:.75rem;max-width:480px;
}
.one-nl-title {
font-size:1.25rem;font-weight:700;color:#191919;margin:0;
}
.one-nl-sub {
font-size:.9rem;color:#555;margin:0;
}
.one-nl-row {
display:flex;gap:.5rem;flex-wrap:wrap;
}
.one-nl-email {
flex:1 1 220px;padding:.7rem 1rem;border:1.5px solid #ddd;border-radius:6px;
font-size:.9rem;outline:none;transition:border-color .2s;
}
.one-nl-email:focus { border-color:#e53935; }
.one-nl-btn {
padding:.7rem 1.4rem;background:#e53935;color:#fff;border:none;border-radius:6px;
font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s;
}
.one-nl-btn:hover { background:#c62828; }
.one-nl-msg {
font-size:.85rem;min-height:1.2em;transition:all .3s;
}
.one-nl-msg.ok    { color:#2e7d32; }
.one-nl-msg.error { color:#c62828; } .one-nl-popup {
position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
}
.one-nl-backdrop {
position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);cursor:pointer;
}
.one-nl-box {
position:relative;z-index:1;background:#fff;border-radius:16px;padding:2rem;max-width:440px;
width:calc(100% - 2rem);box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center;
max-height:calc(100vh - 2rem);overflow-y:auto;
}
.one-nl-close {
position:absolute;top:.75rem;right:.75rem;background:none;border:none;cursor:pointer;
color:#999;padding:.25rem;border-radius:4px;display:flex;align-items:center;justify-content:center;
}
.one-nl-close:hover { color:#333; }
.one-nl-popup-icon { font-size:2.5rem;line-height:1;margin-bottom:.75rem; }
.one-nl-popup-title { margin:0 0 .4rem;font-size:1.4rem;font-weight:700;color:#191919; }
.one-nl-popup-sub   { margin:0 0 1.25rem;color:#555;font-size:.9rem; }
.one-nl-popup-form .one-nl-row { justify-content:center; }
.one-nl-popup-hint  { margin:.75rem 0 0;font-size:.75rem;color:#aaa; } .one-push-popup {
position:fixed;bottom:1.25rem;right:1.25rem;z-index:99998;
background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);
padding:.9rem 1rem;display:flex;align-items:center;gap:.75rem;
max-width:360px;border:1.5px solid #f0f0f0;
animation:one-push-slide .3s ease;
}
@keyframes one-push-slide {
from { opacity:0; transform:translateY(16px); }
to   { opacity:1; transform:translateY(0); }
}
.one-push-icon { font-size:1.5rem;flex-shrink:0; }
.one-push-content {
flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0;
}
.one-push-content strong { font-size:.875rem;color:#191919;font-weight:700; }
.one-push-content span   { font-size:.775rem;color:#666; }
.one-push-actions {
display:flex;flex-direction:column;gap:.35rem;flex-shrink:0;
}
.one-push-btn-yes {
padding:.4rem .8rem;background:#e53935;color:#fff;border:none;border-radius:6px;
font-size:.775rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s;
}
.one-push-btn-yes:hover { background:#c62828; }
.one-push-btn-no {
padding:.4rem .8rem;background:transparent;color:#999;border:1px solid #ddd;
border-radius:6px;font-size:.775rem;cursor:pointer;transition:all .2s;
}
.one-push-btn-no:hover { border-color:#bbb;color:#555; }
@media (max-width:480px) {
.one-push-popup { left:.75rem;right:.75rem;max-width:none; }
}:root {
--smo-bg: #0a0a0a;
--smo-bg-alt: #0d0d0d;
--smo-accent: #00adff;
--smo-accent-15: rgba(0,173,255,0.15);
--smo-accent-25: rgba(0,173,255,0.25);
--smo-text: rgba(255,255,255,0.85);
--smo-text-muted: rgba(255,255,255,0.55);
--smo-white: #fff;
--smo-radius: 12px;
--smo-container: 1200px;
}  @media (min-width: 768px) {
body.smo-cases-active #header {
position: absolute;
width: 100%;
z-index: 100;
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
body.smo-cases-active #header .container_wrap_logo,
body.smo-cases-active #header .container_wrap_meta {
background: transparent !important;
}
body.smo-cases-active #header .header_bg {
background: transparent !important;
}
body.smo-cases-active #main {
padding-top: 0 !important;
}
} @media (max-width: 767px) {
body.smo-cases-active,
body.smo-cases-active #wrap_all,
body.smo-cases-active #main {
background: #0a0a0a !important;
padding-top: 0 !important;
}
body.smo-cases-active #header {
position: absolute !important;
width: 100%;
z-index: 100;
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
body.smo-cases-active #header .container_wrap_logo,
body.smo-cases-active #header .container_wrap_meta,
body.smo-cases-active #header .header_bg,
body.smo-cases-active #header_main_alternate,
body.smo-cases-active #header .header-scrollblock {
background: transparent !important;
}
} body.smo-cases-active #header .logo svg,
body.smo-cases-active #header .logo svg path,
body.smo-cases-active #header .logo svg polygon,
body.smo-cases-active #header .logo svg rect,
body.smo-cases-active #header .logo svg circle {
fill: #fff !important;
}
body.smo-cases-active #header .logo svg stop {
stop-color: #fff !important;
} body.smo-cases-active #header .one-social-icon,
body.smo-cases-active #header #header_meta img[src*="icon-verified"] {
filter: brightness(0) invert(1) !important;
} body.smo-cases-active #header,
body.smo-cases-active #header a,
body.smo-cases-active #header .av-main-nav > li > a,
body.smo-cases-active #header .av-main-nav > li > a .avia-menu-text,
body.smo-cases-active #header #header_meta a,
body.smo-cases-active #header .sub_menu a,
body.smo-cases-active #header .phone-info,
body.smo-cases-active #header .phone-info a,
body.smo-cases-active #header .avia_wpml_language_switch a,
body.smo-cases-active #header .avia_wpml_language_switch .lang-switch__divider {
color: #fff !important;
} body.smo-cases-active #header #menu-item-search a,
body.smo-cases-active #header #menu-item-search a::before,
body.smo-cases-active #header .menu-item-search-dropdown a {
color: #fff !important;
} @media (min-width: 768px) {
body.smo-cases-active #header.av_header_sticky_disabled {
position: absolute !important;
}
body.smo-cases-active #header.header_scrolled {
position: absolute !important;
background: transparent !important;
}
} body.smo-cases-active #header .av-hamburger-inner,
body.smo-cases-active #header .av-hamburger-inner::before,
body.smo-cases-active #header .av-hamburger-inner::after {
background: #fff !important;
}
body.smo-cases-active #header .av-hamburger strong {
color: #fff !important;
} body.smo-cases-active #header .av-menu-button a {
border-color: rgba(255,255,255,0.3) !important;
} body.smo-cases-active #header .sub-menu,
body.smo-cases-active #header .sub_menu,
body.smo-cases-active #header ul.sub-menu,
body.smo-cases-active #header ul.sub_menu,
body.smo-cases-active #header .av-main-nav ul,
body.smo-cases-active #header .av-main-nav .sub-menu,
body.smo-cases-active #header .avia_mega_div,
body.smo-cases-active #header .av-main-nav .avia_mega_div {
background: #0a0a0a !important;
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
outline: 0 !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.7) !important;
}
body.smo-cases-active #header .sub-menu *,
body.smo-cases-active #header .sub_menu *,
body.smo-cases-active #header .avia_mega_div * {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
outline: 0 !important;
}
body.smo-cases-active #header .sub-menu li,
body.smo-cases-active #header .sub_menu li,
body.smo-cases-active #header .av-main-nav .sub-menu li,
body.smo-cases-active #header .avia_mega_div li {
background: transparent !important;
}
body.smo-cases-active #header .sub-menu li a,
body.smo-cases-active #header .sub_menu li a,
body.smo-cases-active #header .av-main-nav .sub-menu a,
body.smo-cases-active #header .av-main-nav ul ul a,
body.smo-cases-active #header .avia_mega_div a,
body.smo-cases-active #header .avia_mega_div .sub-menu a {
color: rgba(255,255,255,0.8) !important;
background: transparent !important;
}
body.smo-cases-active #header .sub-menu li a:hover,
body.smo-cases-active #header .sub_menu li a:hover,
body.smo-cases-active #header .av-main-nav .sub-menu a:hover,
body.smo-cases-active #header .av-main-nav ul ul a:hover,
body.smo-cases-active #header .avia_mega_div a:hover,
body.smo-cases-active #header .avia_mega_div .sub-menu a:hover {
color: #fff !important;
background: rgba(255,255,255,0.05) !important;
}
body.smo-cases-active #header .sub-menu li.current-menu-item > a,
body.smo-cases-active #header .av-main-nav .sub-menu .current-menu-item > a {
color: var(--smo-accent) !important;
}
body.smo-cases-active #header .mega_menu_title,
body.smo-cases-active #header .avia_mega_div .mega_menu_title {
color: var(--smo-accent) !important;
}
body.smo-cases-active #header .avia_mega_div .sub-menu,
body.smo-cases-active #header .avia_mega_div ul {
background: transparent !important;
box-shadow: none !important;
} body.smo-cases-active #header .ie-marquee a,
body.smo-cases-active #header marquee a {
color: #fff !important;
} body.smo-cases-active .av-burger-overlay,
body.smo-cases-active .av-burger-overlay-bg,
body.smo-cases-active #av-burger-menu-ul {
background: #0a0a0a !important;
}
body.smo-cases-active .av-burger-overlay a,
body.smo-cases-active .av-burger-overlay .avia-menu-text,
body.smo-cases-active #av-burger-menu-ul a,
body.smo-cases-active #av-burger-menu-ul .avia-menu-text {
color: rgba(255,255,255,0.85) !important;
}
body.smo-cases-active .av-burger-overlay a:hover,
body.smo-cases-active #av-burger-menu-ul a:hover {
color: #fff !important;
}
body.smo-cases-active .av-burger-overlay .mega_menu_title,
body.smo-cases-active #av-burger-menu-ul .mega_menu_title {
color: var(--smo-accent) !important;
}
body.smo-cases-active .av-burger-overlay .sub-menu,
body.smo-cases-active #av-burger-menu-ul .sub-menu,
body.smo-cases-active .av-burger-overlay li,
body.smo-cases-active #av-burger-menu-ul li {
background: transparent !important;
border: 0 !important;
}
body.smo-cases-active .av-burger-overlay-close,
body.smo-cases-active .av-burger-overlay-close::before,
body.smo-cases-active .av-burger-overlay-close::after {
color: #fff !important;
border-color: #fff !important;
} body.smo-cases-active #mobile-advanced {
background: #0a0a0a !important;
}
body.smo-cases-active #mobile-advanced a,
body.smo-cases-active #mobile-advanced .avia-menu-text {
color: rgba(255,255,255,0.85) !important;
}
body.smo-cases-active #mobile-advanced .mega_menu_title {
color: var(--smo-accent) !important;
}
body.smo-cases-active #mobile-advanced li {
border-color: rgba(255,255,255,0.08) !important;
}   #smo-cases-wrap {
background: var(--smo-bg);
color: var(--smo-text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
position: relative;
z-index: 1;
}
#smo-cases-wrap *,
#smo-cases-wrap *::before,
#smo-cases-wrap *::after {
box-sizing: border-box;
}
#smo-cases-wrap a { color: var(--smo-accent); text-decoration: none; }
#smo-cases-wrap a:hover { color: var(--smo-white); }
#smo-cases-wrap h1, #smo-cases-wrap h2, #smo-cases-wrap h3, #smo-cases-wrap h4 {
color: var(--smo-white);
font-weight: 700;
line-height: 1.2;
margin: 0;
} .smo-cases-container {
max-width: var(--smo-container);
margin: 0 auto;
padding: 0 2rem;
}
.smo-case-narrow { max-width: 800px; } .smo-cases-eyebrow {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--smo-text-muted);
margin-bottom: 0.5rem;
}
.smo-cases-eyebrow--gold { color: var(--smo-accent); }  .smo-cases-hero {
position: relative !important;
padding: 12rem 0 4rem;
text-align: center;
background: var(--smo-bg);
min-height: 55vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.smo-cases-hero__videos {
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important; height: 100% !important;
max-width: 100% !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 0 !important;
z-index: 0;
overflow: hidden !important;
}
.smo-cases-hero__bg {
width: 100% !important; height: 100% !important;
min-height: 0;
object-fit: cover !important;
display: block !important;
z-index: 0;
border-radius: 0 !important;
max-width: none !important;
}
.smo-cases-hero__fade {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to bottom, rgba(10,10,10,1) 0%, rgba(10,10,10,0) 40%),
linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0) 40%),
rgba(10,10,10,0.3);
}
.smo-cases-hero .smo-cases-hero__content {
position: relative;
z-index: 2;
}
.smo-cases-hero__title {
font-size: clamp(2.5rem, 5vw, 4rem);
margin: 0.5rem 0 1.5rem;
}
.smo-cases-hero__punchline {
font-size: 1.1rem;
color: var(--smo-text-muted);
margin: 0;
letter-spacing: 0.3px;
} .smo-cases-filters {
padding: 1.5rem 0;
background: var(--smo-bg);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.smo-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.smo-filter-btn {
background: rgba(255,255,255,0.06);
color: var(--smo-text-muted);
border: 1px solid rgba(255,255,255,0.08);
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.smo-filter-btn:hover {
background: rgba(255,255,255,0.1);
color: var(--smo-white);
}
.smo-filter-btn.active {
background: var(--smo-accent);
color: #fff;
border-color: var(--smo-accent);
font-weight: 600;
}
.smo-filter-toggle {
background: rgba(255,255,255,0.03);
color: var(--smo-accent);
border-color: var(--smo-accent-25);
} .smo-cases-grid-section {
padding: 3rem 0;
background: var(--smo-bg);
}
.smo-cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
} a.smo-case-card,
.smo-case-card {
display: block;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--smo-radius);
overflow: hidden;
transition: transform 0.3s, border-color 0.3s;
color: var(--smo-text);
text-decoration: none;
cursor: pointer;
}
a.smo-case-card:hover,
.smo-case-card:hover {
transform: translateY(-4px);
border-color: var(--smo-accent-25);
color: var(--smo-text);
}
.smo-case-card[style*="display: none"] { display: none !important; }
.smo-case-card__visual {
height: 200px;
position: relative;
overflow: hidden;
}
.smo-case-card__thumb {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
.smo-case-card__thumb--video {
border-radius: 0 !important;
}
.smo-case-card__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 1rem;
z-index: 1;
}
.smo-case-card__category {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.4);
padding: 0.2rem 0.6rem;
border-radius: 4px;
}
.smo-case-card__body {
padding: 1.25rem;
}
.smo-case-card__title {
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.smo-case-card__desc {
font-size: 0.85rem;
color: var(--smo-text-muted);
font-weight: 300;
line-height: 1.6;
margin: 0 0 1rem;
}
.smo-case-card__metrics {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.smo-case-card__metric { text-align: center; flex: 1; }
.smo-case-card__metric-value {
display: block;
font-size: 1.1rem;
font-weight: 700;
color: var(--smo-accent);
}
.smo-case-card__metric-label {
display: block;
font-size: 0.65rem;
color: var(--smo-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.smo-case-tags {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 1rem;
}
.smo-case-tag {
display: inline-block;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: var(--smo-text-muted);
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.smo-case-card__link {
font-size: 0.85rem;
font-weight: 600;
color: var(--smo-accent);
transition: color 0.2s;
}
.smo-case-card__link:hover { color: var(--smo-white); }  .smo-case-hero {
position: relative;
padding: 12rem 0 4rem;
min-height: 60vh;
display: flex;
align-items: flex-end;
overflow: hidden;
} .smo-case-hero__video {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
border-radius: 0 !important;
} .smo-case-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(10,10,10,0.85) 0%,
rgba(10,10,10,0.40) 30%,
rgba(10,10,10,0.40) 50%,
rgba(10,10,10,0.50) 70%,
rgba(10,10,10,0.95) 100%
);
z-index: 1;
}
.smo-case-hero__content {
position: relative;
z-index: 2;
text-align: center;
}
.smo-case-hero__back {
display: inline-block;
font-size: 0.8rem;
color: var(--smo-text-muted);
margin-bottom: 2rem;
transition: color 0.2s;
}
.smo-case-hero__back:hover { color: var(--smo-accent); }
.smo-case-hero__title {
font-size: clamp(2.5rem, 5vw, 4rem);
margin: 0.5rem 0;
}
.smo-case-hero__subtitle {
font-size: 1.25rem;
color: rgba(255,255,255,0.85);
max-width: 700px;
margin: 0 auto 1.5rem;
}
.smo-case-hero__platforms {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1rem;
}
.smo-case-platform {
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.9);
padding: 0.35rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
} .smo-case-kpis {
background: var(--smo-bg-alt);
border-top: 1px solid var(--smo-accent-15);
border-bottom: 1px solid var(--smo-accent-15);
padding: 2.5rem 0;
}
.smo-case-kpis__grid {
display: flex;
justify-content: center;
gap: 2.5rem;
flex-wrap: wrap;
}
.smo-case-kpi {
text-align: center;
min-width: 120px;
flex: 1;
max-width: 200px;
}
.smo-case-kpi__value {
font-size: 1.8rem;
font-weight: 700;
color: var(--smo-white);
line-height: 1.2;
}
.smo-case-kpi__label {
font-size: 0.75rem;
color: var(--smo-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 0.3rem;
} @keyframes smo-kpiFillBar { from { width: 0; } to { width: var(--kpi-fill); } }
@keyframes smo-kpiDotPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.smo-kpi-bar-track {
width: 100%;
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
margin: 0.5rem 0 0.4rem;
overflow: hidden;
}
.smo-kpi-bar-track--subtle { height: 3px; }
.smo-kpi-bar {
height: 100%;
background: var(--smo-accent);
border-radius: 2px;
width: 0;
animation: smo-kpiFillBar 1s ease-out forwards;
}
.smo-kpi-bar--accent { background: linear-gradient(90deg, var(--smo-accent), rgba(0,173,255,0.5)); }
.smo-kpi-bar--number { background: linear-gradient(90deg, var(--smo-accent), rgba(0,173,255,0.3)); }
.smo-kpi-dots {
display: flex;
gap: 4px;
justify-content: center;
margin: 0.5rem 0 0.3rem;
}
.smo-kpi-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--smo-accent);
transform: scale(0);
opacity: 0;
animation: smo-kpiDotPop 0.3s ease-out forwards;
}
.smo-kpi-currency {
display: inline-block;
border: 2px solid var(--smo-accent);
border-radius: 10px;
padding: 0.2rem 0.8rem;
margin-bottom: 0.2rem;
}
.smo-kpi-badge {
display: inline-block;
background: rgba(0,173,255,0.12);
border: 1px solid rgba(0,173,255,0.4);
color: var(--smo-accent);
font-weight: 700;
font-size: 1.3rem;
padding: 0.3rem 1rem;
border-radius: 8px;
letter-spacing: 0.5px;
} .smo-case-section {
padding: 4rem 0;
}
.smo-case-section--alt {
background: var(--smo-bg-alt);
}
.smo-case-section__title {
font-size: 1.8rem;
margin: 0.5rem 0 2.5rem !important;
padding-bottom: 0;
}
.smo-case-desc {
font-size: 1.15rem;
line-height: 1.9;
color: var(--smo-text);
margin: 0 0 1.5rem;
}
.smo-case-text {
font-size: 1.05rem;
line-height: 1.9;
color: var(--smo-text);
margin-top: 1.5rem;
}
.smo-case-services {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
} .smo-case-challenge-heading {
display: flex;
align-items: center;
gap: 1rem;
}
.smo-case-challenge-heading h2 {
font-size: 1.8rem;
}
.smo-challenge-icon { flex-shrink: 0; }
.smo-challenge-icon circle { stroke: var(--smo-accent) !important; }
.smo-challenge-icon path { stroke: var(--smo-accent) !important; } .smo-case-tactics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.smo-case-tactic {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--smo-radius);
padding: 1.5rem;
}
.smo-case-tactic__head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.smo-case-tactic__num {
background: var(--smo-accent);
color: #fff;
font-weight: 700;
font-size: 0.7rem;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.smo-case-tactic__title {
font-size: 1rem;
font-weight: 600;
}
.smo-case-tactic__desc {
font-size: 0.9rem;
line-height: 1.7;
color: var(--smo-text-muted);
margin: 0;
}  .smo-media-unified {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
align-items: start;
} .smo-media-cell--full {
grid-column: 1 / -1;
} .smo-media-ratio-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: var(--smo-radius);
background: #000;
}
.smo-media-ratio-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}  .smo-media-yt-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: var(--smo-radius);
background: #000;
}
.smo-media-yt-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
.smo-media-cell--portrait {
height: 340px;
border-radius: var(--smo-radius);
overflow: hidden;
background: #000;
}
.smo-media-cell--portrait video {
width: 100%; height: 100%;
object-fit: cover; display: block;
border-radius: 0;
} .smo-media-cell--img {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--smo-radius);
background: #111;
}
.smo-media-cell--img img {
width: 100%; height: 100%;
object-fit: cover; display: block;
} .smo-media-cell {
border-radius: var(--smo-radius);
overflow: hidden;
background: rgba(255,255,255,0.03);
} .smo-media-unified .smo-media-cell--portrait:only-child {
grid-column: 1;
max-width: 380px;
}
@media (max-width: 768px) {
.smo-media-unified {
grid-template-columns: 1fr;
}
.smo-media-cell--portrait {
height: 300px;
}
}
.smo-media-grid { display: grid; gap: 1.5rem; }
.smo-media-grid--1 { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; }
.smo-media-grid--2 { grid-template-columns: repeat(2, 1fr); }
.smo-media-grid--3 { grid-template-columns: repeat(2, 1fr); }
.smo-media-grid--multi { grid-template-columns: repeat(2, 1fr); } .smo-media-youtube-row {
max-width: 900px;
margin: 0 auto 1.5rem;
border-radius: var(--smo-radius);
overflow: hidden;
}
.smo-media-youtube-row .smo-media-yt-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: var(--smo-radius);
}
.smo-media-youtube-row .smo-media-yt-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
} .smo-media-item--portrait {
aspect-ratio: 9 / 16;
max-height: 75vh;
}
.smo-media-item--portrait video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--smo-radius) !important;
}
.smo-media-item {
border-radius: var(--smo-radius);
overflow: hidden;
background: rgba(255,255,255,0.03);
}
.smo-media-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
}
.smo-media-item video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0 auto;
border-radius: var(--smo-radius);
background: #000;
}
.smo-media-item--iframe {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.smo-media-item--iframe iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
} .smo-media-item--vimeo {
position: relative;
padding-bottom: 56.25%;
height: 0;
margin: 0 auto;
background: #000;
border-radius: 12px;
overflow: hidden;
}
.smo-media-item--vimeo iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
border-radius: 12px;
} .smo-media-item blockquote {
margin: 0 auto;
} .smo-case-takeaway {
background: linear-gradient(135deg, rgba(0,173,255,0.1), rgba(0,173,255,0.03));
border: 1px solid var(--smo-accent-25);
border-radius: 16px;
padding: 2.5rem 3rem;
}
.smo-case-takeaway__badge {
display: inline-block;
background: var(--smo-accent);
color: #fff;
font-weight: 700;
font-size: 0.75rem;
padding: 0.3rem 0.8rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 1px;
}
.smo-case-takeaway__text {
color: var(--smo-text);
line-height: 1.8;
margin: 1.2rem 0 0;
font-size: 1.1rem;
font-style: italic;
} .smo-related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.smo-related-card {
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: var(--smo-radius);
overflow: hidden;
padding: 2.5rem 2rem;
min-height: 220px;
text-decoration: none;
transition: transform 0.3s;
}
.smo-related-card:hover { transform: translateY(-4px); }
.smo-related-card__industry {
color: var(--smo-accent);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.smo-related-card__brand {
color: var(--smo-white);
font-size: 1.3rem;
margin: 0.3rem 0;
}
.smo-related-card__title {
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
margin: 0;
} .smo-related-card { position: relative; }
.smo-related-card__video {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
border-radius: 0 !important;
}
.smo-related-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.3) 100%);
z-index: 1;
}
.smo-related-card__industry,
.smo-related-card__brand,
.smo-related-card__title {
position: relative;
z-index: 2;
} .smo-cases-cta {
padding: 6rem 0;
background: linear-gradient(135deg, #0a0a0a 0%, #0d1b2a 40%, #0a192f 70%, #0a0a0a 100%);
position: relative;
overflow: hidden;
}
.smo-cases-cta::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(0,173,255,0.08) 0%, transparent 70%);
pointer-events: none;
}
.smo-cases-cta__title {
font-size: clamp(2rem, 4vw, 3rem);
margin: 0.5rem 0 1rem;
position: relative;
}
.smo-cases-cta__sub {
color: var(--smo-text-muted);
margin-bottom: 2.5rem;
font-size: 1.1rem;
position: relative;
}
.smo-cases-btn {
display: inline-block;
background: var(--smo-accent);
color: #fff !important;
font-weight: 700;
font-size: 1.05rem;
padding: 1rem 3rem;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
position: relative;
box-shadow: 0 4px 20px rgba(0,173,255,0.25);
}
.smo-cases-btn:hover {
background: #33bfff;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 6px 30px rgba(0,173,255,0.35);
} @media (max-width: 1024px) {
.smo-cases-grid { grid-template-columns: repeat(2, 1fr); }
.smo-case-tactics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.smo-cases-grid { grid-template-columns: 1fr; }
.smo-case-tactics { grid-template-columns: 1fr; }
.smo-media-grid--1 { max-width: 100%; }
.smo-media-grid--2,
.smo-media-grid--3,
.smo-media-grid--multi { grid-template-columns: 1fr; }
.smo-cases-hero { padding: 6rem 0 3rem; min-height: 50vh; }
.smo-cases-hero__videos { grid-template-columns: 1fr; }
.smo-cases-hero__videos .smo-cases-hero__bg:nth-child(2),
.smo-cases-hero__videos .smo-cases-hero__bg:nth-child(3) { display: none; }
.smo-case-hero { padding: 6rem 0 3rem; min-height: 50vh; }
.smo-case-kpis__grid { gap: 1.5rem; }
.smo-case-kpi { min-width: 80px; }
.smo-case-kpi__value { font-size: 1.4rem; }
.smo-case-takeaway { padding: 1.5rem; }
.smo-cases-container { padding: 0 1rem; }
.smo-cases-filters { position: static; }
.smo-filter-bar { justify-content: flex-start; flex-wrap: wrap; }
.smo-filter-btn { white-space: nowrap; }
} .smo-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.smo-reveal.smo-visible {
opacity: 1;
transform: translateY(0);
} body.smo-cases-active #footer {
display: none !important;
} body.smo-cases-active #header_meta {
display: none !important;
}  body.smo-cases-active .smo-case-hero__video,
body.smo-cases-active .smo-case-card__thumb--video,
body.smo-cases-active .smo-related-card__video,
body.smo-cases-active .smo-cases-hero__bg {
border-radius: 0 !important;
} body.smo-cases-active .smo-media-item video {
border-radius: var(--smo-radius) !important;
} .smo-cases-embed {
padding: 3rem 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
} .smo-cases-embed__header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1.5rem;
padding: 0 1rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.smo-cases-embed__title {
font-size: 1.6rem;
font-weight: 700;
margin: 0;
line-height: 1.3;
}
.smo-cases-embed__link {
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
transition: opacity 0.2s;
}
.smo-cases-embed__link:hover { opacity: 0.7; } .smo-cases-embed__wrap {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
} .smo-cases-embed__wrap--slider .smo-cases-embed__track {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 0.5rem;
}
.smo-cases-embed__wrap--slider .smo-cases-embed__track::-webkit-scrollbar { display: none; }
.smo-cases-embed__wrap--slider .smo-cases-compact-card {
flex: 0 0 280px;
scroll-snap-align: start;
} .smo-cases-embed__wrap--grid .smo-cases-embed__track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
} .smo-cases-embed__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s, transform 0.2s;
padding: 0;
}
.smo-cases-embed__arrow:hover { transform: translateY(-50%) scale(1.1); }
.smo-cases-embed__arrow--left { left: -8px; }
.smo-cases-embed__arrow--right { right: -8px; } .smo-cases-compact-card {
display: block;
border-radius: 10px;
overflow: hidden;
text-decoration: none !important;
transition: transform 0.25s, box-shadow 0.25s;
}
.smo-cases-compact-card:hover {
transform: translateY(-3px);
}
.smo-cases-compact-card__visual {
height: 140px;
position: relative;
overflow: hidden;
}
.smo-cases-compact-card__visual img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.smo-cases-compact-card__fade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}
.smo-cases-compact-card__body {
padding: 0.8rem 1rem 1rem;
}
.smo-cases-compact-card__brand {
display: block;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.3;
}
.smo-cases-compact-card__industry {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 0.15rem;
}
.smo-cases-compact-card__kpis {
display: flex;
gap: 1rem;
margin-top: 0.6rem;
}
.smo-cases-compact-card__kpi {
flex: 1;
}
.smo-cases-compact-card__kpi-val {
display: block;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
}
.smo-cases-compact-card__kpi-label {
display: block;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-top: 0.1rem;
} .smo-cases-embed--light {
background: transparent;
}
.smo-cases-embed--light .smo-cases-embed__title {
color: #1a1a1a;
}
.smo-cases-embed--light .smo-cases-embed__link {
color: #00adff;
}
.smo-cases-embed--light .smo-cases-compact-card {
background: #fff;
border: 1px solid #e8e8e8;
}
.smo-cases-embed--light .smo-cases-compact-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
border-color: #d0d0d0;
}
.smo-cases-embed--light .smo-cases-compact-card__brand {
color: #1a1a1a;
}
.smo-cases-embed--light .smo-cases-compact-card__industry {
color: #888;
}
.smo-cases-embed--light .smo-cases-compact-card__kpi-val {
color: #00adff;
}
.smo-cases-embed--light .smo-cases-compact-card__kpi-label {
color: #999;
}
.smo-cases-embed--light .smo-cases-embed__arrow {
background: #fff;
color: #333;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
} .smo-cases-embed--dark {
background: #0a0a0a;
padding-left: 1rem;
padding-right: 1rem;
}
.smo-cases-embed--dark .smo-cases-embed__title {
color: #fff;
}
.smo-cases-embed--dark .smo-cases-embed__link {
color: #00adff;
}
.smo-cases-embed--dark .smo-cases-compact-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.smo-cases-embed--dark .smo-cases-compact-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
border-color: rgba(0,173,255,0.3);
}
.smo-cases-embed--dark .smo-cases-compact-card__brand {
color: #fff;
}
.smo-cases-embed--dark .smo-cases-compact-card__industry {
color: rgba(255,255,255,0.5);
}
.smo-cases-embed--dark .smo-cases-compact-card__kpi-val {
color: #00adff;
}
.smo-cases-embed--dark .smo-cases-compact-card__kpi-label {
color: rgba(255,255,255,0.45);
}
.smo-cases-embed--dark .smo-cases-embed__arrow {
background: rgba(255,255,255,0.1);
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
} @media (max-width: 1024px) {
.smo-cases-embed__wrap--grid .smo-cases-embed__track {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.smo-cases-embed__wrap--grid .smo-cases-embed__track {
grid-template-columns: 1fr;
}
.smo-cases-embed__wrap--slider .smo-cases-compact-card {
flex: 0 0 260px;
}
.smo-cases-embed__arrow { display: none; }
.smo-cases-embed__header { flex-direction: column; gap: 0.5rem; }
}