:root{
--bg:var(--gb-bg,var(--greenbox-bg,#07111f));
--panel:var(--gb-surface,rgba(15,29,47,.90));
--text:var(--gb-text,#edf4ff);
--muted:var(--gb-muted,#a9bad0);
--a:var(--gb-accent,#45d49b);
--b:var(--gb-accent-2,#58a6ff);
--border:var(--gb-border,rgba(150,175,205,.24));
--max:1180px
}
*{box-sizing:border-box}
body{
margin:0;
color:var(--text);
background:
radial-gradient(circle at 15% 0,rgba(69,212,155,.12),transparent 28rem),
radial-gradient(circle at 85% 5%,rgba(88,166,255,.12),transparent 30rem),
var(--bg);
font:16px/1.62 system-ui,-apple-system,"Segoe UI",sans-serif
}
#greenbox-matrix-canvas{
position:fixed;
inset:0;
width:100%;
height:100%;
z-index:-3;
pointer-events:none
}
.wrap{
width:min(var(--max),calc(100% - 32px));
margin:auto
}
.head{
position:sticky;
top:0;
z-index:20;
border-bottom:1px solid var(--border);
backdrop-filter:blur(18px);
background:color-mix(in srgb,var(--bg) 82%,transparent)
}
.nav{
min-height:72px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px
}
.brand{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
font-weight:850
}
.mark{
width:36px;
height:36px;
border-radius:11px;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--a),var(--b));
color:#041017
}
.links{
display:flex;
gap:18px;
flex-wrap:wrap
}
.links a{
color:var(--muted);
text-decoration:none;
font-weight:700
}
.badge{
border:1px solid var(--border);
background:var(--panel);
color:var(--muted);
border-radius:999px;
padding:7px 11px;
font-size:.84rem
}
.hero{
padding:80px 0 40px
}
.eye{
color:var(--a);
font-weight:850;
text-transform:uppercase;
letter-spacing:.14em;
font-size:.78rem
}
h1,h2,h3{
line-height:1.12;
margin-top:0
}
h1{
font-size:clamp(2.5rem,7vw,5rem);
max-width:940px;
margin-bottom:22px
}
h2{
font-size:clamp(1.7rem,4vw,2.7rem)
}
.lead{
max-width:820px;
color:var(--muted);
font-size:clamp(1.05rem,2vw,1.3rem)
}
.actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:26px
}
.btn{
display:inline-flex;
min-height:46px;
align-items:center;
padding:0 18px;
border-radius:13px;
text-decoration:none;
font-weight:800;
border:1px solid var(--border);
background:var(--panel)
}
.btn.primary{
color:#041017;
border:0;
background:linear-gradient(135deg,var(--a),var(--b))
}
.section{
padding:34px 0 62px
}
.grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px
}
.grid.two{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.card{
background:var(--panel);
border:1px solid var(--border);
border-radius:20px;
padding:24px;
box-shadow:0 18px 55px rgba(0,0,0,.25)
}
.card p,.card li{
color:var(--muted)
}
.card a{
color:var(--a);
font-weight:750
}
.footer{
border-top:1px solid var(--border);
padding:34px 0 48px;
color:var(--muted)
}
.footergrid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:24px
}
.footer a{
color:var(--muted)
}
code{
background:rgba(0,0,0,.25);
padding:.15rem .35rem;
border-radius:6px
}
@media(max-width:850px){
.links{display:none}
.grid,.grid.two,.footergrid{grid-template-columns:1fr}
.hero{padding-top:56px}
}