* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
background: #f7f3ee;
color: #171717;
font-family: Inter, sans-serif;
overflow-x: hidden;
}
/* Ambient background */
.ambient {
position: fixed;
width: 500px;
height: 500px;
border-radius: 50%;
filter: blur(100px);
opacity: .35;
z-index: -1;
animation: drift 18s infinite alternate ease-in-out;
}
.ambient-one {
background: #d97757;
top: -200px;
left: -150px;
}
.ambient-two {
background: #c4b5fd;
right: -150px;
bottom: -200px;
animation-delay: -8s;
}
@keyframes drift {
from {
transform: translate(0,0) scale(1);
}
to {
transform: translate(100px,60px) scale(1.2);
}
}
/* Header */
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:35px 8%;
}
.logo {
font-size:32px;
font-weight:800;
letter-spacing:-1px;
}
.logo span {
color:#d97757;
}
.status {
display:flex;
align-items:center;
gap:10px;
font-family:"JetBrains Mono";
font-size:13px;
color:#555;
}
.status span {
width:10px;
height:10px;
background:#22c55e;
border-radius:50%;
animation:pulse 2s infinite;
}
@keyframes pulse {
50% {
opacity:.4;
transform:scale(1.5);
}
}
/* Hero */
.hero {
min-height:75vh;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 8%;
}
.hero-text {
max-width:700px;
animation:appear 1s ease;
}
@keyframes appear {
from {
opacity:0;
transform:translateY(30px);
}
to {
opacity:1;
transform:none;
}
}
.label {
font-family:"JetBrains Mono";
color:#d97757;
letter-spacing:3px;
font-size:13px;
}
h1 {
font-size:clamp(55px,8vw,95px);
line-height:1;
margin:25px 0;
letter-spacing:-4px;
}
h1 span {
color:#d97757;
}
.description {
font-size:22px;
line-height:1.6;
color:#666;
max-width:600px;
}
.actions {
margin-top:45px;
}
.actions a {
display:inline-block;
text-decoration:none;
color:white;
background:#171717;
padding:16px 30px;
border-radius:14px;
margin-right:15px;
transition:.35s;
}
.actions a:hover {
transform:translateY(-6px);
box-shadow:
0 20px 40px #0003;
}
/* Core card */
.core {
width:360px;
height:360px;
display:flex;
align-items:center;
justify-content:center;
animation:float 6s infinite ease-in-out;
}
@keyframes float {
50% {
transform:translateY(-20px);
}
}
.core-inner {
width:100%;
padding:35px;
border-radius:30px;
background:#ffffffaa;
backdrop-filter:blur(20px);
box-shadow:
0 30px 80px #0002;
border:1px solid #ffffff;
}
.core-inner h3 {
margin-top:0;
font-size:24px;
}
.line {
display:flex;
justify-content:space-between;
padding:15px 0;
border-bottom:1px solid #ddd;
font-family:"JetBrains Mono";
font-size:14px;
}
.line strong {
color:#16a34a;
}
/* Services */
.services {
padding:100px 8%;
}
.services h2 {
font-size:50px;
}
.cards {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:50px;
}
.card {
background:#ffffffaa;
backdrop-filter:blur(20px);
border:1px solid #ffffff;
border-radius:24px;
padding:30px;
transition:.45s;
}
.card:hover {
transform:
translateY(-12px)
scale(1.03);
box-shadow:
0 30px 70px #0002;
}
.card p {
color:#666;
line-height:1.6;
}
code {
color:#8b5cf6;
font-family:"JetBrains Mono";
}
/* Terminal */
.console {
margin:0 8% 100px;
background:#111;
color:#eee;
border-radius:25px;
overflow:hidden;
box-shadow:
0 30px 80px #0003;
}
.console-head {
padding:18px;
background:#222;
font-family:"JetBrains Mono";
}
pre {
padding:35px;
min-height:200px;
font-family:"JetBrains Mono";
color:#d1fae5;
}
footer {
text-align:center;
padding:50px;
color:#777;
}