:root {
  color-scheme: dark;
  --bg: #070b14;
  --bg-soft: #0b1120;
  --panel: rgba(14, 22, 39, .82);
  --line: rgba(129, 155, 202, .17);
  --line-bright: rgba(112, 227, 230, .32);
  --text: #f2f5ff;
  --muted: #8793ae;
  --cyan: #6ce7e2;
  --blue: #7197ff;
  --purple: #a28bff;
  --green: #69e4b1;
  --red: #ff7189;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: rgba(108, 231, 226, .25); color: #fff; }
.shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; position: relative; z-index: 1; }
.ambient { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(90px); opacity: .15; }
.ambient-one { width: 580px; height: 500px; top: 0; right: -150px; background: #4269ff; }
.ambient-two { width: 520px; height: 520px; top: 540px; left: -270px; background: #22cfc6; opacity: .08; }
.grid-overlay { position: absolute; inset: 0 0 auto; height: 1120px; pointer-events: none; opacity: .25; background-image: linear-gradient(rgba(128, 158, 204, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 158, 204, .07) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000 0%, transparent 96%); }
.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(145, 163, 201, .12); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 29px; height: 29px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; transform: rotate(-8deg); }
.brand-mark span { border-radius: 3px; background: var(--cyan); box-shadow: 0 0 12px rgba(108, 231, 226, .16); }
.brand-mark span:nth-child(2) { background: var(--blue); transform: translateY(3px); }
.brand-mark span:nth-child(3) { background: var(--purple); transform: translateX(3px); }
.brand-mark span:nth-child(4) { background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.brand-word { font-size: 19px; font-weight: 800; letter-spacing: -.065em; }
.brand-word > span { color: var(--cyan); font-weight: 500; }
.nav-links { display: flex; gap: 36px; margin-left: 60px; }
.nav-links a { color: #9aa6bf; font-size: 12px; transition: color .2s; }
.nav-links a:hover { color: #fff; }
.header-right { display: flex; align-items: center; gap: 22px; }
.system-status { display: inline-flex; align-items: center; gap: 8px; color: #ff8297; font: 10px var(--mono); letter-spacing: .08em; }
.status-dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; box-shadow: 0 0 13px rgba(255, 113, 137, .9); }
.blink { animation: blink 1.15s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .18; } }
.header-cta { border: 1px solid rgba(108, 231, 226, .35); padding: 11px 15px; border-radius: 5px; color: #d9fffc; font-size: 11px; font-weight: 600; transition: background .2s, border-color .2s; }
.header-cta span { margin-left: 9px; color: var(--cyan); }
.header-cta:hover { background: rgba(108, 231, 226, .08); border-color: var(--cyan); }
.menu-toggle { display: none; }
.hero { padding-top: 94px; padding-bottom: 56px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; min-height: 640px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 22px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 10px; color: var(--cyan); font: 10px var(--mono); letter-spacing: .12em; }
.eyebrow-line, .section-kicker > span { width: 19px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px rgba(108, 231, 226, .65); }
.eyebrow-tag { color: #66728c; margin-left: 5px; font-size: 9px; }
h1 { margin: 27px 0 23px; font-size: clamp(54px, 6vw, 78px); line-height: .99; letter-spacing: -.075em; font-weight: 700; }
.gradient-text { color: transparent; background: linear-gradient(105deg, #78eee4 3%, #81b9ff 51%, #b5a2ff 98%); -webkit-background-clip: text; background-clip: text; }
.hero-description { max-width: 440px; margin: 0; color: #98a4bd; font-size: 14px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 31px; }
.button { min-height: 46px; display: inline-flex; justify-content: center; align-items: center; gap: 20px; padding: 0 17px; border-radius: 5px; font-size: 11px; font-weight: 700; transition: transform .2s, border-color .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #061214; background: linear-gradient(110deg, #78eee4, #8bc8ff); box-shadow: 0 8px 28px rgba(73, 205, 211, .12); }
.button-primary:hover { background: linear-gradient(110deg, #a0fff6, #b0d8ff); }
.button-primary span { font-size: 16px; }
.button-quiet { color: #c1c9da; border: 1px solid rgba(145, 163, 201, .19); background: rgba(255,255,255,.015); }
.button-quiet:hover { border-color: rgba(108, 231, 226, .4); }
.play-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(108, 231, 226, .35); border-radius: 50%; color: var(--cyan); font-size: 13px; }
.hero-footnote { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 31px; color: #7d8aa4; font-size: 10px; }
.hero-footnote b { color: #44516a; font-weight: 400; }
.hero-footnote .mini-check { color: var(--green); border: 1px solid rgba(105, 228, 177, .3); border-radius: 50%; width: 16px; height: 16px; display: inline-grid; place-items: center; font-size: 10px; }
.footnote-tail { color: #58657f; }
.dashboard-wrap { position: relative; min-width: 0; padding: 26px 0 22px 8px; perspective: 1200px; }
.dashboard-glow { position: absolute; inset: 12% 4% 0; background: linear-gradient(130deg, rgba(105, 110, 255, .2), rgba(72, 218, 217, .1)); filter: blur(55px); }
.dashboard { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(145, 163, 201, .25); border-radius: 10px; background: linear-gradient(145deg, rgba(18, 27, 47, .98), rgba(9, 15, 28, .98)); box-shadow: 0 30px 90px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.04); transform: rotateY(-5deg) rotateX(2deg); }
.dash-topbar { height: 47px; display: flex; justify-content: space-between; align-items: center; padding: 0 17px; border-bottom: 1px solid rgba(145, 163, 201, .12); background: rgba(255,255,255,.015); }
.dash-brand { display: flex; align-items: center; gap: 9px; color: #8190ab; font: 9px var(--mono); letter-spacing: .13em; }
.tiny-mark { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 5px; color: #061214; background: var(--cyan); font: 700 12px Inter,sans-serif; }
.dash-top-right { display: flex; align-items: center; gap: 11px; }
.dash-pill { color: #91a0bc; font: 8px var(--mono); border: 1px solid rgba(145,163,201,.18); padding: 5px 7px; border-radius: 3px; }
.avatar { display: grid; place-items: center; width: 24px; height: 24px; color: #d7ceff; background: #443e72; border-radius: 50%; font-size: 8px; }
.dash-content { padding: 23px 22px 20px; }
.dash-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-overline { color: #72819e; font: 8px var(--mono); letter-spacing: .08em; }
.dash-heading h2 { margin: 9px 0 4px; font-size: 16px; letter-spacing: -.04em; }
.dash-heading p { margin: 0; color: #77849f; font-size: 9px; }
.cyan { color: var(--cyan); }
.dash-add { flex-shrink: 0; border: 1px solid rgba(108,231,226,.32); border-radius: 4px; padding: 8px 10px; color: var(--cyan); font-size: 13px; }
.dash-add span { color: #b8c5da; font-size: 8px; margin-left: 4px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 20px; }
.metric-card { position: relative; overflow: hidden; min-width: 0; min-height: 105px; padding: 12px 11px; border: 1px solid rgba(145,163,201,.14); border-radius: 5px; background: rgba(255,255,255,.018); }
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 3px; color: #7887a4; font: 7px var(--mono); letter-spacing: .035em; white-space: nowrap; }
.metric-icon { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; font: normal 11px Inter,sans-serif; }
.metric-icon.purple { color: var(--purple); background: rgba(162,139,255,.12); }
.metric-icon.cyan { color: var(--cyan); background: rgba(108,231,226,.1); }
.metric-icon.green { color: var(--green); background: rgba(105,228,177,.1); }
.metric-card > strong { display: block; margin-top: 10px; font-size: 24px; letter-spacing: -.07em; }
.metric-unit { color: #a2afc7; font-size: 13px; margin-left: 3px; }
.metric-card > small { display: block; margin-top: 4px; color: #65738e; font-size: 8px; }
.positive { color: var(--green); }
.sparkline { position: absolute; right: 10px; bottom: 11px; display: flex; align-items: end; gap: 3px; height: 22px; opacity: .8; }
.sparkline i { width: 3px; border-radius: 2px 2px 0 0; }
.spark-purple i { background: var(--purple); }
.spark-cyan i { background: var(--cyan); }
.sparkline i:nth-child(1) { height: 35%; }.sparkline i:nth-child(2) { height: 55%; }.sparkline i:nth-child(3) { height: 42%; }.sparkline i:nth-child(4) { height: 75%; }.sparkline i:nth-child(5) { height: 60%; }.sparkline i:nth-child(6) { height: 90%; }.sparkline i:nth-child(7) { height: 70%; }.sparkline i:nth-child(8) { height: 100%; }
.progress-track { height: 3px; margin-top: 9px; background: rgba(255,255,255,.08); border-radius: 5px; }.progress-track span { display: block; width: 94%; height: 100%; border-radius: inherit; background: var(--green); }
.dash-lower { display: grid; grid-template-columns: 1.45fr .8fr; gap: 10px; margin-top: 11px; }
.project-panel, .time-panel { min-width: 0; border: 1px solid rgba(145,163,201,.14); border-radius: 5px; padding: 13px 11px; background: rgba(255,255,255,.014); }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 4px; color: #8795b0; font: 7px var(--mono); letter-spacing: .06em; }
.panel-title > span { color: var(--cyan); font-size: 7px; white-space: nowrap; }
.project-row { display: flex; align-items: center; gap: 7px; padding: 12px 0; border-bottom: 1px solid rgba(145,163,201,.09); }
.project-row:last-child { border-bottom: 0; padding-bottom: 0; }
.project-symbol { flex-shrink: 0; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 5px; font-size: 9px; font-weight: 700; }
.symbol-purple { color: #c0b3ff; background: rgba(162,139,255,.14); }.symbol-cyan { color: var(--cyan); background: rgba(108,231,226,.1); }.symbol-green { color: var(--green); background: rgba(105,228,177,.1); }
.project-info { min-width: 65px; flex: 1; }.project-info strong { display: block; font-size: 8px; font-weight: 600; white-space: nowrap; }.project-info small { display: block; margin-top: 4px; color: #687691; font-size: 7px; white-space: nowrap; }
.project-progress { width: 45px; flex-shrink: 0; }.project-progress > div { height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; }.project-progress > div span { display: block; height: 100%; background: var(--purple); border-radius: inherit; }.project-row:nth-of-type(3) .project-progress > div span { background: var(--cyan); }.project-row:nth-of-type(4) .project-progress > div span { background: var(--green); }.project-progress small { display: block; margin-top: 4px; color: #75839e; font-size: 7px; text-align: right; }
.project-state { display: none; font: 6px var(--mono); letter-spacing: .04em; }.state-active { color: var(--green); }.state-review { color: #e4bd78; }
.time-total { margin-top: 17px; font-size: 24px; font-weight: 700; letter-spacing: -.06em; }.time-total span { margin-left: 3px; color: #8795b0; font-size: 9px; font-weight: 400; letter-spacing: 0; }
.week-bars { display: flex; justify-content: space-between; align-items: end; height: 76px; gap: 5px; margin-top: 7px; }.week-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 6px; }.week-bars i { display: block; width: 100%; max-width: 14px; min-height: 4px; border-radius: 3px 3px 1px 1px; background: linear-gradient(to top, #6d76ee, #79d9e5); opacity: .85; }.week-bars small { color: #64728e; font: 7px var(--mono); }
.dash-bottom { height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-top: 1px solid rgba(145,163,201,.12); color: #687791; font: 7px var(--mono); letter-spacing: .04em; }.dash-bottom > span { display: flex; align-items: center; gap: 6px; }.dash-bottom b { color: var(--cyan); font-size: 12px; }
.tiny-live { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px rgba(105,228,177,.8); }
.float-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid rgba(145,163,201,.22); border-radius: 7px; background: rgba(12,19,34,.94); box-shadow: 0 15px 40px rgba(0,0,0,.28); backdrop-filter: blur(15px); }
.float-chip strong, .float-chip small { display: block; white-space: nowrap; }.float-chip strong { font-size: 9px; font-weight: 600; }.float-chip small { margin-top: 5px; color: #7d8ba5; font-size: 8px; }
.chip-top { top: 3px; right: -22px; }.chip-bottom { bottom: 0; left: -18px; }
.chip-icon, .chip-ring { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; color: var(--green); background: rgba(105,228,177,.11); font-size: 13px; }.chip-ring { border: 1px solid rgba(108,231,226,.24); color: var(--cyan); background: rgba(108,231,226,.07); border-radius: 50%; }
.orbit { position: absolute; z-index: 0; border: 1px solid rgba(113,151,255,.13); border-radius: 50%; pointer-events: none; }.orbit-a { width: 440px; height: 440px; right: -100px; top: 30px; }.orbit-b { width: 520px; height: 520px; right: -140px; top: -10px; border-color: rgba(108,231,226,.07); }
.hero-index { position: absolute; left: 0; bottom: 12px; display: flex; align-items: center; gap: 12px; color: #586782; font: 8px var(--mono); letter-spacing: .1em; }.hero-index > span:first-child { color: var(--cyan); }.index-line { width: 48px; height: 1px; background: rgba(108,231,226,.5); }
.signal-strip { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.15fr; align-items: center; gap: 20px; padding: 25px 0; border-top: 1px solid rgba(145,163,201,.14); border-bottom: 1px solid rgba(145,163,201,.14); }
.signal-intro { color: #f0f4ff; font-size: 10px; font-weight: 700; line-height: 1.8; letter-spacing: .07em; }.signal-intro span { color: #6d7b97; font-weight: 500; }
.signal-item { min-width: 0; display: flex; align-items: center; gap: 12px; }.signal-number { align-self: flex-start; padding-top: 3px; color: #56637d; font: 8px var(--mono); }.signal-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; color: var(--cyan); border: 1px solid rgba(108,231,226,.2); border-radius: 7px; background: rgba(108,231,226,.045); font-size: 18px; }.signal-item:nth-child(3) .signal-icon { color: var(--blue); border-color: rgba(113,151,255,.25); background: rgba(113,151,255,.06); }.signal-item:nth-child(4) .signal-icon { color: var(--purple); border-color: rgba(162,139,255,.25); background: rgba(162,139,255,.06); }.signal-item strong, .signal-item small { display: block; }.signal-item strong { font-size: 10px; font-weight: 600; white-space: nowrap; }.signal-item small { margin-top: 5px; color: #75829c; font-size: 9px; line-height: 1.5; }
.features-section { padding-top: 112px; padding-bottom: 108px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 38px; }.section-kicker { color: #8996b0; }.section-kicker > span { background: var(--purple); box-shadow: 0 0 8px rgba(162,139,255,.5); }.section-heading h2, .closing h2 { margin: 20px 0 0; font-size: clamp(38px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.07em; font-weight: 650; }.section-heading > p { max-width: 390px; margin: 0 0 5px; color: #8793ae; font-size: 12px; line-height: 1.9; }
.feature-grid { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 14px; }.feature-card { min-width: 0; min-height: 330px; display: flex; flex-direction: column; padding: 23px 21px 22px; overflow: hidden; border: 1px solid rgba(145,163,201,.16); border-radius: 8px; background: linear-gradient(145deg, rgba(17,26,45,.86), rgba(9,14,26,.9)); transition: border-color .25s, transform .25s; }.feature-card:hover { transform: translateY(-4px); border-color: rgba(108,231,226,.35); }.feature-top { display: flex; align-items: center; justify-content: space-between; }.feature-index { color: #6d7a95; font: 9px var(--mono); }.feature-symbol { display: grid; place-items: center; width: 34px; height: 34px; color: var(--cyan); border: 1px solid rgba(108,231,226,.2); border-radius: 6px; background: rgba(108,231,226,.05); font-size: 17px; }
.feature-copy { margin-top: auto; padding-top: 24px; }.feature-copy h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.035em; }.feature-copy p { max-width: 320px; margin: 9px 0 0; color: #8290aa; font-size: 10px; line-height: 1.8; }
.mini-kanban { margin-top: 20px; padding: 12px 10px; border: 1px solid rgba(145,163,201,.14); border-radius: 5px; background: rgba(4,8,16,.28); }.kanban-head { display: flex; justify-content: space-between; color: #8997b1; font: 7px var(--mono); letter-spacing: .06em; }.kanban-count { color: #586781; }.kanban-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 13px; }.kanban-column { min-width: 0; }.kanban-label { display: flex; justify-content: space-between; gap: 2px; color: #687691; font: 6px var(--mono); }.kanban-label b { color: #a5b2ca; font-weight: 400; }.task { margin-top: 7px; padding: 8px 6px; border: 1px solid rgba(145,163,201,.13); border-radius: 4px; background: rgba(255,255,255,.02); }.task-highlight { border-color: rgba(108,231,226,.3); background: rgba(108,231,226,.035); }.task-line { display: block; width: 18px; height: 2px; margin-bottom: 7px; border-radius: 3px; }.task-violet { background: var(--purple); }.task-blue { background: var(--blue); }.task-cyan { background: var(--cyan); }.task-green { background: var(--green); }.task > span { display: block; overflow: hidden; color: #b4bfd4; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.task > small { display: block; margin-top: 6px; color: #687691; font: 5px var(--mono); white-space: nowrap; }.task-avatars { display: flex; margin-top: 8px; }.task-avatars i { display: grid; place-items: center; width: 15px; height: 15px; margin-right: -3px; border: 1px solid #111a2a; border-radius: 50%; background: #4d467a; color: #ddd6ff; font: normal 5px Inter,sans-serif; }.task-avatars i + i { background: #315d6b; color: #b9ffff; }
.time-visual { min-height: 154px; display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 10px; padding: 15px 0; }.clock-face { position: relative; width: 104px; height: 104px; flex-shrink: 0; border: 1px solid rgba(108,231,226,.26); border-radius: 50%; background: radial-gradient(circle at center, rgba(108,231,226,.09), rgba(108,231,226,.01) 68%); box-shadow: inset 0 0 30px rgba(108,231,226,.04), 0 0 30px rgba(108,231,226,.04); }.clock-face::before, .clock-face::after { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(108,231,226,.14); border-radius: 50%; }.clock-face::after { inset: 20px; border-style: solid; border-color: rgba(162,139,255,.15); }.clock-center { position: absolute; z-index: 2; width: 7px; height: 7px; top: calc(50% - 3.5px); left: calc(50% - 3.5px); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }.clock-hand { position: absolute; z-index: 1; left: calc(50% - 1px); bottom: 50%; width: 2px; border-radius: 3px; transform-origin: bottom; background: var(--cyan); }.hand-hour { height: 25px; transform: rotate(35deg); }.hand-minute { height: 36px; transform: rotate(140deg); background: var(--purple); }.clock-tick { position: absolute; left: calc(50% - 1px); top: 5px; width: 2px; height: 6px; background: #8196b7; }.tick-2 { top: calc(50% - 1px); left: auto; right: 5px; transform: rotate(90deg); }.tick-3 { top: auto; bottom: 5px; }.tick-4 { top: calc(50% - 1px); left: 5px; transform: rotate(90deg); }.time-visual-data { min-width: 0; }.time-visual-data > small { display: block; color: #71809b; font: 6px var(--mono); letter-spacing: .06em; white-space: nowrap; }.time-visual-data > strong { display: block; margin: 9px 0; font-size: 25px; letter-spacing: -.07em; white-space: nowrap; }.time-visual-data > strong span { color: var(--cyan); font-size: 12px; margin-left: 3px; }.time-line { width: 100%; height: 3px; margin-bottom: 8px; background: rgba(255,255,255,.08); }.time-line span { display: block; width: 82%; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.report-visual { margin-top: 22px; padding: 12px 11px 10px; border: 1px solid rgba(145,163,201,.14); border-radius: 5px; background: rgba(4,8,16,.28); }.report-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; color: #8290aa; font: 6px var(--mono); }.report-live { color: var(--green); white-space: nowrap; }.report-live i { display: inline-block; width: 4px; height: 4px; margin-right: 4px; border-radius: 50%; background: var(--green); }.report-score { margin-top: 12px; }.report-score strong { display: block; color: #b9adff; font-size: 23px; letter-spacing: -.06em; }.report-score span { color: #75839d; font: 6px var(--mono); letter-spacing: .06em; }.report-chart { position: relative; height: 74px; margin-top: 7px; padding-left: 25px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 22px, rgba(145,163,201,.1) 23px, transparent 24px); }.report-chart svg { width: 100%; height: 100%; overflow: visible; }.chart-y { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; color: #56637c; font: 6px var(--mono); }.chart-x { display: flex; justify-content: space-between; padding-left: 25px; margin-top: 5px; color: #64718b; font: 6px var(--mono); }
.closing { min-height: 350px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 48px 50px; overflow: hidden; border: 1px solid rgba(145,163,201,.18); border-radius: 10px; background: radial-gradient(ellipse at 15% 5%, rgba(108,231,226,.08), transparent 45%), radial-gradient(ellipse at 90% 95%, rgba(162,139,255,.1), transparent 45%), linear-gradient(130deg, rgba(17,27,46,.9), rgba(8,13,25,.94)); }
.closing-content { position: relative; z-index: 1; max-width: 530px; }.closing h2 { margin-top: 20px; font-size: clamp(42px, 5vw, 60px); }.closing-content > p { max-width: 420px; margin: 17px 0 23px; color: #8d9ab4; font-size: 12px; line-height: 1.9; }.closing-decoration { position: absolute; top: -90px; right: 15%; width: 390px; height: 390px; opacity: .6; transform: rotate(28deg); }.closing-decoration span { position: absolute; inset: 0; border: 1px solid rgba(108,231,226,.16); border-radius: 35%; }.closing-decoration span:nth-child(2) { inset: 25px; border-color: rgba(113,151,255,.2); }.closing-decoration span:nth-child(3) { inset: 50px; border-color: rgba(162,139,255,.19); }.closing-decoration span:nth-child(4) { inset: 75px; border-color: rgba(108,231,226,.12); }.closing-decoration span:nth-child(5) { inset: 100px; border-color: rgba(113,151,255,.18); }
.closing-status { position: relative; z-index: 1; flex-shrink: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 15px; min-width: 200px; padding: 18px; border: 1px solid rgba(145,163,201,.17); border-radius: 6px; background: rgba(5,10,19,.64); }.status-orb { grid-row: span 2; width: 9px; height: 9px; align-self: start; margin-top: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 13px rgba(255,113,137,.8); }.closing-status small, .closing-status strong, .closing-status div > span { display: block; }.closing-status small { color: #697791; font: 7px var(--mono); letter-spacing: .07em; }.closing-status strong { margin-top: 7px; color: #ff8a9c; font: 11px var(--mono); letter-spacing: .04em; }.closing-status div > span { margin-top: 5px; color: #62708a; font: 7px var(--mono); }.status-divider { grid-column: 2; width: 100%; height: 1px; margin: 2px 0; background: rgba(145,163,201,.13); }.closing-status .status-divider + div strong { color: var(--cyan); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 27px; padding-bottom: 28px; }.footer-brand .brand-mark { width: 21px; height: 21px; gap: 2px; }.footer-brand .brand-word { font-size: 15px; }.footer-copy, .copyright { color: #5f6c86; font: 8px var(--mono); letter-spacing: .09em; }.footer-separator { margin: 0 8px; color: #35415a; }
@media (min-width: 1400px) { .hero { min-height: 690px; }.dashboard { transform: rotateY(-5deg) rotateX(2deg) scale(1.025); } }
@media (max-width: 1000px) { .shell { width: min(100% - 44px, 820px); }.hero { grid-template-columns: 1fr; gap: 40px; padding-top: 72px; padding-bottom: 72px; }.hero-copy { max-width: 620px; }.hero-description { max-width: 520px; }.dashboard-wrap { width: min(100%, 680px); margin: 0 auto; padding-inline: 12px; }.hero-index { bottom: 24px; }.signal-strip { grid-template-columns: repeat(2, 1fr); row-gap: 23px; }.signal-intro { grid-row: span 1; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-large { grid-column: 1 / -1; }.feature-large .mini-kanban { max-width: 600px; width: 100%; margin-inline: auto; }.closing { padding: 42px 35px; } }
@media (max-width: 650px) { .shell { width: calc(100% - 36px); }.site-header { height: 76px; }.nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; margin: 0; padding: 17px; flex-direction: column; gap: 18px; border: 1px solid var(--line); border-radius: 7px; background: #0b1120; z-index: 10; }.nav-links.is-open { display: flex; }.header-right { gap: 13px; }.system-status { font-size: 8px; }.header-cta { padding: 9px 10px; font-size: 10px; }.header-cta span { margin-left: 4px; }.menu-toggle { display: flex; flex-direction: column; gap: 5px; justify-content: center; width: 28px; height: 30px; padding: 5px; border: 0; background: transparent; }.menu-toggle span { height: 1px; width: 18px; background: #b7c5dd; }.hero { padding-top: 61px; gap: 32px; min-height: auto; }.eyebrow { flex-wrap: wrap; font-size: 8px; }.eyebrow-tag { display: none; } h1 { margin-top: 23px; font-size: clamp(49px, 13vw, 70px); }.hero-description { font-size: 13px; }.hero-actions { align-items: stretch; flex-direction: column; max-width: 270px; }.button { justify-content: space-between; }.hero-footnote { font-size: 9px; gap: 6px; }.footnote-tail { flex-basis: 100%; margin-left: 25px; }.dashboard-wrap { padding: 25px 0 30px; width: 100%; }.dashboard { transform: none; }.dash-content { padding: 17px 12px 14px; }.dash-topbar { padding-inline: 12px; }.dash-heading h2 { font-size: 13px; }.dash-heading p { font-size: 8px; }.dash-add { padding: 7px; }.dash-add span { display: none; }.dash-overline { font-size: 7px; }.metric-grid { gap: 5px; margin-top: 15px; }.metric-card { min-height: 96px; padding: 9px 7px; }.metric-label { font-size: 6px; }.metric-icon { display: none; }.metric-card > strong { font-size: 21px; }.metric-card > small { font-size: 7px; }.sparkline { right: 6px; bottom: 7px; height: 14px; }.dash-lower { grid-template-columns: 1fr; }.time-panel { display: none; }.project-panel { padding: 11px 9px; }.project-row { gap: 7px; }.project-state { display: none; }.project-progress { width: 45px; }.project-info strong { font-size: 8px; }.chip-top { top: 0; right: -3px; }.chip-bottom { bottom: 5px; left: -4px; }.float-chip { padding: 8px 10px; }.float-chip strong { font-size: 8px; }.float-chip small { font-size: 7px; }.chip-icon, .chip-ring { width: 22px; height: 22px; }.orbit-a { width: 300px; height: 300px; right: -70px; top: 45px; }.orbit-b { width: 350px; height: 350px; right: -100px; top: 20px; }.hero-index { position: static; margin-top: -5px; font-size: 7px; }.signal-strip { grid-template-columns: 1fr; gap: 18px; padding: 25px 0; }.signal-intro { margin-bottom: 2px; }.signal-item { gap: 12px; }.signal-item strong { font-size: 11px; }.signal-item small { font-size: 9px; }.features-section { padding-top: 78px; padding-bottom: 72px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 26px; }.section-heading h2 { font-size: 43px; }.section-heading > p { font-size: 11px; }.feature-grid { grid-template-columns: 1fr; gap: 11px; }.feature-card, .feature-large { grid-column: auto; min-height: 320px; padding: 20px 17px; }.feature-large { min-height: 360px; }.mini-kanban { padding: 10px 7px; }.kanban-columns { gap: 4px; }.task { padding: 7px 4px; }.task > span { font-size: 6px; }.task > small { font-size: 4px; }.time-visual { gap: 24px; }.closing { align-items: flex-start; flex-direction: column; gap: 30px; padding: 34px 22px; }.closing h2 { font-size: 47px; }.closing-content > p { font-size: 11px; }.closing-status { width: 100%; max-width: 300px; }.closing-decoration { right: -100px; top: -10px; width: 300px; height: 300px; }.site-footer { align-items: flex-start; flex-direction: column; gap: 14px; padding-top: 25px; padding-bottom: 25px; }.footer-copy, .copyright { font-size: 7px; }.footer-copy { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }