/* The uploaded Lemongrass logo supplies the lime, yellow and teal brand palette.
   Shared base tokens live in style.css. This layer applies the identity to all pages. */

/* Brand lockup and navigation */
.site-header {
  background: rgba(6, 29, 35, .98);
  border-bottom-color: #8dd3c71c;
}
.brand { gap: 12px; }
.brand-mark { width: 46px; height: 46px; object-fit: contain; }
.brand-word { font-size: 1.3rem; letter-spacing: -.04em; }
.brand-word small { color: #b2d5d3; letter-spacing: .34em; }
.nav a:hover, .nav a[aria-current] { color: #e9ed67; }
.nav a[aria-current]::after { background: var(--brand-gradient); }
.site-header .btn-primary { background: var(--gold); }
.site-header .btn-primary:hover { background: #ffe958; }
.site-footer { background: var(--dark); border-top: 1px solid #9acbbe24; }
.footer-bottom { border-top-color: #c4e3d51c; }

/* A brand-led homepage hero, using the supplied artwork unchanged. */
.hero {
  background: radial-gradient(ellipse at 83% 28%, #17413b88, transparent 48%), var(--dark);
}
.hero-grid { grid-template-columns: 1.08fr 1fr; }
.hero h1 em {
  color: var(--primary);
  background: linear-gradient(105deg, #bfe83b 5%, #f4df3e 62%, #58dacc 110%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .pill { border-color: #aac43e4d; background: #b9df140a; color: #d7e2b6; }
.hero .dot { background: var(--gold); }
.hero-description { color: #b2c8c9; }
.hero-subtitle { color: #e7f2ef !important; }
.hero-foot { color: #adc6c6; }
.hero-foot span:nth-child(1) .icon { color: #bfdf36; }
.hero-foot span:nth-child(2) .icon { color: #f5d720; }
.hero-foot span:nth-child(3) .icon { color: #46d4cf; }
.hero-art { min-height: 580px; }
.hero-art::before {
  inset: 45px -60px 35px -30px;
  background: radial-gradient(ellipse at 35% 35%, #b9df1412, transparent 48%),
              radial-gradient(ellipse at 76% 25%, #f5d72012, transparent 45%),
              radial-gradient(ellipse at 70% 75%, #05b8bd1a, transparent 48%);
}
.hero-emblem {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: min(79%, 440px);
  height: auto;
  filter: drop-shadow(0 28px 40px #0005);
}
.brand-orbit {
  position: absolute;
  width: min(96%, 540px);
  aspect-ratio: 1;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  border: 1px solid #b9df1424;
  border-radius: 50%;
  box-shadow: 0 0 0 28px #05b8bd05, 0 0 0 62px #f5d72003;
}
.brand-orbit::before, .brand-orbit::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  top: 13%;
  left: 14%;
  box-shadow: 0 0 18px #f5d72066;
}
.brand-orbit::after {
  background: var(--teal);
  top: auto;
  left: auto;
  bottom: 15%;
  right: 12%;
  box-shadow: 0 0 18px #05b8bd66;
}
.hero-caption { top: 38px; right: 50%; transform: translateX(50%); white-space: nowrap; color: #a6c8c5; }
.visual-label {
  width: max-content;
  max-width: calc(100% - 16px);
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #0b3137ed;
  border-color: #34c6be45;
  box-shadow: 0 16px 40px #0002;
}
.visual-label .icon { color: #40d5cc; flex-shrink: 0; }
.visual-label small { color: #bbd4d2; }
.service-ribbon { background: #0c2a30; border-top-color: #9dc8c221; }
.ribbon-items { color: #c6d9d4; }
.ribbon-items span:nth-child(3n+1) .icon { color: #c7e74b; }
.ribbon-items span:nth-child(3n+2) .icon { color: #f5d720; }
.ribbon-items span:nth-child(3n) .icon { color: #45d4cd; }

/* Use dark counterparts of brand colors for readable text on light surfaces. */
.eyebrow, .card-tag, .faq-category { color: var(--teal-dark); }
.dark .eyebrow, .page-hero .eyebrow { color: #bde86a; }
.text-link:hover { color: var(--teal-dark); }
.dark .text-link:hover { color: #54dace; }
.btn-primary { background: linear-gradient(110deg, #b9df14, #e8e333); color: #173008; }
.btn-primary:hover { background: #d9ed43; }
.btn-outline:hover { background: #e8f7f4; border-color: var(--teal-dark); }
.btn-dark { background: #103139; }
.btn-dark:hover { background: #19515a; }
.icon-box { background: #e8f6f1; color: #087a75; }
.services-grid .card:nth-child(3n+1) .icon-box { background: #eff7d8; color: #59770d; }
.services-grid .card:nth-child(3n+2) .icon-box { background: #fff7cb; color: #80640b; }
.services-grid .card:nth-child(3n) .icon-box { background: #ddf5f3; color: #00737c; }
.card:hover { border-color: #7cbcb1; box-shadow: 0 14px 32px #06332a08; }
.check-list .icon { color: #0b8177; }
.dark .check-list .icon { color: #9fdf5b; }
.plan li .icon { color: #0b8177; }
.plans-section { background: #edf6f2; }
.plan.featured { border-color: #00a7a3; box-shadow: 0 12px 32px #00958c10; }
.popular { background: #f5df3b; color: #37400c; }
.tabs { background: #dcebe5; }
.tabs button { color: #3d625f; }
.tabs button[aria-selected=true] { color: #075f64; }
.price { border-top-color: var(--line); }
.stat:nth-child(3n+1) strong { color: #547912; }
.stat:nth-child(3n+2) strong { color: #857007; }
.stat:nth-child(3n) strong { color: #007b7d; }
.stars { color: #887007; }
.demo-label, .tags span { background: #e8f3ed; color: #36675b; }
.project-art { background-color: #10373d; color: #bfe559; background-image: radial-gradient(#4eb8ad28 1px, transparent 1px); }
.project:nth-child(3n+2) .project-art { color: #f5df3b; }
.project:nth-child(3n) .project-art { color: #4bddce; }
.project-art small { color: #b0cbc9; }

/* Three-color identity carried through infrastructure, inner pages and CTAs. */
.infrastructure { background: linear-gradient(125deg, #103b3d, #061d23); }
.node { background: #0f363c; border-color: #05b8bd55; color: #d5e9df; }
.node.core { background: #214038; border-color: #b9df1477; }
.diagram-lines, .diagram-row::before, .diagram-row .node::before { border-color: #31bdb67a; }
.diagram-row .node:nth-child(2) { border-color: #f5d72066; }
.page-hero { background: radial-gradient(ellipse at 90% 45%, #07565b66, transparent 55%), var(--dark); }
.page-hero::after { border-color: #05b8bd33; box-shadow: 0 0 0 50px #b9df1406, 0 0 0 110px #f5d72004; }
.page-hero p { color: #b0cccd; }
.cta-section { background: linear-gradient(110deg, #eff8ce 0%, #fff5c5 48%, #d7f3eb 100%); border-block: 1px solid #dee9ce; }
.cta-section .eyebrow { color: #526d2c; }
.cta-section p { color: #4e685a; }
.step::before { color: #0a7875; border-bottom-color: #b8d8ca; }
.notice { background: #edf7e6; border-color: #abc922; color: #375940; }
.form-status { background: #e4f5ef; color: #24604f; }
.form-status.error { background: #fff0ee; color: #a62820; }
.map-placeholder { background: repeating-linear-gradient(35deg, #eaf4ee, #eaf4ee 25px, #dcebe4 25px, #dcebe4 26px); }
.map-placeholder .icon { color: #087b79; }
.back-top { background: #f5df3b; color: #163a3b; }
.error-code { color: var(--gold); }
:focus-visible { outline-color: #007c88; }
.dark :focus-visible, .site-header :focus-visible { outline-color: #f5df3b; }

/* Keep the complete emblem comfortably inside every viewport. */
@media (max-width: 1190px) {
  .brand-mark { width: 42px; height: 42px; }
  .brand-word { font-size: 1.13rem; }
  .nav-wrap { gap: 22px; }
  .nav { gap: 15px; }
  .hero-emblem { width: 82%; }
}
@media (max-width: 980px) {
  .nav { background: #0a2b32; }
  .hero-art { min-height: 520px; }
  .hero-caption { display: block; font-size: .58rem; top: 42px; }
  .visual-label { gap: 10px; padding: 14px; bottom: 45px; }
  .visual-label small { font-size: .62rem; }
}
@media (max-width: 650px) {
  .brand-mark { width: 39px; height: 39px; }
  .brand-word { font-size: 1.12rem; }
  .hero-art { min-height: 370px; margin: 22px 0 10px; }
  .hero-emblem { width: min(70%, 280px); top: 44%; }
  .brand-orbit { width: min(85%, 330px); top: 44%; }
  .hero-caption { top: 0; font-size: .55rem; }
  .visual-label { bottom: 12px; padding: 12px 16px; }
  .visual-label b { font-size: 1.6rem; }
  .visual-label small { font-size: .63rem; }
}
@media (max-width: 359px) {
  .hero-art { min-height: 315px; }
  .hero-emblem, .brand-orbit { top: 42%; }
  .visual-label { padding: 10px 12px; }
  .visual-label small { font-size: .6rem; }
}