*{box-sizing:border-box}html,body{height:100%}body{
  margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#0a0a0a;line-height:1.5;background:#fff;overflow-x:hidden;
}
:root{ --ink:#0a0a0a; --card: rgba(255,255,255,.95); --radius:22px; --shadow:0 8px 24px rgba(0,0,0,.12); }
.bg{position:fixed;inset:0;background:url('assets/cowhide-uhd.png') center center / cover no-repeat;z-index:-1;}
.container{max-width:1100px;margin:0 auto;padding:20px}
header.container{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;object-fit:contain}
.title{font-weight:800;letter-spacing:.4px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;opacity:.9}
.nav .cta{padding:8px 14px;border-radius:999px;background:#111;color:#fff}
.menu{display:none;border:1px solid #000;border-radius:12px;background:#fff;padding:6px 10px}

.translucent{ background:rgba(255,255,255,0.95); border-radius:24px; box-shadow:var(--shadow); padding:16px; }

.hero-inline{display:flex;align-items:center;gap:24px;margin-top:14px}
.hi-coin img{width:110px;height:auto;display:block;}
.card{background:var(--card);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;}
h1{font-size:44px;line-height:1.1;margin:0 0 8px;font-weight:900}
h2{font-size:28px;margin:0 0 12px}
p{margin:8px 0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.actions.center{justify-content:center}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid rgba(0,0,0,0.18);text-decoration:none;color:#111;font-weight:700;background:rgba(255,255,255,0.96);transition:all .2s ease;}
.btn.primary{background:#111;color:#fff;border-color:#111;}
.btn.big{padding:14px 22px;font-size:16px}

.tile-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px;}
.tile-grid .tile > section{ background: transparent; border: 0; box-shadow: none; padding: 0; }

.video-section{ margin-top: 14px; }
.video-wrap{ position:relative; width:100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow:hidden; }
.video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; pointer-events:none; }

.timeline{ list-style:none; margin:16px 0 0; padding:0; position:relative; }
.timeline li{ display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:flex-start; margin:18px 0; }
.tl-dot{ width:14px; height:14px; border-radius:50%; background:#111; display:inline-block; position:relative; top:8px; }
.tl-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:12px 14px; }
.tl-card h3{ margin:0 0 4px; font-size:18px; }

.foot{text-align:center;opacity:.9;margin-top:24px}

.mobile-nav{display:none;position:absolute;left:16px;right:16px;top:68px;background:rgba(255,255,255,0.96);border:1px solid rgba(0,0,0,0.08);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:12px;flex-direction:column;gap:10px;z-index:5;}

@media (max-width:900px){ .hero-inline{gap:14px} .tile-grid{ grid-template-columns: 1fr; } }
@media (max-width:760px){ .nav{display:none} .menu{display:block} h1{font-size:36px} }

/* Center 'Join the Herd' tile under the two tiles */
#tile-community{ grid-column: 1 / -1; }
#tile-community .tile, #tile-community section{ margin: 0 auto; }
#tile-community .actions.center{ justify-content:center; }
#tile-community{ max-width: 760px; margin-left:auto; margin-right:auto; }

/* Make the looping video a bit smaller on desktop */
@media (min-width: 901px){
  .video-section .video-wrap{ max-width: 880px; margin: 0 auto; }
}
@media (min-width: 1200px){
  .video-section .video-wrap{ max-width: 980px; }
}


/* v25 override: slightly smaller video on desktop */
@media (min-width: 901px){
  .video-section .video-wrap{ max-width: 720px; margin: 0 auto; }
}
@media (min-width: 1200px){
  .video-section .video-wrap{ max-width: 800px; }
}