/* ============================================================
   Neev Bhavsar — Portfolio
   Cream editorial theme · dark/light · glass + motion
   ============================================================ */

:root{
  --bg:#f7f2e7; --bg2:#efe7d5; --surface:rgba(70,52,28,.045); --surface2:rgba(70,52,28,.08);
  --text:#231c12; --muted:#6d6250; --faint:#a1957e; --hairline:rgba(45,32,15,.13);
  --violet:#c58a3d; --cyan:#b45b34; --magenta:#9c6b3a;
  --grad:linear-gradient(120deg,#c58a3d 0%,#b45b34 100%);
  --overlay:rgba(35,28,18,.55); --cardglass:rgba(247,242,231,.72); --track:#e6dcc6;
  --display:"Clash Display",sans-serif; --body:"Satoshi",sans-serif; --serif:"Cormorant",serif;
}
[data-theme="dark"]{
  --bg:#17130d; --bg2:#1f1a12; --surface:rgba(255,244,224,.045); --surface2:rgba(255,244,224,.08);
  --text:#f4ecdd; --muted:#a99c85; --faint:#6f6656; --hairline:rgba(255,240,220,.11);
  --violet:#d99a4e; --cyan:#d06a44; --magenta:#c49164;
  --grad:linear-gradient(120deg,#d99a4e 0%,#d06a44 100%);
  --overlay:rgba(10,8,5,.6); --cardglass:rgba(31,26,18,.7); --track:#0f0c08;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s,color .5s}
::selection{background:var(--cyan);color:#fff}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--magenta)}
img{display:block;max-width:100%}
input,textarea,button{font-family:inherit}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;font-weight:600}
section{position:relative;z-index:1}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.eyebrow{font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}
.ico{display:inline-flex}
.ico svg{width:100%;height:100%}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--track)}
::-webkit-scrollbar-thumb{background:linear-gradient(#c58a3d,#b45b34);border-radius:9px}

/* ---------- keyframes ---------- */
@keyframes blobDrift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(6vw,-4vh) scale(1.12)}66%{transform:translate(-5vw,5vh) scale(.92)}100%{transform:translate(0,0) scale(1)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseGlow{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- fixed overlays ---------- */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJyZ2JhKDAsMCwwLDAuMTUpIi8+CjxyZWN0IHg9IjIiIHk9IjIiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InJnYmEoMCwwLDAsMC4xNSkiLz4KPC9zdmc+");}
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px)}
.blob-1{top:-10%;left:-8%;width:46vw;height:46vw;background:radial-gradient(circle at 30% 30%,#d9a05a,transparent 70%);opacity:.28;animation:blobDrift 26s ease-in-out infinite}
.blob-2{top:40%;right:-12%;width:40vw;height:40vw;background:radial-gradient(circle at 60% 40%,#c47a4a,transparent 70%);opacity:.2;animation:blobDrift 32s ease-in-out infinite reverse}
.blob-3{bottom:-10%;left:30%;width:38vw;height:38vw;background:radial-gradient(circle at 50% 50%,#e0b878,transparent 70%);filter:blur(100px);opacity:.16;animation:blobDrift 38s ease-in-out infinite}
.spotlight{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.6;background:radial-gradient(600px circle at 50% 0%,rgba(197,138,61,.12),transparent 60%);transition:background .2s}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:99998;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px var(--violet)}

/* ---------- custom cursor ---------- */
.cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1.5px solid var(--cyan);border-radius:50%;z-index:99999;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s,background .25s;mix-blend-mode:difference}
.cursor-dot{position:fixed;top:0;left:0;width:6px;height:6px;background:var(--magenta);border-radius:50%;z-index:99999;pointer-events:none;transform:translate(-50%,-50%)}
@media (pointer:coarse){.cursor-ring,.cursor-dot{display:none}}

/* ---------- loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background Parallax Blobs */
.loader-bg-blobs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.loader-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
}
.loader-blob-1 {
  top: -10%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, var(--cyan), transparent 70%);
  animation: loaderBlobDrift 8s infinite ease-in-out;
}
.loader-blob-2 {
  bottom: -10%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, var(--magenta), transparent 70%);
  animation: loaderBlobDrift 10s infinite ease-in-out reverse;
}
@keyframes loaderBlobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.15); }
}

/* Skeleton Loading Layer (Phase 1) */
.skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(340px, 70vw);
  z-index: 3;
  position: absolute;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.skeleton i {
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(120, 90, 50, 0.05), rgba(197, 138, 61, 0.16), rgba(120, 90, 50, 0.05));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton i:nth-child(1) { width: 70%; }
.skeleton i:nth-child(2) { width: 100%; animation-delay: 0.2s; }
.skeleton i:nth-child(3) { width: 45%; animation-delay: 0.4s; }

/* Parallax sliding exit when JS changes style.opacity = "0" */
.skeleton[style*="opacity: 0"], 
.skeleton[style*="opacity: 0;"] {
  transform: translateY(-40px) !important;
  pointer-events: none;
}

/* Brand Identity Loading Layer (Phase 2) */
.loader-logo {
  opacity: 0;
  transform: translateY(20px) scale(1.15); /* Starts zoomed-in/large for zoom-out entry effect */
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  z-index: 3;
  position: absolute;
}

/* Parallax zoom-out entry when JS changes style.opacity = "1" */
.loader-logo[style*="opacity: 1"],
.loader-logo[style*="opacity: 1;"] {
  transform: translateY(0) scale(1) !important; /* Zooms down/out to normal scale 1.0 */
}

/* Parallax zoom-out exit when JS sets .loader opacity = "0" */
.loader[style*="opacity: 0"] .loader-logo,
.loader[style*="opacity: 0;"] .loader-logo {
  transform: translateY(-30px) scale(0.82) !important; /* Zooms out into distance during exit */
  opacity: 0 !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.loader-logo .logo-mark-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  animation: logoPulse 2s infinite ease-in-out;
}
.loader-logo .logo-mark-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}
@keyframes logoPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); }
  50% { transform: scale(1.04); box-shadow: 0 12px 40px rgba(197, 138, 61, 0.15); }
}
.loader-logo .brand-text h1 {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.5px;
}
.loader-logo .brand-text p {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--muted);
  margin: 6px 0 0 0;
  font-weight: 500;
}
.loader-progress-container {
  width: 200px;
  height: 3px;
  background: var(--surface2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 10px;
}
.loader-progress-bar {
  height: 100%;
  width: 0;
  background: var(--grad);
  animation: loadProgress 2.2s forwards cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes loadProgress {
  0% { width: 0; }
  100% { width: 100%; }
}
.loader-status-text {
  font-family: var(--body);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-top: 4px;
}
.curtain{position:fixed;inset:0;z-index:99999;background:var(--grad);transform:translateY(0);pointer-events:none}

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  overflow: hidden;
}

/* ---------- navbar ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,5vw,64px);transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(18px);border-bottom-color:var(--hairline);padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:11px;color:var(--text)}
.brand span{font-family:var(--display);font-size:19px;font-weight:500}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{position:relative;font-size:14.5px;color:var(--muted);padding:4px 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--grad);transition:width .3s}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:14px}
.icon-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--hairline);background:var(--surface);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s}
.icon-btn:hover{background:var(--surface2)}
.icon-btn .ico{width:18px;height:18px}
.btn-solid{padding:11px 20px;border-radius:11px;background:var(--text);color:var(--bg);font-weight:700;font-size:14px}
.cta-desktop{display:none}
.hamburger{flex-direction:column;gap:5px}
.hamburger span{width:18px;height:2px;background:currentColor;border-radius:2px}
@media (min-width:900px){.cta-desktop{display:inline-block}.hamburger{display:none}}
@media (max-width:899px){.nav-links{display:none}}

/* ---------- mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  /* Ensure overlay covers the full dynamic viewport on mobile */
  min-height: 100dvh;
  z-index: 9500;
  background: rgba(35, 28, 18, 0.45);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
#mobile-links {
  width: min(380px, 86vw);
  /* 100vh on mobile browsers includes the address bar and cuts off content.
     100dvh (dynamic viewport height) = actual visible area. Fall back to 100vh. */
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  background: var(--bg);
  border-left: 1px solid var(--hairline);
  box-shadow: -15px 0 45px rgba(35, 28, 18, 0.18);
  padding: 40px 32px 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.mobile-menu.open #mobile-links {
  transform: translateX(0);
}
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 24px;
}
.mobile-menu-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mobile-menu-header .logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.mobile-menu-header .brand span {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
}
.mobile-menu-header .close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.mobile-menu-header .close:hover {
  background: var(--surface2);
  transform: rotate(90deg);
}
.mobile-links-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 32px 0;
}
.mobile-links-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 30%, transparent);
  transition: color 0.3s ease, transform 0.2s ease, border-color 0.3s;
  opacity: 0;
  transform: translateX(20px);
}
.mobile-menu.open .mobile-links-list a {
  opacity: 1;
  transform: translateX(0);
}
/* Stagger delays */
.mobile-menu.open .mobile-links-list a:nth-child(1) { transition: opacity .4s ease .1s, transform .4s cubic-bezier(0.16, 1, 0.3, 1) .1s, color 0.3s; }
.mobile-menu.open .mobile-links-list a:nth-child(2) { transition: opacity .4s ease .15s, transform .4s cubic-bezier(0.16, 1, 0.3, 1) .15s, color 0.3s; }
.mobile-menu.open .mobile-links-list a:nth-child(3) { transition: opacity .4s ease .2s, transform .4s cubic-bezier(0.16, 1, 0.3, 1) .2s, color 0.3s; }
.mobile-menu.open .mobile-links-list a:nth-child(4) { transition: opacity .4s ease .25s, transform .4s cubic-bezier(0.16, 1, 0.3, 1) .25s, color 0.3s; }
.mobile-menu.open .mobile-links-list a:nth-child(5) { transition: opacity .4s ease .3s, transform .4s cubic-bezier(0.16, 1, 0.3, 1) .3s, color 0.3s; }
.mobile-menu.open .mobile-links-list a:nth-child(6) { transition: opacity .4s ease .35s, transform .4s cubic-bezier(0.16, 1, 0.3, 1) .35s, color 0.3s; }

.mobile-links-list a:hover {
  color: var(--violet);
  transform: translateX(8px);
  border-bottom-color: var(--violet);
}
.mobile-links-list a .num {
  font-family: var(--body);
  font-size: 13px;
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.8;
}
.mobile-menu-footer {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-menu-footer .loc-text {
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.mobile-socials {
  display: flex;
  gap: 16px;
}
.social-link-item {
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
  transition: color 0.3s;
}
.social-link-item:hover {
  color: var(--violet);
}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:150px clamp(20px,5vw,64px) 80px}
.hero-grid{width:100%;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:99px;border:1px solid var(--hairline);background:var(--surface);font-size:13px;color:var(--muted);margin-bottom:30px}
.pill i{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399;animation:pulseGlow 2s infinite}
.hero h1{font-size:clamp(46px,7vw,104px);line-height:.95;letter-spacing:-.03em;margin-bottom:24px;
  /* Reserve fixed height so typing animation NEVER causes layout reflow */
  min-height: 2.1em;
}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.caret{color:var(--cyan);font-weight:300}
.hero p{font-size:clamp(16px,1.6vw,20px);color:var(--muted);max-width:520px;line-height:1.6;margin-bottom:38px;word-break:break-word;overflow-wrap:break-word}
.hero p strong{color:var(--text);font-weight:500}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn-lg{padding:16px 30px;border-radius:13px;font-weight:700;font-size:15px}
.btn-lg.solid{background:var(--text);color:var(--bg)}
.btn-lg.ghost{border:1px solid var(--hairline);background:var(--surface);color:var(--text);font-weight:600;transition:background .3s}
.btn-lg.ghost:hover{background:var(--surface2)}
.hero-photo{position:relative;display:flex;justify-content:center}
.tilt{position:relative;width:min(360px,80vw);aspect-ratio:4/5;transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform}
.tilt .glow{position:absolute;inset:-2px;border-radius:26px;background:var(--grad);opacity:.6;filter:blur(22px)}
.tilt .conic{position:absolute;inset:-26px;border-radius:50%;background:conic-gradient(from 0deg,#c58a3d,#b45b34,#e0b878,#c58a3d);filter:blur(30px);opacity:.4;animation:spin 8s linear infinite;z-index:-1}
.tilt .frame{position:absolute;inset:0;border-radius:24px;overflow:hidden;border:1px solid var(--hairline);transform:translateZ(40px)}
.tilt .frame img{width:100%;height:100%;object-fit:cover}
.tilt .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 55%,var(--overlay))}
.float-card{position:absolute;padding:14px 18px;border-radius:16px;background:var(--bg2);backdrop-filter:none;border:1px solid var(--hairline);box-shadow:0 20px 50px rgba(0,0,0,.28)}
.float-card b{font-family:var(--display);font-size:26px;font-weight:600}
.float-card small{display:block;font-size:11px;color:var(--muted)}
.float-a{top:8%;left:-16%;transform:translateZ(80px)}
.float-b{bottom:12%;right:-18%;transform:translateZ(100px)}
@keyframes scrollDownLine {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--faint);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.scroll-hint i{width:1px;height:40px;background:linear-gradient(var(--cyan),transparent);animation:scrollDownLine 2.2s infinite cubic-bezier(.25, 1, .5, 1)}
@media (max-width:899px){.hero-grid{grid-template-columns:1fr;gap:44px}}

/* ---------- marquee ---------- */
.marquee{padding:26px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--bg2);overflow:hidden;transform:skewY(-1deg)}
.marquee-track{display:flex;gap:52px;width:max-content;animation:marquee 28s linear infinite;white-space:nowrap}
.marquee-track span{font-family:var(--display);font-size:clamp(22px,3vw,40px);font-weight:500}
/* Pause marquee animation on mobile to avoid GPU overload */
@media (max-width: 899px) {
  .marquee { transform: none; }
  .marquee-track { animation-duration: 40s; }
}

/* ---------- section heads ---------- */
.section{padding:clamp(90px,12vh,150px) 0}
.section.pt0{padding-top:0}
.head{margin-bottom:56px}
.head h2{font-size:clamp(34px,4.5vw,60px);line-height:1.02}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.about-grid h2{font-size:clamp(34px,4.5vw,60px);line-height:1.02}
.about-grid p{font-size:clamp(17px,1.8vw,22px);line-height:1.65;color:var(--muted);margin-bottom:26px}
.about-grid p.small{font-size:clamp(15px,1.6vw,18px);line-height:1.7;color:var(--faint)}
.about-grid strong{color:var(--text);font-weight:500}
@media (max-width:899px){.about-grid{grid-template-columns:1fr;gap:44px}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{padding:34px 26px;border-radius:20px;border:1px solid var(--hairline);background:var(--surface);transition:transform .4s,border-color .4s,background .4s}
.stat:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--violet) 50%,transparent);background:var(--surface2)}
.stat b{font-family:var(--display);font-size:clamp(38px,5vw,60px);font-weight:600;line-height:1}
.stat small{display:block;margin-top:12px;font-size:14px;color:var(--muted)}

/* ---------- philosophy ---------- */
.philo{min-height:80vh;display:flex;align-items:center;justify-content:center;overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.philo .ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:600;font-size:clamp(120px,26vw,420px);color:color-mix(in srgb,var(--text) 4%,transparent);white-space:nowrap;letter-spacing:-.04em;pointer-events:none}
.philo .quote{position:relative;z-index:2;max-width:900px;text-align:center;padding:0 24px}
.philo .quote p{font-family:var(--serif);font-style:italic;font-size:clamp(28px,4.5vw,58px);line-height:1.3;font-weight:500}
.philo .quote small{display:block;margin-top:26px;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- services ---------- */
.services{
  display: flex;
  flex-direction: column;
  gap: 70px; /* generous gap for stacking distance */
  position: relative;
  align-items: center;
  padding-bottom: 120px;
}
.svc{
  position: sticky;
  top: calc(120px + var(--index) * 28px);
  width: 100%;
  max-width: 1260px; /* Even wider layout */
  min-height: 360px; /* Taller card layout */
  padding: 60px 72px; /* Grand premium padding */
  border-radius: 32px;
  border: 1px solid var(--hairline);
  background: var(--bg2); /* Solid background to prevent see-through when stacked */
  overflow: hidden;
  box-shadow: none; /* Removed shadow */
  transform-origin: center top;
  transition: border-color .4s, transform 0.15s ease-out, opacity 0.15s ease-out;
}
[data-theme="dark"] .svc{
  background: var(--bg2);
  box-shadow: none; /* Removed shadow */
}
.svc:hover{border-color:color-mix(in srgb,var(--violet) 45%,transparent)}
.svc .icon{margin-bottom: 28px; color:var(--cyan)}
.svc .icon .ico{width: 52px; height: 52px}
.svc h3{font-size: 34px; margin-bottom: 16px; font-weight: 600}
.svc p{color:var(--muted); line-height: 1.75; font-size: 18px; max-width: 80ch}
.svc .tags{margin-top: 28px; font-size: 15px; color:var(--faint); font-weight: 500}

/* ---------- skills bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(160px,auto);gap:18px}
.cat{grid-column:span 2;padding:30px;border-radius:22px;border:1px solid var(--hairline);background:linear-gradient(150deg,var(--surface2),transparent);transition:border-color .4s,transform .4s}
.cat:hover{border-color:color-mix(in srgb,var(--cyan) 40%,transparent);transform:translateY(-5px)}
.cat-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.cat-head .ico{width:22px;height:22px;color:var(--cyan)}
.cat-head b{font-family:var(--display);font-size:20px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{padding:8px 14px;border-radius:99px;border:1px solid var(--hairline);background:var(--surface);font-size:13.5px;color:var(--muted)}

/* ---------- journey ---------- */
.timeline{position:relative;padding-left:44px;max-width:1100px;margin:0 auto}
.timeline .line{position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--hairline)}
.timeline .fill{position:absolute;left:11px;top:6px;width:2px;height:0;background:var(--grad);box-shadow:0 0 14px var(--violet)}
.node{position:relative;padding-bottom:44px}
.node .dot{position:absolute;left:-38px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:2px solid var(--faint);transition:border-color .4s,box-shadow .4s,transform .4s}
.node.active .dot{border-color:var(--violet);box-shadow:0 0 16px var(--violet);transform:scale(1.25);background:var(--violet)}
.node .year{font-family:var(--display);font-size:14px;font-weight:600;color:var(--cyan);letter-spacing:.05em}
.node h3{font-size:clamp(20px,2.4vw,28px);margin:6px 0 8px}
.node p{color:var(--muted);line-height:1.6;font-size:15px;max-width:60ch}

/* ---------- certificates ---------- */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cert{padding:28px;border-radius:20px;border:1px solid var(--hairline);background:var(--surface);transition:transform .4s,border-color .4s}
.cert:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--magenta) 45%,transparent)}
.cert .badge{width:46px;height:46px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:#fff}
.cert .badge .ico{width:22px;height:22px}
.cert h3{font-size:18px;font-weight:600;line-height:1.2;margin-bottom:6px}
.cert small{display:block;font-size:13px;color:var(--muted)}
.cert .yr{font-size:12px;color:var(--faint);margin-top:4px}

/* ---------- projects ---------- */
.projects-pin-container {
  position: relative;
  z-index: 2; /* above other sections (z:1) so certs never bleeds through sticky scroll */
  /* No background — transparent like all other sections, blobs show through naturally */
}
.projects-sticky-wrapper {
  position: relative;
}
.projects-sticky-wrapper #work-ghost {
  position: absolute;
  top: 60px;
  right: -4%;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(90px,18vw,280px);
  color: color-mix(in srgb,var(--text) 3%,transparent);
  white-space: nowrap;
  letter-spacing: -.04em;
  pointer-events: none;
  z-index: 0;
}
.projects-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 20px;
}
.projects-head .note {
  color: var(--muted);
  font-size: 15px;
  max-width: 36ch;
}
.projects-track-outer {
  width: 100%;
}
.projects {
  position: relative;
  z-index: 2;
}
.projects-head h2 {
  font-size: clamp(34px,4.5vw,60px);
  line-height: 1.02;
}

@media (min-width: 992px) {
  .projects-pin-container {
    /* height set dynamically by JS based on card count */
  }
  .projects-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    padding-top: 80px;
    box-sizing: border-box;
    /* Transparent — fixed blobs (z-index:0) show through naturally, matching idea page */
    background: transparent;
  }
  .projects-track-outer {
    overflow: hidden;
    margin-top: 40px;
    /* Gradient fade on left and right edges so first/last card fades gracefully */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .projects {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 32px;
    width: max-content;
    will-change: transform;
    padding: 20px 60px; /* horizontal padding so first/last card isn't flush with fade */
  }
  .proj {
    flex: 0 0 460px;
    width: 460px;
    padding: 24px 28px;
  }
  .proj .top {
    margin-bottom: 30px;
  }
  .proj p {
    margin-bottom: 14px;
    font-size: 14.5px;
  }
}

@media (max-width: 991px) {
  .projects-pin-container {
    padding: 60px 0;
  }
  .projects-track-outer {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 30px;
    padding: 10px 0;
  }
  .projects-track-outer::-webkit-scrollbar {
    display: none;
  }
  .projects {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0 !important;
    width: 100%;
  }
  .proj {
    flex: 0 0 calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    margin: 0 16px !important;
    box-sizing: border-box;
    border-radius: 24px !important; /* restored rounded corners */
    border: 1px solid var(--hairline) !important;
    padding: 24px 20px !important;
  }
}

.proj {
  position: relative;
  display: block;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
  transition: transform .4s,border-color .4s;
  color: var(--text);
}
.proj:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb,var(--violet) 50%,transparent);
}
.proj .pglow{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(197,138,61,.14),transparent 60%);transition:opacity .4s}
.proj .cover{position:absolute;top:0;right:0;width:44%;height:100%;opacity:.14;overflow:hidden;transition:opacity .4s;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.proj .cover img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.55) saturate(1.3) hue-rotate(-6deg)}
.proj .top{position:relative;display:flex;justify-content:space-between;align-items:start;margin-bottom:60px}
.proj .num{font-family:var(--display);font-size:13px;font-weight:600;color:var(--faint)}
.proj .yr{font-size:12px;padding:6px 12px;border-radius:99px;border:1px solid var(--hairline);color:var(--muted)}
.proj .body{position:relative}
.proj h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:10px}
.proj p{color:var(--muted);line-height:1.55;font-size:15px;margin-bottom:20px;max-width:44ch}
.proj .stack{display:flex;flex-wrap:wrap;gap:8px}
.proj .stack span{font-size:12px;color:var(--cyan);padding:5px 11px;border-radius:8px;background:color-mix(in srgb,var(--cyan) 12%,transparent)}

/* ---------- testimonials ---------- */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote-card{padding:34px;border-radius:22px;border:1px solid var(--hairline);background:var(--surface);display:flex;flex-direction:column;gap:24px}
.quote-card .mark{font-size:26px;color:var(--violet);font-family:var(--serif);line-height:0;height:14px}
.quote-card p{font-size:16.5px;line-height:1.6;color:var(--text);flex:1}
.who{display:flex;align-items:center;gap:13px}
.who .av{width:44px;height:44px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;color:#fff}
.who b{font-weight:700;font-size:14.5px}
.who small{display:block;font-size:13px;color:var(--muted)}

/* ---------- blog ---------- */
.blog-pin-container {
  position: relative;
  z-index: 2;
  /* No overflow:hidden — would break position:sticky on child wrapper */
}
.blog-sticky-wrapper {
  position: relative;
}

@media (min-width: 992px) {
  .blog-pin-container {
    /* height set dynamically by JS based on card count */
  }
  .blog-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    padding-top: 80px;
    box-sizing: border-box;
    background: transparent;
  }
  .blog-track-outer {
    overflow: hidden;
    margin-top: 40px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .blog {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 32px;
    width: max-content;
    will-change: transform;
    padding: 20px 60px;
  }
  .post {
    flex: 0 0 380px;
    width: 380px;
  }
}

@media (max-width: 991px) {
  .blog-pin-container {
    padding: 80px 0;
  }
  .blog-track-outer {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 40px;
    padding: 10px 0;
  }
  .blog-track-outer::-webkit-scrollbar {
    display: none;
  }
  .blog {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    width: max-content;
  }
  .post {
    flex: 0 0 320px;
    width: 320px;
  }
}

.post{display:block;border-radius:22px;border:1px solid var(--hairline);background:var(--surface);overflow:hidden;transition:transform .4s,border-color .4s;color:var(--text)}
.post:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--cyan) 40%,transparent)}
.post:hover .thumb img{opacity:1}
.post .thumb{aspect-ratio:16/9;height:auto;position:relative;overflow:hidden;background:var(--bg-sec)}
.post .thumb img{width:100%;height:100%;object-fit:contain;opacity:.85;transition:opacity .3s}
.post .tag{position:absolute;bottom:14px;left:16px;font-size:12px;padding:5px 11px;border-radius:8px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);color:#fff}
.post .pad{padding:26px}
.post .meta{font-size:12px;color:var(--faint);margin-bottom:12px}
.post h3{font-size:20px;font-weight:600;line-height:1.25;margin-bottom:10px}
.post p{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---------- resume CTA ---------- */
.cta{position:relative;border-radius:28px;overflow:hidden;padding:clamp(46px,7vw,80px);border:1px solid var(--hairline);background:var(--bg2)}
.cta .tint{position:absolute;inset:0;background:var(--grad);opacity:.14}
.cta .orb{position:absolute;top:-40%;right:-10%;width:400px;height:400px;border-radius:50%;background:var(--violet);filter:blur(120px);opacity:.4}
.cta .row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta h2{font-size:clamp(30px,4vw,52px);margin-bottom:12px}
.cta p{color:var(--muted);font-size:17px;max-width:46ch}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.contact-grid h2{font-size:clamp(38px,5.5vw,76px);letter-spacing:-.03em;line-height:.98;margin-bottom:28px}
.contact-grid .lead{color:var(--muted);font-size:17px;line-height:1.65;max-width:42ch;margin-bottom:40px}
.contact-links{display:flex;flex-direction:column;gap:18px}
.contact-links a{display:flex;align-items:center;gap:14px;color:var(--text);font-size:16px}
.contact-links a:hover{color:var(--cyan)}
.contact-links .ic{width:40px;height:40px;border-radius:11px;border:1px solid var(--hairline);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.contact-links .ic .ico{width:18px;height:18px}
.form{display:flex;flex-direction:column;gap:18px;padding:38px;border-radius:24px;border:1px solid var(--hairline);background:var(--surface)}
.form label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.form input,.form textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--hairline);background:var(--bg);color:var(--text);font-size:15px;outline:none;transition:border-color .3s}
.form textarea{resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--violet)}
.form button{padding:16px;border-radius:12px;border:none;background:var(--text);color:var(--bg);font-weight:700;font-size:15px;cursor:pointer}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr;gap:44px}}

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 80px 0 50px;
  background: var(--bg2);
  position: relative;
  z-index: 10;
}
.footer-wrap {
  max-width: 100%;
  padding: 0 clamp(24px, 6vw, 100px);
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 899px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer-col h4 {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}
.brand-col .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-col .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid var(--hairline);
}
.brand-col .brand span {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}
.brand-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 38ch;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-nav a {
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.3s ease, transform 0.2s ease;
  width: fit-content;
}
.footer-nav a:hover {
  color: var(--violet);
  transform: translateX(4px);
}
.contact-item {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}
.contact-item a {
  color: var(--text);
  font-weight: 500;
  transition: color 0.3s ease;
}
.contact-item a:hover {
  color: var(--violet);
}
.footer-socials {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--muted);
  transition: all 0.3s ease;
}
.social-icon:hover {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
  transform: translateY(-3px);
}

/* Footer Bottom section */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--hairline);
  padding-top: 36px;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 560px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.copy-text {
  font-size: 13.5px;
  color: var(--faint);
}
.visitor-counter-panel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--surface2);
  border: 1px solid var(--hairline);
  font-family: var(--body);
}
.live-dot-glow {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  animation: pulseGlow 1.8s infinite;
}
.visitor-count-text {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.visitor-count-text strong {
  color: var(--text);
  font-weight: 700;
}

/* ---------- text reveal ---------- */
.word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.word-inner{display:inline-block;transform:translateY(115%);transition:transform .7s cubic-bezier(.22,1,.36,1)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.shown{opacity:1;transform:none}
/* ---------- responsive grids ---------- */
@media (max-width:899px){
  .stats,.certs,.testi,.blog{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:1fr 1fr}
  .projects{grid-template-columns:1fr}

  /* Disable expensive GPU filter rendering & animations on mobile to stop lagging */
  .blobs, .blob, .loader-bg-blobs, .tilt .conic, .cta .orb {
    display: none !important;
    animation: none !important;
    filter: none !important;
  }
  .tilt .glow {
    filter: none !important;
    background: none !important;
  }
  .cursor-ring, .cursor-dot {
    display: none !important;
  }

  /* Reset will-change globally — prevents excess GPU layer creation on mobile */
  *, *::before, *::after {
    will-change: auto !important;
  }

  /* Isolate hero repaint area so text animation doesn't repaint the full page */
  .hero {
    contain: layout style !important;
  }
}
@media (max-width:560px){
  .certs,.testi,.blog,.bento{grid-template-columns:1fr}
  .cat{grid-column:span 1}
  
  .stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .stat {
    width: 280px !important;
    text-align: center !important;
  }
  
  /* Hero section mobile adjustments */
  .hero {
    padding-top: 110px !important;
    padding-bottom: 50px !important;
    min-height: auto !important;
    flex-direction: column !important;
  }
  .hero-grid {
    gap: 56px !important;
  }
  .hero-photo {
    margin-top: 10px !important;
    /* Use padding to create space for float cards; tilt will be margin:auto centered */
    padding: 30px 44px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    position: relative !important;
  }
  .tilt {
    width: min(240px, 66vw) !important;
    margin: 0 auto !important;
    /* Disable expensive 3D GPU layer on mobile */
    transform-style: flat !important;
    will-change: auto !important;
    transform: none !important;
    transition: none !important;
    /* Tilt frame must NOT clip the float cards */
    overflow: visible !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }
  .float-card {
    padding: 10px 14px !important;
    /* Fully opaque — no transparency */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
    z-index: 10 !important;
    border-radius: 14px !important;
  }
  .float-card b {
    font-size: 20px !important;
  }
  .float-card small {
    font-size: 12px !important;
  }
  /* float-a: top-LEFT corner — hangs outside the image frame */
  .float-a {
    left: -22px !important;
    top: -22px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  /* float-b: bottom-RIGHT corner — hangs outside the image frame */
  .float-b {
    right: -22px !important;
    bottom: -22px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
  .scroll-hint {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 40px auto 0 !important;
    width: fit-content;
  }
  .philo {
    min-height: auto !important;
    padding: 80px 24px !important;
  }
  .services {
    gap: 20px !important;
    padding-bottom: 40px !important;
  }
  .svc {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    padding: 34px 28px !important;
    border-radius: 20px !important;
  }
  .svc h3 {
    font-size: 24px !important;
    margin-bottom: 10px !important;
  }
  .svc p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .svc .icon {
    margin-bottom: 16px !important;
  }
  .svc .editorial-stack-badges {
    margin-top: 16px !important;
    gap: 6px !important;
  }
  
  /* Hero title overflow wrapping & font sizing for mobile */
  .hero h1 {
    font-size: clamp(32px, 8vw, 42px) !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  #type {
    display: inline !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ---------- premium editorial details layout ---------- */
.editorial-container {
  padding: 160px 0 100px;
  position: relative;
  z-index: 2;
}
.editorial-header {
  text-align: left;
  margin-bottom: 56px;
}
.editorial-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  text-decoration: none;
  background: var(--surface2);
  border: 1px solid var(--hairline);
  padding: 10px 18px;
  border-radius: 30px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 32px;
}
.editorial-back:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
  transform: translateX(-4px);
}
.editorial-title {
  font-size: clamp(34px, 5.5vw, 68px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  word-spacing: 0.18em;
  max-width: 100%;
  margin: 0 0 24px;
}
.editorial-meta-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 500;
}
.editorial-meta-line .bullet {
  color: var(--faint);
  font-size: 10px;
}
.editorial-meta-line .num {
  color: var(--cyan);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.editorial-banner-wrap {
  max-width: 1200px;
  margin: 0 auto 64px;
  padding: 0 20px;
}
.editorial-banner-frame {
  width: 100%;
  aspect-ratio: 16 / 9; /* Landscape 16:9 aspect ratio on all devices */
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  position: relative;
  background: var(--bg2);
}
@media (max-width: 768px) {
  .editorial-banner-frame {
    border-radius: 20px;
  }
}
.project-detail-banner-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.editorial-content-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.editorial-content {
  max-width: 1200px;
  margin: 0 auto;
}
.editorial-lead {
  font-family: Cormorant;
  font-size: clamp(20px, 3.5vw, 24px);
  font-style: italic;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 48px;
  text-align: left;
  font-weight: 500;
}
.editorial-body p {
  font-size: 17.5px;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 24px;
  font-weight: 400;
}
.editorial-note-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 24px 28px;
  border-radius: 16px;
  margin: 28px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  border-left: 4px solid var(--cyan);
}
.editorial-cta {
  text-align: center;
  margin-top: 56px;
}

/* --- Stack badges below the image --- */
.editorial-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding: 0 8px;
  justify-content: center;
}
.stack-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(197,138,61,0.12);
  color: var(--violet);
  border: 1.5px solid rgba(197,138,61,0.35);
  font-family: 'Satoshi', sans-serif;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s, box-shadow 0.2s;
  text-transform: uppercase;
  white-space: nowrap;
}
.stack-badge:hover {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(197,138,61,0.35);
}
[data-theme="dark"] .stack-badge {
  background: rgba(217,154,78,0.15);
  border-color: rgba(217,154,78,0.3);
  color: var(--violet);
}
[data-theme="dark"] .stack-badge:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: #1a1410;
}

/* --- Proper list rendering in editorial body --- */
.editorial-ul,
.editorial-ol,
.editorial-body ul,
.editorial-body ol {
  margin: 20px 0 24px 0;
  padding-left: 28px; /* Indent the lists */
}
.editorial-ul,
.editorial-body ul {
  list-style-type: disc;
}
.editorial-ol,
.editorial-body ol {
  list-style-type: decimal;
}
.editorial-ul li,
.editorial-ol li,
.editorial-body ul li,
.editorial-body ol li {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 400;
  padding-left: 6px;
}
.editorial-ul li::marker,
.editorial-body ul li::marker {
  color: var(--violet);
}
.editorial-ol li::marker,
.editorial-body ol li::marker {
  color: var(--violet);
  font-weight: 700;
}

/* Code block styling in editorial content */
.editorial-body pre {
  background: var(--bg-sec);
  border: 1px solid var(--hairline);
  padding: 20px 24px;
  border-radius: 12px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  margin: 24px 0;
}

.editorial-body code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
  background: var(--bg-sec);
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--magenta);
}

.editorial-body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 14.5px;
  color: inherit;
}

/* ---------- chat widget "suchi" ---------- */
.chat-widget-btn {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s, border-color 0.3s, background-color 0.3s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden; /* clean circular crop */
}
.chat-widget-btn:hover {
  transform: scale(1.08);
  border-color: var(--cyan);
  background: var(--bg2);
}
.chat-widget-btn .chat-icon {
  width: 24px;
  height: 24px;
  fill: var(--cyan);
  transition: fill 0.3s;
}
.chat-widget-btn:hover .chat-icon {
  fill: var(--magenta);
}
.chat-widget-btn .pulse-ring {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  animation: chat-pulse 2s infinite;
  opacity: 0;
  pointer-events: none;
}
@keyframes chat-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}

.chat-widget-window {
  position: fixed;
  bottom: 100px;
  left: 30px;
  width: 360px;
  height: 480px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.chat-widget-window.open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.chat-widget-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--surface) 80%, var(--cyan) 5%);
}
.chat-widget-header .assistant-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-widget-header .avatar {
  width: 32px;
  height: 32px;
  position: relative;
}
.chat-widget-header .avatar-crop {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-widget-btn img,
.chat-widget-header .avatar-crop img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transform: scale(1.28); /* Zoom in to crop out the outer black frame completely */
}
@keyframes active-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
.chat-widget-header .avatar .status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  border: 1.5px solid var(--surface, #1e1e1e);
  z-index: 2;
  animation: active-pulse 2s infinite;
}
.chat-widget-header .name-status {
  display: flex;
  flex-direction: column;
}
.chat-widget-header .name-status h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.chat-widget-header .name-status span {
  font-size: 11px;
  color: var(--muted);
}
.chat-widget-header .close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.chat-widget-header .close-btn:hover {
  color: var(--text);
}

.chat-widget-messages {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}
.chat-widget-messages::-webkit-scrollbar {
  width: 4px;
}
.chat-widget-messages::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 2px;
}

.chat-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-line;
}
.chat-msg p {
  margin: 0 0 8px;
}
.chat-msg p:last-child {
  margin: 0;
}
.chat-msg ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.chat-msg li {
  margin-bottom: 4px;
}
.chat-msg.bot {
  align-self: flex-start;
  background: var(--bg2);
  color: var(--text);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--hairline);
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--cyan);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-msg.loading {
  display: flex;
  gap: 4px;
  padding: 14px 18px;
}
.chat-msg.loading span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-loading 1.4s infinite both;
}
.chat-msg.loading span:nth-child(2) { animation-delay: .2s; }
.chat-msg.loading span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-loading {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.2); opacity: 1; }
}

.chat-widget-input {
  padding: 14px 16px;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 10px;
  background: var(--surface);
}
.chat-widget-input input {
  flex-grow: 1;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--text);
  border-radius: 12px;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.3s;
}
.chat-widget-input input:focus {
  border-color: var(--cyan);
}
.chat-widget-input button {
  background: var(--cyan);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  color: #fff;
}
.chat-widget-input button:hover {
  background: var(--magenta);
  transform: scale(1.05);
}
.chat-widget-input button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 480px) {
  .chat-widget-window {
    left: 15px;
    right: 15px;
    width: auto;
    bottom: 90px;
    height: 420px;
  }
  .chat-widget-btn {
    bottom: 20px;
    left: 20px;
  }
  .chat-tooltip {
    display: none !important;
  }
}

.chat-tooltip {
  position: fixed;
  bottom: 40px;
  left: 102px;
  z-index: 999;
  padding: 10px 18px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--display);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s, transform 0.4s;
  animation: tooltip-bounce 3s infinite ease-in-out;
}
.chat-tooltip.visible {
  opacity: 1;
  transform: translateX(0);
}
.chat-tooltip::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: inherit;
  border-left: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@keyframes tooltip-bounce {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -6px; }
}

/* ---------- Scroll to Top Button ---------- */
.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--surface2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s, border-color 0.3s, color 0.3s;
}
.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
  transform: translateY(-4px);
}
[data-theme="dark"] .scroll-top-btn {
  background: rgba(255,244,224,0.06);
  border-color: rgba(255,240,220,0.12);
}
[data-theme="dark"] .scroll-top-btn:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: #1c150e;
}

/* ---------- Mobile Screen Constraint Fixes ---------- */
@media (max-width: 991px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
  }
  /* Text column: clip at boundary but allow word wrap, NOT hard cut */
  .hero-grid > div:first-child {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* h1 and p must wrap, not overflow */
  .hero h1, .hero p {
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  /* Photo column MUST be overflow:visible so float cards can hang outside the image */
  .hero-photo {
    overflow: visible !important;
  }
  .loader, .curtain {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .word-inner{transform:none}
}