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

:root {

    --bg: #f7f8f4;

    --surface: #ffffff;

    --dark: #111712;

    --dark-soft: #182019;

    --green: #7bd66f;

    --green-dark: #3c7d3c;

    --text: #172019;

    --muted: #667069;

    --border: #dfe5df;

    --white: #ffffff;

}

html {
    scroll-behavior: smooth;
}

body {

    font-family: "Inter", sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.6;

}

h1,
h2,
h3 {

    font-family: "Space Grotesk", sans-serif;

    line-height: 1.1;

}

a {

    color: inherit;

    text-decoration: none;

}

img {

    max-width: 100%;

    display: block;

}

code {

    font-family: Consolas, monospace;

}

.container {

    width: min(1180px, 90%);

    margin: auto;

}


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

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(247, 248, 244, 0.93);

    backdrop-filter: blur(15px);

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

}

.nav-container {

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.logo {

    font-family: "Space Grotesk", sans-serif;

    font-size: 1.15rem;

    font-weight: 700;

}

.nav-links {

    display: flex;

    gap: 28px;

}

.nav-links a {

    font-size: 0.9rem;

    color: var(--muted);

    transition: 0.2s;

}

.nav-links a:hover {

    color: var(--text);

}

.nav-github {

    padding: 10px 17px;

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

    border-radius: 100px;

    font-size: 0.85rem;

    font-weight: 600;

    background: var(--surface);

}


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

.hero {

    padding: 120px 0 100px;

}

.hero-grid {

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 70px;

    align-items: center;

}

.badge {

    display: inline-block;

    padding: 7px 13px;

    border-radius: 100px;

    background: #e4f3e1;

    color: var(--green-dark);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    margin-bottom: 25px;

}

.hero h1 {

    font-size: clamp(3.2rem, 7vw, 6.3rem);

    letter-spacing: -0.07em;

}

.hero h1 span,
.section-heading h2 span,
.cta h2 span {

    color: var(--green-dark);

}

.hero-description {

    max-width: 700px;

    margin-top: 30px;

    font-size: 1.1rem;

    color: var(--muted);

}

.hero-buttons {

    display: flex;

    gap: 12px;

    margin-top: 35px;

}

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 22px;

    border-radius: 9px;

    font-weight: 700;

    transition: 0.2s;

}

.button:hover {

    transform: translateY(-2px);

}

.primary {

    background: var(--dark);

    color: white;

}

.secondary {

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

    background: white;

}

.large {

    padding: 15px 27px;

}

.hero-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 30px;

}

.hero-tech span {

    padding: 6px 10px;

    background: #ebeee9;

    border-radius: 6px;

    color: var(--muted);

    font-size: 0.75rem;

    font-weight: 600;

}


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

.hero-visual {

    display: flex;

    justify-content: center;

}

.leaf-card {

    width: 330px;

    padding: 45px 35px;

    border-radius: 25px;

    background: var(--dark);

    color: white;

    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.15);

    transform: rotate(2deg);

}

.leaf-icon {

    font-size: 6rem;

    margin-bottom: 30px;

    text-align: center;

}

.prediction-label {

    color: #87948b;

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.15em;

}

.prediction-result {

    font-size: 2.2rem;

    font-family: "Space Grotesk", sans-serif;

    font-weight: 700;

}

.prediction-status {

    color: var(--green);

    margin-top: 5px;

    font-size: 0.85rem;

}

.confidence-bar {

    height: 6px;

    margin-top: 30px;

    border-radius: 10px;

    background: #2d382f;

    overflow: hidden;

}

.confidence-fill {

    width: 96.48%;

    height: 100%;

    background: var(--green);

}

.confidence-text {

    margin-top: 12px;

    font-size: 0.75rem;

    color: #9ba59e;

}


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

.stats {

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

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

}

.stats-grid {

    display: grid;

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

}

.stat {

    padding: 35px 20px;

    text-align: center;

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

}

.stat:last-child {

    border-right: none;

}

.stat strong {

    display: block;

    font-family: "Space Grotesk", sans-serif;

    font-size: 1.8rem;

}

.stat span {

    color: var(--muted);

    font-size: 0.78rem;

}


/* =====================================================
   SECTIONS
===================================================== */

.section {

    padding: 110px 0;

}

.section-heading {

    display: flex;

    gap: 25px;

    margin-bottom: 65px;

}

.section-number {

    color: var(--green-dark);

    font-size: 0.8rem;

    font-weight: 800;

    padding-top: 6px;

}

.eyebrow {

    margin-bottom: 12px;

    color: var(--green-dark);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.15em;

}

.section-heading h2 {

    font-size: clamp(2.2rem, 5vw, 4rem);

    letter-spacing: -0.05em;

}

.section-intro {

    max-width: 700px;

    color: var(--muted);

    margin-top: -35px;

    margin-bottom: 40px;

}


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

.about-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 70px;

}

.about-text p {

    color: var(--muted);

    margin-bottom: 22px;

    font-size: 1.02rem;

}

.about-card {

    padding: 40px;

    border-radius: 20px;

    background: var(--dark);

    color: white;

}

.card-icon {

    font-size: 2rem;

    margin-bottom: 25px;

}

.about-card h3 {

    font-size: 1.7rem;

    margin-bottom: 15px;

}

.about-card p {

    color: #a9b3ac;

}

.mini-flow {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;

    margin-top: 30px;

}

.mini-flow span {

    padding: 7px 10px;

    border-radius: 6px;

    background: #263028;

    font-size: 0.72rem;

}

.mini-flow b {

    color: var(--green);

}


/* =====================================================
   DARK SECTION
===================================================== */

.dark-section {

    background: var(--dark);

    color: white;

}

.dark-section .section-heading h2 {

    color: white;

}

.dark-section .section-heading h2 span {

    color: var(--green);

}

.dark-section .eyebrow {

    color: var(--green);

}


/* =====================================================
   CLASSES
===================================================== */

.class-grid {

    display: grid;

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

    gap: 20px;

}

.class-card {

    min-width: 0;

    background: #1b241d;

    border: 1px solid #2a342c;

    border-radius: 18px;

    overflow: hidden;

}

.class-symbol {

    height: 170px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: "Space Grotesk", sans-serif;

    font-size: 4rem;

    font-weight: 800;

}

.class-symbol.early {

    background: #40372b;

    color: #e1bd78;

}

.class-symbol.late {

    background: #302e35;

    color: #c8a4d7;

}

.class-symbol.healthy {

    background: #243c2a;

    color: var(--green);

}

.class-content {

    padding: 27px;

}

.class-tag {

    color: var(--green);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.1em;

}

.class-content h3 {

    margin: 9px 0;

    font-size: 1.5rem;

}

.class-content p {

    color: #9da79f;

    font-size: 0.9rem;

    margin-bottom: 20px;

}

.class-content code {

    color: #b5c0b8;

    font-size: 0.7rem;

    word-break: break-word;

}


/* =====================================================
   TECHNICAL PIPELINE
===================================================== */

.technical-pipeline {

    max-width: 900px;

    margin: auto;

}

.pipeline-card {

    display: grid;

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

    gap: 25px;

    padding: 30px;

    background: white;

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

    border-radius: 18px;

}

.pipeline-number {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #e6f0e3;

    color: var(--green-dark);

    font-weight: 800;

}

.pipeline-content {

    min-width: 0;

}

.pipeline-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 12px;

}

.pipeline-title h3 {

    font-size: 1.35rem;

}

.pipeline-title span {

    color: var(--green-dark);

    font-size: 0.7rem;

    font-weight: 700;

}

.pipeline-content > p {

    color: var(--muted);

    font-size: 0.9rem;

}

.pipeline-connector {

    text-align: center;

    color: var(--green-dark);

    font-size: 1.5rem;

    font-weight: 800;

    padding: 10px;

}

.pipeline-details {

    display: grid;

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

    gap: 10px;

    margin-top: 25px;

}

.pipeline-details div {

    padding: 15px;

    background: #f2f5f0;

    border-radius: 9px;

}

.pipeline-details small,
.training-grid small {

    display: block;

    color: var(--muted);

    font-size: 0.65rem;

    margin-bottom: 5px;

}

.pipeline-details strong {

    font-size: 0.9rem;

}

.split-bar {

    display: flex;

    margin-top: 25px;

    height: 45px;

    border-radius: 8px;

    overflow: hidden;

    font-size: 0.72rem;

    font-weight: 700;

    text-align: center;

}

.split-bar div {

    display: flex;

    align-items: center;

    justify-content: center;

}

.split-bar .train {

    width: 80%;

    background: #b9ddb2;

}

.split-bar .validation {

    width: 10%;

    background: #d8e9d3;

}

.split-bar .test {

    width: 10%;

    background: #e8eee5;

}

.code-block {

    margin-top: 20px;

    padding: 18px;

    border-radius: 10px;

    background: var(--dark);

    color: var(--green);

}

.augmentation-tags,
.android-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;

}

.augmentation-tags span,
.android-tags span {

    padding: 7px 10px;

    border-radius: 6px;

    background: #e8eee5;

    color: var(--green-dark);

    font-size: 0.7rem;

    font-weight: 700;

}

.architecture {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;

    margin-top: 25px;

}

.architecture span {

    padding: 8px 10px;

    background: #f0f4ee;

    border-radius: 6px;

    font-size: 0.68rem;

    font-weight: 700;

}

.architecture b {

    color: var(--green-dark);

}

.model-stat {

    margin-top: 25px;

    padding: 18px;

    border-radius: 10px;

    background: var(--dark);

    color: white;

}

.model-stat strong {

    font-family: "Space Grotesk", sans-serif;

    font-size: 1.5rem;

}

.model-stat span {

    color: #9da79f;

    margin-left: 10px;

    font-size: 0.8rem;

}

.training-grid {

    display: grid;

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

    gap: 10px;

    margin-top: 25px;

}

.training-grid div {

    padding: 15px;

    background: #f2f5f0;

    border-radius: 9px;

}

.training-grid strong {

    display: block;

    font-size: 0.8rem;

}

.evaluation-result {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 25px;

}

.evaluation-result div {

    padding: 22px;

    background: var(--dark);

    color: white;

    border-radius: 12px;

}

.evaluation-result span {

    display: block;

    color: #9da79f;

    font-size: 0.7rem;

}

.evaluation-result strong {

    display: block;

    margin-top: 5px;

    font-size: 1.8rem;

    color: var(--green);

}

.artifact-list {

    margin-top: 25px;

    display: grid;

    gap: 8px;

}

.artifact-list div {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 12px 15px;

    background: #f2f5f0;

    border-radius: 8px;

}

.artifact-list code {

    font-size: 0.7rem;

    word-break: break-word;

}

.artifact-list span {

    color: var(--muted);

    font-size: 0.7rem;

}

.artifact-list .important-artifact {

    background: #e6f5e2;

    border: 1px solid #b9ddb2;

}

.testing-flow {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

}

.testing-flow span {

    padding: 9px 12px;

    background: #e8eee5;

    border-radius: 7px;

    font-size: 0.7rem;

    font-weight: 700;

}

.testing-flow b {

    color: var(--green-dark);

}


/* =====================================================
   MODEL
===================================================== */

.model-section {

    background: #eef2eb;

}

.model-overview {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 25px;

}

.model-architecture-card {

    padding: 35px;

    background: white;

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

    border-radius: 18px;

}

.model-architecture-card h3 {

    margin-bottom: 30px;

}

.architecture-vertical {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

}

.architecture-vertical > div {

    width: min(100%, 400px);

    padding: 15px;

    text-align: center;

    background: #f0f4ee;

    border-radius: 9px;

    font-weight: 700;

}

.architecture-vertical small {

    display: block;

    color: var(--muted);

    margin-top: 3px;

    font-size: 0.65rem;

    font-weight: 500;

}

.architecture-vertical > span {

    color: var(--green-dark);

    font-weight: 800;

}

.architecture-final {

    background: var(--dark) !important;

    color: white;

}

.architecture-final small {

    color: #a7b0aa;

}

.model-metrics {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}

.metric-card {

    padding: 30px;

    background: white;

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

    border-radius: 15px;

}

.metric-card span {

    display: block;

    color: var(--muted);

    font-size: 0.7rem;

}

.metric-card strong {

    display: block;

    margin-top: 10px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 1.5rem;

}


/* =====================================================
   PREDICTION OUTPUTS
===================================================== */

.results-section {

    background: var(--bg);

}

.results-section .section-intro {

    max-width: 850px;

    margin-top: -35px;

    margin-bottom: 45px;

    color: var(--muted);

    font-size: 0.95rem;

}


/* Prediction Gallery */

.prediction-gallery {

    display: grid;

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

    gap: 25px;

}


/* Prediction Card */

.prediction-card {

    background: white;

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

    border-radius: 18px;

    overflow: hidden;

    transition: 0.25s ease;

}

.prediction-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

}


/* Image Container */

.prediction-image {

    width: 100%;

    min-height: 360px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #edf1eb;

    padding: 20px;

    overflow: hidden;

}


/* Actual Prediction Image */

.prediction-image img {

    width: 100%;

    height: auto;

    max-height: 600px;

    object-fit: contain;

    display: block;

    border-radius: 8px;

    transition: transform 0.25s ease;

}

.prediction-card:hover .prediction-image img {

    transform: scale(1.015);

}


/* Card Information */

.prediction-info {

    padding: 25px;

}

.prediction-info h3 {

    font-size: 1.3rem;

    margin-bottom: 8px;

}

.prediction-info p {

    color: var(--muted);

    font-size: 0.85rem;

}

/* =====================================================
   ANDROID
===================================================== */

.android-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

}

.android-content h3 {

    font-size: 2rem;

    margin-bottom: 25px;

}

.android-content p {

    color: #a5afa8;

    margin-bottom: 20px;

}

.android-content code {

    color: var(--green);

}

.android-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}

.feature {

    padding: 25px;

    background: #1a231c;

    border: 1px solid #293329;

    border-radius: 14px;

}

.feature span {

    color: var(--green);

    font-size: 0.7rem;

    font-weight: 800;

}

.feature strong {

    display: block;

    margin: 10px 0;

    font-family: "Space Grotesk", sans-serif;

}

.feature p {

    color: #8f9a92;

    font-size: 0.8rem;

}


/* =====================================================
   DOWNLOADS
===================================================== */

.downloads-section {

    background: #eef2eb;

}

.download-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}

.download-card {

    display: grid;

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

    gap: 25px;

    padding: 35px;

    background: white;

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

    border-radius: 18px;

}

.file-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: var(--dark);

    color: white;

    font-size: 0.7rem;

    font-weight: 800;

}

.file-icon.jadx {

    background: var(--green-dark);

}

.download-type {

    color: var(--green-dark);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.1em;

}

.download-card h3 {

    margin: 7px 0 10px;

    font-size: 1.4rem;

}

.download-card p {

    color: var(--muted);

    font-size: 0.85rem;

    margin-bottom: 22px;

}

.download-button {

    display: inline-flex;

    padding: 10px 15px;

    background: var(--dark);

    color: white;

    border-radius: 8px;

    font-size: 0.75rem;

    font-weight: 700;

    transition: 0.2s;

}

.download-button:hover {

    transform: translateY(-2px);

    background: var(--green-dark);

}


/* =====================================================
   TESTING
===================================================== */

.testing-card {

    display: grid;

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

    gap: 30px;

    align-items: center;

    padding: 40px;

    border-radius: 20px;

    background: white;

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

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.04);

}

.testing-icon {

    font-size: 3rem;

}

.testing-card h2 {

    font-size: 1.8rem;

    margin-bottom: 10px;

}

.testing-card p {

    color: var(--muted);

    font-size: 0.9rem;

}

.testing-badge {

    padding: 9px 14px;

    background: #e5f3e2;

    color: var(--green-dark);

    border-radius: 100px;

    font-size: 0.7rem;

    font-weight: 700;

    white-space: nowrap;

}


/* =====================================================
   TECHNOLOGIES
===================================================== */

.light-section {

    background: #eef2eb;

}

.tech-grid {

    display: grid;

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

    gap: 12px;

}

.tech-card {

    padding: 25px 20px;

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

    border-radius: 12px;

    background: white;

}

.tech-card strong {

    display: block;

    font-family: "Space Grotesk", sans-serif;

    margin-bottom: 5px;

}

.tech-card span {

    color: var(--muted);

    font-size: 0.7rem;

}


/* =====================================================
   LEARNING
===================================================== */

.learning-grid {

    display: grid;

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

    gap: 15px;

}

.learning-grid > div {

    padding: 30px;

    background: #1a231c;

    border: 1px solid #2b352d;

    border-radius: 15px;

}

.learning-grid span {

    color: var(--green);

    font-size: 0.7rem;

    font-weight: 800;

}

.learning-grid h3 {

    margin: 15px 0 8px;

}

.learning-grid p {

    color: #8f9a92;

    font-size: 0.8rem;

}


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

.cta {

    padding: 130px 0;

    background: var(--green);

}

.cta-content {

    text-align: center;

    max-width: 750px;

}

.cta .eyebrow {

    color: #285a2a;

}

.cta h2 {

    font-size: clamp(2.5rem, 6vw, 4.5rem);

    letter-spacing: -0.06em;

}

.cta h2 span {

    color: #285a2a;

}

.cta p:not(.eyebrow) {

    color: #355b38;

    max-width: 600px;

    margin: 25px auto 30px;

}


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

footer {

    background: var(--dark);

    color: white;

    padding: 45px 0;

}

.footer-content {

    display: grid;

    grid-template-columns: 1fr auto auto;

    gap: 40px;

    align-items: center;

}

.footer-content strong {

    font-family: "Space Grotesk", sans-serif;

}

.footer-content p {

    color: #849087;

    margin-top: 5px;

    font-size: 0.75rem;

}

.footer-links {

    display: flex;

    gap: 20px;

}

.footer-links a {

    color: #a9b3ab;

    font-size: 0.8rem;

}

.copyright {

    color: #849087;

    font-size: 0.75rem;

}


/* =====================================================
   RESPONSIVE — TABLET
===================================================== */

@media (max-width: 1000px) {

    .nav-links {

        display: none;

    }

    .hero-grid,
    .about-grid,
    .android-grid,
    .model-overview {

        grid-template-columns: 1fr;

    }

    .hero {

        padding-top: 80px;

    }

    .hero-visual {

        justify-content: flex-start;

    }

    .stats-grid {

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

    }

    .class-grid {

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

    }

    /*
       Prediction outputs:
       2 cards per row on tablet.
    */

    .prediction-gallery {

        grid-template-columns: 1fr 1fr;

    }

    .tech-grid {

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

    }

    .learning-grid {

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

    }

    .download-grid {

        grid-template-columns: 1fr;

    }

}


/* =====================================================
   RESPONSIVE — MOBILE
===================================================== */

@media (max-width: 700px) {

    .section {

        padding: 80px 0;

    }

    .hero h1 {

        font-size: 3.3rem;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }

    .button {

        width: 100%;

    }

    .stats-grid,
    .class-grid,
    .tech-grid,
    .learning-grid {

        grid-template-columns: 1fr;

    }

    .stat {

        border-right: none;

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

    }

    .stat:last-child {

        border-bottom: none;

    }

    .pipeline-card {

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

    }

    .pipeline-title {

        flex-direction: column;

        align-items: flex-start;

    }

    .pipeline-details,
    .training-grid {

        grid-template-columns: 1fr 1fr;

    }

    .evaluation-result {

        grid-template-columns: 1fr;

    }

    .artifact-list div {

        flex-direction: column;

        align-items: flex-start;

    }

    .android-features {

        grid-template-columns: 1fr;

    }

    .testing-card {

        grid-template-columns: 1fr;

    }

    .testing-badge {

        width: fit-content;

    }

    .download-card {

        grid-template-columns: 1fr;

    }

    .footer-content {

        grid-template-columns: 1fr;

    }

    /*
       Prediction image height on mobile.
    */

    .prediction-gallery {

        grid-template-columns: 1fr;

    }

    .prediction-image {

        min-height: 300px;

    }

}


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

@media (max-width: 450px) {

    .hero h1 {

        font-size: 2.8rem;

    }

    .pipeline-card {

        grid-template-columns: 1fr;

    }

    .pipeline-number {

        margin-bottom: 5px;

    }

    .pipeline-details,
    .training-grid {

        grid-template-columns: 1fr;

    }

    .prediction-image {

        height: 280px;

    }

    .results-section > h2 {

        font-size: 2.2rem;

    }

}