/* ==================================================
   VORES VENDEPUNKT
   INDEX
================================================== */

:root{

    --primary:#0f766e;
    --primary-dark:#134e4a;

    --blue:#274a7c;
    --blue-dark:#183966;

    --text:#1f2937;
    --muted:#64748b;

    --bg:#eef3f6;
    --surface:#ffffff;

    --border:#e2e8f0;

    --shadow:
    0 20px 60px rgba(15,23,42,.08);

}

/* ==================================================
   RESET
================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Inter,
    Segoe UI,
    sans-serif;

    background:#f6f8fa;

    color:var(--text);

    overflow-x:hidden;
}

/* ==================================================
   HEADER
================================================== */

.header{

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

    backdrop-filter:blur(14px);

    position:sticky;

    top:0;

    z-index:999;

    border-bottom:
    1px solid rgba(0,0,0,.05);
}

.container{

    width:min(1300px,92%);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;
}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:var(--primary);

    font-size:1.3rem;

    font-weight:700;
}

.logo i{

    font-size:1.5rem;
}

nav{

    display:flex;

    gap:35px;
}

nav a{

    text-decoration:none;

    color:#334155;

    font-weight:500;
}

.header-btn{

    background:var(--blue);

    color:white;

    text-decoration:none;

    padding:14px 22px;

    border-radius:14px;

    font-weight:700;
}

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

.hero{

    background:
    linear-gradient(
        135deg,
        #dfe8ee,
        #edf4f7
    );

    padding:130px 20px;
}

.hero-content{

    max-width:1000px;

    margin:auto;

    text-align:center;
}

.hero-pill{

    display:inline-block;

    background:white;

    color:var(--primary);

    padding:12px 18px;

    border-radius:999px;

    font-weight:600;

    margin-bottom:30px;

    box-shadow:
    0 5px 15px rgba(0,0,0,.05);
}

.hero h1{

    font-size:
    clamp(
        3rem,
        7vw,
        5.5rem
    );

    line-height:.95;

    color:var(--blue-dark);

    margin-bottom:25px;
}

.hero p{

    max-width:750px;

    margin:auto;

    color:#475569;

    font-size:1.15rem;

    line-height:1.9;
}

.hero-actions{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:35px;

    flex-wrap:wrap;
}

.primary-btn{

    background:var(--blue);

    color:white;

    text-decoration:none;

    padding:18px 30px;

    border-radius:14px;

    font-weight:700;
}

.secondary-btn{

    border:2px solid var(--blue);

    color:var(--blue);

    text-decoration:none;

    padding:18px 30px;

    border-radius:14px;

    font-weight:700;
}

/* ==================================================
   QUICK ACTIONS
================================================== */

.quick-actions{

    max-width:1200px;

    margin:-60px auto 0;

    padding:0 20px 100px;

    display:grid;

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

    gap:25px;
}

.action-card{

    background:white;

    border-radius:28px;

    padding:40px;

    min-height:250px;

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

.action-card i{

    color:var(--blue);

    font-size:2rem;

    margin-bottom:20px;
}

.action-card h3{

    color:var(--blue-dark);

    margin-bottom:12px;
}

.action-card p{

    color:var(--muted);

    line-height:1.8;
}

/* ==================================================
   TOPICS
================================================== */

.topics{

    padding:100px 20px;

    text-align:center;
}

.topics h2{

    color:var(--blue-dark);

    font-size:2.5rem;

    margin-bottom:40px;
}

.topic-grid{

    max-width:1100px;

    margin:auto;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;
}

.topic-grid div{

    background:white;

    border-radius:999px;

    padding:14px 20px;

    font-weight:600;

    box-shadow:
    0 5px 15px rgba(0,0,0,.04);
}

/* ==================================================
   STORIES
================================================== */

.stories{

    padding:120px 20px;

    background:white;
}

.stories h2{

    text-align:center;

    font-size:2.5rem;

    color:var(--blue-dark);

    margin-bottom:45px;
}

.stories-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:25px;
}

.stories-grid article{

    background:#f7fafb;

    border-radius:24px;

    padding:35px;

    min-height:220px;
}

.stories-grid h3{

    margin-bottom:15px;

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

.stories-grid p{

    color:var(--muted);

    line-height:1.8;
}

/* ==================================================
   HOW IT WORKS
================================================== */

.how-it-works{

    background:
    linear-gradient(
        135deg,
        #274a7c,
        #183966
    );

    color:white;

    text-align:center;

    padding:120px 20px;
}

.how-it-works h2{

    margin-bottom:45px;

    font-size:2.5rem;
}

.steps{

    max-width:1100px;

    margin:auto;

    display:grid;

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

    gap:20px;
}

.steps div{

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

    border-radius:24px;

    padding:35px;
}

.steps span{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 20px;

    border-radius:50%;

    background:white;

    color:var(--blue);

    font-weight:700;
}

/* ==================================================
   EMERGENCY
================================================== */

.emergency{

    padding:120px 20px;

    text-align:center;

    background:#f7fafb;
}

.emergency h2{

    color:var(--blue-dark);

    font-size:2.5rem;

    margin-bottom:40px;
}

.emergency-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:20px;
}

.emergency-grid div{

    background:white;

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 8px 20px rgba(0,0,0,.04);
}

.emergency-grid strong{

    display:block;

    color:var(--blue-dark);

    font-size:1.4rem;

    margin-bottom:10px;
}

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

.footer{

    background:#0f172a;

    color:white;

    text-align:center;

    padding:50px;
}

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

@media(max-width:900px){

    nav{
        display:none;
    }

    .steps{

        grid-template-columns:1fr;
    }

}

@media(max-width:700px){

    .hero{

        padding:90px 20px;
    }

    .hero h1{

        font-size:2.5rem;
    }

    .quick-actions{

        grid-template-columns:1fr;
    }

    .stories-grid{

        grid-template-columns:1fr;
    }

}

.dropdown{

    position:relative;
}

.dropdown-trigger{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#334155;
}

.dropdown-trigger i{

    font-size:.8rem;
}

.mega-menu{

    position:absolute;

    top:100%;

    left:0;

    width:420px;

    background:white;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(0,0,0,.10);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.25s;

    z-index:999;
}

.dropdown:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.menu-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:20px;

    text-decoration:none;

    color:#1e293b;

    border-bottom:1px solid #eef2f7;
}

.menu-card:hover{

    background:#f8fafc;
}

.menu-card i{

    font-size:1.8rem;

    color:#244f86;
}

.menu-card strong{

    display:block;

    margin-bottom:4px;
}

.menu-card span{

    color:#64748b;

    font-size:.9rem;
}

.menu-link{

    display:block;

    padding:18px 20px;

    text-decoration:none;

    color:#334155;
}

.menu-link:hover{

    background:#f8fafc;
}