:root{
  --bg:#0b111a; /* night sky */
  --panel:#111a26;
  --muted:#8aa0b5;
  --text:#e6edf6;
  --brand:#00d1ff; /* afterburner cyan */
  --brand-2:#ff3b3b; /* missile red */
  --accent:#ffc14d; /* visor gold */
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --header-h:64px;
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:linear-gradient(180deg,#0b111a 0%, #0b111a 40%, #0e1520 100%);
  color:var(--text);
  font:400 16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,'Inter',Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.container{max-width:1160px;margin:0 auto;padding:0 20px}

/* Header / Nav */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,17,26,.65);
  border-bottom:1px solid rgba(138,160,181,.15);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  padding-top:env(safe-area-inset-top);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h)}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.logo img{width:36px;height:36px;border-radius:8px}

nav ul{
  display:flex;gap:22px;list-style:none;margin:0;padding:0;
  align-items:center;flex-wrap:nowrap;overflow:auto;
  -webkit-overflow-scrolling: touch; scrollbar-width:none;
}
nav ul::-webkit-scrollbar{display:none}
nav a{color:var(--text);opacity:.9;white-space:nowrap}
nav a:hover{opacity:1}

.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;padding:12px 18px;font-weight:700;
  transition:.2s transform,.2s box-shadow;
  background:linear-gradient(90deg,var(--brand),#7ef9ff);
  color:#001018;box-shadow:0 8px 24px rgba(0,209,255,.2)
}
.cta:hover{transform:translateY(-1px)}
.cta.secondary{
  background:linear-gradient(90deg,#202b3a,#1a2432);
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(138,160,181,.2)
}

/* Hero */
.hero{padding:72px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.badge{
  display:inline-flex;gap:8px;align-items:center;
  border-radius:999px;padding:6px 12px;
  background:#0f1724;border:1px solid rgba(138,160,181,.25);
  color:var(--muted);font-size:13px
}
h1{font-size:clamp(32px,4.6vw,56px);line-height:1.08;margin:14px 0}
.lead{font-size:clamp(16px,2.1vw,20px);color:#c6d4e3}
.hero-card{
  background:radial-gradient(120% 140% at 20% 10%, rgba(0,209,255,.18) 0%, rgba(0,0,0,.0) 45%), var(--panel);
  border:1px solid rgba(138,160,181,.18);
  border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)
}
.card-title{margin:0 0 8px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.stat{
  background:#0e1622;border:1px solid rgba(138,160,181,.16);
  padding:14px;border-radius:14px;text-align:center
}
.stat .n{font-size:20px;font-weight:800}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* Sections */
section{padding:64px 0;border-top:1px solid rgba(138,160,181,.15)}
h2{font-size:clamp(24px,3.4vw,38px);margin:0 0 20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--panel);
  border:1px solid rgba(138,160,181,.16);
  border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)
}
.tokenomics .kpi{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-radius:12px;
  background:#0e1622;border:1px dashed rgba(138,160,181,.25)
}
.chip{
  display:inline-flex;gap:8px;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:#0e1622;border:1px solid rgba(138,160,181,.18);
  font-size:13px;color:#c6d4e3
}

/* How to buy */
.how ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.how li{
  display:flex;gap:12px;background:#0e1622;
  border:1px solid rgba(138,160,181,.18);
  border-radius:12px;padding:14px
}
.step{
  width:28px;height:28px;border-radius:50%;
  background:var(--brand);color:#001018;
  display:grid;place-items:center;font-weight:800
}

/* Roadmap */
.roadmap .lane{position:relative;padding-left:24px}
.roadmap .lane:before{
  content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;
  background:linear-gradient(var(--brand), transparent)
}
.rm-item{
  margin:12px 0;padding:12px 14px;background:#0e1622;
  border:1px solid rgba(138,160,181,.18);border-radius:12px
}

/* Utilities */
.flex{display:flex;gap:16px;flex-wrap:wrap}

/* Address row – mobilně přívětivé chování */
.address{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.address code{
  flex:1 1 auto;          /* dovolí zmenšit šířku */
  min-width:0;             /* nutné pro ellipsis ve flex konteineru */
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;      /* držet v jednom řádku, zbytek ellipsis */
  background:#0e1622;
  border:1px solid rgba(138,160,181,.18);
  padding:8px 10px;
  border-radius:8px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:0.95em;
}
.address .cta{flex:0 0 auto}

.note{color:#a7bbcf}
.disclaimer{margin-top:12px;color:#a7bbcf;font-size:14px}
.sp-12{height:12px}
.sp-16{height:16px}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.gallery img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(138,160,181,.18);
  animation:float 3s ease-in-out infinite;
  will-change:transform;
  transform:translateZ(0);
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.gallery img:hover{animation-duration:2.4s;transform:translateY(-3px)}
@media (prefers-reduced-motion: reduce){
  .gallery img{animation:none !important;transform:none !important}
}

/* Footer + counters */
footer{padding:40px 0;color:#a7bbcf}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.footer-logo{margin-bottom:8px}
.to-top{text-align:right}

.foot-right{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.counters{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.counter-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#0e1622;border:1px solid rgba(138,160,181,.18);
  padding:6px 10px;border-radius:999px;
  font-size:13px;color:#c6d4e3
}
.counter-badge .label{color:#a7bbcf}

/* =============== Responsive Tweaks =============== */
@media (max-width: 1024px){
  .container{padding:0 16px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  section{padding:56px 0}
}
@media (max-width: 768px){
  .hero{padding:56px 0 32px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hero-card{padding:18px}
  .cta{padding:12px 16px}
  nav ul{gap:14px}
  .nav{align-items:flex-start}
  section{padding:52px 0}
}
@media (max-width: 640px){
  html{font-size:15px}
  .container{padding:0 14px}
  h1{font-size:clamp(26px,8.2vw,38px)}
  .lead{font-size:15px}
  .badge{font-size:12px;padding:5px 10px}
  .nav{display:grid;grid-template-columns:auto 1fr;grid-auto-rows:auto;row-gap:8px}
  nav{grid-column:1 / -1}
  nav ul{gap:14px;overflow-x:auto;margin:0 -14px;padding-left:14px;padding-bottom:6px}
  .nav .cta{grid-column:1 / -1;width:100%}
  .buttons .cta{flex:1 1 100%}
  .stat-row{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery img{aspect-ratio:4/3}

  /* jemné vyblednutí konce hash na mobilu */
  .address code{
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right:12px;
  }

  .foot-right{align-items:flex-start}
  .counters{justify-content:flex-start}
  section{padding:46px 0}
}
@media (max-width: 480px){
  .logo img{width:32px;height:32px}
  .gallery{grid-template-columns:1fr}
  .gallery img{aspect-ratio:4/3}
  .cta{padding:11px 14px}
  .chip{font-size:12px;padding:5px 9px}
  .badge{font-size:11px}
  section{padding:42px 0}
  .footer-grid{grid-template-columns:1fr}
  .to-top{text-align:left}
}