/* ============ Tokens ============ */
:root{
  --graphite:      #14171A;
  --graphite-2:    #1B2027;
  --graphite-3:    #232A32;
  --hairline:      #333B44;
  --paper:         #ECE6D8;
  --paper-dim:     #A9A296;
  --gold:          #C2993D;
  --gold-dim:      #8A6E30;
  --blue:          #5E93B8;
  --blue-dim:      #3E6580;
  --danger:        #C4623F;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1120px;
  --radius: 3px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background: var(--graphite);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--paper);
}
h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size: 1.35rem; }
h4{ font-size: 1.1rem; }
h5{ font-size: 1rem; letter-spacing: 0.02em; }
p{ margin: 0 0 1em; color: var(--paper); }
a{ color: var(--gold); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0 0 0.9em;
}

.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--paper-dim);
  margin-bottom: 1em;
}
.tag--gold{ color: var(--gold); border-color: var(--gold-dim); }
.tag--blue{ color: var(--blue); border-color: var(--blue-dim); }

.section__lede{ max-width: 640px; color: var(--paper-dim); font-size: 1.02rem; }

.fine-print{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--paper-dim);
  border-left: 2px solid var(--hairline);
  padding-left: 12px;
  margin-top: 1.4em;
  max-width: 720px;
}

/* ============ License ribbon ============ */
.license-ribbon{
  background: var(--graphite-3);
  border-bottom: 1px solid var(--hairline);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 8px 24px;
  text-align: center;
  line-height: 1.5;
}
.license-ribbon__dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--gold); margin-right:8px; vertical-align:middle;
}

/* ============ Header ============ */
.site-header{
  position: sticky; top:0; z-index: 20;
  border-bottom: 1px solid var(--hairline);
}
/* Blur lives on a pseudo-element, not on .site-header itself, because
   backdrop-filter/filter on an element makes it the containing block for
   any position:fixed descendants. .site-nav is fixed (mobile off-canvas
   menu) and a child of .site-header — if the header itself carried the
   filter, the nav would size/position itself against the ~57px header
   box instead of the viewport, which is what caused the mobile menu to
   overlap the logo and spill out above the license ribbon. */
.site-header::before{
  content: "";
  position: absolute;
  inset: 0 0 1px 0;
  background: rgba(20,23,26,0.9);
  backdrop-filter: blur(6px);
  z-index: -1;
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
}
.mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--paper); }
.mark__glyph{ width: 26px; height: 26px; color: var(--gold); }
.mark__glyph-blue{ color: var(--blue); }
.mark__text{ font-family: var(--font-mono); font-weight:500; letter-spacing: 0.08em; font-size: 0.95rem; }

.site-nav{ display:flex; align-items:center; gap: 28px; }
.site-nav a{
  color: var(--paper-dim); text-decoration:none; font-size: 0.88rem;
  font-family: var(--font-mono);
}
.site-nav a:hover{ color: var(--paper); }
.site-nav__cta{
  color: var(--graphite) !important; background: var(--gold);
  padding: 7px 14px; border-radius: var(--radius);
}
.site-nav__cta:hover{ background: #d4ab52; }

/* About Us dropdown (Overview / Our Team) */
.nav-item{ display:flex; align-items:center; position: relative; }
.nav-item__trigger{ display:inline-flex; align-items:center; gap:5px; }
.nav-item__trigger::after{
  content:""; width:5px; height:5px; margin-top:-2px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform: rotate(45deg); opacity:0.65;
}
.nav-dropdown{
  /* padding-top (not margin) grows the hoverable box itself over the visual
     gap between trigger and menu, so moving the mouse down into the menu
     never leaves .nav-item and the dropdown doesn't disappear mid-hover. */
  position:absolute; top:100%; left:50%; transform: translateX(-50%);
  padding-top: 14px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .15s ease, visibility .15s;
  z-index: 10;
}
.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown:focus-within .nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
}
.nav-dropdown__inner{
  background: var(--graphite-2); border: 1px solid var(--hairline); border-radius: var(--radius);
  min-width: 168px; padding: 8px; display:flex; flex-direction:column; gap:2px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}
.nav-dropdown__inner a{
  padding: 9px 10px; border-radius: 6px; font-size: 0.86rem; white-space: nowrap;
}
.nav-dropdown__inner a:hover{ background: var(--graphite-3); color: var(--paper); }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding: 8px; }
.nav-toggle span{ display:block; width:22px; height:2px; background: var(--paper); margin: 4px 0; }

@media (max-width: 860px){
  /* .site-header is `position: sticky`, which makes it a positioned element —
     so `position: absolute; top: 100%` on .site-nav anchors it exactly to the
     header's bottom edge, however tall the header actually renders. This
     replaces a hardcoded pixel offset that could drift out of sync with the
     header's real height (e.g. while webfonts are still loading) and cause
     the menu to overlap the logo or peek out above the license ribbon. */
  .site-nav{
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    background: var(--graphite-2); border-bottom: 1px solid var(--hairline);
    padding: 18px 24px 24px; gap: 16px;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease, visibility .2s;
    z-index: 5;
  }
  .site-nav.is-open{
    transform: translateY(0);
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nav-toggle{ display:block; }

  /* Hover doesn't work on touch, so the dropdown becomes a static,
     always-visible indented sub-list under "About Us" instead. */
  .nav-item{ flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-dropdown{
    position: static; transform:none; padding-top: 0; margin-top: 10px;
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .nav-dropdown__inner{
    background:none; border:none; box-shadow:none; padding: 0 0 0 16px; gap: 12px;
  }
  .nav-dropdown__inner a{ padding:0; font-size: 0.84rem; }
}

/* ============ Hero ============ */
.hero{
  position: relative; overflow:hidden;
  padding: 96px 0 88px;
  border-bottom: 1px solid var(--hairline);
}
.hero__inner{ position: relative; z-index: 2; max-width: 720px; }
.hero__title{ font-size: clamp(2.6rem, 6vw, 4.4rem); }
.hero__sub{ font-size: 1.15rem; color: var(--paper-dim); max-width: 560px; }
.hero__actions{ display:flex; gap: 14px; margin-top: 2em; flex-wrap: wrap; }

.hero__seal{ position:absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 520px; max-width: 60vw; opacity: 0.9; z-index:1; }
.seal-loop{ fill:none; stroke-width:1.4; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 2.2s ease forwards; }
.seal-loop--gold{ stroke: var(--gold-dim); }
.seal-loop--blue{ stroke: var(--blue-dim); animation-delay: .3s; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.02em;
  padding: 12px 20px; border-radius: var(--radius); text-decoration:none;
  border: 1px solid transparent; cursor:pointer;
}
.btn--primary{ background: var(--gold); color: var(--graphite); font-weight:500; }
.btn--primary:hover{ background:#d4ab52; }
.btn--ghost{ border-color: var(--hairline); color: var(--paper); }
.btn--ghost:hover{ border-color: var(--paper-dim); }

/* ============ Sections ============ */
.section{ padding: 84px 0; border-bottom: 1px solid var(--hairline); }
.section--panel{ background: var(--graphite-2); }

.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity: 1; transform: none; }

/* Thesis split */
.split{ display:grid; grid-template-columns: 1fr 1px 1fr; gap: 40px; align-items:center; margin-top: 1.2em;}
.split__seam{ background: linear-gradient(var(--gold-dim), var(--blue-dim)); height: 100%; min-height: 80px; }
.split__col{ padding: 4px 0; }
.split__tag{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing:0.1em; text-transform:uppercase; }
.split__col--gold .split__tag{ color: var(--gold); }
.split__col--blue .split__tag{ color: var(--blue); }
.split--cards{ grid-template-columns: 1fr 1fr; gap: 24px; }
.split--cards .split__seam{ display:none; }
@media (max-width: 760px){
  .split{ grid-template-columns: 1fr; }
  .split__seam{ display:none; }
}

/* Comparison table */
.table-wrap{ overflow-x:auto; margin: 2em 0; }
.compare-table{ width:100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td{
  text-align:left; padding: 12px 16px; border-bottom: 1px solid var(--hairline);
  font-size: 0.92rem;
}
.compare-table thead th{ font-family: var(--font-mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--paper-dim); }
.compare-table tbody th{ color: var(--paper-dim); font-weight: 500; font-family: var(--font-body); }
.compare-table tbody td:last-child{ color: var(--gold); }

/* Ecosystem loop */
.ecosystem-loop{ margin-top: 3em; display:grid; grid-template-columns: 1fr; gap: 24px; align-items:center; }
.ecosystem-loop__svg{ width:100%; max-width: 640px; margin: 0 auto; display:block; }
.loop-path{ fill:none; stroke-width:1.4; }
.loop-path--gold{ stroke: var(--gold-dim); }
.loop-path--blue{ stroke: var(--blue-dim); }
.loop-hub{ fill: var(--graphite-3); stroke: var(--paper-dim); stroke-width:1; }
.ecosystem-loop__labels{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align:center; }
.ecosystem-loop__label p{ color: var(--paper-dim); font-size: 0.9rem; margin:0; }
@media (max-width: 760px){ .ecosystem-loop__labels{ grid-template-columns: 1fr; } }

/* Stat cards */
.stat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 2em 0 0; }
.stat-card{ background: var(--graphite-3); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px; }
.stat-card__value{ display:block; font-family: var(--font-display); font-size: 2rem; color: var(--gold); }
.stat-card__label{ font-family: var(--font-mono); font-size: 0.76rem; color: var(--paper-dim); text-transform:uppercase; letter-spacing:0.04em; }
@media (max-width: 700px){ .stat-grid{ grid-template-columns: 1fr; } }

/* Steps */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 2.4em; }
.step{ border-top: 1px solid var(--hairline); padding-top: 16px; }
.step__num{ font-family: var(--font-mono); color: var(--gold); font-size: 0.85rem; }
@media (max-width: 760px){ .steps{ grid-template-columns: 1fr; } }

/* Cards / vector grid */
.card{ background: var(--graphite-3); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px 24px; }
.check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.check-list li{ padding-left: 18px; position:relative; color: var(--paper-dim); font-size:0.92rem; }
.check-list li::before{ content:"—"; position:absolute; left:0; color: var(--gold); }

.vector-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 2em; }
.vector-card{ border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px 22px; }
.vector-card p{ color: var(--paper-dim); font-size: 0.9rem; margin:0; }
@media (max-width: 760px){ .vector-grid{ grid-template-columns: 1fr; } }

/* Bar chart */
.bar-chart{ display:flex; align-items:flex-end; gap: 28px; height: 260px; margin: 2.4em 0 1em; padding: 0 4px; }
.bar-chart__col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.bar-chart__stack{
  width: 100%; max-width: 64px; display:flex; flex-direction:column-reverse;
  height: calc(var(--h) * 1.9px); border-radius: 2px 2px 0 0; overflow:hidden;
}
.bar-chart__seg{ width:100%; height: calc(var(--v) * 1.9px); }
.bar-chart__seg--gold{ background: var(--gold-dim); }
.bar-chart__seg--blue{ background: var(--blue); }
.bar-chart__value{ font-family: var(--font-mono); font-size: 0.85rem; margin-top: 10px; color: var(--paper); }
.bar-chart__label{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--paper-dim); margin-top: 2px; }

.legend{ display:flex; gap: 20px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--paper-dim); }
.legend__item{ display:flex; align-items:center; gap:8px; }
.legend__swatch{ width:10px; height:10px; display:inline-block; border-radius:2px; }
.legend__swatch--gold{ background: var(--gold-dim); }
.legend__swatch--blue{ background: var(--blue); }

/* Use of funds */
.use-of-funds{ display:flex; flex-direction:column; gap: 18px; margin: 2em 0; max-width: 720px; }
.use-of-funds__row{ display:grid; grid-template-columns: 120px 1fr; gap: 20px; align-items:center; }
.use-of-funds__bar{ height: 10px; border-radius: 5px; background: var(--blue-dim); width: calc(var(--pct) * 1%); min-width: 14px; }
.use-of-funds__row--gold .use-of-funds__bar{ background: var(--gold); }
.use-of-funds__text strong{ display:block; font-size:0.95rem; }
.use-of-funds__text span{ color: var(--paper-dim); font-size: 0.85rem; }
.thesis-exit{ margin-top: 2.6em; }
.thesis-exit.split{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 760px){ .use-of-funds__row{ grid-template-columns: 1fr; } .thesis-exit.split{ grid-template-columns: 1fr; } }

/* Contact */
.contact{ display:grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items:start; }
.contact__whatsapp{ display:inline-block; margin-top: 1.2em; }
.contact-form{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row--full{ grid-column: 1 / -1; }
.form-row--hidden{ position:absolute; left:-9999px; }
label{ font-family: var(--font-mono); font-size: 0.76rem; color: var(--paper-dim); text-transform:uppercase; letter-spacing:0.04em; }
input, select, textarea{
  background: var(--graphite-3); border: 1px solid var(--hairline); color: var(--paper);
  padding: 11px 12px; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--gold); outline-offset: 1px; }

/* International phone input (flag dropdown) */
.iti{ width: 100%; }
.iti__tel-input{ width: 100%; }
.iti__selected-flag{ background: transparent; border-right: 1px solid var(--hairline); }
.iti__selected-flag:hover, .iti__selected-flag:focus{ background: var(--graphite-2); }
.iti__arrow{ border-top-color: var(--paper-dim); }
.iti__country-list{
  background: var(--graphite-3); border: 1px solid var(--hairline); color: var(--paper);
  font-family: var(--font-body); box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.iti__country{ color: var(--paper); }
.iti__country.iti__highlight, .iti__country:hover{ background: var(--graphite-2); }
.iti__dial-code{ color: var(--paper-dim); }
.iti__divider{ border-bottom: 1px solid var(--hairline); }
.iti__search-input{
  background: var(--graphite-2); border: 1px solid var(--hairline); color: var(--paper);
  padding: 8px 10px; font-family: var(--font-body); font-size: 0.9rem;
}
.iti__search-input::placeholder{ color: var(--paper-dim); }
.contact-form .btn{ grid-column: 1 / -1; margin-top: 4px; }
.form-status{ grid-column: 1/-1; font-family: var(--font-mono); font-size: 0.85rem; min-height: 1.2em; margin:0; }
.form-status.is-error{ color: var(--danger); }
.form-status.is-ok{ color: var(--gold); }
@media (max-width: 860px){ .contact{ grid-template-columns: 1fr; } .contact-form{ grid-template-columns: 1fr; } }

/* ============ Footer ============ */
.site-footer{ padding: 56px 0 40px; }
.site-footer__inner{ display:grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.mark--footer{ margin-bottom: 14px; }
.site-footer__company{ color: var(--paper-dim); font-size: 0.9rem; }
.site-footer__whatsapp{ font-family: var(--font-mono); font-size: 0.85rem; text-decoration:none; }
.site-footer__email{ display:block; margin-top: 6px; font-family: var(--font-mono); font-size: 0.85rem; text-decoration:none; color: var(--gold); }
.site-footer__email:hover{ color: #d4ab52; }
.contact__email{ display:block; margin-top: 8px; font-family: var(--font-mono); font-size: 0.85rem; text-decoration:none; color: var(--gold); }
.contact__email:hover{ color: #d4ab52; }
.site-footer__legal p{ color: var(--paper-dim); font-size: 0.78rem; line-height:1.7; }
@media (max-width: 760px){ .site-footer__inner{ grid-template-columns: 1fr; } }

/* ============ About Us / page hero ============ */
.hero--page{ padding: 72px 0 56px; }
.hero--page .hero__inner{ max-width: 760px; }

/* Note: Our Team page (.team-grid, .team-card*) styling now lives in its
   own stylesheet — /static/css/team.css — loaded only by team.html. */

.chairman{ max-width: 760px; margin-top: 1.6em; }
.chairman__quote{ margin:0; border-left: 2px solid var(--gold-dim); padding-left: 22px; }
.chairman__quote p{ font-family: var(--font-display); font-size: 1.15rem; color: var(--paper); line-height:1.55; }
.chairman__sign{ margin-top: 1.6em; font-family: var(--font-mono); color: var(--paper-dim); font-size: 0.88rem; }