:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #111;
  --muted: #777;
  --border: #e5e7eb;
  --hover: #f7f7f9;
  --icon: #b5b7bb;
}

[data-theme="dark"] {
  --bg: #0e0f11;
  --card: #15161a;
  --text: #fff;
  --muted: #aaa;
  --border: #2a2b30;
  --hover: #1b1c21;
  --icon: #6f737b;
}

* {
  margin:0; padding:0;
  box-sizing:border-box;
  font-family:Inter, system-ui, sans-serif;
}

body {
  background:var(--bg);
  color:var(--text);
  transition:background .3s, color .3s;
}

/* NAV */
nav {
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  max-width:1100px;
  padding:14px 24px;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(18px) saturate(160%);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
}

[data-theme="dark"] nav {
  background:rgba(21,22,26,0.6);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.logo {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  text-transform: lowercase;   /* makes AttoZip → attozip */
  cursor: pointer;
}
.logo:hover {
  color:#001B94;
}

.nav-right { display:flex; gap:18px; align-items:center; }
.nav-link { text-decoration:none; font-size:.85rem; color:var(--text); opacity:.7; transition:.2s; }
.nav-link:hover { opacity:1; }
.toggle { cursor:pointer; font-size:.85rem; opacity:.7; }
.toggle:hover { opacity:1; }

/* HERO */
.hero-box {
  width: 92%;
  max-width: 950px;
  margin: 110px auto 50px; /* REDUCED from 140px to match benchmark.html */
  padding: 40px 32px;
  background: var(--card);
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  text-align: center;
}

.type-box {
  font-size:2.2rem;
  font-weight:600;
  white-space:nowrap;
  height:44px;
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;          /* auto match text height */
  background: currentColor;
  margin-left: 4px;
  animation: blink .8s steps(1) infinite;
  opacity: .8;
}

@keyframes blink {
  0%,50% { opacity:1; }
  50.01%,100% { opacity:0; }
}
@media (max-width: 680px) {
  .logo {
    margin: 0 auto;      /* center horizontally */
    text-align: center;  /* center text inside */
  }
}
.sub {
  font-size:1.05rem;
  text-align: center;
  color:var(--muted);
  margin-top:40px;
  margin-bottom: 30px;
}

.btn {
  margin-top:22px;
  background:var(--text);
  color:var(--bg);
  padding:12px 26px;
  border-radius:12px;
  font-size:.9rem;
  text-decoration:none;
  display:inline-block;
  transition:.2s;
}
.btn:hover { opacity:.85; }

/* FEATURES */
.home-features {
  width: 92%;
  max-width: 950px;
  margin: 20px auto 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature {
  border:1px solid var(--border);
  border-radius:18px;
  padding:26px;
  background:var(--card);
  transition:.25s ease;
  box-shadow: 0 20px 50px rgba(0,0,0,.12); /* ADDED */
}

.feature:hover {
  background: var(--hover);
  transform: translateY(-4px);
}

.feature:hover .feature-icon { color: var(--text); }
.feature:hover .feature-icon svg { stroke: var(--text); }

.feature-icon {
  width:22px;
  height:22px;
  margin-bottom:14px;
  color:var(--icon);
}

.feature-icon svg {
  width:100%;
  height:100%;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}

.feature h3 {
  font-size:.95rem;
  font-weight:600;
  margin-bottom:10px;
}

.feature p {
  font-size:.85rem;
  line-height:1.6;
  color:var(--muted);
}

/* FAQ BOX */
.faq-box {
  width: 92%;
  max-width: 950px;
  margin: 20px auto 50px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
}

.faq-title {
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 22px;
  text-align: center;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.faq-item:last-child { border-bottom: none; }

.faq-q {
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding-right: 24px;
}

/* ===== ADD THESE ===== */
.faq-q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  transition:.25s;
  color: var(--icon);        /* light grey normal */       /* ADD */
}

.faq-item:hover .faq-q::after {
  color: var(--text);        /* black on hover */          /* ADD */
}

.faq-item.active .faq-q::after {
  content: "-";
  color: var(--text);        /* black when open */         /* ADD */
}
/* ===== END ADD ===== */

.faq-a {
  font-size: .9rem;
  color: var(--muted);
  margin-top: 20px;   /* MORE SPACE */
  line-height: 1.7;   /* Cleaner readable spacing */
  display: none;
}

/* MOBILE */
@media(max-width:750px) {
  .home-features { grid-template-columns:1fr; }
}

@media(max-width: 680px) {

  nav {
    flex-wrap: wrap;
    row-gap: 24px;     /* space between rows */
    max-width: 100%;   /* ensure full width */
  }

  .nav-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}


.impact-box {
  width: 92%;
  max-width: 950px;
  margin: 20px auto 50px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  text-align: center;
}

.impact-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 35px;
}

/* GREEN SECTION */
.impact-green {
  background: rgba(110, 150, 0, 0.25);
  padding: 30px 35px;
  border-radius: 22px;
  border: 1px solid rgba(150, 210, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  position: relative;
}

/* WHITE SEPARATOR LINE */
.impact-sep {
  height: 80%;
  width: 1.5px;
  background: rgba(255,255,255,0.55);
  position: absolute;
  left: 50%;
  top: 10%;
}

/* LEFT TEXT */
.impact-left {
  width: 50%;
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 500;
  color: #fff;
  padding-right: 40px;
}

/* RIGHT SIDE NUMBERS */
.impact-right {
  width: 50%;
  text-align: center;
  color: #b7f954; /* neon green like screenshot */
  font-weight: 700;
  padding-left: 40px;
}

.impact-unit {
  font-size: 1.2rem;
  color: #fff;
  margin-top: 10px;      /* MORE VERTICAL SPACE */
  font-weight: 400;      /* NOT BOLD */
}

.impact-number {
  font-size: 3.2rem;
  line-height: 1.1;      /* a bit more breathing room */
  margin-bottom: 12px;   /* ADD SPACE BELOW NUMBER */
}


.impact-perday {
  font-size: 1.6rem;     /* slightly larger for hierarchy */
  margin-top: 14px;      /* MORE SPACE ABOVE */
  color: #b7f954;
}

/* BOTTOM SUB TEXT */
.impact-sub {
  margin-top: 25px;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.6;
}

/* MOBILE */
@media(max-width: 750px) {

  .impact-green {
    flex-direction: column;
    padding: 28px 20px;
    text-align: center;
    position: relative;
  }

  /* remove vertical separator on mobile */
  .impact-sep {
    display: none;
  }

  .impact-left, 
  .impact-right {
    width: 100%;
    padding: 0;
  }

  /* NEW HORIZONTAL SEPARATOR */
  .impact-sep-horizontal {
    width: 70%;
    height: 1.5px;
    background: rgba(255,255,255,0.55);
    margin: 22px auto;       /* space above & below */
    border-radius: 1px;
  }
}
@media (max-width: 680px) {
  .hero-box {
    margin-top: 160px !important; /* adjust until perfect */
  }
}

[data-theme="light"] .impact-right {
  color: #6a9f00; /* darker green for visibility */
}

[data-theme="light"] .impact-number {
  color: #6a9f00;
}

[data-theme="light"] .impact-perday {
  color: #6a9f00;
}

[data-theme="light"] .impact-unit {
  color: #ffffff;   /* dark grey for GWh */
}

.possibilities-box {
  width: 92%;
  max-width: 950px;
  margin: 20px auto 50px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  text-align: center;
}

.possibilities-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 30px;
}

.possibilities-img {
  width: 100%;               /* REDUCED SIZE BY ~10% */
  max-width: 740px;         /* proportional reduction */
  margin: 0 auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;   /* user cannot drag or select */

  /* FORCE IMAGE TO B/W */
  filter: grayscale(100%) brightness(0.9) contrast(1.1);
}

.possibilities-sub {
  margin-top: 22px;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.6;
}
* {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
}
@media(max-width: 600px) {
  .type-box {
    white-space: normal;
    font-size: 1.6rem;  /* optional: scale down */
  }
}

@media (max-width: 680px) {
  .hero-box,
  .home-features,
  .faq-box,
  .possibilities-box,
  .impact-box {
    margin-bottom: 40px !important;  /* was 80px */
  }
}
/* BUTTON ROW BELOW HERO */
.hero-btn-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

/* DOWNLOAD BUTTON — SAME AS BUY PAGE */
.download-btn {
  margin-top:22px;          /* SAME as .btn */
  background:transparent;
  border:1.5px solid var(--border);
  color:var(--muted);
  padding:12px 26px;        /* SAME as .btn */
  border-radius:12px;       /* SAME as .btn */
  font-size:.9rem;          /* SAME as .btn */
  display:inline-block;     /* SAME as .btn */
  text-decoration:none;
  font-weight:400;          /* match .btn (NOT 600!!) */
  line-height:normal;       /* SAME as .btn */
  box-sizing:border-box;
  transition:.2s;
  white-space:nowrap;
}

.download-btn:hover {
  color:var(--text);
  border-color:var(--text);
  cursor: pointer;
}
@media (max-width: 650px) {
  .hero-btn-row {
    flex-direction: column;   /* stack buttons vertically */
    gap: 0px;                /* space between them */
  }

  .btn,
  .download-btn {
    width: 100%;              /* full width buttons */
    text-align: center;
  }
}

.possibilities-box, .impact-box {
    transition: transform .25s ease, box-shadow .25s ease;
}

.possibilities-box:hover, .impact-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.phone-support-container {
  width: 92%;
  max-width: 950px;
  margin: 20px auto 60px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.phone-support-container:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.phone-support-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phone-support-text-block {
  flex: 1;
  padding: 0 20px;
}

.phone-support-title {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.phone-support-text {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Mobile layout */
@media(max-width: 650px) {
  .phone-support-row {
    flex-direction: column;
    gap: 20px;
  }
}

.phone-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  margin: auto 0;
  transition: filter .25s ease;
}

/* DEFAULT GREY — Light theme */
[data-theme="light"] .phone-logo {
  filter: brightness(0) invert(0) opacity(0.55);
}

/* DEFAULT GREY — Dark theme (brighter!) */
[data-theme="dark"] .phone-logo {
  filter: brightness(0) invert(1) opacity(0.35);
}

/* HOVER → Black in light mode */
[data-theme="light"] .phone-logo:hover {
  filter: brightness(0) invert(0) opacity(1);
}

/* HOVER → White in dark mode */
[data-theme="dark"] .phone-logo:hover {
  filter: brightness(0) invert(1) opacity(1);
}


.rec-box {
  margin: 30px auto 0 auto;
  padding: 6px 18px;
  border: 1px solid var(--text);
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  display: inline-block;
  background: transparent;

  animation: recPulse 2.4s ease-in-out infinite;
}

@keyframes recPulse {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

.store-links-row {
  margin-top: 30px;
  display: flex;
  justify-content: center; /* centers horizontally */
  gap: 20px;               /* space between links */
  align-items: center;
}

.hero-patent-row {
  margin-top: 38px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
}

.hero-patent-row .hero-know-more {
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  opacity: .7;
  transition: .2s;
}

.hero-patent-row .hero-know-more:hover {
  opacity: 1;
}

.patent-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* i icon same color as text (muted) */
.info-blink {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);   /* same muted color */
  color: var(--muted);                /* same muted color */
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: infoPulse 1.8s ease-in-out infinite;
  opacity: .85;                       /* clean muted look */
}

@keyframes infoPulse {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}



/* CONTRIBUTORS BOX */
.contributors-box {
  width: 92%;
  max-width: 950px;
  margin: 20px auto 60px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.contributors-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.contributors-title {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 40px;
}

.contributors-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  align-items: center;
}

.contrib-img {
  height: 30px;
  width: auto;
  object-fit: contain;
  display: block;
  max-width: 120px;

  /* default muted grey look */
  filter: grayscale(100%) brightness(0.55) contrast(1.1);
  opacity: 0.55;
  transition: filter .25s ease, opacity .25s ease;
}

/* hover → reveal full color */
.contrib-img:hover {
  filter: none;      /* remove grey */
  opacity: 1;        /* full visibility */
}
  
/* Mobile */
@media(max-width: 600px) {
  .contributors-row {
    flex-direction: column;
    gap: 24px;   /* tighter spacing */
  }

  .contrib-img {
    height: 30px;    /* keep same height as desktop */
    width: auto;     /* keep full aspect ratio */
  }
}

[data-theme="dark"] .contrib-img {
  filter: grayscale(100%) brightness(1.35) contrast(1.2);
  opacity: 0.95;
}
[data-theme="dark"] .contrib-img:hover {
  filter: none !important;
  opacity: 1 !important;
}



.viewer-box {
  width: 92%;
  max-width: 950px;
  margin: 20px auto 60px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

.viewer-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.viewer-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.viewer-sub {
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.6;
}

.viewer-btn {
  background: var(--text);
  color: var(--bg);
  padding: 12px 28px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 600;
  display: inline-block;
  cursor: pointer;
  transition: .2s;
}

.viewer-btn:hover {
  opacity: .85;
}

.hero-box,
.faq-box {
  transition: transform .25s ease, box-shadow .25s ease;
}

.hero-box:hover,
.faq-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.contrib-more {
  display: inline-block;
  margin-top: 50px;
  font-size: .9rem;
  color: var(--text);
  opacity: .7;
  text-decoration: none;
  transition: .2s;
}

.contrib-more:hover {
  opacity: 1;
}


#viewerBtn {
  opacity: 0;
  transition: opacity 1s ease; /* smooth fade */
}

#viewerBtn.show {
  opacity: 1;
}




.stats-row {
  width: 92%;
  max-width: 950px;
  margin: 40px auto 48px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.stat-box {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.stat-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.stat-title {
  font-size: 1rem;
  font-weight: 600;
  opacity: .7;
  margin-bottom: 18px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
}

@media (max-width: 750px) {
  .stats-row {
    flex-direction: column;      /* stack vertically */
    gap: 20px;                   /* space between boxes */
  }

  .stat-box {
    width: 100%;                 /* full width */
  }
}

.info-box,
.card,
.resource-box {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}