:root {
  --bg: #050914;
  --bg-deep: #03060d;
  --navy: #081120;
  --card: #0b1427;
  --card-2: #0e1930;
  --line: rgba(129, 158, 208, .14);
  --line-strong: rgba(96, 165, 250, .28);
  --blue: #3b82f6;
  --blue-2: #60a5fa;
  --cyan: #22d3ee;
  --white: #f3f7ff;
  --text: #a8b4c9;
  --muted: #64748b;
  --display: "Space Grotesk", Inter, sans-serif;
  --body: Inter, Arial, sans-serif;
  --shadow: 0 30px 80px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg-deep); }
body { overflow-x: hidden; background: var(--bg); color: var(--white); font-family: var(--body); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 88% 12%, rgba(37, 99, 235, .09), transparent 28%), radial-gradient(circle at 5% 55%, rgba(34, 211, 238, .05), transparent 24%); }
a { color: inherit; text-decoration: none; }
button, input, textarea { color: inherit; font: inherit; }
button { border: 0; background: none; cursor: pointer; }
img, video { display: block; max-width: 100%; }
.container { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }
.font-display { font-family: var(--display); }
.text-secondary { color: var(--text); }
.text-muted { color: var(--muted); }
.uppercase-label, .section-index { color: var(--blue-2); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

/* Header */
.header { position: fixed; inset: 0 0 auto; z-index: 100; height: 80px; border-bottom: 1px solid var(--line); background: rgba(3, 6, 13, .82); backdrop-filter: blur(18px); transition: .3s ease; }
.header.scrolled { background: rgba(3, 6, 13, .96); box-shadow: 0 14px 35px rgba(0, 0, 0, .2); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--white); font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.logo::before { content: "OK"; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .72rem; background: linear-gradient(135deg, #38bdf8, #2563eb); color: white; font: 800 .75rem/1 var(--body); box-shadow: 0 0 25px rgba(59, 130, 246, .38); }
.nav-desktop { display: flex; align-items: center; gap: .28rem; margin-left: auto; }
.nav-desktop a { padding: .68rem .9rem; border-radius: .6rem; color: #94a3b8; font-size: .78rem; font-weight: 650; transition: .25s ease; }
.nav-desktop a:hover, .nav-desktop .nav-active { color: var(--white); background: rgba(59, 130, 246, .11); }
.header-tools { display: flex; align-items: center; gap: .85rem; }
.header-cta { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; padding: .72rem 1.1rem; border-radius: .72rem; background: linear-gradient(135deg, #4389ff, #2563eb); color: white; font-size: .76rem; font-weight: 750; box-shadow: 0 10px 28px rgba(37, 99, 235, .3); transition: transform .25s ease, box-shadow .25s ease; }
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(37, 99, 235, .42); }
.language-switch { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .69rem; font-weight: 750; }
.language-switch .active { color: var(--blue-2); }
.language-switch i { font-style: normal; opacity: .35; }
.menu-btn { display: none; width: 2.8rem; height: 2.8rem; position: relative; border: 1px solid transparent; }
.menu-btn span { position: absolute; left: .65rem; width: 1.35rem; height: 1px; background: var(--white); transition: .25s ease; }
.menu-btn span:first-child { top: 1.08rem; }.menu-btn span:last-child { top: 1.62rem; }
.menu-btn.open { border-color: var(--line-strong); }.menu-btn.open span:first-child { top: 1.35rem; transform: rotate(45deg); }.menu-btn.open span:last-child { top: 1.35rem; transform: rotate(-45deg); }
.mobile-menu { display: none; }

/* Hero */
.hero { position: relative; min-height: 900px; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #050914 0%, #07101f 50%, #06101c 100%); }
.hero-grid-lines, .studio-visual::before, .project-graphic::before { position: absolute; inset: 0; content: ""; pointer-events: none; background-image: linear-gradient(rgba(104, 139, 190, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 139, 190, .055) 1px, transparent 1px); background-size: 78px 78px; mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent); }
.hero-glow { position: absolute; border-radius: 999px; filter: blur(45px); pointer-events: none; }
.hero-glow-left { left: -12rem; bottom: 2rem; width: 34rem; height: 25rem; background: rgba(6, 182, 212, .15); }
.hero-glow-right { right: -8rem; top: 5rem; width: 38rem; height: 32rem; background: rgba(37, 99, 235, .18); }
.hero-inner { position: relative; z-index: 2; min-height: 900px; padding-top: 80px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3.5rem; }
.hero-copy { min-width: 0; padding: 4rem 0 2rem; max-width: 720px; }
.eyebrow { width: max-content; display: flex; align-items: center; gap: .65rem; margin-bottom: 2.2rem; padding: .42rem .85rem; border: 1px solid rgba(59, 130, 246, .38); border-radius: 999px; background: rgba(10, 21, 42, .72); color: var(--blue-2); font-size: .72rem; font-weight: 700; }
.eyebrow > span:first-child { width: .44rem; height: .44rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.hero h1 { display: flex; flex-direction: column; align-items: flex-start; color: var(--white); font-family: var(--display); font-size: clamp(4rem, 5.6vw, 6.3rem); font-weight: 700; letter-spacing: -.065em; line-height: .95; }
.hero h1 strong { margin: .18em 0; background: linear-gradient(90deg, #60a5fa, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: inherit; white-space: nowrap; }
.hero-lead { max-width: 650px; margin-top: 2rem; color: var(--text); font-size: 1.02rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }
.btn { min-height: 3.65rem; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: .85rem 1.35rem; border: 1px solid var(--line); border-radius: .78rem; font-size: .83rem; font-weight: 750; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { border-color: transparent; background: linear-gradient(135deg, #4389ff, #2563eb); color: white; box-shadow: 0 12px 32px rgba(37, 99, 235, .33); }
.btn-secondary { background: rgba(15, 25, 45, .78); color: var(--white); }
.btn-secondary:hover { border-color: var(--line-strong); background: var(--card-2); }
.hero-stats { max-width: 630px; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; padding-top: 1.65rem; border-top: 1px solid var(--line); }
.hero-stats div { display: flex; flex-direction: column; gap: .18rem; }
.hero-stats strong { color: var(--white); font: 700 1.45rem/1 var(--display); }
.hero-stats span { color: var(--muted); font-size: .69rem; }
.hero-stage { position: relative; height: 710px; isolation: isolate; }
.hero-stage::before { content: ""; position: absolute; inset: 7% -14% 2% 0; z-index: -3; border-radius: 50%; background: radial-gradient(circle at 58% 48%, rgba(49, 46, 129, .34), transparent 26%), radial-gradient(circle at 68% 48%, rgba(37, 99, 235, .24), transparent 40%); filter: blur(4px); }
.stage-orbit { position: absolute; border: 1px solid rgba(96, 165, 250, .08); border-radius: 50%; pointer-events: none; }
.stage-orbit-one { width: 520px; height: 520px; right: -35px; top: 95px; }.stage-orbit-two { width: 380px; height: 380px; right: 35px; top: 165px; }
.portrait-ghost { position: absolute; width: 385px; height: 650px; right: 62px; bottom: 0; overflow: hidden; opacity: .4; filter: saturate(.66) contrast(1.12); mask-image: linear-gradient(to bottom, transparent 0%, black 13%, black 76%, transparent 100%); }
.portrait-ghost::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 9, 20, .9), transparent 25%, transparent 72%, rgba(5, 9, 20, .7)); }
.portrait-ghost video { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.service-chip { position: absolute; z-index: 3; min-width: 178px; display: flex; align-items: center; gap: .75rem; padding: .8rem .95rem; border: 1px solid rgba(96, 165, 250, .18); border-radius: 1rem; background: rgba(10, 19, 37, .78); box-shadow: 0 18px 50px rgba(0, 0, 0, .23); backdrop-filter: blur(14px); animation: float 5s ease-in-out infinite; }
.service-chip b { color: #aebbd1; font-size: .72rem; font-weight: 650; white-space: nowrap; }
.chip-icon { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: .7rem; background: rgba(59, 130, 246, .18); color: var(--blue-2); font: 800 .72rem/1 var(--body); }
.chip-web { left: 2%; top: 19%; }.chip-ai { right: -4%; top: 34%; animation-delay: -.9s; }.chip-auto { left: -3%; top: 57%; animation-delay: -1.8s; }.chip-qr { right: 2%; top: 72%; animation-delay: -2.7s; }
.stage-signature { position: absolute; right: 15%; bottom: 4.5rem; display: flex; flex-direction: column; align-items: flex-end; color: rgba(255,255,255,.2); font: 700 .65rem/1.4 var(--display); letter-spacing: .12em; }.stage-signature b { color: rgba(34,211,238,.35); font-weight: inherit; }
.hero-bottom-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), transparent); opacity: .35; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Shared sections */
.section { position: relative; padding: 9rem 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); align-items: end; gap: 4rem; margin-bottom: 4rem; }
.section-heading h2, .studio-copy h2, .contact-section h2 { max-width: 910px; margin-top: 1rem; color: var(--white); font: 650 clamp(2.65rem, 4.5vw, 5rem)/1.04 var(--display); letter-spacing: -.055em; }
.section-heading > p { max-width: 430px; color: var(--text); font-size: .93rem; }
.text-link { color: var(--blue-2); font-size: .82rem; font-weight: 750; }
.reveal, .reveal-media { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }.reveal-media { transform: translateY(14px) scale(.985); }.reveal.visible, .reveal-media.visible { opacity: 1; transform: none; }

/* Services */
.services { background: linear-gradient(180deg, #060b17, #050914); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 1.4rem; overflow: hidden; box-shadow: var(--shadow); }
.service-card { position: relative; min-height: 385px; padding: 2rem 1.7rem; border-right: 1px solid var(--line); background: linear-gradient(150deg, rgba(14, 25, 48, .9), rgba(7, 14, 28, .96)); transition: transform .3s ease, background .3s ease; }
.service-card:last-child { border-right: 0; }.service-card:hover { z-index: 2; transform: translateY(-6px); background: linear-gradient(150deg, rgba(18, 38, 75, .98), rgba(8, 17, 34, 1)); }
.service-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 10%, rgba(59,130,246,.18), transparent 34%); opacity: 0; transition: opacity .3s; }.service-card:hover::after { opacity: 1; }
.service-number { color: var(--muted); font: 700 .68rem/1 var(--display); }
.service-mark { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; margin-top: 3.7rem; border: 1px solid rgba(96,165,250,.2); border-radius: .9rem; background: rgba(59,130,246,.11); color: var(--cyan); font: 700 .86rem/1 var(--display); }
.service-card h3 { margin-top: 1.45rem; color: var(--white); font: 650 1.28rem/1.2 var(--display); }.service-card p { margin-top: .9rem; color: var(--text); font-size: .84rem; line-height: 1.75; }.service-card > span { position: absolute; left: 1.7rem; bottom: 1.8rem; color: var(--blue-2); font-size: .64rem; font-weight: 700; }

/* Studio */
.studio { overflow: hidden; background: #070d19; }
.studio::before { content: ""; position: absolute; right: -12%; top: -35%; width: 52%; height: 120%; background: radial-gradient(circle, rgba(37,99,235,.13), transparent 62%); }
.studio-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6rem; align-items: stretch; }
.studio-visual { position: relative; min-height: 600px; overflow: hidden; border: 1px solid var(--line); border-radius: 1.5rem; background: linear-gradient(145deg, #0d1a34, #050914 62%); box-shadow: var(--shadow); }
.studio-monogram { position: absolute; left: 10%; top: 10%; z-index: 2; color: transparent; -webkit-text-stroke: 1px rgba(96,165,250,.42); font: 700 clamp(8rem, 15vw, 15rem)/1 var(--display); letter-spacing: -.1em; }
.studio-scan { position: absolute; width: 240px; height: 240px; right: 8%; bottom: 15%; border: 1px solid rgba(34,211,238,.2); border-radius: 50%; box-shadow: inset 0 0 50px rgba(34,211,238,.08), 0 0 50px rgba(37,99,235,.1); }.studio-scan::before, .studio-scan::after { content: ""; position: absolute; background: rgba(96,165,250,.22); }.studio-scan::before { left: 50%; top: -30%; width: 1px; height: 160%; }.studio-scan::after { top: 50%; left: -30%; height: 1px; width: 160%; }
.studio-visual > p { position: absolute; left: 2rem; bottom: 2rem; z-index: 3; color: var(--blue-2); font: 700 .68rem/1.6 var(--display); letter-spacing: .1em; }.studio-visual > p span { color: var(--muted); font-weight: 500; }
.studio-copy { position: relative; z-index: 2; padding: 2.5rem 0; }.studio-copy h2 { font-size: clamp(2.7rem, 4vw, 4.6rem); }.studio-copy > p:not(.section-index) { max-width: 700px; margin: 1.8rem 0; color: var(--text); font-size: 1rem; }
.studio-facts { margin-top: 3rem; border-top: 1px solid var(--line); }.studio-facts div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }.studio-facts span { color: var(--blue-2); font-size: .64rem; font-weight: 800; letter-spacing: .12em; }.studio-facts b { color: #cbd5e1; font-size: .84rem; font-weight: 600; }

/* Projects */
.projects { background: #050914; }.project-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.1rem; }
.project-card { position: relative; min-height: 610px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; border: 1px solid var(--line); border-radius: 1.45rem; background: linear-gradient(145deg, #101b35, #07101f 62%); box-shadow: var(--shadow); transition: transform .3s, border-color .3s; }.project-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.project-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 90% 0, rgba(34,211,238,.12), transparent 34%); }
.project-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }.project-top span { padding: .38rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--blue-2); font-size: .62rem; font-weight: 800; }.project-top b { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 50%; background: rgba(5,9,20,.65); color: var(--blue-2); }
.project-graphic { position: absolute; inset: 5rem 1rem 11rem; overflow: hidden; }.qr-block { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); z-index: 2; width: 7rem; height: 7rem; display: grid; place-items: center; border: 1px solid rgba(34,211,238,.3); border-radius: 1.4rem; color: var(--cyan); font: 500 4rem/1 var(--display); box-shadow: 0 0 65px rgba(34,211,238,.14); }.project-graphic i { position: absolute; left: 50%; top: 45%; width: 13rem; height: 13rem; border: 1px solid rgba(96,165,250,.12); border-radius: 50%; transform: translate(-50%,-50%); }.project-graphic i:nth-of-type(2) { width: 21rem; height: 21rem; }.project-graphic i:nth-of-type(3) { width: 30rem; height: 30rem; }
.hq-graphic { position: absolute; inset: 6rem 0 11rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,.08); font: 700 clamp(4rem,9vw,7.5rem)/.8 var(--display); letter-spacing: -.08em; }.hq-graphic strong { color: transparent; -webkit-text-stroke: 1px rgba(34,211,238,.28); }
.project-content { position: relative; z-index: 2; }.project-content p { color: var(--cyan); font-size: .64rem; font-weight: 800; letter-spacing: .08em; }.project-content h3 { max-width: 700px; margin: .65rem 0 .75rem; color: var(--white); font: 650 clamp(1.7rem,2.7vw,3rem)/1.08 var(--display); letter-spacing: -.04em; }.project-content > span { color: var(--muted); font-size: .69rem; }

/* Network */
.systems { background: #070d19; }.network-panel { display: grid; grid-template-columns: .38fr .62fr; overflow: hidden; border: 1px solid var(--line); border-radius: 1.45rem; background: #091225; box-shadow: var(--shadow); }
.network-core { min-height: 450px; display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; border-right: 1px solid var(--line); background: radial-gradient(circle at 15% 20%, rgba(37,99,235,.2), transparent 42%), #0b1428; }.network-core span { color: var(--blue-2); font-size: .64rem; font-weight: 800; letter-spacing: .13em; }.network-core strong { margin-top: .6rem; color: var(--white); font: 700 clamp(2.5rem,4vw,4.2rem)/1 var(--display); letter-spacing: -.07em; }.network-core b { color: var(--cyan); font-size: .65rem; letter-spacing: .14em; }
.network-list a { min-height: 112px; display: grid; grid-template-columns: 3rem 1fr 1fr 1.5rem; align-items: center; gap: 1rem; padding: 1rem 2.2rem; border-bottom: 1px solid var(--line); transition: background .25s; }.network-list a:last-child { border-bottom: 0; }.network-list a:hover { background: rgba(59,130,246,.08); }.network-list i { color: var(--blue-2); font-size: .65rem; font-style: normal; font-weight: 800; }.network-list strong { color: var(--white); font: 650 1.25rem/1.2 var(--display); }.network-list span { color: var(--muted); font-size: .7rem; }.network-list b { color: var(--blue-2); font-size: .85rem; }

/* Experience and contact */
.experience { background: #050914; }.experience-list { display: grid; gap: .85rem; }.experience-row { display: grid; grid-template-columns: .18fr .32fr .42fr .08fr; align-items: center; gap: 1.5rem; min-height: 145px; padding: 1.5rem 2rem; border: 1px solid var(--line); border-radius: 1.2rem; background: linear-gradient(90deg, rgba(12,22,43,.9), rgba(8,15,30,.9)); transition: border-color .25s, transform .25s; }.experience-row:hover { transform: translateX(5px); border-color: var(--line-strong); }.experience-row > span, .experience-row > b { color: var(--blue-2); font: 700 .83rem/1 var(--display); }.experience-row small { color: var(--blue-2); font-size: .63rem; font-weight: 800; letter-spacing: .12em; }.experience-row h3 { margin-top: .35rem; color: var(--white); font: 650 1.45rem/1.2 var(--display); }.experience-row p { color: var(--text); font-size: .8rem; }.experience-row > b { text-align: right; }
.contact-section { position: relative; overflow: hidden; padding: 9rem 0; border-bottom: 1px solid var(--line); background: linear-gradient(110deg, #0a1832, #07101f 55%, #0b2240); }.contact-glow { position: absolute; width: 40rem; height: 40rem; right: -10rem; top: -18rem; border-radius: 50%; background: rgba(59,130,246,.2); filter: blur(70px); }.contact-grid { position: relative; display: grid; grid-template-columns: 1.5fr .5fr; align-items: center; gap: 5rem; }.contact-section h2 { max-width: 930px; }.contact-card { padding: 2rem; border: 1px solid rgba(96,165,250,.2); border-radius: 1.2rem; background: rgba(5,11,24,.58); backdrop-filter: blur(10px); }.contact-card p { margin-bottom: 1.4rem; color: var(--text); font-size: .88rem; }

/* Footer */
.footer { padding: 4rem 0 1.4rem; background: var(--bg-deep); }.footer-main { display: grid; grid-template-columns: 1fr .8fr .6fr; gap: 3rem; align-items: start; padding-bottom: 3rem; }.footer-brand { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .8rem; align-items: center; width: max-content; }.footer-brand > span { grid-row: span 2; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .72rem; background: linear-gradient(135deg,#38bdf8,#2563eb); color: white; font-size: .75rem; font-weight: 800; }.footer-brand strong { color: var(--white); font: 700 1rem/1 var(--display); }.footer-brand small { color: var(--muted); font-size: .62rem; }.footer-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: .5rem 2rem; }.footer-nav a { color: var(--text); font-size: .77rem; }.footer-place { display: flex; flex-direction: column; gap: .25rem; }.footer-place strong { color: var(--white); font-size: .68rem; }.footer-place span { color: var(--muted); font-size: .6rem; }.footer-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .59rem; font-weight: 700; letter-spacing: .08em; }.footer-bottom p:nth-child(2) { text-align: center; }.footer-bottom a { text-align: right; color: var(--text); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; }.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }.footer-links a { color: var(--text); font-size: .76rem; }

/* Secondary pages */
body:not(.home-page) { padding-top: 80px; background: #050914; }.page-hero { position: relative; min-height: 420px; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 10%,rgba(37,99,235,.16),transparent 35%), linear-gradient(rgba(104,139,190,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(104,139,190,.045) 1px,transparent 1px), #07101f; background-size: auto, 70px 70px, 70px 70px; }.page-hero h1 { margin: .65rem 0 .5rem; color: var(--white); font: 650 clamp(3.2rem,7vw,6.8rem)/1 var(--display); letter-spacing: -.065em; }.page-hero .text-secondary { max-width: 42rem; }.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5rem; }.border-top { border-top: 1px solid var(--line); }.section-title { margin: .75rem 0 2.5rem; color: var(--white); font: 650 clamp(2.2rem,4vw,4rem)/1.05 var(--display); letter-spacing: -.05em; }.card { padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }.skills-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }.skill-card { padding: 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }.project-img { display: grid; min-height: 280px; place-items: center; border: 1px solid var(--line); border-radius: 1.1rem; background: radial-gradient(circle at 50% 50%,rgba(37,99,235,.15),transparent 35%), #081225; color: var(--blue-2); font: 700 1rem/1.4 var(--display); text-align: center; }.project-full { display: grid; grid-template-columns: .52fr .48fr; gap: 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--card); }.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }.gallery-card { min-height: 280px; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }.form-group { margin-bottom: 1rem; }.form-group label { display: block; margin-bottom: .45rem; color: var(--blue-2); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.form-group input, .form-group textarea { width: 100%; min-height: 3.5rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .75rem; outline: none; background: #081225; }.form-group textarea { min-height: 10rem; resize: vertical; }.form-group input:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.ai-btn { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 80; width: 3.3rem; height: 3.3rem; border-radius: 50%; background: linear-gradient(135deg,#38bdf8,#2563eb); color: white; font-weight: 800; box-shadow: 0 12px 35px rgba(37,99,235,.4); }.ai-panel { position: fixed; right: 1.5rem; bottom: 5.6rem; z-index: 90; width: min(360px,calc(100vw - 2rem)); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(12px); border: 1px solid var(--line-strong); border-radius: 1rem; background: #081225; box-shadow: var(--shadow); transition: .25s; }.ai-panel.open { opacity: 1; visibility: visible; transform: none; }.ai-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--line); }.ai-messages { max-height: 260px; overflow-y: auto; padding: 1rem; }.ai-msg { width: max-content; max-width: 86%; margin-bottom: .65rem; padding: .65rem .8rem; border-radius: .75rem; background: var(--card-2); color: var(--text); font-size: .77rem; }.ai-msg.user { margin-left: auto; background: var(--blue); color: white; }.ai-form { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--line); }.ai-form input { min-width: 0; flex: 1; padding: .65rem; border: 1px solid var(--line); border-radius: .6rem; background: #050914; }.ai-form button { color: var(--blue-2); font-size: .72rem; font-weight: 800; }
.portrait-card { overflow: hidden; padding: 0; }.portrait-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.8) contrast(1.05); }
.music-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .4rem; }.music-visual::before { content: ""; position: absolute; width: 13rem; height: 13rem; border: 1px solid rgba(34,211,238,.22); border-radius: 50%; box-shadow: 0 0 70px rgba(37,99,235,.14); }.music-visual strong { position: relative; color: transparent; -webkit-text-stroke: 1px rgba(96,165,250,.5); font: 700 4rem/1 var(--display); }.music-visual span { position: relative; color: var(--cyan); font-size: .62rem; letter-spacing: .12em; }
.gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }.gallery-item { overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }.gallery-placeholder { position: relative; min-height: 280px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 65% 30%,rgba(59,130,246,.24),transparent 28%), linear-gradient(145deg,#102142,#07101f); color: transparent; -webkit-text-stroke: 1px rgba(96,165,250,.35); font: 700 5rem/1 var(--display); }.gallery-placeholder::before { content: ""; position: absolute; width: 12rem; height: 12rem; border: 1px solid rgba(34,211,238,.16); border-radius: 50%; }.gallery-placeholder::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(104,139,190,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(104,139,190,.06) 1px,transparent 1px); background-size: 45px 45px; }.gallery-caption { padding: .8rem 1rem; color: var(--text); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .nav-desktop a { padding-inline: .62rem; }.header-cta { display: none; }.hero-inner { grid-template-columns: 1fr .82fr; gap: 1rem; }.hero h1 { font-size: clamp(3.6rem,6.3vw,5rem); }.service-grid { grid-template-columns: repeat(2,1fr); }.service-card { border-bottom: 1px solid var(--line); }.service-card:nth-child(2) { border-right: 0; }.studio-grid { gap: 3rem; }.contact-grid { grid-template-columns: 1.2fr .8fr; }
}
@media (max-width: 860px) {
  .container { width: min(100% - 36px, 720px); }.header { height: 68px; }.nav-desktop, .header-cta { display: none; }.menu-btn { display: block; }.mobile-menu { position: fixed; inset: 68px 0 0; z-index: 99; display: flex; flex-direction: column; padding: 2.4rem 1.5rem; opacity: 0; visibility: hidden; background: rgba(3,6,13,.98); transform: translateY(-10px); transition: .25s; }.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }.mobile-menu-kicker { margin-bottom: 1rem; color: var(--blue-2); font-size: .65rem; font-weight: 800; letter-spacing: .14em; }.mobile-menu a { padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--white); font: 650 clamp(1.8rem,8vw,2.5rem)/1.2 var(--display); }.mobile-menu-meta { margin-top: auto; color: var(--muted); font-size: .65rem; letter-spacing: .1em; }body.menu-open { overflow: hidden; }
  .hero { min-height: auto; }.hero-inner { min-height: auto; grid-template-columns: 1fr; padding-top: 68px; }.hero-copy { max-width: none; padding: 5rem 0 2rem; }.hero h1 { font-size: clamp(3.7rem,11vw,5.5rem); }.hero-stage { height: 570px; }.portrait-ghost { right: 50%; transform: translateX(50%); width: 330px; height: 540px; }.service-chip { min-width: 150px; }.chip-web { left: 0; top: 17%; }.chip-ai { right: 0; top: 31%; }.chip-auto { left: 2%; top: 61%; }.chip-qr { right: 1%; top: 73%; }
  .section, .contact-section { padding: 6.5rem 0; }.section-heading { grid-template-columns: 1fr; gap: 1.5rem; }.section-heading h2, .studio-copy h2, .contact-section h2 { font-size: clamp(2.5rem,8vw,4rem); }.service-grid { grid-template-columns: 1fr 1fr; }.studio-grid, .project-grid, .network-panel, .contact-grid { grid-template-columns: 1fr; }.studio-visual { min-height: 480px; }.network-core { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }.experience-row { grid-template-columns: .22fr .78fr; }.experience-row p { grid-column: 2; }.experience-row > b { display: none; }.footer-main { grid-template-columns: 1fr 1fr; }.footer-place { grid-column: span 2; }.grid-2, .project-full { grid-template-columns: 1fr; gap: 2rem; }.skills-grid, .gallery-grid { grid-template-columns: repeat(2,1fr); }body:not(.home-page) { padding-top: 68px; }
  .gallery { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .container { width: calc(100% - 32px); }.logo { font-size: .9rem; }.language-switch { font-size: .64rem; }.hero-copy { width: 100%; min-width: 0; padding-top: 4rem; }.eyebrow { margin-bottom: 1.5rem; font-size: .62rem; }.hero h1 { width: 100%; max-width: 100%; font-size: clamp(2.65rem,12vw,3.8rem); }.hero h1 strong { max-width: 100%; white-space: normal; }.hero-lead { width: 100%; max-width: 100%; font-size: .9rem; line-height: 1.7; }.hero-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }.btn { min-width: 0; min-height: 3.35rem; padding-inline: .5rem; font-size: .66rem; white-space: nowrap; }.hero-stats { gap: .7rem; }.hero-stats strong { font-size: 1.15rem; }.hero-stats span { font-size: .58rem; }.hero-stage { height: 480px; margin-inline: -8px; }.portrait-ghost { width: 280px; height: 470px; }.stage-orbit-one { width: 380px; height: 380px; right: -30px; }.stage-orbit-two { width: 290px; height: 290px; right: 15px; }.service-chip { min-width: auto; padding: .55rem .65rem; border-radius: .75rem; }.service-chip b { font-size: .6rem; }.chip-icon { width: 1.75rem; height: 1.75rem; font-size: .58rem; }.chip-web { top: 12%; }.chip-ai { top: 34%; }.chip-auto { top: 62%; }.chip-qr { top: 77%; }
  .section, .contact-section { padding: 5rem 0; }.section-heading { margin-bottom: 2.5rem; }.section-heading h2, .studio-copy h2, .contact-section h2 { font-size: clamp(2.2rem,10.5vw,3.25rem); }.service-grid { grid-template-columns: 1fr; }.service-card { min-height: 320px; border-right: 0; }.service-card:nth-child(3) { border-bottom: 1px solid var(--line); }.studio-visual { min-height: 390px; }.studio-monogram { font-size: 9rem; }.studio-facts div { grid-template-columns: 5rem 1fr; }.project-card { min-height: 520px; padding: 1.4rem; }.project-content h3 { font-size: 1.7rem; }.network-core { padding: 2rem; }.network-list a { grid-template-columns: 2rem 1fr 1rem; padding: 1rem 1.2rem; }.network-list a span { display: none; }.network-list strong { font-size: 1rem; }.experience-row { padding: 1.25rem; grid-template-columns: 1fr; gap: .8rem; }.experience-row p { grid-column: 1; }.experience-row h3 { font-size: 1.2rem; }.footer-main { grid-template-columns: 1fr; }.footer-place { grid-column: auto; }.footer-bottom { grid-template-columns: 1fr auto; }.footer-bottom p:nth-child(2) { display: none; }.page-hero { min-height: 330px; }.page-hero h1 { font-size: 3.5rem; }.skills-grid, .gallery-grid { grid-template-columns: 1fr; }
  .footer-top { align-items: flex-start; flex-direction: column; }.gallery { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal,.reveal-media { opacity: 1; transform: none; } }