@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --space-charcoal: #11131A;
  --space-charcoal-rgb: 17, 19, 26;
  --mars-red: #FF3B3B;
  --mars-red-glow: rgba(255, 59, 59, 0.4);
  --on-mars-red: #F5F6F8;
  --lunar-white: #F0F2F5;
  --lunar-white-rgb: 240, 242, 245;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --glass-bg: rgba(240, 242, 245, 0.03);
  --glass-border: rgba(240, 242, 245, 0.08);
  --glass-specular: rgba(255, 255, 255, 0.12);
  --max-reading-width: 75ch;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

:root[data-theme="light"] {
  --space-charcoal: #F6F6F8;
  --space-charcoal-rgb: 246, 246, 248;
  --lunar-white: #14161C;
  --lunar-white-rgb: 20, 22, 28;
  --glass-bg: rgba(20, 22, 28, 0.03);
  --glass-border: rgba(20, 22, 28, 0.08);
  --glass-specular: rgba(255, 255, 255, 0.8);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: var(--space-charcoal);
  color: var(--lunar-white);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

main, footer, nav, section {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  body, a, button { cursor: none !important; }
}

.custom-cursor {
  width: 12px; height: 12px;
  background: var(--mars-red);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s, border 0.2s;
}
.custom-cursor.active {
  width: 50px; height: 50px;
  background: rgba(255, 59, 59, 0.1);
  border: 1px solid var(--mars-red);
}

.film-grain {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none; z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}


.preloader {
  position: fixed; inset: 0;
  background-color: var(--space-charcoal);
  display: flex; justify-content: center; align-items: center;
  z-index: 10000; font-family: var(--font-display);
  font-size: 2rem; letter-spacing: 0.1em; color: var(--mars-red);
}

h1, h2, h3, .display-font { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 700; }
p { max-width: var(--max-reading-width); margin-bottom: 1rem; font-size: 1.1rem; color: rgba(var(--lunar-white-rgb), 0.85); }
a { color: var(--lunar-white); text-decoration: none; }

.container { width: 90%; max-width: 1280px; margin: 0 auto; }
section { padding: 5rem 0; position: relative; }
.page-header { padding-top: 10rem; padding-bottom: 3rem; }

nav {
  position: fixed; top: 2rem; left: 50%; transform: translateX(-50%);
  width: 90%; max-width: 1280px; display: flex; justify-content: space-between; align-items: center;
  z-index: 1000; padding: 1rem 2rem; background: var(--glass-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-top: 1px solid var(--glass-specular);
  border-radius: 100px;
}

.logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.logo-icon { 
  width: 10px; height: 10px; background: var(--mars-red); border-radius: 50%; 
  box-shadow: 0 0 15px var(--mars-red-glow); 
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.logo-icon.dynamic-white {
  background: var(--lunar-white) !important;
  box-shadow: 0 0 15px rgba(var(--lunar-white-rgb), 0.6) !important;
}

.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--mars-red); }

.btn-primary {
  background: var(--mars-red); color: var(--on-mars-red); padding: 0.65rem 1.5rem;
  border-radius: 100px; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; border: none; outline: none;
  display: inline-flex; justify-content: center; align-items: center;
  box-shadow: 0 0 20px rgba(255, 59, 59, 0.2); transition: box-shadow 0.3s ease;
}
.btn-primary:hover { box-shadow: 0 0 30px rgba(255, 59, 59, 0.4); }

.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; padding-top: 8rem; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; text-transform: uppercase; margin-bottom: 1.5rem; }
.span-red, .tagline, .glass-card i, [style*="color: var(--mars-red)"] { transition: color 0.4s ease, text-shadow 0.4s ease; }
.span-red { color: var(--mars-red); }
.dynamic-white {
  color: var(--lunar-white) !important;
  text-shadow: 0 0 12px rgba(var(--lunar-white-rgb), 0.5) !important;
}
:root[data-theme="light"] .dynamic-white { text-shadow: none !important; }
.hero .tagline { font-size: 1.25rem; color: var(--mars-red); font-family: var(--font-display); margin-bottom: 2rem; letter-spacing: 0.05em; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 3rem; }
.glass-card {
  background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px; padding: 2.5rem 2rem; position: relative; overflow: hidden;
  transform-style: preserve-3d;
}
.glass-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle 400px at var(--mouse-x) var(--mouse-y), rgba(255, 59, 59, 0.08), transparent 80%);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.glass-card:hover::before { opacity: 1; }
.glass-card:hover { border-color: rgba(255, 59, 59, 0.2); }
.glass-card h3 { font-size: 1.3rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.8rem; transform: translateZ(20px); }
.glass-card p { transform: translateZ(10px); }
.glass-card ul { transform: translateZ(10px); }
.glass-card i { color: var(--mars-red); font-size: 1.8rem; }

.back-link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(var(--lunar-white-rgb), 0.65); transition: color 0.3s ease;
}
.back-link:hover { color: var(--mars-red); }

/* Work showcase (Custom Systems) */
.work-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.work-filter {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.55rem 1.15rem; border-radius: 100px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: rgba(var(--lunar-white-rgb), 0.75); cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.work-filter:hover { color: var(--lunar-white); border-color: var(--mars-red); }
.work-filter.active { background: var(--mars-red); border-color: var(--mars-red); color: var(--on-mars-red); }
.work-filters-sub { margin-top: -1rem; }
.work-filters-sub .work-filter { font-size: 0.7rem; padding: 0.45rem 0.95rem; }
.work-grid { margin-top: 0; }
.work-card { display: flex; flex-direction: column; }
.work-empty { color: rgba(var(--lunar-white-rgb), 0.55); padding: 1rem 0; }
.is-hidden { display: none !important; }
.work-card h3 { font-size: 1.2rem; }
.work-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1.2rem; }
.work-tag, .work-badge {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.2rem 0.65rem; border-radius: 100px; border: 1px solid var(--glass-border);
  color: rgba(var(--lunar-white-rgb), 0.7);
}
.work-badge { margin-left: auto; border-color: rgba(255, 59, 59, 0.4); color: var(--mars-red); }
.work-more {
  margin-top: auto; padding-top: 1.2rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--mars-red); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.work-more i { font-size: 1rem; transition: transform 0.3s ease; }
.work-more:hover i { transform: translateX(4px); }

/* Dual-Canvas Background Injection */
.ambient-glow {
  position: absolute; top: -20%; left: -10%;
  width: 70vw; height: 70vw;
  background: radial-gradient(circle, rgba(255, 59, 59, 0.08) 0%, transparent 60%);
  pointer-events: none; z-index: 0; border-radius: 50%;
}
.canvas-container {
  position: fixed; inset: 0;
  z-index: -999;
  background-color: var(--space-charcoal);
  pointer-events: none;
}
.canvas-container canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
#shader-canvas { z-index: 1; }
#thermo-canvas { z-index: 2; pointer-events: none; }
footer { border-top: 1px solid var(--glass-border); padding: 3rem 0; margin-top: 4rem; text-align: center; font-size: 0.9rem; color: rgba(var(--lunar-white-rgb), 0.5); }

.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer-inner p { margin: 0; }

.theme-toggle-group { display: inline-flex; align-items: center; gap: 0.75rem; }
.theme-toggle-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
  color: rgba(var(--lunar-white-rgb), 0.6); white-space: nowrap;
}

footer { border-top: 1px solid var(--glass-border); padding: 4rem 0 2rem; margin-top: 4rem; font-size: 0.9rem; color: rgba(var(--lunar-white-rgb), 0.5); }
.footer-top { display: grid; grid-template-columns: 1.3fr 2fr; gap: 3rem; padding-bottom: 3rem; }
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-brand img { height: 52px; width: auto; object-fit: contain; margin-bottom: 1.2rem; }
.footer-brand p { font-size: 0.95rem; max-width: 340px; color: rgba(var(--lunar-white-rgb), 0.6); margin-bottom: 1.5rem; line-height: 1.7; }
.footer-socials { display: flex; gap: 0.9rem; justify-content: center; }
.footer-socials a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--glass-border); color: var(--lunar-white); transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.footer-socials a:hover { color: var(--mars-red); border-color: var(--mars-red); background: rgba(255, 59, 59, 0.06); box-shadow: 0 0 18px rgba(255, 59, 59, 0.18); }
.footer-socials i { font-size: 1.3rem; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-col h4 { font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lunar-white); margin-bottom: 1.2rem; }
.footer-col a { display: block; font-size: 0.9rem; color: rgba(var(--lunar-white-rgb), 0.6); margin-bottom: 0.75rem; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--mars-red); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--glass-border); }
.footer-bottom p { margin: 0; font-size: 0.85rem; max-width: none; }
.footer-bottom-links { display: flex; gap: 1.5rem; flex-shrink: 0; }
.footer-bottom-links a { font-size: 0.85rem; color: rgba(var(--lunar-white-rgb), 0.5); transition: color 0.3s ease; }
.footer-bottom-links a:hover { color: var(--mars-red); }
.legal-content { max-width: 820px; }
.legal-content h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }
.legal-content p, .legal-content li { color: rgba(var(--lunar-white-rgb), 0.8); line-height: 1.8; }
.legal-content ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-content a { color: var(--mars-red); }
@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

.theme-toggle { display: inline-flex; align-items: center; }

/* OpenAI chatbot redesign — cinematic homepage */
.home-main { overflow: clip; }
.hero-cinematic { min-height: 100svh; isolation: isolate; overflow: hidden; padding: 0; }
.hero-content { pointer-events: none; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; z-index: 2; padding-top: 8rem; padding-bottom: 6rem; }
.hero-visual { position: absolute; z-index: -2; inset: 0; overflow: hidden; perspective: 1200px; }
.hero-visual::after { content: ""; pointer-events: none; position: absolute; inset: 0; background: radial-gradient(circle at 76% 48%, rgba(255,59,59,.12), transparent 28%), linear-gradient(90deg, var(--space-charcoal) 3%, rgba(var(--space-charcoal-rgb),.72) 42%, transparent 80%); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.pillar-globe { position: absolute; z-index: 1; right: 6vw; top: 50%; width: clamp(320px, 38vw, 580px); aspect-ratio: 1; transform: translateY(-50%); cursor: grab; touch-action: pan-y; will-change: transform; }
.pillar-globe:active { cursor: grabbing; }
.hero-kicker, .eyebrow { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--lunar-white-rgb), .65); }
.hero-kicker span { width: 34px; height: 1px; background: var(--mars-red); box-shadow: 0 0 10px var(--mars-red); }
.hero-cinematic h1 { max-width: 920px; margin: 1.5rem 0 1.4rem; font-size: clamp(2.8rem, 6vw, 6.2rem); line-height: 1; letter-spacing: -.055em; text-transform: none; }
.hero-cinematic h1 > span { display: block; }
.hero-content > * { pointer-events: auto; }
.hero-summary { max-width: 540px; font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.55; color: rgba(var(--lunar-white-rgb), .7); }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.hero-actions .btn-primary { gap: .6rem; padding: .9rem 1.5rem; }
.text-link { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: .8rem .2rem; }
.text-link i, .panel-link i { transition: transform .3s ease; }
.text-link:hover i, .service-panel:hover .panel-link i { transform: translate(4px, -4px); }
.hero-proof { display: flex; gap: 2rem; margin-top: 4rem; color: rgba(var(--lunar-white-rgb), .56); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.hero-proof span { display: flex; align-items: center; gap: .5rem; }
.hero-proof b { color: var(--mars-red); font-family: var(--font-display); }
.scroll-cue { position: absolute; right: 3vw; bottom: 2rem; z-index: 3; display: flex; align-items: center; gap: .65rem; color: rgba(var(--lunar-white-rgb), .48); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue i { color: var(--mars-red); animation: cueBounce 1.8s ease-in-out infinite; }

.system-story { min-height: 180vh; position: relative; padding: 14rem 0; }
.story-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(4rem, 10vw, 10rem); align-items: start; }
.story-sticky { position: sticky; top: 28vh; }
.story-sticky h2, .section-heading h2, .final-cta h2 { font-size: clamp(2.8rem, 5.6vw, 6rem); line-height: .95; letter-spacing: -.05em; margin: 1.2rem 0; }
.story-sticky h2 { font-size: clamp(2.1rem, 4.4vw, 5rem); }
.story-sticky h2 .nowrap { white-space: nowrap; }
.story-sticky > p:last-child { max-width: 420px; color: rgba(var(--lunar-white-rgb), .62); }
.eyebrow { color: var(--mars-red); }
.story-steps { padding-top: 20vh; display: grid; gap: 12rem; }
.story-step { position: relative; min-height: 280px; padding: 3rem; display: flex; align-items: flex-start; gap: 2rem; border-top: 1px solid var(--glass-border); transition: transform .5s ease, border-color .5s ease; }
.story-step::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--mars-red); box-shadow: 0 0 12px var(--mars-red); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.story-step.active::before { transform: scaleX(1); }
.story-step.active > i { background: rgba(255,59,59,.12); border-color: var(--mars-red); box-shadow: 0 0 28px rgba(255,59,59,.35); }
.story-step p { color: rgba(var(--lunar-white-rgb), .82); }
.story-step::after { content: attr(data-step); position: absolute; top: 2.8rem; right: 0; font: 700 4rem/1 var(--font-display); color: rgba(var(--lunar-white-rgb), .16); }
.story-step.active { transform: translateX(-1rem); }
.story-step > i { flex: 0 0 auto; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(255,59,59,.28); border-radius: 50%; color: var(--mars-red); font-size: 1.55rem; box-shadow: inset 0 0 30px rgba(255,59,59,.08); transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; }
.story-step h3 { font-size: clamp(1.8rem, 3vw, 3rem); margin-bottom: .75rem; }
.story-step p { max-width: 430px; }

.services-stage { padding-top: 8rem; padding-bottom: 10rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 4rem; }
.section-heading h2 { margin: 0; }
.services-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; perspective: 1600px; }
.service-panel { min-height: 480px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; color: inherit; text-decoration: none; border-radius: 4px; transform-origin: center bottom; }
.service-panel:nth-child(2) { transform: translateY(3rem); }
.service-panel > i { font-size: 4.5rem; color: rgba(var(--lunar-white-rgb), .14); align-self: flex-end; transition: color .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.service-panel:hover > i { color: var(--mars-red); transform: rotate(-8deg) scale(1.08); }
.service-index { font: 600 .7rem/1 var(--font-display); letter-spacing: .12em; color: var(--mars-red); }
.service-panel h3 { font-size: clamp(1.5rem, 2.2vw, 2.35rem); letter-spacing: -.03em; margin-bottom: .9rem; }
.service-panel p { max-width: 320px; }
.panel-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: var(--mars-red); font: 600 .72rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em; }

.signal-band { overflow: hidden; border-block: 1px solid var(--glass-border); padding: 1.5rem 0; transform: rotate(-1.2deg) scale(1.02); background: rgba(255,59,59,.035); }
.signal-track { display: flex; align-items: center; gap: 2rem; width: max-content; animation: signalMove 24s linear infinite; }
.signal-track span { font: 600 clamp(1.3rem, 2vw, 2rem)/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.signal-track i { width: 8px; height: 8px; background: var(--mars-red); border-radius: 50%; box-shadow: 0 0 16px var(--mars-red); }
.final-cta { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; isolation: isolate; }
.final-cta h2 { max-width: 900px; }
.final-cta .btn-primary { margin-top: 1.6rem; gap: .6rem; }
.cta-glow { position: absolute; z-index: -1; width: 48vw; height: 48vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,59,59,.13), transparent 66%); filter: blur(20px); }

@keyframes cueBounce { 50% { transform: translateY(6px); } }
@keyframes signalMove { to { transform: translateX(-50%); } }

/* Shared experience language across every public page */
nav { transition: width .45s cubic-bezier(.2,.8,.2,1), top .45s ease, background .35s ease, box-shadow .35s ease; }
nav.is-scrolled { top: .8rem; width: min(94%, 1120px); background: rgba(12,12,13,.78); box-shadow: 0 18px 60px rgba(0,0,0,.28); }
:root[data-theme="light"] nav.is-scrolled { background: rgba(var(--space-charcoal-rgb),.82); box-shadow: 0 18px 60px rgba(20,22,28,.1); }
.page-header { position: relative; perspective: 1200px; }
.page-header > h1, .page-header > .tagline, .page-header > .back-link { transform-origin: left center; }
.page-header section { position: relative; }
.page-header section::before { content: ""; position: absolute; left: 0; top: 0; width: 42px; height: 1px; background: linear-gradient(90deg, var(--mars-red), transparent); opacity: .7; }
.page-header .glass-card, .page-header form, .page-header table, .page-header .project-group { transition: border-color .35s ease, box-shadow .35s ease, background .35s ease; }
.page-header .glass-card:hover { box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.nav-links > a:not(.btn-primary), .footer-col a, .footer-bottom-links a { position: relative; }
.nav-links > a:not(.btn-primary)::after, .footer-col a::after, .footer-bottom-links a::after { content: ""; position: absolute; left: 0; bottom: -.3rem; width: 100%; height: 1px; background: var(--mars-red); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nav-links > a:hover::after, .footer-col a:hover::after, .footer-bottom-links a:hover::after { transform: scaleX(1); transform-origin: left; }
footer { position: relative; overflow: hidden; }
footer::before { content: ""; position: absolute; width: 420px; height: 420px; left: 50%; top: 0; translate: -50% -70%; background: radial-gradient(circle, rgba(255,59,59,.1), transparent 65%); pointer-events: none; }

@media (max-width: 900px) {
  .pillar-globe { right: -18vw; width: min(80vw, 520px); opacity: .45; pointer-events: none; }
  .hero-visual::after { background: linear-gradient(90deg, rgba(var(--space-charcoal-rgb),.94), rgba(var(--space-charcoal-rgb),.42)), linear-gradient(0deg, var(--space-charcoal), transparent 55%); }
  .story-grid { grid-template-columns: 1fr; }
  .story-sticky { position: relative; top: 0; }
  .story-steps { padding-top: 2rem; gap: 4rem; }
  .system-story { min-height: auto; padding: 8rem 0; }
  .services-deck { grid-template-columns: 1fr; }
  .service-panel, .service-panel:nth-child(2) { min-height: 340px; transform: none; }
}

@media (max-width: 600px) {
  .hero-content { padding-top: 7rem; }
  .hero-cinematic h1 { font-size: clamp(2.6rem, 12vw, 3.8rem); line-height: 1; }
  .hero-summary { max-width: 90%; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .hero-proof { gap: .7rem; flex-wrap: wrap; margin-top: 2.5rem; }
  .hero-proof span { width: 46%; }
  .scroll-cue { display: none; }
  /* Hero: globe drops below the copy instead of sitting behind it */
  .hero-cinematic { display: flex; flex-direction: column; min-height: auto; }
  .hero-content { min-height: auto; padding-bottom: 1rem; }
  .hero-visual { position: relative; inset: auto; order: 2; height: min(96vw, 420px); overflow: visible; }
  .hero-visual::after { display: none; }
  .pillar-globe { top: 0; right: auto; left: 50%; width: min(96vw, 420px); transform: translateX(-50%); opacity: 1; }
  /* Story: tighter rhythm, no sideways shift */
  .system-story { padding: 5rem 0; }
  .story-steps { gap: 0; padding-top: 1rem; }
  .story-step { padding: 1.75rem 0; gap: 1.1rem; min-height: 0; }
  .story-step.active { transform: none; }
  .story-step::after { top: 1.6rem; font-size: 2.6rem; }
  .story-step > i { width: 50px; height: 50px; }
  .story-step h3 { margin-bottom: .4rem; }
  /* Capabilities */
  .section-heading { flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 2rem; }
  .services-stage { padding-top: 3rem; }
  .service-panel, .service-panel:nth-child(2) { min-height: 0; gap: 2rem; padding: 1.75rem; }
  .service-panel > i { font-size: 3rem; position: absolute; top: 1.5rem; right: 1.5rem; }
  .service-panel { position: relative; }
  .final-cta { min-height: 0; padding: 6rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-track, .scroll-cue i { animation: none !important; }
}
.theme-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-toggle-track {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  width: 52px; height: 28px; padding: 0 6px; border-radius: 100px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.theme-toggle-track i { font-size: 0.85rem; color: rgba(var(--lunar-white-rgb), 0.5); position: relative; z-index: 1; }
.theme-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mars-red); box-shadow: 0 0 10px var(--mars-red-glow);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.theme-toggle input:checked ~ .theme-toggle-track .theme-toggle-thumb { transform: translateX(24px); }
.theme-toggle input:focus-visible ~ .theme-toggle-track { outline: 2px solid var(--mars-red); outline-offset: 2px; }

:root[data-theme="light"] .glass-card {
  background: rgba(20, 22, 28, 0.025);
  border: 1px solid rgba(20, 22, 28, 0.08);
  border-top: 1px solid rgba(20, 22, 28, 0.14);
  box-shadow: 0 4px 24px rgba(20, 22, 28, 0.05);
}
:root[data-theme="light"] .glass-card:hover { border-color: rgba(255, 59, 59, 0.3); }

.char { display: inline-block; }
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }

.hamburger-btn {
  display: none; flex-direction: column; justify-content: space-between;
  width: 24px; height: 18px; cursor: pointer; z-index: 1001;
}
.hamburger-btn span {
  display: block; width: 100%; height: 2px;
  background-color: var(--lunar-white);
  transition: all 0.3s ease; transform-origin: left;
}
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg); }

/* =================================================================
   Product pages (e.g. /inventory-management): dark-UI mockups ("screenshots")
   All rules scoped under .ff- so no other page is affected.
   Swappable: each mockup lives in a <figure class="ff-shot"> slot
   that a real screenshot <img> can drop into without layout change.
   Per-product colour: set --ff-accent (and optionally --ff-accent-2 and
   --ff-on-accent) on the page's <main>; every tint below derives from it.
   ================================================================= */
:root {
  --ff-accent: #6366F1;            /* electric indigo - app primary action/active nav */
  --ff-accent-2: #a855f7;          /* gradient partner for the app logo mark */
  --ff-on-accent: #fff;            /* text on accent-filled buttons */
  --ff-ok: #34D399;                /* healthy / positive */
  --ff-warn: #FBBF24;              /* warning / low */
  --ff-bad: #F87171;               /* critical / shortage */
  --ff-surface: #0B0D13;           /* near-black slate */
  --ff-surface-2: #11141D;
  --ff-surface-3: #161A25;
  --ff-line: rgba(255, 255, 255, 0.08);
  --ff-text: #E7EAF3;
  --ff-muted: rgba(231, 234, 243, 0.55);
  --ff-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  /* Finer-grained surfaces; defaults keep the original dark dashboard look */
  --ff-side: var(--ff-surface-2);           /* sidebar */
  --ff-topbar: var(--ff-surface-2);         /* browser chrome bar */
  --ff-panel: var(--ff-surface-2);          /* KPI cards, search, tablet cards */
  --ff-nav-text: rgba(231, 234, 243, 0.78);
  --ff-active-text: #fff;                   /* active nav item / tab label */
  --ff-row-line: rgba(255, 255, 255, 0.05);
  --ff-sub-bg: rgba(255, 255, 255, 0.02);
  --ff-sub-text: rgba(231, 234, 243, 0.8);
  --ff-pill-mut: rgba(255, 255, 255, 0.06);
  --ff-acc-muted: #3a3f4d;
  --ff-scan-line: rgba(255, 255, 255, 0.16);
  --ff-tablet-bg: #05060a;
  --ff-tablet-frame: #1b1e27;
  --ff-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
/* Light dashboard theme: add class="ff-theme-light" next to ims-page; fine-tune any token inline. */
.ff-theme-light {
  --ff-ok: #16A34A; --ff-warn: #D97706; --ff-bad: #DC2626;
  --ff-surface: #FFFFFF; --ff-surface-2: #F9FAFB; --ff-surface-3: #F3F4F6;
  --ff-side: #FFFFFF; --ff-topbar: #F3F4F6; --ff-panel: #FFFFFF;
  --ff-line: rgba(17, 24, 39, 0.10); --ff-text: #111827; --ff-muted: rgba(17, 24, 39, 0.55);
  --ff-nav-text: #4B5563; --ff-active-text: var(--ff-accent); --ff-tab-text: var(--ff-accent);
  --ff-row-line: rgba(17, 24, 39, 0.06); --ff-sub-bg: #F9FAFB; --ff-sub-text: #374151;
  --ff-pill-mut: rgba(17, 24, 39, 0.06); --ff-acc-muted: #D1D5DB; --ff-scan-line: rgba(17, 24, 39, 0.2);
  --ff-tablet-bg: #FFFFFF; --ff-tablet-frame: #E5E7EB; --ff-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

/* trust strip under hero */
.ff-stats { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: center; align-items: center; margin-top: 2.5rem; }
.ff-stats .ff-stat { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.95rem; color: rgba(var(--lunar-white-rgb), 0.55); }
.ff-stats .ff-stat b { font-family: var(--font-display); color: var(--lunar-white); font-size: 1.15rem; }
.ff-stats .ff-sep { width: 1px; height: 18px; background: var(--glass-border); }

/* figure slot + caption */
.ff-shot { margin: 0; }
.ff-shot figcaption { margin-top: 0.9rem; font-size: 0.85rem; color: rgba(var(--lunar-white-rgb), 0.55); text-align: center; }
.ff-shot figcaption b { color: var(--lunar-white); font-weight: 600; }

/* browser/window frame so dark UI reads as a screenshot */
.ff-window {
  background: var(--ff-surface); border: 1px solid var(--ff-line);
  border-radius: 16px; overflow: hidden; box-shadow: var(--ff-shadow);
  color: var(--ff-text);
}
.ff-topbar { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 1rem; background: var(--ff-topbar); border-bottom: 1px solid var(--ff-line); }
.ff-dots { display: flex; gap: 0.4rem; }
.ff-dots span { width: 11px; height: 11px; border-radius: 50%; }
.ff-dots span:nth-child(1){ background:#ff5f57; } .ff-dots span:nth-child(2){ background:#febc2e; } .ff-dots span:nth-child(3){ background:#28c840; }
.ff-url { flex: 1; max-width: 360px; margin: 0 auto; font-family: var(--ff-mono); font-size: 0.72rem; color: var(--ff-muted); background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: 7px; padding: 0.25rem 0.7rem; text-align: center; }

/* app shell: sidebar + content */
.ff-app { display: grid; grid-template-columns: 188px 1fr; min-height: 360px; }
.ff-side { color: var(--ff-side-text, inherit); background: var(--ff-side); border-right: 1px solid var(--ff-line); padding: 1rem 0.75rem; }
.ff-brand { display: flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.5rem 1rem; }
.ff-shot, .ff-tablet { --ff-accent-soft: color-mix(in srgb, var(--ff-accent) 16%, transparent); --ff-accent-line: color-mix(in srgb, var(--ff-accent) 35%, transparent); }
.ff-brand .ff-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--ff-accent), var(--ff-accent-2)); box-shadow: 0 0 14px var(--ff-accent-soft); }
.ff-brand b { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: -0.01em; }
.ff-navgroup { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ff-side-muted, var(--ff-muted)); padding: 0.9rem 0.6rem 0.35rem; }
.ff-nav { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.6rem; border-radius: 8px; font-size: 0.78rem; color: var(--ff-nav-text); }
.ff-nav i { font-size: 1rem; opacity: 0.8; }
.ff-nav.is-active { background: var(--ff-active-bg, var(--ff-accent-soft)); color: var(--ff-active-text); box-shadow: inset 2px 0 0 var(--ff-accent); }

.ff-main { padding: 1.1rem 1.25rem; min-width: 0; }
.ff-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ff-head h4 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; }
.ff-search { font-family: var(--ff-mono); font-size: 0.7rem; color: var(--ff-muted); background: var(--ff-panel); border: 1px solid var(--ff-line); border-radius: 7px; padding: 0.3rem 0.7rem; min-width: 150px; }

/* KPI cards */
.ff-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-bottom: 1.1rem; }
.ff-kpi { background: var(--ff-panel); border: 1px solid var(--ff-line); border-radius: 12px; padding: 0.75rem 0.85rem; }
.ff-kpi .ff-k-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ff-muted); }
.ff-kpi .ff-k-val { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; margin-top: 0.2rem; }
.ff-kpi .ff-k-sub { font-size: 0.66rem; margin-top: 0.15rem; }

/* tabs */
.ff-tabs { display: flex; gap: 1.1rem; border-bottom: 1px solid var(--ff-line); margin-bottom: 0.85rem; }
.ff-tabs span { font-size: 0.72rem; color: var(--ff-muted); padding-bottom: 0.5rem; }
.ff-tabs span.is-active { color: var(--ff-tab-text, var(--ff-active-text)); box-shadow: inset 0 -2px 0 var(--ff-accent); }

/* tables */
.ff-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.ff-table th { text-align: left; font-weight: 500; color: var(--ff-muted); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--ff-line); }
.ff-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--ff-row-line); }
.ff-table tbody tr:last-child td { border-bottom: none; }
.ff-table .ff-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--ff-mono); }
.ff-mono { font-family: var(--ff-mono); letter-spacing: -0.02em; }
.ff-sub-row td { background: var(--ff-sub-bg); font-size: 0.7rem; color: var(--ff-muted); }
.ff-sub-row .ff-mono { color: var(--ff-sub-text); }

/* row accent by status (left border) */
.ff-acc-amber td:first-child { box-shadow: inset 3px 0 0 var(--ff-warn); }
.ff-acc-green td:first-child { box-shadow: inset 3px 0 0 var(--ff-ok); }
.ff-acc-red   td:first-child { box-shadow: inset 3px 0 0 var(--ff-bad); }
.ff-acc-muted td:first-child { box-shadow: inset 3px 0 0 var(--ff-acc-muted); }

/* status pills + value colours */
.ff-pill { display: inline-block; font-size: 0.64rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 100px; letter-spacing: 0.02em; }
.ff-pill.ok   { background: color-mix(in srgb, var(--ff-ok) 14%, transparent); color: var(--ff-ok); }
.ff-pill.warn { background: color-mix(in srgb, var(--ff-warn) 14%, transparent); color: var(--ff-warn); }
.ff-pill.bad  { background: color-mix(in srgb, var(--ff-bad) 14%, transparent); color: var(--ff-bad); }
.ff-pill.mut  { background: var(--ff-pill-mut); color: var(--ff-muted); }
.ff-pos { color: var(--ff-ok); } .ff-neg { color: var(--ff-bad); }
.ff-chipline { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.85rem; }
.ff-chip-sel { font-size: 0.68rem; font-family: var(--ff-mono); color: var(--ff-text); background: var(--ff-accent-soft); border: 1px solid var(--ff-accent-line); border-radius: 100px; padding: 0.2rem 0.7rem; }

/* primary button inside mockups */
.ff-btn { display: inline-block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.45rem 1rem; border-radius: 8px; }
.ff-btn.acc { background: var(--ff-accent); color: var(--ff-on-accent); }
.ff-btn.go  { background: var(--ff-ok); color: #04130d; }

/* tablet frame for shop floor */
.ff-tablet { max-width: 360px; margin: 0 auto; background: var(--ff-tablet-bg); border: 10px solid var(--ff-tablet-frame); border-radius: 28px; box-shadow: var(--ff-shadow); overflow: hidden; }
.ff-tablet .ff-t-body { padding: 1rem; color: var(--ff-text); }
.ff-t-card { background: var(--ff-panel); border: 1px solid var(--ff-line); border-radius: 12px; padding: 0.85rem; margin-top: 0.7rem; }
.ff-t-scan { display: flex; align-items: center; gap: 0.5rem; font-family: var(--ff-mono); font-size: 0.72rem; color: var(--ff-muted); background: var(--ff-surface); border: 1px dashed var(--ff-scan-line); border-radius: 8px; padding: 0.55rem 0.7rem; }
.ff-kit { display: flex; align-items: center; justify-content: space-between; font-size: 0.76rem; padding: 0.4rem 0; border-bottom: 1px solid var(--ff-row-line); }
.ff-kit:last-child { border-bottom: none; }
.ff-kit .ph-check-circle { color: var(--ff-ok); } .ff-kit .ph-circle { color: var(--ff-muted); }

/* gallery layout */
.ff-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; }
.ff-pillar-label { display: inline-block; font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mars-red); margin-bottom: 0.4rem; }
.ff-audience { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.ff-audience .ff-aud { flex: 1 1 220px; }

@media (max-width: 860px) {
  .ff-gallery { grid-template-columns: 1fr; }
  .ff-app { grid-template-columns: 1fr; }
  .ff-side { display: none; }
  .ff-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .ff-url { display: none; }
  /* Wide mockup tables scroll sideways on phones instead of being clipped */
  .ff-main { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ff-table { min-width: 520px; }
}

/* =================================================================
   Home - "AI Century" promo: iPhone mockup with video
   ================================================================= */
.ai-century { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.ai-century .ai-copy h2 { font-size: 2.5rem; margin-bottom: 1.25rem; }
.ai-century .ai-points { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.ai-century .ai-points li { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.9rem; color: rgba(240,242,245,0.85); font-size: 1.05rem; }
.ai-century .ai-points i { color: var(--mars-red); font-size: 1.25rem; margin-top: 0.15rem; flex-shrink: 0; }
.ai-phone-wrap { display: flex; justify-content: center; }

.iphone-mock {
  position: relative;
  width: clamp(250px, 78vw, 300px);
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #20232c, #0b0d13);
  border-radius: 46px;
  padding: 11px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.05), 0 40px 80px rgba(0,0,0,0.6), inset 0 0 2px rgba(255,255,255,0.18);
  /* Not fully opaque, so Chrome won't skip drawing the animated background
     behind the phone; on some Windows GPUs that skipped tile lags behind
     during smooth scroll and shows as a dark 256px box. */
  opacity: 0.999;
}
.iphone-mock::before,  /* volume buttons */
.iphone-mock::after {  /* power button */
  content: ""; position: absolute; background: #1b1e27; border-radius: 2px;
}
.iphone-mock::before { left: -3px; top: 110px; width: 3px; height: 78px; box-shadow: 0 -34px 0 #1b1e27; }
.iphone-mock::after  { right: -3px; top: 130px; width: 3px; height: 64px; }
.iphone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 36px; overflow: hidden; background: #000;
}
.iphone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.iphone-island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 32%; height: 26px; background: #04050a; border-radius: 100px; z-index: 3;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.8);
}
.iphone-glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 36px;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 35%);
}

@media (max-width: 860px) {
  .ai-century { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .ai-century .ai-points { display: inline-block; text-align: left; }
}

.nav-links a { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-links a i { font-size: 0.95rem; transition: transform 0.3s ease; }
.nav-links a:hover i { transform: scale(1.12); }

@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; justify-content: space-between; align-items: center; border-radius: 0; border: none; background: transparent; backdrop-filter: none; box-shadow: none; top: 0; width: 100%; }
  .hamburger-btn { display: flex; }
  .nav-links {
    position: fixed; top: 0; right: 0; width: 100%; height: 100vh;
    background: rgba(var(--space-charcoal-rgb), 0.95); backdrop-filter: blur(20px);
    flex-direction: column; justify-content: center; align-items: center; gap: 3rem;
    transform: translateY(-100%); transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1);
    z-index: 1000; display: flex !important;
  }
  .nav-links.active { transform: translateY(0); }
  .nav-links a { font-size: 1.5rem; border-left: none; }
  .btn-primary { width: auto; font-size: 1.2rem; margin-top: 1rem; }
}

/* Lenis 1.3.26 recommended base styles */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ============ Inventory Management System page (ims-) ============ */
.ims-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: 1.5rem; }
.ims-hero-copy .tagline { margin-bottom: 1.2rem; }
.ims-title { font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.04; margin-bottom: 1.4rem; }
.ims-hero-copy > p:not(.tagline) { max-width: 560px; }
.ims-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.ims-hero-media { position: relative; }
.ims-hero-media::before { content: ""; position: absolute; inset: 8% -4% -6% 10%; z-index: -1; background: radial-gradient(circle, rgba(255,59,59,.28), transparent 65%); filter: blur(30px); }
.ims-photo { border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 40px 100px rgba(0,0,0,.45); }
.ims-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 572; object-fit: cover; }
.ims-float { position: absolute; display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-radius: 12px; background: rgba(17,19,26,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px rgba(0,0,0,.4); color: #F5F6F8; font-size: .78rem; }
.ims-float i { font-size: 1.35rem; color: var(--mars-red); }
.ims-float b { display: block; font-family: var(--font-display); font-size: .9rem; }
.ims-float span { color: rgba(245,246,248,.65); }
.ims-float-a { left: -1.5rem; bottom: 12%; }
.ims-float-b { right: -1rem; top: 10%; }
.ims-stats { justify-content: flex-start; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--glass-border); }

.ims-block { padding: 5rem 0 1rem; }
.ims-section-head { max-width: 760px; margin-bottom: 2.25rem; }
.ims-section-head h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: .35rem 0 .8rem; }

.ims-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ims-compare h3 { font-size: 1.25rem; }
.ims-compare ul { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .85rem; }
.ims-compare li { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.5; }
.ims-compare li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: .6em; border-radius: 50%; }
.ims-before h3 i { color: rgba(var(--lunar-white-rgb), .45); }
.ims-before li { color: rgba(var(--lunar-white-rgb), .65); }
.ims-before li::before { background: rgba(var(--lunar-white-rgb), .35); }
.ims-after { border-color: rgba(255,59,59,.35); box-shadow: 0 0 60px rgba(255,59,59,.06); }
.ims-after li::before { background: var(--mars-red); box-shadow: 0 0 8px var(--mars-red); }

.ims-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; position: relative; }
.ims-flow::before { content: ""; position: absolute; left: 22px; right: 0; top: 22px; height: 1px; background: linear-gradient(90deg, var(--mars-red), rgba(255,59,59,.12)); }
.ims-flow li { position: relative; padding-top: 3.6rem; }
.ims-flow li > i { position: absolute; top: 0; left: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--space-charcoal); border: 1px solid var(--mars-red); color: var(--mars-red); font-size: 1.2rem; box-shadow: 0 0 18px rgba(255,59,59,.25); }
.ims-flow b { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .35rem; }
.ims-flow small { display: block; font-size: .88rem; line-height: 1.55; color: rgba(var(--lunar-white-rgb), .68); }

.ims-band { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; border: 1px solid var(--glass-border); padding: clamp(2rem, 5vw, 4rem); }
.ims-band picture, .ims-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ims-band-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10,11,15,.94) 25%, rgba(10,11,15,.7) 70%, rgba(10,11,15,.55)); }
.ims-band-inner h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: .35rem 0 .6rem; color: #F5F6F8; }
.ims-band-inner > p { color: rgba(245,246,248,.75); }
.ims-band .glass-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ims-band .glass-card h3 { color: #F5F6F8; }
.ims-band .glass-card p { color: rgba(245,246,248,.72); }

@media (max-width: 900px) {
  .ims-hero { grid-template-columns: 1fr; }
  .ims-float-a { left: .75rem; bottom: .75rem; }
  .ims-float-b { right: .75rem; top: .75rem; }
  .ims-compare { grid-template-columns: 1fr; }
  .ims-flow { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .ims-flow::before { display: none; }
}
@media (max-width: 600px) {
  .ims-block { padding-top: 3.5rem; }
  .ims-flow { grid-template-columns: 1fr; }
  .ims-float { font-size: .7rem; padding: .55rem .75rem; }
  .ims-float b { font-size: .8rem; }
  .ims-stats { gap: .8rem 1.5rem; }
  .ims-stats .ff-sep { display: none; }
}
.ims-section-head h2, .ims-modules h2 { line-height: 1.1; }
.ims-modules .ff-pillar-label { display: block; margin-top: 2.5rem; }
.ims-modules .grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: .9rem; }

/* ============ Scroll-drawn process roadmap ============ */
.roadmap { padding: 5rem 0 3rem; }
.roadmap-head { text-align: center; max-width: 640px; margin: 0 auto 4rem; }
.roadmap-head h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.1; margin: .35rem 0 .7rem; }
.roadmap-track { position: relative; }
.roadmap-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.roadmap-svg path { fill: none; stroke-linecap: round; }
.road-base { stroke: rgba(var(--lunar-white-rgb), .07); stroke-width: 16; }
.road-lane { stroke: rgba(var(--lunar-white-rgb), .22); stroke-width: 1.5; stroke-dasharray: 2 12; }
.road-progress { stroke: var(--mars-red); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255,59,59,.7)); }
.roadmap-car { position: absolute; left: 0; top: 0; z-index: 3; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--mars-red); box-shadow: 0 0 0 6px rgba(255,59,59,.2), 0 0 26px var(--mars-red); will-change: transform; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.roadmap.is-ready .roadmap-car { opacity: 1; }
/* Before the road reaches a stop its card waits slightly lowered, but stays readable */
.roadmap.is-ready .roadmap-stop:not(.is-reached) .stop-card { opacity: .82; transform: translateY(28px); }
.roadmap-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 4.5rem; }
.roadmap-stop { display: grid; grid-template-columns: 1fr 220px 1fr; align-items: center; }
.stop-node { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--space-charcoal); border: 1px solid var(--glass-border); color: rgba(var(--lunar-white-rgb), .45); font-size: 1.45rem; transition: border-color .5s ease, color .5s ease, box-shadow .5s ease; }
.roadmap-stop[data-side="left"] .stop-node { transform: translateX(60px); }
.roadmap-stop[data-side="right"] .stop-node { transform: translateX(-60px); }
.stop-card { grid-row: 1; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), border-color .6s ease; }
.roadmap-stop[data-side="left"] .stop-card { grid-column: 1; }
.roadmap-stop[data-side="right"] .stop-card { grid-column: 3; }
.stop-card h3 { font-size: 1.45rem; margin: .4rem 0 .5rem; }
.stop-card p { margin: 0; }
.stop-num { font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mars-red); }
.stop-meta { display: inline-block; margin-top: 1rem; padding: .3rem .75rem; border-radius: 100px; border: 1px solid var(--glass-border); font-size: .75rem; color: rgba(var(--lunar-white-rgb), .7); }
.roadmap-stop.is-reached .stop-node { border-color: var(--mars-red); color: var(--mars-red); box-shadow: 0 0 0 6px rgba(255,59,59,.1), 0 0 30px rgba(255,59,59,.35); }
.roadmap-stop.is-reached .stop-card { border-color: rgba(255,59,59,.35); box-shadow: 0 20px 60px rgba(255,59,59,.08); }

@media (max-width: 760px) {
  .roadmap-head { text-align: left; margin-bottom: 2.5rem; }
  .roadmap-stops { gap: 2rem; }
  .roadmap-stop { grid-template-columns: 58px 1fr; gap: 1.1rem; align-items: start; }
  .roadmap-stop .stop-node, .roadmap-stop[data-side] .stop-node { grid-column: 1; transform: none; width: 48px; height: 48px; font-size: 1.2rem; justify-self: start; margin-left: 5px; }
  .roadmap-stop[data-side] .stop-card { grid-column: 2; }
  .road-base { stroke-width: 10; }
}

/* ============ Hover-reveal cards (Why Businesses Choose Custom Software) ============ */
.reveal-hint { font-size: .9rem; color: rgba(var(--lunar-white-rgb), .55); margin: 0; }
.reveal-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; align-items: start; }
/* The opened card grows in place; its row eases taller so the cards below glide down and back. */
.reveal-card { position: relative; outline: none; }
.reveal-inner { position: relative; margin: 0; padding: 1.15rem 1.3rem; cursor: default; transition: border-color .4s ease, box-shadow .4s ease, background-color .4s ease; }
.reveal-top { display: flex; align-items: center; gap: .85rem; min-height: 40px; padding-right: 2rem; }
.reveal-top i { flex: none; font-size: 1.6rem; }
.reveal-top h3 { font-size: 1.05rem; line-height: 1.25; margin: 0; }
.reveal-inner p { margin: 0; font-size: .9rem; line-height: 1.55; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1), margin-top .45s ease; }
.reveal-plus { position: absolute; top: 50%; right: 1.15rem; width: 22px; height: 22px; margin-top: -11px; border: 1px solid var(--glass-border); border-radius: 50%; transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .4s ease, top .45s ease, margin .45s ease; }
.reveal-plus::before, .reveal-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; margin: -.75px 0 0 -4.5px; background: rgba(var(--lunar-white-rgb), .7); }
.reveal-plus::after { transform: rotate(90deg); }
.reveal-card:hover .reveal-inner, .reveal-card:focus-within .reveal-inner { background-color: var(--space-charcoal); border-color: rgba(255,59,59,.45); box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 40px rgba(255,59,59,.1); }
.reveal-card:hover .reveal-inner p, .reveal-card:focus-within .reveal-inner p { max-height: 10rem; opacity: 1; transform: none; margin-top: .7rem; }
.reveal-card:hover .reveal-plus, .reveal-card:focus-within .reveal-plus { top: 1.15rem; margin-top: 9px; transform: rotate(45deg); border-color: var(--mars-red); }
.reveal-card:focus-visible .reveal-inner { outline: 2px solid var(--mars-red); outline-offset: 3px; }
@media (hover: none) { .reveal-hint { font-size: 0; } .reveal-hint::after { content: "Tap a card to see why."; font-size: .9rem; } }
@media (max-width: 900px) { .reveal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .reveal-grid { grid-template-columns: 1fr; gap: .75rem; }
}

/* ============ One System — scroll-scrubbed animation (homepage) ============ */
.one-system { position: relative; }
.one-system-stage { position: relative; height: 100vh; height: 100svh; max-height: 920px; display: flex; align-items: center; justify-content: center; padding: 1.5rem 2vw 2.5rem; box-sizing: border-box; }
.one-system-svg { display: block; width: 100%; height: 100%; max-width: 1500px; }
.one-system-svg .sg { font-family: var(--font-display); }
.one-system-svg .in { font-family: var(--font-body); }
.one-system-progress { position: absolute; left: 50%; bottom: 1.4rem; width: 120px; height: 2px; transform: translateX(-50%); border-radius: 2px; background: var(--glass-border); overflow: hidden; }
.one-system.is-done .one-system-progress { opacity: 0; transition: opacity .6s ease .4s; }
.one-system-progress span { display: block; height: 100%; width: calc(var(--os-progress, 0) * 100%); background: var(--mars-red); box-shadow: 0 0 8px var(--mars-red); }
.one-system.is-static .one-system-progress { display: none; }
@media (max-width: 600px) {
  .one-system-stage { padding: 1rem 0 2rem; }
}
.ims-flow--6 { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
@media (max-width: 1100px) { .ims-flow--6 { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; } .ims-flow--6::before { display: none; } }
@media (max-width: 600px) { .ims-flow--6 { grid-template-columns: 1fr; } }
/* Product pages whose mockups have wide tables: one full-width screen per row */
.ff-gallery--wide { grid-template-columns: 1fr; gap: 3.5rem; }
/* Client results cards (product pages) */
.ims-results { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ims-result { border-color: rgba(255,59,59,.3); }
.ims-result-stat { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--mars-red); margin-bottom: 1.2rem; text-shadow: 0 0 30px rgba(255,59,59,.35); }
.ims-result-stat i { font-size: .9em; }
.ims-result h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.ims-result p { margin: 0; }
@media (max-width: 760px) { .ims-results { grid-template-columns: 1fr; } }
/* Product infographic (full-width image with caption) */
.ims-infographic { margin: 0; }
.ims-infographic a { display: block; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 40px 100px rgba(0,0,0,.45); cursor: zoom-in; }
.ims-infographic img { display: block; width: 100%; height: auto; aspect-ratio: 2752 / 1536; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ims-infographic a:hover img { transform: scale(1.015); }
.ims-infographic figcaption { margin-top: .9rem; font-size: .85rem; color: rgba(var(--lunar-white-rgb), .6); text-align: center; }
/* Split hero with a clickable infographic instead of a photo */
.ims-photo--zoom a { display: block; cursor: zoom-in; }
.ims-photo--zoom img { aspect-ratio: var(--ims-aspect, 16 / 9); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ims-photo--zoom a:hover img { transform: scale(1.02); }
/* Infographics carry their own title at the top, so keep the floating cards off it */
.ims-photo--zoom ~ .ims-float-b { top: auto; bottom: -1.4rem; right: 1.5rem; }
.ims-photo--zoom ~ .ims-float-a { bottom: 22%; }
@media (max-width: 900px) { .ims-photo--zoom ~ .ims-float-b { bottom: .75rem; right: .75rem; } .ims-photo--zoom ~ .ims-float-a { bottom: auto; top: 38%; } }

/* "At a glance" panel: right side of the product hero when there is no image */
.ims-panel { padding: 1.75rem 1.9rem; border-radius: 18px; box-shadow: 0 40px 100px rgba(0,0,0,.35); }
.ims-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.ims-panel-head .ff-pillar-label { margin: 0; }
.ims-panel-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--lunar-white-rgb), .7); }
.ims-panel-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mars-red); box-shadow: 0 0 12px var(--mars-red); animation: imsPulse 1.8s ease-in-out infinite; }
@keyframes imsPulse { 50% { opacity: .35; } }
.ims-panel-list { list-style: none; margin: 0; padding: 0; }
.ims-panel-list li { display: flex; align-items: flex-start; gap: .9rem; padding: .95rem 0; border-bottom: 1px solid var(--glass-border); }
.ims-panel-list li:last-child { border-bottom: none; padding-bottom: 0; }
.ims-panel-list li > i { flex: none; font-size: 1.35rem; color: var(--mars-red); margin-top: .1rem; }
.ims-panel-list b { display: block; font-family: var(--font-display); font-size: 1rem; margin-bottom: .15rem; }
.ims-panel-list span { display: block; font-size: .88rem; line-height: 1.5; color: rgba(var(--lunar-white-rgb), .65); }
@media (prefers-reduced-motion: reduce) { .ims-panel-status::before { animation: none; } }
/* Integration diagram (product pages): existing system -> our tool -> output */
.ims-integration { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 1rem; }
.ims-int-node { display: flex; flex-direction: column; }
.ims-int-node > i { font-size: 2rem; color: rgba(var(--lunar-white-rgb), .7); margin-bottom: .9rem; }
.ims-int-core { border-color: rgba(255,59,59,.45); box-shadow: 0 0 60px rgba(255,59,59,.1); }
.ims-int-core > i { color: var(--mars-red); }
.ims-int-tag { font-family: var(--font-display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mars-red); margin-bottom: .35rem; }
.ims-int-node h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.ims-int-node p { margin: 0; font-size: .95rem; }
.ims-int-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: var(--mars-red); text-align: center; max-width: 110px; }
.ims-int-arrow i { font-size: 1.6rem; }
.ims-int-arrow span { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--lunar-white-rgb), .6); }
.ims-int-points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.ims-int-points li { display: flex; align-items: center; gap: .55rem; font-size: .95rem; color: rgba(var(--lunar-white-rgb), .8); }
.ims-int-points i { color: var(--mars-red); font-size: 1.15rem; }
@media (max-width: 900px) {
  .ims-integration { grid-template-columns: 1fr; }
  .ims-int-arrow { flex-direction: row; max-width: none; padding: .25rem 0; }
  .ims-int-arrow i { transform: rotate(90deg); }
}

/* ============ Website portfolio (/portfolio) ============ */
.pf-intro { max-width: 640px; }
.pf-filters { margin-top: 2.5rem; align-items: center; }
.pf-filter-managed { display: inline-flex; align-items: center; gap: .45rem; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding: 1rem 0 2rem; }
.pf-card { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.pf-card:hover, .pf-card:focus-within { transform: translateY(-4px); border-color: rgba(255,59,59,.45); box-shadow: 0 24px 60px -30px rgba(255,59,59,.55); }
.pf-card-body { display: flex; flex-direction: column; gap: .2rem; padding: 1.4rem 1.6rem 1.6rem; flex: 1; }
.pf-card-body h3 { font-size: 1.35rem; margin: .4rem 0 .3rem; }
.pf-card-body p { font-size: .98rem; margin: 0; }
.pf-card-foot { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pf-link { color: var(--mars-red); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: .45rem; }
.pf-link::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* whole card clicks through to the case study */
.pf-link i { transition: transform .3s ease; }
.pf-card:hover .pf-link i { transform: translateX(4px); }
.pf-domain { font-size: .78rem; color: rgba(var(--lunar-white-rgb), .55); }

/* Category + managed tags */
.pf-tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pf-tag { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: .22rem .7rem; border-radius: 100px; border: 1px solid var(--glass-border); color: rgba(var(--lunar-white-rgb), .75); }
.pf-tag--live { border-color: rgba(52, 211, 153, .45); color: #34D399; }
.pf-tag--assisted { border-color: rgba(96, 165, 250, .45); color: #60A5FA; }
.pf-tag--concept { border-color: rgba(251, 191, 36, .45); color: #F59E0B; }
.pf-managed { display: inline-flex; align-items: center; gap: .4rem; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .22rem .7rem; border-radius: 100px; background: var(--mars-red); color: var(--on-mars-red); }
.pf-managed::before, .pf-pulse { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pf-pulse 2s ease-out infinite; }
.pf-pulse { display: inline-block; }
@keyframes pf-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.pf-services { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; }
.pf-services span { font-size: .72rem; padding: .25rem .6rem; border-radius: 6px; background: rgba(255,59,59,.1); color: rgba(var(--lunar-white-rgb), .85); }
.pf-services i { color: var(--mars-red); margin-right: .25rem; }

/* Browser frame with a live (or poster) preview */
.pf-browser { border-bottom: 1px solid var(--glass-border); background: rgba(10, 11, 16, .55); }
.pf-browser-bar { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-bottom: 1px solid var(--glass-border); }
.pf-dots { display: flex; gap: 5px; flex-shrink: 0; }
.pf-dots span { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.pf-dots span:nth-child(2) { background: #FEBC2E; }
.pf-dots span:nth-child(3) { background: #28C840; }
.pf-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; font-size: .72rem; padding: .28rem .7rem; border-radius: 6px; background: rgba(var(--lunar-white-rgb), .06); color: rgba(var(--lunar-white-rgb), .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-url i { color: #34D399; }
.pf-live-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #34D399; }
.pf-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0f15; }
.pf-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-screen iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; transform: scale(var(--pf-scale, .4)); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.pf-screen.is-live iframe { opacity: 1; }

/* Case-study page */
.pf-case-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; margin-top: .5rem; }
.pf-case-hero .pf-tags { margin-bottom: 1.2rem; }
.pf-facts { list-style: none; margin: 0; padding: 1.4rem 1.6rem; display: grid; gap: .9rem; }
.pf-facts li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--glass-border); padding-bottom: .75rem; font-size: .95rem; }
.pf-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-facts span { color: rgba(var(--lunar-white-rgb), .55); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; padding-top: .15rem; }
.pf-facts b { text-align: right; font-weight: 600; }
.pf-viewer { margin-top: 3rem; padding: 0; overflow: hidden; }
.pf-viewer .pf-browser { border-bottom: 0; }
.pf-devices { display: flex; gap: .25rem; flex-shrink: 0; }
.pf-devices button { background: none; border: 1px solid transparent; border-radius: 6px; padding: .2rem .45rem; color: rgba(var(--lunar-white-rgb), .55); cursor: pointer; font-size: 1rem; line-height: 1; }
.pf-devices button:hover { color: var(--lunar-white); }
.pf-devices button.active { color: var(--mars-red); border-color: rgba(255,59,59,.4); }
.pf-viewport { position: relative; height: min(78vh, 820px); background: #0d0f15; display: flex; justify-content: center; overflow: hidden; }
.pf-viewport iframe { width: 100%; height: 100%; border: 0; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.pf-viewport[data-device="tablet"], .pf-viewport[data-device="mobile"] { padding: 1.25rem 0; }
.pf-viewport[data-device="tablet"] iframe { width: min(820px, 100%); }
.pf-viewport[data-device="mobile"] iframe { width: min(390px, 100%); }
.pf-viewport[data-device="tablet"] iframe, .pf-viewport[data-device="mobile"] iframe { border-radius: 14px; box-shadow: 0 0 0 8px rgba(var(--lunar-white-rgb), .08); }
.pf-viewport > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-viewport-cover { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(10,11,16,.85), rgba(10,11,16,.15)); }
.pf-viewer-note { font-size: .82rem; color: rgba(var(--lunar-white-rgb), .55); margin: .9rem 0 0; max-width: none; }

/* Journey timeline */
.pf-journey { list-style: none; margin: 0; padding: 0; position: relative; max-width: 860px; }
.pf-journey::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--mars-red), rgba(255,59,59,.08)); }
.pf-journey li { position: relative; padding: 0 0 2.6rem 4.25rem; }
.pf-journey li:last-child { padding-bottom: 0; }
.pf-step-icon { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; color: var(--mars-red); background: #11131A; border: 1px solid rgba(255,59,59,.45); box-shadow: 0 0 22px -6px rgba(255,59,59,.6); }
.pf-journey .ff-pillar-label { margin-bottom: .2rem; }
.pf-journey h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.pf-journey p { margin: 0; }
.pf-manage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.pf-manage-grid .glass-card { padding: 1.5rem; }
.pf-manage-grid i { font-size: 1.6rem; color: var(--mars-red); margin-bottom: .8rem; display: block; }
.pf-manage-grid h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.pf-manage-grid p { font-size: .95rem; margin: 0; }

:root[data-theme="light"] .pf-browser, :root[data-theme="light"] .pf-screen, :root[data-theme="light"] .pf-viewport { background: #E9EBF0; }
:root[data-theme="light"] .pf-step-icon { background: #F5F6F8; }
:root[data-theme="light"] .pf-tag--live, :root[data-theme="light"] .pf-url i, :root[data-theme="light"] .pf-live-badge { color: #059669; }
:root[data-theme="light"] .pf-tag--assisted { color: #2563EB; }
:root[data-theme="light"] .pf-tag--concept { color: #B45309; }

@media (max-width: 900px) {
  .pf-grid, .pf-case-hero { grid-template-columns: 1fr; }
  .pf-viewport { height: 70vh; }
  .pf-devices { display: none; }
}
@media (max-width: 600px) {
  .pf-card-body { padding: 1.2rem; }
  .pf-journey li { padding-left: 3.6rem; }
  .pf-journey::before { left: 17px; }
  .pf-step-icon { width: 36px; height: 36px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .pf-managed::before, .pf-pulse { animation: none; } }
.pf-browser i, .pf-card-body .pf-services i, .pf-card-body .pf-link i { font-size: inherit; }
.pf-url i { color: #34D399; }
.pf-devices button i { color: inherit; font-size: 1.05rem; }
.pf-filter-bar { padding: 2.5rem 0 0; }
.pf-filter-bar .pf-filters { margin: 0 0 1rem; }
.page-header .pf-grid { padding: 1rem 0 2rem; }
.page-header .pf-grid::before { display: none; }
.pf-viewport-cover .btn-primary i, .pf-case .btn-primary i { color: inherit; font-size: inherit; }
:root[data-theme="light"] .pf-url i { color: #059669; }

/* Case-study hero: info left, live view right */
.pf-case-hero { align-items: center; }
.pf-case-hero .pf-facts { padding: 0; margin: 1.8rem 0 0; max-width: 560px; }
.pf-case-hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.pf-desk-wrap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; position: relative; }
.pf-desk-wrap::before { content: ""; position: absolute; inset: 15% -6% 5%; z-index: -1; background: radial-gradient(circle, rgba(255,59,59,.28), transparent 65%); filter: blur(30px); }
.pf-desk { width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid rgba(var(--lunar-white-rgb), .14); background: #0d0f15; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.pf-desk .pf-browser-bar { background: rgba(10, 11, 16, .9); }
.pf-desk .pf-browser-bar i { font-size: inherit; }
.pf-desk-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0f15; }
.pf-desk-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-desk-screen iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; transform: scale(var(--pf-scale, .5)); }
.pf-desk-wrap .pf-viewer-note { margin: 0; text-align: center; }
:root[data-theme="light"] .pf-desk, :root[data-theme="light"] .pf-desk-screen { background: #E9EBF0; }
:root[data-theme="light"] .pf-desk .pf-browser-bar { background: #F5F6F8; }
@media (max-width: 900px) { .pf-case-hero { grid-template-columns: 1fr; } }

/* Desktop / tablet / mobile switch for the live view */
.pf-view-switch { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 100px; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(8px); }
.pf-view-switch button { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border: 0; border-radius: 100px; background: none; cursor: pointer; font-family: var(--font-display); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(var(--lunar-white-rgb), .7); transition: color .3s ease, background .3s ease; }
.pf-view-switch button i { font-size: 1rem; }
.pf-view-switch button:hover { color: var(--lunar-white); }
.pf-view-switch button.active { background: var(--mars-red); color: var(--on-mars-red); }
.pf-desk-screen { transition: aspect-ratio .45s ease; }
.pf-desk-screen[data-device="tablet"], .pf-desk-screen[data-device="mobile"] { aspect-ratio: 4 / 3; }
.pf-desk-screen iframe { width: var(--pf-w, 1440px); height: var(--pf-h, 900px); left: var(--pf-left, 0); }
.pf-desk-screen[data-device="tablet"] iframe, .pf-desk-screen[data-device="mobile"] iframe { top: 16px; border-radius: 28px; box-shadow: 0 0 0 14px #07080C, 0 0 0 15px rgba(var(--lunar-white-rgb), .14); }
@media (max-width: 600px) { .pf-view-switch button { padding: .4rem .7rem; font-size: .66rem; } }
.project-group .pf-filters { margin: 0 0 2rem; }

/* Projects dropdown in the main nav */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: .35rem; position: relative; }
.nav-drop-toggle i { font-size: .8rem; transition: transform .3s ease; }
.nav-drop-toggle::after { content: ""; position: absolute; left: 0; bottom: -.3rem; width: 100%; height: 1px; background: var(--mars-red); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nav-drop:hover .nav-drop-toggle::after, .nav-drop:focus-within .nav-drop-toggle::after { transform: scaleX(1); transform-origin: left; }
.nav-drop:hover .nav-drop-toggle i, .nav-drop:focus-within .nav-drop-toggle i { transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: 100%; left: 50%; min-width: 290px; padding: .5rem; margin-top: 1.1rem; display: grid; gap: .25rem;
  background: rgba(var(--space-charcoal-rgb, 17, 19, 26), .96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.2rem; } /* hover bridge */
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-drop-menu a { display: flex; align-items: flex-start; gap: .8rem; padding: .75rem .9rem; border-radius: 12px; text-transform: none; letter-spacing: 0; transition: background .25s ease; }
.nav-drop-menu a:hover, .nav-drop-menu a.is-current { background: rgba(255, 59, 59, .1); }
.nav-drop-menu a > i { font-size: 1.3rem; color: var(--mars-red); margin-top: .1rem; }
.nav-drop-menu b { display: block; font-family: var(--font-display); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lunar-white); }
.nav-drop-menu small { display: block; font-size: .78rem; color: rgba(var(--lunar-white-rgb), .6); margin-top: .15rem; }
:root[data-theme="light"] .nav-drop-menu { background: rgba(255, 255, 255, .97); box-shadow: 0 24px 60px -24px rgba(20,22,28,.25); }
@media (max-width: 768px) {
  .nav-drop { flex-direction: column; gap: 1rem; }
  .nav-drop-toggle i { display: none; }
  .nav-drop-menu { position: static; opacity: 1; visibility: visible; transform: none; margin: 0; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; display: flex; gap: 1.5rem; }
  .nav-drop-menu::before { display: none; }
  .nav-drop-menu a { padding: 0; font-size: 1rem; }
  .nav-drop-menu a > i, .nav-drop-menu small { display: none; }
  .nav-drop-menu b { font-size: .95rem; color: rgba(var(--lunar-white-rgb), .7); }
}

/* Websites grid: three across on wide screens */
.pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pf-grid .pf-card-body { padding: 1.2rem 1.3rem 1.3rem; }
.pf-grid .pf-card-body h3 { font-size: 1.2rem; }
.pf-grid .pf-card-body p { font-size: .92rem; }
@media (max-width: 1100px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pf-grid { grid-template-columns: 1fr; } }

.pf-mark { white-space: nowrap; color: var(--lunar-white); }
.pf-partner { display: flex; align-items: baseline; gap: .45rem; margin-top: .9rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(var(--lunar-white-rgb), .55); }
.pf-facts b .pf-mark { color: var(--lunar-white); text-transform: none; letter-spacing: 0; padding: 0; font-size: 1.3rem; }

/* Projects toggle is a button: looks like the other nav links, only opens the dropdown */
button.nav-drop-toggle { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; transition: color 0.3s ease; }
button.nav-drop-toggle:hover { color: var(--mars-red); }
button.nav-drop-toggle.span-red { color: var(--mars-red); }
@media (max-width: 768px) { button.nav-drop-toggle { font-size: 1.5rem; } }

/* Outline buttons: in light mode the default light button text would vanish on the pale page */
:root[data-theme="light"] .btn-primary.btn-outline { color: var(--mars-red); }

/* Image partner logos (e.g. Growwings) */
.pf-mark--logo { display: inline-flex; align-items: center; }
.pf-mark--logo img { height: 36px; width: auto; display: block; }
.pf-partner { align-items: center; }
.pf-facts b .pf-mark--logo { justify-content: flex-end; }
.pf-facts b .pf-mark--logo img { height: 40px; }

/* Black partner logos (e.g. Hereafter): white on the dark theme, dark on the light theme */
.pf-mark--mono img, .partner-logo--mono img { filter: brightness(0) invert(1); }
:root[data-theme="light"] .pf-mark--mono img, :root[data-theme="light"] .partner-logo--mono img { filter: brightness(0); }
.pf-mark--mono img { height: 24px; }
.pf-facts b .pf-mark--mono img { height: 28px; }

/* Homepage: partners strip */
.partners-band { padding-block: 5rem 1rem; text-align: center; }
.partners-band .eyebrow { justify-content: center; margin-bottom: 2.25rem; max-width: none; }
.partner-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(2.5rem, 7vw, 6rem); }
.partner-logo { display: inline-flex; align-items: center; opacity: .85; transition: opacity .3s ease, transform .3s ease; }
.partner-logo:hover { opacity: 1; transform: translateY(-2px); }
.partner-logo img { height: 56px; width: auto; display: block; }
.partner-logo--mono img { height: 40px; }
@media (max-width: 600px) {
  .partners-band { padding-block: 3.5rem .5rem; }
  .partner-logo img { height: 44px; }
  .partner-logo--mono img { height: 30px; }
}