:root {

--bg:#030711;
--bg2:#07101d;
--panel:#0b1422;

--blue:#2387ff;
--cyan:#22d3ee;
--green:#49e2a6;

--text:#f5f8fc;
--muted:#93a4bb;

--border:rgba(148,163,184,.17);

--light:#f5f7fb;
--grey:#edf2f7;

--ink:#111827;

}


* {

box-sizing:border-box;
margin:0;
padding:0;

}


html {

scroll-behavior:smooth;

}


body {

font-family:"Segoe UI",Arial,sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.65;

}


a {

text-decoration:none;
color:inherit;

}


.container {

width:min(1180px,90%);
margin:auto;

}


header {

position:fixed;

top:0;
left:0;

width:100%;

z-index:1000;

background:rgba(3,7,17,.88);

backdrop-filter:blur(18px);

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

}


.nav {

height:78px;

display:flex;

align-items:center;

justify-content:space-between;

}


.brand {

display:flex;

align-items:center;

gap:12px;

font-weight:800;

letter-spacing:2px;

font-size:14px;

}


.brand-code {

font-family:Consolas,monospace;

font-weight:900;

color:var(--cyan);

letter-spacing:-1px;

}


nav {

display:flex;

align-items:center;

gap:27px;

}


nav a {

font-size:13px;

font-weight:600;

color:#c0ccdc;

}


nav a:hover {

color:var(--cyan);

}


.language {

color:var(--cyan);

border:1px solid rgba(34,211,238,.30);

padding:7px 11px;

border-radius:5px;

}


.menu-btn {

display:none;

background:none;

border:none;

color:white;

font-size:27px;

}


.hero {

min-height:100vh;

padding:150px 0 90px;

position:relative;

display:flex;

align-items:center;

overflow:hidden;

background:

radial-gradient(circle at 75% 35%,rgba(35,135,255,.16),transparent 35%),

radial-gradient(circle at 15% 80%,rgba(34,211,238,.08),transparent 32%),

var(--bg);

}


.grid-bg {

position:absolute;

inset:0;

opacity:.20;

background-image:

linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);

background-size:45px 45px;

mask-image:linear-gradient(to bottom,black,transparent);

}


.hero-grid {

position:relative;

display:grid;

grid-template-columns:1.1fr .9fr;

gap:70px;

align-items:center;

}


.terminal {

font-family:Consolas,monospace;

color:var(--green);

font-size:12px;

margin-bottom:24px;

}


h1 {

font-size:clamp(52px,7vw,88px);

line-height:.98;

letter-spacing:-4px;

}


h1 span {

display:block;

font-size:.47em;

color:var(--cyan);

margin-top:22px;

letter-spacing:-1px;

}


.hero-text {

max-width:720px;

font-size:19px;

color:#a6b5c9;

margin-top:28px;

}


.buttons {

display:flex;

gap:14px;

margin:34px 0;

}


.btn {

display:inline-block;

padding:14px 23px;

border-radius:6px;

font-size:14px;

font-weight:700;

transition:.25s;

}


.btn:hover {

transform:translateY(-2px);

}


.primary {

background:linear-gradient(90deg,#0ea5e9,#2563eb);

color:white;

}


.secondary {

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

background:rgba(255,255,255,.025);

}


.tags {

display:flex;

flex-wrap:wrap;

gap:8px;

}


.tags span {

font-family:Consolas,monospace;

font-size:11px;

color:#9eb0c8;

padding:6px 10px;

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

border-radius:4px;

}


.console {

background:rgba(7,12,22,.90);

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

border-radius:12px;

overflow:hidden;

box-shadow:0 30px 100px rgba(0,0,0,.38);

}


.console-bar {

height:42px;

display:flex;

align-items:center;

gap:7px;

padding:0 15px;

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

background:#0b1320;

}


.console-bar span {

width:9px;
height:9px;

border-radius:50%;

background:#334155;

}


.console-bar span:nth-child(1) {
background:#ef4444;
}

.console-bar span:nth-child(2) {
background:#eab308;
}

.console-bar span:nth-child(3) {
background:#22c55e;
}


.console-content {

padding:32px;

font-family:Consolas,monospace;

font-size:14px;

line-height:1.9;

color:#d5dce7;

}


.indent {
padding-left:24px;
}

.indent2 {
padding-left:48px;
}

.blue {
color:#60a5fa;
}

.green {
color:var(--green);
}


.ready {

margin-top:22px;

padding-top:18px;

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

font-size:10px;

letter-spacing:1px;

color:#75859a;

}


.ready span {

display:inline-block;

width:7px;
height:7px;

border-radius:50%;

background:var(--green);

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

margin-right:7px;

}


.metrics {

background:#07101b;

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

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

}


.metric-grid {

display:grid;

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

}


.metric {

padding:38px 20px;

text-align:center;

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

}


.metric:last-child {
border-right:none;
}


.metric strong {

display:block;

font-size:31px;

font-family:Consolas,monospace;

color:var(--cyan);

}


.metric span {

font-size:13px;

color:#96a6bb;

}


.section {

padding:110px 0;

}


.light {

background:var(--light);

color:var(--ink);

}


.grey {

background:var(--grey);

color:var(--ink);

}


.dark {

background:

radial-gradient(circle at 85% 25%,rgba(35,135,255,.08),transparent 32%),

#06101c;

color:white;

}


.split {

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:80px;

}


.eyebrow {

font-size:11px;

font-weight:800;

letter-spacing:3px;

text-transform:uppercase;

color:#158ae2;

margin-bottom:17px;

}


.dark .eyebrow,
.connect .eyebrow {

color:var(--cyan);

}


h2 {

font-size:clamp(37px,4.8vw,58px);

line-height:1.04;

letter-spacing:-2px;

}


.section-heading {

max-width:790px;

margin-bottom:55px;

}


.section-heading p {

margin-top:17px;

font-size:17px;

color:#93a4bb;

}


.profile-copy {

font-size:17px;

color:#64748b;

}


.profile-copy p + p {

margin-top:18px;

}


.profile-copy .lead {

font-size:24px;

line-height:1.45;

color:#152238;

}


.cards {

display:grid;

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

gap:18px;

}


.card {

padding:30px;

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

border-radius:9px;

background:rgba(255,255,255,.025);

}


.icon {

width:44px;
height:44px;

display:flex;

align-items:center;

justify-content:center;

border-radius:6px;

border:1px solid rgba(34,211,238,.35);

color:var(--cyan);

font-family:Consolas,monospace;

margin-bottom:26px;

}


.card h3 {

margin-bottom:10px;

}


.card p {

font-size:14px;

color:#94a3b8;

}


.timeline {

position:relative;

}


.timeline:before {

content:"";

position:absolute;

left:170px;

top:0;
bottom:0;

width:1px;

background:#d9e2ed;

}


.timeline-item {

display:grid;

grid-template-columns:145px 1fr;

gap:50px;

padding-bottom:45px;

}


.timeline-date {

text-align:right;

font-family:Consolas,monospace;

font-size:12px;

color:#697a91;

padding-top:7px;

}


.timeline-body {

position:relative;

padding:0 0 31px 30px;

border-bottom:1px solid #dce4ed;

}


.timeline-body:before {

content:"";

position:absolute;

left:-31px;

top:9px;

width:8px;
height:8px;

border-radius:50%;

background:white;

border:3px solid #1689e1;

}


.timeline-body h3 {

font-size:27px;

line-height:1.2;

}


.timeline-body h3 small {

font-size:12px;

font-weight:500;

color:#75849a;

margin-left:8px;

}


.timeline-body h4 {

margin-top:7px;

font-size:14px;

color:#245da8;

}


.timeline-body p {

margin-top:10px;

font-size:15px;

color:#69788d;

}


.timeline-item.current .timeline-body,
.timeline-item.oracle .timeline-body {

padding:30px;

border:none;

border-radius:10px;

background:#06152c;

color:white;

margin-top:-20px;

}


.timeline-item.current .timeline-body:before,
.timeline-item.oracle .timeline-body:before {

left:-34px;

top:36px;

background:var(--cyan);

}


.timeline-item.current .timeline-body h4,
.timeline-item.oracle .timeline-body h4 {

color:var(--cyan);

}


.timeline-item.current .timeline-body p,
.timeline-item.oracle .timeline-body p {

color:#a2b0c3;

}


.badges {

display:flex;

flex-wrap:wrap;

gap:8px;

margin-top:18px;

}


.badges span {

font-size:11px;

padding:6px 9px;

border-radius:4px;

color:#b4effa;

border:1px solid rgba(34,211,238,.20);

background:rgba(34,211,238,.07);

}


.engagement-grid {

display:grid;

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

gap:17px;

}


.engagement {

background:white;

padding:28px;

border:1px solid #dce4ed;

border-radius:8px;

}


.engagement span {

font-size:10px;

font-weight:800;

letter-spacing:2px;

color:#1689e1;

}


.engagement h3 {

font-size:23px;

margin:10px 0;

}


.engagement p {

font-size:14px;

color:#64748b;

}


.credential-grid {

display:grid;

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

gap:16px;

}


.credential {

padding:27px;

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

border-radius:8px;

}


.credential strong {

font-family:Consolas,monospace;

font-size:28px;

color:var(--cyan);

}


.credential h3 {

margin:12px 0 7px;

}


.credential p {

font-size:13px;

color:#94a3b8;

}


.connect {

padding:90px 0;

background:

radial-gradient(circle at 80% 50%,rgba(34,211,238,.09),transparent 30%),

#030711;

}


.connect-box {

padding:50px;

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

border-radius:12px;

display:grid;

grid-template-columns:1.3fr .7fr;

gap:50px;

align-items:center;

}


.connect-box p {

margin-top:18px;

color:#94a3b8;

}


footer {

padding:52px 0 25px;

background:#010409;

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

}


.footer-grid {

display:flex;

justify-content:space-between;

align-items:center;

}


.footer-grid p {

font-size:12px;

color:#64748b;

}


.copyright {

margin-top:33px;

padding-top:19px;

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

font-size:12px;

color:#536277;

}


.reveal {

opacity:0;

transform:translateY(18px);

transition:

opacity .65s ease,

transform .65s ease;

}


.reveal.visible {

opacity:1;

transform:none;

}


@media(max-width:900px) {

.menu-btn {
display:block;
}

nav {

display:none;

position:absolute;

top:78px;
left:0;
right:0;

background:#06101c;

padding:25px 5%;

flex-direction:column;

align-items:flex-start;

}

nav.open {
display:flex;
}

.hero-grid,
.split,
.connect-box {

grid-template-columns:1fr;

}

.cards,
.engagement-grid {

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

}

.metric-grid,
.credential-grid {

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

}

}


@media(max-width:600px) {

.hero {
padding-top:125px;
}

h1 {
letter-spacing:-2px;
}

.buttons {
flex-direction:column;
}

.cards,
.engagement-grid,
.metric-grid,
.credential-grid {

grid-template-columns:1fr;

}

.metric {

border-right:none;

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

}

.timeline:before {

left:6px;

}

.timeline-item {

grid-template-columns:1fr;

gap:5px;

padding-left:27px;

}

.timeline-date {

text-align:left;

}

.timeline-body {

padding-left:0;

}

.timeline-body:before {

left:-27px;

}

.timeline-item.current .timeline-body:before,
.timeline-item.oracle .timeline-body:before {

left:-31px;

}

.connect-box {
padding:30px;
}

.footer-grid {

display:grid;

gap:15px;

}

}