:root{
  --bg:#0f0d0c;
  --sand:#d8b88f;
  --sand-2:#b79772;
  --text:#f3eadf;
  --muted:#b0a497;
  --border:#2a2522;
  --card:#161210;
  --shadow: rgba(0,0,0,.6);

  --container: 1200px;
  --radius-xl: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}
.container{ width: min(100% - 40px, var(--container)); margin-inline:auto; }

.bg-grid{
  position:fixed;
  top:0; bottom:0;
  width: min(100% - 40px, var(--container));
  left:50%; transform:translateX(-50%);
  z-index:-1; pointer-events:none;
}
.bg-grid .line{
  position:absolute; top:0; bottom:0; width:2px;
  left:var(--pos); transform:translateX(-1px);
  background: linear-gradient(to bottom, rgba(255,232,200,.16), rgba(255,232,200,.05));
  box-shadow: 0 0 14px rgba(255,232,200,.08);
}

.bg-grid .line .streak{
  position:absolute; top:-20vh; left:50%; transform:translateX(-50%);
  width:4px; height:var(--len,180px);
  border-radius:999px;
  background:
    linear-gradient(to bottom,
      rgba(255,232,200,0)    0%,
      rgba(255,232,200,.04)  18%,
      rgba(255,232,200,.9)   55%,
      rgba(255,232,200,.38)  100%);
  filter: blur(0.3px);
  box-shadow:
    0 0 10px rgba(255,232,200,.35),
    0 0 18px rgba(255,232,200,.22);
  animation: streakFall var(--dur,9s) linear forwards;
}
@keyframes streakFall{
  0%   { transform: translate(-50%, -10vh); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform: translate(-50%, 110vh); opacity:0; }
}

.nav{
  position:sticky; top:0; z-index:2;
  background: rgba(8,6,5,.72);
  backdrop-filter: blur(8px);
  border-bottom:1px solid #1e1917;
}
.nav__row{display:flex; justify-content:space-between; align-items:center; padding-block:14px;}
.brand{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  height:22px;
  width:22px;
  display:block;
  border-radius:4px;
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
}
.nav__left{display:flex; align-items:center; gap:28px}
.nav__links a{color:#e9e0d6; text-decoration:none; opacity:.9; margin-right:18px; font-size:14px;}
.nav__links a:hover{opacity:1}
.nav__links .muted{color:#a79a8c}
.tag{font-family:"Space Mono", monospace; font-size:10px; border:1px solid #3b342e; padding:2px 6px; border-radius:4px; margin-left:6px; opacity:.9}
.tag--ghost{border-color:#3b342e}
.btn{background: linear-gradient(180deg, var(--sand), var(--sand-2)); color:#1b120a; border:none; padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none; box-shadow: 0 10px 24px var(--shadow);}
.btn--ghost{background: transparent; color:#efe5da; border:1px solid #3b342e; box-shadow:none;}
.menu{display:none; background:none; border:0}
.menu span{display:block; width:18px; height:2px; background:#8f7d69; margin:3px 0}

.hero{
  position:relative; overflow:clip; border-bottom:1px solid #2a201b;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to left, rgba(15,13,12,0) 0%, rgba(15,13,12,.55) 40%, rgba(15,13,12,1) 65%),
    url("/static/img/hero-bg.png");
  background-position: right center, right center;
  background-size: auto 100%, auto 100%;
  background-repeat: no-repeat, no-repeat;
  opacity:.96; pointer-events:none; z-index:0;
  border-bottom: 2px solid rgba(216,184,143,.65);
}
.hero::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:64px; z-index:1;
  background: linear-gradient(to bottom, rgba(216,184,143,0) 0%, rgba(216,184,143,.08) 45%, rgba(216,184,143,.22) 100%);
  pointer-events:none;
}
.hero__grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns: 1.05fr .95fr; gap:40px;
  padding:84px 0 56px; min-height: 520px; align-items:center;
}
.crumb{font-family:"Space Mono", monospace; letter-spacing:.1em; color:#d7c3a9; font-size:12px; opacity:.85;}
h1{ margin:.6rem 0 1.1rem; font-size:52px; line-height:1.04; letter-spacing:-.01em; text-shadow:none; }
h2{ font-size:30px; margin:.2rem 0 1.2rem }
.muted{color:#a99b8d}
.about{margin-top:26px; max-width:640px}
.about p{color:#efe6db}
.hero__art{display:flex; justify-content:flex-start; align-items:center}

.hero-img{
  width: 260px; max-width:100%; height:auto; display:block;
  filter:none;
  transform: translateX(8%);
  animation: floatY 8s ease-in-out infinite;
}
@keyframes floatY{
  0%,100% { transform: translateX(8%) translateY(-8px); }
  50%      { transform: translateX(8%) translateY(8px); }
}

.panel.sand{
  background: linear-gradient(180deg, rgba(216,184,143,.96), rgba(155,124,90,.96));
  color:#1b120a; border-top:1px solid #d7be9b; border-bottom:1px solid #9c7d5b;
  padding:54px 0 40px; margin-top:-1px;
}
.panel.sand .crumb{color:#2a1a0a}
.panel.sand h2{color:#1b120a}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-top:20px;}
.card{ background: rgba(255,255,255,.14); border:1px solid rgba(0,0,0,.14); padding:24px 22px; border-radius: var(--radius-xl); min-height:200px; box-shadow: 0 40px 60px rgba(0,0,0,.12) inset, 0 8px 18px rgba(0,0,0,.08); }
.card__icon{ height:90px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.card__icon img{max-height:72px; max-width:100%; width:auto; height:auto; object-fit:contain; display:block}
.card h3{margin:6px 0 8px; font-size:18px}
.card p{margin:0; color:#2d2318}

.otc{
  margin-top:26px; padding:22px; border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.66));
  color:#e8dcca; border:1px solid rgba(0,0,0,.25);
  position:relative; overflow:hidden;
}
.otc:before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 150px at 80% 20%, rgba(255,255,255,.05), transparent 60%),
              repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
  opacity:.5; pointer-events:none;
}

.section{padding:56px 0}
.section .section__header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;}

.team{margin-top:20px; display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;}
.person{ background:var(--card); border:1px solid var(--border); border-radius: var(--radius-xl); padding:14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.25); }

.person .avatar{
  height:170px;
  border-radius:12px;
  overflow:hidden;
  background:#201813;
}
.person .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(0.9) contrast(0.95);
}

.person .name{margin-top:10px; font-weight:700}
.person .role{color:#bfa688}
.person .meta{color:#786d61; font-size:14px}

.partners__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0;
  align-items:center;
}
.partners__copy{ padding-right:28px; }
.logos{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:0;
  row-gap:18px;
  padding-left:0;
}
.logo-tile{
  background:#0f0c0b; border:1px solid var(--border); border-radius:12px;
  padding:22px 16px; text-align:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  min-height:84px;
  margin:0;
}
.logos .logo-tile:nth-child(odd){  margin-right:14px; }
.logos .logo-tile:nth-child(even){ margin-left:14px; }
.logo-tile img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:42px;
  margin:0 auto;
  image-rendering: -webkit-optimize-contrast;
}

.footer{border-top:1px solid #231c19; padding:36px 0 70px;}
.footer__grid{display:grid; grid-template-columns: 1.1fr 1fr; gap:24px;}
.footer__brand{display:flex; align-items:center; justify-content:space-between}
.footer__cols{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.footer a{color:#efe6db; text-decoration:none}
.footer ul{padding-left:0; list-style:none; margin:8px 0 0}
.footer li{margin:6px 0}

.card, .person, .logo-tile, .otc, .hero__content, .hero__art {opacity:0; transform:translateY(16px); transition:.7s ease;}
.card.in, .person.in, .logo-tile.in, .otc.in, .hero__content.in, .hero__art.in {opacity:1; transform:none;}

a:hover{filter:brightness(1.06)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

@media (max-width: 1080px){
  .hero__grid{grid-template-columns: 1fr 1fr}
  h1{font-size:46px}
}

@media (max-width: 880px){
  .hero__grid{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 72px 0 40px;
    min-height: unset;
  }
  .hero__art{ justify-content: center; }
  .hero-img{
    width: 72%;
    transform: none;
    animation: floatYMobile 9s ease-in-out infinite;
  }
  .hero::after{display:none}

  h1{ font-size: clamp(32px, 6.2vw, 40px); line-height: 1.12; }

  .cards{ grid-template-columns: 1fr; }
  .card{ min-height: auto; }

  .team{ grid-template-columns: 1fr 1fr; }

  .partners__grid{ grid-template-columns: 1fr; }
  .partners__copy{ padding-right: 0; margin-bottom: 18px; }
  .logos{
    padding-left: 0;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 14px;
  }
  .logos .logo-tile{ margin: 0 !important; }
  .logo-tile img{ max-height: 36px; }

  .footer__grid{ grid-template-columns: 1fr; }
}

@keyframes floatYMobile{
  0%,100% { transform: translateY(-8px); }
  50%      { transform: translateY(8px); }
}

@media (max-width: 560px){
  .nav__links{display:none}
  .team{ grid-template-columns: 1fr; }
  .partners__grid{ grid-template-columns:1fr; }
  .bg-grid{ display:none; }

  #community{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .hero-img{ animation:none !important; transform:none !important; }
}

.otc p a {
  color: var(--sand);
  text-decoration: underline;
  font-weight: 600;
}

.otc p a:hover,
.otc p a:focus {
  color: var(--text);
  text-decoration: underline;
}

.otc .btn--ghost {
  color: var(--sand);
  border-color: var(--sand-2);
  text-decoration: none;
}

.otc .btn--ghost:hover {
  color: var(--text);
  border-color: var(--text);
}

@media (max-width: 560px){
  .nav__links{
    display:flex !important;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    white-space:nowrap;
  }
  .nav__links a{
    display:none !important;
  }

  .nav__links a.nav-api{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    line-height:1;
    white-space:nowrap;
    border:1px solid #3b342e;
    border-radius:12px;
    text-decoration:none;
    color:#efe5da;
    font-size:14px;
    font-weight:600;
    background:rgba(0,0,0,.2);
  }

  .nav__row{ gap:10px; }
  .nav__left{ gap:12px; min-width:0; }
  .brand{ flex:0 1 auto; }
  .nav__right .btn{ padding:8px 12px; font-size:14px; }
}

.nav__right .btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 12px;
}

.nav__right .btn .tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
}

@media (max-width: 560px){
  .nav__right .btn{
    padding: 8px 12px;
    font-size: 14px;
  }
}