/* ==========================================================
   PopLife
   Core stylesheet
   Version 1.0
   ========================================================== */


/* ==========================================================
   1. Google Fonts
   ========================================================== */

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


/* ==========================================================
   2. CSS Variables
   ========================================================== */

:root{

    /* Brand colours */

    --color-primary:        #7B287D;
    --color-primary-light:  #A44AA8;

    --color-secondary:      #142B5F;
    --color-secondary-light:#496AAE;

    /* Neutral colours */

    --color-background:     #FAFAFC;
    --color-surface:        #FFFFFF;

    --color-border:         #E7EAF2;
    --color-border-dark:    #D5DCE8;

    --color-text:           #1F2640;
    --color-text-light:     #66708F;

    --color-success:        #57A867;
    --color-warning:        #DCA645;
    --color-danger:         #C84D4D;


    /* Typography */

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

    --font-size-xs: clamp(.80rem,.75rem + .1vw,.90rem);
    --font-size-sm: clamp(.90rem,.85rem + .2vw,1rem);
    --font-size-md: clamp(1rem,.95rem + .2vw,1.125rem);
    --font-size-lg: clamp(1.15rem,1.05rem + .4vw,1.35rem);

    --font-size-h4: clamp(1.4rem,1.25rem + .6vw,1.7rem);
    --font-size-h3: clamp(1.7rem,1.45rem + .8vw,2rem);
    --font-size-h2: clamp(2.1rem,1.8rem + 1vw,2.7rem);
    --font-size-h1: clamp(2.8rem,2rem + 2vw,4rem);


    /* Font weights */

    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;


    /* Layout */

    --container-width:1280px;

    --header-height:84px;

    --section-spacing:7rem;

    --card-radius:18px;
    --button-radius:12px;

    --icon-size:52px;


    /* Shadows */

    --shadow-sm:
        0 3px 10px rgba(20,43,95,.05);

    --shadow-md:
        0 10px 30px rgba(20,43,95,.08);

    --shadow-lg:
        0 18px 45px rgba(20,43,95,.14);


    /* Transitions */

    --transition:
        all .25s ease;

}


/* ==========================================================
   3. Reset
   ========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

    scroll-padding-top:100px;

}


body{

    font-family:var(--font-family);

    background:var(--color-background);

    color:var(--color-text);

    font-size:var(--font-size-md);

    line-height:1.75;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    overscroll-behavior:none;

}


img{

    display:block;

    max-width:100%;

}


svg{

    display:block;

}


a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


button{

    font:inherit;

    cursor:pointer;

    border:none;

    background:none;

}


ul{

    list-style:none;

}


input,
textarea,
select{

    font:inherit;

}


::selection{

    background:var(--color-primary);

    color:white;

}


/* ==========================================================
   4. Typography
   ========================================================== */

h1,
h2,
h3,
h4{

    font-weight:var(--fw-bold);

    color:var(--color-secondary);

    line-height:1.15;

    letter-spacing:-0.02em;

}


h1{

    font-size:var(--font-size-h1);

    max-width:12ch;

}


h2{

    font-size:var(--font-size-h2);

    margin-bottom:1rem;

}


h3{

    font-size:var(--font-size-h3);

}


h4{

    font-size:var(--font-size-h4);

}


p{

    color:var(--color-text-light);

    max-width:70ch;

}


strong{

    color:var(--color-secondary);

    font-weight:var(--fw-semibold);

}


small{

    font-size:var(--font-size-sm);

}


/* ==========================================================
   5. Global layout
   ========================================================== */

.container{

    width:min(100% - 3rem,var(--container-width));

    margin-inline:auto;

}


.home section{

    padding-block:var(--section-spacing);

}


.section-title{

    text-align:center;

    margin-bottom:4rem;

}


.section-subtitle{

    color:var(--color-primary);

    font-weight:var(--fw-semibold);

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:var(--font-size-sm);

    margin-bottom:.75rem;

}


.grid{

    display:grid;

    gap:2rem;

}


.flex{

    display:flex;

}


.page{

    padding-top:calc(var(--header-height) + 3rem);

    padding-bottom:var(--section-spacing);

}


/* ==========================================================
   6. Generic cards
   ========================================================== */

.card{

    background:var(--color-surface);

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

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

    padding:2rem;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}


/* ==========================================================
   7. Generic buttons
   ========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    padding:.9rem 1.5rem;

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

    font-weight:var(--fw-semibold);

    transition:var(--transition);

}


.btn-primary{

    background:var(--color-primary);

    color:white;

}


.btn-primary:hover{

    background:var(--color-secondary);

}


.btn-outline{

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

    color:var(--color-primary);

}


.btn-outline:hover{

    background:var(--color-primary);

    color:white;

}


/* ==========================================================
   8. Accessibility
   ========================================================== */

:focus-visible{

    outline:3px solid var(--color-primary);

    outline-offset:3px;

}


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

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}

/* ==========================================================
   9. Navbar
   ========================================================== */

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

    width:100%;

    height:var(--header-height);

    display:flex;

    align-items:center;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(231,234,242,.75);

    transition:var(--transition);

}


.site-header.scrolled{

    background:rgba(255,255,255,.98);

    box-shadow:var(--shadow-sm);

}


.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:nowrap;

}


.logo{

    display:flex;

    align-items:center;

    gap:1rem;

}


.logo img{

    height:56px;

    width:auto;

}


.logo-text{

    display:flex;

    flex-direction:column;

    line-height:1.1;

}


.logo-title{

    font-weight:700;

    color:var(--color-secondary);

    font-size:1.2rem;

}


.logo-subtitle{

    font-size:.82rem;

    color:var(--color-text-light);

}


.nav-menu{

    display:flex;

    align-items:center;

    gap:2rem;

}


.nav-menu a{

    position:relative;

    color:var(--color-secondary);

    font-weight:500;

    transition:var(--transition);

}


.nav-menu a:hover{

    color:var(--color-primary);

}


.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:var(--transition);

}


.nav-menu a:hover::after{

    width:100%;

}


.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:12px;

    align-items:center;

    justify-content:center;

    color:var(--color-secondary);

    transition:var(--transition);

}

.menu-toggle i{

    font-size:1.8rem;

}

.menu-toggle:hover{

    background:rgba(123,40,125,.08);

    color:var(--color-primary);

}


.nav-menu a.active{

    color: var(--color-primary);

}

.nav-menu a.active::after{

    width:100%;

}


/* ==========================================================
   10. Hero
   ========================================================== */

.hero{

    position:relative;

    overflow:hidden;

    min-height:680px;

    display:flex;

    align-items:center;

    isolation:isolate;

}


.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.96),
            rgba(250,250,252,.90)
        );

    z-index:-2;

}


.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../img/hero.svg");

    background-position:center right;

    background-repeat:no-repeat;

    background-size:contain;

    opacity:.22;

    z-index:-1;

}


.hero-content{

    max-width:720px;

}


.hero h1{

    margin-bottom:1.5rem;

}


.hero p{

    font-size:1.15rem;

    margin-bottom:2rem;

}


.hero-keywords{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    margin-bottom:3rem;

}


.hero-keywords span{

    color:var(--color-primary);

    font-weight:600;

}


.hero-keywords span:not(:last-child)::after{

    content:"•";

    margin-left:1rem;

    color:var(--color-border-dark);

}


.hero-stats{

    display:grid;

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

    gap:1.5rem;

    margin-top:4rem;

}


.hero-stat{

    display:flex;

    flex-direction:column;

    gap:.3rem;

}


.hero-stat-number{

    font-size:2rem;

    font-weight:700;

    color:var(--color-primary);

}


.hero-stat-label{

    font-size:.92rem;

    color:var(--color-text-light);

}


.hero-wave{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    pointer-events:none;

}

/* ==========================================================
   11. Explore PopLife
   ========================================================== */

.features{

    display:grid;

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

    gap:1.5rem;

}


.feature-card{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    gap:1rem;

    min-height:240px;

    padding:2rem;

    background:var(--color-surface);

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

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

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    cursor:pointer;

}


.feature-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

    border-color:var(--color-primary-light);

}


.feature-icon{

    width:64px;

    height:64px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:rgba(123,40,125,.08);

    color:var(--color-primary);

    font-size:1.8rem;

}


.feature-card h3{

    font-size:1.2rem;

    margin:0;

}


.feature-card p{

    flex:1;

    font-size:.95rem;

    color:var(--color-text-light);

}


.feature-link{

    display:flex;

    align-items:center;

    gap:.5rem;

    font-weight:600;

    color:var(--color-primary);

}

.feature-link i{

    transition:var(--transition);

}

.feature-card:hover .feature-link i{

    transform:translateX(5px);

}


/* ==========================================================
   12. Featured Species
   ========================================================== */

.species-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

    gap:2rem;

    margin-top:3rem;

}


.species-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:1.5rem;

    border-radius:18px;

    transition:var(--transition);

    cursor:pointer;

}


.species-card:hover{

    background:rgba(123,40,125,.06);

    transform:translateY(-5px);

}


.species-icon{

    width:90px;
    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 1rem;

}

.species-icon img{

    width:100%;
    height:100%;

    object-fit:contain;

}


.species-icon img{

    width:52px;

    height:52px;

}


.species-name{

    font-weight:600;

    color:var(--color-secondary);

    margin-bottom:.3rem;

}


.species-latin{

    font-size:.85rem;

    font-style:italic;

    color:var(--color-text-light);

}


.species-card:hover .species-icon{

    border-color:var(--color-primary);

}


/* ==========================================================
   13. Latest Datasets + News
   ========================================================== */

.updates{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:3rem;

}


.panel{

    background:var(--color-surface);

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

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

    padding:2rem;

    box-shadow:var(--shadow-sm);

}


.panel h3{

    margin-bottom:2rem;

}


.update-item{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1rem 0;

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

}


.update-item:last-child{

    border-bottom:none;

}


.update-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    background:rgba(123,40,125,.08);

    display:grid;

    place-items:center;

    flex-shrink:0;

}


.update-icon img{

    width:32px;

}


.update-content{

    flex:1;

}


.update-title{

    font-weight:600;

    color:var(--color-secondary);

}


.update-date{

    font-size:.85rem;

    color:var(--color-text-light);

    margin-top:.2rem;

}


.update-link{

    color:var(--color-primary);

    font-weight:600;

    white-space:nowrap;

}


/* ==========================================================
   14. News
   ========================================================== */

.news-item{

    padding:1rem 0;

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

}


.news-item:last-child{

    border-bottom:none;

}


.news-date{

    font-size:.82rem;

    color:var(--color-primary);

    font-weight:600;

    margin-bottom:.4rem;

}


.news-title{

    font-weight:600;

    color:var(--color-secondary);

    margin-bottom:.4rem;

}


.news-text{

    font-size:.92rem;

    color:var(--color-text-light);

}


.news-more{

    display:inline-flex;

    align-items:center;

    gap:.4rem;

    margin-top:.6rem;

    color:var(--color-primary);

    font-weight:600;

}

/* ==========================================================
   15. Footer
   ========================================================== */

.site-footer{

    margin-top:var(--section-spacing);

    background:var(--color-secondary);

    color:white;

    position:relative;

}


.site-footer::before{

    content:"";

    display:block;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-primary-light)
    );

}


.footer-container{

    width:min(100% - 3rem,var(--container-width));

    margin-inline:auto;

    padding:4rem 0 2rem;

}


.footer-grid{

    display:grid;

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

    gap:3rem;

}


.footer-column h4{

    color:white;

    font-size:1rem;

    margin-bottom:1rem;

}


.footer-column p{

    color:rgba(255,255,255,.75);

    font-size:.95rem;

    line-height:1.8;

}


.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:.75rem;

}


.footer-column a{

    color:rgba(255,255,255,.75);

}


.footer-column a:hover{

    color:white;

}


.footer-logo{

    height:64px;

    margin-bottom:1.5rem;

}


.footer-bottom{

    margin-top:3rem;

    padding-top:2rem;

    border-top:1px solid rgba(255,255,255,.15);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    flex-wrap:wrap;

}


.footer-bottom p{

    color:rgba(255,255,255,.6);

    font-size:.9rem;

}


.footer-icons{

    display:flex;

    gap:1rem;

}


.footer-icons a{

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    transition:var(--transition);

}


.footer-icons a:hover{

    background:var(--color-primary);

}


/* ==========================================================
   16. Badges
   ========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.45rem .9rem;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}


.badge-primary{

    background:rgba(123,40,125,.08);

    color:var(--color-primary);

}


.badge-secondary{

    background:rgba(20,43,95,.08);

    color:var(--color-secondary);

}


.badge-success{

    background:rgba(87,168,103,.10);

    color:var(--color-success);

}


/* ==========================================================
   17. Lists
   ========================================================== */

.list-clean{

    display:flex;

    flex-direction:column;

    gap:.75rem;

}


.list-clean li{

    display:flex;

    gap:.75rem;

    align-items:flex-start;

}


.list-clean i{

    color:var(--color-primary);

}


/* ==========================================================
   18. Dividers
   ========================================================== */

.divider{

    width:100%;

    height:1px;

    background:var(--color-border);

}


.divider-lg{

    margin:4rem 0;

}


/* ==========================================================
   19. Helpers
   ========================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-primary{

    color:var(--color-primary);

}

.text-secondary{

    color:var(--color-secondary);

}

.text-light{

    color:var(--color-text-light);

}


.mt-1{margin-top:.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:2rem;}
.mt-4{margin-top:3rem;}
.mt-5{margin-top:4rem;}

.mb-1{margin-bottom:.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:2rem;}
.mb-4{margin-bottom:3rem;}
.mb-5{margin-bottom:4rem;}


.hidden{

    display:none !important;

}


.rounded{

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

}


.shadow{

    box-shadow:var(--shadow-md);

}


/* ==========================================================
   20. Images
   ========================================================== */

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}


.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}


/* ==========================================================
   21. Scroll animations
   ========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(25px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}


.fade-up.visible{

    opacity:1;

    transform:none;

}


/* ==========================================================
   22. Anchor offset
   ========================================================== */

[id]{

    scroll-margin-top:110px;

}


/* ==========================================================
   22. Species rows
   ========================================================== */

.page-intro{

    max-width:900px;

    margin:0 auto 3rem;

    text-align:center;

    color:var(--color-text-light);

}

.species-list{

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.species-row{

    background:white;

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

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

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:all .25s ease;

}

.species-row:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-lg);

}

.species-main{

    display:grid;

    grid-template-columns:
        80px
        2.2fr
        110px
        110px
        110px
        2fr
        170px;

    align-items:center;

    gap:1.5rem;

    padding:1.5rem 2rem;

}

.species-thumb{

    display:flex;

    justify-content:center;

    align-items:center;

}

.species-thumb img{

    width:64px;

    height:64px;

    object-fit:contain;

}

.species-name h3{

    margin:0;

    font-size:1.2rem;

}

.species-common{

    margin-top:.2rem;

    color:var(--color-text-light);

    font-size:.9rem;

}

.label{

    display:block;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--color-text-light);

    margin-bottom:.3rem;

}

.species-main strong{

    font-size:1rem;

}

.species-browser{

    display:flex;

    justify-content:flex-end;

}

.species-browser .btn{

    white-space:nowrap;

}

.species-extra{

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

    padding:1.25rem 2rem;

    background:#fafbfc;

}

.species-extra p{

    margin-bottom:1rem;

}

.resource-links{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;

    align-items:center;

    font-size:.95rem;

}

.resource-links span{

    color:var(--color-text-light);

}

.resource-links a{

    text-decoration:none;

    color:var(--color-primary);

}

.resource-links a:hover{

    text-decoration:underline;

}


/* ==========================================================
   23. Responsive
   Mobile first
   ========================================================== */


/* ---------- Large desktop (>1400px) ---------- */

@media (min-width:1400px){

    .hero{

        min-height:720px;

    }

}


/* ---------- Tablet & Mobile ---------- */

@media (max-width:1200px){

    :root{

        --section-spacing:4.5rem;

        --header-height:72px;

    }

    body{

        font-size:1rem;

    }

    .container{

        width:min(100% - 2rem,var(--container-width));

    }

    /* ---------- Hero ---------- */

    h1{

        max-width:none;

    }

    .hero{

        min-height:auto;

        padding:7rem 0 5rem;

        text-align:center;

    }

    .hero::after{

        opacity:.12;

        background-size:cover;

        background-position:center;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-keywords{

        justify-content:center;

    }

    .hero-stats{

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

        gap:1rem;

    }

    /* ---------- Navigation ---------- */

    .menu-toggle{

        display:flex;

    }

    .nav-menu{

        position:fixed;

        top:72px;

        left:0;

        width:100%;

        background:white;

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

        display:none;

        flex-direction:column;

        align-items:flex-start;

        padding:2rem;

        gap:1.25rem;

        box-shadow:var(--shadow-md);

    }

    .nav-menu.active{

        display:flex;

    }

    /* ---------- Content ---------- */

    .features{

        grid-template-columns:1fr;

    }

    .feature-card{

        min-height:auto;

    }

    .species-grid{

        grid-template-columns:repeat(auto-fit,minmax(150px,1fr));

    }

    .updates{

        grid-template-columns:1fr;

    }

    /* ---------- Footer ---------- */

    .footer-grid{

        grid-template-columns:1fr;

        gap:2.5rem;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

	.species-main{

		grid-template-columns:
			70px
			1fr;

	}

	.species-main > div:nth-child(n+3){

		margin-left:70px;

	}

	.species-browser{

		margin-left:70px;

		justify-content:flex-start;

	}

}


/* ---------- Small phones ---------- */

@media (max-width:480px){

    .hero-stats{

        grid-template-columns:1fr;

    }

    .species-grid{

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

    }

    .species-icon{

        width:72px;

        height:72px;

    }
	
.species-main{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:1rem;

	}

	.species-thumb{

		align-self:center;

	}

	.species-browser{

		width:100%;

	}

	.species-browser .btn{

		width:100%;

	}	

}


/* ==========================================================
   24. Hover animations
   ========================================================== */

.card,
.feature-card,
.species-card,
.btn,
.footer-icons a{

    will-change:transform;

}


.card:hover,
.feature-card:hover,
.species-card:hover{

    transform:translateY(-5px);

}


.btn:active{

    transform:translateY(1px);

}



/* ==========================================================
   25. Hero animation
   ========================================================== */

.hero-content>*{

    opacity:0;

    transform:translateY(24px);

    animation:fadeUp .8s ease forwards;

}


.hero-content>*:nth-child(2){

    animation-delay:.15s;

}

.hero-content>*:nth-child(3){

    animation-delay:.30s;

}

.hero-content>*:nth-child(4){

    animation-delay:.45s;

}

.hero-content>*:nth-child(5){

    animation-delay:.60s;

}



/* ==========================================================
   26. Scroll reveal
   ========================================================== */

.reveal{

    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.visible{

    opacity:1;

    transform:none;

}



/* ==========================================================
   27. Keyframes
   ========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}



/* ==========================================================
   28. Print
   ========================================================== */

@media print{

    .site-header,
    .site-footer,
    .menu-toggle,
    .btn{

        display:none;

    }

    body{

        background:white;

    }

}



/* ==========================================================
   29. Welcome popup
   ========================================================== */

.welcome-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:5000;

}

.welcome-modal.show{

    display:flex;

}

.welcome-box{

    background:white;

    width:min(90%,650px);

    border-radius:18px;

    padding:2rem;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    position:relative;

}

.welcome-close{

    position:absolute;

    top:12px;

    right:16px;

    border:none;

    background:none;

    font-size:2rem;

    cursor:pointer;

}



/* ==========================================================
   End of stylesheet
   ========================================================== */

/* ==========================================================
   Cookie banner
   ========================================================== */

.cookiealert .btn{

    background:var(--color-primary);
    border:1px solid var(--color-primary);
    color:white;

}

.cookiealert .btn:hover{

    background:var(--color-secondary);
    border-color:var(--color-secondary);
    color:white;

}

.cookiealert .btn:focus,
.cookiealert .btn:active{

    background:var(--color-primary);
    border-color:var(--color-primary);

    box-shadow:none;

}

.cookiealert a{

    color:var(--color-primary) !important;

    font-weight:600;

}

.cookiealert a:hover{

    color:var(--color-secondary) !important;

}

.cookiealert{

    background:var(--color-surface);

    color:var(--color-text);

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

    box-shadow:var(--shadow-md);

}

/* ==========================================================
   Inner pages
   ========================================================== */

.page section{

    margin-bottom:2rem;

}

.page section:last-child{

    margin-bottom:0;

}

.page h2{

    margin-bottom:0.75rem;

}

.page h3{

    margin-top:1.5rem;

    margin-bottom:0.5rem;

}

.page p{

    margin-bottom:0.8rem;

}

/* ==========================================================
   Genome cards
   ========================================================== */

.genome-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:2rem;

    margin-top:3rem;

}

.genome-card{

    display:flex;

    flex-direction:column;

    padding:2rem;

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

    border-radius:18px;

    background:white;

    box-shadow:var(--shadow-sm);

    transition:.25s;

}

.genome-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.genome-card h3{

    margin-bottom:.3rem;

}

.genome-build{

    display:inline-block;

    align-self:flex-start;

    margin-bottom:1rem;

    padding:.3rem .8rem;

    border-radius:999px;

    background:rgba(106,70,193,.08);

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:600;

}

.genome-meta{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1rem;

    margin:1rem 0;

}

.meta-box{

    padding:.9rem;

    background:#f8f9fb;

    border-radius:12px;

    text-align:center;

}

.meta-box strong{

    display:block;

    font-size:1.35rem;

    color:var(--color-primary);

}

.genome-source{

    flex:1;

    color:var(--color-text-light);

    margin-bottom:1.5rem;

}

.genome-card .btn{

    width:100%;

}

/* ==========================================================
   Tutorial
   ========================================================== */

.tutorial-image{

    margin:2rem auto;

    text-align:center;

}

.tutorial-image img{

    width:100%;

    border-radius:14px;

    box-shadow:var(--shadow-md);

}

.page table{

    margin:2rem 0;

}

.page thead{

    background:var(--color-primary);

    color:white;

}