/* =========================================================
   IP BIOTECH — CERTIFICATIONS & COMPLIANCE
   Premium Corporate UI
   ========================================================= */

:root {
    --cert-navy: #063b52;
    --cert-navy-dark: #032b3c;
    --cert-navy-deep: #021f2c;

    --cert-teal: #159eba;
    --cert-blue: #62c9df;
    --cert-blue-light: #a9e5ef;

    --cert-white: #ffffff;
    --cert-bg: #f5f9fb;
    --cert-light: #eaf4f7;

    --cert-text: #102a36;
    --cert-muted: #637d88;

    --cert-border: rgba(6, 59, 82, 0.11);

    --cert-container: 1200px;
    --cert-radius: 22px;

    --cert-transition:
        0.45s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   BASE
   ========================================================= */

.certifications-page {
    background: var(--cert-white);
    color: var(--cert-text);
}

.certifications-page *,
.certifications-page *::before,
.certifications-page *::after {
    box-sizing: border-box;
}

.cert-container {
    width: min(100% - 48px, var(--cert-container));
    margin: 0 auto;
}


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

.cert-hero {
    position: relative;
    min-height: 610px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--cert-navy-deep);
    color: var(--cert-white);
}

/*
   Hero image layer
*/
.cert-hero::before {
    content: "";

    position: absolute;
    inset: -4%;

    background:
        url("../../images/IP_Biotech_Img3.jpg")
        center center / cover no-repeat;

    transform: scale(1.05);

    animation:
        certHeroKenBurns
        14s
        ease-in-out
        infinite
        alternate;

    z-index: 0;
    will-change: transform;
}


/*
   Dark cinematic overlay
*/
.cert-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 31, 44, 0.97) 0%,
            rgba(3, 43, 60, 0.90) 42%,
            rgba(6, 59, 82, 0.65) 100%
        );

    z-index: 1;
}


/*
   Decorative light
*/
.cert-hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -150px;

    border-radius: 50%;

    border: 1px solid rgba(98, 201, 223, 0.18);

    box-shadow:
        0 0 0 60px rgba(98, 201, 223, 0.025),
        0 0 0 120px rgba(98, 201, 223, 0.018),
        0 0 0 180px rgba(98, 201, 223, 0.012);

    animation:
        certOrbit
        16s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;

    z-index: 2;
}


.cert-hero-container {
    position: relative;

    z-index: 3;

    width: min(100% - 48px, var(--cert-container));

    margin: 0 auto;

    padding: 115px 0 100px;
}


.cert-hero-content {
    max-width: 790px;
}


.cert-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 24px;

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

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: var(--cert-blue);
}


.cert-hero h1 {
    margin: 0;

    font-size: clamp(48px, 6.4vw, 82px);

    line-height: 1.01;

    letter-spacing: -0.05em;

    font-weight: 700;

    color: var(--cert-white);
}


.cert-hero h1 span {
    color: var(--cert-blue);
}


.cert-hero-description {
    max-width: 680px;

    margin: 30px 0 0;

    font-size: 18px;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.76);
}


.cert-hero-line {
    width: 90px;
    height: 2px;

    margin-top: 36px;

    background: var(--cert-blue);

    transform-origin: left;

    animation:
        certLineReveal
        1.2s
        cubic-bezier(.22, 1, .36, 1)
        both;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.cert-intro {
    position: relative;

    padding: 120px 0;

    background: var(--cert-white);
}


.cert-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.78fr)
        minmax(0, 1.35fr);

    gap: 90px;

    align-items: start;
}


.cert-section-label {
    display: inline-block;

    margin-bottom: 20px;

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

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--cert-teal);
}


.cert-intro-title {
    margin: 0;

    max-width: 470px;

    font-size: clamp(34px, 4vw, 55px);

    line-height: 1.08;

    letter-spacing: -0.04em;

    color: var(--cert-navy);
}


.cert-intro-copy {
    max-width: 720px;

    margin: 0;

    font-size: 17px;

    line-height: 1.9;

    color: var(--cert-muted);
}


.cert-intro-copy + .cert-intro-copy {
    margin-top: 22px;
}


/* =========================================================
   CERTIFICATION SECTION
   ========================================================= */

.certifications-section {
    position: relative;

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            var(--cert-bg) 0%,
            #ffffff 100%
        );

    overflow: hidden;
}


/*
   Background technical grid
*/
.certifications-section::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(6, 59, 82, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(6, 59, 82, 0.025) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

    pointer-events: none;
}


.cert-section-heading {
    position: relative;

    max-width: 780px;

    margin-bottom: 62px;

    z-index: 1;
}


.cert-section-heading h2 {
    margin: 0;

    font-size: clamp(36px, 4.3vw, 58px);

    line-height: 1.07;

    letter-spacing: -0.04em;

    color: var(--cert-navy);
}


.cert-section-heading h2 span {
    color: var(--cert-teal);
}


.cert-section-heading p {
    max-width: 690px;

    margin: 22px 0 0;

    font-size: 17px;

    line-height: 1.8;

    color: var(--cert-muted);
}


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

.cert-grid {
    position: relative;

    display: grid;

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

    gap: 22px;

    z-index: 1;
}


.cert-card {
    position: relative;

    min-height: 310px;

    padding: 34px;

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

    border:
        1px solid
        var(--cert-border);

    border-radius: var(--cert-radius);

    box-shadow:
        0 10px 35px
        rgba(3, 43, 60, 0.045);

    overflow: hidden;

    transition:
        transform var(--cert-transition),
        box-shadow var(--cert-transition),
        border-color var(--cert-transition);
}


/*
   Top accent
*/
.cert-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--cert-teal),
            var(--cert-blue)
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform var(--cert-transition);
}


/*
   Soft internal glow
*/
.cert-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -100px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(98, 201, 223, 0.07);

    transition:
        transform var(--cert-transition);
}


.cert-card:hover {
    transform: translateY(-9px);

    border-color:
        rgba(21, 158, 186, 0.28);

    box-shadow:
        0 24px 55px
        rgba(3, 43, 60, 0.11);
}


.cert-card:hover::before {
    transform: scaleX(1);
}


.cert-card:hover::after {
    transform: scale(1.35);
}


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

.cert-card-icon {
    position: relative;

    width: 58px;
    height: 58px;

    display: flex;

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

    margin-bottom: 30px;

    border-radius: 16px;

    background:
        var(--cert-light);

    color:
        var(--cert-teal);

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

    transition:
        background var(--cert-transition),
        color var(--cert-transition),
        transform var(--cert-transition);

    z-index: 2;
}


.cert-card:hover .cert-card-icon {
    background:
        var(--cert-teal);

    color:
        var(--cert-white);

    transform:
        translateY(-3px)
        rotate(-2deg);
}


.cert-card h3 {
    position: relative;

    margin: 0 0 14px;

    font-size: 21px;

    line-height: 1.3;

    color: var(--cert-navy);

    z-index: 2;
}


.cert-card p {
    position: relative;

    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    color: var(--cert-muted);

    z-index: 2;
}


.cert-status {
    position: relative;

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 25px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--cert-teal);

    z-index: 2;
}


.cert-status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background:
        var(--cert-blue);

    box-shadow:
        0 0 0 5px
        rgba(98, 201, 223, 0.13);
}


/* =========================================================
   REGULATORY FRAMEWORK
   ========================================================= */

.cert-framework {
    position: relative;

    padding: 125px 0;

    background: var(--cert-white);

    overflow: hidden;
}


.cert-framework::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -300px;
    bottom: -300px;

    border:
        1px solid
        rgba(98, 201, 223, 0.15);

    border-radius: 50%;

    box-shadow:
        0 0 0 60px
        rgba(98, 201, 223, 0.025);

    pointer-events: none;
}


.cert-framework-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 100px;

    align-items: center;

    z-index: 1;
}


.cert-framework-content {
    max-width: 610px;
}


.cert-framework-label {
    display: inline-block;

    margin-bottom: 20px;

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

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--cert-teal);
}


.cert-framework h2 {
    margin: 0;

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

    line-height: 1.08;

    letter-spacing: -0.04em;

    color: var(--cert-navy);
}


.cert-framework p {
    margin: 24px 0 0;

    font-size: 17px;

    line-height: 1.85;

    color: var(--cert-muted);
}


/* =========================================================
   FRAMEWORK LIST
   ========================================================= */

.cert-framework-list {
    display: flex;

    flex-direction: column;

    border-top:
        1px solid
        var(--cert-border);
}


.cert-framework-item {
    display: grid;

    grid-template-columns: 58px 1fr;

    gap: 20px;

    padding: 27px 0;

    border-bottom:
        1px solid
        var(--cert-border);

    transition:
        padding var(--cert-transition),
        background var(--cert-transition);
}


.cert-framework-item:hover {
    padding-left: 10px;
}


.cert-framework-number {
    width: 44px;
    height: 44px;

    display: flex;

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

    border-radius: 50%;

    background:
        var(--cert-light);

    color:
        var(--cert-teal);

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

    transition:
        background var(--cert-transition),
        color var(--cert-transition),
        transform var(--cert-transition);
}


.cert-framework-item:hover .cert-framework-number {
    background:
        var(--cert-teal);

    color:
        var(--cert-white);

    transform:
        scale(1.06);
}


.cert-framework-item h3 {
    margin: 0 0 7px;

    font-size: 18px;

    color:
        var(--cert-navy);
}


.cert-framework-item p {
    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color:
        var(--cert-muted);
}


/* =========================================================
   COMPLIANCE STATEMENT
   ========================================================= */

.cert-compliance {
    position: relative;

    padding: 110px 0;

    background:
        var(--cert-navy);

    color: var(--cert-white);

    overflow: hidden;
}


.cert-compliance::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -260px;
    top: -250px;

    border:
        1px solid
        rgba(98, 201, 223, 0.15);

    border-radius: 50%;

    box-shadow:
        0 0 0 70px
        rgba(98, 201, 223, 0.02),
        0 0 0 140px
        rgba(98, 201, 223, 0.015);

    animation:
        certOrbit
        18s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;
}


.cert-compliance-inner {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        180px;

    gap: 80px;

    align-items: center;

    z-index: 2;
}


.cert-compliance h2 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(34px, 4.2vw, 57px);

    line-height: 1.08;

    letter-spacing: -0.04em;

    color: var(--cert-white);
}


.cert-compliance h2 span {
    color:
        var(--cert-blue);
}


.cert-compliance p {
    max-width: 760px;

    margin: 24px 0 0;

    font-size: 16px;

    line-height: 1.8;

    color:
        rgba(255, 255, 255, 0.72);
}


/* =========================================================
   COMPLIANCE MARK
   ========================================================= */

.cert-compliance-mark {
    position: relative;

    width: 150px;
    height: 150px;

    display: flex;

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

    margin: 0 auto;

    border:
        1px solid
        rgba(98, 201, 223, 0.38);

    border-radius: 50%;

    color:
        var(--cert-blue);

    animation:
        certMarkFloat
        6s
        ease-in-out
        infinite;
}


.cert-compliance-mark::before,
.cert-compliance-mark::after {
    content: "";

    position: absolute;

    border:
        1px solid
        rgba(98, 201, 223, 0.14);

    border-radius: 50%;
}


.cert-compliance-mark::before {
    inset: -18px;
}


.cert-compliance-mark::after {
    inset: -36px;
}


.cert-compliance-mark span {
    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.12em;

    line-height: 1.55;

    text-align: center;

    text-transform: uppercase;
}


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

.cert-cta {
    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            var(--cert-bg),
            var(--cert-light)
        );
}


.cert-cta-inner {
    position: relative;

    padding: 75px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            var(--cert-navy-deep),
            var(--cert-navy)
        );

    overflow: hidden;

    box-shadow:
        0 25px 70px
        rgba(3, 43, 60, 0.12);
}


.cert-cta-inner::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -130px;
    top: -220px;

    border:
        1px solid
        rgba(98, 201, 223, 0.19);

    border-radius: 50%;
}


.cert-cta-inner::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: 40px;
    bottom: -170px;

    border:
        1px solid
        rgba(98, 201, 223, 0.12);

    border-radius: 50%;
}


.cert-cta-content {
    position: relative;

    max-width: 820px;

    z-index: 2;
}


.cert-cta-label {
    display: inline-block;

    margin-bottom: 18px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--cert-blue);
}


.cert-cta h2 {
    margin: 0;

    font-size: clamp(36px, 4.4vw, 58px);

    line-height: 1.08;

    letter-spacing: -0.04em;

    color:
        var(--cert-white);
}


.cert-cta p {
    max-width: 690px;

    margin: 23px 0 32px;

    font-size: 17px;

    line-height: 1.8;

    color:
        rgba(255, 255, 255, 0.72);
}


.cert-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding: 15px 24px;

    border-radius: 999px;

    background:
        var(--cert-blue);

    color:
        var(--cert-navy-dark);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background var(--cert-transition),
        color var(--cert-transition),
        transform var(--cert-transition),
        box-shadow var(--cert-transition);
}


.cert-cta-button:hover {
    background:
        var(--cert-white);

    color:
        var(--cert-navy);

    transform:
        translateY(-4px);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.18);
}


.cert-cta-arrow {
    font-size: 18px;

    transition:
        transform var(--cert-transition);
}


.cert-cta-button:hover .cert-cta-arrow {
    transform:
        translateX(5px);
}


/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */

.cert-reveal {
    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity 0.85s ease,
        transform 0.85s cubic-bezier(.22, 1, .36, 1);
}


.cert-reveal-left {
    opacity: 0;

    transform:
        translateX(-35px);

    transition:
        opacity 0.85s ease,
        transform 0.85s cubic-bezier(.22, 1, .36, 1);
}


.cert-reveal-right {
    opacity: 0;

    transform:
        translateX(35px);

    transition:
        opacity 0.85s ease,
        transform 0.85s cubic-bezier(.22, 1, .36, 1);
}


.cert-reveal-scale {
    opacity: 0;

    transform:
        scale(0.94);

    transition:
        opacity 0.85s ease,
        transform 0.85s cubic-bezier(.22, 1, .36, 1);
}


.cert-reveal.is-visible,
.cert-reveal-left.is-visible,
.cert-reveal-right.is-visible,
.cert-reveal-scale.is-visible {
    opacity: 1;

    transform:
        translate(0, 0)
        scale(1);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes certHeroKenBurns {

    0% {
        transform:
            scale(1.04)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            scale(1.09)
            translate3d(-1%, -0.5%, 0);
    }

    100% {
        transform:
            scale(1.12)
            translate3d(1%, 0.5%, 0);
    }
}


@keyframes certOrbit {

    0% {
        transform:
            translate3d(-10px, 0, 0)
            rotate(0deg);
    }

    100% {
        transform:
            translate3d(10px, 10px, 0)
            rotate(7deg);
    }
}


@keyframes certMarkFloat {

    0% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

    100% {
        transform:
            translateY(0);
    }
}


@keyframes certLineReveal {

    0% {
        transform:
            scaleX(0);
        opacity: 0;
    }

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


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

@media (max-width: 1050px) {

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

    .cert-intro-grid,
    .cert-framework-grid {
        grid-template-columns:
            1fr;

        gap: 55px;
    }

    .cert-intro-title {
        max-width: 700px;
    }

    .cert-framework-content {
        max-width: 760px;
    }

    .cert-compliance-inner {
        grid-template-columns:
            1fr
            170px;

        gap: 50px;
    }
}


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

@media (max-width: 700px) {

    .cert-container,
    .cert-hero-container {
        width:
            min(
                calc(100% - 32px),
                var(--cert-container)
            );
    }


    .cert-hero {
        min-height: 520px;
    }


    .cert-hero-container {
        padding:
            90px 0 75px;
    }


    .cert-hero h1 {
        font-size: 45px;

        letter-spacing:
            -0.045em;
    }


    .cert-hero-description {
        font-size: 16px;

        line-height:
            1.7;
    }


    .cert-intro,
    .certifications-section,
    .cert-framework {
        padding:
            82px 0;
    }


    .cert-intro-grid,
    .cert-framework-grid {
        gap:
            40px;
    }


    .cert-intro-title {
        font-size:
            36px;
    }


    .cert-section-heading {
        margin-bottom:
            42px;
    }


    .cert-section-heading h2 {
        font-size:
            38px;
    }


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

        gap:
            17px;
    }


    .cert-card {
        min-height:
            auto;

        padding:
            29px;
    }


    .cert-framework-item {
        grid-template-columns:
            48px 1fr;

        gap:
            15px;

        padding:
            23px 0;
    }


    .cert-framework-number {
        width:
            38px;

        height:
            38px;
    }


    .cert-compliance {
        padding:
            85px 0;
    }


    .cert-compliance-inner {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .cert-compliance-mark {
        margin:
            0 auto;
    }


    .cert-compliance h2 {
        font-size:
            37px;
    }


    .cert-cta {
        padding:
            75px 0;
    }


    .cert-cta-inner {
        padding:
            45px 28px;

        border-radius:
            23px;
    }


    .cert-cta h2 {
        font-size:
            37px;
    }


    .cert-cta p {
        font-size:
            16px;
    }


    .cert-cta-button {
        width:
            100%;

        justify-content:
            center;
    }
}


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

@media (max-width: 400px) {

    .cert-hero h1 {
        font-size:
            40px;
    }

    .cert-card {
        padding:
            25px;
    }

    .cert-compliance h2 {
        font-size:
            34px;
    }

    .cert-cta h2 {
        font-size:
            34px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cert-hero::before,
    .cert-hero-glow,
    .cert-compliance::before,
    .cert-compliance-mark {
        animation:
            none;
    }

    .cert-reveal,
    .cert-reveal-left,
    .cert-reveal-right,
    .cert-reveal-scale {
        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }

    .cert-card,
    .cert-card::before,
    .cert-card::after,
    .cert-card-icon,
    .cert-framework-item,
    .cert-framework-number,
    .cert-cta-button,
    .cert-cta-arrow {
        transition:
            none;
    }
}