/* Extracted from app/Views/welcome_message.php; keep cascade position in the view. */

        /* Kababali Mobile VPS promotion — self-contained so no CSS file update is required. */
        .kvps-section {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(68, 190, 255, .16);
            border-radius: 28px;
            background:
                radial-gradient(circle at 86% 22%, rgba(32, 226, 174, .16), transparent 25%),
                radial-gradient(circle at 12% 10%, rgba(34, 132, 255, .14), transparent 28%),
                linear-gradient(145deg, #06111f 0%, #071726 52%, #04101b 100%);
            box-shadow: 0 34px 90px rgba(0, 0, 0, .34);
            padding: clamp(28px, 4vw, 64px);
        }
        .kvps-section::before {
            content: "";
            position: absolute;
            width: 540px;
            height: 540px;
            right: -180px;
            top: -180px;
            border-radius: 50%;
            border: 1px solid rgba(46, 221, 178, .12);
            box-shadow: 0 0 0 72px rgba(46, 221, 178, .025), 0 0 0 145px rgba(46, 221, 178, .018);
            pointer-events: none;
        }
        .kvps-hero {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
            gap: clamp(32px, 5vw, 82px);
            align-items: center;
        }
        .kvps-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(58, 229, 190, .42);
            border-radius: 999px;
            background: rgba(30, 206, 164, .08);
            color: #74efd0;
            padding: 8px 13px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .kvps-copy h2 {
            margin: 22px 0 16px;
            max-width: 780px;
            color: #f5f9ff;
            font-size: clamp(38px, 4.8vw, 72px);
            line-height: 1.02;
            letter-spacing: -.045em;
        }
        .kvps-copy h2 span {
            display: block;
            background: linear-gradient(90deg, #75f3d4, #4cc2ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .kvps-copy > p {
            max-width: 710px;
            margin: 0;
            color: #aebdd0;
            font-size: clamp(15px, 1.35vw, 19px);
            line-height: 1.72;
        }
        .kvps-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 26px;
        }
        .kvps-actions .button {
            min-height: 48px;
            justify-content: center;
        }
        .kvps-secondary {
            border: 1px solid rgba(88, 177, 255, .34);
            background: rgba(8, 28, 48, .72);
            color: #e9f5ff;
        }
        .kvps-secondary:hover {
            border-color: rgba(88, 177, 255, .62);
            background: rgba(18, 54, 84, .82);
            color: #fff;
        }
        .kvps-features {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-top: 28px;
        }
        .kvps-feature {
            min-height: 128px;
            padding: 17px;
            border: 1px solid rgba(113, 165, 205, .18);
            border-radius: 16px;
            background: linear-gradient(155deg, rgba(16, 39, 62, .78), rgba(6, 22, 38, .78));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
        }
        .kvps-feature-icon {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            margin-bottom: 12px;
            border: 1px solid rgba(70, 230, 190, .35);
            border-radius: 11px;
            background: rgba(41, 220, 174, .08);
            color: #65e9c7;
            font-size: 19px;
            font-weight: 800;
        }
        .kvps-feature h3 {
            margin: 0 0 5px;
            color: #f3f8ff;
            font-size: 15px;
        }
        .kvps-feature p {
            margin: 0;
            color: #91a6bc;
            font-size: 13px;
            line-height: 1.52;
        }
        .kvps-phones {
            position: relative;
            min-height: 660px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .kvps-phone {
            position: absolute;
            width: min(305px, 46%);
            margin: 0;
            padding: 10px;
            border: 1px solid rgba(201, 231, 255, .42);
            border-radius: 36px;
            background: linear-gradient(145deg, #243340, #05090e 34%, #24313b 100%);
            box-shadow: 0 32px 65px rgba(0, 0, 0, .48), 0 0 52px rgba(32, 222, 177, .08);
        }
        .kvps-phone::before {
            content: "";
            position: absolute;
            top: 7px;
            left: 50%;
            z-index: 2;
            width: 30%;
            height: 15px;
            transform: translateX(-50%);
            border-radius: 0 0 13px 13px;
            background: #05080c;
        }
        .kvps-phone img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 28px;
            background: #030b14;
        }
        .kvps-phone-chart {
            left: 4%;
            top: 3%;
            z-index: 2;
            transform: rotate(-4deg);
        }
        .kvps-phone-bot {
            right: 1%;
            top: 14%;
            z-index: 1;
            transform: rotate(4deg) scale(.94);
        }
        .kvps-phone figcaption {
            position: absolute;
            left: 50%;
            bottom: -39px;
            transform: translateX(-50%);
            white-space: nowrap;
            color: #9db1c5;
            font-size: 12px;
            font-weight: 700;
        }
        .kvps-live-chip {
            position: absolute;
            z-index: 4;
            right: 1%;
            bottom: 4%;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 13px;
            border: 1px solid rgba(45, 226, 170, .36);
            border-radius: 999px;
            background: rgba(5, 20, 33, .9);
            color: #7cf1c7;
            font-size: 12px;
            font-weight: 800;
            box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
        }
        .kvps-live-chip i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #25e584;
            box-shadow: 0 0 0 5px rgba(37, 229, 132, .11);
        }
        .kvps-workflow {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-top: 40px;
        }
        .kvps-step {
            position: relative;
            display: grid;
            grid-template-columns: 44px 1fr;
            gap: 13px;
            align-items: center;
            min-height: 94px;
            padding: 16px;
            border: 1px solid rgba(49, 216, 178, .23);
            border-radius: 16px;
            background: rgba(4, 22, 36, .74);
        }
        .kvps-step:not(:last-child)::after {
            content: "›";
            position: absolute;
            right: -11px;
            z-index: 3;
            color: #45e3c0;
            font-size: 29px;
            font-weight: 300;
        }
        .kvps-step-number {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(71, 207, 255, .34);
            border-radius: 13px;
            color: #6dd9ff;
            background: rgba(50, 151, 219, .08);
            font-size: 14px;
            font-weight: 900;
        }
        .kvps-step strong,
        .kvps-step small {
            display: block;
        }
        .kvps-step strong {
            color: #f2f8ff;
            font-size: 14px;
        }
        .kvps-step small {
            margin-top: 4px;
            color: #8fa5ba;
            line-height: 1.4;
        }
        .kvps-download-row {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-top: 14px;
        }
        .kvps-download-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 18px;
            border: 1px solid rgba(119, 167, 207, .16);
            border-radius: 16px;
            background: rgba(8, 25, 42, .72);
        }
        .kvps-download-card span,
        .kvps-download-card small {
            display: block;
        }
        .kvps-download-card span {
            margin-bottom: 3px;
            color: #f5f9ff;
            font-weight: 800;
        }
        .kvps-download-card small {
            color: #8fa3b8;
        }
        .kvps-download-card .button {
            flex: 0 0 auto;
            white-space: nowrap;
        }
        .kvps-note {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 14px;
            padding: 13px 15px;
            border: 1px solid rgba(86, 166, 224, .18);
            border-radius: 13px;
            background: rgba(5, 18, 31, .74);
            color: #98aec3;
            font-size: 13px;
        }
        .kvps-note strong { color: #cfe4f5; }
        @media (max-width: 1100px) {
            .kvps-hero { grid-template-columns: 1fr; }
            .kvps-phones { min-height: 610px; max-width: 760px; width: 100%; margin: 0 auto; }
            .kvps-phone { width: min(290px, 43%); }
            .kvps-phone-chart { left: 15%; }
            .kvps-phone-bot { right: 14%; }
        }
        @media (max-width: 760px) {
            .kvps-section { border-radius: 20px; padding: 24px 18px; }
            .kvps-copy h2 { font-size: clamp(36px, 12vw, 54px); }
            .kvps-features, .kvps-workflow, .kvps-download-row { grid-template-columns: 1fr; }
            .kvps-step:not(:last-child)::after { content: "⌄"; right: 50%; bottom: -20px; transform: translateX(50%); }
            .kvps-phones { min-height: 520px; }
            .kvps-phone { width: 49%; padding: 6px; border-radius: 25px; }
            .kvps-phone img { border-radius: 20px; }
            .kvps-phone::before { height: 10px; top: 4px; }
            .kvps-phone-chart { left: 0; top: 2%; }
            .kvps-phone-bot { right: 0; top: 13%; }
            .kvps-phone figcaption, .kvps-live-chip { display: none; }
            .kvps-download-card { align-items: flex-start; flex-direction: column; }
            .kvps-download-card .button { width: 100%; }
        }
        @media (max-width: 430px) {
            .kvps-phones { min-height: 405px; }
            .kvps-phone { width: 52%; }
            .kvps-phone-chart { left: -2%; }
            .kvps-phone-bot { right: -2%; }
        }