/* ============================================================
   ELIT OÜ — Investment Opportunity
   Design language: industrial precision meets capital-markets gravity.
   Palette derived from the subject — copper contacts, graphite,
   signal cyan, ivory paper.
   ============================================================ */

:root {
  --graphite: #14241A;   /* deep forest-graphite, derived from ELIT green */
  --graphite-2: #1C3024;
  --ivory: #F5F3EE;      /* clean technical paper */
  --ivory-2: #ECE8DF;
  --elit-green: #183319; /* ELIT brand green (logo wordmark) */
  --elit-green-2: #2A5230;
  --elit-red: #991A36;   /* ELIT brand red (logo ellipse) */
  --elit-red-2: #7A1429;
  --copper: #991A36;     /* primary accent now mapped to ELIT red */
  --copper-deep: #7A1429;
  --signal: #2A5230;     /* secondary accent mapped to ELIT green */
  --ink: #14241A;
  --muted: #5C6A60;
  --muted-light: #A7B0A8;
  --line: #D8D3C8;
  --line-dark: #2A3A30;

  --ff-display: "Fraunces", Georgia, serif;
  --ff-body: "Inter", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1140px;
  --gutter: clamp(1.5rem, 4vw, 3rem);
  --r: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--graphite); color: var(--ivory);
  padding: .6rem 1rem; z-index: 100; font-family: var(--ff-mono); font-size: .8rem;
}
.skip:focus { left: 1rem; top: 1rem; }

a { color: inherit; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-mono); font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  padding: .85rem 1.5rem; border-radius: var(--r);
  background: var(--copper); color: #FFFFFF;
  border: 1px solid var(--copper);
  transition: background .2s ease, transform .2s ease, color .2s ease;
  font-weight: 500;
}
.btn:hover { background: var(--copper-deep); border-color: var(--copper-deep); color: var(--ivory); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: transparent; color: var(--graphite); border-color: var(--graphite); }
.btn-sm { padding: .55rem 1rem; font-size: .72rem; }
.btn-lg { padding: 1.05rem 2rem; font-size: .9rem; }

/* ---- topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--ff-display); font-weight: 600; }
.brand-logo { display: block; height: 38px; width: auto; }
.footer-logo { display: block; height: 34px; width: auto; filter: brightness(0) invert(1); }
.brand-name { font-size: 1.35rem; letter-spacing: .02em; color: var(--elit-green); line-height: 1; }
.topnav { display: flex; gap: 1.5rem; margin-left: auto; }
.topnav a { font-family: var(--ff-mono); font-size: .78rem; text-decoration: none; color: var(--muted); letter-spacing: .02em; transition: color .15s; }
.topnav a:hover { color: var(--graphite); }
.topbar-actions { display: flex; align-items: center; gap: 1rem; }
.lang {
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .05em;
  padding: .4rem .6rem; cursor: pointer; color: var(--muted);
}
.lang:hover { border-color: var(--graphite); color: var(--graphite); }
.lang-sep { opacity: .4; margin: 0 1px; }
.lang.et-active .lang-en { opacity: .4; }
.lang:not(.et-active) .lang-et { opacity: .4; }

/* ---- hero ---- */
.hero { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.eyebrow {
  font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--copper-deep); margin-bottom: 1.4rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--copper); }
.hero-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.22;
  letter-spacing: -.01em; margin: 0 0 1.6rem; max-width: 24ch; color: var(--graphite);
}
.hero-title span { display: block; padding-bottom: .12em; }
.hero-accent { font-style: italic; color: var(--copper-deep); }
.hero-lede { font-size: clamp(1.05rem, 2vw, 1.22rem); max-width: 56ch; color: var(--muted); margin: 0 0 2.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.5rem; }
.hero-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero-meta > div { padding: 1.1rem 1.4rem; border-right: 1px solid var(--line); }
.hero-meta > div:first-child { padding-left: 0; }
.hero-meta > div:last-child { border-right: none; }
.hm-k { display: block; font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.hm-v { display: block; font-family: var(--ff-display); font-size: 1.05rem; color: var(--graphite); }
.hero-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper) 20%, var(--signal) 60%, transparent);
  opacity: .5;
}

/* ---- bands ---- */
.band { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; }
.band-rule { border-top: 1px solid var(--line); }
.band-dark { background: var(--graphite); color: var(--ivory); }
.band-dark .section-title { color: var(--ivory); }
.band-dark p { color: var(--muted-light); }

.grid-2 { display: grid; grid-template-columns: 280px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.band-head .num, .num {
  font-family: var(--ff-mono); font-size: .8rem; color: var(--copper);
  letter-spacing: .1em; display: block; margin-bottom: .8rem;
}
.num.light { color: #C9A86A; }
.section-title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.18;
  letter-spacing: -.01em; margin: 0; color: var(--graphite);
}
.band-head.wide { margin-bottom: 2.8rem; max-width: 40ch; }
.band-body p { margin: 0 0 1.2rem; max-width: 62ch; }
.band-body p:last-child { margin-bottom: 0; }

/* ---- highlight cards ---- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.card { background: var(--graphite); padding: 1.8rem 1.6rem 2rem; position: relative; transition: background .2s; }
.card:hover { background: var(--graphite-2); }
.card-tag { font-family: var(--ff-mono); font-size: .7rem; color: #C9A86A; letter-spacing: .1em; }
.card h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.2rem; margin: .7rem 0 .6rem; color: var(--ivory); }
.card p { font-size: .95rem; margin: 0; color: var(--muted-light); }
.fineprint { font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .02em; color: var(--muted-light); margin-top: 2rem; max-width: 70ch; }
.band:not(.band-dark) .fineprint { color: var(--muted); }

/* ---- company facts ---- */
.co-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 2rem; border-top: 1px solid var(--line); }
.fact { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.fact:nth-child(odd) { border-right: 1px solid var(--line); padding-left: 0; }
.fact-k { display: block; font-family: var(--ff-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .3rem; }
.fact-v { display: block; font-family: var(--ff-display); font-size: 1.02rem; color: var(--graphite); }

/* ---- transaction ---- */
.tx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 3rem; }
.tx-item { background: var(--ivory); padding: 1.5rem 1.4rem; }
.tx-k { display: block; font-family: var(--ff-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .5rem; }
.tx-v { display: block; font-family: var(--ff-display); font-size: 1.25rem; color: var(--graphite); }
.tx-options { max-width: 64ch; }
.tx-options h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.3rem; margin: 0 0 1rem; color: var(--graphite); }
.opt-list { margin: 0 0 1.2rem; padding-left: 0; list-style: none; counter-reset: opt; }
.opt-list li { position: relative; padding-left: 2.4rem; margin-bottom: .9rem; counter-increment: opt; }
.opt-list li::before {
  content: counter(opt, upper-alpha); position: absolute; left: 0; top: 0;
  font-family: var(--ff-mono); font-size: .75rem; color: var(--copper-deep);
  border: 1px solid var(--copper); border-radius: 50%; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
}

/* ---- process steps ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.step { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-dark); }
.step-n { font-family: var(--ff-mono); font-size: .8rem; color: var(--ivory); width: 2.2rem; height: 2.2rem; flex: none; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; }
.step-t { font-family: var(--ff-display); font-size: 1.1rem; color: var(--ivory); }
@media (min-width: 720px) {
  .step:nth-child(odd) { padding-right: 2rem; border-right: 1px solid var(--line-dark); }
  .step:nth-child(even) { padding-left: 2rem; }
}

/* ---- cta ---- */
.band-cta { background: var(--ivory-2); border-top: 1px solid var(--line); text-align: center; }
.cta-inner { max-width: 60ch; margin: 0 auto; }
.cta-inner .num { text-align: center; }
.cta-title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 1rem; color: var(--graphite); line-height: 1.16; }
.cta-lede { color: var(--muted); margin: 0 auto 2rem; max-width: 52ch; }
.cta-alt { font-size: .9rem; color: var(--muted); margin: 1.4rem 0 .3rem; }
.cta-mail { font-family: var(--ff-mono); font-size: 1rem; color: var(--graphite); margin: 0; letter-spacing: .02em; }

/* ---- footer ---- */
.footer { background: var(--graphite); color: var(--muted-light); padding: 3.5rem 0 2.5rem; }
.footer-inner { display: flex; flex-direction: column; gap: 1.4rem; }
.footer-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--ff-display); color: var(--ivory); font-size: 1.05rem; }
.footer-disclaimer { font-size: .82rem; line-height: 1.7; max-width: 92ch; color: var(--muted-light); margin: 0; }
.footer-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line-dark); font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .04em; }
.footer-conf { color: #C9A86A; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .topnav { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .tx-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
  .hero-meta > div:nth-child(2) { border-right: none; }
  .hero-meta > div:nth-child(1), .hero-meta > div:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero-title { font-size: clamp(1.5rem, 6.5vw, 2.1rem); overflow-wrap: break-word; hyphens: auto; }
  .cards { grid-template-columns: 1fr; }
  .tx-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step:nth-child(odd) { border-right: none; padding-right: 0; }
  .step:nth-child(even) { padding-left: 0; }
  .co-facts { grid-template-columns: 1fr; }
  .fact:nth-child(odd) { border-right: none; }
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta > div { border-right: none; border-bottom: 1px solid var(--line); }
  .topbar-actions .btn-sm { display: none; }
}