*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#0a0a0a;color:#e8e8e8}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,215,0,.08)}
.nav a{color:#d8c26a;text-decoration:none;margin:0 10px;font-weight:600;opacity:.9}
.brand{font-weight:800;color:#ffd700;font-size:20px;letter-spacing:.8px}
.cta{padding:10px 16px;border-radius:999px;border:1px solid #4b3b00;background:linear-gradient(180deg,#1a1500,#0e0b00);color:#ffd700;text-decoration:none;box-shadow:0 0 0 1px rgba(255,215,0,.2) inset}
.cta:hover{box-shadow:0 0 18px rgba(255,215,0,.25) inset,0 0 22px rgba(255,215,0,.08)}

.hero{display:grid;place-items:center;height:62vh;background:
radial-gradient(900px 400px at 60% 10%, rgba(255,215,0,.10) 0, rgba(255,215,0,0) 60%), 
radial-gradient(1200px 600px at 30% 90%, rgba(255,215,0,.06) 0, rgba(255,215,0,0) 60%);}
.hero h1{font-size:44px;margin:0 0 10px;color:#fff}
.hero p{color:#d8d8d8;margin:0 0 22px}
.cta-lg{font-size:14px;padding:12px 20px}

.section{padding:64px 20px;max-width:1100px;margin:0 auto}
.section h2{color:#ffd700;margin-top:0;font-size:28px}
.section h3.story{margin:6px 0 10px 0;color:#e8e8e8;opacity:.95}
.section p{color:#cfcfcf}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-3 .full{grid-column:1/-1;margin-bottom:8px}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,215,0,.08);padding:18px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}

.tok-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.tok-list{list-style:none;margin:0;padding:0}
.tok-list li{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,215,0,.14);padding:10px 0}
.tok-list span{color:#e6e6e6}.tok-list b{color:#ffd700}
.tok-img .pie{position:relative;width:260px;height:260px;border-radius:50%;
background: conic-gradient(#e8c547 0 75.8%, #b89621 75.8% 83.4%, #d4b235 83.4% 90.0%, #8f7720 90.0% 95.0%, #6e5a18 95.0% 100%);
box-shadow:0 0 0 3px rgba(0,0,0,.6), 0 12px 30px rgba(0,0,0,.4); margin:auto}
/* inner numeric labels */
.inlabel{position:absolute;font-weight:900;font-size:16px;color:#0b0b0b;text-shadow:0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.7);filter:brightness(1.1)}
/* positions roughly centered for each slice */
.i1{top:36%;left:60%}   /* 75.8% big sector */
.i2{top:12%;left:24%}   /* 7.6% */
.i3{top:60%;left:20%}   /* 6.6% */
.i4{bottom:24%;left:60%}/* 5.0% */
.i5{bottom:10%;right:18%}/* 5.0% */

.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.t-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,215,0,.08);padding:14px;border-radius:14px}
.t-item h4{color:#ffd700;margin:0 0 8px 0}

.team-grid .grid-3{gap:18px}
.member{background:rgba(255,255,255,.03);border:1px solid rgba(255,215,0,.08);border-radius:16px;padding:16px;text-align:center;transition:transform .2s ease, box-shadow .2s ease}
.member:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.member img{width:140px;height:140px;border-radius:50%;display:block;margin:8px auto 12px auto;
border:2px solid #d8b23c;box-shadow:0 6px 16px rgba(0,0,0,.35);
background:radial-gradient(60% 60% at 50% 40%, rgba(255,215,0,.15), rgba(0,0,0,0) 70%);
filter:drop-shadow(0 0 8px rgba(255, 215, 0, 0.4))}
.member h4{margin:0;color:#fff}
.member .role{margin:6px 0 2px 0;color:#e6e6e6}

.footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px;border-top:1px solid rgba(255,215,0,.08);max-width:1100px;margin:0 auto 30px}
.footer a{color:#d8c26a;text-decoration:none;margin-left:12px}
.socials a{margin-left:10px}

@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .tok-wrap{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}
}

/* ===== Barrel Section ===== */
.barrel-section{position:relative;padding-top:40px;padding-bottom:140px}
.barrel-floor{position:absolute;inset:auto 0 0 0;height:160px;background: linear-gradient(180deg, rgba(255,215,0,.06), rgba(255,215,0,0) 60%);pointer-events:none}
.barrel{position:relative;width:260px;margin:0 auto;filter: drop-shadow(0 20px 40px rgba(0,0,0,.75))}
.emitter{position:absolute;left:50%;transform:translateX(-50%);top:10px;width:120px;height:40px;pointer-events:none;overflow:visible}
.coin{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;
  background: radial-gradient(120% 120% at 30% 30%, #fff6d0 0%, #f1d075 40%, #d8b23c 68%, #a88318 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), inset 0 10px 18px rgba(0,0,0,.28), 0 10px 22px rgba(212,178,60,.25);
  will-change: transform, opacity, filter;
  animation: fly 5s linear forwards, spin 3s linear infinite;
  filter: saturate(1.05);
}
.coin::before{content:"OVT";position:absolute;inset:0;display:grid;place-items:center;font-weight:900;letter-spacing:.5px;color:#1a1a1a;text-shadow:0 1px 0 rgba(255,255,255,.28), 0 -1px 0 rgba(0,0,0,.35)}
@keyframes fly{0%{ transform: translate(-50%, 0) scale(1); opacity:1; }100%{ transform: translate(-50%, -82vh) scale(.8); opacity:0; }}
@keyframes spin{ from{ transform: translateX(-50%) rotate(0deg) } to{ transform: translateX(-50%) rotate(360deg) } }

/* Whitepaper */
.doc h1{font-size:34px;margin-top:0;color:#fff}
.lead{color:#dcdcdc;max-width:900px}
.table-wrap{overflow:auto;border-radius:12px;border:1px solid rgba(255,215,0,.08);background:rgba(255,255,255,.02);margin:14px 0 24px 0}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th,.table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,0,.08)}
.table thead th{background:rgba(255,215,0,.06);color:#ffe08a;text-align:left}
.table tfoot th{background:rgba(255,255,255,.03);text-align:left}
.bullets{line-height:1.7}
.numbered{list-style:decimal;padding-left:18px}
.nav a.active{color:#ffd700}

.tok-chart { width: 260px; height: auto; display: block; margin: auto; }

.tok-chart { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.45)); }

/* === Ticker Bar (English continuous) === */
.ticker{position:fixed;top:0;left:0;right:0;height:32px;overflow:hidden;background:#000;
border-bottom:1px solid rgba(255,215,0,.2);z-index:1000}
.ticker-wrap{position:relative;width:100%;height:100%;overflow:hidden}
.ticker-move{display:flex;height:100%;animation:ticker 25s linear infinite}
.ticker-item{flex:0 0 auto;padding:0 40px;line-height:32px;font-size:14px;color:#ffd700;
font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:4px}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
body{padding-top:32px}

.hero-subtitle {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid #FFD700;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #FFD700;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
  text-align: center;
}

.hero-subtitle {
  display: inline-block !important;
  padding: 14px 28px !important;
  border: 1px solid #FFD700 !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #FFD700 !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.4) !important;
  text-align: center !important;
}



/* === Disclaimer Section === */
.disclaimer {
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  padding: 40px 20px;
  border-top: 2px solid #FFD700;
  color: #FFD700;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
}
.disclaimer h2 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #FFD700;
}

.disclaimer .copyright {
  margin-top: 20px;
  font-size: 13px;
  color: #FFD700;
  opacity: 0.9;
}

/* === Disclaimer Box === */
.disclaimer {
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  padding: 40px 20px;
  text-align: center;
}
.disclaimer-box {
  display: inline-block;
  max-width: 800px;
  padding: 30px;
  border: 2px solid #FFD700;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #FFD700;
  text-align: center;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}
.disclaimer-box h2 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #FFD700;
}
.disclaimer-box p {
  font-size: 14px;
  line-height: 1.8;
}

/* === Whitepaper Section === */
.whitepaper {
  background: #111;
  padding: 60px 20px;
  color: #FFD700;
  text-align: left;
}
.whitepaper h2, .whitepaper h3 {
  color: #FFD700;
  margin-bottom: 15px;
}
.whitepaper p {
  margin-bottom: 20px;
  line-height: 1.8;
}
.whitepaper .tokenomics-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.whitepaper .tokenomics-table th, .whitepaper .tokenomics-table td {
  border: 1px solid #FFD700;
  padding: 8px 12px;
  text-align: center;
}
.whitepaper .tokenomics-table th {
  background: rgba(255, 215, 0, 0.1);
}

/* === Whitepaper Section Styling === */
.whitepaper {
  background: #222;
  padding: 60px 20px;
  color: #FFD700;
  text-align: left;
  border-top: 2px solid #FFD700;
  border-bottom: 2px solid #FFD700;
}
.whitepaper h2, .whitepaper h3 {
  color: #FFD700;
  margin-bottom: 15px;
}
.whitepaper p {
  margin-bottom: 20px;
  line-height: 1.8;
  color: #FFD700;
}
.whitepaper .tokenomics-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.whitepaper .tokenomics-table th, .whitepaper .tokenomics-table td {
  border: 1px solid #FFD700;
  padding: 8px 12px;
  text-align: center;
}
.whitepaper .tokenomics-table th {
  background: rgba(255, 215, 0, 0.1);
}


/* Whitepaper page styling */
.whitepaper {
  background: #222;
  padding: 60px 20px;
  color: #FFD700;
  text-align: left;
  border-top: 2px solid #FFD700;
  border-bottom: 2px solid #FFD700;
}
.whitepaper h2, .whitepaper h3 {
  color: #FFD700;
  margin-bottom: 15px;
}
.whitepaper p {
  margin-bottom: 20px;
  line-height: 1.8;
  color: #FFD700;
}
.whitepaper .tokenomics-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.whitepaper .tokenomics-table th, .whitepaper .tokenomics-table td {
  border: 1px solid #FFD700;
  padding: 8px 12px;
  text-align: center;
}
.whitepaper .tokenomics-table th {
  background: rgba(255, 215, 0, 0.1);
}