:root {
            --primary: #3c2fc0;
            --primary-dark: #281e96;
            --primary-light: #6f63ea;
            --gold: #d4a017;
            --gold-light: #f0cb67;
            --dark: #17152d;
            --text: #57546c;
            --light: #f7f6ff;
            --white: #ffffff;
            --border: rgba(60, 47, 192, 0.14);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            min-height: 100vh;
            overflow-x: hidden;
            font-family: "Manrope", sans-serif;
            color: var(--dark);
            background:
                radial-gradient(circle at 8% 15%, rgba(60, 47, 192, 0.13), transparent 28%),
                radial-gradient(circle at 88% 82%, rgba(212, 160, 23, 0.14), transparent 25%),
                linear-gradient(135deg, #ffffff 0%, #f8f7ff 48%, #f3f1ff 100%);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        button,
        input {
            font: inherit;
        }

        .coming-soon-page {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            isolation: isolate;
        }

        .coming-soon-page::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -3;
            opacity: 0.45;
            background-image:
                linear-gradient(rgba(60, 47, 192, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(60, 47, 192, 0.035) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(to bottom, black, transparent 90%);
            pointer-events: none;
        }

        .blur-shape {
            position: fixed;
            z-index: -2;
            border-radius: 50%;
            filter: blur(20px);
            pointer-events: none;
        }

        .shape-one {
            top: -110px;
            left: -90px;
            width: 300px;
            height: 300px;
            background: rgba(60, 47, 192, 0.13);
        }

        .shape-two {
            right: -90px;
            bottom: -100px;
            width: 320px;
            height: 320px;
            background: rgba(212, 160, 23, 0.12);
        }

        .site-header {
            width: 100%;
            padding: 24px 6%;
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: min(1240px, 100%);
            margin: 0 auto;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 13px;
        }

        .brand-mark {
            position: relative;
            display: grid;
            place-items: center;
            width: 54px;
            height: 54px;
            overflow: hidden;
            border-radius: 16px;
            color: var(--white);
            font-family: "Cormorant Garamond", serif;
            font-size: 25px;
            font-weight: 700;
            background: linear-gradient(145deg, var(--primary), var(--primary-dark));
            box-shadow: 0 12px 28px rgba(60, 47, 192, 0.24);
        }

        .brand-mark::after {
            content: "";
            position: absolute;
            width: 42px;
            height: 2px;
            background: var(--gold-light);
            transform: rotate(-34deg);
        }

        .brand-copy {
            display: flex;
            flex-direction: column;
        }

        .brand-name {
            font-family: "Cormorant Garamond", serif;
            font-size: 25px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.03em;
            color: var(--primary);
        }

        .brand-type {
            margin-top: 5px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.34em;
            color: var(--dark);
        }

        .header-contact {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 11px 17px;
            border: 1px solid var(--border);
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
            color: var(--primary);
            background: rgba(255, 255, 255, 0.76);
            box-shadow: 0 10px 30px rgba(23, 21, 45, 0.05);
            backdrop-filter: blur(10px);
            transition: 0.3s ease;
        }

        .header-contact:hover {
            color: var(--white);
            border-color: var(--primary);
            background: var(--primary);
            transform: translateY(-2px);
        }

        .main-content {
            display: flex;
            flex: 1;
            align-items: center;
            width: 100%;
            padding: 35px 6% 70px;
        }

        .hero-wrapper {
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
            gap: 80px;
            align-items: center;
            width: min(1240px, 100%);
            margin: 0 auto;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 22px;
            padding: 9px 14px;
            border: 1px solid rgba(60, 47, 192, 0.14);
            border-radius: 999px;
            color: var(--primary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.7);
        }

        .eyebrow-dot {
            position: relative;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gold);
        }

        .eyebrow-dot::after {
            content: "";
            position: absolute;
            inset: -5px;
            border: 1px solid rgba(212, 160, 23, 0.45);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .hero-title {
            max-width: 760px;
            margin-bottom: 22px;
            font-family: "Cormorant Garamond", serif;
            font-size: clamp(54px, 6.2vw, 92px);
            font-weight: 600;
            line-height: 0.94;
            letter-spacing: -0.045em;
            color: var(--dark);
        }

        .hero-title span {
            position: relative;
            color: var(--primary);
        }

        .hero-title span::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 3px;
            left: 0;
            z-index: -1;
            height: 10px;
            opacity: 0.6;
            background: linear-gradient(90deg, var(--gold-light), transparent);
        }

        .hero-description {
            max-width: 660px;
            margin-bottom: 30px;
            color: var(--text);
            font-size: 16px;
            line-height: 1.85;
        }

        .service-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 34px;
        }

        .service-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 13px;
            border: 1px solid var(--border);
            border-radius: 10px;
            color: #47435f;
            font-size: 12px;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.72);
        }

        .service-chip i {
            color: var(--gold);
        }

        .notify-form {
            display: flex;
            width: min(590px, 100%);
            padding: 6px;
            border: 1px solid rgba(60, 47, 192, 0.14);
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 18px 50px rgba(32, 26, 95, 0.08);
        }

        .input-wrap {
            display: flex;
            flex: 1;
            align-items: center;
            gap: 11px;
            min-width: 0;
            padding: 0 14px;
        }

        .input-wrap i {
            flex-shrink: 0;
            color: var(--primary);
        }

        .notify-form input {
            width: 100%;
            min-width: 0;
            padding: 13px 0;
            border: 0;
            outline: 0;
            color: var(--dark);
            background: transparent;
        }

        .notify-form input::placeholder {
            color: #aaa7ba;
        }

        .notify-btn {
            flex-shrink: 0;
            padding: 15px 22px;
            border: 0;
            border-radius: 11px;
            color: var(--white);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            box-shadow: 0 12px 24px rgba(60, 47, 192, 0.23);
            transition: 0.3s ease;
        }

        .notify-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 30px rgba(60, 47, 192, 0.3);
        }

        .form-message {
            display: none;
            margin-top: 12px;
            font-size: 13px;
            font-weight: 600;
        }

        .form-message.success {
            display: block;
            color: #198754;
        }

        .form-message.error {
            display: block;
            color: #dc3545;
        }

        .visual-card {
            position: relative;
            padding: 45px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.75);
            border-radius: 30px;
            color: var(--white);
            background:
                radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.15), transparent 26%),
                linear-gradient(145deg, #4d3fd2 0%, var(--primary) 42%, #211878 100%);
            box-shadow: 0 35px 80px rgba(41, 31, 145, 0.28);
        }

        .visual-card::before {
            content: "";
            position: absolute;
            top: -70px;
            right: -70px;
            width: 190px;
            height: 190px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 50%;
        }

        .visual-card::after {
            content: "";
            position: absolute;
            right: -20px;
            bottom: -80px;
            width: 250px;
            height: 250px;
            border: 55px solid rgba(212, 160, 23, 0.11);
            border-radius: 50%;
        }

        .mini-label {
            position: relative;
            z-index: 1;
            color: var(--gold-light);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .visual-heading {
            position: relative;
            z-index: 1;
            margin: 17px 0 28px;
            font-family: "Cormorant Garamond", serif;
            font-size: 38px;
            font-weight: 600;
            line-height: 1.05;
        }

        .visual-heading span {
            color: var(--gold-light);
        }

        .countdown {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 28px;
        }

        .count-item {
            padding: 17px 8px;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 15px;
            text-align: center;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(8px);
        }

        .count-number {
            display: block;
            font-family: "Cormorant Garamond", serif;
            font-size: 31px;
            font-weight: 700;
            line-height: 1;
        }

        .count-label {
            display: block;
            margin-top: 7px;
            color: rgba(255, 255, 255, 0.65);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .contact-panel {
            position: relative;
            z-index: 1;
            display: grid;
            gap: 12px;
            padding-top: 25px;
            border-top: 1px solid rgba(255, 255, 255, 0.14);
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, 0.84);
            font-size: 12px;
            line-height: 1.6;
        }

        .contact-icon {
            display: grid;
            flex-shrink: 0;
            place-items: center;
            width: 31px;
            height: 31px;
            border-radius: 9px;
            color: var(--gold-light);
            background: rgba(255, 255, 255, 0.09);
        }

        .site-footer {
            padding: 0 6% 25px;
        }

        .footer-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            width: min(1240px, 100%);
            margin: 0 auto;
            padding-top: 19px;
            border-top: 1px solid var(--border);
            color: #89869a;
            font-size: 11px;
        }

        .footer-links {
            display: flex;
            gap: 17px;
        }

        .footer-links a {
            transition: 0.25s ease;
        }

        .footer-links a:hover {
            color: var(--primary);
        }

        @keyframes pulse {
            0% {
                opacity: 0.7;
                transform: scale(0.7);
            }

            70%,
            100% {
                opacity: 0;
                transform: scale(1.5);
            }
        }

        @media (max-width: 1050px) {
            .hero-wrapper {
                grid-template-columns: 1fr;
                gap: 45px;
            }

            .hero-copy {
                text-align: center;
            }

            .hero-description,
            .notify-form {
                margin-right: auto;
                margin-left: auto;
            }

            .service-list {
                justify-content: center;
            }

            .visual-card {
                width: min(650px, 100%);
                margin: 0 auto;
            }
        }

        @media (max-width: 650px) {
            .site-header {
                padding: 18px 20px;
            }

            .header-contact span {
                display: none;
            }

            .header-contact {
                justify-content: center;
                width: 44px;
                height: 44px;
                padding: 0;
            }

            .brand-mark {
                width: 47px;
                height: 47px;
                border-radius: 13px;
                font-size: 22px;
            }

            .brand-name {
                font-size: 21px;
            }

            .brand-type {
                font-size: 8px;
            }

            .main-content {
                padding: 30px 20px 50px;
            }

            .hero-title {
                font-size: clamp(50px, 15vw, 68px);
            }

            .hero-description {
                font-size: 14px;
            }

            .notify-form {
                flex-direction: column;
                gap: 7px;
                padding: 8px;
            }

            .input-wrap {
                min-height: 48px;
            }

            .notify-btn {
                width: 100%;
            }

            .visual-card {
                padding: 30px 22px;
                border-radius: 24px;
            }

            .visual-heading {
                font-size: 31px;
            }

            .countdown {
                grid-template-columns: repeat(2, 1fr);
            }

            .footer-inner {
                flex-direction: column;
                text-align: center;
            }
        }