:root {
  --ink: #070814;
  --surface: #101126;
  --surface-light: #151733;
  --text: #f7f6ff;
  --muted: #aaacc4;
  --line: rgba(236, 235, 255, 0.14);
  --violet: #a77bff;
  --blue: #6ddcff;
  --mint: #9effde;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.sky { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(ellipse at 79% 11%, rgba(91, 72, 197, .22), transparent 26rem), radial-gradient(ellipse at 9% 35%, rgba(33, 96, 158, .18), transparent 28rem), var(--ink); }
.sky::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(#fff 0.7px, transparent 0.8px), radial-gradient(#c7bcff .8px, transparent 1px); background-size: 62px 62px, 127px 127px; background-position: 0 0, 31px 24px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(192, 221, 255, .65); animation: twinkle 3s infinite ease-in-out; }
.star-a { top: 20%; left: 8%; }.star-b { top: 8%; right: 20%; animation-delay: -.7s; }.star-c { top: 72%; left: 19%; animation-delay: -1.6s; }.star-d { top: 54%; right: 6%; animation-delay: -2.1s; }.star-e { top: 87%; right: 36%; animation-delay: -1.1s; }.star-f { top: 32%; right: 48%; animation-delay: -2.6s; }
@keyframes twinkle { 50% { transform: scale(.45); opacity: .25; } }

.site-header, footer { width: min(1180px, calc(100% - 48px)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.site-header { height: 88px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 650; letter-spacing: -.035em; font-size: 1rem; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: .59rem; letter-spacing: .01em; }
.header-socials { display: flex; align-items: center; gap: 9px; }.social-icon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(235,233,255,.38); border-radius: 50%; color: #efedff; transition: transform .2s ease, color .2s ease, background .2s ease; }.social-icon:hover { transform: translateY(-2px); color: #07101a; background: var(--mint); border-color: var(--mint); }.social-icon svg { width: 16px; height: 16px; fill: currentColor; }.social-icon svg rect, .social-icon svg circle { fill: none; stroke: currentColor; stroke-width: 1.8; }.social-icon svg .instagram-dot { fill: currentColor; stroke: none; }

.hero { width: min(1180px, calc(100% - 48px)); min-height: 680px; margin: auto; position: relative; padding: 115px 0 90px; }
.eyebrow { margin: 0 0 22px; color: var(--mint); font-size: .68rem; text-transform: uppercase; letter-spacing: .17em; font-weight: 750; display: flex; align-items: center; gap: 9px; }
.eyebrow span { display: inline-block; width: 18px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.065em; font-weight: 500; line-height: .91; }
h1 { font-size: clamp(4.1rem, 9.4vw, 8.7rem); max-width: 840px; margin: 0; }
h1 em, h2 em { font-family: var(--serif); font-weight: 400; color: #c2b0ff; }
.hero-copy { max-width: 430px; margin: 34px 0 28px; color: var(--muted); line-height: 1.6; font-size: 1.04rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 20px; border-radius: 999px; transition: transform .2s ease, background .2s ease; font-size: .88rem; font-weight: 650; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: #0b0c1a; background: var(--mint); }.button-primary:hover { background: #d1ffef; }
.button-quiet { border: 1px solid var(--line); color: #e5e4f2; }
.button-quiet:hover { background: rgba(255,255,255,.07); }
.orbit { position: absolute; right: 4%; top: 68px; width: 390px; height: 390px; isolation: isolate; animation: float 8s ease-in-out infinite; }
.planet { position: absolute; inset: 83px; isolation: isolate; overflow: hidden; border-radius: 50%; background: radial-gradient(ellipse at 28% 23%, rgba(255,255,255,.88) 0 3%, transparent 4%), radial-gradient(ellipse at 43% 46%, rgba(229,215,255,.35) 0 8%, transparent 12%), radial-gradient(ellipse at 66% 67%, rgba(36,20,91,.45) 0 10%, transparent 18%), radial-gradient(circle at 31% 26%, #efe2ff 0%, #c09aff 13%, #896ddc 35%, #4a4f9f 62%, #1b1e43 82%, #0d1025 100%); box-shadow: inset -37px -30px 42px rgba(0,0,0,.62), inset 12px 8px 23px rgba(255,255,255,.17), 0 0 35px 3px rgba(160,129,255,.34), 0 0 120px rgba(120,92,255,.22); }
.planet::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; opacity: .8; mix-blend-mode: soft-light; background: radial-gradient(ellipse at 19% 42%, rgba(255,255,255,.62) 0 2.5%, transparent 3.4%), radial-gradient(ellipse at 32% 64%, rgba(32,23,92,.8) 0 4%, transparent 6%), radial-gradient(ellipse at 61% 28%, rgba(255,255,255,.42) 0 2.2%, transparent 3.1%), radial-gradient(ellipse at 70% 49%, rgba(28,22,75,.8) 0 5%, transparent 7%), radial-gradient(ellipse at 51% 77%, rgba(255,255,255,.38) 0 2%, transparent 3%), repeating-linear-gradient(157deg, transparent 0 13px, rgba(218,189,255,.16) 14px 16px, transparent 17px 29px); }
.planet::after { content: ""; position: absolute; z-index: 2; inset: -9%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 29% 28%, transparent 0 57%, rgba(231,213,255,.48) 66%, transparent 70%); box-shadow: inset 0 0 18px 6px rgba(224,208,255,.32); filter: blur(2px); opacity: .84; }
.orbit-ring { position: absolute; inset: 29px -18px; z-index: 0; border: 10px solid rgba(209,194,255,.42); border-left-color: rgba(121,152,227,.22); border-right-color: rgba(244,233,255,.7); border-radius: 50%; transform: rotateX(67deg) rotateZ(-19deg); box-shadow: 0 0 0 1px rgba(227,219,255,.18), 0 0 14px rgba(154,132,255,.18); }.orbit-ring::after { content: ""; position: absolute; inset: -18px; border: 2px solid rgba(231,219,255,.27); border-left-color: rgba(103,146,231,.12); border-right-color: rgba(245,237,255,.48); border-radius: inherit; box-shadow: 0 0 0 8px rgba(103,87,184,.09); }.orbit-back { opacity: .63; }.planet { z-index: 1; }.orbit-front { z-index: 3; clip-path: inset(50% 0 0 0); opacity: .98; }.satellite { z-index: 4; }
.satellite { position: absolute; top: 33px; left: 71px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px 5px rgba(158,255,222,.6); }
@keyframes float { 50% { transform: translateY(14px) rotate(2deg); } }

.work-section { border-top: 1px solid var(--line); padding: 106px max(24px, calc((100vw - 1180px) / 2)) 122px; background: linear-gradient(180deg, rgba(12,13,31,.32), rgba(12,12,27,.78)); }
.section-heading { display: flex; justify-content: space-between; gap: 60px; align-items: end; margin-bottom: 42px; }.section-heading > p { max-width: 350px; color: var(--muted); font-size: .94rem; line-height: 1.7; margin-bottom: 5px; }
h2 { font-size: clamp(3rem, 5.7vw, 5.4rem); margin-bottom: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filter { cursor: pointer; color: #c4c3d5; background: transparent; border: 1px solid var(--line); padding: 9px 14px; border-radius: 999px; font-size: .78rem; transition: .2s; }.filter:hover, .filter.is-active { background: #e9e6ff; border-color: #e9e6ff; color: #15152a; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.work-card { min-width: 0; cursor: pointer; text-align: left; padding: 0; color: var(--text); border: 1px solid var(--line); background: var(--surface); overflow: hidden; border-radius: 3px; transition: transform .32s cubic-bezier(.2,.7,.2,1), border-color .2s ease; }
.work-card:hover { transform: translateY(-7px); border-color: rgba(202,191,255,.66); }.work-card:focus-visible, .filter:focus-visible, .close-modal:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.work-card[hidden] { display: none; }
.thumb { display: block; width: 100%; aspect-ratio: 16 / 10.5; position: relative; overflow: hidden; background: linear-gradient(135deg, #262450, #0e2b46 52%, #17222f); }
.thumb img { height: 100%; width: 100%; object-fit: cover; opacity: .83; transition: transform .45s ease, opacity .3s; }.work-card:hover .thumb img { transform: scale(1.05); opacity: 1; }
.thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(3,4,13,.68)); pointer-events: none; }
.play { position: absolute; z-index: 1; top: 16px; right: 16px; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.65); background: rgba(10,10,27,.26); color: white; border-radius: 50%; backdrop-filter: blur(4px); font-size: .74rem; }
.card-meta { padding: 16px 17px 17px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }.card-category { display: block; margin: 0 0 6px; color: var(--mint); text-transform: uppercase; letter-spacing: .15em; font-size: .61rem; font-weight: 760; }.card-title { display: block; font-size: 1rem; letter-spacing: -.035em; font-weight: 620; }.card-arrow { color: #b8b5cc; font-size: 1.25rem; }

.contact-section { text-align: center; padding: 144px 24px 150px; background: radial-gradient(ellipse at 50% 100%, rgba(96,75,208,.29), transparent 45rem); }.contact-section .eyebrow { justify-content: center; }.contact-section h2 { margin-bottom: 28px; }.contact-section > p:not(.eyebrow) { max-width: 490px; color: var(--muted); line-height: 1.65; margin: 0 auto 29px; }.contact-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
footer { padding: 28px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; } footer p { margin: 0; }.footer-links { display: flex; gap: 15px; }.footer-links a { color: var(--text); }

.video-modal { width: min(940px, calc(100% - 32px)); color: var(--text); padding: 0; border: 1px solid rgba(221,215,255,.3); background: #0d0e20; border-radius: 10px; box-shadow: 0 25px 90px rgba(0,0,0,.7); }.video-modal::backdrop { background: rgba(2,3,12,.86); backdrop-filter: blur(8px); }.modal-topbar { min-height: 75px; display: flex; align-items: center; justify-content: space-between; padding: 15px 20px 13px; border-bottom: 1px solid var(--line); }.modal-category { color: var(--mint); margin: 0 0 4px; font-size: .63rem; text-transform: uppercase; letter-spacing: .16em; }.modal-topbar h3 { margin: 0; font-size: 1.08rem; letter-spacing: -.03em; }.close-modal { cursor: pointer; width: 37px; height: 37px; color: white; background: transparent; border: 1px solid var(--line); font-size: 1.7rem; border-radius: 50%; line-height: 1; }.video-frame { width: 100%; aspect-ratio: 16 / 9; background: #05050c; }.video-frame iframe { width: 100%; height: 100%; border: 0; }.modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: .82rem; }.modal-footer a { color: var(--mint); }.modal-nav { display: flex; gap: 6px; }.modal-nav button { cursor: pointer; padding: 7px 10px; background: transparent; border: 1px solid var(--line); border-radius: 4px; color: #e1dfec; font-size: .75rem; }.modal-nav button:hover { background: rgba(255,255,255,.08); }

@media (max-width: 850px) { .orbit { opacity: .55; right: -120px; top: 90px; }.portfolio-grid { grid-template-columns: repeat(2, 1fr); }.section-heading { align-items: start; flex-direction: column; gap: 22px; }.section-heading > p { margin-bottom: 0; } footer { gap: 15px; flex-wrap: wrap; } }
@media (max-width: 560px) { .site-header, footer, .hero { width: min(100% - 32px, 1180px); }.site-header { height: 74px; }.hero { min-height: 610px; padding-top: 85px; overflow: hidden; }.brand { font-size: .9rem; }.social-icon { width: 32px; height: 32px; }.orbit { transform: scale(.73); transform-origin: top right; right: -112px; top: 175px; }.portfolio-grid { grid-template-columns: 1fr; gap: 13px; }.work-section { padding-top: 78px; padding-bottom: 85px; }.filters { gap: 7px; }.filter { font-size: .7rem; padding: 8px 11px; }.contact-section { padding: 100px 24px; } footer { padding: 24px 0; } footer p { width: 100%; order: 3; }.modal-footer { align-items: flex-start; gap: 15px; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }