/* ============================================================
   dikki — a desk of pixel agents trading real perpetuals
   ============================================================ */

:root{
  --bg:        #08090a;
  --bg-2:      #0b0c0e;
  --panel:     #0e1013;
  --panel-2:   #121519;

  --ink:       #f3f4f6;
  --ink-2:     #9ba1a9;
  --ink-3:     #6b7178;
  --ink-4:     #454a51;

  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --line-3:    rgba(255,255,255,.24);

  --blue:      #6ec6f0;
  --blue-dim:  rgba(110,198,240,.12);
  --red:       #e8434a;
  --red-dim:   rgba(232,67,74,.12);
  --green:     #45d18a;
  --green-dim: rgba(69,209,138,.12);
  --pink:      #f2a4b6;

  --display: 'Anton', 'Inter', sans-serif;
  --sans:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:rgba(110,198,240,.3) }

*::-webkit-scrollbar{ width:9px; height:9px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:99px }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.up{ color:var(--green) } .down{ color:var(--red) } .dim{ color:var(--ink-3) }

.eyebrow{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line-2); border-radius:99px;
  padding:3px 10px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
  white-space:nowrap;
}
.pill--blue{ border-color:rgba(110,198,240,.35); color:var(--blue); background:var(--blue-dim) }
.pill--green{ border-color:rgba(69,209,138,.35); color:var(--green); background:var(--green-dim) }
.pill--red{ border-color:rgba(232,67,74,.35); color:var(--red); background:var(--red-dim) }

.dot{ width:6px; height:6px; border-radius:99px; background:currentColor; flex:none }
.dot--pulse{ animation:pulse 2s var(--ease) infinite }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:10px;
  border:1px solid var(--line-2);
  font-size:13.5px; font-weight:500;
  transition:.18s var(--ease);
}
.btn:hover{ border-color:var(--line-3); background:rgba(255,255,255,.05) }
.btn--primary{
  background:var(--ink); color:#08090a; border-color:transparent; font-weight:600;
}
.btn--primary:hover{ background:#fff; color:#08090a }
.btn svg{ width:15px; height:15px }

/* ============================================================
   topbar
   ============================================================ */

.topbar{
  position:sticky; top:0; z-index:70;
  background:rgba(8,9,10,.8);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.topbar__in{ display:flex; align-items:center; gap:22px; height:60px }

.brand{ display:flex; align-items:center; gap:9px; flex:none }
.brand img{ width:26px; height:26px; image-rendering:pixelated }
.brand b{ font-size:15px; font-weight:700; letter-spacing:-.01em }

.nav{ display:flex; gap:2px }
.nav a{
  padding:6px 12px; border-radius:8px;
  font-size:13.5px; color:var(--ink-3);
  transition:.16s var(--ease);
}
.nav a:hover{ color:var(--ink); background:rgba(255,255,255,.05) }

.topbar__right{ margin-left:auto; display:flex; align-items:center; gap:10px }

.ca{
  display:flex; align-items:center; gap:8px;
  padding:5px 6px 5px 10px;
  border:1px solid var(--line); border-radius:9px;
  background:rgba(255,255,255,.02);
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
  max-width:330px;
}
.ca__k{ color:var(--ink-4); letter-spacing:.14em; text-transform:uppercase; font-size:9.5px; flex:none }
.ca__v{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ca__copy{
  flex:none; padding:3px 8px; border-radius:6px;
  border:1px solid var(--line-2);
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  transition:.16s var(--ease);
}
.ca__copy:hover{ color:var(--ink); border-color:var(--line-3) }

.iconbtn{
  width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:8px; color:var(--ink-3);
  transition:.16s var(--ease);
}
.iconbtn:hover{ color:var(--ink); border-color:var(--line-3); background:rgba(255,255,255,.05) }
.iconbtn svg{ width:14px; height:14px }

/* ============================================================
   hero
   ============================================================ */

.hero{ position:relative; padding-top:0; overflow:hidden }

.swarm{
  position:relative;
  height:340px;
  display:grid;
  grid-template-columns:repeat(auto-fill, 46px);
  grid-auto-rows:46px;
  justify-content:center;
  gap:2px;
  padding-top:10px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 88%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 88%);
}
.swarm img{
  width:100%; height:100%;
  image-rendering:pixelated;
  opacity:.5;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.swarm img:hover{ opacity:1; transform:scale(1.18) }

.hero__body{ position:relative; padding:0 0 64px; margin-top:-56px }
.wordmark{
  font-family:var(--display);
  font-size:clamp(80px, 15vw, 210px);
  line-height:.86;
  /* Anton is already condensed — a negative trackings welds the letters into a slab */
  letter-spacing:.03em;
  margin:0;
  color:var(--ink);
  text-transform:uppercase;
}
.hero__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-top:26px }
.hero__lede{ font-size:16px; line-height:1.6; color:var(--ink-2); max-width:42ch; margin:0 }
.hero__cta{ display:flex; gap:10px; flex-wrap:wrap }

/* ============================================================
   sections
   ============================================================ */

.section{ padding:88px 0; border-top:1px solid var(--line) }
.h2{
  font-size:clamp(28px, 3.6vw, 44px);
  line-height:1.1; letter-spacing:-.03em; font-weight:700;
  margin:14px 0 0; max-width:16ch;
}
.lede{ font-size:15px; line-height:1.7; color:var(--ink-2); max-width:52ch; margin:20px 0 0 }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start }

.stats{ display:flex; gap:34px; margin-top:32px; flex-wrap:wrap }
.stat__v{ font-family:var(--mono); font-size:26px; letter-spacing:-.02em }
.stat__k{ font-size:11.5px; color:var(--ink-3); margin-top:2px }

/* live price panel */
.board{ border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden }
.board__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 16px; border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:600;
}
.board__row{
  display:grid; grid-template-columns:34px 62px 1fr auto 14px;
  align-items:center; gap:12px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:.16s var(--ease);
}
.board__row:last-child{ border-bottom:0 }
.board__row:hover{ background:rgba(255,255,255,.025) }
.board__ico{
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); font-size:13px;
}
.board__sym{ font-family:var(--mono); font-size:12px; font-weight:500 }
.board__name{ font-size:13px; color:var(--ink-3) }
.board__px{ font-family:var(--mono); font-size:13px }
.board__tick{ width:6px; height:6px; border-radius:99px; background:var(--ink-4); transition:.3s var(--ease) }
.board__tick.is-up{ background:var(--green) } .board__tick.is-down{ background:var(--red) }

/* marquee */
.marquee{ overflow:hidden; padding:14px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
.marquee__track{ display:flex; gap:10px; width:max-content; animation:slide 46s linear infinite }
.marquee:hover .marquee__track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }
.chip{
  display:flex; align-items:center; gap:9px;
  padding:8px 14px; border:1px solid var(--line); border-radius:99px;
  background:var(--panel); white-space:nowrap;
}
.chip__sym{ font-family:var(--mono); font-size:11.5px; font-weight:500 }
.chip__px{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3) }
.chip i{ width:5px; height:5px; border-radius:99px; background:var(--ink-4) }

/* anatomy */
.fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px }
.field{
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:20px; transition:.18s var(--ease);
}
.field:hover{ border-color:var(--line-2); background:var(--panel-2) }
.field__k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue) }
.field__v{ font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:12px }
.field__d{ font-size:13px; line-height:1.6; color:var(--ink-3); margin-top:8px }

/* rules */
.rules{ display:flex; flex-direction:column; gap:1px; margin-top:40px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--line) }
.rule{
  display:grid; grid-template-columns:150px 1fr 190px; gap:24px; align-items:baseline;
  padding:20px 22px; background:var(--panel);
  transition:.18s var(--ease);
}
.rule:hover{ background:var(--panel-2) }
.rule__n{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--blue) }
.rule__t{ font-size:14.5px; font-weight:600; margin-bottom:5px }
.rule__d{ font-size:13px; color:var(--ink-3); line-height:1.6 }
.rule__m{ font-family:var(--mono); font-size:11.5px; color:var(--ink-4); text-align:right }

/* vault */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px }
.step{ border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:24px }
.step__n{ font-family:var(--mono); font-size:11px; color:var(--blue); letter-spacing:.18em }
.step h3{ font-size:17px; font-weight:600; letter-spacing:-.02em; margin:16px 0 8px }
.step p{ font-size:13.5px; line-height:1.65; color:var(--ink-3); margin:0 }

/* dimensions */
.dims{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:40px }
.dim{ border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:20px }
.dim__k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4) }
.dim__v{ font-size:14px; margin-top:10px; line-height:1.6 }
.dim__v b{ color:var(--blue); font-weight:500 }

.note{
  margin-top:34px; padding:20px 22px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  font-size:13.5px; line-height:1.7; color:var(--ink-2);
}

/* footer */
.footer{ border-top:1px solid var(--line); padding:44px 0 54px }
.footer__in{ display:flex; gap:40px; justify-content:space-between; flex-wrap:wrap }
.footer__brand{ max-width:300px }
.footer__brand img{ width:34px; height:34px; image-rendering:pixelated; margin-bottom:12px }
.footer__brand p{ font-size:12.5px; color:var(--ink-4); line-height:1.65; margin:8px 0 0 }
.footer__cols{ display:flex; gap:56px; flex-wrap:wrap }
.footer__col h4{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); margin:0 0 12px; font-weight:400 }
.footer__col a{ display:block; font-size:13px; color:var(--ink-3); padding:4px 0; transition:.16s var(--ease) }
.footer__col a:hover{ color:var(--blue) }
.footer__ca{ margin-top:30px }
.footer__bottom{
  margin-top:32px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11.5px; color:var(--ink-4);
}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width:1000px){
  .split{ grid-template-columns:1fr; gap:36px }
  .fields, .steps{ grid-template-columns:repeat(2,1fr) }
  .rule{ grid-template-columns:120px 1fr; }
  .rule__m{ grid-column:2; text-align:left }
  .nav{ display:none }
  .ca{ max-width:210px }
}
@media (max-width:680px){
  .wrap{ padding-inline:16px }
  .section{ padding:56px 0 }
  .fields, .steps{ grid-template-columns:1fr }
  .swarm{ height:220px; grid-template-columns:repeat(auto-fill, 38px); grid-auto-rows:38px }
  .hero__body{ margin-top:-30px }
  .ca{ display:none }
  .topbar__in{ gap:12px }
  .rule{ grid-template-columns:1fr; gap:6px }
  .rule__m{ grid-column:1 }
  .board__row{ grid-template-columns:30px 54px 1fr auto 12px; gap:9px; padding:11px 13px }
  .board__name{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}