:root{
  --accent:#63f163;
  --grid:#262626;
  --bg:#000;
  --bg-card:#111;
  --text:#fff;
  --text-muted:#d1d5db;
  --border:rgba(255,255,255,.15);
}

/* ========== Base ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--text);line-height:1.5;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
.container{max-width:1400px;margin:0 auto;padding:0 1.5rem}
section[id]{scroll-margin-top:100px} /* land fint under sticky navbar */

/* ========== Navbar (pill med ::before) ========== */
.navbar{
  position:fixed;top:24px;left:50%;transform:translateX(-50%);
  z-index:4000;overflow:visible;background:transparent;
  display:flex;align-items:center;gap:2rem;padding:1rem 2rem;
}
.navbar::before{
  content:"";position:absolute;inset:0;border-radius:9999px;
  background:rgba(13,13,13,.6);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.25);
  z-index:-1;pointer-events:none;
}
.logo{display:flex;align-items:center}
.logo-img{height:28px;width:auto;display:block}
@media(min-width:768px){.logo-img{height:32px}}

.nav-links{display:none}
@media(min-width:768px){
  .nav-links{display:flex;gap:2rem}
  .nav-links a{position:relative;padding-bottom:2px;text-transform:uppercase;letter-spacing:.15em;font-size:.85rem}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:.3s}
  .nav-links a:hover{color:var(--accent)}
  .nav-links a:hover::after{width:100%}
}

/* CTA / Contact */
.btn-contact{border:1px solid rgba(255,255,255,.4);padding:.45rem 1.25rem;border-radius:9999px;background:transparent;transition:.25s}
.btn-contact:hover{background:var(--accent);color:#000}
.btn-cta{
  background:var(--accent)!important;color:#000!important;border:0!important;padding:.45rem 1.1rem;border-radius:999px;font-weight:700;
  box-shadow:0 6px 18px rgba(92,255,133,.18);transition:transform .2s,filter .2s
}
.btn-cta:hover{filter:brightness(.95);transform:translateY(-1px)}
.navbar .btn-cta{border-color:transparent!important}

/* Focus a11y */
.btn-read-more:focus-visible,.close-btn:focus-visible,.btn-cta:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px
}

/* ========== Hero ========== */
.hero{min-height:100vh;display:grid;align-items:center;position:relative;padding:0 1.5rem}
.hero-content{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;max-width:1400px;margin:0 auto}
.hero-text{text-align:center}
.title{font-size:clamp(3rem,10vw,6rem);font-weight:700;letter-spacing:.08em;line-height:1}
.subtitle-green{margin-top:.5rem;font-family:"IBM Plex Mono",monospace;font-size:1rem;color:var(--accent);letter-spacing:.05em}
.subtitle-white{margin-top:.25rem;font-family:"IBM Plex Mono",monospace;font-size:1rem;color:var(--text);letter-spacing:.05em}
.scroll-text{grid-column:1/-1;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:1rem;margin-top:1rem;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{color:var(--text)}50%{color:var(--accent)}}
@media(min-width:960px){.hero-content{grid-template-columns:1fr 1fr}.hero-text{text-align:left}}

/* HERO-bilde: høyder */
#home .hero-img{
  width:100%;
  height:78vh;
  max-height:none;
  object-fit:cover;border-radius:1rem;filter:grayscale(100%);
}
@media(min-width:960px){#home .hero-img{height:88vh}}

/* ========== Divider ========== */
.divider{width:90%;height:1px;background:var(--border);margin:0 auto}

/* ========== Sections / Cards ========== */
.metrics,.services{background:var(--bg-card);padding:5rem 0}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px,1fr));gap:2rem}
.card{
  background:#141414;border:1px solid var(--border);border-radius:1rem;padding:2.5rem 1.75rem;
  display:flex;flex-direction:column;gap:.75rem;transition:transform .3s,border-color .3s
}
.card:hover{border-color:var(--accent);transform:translateY(-4px)}
.card-title{font-size:1.35rem;font-weight:700;color:var(--accent);font-family:"IBM Plex Mono",monospace}
.card-desc{font-size:.95rem;color:var(--text-muted);line-height:1.6}

/* Bullets i kort */
.card-list{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.card-list li{color:var(--text-muted);font-size:.95rem;line-height:1.55;padding-left:1.2rem;position:relative}
.card-list li::before{content:"•";position:absolute;left:0;top:0;color:var(--accent);line-height:1.2}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px,1fr));gap:2rem;margin-top:3rem}
.counter{font-variant-numeric:tabular-nums}

/* ========== Team ========== */
.team-card{
  background:#141414;border:1px solid var(--border);border-radius:1rem;padding:2.5rem 1.75rem;
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;
  transition:transform .3s,border-color .3s;will-change:transform,border-color
}
.team-card:hover{border-color:var(--accent);transform:translateY(-4px)}

.team-image{width:150px;height:150px;border-radius:50%;object-fit:cover;filter:grayscale(100%);border:2px solid var(--border);transition:filter .3s}
.team-card:hover .team-image{filter:grayscale(0%)}

.team-name{font-size:1.35rem;font-weight:700;color:var(--accent);font-family:"IBM Plex Mono",monospace}
.team-role{font-size:.95rem;color:var(--text-muted);font-family:"IBM Plex Mono",monospace;margin-top:-.5rem}
.team-bio{font-size:.9rem;color:var(--text-muted);line-height:1.6}

.founder-card .team-name{font-size:1.8rem}
.founder-card .team-role{font-size:1.1rem}
.founder-card .team-bio{font-size:1rem}
.founder-card{padding:3rem 2rem;position:relative;top:-20px}

.team-cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:2rem}
@media(min-width:960px){.team-cards{grid-template-columns:1fr 1.5fr 1fr}.founder-card{top:-30px}}

/* === Robuste overlay-sirkler for "Kommer snart" === */
.image-wrapper{
  position:relative;
  width:150px;height:150px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center; /* legger bilde og overlay i samme celle */
}
.image-wrapper .team-image{
  grid-area:1/1;width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%) brightness(.5);
  border:2px solid var(--border);transition:filter .3s;
}
.team-card:hover .image-wrapper .team-image{filter:grayscale(0%) brightness(.5)}
.image-wrapper .overlay-text{
  grid-area:1/1;z-index:1;color:var(--text);
  font:700 1rem/1 "IBM Plex Mono",monospace;text-align:center;pointer-events:none;
}

/* Redusert bevegelse */
@media(prefers-reduced-motion:reduce){.team-card:hover{transform:none}}

/* ========== Modaler (styrt med [hidden]) ========== */
.modal{
  display:block;position:fixed;inset:0;z-index:5000;width:100%;height:100%;
  overflow:auto;background:rgba(0,0,0,.6)
}
.modal[hidden]{display:none!important}
.modal .fade-up{opacity:1!important;transform:none!important}
.modal-content{
  background:#111;margin:10% auto;padding:2rem;border-radius:1rem;max-width:600px;color:var(--text);position:relative
}
.close-btn{position:absolute;right:1rem;top:1rem;font-size:1.5rem;cursor:pointer}
.modal-content input,.modal-content textarea,.modal-content select{
  width:100%;padding:.5rem;margin:.5rem 0 1rem;border:1px solid var(--border);border-radius:.5rem;background:#222;color:var(--text)
}
.modal-content button{background:var(--accent);border:none;padding:.75rem 1.5rem;border-radius:9999px;cursor:pointer;font-weight:700}

/* Modal typografi / lister */
.modal-subtitle{margin-top:1rem;margin-bottom:.5rem;font-size:1.05rem;font-weight:700;color:var(--text);font-family:"IBM Plex Mono",monospace}
.modal-list{margin:.25rem 0 1rem;padding:0;list-style:none;display:grid;gap:.5rem}
.modal-list li{position:relative;padding-left:1.3rem;color:var(--text-muted);line-height:1.55;font-size:.97rem}
.modal-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.modal-steps{margin:.25rem 0 1rem;padding-left:1.2rem;color:var(--text-muted);line-height:1.55;font-size:.97rem}
.modal-content p{color:var(--text-muted)}

/* ========== “Les mer”-pil ========== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1px,1px);white-space:nowrap;border:0}
.btn-read-more{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;
  background:transparent;border:1px solid var(--border);color:var(--accent);cursor:pointer;font:inherit;
  transition:transform .2s,border-color .2s,background .2s,color .2s;margin-top:1rem
}
.btn-read-more:hover{transform:translateY(-1px);border-color:var(--accent);background:rgba(255,255,255,.06)}

/* ========== FAQ ========== */
.faq{background:var(--bg-card);padding:5rem 0;border-top:1px solid var(--border)}
.faq h2{color:var(--text);margin-bottom:1.25rem}
.faq-list{max-width:780px;margin:0 auto;display:grid;gap:.75rem}
.faq-list details{background:#141414;border:1px solid var(--border);border-radius:.8rem;padding:.9rem 1rem}
.faq-list summary{list-style:none;cursor:pointer;font-weight:700;color:var(--text)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";float:right;color:var(--accent)}
.faq-list details[open] summary::after{content:"–"}
.faq-body{color:var(--text-muted);margin-top:.5rem;line-height:1.7}

/* ========== Footer ========== */
.footer{background:#000;padding:3rem 0;text-align:center;border-top:1px solid var(--border)}
.footer p{font-family:"IBM Plex Mono",monospace;font-size:.85rem;color:var(--text-muted);margin-bottom:1rem}
.footer-links{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.footer-links a{font-family:"IBM Plex Mono",monospace;font-size:.85rem;color:var(--text-muted);transition:color .25s}
.footer-links a:hover{color:var(--accent)}

.footer-logo{
  display:block;margin:0 auto 1rem;height:clamp(48px,8vw,96px);width:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))
}

/* Footer e-post chip */
.footer-email{
  display:inline-block;margin-top:1rem;font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:var(--text-muted);
  border:1px solid var(--border);padding:.4rem .9rem;border-radius:9999px;
  transition:background .2s,color .2s,border-color .2s,transform .2s
}
.footer-email:hover{background:var(--accent);color:#000;border-color:transparent;transform:translateY(-1px)}

/* Skip link – skjules til fokus */
.skip-link{
  position:fixed;left:16px;top:16px;transform:translateY(-150%);background:var(--accent);color:#000;
  padding:.6rem 1rem;border-radius:9999px;font-weight:700;z-index:6000;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:2px solid #000;outline-offset:2px}

/* ========== Layout-hjelpere ========== */
.centered-block{max-width:780px;margin:2rem auto 0}
.label-center{text-align:center;display:block}
.centered-block .card{margin-top:.75rem}

/* ========== Mobile polish ========== */
@media(max-width:480px){.navbar{top:12px;padding:.6rem .9rem;gap:1rem}.btn-cta{padding:.4rem .9rem}}
@media(max-width:600px){
  .title{font-size:clamp(2.2rem,12vw,3.2rem)}
  .btn-read-more{width:44px;height:44px}
  .modal-content{margin:0;max-width:none;width:100%;height:100%;border-radius:0;padding:1.25rem;overflow:auto}
}
@media(max-width:400px){.grid-cards{grid-template-columns:1fr}.card{padding:1.5rem 1.2rem}}
@media(max-width:360px){.container{padding:0 1rem}}
.faq-list summary{padding:.6rem .2rem}
/* === Mobile polish (ekstra) === */

/* 1) Unngå iOS-zoom på inputs (min 16px) */
.modal-content input,
.modal-content textarea,
.modal-content select { font-size: 16px; }

/* 2) Litt roligere hero-høyde på små skjermer */
@media (max-width: 480px) {
  #home .hero-img { height: 64vh; }
}

/* 3) Grid blir 1-kolonne tidligere for luft */
@media (max-width: 520px) {
  .grid-cards,
  .team-cards { grid-template-columns: 1fr; }
}

/* 4) Ekstra luft og større “tap targets” */
@media (max-width: 520px) {
  .card { padding: 1.5rem 1.2rem; }
  .btn-cta { padding: .6rem 1.1rem; }
  .btn-read-more { width: 48px; height: 48px; }
}

/* 5) Unngå stygge linjebrudd på lange ord / e-poster i footer og kort */
.footer-email,
.card-desc,
.modal-content p { word-break: break-word; }

/* 6) Mindre “pille”-navbar på veldig små skjermer */
@media (max-width: 380px) {
  .navbar { top: 8px; padding: .5rem .75rem; gap: .6rem; }
}
/* --- iOS tap-highlight vekk + pen X-knapp --- */
* { -webkit-tap-highlight-color: transparent; }

.close-btn{
  appearance:none; -webkit-appearance:none;
  background:transparent; color:var(--text);
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; line-height:1; border:0; cursor:pointer;
  border-radius:9999px;
}
.close-btn:active{ transform:scale(0.98); }

/* Send-knappen i modaler: svart tekst på grønn bakgrunn */
.modal-content button{
  background:var(--accent);
  color:#000; /* <- svart tekst */
  border:none; padding:.75rem 1.5rem; border-radius:9999px; cursor:pointer; font-weight:700;
}

/* --- Mobil: hamburger synlig, nav-lenker skjult (du har allerede noe) --- */
.btn-menu{
  display:none;
  border:1px solid var(--border);
  background:transparent; color:var(--text);
  width:40px; height:40px; border-radius:10px; cursor:pointer;
}
@media(max-width:768px){
  .btn-menu{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-links{ display:none; } /* behold logo + CTA, skjul lenker på mobil */
}

/* --- Side-drawer (kun mobil) --- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:5500;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(82vw,360px);
  background:#111; border-left:1px solid var(--border); z-index:5600;
  transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column; padding:1rem;
}
.drawer-header{
  display:flex; align-items:center; justify-content:space-between; padding-bottom:.5rem; border-bottom:1px solid var(--border);
}
.drawer-links{ display:grid; gap:1rem; padding:1rem 0; }
.drawer-links a{
  font-family:"IBM Plex Mono",monospace; color:var(--text); font-size:1rem;
  padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.drawer-links a:hover{ color:var(--accent); }

/* open state */
.drawer-overlay[data-open="1"]{ opacity:1; pointer-events:auto; }
.drawer[data-open="1"]{ transform:translateX(0); }

/* kun mobil */
@media(min-width:769px){
  .drawer-overlay, .drawer{ display:none; }
}
/* Mobil: hamburger venstre, logo midten */
@media (max-width: 768px) {
  .navbar {
    justify-content: space-between;
    width: 100%;
    left: 0;
    transform: none;
    padding: .6rem 1rem;
  }

  .navbar .logo {
    margin: 0 auto;
    order: 2; /* midten */
  }

  .btn-menu {
    order: 1;
  }

  .navbar .btn-cta {
    order: 3;
  }
}