/* slowlana.tech — $SLO. Bright mint paper (from his art), ink linework, Solana gradient as accent. */
@font-face{font-family:'LilitaX';src:url('/fonts/lilita.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DMSansX';src:url('/fonts/dmsans300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'DMSansX';src:url('/fonts/dmsans400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DMSansX';src:url('/fonts/dmsans700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JBMonoX';src:url('/fonts/jbmono700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --paper:#EAF8F1; --paper2:#D9F2E6; --card:#FFFFFF; --ink:#1B1530; --ink2:#4A4363;
  --purple:#9945FF; --purple-d:#6A22D6; --teal:#14F195; --aqua:#3CD3C1; --blue:#2B2EE8;
  --fur:#7A5230; --cream:#FFF4DC; --gold:#FFC83D; --red:#FF5A5F;
  --grad:linear-gradient(100deg,#3CD3C1 0%,#7F7BF0 55%,#9945FF 100%);
  --display:'LilitaX','Lilita One','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --ui:'DMSansX','DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JBMonoX','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --line:3px solid var(--ink); --shadow:6px 6px 0 var(--ink); --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.55;overflow-x:hidden}
body.locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:.005em}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-size:20px;letter-spacing:.02em;
  padding:12px 22px;border:var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-primary{background:var(--grad);color:#fff;text-shadow:0 2px 0 rgba(27,21,48,.35)}
.btn-dark{background:var(--ink);color:#fff}
.btn-sm{font-size:16px;padding:8px 16px;box-shadow:3px 3px 0 var(--ink)}

/* ================= GATE (the "still loading" page) ================= */
.gate,.bsod{display:none}
.js .gate{display:flex}
.gate{position:fixed;inset:0;z-index:100;flex-direction:column;background:var(--paper);transition:opacity .45s,transform .45s}
.gate.gone{opacity:0;transform:scale(1.03);pointer-events:none}
.tabbar{flex:none;display:flex;align-items:flex-end;gap:10px;padding:10px 14px 0;background:#CFEBDD;border-bottom:2px solid #B7DCC9}
.tab{display:flex;align-items:center;gap:9px;background:var(--paper);border:2px solid #B7DCC9;border-bottom:0;border-radius:12px 12px 0 0;
  padding:8px 16px 9px;font-size:14px;font-weight:700;color:var(--ink2);max-width:320px;min-width:0;margin-bottom:-2px}
.tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spin{flex:none;width:14px;height:14px;border-radius:50%;border:2.5px solid rgba(27,21,48,.18);border-top-color:var(--purple);animation:crawl 3.2s linear infinite}
@keyframes crawl{to{transform:rotate(360deg)}}
.urlbar{flex:none;display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--paper);border-bottom:2px solid #CFEBDD}
.urlbar .dots{display:flex;gap:6px}
.urlbar .dots i{width:11px;height:11px;border-radius:50%;background:#B7DCC9}
.url{flex:1;min-width:0;background:#fff;border:2px solid #CFEBDD;border-radius:999px;padding:5px 14px;font-size:14px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gate-body{flex:1;min-height:0;overflow-y:auto;display:grid;place-items:center;padding:18px 20px 28px}
.gate-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center;max-width:1040px;width:100%}
.gate-art{position:relative}
.gate-art img{width:100%;max-width:440px;margin:0 auto;filter:drop-shadow(0 18px 18px rgba(27,21,48,.14))}
.gate-code{font-size:13px;letter-spacing:.12em;color:var(--purple-d);text-transform:uppercase;margin-bottom:12px}
.gate h1{font-size:clamp(46px,6.4vw,84px)}
.gate-sub{margin-top:14px;font-size:clamp(19px,2vw,24px);font-weight:700}
.gate-sub em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate-note{margin-top:8px;color:var(--ink2);max-width:46ch}
.bar{margin-top:22px;height:22px;border:var(--line);border-radius:999px;background:#fff;overflow:hidden;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;width:2%;background:var(--grad);border-right:3px solid var(--ink);transition:width 1.8s ease}
.gate.fast .bar i{transition:width .28s ease-out}
.gate-eta{margin-top:10px;font-size:13px;color:var(--ink2)}
.gate-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.gate-btns .btn{font-size:19px}

/* ================= BSOD ================= */
.bsod{position:fixed;inset:0;z-index:120;background:#0A6CCB;color:#fff;font-family:var(--ui);font-weight:300;cursor:default;overflow-y:auto}
.bsod.on{display:block}
.bsod-in{max-width:900px;margin:0 auto;padding:clamp(40px,11vh,120px) clamp(20px,6vw,60px) 40px}
.frown{font-size:clamp(90px,14vw,160px);line-height:1;margin-bottom:28px;font-weight:300}
.bsod p{font-size:clamp(19px,2.4vw,27px);line-height:1.35;max-width:34ch}
.bsod .pct{margin-top:30px}
.bsod-row{display:flex;gap:22px;align-items:flex-start;margin-top:40px}
.bsod canvas{flex:none;width:104px;height:104px;image-rendering:pixelated;background:#fff;padding:6px}
.bsod small{display:block;font-size:clamp(13px,1.4vw,15.5px);line-height:1.5;max-width:52ch}
.bsod small+small{margin-top:14px}
.bsod-hint{margin-top:40px;font-size:15px!important;font-weight:400;opacity:0;transition:opacity .4s}
.bsod-hint.show{opacity:1;animation:blink 1.4s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

/* ================= NAV ================= */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:66px;max-width:1600px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:26px}
.brand img{width:42px;height:42px;border-radius:50%;border:var(--line);background:var(--paper2)}
.links{display:flex;gap:26px;margin-left:auto}
.links a{text-decoration:none;font-weight:700;font-size:16px}
.links a:hover{color:var(--purple-d)}
.nav .btn{margin-left:8px}
@media(max-width:900px){.links{display:none}.nav .actions{margin-left:auto}}

/* ================= HERO ================= */
.hero{border-bottom:var(--line);overflow:hidden;background:
  radial-gradient(circle at 74% 58%,rgba(153,69,255,.20),transparent 34%),
  radial-gradient(circle at 64% 78%,rgba(60,211,193,.26),transparent 32%),var(--paper)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:end;min-height:min(calc(100svh - 66px),860px);padding-top:30px}
.hero-copy{align-self:center;padding-bottom:40px;min-width:0}
.hero h1{font-size:clamp(68px,10.5vw,156px);line-height:.88;margin-top:18px}
.hero-sub{margin-top:12px;font-family:var(--display);font-size:clamp(26px,3vw,42px);line-height:1.05;color:var(--purple-d)}
.hero-sub em{font-style:normal;color:var(--ink)}
.hero .tag{margin-top:12px;font-size:clamp(17px,1.5vw,21px);color:var(--ink2)}
.hero .ca{max-width:540px;margin-top:24px}
.hero .hero-btns{margin-top:18px}
.hero-art{display:flex;justify-content:center;min-width:0}
.hero-art img{width:clamp(250px,27vw,390px);height:auto;filter:drop-shadow(10px 10px 0 rgba(27,21,48,.12))}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--paper);border:2px solid var(--ink);border-radius:99px;padding:4px 12px}
.kicker b{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 2px var(--ink);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.ca{display:flex;align-items:center;gap:8px;margin-top:16px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:6px 6px 6px 12px;min-width:0}
.ca .lab{font-family:var(--display);font-size:16px;flex:none}
.ca code{flex:1;min-width:0;font-family:var(--mono);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca button{flex:none;font-family:var(--display);font-size:15px;border:2px solid var(--ink);background:var(--ink);color:#fff;border-radius:10px;padding:5px 12px;cursor:pointer}
.ca button.ok{background:var(--teal);color:var(--ink)}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
@media(max-width:860px){
  .hero-in{grid-template-columns:1fr;min-height:0;gap:6px;padding-top:26px}
  .hero-copy{padding-bottom:6px}
  .hero-art img{width:min(230px,58vw)}
}
@media(max-width:700px){.hero-btns{gap:10px}.hero-btns .btn{font-size:17px;padding:10px 15px}.hero-btns .btn.btn-x{width:46px;height:46px;padding:0}}

/* ================= STATS BAND + CRAWL ================= */
.band{background:var(--ink);color:#fff;border-bottom:var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1600px;margin:0 auto}
.stat{padding:14px 20px;border-right:2px solid #3A3160;min-width:0}
.stat:last-child{border-right:0}
.stat small{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:#A49CCB;text-transform:uppercase}
.stat b{display:block;font-family:var(--mono);font-size:clamp(18px,2vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b.up{color:var(--teal)} .stat b.down{color:#FF8A8E}
.stat.hot b{color:var(--gold)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:2px solid #3A3160}}
.crawl{background:var(--grad);border-bottom:var(--line);overflow:hidden;white-space:nowrap}
.crawl-track{display:inline-flex;animation:slowscroll 140s linear infinite;padding:10px 0}
.crawl-track span{font-family:var(--display);font-size:22px;color:#fff;text-shadow:0 2px 0 rgba(27,21,48,.35);padding:0 26px}
.crawl-track span::after{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink);margin-left:52px;vertical-align:middle}
@keyframes slowscroll{to{transform:translateX(-50%)}}

/* ================= SECTIONS ================= */
section.sec{padding:84px 0;border-bottom:var(--line)}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-d);margin-bottom:12px}
.sec h2{font-size:clamp(40px,5.4vw,72px)}
.lede{margin-top:18px;font-size:clamp(17px,1.5vw,20px);max-width:58ch;color:var(--ink2)}
.lede+.lede{margin-top:14px}

.about .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.about-art{position:relative;max-width:360px;margin:0 auto}
.about-art img{width:100%}
.bubble{position:absolute;top:2%;right:-8%;background:#fff;border:var(--line);border-radius:18px;padding:8px 16px;font-family:var(--display);font-size:26px;box-shadow:4px 4px 0 var(--ink)}
.bubble::after{content:'';position:absolute;left:14px;bottom:-14px;width:18px;height:18px;background:#fff;border-right:var(--line);border-bottom:var(--line);transform:rotate(45deg)}
.about .origin{display:inline-block;margin-top:18px;font-weight:700;color:var(--purple-d)}
@media(max-width:860px){.about .wrap{grid-template-columns:1fr;gap:34px}.about-art{max-width:230px;order:2}.bubble{right:-30%}}

.bench{background:var(--paper2)}
.bench-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px}
.bcard{background:var(--card);border:var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 20px 24px;min-width:0}
.bcard:nth-child(2){transform:rotate(-1.2deg)} .bcard:nth-child(3){transform:rotate(1deg)}
.bcard small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink2);text-transform:uppercase}
.bcard s{display:block;margin-top:10px;font-family:var(--mono);font-size:26px;color:#9A93B5;text-decoration-thickness:3px;text-decoration-color:var(--red)}
.bcard h3{margin-top:4px;font-size:32px}
.bcard p{margin-top:10px;font-size:15.5px;color:var(--ink2)}
.bcard.win{background:var(--grad);color:#fff}
.bcard.win small,.bcard.win p{color:#fff}
.bcard.win s{color:rgba(255,255,255,.7);text-decoration-color:var(--ink)}
@media(max-width:1000px){.bench-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bench-grid{grid-template-columns:1fr}.bcard:nth-child(n){transform:none}}

.rewards .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.rewards-art{border:var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#9ADCF0}
.rewards-art img{width:100%}
.pot{background:var(--card);border:var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:30px 30px 28px}
.pot .big{font-family:var(--display);font-size:clamp(64px,8vw,112px);line-height:.95;margin-top:10px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:0;filter:drop-shadow(3px 3px 0 var(--ink))}
.pot .what{margin-top:8px;font-family:var(--display);font-size:clamp(22px,2.4vw,30px)}
.pot .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill{font-family:var(--mono);font-size:13.5px;border:2px solid var(--ink);border-radius:999px;padding:5px 12px;background:var(--paper)}
.pot .how{margin-top:18px;font-size:15.5px;color:var(--ink2)}
.pot .stamp{margin-top:14px;font-family:var(--mono);font-size:12px;color:#8A83A6;letter-spacing:.06em}
@media(max-width:900px){.rewards .wrap{grid-template-columns:1fr}}

.toke-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px}
.tile{border:var(--line);border-radius:var(--r);padding:22px 20px;background:var(--card);box-shadow:var(--shadow);min-width:0}
.tile small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.tile b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,40px);margin-top:8px;line-height:1}
.tile p{margin-top:8px;font-size:15px;color:var(--ink2)}
.tile:nth-child(1){background:var(--cream)} .tile:nth-child(2){background:#E6DBFF} .tile:nth-child(3){background:#D2F7E6} .tile:nth-child(4){background:#DCE0FF}
.ca-big{margin-top:28px;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border:var(--line);border-radius:var(--r);padding:12px 12px 12px 22px;min-width:0}
.ca-big .lab{font-family:var(--display);font-size:22px;flex:none}
.ca-big code{flex:1;min-width:0;font-family:var(--mono);font-size:clamp(13px,1.6vw,18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-big button{flex:none;font-family:var(--display);font-size:18px;border:2px solid #fff;background:var(--grad);color:#fff;border-radius:999px;padding:8px 18px;cursor:pointer}
.ca-big button.ok{background:var(--teal);color:var(--ink)}
@media(max-width:1000px){.toke-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.toke-grid{grid-template-columns:1fr}.ca-big .lab{display:none}.ca-big{padding-left:14px}}

.buy{background:var(--paper2)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px;counter-reset:s}
.step{position:relative;background:var(--card);border:var(--line);border-radius:var(--r);padding:26px 20px 22px;box-shadow:var(--shadow);min-width:0}
.step::before{counter-increment:s;content:'0' counter(s);position:absolute;top:-20px;left:18px;font-family:var(--display);font-size:24px;background:var(--ink);color:#fff;border-radius:999px;padding:3px 14px}
.step h3{font-size:28px;margin-top:6px}
.step p{margin-top:8px;font-size:15.5px;color:var(--ink2)}
.step.last{background:var(--cream)}
.buy-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

.memes{background:var(--purple);color:#fff;border-bottom:var(--line);padding:70px 0;position:relative;overflow:hidden}
.memes::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:.9}
.memes .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.memes .eyebrow{color:#fff;opacity:.85}
.memes h2{font-size:clamp(44px,5.6vw,76px);text-shadow:4px 4px 0 var(--ink)}
.memes .lede{color:#fff}
.memes .btn{margin-top:26px}
.peek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.peek a{display:block;border:var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:4px 4px 0 var(--ink)}
.peek a:nth-child(odd){transform:rotate(-2deg)} .peek a:nth-child(even){transform:rotate(2deg)}
.peek img{width:100%;aspect-ratio:1;object-fit:cover}
.peek-solo{max-width:280px;margin:0 auto}
@media(max-width:860px){.memes .wrap{grid-template-columns:1fr}}

.foot{background:var(--ink);color:#C9C2E6;padding:54px 0 40px}
.foot .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.foot .brand{color:#fff}
.foot .brand img{border-color:#fff}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot nav a{color:#fff;text-decoration:none;font-weight:700}
.foot nav a:hover{color:var(--teal)}
.foot .ca-line{margin-top:24px;font-family:var(--mono);font-size:13px;word-break:break-all;color:#fff}
.foot .legal{margin-top:22px;font-size:13px;line-height:1.65;max-width:92ch;color:#9C94BD}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .crawl-track,.spin,.kicker b,.bsod-hint.show{animation:none}
  .gate{transition:none}
}
.peek .peek-solo{grid-column:1/-1;aspect-ratio:auto;object-fit:contain;max-width:240px;margin:0 auto;filter:drop-shadow(6px 6px 0 rgba(27,21,48,.35))}

/* ---- gate + about on phones ---- */
@media(max-width:760px){
  .gate-body{place-items:start center;padding:14px 16px 24px}
  .gate-in{grid-template-columns:1fr;gap:10px;text-align:center}
  .gate-art img{max-width:min(210px,52vw)}
  .gate-code{font-size:11.5px;margin-bottom:8px}
  .gate h1{font-size:clamp(40px,12vw,56px)}
  .gate-sub{margin-top:8px;font-size:18px}
  .gate-note{display:none}
  .bar{margin-top:14px;height:18px}
  .gate-eta{font-size:12px}
  .gate-btns{flex-direction:column;gap:12px;margin-top:16px}
  .gate-btns .btn{width:100%;white-space:normal;font-size:18px;padding:11px 16px}
  .urlbar{padding:7px 12px}
}
@media(max-width:420px){.bubble{right:-12%;font-size:22px}}
.btn-x{width:54px;height:54px;padding:0;flex:none}
.btn-x svg{display:block}