/* =========================================================
   JINEET PANCHAL • PORTFOLIO THEME (v7.1)
   - Scroll smoothness fixes
   - Waves performance tuning
   - Mobile animation throttling
   ========================================================= */

/* ========== TOKENS / THEME ========== */
:root{
  --bg:#050506;
  --ink:#ffffff;
  --muted:#bfc2cf;
  --purple:#8f7bff;
  --purple-2:#6b5bff;
  --line:#23222a;
  --card:#0c0b10;
  --tint:rgba(143,123,255,.14);
  --shadow-1:0 4px 18px rgba(0,0,0,.45);
  --shadow-2:0 14px 50px rgba(143,123,255,.22);
  --glow:0 0 0 6px rgba(143,123,255,.08),0 8px 40px rgba(143,123,255,.16);

  /* Type scale */
  --fs-xxl:clamp(40px,6.8vw,78px);
  --fs-xl:clamp(28px,4.2vw,46px);
  --fs-lg:clamp(20px,2.2vw,28px);
  --fs-md:17px;
  --fs-sm:13px;

  /* Radii */
  --r-xs:10px;
  --r-sm:14px;
  --r-md:16px;
  --r-lg:18px;
  --r-xl:22px;
}

/* ========== BASE ========== */
*{ box-sizing:border-box }
html{
  width:100%;
  overflow-x:hidden;
  /* Fix: disable global smooth to avoid “lag then jump” */
  scroll-behavior:auto;
}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:var(--fs-md); line-height:1.65; overflow-x:hidden; overflow-y:auto;
  /* iOS momentum for native scroll */
  -webkit-overflow-scrolling: touch;
}
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
hr{ border:0; border-top:1px solid var(--line); margin:24px 0 }

/* ====== Full-page animated waves background (perf tuned) ====== */
.bwaves{
  position:fixed; inset:0; z-index:-9999; overflow:hidden; pointer-events:none;
  contain:layout paint size; /* perf: isolate */
}
.bwaves__color{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10, 5, 35, .6) 0%, rgba(0,0,0,.82) 100%);
  z-index:1;
}
/* Use blur only where supported and not on low-power conditions */
.bwaves__blur{
  position:absolute; inset:0; z-index:2;
}
@supports (backdrop-filter: blur(1px)){
  .bwaves__blur{ backdrop-filter: blur(18px) saturate(110%) }
}
/* tone down blur on small screens to keep scroll snappy */
@media (max-width: 767.98px){
  @supports (backdrop-filter: blur(1px)){
    .bwaves__blur{ backdrop-filter: blur(8px) }
  }
}

.bwaves__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 95%;
  z-index:0; filter:brightness(.85) contrast(1.03);
  opacity:0; transform:scale(1.02); animation:fadeZoomIn 900ms ease forwards;
  will-change: opacity, transform; /* perf hint */
}
@keyframes fadeZoomIn{ to{ opacity:1; transform:scale(1) } }
body>*:not(.bwaves){ position:relative; z-index:1 }
*[style*="z-index:-"]{ z-index:1 !important }
@media (prefers-reduced-motion:reduce){ .bwaves__video{ display:none } }

/* ========== NAV ========== */
.nav{
  position:fixed; top:0; left:0; right:0; height:72px; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 22px;
  background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.logo{
  font-weight:900; letter-spacing:.6px;
  border:1px solid var(--line); padding:.5rem .7rem; border-radius:var(--r-md);
  background:rgba(12,11,15,.6);
  box-shadow:var(--shadow-1);
}
.nav-links{ display:flex; gap:24px; align-items:center }
.nav-link{
  position:relative; padding:.6rem .2rem; font-weight:700; opacity:.92;
  font-size:15px; letter-spacing:.02em;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:7px; height:2px;
  background:linear-gradient(90deg, transparent, var(--purple), transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .35s ease;
}
.nav-link:hover{ color:var(--purple); text-shadow:0 0 14px rgba(143,123,255,.35) }
.nav-link:hover::after{ transform:scaleX(1) }

.nav-toggle{ display:none; background:transparent; border:0; padding:10px; cursor:pointer }
.nav-toggle span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; border-radius:2px }

/* Mobile Nav */
@media (max-width:767.98px){
  .nav-toggle{ display:block }
  .nav-links{
    position:fixed; top:72px; left:0; right:0; display:none; flex-direction:column; gap:12px;
    padding:14px 16px; background:rgba(5,5,6,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
    max-height:calc(100svh - 72px); overflow:auto;
  }
  body.is-menu-open .nav-links{ display:flex }
  body.is-menu-open{ overflow:hidden }
}

/* ========== HERO ========== */
.hero{ min-height:100dvh; display:grid; place-items:center; position:relative; padding:130px 22px 70px }
.hero-inner{ max-width:1180px; width:100% }
.hola{ font-size:clamp(24px,2.2vw,30px); opacity:.95; letter-spacing:.01em }
.hero-name{ font-size:var(--fs-xxl); line-height:1.06; margin:.3rem 0 0; font-weight:900; letter-spacing:.01em }
.accent{ color:var(--purple) }
.hero-sub{ opacity:.92; margin:.65rem 0 1.2rem; font-size:var(--fs-lg) }

/* scroller pills */
.marquee{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:22px 0 28px; mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.track{ display:inline-block; white-space:nowrap; animation:mar 24s linear infinite; will-change: transform }
.track span{ display:inline-block; padding:12px 26px; color:#cbc6ff; font-weight:600; letter-spacing:.02em }
@keyframes mar{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.hero-photo img{
  width:240px; height:240px; border-radius:20px; object-fit:cover;
  border:1px solid var(--line); box-shadow:var(--glow);
  background:radial-gradient(100% 100% at 50% 0%, rgba(143,123,255,.25), rgba(143,123,255,0) 60%);
}

/* JP watermark in hero */
.jp-mark{ position:absolute; right:14px; top:96px; width:min(50vw,260px); aspect-ratio:24/14; opacity:.22; pointer-events:none }
.jp-svg .stroke{ fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; opacity:.22 }
.jp-dot{ position:absolute; width:10px; height:10px; border-radius:50%; background:var(--purple); right:6px; bottom:6px; transform:scale(0) }

/* ====== Cinematic Crystals (perf tuned) ====== */
.crystal{
  position:absolute; width:clamp(110px, 12vw, 220px); height:auto; opacity:.78;
  pointer-events:none; filter: drop-shadow(0 8px 24px rgba(110, 120, 255, .35));
  animation: floatY 6s ease-in-out infinite, slowSpin 26s linear infinite;
  will-change: transform, filter;
}
.c1{ top:8vh; right:9vw;  animation-delay:0s }
.c2{ top:52vh; left:-3vw; animation-delay:.9s }
.c3{ bottom:-4vh; right:-2vw; animation-delay:1.8s }

/* shimmer sweep */
.crystal::after{
  content:""; position:absolute; inset:-8%; background:
  linear-gradient(120deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform:translateX(-120%) rotate(8deg); filter:blur(2px);
  animation: shimmer 5.6s ease-in-out infinite;
}
@keyframes shimmer{ 0%{transform:translateX(-120%) rotate(8deg)} 60%{transform:translateX(120%) rotate(8deg)} 100%{transform:translateX(120%) rotate(8deg)} }
@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes slowSpin{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }

/* Desktop-only hover sparkle; throttle effects on touch to keep scroll smooth */
@media (hover:hover) and (pointer:fine){
  .crystal:hover{ filter: drop-shadow(0 20px 45px rgba(130,140,255,.55)) saturate(1.08) }
}
/* On small screens, disable the slowSpin to reduce compositor load */
@media (max-width: 767.98px){
  .crystal{ animation: floatY 7.5s ease-in-out infinite }
}

/* Optional tiny mouse drift (JS sets --px, --py if present) */
.crystal{ transform: translate3d(calc(var(--px,0px)*0.05), calc(var(--py,0px)*0.04), 0) }

/* ========== ANGLED DIVIDER ========= */
.diag{ height:36px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.04) 40%,transparent) }

/* ========== SECTION / TYPE ========== */
.section{ padding:96px 22px }
.container{ max-width:1180px; margin:0 auto }
.sub{
  letter-spacing:.22em; text-transform:uppercase; color:#9aa0b7; font-weight:800;
  margin-bottom:16px; font-size:var(--fs-sm)
}
.h4{ font-size:clamp(26px,3.2vw,36px); line-height:1.45; color:#f0efff; font-weight:700 }

/* ===== About – Facts / Chips / Metrics ===== */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px }
.fact{ border:1px solid var(--line); padding:18px; border-radius:var(--r-lg); background:rgba(12,11,15,.65) }
.fact-label{ color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase }
.fact-value{ margin-top:6px; font-weight:800; font-size:18px }

.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px }
.chip{
  border:1px solid var(--line); background:rgba(143,123,255,.09); border-radius:999px;
  padding:9px 14px; color:#e8e6ff; font-size:13px; font-weight:700; opacity:.95;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.chip:hover{ transform:translateY(-2px); border-color:rgba(143,123,255,.5); box-shadow:0 6px 22px rgba(143,123,255,.25) }

.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px }
.metric{ text-align:center; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; background:rgba(12,11,15,.6) }
.metric-num{ font-size:32px; font-weight:900; color:#efeaff }
.metric-label{ color:#c9c6ea }

/* ===== What I do ===== */
.whatido .grid-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.point{
  position:relative; padding:24px; border:1px solid var(--line); background:var(--card); border-radius:var(--r-lg);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  will-change: transform; /* perf hint for hover */
}
.h2{ font-size:clamp(22px,2.2vw,30px); margin:0 0 10px; font-weight:900 }
.point p{ margin:0; color:#dcd9ff }
.point:hover{
  transform:translateY(-6px);
  border-color:rgba(143,123,255,.5);
  background:linear-gradient(180deg, rgba(143,123,255,.08), rgba(84,64,216,.06));
  box-shadow:0 12px 40px rgba(143,123,255,.18), inset 0 0 40px rgba(143,123,255,.06);
}

/* ===== Experience / Education ===== */
.exp .timeline{ display:grid; gap:16px }
.tile{
  border:1px solid var(--line); background:var(--card); border-radius:var(--r-lg); padding:22px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  box-shadow:var(--shadow-1);
  will-change: transform; /* perf hint for hover */
}
.tile:hover{ transform:translateY(-5px); border-color:rgba(143,123,255,.45); box-shadow:0 12px 34px rgba(143,123,255,.16) }
.tile-head{ margin-bottom:6px }
.tile-role{ margin:0 0 6px; font-size:22px; font-weight:900 }
.tile-meta{ color:#cbc7ef; font-size:15px }
.tile-body{ margin:10px 0 0 18px }
.tile-body li{ margin:.35rem 0 }

/* ===== Clients (interactive) ===== */
.clients .lead{ opacity:.9; margin-bottom:16px; font-size:var(--fs-lg) }
.client-logos{
  display:grid; grid-template-columns:repeat(6, minmax(120px,1fr));
  gap:18px; align-items:center; justify-items:center;
}
.client-logo{
  position:relative; display:grid; place-items:center; height:86px; width:100%;
  border:1px solid var(--line); border-radius:var(--r-md); background:rgba(12,11,15,.6);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, filter .35s ease;
  overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  will-change: transform; /* perf hint for hover */
}
.client-logo img{ max-height:48px; opacity:.92; filter:grayscale(1) contrast(1.1) }
.client-logo::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: transform .6s ease;
}
.client-logo:hover{ transform:translateY(-6px) scale(1.04); border-color:rgba(143,123,255,.55); box-shadow:var(--glow) }
.client-logo:hover img{ filter:none; opacity:1 }
.client-logo:hover::after{ transform:translateX(120%) skewX(-18deg) }

/* ===== Projects ===== */
.projects .head{ display:flex; align-items:flex-end; gap:12px }
.projects .head .h2{ letter-spacing:.01em }
.projects .count{ color:#bbb6ec }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px }
.card{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); overflow:hidden; display:block;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  transform-style:preserve-3d; perspective:900px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  will-change: transform; /* perf hint for hover */
}
.card-img{ overflow:hidden; aspect-ratio:16/11; background:#0d0c12 }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1) }
.card:hover{ transform:translateY(-8px); border-color:rgba(143,123,255,.5); box-shadow:var(--shadow-2) }
.card:hover .card-img img{ transform:scale(1.06) }
.card-info{ display:flex; justify-content:space-between; gap:8px; padding:16px 18px; color:#eae7ff }
.card-title{ font-weight:900; line-height:1.22; font-size:18px }
.card-year{ opacity:.8 }

/* ===== Footer ===== */
.footer{ padding:90px 22px 36px }
.cta{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap }
.cta-left{ display:flex; align-items:center; gap:14px }
.cta-photo{
  width:100px; height:100px; border-radius:16px; border:1px solid var(--line); object-fit:cover;
  box-shadow:var(--glow); background:radial-gradient(100% 100% at 50% 0%, rgba(143,123,255,.25), rgba(143,123,255,0) 60%);
}
.overlay{ mix-blend-mode:overlay; color:var(--purple) }
.cta-btn{
  display:inline-block; border:1px solid var(--line); padding:16px 20px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(143,123,255,.18),rgba(84,64,216,.12));
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; font-weight:900;
}
.cta-btn:hover{ transform:translateY(-3px); border-color:rgba(143,123,255,.5); box-shadow:var(--glow) }
.socials{ margin-top:10px; display:flex; gap:14px }
.copy{ margin-top:22px; color:#a8a2db }

/* ===== Preloader ===== */
#preloader{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:#050506 }
.pl-center{ position:relative; width:min(80vw,540px); aspect-ratio:24/14 }
.pl-logo{ position:absolute; inset:0; display:grid; place-items:center; filter:drop-shadow(0 0 24px rgba(143,123,255,.35)) }
.pl-jp{ width:100%; height:100% }
.pl-stroke{ fill:none; stroke:#fff; stroke-width:10; stroke-linecap:round; stroke-linejoin:round }
.pl-dot{ position:absolute; width:14px; height:14px; border-radius:50%; right:6%; bottom:8%; background:#7b61ff; transform:scale(0) }
.pl-sweep{ position:absolute; left:-40%; width:40%; height:3px; background:linear-gradient(90deg, transparent, #7b61ff, transparent); opacity:.18; filter:blur(1px) }
.pl-sweep-1{ top:15% } .pl-sweep-2{ top:50% } .pl-sweep-3{ top:85% }
body.pl-done #preloader{ pointer-events:none; animation:pl-out .6s ease forwards }
@keyframes pl-out{ to{ opacity:0; visibility:hidden } }

/* ===== Responsive ===== */
@media (max-width:1199.98px){
  .cards{ grid-template-columns:repeat(3,1fr) }
  .whatido .grid-points{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:991.98px){
  .hero-photo img{ width:220px; height:220px }
  .whatido .grid-points{ grid-template-columns:repeat(2,1fr) }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .client-logos{ grid-template-columns:repeat(4, minmax(120px,1fr)) }
  .jp-mark{ width:min(44vw,230px); top:88px }
}
@media (max-width:767.98px){
  body{ font-size:16.5px }
  .hero{ padding-top:110px }
  .hero-name{ font-size:clamp(34px,9vw,48px) }
  .facts{ grid-template-columns:1fr }
  .metrics{ grid-template-columns:1fr }
  .whatido .grid-points{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr }
  .client-logos{ grid-template-columns:repeat(2, minmax(140px,1fr)) }
}

/* ===== Motion safety ===== */
@media (prefers-reduced-motion:reduce){
  .track{ animation:none }
  .crystal, .crystal::after{ animation:none }
  .card,.point,.tile,.chip,.client-logo{ transition:none !important }
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.tool-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, background 0.3s ease;
  cursor: pointer;
}

.tool-card img {
  width: 40px;
  height: 40px;
  margin-bottom: 0.7rem;
  transition: transform 0.3s ease;
}

.tool-card span {
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
}

.tool-card:hover {
  transform: translateY(-6px) scale(1.05);
  background: rgba(255, 255, 255, 0.15);
}

.tool-card:hover img {
  transform: rotate(8deg) scale(1.15);
}
.tool-ico text {
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* ===== Mac viewer — fully scoped to .mac-stage so it can't touch header/marquee ===== */

/* Layout/stacking */
.mac-stage { margin-top:12px }
.mac-stage .mac{ position:relative; max-width:940px; margin:0 auto }
.mac-stage .mac .lid{ position:relative; width:100%; padding-top:58%; transform-origin:50% 100%;
  transform:rotateX(88deg); transition:transform .85s cubic-bezier(.2,.7,.14,1) }
.mac-stage .mac[data-state="open"] .lid{ transform:rotateX(0deg) }

.mac-stage .mac .screen{ position:absolute; inset:10px; border-radius:12px; overflow:hidden; background:#000 }
.mac-stage .mac .wallpaper{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0 }
.mac-stage .base{ position:relative; height:36px; margin-top:6px }
.mac-stage .deck{ height:14px; background:linear-gradient(#d9d9dc,#bcbec4); border-radius:9px }
/* IMPORTANT: scope the local “track” so it doesn’t hit your marquee */
.mac-stage .track{ width:40%; height:4px; margin:0 auto; transform:translateY(5px); background:rgba(0,0,0,.2); border-radius:2px }
.mac-stage .shadow{ height:22px; margin-top:6px; border-radius:999px; background:radial-gradient(80% 120% at 50% 0%, rgba(0,0,0,.36), rgba(0,0,0,0)) }

/* Dock */
.mac-stage .dock{ position:absolute; top:18px; left:18px; display:flex; flex-direction:column; gap:14px; z-index:2; pointer-events:auto }
.mac-stage .dock-item{ width:64px; padding:10px 6px 6px; border-radius:14px; background:rgba(0,0,0,.28);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.08); color:#ddd; font-size:12px; text-align:center;
  display:grid; place-items:center; gap:6px; transition:transform .2s ease, box-shadow .2s ease }
.mac-stage .dock-item img{ width:36px; height:36px; display:block }
.mac-stage .dock-item:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.25) }

/* Boot overlay */
.mac-stage .jp-boot{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.6); z-index:4 }
.mac-stage .jp-boot.hidden{ display:none }
.mac-stage .jp-logo{ width:min(60%,420px); height:auto }
.mac-stage .jp-logo .s{ fill:none; stroke:#fff; stroke-width:10; stroke-linecap:round; stroke-linejoin:round }
.mac-stage .jp-bar{ width:60%; height:6px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden; margin-top:14px }
.mac-stage .jp-bar span{ display:block; width:0%; height:100%; background:#8f7bff }

/* Viewer window */
.mac-stage .viewer[hidden]{ display:none }
.mac-stage .viewer{ position:absolute; left:50%; top:16%; transform:translateX(-50%) translateY(6px) scale(.985);
  width:76%; border-radius:12px; background:linear-gradient(#1a1a1f,#141418); box-shadow:0 22px 60px rgba(0,0,0,.5);
  z-index:3; opacity:0; transition:opacity .22s ease, transform .22s ease }
.mac-stage .viewer.is-live{ opacity:1; transform:translateX(-50%) translateY(0) scale(1) }

.mac-stage .v-titlebar{ position:relative; height:40px; display:flex; align-items:center; padding:0 14px 0 54px;
  border-bottom:1px solid rgba(255,255,255,.06); color:#e9e7ff; font-weight:800; letter-spacing:.01em }
.mac-stage .traffic{ position:absolute; inset:0 auto 0 12px; display:flex; gap:8px; align-items:center }
.mac-stage .v-btn{ width:12px; height:12px; border-radius:50%; border:0; padding:0; cursor:pointer }
.mac-stage .v-min{ background:#f4bf4f } 
.mac-stage .v-full{ background:#62c655 } 
.mac-stage .v-close{ background:#ec6a5f }
.mac-stage .v-btn:active{ transform:scale(.9) }

.mac-stage .v-body{ position:relative; background:#101012 }
.mac-stage .v-img, 
.mac-stage .v-vid{ display:none; width:100%; height:auto; max-height:58vh; object-fit:contain; background:#101012 }
.mac-stage .v-meta{ font-size:12px; color:#bfc2cf; padding:8px 12px; border-top:1px solid rgba(255,255,255,.06) }

/* Viewer arrows — scoped so they don't hit the site header .nav */
.mac-stage .viewer .nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:36px; height:36px; border-radius:50%;
  border:0; background:rgba(0,0,0,.45); color:#fff; font-size:26px; line-height:36px; display:grid; place-items:center;
  cursor:pointer; transition:background .2s ease, transform .2s ease }
.mac-stage .viewer .nav:hover{ background:rgba(0,0,0,.65); transform:translateY(-50%) scale(1.05) }
.mac-stage .viewer .prev{ left:10px } 
.mac-stage .viewer .next{ right:10px }

.mac-stage .viewer.is-full{ width:92%; top:6% }

/* Small screens */
@media (max-width: 768px){
  .mac-stage .viewer{ width:90% }
  .mac-stage .dock-item{ width:58px }
  .mac-stage .dock-item img{ width:32px; height:32px }
}

/* Titlebar / traffic overlap fix (scoped) */
.mac-stage .viewer .v-titlebar{
  position: relative; display: flex; align-items: center;
  padding: 8px 56px 8px 78px; min-height: 40px;
  border-bottom: 1px solid rgba(255,255,255,.06); color:#e9e7ff; font-weight: 800; letter-spacing: .01em;
}
.mac-stage .viewer .traffic{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; z-index: 2 }
.mac-stage .viewer .v-title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 }
.mac-stage .viewer .v-close-btn,
.mac-stage .viewer .v-full-btn,
.mac-stage .viewer .v-min-btn{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%) }
.mac-stage .viewer .traffic .v-btn{ width:12px; height:12px; border-radius:50%; border:0; padding:0 }
/* ---------- About Section Extended Content ---------- */
#about h2.h4.split {
  font-size: 0.93rem;      /* slightly smaller for larger content */
  line-height: 1.55;       /* comfortable reading */
  margin-bottom: 1.8rem;   /* spacing between paragraphs */
}

#about .facts .fact-value {
  font-size: 0.84rem;      /* readable but compact */
}

#about .chip-row .chip {
  font-size: 0.8rem;       /* slightly smaller for tight fit */
  margin-right: 0.5rem;
  margin-bottom: 0.4rem;
}

#about .metrics .metric-num {
  font-size: 1.2rem;       /* readable but compact */
}

#about .metrics .metric-label {
  font-size: 0.85rem;
}
/* ---------- Clients Section: Big Logos, True Colors on Hover ---------- */
.section.clients .client-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
}

.section.clients .client-logo {
  width: 200px;   /* container size */
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section.clients .client-logo img {
  width: 100% !important;    /* fill container */
  height: 100% !important;   /* fill container */
  object-fit: contain;       /* keep aspect ratio */
  display: block;
  max-width: none !important;
  max-height: none !important;
  filter: grayscale(100%);   /* default: grayscale */
  transition: filter 0.3s ease; /* smooth color transition */
}

.section.clients .client-logo:hover img {
  filter: grayscale(0%);     /* show real colors on hover */
}

/* responsive adjustments */
@media (max-width: 1024px) {
  .section.clients .client-logo {
    width: 180px;
    height: 180px;
  }
}

@media (max-width: 768px) {
  .section.clients .client-logo {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 480px) {
  .section.clients .client-logo {
    width: 120px;
    height: 120px;
  }
}
/* ---------- Mobile Rotate Prompt for Mac Section ---------- */
#rotatePrompt {
  display: none; /* hidden by default */
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  color: #fff;
  z-index: 9999;
  text-align: center;
  font-family: sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

#rotatePrompt .phone-icon {
  width: 80px;
  height: 140px;
  border: 3px solid #fff;
  border-radius: 20px;
  position: relative;
  margin-bottom: 1rem;
  animation: rotatePhone 1.5s infinite alternate;
}

#rotatePrompt .phone-icon::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 5px;
  background: #fff;
  border-radius: 2px;
}

#rotatePrompt .phone-icon::after {
  content: '';
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  background: #fff;
  border-radius: 2px;
}

@keyframes rotatePhone {
  0% { transform: rotate(-20deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(20deg); }
}

/* mobile only */
@media (min-width: 769px) {
  #rotatePrompt { display: none !important; }
}
.mac-closed-welcome {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'SF Pro Display', 'San Francisco', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: rgba(255,255,255,0.25); /* subtle transparent Apple-style */
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

.mac-closed-welcome span {
  display: block;
  opacity: 0;
  animation: fadeLoop 4s ease-in-out infinite;
}

.mac-closed-welcome span:nth-child(1) { animation-delay: 0s; }
.mac-closed-welcome span:nth-child(2) { animation-delay: 1.3s; }
.mac-closed-welcome span:nth-child(3) { animation-delay: 2.6s; }

@keyframes fadeLoop {
  0%, 20% { opacity: 0; transform: translateY(10px); }
  30%, 70% { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(-10px); }
}

/* responsive on mobile */
@media (max-width: 768px) {
  .mac-closed-welcome { font-size: 1.4rem; }
}