/* =========================================================
   ROBIN BROKERS — robinbroker.vip
   ========================================================= */

/* ---------- self-hosted fonts (latin subset, SIL OFL 1.1 — see README) ---------- */
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/anton-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jetbrainsmono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/jetbrainsmono-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/pressstart2p-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --lime:#CCFF00;
  --blue:#0163FA;
  --green:#00DC32;
  --amber:#FFB020;
  --ink:#000000;
  --paper:#FFFFFF;

  --bg:#050505;
  --bg-2:#0B0B0B;
  --line:#1E1E1E;
  --line-2:#2C2C2C;
  --txt:#EFEFEF;
  --dim:#8B8B8B;

  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --pixel:'Press Start 2P',var(--mono);

  --wrap:1180px;
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.94;text-transform:uppercase}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

::selection{background:var(--lime);color:#000}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:820px}
.muted{color:var(--dim)}
.hl{color:var(--lime)}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--lime);outline-offset:3px;border-radius:var(--r);
}

/* =========================================================
   TICKER TAPE
   ========================================================= */
.tape{
  position:relative;z-index:60;
  background:var(--lime);color:#000;
  border-bottom:2px solid #000;
  overflow:hidden;
  font-size:11px;letter-spacing:.14em;
}
.tape__track{display:flex;width:max-content;animation:tape 38s linear infinite}
/* NOTE: keep .tape__set non-flex — flex containers drop whitespace-only text
   nodes, which would eat the spaces between <b> and the words after it. */
.tape__set{flex:0 0 auto;padding:7px 0;white-space:nowrap}
.tape__set b{font-weight:700;margin-left:22px}
.tape__set i{font-style:normal;margin:0 22px 0 12px;opacity:.55}
@keyframes tape{to{transform:translateX(-50%)}}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:14px 24px;
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:padding .2s ease,background .2s ease;
}
.nav.is-stuck{padding:9px 24px;background:rgba(5,5,5,.95)}

.nav__brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:19px;letter-spacing:.02em;flex-shrink:0}
.nav__brand em{font-style:normal;color:var(--lime)}
.nav__logo{width:34px;height:34px;border:2px solid var(--lime);image-rendering:pixelated}

.nav__links{display:flex;gap:26px;margin-left:auto;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.nav__only-mobile{display:none} /* social/contact live in the icon row on desktop */
.nav__links a{position:relative;padding:4px 0;transition:color .18s}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--lime);transition:width .22s ease;
}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after{width:100%}

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

.iconbtn{
  display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--dim);
  transition:.18s;
}
.iconbtn:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-1px)}

.nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:36px;padding:0 8px;background:none;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer}
.nav__toggle span{display:block;height:2px;background:var(--txt);transition:.22s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border:2px solid var(--lime);border-radius:var(--r);
  color:var(--lime);background:transparent;
  transition:.2s ease;cursor:pointer;
}
.btn:hover{background:var(--lime);color:#000;transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(204,255,0,.35)}
.btn__arrow{transition:transform .2s ease}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--lime{background:var(--lime);color:#000}
.btn--lime:hover{background:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--lime)}
.btn--ghost{border-color:var(--line-2);color:var(--txt)}
.btn--ghost:hover{background:transparent;border-color:var(--paper);color:var(--paper);box-shadow:4px 4px 0 rgba(255,255,255,.18)}
.btn--sm{padding:10px 18px;font-size:11px}
.btn--full{width:100%;justify-content:center}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;overflow:hidden;padding:clamp(64px,11vw,132px) 24px clamp(56px,8vw,96px);border-bottom:1px solid var(--line)}
.hero__grid{
  position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(204,255,0,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(204,255,0,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 32%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 32%,#000 25%,transparent 78%);
}
.hero__glow{
  position:absolute;left:50%;top:-18%;transform:translateX(-50%);
  width:min(1000px,120vw);height:520px;
  background:radial-gradient(ellipse at center,rgba(1,99,250,.22),transparent 62%);
  filter:blur(24px);pointer-events:none;
}
.hero__inner{position:relative;max-width:var(--wrap);margin:0 auto;text-align:center}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;margin-bottom:30px;
  border:1px solid var(--line-2);border-radius:100px;
  font-size:10.5px;letter-spacing:.16em;color:var(--dim);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,220,50,.6);animation:pulse 2.2s infinite}
.dot--amber{background:var(--amber);box-shadow:0 0 0 0 rgba(255,176,32,.6)}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(0,220,50,0)}100%{box-shadow:0 0 0 0 rgba(0,220,50,0)}}

.hero__title{font-size:clamp(52px,12.5vw,158px);letter-spacing:-.005em}
.hero__title .line{display:block}
.hero__title .line--alt{
  color:transparent;
  -webkit-text-stroke:2px var(--lime);
  text-shadow:0 0 40px rgba(204,255,0,.18);
}
@supports not (-webkit-text-stroke:1px #000){.hero__title .line--alt{color:var(--lime)}}

.hero__sub{max-width:660px;margin:26px auto 0;color:#B9B9B9;font-size:15px;line-height:1.8}
.hero__sub b{color:var(--paper);font-weight:700}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}

.hero__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  max-width:900px;margin:64px auto 0;
  background:var(--line);border:1px solid var(--line);
}
.hero__stats li{background:var(--bg);padding:24px 14px;display:flex;flex-direction:column;gap:6px}
.hero__stats .k{font-family:var(--display);font-size:clamp(28px,4.4vw,44px);line-height:1;color:var(--lime)}
.hero__stats .l{font-size:9.5px;letter-spacing:.16em;color:var(--dim)}

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{padding:clamp(72px,9vw,120px) 0;border-bottom:1px solid var(--line)}
.sec--alt{background:var(--bg-2)}

.eyebrow{
  font-family:var(--pixel);font-size:10px;line-height:1.6;
  color:var(--blue);letter-spacing:.02em;margin-bottom:20px;
}
.h2{font-size:clamp(34px,6.4vw,74px);margin-bottom:18px}
.lede{max-width:640px;color:var(--dim);font-size:14.5px;line-height:1.8;margin-bottom:44px}

/* ---------- 3 cards ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{
  padding:32px 26px 30px;
  background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r);
  border-top:3px solid var(--lime);
  transition:.24s ease;
}
.card--blue{border-top-color:var(--blue)}
.card--green{border-top-color:var(--green)}
.card:hover{transform:translateY(-5px);border-color:#454545;border-top-color:var(--lime)}
.card--blue:hover{border-top-color:var(--blue)}
.card--green:hover{border-top-color:var(--green)}
.card__num{font-family:var(--display);font-size:13px;letter-spacing:.14em;color:var(--dim);margin-bottom:16px}
.card h3{font-size:27px;margin-bottom:12px}
.card p{color:var(--dim);font-size:13.5px;line-height:1.75}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:44px;background:var(--line);border:1px solid var(--line)}
.step{display:flex;gap:22px;padding:34px 30px;background:var(--bg-2);transition:background .22s}
.step:hover{background:#111}
.step__n{font-family:var(--display);font-size:40px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--line-2);flex-shrink:0}
.step:hover .step__n{-webkit-text-stroke-color:var(--lime)}
@supports not (-webkit-text-stroke:1px #000){.step__n{color:var(--line-2)}}
.step h3{font-size:23px;margin-bottom:9px}
.step p{color:var(--dim);font-size:13.5px;line-height:1.75}
.step p b{color:var(--paper)}

.notice{
  display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;
  margin-top:26px;padding:22px 24px;
  border:1px solid rgba(255,176,32,.35);border-left:3px solid var(--amber);
  background:rgba(255,176,32,.05);border-radius:var(--r);
}
.notice__tag{font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--amber);padding-top:3px;flex-shrink:0}
.notice p{font-size:13.5px;color:#C9C9C9;line-height:1.75;flex:1;min-width:240px}
.notice b{color:var(--paper)}

/* ---------- ranks ---------- */
.ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rank{
  position:relative;
  padding:32px 26px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(180deg,#0C0C0C,#070707);
  transition:.24s ease;
}
.rank:hover{transform:translateY(-6px);border-color:var(--lime);box-shadow:0 18px 40px rgba(0,0,0,.6)}
.rank--mid{border-color:rgba(204,255,0,.4)}
.rank--top{border-color:rgba(1,99,250,.45)}
.rank--top:hover{border-color:var(--blue);box-shadow:0 18px 40px rgba(1,99,250,.18)}

.rank__flag{
  position:absolute;top:-1px;right:-1px;
  padding:5px 12px;font-size:9px;letter-spacing:.16em;font-weight:700;
  background:var(--lime);color:#000;
}
.rank__tier{display:block;font-size:10px;letter-spacing:.2em;color:var(--dim);margin-bottom:8px}
.rank h3{font-size:34px}
.rank__weight{display:flex;align-items:baseline;gap:10px;margin:22px 0 4px}
.rank__weight span{font-family:var(--display);font-size:56px;line-height:1;color:var(--lime)}
.rank--top .rank__weight span{color:var(--blue)}
.rank__weight em{font-style:normal;font-size:.5em}
.rank__weight small{font-size:9px;letter-spacing:.18em;color:var(--dim)}
.rank__cost{padding:12px 0 18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--dim);letter-spacing:.04em}
.rank__cost b{color:var(--paper);font-size:16px;letter-spacing:0}
.rank__list{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.rank__list li{position:relative;padding-left:20px;font-size:12.5px;color:var(--dim);line-height:1.6}
.rank__list li::before{content:"\25B8";position:absolute;left:0;color:var(--lime)}
.rank--top .rank__list li::before{color:var(--blue)}

/* ---------- flow ---------- */
/* align-items defaults to stretch so every column starts at the same top edge
   and the INFLOW / CONVERSION / SPLIT labels line up across the row. */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;margin-top:44px}
.flow__col{display:flex;flex-direction:column;gap:14px}
.flow__label{font-size:9.5px;letter-spacing:.2em;color:var(--dim)}
.flow__box{padding:20px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg)}
.flow__box b{display:block;font-size:14px;color:var(--paper);margin-bottom:6px}
.flow__box p{font-size:12px;color:var(--dim);line-height:1.65}
.flow__box--core{border-color:var(--blue);background:rgba(1,99,250,.07)}
.flow__box--pay{border-color:var(--lime);background:rgba(204,255,0,.06)}
.flow__box--tre{border-style:dashed}
.pct{display:block;font-family:var(--display);font-size:44px;line-height:1;color:var(--lime);margin-bottom:6px}
.pct--sm{font-size:28px;color:var(--dim)}
.flow__arrow{display:flex;align-items:center;justify-content:center;font-size:26px;color:rgba(204,255,0,.5)}

/* ---------- token spec ---------- */
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px}
.spec__row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;background:var(--bg);font-size:13px}
.spec__row span{font-size:10px;letter-spacing:.16em;color:var(--dim)}
.spec__row b{font-family:var(--display);font-size:20px;letter-spacing:.02em;color:var(--lime);font-weight:400}
.spec__row b.muted{color:var(--dim)}

.burn{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:30px 28px;border:1px solid var(--line-2);border-left:3px solid var(--green);border-radius:var(--r);background:rgba(0,220,50,.04)}
.burn__big{font-family:var(--display);font-size:66px;line-height:.9;color:var(--green)}
.burn p{flex:1;min-width:260px;font-size:14px;color:var(--dim);line-height:1.8}
.burn b{color:var(--paper)}

/* ---------- mint ---------- */
.sec--mint{background:
  radial-gradient(ellipse 70% 60% at 50% 0%,rgba(204,255,0,.06),transparent 70%),var(--bg);}
.mint{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:44px;align-items:start}
.mint__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.mint__stats div{background:var(--bg);padding:26px 22px;display:flex;flex-direction:column;gap:7px}
.mint__stats span{font-size:9.5px;letter-spacing:.17em;color:var(--dim)}
.mint__stats b{font-family:var(--display);font-size:30px;font-weight:400;letter-spacing:.01em;color:var(--paper)}

.mint__panel{padding:30px 28px;border:2px solid var(--lime);border-radius:var(--r);background:#080808}
.mint__status{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.15em;color:var(--amber);margin-bottom:14px}
.mint__panel p{font-size:13px;color:var(--dim);line-height:1.75;margin-bottom:22px}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.faq details{background:var(--bg);transition:background .2s}
.faq details[open]{background:#0F0F0F}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 24px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:700;color:var(--txt);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:26px;color:var(--lime);line-height:1;transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--lime)}
.faq details p{padding:0 24px 24px;font-size:13.5px;color:var(--dim);line-height:1.8;max-width:70ch}

/* ---------- clock-in strip ---------- */
.strip{background:var(--lime);color:#000;overflow:hidden;border-bottom:2px solid #000}
.strip__track{display:flex;width:max-content;animation:tape 26s linear infinite}
.strip__track span{
  display:block;white-space:nowrap;padding:16px 0;
  font-family:var(--display);font-size:clamp(26px,4vw,46px);letter-spacing:.02em;
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{padding:64px 0 40px;background:var(--bg)}
.foot__inner{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot__brand{display:flex;align-items:center;gap:16px}
.foot__brand img{width:52px;height:52px;border:2px solid var(--lime);image-rendering:pixelated}
.foot__brand b{display:block;font-family:var(--display);font-size:20px;letter-spacing:.03em}
.foot__brand span{font-size:12px;color:var(--dim)}

.foot__cols{display:grid;grid-template-columns:repeat(3,auto);gap:48px}
.foot__col{display:flex;flex-direction:column;gap:11px}
.foot__col h3{font-size:10px;letter-spacing:.2em;color:var(--dim);font-family:var(--mono);font-weight:700;margin-bottom:4px}
.foot__col a{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#C4C4C4;transition:color .18s}
.foot__col a:hover{color:var(--lime)}
.foot__col a svg{flex-shrink:0;opacity:.7}
.foot__col a:hover svg{opacity:1}
.foot__note{font-size:11px;color:var(--dim);line-height:1.6;max-width:24ch;margin-top:2px}

.foot__legal{padding-top:26px;display:flex;flex-direction:column;gap:10px}
.foot__legal p{font-size:11.5px;line-height:1.75;color:#9A9A9A;max-width:74ch}
.foot__legal b{color:var(--lime)}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .flow{grid-template-columns:1fr;gap:14px}
  .flow__arrow{transform:rotate(90deg);font-size:20px}
  .cards3{grid-template-columns:1fr}
  .ranks{grid-template-columns:1fr}
  .mint{grid-template-columns:1fr}
}

@media (max-width:860px){
  .nav__toggle{display:flex}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    margin:0;padding:0;
    background:#080808;border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav__links.is-open{max-height:600px}
  .nav__links a{padding:15px 24px;border-bottom:1px solid var(--line);font-size:13px}
  .nav__links a::after{display:none}
  .nav__brand span{font-size:17px}
  /* three icon buttons + MINT + burger will not fit a phone nav bar,
     so the social/contact links move into the dropdown instead. */
  .nav__actions .iconbtn{display:none}
  .nav__only-mobile{display:block;text-transform:none;letter-spacing:.04em;color:var(--lime)}
}

@media (max-width:720px){
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr}
  .mint__stats{grid-template-columns:1fr}
  .tape{font-size:10px}
  .hero__cta .btn{flex:1;justify-content:center;min-width:200px}
}

@media (max-width:720px){
  .foot__cols{grid-template-columns:repeat(2,auto);gap:28px 32px}
}

@media (max-width:480px){
  /* longhand only — the `padding` shorthand here would come later in the
     cascade than .foot__inner / .foot__legal and wipe out their vertical padding. */
  .wrap{padding-left:18px;padding-right:18px}
  .hero{padding-left:18px;padding-right:18px}
  .step{padding:26px 20px;gap:16px}
  .burn__big{font-size:52px}
  .foot__inner{flex-direction:column;align-items:flex-start;gap:34px}
  .foot__cols{grid-template-columns:1fr;gap:26px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}