/* ============================================================
   Starter Modules for Elementor — Batch 2 Widgets CSS
   Version 3.0.0 — 15 new widgets
   ============================================================ */

/* ══════════════════════════════════════════════
   1. TABS CONTENT
   ══════════════════════════════════════════════ */
.sm-tabs-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-tabs-nav {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 0 24px;
    margin-bottom: 0;
    flex-wrap: wrap;
}
.sm-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 14px 14px 0 0;
    background: var(--sm-navy-soft);
    color: var(--sm-navy);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    font-family: var(--sm-font);
}
.sm-tab-btn:hover { background: var(--sm-navy); color: #fff; transform: translateY(-2px); }
.sm-tab-btn.active { background: var(--sm-navy); color: #fff; box-shadow: 0 -4px 20px rgba(19,48,85,0.15); }
.sm-tab-btn-icon { font-size: 1.1rem; }
.sm-tabs-panels { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.sm-tab-panel {
    display: none;
    background: #fff;
    border-radius: 0 0 18px 18px;
    padding: 40px;
    box-shadow: 0 8px 40px rgba(19,48,85,0.08);
    animation: smTabFadeIn 0.4s ease;
}
.sm-tab-panel.active { display: block; }
@keyframes smTabFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.sm-tab-panel-inner.sm-tab-panel--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}
.sm-tab-panel h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sm-navy);
    margin: 0 0 16px;
    font-family: var(--sm-font);
}
.sm-tab-panel-content { color: var(--sm-muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; }
.sm-tab-panel-content ul { padding-left: 18px; }
.sm-tab-panel-content li { margin-bottom: 6px; }
.sm-tab-panel-img img { width: 100%; border-radius: 14px; }
@media (max-width:768px) {
    .sm-tab-panel-inner.sm-tab-panel--split { grid-template-columns: 1fr; }
    .sm-tab-btn { padding: 10px 16px; font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════
   2. FLIP CARDS
   ══════════════════════════════════════════════ */
.sm-flip-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-flip-grid {
    display: grid;
    grid-template-columns: repeat(var(--sm-cols, 4), 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    perspective: 1200px;
}
.sm-flip-card {
    height: 320px;
    cursor: pointer;
}
.sm-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
    transform-style: preserve-3d;
}
.sm-flip-card:hover .sm-flip-inner { transform: rotateY(180deg); }
.sm-flip-front, .sm-flip-back {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    backface-visibility: hidden;
    overflow: hidden;
}
.sm-flip-back { transform: rotateY(180deg); }
.sm-flip-icon { font-size: 2rem; margin-bottom: 14px; }
.sm-flip-front h4, .sm-flip-back h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px;
    font-family: var(--sm-font);
}
.sm-flip-front p, .sm-flip-back p {
    font-size: 0.82rem;
    line-height: 1.6;
    opacity: 0.8;
}
.sm-flip-hint {
    margin-top: auto;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.4;
    letter-spacing: 0.06em;
}
.sm-flip-link {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 24px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    color: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
}
.sm-flip-link:hover { background: rgba(255,255,255,0.25); }
/* Flip front themes */
.sm-flip-front--white { background: #fff; color: var(--sm-text); box-shadow: 0 4px 24px rgba(19,48,85,0.06); }
.sm-flip-front--navy { background: var(--sm-navy); color: #fff; }
.sm-flip-front--light { background: var(--sm-navy-soft); color: var(--sm-navy); }
.sm-flip-front--warm { background: var(--sm-red-soft); color: #7a0f28; }
.sm-flip-front--dark { background: #0b1e38; color: #c8d5e3; }
/* Flip back themes */
.sm-flip-back--navy { background: var(--sm-navy); color: #fff; }
.sm-flip-back--red { background: var(--sm-red); color: #fff; }
.sm-flip-back--dark { background: #0b1e38; color: #c8d5e3; }
.sm-flip-back--gradient { background: linear-gradient(145deg, var(--sm-navy) 0%, #1c4a7e 100%); color: #fff; }
.sm-flip-back--warm { background: var(--sm-red-soft); color: #7a0f28; }
@media (max-width:1024px) { .sm-flip-grid { --sm-cols: 2 !important; } }
@media (max-width:600px) { .sm-flip-grid { --sm-cols: 1 !important; } .sm-flip-card { height: 280px; } }

/* ══════════════════════════════════════════════
   3. SKILL BARS
   ══════════════════════════════════════════════ */
.sm-skill-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-skill-list { max-width: 700px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 20px; }
.sm-skill-item { }
.sm-skill-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.sm-skill-label { font-size: 0.88rem; font-weight: 600; color: var(--sm-navy); display: flex; align-items: center; gap: 8px; }
.sm-skill-label-icon { font-size: 1rem; }
.sm-skill-pct { font-size: 0.82rem; font-weight: 700; color: var(--sm-accent, var(--sm-red)); }
.sm-skill-track {
    height: 10px;
    border-radius: 10px;
    background: var(--sm-navy-soft);
    overflow: hidden;
    position: relative;
}
.sm-skill-fill {
    height: 100%;
    border-radius: 10px;
    width: 0;
    transition: width 1.5s cubic-bezier(0.16,1,0.3,1);
    position: relative;
}
.sm-skill-fill.sm-visible { width: var(--fill-width) !important; }
.sm-skill-fill--striped::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg, transparent, transparent 6px, rgba(255,255,255,0.15) 6px, rgba(255,255,255,0.15) 12px
    );
    border-radius: 10px;
    animation: smStripeMove 1s linear infinite;
}
@keyframes smStripeMove { to { background-position: 24px 0; } }
/* Skill bar styles */
.sm-skill-fill--bars { }
.sm-skill-fill--gradient { background: linear-gradient(90deg, var(--sm-navy), var(--sm-accent, var(--sm-red))) !important; }
.sm-skill-fill--glow { box-shadow: 0 0 12px rgba(198,24,61,0.4); }
@media (max-width:600px) { .sm-skill-list { max-width: 100%; } }

/* ══════════════════════════════════════════════
   4. COUNTDOWN TIMER
   ══════════════════════════════════════════════ */
.sm-countdown-wrap { padding: 60px 0; font-family: var(--sm-font); text-align: center; }
.sm-countdown-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 24px;
}
.sm-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}
.sm-countdown-num {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--sm-navy);
    font-family: var(--sm-font);
    position: relative;
}
.sm-countdown-unit--card .sm-countdown-num {
    background: #fff;
    padding: 20px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(19,48,85,0.08);
    font-size: 2.8rem;
    min-width: 100px;
}
.sm-countdown-unit--flip .sm-countdown-num {
    background: var(--sm-navy);
    color: #fff;
    padding: 20px 24px;
    border-radius: 14px;
    font-size: 2.8rem;
    min-width: 100px;
    position: relative;
    overflow: hidden;
}
.sm-countdown-unit--flip .sm-countdown-num::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255,255,255,0.15);
}
.sm-countdown-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sm-muted);
    margin-top: 10px;
}
.sm-countdown-sep {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--sm-accent, var(--sm-red));
    align-self: flex-start;
    margin-top: 10px;
    animation: smCountdownPulse 1s ease-in-out infinite;
}
@keyframes smCountdownPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.sm-countdown-msg {
    margin-top: 24px;
    font-size: 0.9rem;
    color: var(--sm-muted);
    padding: 0 24px;
}
@media (max-width:600px) {
    .sm-countdown-num { font-size: 2.4rem !important; }
    .sm-countdown-unit { min-width: 70px; }
    .sm-countdown-row { gap: 10px; }
}

/* ══════════════════════════════════════════════
   5. ICON LIST
   ══════════════════════════════════════════════ */
.sm-iconlist-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-iconlist-grid {
    display: grid;
    grid-template-columns: repeat(var(--sm-cols, 2), 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}
.sm-iconlist-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 14px;
    background: #fff;
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 2px 12px rgba(19,48,85,0.04);
}
.sm-iconlist-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(19,48,85,0.1);
}
.sm-iconlist-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--sm-red-soft);
}
.sm-iconlist-text h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sm-navy);
    margin: 0 0 4px;
    font-family: var(--sm-font);
}
.sm-iconlist-text p {
    font-size: 0.82rem;
    color: var(--sm-muted);
    line-height: 1.6;
    margin: 0;
}
.sm-iconlist--bordered .sm-iconlist-item { background: transparent; border: 2px solid var(--sm-navy-soft); }
.sm-iconlist--bordered .sm-iconlist-item:hover { border-color: var(--sm-accent, var(--sm-red)); }
.sm-iconlist--minimal .sm-iconlist-item { background: transparent; box-shadow: none; padding: 12px 0; }
@media (max-width:768px) { .sm-iconlist-grid { --sm-cols: 1 !important; } }

/* ══════════════════════════════════════════════
   6. IMAGE HOTSPOTS
   ══════════════════════════════════════════════ */
.sm-hotspot-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-hotspot-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}
.sm-hotspot-img { width: 100%; border-radius: 20px; display: block; }
.sm-hotspot-placeholder {
    width: 100%;
    padding-bottom: 56%;
    border-radius: 20px;
    background: var(--sm-navy-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sm-muted);
}
.sm-hotspot-dot {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sm-accent, var(--sm-red));
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 4px 16px rgba(198,24,61,0.35);
}
.sm-hotspot-dot::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--sm-accent, var(--sm-red));
    opacity: 0.5;
    animation: smHotspotPulse 2s ease-in-out infinite;
}
@keyframes smHotspotPulse {
    0%,100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.25); opacity: 0; }
}
.sm-hotspot-dot:hover { transform: translate(-50%, -50%) scale(1.2); }
.sm-hotspot-tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--sm-navy);
    color: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    min-width: 180px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    z-index: 10;
    box-shadow: 0 10px 30px rgba(19,48,85,0.2);
}
.sm-hotspot-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--sm-navy);
}
.sm-hotspot-dot.active .sm-hotspot-tooltip,
.sm-hotspot-dot:hover .sm-hotspot-tooltip { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(-4px); }
.sm-hotspot-tooltip h5 { font-size: 0.85rem; font-weight: 700; margin: 0 0 4px; font-family: var(--sm-font); }
.sm-hotspot-tooltip p { font-size: 0.75rem; opacity: 0.8; margin: 0; line-height: 1.5; }

/* ══════════════════════════════════════════════
   7. COMPARISON TABLE
   ══════════════════════════════════════════════ */
.sm-compare-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-compare-table-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    overflow-x: auto;
}
.sm-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(19,48,85,0.08);
    background: #fff;
    font-family: var(--sm-font);
}
.sm-compare-table th, .sm-compare-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(19,48,85,0.06);
    font-size: 0.88rem;
}
.sm-compare-table th {
    font-weight: 700;
    background: var(--sm-navy);
    color: #fff;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sm-compare-table th.sm-compare-highlight {
    background: var(--sm-accent, var(--sm-red));
}
.sm-compare-table td.sm-compare-highlight {
    background: rgba(198,24,61,0.04);
}
.sm-compare-table tbody tr:hover { background: rgba(19,48,85,0.02); }
.sm-compare-table tbody tr:last-child td { border-bottom: none; }
.sm-compare-feature { font-weight: 600; color: var(--sm-navy); }
.sm-compare-check { color: #10b981; font-weight: 700; }
.sm-compare-cross { color: #ef4444; }
.sm-compare-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--sm-accent, var(--sm-red));
    color: #fff;
    margin-left: 8px;
}
@media (max-width:600px) {
    .sm-compare-table th, .sm-compare-table td { padding: 12px 14px; font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════
   8. ANIMATED HEADING
   ══════════════════════════════════════════════ */
.sm-aheading-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-aheading-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--sm-navy);
    margin: 0;
    font-family: var(--sm-font);
}
.sm-aheading-slot {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    min-width: 2ch;
}
.sm-aheading-word {
    display: inline-block;
    color: var(--sm-accent, var(--sm-red));
}
/* Typing */
.sm-aheading-wrap[data-aheading-type="typing"] .sm-aheading-word {
    border-right: none;
}
/* Slide */
.sm-aheading-wrap[data-aheading-type="slide"] .sm-aheading-slot {
    overflow: hidden;
    height: 1.2em;
    vertical-align: bottom;
}
.sm-aheading-wrap[data-aheading-type="slide"] .sm-aheading-word {
    animation: smHeadSlideIn 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes smHeadSlideIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* Fade */
.sm-aheading-wrap[data-aheading-type="fade"] .sm-aheading-word {
    animation: smHeadFadeIn 0.6s ease;
}
@keyframes smHeadFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Clip */
.sm-aheading-wrap[data-aheading-type="clip"] .sm-aheading-slot {
    overflow: hidden;
}
.sm-aheading-wrap[data-aheading-type="clip"] .sm-aheading-word {
    animation: smHeadClip 0.6s cubic-bezier(0.16,1,0.3,1);
}
@keyframes smHeadClip {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
/* Zoom */
.sm-aheading-wrap[data-aheading-type="zoom"] .sm-aheading-word {
    animation: smHeadZoom 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes smHeadZoom {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.sm-aheading-cursor {
    display: inline-block;
    width: 3px;
    height: 0.85em;
    background: var(--sm-accent, var(--sm-red));
    margin-left: 2px;
    vertical-align: baseline;
    animation: smCursorBlink 0.7s step-end infinite;
    border-radius: 2px;
}
@keyframes smCursorBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.sm-aheading-sub {
    margin-top: 16px;
    color: var(--sm-muted);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 400;
    max-width: 600px;
}
.sm-aheading-wrap[style*="text-align:center"] .sm-aheading-sub,
.sm-aheading-wrap[style*="text-align: center"] .sm-aheading-sub { margin-left: auto; margin-right: auto; }

/* ══════════════════════════════════════════════
   9. NOTIFICATION BAR
   ══════════════════════════════════════════════ */
.sm-notif-bar {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-radius: 12px;
    font-family: var(--sm-font);
    position: relative;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
}
.sm-notif-bar.sm-notif-hidden { display: none; }
.sm-notif-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.sm-notif-icon { font-size: 1.2rem; flex-shrink: 0; }
.sm-notif-text { font-size: var(--sm-body); font-weight: 500; flex: 1; }
.sm-notif-btn {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 8px;
    background: rgba(255,255,255,0.2);
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s;
    white-space: nowrap;
}
.sm-notif-btn:hover { background: rgba(255,255,255,0.35); }
.sm-notif-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: 8px;
    opacity: 0.6;
    transition: opacity 0.3s;
    flex-shrink: 0;
}
.sm-notif-close:hover { opacity: 1; }
/* Presets */
.sm-notif--gradient { background: linear-gradient(135deg, var(--sm-navy) 0%, #1c4a7e 100%); color: #fff; }
.sm-notif--red { background: var(--sm-red); color: #fff; }
.sm-notif--light { background: var(--sm-navy-soft); color: var(--sm-navy); }
.sm-notif--dark { background: #0b1e38; color: #c8d5e3; }
.sm-notif--warm { background: var(--sm-red-soft); color: #7a0f28; }
.sm-notif--success { background: #d1fae5; color: #065f46; }
.sm-notif--light .sm-notif-btn { background: var(--sm-navy); color: #fff; }
.sm-notif--warm .sm-notif-btn { background: var(--sm-red); color: #fff; }
.sm-notif--success .sm-notif-btn { background: #065f46; color: #fff; }
/* Animations */
.sm-notif-anim--marquee .sm-notif-text { animation: smMarqueeShimmer 3s ease-in-out infinite; }
@keyframes smMarqueeShimmer {
    0%,100% { opacity: 1; }
    50% { opacity: 0.85; }
}
.sm-notif-anim--pulse { animation: smNotifPulse 3s ease-in-out infinite; }
@keyframes smNotifPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(198,24,61,0); }
    50% { box-shadow: 0 0 0 6px rgba(198,24,61,0.12); }
}
.sm-notif-anim--glow .sm-notif-icon { animation: smGlowIcon 2s ease-in-out infinite; }
@keyframes smGlowIcon { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }
@media (max-width:600px) {
    .sm-notif-inner { flex-wrap: wrap; }
    .sm-notif-btn { margin-top: 8px; }
}

/* ══════════════════════════════════════════════
   10. ACCORDION GALLERY
   ══════════════════════════════════════════════ */
.sm-agallery-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-agallery-row {
    display: flex;
    gap: 8px;
    height: 480px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.sm-agallery-panel {
    flex: 1;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.6s cubic-bezier(0.16,1,0.3,1);
    min-width: 60px;
}
.sm-agallery-panel.active { flex: 4; }
.sm-agallery-panel-bg {
    position: absolute;
    inset: 0;
    background: var(--bg-img, var(--sm-navy-soft)) center/cover no-repeat;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.sm-agallery-panel-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--overlay, rgba(19,48,85,0.75));
    transition: opacity 0.4s;
}
.sm-agallery-panel:hover .sm-agallery-panel-bg { transform: scale(1.05); }
.sm-agallery-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    color: #fff;
}
.sm-agallery-num {
    font-size: 5rem;
    font-weight: 800;
    opacity: 0.08;
    position: absolute;
    top: 10px;
    right: 20px;
    pointer-events: none;
}
.sm-agallery-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
    opacity: 0;
    transition: all 0.4s 0.2s;
}
.sm-agallery-title {
    font-size: var(--sm-h3);
    font-weight: 500;
    margin: 0 0 8px;
    font-family: var(--sm-font);
    transition: all 0.4s;
}
.sm-agallery-desc {
    font-size: var(--sm-body);
    line-height: 1.6;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s 0.15s;
    margin: 0 0 12px;
}
.sm-agallery-btn {
    display: inline-block;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    transition: all 0.4s 0.25s;
}
.sm-agallery-btn:hover { text-decoration: underline; }
/* Active state */
.sm-agallery-panel.active .sm-agallery-icon { opacity: 1; }
.sm-agallery-panel.active .sm-agallery-desc { opacity: 0.85; max-height: 100px; }
.sm-agallery-panel.active .sm-agallery-btn { opacity: 1; }
/* Collapsed state: rotate title */
.sm-agallery-panel:not(.active) .sm-agallery-content {
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.sm-agallery-panel:not(.active) .sm-agallery-title {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-size: 0.9rem;
    white-space: nowrap;
}
.sm-agallery-panel:not(.active) .sm-agallery-num,
.sm-agallery-panel:not(.active) .sm-agallery-icon,
.sm-agallery-panel:not(.active) .sm-agallery-desc,
.sm-agallery-panel:not(.active) .sm-agallery-btn { display: none; }
@media (max-width:768px) {
    .sm-agallery-row { flex-direction: column; height: auto; }
    .sm-agallery-panel { min-height: 80px; min-width: auto; }
    .sm-agallery-panel.active { min-height: 280px; flex: none; }
    .sm-agallery-panel:not(.active) .sm-agallery-title { writing-mode: horizontal-tb; }
    .sm-agallery-panel:not(.active) .sm-agallery-content { flex-direction: row; }
}

/* ══════════════════════════════════════════════
   11. FLOATING CARDS
   ══════════════════════════════════════════════ */
.sm-float-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-float-grid {
    display: grid;
    grid-template-columns: repeat(var(--sm-cols, 3), 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}
.sm-float-card {
    border-radius: 20px;
    padding: 30px 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.sm-float-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(19,48,85,0.12);
}
.sm-float-card[data-sm-float="true"] {
    animation: smFloatBob 4s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
@keyframes smFloatBob {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.sm-float-card:hover { animation-play-state: paused; }
.sm-float-number {
    font-size: 3.5rem;
    font-weight: 800;
    opacity: 0.06;
    position: absolute;
    top: 10px;
    right: 16px;
    pointer-events: none;
}
.sm-float-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.sm-float-card:hover .sm-float-icon { transform: scale(1.15) rotate(-5deg); }
.sm-float-card h4 {
    font-size: var(--sm-h3);
    font-weight: 500;
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
    font-family: var(--sm-font);
}
.sm-float-card p {
    font-size: 0.82rem;
    line-height: 1.65;
    opacity: 0.75;
    position: relative;
    z-index: 1;
    margin: 0;
}
/* Float card themes */
.sm-float-card--white { background: #fff; color: var(--sm-text); box-shadow: 0 4px 24px rgba(19,48,85,0.06); }
.sm-float-card--white .sm-float-icon { background: var(--sm-red-soft); }
.sm-float-card--navy { background: var(--sm-navy); color: #fff; }
.sm-float-card--navy .sm-float-icon { background: rgba(255,255,255,0.1); }
.sm-float-card--red { background: var(--sm-red); color: #fff; }
.sm-float-card--red .sm-float-icon { background: rgba(255,255,255,0.18); }
.sm-float-card--light { background: var(--sm-navy-soft); color: var(--sm-navy); }
.sm-float-card--light .sm-float-icon { background: #fff; }
.sm-float-card--dark { background: #0b1e38; color: #c8d5e3; }
.sm-float-card--dark .sm-float-icon { background: rgba(255,255,255,0.07); }
.sm-float-card--warm { background: var(--sm-red-soft); color: #7a0f28; }
.sm-float-card--warm .sm-float-icon { background: rgba(198,24,61,0.1); }
.sm-float-card--gradient { background: linear-gradient(145deg, var(--sm-navy) 0%, #1c4a7e 100%); color: #fff; }
.sm-float-card--gradient .sm-float-icon { background: rgba(255,255,255,0.12); }
@media (max-width:1024px) { .sm-float-grid { --sm-cols: 2 !important; } }
@media (max-width:600px) { .sm-float-grid { --sm-cols: 1 !important; } }

/* ══════════════════════════════════════════════
   12. VIDEO SHOWCASE
   ══════════════════════════════════════════════ */
.sm-vshow-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-vshow-grid {
    display: grid;
    grid-template-columns: repeat(var(--sm-cols, 2), 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}
.sm-vshow-grid--featured .sm-vshow-card--featured { grid-column: 1 / -1; }
.sm-vshow-grid--scroll {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 24px 30px;
    cursor: grab;
}
.sm-vshow-grid--scroll::-webkit-scrollbar { display: none; }
.sm-vshow-grid--scroll .sm-vshow-card { flex: 0 0 min(80vw, 400px); scroll-snap-align: start; }
.sm-vshow-card {
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.sm-vshow-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(19,48,85,0.12); }
.sm-vshow-thumb {
    aspect-ratio: 16/9;
    background: var(--sm-navy-soft) center/cover no-repeat;
    position: relative;
    overflow: hidden;
}
.sm-vshow-overlay {
    position: absolute;
    inset: 0;
    background: rgba(19,48,85,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.sm-vshow-card:hover .sm-vshow-overlay { opacity: 1; }
.sm-vshow-play {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--sm-accent, var(--sm-red));
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s;
    box-shadow: 0 8px 24px rgba(198,24,61,0.35);
}
.sm-vshow-play:hover { transform: scale(1.1); }
.sm-vshow-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}
.sm-vshow-info { padding: 16px 18px; }
.sm-vshow-cat {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sm-accent, var(--sm-red));
    margin-bottom: 4px;
    display: block;
}
.sm-vshow-title {
    font-size: var(--sm-h3);
    font-weight: 500;
    margin: 0;
    font-family: var(--sm-font);
}
/* Video card themes */
.sm-vshow-card--dark { background: #0b1e38; color: #c8d5e3; }
.sm-vshow-card--navy { background: var(--sm-navy); color: #fff; }
.sm-vshow-card--white { background: #fff; color: var(--sm-text); box-shadow: 0 4px 20px rgba(19,48,85,0.06); }
.sm-vshow-card--gradient { background: linear-gradient(145deg, var(--sm-navy), #1c4a7e); color: #fff; }
/* Lightbox */
.sm-vshow-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sm-vshow-lightbox-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    animation: smFadeIn 0.3s;
}
@keyframes smFadeIn { from { opacity: 0; } to { opacity: 1; } }
.sm-vshow-lightbox-inner {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 900px;
    aspect-ratio: 16/9;
    animation: smScaleIn 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes smScaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sm-vshow-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.sm-vshow-lightbox-close:hover { opacity: 1; }
.sm-vshow-lightbox-video { width: 100%; height: 100%; border-radius: 14px; overflow: hidden; }
.sm-vshow-lightbox-video iframe { width: 100%; height: 100%; border: none; }
@media (max-width:768px) { .sm-vshow-grid { --sm-cols: 1 !important; } }

/* ══════════════════════════════════════════════
   13. NUMBER TICKER
   ══════════════════════════════════════════════ */
.sm-ticker-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-ticker-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}
.sm-ticker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 140px;
}
.sm-ticker-item--card {
    background: #fff;
    padding: 30px 24px;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(19,48,85,0.06);
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.sm-ticker-item--card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(19,48,85,0.1); }
.sm-ticker-icon { font-size: 1.6rem; margin-bottom: 10px; }
.sm-ticker-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--sm-navy);
    font-family: var(--sm-font);
    margin-bottom: 8px;
}
.sm-ticker-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sm-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sm-ticker-desc { font-size: var(--sm-body); color: var(--sm-muted); margin-top: 6px; }
.sm-ticker-divider { width: 1px; height: 80px; align-self: center; }
.sm-ticker-wrap--vertical .sm-ticker-row { flex-direction: column; align-items: stretch; max-width: 600px; }
.sm-ticker-wrap--vertical .sm-ticker-item { flex-direction: row; gap: 20px; text-align: left; }
.sm-ticker-wrap--vertical .sm-ticker-divider { width: 100%; height: 1px; }
@media (max-width:768px) {
    .sm-ticker-row { gap: 20px; }
    .sm-ticker-number { font-size: 2.2rem; }
    .sm-ticker-item { min-width: 110px; }
}

/* ══════════════════════════════════════════════
   14. SOCIAL LINKS
   ══════════════════════════════════════════════ */
.sm-social-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-social-grid {
    display: grid;
    grid-template-columns: repeat(var(--sm-cols, 5), 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}
.sm-social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px;
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    color: var(--sm-text);
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 2px 12px rgba(19,48,85,0.04);
    position: relative;
    overflow: hidden;
}
.sm-social-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--social-color, var(--sm-navy));
    opacity: 0;
    transition: opacity 0.4s;
}
.sm-social-card:hover::before { opacity: 1; }
.sm-social-card:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 12px 30px rgba(19,48,85,0.12); }
.sm-social-icon { font-size: 2rem; margin-bottom: 10px; position: relative; z-index: 1; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.sm-social-card:hover .sm-social-icon { transform: scale(1.2) rotate(-8deg); }
.sm-social-label { font-size: 0.9rem; font-weight: 700; position: relative; z-index: 1; margin-bottom: 2px; }
.sm-social-handle { font-size: 0.75rem; opacity: 0.6; position: relative; z-index: 1; }
.sm-social-desc { font-size: var(--sm-body); opacity: 0.5; margin-top: 6px; position: relative; z-index: 1; }
/* Icons only */
.sm-social--icons .sm-social-grid { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.sm-social--icons .sm-social-card { padding: 18px; border-radius: 50%; width: 64px; height: 64px; justify-content: center; }
.sm-social--icons .sm-social-icon { margin-bottom: 0; }
/* Pills */
.sm-social--pills .sm-social-grid { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sm-social--pills .sm-social-card { flex-direction: row; gap: 8px; padding: 12px 22px; border-radius: 50px; }
.sm-social--pills .sm-social-icon { margin-bottom: 0; font-size: 1.1rem; }
/* Minimal */
.sm-social--minimal .sm-social-card { background: transparent; box-shadow: none; padding: 12px; }
.sm-social--minimal .sm-social-card:hover { background: var(--social-color, var(--sm-navy)); }
@media (max-width:1024px) { .sm-social-grid { --sm-cols: 3 !important; } }
@media (max-width:600px) { .sm-social-grid { --sm-cols: 2 !important; } }

/* ══════════════════════════════════════════════
   15. CONTENT TOGGLE
   ══════════════════════════════════════════════ */
.sm-toggle-wrap { padding: 60px 0; font-family: var(--sm-font); }
.sm-toggle-switch-row {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    padding: 0 24px;
}
.sm-toggle-switch {
    display: inline-flex;
    padding: 4px;
    border-radius: 14px;
    background: var(--sm-navy-soft);
    gap: 4px;
}
.sm-toggle-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--sm-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    font-family: var(--sm-font);
    position: relative;
}
.sm-toggle-switch-btn.active {
    background: var(--sm-toggle-active, var(--sm-navy));
    color: #fff;
    box-shadow: 0 4px 16px rgba(19,48,85,0.2);
}
.sm-toggle-icon { font-size: 1rem; }
.sm-toggle-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: 800;
    color: #fff;
    animation: smBadgeBounce 2s ease-in-out infinite;
}
@keyframes smBadgeBounce {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.sm-toggle-panels {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}
.sm-toggle-panel {
    display: none;
    animation: smToggleFade 0.5s cubic-bezier(0.16,1,0.3,1);
}
.sm-toggle-panel.active { display: block; }
@keyframes smToggleFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width:600px) {
    .sm-toggle-switch-btn { padding: 10px 18px; font-size: 0.8rem; }
}

/* ══════════════════════════════════════════════
   16. REVIEWS MARQUEE
   ══════════════════════════════════════════════ */
.sm-rmq {
    --sm-rmq-gap: 20px;
    padding: 70px 0 80px;
    overflow: hidden;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--sm-rmq-bg, #ffffff);
}

.sm-rmq-title {
    text-align: center;
    font-size: var(--sm-h2);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    margin: 0;
    padding: 0 24px;
}

.sm-rmq-header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
    padding: 0 24px;
}

.sm-rmq-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #fff;
    background: #C6183D;
    border-radius: 5px;
    margin-bottom: 18px;
    box-shadow: 0px 10px 18px -7px #C6183D;
}
.sm-rmq-tag::before,
.sm-rmq-tag::after {
    display: none !important;
    content: none !important;
}

.sm-rmq-align-left .sm-rmq-header-section { align-items: flex-start; text-align: left; }
.sm-rmq-align-center .sm-rmq-header-section { align-items: center; text-align: center; }
.sm-rmq-align-right .sm-rmq-header-section { align-items: flex-end; text-align: right; }

/* ── Row / Track ── */
.sm-rmq-row {
    overflow: hidden;
    position: relative;
    margin-bottom: var(--sm-rmq-gap);
    padding: 10px 0;
}
.sm-rmq-row:last-child { margin-bottom: 0; }

.sm-rmq-track {
    display: flex;
    gap: var(--sm-rmq-gap);
    width: max-content;
    animation: smRmqScroll var(--sm-rmq-speed, 40s) linear infinite;
}

.sm-rmq-row2 .sm-rmq-track {
    animation-name: smRmqScrollReverse;
}

.sm-rmq[data-pause="true"] .sm-rmq-track:hover,
.sm-rmq[data-pause="true"]:hover .sm-rmq-track {
    animation-play-state: paused;
}

@keyframes smRmqScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes smRmqScrollReverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ── Fade edges ── */
.sm-rmq-row::before,
.sm-rmq-row::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.sm-rmq-row::before {
    left: 0;
    background: linear-gradient(to right, var(--sm-rmq-bg, #ffffff) 0%, transparent 100%);
}
.sm-rmq-row::after {
    right: 0;
    background: linear-gradient(to left, var(--sm-rmq-bg, #ffffff) 0%, transparent 100%);
}

/* ── Review Card ── */
.sm-rmq-card {
    flex: 0 0 280px;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sm-rmq-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

/* Header: avatar + info */
.sm-rmq-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sm-rmq-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e5e7eb;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sm-rmq-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-rmq-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.sm-rmq-role {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 400;
    line-height: 1.3;
}

.sm-rmq-stars {
    font-size: 0.8rem;
    color: #f59e0b;
    letter-spacing: 1px;
}

.sm-rmq-text {
    font-size: var(--sm-body);
    line-height: 1.6;
    color: #374151;
    font-weight: 500;
}

/* ── Brand Card ── */
.sm-rmq-brand {
    flex: 0 0 280px;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-height: 100%;
}

.sm-rmq-brand-logo {
    max-width: 80px;
    max-height: 50px;
    object-fit: contain;
    margin-bottom: 8px;
}

.sm-rmq-brand-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.sm-rmq-brand-sub {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .sm-rmq-card,
    .sm-rmq-brand { flex: 0 0 240px; padding: 20px; }
    .sm-rmq-title { margin-bottom: 32px; }
}

/* ══════════════════════════════════════════════
   17. SOLUTIONS TABS
   ══════════════════════════════════════════════ */
.sm-soltabs {
    --sm-st-accent: #c8102e;
    font-family: 'Inter','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background: #1a2744;
    padding: 60px 24px;
    color: #fff;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 18px;
    -webkit-font-smoothing: antialiased;
}
.sm-st-header { text-align: center; margin-bottom: 48px; }
.sm-st-badge {
    display: inline-block;
    background: var(--sm-st-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.sm-st-title {
    font-size: var(--sm-h2);
    font-weight: 500;
    margin: 0 0 12px;
    line-height: 1.2;
    color: #fff;
}
.sm-st-subtitle {
    font-size: var(--sm-body);
    color: rgba(255,255,255,0.6);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Tabs nav */
.sm-st-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.sm-st-tab {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sm-st-tab:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.sm-st-tab.active {
    background: var(--sm-st-accent);
    border-color: var(--sm-st-accent);
    color: #fff;
    box-shadow: 0 4px 20px rgba(200,16,46,0.4);
}
.sm-st-tab-icon { font-size: 16px; opacity: 0.8; }
.sm-st-tab.active .sm-st-tab-icon { opacity: 1; }

/* Panels */
.sm-st-panel { display: none; animation: smStFade 0.5s ease; }
.sm-st-panel.active { display: block; }
@keyframes smStFade {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.sm-st-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Features accordion */
.sm-st-features { display: flex; flex-direction: column; gap: 16px; }
.sm-st-feat {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 20px 24px;
    cursor: pointer;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}
.sm-st-feat::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--sm-st-accent);
    transform: scaleY(0);
    transition: transform 0.35s ease;
    border-radius: 0 3px 3px 0;
}
.sm-st-feat:hover,
.sm-st-feat.expanded {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.15);
}
.sm-st-feat:hover::before,
.sm-st-feat.expanded::before { transform: scaleY(1); }

.sm-st-feat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sm-st-feat-name {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sm-st-feat-emoji {
    font-size: 22px;
    width: 40px; height: 40px;
    background: rgba(200,16,46,0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sm-st-feat-toggle {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.sm-st-feat-toggle svg {
    width: 14px; height: 14px;
    stroke: rgba(255,255,255,0.5);
    transition: transform 0.3s ease;
}
.sm-st-feat.expanded .sm-st-feat-toggle { background: var(--sm-st-accent); }
.sm-st-feat.expanded .sm-st-feat-toggle svg { transform: rotate(45deg); stroke: #fff; }

.sm-st-feat-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, margin-top 0.3s ease;
    margin-top: 0;
}
.sm-st-feat.expanded .sm-st-feat-body { max-height: 200px; margin-top: 14px; }
.sm-st-feat-desc {
    font-size: var(--sm-body);
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    padding-left: 52px;
}

/* Visual card */
.sm-st-visual {
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 32px;
    text-align: center;
    position: sticky;
    top: 24px;
}
.sm-st-vis-icon {
    font-size: 56px;
    margin-bottom: 20px;
    display: block;
    animation: smStFloat 3s ease-in-out infinite;
}
@keyframes smStFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.sm-st-vis-title { font-size: var(--sm-h3); font-weight: 500; margin-bottom: 10px; color: #fff; }
.sm-st-vis-text { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 24px; }
.sm-st-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sm-st-stat {
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px 12px;
}
.sm-st-stat-num {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    display: block;
}
.sm-st-stat-lbl {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    display: block;
}

/* CTA */
.sm-st-cta { text-align: center; margin-top: 48px; }
.sm-st-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--sm-st-accent);
    color: #fff;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 4px 24px rgba(200,16,46,0.35);
}
.sm-st-cta-btn:hover {
    filter: brightness(0.85);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(200,16,46,0.45);
}
.sm-st-cta-btn svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.sm-st-cta-btn:hover svg { transform: translateX(4px); }

/* Responsive */
@media (max-width: 768px) {
    .sm-soltabs { padding: 40px 16px; }
    .sm-st-title {}
    .sm-st-grid { grid-template-columns: 1fr; }
    .sm-st-visual { position: static; margin-top: 24px; }
    .sm-st-tabs { gap: 6px; }
    .sm-st-tab { padding: 8px 14px; font-size: 12px; }
    .sm-st-feat-desc { padding-left: 0; }
}

/* ══════════════════════════════════════════════
   18. PRODUCT CARDS
   ══════════════════════════════════════════════ */
.sm-pcards {
    --sm-pc-accent: #c8102e;
    font-family: 'Inter','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background: #f5f5f7;
    padding: 80px 24px;
    color: #1a2744;
    max-width: 1200px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}
.sm-pc-header { text-align: center; margin-bottom: 20px; }
.sm-pc-badge {
    display: inline-block;
    background: var(--sm-pc-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 6px;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px rgba(200,16,46,.35);
}
.sm-pc-title {
    font-size: var(--sm-h2);
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.15;
    color: #1a2744;
}
.sm-pc-subtitle {
    font-size: var(--sm-body);
    color: #6b7a90;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Filters */
.sm-pc-filters {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 36px 0 44px;
    flex-wrap: wrap;
}
.sm-pc-filter {
    background: #fff;
    border: 2px solid #e2e5ea;
    color: #6b7a90;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}
.sm-pc-filter:hover {
    border-color: var(--sm-pc-accent);
    color: var(--sm-pc-accent);
}
.sm-pc-filter.active {
    background: var(--sm-pc-accent);
    border-color: var(--sm-pc-accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(200,16,46,0.3);
}

/* Grid */
.sm-pc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Card */
.sm-pc-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,39,68,0.06);
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 2px solid transparent;
}
.sm-pc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(26,39,68,0.12);
    border-color: rgba(200,16,46,0.15);
}
.sm-pc-card.sm-pc-hidden { display: none; }
.sm-pc-card.sm-pc-show { animation: smPcIn 0.45s ease forwards; }
@keyframes smPcIn {
    from { opacity:0; transform:translateY(20px) scale(0.97); }
    to { opacity:1; transform:translateY(0) scale(1); }
}

/* Popular badge */
.sm-pc-popular {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--sm-pc-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 50px;
    z-index: 2;
    text-transform: uppercase;
}

/* Image */
.sm-pc-img {
    position: relative;
    background: linear-gradient(135deg, #f0f2f5, #e8eaef);
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sm-pc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.sm-pc-card:hover .sm-pc-img img { transform: scale(1.05); }
.sm-pc-img-emoji {
    font-size: 72px;
    opacity: 0.9;
    transition: transform 0.4s ease;
}
.sm-pc-card:hover .sm-pc-img-emoji { transform: scale(1.08); }
.sm-pc-type {
    position: absolute;
    bottom: 12px; left: 12px;
    background: #1a2744;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.3px;
}

/* Body */
.sm-pc-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sm-pc-brand-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.sm-pc-brand-logo {
    height: 18px;
    width: auto;
    object-fit: contain;
}
.sm-pc-brand {
    font-size: 12px;
    font-weight: 600;
    color: var(--sm-pc-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sm-pc-name {
    font-size: var(--sm-h3);
    font-weight: 500;
    color: #1a2744;
    margin: 0 0 12px;
    line-height: 1.25;
}
.sm-pc-desc {
    font-size: var(--sm-body);
    color: #6b7a90;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Specs */
.sm-pc-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.sm-pc-spec {
    background: #f5f6f8;
    border-radius: 15px;
    padding: 12px;
    text-align: center;
}
.sm-pc-spec-val {
    font-size: 16px;
    font-weight: 800;
    color: #1a2744;
    display: block;
}
.sm-pc-spec-lbl {
    font-size: 10.5px;
    color: #8c96a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    display: block;
}

.sm-pc-divider {
    height: 1px;
    background: #ebedf0;
    margin-bottom: 20px;
}

/* Footer */
.sm-pc-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sm-pc-price-lbl {
    font-size: 11px;
    color: #8c96a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}
.sm-pc-price-val {
    font-size: 24px;
    font-weight: 900;
    color: #1a2744;
    line-height: 1.2;
}
.sm-pc-price-val span {
    font-size: 14px;
    font-weight: 500;
    color: #8c96a6;
}
.sm-pc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a2744;
    color: #fff;
    padding: 12px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: inherit;
    border: none;
    cursor: pointer;
}
.sm-pc-btn:hover {
    background: var(--sm-pc-accent);
    box-shadow: 0 4px 16px rgba(200,16,46,0.35);
    transform: translateY(-1px);
}
.sm-pc-btn svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.sm-pc-btn:hover svg { transform: translateX(3px); }

/* Banner */
.sm-pc-banner {
    margin-top: 48px;
    background: #1a2744;
    border-radius: 15px;
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.sm-pc-banner::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(200,16,46,0.15), transparent 70%);
    top: -100px; right: -50px;
    pointer-events: none;
}
.sm-pc-banner-text h3 {
    font-size: var(--sm-h3);
    font-weight: 500;
    color: #fff;
    margin: 0 0 8px;
}
.sm-pc-banner-text p {
    font-size: var(--sm-body);
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin: 0;
}
.sm-pc-banner-feats {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}
.sm-pc-banner-feat { text-align: center; }
.sm-pc-banner-feat-icon {
    width: 48px; height: 48px;
    background: rgba(200,16,46,0.15);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 22px;
}
.sm-pc-banner-feat-lbl {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}
.sm-pc-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--sm-pc-accent);
    color: #fff;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(200,16,46,0.35);
}
.sm-pc-banner-btn:hover {
    filter: brightness(0.85);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(200,16,46,0.45);
}
.sm-pc-banner-btn svg { width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 1024px) {
    .sm-pc-grid { grid-template-columns: repeat(2, 1fr); }
    .sm-pc-img { height: 180px; }
    .sm-pc-banner-feats { gap: 16px; }
}
@media (max-width: 768px) {
    .sm-pcards { padding: 48px 16px; }
    .sm-pc-title {}
    .sm-pc-subtitle {}
    .sm-pc-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .sm-pc-img { height: 200px; }
    .sm-pc-body { padding: 20px; }
    .sm-pc-name {}
    .sm-pc-desc { margin-bottom: 16px; }
    .sm-pc-specs { gap: 8px; margin-bottom: 16px; }
    .sm-pc-spec { padding: 10px; border-radius: 12px; }
    .sm-pc-spec-val { font-size: 14px; }
    .sm-pc-price-val { font-size: 20px; }
    .sm-pc-btn { padding: 10px 18px; font-size: 12px; }
    .sm-pc-banner { flex-direction: column; text-align: center; padding: 32px 24px; }
    .sm-pc-banner-text h3 { font-size: 18px; }
    .sm-pc-banner-feats { justify-content: center; flex-wrap: wrap; }
    .sm-pc-banner-btn { width: 100%; justify-content: center; }
    .sm-pc-filters { gap: 6px; justify-content: flex-start; }
    .sm-pc-filter { padding: 8px 16px; font-size: 12px; }
    .sm-pc-popular { font-size: 10px; padding: 4px 10px; top: 12px; right: 12px; }
}

/* ══════════════════════════════════════════════
   19. PROCESS TIMELINE
   ══════════════════════════════════════════════ */
.sm-ptl {
    --sm-ptl-accent: #c8102e;
    font-family: 'Inter','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background: #1a2744;
    padding: 80px 24px;
    color: #fff;
    max-width: 1200px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}
.sm-ptl-header { text-align: center; margin-bottom: 56px; }
.sm-ptl-badge {
    display: inline-block;
    background: var(--sm-ptl-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 4px;
    margin-bottom: 18px;
}
.sm-ptl-title {
    font-size: var(--sm-h2);
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.15;
    color: #fff;
}
.sm-ptl-subtitle {
    font-size: var(--sm-body);
    color: rgba(255,255,255,0.55);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Timeline */
.sm-ptl-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
}
.sm-ptl-line {
    position: absolute;
    left: 47px; top: 0; bottom: 0;
    width: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}
.sm-ptl-progress {
    position: absolute;
    left: 47px; top: 0;
    width: 3px; height: 0;
    background: linear-gradient(180deg, var(--sm-ptl-accent), #e8384f);
    border-radius: 3px;
    transition: height 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
    z-index: 1;
}

/* Step */
.sm-ptl-step {
    display: grid;
    grid-template-columns: 96px 1fr;
    position: relative;
    cursor: pointer;
}
.sm-ptl-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 32px;
    position: relative;
    z-index: 2;
}
.sm-ptl-num {
    width: 52px; height: 52px;
    border-radius: 15px;
    background: rgba(255,255,255,0.06);
    border: 3px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: rgba(255,255,255,0.35);
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    position: relative;
}
.sm-ptl-step.active .sm-ptl-num {
    background: var(--sm-ptl-accent);
    border-color: var(--sm-ptl-accent);
    color: #fff;
    box-shadow: 0 6px 24px rgba(200,16,46,0.45);
    transform: scale(1.08);
}
.sm-ptl-step.completed .sm-ptl-num {
    background: rgba(200,16,46,0.2);
    border-color: rgba(200,16,46,0.4);
    color: #fff;
}
.sm-ptl-step.active .sm-ptl-num::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    border: 2px solid rgba(200,16,46,0.25);
    animation: smPtlPulse 2s ease-in-out infinite;
}
@keyframes smPtlPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0; }
}

/* Card */
.sm-ptl-card {
    padding: 32px;
    margin: 12px 0;
    border-radius: 15px;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.06);
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    position: relative;
    overflow: hidden;
}
.sm-ptl-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--sm-ptl-accent);
    border-radius: 0 4px 4px 0;
    transform: scaleY(0);
    transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    transform-origin: top;
}
.sm-ptl-step:hover .sm-ptl-card {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
.sm-ptl-step.active .sm-ptl-card {
    background: rgba(255,255,255,0.08);
    border-color: rgba(200,16,46,0.25);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.sm-ptl-step.active .sm-ptl-card::before { transform: scaleY(1); }

.sm-ptl-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}
.sm-ptl-icon {
    width: 44px; height: 44px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.sm-ptl-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--sm-ptl-accent);
    display: block;
}
.sm-ptl-step-name {
    font-size: var(--sm-h3);
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

/* Toggle */
.sm-ptl-toggle {
    position: absolute;
    top: 32px; right: 28px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.sm-ptl-toggle svg {
    width: 16px; height: 16px;
    stroke: rgba(255,255,255,0.35);
    transition: all 0.3s ease;
}
.sm-ptl-step.active .sm-ptl-toggle {
    background: var(--sm-ptl-accent);
    box-shadow: 0 4px 12px rgba(200,16,46,0.35);
}
.sm-ptl-step.active .sm-ptl-toggle svg {
    stroke: #fff;
    transform: rotate(180deg);
}

/* Expandable body */
.sm-ptl-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25,0.46,0.45,0.94),
                opacity 0.4s ease,
                margin-top 0.4s ease;
    opacity: 0;
    margin-top: 0;
}
.sm-ptl-step.active .sm-ptl-body {
    max-height: 500px;
    opacity: 1;
    margin-top: 18px;
}
.sm-ptl-desc {
    font-size: var(--sm-body);
    color: rgba(255,255,255,0.55);
    line-height: 1.75;
    margin: 0 0 20px;
}

/* Chips */
.sm-ptl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sm-ptl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.sm-ptl-chip-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Guarantee */
.sm-ptl-guar {
    margin-top: 56px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 15px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
.sm-ptl-guar-item { position: relative; }
.sm-ptl-guar-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; height: 60%;
    width: 1px;
    background: rgba(255,255,255,0.08);
}
.sm-ptl-guar-icon { font-size: 28px; display: block; margin-bottom: 10px; }
.sm-ptl-guar-val {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    display: block;
    margin-bottom: 4px;
}
.sm-ptl-guar-lbl {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    display: block;
    line-height: 1.4;
}

/* CTA */
.sm-ptl-cta { text-align: center; margin-top: 48px; }
.sm-ptl-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--sm-ptl-accent);
    color: #fff;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 4px 24px rgba(200,16,46,0.35);
}
.sm-ptl-btn:hover {
    filter: brightness(0.85);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(200,16,46,0.5);
}
.sm-ptl-btn svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.sm-ptl-btn:hover svg { transform: translateX(4px); }

/* Responsive */
@media (max-width: 768px) {
    .sm-ptl { padding: 48px 16px; }
    .sm-ptl-line { left: 27px; }
    .sm-ptl-progress { left: 27px; }
    .sm-ptl-step { grid-template-columns: 56px 1fr; }
    .sm-ptl-num { width: 40px; height: 40px; font-size: 15px; border-radius: 12px; }
    .sm-ptl-step.active .sm-ptl-num::after { border-radius: 16px; inset: -6px; }
    .sm-ptl-card { padding: 20px; margin: 8px 0; }
    .sm-ptl-step-name {}
    .sm-ptl-desc {}
    .sm-ptl-toggle { top: 20px; right: 16px; width: 28px; height: 28px; }
    .sm-ptl-guar {
        grid-template-columns: 1fr 1fr;
        padding: 28px 20px;
        gap: 24px;
    }
    .sm-ptl-guar-item:not(:last-child)::after { display: none; }
}

/* ══════════════════════════════════════════════
   20. TARGET AUDIENCE
   ══════════════════════════════════════════════ */
.sm-tga {
    font-family: 'Inter','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background: #fff;
    padding: 80px 24px;
    color: #1a2744;
    max-width: 1100px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}
.sm-tga-header { text-align: center; margin-bottom: 64px; }
.sm-tga-badge {
    display: inline-block;
    background: #c8102e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 4px;
    margin-bottom: 18px;
}
.sm-tga-title {
    font-size: var(--sm-h2);
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.1;
    color: #1a2744;
}
.sm-tga-title span {
    background: linear-gradient(135deg, #c8102e, #e8384f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sm-tga-subtitle {
    font-size: var(--sm-body);
    color: #6b7a90;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Pills */
.sm-tga-pills {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}
.sm-tga-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border: 2px solid #e8eaef;
    background: #fff;
    color: #6b7a90;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sm-tga-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.sm-tga-pill:hover { border-color: #c8102e; color: #1a2744; }
.sm-tga-pill.active {
    background: #1a2744;
    border-color: #1a2744;
    color: #fff;
    box-shadow: 0 4px 16px rgba(26,39,68,0.2);
}
.sm-tga-pill.active .sm-tga-pill-dot { opacity: 1; }

/* Panels */
.sm-tga-panels { position: relative; overflow: hidden; }
.sm-tga-panel { display: none; animation: smTgaSlide 0.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.sm-tga-panel.active { display: block; }
@keyframes smTgaSlide {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Intro */
.sm-tga-intro {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eef0f4;
}
.sm-tga-icon-wrap {
    width: 72px; height: 72px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    position: relative;
}
.sm-tga-icon-border {
    position: absolute;
    inset: -4px;
    border-radius: 19px;
    border: 2px dashed;
    opacity: 0.5;
    pointer-events: none;
}
.sm-tga-pname {
    font-size: var(--sm-h3);
    font-weight: 500;
    color: #1a2744;
    margin: 0 0 10px;
    line-height: 1.2;
}
.sm-tga-pdesc {
    font-size: var(--sm-body);
    color: #5a6578;
    line-height: 1.75;
    max-width: 620px;
    margin: 0;
}

/* Needs */
.sm-tga-needs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: 40px;
}
.sm-tga-need {
    padding: 28px 24px;
    position: relative;
    transition: all 0.3s ease;
}
.sm-tga-need:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 15%; height: 70%;
    width: 1px;
    background: #eef0f4;
}
.sm-tga-need:hover { transform: translateY(-3px); }
.sm-tga-need-icon { font-size: 28px; display: block; margin-bottom: 14px; }
.sm-tga-need-title {
    font-size: 15px;
    font-weight: 800;
    color: #1a2744;
    display: block;
    margin-bottom: 6px;
}
.sm-tga-need-title i {
    display: block;
    width: 24px; height: 3px;
    border-radius: 3px;
    margin-top: 8px; margin-bottom: 4px;
    font-style: normal;
}
.sm-tga-need-sub {
    font-size: 13.5px;
    color: #8c96a6;
    line-height: 1.55;
    display: block;
}

/* Stats */
.sm-tga-stats {
    display: flex;
    gap: 0;
    background: #f8f9fb;
    border-radius: 15px;
    overflow: hidden;
}
.sm-tga-stat {
    flex: 1;
    padding: 24px 20px;
    text-align: center;
    position: relative;
    transition: background 0.3s ease;
}
.sm-tga-stat:hover { background: #f0f2f5; }
.sm-tga-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; height: 60%;
    width: 1px;
    background: #e2e5ea;
}
.sm-tga-stat-val {
    font-size: 26px;
    font-weight: 900;
    display: block;
    margin-bottom: 4px;
}
.sm-tga-stat-lbl {
    font-size: 12px;
    color: #8c96a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* CTA */
.sm-tga-cta {
    text-align: center;
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid #eef0f4;
}
.sm-tga-cta-text {
    font-size: 15px;
    color: #8c96a6;
    margin: 0 0 20px;
}
.sm-tga-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1a2744;
    color: #fff;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 4px 24px rgba(26,39,68,0.2);
}
.sm-tga-btn:hover {
    background: #c8102e;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(200,16,46,0.35);
}
.sm-tga-btn svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.sm-tga-btn:hover svg { transform: translateX(4px); }

/* Responsive */
@media (max-width: 768px) {
    .sm-tga { padding: 48px 16px; }
    .sm-tga-title {}
    .sm-tga-pills { gap: 6px; }
    .sm-tga-pill { padding: 8px 14px; font-size: 12px; }
    .sm-tga-intro { grid-template-columns: 1fr; gap: 16px; }
    .sm-tga-icon-wrap { width: 56px; height: 56px; font-size: 26px; }
    .sm-tga-pname {}
    .sm-tga-needs { grid-template-columns: 1fr 1fr; }
    .sm-tga-need:nth-child(2)::after { display: none; }
    .sm-tga-need { padding: 20px 16px; }
    .sm-tga-need:nth-child(1), .sm-tga-need:nth-child(2) { border-bottom: 1px solid #eef0f4; }
    .sm-tga-stats { flex-wrap: wrap; }
    .sm-tga-stat { flex: 1 1 33%; min-width: 0; }
    .sm-tga-stat::after { display: none; }
    .sm-tga-stat-val { font-size: 20px; }
}

/* ══════════════════════════════════════════════
   21. BRANDS SLIDER
   ══════════════════════════════════════════════ */
.sm-bsl {
    font-family: 'Inter','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background: #fff;
    padding: 72px 24px;
    color: #1a2744;
    overflow: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
}
.sm-bsl-header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.sm-bsl-badge {
    display: inline-block;
    background: #c8102e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 4px;
    margin-bottom: 18px;
}
.sm-bsl-title {
    font-size: var(--sm-h2);
    font-weight: 500;
    margin: 0 0 12px;
    line-height: 1.12;
    color: #1a2744;
}
.sm-bsl-title span {
    background: linear-gradient(135deg, #c8102e, #e8384f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sm-bsl-subtitle {
    font-size: var(--sm-body);
    color: #6b7a90;
    line-height: 1.65;
    margin: 0;
}

/* Rows */
.sm-bsl-row { margin-bottom: 16px; }
.sm-bsl-row:last-of-type { margin-bottom: 0; }

/* Wrap with fades */
.sm-bsl-wrap { position: relative; overflow: hidden; }
.sm-bsl-fade-l, .sm-bsl-fade-r {
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 3;
    pointer-events: none;
}
.sm-bsl-fade-l { left: 0; background: linear-gradient(90deg, var(--sm-bsl-bg, #fff) 0%, transparent 100%); }
.sm-bsl-fade-r { right: 0; background: linear-gradient(270deg, var(--sm-bsl-bg, #fff) 0%, transparent 100%); }

/* Track */
.sm-bsl-track {
    display: flex;
    width: max-content;
    animation: smBslScroll 35s linear infinite;
}
.sm-bsl-track-rev {
    animation-name: smBslScrollRev;
}
.sm-bsl-track:hover { animation-play-state: paused; }
@keyframes smBslScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes smBslScrollRev {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Brand card */
.sm-bsl-brand {
    flex-shrink: 0;
    width: 200px;
    height: 100px;
    margin: 0 16px;
    background: #f8f9fb;
    border: 2px solid #eef0f4;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 28px;
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.sm-bsl-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(200,16,46,0.03), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 13px;
}
.sm-bsl-brand:hover {
    border-color: rgba(200,16,46,0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26,39,68,0.08);
    background: #fff;
}
.sm-bsl-brand:hover::before { opacity: 1; }

/* Logo img */
/* Logo image inside fixed card */
.sm-bsl-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    display: block;
}

/* Logo text */
.sm-bsl-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.sm-bsl-name {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #3d4a5e;
    transition: color 0.3s ease;
    white-space: nowrap;
}
.sm-bsl-brand:hover .sm-bsl-name { color: #1a2744; }
.sm-bsl-sub {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #a0a8b6;
    transition: color 0.3s ease;
}
.sm-bsl-brand:hover .sm-bsl-sub { color: #c8102e; }

/* Info strip */
.sm-bsl-strip {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid #eef0f4;
    flex-wrap: wrap;
}
.sm-bsl-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sm-bsl-info-icon {
    width: 42px; height: 42px;
    border-radius: 15px;
    background: #f8f9fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.sm-bsl-info-text { display: flex; flex-direction: column; }
.sm-bsl-info-val {
    font-size: 16px;
    font-weight: 800;
    color: #1a2744;
}
.sm-bsl-info-lbl {
    font-size: 12px;
    color: #8c96a6;
}

/* Responsive */
@media (max-width: 768px) {
    .sm-bsl { padding: 48px 16px; }
    .sm-bsl-title {}
    .sm-bsl-brand { width: 160px; height: 80px; margin: 0 10px; padding: 16px 20px; }
    .sm-bsl-fade-l, .sm-bsl-fade-r { width: 60px; }
    .sm-bsl-strip { gap: 24px; }
    .sm-bsl-info-val { font-size: 14px; }
}

/* ── Product Cards: Popup Modal ── */
.sm-pc-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 24px;
}
.sm-pc-modal.open { opacity: 1; visibility: visible; }
.sm-pc-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(26,39,68,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.sm-pc-modal-box {
    position: relative;
    background: #fff;
    border-radius: 15px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px 36px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    transform: translateY(30px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sm-pc-modal.open .sm-pc-modal-box { transform: translateY(0) scale(1); }
.sm-pc-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: #f5f5f7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.sm-pc-modal-close svg { width: 18px; height: 18px; stroke: #6b7a90; }
.sm-pc-modal-close:hover { background: #e8eaef; }

/* Product tag */
.sm-pc-modal-product-tag {
    display: inline-block;
    background: rgba(200,16,46,0.08);
    color: var(--sm-pc-accent, #c8102e);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}
.sm-pc-modal-product-tag:empty { display: none; }

.sm-pc-modal-title {
    font-size: var(--sm-h3);
    font-weight: 500;
    color: #1a2744;
    margin: 0 0 8px;
    line-height: 1.2;
}
.sm-pc-modal-desc {
    font-size: var(--sm-body);
    color: #6b7a90;
    line-height: 1.6;
    margin: 0 0 28px;
}

/* Fields */
.sm-pc-modal-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.sm-pc-modal-field-full { grid-column: 1 / -1; }
.sm-pc-modal-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1a2744;
    margin-bottom: 6px;
}
.sm-pc-modal-field label span { color: var(--sm-pc-accent, #c8102e); }
.sm-pc-modal-field input,
.sm-pc-modal-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e8eaef;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1a2744;
    background: #f8f9fb;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    resize: vertical;
}
.sm-pc-modal-field input:focus,
.sm-pc-modal-field textarea:focus {
    border-color: var(--sm-pc-accent, #c8102e);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.08);
    background: #fff;
}
.sm-pc-modal-field input.sm-pc-invalid,
.sm-pc-modal-field textarea.sm-pc-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}

/* Privacy */
.sm-pc-modal-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
    cursor: pointer;
    font-size: 13px;
    color: #6b7a90;
    line-height: 1.5;
}
.sm-pc-modal-privacy input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--sm-pc-accent, #c8102e);
    cursor: pointer;
}
.sm-pc-modal-privacy a {
    color: var(--sm-pc-accent, #c8102e);
    text-decoration: underline;
}

/* Submit */
.sm-pc-modal-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    background: var(--sm-pc-accent, #c8102e);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(200,16,46,0.25);
}
.sm-pc-modal-submit:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(200,16,46,0.35);
}
.sm-pc-modal-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.sm-pc-modal-submit svg { width: 18px; height: 18px; }

/* Error */
.sm-pc-modal-error {
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin-top: 12px;
    min-height: 20px;
}

/* Success view */
.sm-pc-modal-success-view { display: none; text-align: center; }
.sm-pc-modal.success .sm-pc-modal-form-view { display: none; }
.sm-pc-modal.success .sm-pc-modal-success-view { display: block; }
.sm-pc-modal-success-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #ecfdf5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.sm-pc-modal-success-icon svg {
    width: 32px; height: 32px;
    stroke: #059669;
}
.sm-pc-modal.success .sm-pc-modal-desc { margin-bottom: 24px; }

/* Loading state */
.sm-pc-modal-submit.loading {
    pointer-events: none;
    opacity: 0.7;
}
.sm-pc-modal-submit.loading::after {
    content: '';
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: smPcSpin 0.6s linear infinite;
}
@keyframes smPcSpin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 600px) {
    .sm-pc-modal-box { padding: 28px 20px; }
    .sm-pc-modal-fields { grid-template-columns: 1fr; }
    .sm-pc-modal-title { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════
   22 · SITE TYPES
   ═══════════════════════════════════════════════════ */
.sm-sty {
    --sm-sty-accent: #c8102e;
    padding: 80px 24px 100px;
    max-width: 1160px;
    margin: 0 auto;
}

/* Header */
.sm-sty-header { text-align: center; margin-bottom: 56px; }
.sm-sty-badge {
    display: inline-block;
    background: rgba(200,16,46,0.08);
    color: var(--sm-sty-accent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 4px;
    margin-bottom: 18px;
}
.sm-sty-title {
    font-size: var(--sm-h2);
    font-weight: 500;
    color: #1a2744;
    line-height: 1.15;
    margin: 0 0 16px;
}
.sm-sty-title span {
    background: linear-gradient(135deg, var(--sm-sty-accent), #e8506a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sm-sty-subtitle {
    font-size: var(--sm-body);
    color: #6b7a90;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto;
}

/* Grid */
.sm-sty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Card base */
.sm-sty-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s ease;
    /* IntersectionObserver reveal */
    opacity: 0;
    transform: translateY(32px);
}
.sm-sty-card.sm-sty-visible {
    opacity: 1;
    transform: translateY(0);
}
.sm-sty-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(26,39,68,0.12);
}
.sm-sty-card h3 {
    font-size: var(--sm-h3);
    font-weight: 500;
    margin: 0 0 10px;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}
.sm-sty-card-desc {
    font-size: var(--sm-body);
    line-height: 1.65;
    margin: 0 0 24px;
    opacity: 0.78;
    position: relative;
    z-index: 1;
    flex: 1;
}

/* Card title contrast */
.sm-sty-card h3 { color: #fff; }
.sm-sty-light h3 { color: #1a2744; }
.sm-sty-custom h3 { color: var(--sty-text, #fff); }

/* ── Theme: Navy ── */
.sm-sty-navy { background: #1a2744; color: #fff; }
.sm-sty-navy .sm-sty-bar { background: #253456; }
.sm-sty-navy .sm-sty-body { background: #111c33; }
.sm-sty-navy .sm-sty-dot { background: rgba(255,255,255,0.25); }

/* ── Theme: Red ── */
.sm-sty-red { background: linear-gradient(135deg, #c8102e 0%, #a00d24 100%); color: #fff; }
.sm-sty-red .sm-sty-bar { background: rgba(0,0,0,0.2); }
.sm-sty-red .sm-sty-body { background: rgba(0,0,0,0.25); }
.sm-sty-red .sm-sty-dot { background: rgba(255,255,255,0.3); }

/* ── Theme: Light ── */
.sm-sty-light { background: #f5f5f7; color: #1a2744; }
.sm-sty-light .sm-sty-bar { background: #e8eaef; }
.sm-sty-light .sm-sty-body { background: #fff; }
.sm-sty-light .sm-sty-dot { background: #c4c8d0; }
.sm-sty-light .sm-sty-card-desc { opacity: 0.65; }

/* ── Theme: Slate ── */
.sm-sty-slate { background: #334155; color: #fff; }
.sm-sty-slate .sm-sty-bar { background: #475569; }
.sm-sty-slate .sm-sty-body { background: #1e293b; }
.sm-sty-slate .sm-sty-dot { background: rgba(255,255,255,0.2); }

/* ── Theme: Blue ── */
.sm-sty-blue { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); color: #fff; }
.sm-sty-blue .sm-sty-bar { background: rgba(0,0,0,0.2); }
.sm-sty-blue .sm-sty-body { background: rgba(0,0,0,0.25); }
.sm-sty-blue .sm-sty-dot { background: rgba(255,255,255,0.3); }

/* ── Theme: Green ── */
.sm-sty-green { background: #065f46; color: #fff; }
.sm-sty-green .sm-sty-bar { background: #047857; }
.sm-sty-green .sm-sty-body { background: #022c22; }
.sm-sty-green .sm-sty-dot { background: rgba(255,255,255,0.25); }

/* ── Theme: Custom ── */
.sm-sty-custom { background: var(--sty-bg, #1a2744); color: var(--sty-text, #fff); }
.sm-sty-custom .sm-sty-bar { background: var(--sty-bar, #2a3a5e); }
.sm-sty-custom .sm-sty-body { background: var(--sty-body, #111827); }
.sm-sty-custom .sm-sty-dot { background: var(--sty-text, #fff); opacity: 0.25; }

/* Browser mockup */
.sm-sty-browser {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: auto;
}
.sm-sty-bar {
    padding: 8px 12px;
    display: flex;
    gap: 5px;
    align-items: center;
}
.sm-sty-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: block;
}
.sm-sty-body {
    height: 140px;
    padding: 14px;
    overflow: hidden;
}

/* ── Mockup: Landing ── */
.sm-mock-landing { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; }
.sm-mock-line { height: 8px; border-radius: 4px; background: currentColor; opacity: 0.15; }
.sm-mock-cta { width: 50px; height: 18px; border-radius: 9px; background: currentColor; opacity: 0.2; margin-top: 4px; }

/* ── Mockup: E-commerce ── */
.sm-mock-ecomm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 100%; }
.sm-mock-prod { display: flex; flex-direction: column; gap: 4px; }
.sm-mock-prod-img { flex: 1; background: currentColor; opacity: 0.1; border-radius: 5px; min-height: 30px; }
.sm-mock-prod-info { display: flex; flex-direction: column; gap: 3px; }
.sm-mock-prod-line { height: 5px; border-radius: 3px; background: currentColor; opacity: 0.12; }
.sm-mock-prod-line:last-child { width: 60%; }

/* ── Mockup: Vetrina ── */
.sm-mock-vetrina { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 100%; }
.sm-mock-tile { background: currentColor; opacity: 0.1; border-radius: 5px; }
.sm-mock-tile:first-child { grid-column: 1 / -1; }

/* ── Mockup: Blog ── */
.sm-mock-blog { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.sm-mock-blog-img { height: 45%; background: currentColor; opacity: 0.1; border-radius: 5px; flex-shrink: 0; }
.sm-mock-blog .sm-mock-line { width: 100%; flex-shrink: 0; }

/* ── Mockup: Web App ── */
.sm-mock-app { display: flex; height: 100%; gap: 0; }
.sm-mock-sidebar { width: 30px; background: currentColor; opacity: 0.08; display: flex; flex-direction: column; gap: 6px; padding: 8px 0; align-items: center; flex-shrink: 0; border-radius: 0; }
.sm-mock-sb-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.2; }
.sm-mock-sb-active { opacity: 0.5; }
.sm-mock-app-main { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.sm-mock-app-bars { display: flex; align-items: flex-end; gap: 4px; flex: 1; }
.sm-mock-app-bar { flex: 1; background: currentColor; opacity: 0.12; border-radius: 3px 3px 0 0; }
.sm-mock-app-bar:nth-child(1) { height: 40%; }
.sm-mock-app-bar:nth-child(2) { height: 65%; }
.sm-mock-app-bar:nth-child(3) { height: 50%; }
.sm-mock-app-bar:nth-child(4) { height: 80%; }
.sm-mock-app-bar:nth-child(5) { height: 35%; }
.sm-mock-app-bar:nth-child(6) { height: 60%; }
.sm-mock-app-bar:nth-child(7) { height: 45%; }
.sm-mock-app-stats { display: flex; gap: 5px; }
.sm-mock-stat-box { flex: 1; height: 20px; background: currentColor; opacity: 0.08; border-radius: 4px; }

/* ── Mockup: Portfolio ── */
.sm-mock-folio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 100%; }
.sm-mock-folio-card { background: currentColor; opacity: 0.1; border-radius: 5px; }

/* Responsive */
@media (max-width: 1024px) {
    .sm-sty-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .sm-sty { padding: 56px 16px 72px; }
    .sm-sty-grid { grid-template-columns: 1fr; }
    .sm-sty-title {}
    .sm-sty-card { padding: 26px 22px 22px; }
    .sm-sty-body { height: 120px; }
}

/* ═══════════════════════════════════════════════════
   23 · SOCIAL TYPES
   ═══════════════════════════════════════════════════ */
.sm-soc {
    --sm-soc-accent: #c8102e;
    padding: 80px 24px 100px;
    max-width: 1160px;
    margin: 0 auto;
}

/* Header */
.sm-soc-header { text-align: center; margin-bottom: 56px; }
.sm-soc-badge {
    display: inline-block;
    background: rgba(200,16,46,0.08);
    color: var(--sm-soc-accent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 4px;
    margin-bottom: 18px;
}
.sm-soc-title {
    font-size: var(--sm-h2);
    font-weight: 500;
    color: #1a2744;
    line-height: 1.15;
    margin: 0 0 16px;
}
.sm-soc-title span {
    background: linear-gradient(135deg, var(--sm-soc-accent), #e8506a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sm-soc-subtitle {
    font-size: var(--sm-body);
    font-weight: 500;
    color: #6b7a90;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto;
}

/* Grid */
.sm-soc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Card base */
.sm-soc-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s ease;
    opacity: 0;
    transform: translateY(32px);
}
.sm-soc-card.sm-soc-visible {
    opacity: 1;
    transform: translateY(0);
}
.sm-soc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(26,39,68,0.12);
}

/* Card icon */
.sm-soc-card-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    opacity: 0.9;
}
.sm-soc-card-icon svg { width: 100%; height: 100%; }

/* Card text */
.sm-soc-card h3 {
    font-size: var(--sm-h3);
    font-weight: 500;
    margin: 0 0 10px;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}
.sm-soc-card-desc {
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 24px;
    opacity: 0.78;
    position: relative;
    z-index: 1;
    flex: 1;
}

/* Mockup container */
.sm-soc-mockup {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: auto;
}

/* ── Platform: Instagram ── */
.sm-soc-instagram { background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%); color: #fff; }
.sm-soc-instagram .sm-soc-mockup { background: #fff; color: #262626; }

/* ── Platform: Facebook ── */
.sm-soc-facebook { background: #1877f2; color: #fff; }
.sm-soc-facebook .sm-soc-mockup { background: #fff; color: #1c1e21; }

/* ── Platform: TikTok ── */
.sm-soc-tiktok { background: #010101; color: #fff; }
.sm-soc-tiktok .sm-soc-mockup { background: #161823; color: #fff; }

/* ── Platform: LinkedIn ── */
.sm-soc-linkedin { background: #0a66c2; color: #fff; }
.sm-soc-linkedin .sm-soc-mockup { background: #fff; color: #191919; }

/* ── Platform: YouTube ── */
.sm-soc-youtube { background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%); color: #fff; }
.sm-soc-youtube .sm-soc-mockup { background: #fff; color: #0f0f0f; }

/* ── Platform: Threads ── */
.sm-soc-threads { background: #000000; color: #fff; }
.sm-soc-threads .sm-soc-mockup { background: #101010; color: #f3f5f7; }

/* ── Shared mockup elements ── */
.sm-smk-avatar { width: 28px; height: 28px; border-radius: 50%; background: currentColor; opacity: 0.15; flex-shrink: 0; }
.sm-smk-avatar-sm { width: 22px; height: 22px; }
.sm-smk-line { height: 6px; border-radius: 3px; background: currentColor; opacity: 0.12; }

/* ── Instagram Mockup ── */
.sm-smk-ig { padding: 10px; }
.sm-smk-ig-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sm-smk-ig-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sm-smk-ig-dots { font-size: 10px; opacity: 0.3; letter-spacing: 2px; }
.sm-smk-ig-photo { height: 90px; background: linear-gradient(135deg, rgba(131,58,180,0.12), rgba(253,29,29,0.12), rgba(252,176,69,0.12)); border-radius: 6px; margin-bottom: 8px; }
.sm-smk-ig-actions { display: flex; gap: 10px; margin-bottom: 6px; }
.sm-smk-ig-actions svg { width: 16px; height: 16px; opacity: 0.5; }
.sm-smk-ig-likes { margin-top: 2px; }

/* ── Facebook Mockup ── */
.sm-smk-fb { padding: 10px; }
.sm-smk-fb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sm-smk-fb-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sm-smk-fb-img { height: 70px; background: rgba(24,119,242,0.08); border-radius: 6px; margin-bottom: 8px; }
.sm-smk-fb-reactions { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.sm-smk-fb-emoji { font-size: 11px; }
.sm-smk-fb-bar { display: flex; justify-content: space-around; }
.sm-smk-fb-bar span { font-size: 9px; opacity: 0.45; font-weight: 600; }

/* ── TikTok Mockup ── */
.sm-smk-tk { display: flex; position: relative; height: 160px; }
.sm-smk-tk-video { flex: 1; background: linear-gradient(180deg, rgba(37,244,238,0.08) 0%, rgba(254,44,85,0.08) 100%); border-radius: 6px; }
.sm-smk-tk-side { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sm-smk-tk-side svg { width: 18px; height: 18px; opacity: 0.5; }
.sm-smk-tk-disc { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.3; }
.sm-smk-tk-bottom { position: absolute; bottom: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; }

/* ── LinkedIn Mockup ── */
.sm-smk-li { padding: 10px; }
.sm-smk-li-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.sm-smk-li-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sm-smk-li-body { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.sm-smk-li-stats { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.sm-smk-li-bar { display: flex; justify-content: space-around; }
.sm-smk-li-bar span { font-size: 9px; opacity: 0.45; font-weight: 600; }

/* ── YouTube Mockup ── */
.sm-smk-yt { padding: 0; }
.sm-smk-yt-player { position: relative; height: 90px; background: #0f0f0f; display: flex; align-items: center; justify-content: center; border-radius: 6px 6px 0 0; }
.sm-smk-yt-play { width: 32px; height: 32px; background: rgba(255,0,0,0.85); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.sm-smk-yt-play svg { width: 14px; height: 14px; fill: #fff; }
.sm-smk-yt-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.15); }
.sm-smk-yt-bar-fill { width: 35%; height: 100%; background: #ff0000; border-radius: 0 2px 2px 0; }
.sm-smk-yt-info { padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 4px; }
.sm-smk-yt-channel { display: flex; align-items: center; gap: 8px; padding: 0 10px 10px; }
.sm-smk-yt-ch-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sm-smk-yt-sub { width: 50px; height: 18px; border-radius: 9px; background: #0f0f0f; opacity: 0.08; }

/* ── Threads Mockup ── */
.sm-smk-th { padding: 12px; }
.sm-smk-th-post { display: flex; gap: 10px; }
.sm-smk-th-content { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sm-smk-th-head { display: flex; align-items: center; gap: 6px; }
.sm-smk-th-actions { display: flex; gap: 12px; margin-top: 4px; }
.sm-smk-th-actions svg { opacity: 0.4; }
.sm-smk-th-sep { height: 1px; background: currentColor; opacity: 0.08; margin: 12px 0; }

/* Responsive */
@media (max-width: 1024px) {
    .sm-soc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .sm-soc { padding: 56px 16px 72px; }
    .sm-soc-grid { grid-template-columns: 1fr; }
    .sm-soc-card { padding: 26px 22px 22px; }
    .sm-soc-card-icon { width: 36px; height: 36px; margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════
   24 · SERVICE SHOWCASE (unified widget)
   ═══════════════════════════════════════════════════ */
.sm-srv {
    --sm-srv-accent: #c8102e;
    padding: 80px 24px 100px;
    max-width: 1160px;
    margin: 0 auto;
}

/* Header */
.sm-srv-header { text-align: center; margin-bottom: 56px; }
.sm-srv-badge {
    display: inline-block;
    background: var(--sm-srv-accent, #c8102e);
    color: #fff;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    padding: 5px 14px; border-radius: 6px;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px rgba(200,16,46,.35);
}
.sm-srv-title {
    font-size: var(--sm-h2); font-weight: 500;
    color: #1a2744; line-height: 1.15;
    margin: 0 0 16px;
}
.sm-srv-title span {
    background: linear-gradient(135deg, var(--sm-srv-accent), #e8506a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sm-srv-subtitle {
    font-size: var(--sm-body); font-weight: 500;
    color: #6b7a90; line-height: 1.7;
    max-width: 540px; margin: 0 auto;
}

/* Grid */
.sm-srv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Card */
.sm-srv-card {
    position: relative; overflow: hidden;
    border-radius: 18px; padding: 32px 28px 28px;
    display: flex; flex-direction: column;
    text-decoration: none;
    transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s ease;
    opacity: 0; transform: translateY(32px);
}
.sm-srv-card.sm-srv-visible { opacity: 1; transform: translateY(0); }
.sm-srv-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(26,39,68,0.12); }

.sm-srv-card-icon { width: 42px; height: 42px; margin-bottom: 18px; opacity: 0.9; flex-shrink: 0; overflow: hidden; }
.sm-srv-card-icon svg { width: 100%; height: 100%; display: block; }
.sm-srv-card h3 { font-size: var(--sm-h3); font-weight: 500; margin: 0 0 10px; line-height: 1.25; position: relative; z-index: 1; color: inherit; }
.sm-srv-card-desc { font-size: 14px; line-height: 1.65; margin: 0 0 24px; opacity: 0.78; position: relative; z-index: 1; flex: 1; color: inherit; }
.sm-srv-mockup { border-radius: 12px; overflow: hidden; position: relative; z-index: 1; margin-top: auto; }

/* ── WEBSITE VARIANTS (browser chrome) ── */
.sm-srv-websites .sm-srv-browser { border-radius: 10px; overflow: hidden; }
.sm-srv-websites .sm-srv-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; }
.sm-srv-websites .sm-srv-dot { width: 6px; height: 6px; border-radius: 50%; opacity: 0.4; }
.sm-srv-websites .sm-srv-body { height: 140px; padding: 10px; }

/* Website theme colors */
.sm-srv-v-landing   { background: #1a2744; color: #fff; }
.sm-srv-v-landing .sm-srv-bar   { background: #2a3a5e; } .sm-srv-v-landing .sm-srv-dot   { background: #fff; } .sm-srv-v-landing .sm-srv-body   { background: #111827; color: rgba(255,255,255,0.3); }
.sm-srv-v-ecommerce { background: linear-gradient(135deg, #c8102e, #e8506a); color: #fff; }
.sm-srv-v-ecommerce .sm-srv-bar { background: rgba(255,255,255,0.15); } .sm-srv-v-ecommerce .sm-srv-dot { background: #fff; } .sm-srv-v-ecommerce .sm-srv-body { background: rgba(0,0,0,0.2); color: rgba(255,255,255,0.3); }
.sm-srv-v-vetrina   { background: #f0f3f7; color: #1a2744; }
.sm-srv-v-vetrina .sm-srv-bar   { background: #dde3ea; } .sm-srv-v-vetrina .sm-srv-dot   { background: #1a2744; } .sm-srv-v-vetrina .sm-srv-body   { background: #fff; color: rgba(26,39,68,0.15); }
.sm-srv-v-blog      { background: #334155; color: #fff; }
.sm-srv-v-blog .sm-srv-bar      { background: #475569; } .sm-srv-v-blog .sm-srv-dot      { background: #fff; } .sm-srv-v-blog .sm-srv-body      { background: #1e293b; color: rgba(255,255,255,0.25); }
.sm-srv-v-webapp    { background: #1e40af; color: #fff; }
.sm-srv-v-webapp .sm-srv-bar    { background: #2563eb; } .sm-srv-v-webapp .sm-srv-dot    { background: #fff; } .sm-srv-v-webapp .sm-srv-body    { background: #172554; color: rgba(255,255,255,0.25); }
.sm-srv-v-portfolio { background: #065f46; color: #fff; }
.sm-srv-v-portfolio .sm-srv-bar { background: #047857; } .sm-srv-v-portfolio .sm-srv-dot { background: #fff; } .sm-srv-v-portfolio .sm-srv-body { background: #022c22; color: rgba(255,255,255,0.25); }

/* vetrina card text dark */
.sm-srv-v-vetrina h3 { color: #1a2744; }
.sm-srv-v-vetrina .sm-srv-card-desc { color: #4b5563; }

/* ── SOCIAL VARIANTS (reuse sm-smk-* mockups) ── */
.sm-srv-social .sm-srv-v-instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d 50%, #fcb045); color: #fff; }
.sm-srv-social .sm-srv-v-instagram .sm-srv-mockup { background: #fff; color: #262626; }
.sm-srv-social .sm-srv-v-facebook  { background: #1877f2; color: #fff; }
.sm-srv-social .sm-srv-v-facebook .sm-srv-mockup  { background: #fff; color: #1c1e21; }
.sm-srv-social .sm-srv-v-tiktok    { background: #010101; color: #fff; }
.sm-srv-social .sm-srv-v-tiktok .sm-srv-mockup    { background: #161823; color: #fff; }
.sm-srv-social .sm-srv-v-linkedin  { background: #0a66c2; color: #fff; }
.sm-srv-social .sm-srv-v-linkedin .sm-srv-mockup  { background: #fff; color: #191919; }
.sm-srv-social .sm-srv-v-youtube   { background: linear-gradient(135deg, #ff0000, #cc0000); color: #fff; }
.sm-srv-social .sm-srv-v-youtube .sm-srv-mockup   { background: #fff; color: #0f0f0f; }
.sm-srv-social .sm-srv-v-threads   { background: #000; color: #fff; }
.sm-srv-social .sm-srv-v-threads .sm-srv-mockup   { background: #101010; color: #f3f5f7; }

/* ── ADS VARIANTS ── */
.sm-srv-ads .sm-srv-v-google      { background: #fff; color: #202124; border: 1px solid #e0e0e0; }
.sm-srv-ads .sm-srv-v-google .sm-srv-mockup      { background: #f8f9fa; color: #202124; }
.sm-srv-ads .sm-srv-v-google .sm-srv-card-icon svg { color: #4285F4; }
.sm-srv-ads .sm-srv-v-meta        { background: linear-gradient(135deg, #0081FB, #5B51D8); color: #fff; }
.sm-srv-ads .sm-srv-v-meta .sm-srv-mockup        { background: #fff; color: #1c1e21; }
.sm-srv-ads .sm-srv-v-retargeting { background: #1a2744; color: #fff; }
.sm-srv-ads .sm-srv-v-retargeting .sm-srv-mockup { background: #111827; color: #fff; }
.sm-srv-ads .sm-srv-v-analytics   { background: #0f172a; color: #fff; }
.sm-srv-ads .sm-srv-v-analytics .sm-srv-mockup   { background: #1e293b; color: #94a3b8; }
.sm-srv-ads .sm-srv-v-email       { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
.sm-srv-ads .sm-srv-v-email .sm-srv-mockup       { background: #fff; color: #374151; }
.sm-srv-ads .sm-srv-v-display     { background: #065f46; color: #fff; }
.sm-srv-ads .sm-srv-v-display .sm-srv-mockup     { background: #022c22; color: #a7f3d0; }

/* Google card dark text */
.sm-srv-ads .sm-srv-v-google h3 { color: #202124; }
.sm-srv-ads .sm-srv-v-google .sm-srv-card-desc { color: #5f6368; }

/* ── VIDEO VARIANTS ── */
.sm-srv-video .sm-srv-v-reels     { background: linear-gradient(135deg, #833ab4, #fd1d1d 50%, #fcb045); color: #fff; }
.sm-srv-video .sm-srv-v-reels .sm-srv-mockup     { background: #161823; color: #fff; }
.sm-srv-video .sm-srv-v-corporate { background: #1a2744; color: #fff; }
.sm-srv-video .sm-srv-v-corporate .sm-srv-mockup { background: #111827; color: #fff; }
.sm-srv-video .sm-srv-v-tutorial  { background: #1e40af; color: #fff; }
.sm-srv-video .sm-srv-v-tutorial .sm-srv-mockup  { background: #172554; color: #93c5fd; }
.sm-srv-video .sm-srv-v-spot      { background: linear-gradient(135deg, #c8102e, #e8506a); color: #fff; }
.sm-srv-video .sm-srv-v-spot .sm-srv-mockup      { background: #1a1a2e; color: #e0e0e0; }
.sm-srv-video .sm-srv-v-drone     { background: #065f46; color: #fff; }
.sm-srv-video .sm-srv-v-drone .sm-srv-mockup     { background: #022c22; color: #a7f3d0; }
.sm-srv-video .sm-srv-v-motion    { background: #7c3aed; color: #fff; }
.sm-srv-video .sm-srv-v-motion .sm-srv-mockup    { background: #1e1b4b; color: #c4b5fd; }

/* ── AI VARIANTS ── */
.sm-srv-ai .sm-srv-v-chatbot      { background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; }
.sm-srv-ai .sm-srv-v-chatbot .sm-srv-mockup      { background: #fff; color: #374151; }
.sm-srv-ai .sm-srv-v-workflow     { background: #0f172a; color: #fff; }
.sm-srv-ai .sm-srv-v-workflow .sm-srv-mockup     { background: #1e293b; color: #94a3b8; }
.sm-srv-ai .sm-srv-v-leadgen      { background: linear-gradient(135deg, #059669, #10b981); color: #fff; }
.sm-srv-ai .sm-srv-v-leadgen .sm-srv-mockup      { background: #fff; color: #374151; }
.sm-srv-ai .sm-srv-v-knowledge    { background: #1a2744; color: #fff; }
.sm-srv-ai .sm-srv-v-knowledge .sm-srv-mockup    { background: #f8fafc; color: #374151; }
.sm-srv-ai .sm-srv-v-voice        { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
.sm-srv-ai .sm-srv-v-voice .sm-srv-mockup        { background: rgba(255,255,255,0.1); color: #fff; }
.sm-srv-ai .sm-srv-v-integration  { background: #334155; color: #fff; }
.sm-srv-ai .sm-srv-v-integration .sm-srv-mockup  { background: #1e293b; color: #e2e8f0; }

/* ═══════════════════════════════════════════════════
   24b · ADS MOCKUPS
   ═══════════════════════════════════════════════════ */
/* Google Ads */
.sm-smk-gad { padding: 10px; }
.sm-smk-gad-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 8px; background: #fff; border-radius: 20px; border: 1px solid #dfe1e5; }
.sm-smk-gad-btn { width: 22px; height: 22px; border-radius: 50%; background: #4285F4; flex-shrink: 0; }
.sm-smk-gad-result { padding: 8px; border-radius: 6px; margin-bottom: 6px; }
.sm-smk-gad-result .sm-smk-line { margin-bottom: 4px; }
.sm-smk-gad-sponsored { border-left: 3px solid #4285F4; background: rgba(66,133,244,0.04); }
.sm-smk-gad-label { display: inline-block; font-size: 8px; font-weight: 700; color: #4285F4; background: rgba(66,133,244,0.1); padding: 1px 6px; border-radius: 3px; margin-bottom: 4px; }

/* Meta Ads */
.sm-smk-meta { padding: 10px; }
.sm-smk-meta-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sm-smk-meta-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sm-smk-meta-img { height: 70px; background: linear-gradient(135deg, rgba(0,129,251,0.1), rgba(91,81,216,0.1)); border-radius: 6px; margin-bottom: 8px; }
.sm-smk-meta-cta { display: flex; align-items: center; justify-content: space-between; }
.sm-smk-meta-btn { width: 60px; height: 22px; border-radius: 4px; background: #0081FB; opacity: 0.3; }

/* Retargeting */
.sm-smk-retarget { padding: 16px 12px; display: flex; flex-direction: column; gap: 0; align-items: center; }
.sm-smk-retarget-step { display: flex; align-items: center; gap: 10px; width: 100%; }
.sm-smk-retarget-circle { width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.25; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.sm-smk-retarget-active { opacity: 0.7; background: currentColor; color: #fff; border-color: transparent; }
.sm-smk-retarget-active { position: relative; }
.sm-smk-retarget-line { width: 2px; height: 14px; background: currentColor; opacity: 0.12; margin-left: 12px; }

/* Analytics */
.sm-smk-analytics { padding: 10px; }
.sm-smk-analytics-chart { display: flex; align-items: flex-end; gap: 4px; height: 60px; margin-bottom: 10px; }
.sm-smk-analytics-bar { flex: 1; background: currentColor; opacity: 0.15; border-radius: 3px 3px 0 0; transition: opacity 0.3s; }
.sm-smk-analytics-bar:nth-child(even) { opacity: 0.25; }
.sm-smk-analytics-stats { display: flex; gap: 8px; }
.sm-smk-analytics-stat { flex: 1; padding: 6px; background: currentColor; opacity: 0.06; border-radius: 4px; display: flex; flex-direction: column; gap: 4px; }
.sm-smk-analytics-stat .sm-smk-line { opacity: 0.3; }

/* Email */
.sm-smk-email { border-radius: 6px; overflow: hidden; }
.sm-smk-email-header { padding: 8px; text-align: center; background: currentColor; opacity: 0.06; }
.sm-smk-email-hero { height: 40px; background: currentColor; opacity: 0.08; }
.sm-smk-email-body { padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.sm-smk-email-btn { width: 70px; height: 20px; border-radius: 4px; background: #7c3aed; opacity: 0.3; margin-top: 4px; }

/* Display Ads */
.sm-smk-display { padding: 10px; }
.sm-smk-display-banner { border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.sm-smk-display-img { height: 55px; background: currentColor; opacity: 0.1; }
.sm-smk-display-text { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.sm-smk-display-cta { width: 55px; height: 18px; border-radius: 3px; background: currentColor; opacity: 0.2; margin-top: 2px; }

/* ═══════════════════════════════════════════════════
   24c · VIDEO MOCKUPS
   ═══════════════════════════════════════════════════ */
/* Reels */
.sm-smk-reels { display: flex; position: relative; height: 150px; }
.sm-smk-reels-video { flex: 1; border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); }
.sm-smk-reels-side { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sm-smk-reels-side svg { width: 16px; height: 16px; opacity: 0.5; }
.sm-smk-reels-bottom { position: absolute; bottom: 10px; left: 10px; right: 40px; display: flex; flex-direction: column; gap: 6px; }
.sm-smk-reels-progress { height: 2px; background: rgba(255,255,255,0.2); border-radius: 1px; }
.sm-smk-reels-progress::after { content: ''; display: block; width: 40%; height: 100%; background: #fff; border-radius: 1px; }

/* Corporate */
.sm-smk-corp { padding: 0; }
.sm-smk-corp-video { height: 90px; display: flex; align-items: center; justify-content: center; border-radius: 6px 6px 0 0; background: rgba(255,255,255,0.05); }
.sm-smk-corp-play { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; }
.sm-smk-corp-play svg { width: 14px; height: 14px; fill: rgba(255,255,255,0.6); }
.sm-smk-corp-lower { padding: 10px; display: flex; flex-direction: column; gap: 4px; }

/* Tutorial */
.sm-smk-tut { position: relative; }
.sm-smk-tut-screen { height: 90px; border-radius: 6px; background: rgba(255,255,255,0.05); }
.sm-smk-tut-cam { position: absolute; bottom: 30px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: currentColor; opacity: 0.2; border: 2px solid rgba(255,255,255,0.3); }
.sm-smk-tut-timeline { padding: 8px 10px; }
.sm-smk-tut-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); }
.sm-smk-tut-fill { width: 55%; height: 100%; border-radius: 2px; background: #3b82f6; }

/* Spot */
.sm-smk-spot { padding: 0; }
.sm-smk-spot-frame { height: 80px; background: rgba(255,255,255,0.04); border-radius: 6px 6px 0 0; display: flex; align-items: center; justify-content: center; position: relative; }
.sm-smk-spot-bars { display: flex; align-items: center; gap: 2px; opacity: 0.4; }
.sm-smk-spot-bar { width: 3px; border-radius: 1px; background: currentColor; }
.sm-smk-spot-bar:nth-child(1) { height: 16px; }
.sm-smk-spot-bar:nth-child(2) { height: 24px; }
.sm-smk-spot-bar:nth-child(3) { height: 20px; }
.sm-smk-spot-timeline { display: flex; gap: 3px; padding: 8px; }
.sm-smk-spot-clip { flex: 1; height: 18px; border-radius: 3px; background: currentColor; opacity: 0.12; }
.sm-smk-spot-clip:nth-child(2) { opacity: 0.2; }

/* Drone */
.sm-smk-drone-view { height: 120px; border-radius: 6px; background: rgba(255,255,255,0.05); position: relative; overflow: hidden; }
.sm-smk-drone-grid { position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 25% 33.33%; }
.sm-smk-drone-hud { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; font-size: 8px; font-weight: 700; opacity: 0.5; }
.sm-smk-drone-hud span:last-child { color: #ef4444; }

/* Motion Graphics */
.sm-smk-mograph { padding: 0; }
.sm-smk-mograph-canvas { height: 80px; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,0.03); border-radius: 6px 6px 0 0; }
.sm-smk-mograph-circle { width: 28px; height: 28px; border-radius: 50%; background: currentColor; opacity: 0.25; }
.sm-smk-mograph-rect { width: 32px; height: 20px; border-radius: 4px; background: currentColor; opacity: 0.18; }
.sm-smk-mograph-tri { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 24px solid currentColor; opacity: 0.2; }
.sm-smk-mograph-timeline { padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.sm-smk-mograph-layer { height: 8px; border-radius: 2px; background: currentColor; opacity: 0.1; }
.sm-smk-mograph-layer:nth-child(1) { width: 70%; }
.sm-smk-mograph-layer:nth-child(2) { width: 55%; }
.sm-smk-mograph-layer:nth-child(3) { width: 80%; }

/* ═══════════════════════════════════════════════════
   24d · AI MOCKUPS
   ═══════════════════════════════════════════════════ */
/* Chatbot */
.sm-smk-chat { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sm-smk-chat-msg { display: flex; }
.sm-smk-chat-user { justify-content: flex-end; }
.sm-smk-chat-user .sm-smk-line { background: #3b82f6; opacity: 0.25; height: 20px; border-radius: 10px; padding: 0; }
.sm-smk-chat-bot { gap: 6px; align-items: flex-start; }
.sm-smk-chat-bot-avatar { width: 22px; height: 22px; border-radius: 50%; background: #6366f1; color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sm-smk-chat-bubble { background: rgba(0,0,0,0.04); border-radius: 0 10px 10px 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sm-smk-chat-input { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 20px; border: 1px solid rgba(0,0,0,0.1); margin-top: 4px; }
.sm-smk-chat-send { width: 20px; height: 20px; border-radius: 50%; background: #6366f1; opacity: 0.4; flex-shrink: 0; }

/* Workflow */
.sm-smk-wflow { padding: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.sm-smk-wflow-node { width: 32px; height: 32px; border-radius: 8px; background: currentColor; opacity: 0.15; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.sm-smk-wflow-start { opacity: 0.3; border-radius: 50%; }
.sm-smk-wflow-arrow { opacity: 0.2; font-size: 14px; }
.sm-smk-wflow-branch { display: flex; flex-direction: column; gap: 4px; }
.sm-smk-wflow-yes { background: #10b981; opacity: 0.25; font-size: 12px; }
.sm-smk-wflow-no { background: #ef4444; opacity: 0.2; font-size: 12px; }

/* Lead Generation */
.sm-smk-leadgen { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sm-smk-leadgen-field { display: flex; flex-direction: column; gap: 3px; }
.sm-smk-leadgen-input { height: 20px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.02); }
.sm-smk-leadgen-area { height: 32px; }
.sm-smk-leadgen-btn { height: 24px; border-radius: 6px; background: #059669; opacity: 0.3; margin-top: 2px; }

/* Knowledge Base */
.sm-smk-kb { padding: 10px; }
.sm-smk-kb-search { padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,0.04); margin-bottom: 10px; }
.sm-smk-kb-items { display: flex; flex-direction: column; gap: 6px; }
.sm-smk-kb-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,0.02); }
.sm-smk-kb-icon { font-size: 12px; flex-shrink: 0; }

/* Voice Assistant */
.sm-smk-voice { padding: 20px 10px; display: flex; flex-direction: column; align-items: center; }
.sm-smk-voice-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.sm-smk-voice-wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0.12; animation: sm-voice-pulse 2s infinite; }
.sm-smk-voice-wave:nth-child(2) { inset: -6px; animation-delay: 0.4s; }
.sm-smk-voice-wave:nth-child(3) { inset: -12px; animation-delay: 0.8s; }
.sm-smk-voice-mic { font-size: 20px; position: relative; z-index: 1; }

@keyframes sm-voice-pulse {
    0%, 100% { opacity: 0.12; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.05); }
}

/* Integration */
.sm-smk-integ { padding: 16px 10px; display: flex; flex-direction: column; gap: 12px; }
.sm-smk-integ-row { display: flex; align-items: center; gap: 6px; justify-content: center; }
.sm-smk-integ-app { width: 30px; height: 30px; border-radius: 8px; background: currentColor; opacity: 0.1; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.sm-smk-integ-hub { width: 28px; height: 28px; border-radius: 50%; background: currentColor; opacity: 0.2; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.sm-smk-integ-line { flex: 1; max-width: 30px; height: 2px; background: currentColor; opacity: 0.1; }

/* ═══════════════════════════════════════════════════
   24e · SERVICE SHOWCASE RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sm-srv-grid { grid-template-columns: repeat(2, 1fr); }
    .sm-srv-websites .sm-srv-body { height: 120px; }
}
@media (max-width: 768px) {
    .sm-srv { padding: 56px 16px 72px; }
    .sm-srv-grid { grid-template-columns: 1fr; }
    .sm-srv-card { padding: 26px 22px 22px; }
    .sm-srv-card-icon { width: 36px; height: 36px; margin-bottom: 14px; }
    .sm-srv-websites .sm-srv-body { height: 130px; }
}

/* ═══════════════════════════════════════════════════
   26 · INTERACTIVE BOARDS
   ═══════════════════════════════════════════════════ */
.sm-ibd {
    font-family: 'Inter','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background: #fff;
    padding: 80px 24px;
    color: #1a2744;
    max-width: 1100px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}
.sm-ibd-header { text-align: center; margin-bottom: 64px; }
.sm-ibd-badge {
    display: inline-block;
    background: #c8102e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 6px;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px rgba(200,16,46,.35);
}
.sm-ibd-title {
    font-size: var(--sm-h2);
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.1;
    color: #1a2744;
}
.sm-ibd-title span {
    background: linear-gradient(135deg, #c8102e, #e8384f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sm-ibd-subtitle {
    font-size: var(--sm-body);
    color: #6b7a90;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Pills */
.sm-ibd-pills {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}
.sm-ibd-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border: 2px solid #e8eaef;
    background: #fff;
    color: #6b7a90;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.sm-ibd-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.sm-ibd-pill:hover { border-color: #c8102e; color: #1a2744; }
.sm-ibd-pill.active {
    background: #1a2744;
    border-color: #1a2744;
    color: #fff;
    box-shadow: 0 4px 16px rgba(26,39,68,0.2);
}
.sm-ibd-pill.active .sm-ibd-pill-dot { opacity: 1; }

/* Panels */
.sm-ibd-panels { position: relative; overflow: hidden; }
.sm-ibd-panel { display: none; animation: smTgaSlide 0.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.sm-ibd-panel.active { display: block; }
@keyframes smTgaSlide {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Intro */
.sm-ibd-intro {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eef0f4;
}
.sm-ibd-icon-wrap {
    width: 72px; height: 72px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    position: relative;
}
.sm-ibd-icon-border {
    position: absolute;
    inset: -4px;
    border-radius: 19px;
    border: 2px dashed;
    opacity: 0.5;
    pointer-events: none;
}
.sm-ibd-pname {
    font-size: var(--sm-h3);
    font-weight: 500;
    color: #1a2744;
    margin: 0 0 10px;
    line-height: 1.2;
}
.sm-ibd-pdesc {
    font-size: var(--sm-body);
    color: #5a6578;
    line-height: 1.75;
    max-width: 620px;
    margin: 0;
}

/* Needs */
.sm-ibd-needs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: 40px;
}
.sm-ibd-need {
    padding: 28px 24px;
    position: relative;
    transition: all 0.3s ease;
}
.sm-ibd-need:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 15%; height: 70%;
    width: 1px;
    background: #eef0f4;
}
.sm-ibd-need:hover { transform: translateY(-3px); }
.sm-ibd-need-icon { font-size: 28px; display: block; margin-bottom: 14px; }
.sm-ibd-need-title {
    font-size: 15px;
    font-weight: 800;
    color: #1a2744;
    display: block;
    margin-bottom: 6px;
}
.sm-ibd-need-title i {
    display: block;
    width: 24px; height: 3px;
    border-radius: 3px;
    margin-top: 8px; margin-bottom: 4px;
    font-style: normal;
}
.sm-ibd-need-sub {
    font-size: 13.5px;
    color: #8c96a6;
    line-height: 1.55;
    display: block;
}

/* Stats */
.sm-ibd-stats {
    display: flex;
    gap: 0;
    background: #f8f9fb;
    border-radius: 15px;
    overflow: hidden;
}
.sm-ibd-stat {
    flex: 1;
    padding: 24px 20px;
    text-align: center;
    position: relative;
    transition: background 0.3s ease;
}
.sm-ibd-stat:hover { background: #f0f2f5; }
.sm-ibd-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; height: 60%;
    width: 1px;
    background: #e2e5ea;
}
.sm-ibd-stat-val {
    font-size: 26px;
    font-weight: 900;
    display: block;
    margin-bottom: 4px;
}
.sm-ibd-stat-lbl {
    font-size: 12px;
    color: #8c96a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* CTA */
.sm-ibd-cta {
    text-align: center;
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid #eef0f4;
}
.sm-ibd-cta-text {
    font-size: 15px;
    color: #8c96a6;
    margin: 0 0 20px;
}
.sm-ibd-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1a2744;
    color: #fff;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 4px 24px rgba(26,39,68,0.2);
}
.sm-ibd-btn:hover {
    background: #c8102e;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(200,16,46,0.35);
}
.sm-ibd-btn svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.sm-ibd-btn:hover svg { transform: translateX(4px); }

/* Responsive */
@media (max-width: 768px) {
    .sm-ibd { padding: 48px 16px; }
    .sm-ibd-title {}
    .sm-ibd-pills { gap: 6px; }
    .sm-ibd-pill { padding: 8px 14px; font-size: 12px; }
    .sm-ibd-intro { grid-template-columns: 1fr; gap: 16px; }
    .sm-ibd-icon-wrap { width: 56px; height: 56px; font-size: 26px; }
    .sm-ibd-pname {}
    .sm-ibd-needs { grid-template-columns: 1fr 1fr; }
    .sm-ibd-need:nth-child(2)::after { display: none; }
    .sm-ibd-need { padding: 20px 16px; }
    .sm-ibd-need:nth-child(1), .sm-ibd-need:nth-child(2) { border-bottom: 1px solid #eef0f4; }
    .sm-ibd-stats { flex-wrap: wrap; }
    .sm-ibd-stat { flex: 1 1 33%; min-width: 0; }
    .sm-ibd-stat::after { display: none; }
    .sm-ibd-stat-val { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════
   27 · TERRITORY MAP
   ═══════════════════════════════════════════════════ */
.sm-trr{--sm-trr-accent:#c8102e;padding:80px 24px;max-width:1200px;margin:0 auto;color:#1a2744}

/* Header */
.sm-trr .sm-trr-header{text-align:center;margin-bottom:56px}
.sm-trr .sm-trr-eyebrow{display:inline-block!important;background:var(--sm-trr-accent,#c8102e);color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:6px;margin-bottom:18px;box-shadow:0 4px 12px rgba(200,16,46,.35)}
.sm-trr .sm-trr-eyebrow::before,.sm-trr .sm-trr-eyebrow::after{display:none}
.sm-trr .sm-trr-title{font-size:var(--sm-h2);font-weight:500;line-height:1.15;margin-bottom:18px}
.sm-trr .sm-trr-title span{background:linear-gradient(135deg,var(--sm-trr-accent),#e8384f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sm-trr .sm-trr-intro{font-size:var(--sm-body);font-weight:500;color:#6b7a90;line-height:1.7;max-width:720px;margin:0 auto}

/* Layout */
.sm-trr .sm-trr-layout{display:grid!important;grid-template-columns:1fr 1fr!important;gap:32px;margin-bottom:56px;align-items:start}

/* Map */
.sm-trr .sm-trr-map-wrap{position:sticky;top:24px;border-radius:22px;overflow:hidden;border:1px solid #eef0f4;box-shadow:0 4px 24px rgba(26,39,68,.06);z-index:1;isolation:isolate}
.sm-trr .sm-trr-map{width:100%!important;height:520px;background:#e8eaef}
.sm-trr .sm-trr-legend{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px;padding:14px 16px;background:#f8f9fb;border-top:1px solid #eef0f4}
.sm-trr .sm-trr-legend-item{display:inline-flex!important;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#6b7a90;cursor:pointer;padding:4px 12px;border-radius:50px;border:1px solid transparent;transition:all .3s ease}
.sm-trr .sm-trr-legend-item:hover{border-color:#e2e5ea;background:#fff}
.sm-trr .sm-trr-legend-item.active{background:#fff;border-color:#dde0e6;color:#1a2744}
.sm-trr .sm-trr-legend-dot{display:inline-block!important;width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* Zones accordion */
.sm-trr .sm-trr-zones{display:flex!important;flex-direction:column;gap:12px}
.sm-trr .sm-trr-zone{border:2px solid #eef0f4;border-radius:18px;overflow:hidden;transition:all .4s cubic-bezier(.25,.46,.45,.94);cursor:pointer;position:relative}
.sm-trr .sm-trr-zone::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 4px 4px 0;background:var(--zclr);transform:scaleY(0);transition:transform .35s ease}
.sm-trr .sm-trr-zone:hover{border-color:#dde0e6;box-shadow:0 4px 16px rgba(26,39,68,.04)}
.sm-trr .sm-trr-zone.open{border-color:transparent;box-shadow:0 8px 32px rgba(26,39,68,.07)}
.sm-trr .sm-trr-zone.open::before{transform:scaleY(1)}

.sm-trr .sm-trr-zone-head{display:flex!important;align-items:center;gap:16px;padding:22px 24px}
.sm-trr .sm-trr-zone-icon{width:48px;height:48px;border-radius:14px;display:flex!important;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;transition:transform .3s ease}
.sm-trr .sm-trr-zone.open .sm-trr-zone-icon{transform:scale(1.08)}
.sm-trr .sm-trr-zone-info{flex:1;min-width:0}
.sm-trr .sm-trr-zone-name{font-size:18px;font-weight:700;color:#1a2744;margin-bottom:3px}
.sm-trr .sm-trr-zone-hint{font-size:13px;color:#8c96a6;line-height:1.4}
.sm-trr .sm-trr-zone-badge{font-size:11px;font-weight:700;padding:4px 12px;border-radius:50px;flex-shrink:0}
.sm-trr .sm-trr-zone-toggle{width:32px;height:32px;border-radius:50%;background:#f0f2f5;display:flex!important;align-items:center;justify-content:center;flex-shrink:0;transition:all .35s ease}
.sm-trr .sm-trr-zone-toggle svg{width:16px;height:16px;stroke:#8c96a6;transition:transform .35s ease,stroke .35s ease}
.sm-trr .sm-trr-zone.open .sm-trr-zone-toggle{background:var(--zclr)}
.sm-trr .sm-trr-zone.open .sm-trr-zone-toggle svg{transform:rotate(180deg);stroke:#fff}

.sm-trr .sm-trr-zone-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.25,.46,.45,.94),padding .4s ease;padding:0 24px}
.sm-trr .sm-trr-zone.open .sm-trr-zone-body{max-height:400px;padding:0 24px 24px}
.sm-trr .sm-trr-zone-desc{font-size:14px;color:#5a6578;line-height:1.7;margin-bottom:16px;border-top:1px solid #eef0f4;padding-top:16px}
.sm-trr .sm-trr-comuni-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8c96a6;margin-bottom:10px;display:block}
.sm-trr .sm-trr-comuni{display:flex!important;flex-wrap:wrap;gap:6px}
.sm-trr .sm-trr-comune{font-size:12px;font-weight:600;padding:5px 12px;border-radius:50px;background:#f5f6f8;color:#3d4a5e;transition:all .25s ease;cursor:default;display:inline-block}
.sm-trr .sm-trr-comune:hover{background:var(--zbg);color:var(--zclr);transform:translateY(-1px)}

/* Stats */
.sm-trr .sm-trr-stats{display:grid!important;grid-template-columns:repeat(4,1fr);background:#1a2744;border-radius:20px;overflow:hidden;margin-bottom:48px}
.sm-trr-stat{padding:28px 24px;text-align:center;position:relative;transition:background .3s}
.sm-trr-stat:hover{background:rgba(255,255,255,.03)}
.sm-trr-stat:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.08)}
.sm-trr-stat-icon{font-size:22px;display:block;margin-bottom:8px}
.sm-trr-stat-val{font-size:18px;font-weight:700;color:#fff;display:block;margin-bottom:4px}
.sm-trr-stat-val em{font-style:normal;color:var(--sm-trr-accent)}
.sm-trr-stat-lbl{font-size:11.5px;color:rgba(255,255,255,.4);line-height:1.4;display:block}

/* CTA */
.sm-trr-cta{text-align:center;background:#f8f9fb;border:1px solid #eef0f4;border-radius:20px;padding:40px}
.sm-trr-cta-text{font-size:15px;color:#5a6578;line-height:1.7;max-width:580px;margin:0 auto 24px}
.sm-trr-cta-text strong{color:#1a2744;font-weight:700}
.sm-trr-cta-btns{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.sm-trr-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:50px;font-size:14px;font-weight:700;text-decoration:none;transition:all .35s ease;cursor:pointer;border:none}
.sm-trr-btn--red{background:var(--sm-trr-accent);color:#fff;box-shadow:0 4px 20px rgba(26,39,68,.2)}
.sm-trr-btn--red:hover{filter:brightness(.88);transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,39,68,.3)}
.sm-trr-btn--outline{background:#fff;color:#1a2744;border:2px solid #e2e5ea}
.sm-trr-btn--outline:hover{border-color:#1a2744;transform:translateY(-2px)}
.sm-trr-btn svg{width:18px;height:18px;transition:transform .3s}
.sm-trr-btn:hover svg{transform:translateX(3px)}

/* Leaflet popup override */
.sm-trr .leaflet-popup-content-wrapper{border-radius:12px!important;box-shadow:0 8px 24px rgba(26,39,68,.12)!important}
.sm-trr .leaflet-popup-content{font-size:13px!important;margin:12px 16px!important}

/* Responsive */
@media(max-width:1024px){
    .sm-trr .sm-trr-layout{grid-template-columns:1fr!important;gap:24px}
    .sm-trr .sm-trr-map-wrap{position:static}
    .sm-trr .sm-trr-map{height:360px!important}
    .sm-trr .sm-trr-stats{grid-template-columns:1fr 1fr!important}
    .sm-trr .sm-trr-stat:not(:last-child)::after{display:none}
}
@media(max-width:768px){
    .sm-trr{padding:48px 16px}
    .sm-trr .sm-trr-map{height:300px!important}
    .sm-trr .sm-trr-zone-head{padding:16px 18px;gap:12px}
    .sm-trr .sm-trr-zone-icon{width:40px;height:40px;font-size:18px;border-radius:10px}
    .sm-trr .sm-trr-zone-name{font-size:15px}
    .sm-trr .sm-trr-zone-badge{display:none}
    .sm-trr .sm-trr-cta{padding:28px 20px}
    .sm-trr .sm-trr-cta-btns{flex-direction:column}
    .sm-trr .sm-trr-btn{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════
   28 · SERVICE ADVANTAGES (interactive)
   ═══════════════════════════════════════════════════ */
.sm-sadv{--sadv-accent:#c8102e;padding:80px 24px;max-width:1200px;margin:0 auto;color:#1a2744}

/* Entrance */
.sm-sadv .sm-sadv-header,
.sm-sadv .sm-sadv-layout{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.sm-sadv.sm-sadv-visible .sm-sadv-header{opacity:1;transform:none}
.sm-sadv.sm-sadv-visible .sm-sadv-layout{opacity:1;transform:none;transition-delay:.2s}

/* Header */
.sm-sadv .sm-sadv-header{text-align:center;margin-bottom:56px}
.sm-sadv .sm-sadv-tag{display:inline-block!important;background:var(--sadv-accent,#c8102e);color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:6px;margin-bottom:18px;box-shadow:0 4px 12px rgba(200,16,46,.35)}
.sm-sadv .sm-sadv-tag::before,.sm-sadv .sm-sadv-tag::after{content:'';width:24px;height:1px;background:var(--sadv-accent)}
.sm-sadv .sm-sadv-title{font-size:var(--sm-h2);font-weight:500;line-height:1.15;margin-bottom:18px}
.sm-sadv .sm-sadv-title span{background:linear-gradient(135deg,var(--sadv-accent),#e8384f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sm-sadv .sm-sadv-sub{font-size:var(--sm-body);font-weight:500;color:#6b7a90;line-height:1.7;max-width:720px;margin:0 auto}

/* Layout: split */
.sm-sadv .sm-sadv-layout{display:grid!important;grid-template-columns:1fr 1.2fr;gap:32px;align-items:start}

/* ── Left: numbered list ── */
.sm-sadv .sm-sadv-list{display:flex!important;flex-direction:column;gap:6px}

.sm-sadv .sm-sadv-item{display:flex!important;align-items:center;gap:14px;padding:16px 20px;border-radius:14px;cursor:pointer;border:2px solid transparent;transition:all .35s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}
.sm-sadv .sm-sadv-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sadv-accent);border-radius:0 3px 3px 0;transform:scaleY(0);transition:transform .35s ease}
.sm-sadv .sm-sadv-item:hover{background:#f8f9fb;border-color:#eef0f4}
.sm-sadv .sm-sadv-item.active{background:#fff;border-color:#eef0f4;box-shadow:0 4px 20px rgba(26,39,68,.06)}
.sm-sadv .sm-sadv-item.active::before{transform:scaleY(1)}

.sm-sadv .sm-sadv-item-num{font-size:13px;font-weight:800;color:#d0d5de;min-width:28px;transition:color .35s ease}
.sm-sadv .sm-sadv-item.active .sm-sadv-item-num{color:var(--sadv-accent)}

.sm-sadv .sm-sadv-item-icon{width:40px;height:40px;border-radius:12px;background:#f0f2f5;display:flex!important;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:all .35s ease}
.sm-sadv .sm-sadv-item.active .sm-sadv-item-icon{background:linear-gradient(135deg,var(--sadv-accent),#e8384f);transform:scale(1.05)}

.sm-sadv .sm-sadv-item-name{flex:1;font-size:18px;font-weight:700;color:#3d4a5e;transition:color .35s ease}
.sm-sadv .sm-sadv-item.active .sm-sadv-item-name{color:#1a2744;font-weight:700}

.sm-sadv .sm-sadv-item-arrow{width:24px;height:24px;flex-shrink:0;opacity:0;transform:translateX(-8px);transition:all .35s ease}
.sm-sadv .sm-sadv-item-arrow svg{width:16px;height:16px;stroke:#8c96a6}
.sm-sadv .sm-sadv-item.active .sm-sadv-item-arrow{opacity:1;transform:translateX(0)}
.sm-sadv .sm-sadv-item.active .sm-sadv-item-arrow svg{stroke:var(--sadv-accent)}

/* ── Right: detail panel ── */
.sm-sadv .sm-sadv-detail{position:relative;min-height:320px;background:#fff;border:2px solid #eef0f4;border-radius:22px;padding:48px 40px;overflow:hidden;box-shadow:0 8px 32px rgba(26,39,68,.05)}

.sm-sadv .sm-sadv-panel{position:absolute;inset:0;padding:48px 40px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .45s ease,transform .45s ease;display:flex;flex-direction:column;justify-content:center}
.sm-sadv .sm-sadv-panel.active{position:relative;opacity:1;transform:none;pointer-events:auto}

.sm-sadv .sm-sadv-detail-num{font-size:80px;font-weight:900;line-height:1;color:#f5f6f8;position:absolute;top:24px;right:32px;pointer-events:none;transition:color .4s ease}
.sm-sadv .sm-sadv-panel.active .sm-sadv-detail-num{color:#fde8eb}

.sm-sadv .sm-sadv-detail-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--sadv-accent),#e8384f);display:flex!important;align-items:center;justify-content:center;font-size:30px;margin-bottom:24px;box-shadow:0 8px 24px rgba(200,16,46,.2)}

.sm-sadv .sm-sadv-detail-title{font-size:24px;font-weight:700;color:#1a2744;margin-bottom:14px;position:relative;z-index:1}
.sm-sadv .sm-sadv-detail-desc{font-size:16px;color:#5a6578;line-height:1.8;position:relative;z-index:1}

/* Progress bar (fills during auto-cycle) */
.sm-sadv .sm-sadv-detail-bar{height:3px;background:#eef0f4;border-radius:3px;margin-top:28px;overflow:hidden}
.sm-sadv .sm-sadv-detail-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--sadv-accent),#e8384f);border-radius:3px;transition:width .1s linear}
.sm-sadv .sm-sadv-panel.active .sm-sadv-detail-bar-fill{animation:sadvBar 6s linear forwards}
@keyframes sadvBar{from{width:0}to{width:100%}}

/* ── Responsive ── */
@media(max-width:1024px){
    .sm-sadv .sm-sadv-layout{grid-template-columns:1fr!important}
    .sm-sadv .sm-sadv-list{flex-direction:row!important;flex-wrap:wrap;gap:8px}
    .sm-sadv .sm-sadv-item{flex:0 0 auto;padding:10px 16px;border-radius:50px;gap:10px;border:2px solid #eef0f4}
    .sm-sadv .sm-sadv-item::before{display:none}
    .sm-sadv .sm-sadv-item-num{display:none}
    .sm-sadv .sm-sadv-item-arrow{display:none}
    .sm-sadv .sm-sadv-item-icon{width:32px;height:32px;border-radius:10px;font-size:16px}
    .sm-sadv .sm-sadv-item-name{font-size:13px}
    .sm-sadv .sm-sadv-detail{min-height:280px}
}
@media(max-width:768px){
    .sm-sadv{padding:48px 16px}
    .sm-sadv .sm-sadv-list{gap:6px}
    .sm-sadv .sm-sadv-item{padding:8px 12px}
    .sm-sadv .sm-sadv-item-icon{width:28px;height:28px;font-size:14px;border-radius:8px}
    .sm-sadv .sm-sadv-item-name{font-size:12px}
    .sm-sadv .sm-sadv-detail{padding:32px 24px}
    .sm-sadv .sm-sadv-panel{padding:32px 24px}
    .sm-sadv .sm-sadv-detail-num{font-size:56px;top:16px;right:20px}
    .sm-sadv .sm-sadv-detail-icon{width:52px;height:52px;font-size:24px;border-radius:14px}
    .sm-sadv .sm-sadv-detail-title{font-size:20px}
    .sm-sadv .sm-sadv-detail-desc{font-size:14px;line-height:1.7}
}

/* ═══════════════════════════════════════════════════
   29 · SERVER (NAS/Storage — dark theme)
   ═══════════════════════════════════════════════════ */
.sm-srv--nas{--srv-accent:#c8102e;font-family:'DM Sans',sans-serif;background:#0a0f1c;color:#fff;position:relative;overflow:hidden;padding:0;width:100%}

/* Force Elementor wrappers to pass through full width */
.elementor-widget-starter_server,
.elementor-widget-starter_server > .elementor-widget-container{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
.elementor-widget-starter_server .elementor-widget-container{overflow:visible!important}
.e-con:has(.elementor-widget-starter_server){padding:0!important;max-width:100%!important;width:100%!important;--content-width:100%!important;--padding-inline:0px!important;--padding-block:0px!important}
.e-con:has(.elementor-widget-starter_server) > .e-con-inner{max-width:100%!important;width:100%!important;padding:0!important}

/* Hero */
.sm-srv--nas .sm-srv-hero{position:relative;padding:72px 24px 0;min-height:100vh;display:flex;flex-direction:column;align-items:center}
.sm-srv--nas .sm-srv-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
.sm-srv--nas .sm-srv-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.sm-srv--nas .sm-srv-glow--1{width:500px;height:500px;background:rgba(200,16,46,.05);top:-10%;left:50%;transform:translateX(-50%)}
.sm-srv--nas .sm-srv-glow--2{width:300px;height:300px;background:rgba(26,39,68,.2);bottom:10%;right:10%}

/* Header */
.sm-srv--nas .sm-srv-header{position:relative;z-index:2;text-align:center;margin-bottom:48px}
.sm-srv--nas .sm-srv-badge{display:inline-block!important;background:var(--srv-accent,#c8102e);color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:6px;margin-bottom:18px;box-shadow:0 4px 12px rgba(200,16,46,.35)}
.sm-srv--nas .sm-srv-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--srv-accent);box-shadow:0 0 8px rgba(200,16,46,.6);animation:smSrvBdot 2s ease infinite}
@keyframes smSrvBdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
.sm-srv--nas .sm-srv-title{font-size:clamp(30px,4.5vw,46px);font-weight:500;line-height:1.06;letter-spacing:-2px;margin-bottom:16px;color:#fff}
.sm-srv--nas .sm-srv-title em{font-style:normal;color:var(--srv-accent)}
.sm-srv--nas .sm-srv-sub{font-size:20px;color:rgba(255,255,255,.3);line-height:1.7;max-width:560px;margin:0 auto}

/* NAS container */
.sm-srv--nas .sm-srv-server-area{position:relative;z-index:2;width:100%;max-width:920px;margin:0 auto}
.sm-srv--nas .sm-srv-nas{position:relative;background:linear-gradient(170deg,#12192c 0%,#0e1525 40%,#0b1120 100%);border:1px solid rgba(255,255,255,.06);border-radius:24px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 -1px 0 rgba(0,0,0,.3) inset,0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02)}

/* Top bar */
.sm-srv--nas .sm-srv-bar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.01)}
.sm-srv--nas .sm-srv-bar-id{display:flex;align-items:center;gap:10px}
.sm-srv--nas .sm-srv-bar-logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#c8102e,#8b0a1e);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;box-shadow:0 2px 8px rgba(200,16,46,.3)}
.sm-srv--nas .sm-srv-bar-name{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:rgba(255,255,255,.3);letter-spacing:1px}
.sm-srv--nas .sm-srv-bar-ind{display:flex;align-items:center;gap:16px}
.sm-srv--nas .sm-srv-ind{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.sm-srv--nas .sm-srv-ind-dot{width:6px;height:6px;border-radius:50%}
.sm-srv--nas .sm-srv-ind--ok .sm-srv-ind-dot{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.5);animation:smSrvBdot 2s ease infinite}
.sm-srv--nas .sm-srv-ind--ok{color:rgba(34,197,94,.7)}
.sm-srv--nas .sm-srv-ind--raid .sm-srv-ind-dot{background:var(--srv-accent);box-shadow:0 0 6px rgba(200,16,46,.4)}
.sm-srv--nas .sm-srv-ind--raid{color:rgba(200,16,46,.6)}

/* Body grid */
.sm-srv--nas .sm-srv-body{display:grid;grid-template-columns:1fr 320px;min-height:400px}

/* Drives */
.sm-srv--nas .sm-srv-drives{padding:24px 28px;border-right:1px solid rgba(255,255,255,.03)}
.sm-srv--nas .sm-srv-section-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.12);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.sm-srv--nas .sm-srv-section-lbl::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.03)}

/* Bay */
.sm-srv--nas .sm-srv-bay{display:flex!important;align-items:stretch;gap:0;margin-bottom:10px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.015);cursor:pointer;transition:all .35s cubic-bezier(.25,.46,.45,.94);position:relative}
.sm-srv--nas .sm-srv-bay::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(200,16,46,.04),transparent);opacity:0;transition:opacity .3s;pointer-events:none}
.sm-srv--nas .sm-srv-bay:hover{border-color:rgba(200,16,46,.15);transform:translateX(3px)}
.sm-srv--nas .sm-srv-bay:hover::after{opacity:1}
.sm-srv--nas .sm-srv-bay.active{border-color:rgba(200,16,46,.25);background:rgba(200,16,46,.03)}
.sm-srv--nas .sm-srv-bay.active::after{opacity:1}

.sm-srv--nas .sm-srv-bay-leds{width:6px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 6px 0 8px}
.sm-srv--nas .sm-srv-led{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.06)}
.sm-srv--nas .sm-srv-led--pwr{background:#22c55e;box-shadow:0 0 4px rgba(34,197,94,.4)}
.sm-srv--nas .sm-srv-led--io{animation:smSrvIO .25s ease infinite alternate}
@keyframes smSrvIO{0%{background:#22c55e;box-shadow:0 0 4px rgba(34,197,94,.4)}100%{background:#c8102e;box-shadow:0 0 5px rgba(200,16,46,.5)}}
.sm-srv--nas .sm-srv-led--warn{background:#f59e0b;box-shadow:0 0 4px rgba(245,158,11,.4);animation:none}

.sm-srv--nas .sm-srv-bay-body{flex:1;padding:14px 16px 14px 10px;display:flex;flex-direction:column;gap:8px}
.sm-srv--nas .sm-srv-bay-top{display:flex;align-items:center;justify-content:space-between}
.sm-srv--nas .sm-srv-bay-id{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;color:rgba(255,255,255,.25);letter-spacing:1px}
.sm-srv--nas .sm-srv-bay-type{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.15)}
.sm-srv--nas .sm-srv-bay-bar{height:6px;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden;width:100%}
.sm-srv--nas .sm-srv-bay-fill{height:100%;border-radius:3px;width:0%;transition:width 1.5s cubic-bezier(.25,.46,.45,.94)}
.sm-srv--nas .sm-srv-bay-btm{display:flex;justify-content:space-between;align-items:center}
.sm-srv--nas .sm-srv-bay-cap{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.15)}
.sm-srv--nas .sm-srv-bay-pct{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;color:rgba(255,255,255,.45)}
.sm-srv--nas .sm-srv-bay.active .sm-srv-bay-pct{color:var(--srv-accent)}

/* Drawer */
.sm-srv--nas .sm-srv-drawer{overflow:hidden;max-height:0;transition:max-height .4s ease;margin:-4px 0 10px}
.sm-srv--nas .sm-srv-drawer.open{max-height:200px}
.sm-srv--nas .sm-srv-drawer-inner{background:rgba(200,16,46,.03);border:1px solid rgba(200,16,46,.08);border-radius:12px;padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.sm-srv--nas .sm-srv-dw-item{display:flex;justify-content:space-between;align-items:center}
.sm-srv--nas .sm-srv-dw-k{font-size:13px;color:rgba(255,255,255,.25)}
.sm-srv--nas .sm-srv-dw-v{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:rgba(255,255,255,.5)}
.sm-srv--nas .sm-srv-dw-v em{font-style:normal;color:var(--srv-accent)}

/* Dashboard */
.sm-srv--nas .sm-srv-dash{padding:24px;display:flex;flex-direction:column;gap:20px}

/* Ring */
.sm-srv--nas .sm-srv-ring-wrap{display:flex;align-items:center;gap:20px;padding:20px;background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);border-radius:16px}
.sm-srv--nas .sm-srv-ring-svg{width:90px;height:90px;flex-shrink:0;transform:rotate(-90deg)}
.sm-srv--nas .sm-srv-ring-bg{fill:none;stroke:rgba(255,255,255,.04);stroke-width:6}
.sm-srv--nas .sm-srv-ring-fill{fill:none;stroke:var(--srv-accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:251.2;stroke-dashoffset:251.2;transition:stroke-dashoffset .3s linear;filter:drop-shadow(0 0 6px rgba(200,16,46,.4))}
.sm-srv--nas .sm-srv-ring-pct{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:rgba(255,255,255,.5);text-anchor:middle;dominant-baseline:central;transform:rotate(90deg);transform-origin:center}
.sm-srv--nas .sm-srv-ring-info{flex:1}
.sm-srv--nas .sm-srv-ring-title{font-size:15px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:6px}
.sm-srv--nas .sm-srv-ring-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(255,255,255,.2);line-height:1.8}
.sm-srv--nas .sm-srv-ring-meta em{font-style:normal;color:rgba(255,255,255,.4)}

/* Gauges */
.sm-srv--nas .sm-srv-gauges{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sm-srv--nas .sm-srv-gauge{padding:14px;border-radius:12px;background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);text-align:center}
.sm-srv--nas .sm-srv-gauge-lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.12);margin-bottom:6px}
.sm-srv--nas .sm-srv-gauge-val{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:700;color:rgba(255,255,255,.5)}
.sm-srv--nas .sm-srv-gauge-val em{font-style:normal;color:var(--srv-accent)}
.sm-srv--nas .sm-srv-gauge-unit{font-size:12px;color:rgba(255,255,255,.15);font-weight:400}

/* Log */
.sm-srv--nas .sm-srv-log{flex:1;min-height:0;overflow:hidden}
.sm-srv--nas .sm-srv-log-list{display:flex;flex-direction:column;gap:3px}
.sm-srv--nas .sm-srv-log-entry{display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.15);padding:4px 0;animation:smSrvLogSlide .3s ease}
@keyframes smSrvLogSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sm-srv--nas .sm-srv-log-time{color:rgba(255,255,255,.08);flex-shrink:0;width:52px}
.sm-srv--nas .sm-srv-log-tag{font-size:7px;font-weight:700;padding:2px 6px;border-radius:3px;flex-shrink:0;text-transform:uppercase;letter-spacing:.5px}
.sm-srv--nas .sm-srv-log-tag--ok{background:rgba(34,197,94,.08);color:#22c55e}
.sm-srv--nas .sm-srv-log-tag--sync{background:rgba(200,16,46,.08);color:var(--srv-accent)}
.sm-srv--nas .sm-srv-log-tag--warn{background:rgba(245,158,11,.08);color:#f59e0b}
.sm-srv--nas .sm-srv-log-tag--info{background:rgba(26,39,68,.3);color:rgba(255,255,255,.25)}
.sm-srv--nas .sm-srv-log-msg{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Footer */
.sm-srv--nas .sm-srv-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-top:1px solid rgba(255,255,255,.03);background:rgba(0,0,0,.15)}
.sm-srv--nas .sm-srv-footer-left{display:flex;align-items:center;gap:20px}
.sm-srv--nas .sm-srv-footer-stat{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.12);display:flex;align-items:center;gap:6px}
.sm-srv--nas .sm-srv-footer-stat em{font-style:normal;color:rgba(255,255,255,.25)}
.sm-srv--nas .sm-srv-footer-cta{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;color:var(--srv-accent);text-decoration:none;display:flex;align-items:center;gap:6px;transition:gap .3s}
.sm-srv--nas .sm-srv-footer-cta:hover{gap:10px}
.sm-srv--nas .sm-srv-footer-cta svg{width:14px;height:14px;transition:transform .3s}
.sm-srv--nas .sm-srv-footer-cta:hover svg{transform:translateX(3px)}

/* CTA */
.sm-srv--nas .sm-srv-cta{position:relative;z-index:2;text-align:center;padding:56px 24px 72px}
.sm-srv--nas .sm-srv-cta-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 36px;border-radius:60px;font-size:17px;font-weight:700;font-family:inherit;text-decoration:none;color:#fff;border:none;cursor:pointer;background:var(--srv-accent);box-shadow:0 4px 30px rgba(200,16,46,.3);transition:all .35s ease}
.sm-srv--nas .sm-srv-cta-btn:hover{transform:translateY(-3px);box-shadow:0 10px 40px rgba(200,16,46,.4);background:#a80d26}
.sm-srv--nas .sm-srv-cta-btn svg{width:20px;height:20px;transition:transform .3s}
.sm-srv--nas .sm-srv-cta-btn:hover svg{transform:translateX(4px)}
.sm-srv--nas .sm-srv-cta-hint{font-size:14px;color:rgba(255,255,255,.15);margin-top:14px}

/* Responsive */
@media(max-width:960px){
    .sm-srv--nas .sm-srv-hero{padding:48px 12px 0}
    .sm-srv--nas .sm-srv-title{font-size:30px!important;letter-spacing:-1px}
    .sm-srv--nas .sm-srv-body{grid-template-columns:1fr!important;min-height:auto}
    .sm-srv--nas .sm-srv-dash{border-top:1px solid rgba(255,255,255,.03)}
    .sm-srv--nas .sm-srv-drives{border-right:none}
    .sm-srv--nas .sm-srv-ring-wrap{flex-direction:column;text-align:center}
    .sm-srv--nas .sm-srv-footer-left{flex-wrap:wrap;gap:10px}
    .sm-srv--nas .sm-srv-cta-btn{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════
   30 · CONSULENZA IT (infra map)
   ═══════════════════════════════════════════════════ */
.sm-cit{--cit-accent:#c8102e;font-family:'DM Sans',sans-serif;background:#fff;color:#1a2744;overflow:hidden}

/* Header */
.sm-cit .sm-cit-head{text-align:center;padding:64px 24px 16px;position:relative;z-index:2}
.sm-cit .sm-cit-badge{display:inline-block!important;background:var(--cit-accent,#c8102e);color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:6px;margin-bottom:18px;box-shadow:0 4px 12px rgba(200,16,46,.35)}
.sm-cit .sm-cit-badge-dot{width:6px!important;height:6px!important;border-radius:50%;background:var(--cit-accent);box-shadow:0 0 8px rgba(200,16,46,.4);animation:smCitPulse 2s ease infinite}
@keyframes smCitPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
.sm-cit .sm-cit-title{font-size:clamp(30px,4.5vw,46px);font-weight:500;line-height:1.08;letter-spacing:-2px;margin-bottom:16px}
.sm-cit .sm-cit-title em{font-style:normal;color:var(--cit-accent)}
.sm-cit .sm-cit-sub{font-size:20px;color:#7a8599;line-height:1.75;max-width:620px;margin:0 auto}

/* Map section */
.sm-cit .sm-cit-map-section{position:relative;padding:24px 24px 0}
.sm-cit .sm-cit-map-wrap{max-width:1100px!important;margin:0 auto;position:relative;background:#fafbfc;border:1px solid #eef0f4;border-radius:24px;overflow:hidden;box-shadow:0 8px 40px rgba(26,39,68,.04)}

/* Toolbar */
.sm-cit .sm-cit-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 24px!important;border-bottom:1px solid #eef0f4;background:#fff!important}
.sm-cit .sm-cit-toolbar-left{display:flex!important;align-items:center!important;gap:12px}
.sm-cit .sm-cit-toolbar-logo{width:28px!important;height:28px!important;border-radius:8px;background:linear-gradient(135deg,#c8102e,#a80d26);display:flex!important;align-items:center!important;justify-content:center!important;font-size:13px;font-weight:900;color:#fff;box-shadow:0 2px 8px rgba(200,16,46,.2)}
.sm-cit .sm-cit-toolbar-title{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:#8c96a6;letter-spacing:.5px}
.sm-cit .sm-cit-toolbar-right{display:flex!important;align-items:center!important;gap:16px}
.sm-cit .sm-cit-tstat{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;display:flex!important;align-items:center!important;gap:5px}
.sm-cit .sm-cit-tstat em{font-style:normal}
.sm-cit .sm-cit-tstat--ok{color:#22c55e}
.sm-cit .sm-cit-tstat--warn{color:#f59e0b}
.sm-cit .sm-cit-dot-ok{width:5px!important;height:5px!important;border-radius:50%;background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,.4);animation:smCitPulse 2s ease infinite}
.sm-cit .sm-cit-dot-warn{width:5px!important;height:5px!important;border-radius:50%;background:#f59e0b;box-shadow:0 0 5px rgba(245,158,11,.4)}

/* Canvas area */
.sm-cit .sm-cit-canvas-area{position:relative!important;height:740px!important;overflow:hidden}
.sm-cit .sm-cit-canvas{position:absolute!important;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}

/* Nodes */
.sm-cit .sm-cit-node{position:absolute!important;z-index:10;display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px;cursor:pointer;transition:transform .25s ease}
.sm-cit .sm-cit-node:hover{transform:scale(1.06) translateY(-2px)}
.sm-cit .sm-cit-node.active .sm-cit-node-box{border-color:rgba(200,16,46,.3);box-shadow:0 4px 20px rgba(200,16,46,.08)}
.sm-cit .sm-cit-node-box{width:64px!important;height:64px!important;border-radius:16px;background:#fff;border:2px solid #e8eaef;display:flex!important;align-items:center!important;justify-content:center!important;font-size:28px;position:relative;box-shadow:0 2px 8px rgba(26,39,68,.04);transition:all .3s ease}
.sm-cit .sm-cit-node-status{position:absolute!important;top:-3px;right:-3px;width:12px!important;height:12px!important;border-radius:50%;border:2px solid #fff}
.sm-cit .sm-cit-ns--ok{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.3)}
.sm-cit .sm-cit-ns--warn{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.3)}
.sm-cit .sm-cit-ns--off{background:#94a3b8}
.sm-cit .sm-cit-node-label{font-size:12px;font-weight:700;color:#5a6578;white-space:nowrap;transition:color .3s;text-align:center;max-width:80px;line-height:1.3}
.sm-cit .sm-cit-node.active .sm-cit-node-label{color:var(--cit-accent)}
.sm-cit .sm-cit-node-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#a0aab8;white-space:nowrap;margin-top:-3px}

/* Detail panel */
.sm-cit .sm-cit-panel{position:absolute!important;top:0;right:0;bottom:0;width:340px;background:#fff;border-left:1px solid #eef0f4;z-index:20;transform:translateX(100%);transition:transform .4s cubic-bezier(.25,.46,.45,.94);overflow-y:auto;box-shadow:-8px 0 30px rgba(26,39,68,.04)}
.sm-cit .sm-cit-panel.open{transform:translateX(0)}
.sm-cit .sm-cit-panel-close{position:absolute!important;top:16px;right:16px;width:28px;height:28px;border-radius:50%;background:#f5f6f8;border:none;cursor:pointer;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px;color:#8c96a6;transition:all .2s;z-index:2}
.sm-cit .sm-cit-panel-close:hover{background:#ebedf0;color:#1a2744}
.sm-cit .sm-cit-panel-header{padding:24px 24px 0}
.sm-cit .sm-cit-panel-icon{width:56px!important;height:56px!important;border-radius:16px;background:#f8f9fb;border:1px solid #eef0f4;display:flex!important;align-items:center!important;justify-content:center!important;font-size:28px;margin-bottom:14px}
.sm-cit .sm-cit-panel-name{font-size:22px;font-weight:800;color:#1a2744;margin-bottom:4px}
.sm-cit .sm-cit-panel-type{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#a0aab8;letter-spacing:.5px;margin-bottom:16px}
.sm-cit .sm-cit-panel-stats{padding:0 24px;margin-bottom:20px}
.sm-cit .sm-cit-panel-stat-row{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:10px 0;border-bottom:1px solid #f5f6f8}
.sm-cit .sm-cit-psk{font-size:14px;color:#8c96a6}
.sm-cit .sm-cit-psv{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:#1a2744}
.sm-cit .sm-cit-psv em{font-style:normal;color:var(--cit-accent)}
.sm-cit .sm-cit-ok{color:#22c55e}
.sm-cit .sm-cit-warn{color:#f59e0b}
.sm-cit .sm-cit-panel-desc{padding:0 24px;margin-bottom:20px;font-size:17px;color:#7a8599;line-height:1.7}
.sm-cit .sm-cit-panel-managed{margin:0 24px 24px;padding:14px 16px;background:rgba(200,16,46,.03);border:1px solid rgba(200,16,46,.06);border-radius:12px;display:flex!important;align-items:center!important;gap:10px}
.sm-cit .sm-cit-panel-managed-logo{width:28px!important;height:28px!important;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,#c8102e,#a80d26);display:flex!important;align-items:center!important;justify-content:center!important;font-size:12px;font-weight:900;color:#fff}
.sm-cit .sm-cit-panel-managed-text{font-size:13px;color:#5a6578;line-height:1.5}
.sm-cit .sm-cit-panel-managed-text strong{color:var(--cit-accent);font-weight:700}
.sm-cit .sm-cit-panel-tags{padding:0 24px 24px;display:flex!important;flex-wrap:wrap;gap:5px}
.sm-cit .sm-cit-panel-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:#f5f6f8;color:#5a6578}

/* Bottom */
.sm-cit .sm-cit-bottom{max-width:1100px;margin:0 auto;padding:48px 24px 56px}
.sm-cit .sm-cit-btitle{font-size:clamp(24px,3vw,30px);font-weight:500;text-align:center;margin-bottom:12px;letter-spacing:-1px}
.sm-cit .sm-cit-btitle em{font-style:normal;color:var(--cit-accent)}
.sm-cit .sm-cit-bsub{font-size:18px;color:#8c96a6;text-align:center;margin-bottom:40px}
.sm-cit .sm-cit-benefits{display:grid!important;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:48px}
.sm-cit .sm-cit-ben{padding:24px 20px;border-radius:16px;background:#f8f9fb;border:1px solid #eef0f4;text-align:center;transition:all .3s}
.sm-cit .sm-cit-ben:hover{border-color:rgba(200,16,46,.12);transform:translateY(-3px);box-shadow:0 8px 24px rgba(26,39,68,.04)}
.sm-cit .sm-cit-ben-icon{font-size:30px;margin-bottom:10px;display:block}
.sm-cit .sm-cit-ben-num{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:700;color:var(--cit-accent);margin-bottom:4px}
.sm-cit .sm-cit-ben-label{font-size:15px;font-weight:600;color:#1a2744;margin-bottom:4px}
.sm-cit .sm-cit-ben-desc{font-size:15px;color:#8c96a6;line-height:1.5}

/* CTA bar */
.sm-cit .sm-cit-cta-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:32px 36px;border-radius:20px;background:#1a2744;box-shadow:0 8px 32px rgba(26,39,68,.12)}
.sm-cit .sm-cit-cta-text{color:rgba(255,255,255,.55);font-size:19px;line-height:1.65;max-width:520px}
.sm-cit .sm-cit-cta-text strong{color:#fff}
.sm-cit .sm-cit-cta-btn{display:inline-flex!important;align-items:center!important;gap:10px;padding:14px 28px;border-radius:50px;font-size:18px;font-weight:700;font-family:inherit;text-decoration:none;color:#fff;border:none;cursor:pointer;background:var(--cit-accent);box-shadow:0 4px 20px rgba(200,16,46,.3);transition:all .35s ease;flex-shrink:0}
.sm-cit .sm-cit-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,16,46,.4);background:#a80d26}
.sm-cit .sm-cit-cta-btn svg{width:18px;height:18px;transition:transform .3s}
.sm-cit .sm-cit-cta-btn:hover svg{transform:translateX(4px)}

/* Responsive */
@media(max-width:960px){
    .sm-cit .sm-cit-head{padding:48px 16px 12px}
    .sm-cit .sm-cit-title{font-size:30px!important;letter-spacing:-1px}
    .sm-cit .sm-cit-canvas-area{height:auto!important;min-height:600px}
    .sm-cit .sm-cit-map-wrap{padding:0 8px}
    .sm-cit .sm-cit-panel{width:100%;border-left:none;border-top:1px solid #eef0f4}
    .sm-cit .sm-cit-benefits{grid-template-columns:1fr 1fr!important}
    .sm-cit .sm-cit-btitle{font-size:22px!important}
    .sm-cit .sm-cit-cta-bar{flex-direction:column!important;gap:20px;text-align:center;padding:28px 24px}
    .sm-cit .sm-cit-cta-btn{width:100%;justify-content:center!important}
    .sm-cit .sm-cit-toolbar-right{display:none}
}

/* ═══════════════════════════════════════════════════
   31 · NETWORK INFRA
   ═══════════════════════════════════════════════════ */
.sm-net{--net-accent:#c8102e;font-family:'DM Sans',sans-serif;background:#fff;color:#1a2744;overflow:hidden}
.sm-net .sm-net-hero{position:relative;padding:72px 24px 56px;background:linear-gradient(180deg,#f8f9fb 0%,#fff 60%);overflow:hidden}
.sm-net .sm-net-bgcanvas{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.sm-net .sm-net-hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.sm-net .sm-net-badge{display:inline-block!important;background:var(--net-accent,#c8102e);color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:6px;margin-bottom:18px;box-shadow:0 4px 12px rgba(200,16,46,.35)}
.sm-net .sm-net-badge-dot{width:6px!important;height:6px!important;border-radius:50%;background:var(--net-accent);box-shadow:0 0 8px rgba(200,16,46,.4);animation:smNetPls 2s ease infinite}
@keyframes smNetPls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
.sm-net .sm-net-hero-grid{display:grid!important;grid-template-columns:1fr 420px!important;gap:56px;align-items:center!important}
.sm-net .sm-net-title{font-size:clamp(30px,4.5vw,46px);font-weight:500;line-height:1.06;letter-spacing:-2px;margin-bottom:18px}
.sm-net .sm-net-title em{font-style:normal;color:var(--net-accent)}
.sm-net .sm-net-desc{font-size:20px;color:#7a8599;line-height:1.75;margin-bottom:32px;max-width:500px}
.sm-net .sm-net-live{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px}
.sm-net .sm-net-live-card{padding:18px!important;border-radius:16px;background:#fff;border:1px solid #eef0f4;box-shadow:0 2px 8px rgba(26,39,68,.02);position:relative;overflow:hidden}
.sm-net .sm-net-live-card::before{content:'';position:absolute!important;left:0;top:0;width:3px;height:100%;border-radius:0 3px 3px 0;background:var(--net-accent);transform:scaleY(0);transition:transform .3s}
.sm-net .sm-net-live-card:hover::before{transform:scaleY(1)}
.sm-net .sm-net-live-label{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#bfc6d0;margin-bottom:6px}
.sm-net .sm-net-live-val{font-family:'IBM Plex Mono',monospace;font-size:28px;font-weight:700;color:#1a2744}
.sm-net .sm-net-live-val em{font-style:normal;color:var(--net-accent)}
.sm-net .sm-net-live-unit{font-size:13px;color:#8c96a6;font-weight:400}
.sm-net .sm-net-live-sub{font-size:14px;color:#a0aab8;margin-top:4px}
.sm-net .sm-net-topo{position:relative;background:#0d1424;color:#fff;border-radius:20px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.04)}
.sm-net .sm-net-topo-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.sm-net .sm-net-topo-bar-l{display:flex!important;align-items:center!important;gap:8px}
.sm-net .sm-net-topo-bar-logo{width:22px!important;height:22px!important;border-radius:6px;background:linear-gradient(135deg,#c8102e,#a80d26);display:flex!important;align-items:center!important;justify-content:center!important;font-size:11px;font-weight:900;color:#fff}
.sm-net .sm-net-topo-bar-title{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:rgba(255,255,255,.3);letter-spacing:.5px}
.sm-net .sm-net-topo-bar-r{display:flex!important;align-items:center!important;gap:12px}
.sm-net .sm-net-topo-bar-status{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:#22c55e;display:flex!important;align-items:center!important;gap:4px}
.sm-net .sm-net-topo-bar-dot{width:5px!important;height:5px!important;border-radius:50%;background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,.4);animation:smNetPls 2s ease infinite}
.sm-net .sm-net-topo-bar-time{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.15)}
.sm-net .sm-net-topo-cwrap{position:relative;height:240px!important}
.sm-net .sm-net-topo-canvas{width:100%!important;height:240px!important;display:block!important}
.sm-net .sm-net-topo-tip{position:absolute!important;z-index:10;background:rgba(13,20,36,.95);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;pointer-events:none;opacity:0;transition:opacity .2s;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.sm-net .sm-net-topo-tip.show{opacity:1}
.sm-net .sm-net-topo-tip-name{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px}
.sm-net .sm-net-topo-tip-type{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.5px;margin-bottom:8px}
.sm-net .sm-net-topo-tip-row{display:flex!important;justify-content:space-between!important;align-items:center!important;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:2px 0}
.sm-net .sm-net-topo-tip-k{color:rgba(255,255,255,.3)}
.sm-net .sm-net-topo-tip-v{color:rgba(255,255,255,.6);font-weight:600}
.sm-net .sm-net-topo-tip-v em{font-style:normal;color:#c8102e}
.sm-net .sm-net-topo-dash{display:grid!important;grid-template-columns:1fr 1fr!important;border-top:1px solid rgba(255,255,255,.04)}
.sm-net .sm-net-topo-graph{padding:14px 16px;border-right:1px solid rgba(255,255,255,.04)}
.sm-net .sm-net-topo-graph-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.15);margin-bottom:8px;display:flex!important;align-items:center!important;justify-content:space-between!important}
.sm-net .sm-net-topo-graph-val{color:#c8102e;font-size:11px;letter-spacing:0}
.sm-net .sm-net-topo-bw{width:100%!important;height:48px!important;display:block!important}
.sm-net .sm-net-topo-log{padding:14px 16px;overflow:hidden}
.sm-net .sm-net-topo-log-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.15);margin-bottom:8px}
.sm-net .sm-net-topo-log-list{display:flex!important;flex-direction:column!important;gap:2px}
.sm-net .sm-net-topo-log-entry{display:flex!important;align-items:center!important;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.15);animation:smNetLogIn .25s ease}
@keyframes smNetLogIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.sm-net .sm-net-topo-log-time{color:rgba(255,255,255,.08);width:40px;flex-shrink:0}
.sm-net .sm-net-topo-log-dot{width:4px!important;height:4px!important;border-radius:50%;flex-shrink:0}
.sm-net .sm-net-topo-log-dot--ok{background:#22c55e}
.sm-net .sm-net-topo-log-dot--red{background:#c8102e}
.sm-net .sm-net-topo-log-dot--warn{background:#f59e0b}
.sm-net .sm-net-topo-log-msg{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-net .sm-net-topo-footer{display:grid!important;grid-template-columns:repeat(3,1fr)!important;border-top:1px solid rgba(255,255,255,.04)}
.sm-net .sm-net-topo-fstat{padding:10px 14px;text-align:center;position:relative}
.sm-net .sm-net-topo-fstat:not(:last-child)::after{content:'';position:absolute!important;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.04)}
.sm-net .sm-net-topo-fstat-val{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;color:#fff;display:block}
.sm-net .sm-net-topo-fstat-val em{font-style:normal;color:#c8102e}
.sm-net .sm-net-topo-fstat-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,.12);letter-spacing:1px;text-transform:uppercase}

/* Services */
.sm-net .sm-net-services{max-width:1100px;margin:0 auto;padding:0 24px 56px}
.sm-net .sm-net-stitle{font-size:clamp(24px,3vw,30px);font-weight:500;text-align:center;margin-bottom:8px;letter-spacing:-1px}
.sm-net .sm-net-stitle em{font-style:normal;color:var(--net-accent)}
.sm-net .sm-net-ssub{font-size:18px;color:#8c96a6;text-align:center;margin-bottom:40px}
.sm-net .sm-net-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:14px;margin-bottom:48px}
.sm-net .sm-net-card{padding:28px 24px;border-radius:18px;background:#fff;border:1px solid #eef0f4;position:relative;overflow:hidden;cursor:pointer;transition:all .35s cubic-bezier(.25,.46,.45,.94)}
.sm-net .sm-net-card::before{content:'';position:absolute!important;left:0;top:0;bottom:0;width:4px;border-radius:0 4px 4px 0;background:var(--net-accent);transform:scaleY(0);transition:transform .35s ease}
.sm-net .sm-net-card:hover{border-color:rgba(200,16,46,.12);box-shadow:0 8px 28px rgba(26,39,68,.05);transform:translateY(-3px)}
.sm-net .sm-net-card:hover::before{transform:scaleY(1)}
.sm-net .sm-net-card.expanded{border-color:rgba(200,16,46,.15);box-shadow:0 8px 28px rgba(26,39,68,.06)}
.sm-net .sm-net-card.expanded::before{transform:scaleY(1)}
.sm-net .sm-net-card-top{display:flex!important;align-items:flex-start!important;gap:14px;margin-bottom:14px}
.sm-net .sm-net-card-icon{width:48px!important;height:48px!important;border-radius:14px;flex-shrink:0;background:#f8f9fb;border:1px solid #eef0f4;display:flex!important;align-items:center!important;justify-content:center!important;font-size:24px;transition:transform .3s}
.sm-net .sm-net-card:hover .sm-net-card-icon{transform:scale(1.06)}
.sm-net .sm-net-card-info{flex:1;min-width:0}
.sm-net .sm-net-card-name{font-size:20px;font-weight:700;color:#1a2744;margin-bottom:3px}
.sm-net .sm-net-card-hint{font-size:16px;color:#8c96a6;line-height:1.5}
.sm-net .sm-net-card-desc{font-size:17px;color:#5a6578;line-height:1.7;margin-bottom:16px}
.sm-net .sm-net-card-detail{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.25,.46,.45,.94)}
.sm-net .sm-net-card.expanded .sm-net-card-detail{max-height:300px}
.sm-net .sm-net-card-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px;padding-top:14px;border-top:1px solid #eef0f4;margin-bottom:12px}
.sm-net .sm-net-card-stat{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:6px 10px;border-radius:8px;background:#f8f9fb}
.sm-net .sm-net-card-sk{font-size:14px;color:#8c96a6}
.sm-net .sm-net-card-sv{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:#1a2744}
.sm-net .sm-net-card-sv em{font-style:normal;color:var(--net-accent)}
.sm-net .sm-net-card-tags{display:flex!important;flex-wrap:wrap;gap:5px}
.sm-net .sm-net-card-tag{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;padding:3px 10px;border-radius:5px;background:#f5f6f8;color:#5a6578}
.sm-net .sm-net-card-toggle{display:flex!important;align-items:center!important;gap:6px;font-size:15px;font-weight:700;color:var(--net-accent);margin-top:4px}
.sm-net .sm-net-card-toggle svg{width:14px;height:14px;transition:transform .3s}
.sm-net .sm-net-card.expanded .sm-net-card-toggle svg{transform:rotate(180deg)}

/* CTA */
.sm-net .sm-net-cta{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:32px 36px;border-radius:20px;background:#1a2744;box-shadow:0 8px 32px rgba(26,39,68,.12)}
.sm-net .sm-net-cta-text{color:rgba(255,255,255,.55);font-size:19px;line-height:1.65;max-width:520px}
.sm-net .sm-net-cta-text strong{color:#fff}
.sm-net .sm-net-cta-btn{display:inline-flex!important;align-items:center!important;gap:10px;padding:14px 28px;border-radius:50px;font-size:18px;font-weight:700;font-family:inherit;text-decoration:none;color:#fff;border:none;cursor:pointer;background:var(--net-accent);box-shadow:0 4px 20px rgba(200,16,46,.3);transition:all .35s ease;flex-shrink:0}
.sm-net .sm-net-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,16,46,.4);background:#a80d26}
.sm-net .sm-net-cta-btn svg{width:18px;height:18px;transition:transform .3s}
.sm-net .sm-net-cta-btn:hover svg{transform:translateX(4px)}

/* Responsive */
@media(max-width:960px){
    .sm-net .sm-net-hero{padding:48px 16px 40px}
    .sm-net .sm-net-hero-grid{grid-template-columns:1fr!important;gap:32px}
    .sm-net .sm-net-title{font-size:30px!important;letter-spacing:-1px}
    .sm-net .sm-net-stitle{font-size:22px!important}
    .sm-net .sm-net-grid{grid-template-columns:1fr!important}
    .sm-net .sm-net-topo-dash{grid-template-columns:1fr!important}
    .sm-net .sm-net-topo-graph{border-right:none;border-bottom:1px solid rgba(255,255,255,.04)}
    .sm-net .sm-net-cta{flex-direction:column!important;gap:20px;text-align:center;padding:28px 24px}
    .sm-net .sm-net-cta-btn{width:100%;justify-content:center!important}
    .sm-net .sm-net-services{padding:0 16px 48px}
}

/* ═══════════════════════════════════════════════════
   32 · CYBERSECURITY
   ═══════════════════════════════════════════════════ */
.sm-sec{--sec-accent:#c8102e;font-family:'DM Sans',sans-serif;background:#fff;color:#1a2744;overflow:hidden}
.sm-sec .sm-sec-hero{position:relative;padding:72px 24px 56px;background:linear-gradient(180deg,#f8f9fb 0%,#fff 60%);overflow:hidden}
.sm-sec .sm-sec-bgcanvas{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.sm-sec .sm-sec-hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.sm-sec .sm-sec-badge{display:inline-block!important;background:var(--sec-accent,#c8102e);color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:6px;margin-bottom:18px;box-shadow:0 4px 12px rgba(200,16,46,.35)}
.sm-sec .sm-sec-badge-dot{width:6px!important;height:6px!important;border-radius:50%;background:var(--sec-accent);box-shadow:0 0 8px rgba(200,16,46,.4);animation:smSecPls 2s ease infinite}
@keyframes smSecPls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
.sm-sec .sm-sec-hero-grid{display:grid!important;grid-template-columns:1fr 460px!important;gap:48px;align-items:center!important}
.sm-sec .sm-sec-title{font-size:clamp(30px,4.5vw,46px);font-weight:500;line-height:1.06;letter-spacing:-2px;margin-bottom:18px}
.sm-sec .sm-sec-title em{font-style:normal;color:var(--sec-accent)}
.sm-sec .sm-sec-desc{font-size:20px;color:#7a8599;line-height:1.75;margin-bottom:32px;max-width:480px}

/* Counters */
.sm-sec .sm-sec-counters{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px}
.sm-sec .sm-sec-counter{padding:18px!important;border-radius:16px;background:#fff;border:1px solid #eef0f4;box-shadow:0 2px 8px rgba(26,39,68,.02);position:relative;overflow:hidden}
.sm-sec .sm-sec-counter::before{content:'';position:absolute!important;top:0;left:0;width:3px;height:100%;border-radius:0 3px 3px 0;background:var(--sec-accent);transform:scaleY(0);transition:transform .3s}
.sm-sec .sm-sec-counter:hover::before{transform:scaleY(1)}
.sm-sec .sm-sec-counter-label{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#bfc6d0;margin-bottom:6px}
.sm-sec .sm-sec-counter-val{font-family:'IBM Plex Mono',monospace;font-size:28px;font-weight:700}
.sm-sec .sm-sec-counter-sub{font-size:14px;color:#a0aab8;margin-top:3px}

/* Threat Dashboard */
.sm-sec .sm-sec-dash{background:#0d1424;color:#fff;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.04);box-shadow:0 8px 40px rgba(0,0,0,.15)}
.sm-sec .sm-sec-dash-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.sm-sec .sm-sec-dash-bar-l{display:flex!important;align-items:center!important;gap:8px}
.sm-sec .sm-sec-dash-bar-logo{width:22px!important;height:22px!important;border-radius:6px;background:linear-gradient(135deg,#c8102e,#a80d26);display:flex!important;align-items:center!important;justify-content:center!important;font-size:11px;font-weight:900;color:#fff}
.sm-sec .sm-sec-dash-bar-title{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:rgba(255,255,255,.3);letter-spacing:.5px}
.sm-sec .sm-sec-dash-bar-r{display:flex!important;align-items:center!important;gap:12px}
.sm-sec .sm-sec-dash-bar-status{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:#22c55e;display:flex!important;align-items:center!important;gap:4px}
.sm-sec .sm-sec-dash-bar-dot{width:5px!important;height:5px!important;border-radius:50%;background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,.4);animation:smSecPls 2s ease infinite}
.sm-sec .sm-sec-dash-bar-time{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.15)}
.sm-sec .sm-sec-dash-canvas{position:relative;height:200px!important}
.sm-sec .sm-sec-threat-cvs{width:100%!important;height:200px!important;display:block!important}

/* Dash bottom */
.sm-sec .sm-sec-dash-bottom{display:grid!important;grid-template-columns:1fr 1fr!important;border-top:1px solid rgba(255,255,255,.04)}
.sm-sec .sm-sec-dash-types{padding:14px 16px;border-right:1px solid rgba(255,255,255,.04)}
.sm-sec .sm-sec-dash-label{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.15);margin-bottom:10px}
.sm-sec .sm-sec-dash-type-row{display:flex!important;align-items:center!important;gap:8px;margin-bottom:6px}
.sm-sec .sm-sec-dash-type-dot{width:6px!important;height:6px!important;border-radius:2px;flex-shrink:0}
.sm-sec .sm-sec-dash-type-name{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.25);flex:1}
.sm-sec .sm-sec-dash-type-bar{width:60px;height:4px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden}
.sm-sec .sm-sec-dash-type-fill{height:100%;border-radius:2px;transition:width 1s ease}
.sm-sec .sm-sec-dash-type-pct{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:rgba(255,255,255,.35);width:28px;text-align:right}
.sm-sec .sm-sec-dash-log{padding:14px 16px;overflow:hidden}
.sm-sec .sm-sec-dash-log-list{display:flex!important;flex-direction:column!important;gap:3px}
.sm-sec .sm-sec-dash-log-entry{display:flex!important;align-items:center!important;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.15);animation:smSecLogIn .25s ease}
@keyframes smSecLogIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.sm-sec .sm-sec-dash-log-time{color:rgba(255,255,255,.08);width:40px;flex-shrink:0}
.sm-sec .sm-sec-dash-log-icon{font-size:10px;flex-shrink:0}
.sm-sec .sm-sec-dash-log-msg{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-sec .sm-sec-dash-footer{display:grid!important;grid-template-columns:repeat(4,1fr)!important;border-top:1px solid rgba(255,255,255,.04)}
.sm-sec .sm-sec-dash-fstat{padding:10px 12px;text-align:center;position:relative}
.sm-sec .sm-sec-dash-fstat:not(:last-child)::after{content:'';position:absolute!important;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.04)}
.sm-sec .sm-sec-dash-fstat-val{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;color:#fff;display:block}
.sm-sec .sm-sec-dash-fstat-val em{font-style:normal;color:var(--sec-accent)}
.sm-sec .sm-sec-dash-fstat-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,.1);letter-spacing:.5px;text-transform:uppercase}

/* Layers */
.sm-sec .sm-sec-layers{max-width:1100px;margin:0 auto;padding:56px 24px}
.sm-sec .sm-sec-layers-title{font-size:clamp(24px,3vw,30px);font-weight:500;text-align:center;margin-bottom:8px;letter-spacing:-1px}
.sm-sec .sm-sec-layers-title em{font-style:normal;color:var(--sec-accent)}
.sm-sec .sm-sec-layers-sub{font-size:18px;color:#8c96a6;text-align:center;margin-bottom:40px}
.sm-sec .sm-sec-layers-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:14px;margin-bottom:48px}
.sm-sec .sm-sec-layer{padding:28px 24px;border-radius:18px;background:#fff;border:1px solid #eef0f4;cursor:pointer;position:relative;overflow:hidden;transition:all .35s cubic-bezier(.25,.46,.45,.94)}
.sm-sec .sm-sec-layer::before{content:'';position:absolute!important;left:0;top:0;bottom:0;width:4px;border-radius:0 4px 4px 0;background:var(--sec-accent);transform:scaleY(0);transition:transform .35s}
.sm-sec .sm-sec-layer:hover{border-color:rgba(200,16,46,.12);box-shadow:0 8px 28px rgba(26,39,68,.05);transform:translateY(-3px)}
.sm-sec .sm-sec-layer:hover::before{transform:scaleY(1)}
.sm-sec .sm-sec-layer.expanded{border-color:rgba(200,16,46,.15);box-shadow:0 8px 28px rgba(26,39,68,.06)}
.sm-sec .sm-sec-layer.expanded::before{transform:scaleY(1)}
.sm-sec .sm-sec-layer-top{display:flex!important;align-items:flex-start!important;gap:14px;margin-bottom:12px}
.sm-sec .sm-sec-layer-icon{width:48px!important;height:48px!important;border-radius:14px;flex-shrink:0;background:#f8f9fb;border:1px solid #eef0f4;display:flex!important;align-items:center!important;justify-content:center!important;font-size:24px;transition:transform .3s}
.sm-sec .sm-sec-layer:hover .sm-sec-layer-icon{transform:scale(1.06)}
.sm-sec .sm-sec-layer-info{flex:1;min-width:0}
.sm-sec .sm-sec-layer-name{font-size:20px;font-weight:700;color:#1a2744;margin-bottom:3px}
.sm-sec .sm-sec-layer-hint{font-size:16px;color:#8c96a6;line-height:1.4}
.sm-sec .sm-sec-layer-desc{font-size:17px;color:#5a6578;line-height:1.7;margin-bottom:14px}
.sm-sec .sm-sec-layer-toggle{display:flex!important;align-items:center!important;gap:6px;font-size:15px;font-weight:700;color:var(--sec-accent);margin-top:2px}
.sm-sec .sm-sec-layer-toggle svg{width:14px;height:14px;transition:transform .3s}
.sm-sec .sm-sec-layer.expanded .sm-sec-layer-toggle svg{transform:rotate(180deg)}
.sm-sec .sm-sec-layer-detail{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.25,.46,.45,.94)}
.sm-sec .sm-sec-layer.expanded .sm-sec-layer-detail{max-height:300px}
.sm-sec .sm-sec-layer-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px;padding-top:14px;border-top:1px solid #eef0f4;margin-bottom:12px}
.sm-sec .sm-sec-layer-stat{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:6px 10px;border-radius:8px;background:#f8f9fb}
.sm-sec .sm-sec-layer-sk{font-size:14px;color:#8c96a6}
.sm-sec .sm-sec-layer-sv{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:#1a2744}
.sm-sec .sm-sec-layer-sv em{font-style:normal;color:var(--sec-accent)}
.sm-sec .sm-sec-layer-tags{display:flex!important;flex-wrap:wrap;gap:5px}
.sm-sec .sm-sec-layer-tag{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;padding:3px 10px;border-radius:5px;background:#f5f6f8;color:#5a6578}

/* CTA */
.sm-sec .sm-sec-cta{max-width:1100px;margin:0 auto;padding:0 24px 64px}
.sm-sec .sm-sec-cta-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:32px 36px;border-radius:20px;background:#1a2744;box-shadow:0 8px 32px rgba(26,39,68,.12)}
.sm-sec .sm-sec-cta-text{color:rgba(255,255,255,.55);font-size:19px;line-height:1.65;max-width:520px}
.sm-sec .sm-sec-cta-text strong{color:#fff}
.sm-sec .sm-sec-cta-btn{display:inline-flex!important;align-items:center!important;gap:10px;padding:14px 28px;border-radius:50px;font-size:18px;font-weight:700;font-family:inherit;text-decoration:none;color:#fff;border:none;cursor:pointer;background:var(--sec-accent);box-shadow:0 4px 20px rgba(200,16,46,.3);transition:all .35s ease;flex-shrink:0}
.sm-sec .sm-sec-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,16,46,.4);background:#a80d26}
.sm-sec .sm-sec-cta-btn svg{width:18px;height:18px;transition:transform .3s}
.sm-sec .sm-sec-cta-btn:hover svg{transform:translateX(4px)}

@media(max-width:960px){
    .sm-sec .sm-sec-hero{padding:48px 16px 40px}
    .sm-sec .sm-sec-hero-grid{grid-template-columns:1fr!important;gap:32px}
    .sm-sec .sm-sec-title{font-size:30px!important;letter-spacing:-1px}
    .sm-sec .sm-sec-layers-title{font-size:22px!important}
    .sm-sec .sm-sec-layers-grid{grid-template-columns:1fr!important}
    .sm-sec .sm-sec-dash-bottom{grid-template-columns:1fr!important}
    .sm-sec .sm-sec-dash-types{border-right:none;border-bottom:1px solid rgba(255,255,255,.04)}
    .sm-sec .sm-sec-dash-footer{grid-template-columns:1fr 1fr!important}
    .sm-sec .sm-sec-layers{padding:40px 16px}
    .sm-sec .sm-sec-cta{padding:0 16px 48px}
    .sm-sec .sm-sec-cta-bar{flex-direction:column!important;gap:20px;text-align:center;padding:28px 24px}
    .sm-sec .sm-sec-cta-btn{width:100%;justify-content:center!important}
}

/* ═══════════════════════════════════════════════════
   33 · DIGITAL SIGNAGE
   ═══════════════════════════════════════════════════ */
.sm-ds{--ds-accent:#c8102e;font-family:'DM Sans',sans-serif;background:#fff;color:#1a2744}
.sm-ds .sm-ds-head{text-align:center;padding:72px 24px 48px}
.sm-ds .sm-ds-badge{display:inline-block!important;background:var(--ds-accent,#c8102e);color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:6px;margin-bottom:18px;box-shadow:0 4px 12px rgba(200,16,46,.35)}
.sm-ds .sm-ds-badge-dot{width:6px!important;height:6px!important;border-radius:50%;background:var(--ds-accent);box-shadow:0 0 8px rgba(200,16,46,.4);animation:smDsBlink 2s ease infinite}
@keyframes smDsBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
.sm-ds .sm-ds-title{font-size:clamp(30px,4.5vw,46px);font-weight:500;line-height:1.08;letter-spacing:-2px;margin-bottom:16px}
.sm-ds .sm-ds-title em{font-style:normal;color:var(--ds-accent)}
.sm-ds .sm-ds-sub{font-size:20px;color:#7a8599;line-height:1.75;max-width:620px;margin:0 auto}

/* Stage */
.sm-ds .sm-ds-stage-section{padding:0 24px}
.sm-ds .sm-ds-stage-wrap{max-width:1100px;margin:0 auto;background:#fafbfc;border:1px solid #eef0f4;border-radius:24px;overflow:hidden;box-shadow:0 8px 40px rgba(26,39,68,.04)}
.sm-ds .sm-ds-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 24px;border-bottom:1px solid #eef0f4;background:#fff;flex-wrap:wrap;gap:12px}
.sm-ds .sm-ds-toolbar-l{display:flex!important;align-items:center!important;gap:12px}
.sm-ds .sm-ds-toolbar-logo{width:28px!important;height:28px!important;border-radius:8px;background:linear-gradient(135deg,#c8102e,#a80d26);display:flex!important;align-items:center!important;justify-content:center!important;font-size:13px;font-weight:900;color:#fff}
.sm-ds .sm-ds-toolbar-title{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:#8c96a6;letter-spacing:.5px}
.sm-ds .sm-ds-toolbar-tabs{display:flex!important;gap:6px;flex-wrap:wrap}
.sm-ds .sm-ds-tab{font-size:13px;font-weight:700;padding:6px 14px;border-radius:50px;border:1px solid #eef0f4;background:#f5f6f8;color:#8c96a6;cursor:pointer;transition:all .25s;font-family:'DM Sans',sans-serif}
.sm-ds .sm-ds-tab.active,.sm-ds .sm-ds-tab:hover{background:var(--ds-accent);border-color:var(--ds-accent);color:#fff}
.sm-ds .sm-ds-stage-body{display:flex!important;min-height:480px}
.sm-ds .sm-ds-visual{flex:1;padding:24px 22px;display:flex!important;flex-direction:column!important;gap:14px;border-right:1px solid #eef0f4;overflow:hidden}
.sm-ds .sm-ds-screen-mock{background:#111;border-radius:14px;padding:3px;box-shadow:0 12px 48px rgba(0,0,0,.35)}
.sm-ds .sm-ds-screen-bezel{background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9;position:relative}

/* Slides */
.sm-ds .sm-ds-slide{position:absolute!important;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none;overflow:hidden}
.sm-ds .sm-ds-slide.active{opacity:1;pointer-events:all}
.sm-ds .sm-ds-vid-wrap{position:absolute!important;inset:0;z-index:0;overflow:hidden;background:#000}
.sm-ds .sm-ds-vid-wrap video{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover;opacity:0;transition:opacity 1s ease}
.sm-ds .sm-ds-vid-wrap video.loaded{opacity:.85}
.sm-ds .sm-ds-vid-fb{position:absolute!important;inset:0;z-index:0;transition:opacity .8s ease}
.sm-ds .sm-ds-vid-fb--moda{background:linear-gradient(135deg,#1a0008,#3d0015,#0d0005)}
.sm-ds .sm-ds-vid-fb--food{background:linear-gradient(160deg,#0a1408,#0f2010)}
.sm-ds .sm-ds-vid-fb--pharma{background:linear-gradient(145deg,#030810,#05102a)}
.sm-ds .sm-ds-vid-fb--gym{background:linear-gradient(160deg,#040308,#0c0a18)}
.sm-ds .sm-ds-vid-ov{position:absolute!important;inset:0;z-index:1;pointer-events:none}
.sm-ds .sm-ds-vid-ov--moda{background:linear-gradient(95deg,rgba(5,0,3,.62) 40%,rgba(5,0,3,.10))}
.sm-ds .sm-ds-vid-ov--food{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.62) 100%)}
.sm-ds .sm-ds-vid-ov--pharma{background:linear-gradient(135deg,rgba(3,8,16,.65),rgba(3,8,16,.35))}
.sm-ds .sm-ds-vid-ov--gym{background:linear-gradient(160deg,rgba(4,3,8,.58),rgba(4,3,8,.30))}
.sm-ds .sm-ds-ad-ui{position:absolute!important;inset:0;z-index:2;display:flex!important;flex-direction:column!important}
.sm-ds .sm-ds-ad-topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 14px;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.sm-ds .sm-ds-ad-brand{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff}
.sm-ds .sm-ds-ad-loc{font-size:10px;color:rgba(255,255,255,.45)}
.sm-ds .sm-ds-ad-live{display:flex!important;align-items:center!important;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:#22c55e}
.sm-ds .sm-ds-ad-live-dot{width:5px!important;height:5px!important;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.8);animation:smDsBlink 1.5s ease infinite}
.sm-ds .sm-ds-ad-strip{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px;padding:7px 14px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.5px;flex-shrink:0;backdrop-filter:blur(8px)}
.sm-ds .sm-ds-ad-strip--red{background:rgba(200,16,46,.88);color:rgba(255,255,255,.88)}
.sm-ds .sm-ds-ad-strip-sep{opacity:.4}

/* Moda */
.sm-ds .sm-ds-moda-body{flex:1;display:flex!important;align-items:center!important;padding:12px 20px}
.sm-ds .sm-ds-moda-copy{max-width:58%}
.sm-ds .sm-ds-moda-season{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(200,16,46,.9);margin-bottom:8px}
.sm-ds .sm-ds-moda-h1{font-size:clamp(20px,4vw,30px);font-weight:900;letter-spacing:-1.5px;color:#fff;line-height:.95;margin-bottom:4px}
.sm-ds .sm-ds-moda-h2{font-size:13px;font-weight:300;color:rgba(255,255,255,.45);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.sm-ds .sm-ds-moda-disc{display:flex!important;align-items:center!important;gap:8px;margin-bottom:14px}
.sm-ds .sm-ds-moda-badge{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:900;color:#fff;background:#c8102e;padding:4px 13px;border-radius:8px;box-shadow:0 4px 20px rgba(200,16,46,.55);animation:smDsBadge 2.5s ease-in-out infinite}
@keyframes smDsBadge{0%,100%{box-shadow:0 4px 20px rgba(200,16,46,.55)}50%{box-shadow:0 4px 36px rgba(200,16,46,.85)}}
.sm-ds .sm-ds-moda-disc-lbl{font-size:11px;color:rgba(255,255,255,.4)}
.sm-ds .sm-ds-moda-cta{display:inline-flex!important;width:fit-content;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);padding:7px 16px;border-radius:50px;animation:smDsCta 3s ease-in-out infinite}
@keyframes smDsCta{0%,100%{border-color:rgba(255,255,255,.22)}50%{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.16)}}

/* Food */
.sm-ds .sm-ds-food-body{flex:1;display:flex!important;flex-direction:column!important;justify-content:flex-end}
.sm-ds .sm-ds-food-dishes{display:flex!important;flex-direction:column!important}
.sm-ds .sm-ds-food-dish{display:flex!important;align-items:center!important;gap:10px;padding:8px 14px;background:rgba(0,0,0,.52);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.05)}
.sm-ds .sm-ds-food-dish-em{font-size:22px;flex-shrink:0;width:26px;text-align:center}
.sm-ds .sm-ds-food-dish-info{flex:1}
.sm-ds .sm-ds-food-dish-cat{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:2px}
.sm-ds .sm-ds-food-dish-name{font-size:12px;font-weight:700;color:#fff}
.sm-ds .sm-ds-food-dish-price{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:900;color:#22c55e;flex-shrink:0}
.sm-ds .sm-ds-food-promo{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:7px 14px;background:rgba(34,197,94,.2);backdrop-filter:blur(8px);border-top:1px solid rgba(34,197,94,.2);flex-shrink:0}
.sm-ds .sm-ds-food-promo-lbl{font-size:11px;color:rgba(255,255,255,.7);font-weight:600}
.sm-ds .sm-ds-food-promo-price{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:900;color:#22c55e}

/* Pharma */
.sm-ds .sm-ds-pharma-body{flex:1;display:flex!important}
.sm-ds .sm-ds-pharma-left{width:46%;padding:12px 12px 12px 14px;border-right:1px solid rgba(255,255,255,.05);display:flex!important;flex-direction:column!important;gap:5px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.sm-ds .sm-ds-pharma-cross{font-size:28px;color:rgba(14,165,233,.8)}
.sm-ds .sm-ds-pharma-name{font-size:12px;color:rgba(255,255,255,.5)}
.sm-ds .sm-ds-pharma-name strong{font-size:19px;font-weight:900;color:#fff;display:block;letter-spacing:-1px}
.sm-ds .sm-ds-pharma-addr{font-family:'IBM Plex Mono',monospace;font-size:7px;color:rgba(255,255,255,.28)}
.sm-ds .sm-ds-pharma-hours{display:flex!important;flex-direction:column!important;gap:3px;margin-top:4px}
.sm-ds .sm-ds-ph-row{display:flex!important;justify-content:space-between!important;font-size:10px;color:rgba(255,255,255,.38);padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.sm-ds .sm-ds-ph-time{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:rgba(255,255,255,.65)}
.sm-ds .sm-ds-pharma-open{margin-top:auto;display:inline-flex!important;align-items:center!important;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:rgba(34,197,94,.95);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);padding:4px 10px;border-radius:50px;width:fit-content}
.sm-ds .sm-ds-pharma-right{flex:1;padding:10px 12px;display:flex!important;flex-direction:column!important;gap:5px;background:rgba(0,0,0,.2);backdrop-filter:blur(6px)}
.sm-ds .sm-ds-pharma-offers-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(14,165,233,.65);margin-bottom:2px}
.sm-ds .sm-ds-ph-offer{display:flex!important;align-items:center!important;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:7px 9px;backdrop-filter:blur(4px)}
.sm-ds .sm-ds-ph-offer-em{font-size:18px;flex-shrink:0}
.sm-ds .sm-ds-ph-offer-name{font-size:11px;font-weight:700;color:#fff;margin-bottom:1px}
.sm-ds .sm-ds-ph-offer-sub{font-size:7px;color:rgba(255,255,255,.3)}
.sm-ds .sm-ds-ph-offer-disc{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:800;color:#c8102e;flex-shrink:0}
.sm-ds .sm-ds-pharma-ticker{flex-shrink:0;background:rgba(14,165,233,.08);border-top:1px solid rgba(14,165,233,.12);padding:5px 14px;overflow:hidden;white-space:nowrap;backdrop-filter:blur(4px)}
.sm-ds .sm-ds-pharma-ticker span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.38);display:inline-block;animation:smDsTicker 18s linear infinite}
@keyframes smDsTicker{from{transform:translateX(30%)}to{transform:translateX(-100%)}}

/* Gym */
.sm-ds .sm-ds-gym-header{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:9px 14px;background:rgba(0,0,0,.58);backdrop-filter:blur(10px);border-bottom:1px solid rgba(139,92,246,.12);flex-shrink:0}
.sm-ds .sm-ds-gym-logo-wrap{display:flex!important;align-items:center!important;gap:8px}
.sm-ds .sm-ds-gym-logo{width:30px!important;height:30px!important;border-radius:8px;background:linear-gradient(135deg,#8b5cf6,#c8102e);display:flex!important;align-items:center!important;justify-content:center!important;font-size:17px;box-shadow:0 4px 14px rgba(139,92,246,.4)}
.sm-ds .sm-ds-gym-brand{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff}
.sm-ds .sm-ds-gym-tagline{font-size:7px;color:rgba(255,255,255,.35);margin-top:1px}
.sm-ds .sm-ds-gym-countdown{text-align:right}
.sm-ds .sm-ds-gym-cd-lbl{font-size:7px;color:rgba(255,255,255,.3);font-family:'IBM Plex Mono',monospace;margin-bottom:1px}
.sm-ds .sm-ds-gym-cd-timer{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:800;color:#c8102e;text-shadow:0 0 14px rgba(200,16,46,.6)}
.sm-ds .sm-ds-gym-body{flex:1;display:flex!important;align-items:center!important;padding:10px 16px;gap:14px}
.sm-ds .sm-ds-gym-copy{flex:1}
.sm-ds .sm-ds-gym-offer-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(139,92,246,.95);margin-bottom:6px}
.sm-ds .sm-ds-gym-offer-h{font-size:clamp(24px,5vw,36px);font-weight:900;letter-spacing:-2px;color:#fff;line-height:1;margin-bottom:2px}
.sm-ds .sm-ds-gym-offer-sub{font-size:11px;color:rgba(255,255,255,.38);margin-bottom:8px}
.sm-ds .sm-ds-gym-includes{font-size:10px;color:rgba(255,255,255,.32);font-family:'IBM Plex Mono',monospace}
.sm-ds .sm-ds-gym-price-wrap{text-align:right;flex-shrink:0}
.sm-ds .sm-ds-gym-price-old{font-family:'IBM Plex Mono',monospace;font-size:14px;color:rgba(255,255,255,.2);text-decoration:line-through;margin-bottom:2px}
.sm-ds .sm-ds-gym-price-new{font-family:'IBM Plex Mono',monospace;font-size:36px;font-weight:900;color:#c8102e;line-height:1;text-shadow:0 0 24px rgba(200,16,46,.55);margin-bottom:8px}
.sm-ds .sm-ds-gym-cta-btn{display:inline-flex!important;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#fff;background:#c8102e;padding:7px 14px;border-radius:50px;box-shadow:0 4px 18px rgba(200,16,46,.45);white-space:nowrap;animation:smDsGymCta 2.5s ease-in-out infinite}
@keyframes smDsGymCta{0%,100%{box-shadow:0 4px 18px rgba(200,16,46,.45)}50%{box-shadow:0 4px 32px rgba(200,16,46,.78)}}
.sm-ds .sm-ds-gym-classes{display:flex!important;gap:0;border-top:1px solid rgba(139,92,246,.1);flex-shrink:0;background:rgba(0,0,0,.58);backdrop-filter:blur(10px)}
.sm-ds .sm-ds-gym-cls{flex:1;padding:6px 8px;display:flex!important;flex-direction:column!important;gap:2px;border-right:1px solid rgba(255,255,255,.04);text-align:center}
.sm-ds .sm-ds-gym-cls:last-child{border-right:none}
.sm-ds .sm-ds-gym-cls-time{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:rgba(139,92,246,.95)}
.sm-ds .sm-ds-gym-cls-name{font-size:10px;font-weight:700;color:#fff}
.sm-ds .sm-ds-gym-cls-av{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:600;color:rgba(34,197,94,.9)}
.sm-ds .sm-ds-gym-cls-av--few{color:rgba(245,158,11,.9)}

/* Stand */
.sm-ds .sm-ds-stand{display:flex!important;flex-direction:column!important;align-items:center!important;margin-top:-1px}
.sm-ds .sm-ds-stand-neck{width:56px;height:10px;background:#c8cdd6;border-radius:0 0 4px 4px}
.sm-ds .sm-ds-stand-base{width:110px;height:7px;background:#d8dde4;border-radius:4px;margin-top:1px}
.sm-ds .sm-ds-caption{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#a0aab8;letter-spacing:.5px;padding-top:6px}

/* Features */
.sm-ds .sm-ds-features{width:290px;flex-shrink:0;padding:22px 18px;display:flex!important;flex-direction:column!important}
.sm-ds .sm-ds-features-lbl{font-size:16px;font-weight:800;color:#1a2744;margin-bottom:16px}
.sm-ds .sm-ds-feat{padding:12px 0;border-bottom:1px solid #f5f6f8;display:flex!important;gap:10px;align-items:flex-start!important;cursor:pointer;transition:all .2s}
.sm-ds .sm-ds-feat:last-child{border-bottom:none}
.sm-ds .sm-ds-feat:hover .sm-ds-feat-icon{border-color:rgba(200,16,46,.2);background:rgba(200,16,46,.05)}
.sm-ds .sm-ds-feat-text[data-ds-desc]{display:none;animation:smDsFeatIn .3s ease}
.sm-ds .sm-ds-feat-text[data-ds-desc="moda"]{display:block}
@keyframes smDsFeatIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sm-ds .sm-ds-feat-icon{width:34px!important;height:34px!important;border-radius:9px;flex-shrink:0;background:#f8f9fb;border:1px solid #eef0f4;display:flex!important;align-items:center!important;justify-content:center!important;font-size:18px;transition:all .2s}
.sm-ds .sm-ds-feat-name{font-size:16px;font-weight:700;color:#1a2744;margin-bottom:2px;transition:color .2s}
.sm-ds .sm-ds-feat-text{font-size:15px;color:#8c96a6;line-height:1.5}

/* Cards */
.sm-ds .sm-ds-cards-section{max-width:1100px;margin:0 auto;padding:56px 24px 0}
.sm-ds .sm-ds-sec-title{font-size:clamp(24px,3vw,30px);font-weight:500;letter-spacing:-1px;margin-bottom:8px}
.sm-ds .sm-ds-sec-sub{font-size:18px;color:#8c96a6;margin-bottom:32px}
.sm-ds .sm-ds-cards{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:14px}
.sm-ds .sm-ds-card{border-radius:18px;padding:24px 22px;border:1px solid #eef0f4;background:#f8f9fb;transition:all .3s;position:relative;overflow:hidden}
.sm-ds .sm-ds-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(26,39,68,.06);border-color:rgba(200,16,46,.12)}
.sm-ds .sm-ds-card::before{content:'';position:absolute!important;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#c8102e,#a80d26);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.sm-ds .sm-ds-card:hover::before{transform:scaleX(1)}
.sm-ds .sm-ds-card-icon{font-size:30px;margin-bottom:12px;display:block}
.sm-ds .sm-ds-card-title{font-size:20px;font-weight:700;color:#1a2744;margin-bottom:7px}
.sm-ds .sm-ds-card-desc{font-size:17px;color:#7a8599;line-height:1.7;margin-bottom:14px}
.sm-ds .sm-ds-card-tags{display:flex!important;flex-wrap:wrap;gap:5px}
.sm-ds .sm-ds-card-tag{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;padding:3px 9px;border-radius:5px;background:#eef0f4;color:#5a6578}

/* Process */
.sm-ds .sm-ds-proc-section{max-width:1100px;margin:0 auto;padding:56px 24px 0}
.sm-ds .sm-ds-proc-title{font-size:clamp(24px,3vw,30px);font-weight:500;letter-spacing:-1px;margin-bottom:8px;text-align:center}
.sm-ds .sm-ds-proc-sub{font-size:18px;color:#8c96a6;text-align:center;margin-bottom:36px}
.sm-ds .sm-ds-steps{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0;position:relative}
.sm-ds .sm-ds-steps::before{content:'';position:absolute!important;top:26px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,#eef0f4,rgba(200,16,46,.2),#eef0f4);z-index:0}
.sm-ds .sm-ds-step{text-align:center;padding:0 14px;position:relative;z-index:1}
.sm-ds .sm-ds-step-ico{width:54px!important;height:54px!important;border-radius:50%;background:#fff;border:2px solid #eef0f4;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto 12px;font-size:24px;box-shadow:0 4px 14px rgba(26,39,68,.06);transition:all .3s}
.sm-ds .sm-ds-step:hover .sm-ds-step-ico{border-color:rgba(200,16,46,.2);box-shadow:0 4px 20px rgba(200,16,46,.08)}
.sm-ds .sm-ds-step-title{font-size:17px;font-weight:700;color:#1a2744;margin-bottom:5px}
.sm-ds .sm-ds-step-desc{font-size:15px;color:#8c96a6;line-height:1.6}

/* Bottom */
.sm-ds .sm-ds-bottom{max-width:1100px;margin:0 auto;padding:56px 24px 80px}
.sm-ds .sm-ds-benefits{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px;margin-bottom:48px}
.sm-ds .sm-ds-ben{padding:24px 20px;border-radius:16px;background:#f8f9fb;border:1px solid #eef0f4;text-align:center;transition:all .3s}
.sm-ds .sm-ds-ben:hover{border-color:rgba(200,16,46,.12);transform:translateY(-3px);box-shadow:0 8px 24px rgba(26,39,68,.04)}
.sm-ds .sm-ds-ben-icon{font-size:30px;margin-bottom:10px;display:block}
.sm-ds .sm-ds-ben-num{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:700;color:var(--ds-accent);margin-bottom:4px}
.sm-ds .sm-ds-ben-label{font-size:17px;font-weight:600;color:#1a2744;margin-bottom:4px}
.sm-ds .sm-ds-ben-desc{font-size:15px;color:#8c96a6;line-height:1.5}
.sm-ds .sm-ds-cta-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:32px 36px;border-radius:20px;background:#1a2744;box-shadow:0 8px 32px rgba(26,39,68,.12);flex-wrap:wrap;gap:20px}
.sm-ds .sm-ds-cta-text{color:rgba(255,255,255,.55);font-size:19px;line-height:1.65;max-width:520px}
.sm-ds .sm-ds-cta-text strong{color:#fff}
.sm-ds .sm-ds-cta-btn{display:inline-flex!important;align-items:center!important;gap:10px;padding:14px 28px;border-radius:50px;font-size:18px;font-weight:700;font-family:inherit;text-decoration:none;color:#fff;border:none;cursor:pointer;background:var(--ds-accent);box-shadow:0 4px 20px rgba(200,16,46,.3);transition:all .35s;flex-shrink:0}
.sm-ds .sm-ds-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,16,46,.4);background:#a80d26}
.sm-ds .sm-ds-cta-btn svg{width:18px;height:18px;transition:transform .3s}
.sm-ds .sm-ds-cta-btn:hover svg{transform:translateX(4px)}

@media(max-width:860px){
    .sm-ds .sm-ds-stage-body{flex-direction:column!important}
    .sm-ds .sm-ds-features{width:100%!important;border-top:1px solid #eef0f4}
    .sm-ds .sm-ds-visual{border-right:none!important}
    .sm-ds .sm-ds-cards{grid-template-columns:1fr 1fr!important}
    .sm-ds .sm-ds-steps{grid-template-columns:1fr 1fr!important;row-gap:32px}
    .sm-ds .sm-ds-steps::before{display:none}
    .sm-ds .sm-ds-benefits{grid-template-columns:1fr 1fr!important}
    .sm-ds .sm-ds-cta-bar{flex-direction:column!important;text-align:center;padding:28px 24px}
    .sm-ds .sm-ds-cta-btn{width:100%;justify-content:center!important}
}
@media(max-width:540px){.sm-ds .sm-ds-cards{grid-template-columns:1fr!important}}

/* ═══════════════════════════════════════════════════
   34 · INTERACTIVE WHITEBOARD
   ═══════════════════════════════════════════════════ */
.sm-wb{--wb-accent:#c8102e;font-family:'DM Sans',sans-serif;background:#fff;color:#1a2744;overflow-x:hidden}
.sm-wb .sm-wb-header{text-align:center;padding:64px 24px 32px}
.sm-wb .sm-wb-badge{display:inline-block!important;background:var(--wb-accent,#c8102e);color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:6px;margin-bottom:18px;box-shadow:0 4px 12px rgba(200,16,46,.35)}
.sm-wb .sm-wb-badge-dot{width:6px!important;height:6px!important;border-radius:50%;background:var(--wb-accent);box-shadow:0 0 8px rgba(200,16,46,.4);animation:smWbPls 2s ease infinite}
@keyframes smWbPls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
.sm-wb .sm-wb-title{font-size:clamp(30px,4.5vw,46px);font-weight:500;line-height:1.06;letter-spacing:-2px;margin-bottom:14px}
.sm-wb .sm-wb-title em{font-style:normal;color:var(--wb-accent)}
.sm-wb .sm-wb-sub{font-size:20px;color:#7a8599;line-height:1.7;max-width:600px;margin:0 auto}

/* Board */
.sm-wb .sm-wb-board-section{max-width:1140px;margin:0 auto;padding:0 24px 56px}
.sm-wb .sm-wb-board-wrap{background:#1a2744;border-radius:24px;overflow:hidden;box-shadow:0 16px 64px rgba(26,39,68,.18)}
.sm-wb .sm-wb-bezel{padding:8px;border-radius:24px}
.sm-wb .sm-wb-bezel-inner{border-radius:16px;overflow:hidden;background:#fff;position:relative}

/* Chrome */
.sm-wb .sm-wb-chrome{display:flex!important;align-items:center!important;justify-content:space-between!important;background:#f8f9fb;border-bottom:1px solid #eef0f4}
.sm-wb .sm-wb-chrome-l{display:flex!important;align-items:stretch!important}
.sm-wb .sm-wb-tabs{display:flex!important;align-items:stretch!important;height:44px}
.sm-wb .sm-wb-tab{padding:0 18px;font-size:14px;font-weight:700;color:#8c96a6;border:none;background:transparent;cursor:pointer;transition:all .25s;position:relative;font-family:inherit;display:flex!important;align-items:center!important;gap:6px;border-right:1px solid #eef0f4;white-space:nowrap}
.sm-wb .sm-wb-tab:hover{color:#5a6578;background:rgba(0,0,0,.015)}
.sm-wb .sm-wb-tab.active{color:var(--wb-accent);background:#fff}
.sm-wb .sm-wb-tab.active::after{content:'';position:absolute!important;bottom:0;left:0;right:0;height:2px;background:var(--wb-accent);border-radius:2px 2px 0 0}
.sm-wb .sm-wb-tab-em{font-size:16px}
.sm-wb .sm-wb-chrome-r{display:flex!important;align-items:center!important;gap:2px;padding:0 12px;height:44px}
.sm-wb .sm-wb-tools{display:flex!important;align-items:center!important;gap:2px;margin-right:6px}
.sm-wb .sm-wb-tool{width:30px!important;height:30px!important;border-radius:8px;border:none;background:transparent;cursor:pointer;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px;transition:all .2s}
.sm-wb .sm-wb-tool:hover{background:#eef0f4}
.sm-wb .sm-wb-tool.active{background:rgba(200,16,46,.08)}
.sm-wb .sm-wb-colors{display:flex!important;align-items:center!important;gap:3px;margin-right:6px}
.sm-wb .sm-wb-color{width:16px!important;height:16px!important;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s}
.sm-wb .sm-wb-color.active{border-color:#1a2744;box-shadow:0 0 0 2px #fff,0 0 0 3.5px currentColor}
.sm-wb .sm-wb-sizes{display:flex!important;align-items:center!important;gap:4px;margin-right:6px}
.sm-wb .sm-wb-sz{border-radius:50%;background:#8c96a6;cursor:pointer;transition:all .15s;border:2px solid transparent}
.sm-wb .sm-wb-sz.active{background:var(--wb-accent);border-color:rgba(200,16,46,.2)}
.sm-wb .sm-wb-sep{width:1px;height:20px;background:#eef0f4;margin:0 4px}
.sm-wb .sm-wb-action{padding:4px 10px;border-radius:6px;border:1px solid #e2e5ea;background:#fff;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;color:#8c96a6;transition:all .2s}
.sm-wb .sm-wb-action:hover{border-color:var(--wb-accent);color:var(--wb-accent)}

/* Canvas */
.sm-wb .sm-wb-canvas-area{position:relative;height:420px;cursor:crosshair;background:#fff;background-image:radial-gradient(circle,#e2e5ea .6px,transparent .6px);background-size:24px 24px;overflow:hidden}
.sm-wb .sm-wb-canvas{width:100%!important;height:100%!important;display:block!important;touch-action:none;position:relative;z-index:2}
.sm-wb .sm-wb-scene{position:absolute!important;inset:0;z-index:3;pointer-events:none;transition:opacity .25s}
.sm-wb .sm-wb-scene.sm-wb-fading{opacity:0}
.sm-wb .sm-wb-cursor{position:absolute!important;z-index:10;pointer-events:none;transition:left 1.5s cubic-bezier(.25,.46,.45,.94),top 1.5s cubic-bezier(.25,.46,.45,.94)}
.sm-wb .sm-wb-cursor svg{width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.sm-wb .sm-wb-cursor-name{position:absolute!important;top:16px;left:10px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;color:#fff;white-space:nowrap}

/* Slide content */
.sm-wb .sm-wb-slide{position:absolute!important;inset:0;display:flex!important;flex-direction:column!important;padding:28px 32px}
.sm-wb .sm-wb-slide-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--wb-accent);margin-bottom:8px}
.sm-wb .sm-wb-slide-title{font-size:26px;font-weight:500;color:#1a2744;margin-bottom:6px;line-height:1.15}
.sm-wb .sm-wb-slide-sub{font-size:14px;color:#8c96a6;margin-bottom:auto;line-height:1.5}

/* Bars */
.sm-wb .sm-wb-bars{display:flex!important;align-items:flex-end!important;gap:12px;height:120px;padding:0 20px;margin-top:auto;margin-bottom:24px}
.sm-wb .sm-wb-bar-group{flex:1;text-align:center}
.sm-wb .sm-wb-bar{border-radius:6px 6px 0 0;margin:0 auto;width:100%;max-width:48px;transition:height .8s cubic-bezier(.34,1.56,.64,1)}
.sm-wb .sm-wb-bar-val{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;color:#1a2744;margin-bottom:4px}
.sm-wb .sm-wb-bar-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#a0aab8;margin-top:6px}

/* Sticky notes */
.sm-wb .sm-wb-sticky{position:absolute!important;width:130px;padding:11px 13px;border-radius:3px 3px 3px 18px;font-size:13px;font-weight:600;line-height:1.4;color:#1a2744;box-shadow:0 3px 10px rgba(0,0,0,.07);transform:rotate(var(--rot,0deg));animation:smWbSIn .4s ease backwards}
@keyframes smWbSIn{from{opacity:0;transform:rotate(var(--rot,0deg)) scale(.8) translateY(10px)}to{opacity:1;transform:rotate(var(--rot,0deg)) scale(1) translateY(0)}}

/* Timeline */
.sm-wb .sm-wb-tl{display:flex!important;flex-direction:column!important;margin-top:auto;margin-bottom:20px;padding:0 12px}
.sm-wb .sm-wb-tl-item{display:flex!important;align-items:flex-start!important;gap:12px;padding:10px 0;position:relative;animation:smWbTIn .4s ease backwards}
@keyframes smWbTIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.sm-wb .sm-wb-tl-dot{width:12px!important;height:12px!important;border-radius:50%;flex-shrink:0;margin-top:2px;border:2.5px solid}
.sm-wb .sm-wb-tl-line{position:absolute!important;left:5px;top:24px;bottom:-10px;width:2px;background:#eef0f4}
.sm-wb .sm-wb-tl-txt{font-size:14px;color:#5a6578;line-height:1.5}
.sm-wb .sm-wb-tl-txt strong{color:#1a2744;font-weight:800}

/* Products */
.sm-wb .sm-wb-products{display:flex!important;justify-content:center!important;gap:20px;margin-top:auto;margin-bottom:24px;padding:0 16px}
.sm-wb .sm-wb-product{flex:1;max-width:160px;padding:16px;border-radius:14px;background:#fafbfc;border:1px solid #eef0f4;text-align:center;animation:smWbSIn .4s ease backwards;transition:all .3s}
.sm-wb .sm-wb-product-icon{font-size:34px;margin-bottom:6px;display:block}
.sm-wb .sm-wb-product-name{font-size:15px;font-weight:800;color:#1a2744;margin-bottom:2px}
.sm-wb .sm-wb-product-price{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:700;color:var(--wb-accent);margin-bottom:4px}
.sm-wb .sm-wb-product-spec{font-size:11px;color:#8c96a6}
.sm-wb .sm-wb-product-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:50px;background:rgba(200,16,46,.06);color:var(--wb-accent);margin-top:6px}

/* Orbits & planets */
.sm-wb .sm-wb-orbit{position:absolute!important;border-radius:50%;border:1px dashed rgba(26,39,68,.06);pointer-events:none}
.sm-wb .sm-wb-planet{position:absolute!important;border-radius:50%;border:2.5px solid;animation:smWbPIn .5s ease backwards;display:flex!important;align-items:center!important;justify-content:center!important}
@keyframes smWbPIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.sm-wb .sm-wb-planet-label{position:absolute!important;top:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;white-space:nowrap}

/* Kanban */
.sm-wb .sm-wb-kan{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:10px;height:100%;padding:4px 0}
.sm-wb .sm-wb-kan-col{background:rgba(26,39,68,.02);border-radius:10px;padding:10px;display:flex!important;flex-direction:column!important;gap:6px}
.sm-wb .sm-wb-kan-title{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#8c96a6;padding-bottom:6px;border-bottom:1px solid #eef0f4;margin-bottom:2px}
.sm-wb .sm-wb-kan-task{padding:10px 12px;border-radius:8px;background:#fff;border:1px solid #eef0f4;font-size:13px;font-weight:600;color:#1a2744;box-shadow:0 1px 4px rgba(0,0,0,.03);display:flex!important;align-items:center!important;gap:6px}
.sm-wb .sm-wb-kan-dot{width:7px!important;height:7px!important;border-radius:50%;flex-shrink:0}
.sm-wb .sm-wb-kan-task--done{opacity:.45;text-decoration:line-through}

/* Footer */
.sm-wb .sm-wb-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 16px;background:#f8f9fb;border-top:1px solid #eef0f4}
.sm-wb .sm-wb-footer-l{display:flex!important;align-items:center!important;gap:14px}
.sm-wb .sm-wb-footer-stat{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:#a0aab8;display:flex!important;align-items:center!important;gap:4px}
.sm-wb .sm-wb-footer-stat em{font-style:normal;color:#5a6578}
.sm-wb .sm-wb-footer-dot{width:5px!important;height:5px!important;border-radius:50%;background:#22c55e;box-shadow:0 0 4px rgba(34,197,94,.3)}
.sm-wb .sm-wb-footer-hint{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#bfc6d0}
.sm-wb .sm-wb-brand{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px;padding:12px}
.sm-wb .sm-wb-brand-logo{width:20px!important;height:20px!important;border-radius:6px;background:linear-gradient(135deg,#c8102e,#a80d26);display:flex!important;align-items:center!important;justify-content:center!important;font-size:10px;font-weight:900;color:#fff}
.sm-wb .sm-wb-brand-name{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:rgba(255,255,255,.2);letter-spacing:1px}

/* Specs */
.sm-wb .sm-wb-specs-row{max-width:1140px;margin:0 auto;padding:0 24px 48px;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px}
.sm-wb .sm-wb-spec{padding:20px 16px;border-radius:16px;background:#f8f9fb;border:1px solid #eef0f4;text-align:center;transition:all .3s}
.sm-wb .sm-wb-spec:hover{border-color:rgba(200,16,46,.1);transform:translateY(-2px);box-shadow:0 4px 16px rgba(26,39,68,.03)}
.sm-wb .sm-wb-spec-icon{font-size:26px;display:block;margin-bottom:6px}
.sm-wb .sm-wb-spec-val{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:700;color:var(--wb-accent);margin-bottom:2px}
.sm-wb .sm-wb-spec-label{font-size:14px;color:#8c96a6;font-weight:600}

/* Services */
.sm-wb .sm-wb-services{max-width:1140px;margin:0 auto;padding:0 24px 48px}
.sm-wb .sm-wb-srv-title{font-size:clamp(24px,3vw,30px);font-weight:500;text-align:center;margin-bottom:8px;letter-spacing:-1px}
.sm-wb .sm-wb-srv-title em{font-style:normal;color:var(--wb-accent)}
.sm-wb .sm-wb-srv-sub{font-size:18px;color:#8c96a6;text-align:center;margin-bottom:36px}
.sm-wb .sm-wb-sgrid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:14px;margin-bottom:48px}
.sm-wb .sm-wb-scard{padding:28px 24px;border-radius:18px;background:#fff;border:1px solid #eef0f4;position:relative;overflow:hidden;cursor:pointer;transition:all .35s cubic-bezier(.25,.46,.45,.94)}
.sm-wb .sm-wb-scard::before{content:'';position:absolute!important;left:0;top:0;bottom:0;width:4px;border-radius:0 4px 4px 0;background:var(--wb-accent);transform:scaleY(0);transition:transform .35s}
.sm-wb .sm-wb-scard:hover{border-color:rgba(200,16,46,.12);box-shadow:0 8px 28px rgba(26,39,68,.05);transform:translateY(-3px)}
.sm-wb .sm-wb-scard:hover::before,.sm-wb .sm-wb-scard.ex::before{transform:scaleY(1)}
.sm-wb .sm-wb-scard.ex{border-color:rgba(200,16,46,.15)}
.sm-wb .sm-wb-scard-top{display:flex!important;align-items:flex-start!important;gap:14px;margin-bottom:12px}
.sm-wb .sm-wb-scard-icon{width:48px!important;height:48px!important;border-radius:14px;flex-shrink:0;background:#f8f9fb;border:1px solid #eef0f4;display:flex!important;align-items:center!important;justify-content:center!important;font-size:24px;transition:transform .3s}
.sm-wb .sm-wb-scard:hover .sm-wb-scard-icon{transform:scale(1.06)}
.sm-wb .sm-wb-scard-name{font-size:20px;font-weight:700;color:#1a2744;margin-bottom:3px}
.sm-wb .sm-wb-scard-hint{font-size:16px;color:#8c96a6}
.sm-wb .sm-wb-scard-desc{font-size:17px;color:#5a6578;line-height:1.7;margin-bottom:14px}
.sm-wb .sm-wb-scard-toggle{display:flex!important;align-items:center!important;gap:6px;font-size:15px;font-weight:700;color:var(--wb-accent)}
.sm-wb .sm-wb-scard-toggle svg{width:14px;height:14px;transition:transform .3s}
.sm-wb .sm-wb-scard.ex .sm-wb-scard-toggle svg{transform:rotate(180deg)}
.sm-wb .sm-wb-scard-detail{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.25,.46,.45,.94)}
.sm-wb .sm-wb-scard.ex .sm-wb-scard-detail{max-height:300px}
.sm-wb .sm-wb-scard-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px;padding-top:14px;border-top:1px solid #eef0f4;margin-bottom:12px}
.sm-wb .sm-wb-scard-stat{display:flex!important;justify-content:space-between!important;padding:6px 10px;border-radius:8px;background:#f8f9fb}
.sm-wb .sm-wb-scard-sk{font-size:14px;color:#8c96a6}
.sm-wb .sm-wb-scard-sv{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:#1a2744}
.sm-wb .sm-wb-scard-sv em{font-style:normal;color:var(--wb-accent)}
.sm-wb .sm-wb-scard-tags{display:flex!important;flex-wrap:wrap;gap:5px}
.sm-wb .sm-wb-scard-tag{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;padding:3px 10px;border-radius:5px;background:#f5f6f8;color:#5a6578}

/* CTA */
.sm-wb .sm-wb-cta{max-width:1140px;margin:0 auto;padding:0 24px 64px}
.sm-wb .sm-wb-cta-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:32px 36px;border-radius:20px;background:#1a2744;box-shadow:0 8px 32px rgba(26,39,68,.12)}
.sm-wb .sm-wb-cta-text{color:rgba(255,255,255,.55);font-size:19px;line-height:1.65;max-width:520px}
.sm-wb .sm-wb-cta-text strong{color:#fff}
.sm-wb .sm-wb-cta-btn{display:inline-flex!important;align-items:center!important;gap:10px;padding:14px 28px;border-radius:50px;font-size:18px;font-weight:700;font-family:inherit;text-decoration:none;color:#fff;border:none;cursor:pointer;background:var(--wb-accent);box-shadow:0 4px 20px rgba(200,16,46,.3);transition:all .35s;flex-shrink:0}
.sm-wb .sm-wb-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,16,46,.4);background:#a80d26}
.sm-wb .sm-wb-cta-btn svg{width:18px;height:18px;transition:transform .3s}
.sm-wb .sm-wb-cta-btn:hover svg{transform:translateX(4px)}

@media(max-width:960px){
    .sm-wb .sm-wb-header{padding:48px 16px 24px}
    .sm-wb .sm-wb-title{font-size:30px!important;letter-spacing:-1px}
    .sm-wb .sm-wb-board-section{padding:0 12px 40px}
    .sm-wb .sm-wb-canvas-area{height:300px!important}
    .sm-wb .sm-wb-chrome{flex-wrap:wrap!important;gap:0}
    .sm-wb .sm-wb-chrome-l{width:100%;overflow-x:auto}
    .sm-wb .sm-wb-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .sm-wb .sm-wb-tabs::-webkit-scrollbar{display:none}
    .sm-wb .sm-wb-tab{padding:0 12px;font-size:11px;flex-shrink:0}
    .sm-wb .sm-wb-chrome-r{width:100%;border-top:1px solid #eef0f4;padding:8px 12px!important;height:auto!important;justify-content:center!important;flex-wrap:wrap!important;gap:6px}
    .sm-wb .sm-wb-colors,.sm-wb .sm-wb-sizes{display:none!important}
    .sm-wb .sm-wb-sep{display:none}
    .sm-wb .sm-wb-cursor{display:none!important}
    .sm-wb .sm-wb-specs-row{grid-template-columns:1fr 1fr!important;padding:0 12px 32px}
    .sm-wb .sm-wb-sgrid{grid-template-columns:1fr!important}
    .sm-wb .sm-wb-cta-bar{flex-direction:column!important;gap:20px;text-align:center;padding:28px 24px}
    .sm-wb .sm-wb-cta-btn{width:100%;justify-content:center!important}
    .sm-wb .sm-wb-sticky{width:100px!important;font-size:9px!important;padding:8px 10px!important}
    .sm-wb .sm-wb-products{flex-direction:column!important;align-items:center!important}
    .sm-wb .sm-wb-product{max-width:100%!important;width:100%}
    .sm-wb .sm-wb-kan{grid-template-columns:1fr!important;gap:8px}
    .sm-wb .sm-wb-slide{padding:20px 16px!important}
    .sm-wb .sm-wb-slide-title{font-size:18px!important}
    .sm-wb .sm-wb-bars{height:80px!important;gap:8px;padding:0 8px}
    .sm-wb .sm-wb-bar-val{font-size:8px}
    .sm-wb .sm-wb-bar-label{font-size:7px}
    .sm-wb .sm-wb-tl-txt{font-size:11px}
    .sm-wb .sm-wb-orbit{display:none!important}
    .sm-wb .sm-wb-planet{display:none!important}
    .sm-wb .sm-wb-footer{flex-direction:column!important;gap:8px;padding:10px 16px}
    .sm-wb .sm-wb-footer-hint{display:none}
}
@media(max-width:540px){
    .sm-wb .sm-wb-canvas-area{height:240px!important}
    .sm-wb .sm-wb-tab{padding:0 10px;font-size:10px}
    .sm-wb .sm-wb-tab-em{font-size:12px}
    .sm-wb .sm-wb-specs-row{grid-template-columns:1fr 1fr!important;gap:8px}
    .sm-wb .sm-wb-spec{padding:14px 10px}
    .sm-wb .sm-wb-spec-val{font-size:16px}
    .sm-wb .sm-wb-slide-tag{font-size:7px}
    .sm-wb .sm-wb-slide-title{font-size:16px!important}
    .sm-wb .sm-wb-slide-sub{font-size:10px}
    .sm-wb .sm-wb-sticky{display:none!important}
    .sm-wb .sm-wb-bars{height:60px!important}
    .sm-wb .sm-wb-bezel{padding:4px}
    .sm-wb .sm-wb-brand-name{font-size:7px;letter-spacing:.5px}
}

/* ═══════════════════════════════════════════════════
   35 · SERVICES ORBITAL
   ═══════════════════════════════════════════════════ */
.sm-orb{font-family:'DM Sans',sans-serif;background:#0a0f1c;color:#fff;position:relative;overflow:hidden;padding:64px 24px 48px}
.sm-orb .sm-orb-noise{position:absolute!important;inset:0;opacity:.015;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px}
.sm-orb .sm-orb-bg{position:absolute!important;inset:0;z-index:0;pointer-events:none}
.sm-orb .sm-orb-inner{max-width:1100px;margin:0 auto;position:relative;z-index:2}

/* Header */
.sm-orb .sm-orb-header{text-align:center;margin-bottom:40px}
.sm-orb .sm-orb-badge{display:inline-block!important;background:#C6183D;color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:6px 12px;border-radius:5px;margin-bottom:18px;box-shadow:0 4px 14px rgba(198,24,61,.4)}
.sm-orb .sm-orb-title{font-size:clamp(30px,4.5vw,46px);font-weight:500;line-height:1.08;letter-spacing:-1.5px;margin-bottom:10px}
.sm-orb .sm-orb-title em{font-style:normal;color:#c8102e}
.sm-orb .sm-orb-sub{font-size:16px;color:rgba(255,255,255,.25);line-height:1.7;max-width:420px;margin:0 auto}

/* Main layout */
.sm-orb .sm-orb-main{display:grid!important;grid-template-columns:520px 1fr!important;gap:40px;align-items:center!important;min-height:500px}

/* Orbital */
.sm-orb .sm-orb-orbit{position:relative;width:520px;height:520px}
.sm-orb .sm-orb-canvas{position:absolute!important;inset:0;z-index:1;pointer-events:none;width:100%!important;height:100%!important}
.sm-orb .sm-orb-hub{position:absolute!important;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;border-radius:50%;background:#fff;border:2px solid rgba(200,16,46,.12);display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 0 0 12px rgba(200,16,46,.06),0 0 0 28px rgba(200,16,46,.02),0 8px 40px rgba(0,0,0,.25)}
.sm-orb .sm-orb-hub img{height:auto;filter:none}
.sm-orb .sm-orb-ring{position:absolute!important;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0}
.sm-orb .sm-orb-ring--1{width:210px;height:210px;border:1px solid rgba(200,16,46,.06)}
.sm-orb .sm-orb-ring--2{width:340px;height:340px;border:1px dashed rgba(255,255,255,.03)}
.sm-orb .sm-orb-ring--3{width:470px;height:470px;border:1px solid rgba(255,255,255,.02)}

/* Nodes */
.sm-orb .sm-orb-node{position:absolute!important;z-index:4;display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px;cursor:pointer;transition:transform .3s ease}
.sm-orb .sm-orb-node:hover{transform:scale(1.12)}
.sm-orb .sm-orb-node.active{z-index:6}
.sm-orb .sm-orb-node-dot{width:60px!important;height:60px!important;border-radius:50%;background:rgba(13,20,36,.8);border:2px solid rgba(255,255,255,.06);display:flex!important;align-items:center!important;justify-content:center!important;font-size:26px;transition:all .4s cubic-bezier(.25,.46,.45,.94);backdrop-filter:blur(12px);position:relative}
.sm-orb .sm-orb-node.active .sm-orb-node-dot::before{content:'';position:absolute!important;inset:-8px;border-radius:50%;border:2px solid var(--accent);opacity:.3;animation:smOrbRing 2s ease-in-out infinite}
@keyframes smOrbRing{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.15);opacity:0}}
.sm-orb .sm-orb-node:hover .sm-orb-node-dot,.sm-orb .sm-orb-node.active .sm-orb-node-dot{border-color:var(--accent);box-shadow:0 0 24px var(--glow);background:var(--dot-bg)}
.sm-orb .sm-orb-node-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.2);text-align:center;max-width:80px;line-height:1.3;transition:color .3s}
.sm-orb .sm-orb-node:hover .sm-orb-node-label,.sm-orb .sm-orb-node.active .sm-orb-node-label{color:var(--accent)}

/* Detail */
.sm-orb .sm-orb-detail{opacity:0;transform:translateX(20px);transition:all .45s cubic-bezier(.25,.46,.45,.94)}
.sm-orb .sm-orb-detail.show{opacity:1;transform:none}
.sm-orb .sm-orb-detail-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:24px;padding:36px;backdrop-filter:blur(20px);position:relative;overflow:hidden}
.sm-orb .sm-orb-detail-card::before{content:'';position:absolute!important;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:var(--accent)}
.sm-orb .sm-orb-detail-card::after{content:'';position:absolute!important;top:-50%;right:-30%;width:300px;height:300px;border-radius:50%;background:var(--accent);opacity:.02;filter:blur(60px);pointer-events:none}
.sm-orb .sm-orb-detail-eyebrow{display:inline-flex!important;align-items:center!important;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;padding:5px 14px;border-radius:50px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02)}
.sm-orb .sm-orb-detail-eyebrow-dot{width:5px!important;height:5px!important;border-radius:50%;animation:smOrbPls 2s ease infinite}
@keyframes smOrbPls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
.sm-orb .sm-orb-detail-icon{font-size:36px;display:block;margin-bottom:8px}
.sm-orb .sm-orb-detail-name{font-size:28px;font-weight:500;letter-spacing:-.5px;margin-bottom:6px;line-height:1.1;color:#fff}
.sm-orb .sm-orb-detail-type{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(255,255,255,.55);letter-spacing:.5px;margin-bottom:18px}
.sm-orb .sm-orb-detail-desc{font-size:15px;color:rgba(255,255,255,.85);line-height:1.75;margin-bottom:24px}
.sm-orb .sm-orb-detail-stats{display:flex!important;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.sm-orb .sm-orb-detail-stat{padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04);text-align:center;flex:1;min-width:85px}
.sm-orb .sm-orb-detail-stat-val{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:700;display:block;margin-bottom:2px}
.sm-orb .sm-orb-detail-stat-lbl{font-size:10px;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.5px}
.sm-orb .sm-orb-detail-tags{display:flex!important;flex-wrap:wrap;gap:5px;margin-bottom:24px}
.sm-orb .sm-orb-detail-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;padding:4px 12px;border-radius:6px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.14)}
.sm-orb .sm-orb-detail-cta{display:inline-flex!important;align-items:center!important;gap:10px;padding:13px 26px;border-radius:50px;font-size:15px;font-weight:700;font-family:inherit;text-decoration:none;color:#fff;border:none;cursor:pointer;transition:all .35s}
.sm-orb .sm-orb-detail-cta:hover{transform:translateY(-2px)}
.sm-orb .sm-orb-detail-cta svg{width:16px;height:16px;transition:transform .3s}
.sm-orb .sm-orb-detail-cta:hover svg{transform:translateX(4px)}

@media(max-width:1060px){
    .sm-orb .sm-orb-main{grid-template-columns:1fr!important;gap:24px;justify-items:center}
    .sm-orb .sm-orb-orbit{width:360px;height:360px}
    .sm-orb .sm-orb-node-dot{width:46px!important;height:46px!important;font-size:20px}
    .sm-orb .sm-orb-node-label{font-size:9px;max-width:64px}
    .sm-orb .sm-orb-hub{width:72px!important;height:72px!important}
    .sm-orb .sm-orb-hub img{width:40px!important}
    .sm-orb .sm-orb-ring--1{width:160px;height:160px}
    .sm-orb .sm-orb-ring--2{width:250px;height:250px}
    .sm-orb .sm-orb-ring--3{width:340px;height:340px}
    .sm-orb .sm-orb-detail-card{padding:24px}
    .sm-orb .sm-orb-detail-name{font-size:22px}
}
@media(max-width:480px){
    .sm-orb .sm-orb-orbit{width:300px;height:300px}
    .sm-orb .sm-orb-node-dot{width:40px!important;height:40px!important;font-size:18px}
    .sm-orb .sm-orb-hub{width:60px!important;height:60px!important}
    .sm-orb .sm-orb-hub img{width:34px!important}
    .sm-orb .sm-orb-detail-stats{flex-direction:column!important}
    .sm-orb .sm-orb-title{font-size:26px!important}
}