/* style.css */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

:root{

--bg:#050505;
--panel:#0d0d0d;
--border:#2d2d2d;
--green:#00ff66;
--orange:#ff9800;
--red:#ff4444;
--blue:#00cfff;
--text:#ffffff;
--muted:#7f7f7f;

}

body{

background:var(--bg);
color:var(--green);
font-family:'IBM Plex Mono',monospace;
overflow-x:hidden;

background-image:
linear-gradient(rgba(0,255,102,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,255,102,.03) 1px,transparent 1px);

background-size:40px 40px;

}

body::before{

content:"";
position:fixed;
inset:0;
pointer-events:none;

background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.015),
rgba(255,255,255,.015) 2px,
transparent 2px,
transparent 4px);

opacity:.8;

}

.ticker{

height:42px;
overflow:hidden;
background:#0b0b0b;
border-bottom:1px solid var(--border);

}

.track{

display:flex;
align-items:center;
height:100%;
white-space:nowrap;
will-change:transform;

animation:scroll 38s linear infinite;

}

.item{

padding:0 60px;
font-weight:700;
font-size:14px;
letter-spacing:1px;

}

@keyframes scroll{

from{
transform:translateX(0);
}

to{
transform:translateX(-50%);
}

}

.terminal{

max-width:1400px;
margin:auto;
padding:30px;

}

header{

display:flex;
justify-content:space-between;
align-items:center;

padding-bottom:24px;
margin-bottom:25px;

border-bottom:1px solid var(--border);

}

.brand{

display:flex;
align-items:center;
gap:24px;

}

.logo{

width:110px;
height:110px;

padding:10px;
object-fit:contain;

background:#101010;

border:2px solid var(--green);

border-radius:8px;

box-shadow:
0 0 15px rgba(0,255,102,.18),
inset 0 0 15px rgba(0,255,102,.08);

animation:float 3s ease-in-out infinite;

}

@keyframes float{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-6px);
}

}

.small{

font-size:12px;
letter-spacing:2px;
color:var(--muted);

}

.subtitle{

margin-top:8px;
font-size:14px;
color:var(--muted);

}

h1{

margin-top:5px;

font-size:54px;

color:var(--text);

letter-spacing:-2px;

}

.live{

display:flex;
align-items:center;
gap:10px;

font-weight:bold;

}

.dot{

width:12px;
height:12px;

border-radius:50%;

background:var(--green);

box-shadow:0 0 10px var(--green);

animation:pulse .8s infinite;

}

@keyframes pulse{

50%{
opacity:.35;
}

}

.grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.panel{

background:var(--panel);

border:1px solid var(--border);

padding:20px;

transition:.2s;

}

.panel:hover{

border-color:var(--green);

box-shadow:0 0 20px rgba(0,255,102,.12);

}

.panel.wide{

grid-column:1/3;

}

h2{

margin-bottom:18px;

font-size:20px;

letter-spacing:1px;

color:var(--orange);

}

.metric{

display:flex;
justify-content:space-between;

padding:12px 0;

border-bottom:1px dashed #1f1f1f;

}

.metric:last-child{

border:none;

}

.metric strong{

font-size:24px;

color:var(--text);

}

table{

width:100%;

border-collapse:collapse;

}

th{

padding:15px;

text-align:left;

color:var(--orange);

border-bottom:1px solid var(--border);

}

td{

padding:15px;

border-bottom:1px solid #222;

}

tbody tr{

transition:.2s;

}

tbody tr:hover{

background:#131313;

}

.orange{

color:var(--orange);

}

.red{

color:var(--red);

}

.blue{

color:var(--blue);

}

ul{

padding-left:20px;

line-height:2;

}

.bar{

margin:14px 0 8px;

height:14px;

background:#222;

overflow:hidden;

}

.bar div{

height:100%;

background:var(--green);

box-shadow:0 0 12px var(--green);

}

.links{

display:grid;

grid-template-columns:2fr repeat(3,1fr);

gap:15px;

margin-top:10px;

}

.link-box{

display:flex;
flex-direction:column;
gap:8px;

}

.link-box span{

font-size:12px;

color:var(--muted);

}

code{

display:block;

padding:14px;

background:#111;

border:1px solid var(--border);

color:var(--green);

font-size:13px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

cursor:pointer;

}

.terminal-btn{

display:flex;

align-items:center;

justify-content:center;

padding:14px;

text-decoration:none;

font-weight:bold;

color:var(--green);

background:#111;

border:1px solid var(--green);

transition:.2s;

}

.terminal-btn:hover{

background:var(--green);

color:#000;

}

.buy{

border-color:var(--orange);

color:var(--orange);

}

.buy:hover{

background:var(--orange);

color:#000;

}

footer{

margin-top:28px;

padding-top:22px;

border-top:1px solid var(--border);

font-size:13px;

text-align:center;

color:#666;

}

@media(max-width:900px){

header{

flex-direction:column;
align-items:flex-start;
gap:20px;

}

.brand{

flex-direction:column;
align-items:flex-start;

}

.logo{

width:80px;
height:80px;

}

h1{

font-size:38px;

}

.grid{

grid-template-columns:1fr;

}

.panel.wide{

grid-column:auto;

}

.links{

grid-template-columns:1fr;

}

}