:root { --ink:#24242a; --graphite:#55545c; --paper:#f7f7f4; --yellow:#fff06a; --cyan:#21bce3; --line:#deded9; --font-display:'Space Grotesk',Arial,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-display); font-optical-sizing:auto; font-synthesis:none; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }

.site-header { position:fixed; inset:0 0 auto; z-index:50; height:84px; padding:0 max(5vw,24px); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.94); border-bottom:1px solid rgba(36,36,42,.08); backdrop-filter:blur(18px); }
.brand img { width:188px; height:64px; object-fit:contain; object-position:left center; }
.nav-links { display:flex; align-items:center; gap:34px; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.nav-links a:not(.nav-cta) { position:relative; }
.nav-links a:not(.nav-cta)::after { content:''; position:absolute; height:2px; left:0; right:100%; bottom:-8px; background:var(--cyan); transition:right .25s; }
.nav-links a:hover::after { right:0; }
.nav-cta { padding:13px 21px; border-radius:3px; background:var(--ink); color:white; }
.menu-button { display:none; border:0; background:transparent; color:var(--ink); }

.hero { position:relative; min-height:820px; height:100vh; padding-top:84px; display:flex; align-items:center; overflow:hidden; background:#22242a; }
.hero-image { position:absolute; inset:84px 0 0; background:url('assets/homelab-workspace.png') center/cover no-repeat; transform:scale(1.015); }
.hero-shade { position:absolute; inset:84px 0 0; background:linear-gradient(90deg,rgba(20,21,26,.96) 0%,rgba(20,21,26,.88) 34%,rgba(20,21,26,.28) 69%,rgba(20,21,26,.1) 100%); }
.hero-content { position:relative; z-index:2; width:min(1200px,90vw); margin:0 auto; color:white; }
.eyebrow,.kicker { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; }
.eyebrow { display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.75); }
.eyebrow span { width:31px; height:3px; background:var(--yellow); }
.hero h1 { margin:26px 0 25px; max-width:820px; font-size:clamp(56px,6.4vw,100px); line-height:.94; letter-spacing:-.06em; font-weight:700; }
.hero h1 em { color:var(--yellow); font-style:normal; }
.hero-copy { max-width:620px; color:rgba(255,255,255,.76); font-size:19px; line-height:1.7; }
.hero-actions { display:flex; gap:14px; margin-top:34px; }
.button { border:0; display:inline-flex; align-items:center; justify-content:center; gap:11px; padding:16px 23px; border-radius:3px; font-weight:700; letter-spacing:-.015em; cursor:pointer; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button.primary { background:var(--yellow); color:var(--ink); }
.button.ghost { border:1px solid rgba(255,255,255,.34); color:white; }
.hero-proof { margin-top:66px; display:flex; gap:52px; }
.hero-proof div { display:grid; gap:4px; border-left:2px solid var(--cyan); padding-left:13px; }
.hero-proof strong { font-size:18px; }
.hero-proof span { color:rgba(255,255,255,.55); font-size:12px; }

.section { width:min(1200px,90vw); margin:0 auto; padding:125px 0; }
.section-heading h2,.solutions h2,.contact h2,.faq h2 { margin:14px 0 0; font-size:clamp(40px,4.5vw,66px); line-height:1.04; letter-spacing:-.05em; }
.kicker { color:#6c6b72; }
.kicker.light { color:var(--cyan); }
.intro { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; }
.intro-copy { align-self:end; margin:0 0 7px; color:#66656c; font-size:18px; line-height:1.75; }
.services-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); margin-top:35px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { min-height:345px; padding:30px; display:flex; flex-direction:column; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .25s,transform .25s; }
.service-card:hover { background:white; transform:translateY(-5px); }
.service-top { display:flex; justify-content:space-between; color:var(--cyan); }
.service-top span { color:#aaa9ae; font:600 11px/1 var(--font-mono); letter-spacing:.08em; }
.service-card h3 { margin:58px 0 15px; font-size:22px; letter-spacing:-.03em; }
.service-card p { margin:0; color:#74737a; font-size:14px; line-height:1.7; }
.service-card a { margin-top:auto; width:39px; height:39px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:white; }

.solutions { min-height:750px; display:grid; grid-template-columns:1fr 1fr; background:var(--ink); color:white; }
.solutions-visual { position:relative; min-height:650px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 45%,#3e3f48,#1d1d22 64%); }
.solutions-visual::before { content:''; position:absolute; width:520px; height:520px; border:1px solid rgba(33,188,227,.16); border-radius:50%; box-shadow:0 0 0 60px rgba(33,188,227,.025),0 0 0 120px rgba(33,188,227,.018); }
.dashboard-card { position:relative; z-index:2; width:min(470px,78%); padding:27px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(25,26,31,.88); box-shadow:0 35px 80px rgba(0,0,0,.32); transform:perspective(900px) rotateY(7deg) rotateX(2deg); }
.dash-head,.metric-row { display:flex; justify-content:space-between; align-items:center; }
.dash-head { padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.1); font-weight:680; }
.live { color:var(--cyan); font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.live::before { content:''; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--cyan); }
.metric-row { gap:12px; margin:17px 0; }
.metric-row div { flex:1; padding:15px; border-radius:8px; background:rgba(255,255,255,.05); }
.metric-row small { display:block; color:rgba(255,255,255,.48); font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.metric-row strong { font-size:28px; }
.chart { height:120px; padding:20px 8px 0; display:flex; align-items:end; gap:8px; border-radius:8px; background:rgba(255,255,255,.035); }
.chart i { flex:1; height:40%; background:linear-gradient(var(--cyan),rgba(33,188,227,.18)); border-radius:3px 3px 0 0; }
.chart i:nth-child(2){height:66%}.chart i:nth-child(3){height:52%}.chart i:nth-child(4){height:81%}.chart i:nth-child(5){height:61%}.chart i:nth-child(6){height:90%}.chart i:nth-child(7){height:73%}
.dash-list { display:flex; gap:18px; margin-top:16px; color:rgba(255,255,255,.55); font-family:var(--font-mono); font-size:9px; }
.dash-list span { display:flex; gap:5px; }.dash-list svg { color:var(--yellow); }
.floating-tag { position:absolute; z-index:3; right:9%; bottom:19%; display:flex; gap:9px; padding:13px 17px; border-radius:5px; background:white; color:var(--ink); font-size:12px; font-weight:700; box-shadow:0 14px 35px rgba(0,0,0,.25); }
.solutions-copy { padding:100px clamp(40px,7vw,120px); display:flex; flex-direction:column; justify-content:center; }
.solutions-copy>p:not(.kicker) { margin:26px 0 36px; color:rgba(255,255,255,.57); font-size:17px; line-height:1.75; }
.solution-list { display:grid; grid-template-columns:1fr 1fr; gap:23px; }
.solution-list span { display:flex; align-items:center; gap:12px; font-size:14px; }.solution-list svg { width:20px; color:var(--yellow); }

.centered { text-align:center; }
.process-line { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:75px; }
.process-line::before { content:''; position:absolute; left:0; right:0; top:20px; height:1px; background:var(--line); }
.process-line article { position:relative; padding-top:61px; }
.process-line article>span { position:absolute; top:0; left:0; width:40px; height:40px; display:grid; place-items:center; background:var(--paper); border:1px solid var(--ink); border-radius:50%; font:600 10px/1 var(--font-mono); }
.process-line article:nth-child(3)>span { background:var(--yellow); }
.process-line h3 { font-size:21px; margin:0 0 11px; }.process-line p { color:#77767d; font-size:14px; line-height:1.65; }

.faq { display:grid; grid-template-columns:.75fr 1.25fr; gap:110px; border-top:1px solid var(--line); }
.faq-lead { max-width:430px; color:#77767d; line-height:1.7; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item button { width:100%; padding:25px 0; border:0; background:none; display:flex; align-items:center; justify-content:space-between; text-align:left; font-weight:690; cursor:pointer; }
.faq-item button svg { transition:transform .3s; }.faq-item.active button svg { transform:rotate(180deg); }
.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s; }.faq-answer p { min-height:0; overflow:hidden; margin:0; color:#77767d; line-height:1.7; }
.faq-item.active .faq-answer { grid-template-rows:1fr; }.faq-item.active .faq-answer p { padding-bottom:24px; }

.contact { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; padding:110px max(5vw,24px); background:#2a2a30; color:white; }
.contact-copy { max-width:540px; margin-left:auto; }.contact-copy>p:not(.kicker) { color:rgba(255,255,255,.6); line-height:1.75; }
.contact-note { margin-top:32px; display:flex; gap:12px; color:rgba(255,255,255,.7); font-size:13px; }.contact-note svg { color:var(--yellow); flex:0 0 auto; }
.contact-form { max-width:650px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form[hidden],.success-card[hidden] { display:none !important; }
.contact-form label { display:grid; gap:8px; color:rgba(255,255,255,.65); font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.02em; }.contact-form .full { grid-column:1/-1; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid rgba(255,255,255,.16); border-radius:3px; padding:14px 15px; background:rgba(255,255,255,.06); color:white; outline:none; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--cyan); }.contact-form input::placeholder,.contact-form textarea::placeholder { color:rgba(255,255,255,.32); }
.contact-form .website-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-form .form-error { margin:0; padding:12px 14px; border:1px solid rgba(255,116,116,.45); border-radius:3px; background:rgba(160,20,20,.18); color:#ffd0d0; font-size:13px; }
.contact-form button:disabled { cursor:wait; opacity:.65; transform:none; }
.success-card { max-width:650px; padding:48px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); text-align:center; }.success-card>div { width:60px; height:60px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); color:var(--ink); }.success-card p { color:rgba(255,255,255,.6); }.success-card button { border:0; background:none; color:var(--cyan); cursor:pointer; }

footer { min-height:155px; padding:30px max(5vw,24px); display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:35px; background:white; }
footer img { width:190px; height:82px; object-fit:contain; } footer p { color:#77767d; font-size:13px; } footer span { color:#99989d; font-family:var(--font-mono); font-size:10px; }

@media(max-width:900px){
  .menu-button{display:block}.nav-links{position:absolute;top:84px;left:0;right:0;padding:25px;display:none;flex-direction:column;align-items:stretch;background:white;border-bottom:1px solid var(--line)}.nav-links.open{display:flex}.nav-cta{text-align:center}
  .hero{min-height:760px}.hero-shade{background:rgba(20,21,26,.78)}.hero h1{font-size:clamp(49px,12vw,76px)}.hero-proof{gap:20px;flex-wrap:wrap}
  .intro,.faq,.contact,.solutions{grid-template-columns:1fr}.intro{gap:30px}.services-grid{grid-template-columns:1fr 1fr}.solutions-visual{min-height:560px}.solutions-copy{padding:75px 7vw}.process-line{grid-template-columns:1fr 1fr}.process-line::before{display:none}.faq{gap:45px}.contact{gap:55px}.contact-copy{margin:0}footer{grid-template-columns:1fr;text-align:center}footer img{margin:auto}
}
@media(max-width:560px){
  .site-header{height:74px}.brand img{width:150px}.nav-links{top:74px}.hero{min-height:740px;padding-top:74px}.hero-image,.hero-shade{top:74px}.hero-content{padding-top:30px}.hero-actions{align-items:stretch;flex-direction:column}.hero-proof{margin-top:42px}.hero-proof div{width:calc(50% - 10px)}.section{padding:85px 0}.services-grid,.process-line,.solution-list{grid-template-columns:1fr}.service-card{min-height:290px}.contact{padding-top:80px;padding-bottom:80px}.contact-form{grid-template-columns:1fr}.contact-form label{grid-column:1/-1}.dashboard-card{width:88%;padding:18px}.floating-tag{right:4%}.dash-list{flex-direction:column;gap:5px}
}