/* ==========================================================================
   MAL OJO — LENSES
   Every alternative look is scoped under html[data-lens="…"].
   The Original (black & white) look lives in style.css.
   ========================================================================== */

/* ---------- Shared bits ---------- */
html:not([data-lens="original"]) .site-header { mix-blend-mode: normal; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
.eye .iris-extra { transform-box: view-box; transform-origin: 60px 40px; }
.eye .iris-extra * { vector-effect: non-scaling-stroke; }
.eye .eye-lashes { display: none; stroke: var(--eye-line); stroke-width: 3; stroke-linecap: round; fill: none; }

/* ---------- Transition veils ---------- */
#lens-veil { overflow: hidden; }
#lens-veil > * { position: absolute; }
.vl-lid { left: 0; right: 0; height: 50.5%; background: #0b0b0b; }
.vl-top { top: 0; }
.vl-bot { bottom: 0; }

.vl-trippy-clip { inset: 0; overflow: hidden; }
.vl-trippy {
  position: absolute; inset: -25%;
  background: conic-gradient(from 0deg, #ff00ff, #ffe600, #39ff14, #00ffff, #8a2be2, #ff00ff);
}
.vl-trippy::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(18,0,31,.0) 0 18px, rgba(18,0,31,.45) 18px 36px);
}

.vl-cyber {
  inset: 0; background: #0d0d0d; color: #00f0ff; padding: 14vh 8vw;
  font: 400 clamp(13px, 1.6vw, 18px)/1.7 "Share Tech Mono", ui-monospace, monospace; white-space: pre-wrap; text-transform: uppercase; letter-spacing: .06em;
}
.vl-cyber b { color: #fcee0a; font-weight: 400; }
.vl-cyber i { color: #ff003c; font-style: normal; }
.vl-cyber::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }

.vl-crt-bg { inset: 0; background: #050805; }
.vl-crt-line { left: 0; right: 0; top: 50%; height: 100vh; margin-top: -50vh; background: #eaffea; box-shadow: 0 0 40px 10px rgba(120,255,120,.7); }
.vl-crt-half { left: 0; right: 0; height: 50%; background: #050805; }
.vl-crt-half.t { top: 0; }
.vl-crt-half.b { bottom: 0; }

.vl-slice { left: -2%; width: 104%; }

.vl-acid { inset: -60%; background: repeating-conic-gradient(#000 0 25%, #e6ff00 0 50%) 0 0 / 90px 90px; }
.vl-smile { left: 50%; top: 50%; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; }
.vl-smile svg { width: 100%; height: 100%; }

.vl-dream { inset: 0; background: #000; color: #d9d9d9; display: grid; place-items: center; text-align: center; padding: 24px; font: italic 400 clamp(20px, 3vw, 34px)/1.3 "Times New Roman", Times, serif; }
.vl-dream small { display: block; margin-top: 1em; font: 13px Arial, sans-serif; letter-spacing: .3em; color: #555; font-style: normal; }

/* ==========================================================================
   TRIPPY — psychedelic liquid vision
   ========================================================================== */
html[data-lens="trippy"] {
  --bg: #12001f; --fg: #ffffff; --muted: rgba(255,255,255,.82); --line: rgba(255,255,255,.28); --soft: transparent;
  --dark-bg: transparent; --dark-fg: #ffffff; --dark-muted: rgba(255,255,255,.84); --dark-line: rgba(255,255,255,.28);
  --f-head: "Kablammo", "Righteous", system-ui, sans-serif;
  --f-body: "Righteous", system-ui, sans-serif;
  --img-filter: saturate(2.2) contrast(1.1);
  --tr-pink: #ff00ff; --tr-green: #39ff14; --tr-cyan: #00ffff; --tr-purple: #8a2be2; --tr-yellow: #ffe600;
  --tr-rainbow: linear-gradient(90deg, #ff00ff, #ffe600, #39ff14, #00ffff, #8a2be2, #ff00ff);
  --eye-white: #ffffff; --eye-line: #12001f; --eye-iris: #8a2be2; --eye-ring: #00ffff; --eye-pupil: #12001f; --eye-glint: #ffffff;
}
[data-lens="trippy"] body { background: #12001f; letter-spacing: .01em; }
[data-lens="trippy"] ::selection { background: #ff00ff; color: #fff; }
[data-lens="trippy"] .hero,
[data-lens="trippy"] .why,
[data-lens="trippy"] .section--dark,
[data-lens="trippy"] .site-footer { background: transparent; }

/* floating decor + fallback background */
.tr-fallback { position: absolute; inset: -50%; background: conic-gradient(from 0deg, #ff00ff, #ffe600, #39ff14, #00ffff, #8a2be2, #ff00ff); animation: spin 18s linear infinite; filter: blur(40px) saturate(1.4); }
.tr-floaters { position: absolute; inset: 0; overflow: hidden; }
.tr-float { position: absolute; left: var(--x); top: var(--y); width: var(--s); animation: trFloat var(--d) ease-in-out infinite alternate; animation-delay: var(--dl); filter: drop-shadow(0 0 14px rgba(255,0,255,.55)); opacity: .9; }
.tr-float svg { width: 100%; height: auto; display: block; overflow: visible; }
.tr-float.tr-eye { aspect-ratio: 3 / 2; }
.tr-float.tr-eye .eye { animation: trHue 7s linear infinite; }
@keyframes trFloat { from { transform: translate(0, 0) rotate(-12deg) scale(.95); } to { transform: translate(var(--dx), var(--dy)) rotate(14deg) scale(1.08); } }
@keyframes trHue { to { filter: hue-rotate(360deg); } }
@keyframes trSlide { to { background-position: 300% 0; } }
@keyframes trMorf { from { font-variation-settings: "MORF" 0; } to { font-variation-settings: "MORF" 60; } }
@keyframes trBlob {
  0%, 100% { border-radius: 64px 140px 90px 160px / 120px 80px 150px 70px; }
  33% { border-radius: 150px 70px 140px 80px / 80px 150px 70px 130px; }
  66% { border-radius: 90px 160px 70px 130px / 150px 90px 120px 100px; }
}
@keyframes trBreathe { 0%, 100% { transform: scale(1) skewY(0deg); } 50% { transform: scale(1.012) skewY(-.6deg); } }

/* header */
[data-lens="trippy"] .site-header { background: linear-gradient(180deg, rgba(18,0,31,.75), rgba(18,0,31,0)); color: #fff; }
[data-lens="trippy"] .logo-word { font-family: "Righteous", sans-serif; letter-spacing: .08em; }
[data-lens="trippy"] .logo-word b { font-weight: 400; background: var(--tr-rainbow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: trSlide 6s linear infinite; }
[data-lens="trippy"] .logo-eye, [data-lens="trippy"] .lens-fab { --eye-white: #fff; --eye-line: #12001f; --eye-iris: #ff00ff; --eye-ring: #39ff14; --eye-pupil: #12001f; --eye-glint: #fff; }
[data-lens="trippy"] .site-nav a, [data-lens="trippy"] .header-mail { font-family: "Righteous", sans-serif; font-weight: 400; letter-spacing: .08em; }
[data-lens="trippy"] .site-nav a:hover, [data-lens="trippy"] .header-mail:hover { color: var(--tr-green); }

/* eye variant */
[data-lens="trippy"] .eye .iris-spiral { display: inline; stroke: #39ff14; stroke-width: 3; fill: none; animation: spin 3.5s linear infinite, trHue 5s linear infinite; }
[data-lens="trippy"] .eye .iris-ring { stroke: #ffe600; stroke-width: 3; }
[data-lens="trippy"] .eye .pupil { r: 6; }

/* hero */
[data-lens="trippy"] .hero-meta { color: #fff; border-bottom: 2px dashed rgba(255,255,255,.4); font-family: "Righteous", sans-serif; font-weight: 400; }
[data-lens="trippy"] .hero-meta span:nth-child(2) { color: var(--tr-green); }
[data-lens="trippy"] .hero-meta span:nth-child(3) { color: var(--tr-cyan); }
[data-lens="trippy"] .hero-title { font-weight: 400; letter-spacing: 0; line-height: .92; text-transform: uppercase; }
[data-lens="trippy"] .hero-title.tr-warp { filter: url(#fx-warp); }
[data-lens="trippy"] .ht-line { animation: trMorf 2.6s ease-in-out infinite alternate, trHue 9s linear infinite; }
[data-lens="trippy"] .ht-1 { color: #fff; text-shadow: .025em .025em 0 #ff00ff, .05em .05em 0 #00ffff, .075em .075em 0 #39ff14, .1em .1em 0 #8a2be2; }
[data-lens="trippy"] .ht-2 { color: #ffe600; -webkit-text-stroke: 0; text-shadow: -.02em .02em 0 #ff00ff, -.04em .04em 0 #8a2be2; animation-delay: -1.3s, -3s; }
[data-lens="trippy"] .ht-eye .eye { filter: drop-shadow(.03em .03em 0 #ff00ff) drop-shadow(.03em .03em 0 #00ffff); }
[data-lens="trippy"] .hero-tagline { font-family: "Kablammo", sans-serif; font-weight: 400; font-size: clamp(24px, 2.6vw, 38px); background: var(--tr-rainbow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: trSlide 5s linear infinite, trMorf 3s ease-in-out infinite alternate; }
[data-lens="trippy"] .hero-copy { background: rgba(18,0,31,.55); padding: clamp(18px, 2.4vw, 32px); border-radius: 36px 90px 40px 110px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 0 50px rgba(138,43,226,.5); }
[data-lens="trippy"] .hero-intro { color: rgba(255,255,255,.88); }
[data-lens="trippy"] .hero-intro strong { color: var(--tr-green); font-weight: 400; }
[data-lens="trippy"] .hero-badge svg { animation-duration: 7s; }
[data-lens="trippy"] .hero-badge text { font-family: "Righteous", sans-serif; font-weight: 400; fill: #39ff14; letter-spacing: .18em; }
[data-lens="trippy"] .hero-badge { background: radial-gradient(circle, rgba(255,0,255,.55), rgba(138,43,226,.25) 60%, transparent 70%); }
[data-lens="trippy"] .scroll-cue { color: #fff; font-family: "Righteous", sans-serif; }

/* marquee */
[data-lens="trippy"] .marquee { background: linear-gradient(90deg, #ff00ff, #8a2be2, #00ffff, #39ff14, #ffe600, #ff00ff); background-size: 200% 100%; animation: trSlide 10s linear infinite; color: #12001f; font-family: "Kablammo", sans-serif; font-weight: 400; transform: rotate(-2deg) scale(1.04); box-shadow: 0 0 40px rgba(255,0,255,.6); }
[data-lens="trippy"] .marquee-track span { animation: trMorf 1.6s ease-in-out infinite alternate; }
[data-lens="trippy"] .marquee-track i { opacity: 1; color: #fff; }

/* section panels (liquid blobs) */
[data-lens="trippy"] .section { padding-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(60px, 8vw, 120px); }
[data-lens="trippy"] .section > .wrap {
  background: rgba(18, 0, 31, .62);
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  padding: clamp(28px, 5vw, 80px);
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 0 80px rgba(255,0,255,.28), inset 0 0 60px rgba(0,255,255,.08);
  animation: trBlob 16s ease-in-out infinite, trBreathe 9s ease-in-out infinite;
}
[data-lens="trippy"] .services > .wrap { animation-delay: -5s, -3s; }
[data-lens="trippy"] .why > .wrap { animation-delay: -9s, -6s; }
[data-lens="trippy"] .contact > .wrap { animation-delay: -12s, -1s; }
[data-lens="trippy"] .section-label { color: #39ff14; font-family: "Righteous", sans-serif; font-weight: 400; }
[data-lens="trippy"] .section-title {
  font-weight: 400; letter-spacing: 0; line-height: .98;
  background: var(--tr-rainbow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: trSlide 7s linear infinite, trMorf 3.2s ease-in-out infinite alternate;
  filter: drop-shadow(.04em .04em 0 rgba(18,0,31,.9));
}
[data-lens="trippy"] .section-intro, [data-lens="trippy"] .about-copy { color: rgba(255,255,255,.88); }
[data-lens="trippy"] .section-intro strong, [data-lens="trippy"] .about-copy strong { color: #ffe600; font-weight: 400; }
[data-lens="trippy"] .about-copy .lead { color: #fff; }
[data-lens="trippy"] .facts strong { font-weight: 400; color: #00ffff; animation: trMorf 2s ease-in-out infinite alternate; text-shadow: .05em .05em 0 #ff00ff; }
[data-lens="trippy"] .facts span, [data-lens="trippy"] .chips li { font-family: "Righteous", sans-serif; font-weight: 400; color: #fff; }
[data-lens="trippy"] .chips li { border: 2px solid transparent; background: linear-gradient(#240040, #240040) padding-box, var(--tr-rainbow) border-box; }
[data-lens="trippy"] .link-btn { color: #39ff14; font-weight: 400; }

/* services */
[data-lens="trippy"] .service-list { border-top: 0; display: grid; gap: 22px; }
[data-lens="trippy"] .service { border: 0; background: rgba(255,255,255,.05); border-radius: 44px; padding: clamp(20px, 3vw, 40px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
[data-lens="trippy"] .service-num { font-family: "Kablammo", sans-serif; font-weight: 400; font-size: clamp(34px, 4vw, 56px); padding: 0; color: #ff00ff; text-shadow: .06em .06em 0 #39ff14; line-height: 1; animation: trMorf 1.8s ease-in-out infinite alternate; }
[data-lens="trippy"] .service-title { font-weight: 400; letter-spacing: 0; color: #fff; text-shadow: .04em .04em 0 #8a2be2, .08em .08em 0 #00ffff; }
[data-lens="trippy"] .service-sub { color: #39ff14; font-family: "Righteous", sans-serif; font-weight: 400; }
[data-lens="trippy"] .service-body p { color: rgba(255,255,255,.86); }
[data-lens="trippy"] .service-cta { font-family: "Righteous", sans-serif; font-weight: 400; border: 0; padding: 10px 20px; border-radius: 999px; background: var(--tr-rainbow); background-size: 300% 100%; color: #12001f; animation: trSlide 5s linear infinite; }
[data-lens="trippy"] .service-media {
  background: #12001f; overflow: hidden;
  border-radius: 50% 50% 46% 54% / 56% 44% 56% 44%;
  box-shadow: 0 0 0 6px #ff00ff, 0 0 0 12px #ffe600, 0 0 0 18px #39ff14, 0 0 0 24px #00ffff, 0 0 60px 26px rgba(138,43,226,.7);
  animation: trBlob 11s ease-in-out infinite;
  margin: 24px;
}
[data-lens="trippy"] .service:nth-child(even) .service-media { animation-delay: -4s; }
[data-lens="trippy"] .media img { animation: trImg 6s linear infinite; }
@keyframes trImg { from { filter: saturate(2.4) contrast(1.1) hue-rotate(0deg); } to { filter: saturate(2.4) contrast(1.1) hue-rotate(360deg); } }

/* why */
[data-lens="trippy"] .why-grid { border-top: 0; gap: 20px; }
[data-lens="trippy"] .why-item, [data-lens="trippy"] .why-item:nth-child(even) { border: 0 !important; padding: clamp(24px, 3vw, 44px); border-radius: 40px 90px 40px 90px; background: rgba(255,255,255,.05); box-shadow: 0 0 0 2px rgba(255,255,255,.1); }
[data-lens="trippy"] .why-item:nth-child(2n) { border-radius: 90px 40px 90px 40px; }
[data-lens="trippy"] .why-num { font-family: "Kablammo", sans-serif; font-weight: 400; -webkit-text-stroke: 0; color: #ffe600; text-shadow: .05em .05em 0 #ff00ff, .1em .1em 0 #00ffff; animation: trMorf 2.2s ease-in-out infinite alternate; }
[data-lens="trippy"] .why-item h3 { font-weight: 400; font-family: "Kablammo", sans-serif; letter-spacing: 0; color: #00ffff; }
[data-lens="trippy"] .why-item p { color: rgba(255,255,255,.86); }

/* contact */
[data-lens="trippy"] .contact-kicker { color: #39ff14; font-family: "Righteous", sans-serif; font-weight: 400; }
[data-lens="trippy"] .contact-mail { font-family: "Kablammo", sans-serif; font-weight: 400; letter-spacing: 0; border-bottom: 0; }
[data-lens="trippy"] .contact-mail .fit-inner { background: var(--tr-rainbow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: trSlide 4s linear infinite, trMorf 2s ease-in-out infinite alternate; }
[data-lens="trippy"] .contact-row p { color: rgba(255,255,255,.86); }
[data-lens="trippy"] .btn { font-family: "Righteous", sans-serif; font-weight: 400; background: var(--tr-rainbow); background-size: 300% 100%; color: #12001f; border: 0; animation: trSlide 5s linear infinite; }
[data-lens="trippy"] .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #39ff14; }

/* footer */
[data-lens="trippy"] .footer-big { font-family: "Kablammo", sans-serif; font-weight: 400; letter-spacing: 0; -webkit-text-stroke: 0; color: transparent; background: var(--tr-rainbow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: trSlide 8s linear infinite, trMorf 3s ease-in-out infinite alternate; border-top: 0; opacity: .9; }
[data-lens="trippy"] .footer-row { color: #fff; font-family: "Righteous", sans-serif; }
[data-lens="trippy"] .footer-claim, [data-lens="trippy"] .footer-top { color: #39ff14; }

/* switcher */
[data-lens="trippy"] .lens-fab { background: #12001f; border: 0; box-shadow: 0 0 0 3px #ff00ff, 0 0 0 6px #39ff14, 0 0 30px rgba(255,0,255,.8); font-family: "Righteous", sans-serif; }
[data-lens="trippy"] .lens-fab::before { border-color: #39ff14; }
[data-lens="trippy"] .lens-fab-label { font-weight: 400; }
[data-lens="trippy"] .lens-panel { background: #1b0030; color: #fff; border: 0; border-radius: 28px; box-shadow: 0 0 0 3px #ff00ff, 0 0 0 6px #00ffff, 0 30px 80px rgba(138,43,226,.8); font-family: "Righteous", sans-serif; }
[data-lens="trippy"] .lens-panel-head, [data-lens="trippy"] .lens-panel-foot { border-color: rgba(255,255,255,.2); }
[data-lens="trippy"] .lens-panel-title { font-family: "Kablammo", sans-serif; font-weight: 400; background: var(--tr-rainbow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: trSlide 4s linear infinite; }
[data-lens="trippy"] .lens-panel-sub, [data-lens="trippy"] .lens-warning { color: rgba(255,255,255,.7); }
[data-lens="trippy"] .lens-close { background: transparent; color: #fff; border-color: #fff; }
[data-lens="trippy"] .lens-list li { border-color: rgba(255,255,255,.1); }
[data-lens="trippy"] .lens-opt:hover, [data-lens="trippy"] .lens-opt:focus-visible { background: linear-gradient(90deg, #ff00ff, #8a2be2); color: #fff; }
[data-lens="trippy"] .lo-text b { font-weight: 400; }
[data-lens="trippy"] .sound-toggle[aria-pressed="true"] { background: #39ff14; color: #12001f; }
[data-lens="trippy"] .lens-hint { background: #ffe600; border-color: #12001f; box-shadow: 4px 4px 0 #ff00ff; font-family: "Righteous", sans-serif; font-weight: 400; }

@media (max-width: 760px) {
  [data-lens="trippy"] .section > .wrap { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18, 0, 31, .78); animation: trBlob 16s ease-in-out infinite; }
  [data-lens="trippy"] .service-media { margin: 16px 18px; }
  [data-lens="trippy"] .hero-copy { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18,0,31,.75); }
}

/* ==========================================================================
   CYBERPUNK — high tech, low life
   ========================================================================== */
html[data-lens="cyberpunk"] {
  --bg: #0d0d0d; --fg: #e6fbff; --muted: #8fb4bf; --line: rgba(0,240,255,.28); --soft: transparent;
  --dark-bg: transparent; --dark-fg: #e6fbff; --dark-muted: #8fb4bf; --dark-line: rgba(0,240,255,.28);
  --f-head: "Rajdhani", "Share Tech Mono", system-ui, sans-serif;
  --f-body: "Share Tech Mono", ui-monospace, monospace;
  --img-filter: grayscale(1) contrast(1.35) brightness(.78);
  --cp-y: #fcee0a; --cp-c: #00f0ff; --cp-m: #ff003c; --cp-bg: #0d0d0d; --cp-panel: #0f1417;
  --cut: 18px;
  --eye-white: #0d0d0d; --eye-line: #00f0ff; --eye-iris: rgba(0,240,255,.12); --eye-ring: #00f0ff; --eye-pupil: #ff003c; --eye-glint: #fcee0a;
}
[data-lens="cyberpunk"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 110%, rgba(255,0,60,.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(0,240,255,.14), transparent 70%),
    #0d0d0d;
  background-attachment: fixed;
  font-size: clamp(14px, .25vw + 13px, 16px);
  letter-spacing: .01em;
}
[data-lens="cyberpunk"] ::selection { background: #fcee0a; color: #0d0d0d; }
[data-lens="cyberpunk"] .hero,
[data-lens="cyberpunk"] .why,
[data-lens="cyberpunk"] .section--dark,
[data-lens="cyberpunk"] .site-footer { background: transparent; }
[data-lens="cyberpunk"] a:hover, [data-lens="cyberpunk"] button:hover { animation: cpFlicker .6s steps(1) 1; }
@keyframes cpFlicker { 0%, 100% { opacity: 1; } 10% { opacity: .3; } 20% { opacity: 1; } 30% { opacity: .5; } 45% { opacity: 1; } 55% { opacity: .2; } 60% { opacity: 1; } }
@keyframes cpNeon { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .35; } }
@keyframes cpBlink { 50% { opacity: 0; } }
@keyframes cpScan { from { transform: translateY(-100%); } to { transform: translateY(100vh); } }

/* background rain + HUD */
.cp-rain { opacity: .42; }
.cp-city { position: absolute; left: 0; right: 0; bottom: 0; height: 32vh; opacity: .5;
  background:
    linear-gradient(to top, #0d0d0d 10%, transparent),
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,240,255,.08) 6px 7px);
  -webkit-mask: linear-gradient(to top, #000, transparent); mask: linear-gradient(to top, #000, transparent);
}
.cp-hud { position: absolute; inset: 0; font: 400 11px/1.5 "Share Tech Mono", ui-monospace, monospace; color: rgba(0,240,255,.85); text-transform: uppercase; letter-spacing: .1em; }
.cp-hud b { color: #fcee0a; font-weight: 400; }
.cp-ok { color: #39ff88 !important; animation: cpBlink 1.4s steps(1) infinite; }
.cp-blink { animation: cpBlink 1s steps(1) infinite; }
.cp-c { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(0,240,255,.7); }
.cp-c1 { left: 10px; top: calc(var(--header-h) + 6px); border-left-width: 2px; border-top-width: 2px; }
.cp-c2 { right: 10px; top: calc(var(--header-h) + 6px); border-right-width: 2px; border-top-width: 2px; }
.cp-c3 { left: 10px; bottom: 10px; border-left-width: 2px; border-bottom-width: 2px; }
.cp-c4 { right: 10px; bottom: 10px; border-right-width: 2px; border-bottom-width: 2px; }
.cp-tl { position: absolute; left: 22px; top: calc(var(--header-h) + 16px); }
.cp-tr { position: absolute; right: 22px; top: calc(var(--header-h) + 16px); text-align: right; }
.cp-bl { position: absolute; left: 22px; bottom: 20px; }
.cp-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.cp-scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18vh; background: linear-gradient(to bottom, transparent, rgba(0,240,255,.05), transparent); animation: cpScan 7s linear infinite; }
.cp-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); }
.cp-reticle { position: fixed; left: 0; top: 0; z-index: 110; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; border: 1px solid rgba(0,240,255,.8); border-radius: 50%; box-shadow: 0 0 12px rgba(0,240,255,.5), inset 0 0 8px rgba(0,240,255,.3); transition: width .2s, height .2s, margin .2s, border-color .2s; }
.cp-reticle::before, .cp-reticle::after { content: ""; position: absolute; background: #00f0ff; }
.cp-reticle::before { left: 50%; top: -8px; bottom: -8px; width: 1px; transform: translateX(-.5px); -webkit-mask: linear-gradient(#000 0 8px, transparent 8px calc(100% - 8px), #000 0); mask: linear-gradient(#000 0 8px, transparent 8px calc(100% - 8px), #000 0); }
.cp-reticle::after { top: 50%; left: -8px; right: -8px; height: 1px; transform: translateY(-.5px); -webkit-mask: linear-gradient(90deg, #000 0 8px, transparent 8px calc(100% - 8px), #000 0); mask: linear-gradient(90deg, #000 0 8px, transparent 8px calc(100% - 8px), #000 0); }
.cp-reticle.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: #ff003c; box-shadow: 0 0 16px rgba(255,0,60,.7); }
.cp-reticle span { position: absolute; left: calc(100% + 10px); top: 100%; font: 10px/1.3 "Share Tech Mono", monospace; color: #00f0ff; white-space: nowrap; letter-spacing: .08em; }
.cp-sign { position: absolute; z-index: 1; right: calc(var(--pad) + 10px); top: calc(var(--header-h) + 64px); writing-mode: vertical-rl; text-orientation: upright;
  font: 700 clamp(36px, 5.4vw, 86px)/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", "MS Gothic", sans-serif;
  color: #ffd2dc; padding: .25em .12em; border: 3px solid #ff003c; border-radius: 10px;
  text-shadow: 0 0 6px #ff003c, 0 0 18px #ff003c, 0 0 40px #ff003c;
  box-shadow: 0 0 12px #ff003c, inset 0 0 12px #ff003c, 0 0 60px rgba(255,0,60,.5);
  animation: cpNeon 5s linear infinite;
}
.cp-sign-2 { position: absolute; z-index: 1; right: calc(var(--pad) + clamp(70px, 8vw, 130px)); top: calc(var(--header-h) + 90px); writing-mode: vertical-rl;
  font: 700 clamp(14px, 1.4vw, 22px)/1 "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "MS Gothic", sans-serif; letter-spacing: .3em;
  color: #d8ffff; text-shadow: 0 0 6px #00f0ff, 0 0 16px #00f0ff; animation: cpNeon 3.7s linear infinite reverse;
}

/* header */
[data-lens="cyberpunk"] .site-header { background: rgba(13,13,13,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(0,240,255,.35); color: #e6fbff; }
[data-lens="cyberpunk"] .site-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 3px; background: #fcee0a; box-shadow: 0 0 10px #fcee0a; }
[data-lens="cyberpunk"] .logo-word { font-family: "Rajdhani", sans-serif; font-size: 17px; letter-spacing: .2em; }
[data-lens="cyberpunk"] .logo-word b { font-weight: 700; color: #fcee0a; text-shadow: 0 0 10px rgba(252,238,10,.5); }
[data-lens="cyberpunk"] .logo-word span { color: #00f0ff; font-weight: 500; }
[data-lens="cyberpunk"] .logo-eye, [data-lens="cyberpunk"] .lens-fab { --eye-white: #0d0d0d; --eye-line: #00f0ff; --eye-iris: rgba(0,240,255,.12); --eye-ring: #00f0ff; --eye-pupil: #ff003c; --eye-glint: #fcee0a; }
[data-lens="cyberpunk"] .site-nav a { font-family: "Share Tech Mono", monospace; font-weight: 400; color: #00f0ff; }
[data-lens="cyberpunk"] .site-nav a::before { content: "/"; color: #ff003c; margin-right: 4px; }
[data-lens="cyberpunk"] .header-mail { font-family: "Share Tech Mono", monospace; font-weight: 400; background: #fcee0a; color: #0d0d0d; padding: 8px 14px 8px 12px; clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 10px) 100%, 0 100%); }
[data-lens="cyberpunk"] .header-mail::after { display: none; }

/* eye variant: targeting reticle */
[data-lens="cyberpunk"] .eye .iris-reticle { display: inline; fill: none; stroke: #00f0ff; stroke-width: 2; animation: spin 6s linear infinite; }
[data-lens="cyberpunk"] .eye .iris-ring { display: none; }
[data-lens="cyberpunk"] .eye .pupil { r: 4.5; }
[data-lens="cyberpunk"] .eye .eye-line { stroke-width: 6; }
[data-lens="cyberpunk"] .eye { filter: drop-shadow(0 0 4px rgba(0,240,255,.8)); }

/* hero */
[data-lens="cyberpunk"] .hero-meta { font-family: "Share Tech Mono", monospace; font-weight: 400; color: #00f0ff; border-bottom: 1px dashed rgba(0,240,255,.45); }
[data-lens="cyberpunk"] .hero-meta span::before { content: "[ "; color: #ff003c; }
[data-lens="cyberpunk"] .hero-meta span::after { content: " ]"; color: #ff003c; }
[data-lens="cyberpunk"] .hero-title { font-weight: 700; letter-spacing: .01em; line-height: .84; position: relative; z-index: 2; }
[data-lens="cyberpunk"] .ht-1 { color: #fcee0a; text-shadow: 0 0 .03em rgba(252,238,10,.7), 0 0 .12em rgba(252,238,10,.35), .02em 0 0 rgba(255,0,60,.8); }
[data-lens="cyberpunk"] .ht-2 { color: transparent; -webkit-text-stroke: clamp(1px, .16vw, 3px) #00f0ff; text-shadow: 0 0 .04em rgba(0,240,255,.9), 0 0 .14em rgba(0,240,255,.45); }
[data-lens="cyberpunk"] .ht-eye .eye .eye-line { stroke-width: 9; }
[data-lens="cyberpunk"] .hero-tagline { font-family: "Rajdhani", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fcee0a; }
[data-lens="cyberpunk"] .hero-tagline::before { content: "> "; color: #ff003c; }
[data-lens="cyberpunk"] .hero-copy { position: relative; z-index: 2; }
[data-lens="cyberpunk"] .hero-intro { font-size: 14px; color: #8fb4bf; }
[data-lens="cyberpunk"] .hero-intro strong { color: #00f0ff; font-weight: 400; }
[data-lens="cyberpunk"] .hero-badge { border-radius: 0; z-index: 2; }
[data-lens="cyberpunk"] .hero-badge text { font-family: "Share Tech Mono", monospace; font-weight: 400; fill: #00f0ff; letter-spacing: .2em; }
[data-lens="cyberpunk"] .hero-badge svg { animation-duration: 12s; filter: drop-shadow(0 0 4px #00f0ff); }
[data-lens="cyberpunk"] .scroll-cue { color: #00f0ff; font-family: "Share Tech Mono", monospace; }

/* marquee: hazard tape */
[data-lens="cyberpunk"] .marquee { background: #fcee0a; color: #0d0d0d; font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: .06em; border-top: 6px solid #0d0d0d; border-bottom: 6px solid #0d0d0d; box-shadow: 0 0 30px rgba(252,238,10,.3); }
[data-lens="cyberpunk"] .marquee::before, [data-lens="cyberpunk"] .marquee::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(-45deg, #0d0d0d 0 8px, #fcee0a 8px 16px); }
[data-lens="cyberpunk"] .marquee::before { top: 0; }
[data-lens="cyberpunk"] .marquee::after { bottom: 0; }
[data-lens="cyberpunk"] .marquee-track i { opacity: 1; color: #ff003c; font-size: .8em; }
[data-lens="cyberpunk"] .marquee-track i::before { content: "//"; }
[data-lens="cyberpunk"] .marquee-track i { font-size: 0; }
[data-lens="cyberpunk"] .marquee-track i::before { font-size: clamp(22px, 3.4vw, 48px); }

/* clipped neon panels — shared recipe */
[data-lens="cyberpunk"] .about-grid,
[data-lens="cyberpunk"] .service,
[data-lens="cyberpunk"] .why-item,
[data-lens="cyberpunk"] .contact .wrap,
[data-lens="cyberpunk"] .service-media {
  position: relative; isolation: isolate;
  background: rgba(0,240,255,.55);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
[data-lens="cyberpunk"] .about-grid::before,
[data-lens="cyberpunk"] .service::before,
[data-lens="cyberpunk"] .why-item::before,
[data-lens="cyberpunk"] .contact .wrap::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(160deg, rgba(15,22,26,.97), rgba(10,12,14,.97));
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* sections */
[data-lens="cyberpunk"] .section-label { font-family: "Share Tech Mono", monospace; font-weight: 400; color: #00f0ff; }
[data-lens="cyberpunk"] .section-label::before { content: "//"; color: #ff003c; }
[data-lens="cyberpunk"] .section-label .sl-num { color: #ff003c; }
[data-lens="cyberpunk"] .section-label::after { background: linear-gradient(90deg, #00f0ff, transparent); flex-basis: 120px; opacity: 1; }
[data-lens="cyberpunk"] .section-title { font-weight: 700; letter-spacing: .01em; line-height: .88; color: #fcee0a; text-shadow: 0 0 22px rgba(252,238,10,.3), .03em 0 0 rgba(255,0,60,.6); }
[data-lens="cyberpunk"] .section-intro, [data-lens="cyberpunk"] .about-copy { color: #8fb4bf; font-size: clamp(14px, 1vw, 16px); }
[data-lens="cyberpunk"] .section-intro strong, [data-lens="cyberpunk"] .about-copy strong { color: #00f0ff; font-weight: 400; }

[data-lens="cyberpunk"] .about-grid { padding: clamp(24px, 4vw, 60px); }
[data-lens="cyberpunk"] .about-copy .lead { color: #e6fbff; font-family: "Rajdhani", sans-serif; font-weight: 500; font-size: clamp(22px, 2.2vw, 32px); }
[data-lens="cyberpunk"] .facts { border-color: rgba(0,240,255,.3); }
[data-lens="cyberpunk"] .facts strong { font-family: "Orbitron", sans-serif; font-weight: 900; color: #00f0ff; text-shadow: 0 0 14px rgba(0,240,255,.6); font-size: clamp(30px, 3vw, 46px); }
[data-lens="cyberpunk"] .facts span { font-family: "Share Tech Mono", monospace; font-weight: 400; color: #8fb4bf; }
[data-lens="cyberpunk"] .chips li { border-radius: 0; border-color: #ff003c; color: #ff003c; font-family: "Share Tech Mono", monospace; font-weight: 400; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); background: rgba(255,0,60,.08); }
[data-lens="cyberpunk"] .link-btn { color: #fcee0a; font-family: "Share Tech Mono", monospace; font-weight: 400; }

[data-lens="cyberpunk"] .service-list { border-top: 0; display: grid; gap: 18px; }
[data-lens="cyberpunk"] .service { border: 0; padding: clamp(20px, 2.6vw, 36px); --cut: 26px; }
[data-lens="cyberpunk"] .service:hover { background: #ff003c; }
[data-lens="cyberpunk"] .service-num { font-family: "Orbitron", sans-serif; font-weight: 900; font-size: clamp(22px, 2.2vw, 34px); color: #0d0d0d; background: #fcee0a; padding: 6px 10px; line-height: 1; justify-self: start; clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 0 100%); }
[data-lens="cyberpunk"] .service-title { font-weight: 700; letter-spacing: .01em; color: #00f0ff; text-shadow: 0 0 14px rgba(0,240,255,.5); }
[data-lens="cyberpunk"] .service-sub { font-family: "Share Tech Mono", monospace; font-weight: 400; color: #ff003c; }
[data-lens="cyberpunk"] .service-sub::before { content: "[ "; }
[data-lens="cyberpunk"] .service-sub::after { content: " ]"; }
[data-lens="cyberpunk"] .service-body p { color: #8fb4bf; font-size: 14px; }
[data-lens="cyberpunk"] .service-cta { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .12em; border: 0; background: #fcee0a; color: #0d0d0d; padding: 10px 18px; clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 12px) 100%, 0 100%); }
[data-lens="cyberpunk"] .service-media { --cut: 22px; background: #00f0ff; padding: 1px; }
[data-lens="cyberpunk"] .service-media img { clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 21px 100%, 0 calc(100% - 21px)); }
[data-lens="cyberpunk"] .media::before { content: ""; position: absolute; inset: 1px; z-index: 2; background: linear-gradient(135deg, #00f0ff, #ff003c); mix-blend-mode: color; opacity: .85; pointer-events: none; transition: opacity .3s; }
[data-lens="cyberpunk"] .media::after {
  content: "CAM_0" counter(cam) " // REC ●"; counter-increment: cam;
  position: absolute; inset: 1px; z-index: 3; padding: 10px 12px; pointer-events: none;
  font: 400 11px/1 "Share Tech Mono", monospace; letter-spacing: .12em; color: #fcee0a;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
[data-lens="cyberpunk"] .service-list { counter-reset: cam; }
[data-lens="cyberpunk"] .service:hover .media::after { content: "TARGET ACQUIRED ◎"; color: #ff003c; }
[data-lens="cyberpunk"] .service:hover .media::before { opacity: .45; }

[data-lens="cyberpunk"] .why-grid { border-top: 0; gap: 16px; }
[data-lens="cyberpunk"] .why-item, [data-lens="cyberpunk"] .why-item:nth-child(even) { border: 0 !important; padding: clamp(22px, 3vw, 40px); }
[data-lens="cyberpunk"] .why-num { font-family: "Orbitron", sans-serif; font-weight: 900; -webkit-text-stroke: 1.5px #fcee0a; color: transparent; text-shadow: 0 0 18px rgba(252,238,10,.35); font-size: clamp(44px, 4.4vw, 72px); }
[data-lens="cyberpunk"] .why-item h3 { font-weight: 700; color: #00f0ff; letter-spacing: .03em; }
[data-lens="cyberpunk"] .why-item p { color: #8fb4bf; font-size: 14px; }

[data-lens="cyberpunk"] .contact .wrap { padding: clamp(24px, 4vw, 64px); --cut: 34px; }
[data-lens="cyberpunk"] .contact-kicker { font-family: "Share Tech Mono", monospace; font-weight: 400; color: #ff003c; }
[data-lens="cyberpunk"] .contact-kicker::before { content: "> "; }
[data-lens="cyberpunk"] .contact-mail { font-weight: 700; letter-spacing: 0; color: #fcee0a; text-shadow: 0 0 .06em rgba(252,238,10,.6), 0 0 .2em rgba(252,238,10,.25); border-bottom-color: rgba(0,240,255,.3); }
[data-lens="cyberpunk"] .contact-row p { color: #8fb4bf; font-size: 14px; }
[data-lens="cyberpunk"] .btn { border-radius: 0; background: #fcee0a; color: #0d0d0d; border: 0; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .12em; clip-path: polygon(0 0, 100% 0, 100% 65%, calc(100% - 14px) 100%, 0 100%); }
[data-lens="cyberpunk"] .btn--ghost { background: rgba(0,240,255,.12); color: #00f0ff; box-shadow: inset 0 0 0 1px #00f0ff; }

[data-lens="cyberpunk"] .footer-big { font-family: "Rajdhani", sans-serif; font-weight: 700; -webkit-text-stroke: 1px rgba(255,0,60,.8); text-shadow: 0 0 30px rgba(255,0,60,.35); border-top-color: rgba(0,240,255,.3); }
[data-lens="cyberpunk"] .footer-row { font-family: "Share Tech Mono", monospace; color: #8fb4bf; }
[data-lens="cyberpunk"] .footer-claim, [data-lens="cyberpunk"] .footer-top { color: #fcee0a; font-weight: 400; }

/* switcher */
[data-lens="cyberpunk"] .lens-fab { border-radius: 0; background: #0d0d0d; border: 1px solid #00f0ff; box-shadow: 0 0 20px rgba(0,240,255,.45), inset 0 0 12px rgba(0,240,255,.2); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); font-family: "Share Tech Mono", monospace; }
[data-lens="cyberpunk"] .lens-fab::before { display: none; }
[data-lens="cyberpunk"] .lens-fab-label { color: #fcee0a; font-weight: 400; }
[data-lens="cyberpunk"] .lens-panel { background: #0b0f11; color: #e6fbff; border: 1px solid #00f0ff; box-shadow: 0 0 40px rgba(0,240,255,.35); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); font-family: "Share Tech Mono", monospace; }
[data-lens="cyberpunk"] .lens-panel-head { background: #fcee0a; color: #0d0d0d; border-color: #00f0ff; }
[data-lens="cyberpunk"] .lens-panel-title { font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: .06em; }
[data-lens="cyberpunk"] .lens-panel-sub { color: #0d0d0d; opacity: .75; }
[data-lens="cyberpunk"] .lens-close { background: #0d0d0d; color: #fcee0a; border-color: #0d0d0d; border-radius: 0; }
[data-lens="cyberpunk"] .lens-list li { border-color: rgba(0,240,255,.18); }
[data-lens="cyberpunk"] .lens-opt:hover, [data-lens="cyberpunk"] .lens-opt:focus-visible { background: #00f0ff; color: #0d0d0d; }
[data-lens="cyberpunk"] .lo-text b { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 17px; }
[data-lens="cyberpunk"] .lens-panel-foot { border-color: rgba(0,240,255,.35); }
[data-lens="cyberpunk"] .sound-toggle { border-radius: 0; color: #00f0ff; }
[data-lens="cyberpunk"] .sound-toggle[aria-pressed="true"] { background: #00f0ff; color: #0d0d0d; }
[data-lens="cyberpunk"] .lens-warning { color: #8fb4bf; }
[data-lens="cyberpunk"] .toast { border-radius: 0; background: #fcee0a; color: #0d0d0d; font-family: "Share Tech Mono", monospace; }

@media (max-width: 760px) {
  .cp-tl, .cp-tr, .cp-c1, .cp-c2 { display: none; }
  .cp-bl { font-size: 10px; }
  .cp-sign, .cp-sign-2 { display: none; }
  [data-lens="cyberpunk"] .service { --cut: 18px; }
}
@media (hover: none) { .cp-reticle { display: none; } }
[data-lens="cyberpunk"] .hero { padding-top: calc(var(--header-h) + 64px); padding-bottom: clamp(60px, 7vw, 84px); }
[data-lens="cyberpunk"] .cp-hud { opacity: .85; }
@media (max-width: 760px) { [data-lens="cyberpunk"] .hero { padding-top: calc(var(--header-h) + 18px); } }

/* ==========================================================================
   RETRO — cassette futurism (the future, as seen in 1979)
   ========================================================================== */
html[data-lens="retro"] {
  --bg: #ebe6d9; --fg: #222222; --muted: #58544a; --line: #222222; --soft: #e2dccb;
  --dark-bg: #d8d1bd; --dark-fg: #222222; --dark-muted: #4d493f; --dark-line: #222222;
  --f-head: "Michroma", "Space Mono", system-ui, sans-serif;
  --f-body: "Space Mono", ui-monospace, monospace;
  --f-mono: "VT323", ui-monospace, monospace;
  --img-filter: url(#fx-phosphor) contrast(1.25) brightness(1.1);
  --rt-beige: #ebe6d9; --rt-beige2: #d8d1bd; --rt-dark: #222222; --rt-green: #33ff00; --rt-amber: #ffb000; --rt-orange: #e4572e; --rt-teal: #4a8b99; --rt-screen: #061006;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --eye-white: transparent; --eye-line: #33ff00; --eye-iris: transparent; --eye-ring: #33ff00; --eye-pupil: #33ff00; --eye-glint: transparent;
}
[data-lens="retro"] body { background-color: #ebe6d9; background-image: var(--noise); font-size: clamp(14px, .25vw + 13px, 16px); }
[data-lens="retro"] ::selection { background: #ffb000; color: #222; }
[data-lens="retro"] .hero, [data-lens="retro"] .why, [data-lens="retro"] .section--dark, [data-lens="retro"] .site-footer { background: transparent; }
@keyframes rtBlink { 50% { opacity: 0; } }
@keyframes rtFlicker { 0%, 100% { opacity: .97; } 48% { opacity: 1; } 50% { opacity: .9; } 52% { opacity: 1; } }
@keyframes rtVu { from { height: 12%; } to { height: 100%; } }
@keyframes rtLed { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }

/* header */
[data-lens="retro"] .site-header { background: #ebe6d9; background-image: var(--noise); color: #222; border-bottom: 3px solid #222; }
[data-lens="retro"] .site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 15px; background: linear-gradient(#ffb000 0 5px, #e4572e 5px 10px, #4a8b99 10px 15px); border-bottom: 3px solid #222; pointer-events: none; }
[data-lens="retro"] .logo-word { font-family: "Michroma", sans-serif; font-size: 12px; letter-spacing: .18em; }
[data-lens="retro"] .logo-eye { --eye-white: #061006; --eye-line: #33ff00; --eye-iris: transparent; --eye-ring: #33ff00; --eye-pupil: #33ff00; --eye-glint: transparent; background: #061006; border: 2px solid #222; border-radius: 4px; padding: 2px; box-sizing: content-box; }
[data-lens="retro"] .site-nav a, [data-lens="retro"] .header-mail { font-family: "Michroma", sans-serif; font-size: 10px; font-weight: 400; letter-spacing: .12em; background: #ebe6d9; border: 2px solid #222; border-radius: 5px; padding: 7px 10px; box-shadow: 0 4px 0 #222; transition: transform .08s, box-shadow .08s; }
[data-lens="retro"] .site-nav a:active, [data-lens="retro"] .header-mail:active { transform: translateY(3px); box-shadow: 0 1px 0 #222; }
[data-lens="retro"] .site-nav a::after, [data-lens="retro"] .header-mail::after { display: none; }
[data-lens="retro"] .header-mail { background: #ffb000; }

/* eye variant: green vector wireframe */
[data-lens="retro"] .eye .iris { stroke: #33ff00; stroke-width: 3; }
[data-lens="retro"] .eye .eye-line { stroke-width: 4; }
[data-lens="retro"] .eye .iris-ring { stroke-width: 2; stroke-dasharray: 3 3; }
[data-lens="retro"] .eye { filter: drop-shadow(0 0 3px rgba(51,255,0,.8)); }

/* hero = computer console */
[data-lens="retro"] .hero { padding-top: calc(var(--header-h) + 38px); gap: 22px; justify-content: flex-start; }
[data-lens="retro"] .hero-meta { background: #222; color: #ebe6d9; border: 0; border-radius: 6px; padding: 10px 14px; font-family: "Michroma", sans-serif; font-weight: 400; font-size: 10px; letter-spacing: .2em; }
[data-lens="retro"] .hero-meta span:nth-child(2) { color: #ffb000; }
[data-lens="retro"] .hero-meta span:nth-child(3) { color: #33ff00; }
[data-lens="retro"] .hero-title {
  margin: 0; font-family: "VT323", monospace; font-weight: 400; letter-spacing: .02em; line-height: .86;
  background: radial-gradient(ellipse at 50% 40%, #0f2a10, #041004 75%);
  color: #33ff00;
  border: clamp(10px, 1.6vw, 22px) solid #cfc7b3;
  outline: 3px solid #222; outline-offset: 0;
  border-radius: clamp(18px, 2.4vw, 34px);
  padding: clamp(18px, 3.4vw, 54px) clamp(18px, 3.6vw, 60px) clamp(22px, 3.4vw, 54px);
  box-shadow: inset 0 0 70px rgba(0,0,0,.95), inset 0 0 18px rgba(51,255,0,.18), 10px 10px 0 #222;
  text-shadow: 0 0 .03em #33ff00, 0 0 .12em rgba(51,255,0,.55);
  overflow: hidden; animation: rtFlicker 4s linear infinite;
}
[data-lens="retro"] .hero-title::before { content: "MJ-OS 1.0  READY."; display: block; font-size: clamp(16px, 1.8vw, 24px); letter-spacing: .12em; margin-bottom: .8em; color: #ffb000; text-shadow: 0 0 6px rgba(255,176,0,.6); }
[data-lens="retro"] .hero-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.08), transparent 45%); }
[data-lens="retro"] .ht-2 { color: #33ff00; -webkit-text-stroke: 0; margin-top: .02em; }
[data-lens="retro"] .ht-2 .fit-inner::after { content: ""; display: inline-block; width: .42em; height: .62em; margin-left: .08em; background: currentColor; box-shadow: 0 0 .1em rgba(51,255,0,.6); animation: rtBlink 1s steps(1) infinite; vertical-align: baseline; }
[data-lens="retro"] .ht-eye .eye .eye-line { stroke-width: 5; }

[data-lens="retro"] .rt-console { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px 22px; align-items: center; background: #d8d1bd; background-image: var(--noise); border: 3px solid #222; border-radius: 12px; padding: 14px 18px; box-shadow: 8px 8px 0 #222; }
.rt-keys { display: flex; flex-wrap: wrap; gap: 10px; }
.rt-key { font: 400 10px/1 "Michroma", sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: #222; background: #ebe6d9; border: 2px solid #222; border-radius: 6px; padding: 14px 14px 12px; box-shadow: 0 5px 0 #222; transition: transform .07s, box-shadow .07s; }
.rt-key:hover { background: #fff8e8; }
.rt-key:active { transform: translateY(4px); box-shadow: 0 1px 0 #222; }
.rt-key--orange { background: #e4572e; color: #fff; }
.rt-key--orange:hover { background: #f06a41; }
.rt-deck { background: #222; border-radius: 8px; padding: 10px 12px; }
.rt-tape { width: 176px; height: 70px; background: #151515; border: 2px solid #555; border-radius: 6px; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.rt-tape-label { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font: 400 7px/1 "Michroma", sans-serif; letter-spacing: .12em; color: #222; background: #ffb000; padding: 3px 6px; border-radius: 2px; white-space: nowrap; }
.rt-tape::after { content: ""; position: absolute; left: 44px; right: 44px; bottom: 16px; height: 16px; background: #3b2a1e; border-radius: 8px; opacity: .8; }
.rt-reel { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #ebe6d9; background: repeating-conic-gradient(#ebe6d9 0 18deg, #151515 18deg 60deg); animation: spin 2.6s linear infinite; position: relative; z-index: 1; margin-top: 10px; }
.rt-meters { display: flex; align-items: center; gap: 18px; }
.rt-vu { display: flex; align-items: flex-end; gap: 3px; height: 44px; background: #151515; border: 2px solid #222; border-radius: 4px; padding: 4px; }
.rt-vu i { width: 6px; height: 30%; background: linear-gradient(to top, #33ff00 0 55%, #ffb000 55% 80%, #e4572e 80%); animation: rtVu var(--d, .6s) ease-in-out infinite alternate; }
.rt-leds { display: flex; gap: 14px; }
.rt-led { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 400 8px/1 "Michroma", sans-serif; letter-spacing: .1em; color: #222; }
.rt-led i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #222; background: #33ff00; box-shadow: 0 0 8px #33ff00; }
.rt-led--amber i { background: #ffb000; box-shadow: 0 0 8px #ffb000; animation: rtLed 1.3s steps(1) infinite; }
.rt-led--red i { background: #e4572e; box-shadow: 0 0 8px #e4572e; animation: rtLed 2.1s steps(1) infinite; }

[data-lens="retro"] .hero-foot { margin-top: 4px; }
[data-lens="retro"] .hero-tagline { font-family: "Michroma", sans-serif; font-weight: 400; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; }
[data-lens="retro"] .hero-intro { color: #3d3a33; font-size: 14px; }
[data-lens="retro"] .hero-intro strong { color: #222; background: #ffb000; padding: 0 3px; font-weight: 700; }
.rt-typing::after { content: "█"; animation: rtBlink 1s steps(1) infinite; margin-left: 2px; }
[data-lens="retro"] .hero-badge { border-radius: 50%; background: repeating-conic-gradient(#cfc7b3 0 6deg, #bdb49d 6deg 12deg); border: 3px solid #222; box-shadow: 6px 6px 0 #222; }
[data-lens="retro"] .hero-badge svg { animation-duration: 40s; }
[data-lens="retro"] .hero-badge text { font-family: "Michroma", sans-serif; font-weight: 400; font-size: 14px; letter-spacing: .12em; fill: #222; }
[data-lens="retro"] .hero-badge .badge-eye { background: #061006; border-radius: 8px; border: 2px solid #222; padding: 3px; width: 46%; height: 34%; }
[data-lens="retro"] .scroll-cue { display: none; }

/* marquee = LED ticker */
[data-lens="retro"] .marquee { background: #151515; color: #ffb000; font-family: "VT323", monospace; font-weight: 400; font-size: clamp(30px, 4vw, 58px); letter-spacing: .08em; border-top: 3px solid #222; border-bottom: 3px solid #222; text-shadow: 0 0 10px rgba(255,176,0,.7); background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 6px 6px; }
[data-lens="retro"] .marquee-track i { opacity: 1; color: #33ff00; }

/* modules */
[data-lens="retro"] .section { padding-top: clamp(50px, 7vw, 100px); padding-bottom: clamp(50px, 7vw, 100px); }
[data-lens="retro"] .section > .wrap { background: #f1ede2; background-image: var(--noise); border: 3px solid #222; border-radius: 12px; box-shadow: 10px 10px 0 #222; padding: 0 clamp(20px, 4vw, 56px) clamp(24px, 4vw, 56px); }
[data-lens="retro"] .about > .wrap { background-color: #d8d1bd; }
.rt-plate { display: flex; align-items: center; gap: 14px; margin: 0 calc(-1 * clamp(20px, 4vw, 56px)) clamp(24px, 3vw, 40px); padding: 12px clamp(14px, 2vw, 22px); background: #222; color: #ebe6d9; border-radius: 8px 8px 0 0; font: 400 10px/1 "Michroma", sans-serif; letter-spacing: .18em; text-transform: uppercase; grid-column: 1 / -1; }
.rt-plate b { color: #ffb000; font-weight: 400; }
.rt-plate span { color: #ebe6d9; }
.rt-plate em { font-style: normal; margin-left: auto; color: #8d877a; }
.rt-screw { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8d1bd, #7a7466); position: relative; flex: none; }
.rt-screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #3b3831; transform: rotate(35deg); }
[data-lens="retro"] .about-grid { display: grid; }
[data-lens="retro"] .about-grid > .rt-plate { grid-column: 1 / -1; }
[data-lens="retro"] .section-label { font-family: "VT323", monospace; font-size: 20px; font-weight: 400; letter-spacing: .08em; color: #4a8b99; }
[data-lens="retro"] .section-label::after { background: repeating-linear-gradient(90deg, #222 0 4px, transparent 4px 8px); height: 3px; opacity: 1; }
[data-lens="retro"] .section-title { font-weight: 400; letter-spacing: .02em; line-height: 1.12; font-size: clamp(26px, 4.2vw, 64px); }
[data-lens="retro"] .about .section-title { font-size: clamp(26px, 3.4vw, 52px); }
[data-lens="retro"] .why-title { font-size: clamp(24px, 3.6vw, 56px); max-width: 22ch; }
[data-lens="retro"] .section-intro, [data-lens="retro"] .about-copy { color: #3d3a33; font-size: 14px; }
[data-lens="retro"] .about-copy .lead { font-family: "Michroma", sans-serif; font-size: clamp(15px, 1.4vw, 20px); line-height: 1.6; color: #222; }
[data-lens="retro"] .about-copy strong, [data-lens="retro"] .section-intro strong { color: #222; }
[data-lens="retro"] .facts { border-color: #222; border-top-width: 3px; }
[data-lens="retro"] .facts li { border-bottom: 2px dashed #222; }
[data-lens="retro"] .facts strong { font-family: "VT323", monospace; font-weight: 400; font-size: clamp(38px, 3.8vw, 56px); color: #ffb000; background: #151515; padding: .06em .28em 0; border-radius: 6px; box-shadow: inset 0 0 0 2px #000, 4px 4px 0 #222; text-shadow: 0 0 8px rgba(255,176,0,.7); letter-spacing: .06em; }
[data-lens="retro"] .facts span { font-family: "Michroma", sans-serif; font-weight: 400; font-size: 10px; color: #222; }
[data-lens="retro"] .link-btn { color: #e4572e; font-family: "Michroma", sans-serif; font-weight: 400; }
[data-lens="retro"] .chips li { border: 2px solid #222; border-radius: 6px; box-shadow: 0 4px 0 #222; background: #ebe6d9; color: #222; font-family: "Michroma", sans-serif; font-weight: 400; font-size: 10px; }
[data-lens="retro"] .chips li:nth-child(1) { background: #ffb000; }
[data-lens="retro"] .chips li:nth-child(2) { background: #e4572e; color: #fff; }
[data-lens="retro"] .chips li:nth-child(3) { background: #4a8b99; color: #fff; }

/* services = data cassettes */
[data-lens="retro"] .services-head { margin-bottom: 30px; }
[data-lens="retro"] .service-list { border-top: 0; display: grid; gap: 26px; }
[data-lens="retro"] .service { border: 3px solid #222; border-radius: 10px; background: #ebe6d9; box-shadow: 6px 6px 0 #222; padding: clamp(18px, 2.4vw, 32px); }
[data-lens="retro"] .service:nth-child(3n+1) { border-top: 14px solid #ffb000; }
[data-lens="retro"] .service:nth-child(3n+2) { border-top: 14px solid #e4572e; }
[data-lens="retro"] .service:nth-child(3n+3) { border-top: 14px solid #4a8b99; }
[data-lens="retro"] .service-num { font-family: "VT323", monospace; font-weight: 400; font-size: 34px; color: #33ff00; background: #061006; border-radius: 6px; padding: 4px 8px 2px; line-height: 1; justify-self: start; text-shadow: 0 0 8px rgba(51,255,0,.7); box-shadow: inset 0 0 0 2px #000; letter-spacing: .05em; }
[data-lens="retro"] .service-title { font-weight: 400; letter-spacing: .02em; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.15; }
[data-lens="retro"] .service-sub { font-family: "VT323", monospace; font-size: 20px; font-weight: 400; letter-spacing: .06em; color: #4a8b99; }
[data-lens="retro"] .service-body p { color: #3d3a33; font-size: 14px; }
[data-lens="retro"] .service-cta { font-family: "Michroma", sans-serif; font-size: 10px; font-weight: 400; letter-spacing: .14em; border: 2px solid #222; border-radius: 6px; background: #e4572e; color: #fff; padding: 12px 14px; box-shadow: 0 5px 0 #222; transition: transform .07s, box-shadow .07s; }
[data-lens="retro"] .service-cta:active { transform: translateY(4px); box-shadow: 0 1px 0 #222; }
[data-lens="retro"] .service-media { border: clamp(8px, 1vw, 12px) solid #cfc7b3; outline: 3px solid #222; border-radius: 16px; background: #061006; box-shadow: inset 0 0 30px #000; }
[data-lens="retro"] .media img { border-radius: 6px; }
[data-lens="retro"] .media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6)); border-radius: 6px; }
.rt-cassette { margin-top: 18px; width: 150px; height: 52px; border: 2px solid #222; border-radius: 6px; background: #222; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; position: relative; }
.rt-cassette .rt-reel { width: 28px; height: 28px; margin-top: 0; animation-play-state: paused; }
.rt-cas-win { position: absolute; left: 50%; top: 50%; width: 44px; height: 14px; transform: translate(-50%, -50%); background: #3b2a1e; border-radius: 3px; }
[data-lens="retro"] .service:hover .rt-reel { animation-play-state: running; }

/* why = indicator panels */
[data-lens="retro"] .why-grid { border-top: 0; gap: 18px; }
[data-lens="retro"] .why-item, [data-lens="retro"] .why-item:nth-child(even) { border: 3px solid #222 !important; border-radius: 10px; background: #ebe6d9; box-shadow: 6px 6px 0 #222; padding: clamp(20px, 2.6vw, 34px); }
[data-lens="retro"] .why-item::before { content: ""; position: absolute; right: 18px; top: 18px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #222; background: #33ff00; box-shadow: 0 0 10px #33ff00; animation: rtLed 2.4s steps(1) infinite; }
[data-lens="retro"] .why-item:nth-child(2)::before { background: #ffb000; box-shadow: 0 0 10px #ffb000; animation-delay: -.6s; }
[data-lens="retro"] .why-item:nth-child(3)::before { background: #e4572e; box-shadow: 0 0 10px #e4572e; animation-delay: -1.2s; }
[data-lens="retro"] .why-item:nth-child(4)::before { animation-delay: -1.8s; }
[data-lens="retro"] .why-num { font-family: "VT323", monospace; font-weight: 400; -webkit-text-stroke: 0; color: #ffb000; background: #151515; display: inline-block; padding: .04em .2em 0; border-radius: 6px; font-size: clamp(40px, 4vw, 60px); text-shadow: 0 0 8px rgba(255,176,0,.7); box-shadow: inset 0 0 0 2px #000; }
[data-lens="retro"] .why-item h3 { font-weight: 400; font-size: clamp(15px, 1.4vw, 20px); letter-spacing: .06em; }
[data-lens="retro"] .why-item p { color: #3d3a33; font-size: 14px; }

/* contact = terminal */
[data-lens="retro"] .contact > .wrap { background: #cfc7b3; }
[data-lens="retro"] .contact-kicker { font-family: "Michroma", sans-serif; font-weight: 400; font-size: 11px; color: #222; }
[data-lens="retro"] .contact-mail { font-family: "VT323", monospace; font-weight: 400; letter-spacing: 0; color: #33ff00; background: #061006; border: 0; border-radius: 14px; padding: .22em .3em .16em; box-shadow: inset 0 0 40px #000, 0 0 0 3px #222, 8px 8px 0 #222; text-shadow: 0 0 .04em #33ff00, 0 0 .15em rgba(51,255,0,.5); }
[data-lens="retro"] .contact-mail .fit-inner::before { content: "> "; color: #ffb000; }
[data-lens="retro"] .contact-mail .fit-inner::after { content: "█"; position: static; display: inline; background: none; height: auto; width: auto; transform: none; animation: rtBlink 1s steps(1) infinite; margin-left: .05em; }
[data-lens="retro"] .contact-row p { color: #222; font-size: 14px; }
[data-lens="retro"] .btn { font-family: "Michroma", sans-serif; font-weight: 400; font-size: 11px; border-radius: 8px; background: #e4572e; color: #fff; border: 3px solid #222; box-shadow: 0 6px 0 #222; transition: transform .07s, box-shadow .07s; }
[data-lens="retro"] .btn:hover { transform: none; background: #f06a41; }
[data-lens="retro"] .btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #222; }
[data-lens="retro"] .btn--ghost { background: #ebe6d9; color: #222; }
[data-lens="retro"] .btn--ghost:hover { background: #fff8e8; }

/* footer */
[data-lens="retro"] .site-footer { background: #222; color: #ebe6d9; margin-top: 40px; }
[data-lens="retro"] .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15px; background: linear-gradient(#ffb000 0 5px, #e4572e 5px 10px, #4a8b99 10px 15px); }
[data-lens="retro"] .footer-big { font-family: "Michroma", sans-serif; font-weight: 400; letter-spacing: .02em; -webkit-text-stroke: 1px #5b574e; border-top: 0; margin-top: 20px; }
[data-lens="retro"] .footer-row { font-family: "Michroma", sans-serif; font-size: 10px; color: #b9b2a0; }
[data-lens="retro"] .footer-claim, [data-lens="retro"] .footer-top { color: #ffb000; font-weight: 400; }

/* switcher */
[data-lens="retro"] .lens-fab { border-radius: 10px; background: #ffb000; color: #222; border: 3px solid #222; box-shadow: 0 6px 0 #222; font-family: "Michroma", sans-serif; transition: transform .07s, box-shadow .07s; }
[data-lens="retro"] .lens-fab:hover { transform: none; }
[data-lens="retro"] .lens-fab:active { transform: translateY(5px); box-shadow: 0 1px 0 #222; }
[data-lens="retro"] .lens-fab::before { display: none; }
[data-lens="retro"] .lens-fab-eye { background: #061006; border-radius: 5px; border: 2px solid #222; padding: 2px; box-sizing: content-box; }
[data-lens="retro"] .lens-fab-label { font-weight: 400; font-size: 10px; }
[data-lens="retro"] .lens-panel { background: #ebe6d9; background-image: var(--noise); border: 3px solid #222; border-radius: 12px; box-shadow: 10px 10px 0 #222; font-family: "Space Mono", monospace; animation: none; }
[data-lens="retro"] .lens-panel-head { background: #222; color: #ebe6d9; border-bottom: 3px solid #222; }
[data-lens="retro"] .lens-panel-title { font-family: "Michroma", sans-serif; font-weight: 400; font-size: 16px; letter-spacing: .08em; color: #ffb000; }
[data-lens="retro"] .lens-panel-sub { color: #b9b2a0; }
[data-lens="retro"] .lens-close { border-radius: 6px; border: 2px solid #ebe6d9; background: #e4572e; color: #fff; }
[data-lens="retro"] .lens-list { padding: 10px; display: grid; gap: 8px; }
[data-lens="retro"] .lens-list li { border: 0; }
[data-lens="retro"] .lens-opt { background: #ebe6d9; border: 2px solid #222; border-radius: 8px; box-shadow: 0 4px 0 #222; padding: 8px 12px; transition: transform .07s, box-shadow .07s; }
[data-lens="retro"] .lens-opt:hover, [data-lens="retro"] .lens-opt:focus-visible { background: #ffb000; color: #222; }
[data-lens="retro"] .lens-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 #222; }
[data-lens="retro"] .lo-text b { font-family: "Michroma", sans-serif; font-weight: 400; font-size: 12px; }
[data-lens="retro"] .lens-panel-foot { border-top: 3px solid #222; }
[data-lens="retro"] .sound-toggle { border-radius: 6px; border-width: 2px; font-family: "Michroma", sans-serif; font-size: 9px; }
[data-lens="retro"] .sound-toggle[aria-pressed="true"] { background: #33ff00; color: #222; }
[data-lens="retro"] .toast { border-radius: 6px; background: #061006; color: #33ff00; font-family: "VT323", monospace; font-size: 20px; border: 3px solid #222; }
[data-lens="retro"] .lens-hint { background: #061006; color: #33ff00; border: 3px solid #222; box-shadow: 5px 5px 0 #222; font-family: "VT323", monospace; font-size: 18px; font-weight: 400; }
[data-lens="retro"] .lens-hint::after { background: #061006; border-color: #222; }

@media (max-width: 1080px) {
  [data-lens="retro"] .rt-console { grid-template-columns: 1fr auto; }
  [data-lens="retro"] .rt-meters { grid-column: 1 / -1; justify-content: space-between; }
}
@media (max-width: 760px) {
  [data-lens="retro"] .site-nav { display: none; }
  [data-lens="retro"] .rt-console { grid-template-columns: 1fr; padding: 12px; box-shadow: 5px 5px 0 #222; }
  .rt-keys { gap: 8px; }
  .rt-key { flex: 1 1 40%; text-align: center; padding: 13px 8px 11px; font-size: 9px; }
  .rt-deck { display: none; }
  [data-lens="retro"] .hero-title { box-shadow: inset 0 0 50px rgba(0,0,0,.95), 6px 6px 0 #222; }
  [data-lens="retro"] .section > .wrap { box-shadow: 6px 6px 0 #222; }
  .rt-plate em { display: none; }
  [data-lens="retro"] .service { box-shadow: 4px 4px 0 #222; }
}

/* ==========================================================================
   GLITCH — everything is broken, beautifully
   ========================================================================== */
html[data-lens="glitch"] {
  --bg: #000; --fg: #fff; --muted: #b8b8b8; --line: rgba(255,255,255,.35); --soft: #000;
  --dark-bg: #000; --dark-fg: #fff; --dark-muted: #b8b8b8; --dark-line: rgba(255,255,255,.35);
  --f-head: "Rubik Glitch", "Arial Black", Arial, sans-serif;
  --f-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --f-mono: "VT323", ui-monospace, monospace;
  --img-filter: none;
  --gl-bg: #000;
  --eye-white: #fff; --eye-line: #000; --eye-iris: #000; --eye-ring: #fff; --eye-pupil: #000; --eye-glint: #fff;
}
[data-lens="glitch"] body { background: #000; font-weight: 400; cursor: crosshair; }
[data-lens="glitch"] ::selection { background: #0f0; color: #000; }
[data-lens="glitch"] .about,
[data-lens="glitch"] .why { background: #fff; color: #000; --fg: #000; --muted: #333; --line: rgba(0,0,0,.35); --dark-fg: #000; --dark-muted: #333; --dark-line: rgba(0,0,0,.35); --gl-bg: #fff; }
[data-lens="glitch"] .hero, [data-lens="glitch"] .services, [data-lens="glitch"] .contact, [data-lens="glitch"] .site-footer { background: #000; }

/* RGB split layers on titles */
[data-lens="glitch"] [data-glitch] { position: relative; text-shadow: .035em 0 0 rgba(255,0,0,.85), -.035em 0 0 rgba(0,255,255,.85); }
[data-lens="glitch"] [data-glitch]::before,
[data-lens="glitch"] [data-glitch]::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;
  background: var(--gl-bg); color: inherit;
}
[data-lens="glitch"] [data-glitch]::before { text-shadow: -.06em 0 0 #f00; clip-path: inset(10% 0 70% 0); animation: glSliceA 2.6s steps(1) infinite; }
[data-lens="glitch"] [data-glitch]::after { text-shadow: .06em 0 0 #0ff, -.02em 0 0 #0f0; clip-path: inset(60% 0 20% 0); animation: glSliceB 3.1s steps(1) infinite; }
@keyframes glSliceA {
  0% { clip-path: inset(10% 0 80% 0); transform: translate(-.04em, 0); }
  8% { clip-path: inset(40% 0 43% 0); transform: translate(.05em, 0); }
  14% { clip-path: inset(0 0 100% 0); transform: none; }
  52% { clip-path: inset(72% 0 6% 0); transform: translate(-.07em, 0); }
  56% { clip-path: inset(22% 0 60% 0); transform: translate(.03em, 0); }
  60%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
}
@keyframes glSliceB {
  0%, 30% { clip-path: inset(0 0 100% 0); transform: none; }
  32% { clip-path: inset(55% 0 28% 0); transform: translate(.06em, 0); }
  35% { clip-path: inset(12% 0 74% 0); transform: translate(-.05em, 0); }
  38% { clip-path: inset(0 0 100% 0); transform: none; }
  80% { clip-path: inset(80% 0 2% 0); transform: translate(.08em, 0); }
  83%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
}
@keyframes glShake { 0% { transform: translate(0, 0); } 25% { transform: translate(-6px, 2px); } 50% { transform: translate(5px, -2px); } 75% { transform: translate(-3px, 0); } 100% { transform: translate(0, 0); } }
@keyframes glJitter { 0%, 100% { transform: none; } 20% { transform: translateX(2px); } 40% { transform: translateX(-2px) skewX(4deg); } 60% { transform: translateX(1px); } }
@keyframes glImgA { 0%, 100% { transform: translate(-5px, 0); } 10% { transform: translate(6px, 1px); } 11% { transform: translate(-5px, 0); } 57% { transform: translate(-9px, 0); } 58% { transform: translate(-5px, 0); } }
@keyframes glImgB {
  0%, 100% { transform: translate(5px, 0); clip-path: inset(0 0 0 0); }
  20% { clip-path: inset(30% 0 50% 0); transform: translate(18px, 0); }
  21% { clip-path: inset(0 0 0 0); transform: translate(5px, 0); }
  64% { clip-path: inset(70% 0 12% 0); transform: translate(-22px, 0); }
  66% { clip-path: inset(0 0 0 0); transform: translate(5px, 0); }
}
@keyframes glBlink { 50% { opacity: 0; } }

/* burst states (toggled by JS) */
html.gl-burst main { animation: glShake .12s steps(2) infinite; }
html.gl-burst .hero-title { filter: url(#fx-tear); }
.gl-tear { transform: translateX(var(--tx, 0)); filter: url(#fx-tear) saturate(3); }
html.gl-invert main, html.gl-invert .site-footer { filter: invert(1) hue-rotate(180deg); }

/* overlays */
.gl-canvas { image-rendering: pixelated; mix-blend-mode: difference; }
.gl-osd { position: absolute; left: 20px; top: calc(var(--header-h) + 14px); font: 400 28px/1 "VT323", monospace; color: #fff; text-shadow: 2px 2px 0 #000, -2px 0 0 rgba(255,0,0,.8), 2px 0 0 rgba(0,255,255,.8); letter-spacing: .05em; mix-blend-mode: difference; }
.gl-osd-r { left: auto; right: 20px; text-align: right; }
.gl-osd-b { top: auto; bottom: 24px; animation: glBlink 1s steps(1) infinite; font-size: 22px; }
.gl-err {
  position: absolute; width: min(330px, 86vw); pointer-events: auto; z-index: 2;
  background: #c0c0c0; color: #000; font: 13px/1.35 Arial, sans-serif;
  border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000, 6px 6px 0 rgba(0,0,0,.6);
  filter: drop-shadow(3px 0 0 rgba(255,0,0,.8)) drop-shadow(-3px 0 0 rgba(0,255,255,.8));
  animation: glJitter .3s steps(2) 3;
}
.gl-err-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 3px 3px 8px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; font-size: 12px; }
.gl-err-bar button, .gl-err-btns button { background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font: 700 12px Arial, sans-serif; cursor: pointer; }
.gl-err-bar button { width: 20px; height: 18px; line-height: 1; padding: 0; }
.gl-err-body { display: flex; gap: 14px; align-items: flex-start; padding: 14px 14px 6px; }
.gl-err-body p { margin: 0; }
.gl-err-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #e00; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; border: 2px solid #800; }
.gl-err-btns { display: flex; justify-content: center; gap: 10px; padding: 8px 14px 14px; }
.gl-err-btns button { min-width: 76px; padding: 4px 10px; }
.gl-err-btns button:active, .gl-err-bar button:active { border-color: #404040 #fff #fff #404040; }

/* header */
[data-lens="glitch"] .site-header { mix-blend-mode: difference; color: #fff; }
[data-lens="glitch"] .logo-word { font-family: "VT323", monospace; font-size: 22px; letter-spacing: .08em; text-shadow: 2px 0 #f00, -2px 0 #0ff; }
[data-lens="glitch"] .logo-word b { font-weight: 400; }
[data-lens="glitch"] .site-nav a, [data-lens="glitch"] .header-mail { font-family: "VT323", monospace; font-size: 20px; font-weight: 400; letter-spacing: .06em; }
[data-lens="glitch"] .site-nav a:hover, [data-lens="glitch"] .header-mail:hover { animation: glJitter .2s steps(2) infinite; text-shadow: 2px 0 #f00, -2px 0 #0ff; }

/* eye variant */
[data-lens="glitch"] .eye { filter: drop-shadow(.04em 0 0 rgba(255,0,0,.9)) drop-shadow(-.04em 0 0 rgba(0,255,255,.9)); }
[data-lens="glitch"] .ht-eye .eye { filter: drop-shadow(6px 0 0 rgba(255,0,0,.9)) drop-shadow(-6px 0 0 rgba(0,255,255,.9)); animation: glJitter 1.7s steps(1) infinite; }

/* hero */
[data-lens="glitch"] .hero { padding-top: calc(var(--header-h) + 58px); }
[data-lens="glitch"] .hero-meta { font-family: "VT323", monospace; font-size: 18px; font-weight: 400; color: #fff; border-bottom: 1px solid #fff; }
[data-lens="glitch"] .hero-meta span:nth-child(2) { color: #0ff; }
[data-lens="glitch"] .hero-meta span:nth-child(3) { color: #f0f; }
[data-lens="glitch"] .hero-title { font-weight: 400; letter-spacing: 0; line-height: .88; }
[data-lens="glitch"] .ht-2 { color: #fff; -webkit-text-stroke: 0; }
[data-lens="glitch"] .hero-tagline { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; text-transform: uppercase; text-shadow: 3px 0 #f00, -3px 0 #0ff; }
[data-lens="glitch"] .hero-intro { color: #cfcfcf; }
[data-lens="glitch"] .hero-intro strong { color: #fff; background: #00f; padding: 0 3px; }
[data-lens="glitch"] .hero-badge text { font-family: "VT323", monospace; font-weight: 400; font-size: 20px; fill: #fff; letter-spacing: .1em; }
[data-lens="glitch"] .hero-badge svg { animation: spin 22s steps(40) infinite; filter: drop-shadow(3px 0 0 #f00) drop-shadow(-3px 0 0 #0ff); }
[data-lens="glitch"] .scroll-cue { color: #fff; font-family: "VT323", monospace; font-size: 18px; }

/* marquee = SMPTE bars */
[data-lens="glitch"] .marquee {
  color: #000; font-family: "VT323", monospace; font-weight: 400; font-size: clamp(30px, 4.4vw, 64px); letter-spacing: .06em;
  background: linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 0 28.57%, #00c0c0 0 42.85%, #00c000 0 57.14%, #c000c0 0 71.42%, #c00000 0 85.71%, #0000c0 0);
  padding: 34px 0;
}
[data-lens="glitch"] .marquee::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(90deg, #0000c0 0 14.28%, #111 0 28.57%, #c000c0 0 42.85%, #111 0 57.14%, #00c0c0 0 71.42%, #111 0 85.71%, #c0c0c0 0); }
[data-lens="glitch"] .marquee-track { animation-duration: 18s; animation-timing-function: steps(160); }
[data-lens="glitch"] .marquee-track span { background: #000; color: #fff; margin: 0 .2em; padding: 0 .3em; text-shadow: 2px 0 #f00, -2px 0 #0ff; }
[data-lens="glitch"] .marquee-track i { opacity: 1; color: #000; }

/* sections */
[data-lens="glitch"] .section-label { font-family: "VT323", monospace; font-size: 20px; font-weight: 400; letter-spacing: .08em; color: inherit; }
[data-lens="glitch"] .section-label::after { background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px); height: 3px; flex-basis: 90px; }
[data-lens="glitch"] .section-title { font-weight: 400; letter-spacing: 0; line-height: .95; }
[data-lens="glitch"] .about .section-title, [data-lens="glitch"] .why .section-title { text-shadow: .035em 0 0 rgba(255,0,0,.8), -.035em 0 0 rgba(0,160,255,.9); }
[data-lens="glitch"] .about-copy, [data-lens="glitch"] .section-intro { color: var(--muted); }
[data-lens="glitch"] .about-copy strong { color: #000; background: #0f0; padding: 0 3px; }
[data-lens="glitch"] .about-copy .lead { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; color: #000; }
[data-lens="glitch"] .about-copy .lead strong { background: #f0f; color: #fff; }
[data-lens="glitch"] .facts strong { font-family: "VT323", monospace; font-weight: 400; font-size: clamp(50px, 5vw, 76px); text-shadow: 3px 0 #f00, -3px 0 #0af; }
[data-lens="glitch"] .facts span { font-family: "VT323", monospace; font-size: 18px; font-weight: 400; color: #000; }
[data-lens="glitch"] .chips li { border-radius: 0; border: 2px solid #000; color: #000; font-family: "VT323", monospace; font-size: 18px; font-weight: 400; box-shadow: 3px 0 0 #f00, -3px 0 0 #0ff; }
[data-lens="glitch"] .link-btn { color: #00f; font-family: "VT323", monospace; font-weight: 400; font-size: 18px; }
[data-lens="glitch"] .about .wrap { position: relative; }
[data-lens="glitch"] .about .wrap::after { content: "TEXTURE_NOT_FOUND"; position: absolute; right: 0; bottom: -40px; width: clamp(120px, 16vw, 220px); aspect-ratio: 1; display: grid; place-items: end start; padding: 8px; font: 14px "VT323", monospace; color: #fff; background: repeating-conic-gradient(#f0f 0 25%, #000 0 50%) 0 0 / 40px 40px; animation: glJitter 2s steps(1) infinite; }

[data-lens="glitch"] .service-list { border-top: 2px solid #fff; }
[data-lens="glitch"] .service { border-bottom: 1px solid rgba(255,255,255,.35); }
[data-lens="glitch"] .service:hover { background: #fff; color: #000; --gl-bg: #fff; --muted: #333; }
[data-lens="glitch"] .service-num { font-family: "VT323", monospace; font-size: 26px; font-weight: 400; color: #0f0; }
[data-lens="glitch"] .service-title { font-weight: 400; letter-spacing: 0; }
[data-lens="glitch"] .service-sub { font-family: "VT323", monospace; font-size: 18px; font-weight: 400; color: #0ff; }
[data-lens="glitch"] .service:hover .service-sub { color: #00f; }
[data-lens="glitch"] .service-cta { font-family: "VT323", monospace; font-size: 20px; font-weight: 400; background: #fff; color: #000; border: 0; padding: 4px 12px; box-shadow: 3px 0 0 #f00, -3px 0 0 #0ff; }
[data-lens="glitch"] .service:hover .service-cta { background: #000; color: #fff; }
[data-lens="glitch"] .media { background: #000; }
[data-lens="glitch"] .media img { opacity: 0; }
[data-lens="glitch"] .media::before,
[data-lens="glitch"] .media::after { content: ""; position: absolute; inset: 0; background-image: var(--img); background-size: cover; background-position: center; mix-blend-mode: screen; }
[data-lens="glitch"] .media::before { background-color: #f00; background-blend-mode: multiply; animation: glImgA 3.4s steps(1) infinite; }
[data-lens="glitch"] .media::after { background-color: #0ff; background-blend-mode: multiply; animation: glImgB 2.7s steps(1) infinite; }
[data-lens="glitch"] .service:nth-child(2) .media::after { animation-delay: -1s; }
[data-lens="glitch"] .service:nth-child(3) .media::before { animation-delay: -2s; }
[data-lens="glitch"] .service:nth-child(4) .media::after { animation-delay: -.4s; }

[data-lens="glitch"] .why-grid { border-top: 2px solid #000; }
[data-lens="glitch"] .why-num { font-family: "VT323", monospace; font-weight: 400; -webkit-text-stroke: 0; color: #000; text-shadow: 4px 0 #f00, -4px 0 #0af; }
[data-lens="glitch"] .why-item h3 { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; }
[data-lens="glitch"] .why-item:nth-child(3) { animation: glJitter 4s steps(1) infinite; }
[data-lens="glitch"] .why-item:nth-child(2) p { filter: blur(.4px); }

[data-lens="glitch"] .contact-kicker { font-family: "VT323", monospace; font-size: 20px; font-weight: 400; color: #0f0; }
[data-lens="glitch"] .contact-mail { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; letter-spacing: -.03em; text-shadow: .03em 0 0 #f00, -.03em 0 0 #0ff; }
[data-lens="glitch"] .contact-mail:hover { animation: glJitter .25s steps(2) infinite; }
[data-lens="glitch"] .btn { border-radius: 0; font-family: "VT323", monospace; font-weight: 400; font-size: 22px; letter-spacing: .06em; background: #fff; color: #000; box-shadow: 4px 0 0 #f00, -4px 0 0 #0ff; }
[data-lens="glitch"] .btn--ghost { background: #000; color: #fff; border-color: #fff; }
[data-lens="glitch"] .btn:hover { animation: glJitter .2s steps(2) infinite; }

[data-lens="glitch"] .footer-big { font-family: "Rubik Glitch", sans-serif; font-weight: 400; -webkit-text-stroke: 0; color: #fff; text-shadow: .03em 0 #f00, -.03em 0 #0ff; border-top: 2px solid #fff; opacity: .9; }
[data-lens="glitch"] .footer-row { font-family: "VT323", monospace; font-size: 18px; color: #bbb; }
[data-lens="glitch"] .footer-claim, [data-lens="glitch"] .footer-top { color: #fff; font-weight: 400; }

/* switcher */
[data-lens="glitch"] .lens-fab { border-radius: 0; background: #fff; color: #000; border: 0; box-shadow: 5px 0 0 #f00, -5px 0 0 #0ff; font-family: "VT323", monospace; --eye-white: #fff; --eye-line: #000; --eye-iris: #000; --eye-ring: #fff; --eye-pupil: #000; --eye-glint: #fff; animation: glJitter 3s steps(1) infinite; }
[data-lens="glitch"] .lens-fab::before { display: none; }
[data-lens="glitch"] .lens-fab-label { font-size: 20px; font-weight: 400; letter-spacing: .04em; }
[data-lens="glitch"] .lens-panel { border-radius: 0; border: 2px solid #000; box-shadow: 8px 0 0 #f00, -8px 0 0 #0ff; font-family: Arial, sans-serif; animation: glJitter .25s steps(2) 2; }
[data-lens="glitch"] .lens-panel-title { font-family: "Rubik Glitch", sans-serif; font-weight: 400; font-size: 26px; }
[data-lens="glitch"] .lens-close { border-radius: 0; }
[data-lens="glitch"] .lens-opt:hover, [data-lens="glitch"] .lens-opt:focus-visible { background: #00f; color: #fff; }
[data-lens="glitch"] .lo-text b { font-family: "VT323", monospace; font-weight: 400; font-size: 22px; letter-spacing: .04em; }
[data-lens="glitch"] .sound-toggle { border-radius: 0; font-family: "VT323", monospace; font-size: 16px; }
[data-lens="glitch"] .toast { border-radius: 0; background: #fff; color: #000; box-shadow: 4px 0 0 #f00, -4px 0 0 #0ff; font-family: "VT323", monospace; font-size: 20px; }
[data-lens="glitch"] .lens-hint { border-radius: 0; font-family: "VT323", monospace; font-size: 20px; font-weight: 400; box-shadow: 4px 0 0 #f00, -4px 0 0 #0ff; }

@media (max-width: 760px) {
  .gl-osd { font-size: 22px; left: 14px; }
  .gl-osd-r { right: 14px; }
  [data-lens="glitch"] .about .wrap::after { bottom: -20px; width: 90px; }
}

/* ==========================================================================
   ACID — 90s rave flyer overload
   ========================================================================== */
html[data-lens="acid"] {
  --bg: #e6ff00; --fg: #000; --muted: #111; --line: #000; --soft: #e6ff00;
  --dark-bg: #000; --dark-fg: #e6ff00; --dark-muted: #e6ff00; --dark-line: #e6ff00;
  --f-head: "Unbounded", "Arial Black", Arial, sans-serif;
  --f-body: "Unbounded", Arial, sans-serif;
  --img-filter: url(#fx-acid) contrast(1.05);
  --ac-y: #e6ff00; --ac-b: #0033ff; --ac-g: #00ff66; --ac-p: #ff2bd6;
  --chrome: linear-gradient(180deg, #ffffff 0%, #e2e2e2 22%, #8a8a8a 45%, #1c1c1c 50%, #6f6f6f 56%, #d9d9d9 72%, #ffffff 86%, #9d9d9d 100%);
  --eye-white: #fff; --eye-line: #000; --eye-iris: #e6ff00; --eye-ring: #000; --eye-pupil: #000; --eye-glint: #fff;
}
[data-lens="acid"] body { background: #e6ff00; font-size: clamp(13px, .25vw + 12px, 15px); line-height: 1.55; }
[data-lens="acid"] ::selection { background: #000; color: #e6ff00; }
@keyframes acSpin3d { from { transform: rotateY(0deg) rotateZ(-8deg); } to { transform: rotateY(360deg) rotateZ(-8deg); } }
@keyframes acWobble { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.06); } }
@keyframes acDrip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.9); } }
@keyframes acPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes acShine { to { background-position: 0 -200%; } }

/* decor */
.ac-burst { position: absolute; left: 50%; top: 55%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; background: repeating-conic-gradient(#e6ff00 0 7.5deg, #000 7.5deg 15deg); animation: spin 60s linear infinite; z-index: 0; opacity: .95; }
.ac-burst::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #e6ff00 0 6vmax, transparent 30vmax); }
.ac-smiley3d { position: absolute; z-index: 1; width: clamp(110px, 17vw, 260px); right: 9%; top: calc(var(--header-h) + 60px); perspective: 600px; }
.ac-smiley3d svg { width: 100%; height: auto; display: block; animation: acSpin3d 4.5s linear infinite; filter: drop-shadow(8px 10px 0 #000); }
.ac-melt { position: absolute; z-index: 2; width: clamp(90px, 12vw, 170px); right: 6%; top: -50px; animation: acWobble 3s ease-in-out infinite; }
.ac-melt svg { width: 100%; display: block; overflow: visible; filter: drop-shadow(6px 6px 0 #000); }
.ac-melt .drip { transform-box: fill-box; transform-origin: top; animation: acDrip 2.4s ease-in-out infinite; }
.ac-melt .drip:nth-of-type(2) { animation-delay: -.7s; }
.ac-melt .drip:nth-of-type(3) { animation-delay: -1.3s; }
.ac-bouncers { position: absolute; inset: 0; overflow: hidden; }
.ac-bouncer { position: absolute; left: 0; top: 0; will-change: transform; }
.ac-bouncer svg { width: 100%; height: 100%; display: block; }
.ac-cursor { position: fixed; left: 0; top: 0; z-index: 120; width: 38px; height: 38px; margin: -19px 0 0 -19px; pointer-events: none; }
.ac-cursor svg { width: 100%; height: 100%; display: block; }
.ac-tape { position: relative; z-index: 4; height: clamp(110px, 13vw, 190px); margin: calc(-1 * clamp(40px, 5vw, 70px)) 0; pointer-events: none; overflow: hidden; }
.ac-strip { position: absolute; left: -10%; right: -10%; top: 50%; white-space: nowrap; overflow: hidden; padding: .35em 0; font: 900 clamp(22px, 3.2vw, 46px)/1 "Unbounded", sans-serif; text-transform: uppercase; border-top: 5px solid #000; border-bottom: 5px solid #000; }
.ac-strip--a { background: #000; color: #e6ff00; transform: translateY(-50%) rotate(-4deg); }
.ac-strip--b { background: #0033ff; color: #fff; transform: translateY(-50%) rotate(3.5deg); }
.ac-tape--1 .ac-strip--a { background: #ff2bd6; color: #000; }
.ac-tape--1 .ac-strip--b { background: #00ff66; color: #000; }
.ac-tape--2 .ac-strip--a { background: #e6ff00; color: #000; }
.ac-strip-track { display: inline-block; animation: marquee 22s linear infinite; }
.ac-strip--b .ac-strip-track { animation-direction: reverse; animation-duration: 26s; }
.ac-sticker { position: absolute; z-index: 5; width: clamp(96px, 11vw, 150px); aspect-ratio: 1; pointer-events: none; }
.ac-sticker svg { width: 100%; height: 100%; display: block; animation: spin 9s linear infinite; filter: drop-shadow(5px 5px 0 #000); }
.ac-sticker text { font: 900 17px "Unbounded", sans-serif; letter-spacing: .06em; }
.ac-sticker .ac-st-c { font-size: 58px; }

/* header */
[data-lens="acid"] .site-header { background: #000; color: #e6ff00; border-bottom: 5px solid #0033ff; }
[data-lens="acid"] .logo-word { font-family: "Unbounded", sans-serif; letter-spacing: .02em; font-size: 15px; }
[data-lens="acid"] .logo-word b { font-weight: 900; }
[data-lens="acid"] .logo-eye { --eye-white: #fff; --eye-line: #e6ff00; --eye-iris: #e6ff00; --eye-ring: #000; --eye-pupil: #000; --eye-glint: #fff; }
[data-lens="acid"] .site-nav a, [data-lens="acid"] .header-mail { font-family: "Unbounded", sans-serif; font-weight: 900; letter-spacing: .02em; font-size: 12px; }
[data-lens="acid"] .site-nav a:hover { background: #e6ff00; color: #000; }
[data-lens="acid"] .header-mail { background: #e6ff00; color: #000; padding: 6px 12px; border-radius: 999px; transform: rotate(-3deg); }
[data-lens="acid"] .header-mail::after { display: none; }

/* eye variant: the pupil is a smiley */
[data-lens="acid"] .eye .iris-smile { display: inline; fill: #000; stroke: #000; stroke-linecap: round; }
[data-lens="acid"] .eye .iris-smile path { fill: none; }
[data-lens="acid"] .eye .pupil, [data-lens="acid"] .eye .glint, [data-lens="acid"] .eye .iris-ring { display: none; }
[data-lens="acid"] .eye .iris { stroke: #000; stroke-width: 2.5; }

/* hero */
[data-lens="acid"] .hero { background: #e6ff00; }
[data-lens="acid"] .hero > *:not(.ac-burst):not(.ac-smiley3d):not(.scroll-cue) { position: relative; z-index: 2; }
[data-lens="acid"] .hero-meta { background: #000; color: #e6ff00; border: 0; padding: 12px 16px; transform: rotate(-1.2deg); font-family: "Unbounded", sans-serif; font-weight: 900; letter-spacing: .04em; font-size: 11px; box-shadow: 6px 6px 0 #0033ff; }
[data-lens="acid"] .hero-title { font-weight: 900; letter-spacing: -.04em; line-height: .78; }
[data-lens="acid"] .ht-1 { margin-top: .4em; }
[data-lens="acid"] .ht-1 .fit-inner { transform: scaleY(1.45); transform-origin: 50% 100%; }
[data-lens="acid"] .ht-word, [data-lens="acid"] .ht-o { background: var(--chrome); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: acShine 3s linear infinite; filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) drop-shadow(.035em .035em 0 #0033ff); }
[data-lens="acid"] .ht-2 { font-family: "Rubik Wet Paint", "Unbounded", sans-serif; font-weight: 400; letter-spacing: 0; color: #00ff66; -webkit-text-stroke: .018em #000; text-shadow: .04em .04em 0 #000, .08em .08em 0 #ff2bd6; margin-top: .2em; line-height: 1; }
[data-lens="acid"] .ht-eye .eye .eye-line { stroke-width: 10; }
[data-lens="acid"] .hero-foot { align-items: center; }
[data-lens="acid"] .hero-copy { background: #000; color: #e6ff00; padding: clamp(18px, 2.4vw, 30px); transform: rotate(1.5deg); box-shadow: 10px 10px 0 #0033ff; border: 4px solid #000; max-width: 700px; }
[data-lens="acid"] .hero-tagline { font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2vw, 28px); letter-spacing: -.02em; color: #00ff66; }
[data-lens="acid"] .hero-intro { color: #e6ff00; }
[data-lens="acid"] .hero-intro strong { color: #000; background: #e6ff00; padding: 0 4px; font-weight: 900; }
[data-lens="acid"] .hero-badge { background: #ff2bd6; border: 4px solid #000; box-shadow: 6px 6px 0 #000; animation: acPulse 1.2s ease-in-out infinite; }
[data-lens="acid"] .hero-badge text { font-family: "Unbounded", sans-serif; font-weight: 900; fill: #000; font-size: 15px; letter-spacing: .08em; }
[data-lens="acid"] .hero-badge svg { animation-duration: 5s; }
[data-lens="acid"] .scroll-cue { display: none; }

/* marquee */
[data-lens="acid"] .marquee { background: #000; color: #e6ff00; font-family: "Unbounded", sans-serif; font-weight: 900; font-style: italic; transform: rotate(-2deg) scale(1.05); border-top: 6px solid #0033ff; border-bottom: 6px solid #0033ff; z-index: 5; }
[data-lens="acid"] .marquee-track { animation-duration: 14s; }
[data-lens="acid"] .marquee-track i { opacity: 1; color: #ff2bd6; font-size: .9em; }

/* sections: no white space, overlaps, tilts */
[data-lens="acid"] .section { padding-top: clamp(70px, 9vw, 130px); padding-bottom: clamp(70px, 9vw, 130px); }
[data-lens="acid"] .section-label { background: #000; color: #e6ff00; display: inline-flex; padding: 8px 12px; font-family: "Unbounded", sans-serif; font-weight: 900; letter-spacing: .06em; transform: rotate(-2deg); }
[data-lens="acid"] .section-label::after { display: none; }
[data-lens="acid"] .section-label .sl-num { color: #ff2bd6; }
[data-lens="acid"] .section-title {
  font-weight: 900; letter-spacing: -.045em; line-height: .86; text-transform: uppercase;
  background: var(--chrome); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000) drop-shadow(.04em .04em 0 #000);
  transform: scaleY(1.25); transform-origin: 0 0; margin-bottom: clamp(50px, 7vw, 100px);
  animation: acShine 4s linear infinite;
}

[data-lens="acid"] .about { background: repeating-conic-gradient(#000 0 25%, #e6ff00 0 50%) 0 0 / clamp(60px, 7vw, 110px) clamp(60px, 7vw, 110px); }
[data-lens="acid"] .about-grid { background: #000; border: 6px solid #00ff66; padding: clamp(24px, 4vw, 60px); transform: rotate(-1.2deg); box-shadow: 16px 16px 0 #0033ff; position: relative; }
[data-lens="acid"] .about .section-title { font-size: clamp(30px, 3.9vw, 68px); overflow-wrap: normal; }
[data-lens="acid"] .facts { border-color: #e6ff00; }
[data-lens="acid"] .facts li { border-color: #e6ff00; }
[data-lens="acid"] .facts strong { font-family: "Rubik Wet Paint", sans-serif; font-weight: 400; color: #00ff66; font-size: clamp(46px, 5vw, 80px); }
[data-lens="acid"] .facts span { font-family: "Unbounded", sans-serif; font-weight: 900; color: #e6ff00; font-size: 11px; }
[data-lens="acid"] .about-copy { color: #e6ff00; font-size: clamp(13px, 1vw, 15px); }
[data-lens="acid"] .about-copy strong { color: #000; background: #00ff66; padding: 0 3px; }
[data-lens="acid"] .about-copy .lead { color: #fff; font-weight: 900; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -.02em; }
[data-lens="acid"] .about-copy .lead strong { background: #ff2bd6; color: #000; }
[data-lens="acid"] .chips li { background: #e6ff00; color: #000; border: 3px solid #000; font-family: "Unbounded", sans-serif; font-weight: 900; box-shadow: 4px 4px 0 #ff2bd6; }
[data-lens="acid"] .chips li:nth-child(2) { transform: rotate(-4deg); }
[data-lens="acid"] .chips li:nth-child(3) { transform: rotate(3deg); }
[data-lens="acid"] .link-btn { color: #ff2bd6; font-family: "Unbounded", sans-serif; font-weight: 900; }

[data-lens="acid"] .services { background: #0033ff repeating-radial-gradient(circle at 30% 40%, #0033ff 0 22px, #0026c4 22px 44px); }
[data-lens="acid"] .services .section-intro { background: #e6ff00; color: #000; padding: 16px 18px; border: 4px solid #000; box-shadow: 8px 8px 0 #000; transform: rotate(-1deg); max-width: 640px; }
[data-lens="acid"] .services .section-intro strong { background: #000; color: #e6ff00; padding: 0 3px; }
[data-lens="acid"] .service-list { border-top: 0; display: grid; gap: 0; }
[data-lens="acid"] .service { background: #e6ff00; border: 5px solid #000; box-shadow: 12px 12px 0 #000; padding: clamp(20px, 3vw, 40px); margin-bottom: -14px; }
[data-lens="acid"] .service:nth-child(odd) { transform: rotate(-1.4deg); }
[data-lens="acid"] .service:nth-child(even) { transform: rotate(1.2deg) translateX(1.5%); background: #fff; }
[data-lens="acid"] .service:nth-child(3) { background: #00ff66; }
[data-lens="acid"] .service:nth-child(5) { background: #ff2bd6; }
[data-lens="acid"] .service-num { font-family: "Rubik Wet Paint", sans-serif; font-weight: 400; font-size: clamp(44px, 4.6vw, 76px); color: #000; padding: 0; line-height: .9; }
[data-lens="acid"] .service-title { font-weight: 900; letter-spacing: -.04em; font-size: clamp(28px, 3.6vw, 60px); transform: scaleY(1.2); transform-origin: 0 0; }
[data-lens="acid"] .service-sub { font-family: "Unbounded", sans-serif; font-weight: 900; color: #000; background: #fff; display: inline-block; padding: 4px 8px; border: 2px solid #000; margin-top: 1.2em; }
[data-lens="acid"] .service-body p { color: #000; font-size: clamp(13px, .95vw, 15px); }
[data-lens="acid"] .service-cta { font-family: "Unbounded", sans-serif; font-weight: 900; background: #000; color: #e6ff00; border: 0; padding: 10px 16px; border-radius: 999px; }
[data-lens="acid"] .service-cta:hover { background: #0033ff; color: #fff; }
[data-lens="acid"] .service-media { border: 5px solid #000; box-shadow: 10px 10px 0 #000; transform: rotate(4deg) scale(1.08); background: #000; }
[data-lens="acid"] .service:nth-child(even) .service-media { transform: rotate(-5deg) scale(1.08); }
[data-lens="acid"] .service:hover .media img { filter: url(#fx-acid) invert(1); transform: scale(1.12); }

[data-lens="acid"] .why { background: #00ff66 repeating-linear-gradient(-45deg, transparent 0 26px, rgba(0,0,0,.9) 26px 34px); }
[data-lens="acid"] .why-title { font-size: clamp(30px, 5vw, 86px); max-width: 18ch; }
[data-lens="acid"] .why .section-label { background: #e6ff00; color: #000; }
[data-lens="acid"] .why-grid { border-top: 0; gap: 18px; }
[data-lens="acid"] .why-item, [data-lens="acid"] .why-item:nth-child(even) { border: 5px solid #000 !important; background: #000; color: #e6ff00; padding: clamp(20px, 2.8vw, 36px); box-shadow: 10px 10px 0 #ff2bd6; }
[data-lens="acid"] .why-item:nth-child(1) { transform: rotate(-2deg); }
[data-lens="acid"] .why-item:nth-child(2) { transform: rotate(1.5deg) translateY(20px); }
[data-lens="acid"] .why-item:nth-child(3) { transform: rotate(1deg); }
[data-lens="acid"] .why-item:nth-child(4) { transform: rotate(-1.5deg) translateY(20px); }
[data-lens="acid"] .why-num { font-family: "Rubik Wet Paint", sans-serif; font-weight: 400; -webkit-text-stroke: 0; color: #00ff66; }
[data-lens="acid"] .why-item h3 { font-weight: 900; letter-spacing: -.02em; color: #fff; }
[data-lens="acid"] .why-item p { color: #e6ff00; font-size: clamp(13px, .95vw, 15px); }

[data-lens="acid"] .contact { background: #000; overflow: hidden; }
[data-lens="acid"] .contact::before { content: ""; position: absolute; inset: -50%; background: repeating-conic-gradient(#0033ff 0 10deg, #000 10deg 20deg); animation: spin 40s linear infinite reverse; opacity: .55; }
[data-lens="acid"] .contact .wrap { position: relative; z-index: 1; }
[data-lens="acid"] .contact .section-title { font-size: clamp(50px, 9vw, 150px); }
[data-lens="acid"] .contact-kicker { background: #ff2bd6; color: #000; display: inline-block; padding: 8px 12px; font-family: "Unbounded", sans-serif; font-weight: 900; transform: rotate(2deg); }
[data-lens="acid"] .contact-mail { font-weight: 900; letter-spacing: -.05em; border: 0; }
[data-lens="acid"] .contact-mail .fit-inner { background: var(--chrome); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000) drop-shadow(.03em .03em 0 #ff2bd6); animation: acShine 3s linear infinite; }
[data-lens="acid"] .contact-mail .fit-inner::after { background: #e6ff00; }
[data-lens="acid"] .contact-row { background: #e6ff00; color: #000; padding: clamp(18px, 2.4vw, 30px); border: 5px solid #000; box-shadow: 10px 10px 0 #ff2bd6; transform: rotate(-1deg); }
[data-lens="acid"] .contact-row p { color: #000; }
[data-lens="acid"] .btn { background: #000; color: #e6ff00; border: 3px solid #000; font-family: "Unbounded", sans-serif; font-weight: 900; }
[data-lens="acid"] .btn--ghost { background: #0033ff; color: #fff; }

[data-lens="acid"] .site-footer { background: #e6ff00; color: #000; border-top: 6px solid #000; }
[data-lens="acid"] .footer-big { font-weight: 900; letter-spacing: -.05em; color: #000; -webkit-text-stroke: 0; border-top: 0; transform: scaleY(1.3); transform-origin: 0 100%; margin-top: .3em; }
[data-lens="acid"] .footer-row { color: #000; font-family: "Unbounded", sans-serif; font-size: 11px; }
[data-lens="acid"] .footer-claim, [data-lens="acid"] .footer-top { color: #000; font-weight: 900; }

/* switcher */
[data-lens="acid"] .lens-fab { background: #e6ff00; color: #000; border: 4px solid #000; box-shadow: 6px 6px 0 #0033ff; font-family: "Unbounded", sans-serif; transform: rotate(-3deg); }
[data-lens="acid"] .lens-fab:hover { transform: rotate(3deg) scale(1.05); }
[data-lens="acid"] .lens-fab::before { border-color: #ff2bd6; border-width: 3px; }
[data-lens="acid"] .lens-fab-eye { --eye-white: #fff; --eye-line: #000; --eye-iris: #e6ff00; --eye-pupil: #000; }
[data-lens="acid"] .lens-panel { background: #000; color: #e6ff00; border: 5px solid #e6ff00; box-shadow: 12px 12px 0 #0033ff; border-radius: 0; transform: rotate(-1.5deg); font-family: "Unbounded", sans-serif; }
[data-lens="acid"] .lens-panel-head, [data-lens="acid"] .lens-panel-foot { border-color: #e6ff00; }
[data-lens="acid"] .lens-panel-title { font-size: 22px; color: #00ff66; }
[data-lens="acid"] .lens-panel-sub, [data-lens="acid"] .lens-warning { color: #e6ff00; opacity: .8; }
[data-lens="acid"] .lens-close { background: #e6ff00; color: #000; border-color: #e6ff00; }
[data-lens="acid"] .lens-list li { border-color: rgba(230,255,0,.3); }
[data-lens="acid"] .lens-opt:hover, [data-lens="acid"] .lens-opt:focus-visible { background: #e6ff00; color: #000; }
[data-lens="acid"] .lo-text b { font-size: 13px; }
[data-lens="acid"] .lo-text small { font-size: 11px; }
[data-lens="acid"] .sound-toggle[aria-pressed="true"] { background: #00ff66; color: #000; }
[data-lens="acid"] .toast { background: #000; color: #e6ff00; border: 3px solid #e6ff00; font-family: "Unbounded", sans-serif; }
[data-lens="acid"] .lens-hint { background: #ff2bd6; border: 3px solid #000; box-shadow: 5px 5px 0 #000; font-family: "Unbounded", sans-serif; font-weight: 900; transform: rotate(-3deg); }

@media (max-width: 760px) {
  .ac-smiley3d { right: 4%; top: calc(var(--header-h) + 150px); width: 96px; }
  .ac-melt { width: 80px; top: -36px; }
  [data-lens="acid"] .service, [data-lens="acid"] .service:nth-child(even) { transform: rotate(-1deg); box-shadow: 8px 8px 0 #000; margin-bottom: 14px; }
  [data-lens="acid"] .service:nth-child(even) { transform: rotate(1deg); }
  [data-lens="acid"] .service-media, [data-lens="acid"] .service:nth-child(even) .service-media { transform: rotate(2deg); }
  [data-lens="acid"] .why-item:nth-child(n) { transform: rotate(-1deg); }
  [data-lens="acid"] .about-grid { box-shadow: 8px 8px 0 #0033ff; }
}

/* ==========================================================================
   BAD DREAM — dreamcore / weirdcore
   ========================================================================== */
html[data-lens="dream"] {
  --bg: transparent; --fg: #1d1d1d; --muted: #4a4a4a; --line: #9a9a9a; --soft: transparent;
  --dark-bg: #000; --dark-fg: #e8e8e8; --dark-muted: #9a9a9a; --dark-line: #333;
  --f-head: "Times New Roman", Times, serif;
  --f-body: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  --img-filter: saturate(.55) contrast(.85) brightness(1.12) sepia(.22) hue-rotate(-12deg) blur(.5px);
  --dr-yellow: #fdfd96; --dr-green: #b2d8d8; --dr-blue: #0000aa; --dr-pink: #ffc5cb;
  --eye-white: #fffaf2; --eye-line: #e79aa6; --eye-iris: #86b7d6; --eye-ring: #4f7f9e; --eye-pupil: #111; --eye-glint: #fff;
}
[data-lens="dream"] body { background: #b2d8d8; font-size: 16px; }
[data-lens="dream"] ::selection { background: #0000aa; color: #fdfd96; }
[data-lens="dream"] *, [data-lens="dream"] *::before, [data-lens="dream"] *::after { transition: none !important; }
[data-lens="dream"] .js .reveal, html.js[data-lens="dream"] .reveal { transition: opacity 0s linear .35s !important; transform: none; }
[data-lens="dream"] a { color: #0000ee; }
[data-lens="dream"] a:visited { color: #551a8b; }
@keyframes drBlink { 0%, 92%, 100% { opacity: 1; } 93%, 99% { opacity: 0; } }

/* decor */
.dr-clouds { image-rendering: pixelated; image-rendering: crisp-edges; }
.dr-hall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; }
.dr-noise { position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.dr-floats { position: absolute; inset: 0; overflow: hidden; }
.dr-float { position: absolute; white-space: nowrap; color: rgba(20,20,20,.62); font: 14px Arial, sans-serif; }
.dr-f-times { font: italic 20px "Times New Roman", serif; color: rgba(0,0,120,.55); }
.dr-f-comic { font: 15px "Comic Sans MS", "Comic Neue", cursive; color: rgba(90,40,60,.6); }
.dr-f-pixel { font: 20px "VT323", monospace; color: rgba(0,0,170,.7); letter-spacing: .06em; }
.dr-f-arial { text-shadow: 0 0 6px #fff; }
.dr-giant { position: absolute; z-index: 1; left: 64%; top: 38%; width: min(52vw, 540px); aspect-ratio: 3 / 2; transform: translate(-50%, -50%); opacity: .95; }
.dr-eye { position: absolute; z-index: 3; width: var(--s, 60px); aspect-ratio: 3 / 2; pointer-events: none; }
.dr-ghost { position: fixed; left: 0; top: 0; z-index: 119; width: 22px; pointer-events: none; opacity: .35; filter: blur(.4px); }
.dr-ghost svg { width: 100%; display: block; }
.dr-dialog { position: fixed; z-index: 80; width: 250px; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000; font: 12px Tahoma, "MS Sans Serif", Arial, sans-serif; }
.dr-dlg-bar { display: flex; justify-content: space-between; align-items: center; padding: 3px 3px 3px 6px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; }
.dr-dlg-bar button, .dr-dlg-btns button { background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font: 12px Tahoma, Arial, sans-serif; cursor: pointer; }
.dr-dlg-bar button { width: 18px; height: 16px; padding: 0; line-height: 1; font-weight: 700; }
.dr-dlg-body { padding: 16px 14px 14px; text-align: center; }
.dr-dlg-body p { margin: 0 0 14px; font-size: 13px; }
.dr-dlg-btns { display: flex; justify-content: center; gap: 10px; }
.dr-dlg-btns button { min-width: 72px; padding: 4px 8px; }
.dr-shift { filter: grayscale(1) blur(1.5px) !important; }

/* header */
[data-lens="dream"] .site-header { color: #1d1d1d; background: transparent; }
[data-lens="dream"] .logo { color: #1d1d1d; }
[data-lens="dream"] .logo-word { font-family: "Times New Roman", serif; text-transform: lowercase; letter-spacing: .02em; font-size: 17px; }
[data-lens="dream"] .logo-word b { font-weight: 400; font-style: italic; }
[data-lens="dream"] .logo-eye { --eye-white: #fffaf2; --eye-line: #e79aa6; --eye-iris: #86b7d6; --eye-ring: #4f7f9e; --eye-pupil: #111; --eye-glint: #fff; }
[data-lens="dream"] .site-nav { gap: 22px; }
[data-lens="dream"] .site-nav a, [data-lens="dream"] .header-mail { font: 15px "Times New Roman", serif; text-transform: none; letter-spacing: 0; text-decoration: underline; }
[data-lens="dream"] .site-nav a::after, [data-lens="dream"] .header-mail::after { display: none; }
[data-lens="dream"] .site-nav a:nth-child(2) { position: relative; top: 9px; }
[data-lens="dream"] .site-nav a:nth-child(4) { position: relative; top: -5px; left: 20px; }

/* eye variant: soft, realistic, lashes */
[data-lens="dream"] .eye .iris-lines { display: inline; stroke: #4f7f9e; stroke-width: 1; opacity: .7; }
[data-lens="dream"] .eye .eye-lashes { display: inline; }
[data-lens="dream"] .eye .eye-line { stroke-width: 5; }

/* hero = liminal hallway */
[data-lens="dream"] .hero { background: #cfe3d6; justify-content: flex-end; }
[data-lens="dream"] .hero > *:not(.dr-hall):not(.dr-giant):not(.scroll-cue) { position: relative; z-index: 2; }
[data-lens="dream"] .scroll-cue { z-index: 2; }
[data-lens="dream"] .hero-meta { border: 0; color: #fffde8; font: 12px Arial, sans-serif; letter-spacing: .5em; text-transform: lowercase; justify-content: flex-start; gap: 18vw; text-shadow: 0 0 4px rgba(0,0,0,.4); }
[data-lens="dream"] .hero-title { --fit-scale: .52; font-weight: 400; text-transform: lowercase; letter-spacing: 0; line-height: 1; margin: auto 0 0 14%; color: #fffdf2; text-shadow: 0 0 .05em #fff, 0 0 .25em rgba(255,255,255,.6); }
[data-lens="dream"] .ht-line { font-size: 9vw; }
[data-lens="dream"] .ht-2 { color: #ffc5cb; -webkit-text-stroke: 0; font-style: italic; margin-left: 18%; margin-top: .1em; }
[data-lens="dream"] .ht-eye .eye .eye-line { stroke-width: 6; }
[data-lens="dream"] .hero-foot { grid-template-columns: minmax(0, 420px) 1fr; align-items: start; }
[data-lens="dream"] .hero-copy { background: #fdfd96; border: 1px solid #9a9a9a; padding: 14px 16px; transform: rotate(-1.6deg); margin-left: 6%; box-shadow: 3px 3px 0 rgba(0,0,0,.15); }
[data-lens="dream"] .hero-tagline { font-family: "Times New Roman", serif; font-weight: 400; font-style: italic; font-size: 22px; }
[data-lens="dream"] .hero-intro { color: #333; font-size: 14px; }
[data-lens="dream"] .hero-intro strong { color: #1d1d1d; font-weight: 400; text-decoration: underline wavy #ff9eb0; }
[data-lens="dream"] .hero-badge { justify-self: end; align-self: end; margin-right: 12%; }
[data-lens="dream"] .hero-badge svg { animation-duration: 120s; }
[data-lens="dream"] .hero-badge text { font-family: "Times New Roman", serif; font-weight: 400; font-style: italic; font-size: 18px; letter-spacing: .1em; fill: #fffdf2; text-transform: lowercase; }
[data-lens="dream"] .scroll-cue { color: #fffdf2; font: 12px Arial, sans-serif; left: 78%; letter-spacing: .6em; }

/* marquee: very slow, lowercase */
[data-lens="dream"] .marquee { background: #fdfd96; color: #6a6a6a; font: italic 400 clamp(18px, 2vw, 26px) "Times New Roman", serif; text-transform: lowercase; letter-spacing: .08em; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; padding: 10px 0; }
[data-lens="dream"] .marquee-track { animation-duration: 140s; }
[data-lens="dream"] .marquee-track i { font-size: .8em; }

/* about = the void */
[data-lens="dream"] .about { background: #000; padding-top: 34vh; padding-bottom: 30vh; }
[data-lens="dream"] .about-grid { display: block; max-width: 520px; margin: 0 0 0 auto; margin-right: 8%; }
[data-lens="dream"] .about .section-title { font-weight: 400; text-transform: lowercase; font-size: clamp(26px, 3vw, 44px); line-height: 1.15; letter-spacing: 0; color: #d8d8d8; font-style: italic; }
[data-lens="dream"] .section-label { font: 12px Arial, sans-serif; letter-spacing: .5em; text-transform: lowercase; color: inherit; opacity: .6; }
[data-lens="dream"] .section-label::after { display: none; }
[data-lens="dream"] .facts { margin: 12vh 0 12vh -40%; border: 0; width: 100%; }
[data-lens="dream"] .facts li { border: 0; padding: 6px 0; grid-template-columns: 60px 1fr; }
[data-lens="dream"] .facts strong { font: 400 26px "Times New Roman", serif; color: #fdfd96; }
[data-lens="dream"] .facts span { font: 13px Arial, sans-serif; text-transform: lowercase; letter-spacing: .1em; color: #8a8a8a; }
[data-lens="dream"] .link-btn { color: #9090ff; font: 13px Arial, sans-serif; text-transform: lowercase; }
[data-lens="dream"] .about-copy { font-family: "Comic Sans MS", "Comic Neue", cursive; color: #9a9a9a; font-size: 15px; }
[data-lens="dream"] .about-copy .lead { font: italic 22px/1.4 "Times New Roman", serif; color: #e0e0e0; }
[data-lens="dream"] .about-copy strong { color: #ffc5cb; font-weight: 400; }
[data-lens="dream"] .about-copy p:nth-child(3) { margin-left: 30%; }
[data-lens="dream"] .about-copy p:nth-child(4) { margin-left: -12%; font-size: 12px; }
[data-lens="dream"] .chips li { border-radius: 0; border: 1px dotted #666; color: #aaa; font: 12px Arial, sans-serif; text-transform: lowercase; letter-spacing: .2em; }

/* services = pink memories */
[data-lens="dream"] .services { background: #ffc5cb; }
[data-lens="dream"] .services-head { max-width: 560px; margin-left: 10%; }
[data-lens="dream"] .services .section-title { font-weight: 400; text-transform: none; font-style: italic; letter-spacing: 0; line-height: 1; font-size: clamp(34px, 5vw, 76px); }
[data-lens="dream"] .section-intro { font-family: Arial, sans-serif; font-size: 15px; color: #444; }
[data-lens="dream"] .service-list { border-top: 0; }
[data-lens="dream"] .service { border-bottom: 1px dashed #b08890; transform: translateX(var(--dr-x, 0)) rotate(var(--dr-r, 0)); padding: 60px 0; }
[data-lens="dream"] .service:nth-child(2) { padding-top: 140px; }
[data-lens="dream"] .service:nth-child(4) { padding-bottom: 120px; }
[data-lens="dream"] .service-num { font: 12px Arial, sans-serif; color: #7a5a60; letter-spacing: .3em; }
[data-lens="dream"] .service-title { font-weight: 400; text-transform: lowercase; letter-spacing: 0; font-size: clamp(26px, 3vw, 46px); line-height: 1.05; }
[data-lens="dream"] .service:nth-child(odd) .service-title { font-style: italic; }
[data-lens="dream"] .service-sub { font: 13px "Comic Sans MS", "Comic Neue", cursive; text-transform: none; letter-spacing: 0; color: #7a5a60; }
[data-lens="dream"] .service-body p { font-family: Arial, sans-serif; color: #3a3a3a; font-size: 14px; }
[data-lens="dream"] .service:nth-child(3) .service-body p { font-family: "Times New Roman", serif; font-size: 16px; }
[data-lens="dream"] .service-cta { font: 15px "Times New Roman", serif; text-transform: none; letter-spacing: 0; border: 0; text-decoration: underline; color: #0000ee; }
[data-lens="dream"] .service-cta span { display: none; }
[data-lens="dream"] .service-media { background: #fff; padding: 8px 8px 30px; box-shadow: 2px 3px 0 rgba(0,0,0,.2); transform: rotate(var(--dr-r, 0)); overflow: visible; }
[data-lens="dream"] .media::after { content: "▶ PLAY   JUN.14 1998   03:33 AM"; position: absolute; right: 16px; bottom: 38px; left: 16px; text-align: right; font: 16px/1 "VT323", monospace; color: #ffb347; text-shadow: 1px 1px 0 #7a3a00; letter-spacing: .06em; white-space: nowrap; overflow: hidden; }
[data-lens="dream"] .service:nth-child(2) .media::after { content: "REC ●   OCT.31 1997"; }
[data-lens="dream"] .service:nth-child(3) .media::after { content: "▶ PLAY   02.29.1999"; }
[data-lens="dream"] .service:nth-child(4) .media::after { content: "PAUSE ▮▮   ??.??.????"; }
[data-lens="dream"] .service:nth-child(5) .media::after { content: "▶ PLAY   DEC.25 1996   11:59 PM"; }
[data-lens="dream"] .media img { height: calc(100% - 22px); }
[data-lens="dream"] .service:hover .media img { transform: none; }
[data-lens="dream"] .service:hover .service-title { transform: none; }

/* why = hospital hallway tiles */
[data-lens="dream"] .why { background-color: #d9ece7; background-image: linear-gradient(rgba(120,160,150,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,150,.35) 1px, transparent 1px); background-size: 64px 64px; }
[data-lens="dream"] .why-title { font-weight: 400; text-transform: lowercase; letter-spacing: 0; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.1; max-width: 20ch; margin-left: auto; text-align: right; }
[data-lens="dream"] .why-grid { border: 0; gap: 40px 12%; }
[data-lens="dream"] .why-item, [data-lens="dream"] .why-item:nth-child(even) { border: 0 !important; padding: 18px; background: rgba(255,255,255,.55); transform: translateX(var(--dr-x, 0)) rotate(var(--dr-r, 0)); }
[data-lens="dream"] .why-item:nth-child(2) { margin-top: 120px; }
[data-lens="dream"] .why-item:nth-child(3) { width: 70%; }
[data-lens="dream"] .why-num { font: 400 64px/1 "Times New Roman", serif; -webkit-text-stroke: 0; color: rgba(0,0,0,.18); }
[data-lens="dream"] .why-item h3 { font-weight: 400; font-family: "Times New Roman", serif; font-style: italic; text-transform: lowercase; font-size: 24px; letter-spacing: 0; }
[data-lens="dream"] .why-item p { font-family: Arial, sans-serif; color: #444; font-size: 14px; }
[data-lens="dream"] .why-item:nth-child(4) p { font-family: "Comic Sans MS", "Comic Neue", cursive; }

/* contact = blue screen */
[data-lens="dream"] .contact { background: #0000aa; color: #fff; font-family: "Lucida Console", "Courier New", monospace; }
[data-lens="dream"] .contact .wrap { max-width: 900px; }
[data-lens="dream"] .contact .wrap::before { content: "A problem has been detected and your dream has been shut down to prevent damage to your sleep.\A\AIf this is the first time you've seen this stop error screen, write to the address below. If this screen appears again, write anyway."; white-space: pre-wrap; display: block; font-size: 14px; line-height: 1.6; margin-bottom: 40px; color: #fff; }
[data-lens="dream"] .contact .section-label { color: #fff; opacity: 1; }
[data-lens="dream"] .contact .section-title { font: 400 18px "Lucida Console", "Courier New", monospace; text-transform: uppercase; background: #aaa; color: #0000aa; display: inline-block; padding: 2px 10px; margin-bottom: 20px; }
[data-lens="dream"] .contact-kicker { font: 14px "Lucida Console", "Courier New", monospace; color: #fff; text-transform: none; letter-spacing: 0; }
[data-lens="dream"] .contact-mail { --fit-scale: .8; font: 400 7vw "Lucida Console", "Courier New", monospace; letter-spacing: 0; color: #fff; border-bottom: 0; }
[data-lens="dream"] .contact-mail .fit-inner::after { background: #fff; }
[data-lens="dream"] .contact-row p { color: #fff; font-size: 14px; }
[data-lens="dream"] .btn { border-radius: 0; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font: 13px Tahoma, Arial, sans-serif; text-transform: none; letter-spacing: 0; min-height: 34px; padding: 0 18px; }
[data-lens="dream"] .btn:hover { transform: none; }
[data-lens="dream"] .btn:active { border-color: #404040 #fff #fff #404040; }
[data-lens="dream"] .btn--ghost { background: #c0c0c0; color: #000; }

/* footer = void */
[data-lens="dream"] .site-footer { background: #000; padding-top: 30vh; }
[data-lens="dream"] .footer-big { --fit-scale: .22; font: italic 400 20vw "Times New Roman", serif; text-transform: lowercase; letter-spacing: 0; color: #444; -webkit-text-stroke: 0; border: 0; text-align: center; }
[data-lens="dream"] .footer-row { font: 12px Arial, sans-serif; text-transform: lowercase; color: #666; letter-spacing: .15em; margin-top: 20vh; }
[data-lens="dream"] .footer-claim, [data-lens="dream"] .footer-top { color: #999; font-weight: 400; }

/* switcher = Windows 95 */
[data-lens="dream"] .lens-fab { border-radius: 0; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000; font: 13px Tahoma, "MS Sans Serif", Arial, sans-serif; height: 48px; }
[data-lens="dream"] .lens-fab:hover { transform: none; }
[data-lens="dream"] .lens-fab:active { border-color: #404040 #fff #fff #404040; }
[data-lens="dream"] .lens-fab::before { display: none; }
[data-lens="dream"] .lens-fab-label { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; }
[data-lens="dream"] .lens-panel { animation: none; border-radius: 0; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000; font: 13px Tahoma, Arial, sans-serif; }
[data-lens="dream"] .lens-panel-head { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; border: 0; padding: 6px 40px 6px 8px; }
[data-lens="dream"] .lens-panel-title { font: 700 13px Tahoma, Arial, sans-serif; text-transform: none; }
[data-lens="dream"] .lens-panel-sub { color: #d6e4ff; font-size: 11px; margin-top: 2px; }
[data-lens="dream"] .lens-close { border-radius: 0; width: 20px; height: 18px; top: 8px; right: 6px; font-size: 13px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
[data-lens="dream"] .lens-list { background: #fff; margin: 8px; border: 2px solid; border-color: #404040 #fff #fff #404040; }
[data-lens="dream"] .lens-list li { border: 0; }
[data-lens="dream"] .lens-opt { padding: 6px 10px; grid-template-columns: 28px 1fr auto; }
[data-lens="dream"] .lo-swatch { width: 28px; height: 28px; }
[data-lens="dream"] .lens-opt:hover, [data-lens="dream"] .lens-opt:focus-visible { background: #000080; color: #fff; }
[data-lens="dream"] .lo-text b { font: 13px Tahoma, Arial, sans-serif; text-transform: none; letter-spacing: 0; text-decoration: underline; color: inherit; }
[data-lens="dream"] .lens-panel-foot { border: 0; padding: 4px 10px 10px; }
[data-lens="dream"] .sound-toggle { border-radius: 0; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; text-transform: none; letter-spacing: 0; font-size: 12px; }
[data-lens="dream"] .sound-toggle[aria-pressed="true"] { border-color: #404040 #fff #fff #404040; background: #b0b0b0; color: #000; }
[data-lens="dream"] .lens-warning { color: #333; }
[data-lens="dream"] .toast { border-radius: 0; background: #ffffe1; color: #000; border: 1px solid #000; font: 12px Tahoma, Arial, sans-serif; text-transform: none; letter-spacing: 0; }
[data-lens="dream"] .lens-hint { font: 13px "Times New Roman", serif; font-style: italic; box-shadow: none; background: #ffffe1; }

@media (max-width: 760px) {
  [data-lens="dream"] .hero-title { margin-left: 6%; }
  [data-lens="dream"] .hero-foot { grid-template-columns: 1fr; }
  [data-lens="dream"] .hero-copy { margin-left: 2%; margin-right: 6%; }
  [data-lens="dream"] .hero-badge { margin-right: 6%; }
  [data-lens="dream"] .hero-meta { gap: 10vw; }
  [data-lens="dream"] .about-grid { margin-right: 0; }
  [data-lens="dream"] .facts { margin-left: 0; }
  [data-lens="dream"] .about-copy p:nth-child(3) { margin-left: 12%; }
  [data-lens="dream"] .about-copy p:nth-child(4) { margin-left: 0; }
  [data-lens="dream"] .services-head { margin-left: 0; }
  [data-lens="dream"] .why-item:nth-child(2) { margin-top: 40px; }
  [data-lens="dream"] .why-item:nth-child(3) { width: 88%; }
  .dr-giant { width: 84vw; top: 31%; left: 50%; opacity: .5; }
}

html.js[data-lens="dream"] .service.reveal, html.js[data-lens="dream"] .why-item.reveal { transform: translateX(var(--dr-x, 0)) rotate(var(--dr-r, 0)); }

/* ==========================================================================
   Y2K / FRUTIGER AERO — glossy optimism (2004–2010)
   ========================================================================== */
html[data-lens="aero"] {
  --bg: transparent; --fg: #06324a; --muted: #2c5f7b; --line: rgba(255,255,255,.8); --soft: transparent;
  --dark-bg: transparent; --dark-fg: #06324a; --dark-muted: #2c5f7b; --dark-line: rgba(255,255,255,.8);
  --f-head: "Ubuntu", "Segoe UI", "Frutiger", "Myriad Pro", system-ui, sans-serif;
  --f-body: "Ubuntu", "Segoe UI", "Frutiger", "Myriad Pro", system-ui, sans-serif;
  --img-filter: saturate(1.25) brightness(1.04);
  --ae-sky: #00bfff; --ae-grass: #32cd32; --ae-crystal: #e0ffff; --ae-deep: #0a6fb3;
  --ae-glass: linear-gradient(160deg, rgba(255,255,255,.68), rgba(255,255,255,.34));
  --ae-gloss-blue: linear-gradient(180deg, #a6efff 0%, #3cc0f7 46%, #0a8fd8 52%, #3cc8ff 100%);
  --ae-gloss-green: linear-gradient(180deg, #d2ffb8 0%, #6fdc4f 46%, #2fae23 52%, #7de85e 100%);
  --eye-white: url(#g-aero-white); --eye-line: #0a6fb3; --eye-iris: url(#g-aero-iris); --eye-ring: rgba(255,255,255,.7); --eye-pupil: #04304d; --eye-glint: #ffffff;
}
[data-lens="aero"] body { background: linear-gradient(#1597ea 0%, #7fd6ff 35%, #e6fbff 58%, #6fd84a 62%, #2aa0e0 78%, #0a6fc2 100%) fixed; letter-spacing: .005em; }
[data-lens="aero"] ::selection { background: #00bfff; color: #fff; }
[data-lens="aero"] .hero, [data-lens="aero"] .why, [data-lens="aero"] .section--dark, [data-lens="aero"] .site-footer { background: transparent; }
@keyframes aeRise { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(var(--sway, 20px), -55vh); } 100% { transform: translate(0, -118vh); opacity: .9; } }
@keyframes aeFloat { from { transform: translate(0, 0) rotate(-6deg); } to { transform: translate(18px, -30px) rotate(8deg); } }
@keyframes aePop { to { transform: translate(var(--dx), var(--dy)) scale(1.5); opacity: 0; } }
@keyframes aeSwoosh { from { transform: translateX(-3%) scaleY(.92); } to { transform: translateX(3%) scaleY(1.08); } }
@keyframes aeShine { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }

/* background decor */
.ae-water { image-rendering: auto; }
.ae-deco { position: absolute; inset: 0; overflow: hidden; }
.ae-rays { position: absolute; right: -25vw; top: -40vw; width: 90vw; height: 90vw; background: repeating-conic-gradient(from 200deg, rgba(255,255,255,.2) 0 5deg, transparent 5deg 14deg); -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 62%); mask: radial-gradient(circle, #000 0 18%, transparent 62%); animation: spin 140s linear infinite; }
.ae-orb { position: absolute; border-radius: 50%; animation: aeFloat 12s ease-in-out infinite alternate;
  background: radial-gradient(circle at 32% 26%, #fff 0 5%, rgba(255,255,255,.65) 11%, rgba(150,230,255,.3) 42%, rgba(0,140,230,.28) 74%, rgba(255,255,255,.75) 100%);
  box-shadow: 0 24px 60px rgba(0,90,170,.22), inset -12px -16px 30px rgba(0,110,200,.35), inset 10px 12px 24px rgba(255,255,255,.75); }
.ae-orb i { position: absolute; inset: 10%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 58%, rgba(125,255,90,.4) 68%, transparent 80%); filter: blur(3px); animation: spin 9s linear infinite; }
.ae-bubble { position: absolute; bottom: -60px; border-radius: 50%; animation: aeRise linear infinite;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.2) 22%, rgba(180,240,255,.12) 62%, rgba(255,255,255,.65) 100%);
  box-shadow: inset 0 0 6px rgba(255,255,255,.85), 0 0 10px rgba(0,150,255,.2); }
.ae-pop { position: fixed; z-index: 2; margin: -9px 0 0 -9px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.95); background: radial-gradient(circle at 30% 30%, #fff 0 12%, rgba(160,230,255,.35) 40%, transparent 70%); animation: aePop 1s ease-out forwards; pointer-events: none; }
.ae-swoosh { position: absolute; left: -6%; right: -6%; top: 18%; height: 60%; z-index: -1; pointer-events: none; animation: aeSwoosh 9s ease-in-out infinite alternate; }
.ae-swoosh svg { width: 100%; height: 100%; display: block; }

/* glossy capsule mixin */
[data-lens="aero"] .btn, [data-lens="aero"] .service-cta, [data-lens="aero"] .chips li { position: relative; overflow: hidden; }
[data-lens="aero"] .lens-fab { overflow: hidden; }
[data-lens="aero"] .btn::after, [data-lens="aero"] .service-cta::after, [data-lens="aero"] .lens-fab::after, [data-lens="aero"] .chips li::after {
  content: ""; position: absolute; left: 7%; right: 7%; top: 2px; height: 48%; border-radius: 999px;
  background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.12)); pointer-events: none; transform: none;
}

/* header = glass taskbar */
[data-lens="aero"] .site-header { color: #06324a; background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.62)); border-bottom: 1px solid rgba(255,255,255,.9); box-shadow: 0 6px 24px rgba(0,80,160,.15); }
[data-lens="aero"] .logo-word { font-family: "Ubuntu", sans-serif; letter-spacing: .04em; font-size: 15px; text-transform: none; }
[data-lens="aero"] .logo-word b { font-weight: 700; color: #0a84d0; }
[data-lens="aero"] .logo-word span { font-weight: 300; color: #2fae23; }
[data-lens="aero"] .logo-eye { --eye-white: url(#g-aero-white); --eye-line: #0a6fb3; --eye-iris: url(#g-aero-iris); --eye-ring: rgba(255,255,255,.7); --eye-pupil: #04304d; --eye-glint: #fff; }
[data-lens="aero"] .site-nav a { font-family: "Ubuntu", sans-serif; font-weight: 500; text-transform: none; letter-spacing: .02em; font-size: 14px; padding: 6px 14px; border-radius: 999px; }
[data-lens="aero"] .site-nav a:hover { background: linear-gradient(rgba(255,255,255,.95), rgba(190,240,255,.8)); box-shadow: inset 0 0 0 1px rgba(255,255,255,1), 0 2px 10px rgba(0,120,220,.25); }
[data-lens="aero"] .site-nav a::after, [data-lens="aero"] .header-mail::after { display: none; }
[data-lens="aero"] .header-mail { font-family: "Ubuntu", sans-serif; text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: 13px; color: #fff; background: var(--ae-gloss-blue); padding: 8px 16px; border-radius: 999px; border: 1px solid #0a79c0; text-shadow: 0 -1px 0 rgba(0,60,120,.4); box-shadow: 0 4px 12px rgba(0,110,200,.35); }

/* eye */
[data-lens="aero"] .eye .eye-line { stroke-width: 7; }
[data-lens="aero"] .eye .iris-ring { stroke-width: 2; }
[data-lens="aero"] .eye { filter: none; }

/* hero */
[data-lens="aero"] .hero { isolation: isolate; padding-top: calc(var(--header-h) + 24px); }
[data-lens="aero"] .hero-meta { color: #0a5f99; font-family: "Ubuntu", sans-serif; font-weight: 500; letter-spacing: .08em; background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.9); border-radius: 999px; padding: 10px 20px; box-shadow: 0 4px 16px rgba(0,90,170,.12); }
[data-lens="aero"] .hero-title { font-weight: 700; letter-spacing: -.02em; line-height: .88; text-transform: none; }
[data-lens="aero"] .ht-1 .ht-word, [data-lens="aero"] .ht-1 .ht-o {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 44%, #c5f0ff 50%, #69d0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-lens="aero"] .ht-1 .ht-word { -webkit-text-stroke: 1px rgba(0,60,130,.35); }
[data-lens="aero"] .ht-1 .ht-o { -webkit-text-stroke: 1px rgba(0,60,130,.35); }
[data-lens="aero"] .ht-2 { font-weight: 300; color: #0a84d0; -webkit-text-stroke: 0; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(255,255,255,.8); -webkit-box-reflect: below -.12em linear-gradient(transparent 55%, rgba(255,255,255,.35)); }
[data-lens="aero"] .ht-eye .eye .eye-line { stroke-width: 8; }
[data-lens="aero"] .hero-copy { position: relative; overflow: hidden; background: var(--ae-glass); border: 1px solid rgba(255,255,255,.95); border-radius: 26px; padding: clamp(18px, 2.4vw, 30px); box-shadow: 0 20px 50px rgba(0,70,140,.2), inset 0 1px 0 #fff; }
[data-lens="aero"] .hero-copy::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,0)); pointer-events: none; }
[data-lens="aero"] .hero-tagline { position: relative; font-weight: 500; color: #0a5f99; letter-spacing: -.01em; }
[data-lens="aero"] .hero-intro { position: relative; color: #1d4d68; }
[data-lens="aero"] .hero-intro strong { color: #0a84d0; }
[data-lens="aero"] .hero-badge { background: radial-gradient(circle at 34% 28%, #fff 0 8%, rgba(210,248,255,.9) 20%, rgba(80,200,255,.55) 60%, rgba(10,130,210,.7) 100%); box-shadow: 0 14px 30px rgba(0,90,170,.3), inset 0 -10px 20px rgba(50,205,50,.35), inset 0 6px 12px rgba(255,255,255,.9); }
[data-lens="aero"] .hero-badge text { font-family: "Ubuntu", sans-serif; font-weight: 700; fill: #0a5f99; letter-spacing: .14em; }
[data-lens="aero"] .scroll-cue { color: #0a5f99; font-family: "Ubuntu", sans-serif; }

/* marquee = glossy aqua bar */
[data-lens="aero"] .marquee { background: linear-gradient(180deg, #c7f5ff 0%, #57cdf8 48%, #14a2e6 52%, #5ad6ff 100%); color: #fff; font-family: "Ubuntu", sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; text-shadow: 0 -1px 0 rgba(0,70,140,.45), 0 2px 8px rgba(0,70,140,.3); border-top: 1px solid rgba(255,255,255,.95); border-bottom: 1px solid #0a79c0; box-shadow: 0 10px 30px rgba(0,90,170,.25); }
[data-lens="aero"] .marquee-track i { opacity: 1; color: #d2ffb8; }

/* glass sections */
[data-lens="aero"] .section { padding-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(60px, 8vw, 120px); }
[data-lens="aero"] .section > .wrap {
  position: relative; overflow: hidden;
  background: var(--ae-glass);
  border: 1px solid rgba(255,255,255,.95); border-radius: 32px;
  padding: clamp(24px, 4.5vw, 64px);
  box-shadow: 0 24px 70px rgba(0,70,140,.2), inset 0 1px 0 #fff, inset 0 -30px 60px rgba(0,160,230,.08);
}
[data-lens="aero"] .section > .wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130px; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
[data-lens="aero"] .section-label { position: relative; display: inline-flex; width: fit-content; justify-self: start; color: #fff; background: var(--ae-gloss-blue); border: 1px solid #0a79c0; border-radius: 999px; padding: 6px 14px; font-family: "Ubuntu", sans-serif; font-weight: 500; letter-spacing: .08em; text-shadow: 0 -1px 0 rgba(0,60,120,.4); box-shadow: 0 4px 12px rgba(0,110,200,.3); }
[data-lens="aero"] .section-label::after { display: none; }
[data-lens="aero"] .section-title { position: relative; font-weight: 700; text-transform: none; letter-spacing: -.03em; line-height: .98; color: #0a5f99; text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 10px 30px rgba(0,120,220,.25); }
[data-lens="aero"] .section-intro, [data-lens="aero"] .about-copy { color: #1d4d68; position: relative; }
[data-lens="aero"] .section-intro strong, [data-lens="aero"] .about-copy strong { color: #0a84d0; }
[data-lens="aero"] .about-copy .lead { color: #06324a; font-weight: 300; }
[data-lens="aero"] .facts { border-color: rgba(255,255,255,.9); }
[data-lens="aero"] .facts li { border-color: rgba(10,111,179,.18); }
[data-lens="aero"] .facts strong { background: linear-gradient(180deg, #16a6f0, #0a6fb3 50%, #2fae23); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
[data-lens="aero"] .facts span { color: #2c5f7b; font-family: "Ubuntu", sans-serif; font-weight: 500; }
[data-lens="aero"] .link-btn { color: #0a84d0; font-weight: 700; }
[data-lens="aero"] .chips li { color: #fff; border: 1px solid #219a16; background: var(--ae-gloss-green); text-shadow: 0 -1px 0 rgba(0,80,0,.35); box-shadow: 0 4px 12px rgba(40,160,30,.35); font-family: "Ubuntu", sans-serif; font-weight: 500; }

/* services */
[data-lens="aero"] .service-list { border-top: 0; display: grid; gap: 16px; }
[data-lens="aero"] .service { border: 1px solid rgba(255,255,255,.95); border-radius: 24px; background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(225,248,255,.38)); padding: clamp(18px, 2.6vw, 32px); box-shadow: 0 10px 30px rgba(0,80,160,.12), inset 0 1px 0 #fff; }
[data-lens="aero"] .service-num { display: inline-grid; place-items: center; width: 50px; height: 50px; padding: 0; border-radius: 50%; color: #fff; font-family: "Ubuntu", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0; background: radial-gradient(circle at 34% 28%, #d9f7ff 0 12%, #37bdf5 45%, #0a73c0 100%); box-shadow: 0 6px 14px rgba(0,100,190,.35), inset 0 -4px 8px rgba(50,205,50,.45); text-shadow: 0 -1px 0 rgba(0,50,100,.5); }
[data-lens="aero"] .service-title { font-weight: 700; text-transform: none; letter-spacing: -.02em; color: #0a5f99; }
[data-lens="aero"] .service-sub { color: #2a9d23; font-family: "Ubuntu", sans-serif; font-weight: 500; letter-spacing: .08em; }
[data-lens="aero"] .service-body p { color: #1d4d68; }
[data-lens="aero"] .service-cta { color: #fff; border: 1px solid #0a79c0; border-radius: 999px; padding: 9px 18px; background: var(--ae-gloss-blue); text-transform: none; letter-spacing: .02em; font-weight: 700; text-shadow: 0 -1px 0 rgba(0,60,120,.4); box-shadow: 0 5px 14px rgba(0,110,200,.35); }
[data-lens="aero"] .service-media { border-radius: 22px; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 14px 34px rgba(0,80,160,.3); background: #bfeeff; }
[data-lens="aero"] .media::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
[data-lens="aero"] .media::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); z-index: 1; animation: aeShine 5s ease-in-out infinite; pointer-events: none; }

/* why */
[data-lens="aero"] .why-grid { border-top: 0; gap: 16px; }
[data-lens="aero"] .why-item, [data-lens="aero"] .why-item:nth-child(even) { border: 1px solid rgba(255,255,255,.95) !important; border-radius: 24px; background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(225,248,255,.36)); padding: clamp(22px, 2.8vw, 36px); box-shadow: 0 10px 30px rgba(0,80,160,.12), inset 0 1px 0 #fff; }
[data-lens="aero"] .why-num { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 24px; color: #fff; -webkit-text-stroke: 0; font-weight: 700; letter-spacing: 0; background: radial-gradient(circle at 34% 28%, #eaffd9 0 12%, #6fdc4f 45%, #1f8f18 100%); box-shadow: 0 8px 18px rgba(40,150,30,.35), inset 0 -5px 10px rgba(0,120,220,.35); text-shadow: 0 -1px 0 rgba(0,60,0,.4); }
[data-lens="aero"] .why-item h3 { text-transform: none; font-weight: 700; color: #0a5f99; letter-spacing: -.01em; }
[data-lens="aero"] .why-item p { color: #1d4d68; }

/* contact */
[data-lens="aero"] .contact-kicker { color: #2a9d23; font-family: "Ubuntu", sans-serif; font-weight: 500; }
[data-lens="aero"] .contact-mail { font-weight: 500; letter-spacing: -.03em; border-bottom-color: rgba(10,111,179,.2); }
[data-lens="aero"] .contact-mail .fit-inner { background: linear-gradient(180deg, #33b8f5, #0a6fb3 55%, #2fae23); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(255,255,255,.9)); }
[data-lens="aero"] .contact-row p { color: #1d4d68; }
[data-lens="aero"] .btn { color: #fff; border: 1px solid #0a79c0; background: var(--ae-gloss-blue); text-transform: none; letter-spacing: .02em; font-family: "Ubuntu", sans-serif; font-weight: 700; font-size: 15px; text-shadow: 0 -1px 0 rgba(0,60,120,.45); box-shadow: 0 8px 20px rgba(0,110,200,.35); }
[data-lens="aero"] .btn--ghost { border-color: #219a16; background: var(--ae-gloss-green); text-shadow: 0 -1px 0 rgba(0,80,0,.4); box-shadow: 0 8px 20px rgba(40,160,30,.35); }

/* footer = grass hill */
[data-lens="aero"] .site-footer { background: radial-gradient(ellipse 130% 90% at 50% 130%, #1f8f18 0 40%, #5fd43f 62%, rgba(125,232,94,0) 63%); padding-top: 60px; }
[data-lens="aero"] .footer-big { color: transparent; -webkit-text-stroke: 0; background: linear-gradient(180deg, #fff 0 45%, #c5f0ff 50%, #69d0ff); -webkit-background-clip: text; background-clip: text; border-top: 0; font-family: "Ubuntu", sans-serif; font-weight: 700; letter-spacing: -.03em; filter: drop-shadow(0 6px 14px rgba(0,80,160,.35)); }
[data-lens="aero"] .footer-row { color: #eaffd9; font-family: "Ubuntu", sans-serif; text-shadow: 0 1px 2px rgba(0,60,0,.5); }
[data-lens="aero"] .footer-claim, [data-lens="aero"] .footer-top { color: #fff; }

/* switcher = Vista orb + glass window */
[data-lens="aero"] .lens-fab { color: #fff; background: var(--ae-gloss-blue); border: 1px solid #0a79c0; box-shadow: 0 10px 28px rgba(0,110,200,.45), inset 0 -6px 12px rgba(50,205,50,.35); text-shadow: 0 -1px 0 rgba(0,60,120,.5); font-family: "Ubuntu", sans-serif; }
[data-lens="aero"] .lens-fab::before { border-color: #fff; }
[data-lens="aero"] .lens-fab-label { text-transform: none; letter-spacing: .02em; font-size: 14px; font-weight: 700; position: relative; }
[data-lens="aero"] .lens-fab-eye { position: relative; --eye-white: url(#g-aero-white); --eye-line: #04304d; --eye-iris: url(#g-aero-iris); --eye-pupil: #04304d; --eye-glint: #fff; }
[data-lens="aero"] .lens-panel { color: #06324a; background: linear-gradient(160deg, rgba(240,252,255,.86), rgba(200,240,255,.72)); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,70,140,.35), inset 0 1px 0 #fff; font-family: "Ubuntu", sans-serif; }
[data-lens="aero"] .lens-panel-head { border-bottom: 1px solid rgba(10,111,179,.2); background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.1)); border-radius: 20px 20px 0 0; }
[data-lens="aero"] .lens-panel-title { text-transform: none; color: #0a5f99; font-weight: 700; }
[data-lens="aero"] .lens-panel-sub { color: #2c5f7b; }
[data-lens="aero"] .lens-close { border-color: rgba(10,111,179,.4); background: radial-gradient(circle at 34% 28%, #fff, #d4f4ff 50%, #8ad8ff); color: #0a5f99; }
[data-lens="aero"] .lens-list li { border-color: rgba(10,111,179,.14); }
[data-lens="aero"] .lens-opt:hover, [data-lens="aero"] .lens-opt:focus-visible { background: linear-gradient(rgba(255,255,255,.95), rgba(190,238,255,.9)); color: #06324a; box-shadow: inset 0 0 0 1px #7fd6ff; }
[data-lens="aero"] .lo-text b { text-transform: none; letter-spacing: .01em; font-weight: 700; font-size: 15px; }
[data-lens="aero"] .lens-panel-foot { border-top: 1px solid rgba(10,111,179,.2); }
[data-lens="aero"] .sound-toggle { border-color: #0a79c0; color: #0a5f99; text-transform: none; letter-spacing: .02em; }
[data-lens="aero"] .sound-toggle[aria-pressed="true"] { background: var(--ae-gloss-green); color: #fff; border-color: #219a16; }
[data-lens="aero"] .lens-warning { color: #2c5f7b; }
[data-lens="aero"] .toast { background: var(--ae-gloss-blue); color: #fff; border: 1px solid #0a79c0; text-transform: none; letter-spacing: .02em; font-family: "Ubuntu", sans-serif; }
[data-lens="aero"] .lens-hint { background: rgba(255,255,255,.85); color: #0a5f99; border: 1px solid #fff; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,80,160,.25); font-family: "Ubuntu", sans-serif; }
[data-lens="aero"] .lens-hint::after { border-color: #fff; }

/* veil */
.vl-aero { inset: 0; background: radial-gradient(circle at 30% 20%, #fff 0 6%, #bff0ff 20%, #33bdf7 55%, #0a6fc2 100%); }
.vl-bub { position: absolute; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.2) 24%, rgba(180,240,255,.15) 62%, rgba(255,255,255,.7) 100%); box-shadow: inset 0 0 8px rgba(255,255,255,.9); z-index: 2; }

@media (max-width: 760px) {
  [data-lens="aero"] .section > .wrap, [data-lens="aero"] .hero-copy { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(235,250,255,.74)); }
  [data-lens="aero"] .hero-meta { border-radius: 16px; }
  [data-lens="aero"] .ht-2 { -webkit-box-reflect: none; }
}

/* ==========================================================================
   BAUHAUS / SWISS STYLE — absolute precision
   ========================================================================== */
html[data-lens="bauhaus"] {
  --bg: #f4f4f0; --fg: #111111; --muted: #444444; --line: #111111; --soft: #f4f4f0;
  --dark-bg: #005a9b; --dark-fg: #f4f4f0; --dark-muted: rgba(244,244,240,.82); --dark-line: rgba(244,244,240,.45);
  --f-head: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "Jost", "Futura", sans-serif;
  --img-filter: grayscale(1) contrast(1.15);
  --bh-red: #e03c31; --bh-blue: #005a9b; --bh-yellow: #ffd100; --bh-ink: #111111; --bh-cream: #f4f4f0;
  --bh-ease: cubic-bezier(.7, 0, .2, 1);
  --eye-white: #f4f4f0; --eye-line: #111111; --eye-iris: #e03c31; --eye-ring: #ffd100; --eye-pupil: #111111; --eye-glint: #f4f4f0;
}
[data-lens="bauhaus"] body { background: #f4f4f0; font-size: 14px; line-height: 1.55; }
[data-lens="bauhaus"] ::selection { background: #ffd100; color: #111; }
@keyframes bhIn { from { clip-path: inset(0 0 100% 0); transform: translateY(40px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes bhInX { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bhSpin { to { transform: rotate(360deg); } }

/* mask reveals instead of fades */
html.js[data-lens="bauhaus"] .reveal { opacity: 1; transform: translateY(46px); clip-path: inset(0 0 98% 0); transition: transform .8s var(--bh-ease), clip-path .8s var(--bh-ease); }
html.js[data-lens="bauhaus"] .reveal.is-in { transform: none; clip-path: inset(-20% -20% -20% -20%); }

/* grid overlay + cursor */
.bh-cursor { position: fixed; left: 0; top: 0; z-index: 120; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #111; border-radius: 50%; pointer-events: none; transition: width .25s var(--bh-ease), height .25s var(--bh-ease), margin .25s var(--bh-ease), border-radius .25s, background .25s, clip-path .25s; mix-blend-mode: multiply; }
.bh-cursor[data-shape="square"] { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 0; background: #e03c31; }
.bh-cursor[data-shape="tri"] { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 0; background: #005a9b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* hero composition */
.bh-comp { position: absolute; z-index: 0; right: var(--pad); top: calc(var(--header-h) + 70px); width: 36vw; height: calc(100% - var(--header-h) - 250px); min-height: 300px; --px: 0; --py: 0; }
.bh-s { position: absolute; display: block; animation: bhIn .9s var(--bh-ease) both; }
.bh-circle { width: 62%; aspect-ratio: 1; left: 6%; top: 4%; border-radius: 50%; background: #e03c31; transform: translate(calc(var(--px) * -40px), calc(var(--py) * -40px)); animation-delay: .1s; }
.bh-square { width: 40%; aspect-ratio: 1; right: 0; top: 44%; background: #005a9b; transform: translate(calc(var(--px) * 30px), calc(var(--py) * 30px)); animation-delay: .25s; }
.bh-tri { width: 46%; aspect-ratio: 1; left: 0; bottom: 0; background: #ffd100; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translate(calc(var(--px) * 20px), calc(var(--py) * 20px)); animation: bhInX .9s var(--bh-ease) .4s both; }
.bh-bar { width: 86%; height: 16px; left: 8%; top: 64%; background: #111; transform-origin: 0 50%; transform: rotate(-16deg) translateX(calc(var(--px) * 50px)); animation: bhInX .8s var(--bh-ease) .5s both; }
.bh-half { width: 26%; aspect-ratio: 2 / 1; right: 8%; top: 6%; background: #111; border-radius: 999px 999px 0 0; transform: translate(calc(var(--px) * 60px), 0); animation-delay: .35s; }
.bh-dot { width: 7%; aspect-ratio: 1; left: 66%; top: 36%; border-radius: 50%; background: #111; animation-delay: .6s; }
.bh-line { width: 2px; top: 0; bottom: 0; left: 74%; background: #111; animation: bhIn 1s var(--bh-ease) .2s both; }
.bh-fig { position: absolute; right: 0; bottom: -46px; font: 500 10px/1.4 "Jost", sans-serif; letter-spacing: .12em; text-transform: uppercase; text-align: right; color: #111; }

/* header */
[data-lens="bauhaus"] .site-header { mix-blend-mode: normal; background: #f4f4f0; color: #111; border-bottom: 3px solid #111; }
[data-lens="bauhaus"] .logo-word { font-family: "Inter", sans-serif; letter-spacing: -.02em; font-size: 16px; text-transform: none; }
[data-lens="bauhaus"] .logo-word b { font-weight: 900; }
[data-lens="bauhaus"] .logo-word span { font-weight: 400; }
[data-lens="bauhaus"] .logo-eye { --eye-white: #f4f4f0; --eye-line: #111; --eye-iris: #e03c31; --eye-ring: #ffd100; --eye-pupil: #111; --eye-glint: #f4f4f0; }
[data-lens="bauhaus"] .site-nav { counter-reset: nav; gap: 28px; }
[data-lens="bauhaus"] .site-nav a { font-family: "Jost", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .1em; counter-increment: nav; }
[data-lens="bauhaus"] .site-nav a::before { content: "0" counter(nav) " "; color: #e03c31; margin-right: 6px; }
[data-lens="bauhaus"] .site-nav a::after, [data-lens="bauhaus"] .header-mail::after { height: 3px; bottom: -8px; background: #e03c31; }
[data-lens="bauhaus"] .header-mail { font-family: "Jost", sans-serif; font-weight: 500; font-size: 12px; }

/* eye */
[data-lens="bauhaus"] .eye .eye-line { stroke-width: 9; stroke-linejoin: miter; }
[data-lens="bauhaus"] .eye .iris-ring { stroke-width: 3.5; }
[data-lens="bauhaus"] .eye .glint { display: none; }

/* hero */
[data-lens="bauhaus"] .hero { background: #f4f4f0; }
[data-lens="bauhaus"] .hero > *:not(.bh-comp):not(.scroll-cue) { position: relative; z-index: 1; }
[data-lens="bauhaus"] .hero-meta { font-family: "Jost", sans-serif; font-weight: 500; color: #111; border-bottom: 1px solid #111; font-size: 11px; }
[data-lens="bauhaus"] .hero-meta span::before { content: "■ "; color: #e03c31; }
[data-lens="bauhaus"] .hero-meta span:nth-child(2)::before { color: #005a9b; }
[data-lens="bauhaus"] .hero-meta span:nth-child(3)::before { content: "● "; color: #111; }
[data-lens="bauhaus"] .hero-title { font-weight: 900; letter-spacing: -.065em; line-height: .78; text-transform: none; }
[data-lens="bauhaus"] .ht-line { --fit-scale: .56; }
[data-lens="bauhaus"] .ht-1 .ht-word { display: block; }
[data-lens="bauhaus"] .ht-2 { color: #e03c31; -webkit-text-stroke: 0; margin-top: .12em; letter-spacing: -.05em; }
[data-lens="bauhaus"] .ht-eye .eye .eye-line { stroke-width: 10; }
[data-lens="bauhaus"] .hero-foot { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; }
[data-lens="bauhaus"] .hero-copy { grid-column: 1; max-width: none; }
[data-lens="bauhaus"] .hero-tagline { font-weight: 900; letter-spacing: -.035em; font-size: clamp(20px, 2vw, 28px); line-height: 1.05; }
[data-lens="bauhaus"] .hero-intro { font-size: 13px; color: #333; max-width: 52ch; }
[data-lens="bauhaus"] .hero-badge { grid-column: 3; background: #111; border-radius: 50%; }
[data-lens="bauhaus"] .hero-badge text { font-family: "Jost", sans-serif; font-weight: 500; fill: #f4f4f0; letter-spacing: .2em; font-size: 15px; }
[data-lens="bauhaus"] .hero-badge .badge-eye { --eye-white: #111; --eye-line: #f4f4f0; --eye-iris: #ffd100; --eye-pupil: #111; }
[data-lens="bauhaus"] .scroll-cue { color: #111; font-family: "Jost", sans-serif; }

/* marquee */
[data-lens="bauhaus"] .marquee { background: #111; color: #f4f4f0; font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: -.03em; text-transform: none; border-top: 3px solid #111; }
[data-lens="bauhaus"] .marquee-track i { font-size: 0; opacity: 1; }
[data-lens="bauhaus"] .marquee-track i::before { font-size: clamp(18px, 2.6vw, 36px); content: "●"; color: #e03c31; }
[data-lens="bauhaus"] .marquee-track i:nth-of-type(3n+2)::before { content: "■"; color: #005a9b; }
[data-lens="bauhaus"] .marquee-track i:nth-of-type(3n)::before { content: "▲"; color: #ffd100; }

/* structure */
[data-lens="bauhaus"] .section > .wrap { position: relative; z-index: 1; }
[data-lens="bauhaus"] .section::before { content: attr(data-section); position: absolute; z-index: 0; top: clamp(24px, 4vw, 60px); right: var(--pad); font: 900 clamp(110px, 17vw, 270px)/.74 "Inter", sans-serif; letter-spacing: -.07em; color: #e03c31; pointer-events: none; }
[data-lens="bauhaus"] .section-label { font-family: "Jost", sans-serif; font-weight: 500; font-size: 11px; letter-spacing: .14em; color: inherit; }
[data-lens="bauhaus"] .section-label::before { content: ""; width: 12px; height: 12px; background: #e03c31; flex: none; }
[data-lens="bauhaus"] .section-label::after { flex: 0 0 clamp(60px, 10vw, 160px); height: 1px; opacity: 1; }
[data-lens="bauhaus"] .section-title { font-weight: 900; text-transform: none; letter-spacing: -.06em; line-height: .84; font-size: clamp(44px, 7.6vw, 128px); }
[data-lens="bauhaus"] .section-intro { font-size: 13px; color: #333; }

/* about: cobalt block */
[data-lens="bauhaus"] .about { background: #005a9b; color: #f4f4f0; }
[data-lens="bauhaus"] .about::before { color: #ffd100; }
[data-lens="bauhaus"] .about .section-label::before { background: #ffd100; }
[data-lens="bauhaus"] .about .section-title { font-size: clamp(40px, 5.6vw, 96px); }
[data-lens="bauhaus"] .facts { border-top: 3px solid #f4f4f0; }
[data-lens="bauhaus"] .facts strong { font-weight: 900; letter-spacing: -.06em; color: #ffd100; font-size: clamp(46px, 5vw, 80px); }
[data-lens="bauhaus"] .facts span { font-family: "Jost", sans-serif; font-weight: 500; font-size: 11px; color: #f4f4f0; }
[data-lens="bauhaus"] .about-copy { font-size: 14px; color: rgba(244,244,240,.86); padding-top: clamp(0px, 8vw, 140px); }
[data-lens="bauhaus"] .about-copy .lead { font-weight: 400; letter-spacing: -.02em; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.25; color: #f4f4f0; }
[data-lens="bauhaus"] .chips li { border-radius: 0; border: 2px solid #f4f4f0; font-family: "Jost", sans-serif; font-weight: 500; }
[data-lens="bauhaus"] .chips li:nth-child(1) { background: #e03c31; border-color: #e03c31; }
[data-lens="bauhaus"] .chips li:nth-child(2) { background: #ffd100; border-color: #ffd100; color: #111; }
[data-lens="bauhaus"] .link-btn { color: #ffd100; font-family: "Jost", sans-serif; font-weight: 500; }

/* services: coloured columns */
[data-lens="bauhaus"] .services-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; margin-bottom: clamp(30px, 4vw, 60px); }
[data-lens="bauhaus"] .services-head .section-label { grid-column: 1 / -1; }
[data-lens="bauhaus"] .services-head .section-title { grid-column: 1 / span 8; margin-bottom: 0; }
[data-lens="bauhaus"] .services-head .section-intro { grid-column: 1 / span 6; margin: 22px 0 0; }
[data-lens="bauhaus"] .service-list { border-top: 4px solid #111; }
[data-lens="bauhaus"] .service { border-bottom: 1px solid #111; }
[data-lens="bauhaus"] .service:nth-child(1) { background: #f4f4f0; color: #111; }
[data-lens="bauhaus"] .service:nth-child(2) { background: #005a9b; color: #f4f4f0; }
[data-lens="bauhaus"] .service:nth-child(3) { background: #ffd100; color: #111; }
[data-lens="bauhaus"] .service:nth-child(4) { background: #e03c31; color: #f4f4f0; }
[data-lens="bauhaus"] .service:nth-child(5) { background: #111; color: #f4f4f0; }
[data-lens="bauhaus"] .service-num { font-weight: 900; letter-spacing: -.06em; font-size: clamp(44px, 5vw, 84px); line-height: .8; color: inherit; padding: 0; }
[data-lens="bauhaus"] .service-title { font-weight: 900; text-transform: none; letter-spacing: -.045em; line-height: .92; }
[data-lens="bauhaus"] .service-sub { font-family: "Jost", sans-serif; font-weight: 500; font-size: 11px; color: inherit; opacity: .8; }
[data-lens="bauhaus"] .service-body p { color: inherit; opacity: .88; font-size: 13px; }
[data-lens="bauhaus"] .service-cta { font-family: "Jost", sans-serif; font-weight: 700; color: inherit; border-bottom-width: 2px; }
[data-lens="bauhaus"] .service-media { background: transparent; }
[data-lens="bauhaus"] .service:nth-child(2) .media img, [data-lens="bauhaus"] .service:nth-child(3) .media img, [data-lens="bauhaus"] .service:nth-child(4) .media img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.35) brightness(1.1); }
@media (min-width: 1081px) {
  [data-lens="bauhaus"] .service-list { display: flex; height: clamp(600px, 74vh, 720px); border-bottom: 4px solid #111; }
  [data-lens="bauhaus"] .service { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; border: 0; border-right: 1px solid #111; overflow: hidden; transition: flex-grow .75s var(--bh-ease), transform .8s var(--bh-ease), clip-path .8s var(--bh-ease); cursor: default; }
  [data-lens="bauhaus"] .service:last-child { border-right: 0; }
  [data-lens="bauhaus"] .service-title { position: absolute; left: 22px; bottom: 24px; writing-mode: vertical-rl; transform: rotate(180deg) !important; white-space: nowrap; font-size: clamp(24px, 2.2vw, 36px); }
  [data-lens="bauhaus"] .service-sub, [data-lens="bauhaus"] .service-body { opacity: 0; transform: translateY(24px); transition: opacity .3s, transform .5s var(--bh-ease); }
  [data-lens="bauhaus"] .service-body { width: min(330px, 25vw); }
  [data-lens="bauhaus"] .service-media { position: absolute; right: 22px; bottom: 24px; width: min(210px, 14.5vw); aspect-ratio: 3 / 4; clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--bh-ease); }
  [data-lens="bauhaus"] .service:hover, [data-lens="bauhaus"] .service:focus-within,
  [data-lens="bauhaus"] .service-list:not(:hover):not(:focus-within) .service:first-child { flex-grow: 3.4; }
  [data-lens="bauhaus"] .service:hover .service-title, [data-lens="bauhaus"] .service:focus-within .service-title,
  [data-lens="bauhaus"] .service-list:not(:hover):not(:focus-within) .service:first-child .service-title { position: static; writing-mode: horizontal-tb; transform: none !important; white-space: normal; width: min(340px, 26vw); }
  [data-lens="bauhaus"] .service:hover .service-sub, [data-lens="bauhaus"] .service:focus-within .service-sub, [data-lens="bauhaus"] .service:hover .service-body, [data-lens="bauhaus"] .service:focus-within .service-body,
  [data-lens="bauhaus"] .service-list:not(:hover):not(:focus-within) .service:first-child .service-sub,
  [data-lens="bauhaus"] .service-list:not(:hover):not(:focus-within) .service:first-child .service-body { opacity: 1; transform: none; transition-delay: .25s; }
  [data-lens="bauhaus"] .service:hover .service-media, [data-lens="bauhaus"] .service:focus-within .service-media,
  [data-lens="bauhaus"] .service-list:not(:hover):not(:focus-within) .service:first-child .service-media { clip-path: inset(0 0 0 0); transition-delay: .2s; }
  [data-lens="bauhaus"] .service:hover .media img { transform: none; }
}
@media (max-width: 1080px) {
  [data-lens="bauhaus"] .service { padding: 28px clamp(18px, 4vw, 32px); }
}

/* why: the grid breathes */
[data-lens="bauhaus"] .why { background: #f4f4f0; }
[data-lens="bauhaus"] .why::before { color: #005a9b; }
[data-lens="bauhaus"] .why-title { max-width: 14ch; }
[data-lens="bauhaus"] .why-grid { border-top: 4px solid #111; transition: grid-template-columns .6s var(--bh-ease); }
[data-lens="bauhaus"] .why-grid:has(.why-item:nth-child(odd):hover) { grid-template-columns: 1.8fr 1fr; }
[data-lens="bauhaus"] .why-grid:has(.why-item:nth-child(even):hover) { grid-template-columns: 1fr 1.8fr; }
[data-lens="bauhaus"] .why-item { border-color: #111; padding-top: clamp(80px, 8vw, 110px); }
[data-lens="bauhaus"] .why-item::after { content: ""; position: absolute; top: clamp(24px, 3vw, 40px); left: 0; width: 38px; height: 38px; background: #e03c31; border-radius: 50%; transition: transform .6s var(--bh-ease); }
[data-lens="bauhaus"] .why-item:nth-child(even)::after { left: clamp(20px, 3vw, 48px); }
[data-lens="bauhaus"] .why-item:nth-child(2)::after { background: #005a9b; border-radius: 0; }
[data-lens="bauhaus"] .why-item:nth-child(3)::after { background: #ffd100; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-lens="bauhaus"] .why-item:nth-child(4)::after { background: #111; border-radius: 999px 999px 0 0; height: 19px; top: calc(clamp(24px, 3vw, 40px) + 19px); }
[data-lens="bauhaus"] .why-item:hover::after { transform: rotate(90deg) scale(1.2); }
[data-lens="bauhaus"] .why-num { font-weight: 900; letter-spacing: -.06em; -webkit-text-stroke: 0; color: #111; }
[data-lens="bauhaus"] .why-item h3 { font-weight: 900; text-transform: none; letter-spacing: -.035em; font-size: clamp(22px, 2vw, 30px); }
[data-lens="bauhaus"] .why-item p { font-size: 13px; color: #333; max-width: 52ch; }

/* contact: red block */
[data-lens="bauhaus"] .contact { background: #e03c31; color: #111; --line: #111; --dark-line: #111; --dark-fg: #111; --dark-muted: #111; }
[data-lens="bauhaus"] .contact::before { color: #111; opacity: .14; }
[data-lens="bauhaus"] .contact .section-label::before { background: #111; }
[data-lens="bauhaus"] .contact-kicker { font-family: "Jost", sans-serif; font-weight: 500; color: #111; }
[data-lens="bauhaus"] .contact-mail { letter-spacing: -.06em; color: #111; border-bottom: 4px solid #111; }
[data-lens="bauhaus"] .contact-row p { color: #111; font-size: 13px; }
[data-lens="bauhaus"] .btn { border-radius: 0; background: #111; color: #f4f4f0; border: 2px solid #111; font-family: "Jost", sans-serif; font-weight: 700; }
[data-lens="bauhaus"] .btn--ghost { background: #f4f4f0; color: #111; }
[data-lens="bauhaus"] .btn:hover { transform: none; background: #ffd100; color: #111; border-color: #111; }

/* footer */
[data-lens="bauhaus"] .site-footer { background: #111; }
[data-lens="bauhaus"] .footer-big { font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: -.07em; color: #f4f4f0; -webkit-text-stroke: 0; border-top: 0; }
[data-lens="bauhaus"] .footer-row { font-family: "Jost", sans-serif; font-weight: 500; font-size: 11px; }
[data-lens="bauhaus"] .footer-claim { color: #ffd100; }

/* switcher */
[data-lens="bauhaus"] .lens-fab { border-radius: 0; background: linear-gradient(90deg, #e03c31 0 62px, #111 62px); border: 0; box-shadow: none; padding-left: 12px; font-family: "Jost", sans-serif; }
[data-lens="bauhaus"] .lens-fab::before { display: none; }
[data-lens="bauhaus"] .lens-fab:hover { transform: none; background: linear-gradient(90deg, #005a9b 0 62px, #111 62px); }
[data-lens="bauhaus"] .lens-fab-eye { --eye-white: #e03c31; --eye-line: #f4f4f0; --eye-iris: #f4f4f0; --eye-ring: #111; --eye-pupil: #111; margin-right: 10px; }
[data-lens="bauhaus"] .lens-fab-label { font-weight: 500; }
[data-lens="bauhaus"] .lens-panel { border-radius: 0; background: #f4f4f0; border: 3px solid #111; box-shadow: 12px 12px 0 #e03c31; animation: bhIn .5s var(--bh-ease) both; font-family: "Inter", sans-serif; }
[data-lens="bauhaus"] .lens-panel-head { background: #111; color: #f4f4f0; border-bottom: 3px solid #111; }
[data-lens="bauhaus"] .lens-panel-title { font-weight: 900; text-transform: none; letter-spacing: -.04em; font-size: 26px; }
[data-lens="bauhaus"] .lens-panel-sub { color: #ffd100; font-family: "Jost", sans-serif; }
[data-lens="bauhaus"] .lens-close { border-radius: 0; background: #e03c31; color: #f4f4f0; border-color: #e03c31; }
[data-lens="bauhaus"] .lens-list li { border-color: #111; }
[data-lens="bauhaus"] .lens-opt:hover, [data-lens="bauhaus"] .lens-opt:focus-visible { background: #ffd100; color: #111; }
[data-lens="bauhaus"] .lo-text b { font-weight: 900; text-transform: none; letter-spacing: -.02em; font-size: 16px; }
[data-lens="bauhaus"] .lens-opt kbd { border-radius: 0; font-family: "Jost", sans-serif; }
[data-lens="bauhaus"] .lens-panel-foot { border-top: 3px solid #111; }
[data-lens="bauhaus"] .sound-toggle { border-radius: 0; font-family: "Jost", sans-serif; }
[data-lens="bauhaus"] .toast { border-radius: 0; background: #111; font-family: "Jost", sans-serif; }
[data-lens="bauhaus"] .lens-hint { background: #ffd100; border: 2px solid #111; box-shadow: 5px 5px 0 #111; font-family: "Jost", sans-serif; }

/* veil */
.vl-col { position: absolute; top: 0; height: 100%; }

@media (max-width: 1080px) {
  .bh-comp { width: 44vw; height: 38vh; top: calc(var(--header-h) + 60px); }
  [data-lens="bauhaus"] .ht-line { --fit-scale: .62; }
  [data-lens="bauhaus"] .services-head .section-title, [data-lens="bauhaus"] .services-head .section-intro { grid-column: 1 / -1; }
  [data-lens="bauhaus"] .services-head .section-intro { margin-top: 20px; }
  [data-lens="bauhaus"] .hero-foot { grid-template-columns: minmax(0, 1fr) auto; }
  [data-lens="bauhaus"] .hero-badge { grid-column: 2; }
}
@media (max-width: 760px) {
  .bh-comp { width: 58vw; height: 34vh; min-height: 0; right: 0; top: calc(var(--header-h) + 50px); opacity: .95; }
  .bh-fig { display: none; }
  [data-lens="bauhaus"] .ht-line { --fit-scale: 1; }
  [data-lens="bauhaus"] .hero-title { mix-blend-mode: multiply; }
  [data-lens="bauhaus"] .hero-foot { grid-template-columns: 1fr; }
  [data-lens="bauhaus"] .hero-badge { grid-column: auto; }
  [data-lens="bauhaus"] .section::before { font-size: 96px; opacity: .9; }
  [data-lens="bauhaus"] .why-grid:has(.why-item:hover) { grid-template-columns: 1fr; }
  [data-lens="bauhaus"] .why-item:nth-child(even)::after { left: 0; }
}

/* ==========================================================================
   Y2K / FRUTIGER AERO — v2 additions: real glass (WebGL), pointer-lit slabs,
   Aqua pinstripes, one pure red for the thing you are meant to touch
   ========================================================================== */
html[data-lens="aero"] { --ae-gloss-red: linear-gradient(180deg, #ffb0a2 0%, #ff4a2a 46%, #d61200 52%, #ff6a4a 100%); }
.ae-gl { image-rendering: auto; }
[data-lens="aero"] .section > .wrap {
  background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(235,250,255,.66)), repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 4px);
  box-shadow: 0 24px 70px rgba(0,70,140,.22), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.7), inset 0 -34px 60px rgba(0,160,230,.10), inset 0 0 0 1px rgba(255,255,255,.35);
}
.ae-light { position: absolute; left: 0; top: 0; width: 50vmax; height: 50vmax; margin: -25vmax 0 0 -25vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55) 0, rgba(255,255,255,.16) 30%, transparent 62%); mix-blend-mode: soft-light; pointer-events: none; will-change: transform; }
[data-lens="aero"] .ht-2 { text-shadow: 0 1px 0 #fff, 0 2px 0 #d9f4ff, 0 3px 0 #b8e6ff, 0 4px 0 #9adcff, 0 10px 22px rgba(0,80,160,.35); }
[data-lens="aero"] .header-mail, [data-lens="aero"] .btn:not(.btn--ghost) { background: var(--ae-gloss-red); border-color: #b81000; box-shadow: 0 6px 16px rgba(214,18,0,.35); text-shadow: 0 -1px 0 rgba(120,0,0,.45); }
[data-lens="aero"] .service-cta { background: var(--ae-gloss-blue); }
[data-lens="aero"] .service-cta:hover, [data-lens="aero"] .header-mail:hover { filter: brightness(1.08) saturate(1.1); }
[data-lens="aero"] .lens-fab { box-shadow: 0 10px 28px rgba(0,110,200,.45), inset 0 -6px 12px rgba(50,205,50,.35), inset 0 1px 0 #fff; }

/* ==========================================================================
   GRUNGE — the end of print: overprint, photocopy, scratched film
   ========================================================================== */
html[data-lens="grunge"] {
  --bg: transparent; --fg: #0d0b0a; --muted: #2b2622; --line: #0d0b0a; --soft: transparent;
  --dark-bg: #0d0b0a; --dark-fg: #efe9d8; --dark-muted: #cbc2a9; --dark-line: rgba(239,233,216,.32);
  --f-head: "Anton", Impact, "Arial Narrow", sans-serif;
  --f-body: "Courier Prime", "Courier New", monospace;
  --img-filter: grayscale(1) contrast(3.2) brightness(1.12);
  --gr-black: #0d0b0a; --gr-red: #e2231a; --gr-copy: #d9d1bd; --gr-white: #efe9d8; --gr-yellow: #f2c400;
  --gr-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .04 0 0 0 0 .03 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gr-dots: radial-gradient(circle, rgba(13,11,10,.7) 0 26%, transparent 30%);
  --mx: 4px; --my: 3px;
  --eye-white: #efe9d8; --eye-line: #0d0b0a; --eye-iris: #e2231a; --eye-ring: #0d0b0a; --eye-pupil: #0d0b0a; --eye-glint: #efe9d8;
}
[data-lens="grunge"] body { background: #e2231a; font-size: 14px; }
[data-lens="grunge"] ::selection { background: #0d0b0a; color: #e2231a; }
[data-lens="grunge"] .hero, [data-lens="grunge"] .why { background: transparent; }
@keyframes grJit { 0%, 100% { transform: translate(0, 0); } 9% { transform: translate(-1px, 1px); } 21% { transform: translate(2px, -1px) skewX(.4deg); } 33% { transform: translate(0, 2px); } 47% { transform: translate(-2px, 0); } 58% { transform: translate(1px, -2px); } 71% { transform: translate(0, 1px) skewX(-.5deg); } 84% { transform: translate(2px, 1px); } }
@keyframes grFilm { 0% { transform: translateX(0); } 14% { transform: translateX(37px); } 28% { transform: translateX(-52px); } 42% { transform: translateX(120px); } 57% { transform: translateX(-9px); } 71% { transform: translateX(63px); } 85% { transform: translateX(-140px); } 100% { transform: translateX(12px); } }

/* layers: the red plate, the photocopied collage, halftone, grain, scratched film */
.gr-bg { position: absolute; inset: 0; overflow: hidden; background: #e2231a; }
.gr-bg::before {
  content: ""; position: absolute; inset: 0;
  background: url(../img/ads.jpg) left 4% top 4% / 44vw auto no-repeat, url(../img/seo.jpg) right -6% top 10% / 36vw auto no-repeat, url(../img/manager.jpg) left 30% bottom -8% / 40vw auto no-repeat, url(../img/web.jpg) right 8% bottom 2% / 30vw auto no-repeat;
  filter: grayscale(1) contrast(5) brightness(1.15); mix-blend-mode: multiply; opacity: .42;
}
.gr-bg::after { content: ""; position: absolute; inset: 0; background: var(--gr-dots) 0 0 / 6px 6px; mix-blend-mode: multiply; opacity: .2; }
.gr-dots { position: absolute; inset: 0; background: var(--gr-dots) 0 0 / 5px 5px; mix-blend-mode: multiply; opacity: .14; }
.gr-grain { position: absolute; inset: 0; background-image: var(--gr-noise); opacity: .5; mix-blend-mode: multiply; }
.gr-film { position: absolute; top: 0; bottom: 0; left: -300px; width: calc(100% + 600px); opacity: .8; background: repeating-linear-gradient(90deg, transparent 0 131px, rgba(255,255,255,.10) 131px 132px, transparent 132px 340px, rgba(0,0,0,.14) 340px 341px, transparent 341px 577px, rgba(255,255,255,.07) 577px 578px); animation: grFilm 1.1s steps(7) infinite; will-change: transform; }
.gr-burn { position: absolute; right: 5%; top: 8%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, #f2c400 30%, #7a3b17 52%, transparent 70%); opacity: 0; mix-blend-mode: screen; }
.gr-burn.is-on { opacity: .95; }
.gr-marker { mix-blend-mode: multiply; }
.gr-reg { position: fixed; left: 0; top: 0; z-index: 120; width: 40px; height: 40px; margin: -20px 0 0 -20px; color: #e2231a; pointer-events: none; mix-blend-mode: multiply; }
.gr-reg svg { width: 100%; height: 100%; display: block; }
.gr-x1 { opacity: .5; }
.gr-x2 { filter: blur(.7px); opacity: .8; }
.gr-x3 { display: inline-block; transform: rotate(-3deg) translateY(1px); }
.gr-x4 { font-weight: 700; letter-spacing: -.04em; text-shadow: 1px 0 0 currentColor; }
html.gr-slip .hero-title, html.gr-slip .section-title, html.gr-slip .service-title, html.gr-slip .contact-mail, html.gr-slip .footer-big, html.gr-slip .marquee { filter: url(#fx-tear); }
.gr-frag { position: absolute; z-index: 5; font: 400 clamp(11px, 1vw, 14px)/1.3 "Special Elite", monospace; letter-spacing: .04em; color: #efe9d8; background: #0d0b0a; padding: 5px 9px 3px; transform: rotate(var(--r)); pointer-events: none; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.about .gr-frag, .contact .gr-frag { color: #0d0b0a; background: #efe9d8; }
.services .gr-frag { background: #e2231a; color: #efe9d8; }
.gr-paid { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 12px); z-index: 2; text-align: center; font: 400 8px/1 "Silkscreen", monospace; letter-spacing: .28em; color: #efe9d8; text-transform: uppercase; pointer-events: none; }

/* header = photocopied masthead */
[data-lens="grunge"] .site-header { mix-blend-mode: normal; background: #0d0b0a; background-image: var(--gr-noise); color: #efe9d8; border-bottom: 2px solid #e2231a; }
[data-lens="grunge"] .logo-word { font-family: "Anton", Impact, sans-serif; font-size: 20px; letter-spacing: .02em; }
[data-lens="grunge"] .logo-word b { font-weight: 400; color: #e2231a; text-shadow: 2px 1px 0 #efe9d8; }
[data-lens="grunge"] .logo-word span { font: 400 8px/1 "Silkscreen", monospace; color: #efe9d8; letter-spacing: .14em; vertical-align: middle; }
[data-lens="grunge"] .logo-eye { --eye-white: #efe9d8; --eye-line: #efe9d8; --eye-iris: #e2231a; --eye-ring: #0d0b0a; --eye-pupil: #0d0b0a; --eye-glint: #efe9d8; }
[data-lens="grunge"] .site-nav { gap: 0; }
[data-lens="grunge"] .site-nav a { font: 400 8px/1 "Silkscreen", monospace; letter-spacing: .1em; padding: 0 14px; color: #efe9d8; border-right: 1px solid rgba(239,233,216,.35); }
[data-lens="grunge"] .site-nav a:first-child { border-left: 1px solid rgba(239,233,216,.35); }
[data-lens="grunge"] .site-nav a:hover { color: #e2231a; }
[data-lens="grunge"] .site-nav a::after, [data-lens="grunge"] .header-mail::after { display: none; }
[data-lens="grunge"] .header-mail { font: 400 8px/1 "Silkscreen", monospace; letter-spacing: .08em; color: #0d0b0a; background: #efe9d8; padding: 7px 10px 6px; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 #e2231a; }

/* eye */
[data-lens="grunge"] .eye { filter: url(#fx-rough); }
[data-lens="grunge"] .ht-eye .eye { filter: none; }
[data-lens="grunge"] .eye .eye-line { stroke-width: 10; }

/* hero = red plate, black title, slipped white ghost, film jitter */
[data-lens="grunge"] .hero { isolation: isolate; overflow: hidden; padding-top: calc(var(--header-h) + 38px); }
[data-lens="grunge"] .hero > * { position: relative; z-index: 1; }
[data-lens="grunge"] .hero-meta { margin-top: 0; font: 400 8px/1.6 "Silkscreen", monospace; color: #0d0b0a; border-bottom: 2px solid #0d0b0a; letter-spacing: .1em; }
[data-lens="grunge"] .hero-title { font-weight: 400; letter-spacing: 0; line-height: .86; text-transform: uppercase; animation: grJit 1.7s steps(1) infinite; }
@media (hover: hover) and (pointer: fine) { [data-lens="grunge"] .ht-1 { filter: url(#fx-scratch); } }
[data-lens="grunge"] .ht-1 { color: #0d0b0a; text-shadow: var(--mx) var(--my) 0 #efe9d8; }
[data-lens="grunge"] .ht-2 { --fit-scale: 1.16; color: rgba(13,11,10,.22); -webkit-text-stroke: 2.5px #efe9d8; margin-top: -.34em; transform: rotate(-2.6deg) translateX(-3vw); opacity: .96; }
[data-lens="grunge"] .ht-eye .eye .eye-line { stroke-width: 11; }
[data-lens="grunge"] .hero-foot { align-items: end; margin-top: -2vw; }
[data-lens="grunge"] .hero-copy { position: relative; max-width: 560px; background: #d9d1bd; background-image: var(--gr-noise); color: #0d0b0a; padding: 22px 26px 20px; transform: rotate(-1.4deg); box-shadow: 8px 8px 0 #0d0b0a; }
[data-lens="grunge"] .hero-copy::before { content: ""; position: absolute; left: 14px; top: -6px; width: 22px; height: 6px; background: #8a8a86; box-shadow: 0 1px 0 #444, 300px 0 0 #8a8a86, 300px 1px 0 #444; }
[data-lens="grunge"] .hero-tagline { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 40px); line-height: .95; color: #e2231a; text-shadow: 2px 2px 0 #0d0b0a; letter-spacing: .01em; }
[data-lens="grunge"] .hero-intro { font-family: "Special Elite", monospace; color: #0d0b0a; font-size: 13.5px; line-height: 1.8; }
[data-lens="grunge"] .hero-intro strong { font-weight: 400; background: #0d0b0a; color: #d9d1bd; padding: 0 4px; }
[data-lens="grunge"] .hero-badge { filter: url(#fx-rough); background: #0d0b0a; border-radius: 50%; }
[data-lens="grunge"] .hero-badge svg { animation-duration: 40s; }
[data-lens="grunge"] .hero-badge text { font-family: "Special Elite", monospace; font-weight: 400; fill: #efe9d8; letter-spacing: .1em; }
[data-lens="grunge"] .hero-badge .badge-eye { --eye-white: #efe9d8; --eye-line: #efe9d8; --eye-iris: #e2231a; --eye-ring: #0d0b0a; }
[data-lens="grunge"] .scroll-cue { display: none; }

/* marquee = black tape, red overprint */
[data-lens="grunge"] .marquee { background: #0d0b0a; color: #efe9d8; font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .01em; transform: rotate(-1.6deg) scale(1.04); box-shadow: 0 0 0 3px #0d0b0a, 6px 8px 0 #e2231a; text-shadow: var(--mx) var(--my) 0 #e2231a; }
[data-lens="grunge"] .marquee::before { content: ""; position: absolute; inset: 0; background: var(--gr-dots) 0 0 / 5px 5px; opacity: .2; pointer-events: none; }
[data-lens="grunge"] .marquee-track i { font-size: 0; opacity: 1; }
[data-lens="grunge"] .marquee-track i::before { content: "✗"; font-size: clamp(22px, 3.4vw, 48px); color: #e2231a; }

/* sections */
[data-lens="grunge"] .section-label { font: 400 8px/1.6 "Silkscreen", monospace; letter-spacing: .2em; color: inherit; }
[data-lens="grunge"] .section-label::after { height: 2px; background: currentColor; opacity: 1; flex-basis: 80px; }
[data-lens="grunge"] .section-title { font-weight: 400; letter-spacing: 0; line-height: .88; text-transform: uppercase; text-shadow: var(--mx) var(--my) 0 #e2231a; rotate: -1.2deg; transform-origin: left bottom; }

/* about = black photocopy */
[data-lens="grunge"] .about { background: #0d0b0a; background-image: var(--gr-noise); }
[data-lens="grunge"] .about .section-title { color: #efe9d8; }
[data-lens="grunge"] .about-copy { font-family: "Special Elite", monospace; color: #efe9d8; font-size: 14px; line-height: 1.85; }
[data-lens="grunge"] .about-copy .lead { font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: 400; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.2; color: #efe9d8; letter-spacing: -.01em; }
[data-lens="grunge"] .about-copy strong { color: #0d0b0a; background: #efe9d8; font-weight: 400; padding: 0 3px; }
[data-lens="grunge"] .about-copy .lead strong { background: #e2231a; color: #efe9d8; font-style: normal; font-family: "Anton", Impact, sans-serif; font-size: .82em; padding: 0 8px; letter-spacing: .02em; }
[data-lens="grunge"] .facts { border-top: 2px solid #efe9d8; }
[data-lens="grunge"] .facts li { border-bottom: 1px dashed rgba(239,233,216,.4); }
[data-lens="grunge"] .facts strong { font-family: "Anton", Impact, sans-serif; font-weight: 400; color: #e2231a; text-shadow: 3px 2px 0 #efe9d8; font-size: clamp(48px, 5vw, 80px); }
[data-lens="grunge"] .facts span { font: 400 8px/1.6 "Silkscreen", monospace; color: #efe9d8; letter-spacing: .1em; }
[data-lens="grunge"] .link-btn { color: #e2231a; font: inherit; text-decoration: none; background: #efe9d8; padding: 2px 4px; }
[data-lens="grunge"] .chips li { border: 0; border-radius: 0; background: #efe9d8; color: #0d0b0a; font: 400 9px/1 "Silkscreen", monospace; padding: 8px 10px; transform: rotate(-2deg); box-shadow: 3px 3px 0 #e2231a; }
[data-lens="grunge"] .chips li:nth-child(2) { transform: rotate(1.5deg); }

/* services = photocopy paper, red duotone photos, colliding blocks */
[data-lens="grunge"] .services { background: #d9d1bd; background-image: var(--gr-noise); }
[data-lens="grunge"] .services::before { content: ""; position: absolute; right: -4vw; top: 6vw; width: 42vw; height: 60vw; background: url(../img/seo.jpg) center / cover; filter: grayscale(1) contrast(4) brightness(1.1); mix-blend-mode: multiply; opacity: .26; pointer-events: none; transform: rotate(4deg); }
[data-lens="grunge"] .services .wrap { position: relative; }
[data-lens="grunge"] .section-intro { font-family: "Special Elite", monospace; color: #0d0b0a; font-size: 14px; line-height: 1.8; }
[data-lens="grunge"] .section-intro strong { background: #0d0b0a; color: #d9d1bd; font-weight: 400; padding: 0 4px; }
[data-lens="grunge"] .service-list { border-top: 3px solid #0d0b0a; display: grid; gap: 46px; padding-top: 26px; }
[data-lens="grunge"] .service { border: 0; padding: 0; rotate: var(--gr-r, 0deg); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) clamp(180px, 18vw, 280px); }
[data-lens="grunge"] .service-num { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(80px, 10vw, 160px); line-height: .8; padding: 0; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px #e2231a; position: absolute; left: -10px; top: -14px; z-index: 0; pointer-events: none; }
[data-lens="grunge"] .service-head { position: relative; z-index: 1; padding-top: clamp(28px, 3vw, 44px); }
[data-lens="grunge"] .service-title { font-weight: 400; letter-spacing: 0; font-size: clamp(40px, 4.6vw, 76px); line-height: .9; text-shadow: var(--mx) var(--my) 0 #e2231a; }
[data-lens="grunge"] .service:hover .service-title { transform: none; }
[data-lens="grunge"] .service-sub { font-family: "Special Elite", monospace; font-weight: 400; color: #efe9d8; background: #0d0b0a; display: inline-block; padding: 3px 8px 2px; letter-spacing: .06em; }
[data-lens="grunge"] .service-body { position: relative; z-index: 2; background: #efe9d8; padding: 18px 20px; margin-top: 18px; box-shadow: 5px 5px 0 #0d0b0a; transform: rotate(.6deg); }
[data-lens="grunge"] .service-body p { color: #0d0b0a; font-size: 13px; line-height: 1.75; }
[data-lens="grunge"] .service-cta { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 16px; letter-spacing: .04em; color: #efe9d8; background: #e2231a; padding: 8px 14px 6px; border: 0; box-shadow: 4px 4px 0 #0d0b0a; }
[data-lens="grunge"] .service-cta:hover { background: #0d0b0a; }
[data-lens="grunge"] .service-media { overflow: visible; background: #e2231a; transform: rotate(2.4deg); box-shadow: 8px 8px 0 #0d0b0a; }
[data-lens="grunge"] .service:nth-child(even) .service-media { transform: rotate(-2deg); }
[data-lens="grunge"] .media img { mix-blend-mode: multiply; }
[data-lens="grunge"] .service:hover .media img { transform: none; }
[data-lens="grunge"] .media::after { content: ""; position: absolute; inset: 0; background: var(--gr-dots) 0 0 / 5px 5px; mix-blend-mode: multiply; opacity: .45; pointer-events: none; }
[data-lens="grunge"] .media::before { content: ""; position: absolute; z-index: 2; left: 12px; top: -5px; width: 22px; height: 6px; background: #8a8a86; box-shadow: 0 1px 0 #444; }

/* why = back on the red plate */
[data-lens="grunge"] .why .wrap { position: relative; }
[data-lens="grunge"] .why-title { color: #0d0b0a; text-shadow: var(--mx) var(--my) 0 #efe9d8; }
[data-lens="grunge"] .why-grid { border-top: 0; gap: 30px; }
[data-lens="grunge"] .why-item, [data-lens="grunge"] .why-item:nth-child(even) { border: 0 !important; padding: 26px 26px 24px; background: #d9d1bd; background-image: var(--gr-noise); box-shadow: 8px 8px 0 #0d0b0a; rotate: var(--gr-r, 0deg); }
[data-lens="grunge"] .why-num { font-family: "Anton", Impact, sans-serif; -webkit-text-stroke: 0; color: #e2231a; font-size: clamp(60px, 7vw, 110px); text-shadow: 3px 3px 0 #0d0b0a; }
[data-lens="grunge"] .why-item h3 { font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .01em; font-size: clamp(26px, 2.4vw, 38px); }
[data-lens="grunge"] .why-item p { font-family: "Special Elite", monospace; color: #0d0b0a; font-size: 13.5px; line-height: 1.8; }

/* contact = black, toner scratch card */
[data-lens="grunge"] .contact { background: #0d0b0a; background-image: var(--gr-noise); }
[data-lens="grunge"] .contact .wrap { position: relative; }
[data-lens="grunge"] .contact-kicker { font: 400 9px/1.6 "Silkscreen", monospace; color: #e2231a; letter-spacing: .2em; }
[data-lens="grunge"] .contact-mail { font-weight: 400; letter-spacing: 0; color: #efe9d8; border-bottom: 3px solid #e2231a; text-shadow: var(--mx) var(--my) 0 #e2231a; }
[data-lens="grunge"] .contact-row p { font-family: "Special Elite", monospace; color: #efe9d8; }
[data-lens="grunge"] .btn { border-radius: 0; background: #e2231a; color: #efe9d8; border: 0; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .04em; transform: rotate(-1.4deg); box-shadow: 5px 5px 0 #efe9d8; }
[data-lens="grunge"] .btn--ghost { background: #efe9d8; color: #0d0b0a; transform: rotate(1.2deg); box-shadow: 5px 5px 0 #e2231a; }
[data-lens="grunge"] .btn:hover { transform: rotate(0) translateY(-2px); }
.gr-scratch { position: absolute; z-index: 3; touch-action: none; cursor: crosshair; transition: opacity .6s; }
.gr-scratch canvas { width: 100%; height: 100%; display: block; }
.gr-scratch-hint { position: absolute; right: 0; top: -30px; font: 400 9px/1 "Silkscreen", monospace; letter-spacing: .12em; color: #e2231a; pointer-events: none; white-space: nowrap; }
.gr-scratch.is-done { opacity: 0; pointer-events: none; }

/* footer = the last photocopy, barcode */
[data-lens="grunge"] .site-footer { background: #d9d1bd; background-image: var(--gr-noise); color: #0d0b0a; }
[data-lens="grunge"] .footer-big { font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: 0; color: #0d0b0a; -webkit-text-stroke: 0; border-top: 0; text-shadow: var(--mx) var(--my) 0 #e2231a; }
[data-lens="grunge"] .footer-row { font: 400 9px/1.7 "Silkscreen", monospace; letter-spacing: .08em; color: #0d0b0a; position: relative; }
[data-lens="grunge"] .footer-claim, [data-lens="grunge"] .footer-top { color: #e2231a; font-weight: 400; }
[data-lens="grunge"] .footer-row::after { content: "COPY 4913 / 4913"; position: absolute; right: 0; bottom: -78px; width: 180px; padding-top: 46px; font: 400 8px/1 "Silkscreen", monospace; letter-spacing: .3em; text-align: center; background: repeating-linear-gradient(90deg, #0d0b0a 0 2px, transparent 2px 4px, #0d0b0a 4px 5px, transparent 5px 9px, #0d0b0a 9px 12px, transparent 12px 14px, #0d0b0a 14px 15px, transparent 15px 18px) 0 0 / 100% 40px no-repeat; }
[data-lens="grunge"] .footer-legal a { color: #0d0b0a; }

/* switcher */
[data-lens="grunge"] .lens-fab { border-radius: 0; background: #0d0b0a; color: #efe9d8; border: 0; transform: rotate(-2deg); box-shadow: 5px 5px 0 #efe9d8; font-family: "Anton", Impact, sans-serif; }
[data-lens="grunge"] .lens-fab:hover { transform: rotate(1deg) translateY(-3px); }
[data-lens="grunge"] .lens-fab::before { display: none; }
[data-lens="grunge"] .lens-fab-label { font-weight: 400; font-size: 16px; letter-spacing: .04em; }
[data-lens="grunge"] .lens-fab-eye { --eye-white: #efe9d8; --eye-line: #0d0b0a; --eye-iris: #0d0b0a; --eye-ring: #e2231a; --eye-pupil: #0d0b0a; --eye-glint: #efe9d8; }
[data-lens="grunge"] .lens-panel { border-radius: 0; background: #d9d1bd; background-image: var(--gr-noise); color: #0d0b0a; border: 0; box-shadow: 8px 8px 0 #0d0b0a; transform: rotate(-.6deg); font-family: "Special Elite", monospace; }
[data-lens="grunge"] .lens-panel-head { background: #0d0b0a; color: #efe9d8; border: 0; }
[data-lens="grunge"] .lens-panel-title { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 28px; text-shadow: 3px 2px 0 #e2231a; letter-spacing: .01em; }
[data-lens="grunge"] .lens-panel-sub { color: #d9d1bd; font-size: 12px; }
[data-lens="grunge"] .lens-close { border-radius: 0; background: #e2231a; color: #efe9d8; border: 0; }
[data-lens="grunge"] .lens-list li { border-color: rgba(13,11,10,.3); border-style: dashed; }
[data-lens="grunge"] .lens-opt:hover, [data-lens="grunge"] .lens-opt:focus-visible { background: #e2231a; color: #efe9d8; }
[data-lens="grunge"] .lo-text b { font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .04em; font-size: 15px; }
[data-lens="grunge"] .lens-panel-foot { border-top: 2px dashed #0d0b0a; }
[data-lens="grunge"] .sound-toggle { border-radius: 0; font-family: "Courier Prime", monospace; }
[data-lens="grunge"] .toast { border-radius: 0; background: #e2231a; font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .04em; font-size: 15px; transform: translate(-50%, 0) rotate(-2deg); box-shadow: 4px 4px 0 #0d0b0a; }
[data-lens="grunge"] .lens-hint { background: #efe9d8; border: 0; box-shadow: 4px 4px 0 #0d0b0a; font-family: "Special Elite", monospace; font-weight: 400; font-size: 13px; color: #0d0b0a; transform: rotate(-3deg); }
[data-lens="grunge"] .lens-hint::after { border-color: #efe9d8; }

/* veil = the photocopier */
.vl-copier { inset: 0; background: #0d0b0a; overflow: hidden; }
.vl-copier span { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); font: 400 9px/1 "Silkscreen", monospace; letter-spacing: .3em; color: #efe9d8; white-space: nowrap; }
.vl-scanbar { position: absolute; left: 0; right: 0; top: -4%; height: 3%; background: #fff; box-shadow: 0 0 40px 18px rgba(255,250,220,.85), 0 0 120px 60px rgba(255,240,180,.35); }
.vl-flash { inset: 0; background: #efe9d8; }

@media (max-width: 1080px) {
  [data-lens="grunge"] .service { grid-template-columns: minmax(0, 1fr) clamp(160px, 26vw, 240px); }
  [data-lens="grunge"] .service-head { grid-column: 1; grid-row: 1; }
  [data-lens="grunge"] .service-body { grid-column: 1; grid-row: 2; }
  [data-lens="grunge"] .service-media { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  [data-lens="grunge"] .service { grid-template-columns: 1fr; }
  [data-lens="grunge"] .service-head, [data-lens="grunge"] .service-body, [data-lens="grunge"] .service-media { grid-column: auto; grid-row: auto; }
  [data-lens="grunge"] .service-num { font-size: 72px; top: -6px; }
  [data-lens="grunge"] .hero-copy { padding: 18px 16px 16px; }
  [data-lens="grunge"] .hero-copy::before { box-shadow: 0 1px 0 #444; }
  [data-lens="grunge"] .ht-2 { --fit-scale: 1.05; }
  [data-lens="grunge"] .site-nav a { padding: 0 8px; }
  [data-lens="grunge"] .footer-row::after { display: none; }
  .gr-frag { font-size: 10px; }
  .gr-paid { font-size: 7px; letter-spacing: .18em; }
}

/* ==========================================================================
   CYBERCORE — the utilitarian hacker: one object, microscopic type
   ========================================================================== */
html[data-lens="cybercore"] {
  --bg: #07090a; --fg: #b7c1c9; --muted: #7c8892; --line: rgba(154,167,177,.22); --soft: transparent;
  --dark-bg: transparent; --dark-fg: #b7c1c9; --dark-muted: #7c8892; --dark-line: rgba(154,167,177,.22);
  --f-head: "Rajdhani", "JetBrains Mono", sans-serif;
  --f-body: "JetBrains Mono", ui-monospace, monospace;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --img-filter: grayscale(1) contrast(1.25) brightness(.8);
  --cc-steel: #9aa7b1; --cc-ph: #7ff0a3; --cc-red: #e5232a; --cc-ink: #07090a; --cc-dim: #55616b;
  --cc-micro: 400 8px/1.6 "Silkscreen", "JetBrains Mono", monospace;
  --eye-white: #0b0e10; --eye-line: #9aa7b1; --eye-iris: #07090a; --eye-ring: #7ff0a3; --eye-pupil: #e5232a; --eye-glint: #7ff0a3;
}
[data-lens="cybercore"] body { background: #07090a; font-size: 12.5px; line-height: 1.65; font-weight: 400; }
[data-lens="cybercore"] ::selection { background: #7ff0a3; color: #07090a; }
[data-lens="cybercore"] .hero, [data-lens="cybercore"] .why, [data-lens="cybercore"] .section--dark, [data-lens="cybercore"] .site-footer { background: transparent; }
@keyframes ccScanY { from { transform: translateY(-10vh); } to { transform: translateY(110vh); } }
@keyframes ccTicker { to { transform: translateX(-33.333%); } }
@keyframes ccBlink { 50% { opacity: 0; } }
@keyframes ccImgScan { 0% { top: -4%; } 100% { top: 104%; } }
@keyframes ccFloor { from { transform: translateY(0); } to { transform: translateY(60px); } }
@keyframes ccBar { 0%, 100% { transform: scaleY(.15); } 50% { transform: scaleY(1); } }

/* layers */
.cc-gl { image-rendering: auto; }
.cc-floor { position: absolute; left: -30%; right: -30%; bottom: 0; height: 100%; transform: perspective(700px) rotateX(62deg); transform-origin: 50% 100%; opacity: .5; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 45%, #000 90%, transparent); mask: linear-gradient(transparent, #000 45%, #000 90%, transparent); }
.cc-floor::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; bottom: 0; background: repeating-linear-gradient(0deg, rgba(127,240,163,.18) 0 1px, transparent 1px 60px), repeating-linear-gradient(90deg, rgba(127,240,163,.18) 0 1px, transparent 1px 60px); animation: ccFloor 3s linear infinite; will-change: transform; }
.cc-ticker { position: absolute; left: 0; right: 0; top: var(--header-h); height: 18px; overflow: hidden; white-space: nowrap; background: rgba(7,9,10,.9); border-bottom: 1px solid rgba(154,167,177,.22); font: var(--cc-micro); line-height: 18px; letter-spacing: .1em; color: #55616b; text-transform: uppercase; }
.cc-ticker-track { display: inline-block; animation: ccTicker 80s linear infinite; }
.cc-rail { position: absolute; left: 0; top: calc(var(--header-h) + 18px); bottom: 0; width: 44px; border-right: 1px solid rgba(154,167,177,.16); overflow: hidden; }
.cc-rail-in { padding: 10px 5px; font: var(--cc-micro); line-height: 1.55; color: #3c464f; letter-spacing: .02em; }
.cc-rail-in b { color: #7ff0a3; font-weight: 400; }
.cc-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); }
.cc-scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(127,240,163,.35); box-shadow: 0 0 10px rgba(127,240,163,.5); animation: ccScanY 7s linear infinite; }
.cc-cross { position: fixed; inset: 0; z-index: 116; pointer-events: none; --x: -100px; --y: -100px; }
.cc-cross .h { position: absolute; left: 0; right: 0; top: var(--y); height: 1px; background: rgba(154,167,177,.28); }
.cc-cross .v { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: rgba(154,167,177,.28); }
.cc-cross span { position: absolute; left: 0; top: 0; transform: translate(calc(var(--x) + 12px), calc(var(--y) + 10px)); font: var(--cc-micro); letter-spacing: .1em; color: #9aa7b1; white-space: nowrap; background: rgba(7,9,10,.7); padding: 2px 5px; }
.cc-lock { position: fixed; left: 0; top: 0; z-index: 117; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .15s; }
.cc-lock.is-on { opacity: 1; }
.cc-lock i { position: absolute; width: 10px; height: 10px; border: 1px solid #7ff0a3; }
.cc-lock .tl { left: 0; top: 0; border-width: 1px 0 0 1px; }
.cc-lock .tr { right: 0; top: 0; border-width: 1px 1px 0 0; }
.cc-lock .bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.cc-lock .br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.cc-lock span { position: absolute; left: 0; top: 100%; margin-top: 4px; font: var(--cc-micro); letter-spacing: .12em; color: #e5232a; white-space: nowrap; background: rgba(7,9,10,.85); padding: 2px 5px; }

/* hero instruments */
.cc-hud { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cc-corner { position: absolute; width: 18px; height: 18px; border: 1px solid #9aa7b1; opacity: .7; }
.cc-corner.tl { left: var(--pad); top: calc(var(--header-h) + 34px); border-width: 1px 0 0 1px; }
.cc-corner.tr { right: var(--pad); top: calc(var(--header-h) + 34px); border-width: 1px 1px 0 0; }
.cc-corner.bl { left: var(--pad); bottom: 24px; border-width: 0 0 1px 1px; }
.cc-corner.br { right: var(--pad); bottom: 24px; border-width: 0 1px 1px 0; }
.cc-radar { position: absolute; right: calc(var(--pad) + 30px); top: calc(var(--header-h) + 104px); width: min(13vw, 160px); height: auto; overflow: visible; opacity: .6; }
.cc-radar circle, .cc-radar path { fill: none; stroke: rgba(154,167,177,.4); stroke-width: 1; }
.cc-sweep { transform-origin: 100px 100px; animation: spin 5s linear infinite; }
.cc-sweep path { fill: rgba(127,240,163,.14); stroke: none; }
.cc-blip { fill: #e5232a !important; stroke: none !important; animation: ccBlink 1.3s steps(1) infinite; }
.cc-blip.b2 { fill: #7ff0a3 !important; animation-duration: 2.1s; }
.cc-tag { position: absolute; font: var(--cc-micro); letter-spacing: .12em; color: #9aa7b1; text-transform: uppercase; white-space: nowrap; }
.cc-tag i { position: absolute; top: 50%; width: 46px; height: 1px; background: #9aa7b1; opacity: .6; }
.cc-tag i::after { content: ""; position: absolute; width: 3px; height: 3px; background: #7ff0a3; top: -1px; }
.cc-tag--a { left: var(--pad); top: calc(var(--header-h) + 78px); padding-right: 56px; }
.cc-tag--a i, .cc-tag--d i { right: 0; } .cc-tag--a i::after, .cc-tag--d i::after { right: 0; }
.cc-tag--b { right: var(--pad); top: calc(var(--header-h) + 78px); padding-left: 56px; }
.cc-tag--b i, .cc-tag--c i { left: 0; } .cc-tag--b i::after, .cc-tag--c i::after { left: 0; }
.cc-tag--c { right: var(--pad); bottom: 30%; padding-left: 56px; }
.cc-tag--d { left: var(--pad); bottom: 30%; padding-right: 56px; }
.cc-tag b { color: #7ff0a3; font-weight: 400; }
.cc-bar { color: #7ff0a3; letter-spacing: 0; }
.cc-scope { position: absolute; left: var(--pad); top: calc(var(--header-h) + 104px); width: 160px; height: 40px; border: 1px solid rgba(154,167,177,.22); opacity: .8; }
.cc-coords { position: absolute; left: var(--pad); top: calc(var(--header-h) + 152px); font: var(--cc-micro); letter-spacing: .1em; color: #55616b; }

/* header */
[data-lens="cybercore"] .site-header { background: rgba(7,9,10,.85); color: #9aa7b1; border-bottom: 1px solid rgba(154,167,177,.22); }
[data-lens="cybercore"] .logo-word { font-family: "Rajdhani", sans-serif; font-size: 17px; letter-spacing: .12em; }
[data-lens="cybercore"] .logo-word b { font-weight: 700; color: #e6ecf0; }
[data-lens="cybercore"] .logo-word span { font: var(--cc-micro); color: #7ff0a3; letter-spacing: .14em; vertical-align: 2px; }
[data-lens="cybercore"] .logo-eye, [data-lens="cybercore"] .lens-fab { --eye-white: #0b0e10; --eye-line: #9aa7b1; --eye-iris: #07090a; --eye-ring: #7ff0a3; --eye-pupil: #e5232a; --eye-glint: #7ff0a3; }
[data-lens="cybercore"] .site-nav { gap: 0; }
[data-lens="cybercore"] .site-nav a, [data-lens="cybercore"] .header-mail { font: var(--cc-micro); letter-spacing: .12em; }
[data-lens="cybercore"] .site-nav a { padding: 0 12px; }
[data-lens="cybercore"] .site-nav a::before { content: "<"; color: #7ff0a3; margin-right: 6px; }
[data-lens="cybercore"] .site-nav a:hover { color: #fff; }
[data-lens="cybercore"] .site-nav a::after, [data-lens="cybercore"] .header-mail::after { display: none; }
[data-lens="cybercore"] .header-mail { color: #7ff0a3; border: 1px solid rgba(154,167,177,.3); padding: 5px 10px; }
[data-lens="cybercore"] .header-mail:hover { border-color: #7ff0a3; }

/* eye */
[data-lens="cybercore"] .eye .iris-reticle { display: inline; fill: none; stroke: #9aa7b1; stroke-width: 1.5; animation: spin 10s linear infinite; }
[data-lens="cybercore"] .eye .iris-ring { stroke-width: 2; }
[data-lens="cybercore"] .eye .pupil { r: 4; }
[data-lens="cybercore"] .eye .eye-line { stroke-width: 5; stroke-linejoin: miter; }

/* hero */
[data-lens="cybercore"] .hero { isolation: isolate; padding-top: calc(var(--header-h) + 34px); padding-bottom: clamp(90px, 9vw, 120px); }
[data-lens="cybercore"] .hero > *:not(.cc-hud):not(.scroll-cue) { position: relative; z-index: 1; }
[data-lens="cybercore"] .hero-meta { font: var(--cc-micro); letter-spacing: .12em; color: #55616b; border-bottom: 1px solid rgba(154,167,177,.22); }
[data-lens="cybercore"] .hero-meta span::before { content: "// "; color: #e5232a; }
[data-lens="cybercore"] .hero-title { font-weight: 700; letter-spacing: .02em; line-height: .9; }
[data-lens="cybercore"] .ht-line { --fit-scale: .74; }
[data-lens="cybercore"] .ht-1 .ht-word, [data-lens="cybercore"] .ht-1 .ht-o { color: rgba(7,9,10,.55); -webkit-text-stroke: 1px #9aa7b1; }
[data-lens="cybercore"] .ht-2 { color: transparent; -webkit-text-stroke: 1px rgba(127,240,163,.85); letter-spacing: .04em; margin-top: .02em; }
[data-lens="cybercore"] .ht-eye .eye .eye-line { stroke-width: 4; }
[data-lens="cybercore"] .hero-tagline { font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: .08em; color: #eef2f5; text-transform: uppercase; }
[data-lens="cybercore"] .hero-tagline::before { content: "> "; color: #7ff0a3; }
[data-lens="cybercore"] .hero-intro { font-size: 12px; color: #7c8892; }
[data-lens="cybercore"] .hero-intro strong { color: #b7c1c9; font-weight: 700; }
[data-lens="cybercore"] .hero-badge { border-radius: 0; }
[data-lens="cybercore"] .hero-badge text { font-family: "Silkscreen", monospace; font-weight: 400; font-size: 11px; fill: #9aa7b1; letter-spacing: .3em; }
[data-lens="cybercore"] .hero-badge svg { animation-duration: 36s; }
[data-lens="cybercore"] .scroll-cue { display: none; }

/* marquee */
[data-lens="cybercore"] .marquee { background: rgba(7,9,10,.6); color: #7ff0a3; font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: .1em; font-size: clamp(15px, 1.6vw, 22px); padding: 12px 0; border-top: 1px solid rgba(154,167,177,.22); border-bottom: 1px solid rgba(154,167,177,.22); }
[data-lens="cybercore"] .marquee-track i { font-size: 0; opacity: 1; }
[data-lens="cybercore"] .marquee-track i::before { content: "//"; font-size: clamp(15px, 1.6vw, 22px); color: #e5232a; }

/* panels */
[data-lens="cybercore"] .section { padding-top: clamp(50px, 7vw, 100px); padding-bottom: clamp(50px, 7vw, 100px); }
[data-lens="cybercore"] .section > .wrap { position: relative; isolation: isolate; padding: clamp(24px, 4vw, 56px); background: rgba(7,9,10,.8); border: 1px solid rgba(154,167,177,.22); }
[data-lens="cybercore"] .section > .wrap::before { content: "視"; position: absolute; right: 2%; top: -4%; z-index: -1; font: 400 clamp(120px, 22vw, 340px)/1 "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; color: #9aa7b1; opacity: .045; pointer-events: none; }
[data-lens="cybercore"] .section > .wrap::after {
  --rc: #9aa7b1; content: ""; position: absolute; inset: 8px; pointer-events: none;
  background:
    linear-gradient(var(--rc), var(--rc)) left 0 top 0 / 12px 1px no-repeat, linear-gradient(var(--rc), var(--rc)) left 0 top 0 / 1px 12px no-repeat,
    linear-gradient(var(--rc), var(--rc)) right 0 top 0 / 12px 1px no-repeat, linear-gradient(var(--rc), var(--rc)) right 0 top 0 / 1px 12px no-repeat,
    linear-gradient(var(--rc), var(--rc)) left 0 bottom 0 / 12px 1px no-repeat, linear-gradient(var(--rc), var(--rc)) left 0 bottom 0 / 1px 12px no-repeat,
    linear-gradient(var(--rc), var(--rc)) right 0 bottom 0 / 12px 1px no-repeat, linear-gradient(var(--rc), var(--rc)) right 0 bottom 0 / 1px 12px no-repeat;
}
[data-lens="cybercore"] .about-grid > * { position: relative; }
[data-lens="cybercore"] .section-label { font: var(--cc-micro); letter-spacing: .18em; color: #9aa7b1; text-transform: uppercase; }
[data-lens="cybercore"] .section-label::before { content: "SYS."; color: #e5232a; }
[data-lens="cybercore"] .section-label .sl-num::after { content: " //"; color: #55616b; }
[data-lens="cybercore"] .section-label::after { flex: 0 0 120px; height: 10px; opacity: .8; background: repeating-linear-gradient(90deg, #9aa7b1 0 1px, transparent 1px 3px, #9aa7b1 3px 5px, transparent 5px 6px, #9aa7b1 6px 7px, transparent 7px 11px); }
[data-lens="cybercore"] .section-title { font-weight: 700; letter-spacing: .02em; line-height: .92; text-transform: uppercase; color: #e6ecf0; font-size: clamp(30px, 4.8vw, 74px); }
[data-lens="cybercore"] .section-intro, [data-lens="cybercore"] .about-copy { color: #8d98a2; font-size: 12.5px; }
[data-lens="cybercore"] .section-intro strong, [data-lens="cybercore"] .about-copy strong { color: #fff; font-weight: 700; }
[data-lens="cybercore"] .about-copy .lead { font-family: "Rajdhani", sans-serif; color: #dfe6ec; font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .01em; line-height: 1.3; }
[data-lens="cybercore"] .facts { border-color: rgba(154,167,177,.35); }
[data-lens="cybercore"] .facts li { border-color: rgba(154,167,177,.22); }
[data-lens="cybercore"] .facts strong { font-family: "Rajdhani", sans-serif; font-weight: 700; color: #7ff0a3; letter-spacing: 0; }
[data-lens="cybercore"] .facts span { font: var(--cc-micro); letter-spacing: .12em; color: #55616b; text-transform: uppercase; }
[data-lens="cybercore"] .link-btn { color: #7ff0a3; font: inherit; }
[data-lens="cybercore"] .chips li { border-radius: 0; border-color: rgba(154,167,177,.22); color: #9aa7b1; font: var(--cc-micro); letter-spacing: .12em; padding: 6px 10px; }
[data-lens="cybercore"] .chips li::before { content: "[ "; color: #7ff0a3; }
[data-lens="cybercore"] .chips li::after { content: " ]"; color: #7ff0a3; }
.cc-board { margin-top: 28px; border-top: 1px solid rgba(154,167,177,.22); padding-top: 14px; }
.cc-board-head { font: var(--cc-micro); letter-spacing: .16em; color: #9aa7b1; text-transform: uppercase; margin-bottom: 10px; }
.cc-board-head b { color: #7ff0a3; font-weight: 400; }
.cc-board-e { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(154,167,177,.16); }
.cc-board-e time { font: var(--cc-micro); color: #55616b; letter-spacing: .06em; padding-top: 2px; }
.cc-board-e p { margin: 0; font-size: 11.5px; line-height: 1.55; color: #8d98a2; }

/* services */
[data-lens="cybercore"] .service-list { border-top: 1px solid rgba(154,167,177,.4); counter-reset: ccimg; }
[data-lens="cybercore"] .service { border-bottom: 1px solid rgba(154,167,177,.22); }
[data-lens="cybercore"] .service:hover { background: rgba(127,240,163,.025); }
[data-lens="cybercore"] .service-num { font: var(--cc-micro); letter-spacing: .12em; color: #e5232a; padding-top: 1.2em; }
[data-lens="cybercore"] .service-num::before { content: "UNIT "; color: #55616b; }
[data-lens="cybercore"] .service-title { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #e6ecf0; }
[data-lens="cybercore"] .service-sub { font: var(--cc-micro); letter-spacing: .12em; color: #7ff0a3; text-transform: uppercase; }
[data-lens="cybercore"] .service-sub::before { content: "// "; }
[data-lens="cybercore"] .service-body p { color: #8d98a2; font-size: 12px; }
[data-lens="cybercore"] .service-cta { font: var(--cc-micro); letter-spacing: .16em; color: #07090a; background: #9aa7b1; padding: 8px 12px; border: 0; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
[data-lens="cybercore"] .service-cta span { display: none; }
[data-lens="cybercore"] .service-cta::before { content: "[ "; }
[data-lens="cybercore"] .service-cta::after { content: " ]"; }
[data-lens="cybercore"] .service-cta:hover { background: #7ff0a3; }
[data-lens="cybercore"] .service-media { background: #0b0e10; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
[data-lens="cybercore"] .media::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; top: 0; z-index: 2; background: #7ff0a3; box-shadow: 0 0 10px #7ff0a3; opacity: .8; animation: ccImgScan 3.2s linear infinite; }
[data-lens="cybercore"] .media::after { content: "IMG.0x0" counter(ccimg) " // CLASS: PUBLIC"; counter-increment: ccimg; position: absolute; left: 8px; bottom: 8px; z-index: 2; font: var(--cc-micro); letter-spacing: .1em; color: #9aa7b1; background: rgba(7,9,10,.8); padding: 3px 6px; }
[data-lens="cybercore"] .service:hover .media img { filter: grayscale(1) invert(1) sepia(1) saturate(5) hue-rotate(75deg) contrast(1.1); transform: none; }

/* why */
[data-lens="cybercore"] .why-grid { border-top: 1px solid rgba(154,167,177,.4); }
[data-lens="cybercore"] .why-item { border-color: rgba(154,167,177,.22); }
[data-lens="cybercore"] .why-num { font-family: "Rajdhani", sans-serif; font-weight: 700; -webkit-text-stroke: 1px #9aa7b1; color: transparent; letter-spacing: 0; }
[data-lens="cybercore"] .why-item h3 { font-weight: 700; color: #e6ecf0; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(18px, 1.6vw, 24px); }
[data-lens="cybercore"] .why-item h3::before { content: "▸ "; color: #e5232a; }
[data-lens="cybercore"] .why-item p { font-size: 12px; color: #8d98a2; }

/* contact = codec */
[data-lens="cybercore"] .contact-kicker { font: var(--cc-micro); letter-spacing: .16em; color: #7ff0a3; }
[data-lens="cybercore"] .contact-kicker::before { content: "> "; }
.cc-codec { display: grid; grid-template-columns: 110px 1fr 110px; gap: 14px; align-items: stretch; margin: 0 0 22px; border: 1px solid rgba(154,167,177,.22); background: rgba(11,14,16,.9); padding: 12px; max-width: 640px; }
.cc-codec-port { display: grid; place-items: center; gap: 4px; border: 1px solid rgba(154,167,177,.22); padding: 10px 6px; background: repeating-linear-gradient(0deg, rgba(127,240,163,.06) 0 1px, transparent 1px 3px); }
.cc-codec-eye { width: 64px; height: 42px; display: block; }
.cc-codec-you { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #9aa7b1; font: 700 22px "Rajdhani", sans-serif; color: #9aa7b1; }
.cc-codec-port b { font: 700 12px "Rajdhani", sans-serif; letter-spacing: .12em; color: #e6ecf0; }
.cc-codec-port small { font: var(--cc-micro); color: #55616b; letter-spacing: .12em; }
.cc-codec-mid { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-width: 0; }
.cc-codec-freq { font: var(--cc-micro); letter-spacing: .16em; color: #55616b; }
.cc-codec-freq em { font: 700 28px/1 "Rajdhani", sans-serif; color: #7ff0a3; font-style: normal; margin-left: 8px; letter-spacing: .04em; text-shadow: 0 0 12px rgba(127,240,163,.4); }
.cc-codec-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; border-bottom: 1px solid rgba(154,167,177,.22); }
.cc-codec-bars i { flex: 1; height: 100%; background: #7ff0a3; opacity: .75; transform-origin: bottom; animation: ccBar var(--d, 1s) ease-in-out infinite; }
.cc-codec-stat { font: var(--cc-micro); letter-spacing: .12em; color: #55616b; }
.cc-codec-stat b { color: #7ff0a3; font-weight: 400; }
[data-lens="cybercore"] .contact-mail { font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: .01em; color: #7ff0a3; border-bottom-color: rgba(154,167,177,.3); text-shadow: 0 0 22px rgba(127,240,163,.28); }
[data-lens="cybercore"] .contact-row p { color: #8d98a2; font-size: 12px; }
[data-lens="cybercore"] .btn { border-radius: 0; background: #e5232a; color: #fff; border: 0; font: var(--cc-micro); letter-spacing: .16em; padding: 0 20px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
[data-lens="cybercore"] .btn--ghost { background: #9aa7b1; color: #07090a; }
[data-lens="cybercore"] .btn:hover { transform: none; background: #7ff0a3; color: #07090a; }

/* footer */
[data-lens="cybercore"] .footer-big { font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: .04em; -webkit-text-stroke: 1px #3b454d; color: transparent; border-top-color: rgba(154,167,177,.22); }
[data-lens="cybercore"] .footer-row { font: var(--cc-micro); letter-spacing: .12em; color: #55616b; text-transform: uppercase; }
[data-lens="cybercore"] .footer-claim, [data-lens="cybercore"] .footer-top { color: #9aa7b1; font-weight: 400; }
[data-lens="cybercore"] .footer-copy::after { content: " // MJ-MK.IV-0093"; color: #7ff0a3; }
[data-lens="cybercore"] .footer-legal { font: var(--cc-micro); letter-spacing: .12em; }

/* switcher, CLI */
[data-lens="cybercore"] .lens-fab { border-radius: 0; background: rgba(7,9,10,.92); border: 1px solid #9aa7b1; box-shadow: none; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); font-family: "Silkscreen", monospace; }
[data-lens="cybercore"] .lens-fab::before { display: none; }
[data-lens="cybercore"] .lens-fab::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e5232a; box-shadow: 0 0 8px #e5232a; flex: none; }
[data-lens="cybercore"] .lens-fab:hover { border-color: #7ff0a3; transform: none; }
[data-lens="cybercore"] .lens-fab-label { color: #7ff0a3; font: var(--cc-micro); letter-spacing: .16em; }
[data-lens="cybercore"] .lens-panel { border-radius: 0; background: #0b0e10; color: #9aa7b1; border: 1px solid #9aa7b1; box-shadow: 0 0 60px rgba(0,0,0,.9); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); font-family: "JetBrains Mono", monospace; }
[data-lens="cybercore"] .lens-panel-head { border-color: rgba(154,167,177,.22); }
[data-lens="cybercore"] .lens-panel-title { font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: .08em; color: #fff; }
[data-lens="cybercore"] .lens-panel-sub { font: var(--cc-micro); letter-spacing: .12em; color: #7ff0a3; }
[data-lens="cybercore"] .lens-close { border-radius: 0; background: #0b0e10; color: #e5232a; border-color: #e5232a; }
[data-lens="cybercore"] .lens-list li { border-color: rgba(154,167,177,.14); }
[data-lens="cybercore"] .lens-opt:hover, [data-lens="cybercore"] .lens-opt:focus-visible { background: #9aa7b1; color: #07090a; }
[data-lens="cybercore"] .lo-text b { font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: .1em; font-size: 15px; }
[data-lens="cybercore"] .lo-text small { font-size: 11px; }
[data-lens="cybercore"] .lens-opt kbd { border-radius: 0; }
[data-lens="cybercore"] .lens-panel-foot { border-color: rgba(154,167,177,.22); }
[data-lens="cybercore"] .sound-toggle { border-radius: 0; font: var(--cc-micro); letter-spacing: .14em; }
[data-lens="cybercore"] .sound-toggle[aria-pressed="true"] { background: #7ff0a3; color: #07090a; }
[data-lens="cybercore"] .lens-warning { color: #55616b; }
[data-lens="cybercore"] .toast { border-radius: 0; background: #7ff0a3; color: #07090a; font: var(--cc-micro); letter-spacing: .14em; }
[data-lens="cybercore"] .lens-hint { background: #0b0e10; color: #7ff0a3; border-color: #7ff0a3; box-shadow: 4px 4px 0 #e5232a; font: var(--cc-micro); letter-spacing: .1em; }
[data-lens="cybercore"] .lens-hint::after { border-color: #7ff0a3; }
.cc-cli { position: fixed; z-index: 61; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 300px)); background: rgba(7,9,10,.94); border: 1px solid rgba(154,167,177,.5); padding: 0 12px 8px; font: 400 11px/1.5 "JetBrains Mono", monospace; color: #9aa7b1; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.cc-cli-head { font: var(--cc-micro); letter-spacing: .14em; color: #55616b; border-bottom: 1px solid rgba(154,167,177,.22); margin: 0 -12px 6px; padding: 5px 12px 4px; text-transform: uppercase; }
.cc-cli-head b { color: #7ff0a3; font-weight: 400; float: right; }
.cc-cli-log { max-height: 7.5em; overflow: hidden; display: none; }
.cc-cli:focus-within .cc-cli-log, .cc-cli.is-active .cc-cli-log { display: block; }
.cc-l { font-size: 11px; white-space: pre-wrap; word-break: break-word; }
.cc-l.cmd { color: #fff; }
.cc-l.ok { color: #7ff0a3; }
.cc-l.err { color: #e5232a; }
.cc-l.dim { color: #55616b; }
.cc-cli-row { display: flex; align-items: center; gap: 8px; cursor: text; }
.cc-cli-ps { color: #7ff0a3; white-space: nowrap; }
.cc-cli-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; font-size: 16px; line-height: 1.2; caret-color: #e5232a; padding: 2px 0; }
.cc-cli-in::placeholder { color: #3c464f; }
.cc-cli:focus-within { border-color: #7ff0a3; }

/* veil */
.vl-cc { inset: 0; background: #07090a; color: #9aa7b1; padding: 16vh 9vw; white-space: pre-wrap; font: 400 clamp(12px, 1.4vw, 16px)/1.8 "JetBrains Mono", monospace; }
.vl-cc b { color: #7ff0a3; font-weight: 700; }
.vl-cc i { color: #e5232a; font-style: normal; }
.vl-slat { left: 0; right: 0; background: #0b0e10; border-bottom: 1px solid rgba(154,167,177,.35); transform-origin: top; }

@media (max-width: 1080px) {
  .cc-rail, .cc-scope, .cc-coords, .cc-tag--c, .cc-tag--d { display: none; }
}
@media (max-width: 760px) {
  .cc-radar { width: 34vw; top: calc(var(--header-h) + 60px); opacity: .4; }
  .cc-tag--a, .cc-tag--b { display: none; }
  .cc-cli { width: auto; right: calc(max(16px, env(safe-area-inset-right)) + 70px); }
  [data-lens="cybercore"] .lens-fab-label { display: none; }
  [data-lens="cybercore"] .lens-fab { padding: 0 12px; gap: 8px; }
  .cc-cross, .cc-lock { display: none; }
  [data-lens="cybercore"] .section > .wrap { padding: 24px 16px; }
  [data-lens="cybercore"] .hero { padding-top: calc(var(--header-h) + 30px); }
  [data-lens="cybercore"] .ht-line { --fit-scale: 1; }
  .cc-codec { grid-template-columns: 1fr; }
  .cc-codec-port { grid-auto-flow: column; justify-content: start; }
  .cc-board-e { grid-template-columns: 1fr; gap: 2px; }
}
@media (hover: none) { .cc-cross, .cc-lock { display: none; } }

/* ==========================================================================
   KUBRICK — one-point perspective, symmetry, silence
   ========================================================================== */
html[data-lens="kubrick"] {
  --bg: #f4f4f2; --fg: #000; --muted: #333; --line: #000; --soft: transparent;
  --dark-bg: #000; --dark-fg: #f4f4f2; --dark-muted: #bdbdbd; --dark-line: rgba(255,255,255,.3);
  --f-head: "Jost", Futura, "Century Gothic", "Avenir Next", sans-serif;
  --f-body: "Jost", Futura, "Century Gothic", "Avenir Next", sans-serif;
  --img-filter: contrast(1.15) saturate(1.15);
  --kb-red: #ff0000; --kb-orange: #e84d12; --kb-ox: #8b0000; --kb-brown: #3e2723; --kb-green: #a8d8b9;
  --eye-white: #f4f4f2; --eye-line: #000; --eye-iris: #ff0000; --eye-ring: #3a0000; --eye-pupil: #000; --eye-glint: #fff;
}
[data-lens="kubrick"] body { background: #f4f4f2; letter-spacing: .03em; font-weight: 400; line-height: 1.7; }
[data-lens="kubrick"] ::selection { background: #ff0000; color: #fff; }
[data-lens="kubrick"] main { counter-reset: kbs; }
html.js[data-lens="kubrick"] .reveal { transform: perspective(1200px) translateZ(-180px); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.7,.1,1), opacity .9s; }
html.js[data-lens="kubrick"] .reveal.is-in { transform: none; opacity: 1; }
[data-lens="kubrick"] .eye .eye-line { stroke-width: 6; }
[data-lens="kubrick"] .eye .iris-ring { stroke-width: 3; }
.kb-cursor { position: fixed; left: 0; top: 0; z-index: 120; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; mix-blend-mode: difference; }
.kb-cursor::before, .kb-cursor::after { content: ""; position: absolute; background: #fff; }
.kb-cursor::before { left: 0; right: 0; top: 50%; height: 1px; }
.kb-cursor::after { top: 0; bottom: 0; left: 50%; width: 1px; }

/* header = centered, tracked, flips over dark parts */
html[data-lens="kubrick"] .site-header { mix-blend-mode: normal; color: #000; background: #f4f4f2; border-bottom: 1px solid #000; }
[data-lens="kubrick"] .logo-word { font-family: "Jost", sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .34em; }
[data-lens="kubrick"] .logo-word b { font-weight: 800; }
[data-lens="kubrick"] .logo-word span { font-weight: 400; }
[data-lens="kubrick"] .site-nav a, [data-lens="kubrick"] .header-mail { font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .34em; }
[data-lens="kubrick"] .site-nav { gap: clamp(20px, 3vw, 48px); }

/* hero = the corridor and the monolith */
[data-lens="kubrick"] .hero { --kz: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; text-align: center; gap: 0; padding: calc(var(--header-h) + 24px) var(--pad) clamp(28px, 4vw, 48px); isolation: isolate; }
[data-lens="kubrick"] .hero > *:not(.kb-corridor) { position: relative; z-index: 1; max-width: 100%; min-width: 0; }
.kb-corridor { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: scale(calc(1 + var(--kz, 0) * .7)); transform-origin: 50% 50%; opacity: calc(1 - var(--kz, 0) * .6); }
[data-lens="kubrick"] .hero-meta { width: 100%; justify-content: center; gap: clamp(24px, 4vw, 64px); border: 0; padding: 0; font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .4em; color: #000; }
[data-lens="kubrick"] .hero-title { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; row-gap: clamp(150px, 30vh, 320px); margin: 0; letter-spacing: 0; line-height: 1; transform: scale(calc(1 - var(--kz, 0) * .22)); transform-origin: 50% 50%; opacity: calc(1 - var(--kz, 0) * .35); }
[data-lens="kubrick"] .ht-line { --fit-scale: .54; width: 100%; min-width: 0; max-width: 100%; text-align: center; font-weight: 800; letter-spacing: .22em; text-indent: .22em; }
[data-lens="kubrick"] .ht-1 .ht-word { display: inline; }
[data-lens="kubrick"] .ht-2 { color: #000; -webkit-text-stroke: 0; margin-top: 0; }
.kb-monolith { position: absolute; left: 50%; top: 50%; height: clamp(150px, 30vh, 320px); aspect-ratio: 4 / 9; background: #000; transform: translate(-50%, -50%); box-shadow: 0 40px 70px -20px rgba(0,0,0,.35); }
.kb-monolith::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 45%; background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,0)); }
[data-lens="kubrick"] .hero-foot { width: 100%; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 22px; }
[data-lens="kubrick"] .hero-copy { max-width: 600px; background: rgba(244,244,242,.9); padding: 22px 28px 26px; }
[data-lens="kubrick"] .hero-tagline { font-family: "Jost", sans-serif; font-weight: 800; font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .34em; text-transform: uppercase; line-height: 1.5; margin-bottom: 1em; }
[data-lens="kubrick"] .hero-intro { color: #333; font-weight: 400; max-width: 60ch; margin: 0 auto; }
[data-lens="kubrick"] .hero-intro strong { color: #000; font-weight: 800; }
[data-lens="kubrick"] .hero-badge { width: auto; aspect-ratio: auto; height: 54px; border-radius: 0; background: #000; color: #fff; margin: 0; padding: 0 26px 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 1px solid #000; }
[data-lens="kubrick"] .hero-badge svg { display: none; }
[data-lens="kubrick"] .hero-badge .badge-eye { position: static; width: 40px; height: 26px; transform: none; --eye-white: #000; --eye-line: #fff; --eye-iris: #ff0000; --eye-ring: #fff; --eye-pupil: #000; --eye-glint: #fff; }
[data-lens="kubrick"] .hero-badge::after { content: "Change the lens"; font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; }
[data-lens="kubrick"] .hero-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff0000; box-shadow: 0 0 10px #ff0000; flex: none; order: 3; }
[data-lens="kubrick"] .hero-badge:hover .badge-eye { transform: none; }
[data-lens="kubrick"] .hero-badge:hover { background: #ff0000; border-color: #ff0000; }
[data-lens="kubrick"] .hero-badge:hover::before { background: #fff; box-shadow: 0 0 10px #fff; }
[data-lens="kubrick"] .scroll-cue { color: #000; letter-spacing: .5em; font-family: "Jost", sans-serif; font-weight: 800; }

/* marquee = a black band of tracked type */
[data-lens="kubrick"] .marquee { background: #000; color: #f4f4f2; font-family: "Jost", sans-serif; font-weight: 800; letter-spacing: .34em; font-size: clamp(13px, 1.3vw, 18px); padding: 24px 0; }
[data-lens="kubrick"] .marquee-track i { font-size: 0; opacity: 1; }
[data-lens="kubrick"] .marquee-track i::before { content: ""; display: inline-block; width: 1px; height: .9em; background: #f4f4f2; margin: 0 1.6em; vertical-align: -.1em; opacity: .7; }

/* sections = title cards, everything on the axis */
[data-lens="kubrick"] .section { padding: clamp(90px, 12vw, 190px) var(--pad); }
[data-lens="kubrick"] .section > .wrap { max-width: 1100px; text-align: center; }
[data-lens="kubrick"] .section-label { justify-content: center; font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .5em; color: inherit; margin-bottom: clamp(20px, 2.4vw, 32px); }
[data-lens="kubrick"] .section-label::before { content: "Part " counter(kbs, upper-roman); counter-increment: kbs; }
[data-lens="kubrick"] .section-label .sl-num, [data-lens="kubrick"] .section-label::after { display: none; }
[data-lens="kubrick"] .section-title { letter-spacing: .18em; text-indent: .18em; font-size: clamp(28px, 4.6vw, 72px); font-weight: 800; line-height: 1.05; margin: 0 auto clamp(40px, 5vw, 72px); max-width: none; }
[data-lens="kubrick"] .section-intro { margin: 0 auto; color: #333; }
[data-lens="kubrick"] .section-intro strong { color: #000; font-weight: 800; }

/* about = black title card */
[data-lens="kubrick"] .about-grid { grid-template-columns: 1fr; gap: clamp(36px, 5vw, 64px); justify-items: center; }
[data-lens="kubrick"] .about .section-title { font-size: clamp(28px, 4.6vw, 72px); }
[data-lens="kubrick"] .facts { display: flex; justify-content: center; gap: clamp(28px, 6vw, 96px); border: 0; }
[data-lens="kubrick"] .facts li { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; padding: 0; }
[data-lens="kubrick"] .facts strong { font-weight: 800; font-size: clamp(40px, 5vw, 72px); letter-spacing: .04em; }
[data-lens="kubrick"] .facts span { font-family: "Jost", sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .34em; color: #bdbdbd; text-align: center; }
[data-lens="kubrick"] .link-btn { color: #f4f4f2; font: inherit; letter-spacing: inherit; }
[data-lens="kubrick"] .about-copy { max-width: 62ch; text-align: center; color: #bdbdbd; }
[data-lens="kubrick"] .about-copy strong { color: #f4f4f2; font-weight: 800; }
[data-lens="kubrick"] .about-copy .lead { font-weight: 300; letter-spacing: .01em; color: #f4f4f2; }
[data-lens="kubrick"] .chips { justify-content: center; }
[data-lens="kubrick"] .chips li { border-radius: 0; border: 1px solid #f4f4f2; font-family: "Jost", sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .34em; padding: 10px 18px; }

/* services = one thing at a time, in a corridor of frames */
[data-lens="kubrick"] .services-head { text-align: center; justify-items: center; }
[data-lens="kubrick"] .service-list { border: 0; }
[data-lens="kubrick"] .service { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(20px, 3vw, 36px); padding: clamp(70px, 8vw, 120px) 0; border-bottom: 1px solid #000; }
[data-lens="kubrick"] .service:last-child { border-bottom: 0; }
[data-lens="kubrick"] .service-num { padding: 0; font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .5em; text-indent: .5em; color: #000; }
[data-lens="kubrick"] .service-num::before { content: "Scene "; }
[data-lens="kubrick"] .service-head { order: 1; position: relative; z-index: 1; }
[data-lens="kubrick"] .service-media { order: 2; grid-column: auto; grid-row: auto; width: min(320px, 56vw); aspect-ratio: 3 / 4; margin: 112px 0; box-shadow: 0 0 0 20px #f4f4f2, 0 0 0 21px #000, 0 0 0 54px #f4f4f2, 0 0 0 55px #000, 0 0 0 96px #f4f4f2, 0 0 0 97px #000; }
[data-lens="kubrick"] .service-body { order: 3; grid-column: auto; grid-row: auto; max-width: 54ch; position: relative; z-index: 1; }
[data-lens="kubrick"] .service-title { font-size: clamp(26px, 3.6vw, 56px); letter-spacing: .16em; text-indent: .16em; line-height: 1.05; }
[data-lens="kubrick"] .service:hover .service-title { transform: none; }
[data-lens="kubrick"] .service-sub { letter-spacing: .34em; font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; color: #333; }
[data-lens="kubrick"] .service-body p { color: #333; }
[data-lens="kubrick"] .service:hover .media img { transform: none; }
[data-lens="kubrick"] .service-cta { display: inline-flex; align-items: center; gap: 14px; border: 1px solid #000; padding: 15px 24px; font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .34em; text-indent: .34em; background: #000; color: #fff; }
[data-lens="kubrick"] .service-cta span { display: none; }
[data-lens="kubrick"] .service-cta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff0000; box-shadow: 0 0 10px #ff0000; }
[data-lens="kubrick"] .service-cta:hover { background: #ff0000; border-color: #ff0000; }
[data-lens="kubrick"] .service-cta:hover::before { background: #fff; box-shadow: 0 0 10px #fff; }

/* why = the carpet */
[data-lens="kubrick"] .why { background: #e84d12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='102.0' height='58.9' viewBox='0 0 102.0 58.9'%3E%3Crect width='100%25' height='100%25' fill='%233e2723'/%3E%3Cpolygon points='33.3,0.0 16.7,28.9 -16.7,28.9 -33.3,0.0 -16.7,-28.9 16.7,-28.9' fill='%238b0000'/%3E%3Cpolygon points='21.1,0.0 10.5,18.3 -10.5,18.3 -21.1,0.0 -10.5,-18.3 10.5,-18.3' fill='%23e84d12'/%3E%3Cpolygon points='10.2,0.0 5.1,8.8 -5.1,8.8 -10.2,0.0 -5.1,-8.8 5.1,-8.8' fill='%233e2723'/%3E%3Cpolygon points='84.3,29.4 67.7,58.3 34.3,58.3 17.7,29.4 34.3,0.6 67.7,0.6' fill='%238b0000'/%3E%3Cpolygon points='72.1,29.4 61.5,47.7 40.5,47.7 29.9,29.4 40.5,11.2 61.5,11.2' fill='%23e84d12'/%3E%3Cpolygon points='61.2,29.4 56.1,38.3 45.9,38.3 40.8,29.4 45.9,20.6 56.1,20.6' fill='%233e2723'/%3E%3Cpolygon points='135.3,0.0 118.7,28.9 85.3,28.9 68.7,0.0 85.3,-28.9 118.7,-28.9' fill='%238b0000'/%3E%3Cpolygon points='123.1,0.0 112.5,18.3 91.5,18.3 80.9,0.0 91.5,-18.3 112.5,-18.3' fill='%23e84d12'/%3E%3Cpolygon points='112.2,0.0 107.1,8.8 96.9,8.8 91.8,0.0 96.9,-8.8 107.1,-8.8' fill='%233e2723'/%3E%3Cpolygon points='33.3,58.9 16.7,87.7 -16.7,87.7 -33.3,58.9 -16.7,30.0 16.7,30.0' fill='%238b0000'/%3E%3Cpolygon points='21.1,58.9 10.5,77.1 -10.5,77.1 -21.1,58.9 -10.5,40.6 10.5,40.6' fill='%23e84d12'/%3E%3Cpolygon points='10.2,58.9 5.1,67.7 -5.1,67.7 -10.2,58.9 -5.1,50.1 5.1,50.1' fill='%233e2723'/%3E%3Cpolygon points='135.3,58.9 118.7,87.7 85.3,87.7 68.7,58.9 85.3,30.0 118.7,30.0' fill='%238b0000'/%3E%3Cpolygon points='123.1,58.9 112.5,77.1 91.5,77.1 80.9,58.9 91.5,40.6 112.5,40.6' fill='%23e84d12'/%3E%3Cpolygon points='112.2,58.9 107.1,67.7 96.9,67.7 91.8,58.9 96.9,50.1 107.1,50.1' fill='%233e2723'/%3E%3Cpolygon points='84.3,-29.4 67.7,-0.6 34.3,-0.6 17.7,-29.4 34.3,-58.3 67.7,-58.3' fill='%238b0000'/%3E%3Cpolygon points='72.1,-29.4 61.5,-11.2 40.5,-11.2 29.9,-29.4 40.5,-47.7 61.5,-47.7' fill='%23e84d12'/%3E%3Cpolygon points='61.2,-29.4 56.1,-20.6 45.9,-20.6 40.8,-29.4 45.9,-38.3 56.1,-38.3' fill='%233e2723'/%3E%3Cpolygon points='84.3,88.3 67.7,117.2 34.3,117.2 17.7,88.3 34.3,59.5 67.7,59.5' fill='%238b0000'/%3E%3Cpolygon points='72.1,88.3 61.5,106.6 40.5,106.6 29.9,88.3 40.5,70.1 61.5,70.1' fill='%23e84d12'/%3E%3Cpolygon points='61.2,88.3 56.1,97.2 45.9,97.2 40.8,88.3 45.9,79.5 56.1,79.5' fill='%233e2723'/%3E%3C/svg%3E"); background-size: 153px 88.5px; color: #000; }
[data-lens="kubrick"] .why-title { max-width: none; font-size: clamp(26px, 3.8vw, 58px); color: #f4f4f2; background: #000; display: inline-block; padding: .45em .7em .4em; }
[data-lens="kubrick"] .why .section-label { background: #000; color: #f4f4f2; display: inline-flex; padding: 8px 18px; margin-left: auto; margin-right: auto; }
[data-lens="kubrick"] .why-grid { max-width: 900px; margin: 0 auto; gap: 22px; border: 0; counter-reset: kbw; }
[data-lens="kubrick"] .why-item, [data-lens="kubrick"] .why-item:nth-child(even) { background: #000; color: #f4f4f2; padding: clamp(28px, 3.5vw, 48px) clamp(22px, 3vw, 40px); border: 0 !important; text-align: center; counter-increment: kbw; }
[data-lens="kubrick"] .why-num { font-size: 0; -webkit-text-stroke: 0; color: #f4f4f2; margin-bottom: 18px; }
[data-lens="kubrick"] .why-num::before { content: counter(kbw, upper-roman); font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .5em; text-indent: .5em; }
[data-lens="kubrick"] .why-item h3 { letter-spacing: .16em; text-indent: .16em; font-size: clamp(16px, 1.5vw, 22px); font-weight: 800; }
[data-lens="kubrick"] .why-item p { color: #bdbdbd; }

/* contact = the green room */
[data-lens="kubrick"] .contact { background: #a8d8b9; color: #000; --dark-fg: #000; --dark-muted: #244a34; --dark-line: rgba(0,0,0,.35); }
[data-lens="kubrick"] .contact-kicker { letter-spacing: .5em; font-family: "Jost", sans-serif; font-weight: 800; color: #244a34; }
[data-lens="kubrick"] .contact-mail { --fit-scale: .92; text-align: center; font-weight: 800; letter-spacing: .02em; border-bottom: 1px solid #000; }
[data-lens="kubrick"] .contact-row { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
[data-lens="kubrick"] .contact-row p { max-width: 52ch; }
[data-lens="kubrick"] .contact-actions { justify-content: center; }
[data-lens="kubrick"] .btn { border-radius: 0; background: #000; color: #fff; border: 1px solid #000; font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .34em; text-indent: .34em; min-height: 54px; padding: 0 28px; }
[data-lens="kubrick"] .btn span { display: none; }
[data-lens="kubrick"] .btn--ghost { background: transparent; color: #000; }
[data-lens="kubrick"] .btn:hover { transform: none; background: #ff0000; border-color: #ff0000; color: #fff; }

/* footer */
[data-lens="kubrick"] .site-footer { background: #000; color: #f4f4f2; }
[data-lens="kubrick"] .footer-big { --fit-scale: .8; text-align: center; letter-spacing: .34em; text-indent: .34em; font-weight: 800; -webkit-text-stroke: 1px #555; border-top: 0; }
[data-lens="kubrick"] .footer-row { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; font-family: "Jost", sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .34em; color: #bdbdbd; }
[data-lens="kubrick"] .footer-claim, [data-lens="kubrick"] .footer-top { color: #f4f4f2; }
[data-lens="kubrick"] .footer-legal { justify-content: center; font-family: "Jost", sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .34em; }

/* switcher = a control panel */
[data-lens="kubrick"] .lens-fab { border-radius: 0; background: #000; color: #fff; border: 1px solid #333; box-shadow: none; height: 56px; padding: 0 22px 0 16px; font-family: "Jost", sans-serif; gap: 14px; --eye-white: #000; --eye-line: #fff; --eye-iris: #ff0000; --eye-ring: #fff; --eye-pupil: #000; --eye-glint: #fff; }
[data-lens="kubrick"] .lens-fab::before { display: none; }
[data-lens="kubrick"] .lens-fab::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff0000; box-shadow: 0 0 10px #ff0000; flex: none; }
[data-lens="kubrick"] .lens-fab:hover { transform: none; border-color: #fff; }
[data-lens="kubrick"] .lens-fab-label { font-weight: 800; font-size: 11px; letter-spacing: .34em; }
[data-lens="kubrick"] .lens-panel { border-radius: 0; background: #000; color: #f4f4f2; border: 1px solid #333; box-shadow: 0 30px 80px rgba(0,0,0,.6); font-family: "Jost", sans-serif; }
[data-lens="kubrick"] .lens-panel-head { border-bottom: 1px solid #333; text-align: center; padding: 22px 56px 18px; }
[data-lens="kubrick"] .lens-panel-title { font-weight: 800; font-size: 14px; letter-spacing: .5em; text-indent: .5em; }
[data-lens="kubrick"] .lens-panel-sub { font-size: 11px; letter-spacing: .2em; color: #8a8a8a; }
[data-lens="kubrick"] .lens-close { border-radius: 0; border-color: #333; background: #000; color: #fff; }
[data-lens="kubrick"] .lens-list li { border-color: #222; }
[data-lens="kubrick"] .lens-list li:nth-child(even) { border-right-color: #222; }
[data-lens="kubrick"] .lens-opt { grid-template-columns: 14px minmax(0, 1fr) auto; padding: 14px 20px; }
[data-lens="kubrick"] .lens-opt:hover, [data-lens="kubrick"] .lens-opt:focus-visible { background: #161616; color: #fff; }
[data-lens="kubrick"] .lo-swatch { width: 10px !important; height: 10px !important; border-radius: 50% !important; border: 0 !important; background: #f4f4f2 !important; box-shadow: none !important; clip-path: none !important; transform: none !important; animation: none !important; }
[data-lens="kubrick"] .lo-swatch::after { display: none !important; }
[data-lens="kubrick"] .lens-opt[aria-pressed="true"] .lo-swatch { background: #ff0000 !important; box-shadow: 0 0 10px #ff0000 !important; }
[data-lens="kubrick"] .lens-opt[aria-pressed="true"] .lo-text b::after { content: none; }
[data-lens="kubrick"] .lo-text b { font-weight: 800; font-size: 12px; letter-spacing: .28em; }
[data-lens="kubrick"] .lo-text small { color: #8a8a8a; letter-spacing: .04em; }
[data-lens="kubrick"] .lens-opt kbd { border-radius: 0; border-color: #444; }
[data-lens="kubrick"] .lens-panel-foot { border-top: 1px solid #333; }
[data-lens="kubrick"] .sound-toggle { border-radius: 0; font-family: "Jost", sans-serif; font-weight: 800; letter-spacing: .3em; }
[data-lens="kubrick"] .sound-toggle[aria-pressed="true"] { background: #ff0000; color: #fff; border-color: #ff0000; }
[data-lens="kubrick"] .lens-warning { color: #8a8a8a; }
[data-lens="kubrick"] .toast { border-radius: 0; background: #000; color: #fff; font-family: "Jost", sans-serif; font-weight: 800; letter-spacing: .34em; border: 1px solid #333; }
[data-lens="kubrick"] .lens-hint { background: #000; color: #fff; border: 1px solid #333; box-shadow: none; font-family: "Jost", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .3em; }
[data-lens="kubrick"] .lens-hint::after { background: #000; border-color: #333; }

/* veil = the gate, then black */
.vl-kb-gate { inset: 0; width: 100%; height: 100%; background: #000; }
.vl-kb-black { inset: 0; background: #000; }

/* swatch */
.lo-kubrick { background: #000; border-color: #000; }
.lo-kubrick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #ff0000; box-shadow: 0 0 8px #ff0000; }

@media (max-width: 1080px) {
  [data-lens="kubrick"] .service-media { box-shadow: 0 0 0 16px #f4f4f2, 0 0 0 17px #000, 0 0 0 44px #f4f4f2, 0 0 0 45px #000; margin: 60px 0; }
}
@media (max-width: 760px) {
  [data-lens="kubrick"] .ht-line { --fit-scale: .74; letter-spacing: .14em; text-indent: .14em; }
  [data-lens="kubrick"] .hero-title { row-gap: clamp(120px, 22vh, 200px); }
  .kb-monolith { height: clamp(120px, 22vh, 200px); }
  [data-lens="kubrick"] .hero-foot { grid-template-columns: 1fr; }
  [data-lens="kubrick"] .hero-badge { width: auto; justify-self: center; }
  [data-lens="kubrick"] .service-media { width: min(240px, 60vw); box-shadow: 0 0 0 12px #f4f4f2, 0 0 0 13px #000; margin: 30px 0; }
  [data-lens="kubrick"] .facts { flex-direction: column; gap: 24px; }
  [data-lens="kubrick"] .why-grid { max-width: none; }
  [data-lens="kubrick"] .why-item, [data-lens="kubrick"] .why-item:nth-child(even) { padding: 28px 22px; }
  [data-lens="kubrick"] .hero-meta { gap: 18px; font-size: 10px; letter-spacing: .28em; }
  [data-lens="kubrick"] .lens-panel-head { text-align: left; padding: 14px 52px 12px 16px; }
}

/* ==========================================================================
   TAROT — the evil eye as a talisman: indigo, gold, engraving, the cards
   ========================================================================== */
html[data-lens="tarot"] {
  --bg: #0f0a2e; --fg: #efe3c6; --muted: #b9a982; --line: rgba(212,175,55,.35); --soft: transparent;
  --dark-bg: #0a0722; --dark-fg: #efe3c6; --dark-muted: #b9a982; --dark-line: rgba(212,175,55,.35);
  --f-head: "Cinzel", "Times New Roman", serif;
  --f-body: "Cormorant Garamond", Georgia, serif;
  --img-filter: sepia(.35) contrast(1.15) saturate(.7) brightness(.85);
  --eye-white: #f3efe4; --eye-line: #d4af37; --eye-iris: #1e64c8; --eye-ring: #7fb8ff; --eye-pupil: #0a0a1a; --eye-glint: #fff;
}
[data-lens="tarot"] body { background: #0f0a2e; font-size: 17px; font-weight: 500; line-height: 1.6; }
[data-lens="tarot"] ::selection { background: #d4af37; color: #0f0a2e; }
[data-lens="tarot"] .hero, [data-lens="tarot"] .why { background: transparent; }
@keyframes trSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.tr-stars { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #1b1450 0%, #0f0a2e 55%, #070516 100%); }
.tr-stars::after { content: ""; position: absolute; inset: 0; opacity: .7; background: radial-gradient(circle, rgba(241,210,122,.9) 0 .7px, transparent 1.4px) 0 0 / 137px 97px, radial-gradient(circle, rgba(255,255,255,.7) 0 .6px, transparent 1.2px) 40px 60px / 191px 151px, radial-gradient(circle, rgba(241,210,122,.5) 0 1px, transparent 1.8px) 90px 20px / 263px 211px; }
.tr-chart { position: absolute; left: 50%; top: 50%; width: min(140vmin, 1100px); height: min(140vmin, 1100px); color: #d4af37; opacity: .2; transform: translate(-50%, -50%); animation: trSpin 240s linear infinite; will-change: transform; }
.tr-chart svg { width: 100%; height: 100%; display: block; }
.tr-smoke { mix-blend-mode: screen; }
.tr-orn { position: absolute; inset: calc(var(--header-h) + 16px) var(--pad) 18px; pointer-events: none; color: #d4af37; }
.tr-orn i { position: absolute; width: clamp(60px, 8vw, 120px); height: clamp(60px, 8vw, 120px); opacity: .8; }
.tr-orn i svg { width: 100%; height: 100%; display: block; }
.tr-orn .tl { left: 0; top: 0; } .tr-orn .tr { right: 0; top: 0; transform: scaleX(-1); } .tr-orn .bl { left: 0; bottom: 0; transform: scaleY(-1); } .tr-orn .br { right: 0; bottom: 0; transform: scale(-1); }
.tr-glyph { position: absolute; top: 46%; font-size: clamp(28px, 4vw, 56px); opacity: .55; color: #f1d27a; }
.tr-glyph--l { left: 4px; } .tr-glyph--r { right: 4px; }
.tr-pend { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; width: 0; height: 0; }
.tr-pend::before { content: ""; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #d4af37; }
.tr-pend .tr-chain { position: absolute; left: 0; top: 0; width: 1px; height: 40px; background: linear-gradient(#d4af37, rgba(212,175,55,.3)); transform-origin: top; transform: rotate(var(--sw, 0deg)); }
.tr-pend .tr-crystal { position: absolute; left: -6px; top: 40px; width: 12px; height: 12px; border-radius: 2px; background: linear-gradient(135deg, #fff, #7fb8ff 40%, #1e64c8); transform-origin: 6px -40px; transform: rotate(var(--sw, 0deg)) rotate(45deg); }
.tr-read { position: fixed; left: 0; top: 0; z-index: 119; pointer-events: none; font: italic 500 15px/1.3 "Cormorant Garamond", Georgia, serif; color: #f1d27a; background: rgba(15,10,46,.9); border: 1px solid rgba(212,175,55,.5); padding: 6px 12px; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.tr-read.is-on { opacity: 1; }
.tr-read::before { content: "✶ "; font-style: normal; }
[data-lens="tarot"] .site-header { background: linear-gradient(rgba(15,10,46,.92), rgba(15,10,46,.6)); color: #efe3c6; border-bottom: 1px solid rgba(212,175,55,.35); }
[data-lens="tarot"] .logo-word { font-family: "Cinzel", serif; font-size: 15px; letter-spacing: .18em; }
[data-lens="tarot"] .logo-word b { font-weight: 700; color: #f1d27a; }
[data-lens="tarot"] .logo-word span { font-weight: 400; color: #efe3c6; }
[data-lens="tarot"] .site-nav a, [data-lens="tarot"] .header-mail { font-family: "Cinzel", serif; font-weight: 400; font-size: 11px; letter-spacing: .24em; color: #efe3c6; }
[data-lens="tarot"] .site-nav a::after, [data-lens="tarot"] .header-mail::after { background: #d4af37; }
[data-lens="tarot"] .eye .eye-line { stroke-width: 5; }
[data-lens="tarot"] .eye .iris-ring { stroke-width: 4; }
[data-lens="tarot"] .eye .iris-extra { display: none; }
[data-lens="tarot"] .hero { isolation: isolate; padding-top: calc(var(--header-h) + 60px); }
[data-lens="tarot"] .hero > *:not(.tr-orn) { position: relative; z-index: 1; }
[data-lens="tarot"] .hero-meta { justify-content: center; gap: 36px; border: 0; margin: 0 clamp(60px, 9vw, 140px); font-family: "Cinzel", serif; font-size: 11px; letter-spacing: .3em; color: #b9a982; }
[data-lens="tarot"] .hero-meta span::before { content: "✶ "; color: #d4af37; }
[data-lens="tarot"] .hero-title { margin: auto clamp(40px, 7vw, 120px) 0; font-weight: 700; letter-spacing: .06em; line-height: .96; text-align: center; }
[data-lens="tarot"] .ht-line { --fit-scale: .96; width: auto; }
[data-lens="tarot"] .ht-1 .ht-word, [data-lens="tarot"] .ht-o, [data-lens="tarot"] .ht-2 { color: #f1d27a; background: linear-gradient(175deg, #fff3c4 0%, #f1d27a 30%, #b8912a 55%, #f1d27a 75%, #8a6a18 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
[data-lens="tarot"] .ht-2 { letter-spacing: .12em; margin-top: .05em; }
[data-lens="tarot"] .ht-eye { -webkit-text-fill-color: initial; }
[data-lens="tarot"] .hero-foot { margin: clamp(30px, 4vw, 56px) clamp(40px, 7vw, 120px) 0; align-items: center; }
[data-lens="tarot"] .hero-copy { background: #efe3c6; color: #1a1030; padding: 30px 30px 26px; border: 1px solid #d4af37; box-shadow: inset 0 0 0 5px #efe3c6, inset 0 0 0 6px #b8912a, 0 30px 60px rgba(0,0,0,.45); position: relative; transform: rotate(-1.4deg); }
[data-lens="tarot"] .hero-copy::before { content: "0 · THE STUDIO"; display: block; font-family: "Cinzel", serif; font-weight: 700; font-size: 11px; letter-spacing: .3em; text-align: center; color: #8a6a18; margin-bottom: 16px; }
[data-lens="tarot"] .hero-tagline { font-family: "Cinzel", serif; font-weight: 700; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: .04em; line-height: 1.3; text-align: center; color: #1a1030; }
[data-lens="tarot"] .hero-intro { font-style: italic; font-size: 17px; color: #3a2d52; text-align: center; }
[data-lens="tarot"] .hero-intro strong { font-style: normal; font-weight: 700; color: #1a1030; }
[data-lens="tarot"] .hero-badge { background: radial-gradient(circle, #1b1450, #0f0a2e); border: 1px solid #d4af37; box-shadow: 0 0 0 5px #0f0a2e, 0 0 0 6px rgba(212,175,55,.5), 0 0 40px rgba(212,175,55,.25); }
[data-lens="tarot"] .hero-badge text { font-family: "Cinzel", serif; font-weight: 700; font-size: 11px; fill: #f1d27a; letter-spacing: .32em; }
[data-lens="tarot"] .scroll-cue { color: #b9a982; font-family: "Cinzel", serif; letter-spacing: .3em; }
[data-lens="tarot"] .marquee { background: #0a0722; color: #f1d27a; font-family: "Cinzel", serif; font-weight: 400; letter-spacing: .2em; font-size: clamp(14px, 1.5vw, 20px); padding: 20px 0; border-top: 1px solid rgba(212,175,55,.5); border-bottom: 1px solid rgba(212,175,55,.5); box-shadow: inset 0 4px 0 #0a0722, inset 0 5px 0 rgba(212,175,55,.3), inset 0 -4px 0 #0a0722, inset 0 -5px 0 rgba(212,175,55,.3); }
[data-lens="tarot"] .marquee-track i { font-size: 0; opacity: 1; }
[data-lens="tarot"] .marquee-track i::before { content: "☾"; font-size: clamp(14px, 1.5vw, 20px); color: #d4af37; margin: 0 .2em; }
[data-lens="tarot"] .section-label { font-family: "Cinzel", serif; font-size: 11px; letter-spacing: .3em; color: #b9a982; justify-content: center; }
[data-lens="tarot"] .section-label::after { background: linear-gradient(90deg, #d4af37, transparent); height: 1px; opacity: 1; }
[data-lens="tarot"] .section-label::before { content: "✶"; color: #d4af37; }
[data-lens="tarot"] .section-title { font-weight: 700; letter-spacing: .08em; line-height: 1.05; color: #f1d27a; text-align: center; margin-left: auto; margin-right: auto; text-shadow: 0 2px 0 #000, 0 10px 30px rgba(0,0,0,.6); }
[data-lens="tarot"] .section > .wrap { position: relative; }
[data-lens="tarot"] .about, [data-lens="tarot"] .contact { background: #0a0722; }
[data-lens="tarot"] .about > .wrap::before, [data-lens="tarot"] .contact > .wrap::before { content: ""; position: absolute; inset: -30px; border: 1px solid rgba(212,175,55,.35); pointer-events: none; }
[data-lens="tarot"] .about-copy { font-size: 18px; color: #d8ccab; }
[data-lens="tarot"] .about-copy .lead { font-style: italic; font-weight: 500; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.25; color: #efe3c6; }
[data-lens="tarot"] .about-copy strong { color: #f1d27a; font-weight: 700; }
[data-lens="tarot"] .about-copy .lead strong { font-style: normal; font-family: "Cinzel", serif; font-size: .82em; }
[data-lens="tarot"] .facts { border-top: 1px solid rgba(212,175,55,.5); }
[data-lens="tarot"] .facts li { border-bottom: 1px solid rgba(212,175,55,.2); }
[data-lens="tarot"] .facts strong { font-family: "Cinzel", serif; font-weight: 700; color: #f1d27a; }
[data-lens="tarot"] .facts span { font-family: "Cinzel", serif; font-size: 10px; letter-spacing: .24em; color: #b9a982; }
[data-lens="tarot"] .link-btn { color: #f1d27a; font: inherit; letter-spacing: inherit; }
[data-lens="tarot"] .chips li { border-radius: 0; border: 1px solid rgba(212,175,55,.5); color: #efe3c6; font-family: "Cinzel", serif; font-size: 10px; letter-spacing: .24em; padding: 9px 14px; }
[data-lens="tarot"] .section-intro { color: #d8ccab; font-size: 18px; text-align: center; margin: 0 auto; }
[data-lens="tarot"] .section-intro strong { color: #f1d27a; }
[data-lens="tarot"] .services-head { text-align: center; justify-items: center; }
[data-lens="tarot"] .service-list { border-top: 1px solid rgba(212,175,55,.4); }
[data-lens="tarot"] .service { border-bottom: 1px solid rgba(212,175,55,.25); }
[data-lens="tarot"] .service-num { font-family: "Cinzel", serif; font-weight: 700; font-size: 26px; color: #d4af37; padding-top: .2em; }
[data-lens="tarot"] .service-num::before { content: "✶ "; font-size: 12px; vertical-align: middle; }
[data-lens="tarot"] .service-title { font-weight: 700; letter-spacing: .06em; color: #f1d27a; }
[data-lens="tarot"] .service:hover .service-title { transform: none; text-shadow: 0 0 24px rgba(241,210,122,.5); }
[data-lens="tarot"] .service-sub { font-style: italic; font-weight: 500; font-size: 18px; color: #b9a982; letter-spacing: 0; text-transform: none; }
[data-lens="tarot"] .service-body p { color: #d8ccab; font-size: 17px; }
[data-lens="tarot"] .service-cta { font-family: "Cinzel", serif; font-weight: 700; font-size: 11px; letter-spacing: .24em; color: #0f0a2e; background: linear-gradient(#f1d27a, #b8912a); padding: 10px 16px; border: 0; }
[data-lens="tarot"] .service-cta span { display: none; }
[data-lens="tarot"] .service-cta::after { content: " ✶"; }
[data-lens="tarot"] .service-cta:hover { background: #fff3c4; }
[data-lens="tarot"] .service-media { overflow: visible; background: transparent; aspect-ratio: 3 / 5; perspective: 1200px; box-shadow: none; }
[data-lens="tarot"] .service-media img { width: 100%; height: 100%; object-fit: cover; border: 8px solid #efe3c6; box-sizing: border-box; outline: 1px solid #d4af37; outline-offset: -8px; backface-visibility: hidden; transform: rotateY(180deg); transition: transform 1s cubic-bezier(.4,0,.2,1), filter .5s; }
[data-lens="tarot"] .service-media.is-up img { transform: rotateY(0); }
[data-lens="tarot"] .service:hover .service-media img { transform: rotateY(0) scale(1.02); filter: sepia(.15) contrast(1.15) saturate(.9); }
.tr-back { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: radial-gradient(circle, #d4af37 0 1.6px, transparent 2.4px) 0 0 / 22px 22px, repeating-linear-gradient(45deg, rgba(212,175,55,.16) 0 1px, transparent 1px 11px), #1b1450; border: 6px solid #efe3c6; box-shadow: inset 0 0 0 1px #d4af37, inset 0 0 0 8px #1b1450, inset 0 0 0 9px #d4af37; backface-visibility: hidden; transform: rotateY(0); transition: transform 1s cubic-bezier(.4,0,.2,1); }
.tr-back i { width: 44%; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #d4af37; border-radius: 50%; color: #f1d27a; font-style: normal; font-size: clamp(28px, 3vw, 48px); background: #0f0a2e; box-shadow: 0 0 0 6px #0f0a2e, 0 0 0 7px rgba(212,175,55,.5); }
[data-lens="tarot"] .service-media.is-up .tr-back { transform: rotateY(-180deg); }
[data-lens="tarot"] .service-media::after { content: attr(data-card); position: absolute; left: 8%; right: 8%; bottom: 7%; z-index: 3; text-align: center; font-family: "Cinzel", serif; font-weight: 700; font-size: clamp(10px, .9vw, 13px); letter-spacing: .22em; color: #1a1030; background: #efe3c6; padding: 7px 4px 6px; border: 1px solid #b8912a; opacity: 0; transition: opacity .6s .6s; }
[data-lens="tarot"] .service-media.is-up::after { opacity: 1; }
[data-lens="tarot"] .why-title { color: #f1d27a; max-width: none; }
[data-lens="tarot"] .why-grid { border-top: 1px solid rgba(212,175,55,.4); counter-reset: trw; }
[data-lens="tarot"] .why-item { border-color: rgba(212,175,55,.25); counter-increment: trw; }
[data-lens="tarot"] .why-num { font-size: 0; -webkit-text-stroke: 0; color: #d4af37; }
[data-lens="tarot"] .why-num::before { content: counter(trw, upper-roman); font-family: "Cinzel", serif; font-weight: 700; font-size: 22px; letter-spacing: .2em; }
[data-lens="tarot"] .why-item h3 { font-weight: 700; letter-spacing: .06em; color: #efe3c6; }
[data-lens="tarot"] .why-item p { color: #d8ccab; font-size: 17px; }
[data-lens="tarot"] .contact-kicker { font-family: "Cinzel", serif; letter-spacing: .3em; color: #b9a982; font-size: 11px; }
[data-lens="tarot"] .contact-kicker::before { content: "☾ "; color: #d4af37; }
[data-lens="tarot"] .contact-mail { font-weight: 700; letter-spacing: .02em; color: #f1d27a; border-bottom: 1px solid rgba(212,175,55,.5); text-shadow: 0 2px 0 #000, 0 12px 40px rgba(212,175,55,.25); }
[data-lens="tarot"] .contact-row p { color: #d8ccab; font-size: 17px; }
[data-lens="tarot"] .btn { border-radius: 0; background: linear-gradient(#f1d27a, #b8912a); color: #0f0a2e; border: 1px solid #f1d27a; font-family: "Cinzel", serif; font-weight: 700; font-size: 11px; letter-spacing: .24em; }
[data-lens="tarot"] .btn--ghost { background: transparent; color: #f1d27a; border: 1px solid rgba(212,175,55,.6); }
[data-lens="tarot"] .btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(212,175,55,.35); }
[data-lens="tarot"] .site-footer { background: #070516; }
[data-lens="tarot"] .footer-big { font-weight: 700; letter-spacing: .08em; color: transparent; -webkit-text-stroke: 1px rgba(212,175,55,.5); border-top: 1px solid rgba(212,175,55,.3); }
[data-lens="tarot"] .footer-row { color: #b9a982; font-family: "Cinzel", serif; font-size: 10px; letter-spacing: .2em; }
[data-lens="tarot"] .footer-claim, [data-lens="tarot"] .footer-top { color: #f1d27a; font-weight: 700; }
[data-lens="tarot"] .footer-legal { font-family: "Cinzel", serif; font-size: 10px; letter-spacing: .2em; }
[data-lens="tarot"] .lens-fab { border-radius: 999px; background: #0f0a2e; color: #f1d27a; border: 1px solid #d4af37; box-shadow: 0 0 0 4px #0f0a2e, 0 0 0 5px rgba(212,175,55,.4), 0 14px 40px rgba(0,0,0,.5); font-family: "Cinzel", serif; }
[data-lens="tarot"] .lens-fab::before { display: none; }
[data-lens="tarot"] .lens-fab:hover { box-shadow: 0 0 0 4px #0f0a2e, 0 0 0 5px #d4af37, 0 0 40px rgba(212,175,55,.35); }
[data-lens="tarot"] .lens-fab-label { font-weight: 700; font-size: 11px; letter-spacing: .24em; }
[data-lens="tarot"] .lens-panel { border-radius: 0; background: #efe3c6; color: #1a1030; border: 1px solid #b8912a; box-shadow: inset 0 0 0 6px #efe3c6, inset 0 0 0 7px #b8912a, 0 30px 80px rgba(0,0,0,.7); font-family: "Cormorant Garamond", Georgia, serif; }
[data-lens="tarot"] .lens-panel-head { border-bottom: 1px solid #b8912a; margin: 7px 7px 0; }
[data-lens="tarot"] .lens-panel-title { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .12em; }
[data-lens="tarot"] .lens-panel-sub { font-style: italic; font-size: 15px; color: #6e5a2a; }
[data-lens="tarot"] .lens-close { border-radius: 0; border-color: #b8912a; background: #efe3c6; color: #1a1030; }
[data-lens="tarot"] .lens-list { margin: 0 7px; }
[data-lens="tarot"] .lens-list li { border-color: rgba(184,145,42,.35); }
[data-lens="tarot"] .lens-opt:hover, [data-lens="tarot"] .lens-opt:focus-visible { background: #1b1450; color: #f1d27a; }
[data-lens="tarot"] .lo-text b { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .08em; font-size: 13px; }
[data-lens="tarot"] .lo-text small { font-style: italic; font-size: 14px; }
[data-lens="tarot"] .lens-opt kbd { border-radius: 0; border-color: #b8912a; }
[data-lens="tarot"] .lens-panel-foot { border-top: 1px solid #b8912a; margin: 0 7px 7px; }
[data-lens="tarot"] .sound-toggle { border-radius: 0; border-color: #b8912a; font-family: "Cinzel", serif; letter-spacing: .16em; }
[data-lens="tarot"] .sound-toggle[aria-pressed="true"] { background: #1b1450; color: #f1d27a; }
[data-lens="tarot"] .toast { border-radius: 0; background: #efe3c6; color: #1a1030; border: 1px solid #b8912a; font-family: "Cinzel", serif; letter-spacing: .12em; }
[data-lens="tarot"] .lens-hint { background: #efe3c6; color: #1a1030; border: 1px solid #b8912a; box-shadow: none; font-style: italic; font-family: "Cormorant Garamond", Georgia, serif; font-size: 16px; }
[data-lens="tarot"] .lens-hint::after { background: #efe3c6; border-color: #b8912a; }
.lo-tarot { background: radial-gradient(circle at 50% 50%, #1e64c8 0 3px, #f3efe4 3.5px 6px, #0f0a2e 6.5px); border-color: #d4af37; }
.vl-tr { inset: 0; background: radial-gradient(ellipse at 50% 40%, #1b1450, #070516 70%); }
.vl-card { position: absolute; left: 50%; top: 50%; width: min(220px, 40vw); aspect-ratio: 3 / 5; display: grid; place-items: center; background: radial-gradient(circle, #d4af37 0 1.6px, transparent 2.4px) 0 0 / 22px 22px, repeating-linear-gradient(45deg, rgba(212,175,55,.16) 0 1px, transparent 1px 11px), #1b1450; border: 6px solid #efe3c6; box-shadow: inset 0 0 0 1px #d4af37, inset 0 0 0 8px #1b1450, inset 0 0 0 9px #d4af37, 0 30px 60px rgba(0,0,0,.6); color: #f1d27a; font-size: 40px; transform: translate(-50%, -50%); }
@media (max-width: 760px) {
  .tr-orn i { width: 44px; height: 44px; } .tr-glyph { display: none; }
  [data-lens="tarot"] .hero-title { margin-left: 0; margin-right: 0; } [data-lens="tarot"] .hero-meta { margin: 0; } [data-lens="tarot"] .hero-foot { margin-left: 0; margin-right: 0; }
  [data-lens="tarot"] .about > .wrap::before, [data-lens="tarot"] .contact > .wrap::before { inset: -12px; }
  .tr-chart { opacity: .14; }
}

/* ==========================================================================
   CLAY — plasticine on squared paper
   ========================================================================== */
html[data-lens="clay"] {
  --bg: transparent; --fg: #3b2a20; --muted: #6b5546; --line: rgba(59,42,32,.25); --soft: transparent;
  --dark-bg: #3e8e5e; --dark-fg: #fff; --dark-muted: #e6f5ea; --dark-line: rgba(255,255,255,.35);
  --f-head: "Chewy", "Comic Neue", sans-serif;
  --f-body: "Gaegu", "Comic Neue", cursive;
  --img-filter: saturate(1.3) contrast(1.05);
  --clay-hi: rgba(255,255,255,.45); --clay-sh: rgba(0,0,0,.2);
  --eye-white: #fff; --eye-line: #fff; --eye-iris: #2f80ed; --eye-ring: #1b5fc1; --eye-pupil: #1a1a1a; --eye-glint: #fff;
}
[data-lens="clay"] body { background: #fbf8ef; background-image: linear-gradient(rgba(70,130,220,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(70,130,220,.16) 1px, transparent 1px); background-size: 24px 24px; font-size: 18px; line-height: 1.5; }
[data-lens="clay"] ::selection { background: #ffd23f; color: #3b2a20; }
[data-lens="clay"] .hero, [data-lens="clay"] .services, [data-lens="clay"] .why, [data-lens="clay"] .about, [data-lens="clay"] .contact { background: transparent; }
@keyframes clWobble { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(calc(var(--r) * -1)) translateY(-.04em); } }
@keyframes clDraw { to { stroke-dashoffset: 0; } }
@keyframes clSplat { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.cl-deco { position: absolute; inset: 0; overflow: hidden; }
.cl-sun { position: absolute; right: 6%; top: 8%; width: clamp(80px, 12vw, 160px); height: clamp(80px, 12vw, 160px); border-radius: 50%; background: #ffd23f; box-shadow: inset 6px 6px 0 var(--clay-hi), inset -8px -10px 0 var(--clay-sh), 0 12px 0 rgba(0,0,0,.12), 0 0 0 18px rgba(255,210,63,.18), 0 0 0 40px rgba(255,210,63,.08); }
.cl-rainbow { position: absolute; left: -6%; bottom: 14%; width: clamp(240px, 40vw, 560px); aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; border: 22px solid #ff4b3e; border-bottom: 0; box-shadow: inset 0 0 0 22px #ffd23f, inset 0 0 0 44px #3ddc84, inset 0 0 0 66px #2f80ed; opacity: .55; }
.cl-worm { position: absolute; height: 28px; border-radius: 999px; background: var(--c); box-shadow: inset 4px 5px 0 var(--clay-hi), inset -6px -8px 0 var(--clay-sh), 0 10px 0 rgba(0,0,0,.14); opacity: .8; }
.cl-ball { position: absolute; border-radius: 50%; background: var(--c); box-shadow: inset 4px 5px 0 var(--clay-hi), inset -6px -8px 0 var(--clay-sh), 0 8px 0 rgba(0,0,0,.14); opacity: .85; }
.cl-scribble { position: absolute; inset: 0; pointer-events: none; }
.cl-scribble svg { width: 100%; height: 100%; }
.cl-scribble path { fill: none; stroke: #ff4b3e; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: clDraw 2.4s ease-out .4s forwards; filter: url(#fx-rough); opacity: .8; }
.cl-scribble .c2 { stroke: #2f80ed; stroke-dasharray: 500; stroke-dashoffset: 500; animation-delay: 1.2s; }
.cl-scribble .c3 { stroke: #3ddc84; stroke-dasharray: 300; stroke-dashoffset: 300; animation-delay: 1.8s; }
.cl-cursor { position: fixed; left: 0; top: 0; z-index: 120; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #2f80ed; box-shadow: inset 3px 3px 0 var(--clay-hi), inset -4px -5px 0 var(--clay-sh), 0 4px 0 rgba(0,0,0,.2); pointer-events: none; }
.cl-cursor.is-down { scale: 1.4 .7; }
.cl-splat { position: absolute; width: 60px; height: 60px; border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%; background: var(--c); box-shadow: inset 4px 5px 0 var(--clay-hi), inset -6px -8px 0 var(--clay-sh); animation: clSplat .8s ease-out forwards; pointer-events: none; }
.cl-ltr { display: inline-block; color: var(--c); font-family: "Chewy", "Comic Neue", sans-serif; text-shadow: -1px -1px 0 rgba(255,255,255,.55), 3px 3px 0 rgba(0,0,0,.18), 6px 7px 0 rgba(0,0,0,.14), 10px 12px 16px rgba(0,0,0,.25); text-shadow: -1px -1px 0 rgba(255,255,255,.55), 3px 3px 0 color-mix(in srgb, var(--c), #000 25%), 6px 7px 0 color-mix(in srgb, var(--c), #000 42%), 10px 12px 16px rgba(0,0,0,.25); transform: rotate(var(--r)); animation: clWobble 3.2s ease-in-out var(--d) infinite; }
[data-lens="clay"] .site-header { background: rgba(251,248,239,.9); color: #3b2a20; border-bottom: 3px dashed rgba(59,42,32,.25); }
[data-lens="clay"] .logo-word { font-family: "Chewy", sans-serif; font-size: 22px; letter-spacing: .02em; }
[data-lens="clay"] .logo-word b { font-weight: 400; color: #ff4b3e; text-shadow: 2px 2px 0 rgba(0,0,0,.15); }
[data-lens="clay"] .logo-word span { font-weight: 400; color: #2f80ed; text-shadow: 2px 2px 0 rgba(0,0,0,.15); }
[data-lens="clay"] .site-nav { gap: 10px; }
[data-lens="clay"] .site-nav a { font-family: "Chewy", sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .04em; color: #fff; background: #2f80ed; padding: 6px 14px; border-radius: 999px; box-shadow: inset 2px 3px 0 var(--clay-hi), inset -3px -4px 0 var(--clay-sh), 0 4px 0 rgba(0,0,0,.15); }
[data-lens="clay"] .site-nav a:nth-child(2) { background: #ff4b3e; } [data-lens="clay"] .site-nav a:nth-child(3) { background: #3ddc84; } [data-lens="clay"] .site-nav a:nth-child(4) { background: #9b5de5; }
[data-lens="clay"] .site-nav a::after, [data-lens="clay"] .header-mail::after { display: none; }
[data-lens="clay"] .site-nav a:hover { transform: translateY(2px); box-shadow: inset 2px 3px 0 var(--clay-hi), inset -3px -4px 0 var(--clay-sh), 0 2px 0 rgba(0,0,0,.15); }
[data-lens="clay"] .header-mail { font-family: "Gaegu", cursive; font-weight: 700; font-size: 16px; color: #3b2a20; }
[data-lens="clay"] .eye { filter: drop-shadow(0 5px 0 rgba(0,0,0,.16)); overflow: visible; }
[data-lens="clay"] .ht-eye .eye { filter: none; }
[data-lens="clay"] .eye .eye-line { stroke-width: 13; stroke-linejoin: round; stroke-linecap: round; }
[data-lens="clay"] .eye .iris-ring { stroke-width: 6; }
[data-lens="clay"] .eye .iris-extra { display: none; }
[data-lens="clay"] .hero { isolation: isolate; }
[data-lens="clay"] .hero > *:not(.cl-scribble) { position: relative; z-index: 1; }
[data-lens="clay"] .hero-meta { font-family: "Gaegu", cursive; font-weight: 700; font-size: 16px; letter-spacing: .02em; text-transform: none; color: #6b5546; border-bottom: 3px dashed rgba(59,42,32,.25); }
[data-lens="clay"] .hero-title { font-weight: 400; letter-spacing: .02em; line-height: 1; }
[data-lens="clay"] .ht-1 .ht-word, [data-lens="clay"] .ht-o, [data-lens="clay"] .ht-2 { color: inherit; -webkit-text-stroke: 0; }
@media (hover: hover) and (pointer: fine) { .cl-ltr { filter: url(#fx-clay); animation: none; } }
[data-lens="clay"] .hero-tagline { font-family: "Gaegu", cursive; font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; color: #3b2a20; text-transform: none; letter-spacing: 0; }
[data-lens="clay"] .hero-intro { font-size: 18px; color: #4d3a2e; }
[data-lens="clay"] .hero-intro strong { color: #ff4b3e; font-weight: 700; }
[data-lens="clay"] .hero-badge { background: #ffd23f; border: 0; box-shadow: inset 6px 6px 0 var(--clay-hi), inset -8px -10px 0 var(--clay-sh), 0 10px 0 rgba(0,0,0,.15); }
[data-lens="clay"] .hero-badge text { font-family: "Gaegu", cursive; font-weight: 700; font-size: 13px; fill: #3b2a20; letter-spacing: .12em; }
[data-lens="clay"] .scroll-cue { font-family: "Gaegu", cursive; color: #6b5546; letter-spacing: .1em; }
[data-lens="clay"] .marquee { background: #ff4b3e; color: #fff; font-family: "Chewy", sans-serif; font-weight: 400; letter-spacing: .03em; margin: 0 14px; border-radius: 999px; box-shadow: inset 6px 8px 0 var(--clay-hi), inset -8px -12px 0 var(--clay-sh), 0 12px 0 rgba(0,0,0,.14); text-shadow: 2px 2px 0 rgba(0,0,0,.18); }
[data-lens="clay"] .marquee-track i { font-size: 0; opacity: 1; }
[data-lens="clay"] .marquee-track i::before { content: "★"; font-size: clamp(22px, 3.4vw, 48px); color: #ffd23f; }
[data-lens="clay"] .section-label { font-family: "Gaegu", cursive; font-weight: 700; font-size: 17px; letter-spacing: 0; text-transform: none; }
[data-lens="clay"] .section-label::after { height: 3px; border-radius: 3px; background: currentColor; opacity: .5; }
[data-lens="clay"] .section-title { font-weight: 400; letter-spacing: .02em; line-height: 1.02; text-shadow: -1px -1px 0 rgba(255,255,255,.5), 3px 3px 0 rgba(0,0,0,.14), 6px 7px 0 rgba(0,0,0,.1); }
[data-lens="clay"] .about { background: #3e8e5e; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 48px 48px; }
[data-lens="clay"] .about .section-title { color: #ffd23f; }
[data-lens="clay"] .about-copy { font-size: 19px; color: #fff; }
[data-lens="clay"] .about-copy .lead { font-family: "Chewy", sans-serif; font-weight: 400; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.18); }
[data-lens="clay"] .about-copy strong { color: #ffd23f; }
[data-lens="clay"] .facts { border-top: 3px dashed rgba(255,255,255,.4); }
[data-lens="clay"] .facts li { border-bottom: 2px dashed rgba(255,255,255,.25); }
[data-lens="clay"] .facts strong { font-family: "Chewy", sans-serif; font-weight: 400; color: #ffd23f; text-shadow: 3px 3px 0 rgba(0,0,0,.2); }
[data-lens="clay"] .facts span { font-family: "Gaegu", cursive; font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; color: #e6f5ea; }
[data-lens="clay"] .link-btn { color: #ffd23f; font: inherit; }
[data-lens="clay"] .chips li { border: 0; border-radius: 999px; background: #fff; color: #3b2a20; font-family: "Gaegu", cursive; font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; padding: 8px 16px; box-shadow: inset 2px 3px 0 rgba(255,255,255,.8), inset -3px -4px 0 rgba(0,0,0,.1), 0 4px 0 rgba(0,0,0,.14); }
[data-lens="clay"] .section-intro { font-size: 19px; color: #4d3a2e; }
[data-lens="clay"] .section-intro strong { color: #2f80ed; }
[data-lens="clay"] .service-list { border: 0; display: grid; gap: 34px; }
[data-lens="clay"] .service { --c: #2f80ed; border: 0; padding: clamp(22px, 3vw, 40px); border-radius: 34px 40px 30px 44px / 40px 30px 44px 34px; background: var(--c); color: #fff; box-shadow: inset 6px 8px 0 var(--clay-hi), inset -10px -14px 0 var(--clay-sh), 0 14px 0 rgba(0,0,0,.14), 0 24px 40px rgba(0,0,0,.14); }
[data-lens="clay"] .service:nth-child(2) { --c: #ff4b3e; border-radius: 44px 30px 40px 34px / 30px 44px 34px 40px; }
[data-lens="clay"] .service:nth-child(3) { --c: #3ddc84; --clay-sh: rgba(0,0,0,.28); }
[data-lens="clay"] .service:nth-child(4) { --c: #9b5de5; border-radius: 30px 44px 34px 40px / 44px 34px 40px 30px; }
[data-lens="clay"] .service:nth-child(5) { --c: #ff8c42; }
[data-lens="clay"] .service:hover { background: var(--c); }
[data-lens="clay"] .service-num { font-family: "Chewy", sans-serif; font-weight: 400; font-size: 34px; color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.2); padding-top: .1em; }
[data-lens="clay"] .service-title { font-weight: 400; letter-spacing: .02em; color: #fff; text-shadow: -1px -1px 0 rgba(255,255,255,.4), 4px 4px 0 rgba(0,0,0,.2); }
[data-lens="clay"] .service:hover .service-title { transform: rotate(-2deg) scale(1.03); }
[data-lens="clay"] .service-sub { font-family: "Gaegu", cursive; font-weight: 700; font-size: 18px; letter-spacing: 0; text-transform: none; color: #fff; opacity: .9; }
[data-lens="clay"] .service-body p { color: #fff; font-size: 18px; }
[data-lens="clay"] .service-cta { font-family: "Chewy", sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .03em; color: #3b2a20; background: #ffd23f; padding: 10px 20px; border-radius: 999px; border: 0; box-shadow: inset 3px 4px 0 var(--clay-hi), inset -4px -6px 0 rgba(0,0,0,.15), 0 6px 0 rgba(0,0,0,.18); text-transform: none; }
[data-lens="clay"] .service-cta:hover { transform: translateY(3px); box-shadow: inset 3px 4px 0 var(--clay-hi), inset -4px -6px 0 rgba(0,0,0,.15), 0 2px 0 rgba(0,0,0,.18); }
[data-lens="clay"] .service-media { border: 12px solid #fff; border-radius: 30px 36px 28px 34px / 34px 28px 36px 30px; box-shadow: inset 0 0 0 4px rgba(0,0,0,.08), 0 10px 0 rgba(0,0,0,.14); transform: rotate(2deg); background: #fff; }
[data-lens="clay"] .service:nth-child(even) .service-media { transform: rotate(-2deg); }
[data-lens="clay"] .why { background: #d9b98c; background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.5px); background-size: 7px 7px; }
[data-lens="clay"] .why-title { color: #3b2a20; }
[data-lens="clay"] .why-grid { border: 0; gap: 26px; }
[data-lens="clay"] .why-item, [data-lens="clay"] .why-item:nth-child(even) { border: 0 !important; background: #fff; border-radius: 26px 34px 28px 30px / 30px 28px 34px 26px; padding: 30px 28px; box-shadow: inset 4px 5px 0 rgba(255,255,255,.9), inset -6px -8px 0 rgba(0,0,0,.06), 0 10px 0 rgba(0,0,0,.12); }
[data-lens="clay"] .why-num { -webkit-text-stroke: 0; color: #fff; font-family: "Chewy", sans-serif; font-size: 28px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #ff4b3e; box-shadow: inset 3px 4px 0 var(--clay-hi), inset -4px -6px 0 var(--clay-sh), 0 5px 0 rgba(0,0,0,.15); margin-bottom: 16px; }
[data-lens="clay"] .why-item:nth-child(2) .why-num { background: #2f80ed; } [data-lens="clay"] .why-item:nth-child(3) .why-num { background: #3ddc84; } [data-lens="clay"] .why-item:nth-child(4) .why-num { background: #9b5de5; }
[data-lens="clay"] .why-item h3 { font-weight: 400; letter-spacing: .02em; color: #3b2a20; font-size: clamp(24px, 2vw, 30px); }
[data-lens="clay"] .why-item p { color: #4d3a2e; font-size: 18px; }
[data-lens="clay"] .contact { background: #2f80ed; --dark-fg: #fff; --dark-muted: #dbe9ff; --dark-line: rgba(255,255,255,.35); }
[data-lens="clay"] .contact-kicker { font-family: "Gaegu", cursive; font-weight: 700; font-size: 18px; letter-spacing: 0; text-transform: none; color: #dbe9ff; }
[data-lens="clay"] .contact-mail { font-weight: 400; letter-spacing: .01em; color: #ffd23f; border-bottom: 4px dashed rgba(255,255,255,.4); text-shadow: -1px -1px 0 rgba(255,255,255,.5), 4px 4px 0 rgba(0,0,0,.2), 8px 9px 0 rgba(0,0,0,.12); }
[data-lens="clay"] .contact-row p { color: #fff; font-size: 18px; }
[data-lens="clay"] .btn { border-radius: 999px; background: #ff4b3e; color: #fff; border: 0; font-family: "Chewy", sans-serif; font-weight: 400; font-size: 18px; letter-spacing: .03em; box-shadow: inset 3px 4px 0 var(--clay-hi), inset -4px -6px 0 var(--clay-sh), 0 7px 0 rgba(0,0,0,.2); text-shadow: 1px 1px 0 rgba(0,0,0,.15); }
[data-lens="clay"] .btn--ghost { background: #3ddc84; color: #1d3b2a; }
[data-lens="clay"] .btn:hover { transform: translateY(4px); box-shadow: inset 3px 4px 0 var(--clay-hi), inset -4px -6px 0 var(--clay-sh), 0 2px 0 rgba(0,0,0,.2); }
[data-lens="clay"] .site-footer { background: #3e8e5e; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 48px 48px; color: #fff; }
[data-lens="clay"] .footer-big { font-weight: 400; letter-spacing: .02em; color: #ffd23f; -webkit-text-stroke: 0; border-top: 0; text-shadow: -1px -1px 0 rgba(255,255,255,.5), 4px 4px 0 rgba(0,0,0,.18), 8px 9px 0 rgba(0,0,0,.1); }
[data-lens="clay"] .footer-row { font-family: "Gaegu", cursive; font-weight: 700; font-size: 16px; letter-spacing: 0; text-transform: none; color: #e6f5ea; }
[data-lens="clay"] .footer-claim, [data-lens="clay"] .footer-top { color: #ffd23f; }
[data-lens="clay"] .footer-legal { font-family: "Gaegu", cursive; font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; }
[data-lens="clay"] .lens-fab { border-radius: 999px; background: #ff4b3e; color: #fff; border: 0; box-shadow: inset 4px 5px 0 var(--clay-hi), inset -5px -7px 0 var(--clay-sh), 0 8px 0 rgba(0,0,0,.2); font-family: "Chewy", sans-serif; --eye-white: #fff; --eye-line: #fff; --eye-iris: #2f80ed; --eye-ring: #1b5fc1; --eye-pupil: #1a1a1a; }
[data-lens="clay"] .lens-fab::before { display: none; }
[data-lens="clay"] .lens-fab:hover { transform: translateY(4px); box-shadow: inset 4px 5px 0 var(--clay-hi), inset -5px -7px 0 var(--clay-sh), 0 2px 0 rgba(0,0,0,.2); }
[data-lens="clay"] .lens-fab-label { font-weight: 400; font-size: 18px; letter-spacing: .03em; text-shadow: 1px 1px 0 rgba(0,0,0,.15); }
[data-lens="clay"] .lens-panel { border-radius: 30px 36px 28px 34px / 34px 28px 36px 30px; background: #ffd23f; color: #3b2a20; border: 0; box-shadow: inset 6px 8px 0 var(--clay-hi), inset -10px -14px 0 var(--clay-sh), 0 16px 0 rgba(0,0,0,.14), 0 30px 60px rgba(0,0,0,.25); font-family: "Gaegu", cursive; }
[data-lens="clay"] .lens-panel-head { border-bottom: 3px dashed rgba(59,42,32,.25); }
[data-lens="clay"] .lens-panel-title { font-family: "Chewy", sans-serif; font-weight: 400; font-size: 28px; letter-spacing: .02em; text-shadow: 2px 2px 0 rgba(0,0,0,.12); }
[data-lens="clay"] .lens-panel-sub { font-weight: 700; font-size: 16px; color: #6b5546; }
[data-lens="clay"] .lens-close { border-radius: 50%; background: #ff4b3e; color: #fff; border: 0; box-shadow: inset 2px 3px 0 var(--clay-hi), inset -3px -4px 0 var(--clay-sh); }
[data-lens="clay"] .lens-list li { border-color: rgba(59,42,32,.18); border-style: dashed; }
[data-lens="clay"] .lens-opt:hover, [data-lens="clay"] .lens-opt:focus-visible { background: #fff; color: #3b2a20; }
[data-lens="clay"] .lo-text b { font-family: "Chewy", sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .02em; }
[data-lens="clay"] .lo-text small { font-weight: 700; font-size: 15px; }
[data-lens="clay"] .lens-opt kbd { border-radius: 8px; }
[data-lens="clay"] .lens-panel-foot { border-top: 3px dashed rgba(59,42,32,.25); }
[data-lens="clay"] .sound-toggle { border-radius: 999px; border: 0; background: #2f80ed; color: #fff; font-family: "Chewy", sans-serif; font-weight: 400; letter-spacing: .03em; box-shadow: inset 2px 3px 0 var(--clay-hi), inset -3px -4px 0 var(--clay-sh); }
[data-lens="clay"] .lens-warning { font-weight: 700; }
[data-lens="clay"] .toast { border-radius: 999px; background: #3ddc84; color: #1d3b2a; font-family: "Chewy", sans-serif; font-weight: 400; letter-spacing: .03em; font-size: 16px; box-shadow: inset 2px 3px 0 var(--clay-hi), inset -3px -4px 0 var(--clay-sh), 0 5px 0 rgba(0,0,0,.15); }
[data-lens="clay"] .lens-hint { background: #fff; color: #3b2a20; border: 0; box-shadow: 0 5px 0 rgba(0,0,0,.14); font-family: "Gaegu", cursive; font-weight: 700; font-size: 17px; border-radius: 18px 22px 18px 20px; }
[data-lens="clay"] .lens-hint::after { background: #fff; border: 0; }
.lo-clay { background: #ff4b3e; border-color: #ff4b3e; box-shadow: inset 2px 3px 0 rgba(255,255,255,.45), inset -3px -4px 0 rgba(0,0,0,.2); border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%; }
.vl-cl { inset: 0; background: transparent; }
.vl-blob { position: absolute; width: 60vmax; height: 60vmax; border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%; background: var(--c); box-shadow: inset 20px 24px 0 rgba(255,255,255,.35), inset -30px -40px 0 rgba(0,0,0,.18); transform: translate(-50%, -50%) scale(0); }
@media (max-width: 760px) {
  .cl-ltr { animation: none; }
  .cl-rainbow { display: none; }
  [data-lens="clay"] .service { padding: 20px 18px; }
  [data-lens="clay"] .site-nav a { padding: 4px 10px; font-size: 13px; }
}

/* ==========================================================================
   ANTI-DESIGN — digital dada
   ========================================================================== */
html[data-lens="anti"] {
  --bg: #fff; --fg: #000; --muted: #5c4033; --line: #000; --soft: transparent;
  --dark-bg: #0000ff; --dark-fg: #ffff00; --dark-muted: #ffff00; --dark-line: #ffff00;
  --f-head: "Times New Roman", Times, serif;
  --f-body: "Comic Neue", "Comic Sans MS", cursive;
  --img-filter: saturate(3) contrast(1.4) hue-rotate(15deg);
  --eye-white: #ffff00; --eye-line: #0000ff; --eye-iris: #ff0000; --eye-ring: #00ff00; --eye-pupil: #000; --eye-glint: #fff;
}
[data-lens="anti"] body { background: #fff; font-size: 17px; line-height: 1.35; }
[data-lens="anti"] ::selection { background: #00ff00; color: #ff0000; }
@keyframes ddMq { to { transform: translateX(-50%); } }
@keyframes ddBlink { 50% { visibility: hidden; } }
@keyframes ddShake { 0% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } 100% { transform: translate(-1px, 1px); } }
@keyframes ddFire { 0% { background-position: 0 0, 10px 0, 20px 0; } 100% { background-position: 0 0, 10px -6px, 20px 4px; } }
html.dd-shake main { animation: ddShake .3s steps(2) infinite; }
.dd-ltr { display: inline-block; rotate: var(--r); translate: 0 var(--y); scale: var(--sc); }
.dd-f1 { font-family: "Times New Roman", Times, serif; font-weight: 700; font-style: italic; color: #000; }
.dd-f2 { font-family: "Kablammo", "Comic Neue", cursive; font-weight: 400; color: #ff0000; }
.dd-f3 { font-family: "Anton", Impact, sans-serif; font-weight: 400; color: #0000ff; }
.dd-f4 { font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; color: #5c4033; text-decoration: underline wavy #00ff00; }
.dd-f5 { font-family: Papyrus, "Segoe Script", "Comic Neue", fantasy; font-weight: 700; color: #ff00ff; }
.dd-mq { position: absolute; left: 0; right: 0; height: 34px; overflow: hidden; white-space: nowrap; font: 700 22px/34px "Comic Neue", "Comic Sans MS", cursive; pointer-events: none; }
.dd-mq span { display: inline-block; animation: ddMq 18s linear infinite; }
.dd-mq--top { top: var(--header-h); background: #0000ff; color: #ffff00; }
.dd-mq--mid { top: 48%; background: #ff0000; color: #fff; font-family: "Times New Roman", Times, serif; font-size: 26px; transform: rotate(-1.5deg); }
.dd-mq--bottom { bottom: 0; background: #ffff00; color: #ff0000; font-family: "Courier Prime", monospace; }
.dd-junk { position: absolute; inset: 0; pointer-events: none; --jx: 0vw; --jy: 0vh; transition: transform .2s steps(1); transform: translate(var(--jx), var(--jy)); mix-blend-mode: multiply; }
.dd-junk i { position: absolute; }
.dd-junk .j1 { left: 8%; top: 22%; width: 22vw; height: 8vw; background: #5c4033; }
.dd-junk .j2 { right: 10%; top: 58%; width: 12vw; height: 12vw; border-radius: 50%; background: #00ff00; }
.dd-junk .j3 { left: 40%; top: 70%; width: 30vw; height: 3vw; background: #ff0000; transform: rotate(-12deg); }
.dd-junk b { position: absolute; font-size: clamp(60px, 9vw, 140px); line-height: 1; color: #000; }
.dd-junk .j4 { left: 55%; top: 14%; transform: rotate(-30deg); } .dd-junk .j5 { left: 12%; top: 78%; transform: rotate(160deg); }
.dd-hand { position: fixed; left: 0; top: 0; z-index: 120; font-size: 72px; line-height: 1; color: #000; pointer-events: none; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff; }
.dd-sticker { position: absolute; right: 4%; top: calc(var(--header-h) + 60px); z-index: 3; width: 110px; height: 110px; border-radius: 50%; background: #ff0000; color: #ffff00; border: 4px dashed #ffff00; font: 700 16px/1.1 "Comic Neue", cursive; transform: rotate(14deg); cursor: pointer; animation: ddBlink 1.2s steps(1) infinite; box-shadow: 4px 4px 0 #000; }
.dd-midnav { display: block; margin: -30px auto 30px; width: max-content; max-width: 92vw; position: relative; z-index: 3; background: #ffff00; color: #000; border: 6px ridge #ff00ff; padding: 12px 18px; font: 400 18px/1.4 "Times New Roman", serif; transform: rotate(2deg); }
.dd-midnav b { font-family: "Comic Neue", cursive; color: #ff0000; }
.dd-midnav a { color: #0000ff; text-decoration: underline; }
.dd-counter { grid-column: 1 / -1; font: 400 16px/1.4 "VT323", monospace; color: #00ff00; background: #000; padding: 6px 12px; width: max-content; max-width: 100%; letter-spacing: .06em; }
.dd-counter b { color: #ff0000; font-size: 22px; }
.dd-skull { display: inline-block; animation: spin 2s linear infinite; font-size: 26px; vertical-align: middle; }
.dd-range { margin: 12px 0 18px; font: 400 16px/1.5 "Comic Neue", cursive; color: #fff; }
.dd-range label { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.dd-range b { color: #00ff00; }
.dd-range input { width: min(360px, 100%); accent-color: #ff0000; }
.dd-range output { display: block; margin-top: 4px; font-family: "Times New Roman", serif; font-style: italic; color: #ffff00; }
.dd-range.is-ok output { color: #00ff00; font-weight: 700; }
.dd-win { position: fixed; z-index: 90; width: min(360px, 88vw); background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 8px 8px 0 rgba(0,0,0,.4); font: 400 14px/1.4 Tahoma, Verdana, "Comic Neue", sans-serif; }
.dd-win-bar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; padding: 4px 8px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: default; }
.dd-win-bar b { background: #c0c0c0; color: #000; width: 18px; height: 16px; display: grid; place-items: center; font-size: 13px; border: 1px solid; border-color: #fff #404040 #404040 #fff; cursor: pointer; }
.dd-win-body { padding: 16px 14px 12px; }
.dd-win-body p { margin: 0 0 14px; }
.dd-win-btns { display: flex; gap: 8px; justify-content: flex-end; }
.dd-close { font: inherit; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 4px 14px; cursor: pointer; }
.dd-close:active { border-color: #404040 #fff #fff #404040; }
.dd-gaveup::after { content: " (ok, fine)"; font-family: "Comic Neue", cursive; text-transform: none; }
[data-lens="anti"] .site-header { background: #fff; color: #000; border-bottom: 6px ridge #ff00ff; }
[data-lens="anti"] .logo-word { font-family: "Comic Neue", cursive; font-size: 20px; letter-spacing: 0; color: #0000ff; text-decoration: underline; }
[data-lens="anti"] .logo-word b { font-weight: 700; } [data-lens="anti"] .logo-word span { font-weight: 400; color: #ff0000; }
[data-lens="anti"] .site-nav { transform: rotate(-4deg); opacity: .4; }
[data-lens="anti"] .site-nav:hover, [data-lens="anti"] .site-nav:focus-within { opacity: 1; }
[data-lens="anti"] .site-nav a, [data-lens="anti"] .header-mail { font: 400 17px "Times New Roman", serif; letter-spacing: 0; text-transform: none; color: #0000ff; text-decoration: underline; }
[data-lens="anti"] .site-nav a::after, [data-lens="anti"] .header-mail::after { display: none; }
[data-lens="anti"] .header-mail { background: #ffff00; padding: 4px 8px; color: #ff0000; font-family: "Comic Neue", cursive; font-weight: 700; }
[data-lens="anti"] .eye .eye-line { stroke-width: 9; }
[data-lens="anti"] .hero { background: #fff; isolation: isolate; }
[data-lens="anti"] .hero-meta { font: 700 14px/1.4 "Comic Neue", cursive; letter-spacing: 0; text-transform: none; color: #ff0000; border-bottom: 4px dotted #0000ff; background: #00ff00; padding: 6px 8px; }
[data-lens="anti"] .hero-title { font-weight: 700; letter-spacing: 0; line-height: 1; }
[data-lens="anti"] .ht-1 .ht-word, [data-lens="anti"] .ht-o, [data-lens="anti"] .ht-2 { color: inherit; -webkit-text-stroke: 0; }
[data-lens="anti"] .ht-2 { --fit-scale: .92; transform: skewX(-12deg) scaleY(1.25); filter: drop-shadow(5px 5px 0 #0000ff); }
[data-lens="anti"] .ht-2 .dd-ltr { color: #ff0000; background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #0000ff, #ff00ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-lens="anti"] .hero-copy { background: #ffff00; border: 6px double #ff0000; padding: 14px 16px; max-width: 520px; transform: rotate(1.5deg); }
[data-lens="anti"] .hero-tagline { font: 700 italic clamp(22px, 2.2vw, 30px)/1.1 "Times New Roman", serif; color: #0000ff; text-transform: uppercase; letter-spacing: -.02em; text-shadow: 3px 3px 0 #00ff00; }
[data-lens="anti"] .hero-intro { font: 400 16px/1.3 "Comic Neue", cursive; color: #000; text-align: justify; word-spacing: .55em; }
[data-lens="anti"] .hero-intro strong { background: #ff00ff; color: #fff; font-weight: 700; }
[data-lens="anti"] .hero-badge { background: #00ff00; border: 4px dashed #ff0000; border-radius: 0; animation: spin 6s linear infinite reverse; }
[data-lens="anti"] .hero-badge text { font: 700 12px "Comic Neue", cursive; fill: #ff0000; letter-spacing: .1em; }
[data-lens="anti"] .scroll-cue { display: none; }
[data-lens="anti"] .marquee { background: #ff00ff; color: #ffff00; font: 700 clamp(20px, 3vw, 44px)/1 "Comic Neue", cursive; letter-spacing: 0; text-shadow: 3px 3px 0 #0000ff; transform: rotate(1deg); }
[data-lens="anti"] .marquee-track i { font-size: 0; opacity: 1; }
[data-lens="anti"] .marquee-track i::before { content: "☞"; font-size: clamp(20px, 3vw, 44px); color: #00ff00; }
[data-lens="anti"] .section-label { font: 700 13px "Comic Neue", cursive; letter-spacing: 0; text-transform: none; color: #ff00ff; background: #00ff00; padding: 2px 8px; width: max-content; }
[data-lens="anti"] .section-label::after { display: none; }
[data-lens="anti"] .section-title { font-weight: 700; font-style: italic; letter-spacing: -.03em; line-height: .95; transform: scaleX(1.12); transform-origin: left; width: 86%; }
[data-lens="anti"] .section-title::after { content: ""; display: block; height: 26px; margin-top: 4px; background: radial-gradient(ellipse at 50% 100%, #ffff00 0 20%, transparent 21%) 0 0 / 20px 26px, radial-gradient(ellipse at 50% 100%, #ff8800 0 30%, transparent 31%) 10px 0 / 20px 26px, radial-gradient(ellipse at 50% 100%, #ff0000 0 42%, transparent 43%) 20px 0 / 20px 26px; animation: ddFire .25s steps(2) infinite; }
[data-lens="anti"] .about { background: #0000ff; }
[data-lens="anti"] .about .section-title { color: #ffff00; text-shadow: 4px 4px 0 #ff0000; }
[data-lens="anti"] .about-copy { font: 400 17px/1.35 "Comic Neue", cursive; color: #ffff00; text-align: justify; word-spacing: .5em; }
[data-lens="anti"] .about-copy .lead { font: 700 clamp(24px, 2.4vw, 36px)/1.05 "Times New Roman", serif; color: #fff; text-decoration: underline wavy #00ff00; }
[data-lens="anti"] .about-copy strong { color: #00ff00; }
[data-lens="anti"] .facts { border-top: 6px ridge #ffff00; }
[data-lens="anti"] .facts li { border-bottom: 3px dotted #ffff00; }
[data-lens="anti"] .facts strong { font: 700 clamp(44px, 5vw, 80px)/1 "Comic Neue", cursive; color: #00ff00; text-shadow: 3px 3px 0 #ff0000; letter-spacing: 0; }
[data-lens="anti"] .facts span { font: 400 15px "Times New Roman", serif; letter-spacing: 0; text-transform: none; color: #fff; }
[data-lens="anti"] .link-btn { color: #ff00ff; font: inherit; }
[data-lens="anti"] .chips li { border: 2px outset #c0c0c0; border-radius: 0; background: #c0c0c0; color: #000; font: 400 14px "Comic Neue", cursive; letter-spacing: 0; text-transform: none; }
[data-lens="anti"] .services { background: #ffff00; }
[data-lens="anti"] .services .section-title { color: #ff0000; }
[data-lens="anti"] .section-intro { font: 400 17px/1.35 "Times New Roman", serif; color: #000; text-align: justify; word-spacing: .6em; }
[data-lens="anti"] .section-intro strong { color: #0000ff; }
[data-lens="anti"] .service-list { border-top: 8px groove #ff00ff; }
[data-lens="anti"] .service { border-bottom: 4px dashed #ff0000; }
[data-lens="anti"] .service:nth-child(odd) { background: #00ff00; }
[data-lens="anti"] .service:hover { background: #ff00ff; }
[data-lens="anti"] .service-num { font: 700 clamp(30px, 4vw, 60px)/1 "Comic Neue", cursive; color: #0000ff; padding: 0; transform: rotate(-20deg); }
[data-lens="anti"] .service-title { font: 700 italic clamp(32px, 4vw, 64px)/.95 "Times New Roman", serif; letter-spacing: -.03em; color: #ff0000; text-shadow: 4px 4px 0 #0000ff; transform: scaleX(1.3); transform-origin: left; }
[data-lens="anti"] .service:hover .service-title { transform: scaleX(1.3) rotate(2deg); }
[data-lens="anti"] .service-sub { font: 700 15px "Comic Neue", cursive; letter-spacing: 0; text-transform: none; color: #ff00ff; }
[data-lens="anti"] .service-body p { font: 400 16px/1.3 "Times New Roman", serif; color: #000; text-align: justify; word-spacing: .6em; }
[data-lens="anti"] .service-cta { font: 700 15px "Comic Neue", cursive; color: #000; background: #c0c0c0; padding: 6px 14px; border: 3px outset #fff; letter-spacing: 0; text-transform: none; transition: transform .25s; }
[data-lens="anti"] .service-cta span { color: #ff0000; }
[data-lens="anti"] .service-media { border: 8px ridge #ff00ff; border-radius: 0; transform: rotate(-3deg); background: #5c4033; }
[data-lens="anti"] .service:nth-child(even) .service-media { transform: rotate(4deg) scaleX(1.15); }
[data-lens="anti"] .why { background: #ff0000; }
[data-lens="anti"] .why-title { color: #00ff00; text-shadow: 4px 4px 0 #0000ff; max-width: none; }
[data-lens="anti"] .why-grid { border-top: 6px ridge #ffff00; }
[data-lens="anti"] .why-item { border-color: #ffff00; background: #fff; }
[data-lens="anti"] .why-item:nth-child(even) { background: #5c4033; color: #fff; }
[data-lens="anti"] .why-num { -webkit-text-stroke: 0; color: #ff00ff; font: 700 clamp(40px, 5vw, 80px)/1 "Kablammo", "Comic Neue", cursive; }
[data-lens="anti"] .why-item h3 { font: 700 italic clamp(20px, 2vw, 28px)/1.05 "Times New Roman", serif; color: #0000ff; letter-spacing: -.02em; text-decoration: underline wavy #00ff00; }
[data-lens="anti"] .why-item:nth-child(even) h3 { color: #ffff00; }
[data-lens="anti"] .why-item p { font: 400 16px/1.3 "Comic Neue", cursive; text-align: justify; word-spacing: .4em; }
[data-lens="anti"] .contact { background: #5c4033; }
[data-lens="anti"] .contact-kicker { font: 700 15px "Comic Neue", cursive; letter-spacing: 0; text-transform: none; color: #00ff00; }
[data-lens="anti"] .contact-mail { font-family: "Times New Roman", serif; font-weight: 700; font-style: italic; letter-spacing: -.02em; color: #ffff00; border-bottom: 6px double #00ff00; text-shadow: 4px 4px 0 #ff0000; }
[data-lens="anti"] .contact-row p { font: 400 17px/1.35 "Comic Neue", cursive; color: #fff; }
[data-lens="anti"] .btn { border-radius: 0; background: #c0c0c0; color: #000; border: 3px outset #fff; font: 700 16px "Comic Neue", cursive; letter-spacing: 0; text-transform: none; }
[data-lens="anti"] .btn--ghost { background: #ffff00; }
[data-lens="anti"] .btn:hover { transform: none; background: #00ff00; }
[data-lens="anti"] .site-footer { background: #000; color: #fff; }
[data-lens="anti"] .footer-big { font-family: "Times New Roman", serif; font-weight: 700; font-style: italic; letter-spacing: 0; color: transparent; background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #0000ff, #ff00ff); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; border-top: 6px ridge #ff00ff; }
[data-lens="anti"] .footer-row { font: 400 15px/1.5 "Comic Neue", cursive; letter-spacing: 0; text-transform: none; color: #ffff00; }
[data-lens="anti"] .footer-claim, [data-lens="anti"] .footer-top { color: #00ff00; text-decoration: underline; }
[data-lens="anti"] .footer-legal { font: 400 14px "Times New Roman", serif; letter-spacing: 0; text-transform: none; color: #0000ff; background: #fff; padding: 4px 8px; width: max-content; max-width: 100%; }
[data-lens="anti"] .lens-fab { border-radius: 0; background: #ffff00; color: #ff0000; border: 4px dashed #ff0000; box-shadow: 6px 6px 0 #0000ff; font-family: "Comic Neue", cursive; animation: ddBlink 1.1s steps(1) infinite; }
[data-lens="anti"] .lens-fab::before { display: none; }
[data-lens="anti"] .lens-fab:hover { animation: none; transform: rotate(-5deg); }
[data-lens="anti"] .lens-fab-label { font-weight: 700; font-size: 16px; letter-spacing: 0; }
[data-lens="anti"] .lens-panel { border-radius: 0; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 10px 10px 0 rgba(0,0,0,.5); font-family: Tahoma, Verdana, "Comic Neue", sans-serif; }
[data-lens="anti"] .lens-panel-head { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; border: 0; margin: 2px; padding: 8px 46px 8px 12px; }
[data-lens="anti"] .lens-panel-title { font: 700 14px Tahoma, Verdana, sans-serif; letter-spacing: 0; }
[data-lens="anti"] .lens-panel-sub { font: 400 12px Tahoma, Verdana, sans-serif; color: #fff; }
[data-lens="anti"] .lens-close { border-radius: 0; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; top: 8px; right: 8px; }
[data-lens="anti"] .lens-list li { border-color: #808080; }
[data-lens="anti"] .lens-opt:hover, [data-lens="anti"] .lens-opt:focus-visible { background: #000080; color: #fff; }
[data-lens="anti"] .lo-text b { font: 700 14px "Times New Roman", serif; letter-spacing: 0; }
[data-lens="anti"] .lo-text small { font: 400 12px "Comic Neue", cursive; }
[data-lens="anti"] .lens-opt kbd { border-radius: 0; border: 2px outset #fff; background: #c0c0c0; }
[data-lens="anti"] .lens-panel-foot { border-top: 2px groove #fff; }
[data-lens="anti"] .sound-toggle { border-radius: 0; background: #c0c0c0; color: #000; border: 2px outset #fff; font: 700 13px "Comic Neue", cursive; letter-spacing: 0; }
[data-lens="anti"] .toast { border-radius: 0; background: #ffff00; color: #ff0000; border: 3px dashed #ff0000; font: 700 15px "Comic Neue", cursive; letter-spacing: 0; }
[data-lens="anti"] .lens-hint { background: #00ff00; color: #000; border: 3px dashed #ff0000; box-shadow: 4px 4px 0 #0000ff; font: 700 15px "Comic Neue", cursive; border-radius: 0; }
[data-lens="anti"] .lens-hint::after { background: #00ff00; border-color: #ff0000; }
.lo-anti { background: linear-gradient(135deg, #ff0000 0 25%, #ffff00 25% 50%, #00ff00 50% 75%, #0000ff 75%); border-color: #ff00ff; border-style: dashed; }
.vl-dd { inset: 0; background: #fff; background-image: repeating-linear-gradient(45deg, rgba(255,0,0,.06) 0 20px, rgba(0,0,255,.06) 20px 40px); }
.vl-win { position: absolute; width: min(380px, 84vw); background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 8px 8px 0 rgba(0,0,0,.4); font: 400 14px/1.4 Tahoma, Verdana, "Comic Neue", sans-serif; }
@media (max-width: 760px) {
  .dd-junk .j4, .dd-junk .j5 { font-size: 46px; }
  .dd-sticker { width: 84px; height: 84px; font-size: 13px; top: calc(var(--header-h) + 50px); }
  .dd-mq { font-size: 16px; height: 28px; line-height: 28px; }
  [data-lens="anti"] .site-nav { transform: none; opacity: 1; }
  [data-lens="anti"] .section-title { transform: none; width: auto; }
  [data-lens="anti"] .service-title { transform: none; }
  [data-lens="anti"] .lens-fab { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.dd-shake main, .dd-mq span, .dd-sticker, [data-lens="anti"] .lens-fab, [data-lens="anti"] .hero-badge, .dd-skull, [data-lens="anti"] .section-title::after, .cl-ltr, .tr-chart { animation: none !important; }
}

/* ==========================================================================
   MOBILE PERFORMANCE — the expensive layers are dropped on small screens
   ========================================================================== */
@media (max-width: 760px) {
  [data-lens="aero"] .section > .wrap, [data-lens="aero"] .hero-copy, [data-lens="aero"] .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  [data-lens="aero"] .section > .wrap { background: rgba(255,255,255,.74), repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 4px); }
  .gr-dots, .gr-film { display: none; }
  .gr-bg::before { background: url(../img/ads.jpg) left 4% top 4% / 120vw auto no-repeat; opacity: .35; }
  .cc-scan::after, .cc-floor::before { animation: none; }
  .cc-floor { opacity: .3; }
  [data-lens="cybercore"] .section > .wrap::before { display: none; }
  .tr-smoke { display: none; }
}