:root{
  --bg:#f6f1e8;
  --paper:#fffaf1;
  --paper-strong:#ffffff;
  --text:#242424;
  --muted:#6f6b64;
  --green:#2f9b52;
  --green-dark:#19723a;
  --line:rgba(40,35,25,.12);
  --shadow:0 18px 45px rgba(64,48,24,.13);
  --hero-panel:rgba(20,24,18,.88);
}

[data-theme="dark"]{
  --bg:#101418;
  --paper:#171d23;
  --paper-strong:#202832;
  --text:#ffffff;
  --muted:#a8b2be;
  --green:#45c86b;
  --green-dark:#5fd37a;
  --line:rgba(255,255,255,.09);
  --shadow:0 18px 45px rgba(0,0,0,.35);
  --hero-panel:rgba(10,13,17,.84);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
  transition:background .25s ease,color .25s ease;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  height:auto;
}

.site-topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}

.site-nav{
  max-width:1180px;
  margin:0 auto;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  position:relative;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:950;
  letter-spacing:-.04em;
  font-size:24px;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,#6edb79 0 48%,#2f9b52 48% 100%);
  border:3px solid rgba(0,0,0,.08);
  display:grid;
  place-items:center;
  color:#103719;
  box-shadow:0 10px 25px rgba(47,155,82,.25);
}

.hamburger{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--paper);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.hamburger span{
  width:20px;
  height:2px;
  border-radius:99px;
  background:var(--text);
  transition:.2s ease;
}

.menu{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  font-size:14px;
}

.menu a,
.theme-toggle{
  color:var(--muted);
  padding:10px 13px;
  border-radius:999px;
  border:0;
  background:transparent;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.menu a:hover,
.menu a.active,
.theme-toggle:hover{
  color:var(--green-dark);
  background:rgba(47,155,82,.09);
}

.join-link{
  color:#fff!important;
  background:linear-gradient(135deg,var(--green),var(--green-dark))!important;
  box-shadow:0 10px 24px rgba(47,155,82,.25);
}

.hero{
  min-height:52vh;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.84) 0%,
      rgba(0,0,0,.64) 34%,
      rgba(0,0,0,.36) 68%,
      rgba(0,0,0,.18) 100%
    ),
    url('https://nordennetwork.se/assets/img/herosplash.jpg');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}


.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 35% 45%,rgba(69,200,107,.14),transparent 38%),
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:auto,42px 42px,42px 42px;
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
  pointer-events:none;
}

.hero-inner{
  max-width:1180px;
  margin:0 auto;
  padding:92px 22px 105px;
  position:relative;
  z-index:2;
}


.hero-content{
  max-width:660px;
  padding:36px 42px;
  border-radius:30px;
  background:rgba(10,13,17,.78);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    0 0 40px rgba(69,200,107,.08);
}

.label,
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#8dff9e;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.online-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(47,155,82,.14);
}

h1{
  max-width:760px;
  margin:22px 0 0;
  font-size:clamp(42px,5vw,68px);
  line-height:1.03;
  letter-spacing:-.065em;
}


.hero h1{
  color:#fff;
}

.hero-text{
  max-width:600px;
  margin:26px 0 0;
  color:rgba(255,255,255,.88);
  font-size:18px;
  line-height:1.75;
  font-weight:560;
}


.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:34px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 20px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--text);
  font-weight:900;
  box-shadow:0 10px 24px rgba(0,0,0,.07);
  cursor:pointer;
}

.btn.primary{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  border-color:transparent;
}

.wrap{
  max-width:1180px;
  margin:-88px auto 0;
  padding:0 22px 58px;
  position:relative;
  z-index:5;
}

.dashboard{
  display:grid;
  grid-template-columns:1.05fr 1fr .95fr;
  gap:18px;
}

.card,
.feature-card,
.staff-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:22px;
}

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.card-title,
.card-head h2{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:950;
  margin:0;
}

.icon{
  width:32px;
  height:32px;
  border-radius:10px;
  background:rgba(47,155,82,.12);
  color:var(--green-dark);
  display:grid;
  place-items:center;
  font-weight:950;
  flex:0 0 auto;
}

.view-all{
  color:var(--green-dark);
  font-size:13px;
  font-weight:950;
  white-space:nowrap;
}

.news-list{
  display:grid;
  gap:14px;
}

.news-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.news-item:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.thumb{
  min-height:86px;
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(47,155,82,.25),rgba(255,255,255,.2)),
    repeating-linear-gradient(45deg,#7dbd62 0 14px,#5d9d4c 14px 28px);
  border:1px solid var(--line);
}

.thumb.alt{
  background:
    linear-gradient(135deg,rgba(69,200,107,.25),rgba(255,211,107,.18)),
    repeating-linear-gradient(45deg,#233f2d 0 14px,#2b3e5d 14px 28px);
}

.news-item h3,
.news-item b{
  margin:0 0 4px;
  color:var(--green-dark);
  font-size:16px;
}

.date,
.news-item small{
  color:var(--muted);
  font-size:13px;
  font-weight:750;
  margin-bottom:7px;
  display:block;
}

.news-item p,
.card p,
.feature-card p,
.about p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}

.about-image{
  height:150px;
  border-radius:16px;
  margin-bottom:16px;
  background:
    linear-gradient(135deg,rgba(47,155,82,.15),rgba(255,255,255,.1)),
    url('/assets/img/herosplash.jpg') center center / cover no-repeat;
  border:1px solid var(--line);
}

.features{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.feature{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
}

.feature strong{
  display:block;
  font-size:14px;
  margin-bottom:2px;
}

.stats-panel{
  display:grid;
  gap:12px;
}

.status-box{
  text-align:center;
  padding:22px;
  border-radius:18px;
  background:var(--paper-strong);
  border:1px solid var(--line);
}

.status-box strong{
  color:var(--green);
  display:block;
  font-size:28px;
}

.status-box span{
  color:var(--muted);
  font-weight:750;
}

.stat-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-weight:800;
}

.stat-row b{
  color:var(--text);
  text-align:right;
}

.details-btn{
  width:100%;
  margin-top:10px;
  border:1px solid rgba(47,155,82,.45);
  color:var(--green-dark);
  background:transparent;
  border-radius:14px;
  min-height:48px;
  font-weight:950;
  cursor:pointer;
  box-shadow:none;
}

.section,
.page-hero{
  max-width:1180px;
  margin:0 auto;
  padding:62px 22px;
}

.section-header{
  margin-bottom:22px;
}

.section-header h2{
  margin:0;
  font-size:34px;
  letter-spacing:-.04em;
}

.section-header p{
  color:var(--muted);
  font-weight:650;
}

.staff-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.staff-card{
  text-align:left;
}

.avatar{
  width:78px;
  height:78px;
  border-radius:18px;
  margin:0 0 14px;
  background:
    linear-gradient(135deg,#d7b273 0 35%,#7a5131 35% 65%,#3f8a48 65% 100%);
  border:4px solid rgba(255,255,255,.25);
}

.staff-card h3{
  margin:0 0 5px;
}

.role{
  color:var(--green-dark);
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.site-footer{
  padding:28px 22px 38px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  border-top:1px solid var(--line);
}

.footer-inner{
  max-width:1180px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

@media (max-width:980px){
  .hero{
    min-height:760px;
  }

  .hero-inner{
    padding:120px 22px 150px;
  }

  .dashboard{
    grid-template-columns:1fr;
  }

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

  .wrap{
    margin-top:-58px;
  }
}

@media (max-width:680px){
  .site-nav{
    flex-direction:row;
  }

  .brand{
    font-size:20px;
  }

  .brand-mark{
    width:38px;
    height:38px;
  }

  .hamburger{
    display:flex;
  }

  .menu{
    display:none;
    position:absolute;
    left:22px;
    right:22px;
    top:76px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:12px;
    border-radius:18px;
    background:var(--paper);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
  }

  .menu.is-open{
    display:flex;
  }

  .menu a,
  .theme-toggle{
    padding:13px 14px;
    border-radius:12px;
    text-align:left;
  }

  .hamburger.is-open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .hamburger.is-open span:nth-child(2){
    opacity:0;
  }

  .hamburger.is-open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .hero{
    min-height:760px;
    background-position:center center;
  }

  .hero-inner{
    padding:86px 18px 128px;
  }

  .hero-content{
    padding:24px;
    border-radius:24px;
  }

  h1{
    font-size:clamp(42px,14vw,64px);
  }

  .hero-text{
    font-size:16px;
  }

  .hero-actions{
    display:grid;
  }

  .btn{
    width:100%;
  }

  .wrap{
    margin-top:-44px;
    padding-left:18px;
    padding-right:18px;
  }

  .card{
    padding:18px;
  }

  .card-head{
    align-items:flex-start;
  }

  .news-item{
    grid-template-columns:1fr;
  }

  .thumb{
    min-height:140px;
  }

  .stat-row{
    align-items:flex-start;
  }

  .section,
  .page-hero{
    padding:44px 18px;
  }

  .staff-grid{
    grid-template-columns:1fr;
  }

  .footer-inner{
    display:grid;
    text-align:left;
  }
}





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

.site-footer{
    position:relative;
    margin-top:60px;
    border-top:1px solid var(--line);

    background:
        linear-gradient(
            rgba(255,255,255,.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            #0b0f13 0%,
            #07090c 100%
        );

    background-size:
        24px 24px,
        24px 24px,
        auto;
}

.site-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);

    width:400px;
    max-width:80%;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--green),
        transparent
    );
}

.footer-inner{
    max-width:1180px;
    margin:auto;

    padding:18px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    color:var(--muted);
    font-size:14px;
}

.footer-left,
.footer-center,
.footer-right{
    white-space:nowrap;
}

.footer-center{
    text-align:center;
}

.footer-right{
    text-align:right;
}

.footer-right a{
    color:var(--green);
    font-weight:700;
    transition:.2s;
}

.footer-right a:hover{
    color:var(--green-dark);
}

@media (max-width:900px){

    .footer-inner{
        flex-direction:column;
        text-align:center;
        gap:8px;
        padding:16px;
    }

    .footer-left,
    .footer-center,
    .footer-right{
        text-align:center;
        white-space:normal;
    }

}