:root { color-scheme: dark; --bg:#080d12; --ink:#f0f3ef; --muted:#8e9ba3; --accent:#aeefda; }
* { box-sizing:border-box; }
html { min-width:320px; min-height:100%; background:var(--bg); }
body { margin:0; color:var(--ink); font-family:Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 75% 35%,#11242950,transparent 55%); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:7px; border-radius:3px; }
::selection { background:#aeefda; color:var(--bg); }
.page { position:relative; max-width:1800px; margin:auto; padding:0 clamp(24px,5.55vw,104px); min-height:100svh; display:flex; flex-direction:column; overflow:hidden; }
.header { height:130px; flex:none; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; }
.wordmark { display:inline-flex; align-items:baseline; font-size:39px; font-weight:700; letter-spacing:-2.9px; line-height:1; }
.wordmark-dot { color:var(--accent); }
.wordmark-suffix { color:#8b9ca7; font-family:ui-monospace,Consolas,monospace; font-size:17px; font-weight:400; letter-spacing:-.9px; padding-left:1px; }
.language-switch { display:flex; align-items:center; gap:6px; color:#52616a; font:11px ui-monospace,Consolas,monospace; }
.language-switch button { border:0; cursor:pointer; min-width:42px; min-height:44px; color:#9eabb2; background:transparent; transition:color .2s; letter-spacing:.07em; }
.language-switch button[aria-pressed="true"] { color:var(--ink); }
.language-switch button:hover { color:var(--accent); }
main { display:flex; flex:1; }
.hero { position:relative; width:100%; min-height:550px; display:flex; align-items:center; padding:50px 0 84px; }
.hero-copy { position:relative; z-index:2; max-width:840px; pointer-events:none; }
.eyebrow { margin:0 0 35px; display:flex; align-items:center; gap:14px; color:#bdccc9; font:10px/1.6 ui-monospace,Consolas,monospace; letter-spacing:.17em; text-transform:uppercase; }
.eyebrow-line { width:27px; height:1px; background:#aee6d4; }
h1 { margin:0; font-size:clamp(58px,6.9vw,112px); font-weight:500; line-height:1.06; letter-spacing:-.066em; }
.headline-soft { color:#a9bbb8; }
.description { max-width:365px; color:#a0aeb3; font-size:16px; line-height:1.8; margin:31px 0 0; letter-spacing:.005em; }
.development { margin-top:44px; display:flex; align-items:center; gap:10px; font:10px/1.5 ui-monospace,Consolas,monospace; letter-spacing:.055em; color:#b8c5c4; }
.status-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; box-shadow:0 0 14px #93e2c743; }
.artwork { pointer-events:none; width:790px; height:790px; position:absolute; left:43%; top:50%; transform:translateY(-52%); opacity:.91; }
.artwork-grid { position:absolute; inset:55px; background-image:linear-gradient(#94cab109 1px,transparent 1px),linear-gradient(90deg,#94cab109 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse,black 10%,transparent 65%); }
.artwork-halo { position:absolute; inset:50px; background:radial-gradient(ellipse,#456c5918,transparent 60%); }
.ribbon { position:relative; width:100%; height:100%; transform:rotate(-15deg); animation:arrive 3.4s cubic-bezier(.2,.6,.2,1) both; }
.plot-mark { width:9px; height:9px; position:absolute; color:#66837c; opacity:.45; }
.plot-mark::before,.plot-mark::after { content:""; position:absolute; background:currentColor; }
.plot-mark::before { width:9px; height:1px; top:4px; }
.plot-mark::after { width:1px; height:9px; left:4px; }
.mark-a { top:190px; right:122px; }.mark-b { bottom:180px; left:176px; }
.footer { min-height:98px; flex:none; border-top:1px solid #c9dfd21a; display:flex; justify-content:space-between; align-items:center; gap:24px; position:relative; z-index:3; font-size:11px; }
.footer-note { color:#839197; letter-spacing:.025em; }
.sysena-link { display:inline-flex; min-height:44px; gap:12px; align-items:center; color:#91a09f; }
.sysena-link strong { font-size:17px; font-weight:500; color:#d6dfda; letter-spacing:-.7px; }
.sysena-link svg { margin-left:7px; color:#b9ccc5; transition:transform .2s; }
.sysena-link:hover svg { transform:translate(2px,-2px); }.sysena-link:hover strong { color:var(--accent); }
@keyframes arrive { from { opacity:0; transform:rotate(-23deg) scale(.95); } to { opacity:1; transform:rotate(-15deg) scale(1); } }
@media (min-width:1600px) { .artwork { width:900px; height:900px; left:45%; } .hero { min-height:640px; } }
@media (max-width:1100px) { .artwork { left:37%; opacity:.68; width:730px; height:730px; } .hero-copy { max-width:730px; } }
@media (max-width:760px) {
  .header { height:100px; }
  .wordmark { font-size:34px; }
  .hero { min-height:660px; align-items:flex-start; padding:60px 0 270px; }
  .hero-copy { width:100%; }
  h1 { font-size:clamp(47px,8.3vw,63px); letter-spacing:-.06em; line-height:1.08; }
  .eyebrow { font-size:9px; gap:10px; margin-bottom:28px; letter-spacing:.11em; }
  .eyebrow-line { width:20px; }
  .description { max-width:310px; font-size:14px; line-height:1.8; margin-top:24px; }
  .development { margin-top:27px; font-size:9px; }
  .artwork { width:510px; height:510px; left:auto; right:-140px; top:auto; bottom:-70px; transform:none; opacity:.72; }
  .mark-a { top:90px; right:100px; }.mark-b { bottom:100px; left:70px; }
  .footer { min-height:88px; font-size:10px; gap:10px; }
  .sysena-link { gap:7px; }.sysena-link strong { font-size:16px; }.sysena-link svg { margin-left:2px; width:15px; }
}
@media (max-width:370px) { .page { padding:0 20px; } h1 { font-size:42px; } .footer-note { max-width:100px; line-height:1.6; } .hero { padding-top:44px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }