“`

—

# CSS

“`css
body {
background: #050505;
color: #d9d9d9;
font-family: ‘Roboto Mono’, monospace;
overflow-x: hidden;
}

.anomalia-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
overflow: hidden;
}

#matrixCanvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.25;
}

.overlay {
position: absolute;
inset: 0;
background:
radial-gradient(circle at center, transparent 0%, #000 75%);
z-index: 1;
}

.hero-content {
position: relative;
z-index: 2;
max-width: 900px;
padding: 40px;
text-align: center;
}

.hebrew-line {
color: #00ff99;
font-size: 14px;
letter-spacing: 6px;
margin-bottom: 10px;
opacity: 0.8;
}

.verse {
color: #888;
font-size: 14px;
margin-bottom: 30px;
}

.hero-content h1 {
font-size: clamp(42px, 7vw, 92px);
line-height: 0.95;
margin-bottom: 30px;
color: #f5f5f5;
text-shadow: 0 0 18px rgba(0,255,120,0.25);
}

.subtitle {
max-width: 700px;
margin: auto;
font-size: 18px;
line-height: 1.8;
color: #b5b5b5;
}

.pill-container {
margin-top: 50px;
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}

.red-pill,
.blue-pill {
padding: 16px 28px;
text-decoration: none;
border-radius: 999px;
font-weight: bold;
transition: 0.3s ease;
border: 1px solid rgba(255,255,255,0.1);
}

.red-pill {
background: rgba(255,0,70,0.15);
color: #ff4d6d;
box-shadow: 0 0 25px rgba(255,0,70,0.15);
}

.red-pill:hover {
transform: translateY(-4px);
box-shadow: 0 0 35px rgba(255,0,70,0.4);
}

.blue-pill {
background: rgba(0,120,255,0.12);
color: #66b2ff;
box-shadow: 0 0 25px rgba(0,120,255,0.15);
}

.blue-pill:hover {
transform: translateY(-4px);
box-shadow: 0 0 35px rgba(0,120,255,0.4);
}

.anomalia-section {
padding: 120px 20px;
background: #050505;
}

.section-container {
max-width: 900px;
margin: auto;
}

.section-label {
color: #00ff99;
letter-spacing: 4px;
font-size: 13px;
margin-bottom: 20px;
}

.anomalia-section h2 {
font-size: 54px;
margin-bottom: 30px;
color: #fff;
}

.anomalia-section p {
font-size: 18px;
line-height: 1.9;
color: #bdbdbd;
}

blockquote {
margin-top: 40px;
padding-left: 20px;
border-left: 3px solid #00ff99;
color: #ffffff;
font-size: 24px;
}

.anomalia-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
gap: 30px;
padding: 80px 20px 140px;
max-width: 1300px;
margin: auto;
}

.grid-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(0,255,100,0.08);
padding: 40px;
border-radius: 24px;
transition: 0.4s ease;
backdrop-filter: blur(6px);
}

.grid-card:hover {
transform: translateY(-8px);
border-color: rgba(0,255,100,0.3);
box-shadow: 0 0 35px rgba(0,255,100,0.08);
}

.card-tag {
color: #00ff99;
font-size: 12px;
letter-spacing: 3px;
}

.grid-card h3 {
margin-top: 16px;
margin-bottom: 18px;
color: #fff;
}

.grid-card p {
color: #a8a8a8;
line-height: 1.8;
}

@media(max-width:768px){

.hero-content {
padding: 24px;
}

.subtitle {
font-size: 16px;
}

.anomalia-section h2 {
font-size: 38px;
}

blockquote {
font-size: 20px;
}

}
“`

—

# JAVASCRIPT — CHUVA MATRIX EM HEBRAICO

“`javascript
const canvas = document.getElementById(‘matrixCanvas’);
const ctx = canvas.getContext(‘2d’);

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const hebrew = ‘אבגדהוזחטיכלמנסעפצקרשת’;
const letters = hebrew.split(”);

const fontSize = 18;
const columns = canvas.width / fontSize;

const drops = [];

for(let x = 0; x < columns; x++) { drops[x] = 1; } function draw() { ctx.fillStyle = 'rgba(0,0,0,0.06)'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle = '#00ff88'; ctx.font = fontSize + 'px monospace'; for(let i = 0; i < drops.length; i++) { const text = letters[Math.floor(Math.random()*letters.length)]; ctx.fillText(text, i * fontSize, drops[i] * fontSize); if(drops[i] * fontSize > canvas.height && Math.random() > 0.975){
drops[i] = 0;
}

drops[i]++;
}
}

setInterval(draw, 45);

window.addEventListener(‘resize’, () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
“`

–