@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --bg:          #050505;
    --ink:         #e8e8e8;
    --ink-dim:     #888;
    --ink-faint:   #444;
    --line:        rgba(255,255,255,0.10);

    --accent:        #0047FF;
    --accent-bright: #7FB0FF;
    --accent-soft:   rgba(0,71,255,0.18);
    --accent-line:   rgba(0,71,255,0.35);

    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --sans: 'Space Grotesk', system-ui, sans-serif;
    --px: clamp(20px, 4.5vw, 64px);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { background:var(--bg); overflow-x:hidden; }
body { color:var(--ink); font-family:var(--mono); font-size:14px; line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased; }
::selection { background:var(--accent); color:var(--bg); }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

.site-wrap { display:flex; flex-direction:column; min-height:100vh; }
main { flex:1; }

.site-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px var(--px);
    font-family:var(--mono);
    font-size:13px;
}

.site-logo { display:flex; align-items:center; opacity:1; transition:opacity 140ms ease; }
.site-logo:hover { opacity:0.8; }
.site-logo img { height:22px; width:auto; }

.site-nav { display:flex; align-items:center; gap:12px; color:var(--ink-dim); }
.site-nav a { color:var(--ink-dim); transition:color 140ms ease; }
.site-nav a:hover, .site-nav a.active { color:var(--accent-bright); }
.nav-sep { color:var(--ink-faint); }

.site-footer {
    padding:24px var(--px);
    border-top:1px solid var(--line);
    font-size:11.5px;
    color:var(--ink-dim);
    text-align:center;
    line-height:1.6;
}

.btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:11px 20px 11px 22px;
    border:1px solid var(--line);
    border-radius:999px;
    font-family:var(--mono);
    font-size:13px;
    color:var(--ink);
    background:transparent;
    cursor:pointer;
    transition:border-color 180ms ease, color 180ms ease, transform 180ms ease, background 180ms ease;
}
.btn:hover { border-color:var(--accent-line); color:var(--accent-bright); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-arrow { display:inline-block; transition:transform 180ms ease; }
.btn:hover .btn-arrow { transform:translateX(3px); }

.btn-primary { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-bright); }
.btn-primary:hover { background:var(--accent); color:var(--ink); border-color:var(--accent); }

.label {
    font-size:10px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
}

.rule { border:none; border-top:1px solid var(--line); margin:0; }

/* hero */

.hero {
    padding:clamp(64px,10vw,120px) var(--px) clamp(56px,8vw,96px);
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:28px;
    max-width:920px;
}

.hero-title {
    font-family:var(--sans);
    font-weight:500;
    font-size:clamp(44px, 6.5vw, 72px);
    line-height:0.98;
    letter-spacing:-0.03em;
    color:var(--ink);
}

.hero-title strong { color:var(--accent); font-weight:500; }

.hero-body {
    font-size:14px;
    line-height:1.8;
    color:var(--ink-dim);
    max-width:58ch;
}

.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }

.hero-note {
    font-size:11.5px;
    color:var(--ink-dim);
    letter-spacing:0.02em;
}

/* placeholder */

.placeholder {
    border:1px dashed var(--line);
    padding:clamp(48px,6vw,80px) var(--px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
    border-bottom:1px solid var(--line);
}

.placeholder-label {
    font-size:10px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
}

.placeholder-text {
    font-size:13px;
    color:var(--ink-dim);
    max-width:44ch;
    line-height:1.6;
}

/* about hero */

.about-hero {
    padding:clamp(56px,8vw,96px) var(--px) clamp(40px,5vw,64px);
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:20px;
    max-width:800px;
}

.about-hero h1 {
    font-family:var(--sans);
    font-weight:500;
    font-size:clamp(44px,6.5vw,72px);
    line-height:0.98;
    letter-spacing:-0.03em;
    color:var(--ink);
}

.about-hero h1 strong { color:var(--accent); font-weight:500; }

.about-facts {
    font-size:12px;
    color:var(--ink-dim);
    max-width:60ch;
}

/* about services */

.about-services {
    max-width:1040px;
    margin:0 auto;
    width:100%;
    padding:clamp(48px,6vw,72px) var(--px);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(32px,4vw,48px) clamp(32px,5vw,64px);
}

.about-service h3 {
    font-family:var(--sans);
    font-weight:500;
    font-size:clamp(19px,2.2vw,22px);
    color:var(--ink);
    margin-bottom:8px;
}

.about-service p { font-size:14px; line-height:1.8; color:var(--ink-dim); }
.about-service p + p { margin-top:10px; }

.about-service.featured { grid-column:1 / -1; }
.about-service.featured p { max-width:70ch; }

/* about closing cta */

.about-cta-block {
    padding:clamp(48px,6vw,80px) var(--px);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
    border-bottom:1px solid var(--line);
}

.about-cta-block h2 {
    font-family:var(--sans);
    font-weight:500;
    font-size:clamp(26px,3.2vw,34px);
    color:var(--ink);
}

.about-cta-block p { font-size:14px; line-height:1.75; color:var(--ink-dim); max-width:52ch; }
.about-cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:4px; }

@media (max-width:900px) {
    .about-services { grid-template-columns:1fr; }
}

@media (max-width:600px) {
    .site-header { padding:20px 22px; }
}

@media (max-width:440px) {
    .site-header { flex-wrap:wrap; row-gap:10px; }
}