/* ═══════════════════════════════════════════════════════════ Emagin Technology — modern mockup shared design system Aurora UI · Bento · Glassmorphism · AI-first ═══════════════════════════════════════════════════════════ */ :root{ --bg:#060b08; --bg-2:#0a120d; --lime:#9fe34f; --lime-soft:#8dc63f; --green:#2d8a47; --teal:#1fb98a; --forest:#1a5c2e; --text:#eaf3e7; --text-2:#9fb6a6; --text-3:#5f7467; --glass:rgba(255,255,255,0.035); --glass-2:rgba(255,255,255,0.06); --glass-brd:rgba(159,227,79,0.16); --border:rgba(255,255,255,0.08); --grad:linear-gradient(115deg,var(--lime),var(--teal)); --display:'Syne',sans-serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',monospace; --r:24px; --r-sm:14px; --maxw:1240px; --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} svg{display:block} :focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:32px} .skip{position:absolute;left:-999px;top:0;background:var(--lime);color:#06210f;padding:10px 16px;z-index:300} .skip:focus{left:0} /* ── Aurora mesh background ── */ .aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)} .aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform} .aurora .b1{width:620px;height:620px;background:radial-gradient(circle,#2d8a47,transparent 65%);top:-180px;left:-120px;animation:float1 18s var(--ease) infinite alternate} .aurora .b2{width:540px;height:540px;background:radial-gradient(circle,#1fb98a,transparent 65%);top:10%;right:-160px;animation:float2 22s var(--ease) infinite alternate} .aurora .b3{width:500px;height:500px;background:radial-gradient(circle,#9fe34f,transparent 60%);bottom:-160px;left:30%;opacity:.28;animation:float3 26s var(--ease) infinite alternate} @keyframes float1{to{transform:translate(120px,80px) scale(1.15)}} @keyframes float2{to{transform:translate(-100px,120px) scale(1.1)}} @keyframes float3{to{transform:translate(80px,-90px) scale(1.2)}} .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ── Logo ── */ .brand{display:flex;align-items:center;gap:11px} .brand-mark{width:36px;height:36px;flex-shrink:0} .brand-mark .ring{stroke:var(--lime-soft);stroke-width:3.2;fill:none;stroke-linejoin:round} .brand-mark .s1{fill:#fff}.brand-mark .s2{fill:var(--lime-soft)} .brand-word{display:flex;flex-direction:column;line-height:1} .brand-line{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.01em;display:flex} .brand-line b{color:#fff;font-weight:800}.brand-line span{color:var(--lime-soft);font-weight:700} .brand-tag{font-size:7.5px;font-weight:600;letter-spacing:.34em;color:var(--text-3);margin-top:4px;font-family:var(--body)} /* ── Nav ── */ /* Scope to the site nav only — a bare `nav` selector also captures breadcrumb