@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root{
  --ink:#0B0820;
  --ink-2:#150F30;
  --sisal:#212E1C;
  --sisal-2:#2B3A24;
  --chalk:#F1ECDD;
  --chalk-dim:#B9B2A0;
  --gold:#FFC531;
  --cyan:#22E0FF;
  --lime:#2BFF8C;
  --rose:#FF3B6B;
  --violet:#6B4BD6;
  --violet-line:#4A3C86;
  --dark: #0d0f12;
  --dark2: #161920;
  --text: #f0f2f5;
  --text2: #a8b2be;
  --text3: #6b7684;
  --border: rgba(255, 255, 255, 0.07);
  --font-head: 'Barlow Condensed', sans-serif;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--chalk);font-family:var(--body);
  font-size:16px;line-height:1.55;
  background-image:radial-gradient(90% 55% at 50% 0%,var(--ink-2) 0%,transparent 60%);
  background-attachment:fixed;
}
a {
    color: inherit;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
/* -- HEADER -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13,15,18,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(1rem,4vw,3rem);
}
.header-inner {
  max-width: 1120px; margin: 0 auto;
  height: 60px;
}
.header-inner .logo img {
	max-width:200px;
	height:auto;
	margin-top:5px;
	}
.site-header nav ul {
  float: right;
  margin-right: 20px;
}

.site-header nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

.site-header nav ul li a {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0 1rem;
  height: 60px; display: flex; align-items: center;
  border-bottom: 3px solid transparent;
  text-decoration:none;
  transition: color 0.2s, border-color 0.2s;
  color: var(--text2);
  text-transform: uppercase;
}

.site-header nav a.active,
.site-header nav a:hover {
   color: var(--text); border-bottom-color: var(--gold);
}

.site-header nav .checkbtn {
  font-size: 22px;
  color: white;
  float: right;
  line-height: 55px;
  margin-right: 18px;
  cursor: pointer;
  display: none;
}

.site-header nav #check {
  display: none;
}


/* Responsive media query code for small screen */
@media (max-width: 767px) {
  .site-header nav .checkbtn {
    display: block;
  }

  .site-header nav label.logo {
    font-size: 22px;
  }

  .site-header nav ul {
 	background:var(--sisal);
    position: fixed;
    width: 100%;
    /*height: 100vh;*/
    top: 60px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  .site-header nav ul li {
    display: block;
    /*margin: 50px 0;*/
    line-height: 30px;
  }
  .site-header nav a:hover,
  .site-header nav a.active {
    background: none;
  }

  .site-header nav #check:checked~ul {
    left: 0;
  }
}
/* -- BREADCRUMB -- */
.breadcrumb {
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  padding: 0.65rem clamp(1rem,4vw,3rem);
}
.breadcrumb-inner {
  max-width: 1120px; margin: 0 auto;
  font-size: 12.5px; color: var(--text3);
  display: flex; align-items: center; gap: 0.5rem;
}
.breadcrumb-inner a { color: var(--text2); text-decoration:none }
.breadcrumb-inner a:hover { color: var(--text3); }
.breadcrumb-sep { color: var(--text2); opacity: 0.4; }

img {max-width:100%; height:auto}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:10px 16px;z-index:100;font-weight:700}
.skip:focus{left:16px;top:16px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- topbar ---------- */

.breadcrumb .here, .crumb .here{color:var(--gold)}
.brandmark{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chalk-dim);border:1px solid var(--violet-line);padding:6px 12px}
.brandmark b{color:var(--gold)}

/* ---------- hero ---------- */
.hero{padding:56px 0 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:40px;align-items:center}
.hero-copy .eyebrow, header.hero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;display:block}
.hero h1{font-family:var(--cond);font-weight:800;font-size:clamp(40px,6.4vw,68px);line-height:.98;letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--chalk) 0%,var(--chalk) 55%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin-top:18px;font-size:18px;line-height:1.6;color:#D7D0E8;max-width:62ch}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.02em;padding:14px 22px;
  border:1px solid var(--violet-line);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s ease,box-shadow .15s ease}
.btn.primary{background:linear-gradient(100deg,var(--gold),#FF9F1C);color:#26060F;border-color:transparent}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px -12px rgba(255,197,49,.55)}
.btn.ghost{color:var(--chalk);background:transparent}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}

.hero-board{position:relative}
.hero-board svg{width:100%;height:auto;overflow:visible}
.dseg{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.72);
  animation:wedgeIn .5s cubic-bezier(.2,.8,.2,1) forwards}
.dwire{fill:none;stroke:var(--ink);stroke-width:1.6;animation:wireDraw .7s ease forwards}
.dbull{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.5);
  animation:wedgeIn .45s cubic-bezier(.2,.8,.2,1) forwards}
.dnum{font-family:var(--cond);font-weight:700;font-size:15px;fill:var(--chalk);
  opacity:0;transform:translateY(4px);animation:numIn .4s ease forwards}
@keyframes wedgeIn{to{opacity:1;transform:scale(1)}}
@keyframes wireDraw{to{stroke-dashoffset:0}}
@keyframes numIn{to{opacity:1;transform:translateY(0)}}

/* ---------- number-ring divider (signature motif: real board throwing order) ---------- */
.ringdiv{border-top:1px solid var(--violet-line);border-bottom:1px solid var(--violet-line);
  padding:14px 0;overflow:hidden;background:var(--ink-2)}
.ringdiv .track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:ringScroll 46s linear infinite}
.ringdiv span{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--chalk-dim);padding:0 14px;
  border-right:1px solid var(--violet-line)}
.ringdiv span.hi{color:var(--gold);font-weight:700}
@keyframes ringScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ringdiv[data-label]{position:relative}
.ringdiv .rd-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet-line);text-align:center;padding-bottom:6px}

/* ---------- sections ---------- */
section.block{padding:56px 0}
.block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.block-head h2{font-family:var(--cond);font-weight:700;font-size:clamp(26px,3.4vw,36px);letter-spacing:.01em}
.block-head p{color:var(--chalk-dim);font-size:15px;max-width:52ch}

.grid{display:grid;gap:14px}
.grid.tools{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.ref{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.card{background:var(--sisal);border:1px solid #3A4A32;padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,background .18s ease}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.card:hover{transform:translateY(-4px);border-color:var(--accent,var(--cyan));background:var(--sisal-2)}
.card:hover::before{transform:scaleX(1)}
.card .head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,var(--cyan));
  padding-top:3px}
.card h3{font-family:var(--cond);font-weight:700;font-size:23px;letter-spacing:.01em}
.card p{font-size:14.5px;color:#CFC9BC;flex:1}
.card .go{font-family:var(--mono);font-size:12px;color:var(--chalk-dim);display:flex;align-items:center;gap:6px}
.card:hover .go{color:var(--accent,var(--cyan))}
.card.tools-card{--accent:var(--cyan)}
.card.ref-card{--accent:var(--gold)}
.card .status{flex:0 0 auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 7px;border:1px solid currentColor;white-space:nowrap}
.card .status.live{color:var(--lime)}
.card .status.soon{color:var(--chalk-dim)}

/* ---------- stat strip ---------- */
.statstrip{background:var(--ink-2);border-top:1px solid var(--violet-line);border-bottom:1px solid var(--violet-line);padding:40px 0}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 20px}
.stat{min-width:0}
.stat b{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(22px,2.6vw,32px);color:var(--gold);
  white-space:normal;overflow-wrap:break-word;line-height:1.15}
.stat span{font-size:12.5px;color:var(--chalk-dim);letter-spacing:.02em}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- footer ---------- */
footer{padding:40px 0 56px;border-top:1px solid var(--violet-line)}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer p{font-size:13px;color:var(--chalk-dim)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer nav a{font-family:var(--mono);font-size:12.5px;color:var(--chalk-dim);text-decoration:none;border-bottom:1px solid transparent}
footer nav a:hover{color:var(--cyan);border-color:var(--cyan)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:36px}
  .hero-board{order:-1;max-width:340px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .dseg,.dbull,.dnum{opacity:1!important;transform:none!important}
  .dwire{stroke-dashoffset:0!important}
  .reveal{opacity:1!important;transform:none!important}
}

/****FAQ ****/
details.faq{border-bottom:1px solid var(--violet-line);padding:14px 0}
details.faq summary{font-family:var(--cond);font-weight:700;font-size:17px;cursor:pointer;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:'+ ';color:var(--cyan)}
details.faq[open] summary::before{content:'- '}
details.faq p{margin-top:10px;color:var(--chalk-dim);font-size:14.5px}

.table-reponsive {
	overflow-x: auto;
	}