:root {
  --ink: #edf4ef;
  --muted: #90a39d;
  --deep: #061013;
  --panel: #0a1719;
  --line: rgba(199, 231, 218, 0.13);
  --aqua: #61dfca;
  --orange: #ff7a3d;
  --gold: #ffbd59;
  --shell: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--deep);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.shell { width: var(--shell); margin-inline: auto; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.nav { height: 92px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; }
.brand { display: flex; align-items: center; gap: 11px; font: 600 20px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.brand > span:last-child > span { color: var(--orange); }
.brand-mark { width: 36px; height: 36px; position: relative; display: inline-block; overflow: hidden; flex: 0 0 auto; }
.brand-mark img { position: absolute; width: 76px; max-width: none; left: -20px; top: -13px; }
.nav nav { display: flex; gap: 34px; color: var(--muted); font-size: 13px; }
.nav nav a:hover { color: var(--ink); }
.nav-cta { font-size: 13px; border-bottom: 1px solid rgba(237,244,239,.4); padding-bottom: 5px; }
.nav-cta span, .button span { color: var(--orange); margin-left: 7px; }

.hero { min-height: 760px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 45px; padding: 60px 0 90px; }
.eyebrow { color: var(--aqua); text-transform: uppercase; letter-spacing: .17em; font: 600 10px/1.4 "Manrope", sans-serif; display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 22px; height: 1px; background: currentColor; }
h1, h2, h3 { font-family: "Manrope", sans-serif; margin: 0; }
h1 { font-size: clamp(54px, 6.1vw, 88px); line-height: .98; letter-spacing: -.065em; font-weight: 500; margin: 25px 0 27px; }
h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px rgba(237,244,239,.62); }
.lede { color: #a8b8b3; font-size: 17px; line-height: 1.72; max-width: 515px; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 37px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 23px; font: 600 12px/1 "Manrope", sans-serif; letter-spacing: .02em; }
.button.primary { background: var(--ink); color: #081113; transition: transform .25s, box-shadow .25s; }
.button.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(97,223,202,.14); }
.text-link { font-size: 12px; color: #b8c4c0; }
.text-link span { margin-left: 8px; color: var(--aqua); }
.access-note { color: #61736e; font-size: 10px; margin: 17px 0 0; letter-spacing: .03em; }

.system-view { min-height: 510px; position: relative; display: grid; place-items: center; perspective: 900px; }
.system-glow { position: absolute; width: 520px; height: 520px; background: radial-gradient(circle, rgba(29,143,129,.23), transparent 65%); filter: blur(15px); }
.hud { width: min(600px, 100%); aspect-ratio: 1.2; position: relative; background: rgba(7,22,24,.8); border: 1px solid rgba(119,216,197,.18); box-shadow: 0 40px 100px rgba(0,0,0,.35); transform: rotateY(-7deg) rotateX(3deg); backdrop-filter: blur(10px); }
.hud::before, .hud::after { content: ""; position: absolute; width: 20px; height: 20px; border-color: var(--aqua); opacity: .6; }
.hud::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.hud::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.hud-top, .hud-bottom { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: #6f8881; font: 600 8px/1 "Manrope"; letter-spacing: .14em; }
.live-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); margin-right: 7px; }
.map { position: relative; height: calc(100% - 118px); margin: 0 17px; border: 1px solid rgba(125,199,184,.1); overflow: hidden; background: radial-gradient(circle at 62% 40%, rgba(255,122,61,.1), transparent 16%), linear-gradient(rgba(92,180,164,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(92,180,164,.04) 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; }
.rack-grid { position: absolute; inset: 12% 8%; transform: skewY(-4deg); opacity: .72; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(88,214,192,.5) 8px 10px, transparent 11px 17px), repeating-linear-gradient(0deg, transparent 0 25px, rgba(88,214,192,.28) 26px 28px); mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent); }
.thermal-cloud { position: absolute; border-radius: 50%; filter: blur(24px); opacity: .45; z-index: 2; }
.cloud-one { width: 110px; height: 180px; background: var(--orange); top: 22%; right: 22%; animation: drift 7s ease-in-out infinite; }
.cloud-two { width: 150px; height: 90px; background: var(--aqua); bottom: 12%; left: 17%; animation: drift 9s ease-in-out infinite reverse; }
.scan-line { position: absolute; z-index: 3; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--aqua), transparent); box-shadow: 0 0 10px var(--aqua); animation: scan 5s linear infinite; }
.signal-tag { position: absolute; z-index: 4; padding: 8px 10px; border-left: 1px solid var(--orange); background: rgba(5,14,16,.86); font: 500 7px/1.4 "Manrope"; letter-spacing: .08em; }
.signal-tag span { color: #738983; display: block; }.signal-tag b { color: #dcebe6; font-weight: 500; }
.tag-one { top: 23%; right: 8%; }.tag-two { left: 15%; bottom: 17%; border-color: var(--aqua); }
.hud-bottom { height: 64px; justify-content: flex-start; gap: 10%; border-top: 1px solid rgba(125,199,184,.1); }
.hud-bottom div { display: flex; flex-direction: column; gap: 6px; }.hud-bottom span { color: #536b64; }.hud-bottom b { color: #d9e6e2; font-size: 10px; }.hud-bottom .aqua { color: var(--aqua); }
.coordinates { position: absolute; bottom: 3px; right: 0; color: #425651; font: 500 8px/1 "Manrope"; letter-spacing: .14em; }

.proof-line { min-height: 95px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #62766f; text-transform: uppercase; font: 500 9px/1 "Manrope"; letter-spacing: .15em; }
.proof-line p:first-child { color: #b4c2bd; }.proof-line b { color: var(--aqua); font-size: 12px; margin-right: 6px; }.proof-line div { width: 1px; height: 15px; background: var(--line); }
.capabilities { padding: 150px 0; }
.section-intro { display: grid; grid-template-columns: 1fr 1.15fr .8fr; align-items: start; gap: 40px; margin-bottom: 65px; }
.section-intro h2 { font-size: clamp(34px, 4vw, 55px); line-height: 1.12; letter-spacing: -.05em; font-weight: 500; }
.section-intro > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feature { min-height: 410px; position: relative; padding: 30px; background: var(--panel); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.feature-wide { grid-column: 1 / -1; min-height: 460px; }
.feature-number { color: #536a64; font: 500 9px/1 "Manrope"; letter-spacing: .13em; }
.feature > div:last-child { position: relative; z-index: 2; max-width: 510px; }
.feature-label { color: var(--aqua); text-transform: uppercase; font: 600 8px/1 "Manrope"; letter-spacing: .16em; }
.feature h3 { font-size: 27px; letter-spacing: -.04em; font-weight: 500; margin: 12px 0; }.feature p:last-child { color: #7e938d; max-width: 450px; font-size: 13px; line-height: 1.65; }
.mini-visual { position: absolute; pointer-events: none; }
.heat-visual { inset: 15px 30px 55px 46%; background: radial-gradient(ellipse at center, rgba(255,122,61,.55), rgba(255,189,89,.12) 27%, transparent 60%); filter: blur(1px); }
.heat-visual i { position: absolute; border: 1px solid rgba(255,167,91,.25); border-radius: 50%; inset: 10% 18%; transform: rotate(-12deg); }.heat-visual i:nth-child(2){inset:20% 28%}.heat-visual i:nth-child(3){inset:30% 38%}
.pulse-visual { width: 230px; height: 230px; border: 1px solid rgba(97,223,202,.12); border-radius: 50%; top: 40px; right: -35px; }.pulse-visual::before,.pulse-visual::after,.pulse-visual i { content:"";position:absolute;border:1px solid rgba(97,223,202,.18);border-radius:50%;inset:25px}.pulse-visual::after{inset:55px}.pulse-visual i{inset:92px;background:var(--aqua);box-shadow:0 0 30px var(--aqua)}
.flow-visual { top: 65px; right: 30px; width: 230px; }.flow-visual i { display:block;height:1px;background:linear-gradient(90deg,transparent,var(--orange),transparent);margin:30px;position:relative; }.flow-visual i::after { content:"";position:absolute;right:20%;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange); }

.signal { min-height: 670px; position: relative; display: grid; place-items: center; overflow: hidden; border-top: 1px solid var(--line); }
.signal::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(18,112,102,.17),transparent 45%); }
.signal-copy { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.eyebrow.centered { justify-content: center; }.signal h2 { font-size: clamp(43px, 6vw, 74px); max-width: 860px; letter-spacing: -.06em; line-height: 1.05; font-weight: 500; margin: 25px auto 16px; }.signal-copy > p:nth-child(3){color:var(--muted);margin-bottom:32px}.signal-orbit,.signal-orbit i{position:absolute;border:1px solid rgba(97,223,202,.08);border-radius:50%;}.signal-orbit{width:700px;height:700px}.signal-orbit i:nth-child(1){inset:75px}.signal-orbit i:nth-child(2){inset:150px}.signal-orbit i:nth-child(3){inset:225px;border-color:rgba(255,122,61,.12)}
.footer { min-height: 140px; display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; border-top: 1px solid var(--line); color: #586c66; font-size: 10px; }.footer > p:nth-child(2){text-align:center}.footer > p:last-child{text-align:right}.footer .brand{color:var(--ink)}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }.reveal.visible { opacity: 1; transform: none; }
@keyframes scan { from{top:0} to{top:100%} } @keyframes drift { 50%{transform:translate(20px,-12px) scale(1.08)} }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.scan-line,.thermal-cloud{animation:none}.reveal{opacity:1;transform:none;transition:none} }
@media (max-width: 850px) {
  :root{--shell:min(100% - 32px,1180px)}.nav nav{display:none}.hero{grid-template-columns:1fr;padding-top:65px}.system-view{min-height:430px}.section-intro{grid-template-columns:1fr}.section-intro .eyebrow{margin-bottom:0}.feature-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto}.proof-line p:first-child,.proof-line div{display:none}.footer{grid-template-columns:1fr;text-align:center;gap:22px;padding:35px 0}.footer .brand{justify-content:center}.footer>p:last-child{text-align:center}.footer>p:nth-child(2){margin:0}
}
@media (max-width: 520px) { .nav{height:74px}.nav-cta{font-size:11px}.hero{padding-top:35px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.system-view{min-height:330px}.hud{transform:none}.hud-bottom{gap:6%;padding:0 10px}.coordinates{display:none}.proof-line{font-size:7px}.capabilities{padding:95px 0}.feature{min-height:370px;padding:24px}.feature-wide{min-height:420px}.heat-visual{left:25%}.signal{min-height:570px} }

/* Warm editorial theme */
:root {
  --ink: #18393a;
  --muted: #687d78;
  --deep: #f4efe5;
  --panel: #fbf8f1;
  --line: rgba(34, 76, 72, .13);
  --aqua: #267f73;
  --orange: #d9653f;
  --gold: #d99a42;
}
body {
  background-image:
    radial-gradient(circle at 88% 4%, rgba(224, 151, 74, .15), transparent 27%),
    radial-gradient(circle at 4% 38%, rgba(65, 139, 124, .08), transparent 26%);
}
.noise { opacity: .022; }
.nav-cta { border-bottom-color: rgba(24, 57, 58, .35); }
h1 em { color: var(--orange); -webkit-text-stroke: 0; }
.lede { color: #5e746f; }
.button.primary {
  color: #fffaf0;
  background: var(--ink);
  border-radius: 4px;
}
.button.primary:hover {
  background: #215052;
  box-shadow: 0 12px 35px rgba(36, 88, 83, .18);
}
.text-link { color: #526964; }
.access-note { color: #87958f; }
.system-glow {
  background: radial-gradient(circle, rgba(217, 154, 66, .25), transparent 65%);
}
.hud {
  background: rgba(17, 49, 51, .97);
  border-color: rgba(255, 255, 255, .2);
  border-radius: 8px;
  box-shadow: 0 35px 80px rgba(52, 64, 54, .22), 18px 18px 0 rgba(213, 151, 70, .13);
  transform: rotateY(-5deg) rotateX(2deg);
  overflow: hidden;
}
.proof-line { color: #71847e; }
.proof-line p:first-child { color: #415f5a; }
.proof-line b { color: var(--orange); }
.feature-number { color: #8a9b95; }
.feature p:last-child { color: #6f837d; }
.signal { background: #eee5d6; }
.signal::before {
  background: radial-gradient(circle at 50% 50%, rgba(217, 101, 63, .12), transparent 43%);
}
.signal-orbit, .signal-orbit i { border-color: rgba(38, 127, 115, .1); }
.signal-orbit i:nth-child(3) { border-color: rgba(217, 101, 63, .15); }
.footer { color: #71847e; }
.cooling-story { padding: 145px 0 25px; }
.cooling-story-head {
  display: grid;
  grid-template-columns: 1.1fr .7fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 46px;
}
.cooling-story-head h2 {
  max-width: 700px;
  margin-top: 20px;
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.cooling-story-head > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.cooling-figure {
  margin: 0;
  padding: 14px;
  background: rgba(251, 248, 241, .7);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(60, 66, 55, .09);
}
.cooling-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.cooling-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 14px;
  background: var(--line);
}
.cooling-stages > div {
  display: flex;
  gap: 15px;
  padding: 22px;
  background: var(--panel);
}
.cooling-stages b {
  color: var(--orange);
  font: 600 10px/1.4 "Manrope", sans-serif;
  letter-spacing: .1em;
}
.cooling-stages span {
  color: #74857f;
  font-size: 11px;
  line-height: 1.5;
}
.cooling-stages strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font: 600 12px/1.35 "Manrope", sans-serif;
}
.question-feature { min-height: 510px; }
.question-feature .pulse-visual { opacity: .58; }
.question-intro {
  color: #6f837d;
  max-width: 390px;
  font-size: 13px;
  line-height: 1.6;
}
.example-questions {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.example-questions li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  color: #3f5d58;
  background: rgba(38, 127, 115, .055);
  border: 1px solid rgba(38, 127, 115, .12);
  border-radius: 5px;
  font-size: 11px;
  line-height: 1.45;
}
.example-questions li span {
  color: var(--orange);
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .hud { transform: none; box-shadow: 0 24px 55px rgba(52, 64, 54, .18); }
}

@media (max-width: 850px) {
  .cooling-story { padding-top: 95px; }
  .cooling-story-head { grid-template-columns: 1fr; gap: 18px; }
  .cooling-story-head > p { max-width: 570px; }
  .cooling-stages { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .cooling-figure { padding: 7px; }
  .cooling-stages > div { padding: 16px; }
}