:root {
  --bg: var(--cms-bg-dark, #06070a);
  --bg-2: #0b0d13;
  --panel: rgba(17, 20, 30, 0.72);
  --panel-solid: #11141e;
  --text: var(--cms-text-dark, #f4f6fb);
  --muted: #939aab;
  --line: rgba(255, 255, 255, 0.1);
  --line-bright: rgba(255, 255, 255, 0.22);
  --violet: #8b5cf6;
  --blue: #2f7df4;
  --cyan: #32e6d2;
  --pink: #f05bca;
  --lime: #b8ff5a;
  --gradient: linear-gradient(125deg, var(--cyan), var(--blue) 45%, var(--violet) 72%, var(--pink));
  --gradient-hot: linear-gradient(120deg, #ff5ec4, #9d63ff 48%, #37e9ff);
  --shadow-glow: 0 0 80px rgba(82, 97, 255, 0.22);
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 38px;
  --font-thai: "IBM Plex Sans Thai", Tahoma, sans-serif;
  --font-display: "Space Grotesk", var(--font-thai);
}

[data-theme="light"] {
  --bg: var(--cms-bg-light, #f1f4fb);
  --bg-2: #e8edf8;
  --panel: rgba(255, 255, 255, 0.74);
  --panel-solid: #ffffff;
  --text: var(--cms-text-light, #10121a);
  --muted: #626a7b;
  --line: rgba(16, 18, 26, 0.1);
  --line-bright: rgba(16, 18, 26, 0.2);
  --shadow-glow: 0 24px 80px rgba(70, 81, 155, 0.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-thai);
  font-size: 16px;
  line-height: 1.7;
  transition: color 0.3s ease, background 0.3s ease, opacity 0.2s ease;
}
body.is-leaving { opacity: 0; }
body.menu-open { overflow: hidden; }
body::before {
  position: fixed;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
[data-theme="light"] body::before { background-image: linear-gradient(rgba(20,30,60,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(20,30,60,.04) 1px, transparent 1px); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
.brand-mark img,.holo-core b img,.profile-core strong img{width:100%;height:100%;object-fit:contain;transform:scale(var(--cms-logo-scale,1));transform-origin:center}.brand-mark.has-cms-logo{overflow:visible;background:transparent;border-radius:0;box-shadow:none;animation:none}.brand-mark.has-cms-logo::after{display:none}.brand-mark.has-cms-logo img{padding:0}.holo-core b.has-cms-logo img,.profile-core strong.has-cms-logo img{padding:0}.holo-core.has-cms-logo-container,.profile-core.has-cms-logo-container{background:transparent;box-shadow:none;border-color:transparent}
::selection { color: #050609; background: var(--cyan); }

.container { width: min(1240px, calc(100% - 56px)); margin-inline: auto; }
.page-shell { position: relative; z-index: 1; }
.section { position: relative; padding: 130px 0; }
.section-tight { padding: 84px 0; }
.skip-link { position: fixed; z-index: 999; top: -80px; left: 18px; padding: 10px 16px; color: #050609; background: var(--cyan); border-radius: 10px; }
.skip-link:focus { top: 18px; }

.ambient {
  position: fixed;
  z-index: -2;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.13;
  pointer-events: none;
}
.ambient-a { top: -280px; right: -170px; background: var(--violet); }
.ambient-b { bottom: -300px; left: -200px; background: var(--blue); }
.cursor-glow { position: fixed; z-index: 0; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(73, 196, 255, .08), transparent 66%); transform: translate(-50%, -50%); pointer-events: none; }

.site-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; padding: 18px 0; transition: padding .3s ease, background .3s ease, border .3s ease; }
.site-header.is-scrolled { padding: 10px 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(20px); }
.nav-shell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: inline-flex; gap: 10px; align-items: center; width: max-content; font: 700 .76rem/1 var(--font-display); letter-spacing: .16em; }
.brand-mark { position: relative; display: grid; width: 36px; height: 36px; overflow: hidden; color: white; background: var(--gradient); border-radius: 11px; place-items: center; box-shadow: 0 0 30px rgba(79,123,255,.35); font: 700 .9rem/1 var(--font-display); }
.brand-mark::after { position: absolute; inset: 1px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; content: ""; }
.main-nav { display: flex; gap: 6px; align-items: center; padding: 5px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(18px); }
.main-nav a { position: relative; padding: 8px 16px; color: var(--muted); border-radius: 999px; font-size: .8rem; font-weight: 600; transition: .2s; }
.main-nav a:hover, .main-nav a.is-active { color: var(--text); background: rgba(255,255,255,.08); }
[data-theme="light"] .main-nav a:hover, [data-theme="light"] .main-nav a.is-active { background: rgba(16,18,26,.06); }
.main-nav a.is-active::after { position: absolute; right: 14px; bottom: 4px; left: 14px; height: 1px; background: var(--gradient); content: ""; }
.nav-actions { display: flex; gap: 9px; justify-self: end; align-items: center; }
.icon-button { display: grid; width: 42px; height: 42px; padding: 0; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; place-items: center; transition: .2s; }
.icon-button:hover { border-color: var(--line-bright); background: rgba(255,255,255,.09); transform: translateY(-2px); }
.theme-icon { font-size: 1.05rem; }
.nav-cta { display: inline-flex; gap: 9px; align-items: center; height: 42px; padding: 0 18px; color: #050609; background: var(--cyan); border-radius: 999px; font-size: .76rem; font-weight: 700; }
.nav-cta i { width: 6px; height: 6px; background: #050609; border-radius: 50%; animation: pulse 1.8s infinite; }
.menu-toggle { position: relative; display: none; color: var(--text); }
.menu-toggle::before,.menu-toggle::after { position: absolute; left: 50%; width: 19px; height: 2px; background: currentColor; border-radius: 999px; content: ""; transform: translate(-50%,-4px); transition: transform .2s ease; }
.menu-toggle::after { transform: translate(-50%,4px); }
.menu-toggle span { display: none; }

.eyebrow { display: flex; gap: 10px; align-items: center; margin: 0 0 24px; color: var(--muted); font: 600 .68rem/1.2 var(--font-display); letter-spacing: .15em; text-transform: uppercase; }
.eyebrow::before { width: 28px; height: 1px; background: var(--gradient); content: ""; }
.eyebrow.light { color: rgba(255,255,255,.65); }
.gradient-text { color: transparent; background: var(--gradient-hot); background-clip: text; -webkit-background-clip: text; }
.display-title { margin: 0; font-family: var(--font-thai); font-size: clamp(3.8rem, 8.3vw, 8.9rem); font-weight: 600; letter-spacing: -.07em; line-height: .93; }
.section-title { margin: 0; font-size: clamp(2.7rem, 5.1vw, 5.8rem); font-weight: 600; letter-spacing: -.06em; line-height: 1.03; }
.section-head { display: flex; justify-content: space-between; gap: 60px; align-items: end; margin-bottom: 60px; }
.section-head > p { max-width: 440px; margin: 0; color: var(--muted); }
.section-index { font: 600 .66rem/1 var(--font-display); letter-spacing: .12em; }

.hero { display: flex; min-height: 100svh; padding: 148px 0 60px; align-items: center; overflow: hidden; }
.hero-canvas { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; mix-blend-mode: screen; }
.hero::before { position: absolute; z-index: 1; top: 8%; left: 50%; width: min(920px, 92vw); height: min(920px, 92vw); border: 1px solid var(--line); border-radius: 50%; content: ""; pointer-events: none; transform: translateX(-50%); box-shadow: inset 0 0 100px rgba(104, 76, 255, .07), 0 0 140px rgba(36, 121, 255,.08); }
.hero::after { position: absolute; z-index: 1; top: 17%; left: 50%; width: min(670px, 74vw); height: min(670px, 74vw); border: 1px dashed var(--line); border-radius: 50%; content: ""; pointer-events: none; transform: translateX(-50%); animation: spin 30s linear infinite; }
.hero-topline { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 50px; }
.availability { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: .78rem; }
.availability i { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 18px var(--lime); animation: pulse 2s infinite; }
.hero-code { color: var(--muted); font: 500 .68rem/1 var(--font-display); letter-spacing: .12em; }
.hero-title-wrap { position: relative; }
.hero-title-wrap .line { display: block; }
.hero-title-wrap .line:nth-child(2) { padding-left: 9vw; }
.hero-title-wrap .line:nth-child(3) { text-align: right; }
.hero-badge { position: absolute; top: 18%; right: 2%; display: grid; width: 112px; height: 112px; color: #050609; background: var(--cyan); border-radius: 50%; place-items: center; transform: rotate(8deg); box-shadow: 0 0 70px rgba(50,230,210,.28); }
.hero-badge span { font: 700 .62rem/1.4 var(--font-display); letter-spacing: .11em; text-align: center; }
.hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-top: 54px; }
.hero-intro { max-width: 660px; margin: 0; color: var(--muted); font-size: 1.12rem; }
.hero-intro strong { color: var(--text); font-weight: 500; }
.hero-actions { display: flex; gap: 13px; justify-content: flex-end; }
.button { display: inline-flex; justify-content: center; gap: 12px; align-items: center; min-height: 54px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-weight: 600; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: #050609; background: var(--cyan); box-shadow: 0 15px 40px rgba(50,230,210,.16); }
.button-ghost { background: rgba(255,255,255,.04); border-color: var(--line); backdrop-filter: blur(16px); }
.button-ghost:hover { background: rgba(255,255,255,.09); border-color: var(--line-bright); }
.button-arrow { display: grid; width: 27px; height: 27px; color: inherit; background: rgba(0,0,0,.12); border-radius: 50%; place-items: center; }
.scroll-indicator { position: absolute; right: 28px; bottom: 38px; display: flex; gap: 10px; align-items: center; color: var(--muted); font: 600 .58rem/1 var(--font-display); letter-spacing: .15em; writing-mode: vertical-rl; }
.scroll-indicator i { width: 1px; height: 54px; background: linear-gradient(var(--cyan), transparent); }

.hero[data-hero-contrast="light"],.cms-page-hero[data-hero-contrast="light"] { --hero-text:#f7f8fc; --hero-muted:rgba(231,235,246,.78); --hero-line:rgba(255,255,255,.22); }
.hero[data-hero-contrast="dark"],.cms-page-hero[data-hero-contrast="dark"] { --hero-text:#090b12; --hero-muted:rgba(9,11,18,.68); --hero-line:rgba(9,11,18,.2); }
.hero[data-hero-contrast] .hero-title-wrap .line:not(.gradient-text),.cms-page-hero[data-hero-contrast] .display-title { color:var(--hero-text); text-shadow:0 2px 32px rgba(0,0,0,.18); }
.hero[data-hero-contrast] .availability,.hero[data-hero-contrast] .hero-code,.hero[data-hero-contrast] .hero-intro,.hero[data-hero-contrast] .scroll-indicator,.cms-page-hero[data-hero-contrast] .eyebrow,.cms-page-hero[data-hero-contrast] .page-intro,.cms-page-hero[data-hero-contrast] .page-meta { color:var(--hero-muted); }
.hero[data-hero-contrast] .hero-intro strong { color:var(--hero-text); }
.hero[data-hero-contrast] .button-ghost { color:var(--hero-text); background:color-mix(in srgb,var(--hero-text) 8%,transparent); border-color:var(--hero-line); }
.hero[data-hero-contrast] .hero-canvas { opacity:.42; }
.hero[data-hero-contrast]::before,.hero[data-hero-contrast]::after { border-color:color-mix(in srgb,var(--hero-text) 22%,transparent); mix-blend-mode:screen; }
.cms-page-hero[data-hero-contrast="light"] .display-title { text-shadow:0 3px 34px rgba(0,0,0,.52); }
.cms-page-hero[data-hero-contrast="light"] .eyebrow,.cms-page-hero[data-hero-contrast="light"] .page-intro,.cms-page-hero[data-hero-contrast="light"] .page-meta { text-shadow:0 2px 18px rgba(0,0,0,.72); }
body[data-hero-contrast="light"] .site-header:not(.is-scrolled) { --header-text:#f7f8fc; --header-muted:rgba(235,238,247,.72); --header-panel:rgba(5,7,13,.42); --header-line:rgba(255,255,255,.16); }
body[data-hero-contrast="dark"] .site-header:not(.is-scrolled) { --header-text:#090b12; --header-muted:rgba(9,11,18,.68); --header-panel:rgba(255,255,255,.5); --header-line:rgba(9,11,18,.14); }
body[data-hero-contrast] .site-header:not(.is-scrolled) .brand,body[data-hero-contrast] .site-header:not(.is-scrolled) .icon-button { color:var(--header-text); }
body[data-hero-contrast] .site-header:not(.is-scrolled) .icon-button { background:var(--header-panel); border-color:var(--header-line); }
body[data-hero-contrast] .site-header:not(.is-scrolled) .main-nav { background:var(--header-panel); border-color:var(--header-line); }
body[data-hero-contrast] .site-header:not(.is-scrolled) .main-nav a { color:var(--header-muted); }
body[data-hero-contrast] .site-header:not(.is-scrolled) .main-nav a:hover,body[data-hero-contrast] .site-header:not(.is-scrolled) .main-nav a.is-active { color:var(--header-text); background:color-mix(in srgb,var(--header-text) 9%,transparent); }

.signal-strip { overflow: hidden; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
.signal-track { display: flex; width: max-content; gap: 26px; align-items: center; padding: 19px 0; animation: ticker 30s linear infinite; }
.signal-track span { font: 600 .67rem/1 var(--font-display); letter-spacing: .17em; }
.signal-track b { color: var(--cyan); font-size: .75rem; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(16px); }
.metric { position: relative; min-height: 180px; padding: 30px; border-right: 1px solid var(--line); }
.metric:last-child { border: 0; }
.metric strong { display: block; font: 600 clamp(2.4rem, 4vw, 4.3rem)/1 var(--font-display); letter-spacing: -.07em; }
.metric strong span { color: var(--cyan); }
.metric p { margin: 28px 0 0; color: var(--muted); font-size: .78rem; }
.metric::after { position: absolute; top: 18px; right: 18px; width: 5px; height: 5px; background: var(--line-bright); border-radius: 50%; content: ""; }

.featured-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; }
.project-card { position: relative; grid-column: span 6; }
.project-card.wide { grid-column: span 12; }
.project-visual { position: relative; display: block; min-height: 460px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid); transform-style: preserve-3d; box-shadow: var(--shadow-glow); }
.wide .project-visual { min-height: 570px; }
.project-visual::before { position: absolute; inset: 0; background: linear-gradient(130deg, rgba(255,255,255,.11), transparent 26%, transparent 72%, rgba(255,255,255,.05)); content: ""; pointer-events: none; }
.project-number { position: absolute; z-index: 8; top: 24px; left: 25px; color: rgba(255,255,255,.7); font: 600 .66rem/1 var(--font-display); letter-spacing: .1em; }
.project-open { position: absolute; z-index: 8; right: 24px; bottom: 24px; display: grid; width: 58px; height: 58px; color: #06070a; background: white; border-radius: 50%; place-items: center; font-size: 1.3rem; transition: .25s; }
.project-visual:hover .project-open { color: #06070a; background: var(--cyan); transform: rotate(45deg); }
.project-info { display: flex; justify-content: space-between; gap: 30px; padding: 23px 4px 0; }
.project-info h3 { margin: 0; font: 600 1.8rem/1.2 var(--font-display); letter-spacing: -.045em; }
.project-info p { max-width: 410px; margin: 9px 0 0; color: var(--muted); }
.tag-row { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.tag { padding: 5px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font: 600 .58rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.project-card.is-hidden { display: none; }
.project-card.is-entering { animation: card-in .45s both; }

.visual-aurora { background: radial-gradient(circle at 18% 12%, #6c4dd9, transparent 35%), radial-gradient(circle at 85% 80%, #2d93bb, transparent 32%), #13152b; }
.device { position: absolute; top: 9%; width: 220px; height: 430px; padding: 22px 17px; overflow: hidden; color: white; background: #0b0c13; border: 5px solid #292d3b; border-radius: 35px; box-shadow: 0 32px 70px rgba(0,0,0,.45); transition: transform .5s; }
.device::before { position: absolute; top: 8px; left: 50%; width: 70px; height: 9px; background: #292d3b; border-radius: 999px; content: ""; transform: translateX(-50%); }
.device-a { left: 24%; transform: rotate(-7deg); }
.device-b { right: 22%; transform: rotate(7deg) translateY(35px); }
.project-visual:hover .device-a { transform: rotate(-3deg) translateY(-9px); }
.project-visual:hover .device-b { transform: rotate(3deg) translateY(23px); }
.device-kicker { margin-top: 24px; color: #9499aa; font: 500 .54rem/1 var(--font-display); letter-spacing: .08em; }
.device-amount { display: block; margin-top: 9px; font: 600 1.5rem/1 var(--font-display); }
.device-chart { height: 100px; margin-top: 28px; background: linear-gradient(to top, rgba(50,230,210,.22), transparent), repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.05) 19px); border-bottom: 2px solid var(--cyan); clip-path: polygon(0 80%, 15% 56%, 28% 68%, 43% 25%, 56% 46%, 70% 16%, 83% 34%, 100% 0, 100% 100%, 0 100%); }
.device-pill { margin-top: 28px; padding: 11px; background: var(--gradient); border-radius: 12px; font-size: .6rem; text-align: center; }
.device-orb { width: 98px; height: 98px; margin: 45px auto 18px; background: conic-gradient(var(--cyan) 0 68%, #252838 68%); border-radius: 50%; box-shadow: 0 0 35px rgba(50,230,210,.25); }
.device-b .device-amount { text-align: center; }
.visual-talae { background: linear-gradient(140deg, #0c2032, #0d4d61 54%, #e46f64); }
.talae-orb { position: absolute; top: 50%; left: 50%; width: min(400px, 65%); aspect-ratio: 1; background: radial-gradient(circle at 35% 32%, #ffe29a, #ff745c 35%, #9f367d 62%, #1b174e 80%); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 120px rgba(255,103,96,.4); transition: .6s; }
.project-visual:hover .talae-orb { transform: translate(-50%, -50%) scale(1.08); }
.talae-word { position: absolute; z-index: 3; top: 50%; left: 50%; color: white; font: 500 clamp(3.8rem, 8vw, 8rem)/1 var(--font-display); letter-spacing: -.09em; transform: translate(-50%, -50%); }
.talae-caption { position: absolute; z-index: 3; bottom: 28px; left: 28px; color: rgba(255,255,255,.65); font: 500 .58rem/1 var(--font-display); letter-spacing: .18em; }
.visual-kind { color: #171123; background: #d7ceff; }
.kind-blob { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 44% 56% 60% 40% / 60% 40% 60% 40%; filter: blur(2px); animation: morph 9s ease-in-out infinite alternate; }
.kind-a { top: -32%; right: -20%; background: #ff98d8; }
.kind-b { bottom: -36%; left: -19%; background: #6ce7cf; animation-delay: -3s; }
.kind-copy { position: absolute; z-index: 3; top: 50%; left: 50%; width: 75%; font-size: clamp(2rem, 4.2vw, 4.8rem); font-weight: 600; line-height: 1.1; text-align: center; transform: translate(-50%, -50%); }
.visual-move { background: #b8ff5a; }
.map-grid { position: absolute; inset: 0; background: repeating-linear-gradient(42deg, transparent 0 54px, rgba(10,12,18,.13) 55px 57px), repeating-linear-gradient(-40deg, transparent 0 85px, rgba(10,12,18,.11) 86px 88px); }
.map-path { position: absolute; top: 15%; left: 16%; width: 68%; height: 68%; border: 5px solid #151722; border-color: transparent transparent #151722 #151722; border-radius: 50%; transform: rotate(-24deg); }
.move-ui { position: absolute; top: 27%; left: 50%; width: 54%; padding: 25px; color: white; background: #11131c; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; box-shadow: 16px 18px 0 rgba(17,19,28,.2); transform: translateX(-50%) rotate(3deg); }
.move-ui small { color: #a3a9b6; font: 500 .57rem/1 var(--font-display); letter-spacing: .1em; }
.move-ui strong { display: block; margin: 10px 0 22px; font-size: 1.15rem; }
.move-line { height: 5px; background: linear-gradient(90deg, var(--cyan) 70%, #343744 70%); border-radius: 999px; }

.filters { display: flex; gap: 8px; margin-bottom: 50px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.filter-button { padding: 10px 17px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.filter-button span { margin-left: 8px; font: 600 .6rem/1 var(--font-display); }
.filter-button:hover { color: var(--text); }
.filter-button.is-active { color: #050609; background: var(--cyan); }

.tech-band { overflow: hidden; color: white; background: linear-gradient(110deg, #5535e9, #2575e6 48%, #0ba6a8); }
.tech-band::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 70px 100%; content: ""; }
.service-grid { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; }
.service-intro p { max-width: 430px; color: rgba(255,255,255,.72); }
.service-list { border-top: 1px solid rgba(255,255,255,.25); }
.service { display: grid; grid-template-columns: 50px 1fr auto; gap: 20px; align-items: center; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.service > span { font: 600 .62rem/1 var(--font-display); letter-spacing: .12em; }
.service h3 { margin: 0; font: 600 1.65rem/1.2 var(--font-display); letter-spacing: -.04em; }
.service p { margin: 7px 0 0; color: rgba(255,255,255,.67); font-size: .83rem; }
.service > i { font-style: normal; font-size: 1.2rem; }

.cta-panel { position: relative; min-height: 460px; overflow: hidden; padding: 70px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-glow); isolation: isolate; }
.cta-panel::before { position: absolute; z-index: -1; top: -50%; right: -6%; width: 620px; height: 620px; background: conic-gradient(from 40deg, var(--violet), var(--blue), var(--cyan), var(--pink), var(--violet)); border-radius: 50%; filter: blur(80px); opacity: .36; content: ""; animation: spin-plain 18s linear infinite; }
.cta-panel h2 { max-width: 850px; margin: 0; font-size: clamp(3rem, 6.8vw, 7rem); font-weight: 600; letter-spacing: -.07em; line-height: .98; }
.cta-panel .button { margin-top: 44px; }
.cta-code { position: absolute; right: 45px; bottom: 35px; color: var(--muted); font: 500 .6rem/1 var(--font-display); letter-spacing: .13em; }

.page-hero { padding: 190px 0 95px; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero::after { position: absolute; z-index: -1; top: -40%; right: -10%; width: 720px; height: 720px; background: conic-gradient(from 80deg, transparent, var(--violet), var(--blue), transparent 58%); border-radius: 50%; filter: blur(90px); opacity: .18; content: ""; animation: spin-plain 26s linear infinite; }
.page-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; }
.page-hero .display-title { font-size: clamp(4.2rem, 9vw, 9.5rem); }
.page-intro { max-width: 510px; margin: 0 0 8px; color: var(--muted); font-size: 1.05rem; }
.page-meta { display: flex; gap: 24px; margin-top: 36px; color: var(--muted); font: 600 .63rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }

.about-showcase { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.profile-visual { position: relative; min-height: 680px; overflow: hidden; border: 1px solid rgba(146,161,220,.2); border-radius: clamp(34px,6vw,72px); background:radial-gradient(circle at 23% 20%,rgba(133,71,237,.46),transparent 38%),radial-gradient(circle at 78% 78%,rgba(14,220,211,.38),transparent 35%),linear-gradient(145deg,#101321 0%,#15182a 58%,#0b1019 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -80px 120px rgba(0,0,0,.18),0 45px 120px rgba(18,22,58,.24); isolation:isolate; }
.profile-visual::before { position:absolute; z-index:0; inset:-32%; background:conic-gradient(from 35deg,transparent 0 12%,rgba(139,92,246,.42) 22%,transparent 34% 54%,rgba(50,230,210,.34) 66%,transparent 78%); content:""; filter:blur(46px); opacity:.7; animation:profile-aura 18s linear infinite; }
.profile-visual::after { position:absolute; z-index:1; inset:0; background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.055) 42%,transparent 58%),radial-gradient(circle at 50% 50%,transparent 48%,rgba(255,255,255,.035) 49%,transparent 50%); background-size:100% 100%,38px 38px; content:""; pointer-events:none; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.7) 70%,transparent); mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.7) 70%,transparent); }
.profile-core { position:absolute; z-index:3; top:50%; left:50%; display:grid; width:330px; height:420px; padding:14px; color:white; background:linear-gradient(145deg,rgba(28,32,49,.92),rgba(37,49,70,.7)); border:1px solid rgba(255,255,255,.22); border-radius:46% 54% 43% 57% / 38% 44% 56% 62%; place-items:center; transform:translate(-50%,-50%) rotate(-2deg); box-shadow:0 42px 90px rgba(0,0,0,.48),0 0 60px rgba(90,80,255,.2),inset 0 1px 0 rgba(255,255,255,.16); animation:profile-float 7s ease-in-out infinite; transition:filter .35s ease; }
.profile-core::before { position:absolute; z-index:-1; inset:-12px; border:1px solid rgba(50,230,210,.24); border-radius:inherit; content:""; opacity:.65; filter:drop-shadow(0 0 16px rgba(50,230,210,.32)); }
.profile-core::after { position:absolute; z-index:4; inset:12px; background:linear-gradient(130deg,rgba(255,255,255,.15),transparent 24% 70%,rgba(50,230,210,.1)); border-radius:inherit; content:""; pointer-events:none; mix-blend-mode:screen; }
.profile-core strong { position:relative; z-index:2; font:600 6.8rem/1 var(--font-display); letter-spacing:-.1em; }
.profile-core.has-cms-logo-container { width:min(66%,380px); height:auto; aspect-ratio:.86; padding:15px; overflow:visible; background:linear-gradient(145deg,rgba(16,20,34,.9),rgba(32,42,60,.68)); border-color:rgba(255,255,255,.18); border-radius:46% 54% 43% 57% / 38% 44% 56% 62%; box-shadow:0 45px 100px rgba(0,0,0,.52),-22px -14px 70px rgba(139,92,246,.18),24px 25px 76px rgba(50,230,210,.16); }
.profile-core strong.has-cms-logo { width:100%; height:100%; overflow:hidden; background:#060912; border-radius:42% 58% 46% 54% / 38% 44% 56% 62%; box-shadow:inset 0 0 54px rgba(0,0,0,.68); }
.profile-core strong.has-cms-logo img { object-fit:cover; filter:saturate(1.08) contrast(1.05); }
.profile-ring { position:absolute; z-index:2; top:50%; left:50%; width:min(84%,520px); aspect-ratio:1; border:1px dashed rgba(255,255,255,.3); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 70px rgba(109,87,255,.1),inset 0 0 70px rgba(50,230,210,.06); animation:spin-center 28s linear infinite; }
.profile-ring::before,.profile-ring::after { position:absolute; top:50%; left:50%; border-radius:50%; content:""; transform:translate(-50%,-50%); }
.profile-ring::before { width:76%; height:112%; border:1px solid rgba(50,230,210,.16); transform:translate(-50%,-50%) rotate(58deg); }
.profile-ring::after { width:12px; height:12px; background:var(--cyan); box-shadow:0 0 0 7px rgba(50,230,210,.1),0 0 30px var(--cyan); }
.profile-chip { position:absolute; z-index:5; display:flex; gap:9px; align-items:center; padding:11px 16px; color:white; background:rgba(7,10,18,.62); border:1px solid rgba(255,255,255,.22); border-radius:999px; backdrop-filter:blur(16px); box-shadow:0 14px 34px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08); font:600 .57rem/1 var(--font-display); letter-spacing:.09em; animation:chip-drift 5.6s ease-in-out infinite; }
.profile-chip::before { width:6px; height:6px; background:var(--cyan); border-radius:50%; content:""; box-shadow:0 0 12px var(--cyan); }
.profile-chip.a { top:16%; left:7%; }.profile-chip.b { top:47%; right:3%; animation-delay:-1.8s; }.profile-chip.c { bottom:12%; left:15%; animation-delay:-3.4s; }
.profile-visual:hover .profile-core { filter:brightness(1.08) saturate(1.08); }
.profile-visual:hover .profile-ring { animation-duration:19s; }
@keyframes profile-aura { to { transform:rotate(1turn); } }
@keyframes profile-float { 0%,100% { transform:translate(-50%,-50%) rotate(-2deg); } 50% { transform:translate(-50%,calc(-50% - 12px)) rotate(1.5deg); } }
@keyframes chip-drift { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-9px,0); } }
.story-copy h2 { margin: 0 0 30px; font-size: clamp(2.5rem, 4.7vw, 5rem); line-height: 1.05; letter-spacing: -.055em; }
.story-copy p { color: var(--muted); font-size: 1.04rem; }
.story-copy .lead { color: var(--text); font-size: 1.25rem; }
.quote-panel { margin-top: 32px; padding: 24px; border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--panel); }
.quote-panel p { margin: 0; color: var(--text); }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principle { min-height: 320px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: transform .25s, border .25s; }
.principle:hover { border-color: rgba(50,230,210,.35); transform: translateY(-7px); }
.principle-number { display: flex; justify-content: space-between; color: var(--muted); font: 600 .62rem/1 var(--font-display); }
.principle-icon { display: grid; width: 55px; height: 55px; margin: 62px 0 25px; background: var(--gradient); border-radius: 17px; place-items: center; box-shadow: 0 0 35px rgba(55,130,255,.2); font-size: 1.2rem; }
.principle h3 { margin: 0; font: 600 1.5rem/1.2 var(--font-display); }
.principle p { margin: 10px 0 0; color: var(--muted); font-size: .88rem; }

.process-list { counter-reset: process; }
.process-step { display: grid; grid-template-columns: 90px .8fr 1.2fr; gap: 35px; padding: 40px 0; border-top: 1px solid var(--line); }
.process-step::before { counter-increment: process; content: "0" counter(process); color: var(--cyan); font: 600 .66rem/1.7 var(--font-display); }
.process-step h3 { margin: 0; font: 600 1.55rem/1.2 var(--font-display); }
.process-step p { margin: 0; color: var(--muted); }

.timeline { border-top: 1px solid var(--line-bright); }
.timeline-row { display: grid; grid-template-columns: .7fr 1fr 1.2fr auto; gap: 35px; padding: 38px 0; border-bottom: 1px solid var(--line); }
.timeline-row time { color: var(--cyan); font: 600 .65rem/1.7 var(--font-display); letter-spacing: .08em; }
.timeline-row h3 { margin: 0; font: 600 1.45rem/1.2 var(--font-display); }
.timeline-row h3 + p, .timeline-row > p { margin: 7px 0 0; color: var(--muted); }
.timeline-row > span { font-size: 1.2rem; }
.skill-cloud { display: flex; gap: 10px; flex-wrap: wrap; }
.skill-chip { padding: 12px 17px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font: 600 .73rem/1 var(--font-display); transition: .2s; }
.skill-chip:hover { color: #050609; background: var(--cyan); border-color: var(--cyan); transform: translateY(-3px); }
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tool { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.tool strong { display: block; font: 600 1rem/1.2 var(--font-display); }
.tool span { color: var(--muted); font-size: .72rem; }

.case-hero { padding-bottom: 0; border: 0; }
.case-cover { position: relative; min-height: 680px; margin-top: 65px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.case-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 24px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }
.case-stat { padding: 25px; background: var(--bg-2); }
.case-stat span { display: block; color: var(--muted); font: 600 .58rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.case-stat strong { display: block; margin-top: 10px; font-size: 1.05rem; }
.case-content { display: grid; grid-template-columns: .65fr 1.35fr; gap: 90px; }
.case-content h2 { margin: 0; font-size: 1.1rem; }
.case-content-main > p:first-child { margin-top: 0; color: var(--text); font-size: 1.35rem; }
.case-content-main p { color: var(--muted); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 38px; }
.result { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.result strong { display: block; color: var(--cyan); font: 600 2.2rem/1 var(--font-display); }
.result span { display: block; margin-top: 9px; color: var(--muted); font-size: .75rem; }

.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.contact-copy h2 { margin: 0; font-size: clamp(3.2rem, 6vw, 6.5rem); line-height: 1; letter-spacing: -.065em; }
.contact-copy > p { max-width: 480px; color: var(--muted); }
.contact-email { display: flex; justify-content: space-between; max-width: 480px; margin-top: 42px; padding: 14px 0; border-bottom: 1px solid var(--line-bright); font: 600 clamp(1rem, 1.8vw, 1.45rem)/1 var(--font-display); }
.social-list { display: flex; gap: 20px; margin-top: 30px; font: 600 .67rem/1 var(--font-display); letter-spacing: .07em; }
.social-list a:hover { color: var(--cyan); }
.contact-form { padding: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(20px); box-shadow: var(--shadow-glow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 22px; }
.field label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.field label span { color: var(--cyan); }
.field input, .field textarea, .field select { width: 100%; padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cyan); box-shadow: 0 1px 0 var(--cyan); }
.field textarea { resize: vertical; }
.field [aria-invalid="true"] { border-color: #ff6689; }
.field-error { display: block; min-height: 18px; margin-top: 5px; color: #ff6689; font-size: .67rem; }
.form-status { min-height: 24px; margin: 12px 0 0; color: var(--muted); font-size: .75rem; text-align: center; }
.form-status.success { color: var(--cyan); }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { display: flex; justify-content: space-between; gap: 20px; width: 100%; padding: 24px 0; text-align: left; background: transparent; border: 0; cursor: pointer; font-weight: 600; }
.faq-question span { transition: transform .2s; }
.faq-question[aria-expanded="true"] span { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; color: var(--muted); transition: grid-template-rows .25s ease; }
.faq-answer > div { overflow: hidden; }
.faq-answer p { margin: 0; padding: 0 0 24px; }
.faq-question[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }

.site-footer { position: relative; z-index: 2; padding: 38px 0; border-top: 1px solid var(--line); background: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; }
.footer-note { color: var(--muted); font-size: .7rem; text-align: center; }
.footer-links { display: flex; gap: 18px; justify-self: end; color: var(--muted); font: 600 .63rem/1 var(--font-display); letter-spacing: .06em; }
.footer-links a:hover { color: var(--text); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes pulse { 50% { opacity: .45; transform: scale(.78); } }
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes spin-plain { to { transform: rotate(360deg); } }
@keyframes spin-center { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes morph { 50% { border-radius: 61% 39% 31% 69% / 42% 61% 39% 58%; transform: rotate(16deg) scale(1.06); } }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }

@media (max-width: 980px) {
  .section { padding: 100px 0; }
  .nav-shell { grid-template-columns: 1fr auto; }
  .main-nav { position: fixed; top: 74px; right: max(18px,env(safe-area-inset-right)); left: max(18px,env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: stretch; max-width: none; max-height: calc(100svh - 96px); overflow-y: auto; padding: 18px; background: color-mix(in srgb, var(--bg) 94%, transparent); border-radius: 22px; opacity: 0; pointer-events: none; transform: translateY(-12px); transition: .22s; backdrop-filter: blur(24px); }
  .main-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .main-nav a { padding: 13px 16px; font-size: 1rem; }
  .main-nav a.is-active::after { display: none; }
  .menu-toggle { display: grid; }
  .menu-toggle[aria-expanded="true"]::before { transform: translate(-50%,0) rotate(45deg); }
  .menu-toggle[aria-expanded="true"]::after { transform: translate(-50%,0) rotate(-45deg); }
  .nav-cta { display: none; }
  .hero-badge { width: 88px; height: 88px; }
  .hero-bottom, .page-hero-grid, .about-showcase, .service-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-actions { justify-content: flex-start; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section-head { align-items: start; flex-direction: column; }
  .featured-grid { gap: 65px 22px; }
  .project-card, .project-card.wide { grid-column: span 12; }
  .project-visual, .wide .project-visual { min-height: 520px; }
  .about-showcase, .service-grid, .contact-grid { gap: 65px; }
  .principles { grid-template-columns: 1fr 1fr; }
  .principle:last-child { grid-column: 1 / -1; }
  .timeline-row { grid-template-columns: .6fr 1fr 1.2fr auto; gap: 18px; }
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .case-content { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 680px) {
  .container { width: min(1240px,calc(100% - 36px)); }
  .section { padding: 76px 0; }
  .site-header { padding: 12px 0; }
  .brand > span:last-child { display: none; }
  .cursor-glow { display: none; }
  .hero { min-height: auto; padding: 125px 0 65px; }
  .hero-topline { margin-bottom: 38px; }
  .hero-code { display: none; }
  .display-title { font-size: clamp(3.4rem, 17vw, 5.7rem); }
  .hero-title-wrap .line:nth-child(2) { padding-left: 0; }
  .hero-title-wrap .line:nth-child(3) { text-align: left; }
  .hero-badge { position: relative; top: auto; right: auto; width: 74px; height: 74px; margin: 25px 0 0 auto; }
  .hero-badge span { font-size: .5rem; }
  .hero-bottom { gap: 28px; margin-top: 32px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .scroll-indicator { display: none; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 145px; padding: 22px; }
  .metric strong { font-size: 2.15rem; }
  .metric p { margin-top: 20px; }
  .section-head { gap: 24px; margin-bottom: 40px; }
  .section-title { font-size: clamp(2.7rem, 13vw, 4.3rem); }
  .project-visual, .wide .project-visual { min-height: 350px; border-radius: 24px; }
  .project-info { align-items: flex-start; flex-direction: column; gap: 14px; }
  .tag-row { justify-content: flex-start; }
  .device { width: 145px; height: 285px; padding: 18px 10px; border-width: 3px; border-radius: 24px; }
  .device-a { left: 11%; }.device-b { right: 10%; }
  .device-chart { height: 65px; margin-top: 18px; }
  .device-orb { width: 65px; height: 65px; margin-top: 30px; }
  .talae-word { font-size: 3.9rem; }
  .service { grid-template-columns: 35px 1fr auto; }
  .cta-panel { min-height: 430px; padding: 38px 25px; }
  .cta-panel h2 { font-size: clamp(3rem, 14vw, 4.8rem); }
  .cta-code { right: 25px; }
  .page-hero { padding: 145px 0 72px; }
  .page-hero .display-title { font-size: clamp(3.7rem, 17vw, 6rem); }
  .page-hero-grid { gap: 32px; }
  .page-meta { flex-wrap: wrap; }
  .profile-visual { min-height: 520px; border-radius:32px; }
  .profile-ring { width:min(92%,380px); height:auto; }
  .profile-core { width: 240px; height: 310px; }
  .profile-core.has-cms-logo-container { width:min(68%,280px); height:auto; }
  .profile-core strong { font-size: 5rem; }
  .profile-chip { gap:6px; padding:9px 11px; font-size:.48rem; }
  .profile-chip.a { top:12%; left:4%; }.profile-chip.b { top:48%; right:2%; }.profile-chip.c { bottom:10%; left:9%; }
  .principles { grid-template-columns: 1fr; }
  .principle:last-child { grid-column: auto; }
  .principle { min-height: 270px; }
  .principle-icon { margin-top: 42px; }
  .process-step { grid-template-columns: 45px 1fr; gap: 18px; }
  .process-step p { grid-column: 2; }
  .timeline-row { grid-template-columns: 1fr auto; gap: 10px; }
  .timeline-row time, .timeline-row > div, .timeline-row > p { grid-column: 1; }
  .timeline-row > span { grid-column: 2; grid-row: 1 / 3; }
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .case-cover { min-height: 390px; margin-top: 42px; }
  .case-stats { grid-template-columns: 1fr 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; overflow: visible; }
  .filter-button { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; overflow: hidden; border-color: var(--line); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .contact-form { padding: 25px 19px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr auto; }
  .footer-note { display: none; }
}

/* Dynamic announcements, project details, and custom page builder */
.site-announcement{position:fixed;z-index:110;top:0;left:0;width:100%;min-height:52px;color:#fff;background:linear-gradient(100deg,var(--cyan),var(--blue),var(--violet),var(--pink));box-shadow:0 12px 40px rgba(0,0,0,.2)}.site-announcement.tone-info{background:#2369db}.site-announcement.tone-success{background:#168963}.site-announcement.tone-warning{color:#211400;background:#ffb94d}.site-announcement>.container{display:flex;min-height:52px;gap:18px;align-items:center}.site-announcement div>div{display:flex;gap:10px;align-items:center}.site-announcement strong{font-size:.78rem}.site-announcement span{font-size:.72rem;opacity:.88}.site-announcement a{margin-left:auto;padding:6px 10px;background:rgba(0,0,0,.18);border-radius:999px;font-size:.66rem;font-weight:700;white-space:nowrap}.site-announcement button{width:30px;height:30px;color:inherit;background:rgba(0,0,0,.14);border:0;border-radius:50%}.has-announcement .site-header{top:52px}.main-nav{max-width:min(760px,58vw);overflow-x:auto;scrollbar-width:none}.main-nav a{white-space:nowrap}.case-live-link{margin-top:28px}.dynamic-case .display-title{overflow-wrap:anywhere}.dynamic-case .case-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.dynamic-case-content .case-content-main p{font-size:1.05rem;line-height:1.9}.custom-page-hero{min-height:70svh}.custom-page-blocks{padding-bottom:100px}.custom-block{padding:34px 0}.custom-block.align-center,.custom-block .align-center{text-align:center}.custom-block.align-right,.custom-block .align-right{text-align:right}.block-heading h2{max-width:1000px;margin:0;font-size:clamp(2.5rem,7vw,6.8rem);line-height:1;letter-spacing:-.06em}.custom-prose{max-width:900px}.custom-prose p{margin:0 0 1.4em;color:var(--muted);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.9}.block-image figure{margin:0}.block-image img{width:100%;max-height:80svh;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-glow)}.block-image figcaption{margin-top:10px;color:var(--muted);font-size:.68rem}.block-quote blockquote{margin:0;padding:45px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);font-size:clamp(1.5rem,4vw,3rem);line-height:1.35}.block-quote cite{display:block;margin-top:20px;color:var(--muted);font-size:.8rem;font-style:normal}.block-cards h2{margin:0 0 28px;font-size:clamp(2rem,4vw,4rem)}.block-cards .container>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.block-cards article{min-height:190px;padding:25px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.block-cards h3{margin:0 0 12px}.block-cards p{margin:0;color:var(--muted)}.custom-divider hr{margin:45px 0;border:0;border-top:1px solid var(--line)}
@media(max-width:980px){.has-announcement .main-nav{top:126px}.main-nav{max-width:none;max-height:calc(100svh - 100px);overflow-y:auto}.block-cards .container>div{grid-template-columns:1fr 1fr}.dynamic-case .case-cover{min-height:520px}}
@media(max-width:680px){.site-announcement{min-height:74px}.site-announcement>.container{min-height:74px;gap:8px}.site-announcement div>div{display:block;min-width:0}.site-announcement strong,.site-announcement span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-announcement a{font-size:.58rem}.has-announcement .site-header{top:74px}.has-announcement .main-nav{top:132px}.has-announcement .page-hero,.has-announcement .hero{padding-top:205px}.dynamic-case .page-hero-grid{gap:25px}.dynamic-case .display-title{font-size:clamp(3rem,15vw,5.2rem)}.dynamic-case .case-cover{min-height:310px}.dynamic-case .project-number{font-size:.5rem}.dynamic-case-content .case-content-main p{font-size:1rem}.custom-page-hero{min-height:auto}.custom-page-blocks{padding-bottom:60px}.custom-block{padding:22px 0}.block-heading h2{font-size:clamp(2.3rem,12vw,4.5rem)}.block-image img{min-height:220px;border-radius:20px}.block-quote blockquote{padding:28px 22px}.block-cards .container>div{grid-template-columns:1fr}.block-cards article{min-height:150px}}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor-glow { display: none; }
}

/* Cinematic tech layer — v3 */
body {
  background-image:
    radial-gradient(circle at 50% -18%, rgba(80, 50, 210, .18), transparent 38%),
    radial-gradient(circle at 105% 38%, rgba(0, 205, 219, .07), transparent 30%),
    radial-gradient(circle at -10% 72%, rgba(240, 91, 202, .06), transparent 33%);
}
.page-shell::before {
  position: fixed; z-index: 50; inset: 0; content: ""; pointer-events: none; opacity: .05;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.16) 4px);
  mix-blend-mode: soft-light;
}
.reading-progress { position: fixed; z-index: 300; top: 0; left: 0; width: 0; height: 2px; background: var(--gradient); box-shadow: 0 0 18px var(--cyan); pointer-events: none; }
.site-header::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(50,230,210,.35), transparent); content: ""; opacity: 0; transition: .3s; }
.site-header.is-scrolled::after { opacity: 1; }
.main-nav { box-shadow: inset 0 0 22px rgba(255,255,255,.018), 0 10px 40px rgba(0,0,0,.2); }
.brand-mark { animation: brand-breathe 4s ease-in-out infinite; }

.boot-sequence { position: fixed; z-index: 9999; inset: 0; display: grid; color: white; background: #050609; place-items: center; transition: opacity .65s ease, visibility .65s ease; }
.boot-sequence.is-done { opacity: 0; visibility: hidden; }
.boot-inner { width: min(520px, calc(100% - 48px)); text-align: center; }
.boot-symbol { position: relative; display: grid; width: 92px; height: 92px; margin: 0 auto 32px; background: conic-gradient(from 90deg, var(--cyan), var(--blue), var(--violet), var(--pink), var(--cyan)); border-radius: 28px; place-items: center; box-shadow: 0 0 80px rgba(80,100,255,.4); animation: boot-float 2s ease-in-out infinite; }
.boot-symbol::before { position: absolute; inset: 2px; background: #090b11; border-radius: 26px; content: ""; }
.boot-symbol strong { position: relative; font: 700 1.25rem/1 var(--font-display); }
.boot-inner p { margin: 0 0 17px; color: rgba(255,255,255,.55); font: 600 .61rem/1 var(--font-display); letter-spacing: .22em; }
.boot-track { height: 2px; overflow: hidden; background: rgba(255,255,255,.1); }
.boot-track i { display: block; width: 100%; height: 100%; background: var(--gradient); transform: translateX(-100%); animation: boot-load 1.15s cubic-bezier(.2,.8,.2,1) forwards; }
.boot-meta { display: flex; justify-content: space-between; margin-top: 12px; color: rgba(255,255,255,.35); font: 500 .5rem/1 var(--font-display); letter-spacing: .12em; }

.hero { min-height: 108svh; isolation: isolate; background: radial-gradient(circle at 50% 42%, rgba(72,45,184,.06), transparent 38%); }
.hero > .container { position: relative; z-index: 3; }
.hero::before { border-color: rgba(145,120,255,.16); box-shadow: inset 0 0 130px rgba(104,76,255,.1), 0 0 180px rgba(36,121,255,.1); }
.hero::after { border-color: rgba(77,229,255,.18); }
.hero-title-wrap { perspective: 1000px; }
.hero-title-wrap .display-title { position: relative; z-index: 4; filter: drop-shadow(0 20px 45px rgba(0,0,0,.42)); }
.hero-title-wrap .line { position: relative; width: max-content; max-width: 100%; text-shadow: 0 1px 0 rgba(255,255,255,.1); }
.hero-title-wrap .line:nth-child(2) { margin-left: 2vw; }
.hero-title-wrap .line:nth-child(3) { width: 100%; }
.hero-title-wrap .line::after { position: absolute; top: 8%; right: -13px; width: 4px; height: 4px; background: var(--cyan); border-radius: 50%; content: ""; box-shadow: 0 0 14px var(--cyan); opacity: .8; }

.holo-stage { --rx: 0deg; --ry: 0deg; position: absolute; z-index: 1; top: 50%; left: 50%; width: min(720px, 70vw); aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .2s ease-out; opacity: .92; }
.holo-aura { position: absolute; inset: 19%; background: conic-gradient(from 35deg, rgba(50,230,210,.6), rgba(47,125,244,.18), rgba(139,92,246,.7), rgba(240,91,202,.4), rgba(50,230,210,.6)); border-radius: 50%; filter: blur(70px); opacity: .38; animation: aura-pulse 5s ease-in-out infinite; }
.holo-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; transform-style: preserve-3d; }
.ring-alpha { width: 72%; height: 72%; transform: translate(-50%,-50%) rotateX(68deg) rotateZ(15deg); animation: ring-alpha 19s linear infinite; }
.ring-beta { width: 52%; height: 52%; border-style: dashed; border-color: rgba(50,230,210,.32); transform: translate(-50%,-50%) rotateY(66deg) rotateZ(-24deg); animation: ring-beta 13s linear infinite reverse; }
.holo-ring i { position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; box-shadow: 0 0 20px 5px var(--cyan); }
.holo-ring i:nth-child(1) { top: 8%; left: 26%; }.holo-ring i:nth-child(2) { top: 55%; right: -4px; background: var(--pink); box-shadow: 0 0 20px 5px var(--pink); }.holo-ring i:nth-child(3) { bottom: 8%; left: 22%; background: var(--violet); box-shadow: 0 0 20px 5px var(--violet); }.holo-ring i:nth-child(4) { top: 43%; left: -4px; }
.holo-core { position: absolute; top: 50%; left: 50%; display: grid; width: 30%; aspect-ratio: 1; color: rgba(255,255,255,.85); background: radial-gradient(circle at 34% 28%, #d7ffff, #56bfff 13%, #7656f4 40%, #221044 68%, #080910 72%); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; place-items: center; transform: translate(-50%,-50%) translateZ(80px); box-shadow: inset -20px -24px 55px rgba(0,0,0,.65), inset 18px 15px 32px rgba(255,255,255,.25), 0 0 80px rgba(72,130,255,.4), 0 0 180px rgba(139,92,246,.2); animation: core-float 6s ease-in-out infinite; }
.holo-core::before { position: absolute; inset: -19%; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; content: ""; box-shadow: inset 0 0 32px rgba(50,230,210,.12); }
.holo-core span { position: absolute; top: 13%; left: 23%; width: 34%; height: 16%; background: rgba(255,255,255,.55); border-radius: 50%; filter: blur(10px); transform: rotate(-28deg); }
.holo-core b { font: 700 clamp(1rem, 2.4vw, 2.2rem)/1 var(--font-display); letter-spacing: -.06em; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.holo-axis { position: absolute; top: 50%; left: 50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transform: translate(-50%,-50%); }
.axis-x { width: 96%; height: 1px; }.axis-y { width: 1px; height: 96%; background: linear-gradient(transparent, rgba(255,255,255,.15), transparent); }
.holo-label { position: absolute; padding: 6px 9px; color: rgba(255,255,255,.5); background: rgba(7,8,14,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; backdrop-filter: blur(10px); font: 500 .48rem/1 var(--font-display); letter-spacing: .13em; }
.label-a { top: 19%; right: 6%; }.label-b { bottom: 15%; left: 9%; }.label-c { top: 42%; left: 0; }

.hero-badge { z-index: 8; background: conic-gradient(from 90deg, var(--cyan), #7df8e8, var(--cyan)); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 0 10px rgba(50,230,210,.05), 0 0 90px rgba(50,230,210,.3); animation: badge-hover 4s ease-in-out infinite; }
.button-primary { position: relative; overflow: hidden; background: linear-gradient(110deg, #71fff0, var(--cyan) 50%, #86e7ff); box-shadow: 0 16px 45px rgba(50,230,210,.2), inset 0 1px 0 rgba(255,255,255,.75); }
.button-primary::before { position: absolute; top: -50%; left: -40%; width: 24%; height: 200%; background: rgba(255,255,255,.65); content: ""; filter: blur(10px); transform: rotate(20deg); transition: left .6s ease; }
.button-primary:hover::before { left: 120%; }

.manifesto-section { position: relative; overflow: hidden; padding: 150px 0; background: #030407; border-block: 1px solid rgba(255,255,255,.08); isolation: isolate; }
.manifesto-section::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 78% 45%, rgba(139,92,246,.18), transparent 28%), linear-gradient(115deg, transparent 45%, rgba(50,230,210,.035)); content: ""; }
.manifesto-grid { position: relative; }
.manifesto-title { margin: 0; font-size: clamp(3.8rem, 8.4vw, 9.4rem); font-weight: 600; letter-spacing: -.075em; line-height: .9; }
.manifesto-title > span { display: block; }
.manifesto-title > span:nth-child(2) { padding-left: 8vw; }
.manifesto-title > span:nth-child(3) { text-align: right; }
.manifesto-title .gradient-text { margin-left: .18em; }
.outline-text { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); text-shadow: 0 0 45px rgba(111,90,255,.12); }
.manifesto-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-top: 65px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); }
.manifesto-foot span { color: rgba(255,255,255,.48); font: 600 .62rem/1 var(--font-display); letter-spacing: .18em; }
.manifesto-foot p { max-width: 580px; margin: 0; color: rgba(255,255,255,.58); }
.manifesto-orbit { position: absolute; top: 50%; right: -180px; display: grid; width: 490px; height: 490px; border: 1px dashed rgba(50,230,210,.16); border-radius: 50%; place-items: center; transform: translateY(-50%); animation: spin-plain 24s linear infinite; }
.manifesto-orbit::before,.manifesto-orbit::after { position: absolute; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; content: ""; }.manifesto-orbit::before { inset: 16%; }.manifesto-orbit::after { inset: 32%; }
.manifesto-orbit span { color: var(--cyan); text-shadow: 0 0 24px var(--cyan); }

.project-visual { transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.project-visual::after { position: absolute; z-index: 7; inset: 0; border: 1px solid transparent; border-radius: inherit; background: linear-gradient(135deg, rgba(50,230,210,.5), transparent 26%, transparent 68%, rgba(240,91,202,.4)) border-box; content: ""; opacity: 0; mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; transition: opacity .35s; }
.project-visual:hover { border-color: rgba(255,255,255,.22); box-shadow: 0 35px 110px rgba(62,67,255,.24), 0 0 0 1px rgba(255,255,255,.05); }
.project-visual:hover::after { opacity: 1; }

.lab-section { overflow: hidden; }
.lab-section::before { position: absolute; top: 5%; left: 50%; width: 900px; height: 900px; background: radial-gradient(circle, rgba(47,125,244,.09), transparent 65%); content: ""; transform: translateX(-50%); pointer-events: none; }
.lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lab-card { position: relative; overflow: hidden; min-height: 520px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transform-style: preserve-3d; transition: border-color .3s, box-shadow .3s, transform .3s; }
.lab-card:hover { border-color: rgba(50,230,210,.32); box-shadow: 0 28px 90px rgba(47,72,180,.18); }
.lab-card > div:last-child { padding: 25px; }
.lab-card > div:last-child > span { color: var(--cyan); font: 600 .56rem/1 var(--font-display); letter-spacing: .13em; }
.lab-card h3 { margin: 10px 0 7px; font: 600 1.55rem/1.2 var(--font-display); letter-spacing: -.045em; }
.lab-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.lab-visual { position: relative; height: 330px; overflow: hidden; background: #0d1019; border-bottom: 1px solid var(--line); }
.lab-visual small { position: absolute; z-index: 5; top: 18px; left: 18px; color: rgba(255,255,255,.45); font: 500 .48rem/1 var(--font-display); letter-spacing: .14em; }
.lab-card-a .lab-visual { background: radial-gradient(circle at 50% 52%, #3631a8, #111427 44%, #090b11 73%); }
.lab-sphere { position: absolute; top: 50%; left: 50%; width: 175px; height: 175px; background: conic-gradient(from 130deg, #32e6d2, #2f7df4, #8b5cf6, #ff71cf, #32e6d2); border-radius: 50%; filter: saturate(1.25); transform: translate(-50%,-50%); box-shadow: inset -24px -20px 48px rgba(0,0,0,.62), inset 20px 15px 28px rgba(255,255,255,.18), 0 0 70px rgba(78,75,255,.4); animation: core-float 5s ease-in-out infinite; }
.lab-sphere::after { position: absolute; top: 15%; left: 22%; width: 34%; height: 16%; background: rgba(255,255,255,.48); border-radius: 50%; filter: blur(8px); content: ""; transform: rotate(-30deg); }
.lab-scan { position: absolute; top: 50%; left: 50%; width: 270px; height: 270px; border: 1px solid rgba(50,230,210,.18); border-radius: 50%; transform: translate(-50%,-50%); animation: lab-pulse 3s ease-out infinite; }
.lab-card-b .lab-visual { background: linear-gradient(145deg,#f05bca,#764bf2 55%,#245ee8); }
.type-wave { position: absolute; top: 50%; left: 50%; color: white; font: 600 9rem/.8 var(--font-display); letter-spacing: -.14em; transform: translate(-50%,-50%) rotate(-8deg); text-shadow: 10px 12px 0 rgba(0,0,0,.12); animation: type-drift 5s ease-in-out infinite; }
.wave-line { position: absolute; right: -10%; bottom: 22%; left: -10%; height: 32px; border-top: 1px solid rgba(255,255,255,.5); border-radius: 50%; transform: rotate(-8deg); }
.lab-card-c .lab-visual { background: radial-gradient(circle at 50% 50%,#183c51,#0d1824 45%,#080a10); }
.ai-node { position: absolute; width: 72px; height: 72px; background: radial-gradient(circle at 35% 30%,white,var(--cyan) 8%,#176d8d 36%,#0c1a26 68%); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 35px rgba(50,230,210,.32); animation: node-hover 4s ease-in-out infinite; }
.ai-node.n1 { top: 29%; left: 19%; }.ai-node.n2 { top: 43%; right: 16%; animation-delay:-1.2s }.ai-node.n3 { bottom: 14%; left: 42%; width: 48px; height: 48px; animation-delay:-2.1s }
.ai-link { position: absolute; height: 1px; background: linear-gradient(90deg,var(--cyan),transparent); transform-origin:left; }.ai-link.l1 { top: 41%; left: 34%; width: 42%; transform: rotate(14deg); }.ai-link.l2 { top: 55%; left: 31%; width: 32%; transform: rotate(50deg); }

@keyframes brand-breathe { 50% { box-shadow: 0 0 45px rgba(79,123,255,.55); transform: translateY(-1px); } }
@keyframes boot-load { to { transform: translateX(0); } }
@keyframes boot-float { 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes aura-pulse { 50% { opacity: .6; transform: scale(1.13); } }
@keyframes ring-alpha { to { transform: translate(-50%,-50%) rotateX(68deg) rotateZ(375deg); } }
@keyframes ring-beta { to { transform: translate(-50%,-50%) rotateY(66deg) rotateZ(336deg); } }
@keyframes core-float { 50% { transform: translate(-50%,-54%) translateZ(90px) rotate(3deg); } }
@keyframes badge-hover { 50% { transform: translateY(-8px) rotate(12deg); } }
@keyframes lab-pulse { from { opacity:.7; transform:translate(-50%,-50%) scale(.65) } to { opacity:0; transform:translate(-50%,-50%) scale(1.35) } }
@keyframes type-drift { 50% { transform:translate(-50%,-54%) rotate(-3deg) scale(1.04); } }
@keyframes node-hover { 50% { transform:translateY(-12px) scale(1.07); } }

@media (max-width: 980px) {
  .holo-stage { top: 48%; width: min(650px, 88vw); opacity: .74; }
  .manifesto-foot { grid-template-columns: 1fr; }
  .lab-grid { grid-template-columns: 1fr 1fr; }
  .lab-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .hero { min-height: 100svh; }
  .holo-stage { top: 42%; width: 112vw; opacity: .55; }
  .holo-label { display: none; }
  .hero-title-wrap .line::after { display: none; }
  .manifesto-section { padding: 95px 0; }
  .manifesto-title { font-size: clamp(3rem, 15vw, 5.4rem); }
  .manifesto-title > span:nth-child(2) { padding-left: 0; }
  .manifesto-title > span:nth-child(3) { text-align: left; }
  .manifesto-title .gradient-text { display: block; margin: 0; }
  .manifesto-orbit { right: -300px; opacity: .65; }
  .lab-grid { grid-template-columns: 1fr; }
  .lab-card,.lab-card:last-child { grid-column: auto; min-height: 470px; }
  .lab-visual { height: 290px; }
}

.project-info h3 a { color: inherit; }
.project-detail-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; color: var(--text); font-weight: 700; }
.project-detail-link span { color: var(--cyan); transition: transform .25s ease; }
.project-detail-link:hover span { transform: translate(4px, -4px); }

/* Rich portfolio media and corrected proportions */
.project-info { align-items: flex-start; }
.tag-row { align-self: flex-start; align-content: flex-start; align-items: flex-start; }
.tag { display: inline-flex; min-height: 28px; align-items: center; white-space: nowrap; }
.project-image-stage { position: absolute; z-index: 1; inset: 0; display: grid; overflow: hidden; place-items: center; background: #080a10; }
.project-type-badge { position: absolute; z-index: 9; bottom: 25px; left: 25px; display: inline-flex; min-height: 32px; padding: 7px 13px; align-items: center; color: #050609; background: rgba(50,230,210,.94); border: 1px solid rgba(255,255,255,.48); border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,.25); font: 700 .62rem/1 var(--font-display); letter-spacing: .06em; }
.tag-type { color: var(--cyan); border-color: color-mix(in srgb,var(--cyan) 42%,transparent); background: color-mix(in srgb,var(--cyan) 9%,transparent); }
.project-image-stage::after { position: absolute; z-index: 1; inset: 0; background: rgba(5,7,12,.12); content: ""; }
.project-image-blur { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(32px) saturate(1.15); opacity: .68; transform: scale(1.08); }
.project-image-main { position: relative; z-index: 2; display: block; width: 100%; height: 100%; padding: clamp(8px,1.6vw,22px); object-fit: contain; filter: drop-shadow(0 18px 35px rgba(0,0,0,.25)); }
.content-media-frame { position: relative; display: grid; width: 100%; min-height: clamp(300px,62vw,780px); overflow: hidden; background: #080a10; border: 1px solid var(--line); border-radius: var(--radius-lg); place-items: center; box-shadow: var(--shadow-glow); }
.content-media-frame::after { position: absolute; z-index: 1; inset: 0; background: rgba(5,7,12,.12); content: ""; }
.content-media-blur { position: absolute; inset: -7%; width: 114%; height: 114%; object-fit: cover; filter: blur(38px) saturate(1.15); opacity: .72; transform: scale(1.08); }
.content-media-main { position: relative; z-index: 2; display: block; width: 100%; height: 100%; max-height: 80svh; padding: clamp(10px,2vw,24px); object-fit: contain; }
.block-image img { border: 0; border-radius: 0; box-shadow: none; }
.block-gallery h2,.block-video h2 { margin: 0; font-size: clamp(2rem,4vw,4rem); }
.gallery-heading { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px; }
.gallery-heading p { margin:0 0 8px;color:var(--muted);font:600 .6rem/1 var(--font-display);letter-spacing:.14em;white-space:nowrap; }
.gallery-shell { position:relative; }
.content-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.gallery-item { position:relative; min-width: 0; padding: 0; overflow: hidden; color: inherit; background: transparent; border: 0; border-radius: var(--radius); cursor:zoom-in; scroll-snap-align:center; }
.gallery-item .content-media-frame { min-height: 360px; height: 100%; border-radius: var(--radius); transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s; }
.gallery-item .content-media-main { max-height: 620px; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.gallery-item:hover .content-media-frame { border-color:rgba(50,230,210,.38);box-shadow:0 30px 90px rgba(47,75,220,.2);transform:translateY(-4px); }
.gallery-item:hover .content-media-main { transform:scale(1.025); }
.gallery-zoom-hint { position:absolute; z-index:4; right:18px; bottom:18px; display:flex; gap:9px; align-items:center; padding:9px 13px; color:white; background:rgba(5,7,12,.68); border:1px solid rgba(255,255,255,.18); border-radius:999px; backdrop-filter:blur(14px); font:600 .58rem/1 var(--font-display); letter-spacing:.08em; opacity:0; transform:translateY(8px); transition:.25s; }
.gallery-zoom-hint i { color:var(--cyan);font-style:normal; }
.gallery-item:hover .gallery-zoom-hint,.gallery-item:focus-visible .gallery-zoom-hint { opacity:1;transform:none; }
.gallery-item:focus-visible { outline:2px solid var(--cyan);outline-offset:5px; }
.gallery-layout-mosaic .content-gallery { grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:150px; }
.gallery-layout-mosaic .gallery-item { grid-column:span 5;grid-row:span 2; }
.gallery-layout-mosaic .gallery-item:nth-child(4n+1),.gallery-layout-mosaic .gallery-item:nth-child(4n+4) { grid-column:span 7;grid-row:span 3; }
.gallery-layout-mosaic .gallery-item .content-media-frame { min-height:0; }
.gallery-layout-mosaic .gallery-item .content-media-main { max-height:none; }
.gallery-layout-slider .content-gallery,.gallery-layout-filmstrip .content-gallery { grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;padding:8px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--cyan) transparent;overscroll-behavior-inline:contain; }
.gallery-layout-slider .content-gallery { grid-auto-columns:min(84%,920px); }
.gallery-layout-filmstrip .content-gallery { grid-auto-columns:min(38%,430px); }
.gallery-layout-slider .gallery-item .content-media-frame { min-height:clamp(420px,58vw,720px); }
.gallery-layout-filmstrip .gallery-item .content-media-frame { min-height:360px; }
.gallery-scroll { position:absolute; z-index:8; top:50%; display:none; width:52px;height:52px;color:#050609;background:var(--cyan);border:0;border-radius:50%;cursor:pointer;place-items:center;box-shadow:0 18px 42px rgba(0,0,0,.3);transform:translateY(-50%);transition:transform .2s,box-shadow .2s; }
.gallery-scroll:hover { transform:translateY(-50%) scale(1.07);box-shadow:0 20px 54px rgba(50,230,210,.24); }
.gallery-scroll-prev { left:-24px; }.gallery-scroll-next { right:-24px; }
.gallery-layout-slider .gallery-scroll,.gallery-layout-filmstrip .gallery-scroll { display:grid; }
.lightbox-open { overflow:hidden; }
.gallery-lightbox { width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;color:white;background:rgba(3,5,10,.9);border:0;backdrop-filter:blur(24px); }
.gallery-lightbox::backdrop { background:rgba(3,5,10,.82);backdrop-filter:blur(18px); }
.lightbox-panel { display:grid;width:100%;height:100%;padding:clamp(18px,3vw,42px);grid-template-rows:auto minmax(0,1fr) auto; }
.lightbox-toolbar { display:flex;justify-content:space-between;align-items:center; }
.lightbox-counter { margin:0;color:rgba(255,255,255,.68);font:600 .68rem/1 var(--font-display);letter-spacing:.16em; }
.lightbox-close { width:48px;height:48px;color:white;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:50%;cursor:pointer;font-size:1.5rem; }
.lightbox-stage { display:grid;min-height:0;grid-template-columns:64px minmax(0,1fr) 64px;gap:clamp(10px,2vw,28px);align-items:center;touch-action:pan-y; }
.lightbox-stage img { width:100%;height:100%;max-height:calc(100dvh - 150px);object-fit:contain;filter:drop-shadow(0 30px 70px rgba(0,0,0,.55)); }
.lightbox-nav { display:grid;width:58px;height:58px;color:white;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);border-radius:50%;cursor:pointer;place-items:center;font-size:1.15rem;transition:.2s; }
.lightbox-nav:hover,.lightbox-close:hover { color:#050609;background:var(--cyan);border-color:var(--cyan); }
.lightbox-caption { max-width:820px;margin:10px auto 0;color:rgba(255,255,255,.68);font-size:.78rem;text-align:center; }
.video-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; background: #030407; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-glow); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.project-rich-content { padding: 15px 0 80px; }
.project-rich-content .custom-block { padding-block: clamp(32px,6vw,86px); }
.dynamic-case .case-cover .project-image-main { padding: clamp(12px,2.4vw,34px); }
.dynamic-case { position: relative; isolation: isolate; }
.dynamic-case > .container { position: relative; z-index: 2; }
.dynamic-case .display-title { font-size: min(var(--case-title-size,112px),12vw); line-height: .9; }
.case-hero-backdrop { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.case-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(1.12); opacity: .5; transform: scale(1.035); }
.case-hero-backdrop::after { position: absolute; inset: 0; background: linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 42%,transparent 85%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 24%,transparent) 0%,color-mix(in srgb,var(--bg) 46%,transparent) 52%,var(--bg) 100%); content: ""; }
.dynamic-case.has-cover-background::after { opacity: .08; }
.cms-page-hero { --page-safe-gutter:clamp(40px,6vw,96px); position: relative; display: flex; min-height: var(--page-hero-height,760px); align-items: center; isolation: isolate; }
.cms-page-hero::before { position:absolute; z-index:1; inset:0; background:radial-gradient(circle at 18% 28%,rgba(50,230,210,.16),transparent 31%),radial-gradient(circle at 82% 22%,rgba(139,92,246,.2),transparent 35%),linear-gradient(rgba(120,136,180,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(120,136,180,.11) 1px,transparent 1px); background-size:auto,auto,72px 72px,72px 72px; content:""; pointer-events:none; opacity:.48; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.9) 58%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.9) 58%,transparent 100%); }
.cms-page-hero::after { z-index:1; pointer-events:none; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 62%,transparent 100%); }
.cms-page-hero.has-cover-background { border-bottom-color:transparent; }
.cms-page-hero[data-hero-vertical="top"] { align-items:flex-start; }
.cms-page-hero[data-hero-vertical="bottom"] { align-items:flex-end; }
.cms-page-hero > .container { position: relative; z-index: 2; width:min(var(--page-content-width,1240px),calc(100% - var(--page-safe-gutter) - var(--page-safe-gutter))); margin-inline:auto; transform:translate(clamp(-200px,var(--page-offset-x,0px),200px),clamp(-180px,var(--page-offset-y,0px),180px)); }
.cms-page-hero .page-hero-grid { grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:clamp(40px,6vw,90px); }
.cms-page-hero .page-hero-grid > * { min-width:0; }
.cms-page-hero .display-title { max-inline-size:var(--page-title-width,11ch); overflow-wrap:anywhere; font-size:min(var(--page-title-size,144px),8.5vw); line-height:1.04; letter-spacing:-.045em; text-wrap:balance; }
.cms-page-hero .page-intro { max-width:var(--page-intro-width,650px); }
.cms-page-hero .eyebrow { width:fit-content; max-width:100%; margin-bottom:clamp(20px,2.2vw,30px); }
.cms-page-hero.layout-split-reverse,.cms-page-hero.layout-right { --page-hero-scrim-direction:270deg; }
.cms-page-hero.layout-center { --page-hero-scrim-direction:180deg; }
.page-hero-backdrop { position: absolute; z-index: 0; inset: 0 0 -2px; overflow: hidden; pointer-events: none; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.96) 64%,rgba(0,0,0,.74) 78%,rgba(0,0,0,.28) 92%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.96) 64%,rgba(0,0,0,.74) 78%,rgba(0,0,0,.28) 92%,transparent 100%); }
.page-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position:var(--page-hero-x,50%) var(--page-hero-y,50%); filter: blur(var(--page-hero-blur,4px)) saturate(1.16) contrast(1.03); opacity: 1; transform:scale(var(--page-hero-zoom,1.04)); }
.page-hero-backdrop::after { position: absolute; inset: 0; background:linear-gradient(var(--page-hero-scrim-direction,90deg),rgba(6,7,10,var(--page-hero-overlay,.68)),rgba(6,7,10,.18) 78%); content: ""; }
[data-theme="light"] .page-hero-backdrop::after { background:linear-gradient(var(--page-hero-scrim-direction,90deg),rgba(6,7,10,var(--page-hero-overlay,.68)),rgba(6,7,10,.12) 78%); }
[data-theme="light"] .cms-page-hero::before { opacity:.2; mix-blend-mode:multiply; }
[data-theme="light"] .cms-page-hero::after { opacity:.11; mix-blend-mode:multiply; }
.cms-page-hero.layout-split-reverse .page-hero-grid { grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr); }
.cms-page-hero.layout-split-reverse .page-hero-grid > :first-child { order:2; }
.cms-page-hero.layout-split-reverse .page-hero-grid > :last-child { order:1; }
.cms-page-hero.layout-left .page-hero-grid,.cms-page-hero.layout-center .page-hero-grid,.cms-page-hero.layout-right .page-hero-grid { grid-template-columns:1fr; align-items:center; }
.cms-page-hero.layout-left .page-hero-grid,.cms-page-hero.layout-center .page-hero-grid,.cms-page-hero.layout-right .page-hero-grid { margin-inline:auto; }
.cms-page-hero.layout-center .page-hero-grid { text-align:center; }
.cms-page-hero.layout-center .display-title { margin-inline:auto; }
.cms-page-hero.layout-center .page-intro { margin-inline:auto; }
.cms-page-hero.layout-center .page-meta { justify-content:center; }
.cms-page-hero.layout-center .eyebrow { justify-content:center; margin-inline:auto; text-align:center; }
.cms-page-hero.layout-right .page-hero-grid { text-align:right; }
.cms-page-hero.layout-right .display-title,.cms-page-hero.layout-right .page-intro { margin-left:auto; }
.cms-page-hero.layout-right .page-meta { justify-content:flex-end; }
.cms-page-hero.layout-right .eyebrow { justify-content:flex-end; margin-left:auto; text-align:right; }
body[data-page="projects"] .cms-page-hero + .section { padding-top:clamp(32px,3vw,48px); }
body[data-page="projects"] .filters { margin-bottom:clamp(32px,4vw,50px); }
@media (max-width: 1180px) {
  .cms-page-hero > .container { transform:translate(clamp(-24px,var(--page-offset-x,0px),24px),clamp(-180px,var(--page-offset-y,0px),180px)); }
}
@media (max-width: 980px) {
  .cms-page-hero { --page-safe-gutter:clamp(34px,5.5vw,54px); }
  .cms-page-hero .page-hero-grid { grid-template-columns:1fr; gap:30px; }
  .cms-page-hero.layout-split-reverse .page-hero-grid > :first-child,.cms-page-hero.layout-split-reverse .page-hero-grid > :last-child { order:initial; }
  .cms-page-hero .display-title { font-size:min(var(--page-title-size,144px),11vw); }
}
@media (max-width: 680px) {
  .project-info { gap: 18px; flex-direction: column; }
  .tag-row { justify-content: flex-start; }
  .project-image-main { padding: 8px; }
  .content-media-frame { min-height: 250px; border-radius: 20px; }
  .content-media-main { padding: 8px; }
  .content-gallery { grid-template-columns: 1fr; gap: 12px; }
  .gallery-item .content-media-frame { min-height: 260px; }
  .gallery-heading { align-items:flex-start;flex-direction:column;gap:8px; }
  .gallery-heading p { white-space:normal; }
  .gallery-layout-mosaic .content-gallery { grid-template-columns:1fr;grid-auto-rows:auto; }
  .gallery-layout-mosaic .gallery-item,.gallery-layout-mosaic .gallery-item:nth-child(4n+1),.gallery-layout-mosaic .gallery-item:nth-child(4n+4) { grid-column:auto;grid-row:auto; }
  .gallery-layout-mosaic .gallery-item .content-media-frame { min-height:300px; }
  .gallery-layout-slider .content-gallery,.gallery-layout-filmstrip .content-gallery { grid-template-columns:none;gap:12px; }
  .gallery-layout-slider .content-gallery { grid-auto-columns:92%; }
  .gallery-layout-filmstrip .content-gallery { grid-auto-columns:74%; }
  .gallery-layout-slider .gallery-item .content-media-frame,.gallery-layout-filmstrip .gallery-item .content-media-frame { min-height:320px; }
  .gallery-scroll { top:auto;bottom:-14px;width:46px;height:46px;transform:none; }
  .gallery-scroll:hover { transform:scale(1.05); }
  .gallery-scroll-prev { left:14px; }.gallery-scroll-next { right:14px; }
  .gallery-zoom-hint { right:12px;bottom:12px;opacity:1;transform:none; }
  .lightbox-panel { padding:14px; }
  .lightbox-stage { grid-template-columns:44px minmax(0,1fr) 44px;gap:7px; }
  .lightbox-nav { width:42px;height:42px; }
  .lightbox-close { width:44px;height:44px; }
  .lightbox-stage img { max-height:calc(100dvh - 150px); }
  .video-frame { border-radius: 20px; }
  .project-rich-content { padding-bottom: 35px; }
  .project-type-badge { bottom: 16px; left: 16px; min-height: 28px; padding: 6px 10px; font-size: .56rem; }
  .dynamic-case .display-title { font-size: min(var(--case-title-size,112px),15vw); }
  .case-hero-backdrop img { opacity: .42; }
  .cms-page-hero { min-height:min(var(--page-hero-height,760px),720px); padding-top:118px; padding-bottom:58px; }
  .cms-page-hero > .container { width:min(var(--page-content-width,1240px),calc(100% - 36px)); transform:none; }
  .cms-page-hero .page-hero-grid { gap:28px; }
  .cms-page-hero .display-title { max-inline-size:100%; font-size:min(var(--page-title-size,144px),13vw); line-height:1.08; letter-spacing:-.025em; }
  .cms-page-hero .page-intro { max-width:100%; font-size:.98rem; }
  .cms-page-hero .page-meta { gap:12px 18px; margin-top:24px; }
  body[data-page="projects"] .cms-page-hero + .section { padding-top:28px; }
  body[data-page="projects"] .filters { margin-bottom:34px; padding-bottom:20px; }
}

@media (max-width: 420px) {
  .nav-actions { gap:7px; }
  .icon-button { width:40px; height:40px; }
  .cms-page-hero > .container,.container { width:calc(100% - 30px); }
  .cms-page-hero .display-title { font-size:min(var(--page-title-size,144px),13.5vw); }
  .cms-page-hero .page-meta { font-size:.57rem; }
  .filter-button { min-height:46px; padding-inline:8px; font-size:.88rem; }
  .filter-button span { margin-left:5px; }
}