*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-size:1vw;}

    :root {
      --green-dark: #26584b;
      --green-mid: #2e6b4a;
      --green-accent: #3d8b5e;
      --green-light: #f1f5f4;
      --off-white: #f7f5f0;
      --text-dark: #26584b;
      --text-mid: #444;
      --text-light: #777;
      --border: #858587;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #ffffff;
      color: var(--text-dark);
      overflow-x: hidden;
    }

    /* NAV */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.1rem 3rem;
      background: rgba(0,0,0,0.4);
	  height:90px;
    }
    .nav-logo {position:absolute;left:2vw;height:60px;}
	.nav-logo img{height:100%;width:auto;}
    .nav-links {
      display: flex;
      gap: 2.2rem;
      list-style: none;
    }
    .nav-links a {
      color: #ffffff;
      text-decoration: none;
      font-size: 1rem;
      font-weight: 200;
      letter-spacing: 0.03em;
      transition: color 0.2s;
    }
    .nav-links a:hover, .nav-links a.active { color: #fff;font-weight:600; }

    /* HERO */
	section.hero{padding:0px;}
    .hero img{
		width:100%;
    }
    .hero-content {
      position: relative;
      text-align: center;
      color: #fff;
      max-width: 720px;
      padding: 2rem;
      animation: fadeUp 1.1s ease both;
    }
    .hero-badge {
      display: inline-block;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 2rem;
      padding: 0.35rem 1.1rem;
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 1.4rem;
      color: var(--green-light);
    }
    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.8rem, 6vw, 5rem);
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 1.4rem;
    }
    .hero p {
      font-size: 1.05rem;
      line-height: 1.75;
      color: rgba(255,255,255,0.78);
      margin-bottom: 2rem;
    }
    .hero-cta {
      display: inline-block;
      padding: 0.85rem 2.2rem;
      border: 1.5px solid rgba(255,255,255,0.6);
      border-radius: 2rem;
      color: #fff;
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: background 0.25s, border-color 0.25s;
    }
    .hero-cta:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

    .scroll-indicator {
      position: absolute;
      bottom: 2.5rem;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,0.5);
      animation: bounce 2s infinite;
      font-size: 1.4rem;
    }

    /* SECTIONS */
    section { padding: 0px 2vw; }

    .container { margin: 0 auto; }

    /* INTRO */
    .intro {
      background: #fff;
      text-align: center;
	  position:relative;
    }
    .intro-icon {
      margin: 0 auto 6vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
	.arrow-down{position:absolute;bottom:20px;left:50%;cursor:pointer;}
    .intro-icon svg { width: 32px; height: 32px; color: var(--green-dark); }
    .intro p {
      font-size: 1rem;
      line-height: 1.85;
      color: var(--text-mid);
      margin: 0 auto 0.8rem;
    }
    .intro p strong { color: var(--text-dark); font-weight: 600; }
    .intro .tagline {
      font-weight: 600;
      color: var(--green-dark);
      margin-top: 0.8rem;
	  margin-bottom:6vh;
    }

    /* TWO-COL */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
	#technology .two-col, #partners .two-col{align-items:end;}
	#about .two-col{display:flex;align-items:end;}
	#about .two-col > div:first-child{width:40%;}
	#about .two-col > div:last-child{flex:1;}
    .section-label {
      font-size: 8rem;
      font-weight: 300;
      color: var(--green-dark);
      line-height: 1;
    }
    .section-body {
      font-size: 1vw;
      line-height: 1.85;
      color: var(--text-mid);
    }
	
	.container{padding:6vh 0px;}

    /* PROBLEM */
    .problem .container{border-top:solid 1px var(--border);}

    /* PARTNERS */
    .partners { background: var(--green-light);}
    .partners-desc {
      font-size: 1vw;
      color: var(--text-mid);
      line-height: 1.75;
      margin-bottom: 1rem;
    }
    .partners-logos {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
	  justify-content:space-between;
	  padding:4vh 0px 0px;
	  border-top:solid 1px var(--border);
    }
	.partners-logos img{mix-blend-mode: multiply;width:100%;}
    .logo-wrap{max-width: 11%;}

    /* TECHNOLOGY */
    .technology { background: #ffffff; }
    .tech-features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1.2rem;
      margin: 3rem 0;
    }
    .tech-feature {
      background: var(--green-light);
      border-radius: 6px;
      padding: 20px;
      text-align: left;
	  position:relative;
	  display: flex;
	  align-items: end;
	  padding-top: 60px;
    }
    .tech-feature-icon {position:absolute;top:20px;right:20px;}
    .tech-feature-label {
      color: var(--green-dark);
    }
    .tech-mechanism {
      display: flex;
      align-items: start;
      justify-content: center;
      gap: 1.5rem;
      margin-top: 3rem;
      flex-wrap: wrap;
    }
    .mechanism-item {
      text-align: center;
	  padding:0px 5vw;
    }
	.mechanism-item p{font-size:23px;line-height:1em;font-weight:600;text-align:center;margin-bottom:1em;}
	.mechanism-item.mech2 p{display:flex;justify-content:space-around;margin-bottom:0.9em;margin-top:1.05em;}
	.mechanism-item.mech2 p span:first-child{padding-right:7%;}
	.mechanism-item.mech2 p span:last-child{padding-left:7%;}
	.mechanism-item.mech2 p.last{margin-top:0.5em;}
	/*.mechanism-item.mech2 img{margin-top:1.3em;}*/
    .mechanism-circle {
      width: 100px; height: 100px;
      border-radius: 50%;
      background: var(--green-light);
      margin: 0 auto 0.6rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--green-dark);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border: 3px solid var(--green-accent);
    }
    .mechanism-label { font-size: 0.82rem; color: var(--text-mid); font-weight: 500; }
    .mechanism-plus { font-size: 2rem; color: var(--green-accent); font-weight: 300; }
    .mechanism-arrow { font-size: 1.5rem; color: var(--green-accent); }
    .mechanism-result .mechanism-circle {
      width: 120px; height: 120px;
      background: var(--green-mid);
      color: #fff;
      border-color: var(--green-dark);
    }

    /* ABOUT */
    .about { background: var(--green-light);  }
	#about .section-body{position:relative;}
	#about .section-body:before{content:url(./../images/arrow-right-green.png);position:absolute;top:50%;left:0px;transform:translate(-200%, -50%);}

    /* TEAM */
    .team { background: #ffffff; }
    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .team-card {
      background: var(--green-light);
      border-radius: 6px;
      padding: 20px;
      text-align: left;
	  position:relative;
    }
    .team-card:hover { box-shadow: 0 8px 32px rgba(26,61,46,0.12); transform: translateY(-3px); }
    .team-avatar {margin-top:2em;}
	.team-avatar img{display:block;}
    .team-name {
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--text-dark);
      margin-bottom: 0.25rem;
    }
    .team-role {
      font-size: 0.78rem;
      color: var(--text-dark);
      line-height: 1.4;
    }
    .team-linkedin {position: absolute;top: 20px;right: 20px;}
	.read-more{position: absolute;bottom: 20px;right: 20px;cursor: pointer;font-size: 36px;line-height: 1em;font-weight: 300;}
	.bio{display:none;margin-top: 20px;}

    /* CONTACT */
    .contact {
      background: url(./../images/banner-bottom.jpg) no-repeat center top / 100% auto;
      position: relative;
      overflow: hidden;
    }
	.contact h2, .contact p{text-align:center;}
    .contact .container { position: relative; padding-top:20vh;}
    .contact .sub {
      color: rgba(255,255,255,0.6);
      margin-bottom: 2.5rem;
      font-size: 0.95rem;
    }
	.contact p, .contact p a{font-size:0.8vw;color:#231f20;line-height:2em;}
	.social-wrap{display: flex;align-items: end;justify-content: center;margin:30px auto 20px;}
	.social-wrap a{padding:0px 15px;}
    .contact-form {
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
	  background:#f1f5f4;
	  border-radius: 14px;
	  margin: auto;
      padding: 50px;
    }
    .contact-form input,
    .contact-form textarea {
      background: transparent;
	  border:none;
      border-bottom: 1px solid var(--green-dark);
      border-radius: 0px;
      padding: 0.85rem 1.1rem 0px 0px;
      color: #231f20;
      font-family: inherit;
      font-size: 0.92rem;
      outline: none;
      transition: border-color 0.2s, background 0.2s;
      width: 100%;
	  margin-bottom: 50px;
    }
	.el-error, #wait{display:none;}
    .contact-form input::placeholder,
    .contact-form textarea::placeholder { color: #231f20; }
    .contact-form input:focus,
    .contact-form textarea:focus {
      border-color: rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.12);
    }
    .contact-form textarea { resize: vertical; min-height: 120px; }
    .contact-form button {
      align-self: flex-start;
      background: rgba(255,255,255,0.15);
      border: 1px solid var(--green-dark);
      border-radius: 30px;
      padding: 5px 30px;
      color: #231f20;
      font-family: inherit;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      letter-spacing: 0.04em;
      transition: background 0.2s, border-color 0.2s;
    }
    .contact-form button:hover { background: rgba(255,255,255,0.25); border-color: #fff; }
	.contact-form h2.section-label{font-size:5rem;}

    /* FOOTER */
    footer {
      background: #0d2518;
      color: rgba(255,255,255,0.45);
      text-align: center;
      padding: 1.8rem 2rem;
      font-size: 0.8rem;
      line-height: 1.7;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .footer-icons {
      display: flex;
      justify-content: center;
      gap: 1.2rem;
      margin-bottom: 0.8rem;
    }
    .footer-icons a {
      color: rgba(255,255,255,0.4);
      font-size: 1.1rem;
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-icons a:hover { color: rgba(255,255,255,0.8); }
	.mobile{display:none;}

    /* ANIMATIONS */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(8px); }
    }

    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }

    /* RESPONSIVE */
    @media (max-width: 768px) {
		.pc{display:none;}
		.mobile{display:block;}
      nav { padding: 1rem 1.5rem; }
      .nav-links { display: none;position: absolute;top: 90px;left: 0px;right: 0px;background: rgba(0, 0, 0, 0.4);padding: 50px;}
	  .nav-links li{padding:20px 0px;}
      section { padding: 0px 1.5rem; }
      .two-col { grid-template-columns: 1fr; gap: 2rem; }
      .section-label { font-size: 2.5rem; }
	  .mechanism-item{width:48%;}
	  .mechanism-item img{width:100%;}
	  .tech-mechanism{flex-wrap: nowrap;justify-content:space-between;}
	  .mechanism-item p{font-size: 10px;}
	  .mechanism-item.mech2 p span{font-size:10px;}
	  .read-more{bottom: 0px;right: 7px;}
	  .mechanism-item.mech2 img{margin-top: 0px;width:92%;}
	  .mechanism-item.mech2 p{margin-top:2em;}
	  .contact-form h2.section-label{font-size: 2.5rem;}
	  .tech-feature{padding-top: 20px;height: 8em;}
	  .tech-feature-icon{top: 10px;right: 10px;}
	  .tech-feature-icon img{height:20px;}
	  *, *::before, *::after{font-size:18px;}
	  .partners-logos{flex-wrap: wrap;align-items:center;justify-content:center;}
	  .logo-wrap{max-width:none;}
	  /*.logo-wrap:nth-child(1), .logo-wrap:nth-child(2), .logo-wrap:nth-child(3){width:30%;padding:0px 5%;}
	  .logo-wrap:nth-child(4), .logo-wrap:nth-child(5){width:40%;padding:0px 7%;}
	  .logo-wrap:nth-child(6), .logo-wrap:nth-child(7){width:40%;padding:0px 7%;}*/
	  h2{text-align:center;}
	  .section-body{text-align:center;}
	  .partners-desc{text-align:center;}
	  .contact{background-size:auto 45%;}
	  .contact .container{padding-top:6vh;}
	  .nav-logo{position:static;}
	  nav{justify-content:space-between;}
	  .section-body, .partners-desc{font-size:18px;}
	  .contact p, .contact p a{font-size:16px;}
	  .arrow-downm{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width: auto !important;}
	  section.hero{position:relative;}
	  .intro-icon{margin-bottom:4vh;}
	  .reveal.visible{padding-top:10vh;}
	  .intro .tagline{margin-bottom:20px;}
	  .nav-logo img{height:90%;}
	  #about .two-col{flex-wrap:wrap;}
	  #about .two-col > div:first-child{width:100%;}
	  .logo-wrap:nth-child(5){order:1;width:30%;padding-right:4%;}
	  .logo-wrap:nth-child(6){order:2;width:30%;padding:0px 2%;}
	  .logo-wrap:nth-child(4){order:3;width:30%;padding-left:4%;}
	  .logo-wrap:nth-child(3){order:4;width:45%;padding-right:4%;margin:20px 0px;}
	  .logo-wrap:nth-child(7){order:5;width:45%;padding-left:4%;margin:20px 0px;}
	  .logo-wrap:nth-child(1){order:6;width:40%;padding-right:4%;}
	  .logo-wrap:nth-child(2){order:7;width:45%;padding-left:4%;}
	  .intro-icon img{max-width:90%;}
    }