:root {
  --bg: #05060b;
  --bg-alt: #0a0c16;
  --surface: rgba(255, 255, 255, .05);
  --surface-strong: rgba(255, 255, 255, .09);
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .20);
  --text: #f1f3f9;
  --text-dim: #97a0b8;
  --text-faint: #656e85;
  --accent: #2B7FD1;
  --accent-2: #5FC3E8;
  --accent-3: #1A2F6B;
  --gradient: linear-gradient(135deg, #2B7FD1, #1A2F6B);
  --gradient-warm: linear-gradient(135deg, #2B7FD1, #5FC3E8);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --depth-sm: 0 2px 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06) inset;
  --depth-md: 0 2px 4px rgba(0,0,0,.35), 0 16px 32px -12px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.07) inset;
  --depth-lg: 0 4px 8px rgba(0,0,0,.4), 0 40px 80px -24px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.08) inset;
  --glow-accent: 0 0 1px rgba(43,127,209,.8), 0 0 50px -6px rgba(43,127,209,.5);
  --glow-warm: 0 0 1px rgba(95,195,232,.8), 0 0 50px -6px rgba(95,195,232,.4);
  --max-w: 1180px;
  --pad-x: clamp(20px, 5vw, 64px);
  --persp: 1400px;

  /* Light-section palette (see .on-light) */
  --l-bg: #FAFAF8;
  --l-text: #0B0D14;
  --l-text-dim: #4B5163;
  --l-text-faint: #7A8094;
  --l-border: rgba(11,13,20,.10);
  --l-border-strong: rgba(11,13,20,.18);
  --l-surface: rgba(11,13,20,.035);
  --l-surface-strong: rgba(11,13,20,.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
h1, h2, h3, h4 { font-family: 'Sora', 'Inter', sans-serif; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #05060b; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ---------- Starfield / noise base ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.3), transparent);
  background-size: 100% 100%;
  opacity: .5;
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--gradient-warm); z-index: 300; transition: width .1s linear;
  box-shadow: 0 0 12px rgba(43,127,209,.7);
}

/* ---------- Ambient glow orbs ---------- */
.glow { position: fixed; border-radius: 50%; filter: blur(100px); z-index: 0; pointer-events: none; }
.glow-1 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(43,127,209,.35), transparent 70%); top: -160px; right: -140px; animation: drift1 24s ease-in-out infinite; }
.glow-2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(95,195,232,.28), transparent 70%); bottom: 5%; left: -160px; animation: drift2 28s ease-in-out infinite; }
.glow-3 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(26,47,107,.25), transparent 70%); top: 45%; right: 10%; animation: drift3 32s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px,50px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(50px,-40px); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,-30px) scale(1.1); } }

/* ---------- Navbar (glass) ---------- */
.navbar {
  position: sticky; top: 0; z-index: 106;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad-x);
  background: rgba(8, 10, 18, .6);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.logo-group { display: flex; align-items: center; gap: 9px; }
.nav-mark-img { width: 36px; height: 36px; object-fit: contain; display: block; }
.logo { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; color: var(--text); }
.logo .dot { color: var(--accent); }

.nav-links { display: none; }
.nav-link {
  font-size: .92rem; font-weight: 500; color: var(--text-dim);
  position: relative; padding: 6px 0; transition: color .2s;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gradient); transition: width .2s; box-shadow: 0 0 8px rgba(43,127,209,.7);
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.navbar .nav-cta { display: none; }

.theme-picker { position: relative; }
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  cursor: pointer; transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-icon { width: 17px; height: 17px; }
.theme-icon.icon-experience, .theme-icon.icon-light, .theme-icon.icon-nebula, .theme-icon.icon-voyage { display: none; }
:root[data-theme="experience"] .theme-icon.icon-cinematic { display: none; }
:root[data-theme="experience"] .theme-icon.icon-experience { display: block; }
:root[data-theme="light"] .theme-icon.icon-cinematic { display: none; }
:root[data-theme="light"] .theme-icon.icon-light { display: block; }
:root[data-theme="nebula"] .theme-icon.icon-cinematic { display: none; }
:root[data-theme="nebula"] .theme-icon.icon-nebula { display: block; }
:root[data-theme="voyage"] .theme-icon.icon-cinematic { display: none; }
:root[data-theme="voyage"] .theme-icon.icon-voyage { display: block; }

.theme-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  background: rgba(13,15,26,.96); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  backdrop-filter: blur(14px); box-shadow: var(--depth-lg);
  min-width: 168px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.theme-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.theme-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .86rem; font-weight: 600; color: #cbd0dd; text-align: left;
  transition: background .15s;
}
.theme-option:hover { background: rgba(255,255,255,.07); }
.theme-option.active { color: #fff; background: rgba(43,127,209,.16); }
.theme-option-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-cinematic { background: #2B7FD1; }
.dot-experience { background: #5FC3E8; box-shadow: 0 0 6px #5FC3E8; }
.dot-light { background: #FAFAF8; border: 1px solid rgba(0,0,0,.15); }
.dot-nebula { background: linear-gradient(135deg, #FF6B4A, #4AC9FF); box-shadow: 0 0 6px rgba(74,201,255,.6); }
.dot-voyage { background: radial-gradient(circle at 30% 30%, #fff, #A46BFF 45%, #2CD9FF 100%); box-shadow: 0 0 6px rgba(164,107,255,.7); }

.nav-toggle {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; z-index: 110; padding: 6px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 105;
  background: #05060b;
  display: flex; flex-direction: column;
  padding: 90px 28px 40px;
  gap: 4px;
  transform: translateY(-100%);
  transition: transform .35s ease;
}
.mobile-menu::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 30% 20%, rgba(43,127,209,.18), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(95,195,232,.14), transparent 55%);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a {
  font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 700;
  padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--text);
}
.mobile-menu .mobile-cta {
  margin-top: 24px; border-bottom: none;
  padding: 14px 26px; color: #05060b;
  font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  font-family: 'Inter', sans-serif;
  transition: transform .2s, box-shadow .2s, background .2s; cursor: pointer; border: none;
  width: 100%;
}
.btn-primary { background: var(--gradient-warm); color: #05060b; box-shadow: var(--depth-md), var(--glow-accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--depth-lg), var(--glow-accent); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Hero ---------- */
.hero { padding: 40px var(--pad-x) 0; position: relative; z-index: 1; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; position: relative; }

/* Perspective grid floor — the unmistakable "future" cue */
.grid-floor {
  position: absolute; left: 50%; bottom: -60px; width: 200vw; height: 340px;
  transform: translateX(-50%) perspective(500px) rotateX(62deg);
  background-image:
    linear-gradient(rgba(43,127,209,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,127,209,.35) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 85%);
  mask-image: linear-gradient(to top, #000 5%, transparent 85%);
  animation: gridMove 6s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes gridMove { to { background-position: 0 48px; } }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-strong);
  backdrop-filter: blur(10px);
  color: var(--text-dim); font-size: .8rem; font-weight: 600; padding: 7px 16px; border-radius: 999px;
  margin-bottom: 20px;
}
.eyebrow-pill .dot-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.hero-title {
  font-size: clamp(2.7rem, 11vw, 6.6rem); font-weight: 900; letter-spacing: -.04em; line-height: .98;
  margin-bottom: 20px; color: var(--text); text-wrap: balance;
}
.hero-title .grad {
  background: var(--gradient-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-desc {
  color: var(--text-dim); font-size: clamp(1rem, 2.4vw, 1.2rem); max-width: 620px; margin: 0 auto 30px;
}
.hero-desc strong { color: var(--text); font-weight: 600; }
.hero-cta { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; }
.hero-cta .btn { width: 100%; }

.hero-caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.hero-cap {
  display: flex; align-items: center; gap: 9px; padding: 7px 16px 7px 7px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  font-size: .85rem; font-weight: 600; color: var(--text-dim);
  animation: capFloat 4.5s ease-in-out infinite;
}
.hero-cap:nth-child(2) { animation-delay: .35s; }
.hero-cap:nth-child(3) { animation-delay: .7s; }
.hero-cap:nth-child(4) { animation-delay: 1.05s; }
.hero-cap-icon {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(43,127,209,.14); color: var(--accent); flex-shrink: 0;
}
.hero-cap:nth-child(3n+2) .hero-cap-icon { background: rgba(95,195,232,.16); color: var(--accent-2); }
.hero-cap:nth-child(3n) .hero-cap-icon { background: rgba(26,47,107,.14); color: var(--accent-3); }
.hero-cap-icon svg { width: 14px; height: 14px; }
@keyframes capFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.hero-visual { margin: 44px auto 0; max-width: 480px; position: relative; perspective: var(--persp); }
.tilt-3d {
  transform: rotateX(8deg) rotateY(-10deg);
  transform-style: preserve-3d;
  transition: transform .4s ease;
}
.float-3d { animation: float3d 5s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes float3d {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-14px) rotateZ(.6deg); }
}
.browser-frame {
  background: #0d0f1a; border-radius: var(--radius); border: 1px solid var(--border-strong);
  box-shadow: var(--depth-lg), var(--glow-accent);
  overflow: hidden;
}
.browser-frame img { width: 100%; display: block; }
.hero-visual-badge {
  position: absolute; z-index: 4; background: rgba(13,15,26,.85); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  backdrop-filter: blur(12px);
  box-shadow: var(--depth-md); padding: 10px 14px; display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; color: var(--text); white-space: nowrap;
}
.badge-1 { top: -16px; left: -10px; color: var(--accent); }
.badge-2 { bottom: -14px; right: -8px; color: var(--accent-2); }
.hero-visual-badge svg { width: 15px; height: 15px; }


/* Phone mockup — mobile apps, layered with the ERPNext desk screenshot */
.hero-phone-frame {
  position: absolute; bottom: -10%; left: -6%; width: 17%; max-width: 96px; z-index: 3;
  border-radius: 14px; border: 1px solid var(--border-strong); overflow: hidden;
  box-shadow: var(--depth-lg), var(--glow-accent);
  animation: phoneFloat 6s ease-in-out infinite; animation-delay: .6s;
}
.hero-phone-frame img { width: 100%; display: block; }
@keyframes phoneFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(1deg); } }


/* ---------- Marquee ---------- */
.marquee {
  position: relative; z-index: 1; overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02); padding: 16px 0; margin-top: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: inline-flex; animation: marquee 30s linear infinite; }
.marquee-group { display: inline-flex; align-items: center; gap: 16px; padding-right: 16px; }
.marquee span { font-family: 'Sora', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: 1.5px; color: var(--text-faint); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 76px var(--pad-x); }
.section-soft { background: linear-gradient(180deg, transparent, rgba(255,255,255,.025) 15%, rgba(255,255,255,.025) 85%, transparent); max-width: 100%; }
.section-soft > .section-inner { max-width: var(--max-w); margin: 0 auto; padding: 76px var(--pad-x); }
.section-head { margin-bottom: 40px; }
.section-tag {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); background: rgba(43,127,209,.12); border: 1px solid rgba(43,127,209,.3); padding: 5px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.section-title { font-size: clamp(2.2rem, 7.5vw, 4.2rem); font-weight: 900; letter-spacing: -.035em; line-height: 1; color: var(--text); text-wrap: balance; }
.section-sub { color: var(--text-dim); margin-top: 14px; font-size: 1.05rem; max-width: 560px; }

/* ---------- Glass cards (services) ---------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.svc-card {
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--border); border-radius: var(--radius);
  backdrop-filter: blur(14px);
  padding: 26px; box-shadow: var(--depth-sm);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, border-color .35s;
  transform-style: preserve-3d;
}
.svc-card:hover { border-color: var(--border-strong); box-shadow: var(--depth-md), var(--glow-accent); }
.svc-icon {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 14px; background: rgba(43,127,209,.14); border: 1px solid rgba(43,127,209,.25);
  color: var(--accent); margin-bottom: 16px;
}
.svc-icon svg { width: 24px; height: 24px; }
.svc-card:nth-child(3n+2) .svc-icon { color: var(--accent-2); }
.svc-card:nth-child(3n) .svc-icon { color: var(--accent-3); }
.svc-card:nth-child(3n+2) .svc-icon { background: rgba(95,195,232,.14); border-color: rgba(95,195,232,.28); }
.svc-card:nth-child(3n) .svc-icon { background: rgba(26,47,107,.14); border-color: rgba(26,47,107,.28); }
.svc-card h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--text); }
.svc-card p { color: var(--text-dim); font-size: .92rem; }

/* ---------- Product spotlight ---------- */
.spotlight { display: flex; flex-direction: column; gap: 32px; }
.spotlight-visual { order: -1; perspective: var(--persp); }
.spotlight-visual .main-shot { max-height: 400px; object-fit: cover; object-position: top; width: 100%; }
.spotlight-text > p { color: var(--text-dim); }
.spotlight-text > p strong { color: var(--text); }
.feature-list { display: flex; flex-direction: column; gap: 16px; margin: 22px 0; }
.feature-item { display: flex; gap: 12px; align-items: flex-start; }
.feature-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(43,127,209,.16); border: 1px solid rgba(43,127,209,.35);
  color: var(--accent); display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.feature-check svg { width: 12px; height: 12px; }
.feature-item h4 { font-size: .95rem; margin-bottom: 2px; color: var(--text); }
.feature-item p { color: var(--text-dim); font-size: .88rem; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.tech-tags span {
  font-size: .74rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
}

.family-scroll { display: grid; grid-template-columns: 1fr; gap: 18px; }
.family-card {
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--depth-sm);
  backdrop-filter: blur(14px);
}
.family-card img { width: 100%; height: 210px; object-fit: cover; object-position: top; cursor: zoom-in; }
.family-card-body { padding: 18px 20px 22px; }
.family-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.family-card h4 { font-size: 1.05rem; color: var(--text); }
.family-card-cat { color: var(--text-faint); font-size: .76rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; display: block; }
.badge { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge-dev { background: rgba(251,113,133,.14); color: #fb7185; border: 1px solid rgba(251,113,133,.3); }
.badge-live { background: rgba(74,222,128,.14); color: #4ade80; border: 1px solid rgba(74,222,128,.3); }
.badge-current { background: rgba(43,127,209,.14); color: var(--accent); border: 1px solid rgba(43,127,209,.3); }
.family-card p { color: var(--text-dim); font-size: .88rem; margin-bottom: 12px; }
.family-card .work-detail-list { margin-bottom: 0; }

.mobile-apps-head { margin-top: 56px; margin-bottom: 32px; }
.mobile-apps-title { font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: var(--text); margin-top: 10px; }

/* ---------- Work: alternating 3D frames ---------- */
.work-row {
  display: flex; flex-direction: column; gap: 24px;
  padding: 36px 0; border-bottom: 1px solid var(--border);
}
.work-row:first-child { padding-top: 0; }
.work-row:last-of-type { border-bottom: none; }
.work-visual { perspective: var(--persp); }
.work-visual .browser-frame img { cursor: zoom-in; }
.thumb-row { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.thumb-row img { flex: 0 0 auto; height: 64px; width: auto; border-radius: 8px; border: 1px solid var(--border-strong); cursor: zoom-in; object-fit: cover; transition: transform .2s; }
.thumb-row img:hover { transform: translateY(-2px); }
.work-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.work-icon { display: inline-flex; color: var(--accent-2); }
.work-icon svg { width: 26px; height: 26px; }
.work-text h3 { font-size: 1.35rem; margin-bottom: 10px; letter-spacing: -.01em; color: var(--text); }
.work-text p { color: var(--text-dim); font-size: .96rem; margin-bottom: 14px; }
.work-text strong { color: var(--text); }
.work-detail-list { color: var(--text-dim); font-size: .88rem; margin-bottom: 16px; }
.work-detail-list li { position: relative; padding-left: 16px; margin-bottom: 7px; }
.work-detail-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }
.work-detail-list strong { color: var(--text); }
.work-link { color: var(--accent); font-size: .9rem; font-weight: 700; }
.work-link:hover { text-decoration: underline; }

/* ---------- Process ---------- */
.process-list { display: flex; flex-direction: column; }
.process-step { display: flex; gap: 20px; padding: 26px 0; border-top: 1px solid var(--border); }
.process-list .process-step:last-child { border-bottom: 1px solid var(--border); }
.process-num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--gradient-warm); color: #05060b; font-family: 'Sora', sans-serif; font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-accent);
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--text); }
.process-step ul { color: var(--text-dim); font-size: .88rem; }
.process-step li { position: relative; padding-left: 16px; margin-bottom: 6px; }
.process-step li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* ---------- About ---------- */
.about-text { color: var(--text-dim); font-size: 1.02rem; }
.about-text strong { color: var(--text); }
.about-text p + p { margin-top: 14px; }
.founder-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-top: 24px; box-shadow: var(--depth-sm);
  backdrop-filter: blur(14px);
}
.founder-photo { position: relative; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--accent); box-shadow: var(--glow-accent); }
.founder-photo img { position: absolute; width: 129%; height: 128.9%; left: -10.6%; top: 0; max-width: none; }
.founder-name { font-weight: 700; font-size: .92rem; color: var(--text); }
.founder-role { color: var(--text-dim); font-size: .8rem; }

.terminal-card {
  background: #0a0c14; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--depth-lg); margin-top: 36px; perspective: var(--persp);
}
.terminal-head { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #10131f; }
.term-dot { width: 10px; height: 10px; border-radius: 50%; }
.term-dot-red { background: #ff5f56; } .term-dot-yellow { background: #ffbd2e; } .term-dot-green { background: #27c93f; }
.terminal-title { margin-left: 8px; color: #8992a1; font-size: .7rem; font-family: 'JetBrains Mono', monospace; }
.terminal-body { padding: 20px 22px; font-family: 'JetBrains Mono', monospace; font-size: .78rem; line-height: 1.9; color: #cbd5e1; }
.terminal-body .prompt { color: var(--accent); margin-right: 8px; }
.terminal-body .out { color: #7d8798; margin: 0 0 12px 20px; }
.terminal-body .out-accent { color: #4ade80; }
.term-cursor { color: var(--accent); animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }

.quote-line {
  margin-top: 44px; text-align: center; font-family: 'Sora', sans-serif;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.4;
  color: var(--text);
}

/* ---------- Contact ---------- */
.section-contact { text-align: center; }
.section-contact .section-head { display: flex; flex-direction: column; align-items: center; }
.section-contact .section-sub { margin-left: auto; margin-right: auto; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px; text-align: left; }
.contact-card {
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--border); border-radius: var(--radius);
  backdrop-filter: blur(14px);
  padding: 20px; display: flex; align-items: center; gap: 14px;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--depth-md), var(--glow-accent); border-color: var(--border-strong); }
.contact-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: rgba(43,127,209,.14); border: 1px solid rgba(43,127,209,.28);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
}
.contact-icon-whatsapp { background: rgba(37,211,102,.15); border-color: rgba(37,211,102,.32); color: #25d366; }
.contact-label { color: var(--text-faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .8px; }
.contact-value { font-weight: 700; font-size: .95rem; word-break: break-word; color: var(--text); }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 1; text-align: center; padding: 32px var(--pad-x) 40px; color: var(--text-faint); font-size: .85rem; border-top: 1px solid var(--border); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(2, 3, 6, .94);
  display: none; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox-content { display: flex; flex-direction: column; align-items: center; max-width: min(92vw, 900px); max-height: 92vh; }
.lightbox img { max-width: min(92vw, 900px); max-height: 74vh; width: auto; border-radius: 12px; box-shadow: 0 20px 60px -10px rgba(0,0,0,.8); }
.lightbox-info { margin-top: 16px; text-align: center; color: #fff; max-width: 700px; }
.lightbox-info h4 { font-size: 1.05rem; margin-bottom: 4px; }
.lightbox-info p { font-size: .86rem; color: rgba(255,255,255,.68); margin-bottom: 8px; }
.lightbox-counter { font-family: 'JetBrains Mono', monospace; font-size: .75rem; color: rgba(255,255,255,.45); letter-spacing: 1px; }
.lightbox-close { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 1.7rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }

/* ---------- Experience theme (video-inspired: technical, minimal, heavier 3D) ---------- */
:root[data-theme="experience"] .nav-link,
:root[data-theme="experience"] .mobile-menu a:not(.mobile-cta) {
  font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem;
}
:root[data-theme="experience"] .eyebrow-pill {
  font-family: 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem;
}
:root[data-theme="experience"] .section-tag { font-family: 'JetBrains Mono', monospace; letter-spacing: .18em; }
:root[data-theme="experience"] .hero-title {
  text-transform: uppercase; font-size: clamp(2.4rem, 9.5vw, 5.8rem); letter-spacing: -.02em;
}
:root[data-theme="experience"] .section-title { text-transform: uppercase; letter-spacing: -.02em; }
:root[data-theme="experience"] body::before { opacity: .85; }
:root[data-theme="experience"] .logo { font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; }

/* ---------- Nebula theme (video-inspired: warm/cool plasma ring, colorful starfield) ---------- */
:root[data-theme="nebula"] body::before {
  opacity: .9;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,140,110,.7), transparent),
    radial-gradient(1px 1px at 24% 68%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 38% 12%, rgba(120,200,255,.7), transparent),
    radial-gradient(1px 1px at 52% 82%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 66% 34%, rgba(255,140,110,.55), transparent),
    radial-gradient(1px 1px at 78% 58%, rgba(120,200,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 88% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 94% 72%, rgba(120,200,255,.5), transparent);
}
:root[data-theme="nebula"] .hero-title .grad { background: linear-gradient(135deg, #FF6B4A, #4AC9FF); -webkit-background-clip: text; background-clip: text; }

/* ---------- Light theme (fully light, every section — no dark base at all) ---------- */
:root[data-theme="light"] {
  --bg: var(--l-bg);
  --bg-alt: #F1F2F6;
  --text: var(--l-text);
  --text-dim: var(--l-text-dim);
  --text-faint: var(--l-text-faint);
  --surface: var(--l-surface);
  --surface-strong: var(--l-surface-strong);
  --border: var(--l-border);
  --border-strong: var(--l-border-strong);
}
:root[data-theme="light"] body::before { opacity: .12; }
:root[data-theme="light"] .glow-1, :root[data-theme="light"] .glow-2, :root[data-theme="light"] .glow-3 { opacity: .35; }
:root[data-theme="light"] .hero-canvas { display: none; }
:root[data-theme="light"] .navbar { background: rgba(250,250,248,.75); }
:root[data-theme="light"] .mobile-menu { background: #FAFAF8; }
:root[data-theme="light"] .mobile-menu a { color: var(--l-text); }
:root[data-theme="light"] .grid-floor { opacity: .3; }
:root[data-theme="light"] .svc-card,
:root[data-theme="light"] .family-card,
:root[data-theme="light"] .contact-card,
:root[data-theme="light"] .founder-card {
  background: linear-gradient(165deg, rgba(11,13,20,.035), rgba(11,13,20,.012));
  box-shadow: 0 2px 6px rgba(17,19,28,.06), 0 1px 0 rgba(255,255,255,.6) inset;
}
:root[data-theme="light"] .theme-menu { background: rgba(255,255,255,.98); border-color: var(--l-border-strong); }
:root[data-theme="light"] .theme-option { color: var(--l-text-dim); }
:root[data-theme="light"] .theme-option:hover { background: rgba(11,13,20,.05); }
:root[data-theme="light"] .theme-option.active { color: var(--l-text); background: rgba(43,127,209,.1); }

/* ---------- Voyage theme (video-inspired: pure-black cosmic scroll journey — aurora
   portal hero, particle terrain with a gravity well, a vortex divider, and an orbiting
   galaxy scene behind the app family. Plain floating pill nav, numbered kickers, no
   filled gradient buttons — glass + glow instead, closer to the reference video.) ---------- */
:root[data-theme="voyage"] {
  --bg: #000000;
  --bg-alt: #030305;
  --border: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.22);
}
:root[data-theme="voyage"] body::before {
  opacity: 1;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 15%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 18% 62%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 30% 8%, rgba(255,140,150,.6), transparent),
    radial-gradient(1px 1px at 44% 78%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 58% 28%, rgba(130,170,255,.65), transparent),
    radial-gradient(1px 1px at 68% 55%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 80% 12%, rgba(120,220,255,.6), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 96% 70%, rgba(255,140,150,.5), transparent),
    radial-gradient(1px 1px at 12% 90%, rgba(255,255,255,.45), transparent);
}
:root[data-theme="voyage"] .grid-floor { display: none; }
:root[data-theme="voyage"] .glow-1 { background: radial-gradient(circle, rgba(255,90,110,.28), transparent 70%); }
:root[data-theme="voyage"] .glow-2 { background: radial-gradient(circle, rgba(90,190,255,.26), transparent 70%); }
:root[data-theme="voyage"] .glow-3 { background: radial-gradient(circle, rgba(160,110,255,.22), transparent 70%); }

/* Floating pill nav, not a full-width bar */
:root[data-theme="voyage"] .navbar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 24px);
  background: rgba(8,8,14,.65); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 10px 8px 16px; gap: 28px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.85), 0 0 26px -10px rgba(140,150,255,.35);
}
:root[data-theme="voyage"] .logo { font-size: .98rem; }
:root[data-theme="voyage"] .nav-link { font-family: 'JetBrains Mono', monospace; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
:root[data-theme="voyage"] .nav-link::after { display: none; }
:root[data-theme="voyage"] .nav-link.active, :root[data-theme="voyage"] .nav-link:hover { color: #fff; }
:root[data-theme="voyage"] body { padding-top: 76px; }
:root[data-theme="voyage"] .mobile-menu { top: 0; }

/* Glass pill buttons — border glow instead of a filled gradient block */
:root[data-theme="voyage"] .btn-primary {
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 0 1px rgba(255,255,255,.5), 0 0 28px -8px rgba(150,170,255,.55);
}
:root[data-theme="voyage"] .btn-primary:hover { background: rgba(255,255,255,.14); box-shadow: 0 0 1px rgba(255,255,255,.6), 0 0 36px -6px rgba(150,170,255,.7); }
:root[data-theme="voyage"] .btn-ghost {
  background: none; border: none; color: var(--text-dim); padding-left: 6px; padding-right: 6px;
}
:root[data-theme="voyage"] .btn-ghost:hover { color: #fff; background: none; }

/* Numbered plain-text kickers ("01 — SERVICES") instead of pill badges */
:root[data-theme="voyage"] .section-tag {
  display: block; background: none; border: none; padding: 0; margin-bottom: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
:root[data-theme="voyage"] .eyebrow-pill {
  background: rgba(255,255,255,.05); border-color: var(--border-strong);
  font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; font-size: .7rem;
}

/* Plain white headline — the video's only colour is in the scene behind it */
:root[data-theme="voyage"] .hero-title { font-weight: 750; letter-spacing: -.035em; }
:root[data-theme="voyage"] .hero-title .grad { background: none; -webkit-background-clip: unset; background-clip: unset; color: var(--text); }
:root[data-theme="voyage"] .section-title { font-weight: 750; }

@media (min-width: 960px) {
  :root[data-theme="voyage"] .navbar { padding: 10px 12px 10px 22px; gap: 40px; }
  :root[data-theme="voyage"] .nav-link { font-size: .78rem; }
}

/* ---- The journey: one pinned, scroll-driven particle scene replacing the old hero ----
   `.journey-wrap` is tall (scroll runway); `.journey-stage` pins to the viewport for its
   whole height via `position: sticky` while the particle shape and the active chapter of
   copy both change as a function of scroll position within the wrapper. See initJourneyScene()
   in script.js for the shape-morph engine driving the canvas. */
/* 380vh keeps the whole morph reachable inside ~2.4 screen-heights of scroll (85% dwell-adjusted) —
   the earlier 600vh runway needed 4+ screen-heights just to reach the galaxy at t=0.86, which most
   people never scroll far enough to see at all. */
:root[data-theme="voyage"] .journey-wrap { position: relative; height: 380vh; }
:root[data-theme="voyage"] .journey-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
@supports (height: 100dvh) {
  /* On mobile, 100vh is sized for the browser chrome fully hidden — taller than what's actually
     visible while the address bar is showing. That mismatch between the CSS-sized sticky stage
     and the JS's live window.innerHeight reads as a dead scroll gap right at the start, until the
     chrome finishes collapsing and the two numbers agree. 100dvh tracks the real visible viewport
     continuously, so the pin stays aligned with scroll from the very first pixel. */
  :root[data-theme="voyage"] .journey-stage { height: 100dvh; }
}
:root[data-theme="voyage"] .journey-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

:root[data-theme="voyage"] .journey-boot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
:root[data-theme="voyage"] .journey-boot.is-active { opacity: 1; }

:root[data-theme="voyage"] .journey-chapter {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
  opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
/* Dark vignette behind the copy so it stays readable over the particle shape — sized per chapter
   rather than one blanket rule, because a vignette strong/wide enough to fix the hero's dense
   sphere was, at the same size, smothering the much sparser galaxy/dune shapes underneath their
   own text (the shape is the whole point of those two chapters, so it can't just get dimmed out). */
:root[data-theme="voyage"] .chapter-hero {
  background: radial-gradient(ellipse 60% 46% at 50% 50%, rgba(4,5,12,.6) 0%, rgba(4,5,12,.3) 45%, rgba(4,5,12,0) 75%);
}
:root[data-theme="voyage"] .chapter-dune,
:root[data-theme="voyage"] .chapter-galaxy {
  background: radial-gradient(ellipse 42% 30% at 50% 46%, rgba(4,5,12,.42) 0%, rgba(4,5,12,.18) 50%, rgba(4,5,12,0) 78%);
}
:root[data-theme="voyage"] .journey-chapter.is-active { opacity: 1; pointer-events: auto; }
:root[data-theme="voyage"] .journey-chapter .section-tag { margin-bottom: 14px; }
:root[data-theme="voyage"] .journey-chapter h1,
:root[data-theme="voyage"] .journey-chapter h2 {
  font-family: 'Sora', sans-serif; font-weight: 750; letter-spacing: -.03em; line-height: 1.06;
  font-size: clamp(2rem, 6.2vw, 3.5rem); color: var(--text); max-width: 800px;
  text-shadow: 0 2px 28px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.9);
}
:root[data-theme="voyage"] .journey-chapter p {
  color: var(--text-dim); max-width: 540px; margin: 16px auto 0; font-size: clamp(.95rem, 2vw, 1.06rem);
  text-shadow: 0 1px 12px rgba(0,0,0,.8);
}
:root[data-theme="voyage"] .journey-cta { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

:root[data-theme="voyage"] .journey-stat {
  position: absolute; z-index: 2; opacity: 0; transition: opacity .5s ease;
  background: rgba(10,10,18,.55); border: 1px solid var(--border-strong); border-radius: 14px;
  backdrop-filter: blur(14px); padding: 14px 18px; max-width: 210px; pointer-events: none;
}
:root[data-theme="voyage"] .journey-stat.is-active { opacity: 1; }
:root[data-theme="voyage"] .journey-stat .stat-num { display: block; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.6rem; color: #fff; }
:root[data-theme="voyage"] .journey-stat .stat-label { display: block; font-size: .76rem; color: var(--text-dim); margin-top: 2px; }
:root[data-theme="voyage"] .stat-left { left: 5%; top: 50%; transform: translateY(-50%); }
:root[data-theme="voyage"] .stat-right { right: 5%; top: 42%; }
:root[data-theme="voyage"] .stat-center { left: 50%; top: 20%; transform: translateX(-50%); text-align: center; }

@media (max-width: 699px) {
  /* stat cards would overlap the shape on a narrow screen — keep the morph + headline, drop the cards */
  :root[data-theme="voyage"] .journey-stat { display: none; }
  :root[data-theme="voyage"] .journey-wrap { height: 340vh; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="voyage"] .journey-wrap { height: auto; }
  :root[data-theme="voyage"] .journey-stage { position: relative; height: 90vh; }
  :root[data-theme="voyage"] .journey-canvas,
  :root[data-theme="voyage"] .journey-boot,
  :root[data-theme="voyage"] .journey-stat { display: none; }
  :root[data-theme="voyage"] .journey-chapter { position: relative; opacity: 1; pointer-events: auto; }
  :root[data-theme="voyage"] .journey-chapter:not(.chapter-hero) { display: none; }
}

/* ---------- Scroll-reveal engine ---------- */
[data-reveal] { opacity: 0; transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1), filter .7s ease; }
[data-reveal="up"] { transform: translateY(36px); }
[data-reveal="scale"] { transform: scale(.92); filter: blur(6px); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="tilt"] { transform: perspective(1000px) rotateX(22deg) translateY(50px) scale(.94); filter: blur(4px); }
[data-reveal].is-visible { opacity: 1; transform: none; filter: blur(0); }

/* ---------- Desktop / tablet enhancements ---------- */
@media (min-width: 700px) {
  .hero-cta { flex-direction: row; max-width: none; justify-content: center; }
  .hero-cta .btn { width: auto; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .nav-links { display: flex; align-items: center; gap: 2rem; }
  .navbar .nav-cta { display: inline-flex; width: auto; padding: 11px 22px; font-size: .88rem; }
  .nav-toggle { display: none; }

  .hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; text-align: left; align-items: center; }
  .eyebrow-pill { margin-left: 0; }
  .hero-desc { margin-left: 0; }
  .hero-cta { justify-content: flex-start; margin-left: 0; }
  .hero-caps { justify-content: flex-start; }
  .hero-visual { margin: 0; max-width: none; }
  .hero-visual:hover .tilt-3d { transform: rotateX(4deg) rotateY(-4deg); }

  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .svc-card:hover { transform: translateY(-8px) rotateX(4deg); }

  .spotlight { flex-direction: row; align-items: center; gap: 56px; }
  .spotlight-text { flex: 1; }
  .spotlight-visual { flex: 1; order: 0; }

  .family-scroll { grid-template-columns: repeat(3, 1fr); }

  .work-row { flex-direction: row; align-items: center; gap: 56px; }
  .work-row:nth-child(even) { flex-direction: row-reverse; }
  .work-visual, .work-text { flex: 1; }

  .process-list { flex-direction: row; }
  .process-step { flex-direction: column; border-top: none; border-left: 1px solid var(--border); padding: 0 24px; }
  .process-list .process-step:last-child { border-bottom: none; }
  .process-num { margin-bottom: 18px; }

  .about-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
  .founder-card, .terminal-card { margin-top: 0; }
  .about-side { display: flex; flex-direction: column; gap: 24px; }

  .contact-grid { grid-template-columns: repeat(3, 1fr); max-width: 780px; margin: 36px auto 0; }
  .contact-card:hover { transform: translateY(-6px) rotateX(4deg); }
}

@media (min-width: 1200px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (hover: none) {
  .svc-card:hover, .contact-card:hover, .hero-visual:hover .tilt-3d { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .float-3d, .grid-floor, .glow, .marquee-track, .hero-phone-frame, .hero-cap { animation: none; }
  [data-reveal] { transition: opacity .3s ease; }
}