@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700;800&display=swap');



body.ai-page-body {
    margin: 0;

    background: #FFFFFF;
    color: var(--text-dark);
    overflow-x: hidden;
}

.ai-page {
    min-height: 100vh;
}

/* Hero Section */
.ai-hero {
    position: relative;
    min-height: 100vh;
    padding: 100px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ai-hero__container {
    max-width: 1700px;
}

.ai-hero__swiper {
    width: 100%;
    overflow: visible !important;
}

.ai-hero__swiper .swiper-wrapper,
.ai-hero__swiper .swiper-slide {
    overflow: visible !important;
}

.ai-hero__swiper .swiper-slide {
    height: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.ai-hero__swiper .swiper-slide-active,
.ai-hero__swiper .swiper-slide-duplicate-active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.ai-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.ai-hero__grid--split-swiper {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.ai-hero__copy--static {
    position: relative;
    z-index: 4;
    transform: none !important;
    will-change: auto;
}

.ai-hero__swiper-col {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    overflow: visible !important;
}

.ai-hero__swiper-col .ai-hero__visual {
    width: 100%;
}

.ai-hero__swiper .creative-anim {
    animation: none;
}

.ai-hero__swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-duplicate-active) .creative-anim {
    animation: none !important;
}

.ai-hero__swiper .ai-slide--stage1.swiper-slide-active .creative-anim--ideation-card,
.ai-hero__swiper .ai-slide--stage1.swiper-slide-duplicate-active .creative-anim--ideation-card {
    animation: aiIdeationCardEnter 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ai-hero__swiper .ai-slide--stage1.swiper-slide-active .creative-anim--outline-card,
.ai-hero__swiper .ai-slide--stage1.swiper-slide-duplicate-active .creative-anim--outline-card {
    animation: aiOutlineCardEnter 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ai-hero__swiper .ai-slide--stage1.swiper-slide-active .creative-anim--crafting-card,
.ai-hero__swiper .ai-slide--stage1.swiper-slide-duplicate-active .creative-anim--crafting-card {
    animation: aiCraftingCardTrail 4s ease forwards;
}

.ai-hero__swiper .ai-slide--stage1.swiper-slide-active .creative-anim--crafting-card::after,
.ai-hero__swiper .ai-slide--stage1.swiper-slide-duplicate-active .creative-anim--crafting-card::after {
    animation: aiBlueLightTrail 4s ease forwards;
}

.ai-hero__swiper .ai-slide--stage2.swiper-slide-active .creative-anim--dash-path,
.ai-hero__swiper .ai-slide--stage2.swiper-slide-duplicate-active .creative-anim--dash-path {
    animation: aiDashPathFlow 4s ease forwards;
}

.ai-hero__swiper .ai-slide--stage2.swiper-slide-active .creative-anim--processing-card,
.ai-hero__swiper .ai-slide--stage2.swiper-slide-duplicate-active .creative-anim--processing-card {
    animation: aiProcessingCardEnter 4s ease forwards;
}

.ai-hero__swiper .ai-slide--stage2.swiper-slide-active .processing-overlay-v2 .proc-lines-v2 span,
.ai-hero__swiper .ai-slide--stage2.swiper-slide-duplicate-active .processing-overlay-v2 .proc-lines-v2 span {
    animation: aiProcessingLineFill 4s ease forwards;
    transform-origin: left center;
}

.ai-hero__swiper .ai-slide--stage2.swiper-slide-active .processing-overlay-v2 .proc-lines-v2 span:nth-child(2),
.ai-hero__swiper .ai-slide--stage2.swiper-slide-duplicate-active .processing-overlay-v2 .proc-lines-v2 span:nth-child(2) {
    animation-delay: 0.18s;
}

.ai-hero__swiper .ai-slide--stage2.swiper-slide-active .processing-overlay-v2 .proc-lines-v2 span:nth-child(3),
.ai-hero__swiper .ai-slide--stage2.swiper-slide-duplicate-active .processing-overlay-v2 .proc-lines-v2 span:nth-child(3) {
    animation-delay: 0.34s;
}

.ai-hero__swiper .ai-slide--stage2.swiper-slide-active .creative-anim--tool-icon,
.ai-hero__swiper .ai-slide--stage2.swiper-slide-duplicate-active .creative-anim--tool-icon {
    animation: aiToolIconPulse 4s ease forwards;
}

.ai-hero__swiper .ai-slide--stage2.swiper-slide-active .creative-anim--tool-icon:nth-child(2),
.ai-hero__swiper .ai-slide--stage2.swiper-slide-duplicate-active .creative-anim--tool-icon:nth-child(2) {
    animation-delay: 0.18s;
}

.ai-hero__swiper .ai-slide--stage2.swiper-slide-active .creative-anim--tool-icon:nth-child(3),
.ai-hero__swiper .ai-slide--stage2.swiper-slide-duplicate-active .creative-anim--tool-icon:nth-child(3) {
    animation-delay: 0.36s;
}

.ai-hero__swiper .ai-slide--stage3.swiper-slide-active .creative-anim--play-button,
.ai-hero__swiper .ai-slide--stage3.swiper-slide-duplicate-active .creative-anim--play-button {
    animation: aiPlayButtonPulse 4s ease forwards;
}

.ai-hero__swiper .ai-slide--stage3.swiper-slide-active .creative-anim--video-progress,
.ai-hero__swiper .ai-slide--stage3.swiper-slide-duplicate-active .creative-anim--video-progress {
    animation: aiVideoProgressLoad 4s ease forwards;
    transform-origin: left center;
}

.ai-hero__swiper .ai-slide--stage3.swiper-slide-active .creative-anim--sales-bubble,
.ai-hero__swiper .ai-slide--stage3.swiper-slide-duplicate-active .creative-anim--sales-bubble {
    animation: aiSalesBubbleDrift 4s ease forwards;
}

.ai-hero__swiper .ai-slide--stage3.swiper-slide-active .creative-anim--blog-bubble,
.ai-hero__swiper .ai-slide--stage3.swiper-slide-duplicate-active .creative-anim--blog-bubble {
    animation: aiBlogBubbleDrift 4s ease forwards;
}

@keyframes aiIdeationCardEnter {
    0% {
        opacity: 0;
        transform: translate(-120px, -44px) rotate(-10deg) scale(0.92);
    }

    22% {
        opacity: 1;
        transform: translate(8px, 6px) rotate(-1deg) scale(1.02);
    }

    36%,
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(-3deg) scale(1);
    }
}

@keyframes aiOutlineCardEnter {

    0%,
    12% {
        opacity: 0;
        transform: translate(140px, -34px) rotate(9deg) scale(0.92);
    }

    38% {
        opacity: 1;
        transform: translate(-8px, 4px) rotate(0deg) scale(1.02);
    }

    52%,
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(2deg) scale(1);
    }
}

@keyframes aiCraftingCardTrail {

    0%,
    34% {
        opacity: 0;
        transform: translate(-78px, 60px) rotate(1deg) scale(0.96);
        box-shadow: 0 15px 40px rgba(12, 74, 110, 0.08);
    }

    52% {
        opacity: 1;
        transform: translate(8px, -3px) rotate(7deg) scale(1.02);
        box-shadow: 0 18px 45px rgba(68, 183, 219, 0.22);
    }

    68%,
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(5deg) scale(1);
        box-shadow: 0 15px 40px rgba(12, 74, 110, 0.08);
    }
}

@keyframes aiBlueLightTrail {

    0%,
    48% {
        opacity: 0;
        transform: translateX(-24px) scaleX(0.2);
    }

    60% {
        opacity: 0.8;
        transform: translateX(12px) scaleX(1);
    }

    82%,
    100% {
        opacity: 0;
        transform: translateX(64px) scaleX(0.5);
    }
}

@keyframes aiDashPathFlow {
    0% {
        opacity: 0.15;
        filter: drop-shadow(0 0 0 rgba(68, 183, 219, 0));
        transform: translateX(-16px);
    }

    36% {
        opacity: 0.85;
        filter: drop-shadow(0 0 12px rgba(68, 183, 219, 0.55));
        transform: translateX(0);
    }

    72%,
    100% {
        opacity: 0.65;
        filter: drop-shadow(0 0 4px rgba(68, 183, 219, 0.3));
        transform: translateX(10px);
    }
}

@keyframes aiProcessingCardEnter {
    0% {
        opacity: 0;
        transform: translate(-44px, 34px) scale(0.94);
    }

    24% {
        opacity: 1;
        transform: translate(4px, -4px) scale(1.02);
    }

    40%,
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes aiProcessingLineFill {

    0%,
    28% {
        transform: scaleX(0.18);
        opacity: 0.4;
    }

    62% {
        transform: scaleX(1);
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes aiToolIconPulse {

    0%,
    40% {
        transform: scale(0.86);
        opacity: 0.38;
        box-shadow: 0 0 0 rgba(20, 88, 217, 0);
    }

    54% {
        transform: scale(1.14);
        opacity: 1;
        box-shadow: 0 0 0 8px rgba(20, 88, 217, 0.12);
    }

    70%,
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 rgba(20, 88, 217, 0);
    }
}

@keyframes aiPlayButtonPulse {

    0%,
    20% {
        transform: scale(0.92);
        box-shadow: 0 10px 20px rgba(10, 88, 225, 0.2);
    }

    34%,
    58% {
        transform: scale(1.12);
        box-shadow: 0 0 0 14px rgba(20, 88, 217, 0.12), 0 16px 28px rgba(10, 88, 225, 0.28);
    }

    74%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(10, 88, 225, 0.2);
    }
}

@keyframes aiVideoProgressLoad {

    0%,
    18% {
        width: 0;
    }

    82%,
    100% {
        width: 76%;
    }
}

@keyframes aiSalesBubbleDrift {

    0%,
    32% {
        opacity: 0;
        transform: translate(-34px, 18px) rotate(-2deg);
    }

    58% {
        opacity: 1;
        transform: translate(4px, -4px) rotate(4deg);
    }

    74%,
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(3deg);
    }
}

@keyframes aiBlogBubbleDrift {

    0%,
    44% {
        opacity: 0;
        transform: translate(-42px, 24px) rotate(-10deg);
    }

    68% {
        opacity: 1;
        transform: translate(4px, -6px) rotate(-2deg);
    }

    84%,
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(-4deg);
    }
}

/* Copy Styles */
.ai-hero__copy h1 {
    
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.ai-hero__copy p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 460px;
    margin-bottom: 36px;
}

.ai-hero__actions {
    display: flex;
    gap: 16px;
}

.btn-ai-primary {
    background: var(--primary-blue);
    color: #FFF;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    
    box-shadow: 0 10px 20px rgba(10, 88, 225, 0.2);
    transition: transform 0.3s ease;
}

.btn-ai-secondary {
    background: #FFF;
    color: var(--text-dark);
    border: 1.5px solid rgba(29, 36, 58, 0.1);
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    
    transition: background 0.3s ease;
}

.btn-ai-primary:hover,
.btn-ai-secondary:hover {
    transform: translateY(-2px);
}

/* Visual Container */
.ai-hero__visual {
    position: relative;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-hero__visual .wrapper {
    position: absolute;
    width: 100%;
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid #CFDDF6;
    border-radius: 24px;
    z-index: 1;
}

.visual-blob-bg {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(147, 197, 253, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
}

/* AI Cards Shared */
.ai-card {
    position: absolute;
    background: var(--card-bg);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    padding: 24px;
    z-index: 5;
}

.card-icon-round {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.card-icon-round.yellow {
    background: #FEF3C7;
    color: #D97706;
}

.card-icon-round.blue {
    background: #DBEAFE;
    color: #2563EB;
}

.card-icon-round.teal {
    background: #CCFBF1;
    color: #0D9488;
}

.card-skeleton-lines span {
    display: block;
    height: 6px;
    background: #F1F5F9;
    border-radius: 3px;
    margin-bottom: 8px;
}

.card-skeleton-lines span:nth-child(1) {
    width: 80%;
}

.card-skeleton-lines span:nth-child(2) {
    width: 100%;
}

.card-skeleton-lines span:nth-child(3) {
    width: 60%;
}

/* Stage 1 Positioning & Refined Styles */
.visual-frame--ai-main {
    width: 500px;
    height: 340px;
    background: #FFF;
    border-radius: 20px;
    box-shadow: var(--shadow-heavy);
    border: 1px solid #F1F5F9;
}

.visual-stars-decor {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DBEAFE'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.6;
}

.card-header-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.card-header-v2 strong {
    font-size: 0.825rem;
    color: #1E1E1E;
    font-weight: 500;
}

.card-icon-sq {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon-sq.yellow {
    background: #fef3c7;
    color: #d97706;
}

.card-icon-round.light-blue {
    background: #eff6ff;
    color: #3b82f6;
}

.card-ideation {
    top: 36px;
    left: 0px;
    width: 260px;
    background: #FFFDEF;
    border: 2px solid #F2E7A8;
    transform: rotate(-3deg);
    z-index: 10;
}

.list-item-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.list-item-v2 span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
}

.list-item-v2 .line {
    height: 6px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
    width: 70%;
}

.list-item-v2 .line.short {
    width: 60%;
    flex-grow: 0;
}

.list-item-v2 .line.small {
    width: 50%;
    flex-grow: 0;
}

.card-outline {
    top: 100px;
    right: 0px;
    width: 280px;
    border: 5px solid rgba(20, 88, 217, 0.43);
    transform: rotate(2deg);
    z-index: 5;
    background-color: #ffffff;
}

.card-skeleton-stacked {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.stack-box {
    width: 16px;
    height: 16px;
    background: rgba(20, 88, 217, 0.6);
    border-radius: 6px;
}

.stack-box.light {
    background: rgba(20, 88, 217, 0.2);
}

.stack-lines {
    flex-grow: 1;
}


.stack-lines span {
    display: block;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    margin-bottom: 6px;
}



.card-crafting {
    bottom: 59px;
    left: 0px;
    width: 320px;
    background: rgba(173, 235, 255, 0.29);
    border: 5px solid #44B7DB;
    transform: rotate(5deg);
    z-index: 15;
    box-shadow: 0 15px 40px rgba(12, 74, 110, 0.08);
}

.card-crafting::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 20px;
    height: 3px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(68, 183, 219, 0.95), transparent);
    box-shadow: 0 0 18px rgba(68, 183, 219, 0.55);
    transform-origin: left center;
}

.card-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.card-toolbar .tool {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
}

.card-toolbar strong {
    margin-left: 8px;
    font-size: 0.85rem;
    color: #1e293b;
}

.card-skeleton-blue-lines span {
    display: block;
    height: 8px;
    background: #44B7DB;
    border-radius: 4px;
    margin-bottom: 10px;
}

.card-skeleton-blue-lines span:nth-child(1) {
    width: 80%;
}

.card-skeleton-blue-lines span:nth-child(2) {
    width: 80%;
}

.card-skeleton-blue-lines span:nth-child(3) {
    width: 30%;
}

/* Stage 2 Positioning & Refined Styles */
.visual-frame--ai-editor {
    width: 500px;
    height: 340px;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 55px 77px;
    display: flex;
    gap: 30px;
    box-shadow: var(--shadow-heavy);
    border: 1px solid #CFDDF6;
    position: relative;
}

.dashed-line {
    position: absolute;
    top: 17px;
    right: 0;
    /* width: 100%; */
    /* height: 100%; */
    /* object-fit: cover; */
    z-index: 0;
}

.editor-sidebar-icons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.side-icon-box {
    width: 36px;
    height: 36px;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.side-icon-box.active {
    opacity: 1;
    background: rgba(20, 88, 217, 0.2);
}

.editor-main-canvas {
    flex-grow: 1;
    border: 1.5px solid #1458D9;
    border-radius: 20px;
    padding: 20px;
    background: #fff;
    max-height: fit-content;
    z-index: 999;
}

.canvas-header-skeleton {
    width: 60%;
    height: 12px;
    background: rgba(20, 88, 217, 0.3);
    border-radius: 5px;
    margin-bottom: 16px;
}

.canvas-body-skeleton span {
    display: block;
    height: 8px;
    background: #F4F3FB;
    border-radius: 3px;
    margin-bottom: 8px;
    width: 100%;
}

.canvas-body-skeleton span:nth-child(3) {
    width: 80%;
}

.canvas-footer-skeleton {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-box {
    width: 60px;
    height: 24px;
    background: rgba(20, 88, 217, 0.1);
    border-radius: 6px;
}

.footer-icon-pen {
    width: 24px;
    height: 24px;
    color: #3b82f6;
    background: rgba(238, 237, 246, 1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-pills-container {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.status-pill {
    background: #FFFFFF;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #f1f5f9;
    width: 100%;
}

.status-pill svg {
    color: #3b82f6;
}

.status-pill span {
    font-size: 0.5rem;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.5px;
}

.processing-overlay-v2 {
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 280px;
    background: var(--primary-blue);
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(10, 88, 225, 0.25);
    z-index: 20;
    transform: none;
}

.processing-overlay-v2 .proc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.proc-icon-square {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.proc-status-pill {
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.proc-lines-v2 {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.proc-lines-v2 span {
    height: 6px;
    border-radius: 3px;
}

.line-blue {
    background: #3b82f6;
    width: 100%;
}

.line-blue-soft {
    background: #60a5fa;
    width: 80%;
}

.line-white {
    background: #fff;
    width: 60%;
}

.proc-footer-icons {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255, 255, 255, 0.6);
}

.ai-bubble-notif {
    position: absolute;
    top: 65px;
    left: -60px;
    background: #dbeafe;
    padding: 12px 20px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(10, 88, 225, 0.1);
    z-index: 10;
    transform: rotate(-10deg);
}

.bubble-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubble-icon img {
    height: 15px;
    filter: brightness(0) invert(1);
}

.ai-bubble-notif span {
    font-size: 0.75rem;
    font-weight: 500;
    color: #1e40af;
}

/* Stage 3 Positioning & Refined Styles */
.visual-frame--ai-dashboard {
    width: 480px;
    height: 500px;
    background: #FFF;
    border-radius: 24px;
    box-shadow: var(--shadow-heavy);
    border: 1px solid #F1F5F9;
    padding: 24px;
    position: relative;
    z-index: 999;
}

.db-header-v2 {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.db-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-icon-wrap.blue {
    background: #1e3a8a;
    color: #fff;
}

.db-skeleton-title {
    width: 120px;
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
}

.db-status-live {
    margin-left: auto;
    background: #ffffff;
    border: 1px solid rgba(20, 88, 217, 0.05);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    padding: 14px 18px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 6px 16px;
}

.live-blink {
    width: 40px;
    height: 40px;
    min-width: 42px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.1);
    color: #16A34A;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}



.db-status-live span {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    color: #16A34A;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.db-status-live span::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 6px;
    background: #e5e7eb;
    border-radius: 999px;
}

.live-blink::before {
    content: none;
}


.db-main-content {
    display: flex;
    gap: 20px;
}

.db-video-area {
    flex-grow: 1;
    height: 180px;
    background: #F4F3FB;
    border-radius: 16px;
    position: relative;
}

.db-video-overlay {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.play-btn-v3 {
    width: 50px;
    height: 50px;
    background: var(--primary-blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(10, 88, 225, 0.2);
}

.db-video-timeline {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
}

.timeline-progress {
    height: 100%;
    background: var(--primary-blue);
    border-radius: 2px;
}

.db-side-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-side-bars span {
    width: 50px;
    height: 18px;
    background: #EEEDF6;
    border-radius: 4px;
}

.db-metrics-footer {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.metric-box {
    flex: 1;
    background: #F4F3FB;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.metric-icon {
    width: 32px;
    height: 32px;
    color: #1e3a8a;
    background: rgba(0, 41, 126, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-lines {
    width: 100%;
}

.metric-lines span {
    display: block;
    height: 8px;
    background: #E2E1EA;
    border-radius: 999px;
    margin-bottom: 4px;
    width: 100%;
}

.db-bottom-bar-v2 {
    margin-top: 24px;
    background: rgba(0, 41, 126, 0.05);
    border: 1px solid rgba(0, 41, 126, 0.1);
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
}

.db-circle-nav {
    width: 16px;
    height: 16px;
    border: 2px solid #00297E;
    border-radius: 50%;
}

.db-line-nav {
    height: 8px;
    background: rgba(0, 41, 126, 0.2);
    width: 70%;
    border-radius: 3px;
}

.ai-bubble-left {
    position: absolute;
    left: 20px;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    z-index: 999;

}


.sales-page-bubble {
    top: 100px;
    background: #EEEDF6;
    border: 1px solid rgba(20, 88, 217, 0.2);
    color: var(--primary-blue);
    font-size: 0.75rem;
    font-weight: 600;
    transform: rotate(3deg);

}

.blog-articles-bubble {
    top: 170px;
    background: var(--primary-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    transform: rotate(-4deg);
}

.success-growth-card {
    position: absolute;
    bottom: -65px;
    right: 0px;
    width: 240px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #E2E1EA;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    z-index: 999;
}

.success-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.success-header small {
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
}

.success-stats {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
}

.success-stats strong {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
}

.growth-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #22c55e;
}

.success-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 40px;
}

.success-mini-chart span {
    flex-grow: 1;
    background: #eff6ff;
    border-radius: 3px;
    width: 20px;
}

.success-mini-chart span:nth-child(4) {
    background: #93c5fd;
}

@media (max-width: 991px) {
    .ai-hero__grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .ai-hero__copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .ai-hero__actions {
        justify-content: center;
    }

    .ai-hero__visual {
        transform: scale(0.9);
    }
}

/* =========================================
   AI Native Features Section
   ========================================= */

.ai-native-features {
    padding: 120px 0;
    background: #ffffff;
}

.ai-native__badge {
    display: inline-block;
    background: rgba(0, 75, 202, 0.1);
    color: #004BCA;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.ai-native__title {
    
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-dark);
    margin-bottom: 32px;
}

.text-blue-bg {
    display: inline-block;
    background: var(--primary-blue);
    color: #fff;
    padding: 2px 14px;
    border-radius: 999px;
}

.ai-native__desc {
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--text-muted);
    max-width: 480px;
}

.ai-feature-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-feature-card {
    background: #F4F3FB;
    border: 1px solid rgba(196, 197, 212, 0.2);
    border-radius: 24px;
    padding: 30px 20px;
    display: flex;
    gap: 12px;
    transition: all 0.3s ease;
}

.ai-feature-card:hover {

    transform: translateX(5px);
}

.ai-feature-icon-box {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-feature-icon-box.box-1 {
    background-color: #C4D7FA;
    color: #1458D9;
}

.ai-feature-icon-box.box-2 {
    background-color: #FFF5C9;
    color: #ECD368;
}

.ai-feature-icon-box.box-3 {
    background-color: rgba(119, 200, 222, 0.16);
    color: #77C8DE;
}

.ai-feature-icon-box.box-4 {
    background-color: rgba(215, 146, 130, 0.31);
    color: #D68772;
}

.ai-feature-icon-box.box-5 {
    background-color: rgba(185, 203, 179, 0.22);
    color: #B4C8AA;
}

.ai-feature-icon-box.box-6 {
    background-color: rgba(226, 164, 250, 0.23);
    color: #E2A4FA;
}


.ai-feature-content h3 {
    
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.ai-feature-content p {
    font-size: 0.825rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .ai-native-features {
        padding: 80px 0;
    }

    .ai-native__title {
        font-size: 2.2rem;
    }

    .ai-feature-card {
        padding: 24px;
        flex-direction: column;
        gap: 16px;
    }
}

/* =========================================
   Features Tabs Section
   ========================================= */

.ai-features-tabs {
    background: #ffffff;
}

.ai-tabs-nav .nav-link {
    background: transparent;
    border: none;
    color: var(--ai-text-dark);
    
    font-size: 0.825rem;
    font-weight: 600;
    text-align: left;
    padding: 18px 24px;
    border-radius: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.ai-tabs-nav .nav-link .icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-tabs-nav .nav-link:hover {
    background: #f8fafc;
}

.ai-tabs-nav .nav-link.active .icon img {
    filter: brightness(0) invert(1);
}


.ai-tabs-nav .nav-link.active {
    background: var(--primary-blue) !important;
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(10, 88, 225, 0.2);
}

.ai-tabs-nav .nav-link.active .icon {
    opacity: 1;
}

/* Content Box */
.ai-tab-box {
    border-radius: 32px;
    padding: 60px;
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 480px;
}

.ai-tab-box.tab-1 {
    background-color: #F5E6D3;
}

.ai-tab-box.tab-2 {
    background-color: #E0F2F1;
}

.ai-tab-box.tab-3 {
    background-color: #FFF3E0;
}

.ai-tab-box.tab-4 {
    background-color: #F3E5F5;
}

.ai-tab-box.tab-5 {
    background-color: #E3F2FD;
}

.ai-tab-box.tab-6 {
    background-color: #F1F8E9;
}

.ai-tab-box.tab-7 {
    background-color: #ECEFF1;
}


.ai-tab-info {
    flex: 1;
}

.ai-tab-tag {
    display: inline-block;
    background: rgba(10, 88, 225, 0.1);
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.ai-tab-info h2 {
    
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 20px;

}

.ai-tab-info p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 30px;
    max-width: 440px;
}

.ai-tab-link {
    color: var(--primary-blue);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}

.ai-tab-link:hover {
    text-decoration: underline;
}

/* Visual Mockups */
.ai-tab-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Shared Mock Components */
.mock-float-btn,
.mock-float-share,
.mock-float-magic,
.mock-float-btn-small,
.mock-float-blue,
.mock-float-share-privacy {
    position: absolute;
    width: 64px;
    height: 64px;
    background: #FFFFFF;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.mock-float-btn img,
.mock-float-share img,
.mock-float-magic img,
.mock-float-btn-small img,
.mock-float-blue img,
.mock-float-share-privacy img {
    height: 22px;
}

/* AI Hub & Website Generation (Updated for Tab 1) */
.hub-generation-mockup-container {
    width: 320px;
    height: 320px;
    position: relative;
    margin: 0 auto;
}

.hub-base-site-mock {
    width: 260px;
    height: 280px;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.site-mock-header {
    height: 18px;
    background: #F1F5F9;
    border-radius: 4px;
    width: 40%;
}

.grid-item {
    flex: 1;
    height: 60px;
    background: #F8FAFC;
    border-radius: 8px;
}

.hub-modal-float-card {
    position: absolute;
    bottom: 20px;
    right: 0;
    width: 260px;
    background: #F1F5F9;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.hub-modal-input-field {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: left;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.hub-modal-cta-btn {
    height: 48px;
    background: var(--primary-blue);
    border-radius: 8px;
    width: 45%;
}

.hub-modal-sparkle-overlap {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 76px;
    height: 76px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px rgba(10, 88, 225, 0.3);
    z-index: 5;
}

.hub-modal-sparkle-overlap img {
    width: 32px;
}

/* Course Creation (Updated for Course Creation Tab) */
.course-creation-mockup-stack {
    width: 280px;
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.course-creation-panel {
    background: #FFFFFF;
    border-radius: 12px;
    height: 54px;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.teal-left-border {
    width: 6px;
    height: 100%;
    background: #0D9488;
    border-radius: 0 4px 4px 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.panel-inner-line {
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    width: 160px;
    margin-left: 25px;
}

.course-creation-sparkle-btn {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 76px;
    height: 76px;
    background: #065F46;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px rgba(6, 95, 70, 0.3);
    z-index: 5;
}

.course-creation-sparkle-btn img {
    width: 32px;
}

/* Mock Sales */
/* Sales Pages (Updated for Sales Pages Tab) */
.sales-page-mockup-card {
    width: 280px;
    height: 320px;
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: visible;
    margin: 0 auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.sales-mock-header-box {
    height: 120px;
    background: #FFF3E0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-mock-circle-center {
    width: 60px;
    height: 60px;
    background: #FFE0B2;
    border-radius: 50%;
}

.sales-mock-gray-bar {
    height: 12px;
    background: #F1F5F9;
    border-radius: 6px;
    width: 100%;
}

.sales-mock-blue-cta {
    height: 44px;
    background: var(--primary-blue);
    border-radius: 8px;
    width: 100%;
}

.sales-mock-bottom-row {
    margin-top: 10px;
    gap: 10px;
}

.sm-sq {
    flex: 1;
    height: 50px;
    background: #F8FAFC;
    border-radius: 8px;
}

.sales-mock-sparkle-overlap {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 76px;
    height: 76px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px rgba(10, 88, 225, 0.3);
    z-index: 5;
}

.sales-mock-sparkle-overlap img {
    width: 32px;
}

/* Blog Articles (Updated for Blog Articles Tab) */
.blog-post-snippet-card {
    width: 320px;
    height: 180px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: visible;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.blog-post-top-stripe {
    height: 8px;
    background: var(--primary-blue);
    width: 65%;
    border-radius: 4px 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
}

.blog-post-content-container {
    padding: 30px;
    margin-top: 8px;
}

.green-bullet {
    width: 20px;
    height: 20px;
    background: #4ADE80;
    border-radius: 6px;
}

.title-line {
    height: 8px;
    background: #F1F5F9;
    border-radius: 4px;
    width: 90px;
}

.body-line {
    height: 10px;
    background: #F1F5F9;
    border-radius: 5px;
    width: 100%;
}

.body-line.short {
    width: 60%;
}

.blog-post-sparkle-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 76px;
    height: 76px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px rgba(10, 88, 225, 0.3);
    z-index: 5;
}

.blog-post-sparkle-badge img {
    width: 32px;
}

/* Image Generation (Updated for Image Generation Tab) */
.image-gen-box {
    width: 280px;
}

.img-gen-sq {
    flex: 1;
    aspect-ratio: 1;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.img-gen-sq img {
    width: 38px;
}

.img-gen-sq.sq-white {
    background: #FFFFFF;
}

.img-gen-sq.sq-blue {
    background: var(--primary-blue);
}

.img-gen-bottom {
    background: rgba(10, 88, 225, 0.12);
    border-radius: 20px;
    padding: 12px 18px;
}

.sparkle-progress {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sparkle-circle-small {
    width: 48px;
    height: 48px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sparkle-circle-small img {
    width: 22px;
}

.progress-track-line {
    height: 6px;
    background: rgba(10, 88, 225, 0.15);
    border-radius: 3px;
    flex: 1;
    position: relative;
}

.progress-track-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--primary-blue);
    border-radius: 3px;
    opacity: 0.2;
}

/* Mock Control (Updated for Creator Control Tab) */
.creator-control-card {
    width: 320px;
    height: 180px;
    background: #FFFFFF;
    border-radius: 32px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.control-slider-box {
    width: 100%;
}

.range-track {
    height: 8px;
    background: #F1F5F9;
    border-radius: 4px;
    position: relative;
    margin-bottom: 12px;
}

.range-fill {
    height: 100%;
    background: var(--primary-blue);
    border-radius: 4px;
}

.range-thumb {
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border: 3px solid var(--primary-blue);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.range-labels {
    display: flex;
    justify-content: space-between;
}

.range-labels span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.control-placeholders {
    display: flex;
    gap: 12px;
}

.p-sq {
    width: 44px;
    height: 44px;
    background: #F8FAFC;
    border: 2px solid transparent;
    border-radius: 10px;
}

.p-sq.active {
    border-color: var(--primary-blue);
    background: #FFFFFF;
}

.control-ai-btn {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 76px;
    height: 76px;
    background: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px rgba(10, 88, 225, 0.3);
    z-index: 5;
}

.control-ai-btn img {
    width: 32px;
}

/* Mock Privacy */
.mock-privacy-shield {
    width: 240px;
    height: 240px;
    background: #1458D9;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.shield-main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mock-float-share-privacy {
    top: -20px;
    left: -20px;

}

@media (max-width: 991px) {
    .ai-features-tabs {
        padding: 60px 0;
    }

    .ai-tab-box {
        flex-direction: column;
        padding: 40px;
        text-align: center;
    }

    .ai-tab-info p {
        margin-left: auto;
        margin-right: auto;
    }

    .ai-tab-visual {
        margin-top: 40px;
    }
}

@media (max-width: 991.98px) {
    .ai-features-tabs .ai-tabs-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 28px !important;
        padding: 0 4px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
    }

    .ai-features-tabs .ai-tabs-nav::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .ai-features-tabs .ai-tabs-nav .nav-link {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: max-content;
        max-width: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
    }

    .ai-features-tabs .ai-tabs-nav .nav-link .icon,
    .ai-features-tabs .ai-tabs-nav .nav-link>img {
        flex: 0 0 auto !important;
    }
}

/* =========================================
   AI Overview Visualization Styles
   ========================================= */

.ai-overview__visual {
    position: relative;
    height: 600px;
    margin: 80px auto 0;
    max-width: 900px;
    display: flex;
    justify-content: center;
}

.ai-overview .section-headline {
    text-align: center !important;
}




/* Background Layered Cards */
.bg-card {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid rgba(29, 36, 58, 0.05);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    z-index: 1;
    transition: transform 0.3s ease;
}

.bg-card__header {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* Hub Card */
.bg-card--hub {
    top: 50px;
    left: -100px;
    width: 220px;
}

.ai-overview__visual .icon-star,
.ai-overview__visual .icon-circle {
    background: rgba(20, 88, 217, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hub-progress-bar {
    margin-bottom: 8px;
}

.hub-progress-track {
    height: 5px;
    background: #E8E7F0;
    border-radius: 3px;
    width: 100%;
    overflow: hidden;
}

.hub-progress-fill {
    height: 100%;
    width: 75%;
    background: var(--primary-blue);
    border-radius: 3px;
}

.hub-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hub-label-left {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(29, 36, 58, 0.35);
    letter-spacing: 0.5px;
}

.hub-label-right {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--primary-blue);
}

/* Branding Card */
.bg-card--branding {
    /* bottom: 242px; */
    top: 39%;
    left: -61px;
    width: 200px;

}



.bg-card--branding .bg-card__dots {
    display: flex;
    gap: 6px;
}

.bg-card--branding .bg-card__dots span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: block;
}

.bg-card--branding .bg-card__dots .d1 {
    background: #3b82f6;
}

.bg-card--branding .bg-card__dots .d2 {
    background: #1d4ed8;
}

.bg-card--branding .bg-card__dots .d3 {
    background: #93c5fd;
}

.bg-card--branding .bg-card__dots .d4 {
    background: #e2e8f0;
}

/* Course Structure Card */
.bg-card--structure {
    top: 30px;
    right: -100px;
    width: 220px;
}

.bg-card--structure .bg-card__lines span {
    display: block;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    margin-bottom: 8px;
    width: 100%;
}

/* Sales Card */
.bg-card--sales {
    /* bottom: 100px; */
    top: 39%;
    right: -80px;
    width: 210px;
}

.sales-icon-rounded {
    width: 32px;
    height: 32px;
    background: rgba(10, 88, 225, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-icon-rounded img {
    width: 16px;
}

.sales-mock-lines .s-line {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    margin-bottom: 6px;
    width: 100%;
}

.sales-mock-lines .s-line.short {
    width: 70%;
}

.small-blue-btn {
    width: 32px;
    height: 14px;
    background: var(--primary-blue);
    border-radius: 4px;
}

/* Main Dashboard */
.ai-main-dashboard {
    position: relative;
    width: 100%;
    max-width: 680px;
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(29, 36, 58, 0.05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    z-index: 10;
    overflow: hidden;
    height: fit-content;
}

.main-db__header {
    background: #fff;
    padding: 16px 24px;
    display: flex;
    align-items: center;

}

.traffic-lights {
    display: flex;
    gap: 6px;
    margin-right: 20px;
}

.traffic-lights span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.traffic-lights .red {
    background: #ff5f56;
}

.traffic-lights .yellow {
    background: #ffbd2e;
}

.traffic-lights .green {
    background: #27c93f;
}

.main-db__header .title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    flex: 1;
}

.main-db__header .status-pill {
    width: fit-content;
}

.status-pill {
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgba(0, 41, 126, 0.1);
    color: #1458D9;
    font-size: 0.65rem;
    font-weight: 400;
    padding: 10px 16px;
    border-radius: 999px;
}

.main-db__body {
    padding: 40px;
}

.skeleton-block {
    background: #E8E7F0;
    border-radius: 4px;
}

.metric-box {
    background: #F4F3FB;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.metric-box small {
    font-size: 0.625rem;
    font-weight: 400;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}

.metric-box h3 {
    
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary-blue);
    margin: 0;
}

.loading-wrapper {
    background: rgba(232, 231, 240, 0.3);
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner-circle {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(10, 88, 225, 0.1);
    border-top: 3px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin-ai 1.5s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin-ai {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-wrapper p {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.btn-launch-hub {
    background: var(--primary-blue);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 10px 20px rgba(10, 88, 225, 0.2);
    transition: transform 0.3s ease;
}

.btn-launch-hub:hover {
    transform: translateY(-2px);
}

.learmo-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.learmo-shape--cyan {
    bottom: -30%;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(50px);
    background-color: #93C5FD;
    opacity: 0.8;

}

.learmo-shape--yellow {
    left: 40%;
    bottom: -1px;
    width: 76px;
}


.ai-hero .hero-circle {
    position: absolute;
    top: 10%;
    left: 0%;
    z-index: 999;
}


@media (max-width: 991px) {
    .ai-overview__visual {
        height: auto;
        padding-bottom: 40px;
    }

    .bg-card {
        display: none;
    }


    .ai-overview .section-description br {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .ai-overview__visual {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        margin: 48px auto 0;
        padding: 0 16px 36px;
    }

    .ai-overview__visual .bg-card,
    .ai-overview__visual .ai-main-dashboard {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
    }

    .ai-overview__visual .bg-card {
        z-index: 1;
    }

    .ai-overview__visual .bg-card--hub {
        order: 1;
    }

    .ai-overview__visual .bg-card--branding {
        order: 2;
    }

    .ai-overview__visual .ai-main-dashboard {
        order: 3;
        z-index: 2;
    }

    .ai-overview__visual .bg-card--structure {
        order: 4;
    }

    .ai-overview__visual .bg-card--sales {
        order: 5;
    }

    .ai-overview__visual .main-db__header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .ai-overview__visual .traffic-lights {
        margin-right: 0;
    }

    .ai-overview__visual .main-db__header .title {
        flex: 1 1 100%;
        text-align: center;
    }

    .ai-overview__visual .main-db__header .status-pill {
        margin: 0 auto;
    }

    .ai-overview__visual .main-db__body {
        padding: 28px 20px;
    }
}

/* AI Hub Generation Page */
body.ai-page-body {
    margin: 0;
    min-height: 100vh;
    background: #ffffff;
    color: #121827;

    overflow-x: hidden;
}





.ai-page {
    min-height: 100vh;
    background: #ffffff;
}

/* =========================================
   Reusable AI Hero Component
   ========================================= */

.ai-hero-section {
    position: relative;
    min-height: 100vh;
    padding: 92px 0 72px;
    overflow: hidden;
}

.ai-hero-wrapper {
    position: relative;
    z-index: 2;
}

.ai-hero-content {
    margin: auto;
    text-align: center;
}

.ai-hero-badge {
    margin-bottom: 16px;
}

.ai-hero-title span {
    color: #075fff;
}

.ai-hero-desc {
    max-width: 620px;
    margin-top: 18px;
}

.ai-hero-actions {
    align-items: center;
    justify-content: center;
    margin-top: 26px;
}

.ai-hero-btn-solid,
.ai-hero-btn-outline {
    min-width: 142px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    border-radius: 999px;
    
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ai-hero-btn-solid {
    color: #ffffff;
    background: var(--section-accent, #1458d9);
    border-color: var(--section-accent, #1458d9);
    box-shadow: 0 14px 24px var(--section-accent-shadow, rgba(20, 88, 217, 0.18));
}

.ai-hero-btn-outline {
    color: var(--section-accent, #1458d9);
    background: #ffffff;
    border-color: var(--section-accent-border, #c9dcff);
    box-shadow: none;
}

.ai-hero-btn-solid:hover,
.ai-hero-btn-outline:hover {
    transform: translateY(-2px);
}

.ai-hero-btn-solid:hover {
    color: #ffffff;
    background: var(--section-accent-hover, #0f49bd);
    border-color: var(--section-accent-hover, #0f49bd);
}

.ai-hero-btn-outline:hover {
    color: var(--section-accent-hover, #0f49bd);
    background: var(--section-accent-soft, #edf5ff);
}

.ai-hero-visual-wrap {
    position: relative;
    width: min(100%, 860px);
    min-height: 390px;
    margin-inline: auto;
}

.ai-hero-device {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: visible;
}

.ai-hero-device img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 32px rgba(31, 41, 55, 0.1));
}

.blog-hero-floating-layer {
    z-index: 8;
}

.blog-hero-action-card {
    left: -5.8%;
    top: 12.8%;
    width: clamp(190px, 28%, 275px);
    min-height: clamp(205px, 31vw, 315px);
    display: grid;
    gap: 10px;
    padding: clamp(14px, 1.85vw, 22px);
    border: 1px solid rgba(229, 238, 250, 0.66);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 34px 54px rgba(23, 35, 62, 0.18);
    transform: perspective(900px) rotateZ(10deg) rotateY(-7deg);
    transform-origin: 50% 48%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.blog-hero-action-row {
    display: grid;
    grid-template-columns: clamp(28px, 4vw, 42px) 1fr;
    align-items: center;
    gap: clamp(9px, 1.5vw, 16px);
    min-height: clamp(38px, 5.5vw, 60px);
    padding: 0 clamp(10px, 1.5vw, 18px);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 26px rgba(31, 47, 78, 0.07);
}

.blog-hero-action-row:nth-child(2) {
    margin-left: 4%;
}

.blog-hero-action-row:nth-child(3) {
    margin-left: 7%;
}

.blog-hero-action-row:nth-child(4) {
    margin-left: 10%;
}

.blog-hero-action-icon {
    width: clamp(22px, 3.2vw, 34px);
    height: clamp(22px, 3.2vw, 34px);
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #1458d9;
    background: rgba(232, 247, 255, 0.92);
}

.blog-hero-action-icon svg {
    width: 62%;
    height: 62%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.blog-hero-action-icon--check svg {
    width: 68%;
    height: 68%;
}

.blog-hero-action-line {
    display: block;
    width: 82%;
    height: clamp(5px, 0.85vw, 8px);
    border-radius: 999px;
    background: #e7edf5;
    box-shadow: 0 13px 0 #eef3f8;
}

.blog-hero-action-line--long {
    width: 92%;
}

.blog-hero-action-line--short {
    width: 58%;
}

.blog-hero-action-line--wide {
    width: 88%;
}

.blog-hero-feature-card {
    right: -10.2%;
    bottom: 19.4%;
    width: clamp(255px, 39%, 390px);
    min-height: clamp(150px, 22vw, 225px);
    padding: clamp(18px, 2.2vw, 27px) clamp(18px, 2.4vw, 30px) clamp(14px, 1.8vw, 22px);
    border: 1.25px solid rgba(20, 88, 217, 0.84);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 32px 58px rgba(25, 44, 83, 0.16);
    transform: perspective(940px) rotateZ(-6deg) rotateY(5deg);
    transform-origin: 48% 52%;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.blog-hero-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(18px, 3vw, 34px);
    row-gap: clamp(13px, 2.1vw, 24px);
}

.blog-hero-feature-item {
    display: grid;
    grid-template-columns: clamp(34px, 5vw, 52px) 1fr;
    align-items: center;
    gap: clamp(10px, 1.5vw, 16px);
    min-width: 0;
}

.blog-hero-feature-icon {
    position: relative;
    width: clamp(32px, 4.8vw, 50px);
    height: clamp(32px, 4.8vw, 50px);
    display: block;
    border-radius: 10px;
    color: #1458d9;
    background: rgba(229, 250, 255, 0.93);
}

.blog-hero-feature-lines {
    display: grid;
    gap: clamp(6px, 0.9vw, 9px);
}

.blog-hero-feature-lines i {
    display: block;
    width: 100%;
    height: clamp(5px, 0.75vw, 8px);
    border-radius: 999px;
    background: #edf2f7;
}

.blog-hero-feature-lines i:last-child {
    width: 72%;
}

.blog-hero-feature-icon--tag::before {
    content: "";
    position: absolute;
    left: 31%;
    top: 31%;
    width: 42%;
    height: 35%;
    border: 2px solid currentColor;
    border-radius: 3px;
    transform: rotate(8deg);
}

.blog-hero-feature-icon--tag::after {
    content: "";
    position: absolute;
    left: 38%;
    top: 39%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.blog-hero-feature-icon--document::before {
    content: "";
    position: absolute;
    left: 34%;
    top: 25%;
    width: 33%;
    height: 48%;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.blog-hero-feature-icon--document::after {
    content: "";
    position: absolute;
    left: 41%;
    top: 40%;
    width: 18%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor;
}

.blog-hero-feature-icon--list::before {
    content: "";
    position: absolute;
    left: 34%;
    top: 28%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 9px 0 currentColor, 0 18px 0 currentColor;
}

.blog-hero-feature-icon--list::after {
    content: "";
    position: absolute;
    left: 48%;
    top: 29%;
    width: 22%;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 9px 0 currentColor, 0 18px 0 currentColor;
}

.blog-hero-feature-icon--folder::before {
    content: "";
    position: absolute;
    left: 27%;
    top: 36%;
    width: 48%;
    height: 34%;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.blog-hero-feature-icon--folder::after {
    content: "";
    position: absolute;
    left: 30%;
    top: 29%;
    width: 24%;
    height: 12%;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

.blog-hero-feature-dividers {
    display: grid;
    grid-template-columns: 1.15fr 0.75fr 1fr;
    gap: clamp(12px, 1.8vw, 22px);
    margin-top: clamp(18px, 3vw, 34px);
}

.blog-hero-feature-dividers span {
    height: clamp(3px, 0.45vw, 5px);
    border-radius: 999px;
    background: #cfe0f7;
}

.blog-hero-feature-dividers span:nth-child(2) {
    background: #dff3f4;
}

@media (max-width: 991px) {
    .blog-hero-action-card {
        left: -2%;
        top: 10%;
        transform: perspective(900px) rotateZ(10deg) rotateY(-7deg) scale(0.84);
    }

    .blog-hero-feature-card {
        right: -4%;
        bottom: 17%;
        transform: perspective(940px) rotateZ(-6deg) rotateY(5deg) scale(0.84);
    }
}

@media (max-width: 575px) {
    .blog-hero-action-card {
        left: -6%;
        top: 8%;
        transform: perspective(900px) rotateZ(10deg) rotateY(-7deg) scale(0.62);
    }

    .blog-hero-feature-card {
        right: -10%;
        bottom: 15%;
        transform: perspective(940px) rotateZ(-6deg) rotateY(5deg) scale(0.62);
    }
}

/* =========================================
   AI Blog Feature Section Visuals
   ========================================= */

.blog-idea-generation-section,
.blog-article-section,
.blog-assistant-section {
    overflow: hidden;
}

.blog-idea-visual,
.blog-article-visual,
.blog-assistant-visual {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-idea-canvas,
.blog-article-canvas,
.blog-assistant-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1.07 / 1;
    min-height: 0;
    border-radius: clamp(20px, 4vw, 28px);
}

.blog-idea-canvas {
    background: #e7e9ff;
}

.blog-idea-canvas::before,
.blog-idea-canvas::after,
.blog-article-canvas::before,
.blog-article-canvas::after,
.blog-assistant-canvas::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.blog-idea-canvas::before {
    left: 8.5%;
    top: 10.2%;
    width: 7.3%;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.24);
}

.blog-idea-canvas::after {
    right: 11.2%;
    bottom: 10%;
    width: 17.4%;
    aspect-ratio: 1;
    background: rgba(196, 181, 253, 0.19);
}

.blog-idea-main-card {
    position: absolute;
    left: 16.9%;
    top: 20.2%;
    width: 60.7%;
    min-height: 57.2%;
    padding: 6% 5.3% 5.4%;
    border-radius: clamp(10px, 2.2vw, 14px);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 22px 42px rgba(91, 89, 170, 0.12);
    z-index: 2;
}

.blog-idea-dots {
    display: flex;
    gap: clamp(5px, 1.4vw, 8px);
    margin-bottom: 8.2%;
}

.blog-idea-dots span {
    width: clamp(6px, 1.6vw, 9px);
    height: clamp(6px, 1.6vw, 9px);
    border-radius: 50%;
    background: #dde5f1;
}

.blog-idea-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 2.1vw, 12px);
}

.blog-idea-grid div {
    min-height: clamp(40px, 11.8vw, 64px);
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #f7f8ff;
}

.blog-idea-grid div:nth-child(4) {
    background: #faf3ff;
}

.blog-idea-grid div:nth-child(n+5) {
    align-content: center;
    gap: 9px;
    background: #f8fbff;
}

.blog-idea-grid i {
    display: block;
    width: 72%;
    height: clamp(4px, 1.1vw, 6px);
    border-radius: 999px;
    background: #dfe8f3;
}

.blog-idea-grid i:last-child {
    width: 54%;
}

.blog-idea-icon,
.blog-idea-utility-icon,
.blog-article-round-icon,
.blog-article-pill-icon,
.blog-assistant-tool,
.blog-assistant-user,
.blog-assistant-gear,
.blog-assistant-wand {
    position: relative;
    display: block;
    color: var(--section-accent, #1458d9);
}

.blog-idea-icon {
    width: clamp(18px, 4.2vw, 24px);
    height: clamp(18px, 4.2vw, 24px);
}

.blog-idea-icon--cap::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 7px;
    width: 18px;
    height: 10px;
    border: 2px solid currentColor;
    clip-path: polygon(50% 0, 100% 37%, 50% 75%, 0 37%);
}

.blog-idea-icon--cap::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 14px;
    width: 9px;
    height: 5px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 7px 7px;
}

.blog-idea-icon--shield::before {
    content: "";
    position: absolute;
    inset: 4px 6px 3px;
    border: 2px solid currentColor;
    border-radius: 9px 9px 11px 11px;
    clip-path: polygon(50% 0, 100% 18%, 86% 82%, 50% 100%, 14% 82%, 0 18%);
}

.blog-idea-icon--shield::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 9px;
    width: 5px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.blog-idea-icon--rocket::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 3px;
    width: 11px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 9px 9px 5px 5px;
    transform: rotate(45deg);
}

.blog-idea-icon--rocket::after {
    content: "";
    position: absolute;
    left: 5px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.blog-idea-icon--calendar::before {
    content: "";
    position: absolute;
    inset: 5px 4px 3px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.blog-idea-icon--calendar::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 10px;
    height: 2px;
    background: currentColor;
}

.blog-idea-utility-card {
    position: absolute;
    right: 9.2%;
    top: 15.6%;
    width: 36.9%;
    height: 11.6%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: clamp(7px, 1.5vw, 9px);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 31px rgba(73, 67, 143, 0.16);
    z-index: 4;
}

.blog-idea-utility-icon {
    width: clamp(17px, 3.8vw, 22px);
    height: clamp(17px, 3.8vw, 22px);
}

.blog-idea-utility-icon--pin::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.blog-idea-utility-icon--sparkle::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid currentColor;
    border-radius: 3px;
    clip-path: polygon(50% 0, 63% 38%, 100% 50%, 63% 62%, 50% 100%, 37% 62%, 0 50%, 37% 38%);
}

.blog-idea-utility-icon--power::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
}

.blog-idea-utility-icon--power::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 3px;
    width: 2px;
    height: 8px;
    background: currentColor;
    border-radius: 999px;
}

.blog-idea-compass-card {
    position: absolute;
    left: 7.3%;
    bottom: 17.9%;
    width: 13%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: clamp(10px, 2vw, 13px);
    background: #ffffff;
    box-shadow: 0 18px 35px rgba(73, 67, 143, 0.18);
    z-index: 4;
}

.blog-idea-compass-card span {
    position: relative;
    width: 42%;
    height: 42%;
    border: 3px solid #7c5cf6;
    border-radius: 50%;
}

.blog-idea-compass-card span::before {
    content: "";
    position: absolute;
    left: 8px;
    top: -5px;
    width: 12px;
    height: 12px;
    border-top: 3px solid #7c5cf6;
    border-right: 3px solid #7c5cf6;
    transform: rotate(45deg);
}

.blog-article-canvas {
    background: #fff0d8;
    overflow: hidden;
}

.blog-article-canvas::before {
    left: -6%;
    top: 49.2%;
    width: 10.5%;
    aspect-ratio: 1;
    background: #ffffff;
}

.blog-article-canvas::after {
    right: -9%;
    top: 33.2%;
    width: 20.9%;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.42);
}

.blog-article-orbit {
    position: absolute;
    left: 8.4%;
    top: 7.3%;
    width: 19.5%;
    aspect-ratio: 1;
    border: 1.4px solid rgba(149, 98, 33, 0.14);
    border-radius: 50%;
}

.blog-article-top-card,
.blog-article-main-card,
.blog-article-bottom-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 40px rgba(129, 91, 43, 0.12);
    z-index: 2;
}

.blog-article-top-card {
    left: 21%;
    top: 7.5%;
    width: 62.7%;
    height: 18.2%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11.2%;
    border-radius: clamp(10px, 2.4vw, 14px);
}

.blog-article-round-icon {
    width: clamp(28px, 6.4vw, 38px);
    height: clamp(28px, 6.4vw, 38px);
    border-radius: 50%;
    background: #fff4df;
}

.blog-article-round-icon::before,
.blog-article-round-icon::after,
.blog-article-pill-icon::before,
.blog-article-pill-icon::after,
.blog-article-send::before,
.blog-article-send::after {
    content: "";
    position: absolute;
}

.blog-article-round-icon--bulb::before {
    left: 14px;
    top: 10px;
    width: 10px;
    height: 12px;
    border: 2px solid #956121;
    border-radius: 50%;
}

.blog-article-round-icon--bulb::after {
    left: 15px;
    top: 23px;
    width: 8px;
    height: 2px;
    background: #956121;
    box-shadow: 0 4px 0 #956121;
}

.blog-article-round-icon--wand::before {
    left: 12px;
    top: 17px;
    width: 17px;
    height: 3px;
    border-radius: 999px;
    background: #956121;
    transform: rotate(-45deg);
}

.blog-article-round-icon--wand::after {
    left: 11px;
    top: 8px;
    width: 5px;
    height: 5px;
    background: #956121;
    clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
}

.blog-article-round-icon--user::before {
    left: 15px;
    top: 10px;
    width: 9px;
    height: 9px;
    border: 2px solid #956121;
    border-radius: 50%;
}

.blog-article-round-icon--user::after {
    left: 11px;
    top: 22px;
    width: 17px;
    height: 8px;
    border: 2px solid #956121;
    border-radius: 12px 12px 0 0;
}

.blog-article-main-card {
    left: 8.2%;
    top: 34.7%;
    width: 79.5%;
    min-height: 37.4%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 2vw, 13px) 5.1%;
    padding: 6.6% 6.2%;
    border-radius: clamp(12px, 2.6vw, 16px);
}

.blog-article-pill {
    position: relative;
    height: clamp(34px, 8vw, 46px);
    display: grid;
    place-items: center;
    border: 1.5px solid #c69251;
    border-radius: 999px;
    background: #fff0d9;
}

.blog-article-pill-icon {
    width: 22px;
    height: 22px;
    color: #956121;
}

.blog-article-pill-icon--nodes::before {
    left: 4px;
    top: 5px;
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-shadow: 9px 7px 0 -1px #fff0d9, 9px 7px 0 1px currentColor;
}

.blog-article-pill-icon--nodes::after {
    left: 9px;
    top: 10px;
    width: 8px;
    height: 2px;
    background: currentColor;
    transform: rotate(32deg);
}

.blog-article-pill-icon--target::before {
    inset: 4px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.blog-article-pill-icon--target::after {
    left: 9px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.blog-article-pill-icon--search::before {
    left: 4px;
    top: 4px;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.blog-article-pill-icon--search::after {
    left: 13px;
    top: 14px;
    width: 8px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
}

.blog-article-pill-icon--camera::before {
    left: 4px;
    top: 7px;
    width: 15px;
    height: 11px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.blog-article-pill-icon--camera::after {
    left: 9px;
    top: 10px;
    width: 5px;
    height: 5px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.blog-article-bottom-card {
    left: 20.2%;
    bottom: 9.9%;
    width: 55.5%;
    height: 14.9%;
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 7.4%;
    padding: 0 4.1%;
    border-radius: clamp(9px, 1.9vw, 12px);
}

.blog-article-check {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #fff0d9;
}

.blog-article-check::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    width: 8px;
    height: 12px;
    border-right: 2px solid #956121;
    border-bottom: 2px solid #956121;
    transform: rotate(45deg);
}

.blog-article-slider {
    position: relative;
    height: 2px;
    border-radius: 999px;
    background: #e1e5ec;
}

.blog-article-slider i {
    position: absolute;
    left: 46%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cfd7e5;
    transform: translateY(-50%);
}

.blog-article-send {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #fff0d9;
}

.blog-article-send::before {
    left: 8px;
    top: 7px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #956121;
    border-right: 2px solid #956121;
    transform: rotate(45deg);
}

.blog-assistant-canvas {
    background: #eef3ff;
}

.blog-assistant-slider-card,
.blog-assistant-main-card,
.blog-assistant-bottom-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 22px 42px rgba(32, 73, 142, 0.12);
    z-index: 2;
}

.blog-assistant-slider-card {
    left: 13%;
    top: 7%;
    width: 71.4%;
    height: 17.9%;
    display: grid;
    grid-template-columns: clamp(26px, 6vw, 34px) 1fr clamp(27px, 6vw, 35px);
    align-items: center;
    gap: 4.9%;
    padding: 0 4.8%;
    border-radius: clamp(10px, 2vw, 13px);
}

.blog-assistant-user {
    width: clamp(24px, 5.6vw, 31px);
    height: clamp(24px, 5.6vw, 31px);
    border-radius: 50%;
    background: #eef5ff;
}

.blog-assistant-user::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1458d9;
}

.blog-assistant-user::after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 7px;
    width: 15px;
    height: 6px;
    border-radius: 9px 9px 0 0;
    background: #1458d9;
}

.blog-assistant-progress {
    height: clamp(4px, 1.1vw, 6px);
    border-radius: 999px;
    background: #e7edf8;
}

.blog-assistant-progress i {
    display: block;
    width: 74%;
    height: 100%;
    border-radius: inherit;
    background: #1458d9;
}

.blog-assistant-gear {
    width: clamp(22px, 5vw, 27px);
    height: clamp(22px, 5vw, 27px);
    border-radius: 50%;
    background: #f3f7ff;
}

.blog-assistant-gear::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px solid #1458d9;
    border-radius: 50%;
}

.blog-assistant-main-card {
    left: 6.6%;
    top: 29.8%;
    width: 84.4%;
    min-height: 66%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 2.4vw, 14px);
    padding: 6.6%;
    border-radius: clamp(13px, 2.8vw, 18px);
    box-shadow: 0 30px 58px rgba(32, 73, 142, 0.15);
}

.blog-assistant-tool {
    min-height: clamp(58px, 15.4vw, 89px);
    border-radius: 9px;
    background: #f6f8fb;
    color: #1458d9;
}

.blog-assistant-tool::before,
.blog-assistant-tool::after {
    transform-origin: center;
}

.blog-assistant-tool:nth-child(5) {
    background: #eef3ff;
}

.blog-assistant-tool::before,
.blog-assistant-tool::after {
    content: "";
    position: absolute;
}

.blog-assistant-tool--mic::before {
    left: 50%;
    top: 25px;
    width: 9px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 9px;
    transform: translateX(-50%);
}

.blog-assistant-tool--mic::after {
    left: 50%;
    top: 47px;
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: #dfe7f2;
    transform: translateX(-50%);
}

.blog-assistant-tool--search::before {
    left: 41%;
    top: 31%;
    width: 15px;
    height: 15px;
    border: 3px solid currentColor;
    border-radius: 50%;
}

.blog-assistant-tool--search::after {
    left: 56%;
    top: 49%;
    width: 11px;
    height: 3px;
    background: currentColor;
    transform: rotate(45deg);
}

.blog-assistant-tool--layers::before {
    left: 40%;
    top: 29%;
    width: 20px;
    height: 20px;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 29%, 50% 58%, 0 29%);
    box-shadow: 0 8px 0 rgba(20, 88, 217, 0.55), 0 16px 0 rgba(20, 88, 217, 0.28);
}

.blog-assistant-tool--tree::before {
    left: 36%;
    top: 31%;
    width: 28px;
    height: 22px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
}

.blog-assistant-tool--tree::after {
    left: 44%;
    top: 31%;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-shadow: 17px 15px 0 -1px #f6f8fb, 17px 15px 0 1px currentColor;
}

.blog-assistant-tool--dots::before {
    left: 50%;
    top: 44%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: -17px 0 0 currentColor, 17px 0 0 currentColor;
    transform: translateX(-50%);
}

.blog-assistant-tool--loop::before {
    left: 38%;
    top: 33%;
    width: 25px;
    height: 25px;
    border: 3px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
}

.blog-assistant-bottom-card {
    left: 50%;
    bottom: 4.2%;
    width: 33.2%;
    height: 13.5%;
    display: grid;
    grid-template-columns: clamp(28px, 6.4vw, 37px) 1fr;
    align-items: center;
    gap: 8.6%;
    padding: 0 3.3%;
    border-radius: clamp(8px, 1.6vw, 10px);
    transform: translateX(-50%);
    z-index: 4;
}

.blog-assistant-wand {
    width: clamp(26px, 5.8vw, 33px);
    height: clamp(26px, 5.8vw, 33px);
    border-radius: 50%;
    background: #1458d9;
}

.blog-assistant-wand::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 15px;
    width: 15px;
    height: 3px;
    border-radius: 999px;
    background: #ffffff;
    transform: rotate(-45deg);
}

.blog-assistant-wand::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 7px;
    width: 6px;
    height: 6px;
    background: #ffffff;
    clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
}

.blog-assistant-bottom-card span:last-child {
    display: grid;
    gap: 8px;
}

.blog-assistant-bottom-card span:last-child i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #e5ecf7;
}

.blog-assistant-bottom-card span:last-child i:last-child {
    width: 70%;
}

@media (max-width: 991px) {

    .blog-idea-visual,
    .blog-article-visual,
    .blog-assistant-visual {
        min-height: 0;
    }
}

@media (max-width: 600px) {

    .blog-idea-visual,
    .blog-article-visual,
    .blog-assistant-visual {
        min-height: 0;
    }

    .blog-idea-canvas,
    .blog-article-canvas,
    .blog-assistant-canvas {
        min-height: 335px;
    }
}

/* =========================================
   AI Blog Additional Feature Visuals
   ========================================= */

.blog-seo-section,
.blog-outline-section,
.blog-section-generation-section {
    overflow: hidden;
}

.blog-seo-visual,
.blog-outline-visual,
.blog-section-generation-visual {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-seo-canvas,
.blog-outline-canvas,
.blog-section-generation-canvas {
    position: relative;
    width: 100%;
    min-height: 490px;
    border-radius: 28px;
    overflow: visible;
}

.blog-seo-canvas {
    background: #c7e9ef;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.blog-seo-search-card {
    position: absolute;
    left: 18%;
    top: 32px;
    width: 64%;
    height: 56px;
    display: grid;
    grid-template-columns: 25px 1fr 28px;
    align-items: center;
    gap: 14px;
    padding: 0 21px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 30px rgba(42, 111, 127, 0.12);
    z-index: 3;
}

.blog-seo-search-card i {
    width: 48%;
    height: 7px;
    border-radius: 999px;
    background: #e2e9f0;
}

.blog-seo-search-icon,
.blog-seo-target-icon,
.blog-seo-icon,
.blog-outline-doc-icon,
.blog-outline-gear-icon,
.blog-outline-node,
.blog-outline-flag-icon,
.blog-outline-send-icon,
.blog-section-app-icon,
.blog-section-tool {
    position: relative;
    display: block;
    color: var(--section-accent, #4493A9);
}

.blog-seo-search-icon::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.blog-seo-search-icon::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 16px;
    width: 9px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
}

.blog-seo-target-icon {
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.blog-seo-target-icon::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.blog-seo-target-icon::after {
    content: "";
    position: absolute;
    left: 9px;
    top: -5px;
    width: 2px;
    height: 9px;
    background: currentColor;
    border-radius: 999px;
}

.blog-seo-main-card {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 50px;
    min-height: 224px;
    padding: 35px 34px 29px;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 48px rgba(42, 111, 127, 0.19);
    z-index: 2;
}

.blog-seo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 34px;
}

.blog-seo-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 15px;
}

.blog-seo-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #e9fbff;
}

.blog-seo-item span:last-child {
    display: grid;
    gap: 9px;
}

.blog-seo-item i {
    display: block;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: #edf2f6;
}

.blog-seo-item i:last-child {
    width: 62%;
}

.blog-seo-icon--tag::before,
.blog-seo-icon--doc::before,
.blog-seo-icon--list::before,
.blog-seo-icon--folder::before,
.blog-seo-icon--folder::after {
    content: "";
    position: absolute;
}

.blog-seo-icon--tag::before {
    left: 9px;
    top: 10px;
    width: 15px;
    height: 13px;
    border: 2px solid currentColor;
    border-radius: 3px;
    transform: rotate(3deg);
}

.blog-seo-icon--doc::before {
    left: 11px;
    top: 7px;
    width: 13px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-shadow: inset 0 6px 0 rgba(68, 147, 169, 0.08);
}

.blog-seo-icon--list::before {
    left: 10px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 8px 0 currentColor, 0 16px 0 currentColor, 9px 0 0 currentColor, 9px 8px 0 currentColor, 9px 16px 0 currentColor;
}

.blog-seo-icon--folder::before {
    left: 8px;
    top: 12px;
    width: 19px;
    height: 13px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.blog-seo-icon--folder::after {
    left: 10px;
    top: 9px;
    width: 10px;
    height: 6px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

.blog-seo-dividers {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 19px;
    margin-top: 38px;
}

.blog-seo-dividers span {
    height: 4px;
    border-radius: 999px;
    background: #ccf7f7;
}

.blog-outline-canvas {
    background: #b8dbe2;

}

.blog-outline-sparkle {
    position: absolute;
    right: -17px;
    top: -4px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-outline-sparkle::before,
.blog-outline-sparkle::after {
    content: "";
    position: absolute;
    background: #8dc7d4;
    clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
}

.blog-outline-sparkle::before {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
}

.blog-outline-sparkle::after {
    left: 28px;
    top: 60%;
    transform: translateY(-60%);
    width: 7px;
    height: 7px;
}

.blog-outline-top-card,
.blog-outline-main-card,
.blog-outline-bottom-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 21px 42px rgba(51, 99, 111, 0.14);
    z-index: 2;
}

.blog-outline-top-card {
    left: 7%;
    right: 7%;
    top: 40px;
    height: 73px;
    display: grid;
    grid-template-columns: 49px 1fr 35px;
    align-items: center;
    gap: 15px;
    padding: 0 29px;
    border-radius: 13px;
}

.blog-outline-top-card i {
    width: 22%;
    height: 7px;
    border-radius: 999px;
    background: var(--section-accent, #4493A9);
    box-shadow: 0 17px 0 #dbe8ee;
}

.blog-outline-doc-icon,
.blog-outline-gear-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #dff3f7;
}

.blog-outline-doc-icon::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 9px;
    width: 14px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.blog-outline-gear-icon {
    border-radius: 50%;
    background: #edf5f8;
}

.blog-outline-gear-icon::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.blog-outline-main-card {
    left: 7%;
    right: 7%;
    top: 136px;
    height: 226px;
    border-radius: 12px;
}

.blog-outline-node {
    position: absolute;
    width: 39px;
    height: 39px;
    border: 2px solid var(--section-accent, #4493A9);
    border-radius: 10px;
    background: #ffffff;
}

.blog-outline-node--top {
    left: 50%;
    top: 35px;
    width: 49px;
    height: 49px;
    border: 0;
    background: var(--section-accent, #4493A9);
    transform: translateX(-50%);
}

.blog-outline-node--top::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    clip-path: polygon(50% 0, 100% 30%, 50% 60%, 0 30%);
}

.blog-outline-node--left {
    left: 26%;
    top: 111px;
}

.blog-outline-node--right {
    right: 26%;
    top: 111px;
}

.blog-outline-node--bottom {
    left: 50%;
    bottom: 26px;
    width: 31px;
    height: 31px;
    border-color: #e2e9f1;
    transform: translateX(-50%);
}

.blog-outline-node--bottom::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #88a4c0;
    box-shadow: 0 7px 0 #88a4c0, 0 14px 0 #88a4c0;
}

.blog-outline-node--left::before,
.blog-outline-node--right::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.blog-outline-line {
    position: absolute;
    height: 2px;
    background: #9bcbd5;
    transform-origin: left center;
}

.blog-outline-line--left {
    left: 36%;
    top: 104px;
    width: 34px;
    transform: rotate(-90deg);
}

.blog-outline-line--right {
    right: 36%;
    top: 104px;
    width: 34px;
    transform: rotate(-90deg);
}

.blog-outline-center-dot {
    position: absolute;
    left: 50%;
    top: 122px;
    width: 28px;
    height: 16px;
    border-radius: 50%;
    background: #cdd7ff;
    transform: translateX(-50%);
}

.blog-outline-center-dot::before,
.blog-outline-center-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 28px;
    background: #dfe9ef;
    transform: translateX(-50%);
}

.blog-outline-center-dot::before {
    top: -36px;
}

.blog-outline-center-dot::after {
    top: 32px;
}

.blog-outline-bottom-card {
    left: 7%;
    bottom: 34px;
    width: 35%;
    height: 58px;
    display: grid;
    grid-template-columns: 32px 1fr 30px;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border-radius: 10px;
}

.blog-outline-bottom-card i {
    height: 6px;
    border-radius: 999px;
    background: #dbe8ee;
}

.blog-outline-flag-icon,
.blog-outline-send-icon {
    width: 22px;
    height: 22px;
}

.blog-outline-flag-icon::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 3px;
    height: 16px;
    background: currentColor;
}

.blog-outline-flag-icon::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 10px;
    height: 8px;
    border: 2px solid currentColor;
    border-left: 0;
}

.blog-outline-send-icon::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 13px;
    height: 13px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.blog-section-generation-canvas {
    background: #ffefd7;
    overflow: hidden;
}

.blog-section-panel {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 50px;
    min-height: 306px;
    padding: 19px 23px 23px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 26px 48px rgba(126, 87, 35, 0.12);
    z-index: 2;
}

.blog-section-browser {
    height: 61px;
    display: grid;
    grid-template-columns: 31px 13px 13px 13px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    padding: 0 19px;
    border-radius: 10px;
    background: #fffaf2;
}

.blog-section-browser span:not(.blog-section-app-icon) {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9a6a2b;
    opacity: 0.8;
}

.blog-section-browser i {
    justify-self: end;
    width: 72px;
    height: 6px;
    border-radius: 999px;
    background: #dfe8ef;
}

.blog-section-app-icon,
.blog-section-tool {
    color: #8a5a1e;
}

.blog-section-app-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #fff0d9;
}

.blog-section-app-icon::before,
.blog-section-tool::before,
.blog-section-tool::after {
    content: "";
    position: absolute;
}

.blog-section-app-icon::before {
    left: 9px;
    top: 7px;
    width: 10px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.blog-section-row {
    height: 49px;
    display: grid;
    grid-template-columns: 25px 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 0 15px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(126, 87, 35, 0.05);
}

.blog-section-row i {
    height: 7px;
    border-radius: 999px;
    background: #dfe7ef;
    box-shadow: 0 12px 0 #edf2f6;
}

.blog-section-row:nth-child(3) i {
    width: 74%;
}

.blog-section-row:nth-child(4) i {
    width: 42%;
}

.blog-section-row:nth-child(5) i {
    width: 61%;
}

.blog-section-tool {
    width: 22px;
    height: 22px;
}

.blog-section-tool--doc::before {
    left: 5px;
    top: 3px;
    width: 12px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.blog-section-tool--pencil::before {
    left: 5px;
    top: 10px;
    width: 15px;
    height: 3px;
    background: currentColor;
    transform: rotate(-45deg);
}

.blog-section-tool--check {
    border: 2px solid currentColor;
    border-radius: 50%;
}

.blog-section-tool--check::after {
    left: 6px;
    top: 4px;
    width: 6px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.blog-section-tool--megaphone::before {
    left: 3px;
    top: 8px;
    width: 14px;
    height: 8px;
    border: 2px solid currentColor;
    clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
}

.blog-section-tool--megaphone::after {
    left: 5px;
    top: 16px;
    width: 7px;
    height: 4px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.blog-section-toggle {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 107px;
    height: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
    z-index: 4;
}

.blog-section-toggle span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #8a5a1e;
}

.blog-section-toggle i {
    justify-self: end;
    width: 16px;
    height: 8px;
    border: 2px solid #9fb0c2;
    border-radius: 999px;
}

@media (max-width: 991px) {

    .blog-seo-visual,
    .blog-outline-visual,
    .blog-section-generation-visual {
        min-height: 430px;
    }
}

@media (max-width: 600px) {

    .blog-seo-visual,
    .blog-outline-visual,
    .blog-section-generation-visual {
        min-height: 335px;
    }


}

/* =========================================
   AI Blog Cover and Review Visuals
   ========================================= */

.blog-cover-section,
.blog-review-section {
    overflow: hidden;
}

.blog-cover-visual,
.blog-review-visual {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-cover-canvas,
.blog-review-canvas {
    position: relative;
    width: 100%;
    min-height: 430px;
    border-radius: 28px;
    overflow: visible;
}

.blog-cover-canvas {
    background: #c9e2ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.blog-cover-top-card {
    position: absolute;
    left: 8%;
    top: 35px;
    width: 40%;
    min-width: 210px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 19px 38px rgba(28, 86, 160, 0.13);
    z-index: 4;
}

.blog-cover-palette,
.blog-cover-check,
.blog-cover-rocket,
.blog-cover-option,
.blog-review-eye,
.blog-review-pencil,
.blog-review-tool,
.blog-review-slider-icon,
.blog-review-check {
    position: relative;
    display: block;
    color: var(--section-accent, #1458d9);
}

.blog-cover-palette {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #e7f0ff;
}

.blog-cover-palette::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.blog-cover-palette::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: -5px 3px 0 currentColor;
}

.blog-cover-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #d9e3ef;
}

.blog-cover-dot--active {
    background: #1458d9;
}

.blog-cover-check {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.blog-cover-check::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    width: 8px;
    height: 12px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
}

.blog-cover-main-card {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 105px;
    min-height: 246px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 30px 31px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 29px 56px rgba(28, 86, 160, 0.18);
    z-index: 2;
}

.blog-cover-option {
    min-height: 90px;
    border-radius: 10px;
    background: #f3f5f7;
    overflow: hidden;
}

.blog-cover-option--megaphone {
    background: #1458d9;
    color: #ffffff;
}

.blog-cover-option--sparkle::before,
.blog-cover-option--target::before,
.blog-cover-option--target::after,
.blog-cover-option--doc::before,
.blog-cover-option--megaphone::before,
.blog-cover-option--megaphone::after {
    content: "";
    position: absolute;
}

.blog-cover-option--sparkle::before {
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    background: currentColor;
    clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
    transform: translate(-50%, -50%);
    box-shadow: 19px -15px 0 -9px currentColor;
}

.blog-cover-option--wave {
    background:
        repeating-radial-gradient(ellipse at 75% 35%, rgba(255, 255, 255, 0.34) 0 4px, transparent 5px 12px),
        linear-gradient(135deg, #8f9499 0%, #4e5357 100%);
}

.blog-cover-option--target::before {
    left: 50%;
    top: 50%;
    width: 27px;
    height: 27px;
    border: 3px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.blog-cover-option--target::after {
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    border: 3px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.blog-cover-option--doc::before {
    left: 50%;
    top: 50%;
    width: 22px;
    height: 30px;
    border: 3px solid #405166;
    border-radius: 3px;
    transform: translate(-50%, -50%);
}

.blog-cover-option--megaphone::before {
    left: 32px;
    top: 39px;
    width: 34px;
    height: 20px;
    border: 3px solid #ffffff;
    clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
}

.blog-cover-option--megaphone::after {
    left: 37px;
    top: 60px;
    width: 14px;
    height: 8px;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
}

.blog-cover-option--thumb {
    background:
        radial-gradient(circle at 76% 19%, rgba(60, 64, 70, 0.18) 0 4px, transparent 5px),
        linear-gradient(147deg, transparent 0 37%, rgba(111, 116, 122, 0.24) 38% 42%, transparent 43%),
        repeating-linear-gradient(-22deg, #d9d9d9 0 6px, #efefef 7px 13px);
}

.blog-cover-rocket-badge {
    position: absolute;
    right: 8%;
    bottom: 26px;
    width: 115px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 28px rgba(28, 86, 160, 0.17);
    z-index: 4;
}

.blog-cover-rocket {
    width: 20px;
    height: 20px;
}

.blog-cover-rocket::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 2px;
    width: 10px;
    height: 17px;
    border: 2px solid currentColor;
    border-radius: 9px 9px 5px 5px;
    transform: rotate(45deg);
}

.blog-cover-rocket-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1458d9;
}

.blog-review-canvas {
    background: #e1e5ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.blog-review-topbar {
    position: absolute;
    left: 20%;
    top: 37px;
    width: 54%;
    height: 58px;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    justify-items: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 34px rgba(88, 86, 190, 0.14);
    z-index: 3;
}

.blog-review-topbar i {
    width: 1px;
    height: 32px;
    background: #e2e6f4;
}

.blog-review-eye,
.blog-review-pencil {
    width: 28px;
    height: 28px;
}

.blog-review-eye::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 8px;
    width: 22px;
    height: 12px;
    border: 3px solid currentColor;
    border-radius: 50%;
}

.blog-review-eye::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.blog-review-pencil::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 13px;
    width: 19px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-45deg);
}

.blog-review-main-card {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 116px;
    min-height: 242px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 19px 24px;
    padding: 28px 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 27px 52px rgba(88, 86, 190, 0.14);
    z-index: 2;
}

.blog-review-tool {
    min-height: 84px;
    border-radius: 10px;
    background: #f6f8fc;
}

.blog-review-tool::before,
.blog-review-tool::after {
    content: "";
    position: absolute;
}

.blog-review-tool--align::before {
    left: 50%;
    top: 31px;
    width: 23px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
    transform: translateX(-50%);
}

.blog-review-tool--text::before {
    left: 50%;
    top: 27px;
    width: 30px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 8px 0 currentColor, 0 16px 0 currentColor;
    transform: translateX(-50%);
}

.blog-review-tool--search::before {
    left: 38px;
    top: 27px;
    width: 20px;
    height: 20px;
    border: 3px solid currentColor;
    border-radius: 50%;
}

.blog-review-tool--search::after {
    left: 56px;
    top: 47px;
    width: 12px;
    height: 3px;
    background: currentColor;
    transform: rotate(45deg);
}

.blog-review-tool--tag::before {
    left: 50%;
    top: 31px;
    width: 24px;
    height: 19px;
    border: 3px solid currentColor;
    border-radius: 4px;
    transform: translateX(-50%);
}

.blog-review-tool--image::before,
.blog-review-tool--photo::before {
    left: 50%;
    top: 28px;
    width: 25px;
    height: 22px;
    border: 3px solid currentColor;
    border-radius: 3px;
    transform: translateX(-50%);
}

.blog-review-tool--image::after,
.blog-review-tool--photo::after {
    left: 50%;
    top: 43px;
    width: 18px;
    height: 10px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translateX(-50%) rotate(-45deg);
}

.blog-review-bottom-card {
    position: absolute;
    left: 50%;
    bottom: 29px;
    width: 208px;
    height: 70px;
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 43px;
    padding: 0 22px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 17px 32px rgba(88, 86, 190, 0.15);
    transform: translateX(-50%);
    z-index: 4;
}

.blog-review-slider-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #f0f3ff;
}

.blog-review-slider-icon::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    width: 18px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
}

.blog-review-check {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: #6662f4;
}

.blog-review-check::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 12px;
    width: 10px;
    height: 17px;
    border-right: 2.5px solid #ffffff;
    border-bottom: 2.5px solid #ffffff;
    transform: rotate(45deg);
}

@media (max-width: 991px) {

    .blog-cover-visual,
    .blog-review-visual {
        min-height: 430px;
    }
}

@media (max-width: 600px) {

    .blog-cover-visual,
    .blog-review-visual {
        min-height: 335px;
    }


    .blog-cover-main-card {
        gap: 10px;
        padding: 22px;
    }

    .blog-review-main-card {
        gap: 12px;
        padding: 22px;
    }
}

.sales-hero-floating-layer {
    z-index: 7;
}

.sales-hero-mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sales-hero-reviews-card {
    gap: 25px;
    padding: 23px 22px 20px;
}

.sales-hero-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #1458d9;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.sales-hero-avatar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
}

.sales-hero-avatar-row span {
    display: block;
    width: 29px;
    height: 29px;
    margin-left: -8px;
    border: 2px solid #1458d9;
    border-radius: 50%;
    background: #e9f8ff;
}

.sales-hero-pricing-card {
    gap: 17px;
    min-height: 115px;
    padding: 23px 27px 24px;
}

.sales-hero-dollar {
    color: #1458d9;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.sales-hero-price-line {
    width: 68px;
    height: 9px;
    border-radius: 999px;
    background: #cfe3f4;
}

.sales-hero-dashboard-card {
    display: flex;
    flex-direction: column;
}

.sales-hero-dashboard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.sales-hero-abstract-icon {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 2px;
}

.sales-hero-abstract-icon span {
    display: block;
    width: 20px;
    height: 35px;
    border-radius: 5px;
    transform: skewX(-5deg);
}

.sales-hero-abstract-icon span:first-child {
    background: #0757c8;
}

.sales-hero-abstract-icon span:last-child {
    background: #6f5df6;
}

.sales-hero-status-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 68px;
    height: 14px;
    padding: 0 7px;
    border: 1px solid #e8eef7;
    border-radius: 999px;
    background: #ffffff;
}

.sales-hero-status-pill span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #00b980;
}

.sales-hero-status-pill i {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #dce3ee;
}

.sales-hero-navy-line {
    width: 100%;
    height: 25px;
    margin: 31px 0 22px;
    border-radius: 5px;
    background: #101b35;
    box-shadow: inset 36px 0 0 rgba(255, 255, 255, 0.03);
}

.sales-hero-dashboard-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sales-hero-indicator-box {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #edf1f7;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.86);
}

.sales-hero-indicator-box i {
    width: 29px;
    height: 4px;
    border-radius: 999px;
    background: #d5deeb;
}

.sales-hero-lock-icon,
.sales-hero-check-icon {
    position: relative;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    color: #1458d9;
}

.sales-hero-lock-icon::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 8px;
    height: 6px;
    border: 1.8px solid currentColor;
    border-radius: 2px;
}

.sales-hero-lock-icon::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: 1px;
    width: 5px;
    height: 7px;
    border: 1.8px solid currentColor;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

.sales-hero-check-icon {
    border: 1.8px solid currentColor;
    border-radius: 50%;
}

.sales-hero-check-icon::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 2px;
    width: 4px;
    height: 7px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg);
}

.ai-hero-floating,
.ai-hero-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(232, 239, 248, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: none;
}

.ai-hero-floating {
    z-index: 5;
    border-radius: 14px;
    box-shadow: 0 24px 46px rgba(23, 35, 61, 0.14);
}

.ai-hero-floating--ready {
    left: -32px;
    top: 136px;
    width: 245px;
    min-height: 146px;
    padding: 25px 24px 22px;
    transform: rotate(-12deg);
}

.ai-hero-ready-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.ai-hero-ready-card__header strong {
    color: #10131d;
    
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

.ai-hero-ready-icon {
    position: relative;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #bff4cb;
}

.ai-hero-ready-icon::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px solid #187a34;
    border-radius: 50%;
}

.ai-hero-ready-icon::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 11px;
    width: 7px;
    height: 11px;
    border-right: 2px solid #187a34;
    border-bottom: 2px solid #187a34;
    transform: rotate(45deg);
}

.ai-hero-ready-card__body {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ai-hero-ready-ring {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.94) 0 58%, transparent 59%),
        conic-gradient(#7ee694 0 100%, #e6edf3 0);
}

.ai-hero-ready-ring span {
    color: #4fd66e;
    
    font-size: 1.2rem;
    font-weight: 800;
}

.ai-hero-ready-list {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    color: #10131d;
    
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.05;
    list-style: none;
}

.ai-hero-floating--settings {
    right: -30px;
    top: 85px;
    width: 244px;
    min-height: 221px;
    padding: 27px 27px 24px;
    transform: rotate(13deg);
}

.ai-hero-settings__sparkle {
    position: absolute;
    right: 21px;
    top: 24px;
    width: 20px;
    height: 20px;
}

.ai-hero-settings__sparkle::before,
.ai-hero-settings__sparkle::after {
    content: "";
    position: absolute;
    background: #075fff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.ai-hero-settings__sparkle::before {
    right: 1px;
    top: 0;
    width: 12px;
    height: 12px;
}

.ai-hero-settings__sparkle::after {
    left: 0;
    bottom: 1px;
    width: 8px;
    height: 8px;
}

.ai-hero-settings__top {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}

.ai-hero-settings__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8bb0ff;
}

.ai-hero-settings__dot--primary {
    width: 9px;
    height: 9px;
    background: #075fff;
}

.ai-hero-settings__control {
    display: grid;
    grid-template-columns: 26px 1fr 26px;
    align-items: center;
    margin-bottom: 18px;
}

.ai-hero-settings__control-line {
    height: 2px;
    background: #b9cdf8;
}

.ai-hero-settings__control-dot {
    width: 22px;
    height: 22px;
    border: 2px solid #b9cdf8;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
}

.ai-hero-settings__control-dot--active {
    border: 0;
    background: #075fff;
    box-shadow: inset 0 0 0 7px #075fff, inset 0 0 0 10px rgba(255, 255, 255, 0.95);
}

.ai-hero-settings__panel {
    display: grid;
    grid-template-columns: 1fr 38px;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 12px 13px;
    border-radius: 9px;
    background: rgba(246, 249, 254, 0.82);
}

.ai-hero-settings__panel-lines {
    display: grid;
    gap: 10px;
}

.ai-hero-settings__panel-lines span {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(225, 232, 243, 0.85);
}

.ai-hero-settings__panel-lines span:last-child {
    width: 78%;
}

.ai-hero-settings__toggles {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.ai-hero-settings__toggle {
    position: relative;
    width: 31px;
    height: 15px;
    border-radius: 999px;
    background: #cbd3dd;
}

.ai-hero-settings__toggle::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
}

.ai-hero-settings__toggle--active {
    background: #075fff;
}

.ai-hero-settings__toggle--active::after {
    left: 20px;
}

.ai-hero-settings__bars {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
}

.ai-hero-settings__bar {
    height: 6px;
    border-radius: 999px;
    background: #c8d8f6;
}

.ai-hero-settings__bar--long {
    width: 84px;
    background: #075fff;
}

.ai-hero-settings__bar--mid {
    width: 54px;
    background: #075fff;
}

.ai-hero-settings__bar--short {
    width: 76px;
}

.ai-hero-card--editor {
    right: -8.5%;
    top: 15.5%;
    z-index: 4;
    width: clamp(210px, 33%, 292px);
    min-height: clamp(138px, 22vw, 190px);
    padding: clamp(16px, 2.2vw, 24px);
    border-radius: 19px;
    box-shadow: 0 26px 48px rgba(33, 48, 71, 0.16);
    transform: rotate(16deg);
    transform-origin: 52% 52%;
}

.ai-hero-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(16px, 2vw, 24px);
}

.ai-hero-editor__header>span {
    width: 43%;
    height: 5px;
    border-radius: 999px;
    background: #34435a;
}

.ai-hero-editor__header div {
    display: flex;
    gap: 7px;
}

.ai-hero-editor__header i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #dfe7f0;
}

.ai-hero-editor__item {
    height: clamp(29px, 4.3vw, 43px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 clamp(9px, 1.3vw, 14px);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #eef2f6;
}

.ai-hero-editor__item+.ai-hero-editor__item {
    margin-top: 11px;
}

.ai-hero-editor__item--active {
    background: #f8fffb;
    border-color: #cfeee2;
}

.ai-hero-editor__check,
.ai-hero-editor__radio {
    flex: 0 0 clamp(14px, 2vw, 20px);
    width: clamp(14px, 2vw, 20px);
    height: clamp(14px, 2vw, 20px);
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.ai-hero-editor__check {
    background: #075fff;
}

.ai-hero-editor__check svg {
    width: 63%;
    height: 63%;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-hero-editor__radio {
    border: 2px solid #e0e9f2;
    background: #ffffff;
}

.ai-hero-editor__line {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: #e4edf4;
}

.ai-hero-editor__line--short {
    max-width: 66%;
}

.ai-hero-editor__slider {
    position: relative;
    flex: 0 0 17%;
    height: 3px;
    border-radius: 999px;
    background: #dce5ef;
}

.ai-hero-editor__slider i {
    position: absolute;
    right: 7px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7c99bb;
    transform: translateY(-50%);
}

.ai-hero-editor__note {
    margin-top: clamp(15px, 2.4vw, 25px);
    padding: clamp(12px, 1.6vw, 17px);
    border-radius: 10px;
    background: rgba(246, 249, 252, 0.88);
}

.ai-hero-editor__note span {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #edf2f6;
}

.ai-hero-editor__note span+span {
    width: 76%;
    margin-top: 10px;
}

.ai-hero-shield {
    position: absolute;
    right: -13px;
    bottom: -18px;
    width: clamp(30px, 4.8vw, 42px);
    height: clamp(30px, 4.8vw, 42px);
    display: grid;
    place-items: center;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #075fff;
    box-shadow: 0 12px 22px rgba(7, 95, 255, 0.26);
}

.ai-hero-shield svg {
    width: 56%;
    height: 56%;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-hero-card--checklist {
    left: -8.8%;
    bottom: 11.5%;
    z-index: 3;
    width: clamp(160px, 28.5%, 246px);
    min-height: clamp(88px, 14vw, 128px);
    padding: clamp(18px, 2.4vw, 27px) clamp(19px, 2.7vw, 30px);
    border-radius: 12px;
    box-shadow: 0 28px 48px rgba(28, 43, 68, 0.18);
    transform: rotate(7deg);
    transform-origin: 45% 60%;
}

.ai-hero-checklist__bar {
    display: block;
    width: 77%;
    height: clamp(6px, 0.9vw, 9px);
    margin-bottom: clamp(14px, 2vw, 22px);
    border-radius: 999px;
    background: #075fff;
}

.ai-hero-checklist__row {
    display: flex;
    align-items: center;
    gap: clamp(9px, 1.3vw, 13px);
}

.ai-hero-checklist__row+.ai-hero-checklist__row {
    margin-top: clamp(11px, 1.8vw, 17px);
}

.ai-hero-checklist__row>span:last-child {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: #dfe9f4;
}

.ai-hero-checkmark {
    flex: 0 0 clamp(13px, 1.8vw, 18px);
    width: clamp(13px, 1.8vw, 18px);
    height: clamp(13px, 1.8vw, 18px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #075fff;
}

.ai-hero-checkmark svg {
    width: 66%;
    height: 66%;
    fill: none;
    stroke: #075fff;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 991px) {
    .ai-hero-section {
        padding: 82px 0 64px;
    }

    .ai-hero-content {
        margin-inline: auto;
        text-align: center;
    }

    .ai-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .ai-hero-actions {
        justify-content: center;
    }

    .ai-hero-visual-wrap {
        width: min(100%, 720px);
        min-height: 360px;
    }

    .ai-hero-card--editor {
        right: 5%;
        top: 18%;
        transform: rotate(-8deg) scale(0.9);
    }

    .ai-hero-card--checklist {
        left: 0%;
        bottom: 15%;
        transform: rotate(6deg) scale(0.9);
    }
}

@media (max-width: 767px) {
    .ai-hero-title {
        line-height: 1;
    }

    .ai-hero-actions {
        flex-wrap: wrap;
    }

    .ai-hero-visual-wrap {
        min-height: 340px;
    }

    .ai-hero-device {
        width: 92vw;
        margin-inline: auto;
    }

    .ai-hero-floating--ready {
        top: 34px;
        left: 10px;
        width: 180px;
        min-height: 122px;
        padding: 13px;
    }

    .ai-hero-ready-ring span {
        font-size: 0.875rem;
    }


    .ai-hero-floating--settings {
        top: 40px;
        right: 10px;
        width: 158px;
        min-height: 138px;
        padding: 14px;
    }

    .ai-hero-card--editor {
        right: 5%;
        top: 16%;
        transform: rotate(-7deg) scale(0.78);
        transform-origin: right top;
    }

    .ai-hero-card--checklist {
        left: 0%;
        bottom: 17%;
        transform: rotate(6deg) scale(0.78);
        transform-origin: left bottom;
    }

    .ai-hero-ready-ring {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 480px) {
    .ai-hero-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ai-hero-desc {
        font-size: 0.82rem;
    }

    .ai-hero-btn-solid,
    .ai-hero-btn-outline {
        min-width: 132px;
        min-height: 42px;
    }

    .ai-hero-floating--settings {
        display: none;
    }

    .ai-hero-card--editor {
        right: -13%;
        top: 12%;
        transform: rotate(-7deg) scale(0.62);
    }

    .ai-hero-card--checklist {
        left: -13%;
        bottom: 20%;
        transform: rotate(6deg) scale(0.64);
    }
}

/* =========================================
   AI Sales Offer Section Visual
   ========================================= */

.sales-offer-section {
    overflow: hidden;
}

.sales-offer-visual {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-offer-canvas {
    position: relative;
    width: 100%;
    height: 430px;
    border-radius: 28px;
    background: #eef2ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.sales-offer-topbar,
.sales-offer-testimonial,
.sales-offer-window {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(231, 237, 248, 0.92);
}

.sales-offer-topbar {
    left: 30px;
    right: 45px;
    top: 43px;
    height: 68px;
    display: grid;
    grid-template-columns: 56px 1fr 126px;
    align-items: center;
    padding: 0 19px;
    border-radius: 11px;
    box-shadow: 0 16px 29px rgba(54, 69, 113, 0.11);
    z-index: 2;
}

.sales-offer-topbar__circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef3fb;
}

.sales-offer-scale-icon {
    justify-self: center;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
}

.sales-offer-scale-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #b6c3d4;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-offer-rating-list {
    display: grid;
    gap: 7px;
}

.sales-offer-rating-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: center;
    gap: 8px;
}

.sales-offer-rating-list i {
    height: 5px;
    border-radius: 999px;
    background: #dfe7f1;
}

.sales-offer-star,
.sales-offer-stars span {
    display: block;
    width: 9px;
    height: 9px;
    background: #f4bd2f;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.sales-offer-testimonial {
    left: 45px;
    top: 162px;
    width: 465px;
    height: 111px;
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: 30px 1fr;
    column-gap: 15px;
    padding: 25px 24px 21px;
    border-radius: 13px;
    box-shadow: 0 24px 44px rgba(45, 61, 98, 0.14);
    transform: rotate(-1.8deg);
    z-index: 4;
}

.sales-offer-avatars {
    display: flex;
    align-items: center;
}

.sales-offer-avatars span {
    width: 22px;
    height: 22px;
    margin-left: -4px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #d9e8ff;
}

.sales-offer-avatars span:first-child {
    margin-left: 0;
    background: #dcecff;
}

.sales-offer-avatars span:nth-child(2) {
    background: #cbdcf4;
}

.sales-offer-avatars span:nth-child(3) {
    background: #e8edf5;
}

.sales-offer-stars {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: center;
}

.sales-offer-stars span {
    width: 10px;
    height: 10px;
    background: #3778ff;
}

.sales-offer-testimonial-lines {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    align-content: center;
    gap: 14px;
}

.sales-offer-testimonial-lines span {
    height: 7px;
    border-radius: 999px;
    background: #e6edf5;
}

.sales-offer-testimonial-lines span:first-child {
    width: 177px;
}

.sales-offer-testimonial-lines span:last-child {
    width: 142px;
}

.sales-offer-window {
    left: 60px;
    bottom: 31px;
    width: 428px;
    height: 198px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    overflow: visible;
    border-radius: 10px;
    box-shadow: 0 24px 48px rgba(45, 61, 98, 0.12);
    z-index: 3;
}

.sales-offer-video {
    position: relative;
    min-height: 100%;
    background: #f7faff;
    border-radius: 10px 0 0 10px;
}

.sales-offer-play {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #3778ff;
    box-shadow: 0 11px 22px rgba(55, 120, 255, 0.25);
    transform: translate(-50%, -50%);
}

.sales-offer-play svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
}

.sales-offer-video-line {
    position: absolute;
    left: 28px;
    bottom: 19px;
    width: 154px;
    height: 5px;
    border-radius: 999px;
    background: #eef3fa;
}

.sales-offer-copy {
    position: relative;
    padding: 55px 25px 26px;
    background: #ffffff;
    border-radius: 0 10px 10px 0;
}

.sales-offer-copy-line {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: #dfe7f1;
}

.sales-offer-copy-line--wide {
    width: 155px;
    margin-bottom: 13px;
}

.sales-offer-copy-line--short {
    width: 71px;
    margin-bottom: 20px;
}

.sales-offer-copy-line--long {
    width: 168px;
}

.sales-offer-copy-button {
    position: absolute;
    right: 22px;
    bottom: 20px;
    width: 128px;
    height: 35px;
    border-radius: 999px;
    background: #3778ff;
    box-shadow: 0 12px 24px rgba(55, 120, 255, 0.22);
}

.sales-offer-copy-button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 45px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    transform: translate(-50%, -50%);
}

.sales-offer-edit-badge,
.sales-offer-check-badge {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    z-index: 5;
}

.sales-offer-edit-badge {
    right: 55px;
    bottom: -12px;
    width: 34px;
    height: 34px;
    background: #edf2fa;
    border: 1px solid #d5e0ed;
    box-shadow: 0 10px 20px rgba(45, 61, 98, 0.14);
}

.sales-offer-edit-badge svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #8fa0b7;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-offer-check-badge {
    right: 5px;
    bottom: -17px;
    width: 40px;
    height: 40px;
    background: #20c783;
    border: 4px solid #ffffff;
    box-shadow: 0 12px 22px rgba(32, 199, 131, 0.24);
}

.sales-offer-check-badge svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 991px) {
    .sales-offer-content {
        max-width: 620px;
        margin-inline: auto;

    }
}

@media (max-width: 600px) {
    .sales-offer-visual {
        min-height: 330px;
    }

    .sales-offer-canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(0.72);
        transform-origin: top center;
    }
}

/* =========================================
   AI Sales Conversion Section Visual
   ========================================= */

.sales-conversion-section {
    overflow: hidden;
}

.sales-conversion-visual {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-conversion-canvas {
    position: relative;
    width: 100%;
    height: 440px;
    border-radius: 28px;
    background: #fff0d8;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.sales-conversion-top-panel,
.sales-conversion-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(250, 230, 207, 0.88);
}

.sales-conversion-top-panel {
    left: 45px;
    right: 45px;
    top: 35px;
    height: 80px;
    display: grid;
    grid-template-columns: 48px 1fr 12px;
    align-items: center;
    gap: 17px;
    padding: 0 18px;
    border-radius: 11px;
    box-shadow: 0 16px 31px rgba(129, 82, 28, 0.08);
    z-index: 2;
}

.sales-conversion-bulb {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #fff4ec;
}

.sales-conversion-bulb svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ef6a34;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-conversion-top-lines {
    display: grid;
    gap: 10px;
}

.sales-conversion-top-lines span {
    height: 5px;
    border-radius: 999px;
    background: #dfe7ef;
}

.sales-conversion-top-lines span:first-child {
    background: #f5c6aa;
}

.sales-conversion-arrows {
    display: grid;
    gap: 9px;
}

.sales-conversion-arrows span {
    width: 6px;
    height: 6px;
    border-right: 2px solid #d6e0eb;
    border-top: 2px solid #d6e0eb;
    transform: rotate(45deg);
}

.sales-conversion-arrows span:first-child {
    border-color: #ef6a34;
}

.sales-conversion-card {
    left: 31px;
    top: 132px;
    width: 395px;
    height: 196px;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 24px;
    padding: 32px 31px;
    border-radius: 10px;
    box-shadow: 0 26px 52px rgba(84, 64, 43, 0.14);
    z-index: 4;
}

.sales-conversion-icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 33px);
    grid-template-rows: repeat(2, 33px);
    gap: 18px;
    align-content: center;
}

.sales-conversion-icon {
    position: relative;
    display: block;
    border-radius: 50%;
}

.sales-conversion-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

.sales-conversion-icon--blue {
    background: #d7e9ff;
}

.sales-conversion-icon--blue::after {
    background: #8ebfff;
}

.sales-conversion-icon--green {
    background: #cef8ef;
}

.sales-conversion-icon--green::after {
    background: #76dcc9;
}

.sales-conversion-icon--orange {
    background: #ffe1c4;
}

.sales-conversion-icon--orange::after {
    background: #ffb569;
}

.sales-conversion-icon--purple {
    background: #ead8ff;
}

.sales-conversion-icon--purple::after {
    background: #ca95ff;
}

.sales-conversion-proof-list {
    display: grid;
    align-content: center;
    gap: 25px;
    border-left: 1px solid #edf0f4;
    padding-left: 28px;
}

.sales-conversion-proof-row {
    display: grid;
    grid-template-columns: 33px 1fr;
    gap: 18px;
    align-items: center;
}

.sales-conversion-avatar {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: #dce7f3;
}

.sales-conversion-stars {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.sales-conversion-stars span {
    width: 7px;
    height: 7px;
    background: #f4bd2f;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.sales-conversion-proof-line {
    display: block;
    width: 105px;
    height: 5px;
    border-radius: 999px;
    background: #edf2f6;
}

.sales-conversion-proof-line--short {
    width: 82px;
}

.sales-conversion-graph {
    position: absolute;
    right: 0;
    bottom: 38px;
    width: 374px;
    height: 170px;
    z-index: 1;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px;
}

.sales-conversion-graph path {
    fill: none;
    stroke: #dccfc0;
    stroke-width: 4;
    stroke-linecap: round;
}

.sales-conversion-check {
    position: absolute;
    right: -15px;
    top: 261px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: #25c878;
    box-shadow: 0 11px 22px rgba(37, 200, 120, 0.2);
    z-index: 5;
}

.sales-conversion-check svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-conversion-button {
    position: absolute;
    right: 0;
    bottom: 7px;
    width: 116px;
    height: 39px;
    border-radius: 4px 0 20px 4px;
    background: #8a5a1e;
    z-index: 3;
}

@media (max-width: 991px) {
    .sales-conversion-content {
        max-width: 620px;
        margin-inline: auto;

    }
}

@media (max-width: 600px) {
    .sales-conversion-visual {
        min-height: 330px;
    }

    .sales-conversion-canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(0.72);
        transform-origin: top center;
    }
}

/* =========================================
   AI Sales Structure Section Visual
   ========================================= */

.sales-structure-section {
    overflow: hidden;
}

.sales-structure-visual {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-structure-canvas {
    position: relative;
    width: 100%;
    height: 505px;
    border-radius: 26px;
    background: #b8dce4;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.sales-structure-top-card,
.sales-structure-list-card,
.sales-structure-window {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.sales-structure-top-card {
    left: 50%;

    top: 29px;
    width: 300px;
    height: 72px;
    display: grid;
    grid-template-columns: 1fr 42px 37px;
    align-items: center;
    gap: 14px;
    padding: 0 17px;
    border-radius: 9px;
    transform: rotate(-2.4deg) translateX(-50%);
    z-index: 2;
}

.sales-structure-top-lines {
    display: grid;
    gap: 11px;
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
}

.sales-structure-top-lines span {
    height: 7px;
    border-radius: 999px;
    background: #e5edf4;
}

.sales-structure-top-lines span:first-child {
    width: 94px;
}

.sales-structure-top-lines span:last-child {
    width: 62px;
}

.sales-structure-scale,
.sales-structure-shield {
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.sales-structure-scale {
    width: 31px;
    height: 31px;
    background: #eef5fb;
}

.sales-structure-scale svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #5b97ae;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-structure-shield {
    width: 31px;
    height: 31px;
    background: #dffbea;
}

.sales-structure-shield svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #2ecf76;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-structure-list-card {
    left: 50%;
    transform: translateX(-50%);
    top: 117px;
    width: 400px;
    height: 111px;
    display: grid;
    grid-template-columns: 1fr 125px;
    gap: 20px;
    padding: 22px 22px;
    border-radius: 8px;
    z-index: 3;
}

.sales-structure-items {
    display: grid;
    gap: 12px;
    align-content: center;
}

.sales-structure-items div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: center;
    gap: 9px;
}

.sales-structure-items i {
    height: 6px;
    border-radius: 999px;
    background: #E2E8F0;
}

.sales-structure-star {
    width: 9px;
    height: 9px;
    background: #4f91ae;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.sales-structure-profile {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    padding: 12px;
    border-radius: 8px;
}

.sales-structure-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #dce7f1;
}

.sales-structure-profile div span {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #e7eef5;
}

.sales-structure-profile div span:first-child {
    width: 54px;
    margin-bottom: 10px;
}

.sales-structure-profile div span:last-child {
    width: 43px;
}

.sales-structure-window {
    left: 50%;
    bottom: 68px;
    transform: translateX(-50%);
    width: 400px;
    display: grid;
    grid-template-columns: 1fr 154px;
    gap: 17px;
    padding: 25px 24px;
    border-radius: 8px;
    z-index: 4;
}

.sales-structure-copy {
    position: relative;
    padding-top: 3px;
}

.sales-structure-copy span {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: #e6edf4;
}

.sales-structure-copy span:nth-child(1) {
    width: 148px;
    margin-bottom: 12px;
}

.sales-structure-copy span:nth-child(2) {
    width: 147px;
    margin-bottom: 12px;
}

.sales-structure-copy span:nth-child(3) {
    width: 132px;
    margin-bottom: 12px;
}

.sales-structure-copy span:nth-child(4) {
    width: 128px;
}

.sales-structure-copy i {
    position: absolute;
    right: 8px;
    bottom: 2px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #0f172a;
    border-bottom: 1.5px solid #0f172a;
    transform: rotate(45deg);
}

.sales-structure-video {
    position: relative;
    height: 88px;
    border-radius: 4px;
    background: #111827;
    box-shadow: 0 10px 18px rgba(17, 24, 39, 0.12);
}

.sales-structure-video span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.54);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.sales-structure-video svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

.sales-structure-accent {
    margin-left: auto;
    width: 154px;
    height: 36px;
    border-radius: 5px;
    background: #419caf;
}

@media (max-width: 991px) {
    .sales-structure-content {
        max-width: 620px;
        margin-inline: auto;

    }
}

@media (max-width: 600px) {
    .sales-structure-visual {
        min-height: 365px;
    }

    .sales-structure-canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(0.72);
        transform-origin: top center;
    }
}

/* =========================================
   AI Sales Problem/Solution Section Visual
   ========================================= */

.sales-solution-section {
    overflow: hidden;
}

.sales-solution-visual {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-solution-canvas {
    position: relative;
    width: 100%;
    height: 410px;
    border-radius: 28px;
    background: #d7eaff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.sales-solution-alert-card,
.sales-solution-window,
.sales-solution-target-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 237, 250, 0.92);
}

.sales-solution-alert-card {
    left: 33px;
    top: 39px;
    width: 184px;
    height: 91px;
    display: grid;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 4px;
    box-shadow: 0 16px 28px rgba(35, 80, 135, 0.1);
    transform: rotate(-3deg);
    z-index: 4;
}

.sales-solution-alert-card div {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    gap: 10px;
}

.sales-solution-alert-card i {
    height: 5px;
    border-radius: 999px;
    background: #d9e4ef;
}

.sales-solution-warning {
    position: relative;
    width: 13px;
    height: 12px;
    display: block;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #1d63e9;
}

.sales-solution-warning::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    width: 2px;
    height: 5px;
    background: #ffffff;
    border-radius: 999px;
    transform: translateX(-50%);
}

.sales-solution-window {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 392px;
    height: 230px;
    border-radius: 11px;
    box-shadow: 0 25px 49px rgba(35, 80, 135, 0.14);
    z-index: 3;
}

.sales-solution-window-dots {
    position: absolute;
    left: 24px;
    top: 24px;
    display: flex;
    gap: 8px;
}

.sales-solution-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d2ddeb;
}

.sales-solution-window-title {
    position: absolute;
    left: 93px;
    top: 24px;
    width: 81px;
    height: 12px;
    border-radius: 999px;
    background: #f1f4f8;
}

.sales-solution-workspace {
    position: absolute;
    left: 52px;
    right: 44px;
    top: 70px;
    height: 44px;
    display: grid;
    grid-template-columns: 42px 1fr 50px;
    align-items: center;
    gap: 21px;
}

.sales-solution-grid-icon {
    display: grid;
    grid-template-columns: repeat(3, 5px);
    gap: 4px;
    justify-content: center;
}

.sales-solution-grid-icon i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a8cff7;
}

.sales-solution-slider {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #dce6f0 0 5%, #386dff 5% 86%, #dce6f0 86% 100%);
}

.sales-solution-slider i {
    position: absolute;
    left: 84%;
    top: 50%;
    width: 13px;
    height: 13px;
    border: 3px solid #386dff;
    border-radius: 50%;
    background: #ffffff;
    transform: translate(-50%, -50%);
}

.sales-solution-magic {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1d63e9;
    box-shadow: 0 11px 22px rgba(29, 99, 233, 0.22);
}

.sales-solution-magic svg {
    width: 27px;
    height: 27px;
    fill: #ffffff;
}

.sales-solution-blocks {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sales-solution-blocks span {
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #aed3fb;
    box-shadow: 0 10px 18px rgba(35, 80, 135, 0.1);
}

.sales-solution-blocks i {
    width: 12px;
    height: 7px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
}

.sales-solution-target-card {
    right: 31px;
    bottom: 32px;
    width: 151px;
    height: 104px;
    border-radius: 9px;
    box-shadow: 0 18px 32px rgba(35, 80, 135, 0.14);
    z-index: 4;
}

.sales-solution-target-ring {
    position: absolute;
    border-radius: 50%;
}

.sales-solution-target-ring--outer {
    left: 48px;
    top: 28px;
    width: 55px;
    height: 55px;
    border: 2px dashed #386dff;
}

.sales-solution-target-ring--inner {
    left: 58px;
    top: 38px;
    width: 35px;
    height: 35px;
    border: 2px solid #a7c9ff;
}

.sales-solution-target-search {
    position: absolute;
    left: 72px;
    top: 31px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 2px solid #a7c9ff;
    border-radius: 50%;
    background: #ffffff;
}

.sales-solution-target-search svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #386dff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-solution-target-line {
    position: absolute;
    left: 76px;
    top: 64px;
    width: 38px;
    height: 2px;
    border-radius: 999px;
    background: #a7c9ff;
    transform: rotate(-34deg);
}

@media (max-width: 991px) {
    .sales-solution-content {
        max-width: 620px;
        margin-inline: auto;

    }
}

@media (max-width: 600px) {
    .sales-solution-visual {
        min-height: 330px;
    }

    .sales-solution-canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(0.72);
        transform-origin: top center;
    }
}

/* =========================================
   AI Sales Content Overview Section Visual
   ========================================= */

.sales-content-overview-section,
.sales-outcomes-section {
    overflow: hidden;
}

.sales-content-overview-visual,
.sales-outcomes-visual {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-content-overview-canvas {
    position: relative;
    width: 100%;
    height: 430px;
    border-radius: 28px;
    background: #e6efff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.sales-content-overview-top-panel,
.sales-content-overview-card,
.sales-content-overview-mini-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(226, 237, 250, 0.92);
}

.sales-content-overview-top-panel {
    left: 45px;
    right: 45px;
    top: 37px;
    height: 101px;
    display: grid;
    grid-template-columns: 22px 84px 50px 1fr;
    align-items: center;
    gap: 16px;
    padding: 0 25px;
    border-radius: 22px;
    box-shadow: 0 16px 30px rgba(45, 80, 135, 0.08);
    z-index: 2;
}

.sales-content-overview-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #1458d9;
}

.sales-content-overview-top-lines,
.sales-content-overview-top-copy {
    display: grid;
    gap: 13px;
}

.sales-content-overview-top-lines span,
.sales-content-overview-top-copy span {
    height: 5px;
    border-radius: 999px;
    background: #dce7f5;
}

.sales-content-overview-top-lines span:first-child {
    width: 48px;
    background: #1458d9;
}

.sales-content-overview-top-lines span:last-child {
    width: 31px;
}

.sales-content-overview-top-copy span:nth-child(1) {
    width: 158px;
}

.sales-content-overview-top-copy span:nth-child(2) {
    width: 133px;
}

.sales-content-overview-top-copy span:nth-child(3) {
    width: 117px;
}

.sales-content-overview-play-stack {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.sales-content-overview-play-stack span {
    position: relative;
    width: 15px;
    height: 15px;
    border: 2px solid #5c8cff;
    border-radius: 50%;
}

.sales-content-overview-play-stack span::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 0;
    height: 0;
    border-left: 4px solid #5c8cff;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.sales-content-overview-card {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 329px;
    height: 206px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px 17px;
    padding: 28px 25px;
    border-radius: 15px;
    box-shadow: 0 26px 50px rgba(45, 80, 135, 0.14);
    z-index: 1;
}

.sales-content-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 37px;
    padding: 0 14px;
    border-radius: 11px;
    background: #f8fbff;
    border: 1px solid #edf3fb;
}

.sales-content-item i {
    height: 5px;
    border-radius: 999px;
    background: #1458d9;
}

.sales-content-icon {
    position: relative;
    width: 18px;
    height: 18px;
    display: block;
}

.sales-content-icon::before,
.sales-content-icon::after {
    content: "";
    position: absolute;
}

.sales-content-icon--folder::before {
    left: 1px;
    top: 5px;
    width: 16px;
    height: 10px;
    border: 2px solid #1458d9;
    border-radius: 3px;
}

.sales-content-icon--folder::after {
    left: 2px;
    top: 3px;
    width: 7px;
    height: 4px;
    border-top: 2px solid #1458d9;
    border-left: 2px solid #1458d9;
    border-radius: 2px 0 0 0;
}

.sales-content-icon--chart::before {
    inset: 3px;
    border: 2px solid #1458d9;
    border-radius: 2px;
}

.sales-content-icon--chart::after {
    left: 5px;
    top: 9px;
    width: 8px;
    height: 2px;
    background: #1458d9;
    box-shadow: 0 -4px 0 #1458d9;
}

.sales-content-icon--globe::before {
    inset: 2px;
    border: 2px solid #1458d9;
    border-radius: 50%;
}

.sales-content-icon--globe::after {
    left: 8px;
    top: 3px;
    width: 2px;
    height: 12px;
    background: #1458d9;
    box-shadow: -5px 5px 0 -4px #1458d9, 5px 5px 0 -4px #1458d9;
}

.sales-content-icon--clock::before {
    inset: 2px;
    border: 2px solid #1458d9;
    border-radius: 50%;
}

.sales-content-icon--clock::after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 6px;
    border-left: 2px solid #1458d9;
    border-bottom: 2px solid #1458d9;
}

.sales-content-icon--bars::before {
    left: 3px;
    bottom: 3px;
    width: 3px;
    height: 8px;
    background: #1458d9;
    box-shadow: 5px -4px 0 #1458d9, 10px -1px 0 #1458d9;
}

.sales-content-icon--users::before {
    left: 2px;
    top: 4px;
    width: 6px;
    height: 6px;
    border: 2px solid #1458d9;
    border-radius: 50%;
    box-shadow: 8px 0 0 -1px #ffffff, 8px 0 0 1px #1458d9;
}

.sales-content-icon--users::after {
    left: 1px;
    bottom: 3px;
    width: 16px;
    height: 7px;
    border: 2px solid #1458d9;
    border-radius: 999px 999px 2px 2px;
}

.sales-content-overview-mini-card {
    left: 44px;
    bottom: 38px;
    width: 116px;
    height: 58px;
    display: grid;
    grid-template-columns: 34px 36px;
    align-items: center;
    gap: 16px;
    padding: 0 17px;
    border-radius: 9px;
    box-shadow: 0 16px 30px rgba(45, 80, 135, 0.13);
    z-index: 5;
}

.sales-content-mini-lines {
    display: grid;
    gap: 4px;
}

.sales-content-mini-lines span {
    height: 3px;
    border-radius: 999px;
    background: #1458d9;
}

.sales-content-mini-circle {
    width: 36px;
    height: 36px;
    border: 4px solid #1458d9;
    border-radius: 50%;
}

/* =========================================
   AI Sales Outcomes Section Visual
   ========================================= */

.sales-outcomes-canvas {
    position: relative;
    width: 100%;
    height: 440px;
    border-radius: 23px;
    background: #fee9ca;
    box-shadow: 0 26px 48px rgba(91, 67, 36, 0.15);
}

.sales-outcomes-ribbon {
    position: absolute;
    top: 46px;
    width: 40px;
    height: 40px;

}


.sales-outcomes-ribbon--solid {
    left: 48px;
    background: rgba(255, 255, 255, 0.8);
    color: #8a5a1e;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.sales-outcomes-ribbon--outline {
    left: 91px;
    color: #8a5a1e;
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}


.sales-outcomes-chart-card {
    position: absolute;
    right: 48px;
    top: 45px;
    width: 119px;
    height: 73px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 32px rgba(91, 67, 36, 0.08);
    z-index: 2;
}

.sales-outcomes-chart-card svg {
    width: 78px;
    height: 40px;
    fill: none;
    stroke: #8a5a1e;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-outcomes-chart-card circle {
    fill: #8a5a1e;
}

.sales-outcomes-achievement-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 35px 32px 28px;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 24px 45px rgba(91, 67, 36, 0.12);
    z-index: 3;
}

.sales-outcomes-trophy {
    position: absolute;
    left: 50%;
    top: 30px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f6dfbf;
    transform: translateX(-50%);
}

.sales-outcomes-trophy svg {
    width: 26px;
    height: 26px;
    fill: #8a5a1e;
    stroke: #8a5a1e;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-outcomes-bars {
    display: grid;
    gap: 15px;
    margin-top: 77px;
}

.sales-outcomes-bar {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: #edf6f2;
    overflow: hidden;
}

.sales-outcomes-bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: #8a5a1e;
}

.sales-outcomes-bar--long::before {
    width: 86%;
}

.sales-outcomes-bar--medium::before {
    width: 63%;
    background: #bd9360;
}

.sales-outcomes-bar--full::before {
    width: 93%;
}

.sales-outcomes-settings-card {
    position: absolute;
    left: 45px;
    bottom: 61px;
    width: 87px;
    height: 45px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 26px rgba(91, 67, 36, 0.08);
}

.sales-outcomes-settings-card svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #8a5a1e;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-outcomes-settings-card span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e3b98e;
}

.sales-outcomes-briefcase-card {
    position: absolute;
    right: 45px;
    bottom: 45px;
    width: 139px;
    height: 68px;
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px 12px;
    align-items: center;
    padding: 15px 17px;
    border-radius: 13px;
    background: #8a5a1e;
    box-shadow: 0 15px 30px rgba(91, 67, 36, 0.18);
    transform: rotate(4deg);
}

.sales-outcomes-briefcase-card span {
    grid-row: 1 / span 2;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.18);
}

.sales-outcomes-briefcase-card svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-outcomes-briefcase-card i {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
}

@media (max-width: 991px) {

    .sales-content-overview-content,
    .sales-outcomes-content {
        max-width: 620px;
        margin-inline: auto;

    }
}

@media (max-width: 600px) {

    .sales-content-overview-visual,
    .sales-outcomes-visual {
        min-height: 330px;
    }

    .sales-content-overview-canvas,
    .sales-outcomes-canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(0.72);
        transform-origin: top center;
    }
}

/* =========================================
   AI Sales Review Control Section Visual
   ========================================= */

.sales-review-control-section,
.sales-free-preview-section {
    overflow: hidden;
}

.sales-review-control-visual,
.sales-free-preview-visual {
    position: relative;
    min-height: 455px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-review-control-canvas {
    position: relative;
    width: 100%;
    height: 455px;
    border-radius: 24px;
    background: #fee9ca;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.sales-review-control-canvas::before,
.sales-review-control-canvas::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(129, 85, 27, 0.08);
}

.sales-review-control-canvas::before {
    left: 42px;
    top: 51px;
    width: 75px;
    height: 75px;
}

.sales-review-control-canvas::after {
    right: 66px;
    bottom: 47px;
    width: 138px;
    height: 138px;
}

.sales-review-top-panel,
.sales-review-main-card,
.sales-review-sliders-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(244, 224, 197, 0.9);
}

.sales-review-top-panel {
    left: 57px;
    right: 46px;
    top: 37px;
    height: 56px;
    display: grid;
    grid-template-columns: 31px 1fr 91px 22px;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    border-radius: 8px;
    box-shadow: 0 13px 25px rgba(91, 67, 36, 0.12);
    z-index: 3;
}

.sales-review-eye,
.sales-review-doc {
    display: grid;
    place-items: center;
}

.sales-review-eye svg,
.sales-review-doc svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #8a5a1e;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-review-top-line {
    height: 6px;
    border-radius: 999px;
    background: #e9edf1;
}

.sales-review-top-line--right {
    background: #eef1f4;
}

.sales-review-main-card {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 444px;
    height: 268px;
    padding: 33px 31px 27px;
    border-radius: 18px;
    box-shadow: 0 27px 52px rgba(91, 67, 36, 0.14);
    z-index: 4;
}

.sales-review-dots {
    position: absolute;
    left: 31px;
    top: 27px;
    display: flex;
    gap: 9px;
}

.sales-review-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2d3bf;
}

.sales-review-dots span:first-child {
    background: #8a5a1e;
}

.sales-review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 18px;
    margin-top: 34px;
}

.sales-review-tile {
    height: 85px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    border-radius: 8px;
    background: #f8fbff;
}

.sales-review-tile i {
    width: 32px;
    height: 4px;
    border-radius: 999px;
    background: #efd9b8;
}

.sales-review-icon {
    position: relative;
    width: 25px;
    height: 25px;
    display: block;
}

.sales-review-icon::before,
.sales-review-icon::after {
    content: "";
    position: absolute;
}

.sales-review-icon--shield::before {
    left: 5px;
    top: 2px;
    width: 15px;
    height: 19px;
    border: 2px solid #8a5a1e;
    border-radius: 8px 8px 10px 10px;
}

.sales-review-icon--sparkle::before,
.sales-review-icon--sparkle::after {
    background: #8a5a1e;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.sales-review-icon--sparkle::before {
    left: 4px;
    top: 4px;
    width: 12px;
    height: 12px;
}

.sales-review-icon--sparkle::after {
    right: 3px;
    bottom: 4px;
    width: 8px;
    height: 8px;
}

.sales-review-icon--cap::before {
    left: 2px;
    top: 7px;
    width: 21px;
    height: 11px;
    border: 2px solid #8a5a1e;
    transform: skewY(-22deg);
}

.sales-review-icon--cap::after {
    left: 7px;
    top: 14px;
    width: 12px;
    height: 8px;
    border-bottom: 2px solid #8a5a1e;
    border-left: 2px solid #8a5a1e;
    border-right: 2px solid #8a5a1e;
    border-radius: 0 0 6px 6px;
}

.sales-review-icon--quote::before {
    left: 4px;
    top: 7px;
    content: "”";
    color: #8a5a1e;
   
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.sales-review-icon--question::before {
    inset: 3px;
    border: 2px solid #8a5a1e;
    border-radius: 50%;
}

.sales-review-icon--question::after {
    left: 10px;
    top: 5px;
    content: "?";
    color: #8a5a1e;
    
    font-size: 15px;
    font-weight: 800;
}

.sales-review-tile--filled {
    background: #e6c694;
}

.sales-review-tile--filled span {
    width: 70px;
    height: 25px;
    border-radius: 7px;
    background: #bd9360;
}

.sales-review-sliders-card {
    left: 50px;
    bottom: 25px;
    width: 181px;
    height: 61px;
    display: grid;
    grid-template-columns: 37px 1fr;
    align-items: center;
    gap: 16px;
    padding: 0 19px;
    border-radius: 9px;
    box-shadow: 0 15px 30px rgba(91, 67, 36, 0.12);
    z-index: 5;
}

.sales-review-slider-icon {
    position: relative;
    width: 22px;
    height: 22px;
}

.sales-review-slider-icon::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 17px;
    height: 2px;
    background: #8a5a1e;
    box-shadow: 0 6px 0 #8a5a1e, 0 12px 0 #8a5a1e;
}

.sales-review-slider-icon::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8a5a1e;
    box-shadow: 7px 6px 0 #8a5a1e, -2px 12px 0 #8a5a1e;
}

.sales-review-sliders-card div span {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #f1dcc0;
}

.sales-review-sliders-card div span:first-child {
    width: 88px;
    margin-bottom: 11px;
}

.sales-review-sliders-card div span:last-child {
    width: 61px;
}

.sales-review-check-badge {
    position: absolute;
    right: 38px;
    bottom: 35px;
    width: 59px;
    height: 59px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #8a5a1e;
    box-shadow: 0 16px 30px rgba(91, 67, 36, 0.2);
    z-index: 6;
}

.sales-review-check-badge svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================
   AI Sales Free Preview Section Visual
   ========================================= */

.sales-free-preview-canvas {
    position: relative;
    width: 100%;
    height: 430px;
    border-radius: 28px;
    background: #e1e9ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.sales-free-progress-card,
.sales-free-grid-card,
.sales-free-badge-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 233, 255, 0.92);
}

.sales-free-progress-card {
    left: 32px;
    right: 32px;
    top: 35px;
    height: 61px;
    display: grid;
    grid-template-columns: 24px 1fr 87px;
    align-items: center;
    gap: 16px;
    padding: 0 17px;
    border-radius: 8px;
    z-index: 2;
}

.sales-free-globe {
    position: relative;
    width: 17px;
    height: 17px;
    border: 2px solid #6763f6;
    border-radius: 50%;
}

.sales-free-globe::before,
.sales-free-globe::after {
    content: "";
    position: absolute;
    background: #6763f6;
}

.sales-free-globe::before {
    left: 50%;
    top: 2px;
    width: 2px;
    height: 9px;
    transform: translateX(-50%);
}

.sales-free-globe::after {
    left: 2px;
    top: 7px;
    width: 9px;
    height: 2px;
}

.sales-free-progress-track {
    position: relative;
    height: 5px;
    border-radius: 999px;
    background: #6763f6;
}



.sales-free-check-pill {
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #6763f6;
}

.sales-free-check-pill svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-free-grid-card {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 392px;
    height: 215px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 14px;
    padding: 25px 25px;
    border-radius: 13px;
    box-shadow: 0 24px 46px rgba(69, 79, 142, 0.14);
    z-index: 3;
}

.sales-free-tile {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #ECEEF0;
}

.sales-free-tile--dashed {
    background: #ECEEF0;
    border: 1.5px dashed #6366F1;
}

.sales-free-tile--dashed span {
    width: 35px;
    height: 5px;
    border-radius: 999px;
    background: #6763f6;
}

.sales-free-icon {
    position: relative;
    width: 27px;
    height: 27px;
    display: block;
}

.sales-free-icon::before,
.sales-free-icon::after {
    content: "";
    position: absolute;
}

.sales-free-icon--play::before {
    inset: 4px;
    border: 3px solid #6763f6;
    border-radius: 50%;
}

.sales-free-icon--play::after {
    left: 12px;
    top: 9px;
    width: 0;
    height: 0;
    border-left: 7px solid #6763f6;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.sales-free-icon--folder::before {
    left: 4px;
    top: 9px;
    width: 18px;
    height: 12px;
    border: 3px solid #6763f6;
    border-radius: 3px;
}

.sales-free-icon--folder::after {
    left: 5px;
    top: 7px;
    width: 8px;
    height: 4px;
    border-top: 3px solid #6763f6;
    border-left: 3px solid #6763f6;
}

.sales-free-icon--doc::before {
    left: 7px;
    top: 4px;
    width: 14px;
    height: 18px;
    border: 3px solid #6763f6;
    border-radius: 2px;
}

.sales-free-icon--doc::after {
    left: 10px;
    top: 9px;
    width: 8px;
    height: 3px;
    background: #6763f6;
    box-shadow: 0 5px 0 #6763f6;
}

.sales-free-icon--link::before {
    left: 3px;
    top: 10px;
    width: 12px;
    height: 8px;
    border: 3px solid #6763f6;
    border-radius: 999px;
}

.sales-free-icon--link::after {
    right: 3px;
    top: 10px;
    width: 12px;
    height: 8px;
    border: 3px solid #6763f6;
    border-radius: 999px;
}

.sales-free-badge-card {
    left: 32px;
    bottom: 27px;
    width: 147px;
    height: 59px;
    display: grid;
    grid-template-columns: 34px 1fr 21px;
    align-items: center;
    gap: 13px;
    padding: 0 15px;
    border-radius: 8px;
    box-shadow: 0 15px 28px rgba(69, 79, 142, 0.13);
    z-index: 4;
}

.sales-free-badge-square {
    width: 31px;
    height: 31px;
    border-radius: 5px;
    background: #6763f6;
}

.sales-free-badge-line {
    height: 7px;
    border-radius: 999px;
    background: #6763f6;
}

.sales-free-badge-check {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #6763f6;
}

.sales-free-badge-check svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 600px) {

    .sales-review-control-visual,
    .sales-free-preview-visual {
        min-height: 330px;
    }

    .sales-review-control-canvas,
    .sales-free-preview-canvas {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%) scale(0.72);
        transform-origin: top center;
    }
}


.ai-hub-hero {
    position: relative;
    min-height: 100vh;
    padding: 86px 0 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.ai-hub-hero__content {
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.ai-hub-hero h1 span {
    color: #075fff;
}

.ai-hub-visual {
    position: relative;
    width: min(100%, 860px);
    height: 390px;
    margin: 42px auto 0;
}


.ai-hub-laptop {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: visible;
}


.ai-hub-laptop img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 32px rgba(31, 41, 55, 0.1));
}

.ai-course-hero-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(232, 239, 248, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: none;
}

.ai-course-hero-card--editor {
    right: -8.5%;
    top: 23.5%;
    z-index: 4;
    width: clamp(210px, 33%, 292px);
    min-height: clamp(138px, 22vw, 190px);
    padding: clamp(16px, 2.2vw, 24px);
    border-radius: 19px;
    box-shadow: 0 26px 48px rgba(33, 48, 71, 0.16);
    transform: rotate(16deg);
    transform-origin: 52% 52%;
}

.ai-course-hero-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(16px, 2vw, 24px);
}

.ai-course-hero-editor__header>span {
    width: 43%;
    height: 5px;
    border-radius: 999px;
    background: #34435a;
}

.ai-course-hero-editor__header div {
    display: flex;
    gap: 7px;
}

.ai-course-hero-editor__header i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #dfe7f0;
}

.ai-course-hero-editor__item {
    height: clamp(29px, 4.3vw, 43px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 clamp(9px, 1.3vw, 14px);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #eef2f6;
}

.ai-course-hero-editor__item+.ai-course-hero-editor__item {
    margin-top: 11px;
}

.ai-course-hero-editor__item--active {
    background: #f8fffb;
    border-color: #cfeee2;
}

.ai-course-hero-editor__check,
.ai-course-hero-editor__radio {
    flex: 0 0 clamp(14px, 2vw, 20px);
    width: clamp(14px, 2vw, 20px);
    height: clamp(14px, 2vw, 20px);
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.ai-course-hero-editor__check {
    background: #075fff;
}

.ai-course-hero-editor__check svg {
    width: 63%;
    height: 63%;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-course-hero-editor__radio {
    border: 2px solid #e0e9f2;
    background: #ffffff;
}

.ai-course-hero-editor__line {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: #e4edf4;
}

.ai-course-hero-editor__line--short {
    max-width: 66%;
}

.ai-course-hero-editor__slider {
    position: relative;
    flex: 0 0 17%;
    height: 3px;
    border-radius: 999px;
    background: #dce5ef;
}

.ai-course-hero-editor__slider i {
    position: absolute;
    right: 7px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7c99bb;
    transform: translateY(-50%);
}

.ai-course-hero-editor__note {
    margin-top: clamp(15px, 2.4vw, 25px);
    padding: clamp(12px, 1.6vw, 17px);
    border-radius: 10px;
    background: rgba(246, 249, 252, 0.88);
}

.ai-course-hero-editor__note span {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #edf2f6;
}

.ai-course-hero-editor__note span+span {
    width: 76%;
    margin-top: 10px;
}

.ai-course-hero-shield {
    position: absolute;
    right: -13px;
    bottom: -18px;
    width: clamp(30px, 4.8vw, 42px);
    height: clamp(30px, 4.8vw, 42px);
    display: grid;
    place-items: center;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #075fff;
    box-shadow: 0 12px 22px rgba(7, 95, 255, 0.26);
}

.ai-course-hero-shield svg {
    width: 56%;
    height: 56%;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-course-hero-card--checklist {
    left: -8.8%;
    bottom: 20.5%;
    z-index: 3;
    width: clamp(160px, 28.5%, 246px);
    min-height: clamp(88px, 14vw, 128px);
    padding: clamp(18px, 2.4vw, 27px) clamp(19px, 2.7vw, 30px);
    border-radius: 12px;
    box-shadow: 0 28px 48px rgba(28, 43, 68, 0.18);
    transform: rotate(-11deg);
    transform-origin: 45% 60%;
}

.ai-course-hero-checklist__bar {
    display: block;
    width: 77%;
    height: clamp(6px, 0.9vw, 9px);
    margin-bottom: clamp(14px, 2vw, 22px);
    border-radius: 999px;
    background: #075fff;
}

.ai-course-hero-checklist__row {
    display: flex;
    align-items: center;
    gap: clamp(9px, 1.3vw, 13px);
}

.ai-course-hero-checklist__row+.ai-course-hero-checklist__row {
    margin-top: clamp(11px, 1.8vw, 17px);
}

.ai-course-hero-checklist__row>span:last-child {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: #dfe9f4;
}

.ai-course-hero-checkmark {
    flex: 0 0 clamp(13px, 1.8vw, 18px);
    width: clamp(13px, 1.8vw, 18px);
    height: clamp(13px, 1.8vw, 18px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #075fff;
}

.ai-course-hero-checkmark svg {
    width: 66%;
    height: 66%;
    fill: none;
    stroke: #075fff;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-hub-floating {
    position: absolute;
    z-index: 5;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #d9e5fb;
    border-radius: 8px;
    box-shadow: 0 18px 34px rgba(31, 45, 76, 0.12);
}

.ai-hub-floating--ready {
    left: -32px;
    top: 136px;
    width: 245px;
    min-height: 146px;
    padding: 25px 24px 22px;
    transform: rotate(-12deg);
}

.ai-hub-floating__topline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #566071;
    font-size: 0.58rem;
    font-weight: 700;
}

.ai-hub-ready-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dff9e9;
    position: relative;
}

.ai-hub-ready-icon::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border-right: 2px solid #35c36b;
    border-bottom: 2px solid #35c36b;
    transform: rotate(45deg);
}

.ai-hub-floating--ready strong {
    display: block;
    color: #101827;
    
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
}

.ai-hub-ready-ring {
    width: 62px;
    height: 62px;
    margin-top: 13px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #ffffff 0 54%, transparent 55%),
        conic-gradient(#5add87 0 100%, #edf2f7 0);
}

.ai-hub-ready-ring span {
    color: #35b966;
    
    font-size: 0.72rem;
    font-weight: 800;
}

.ai-hub-floating--ready small {
    position: absolute;
    left: 94px;
    bottom: 31px;
    color: #35b966;
    
    font-size: 0.76rem;
    font-weight: 800;
}

.ai-hub-floating--settings {
    right: -30px;
    top: 85px;
    width: 244px;
    min-height: 221px;
    padding: 27px 27px 24px;
    transform: rotate(13deg);

}

.ai-hub-settings__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-hub-settings__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eaf2ff 0%, #075fff 100%);
    box-shadow: inset 0 0 0 5px #f6f9ff;
}

.ai-hub-settings__header strong {
    display: block;
    color: #111827;
    
    font-size: 0.7rem;
    font-weight: 800;
}

.ai-hub-settings__header small {
    display: block;
    color: #7b8494;
    font-size: 0.52rem;
    font-weight: 600;
}

.ai-hub-settings__switches {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 22px 0 18px;
}

.ai-hub-settings__switches span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #075fff;
    box-shadow: 0 0 0 5px #eef4ff;
}

.ai-hub-settings__slider {
    height: 7px;
    border-radius: 999px;
    background: #e7edf8;
    position: relative;
    margin: 0 4px 22px;
}

.ai-hub-settings__slider span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 72%;
    border-radius: inherit;
    background: #075fff;
}

.ai-hub-settings__slider::after {
    content: "";
    position: absolute;
    left: 68%;
    top: 50%;
    width: 19px;
    height: 19px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #075fff;
    box-shadow: 0 5px 12px rgba(7, 95, 255, 0.22);
    transform: translateY(-50%);
}

.ai-hub-settings__lines {
    display: grid;
    gap: 9px;
}

.ai-hub-settings__lines span {
    height: 6px;
    border-radius: 999px;
    background: #e9eef8;
}

.ai-hub-settings__lines span:last-child {
    width: 72%;
}

.ai-hub-floating {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(123, 155, 255, 0.55);
    border-radius: 14px;
    box-shadow: 0 24px 46px rgba(23, 35, 61, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ai-hub-floating--ready {
    left: -32px;
    top: 136px;
    width: 245px;
    min-height: 146px;
    padding: 25px 24px 22px;
    transform: rotate(-12deg);
}

.ai-hub-ready-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.ai-hub-ready-card__header strong {
    color: #10131d;
    
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

.ai-hub-ready-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    background: #bff4cb;
}

.ai-hub-ready-icon::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px solid #187a34;
    border-radius: 50%;
}

.ai-hub-ready-icon::after {
    left: 15px;
    top: 11px;
    width: 7px;
    height: 11px;
    border-right-color: #187a34;
    border-bottom-color: #187a34;
}

.ai-hub-ready-card__body {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ai-hub-ready-ring {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
    margin: 0;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.94) 0 58%, transparent 59%),
        conic-gradient(#7ee694 0 100%, #e6edf3 0);
}

.ai-hub-ready-ring span {
    color: #4fd66e;
    font-size: 1.2rem;
}

.ai-hub-ready-list {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    color: #10131d;
    
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.05;
    list-style: none;
}

.ai-hub-floating--settings {
    right: -30px;
    top: 85px;
    width: 244px;
    min-height: 221px;
    padding: 27px 27px 24px;
    transform: rotate(13deg);
}

.ai-hub-settings__sparkle {
    position: absolute;
    right: 21px;
    top: 24px;
    width: 20px;
    height: 20px;
}

.ai-hub-settings__sparkle::before,
.ai-hub-settings__sparkle::after {
    content: "";
    position: absolute;
    background: #075fff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.ai-hub-settings__sparkle::before {
    right: 1px;
    top: 0;
    width: 12px;
    height: 12px;
}

.ai-hub-settings__sparkle::after {
    left: 0;
    bottom: 1px;
    width: 8px;
    height: 8px;
}

.ai-hub-settings__top {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}

.ai-hub-settings__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8bb0ff;
}

.ai-hub-settings__dot--primary {
    width: 9px;
    height: 9px;
    background: #075fff;
}

.ai-hub-settings__control {
    display: grid;
    grid-template-columns: 26px 1fr 26px;
    align-items: center;
    margin-bottom: 18px;
}

.ai-hub-settings__control-line {
    height: 2px;
    background: #b9cdf8;
}

.ai-hub-settings__control-dot {
    width: 22px;
    height: 22px;
    border: 2px solid #b9cdf8;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
}

.ai-hub-settings__control-dot--active {
    border: 0;
    background: #075fff;
    box-shadow: inset 0 0 0 7px #075fff, inset 0 0 0 10px rgba(255, 255, 255, 0.95);
}

.ai-hub-settings__panel {
    display: grid;
    grid-template-columns: 1fr 38px;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 12px 13px;
    border-radius: 9px;
    background: rgba(246, 249, 254, 0.82);
}

.ai-hub-settings__panel-lines {
    display: grid;
    gap: 10px;
}

.ai-hub-settings__panel-lines span {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(225, 232, 243, 0.85);
}

.ai-hub-settings__panel-lines span:last-child {
    width: 78%;
}

.ai-hub-settings__toggles {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.ai-hub-settings__toggle {
    position: relative;
    width: 31px;
    height: 15px;
    border-radius: 999px;
    background: #cbd3dd;
}

.ai-hub-settings__toggle::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
}

.ai-hub-settings__toggle--active {
    background: #075fff;
}

.ai-hub-settings__toggle--active::after {
    left: 20px;
}

.ai-hub-settings__bars {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
}

.ai-hub-settings__bar {
    height: 6px;
    border-radius: 999px;
    background: #c8d8f6;
}

.ai-hub-settings__bar--long {
    width: 84px;
    background: #075fff;
}

.ai-hub-settings__bar--mid {
    width: 54px;
    background: #075fff;
}

.ai-hub-settings__bar--short {
    width: 76px;
}

@media (max-width: 860px) {



    .ai-hub-visual {
        width: min(100%, 720px);
        height: 360px;
    }

    .ai-course-hero-card--editor {
        right: -3%;
        top: 18%;
        transform: rotate(-8deg) scale(0.9);
    }

    .ai-course-hero-card--checklist {
        left: -2%;
        bottom: 15%;
        transform: rotate(6deg) scale(0.9);
    }

    .ai-hub-floating--ready {
        left: 10px;
        top: 128px;
    }

    .ai-hub-floating--settings {
        right: 10px;
        top: 118px;
    }
}

@media (max-width: 767px) {
    .ai-hub-hero h1 {
        line-height: 1;
    }

    .ai-hub-hero__actions {
        flex-wrap: wrap;
    }

    .ai-hub-visual {
        height: 340px;
        margin-top: 28px;
    }

    .ai-hub-laptop {
        width: 92vw;
        top: auto;
    }

    .ai-course-hero-card--editor {
        right: -4%;
        top: 16%;
        transform: rotate(-7deg) scale(0.78);
        transform-origin: right top;
    }

    .ai-course-hero-card--checklist {
        left: -3%;
        bottom: 17%;
        transform: rotate(6deg) scale(0.78);
        transform-origin: left bottom;
    }

    .ai-hub-floating--ready {
        top: 34px;
        left: 10px;
        width: 150px;
        min-height: 122px;
        padding: 13px;
    }

    .ai-hub-floating--settings {
        top: 40px;
        right: 10px;
        width: 158px;
        min-height: 138px;
        padding: 14px;
    }

    .ai-hub-ready-ring {
        width: 48px;
        height: 48px;
    }

    .ai-hub-floating--ready small {
        left: 74px;
        bottom: 24px;
    }
}

@media (max-width: 480px) {
    .ai-hub-hero {
        padding-left: 12px;
        padding-right: 12px;
    }

    .ai-hub-hero__text {
        font-size: 0.82rem;
    }

    .ai-hub-btn {
        min-width: 132px;
        min-height: 42px;
    }

    .ai-hub-floating--settings {
        display: none;
    }

    .ai-course-hero-card--editor {
        right: -13%;
        top: 12%;
        transform: rotate(-7deg) scale(0.62);
    }

    .ai-course-hero-card--checklist {
        left: -13%;
        bottom: 20%;
        transform: rotate(6deg) scale(0.64);
    }

    .ai-hub-floating--ready {
        transform: rotate(-6deg) scale(0.86);
        transform-origin: left top;
    }
}

/* AI Hub Feature Grid */
.ai-hub-features-grid {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 28px 24px 118px;
    display: grid;
    gap: 34px;
}

.ai-hub-feature-block {
    --feature-card-bg: #f1f7ff;
    --feature-accent: #075fff;
    --feature-soft: #dceaff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    align-items: center;
    gap: clamp(30px, 5vw, 74px);
    min-height: 420px;
    padding: clamp(26px, 4vw, 52px);
    border-radius: 8px;
    background: var(--feature-card-bg);
}

.ai-hub-feature-block--peach {
    --feature-card-bg: #fff3eb;
    --feature-accent: #c95b32;
    --feature-soft: #ffe1d2;
}

.ai-hub-feature-block--white {
    --feature-card-bg: #ffffff;
    --feature-accent: #6b55ff;
    --feature-soft: #eeeafd;
    border: 1px solid #edf1f7;
}

.ai-hub-feature-block--reverse .ai-hub-feature-block__visual {
    order: 2;
}

.ai-hub-feature-block--reverse .ai-hub-feature-block__content {
    order: 1;
}

.ai-hub-feature-block__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 306px;
}

.ai-hub-feature-block__content {
    max-width: 430px;
}

.ai-hub-feature-block__eyebrow {
    margin: 0 0 12px;
    color: var(--feature-accent);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ai-hub-feature-block h3 {
    margin: 0;
    color: #171e31;
    
    font-size: clamp(1.65rem, 2.4vw, 2.28rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: 0;
}

.ai-hub-feature-block__content>p:not(.ai-hub-feature-block__eyebrow) {
    margin: 18px 0 0;
    color: #5f6878;
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.66;
}

.ai-hub-feature-block__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}

.ai-hub-feature-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 999px;
    
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ai-hub-feature-action:hover {
    transform: translateY(-2px);
}

.ai-hub-feature-action--primary {
    min-width: 132px;
    padding: 0 22px;
    color: #ffffff;
    background: var(--feature-accent);
    box-shadow: 0 14px 24px rgba(7, 95, 255, 0.18);
}

.ai-hub-feature-action--primary:hover {
    color: #ffffff;
}

.ai-hub-feature-action--secondary {
    min-width: auto;
    color: var(--feature-accent);
}

.ai-hub-feature-action--secondary:hover {
    color: #171e31;
}

.hub-wireframe {
    position: relative;
    width: min(100%, 430px);
    min-height: 292px;
}

.hub-wireframe *,
.hub-wireframe *::before,
.hub-wireframe *::after {
    box-sizing: border-box;
}

.hub-window,
.hub-panel,
.setup-card,
.setup-card--mini,
.brand-card,
.brand-toolbar,
.brand-palette,
.homepage-sheet,
.homepage-floating-card,
.visuals-preview,
.visuals-tools,
.hosting-browser,
.hosting-secure-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(175, 194, 226, 0.62);
    box-shadow: 0 18px 38px rgba(27, 44, 77, 0.1);
}

.hub-wireframe--generation .hub-window {
    width: 300px;
    min-height: 220px;
    padding: 22px;
    border-radius: 10px;
}

.hub-window__topbar,
.hub-window__hero span,
.hub-window__grid span,
.hub-panel__line,
.hub-panel__button {
    display: block;
    border-radius: 999px;
}

.hub-window__topbar {
    width: 76px;
    height: 10px;
    background: #d5e6ff;
}

.hub-window__hero {
    margin-top: 26px;
    padding: 22px;
    border-radius: 9px;
    background: #f6faff;
}

.hub-window__hero span:first-child {
    width: 100%;
    height: 9px;
    background: #bfd6ff;
}

.hub-window__hero span:last-child {
    width: 58%;
    height: 7px;
    margin-top: 12px;
    background: #ddeaff;
}

.hub-window__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 18px;
}

.hub-window__grid span {
    height: 54px;
    background: #edf4ff;
}

.hub-panel {
    position: absolute;
    right: 18px;
    bottom: 8px;
    width: 180px;
    padding: 18px;
    border-radius: 12px;
}

.hub-panel__icon {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--feature-accent);
}

.hub-panel__line {
    height: 7px;
    width: 72%;
    margin-top: 13px;
    background: #dde8fb;
}

.hub-panel__line--long {
    width: 100%;
}

.hub-panel__button {
    width: 88px;
    height: 24px;
    margin-top: 18px;
    background: var(--feature-accent);
}

.hub-wireframe--setup {
    min-height: 300px;
}

.setup-card--main {
    position: absolute;
    top: 36px;
    right: 28px;
    width: 235px;
    min-height: 126px;
    padding: 24px 20px;
    border-radius: 11px;
}

.setup-card__dot {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #ffe1d2;
}

.setup-card__line {
    display: block;
    width: 100%;
    height: 8px;
    margin-top: 16px;
    border-radius: 999px;
    background: #f0d4c6;
}

.setup-card__line--short {
    width: 62%;
    margin-top: 10px;
}

.setup-node {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #f0c7b5;
    box-shadow: 0 16px 30px rgba(171, 91, 55, 0.1);
}

.setup-node::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 8px;
    background: var(--feature-accent);
}

.setup-node--one {
    left: 72px;
    top: 64px;
}

.setup-node--two {
    left: 120px;
    bottom: 56px;
}

.setup-connector {
    position: absolute;
    height: 3px;
    background: #f0bda7;
    transform-origin: left center;
}

.setup-connector--one {
    left: 120px;
    top: 90px;
    width: 118px;
    transform: rotate(12deg);
}

.setup-connector--two {
    left: 164px;
    bottom: 88px;
    width: 96px;
    transform: rotate(-18deg);
}

.setup-card--mini {
    position: absolute;
    right: 70px;
    bottom: 28px;
    width: 142px;
    padding: 17px;
    border-radius: 11px;
}

.setup-card--mini span {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: #f0d4c6;
}

.setup-card--mini span+span {
    width: 62%;
    margin-top: 10px;
}

.brand-toolbar {
    position: absolute;
    left: 54px;
    top: 48px;
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
}

.brand-toolbar span {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eeeafd;
}

.brand-toolbar span:nth-child(2) {
    background: var(--feature-accent);
}

.brand-card {
    position: absolute;
    right: 28px;
    top: 98px;
    width: 238px;
    padding: 24px;
    border-radius: 13px;
}

.brand-card__logo {
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6b55ff, #9cd8ff);
}

.brand-card__line {
    display: block;
    width: 100%;
    height: 8px;
    margin-top: 18px;
    border-radius: 999px;
    background: #ddd9f8;
}

.brand-card__line--short {
    width: 64%;
    margin-top: 11px;
}

.brand-palette {
    position: absolute;
    left: 88px;
    bottom: 34px;
    display: flex;
    gap: 9px;
    padding: 14px;
    border-radius: 999px;
}

.brand-palette span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.brand-palette span:nth-child(1) {
    background: #075fff;
}

.brand-palette span:nth-child(2) {
    background: #c95b32;
}

.brand-palette span:nth-child(3) {
    background: #6b55ff;
}

.homepage-sheet {
    position: absolute;
    left: 46px;
    top: 28px;
    width: 270px;
    min-height: 236px;
    padding: 26px;
    border-radius: 14px;
}

.homepage-sheet__title,
.homepage-sheet__copy,
.homepage-sheet__cta,
.homepage-floating-card span,
.visuals-preview__line,
.hosting-browser__domain,
.hosting-browser__line,
.hosting-secure-card>span:last-child {
    display: block;
    border-radius: 999px;
}

.homepage-sheet__title {
    width: 74%;
    height: 13px;
    background: #f0c7b5;
}

.homepage-sheet__copy {
    width: 100%;
    height: 8px;
    margin-top: 18px;
    background: #f4ded5;
}

.homepage-sheet__copy--short {
    width: 68%;
    margin-top: 11px;
}

.homepage-sheet__cta {
    width: 98px;
    height: 30px;
    margin-top: 32px;
    background: var(--feature-accent);
}

.homepage-floating-card {
    position: absolute;
    right: 38px;
    bottom: 32px;
    width: 150px;
    padding: 18px;
    border-radius: 12px;
}

.homepage-floating-card span {
    height: 8px;
    background: #f0d4c6;
}

.homepage-floating-card span+span {
    width: 62%;
    margin-top: 10px;
}

.visuals-preview {
    position: absolute;
    left: 78px;
    top: 34px;
    width: 250px;
    min-height: 224px;
    padding: 22px;
    border-radius: 14px;
}

.visuals-preview__image {
    display: block;
    height: 116px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 72% 28%, #ffffff 0 10px, transparent 11px),
        linear-gradient(135deg, #dff0ff 0%, #eeeafd 45%, #d8f4ef 100%);
}

.visuals-preview__line {
    width: 86%;
    height: 8px;
    margin-top: 20px;
    background: #ddd9f8;
}

.visuals-preview__line--short {
    width: 58%;
    margin-top: 10px;
}

.visuals-tools {
    position: absolute;
    right: 48px;
    bottom: 24px;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
}

.visuals-tools span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eeeafd;
}

.visuals-tools span:nth-child(2) {
    background: var(--feature-accent);
}

.hosting-browser {
    position: absolute;
    left: 44px;
    top: 40px;
    width: 292px;
    min-height: 218px;
    border-radius: 14px;
    overflow: hidden;
}

.hosting-browser__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-bottom: 1px solid #d7e6ff;
    background: #f8fbff;
}

.hosting-browser__bar span {
    display: block;
    border-radius: 999px;
    background: #d9e8ff;
}

.hosting-browser__bar span:first-child {
    width: 42px;
    height: 8px;
}

.hosting-browser__bar span:last-child {
    width: 88px;
    height: 8px;
}

.hosting-browser__content {
    padding: 28px 24px;
}

.hosting-browser__domain {
    width: 86%;
    height: 15px;
    background: var(--feature-accent);
}

.hosting-browser__line {
    width: 100%;
    height: 8px;
    margin-top: 20px;
    background: #dbe8ff;
}

.hosting-browser__line--short {
    width: 62%;
    margin-top: 11px;
}

.hosting-secure-card {
    position: absolute;
    right: 34px;
    bottom: 28px;
    width: 150px;
    padding: 18px;
    border-radius: 12px;
}

.hosting-secure-card__lock {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--feature-accent);
    position: relative;
}

.hosting-secure-card__lock::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 7px;
    width: 14px;
    height: 11px;
    border: 3px solid #ffffff;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
}

.hosting-secure-card__lock::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 16px;
    width: 16px;
    height: 12px;
    border-radius: 3px;
    background: #ffffff;
}

.hosting-secure-card>span:last-child {
    width: 84%;
    height: 8px;
    margin-top: 14px;
    background: #dbe8ff;
}

@media (max-width: 991px) {
    .ai-hub-features-grid {
        padding-top: 18px;
    }

    .ai-hub-feature-block,
    .ai-hub-feature-block--reverse {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: 0;
    }

    .ai-hub-feature-block--reverse .ai-hub-feature-block__visual,
    .ai-hub-feature-block--reverse .ai-hub-feature-block__content {
        order: initial;
    }

    .ai-hub-feature-block__content {
        max-width: 620px;
    }
}

@media (max-width: 640px) {
    .ai-hub-features-grid {
        padding: 12px 14px 82px;
        gap: 22px;
    }

    .ai-hub-feature-block {
        padding: 24px 18px 28px;
    }

    .ai-hub-feature-block__visual {
        min-height: 244px;
        overflow: hidden;
    }

    .hub-wireframe {
        transform: scale(0.82);
        transform-origin: center;
    }

    .ai-hub-feature-block__actions {
        flex-wrap: wrap;
        gap: 14px;
    }
}

@media (max-width: 420px) {
    .hub-wireframe {
        transform: scale(0.72);
    }

    .ai-hub-feature-block h3 {
        font-size: 1.48rem;
    }

    .ai-hub-feature-block__content>p:not(.ai-hub-feature-block__eyebrow) {
        font-size: 0.88rem;
    }
}

/* AI Hub Idea Section */
.ai-hub-idea-section {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 58px 24px 124px;
    display: grid;
    grid-template-columns: minmax(360px, 520px) minmax(360px, 1fr);
    align-items: center;
    gap: clamp(56px, 8vw, 102px);
}

.ai-hub-idea-section__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.idea-mockup-stage {
    position: relative;
    width: 452px;
    height: 452px;
    border-radius: 24px;
    background: #e3f5ff;
    box-shadow: inset 0 0 0 1px rgba(199, 232, 250, 0.72);
}

.idea-floating-card,
.idea-browser-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(221, 230, 242, 0.92);
    box-shadow: 0 18px 34px rgba(37, 54, 82, 0.12);
}

.idea-floating-card--top {
    top: 28px;
    left: 32px;
    width: 274px;
    padding: 18px;
    border-radius: 10px;
    z-index: 3;
}

.idea-icon-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.idea-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef6ff;
}

.idea-icon--bulb::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 9px;
    width: 10px;
    height: 13px;
    border: 3px solid #1f6bea;
    border-bottom: 0;
    border-radius: 9px 9px 4px 4px;
}

.idea-icon--bulb::after {
    content: "";
    position: absolute;
    left: 13px;
    bottom: 8px;
    width: 10px;
    height: 3px;
    border-radius: 999px;
    background: #1f6bea;
}

.idea-icon--target::before,
.idea-icon--target::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.idea-icon--target::before {
    inset: 10px;
    border: 3px solid #a6b3c4;
}

.idea-icon--target::after {
    inset: 15px;
    background: #a6b3c4;
}

.idea-icon-connector {
    display: block;
    width: 45px;
    height: 2px;
    background: #d8e4f2;
}

.idea-mini-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.idea-mini-columns span {
    height: 36px;
    border-radius: 4px;
    background: #f2f6fb;
}

.idea-mini-slider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
}

.idea-mini-slider span:first-child {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #d9e6f5;
}

.idea-mini-slider span:last-child {
    width: 86px;
    height: 6px;
    border-radius: 999px;
    background: #e6edf6;
}

.idea-floating-card--palette {
    top: 112px;
    right: 10px;
    width: 314px;
    height: 138px;
    padding: 20px 22px;
    border-radius: 10px;
    z-index: 5;
}

.idea-diamond-icon {
    position: absolute;
    left: 20px;
    top: 22px;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    background: #111827;
}

.idea-diamond-icon::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    border: 3px solid #334155;
    transform: rotate(45deg);
}

.idea-diamond-icon::after {
    content: "";
    position: absolute;
    right: -7px;
    top: -7px;
    width: 13px;
    height: 13px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #18c47c;
}

.idea-color-dots {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.idea-color-dot {
    width: 30px;
    height: 30px;
    border-radius: 5px;
}

.idea-color-dot--blue {
    background: #2869e8;
}

.idea-color-dot--dark {
    background: #111827;
}

.idea-color-dot--green {
    background: #18b981;
}

.idea-palette-line {
    display: block;
    height: 7px;
    margin-left: 0;
    border-radius: 999px;
    background: #edf2f8;
}

.idea-palette-line--long {
    width: 100%;
    margin-top: 49px;
}

.idea-palette-line:not(.idea-palette-line--long) {
    width: 72%;
    margin-top: 11px;
}

.idea-browser-card {
    right: 30px;
    bottom: 64px;
    width: 300px;
    padding: 20px 18px 18px;
    border-radius: 10px;
    z-index: 2;
}

.idea-browser-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 13px;
}

.idea-browser-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dce5ef;
}

.idea-browser-layout {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 12px;
}

.idea-image-placeholder {
    position: relative;
    height: 90px;
    border: 2px dashed #e0e8f1;
    border-radius: 5px;
    background: #fbfdff;
}

.idea-image-placeholder span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 18px;
    transform: translate(-50%, -50%);
}

.idea-image-placeholder span::before,
.idea-image-placeholder span::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #c7d3e1;
}

.idea-image-placeholder span::before {
    left: 0;
}

.idea-image-placeholder span::after {
    right: 0;
    border-bottom-color: #dce5ee;
}

.idea-browser-side {
    padding-top: 7px;
}

.idea-browser-side span {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #eef3f8;
}

.idea-browser-side span+span {
    width: 66%;
    margin-top: 13px;
}

.idea-browser-lines {
    margin-top: 15px;
}

.idea-browser-lines span {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: #111827;
}

.idea-browser-lines span:nth-child(1) {
    width: 71%;
}

.idea-browser-lines span:nth-child(2) {
    width: 70%;
    margin-top: 8px;
}

.idea-browser-lines span:nth-child(3) {
    width: 52%;
    margin-top: 8px;
}

.idea-browser-rule {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 9px;
    border-radius: 999px;
    background: #2869e8;
}

.idea-browser-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 13px;
}

.idea-browser-footer span {
    height: 45px;
    border-radius: 4px;
    background: #f5f8fb;
}

.idea-floating-card--bottom {
    left: 10px;
    bottom: 26px;
    width: 176px;
    height: 116px;
    padding: 17px;
    border-radius: 10px;
    z-index: 6;
}

.idea-ring-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 4px solid #2869e8;
    border-radius: 50%;
    vertical-align: top;
}

.idea-bottom-lines {
    position: absolute;
    top: 25px;
    left: 62px;
}

.idea-bottom-lines span {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #edf2f8;
}

.idea-bottom-lines span:first-child {
    width: 68px;
}

.idea-bottom-lines span:last-child {
    width: 44px;
    margin-top: 8px;
}

.idea-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.idea-bottom-grid span {
    height: 36px;
    border-radius: 4px;
    background: #f2f6fb;
}

.ai-hub-idea-section__content {
    max-width: 445px;
}

@media (max-width: 991px) {
    .ai-hub-idea-section {
        grid-template-columns: 1fr;
        padding-top: 34px;
        gap: 42px;
    }

    .ai-hub-idea-section__content {
        max-width: 720px;
        margin: 0 auto;

    }

    .ai-hub-idea-section__actions {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .ai-hub-idea-section {
        padding: 22px 16px 84px;
    }

    .idea-mockup-stage {
        width: 340px;

        transform-origin: center;
    }

    .idea-floating-card--top {
        left: 22px;
        width: 220px;
        padding: 14px;
    }

    .idea-floating-card--palette {
        top: 90px;
        right: -2px;
        width: 250px;

        padding: 16px;
    }

    .idea-diamond-icon {
        width: 48px;
        height: 48px;
    }

    .idea-diamond-icon::before {
        width: 18px;
        height: 18px;
    }


    .idea-color-dot {
        width: 23px;
        height: 23px;
    }

    .idea-browser-card {
        right: 18px;
        bottom: 48px;
        width: 240px;
        padding: 16px 14px;
    }

    .idea-browser-layout {
        grid-template-columns: 1fr 70px;
    }

    .idea-image-placeholder {
        height: 66px;
    }

    .idea-browser-footer span {
        height: 30px;
    }

    .idea-floating-card--bottom {
        left: -2px;
        bottom: 18px;
        width: 146px;
        padding: 13px;
    }

    .ai-hub-idea-section h2 {
        font-size: 2rem;
    }

    .ai-hub-idea-section__content>p:not(.ai-hub-idea-section__eyebrow) {
        font-size: 0.88rem;
    }

    .ai-hub-idea-section__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-hub-idea-btn {
        width: 100%;
    }
}

/* AI Assistant Wizard Section */
.ai-hub-wizard-section {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 34px 24px 132px;
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(390px, 520px);
    align-items: center;
    gap: clamp(58px, 8vw, 110px);
}

.ai-hub-wizard-section__content {
    max-width: 458px;
}

.ai-hub-wizard-section__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-mockup-stage {
    position: relative;
    width: 462px;
    height: 462px;
    border-radius: 24px;
    background: #fdebe6;
    overflow: hidden;
}

.wizard-mockup-stage *,
.wizard-mockup-stage *::before,
.wizard-mockup-stage *::after {
    box-sizing: border-box;
}

.wizard-decor {
    position: absolute;
    pointer-events: none;
}

.wizard-decor--diamond {
    right: 72px;
    top: 74px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #efc5ba;
    transform: rotate(45deg);
}

.wizard-decor--ring {
    left: 42px;
    bottom: 34px;
    width: 42px;
    height: 42px;
    border: 4px solid rgba(92, 136, 219, 0.26);
    border-radius: 50%;
}

.wizard-decor--arc {
    left: 14px;
    top: 166px;
    width: 96px;
    height: 96px;
    border: 8px solid rgba(92, 136, 219, 0.2);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: rotate(-42deg);
}

.wizard-float-card,
.wizard-main-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 44px rgba(99, 65, 54, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.wizard-float-card--steps {
    left: 34px;
    top: 42px;
    width: 178px;
    min-height: 142px;
    padding: 18px 17px;
    border-radius: 10px;
    transform: rotate(-3deg);
    z-index: 4;
}

.wizard-step-row {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 12px;
}

.wizard-step-row+.wizard-step-row {
    margin-top: 20px;
}

.wizard-step-icon {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.wizard-step-icon--shield {
    background: #fff1eb;
}

.wizard-step-icon--shield::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    width: 10px;
    height: 12px;
    background: #c9654f;
    clip-path: polygon(50% 0, 88% 15%, 82% 72%, 50% 100%, 18% 72%, 12% 15%);
}

.wizard-step-icon--target {
    background: #edf4ff;
}

.wizard-step-icon--target::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 2px solid #5d82e9;
    border-radius: 50%;
}

.wizard-step-icon--target::after {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: #5d82e9;
}

.wizard-step-icon--spark {
    background: #fff4e7;
}

.wizard-step-icon--spark::before,
.wizard-step-icon--spark::after {
    content: "";
    position: absolute;
    background: #e89a35;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.wizard-step-icon--spark::before {
    left: 7px;
    top: 6px;
    width: 12px;
    height: 12px;
}

.wizard-step-icon--spark::after {
    right: 5px;
    bottom: 6px;
    width: 6px;
    height: 6px;
}

.wizard-step-line {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: #edf2f7;
}

.wizard-main-card {
    left: 82px;
    top: 140px;
    width: 298px;
    min-height: 208px;
    padding: 32px 26px 24px;
    border-radius: 14px;
    z-index: 5;
}

.wizard-sparkles {
    position: absolute;
    right: 23px;
    top: 24px;
    width: 20px;
    height: 20px;
}

.wizard-sparkles::before,
.wizard-sparkles::after {
    content: "";
    position: absolute;
    background: #1458d9;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.wizard-sparkles::before {
    right: 0;
    top: 0;
    width: 11px;
    height: 11px;
}

.wizard-sparkles::after {
    left: 1px;
    bottom: 1px;
    width: 8px;
    height: 8px;
}

.wizard-progress-row {
    display: grid;
    grid-template-columns: 24px 1fr 24px 1fr 24px;
    align-items: center;
    margin: 18px 8px 24px 0;
}

.wizard-progress-dot,
.wizard-progress-node {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.wizard-progress-dot {
    background: #1458d9;
    box-shadow: inset 0 0 0 8px #1458d9, inset 0 0 0 10px #ffffff;
}

.wizard-progress-node {
    border: 2px solid #b8d0ff;
    background: rgba(255, 255, 255, 0.75);
}

.wizard-progress-line {
    height: 2px;
    background: #b8d0ff;
}

.wizard-setting-panel {
    display: grid;
    grid-template-columns: 1fr 42px;
    gap: 18px;
    min-height: 72px;
    padding: 16px;
    border-radius: 9px;
    background: rgba(248, 250, 252, 0.92);
}

.wizard-setting-lines span {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #eef2f7;
}

.wizard-setting-lines span:first-child {
    width: 88%;
    margin-top: 6px;
}

.wizard-setting-lines span:last-child {
    width: 66%;
    margin-top: 15px;
}

.wizard-toggle-stack {
    display: grid;
    align-content: center;
    gap: 11px;
}

.wizard-toggle {
    position: relative;
    width: 35px;
    height: 18px;
    border-radius: 999px;
    background: #cbd5e1;
}

.wizard-toggle::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
}

.wizard-toggle--active {
    background: #1458d9;
}

.wizard-toggle--active::after {
    left: 21px;
}

.wizard-main-bars {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.wizard-main-bars span {
    display: block;
    width: 72px;
    height: 5px;
    border-radius: 999px;
    background: #1458d9;
}

.wizard-main-bars span:nth-child(2) {
    width: 64px;
}

.wizard-main-bars span:nth-child(3) {
    width: 76px;
    background: #d5e2ff;
}

.wizard-float-card--list {
    right: 28px;
    bottom: 40px;
    width: 210px;
    min-height: 154px;
    padding: 20px 20px 18px;
    border-radius: 10px;
    transform: rotate(2deg);
    z-index: 6;
}

.wizard-list-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background:
        linear-gradient(#79a8ff 0 0) left top / 5px 5px no-repeat,
        linear-gradient(#79a8ff 0 0) right top / 5px 5px no-repeat,
        linear-gradient(#79a8ff 0 0) left bottom / 5px 5px no-repeat,
        linear-gradient(#79a8ff 0 0) right bottom / 5px 5px no-repeat;
}

.wizard-list-line {
    display: inline-block;
    width: 70px;
    height: 5px;
    margin-left: 12px;
    border-radius: 999px;
    background: #e6edf6;
    vertical-align: 4px;
}

.wizard-list-item {
    display: grid;
    grid-template-columns: 23px 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 11px;
    border-radius: 7px;
    background: #e5ebef;
}

.wizard-list-item span:first-child {
    height: 23px;
    border-radius: 4px;
    background: #ffffff;
}

.wizard-list-item span:last-child {
    height: 8px;
    border-radius: 999px;
    background: #d7dee4;
}

@media (max-width: 991px) {
    .ai-hub-wizard-section {
        grid-template-columns: 1fr;
        padding-top: 20px;
        gap: 42px;
    }

    .ai-hub-wizard-section__content {
        max-width: 720px;
        margin: 0 auto;

    }

    .ai-hub-wizard-section__actions {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .ai-hub-wizard-section {
        padding: 12px 16px 88px;
    }

    .wizard-mockup-stage {
        width: 340px;
        height: 340px;
    }

    .wizard-float-card--steps {
        left: 24px;
        top: 30px;
        width: 142px;
        min-height: 112px;
        padding: 13px;
    }

    .wizard-step-row {
        grid-template-columns: 22px 1fr;
        gap: 9px;
    }

    .wizard-step-row+.wizard-step-row {
        margin-top: 14px;
    }

    .wizard-step-icon {
        width: 22px;
        height: 22px;
    }

    .wizard-main-card {
        left: 56px;
        top: 104px;
        width: 240px;
        min-height: 170px;
        padding: 24px 18px 18px;
    }

    .wizard-setting-panel {
        min-height: 58px;
        padding: 12px;
        gap: 10px;
    }

    .wizard-float-card--list {
        right: 20px;
        bottom: 30px;
        width: 170px;
        min-height: 124px;
        padding: 15px;
    }

    .wizard-list-item {
        grid-template-columns: 18px 1fr;
        gap: 10px;
        margin-top: 11px;
        padding: 9px;
    }

    .wizard-list-item span:first-child {
        height: 18px;
    }

    .ai-hub-wizard-section h2 {
        font-size: 2rem;
    }

    .ai-hub-wizard-section__content>p:not(.ai-hub-wizard-section__eyebrow) {
        font-size: 0.88rem;
    }

    .ai-hub-wizard-section__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-hub-wizard-btn {
        width: 100%;
    }
}

/* Branding and Identity Section */
.ai-hub-branding-section {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 28px 24px 132px;
    display: grid;
    grid-template-columns: minmax(420px, 560px) minmax(360px, 0.9fr);
    align-items: center;
    gap: clamp(58px, 8vw, 100px);
}

.ai-hub-branding-section__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.branding-mockup-window {
    position: relative;
    width: 530px;
    min-height: 470px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(231, 236, 246, 0.72);
    box-shadow: 0 24px 54px rgba(30, 43, 72, 0.08);
    overflow: visible;
}

.branding-mockup-window *,
.branding-mockup-window *::before,
.branding-mockup-window *::after {
    box-sizing: border-box;
}

.branding-browser-bar {
    display: grid;
    grid-template-columns: 40px 1fr 22px;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 24px;
    border-bottom: 1px solid #edf1f7;
    background: #fbfcff;
    border-radius: 24px 24px 0 0;
}

.branding-browser-dots {
    display: flex;
    gap: 7px;
}

.branding-browser-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dbe3ef;
}

.branding-browser-dots span:first-child {
    background: #efb8b6;
}

.branding-browser-address {
    display: block;
    height: 11px;
    border-radius: 999px;
    background: #eef2f8;
}

.branding-browser-lock {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
}

.branding-browser-lock::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 2px;
    width: 8px;
    height: 7px;
    border: 2px solid #c8d2df;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
}

.branding-browser-lock::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 8px;
    width: 10px;
    height: 7px;
    border-radius: 2px;
    background: #c8d2df;
}

.branding-window-grid {
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 14px;
    padding: 20px 24px 60px;
}

.branding-orbit-card,
.branding-palette-card,
.branding-copy-card,
.branding-controls-card,
.branding-target-card,
.branding-floating-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(235, 239, 246, 0.9);
    box-shadow: 0 14px 34px rgba(38, 49, 76, 0.06);
}

.branding-orbit-card {
    position: relative;
    min-height: 156px;
    border-radius: 9px;
}

.branding-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 126px;
    height: 126px;
    transform: translate(-50%, -50%);
}

.branding-orbit-ring {
    position: absolute;
    inset: 10px;
    border: 2px solid #cfdcff;
    border-radius: 50%;
}

.branding-orbit-ring--tilt {
    transform: rotate(45deg) scaleX(0.72);
}

.branding-orbit-node {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5f62f3;
    box-shadow: 0 0 0 5px rgba(95, 98, 243, 0.1);
}

.branding-orbit-node--top {
    left: 58px;
    top: 7px;
}

.branding-orbit-node--right {
    right: 7px;
    top: 58px;
}

.branding-orbit-node--bottom {
    left: 58px;
    bottom: 7px;
}

.branding-orbit-node--left {
    left: 7px;
    top: 58px;
}

.branding-orbit-shape {
    position: absolute;
    left: 37px;
    top: 36px;
    width: 56px;
    height: 56px;
    border-radius: 7px;
    background: #6464f6;
    transform: rotate(-7deg);
    box-shadow: 0 18px 32px rgba(88, 90, 232, 0.22);
}

.branding-orbit-shape::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 21px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.42);
}

.branding-orbit-lines {
    position: absolute;
    right: 16px;
    bottom: 18px;
    display: flex;
    gap: 9px;
}

.branding-orbit-lines span {
    width: 24px;
    height: 4px;
    border-radius: 999px;
    background: #c6d6fb;
}

.branding-palette-card {
    min-height: 156px;
    padding: 22px 18px;
    border-radius: 9px;
}

.branding-card-line {
    display: block;
    width: 80px;
    height: 7px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: #eef2f8;
}

.branding-color-grid {
    display: grid;
    grid-template-columns: repeat(4, 34px);
    gap: 12px;
}

.branding-swatch {
    height: 26px;
    border-radius: 5px;
}

.branding-swatch--blue {
    background: #6764f6;
}

.branding-swatch--periwinkle {
    background: #a9b7ff;
}

.branding-swatch--ice {
    background: #dfe8fb;
}

.branding-swatch--teal {
    background: #00536a;
}

.branding-swatch--dark {
    background: #222932;
}

.branding-swatch--slate {
    background: #aeb7c4;
}

.branding-swatch--soft {
    background: #c7cfdd;
}

.branding-swatch--pale {
    background: #e1e8f8;
}

.branding-copy-card {
    grid-column: 2;
    min-height: 120px;
    padding: 20px 18px;
    border-radius: 9px;
}

.branding-copy-card span {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: #a7adb7;
}

.branding-copy-card span:nth-child(1) {
    width: 92%;
    height: 11px;
    background: #34383e;
}

.branding-copy-card span:nth-child(2) {
    width: 58%;
    height: 10px;
    margin-top: 10px;
    background: #34383e;
}

.branding-copy-card span:nth-child(3) {
    width: 100%;
    margin-top: 18px;
}

.branding-copy-card span:nth-child(4) {
    width: 78%;
    margin-top: 9px;
}

.branding-controls-card {
    grid-column: 1 / 2;
    min-height: 108px;
    padding: 22px 20px;
    border-radius: 9px;
}

.branding-control-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.branding-control-row+.branding-control-row {
    margin-top: 15px;
}

.branding-control-label {
    display: block;
    width: 34px;
    height: 6px;
    border-radius: 999px;
    background: #dce4ef;
}

.branding-control-track {
    position: relative;
    display: block;
    height: 5px;
    border-radius: 999px;
    background: #e6ecf5;
}

.branding-control-track span {
    position: absolute;
    left: 88px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    transform: translateY(-50%);
}

.branding-control-track--second span {
    left: 214px;
}

.branding-target-card {
    grid-column: 2;
    min-height: 82px;
    display: grid;
    place-items: center;
    border-radius: 9px;
}

.branding-target-ring {
    position: relative;
    width: 58px;
    height: 58px;
    border: 2px solid #d5e0ff;
    border-radius: 50%;
}

.branding-target-ring::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px solid #d5e0ff;
    border-radius: 50%;
}

.branding-target-ring::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    transform: translate(-50%, -50%);
}

.branding-floating-card {
    position: absolute;
    left: 228px;
    bottom: -38px;
    width: 200px;
    min-height: 112px;
    padding: 18px;
    border-radius: 10px;
    z-index: 5;
    box-shadow: 0 22px 38px rgba(31, 41, 65, 0.16);
}

.branding-floating-line {
    display: block;
    width: 56px;
    height: 7px;
    border-radius: 999px;
    background: #353943;
}

.branding-floating-dot {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cbd7e8;
}

.branding-floating-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.branding-floating-boxes span {
    height: 28px;
    border-radius: 5px;
    background: #f0f3f8;
}

.branding-floating-button {
    display: block;
    width: 100%;
    height: 34px;
    margin-top: 11px;
    border-radius: 6px;
    background: #6464f6;
}

.ai-hub-branding-section__content {
    max-width: 435px;
}

@media (max-width: 991px) {
    .ai-hub-branding-section {
        grid-template-columns: 1fr;
        padding-top: 24px;
        gap: 58px;
    }

    .ai-hub-branding-section__content {
        max-width: 720px;
        margin: 0 auto;

    }

    .ai-hub-branding-section__actions {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .ai-hub-branding-section {
        padding: 12px 16px 92px;
    }

    .branding-mockup-window {
        width: 340px;
        min-height: 318px;
        border-radius: 18px;
    }

    .branding-browser-bar {
        min-height: 36px;
        padding: 0 14px;
        grid-template-columns: 34px 1fr 18px;
        gap: 9px;
        border-radius: 18px 18px 0 0;
    }

    .branding-window-grid {
        gap: 9px;
        padding: 13px 14px 42px;
    }

    .branding-orbit-card {
        min-height: 112px;
    }

    .branding-orbit {
        transform: translate(-50%, -50%) scale(0.72);
    }

    .branding-palette-card {
        min-height: 112px;
        padding: 14px 12px;
    }

    .branding-color-grid {
        grid-template-columns: repeat(4, 22px);
        gap: 8px;
    }

    .branding-swatch {
        height: 18px;
    }

    .branding-copy-card {
        min-height: 86px;
        padding: 13px;
    }

    .branding-controls-card {
        min-height: 76px;
        padding: 14px;
    }

    .branding-target-card {
        min-height: 58px;
    }

    .branding-target-ring {
        transform: scale(0.72);
    }

    .branding-floating-card {
        left: 134px;
        bottom: -30px;
        width: 160px;
        min-height: 92px;
        padding: 14px;
    }

    .branding-floating-boxes span {
        height: 22px;
    }

    .branding-floating-button {
        height: 28px;
    }

    .ai-hub-branding-section h2 {
        font-size: 2rem;
    }

    .ai-hub-branding-section__content>p:not(.ai-hub-branding-section__eyebrow) {
        font-size: 0.88rem;
    }

    .ai-hub-branding-section__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-hub-branding-btn {
        width: 100%;
    }
}

/* Hero Image Generation Section */
.ai-hub-hero-image-section {
    padding: 20px 24px 128px;
}

.ai-hub-hero-image-section__container {
    max-width: 1120px;
}

.ai-hub-hero-image-section__content {
    max-width: 476px;
}

.ai-hub-hero-image-section__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   HERO IMAGE STAGE — Fully Fluid / Proportional Layout
   Base reference: 330px.  1px ≈ 0.303cqi.
   Container query units (cqi) scale all inner elements
   proportionally to the stage's inline size.
   ============================================================ */

.hero-image-stage {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    border-radius: 6.36%;
    background: #dfe5ff;
    overflow: hidden;
    container-type: inline-size;
    container-name: hero-stage;
    padding: 1.5%;
}

.hero-image-stage *,
.hero-image-stage *::before,
.hero-image-stage *::after {
    box-sizing: border-box;
}

/* ---------- Decorative accents ---------- */

.hero-image-decor {
    position: absolute;
    display: block;
}

.hero-image-decor--ring {
    right: 7.88%;
    /* 26 / 330 */
    top: 8.18%;
    /* 27 / 330 */
    width: 6.36%;
    /* 21 / 330 */
    height: 6.36%;
    border: 0.61cqi solid #9da9ff;
    /* 2px */
    border-radius: 50%;
}

.hero-image-decor--dot {
    left: -1.52%;
    /* -5 / 330 */
    top: 25.15%;
    /* 83 / 330 */
    width: 2.42%;
    /* 8 / 330 */
    height: 2.42%;
    border: 0.45cqi solid #f0c4de;
    /* 1.5px */
    border-radius: 50%;
}

.hero-image-decor--diamond {
    left: 7.58%;
    /* 25 / 330 */
    bottom: 15.45%;
    /* 51 / 330 */
    width: 3.33%;
    /* 11 / 330 */
    height: 3.33%;
    background: #efc4de;
    transform: rotate(45deg);
}

/* ---------- Shared card base ---------- */

.hero-image-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7.27cqi 13.64cqi rgba(70, 83, 142, 0.12);
}

/* ---------- Media card ---------- */

.hero-image-card--media {
    left: 6.67%;
    /* 22 / 330 */
    top: 21.52%;
    /* 71 / 330 */
    width: 73.94%;
    /* 244 / 330 */
    min-height: 29.09%;
    /* 96 / 330 */
    padding: 5.15cqi 5.76cqi 5.15cqi 4.85cqi;
    /* 17 19 17 16 */
    border-radius: 2.12cqi;
    /* 7px */
    display: grid;
    grid-template-columns: 19.09cqi 1fr;
    /* 63px col */
    gap: 3.64cqi;
    /* 12px */
    z-index: 2;
}

/* ---------- Thumbnail ---------- */

.hero-image-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 1.21cqi;
    /* 4px */
    background: #f1f5fb;
    overflow: hidden;
}

.hero-image-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 41.27%;
    /* 26 / 63 */
    background: #d9e2ec;
}

.hero-image-sun {
    position: absolute;
    right: 19.05%;
    /* 12 / 63 */
    top: 17.46%;
    /* 11 / 63 */
    width: 15.87%;
    /* 10 / 63 */
    height: 15.87%;
    border-radius: 50%;
    background: #ffc57e;
    z-index: 2;
}

.hero-image-mountain {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 0;
    height: 0;
    border-style: solid;
}

.hero-image-mountain--left {
    left: 17.46%;
    /* 11 / 63 */
    border-width: 0 5.15cqi 6.06cqi 5.15cqi;
    /* 0 17 20 17 */
    border-color: transparent transparent #c5d1df transparent;
}

.hero-image-mountain--right {
    right: 12.70%;
    /* 8 / 63 */
    border-width: 0 3.94cqi 5.15cqi 3.94cqi;
    /* 0 13 17 13 */
    border-color: transparent transparent #9daabd transparent;
}

/* ---------- Text lines ---------- */

.hero-image-lines {
    padding-top: 3.33cqi;
    /* 11px */
}

.hero-image-lines span {
    display: block;
    height: 2.12cqi;
    /* 7px */
    border-radius: 999px;
    background: #1f2937;
}

.hero-image-lines span:nth-child(1) {
    width: 100%;
}

.hero-image-lines span:nth-child(2) {
    width: 78%;
    margin-top: 3.03cqi;
    /* 10px */
}

.hero-image-lines span:nth-child(3) {
    width: 95%;
    margin-top: 3.03cqi;
    /* 10px */
}

/* ---------- Status card ---------- */

.hero-image-card--status {
    left: 13.94%;
    /* 46 / 330 */
    right: 7.88%;
    /* 26 / 330 */
    bottom: 24.55%;
    /* 81 / 330 */
    min-height: 29.70%;
    /* 98 / 330 */
    padding: 5.76cqi 5.45cqi 5.76cqi 5.15cqi;
    /* 19 18 19 17 */
    border-radius: 2.12cqi;
    /* 7px */
    display: grid;
    grid-template-columns: 1fr 10cqi;
    /* 33px col */
    gap: 5.45cqi;
    /* 18px */
    align-items: center;
    z-index: 3;
}

.hero-image-status-list {
    display: grid;
    gap: 6.36cqi;
    /* 21px */
}

.hero-image-status-row {
    display: grid;
    grid-template-columns: 6.36cqi 1fr;
    /* 21px dot col */
    gap: 3.64cqi;
    /* 12px */
    align-items: center;
}

.hero-image-status-dot {
    width: 6.36cqi;
    /* 21px */
    height: 6.36cqi;
    border-radius: 50%;
}

.hero-image-status-dot--mint {
    background: #baf8d7;
}

.hero-image-status-dot--purple {
    background: #ead7ff;
}

.hero-image-status-lines span {
    display: block;
    height: 1.21cqi;
    /* 4px */
    border-radius: 999px;
    background: #dce4ee;
}

.hero-image-status-lines span:nth-child(1) {
    width: 15.76cqi;
    /* 52px */
}

.hero-image-status-lines span:nth-child(2) {
    width: 23.94cqi;
    /* 79px */
    margin-top: 2.12cqi;
    /* 7px */
}

/* ---------- Progress ring ---------- */

.hero-image-progress {
    position: relative;
    width: 7.88cqi;
    /* 26px */
    height: 7.88cqi;
    border-radius: 50%;
    background: conic-gradient(#35d0a0 0 25%, #e5ebf5 25% 100%);
}

.hero-image-progress::before {
    content: "";
    position: absolute;
    inset: 0.91cqi;
    /* 3px */
    border-radius: 50%;
    background: #ffffff;
}

.hero-image-progress-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.73cqi;
    /* 9px */
    height: 2.73cqi;
    border-radius: 50%;
    background: #b977ff;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* ---------- Responsive overrides ---------- */

@media (max-width: 767.98px) {
    .ai-hub-hero-image-section {
        padding-top: 18px;
    }

    .ai-hub-hero-image-section__content {
        max-width: 720px;
        margin: 0 auto;
    }

    .hero-image-stage {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    .ai-hub-hero-image-section {
        padding: 12px 16px 88px;
    }

    .hero-image-stage {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Homepage Content Generation Section */
.ai-hub-homepage-section {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 26px 24px 132px;
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(390px, 520px);
    align-items: center;
    gap: clamp(58px, 8vw, 110px);
}

.ai-hub-homepage-section__content {
    max-width: 475px;
}

.ai-hub-homepage-section__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.homepage-content-stage {
    position: relative;
    width: 472px;
    height: 472px;
    border-radius: 24px;
    background: #ffedcf;
    overflow: hidden;
}

.homepage-content-stage *,
.homepage-content-stage *::before,
.homepage-content-stage *::after {
    box-sizing: border-box;
}

.homepage-content-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 46px rgba(123, 82, 31, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.homepage-content-card--hero {
    top: 74px;
    right: 48px;
    width: 334px;
    min-height: 132px;
    padding: 29px 27px 22px;
    border-radius: 10px;
    transform: rotate(-3deg);
    z-index: 5;
}

.homepage-spark-icon {
    position: absolute;
    left: 24px;
    top: 28px;
    width: 33px;
    height: 33px;
    border-radius: 7px;
    background: #fff0dc;
}

.homepage-spark-icon::before,
.homepage-spark-icon::after {
    content: "";
    position: absolute;
    background: #f47a25;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.homepage-spark-icon::before {
    left: 10px;
    top: 9px;
    width: 12px;
    height: 12px;
}

.homepage-spark-icon::after {
    right: 7px;
    bottom: 8px;
    width: 7px;
    height: 7px;
}

.homepage-hero-lines {
    margin-left: 58px;
    padding-top: 4px;
}

.homepage-hero-lines span {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: #dce4ee;
}

.homepage-hero-lines span:nth-child(1) {
    width: 144px;
    height: 6px;
}

.homepage-hero-lines span:nth-child(2) {
    width: 100%;
    margin-top: 23px;
}

.homepage-hero-lines span:nth-child(3) {
    width: 94%;
    margin-top: 12px;
}

.homepage-alert-dot {
    position: absolute;
    right: 27px;
    top: 36px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ed5f12;
}

.homepage-content-card--trust {
    left: 22px;
    top: 188px;
    width: 402px;
    min-height: 158px;
    padding: 24px 30px;
    border-radius: 11px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 54px;
    z-index: 4;
}

.homepage-trust-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.homepage-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #edf2f7;
}

.homepage-trust-line {
    display: block;
    width: 100%;
    height: 5px;
    margin-top: 20px;
    border-radius: 999px;
    background: #dbe3ee;
}

.homepage-trust-line--short {
    width: 64%;
    margin-top: 9px;
}

.homepage-stars {
    display: flex;
    gap: 6px;
    margin-top: 18px;
}

.homepage-stars span {
    width: 7px;
    height: 7px;
    background: #f47a25;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.homepage-content-card--faq {
    left: 46px;
    bottom: 54px;
    width: 354px;
    min-height: 103px;
    padding: 26px 24px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 88px 1fr 18px;
    align-items: start;
    gap: 16px;
    transform: rotate(2deg);
    z-index: 6;
}

.homepage-faq-dots {
    display: flex;
    gap: 12px;
    padding-top: 8px;
}

.homepage-faq-dots span {
    width: 25px;
    height: 25px;
    border: 2px solid #f2a15c;
    border-radius: 50%;
}

.homepage-faq-lines {
    display: grid;
    gap: 16px;
}

.homepage-faq-lines span {
    height: 5px;
    border-radius: 999px;
    background: #dce4ee;
}

.homepage-faq-lines span:first-child {
    width: 100%;
}

.homepage-faq-lines span:last-child {
    width: 92%;
}

.homepage-faq-chevrons {
    display: grid;
    gap: 15px;
    padding-top: 1px;
}

.homepage-faq-chevrons span {
    position: relative;
    width: 10px;
    height: 10px;
}

.homepage-faq-chevrons span::before,
.homepage-faq-chevrons span::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 6px;
    height: 2px;
    border-radius: 999px;
    background: #cdd6e2;
}

.homepage-faq-chevrons span::before {
    left: 0;
    transform: rotate(45deg);
}

.homepage-faq-chevrons span::after {
    right: 0;
    transform: rotate(-45deg);
}

@media (max-width: 991px) {
    .ai-hub-homepage-section {
        grid-template-columns: 1fr;
        padding-top: 18px;
        gap: 42px;
    }

    .ai-hub-homepage-section__content {
        max-width: 720px;
        margin: 0 auto;

    }

    .ai-hub-homepage-section__actions {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .ai-hub-homepage-section {
        padding: 12px 16px 88px;
    }

    .homepage-content-stage {
        width: 340px;
        height: 340px;
    }

    .homepage-content-card--hero {
        top: 54px;
        right: 22px;
        width: 252px;
        min-height: 100px;
        padding: 21px 18px 16px;
    }

    .homepage-spark-icon {
        left: 17px;
        top: 21px;
        width: 27px;
        height: 27px;
    }

    .homepage-hero-lines {
        margin-left: 44px;
    }

    .homepage-hero-lines span:nth-child(2) {
        margin-top: 16px;
    }

    .homepage-content-card--trust {
        left: 13px;
        top: 137px;
        width: 292px;
        min-height: 114px;
        padding: 18px 22px;
        gap: 34px;
    }

    .homepage-avatar {
        width: 32px;
        height: 32px;
    }

    .homepage-trust-line {
        margin-top: 13px;
    }

    .homepage-stars {
        margin-top: 12px;
        gap: 4px;
    }

    .homepage-content-card--faq {
        left: 32px;
        bottom: 38px;
        width: 252px;
        min-height: 82px;
        padding: 20px 17px;
        grid-template-columns: 64px 1fr 14px;
        gap: 10px;
    }

    .homepage-faq-dots {
        gap: 7px;
    }

    .homepage-faq-dots span {
        width: 18px;
        height: 18px;
    }

    .ai-hub-homepage-section h2 {
        font-size: 2rem;
    }

    .ai-hub-homepage-section__content>p:not(.ai-hub-homepage-section__eyebrow) {
        font-size: 0.88rem;
    }

    .ai-hub-homepage-section__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-hub-homepage-btn {
        width: 100%;
    }
}

/* =========================================
   AI Hub Reusable Section Primitives
   ========================================= */

.section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 25px;
    margin: 0 0 26px;
    padding: 0 14px;
    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.section-title {
    margin: 0;
    
    font-size: clamp(2.25rem, 4vw, 3.14rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: 0;
    text-align: center;
}

.section-description {

    margin: 28px auto;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.72;
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.btn-primary,
.btn-secondary {
    min-width: 158px;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    border-radius: 999px;
    
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-2px);
}

.theme-blue {
    --section-accent: #1458d9;
    --section-accent-hover: #0f49bd;
    --section-accent-soft: #edf5ff;
    --section-accent-border: #c9dcff;
    --section-accent-shadow: rgba(20, 88, 217, 0.18);
    --section-title-color: #111827;
    --section-text-color: #5f6b7c;
}

.theme-coral {
    --section-accent: #c9654f;
    --section-accent-hover: #b5523f;
    --section-accent-soft: #fbe2d8;
    --section-accent-border: #f0cfc5;
    --section-accent-shadow: rgba(201, 101, 79, 0.2);
    --section-title-color: #171b28;
    --section-text-color: #647089;
}

.theme-indigo {
    --section-accent: #6464f6;
    --section-accent-hover: #5353db;
    --section-accent-soft: #edf1ff;
    --section-accent-border: #cfd9ff;
    --section-accent-shadow: rgba(100, 100, 246, 0.2);
    --section-title-color: #171b28;
    --section-text-color: #5f6878;
}

.theme-lavender {
    --section-accent: #6570f4;
    --section-accent-hover: #5660df;
    --section-accent-soft: #edefff;
    --section-accent-border: #cbd2ff;
    --section-accent-shadow: rgba(101, 112, 244, 0.22);
    --section-title-color: #0e111b;
    --section-text-color: #667085;
}

.theme-teal {
    --section-accent: #4493A9;
    --section-accent-hover: #397D90;
    --section-accent-soft: #E8F5F8;
    --section-accent-border: #BFDDE5;
    --section-accent-shadow: rgba(68, 147, 169, 0.20);
    --section-title-color: #111827;
    --section-text-color: #5F6878;
}

.theme-gold {
    --section-accent: #7E5723;
    --section-accent-hover: #6B491D;
    --section-accent-soft: #F8F1E8;
    --section-accent-border: #DCC8AE;
    --section-accent-shadow: rgba(126, 87, 35, 0.20);
    --section-title-color: #111827;
    --section-text-color: #5F6878;
}

.theme-brown {
    --section-accent: #8a5a1e;
    --section-accent-hover: #744a18;
    --section-accent-soft: #fbefe2;
    --section-accent-border: #d8c5aa;
    --section-accent-shadow: rgba(138, 90, 30, 0.2);
    --section-title-color: #111827;
    --section-text-color: #5F6878;
}

.ai-section .section-badge {
    color: var(--section-accent);
    background: var(--section-accent-soft);
}

.ai-section .section-title {
    color: var(--section-title-color);
}

.ai-section .section-description {
    color: var(--section-text-color);
}

.ai-section .section-description a {
    color: var(--section-text-color);
}


.ai-section .btn-primary {
    color: #ffffff;
    background: var(--section-accent);
    border-color: var(--section-accent);
    box-shadow: 0 14px 24px var(--section-accent-shadow);
}

.ai-section .btn-primary:hover {
    color: #ffffff;
    background: var(--section-accent-hover);
    border-color: var(--section-accent-hover);
}

.ai-section .btn-secondary {
    color: var(--section-accent);
    background: #ffffff;
    border-color: var(--section-accent-border);
    box-shadow: none;
}

.ai-section .btn-secondary:hover {
    color: var(--section-accent-hover);
    background: var(--section-accent-soft);
    border-color: var(--section-accent-border);
}

.ai-section__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-hub-hero.ai-section .section-badge {
    margin-bottom: 12px;
    background: transparent;
    padding: 0;
}

.ai-hub-hero.ai-section .section-title {
    font-size: clamp(2.1rem, 4.2vw, 3.15rem);
}

.ai-hub-hero.ai-section .section-description {
    width: min(100%, 660px);
    max-width: 660px;
    margin: 14px auto 0;
    font-size: 0.88rem;
    font-weight: 400;
}

.ai-hub-hero.ai-section .section-actions {
    justify-content: center;
    margin-top: 22px;
    gap: 14px;
}

.ai-hub-hero.ai-section .btn-primary,
.ai-hub-hero.ai-section .btn-secondary {
    min-width: 142px;
    min-height: 44px;
    font-size: 0.82rem;
}

/* =========================================
   AI Course Structure Illustration
   ========================================= */

.course-structure-section {
    overflow: hidden;
}

.course-structure-section .row {
    min-height: 560px;
}

.structure-content {
    max-width: 520px;
}

.course-structure-section .section-badge {
    min-height: 28px;
    margin-bottom: 30px;
    padding: 0 18px;
    color: #1458d9;
    background: #edf5ff;
    font-size: 0.68rem;
    font-weight: 800;
}

.course-structure-section .section__title {
    color: #05070f;
    
    font-size: clamp(2.65rem, 4.35vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0;
}

.course-structure-section .section-description {
    max-width: 505px;
    margin-top: 26px;
    color: #647286;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.85;
}

.course-structure-section .section-actions {
    gap: 14px;
    margin-top: 32px;
}

.course-structure-section .btn-primary,
.course-structure-section .btn-secondary {
    min-width: 188px;
    min-height: 58px;
    padding: 0 31px;
    border-radius: 999px;
    font-size: 0.96rem;
    font-weight: 700;
}

.course-structure-section .btn-primary {
    background: #1458d9;
    border-color: #1458d9;
    box-shadow: 0 14px 28px rgba(20, 88, 217, 0.2);
}

.course-structure-section .btn-secondary {
    color: #1458d9;
    background: #ffffff;
    border-color: #bfd5fb;
    box-shadow: none;
}

.structure-visual {
    position: relative;
    width: 100%;
    min-height: 500px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.structure-visual__backdrop {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    background: #eaf2ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.structure-board {
    position: relative;
    width: 84%;
    height: 100%;
    min-height: 500px;

    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 26px 62px rgba(40, 80, 150, 0.07);
    z-index: 2;
}

.structure-timeline {
    position: absolute;
    left: 51px;
    top: 32px;
    width: 38px;
    height: 205px;
}

.structure-timeline__line {
    position: absolute;
    left: 18px;
    top: 27px;
    bottom: 22px;
    width: 2px;
    background: #dce8fb;
}

.structure-file {
    position: absolute;
    left: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f3f7ff;
    box-shadow: 0 10px 20px rgba(20, 88, 217, 0.08);
}

.structure-file svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #1458d9;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.structure-file--folder {
    top: 0;
    background: #e8f1ff;
}

.structure-file--folder svg {
    fill: #1458d9;
    stroke: none;
}

.structure-file--video {
    top: 116px;
}

.structure-file--doc {
    top: 194px;
    width: 32px;
    height: 32px;
    left: 3px;
    border: 1px solid #c8dcff;
    background: #ffffff;
}

.structure-lines {
    position: absolute;
    left: 145px;
}

.structure-lines span {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #eef4fd;
}

.structure-lines--top {
    top: 48px;
}

.structure-lines--top span:first-child {
    width: 218px;
    margin-bottom: 21px;
}

.structure-lines--top span:last-child {
    width: 147px;
}

.structure-lines--middle {
    top: 147px;
}

.structure-lines--middle span:first-child {
    width: 198px;
    margin-bottom: 20px;
}

.structure-lines--middle span:last-child {
    width: 96px;
}

.structure-floating {
    position: absolute;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(233, 239, 251, 0.9);
    box-shadow: 0 20px 45px rgba(35, 74, 143, 0.08);
    z-index: 3;
}

.structure-floating svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #1458d9;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.structure-floating--icons {
    right: -51px;
    top: 156px;
    width: 238px;
    height: 78px;
    justify-content: center;
    gap: 34px;
    border-radius: 15px;
}

.structure-floating--icons i {
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: #eaf1fc;
}

.structure-mini-cards {
    position: absolute;
    left: 51px;
    top: 267px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: calc(100% - 102px);
}

.structure-mini-card {
    height: 75px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #f8fbff;
    border: 1px solid #ecf2fc;
}

.structure-mini-card svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #1458d9;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.structure-mini-card span {
    width: 47px;
    height: 5px;
    margin-top: -11px;
    border-radius: 999px;
    background: #e6effc;
}

.structure-bottom-card {
    position: absolute;
    left: 51px;
    right: 51px;
    bottom: 53px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    border-radius: 13px;
    background: rgba(250, 252, 255, 0.74);
    border: 1px dashed #d9e7ff;
}

.structure-avatars {
    display: flex;
    align-items: center;
}

.structure-avatars span {
    width: 29px;
    height: 29px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid #f8fbff;
    background: #dce8fb;
}

.structure-avatars span:first-child {
    margin-left: 0;
    background: #e9eff9;
}

.structure-avatars span:nth-child(2) {
    background: #cddcf6;
}

.structure-avatars span:nth-child(3) {
    background: #aec5ed;
}

.structure-node-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 168px;
    height: 77px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 35px rgba(42, 84, 154, 0.08);
    transform: translate(-50%, -50%);
    z-index: 3;
}

.structure-node-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1458d9;
}

.structure-node-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.structure-node-lines {
    display: block;
    flex: 1;
}

.structure-node-lines i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #e8f0fb;
}

.structure-node-lines i:first-child {
    width: 48px;
    margin-bottom: 15px;
}

.structure-node-lines i:last-child {
    width: 96px;
}

.structure-trend-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
}

.structure-trend-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #1458d9;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================
   AI Course Cover Generation Section
   ========================================= */

.course-cover-generation-section {
    --cover-teal: #4493a9;
    --cover-teal-dark: #397d90;
    --cover-soft: #eef6f8;
    --cover-border: #d8e7ee;
    --cover-line: #e8eef5;
    --cover-shadow-soft: 0 22px 48px rgba(48, 94, 119, 0.1);
    --cover-shadow-float: 0 18px 42px rgba(40, 88, 116, 0.12);
    --cover-radius-lg: 28px;
    --cover-radius-md: 13px;
    overflow: hidden;
}

.course-cover-generation-section .row {
    min-height: 485px;
}

.cover-generation-content {
    max-width: 500px;
}

.course-cover-generation-section .section-badge {
    min-height: 25px;
    margin-bottom: 26px;
    padding: 0 17px;
    color: var(--cover-teal);
    background: #e9f6f5;
    font-size: 0.66rem;
    font-weight: 800;
}

.course-cover-generation-section .section__title {
    color: #05070f;
    
    font-size: clamp(2.45rem, 4.1vw, 3.45rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: 0;
}

.course-cover-generation-section .section-description {
    max-width: 465px;
    margin-top: 24px;
    color: #68758a;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.82;
}

.course-cover-generation-section .section-actions {
    gap: 13px;
    margin-top: 31px;
}

.course-cover-generation-section .btn-primary,
.course-cover-generation-section .btn-secondary {
    min-width: 163px;
    min-height: 55px;
    padding: 0 28px;
    font-size: 0.91rem;
    font-weight: 700;
}

.course-cover-generation-section .btn-primary {
    background: var(--cover-teal);
    border-color: var(--cover-teal);
    box-shadow: 0 14px 28px rgba(68, 147, 169, 0.22);
}

.course-cover-generation-section .btn-primary:hover {
    background: var(--cover-teal-dark);
    border-color: var(--cover-teal-dark);
}

.course-cover-generation-section .btn-secondary {
    color: var(--cover-teal);
    background: #ffffff;
    border-color: #c8dced;
    box-shadow: none;
}

.course-cover-generation-section .btn-secondary:hover {
    color: var(--cover-teal-dark);
    background: var(--cover-soft);
    border-color: #c8dced;
}

.cover-generation-visual {
    position: relative;
    width: 100%;
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-generation-board {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 47px 46px;
    border-radius: var(--cover-radius-lg);
    background: #eef5f7;
    border: 1px solid #dce9ef;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.cover-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
    width: 100%;
}

.cover-card {
    position: relative;
    min-height: 130px;
    padding: 8px 9px 12px;
    border-radius: var(--cover-radius-md);
    background: #ffffff;
    border: 1px solid #dce9f4;
    box-shadow: var(--cover-shadow-soft);
}

.cover-preview {
    position: relative;
    height: 77px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #f2f5f8;
    overflow: hidden;
}

.cover-line {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--cover-line);
}

.cover-line--long {
    width: 112px;
    margin-bottom: 10px;
}

.cover-line--short {
    width: 79px;
}

.cover-card__dot {
    position: absolute;
    right: 10px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cover-teal);
}

.cover-abstract-shape--triangle {
    position: absolute;
    left: 48%;
    top: 31%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid #bdd3f4;
    transform: translateX(-50%);
}

.cover-abstract-shape--square {
    position: absolute;
    left: 46%;
    top: 53%;
    width: 10px;
    height: 10px;
    border: 3px solid #bdd3f4;
    border-radius: 2px;
}

.cover-abstract-shape--ring {
    position: absolute;
    left: 55%;
    top: 57%;
    width: 9px;
    height: 9px;
    border: 3px solid #bdd3f4;
    border-radius: 50%;
}

.cover-card--circles .cover-preview {
    background: #eaf3ff;
}

.cover-circle {
    position: absolute;
    border-radius: 50%;
    border: 4px solid var(--cover-teal);
}

.cover-circle--main {
    width: 20px;
    height: 20px;
}

.cover-circle--offset {
    width: 14px;
    height: 14px;
    right: calc(50% - 20px);
    bottom: calc(50% - 16px);
}

.cover-card--grid .cover-preview {
    grid-template-columns: repeat(2, 11px);
    grid-template-rows: repeat(2, 11px);
    gap: 5px;
}

.cover-card--grid .cover-preview span {
    width: 11px;
    height: 11px;
    border: 3px solid #bdd3f4;
    border-radius: 2px;
}

.cover-card--box svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #bdd3f4;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cover-palette-card {
    position: absolute;
    left: -17px;
    top: 94px;
    width: 91px;
    height: 94px;
    padding: 17px 16px;
    border-radius: 13px;
    background: #ffffff;
    border: 1px solid #dce9f4;
    box-shadow: var(--cover-shadow-float);
}

.cover-palette-card__dots {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}

.cover-palette-card__dots span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cover-teal);
}

.cover-palette-card__dots span:nth-child(2) {
    background: #d6e1ed;
}

.cover-palette-card__dots span:nth-child(3) {
    background: #bfcadd;
}

.cover-palette-card__checks {
    display: grid;
    grid-template-columns: repeat(2, 22px);
    gap: 10px 13px;
}

.cover-palette-card__checks span {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #edf4fd;
    border: 1px solid #cfe0f5;
}

.cover-magic-button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: var(--cover-teal);
    box-shadow: 0 16px 32px rgba(68, 147, 169, 0.28);
    transform: translate(-50%, -50%);
    z-index: 4;
}

.cover-magic-button svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cover-controls-card {
    position: absolute;
    right: -23px;
    bottom: 30px;
    width: 181px;
    height: 91px;
    padding: 18px 20px 15px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dce9f4;
    box-shadow: var(--cover-shadow-float);
}

.cover-control-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 13px;
}

.cover-control-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cover-teal);
}

.cover-control-dot--large {
    width: 9px;
    height: 9px;
}

.cover-control-track {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: #d9e4f0;
}

.cover-control-track i {
    position: absolute;
    left: 45%;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--cover-teal);
    transform: translate(-50%, -50%);
}

.cover-control-track--short {
    flex: 0 0 77px;
}

.cover-control-track--short i {
    left: 68%;
}

.cover-toggles {
    display: flex;
    gap: 8px;
    padding-left: 2px;
}

.cover-toggle {
    position: relative;
    width: 26px;
    height: 13px;
    border-radius: 999px;
    background: #c8d8eb;
}

.cover-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
    transform: translateY(-50%);
}

.cover-toggle--active {
    background: var(--cover-teal);
}

.cover-toggle--active::after {
    left: 16px;
}

/* =========================================
   Creator Control Section
   ========================================= */

.creator-control-section {
    --control-teal: #4493a9;
    --control-teal-dark: #397d90;
    --control-mint: #eef9f5;
    --control-board: #e5f5fb;
    --control-line: #e8eef4;
    --control-shadow-card: 0 24px 52px rgba(37, 83, 112, 0.14);
    --control-shadow-float: 0 16px 36px rgba(37, 83, 112, 0.12);
    overflow: hidden;
}

.creator-control-section .row {
    min-height: 485px;
}

.creator-control-content {
    max-width: 480px;
}

.creator-control-section .section-badge {
    min-height: 25px;
    margin-bottom: 26px;
    padding: 0 17px;
    color: var(--control-teal);
    background: #e7f1f7;
    font-size: 0.66rem;
    font-weight: 800;
}

.creator-control-section .section__title {
    color: #05070f;
    
    font-size: clamp(2.45rem, 4.1vw, 3.45rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: 0;
}

.creator-control-section .section-description {
    max-width: 465px;
    margin-top: 24px;
    color: #68758a;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.82;
}

.creator-control-section .section-actions {
    gap: 13px;
    margin-top: 31px;
}

.creator-control-section .btn-primary,
.creator-control-section .btn-secondary {
    min-width: 163px;
    min-height: 55px;
    padding: 0 28px;
    font-size: 0.91rem;
    font-weight: 700;
}

.creator-control-section .btn-primary {
    background: var(--control-teal);
    border-color: var(--control-teal);
    box-shadow: 0 14px 28px rgba(68, 147, 169, 0.22);
}

.creator-control-section .btn-primary:hover {
    background: var(--control-teal-dark);
    border-color: var(--control-teal-dark);
}

.creator-control-section .btn-secondary {
    color: var(--control-teal);
    background: #ffffff;
    border-color: #c8dced;
    box-shadow: none;
}

.creator-control-section .btn-secondary:hover {
    color: var(--control-teal-dark);
    background: #eef6f8;
    border-color: #c8dced;
}

.creator-control-visual {
    position: relative;
    width: 100%;
    min-height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator-control-board {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 27px;
    background: linear-gradient(135deg, #e5f5fb 0%, #dff1fb 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.creator-control-topbar {
    position: absolute;
    left: 29px;
    right: 30px;
    top: 26px;
    height: 87px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 38px 0 31px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.7);
}

.creator-control-topbar__copy {
    display: flex;
    align-items: center;
    gap: 15px;
}

.creator-control-topbar__copy div span {
    display: block;
    width: 88px;
    height: 5px;
    border-radius: 999px;
    background: #dce7f2;
}

.creator-control-topbar__copy div span+span {
    width: 67px;
    margin-top: 12px;
}

.creator-control-topbar__copy i {
    width: 18px;
    height: 18px;
    background:
        linear-gradient(135deg, transparent 38%, #a9bfd5 40% 54%, transparent 56%),
        linear-gradient(135deg, transparent 57%, #a9bfd5 59% 72%, transparent 74%);
}

.creator-control-topbar__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #c2d3e5;
}

.creator-control-topbar__slider {
    position: relative;
    width: 104px;
    height: 4px;
    border-radius: 999px;
    background: #dbe7f1;
}

.creator-control-topbar__slider span {
    position: absolute;
    right: 0;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--control-teal);
    transform: translateY(-50%);
}

.creator-editor-window {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 365px;
    padding: 25px 25px 22px;
    border-radius: 13px;
    background: #ffffff;
    border: 1px solid rgba(222, 235, 245, 0.9);
    box-shadow: var(--control-shadow-card);
    z-index: 2;
}

.creator-editor-window__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.creator-editor-window__header>span {
    width: 158px;
    height: 5px;
    border-radius: 999px;
    background: #34435a;
}

.creator-editor-window__header div {
    display: flex;
    gap: 8px;
}

.creator-editor-window__header i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e2eaf2;
}

.creator-editor-list {
    display: grid;
    gap: 13px;
}

.creator-editor-item {
    height: 43px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #edf1f5;
}

.creator-editor-item--active {
    background: #f7fffb;
    border-color: #cfece3;
}

.creator-editor-check,
.creator-editor-radio {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.creator-editor-check {
    background: #56b5a4;
}

.creator-editor-check svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.creator-editor-radio {
    border: 2px solid #e2ebf2;
}

.creator-editor-line {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e2edf2;
}

.creator-editor-line--short {
    max-width: 195px;
}

.creator-editor-mini-slider {
    position: relative;
    flex: 0 0 34px;
    height: 3px;
    border-radius: 999px;
    background: #d8e2ed;
}

.creator-editor-mini-slider i {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7896b7;
    transform: translateY(-50%);
}

.creator-editor-note {
    margin-top: 29px;
    padding: 18px 17px;
    border-radius: 10px;
    background: #f6f9fc;
}

.creator-editor-note span {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #edf2f6;
}

.creator-editor-note span:first-child {
    width: 100%;
    margin-bottom: 11px;
}

.creator-editor-note span:nth-child(2) {
    width: 78%;
    margin-bottom: 11px;
}

.creator-editor-note span:last-child {
    width: 64%;
}

.creator-shield-badge {
    position: absolute;
    right: -15px;
    bottom: -18px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: var(--control-teal);
    box-shadow: 0 12px 24px rgba(68, 147, 169, 0.28);
}

.creator-shield-badge svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.creator-preview-card {
    position: absolute;
    left: 45px;
    bottom: 34px;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    border: 2px dashed #d4e3ef;
    box-shadow: var(--control-shadow-float);
    transform: rotate(-5deg);
    z-index: 1;
}

.creator-preview-card svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: #80c7b6;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.creator-control-dot {
    position: absolute;
    border-radius: 50%;
}

.creator-control-dot--left {
    left: 31px;
    bottom: 104px;
    width: 10px;
    height: 10px;
    border: 2px solid #50b79b;
    background: #ffffff;
}

.creator-control-dot--right {
    right: 35px;
    top: 128px;
    width: 7px;
    height: 7px;
    background: var(--control-teal);
}

.creator-control-dot--bottom {
    left: 118px;
    bottom: 78px;
    width: 6px;
    height: 6px;
    background: #d7e8ef;
}

@media (max-width: 991px) {
    .course-structure-section .row {
        min-height: auto;
    }

    .course-cover-generation-section .row {
        min-height: auto;
    }

    .creator-control-section .row {
        min-height: auto;
    }

    .structure-content {
        max-width: 560px;
        margin-inline: auto;

    }

    .cover-generation-content {
        max-width: 600px;
        margin-inline: auto;

    }

    .creator-control-content {
        max-width: 600px;
        margin-inline: auto;

    }

    .course-structure-section .section-description {
        max-width: 540px;
    }

    .course-cover-generation-section .section-description {
        max-width: 570px;
    }

    .creator-control-section .section-description {
        max-width: 570px;
    }

    .ai-section .section-description {
        margin-left: auto;
        margin-right: auto;
    }

    .ai-section .section-actions {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .structure-visual {
        min-height: 360px;
    }

    .cover-generation-visual {
        min-height: 330px;
    }

    .creator-control-visual {
        min-height: 330px;
    }

    .cover-generation-board {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        transform-origin: center;
    }

    .cover-generation-board {
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .creator-control-board {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.72);
        transform-origin: center;
    }

    .structure-board {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 430px;
        min-height: 500px;
        margin-right: 0;
        transform: translate(-50%, -50%) scale(0.68);
        transform-origin: center;
    }

    .course-structure-section .section__title,
    .course-cover-generation-section .section__title,
    .creator-control-section .section__title {
        font-size: 2.5rem;
    }

    .ai-section .section-title {
        font-size: 2rem;
    }

    .ai-section .section-description {
        font-size: 0.88rem;
    }

    .ai-section .section-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-section .btn-primary,
    .ai-section .btn-secondary {
        width: 100%;
    }
}




/*==================================================
                HOSTING SECTION
==================================================*/

.hosting-section {
    padding: 120px 0;
    background: #ffffff;
    overflow: hidden;
}

.hosting-section .container {
    width: min(1180px, 90%);
    margin: auto;
}

.hosting-wrapper {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 90px;
}

/*==================================================
                LEFT SIDE
==================================================*/





/*==================================================
                BUTTONS
==================================================*/



/*==================================================
                RIGHT
==================================================*/

.hosting-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hosting-bg {

    position: relative;

    width: 520px;
    height: 470px;

    border-radius: 28px;

    background: #DDEBFF;

    overflow: visible;
}

/*==================================================
            MAIN WHITE CARD
==================================================*/

.main-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 330px;
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 30px 60px rgba(38, 58, 90, .14);
}

/*==================================================
            BROWSER HEADER
==================================================*/

.browser-top {

    display: flex;

    gap: 7px;

    margin-bottom: 26px;
}

.browser-top span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #D8E2F2;
}

.browser-top span:first-child {

    background: #B8C7E9;
}

/*==================================================
            FORM AREA
==================================================*/

.form-area {

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.form-row {

    display: flex;

    align-items: center;

    gap: 14px;
    background-color: #F8FAFC;
    border-radius: 8px;
    padding: 8px 16px;
}

.row-icon {

    width: 12px;
    height: 12px;

    border-radius: 4px;

    flex-shrink: 0;
}

.row-icon.blue {

    background: #4A79F8;
}

.row-icon.purple {

    background: #6C7BFF;
}

.row-icon.gray {

    background: #B6C4DA;
}

.row-line {

    height: 7px;

    border-radius: 8px;

    background: #E2E8F0;
}

.long {

    width: 170px;
}

.medium {

    width: 150px;
}

.short {

    width: 120px;
}

.status {

    margin-left: auto;

    width: 11px;
    height: 11px;

    border-radius: 50%;
}

.green {

    background: #39D98A;
}

.lock {

    width: 9px;
    height: 12px;

    border: 2px solid #4A79F8;

    border-radius: 2px;

    margin-left: auto;

    position: relative;
}

.lock::before {

    content: "";

    position: absolute;

    width: 8px;
    height: 7px;

    border: 2px solid #4A79F8;

    border-bottom: none;

    border-radius: 8px 8px 0 0;

    left: 50%;
    transform: translateX(-50%);
    top: -8px;
}

.mini-line {

    margin-left: auto;

    width: 42px;
    height: 6px;

    background: #EEF3FA;

    border-radius: 20px;
}

/*=====================================
        FLOATING CARD
======================================*/

.floating-card {

    position: absolute;

    top: 25px;
    right: 25px;

    width: 140px;
    height: 110px;

    background: #ffffff;

    border-radius: 14px;

    padding: 14px;

    transform: rotate(-4deg);

    box-shadow:
        0 22px 45px rgba(41, 58, 95, .12);

    z-index: 5;
}

.floating-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;
}

.avatar-circle {

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #DBEAFE;
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}



.floating-lines {

    flex: 1;
}

.floating-lines span {

    display: block;

    height: 6px;

    border-radius: 20px;

    background: #E3EAF7;
}

.floating-lines span:last-child {

    width: 65%;

    margin-top: 7px;
}

.floating-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/*=====================================
            SMALL ICON
======================================*/

.small-icon {
    width: 30px;
    height: 30px;
    background: #F8FAFC;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}



/*=====================================
            CLOUD
======================================*/

.cloud-icon {

    width: 24px;
    height: 12px;

    border: 2px solid #4D7CFE;

    border-top: none;

    border-radius: 0 0 10px 10px;

    position: relative;
}

.cloud-icon::before {

    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border: 2px solid #4D7CFE;

    border-radius: 50%;

    background: #fff;

    left: -2px;
    top: -8px;
}

.cloud-icon::after {

    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border: 2px solid #4D7CFE;

    border-radius: 50%;

    background: #fff;

    right: -2px;
    top: -8px;
}

/*=====================================
        ACTIONS
======================================*/

.card-actions {

    display: flex;

    gap: 16px;

    margin-top: 30px;
}

.submit-btn {

    width: 140px;
    height: 42px;

    border: none;

    border-radius: 8px;

    background: #3268F6;

    color: #fff;

    font-size: 18px;

    cursor: pointer;

    transition: .3s;
}

.submit-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(50, 104, 246, .30);
}

.action-placeholder {

    flex: 1;

    height: 42px;

    border-radius: 8px;

    background: #EEF3FA;
}

/*=====================================
        MINI WIDGET
======================================*/

.mini-widget {

    position: absolute;

    left: 30px;
    bottom: 35px;

    width: 105px;
    height: 34px;

    background: #fff;

    border-radius: 25px;

    display: flex;

    align-items: center;

    padding: 0 12px;

    gap: 12px;

    box-shadow:
        0 14px 30px rgba(41, 58, 95, .10);
}

.widget-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #2F67F6;
}

.widget-bars {

    display: flex;

    align-items: flex-end;

    gap: 3px;
}

.widget-bars span {

    width: 3px;

    background: #4A7AF8;

    border-radius: 3px;
}

.widget-bars span:nth-child(1) {
    height: 8px;
}

.widget-bars span:nth-child(2) {
    height: 14px;
}

.widget-bars span:nth-child(3) {
    height: 10px;
}

.widget-bars span:nth-child(4) {
    height: 6px;
}

/*=====================================
      SOFT HIGHLIGHTS
======================================*/




/*==================================================
        MAIN CARD POLISH
==================================================*/

.main-card {

    border: 1px solid #EDF2FA;

    backdrop-filter: blur(8px);

    overflow: hidden;
}

.main-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 18px;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, .55),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

/*==================================================
            FORM ROWS
==================================================*/

.form-row {

    height: 44px;



    transition: .25s;
}

.form-row:hover {

    background: #F8FBFF;
}

.divider {

    height: 1px;

    background: #F3F6FB;

    margin: 4px 0;
}

/*==================================================
            ICON STYLE
==================================================*/

.row-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, .25);
}

.row-icon.blue {

    background: linear-gradient(180deg,
            #5A86FF,
            #3C6EF5);
}

.row-icon.purple {

    background: linear-gradient(180deg,
            #8A7BFF,
            #6876FF);
}

.row-icon.gray {

    background: #C4CEDD;
}

/*==================================================
            PLACEHOLDER LINES
==================================================*/

.row-line {

    position: relative;

    overflow: hidden;
}

.row-line::after {

    content: "";

    position: absolute;

    left: -40%;

    width: 40%;

    height: 100%;

    background: rgba(255, 255, 255, .45);

    transform: skewX(-20deg);
}

/*==================================================
        GREEN STATUS
==================================================*/

.status.green {

    box-shadow:
        0 0 0 6px rgba(57, 217, 138, .12);
}

/*==================================================
        BUTTON
==================================================*/

.submit-btn {

    font-weight: 700;

    letter-spacing: .3px;

    background: linear-gradient(180deg,
            #3F77FF,
            #245EE8);
}



/*==================================================
        SECOND BUTTON
==================================================*/

.action-placeholder {

    position: relative;

    overflow: hidden;
}




/*==========================================
            SECTION
==========================================*/

.learning-website-section {
    padding: 110px 0;
    overflow: hidden;
}

.website-illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

.refactored-hub-container {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, #EDF5FF 0%, #EAF3FF 100%);
    border: 1px solid #DCE8F8;
    border-radius: 24px;
    position: relative;
    overflow: visible !important;
    height: auto !important;
}

/* Floating badge (top left) */
.floating-badge-top-left {
    position: absolute;
    left: 4%;
    top: 24%;
    width: 10%;
    height: 10%;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(35, 55, 94, 0.12);
    z-index: 10;
    transition: all 0.3s ease;
    animation: refactoredBadgeFloat 4s ease-in-out infinite;
}

.floating-badge-top-left:hover {
    transform: scale(1.1);
}

.floating-badge-top-left svg.node-icon {
    width: 60%;
    height: 60%;
}

/* Floating Address capsule (top right) */
.floating-capsule-top-right {
    position: absolute;
    right: 8%;
    top: 14%;
    width: 48%;
    height: 7%;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 4%;
    box-shadow: 0 6px 15px rgba(35, 55, 94, 0.04);
    opacity: 0.85;
}

.floating-capsule-top-right .capsule-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CBD5E1;
    margin-right: 8px;
    flex-shrink: 0;
}

.floating-capsule-top-right .capsule-line {
    width: 60%;
    height: 5px;
    border-radius: 3px;
    background: #EEF2FA;
}

/* Core Browser Window Mockup */
.core-browser-window {
    position: absolute;
    left: 10%;
    top: 32%;
    width: 80%;
    height: 56%;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #EEF3FA;
    box-shadow: 0 20px 45px rgba(35, 55, 95, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 5;
    animation: refactoredBrowserFloat 6s ease-in-out infinite;
}

.browser-window-header {
    height: 18%;
    border-bottom: 1px solid #EEF3FA;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    background: #FCFDFF;
}

.header-search-bar {
    width: 55%;
    height: 6px;
    background: #EEF2FA;
    border-radius: 3px;
}

.header-purple-pill {
    width: 25%;
    height: 10px;
    background: #5B53F8;
    border-radius: 5px;
}

.browser-window-body {
    flex: 1;
    display: flex;
    padding: 4% 5%;
    gap: 5%;
    overflow: hidden;
}

/* Sidebar */
.browser-sidebar {
    width: 24%;
    border: 1px dashed #D8E6FA;
    border-radius: 8px;
    padding: 3%;
    display: flex;
    flex-direction: column;
    gap: 12%;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 8%;
    width: 100%;
}



.sidebar-line {
    height: 16px;
    border-radius: 4px;
    background: rgba(20, 88, 217, 0.05);
    flex: 1;
}

/* Grid */
.browser-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 6%;
}

.grid-card-item {
    background: #ffffff;
    border: 1.5px solid #F1F5F9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.grid-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(40, 60, 95, 0.06);
    border-color: #E4ECFA;
}

.grid-card-item svg.card-icon {
    width: 24px;
    height: 24px;
    max-width: 60%;
}

.grid-card-item.cap-card svg.cap-icon {
    width: 28px;
    height: 28px;
    stroke: #8D82FF;
}

.grid-card-item.empty-card {
    background: #FAFBFC;
    border: 1.5px dashed #E2E8F0;
}

/* Floating Video Panel */
.floating-video-panel {
    position: absolute;
    right: 4%;
    bottom: 8%;
    width: 32%;
    height: 30%;
    background: #ffffff;
    border-radius: 12px;
    padding: 2.5%;
    box-shadow: 0 15px 35px rgba(26, 45, 90, 0.1);
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 8%;
    border: 1px solid #EEF3FA;
    animation: refactoredVideoFloat 5s ease-in-out infinite;
}

.video-thumbnail {
    width: 100%;
    height: 60%;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.2), rgba(0, 65, 173, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.play-pill {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.play-pill:hover {
    transform: scale(1.15);
}

.play-pill svg.play-icon {
    width: 8px;
    height: 8px;
    fill: #8D82FF;
    margin-left: 1px;
}

.video-skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.video-line-long {
    display: block;
    width: 80%;
    height: 8px;
    background: #F1F5F9;
    border-radius: 999px;
}

.video-line-short {
    display: block;
    width: 50%;
    height: 8px;
    background: #F1F5F9;
    border-radius: 999px;
}

/* Micro-animations keyframes */
@keyframes refactoredBrowserFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes refactoredVideoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes refactoredBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* Responsiveness tweaks for tablet/mobile viewports */
@media (max-width: 992px) {
    .refactored-hub-container {
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .refactored-hub-container {
        max-width: 100%;
    }

    .floating-capsule-top-right .capsule-dot {
        width: 4px;
        height: 4px;
    }
}


/*======================================================
                    SECTION
======================================================*/

.idea-course-section {

    padding: 120px 0;

    overflow: hidden;

    background: #fff;
}

.idea-visual {

    display: flex;

    justify-content: center;
}

/*======================================================
                    BLUE BACKGROUND
======================================================*/

.idea-bg {

    position: relative;

    width: 520px;

    height: 510px;

    background: #DCEBFF;

    border-radius: 28px;

    overflow: visible;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/*======================================================
                    TOP CARD
======================================================*/

.top-card {

    position: absolute;

    left: 24px;

    top: 18px;

    width: 250px;

    height: 135px;

    background: #F8FBFF;

    border-radius: 14px;

    box-shadow:
        0 24px 45px rgba(34, 57, 94, .10);

    transform: rotate(-1deg);

    padding: 20px;
}

.top-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 30px;
}

/* assistant */

.assistant-icon {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: #4678F6;

    position: relative;

    flex-shrink: 0;
}

.assistant-icon span {

    position: absolute;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #fff;
}

.assistant-icon span:nth-child(1) {

    left: 6px;

    top: 6px;
}

.assistant-icon span:nth-child(2) {

    right: 6px;

    top: 6px;
}

.assistant-icon span:nth-child(3) {

    left: 6px;

    bottom: 6px;
}

.assistant-icon span:nth-child(4) {

    right: 6px;

    bottom: 6px;
}

/* dots */

.header-dots {

    display: flex;

    gap: 6px;
}

.header-dots span {

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #D6DFEE;
}

/* lines */

.small-line {

    border-radius: 30px;

    background: #E7EDF7;
}

.small-line.lg {

    width: 120px;

    height: 7px;

    margin-bottom: 16px;
}

.small-line.md {

    width: 90px;

    height: 6px;
}

/*======================================================
                MAIN CARD
======================================================*/

.wizard-card {

    position: absolute;

    left: 55px;

    top: 120px;

    width: 360px;

    height: 155px;

    background: #FDFEFF;

    border-radius: 16px;

    box-shadow:
        0 24px 45px rgba(34, 57, 94, .12);

    display: flex;

    padding: 22px;

    gap: 24px;
}

/*======================================================
                LEFT SIDE
======================================================*/

.wizard-left {

    width: 110px;
}

.check-box {

    width: 10px;

    height: 10px;

    border-radius: 3px;

    border: 2px solid #D4DFEE;

    margin-bottom: 20px;
}

.slider {

    width: 82px;

    height: 4px;

    border-radius: 30px;

    background: #3D73F8;

    position: relative;

    margin-bottom: 18px;
}

.slider-dot {

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #4A7AF8;


    box-shadow:
        0 0 0 4px rgba(74, 122, 248, .15);
}

/*======================================================
                RIGHT SIDE
======================================================*/

.wizard-right {

    flex: 1;
}

/* success */

.success-card {

    height: 28px;

    border-radius: 8px;

    background: #EDFFF2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 12px;

    margin-bottom: 18px;
}

.success-line {

    width: 80px;

    height: 6px;

    border-radius: 30px;

    background: #A8EAB9;
}

.success-check {

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: #4BD16C;

    position: relative;
}

.success-check::before {

    content: "✓";

    position: absolute;

    color: #fff;

    font-size: 10px;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -52%);
}

/* description */

.description-card {

    display: flex;

    flex-direction: column;

    gap: 9px;
}

.description-card span {

    display: block;

    height: 6px;

    border-radius: 30px;

    background: #E9EEF7;
}

.description-card span:nth-child(1) {

    width: 130px;
}

.description-card span:nth-child(2) {

    width: 155px;
}

.description-card span:nth-child(3) {

    width: 120px;
}

/*======================================================
                    COURSE CARD
======================================================*/

.course-card {

    position: absolute;

    left: 78px;
    bottom: 28px;

    width: 395px;
    height: 150px;

    background: #FDFEFF;

    border-radius: 16px;

    display: flex;

    align-items: center;

    padding: 20px;

    gap: 22px;

    box-shadow:
        0 28px 55px rgba(36, 57, 96, .14);

    z-index: 5;
}

/*======================================================
                    COVER
======================================================*/

.course-cover {

    width: 82px;
    height: 82px;

    position: relative;

    flex-shrink: 0;
}

/* الكتاب */

.cover-shape.one {

    position: absolute;

    width: 56px;
    height: 34px;

    background: #C8D8F7;

    border-radius: 6px;

    left: 14px;
    top: 24px;

    transform: rotate(18deg);
}

/* الورقة */

.cover-shape.two {

    position: absolute;

    width: 24px;
    height: 32px;

    background: #FFF5C8;

    border-radius: 4px;

    left: 10px;
    top: 16px;

    transform: rotate(38deg);

    box-shadow:
        0 4px 8px rgba(0, 0, 0, .05);
}

.cover-shape.two::after {

    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #9ED0FF;

    left: 7px;
    top: 11px;
}

/*======================================================
                    INFO
======================================================*/

.course-info {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 11px;
}

/* الأسود */
.title-line.first {

    width: 170px;
}

.blue-line.first {

    width: 190px;
}

.title-line.second {

    width: 175px;
}

.blue-line.second {

    width: 155px;
}

.title-line.third {

    width: 120px;
}

.blue-line.third {

    width: 92px;
}

/*======================================================
                    BUTTON
======================================================*/

.course-button {

    position: absolute;

    right: 18px;
    bottom: 18px;

    width: 36px;
    height: 12px;

    border-radius: 30px;

    background: #5A82F7;
}


/*======================================================
                BACKGROUND POLISH
======================================================*/

.idea-bg {

    background:
        radial-gradient(circle at top right,
            rgba(255, 255, 255, .35),
            transparent 45%),

        linear-gradient(180deg,
            #DDEBFF 0%,
            #D7E7FD 100%);
}

.idea-bg::before {

    content: "";

    position: absolute;

    inset: 18px;

    border-radius: 22px;

    border: 1px solid rgba(255, 255, 255, .35);
}

.idea-bg::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    right: -70px;
    top: -70px;

    background:
        radial-gradient(circle,
            rgba(255, 255, 255, .22),
            transparent);
}

/*======================================================
                TOP CARD
======================================================*/

.top-card {

    border: 1px solid #EDF3FA;

    backdrop-filter: blur(8px);

    z-index: 4;
}

.top-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 14px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .55),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

/*======================================================
                WIZARD
======================================================*/

.wizard-card {

    border: 1px solid #EEF3FA;

    z-index: 5;
}

.wizard-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 16px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .45),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

.slider {

    height: 5px;
}

.slider-dot {

    transition: .3s;
}

.slider-dot:hover {

    transform: scale(1.15);
}

/*======================================================
                SUCCESS
======================================================*/

.success-card {

    border: 1px solid #DDF7E5;
}

.success-check {

    box-shadow:
        0 0 0 5px rgba(77, 209, 108, .12);
}

/*======================================================
                COURSE
======================================================*/

.course-card {

    border: 1px solid #EEF3FA;

    backdrop-filter: blur(8px);
}

.course-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 16px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .5),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

/*======================================================
                COVER
======================================================*/

.course-cover {

    background:
        radial-gradient(circle,
            rgba(110, 163, 255, .18),
            transparent);

    border-radius: 12px;
}

/*======================================================
                LINES
======================================================*/

.title-line {

    background: #25314A;
}

.blue-line {

    background: #4678F6;
}

/*======================================================
                BUTTON
======================================================*/

.course-button {

    height: 14px;

    background:
        linear-gradient(180deg,
            #5A87FF,
            #356CF6);

    box-shadow:
        0 8px 18px rgba(53, 108, 246, .22);
}

/*======================================================
                FLOAT EFFECT
======================================================*/

.top-card {

    animation: floatOne 5s ease-in-out infinite;
}

.wizard-card {

    animation: floatTwo 6s ease-in-out infinite;
}

.course-card {

    animation: floatThree 5.5s ease-in-out infinite;
}

@keyframes floatOne {

    0%,
    100% {

        transform: rotate(-1deg) translateY(0);
    }

    50% {

        transform: rotate(-1deg) translateY(-8px);
    }
}

@keyframes floatTwo {

    0%,
    100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-6px);
    }
}

@keyframes floatThree {

    0%,
    100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-10px);
    }
}

/*======================================================
                RESPONSIVE
======================================================*/

@media(max-width:992px) {

    .idea-bg {

        width: 100%;
        max-width: 500px;
        height: 500px;

        margin: auto;
    }

    .wizard-card {

        width: 75%;
    }

    .course-card {

        width: 80%;
    }

}

@media(max-width:768px) {

    .idea-bg {

        height: 430px;
    }

    .top-card {

        width: 200px;
    }

    .wizard-card {

        left: 30px;

        width: 300px;
    }

    .course-card {

        left: 35px;

        width: 320px;

        gap: 14px;
    }

}

/*======================================================
        FROM IDEA TO COURSE - REFINED REFERENCE
======================================================*/

.idea-course-section {
    padding: 112px 0;
}

.idea-course-section .row {
    min-height: 430px;
}

.idea-content {
    max-width: 520px;
}

.idea-course-section .section-badge {
    min-height: 25px;
    margin-bottom: 26px;
    padding: 0 17px;
    color: #1458d9;
    background: #edf5ff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.idea-course-section .section-description {
    max-width: 500px;
    margin-top: 24px;
    color: #68758a;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.82;
}

.idea-course-section .section-actions {
    gap: 12px !important;
    margin-top: 31px !important;
}

.idea-course-section .btn-primary,
.idea-course-section .btn-secondary {
    min-width: 161px;
    min-height: 55px;
    padding: 0 28px;
    border-radius: 999px;
    
    font-size: 0.91rem;
    font-weight: 700;
}

.idea-course-section .btn-primary {
    color: #ffffff;
    background: #1458d9;
    border-color: #1458d9;
    box-shadow: 0 14px 28px rgba(20, 88, 217, 0.2);
}

.idea-course-section .btn-primary:hover {
    background: #0f49bd;
    border-color: #0f49bd;
}

.idea-course-section .btn-secondary {
    color: #1458d9;
    background: #ffffff;
    border-color: #c9dcff;
    box-shadow: none;
}

.idea-course-section .btn-secondary:hover {
    color: #0f49bd;
    background: #edf5ff;
}

.idea-course-section .idea-visual {
    position: relative;
    width: 100%;
    min-height: 470px;
    align-items: center;
}

.idea-course-section .idea-bg {
    width: 100%;
    height: clamp(430px, 39vw, 500px);
    border-radius: 24px;
    background: #cae2fb;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.idea-course-section .idea-bg::before,
.idea-course-section .idea-bg::after {
    display: none;
}

.idea-course-section .top-card,
.idea-course-section .wizard-card,
.idea-course-section .course-card {
    animation: none;
    border: 1px solid rgba(232, 240, 250, 0.88);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.idea-course-section .top-card {
    left: 5%;
    top: 4%;
    width: 48%;
    height: 30%;
    padding: 22px 20px;
    border-radius: 13px;
    box-shadow: 0 18px 42px rgba(23, 50, 94, 0.08);
    transform: rotate(-1.5deg);
    z-index: 1;
}

.idea-course-section .top-card::before,
.idea-course-section .wizard-card::before,
.idea-course-section .course-card::before {
    display: none;
}

.idea-course-section .top-header {
    gap: 13px;
    margin-bottom: 26px;
}

.idea-course-section .assistant-icon {
    width: 29px;
    height: 29px;
    background: #3f7cf6;
    box-shadow: 0 8px 16px rgba(70, 120, 246, 0.2);
}

.idea-course-section .assistant-icon span {
    width: 6px;
    height: 6px;
    background: #ffffff;
    clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
}

.idea-course-section .assistant-icon span:nth-child(1) {
    left: 7px;
    top: 7px;
}

.idea-course-section .assistant-icon span:nth-child(2) {
    right: 7px;
    top: 7px;
}

.idea-course-section .assistant-icon span:nth-child(3) {
    left: 7px;
    bottom: 7px;
}

.idea-course-section .assistant-icon span:nth-child(4) {
    right: 7px;
    bottom: 7px;
}

.idea-course-section .header-dots span {
    width: 16px;
    height: 16px;
    background: #d8e0eb;
}

.idea-course-section .small-line.lg {
    width: 38%;
    height: 7px;
    margin-left: 24%;
    margin-bottom: 12px;
    background: rgba(237, 243, 250, 0.58);
}

.idea-course-section .small-line.md {
    width: 28%;
    height: 6px;
    margin-left: 24%;
    background: rgba(231, 238, 248, 0.56);
}

.idea-top-slider {
    position: absolute;
    left: 49%;
    top: 62%;
    width: 2px;
    height: 47px;
    border-radius: 999px;
    background: rgba(230, 239, 248, 0.75);
}

.idea-course-section .wizard-card {
    left: 12%;
    top: 25%;
    width: 76%;
    height: 36%;
    display: flex;
    gap: 6%;
    padding: 24px 25px 22px;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(23, 50, 94, 0.1);
    transform: none;
    z-index: 2;
}

.idea-course-section .wizard-left {
    width: 31%;
    padding-top: 7px;
}

.idea-course-section .check-box {
    width: 10px;
    height: 10px;
    margin-bottom: 17px;
    border: 2px solid #d8e4f1;
    border-radius: 3px;
}

.idea-course-section .slider {
    width: 84%;
    height: 4px;
    margin-bottom: 17px;
    background: #2f75ff;
}

.idea-course-section .slider-dot {
    width: 13px;
    height: 13px;
    margin-left: 66%;
    margin-top: -25px;
    background: #ffffff;
    border: 3px solid #2f75ff;
    box-shadow: 0 0 0 4px rgba(70, 120, 246, 0.14);
}

.idea-slider-track {
    width: 96%;
    height: 4px;
    margin-top: 14px;
    border-radius: 999px;
    background: #dbe8fb;
}

.idea-course-section .wizard-right {
    flex: 1;
}

.idea-course-section .success-card {
    height: 28px;
    margin-bottom: 17px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: #f2fff6;
}

.idea-course-section .success-line {
    width: 35%;
    height: 7px;
    background: #aef1c4;
}

.idea-course-section .success-check {
    width: 16px;
    height: 16px;
    background: transparent;
    box-shadow: none;
}

.idea-course-section .success-check::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #53ce74;
    border-bottom: 2px solid #53ce74;
    transform: rotate(45deg);
}

.idea-course-section .description-card {
    gap: 9px;
}

.idea-course-section .description-card span {
    height: 7px;
    background: #edf2f7;
}

.idea-course-section .description-card span:nth-child(1) {
    width: 88%;
}

.idea-course-section .description-card span:nth-child(2) {
    width: 94%;
}

.idea-course-section .description-card span:nth-child(3) {
    width: 72%;
}

.idea-course-section .course-card {
    left: 20%;
    bottom: 6%;
    width: 76%;
    height: 31%;
    gap: 22px;
    padding: 22px 20px;
    border-radius: 10px;
    box-shadow: 0 24px 52px rgba(23, 50, 94, 0.12);
    transform: none;
    z-index: 3;
}

.idea-course-section .course-cover {
    width: 88px;
    height: 88px;
    display: block;
    background: radial-gradient(circle, rgba(110, 163, 255, 0.18), transparent 68%);
    flex: 0 0 88px;
}

.idea-course-section .cover-shape.one {
    width: 48px;
    height: 31px;
    left: 30px;
    top: 35px;
    border-radius: 4px;
    background: #c8d8f7;
    transform: rotate(17deg);
}

.idea-course-section .cover-shape.two {
    width: 25px;
    height: 35px;
    left: 16px;
    top: 27px;
    border-radius: 5px;
    background: #fff6ca;
    transform: rotate(38deg);
}

.idea-course-section .cover-shape.two::after {
    width: 11px;
    height: 11px;
    left: 7px;
    top: 12px;
    background: #9ed0ff;
}

.idea-course-section .course-info {
    gap: 9px;
    padding-top: 1px;
    min-width: 0;
    flex: 1;
}

.idea-course-section .title-line,
.idea-course-section .blue-line {
    display: block;
    height: 7px;
    border-radius: 999px;
}

.idea-course-section .title-line {
    background: #1d2b44;
}

.idea-course-section .blue-line {
    background: #2f75ff;
}

.idea-course-section .title-line.first {
    width: 96%;
}

.idea-course-section .blue-line.first {
    width: 100%;
}

.idea-course-section .title-line.second {
    width: 99%;
}

.idea-course-section .blue-line.second {
    width: 91%;
}

.idea-course-section .title-line.third {
    width: 58%;
}

.idea-course-section .blue-line.third {
    width: 50%;
}

.idea-course-section .course-button {
    right: 18px;
    bottom: 17px;
    width: 45px;
    height: 16px;
    border-radius: 999px;
    background: #5a87ff;
    box-shadow: 0 8px 18px rgba(53, 108, 246, 0.22);
}

@media (max-width: 991px) {
    .idea-course-section .row {
        min-height: auto;
    }

    .idea-content {
        max-width: 620px;
        margin-inline: auto;

    }

    .idea-course-section .section-description {
        max-width: 610px;
    }
}

@media (max-width: 600px) {
    .idea-course-section .idea-visual {
        min-height: 330px;
    }

    .idea-course-section .idea-bg {
        position: absolute;
        left: 50%;
        width: 505px;
        height: 410px;
        transform: translateX(-50%) scale(0.72);
        transform-origin: top center;
    }

    .idea-course-section .section__title {
        font-size: 2.5rem;
    }
}


/*==================================================
                    SECTION
==================================================*/

.ai-wizard-section {

    padding: 120px 0;

    overflow: hidden;

    background: #fff;
}

.wizard-visual {

    display: flex;

    justify-content: center;
}

/*==================================================
                BLUE BACKGROUND
==================================================*/

.wizard-bg {

    position: relative;

    width: 560px;

    height: 470px;

    border-radius: 26px;

    background:
        linear-gradient(180deg, #B9D7E3 0%, #B6D4E0 100%);

    overflow: visible;
}

.wizard-bg::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 26px;

    background:
        radial-gradient(circle at top right,
            rgba(255, 255, 255, .28),
            transparent 45%);
}

/*==================================================
                MAIN WINDOW
==================================================*/

.browser-window {

    position: absolute;

    left: 34px;

    top: 70px;

    width: 390px;

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 25px 55px rgba(39, 57, 91, .15);
}

/*==================================================
                HEADER
==================================================*/

.browser-header {

    height: 48px;

    background: #FBFDFF;

    border-bottom: 1px solid #EEF4F8;

    display: flex;

    align-items: center;

    padding: 0 18px;
}

.browser-dots {

    display: flex;

    gap: 7px;
}

.browser-dots span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #D5DFE9;
}

/*==================================================
                BODY
==================================================*/

.browser-body {

    display: flex;

    gap: 24px;

    padding: 26px;
}

/*==================================================
                LEFT SIDE
==================================================*/

.browser-left {

    width: 160px;
}

.placeholder {

    height: 6px;

    border-radius: 20px;

    background: #C7E4E5;

    margin-bottom: 14px;
}

.placeholder.lg {

    width: 120px;
}

.placeholder.md {

    width: 90px;
}

.placeholder.sm {

    width: 70px;
}

.placeholder.xs {

    width: 105px;
}

/*==================================================
                RIGHT SIDE
==================================================*/

.browser-right {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 20px;
}

.mini-card {

    height: 78px;

    border-radius: 12px;

    background: #FCFEFF;

    border: 1px solid #EEF4F8;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px;
}

/*==================================================
                LOCK
==================================================*/

.lock-icon {

    width: 42px;

    height: 42px;

    border-radius: 8px;

    background: #EEF2F7;

    position: relative;

    flex-shrink: 0;
}

.lock-icon::before {

    content: "";

    position: absolute;

    width: 14px;

    height: 12px;

    border: 2px solid #FFFFFF;

    border-radius: 3px;

    left: 50%;

    top: 52%;

    transform: translate(-50%, -40%);
}

.lock-icon::after {

    content: "";

    position: absolute;

    width: 10px;

    height: 8px;

    border: 2px solid #FFFFFF;

    border-bottom: none;

    border-radius: 8px 8px 0 0;

    left: 50%;

    top: 10px;

    transform: translateX(-50%);
}

/*==================================================
            MINI LINES
==================================================*/

.mini-lines {

    flex: 1;
}

.mini-lines span {

    display: block;

    height: 7px;

    border-radius: 30px;

    background: #E7EEF5;
}

.mini-lines span:first-child {

    width: 78px;

    margin-bottom: 12px;
}

.mini-lines span:last-child {

    width: 48px;
}

/*==================================================
                TOP FLOATING CARD
==================================================*/

.top-floating-card {

    position: absolute;
    top: 18px;
    right: 18px;
    width: 190px;
    background: #FDFEFF;
    border-radius: 16px;
    padding: 16px;
    box-shadow:
        0 25px 45px rgba(34, 58, 94, .12);
    z-index: 15;
}

.floating-header {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    margin-bottom: 18px;
}

/*================ ICON ================*/

.floating-icon {

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #61D8C5;

    position: relative;

    flex-shrink: 0;
}

.floating-icon::before {

    content: "";

    position: absolute;

    inset: 5px;

    border-radius: 50%;

    border: 2px solid #ffffff;
}

.floating-lines {

    flex: 1;
}

.floating-lines span {

    display: block;

    height: 6px;

    border-radius: 20px;

    background: #E7EEF5;
}

.floating-lines span:first-child {

    width: 85px;

    margin-bottom: 8px;
}

.floating-lines span:last-child {

    width: 55px;
}

/*================ BOXES ================*/

.floating-boxes {

    display: flex;

    gap: 10px;

    margin-bottom: 18px;
}

.floating-boxes div {

    flex: 1;

    height: 28px;

    border-radius: 8px;

    background: #F6FAFD;

    border: 1px solid #EDF3F8;
}

/*================ PROGRESS ================*/

.progress-line {

    width: 100%;

    height: 6px;

    border-radius: 20px;

    background: #EAF2F5;

    overflow: hidden;
}

.progress-line span {

    display: block;

    width: 62%;

    height: 100%;

    border-radius: 20px;

    background: #16A79A;
}

/*==================================================
                FRONT CARD
==================================================*/

.front-card {

    position: absolute;

    right: 0;
    bottom: 44px;

    width: 275px;
    height: 170px;

    background: #FFFFFF;

    border-radius: 16px;

    padding: 20px;

    box-shadow:
        0 28px 55px rgba(35, 58, 94, .18);

    z-index: 20;
}

/*================ TITLE ================*/

.front-title {

    width: 145px;

    height: 8px;

    border-radius: 20px;

    background: #87D5CC;

    margin-bottom: 18px;
}

/*================ LINES ================*/

.front-line {

    height: 6px;

    border-radius: 20px;

    background: #E7EEF5;

    margin-bottom: 10px;
}

.front-line {

    width: 175px;
}

.front-line.short {

    width: 95px;

    margin-bottom: 22px;
}

/*================ CHECK LIST ================*/

.check-list {

    display: flex;

    flex-direction: column;

    gap: 14px;
}

.check-item {

    display: flex;

    align-items: center;

    gap: 12px;
}

.check-icon {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    border: 2px solid #38C878;

    position: relative;

    flex-shrink: 0;
}

.check-icon::before {

    content: "✓";

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -58%);

    font-size: 8px;

    color: #38C878;

    font-weight: 700;
}

.check-text {

    width: 165px;

    height: 6px;

    border-radius: 20px;

    background: #E6EDF5;
}

.check-item:nth-child(2) .check-text {

    width: 150px;
}

.check-item:nth-child(3) .check-text {

    width: 138px;
}



/*==================================================
                    SECTION
==================================================*/

.lesson-generation-section {

    padding: 120px 0;

    overflow: hidden;

    background: #ffffff;
}

.lesson-visual {

    display: flex;

    justify-content: center;
}

/*==================================================
                BACKGROUND
==================================================*/

.lesson-bg {

    position: relative;

    width: 560px;

    height: 520px;

    border-radius: 26px;

    background:
        linear-gradient(180deg, #FCEED8 0%, #FAE8C8 100%);

    overflow: visible;
}

.lesson-bg::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 26px;

    background:
        radial-gradient(circle at top left,
            rgba(255, 255, 255, .35),
            transparent 45%);
}

/*==================================================
                TOP CARD
==================================================*/

.toolbar-card {

    position: absolute;

    top: 18px;

    left: 42px;

    width: 390px;

    height: 62px;

    background: #fff;

    border-radius: 14px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 18px;

    box-shadow:
        0 20px 40px rgba(96, 71, 28, .10);
}

/*==================================================
            TOOLBAR LEFT
==================================================*/

.toolbar-left {

    display: flex;

    flex-direction: column;

    gap: 7px;
}

.toolbar-left span {

    display: block;

    height: 5px;

    border-radius: 20px;

    background: #9C7A46;
}

.toolbar-left span:nth-child(1) {

    width: 140px;
}

.toolbar-left span:nth-child(2) {

    width: 95px;
}

.toolbar-left span:nth-child(3) {

    width: 165px;
}

/*==================================================
            TOOLBAR RIGHT
==================================================*/

.toolbar-btn {

    width: 42px;

    height: 22px;

    border-radius: 20px;

    background: #A07A43;

    position: relative;
}

.toolbar-btn::before {

    content: "";

    position: absolute;

    right: 5px;

    top: 50%;

    transform: translateY(-50%);

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #EED7AE;
}

/*==================================================
                EDITOR
==================================================*/

.editor-card {

    position: absolute;

    left: 42px;

    top: 105px;

    width: 430px;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 30px 55px rgba(86, 63, 26, .18);
}

/*==================================================
                HEADER
==================================================*/

.editor-header {

    height: 42px;

    background: #FBFCFE;

    border-bottom: 1px solid #EEF2F7;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 14px;
}

/*==================================================
            HEADER DOTS
==================================================*/

.editor-dots {

    display: flex;

    gap: 6px;
}

.editor-dots span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #D6DDE8;
}

/*==================================================
            HEADER ACTIONS
==================================================*/

.editor-actions {

    display: flex;

    align-items: center;

    gap: 10px;
}

.editor-actions span {

    width: 12px;

    height: 12px;

    border-radius: 3px;

    background: #DCE3EF;
}

.close-box {

    width: 13px;

    height: 13px;

    border: 1.5px solid #D89A3F;

    border-radius: 2px;
}

/*==================================================
                BODY
==================================================*/

.editor-body {

    padding: 28px 22px 30px;
}

/*==================================================
            TITLE
==================================================*/

.title-line {

    width: 82px;

    height: 14px;

    border-radius: 3px;

    background: #94672B;

    margin-bottom: 18px;
}

/*==================================================
            SUB TITLE
==================================================*/

.sub-title {

    width: 62px;

    height: 14px;

    border-radius: 3px;

    background: #94672B;

    margin-top: 22px;

    margin-bottom: 18px;
}

/*==================================================
            PARAGRAPH
==================================================*/

.paragraph {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.paragraph span {

    display: block;

    height: 6px;

    border-radius: 30px;

    background: #97A6BE;
}

.paragraph span:nth-child(1) {

    width: 285px;
}

.paragraph span:nth-child(2) {

    width: 262px;
}

.paragraph span:nth-child(3) {

    width: 245px;
}

/*==================================================
            FLOATING TOOL CARD
==================================================*/

.floating-editor-card {

    position: absolute;

    right: 48px;

    bottom: 42px;

    width: 118px;

    height: 54px;

    background: #FFFFFF;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 14px;

    box-shadow:
        0 18px 35px rgba(93, 68, 25, .18);

    z-index: 20;
}

.floating-editor-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 12px;

    background:

        linear-gradient(180deg,
            rgba(255, 255, 255, .55),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

/*==================================================
                PEN ICON
==================================================*/

.pen-icon {

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #8E96A7;

    font-size: 14px;
}

/*==================================================
                SLIDER
==================================================*/

.slider-line {

    position: relative;

    flex: 1;

    height: 4px;

    margin-left: 12px;

    background: #8E6933;

    border-radius: 20px;
}

.slider-line span {

    position: absolute;

    left: 45%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #FFFFFF;

    border: 2px solid #8E6933;

    box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}

/*==================================================
            EDITOR POLISH
==================================================*/

.editor-card {

    border: 1px solid #F2F2F2;

    box-shadow:
        0 28px 60px rgba(92, 67, 27, .16);
}

.editor-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 18px;

    background:

        linear-gradient(180deg,
            rgba(255, 255, 255, .35),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

/*==================================================
            HEADER POLISH
==================================================*/

.editor-header {

    background:
        linear-gradient(180deg,
            #FFFFFF,
            #FBFCFE);
}

.editor-actions span {

    background: #DDE4EF;
}

/*==================================================
            TITLE BLOCKS
==================================================*/

.title-line,
.sub-title {

    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, .15);
}

/*==================================================
            PARAGRAPHS
==================================================*/

.paragraph span {

    background: #9AA9C1;
}

.paragraph span:nth-child(1) {

    width: 300px;
}

.paragraph span:nth-child(2) {

    width: 285px;
}

.paragraph span:nth-child(3) {

    width: 250px;
}

/*==================================================
            TOOLBAR POLISH
==================================================*/

.toolbar-card {

    border: 1px solid rgba(255, 255, 255, .65);

    box-shadow:
        0 22px 48px rgba(93, 68, 25, .10);
}

.toolbar-left span {

    opacity: .95;
}

/*==================================================
            BACKGROUND GLOW
==================================================*/

.lesson-bg::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 26px;

    background:

        radial-gradient(circle at bottom right,
            rgba(255, 255, 255, .18),
            transparent 48%);

    pointer-events: none;
}

/*==================================================
            FLOAT EFFECT
==================================================*/

.toolbar-card {

    animation: toolbarFloat 6s ease-in-out infinite;
}

.floating-editor-card {

    animation: toolFloat 5s ease-in-out infinite;
}

@keyframes toolbarFloat {

    0%,
    100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-6px);
    }

}

@keyframes toolFloat {

    0%,
    100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-8px);
    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media (max-width:992px) {

    .lesson-bg {

        width: 100%;

        max-width: 560px;

        margin: auto;
    }

    .editor-card {

        width: 82%;

        left: 9%;
    }

    .toolbar-card {

        width: 72%;

        left: 9%;
    }

}

@media (max-width:768px) {

    .lesson-bg {

        height: 470px;
    }

    .toolbar-card {

        height: 56px;
    }

    .floating-editor-card {

        right: 18px;

        bottom: 26px;
    }

}

/* ==========================================================================
   Learmo AI hero responsive stabilization
   ========================================================================== */
.ai-page-body .ai-hero [data-aos] {
    animation-fill-mode: forwards;
}

@media (max-width: 991.98px) {

    .ai-page-body .ai-hero__swiper .creative-anim,
    .ai-page-body .ai-hero__swiper .creative-anim::before,
    .ai-page-body .ai-hero__swiper .creative-anim::after {
        animation: none !important;
        transition: opacity 0.25s ease;
    }

    .ai-page-body .ai-hero {
        min-height: auto;
        padding: 88px 0 60px;
        overflow: clip;
    }

    .ai-page-body .ai-hero__container {
        width: 100%;
        max-width: 760px;
        padding-inline: clamp(20px, 5vw, 40px);
    }

    .ai-page-body .ai-hero__swiper {
        max-width: 100%;
        overflow: visible !important;
    }

    .ai-page-body .ai-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
        width: 100%;
        max-width: 680px;
    }

    .ai-page-body .ai-hero__grid--split-swiper {
        margin-inline: auto;
    }

    .ai-page-body .ai-hero__swiper-col {
        width: 100%;
        max-width: 680px;
        margin-inline: auto;
        overflow: visible !important;
    }

    .ai-page-body .ai-hero__copy {
        width: 100%;
        max-width: 620px;
        margin-inline: auto;
        text-align: center;
    }

    .ai-page-body .ai-hero__copy h1 {
        font-size: clamp(2.45rem, 7vw, 3.35rem);
        text-wrap: balance;
    }

    .ai-page-body .ai-hero__copy p {
        max-width: 570px;
        margin-inline: auto;
    }

    .ai-page-body .ai-hero__actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .ai-page-body .ai-hero__visual {
        width: min(100%, 620px);
        height: clamp(430px, 72vw, 560px);
        margin-inline: auto;
    }

    .ai-page-body .ai-hero__visual:not([data-aos]) {
        transform: none;
    }

    .ai-page-body .ai-hero__visual .visual-frame {
        width: min(82%, 500px);
        max-width: 100%;
    }

    .ai-page-body .ai-hero .card-ideation {
        top: 24px;
        left: 3%;
        width: min(43%, 260px);
    }

    .ai-page-body .ai-hero .card-outline {
        top: 92px;
        right: 2%;
        width: min(46%, 280px);
    }

    .ai-page-body .ai-hero .card-crafting {
        bottom: 30% !important;
        left: 20%;
        width: min(56%, 320px);
    }

    .ai-page-body .ai-hero .processing-overlay-v2 {
        bottom: 27% !important;
        left: 2%;
        width: min(46%, 280px);
    }

    .ai-page-body .ai-hero .ai-bubble-notif {
        left: 1%;
    }

    .ai-page-body .ai-hero .hero-circle {
        top: 5%;
        left: -30px;
        opacity: 0.45;
        transform: scale(0.75);
        transform-origin: left top;
    }
}

@media (max-width: 600px) {
    .ai-page-body .ai-hero {
        padding: 72px 0 44px;
    }

    .ai-page-body .ai-hero__container {
        padding-inline: 16px;
    }

    .ai-page-body .ai-hero__grid {
        gap: 32px;
    }

    .ai-page-body .ai-hero__copy h1 {
        font-size: clamp(2rem, 10.5vw, 2.7rem);
        line-height: 1.08;
        margin-bottom: 18px;
    }

    .ai-page-body .ai-hero__copy p {
        font-size: 0.96rem;
        line-height: 1.6;
        margin-bottom: 26px;
    }

    .ai-page-body .ai-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
    }

    .ai-page-body .ai-hero__actions a {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        padding: 12px 20px;
    }

    .ai-page-body .ai-hero__visual {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 14px;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .ai-page-body .ai-hero__visual .visual-frame {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 260px;
        max-width: none;
        margin: 0;
        padding: clamp(24px, 8vw, 42px);
        overflow: hidden;
    }

    .ai-page-body .ai-hero__visual .visual-frame--ai-dashboard {
        min-height: 430px;
    }

    .ai-page-body .ai-hero__visual .ai-card {
        position: relative;
        inset: auto !important;
        width: 100% !important;
        max-width: none;
        margin: 0;
        padding: 20px;
        transform: none !important;
        border-width: 2px;
        border-radius: 18px;
    }

    .ai-page-body .ai-hero__visual .status-pills-container {
        right: 16px;
        max-width: calc(100% - 32px);
    }

    .ai-page-body .ai-hero__visual .ai-bubble-notif,
    .ai-page-body .ai-hero__visual .ai-bubble-left,
    .ai-page-body .ai-hero__visual .wrapper,
    .ai-page-body .ai-hero .hero-circle,
    .ai-page-body .ai-hero .learmo-shape {
        display: none;
    }

    .ai-page-body .ai-hero .swiper-slide {
        height: auto;
    }
}

@media (max-width: 380px) {
    .ai-page-body .ai-hero__copy h1 {
        font-size: 1.9rem;
    }

    .ai-page-body .ai-hero__visual .visual-frame {
        min-height: 230px;
        padding: 22px 16px;
    }
}

@media (max-width: 991.98px) {

    .ai-page-body .ai-hero__swiper,
    .ai-page-body .ai-hero__swiper .swiper-wrapper,
    .ai-page-body .ai-hero__swiper .swiper-slide,
    .ai-page-body .ai-hero__swiper .ai-hero__visual {
        overflow: visible !important;
    }

    .ai-page-body .ai-hero__swiper .card-ideation,
    .ai-page-body .ai-hero__swiper .card-outline,
    .ai-page-body .ai-hero__swiper .card-crafting,
    .ai-page-body .ai-hero__swiper .card-crafting::after,
    .ai-page-body .ai-hero__swiper .processing-overlay-v2,
    .ai-page-body .ai-hero__swiper .ai-bubble-notif,
    .ai-page-body .ai-hero__swiper .sales-page-bubble,
    .ai-page-body .ai-hero__swiper .blog-articles-bubble,
    .ai-page-body .ai-hero__swiper .success-growth-card,
    .ai-page-body .ai-hero__swiper .growth-card {
        animation: none !important;
    }

    .ai-page-body .ai-hero__swiper .swiper-slide {
        position: relative !important;
        height: 620px !important;
    }

    .ai-page-body .ai-hero__swiper .ai-slide--stage1 {
        height: 570px !important;
    }

    .ai-page-body .ai-hero__swiper .ai-slide--stage2 {
        height: 570px !important;
    }

    .ai-page-body .ai-hero__swiper .ai-slide--stage3 {
        height: 640px !important;
    }

    .ai-page-body .ai-hero__visual {
        display: block !important;
        position: relative !important;
        width: min(100%, 600px);
        height: 100% !important;
        min-height: 0 !important;
        margin-inline: auto;
    }

    .ai-page-body .ai-hero__visual .visual-frame,
    .ai-page-body .ai-hero__visual .ai-card,
    .ai-page-body .ai-hero__visual .ai-bubble-notif,
    .ai-page-body .ai-hero__visual .ai-bubble-left,
    .ai-page-body .ai-hero__visual .status-pills-container,
    .ai-page-body .ai-hero__visual .wrapper {
        position: absolute !important;
        margin: 0;
        max-width: none;
    }

    .ai-page-body .ai-hero__visual .wrapper {
        display: block !important;
        top: 64px;
        left: 50%;
        right: auto;
        width: min(86%, 520px);
        height: 500px;
        transform: translateX(-50%);
    }

    .ai-page-body .ai-hero__visual .ai-bubble-notif,
    .ai-page-body .ai-hero__visual .ai-bubble-left {
        display: flex !important;
    }

    .ai-page-body .ai-hero__visual .visual-frame--ai-main {
        top: 92px;
        left: 50%;
        width: min(82%, 500px);
        height: 330px;
        min-height: 0;
        transform: translateX(-50%);
    }

    .ai-page-body .ai-hero .card-ideation {
        top: 36px;
        left: 8%;
        right: auto;
        bottom: auto;
        width: min(38vw, 252px) !important;
        height: auto;
        transform: rotate(-3deg) scale(0.94) !important;
        transform-origin: top left;
    }

    .ai-page-body .ai-hero .card-outline {
        top: 124px;
        right: 7%;
        left: auto;
        bottom: auto;
        width: min(40vw, 272px) !important;
        height: auto;
        transform: rotate(2deg) scale(0.94) !important;
        transform-origin: top right;
    }

    .ai-page-body .ai-hero .card-crafting {
        top: auto;
        right: auto;
        bottom: 30% !important;
        left: 12%;
        width: min(48vw, 312px) !important;
        height: auto;
        transform: rotate(5deg) scale(0.94) !important;
        transform-origin: bottom left;
    }

    .ai-page-body .ai-hero__visual .visual-frame--ai-editor {
        top: 84px;
        left: 50%;
        width: min(82%, 500px);
        height: 340px;
        min-height: 0;
        transform: translateX(-50%);
    }

    .ai-page-body .ai-hero .dashed-line {
        top: 17px;
        right: 0;
        left: auto;
        width: auto;
        height: auto;
        transform: none;
    }

    .ai-page-body .ai-hero .processing-overlay-v2 {
        top: auto;
        right: auto;
        bottom: 27% !important;
        left: 8%;
        width: min(40vw, 270px) !important;
        height: auto;
        transform: scale(0.92) !important;
        transform-origin: bottom left;
    }

    .ai-page-body .ai-hero .ai-bubble-notif {
        top: 48px;
        right: auto;
        bottom: auto;
        left: 6%;
        width: auto;
        height: auto;
        transform: rotate(-10deg) scale(0.9) !important;
        transform-origin: top left;
    }

    .ai-page-body .ai-hero__visual .status-pills-container {
        top: auto;
        left: auto;
        right: 10%;

        width: min(39vw, 265px);
        height: auto;
        transform: scale(0.94);
        transform-origin: bottom right;
    }

    .ai-page-body .ai-hero__visual .visual-frame--ai-dashboard {
        top: 50%;
        left: 50%;
        width: min(82%, 480px);
        padding: 16px;
        min-height: 0;
        transform: translate(-50%, -50%) !important;
    }

    .ai-page-body .ai-hero .sales-page-bubble {
        top: 126px;
        right: auto;
        bottom: auto;
        left: 8%;
        width: auto;
        height: auto;
        transform: rotate(3deg) scale(0.9) !important;
        transform-origin: left top;
    }

    .ai-page-body .ai-hero .blog-articles-bubble {
        top: 198px;
        right: auto;
        bottom: auto;
        left: 8%;
        width: auto;
        height: auto;
        transform: rotate(-4deg) scale(0.9) !important;
        transform-origin: left top;
    }

    .ai-page-body .ai-hero .success-growth-card {
        top: auto;
        left: auto;
        right: 8%;
        bottom: 14px;
        width: min(34vw, 232px) !important;
        height: auto;
        transform: scale(0.92) !important;
        transform-origin: bottom right;
    }
}

@media (max-width: 575.98px) {

    .ai-page-body .ai-hero__swiper,
    .ai-page-body .ai-hero__swiper .swiper-wrapper,
    .ai-page-body .ai-hero__swiper .swiper-slide,
    .ai-page-body .ai-hero__swiper .ai-hero__visual {
        overflow: visible !important;
    }

    .ai-page-body .ai-hero__swiper .card-ideation,
    .ai-page-body .ai-hero__swiper .card-outline,
    .ai-page-body .ai-hero__swiper .card-crafting,
    .ai-page-body .ai-hero__swiper .card-crafting::after,
    .ai-page-body .ai-hero__swiper .processing-overlay-v2,
    .ai-page-body .ai-hero__swiper .ai-bubble-notif,
    .ai-page-body .ai-hero__swiper .sales-page-bubble,
    .ai-page-body .ai-hero__swiper .blog-articles-bubble,
    .ai-page-body .ai-hero__swiper .success-growth-card,
    .ai-page-body .ai-hero__swiper .growth-card {
        animation: none !important;
    }

    .ai-page-body .ai-hero__swiper .swiper-slide {
        position: relative !important;
        height: 650px !important;
    }

    .ai-page-body .ai-hero__swiper .ai-slide--stage1 {
        height: 610px !important;
    }

    .ai-page-body .ai-hero__swiper .ai-slide--stage2 {
        height: 620px !important;
    }

    .ai-page-body .ai-hero__swiper .ai-slide--stage3 {
        height: 690px !important;
    }

    .ai-page-body .ai-hero__visual {
        display: block !important;
        position: relative !important;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        margin-inline: auto;
    }

    .ai-page-body .ai-hero__visual .visual-frame,
    .ai-page-body .ai-hero__visual .ai-card,
    .ai-page-body .ai-hero__visual .ai-bubble-notif,
    .ai-page-body .ai-hero__visual .ai-bubble-left,
    .ai-page-body .ai-hero__visual .status-pills-container,
    .ai-page-body .ai-hero__visual .wrapper {
        position: absolute !important;

        margin: 0;
        max-width: none;
    }

    .ai-page-body .ai-hero__visual .wrapper {
        display: block !important;
        top: 72px !important;
        left: 50% !important;
        width: 88%;
        height: 540px;
        transform: translateX(-50%) !important;
    }

    .ai-page-body .ai-hero__visual .ai-bubble-notif,
    .ai-page-body .ai-hero__visual .ai-bubble-left {
        display: flex !important;
    }

    .ai-page-body .ai-hero__visual .visual-frame--ai-main {
        top: 116px !important;
        left: 50% !important;
        width: calc(100% - 32px);
        max-width: 360px;
        height: 280px;
        min-height: 0 !important;
        transform: translateX(-50%) !important;
    }

    .ai-page-body .ai-hero .card-ideation {
        top: 28px !important;
        left: 16px !important;
        right: auto !important;
        bottom: auto !important;
        width: min(54vw, 196px) !important;
        height: auto;
        transform: rotate(-3deg) scale(0.78) !important;
        transform-origin: top left;
    }

    .ai-page-body .ai-hero .card-outline {
        top: 148px !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;
        width: min(58vw, 214px) !important;
        height: auto;
        transform: rotate(2deg) scale(0.78) !important;
        transform-origin: top right;
    }

    .ai-page-body .ai-hero .card-crafting {
        top: auto !important;
        right: auto !important;
        bottom: 30% !important;
        left: 18px !important;
        width: min(74vw, 274px) !important;
        height: auto;
        transform: rotate(5deg) scale(0.8) !important;
        transform-origin: bottom left;
    }

    .ai-page-body .ai-hero__visual .visual-frame--ai-editor {
        top: 96px !important;
        left: 50% !important;
        width: calc(100% - 32px);
        max-width: 360px;
        height: 312px;
        min-height: 0 !important;
        transform: translateX(-50%) !important;
    }

    .ai-page-body .ai-hero .dashed-line {
        top: 14px !important;
        right: -8px !important;
        left: auto !important;
        width: auto;
        height: auto;
        transform: scale(0.82) !important;
        transform-origin: top right;
    }

    .ai-page-body .ai-hero .processing-overlay-v2 {
        top: auto !important;
        right: auto !important;
        bottom: 27% !important;
        left: 14px !important;
        width: min(62vw, 226px) !important;
        height: auto;
        transform: scale(0.72) !important;
        transform-origin: bottom left;
    }

    .ai-page-body .ai-hero .ai-bubble-notif {
        top: 38px !important;
        right: auto !important;
        bottom: auto !important;
        left: 12px !important;
        width: max-content;
        max-width: calc(100vw - 48px);
        height: auto;
        transform: rotate(-10deg) scale(0.7) !important;
        transform-origin: top left;
    }

    .ai-page-body .ai-hero__visual .status-pills-container {
        top: auto !important;
        left: auto !important;
        right: 12px !important;

        width: min(60vw, 220px);
        height: auto;
        transform: scale(0.76) !important;
        transform-origin: bottom right;
    }

    .ai-page-body .ai-hero__visual .visual-frame--ai-dashboard {
        top: 50% !important;
        left: 50% !important;
        width: calc(100% - 32px);
        max-width: 360px;

        min-height: 0 !important;
        transform: translate(-50%, -50%) !important;
        padding: 16px;
    }

    .ai-page-body .ai-hero .sales-page-bubble {
        top: 118px !important;
        right: auto !important;
        bottom: auto !important;
        left: 14px !important;
        width: max-content;
        height: auto;
        transform: rotate(3deg) scale(0.74) !important;
        transform-origin: left top;
    }

    .ai-page-body .ai-hero .blog-articles-bubble {
        top: 176px !important;
        right: auto !important;
        bottom: auto !important;
        left: 14px !important;
        width: max-content;
        height: auto;
        transform: rotate(-4deg) scale(0.74) !important;
        transform-origin: left top;
    }

    .ai-page-body .ai-hero .success-growth-card {
        top: auto !important;
        left: auto !important;
        right: 12px !important;
        bottom: 34px !important;
        width: min(56vw, 198px) !important;
        height: auto;
        transform: scale(0.74) !important;
        transform-origin: bottom right;
    }
}


/*==================================================
                    SECTION
==================================================*/

.quiz-generation-section {

    padding: 120px 0;

    overflow: hidden;

    background: #fff;
}

.quiz-visual {

    display: flex;

    justify-content: center;
}

/*==================================================
                BACKGROUND
==================================================*/

.quiz-bg {

    position: relative;

    width: 100%;

    height: 520px;

    border-radius: 28px;

    background:
        linear-gradient(180deg, #E7EAFE 0%, #DDE3FD 100%);

    overflow: visible;
}

.quiz-bg::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 28px;

    background:
        radial-gradient(circle at top left,
            rgba(255, 255, 255, .45),
            transparent 45%);
}

/*==================================================
            TOP FILTER CARD
==================================================*/

.filter-card {
    position: absolute;
    top: 32px;
    right: 13px;
    width: 285px;
    height: 58px;
    background: #FDFDFF;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    box-shadow: 0 18px 36px rgba(58, 69, 150, .10);
    z-index: 20;
}

/* toggle */

.filter-toggle {

    width: 52px;

    height: 24px;

    background: #EEF1F8;

    border-radius: 20px;

    position: relative;
}

.filter-toggle::before {

    content: "";

    position: absolute;

    left: 3px;

    top: 3px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}

/* slider */

.filter-slider {

    position: relative;

    width: 95px;

    height: 4px;

    border-radius: 20px;

    background: #D6DDEF;
}

.slider-dot {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #7B2ED8;
}

/* badge */

.filter-badge {

    width: 28px;

    height: 14px;

    border-radius: 20px;

    background: #EEF2FA;
}

/*==================================================
                QUIZ WINDOW
==================================================*/

.quiz-window {

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 470px;
    background: #fff;
    border-radius: 22px;

    padding: 28px;

    box-shadow:
        0 32px 70px rgba(49, 59, 125, .16);
}

/*==================================================
                QUESTION
==================================================*/

.quiz-question {

    margin-bottom: 30px;
}

.question-line {

    height: 12px;

    border-radius: 20px;

    background: #515866;

    margin-bottom: 12px;
}

.question-line.lg {

    width: 290px;
}

.question-line.md {

    width: 185px;
}

/*==================================================
                ANSWERS
==================================================*/

.answer-card {

    display: flex;

    align-items: center;

    gap: 16px;

    height: 66px;

    border-radius: 14px;

    background: #F4F6FA;

    padding: 0 16px;

    margin-bottom: 14px;
}

.answer-radio {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    border: 2px solid #C7D1E3;

    flex-shrink: 0;
}

.answer-lines {

    flex: 1;
}

.answer-lines span {

    display: block;

    height: 6px;

    border-radius: 20px;

    background: #D8DFEC;
}

.answer-lines span:first-child {

    width: 120px;

    margin-bottom: 8px;
}

.answer-lines span:last-child {

    width: 90px;
}

/*==================================================
            SUCCESS CARD
==================================================*/

.answer-card.success {

    background: #F3FFF6;

    border: 1px solid #91E3AF;
}

.success-radio {

    background: #35C76D;

    border: none;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 9px;
}

/*==================================================
                FOOTER
==================================================*/

.quiz-footer {

    margin-top: 24px;

    padding-top: 22px;

    border-top: 1px solid #EEF2F8;
}

.footer-lines span {

    display: block;

    height: 6px;

    border-radius: 20px;

    background: #DCE4F2;

    margin-bottom: 10px;
}

.footer-lines .lg {

    width: 130px;
}

.footer-lines .md {

    width: 185px;
}

.footer-lines .sm {

    width: 120px;
}

/*==================================================
            FLOATING CARD
==================================================*/

.quiz-floating-card {

    position: absolute;

    right: 42px;

    bottom: 34px;

    width: 170px;

    background: #ffffff;

    border-radius: 16px;

    padding: 14px;

    box-shadow:
        0 24px 50px rgba(60, 72, 150, .18);

    z-index: 20;
}

.quiz-floating-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 16px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .55),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

/*==================================================
            FLOAT TOP
==================================================*/

.floating-top {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;
}

.floating-icon {

    width: 30px;

    height: 30px;

    border-radius: 8px;

    background: #EEF2FC;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6E7D98;

    font-size: 14px;
}

.floating-text {

    flex: 1;
}

.floating-text span {

    display: block;

    height: 5px;

    border-radius: 20px;

    background: #D9E2F2;
}

.floating-text span:first-child {

    width: 72px;

    margin-bottom: 8px;
}

.floating-text span:last-child {

    width: 48px;
}

/*==================================================
            PURPLE PROGRESS
==================================================*/

.floating-progress {

    width: 100%;

    height: 22px;

    background: #EADDFB;

    border-radius: 20px;

    padding: 3px;
}

.progress-fill {

    width: 100%;

    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            #7A2BE3,
            #973CFF);

    position: relative;
}

.progress-fill::after {

    content: "";

    position: absolute;

    right: 50px;

    top: 50%;

    transform: translateY(-50%, -50%);

    width: 42px;

    height: 3px;

    border-radius: 10px;

    background: rgba(255, 255, 255, .45);
}

/*==================================================
            QUIZ WINDOW POLISH
==================================================*/

.quiz-window {

    border: 1px solid #EEF2FA;

    box-shadow:
        0 36px 70px rgba(52, 64, 146, .18);
}

.quiz-window::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 22px;

    background:

        linear-gradient(180deg,
            rgba(255, 255, 255, .35),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}

/*==================================================
            ANSWER STATES
==================================================*/

.answer-card {

    transition: .25s;
}

.answer-card:hover {

    transform: translateY(-2px);
}

.answer-card.success {

    box-shadow:
        inset 0 0 0 1px rgba(53, 199, 109, .15);
}

/*==================================================
            QUESTION
==================================================*/

.question-line {

    background: #4F5664;
}

.question-line.lg {

    width: 305px;
}

.question-line.md {

    width: 195px;
}

/*==================================================
            FOOTER
==================================================*/

.quiz-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.quiz-footer::after {

    content: "";

    width: 54px;

    height: 30px;

    border-radius: 8px;

    background: #F5F7FC;
}

/*==================================================
            GLOW
==================================================*/

.quiz-bg::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 28px;

    background:
        radial-gradient(circle at bottom right,
            rgba(255, 255, 255, .18),
            transparent 48%);

    pointer-events: none;
}

/*==================================================
            FLOAT ANIMATION
==================================================*/

.filter-card {

    animation: quizTop 6s ease-in-out infinite;
}

.quiz-floating-card {

    animation: quizFloat 5s ease-in-out infinite;
}

@keyframes quizTop {

    0%,
    100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-6px);
    }

}

@keyframes quizFloat {

    0%,
    100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-8px);
    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media (max-width:992px) {

    .quiz-bg {

        width: 100%;

        max-width: 560px;

        margin: auto;
    }

    .quiz-window {

        width: 86%;


    }

    .filter-card {

        width: 58%;

        left: 14%;
    }

}

@media (max-width:768px) {

    .quiz-bg {

        height: 480px;
    }

    .quiz-floating-card {

        right: 16px;

        bottom: 20px;

        width: 150px;
    }

    .filter-card {

        height: 54px;
    }

}


/* =========================================
   AI Overview — Cinematic Entrance Animation
   Desktop Only (min-width: 992px)
   ========================================= */

@media (min-width: 992px) {

    /* -----------------------------------
       STAGE 1: Central Dashboard Card
       Fade + Scale entrance
    ----------------------------------- */

    .ai-overview__visual .ai-main-dashboard {
        opacity: 0;
        transform: scale(0.92);
        animation: centralCardFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 0s;
    }

    @keyframes centralCardFade {
        0% {
            opacity: 0;
            transform: scale(0.92);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* -----------------------------------
       STAGE 2: Floating Cards — Directional Fly-In
       Each card flies from its out-of-bounds quadrant
       with staggered delays after the central card.
    ----------------------------------- */

    /* -- Shared initial hidden state for all bg-cards -- */
    .ai-overview__visual .bg-card {
        opacity: 0;
        animation-fill-mode: forwards !important;
        animation-duration: 0.7s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Card 1 — Hub (Top-Left quadrant)
       Flies in from upper-left */
    .ai-overview__visual .bg-card--hub {
        transform: translate(-60px, -60px);
        animation-name: flyInFromTopLeft;
        animation-delay: 0.4s;
    }

    /* Card 2 — Structure (Top-Right quadrant)
       Flies in from upper-right */
    .ai-overview__visual .bg-card--structure {
        transform: translate(60px, -60px);
        animation-name: flyInFromTopRight;
        animation-delay: 0.55s;
    }

    /* Card 3 — Branding (Bottom-Left quadrant)
       Flies in from lower-left */
    .ai-overview__visual .bg-card--branding {
        transform: translate(-60px, 60px);
        animation-name: flyInFromBottomLeft;
        animation-delay: 0.7s;
    }

    /* Card 4 — Sales (Bottom-Right quadrant)
       Flies in from lower-right */
    .ai-overview__visual .bg-card--sales {
        transform: translate(60px, 60px);
        animation-name: flyInFromBottomRight;
        animation-delay: 0.85s;
    }

    /* -----------------------------------
       @keyframes — Directional Fly-Ins
       Each resolves to transform: none so the
       cards land at their original absolute positions.
    ----------------------------------- */

    @keyframes flyInFromTopLeft {
        0% {
            opacity: 0;
            transform: translate(-60px, -60px);
        }

        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }

    @keyframes flyInFromTopRight {
        0% {
            opacity: 0;
            transform: translate(60px, -60px);
        }

        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }

    @keyframes flyInFromBottomLeft {
        0% {
            opacity: 0;
            transform: translate(-60px, 60px);
        }

        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }

    @keyframes flyInFromBottomRight {
        0% {
            opacity: 0;
            transform: translate(60px, 60px);
        }

        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }

}