/* Eagle Harbor D.O.O. — Corporate light theme */

.grain { display: none; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 400;
  background: var(--bg-base);
  color: var(--text);
}

.label,
.pill,
.hero__badge,
.stage-card__metric-label,
.logos-band__label,
.hero__metric-label,
.contact__dl dt,
.article-card__type {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.label { color: var(--slate); }

/* Header */
.header {
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.header.scrolled {
  box-shadow: var(--shadow-sm);
}

.brand {
  align-items: center;
}

.brand__logo {
  height: 68px;
  width: auto;
  display: block;
}

.brand__name { display: none; }

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
}

.nav__link:hover { color: var(--navy); }

/* Buttons */
.btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.btn--solid {
  background: var(--navy);
  color: var(--text-on-navy);
}

.btn--solid:hover {
  background: var(--navy-light);
}

.btn--outline,
.btn--glass {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}

.btn--outline:hover,
.btn--glass:hover {
  background: var(--accent-muted);
}

.text-link {
  color: var(--navy-light);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

/* Headings — serif like logo */
.section-head__title,
.display,
.stats__heading,
.spot-card__title,
.cta-panel h2,
.contact__info h2,
.cases .case h3,
.solutions-card h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.section-head__title.display {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
}

.section-head__desc {
  color: var(--text-2);
  font-weight: 400;
}

.dim, .muted { color: var(--text-3); }

/* Announcement */
.announcement {
  background: var(--navy);
  border-bottom: none;
}

.announcement__track {
  color: var(--text-on-navy-muted);
  font-size: var(--text-sm);
}

.announcement__track a {
  color: #fff;
  font-weight: 600;
}

.announcement__close { color: rgba(255,255,255,0.5); }
.announcement__close:hover { color: #fff; }

/* Hero */
.hero--premium {
  min-height: auto;
  padding: calc(var(--header-h) + 24px) 0 56px;
  background: linear-gradient(180deg, var(--bg-navy-soft) 0%, var(--bg-base) 100%);
  border-bottom: none;
  overflow: visible;
}

.hero--premium .reveal {
  opacity: 1;
  transform: none;
}

.hero.hero--premium .hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--navy);
  line-height: 1.14;
  margin-bottom: 24px;
}

.hero__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.hero__orb--1 {
  width: 480px;
  height: 480px;
  top: -120px;
  right: -80px;
  background: rgba(0, 33, 71, 0.04);
  opacity: 1;
}

.hero__orb--2 {
  width: 360px;
  height: 360px;
  bottom: -80px;
  left: -60px;
  background: rgba(112, 128, 144, 0.06);
  opacity: 1;
}

.hero__gridlines {
  position: absolute;
  inset: 0;
  background-size: 48px 48px;
  background-image:
    linear-gradient(rgba(0, 33, 71, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 33, 71, 0.04) 1px, transparent 1px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}

.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--slate);
  margin-bottom: 16px;
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
  flex-shrink: 0;
}

.hero__line {
  display: block;
  overflow: visible;
}

.hero__line:first-child .hero__line-inner {
  font-weight: 600;
  color: var(--slate);
  font-family: var(--font);
  font-size: 0.42em;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25em;
}

.hero__line:nth-child(2) .hero__line-inner,
.hero__line--accent .hero__line-inner {
  color: var(--navy);
  -webkit-text-fill-color: unset;
  background: none;
}

.hero__body {
  color: var(--text-2);
  max-width: 520px;
  margin-bottom: 28px;
  line-height: var(--leading-relaxed);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.hero__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 520px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.hero__metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hero__metric strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

.hero__metric-label {
  display: block;
  color: var(--slate);
  line-height: 1.2;
}

/* Hero stage panel */
.hero__stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
}

.stage-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: 0;
  padding: 24px;
}

.stage-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.stage-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
}

.stage-card__time {
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
}

.stage-card__hero-metric { margin-bottom: 16px; }

.stage-card__metric-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
}

.stage-card__num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.stage-card__pct {
  font-size: 1.25rem;
  color: var(--navy);
  font-weight: 600;
}

.stage-card__delta {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--accent-muted);
  color: var(--navy);
}

.stage-card__chart {
  height: 88px;
  margin-bottom: 16px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.stage-card__chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.stage-card__footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.stage-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.stage-stat span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.3;
}

.stage-stat strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.chart-line { stroke: var(--navy); }

.pill--live {
  background: var(--accent-muted);
  color: var(--navy);
  border-color: var(--accent-border);
}

/* Logos band */
.logos-band {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}

.logos-band__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 32px;
}

.logos-band__label {
  white-space: nowrap;
}

.logos-band__track {
  overflow: hidden;
  min-width: 0;
}

.logos-band__marquee {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker 50s linear infinite;
}

.logos-band__marquee span {
  flex-shrink: 0;
  padding-right: 48px;
  color: var(--slate);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  white-space: nowrap;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Products */
.products--premium {
  background: var(--bg-base);
}

.products__shell {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.products--premium .product-nav__btn {
  border-color: var(--border);
  color: var(--text-2);
}

.products--premium .product-nav__btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.products--premium .product-slide__ui {
  background: var(--bg-raised);
}

.product-progress__bar { background: var(--navy); }

.pay-submit { background: var(--navy); color: #fff; }

/* Spotlight */
.spotlight--premium .spot-card {
  background: #fff;
}

.spotlight--premium .spot-card--featured {
  background: var(--bg-navy-soft);
  border-color: var(--accent-border);
}

.spot-card__tag { color: var(--slate); }
.rating-num { color: var(--navy); font-family: var(--font-serif); }

/* Cases */
.cases {
  background: var(--bg-raised);
}

.cases .case {
  background: #fff;
}

.case__stat { color: var(--navy-light); }

/* Solutions */
.solutions-card {
  background: #fff;
}

.solutions-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
}

.solutions-card__tag { color: var(--slate); }

/* Stats — navy band */
.stats--premium {
  background: var(--navy);
  border: none;
  color: #fff;
}

.stats--premium .label { color: rgba(255,255,255,0.5); }

.stats--premium .stats__heading {
  color: #fff;
  font-family: var(--font-serif);
}

.stats--premium .stats__value {
  background: linear-gradient(180deg, #fff 20%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.stats--premium .stats__currency,
.stats--premium .stats__unit {
  color: rgba(255,255,255,0.45);
}

.stats--premium .stats__caption {
  color: rgba(255,255,255,0.65);
}

/* CTA */
.cta-block--premium {
  background: var(--bg-raised);
}

.cta-panel {
  background: #fff;
  border: 2px solid var(--navy);
}

.cta-panel h2 { color: var(--navy); }
.cta-panel p { color: var(--text-2); }

/* Cards */
.insights--premium .article-card,
.developers .dev-card,
.contact__form {
  background: #fff;
}

.article-card__type { color: var(--slate); }

.field input,
.field textarea {
  background: var(--bg-raised);
  border-color: var(--border);
  color: var(--navy);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.telegram-banner {
  background: var(--bg-navy-soft);
  border-color: var(--accent-border);
}

.telegram-banner__icon {
  background: var(--navy);
  color: #fff;
  border: none;
}

.telegram-banner__copy em { color: var(--slate); }

.btn--telegram {
  background: #0088cc;
  color: #fff;
}

/* Footer */
.footer {
  background: var(--navy);
  border-top: none;
  color: rgba(255,255,255,0.75);
}

.footer .brand__logo {
  height: 64px;
  filter: brightness(0) invert(1);
}

.footer__brand p,
.footer__legal,
.footer__bottom p,
.footer__note {
  color: rgba(255,255,255,0.55);
}

.footer__links a {
  color: rgba(255,255,255,0.55);
}

.footer__links a:hover { color: #fff; }

.office h4 { color: #fff; }
.office p { color: rgba(255,255,255,0.5); }
.office a { color: rgba(255,255,255,0.75); }
.office a:hover { color: #fff; }

.footer #footer-company,
.footer #footer-logo { color: #fff; }

.mobile-cta {
  background: rgba(255,255,255,0.96);
  border-top: 1px solid var(--border);
}

.cookie-banner {
  background: #fff;
  border-top: 1px solid var(--border);
}

.trust { display: none; }

.ai-bar__fill--accent,
.dash-bar--active,
.metric-bar__fill { background: var(--navy); }

.metric-row strong,
.ai-panel__score,
.ai-bar em { color: var(--navy); }

.transfer-badge {
  background: var(--accent-muted);
  color: var(--navy);
  border-color: var(--accent-border);
}

.faq__item summary:hover { color: var(--navy); }

@media (max-width: 900px) {
  .hero--premium {
    padding-bottom: 40px;
  }

  .hero__layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero__metrics {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage-card {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .logos-band__inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .brand__logo { height: 48px; }

  .hero.hero--premium .hero__title {
    font-size: clamp(1.85rem, 8vw, 2.5rem);
    line-height: 1.16;
  }

  .hero__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .stage-card__footer {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stage-stat {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
}