/* ===== Base / Helpers ===== */
:root {
    --brand: rgb(13, 109, 252);
}

body {
    background: #fff;
    color: #111;
}


/* ===== Hero ===== */
.hero-grad {
    background: linear-gradient(180deg, rgb(220, 231, 252) 0%, #ffffff 70%);
}

.title-xl {
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.5px;
    font-size: clamp(2.4rem, 6vw, 5rem);
    color: var(--brand);
}

.title-xl .ai {
    background: linear-gradient(135deg, var(--brand) 0%, rgb(2, 40, 122) 60%, rgb(20, 84, 220) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Pill outline button with gradient border */
.btn-gradient-outline {
    position: relative;
    border-radius: 999px;
    padding: .9rem 1.6rem;
    font-weight: 700;
    color: var(--brand);
    background: #fff;
    transition: all .3s ease;
}

.btn-gradient-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(13, 109, 252), rgb(1, 57, 175), rgb(13, 109, 252));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: all .3s ease;
}

.btn-gradient-outline:hover {
    background: var(--brand);
    color: #fff;
}

/* ===== API Cards ===== */
.api-card {
    border: 0;
    border-radius: 22px;
    padding: 0;
    height: 100%;
    background: radial-gradient(120% 140% at 0% 0%, rgba(230, 52, 46, .06) 0%, rgba(0, 0, 0, 0) 40%),
        linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .06);
    transition: transform .22s ease, box-shadow .22s ease;
}

.api-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .10);
}

.api-card .card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.api-title {
    font-weight: 800;
    letter-spacing: -.2px;
}

.api-desc {
    color: #5b6470;
}

.api-img-bottom {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    margin-top: auto;
}

/* Pastel tints per card */
.tint-blue {
    background: linear-gradient(180deg, #eef4ff 0%, #ffffff 60%);
}

.tint-pink {
    background: linear-gradient(180deg, #fff0fb 0%, #ffffff 60%);
}

.tint-mint {
    background: linear-gradient(180deg, #effff6 0%, #ffffff 60%);
}

.tint-vanilla {
    background: linear-gradient(180deg, #fff8ea 0%, #ffffff 60%);
}

/* ===== Why on4t – Premium section ===== */
.why-title {
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.8px;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    background: linear-gradient(135deg, #111 0%, #444 40%, #111 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .5rem;
}

.why-sub {
    color: #6b7280;
    max-width: 48rem;
    margin-bottom: 2.25rem;
}

/* gradient-border bubble with glass icon */
.bubble {
    position: relative;
    border-radius: 18px;
    padding: 18px 18px 18px 78px;
    background: #fff;
    isolation: isolate;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(230, 52, 46, .9), rgba(230, 52, 46, .35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.bubble+.bubble {
    margin-top: 16px;
}

.bubble:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .10);
}

.bubble p {
    margin: 0;
    color: #4b5563;
}

/* glassy icon chips */
.icon-wrap {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(6px);
}

.icon-ai {
    background: linear-gradient(135deg, var(--brand), #ff7a73);
}

.icon-speed {
    background: linear-gradient(135deg, #22c55e, #86efac);
}

.icon-custom {
    background: linear-gradient(135deg, #6366f1, #a5b4fc);
}

/* right visual card */
.why-visual {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .16);
}

.why-visual img {
    width: 100%;
    display: block;
}

.why-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 50% 70%, transparent 0%, rgba(0, 0, 0, .25) 100%);
    pointer-events: none;
}

.why-badge {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    padding: .6rem 1.05rem;
    border-radius: 999px;
    font-weight: 800;
    color: #111;
    background: rgba(255, 255, 255, .92);
    border: 2px solid rgb(13, 109, 252);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 28px rgba(230, 52, 46, .35);
}

/* ===== Docs block (optional) ===== */
.docs-card {
    border-radius: 16px;
}

.api-card-large {
    transform: scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.api-card-large .api-img-bottom {
    height: 300px;
    object-fit: cover;
}

/* ===== Suite of AI-Powered APIs (chip grid) ===== */
.suite-title {
    font-weight: 900;
    letter-spacing: -.8px;
    line-height: 1.05;
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: #111;
}

.suite-sub {
    color: #6b7280;
    max-width: 62rem;
    margin: 0 auto 3rem;
}

.tool-chip {
    display: flex;
    align-items: center;
    gap: .9rem;
    border-radius: 18px;
    padding: 18px 20px;
    background: #f8fafc;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04);
    transition: transform .18s ease, box-shadow .18s ease;
}

.tool-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.chip-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
}

/* pastel variants */
.tc-cream {
    background: #fbfde9;
}

.tc-sky {
    background: #e6f5ff;
}

.tc-mint {
    background: #eafff3;
}

.tc-rose {
    background: #ffeef6;
}

.tc-sun {
    background: #fff8e2;
}

.tc-lilac {
    background: #efe9ff;
}

/* optional: small HD tag */
.badge-hd {
    font-size: .75rem;
    font-weight: 800;
    padding: .2rem .4rem;
    border-radius: .5rem;
    background: #e6f5ff;
    color: #0f172a;
    border: 1px solid #dbeafe;
}

/* ===== FAQs ===== */
.faq-title {
    font-weight: 900;
    letter-spacing: -.8px;
    line-height: 1.05;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #111;
    text-align: center;
    margin-bottom: 4rem;
}

.faq-sub {
    color: #6b7280;
    text-align: center;
    max-width: 58rem;
    margin: 0 auto 2rem;
}

.accordion.faq-accordion .accordion-item {
    border: 0;
    border-bottom: 1px solid #eee;
    border-radius: 0 !important;
    background: #fff;
}

.accordion.faq-accordion .accordion-button {
    padding: 1.15rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111;
    background: #fff;
    box-shadow: none;
}

.accordion.faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.accordion.faq-accordion .accordion-body {
    padding: 0 0 1.15rem 0;
    color: #4b5563;
    max-width: 60rem;
}

.accordion.faq-accordion .accordion-button::after {
    /* minimal chevron */
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}

.accordion.faq-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.cta-section {
    background: linear-gradient(90deg, rgb(13, 109, 252), rgb(1, 34, 104), rgb(13, 109, 252));
    border-radius: 24px;
    max-width: 1300px;
    padding: 3.5rem 1.5rem;
    color: white;
    margin: 5rem auto;
    text-align: center;
}


.cta-title {
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.cta-title span {
    color: rgb(199, 213, 244);
}

.cta-desc {
    font-size: 1.4rem;
    max-width: 825px;
    margin: 0 auto 2rem;
    opacity: 0.9;
}

.cta-btn {
    display: inline-block;
    background: #fff;
    color: rgb(13, 109, 252);
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: linear-gradient(90deg, rgb(13, 109, 252), rgb(0, 58, 188));
    /* Gradient background */
    color: white;
    /* Optionally change text color on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Add shadow for depth */
    transition: background 0.5s ease, color 0.5s ease, box-shadow 0.3s ease;
    /* Smooth transition */
}



/* ===== Pricing v2 (red theme, glossy) ===== */
.pricing-v2 {
    --brand: rgb(13, 109, 252);
    --brand2: #ff6a63;
    --ink: #0b0b0b;
    --glass: rgba(255, 255, 255, .06);
    --line: rgba(255, 255, 255, .14);

    padding: clamp(2.5rem, 5vw, 4rem) 1rem;

    /* red → black → red like reference */
    background:
        radial-gradient(1100px 400px at -10% -20%, rgb(0, 58, 188) 0%, transparent 60%),
        radial-gradient(900px 380px at 110% 120%, rgb(0, 58, 188) 0%, transparent 60%),
        linear-gradient(135deg, rgb(0, 58, 188) 0%, #0b0b0b 45%, rgb(0, 58, 188) 100%);

    color: #fff;
    margin-block: 3rem;
}

.pricingv2-title {
    font-weight: 900;
    letter-spacing: -.8px;
    line-height: 1.05;
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin-bottom: 1rem;
}

.pricingv2-sub {
    color: #dfe4ea;
    opacity: .9;
    max-width: 54rem;
    margin: 0 auto 3rem;
}

/* cards */
.plan-card {
    height: 100%;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid var(--line);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .25);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.plan-card::after {
    /* inner glow edge */
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 22px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 60%);
    mix-blend-mode: screen;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .32);
    border-color: rgba(255, 255, 255, .22);
}

.plan-inner {
    padding: 26px;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: .75rem;
}

.plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.plan-name span {
    color: #ffd4d2;
    font-weight: 800;
}

.plan-note {
    color: #dfe4ea;
    opacity: .9;
    margin: 0 0 .25rem;
}

.plan-price {
    font-weight: 900;
    letter-spacing: .5px;
    margin: .6rem 0 1rem;
    display: flex;
    align-items: end;
    gap: .25rem;
    min-height: 2.2rem;
}

.plan-price .value {
    font-size: 1.6rem;
}

.plan-price .per {
    font-size: .95rem;
    opacity: .8;
}

.plan-price.talk {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.plan-ribbon {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
    background: #fff;
    color: rgb(13, 109, 252);
    font-weight: 900;
    font-size: .85rem;
    padding: .3rem .65rem;
    border-radius: 10px 10px 0 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.plan-popular {
    outline: 2px solid rgba(255, 255, 255, .2);
}

.btn-plan {
    margin-top: .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 999px;
    padding: .9rem 1.15rem;
    font-weight: 900;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .2);
    transition: all .2s ease;
    color: #fff;
}

.btn-plan span {
    transition: transform .2s ease;
}

.btn-plan:hover span {
    transform: translateX(4px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand2), var(--brand));
    box-shadow: 0 10px 26px rgba(230, 52, 46, .35);
}

.btn-ghost {
    background: rgba(255, 255, 255, .08);
}

.btn-dark {
    background: rgba(0, 0, 0, .45);
}

.plan-list {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    list-style: none;
    margin-bottom: 0;
}

.plan-list li {
    position: relative;
    padding-left: 1.4rem;
    margin: .55rem 0;
    color: #f1f5f9;
}

.plan-list li::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .45rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd4d2, var(--brand));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}

/* responsive niceties */

@media (max-width: 575.98px) {
    .plan-inner {
        padding: 22px;
    }

    .btn-plan {
        padding: .85rem 1rem;
    }
}

/* === RESPONSIVE FIX PACK (append at end) ====================== */

/* Global section breathing room */
section {
    padding: 3rem 0
}

@media (min-width:992px) {
    section {
        padding: 6rem 0
    }
}

/* Headings scale nicely */
.title-xl {
    font-size: clamp(2rem, 6vw, 4.25rem)
}

.why-title {
    font-size: clamp(1.9rem, 5vw, 3.4rem)
}

.suite-title {
    font-size: clamp(1.6rem, 5vw, 3rem)
}

.faq-title {
    font-size: clamp(1.6rem, 5vw, 3.4rem)
}

.pricingv2-title {
    font-size: clamp(1.8rem, 4.5vw, 3.4rem)
}

.pricingv2-sub {
    font-size: clamp(.95rem, 1.1vw, 2rem)
}

/* API cards: equal height + responsive images */
.api-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%
}

.api-title {
    font-size: clamp(1.5rem, 1.2vw, 1.2rem)
}

.api-desc {
    font-size: clamp(1rem, 1.05vw, 1rem)
}

.api-img-bottom {
    height: 220px;
    object-fit: cover
}

@media (max-width:1199.98px) {
    .api-img-bottom {
        height: 200px
    }
}

@media (max-width:991.98px) {
    .api-img-bottom {
        height: 180px
    }
}

@media (max-width:575.98px) {
    .api-img-bottom {
        height: 150px
    }
}

/* Featured “Upscale” card stays centered and scaled only on lg+ */
.api-card-large {
    transform: none
}

@media (min-width:992px) {
    .api-card-large {
        transform: scale(1.02)
    }

    .col-lg-10 .api-card {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto
    }
}

/* WHY section tweaks on tablet/mobile */
@media (max-width:991.98px) {
    .why-visual {
        margin-top: 1rem
    }

    .why-badge {
        bottom: 4%
    }
}

/* Chips grid comfort */
.tool-chip {
    min-height: 60px
}

@media (max-width:575.98px) {
    .tool-chip {
        padding: 14px 16px
    }

    .chip-icon {
        width: 38px;
        height: 38px;
        font-size: 16px
    }
}

/* Pricing cards: equal heights, safe text sizes */
.pricing-v2 {
    padding: clamp(7rem, 4vw, 0rem) 1rem;
}

.plan-card {
    display: flex
}

.plan-inner {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    width: 100%
}

.plan-list {
    margin-top: auto
}

.btn-plan {
    width: 100%
}

@media (max-width:575.98px) {
    .plan-name {
        font-size: 1.1rem
    }

    .plan-price .value {
        font-size: 1.3rem
    }

    .plan-ribbon {
        right: 10px;
        top: 10px
    }
}

/* FAQ button text scale */
.accordion.faq-accordion .accordion-button {
    font-size: clamp(1rem, 1.1vw, 1.075rem)
}

/* CTA: same red gradient look, but compact & responsive width */
@media (max-width:991.98px) {
    .cta-section {
        max-width: 700px
    }
}

@media (max-width:575.98px) {
    .cta-section {
        max-width: 92%;
        padding: 1.75rem 1rem
    }

    .cta-desc {
        font-size: 1rem
    }
}

/* Tiny screens: keep container off the edges */
@media (max-width:360px) {
    .container {
        padding-left: 16px;
        padding-right: 16px
    }
}

/* === Prevent horizontal scroll === */
html,
body {
    overflow-x: hidden;
}

/* Force images/videos to never overflow */
img,
video {
    max-width: 100%;
    height: auto;
}

/* Any container that might push width */


/* Pricing, CTA, and large sections fix */
.pricing-v2,
.cta-section {
    overflow-x: hidden;
}

/* Accordion & chip grids wrap on small screens */
.tool-chip {
    flex-wrap: wrap;
}

/* ====== PRICING: hero price like screenshot ====== */
.plan-card {
    /* sharp corners as you asked earlier */
    border-radius: 0 !important;
    min-height: 500px;
    /* taller cards */
}

.plan-card::after {
    border-radius: 0 !important;
}

/* keep equal height layout */
.plan-inner {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
}

.plan-list {
    margin-top: auto;
}

/* big price */
.price-hero {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    margin: 1.1rem 0 1.4rem;
}

.price-hero .currency {
    font-weight: 900;
    font-size: clamp(1.6rem, 2.2vw, 1.9rem);
    color: #ffb5b2;
    opacity: .95;
    line-height: 1;
}

.price-hero .amount {
    font-weight: 900;
    letter-spacing: -1.2px;
    line-height: .9;
    font-size: clamp(2.8rem, 6.2vw, 4.3rem);
    /* BIG */
}

.price-hero .per {
    font-weight: 800;
    color: #dfe4ea;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    margin-left: .15rem;
}

/* buttons fit full width and feel pill-y */
.btn-plan {
    width: 100%;
    border-radius: 999px
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .plan-card {
        min-height: 500px;
    }
}

@media (max-width: 575.98px) {
    .plan-card {
        min-height: auto;
    }

    /* mobile relax */
    .price-hero .amount {
        font-size: 2.8rem;
    }
}