:root { --ink: #f4f7fb; --muted: #aeb8c8; --accent: #cfe3ff; --glow: rgba(150, 190, 255, 0.55); --bg: #05070d; --bg2: #090d18; --line: rgba(207, 227, 255, 0.13); --line2: rgba(207, 227, 255, 0.3); --display: 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --gutter: clamp(1.25rem, 4.5vw, 4rem); --max: 96rem; --radius: 1rem; --gap: clamp(0.9rem, 1.6vw, 1.5rem); --out: 0.3s; --in: 0.46s; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (min-width: 1800px) { html { font-size: 112.5%; } } @media (min-width: 2400px) { html { font-size: 137.5%; } } @media (min-width: 3000px) { html { font-size: 168.75%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--text); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -9999px; top: 0.5rem; background: var(--ink); color: var(--bg); padding: 0.5rem 0.9rem; border-radius: 0.4rem; z-index: 20; font-weight: 600; } .skip:focus { left: 0.5rem; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .site-header { position: relative; z-index: 5; background: var(--bg); } .stage .site-header { background: transparent; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.875rem; } .brand { display: block; flex: none; line-height: 0; } .brand img { height: clamp(2.18rem, 4.98vw, 2.905rem); width: auto; } .tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.625rem; } .tab { display: inline-flex; align-items: center; font-family: var(--text); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; border: 1px solid rgba(207, 227, 255, 0.3); background: rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 0.55rem 1.1rem; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .tab:hover { border-color: var(--accent); color: var(--accent); } .tab[aria-current="page"] { border-color: var(--accent); color: var(--accent); background: rgba(207, 227, 255, 0.11); } .stage .tab:not(.tab--hire) { background: rgba(5, 7, 13, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .stage .tab[aria-current="page"]:not(.tab--hire) { background: linear-gradient(rgba(207, 227, 255, 0.16), rgba(207, 227, 255, 0.16)), rgba(5, 7, 13, 0.6); } .tab--hire { color: #06121f; border-color: transparent; background: linear-gradient(135deg, #eaf3ff, #bcd6ff); box-shadow: 0 0 22px rgba(150, 190, 255, 0.42); } .tab--hire::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; border-radius: 50%; background: #168a46; box-shadow: 0 0 0 0 rgba(22, 138, 70, 0.55); animation: hire-dot 2.4s ease-out infinite; } .tab--hire:hover { color: #06121f; border-color: transparent; transform: translateY(-1px); box-shadow: 0 0 32px rgba(170, 205, 255, 0.7); } .tab--hire[aria-current="page"] { color: #06121f; background: linear-gradient(135deg, #eaf3ff, #bcd6ff); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0 22px rgba(150, 190, 255, 0.42); } @keyframes hire-dot { 0% { box-shadow: 0 0 0 0 rgba(22, 138, 70, 0.55); } 70% { box-shadow: 0 0 0 0.5rem rgba(22, 138, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 138, 70, 0); } } @media (max-width: 860px) { .site-header .wrap { flex-wrap: wrap; row-gap: 0.625rem; } .tabs { width: 100%; justify-content: flex-start; } } @media (max-width: 480px) { .tabs { gap: 0.4rem; } .tab { padding: 0.45rem 0.7rem; font-size: 0.76rem; } .tab--hire::before { margin-right: 0.4rem; } } .stage { position: relative; overflow: hidden; min-height: clamp(25rem, 48vh, 42rem); display: flex; flex-direction: column; } .bg { position: absolute; inset: 0; z-index: 0; background-color: #000; transform-origin: center; animation: fadeZoomOut 6s ease-out both; will-change: transform, opacity; } .bg picture, .bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; } .bg img { object-fit: cover; object-position: 50% 42%; } .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.85) 100%); } @keyframes fadeZoomOut { 0% { opacity: 0; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } } .hero { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: clamp(2rem, 6vh, 4.5rem); padding-bottom: clamp(1.25rem, 3.5vh, 2.75rem); } .eyebrow { --ew: 40.8; font-family: var(--display); font-weight: 500; font-size: 0.7rem; font-size: min(0.92rem, calc((100vw - 2 * var(--gutter) - 1rem) / var(--ew))); letter-spacing: 0.34em; white-space: nowrap; color: #e6f0ff; margin-bottom: 0.95rem; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); } @media (max-width: 760px) { .eyebrow { --ew: 36; letter-spacing: 0.22em; } } @media (max-width: 480px) { .eyebrow { --ew: 32; letter-spacing: 0.12em; } } .tagline { font-family: var(--display); font-weight: 900; font-size: clamp(0.8rem, 4.2vw, 2rem); line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; text-shadow: 0 0 40px rgba(0, 0, 0, 0.6), 0 0 80px rgba(80, 120, 200, 0.25); } .tagline .accent { color: var(--accent); } .sub { position: relative; z-index: 0; margin-top: 1rem; max-width: 40rem; text-wrap: pretty; font-size: clamp(0.95rem, 2vmin, 1.18rem); font-weight: 300; line-height: 1.65; color: #c3ccda; } .sub::before { content: ""; position: absolute; inset: -2.25rem -4rem; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.3) 55%, transparent 78%); } .band { flex: 1 0 auto; background: radial-gradient(60rem 26rem at 88% -2%, rgba(70, 110, 190, 0.13), transparent 62%), radial-gradient(48rem 28rem at 6% 106%, rgba(60, 90, 160, 0.1), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); border-top: 1px solid rgba(255, 255, 255, 0.07); padding-block: clamp(1.5rem, 3.6vw, 3.5rem); } .kicker { font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .page-head { display: grid; gap: 0.9rem; margin-bottom: var(--gap); } .page-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; } .lead { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.65; color: #d3dbe7; max-width: 46rem; } .grid { display: grid; gap: var(--gap); } .mt { margin-top: var(--gap); } .tile { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(1.1rem, 1.9vw, 1.9rem); background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)); border: 1px solid var(--line); border-radius: var(--radius); } .tile--accent { background: linear-gradient(150deg, rgba(207,227,255,0.18), rgba(207,227,255,0.05)); border-color: rgba(207, 227, 255, 0.4); box-shadow: 0 0 44px rgba(120, 170, 240, 0.13); } .tile h2, .tile h3.tile-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.45vw, 1.4rem); line-height: 1.35; letter-spacing: 0.03em; } .tile h2.kicker { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.2em; line-height: 1.6; font-weight: 700; } .tile p { color: #c9d2df; } .tile p.small, .small { font-size: 0.86rem; color: var(--muted); } .tile-actions--stack { flex-direction: column; align-items: flex-start; gap: 0.6rem; } a.tile { text-decoration: none; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } a.tile:hover { border-color: var(--accent); transform: translateY(-2px); background: linear-gradient(160deg, rgba(207,227,255,0.1), rgba(207,227,255,0.03)); } .tile-actions { margin-top: auto; padding-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--text); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; color: #06121f; cursor: pointer; background: linear-gradient(135deg, #eaf3ff, #bcd6ff); box-shadow: 0 0 28px rgba(150, 190, 255, 0.42); padding: 0.75rem 1.6rem; border-radius: 999px; border: 0; transition: transform 0.25s ease, box-shadow 0.25s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 0 42px rgba(170, 205, 255, 0.7); } .btn--ghost { color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(207, 227, 255, 0.32); box-shadow: none; } .btn--ghost:hover { color: var(--accent); border-color: var(--accent); box-shadow: none; } .btn--sm { padding: 0.55rem 1.1rem; font-size: 0.86rem; } .link { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.92rem; border-bottom: 1px solid rgba(207, 227, 255, 0.35); padding-bottom: 1px; } .link:hover { border-bottom-color: var(--accent); } .prose p { color: #d3dbe7; line-height: 1.7; margin-bottom: 0.9rem; max-width: 62ch; } .prose p:last-child { margin-bottom: 0; } .rule-list { display: grid; gap: 0.65rem; } .dl { display: grid; grid-template-columns: minmax(5.5rem, auto) 1fr; gap: 0.5rem 1.1rem; font-size: 0.92rem; } .dl dt { color: var(--muted); } .dl dd { color: #dbe3ee; } .home-grid { grid-template-columns: 1fr; } @media (min-width: 1100px) { .home-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .home-grid .t-film { grid-column: 1 / -1; } .home-grid .t-news { grid-column: 1 / span 8; } .home-grid .t-careers { grid-column: 9 / span 4; } .home-grid .t-products { grid-column: 1 / span 7; } .home-grid .t-ip { grid-column: 8 / span 5; } } .film-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.65rem); line-height: 1.35; letter-spacing: 0.03em; color: var(--ink); } .t-film { display: grid; gap: var(--gap); } .film-text { display: flex; flex-direction: column; gap: 0.8rem; justify-content: center; min-width: 0; } @media (min-width: 1100px) { .t-film { grid-template-columns: minmax(16rem, 4fr) minmax(0, 8fr); align-items: center; column-gap: clamp(1.5rem, 3vw, 3rem); } .t-film .film-media { width: 100%; max-width: 58rem; justify-self: end; } .film-title { font-size: clamp(1.25rem, 1.9vw, 2rem); } } .feed { display: grid; gap: 0; } .feed-item { display: grid; gap: 0.3rem; padding: 0.95rem 0; border-top: 1px solid var(--line); } .feed-item:first-child { border-top: 0; padding-top: 0.2rem; } .feed-item time { color: var(--muted); font-size: 0.82rem; } .feed-item h3 { font-family: var(--text); font-weight: 600; font-size: 1.02rem; line-height: 1.4; } .feed-item h3 a { color: var(--ink); text-decoration: none; } .feed-item h3 a:hover { color: var(--accent); } .feed-item p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; } .minis { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin-top: 0.4rem; } @media (min-width: 640px) { .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mini { display: flex; flex-direction: column; justify-content: space-between; gap: 0.35rem; padding: 0.95rem 1.05rem; text-decoration: none; border: 1px solid var(--line); border-radius: 0.8rem; background: rgba(255, 255, 255, 0.035); transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .mini:hover { border-color: var(--accent); transform: translateY(-2px); background: rgba(207, 227, 255, 0.07); } .mini .m-kicker { font-size: 0.78rem; color: var(--muted); } .mini .m-name { font-family: var(--display); font-weight: 800; letter-spacing: 0.16em; font-size: 1.1rem; } .patent { position: relative; padding-left: 1.5rem; color: #c9d2df; font-size: 0.95rem; line-height: 1.6; } .patent + .patent { margin-top: 0.8rem; } .patent::before { content: ""; position: absolute; left: 1px; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid var(--accent); box-shadow: 0 0 5px var(--glow); } .status { display: inline-block; margin-left: 0.15rem; padding: 0.05rem 0.55rem; font-size: 0.78rem; font-weight: 600; color: var(--accent); border: 1px solid rgba(207, 227, 255, 0.35); border-radius: 999px; white-space: nowrap; } .film-thumb, .film-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0.8rem; overflow: hidden; background: #000; border: 1px solid rgba(207, 227, 255, 0.16); box-shadow: 0 0 40px rgba(80, 150, 220, 0.16); } @supports not (aspect-ratio: 16 / 9) { .film-thumb, .film-frame { height: 0; padding-top: 56.25%; } .film-thumb picture, .film-thumb img, .film-frame video { position: absolute; inset: 0; } } .film-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .film-thumb:hover img, .film-thumb:focus-visible img { transform: scale(1.03); } .film-play { position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #06121f; background: linear-gradient(135deg, #eaf3ff, #bcd6ff); box-shadow: 0 0 30px rgba(150, 190, 255, 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease; } .film-play svg { width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; } .film-thumb:hover .film-play, .film-thumb:focus-visible .film-play { transform: scale(1.08); box-shadow: 0 0 44px rgba(170, 205, 255, 0.75); } .film-dur { position: absolute; right: 0.65rem; bottom: 0.65rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); background: rgba(0, 0, 0, 0.65); border-radius: 0.4rem; padding: 0.15rem 0.5rem; } .film-frame video { width: 100%; height: 100%; max-width: 100%; display: block; background: #000; object-fit: contain; } @media (max-width: 480px) { .film-play { width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; } } .products-head { display: grid; gap: var(--gap); align-items: stretch; margin-bottom: var(--gap); } @media (min-width: 1000px) { .products-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } .products-head .page-head { margin-bottom: 0; align-content: center; } .sectors { display: grid; gap: var(--gap); } .rail { display: grid; gap: 0.75rem; align-content: stretch; } @media (min-width: 760px) and (max-width: 1259px) { .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1260px) { .sectors { grid-template-columns: minmax(19rem, 0.34fr) minmax(0, 0.66fr); align-items: stretch; } .rail { grid-template-rows: repeat(3, 1fr); } } .sector-tab { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; align-content: center; padding: 1.1rem 1.25rem 1.1rem 1.4rem; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.035); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .sector-tab::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: 0; transition: opacity 0.2s ease; } .sector-tab:hover { border-color: var(--line2); background: rgba(207, 227, 255, 0.06); } .sector-tab.is-active { border-color: var(--accent); background: linear-gradient(135deg, rgba(207,227,255,0.17), rgba(207,227,255,0.05)); } .sector-tab.is-active::before { opacity: 1; } .sector-tab > span { grid-column: 1; } .s-kicker { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--muted); } .s-name { font-family: var(--display); font-weight: 800; letter-spacing: 0.16em; font-size: 1.4rem; line-height: 1.3; margin-top: 0.15rem; } .s-read { font-size: 0.82rem; color: var(--muted); line-height: 1.45; } .s-for { font-size: 0.92rem; color: #c3ccda; line-height: 1.5; margin-top: 0.55rem; } .s-chev { grid-column: 2 !important; grid-row: 1 / span 4; align-self: center; width: 1.4rem; height: 1.4rem; color: var(--muted); transition: transform 0.25s ease, color 0.2s ease; } .sector-tab:hover .s-chev, .sector-tab.is-active .s-chev { color: var(--accent); transform: translateX(3px); } @media (min-width: 760px) and (max-width: 1259px) { .s-chev { display: none; } } @media (max-width: 1259px) { .sector-tab.is-active .s-chev { transform: rotate(90deg); } } .stage-panels { position: relative; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)); } .sector-panel { grid-area: 1 / 1; min-width: 0; display: grid; gap: clamp(1.1rem, 2vw, 2rem); align-content: start; padding: clamp(1.1rem, 2.4vw, 2.25rem); visibility: hidden; opacity: 0; transform: translateX(105%); transition: transform var(--out) cubic-bezier(0.55, 0, 0.9, 0.45), opacity var(--out) ease-in, visibility 0s linear var(--out); } .sector-panel.is-active { visibility: visible; opacity: 1; transform: none; transition: transform var(--in) cubic-bezier(0.16, 0.84, 0.3, 1), opacity var(--in) ease-out, visibility 0s; } .stage-panels.is-instant .sector-panel { transition: none !important; } @media (min-width: 760px) { .sector-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; } } @media (max-width: 759px) { .sector-panel .sheet { order: -1; } } .panel-info { display: grid; gap: 0.85rem; align-content: start; min-width: 0; } .panel-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.9rem); letter-spacing: 0.14em; line-height: 1.15; } .reading { font-size: 0.95rem; color: var(--muted); line-height: 1.5; } .reading b { color: var(--ink); font-weight: 700; } .panel-info p { color: #d3dbe7; line-height: 1.65; font-size: 0.97rem; } .panel-info .dl { margin-top: 0.3rem; } .panel-info .btn { justify-self: start; margin-top: 0.4rem; } .panel-note { font-size: 0.8rem; color: var(--muted); line-height: 1.5; } .sheet { position: relative; display: block; width: 100%; max-width: 34rem; margin-inline: auto; aspect-ratio: 8.5 / 11; border-radius: 0.5rem; overflow: hidden; isolation: isolate; background: #dfe7f5; border: 1px solid var(--line2); color: #fff; text-decoration: none; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 50px rgba(100, 160, 240, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } @supports not (aspect-ratio: 1 / 1) { .sheet { height: 0; padding-top: 129.4%; } .sheet > picture, .sheet > picture img { position: absolute; inset: 0; } } .sheet:hover, .sheet:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 60px rgba(120, 180, 255, 0.3); } .sheet img { width: 100%; height: 100%; object-fit: cover; } .sheet::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 48%, rgba(5,7,13,0.5) 0%, rgba(5,7,13,0.18) 58%, rgba(5,7,13,0.28) 100%); } .sheet-lock { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; text-align: center; } .lock { position: relative; width: clamp(4.2rem, 7vw, 5.6rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 7, 13, 0.66); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); border: 1px solid rgba(234, 243, 255, 0.6); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 0.45rem rgba(207, 227, 255, 0.14); } .lock::after { content: ""; position: absolute; inset: -0.35rem; border-radius: 50%; border: 1px solid rgba(207, 227, 255, 0.6); animation: lock-pulse 2.6s ease-out infinite; } @keyframes lock-pulse { 0% { transform: scale(0.92); opacity: 0.75; } 100% { transform: scale(1.45); opacity: 0; } } .lock svg { width: 46%; height: 46%; overflow: visible; } .lock .shackle-open { opacity: 0; transition: opacity 0.2s ease; } .lock .shackle-shut { transition: opacity 0.2s ease; } .sheet:hover .shackle-open, .sheet:focus-visible .shackle-open { opacity: 1; } .sheet:hover .shackle-shut, .sheet:focus-visible .shackle-shut { opacity: 0; } .sheet-cta { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; color: #06121f; background: linear-gradient(135deg, #eaf3ff, #bcd6ff); box-shadow: 0 0 26px rgba(150, 190, 255, 0.5); padding: 0.55rem 1.15rem; border-radius: 999px; } .cta-band { display: grid; gap: 1rem; align-items: center; } @media (min-width: 760px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; } } .careers-top { display: grid; gap: var(--gap); margin-bottom: var(--gap); } @media (min-width: 1100px) { .careers-top { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } } .about-tile .prose p { max-width: 80ch; } .sources { font-size: 0.78rem; line-height: 1.55; color: var(--muted); margin-top: auto; } .dl--fill { flex: 1; align-content: space-between; } .roles { display: grid; gap: var(--gap); } @media (min-width: 640px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1500px) { .roles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .role .where { font-size: 0.86rem; color: var(--accent); line-height: 1.5; } .role .fit { font-size: 0.9rem; color: var(--muted); line-height: 1.6; } .role .fit b { color: #dbe3ee; font-weight: 600; } .role h3.tile-title { margin-top: 0.1rem; font-size: clamp(1.05rem, 1.3vw, 1.3rem); } .pdf-mark { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; opacity: 0.85; } .article { display: grid; gap: var(--gap); } .article-head { display: grid; gap: 0.5rem; } .article-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 2.1vw, 1.7rem); letter-spacing: 0.04em; line-height: 1.35; } .article-head time { color: var(--muted); font-size: 0.9rem; } .article-grid { display: grid; gap: var(--gap); } @media (min-width: 900px) { .article-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } .article-grid--film { align-items: center; } } @media (max-width: 899px) { .article-grid--stage .poster { order: -1; max-width: 30rem; width: 100%; margin-inline: auto; } } .film-copy p { font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7; } .stage-copy { display: grid; gap: var(--gap); align-content: start; min-width: 0; } .poster { margin: 0; } .poster a { display: block; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(207, 227, 255, 0.16); box-shadow: 0 0 40px rgba(80, 150, 220, 0.18); } .poster img { width: 100%; height: auto; aspect-ratio: 1092 / 1440; } .facts { display: grid; gap: 0.55rem; margin: 0.4rem 0 0; } .facts li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; font-size: 0.92rem; line-height: 1.5; color: #dbe3ee; } .facts li span:first-child { color: var(--muted); } .coverage { display: grid; gap: 0.7rem; } .coverage h3 { font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tags a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.55rem; color: var(--ink); text-decoration: none; font-size: 0.86rem; border: 1px solid rgba(207, 227, 255, 0.28); background: rgba(255, 255, 255, 0.045); border-radius: 0.8rem; padding: 0.5rem 0.9rem; transition: border-color 0.2s ease, color 0.2s ease; } .tags a:hover { border-color: var(--accent); color: var(--accent); } .tags .src { font-weight: 600; } .tags .ext { color: var(--muted); font-size: 0.8rem; } .ip-grid { display: grid; gap: var(--gap); } @media (min-width: 700px) { .ip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ip-grid .t-intro { grid-column: 1 / -1; } } @media (min-width: 1100px) { .ip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ip-grid .t-intro { grid-column: auto; } } .filing .num { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: rgba(207, 227, 255, 0.55); letter-spacing: 0.04em; } .filing .patent-title { font-family: var(--text); font-size: clamp(1.1rem, 1.5vw, 1.45rem); font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--ink); } .nf-grid { display: grid; gap: var(--gap); } @media (min-width: 640px) { .nf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .nf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .site-footer { background: var(--bg2); border-top: 1px solid rgba(255, 255, 255, 0.07); color: var(--muted); font-size: 0.9rem; } .site-footer .wrap { display: grid; gap: 1.4rem 2.5rem; padding-block: clamp(1.4rem, 3vw, 2.4rem); } @media (min-width: 820px) { .site-footer .wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } } .foot-line { font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); line-height: 1.7; } .foot-copy { margin-top: 0.5rem; } .foot-h { font-family: var(--display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } .foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; } .site-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(207, 227, 255, 0.25); transition: color 0.2s ease, border-color 0.2s ease; } .site-footer a:hover { color: var(--accent); border-color: var(--accent); } .reveal-pending { opacity: 0; transform: translateY(1.75rem); } .reveal-pending.visible { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; } @media (prefers-reduced-motion: reduce) { .bg { animation: none; opacity: 1; transform: none; } .reveal-pending { opacity: 1; transform: none; } .sector-panel, .sector-panel.is-active { transition: none; } .lock::after, .tab--hire::before { animation: none; } .btn:hover, .sheet:hover, .mini:hover, .tab--hire:hover { transform: none; } .film-thumb img, .film-play, .s-chev { transition: none; } .film-thumb:hover img, .film-thumb:focus-visible img { transform: none; } } @media (forced-colors: active) { .tab, .btn, .tile, .mini, .sector-tab, .sheet, .stage-panels { border: 1px solid CanvasText; } .tab--hire, .btn { forced-color-adjust: none; color: ButtonText; background: ButtonFace; } .sector-tab.is-active { outline: 2px solid Highlight; } }