/* ==========================================================================
   SHREYA INFRASOLUTIONS — "Depth Engineering" 3D theme layer
   Loaded after site.css. Re-tunes the tokens (midnight ink, flame + ember) and adds:
   1 tokens · 2 preloader cube · 3 floating dock nav · 4 3D reveals & tilt
   5 home hero (WebGL city) · 6 service orbit · 7 exploded view · 8 flip tiles
   9 bento / clients plane / testimonials stack / CTA · 10 inner pages · 11 footer
   12 responsive · 13 reduced motion
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --ink: #07080B;
  --ink-2: #0C0E13;
  --ink-3: #13161D;
  --ink-4: #1C2029;
  --paper: #F4F1EB;
  --paper-2: #E9E4DA;
  --flame: #F76406;
  --orange: #F76406;
  --amber: #FFB04A;
  --ember: #FF3D00;
  --grad: linear-gradient(120deg, #FF3D00 0%, #F76406 35%, #FF9A3D 70%, #FFD08A 100%);
  --grad-deep: linear-gradient(140deg, #B53A00 0%, #F76406 60%, #FFB04A 100%);
  --glass: rgba(18, 21, 28, .55);
  --glass-line: rgba(255, 255, 255, .12);
  --f-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --depth: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 60px -30px rgba(0, 0, 0, .7), 0 18px 36px -18px rgba(247, 100, 6, .25);
}
body.d3 { background: var(--paper); }
h1, h2, h3 { letter-spacing: -0.035em; }
h4 { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.01em; }
.section-title { letter-spacing: -0.04em; line-height: 1.04; }
.sec.dark { background: radial-gradient(1200px 600px at 85% -10%, rgba(247, 100, 6, .12), transparent 60%), var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* ── 2. PRELOADER: a cube assembling ───────────────────────────────────── */
.pl-cube { width: 56px; height: 56px; position: relative; transform-style: preserve-3d; animation: pl-spin 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.pl-cube i { position: absolute; inset: 0; border: 1.5px solid var(--flame); background: rgba(247, 100, 6, .08); box-shadow: 0 0 24px rgba(247, 100, 6, .4) inset; }
.pl-cube i:nth-child(1) { transform: translateZ(28px); }
.pl-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(28px); }
.pl-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(28px); }
.pl-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(28px); }
.pl-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(28px); }
.pl-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(28px); }
@keyframes pl-spin { 0% { transform: rotateX(-25deg) rotateY(0); } 100% { transform: rotateX(-25deg) rotateY(360deg); } }
.preloader-inner { perspective: 600px; }

/* ── 3. FLOATING DOCK NAV ─────────────────────────────────────────────── */
.site-header.dock { padding-top: 14px; }
.site-header.dock .nav { border: 0; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.site-header.dock .nav-inner {
  min-height: 70px; gap: 14px; padding: 0 10px 0 22px; max-width: calc(var(--wrap) - 2 * var(--gutter));
  border-radius: 999px; border: 1px solid transparent; transition: background .45s, border-color .45s, box-shadow .45s, min-height .45s var(--ease);
}
.site-header.dock.scrolled .nav-inner, .site-header.dock:hover .nav-inner {
  background: rgba(10, 12, 16, .7); border-color: var(--glass-line);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.site-header.dock.scrolled .nav-inner { min-height: 62px; }
.site-header.dock .nav-logo img { height: 40px; }
.site-header.dock.scrolled .nav-logo img { height: 34px; }
.nav-link { font-size: 14px; padding: 9px 14px; }
.nav-link:hover { background: rgba(255, 255, 255, .06); }
.nav-login {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--glass-line); color: var(--on-ink); font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.nav-login .ico { color: var(--amber); font-size: 15px; }
.nav-login:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 176, 74, .5); transform: translateY(-1px); }
.nav-cta { height: 44px; }
/* dropdowns unfold in 3D */
.has-drop { perspective: 1200px; }
.drop { transform: translate(-50%, 6px) rotateX(-18deg); transform-origin: top center; background: rgba(12, 14, 19, .92); border-color: var(--glass-line); }
.has-drop:hover .drop, .has-drop:focus-within .drop { transform: translate(-50%, 0) rotateX(0); }
.mega-item { transition: background .25s, transform .4s var(--ease); }
.mega-item:hover { transform: translateZ(0) translateX(4px); }
/* mobile menu: links arrive in 3D */
.mobile-menu { background: radial-gradient(800px 500px at 100% 0, rgba(247, 100, 6, .18), transparent 60%), var(--ink); }
.mm-links { perspective: 900px; }
.mm-links > a { transform-origin: left center; }
.mobile-menu:not(.open) .mm-links > a { transform: rotateY(35deg) translateX(-30px); opacity: 0; }

/* ── 4. 3D REVEALS & TILT ─────────────────────────────────────────────── */
.js .fade-up:not(.visible), .js [data-reveal]:not(.visible):not([data-reveal="left"]):not([data-reveal="right"]):not([data-reveal="scale"]) {
  transform: perspective(1100px) translateY(46px) rotateX(14deg);
}
.js [data-reveal="scale"]:not(.visible) { transform: perspective(1100px) scale(.9) rotateX(10deg); }
.js .fade-up, .js [data-reveal] { transform-origin: 50% 100%; }

.tilt, .tilt-soft, .spot { transform-style: preserve-3d; will-change: transform; }
.tilt-on {
  transform: perspective(1000px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(6px) !important;
  transition: transform .18s ease-out, box-shadow .4s, border-color .4s !important;
}
.tilt::after, .spot.tilt-on::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .14), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.tilt.tilt-on::after, .spot.tilt-on::after { opacity: 1; }
.tilt { position: relative; }

/* ── 5. HOME HERO: WebGL city ─────────────────────────────────────────── */
.h3d { position: relative; min-height: 100svh; display: flex; align-items: stretch; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--on-ink); }
.h3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; opacity: 0; transition: opacity 1.6s var(--ease); cursor: crosshair; }
.h3d-canvas.is-live { opacity: 1; }
.h3d-fallback {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(700px 420px at 70% 60%, rgba(247, 100, 6, .35), transparent 70%),
    radial-gradient(600px 400px at 20% 30%, rgba(61, 123, 255, .18), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--ink);
}
.h3d-vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 8, 11, .92) 0%, rgba(7, 8, 11, .55) 38%, rgba(7, 8, 11, 0) 65%),
              linear-gradient(0deg, rgba(7, 8, 11, .95) 0%, rgba(7, 8, 11, 0) 35%),
              linear-gradient(180deg, rgba(7, 8, 11, .7) 0%, rgba(7, 8, 11, 0) 22%);
}
.h3d-inner { display: flex; flex-direction: column; justify-content: flex-end; gap: 34px; padding-top: 140px; padding-bottom: 36px; pointer-events: none; }
.h3d-inner a, .h3d-inner button, .h3d-stat { pointer-events: auto; }
.h3d-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.h3d-title { font-size: clamp(2.5rem, 6.4vw, 6.2rem); line-height: .98; letter-spacing: -0.05em; font-weight: 600; max-width: 13ch; perspective: 900px; }
.h3d-line { display: block; overflow: hidden; padding-bottom: .06em; }
.h3d-line > span { display: inline-block; animation: h3d-rise 1.3s var(--ease) both; }
.h3d-line:nth-child(2) > span { animation-delay: .12s; }
.h3d-line:nth-child(3) > span { animation-delay: .24s; }
@keyframes h3d-rise { from { transform: translateY(105%) rotateX(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.h3d-title em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h3d-rot { position: relative; display: inline-grid !important; transform-style: preserve-3d; animation: none !important; }
.h3d-rot b {
  grid-area: 1 / 1; font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: rotateX(-90deg) translateZ(.4em); transform-origin: 50% 50% -.4em; transition: transform .9s var(--ease), opacity .6s;
  backface-visibility: hidden;
}
.h3d-rot b.on { opacity: 1; transform: none; }
.h3d-rot b.off { opacity: 0; transform: rotateX(90deg) translateZ(.4em); }
.h3d-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: end; }
.h3d-lead { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.7; color: var(--on-ink-2); max-width: 50ch; }
.h3d-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.h3d-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; perspective: 1000px; }
.h3d-stat {
  padding: 20px 18px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--depth);
  transform: rotateX(8deg); transition: transform .6s var(--ease), border-color .4s;
}
.h3d-stat:hover { border-color: rgba(247, 100, 6, .5); }
.h3d-stat .num { font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 600; letter-spacing: -0.04em; color: #fff; }
.h3d-stat sup { color: var(--flame); font-size: .55em; }
.h3d-stat .lbl { font-size: 12.5px; color: var(--on-ink-3); margin-top: 4px; line-height: 1.35; }
.h3d-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.h3d-hint { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-3); }
.h3d-hint i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--flame); position: relative; }
.h3d-hint i::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--flame); animation: pulse-ring 1.8s infinite; }
.no-webgl .h3d-hint { display: none; }

/* ── 6. SERVICE ORBIT (CSS 3D ring) ───────────────────────────────────── */
.orbit-sec { overflow: hidden; }
.orbit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; margin-top: 30px; }
.orbit-stage { position: relative; height: 520px; perspective: 1500px; perspective-origin: 50% 30%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.orbit-stage:active { cursor: grabbing; }
.orbit-ring { position: absolute; left: 50%; top: 40px; width: 250px; height: 340px; margin-left: -125px; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.orbit-ring.dragging { transition: none; }
.orbit-card {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 22px; color: #fff; background: var(--ink-3); border: 1px solid var(--glass-line); backface-visibility: hidden;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9); transition: filter .8s, opacity .8s, border-color .5s; filter: brightness(.45) saturate(.6);
}
.orbit-card.front { filter: none; border-color: rgba(247, 100, 6, .6); box-shadow: 0 40px 80px -30px rgba(247, 100, 6, .55); }
.orbit-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.08); transition: transform 1.2s var(--ease); pointer-events: none; }
.orbit-card.front:hover img { transform: scale(1.16); }
.orbit-card-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 8, 11, .1) 20%, rgba(7, 8, 11, .92) 100%); }
.orbit-card-ico { position: absolute; top: 18px; left: 18px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: rgba(247, 100, 6, .9); box-shadow: 0 10px 30px -8px rgba(247, 100, 6, .8); }
.orbit-card-num { position: absolute; top: 22px; right: 20px; font-family: var(--f-mono); font-size: 12px; color: rgba(255, 255, 255, .7); }
.orbit-card strong { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.orbit-floor { position: absolute; left: 50%; bottom: 10px; width: 760px; height: 760px; margin-left: -380px; transform: rotateX(82deg); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(247, 100, 6, .35), rgba(247, 100, 6, .06) 60%, transparent 70%),
              repeating-radial-gradient(circle, transparent 0 38px, rgba(255, 255, 255, .06) 38px 39px); }
.orbit-ctrl { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.orbit-ctrl button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--on-ink); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.orbit-ctrl button:hover { background: var(--flame); border-color: var(--flame); }
.orbit-count { font-family: var(--f-mono); font-size: 13px; color: var(--on-ink-3); min-width: 64px; text-align: center; }
.orbit-list { list-style: none; border-top: 1px solid var(--line); }
.orbit-item { border-bottom: 1px solid var(--line); }
.orbit-pick { width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 4px; text-align: left; font-weight: 700; font-size: 15px; color: var(--on-ink-3); transition: color .3s, padding .4s var(--ease); min-height: 44px; }
.orbit-pick span { font-family: var(--f-mono); font-size: 11.5px; color: var(--flame); }
.orbit-pick:hover { color: var(--on-ink); }
.orbit-item.active .orbit-pick { color: var(--on-ink); padding-left: 12px; }
.orbit-item:not(.active) .orbit-info { visibility: hidden; }
.orbit-info { display: block; max-height: 0; overflow: hidden; transition: max-height .7s var(--ease); padding: 0 4px 0 12px; }
.orbit-item.active .orbit-info { max-height: 340px; }
.orbit-info p { color: var(--on-ink-2); font-size: 14.5px; line-height: 1.65; }
.orbit-info .svc-panel-tags { margin: 16px 0 14px; }
.orbit-info .link-arrow { margin-bottom: 20px; }

/* ── 7. EXPLODED VIEW ─────────────────────────────────────────────────── */
.explode { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.explode-sticky { position: sticky; top: 90px; height: min(80vh, 640px); display: grid; place-items: center; perspective: 1600px; }
.explode-scene { --p: 0; position: relative; width: min(380px, 70vw); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-42deg); }
.ex-plate {
  position: absolute; inset: 0; border-radius: 28px; transform-style: preserve-3d;
  transform: translateZ(calc(var(--k) * (14px + var(--p) * 88px) - 60px));
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(233, 228, 218, .85));
  border: 1px solid rgba(17, 19, 23, .12); box-shadow: 0 30px 50px -20px rgba(17, 19, 23, .35);
  transition: background .5s, box-shadow .5s, transform .2s linear;
}
.ex-plate:nth-child(1) { background: linear-gradient(135deg, #fff, #ECE7DE); }
.ex-plate:nth-child(1)::before { content: ''; position: absolute; inset: 16px; border-radius: 18px; background-image: linear-gradient(rgba(247, 100, 6, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 100, 6, .35) 1px, transparent 1px); background-size: 26px 26px; }
.ex-plate:nth-child(2)::before { content: ''; position: absolute; inset: 26px; border-radius: 16px; background: repeating-linear-gradient(45deg, #c9c1b3 0 10px, #ddd6ca 10px 20px); }
.ex-plate:nth-child(3)::before { content: ''; position: absolute; inset: 20px; border-radius: 16px; background:
  linear-gradient(90deg, transparent 47%, var(--flame) 47% 53%, transparent 53%), linear-gradient(0deg, transparent 47%, #3d7bff 47% 53%, transparent 53%),
  radial-gradient(circle at 25% 25%, var(--amber) 0 8px, transparent 9px), radial-gradient(circle at 75% 75%, var(--amber) 0 8px, transparent 9px), #1a1f29; }
.ex-plate:nth-child(4) { background: linear-gradient(135deg, rgba(247, 100, 6, .92), rgba(255, 154, 61, .85)); border-color: rgba(255, 255, 255, .4); }
.ex-plate:nth-child(4)::before { content: ''; position: absolute; inset: 24px; border-radius: 14px; border: 2px dashed rgba(255, 255, 255, .7); }
.ex-plate.on { box-shadow: 0 0 0 2px var(--flame), 0 40px 70px -20px rgba(247, 100, 6, .55); }
.ex-plate-label {
  position: absolute; left: 100%; top: 50%; margin-left: 70px; white-space: nowrap; transform: rotateZ(42deg) rotateX(-58deg); transform-origin: left center;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
  padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-dark); opacity: calc(var(--p) * 1.4 - .2);
}
.ex-plate.on .ex-plate-label { background: var(--flame); color: #fff; border-color: var(--flame); }
.ex-plate i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, .5), transparent 40%); pointer-events: none; }
.ex-core { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; transform: translateZ(-60px); }
.ex-core::after { content: ''; position: absolute; left: -1px; bottom: 0; width: 3px; height: calc(60px + var(--p) * 300px); transform-origin: bottom; transform: rotateX(-90deg); background: linear-gradient(var(--flame), transparent); }
.explode-steps { list-style: none; display: grid; gap: 14px; margin: 34px 0 36px; }
.ex-step { display: flex; gap: 18px; padding: 22px; border-radius: 22px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .6); transition: background .5s, border-color .5s, transform .6s var(--ease), box-shadow .5s; }
.ex-step.on { background: #fff; border-color: rgba(247, 100, 6, .45); box-shadow: var(--shadow); transform: translateX(10px); }
.ex-step-ico { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 20px; background: var(--flame-soft); color: var(--flame); transition: background .4s, color .4s, transform .5s var(--ease); }
.ex-step.on .ex-step-ico { background: var(--flame); color: #fff; transform: rotate(-8deg); }
.ex-step-num { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--flame); }
.ex-step h3 { font-size: 1.15rem; margin: 4px 0 6px; letter-spacing: -0.02em; }
.ex-step p { font-size: 14.5px; color: var(--text-2); }

/* ── 8. FLIP TILES ────────────────────────────────────────────────────── */
.flip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.flip { perspective: 1000px; height: 250px; text-align: left; color: inherit; }
.flip-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3, 1.3, .4, 1); }
.flip:hover .flip-in, .flip:focus-visible .flip-in, .flip.flipped .flip-in { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--glass-line); }
.flip-face.front { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: var(--depth); justify-content: space-between; }
.flip-face.back { transform: rotateY(180deg); background: var(--grad-deep); color: #fff; justify-content: center; gap: 16px; font-size: 15px; line-height: 1.55; font-weight: 600; }
.flip-face.back .ico { font-size: 34px; }
.flip-num { font-family: var(--f-display); font-size: clamp(2.6rem, 4.4vw, 3.8rem); font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1; }
.flip-num sup { color: var(--flame); font-size: .5em; }
.flip-lbl { color: var(--on-ink-2); font-size: 14.5px; font-weight: 600; }
.flip-bar { display: block; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.flip-bar i { display: block; height: 100%; width: var(--w); background: var(--grad); }

/* ── 9. BENTO · CLIENT PLANE · TESTIMONIAL STACK · CTA ────────────────── */
.bento-3d { perspective: 1400px; }
.bento-3d .bento-card { transform-style: preserve-3d; }
.bento-3d .bento-card:hover { transform: translateY(-6px); }
.bento-3d .bento-ico { transform: translateZ(30px); }

.clients-3d { overflow: hidden; }
.plane-3d { perspective: 1100px; }
.plane-3d .marquee { transform: rotateX(28deg) rotateZ(-4deg) scale(1.08); transform-origin: 50% 50%; }
.plane-3d .marquee.reverse { transform: rotateX(28deg) rotateZ(-4deg) scale(1.08) translateY(6px); }
.plane-3d .logo-pill { box-shadow: 0 24px 34px -22px rgba(17, 19, 23, .45); }

.testi-3d .testi-x-stage { perspective: 1400px; min-height: 380px; }
.testi-3d .testi-x-quote { font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.2rem, 1.9vw, 1.65rem); line-height: 1.5; letter-spacing: -0.01em; }
.testi-3d .testi-x-slide {
  padding: clamp(28px, 4vw, 46px); border-radius: 30px; background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  border: 1px solid var(--glass-line); box-shadow: var(--depth); backdrop-filter: blur(10px);
  transform: translate3d(40px, 30px, -160px) rotateY(-14deg); transform-origin: left center;
  transition: opacity .8s var(--ease), transform 1s var(--ease);
}
.testi-3d .testi-x-slide.active { transform: none; }
.testi-3d .testi-x-stage::before, .testi-3d .testi-x-stage::after {
  content: ''; position: absolute; inset: 0; border-radius: 30px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .02);
  transform: translate3d(22px, 22px, -60px); z-index: -1;
}
.testi-3d .testi-x-stage::after { transform: translate3d(44px, 44px, -120px); opacity: .5; }

.cta-3d { position: relative; overflow: hidden; transform-style: preserve-3d; }
.cta-3d-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; perspective: 800px; }
.cta-3d-shapes i { position: absolute; display: block; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 18px; background: rgba(255, 255, 255, .06); animation: cta-float 10s ease-in-out infinite; }
.cta-3d-shapes .s1 { width: 120px; height: 120px; right: 8%; top: 14%; transform: rotateX(50deg) rotateZ(30deg); }
.cta-3d-shapes .s2 { width: 70px; height: 70px; right: 24%; bottom: 12%; border-radius: 50%; animation-delay: -3s; }
.cta-3d-shapes .s3 { width: 180px; height: 180px; left: -40px; bottom: -60px; transform: rotateX(60deg); animation-delay: -6s; }
@keyframes cta-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -18px; rotate: 12deg; } }
.cta-3d > *:not(.cta-3d-shapes) { position: relative; z-index: 1; }

.form-3d { box-shadow: 0 50px 90px -40px rgba(17, 19, 23, .45); }

/* ── 10. INNER PAGES ──────────────────────────────────────────────────── */
.page-header { perspective: 1200px; }
.page-header .ph-3d { position: absolute; inset: auto 0 0 0; width: 100%; height: 70%; z-index: -1; display: block; opacity: 0; transition: opacity 1.4s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
.page-header .ph-3d.is-live { opacity: 1; }
.page-header h1 { font-size: clamp(2.3rem, 6vw, 5.6rem); max-width: 16ch; }
.page-header-inner { transform-origin: 50% 100%; will-change: transform, opacity; }
/* every content card gets real depth on hover */
.spot { transition: transform .6s var(--ease), box-shadow .5s, border-color .4s; }
.spot.tilt-on { box-shadow: 0 40px 70px -35px rgba(17, 19, 23, .45); }
.dark .spot.tilt-on, .sec.dark .spot.tilt-on { box-shadow: 0 40px 70px -35px rgba(0, 0, 0, .8), 0 0 0 1px rgba(247, 100, 6, .25); }
img.reveal-img, .intro-img, .overview-img { transition: transform 1.2s var(--ease); }

/* ── 11. FOOTER ───────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); }
.footer-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.5s var(--ease); pointer-events: none; }
.footer-3d.is-live { opacity: .55; }
.footer-cta-btn { box-shadow: 0 30px 60px -20px rgba(247, 100, 6, .7); }

/* ── 11b. FULL-PAGE 3D (every section on every page; layers added by site-3d.js) ── */
.d3s { position: relative; isolation: isolate; transform-origin: 50% 0; will-change: transform; }
.d3-amb { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; perspective: 900px; }
.amb-grid {
  position: absolute; inset: -60px; opacity: .55;
  background-image: linear-gradient(var(--amb-line) 1px, transparent 1px), linear-gradient(90deg, var(--amb-line) 1px, transparent 1px);
  background-size: 60px 60px; animation: amb-drift 28s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%);
  transform: translateY(calc(var(--sp, 0) * -40px));
}
@keyframes amb-drift { to { background-position: 60px 60px, 60px 60px; } }
.amb-orb { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, var(--amb-glow), transparent); filter: blur(30px);
  transform: translateY(calc(var(--sp, 0) * -120px)); animation: amb-breathe 9s ease-in-out infinite; }
@keyframes amb-breathe { 50% { scale: 1.18; opacity: .7; } }
.d3-dark { --amb-line: rgba(255, 255, 255, .045); --amb-glow: rgba(247, 100, 6, .22); --amb-edge: rgba(247, 100, 6, .55); --amb-fill: rgba(247, 100, 6, .05); }
.d3-light { --amb-line: rgba(17, 19, 23, .05); --amb-glow: rgba(247, 100, 6, .13); --amb-edge: rgba(201, 74, 0, .35); --amb-fill: rgba(247, 100, 6, .035); }
/* floating wireframe solids: depth parallax with scroll, lean toward the pointer, rotate */
.amb-w { position: absolute; width: var(--sz); height: var(--sz); transform-style: preserve-3d;
  transform: translate3d(calc(var(--mx3, 0) * var(--dp) * -60px), calc(var(--sp, 0) * var(--dp) * -260px + var(--my3, 0) * var(--dp) * -40px), 0);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.amb-s { position: absolute; inset: 0; transform-style: preserve-3d; animation: amb-spin var(--spin) linear infinite; animation-delay: var(--dl); }
@keyframes amb-spin { from { transform: rotateX(-24deg) rotateY(0) rotateZ(8deg); } to { transform: rotateX(-24deg) rotateY(360deg) rotateZ(8deg); } }
.amb-s b { position: absolute; inset: 0; border: 1.5px solid var(--amb-edge); background: var(--amb-fill); }
.amb-cube b:nth-child(1) { transform: translateZ(calc(var(--sz) / 2)); }
.amb-cube b:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--sz) / 2)); }
.amb-cube b:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--sz) / 2)); }
.amb-cube b:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--sz) / 2)); }
.amb-cube b:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--sz) / 2)); }
.amb-cube b:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--sz) / 2)); }
.amb-ring b { border-radius: 50%; background: none; border-width: 2px; }
.amb-ring b:nth-child(2) { transform: rotateY(90deg); border-style: dashed; }
.amb-pyr b { background: none; border: 0; }
.amb-pyr b::before { content: ''; position: absolute; inset: 0; background: var(--amb-edge); opacity: .55;
  clip-path: polygon(50% 0, 100% 100%, 0 100%, 50% 0, 50% 4%, 3% 97%, 97% 97%, 50% 4%); }
.amb-pyr b:nth-child(1) { transform: translateZ(calc(var(--sz) / 4)) rotateX(26deg); transform-origin: 50% 100%; }
.amb-pyr b:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--sz) / 4)) rotateX(26deg); transform-origin: 50% 100%; }
.amb-pyr b:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--sz) / 4)) rotateX(26deg); transform-origin: 50% 100%; }
.amb-pyr b:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--sz) / 4)) rotateX(26deg); transform-origin: 50% 100%; }
.amb-off .d3-amb * { animation-play-state: paused !important; }
@media (max-width: 720px) {
  .d3-amb .amb-w ~ .amb-w ~ .amb-w { display: none; }
  .amb-w { opacity: .6; scale: .75; }
  .amb-orb { width: 320px; height: 320px; }
}
/* headings flip up in 3D, word by word */
.split-words .w { perspective: 600px; }
.js .split-words .wi { transform: translateY(100%) rotateX(-80deg); transform-origin: 50% 100%; }
.js .split-words.visible .wi { transform: none; }
/* icons inside cards spin a quarter turn in 3D on hover */
.spot:hover .ico, .tilt:hover .bento-ico .ico { transform: rotateY(180deg); transition: transform .7s cubic-bezier(.22, 1, .36, 1); }

/* ── 12. RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .nav-login span { display: none; }
  .nav-login { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 1180px) {
  .h3d-bottom { grid-template-columns: 1fr; }
  .orbit { grid-template-columns: 1fr; }
  .orbit-stage { height: 460px; }
  .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .nav-login { display: none; }
  .site-header.dock .nav-inner { background: rgba(10, 12, 16, .7); border-color: var(--glass-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding-left: 18px; }
  .explode { grid-template-columns: 1fr; }
  .explode-sticky { position: relative; top: 0; height: 440px; }
}
@media (max-width: 720px) {
  .site-header.dock { padding-top: 10px; }
  .site-header.dock .nav-inner { min-height: 58px; margin: 0 12px; width: auto; padding: 0 6px 0 16px; }
  .site-header.dock .nav-logo img { height: 30px; }
  .h3d-title { font-size: clamp(2.1rem, 10vw, 3rem); }
  .h3d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h3d-stat { transform: none; }
  .h3d-foot .h3d-hint { display: none; }
  .orbit-stage { height: 400px; }
  .orbit-ring { width: 200px; height: 280px; margin-left: -100px; }
  .orbit-floor { width: 520px; height: 520px; margin-left: -260px; }
  .explode-sticky { height: 340px; }
  .explode-scene { width: 220px; }
  .ex-plate-label { display: none; }
  .ex-step.on { transform: none; }
  .flip-grid { grid-template-columns: 1fr; }
  .flip { height: 200px; }
  .plane-3d .marquee, .plane-3d .marquee.reverse { transform: rotateX(18deg) rotateZ(-3deg); }
  .testi-3d .testi-x-stage::before, .testi-3d .testi-x-stage::after { display: none; }
  .page-header h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
}
@media (hover: none) {
  .tilt::after { display: none; }
}

/* ── 13. REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pl-cube, .h3d-line > span, .cta-3d-shapes i, .amb-grid, .amb-orb, .amb-s { animation: none !important; }
  .amb-w, .amb-grid, .amb-orb { transform: none !important; }
  .js .split-words .wi { transform: none; }
  .js .fade-up:not(.visible), .js [data-reveal]:not(.visible) { transform: none !important; }
  .orbit-ring, .flip-in, .h3d-rot b { transition: none !important; }
  .h3d-rot b { opacity: 0; transform: none; }
  .h3d-rot b:first-child { opacity: 1; }
  .tilt-on { transform: none !important; }
  .page-header-inner { transform: none !important; opacity: 1 !important; }
}