/* ==== CSS RESET & NORMALIZATION ==== */
html {box-sizing:border-box;} *, *:before, *:after {box-sizing:inherit;}
html, body {height:100%; margin:0; padding:0;}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {margin:0; padding:0; font-weight:normal;}
ul, ol {list-style:none;}
a {text-decoration:none; color:inherit;}
img, svg {max-width:100%; display:block;}
button, input, textarea, select {font:inherit; background:none; border:none; outline:none;}
button {cursor:pointer;}

/* ==== THEME CUSTOM PROPERTIES (fallback-safe) ==== */
:root {
  --color-primary: #213042;
  --color-primary-80: #2a4260;
  --color-secondary: #CF9032;
  --color-accent: #F4F7FB;
  --color-foreground: #f9fbfc;
  --color-bg-neon: #182137;
  --color-neon-blue: #27e5ff;
  --color-neon-green: #27ffc7;
  --color-neon-yellow: #fff200;
  --shadow-base: 0 2px 12px 0 rgba(39,245,255,0.06), 0 1.5px 4px rgba(33,48,66,0.13);
  --radius: 12px;
  --radius-sm: 8px;
  --font-display: 'Roboto Slab', serif;
  --font-body: 'Open Sans', Arial, sans-serif;
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-md: 18px;
  --font-size-lg: 24px;
  --font-size-xl: 32px;
  --font-size-xxl: 48px;
  --transition-fast: 0.18s cubic-bezier(.22,.61,.36,1);
}

/* ==== GLOBAL ==== */
body {
  min-height:100vh;
  background:#182137;
  color:var(--color-accent);
  font-family:var(--font-body);
  font-size:var(--font-size-sm);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image: linear-gradient(120deg, #213042 40%, #223f65 100%);
}

.container {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  flex-direction:column;
}

.content-wrapper {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.section {
  margin-bottom:60px;
  padding:40px 20px;
}

h1, h2, h3, h4 {
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--color-neon-blue);
}

h1 {font-size:var(--font-size-xxl);line-height:1.07; margin-bottom:16px;}
h2 {font-size:var(--font-size-xl);margin-bottom:12px;}
h3 {font-size:var(--font-size-lg); margin-bottom:8px;}
h4 {font-size:20px; margin-bottom:6px;}

p, li, span, label {
  font-family:var(--font-body);
  font-size:var(--font-size-sm);
  color:var(--color-accent);
}

strong, b {font-weight:700; color:var(--color-neon-green);}

/* ==== BUTTONS ==== */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:var(--font-size-md);
  font-weight:700;
  padding:12px 32px;
  margin-top:16px;
  margin-bottom:8px;
  border-radius:var(--radius-sm);
  background:var(--color-primary);
  color:var(--color-neon-blue);
  border:2px solid var(--color-neon-blue);
  box-shadow:0 2px 8px 0 rgba(39,229,255,0.09);
  transition:background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  position:relative;
  z-index:1;
}
.button.primary {
  background:var(--color-neon-blue);
  color:var(--color-primary);
  border:2px solid var(--color-neon-green);
  box-shadow:0 4px 16px 0 rgba(39,255,199,0.15);
}
.button.secondary {
  background:var(--color-primary);
  color:var(--color-neon-blue);
  border:2px solid var(--color-neon-blue);
}
.button:hover, .button:focus {
  background:var(--color-bg-neon);
  color:var(--color-neon-green);
  border-color:var(--color-neon-green);
  box-shadow:0 0 18px 1px var(--color-neon-blue);
  text-shadow:0 0 3px var(--color-neon-blue), 0 0 6px var(--color-neon-blue);
}
.button:active {
  background:var(--color-primary-80);
  box-shadow:0 0 8px 1px var(--color-neon-blue);
}

/* ==== HEADER & NAVIGATION ==== */
header {
  background:rgba(25,34,60, 0.99);
  box-shadow:0 6px 24px 0 rgba(33,48,66,0.07);
  position:sticky; top:0; z-index:98;
}
header .container {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  min-height:74px;
  gap:24px;
}
header img[alt="Energetix Nordöl"] {
  height:38px;
  margin-right:22px;
}

.main-nav {
  display:flex; flex-direction:row; gap:24px; align-items:center;
}
.main-nav a {
  font-family:var(--font-body);
  color:var(--color-accent);
  font-size:var(--font-size-md);
  padding:7px 4px;
  transition:color var(--transition-fast);
  border-bottom:2px solid transparent;
  position:relative;
}
.main-nav a:hover, .main-nav a:focus {
  color:var(--color-neon-blue);
  border-bottom:2px solid var(--color-neon-blue);
}

/* Desktop only display for nav */
.mobile-menu-toggle {display:none;}
.mobile-menu {display:none;}

/* ==== MOBILE MENU ==== */
@media (max-width: 1024px) {
  .main-nav {display:none;}
  .mobile-menu-toggle {display:inline-flex; align-items:center; justify-content:center; font-size:2.1rem;color:var(--color-neon-blue);background:none;border:none;min-width:48px;min-height:48px;z-index:103;position:relative;}
  .mobile-menu {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    background:rgba(25,34,60,0.99);
    box-shadow:0 8px 30px rgba(33,48,66,.2);
    z-index:110;
    transform:translateX(-100vw);
    opacity:0;
    pointer-events:none;
    transition:transform var(--transition-fast), opacity var(--transition-fast);
  }
  .mobile-menu.open {
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
    transition:transform .35s cubic-bezier(.77,0,.23,1), opacity .25s cubic-bezier(.77,0,.23,1);
  }
  .mobile-menu-close {
    align-self:flex-end;
    margin:24px 32px 0 0; font-size:2.1rem;
    background:none; border:none; color:var(--color-neon-green); transition:color var(--transition-fast); z-index:112;
    min-width:48px;min-height:48px;
  }
  .mobile-menu-close:hover, .mobile-menu-close:focus{color:var(--color-neon-blue);}
  .mobile-nav {
    display:flex;
    flex-direction:column;
    gap:28px;
    margin:60px 0 0 36px;
    width:80vw;
  }
  .mobile-nav a {
    font-size:var(--font-size-lg);
    color:var(--color-accent);
    border-bottom:2px solid transparent;
    padding:10px 0;
    transition:color var(--transition-fast), border-bottom var(--transition-fast);
  }
  .mobile-nav a:hover, .mobile-nav a:focus {
    color:var(--color-neon-blue); border-bottom:2px solid var(--color-neon-blue);
  }
}

/* Hide primary button on mobile nav by default */
@media (max-width: 1024px) {
  header .button.primary {display:none;}
}

/* ==== HERO SECTIONS ==== */
.hero-section {
  margin-bottom:60px; padding:64px 0 64px 0; background:#223356;
  box-shadow:0 2px 24px 0 rgba(39,229,255,0.052);
  border-bottom:3px solid var(--color-neon-blue);
}
.hero-section .content-wrapper {
  text-align:left;
  gap:20px;
  align-items:flex-start;
}
.hero-section h1 {
  color:var(--color-neon-green); text-shadow:0 0 18px var(--color-neon-blue);
}

/* ==== FEATURES, CARDS, GRIDS ==== */
.feature-grid, .service-grid, .technology-cards, .team-grid, .kpi-cards, .logo-grid, .sustainability-projects, .community-projects {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:24px;
  margin:20px 0 0 0;
  justify-content:flex-start;
}
.feature, .service, .card, .team-member, .kpi, .project, .initiative {
  background:var(--color-primary-80);
  border-radius:var(--radius);
  box-shadow:0 3px 16px 0 rgba(39,255,199,0.07);
  padding:32px 24px 24px 24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:200px;
  min-height:160px;
  gap:14px;
  position:relative;
  margin-bottom:20px;
  border: 1.5px solid var(--color-neon-blue);
  transition:box-shadow var(--transition-fast), border-color var(--transition-fast),transform var(--transition-fast);
}
.feature:hover, .service:hover, .card:hover, .team-member:hover, .kpi:hover, .project:hover, .initiative:hover {
  box-shadow:0 0 32px 3px var(--color-neon-blue);
  border-color:var(--color-neon-green);
  transform:translateY(-6px) scale(1.02);
}
.feature img, .service img, .card img {
  height:48px; width:48px; margin-bottom:8px;
  filter:drop-shadow(0 0 6px var(--color-neon-blue));
}

.badge-grid, .certifications-list, .partner-list {
  display:flex; flex-direction:row; flex-wrap:wrap; gap:18px; margin:16px 0;
}
.badge-grid span, .certifications-list span, .partner-list span {
  background:var(--color-neon-blue);
  color:var(--color-primary);
  padding:7px 18px;
  border-radius:28px;
  font-size:var(--font-size-sm);
  font-weight:600;
  text-shadow:0 0 2px #fff;
}
.logo-grid {
  align-items:center; gap:28px;
}
.logo-grid img {height:46px; filter:drop-shadow(0 0 7px var(--color-neon-blue));}
.logo-grid span {color:var(--color-neon-green); font-weight:600; margin-left:14px;}

.kpi {
  align-items:center;
  justify-content:center;
  min-width:160px; min-height:100px; text-align:center;
}
.kpi h3 {font-size:var(--font-size-xl); color:var(--color-neon-yellow);}
.kpi p {font-size:var(--font-size-xs); color:var(--color-accent); margin-top:8px;}

.timeline ul {display:flex; flex-direction:row; flex-wrap:wrap; gap:24px; }
.timeline li {font-size:var(--font-size-sm); color:var(--color-neon-blue); padding:4px 10px; background:rgba(39,255,199,0.09); border-radius:var(--radius-sm);}

/* ==== CTA Banner ==== */
.cta-banner {
  background:linear-gradient(120deg, #182137 40%, #223f65 100%);
  border-top:2px solid var(--color-neon-blue);
  border-bottom:2px solid var(--color-neon-green);
  box-shadow:0 4px 26px 0 rgba(39,229,255,0.03);
  margin-top:38px;
}
.cta-banner .content-wrapper {
  align-items:center;
  justify-content:center;
  gap:24px;
}
.contact-short {
  display:flex; flex-direction:row; gap:22px; margin-top:12px;
  flex-wrap:wrap;
  color: var(--color-accent);
  font-weight:600;
  align-items:center;
}
.contact-short img {width:22px;height:22px;vertical-align:middle;margin-right:8px;filter:drop-shadow(0 0 3px var(--color-neon-blue));}

/* ==== CUSTOM LAYOUT CONTAINERS PER SPEC ==== */
.card-container {display:flex; flex-wrap:wrap; gap:24px;}
.card {margin-bottom:20px; position:relative;}
.content-grid {display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;}
.text-image-section {display:flex; align-items:center; gap:30px; flex-wrap:wrap;}
.testimonial-card {display:flex; align-items:center; gap:20px; padding:20px; background:var(--color-foreground); color:#111; border-radius:var(--radius); box-shadow:0 1px 8px 0 rgba(33,48,66,0.10); margin-bottom:20px; border-left:6px solid var(--color-neon-blue);}
.feature-item {display:flex; flex-direction:column; align-items:flex-start; gap:15px;}

/* ==== TESTIMONIALS ==== */
.employee-quotes, .employee-initiatives, .collaboration-stories {
  display:flex; flex-wrap:wrap; gap:20px; flex-direction:row; align-items:stretch;
}
.testimonial-card p {color:#222;font-size:var(--font-size-sm);line-height:1.7;}
.testimonial-card b {color:var(--color-primary); font-weight:700;}

/* ==== PROGRESS ==== */
progress {
  width:100%; height:10px; border-radius:6px; margin-top:18px;
  background:#eee;
  accent-color:var(--color-neon-blue);
}
progress::-webkit-progress-bar {background:#e5faff; border-radius:5px;}
progress::-webkit-progress-value {background:var(--color-neon-blue); border-radius:5px;}
progress::-moz-progress-bar {background:var(--color-neon-blue);}
progress[value] {color:var(--color-neon-blue);}

/* ==== FOOTER ==== */
footer {
  background:#1a2337;
  padding:48px 0 24px 0;
  border-top:2px solid var(--color-neon-blue);
}
footer .container {
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
}
.footer-nav {
  display:flex; flex-direction:row; gap:24px; flex-wrap:wrap;
}
.footer-nav a {
  font-size:var(--font-size-xs); color:var(--color-neon-blue); transition:color var(--transition-fast); text-decoration:underline;}
.footer-nav a:hover, .footer-nav a:focus {color:var(--color-neon-green);}

.footer-contact {
  display:flex; flex-direction:column; gap:5px; color:var(--color-accent);
}
.footer-social img {height:40px; filter:drop-shadow(0 0 6px var(--color-neon-blue)); margin-top:16px;}
.footer-credit {color:#b6dbf7; font-size:var(--font-size-xs); margin-top:18px;}

/* ==== RESPONSIVE ==== */
@media (max-width:1024px) {
  .container {padding:0 10px;}
  header .container {gap:12px;}
  .main-nav {gap:16px;}
  .badge-grid, .certifications-list, .partner-list {gap:10px;}
}
@media (max-width:768px) {
  .section {padding:30px 6px; margin-bottom:38px;}
  .content-wrapper {gap:14px;}
  .hero-section {padding:36px 0 36px 0;}
  .feature-grid, .service-grid, .technology-cards, .team-grid, .kpi-cards, .logo-grid, .sustainability-projects, .community-projects {
    flex-direction:column;
    gap:20px;
    align-items:stretch;
  }
  .kpi, .card, .feature, .project, .initiative>.feature {
    min-width:0;
    width:100%;
  }
  .timeline ul {flex-direction:column; gap:10px;}
  .card-container, .content-grid, .employee-quotes, .employee-initiatives, .collaboration-stories {gap:16px; flex-direction:column; align-items:stretch;}
  .cta-banner .content-wrapper {gap:14px;}
  .text-image-section {flex-direction:column; gap:18px;}
  .badge-grid, .certifications-list, .partner-list {flex-direction:column; gap:8px;}
  .footer-nav {gap:10px;}
}
@media (max-width:480px) {
  h1 {font-size:30px;}
  h2 {font-size:22px;}
  h3 {font-size:18px;}
  .button, .button.primary, .button.secondary {font-size:15px; padding:11px 22px;}
}

/* ==== COOKIE CONSENT BANNER ==== */
.cookie-consent-banner {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9999;
  background:rgba(25,34,60,0.98);
  color:var(--color-accent);
  padding:20px 10px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  box-shadow:0 -2px 18px rgba(33,48,66,0.20);
  transition:transform var(--transition-fast), opacity var(--transition-fast);
}
.cookie-consent-banner.hide {transform:translateY(120%);opacity:0;pointer-events:none;}
.cookie-consent-text {max-width:400px; font-size:15px;}
.cookie-consent-actions {display:flex; flex-direction:row; gap:16px;}
.cookie-consent-banner .button {margin:0; font-size:16px; min-width:120px; line-height:1.3;}
.cookie-consent-banner .button:focus {outline:2px solid var(--color-neon-blue);}

/* ==== COOKIE CONSENT MODAL ==== */
.cookie-modal {
  position:fixed; left:50vw; top:50vh; transform:translate(-50%,-50%);
  z-index:10000;
  background:#242b3f; color:var(--color-accent);
  border-radius:var(--radius);
  min-width:320px; max-width:90vw; min-height:180px;
  box-shadow:0 8px 80px 0 rgba(39,229,255,0.30);
  padding:38px 28px 28px 28px;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  animation:cookieModalIn .4s cubic-bezier(.55,0,1,0.45);
}
@keyframes cookieModalIn {0%{opacity:0;transform:translate(-50%,-55%);} 100%{opacity:1;transform:translate(-50%,-50%);}}
.cookie-modal h2 {color:var(--color-neon-blue); margin-bottom:8px;font-size:var(--font-size-lg);}
.cookie-modal label {margin:14px 0; display:flex; align-items:center; gap:12px; font-size:16px;}
.toggle-switch {
  width:42px; height:24px; background:#12273C; border-radius:12px; position:relative; transition:background .14s; margin-right:8px; border:1px solid #27e5ff59;
}
.toggle-switch input[type="checkbox"] {display:none;}
.toggle-switch:before {
  content:'';
  position:absolute;
  left:2.5px;top:2.5px; width:19px;height:19px;
  border-radius:50%; background:var(--color-neon-blue);
  box-shadow:0 0 6px 0 var(--color-neon-green);
  transition:left .19s;
}
.toggle-switch input:checked + .toggle-switch:before {
  left:19px; background:var(--color-neon-green);
}
.cookie-modal .close-btn {
  position:absolute; top:19px; right:22px; color:var(--color-neon-yellow); background:none; font-size:2rem; border:none;}
.cookie-modal .close-btn:hover{color:var(--color-neon-green);}
.cookie-modal-actions {display:flex; flex-direction:row; gap:12px; margin-top:12px;}
.cookie-modal-actions .button {padding:8px 18px; font-size:15px;}

/* ==== FORM HINTS ==== */
.contact-form-hint p {
  color:var(--color-neon-blue); font-size:14px; margin-top:14px;
}

/* ==== MISC MELANGE: MAP, WORKFLOW, ETC. ==== */
.embedded-map-placeholder, .workflow-diagram, .directions-text {
  background:rgba(33,48,66,0.45); color:var(--color-neon-blue);
  border-radius:var(--radius-sm);
  padding:18px; margin:14px 0;
  box-shadow:0 1.5px 8px 0 rgba(39,255,199,0.08);
}

/* ====== UTILITY CLASSES ====== */
.d-none {display:none!important;}
.mt-2 {margin-top:8px;}
.mb-1 {margin-bottom:4px;}
.mb-2 {margin-bottom:8px;}
.mb-3 {margin-bottom:16px;}
.gap-0 {gap:0!important;}

/* ====== FOCUS VISIBLE ==== */
a:focus-visible, .button:focus-visible {
  outline:2px solid var(--color-neon-blue);
  outline-offset:2px;
}

/* ==============================================================
   ======= END OF Energetix Nordöl "tech_futuristic" STYLES ======
   ========= Contact: kontakt@energetix-nordoel.com ==============
   ========== Only FLEXBOX, no CSS Grid or Columns!  ============
   ==============================================================