:root {
  --atlas-ink: #17352b;
  --atlas-forest: #164f3c;
  --atlas-green: #2f7759;
  --atlas-leaf: #7da95d;
  --atlas-lime: #dbe8a2;
  --atlas-cream: #f6f4ea;
  --atlas-paper: #fffef9;
  --atlas-line: #dce4d8;
  --atlas-muted: #62756d;
  --atlas-orange: #dc7d42;
}

html { scroll-behavior: smooth; }
body {
  background: var(--atlas-paper);
  color: var(--atlas-ink);
  font-family: "Open Sans", sans-serif;
}

.navbar-custom {
  min-height: 76px;
  padding: 0 4vw;
  background: rgba(255, 254, 249, .96) !important;
  border: 0;
  border-bottom: 1px solid rgba(23, 53, 43, .1);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.navbar-custom .navbar-brand {
  color: var(--atlas-ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: none;
}
.navbar-custom .navbar-brand::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 11px;
  vertical-align: middle;
  background: url("../img/plant_logo_transparent.png") center/contain no-repeat;
}
.navbar-custom .nav-link {
  color: #425c52 !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
.navbar-custom .nav-item:last-child .nav-link {
  margin-left: 10px;
  padding: 10px 16px;
  color: #fff !important;
  background: var(--atlas-forest);
  border-radius: 999px;
}
.navbar-custom .avatar-container { display: none; }
.navbar-custom .dropdown-menu {
  border: 1px solid var(--atlas-line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(23, 53, 43, .12);
}

.atlas-home { margin-top: 76px; overflow: hidden; }
.atlas-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.atlas-hero {
  position: relative;
  min-height: 675px;
  padding: 95px 0 88px;
  background:
    radial-gradient(circle at 86% 15%, rgba(219, 232, 162, .72), transparent 27%),
    linear-gradient(135deg, #f6f4ea 0%, #f8f7ef 61%, #eaf0d8 100%);
}
.atlas-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image: radial-gradient(#345d4b .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, #000, transparent 75%);
}
.atlas-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .96fr 1.04fr;
  gap: 70px;
  align-items: center;
}
.atlas-kicker, .atlas-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--atlas-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.atlas-kicker span { width: 23px; height: 2px; background: var(--atlas-orange); }
.atlas-hero h1 {
  max-width: 620px;
  margin: 22px 0;
  color: var(--atlas-ink);
  font-family: "Open Sans", sans-serif;
  font-size: clamp(46px, 5vw, 70px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.atlas-hero h1 span { color: var(--atlas-green); font: inherit; }
.atlas-lede {
  max-width: 590px;
  color: #52685f;
  font-size: 17px;
  line-height: 1.75;
}
.atlas-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 25px; }
.atlas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid var(--atlas-forest);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.atlas-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23, 53, 43, .14); }
.atlas-btn-primary { color: #fff !important; background: var(--atlas-forest); }
.atlas-btn-secondary { color: var(--atlas-forest) !important; background: transparent; }
.atlas-btn-secondary:hover { background: #fff; }
.atlas-citation-link { color: #78877f; font-size: 12px; line-height: 1.7; }
.atlas-citation-link a { display: block; color: var(--atlas-green); font-weight: 800; }

.atlas-hero-visual { position: relative; }
.atlas-figure-card {
  position: relative;
  padding: 18px 20px 16px;
}
.atlas-figure-card::before {
  content: "";
  position: absolute;
  inset: 8% 5% 12%;
  background: radial-gradient(circle, rgba(219, 232, 162, .62), rgba(219, 232, 162, 0) 68%);
  border-radius: 50%;
  filter: blur(8px);
}
.atlas-figure-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 10px;
}
.atlas-figure-header span { color: var(--atlas-ink); font-size: 12px; font-weight: 800; }
.atlas-figure-header span i { display: inline-block; width: 18px; height: 2px; margin: 0 7px 3px 0; background: var(--atlas-orange); }
.atlas-figure-header small { color: var(--atlas-green); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.atlas-figure-image { position: relative; height: 375px; }
.atlas-figure-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(23, 53, 43, .08));
}
.atlas-figure-legend {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: -5px;
}
.atlas-figure-legend > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  background: rgba(255, 254, 249, .72);
  border: 1px solid rgba(23, 53, 43, .1);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
.atlas-figure-legend i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; }
.atlas-figure-legend span, .atlas-figure-legend b { display: block; }
.atlas-figure-legend b { color: var(--atlas-ink); font-size: 10px; white-space: nowrap; }
.atlas-figure-legend span { color: #77877f; font-size: 8px; line-height: 1.55; }
.legend-rna { background: var(--atlas-green); }
.legend-atac { background: var(--atlas-orange); }
.legend-spatial { background: #8aa34c; }

.atlas-section { padding: 100px 0; }
.atlas-section-heading {
  display: grid;
  grid-template-columns: 1.6fr .8fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 48px;
}
.atlas-section h2, .atlas-paper h2 {
  margin: 10px 0 0;
  color: var(--atlas-ink);
  font-family: "Open Sans", sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.03em;
}
.atlas-section-heading > p { margin: 0; color: var(--atlas-muted); font-size: 15px; line-height: 1.7; }
.atlas-tools { background: var(--atlas-paper); }
.atlas-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.atlas-tool-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--atlas-line);
  border-radius: 14px;
}
.atlas-viewer-card { background: #eef2e2; }
.atlas-browser-card { background: #edf3ef; }
.atlas-tool-copy { position: relative; z-index: 1; padding: 38px 38px 30px; }
.atlas-tool-number { position: absolute; top: 30px; right: 34px; color: rgba(23, 53, 43, .25); font-size: 13px; }
.atlas-tool-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 30px;
  color: var(--atlas-forest);
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(23, 53, 43, .12);
  border-radius: 50%;
}
.atlas-card-label { color: var(--atlas-orange); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.atlas-tool-card h3 { margin: 7px 0 14px; color: var(--atlas-ink); font-size: 31px; font-weight: 700; letter-spacing: -.025em; }
.atlas-tool-card p { max-width: 470px; color: #5d7168; font-size: 14px; line-height: 1.7; }
.atlas-tool-card ul { margin: 18px 0 24px; padding: 0; list-style: none; }
.atlas-tool-card li { margin: 9px 0; color: #355046; font-size: 13px; }
.atlas-tool-card li::before { content: "✓"; margin-right: 9px; color: var(--atlas-green); font-weight: 800; }
.atlas-tool-card a, .atlas-text-link {
  color: var(--atlas-forest);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(22, 79, 60, .35);
}
.atlas-tool-image { height: 210px; margin: 4px 0 0 38px; overflow: hidden; border-radius: 9px 0 0; box-shadow: 0 0 32px rgba(23, 53, 43, .13); }
.atlas-tool-image img { width: 100%; min-height: 100%; object-fit: cover; object-position: top left; }

.atlas-modalities { background: var(--atlas-cream); }
.atlas-modality-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #ccd7c8; border-bottom: 1px solid #ccd7c8; }
.atlas-modality-grid article { padding: 36px 36px 40px 0; }
.atlas-modality-grid article + article { padding-left: 36px; border-left: 1px solid #ccd7c8; }
.atlas-modality-code { display: grid; place-items: center; width: 51px; height: 51px; color: var(--atlas-forest); background: var(--atlas-lime); border-radius: 50%; font-size: 11px; font-weight: 700; }
.atlas-modality-grid h3 { margin: 25px 0 12px; color: var(--atlas-ink); font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.atlas-modality-grid p { min-height: 70px; color: var(--atlas-muted); font-size: 13px; line-height: 1.7; }
.atlas-modality-grid a { color: var(--atlas-green); font-size: 12px; font-weight: 800; }

.atlas-workflow { background: #fffef9; }
.atlas-workflow-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 110px; align-items: start; }
.atlas-workflow-grid > div > p { margin: 24px 0; color: var(--atlas-muted); font-size: 15px; line-height: 1.8; }
.atlas-workflow ol { margin: 0; padding: 0; list-style: none; }
.atlas-workflow li { display: grid; grid-template-columns: 52px 1fr; gap: 21px; padding: 0 0 30px; position: relative; }
.atlas-workflow li:not(:last-child)::after { content: ""; position: absolute; top: 40px; bottom: 2px; left: 20px; width: 1px; background: var(--atlas-line); }
.atlas-workflow li > span { display: grid; place-items: center; width: 41px; height: 41px; color: var(--atlas-forest); background: #eef2e2; border: 1px solid #d2ddcb; border-radius: 50%; font-weight: 700; }
.atlas-workflow li b { color: var(--atlas-ink); font-size: 19px; }
.atlas-workflow li p { margin: 6px 0 0; color: var(--atlas-muted); font-size: 13px; line-height: 1.65; }

.atlas-paper { padding: 68px 0; background: var(--atlas-forest); }
.atlas-paper-inner { display: grid; grid-template-columns: 150px 1fr auto; gap: 40px; align-items: center; }
.atlas-paper-figure {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  box-shadow: 0 14px 32px rgba(4, 24, 17, .25);
}
.atlas-paper-figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.atlas-paper-figure:hover img { transform: scale(1.025); }
.atlas-paper .atlas-eyebrow { color: var(--atlas-lime); }
.atlas-paper h2 { max-width: 800px; color: #fff; font-size: clamp(28px, 3vw, 38px); }
.atlas-paper p { margin: 16px 0 0; color: #b8ccc3; font-size: 13px; }
.atlas-btn-light { color: var(--atlas-forest) !important; background: var(--atlas-lime); border-color: var(--atlas-lime); white-space: nowrap; }

footer { margin: 0; padding: 38px 0; background: #102f25 !important; border: 0; }
footer .copyright, footer .copyright a { color: #adc1b8 !important; font-size: 12px; }
footer .theme-by { display: none; }
footer .fa-stack { color: #adc1b8; }

@media (max-width: 991px) {
  .navbar-custom { min-height: 68px; padding: 0 22px; }
  .navbar-custom .navbar-brand { font-size: 15px; }
  .navbar-custom .navbar-brand::before { width: 29px; height: 29px; }
  .navbar-custom .nav-item:last-child .nav-link { margin: 5px 0 12px; display: inline-block; }
  .atlas-home { margin-top: 68px; }
  .atlas-hero { padding: 70px 0 80px; }
  .atlas-hero-grid { grid-template-columns: 1fr; gap: 35px; }
  .atlas-hero-copy { max-width: 720px; }
  .atlas-hero-visual { width: min(620px, 100%); margin: 0 auto; }
  .atlas-section-heading { grid-template-columns: 1fr; gap: 18px; }
  .atlas-tool-grid { grid-template-columns: 1fr; }
  .atlas-workflow-grid { grid-template-columns: 1fr; gap: 60px; }
  .atlas-paper-inner { grid-template-columns: 120px 1fr; }
  .atlas-paper-inner .atlas-btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 680px) {
  .atlas-shell { width: min(100% - 32px, 1180px); }
  .navbar-custom .navbar-brand { max-width: 270px; white-space: normal; line-height: 1.1; }
  .atlas-hero { min-height: 0; padding: 55px 0 70px; }
  .atlas-hero h1 { font-size: 44px; }
  .atlas-lede { font-size: 15px; }
  .atlas-actions { flex-direction: column; }
  .atlas-btn { width: 100%; }
  .atlas-figure-card { padding: 8px 0; }
  .atlas-figure-image { height: 300px; }
  .atlas-figure-legend { grid-template-columns: 1fr; }
  .atlas-figure-legend > div { padding: 11px 16px; }
  .atlas-figure-legend span { font-size: 9px; }
  .atlas-section { padding: 72px 0; }
  .atlas-section h2 { font-size: 36px; }
  .atlas-tool-copy { padding: 30px 25px 26px; }
  .atlas-tool-image { height: 150px; margin-left: 25px; }
  .atlas-modality-grid { grid-template-columns: 1fr; }
  .atlas-modality-grid article, .atlas-modality-grid article + article { padding: 28px 0; border-left: 0; }
  .atlas-modality-grid article + article { border-top: 1px solid #ccd7c8; }
  .atlas-modality-grid p { min-height: 0; }
  .atlas-paper-inner { grid-template-columns: 1fr; gap: 28px; }
  .atlas-paper-figure { width: 130px; }
  .atlas-paper-inner .atlas-btn { grid-column: auto; }
}