:root {
  color-scheme: dark;
  --bg: #08070c;
  --bg-soft: #0c0a11;
  --panel: #111019;
  --panel-raised: #171520;
  --panel-light: #1c1926;
  --border: rgba(190, 165, 255, .16);
  --border-strong: rgba(185, 139, 255, .42);
  --text: #f7f5fb;
  --muted: #a7a1b3;
  --quiet: #716b7e;
  --purple: #ad71ff;
  --purple-light: #d0a8ff;
  --purple-deep: #6933c5;
  --pink: #eb82cf;
  --green: #7ee0b5;
  --red: #ff7c98;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse 75% 42% at 50% -14%, rgba(100, 50, 164, .15), transparent 68%), var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; }
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: .18; background-image: radial-gradient(rgba(255,255,255,.22) .55px, transparent .7px); background-size: 19px 19px; mask-image: linear-gradient(to bottom, black, transparent 70%); }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--purple-light); }
::selection { background: rgba(170, 113, 255, .4); color: #fff; }
.wrap { width: min(1216px, calc(100% - 56px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; transform: translateY(-150%); background: #201630; border: 1px solid var(--border-strong); border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 4px; }

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(8,7,12,.84); backdrop-filter: blur(16px); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-logo { display: block; width: 64px; height: 64px; object-fit: contain; }
.brand-mark { width: 39px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: transparent; background: linear-gradient(150deg, #e5c2ff 8%, #ab66ff 50%, #7840d4 90%); -webkit-background-clip: text; background-clip: text; font-size: 43px; font-weight: 900; line-height: .9; filter: drop-shadow(0 0 16px rgba(166,103,255,.45)); }
.brand-copy { display: grid; line-height: 1.12; }
.brand-copy strong { letter-spacing: .13em; font-size: 13px; font-weight: 800; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 36px); }
.main-nav > a:not(.button) { color: #beb9c7; font-size: 13px; transition: color .2s ease; }
.main-nav > a:not(.button):hover, .main-nav > a.is-active { color: #fff; }
.main-nav > a.is-active:not(.button)::after { width: 6px; height: 6px; margin-left: 6px; display: inline-block; vertical-align: 2px; border-radius: 50%; content: ""; background: var(--purple); box-shadow: 0 0 10px var(--purple); }
.nav-favorites span { color: var(--purple-light); font-size: 17px; vertical-align: -1px; }
.menu-toggle { display: none; }

.button { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; font-weight: 700; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); color: #fff; }
.button:active { transform: translateY(0); }
.button-small { min-height: 38px; padding: 0 14px; font-size: 12px; }
.button-primary { color: #fff; background: linear-gradient(118deg, #a75bfa, #7740d8); box-shadow: 0 8px 26px rgba(132,65,226,.2), inset 0 1px rgba(255,255,255,.22); }
.button-primary:hover { background: linear-gradient(118deg, #ba7aff, #874fe5); box-shadow: 0 10px 30px rgba(150,86,243,.32); }
.button-quiet { color: #eee9f8; border-color: rgba(203,180,255,.24); background: rgba(255,255,255,.035); }
.button-quiet:hover { border-color: var(--border-strong); background: rgba(173,113,255,.1); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.button-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.text-link { color: #ded5f1; font-size: 13px; font-weight: 700; }
.text-link span { margin-left: 5px; color: var(--purple-light); }
.text-link:hover { color: #fff; }
.subtle-link { color: var(--muted); font-weight: 500; }

.flash { width: min(1216px, calc(100% - 56px)); margin: 16px auto 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: #15111d; font-size: 13px; }
.flash-success { color: var(--green); border-color: rgba(126,224,181,.28); background: rgba(34,110,77,.14); }
.flash-error { color: #ffdce3; border-color: rgba(255,124,152,.3); background: rgba(125,39,60,.2); }

.hero-section { min-height: 622px; padding-top: 70px; padding-bottom: 62px; display: grid; grid-template-columns: minmax(0,.94fr) minmax(450px,1.06fr); align-items: center; gap: 46px; }
.hero-copy { position: relative; z-index: 1; padding: 22px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #b9a5dc; font-family: "Consolas", "Courier New", monospace; font-size: 10px; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; }
.eyebrow-dot, .caption-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--purple-light); box-shadow: 0 0 10px rgba(186,123,255,.8); }
.eyebrow-line { width: 34px; height: 1px; background: rgba(208,168,255,.45); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
.hero-copy h1 { max-width: 650px; margin: 24px 0 18px; font-size: clamp(52px, 6.4vw, 78px); font-weight: 800; letter-spacing: -.075em; line-height: .99; }
.hero-copy h1 span, .services-hero h1 span, .services-teaser h2 span { color: var(--purple-light); text-shadow: 0 0 36px rgba(165,101,255,.36); }
.hero-lede { max-width: 510px; margin-bottom: 26px; color: #b8b2c2; font-size: 16px; line-height: 1.75; }
.hero-search { max-width: 506px; height: 58px; padding: 5px 6px 5px 19px; display: flex; align-items: center; border: 1px solid rgba(200,169,255,.28); border-radius: 12px; background: rgba(18,15,25,.86); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 10px 35px rgba(0,0,0,.2); }
.hero-search:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(173,113,255,.12); }
.hero-search input, .search-field input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.hero-search input::placeholder, .search-field input::placeholder { color: #817a8c; }
.hero-search button { width: 44px; height: 44px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(140deg,#b273ff,#743dd2); font-size: 26px; line-height: 1; transition: filter .18s ease; }
.hero-search button:hover { filter: brightness(1.18); }
.hero-tags { margin: 15px 0 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 31px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(203,183,231,.14); border-radius: 999px; color: #d1ccda; background: rgba(25,22,32,.78); font-size: 11px; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.chip:hover, .chip.is-selected { border-color: rgba(179,119,255,.58); color: #fff; background: rgba(128,71,192,.2); }
.chip span { color: #9784b2; font-size: 10px; }

.hero-art-panel { position: relative; min-height: 462px; overflow: hidden; border: 1px solid rgba(183,137,246,.25); border-radius: 24px; background: radial-gradient(ellipse at 58% 48%, rgba(89,45,138,.36), transparent 47%), linear-gradient(135deg, #15111e, #0d0b12 55%, #171021); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05); isolation: isolate; }
.hero-art-panel::before { position: absolute; inset: 7%; border: 1px solid rgba(208,168,255,.09); border-radius: 18px; content: ""; }
.hero-art-grid, .service-art-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(210,181,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(210,181,255,.12) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 55% 50%, black, transparent 72%); transform: perspective(500px) rotateX(58deg) scale(1.65) translateY(12%); transform-origin: center bottom; }
.hero-orbit { position: absolute; width: 440px; height: 160px; top: 50%; left: 50%; border: 1px solid rgba(204,160,255,.32); border-radius: 50%; box-shadow: 0 0 26px rgba(168,98,245,.15), inset 0 0 18px rgba(168,98,245,.1); }
.orbit-one { transform: translate(-50%,-50%) rotate(-29deg) rotateX(58deg); }
.orbit-two { transform: translate(-50%,-50%) rotate(62deg) rotateX(57deg); border-color: rgba(185,112,255,.23); }
.hero-sculpture { position: absolute; width: 278px; height: 278px; top: 50%; left: 50%; transform: translate(-50%,-53%) rotate(-13deg); transform-style: preserve-3d; filter: drop-shadow(0 25px 38px rgba(0,0,0,.56)); animation: sculpture-float 8s ease-in-out infinite; }
.sculpture-core { position: absolute; inset: 57px; border: 1px solid rgba(249,223,255,.68); border-radius: 39% 61% 58% 42% / 51% 41% 59% 49%; background: radial-gradient(circle at 33% 29%, #f0d5ff 0, #bc7cff 9%, #7137b5 30%, #261735 64%, #09080d 78%); box-shadow: inset -18px -18px 30px rgba(0,0,0,.7), inset 10px 8px 21px rgba(255,220,255,.7), 0 0 38px rgba(183,101,255,.42); transform: rotateX(17deg) rotateY(-25deg); }
.sculpture-ring { position: absolute; inset: 32px 4px; border: 4px solid transparent; border-radius: 50%; transform-style: preserve-3d; }
.ring-a { border-right-color: #e0bfff; border-left-color: rgba(156,89,235,.5); box-shadow: 0 0 13px rgba(187,116,255,.76), inset 0 0 8px rgba(187,116,255,.15); transform: rotateZ(29deg) rotateX(62deg); }
.ring-b { inset: 3px 48px; border-top-color: rgba(242,213,255,.82); border-bottom-color: rgba(133,70,223,.28); box-shadow: 0 0 16px rgba(199,139,255,.48); transform: rotateZ(-38deg) rotateY(66deg); }
.ring-c { inset: 15px 29px; border-width: 2px; border-right-color: rgba(255,229,255,.75); border-left-color: rgba(109,65,180,.18); transform: rotateZ(60deg) rotateX(-65deg); }
.sculpture-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #f5d5ff; box-shadow: 0 0 18px 7px rgba(198,127,255,.5); }
.spark-a { top: 34px; right: 40px; }.spark-b { left: 32px; bottom: 49px; width: 5px; height: 5px; }
.art-caption { position: absolute; right: 26px; bottom: 23px; left: 26px; display: flex; align-items: center; gap: 9px; color: #94879f; font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .11em; }
.art-caption > span:last-child { margin-left: auto; }
.art-index-large { position: absolute; top: 24px; right: 27px; color: rgba(218,195,255,.18); font-size: 52px; font-weight: 800; letter-spacing: -.12em; }
.art-index-large span { color: var(--purple-light); }
@keyframes sculpture-float { 0%,100% { transform: translate(-50%,-53%) rotate(-13deg); } 50% { transform: translate(-50%,-56%) rotate(-9deg); } }

.hero-car-panel { perspective: 1100px; background: radial-gradient(ellipse at 55% 48%, rgba(119,72,176,.22), transparent 60%), #100d16; }
.hero-car-panel::before { z-index: 4; border-color: rgba(209,178,255,.13); pointer-events: none; }
.hero-car-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 25px rgba(0,0,0,.55)); transform-style: preserve-3d; transform-origin: center 58%; animation: hero-car-drive 5.2s cubic-bezier(.45,.05,.55,.95) infinite; }
.hero-car-sweep { position: absolute; z-index: 2; top: -22%; bottom: -22%; left: -40%; width: 24%; transform: skewX(-19deg); background: linear-gradient(90deg, transparent, rgba(180,119,255,.08), rgba(244,231,255,.34), rgba(150,91,255,.2), transparent); filter: blur(6px); mix-blend-mode: screen; animation: hero-car-sweep 4.1s ease-in-out infinite; pointer-events: none; }
.hero-car-scan { position: absolute; z-index: 2; left: 9%; right: 9%; top: -3%; height: 2px; background: linear-gradient(90deg, transparent, rgba(211,174,255,.72), transparent); box-shadow: 0 0 16px 3px rgba(163,102,255,.38); animation: hero-car-scan 4.4s linear infinite; pointer-events: none; }
.hero-car-spark { position: absolute; z-index: 3; width: 5px; height: 5px; border-radius: 50%; background: #f5eaff; box-shadow: 0 0 15px 4px rgba(182,122,255,.9); animation: hero-car-spark 3s ease-in-out infinite; pointer-events: none; }
.car-spark-one { left: 17%; bottom: 20%; }.car-spark-two { right: 18%; bottom: 16%; width: 4px; height: 4px; animation-delay: 1.6s; }
.hero-car-tag { position: absolute; z-index: 5; top: 21px; left: 23px; padding: 7px 10px; border: 1px solid rgba(203,166,255,.25); border-radius: 8px; color: #e1cff8; background: rgba(13,10,19,.62); font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .1em; backdrop-filter: blur(8px); }
.hero-car-panel .art-caption { z-index: 5; color: #c6b7d6; text-shadow: 0 1px 5px #08070c; }
@keyframes hero-car-drive { 0% { transform: translate3d(-.8%,.7%,0) rotateY(-2.4deg) rotateX(1deg) scale(1.01); } 38% { transform: translate3d(.8%,-.8%,0) rotateY(2.4deg) rotateX(-1deg) scale(1.055); } 68% { transform: translate3d(-.4%,.4%,0) rotateY(1deg) rotateX(1.2deg) scale(1.025); } 100% { transform: translate3d(.6%,-.5%,0) rotateY(-2.3deg) rotateX(-1deg) scale(1.05); } }
@keyframes hero-car-sweep { 0%,14% { left: -40%; opacity: 0; } 26% { opacity: 1; } 54%,100% { left: 120%; opacity: 0; } }
@keyframes hero-car-scan { from { top: -3%; opacity: 0; } 12% { opacity: .8; } 88% { opacity: .8; } to { top: 104%; opacity: 0; } }
@keyframes hero-car-spark { 0%,100% { opacity: 0; transform: translate3d(0,10px,0) scale(.5); } 28% { opacity: .95; } 72% { opacity: .65; } to { opacity: 0; transform: translate3d(13px,-70px,20px) scale(1.25); } }

.type-strip { margin-top: -2px; margin-bottom: 52px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.type-card { min-height: 93px; padding: 17px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(195,171,228,.11); border-radius: 14px; background: linear-gradient(135deg, rgba(25,22,33,.88), rgba(15,13,20,.92)); transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.type-card:hover { transform: translateY(-3px); border-color: var(--border-strong); background: #171220; }
.type-icon { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; border: 1px solid rgba(188,134,255,.28); border-radius: 11px; color: var(--purple-light); background: radial-gradient(circle at 40% 30%,rgba(191,137,255,.2),rgba(95,51,146,.12)); font-size: 18px; }
.type-card strong, .type-card small { display: block; }
.type-card strong { font-size: 12px; }
.type-card small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.type-arrow { margin-left: auto; color: #8e7ba8; font-size: 16px; }

.section { padding-top: 24px; padding-bottom: 76px; }
.section-heading { margin-bottom: 24px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-heading h2, .quote-intro h2, .contact-band h2 { margin: 8px 0 5px; font-size: clamp(28px,3.6vw,42px); font-weight: 750; letter-spacing: -.055em; line-height: 1.12; }
.section-heading p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.heading-period { color: var(--purple); }
.section-heading > .text-link { padding-bottom: 7px; white-space: nowrap; }
.resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.resource-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(203,181,231,.13); border-radius: 15px; background: linear-gradient(145deg, #15131c, #100e15); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.resource-card:hover { transform: translateY(-4px); border-color: rgba(192,142,255,.45); box-shadow: 0 15px 36px rgba(0,0,0,.25), 0 0 25px rgba(122,68,180,.08); }
.resource-card-link { display: block; height: 100%; }
.resource-art { position: relative; height: 218px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 72%, rgba(137,74,207,.37), transparent 43%), linear-gradient(145deg, #29203a, #14111d 55%, #272035); }
.resource-art::before { position: absolute; inset: 0; content: ""; opacity: .33; background: radial-gradient(circle at 30% 20%,rgba(255,255,255,.6) 0 1px,transparent 2px), radial-gradient(circle at 74% 33%,rgba(255,255,255,.4) 0 1px,transparent 2px), radial-gradient(circle at 68% 74%,rgba(255,255,255,.34) 0 1px,transparent 2px); }
.resource-art::after { position: absolute; width: 210px; height: 210px; border: 1px solid rgba(224,196,255,.22); border-radius: 50%; content: ""; transform: rotateX(62deg) rotateZ(-35deg); box-shadow: 0 0 25px rgba(176,110,255,.13); }
.resource-art img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.art-orbit { position: relative; z-index: 1; width: 90px; height: 90px; border: 1px solid rgba(238,215,255,.48); border-radius: 38% 62% 52% 48%; background: radial-gradient(circle at 32% 27%, #eedaff 0, #c185ff 7%, #713bad 38%, #231631 73%); box-shadow: inset -10px -12px 20px #09070d, inset 5px 5px 13px rgba(255,255,255,.58), 0 0 35px rgba(177,111,255,.4); transform: rotate(-23deg); }
.art-index { position: absolute; top: 15px; left: 17px; z-index: 2; color: rgba(233,220,249,.69); font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .12em; }
.art-title { position: absolute; z-index: 2; right: 15px; bottom: 17px; color: #e4d7f3; font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.visual-cinematic { background: radial-gradient(ellipse at 60% 54%,rgba(224,113,105,.42),transparent 38%),linear-gradient(145deg,#402528,#16121b 56%,#251534); }
.visual-3d-cartoon { background: radial-gradient(ellipse at 45% 56%,rgba(251,170,107,.42),transparent 39%),linear-gradient(145deg,#3e3026,#18121b 60%,#2c1c36); }
.visual-portraits, .visual-women, .visual-men { background: radial-gradient(ellipse at 58% 46%,rgba(184,119,210,.4),transparent 41%),linear-gradient(145deg,#30203b,#15111c 58%,#32203d); }
.visual-anime { background: radial-gradient(ellipse at 50% 54%,rgba(113,149,243,.42),transparent 44%),linear-gradient(145deg,#202748,#11131d 60%,#2e2348); }
.visual-fantasy { background: radial-gradient(ellipse at 51% 48%,rgba(98,189,177,.3),transparent 42%),linear-gradient(145deg,#173733,#11151b 57%,#33204a); }
.visual-realistic { background: radial-gradient(ellipse at 49% 54%,rgba(220,165,101,.36),transparent 44%),linear-gradient(145deg,#3c2c22,#151219 59%,#2e2135); }
.visual-creator-tools { background: radial-gradient(ellipse at 55% 53%,rgba(123,108,242,.43),transparent 40%),linear-gradient(145deg,#29264a,#14121d 58%,#291d3c); }
.resource-type-pill { position: absolute; z-index: 3; bottom: 13px; left: 14px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; color: #f5effd; background: rgba(10,8,15,.55); backdrop-filter: blur(7px); font-family: "Consolas", monospace; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.resource-art:has(img) .resource-type-pill { background: rgba(10,8,15,.76); }
.resource-card-copy { padding: 16px 17px 18px; }
.card-meta { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 12px; color: #9a8bae; font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.card-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-card-copy h3 { margin: 0 38px 7px 0; font-size: 16px; line-height: 1.35; letter-spacing: -.025em; }
.resource-card-copy p { min-height: 42px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.favorite-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(208,182,241,.18); color: #e9deff; background: rgba(16,13,22,.92); transition: color .18s ease, border-color .18s ease, background .18s ease; }
.resource-card > .favorite-toggle { position: absolute; top: 13px; right: 13px; z-index: 5; width: 37px; height: 37px; border-radius: 50%; font-size: 18px; backdrop-filter: blur(8px); }
.favorite-toggle:hover { border-color: rgba(205,151,255,.65); color: #fff; background: #39204d; }
.favorite-toggle[aria-pressed="true"] { border-color: rgba(245,139,223,.58); color: #ff9be2; background: rgba(97,34,91,.4); }
.favorite-toggle[aria-pressed="true"] span { transform: scale(1.08); }
.resource-card > .favorite-toggle span { transition: transform .18s ease; }
.empty-panel { min-height: 170px; padding: 28px; display: flex; align-items: center; gap: 20px; border: 1px dashed rgba(202,176,240,.24); border-radius: 15px; background: rgba(21,18,29,.65); }
.empty-symbol { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 13px; color: var(--purple-light); background: rgba(157,97,222,.12); font-size: 21px; }
.empty-panel h3 { margin: 0 0 4px; font-size: 16px; }
.empty-panel p { margin: 0; color: var(--muted); font-size: 12px; }
.empty-panel .text-link, .empty-panel .button { margin-left: auto; }
.empty-panel[hidden] { display: none; }

.services-teaser { position: relative; min-height: 340px; margin-top: 5px; margin-bottom: 68px; padding: 48px 54px; overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; border: 1px solid rgba(193,142,255,.24); border-radius: 22px; background: radial-gradient(ellipse at 76% 51%,rgba(116,54,177,.28),transparent 36%),linear-gradient(115deg,#16121e,#111019 56%,#1b1125); }
.services-teaser-copy { position: relative; z-index: 2; }
.services-teaser h2 { margin: 13px 0; font-size: clamp(36px,5vw,56px); letter-spacing: -.07em; line-height: 1; }
.services-teaser p { max-width: 470px; margin-bottom: 23px; color: #b7b0c2; font-size: 13px; line-height: 1.8; }
.teaser-art { position: absolute; top: 50%; right: 7%; width: 335px; height: 280px; transform: translateY(-50%); }
.teaser-art::before { position: absolute; inset: 15% 10%; border-radius: 50%; content: ""; background: radial-gradient(ellipse,rgba(164,94,255,.24),transparent 64%); filter: blur(14px); }
.teaser-loop { position: absolute; top: 50%; left: 50%; width: 275px; height: 93px; border: 2px solid rgba(213,166,255,.74); border-radius: 50%; box-shadow: 0 0 21px rgba(177,100,248,.48), inset 0 0 17px rgba(153,89,213,.17); }
.loop-one { transform: translate(-50%,-50%) rotate(-37deg) rotateX(60deg); }
.loop-two { transform: translate(-50%,-50%) rotate(46deg) rotateX(63deg); border-color: rgba(229,194,255,.47); }
.teaser-petal { position: absolute; top: 50%; left: 50%; width: 89px; height: 126px; border: 1px solid rgba(244,220,255,.67); border-radius: 55% 45% 48% 52% / 61% 51% 49% 39%; background: radial-gradient(circle at 32% 22%,#ebcdff 0,#9c59d4 12%,#42204f 52%,#150f1d 82%); box-shadow: inset -13px -15px 22px rgba(0,0,0,.76), inset 6px 6px 15px rgba(255,255,255,.42),0 0 32px rgba(157,87,223,.43); transform: translate(-50%,-50%) rotate(28deg); }
.teaser-art > span { position: absolute; right: 7px; bottom: 2px; color: #9b8cac; font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .13em; }
.categories-section { padding-top: 0; }
.category-list { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border); }
.category-link { min-height: 63px; padding: 0 13px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); color: #d6d0de; font-size: 12px; transition: color .2s ease, background .2s ease; }
.category-link:hover { color: #fff; background: rgba(162,103,230,.08); }
.category-count { min-width: 22px; height: 20px; padding-inline: 5px; display: grid; place-items: center; border-radius: 6px; color: #a58acb; background: rgba(141,92,190,.12); font-family: "Consolas", monospace; font-size: 9px; }
.category-arrow { margin-left: auto; color: #817090; }

.page-intro { min-height: 295px; padding-top: 82px; padding-bottom: 47px; display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.page-intro h1 { margin: 14px 0 10px; font-size: clamp(40px,5vw,60px); font-weight: 780; letter-spacing: -.068em; line-height: 1.06; }
.page-intro p { max-width: 570px; margin: 0; color: var(--muted); font-size: 14px; }
.intro-note { min-width: 170px; padding-left: 20px; display: flex; align-items: center; gap: 13px; border-left: 1px solid rgba(200,166,244,.3); color: #a9a1b3; font-size: 11px; line-height: 1.7; }
.intro-note-number { color: var(--purple-light); font-family: "Consolas", monospace; font-size: 25px; }
.library-section { padding-top: 0; padding-bottom: 85px; }
.library-controls { margin-bottom: 17px; display: grid; grid-template-columns: minmax(200px,1fr) 210px 190px auto; align-items: center; gap: 10px; }
.search-field { height: 49px; padding: 0 15px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--purple-light); background: rgba(19,16,26,.8); font-size: 22px; }
.search-field:focus-within { border-color: var(--border-strong); }
.select-field select, .field select, .status-form select { width: 100%; height: 49px; padding: 0 34px 0 13px; appearance: none; border: 1px solid var(--border); border-radius: 10px; outline: none; color: #eae4f2; background-color: #15121c; background-image: linear-gradient(45deg,transparent 50%,#b5a3cb 50%),linear-gradient(135deg,#b5a3cb 50%,transparent 50%); background-position: calc(100% - 17px) 21px,calc(100% - 12px) 21px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; font-size: 12px; }
.select-field select:focus, .field select:focus, .status-form select:focus { border-color: var(--purple); }
.library-controls > .button { min-height: 49px; }
.filter-row { padding: 7px 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.results-bar { min-height: 43px; margin: 10px 0 11px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(200,177,232,.12); color: var(--muted); font-family: "Consolas", monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.pagination { margin-top: 28px; display: flex; justify-content: center; gap: 8px; }
.page-number { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: #ccc3d7; background: var(--panel); font-size: 12px; }
.page-number:hover, .page-number.is-current { border-color: var(--border-strong); color: #fff; background: rgba(139,79,207,.24); }
.category-intro { min-height: 265px; padding-top: 45px; align-items: start; flex-direction: column; gap: 30px; }
.category-intro h1 { margin-top: 9px; }
.back-link { width: fit-content; color: #b7adc6; font-size: 12px; }
.back-link:hover { color: #fff; }

.detail-section { padding-top: 52px; padding-bottom: 65px; }
.detail-layout { margin-top: 27px; display: grid; grid-template-columns: minmax(330px,.85fr) minmax(440px,1.15fr); align-items: start; gap: 56px; }
.detail-art { position: sticky; top: 112px; min-height: 510px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(195,154,247,.28); border-radius: 19px; background: radial-gradient(ellipse at 47% 50%,rgba(129,64,193,.45),transparent 43%),linear-gradient(145deg,#221831,#111019 58%,#30203b); }
.detail-art::before { position: absolute; inset: 7%; border: 1px solid rgba(222,191,255,.13); border-radius: 14px; content: ""; }
.detail-art.has-image img { width: 100%; height: 100%; min-height: 510px; position: absolute; inset: 0; object-fit: cover; }
.detail-art-kicker, .detail-art-bottom { position: absolute; z-index: 1; left: 24px; color: #d2c0e6; font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .13em; }
.detail-art-kicker { top: 25px; }.detail-art-bottom { bottom: 24px; }
.detail-art-shape { position: relative; width: 200px; height: 245px; filter: drop-shadow(0 26px 23px rgba(0,0,0,.5)); transform: rotate(-10deg); }
.detail-art-shape span { position: absolute; inset: 15px 40px; border-radius: 48% 52% 56% 44% / 38% 39% 61% 62%; border: 1px solid rgba(243,218,255,.65); background: radial-gradient(circle at 33% 24%,#efd9ff 0,#bd7cff 8%,#8544c3 28%,#30213c 67%,#09080e 83%); box-shadow: inset -18px -23px 27px rgba(0,0,0,.78), inset 9px 7px 14px rgba(255,255,255,.54), 0 0 40px rgba(178,111,252,.48); }
.detail-art-shape i { position: absolute; inset: 0; border: 3px solid transparent; border-right-color: rgba(233,208,255,.88); border-left-color: rgba(124,71,183,.37); border-radius: 50%; transform: rotate(-25deg) rotateX(66deg); box-shadow: 0 0 18px rgba(186,114,255,.54); }
.detail-copy { min-width: 0; padding-top: 11px; }
.detail-copy h1 { margin: 14px 0 12px; font-size: clamp(35px,4vw,51px); line-height: 1.07; letter-spacing: -.065em; }
.detail-summary { margin-bottom: 24px; color: #bdb6c9; font-size: 14px; line-height: 1.78; }
.detail-meta { margin: 22px 0; padding: 18px 0; display: flex; gap: 40px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.detail-meta span { display: grid; gap: 5px; }
.detail-meta small { color: #9c8bac; font-family: "Consolas", monospace; font-size: 8px; letter-spacing: .13em; }
.detail-meta strong { font-size: 12px; font-weight: 600; }
.tag-row { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tag { padding: 4px 9px; border: 1px solid rgba(195,157,239,.15); border-radius: 6px; color: #bca9d3; background: rgba(138,85,183,.08); font-family: "Consolas", monospace; font-size: 10px; }
.prompt-box { margin: 25px 0 17px; overflow: hidden; border: 1px solid rgba(190,153,238,.28); border-radius: 14px; background: linear-gradient(145deg,#16121e,#100e16); }
.prompt-box-head { padding: 13px 16px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(205,180,235,.12); color: #ab97c2; font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .11em; }
.prompt-box pre { max-height: 360px; margin: 0; padding: 19px; overflow: auto; color: #ded8e8; font-family: "Consolas", "Courier New", monospace; font-size: 12px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.copy-prompt { min-width: 155px; }

.services-hero { padding-top: 53px; padding-bottom: 48px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 55px; }
.services-hero-copy h1 { margin: 19px 0; font-size: clamp(48px,5.8vw,72px); font-weight: 780; letter-spacing: -.075em; line-height: 1.01; }
.services-hero-copy > p { max-width: 510px; margin-bottom: 25px; color: #b8b0c3; font-size: 15px; line-height: 1.8; }
.services-hero-art { position: relative; height: 420px; overflow: hidden; border: 1px solid rgba(190,148,239,.27); border-radius: 21px; background: radial-gradient(ellipse at 54% 48%,rgba(124,70,177,.38),transparent 50%),linear-gradient(145deg,#1e1729,#111019 58%,#2a1a36); }
.services-hero-art::before { position: absolute; inset: 8%; border: 1px solid rgba(209,178,244,.13); border-radius: 16px; content: ""; }
.service-object { position: absolute; left: 49%; top: 48%; display: block; border: 1px solid rgba(245,220,255,.69); background: radial-gradient(circle at 30% 22%,#ebd4ff,#a76de2 11%,#57336d 39%,#20142a 70%,#0c0a10 90%); box-shadow: inset -21px -22px 25px rgba(0,0,0,.75), inset 9px 8px 15px rgba(255,255,255,.48), 0 0 41px rgba(161,91,228,.43); }
.object-a { width: 150px; height: 183px; border-radius: 52% 48% 41% 59% / 34% 37% 63% 66%; transform: translate(-50%,-50%) rotate(-17deg); }
.object-b { width: 267px; height: 85px; border: 3px solid rgba(218,177,255,.6); border-right-color: rgba(248,222,255,.93); border-left-color: rgba(99,56,142,.18); border-radius: 50%; background: transparent; box-shadow: 0 0 20px rgba(164,104,229,.43); transform: translate(-50%,-50%) rotate(-32deg) rotateX(61deg); }
.object-c { width: 208px; height: 58px; border: 2px solid rgba(206,165,246,.52); border-bottom-color: rgba(255,230,255,.81); border-radius: 50%; background: transparent; box-shadow: 0 0 16px rgba(164,104,229,.31); transform: translate(-50%,-50%) rotate(48deg) rotateX(63deg); }
.service-art-stamp { position: absolute; top: 35px; left: 30px; color: rgba(227,208,246,.78); font-family: "Consolas", monospace; font-size: 10px; letter-spacing: .1em; line-height: 1.6; }
.service-art-stamp span { margin-left: 8px; color: var(--purple-light); font-size: 16px; }
.service-art-caption { position: absolute; right: 28px; bottom: 26px; color: #a69ab4; font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .14em; }
.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.service-card { min-height: 225px; padding: 22px; display: flex; flex-direction: column; border: 1px solid rgba(196,172,225,.13); border-radius: 14px; background: linear-gradient(145deg,rgba(23,20,31,.95),rgba(15,13,20,.92)); }
.service-card-top { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; }
.service-number { color: #857591; font-family: "Consolas", monospace; font-size: 10px; }
.service-glyph { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(199,155,250,.26); border-radius: 11px; color: var(--purple-light); background: rgba(126,71,177,.11); font-size: 17px; }
.service-card h3 { margin-bottom: 7px; font-size: 17px; letter-spacing: -.03em; }
.service-card p { margin-bottom: 22px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.service-card .text-link { margin-top: auto; font-size: 11px; }
.portfolio-section { padding-top: 18px; padding-bottom: 72px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.portfolio-card { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.portfolio-visual { position: relative; height: 200px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 52% 48%,rgba(193,128,255,.36),transparent 41%),linear-gradient(140deg,#342046,#17131e 60%,#21182c); }
.portfolio-visual-1 { background: radial-gradient(circle at 51% 48%,rgba(84,176,190,.32),transparent 41%),linear-gradient(140deg,#1d3943,#15141e 60%,#282040); }
.portfolio-visual-2 { background: radial-gradient(circle at 51% 48%,rgba(231,155,116,.3),transparent 41%),linear-gradient(140deg,#3b2b2b,#17131d 60%,#34203b); }
.portfolio-visual-3 { background: radial-gradient(circle at 51% 48%,rgba(142,128,251,.3),transparent 41%),linear-gradient(140deg,#292849,#15141e 60%,#2d2042); }
.portfolio-visual img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-orbit { width: 112px; height: 112px; border: 2px solid rgba(236,207,255,.63); border-radius: 43% 57% 50% 50%; box-shadow: inset -14px -16px 25px rgba(0,0,0,.66), inset 6px 7px 14px rgba(255,255,255,.4),0 0 36px rgba(172,103,240,.44); background: radial-gradient(circle at 31% 27%,#efd9ff,#b879eb 9%,#633e80 45%,#17111d 79%); transform: rotate(-17deg); }
.portfolio-lines { position: absolute; width: 220px; height: 70px; border: 1px solid rgba(238,211,255,.56); border-radius: 50%; transform: rotate(-27deg) rotateX(58deg); }
.portfolio-mark { position: absolute; top: 14px; left: 14px; padding: 4px 7px; border: 1px solid rgba(222,201,240,.2); border-radius: 5px; color: #e2d4f2; background: rgba(13,10,18,.66); font-family: "Consolas", monospace; font-size: 8px; letter-spacing: .1em; }
.portfolio-copy { padding: 15px 17px 17px; }
.portfolio-copy h3 { margin-bottom: 5px; font-size: 14px; }
.portfolio-copy p { margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.demo-label { display: block; color: #b99bda; font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .06em; }
.quote-section { padding-top: 50px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: 60px; }
.quote-intro { position: sticky; top: 115px; }
.quote-intro h2 { margin-top: 13px; font-size: clamp(34px,4.5vw,53px); }
.quote-intro > p { max-width: 440px; margin: 16px 0 32px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.contact-email { padding-top: 18px; display: grid; gap: 7px; border-top: 1px solid var(--border); }
.contact-email small { color: #92839f; font-family: "Consolas", monospace; font-size: 8px; letter-spacing: .12em; }
.contact-email a { color: #e5d6f7; font-size: 13px; }
.form-card { padding: 25px; border: 1px solid rgba(195,163,235,.2); border-radius: 16px; background: linear-gradient(145deg,rgba(24,21,32,.95),rgba(15,13,20,.98)); box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.field { min-width: 0; display: grid; gap: 7px; color: #ded8e7; font-size: 11px; font-weight: 650; }
.field > span { display: inline; color: var(--purple-light); }
.field small { color: #9b91a8; font-size: 9px; font-weight: 400; }
.field input, .field textarea, .field select { width: 100%; min-height: 45px; padding: 11px 12px; border: 1px solid rgba(194,173,221,.16); border-radius: 9px; outline: 0; color: #f1eaf8; background: rgba(9,8,13,.76); font-size: 12px; font-weight: 400; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(173,113,255,.1); }
.field input::placeholder, .field textarea::placeholder { color: #746d80; }
.field-wide { grid-column: 1 / -1; }
.form-card > .button { margin-top: 18px; }
.form-privacy { max-width: 460px; margin: 12px 0 0; color: #918a9b; font-size: 10px; line-height: 1.6; }
.form-privacy a { color: #d0b4f4; text-decoration: underline; text-underline-offset: 2px; }
.honeypot { position: absolute!important; left: -9999px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; }

.about-body { padding-top: 8px; padding-bottom: 65px; display: grid; grid-template-columns: 1.12fr .88fr; gap: 50px; }
.about-statement { padding: 36px; border: 1px solid var(--border); border-radius: 17px; background: radial-gradient(ellipse at 85% 15%,rgba(136,77,196,.22),transparent 42%),var(--panel); }
.about-statement h2 { margin: 18px 0 13px; font-size: clamp(29px,4vw,44px); letter-spacing: -.065em; line-height: 1.15; }
.about-statement p { max-width: 590px; margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.about-side { display: grid; align-content: center; }
.about-fact { padding: 20px 0; display: flex; gap: 20px; border-bottom: 1px solid var(--border); }
.about-fact:first-child { border-top: 1px solid var(--border); }
.about-fact > span { color: var(--purple-light); font-family: "Consolas", monospace; font-size: 11px; }
.about-fact h3 { margin-bottom: 4px; font-size: 15px; }
.about-fact p { margin: 0; color: var(--muted); font-size: 12px; }
.contact-band { margin-bottom: 80px; padding: 30px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(100deg,rgba(139,80,198,.18),rgba(22,18,30,.9)); }
.contact-band h2 { margin-bottom: 0; font-size: clamp(24px,3vw,34px); }
.contact-layout { padding-bottom: 90px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: 34px; }
.contact-channels { padding: 22px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel); }
.contact-channels > .eyebrow { margin-bottom: 15px; }
.channel-row { min-height: 56px; display: grid; grid-template-columns: 65px 1fr 20px; align-items: center; gap: 12px; border-top: 1px solid rgba(200,177,232,.12); color: #b7adc5; font-size: 10px; }
.channel-row strong { color: #eee8f5; font-size: 12px; font-weight: 600; }
.channel-row > span:last-child { color: var(--purple-light); font-size: 15px; }
.contact-form { display: grid; gap: 14px; }
.contact-form > .eyebrow { margin-bottom: 2px; }
.legal-page { min-height: 70vh; padding-top: 80px; padding-bottom: 90px; }
.legal-page h1, .not-found h1 { margin: 14px 0; font-size: clamp(43px,6vw,66px); letter-spacing: -.07em; line-height: 1.08; }
.legal-updated { color: var(--quiet); font-family: "Consolas", monospace; font-size: 10px; }
.legal-content { max-width: 800px; margin-top: 39px; padding-top: 28px; border-top: 1px solid var(--border); }
.legal-content h2 { margin: 23px 0 7px; font-size: 18px; }
.legal-content p { color: #b7b0c2; font-size: 13px; line-height: 1.85; }
.legal-content a { color: var(--purple-light); text-decoration: underline; text-underline-offset: 3px; }
.not-found { min-height: 65vh; padding-top: 100px; padding-bottom: 100px; }
.not-found p { color: var(--muted); }
.setup-screen { min-height: 75vh; padding-top: 90px; padding-bottom: 90px; display: grid; place-items: center; }
.setup-card { width: min(720px,100%); padding: 34px; border: 1px solid var(--border-strong); border-radius: 18px; background: radial-gradient(ellipse at 100% 0,rgba(149,88,215,.2),transparent 45%),var(--panel); }
.setup-card h1 { margin: 14px 0; font-size: clamp(34px,5vw,51px); letter-spacing: -.06em; line-height: 1.1; }
.setup-card > p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.setup-card code, .admin-note code { color: #dbc6fa; }
.setup-steps { margin: 22px 0 27px; display: grid; gap: 10px; color: #d0c6dc; font-family: "Consolas", monospace; font-size: 11px; }

.site-footer { border-top: 1px solid rgba(196,171,228,.13); background: rgba(10,8,14,.82); }
.footer-main { padding-top: 42px; padding-bottom: 36px; display: grid; grid-template-columns: 1.65fr repeat(4,1fr); gap: 35px; }
.footer-brand p { max-width: 250px; margin: 15px 0 0; color: #90899b; font-size: 11px; line-height: 1.7; }
.footer-column { display: grid; align-content: start; gap: 8px; }
.footer-column h2 { margin: 4px 0 7px; color: #94889f; font-family: "Consolas", monospace; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.footer-column a { width: fit-content; color: #c0b9c9; font-size: 10px; }
.footer-column a:hover { color: #fff; }
.footer-bottom { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(196,171,228,.1); color: #776f81; font-family: "Consolas", monospace; font-size: 9px; }
.footer-bottom a { color: #9d91ad; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: min(360px,calc(100vw - 44px)); padding: 12px 16px; transform: translateY(20px); opacity: 0; pointer-events: none; border: 1px solid rgba(205,163,255,.42); border-radius: 10px; color: #fbf7ff; background: rgba(36,25,49,.96); box-shadow: 0 13px 40px rgba(0,0,0,.38); font-size: 12px; transition: opacity .2s ease,transform .2s ease; }
.toast.is-visible { transform: translateY(0); opacity: 1; }

/* Admin area */
.admin-body { background: radial-gradient(ellipse 85% 42% at 60% -15%,rgba(110,61,164,.16),transparent 66%),#09080e; }
.auth-shell { width: min(510px,calc(100% - 34px)); min-height: 100vh; margin-inline: auto; padding: 38px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auth-shell > .brand { align-self: flex-start; margin: 0 0 25px 8px; }
.auth-card { width: 100%; padding: 31px; border: 1px solid rgba(199,163,241,.23); border-radius: 17px; background: linear-gradient(145deg,#171420,#100e15); box-shadow: var(--shadow); }
.auth-card h1 { margin: 11px 0 6px; font-size: 36px; letter-spacing: -.06em; }
.auth-card > p { color: var(--muted); font-size: 12px; }
.stack-form { margin-top: 23px; display: grid; gap: 15px; }
.stack-form .button { margin-top: 6px; }
.auth-hint { margin: 17px 0 0!important; padding-top: 13px; border-top: 1px solid var(--border); font-size: 11px!important; }
.auth-hint a, .auth-back a { color: var(--purple-light); }
.auth-back { margin: 18px 0 0; color: #928a9e; font-size: 11px; }
.admin-topbar { position: sticky; top: 0; z-index: 25; border-bottom: 1px solid var(--border); background: rgba(10,8,14,.93); backdrop-filter: blur(15px); }
.admin-topbar-inner { width: min(1480px,calc(100% - 42px)); min-height: 72px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-top-actions { display: flex; align-items: center; gap: 22px; }
.admin-top-actions form { margin: 0; }
.admin-welcome { color: #b8afc2; font-size: 11px; }
.admin-shell { width: min(1480px,calc(100% - 42px)); min-height: calc(100vh - 72px); margin: 0 auto; padding: 27px 0 65px; display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 28px; }
.admin-sidebar { padding: 10px 9px 10px 0; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--border); }
.admin-sidebar > .eyebrow { margin: 0 0 12px 10px; }
.admin-nav-link { min-height: 42px; padding: 0 11px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 9px; color: #b3aabb; font-size: 12px; transition: background .2s ease,color .2s ease,border-color .2s ease; }
.admin-nav-link:hover, .admin-nav-link.is-current { border-color: rgba(179,126,244,.18); color: #fff; background: linear-gradient(100deg,rgba(138,77,211,.26),rgba(68,42,91,.16)); }
.admin-nav-icon { width: 19px; color: #bb9ce1; font-size: 15px; text-align: center; }
.nav-count { min-width: 19px; height: 19px; margin-left: auto; display: grid; place-items: center; border-radius: 6px; color: #fff; background: #8d50d0; font-size: 9px; }
.admin-content { min-width: 0; }
.admin-page-heading { min-height: 71px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.admin-page-heading h1 { margin: 4px 0 0; font-size: 31px; letter-spacing: -.055em; }
.metric-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(5,1fr); gap: 13px; }
.metric-card { min-height: 132px; padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg,#17141f,#100e15); }
.metric-card span, .metric-card small { display: block; color: #aaa1b5; font-size: 10px; }
.metric-card strong { display: block; margin: 8px 0 4px; color: #f5efff; font-size: 32px; letter-spacing: -.06em; }
.metric-card small { color: #84798f; font-family: "Consolas", monospace; font-size: 9px; }
.admin-two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.admin-panel { min-width: 0; margin-bottom: 16px; padding: 19px; border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg,#15131d,#100e15); }
.admin-panel-heading { min-height: 34px; margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-panel-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.025em; }
.admin-panel-heading > a:not(.button) { color: #cbb2ee; font-size: 10px; }
.count-muted { margin-left: 4px; color: #93849f; font-family: "Consolas",monospace; font-size: 10px; }
.admin-list { display: grid; }
.admin-list-row { min-height: 54px; padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(195,173,223,.1); }
.admin-list-row > span:first-child { min-width: 0; }
.admin-list-row strong, .admin-list-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-list-row strong { max-width: 360px; color: #e7e0ed; font-size: 11px; font-weight: 600; }
.admin-list-row small { margin-top: 4px; color: #91879b; font-size: 9px; }
.admin-list-row > a:hover strong { color: #fff; }
.status-pill { padding: 4px 7px; flex: 0 0 auto; border: 1px solid rgba(200,178,230,.17); border-radius: 5px; color: #ccc2d8; background: rgba(125,92,159,.12); font-family: "Consolas",monospace; font-size: 8px; text-transform: uppercase; }
.status-published, .status-replied, .status-read { color: #91e1b9; border-color: rgba(126,224,181,.23); background: rgba(38,103,76,.14); }
.status-draft, .status-new { color: #dac28f; border-color: rgba(226,187,113,.22); background: rgba(132,94,36,.13); }
.status-reviewing { color: #bca2f8; }.status-closed { color: #a49aa9; }
.admin-empty { padding: 22px 8px; color: #938a9d; font-size: 11px; }
.admin-note { margin-top: 16px; padding: 16px; border: 1px solid rgba(190,154,234,.18); border-radius: 10px; background: rgba(122,75,167,.08); }
.admin-note strong { font-size: 11px; }
.admin-note p { margin: 5px 0 0; color: #aaa1b4; font-size: 10px; line-height: 1.7; }
.admin-note-text { color: #b7adc2; font-size: 11px; }
.admin-form { padding: 22px; }
.admin-form .form-grid { margin: 16px 0; }
.admin-form .button { margin-top: 9px; }
.check-field { min-height: 42px; display: flex; align-items: center; gap: 9px; color: #c4bbce; font-size: 11px; }
.check-field input { accent-color: #9f5ce8; }
.table-wrap { width: 100%; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.admin-table th { padding: 11px 10px; color: #8e839b; font-family: "Consolas",monospace; font-size: 8px; font-weight: 500; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.admin-table td { padding: 12px 10px; border-top: 1px solid rgba(195,173,223,.1); color: #c3bbce; font-size: 10px; vertical-align: middle; }
.admin-table td strong, .admin-table td small { display: block; }
.admin-table td strong { color: #e9e3f0; font-size: 11px; }
.admin-table td small { max-width: 240px; margin-top: 4px; overflow: hidden; color: #91889a; text-overflow: ellipsis; white-space: nowrap; }
.admin-table code { color: #c5a5e9; }
.row-actions { display: flex; gap: 12px; white-space: nowrap; }
.row-actions a, .danger-link { padding: 0; border: 0; color: #cfb7ee; background: transparent; font-size: 10px; }
.row-actions a:hover { color: #fff; }.danger-link { color: #f08ca1; }.danger-link:hover { color: #ffb9c8; }
.enquiry-list { display: grid; gap: 12px; }
.enquiry-card { padding: 17px; border: 1px solid rgba(194,171,223,.12); border-radius: 10px; background: rgba(10,9,15,.49); }
.enquiry-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.enquiry-heading h3 { margin: 0 0 4px; font-size: 14px; }
.enquiry-heading a, .enquiry-heading span { color: #c4a5ec; font-size: 10px; }
.enquiry-heading time { color: #847b8d; font-family: "Consolas",monospace; font-size: 9px; }
.enquiry-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.enquiry-meta span { padding: 3px 7px; border-radius: 5px; color: #ab9bbd; background: rgba(140,92,180,.12); font-size: 9px; }
.enquiry-card > p { margin: 12px 0; color: #cdc6d5; font-size: 11px; line-height: 1.75; overflow-wrap: anywhere; }
.status-form { margin-top: 12px; display: flex; gap: 8px; }
.status-form select { width: 150px; height: 35px; padding-block: 0; font-size: 10px; background-position: calc(100% - 15px) 14px,calc(100% - 10px) 14px; }
.settings-form { max-width: 650px; display: grid; gap: 14px; }
.settings-form .field { max-width: 470px; }
.settings-form h3 { margin: 12px 0 -6px; font-size: 13px; }
.settings-form > p { margin: 0; color: var(--muted); font-size: 10px; }

@media (max-width: 980px) {
  .hero-section { grid-template-columns: 1fr .9fr; gap: 24px; }
  .hero-copy h1 { font-size: clamp(48px,6.7vw,68px); }
  .hero-art-panel { min-height: 412px; }
  .hero-orbit { width: 340px; }
  .hero-sculpture { transform: translate(-50%,-53%) rotate(-13deg) scale(.86); }
  .type-card { padding: 13px; gap: 10px; }
  .type-card strong { font-size: 11px; }
  .library-controls { grid-template-columns: minmax(180px,1fr) 180px 170px auto; }
  .detail-layout { gap: 34px; }
  .footer-main { grid-template-columns: 1.5fr repeat(2,1fr); row-gap: 25px; }
  .footer-brand { grid-row: span 2; }
  .admin-shell { grid-template-columns: 190px minmax(0,1fr); gap: 20px; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 740px) {
  .wrap { width: min(100% - 34px, 620px); }
  .header-inner { min-height: 69px; }
  .brand-mark { width: 34px; height: 36px; font-size: 37px; }
  .menu-toggle { width: 41px; height: 41px; padding: 9px; display: grid; align-content: center; gap: 6px; border: 1px solid var(--border); border-radius: 10px; background: rgba(22,18,30,.95); }
  .menu-toggle span { width: 100%; height: 1px; display: block; background: #e5d8f5; transition: transform .18s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .main-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; padding: 8px 17px 17px; display: none; align-items: stretch; gap: 0; border-bottom: 1px solid var(--border); background: rgba(10,8,14,.98); box-shadow: 0 20px 35px rgba(0,0,0,.38); }
  .main-nav.is-open { display: flex; flex-direction: column; }
  .main-nav > a:not(.button) { padding: 12px 4px; border-bottom: 1px solid rgba(198,174,229,.09); }
  .main-nav .nav-cta { margin-top: 12px; }
  .flash { width: calc(100% - 34px); }
  .hero-section { min-height: 0; padding-top: 49px; padding-bottom: 31px; grid-template-columns: 1fr; gap: 27px; }
  .hero-copy { padding: 0; }
  .hero-copy h1 { margin: 18px 0 14px; font-size: clamp(49px,13vw,73px); }
  .hero-lede { max-width: 570px; font-size: 14px; }
  .hero-search { height: 54px; }
  .hero-art-panel { min-height: 340px; }
  .hero-orbit { width: 330px; height: 125px; }
  .hero-sculpture { transform: translate(-50%,-53%) rotate(-13deg) scale(.8); }
  .type-strip { margin-top: 0; margin-bottom: 34px; grid-template-columns: repeat(2,1fr); gap: 9px; }
  .type-card { min-height: 80px; padding: 11px; }
  .type-icon { width: 33px; height: 33px; flex-basis: 33px; }
  .type-card small { font-size: 9px; }
  .type-arrow { display: none; }
  .section { padding-bottom: 54px; }
  .section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .section-heading h2, .quote-intro h2 { font-size: 33px; }
  .resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .resource-art { height: 160px; }
  .resource-card-copy { padding: 12px; }
  .card-meta { display: block; font-size: 8px; line-height: 1.7; }
  .card-meta span:last-child { display: block; }
  .resource-card-copy h3 { margin-right: 25px; font-size: 13px; }
  .resource-card-copy p { min-height: 54px; font-size: 10px; }
  .resource-card > .favorite-toggle { top: 9px; right: 9px; width: 32px; height: 32px; font-size: 16px; }
  .resource-type-pill { bottom: 9px; left: 9px; padding: 4px 6px; font-size: 7px; }
  .empty-panel { align-items: start; flex-wrap: wrap; padding: 19px; gap: 13px; }
  .empty-panel > div { flex: 1 1 180px; }
  .empty-panel .text-link, .empty-panel .button { margin-left: 59px; }
  .services-teaser { min-height: 420px; margin-bottom: 48px; padding: 28px; grid-template-columns: 1fr; align-content: start; }
  .services-teaser-copy { max-width: 440px; }
  .services-teaser p { max-width: 380px; font-size: 12px; }
  .teaser-art { top: auto; right: 4%; bottom: 0; width: 245px; height: 210px; transform: none; opacity: .84; }
  .teaser-loop { width: 220px; height: 73px; }
  .teaser-petal { width: 70px; height: 100px; }
  .category-list { grid-template-columns: repeat(2,1fr); }
  .category-link { min-height: 55px; padding-inline: 6px; font-size: 10px; }
  .page-intro { min-height: 245px; padding-top: 53px; padding-bottom: 34px; align-items: start; flex-direction: column; gap: 22px; }
  .page-intro h1 { margin: 10px 0 8px; font-size: 44px; }
  .page-intro p { font-size: 12px; }
  .intro-note { min-width: 0; padding-left: 12px; font-size: 9px; }
  .intro-note-number { font-size: 19px; }
  .library-controls { grid-template-columns: 1fr 1fr; gap: 8px; }
  .search-field { grid-column: 1 / -1; }
  .library-controls > .button { min-height: 45px; }
  .select-field select { height: 45px; font-size: 10px; }
  .filter-row { gap: 6px; }
  .chip { min-height: 29px; padding: 4px 9px; font-size: 9px; }
  .results-bar { margin-top: 6px; }
  .detail-section { padding-top: 34px; padding-bottom: 42px; }
  .detail-layout { margin-top: 19px; grid-template-columns: 1fr; gap: 23px; }
  .detail-art { position: relative; top: auto; min-height: 330px; }
  .detail-art.has-image img { min-height: 330px; }
  .detail-copy { padding-top: 0; }
  .detail-copy h1 { font-size: 38px; }
  .services-hero { padding-top: 43px; grid-template-columns: 1fr; gap: 25px; }
  .services-hero-copy h1 { font-size: clamp(48px,12vw,68px); }
  .services-hero-copy > p { font-size: 13px; }
  .services-hero-art { height: 335px; }
  .service-grid { grid-template-columns: repeat(2,1fr); gap: 9px; }
  .service-card { min-height: 220px; padding: 15px; }
  .service-card-top { margin-bottom: 17px; }
  .service-card h3 { font-size: 14px; }
  .service-card p { font-size: 10px; }
  .service-card .text-link { font-size: 9px; }
  .portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .portfolio-visual { height: 150px; }
  .portfolio-copy { padding: 12px; }
  .portfolio-copy h3 { font-size: 12px; }
  .portfolio-copy p { font-size: 10px; }
  .quote-section { padding-top: 34px; grid-template-columns: 1fr; gap: 24px; }
  .quote-intro { position: static; }
  .quote-intro h2 { font-size: 37px; }
  .quote-intro > p { margin: 10px 0 20px; }
  .form-card { padding: 17px; }
  .form-grid { gap: 12px 9px; }
  .field { font-size: 10px; }
  .field input, .field textarea, .field select { padding-inline: 9px; font-size: 11px; }
  .about-body { padding-bottom: 42px; grid-template-columns: 1fr; gap: 24px; }
  .about-statement { padding: 23px; }
  .about-statement h2 { font-size: 32px; }
  .contact-band { margin-bottom: 55px; padding: 22px; align-items: start; flex-direction: column; }
  .contact-band h2 { font-size: 28px; }
  .contact-layout { padding-bottom: 60px; grid-template-columns: 1fr; gap: 15px; }
  .legal-page { min-height: 68vh; padding-top: 58px; padding-bottom: 60px; }
  .legal-page h1, .not-found h1 { font-size: 46px; }
  .legal-content p { font-size: 12px; }
  .footer-main { padding-top: 32px; padding-bottom: 25px; grid-template-columns: repeat(2,1fr); gap: 23px 18px; }
  .footer-brand { grid-column: 1 / -1; grid-row: auto; }
  .footer-bottom { min-height: 60px; align-items: start; justify-content: center; flex-direction: column; gap: 5px; padding-top: 9px; padding-bottom: 9px; font-size: 8px; }
  .setup-screen { min-height: 70vh; padding-top: 55px; padding-bottom: 55px; }
  .setup-card { padding: 23px; }
  .setup-card h1 { font-size: 36px; }

  .admin-topbar { position: relative; }
  .admin-topbar-inner { width: calc(100% - 30px); min-height: 65px; }
  .admin-top-actions { gap: 9px; }
  .admin-welcome, .admin-top-actions > .text-link { display: none; }
  .admin-shell { width: calc(100% - 28px); padding-top: 17px; grid-template-columns: 1fr; gap: 19px; }
  .admin-sidebar { padding: 0 0 10px; overflow-x: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--border); }
  .admin-sidebar > .eyebrow { display: none; }
  .admin-nav-link { min-height: 39px; flex: 0 0 auto; padding-inline: 10px; font-size: 10px; }
  .admin-nav-icon { width: auto; }
  .admin-content { min-width: 0; }
  .admin-page-heading { min-height: 50px; }
  .admin-page-heading h1 { font-size: 26px; }
  .metric-grid { gap: 8px; }
  .metric-card { min-height: 104px; padding: 12px; }
  .metric-card strong { font-size: 27px; }
  .admin-two-col { grid-template-columns: 1fr; gap: 2px; }
  .admin-panel { padding: 14px; }
  .admin-form { padding: 16px; }
  .admin-form .form-grid { grid-template-columns: 1fr; }
  .admin-form .field-wide { grid-column: auto; }
  .admin-table { min-width: 560px; }
  .auth-card { padding: 23px; }
}

@media (max-width: 390px) {
  .wrap { width: calc(100% - 28px); }
  .brand-copy strong { font-size: 11px; }
  .hero-copy h1 { font-size: 48px; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-art { height: 205px; }
  .resource-card-copy p { min-height: 0; }
  .type-card { gap: 8px; }
  .type-card strong { font-size: 10px; }
  .type-card small { font-size: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .service-grid, .portfolio-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 190px; }
}

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

/* Visulora-inspired editorial layout and theme switch */
:root { --bg:#0b0b0d; --bg-soft:#101013; --panel:#141417; --panel-raised:#1a1a1f; --panel-light:#222228; --border:rgba(255,255,255,.11); --border-strong:rgba(154,130,255,.58); --text:#f2f1f5; --muted:#aaa8b2; --quiet:#777580; --purple:#8e72ff; --purple-light:#aa95ff; --purple-deep:#674bdd; --radius:13px; --radius-sm:9px; --shadow:0 20px 60px rgba(0,0,0,.3); }
body { background:var(--bg); }
body::before { display:none; }
.site-header { background:color-mix(in srgb,var(--bg) 94%,transparent); border-bottom-color:var(--border); }
.header-inner { width:min(1680px,calc(100% - 64px)); min-height:76px; gap:24px; }
.brand-logo { width:52px; height:52px; }
.header-search { min-width:170px; width:min(31vw,390px); height:40px; padding:0 12px; display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:9px; color:var(--muted); background:var(--panel); }
.header-search > span { font-size:23px; line-height:1; }
.header-search input { width:100%; min-width:0; border:0; outline:0; color:var(--text); background:transparent; font-size:13px; }
.header-search input::placeholder { color:var(--quiet); }
.main-nav { margin-right:auto; gap:clamp(13px,1.7vw,25px); }
.main-nav > a:not(.button) { color:var(--muted); font-size:13px; }
.main-nav > a.is-active:not(.button)::after { display:none; }
.main-nav > a:not(.button):hover,.main-nav > a.is-active { color:var(--purple-light); }
.header-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.theme-toggle,.instagram-link { width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:9px; color:var(--muted); background:transparent; }
.theme-toggle:hover,.instagram-link:hover { color:var(--text); background:var(--panel-raised); }
.theme-toggle svg,.instagram-link svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.theme-moon { display:none; }
html[data-theme="light"] .theme-sun { display:none; } html[data-theme="light"] .theme-moon { display:block; }
.header-signup { border-color:var(--border); }
.header-login { color:#fff; background:#8e72ff; box-shadow:none; }
.button { border-radius:9px; }
.button-quiet { color:var(--text); border-color:var(--border); background:transparent; }
.button-primary { background:#8e72ff; box-shadow:none; }
.button-primary:hover { background:#a18aff; box-shadow:none; }
.wrap { width:min(1360px,calc(100% - 72px)); }
.home-intro { padding-top:58px; padding-bottom:8px; text-align:center; }
.home-intro h1 { margin:13px 0 8px; font-size:clamp(38px,5vw,62px); letter-spacing:-.055em; line-height:1.08; }
.home-intro h1 span { color:var(--purple-light); }
.home-intro > p { margin:0 auto 18px; color:var(--muted); font-size:15px; }
.home-intro .eyebrow { justify-content:center; color:var(--muted); }
.hero-search { border-color:var(--border); border-radius:10px; background:var(--panel); box-shadow:none; }
.home-search { width:min(560px,100%); height:48px; margin:0 auto; padding:4px; }
.home-search button { width:40px; height:38px; border-radius:7px; }
.hero-search input { color:var(--text); }
.hero-tags { justify-content:center; margin:14px auto 0; }
.chip { min-height:34px; padding:6px 14px; border-color:var(--border); border-radius:999px; color:var(--muted); background:transparent; font-size:12px; }
.chip:hover,.chip.is-selected { border-color:var(--border-strong); color:var(--text); background:color-mix(in srgb,var(--purple) 15%,transparent); }
.car-showcase { padding-top:20px; padding-bottom:26px; }
.hero-art-panel.hero-car-panel { width:min(1020px,100%); min-height:440px; margin:0 auto; border:1px solid var(--border); border-radius:14px; background:radial-gradient(ellipse at 50% 58%,rgba(122,109,158,.16),transparent 58%),#101013; box-shadow:none; }
.hero-car-panel::before { inset:14px; border-color:rgba(255,255,255,.08); border-radius:9px; }
.hero-car-image { object-fit:contain; padding:18px 50px 23px; }
.hero-car-tag { top:28px; left:30px; border-color:var(--border); border-radius:6px; color:var(--muted); background:rgba(11,11,13,.62); }
.hero-car-panel .art-caption { right:32px; bottom:25px; left:32px; color:#aaa8b2; }
.home-library { padding-top:20px; padding-bottom:62px; }
.home-library .section-heading { margin-bottom:16px; }
.home-library .section-heading h2,.page-intro h1 { font-size:clamp(28px,3.5vw,40px); letter-spacing:-.045em; }
.category-chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 23px; }
.resource-grid { gap:16px; }
.resource-card { border-color:var(--border); border-radius:11px; background:var(--panel); box-shadow:none; }
.resource-card:hover { border-color:var(--border-strong); box-shadow:0 12px 28px rgba(0,0,0,.2); }
.resource-art { height:250px; }
.resource-card-copy { padding:15px 16px 17px; }
.resource-card-copy h3 { font-size:15px; }
.resource-card-copy p { color:var(--muted); }
.page-intro { min-height:0; padding-top:45px; padding-bottom:22px; }
.page-intro h1 { margin:10px 0 7px; }
.page-intro p { color:var(--muted); }
.intro-note { display:none; }
.explore-car-showcase { padding-top:0; padding-bottom:25px; }
.explore-car-showcase .hero-art-panel.hero-car-panel { min-height:355px; width:min(1020px,100%); }
.library-section { padding-bottom:70px; }
.library-controls { grid-template-columns:minmax(220px,1fr) 210px 180px auto; gap:9px; }
.search-field,.select-field select { border-color:var(--border); border-radius:9px; background-color:var(--panel); }
.filter-row { padding-top:7px; }
.results-bar { color:var(--muted); }
.services-teaser { border-color:var(--border); border-radius:14px; background:var(--panel); box-shadow:none; }
.site-footer { border-top:1px solid var(--border); }

html[data-theme="light"] { color-scheme:light; --bg:#f7f7f9; --bg-soft:#f0f0f3; --panel:#fff; --panel-raised:#f0eff4; --panel-light:#eae9ef; --border:rgba(25,24,34,.13); --border-strong:rgba(103,75,221,.45); --text:#1d1c22; --muted:#686773; --quiet:#8b8994; --purple:#7256df; --purple-light:#674bdd; --purple-deep:#5035bd; --shadow:0 14px 40px rgba(30,25,54,.09); }
html[data-theme="light"] body,html[data-theme="light"] .site-header { background:var(--bg); }
html[data-theme="light"] .header-search,html[data-theme="light"] .search-field,html[data-theme="light"] .select-field select,html[data-theme="light"] .hero-search { background:#fff; }
html[data-theme="light"] .resource-card,html[data-theme="light"] .services-teaser { background:#fff; }
html[data-theme="light"] .hero-art-panel.hero-car-panel { border-color:var(--border); background:radial-gradient(ellipse at 50% 58%,rgba(132,113,213,.13),transparent 58%),#ecebf1; }
html[data-theme="light"] .hero-car-image { filter:drop-shadow(0 14px 21px rgba(0,0,0,.2)); }
html[data-theme="light"] .hero-car-tag { color:#4f4c58; background:rgba(255,255,255,.8); }
html[data-theme="light"] .hero-car-panel .art-caption { color:#55525e; text-shadow:0 1px 5px rgba(255,255,255,.8); }
html[data-theme="light"] .chip { color:var(--muted); }
html[data-theme="light"] .chip:hover,html[data-theme="light"] .chip.is-selected { color:#3d2a99; }
html[data-theme="light"] .button-quiet { color:var(--text); background:#fff; }
html[data-theme="light"] .main-nav > a:not(.button) { color:var(--muted); }
html[data-theme="light"] .main-nav > a.is-active:not(.button),html[data-theme="light"] .main-nav > a:not(.button):hover { color:var(--purple-deep); }

@media (max-width:980px) {
  .header-inner { width:calc(100% - 38px); gap:13px; }
  .header-search { width:min(27vw,300px); }
  .main-nav { gap:12px; }
  .header-actions { gap:5px; }
  .wrap { width:calc(100% - 48px); }
  .hero-art-panel.hero-car-panel { min-height:390px; }
}
@media (max-width:740px) {
  .header-inner { width:calc(100% - 30px); min-height:65px; gap:10px; }
  .brand-logo { width:44px; height:44px; }
  .header-search { position:absolute; top:calc(100% + 8px); left:15px; z-index:2; width:calc(100% - 30px); height:39px; }
  .site-header { margin-bottom:48px; }
  .header-actions { margin-left:auto; gap:3px; }
  .header-actions .header-signup { display:none; }
  .header-actions .header-login { min-height:34px; padding-inline:11px; }
  .theme-toggle,.instagram-link { width:34px; height:34px; }
  .menu-toggle { order:5; width:36px; height:36px; padding:8px; background:var(--panel); }
  .menu-toggle span { background:var(--text); }
  .main-nav { top:calc(100% + 48px); background:var(--bg); }
  .main-nav.is-open { z-index:4; }
  .main-nav > a:not(.button) { color:var(--text); }
  .home-intro { padding-top:34px; }
  .home-intro h1 { font-size:39px; }
  .home-intro > p { font-size:13px; }
  .wrap { width:calc(100% - 34px); }
  .car-showcase { padding-top:13px; padding-bottom:15px; }
  .hero-art-panel.hero-car-panel,.explore-car-showcase .hero-art-panel.hero-car-panel { min-height:270px; border-radius:10px; }
  .hero-car-image { padding:22px 15px 25px; }
  .hero-car-tag { top:19px; left:20px; padding:6px 8px; font-size:8px; }
  .hero-car-panel .art-caption { right:22px; bottom:20px; left:22px; font-size:7px; }
  .category-chips { margin-bottom:17px; }
  .home-library { padding-top:14px; padding-bottom:40px; }
  .resource-art { height:180px; }
  .page-intro { padding-top:30px; padding-bottom:16px; }
  .page-intro h1 { font-size:35px; }
  .explore-car-showcase { padding-bottom:16px; }
  .library-controls { grid-template-columns:1fr 1fr; }
  .library-controls .search-field { grid-column:1/-1; }
  .site-header .main-nav { z-index:31; }
}
@media (max-width:390px) {
  .header-actions .header-login { padding-inline:8px; font-size:10px; }
  .home-intro h1 { font-size:34px; }
  .hero-art-panel.hero-car-panel,.explore-car-showcase .hero-art-panel.hero-car-panel { min-height:230px; }
}
.select-field select { color:var(--text); }
.select-field select option { color:var(--text); background:var(--panel); }
html[data-theme="light"] .select-field select { color:#292832; }
html[data-theme="light"] .select-field select option { color:#292832; background:#fff; }
.mobile-account-links { display:none; }
.header-logout { margin:0; }
.account-page { min-height:64vh; padding-top:55px; padding-bottom:80px; display:grid; place-items:start center; }
.account-card { width:min(100%,500px); padding:32px; border:1px solid var(--border); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); }
.account-tabs { margin:-3px 0 27px; padding:4px; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--border); border-radius:10px; background:var(--bg-soft); }
.account-tabs a { padding:8px; border-radius:7px; color:var(--muted); text-align:center; font-size:13px; }
.account-tabs a.is-current { color:var(--text); background:var(--panel-raised); }
.account-card h1 { margin:12px 0 8px; font-size:clamp(34px,6vw,44px); letter-spacing:-.06em; line-height:1.05; }
.account-lede,.account-welcome>p { margin:0 0 23px; color:var(--muted); font-size:14px; }
.account-form { display:grid; gap:15px; }
.account-form .field { display:grid; gap:7px; }
.account-form input { min-height:46px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--bg-soft); }
.account-form .field small { color:var(--quiet); font-size:11px; }
.account-submit { width:100%; margin-top:3px; }
.account-privacy { margin:20px 0 0; color:var(--quiet); font-size:11px; line-height:1.65; }
.account-benefits { margin:23px 0; padding:17px; display:grid; gap:10px; border:1px solid var(--border); border-radius:10px; color:var(--muted); font-size:13px; }
.account-welcome .button-row { margin-top:7px; }
.member-gate { margin-top:22px; padding:24px; display:flex; align-items:flex-start; gap:18px; border:1px solid var(--border-strong); border-radius:13px; background:color-mix(in srgb,var(--purple) 8%,var(--panel)); }
.member-gate-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:12px; color:var(--purple-light); background:color-mix(in srgb,var(--purple) 15%,transparent); font-size:20px; }
.member-gate h2 { margin:8px 0; font-size:24px; letter-spacing:-.04em; }
.member-gate p { max-width:480px; margin:0 0 18px; color:var(--muted); font-size:13px; }
.signup-modal { width:min(470px,calc(100% - 30px)); padding:31px; border:1px solid var(--border-strong); border-radius:16px; color:var(--text); background:var(--panel); box-shadow:0 30px 100px rgba(0,0,0,.55); }
.signup-modal::backdrop { background:rgba(3,3,6,.74); backdrop-filter:blur(4px); }
.signup-modal-close { position:absolute; top:10px; right:11px; }
.signup-modal-close button { width:34px; height:34px; border:1px solid var(--border); border-radius:50%; color:var(--muted); background:transparent; font-size:22px; }
.signup-modal h2 { margin:15px 0 8px; font-size:29px; letter-spacing:-.05em; }
.signup-modal p { margin:0 0 21px; color:var(--muted); font-size:14px; }
html[data-theme="light"] .account-form input { color:#25242c; background:#fff; }
html[data-theme="light"] .account-tabs { background:#f1f0f5; }
html[data-theme="light"] .account-tabs a.is-current { background:#fff; }
@media (max-width:740px) {
  .mobile-account-links { padding:4px 4px 7px; display:flex; gap:11px; }
  .mobile-account-links a { padding:9px 13px; border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:12px; }
  .account-page { min-height:58vh; padding-top:26px; padding-bottom:45px; }
  .account-card { padding:23px; }
  .member-gate { padding:17px; gap:12px; }
  .member-gate h2 { font-size:21px; }
  .signup-modal { padding:25px; }
}
.account-honeypot { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
.account-terms { display:flex; align-items:flex-start; gap:9px; color:var(--muted); font-size:12px; line-height:1.5; }
.account-terms input { width:16px; height:16px; min-height:0; flex:0 0 16px; margin:1px 0 0; accent-color:var(--purple); }
.account-terms a { color:var(--purple-light); text-decoration:underline; text-underline-offset:2px; }
.member-label { display:inline-block; color:var(--purple-light); font-weight:700; letter-spacing:.06em; }

/* Full-width, wheel-motion car showcase and wider desktop canvas */
.wrap { width:min(1600px,calc(100% - 64px)); }
.hero-art-panel.hero-car-panel { width:100%; min-height:0; aspect-ratio:2.15 / 1; }
.hero-car-panel::before { z-index:6; }
.hero-car-visual { position:absolute; inset:0; z-index:1; transform-style:preserve-3d; transform-origin:center 58%; animation:hero-car-drive 5.2s cubic-bezier(.45,.05,.55,.95) infinite; }
.hero-car-image { inset:0; width:100%; height:100%; padding:0; object-fit:cover; object-position:center 56%; animation:none; }
.hero-car-wheel { position:absolute; z-index:2; display:block; aspect-ratio:1; border:1px solid rgba(238,230,255,.34); border-radius:50%; background:radial-gradient(circle,transparent 0 48%,rgba(220,208,244,.12) 49% 51%,transparent 52%); box-shadow:0 0 11px rgba(178,139,237,.24); transform:translate(-50%,-50%); pointer-events:none; }
.hero-car-wheel::before { position:absolute; inset:12%; border:1px solid rgba(222,210,245,.34); border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(240,233,255,.58) 0deg 1deg,transparent 1deg 29deg,rgba(240,233,255,.3) 29deg 30deg,transparent 30deg 45deg); -webkit-mask:radial-gradient(circle,transparent 0 16%,#000 18% 67%,transparent 69%); mask:radial-gradient(circle,transparent 0 16%,#000 18% 67%,transparent 69%); animation:hero-wheel-spin .42s linear infinite; opacity:.66; mix-blend-mode:screen; content:""; }
.wheel-front { left:45.3%; top:69.2%; width:14%; }
.wheel-rear { left:88.5%; top:52.7%; width:12.3%; }
.hero-car-road { position:absolute; z-index:2; right:7%; bottom:13%; left:7%; height:2px; background:repeating-linear-gradient(90deg,transparent 0 5%,rgba(250,244,255,.66) 5% 9%,transparent 9% 17%); filter:drop-shadow(0 0 5px rgba(183,139,241,.8)); opacity:.45; animation:hero-road-loop .72s linear infinite; pointer-events:none; }
.hero-car-sweep { z-index:3; }
.hero-car-scan { z-index:3; }
.hero-car-spark { z-index:4; }
.hero-car-tag,.hero-car-panel .art-caption { z-index:5; }
@keyframes hero-wheel-spin { to { transform:rotate(360deg); } }
@keyframes hero-road-loop { to { background-position:180px 0; } }
@keyframes hero-car-drive { 0%,100% { transform:translate3d(-.55%,.45%,0) perspective(1100px) rotateY(-1.5deg) rotateX(.6deg) scale(1.015); } 50% { transform:translate3d(.6%,-.5%,0) perspective(1100px) rotateY(1.5deg) rotateX(-.6deg) scale(1.04); } }
@media (max-width:980px) {
  .wrap { width:calc(100% - 40px); }
  .hero-art-panel.hero-car-panel,.explore-car-showcase .hero-art-panel.hero-car-panel { min-height:0; aspect-ratio:2.15 / 1; }
}
@media (max-width:740px) {
  .wrap { width:calc(100% - 30px); }
  .hero-art-panel.hero-car-panel,.explore-car-showcase .hero-art-panel.hero-car-panel { min-height:0; aspect-ratio:16 / 9; border-radius:10px; }
  .hero-car-image { padding:0; object-position:center center; }
  .wheel-front { top:65.5%; }
  .wheel-rear { top:52%; }
  .hero-car-road { bottom:10%; }
}
@media (max-width:390px) {
  .wrap { width:calc(100% - 24px); }
}