:root {
  --font-body: "Montserrat", sans-serif;
  --font-body2: "Oxanium", sans-serif;
  --font-heading: "Oxanium", sans-serif;
  --background-color: #0B0B0B;
  --body-primary-color: #FAFAFA;
  --body-secondary-color: #C6C6C6;
}

body {
    font-family: var(--font-body);
    background-color: var(--background-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--body-primary-color);
  margin: 0;
  padding: 0;
  text-align: center;
}

h2 {
  font-size: 38px;
}

@media(max-width:768px){
  h2 {
    font-size: 32px;
  }
}

p {
  font-family: var(--font-body);
  color: var(--body-primary-color);
}

ul li {
  font-family: var(--font-body);
  color: var(--body-primary-color);
}

.button-gradient {
  padding: 16px 32px;
  background: linear-gradient(#A8FF78, #78FFD6);
  color: #000000;
  font-family: 'montserrat', 'sans-serif';
  font-weight: 700;
  border: none;
  border-radius: 5px;
}

.button-gradient:hover {
  box-shadow: 0 0 32.7px 0 rgba(11, 208, 142, 0.61);
}

/* Navigation */

nav ul {
  display: flex;
  flex-direction: row;
  gap: 32px;
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  color: var(--body-primary-color);
  font-size: 14px;
} 

nav ul li a:hover {
  text-decoration: underline;
}

.navigation {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-color);
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

@media(max-width:768px){
  nav ul li a {
    font-size: 12px;
  }
}

/* Hero page */

#hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#00290E, #000D04);
  overflow: hidden;
  min-height: 100vh; /* KEY LINE */
}

.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: overlay; 
  opacity: 0.9;            
}

.hero-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 2;
  color: white;

  gap: 64px;
}

.hero-logo {
  width: clamp(200px, 15vw, 800px);
}

.hero-content p {
  color: #C6C6C6;
  font-size: 14px;
  width: 55ch;
}

.hero-content h1 {
  text-align: left;
}

.powered-by-technica {
  filter: brightness(0) invert(1) contrast(100%);
  position: static;
  width: 500px;
}

.button-gradient {
  cursor: pointer;
}

@media (max-width: 768px) {

  /* Let hero grow naturally instead of being trapped in vh */
  #hero {
    min-height: 100svh;
    padding: 0px;
  }

  .hero-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;     /* override 60/65vh */
    top: 0;           /* remove vertical push */
  }

  /* Stop oversized logo from breaking layout */
  .hero-logo {
    width: 60vw;      /* was clamp(800px,...) */
    top: 0;           /* cancel -170px */

  }

  /* Remove manual shifting */
  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    left: 0;
    top: 0;
    text-align: center;
    padding: 0 10px;
  }

  .hero-content h1 {
    font-size: 26px;
    text-align: center;
  }

  .hero-content p {
    width: 100%;      /* override 55ch/40ch */
    max-width: 40ch;
    margin: 0 auto;
  }

  .powered-by-technica {
    width: 220px;
  }
}

/* Challenges section */

#challenges {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 0px;
}

.heading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60ch;
  margin-bottom: 48px;
}


.heading-text {
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body-secondary-color);
}

.cards-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: clamp(180px, 15vw, 250px);
  border: 2px solid #2A2A2A;
  border-radius: 5px;
  padding: 24px;
}

.card p {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.card img {
  width: 75px;
}

.subheading {
  font-size: 24px;
  width: 40ch;
}

@media (max-width: 768px) {
  .heading-container {
    width: 90%;
  }
  .subheading {
    font-size: 24px;
    width: 90%;
}
.cards-container{
    width: 100vw;
}
  .card {
    width: 30%;
  }

}

/* Solution section */

#solution {
  background-image: url("assets/background-light-green.png");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 0;
}

#solution h3 {
  font-size: 40px;
  text-align: center;
  color: var(--background-color);
  font-family: var(--font-body2);
}

#solution p {
  font-size: 14px;
  text-align: center;
  color: var(--background-color);
  font-family: var(--font-body);
  max-width: 50ch;   /* Keeps nice readable line length on large screens */
  width: 90%;        /* Allows it to shrink on mobile */
}

.logo-light {
  width: clamp(250px, 20vw, 550px);
  margin: 24px 0;
}



/* Key principles section */

#key-principles {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 120px 200px;
}

#key-principles h2 {
  font-size: 38px;
}

#key-principles img {
  width: clamp(400px, 35vw, 600px);
}

.key-principles-leftside-container {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: start;
}

.key-principles-list {
  line-height: 1.6;
  font-size: 14px;
  width: 80%;
}
.key-principles-list li {
  margin-bottom: 15px;
}

.key-principles-list li::marker {
  color: #78FFD6;
  font-size: 20px;
}

@media (max-width: 1400px){
  #key-principles {
  padding: 120px 50px;
}
}

@media (max-width: 768px){
  #key-principles {
    padding: 120px 20px;
    flex-direction: column;
}
  #key-principles img {
    width: 90%;
}
}
/* ------------ Target audience (slider) section --------------- */

#target-audience {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 100px 0;
  background-color: #101010;
}

#target-audience h2 {
  font-size: 38px;
}

:root{
  --slider-width: 90vw;      /* 90% of screen */
  --gap: 16px;               /* space between cards */
  --spv: 3.5;                /* slides per view (desktop) */
}

/* Slider shell */
.slider{
  width: min(var(--slider-width), 1400px);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: center;
  column-gap: 14px;
}

.slider-viewport{
  overflow: hidden;
  border-radius: 20px;
  /* Optional: subtle edge fade so the peek looks nicer */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.slider-track{
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  padding: 10px; 
}

/* Card width calculation:
    We want N cards visible (including the half peek as 0.5).
    The track width equals viewport width. Each card is:
    (viewport - totalGaps) / N

    Using "gap" for (N - 1) is a good approximation; it’s visually correct
    and keeps it simple/responsive. JS updates --spv at breakpoints. */
.slider-card{
  flex: 0 0 calc((72% - (var(--gap) * (var(--spv) - 1))) / var(--spv));
  border: 1px solid #2A2A2A;
  min-height: 170px;
  border-radius: 5px;
  padding: 24px;
}

.title-gradient{
  margin: 0 0 20px 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  background: linear-gradient(90deg, #A8FF78, #78FFD6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.slider-card ul{
  margin: 0;
  padding-left: 18px;
}
.slider-card li{
  margin: 8px 0;
  line-height: 1.35;
  font-size: 14px;
  color: var(--body-secondary-color)
}

/* Arrows */
.slider-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #eaf0ff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
  user-select: none;
}
.slider-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.10); }
.slider-btn:active{ transform: translateY(0px); }
.slider-btn[disabled]{ opacity: 0.35; cursor: not-allowed; }

.chev{
  width: 18px;
  height: 18px;
  display: block;
}

/* Responsive: fewer cards visible */
@media (max-width: 980px){
  :root{ --slider-width: 90vw; }
}

/* ------------ Resource hub section --------------- */

#resource-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 100px 0;
}

.resources-container {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  gap: 16px;
}

.resource-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  border-radius: 5px;
  padding: 16px;
  transition: background-color 0.25s ease;
  border: 1px solid transparent;
  background:
    linear-gradient(#0F0F0F, #0F0F0F) padding-box,
    linear-gradient(#2A2A2A, #2A2A2A) border-box;
} 

.resource-card a {
  text-decoration: none;
  color: var(--body-primary-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.resource-card:hover {
  background-color: #0F0F0F;
  background:
  linear-gradient(#0F0F0F, #0F0F0F) padding-box,
  linear-gradient(to right, #A8FF78, #78FFD6) border-box;
}

.resource-card img {
  width: 30px;
}

.resource-name {
  font-weight: 700;
}

.resource-name-highlighted {
  font-weight: 700;
  background: linear-gradient(90deg, #A8FF78, #78FFD6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.resource-desc {
  font-size: 14px;
  color: var(--body-secondary-color)
}

@media (max-width: 768px){
  .resource-card {
    width: 90%;
}
}

/* ------------ Get started CTA section --------------- */

#get-started-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 100px 0;
  background-image: url("assets/background-light-green.png");
}

#get-started-cta h2 {
  font-family: var(--font-heading);
  color: var(--background-color)
}


/* ------------ Summary of impact --------------- */

#summary-of-impact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 100px 0;
}

.impact-cards-container {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  justify-content: center;
  gap: 16px;
} 

@media (max-width: 768px) {
  .impact-cards-container {
    gap: 8px;
  } 
  .impact-cards-container .card {
    padding: 16px 8px;
  }
}

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

.footer-logos{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: linear-gradient(90deg, #0B0B0B 0%, #171717 100%);
  padding: 32px;
}

.footer-logos p {
  font-size: 12px;
}

.footer-logos img{
  width: 100px;
}

.footer-links {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color);
  gap: 24px;
  padding: 16px;
}

.footer-links a {
  color: var(--body-primary-color)
}

/* ------------ Imprint page --------------- */

#navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#imprint {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  padding: 60px 60px;
}

.imprint-container {
  display:flex;
  flex-direction: column;
  align-items: left;
  width: 60vw;
}

.imprint-container h1 {
  text-align: left;
  font-size: 38px;
}

.imprint-container h2 {
  text-align: left;
  font-size: 24px;
  color: #8EFFAA;
  margin-top: 48px;
}

.imprint-container p {
  line-height: 130%;
}

.imprint-container a {
  color: #8EFFAA;
}