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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #0f172a;
    background: #ffffff;
    line-height: 1.6;
}

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

.container {
    width: min(1180px, 90%);
    margin: auto;
}


/* =========================
   NAVBAR
========================= */

.header {
    width: 100%;
    height: 76px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e2e8f0;

    display: flex;
    align-items: center;

    position: sticky;
    top: 0;
    z-index: 1000;
    .header {
        font-family: "Plus Jakarta Sans", sans-serif;
    }
}

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

.logo {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
}

.logo span {
    color: #2563eb;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-menu > a,
.dropdown > a {
    color: #475569;
    font-size: 15px;
    font-weight: 600;
    transition: 0.3s;
}

.nav-menu a:hover,
.nav-menu .active {
    color: #2563eb;
}


/* Dropdown */

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 30px;
    left: 0;

    width: 180px;
    padding: 10px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;

    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.10);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition: 0.25s;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: #475569;
    font-size: 14px;
}

.dropdown-menu a:hover {
    background: #eff6ff;
    color: #2563eb;
}


/* Buttons */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.login-btn {
    font-weight: 600;
    color: #475569;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 11px 20px;
    border-radius: 10px;

    font-size: 15px;
    font-weight: 700;

    transition: 0.25s;
}

.btn-primary {
    color: white;
    background: #2563eb;
    border: 1px solid #2563eb;
}

.btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;

    transform: translateY(-2px);
}

.btn-outline {
    color: #0f172a;
    background: white;
    border: 1px solid #cbd5e1;
}

.btn-outline:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.btn-large {
    padding: 14px 24px;
}


/* Mobile menu */

.mobile-menu-btn {
    display: none;
    border: none;
    background: transparent;
    font-size: 26px;
    cursor: pointer;
}


/* =========================
   HERO SECTION
========================= */
/* =========================
   HERO SECTION - UPDATED
========================= */

.hero {
    min-height: 455px;
    margin: 0 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        120deg,
        #fffaf0 0%,
        #ffffff 46%,
        #eef5ff 100%
    );

    border: 1px solid #e5e7eb;
    border-radius: 32px 32px 0 0;

    overflow: hidden;
}

.hero-inner {
    width: min(1050px, 92%);
    margin: auto;

    /* top spacing kam */
    padding: 25px 20px 32px;

    text-align: center;
}


/* Main Heading */

.hero h1 {
    margin: 0 0 2px;

    color: #101828;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 4vw, 62px);
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -1.5px;
}


/* Purple Heading */

.hero h2 {
    margin: 0;

    color: #5145f5;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 400;
    line-height: 1.08;

    letter-spacing: -1.5px;
}


/* Center Line */

.hero-line {
    width: 180px;
    height: 2px;

    margin: 24px auto 28px;

    background: linear-gradient(
        90deg,
        transparent,
        #7c6cff,
        transparent
    );
}


/* Paragraph */

.hero-inner > p {
    max-width: 900px;

    margin: 0 auto 30px;

    color: #667792;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================
   HERO BUTTONS
========================= */

.hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;
}

.hero-primary-btn,
.hero-secondary-btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 25px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    transition: 0.3s ease;
}


/* Purple Button */

.hero-primary-btn {
    color: #ffffff;

    background: linear-gradient(
        90deg,
        #5b4cf5,
        #9b2be8
    );

    box-shadow: 0 10px 25px rgba(98, 62, 230, 0.18);
}

.hero-primary-btn:hover {
    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(98, 62, 230, 0.25);
}


/* White Button */

.hero-secondary-btn {
    color: #101828;

    background: rgba(255, 255, 255, 0.65);

    border: 1px solid #dfe3ea;
}

.hero-secondary-btn:hover {
    background: #ffffff;

    transform: translateY(-2px);
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .hero {
        min-height: 480px;
    }

    .hero-inner {
        padding: 45px 20px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .hero h2 {
        font-size: 39px;
    }

    .hero-inner > p {
        max-width: 750px;
        font-size: 15px;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .hero {
        min-height: auto;

        margin: 0 8px;

        border-radius: 20px;
    }

    .hero-inner {
        width: 94%;

        padding: 48px 10px;
    }

    .hero h1 {
        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -1px;
    }

    .hero h2 {
        margin-top: 7px;

        font-size: 31px;

        line-height: 1.12;

        letter-spacing: -0.8px;
    }

    .hero-line {
        width: 130px;

        margin: 22px auto;
    }

    .hero-inner > p {
        margin-bottom: 25px;

        font-size: 14px;
        line-height: 1.65;
    }

    .hero-buttons {
        flex-direction: column;

        gap: 10px;
    }

    .hero-primary-btn,
    .hero-secondary-btn {
        width: 100%;

        min-height: 50px;

        padding: 0 20px;

        font-size: 13px;
    }
}

/* =========================
   TRUST STATS
========================= */

/* =========================
   TRUST STATS - COMPACT ROW
========================= */

.trust-stats {
    padding: 0 14px 14px;

    background: #ffffff;

    /* Hero ke andar/paas upar move */
    margin-top: -18px;

    position: relative;
    z-index: 5;
}

.trust-row {
    max-width: 1180px;
    margin: auto;

    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.trust-item {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;
}

.trust-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #6d4aff,
        #b52be5
    );

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;
}

.trust-item {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}

.trust-item strong {
    font-size: 16px;
    line-height: 1.1;
}

.trust-item span {
    font-size: 8px;
    letter-spacing: 1.4px;
}

.trust-divider {
    width: 1px;
    height: 38px;

    background: #e5e7eb;
}


/* Tablet */

@media (max-width: 900px) {

    .trust-row {
        flex-wrap: wrap;
        gap: 18px;
    }

    .trust-item {
        flex: 1 1 40%;
    }

    .trust-divider {
        display: none;
    }
}


/* Mobile */

@media (max-width: 550px) {

    .trust-row {
        padding: 14px;

        border-radius: 18px;
    }

    .trust-item {
        flex: 1 1 100%;

        justify-content: flex-start;
    }

    .trust-icon {
        width: 38px;
        height: 38px;

        font-size: 14px;
    }

    .trust-item strong {
        font-size: 16px;
    }

    .trust-item span {
        font-size: 8px;
    }

}
/* =========================
   AUDIENCE CARDS
========================= */

/* =========================
   AUDIENCE - COMPACT SIZE
========================= */

.audience-section {
    padding: 35px 26px 55px;
    background: #f8fafc;
}

.audience-wrapper {
    max-width: 1280px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.audience-card {
    /* Pehle 350px tha */
    min-height: 250px;

    /* Pehle 46px 42px tha */
    padding: 30px 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 1px solid #dbe3ee;
    border-radius: 20px;

    overflow: hidden;

    transition: 0.3s ease;
}

.audience-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px
        rgba(15, 23, 42, 0.08);
}


/* Left Card */

.brand-card {
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(232, 121, 249, 0.22),
            transparent 38%
        ),
        #ffffff;
}


/* Right Card */

.publisher-card {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99, 102, 241, 0.26),
            transparent 42%
        ),
        #ffffff;
}


/* Label */

.audience-top-label {
    display: flex;
    align-items: center;
    gap: 12px;

    /* Pehle 28px */
    margin-bottom: 17px;

    color: #667085;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.audience-card h2 {
    max-width: 650px;

    /* Pehle 12px */
    margin-bottom: 8px;

    color: #0f172a;

    /* Pehle 29px */
    font-size: 25px;

    line-height: 1.25;
    letter-spacing: -0.6px;
}

.audience-card p {
    max-width: 650px;

    /* Pehle 30px */
    margin-bottom: 20px;

    color: #64748b;

    /* Pehle 17px */
    font-size: 14px;

    line-height: 1.6;
}


/* Buttons */

.audience-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dark-btn,
.light-btn {
    /* Pehle 56px */
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Pehle 30px */
    padding: 0 23px;

    border-radius: 999px;

    /* Pehle 15px */
    font-size: 13px;
    font-weight: 700;

    transition: 0.25s ease;
}

.dark-btn {
    background: #0f172a;
    color: #ffffff;

    border: 1px solid #0f172a;
}

.dark-btn:hover {
    background: #1e293b;

    transform: translateY(-2px);
}

.light-btn {
    background: rgba(255, 255, 255, 0.55);

    color: #0f172a;

    border: 1px solid #dbe3ee;
}

.light-btn:hover {
    background: #ffffff;

    border-color: #cbd5e1;

    transform: translateY(-2px);
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {

    .audience-wrapper {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .audience-section {
        padding: 16px;
    }

    .audience-card {
        min-height: auto;

        padding: 32px 24px;
    }

    .audience-card h2 {
        font-size: 25px;
    }

    .audience-card p {
        font-size: 15px;
    }

    .audience-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .dark-btn,
    .light-btn {
        width: 100%;
    }

    .audience-top-label {
        font-size: 11px;
        letter-spacing: 3px;
    }

}
/* =========================
   ORDER MANAGEMENT
========================= */

/* =========================
   ORDER MANAGEMENT - COMPACT
========================= */

.order-section {
    padding: 55px 0 65px;

    background: #ffffff;
}


/* Heading */

.order-heading {
    max-width: 650px;

    margin: 0 auto 35px;

    text-align: center;
}

.order-heading > span {
    display: inline-block;

    margin-bottom: 10px;

    color: #6366f1;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;
}

.order-heading h2 {
    margin-bottom: 12px;

    color: #0f172a;

    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.15;

    letter-spacing: -1.2px;
}

.order-heading h2 strong {
    color: #2563eb;

    font-weight: inherit;
}

.order-heading p {
    max-width: 570px;

    margin: auto;

    color: #64748b;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================
   CARDS
========================= */

.order-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;
}

.order-card {
    min-height: 205px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 17px;

    transition: 0.3s ease;
}

.order-card:hover {
    transform: translateY(-4px);

    background: #ffffff;

    border-color: #c7d2fe;

    box-shadow:
        0 14px 35px
        rgba(15, 23, 42, 0.07);
}


/* Card Top */

.order-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 28px;
}


/* Professional Icon */

.order-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6d4aff;

    background: linear-gradient(
        135deg,
        #f0edff,
        #f9edff
    );

    border: 1px solid #e5ddff;
    border-radius: 12px;
}

.order-icon svg {
    width: 19px;
    height: 19px;

    stroke-width: 1.8;
}


/* Number */

.order-number {
    color: #b5bdca;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* Heading */

.order-card h3 {
    margin-bottom: 8px;

    color: #0f172a;

    font-size: 17px;
    line-height: 1.3;

    letter-spacing: -0.3px;
}


/* Paragraph */

.order-card p {
    color: #718096;

    font-size: 12px;
    line-height: 1.65;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1000px) {

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

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .order-section {
        padding: 45px 0;
    }

    .order-grid {
        grid-template-columns: 1fr;
    }

    .order-card {
        min-height: auto;
    }

}
/* =========================
   WEBSITE METRICS
========================= */

.metrics-section {
    padding: 110px 0;

    background: #f8fafc;
}

.metrics-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 70px;

    align-items: center;
}


/* LEFT */

.metrics-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #6366f1;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 4px;
}

.metrics-content h2 {
    max-width: 520px;

    margin-bottom: 20px;

    color: #0f172a;

    font-size: clamp(40px, 4vw, 56px);
    line-height: 1.08;

    letter-spacing: -2px;
}

.metrics-content h2 span {
    color: #2563eb;
}

.metrics-content > p {
    max-width: 580px;

    margin-bottom: 34px;

    color: #64748b;

    font-size: 17px;
    line-height: 1.8;
}


/* Points */

.metrics-points {
    display: grid;

    gap: 22px;

    margin-bottom: 34px;
}

.metric-point {
    display: flex;

    gap: 16px;
}

.metric-point-icon {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    background: #dbeafe;
    color: #2563eb;

    border-radius: 10px;

    font-weight: 800;
}

.metric-point h4 {
    margin-bottom: 4px;

    color: #0f172a;

    font-size: 16px;
}

.metric-point p {
    max-width: 470px;

    color: #64748b;

    font-size: 14px;
    line-height: 1.7;
}


/* Button */

.metrics-btn {
    display: inline-flex;

    padding: 14px 24px;

    background: #0f172a;
    color: #ffffff;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    transition: 0.25s;
}

.metrics-btn:hover {
    transform: translateY(-2px);

    background: #1e293b;
}


/* =========================
   DASHBOARD
========================= */

.market-overview {
    padding: 30px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 26px;

    box-shadow:
        0 25px 60px
        rgba(15, 23, 42, 0.08);
}

.overview-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 26px;
}

.overview-header span {
    display: block;

    margin-bottom: 5px;

    color: #64748b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}

.overview-header h3 {
    color: #0f172a;

    font-size: 23px;
}

.live-dot {
    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    background: #ecfdf5;
    color: #059669;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
}

.live-dot span {
    width: 7px;
    height: 7px;

    margin: 0;

    background: #10b981;

    border-radius: 50%;
}


/* Stats */

.overview-stats {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-bottom: 25px;
}

.overview-stat {
    padding: 18px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.overview-stat span {
    display: block;

    margin-bottom: 4px;

    color: #64748b;

    font-size: 12px;
}

.overview-stat strong {
    display: block;

    color: #0f172a;

    font-size: 25px;
}

.overview-stat small {
    color: #10b981;

    font-size: 11px;
}


/* Chart */

.chart-box {
    padding: 22px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.chart-top {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;
}

.chart-top span {
    display: block;

    color: #64748b;

    font-size: 12px;
}

.chart-top strong {
    display: block;

    margin-top: 2px;

    color: #0f172a;

    font-size: 24px;
}

.chart-top select {
    padding: 8px 11px;

    color: #64748b;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 8px;

    font-size: 11px;
}


/* Graph area */

.chart-area {
    position: relative;

    height: 220px;

    overflow: hidden;
}

.chart-lines {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}

.chart-lines span {
    width: 100%;
    height: 1px;

    background: #eef2f7;
}

.market-chart {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.chart-line {
    fill: none;

    stroke: #2563eb;

    stroke-width: 4;

    stroke-linecap: round;

    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;

    animation: drawChart 2s ease forwards;
}

@keyframes drawChart {

    to {
        stroke-dashoffset: 0;
    }

}


/* Months */

.chart-months {
    display: flex;

    justify-content: space-between;

    margin-top: 12px;
}

.chart-months span {
    color: #94a3b8;

    font-size: 11px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 950px) {

    .metrics-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

}


@media (max-width: 600px) {

    .metrics-section {
        padding: 75px 0;
    }

    .market-overview {
        padding: 18px;
    }

    .overview-stats {
        grid-template-columns: 1fr;
    }

    .overview-header {
        align-items: flex-start;
    }

    .chart-area {
        height: 170px;
    }

}
/* =========================
   BUYER JOURNEY
========================= */

.buyer-journey {
    padding: 110px 0;
    background: #ffffff;
}

.journey-heading {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.journey-heading > span {
    display: inline-block;
    margin-bottom: 16px;

    color: #6366f1;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
}

.journey-heading h2 {
    margin-bottom: 18px;

    color: #0f172a;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.12;
    letter-spacing: -1.7px;
}

.journey-heading h2 strong {
    color: #2563eb;
    font-weight: inherit;
}

.journey-heading p {
    max-width: 660px;
    margin: auto;

    color: #64748b;

    font-size: 17px;
    line-height: 1.8;
}


/* Grid */

.journey-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


/* Cards */

.journey-card {
    position: relative;

    min-height: 360px;

    padding: 34px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    overflow: hidden;

    transition: 0.3s ease;
}

.journey-card:hover {
    transform: translateY(-7px);

    background: #ffffff;

    border-color: #c7d2fe;

    box-shadow:
        0 24px 55px
        rgba(15, 23, 42, 0.09);
}


/* Featured Middle Card */

.featured-journey {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99, 102, 241, 0.18),
            transparent 40%
        ),
        #f8fafc;
}


/* Number */

.journey-number {
    position: absolute;

    top: 26px;
    right: 28px;

    color: #cbd5e1;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 2px;
}


/* Icon */

.journey-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom: 70px;

    color: #2563eb;

    background: #eff6ff;

    border: 1px solid #dbeafe;
    border-radius: 16px;

    font-size: 26px;
    font-weight: 700;
}


/* Content */

.journey-card h3 {
    margin-bottom: 14px;

    color: #0f172a;

    font-size: 23px;
    line-height: 1.3;

    letter-spacing: -0.5px;
}

.journey-card p {
    margin-bottom: 24px;

    color: #64748b;

    font-size: 15px;
    line-height: 1.8;
}

.journey-card a {
    display: inline-block;

    color: #2563eb;

    font-size: 14px;
    font-weight: 700;

    transition: 0.25s ease;
}

.journey-card a:hover {
    transform: translateX(5px);
}


/* Responsive */

@media (max-width: 900px) {

    .journey-grid {
        grid-template-columns: 1fr;
    }

    .journey-card {
        min-height: auto;
    }

    .journey-icon {
        margin-bottom: 45px;
    }

}

@media (max-width: 600px) {

    .buyer-journey {
        padding: 75px 0;
    }

    .journey-card {
        padding: 28px 24px;
    }

}
/* =========================
   PUBLISHER EARNING SECTION
========================= */

.publisher-earning {
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 30%
        ),
        #0f172a;

    color: #ffffff;
}

.publisher-earning-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 75px;

    align-items: center;
}


/* Left */

.publisher-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #93c5fd;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 4px;
}

.publisher-content h2 {
    max-width: 560px;

    margin-bottom: 22px;

    color: #ffffff;

    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.08;

    letter-spacing: -2px;
}

.publisher-content h2 span {
    color: #60a5fa;
}

.publisher-content > p {
    max-width: 560px;

    margin-bottom: 34px;

    color: #cbd5e1;

    font-size: 17px;
    line-height: 1.8;
}


/* Buttons */

.publisher-actions {
    display: flex;
    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}

.publisher-primary-btn,
.publisher-secondary-btn {
    min-height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 28px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    transition: 0.25s ease;
}

.publisher-primary-btn {
    background: #2563eb;
    color: #ffffff;

    border: 1px solid #2563eb;
}

.publisher-primary-btn:hover {
    background: #3b82f6;

    transform: translateY(-2px);
}

.publisher-secondary-btn {
    background: rgba(255, 255, 255, 0.06);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.18);
}

.publisher-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.12);

    transform: translateY(-2px);
}


/* Right Benefits */

.publisher-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}

.publisher-benefit {
    min-height: 230px;

    padding: 28px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;

    backdrop-filter: blur(12px);

    transition: 0.3s ease;
}

.publisher-benefit:hover {
    transform: translateY(-6px);

    background: rgba(255, 255, 255, 0.09);

    border-color: rgba(96, 165, 250, 0.45);
}


/* Icon */

.publisher-benefit-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    margin-bottom: 24px;

    background: rgba(59, 130, 246, 0.15);

    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 14px;

    color: #93c5fd;

    font-size: 22px;
    font-weight: 800;
}


/* Content */

.publisher-benefit h3 {
    margin-bottom: 10px;

    color: #ffffff;

    font-size: 19px;
}

.publisher-benefit p {
    color: #94a3b8;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 950px) {

    .publisher-earning-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

}

@media (max-width: 650px) {

    .publisher-earning {
        padding: 75px 0;
    }

    .publisher-benefits {
        grid-template-columns: 1fr;
    }

    .publisher-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .publisher-primary-btn,
    .publisher-secondary-btn {
        width: 100%;
    }

}

/* =========================
   FAQ SECTION
========================= */

.faq-section {
    padding: 110px 0;
    background: #ffffff;
}

.faq-container {
    max-width: 950px;
}


/* Heading */

.faq-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.faq-heading > span {
    display: inline-block;
    margin-bottom: 16px;

    color: #6366f1;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
}

.faq-heading h2 {
    margin-bottom: 18px;

    color: #0f172a;

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.faq-heading h2 strong {
    color: #2563eb;
    font-weight: inherit;
}

.faq-heading p {
    max-width: 620px;
    margin: auto;

    color: #64748b;

    font-size: 16px;
    line-height: 1.8;
}


/* FAQ List */

.faq-list {
    display: grid;
    gap: 14px;
}


/* FAQ Item */

.faq-item {
    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    overflow: hidden;

    transition: 0.3s ease;
}

.faq-item:hover {
    border-color: #c7d2fe;
}

.faq-item.active {
    background: #ffffff;
    border-color: #bfdbfe;

    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}


/* Question */

.faq-question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 22px 24px;

    background: transparent;
    border: none;

    color: #0f172a;

    font-size: 16px;
    font-weight: 700;

    text-align: left;

    cursor: pointer;
}


/* Plus icon */

.faq-icon {
    flex-shrink: 0;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    background: #ffffff;
    color: #2563eb;

    border: 1px solid #e2e8f0;
    border-radius: 50%;

    font-size: 21px;
    font-weight: 400;

    transition: 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);

    background: #2563eb;
    color: #ffffff;

    border-color: #2563eb;
}


/* Answer */

.faq-answer {
    max-height: 0;

    overflow: hidden;

    transition: max-height 0.35s ease;
}

.faq-answer p {
    padding: 0 70px 24px 24px;

    color: #64748b;

    font-size: 15px;
    line-height: 1.8;
}


/* First FAQ open by default */

.faq-item.active .faq-answer {
    max-height: 250px;
}


/* Mobile */

@media (max-width: 600px) {

    .faq-section {
        padding: 75px 0;
    }

    .faq-question {
        padding: 19px 18px;

        font-size: 15px;
    }

    .faq-answer p {
        padding: 0 18px 20px;
    }

}


/* =========================
   FINAL CTA
========================= */

.final-cta {
    padding: 40px 0 100px;
    background: #ffffff;
}

.cta-box {
    position: relative;
    overflow: hidden;

    padding: 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    background: #0f172a;

    border-radius: 28px;
}


/* Decorative glow */

.cta-box::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -180px;
    right: -100px;

    background: rgba(37, 99, 235, 0.35);

    border-radius: 50%;

    filter: blur(20px);
}

.cta-content {
    position: relative;
    z-index: 2;

    max-width: 650px;
}

.cta-content > span {
    display: inline-block;

    margin-bottom: 16px;

    color: #93c5fd;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 4px;
}

.cta-content h2 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.12;

    letter-spacing: -1.5px;
}

.cta-content h2 strong {
    display: block;

    color: #60a5fa;

    font-weight: inherit;
}

.cta-content p {
    max-width: 600px;

    color: #94a3b8;

    font-size: 15px;
    line-height: 1.8;
}


/* CTA Buttons */

.cta-actions {
    position: relative;
    z-index: 2;

    min-width: 210px;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.cta-primary,
.cta-secondary {
    min-height: 54px;

    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    transition: 0.25s ease;
}

.cta-primary {
    background: #2563eb;
    color: #ffffff;

    border: 1px solid #2563eb;
}

.cta-primary:hover {
    background: #3b82f6;

    transform: translateY(-2px);
}

.cta-secondary {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.07);

    border: 1px solid rgba(255, 255, 255, 0.16);
}

.cta-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}


/* =========================
   FOOTER
========================= */

.footer {
    padding-top: 80px;

    background: #080f1d;
    color: #ffffff;
}

.footer-grid {
    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 60px;

    padding-bottom: 65px;
}


/* Brand */

.footer-logo {
    display: inline-block;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;
}

.footer-logo span {
    color: #3b82f6;
}

.footer-brand p {
    max-width: 330px;

    margin-bottom: 24px;

    color: #94a3b8;

    font-size: 14px;
    line-height: 1.8;
}


/* Social */

.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    color: #cbd5e1;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;

    font-size: 13px;
    font-weight: 700;

    transition: 0.25s;
}

.footer-socials a:hover {
    background: #2563eb;
    color: #ffffff;

    border-color: #2563eb;

    transform: translateY(-3px);
}


/* Footer Columns */

.footer-column {
    display: flex;
    flex-direction: column;

    gap: 13px;
}

.footer-column h4 {
    margin-bottom: 8px;

    color: #ffffff;

    font-size: 15px;
}

.footer-column a {
    color: #94a3b8;

    font-size: 14px;

    transition: 0.2s;
}

.footer-column a:hover {
    color: #60a5fa;

    transform: translateX(3px);
}


/* Bottom */

.footer-bottom {
    min-height: 80px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p,
.footer-bottom-links {
    color: #64748b;

    font-size: 12px;
}

.footer-bottom-links {
    display: flex;

    gap: 10px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {

    .cta-box {
        padding: 45px 35px;

        flex-direction: column;
        align-items: flex-start;
    }

    .cta-actions {
        width: 100%;

        flex-direction: row;
    }

    .cta-actions a {
        flex: 1;
    }

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

}


@media (max-width: 600px) {

    .final-cta {
        padding: 25px 0 70px;
    }

    .cta-box {
        padding: 35px 24px;

        border-radius: 20px;
    }

    .cta-actions {
        flex-direction: column;
    }

    .footer {
        padding-top: 60px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    .footer-bottom {
        padding: 25px 0;

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

}









/* ==================================================
   COMPACT DESIGN
   WEBSITE METRICS -> FOOTER
================================================== */


/* ==================================================
   1. WEBSITE METRICS
================================================== */

.metrics-section {
    padding: 55px 0;
}

.metrics-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 42px;
}


/* Label */

.metrics-label {
    margin-bottom: 10px;

    font-size: 10px;
    letter-spacing: 3px;
}


/* Heading */

.metrics-content h2 {
    max-width: 480px;

    margin-bottom: 12px;

    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.13;
    letter-spacing: -1px;
}


/* Description */

.metrics-content > p {
    max-width: 500px;

    margin-bottom: 22px;

    font-size: 13px;
    line-height: 1.65;
}


/* Points */

.metrics-points {
    gap: 14px;
    margin-bottom: 22px;
}

.metric-point {
    gap: 12px;
}

.metric-point-icon {
    width: 30px;
    height: 30px;

    border-radius: 8px;

    font-size: 12px;
}

.metric-point h4 {
    margin-bottom: 2px;

    font-size: 14px;
}

.metric-point p {
    max-width: 430px;

    font-size: 12px;
    line-height: 1.55;
}


/* Button */

.metrics-btn {
    padding: 11px 19px;

    font-size: 12px;
}


/* ==================================================
   METRICS RIGHT DASHBOARD
================================================== */

.market-overview {
    padding: 20px;

    border-radius: 20px;

    box-shadow:
        0 12px 35px
        rgba(15, 23, 42, 0.06);
}


/* Header */

.overview-header {
    margin-bottom: 15px;
}

.overview-header span {
    margin-bottom: 3px;

    font-size: 8px;
    letter-spacing: 1.5px;
}

.overview-header h3 {
    font-size: 17px;
}


/* Live */

.live-dot {
    gap: 5px;

    padding: 5px 9px;

    font-size: 9px;
}

.live-dot span {
    width: 6px;
    height: 6px;
}


/* Top Stats */

.overview-stats {
    gap: 8px;

    margin-bottom: 14px;
}

.overview-stat {
    padding: 11px 12px;

    border-radius: 11px;
}

.overview-stat span {
    margin-bottom: 2px;

    font-size: 9px;
}

.overview-stat strong {
    font-size: 18px;
}

.overview-stat small {
    font-size: 8px;
}


/* ==================================================
   GRAPH
================================================== */

.chart-box {
    padding: 14px;

    border-radius: 13px;
}

.chart-top {
    margin-bottom: 10px;
}

.chart-top span {
    font-size: 9px;
}

.chart-top strong {
    font-size: 18px;
}

.chart-top select {
    padding: 5px 7px;

    font-size: 8px;

    border-radius: 6px;
}


/* MAIN GRAPH HEIGHT */

.chart-area {
    height: 145px;
}


/* Graph line */

.chart-line {
    stroke-width: 3;
}


/* Months */

.chart-months {
    margin-top: 7px;
}

.chart-months span {
    font-size: 8px;
}


/* ==================================================
   2. BUYER JOURNEY
================================================== */

.buyer-journey {
    padding: 55px 0;
}


/* Heading */

.journey-heading {
    max-width: 650px;

    margin: 0 auto 35px;
}

.journey-heading > span {
    margin-bottom: 10px;

    font-size: 10px;
    letter-spacing: 3px;
}

.journey-heading h2 {
    margin-bottom: 12px;

    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -1px;
}

.journey-heading p {
    max-width: 580px;

    font-size: 13px;
    line-height: 1.65;
}


/* Cards */

.journey-grid {
    gap: 16px;
}

.journey-card {
    min-height: 235px;

    padding: 22px;

    border-radius: 17px;
}

.journey-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 35px
        rgba(15, 23, 42, 0.07);
}


/* Numbers */

.journey-number {
    top: 19px;
    right: 20px;

    font-size: 10px;
}


/* Icons */

.journey-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 32px;

    border-radius: 11px;

    font-size: 18px;
}


/* Content */

.journey-card h3 {
    margin-bottom: 7px;

    font-size: 17px;
}

.journey-card p {
    margin-bottom: 14px;

    font-size: 12px;
    line-height: 1.6;
}

.journey-card a {
    font-size: 11px;
}


/* ==================================================
   3. PUBLISHER EARNING
================================================== */

.publisher-earning {
    padding: 60px 0;
}

.publisher-earning-grid {
    grid-template-columns: 0.9fr 1.1fr;

    gap: 45px;
}


/* Label */

.publisher-label {
    margin-bottom: 10px;

    font-size: 10px;
    letter-spacing: 3px;
}


/* Heading */

.publisher-content h2 {
    max-width: 500px;

    margin-bottom: 14px;

    font-size: clamp(31px, 3vw, 42px);
    line-height: 1.12;
    letter-spacing: -1px;
}


/* Text */

.publisher-content > p {
    max-width: 500px;

    margin-bottom: 23px;

    font-size: 13px;
    line-height: 1.65;
}


/* Buttons */

.publisher-actions {
    gap: 10px;
}

.publisher-primary-btn,
.publisher-secondary-btn {
    min-height: 44px;

    padding: 0 20px;

    font-size: 11px;
}


/* Benefit grid */

.publisher-benefits {
    gap: 12px;
}


/* Benefit cards */

.publisher-benefit {
    min-height: 165px;

    padding: 19px;

    border-radius: 16px;
}

.publisher-benefit:hover {
    transform: translateY(-4px);
}


/* Benefit icons */

.publisher-benefit-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 15px;

    border-radius: 10px;

    font-size: 16px;
}


/* Benefit content */

.publisher-benefit h3 {
    margin-bottom: 6px;

    font-size: 15px;
}

.publisher-benefit p {
    font-size: 11px;
    line-height: 1.6;
}


/* ==================================================
   4. FAQ
================================================== */

.faq-section {
    padding: 55px 0;
}

.faq-container {
    max-width: 850px;
}


/* Heading */

.faq-heading {
    max-width: 620px;

    margin: 0 auto 35px;
}

.faq-heading > span {
    margin-bottom: 10px;

    font-size: 9px;
    letter-spacing: 3px;
}

.faq-heading h2 {
    margin-bottom: 12px;

    font-size: clamp(30px, 3vw, 40px);
    letter-spacing: -1px;
}

.faq-heading p {
    max-width: 550px;

    font-size: 13px;
    line-height: 1.65;
}


/* FAQ items */

.faq-list {
    gap: 9px;
}

.faq-item {
    border-radius: 13px;
}

.faq-question {
    gap: 15px;

    padding: 15px 18px;

    font-size: 13px;
}


/* Plus button */

.faq-icon {
    width: 28px;
    height: 28px;

    font-size: 17px;
}


/* Answer */

.faq-answer p {
    padding: 0 55px 17px 18px;

    font-size: 12px;
    line-height: 1.65;
}


/* ==================================================
   5. FINAL CTA
================================================== */

.final-cta {
    padding: 25px 0 55px;
}

.cta-box {
    padding: 38px 42px;

    gap: 35px;

    border-radius: 22px;
}


/* Glow smaller */

.cta-box::before {
    width: 260px;
    height: 260px;

    top: -140px;
    right: -80px;
}


/* CTA label */

.cta-content > span {
    margin-bottom: 10px;

    font-size: 9px;
    letter-spacing: 3px;
}


/* CTA heading */

.cta-content h2 {
    margin-bottom: 11px;

    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.13;
    letter-spacing: -1px;
}


/* CTA paragraph */

.cta-content p {
    max-width: 520px;

    font-size: 12px;
    line-height: 1.65;
}


/* CTA actions */

.cta-actions {
    min-width: 180px;

    gap: 9px;
}

.cta-primary,
.cta-secondary {
    min-height: 44px;

    padding: 0 19px;

    font-size: 11px;
}


/* ==================================================
   6. FOOTER COMPACT
================================================== */

.footer {
    padding-top: 50px;
}

.footer-grid {
    gap: 40px;

    padding-bottom: 40px;
}


/* Logo */

.footer-logo {
    margin-bottom: 13px;

    font-size: 21px;
}

.footer-brand p {
    max-width: 300px;

    margin-bottom: 17px;

    font-size: 11px;
    line-height: 1.7;
}


/* Social icons */

.footer-socials {
    gap: 7px;
}

.footer-socials a {
    width: 32px;
    height: 32px;

    border-radius: 8px;

    font-size: 10px;
}


/* Footer columns */

.footer-column {
    gap: 9px;
}

.footer-column h4 {
    margin-bottom: 5px;

    font-size: 13px;
}

.footer-column a {
    font-size: 11px;
}


/* Footer bottom */

.footer-bottom {
    min-height: 58px;
}

.footer-bottom p,
.footer-bottom-links {
    font-size: 9px;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 950px) {

    .metrics-grid,
    .publisher-earning-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .journey-grid {
        grid-template-columns: 1fr;
    }

    .journey-card {
        min-height: auto;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .metrics-section,
    .buyer-journey,
    .publisher-earning,
    .faq-section {
        padding: 42px 0;
    }


    /* Metrics */

    .market-overview {
        padding: 15px;
    }

    .overview-stats {
        grid-template-columns: 1fr;
    }

    .chart-area {
        height: 135px;
    }


    /* Journey */

    .journey-card {
        padding: 20px;
    }

    .journey-icon {
        margin-bottom: 22px;
    }


    /* Publisher */

    .publisher-benefits {
        grid-template-columns: 1fr;
    }

    .publisher-benefit {
        min-height: auto;
    }

    .publisher-actions {
        flex-direction: column;
    }

    .publisher-primary-btn,
    .publisher-secondary-btn {
        width: 100%;
    }


    /* FAQ */

    .faq-question {
        padding: 14px 15px;

        font-size: 12px;
    }

    .faq-answer p {
        padding: 0 15px 15px;
    }


    /* CTA */

    .final-cta {
        padding: 20px 0 40px;
    }

    .cta-box {
        padding: 28px 22px;
    }


    /* Footer */

    .footer {
        padding-top: 40px;
    }

    .footer-grid {
        gap: 28px;

        padding-bottom: 30px;
    }

}

/* ==================================================
   ABOUT PAGE - FINAL ORBIT VERSION
================================================== */

.about-hero {
    padding: 32px 0 40px;
    min-height: calc(100vh - 76px);

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 84% 30%,
            rgba(139, 92, 246, 0.07),
            transparent 30%
        ),
        #ffffff;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 42px;
}


/* =========================
   LEFT CONTENT
========================= */

.about-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

    color: #2563eb;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 3px;
}

.about-label span {
    width: 30px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #9b2be8
    );
}


.about-content h1 {
    margin: 0 0 12px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(44px, 4.5vw, 60px);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -1.8px;
}

.about-content h1 strong {
    display: block;

    color: #4f46e5;

    font-weight: 500;
}


.about-content h3 {
    margin-bottom: 14px;

    color: #0f172a;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.35;
}


.about-content > p {
    max-width: 570px;

    margin-bottom: 22px;

    color: #64748b;

    font-size: 13px;
    line-height: 1.7;
}


/* =========================
   ABOUT STATS
========================= */

.about-stats {
    display: flex;

    gap: 22px;

    margin-bottom: 22px;
}

.about-stat {
    display: flex;
    align-items: center;

    gap: 9px;
}

.about-stat-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #6548f5;

    background: #f4f1ff;

    border: 1px solid #e4ddff;
    border-radius: 50%;
}

.about-stat-icon svg {
    width: 16px;
    height: 16px;

    stroke-width: 1.8;
}

.about-stat strong {
    display: block;

    color: #5b5b60;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.1;
}

.about-stat span {
    display: block;

    margin-top: 2px;

    color: #718096;

    font-size: 9px;
}


/* =========================
   BUTTONS
========================= */

.about-actions {
    display: flex;

    gap: 10px;
}

.about-primary-btn,
.about-secondary-btn {
    min-height: 44px;

    padding: 0 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 11px;

    font-size: 11px;
    font-weight: 700;

    transition: 0.25s ease;
}

.about-primary-btn {
    color: #ffffff;

    background: linear-gradient(
        90deg,
        #2563eb,
        #a32ee7
    );

    box-shadow:
        0 8px 22px
        rgba(79, 70, 229, 0.14);
}

.about-primary-btn:hover {
    transform: translateY(-2px);
}

.about-secondary-btn {
    color: #0f172a;

    background: #ffffff;

    border: 1px solid #e2e8f0;
}

.about-secondary-btn:hover {
    border-color: #c7d2fe;

    transform: translateY(-2px);
}


/* ==================================================
   RIGHT ORBIT AREA
================================================== */

.about-orbit-wrap {
    position: relative;

    width: 430px;
    height: 430px;

    margin: auto;
}


/* Dotted background */

.about-orbit-wrap::before {
    content: "";

    position: absolute;

    inset: 38px;

    border-radius: 50%;

    background-image:
        radial-gradient(
            rgba(99, 102, 241, 0.16) 1px,
            transparent 1px
        );

    background-size: 10px 10px;

    opacity: 0.6;

    -webkit-mask-image:
        radial-gradient(
            circle,
            black 42%,
            transparent 73%
        );

    mask-image:
        radial-gradient(
            circle,
            black 42%,
            transparent 73%
        );
}


/* =========================
   ORBIT RINGS
========================= */

.orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(99, 102, 241, 0.15);

    border-radius: 50%;

    pointer-events: none;
}

.orbit-one {
    width: 205px;
    height: 205px;
}

.orbit-two {
    width: 295px;
    height: 295px;
}

.orbit-three {
    width: 390px;
    height: 390px;
}


/* =========================
   CENTER LOGO
========================= */

.orbit-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 160px;
    height: 160px;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #e8e3ff;
    border-radius: 50%;

    box-shadow:
        0 14px 35px
        rgba(79, 70, 229, 0.07);

    z-index: 20;
}

.orbit-center img {
    width: 145px;
    height: 145px;

    max-width: none;
    max-height: none;

    object-fit: contain;
}


/* Pulse around center */

.orbit-center::after {
    content: "";

    position: absolute;

    inset: -8px;

    border: 1px solid rgba(99, 102, 241, 0.14);

    border-radius: 50%;

    animation: centerPulse 3s ease-in-out infinite;

    z-index: -1;
}

@keyframes centerPulse {

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

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

}


/* ==================================================
   OUTER ORBIT ROTATION
================================================== */

.orbit-items {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 390px;
    height: 390px;

    margin-left: -195px;
    margin-top: -195px;

    border-radius: 50%;

    animation: outerOrbitRotate 28s linear infinite;

    z-index: 15;
}


/* =========================
   ORBIT CARDS
========================= */

.orbit-card {
    position: absolute;

    width: 108px;
    height: 78px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    background: rgba(255, 255, 255, 0.98);

    color: #334155;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    box-shadow:
        0 9px 25px
        rgba(15, 23, 42, 0.07);

    /*
        Parent circle rotates.
        Card rotates opposite direction
        so text stays straight.
    */
    animation: cardStayStraight 28s linear infinite;
}

.orbit-card svg {
    width: 20px;
    height: 20px;

    color: #6548f5;

    stroke-width: 1.8;
}

.orbit-card span {
    color: #334155;

    font-size: 8px;
    font-weight: 700;

    text-align: center;

    white-space: nowrap;
}


/* ==================================================
   4 CARDS ON OUTER CIRCLE
   Equal 90° spacing
================================================== */


/* TOP */

.orbit-card-top {
    top: -39px;
    left: 50%;

    margin-left: -54px;
}


/* RIGHT */

.orbit-card-right {
    top: 50%;
    right: -54px;

    margin-top: -39px;
}


/* BOTTOM */

.orbit-card-bottom {
    bottom: -39px;
    left: 50%;

    margin-left: -54px;
}


/* LEFT */

.orbit-card-left {
    top: 50%;
    left: -54px;

    margin-top: -39px;
}


/* =========================
   ANIMATION
========================= */

@keyframes outerOrbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes cardStayStraight {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


/* Hover pause */

.about-orbit-wrap:hover .orbit-items,
.about-orbit-wrap:hover .orbit-card {
    animation-play-state: paused;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

    .about-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-content {
        text-align: center;
    }

    .about-label,
    .about-stats,
    .about-actions {
        justify-content: center;
    }

    .about-content > p {
        margin-left: auto;
        margin-right: auto;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .about-hero {
        padding: 35px 0 40px;

        min-height: auto;
    }


    /* Left content */

    .about-content h1 {
        font-size: 39px;

        letter-spacing: -1px;
    }

    .about-content h3 {
        font-size: 14px;
    }

    .about-content > p {
        font-size: 11px;
    }


    /* Stats */

    .about-stats {
        max-width: 210px;

        margin-left: auto;
        margin-right: auto;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }


    /* Buttons */

    .about-actions {
        flex-direction: column;
    }

    .about-primary-btn,
    .about-secondary-btn {
        width: 100%;
    }


    /* =========================
       MOBILE ORBIT
    ========================= */

    .about-orbit-wrap {
        width: 320px;
        height: 320px;
    }

    .about-orbit-wrap::before {
        inset: 32px;
    }

    .orbit-one {
        width: 150px;
        height: 150px;
    }

    .orbit-two {
        width: 215px;
        height: 215px;
    }

    .orbit-three {
        width: 285px;
        height: 285px;
    }


    /* Center */

    .orbit-center {
        width: 120px;
        height: 120px;

        padding: 18px;
    }

    .orbit-center img {
        max-width: 80px;
        max-height: 45px;
    }


    /* Orbit path */

    .orbit-items {
        width: 285px;
        height: 285px;

        margin-left: -142.5px;
        margin-top: -142.5px;
    }


    /* Cards */

    .orbit-card {
        width: 80px;
        height: 58px;

        gap: 4px;

        border-radius: 10px;
    }

    .orbit-card svg {
        width: 15px;
        height: 15px;
    }

    .orbit-card span {
        font-size: 6.5px;
    }


    /* TOP */

    .orbit-card-top {
        top: -29px;

        margin-left: -40px;
    }


    /* RIGHT */

    .orbit-card-right {
        right: -40px;

        margin-top: -29px;
    }


    /* BOTTOM */

    .orbit-card-bottom {
        bottom: -29px;

        margin-left: -40px;
    }


    /* LEFT */

    .orbit-card-left {
        left: -40px;

        margin-top: -29px;
    }

}




/* ==================================================
   ABOUT VALUES ROW
================================================== */

.about-values-section {
    padding: 0 0 45px;

    background: #ffffff;
}

.about-values-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, 0.04);
}


/* =========================
   ITEM
========================= */

.about-value-item {
    min-height: 145px;

    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 27px 25px;

    position: relative;
}


/* Divider */

.about-value-item:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}


/* =========================
   ICON
========================= */

.about-value-icon {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6246f5;
}

.about-value-icon svg {
    width: 25px;
    height: 25px;

    stroke-width: 1.9;
}


/* =========================
   CONTENT
========================= */

.about-value-content h3 {
    margin-bottom: 7px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.2;
}

.about-value-content p {
    max-width: 240px;

    color: #718096;

    font-size: 11px;
    line-height: 1.65;
}


/* =========================
   HOVER
========================= */

.about-value-item {
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.about-value-item:hover {
    background: #fafaff;
}

.about-value-item:hover .about-value-icon {
    transform: translateY(-2px);
}

.about-value-icon {
    transition: 0.25s ease;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 950px) {

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

    .about-value-item:nth-child(2) {
        border-right: none;
    }

    .about-value-item:nth-child(1),
    .about-value-item:nth-child(2) {
        border-bottom: 1px solid #e2e8f0;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .about-values-section {
        padding-bottom: 35px;
    }

    .about-values-row {
        grid-template-columns: 1fr;

        border-radius: 16px;
    }

    .about-value-item {
        min-height: auto;

        padding: 20px;

        border-right: none !important;

        border-bottom: 1px solid #e2e8f0;
    }

    .about-value-item:last-child {
        border-bottom: none;
    }

    .about-value-content h3 {
        font-size: 16px;
    }

    .about-value-content p {
        max-width: none;

        font-size: 10px;
    }

}



/* ==================================================
   BUILDING CONNECTIONS SECTION
================================================== */

.about-connections {
    padding: 60px 0;

    background: #ffffff;
}

.about-connections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


/* ==================================================
   LEFT
================================================== */

.connections-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: #2563eb;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 3px;
}

.connections-label span {
    width: 30px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #9b2be8
    );
}


/* Heading */

.connections-content h2 {
    max-width: 650px;

    margin-bottom: 24px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 4.5vw, 58px);
    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -1.8px;
}

.connections-content h2 strong {
    color: #4f46e5;

    font-weight: 500;
}


/* Paragraphs */

.connections-content > p {
    max-width: 650px;

    margin-bottom: 18px;

    color: #6b7d99;

    font-size: 13px;
    line-height: 1.8;
}


/* ==================================================
   MINI STATS
================================================== */

.connections-stats {
    display: flex;

    gap: 28px;

    margin-top: 28px;
}

.connections-stat {
    display: flex;
    align-items: center;

    gap: 10px;
}

.connections-stat-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #6548f5;

    background: #f5f2ff;

    border: 1px solid #e7e1ff;

    border-radius: 50%;
}

.connections-stat-icon svg {
    width: 17px;
    height: 17px;

    stroke-width: 1.8;
}

.connections-stat strong {
    display: block;

    margin-bottom: 2px;

    color: #5b5b60;

    font-size: 14px;
    font-weight: 700;
}

.connections-stat span {
    color: #718096;

    font-size: 8.5px;
}


/* ==================================================
   RIGHT WRAPPER
================================================== */

.connections-card-wrap {
    display: grid;

    gap: 12px;

    padding: 12px;

    background: rgba(255, 255, 255, 0.8);

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.05);
}


/* ==================================================
   RIGHT CARDS
================================================== */

.connections-card {
    min-height: 115px;

    padding: 22px 24px;

    display: flex;
    align-items: center;

    gap: 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 17px;

    transition: 0.3s ease;
}

.connections-card:hover {
    transform: translateX(5px);

    border-color: #d8d2ff;

    box-shadow:
        0 10px 28px
        rgba(79, 70, 229, 0.06);
}


/* Icon */

.connections-card-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #6548f5;
}

.connections-card-icon svg {
    width: 25px;
    height: 25px;

    stroke-width: 1.8;
}


/* Card content */

.connections-card h3 {
    margin-bottom: 5px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;
    font-weight: 700;
}

.connections-card p {
    max-width: 520px;

    color: #718096;

    font-size: 10.5px;
    line-height: 1.65;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 950px) {

    .about-connections-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .connections-content {
        text-align: center;
    }

    .connections-label,
    .connections-stats {
        justify-content: center;
    }

    .connections-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .connections-card-wrap {
        max-width: 700px;

        width: 100%;

        margin: auto;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .about-connections {
        padding: 45px 0;
    }

    .connections-content h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .connections-content > p {
        font-size: 11px;
    }

    .connections-stats {
        flex-direction: column;

        align-items: flex-start;

        max-width: 210px;

        margin-left: auto;
        margin-right: auto;

        gap: 12px;
    }

    .connections-card-wrap {
        padding: 8px;

        border-radius: 17px;
    }

    .connections-card {
        min-height: auto;

        padding: 18px;

        gap: 14px;
    }

    .connections-card-icon {
        width: 34px;
        height: 34px;
    }

    .connections-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .connections-card h3 {
        font-size: 14px;
    }

    .connections-card p {
        font-size: 9px;
    }

}





/* ==================================================
   WHAT WE OFFER
================================================== */

.about-offer-section {
    padding: 70px 0;

    background: #f8fafc;
}


/* =========================
   HEADING
========================= */

.offer-heading {
    max-width: 760px;

    margin: 0 auto 42px;

    text-align: center;
}

.offer-label {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;

    color: #2563eb;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;
}

.offer-label span {
    width: 32px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #9b2be8
    );
}

.offer-heading h2 {
    margin-bottom: 14px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 4vw, 54px);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1.6px;
}

.offer-heading h2 strong {
    display: block;

    color: #4f46e5;

    font-weight: 500;
}

.offer-heading p {
    color: #718096;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================
   GRID
========================= */

.offer-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


/* =========================
   CARD
========================= */

.offer-card {
    min-height: 215px;

    padding: 28px 26px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    transition: 0.3s ease;
}

.offer-card:hover {
    transform: translateY(-5px);

    border-color: #d8d2ff;

    box-shadow:
        0 16px 35px
        rgba(15, 23, 42, 0.06);
}


/* =========================
   ICON
========================= */

.offer-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    color: #6548f5;

    background: #f3f0ff;

    border-radius: 13px;
}

.offer-icon svg {
    width: 21px;
    height: 21px;

    stroke-width: 1.8;
}


/* =========================
   CONTENT
========================= */

.offer-card h3 {
    margin-bottom: 8px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.3;
}

.offer-card p {
    color: #718096;

    font-size: 11px;

    line-height: 1.7;
}


/* =========================
   FEATURED MIDDLE CARD
========================= */

.offer-card:nth-child(5) {
    border-color: #d7d0ff;

    box-shadow:
        0 10px 30px
        rgba(79, 70, 229, 0.05);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 950px) {

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

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .about-offer-section {
        padding: 50px 0;
    }

    .offer-heading {
        margin-bottom: 30px;
    }

    .offer-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .offer-heading p {
        font-size: 12px;
    }

    .offer-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .offer-card {
        min-height: auto;

        padding: 22px;
    }

    .offer-icon {
        width: 42px;
        height: 42px;

        margin-bottom: 16px;
    }

    .offer-card h3 {
        font-size: 16px;
    }

    .offer-card p {
        font-size: 10px;
    }

}




/* ==================================================
   WHY CHOOSE US
================================================== */

.why-choose-section {
    padding: 60px 0;

    background: #ffffff;
}

.why-choose-box {
    padding: 48px 28px 38px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    box-shadow:
        0 12px 35px
        rgba(15, 23, 42, 0.04);
}


/* =========================
   HEADING
========================= */

.why-choose-heading {
    text-align: center;

    margin-bottom: 40px;
}

.why-choose-label {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;

    color: #2563eb;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 3px;
}

.why-choose-label span {
    width: 30px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #9b2be8
    );
}

.why-choose-heading h2 {
    margin: 0;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 4vw, 56px);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1.6px;
}

.why-choose-heading h2 strong {
    color: #4f46e5;

    font-weight: 500;
}


/* =========================
   GRID
========================= */

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}


/* =========================
   ITEM
========================= */

.why-choose-item {
    min-height: 175px;

    padding: 12px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.why-choose-item:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}


/* =========================
   ICON
========================= */

.why-choose-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 14px;

    color: #3366f2;
}

.why-choose-icon svg {
    width: 28px;
    height: 28px;

    stroke-width: 1.8;
}


/* =========================
   CONTENT
========================= */

.why-choose-item h3 {
    margin-bottom: 8px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    font-weight: 700;
}

.why-choose-item p {
    max-width: 190px;

    color: #718096;

    font-size: 10px;

    line-height: 1.65;
}


/* =========================
   HOVER
========================= */

.why-choose-item {
    transition: 0.25s ease;
}

.why-choose-item:hover {
    transform: translateY(-4px);
}

.why-choose-item:hover .why-choose-icon {
    color: #7c3aed;
}

.why-choose-icon {
    transition: 0.25s ease;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {

    .why-choose-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .why-choose-item {
        padding: 20px;
    }

    .why-choose-item:nth-child(3) {
        border-right: none;
    }

    .why-choose-item:nth-child(1),
    .why-choose-item:nth-child(2),
    .why-choose-item:nth-child(3) {
        border-bottom: 1px solid #e2e8f0;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    .why-choose-section {
        padding: 45px 0;
    }

    .why-choose-box {
        padding: 35px 18px 25px;

        border-radius: 18px;
    }

    .why-choose-heading {
        margin-bottom: 28px;
    }

    .why-choose-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .why-choose-grid {
        grid-template-columns: 1fr;
    }

    .why-choose-item {
        min-height: auto;

        padding: 22px 10px;

        border-right: none !important;
        border-bottom: 1px solid #e2e8f0;
    }

    .why-choose-item:last-child {
        border-bottom: none;
    }

    .why-choose-icon {
        width: 42px;
        height: 42px;
    }

    .why-choose-icon svg {
        width: 24px;
        height: 24px;
    }

    .why-choose-item h3 {
        font-size: 15px;
    }

    .why-choose-item p {
        max-width: 260px;

        font-size: 10px;
    }

}


/* ==================================================
   TEAM SECTION
================================================== */

.team-section {
    padding: 65px 0 75px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(99, 102, 241, 0.06),
            transparent 32%
        ),
        #ffffff;
}


/* ==================================================
   HEADING
================================================== */

.team-heading {
    max-width: 700px;

    margin: 0 auto 38px;

    text-align: center;
}


.team-label {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 12px;

    color: #2563eb;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 3px;
}


.team-label span {
    width: 30px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #9b2be8
    );
}


.team-heading h2 {
    margin-bottom: 12px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 4vw, 54px);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1.5px;
}


.team-heading h2 strong {
    display: block;

    color: #4f46e5;

    font-weight: 500;
}


.team-heading p {
    max-width: 570px;

    margin: auto;

    color: #718096;

    font-size: 12px;

    line-height: 1.7;
}


/* ==================================================
   GRID
================================================== */

.team-grid {
    max-width: 1050px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


/* ==================================================
   FLIP CARD
================================================== */

.team-card {
    height: 410px;

    perspective: 1200px;
}


.team-card-inner {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    transition:
        transform 0.75s
        cubic-bezier(0.2, 0.7, 0.2, 1);
}


.team-card:hover .team-card-inner {
    transform: rotateY(180deg);
}


/* ==================================================
   FRONT + BACK
================================================== */

.team-card-front,
.team-card-back {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 1px solid #e2e8f0;

    border-radius: 20px;

    box-shadow:
        0 14px 35px
        rgba(15, 23, 42, 0.06);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ==================================================
   FRONT
================================================== */

.team-card-front {
    background: #ffffff;
}


/* ==================================================
   IMAGE
================================================== */

.team-image {
    position: relative;

    width: 100%;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: linear-gradient(
        135deg,
        #f5f3ff,
        #f8fafc
    );
}


.team-image img {
    width: 215px;
    height: 215px;

    display: block;

    object-fit: cover;
    object-position: center 15%;

    border-radius: 50%;

    border: 5px solid #ffffff;

    box-shadow:
        0 8px 25px
        rgba(79, 70, 229, 0.12);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.team-card:hover .team-image img {
    transform: scale(1.04);

    box-shadow:
        0 12px 30px
        rgba(79, 70, 229, 0.18);
}



.team-image::after {
    display: none;
}


/* ==================================================
   FRONT CONTENT
================================================== */

.team-front-content {
    padding: 18px 20px;

    text-align: center;
}


.team-front-content h3 {
    margin-bottom: 4px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 19px;

    font-weight: 700;
}


.team-position {
    display: block;

    margin-bottom: 13px;

    color: #6b7d99;

    font-size: 10px;

    font-weight: 600;
}


/* ==================================================
   FRONT SOCIAL ICONS
================================================== */

.team-socials {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.team-socials a {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6548f5;

    background: #f4f1ff;

    border: 1px solid #e5deff;

    border-radius: 50%;

    text-decoration: none;

    transition: 0.25s ease;
}


.team-socials a i {
    font-size: 13px;

    line-height: 1;
}


.team-socials a:hover {
    color: #ffffff;

    background: #6548f5;

    border-color: #6548f5;

    transform: translateY(-3px);
}


/* ==================================================
   BACK SIDE
================================================== */

.team-card-back {
    padding: 32px 28px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    color: #ffffff;

    background:
        radial-gradient(
            circle at top right,
            rgba(168, 85, 247, 0.45),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #2563eb 0%,
            #4f46e5 48%,
            #9333ea 100%
        );

    transform: rotateY(180deg);
}


/* ==================================================
   BACK ICON
================================================== */

.team-back-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.13);

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 50%;
}


.team-back-icon i {
    font-size: 20px;
}


/* ==================================================
   BACK CONTENT
================================================== */

.team-card-back h3 {
    margin-bottom: 5px;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    font-weight: 700;
}


.team-card-back > span {
    display: block;

    margin-bottom: 17px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


.team-card-back p {
    max-width: 260px;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 10.5px;

    line-height: 1.75;
}


/* ==================================================
   BACK SOCIAL ICONS
================================================== */

.team-back-socials {
    display: flex;

    gap: 9px;
}


.team-back-socials a {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 50%;

    text-decoration: none;

    transition: 0.25s ease;
}


.team-back-socials a i {
    font-size: 13px;

    line-height: 1;
}


.team-back-socials a:hover {
    color: #4f46e5;

    background: #ffffff;

    transform: translateY(-3px);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 950px) {

    .team-grid {
        max-width: 720px;

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

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .team-section {
        padding: 50px 0;
    }


    .team-heading {
        margin-bottom: 30px;
    }


    .team-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .team-heading p {
        font-size: 10.5px;
    }


    .team-grid {
        max-width: 340px;

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .team-card {
        height: 375px;
    }


    .team-image {
        height: 230px;
    }


    .team-card-back {
        padding: 26px 22px;
    }

}




/* ==================================================
   ABOUT - HOW IT WORKS
================================================== */

.about-how-section {
    padding: 65px 0 70px;

    background: #f8faff;
}


/* ==================================================
   HEADING
================================================== */

.about-how-heading {
    max-width: 760px;

    margin: 0 auto 48px;

    text-align: center;
}


.about-how-label {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 14px;

    color: #2563eb;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 3px;
}


.about-how-label span {
    width: 30px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #8b3df0
    );
}


.about-how-heading h2 {
    margin: 0;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(44px, 4.2vw, 58px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -1.8px;
}


.about-how-heading h2 strong {
    display: block;

    color: #4f46e5;

    font-weight: 500;
}


/* ==================================================
   GRID
================================================== */

.about-how-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


/* ==================================================
   CARD
================================================== */

.about-how-card {
    position: relative;

    min-height: 230px;

    padding: 38px 25px 28px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Hover */

.about-how-card:hover {
    transform: translateY(-6px);

    border-color: #d5ccff;

    box-shadow:
        0 18px 38px
        rgba(79, 70, 229, 0.08);
}


/* ==================================================
   STEP NUMBER
================================================== */

.about-step-number {
    position: absolute;

    top: -16px;
    left: -10px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #2563eb,
        #8b35ef
    );

    border-radius: 50%;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 8px 20px
        rgba(79, 70, 229, 0.20);

    z-index: 2;
}


/* ==================================================
   ICON
================================================== */

.about-how-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6548f5;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


.about-how-icon svg {
    width: 30px;
    height: 30px;

    stroke-width: 1.8;
}


.about-how-card:hover .about-how-icon {
    color: #2563eb;

    transform: scale(1.1);
}


/* ==================================================
   CARD CONTENT
================================================== */

.about-how-card h3 {
    margin: 0 0 9px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.3;
}


.about-how-card p {
    max-width: 245px;

    margin: 0;

    color: #718096;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 10.5px;

    line-height: 1.7;
}


/* ==================================================
   CONNECTING LINE
================================================== */

.about-how-grid {
    position: relative;
}


/*
   Light line behind cards
*/

.about-how-grid::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 3%;
    right: 3%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #ddd7ff 10%,
        #ddd7ff 90%,
        transparent
    );

    z-index: 0;
}


.about-how-card {
    z-index: 1;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

    .about-how-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 28px 18px;
    }


    .about-how-grid::before {
        display: none;
    }


    .about-how-card {
        min-height: 220px;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .about-how-section {
        padding: 50px 0;
    }


    .about-how-heading {
        margin-bottom: 38px;
    }


    .about-how-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .about-how-label {
        font-size: 8px;
    }


    .about-how-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .about-how-card {
        min-height: 190px;

        padding: 32px 20px 24px;
    }


    .about-step-number {
        top: -14px;
        left: -6px;

        width: 34px;
        height: 34px;

        font-size: 11px;
    }


    .about-how-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 12px;
    }


    .about-how-icon svg {
        width: 26px;
        height: 26px;
    }


    .about-how-card h3 {
        font-size: 15px;
    }


    .about-how-card p {
        max-width: 270px;

        font-size: 10px;
    }

}
/* ==================================================
   ABOUT FINAL CTA
================================================== */

.about-final-cta {
    padding: 30px 0 55px;

    background: #ffffff;
}


/* Main Box */

.about-final-box {
    min-height: 150px;

    padding: 28px 36px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    background:
        linear-gradient(
            110deg,
            #faf7ff 0%,
            #ffffff 45%,
            #f5f8ff 100%
        );

    border: 1px solid #e2e8f0;
    border-radius: 22px;
}


/* ==================================================
   LEFT SIDE
================================================== */

.about-final-left {
    display: flex;
    align-items: center;

    gap: 22px;
}


.about-final-icon {
    width: 86px;
    height: 86px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #6548f5;

    background:
        linear-gradient(
            135deg,
            #f4efff,
            #faf8ff
        );

    border-radius: 18px;
}


.about-final-icon svg {
    width: 32px;
    height: 32px;

    stroke-width: 1.8;
}


/* Content */

.about-final-content h2 {
    margin-bottom: 7px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 22px;
    font-weight: 500;

    line-height: 1.3;
}


.about-final-content p {
    max-width: 720px;

    margin: 0;

    color: #718096;

    font-size: 11px;
    line-height: 1.7;
}


/* ==================================================
   BUTTONS
================================================== */

.about-final-actions {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}


.about-final-primary,
.about-final-secondary {
    min-height: 48px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 12px;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition: 0.25s ease;
}


/* Primary */

.about-final-primary {
    color: #ffffff;

    background: linear-gradient(
        90deg,
        #2563eb,
        #9b2be8
    );

    box-shadow:
        0 10px 24px
        rgba(79, 70, 229, 0.15);
}


.about-final-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(79, 70, 229, 0.22);
}


/* Secondary */

.about-final-secondary {
    color: #0f172a;

    background: #ffffff;

    border: 1px solid #e2e8f0;
}


.about-final-secondary:hover {
    border-color: #c7d2fe;

    transform: translateY(-2px);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    .about-final-box {
        flex-direction: column;

        align-items: flex-start;
    }

    .about-final-actions {
        width: 100%;
    }

    .about-final-primary,
    .about-final-secondary {
        flex: 1;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .about-final-cta {
        padding: 25px 0 40px;
    }

    .about-final-box {
        padding: 24px 20px;

        border-radius: 18px;
    }

    .about-final-left {
        align-items: flex-start;

        gap: 15px;
    }

    .about-final-icon {
        width: 58px;
        height: 58px;

        border-radius: 14px;
    }

    .about-final-icon svg {
        width: 24px;
        height: 24px;
    }

    .about-final-content h2 {
        font-size: 18px;
    }

    .about-final-content p {
        font-size: 10px;
    }

    .about-final-actions {
        flex-direction: column;
    }

    .about-final-primary,
    .about-final-secondary {
        width: 100%;
    }

}


/* 
Logo main  */




.logo {
    width: 210px;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-shrink: 0;
    overflow: visible;
}

.logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: left center;

    transform: scale(2.1);
    transform-origin: left center;
}




/* ==================================================
   WEBSITES PAGE
================================================== */

.websites-hero {
    padding: 28px 0 12px;

    background: #ffffff;
}


/* HERO BOX */

.websites-hero-box {
    padding: 32px 40px 34px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            #fffaf2 0%,
            #ffffff 48%,
            #f0f5ff 100%
        );

    border: 1px solid #e2e8f0;

    border-radius: 26px;
}


.websites-hero-box h1 {
    margin-bottom: 2px;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(40px, 4vw, 56px);

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -1.7px;
}


.websites-hero-box h2 {
    color: #5145f5;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(34px, 3.5vw, 47px);

    font-weight: 400;

    line-height: 1.1;
}


.websites-hero-line {
    width: 150px;
    height: 2px;

    margin: 22px auto 22px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #7567ff,
            transparent
        );
}


.websites-hero-box p {
    max-width: 760px;

    margin: auto;

    color: #52525b;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 13px;

    line-height: 1.75;
}


/* ==================================================
   MARKET STATS
================================================== */

.website-market-stats {
    min-height: 70px;

    margin-top: 16px;

    padding: 10px 20px;

    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    background: #ffffff;

    border: 1px solid #dfe6ef;

    border-radius: 16px;

    box-shadow:
        0 7px 18px
        rgba(15, 23, 42, 0.05);
}


.website-market-stat {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 11px;
}


.market-stat-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #2563eb;

    background: #eff6ff;

    border-radius: 50%;
}


.market-stat-icon svg {
    width: 17px;
    height: 17px;
}


.website-market-stat strong {
    display: block;

    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 15px;
}


.website-market-stat span {
    display: block;

    color: #718096;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 8px;
}


.market-stat-divider {
    width: 1px;
    height: 30px;

    background: #dbe3ee;
}


/* ==================================================
   LIVE BAR
================================================== */

.market-live-row {
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    flex-wrap: wrap;

    margin-top: 8px;
}


.market-live,
.market-live-pill {
    min-height: 30px;

    padding: 0 12px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    background: #ffffff;

    color: #475569;

    border: 1px solid #dce3ec;

    border-radius: 999px;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 9px;

    font-weight: 600;
}


.market-live {
    color: #059669;

    background: #ecfdf5;

    border-color: #a7f3d0;

    letter-spacing: 1px;
}


.market-live-dot {
    width: 7px;
    height: 7px;

    background: #10b981;

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        rgba(16, 185, 129, 0.12);
}


.market-live-pill svg {
    width: 13px;
    height: 13px;

    color: #2563eb;
}


/* ==================================================
   LISTING SECTION
================================================== */

.website-listing-section {
    padding: 55px 0 70px;

    background: #f8fafc;
}


.website-listing-heading {
    margin-bottom: 25px;

    display: flex;

    align-items: end;
    justify-content: space-between;

    gap: 30px;
}


.website-listing-heading > div > span {
    display: block;

    margin-bottom: 7px;

    color: #2563eb;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3px;
}


.website-listing-heading h2 {
    color: #0f172a;

    font-size: 34px;

    line-height: 1.15;
}


.website-listing-heading h2 strong {
    color: #4f46e5;
}


.website-listing-heading > p {
    max-width: 390px;

    color: #718096;

    font-size: 11px;

    line-height: 1.65;
}


/* ==================================================
   FILTER BAR
================================================== */

.website-filter-bar {
    margin-bottom: 28px;

    padding: 12px;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 0.8fr auto;

    gap: 9px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;
}


.website-filter-search {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0 12px;

    border: 1px solid #e2e8f0;

    border-radius: 10px;
}


.website-filter-search svg {
    width: 15px;
    height: 15px;

    color: #94a3b8;
}


.website-filter-search input {
    width: 100%;

    height: 40px;

    border: none;

    outline: none;

    font-size: 11px;
}


.website-filter-bar select {
    min-height: 40px;

    padding: 0 10px;

    color: #475569;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    font-size: 10px;

    outline: none;
}


.website-filter-bar button {
    min-height: 40px;

    padding: 0 20px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    border: none;

    border-radius: 10px;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}


/* ==================================================
   RESULTS
================================================== */

.website-results-top {
    margin-bottom: 15px;

    color: #64748b;

    font-size: 10px;
}


.website-market-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;
}


/* CARD */

.marketplace-website-card {
    padding: 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    transition: 0.3s ease;
}


.marketplace-website-card:hover {
    transform: translateY(-4px);

    border-color: #c7d2fe;

    box-shadow:
        0 14px 35px
        rgba(15, 23, 42, 0.06);
}


/* CARD HEADER */

.website-card-header {
    display: flex;

    align-items: center;

    gap: 11px;

    padding-bottom: 14px;

    border-bottom: 1px solid #eef2f7;
}


.website-letter {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #2563eb;

    background: #eff6ff;

    border-radius: 11px;

    font-weight: 800;
}


.website-card-header h3 {
    margin-bottom: 2px;

    color: #0f172a;

    font-size: 14px;
}


.website-card-header span {
    color: #718096;

    font-size: 9px;
}


/* METRICS */

.website-card-metrics {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    padding: 15px 0;
}


.website-card-metrics span,
.website-card-pricing span {
    display: block;

    margin-bottom: 2px;

    color: #94a3b8;

    font-size: 8px;
}


.website-card-metrics strong {
    color: #0f172a;

    font-size: 12px;
}


/* PRICING */

.website-card-pricing {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;

    margin-bottom: 15px;

    padding: 12px;

    background: #f8fafc;

    border-radius: 10px;
}


.website-card-pricing strong {
    color: #0f172a;

    font-size: 12px;
}


/* BUTTON */

.website-view-btn {
    min-height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #ffffff;

    background: #0f172a;

    border-radius: 9px;

    font-size: 10px;

    font-weight: 700;

    transition: 0.25s;
}


.website-view-btn:hover {
    background: #2563eb;
}


/* NO RESULTS */

.no-websites {
    grid-column: 1 / -1;

    padding: 60px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1000px) {

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


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


    .website-filter-search {
        grid-column: 1 / -1;
    }


    .website-market-stats {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 18px;
    }


    .market-stat-divider {
        display: none;
    }

}


@media (max-width: 600px) {

    .websites-hero {
        padding-top: 15px;
    }


    .websites-hero-box {
        padding: 30px 20px;

        border-radius: 20px;
    }


    .websites-hero-box h1 {
        font-size: 38px;
    }


    .websites-hero-box h2 {
        font-size: 31px;
    }


    .websites-hero-box p {
        font-size: 11px;
    }


    .website-market-stats {
        grid-template-columns: 1fr;

        gap: 12px;

        padding: 16px;
    }


    .website-market-stat {
        justify-content: flex-start;
    }


    .website-listing-heading {
        flex-direction: column;

        align-items: flex-start;
    }


    .website-filter-bar {
        grid-template-columns: 1fr;
    }


    .website-filter-search {
        grid-column: auto;
    }


    .website-market-grid {
        grid-template-columns: 1fr;
    }

}



/* ==================================================
   MARKET COUNTS + ADVANCED FILTERS
================================================== */

.market-filter-section {
    padding: 30px 0 55px;

    background: #ffffff;
}


/* =========================
   COUNT GRID
========================= */

.market-count-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    margin-bottom: 20px;
}


.market-count-card {
    min-height: 96px;

    padding: 16px 18px;

    display: flex;
    align-items: center;

    gap: 14px;

    position: relative;

    background: #ffffff;

    border: 1px solid #dce5f0;

    border-radius: 17px;

    transition: 0.25s ease;
}


.market-count-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, 0.06);
}


/* ICON */

.count-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 14px;
}


.count-icon svg {
    width: 23px;
    height: 23px;

    stroke-width: 2;
}


.count-blue {
    color: #2563eb;
    background: #e5e7ff;
}


.count-orange {
    color: #e87900;
    background: #fff0df;
}


.count-purple {
    color: #7c3aed;
    background: #f0e5ff;
}


.count-sky {
    color: #0284c7;
    background: #e0f2fe;
}


.count-green {
    color: #059669;
    background: #dcf7ee;
}


.count-red {
    color: #e11d48;
    background: #ffe3e9;
}


.count-red-light {
    color: #ef2929;
    background: #fee2e2;
}


/* CONTENT */

.count-content {
    min-width: 0;
}


.count-content h3 {
    margin-bottom: 3px;

    color: #334155;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}


.count-content span {
    color: #172554;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 10px;
    font-weight: 600;

    white-space: nowrap;
}


/* NUMBER */

.count-number {
    margin-left: auto;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 17px;
    font-weight: 800;
}


.count-number-blue {
    color: #2563eb;
}


.count-number-orange {
    color: #e87900;
}


.count-number-purple {
    color: #7c3aed;
}


.count-number-sky {
    color: #0284c7;
}


.count-number-green {
    color: #059669;
}


.count-number-red {
    color: #e11d48;
}


/* ==================================================
   ADVANCED FILTER BOX
================================================== */

/* ==================================================
   ADVANCED FILTERS - UPDATED
================================================== */

.advanced-filter-box {
    padding: 16px;

    background: #ffffff;

    border: 1px solid #d7e0ec;
    border-radius: 20px;

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, 0.05);
}


.advanced-filter-grid {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 12px;
}


/* ==================================================
   SELECT DROPDOWNS
================================================== */

.advanced-filter-grid select {
    width: 100%;

    min-height: 58px;

    padding: 0 18px;

    color: #172554;

    background: #ffffff;

    border: 1.5px solid #d6dfeb;

    border-radius: 12px;

    outline: none;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

    box-shadow:
        0 3px 10px
        rgba(15, 23, 42, 0.04);
}


/* OPTION TEXT */

.advanced-filter-grid select option {
    color: #0f172a;

    background: #ffffff;

    font-size: 14px;
    font-weight: 500;
}


/* HOVER */

.advanced-filter-grid select:hover {
    border-color: #8aa5ff;

    background: #fbfdff;
}


/* FOCUS */

.advanced-filter-grid select:focus {
    color: #0f172a;

    border-color: #4169e1;

    box-shadow:
        0 0 0 4px
        rgba(37, 99, 235, 0.09);
}


/* selected value darker */

.advanced-filter-grid select:not(:has(option[value=""]:checked)) {
    color: #0f172a;

    font-weight: 700;
}


/* ==================================================
   ACTION BUTTONS
================================================== */

.advanced-filter-actions {
    margin-top: 15px;

    display: flex;
    justify-content: flex-end;

    gap: 10px;
}


.filter-apply-btn,
.filter-reset-btn {
    min-height: 46px;

    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition: 0.25s ease;
}


.filter-apply-btn {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    border: none;

    cursor: pointer;
}


.filter-apply-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(79, 70, 229, 0.18);
}


.filter-reset-btn {
    color: #172554;

    background: #ffffff;

    border: 1px solid #d7e0ec;
}


.filter-reset-btn:hover {
    border-color: #9db5ff;

    background: #f8faff;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {

    .advanced-filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    .advanced-filter-box {
        padding: 12px;
    }

    .advanced-filter-grid {
        grid-template-columns: 1fr;
    }

    .advanced-filter-grid select {
        min-height: 54px;

        font-size: 13px;
    }

    .advanced-filter-actions {
        flex-direction: column;
    }

    .filter-apply-btn,
    .filter-reset-btn {
        width: 100%;
    }

}


/* ==================================================
   WEBSITE RESULTS
================================================== */

.website-results-header {
    margin-top: 34px;
    margin-bottom: 16px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}


.results-small-label {
    display: block;

    margin-bottom: 5px;

    color: #2563eb;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


.website-results-header h2 {
    margin: 0;

    color: #0f172a;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;
    font-weight: 600;
}


.website-result-count {
    min-height: 40px;

    padding: 0 15px;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #475569;

    background: #ffffff;

    border: 1px solid #dce4ef;
    border-radius: 10px;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 11px;
}


.website-result-count svg {
    width: 15px;
    height: 15px;

    color: #2563eb;
}


.website-result-count strong {
    color: #0f172a;

    font-size: 13px;
}


/* ==================================================
   TABLE WRAPPER
================================================== */

.live-websites-table-wrap {
    width: 100%;

    overflow-x: auto;

    background: #ffffff;

    border: 1px solid #dce4ef;
    border-radius: 16px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.04);
}


/* ==================================================
   TABLE
================================================== */

.live-websites-table {
    width: 100%;

    min-width: 1050px;

    border-collapse: collapse;

    font-family: "Plus Jakarta Sans", sans-serif;
}


/* HEAD */

.live-websites-table thead {
    background: #f8fafc;
}


.live-websites-table th {
    padding: 15px 14px;

    color: #334155;

    border-bottom: 1px solid #dce4ef;

    text-align: left;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.4px;
}


/* BODY */

.live-websites-table td {
    padding: 14px;

    color: #475569;

    border-bottom: 1px solid #edf1f6;

    font-size: 10.5px;

    vertical-align: middle;
}


.live-websites-table tbody tr {
    transition: background 0.2s ease;
}


.live-websites-table tbody tr:hover {
    background: #f8faff;
}


.live-websites-table tbody tr:last-child td {
    border-bottom: none;
}


/* ==================================================
   WEBSITE NAME
================================================== */

.table-website-name {
    display: flex;
    align-items: center;

    gap: 9px;
}


.table-website-name strong {
    color: #0f172a;

    font-size: 11px;

    white-space: nowrap;
}


.table-site-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #2563eb;

    background: #eff6ff;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 800;
}


/* NICHE */

.table-niche {
    display: inline-flex;

    padding: 5px 8px;

    color: #5145cd;

    background: #f3f0ff;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 600;

    white-space: nowrap;
}


/* LINK */

.table-link-type {
    display: inline-flex;

    padding: 5px 8px;

    color: #047857;

    background: #ecfdf5;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;

    white-space: nowrap;
}


/* PRICE */

.table-price {
    color: #0f172a;

    font-size: 12px;
}


/* ==================================================
   BUY BUTTON
================================================== */

.live-buy-btn {
    min-width: 65px;
    min-height: 34px;

    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    border-radius: 8px;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;

    transition: 0.25s ease;
}


.live-buy-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 16px
        rgba(79, 70, 229, 0.18);
}


/* ==================================================
   EMPTY RESULT
================================================== */

.no-live-results {
    padding: 55px !important;

    text-align: center;
}


.no-live-results svg {
    width: 30px;
    height: 30px;

    display: block;

    margin: 0 auto 10px;

    color: #94a3b8;
}


.no-live-results strong {
    display: block;

    margin-bottom: 4px;

    color: #0f172a;

    font-size: 14px;
}


.no-live-results span {
    color: #718096;

    font-size: 10px;
}


/* ==================================================
   FILTER BUTTON ICONS
================================================== */

.filter-apply-btn svg,
.filter-reset-btn svg {
    width: 14px;
    height: 14px;

    margin-right: 7px;
}


/* ==================================================
   PAGINATION
================================================== */

.website-pagination {
    margin-top: 25px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

    .website-results-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .website-results-header h2 {
        font-size: 25px;
    }

    .website-result-count {
        width: 100%;
    }

}



/* ==================================================
   PREMIUM MARKETPLACE TABLE
================================================== */

.marketplace-results-box {
    margin-top: 26px;

    border: 1px solid #dfe6ef;
    border-radius: 18px;

    overflow: hidden;

    background: #fff;

    box-shadow:
        0 8px 30px
        rgba(15, 23, 42, .04);
}


/* ==================================================
   TOOLBAR
================================================== */

.marketplace-toolbar {
    min-height: 92px;

    padding: 18px 24px;

    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        minmax(280px, 1.5fr)
        140px
        165px
        190px;

    align-items: center;

    gap: 12px;

    border-bottom: 1px solid #e5eaf1;
}


.toolbar-result-count {
    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 13px;
    font-weight: 600;
}


.toolbar-result-count strong {
    font-weight: 800;
}


.toolbar-search {
    min-height: 52px;

    padding: 0 16px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid #d9e1ec;
    border-radius: 10px;

    background: #fff;
}


.toolbar-search svg {
    width: 18px;
    height: 18px;

    color: #334155;
}


.toolbar-search input {
    width: 100%;

    border: 0;
    outline: 0;

    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 13px;
    font-weight: 600;

    background: transparent;
}


.toolbar-search input::placeholder {
    color: #9aa7ba;
}


.bulk-search-btn {
    min-height: 52px;

    border: 2px solid #ff6b3d;
    border-radius: 6px;

    color: #ff6035;

    background: #fff;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}


.toolbar-select {
    width: 100%;

    min-height: 52px;

    padding: 0 15px;

    border: 1px solid #d9e1ec;
    border-radius: 9px;

    color: #334155;

    background: #fff;

    outline: none;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


/* ==================================================
   TABLE
================================================== */

.premium-market-table-wrap {
    width: 100%;

    overflow-x: auto;
}


.premium-market-table {
    width: 100%;

    min-width: 1380px;

    border-collapse: collapse;

    font-family: "Plus Jakarta Sans", sans-serif;
}


.premium-market-table thead {
    background: #f7f9fc;
}


.premium-market-table th {
    min-height: 90px;

    padding: 16px;

    border-right: 1px solid #edf1f6;
    border-bottom: 1px solid #dae3ed;

    color: #334155;

    text-align: center;
    vertical-align: middle;

    font-size: 12px;
    font-weight: 800;
}


.premium-market-table th.website-col {
    width: 390px;

    text-align: center;
}


.premium-market-table th span {
    display: block;
}


.metric-logo {
    margin-bottom: 6px;

    font-weight: 900;
}


.metric-logo.orange {
    color: #ff6a32;
}


.metric-logo.moz {
    color: #1ba9df;

    font-size: 14px;
}


.metric-logo.ahrefs {
    color: #ef7a18;

    font-size: 14px;
}


.metric-logo.semrush {
    color: #111827;

    font-size: 12px;
}


/* ==================================================
   ROW
================================================== */

.premium-market-table td {
    padding: 22px 16px;

    border-bottom: 1px solid #e6ebf2;

    color: #475569;

    text-align: center;
    vertical-align: middle;

    font-size: 11px;
}


.premium-market-table tbody tr:nth-child(even) {
    background: #f8fbff;
}


.premium-market-table tbody tr:hover {
    background: #f4f8ff;
}


/* ==================================================
   WEBSITE CELL
================================================== */

.premium-market-table td:first-child {
    text-align: left;
}


.premium-site-info {
    display: flex;
    align-items: center;

    gap: 14px;
}


.premium-site-globe {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    color: #0589cc;

    background: #eef8ff;
}


.premium-site-globe svg {
    width: 19px;
    height: 19px;
}


.premium-site-main {
    min-width: 0;
}


.premium-site-title-row {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 8px;
}


.premium-site-title-row strong {
    color: #172554;

    font-size: 12px;
    font-weight: 800;
}


.new-site-badge {
    padding: 4px 7px;

    border: 1px solid #ffd396;
    border-radius: 999px;

    color: #ed8500;

    background: #fff7e7;

    font-size: 8px;
    font-weight: 800;
}


/* NICHE TAGS */

.premium-site-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    margin-bottom: 8px;
}


.premium-site-tags span {
    padding: 5px 7px;

    border-radius: 999px;

    color: #2563eb;

    background: #edf5ff;

    font-size: 8px;
    font-weight: 700;
}


/* SITE EXTRA */

.premium-site-extra {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 6px;
}


.premium-site-extra span {
    min-height: 25px;

    padding: 0 8px;

    display: inline-flex;
    align-items: center;

    gap: 4px;

    border-radius: 999px;

    color: #475569;

    background: #f1f5f9;

    font-size: 8px;
    font-weight: 700;
}


.premium-site-extra svg {
    width: 11px;
    height: 11px;
}


/* ==================================================
   CIRCLE METRICS
================================================== */

.circle-metric {
    width: 48px;
    height: 48px;

    margin: auto;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        conic-gradient(
            currentColor 0 78%,
            #e9eef4 78% 100%
        );

    position: relative;
}


.circle-metric::before {
    content: "";

    width: 37px;
    height: 37px;

    position: absolute;

    border-radius: 50%;

    background: #fff;
}


.circle-metric strong {
    position: relative;

    color: #1e293b;

    font-size: 11px;
    font-weight: 800;

    z-index: 2;
}


.metric-orange {
    color: #f97316;
}


.metric-blue {
    color: #38bdf8;
}


/* ==================================================
   TRAFFIC
================================================== */

.traffic-cell {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 3px;
}


.mini-chart {
    color: #ef4444;
}


.semrush-cell .mini-chart {
    color: #16a34a;
}


.mini-chart svg {
    width: 48px;
    height: 25px;
}


.traffic-cell strong {
    color: #172554;

    font-size: 13px;
    font-weight: 800;
}


.traffic-cell small {
    color: #718096;

    font-size: 8px;
    font-weight: 600;
}


/* ==================================================
   COUNTRY
================================================== */

.premium-country {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;
}


.premium-country svg {
    width: 14px;
    height: 14px;

    color: #2563eb;
}


.premium-country strong {
    color: #334155;

    font-size: 10px;
}


/* ==================================================
   DELIVERY
================================================== */

.delivery-cell {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;
}


.follow-pill {
    padding: 6px 10px;

    border-radius: 999px;

    color: #1769ef;

    background: #edf5ff;

    font-size: 9px;
    font-weight: 800;
}


.instant-pill {
    padding: 5px 9px;

    display: inline-flex;
    align-items: center;

    gap: 4px;

    border-radius: 999px;

    color: #e67b00;

    background: #fff8db;

    font-size: 8px;
    font-weight: 800;
}


.instant-pill svg {
    width: 11px;
    height: 11px;
}


/* ==================================================
   PRICE
================================================== */

.premium-price-cell {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;
}


.premium-price {
    color: #0f172a;

    font-size: 13px;
    font-weight: 800;
}


.member-price-btn {
    min-height: 34px;

    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border: 1px solid #ffc67d;
    border-radius: 7px;

    color: #c56a00;

    background: #fffaf1;

    text-decoration: none;

    font-size: 8px;
    font-weight: 800;
}


.member-price-btn svg {
    width: 12px;
    height: 12px;
}


/* ==================================================
   EMPTY + PAGINATION
================================================== */

.premium-empty {
    padding: 50px !important;

    color: #64748b !important;

    text-align: center !important;

    font-size: 13px !important;
}





/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1200px) {

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

}


@media (max-width: 700px) {

    .marketplace-toolbar {
        grid-template-columns: 1fr;

        padding: 14px;
    }

}



/* ==================================================
   CUSTOM PAGINATION
================================================== */

.custom-pagination {
    padding: 22px 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    border-top: 1px solid #e5eaf1;

    background: #ffffff;
}


.pagination-btn {
    min-height: 40px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #334155;

    background: #ffffff;

    border: 1px solid #d9e2ec;
    border-radius: 8px;

    text-decoration: none;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 11px;
    font-weight: 700;

    transition: .2s ease;
}


.pagination-btn:hover {
    color: #2563eb;

    border-color: #9db5ff;

    background: #f7f9ff;
}


.pagination-btn svg {
    width: 15px !important;
    height: 15px !important;

    stroke-width: 2;

    flex-shrink: 0;
}


.pagination-btn.disabled {
    color: #a0aec0;

    background: #f8fafc;

    cursor: not-allowed;
}


.pagination-numbers {
    display: flex;
    align-items: center;

    gap: 6px;
}


.pagination-number {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #475569;

    background: #ffffff;

    border: 1px solid #d9e2ec;
    border-radius: 8px;

    text-decoration: none;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 11px;
    font-weight: 700;

    transition: .2s ease;
}


.pagination-number:hover {
    color: #2563eb;

    border-color: #9db5ff;

    background: #f7f9ff;
}


.pagination-number.active {
    color: #ffffff;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );
}


.pagination-dots {
    padding: 0 3px;

    color: #94a3b8;

    font-size: 12px;
    font-weight: 700;
}


@media (max-width: 700px) {

    .custom-pagination {
        padding: 16px 10px;

        gap: 7px;
    }


    .pagination-btn {
        padding: 0 9px;

        font-size: 9px;
    }


    .pagination-number {
        width: 32px;
        height: 32px;

        font-size: 9px;
    }


    .pagination-numbers {
        gap: 4px;
    }

}

/* WEBSITE COLUMN CONTENT SHIFT RIGHT */

.premium-market-table td:first-child {
    padding-left: 30px !important;
}

.premium-site-info {
    margin-left: 24px;
    justify-content: flex-start;
}
.premium-site-main {
    max-width: 420px;
}



/* ==================================================
   GUEST POST PAGE
================================================== */

.guest-post-hero {
    padding: 70px 0 60px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(99, 102, 241, .13),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f8faff
        );
}


.guest-post-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, .75fr);

    align-items: center;

    gap: 60px;
}


.guest-post-eyebrow,
.guest-section-head > span,
.guest-post-cta-box > div > span {
    color: #2563eb;

    font-family: "Outfit", sans-serif;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}


.guest-post-hero-content h1 {
    max-width: 720px;

    margin: 14px 0 18px;

    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: clamp(44px, 5vw, 68px);
    font-weight: 700;

    line-height: 1.05;
}


.guest-post-hero-content h1 span {
    display: block;

    color: #4f46e5;
}


.guest-post-hero-content > p {
    max-width: 680px;

    margin: 0;

    color: #64748b;

    font-family: "Outfit", sans-serif;

    font-size: 17px;

    line-height: 1.75;
}


.guest-post-hero-actions {
    margin-top: 28px;

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}


.guest-primary-btn,
.guest-secondary-btn {
    min-height: 50px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 11px;

    font-family: "Outfit", sans-serif;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: .25s ease;
}


.guest-primary-btn {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    box-shadow:
        0 12px 25px
        rgba(79, 70, 229, .18);
}


.guest-primary-btn:hover {
    transform: translateY(-2px);
}


.guest-primary-btn svg {
    width: 16px;
    height: 16px;
}


.guest-secondary-btn {
    color: #172554;

    background: #ffffff;

    border: 1px solid #dbe3ef;
}


.guest-post-trust {
    margin-top: 28px;

    display: flex;
    flex-wrap: wrap;

    gap: 16px;
}


.guest-post-trust span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #475569;

    font-family: "Outfit", sans-serif;

    font-size: 12px;
    font-weight: 600;
}


.guest-post-trust svg {
    width: 15px;
    height: 15px;

    color: #2563eb;
}


/* HERO CARD */

.guest-post-hero-card {
    padding: 22px;

    background: rgba(255, 255, 255, .94);

    border: 1px solid #dce4ef;
    border-radius: 22px;

    box-shadow:
        0 25px 70px
        rgba(15, 23, 42, .09);
}


.guest-post-card-top {
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #0f172a;

    font-family: "Outfit", sans-serif;

    font-size: 14px;
    font-weight: 700;
}


.guest-live {
    padding: 5px 8px;

    color: #059669;

    background: #ecfdf5;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
}


.guest-metric-card {
    min-height: 82px;

    margin-top: 10px;

    padding: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid #e3e9f1;
    border-radius: 14px;

    background: #fbfdff;
}


.guest-metric-card span {
    display: block;

    margin-bottom: 4px;

    color: #94a3b8;

    font-family: "Outfit", sans-serif;

    font-size: 10px;
    font-weight: 600;
}


.guest-metric-card strong {
    color: #172554;

    font-family: "Outfit", sans-serif;

    font-size: 17px;
    font-weight: 750;
}


.guest-metric-card svg {
    width: 25px;
    height: 25px;

    color: #4f46e5;
}


.guest-card-footer {
    margin-top: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #475569;

    font-family: "Outfit", sans-serif;

    font-size: 11px;
    font-weight: 600;
}


.guest-card-footer svg {
    width: 15px;
    height: 15px;

    color: #059669;
}


/* ==================================================
   COMMON SECTION
================================================== */

.guest-benefits-section,
.guest-how-section {
    padding: 70px 0;
}


.guest-how-section {
    background: #f8faff;
}


.guest-section-head {
    max-width: 700px;

    margin: 0 auto 38px;

    text-align: center;
}


.guest-section-head h2 {
    margin: 10px 0 12px;

    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;

    line-height: 1.12;
}


.guest-section-head p {
    margin: 0;

    color: #64748b;

    font-family: "Outfit", sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


/* BENEFITS */

.guest-benefits-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}


.guest-benefit-card {
    padding: 25px 22px;

    border: 1px solid #e0e7f0;
    border-radius: 17px;

    background: #ffffff;

    transition: .25s ease;
}


.guest-benefit-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(15, 23, 42, .06);
}


.guest-benefit-card > svg {
    width: 38px;
    height: 38px;

    padding: 9px;

    color: #2563eb;

    background: #eff6ff;

    border-radius: 11px;
}


.guest-benefit-card h3 {
    margin: 17px 0 8px;

    color: #172554;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 17px;
}


.guest-benefit-card p {
    margin: 0;

    color: #64748b;

    font-family: "Outfit", sans-serif;

    font-size: 13px;

    line-height: 1.65;
}


/* HOW */

.guest-how-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}


.guest-step-card {
    position: relative;

    padding: 27px 22px;

    border: 1px solid #dfe6f0;
    border-radius: 17px;

    background: #ffffff;
}


.guest-step-number {
    position: absolute;

    top: 16px;
    right: 17px;

    color: #d8e1ee;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 29px;
    font-weight: 800;
}


.guest-step-card > svg {
    width: 38px;
    height: 38px;

    padding: 9px;

    color: #7c3aed;

    background: #f4efff;

    border-radius: 11px;
}


.guest-step-card h3 {
    margin: 18px 0 8px;

    color: #172554;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 16px;
}


.guest-step-card p {
    margin: 0;

    color: #64748b;

    font-family: "Outfit", sans-serif;

    font-size: 12px;

    line-height: 1.65;
}


/* ==================================================
   CTA
================================================== */

.guest-post-cta {
    padding: 25px 0 70px;
}


.guest-post-cta-box {
    padding: 38px 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border-radius: 22px;

    color: #ffffff;

    background:
        linear-gradient(
            115deg,
            #172554,
            #312e81,
            #2563eb
        );
}


.guest-post-cta-box h2 {
    margin: 8px 0 8px;

    color: #ffffff;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 30px;
}


.guest-post-cta-box p {
    max-width: 620px;

    margin: 0;

    color: rgba(255,255,255,.75);

    font-family: "Outfit", sans-serif;

    font-size: 13px;

    line-height: 1.6;
}


.guest-post-cta-box .guest-primary-btn {
    flex-shrink: 0;

    background: #ffffff;

    color: #172554;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1050px) {

    .guest-post-hero-grid {
        grid-template-columns: 1fr;
    }

    .guest-post-hero-card {
        max-width: 600px;
    }

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

}


@media (max-width: 650px) {

    .guest-post-hero {
        padding: 45px 0;
    }

    .guest-post-hero-content h1 {
        font-size: 39px;
    }

    .guest-benefits-grid,
    .guest-how-grid {
        grid-template-columns: 1fr;
    }

    .guest-post-cta-box {
        padding: 28px 22px;

        align-items: flex-start;
        flex-direction: column;
    }

}



/* ==========================================================
   GUEST POST PREMIUM PAGE
========================================================== */

.gp-hero,
.gp-why,
.gp-packages,
.gp-niches,
.gp-faq,
.gp-final-cta {
    font-family: "Outfit", sans-serif;
}

.gp-hero {
    padding: 70px 0 45px;

    background:
        radial-gradient(
            circle at 76% 28%,
            rgba(99, 102, 241, .14),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9faff 100%
        );
}

.gp-hero-grid {
    display: grid;
    grid-template-columns: 1.04fr .96fr;

    align-items: center;

    gap: 70px;
}

.gp-kicker {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 6px 10px;

    color: #4338ca;

    background: #eef2ff;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.4px;
}

.gp-kicker svg {
    width: 12px;
    height: 12px;
}

.gp-hero-content h1 {
    margin: 17px 0;

    color: #0b132b;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: clamp(48px, 5.2vw, 75px);
    font-weight: 750;

    line-height: .99;

    letter-spacing: -3.5px;
}

.gp-hero-content h1 span {
    color: #5b50f6;
}

.gp-hero-content > p {
    max-width: 690px;

    color: #68758a;

    font-size: 14px;

    line-height: 1.75;
}

.gp-hero-actions {
    margin-top: 25px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.gp-btn {
    min-height: 46px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border-radius: 8px;

    font-family: "Outfit", sans-serif;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition: .22s ease;
}

.gp-btn svg {
    width: 14px;
    height: 14px;
}

.gp-btn-primary {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #3154ff,
            #7054ff
        );

    box-shadow:
        0 8px 20px
        rgba(79, 70, 229, .18);
}

.gp-btn-light {
    color: #111827;

    background: #ffffff;

    border: 1px solid #dfe5ef;
}

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

.gp-trusted-row {
    margin-top: 28px;

    display: flex;
    align-items: center;

    gap: 10px;
}

.gp-avatar-stack {
    display: flex;
}

.gp-avatar-stack span {
    width: 27px;
    height: 27px;

    margin-left: -6px;

    display: grid;
    place-items: center;

    border: 2px solid #ffffff;

    border-radius: 50%;

    color: #ffffff;

    background: #334155;

    font-size: 7px;
    font-weight: 800;
}

.gp-avatar-stack span:first-child {
    margin-left: 0;

    background: #2563eb;
}

.gp-avatar-stack span:nth-child(2) {
    background: #14b8a6;
}

.gp-avatar-stack span:nth-child(3) {
    background: #f59e0b;
}

.gp-avatar-stack span:nth-child(4) {
    background: #64748b;
}

.gp-trusted-row small {
    color: #6b7280;

    font-size: 9px;
}


/* ==========================================================
   HERO DASHBOARD
========================================================== */

.gp-dashboard-wrap {
    position: relative;
}

.gp-dashboard {
    overflow: hidden;

    border: 1px solid #e3e7f0;
    border-radius: 18px;

    background: rgba(255,255,255,.96);

    box-shadow:
        0 22px 60px
        rgba(42, 49, 82, .12);
}

.gp-dashboard-bar {
    height: 45px;

    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #edf0f4;
}

.gp-dashboard-bar > div {
    display: flex;

    gap: 5px;
}

.gp-dashboard-bar > div span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ff6b6b;
}

.gp-dashboard-bar > div span:nth-child(2) {
    background: #fbbf24;
}

.gp-dashboard-bar > div span:nth-child(3) {
    background: #22c55e;
}

.gp-dashboard-bar small {
    color: #697386;

    font-size: 8px;
}

.gp-dashboard-body {
    padding: 22px;

    display: grid;
    grid-template-columns: 1fr .8fr;

    gap: 14px;
}

.gp-dashboard-left,
.gp-dashboard-status {
    padding: 16px;

    border: 1px solid #edf0f4;
    border-radius: 12px;

    background: #ffffff;
}

.gp-dashboard-label {
    color: #9aa4b5;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .8px;
}

.gp-featured-domain {
    margin-top: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.gp-featured-domain strong {
    color: #172554;

    font-size: 11px;
}

.gp-verified-pill {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    padding: 4px 7px;

    color: #059669;

    background: #eafbf3;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 700;
}

.gp-verified-pill svg {
    width: 9px;
    height: 9px;
}

.gp-mini-metrics {
    margin-top: 14px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 7px;
}

.gp-mini-metrics div {
    padding: 9px;

    border-radius: 8px;

    background: #f7f9fc;
}

.gp-mini-metrics span {
    display: block;

    margin-bottom: 3px;

    color: #94a3b8;

    font-size: 7px;
}

.gp-mini-metrics strong {
    color: #23304c;

    font-size: 10px;
}

.gp-dashboard-status {
    text-align: center;
}

.gp-approved-icon {
    width: 54px;
    height: 54px;

    margin: 15px auto 7px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #10b981,
            #059669
        );

    border-radius: 50%;

    box-shadow:
        0 7px 18px
        rgba(5, 150, 105, .20);
}

.gp-approved-icon svg {
    width: 23px;
    height: 23px;
}

.gp-dashboard-status > strong {
    color: #1f2937;

    font-size: 11px;
}

.gp-status-line {
    margin-top: 20px;

    display: flex;

    gap: 4px;
}

.gp-status-line span {
    height: 3px;

    flex: 1;

    border-radius: 999px;

    background: #e5e7eb;
}

.gp-status-line span.active {
    background: #10b981;
}

.gp-secured-pill {
    position: absolute;

    right: -15px;
    bottom: -44px;

    padding: 8px 12px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #047857;

    background: #ecfdf5;

    border: 1px solid #d1fae5;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 700;
}

.gp-secured-pill svg {
    width: 13px;
    height: 13px;
}


/* ==========================================================
   STATS
========================================================== */

.gp-hero-stats {
    margin-top: 70px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border: 1px solid #e6eaf1;

    border-radius: 14px;

    background: #ffffff;
}

.gp-hero-stat {
    min-height: 75px;

    padding: 0 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-right: 1px solid #edf0f4;
}

.gp-hero-stat:last-child {
    border-right: 0;
}

.gp-hero-stat > svg {
    width: 34px;
    height: 34px;

    padding: 8px;

    color: #4f46e5;

    background: #f0f1ff;

    border-radius: 9px;
}

.gp-hero-stat strong {
    display: block;

    color: #182237;

    font-size: 16px;
}

.gp-hero-stat span {
    display: block;

    margin-top: 2px;

    color: #8791a3;

    font-size: 8px;
}


/* ==========================================================
   SECTION HEAD
========================================================== */

.gp-why,
.gp-packages,
.gp-niches,
.gp-faq {
    padding: 85px 0;
}

.gp-packages {
    background: #fafbff;
}

.gp-section-head {
    max-width: 760px;

    margin: 0 auto 42px;

    text-align: center;
}

.gp-section-head > span {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #5b50f6;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.gp-section-head > span i {
    width: 24px;
    height: 1px;

    background: #5b50f6;
}

.gp-section-head h2 {
    margin: 9px 0;

    color: #111827;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 37px;
    font-weight: 750;

    line-height: 1.02;

    letter-spacing: -1.8px;
}

.gp-section-head p {
    color: #8490a2;

    font-size: 11px;

    line-height: 1.6;
}


/* ==========================================================
   WHY FEATURES
========================================================== */

.gp-feature-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    gap: 10px;
}

.gp-feature-item {
    padding: 22px 10px;

    text-align: center;

    border: 1px solid transparent;
    border-radius: 12px;

    transition: .22s ease;
}

.gp-feature-item.active,
.gp-feature-item:hover {
    border-color: #e6e8f0;

    background: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(31,41,55,.06);
}

.gp-feature-icon {
    width: 34px;
    height: 34px;

    margin: 0 auto 12px;

    display: grid;
    place-items: center;

    color: #4f46e5;

    background: #f0f2ff;

    border-radius: 9px;
}

.gp-feature-icon svg {
    width: 15px;
    height: 15px;
}

.gp-feature-item h3 {
    margin-bottom: 5px;

    color: #182237;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 10px;
}

.gp-feature-item p {
    color: #8a94a6;

    font-size: 7px;

    line-height: 1.5;
}


/* ==========================================================
   BUILDER
========================================================== */

.gp-builder {
    margin-top: 38px;

    padding: 12px 16px;

    display: grid;
    grid-template-columns:
        1.25fr
        .9fr
        .55fr
        .8fr
        .6fr;

    align-items: center;

    gap: 12px;

    border: 1px solid #e5e9f0;
    border-radius: 12px;

    background: #ffffff;
}

.gp-builder-title {
    display: flex;
    align-items: center;

    gap: 8px;
}

.gp-builder-title > svg {
    width: 20px;
    height: 20px;
}

.gp-builder-title strong,
.gp-builder-title span {
    display: block;
}

.gp-builder-title strong {
    color: #172554;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 10px;
}

.gp-builder-title span {
    margin-top: 2px;

    color: #9aa3b2;

    font-size: 7px;
}

.gp-builder-option > span {
    display: block;

    margin-bottom: 5px;

    color: #96a0b0;

    font-size: 6px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .7px;
}

.gp-builder-tabs,
.gp-stepper {
    min-height: 34px;

    display: flex;

    border: 1px solid #e6eaf1;
    border-radius: 7px;

    overflow: hidden;
}

.gp-builder-tabs button,
.gp-stepper button {
    flex: 1;

    border: 0;

    background: #ffffff;

    color: #7b8595;

    font-family: "Outfit", sans-serif;

    font-size: 7px;

    cursor: pointer;
}

.gp-builder-tabs button.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #3154ff,
            #7054ff
        );
}

.gp-stepper {
    align-items: center;
    justify-content: center;
}

.gp-stepper strong {
    min-width: 28px;

    text-align: center;

    color: #182237;

    font-size: 9px;
}

.gp-builder-option select {
    width: 100%;

    min-height: 34px;

    padding: 0 8px;

    color: #354056;

    border: 1px solid #e6eaf1;
    border-radius: 7px;

    background: #ffffff;

    font-family: "Outfit", sans-serif;

    font-size: 8px;
}

.gp-builder-price strong {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #3154ff,
            #7054ff
        );

    border-radius: 7px;

    font-size: 10px;
}


/* ==========================================================
   PACKAGES
========================================================== */

.gp-package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 16px;
}

.gp-package-card {
    position: relative;

    padding: 26px;

    border: 1px solid #e4e8ef;
    border-radius: 16px;

    background: #ffffff;
}

.gp-package-card.featured {
    border-color: #7c6cff;

    box-shadow:
        0 20px 45px
        rgba(99, 82, 255, .16);
}

.gp-popular-label {
    position: absolute;

    top: -10px;
    left: 50%;

    transform: translateX(-50%);

    padding: 5px 12px;

    color: #ffffff;

    background: #5b50f6;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 800;
}

.gp-package-label {
    color: #5964f2;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .8px;
}

.gp-package-card h3 {
    margin: 8px 0 4px;

    color: #172554;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 18px;
}

.gp-package-card > p {
    min-height: 36px;

    color: #8b95a4;

    font-size: 8px;

    line-height: 1.5;
}

.gp-package-price {
    margin: 24px 0 14px;
}

.gp-package-price strong {
    color: #101827;

    font-size: 31px;

    letter-spacing: -1px;
}

.gp-package-price span {
    color: #9aa4b3;

    font-size: 7px;
}

.gp-package-card ul {
    margin: 0 0 22px;
    padding: 0;

    list-style: none;
}

.gp-package-card li {
    margin: 8px 0;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #596274;

    font-size: 8px;
}

.gp-package-card li svg {
    width: 12px;
    height: 12px;

    color: #10b981;
}

.gp-package-btn {
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    color: #1f2937;

    border: 1px solid #e5e7eb;
    border-radius: 7px;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
}

.gp-package-btn.primary {
    color: #ffffff;

    border-color: transparent;

    background:
        linear-gradient(
            90deg,
            #3154ff,
            #7557ff
        );
}

.gp-package-btn svg {
    width: 12px;
    height: 12px;
}


/* ==========================================================
   COMPARE TABLE
========================================================== */

.gp-compare {
    margin-top: 26px;

    overflow: hidden;

    border: 1px solid #e4e8ef;
    border-radius: 14px;

    background: #ffffff;
}

.gp-compare-title {
    padding: 14px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #edf0f4;
}

.gp-compare-title strong {
    color: #172554;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 10px;
}

.gp-compare-title span {
    color: #a0a8b5;

    font-size: 7px;
}

.gp-compare-table {
    width: 100%;

    border-collapse: collapse;
}

.gp-compare-table th,
.gp-compare-table td {
    padding: 11px 14px;

    border-bottom: 1px solid #eef1f5;

    color: #616b7c;

    text-align: center;

    font-size: 7px;
}

.gp-compare-table th:first-child,
.gp-compare-table td:first-child {
    width: 42%;

    text-align: left;
}

.gp-compare-table th {
    color: #6d7685;

    background: #f8f9fc;

    font-size: 6px;

    text-transform: uppercase;

    letter-spacing: .8px;
}


/* ==========================================================
   NICHE
========================================================== */

.gp-niche-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);

    gap: 8px;
}

.gp-niche-card {
    min-height: 60px;

    padding: 10px 4px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #334155;

    border: 1px solid #e5e9ef;
    border-radius: 9px;

    background: #ffffff;

    text-decoration: none;

    font-size: 7px;

    transition: .2s ease;
}

.gp-niche-card:hover {
    color: #4f46e5;

    border-color: #cfd4ff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(79, 70, 229, .08);
}

.gp-niche-card svg {
    width: 15px;
    height: 15px;

    color: #4f46e5;
}


/* ==========================================================
   SEO PANEL
========================================================== */

.gp-seo-panel {
    margin-top: 30px;

    overflow: hidden;

    color: #ffffff;

    border-radius: 18px;

    background:
        linear-gradient(
            115deg,
            #07193d,
            #102d72,
            #1f4599
        );

    box-shadow:
        0 20px 40px
        rgba(5, 22, 58, .16);
}

.gp-seo-panel-top {
    padding: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.gp-seo-panel-top h2 {
    margin-bottom: 8px;

    color: #ffffff;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 26px;
}

.gp-seo-panel-top p {
    max-width: 700px;

    color: rgba(255,255,255,.68);

    font-size: 9px;

    line-height: 1.6;
}

.gp-seo-panel-top > a {
    min-height: 40px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    flex-shrink: 0;

    color: #1e293b;

    background: #ffffff;

    border-radius: 7px;

    text-decoration: none;

    font-size: 8px;
    font-weight: 700;
}

.gp-seo-panel-top > a svg {
    width: 12px;
    height: 12px;
}

.gp-seo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid rgba(255,255,255,.08);
}

.gp-seo-grid > div {
    padding: 22px;

    border-right: 1px solid rgba(255,255,255,.08);
}

.gp-seo-grid > div:last-child {
    border-right: 0;
}

.gp-seo-grid svg {
    width: 17px;
    height: 17px;

    margin-bottom: 9px;

    color: #9cc4ff;
}

.gp-seo-grid strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 9px;
}

.gp-seo-grid span {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 7px;

    line-height: 1.5;
}


/* ==========================================================
   FAQ
========================================================== */

.gp-faq-grid {
    max-width: 1100px;

    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.gp-faq details {
    padding: 0 16px;

    border: 1px solid #e6e9ef;
    border-radius: 9px;

    background: #ffffff;
}

.gp-faq summary {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    color: #263247;

    cursor: pointer;

    list-style: none;

    font-size: 9px;
    font-weight: 700;
}

.gp-faq summary::-webkit-details-marker {
    display: none;
}

.gp-faq summary svg {
    width: 13px;
    height: 13px;
}

.gp-faq details p {
    margin: 0;
    padding: 0 0 15px;

    color: #7e899a;

    font-size: 8px;

    line-height: 1.6;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.gp-final-cta {
    padding: 20px 0 70px;
}

.gp-final-box {
    padding: 34px 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    color: #ffffff;

    border-radius: 17px;

    background:
        linear-gradient(
            105deg,
            #07183c,
            #13357f,
            #294da8
        );

    overflow: hidden;
}

.gp-final-box h2 {
    margin-bottom: 7px;

    color: #ffffff;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 27px;
}

.gp-final-box p {
    max-width: 740px;

    color: rgba(255,255,255,.65);

    font-size: 8px;

    line-height: 1.6;
}

.gp-final-actions {
    display: flex;

    gap: 8px;

    flex-shrink: 0;
}

.gp-btn-purple {
    color: #ffffff;

    background: #5b50f6;
}

.gp-btn-white {
    color: #172554;

    background: #ffffff;
}

.gp-bottom-trust {
    padding: 20px 70px 0;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}

.gp-bottom-trust span {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #687386;

    font-size: 7px;
}

.gp-bottom-trust svg {
    width: 13px;
    height: 13px;

    color: #4f46e5;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .gp-hero-grid {
        grid-template-columns: 1fr;
    }

    .gp-dashboard-wrap {
        max-width: 650px;
    }

    .gp-feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .gp-builder-title {
        grid-column: 1 / -1;
    }

    .gp-niche-grid {
        grid-template-columns: repeat(5, 1fr);
    }

}


@media (max-width: 750px) {

    .gp-hero {
        padding-top: 45px;
    }

    .gp-hero-content h1 {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .gp-dashboard-body {
        grid-template-columns: 1fr;
    }

    .gp-secured-pill {
        position: static;

        margin-top: 10px;
    }

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

    .gp-hero-stat:nth-child(2) {
        border-right: 0;
    }

    .gp-section-head h2 {
        font-size: 30px;
    }

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

    .gp-package-grid {
        grid-template-columns: 1fr;
    }

    .gp-niche-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gp-seo-panel-top,
    .gp-final-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .gp-seo-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gp-faq-grid {
        grid-template-columns: 1fr;
    }

    .gp-bottom-trust {
        padding-inline: 10px;

        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 500px) {

    .gp-hero-content h1 {
        font-size: 39px;
    }

    .gp-hero-stats {
        grid-template-columns: 1fr;
    }

    .gp-hero-stat {
        border-right: 0;
        border-bottom: 1px solid #edf0f4;
    }

    .gp-feature-grid {
        grid-template-columns: 1fr;
    }

    .gp-builder {
        grid-template-columns: 1fr;
    }

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

    .gp-seo-grid {
        grid-template-columns: 1fr;
    }

    .gp-final-actions {
        width: 100%;

        flex-direction: column;
    }

}

/* Guest post new css  */

/* =========================================================
   GUEST POST PAGE - FINAL LARGE PREMIUM OVERRIDES
========================================================= */

.gp-hero,
.gp-why,
.gp-packages,
.gp-niches,
.gp-faq,
.gp-final-cta {
    font-family: "Outfit", sans-serif;
}


/* =========================================================
   GLOBAL SECTION WIDTH / SPACING
========================================================= */

.gp-hero .container,
.gp-why .container,
.gp-packages .container,
.gp-niches .container,
.gp-faq .container,
.gp-final-cta .container {
    width: min(92%, 1450px);
    max-width: 1450px;
    margin: 0 auto;
}


.gp-why,
.gp-packages,
.gp-niches,
.gp-faq {
    padding: 110px 0 !important;
}


.gp-final-cta {
    padding: 55px 0 90px !important;
}


/* =========================================================
   HERO BIGGER
========================================================= */

.gp-hero {
    padding: 95px 0 70px !important;
}


.gp-hero-grid {
    gap: 90px !important;
}


.gp-kicker {
    padding: 8px 13px !important;

    font-size: 11px !important;
}


.gp-kicker svg {
    width: 15px !important;
    height: 15px !important;
}


.gp-hero-content h1 {
    margin: 22px 0 24px !important;

    font-size: clamp(58px, 5.7vw, 86px) !important;

    line-height: .98 !important;

    letter-spacing: -4px !important;
}


.gp-hero-content > p {
    max-width: 760px !important;

    font-size: 17px !important;

    line-height: 1.75 !important;
}


.gp-hero-actions {
    margin-top: 32px !important;

    gap: 14px !important;
}


.gp-btn {
    min-height: 54px !important;

    padding: 0 24px !important;

    border-radius: 10px !important;

    font-size: 14px !important;
}


.gp-btn svg {
    width: 17px !important;
    height: 17px !important;
}


.gp-trusted-row {
    margin-top: 35px !important;
}


.gp-trusted-row small {
    font-size: 12px !important;
}


.gp-avatar-stack span {
    width: 34px !important;
    height: 34px !important;

    font-size: 9px !important;
}


/* =========================================================
   HERO DASHBOARD
========================================================= */

.gp-dashboard {
    border-radius: 22px !important;

    box-shadow:
        0 30px 80px
        rgba(42, 49, 82, .15) !important;
}


.gp-dashboard-bar {
    height: 56px !important;

    padding: 0 20px !important;
}


.gp-dashboard-bar small {
    font-size: 10px !important;
}


.gp-dashboard-body {
    padding: 28px !important;

    gap: 18px !important;
}


.gp-dashboard-left,
.gp-dashboard-status {
    padding: 21px !important;

    border-radius: 15px !important;
}


.gp-dashboard-label {
    font-size: 9px !important;
}


.gp-featured-domain strong {
    font-size: 14px !important;
}


.gp-verified-pill {
    padding: 6px 9px !important;

    font-size: 9px !important;
}


.gp-mini-metrics {
    gap: 10px !important;
}


.gp-mini-metrics div {
    padding: 13px !important;
}


.gp-mini-metrics span {
    font-size: 9px !important;
}


.gp-mini-metrics strong {
    font-size: 13px !important;
}


.gp-approved-icon {
    width: 70px !important;
    height: 70px !important;
}


.gp-approved-icon svg {
    width: 29px !important;
    height: 29px !important;
}


.gp-dashboard-status > strong {
    font-size: 14px !important;
}


.gp-secured-pill {
    padding: 10px 15px !important;

    font-size: 10px !important;
}


/* =========================================================
   HERO STATS
========================================================= */

.gp-hero-stats {
    margin-top: 85px !important;

    border-radius: 17px !important;
}


.gp-hero-stat {
    min-height: 95px !important;

    padding: 0 28px !important;

    gap: 16px !important;
}


.gp-hero-stat > svg {
    width: 44px !important;
    height: 44px !important;

    padding: 10px !important;
}


.gp-hero-stat strong {
    font-size: 21px !important;
}


.gp-hero-stat span {
    font-size: 10px !important;
}


/* =========================================================
   SECTION HEADINGS BIGGER
========================================================= */

.gp-section-head {
    max-width: 900px !important;

    margin-bottom: 60px !important;
}


.gp-section-head > span {
    font-size: 10px !important;

    letter-spacing: 1.8px !important;
}


.gp-section-head h2 {
    margin: 13px 0 15px !important;

    font-size: clamp(42px, 4.5vw, 58px) !important;

    line-height: 1.02 !important;

    letter-spacing: -2.3px !important;
}


.gp-section-head p {
    max-width: 720px;

    margin: 0 auto;

    font-size: 14px !important;

    line-height: 1.7 !important;
}


/* =========================================================
   WHY CHOOSE CARDS
========================================================= */

.gp-feature-grid {
    gap: 18px !important;
}


.gp-feature-item {
    min-height: 235px !important;

    padding: 32px 20px !important;

    border-radius: 16px !important;
}


.gp-feature-item:hover {
    transform: translateY(-7px);

    border-color: #ccd4ff;

    box-shadow:
        0 20px 45px
        rgba(70, 74, 130, .12) !important;
}


.gp-feature-icon {
    width: 48px !important;
    height: 48px !important;

    margin-bottom: 17px !important;

    border-radius: 13px !important;
}


.gp-feature-icon svg {
    width: 21px !important;
    height: 21px !important;
}


.gp-feature-item h3 {
    margin-bottom: 9px !important;

    font-size: 14px !important;
}


.gp-feature-item p {
    font-size: 10px !important;

    line-height: 1.65 !important;
}


/* =========================================================
   CAMPAIGN BUILDER
========================================================= */

.gp-builder {
    margin-top: 55px !important;

    padding: 20px 22px !important;

    min-height: 105px;

    border-radius: 16px !important;

    gap: 18px !important;

    box-shadow:
        0 12px 35px
        rgba(15, 23, 42, .04);
}


.gp-builder-title > svg {
    width: 28px !important;
    height: 28px !important;
}


.gp-builder-title strong {
    font-size: 14px !important;
}


.gp-builder-title span {
    font-size: 9px !important;
}


.gp-builder-option > span {
    font-size: 8px !important;
}


.gp-builder-tabs,
.gp-stepper,
.gp-builder-option select {
    min-height: 44px !important;
}


.gp-builder-tabs button,
.gp-stepper button,
.gp-builder-option select {
    font-size: 10px !important;
}


.gp-builder-price strong {
    min-height: 44px !important;

    font-size: 14px !important;
}


/* =========================================================
   PRICING CARDS - PREMIUM
========================================================= */

.gp-package-grid {
    gap: 24px !important;
}


.gp-package-card {
    min-height: 620px;

    padding: 36px 32px !important;

    border-radius: 22px !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease !important;

    overflow: hidden;
}


.gp-package-card::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -95px;
    right: -95px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99, 102, 241, .13),
            transparent 68%
        );

    transition: .35s ease;
}


.gp-package-card:hover {
    transform: translateY(-12px) scale(1.015);

    border-color: #a9b3ff !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafaff
        );

    box-shadow:
        0 28px 65px
        rgba(74, 68, 170, .16) !important;
}


.gp-package-card:hover::before {
    transform: scale(1.7);
}


.gp-package-card.featured {
    transform: translateY(-7px);

    border: 2px solid #695af8 !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8f7ff
        );
}


.gp-package-card.featured:hover {
    transform: translateY(-16px) scale(1.02);

    box-shadow:
        0 35px 80px
        rgba(79, 70, 229, .22) !important;
}


.gp-popular-label {
    top: -12px !important;

    padding: 7px 17px !important;

    font-size: 9px !important;
}


.gp-package-label {
    font-size: 9px !important;
}


.gp-package-card h3 {
    margin: 12px 0 8px !important;

    font-size: 25px !important;
}


.gp-package-card > p {
    min-height: 50px !important;

    font-size: 11px !important;

    line-height: 1.6 !important;
}


.gp-package-price {
    margin: 32px 0 22px !important;
}


.gp-package-price strong {
    font-size: 46px !important;
}


.gp-package-price span {
    font-size: 10px !important;
}


.gp-package-card li {
    margin: 12px 0 !important;

    gap: 9px !important;

    font-size: 11px !important;
}


.gp-package-card li svg {
    width: 15px !important;
    height: 15px !important;
}


/* =========================================================
   PACKAGE BUTTONS
========================================================= */

.gp-package-btn {
    min-height: 50px !important;

    margin-top: 25px;

    border-radius: 10px !important;

    font-size: 12px !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}


.gp-package-btn:hover {
    transform: translateY(-3px);

    border-color: #5b50f6;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #3154ff,
            #7454ff
        );

    box-shadow:
        0 12px 25px
        rgba(79, 70, 229, .20);
}


.gp-package-btn.primary:hover {
    box-shadow:
        0 14px 30px
        rgba(79, 70, 229, .30);
}


/* =========================================================
   COMPARE WHAT YOU GET
========================================================= */

.gp-compare {
    margin-top: 45px !important;

    border-radius: 18px !important;

    border-color: #dce3ed !important;

    box-shadow:
        0 12px 35px
        rgba(15, 23, 42, .05);
}


.gp-compare-title {
    min-height: 75px;

    padding: 20px 25px !important;

    background:
        linear-gradient(
            90deg,
            #f7f9ff,
            #ffffff
        );
}


.gp-compare-title strong {
    color: #0f172a !important;

    font-size: 18px !important;

    font-weight: 800 !important;
}


.gp-compare-title span {
    color: #475569 !important;

    font-size: 11px !important;
}


.gp-compare-table {
    font-family: "Outfit", sans-serif;
}


.gp-compare-table th {
    padding: 16px 18px !important;

    color: #172554 !important;

    background: #f1f5f9 !important;

    font-size: 10px !important;

    font-weight: 800 !important;
}


.gp-compare-table td {
    padding: 16px 18px !important;

    color: #334155 !important;

    font-size: 11px !important;

    font-weight: 500;
}


.gp-compare-table td:first-child {
    color: #0f172a !important;

    font-weight: 700;
}


.gp-compare-table tbody tr:hover {
    background: #f8faff;
}


/* =========================================================
   NICHE SECTION
========================================================= */

.gp-niche-grid {
    gap: 12px !important;
}


.gp-niche-card {
    min-height: 90px !important;

    border-radius: 13px !important;

    font-size: 10px !important;
}


.gp-niche-card svg {
    width: 22px !important;
    height: 22px !important;
}


.gp-niche-card:hover {
    transform: translateY(-5px) !important;

    box-shadow:
        0 14px 30px
        rgba(79, 70, 229, .12) !important;
}


/* =========================================================
   SEO DARK PANEL
========================================================= */

.gp-seo-panel {
    margin-top: 45px !important;

    border-radius: 24px !important;
}


.gp-seo-panel-top {
    padding: 45px !important;
}


.gp-seo-panel-top h2 {
    font-size: 34px !important;
}


.gp-seo-panel-top p {
    font-size: 12px !important;
}


.gp-seo-panel-top > a {
    min-height: 48px !important;

    padding: 0 20px !important;

    font-size: 10px !important;
}


.gp-seo-grid > div {
    min-height: 180px;

    padding: 30px !important;
}


.gp-seo-grid svg {
    width: 23px !important;
    height: 23px !important;
}


.gp-seo-grid strong {
    margin-bottom: 8px !important;

    font-size: 12px !important;
}


.gp-seo-grid span {
    font-size: 9px !important;

    line-height: 1.65 !important;
}


/* =========================================================
   FAQ
========================================================= */

.gp-faq-grid {
    max-width: 1250px !important;

    gap: 14px !important;
}


.gp-faq details {
    padding: 0 20px !important;

    border-radius: 12px !important;
}


.gp-faq summary {
    min-height: 64px !important;

    color: #172554 !important;

    font-size: 12px !important;
}


.gp-faq details p {
    padding-bottom: 20px !important;

    color: #64748b !important;

    font-size: 11px !important;
}


/* =========================================================
   FINAL CTA
========================================================= */

.gp-final-box {
    min-height: 190px;

    padding: 45px 50px !important;

    border-radius: 22px !important;
}


.gp-final-box h2 {
    font-size: 38px !important;
}


.gp-final-box p {
    max-width: 780px !important;

    font-size: 11px !important;
}


.gp-bottom-trust {
    padding-top: 30px !important;
}


.gp-bottom-trust span {
    font-size: 9px !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .gp-package-card {
        min-height: auto;
    }

    .gp-feature-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}


@media (max-width: 750px) {

    .gp-why,
    .gp-packages,
    .gp-niches,
    .gp-faq {
        padding: 75px 0 !important;
    }


    .gp-hero-content h1 {
        font-size: 48px !important;
    }


    .gp-section-head h2 {
        font-size: 36px !important;
    }


    .gp-feature-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }


    .gp-package-card {
        padding: 30px 25px !important;
    }


    .gp-compare-title {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .gp-compare-table-wrap {
        overflow-x: auto;
    }


    .gp-final-box h2 {
        font-size: 31px !important;
    }

}


@media (max-width: 500px) {

    .gp-hero-content h1 {
        font-size: 41px !important;
    }


    .gp-section-head h2 {
        font-size: 31px !important;
    }


    .gp-feature-grid {
        grid-template-columns: 1fr !important;
    }

}




/* =========================================================
   LINK INSERTION SERVICE PAGE
========================================================= */

.li-hero,
.li-why,
.li-packages,
.li-niches,
.li-faq,
.li-final {
    font-family: "Outfit", sans-serif;
}


/* FULL WIDTH CONTAINER */

.li-hero .container,
.li-why .container,
.li-packages .container,
.li-niches .container,
.li-faq .container,
.li-final .container {
    width: min(92%, 1450px);

    max-width: 1450px;

    margin-inline: auto;
}


/* =========================================================
   HERO
========================================================= */

.li-hero {
    padding: 95px 0 70px;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(99, 102, 241, .15),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f8faff
        );
}


.li-hero-grid {
    display: grid;

    grid-template-columns:
        1.05fr
        .95fr;

    align-items: center;

    gap: 90px;
}


.li-kicker {
    padding: 8px 13px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #4f46e5;

    background: #eef2ff;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.li-kicker svg {
    width: 15px;
    height: 15px;
}


.li-hero-content h1 {
    max-width: 780px;

    margin: 22px 0 24px;

    color: #0f172a;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(
            58px,
            5.7vw,
            84px
        );

    font-weight: 750;

    line-height: .99;

    letter-spacing: -4px;
}


.li-hero-content h1 span {
    display: block;

    color: #5b50f6;
}


.li-hero-content > p {
    max-width: 750px;

    color: #64748b;

    font-size: 17px;

    line-height: 1.75;
}


.li-hero-actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}


.li-btn {
    min-height: 54px;

    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 10px;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition: .25s ease;
}


.li-btn svg {
    width: 17px;
    height: 17px;
}


.li-btn:hover {
    transform: translateY(-3px);
}


.li-btn-primary {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    box-shadow:
        0 12px 28px
        rgba(79,70,229,.22);
}


.li-btn-light {
    color: #172554;

    background: #ffffff;

    border:
        1px solid
        #dce4ef;
}


/* TRUST */

.li-trust-row {
    margin-top: 35px;

    display: flex;
    align-items: center;

    gap: 12px;
}


.li-trust-icons {
    display: flex;
}


.li-trust-icons span {
    width: 34px;
    height: 34px;

    margin-left: -6px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    border:
        2px solid
        #ffffff;

    border-radius: 50%;

    font-size: 8px;
    font-weight: 800;
}


.li-trust-icons span:first-child {
    margin-left: 0;
}


.li-trust-row small {
    color: #64748b;

    font-size: 12px;
}


/* =========================================================
   PREVIEW
========================================================= */

.li-preview-wrap {
    position: relative;
}


.li-preview-card {
    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    border:
        1px solid
        #e0e6ef;

    border-radius: 22px;

    box-shadow:
        0 30px 80px
        rgba(30,41,59,.13);
}


.li-preview-top {
    height: 56px;

    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        #edf1f6;
}


.li-window-dots {
    display: flex;

    gap: 5px;
}


.li-window-dots span {
    width: 7px;
    height: 7px;

    background: #818cf8;

    border-radius: 50%;
}


.li-window-dots span:nth-child(2) {
    background: #a78bfa;
}


.li-window-dots span:nth-child(3) {
    background: #60a5fa;
}


.li-preview-top small {
    color: #64748b;

    font-size: 10px;
}


.li-preview-body {
    padding: 28px;

    display: grid;

    grid-template-columns:
        .45fr
        1fr;

    gap: 20px;
}


.li-preview-sites {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.li-preview-sites > div {
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 8px;

    border:
        1px solid
        #edf1f6;

    border-radius: 10px;
}


.li-preview-sites > div.active {
    border-color: #c7d2fe;

    background: #f5f7ff;
}


.li-site-icon {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    color: #4f46e5;

    background: #eef2ff;

    border-radius: 7px;
}


.li-site-icon svg {
    width: 13px;
    height: 13px;
}


.li-preview-sites strong {
    color: #334155;

    font-size: 10px;
}


.li-article-preview {
    padding: 20px;

    border:
        1px solid
        #e6ebf2;

    border-radius: 13px;
}


.li-preview-label {
    color: #94a3b8;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}


.li-article-head {
    margin-top: 13px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.li-article-head small {
    color: #64748b;

    font-size: 8px;
}


.li-article-head h3 {
    margin-top: 4px;

    color: #172554;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 13px;

    line-height: 1.4;
}


.li-score {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #4f46e5;

    border:
        5px solid
        #ddd6fe;

    border-top-color:
        #4f46e5;

    border-radius: 50%;
}


.li-score span {
    font-size: 11px;
    font-weight: 800;
}


.li-article-lines {
    margin-top: 18px;
}


.li-article-lines span {
    width: 100%;
    height: 7px;

    margin-top: 8px;

    display: block;

    background: #eef2f7;

    border-radius: 99px;
}


.li-article-lines span:nth-child(2) {
    width: 80%;
}


.li-article-lines span:nth-child(4) {
    width: 92%;
}


.li-article-lines span:nth-child(5) {
    width: 64%;
}


.li-article-lines span.highlight {
    width: 90%;

    background:
        linear-gradient(
            90deg,
            #ddd6fe,
            #bfdbfe
        );
}


.li-inserted-link {
    margin-top: 18px;

    padding: 11px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #4f46e5;

    background: #f5f3ff;

    border:
        1px solid
        #ddd6fe;

    border-radius: 8px;

    font-size: 8px;
    font-weight: 700;
}


.li-inserted-link svg {
    width: 12px;
    height: 12px;
}


.li-dofollow-badge {
    position: absolute;

    right: -10px;
    bottom: -45px;

    padding: 10px 15px;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #4338ca;

    background: #eef2ff;

    border:
        1px solid
        #d8ddff;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
}


.li-dofollow-badge svg {
    width: 14px;
    height: 14px;
}


/* =========================================================
   STATS
========================================================= */

.li-stats {
    margin-top: 85px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    background: #ffffff;

    border:
        1px solid
        #e3e9f1;

    border-radius: 17px;
}


.li-stat {
    min-height: 96px;

    padding: 0 28px;

    display: flex;
    align-items: center;

    gap: 15px;

    border-right:
        1px solid
        #edf1f5;
}


.li-stat:last-child {
    border-right: 0;
}


.li-stat-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    color: #4f46e5;

    background: #eef2ff;

    border-radius: 11px;
}


.li-stat-icon svg {
    width: 21px;
    height: 21px;
}


.li-stat strong {
    display: block;

    color: #172554;

    font-size: 21px;
}


.li-stat span {
    display: block;

    margin-top: 3px;

    color: #94a3b8;

    font-size: 10px;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.li-why,
.li-packages,
.li-niches,
.li-faq {
    padding: 110px 0;
}


.li-packages {
    background: #f8faff;
}


.li-section-head {
    max-width: 900px;

    margin: 0 auto 60px;

    text-align: center;
}


.li-section-head > span {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #4f46e5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.8px;
}


.li-section-head > span i {
    width: 28px;
    height: 2px;

    background: #4f46e5;
}


.li-section-head h2 {
    margin: 13px 0 15px;

    color: #0f172a;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(
            42px,
            4.5vw,
            58px
        );

    font-weight: 750;

    line-height: 1.03;

    letter-spacing: -2px;
}


.li-section-head p {
    max-width: 720px;

    margin: auto;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   BENEFITS
========================================================= */

.li-benefit-grid {
    display: grid;

    grid-template-columns:
        repeat(6,1fr);

    gap: 18px;
}


.li-benefit {
    min-height: 235px;

    padding: 32px 18px;

    text-align: center;

    border:
        1px solid
        transparent;

    border-radius: 16px;

    transition: .28s ease;
}


.li-benefit.featured,
.li-benefit:hover {
    transform: translateY(-7px);

    background: #ffffff;

    border-color: #d9deff;

    box-shadow:
        0 20px 45px
        rgba(79,70,229,.10);
}


.li-benefit-icon {
    width: 48px;
    height: 48px;

    margin: 0 auto 17px;

    display: grid;
    place-items: center;

    color: #4f46e5;

    background: #eef2ff;

    border-radius: 13px;
}


.li-benefit-icon svg {
    width: 21px;
    height: 21px;
}


.li-benefit h3 {
    margin-bottom: 9px;

    color: #172554;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 14px;
}


.li-benefit p {
    color: #7c8798;

    font-size: 10px;

    line-height: 1.65;
}


/* =========================================================
   BUILDER
========================================================= */

.li-builder {
    margin-top: 55px;

    min-height: 110px;

    padding: 20px 22px;

    display: grid;

    grid-template-columns:
        1.35fr
        1fr
        .55fr
        .85fr
        .65fr;

    align-items: center;

    gap: 18px;

    background: #ffffff;

    border:
        1px solid
        #e3e8f0;

    border-radius: 16px;

    box-shadow:
        0 12px 35px
        rgba(15,23,42,.04);
}


.li-builder-intro {
    display: flex;
    align-items: center;

    gap: 11px;
}


.li-builder-intro > svg {
    width: 27px;
    height: 27px;

    color: #4f46e5;
}


.li-builder-intro strong {
    display: block;

    color: #172554;

    font-size: 14px;
}


.li-builder-intro span {
    display: block;

    margin-top: 3px;

    color: #94a3b8;

    font-size: 9px;
}


.li-builder-option label {
    margin-bottom: 6px;

    display: block;

    color: #64748b;

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.li-service-tabs,
.li-quantity {
    min-height: 44px;

    display: flex;

    overflow: hidden;

    border:
        1px solid
        #e3e8f0;

    border-radius: 8px;
}


.li-service-tabs a,
.li-service-tabs button,
.li-quantity button {
    flex: 1;

    border: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #64748b;

    background: #ffffff;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 10px;

    text-decoration: none;

    cursor: pointer;
}


.li-service-tabs .active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );
}


.li-quantity {
    align-items: center;
}


.li-quantity strong {
    min-width: 34px;

    text-align: center;

    color: #172554;
}


.li-builder-option select {
    width: 100%;

    min-height: 44px;

    padding: 0 10px;

    color: #334155;

    background: #ffffff;

    border:
        1px solid
        #e3e8f0;

    border-radius: 8px;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 10px;
}


.li-builder-total strong {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    border-radius: 8px;

    font-size: 14px;
}


/* =========================================================
   PACKAGES
========================================================= */

.li-package-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 24px;
}


.li-package-card {
    position: relative;

    min-height: 610px;

    padding: 36px 32px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        #e0e6ef;

    border-radius: 22px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.li-package-card::before {
    content: "";

    width: 190px;
    height: 190px;

    position: absolute;

    top: -110px;
    right: -100px;

    background:
        radial-gradient(
            circle,
            rgba(99,102,241,.16),
            transparent 68%
        );

    border-radius: 50%;

    transition: .35s ease;
}


.li-package-card:hover {
    transform:
        translateY(-12px)
        scale(1.012);

    border-color: #a5b4fc;

    box-shadow:
        0 30px 70px
        rgba(79,70,229,.15);
}


.li-package-card:hover::before {
    transform: scale(1.5);
}


.li-package-card.featured {
    transform: translateY(-7px);

    border:
        2px solid
        #6366f1;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8f7ff
        );

    box-shadow:
        0 22px 55px
        rgba(79,70,229,.16);
}


.li-package-card.featured:hover {
    transform:
        translateY(-16px)
        scale(1.02);
}


.li-most-popular {
    position: absolute;

    top: -12px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        7px 17px;

    color: #ffffff;

    background: #5b50f6;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
}


.li-package-tag {
    color: #4f46e5;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}


.li-package-card h3 {
    margin: 12px 0 8px;

    color: #172554;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 25px;
}


.li-package-card > p {
    min-height: 55px;

    color: #64748b;

    font-size: 11px;

    line-height: 1.6;
}


.li-package-price {
    margin: 32px 0 22px;
}


.li-package-price strong {
    color: #0f172a;

    font-size: 46px;
}


.li-package-price span {
    color: #94a3b8;

    font-size: 10px;
}


.li-package-card ul {
    margin: 0 0 25px;

    padding: 0;

    list-style: none;
}


.li-package-card li {
    margin: 12px 0;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #475569;

    font-size: 11px;
}


.li-package-card li svg {
    width: 15px;
    height: 15px;

    color: #4f46e5;
}


.li-package-btn {
    min-height: 50px;

    margin-top: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #172554;

    border:
        1px solid
        #dbe2ec;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition: .25s ease;
}


.li-package-btn:hover,
.li-package-btn.primary {
    color: #ffffff;

    border-color: transparent;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    box-shadow:
        0 13px 28px
        rgba(79,70,229,.22);

    transform: translateY(-3px);
}


/* =========================================================
   COMPARE
========================================================= */

.li-compare {
    margin-top: 45px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        #dce3ed;

    border-radius: 18px;

    box-shadow:
        0 12px 35px
        rgba(15,23,42,.05);
}


.li-compare-head {
    min-height: 76px;

    padding: 20px 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background:
        linear-gradient(
            90deg,
            #f4f6ff,
            #ffffff
        );

    border-bottom:
        1px solid
        #e8edf3;
}


.li-compare-head strong {
    color: #0f172a;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 18px;
}


.li-compare-head span {
    color: #475569;

    font-size: 11px;
}


.li-compare-table {
    width: 100%;

    border-collapse: collapse;
}


.li-compare-table th {
    padding: 17px 18px;

    color: #172554;

    background: #f1f5f9;

    font-size: 10px;
    font-weight: 800;

    text-align: center;
}


.li-compare-table td {
    padding: 17px 18px;

    color: #334155;

    border-bottom:
        1px solid
        #edf1f5;

    font-size: 11px;

    text-align: center;
}


.li-compare-table th:first-child,
.li-compare-table td:first-child {
    width: 40%;

    text-align: left;
}


.li-compare-table td:first-child {
    color: #0f172a;

    font-weight: 700;
}


.li-compare-table tbody tr:hover {
    background: #f8faff;
}


/* =========================================================
   NICHES
========================================================= */

.li-niche-grid {
    display: grid;

    grid-template-columns:
        repeat(9,1fr);

    gap: 12px;
}


.li-niche {
    min-height: 90px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 9px;

    color: #334155;

    background: #ffffff;

    border:
        1px solid
        #e2e8f0;

    border-radius: 13px;

    font-size: 10px;

    text-decoration: none;

    transition: .25s ease;
}


.li-niche:hover {
    transform: translateY(-5px);

    color: #4f46e5;

    border-color: #c7d2fe;

    box-shadow:
        0 14px 30px
        rgba(79,70,229,.12);
}


.li-niche svg {
    width: 22px;
    height: 22px;

    color: #4f46e5;
}


/* =========================================================
   DARK PANEL
========================================================= */

.li-dark-panel {
    margin-top: 45px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            115deg,
            #07183c,
            #172c69,
            #352b74
        );

    border-radius: 24px;

    box-shadow:
        0 24px 55px
        rgba(11,25,65,.18);
}


.li-dark-top {
    padding: 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.li-dark-top h2 {
    color: #ffffff;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 34px;
}


.li-dark-top p {
    max-width: 760px;

    margin-top: 8px;

    color:
        rgba(
            255,
            255,
            255,
            .68
        );

    font-size: 12px;

    line-height: 1.65;
}


.li-dark-top > a {
    min-height: 48px;

    padding: 0 20px;

    display: flex;
    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    color: #172554;

    background: #ffffff;

    border-radius: 9px;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}


.li-dark-top > a svg {
    width: 14px;
    height: 14px;
}


.li-dark-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );
}


.li-dark-grid > div {
    min-height: 180px;

    padding: 30px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );
}


.li-dark-grid > div:last-child {
    border-right: 0;
}


.li-dark-grid svg {
    width: 23px;
    height: 23px;

    margin-bottom: 12px;

    color: #a5b4fc;
}


.li-dark-grid strong {
    display: block;

    margin-bottom: 8px;

    color: #ffffff;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 12px;
}


.li-dark-grid span {
    color:
        rgba(
            255,
            255,
            255,
            .6
        );

    font-size: 9px;

    line-height: 1.65;
}


/* =========================================================
   FAQ
========================================================= */

.li-faq-grid {
    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}


.li-faq details {
    padding: 0 20px;

    background: #ffffff;

    border:
        1px solid
        #e3e8ef;

    border-radius: 12px;
}


.li-faq summary {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    color: #172554;

    cursor: pointer;

    list-style: none;

    font-size: 12px;
    font-weight: 700;
}


.li-faq summary::-webkit-details-marker {
    display: none;
}


.li-faq summary svg {
    width: 15px;
    height: 15px;
}


.li-faq details p {
    margin: 0;

    padding-bottom: 20px;

    color: #64748b;

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   FINAL CTA
========================================================= */

.li-final {
    padding: 50px 0 90px;
}


.li-final-box {
    min-height: 190px;

    padding: 45px 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    color: #ffffff;

    background:
        linear-gradient(
            105deg,
            #07183c,
            #173b8f,
            #352b74
        );

    border-radius: 22px;
}


.li-final-box h2 {
    color: #ffffff;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 38px;
}


.li-final-box p {
    max-width: 780px;

    margin-top: 8px;

    color:
        rgba(
            255,
            255,
            255,
            .67
        );

    font-size: 11px;

    line-height: 1.65;
}


.li-final-actions {
    display: flex;

    gap: 10px;

    flex-shrink: 0;
}


.li-btn-purple {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );
}


.li-btn-white {
    color: #172554;

    background: #ffffff;
}


.li-final-trust {
    padding: 30px 65px 0;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 20px;
}


.li-final-trust span {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #64748b;

    font-size: 9px;
}


.li-final-trust svg {
    width: 14px;
    height: 14px;

    color: #4f46e5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .li-hero-grid {
        grid-template-columns: 1fr;
    }

    .li-preview-wrap {
        max-width: 720px;
    }

    .li-benefit-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

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

    .li-builder-intro {
        grid-column: 1 / -1;
    }

    .li-niche-grid {
        grid-template-columns:
            repeat(5,1fr);
    }

}


@media (max-width: 750px) {

    .li-hero {
        padding-top: 55px;
    }

    .li-hero-content h1 {
        font-size: 48px;

        letter-spacing: -2px;
    }

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

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

    .li-package-grid {
        grid-template-columns: 1fr;
    }

    .li-package-card {
        min-height: auto;
    }

    .li-niche-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

    .li-dark-top,
    .li-final-box {
        align-items: flex-start;

        flex-direction: column;
    }

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

    .li-faq-grid {
        grid-template-columns: 1fr;
    }

    .li-compare-wrap {
        overflow-x: auto;
    }

}


@media (max-width: 500px) {

    .li-hero-content h1 {
        font-size: 41px;
    }

    .li-preview-body {
        grid-template-columns: 1fr;
    }

    .li-stats,
    .li-benefit-grid,
    .li-builder,
    .li-dark-grid {
        grid-template-columns: 1fr;
    }

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

    .li-final-actions {
        width: 100%;

        flex-direction: column;
    }

}




/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-hero,
.contact-main-section,
.contact-location-section,
.contact-support-section {
    font-family: "Outfit", sans-serif;
}


.contact-hero .container,
.contact-main-section .container,
.contact-location-section .container,
.contact-support-section .container {
    width: min(92%, 1450px);

    max-width: 1450px;

    margin-inline: auto;
}


/* =========================================================
   HERO
========================================================= */

.contact-hero {
    padding: 90px 0 75px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(99, 102, 241, .18),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f5f3ff,
            #ffffff
        );
}


.contact-hero-content {
    max-width: 900px;

    margin: auto;
}


.contact-eyebrow {
    display: inline-flex;

    margin-bottom: 16px;

    color: #4f46e5;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}


.contact-hero h1 {
    margin: 0;

    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: clamp(52px, 5vw, 74px);

    font-weight: 750;

    line-height: 1.02;

    letter-spacing: -3px;
}


.contact-hero h1 span {
    display: block;

    color: #5b50f6;
}


.contact-hero p {
    max-width: 720px;

    margin: 20px auto 0;

    color: #64748b;

    font-size: 16px;

    line-height: 1.7;
}


.contact-breadcrumb {
    margin-top: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.contact-breadcrumb a,
.contact-breadcrumb span {
    color: #64748b;

    font-size: 12px;

    text-decoration: none;
}


.contact-breadcrumb a:hover {
    color: #4f46e5;
}


.contact-breadcrumb svg {
    width: 14px;
    height: 14px;

    color: #94a3b8;
}


/* =========================================================
   MAIN CONTACT
========================================================= */

.contact-main-section {
    padding: 100px 0;
}


.contact-main-grid {
    display: grid;

    grid-template-columns: .78fr 1.22fr;

    gap: 30px;

    align-items: stretch;
}


/* =========================================================
   LEFT INFO CARD
========================================================= */

.contact-info-card {
    padding: 38px 34px;

    background: #ffffff;

    border: 1px solid #e1e7f0;

    border-radius: 22px;

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, .06);
}


.contact-small-label {
    color: #4f46e5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.contact-info-card h2 {
    margin: 10px 0 12px;

    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 32px;

    line-height: 1.15;
}


.contact-info-intro {
    margin-bottom: 30px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.7;
}


.contact-info-list {
    display: flex;

    flex-direction: column;
}


.contact-info-item {
    padding: 22px 0;

    display: flex;
    align-items: center;

    gap: 15px;

    border-bottom: 1px solid #edf1f5;
}


.contact-info-item:last-child {
    border-bottom: 0;
}


.contact-info-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #4f46e5;

    background: #eef2ff;

    border-radius: 12px;
}


.contact-info-icon svg {
    width: 21px;
    height: 21px;
}


.contact-info-item span {
    display: block;

    color: #94a3b8;

    font-size: 10px;
}


.contact-info-item strong {
    display: block;

    margin-top: 4px;

    color: #172554;

    font-size: 13px;

    font-weight: 700;
}


.contact-help-box {
    margin-top: 25px;

    padding: 18px;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    color: #4338ca;

    background: #f5f3ff;

    border: 1px solid #ddd6fe;

    border-radius: 13px;
}


.contact-help-box > svg {
    width: 20px;
    height: 20px;

    flex-shrink: 0;
}


.contact-help-box strong,
.contact-help-box span {
    display: block;
}


.contact-help-box strong {
    font-size: 12px;
}


.contact-help-box span {
    margin-top: 4px;

    color: #64748b;

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {
    padding: 42px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafaff
        );

    border: 1px solid #e1e7f0;

    border-radius: 22px;

    box-shadow:
        0 20px 55px
        rgba(79, 70, 229, .08);
}


.contact-form-kicker {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    color: #4f46e5;

    background: #eef2ff;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}


.contact-form-kicker svg {
    width: 13px;
    height: 13px;
}


.contact-form-card h2 {
    margin: 16px 0 10px;

    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 38px;

    line-height: 1.1;
}


.contact-form-card > p {
    max-width: 760px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.7;
}


.contact-form {
    margin-top: 30px;
}


.contact-form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}


.contact-field {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.contact-field-full {
    grid-column: 1 / -1;
}


.contact-field label {
    color: #334155;

    font-size: 11px;
    font-weight: 700;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

    padding: 0 15px;

    color: #172554;

    background: #ffffff;

    border: 1px solid #dce4ee;

    border-radius: 10px;

    outline: none;

    font-family: "Outfit", sans-serif;

    font-size: 12px;

    transition: .2s ease;

    box-sizing: border-box;
}


.contact-field input,
.contact-field select {
    min-height: 52px;
}


.contact-field textarea {
    padding-top: 14px;

    resize: vertical;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: #8b8cfb;

    box-shadow:
        0 0 0 4px
        rgba(99, 102, 241, .08);
}


.contact-submit-btn {
    min-height: 52px;

    margin-top: 20px;

    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    border: 0;

    border-radius: 10px;

    font-family: "Outfit", sans-serif;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(79, 70, 229, .20);

    transition: .25s ease;
}


.contact-submit-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 17px 35px
        rgba(79, 70, 229, .28);
}


.contact-submit-btn svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   LOCATION
========================================================= */

.contact-location-section {
    padding: 30px 0 100px;
}


.contact-section-head {
    max-width: 850px;

    margin: 0 auto 45px;

    text-align: center;
}


.contact-section-head > span {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #4f46e5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.contact-section-head > span i {
    width: 28px;
    height: 2px;

    background: #4f46e5;
}


.contact-section-head h2 {
    margin: 12px 0 12px;

    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: clamp(38px, 4vw, 52px);

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.contact-section-head p {
    color: #64748b;

    font-size: 13px;

    line-height: 1.7;
}


.contact-map-card {
    width: 100%;

    height: 520px;

    overflow: hidden;

    border-radius: 24px;

    border: 1px solid #dfe6ef;

    box-shadow:
        0 22px 55px
        rgba(15, 23, 42, .08);
}


.contact-map-card iframe {
    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   SUPPORT CTA
========================================================= */

.contact-support-section {
    padding: 0 0 90px;
}


.contact-support-box {
    min-height: 140px;

    padding: 30px 35px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    background:
        linear-gradient(
            110deg,
            #07183c,
            #173b8f,
            #352b74
        );

    border-radius: 20px;
}


.contact-support-box > div {
    display: flex;
    align-items: center;

    gap: 15px;
}


.contact-support-box > div > svg {
    width: 42px;
    height: 42px;

    padding: 10px;

    color: #ffffff;

    background: rgba(255,255,255,.10);

    border-radius: 12px;
}


.contact-support-box strong,
.contact-support-box span {
    display: block;
}


.contact-support-box strong {
    color: #ffffff;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 22px;
}


.contact-support-box span {
    margin-top: 5px;

    color: rgba(255,255,255,.70);

    font-size: 11px;
}


.contact-support-btn {
    min-height: 48px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    flex-shrink: 0;

    color: #172554;

    background: #ffffff;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}


.contact-support-btn svg {
    width: 14px;
    height: 14px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .contact-main-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .contact-hero {
        padding: 60px 0;
    }

    .contact-hero h1 {
        font-size: 48px;
    }

    .contact-main-section {
        padding: 70px 0;
    }

    .contact-form-card,
    .contact-info-card {
        padding: 28px 22px;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .contact-field-full {
        grid-column: auto;
    }

    .contact-map-card {
        height: 390px;
    }

    .contact-support-box {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .contact-hero h1 {
        font-size: 40px;
    }

    .contact-form-card h2 {
        font-size: 31px;
    }

    .contact-section-head h2 {
        font-size: 34px;
    }

}


.country-flag-badge {
    width: 58px;
    height: 42px;
    margin: 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dbe5f0;
    border-radius: 13px;

    background: linear-gradient(
        145deg,
        #ffffff,
        #f3f7fb
    );

    box-shadow:
        0 5px 14px
        rgba(15, 23, 42, .07);

    overflow: hidden;
}

.country-flag-badge span {
    display: block;

    font-size: 30px;
    line-height: 1;

    transform: translateY(-1px) scale(1.05);
}


/* =========================================================
   DA / DR / AHREFS TRAFFIC ANIMATION
========================================================= */

/* DA + DR circles */

.circle-metric {
    position: relative;

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.circle-metric::after {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 2px solid transparent;

    opacity: 0;

    transform: scale(.85);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* DA */

.metric-blue:hover {
    transform:
        translateY(-4px)
        scale(1.08);

    box-shadow:
        0 12px 28px
        rgba(37, 99, 235, .18);
}

.metric-blue:hover::after {
    opacity: 1;

    transform: scale(1);

    border-color:
        rgba(37, 99, 235, .25);
}


/* DR */

.metric-orange:hover {
    transform:
        translateY(-4px)
        scale(1.08);

    box-shadow:
        0 12px 28px
        rgba(124, 58, 237, .18);
}

.metric-orange:hover::after {
    opacity: 1;

    transform: scale(1);

    border-color:
        rgba(124, 58, 237, .25);
}


/* NUMBER POP */

.circle-metric strong {
    display: inline-block;

    transition:
        transform .25s ease,
        letter-spacing .25s ease;
}

.circle-metric:hover strong {
    transform: scale(1.12);

    letter-spacing: .3px;
}


/* =========================================================
   TRAFFIC ANIMATION
========================================================= */

.traffic-cell {
    transition:
        transform .28s ease;
}

.traffic-cell:hover {
    transform: translateY(-3px);
}


.traffic-cell strong {
    display: inline-block;

    transition:
        transform .25s ease,
        color .25s ease;
}

.traffic-cell:hover strong {
    transform: scale(1.08);

    color: #2563eb;
}


/* TREND ICON */

.traffic-cell .mini-chart {
    display: inline-flex;

    transition:
        transform .3s ease;
}

.traffic-cell:hover .mini-chart {
    transform:
        translateY(-3px)
        scale(1.14);
}


/* icon animation */

.traffic-cell .mini-chart svg {
    transition:
        transform .3s ease;
}

.traffic-cell:hover .mini-chart svg {
    animation:
        trafficTrendMove .75s ease;
}


@keyframes trafficTrendMove {

    0% {
        transform:
            translate(0, 0);
    }

    35% {
        transform:
            translate(3px, -4px);
    }

    65% {
        transform:
            translate(6px, -1px);
    }

    100% {
        transform:
            translate(0, 0);
    }

}


/* =========================================================
   ROW LOAD ANIMATION
========================================================= */

.premium-market-table tbody tr {
    opacity: 0;

    transform:
        translateY(12px);

    animation:
        marketplaceRowIn
        .45s ease
        forwards;
}


.premium-market-table tbody tr:nth-child(1) {
    animation-delay: .03s;
}

.premium-market-table tbody tr:nth-child(2) {
    animation-delay: .06s;
}

.premium-market-table tbody tr:nth-child(3) {
    animation-delay: .09s;
}

.premium-market-table tbody tr:nth-child(4) {
    animation-delay: .12s;
}

.premium-market-table tbody tr:nth-child(5) {
    animation-delay: .15s;
}

.premium-market-table tbody tr:nth-child(n+6) {
    animation-delay: .18s;
}


@keyframes marketplaceRowIn {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .circle-metric,
    .circle-metric strong,
    .traffic-cell,
    .traffic-cell strong,
    .traffic-cell .mini-chart,
    .traffic-cell .mini-chart svg,
    .premium-market-table tbody tr {
        animation: none !important;

        transition: none !important;

        transform: none !important;

        opacity: 1 !important;
    }

}



/* =========================================================
   ANIMATED DA / DR CIRCULAR RINGS
========================================================= */

.animated-metric {
    position: relative;

    width: 52px !important;
    height: 52px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.metric-ring {
    position: absolute;

    inset: 0;

    width: 52px;
    height: 52px;

    transform: rotate(-90deg);
}

.metric-ring-bg,
.metric-ring-progress {
    fill: none;

    stroke-width: 4;

    cx: 26;
    cy: 26;
    r: 22;
}

.metric-ring-bg {
    stroke: #e8edf5;
}

.metric-ring-progress {
    stroke-linecap: round;

    stroke-dasharray: 138.23;
    stroke-dashoffset: 138.23;

    transition:
        stroke-dashoffset 1.4s
        cubic-bezier(.22,.8,.25,1);
}

.metric-blue .metric-ring-progress {
    stroke: #2563eb;
}

.metric-orange .metric-ring-progress {
    stroke: #7c3aed;
}

.metric-number {
    position: relative;

    z-index: 2;

    color: #172554;

    font-size: 12px !important;
    font-weight: 800;
}


/* initial spin feel */

.animated-metric.is-loading .metric-ring {
    animation:
        metricSpin .8s ease-out;
}

@keyframes metricSpin {

    from {
        transform:
            rotate(-180deg)
            scale(.88);
    }

    to {
        transform:
            rotate(-90deg)
            scale(1);
    }

}


/* hover still works */

.animated-metric:hover {
    transform:
        translateY(-4px)
        scale(1.08);
}

/* =========================================================
   FIX DOUBLE DA / DR CIRCLE
========================================================= */

.animated-metric::before,
.animated-metric::after {
    content: none !important;
    display: none !important;
}

.animated-metric {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none;
}

.animated-metric .metric-ring {
    display: block !important;

    position: absolute;

    top: 0;
    left: 0;

    width: 52px !important;
    height: 52px !important;

    overflow: visible;
}

.animated-metric .metric-number {
    position: relative;

    z-index: 5;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #172554;

    background: #ffffff;

    border-radius: 50%;

    font-size: 13px !important;
    font-weight: 800;
}

.market-overview .chart-area {
    position: relative;

    width: 100%;

    height: 260px !important;

    margin-top: 15px;
}


.market-overview .chart-area canvas {
    width: 100% !important;
    height: 100% !important;
}


.chart-live-label {
    padding: 6px 10px;

    color: #4f46e5;

    background: #eef2ff;

    border: 1px solid #dfe3ff;

    border-radius: 999px;

    font-family: "Outfit", sans-serif;

    font-size: 9px;
    font-weight: 700;
}





/* =========================================================
   ORDER / CAMPAIGN FORM PAGE
========================================================= */

.order-hero,
.order-section {
    font-family: "Outfit", sans-serif;
}


.order-hero .container,
.order-section .container {
    width: min(92%, 1450px);

    max-width: 1450px;

    margin-inline: auto;
}


/* =========================================================
   HERO
========================================================= */

.order-hero {
    padding: 85px 0 75px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(99,102,241,.18),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #f7f6ff,
            #ffffff
        );
}


.order-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    color: #4f46e5;

    background: #eef2ff;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.6px;
}


.order-eyebrow svg {
    width: 14px;
    height: 14px;
}


.order-hero h1 {
    max-width: 950px;

    margin: 17px auto 15px;

    color: #0f172a;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(
            48px,
            5vw,
            70px
        );

    font-weight: 750;

    line-height: 1.03;

    letter-spacing: -3px;
}


.order-hero h1 span {
    color: #5b50f6;
}


.order-hero p {
    max-width: 680px;

    margin: auto;

    color: #64748b;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.order-section {
    padding: 80px 0 110px;

    background: #f8faff;
}


.order-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(380px, .85fr);

    align-items: start;

    gap: 30px;
}


/* =========================================================
   SUCCESS
========================================================= */

.order-success {
    margin-bottom: 25px;

    padding: 18px 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #047857;

    background: #ecfdf5;

    border:
        1px solid
        #a7f3d0;

    border-radius: 14px;
}


.order-success > svg {
    width: 25px;
    height: 25px;
}


.order-success strong,
.order-success span {
    display: block;
}


.order-success strong {
    font-size: 13px;
}


.order-success span {
    margin-top: 3px;

    font-size: 11px;
}


/* =========================================================
   FORM CARD
========================================================= */

.order-form-card {
    padding: 38px;

    background: #ffffff;

    border:
        1px solid
        #e1e7f0;

    border-radius: 24px;

    box-shadow:
        0 22px 60px
        rgba(15,23,42,.07);
}


.order-card-header {
    padding-bottom: 26px;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    border-bottom:
        1px solid
        #edf1f5;
}


.order-card-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    border-radius: 14px;

    box-shadow:
        0 10px 25px
        rgba(79,70,229,.20);
}


.order-card-icon svg {
    width: 23px;
    height: 23px;
}


.order-card-header span {
    color: #4f46e5;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.order-card-header h2 {
    margin: 5px 0;

    color: #0f172a;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 27px;
}


.order-card-header p {
    color: #64748b;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   FIELDS
========================================================= */

.order-form-grid {
    margin-top: 28px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;
}


.order-field {
    min-width: 0;
}


.order-field-full {
    grid-column: 1 / -1;
}


.order-field label {
    margin-bottom: 8px;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #25334d;

    font-size: 11px;
    font-weight: 700;
}


.order-field label > span {
    color: #6366f1;
}


.order-field label small {
    color: #94a3b8;

    font-size: 9px;
    font-weight: 500;
}


.order-input-wrap {
    position: relative;
}


.order-input-wrap > svg {
    position: absolute;

    top: 50%;
    left: 14px;

    width: 17px;
    height: 17px;

    color: #94a3b8;

    transform:
        translateY(-50%);

    pointer-events: none;
}


.order-input-wrap input,
.order-input-wrap select,
.order-field textarea {
    width: 100%;

    box-sizing: border-box;

    color: #172554;

    background: #ffffff;

    border:
        1px solid
        #dbe3ed;

    border-radius: 11px;

    outline: none;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 12px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.order-input-wrap input,
.order-input-wrap select {
    min-height: 54px;

    padding:
        0 14px
        0 43px;
}


.order-field textarea {
    min-height: 155px;

    padding: 15px;

    resize: vertical;
}


.order-input-wrap input:focus,
.order-input-wrap select:focus,
.order-field textarea:focus {
    border-color: #818cf8;

    background: #fefeff;

    box-shadow:
        0 0 0 4px
        rgba(99,102,241,.08);
}


.order-error {
    margin-top: 6px;

    display: block;

    color: #dc2626;

    font-size: 9px;
}


/* =========================================================
   PRICE BOX
========================================================= */

.order-total-price-box {
    min-height: 100px;

    padding: 20px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    overflow: hidden;

    position: relative;

    background:
        linear-gradient(
            120deg,
            #07183c,
            #173a8a,
            #3d2c85
        );

    border-radius: 16px;
}


.order-total-price-box::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -105px;

    background:
        rgba(255,255,255,.08);

    border-radius: 50%;
}


.order-total-price-box > div {
    position: relative;

    z-index: 2;
}


.order-total-price-box span {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(
            255,
            255,
            255,
            .62
        );

    font-size: 9px;
}


.order-total-price-box > div > strong {
    color: #ffffff;

    font-size: 15px;
}


.order-price-main {
    text-align: right;

    flex-shrink: 0;
}


.order-price-main small {
    display: block;

    color: #a5b4fc;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}


.order-price-main strong {
    display: block;

    margin-top: 3px;

    color: #ffffff;

    font-size: 28px !important;
}


/* =========================================================
   MESSAGE
========================================================= */

.order-message-footer {
    margin-top: 7px;

    display: flex;
    justify-content: space-between;

    gap: 15px;

    color: #94a3b8;

    font-size: 9px;
}


/* =========================================================
   SUBMIT
========================================================= */

.order-submit-btn {
    width: 100%;

    min-height: 56px;

    margin-top: 25px;

    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    border: 0;

    border-radius: 11px;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 13px;
    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 13px 28px
        rgba(79,70,229,.22);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


.order-submit-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 38px
        rgba(79,70,229,.30);
}


.order-submit-btn svg {
    width: 17px;
    height: 17px;
}


.order-secure-row {
    margin-top: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 17px;
}


.order-secure-row span {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #64748b;

    font-size: 9px;
}


.order-secure-row svg {
    width: 12px;
    height: 12px;

    color: #4f46e5;
}


/* =========================================================
   RIGHT SUMMARY
========================================================= */

.order-summary-card {
    position: sticky;

    top: 90px;

    padding: 30px;

    background: #ffffff;

    border:
        1px solid
        #e0e6ef;

    border-radius: 24px;

    box-shadow:
        0 22px 60px
        rgba(15,23,42,.07);
}


.order-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.order-summary-top > div:first-child > span {
    color: #4f46e5;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.order-summary-top h2 {
    margin-top: 4px;

    color: #0f172a;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 24px;
}


.order-live-badge {
    padding: 7px 10px;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #059669;

    background: #ecfdf5;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;
}


.order-live-badge > span {
    width: 7px;
    height: 7px;

    background: #10b981;

    border-radius: 50%;

    animation:
        orderLivePulse
        1.5s infinite;
}


@keyframes orderLivePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 0
            rgba(16,185,129,.25);
    }

    50% {
        box-shadow:
            0 0 0 6px
            rgba(16,185,129,0);
    }

}


.order-summary-intro {
    margin: 12px 0 22px;

    color: #64748b;

    font-size: 11px;

    line-height: 1.65;
}


/* =========================================================
   SUMMARY TABLE
========================================================= */

.order-summary-table-wrap {
    overflow: hidden;

    border:
        1px solid
        #e5eaf1;

    border-radius: 14px;
}


.order-summary-table {
    width: 100%;

    border-collapse: collapse;
}


.order-summary-table th,
.order-summary-table td {
    padding: 15px 16px;

    border-bottom:
        1px solid
        #edf1f5;

    vertical-align: top;

    font-size: 11px;
}


.order-summary-table tr:last-child th,
.order-summary-table tr:last-child td {
    border-bottom: 0;
}


.order-summary-table th {
    width: 34%;

    color: #64748b;

    background: #f8fafc;

    text-align: left;

    font-weight: 600;
}


.order-summary-table td {
    color: #172554;

    font-weight: 650;

    overflow-wrap: anywhere;
}


.order-summary-table .order-price-row th,
.order-summary-table .order-price-row td {
    background: #f5f3ff;
}


.order-summary-table .order-price-row td {
    color: #4f46e5;

    font-size: 16px;
    font-weight: 800;
}


/* =========================================================
   NOTE
========================================================= */

.order-summary-note {
    margin-top: 17px;

    padding: 14px;

    display: flex;
    align-items: flex-start;

    gap: 9px;

    color: #4338ca;

    background: #f5f3ff;

    border:
        1px solid
        #ddd6fe;

    border-radius: 11px;
}


.order-summary-note svg {
    width: 16px;
    height: 16px;

    flex-shrink: 0;
}


.order-summary-note p {
    margin: 0;

    color: #64748b;

    font-size: 9px;

    line-height: 1.55;
}


/* =========================================================
   SUBMITTED BOX
========================================================= */

.submitted-order-box {
    margin-top: 20px;

    padding: 18px;

    background: #f8fafc;

    border:
        1px solid
        #e2e8f0;

    border-radius: 14px;
}


.submitted-order-heading {
    display: flex;
    align-items: center;

    gap: 10px;

    padding-bottom: 13px;

    border-bottom:
        1px solid
        #e2e8f0;
}


.submitted-order-heading > svg {
    width: 23px;
    height: 23px;

    color: #10b981;
}


.submitted-order-heading strong,
.submitted-order-heading span {
    display: block;
}


.submitted-order-heading strong {
    color: #172554;

    font-size: 12px;
}


.submitted-order-heading span {
    margin-top: 2px;

    color: #94a3b8;

    font-size: 8px;
}


.submitted-order-list {
    margin-top: 12px;
}


.submitted-order-list > div {
    padding: 8px 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


.submitted-order-list span {
    color: #94a3b8;

    font-size: 9px;
}


.submitted-order-list strong {
    max-width: 65%;

    color: #334155;

    text-align: right;

    font-size: 9px;

    overflow-wrap: anywhere;
}


.submitted-order-list .submitted-price {
    color: #4f46e5;

    font-size: 13px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .order-layout {
        grid-template-columns: 1fr;
    }


    .order-summary-card {
        position: static;
    }

}


@media (max-width: 650px) {

    .order-hero {
        padding: 55px 0;
    }


    .order-hero h1 {
        font-size: 42px;

        letter-spacing: -2px;
    }


    .order-section {
        padding: 55px 0 80px;
    }


    .order-form-card,
    .order-summary-card {
        padding: 24px 19px;
    }


    .order-form-grid {
        grid-template-columns: 1fr;
    }


    .order-field-full {
        grid-column: auto;
    }


    .order-total-price-box {
        align-items: flex-start;

        flex-direction: column;
    }


    .order-price-main {
        text-align: left;
    }

}




.contact-location-card {
    min-height: 210px;

    padding: 35px 40px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 25px;

    background:
        linear-gradient(
            120deg,
            #ffffff,
            #f7f8ff
        );

    border:
        1px solid
        #dfe6ef;

    border-radius: 22px;

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, .07);
}


.contact-location-icon {
    width: 65px;
    height: 65px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    border-radius: 17px;

    box-shadow:
        0 12px 28px
        rgba(79, 70, 229, .20);
}


.contact-location-icon svg {
    width: 28px;
    height: 28px;
}


.contact-location-content span {
    color: #4f46e5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.contact-location-content h3 {
    margin: 7px 0 7px;

    color: #0f172a;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 26px;
}


.contact-location-content p {
    max-width: 650px;

    margin: 0;

    color: #64748b;

    font-size: 12px;

    line-height: 1.6;
}


.contact-map-link {
    min-height: 50px;

    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    flex-shrink: 0;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    border-radius: 10px;

    font-family: "Outfit", sans-serif;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 10px 25px
        rgba(79, 70, 229, .18);

    transition: .25s ease;
}


.contact-map-link:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 32px
        rgba(79, 70, 229, .25);
}


.contact-map-link svg {
    width: 15px;
    height: 15px;
}


@media (max-width: 750px) {

    .contact-location-card {
        grid-template-columns: 1fr;

        align-items: flex-start;

        padding: 28px 24px;
    }

    .contact-map-link {
        width: fit-content;
    }

}


.header-auth-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-login-link {
    color: #172554;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.header-register-btn,
.header-dashboard-btn {
    min-height: 40px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #ffffff;

    background: linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

    border-radius: 9px;

    font-family: "Outfit", sans-serif;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition: .22s ease;
}

.header-dashboard-btn svg {
    width: 15px;
    height: 15px;
}

.header-register-btn:hover,
.header-dashboard-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(79, 70, 229, .20);
}

.header-logout-form {
    margin: 0;
}

.header-logout-btn {
    width: 40px;
    height: 40px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #475569;

    background: #ffffff;

    border: 1px solid #dbe3ed;
    border-radius: 9px;

    cursor: pointer;

    transition: .22s ease;
}

.header-logout-btn svg {
    width: 17px;
    height: 17px;
}

.header-logout-btn:hover {
    color: #ffffff;

    background: linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

    border-color: transparent;

    transform: translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(79, 70, 229, .18);
}



/* ================================================
   WEBSITE TABLE - LOGIN PRICE
================================================ */

.starting-price-cell {
    text-align: center;
}


.price-login-btn {
    min-width: 112px;
    min-height: 39px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    border: 0;
    border-radius: 9px;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 7px 17px
        rgba(79, 70, 229, .18);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


.price-login-btn:hover {
    color: #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 11px 23px
        rgba(79, 70, 229, .27);
}


.price-login-btn svg {
    width: 14px;
    height: 14px;
}


.logged-price {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2px;
}


.logged-price .price-label {
    color: #94a3b8;

    font-size: 8px;
    font-weight: 600;
}


.logged-price strong {
    color: #4f46e5;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 15px;
    font-weight: 800;
}







/* =========================================================
   PRICE + ADD TO CART
========================================================= */

.price-cart-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.add-cart-btn {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    border-radius: 9px;

    text-decoration: none;

    box-shadow:
        0 8px 18px
        rgba(79, 70, 229, .18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.add-cart-btn:hover {
    color: #ffffff;

    transform:
        translateY(-2px)
        scale(1.05);

    box-shadow:
        0 12px 24px
        rgba(79, 70, 229, .28);
}


.add-cart-btn svg {
    width: 15px;
    height: 15px;
}


@media (max-width: 700px) {

    .price-cart-wrap {
        gap: 3px;
    }


    .add-cart-btn {
        width: 24px;
        height: 24px;

        border-radius: 5px;
    }


    .add-cart-btn svg {
        width: 9px;
        height: 9px;
    }

}




/* =========================================================
   MARKETPLACE PRICE + ADD TO CART
========================================================= */

.price-cart-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.market-add-cart-form {
    margin: 0;

    display: inline-flex;
}


.add-cart-btn {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    border: 0;

    border-radius: 9px;

    cursor: pointer;

    box-shadow:
        0 8px 18px
        rgba(79, 70, 229, .20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.add-cart-btn:hover {
    transform:
        translateY(-2px)
        scale(1.05);

    box-shadow:
        0 12px 24px
        rgba(79, 70, 229, .28);
}


.add-cart-btn svg {
    width: 15px;
    height: 15px;
}


@media (max-width: 700px) {

    .price-cart-wrap {
        gap: 3px;
    }


    .add-cart-btn {
        width: 24px;
        height: 24px;

        border-radius: 5px;
    }


    .add-cart-btn svg {
        width: 9px;
        height: 9px;
    }

}