:root {
    --insta-1: #3b2a99;
    --insta-2: #4a37b6;
    --insta-3: #7d33ff;
    --insta-4: #ab58f4;
    --bg-main: #040607;
    --primary-gradient: linear-gradient(45deg, #ab58f4, #7d33ff, #4a37b6, #3b2a99);
    --gradient-primary: linear-gradient(135deg, #ab58f4, #7d33ff, #4a37b6);
    --gradient-button: linear-gradient(135deg, #ab58f4, #7d33ff, #4a37b6);
    --border-accent: rgba(125, 51, 255, 0.35);
}

body {
    background: var(--bg-main) !important;
    min-height: 100vh;
}

canvas {
    display: none !important;
}

main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

main::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(900px 620px at 6% 8%, rgba(59, 42, 153, 0.18), transparent 72%), radial-gradient(820px 560px at 92% 88%, rgba(125, 51, 255, 0.16), transparent 74%), #040607;
}

.camera-bg-blur {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 9999px;
    filter: blur(145px);
    opacity: 0.86;
    will-change: transform, opacity;
    animation: cameraBlurFloat 12s ease-in-out infinite;
}

.camera-bg-blur-a {
    top: -22%;
    left: -22%;
    width: min(74vw, 760px);
    height: min(74vw, 760px);
    background: rgba(59, 42, 153, 0.72);
    animation-delay: 0s;
}

.camera-bg-blur-b {
    right: -16%;
    top: 34%;
    width: min(54vw, 560px);
    height: min(54vw, 560px);
    background: rgba(171, 88, 244, 0.56);
    animation-delay: 2s;
}

.camera-bg-blur-c {
    right: -12%;
    bottom: -26%;
    width: min(72vw, 700px);
    height: min(72vw, 700px);
    background: rgba(125, 51, 255, 0.62);
    animation-delay: 4s;
}

@keyframes cameraBlurFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.84;
    }
    35% {
        transform: translate3d(1.5%, -2%, 0) scale(1.07);
        opacity: 0.95;
    }
    65% {
        transform: translate3d(-2%, 1.5%, 0) scale(0.96);
        opacity: 0.78;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.84;
    }
}

.camera-shell {
    position: relative;
    z-index: 2;
    max-width: 480px;
    margin: 0 auto;
    padding-top: 72px !important;
    padding-bottom: 42px !important;
}

.container-dpgm {
    position: relative;
    z-index: 2;
}

.title-dpgm {
    font-size: clamp(1.75rem, 5vw, 2.05rem);
    line-height: 1.15;
    color: #fff !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.subtitle-dpgm {
    color: #9ba8bc !important;
    font-size: 0.95rem;
    line-height: 1.6;
}

.text-gradient,
.pricing-current,
.offer-gradient-text {
    -webkit-text-fill-color: transparent !important;
    background: var(--primary-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.top-accent-icon {
    color: #ab58f4 !important;
}

.camera-shell .text-\[\#ab58f4\] {
    color: #ab58f4 !important;
}

.camera-shell .border-\[\#ab58f4\] {
    border-color: #7d33ff !important;
}

.camera-shell .border-\[\#ab58f44d\] {
    border-color: rgba(125, 51, 255, 0.35) !important;
}

.camera-shell .bg-\[rgba\(171\2c 88\2c 244\2c 0\.15\)\] {
    background: rgba(125, 51, 255, 0.14) !important;
}

.camera-shell .border-\[rgba\(171\2c 88\2c 244\2c 0\.3\)\] {
    border-color: rgba(125, 51, 255, 0.35) !important;
}

.camera-shell .text-\[var\(--foreground-muted\)\] {
    color: #a8b4c4 !important;
}

.camera-shell svg[style*="#ab58f4"],
.camera-shell [style*="color:#ab58f4"] {
    color: #ab58f4 !important;
    stroke: currentColor !important;
}

.camera-shell svg [stroke="#ab58f4"],
.camera-shell svg[stroke="#ab58f4"] {
    stroke: #ab58f4 !important;
}

.camera-shell svg [fill="#ab58f4"],
.camera-shell svg[fill="#ab58f4"] {
    fill: #ab58f4 !important;
}

.card-dpgm {
    border-radius: 30px !important;
    background: rgba(12, 16, 17, 0.88) !important;
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.68);
    padding: 24px !important;
}

.card-dpgm label {
    color: #c8d2df !important;
    font-weight: 500;
}

.card-dpgm .text-xs {
    color: #a8b4c4 !important;
}

.card-dpgm .dropdown-trigger span {
    color: #e8edf5 !important;
}

.card-dpgm .dropdown-trigger svg {
    color: #ab58f4 !important;
}

.card-dpgm input {
    color: #f8fafc !important;
}

.card-dpgm input::placeholder {
    color: #94a3b8 !important;
}

.dropdown-trigger,
.input-group {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(21, 25, 33, 0.78) !important;
}

.feature-icon-wrap {
    background: var(--primary-gradient) !important;
    box-shadow: 0 10px 24px -10px rgba(125, 51, 255, 0.65);
}

.feature-icon {
    color: #fff !important;
}

.btn-dpgm {
    border-radius: 22px !important;
    background: var(--primary-gradient) !important;
    box-shadow: 0 18px 40px -10px rgba(125, 51, 255, 0.48);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-dpgm:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 22px 48px -10px rgba(125, 51, 255, 0.6);
}

.card-highlight {
    position: relative;
    box-shadow: 0 30px 64px -26px rgba(125, 51, 255, 0.42), 0 8px 26px -14px rgba(59, 42, 153, 0.35), 0 0 18px rgba(171, 88, 244, 0.2) !important;
    overflow: hidden;
}

.card-highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
}

.pricing-old {
    color: #8b95a7 !important;
}

.pricing-note {
    color: #cbd5e1 !important;
}

.badge-primary {
    background: var(--primary-gradient) !important;
    color: #fff !important;
}