body {
        padding-left: 0 !important;
        background: #f4f7ff !important;
    }

    .main-header {
        display: none !important;
    }

    main.container {
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .smt-app-home {
        width: min(100%, 1120px);
        margin: 0 auto;
        padding: 18px;
        color: #12172a;
        font-family: 'Poppins', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .smt-phone-shell {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(216, 225, 248, 0.8);
        border-radius: 28px;
        box-shadow: 0 24px 60px rgba(43, 67, 141, 0.12);
        padding: 28px;
        overflow: hidden;
    }

    .smt-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 22px;
    }

    .smt-top-left,
    .smt-top-actions,
    .smt-logo-lockup {
        display: flex;
        align-items: center;
    }

    .smt-top-left {
        gap: 14px;
        min-width: 0;
    }

    .smt-top-actions {
        gap: 12px;
    }

    .smt-logo-lockup {
        gap: 10px;
        min-width: 0;
        text-decoration: none;
    }

    .smt-logo-lockup img {
        width: 46px;
        height: 46px;
        object-fit: contain;
        flex: 0 0 auto;
    }

    .smt-logo-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.15;
    }

    .smt-logo-main {
        color: #000000 !important;
        font-weight: 900;
        font-size: 1.25rem;
        text-transform: uppercase;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }

    .smt-logo-sub {
        color: #16a34a !important;
        font-weight: 700;
        font-size: 0.76rem;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .smt-icon-btn {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #0f172a;
        background: #fff;
        box-shadow: 0 8px 22px rgba(42, 60, 120, 0.1);
        text-decoration: none;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .smt-menu-btn {
        background: transparent;
        box-shadow: none;
        font-size: 1.5rem;
    }

    .smt-notify {
        position: relative;
    }

    .smt-dot {
        position: absolute;
        top: 9px;
        right: 10px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff3158;
        border: 2px solid #fff;
    }

    .smt-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid #7ea2ff;
        overflow: hidden;
        background: linear-gradient(135deg, #60a5fa, #8b5cf6);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        text-decoration: none;
        flex: 0 0 auto;
    }

    .smt-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .smt-hero {
        position: relative;
        min-height: 300px;
        border-radius: 22px;
        background:
            radial-gradient(circle at 74% 18%, rgba(141, 211, 255, 0.85), transparent 26%),
            radial-gradient(circle at 88% 76%, rgba(62, 113, 255, 0.7), transparent 28%),
            linear-gradient(135deg, #3478ff 0%, #1136e8 56%, #0b1ab8 100%);
        color: #fff;
        padding: 34px 34px 28px;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(260px, 0.8fr);
        align-items: center;
        gap: 16px;
        box-shadow: 0 20px 42px rgba(31, 81, 229, 0.25);
    }

    .smt-hero::before,
    .smt-hero::after {
        content: "";
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 24px;
        transform: rotate(10deg);
        pointer-events: none;
    }

    .smt-hero::before {
        width: 150px;
        height: 96px;
        right: 170px;
        top: 38px;
        background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
    }

    .smt-hero::after {
        width: 118px;
        height: 136px;
        right: -18px;
        top: 46px;
        background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03));
    }

    .smt-hero-copy,
    .smt-hero-art {
        position: relative;
        z-index: 1;
    }

    .smt-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: rgba(255, 255, 255, 0.88);
        font-weight: 700;
        font-size: 0.95rem;
        margin-bottom: 18px;
    }

    .smt-hero h1 {
        font-size: clamp(2rem, 4.6vw, 3.1rem);
        line-height: 1.08;
        margin: 0 0 12px;
        font-weight: 800;
        letter-spacing: 0;
    }

    .smt-hero p {
        margin: 0;
        max-width: 430px;
        color: rgba(255, 255, 255, 0.86);
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.55;
        font-weight: 500;
    }

    .smt-primary-cta {
        margin-top: 28px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 0 24px;
        border-radius: 999px;
        background: #fff;
        color: #4338ca;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 16px 30px rgba(16, 24, 40, 0.18);
    }

    .smt-hero-art {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 230px;
    }

    .smt-robot-stage {
        position: relative;
        width: min(100%, 330px);
        aspect-ratio: 1 / 0.78;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .smt-robot-stage img {
        position: absolute;
        inset: 2% auto auto 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0.9;
        filter: drop-shadow(0 18px 30px rgba(0, 13, 78, 0.3));
    }

    .smt-ai-pulse-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #38bdf8;
        box-shadow: 0 0 10px #38bdf8;
        display: inline-block;
        animation: smt-pulse-glow 1.5s infinite;
    }

    @keyframes smt-pulse-glow {
        0%, 100% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 18px #38bdf8; }
    }

    .smt-scanner-stage {
        position: relative;
        width: 280px;
        height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .smt-sheet-paper {
        position: relative;
        width: 205px;
        height: 225px;
        background: #ffffff;
        border-radius: 12px;
        padding: 12px 14px;
        box-shadow: 0 16px 36px rgba(0, 18, 90, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.45);
        transform: rotate(-2deg);
        transition: transform 0.3s ease;
        overflow: hidden;
    }

    .smt-sheet-margin-line {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 28px;
        width: 1.5px;
        background: rgba(239, 68, 68, 0.35);
    }

    .smt-sheet-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
        padding-left: 20px;
    }

    .smt-sheet-tag {
        font-size: 8px;
        font-weight: 800;
        background: #e0e7ff;
        color: #3730a3;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .smt-sheet-qno {
        font-size: 8px;
        font-weight: 700;
        color: #6b7280;
    }

    .smt-sheet-qtext {
        font-size: 9px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 8px;
        padding-left: 20px;
        line-height: 1.2;
    }

    .smt-sheet-lines {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .smt-sheet-handwritten {
        height: 4px;
        background: linear-gradient(90deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
        border-radius: 4px;
        opacity: 0.75;
    }

    .smt-sheet-handwritten.line-1 { width: 90%; }
    .smt-sheet-handwritten.line-2 { width: 95%; }
    .smt-sheet-handwritten.line-3 { width: 80%; }
    .smt-sheet-handwritten.line-4 { width: 85%; }

    .smt-sheet-diagram-box {
        margin: 3px 0;
        padding: 4px 6px;
        background: #f0fdf4;
        border: 1px dashed #22c55e;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 7px;
        color: #166534;
        font-weight: 700;
    }

    .smt-diag-mark {
        background: #22c55e;
        color: #fff;
        padding: 1px 4px;
        border-radius: 3px;
        font-size: 7px;
    }

    /* Glowing Laser Scanner */
    .smt-laser-scanner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        z-index: 10;
        pointer-events: none;
        animation: smt-laser-scan 2.8s infinite ease-in-out;
    }

    .smt-laser-beam {
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, #00f2fe 30%, #38bdf8 50%, #00f2fe 70%, transparent 100%);
        box-shadow: 0 0 14px #00f2fe, 0 0 24px #38bdf8;
    }

    .smt-laser-glow {
        position: absolute;
        left: 0;
        right: 0;
        top: -20px;
        height: 40px;
        background: linear-gradient(180deg, rgba(0, 242, 254, 0.18) 0%, rgba(56, 189, 248, 0.04) 100%);
        pointer-events: none;
    }

    @keyframes smt-laser-scan {
        0% { top: 0%; opacity: 0.3; }
        15% { opacity: 1; }
        85% { opacity: 1; }
        100% { top: 96%; opacity: 0.3; }
    }

    @media (prefers-reduced-motion: reduce) {
        .smt-laser-scanner,
        .smt-scanner-pill,
        .smt-typewriter-cursor {
            display: none !important;
            animation: none !important;
        }
        .smt-infinite-slider-track {
            transition: none !important;
        }
    }

    /* Floating Pills */
    .smt-scanner-pill {
        position: absolute;
        z-index: 15;
        background: rgba(15, 23, 42, 0.88);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        padding: 6px 12px;
        border-radius: 99px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
    }

    .smt-pill-model {
        top: 0px;
        right: 0px;
        animation: smt-float-pill 3s infinite ease-in-out;
    }

    .smt-pill-score {
        bottom: 2px;
        left: -10px;
        border-radius: 12px;
        padding: 6px 10px;
        border-color: rgba(34, 197, 94, 0.4);
        background: rgba(6, 78, 59, 0.9);
        animation: smt-float-pill-reverse 3.5s infinite ease-in-out;
    }

    .smt-pill-score strong {
        font-size: 11px;
        color: #4ade80;
        display: block;
        line-height: 1.1;
    }

    .smt-pill-score small {
        font-size: 8px;
        color: #d1fae5;
        display: block;
    }

    .smt-score-check {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #22c55e;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
    }

    @keyframes smt-float-pill {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-6px); }
    }

    @keyframes smt-float-pill-reverse {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(6px); }
    }

    .smt-ai-copy-cta {
        background: #ffffff !important;
        color: #4338ca !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .smt-ai-copy-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25) !important;
        background: #f8fafc !important;
    }

    .smt-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        margin: 26px 0;
    }

    .smt-stat-card,
    .smt-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(225, 231, 246, 0.9);
        border-radius: 16px;
        box-shadow: 0 14px 32px rgba(40, 60, 120, 0.08);
    }

    .smt-stat-card {
        min-height: 132px;
        padding: 20px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 76px;
        gap: 12px;
        align-items: center;
    }

    .smt-stat-title {
        color: #2c3448;
        font-size: 0.92rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .smt-stat-value {
        display: block;
        margin: 14px 0 4px;
        font-weight: 800;
        color: #111827;
        font-size: 1.75rem;
    }

    .smt-stat-sub {
        color: #697386;
        font-size: 0.86rem;
        font-weight: 600;
    }

    .smt-ring {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: conic-gradient(var(--ring-color) var(--ring-progress), #eef2ff 0);
        position: relative;
    }

    .smt-ring::before {
        content: "";
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #fff;
        box-shadow: inset 0 0 14px rgba(30, 41, 59, 0.04);
    }

    .smt-ring i {
        position: absolute;
        color: var(--ring-color);
        font-size: 1.18rem;
    }

    .smt-card {
        padding: 22px;
        margin-bottom: 24px;
    }

    .smt-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
    }

    .smt-section-head h2,
    .smt-mini-title {
        font-size: 1.2rem;
        line-height: 1.25;
        margin: 0;
        color: #101827;
        font-weight: 800;
    }

    .smt-view-btn {
        border: 0;
        background: transparent;
        color: #4057d8;
        font-weight: 800;
        font-size: 0.85rem;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
    }

    .smt-actions-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    .smt-action,
    .smt-exam-card,
    .smt-reco-card,
    .smt-performer,
    .smt-exam-row {
        text-decoration: none;
        color: inherit;
    }

    .smt-action {
        min-height: 150px;
        border-radius: 16px;
        padding: 22px 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        background: linear-gradient(135deg, var(--soft-bg), #fff);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .smt-action:hover,
    .smt-exam-card:hover,
    .smt-reco-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 34px rgba(50, 70, 130, 0.12);
    }

    .smt-action-icon {
        width: 68px;
        height: 68px;
        border-radius: 20px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--action-color);
        background: color-mix(in srgb, var(--action-color) 16%, #ffffff);
        box-shadow: 0 10px 22px color-mix(in srgb, var(--action-color) 18%, transparent);
        font-size: 1.95rem;
        transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
    }

    .smt-action:hover .smt-action-icon {
        transform: scale(1.12) rotate(3deg);
    }

    /* From Uiverse.io by Nawsome - Typewriter Animation Styles */
    .smt-typewriter-wrapper {
        transform: scale(0.42);
        transform-origin: center;
        width: 120px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .typewriter {
        --blue: #5C86FF;
        --blue-dark: #275EFE;
        --key: #fff;
        --paper: #EEF0FD;
        --text: #D3D4EC;
        --tool: #FBC56C;
        --duration: 3s;
        position: relative;
        -webkit-animation: bounce05 var(--duration) linear infinite;
        animation: bounce05 var(--duration) linear infinite;
    }

    .typewriter .slide {
        width: 92px;
        height: 20px;
        border-radius: 3px;
        margin-left: 14px;
        transform: translateX(14px);
        background: linear-gradient(var(--blue), var(--blue-dark));
        -webkit-animation: slide05 var(--duration) ease infinite;
        animation: slide05 var(--duration) ease infinite;
        position: relative;
    }

    .typewriter .slide:before, .typewriter .slide:after,
    .typewriter .slide i:before {
        content: "";
        position: absolute;
        background: var(--tool);
    }

    .typewriter .slide:before {
        width: 2px;
        height: 8px;
        top: 6px;
        left: 100%;
    }

    .typewriter .slide:after {
        left: 94px;
        top: 3px;
        height: 14px;
        width: 6px;
        border-radius: 3px;
    }

    .typewriter .slide i {
        display: block;
        position: absolute;
        right: 100%;
        width: 6px;
        height: 4px;
        top: 4px;
        background: var(--tool);
    }

    .typewriter .slide i:before {
        right: 100%;
        top: -2px;
        width: 4px;
        border-radius: 2px;
        height: 14px;
    }

    .typewriter .paper {
        position: absolute;
        left: 24px;
        top: -26px;
        width: 40px;
        height: 46px;
        border-radius: 5px;
        background: var(--paper);
        transform: translateY(46px);
        -webkit-animation: paper05 var(--duration) linear infinite;
        animation: paper05 var(--duration) linear infinite;
    }

    .typewriter .paper:before {
        content: "";
        position: absolute;
        left: 6px;
        right: 6px;
        top: 7px;
        border-radius: 2px;
        height: 4px;
        transform: scaleY(0.8);
        background: var(--text);
        box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
    }

    .typewriter .keyboard {
        width: 120px;
        height: 56px;
        margin-top: -10px;
        z-index: 1;
        position: relative;
    }

    .typewriter .keyboard:before, .typewriter .keyboard:after {
        content: "";
        position: absolute;
    }

    .typewriter .keyboard:before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 7px;
        background: linear-gradient(135deg, var(--blue), var(--blue-dark));
        transform: perspective(10px) rotateX(2deg);
        transform-origin: 50% 100%;
    }

    .typewriter .keyboard:after {
        left: 2px;
        top: 25px;
        width: 11px;
        height: 4px;
        border-radius: 2px;
        box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
        -webkit-animation: keyboard05 var(--duration) linear infinite;
        animation: keyboard05 var(--duration) linear infinite;
    }

    @keyframes bounce05 {
        85%, 92%, 100% {
            transform: translateY(0);
        }
        89% {
            transform: translateY(-4px);
        }
        95% {
            transform: translateY(2px);
        }
    }

    @keyframes slide05 {
        5% {
            transform: translateX(14px);
        }
        15%, 30% {
            transform: translateX(6px);
        }
        40%, 55% {
            transform: translateX(0);
        }
        65%, 70% {
            transform: translateX(-4px);
        }
        80%, 89% {
            transform: translateX(-12px);
        }
        100% {
            transform: translateX(14px);
        }
    }

    @keyframes paper05 {
        5% {
            transform: translateY(46px);
        }
        20%, 30% {
            transform: translateY(34px);
        }
        40%, 55% {
            transform: translateY(22px);
        }
        65%, 70% {
            transform: translateY(10px);
        }
        80%, 85% {
            transform: translateY(0);
        }
        92%, 100% {
            transform: translateY(46px);
        }
    }

    @keyframes keyboard05 {
        5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
            box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
        }
        9% {
            box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
        }
        18% {
            box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
        }
        27% {
            box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
        }
        36% {
            box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
        }
        45% {
            box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
        }
        54% {
            box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
        }
        63% {
            box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
        }
        72% {
            box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
        }
        81% {
            box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
        }
    }

    /* Clean CSS Animations for Remaining Quick Actions */
    
    /* 1. Start Test Clipboard Animation */
    .smt-test-icon {
        --color: #7c3aed;
        width: 30px;
        height: 36px;
        border: 3px solid var(--color);
        border-radius: 6px;
        position: relative;
        background: #fff;
    }
    .smt-test-icon::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 14px;
        height: 6px;
        background: var(--color);
        border-radius: 3px 3px 0 0;
    }
    .smt-test-pencil {
        width: 4px;
        height: 14px;
        background: #f59e0b;
        position: absolute;
        top: 6px;
        left: 6px;
        transform: rotate(-45deg);
        animation: writeTest 2.2s ease-in-out infinite;
    }
    .smt-test-pencil::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 2px solid transparent;
        border-right: 2px solid transparent;
        border-top: 4px solid #1e293b;
    }
    @keyframes writeTest {
        0%, 100% { transform: translate(0, 0) rotate(-45deg); }
        30% { transform: translate(6px, 4px) rotate(-45deg); }
        65% { transform: translate(3px, 8px) rotate(-45deg); }
    }

    /* 2. PYQs scanning animation */
    .smt-pyq-icon {
        --color: #10b981;
        width: 30px;
        height: 36px;
        border: 3px solid var(--color);
        border-radius: 5px;
        position: relative;
        background: #fff;
        overflow: hidden;
    }
    .smt-pyq-icon::before {
        content: 'PYQ';
        position: absolute;
        top: 3px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 7px;
        font-weight: 900;
        color: var(--color);
        letter-spacing: 0.5px;
    }
    .pyq-doc {
        position: absolute;
        bottom: 5px;
        left: 4px;
        right: 4px;
        height: 2px;
        background: #cbd5e1;
        box-shadow: 0 -4px 0 #cbd5e1, 0 -8px 0 #cbd5e1;
    }
    .pyq-scan-line {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: #10b981;
        box-shadow: 0 0 6px #10b981;
        animation: pyqScan 2s linear infinite;
    }
    @keyframes pyqScan {
        0%, 100% { top: 2px; }
        50% { top: 30px; }
    }

    /* 3. Quiz Bulbing Animation */
    .smt-quiz-icon {
        --color: #f59e0b;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
    .quiz-bulb {
        font-size: 1.85rem;
        color: var(--color);
        animation: bulbPulse 2s ease-in-out infinite;
        z-index: 2;
    }
    .quiz-rays {
        position: absolute;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(245, 158, 11, 0.22);
        animation: rayExpand 2s ease-out infinite;
        z-index: 1;
    }
    @keyframes bulbPulse {
        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.3)); }
        50% { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.7)); }
    }
    @keyframes rayExpand {
        0% { transform: scale(0.6); opacity: 1; }
        100% { transform: scale(1.5); opacity: 0; }
    }

    /* 5. Premium crown sparkle animation */
    .smt-premium-icon {
        --color: #ef4444;
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .premium-crown {
        font-size: 1.85rem;
        color: #fbbf24;
        filter: drop-shadow(0 3px 6px rgba(239, 68, 68, 0.2));
        animation: crownFloat 3s ease-in-out infinite;
    }
    .premium-sparkle {
        position: absolute;
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
        top: 6px;
        right: 6px;
        box-shadow: 0 0 4px #fff, 0 0 10px #fbbf24;
        animation: sparkleRotate 2s linear infinite;
    }
    @keyframes crownFloat {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-3px) rotate(4deg); }
    }
    @keyframes sparkleRotate {
        0% { transform: scale(0) rotate(0deg); opacity: 0; }
        50% { transform: scale(1.1) rotate(180deg); opacity: 1; }
        100% { transform: scale(0) rotate(360deg); opacity: 0; }
    }

    /* 6. Megaphone sound emitting animation */
    .smt-news-icon {
        --color: #0f766e;
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .news-phone {
        font-size: 1.8rem;
        color: var(--color);
        animation: hornShake 1.5s ease-in-out infinite;
        z-index: 2;
        transform-origin: bottom left;
    }
    .news-wave {
        position: absolute;
        border: 2px solid var(--color);
        border-radius: 50%;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        right: -2px;
        top: 8px;
        transform: rotate(-30deg);
        z-index: 1;
    }
    .news-wave.wave-1 {
        width: 14px;
        height: 14px;
        animation: waveEmit 1.5s linear infinite;
    }
    .news-wave.wave-2 {
        width: 20px;
        height: 20px;
        animation: waveEmit 1.5s linear infinite 0.5s;
    }
    @keyframes hornShake {
        0%, 100% { transform: rotate(0); }
        25% { transform: rotate(-5deg); }
        75% { transform: rotate(5deg); }
    }
    @keyframes waveEmit {
        0% { transform: scale(0.5) rotate(-30deg); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: scale(1.3) rotate(-30deg); opacity: 0; }
    }

    /* 7. Reviews popping star rating animation */
    .smt-review-icon {
        --color: #ea580c;
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .review-star {
        font-size: 1.9rem;
        color: #f59e0b;
        animation: starPulse 2.5s ease-in-out infinite;
    }
    .review-mini-star {
        position: absolute;
        font-size: 0.65rem;
        color: #fbbf24;
        opacity: 0;
    }
    .review-mini-star.mini-1 {
        top: 3px;
        left: 3px;
        animation: miniStar 2s infinite;
    }
    .review-mini-star.mini-2 {
        bottom: 3px;
        right: 3px;
        animation: miniStar 2s infinite 1s;
    }
    @keyframes starPulse {
        0%, 100% { transform: scale(1) rotate(0deg); }
        50% { transform: scale(1.08) rotate(12deg); }
    }
    @keyframes miniStar {
        0% { transform: translate(0, 0) scale(0); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translate(-8px, -8px) scale(1.1) rotate(45deg); opacity: 0; }
    }

    /* 8. App bot waving animation */
    .smt-app-icon {
        --color: #4f46e5;
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .app-bot {
        font-size: 1.95rem;
        color: #22c55e;
        animation: botWave 2s ease-in-out infinite;
    }
    @keyframes botWave {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-2px) rotate(-6deg); }
    }

    .smt-reco-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #ffffff;
        border: 2px solid #e2e8f0;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
        overflow: hidden;
        padding: 6px;
    }

    .smt-reco-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .smt-action .smt-action-icon {
        color: var(--action-color);
    }

    .smt-action strong {
        color: #162033;
        font-size: 1rem;
    }

    .smt-action span {
        color: #536077;
        font-size: 0.86rem;
        font-weight: 500;
    }

    .smt-extra-action {
        display: none;
    }

    .smt-actions-expanded .smt-extra-action {
        display: flex;
    }

    .smt-exams-grid {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 18px;
    }

    .smt-exam-card {
        min-height: 128px;
        display: grid;
        justify-items: center;
        align-content: start;
        gap: 10px;
    }

    .smt-exam-icon {
        width: 110px;
        aspect-ratio: 1;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #ffffff;
        border: 2px solid #e2e8f0;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
        overflow: hidden;
        padding: 14px;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .smt-exam-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .smt-exam-card span {
        color: #172033;
        font-weight: 800;
        font-size: 0.98rem;
        text-align: center;
        line-height: 1.25;
    }

    .smt-extra-exam {
        display: none;
    }

    .smt-exams-expanded .smt-extra-exam {
        display: grid;
    }

    .smt-dashboard-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 24px;
        margin-bottom: 24px;
    }

    .smt-progress-card {
        min-height: 282px;
    }

    .smt-chart {
        height: 142px;
        margin: 4px 0 18px;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        align-items: end;
        gap: 8px;
        padding-top: 14px;
        border-bottom: 1px solid #e8eefb;
        background: repeating-linear-gradient(to top, transparent 0, transparent 34px, rgba(226, 232, 240, 0.75) 35px);
    }

    .smt-chart-point {
        min-width: 0;
        height: var(--bar);
        position: relative;
        display: flex;
        align-items: end;
        justify-content: center;
    }

    .smt-chart-point::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid #4f7cff;
        box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
        margin-bottom: -5px;
    }

    .smt-chart-point::after {
        content: attr(data-day);
        position: absolute;
        bottom: -24px;
        color: #7b8497;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .smt-progress-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 34px;
    }

    .smt-metric {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #172033;
        font-weight: 800;
    }

    .smt-metric i {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #4377ff;
        background: #eef4ff;
    }

    .smt-metric span {
        display: block;
        color: #7a8394;
        font-size: 0.76rem;
        font-weight: 700;
    }

    .smt-upcoming-list {
        display: grid;
        gap: 12px;
    }

    .smt-exam-row {
        min-height: 70px;
        border-radius: 14px;
        background: #f8faff;
        display: grid;
        grid-template-columns: 58px 1fr auto 18px;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
    }

    .smt-date {
        width: 46px;
        height: 48px;
        border-radius: 12px;
        background: #eef2ff;
        color: #4057d8;
        display: grid;
        place-items: center;
        font-weight: 900;
        line-height: 1;
    }

    .smt-date small {
        display: block;
        font-size: 0.62rem;
        color: #7380a7;
    }

    .smt-exam-row strong {
        color: #162033;
        font-size: 0.92rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.35;
    }

    .smt-days-left {
        color: #4f7cff;
        background: #edf4ff;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .smt-reco-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }

    .smt-reco-card {
        min-height: 102px;
        border-radius: 16px;
        background: linear-gradient(135deg, #ffffff, #f4f7ff);
        border: 1px solid #dbeafe;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 12px;
        box-shadow: 0 8px 16px rgba(17, 54, 232, 0.04), 0 2px 4px rgba(17, 54, 232, 0.02), inset 0 -4px 0 rgba(17, 54, 232, 0.08);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .smt-reco-card:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 30px rgba(17, 54, 232, 0.12), inset 0 -4px 0 rgba(17, 54, 232, 0.1);
    }

    .smt-reco-card strong {
        display: block;
        color: #172033;
        font-size: 0.92rem;
        line-height: 1.25;
    }

    .smt-reco-card span,
    .smt-reco-card em {
        display: block;
        color: #657086;
        font-size: 0.76rem;
        font-style: normal;
        margin-top: 3px;
        font-weight: 600;
    }

    .smt-reco-card em {
        color: #3d63e6;
        margin-top: 8px;
        font-weight: 800;
    }

    .smt-bottom-grid {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr);
        gap: 24px;
        margin-bottom: 24px;
        overflow: hidden;
    }

    .smt-compact-card {
        min-height: 220px;
    }

    .smt-performer {
        display: grid;
        grid-template-columns: 32px 42px minmax(0, 1fr) 16px;
        align-items: center;
        gap: 10px;
        min-height: 54px;
        border-bottom: 1px solid #edf1fb;
    }

    .smt-performer:last-child {
        border-bottom: 0;
    }

    .smt-rank {
        font-weight: 900;
        color: #f59e0b;
    }

    .smt-face {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 0.8rem;
        font-weight: 900;
        background: linear-gradient(135deg, #2563eb, #22c55e);
    }

    .smt-performer strong,
    .smt-performer span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .smt-performer strong {
        color: #172033;
        font-size: 0.84rem;
    }

    .smt-performer span {
        color: #697386;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .smt-badges {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        align-items: end;
        text-align: center;
    }

    .smt-badge {
        display: grid;
        gap: 10px;
        justify-items: center;
        color: #536077;
        font-size: 0.74rem;
        font-weight: 800;
    }

    .smt-medal {
        position: relative;
        width: 66px;
        height: 76px;
        clip-path: polygon(50% 0, 92% 20%, 92% 70%, 50% 100%, 8% 70%, 8% 20%);
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 1.35rem;
        font-weight: 900;
        background: linear-gradient(145deg, var(--medal-a), var(--medal-b));
        box-shadow: 0 12px 22px color-mix(in srgb, var(--medal-b) 32%, transparent);
        z-index: 1;
    }

    .smt-medal::before {
        content: "";
        position: absolute;
        inset: 2px;
        clip-path: polygon(50% 0, 92% 20%, 92% 70%, 50% 100%, 8% 70%, 8% 20%);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 60%);
        z-index: -1;
    }

    .smt-medal::after {
        content: "";
        position: absolute;
        inset: 4px;
        background: radial-gradient(circle at top left, rgba(255,255,255,0.25), transparent 70%);
        clip-path: polygon(50% 0, 92% 20%, 92% 70%, 50% 100%, 8% 70%, 8% 20%);
        z-index: 0;
    }

    /* Testimonials Swiper/Slider */
    .smt-testimonials-slider {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    
    .smt-testimonials-track {
        display: flex;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        width: 100%;
    }
    
    .smt-testimonial-slide {
        min-width: 100%;
        box-sizing: border-box;
        padding: 4px;
    }

    .smt-quote-card {
        background: linear-gradient(135deg, #fbf8ff, #ffffff);
        border: 1px solid rgba(225, 231, 246, 0.85);
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 10px 24px rgba(40, 60, 120, 0.04);
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
    }
    
    .smt-quote-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .smt-quote-stars {
        color: #f59e0b;
        font-size: 0.9rem;
    }
    
    .smt-quote-date {
        color: #64748b;
        font-size: 0.74rem;
        font-weight: 500;
    }
    
    .smt-quote-text {
        color: #3b4252;
        font-size: 0.9rem;
        line-height: 1.5;
        font-weight: 500;
        font-style: italic;
        min-height: 52px;
    }
    
    .smt-quote-user-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 4px;
        border-top: 1px solid rgba(241, 245, 249, 0.8);
        padding-top: 10px;
    }
    
    .smt-quote-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        background: #e2e8f0;
        border: 2px solid #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    
    .smt-quote-avatar-initials {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-weight: 700;
        font-size: 1.1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .smt-quote-user-meta {
        display: flex;
        flex-direction: column;
    }
    
    .smt-quote-username {
        color: #1e293b;
        font-weight: 700;
        font-size: 0.9rem;
        line-height: 1.2;
    }
    
    .smt-quote-category {
        color: #64748b;
        font-size: 0.76rem;
        font-weight: 600;
        margin-top: 2px;
    }

    .smt-slider-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 12px;
    }

    .smt-slider-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #cbd5e1;
        cursor: pointer;
        transition: background-color 0.2s, width 0.2s;
    }

    .smt-slider-dot.is-active {
        background: #4f46e5;
        width: 20px;
        border-radius: 4px;
    }

    .smt-quote i {
        color: #9b5cf6;
        font-size: 1.35rem;
        display: block;
        margin-bottom: 12px;
    }

    .smt-quote-user {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 16px;
        color: #172033;
        font-weight: 800;
        font-size: 0.84rem;
    }

    /* ========================================================
       Infinite Category Slider (speedOnHover={20}, gap={24})
       ======================================================== */
    .smt-infinite-slider-section {
        margin-bottom: 24px;
        padding: 22px 24px;
        position: relative;
        background: #ffffff;
        border: 1px solid rgba(216, 225, 248, 0.85);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(43, 67, 141, 0.05);
    }

    .smt-slider-badge-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(108, 63, 160, 0.12), rgba(183, 243, 74, 0.22));
        color: #6C3FA0;
        font-size: 0.95rem;
    }

    .smt-infinite-slider-viewport {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding: 10px 0 14px 0;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: pan-y;
    }

    .smt-infinite-slider-viewport:active {
        cursor: grabbing;
    }

    .smt-infinite-slider-track {
        display: flex;
        width: max-content;
        will-change: transform;
        transform: translate3d(0, 0, 0);
    }

    .smt-infinite-slider-group {
        display: flex;
        align-items: center;
        gap: 24px;
        padding-right: 24px;
        flex-shrink: 0;
    }

    /* Direct Logo Item - Zero Box, Zero Border, Compact Logo with Name Below */
    .smt-infinite-logo-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 88px;
        flex: 0 0 88px;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 4px 2px;
        text-decoration: none;
        cursor: pointer;
        outline: none;
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-sizing: border-box;
    }

    .smt-infinite-logo-wrap {
        width: 54px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .smt-infinite-logo-img {
        width: 100%;
        height: 100%;
        max-width: 50px;
        max-height: 50px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.08));
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.22s ease;
    }

    .smt-infinite-logo-title {
        font-size: 0.72rem;
        font-weight: 700;
        color: #1e293b;
        margin-top: 6px;
        text-align: center;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 84px;
        display: block;
        transition: color 0.2s ease;
    }

    .smt-infinite-logo-item:hover,
    .smt-infinite-logo-item:focus-visible {
        transform: translateY(-3px);
    }

    .smt-infinite-logo-item:hover .smt-infinite-logo-wrap,
    .smt-infinite-logo-item:focus-visible .smt-infinite-logo-wrap {
        transform: scale(1.15);
    }

    .smt-infinite-logo-item:hover .smt-infinite-logo-img,
    .smt-infinite-logo-item:focus-visible .smt-infinite-logo-img {
        filter: drop-shadow(0 6px 14px rgba(108, 63, 160, 0.35));
    }

    .smt-infinite-logo-item:hover .smt-infinite-logo-title,
    .smt-infinite-logo-item:focus-visible .smt-infinite-logo-title {
        color: #6C3FA0;
    }

    @media (max-width: 640px) {
        .smt-infinite-slider-section {
            padding: 16px 14px;
            border-radius: 16px;
        }

        .smt-infinite-logo-item {
            width: 74px;
            flex: 0 0 74px;
            padding: 2px 0;
        }

        .smt-infinite-logo-wrap {
            width: 46px;
            height: 46px;
        }

        .smt-infinite-logo-img {
            max-width: 42px;
            max-height: 42px;
        }

        .smt-infinite-logo-title {
            font-size: 0.66rem;
            max-width: 72px;
            margin-top: 4px;
        }

        .smt-infinite-slider-group {
            gap: 16px;
            padding-right: 16px;
        }
    }

    .smt-premium {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr) auto 180px;
        align-items: center;
        gap: 22px;
        min-height: 132px;
        padding: 20px 24px;
        margin-bottom: 4px;
        border-radius: 18px;
        color: #fff;
        background:
            radial-gradient(circle at 92% 22%, rgba(125, 211, 252, 0.75), transparent 24%),
            linear-gradient(135deg, #6d28d9 0%, #3047ff 55%, #0ea5e9 100%);
        box-shadow: 0 22px 44px rgba(59, 80, 222, 0.22);
        overflow: hidden;
    }

    .smt-crown {
        font-size: 3.6rem;
        color: #ffd34d;
        filter: drop-shadow(0 12px 16px rgba(0,0,0,0.24));
    }

    .smt-premium h2 {
        margin: 0 0 6px;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .smt-premium p {
        margin: 0;
        color: rgba(255, 255, 255, 0.82);
        line-height: 1.45;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .smt-premium a {
        min-height: 48px;
        padding: 0 24px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: #fff;
        color: #4057d8;
        font-weight: 900;
        text-decoration: none;
        white-space: nowrap;
    }

    .smt-growth-art {
        align-self: stretch;
        display: flex;
        align-items: end;
        justify-content: center;
        gap: 10px;
    }

    .smt-growth-art span {
        display: block;
        width: 34px;
        border-radius: 10px 10px 0 0;
        background: linear-gradient(180deg, #67e8f9, #2563eb);
        box-shadow: inset 0 10px 18px rgba(255,255,255,0.26);
    }

    .smt-growth-art span:nth-child(1) { height: 42px; }
    .smt-growth-art span:nth-child(2) { height: 68px; }
    .smt-growth-art span:nth-child(3) { height: 92px; }

    .smt-seo,
    .smt-faq {
        margin-top: 28px;
        color: #334155;
        line-height: 1.75;
    }

    .smt-seo h2,
    .smt-faq h2 {
        margin: 24px 0 14px !important;
        color: #7c3aed !important; /* Vibrant theme purple */
        font-size: 1.5rem !important;
        font-weight: 900 !important;
    }

    .smt-seo h3 {
        margin: 20px 0 10px !important;
        color: #2563eb !important; /* Vibrant theme blue */
        font-size: 1.2rem !important;
        font-weight: 800 !important;
    }

    .smt-seo p {
        color: #475569 !important;
        font-size: 0.95rem !important;
        margin-bottom: 14px !important;
    }

    .smt-seo-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 16px 0;
        border-radius: 12px;
        border: 1px solid rgba(127, 36, 226, 0.08);
    }

    .smt-seo-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.88rem;
    }

    .smt-seo-table th,
    .smt-seo-table td {
        border: 1px solid #f1f5f9;
        padding: 12px 14px;
        text-align: left;
    }

    .smt-seo-table th {
        background-color: #f8fafc;
        color: #0f172a;
        font-weight: 800;
        width: 40%;
    }

    .smt-seo-table td {
        color: #334155;
    }

    .smt-seo-table tr:nth-child(even) {
        background-color: #fafafa;
    }

    .smt-faq details {
        border-top: 1px solid #edf1fb;
        padding: 14px 0;
    }

    .smt-faq summary {
        cursor: pointer;
        color: #101827;
        font-weight: 800;
    }

    .smt-desktop-sidebar,
    .smt-top-popover,
    .smt-search-popover,
    .smt-mobile-drawer {
        display: none;
    }

    .smt-top-popover,
    .smt-search-popover {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 80;
        width: min(360px, calc(100vw - 32px));
        background: #fff;
        border: 1px solid #e7ecf7;
        border-radius: 14px;
        box-shadow: 0 22px 50px rgba(30, 50, 104, 0.18);
        overflow: hidden;
    }

    .smt-top-popover.is-open,
    .smt-search-popover.is-open {
        display: block;
    }

    .smt-top-action-wrap {
        position: relative;
    }

    .smt-popover-title {
        padding: 14px 16px;
        color: #fff;
        background: #2455df;
        font-weight: 800;
        font-size: 0.9rem;
    }

    .smt-notification-row {
        display: block;
        padding: 13px 16px;
        color: #334155;
        text-decoration: none;
        border-bottom: 1px solid #eef2fa;
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .smt-notification-row.is-unread {
        background: #f4f7ff;
    }

    .smt-notification-row strong,
    .smt-notification-row small {
        display: block;
    }

    .smt-notification-row strong { color: #172033; margin-bottom: 2px; }
    .smt-notification-row small { color: #718096; margin-top: 4px; }

    .smt-popover-foot {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        background: #f8faff;
        font-size: 0.78rem;
        font-weight: 800;
    }

    .smt-popover-foot a,
    .smt-profile-link {
        color: #3158d8;
        text-decoration: none;
    }

    .smt-profile-popover { width: 240px; }
    .smt-profile-heading { padding: 16px; border-bottom: 1px solid #eef2fa; }
    .smt-profile-heading strong,
    .smt-profile-heading span { display: block; }
    .smt-profile-heading strong { color: #172033; font-size: 0.88rem; }
    .smt-profile-heading span { color: #718096; font-size: 0.73rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
    .smt-profile-link { display: block; padding: 12px 16px; font-weight: 700; font-size: 0.84rem; }
    .smt-profile-link:hover { background: #f4f7ff; }
    .smt-profile-link.is-danger { color: #dc2626; }

    .smt-search-popover { right: -52px; padding: 12px; }
    .smt-search-box { position: relative; }
    .smt-search-box input { width: 100%; border: 1px solid #dbe3f3; border-radius: 10px; padding: 11px 12px 11px 38px; font: inherit; font-size: 0.86rem; outline: none; }
    .smt-search-box input:focus { border-color: #3158d8; box-shadow: 0 0 0 3px rgba(49,88,216,.11); }
    .smt-search-box i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #667085; }
    .smt-search-results { max-height: 310px; overflow: auto; }
    .smt-search-result { display: flex; align-items: center; gap: 10px; padding: 10px 4px; color: #243044; text-decoration: none; border-bottom: 1px solid #f0f3f8; font-size: 0.8rem; }
    .smt-search-result img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; border: 1px solid #e6ebf5; padding: 3px; }
    .smt-search-result strong, .smt-search-result span { display: block; }
    .smt-search-result span { color: #738096; font-size: .7rem; }
    .smt-search-status { padding: 16px 4px; color: #718096; text-align: center; font-size: .8rem; }

    .smt-pyq-panel { display: none; margin-top: 18px; padding-top: 18px; border-top: 1px solid #edf1fb; }
    .smt-pyq-panel.is-open { display: block; }
    .smt-pyq-title { color: #172033; font-size: .95rem; font-weight: 800; margin: 0 0 12px; }
    .smt-pyq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .smt-pyq-card { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; color: #334155; background: #f8faff; border: 1px solid #edf1fb; border-radius: 10px; text-decoration: none; font-size: .78rem; font-weight: 800; }
    .smt-pyq-card img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; border: 2px solid #fff; background: #fff; box-shadow: 0 3px 10px rgba(42,60,120,.12); padding: 2px; }

    @media (min-width: 1080px) {
        body { padding-left: 272px !important; }
        .smt-desktop-sidebar {
            display: block;
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 70;
            width: 272px;
            overflow-y: auto;
            overflow-x: hidden;
            scroll-behavior: smooth;
            padding: 24px 12px 48px 16px;
            color: #fff;
            background: linear-gradient(180deg, #0b1ab8 0%, #1136e8 56%, #06106e 100%);
            box-shadow: 8px 0 30px rgba(11, 26, 184, .18);
            /* Modern Firefox & Standard Scrollbar */
            scrollbar-width: thin;
            scrollbar-color: #93c5fd rgba(5, 12, 85, 0.35);
        }

        /* 🔥 ULTRA-MODERN SIDEBAR SLIDER (CUSTOM SCROLLBAR) 🔥 */
        .smt-desktop-sidebar::-webkit-scrollbar {
            width: 8px;
        }

        .smt-desktop-sidebar::-webkit-scrollbar-track {
            background: rgba(5, 12, 85, 0.35);
            border-radius: 999px;
            margin: 12px 0;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }

        .smt-desktop-sidebar::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #ffffff 0%, #93c5fd 50%, #60a5fa 100%);
            border-radius: 999px;
            border: 1.5px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 10px rgba(147, 197, 253, 0.65);
            min-height: 52px;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .smt-desktop-sidebar:hover::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #ffffff 0%, #bfdbfe 45%, #3b82f6 100%);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 14px rgba(255, 255, 255, 0.85), 0 0 8px rgba(59, 130, 246, 0.9);
        }

        .smt-desktop-sidebar::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #ffffff 0%, #dbeafe 40%, #2563eb 100%);
            border-color: #ffffff;
            box-shadow: 0 0 16px rgba(255, 255, 255, 0.95), 0 0 10px #3b82f6;
        }

        .smt-desktop-sidebar::-webkit-scrollbar-thumb:active {
            background: #ffffff;
            box-shadow: 0 0 20px #ffffff, 0 0 12px #60a5fa;
        }

        .smt-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 24px; text-decoration: none; color: #fff; }
        .smt-sidebar-brand img { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: #fff; }
        .smt-sidebar-brand span { font-size: 1rem; line-height: 1.15; font-weight: 900; color: #fff; }
        .smt-sidebar-section { margin: 20px 9px 8px; color: rgba(255,255,255,.57); text-transform: uppercase; font-size: .67rem; font-weight: 800; letter-spacing: .06em; }
        .smt-sidebar-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 10px 20px; border-radius: 99px; color: rgba(255,255,255,.86); text-decoration: none; font-size: .86rem; font-weight: 700; transition: all 0.2s ease; margin-bottom: 4px; }
        .smt-sidebar-link:hover { color: #fff; background: rgba(255,255,255,.12); }
        .smt-sidebar-link.is-active {
            color: #1136e8 !important;
            background: #f4f7ff !important;
            border-radius: 99px 0 0 99px !important;
            margin-right: -12px !important;
            padding-left: 28px !important;
            box-shadow: -6px 6px 14px rgba(11, 26, 184, 0.08) !important;
        }
        .smt-sidebar-link i { width: 17px; text-align: center; }
        .smt-app-home {
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .smt-phone-shell {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 24px 34px !important;
        }
        .smt-menu-btn { display: none; }
    }

    @media (max-width: 1023px) {
        body .mobile-bottom-nav {
            width: min(92%, 620px) !important;
            left: 50% !important;
            bottom: 10px !important;
            transform: translateX(-50%) !important;
            border-radius: 999px !important;
            height: 66px !important;
            padding: 0 8px !important;
            filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.14)) !important;
        }

        body .mobile-bottom-nav .nav-item-center-wrapper::before,
        body .mobile-bottom-nav .nav-item-center-wrapper::after {
            display: none !important;
        }

        body .mobile-bottom-nav .nav-item-center-wrapper {
            width: auto !important;
            flex: 1 !important;
            align-items: center !important;
        }

        body .mobile-bottom-nav .nav-item-center {
            position: static !important;
            width: auto !important;
            height: 100% !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            color: #8a93a8 !important;
            font-size: 0 !important;
            flex-direction: column !important;
            gap: 4px !important;
        }

        body .mobile-bottom-nav .nav-item-center::before {
            content: "\f02d";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 1.35rem;
            color: #8a93a8;
        }

        body .mobile-bottom-nav .nav-item-center::after {
            content: "Learn";
            font-size: 0.75rem;
            font-weight: 700;
            color: #8a93a8;
        }

        body .mobile-bottom-nav .nav-item .text {
            font-size: 0 !important;
        }

        body .mobile-bottom-nav .nav-item:nth-child(2) .text::after {
            content: "Tests";
            font-size: 0.75rem;
        }

        body .mobile-bottom-nav .nav-item:nth-child(4) .text::after {
            content: "Exam Alert";
            font-size: 0.75rem;
        }

        body .mobile-bottom-nav .nav-item:nth-child(2) i::before {
            content: "\f328";
        }

        body .mobile-bottom-nav .nav-item:nth-child(4) i::before {
            content: "\f0f3";
        }
    }

    @media (max-width: 900px) {
        .smt-app-home {
            padding: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        .smt-phone-shell {
            border-radius: 0 !important;
            border: 0 !important;
            box-shadow: none !important;
            padding: 12px 14px !important;
            background: #fff !important;
        }

        .smt-logo-lockup img {
            width: 40px;
            height: 40px;
        }

        .smt-logo-main {
            font-size: 0.75rem !important;
            letter-spacing: -0.02em !important;
        }

        .smt-logo-sub {
            font-size: 0.62rem !important;
        }

        .smt-topbar {
            gap: 8px;
        }

        .smt-top-actions {
            gap: 8px;
        }

        .smt-icon-btn {
            width: 40px;
            height: 40px;
        }

        .smt-avatar {
            width: 42px;
            height: 42px;
        }

        .smt-hero {
            grid-template-columns: 1fr auto !important;
            padding: 14px 16px 12px !important;
            min-height: 115px !important;
            border-radius: 16px !important;
            align-items: center !important;
            gap: 8px !important;
        }

        .smt-eyebrow {
            font-size: 0.66rem !important;
            margin-bottom: 3px !important;
            gap: 4px !important;
            letter-spacing: 0.2px !important;
        }

        .smt-hero h1 {
            font-size: 1.12rem !important;
            line-height: 1.15 !important;
            margin: 0 0 4px !important;
            font-weight: 800 !important;
        }

        .smt-hero p {
            display: none !important;
        }

        .smt-primary-cta {
            margin-top: 4px !important;
            min-height: 28px !important;
            padding: 0 12px !important;
            font-size: 0.72rem !important;
            font-weight: 700 !important;
            box-shadow: 0 6px 14px rgba(16, 24, 40, 0.15) !important;
        }

        .smt-hero-art {
            min-height: 90px !important;
            height: 90px !important;
            width: 115px !important;
            margin-top: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            overflow: visible !important;
            padding-right: 6px !important;
        }

        .smt-scanner-stage {
            width: 140px !important;
            height: 130px !important;
            transform: scale(0.48) !important;
            transform-origin: center center !important;
            margin-right: 0 !important;
            margin-left: -6px !important;
        }

        .smt-robot-stage {
            width: 100% !important;
            aspect-ratio: 1 !important;
        }

        .smt-robot-stage img {
            display: none !important;
        }

        .smt-robot {
            width: 58px !important;
            height: 74px !important;
            border-radius: 20px 20px 18px 18px !important;
        }

        .smt-robot::before {
            width: 42px !important;
            height: 26px !important;
            top: 12px !important;
            left: 8px !important;
            border-radius: 12px !important;
        }

        .smt-robot::after {
            width: 20px !important;
            height: 20px !important;
            bottom: 12px !important;
            font-size: 0.55rem !important;
        }

        .smt-robot-arm-left,
        .smt-robot-arm-right {
            width: 8px !important;
            height: 26px !important;
            top: 24px !important;
        }

        .smt-robot-arm-left {
            left: -5px !important;
        }

        .smt-robot-arm-right {
            right: -5px !important;
        }

        .smt-robot-eyes {
            top: 22px !important;
            left: 17px !important;
            width: 24px !important;
        }

        .smt-robot-eyes span {
            width: 5px !important;
            height: 5px !important;
        }

        .smt-robot-halo {
            width: 110px !important;
            height: 30px !important;
            bottom: 2px !important;
        }

        .smt-dashboard-grid,
        .smt-reco-grid,
        .smt-bottom-grid {
            grid-template-columns: 1fr;
            overflow: hidden !important;
            max-width: 100% !important;
        }

        .smt-premium {
            grid-template-columns: 1.3fr 0.7fr !important;
            padding: 16px !important;
            gap: 10px !important;
            align-items: center !important;
        }

        .smt-premium .smt-crown {
            display: none !important;
        }

        .smt-premium h2 {
            font-size: 0.95rem !important;
            margin-bottom: 2px !important;
        }

        .smt-premium p {
            font-size: 0.68rem !important;
            opacity: 0.85 !important;
            margin: 0 !important;
        }

        .smt-premium a {
            padding: 0 12px !important;
            min-height: 34px !important;
            font-size: 0.72rem !important;
            text-align: center !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            white-space: nowrap !important;
        }

        .smt-stats-grid {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 6px !important;
            margin: 12px 0 !important;
        }

        .smt-stat-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            padding: 8px 4px !important;
            min-height: 130px !important;
            justify-content: space-between !important;
            grid-template-columns: 1fr !important;
        }

        .smt-stat-title {
            font-size: 0.72rem !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 4px !important;
            line-height: 1.1 !important;
            font-weight: 700 !important;
        }

        .smt-stat-value {
            font-size: 1.1rem !important;
            margin: 4px 0 2px !important;
            font-weight: 800 !important;
        }

        .smt-stat-sub {
            font-size: 0.65rem !important;
            display: block !important;
            line-height: 1.1 !important;
            color: #6b7280 !important;
            font-weight: 600 !important;
        }

        .smt-ring {
            width: 44px !important;
            height: 44px !important;
            margin: 6px auto 0 !important;
        }

        .smt-ring::before {
            width: 32px !important;
            height: 32px !important;
        }

        .smt-ring i {
            font-size: 0.8rem !important;
        }

        .smt-search-popover,
        .smt-top-popover {
            position: fixed !important;
            top: 70px !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            width: calc(100% - 28px) !important;
            max-width: 480px !important;
            z-index: 100 !important;
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22) !important;
        }

        .smt-actions-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px !important;
        }

        .smt-action {
            min-height: 130px !important;
            padding: 16px 10px !important;
            border-radius: 18px !important;
            gap: 8px !important;
            align-items: center !important;
            text-align: center !important;
        }

        .smt-action-icon {
            width: 64px !important;
            height: 64px !important;
            border-radius: 18px !important;
            font-size: 1.85rem !important;
            box-shadow: 0 8px 16px color-mix(in srgb, var(--action-color) 22%, transparent) !important;
            margin-bottom: 4px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            position: relative;
        }

        .smt-typewriter-wrapper {
            transform: scale(0.38) !important;
        }

        .smt-action strong {
            font-size: 0.88rem !important;
            line-height: 1.2 !important;
            font-weight: 800 !important;
        }

        .smt-action span {
            font-size: 0.72rem !important;
            line-height: 1.2 !important;
            display: block !important;
        }

        .smt-exams-grid {
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 8px !important;
        }

        /* Mobile: show only first 8 categories (2 rows of 4), hide rest unless expanded */
        .smt-exams-grid .smt-exam-card:nth-child(n+9) {
            display: none !important;
        }
        .smt-exams-expanded .smt-exams-grid .smt-exam-card:nth-child(n+9) {
            display: grid !important;
        }

        .smt-exam-card {
            min-height: 100px !important;
            gap: 8px !important;
        }

        .smt-exam-icon {
            width: min(86px, 18vw) !important;
            height: min(86px, 18vw) !important;
            border-radius: 50% !important;
            padding: 10px !important;
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06) !important;
        }

        .smt-exam-card span {
            font-size: 0.88rem !important;
            line-height: 1.2 !important;
            font-weight: 800 !important;
        }

        .smt-exam-row {
            grid-template-columns: 48px 1fr 16px;
        }

        .smt-days-left {
            display: none;
        }

        .smt-premium {
            text-align: center;
            justify-items: center;
            padding: 20px;
        }

        .smt-growth-art {
            min-height: 90px;
        }

        .smt-pyq-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .smt-progress-meta {
            grid-template-columns: 1fr;
        }

        .smt-compact-card {
            max-width: 100% !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
            min-height: auto !important;
        }

        .smt-badges {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 6px !important;
            align-items: center !important;
            max-width: 100% !important;
            overflow: hidden !important;
        }

        .smt-medal {
            width: 44px !important;
            height: 50px !important;
            font-size: 0.88rem !important;
        }

        .smt-badge {
            gap: 4px !important;
            font-size: 0.62rem !important;
            word-break: break-word !important;
        }

        .smt-testimonials-slider {
            max-width: 100% !important;
            overflow: hidden !important;
        }

        .smt-testimonial-slide {
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        .smt-quote-card {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            padding: 12px !important;
            gap: 8px !important;
            overflow: hidden !important;
        }

        .smt-quote-text {
            word-break: break-word !important;
            overflow-wrap: break-word !important;
            font-size: 0.82rem !important;
            min-height: 72px !important;
        }

        .smt-reco-card {
            grid-template-columns: 50px minmax(0, 1fr);
        }

        .smt-card {
            padding: 16px;
        }
    }

    /* === BANNER SLIDER & TOP ROW GRID CSS (ZERO CLS OPTIMIZED) === */
    .smt-top-row {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 24px;
        width: 100%;
        min-height: auto;
    }

    .banner-slider-section {
        display: none; /* Hidden on mobile by default */
        width: 100%;
        box-sizing: border-box;
    }

    .banner-slider-container {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        background-color: transparent;
        border: none;
        box-shadow: none;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        aspect-ratio: 480 / 260;
    }

    .banner-slider-wrapper {
        display: flex;
        transition: transform 0.7s ease-in-out;
        width: 100%;
        height: 100%;
    }

    .banner-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    .banner-slide img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        aspect-ratio: 480 / 260;
        border-radius: 24px;
    }

    .banner-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0.9);
        color: #1e293b;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        z-index: 10;
        border: none;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
        transition: background-color 0.2s, color 0.2s;
    }

    .banner-arrow:hover {
        background-color: #7f24e2;
        color: #ffffff;
    }

    .banner-arrow.left {
        left: 12px;
    }

    .banner-arrow.right {
        right: 12px;
    }

    .banner-dots {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
        z-index: 10;
    }

    .banner-dots .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.2s;
    }

    .banner-dots .dot.active {
        background-color: #7f24e2;
        transform: scale(1.2);
        width: 12px;
        border-radius: 3px;
    }

    /* Desktop layout overrides for banner slider and hero heights (ZERO CLS) */
    @media (min-width: 992px) {
        .smt-top-row {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            align-items: stretch !important;
            gap: 24px !important;
            min-height: 260px !important;
            height: 260px !important;
        }

        .smt-hero {
            margin-bottom: 0 !important;
            height: 100% !important;
            min-height: 260px !important;
            padding: 30px 34px 28px !important;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .smt-hero-copy {
            max-width: 65% !important;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }

        .smt-hero h1 {
            font-size: 2.0rem !important;
            margin: 10px 0 8px !important;
        }

        .smt-hero p {
            font-size: 0.92rem !important;
            line-height: 1.5 !important;
            margin-bottom: 12px !important;
        }

        .smt-hero .smt-primary-cta {
            padding: 10px 18px !important;
            font-size: 0.9rem !important;
            min-height: 40px !important;
            width: fit-content;
        }

        .smt-hero-art {
            max-width: 32% !important;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .smt-robot-stage {
            transform: scale(0.78) !important;
            transform-origin: center right;
        }

        .banner-slider-section {
            display: block !important;
            height: 100% !important;
            min-height: 260px !important;
            box-sizing: border-box;
        }

        .banner-slider-container {
            height: 100% !important;
            min-height: 260px !important;
        }

        .banner-slide {
            height: 100% !important;
            min-height: 260px !important;
        }

        .banner-slide img {
            width: 100% !important;
            height: 260px !important;
            aspect-ratio: 480 / 260 !important;
            object-fit: fill !important;
        }
    }

    /* --- CWV PERFORMANCE OPTIMIZATION: DEFER RENDERING OF OFFSCREEN HEAVY SECTIONS --- */
    .smt-seo, .smt-faq, .smt-reviews-section, .smt-pyq-panel {
        content-visibility: auto;
        contain-intrinsic-size: 600px;
    }