/* =========================
SAFESCHOOL AI HOME PAGE
========================= */

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

body{
font-family:'Exo 2',sans-serif;
background:
radial-gradient(circle at top right,#bff5ff,#ffffff 55%);
overflow:hidden;
}

body::before{
content:"";
position:fixed;
inset:0;

```
background:
linear-gradient(#d9f5ff 1px,transparent 1px),
linear-gradient(90deg,#d9f5ff 1px,transparent 1px);

background-size:42px 42px;
opacity:.55;
z-index:-1;
```

}

.page{
width:100%;
height:100vh;
padding:25px 40px;
}

.lang-box{
position:absolute;
top:25px;
right:35px;
display:flex;
gap:10px;
}

.lang-box button{
border:none;
padding:10px 18px;
border-radius:18px;
background:white;
font-weight:800;
cursor:pointer;
box-shadow:0 0 15px rgba(0,200,255,.35);
}

.main{
display:grid;
grid-template-columns:45% 55%;
height:100%;
align-items:center;
}

/* LEFT */

.left{
display:flex;
justify-content:center;
align-items:center;
}

.left-design{
width:100%;
max-width:650px;
filter:drop-shadow(0 0 20px rgba(0,220,255,.25));
}

/* RIGHT */

.right{
transform:scale(.92);
}

.title{
text-align:center;
font-size:90px;
font-weight:900;
color:#004f92;

```
text-shadow:
0 0 10px #73ecff,
0 0 25px #00d5ff,
0 0 45px #00c8ff;
```

}

.led{
width:70%;
margin:20px auto 35px;
display:flex;
gap:4px;
border:3px solid #67e7ff;
padding:4px;
border-radius:8px;
box-shadow:0 0 15px #67e7ff;
}

.led span{
flex:1;
height:12px;
background:#2de8ff;
animation:blink 1s infinite alternate;
}

@keyframes blink{
from{opacity:.3}
to{
opacity:1;
box-shadow:0 0 10px #00e5ff;
}
}

.right h2{
text-align:center;
margin-bottom:20px;
font-size:34px;
color:#083b71;
}

/* PANELS */

.panels{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-bottom:20px;
}

.panels a{
text-decoration:none;
color:#082b56;
background:white;
border-radius:22px;
padding:18px;
text-align:center;
font-weight:800;
border:2px solid #88eaff;

```
box-shadow:
0 0 15px rgba(0,200,255,.35),
inset 0 0 10px rgba(0,200,255,.1);

transition:.3s;
```

}

.panels a:hover{
transform:translateY(-4px);
box-shadow:0 0 25px #00ddff;
}

/* STATS */

.stats{
width:82%;
margin:auto;
background:white;
border-radius:25px;
padding:15px;

```
border:2px solid #7deaff;

box-shadow:
0 0 20px rgba(0,200,255,.25);
```

}

.stats h3{
text-align:center;
font-size:24px;
margin-bottom:10px;
color:#083b71;
}

.stats-row{
display:grid;
grid-template-columns:repeat(3,1fr);
text-align:center;
}

.stats-row b{
font-size:36px;
color:#003f79;
}

.stats-row p{
font-size:14px;
font-weight:700;
}

.tools{
margin-top:10px;

```
display:grid;
grid-template-columns:repeat(4,1fr);

text-align:center;

font-size:12px;
font-weight:700;
```

}