:root {
  --ink: #07120f;
  --panel: #0d1e19;
  --panel-raised: #132b24;
  --line: #29473d;
  --mint: #b9f5d0;
  --muted: #9ab7ab;
  --signal: #ff7846;
  --signal-soft: #ffb08e;
  --paper: #f0f3ea;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 96px; --s-12: 128px;
  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--mint); background: var(--ink); font-family: "Noto Sans SC", sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.page-glow { position: fixed; z-index: -1; inset: -20%; background: radial-gradient(circle at 72% 12%, rgb(255 120 70 / 15%), transparent 24%), radial-gradient(circle at 12% 48%, rgb(64 157 117 / 11%), transparent 27%); pointer-events: none; }
.site-header { display: flex; min-height: 88px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(185 245 208 / 15%); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.brand-mark { color: var(--signal); font-family: "IBM Plex Mono", monospace; font-size: 21px; font-weight: 500; }
nav { display: flex; gap: var(--s-6); color: var(--muted); font-size: 14px; }
nav a, .header-action { transition: color 180ms ease; }
nav a:hover, .header-action:hover { color: var(--signal-soft); }
.header-action { color: var(--mint); font-size: 14px; font-weight: 600; }.header-action span { color: var(--signal); }
.hero { display: grid; grid-template-columns: 1fr .95fr; align-items: center; min-height: 690px; gap: var(--s-9); padding-block: var(--s-11); }
.eyebrow { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-5); color: var(--signal-soft); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); content: ""; }
h1, h2 { margin: 0; color: var(--paper); font-family: "Noto Serif SC", serif; font-weight: 900; letter-spacing: -.07em; line-height: 1.08; }h1 { font-size: clamp(48px, 6.4vw, 86px); }h2 { font-size: clamp(36px, 4.2vw, 62px); }h1 em, h2 em { color: var(--signal-soft); font-style: normal; }
.hero-text { max-width: 590px; margin: var(--s-6) 0 var(--s-7); color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4); min-height: 48px; padding: 0 var(--s-5); border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }.button:hover { transform: translateY(-2px); }.button:focus-visible, a:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }.primary { color: var(--ink); background: var(--signal); box-shadow: 0 12px 32px rgb(255 120 70 / 20%); }.primary:hover { background: var(--signal-soft); }.secondary { color: var(--mint); border-color: var(--line); background: rgb(13 30 25 / 70%); }.secondary:hover { border-color: var(--mint); }
.proof { display: flex; flex-wrap: wrap; gap: var(--s-6); margin: var(--s-9) 0 0; }.proof div { min-width: 94px; }.proof dt { color: var(--paper); font-family: "Noto Serif SC", serif; font-size: 27px; font-weight: 700; letter-spacing: -.05em; }.proof dd { margin: 0; color: var(--muted); font-size: 11px; }
.work-orbit { position: relative; width: min(480px, 100%); aspect-ratio: 1; justify-self: end; border: 1px solid rgb(185 245 208 / 17%); border-radius: 50%; background: radial-gradient(circle, rgb(255 120 70 / 14%), transparent 30%), linear-gradient(135deg, rgb(19 43 36 / 85%), rgb(7 18 15 / 30%)); box-shadow: inset 0 0 70px rgb(185 245 208 / 4%), 0 24px 80px rgb(0 0 0 / 28%); }
.work-orbit::after { position: absolute; inset: 9%; border: 1px dashed rgb(185 245 208 / 20%); border-radius: 50%; content: ""; animation: turn 26s linear infinite; }.orbit-ring { position: absolute; border: 1px solid rgb(185 245 208 / 16%); border-radius: 50%; }.ring-one { inset: 20%; }.ring-two { inset: 34%; border-color: rgb(255 120 70 / 26%); }.core { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 140px; aspect-ratio: 1; place-content: center; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid rgb(255 176 142 / 85%); background: linear-gradient(145deg, rgb(255 120 70 / 28%), rgb(13 30 25 / 92%)); box-shadow: 0 0 34px rgb(255 120 70 / 22%), inset 0 0 18px rgb(255 176 142 / 14%); text-align: center; }.core small, .core strong, .core i { transform: rotate(-45deg); }.core small { color: var(--signal-soft); font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .13em; }.core strong { color: var(--paper); font-family: "IBM Plex Mono", monospace; font-size: 18px; line-height: 1.1; }.core i { width: 30px; height: 2px; margin: var(--s-2) auto 0; background: var(--signal); }.orbit-node { position: absolute; z-index: 3; padding: var(--s-2) var(--s-3); border: 1px solid rgb(185 245 208 / 27%); border-radius: var(--radius-pill); background: rgb(7 18 15 / 92%); box-shadow: 0 8px 20px rgb(0 0 0 / 18%); color: var(--mint); font-family: "IBM Plex Mono", monospace; font-size: 10px; white-space: nowrap; }.n1 { top: 7%; left: 38%; }.n2 { top: 24%; right: -7%; }.n3 { bottom: 18%; right: 0; }.n4 { bottom: 5%; left: 35%; }.n5 { bottom: 25%; left: -9%; }.n6 { top: 25%; left: -5%; }.orbit-label { position: absolute; top: 17%; left: 20%; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .09em; }.pulse { position: absolute; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 15px var(--signal); animation: pulse 2.8s ease-in-out infinite; }.p1 { top: 31%; left: 30%; }.p2 { right: 25%; bottom: 31%; animation-delay: .8s; }.p3 { top: 61%; left: 20%; animation-delay: 1.6s; }
.signal-band { border-block: 1px solid var(--line); background: rgb(19 43 36 / 48%); }.signal-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-7); padding-block: var(--s-5); }.signal-inner p { margin: 0; color: var(--paper); font-family: "Noto Serif SC", serif; font-size: clamp(17px, 2vw, 23px); }.signal-inner span { color: var(--signal-soft); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.section { padding-block: var(--s-12); }.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: var(--s-9); align-items: end; margin-bottom: var(--s-9); }.section-heading .eyebrow { grid-column: 1 / -1; }.section-heading > p:last-child { margin: 0; max-width: 400px; color: var(--muted); }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }.product-card { min-height: 240px; padding: var(--s-6); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgb(13 30 25 / 55%); transition: background 220ms ease, transform 220ms ease; }.product-card:nth-child(3n) { border-right: 0; }.product-card:nth-child(n+4) { border-bottom: 0; }.product-card:hover { background: var(--panel-raised); transform: translateY(-4px); }.product-card span, .solution-list b, .principle-grid b { color: var(--signal); font-family: "IBM Plex Mono", monospace; font-size: 11px; }.product-card h3 { margin: var(--s-8) 0 var(--s-3); color: var(--paper); font-size: 20px; letter-spacing: -.04em; }.product-card p { min-height: 52px; margin: 0 0 var(--s-5); color: var(--muted); font-size: 14px; }.product-card a { color: var(--signal-soft); font-family: "IBM Plex Mono", monospace; font-size: 11px; }.product-card a b { margin-left: var(--s-1); color: var(--signal-soft); }.featured { background: linear-gradient(140deg, rgb(255 120 70 / 17%), rgb(19 43 36 / 87%)); }
.solutions { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgb(19 43 36 / 24%), transparent); }.solution-list { border-top: 1px solid var(--line); }.solution-list article { display: grid; grid-template-columns: 80px 1fr 1fr; gap: var(--s-6); align-items: center; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }.solution-list h3 { margin: 0; color: var(--paper); font-size: 22px; letter-spacing: -.04em; }.solution-list p, .solution-list span { margin: var(--s-1) 0 0; color: var(--muted); font-size: 13px; }.solution-list span { margin: 0; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }.principle-grid article { padding: var(--s-6); border-top: 1px solid var(--signal); background: rgb(13 30 25 / 55%); }.principle-grid h3 { margin: var(--s-7) 0 var(--s-3); color: var(--paper); font-size: 20px; }.principle-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.cta { padding: var(--s-12) 0; background: radial-gradient(circle at 68% 50%, rgb(255 120 70 / 19%), transparent 32%), var(--panel-raised); }.cta-inner { position: relative; padding: var(--s-11); overflow: hidden; border: 1px solid rgb(255 176 142 / 42%); border-radius: var(--radius-lg); background: linear-gradient(105deg, rgb(7 18 15 / 94%), rgb(19 43 36 / 74%)); }.cta-inner::after { position: absolute; top: -80px; right: -30px; width: 270px; aspect-ratio: 1; border: 1px solid rgb(255 176 142 / 30%); border-radius: 50%; box-shadow: 0 0 0 38px rgb(255 120 70 / 5%), 0 0 0 76px rgb(255 120 70 / 4%); content: ""; }.cta h2 { position: relative; z-index: 1; }.cta-inner > p:not(.eyebrow) { max-width: 510px; margin: var(--s-5) 0 var(--s-6); color: var(--muted); }.cta .button { position: relative; z-index: 1; }
.footer { display: flex; min-height: 120px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }.footer p { margin: 0; }.footer span:last-child { font-family: "IBM Plex Mono", monospace; font-size: 10px; }
@keyframes turn { to { transform: rotate(360deg); } } @keyframes pulse { 50% { transform: scale(1.7); opacity: .25; } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-block: var(--s-10); }.work-orbit { justify-self: center; width: min(480px, 88vw); }.section-heading { grid-template-columns: 1fr; gap: var(--s-5); }.section-heading > p:last-child { max-width: 620px; }.products-grid, .principle-grid { grid-template-columns: repeat(2, 1fr); }.product-card:nth-child(3n) { border-right: 1px solid var(--line); }.product-card:nth-child(2n) { border-right: 0; }.product-card:nth-child(3) { border-bottom: 1px solid var(--line); }.product-card:nth-child(n+5) { border-bottom: 0; } }
@media (max-width: 600px) { .container { width: min(100% - 32px, 1200px); }.site-header { min-height: 68px; } nav { display: none; }.header-action { font-size: 12px; }.hero { gap: var(--s-8); min-height: auto; }.hero-text { font-size: 15px; }.proof { gap: var(--s-4); }.proof div { min-width: 84px; }.work-orbit { width: 100%; }.orbit-node { font-size: 8px; padding: 5px 7px; }.core { width: 110px; }.core strong { font-size: 14px; }.orbit-label { font-size: 7px; }.signal-inner { display: block; }.signal-inner span { display: block; margin-top: var(--s-3); white-space: normal; }.section { padding-block: var(--s-10); }.products-grid, .principle-grid { grid-template-columns: 1fr; }.product-card, .product-card:nth-child(n) { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }.product-card:last-child { border-bottom: 0; }.product-card h3 { margin-top: var(--s-6); }.product-card p { min-height: 0; }.solution-list article { grid-template-columns: 42px 1fr; gap: var(--s-3); }.solution-list article > span { grid-column: 2; }.cta-inner { padding: var(--s-8) var(--s-6); }.cta-inner::after { right: -135px; }.footer { min-height: 100px; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }.footer p { width: 100%; order: 3; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }