/* Hallmark · macrostructure: Marquee Hero | genre: modern-minimal | theme: Monochrome Monolith | nav: N5 Floating Pill | footer: Ft5 Statement
 * display: Sora · body: Figtree · mono: JetBrains Mono
 * axes: pure-monochrome black&white / display-sans / stark-white accent | design-system: design.md
 */

@import url("tokens.css");

/* ============ Footer statement wordmark ============
   A monumental etched monochrome wordmark on a frosted glass plate. */
.footer-statement{
  position:relative;z-index:2;overflow:hidden;
  padding-top:var(--space-xl);
  background:var(--glass-strong);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 -1px 0 var(--glass-border),
    0 -24px 60px -30px rgba(0,0,0,0.8);
}
.footer-statement::before{
  content:"";position:absolute;left:50%;top:-40%;width:78%;height:130%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,0.06),transparent 68%);
  animation:fsn-glow 11s var(--ease-in-out) infinite;
}
@keyframes fsn-glow{
  0%,100%{opacity:0.4;transform:translateX(-50%) scale(1)}
  50%    {opacity:0.8;transform:translateX(-50%) scale(1.1)}
}
.footer-statement-name{
  position:relative;
  display:grid;justify-items:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.75rem,9vw,9.5rem);
  line-height:0.86;
  letter-spacing:-0.055em;
  white-space:nowrap;
  text-align:center;
  margin:0;
  padding:0 var(--space-sm) var(--space-md);
  user-select:none;
  color:var(--ink);
}
.fsn-layer{
  grid-area:1 / 1;
  color:var(--ink);
}
.fsn-base{
  color:var(--ink);
}
.fsn-base em{
  font-style:normal;
  color:var(--ink-2);
}
.fsn-sheen{
  display:none;
}

/* Entrance: the plate and wordmark rise from bottom to top */
.footer-statement.reveal{
  opacity:0;
  transform:translateY(48px);
  transition:opacity 0.85s var(--ease-spring), transform 0.85s var(--ease-spring);
}
.footer-statement.visible{
  opacity:1;
  transform:translateY(0);
}
.footer-statement.reveal .footer-statement-name{
  letter-spacing:-0.08em;
  transition:letter-spacing 1.2s var(--ease-spring);
}
.footer-statement.visible .footer-statement-name{
  letter-spacing:-0.055em;
}

:root {
  --bg:         var(--paper);
  --bg-card:    var(--card-bg);
  --bg-card-hover: var(--card-bg-elevated);
  --border:     var(--glass-border);
  --border-muted: var(--glass-border);
  --text:       var(--ink);
  --text-muted: var(--ink-2);
  --text-dim:   var(--ink-3);
  --radius:     var(--radius-card);
  --transition: var(--dur-1) var(--ease-out);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;overflow-x:clip;background:var(--paper)}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
h1,h2,h3,.section-title-lg,.cap-title,.agency-name,.stat-num,.stat-lbl,.hero-stat-num,.preview-modal-header h3{font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere;min-width:0;text-wrap:balance;letter-spacing:var(--tracking-tight)}
p{text-wrap:pretty}
::selection{background:var(--ink);color:var(--paper)}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

/* ============ Scroll Progress Bar ============ */
.scroll-progress-bar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:10000;pointer-events:none}
.scroll-progress-bar::before{
  content:"";position:absolute;inset:0;
  transform:scaleX(var(--sp, 0));transform-origin:0 50%;
  background:var(--ink);
  box-shadow:0 0 10px rgba(255,255,255,0.4);
  will-change:transform;
}
.scroll-progress-bar::after{
  content:"";position:absolute;top:-3px;left:calc(var(--sp, 0) * 100%);
  width:9px;height:9px;border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 12px rgba(255,255,255,0.8);
  transform:translateX(-50%);
  opacity:min(calc(var(--sp, 0) * 8), 1);
}

/* Scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--glass-strong);border-radius:var(--radius-pill);border:2px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--glass-border-hover)}

/* ============ Subtle Monochrome Ambient Background ============ */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(var(--aurora-blur));will-change:transform}
.aurora-blob-1{width:55vmax;height:55vmax;top:-18vmax;left:-10vmax;background:var(--aurora-1);animation:drift-1 22s var(--ease-in-out) infinite alternate}
.aurora-blob-2{width:45vmax;height:45vmax;top:32%;right:-16vmax;background:var(--aurora-2);animation:drift-2 26s var(--ease-in-out) infinite alternate}
.aurora-blob-3{width:40vmax;height:40vmax;bottom:-15vmax;left:28%;background:var(--aurora-3);animation:drift-3 19s var(--ease-in-out) infinite alternate}
.aurora-blob-4{display:none}
.aurora-blob-5{display:none}
@keyframes drift-1{from{transform:translate(0,0) scale(1)}to{transform:translate(7vmax,5vmax) scale(1.1)}}
@keyframes drift-2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-6vmax,-4vmax) scale(0.95)}}
@keyframes drift-3{from{transform:translate(0,0) scale(0.95)}to{transform:translate(5vmax,-6vmax) scale(1.08)}}

/* Dot grid */
.aurora::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--mesh-dot) 1px,transparent 1px);background-size:42px 42px;animation:mesh-drift 50s linear infinite;mix-blend-mode:overlay;pointer-events:none}
@keyframes mesh-drift{from{background-position:0 0}to{background-position:42px 42px}}

/* Subtle radial vignette */
.bg-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 85% 75% at 50% 38%,transparent 42%,var(--vignette) 100%)}

/* Progressive Blur */
.progressive-blur-top{
  position:fixed;top:0;left:0;right:0;
  height:var(--top-blur-h, 132px);
  pointer-events:none;z-index:490;
  transition:height 0.3s var(--ease-out);
}
.progressive-blur-top > div{position:absolute;inset:0;pointer-events:none}
.progressive-blur-top > div:nth-child(1){backdrop-filter:blur(calc(1px * var(--blur-scale, 1)));-webkit-backdrop-filter:blur(calc(1px * var(--blur-scale, 1)));mask-image:linear-gradient(to bottom,black 0%,transparent 22%);-webkit-mask-image:linear-gradient(to bottom,black 0%,transparent 22%)}
.progressive-blur-top > div:nth-child(2){backdrop-filter:blur(calc(3px * var(--blur-scale, 1)));-webkit-backdrop-filter:blur(calc(3px * var(--blur-scale, 1)));mask-image:linear-gradient(to bottom,black 6%,transparent 40%);-webkit-mask-image:linear-gradient(to bottom,black 6%,transparent 40%)}
.progressive-blur-top > div:nth-child(3){backdrop-filter:blur(calc(6px * var(--blur-scale, 1)));-webkit-backdrop-filter:blur(calc(6px * var(--blur-scale, 1)));mask-image:linear-gradient(to bottom,black 16%,transparent 58%);-webkit-mask-image:linear-gradient(to bottom,black 16%,transparent 58%)}
.progressive-blur-top > div:nth-child(4){backdrop-filter:blur(calc(10px * var(--blur-scale, 1)));-webkit-backdrop-filter:blur(calc(10px * var(--blur-scale, 1)));mask-image:linear-gradient(to bottom,black 26%,transparent 76%);-webkit-mask-image:linear-gradient(to bottom,black 26%,transparent 76%)}
.progressive-blur-top > div:nth-child(5){backdrop-filter:blur(calc(15px * var(--blur-scale, 1)));-webkit-backdrop-filter:blur(calc(15px * var(--blur-scale, 1)));mask-image:linear-gradient(to bottom,black 38%,transparent 92%);-webkit-mask-image:linear-gradient(to bottom,black 38%,transparent 92%)}
.progressive-blur-top > div:nth-child(6){backdrop-filter:blur(calc(22px * var(--blur-scale, 1)));-webkit-backdrop-filter:blur(calc(22px * var(--blur-scale, 1)));mask-image:linear-gradient(to bottom,black 50%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}
.progressive-blur-top::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0.6) 0%,transparent 100%);
  opacity:var(--top-scrim, 0);transition:opacity 0.3s var(--ease-out);
}

.progressive-blur-bottom{
  position:fixed;bottom:0;left:0;right:0;height:84px;pointer-events:none;z-index:490;
  backdrop-filter:blur(calc(10px * var(--blur-scale, 1)));
  -webkit-backdrop-filter:blur(calc(10px * var(--blur-scale, 1)));
  mask-image:linear-gradient(to top,black 0%,black 22%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,black 0%,black 22%,transparent 100%);
  opacity:0;transition:opacity 0.4s var(--ease-out);
}
.progressive-blur-bottom.is-on{opacity:1}
.progressive-blur-bottom::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 78%);
}

/* Hairline section divider */
.section-shimmer-rule{
  position:relative;width:100%;height:1px;
  margin:var(--space-2xl) 0;pointer-events:none;
  background:var(--rule);
  opacity:0.8;
}

#interaction-lines-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0.75}
.cursor-spotlight{position:fixed;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.04) 0%,transparent 65%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);transition:opacity 0.3s}
.cursor-follower{display:none}

/* ============ Preloader: Multi-Strip Curtain Reveal ============ */
.preloader{
  position:fixed;inset:0;background:transparent;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  pointer-events:all;
}
.preloader.hidden{
  pointer-events:none;
}
.curtain-backdrop{
  position:absolute;inset:0;display:flex;width:100%;height:100%;z-index:1;
  pointer-events:none;overflow:hidden;
}
.curtain-strip{
  flex:1;height:100%;background:#000000;
  border-right:1px solid rgba(255,255,255,0.08);
  transform:translateY(0);
  transition:transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  will-change:transform;
}
.curtain-strip:last-child{border-right:none}
.preloader.hidden .curtain-strip{transform:translateY(-100%)}
.preloader.hidden .curtain-strip:nth-child(1){transition-delay:0.04s}
.preloader.hidden .curtain-strip:nth-child(2){transition-delay:0.12s}
.preloader.hidden .curtain-strip:nth-child(3){transition-delay:0.20s}
.preloader.hidden .curtain-strip:nth-child(4){transition-delay:0.28s}
.preloader.hidden .curtain-strip:nth-child(5){transition-delay:0.36s}

.loader-content{
  position:relative;z-index:2;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-md);
  transition:opacity 0.35s ease, transform 0.35s ease;
}
.preloader.hidden .loader-content{
  opacity:0;
  transform:translateY(-32px);
}
.loader-logo-wrap{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center}
.loader-logo{width:60px;height:60px;object-fit:contain;border-radius:16px;animation:breathe 2s var(--ease-in-out) infinite alternate}
.loader-logo-wrap::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#ffffff;animation:spin 1.2s linear infinite}
@keyframes breathe{from{transform:scale(0.94)}to{transform:scale(1.03)}}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;letter-spacing:0.35em;color:#ffffff;text-transform:uppercase}
.loader-progress-track{width:160px;height:2px;background:rgba(255,255,255,0.15);border-radius:2px;overflow:hidden;position:relative;margin-top:4px}
.loader-progress-bar{position:absolute;inset:0;background:#ffffff;transform:translateX(-100%);animation:loader-fill 1s cubic-bezier(0.16, 1, 0.3, 1) forwards}
@keyframes loader-fill{to{transform:translateX(0)}}

/* Page Transition */
.page-transition-overlay{position:fixed;inset:0;background:var(--paper);z-index:9998;pointer-events:none;opacity:0;transition:opacity 0.3s var(--ease-out)}
.page-transition-overlay.active{opacity:1;pointer-events:all}

/* ============ Floating glass pill nav (N5) ============ */
.header-wrapper{position:fixed;top:var(--space-sm);left:0;right:0;z-index:500;padding:0 clamp(var(--space-sm),4vw,var(--space-lg));transition:transform var(--dur-2) var(--ease-out)}
.header-container{
  max-width:var(--max-w);margin:0 auto;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--space-2xs) 0 var(--space-md);
  background:var(--glass);backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-pill);
  box-shadow:0 8px 32px var(--shadow-deep),inset 0 1px 0 var(--glass-highlight);
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
}
.header-wrapper.scrolled .header-container{background:rgba(10,10,10,0.85);border-color:var(--glass-border-hover);box-shadow:0 16px 44px var(--shadow-deep),inset 0 1px 0 var(--glass-highlight)}
body.light-theme .header-container{box-shadow:0 8px 32px var(--shadow-light),inset 0 1px 0 var(--glass-highlight)}
body.light-theme .header-wrapper.scrolled .header-container{background:rgba(255,255,255,0.92);box-shadow:0 16px 44px var(--shadow-light),inset 0 1px 0 var(--glass-highlight)}

.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:-0.01em;color:var(--ink)}
.nav-brand-img{width:30px;height:30px;object-fit:contain;border-radius:8px;box-shadow:0 2px 8px var(--shadow-deep)}
.nav-brand span{color:var(--ink-2)}
.nav-right-container{display:flex;align-items:center;gap:var(--space-2xs)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link a{display:inline-block;white-space:nowrap;font-size:var(--text-sm);font-weight:600;color:var(--ink-2);padding:8px 16px;border-radius:var(--radius-pill);transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.nav-link a:hover{color:var(--ink);background:var(--glass-strong)}
.nav-link.active a{color:var(--ink);background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--glass-border)}
.theme-toggle-btn,.nav-toggle{width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-pill);background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--ink);font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.theme-toggle-btn svg,.nav-toggle svg{display:block}
.theme-toggle-btn:hover,.nav-toggle:hover{transform:translateY(-2px);border-color:var(--glass-border-hover)}
.theme-toggle-btn:active,.nav-toggle:active{transform:translateY(0)}
.nav-toggle{display:none}

/* ============ Layout ============ */
.container{max-width:var(--max-w);margin:0 auto;padding:calc(var(--nav-h) + var(--space-2xl)) clamp(var(--space-sm),5vw,var(--space-lg)) var(--space-3xl);position:relative;z-index:2}

/* ============ Loading From Bottom To Top: Cascade Engine ============ */
@keyframes load-from-bottom {
  0% {
    opacity: 0;
    transform: translateY(48px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.enter-bottom {
  opacity: 0;
  transform: translateY(48px);
  animation: load-from-bottom 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--order, 1) * 110ms + 60ms);
}

/* Scroll Reveal Engine: Animate elements from bottom to top on scroll */
.reveal, .reveal-up, .reveal-blur, .reveal-scale, .reveal-left {
  opacity: 0;
  transform: translateY(48px);
  will-change: opacity, transform;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible, .reveal-up.visible, .reveal-blur.visible, .reveal-scale.visible, .reveal-left.visible {
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

/* Stagger Groups: animate children from bottom to top one by one */
.stagger-group > * {
  opacity: 0;
  transform: translateY(44px);
  will-change: opacity, transform;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-group.visible > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger-group.visible > *:nth-child(1) { transition-delay: 50ms; }
.stagger-group.visible > *:nth-child(2) { transition-delay: 130ms; }
.stagger-group.visible > *:nth-child(3) { transition-delay: 210ms; }
.stagger-group.visible > *:nth-child(4) { transition-delay: 290ms; }
.stagger-group.visible > *:nth-child(5) { transition-delay: 370ms; }
.stagger-group.visible > *:nth-child(6) { transition-delay: 450ms; }
.stagger-group.visible > *:nth-child(7) { transition-delay: 530ms; }
.stagger-group.visible > *:nth-child(8) { transition-delay: 610ms; }

/* ============ Solid Obsidian / Monochrome Cards ============ */
.agency-card,.cap-card,.stat-card,.project-card,.sidebar-box,.contact-card-item,.contact-cta-strip{
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-card);
  box-shadow:0 4px 20px -4px var(--shadow-deep),inset 0 1px 0 var(--glass-highlight);
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),border-color var(--dur-2) var(--ease-out),box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:transform;
}
.agency-card::before,.cap-card::before,.stat-card::before,.project-card::before,.contact-card-item::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(255,255,255,0.05),transparent 70%);
  opacity:0;
  transition:opacity 0.35s var(--ease-out);
  pointer-events:none;
  z-index:0;
}
.agency-card::after,.cap-card::after,.stat-card::after,.project-card::after,.contact-card-item::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:radial-gradient(320px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(255,255,255,0.3),transparent 65%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.35s var(--ease-out);
  pointer-events:none;
  z-index:1;
}
.agency-card:hover::before,.cap-card:hover::before,.stat-card:hover::before,.project-card:hover::before,.contact-card-item:hover::before,
.agency-card:hover::after,.cap-card:hover::after,.stat-card:hover::after,.project-card:hover::after,.contact-card-item:hover::after{
  opacity:1;
}
.agency-card > *,.cap-card > *,.stat-card > *,.project-card > *,.contact-card-item > *{
  position:relative;
  z-index:2;
}
.agency-card:hover,.cap-card:hover,.project-card:hover,.contact-card-item:hover{
  transform:translateY(-4px);
  border-color:var(--glass-border-hover);
  box-shadow:0 14px 40px -6px rgba(0,0,0,0.8),inset 0 1px 0 var(--glass-highlight);
}

.card-beam{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1;opacity:0;transition:opacity 0.4s var(--ease-out)}
.card-beam::after{content:"";position:absolute;width:240%;height:240%;top:-70%;left:-70%;background:conic-gradient(from 0deg,transparent 0deg,transparent 310deg,rgba(255,255,255,0.7) 345deg,transparent 360deg);animation:beam-spin 6s linear infinite}
.card-beam::before{content:"";position:absolute;inset:1px;border-radius:calc(var(--radius-card) - 1px);background:var(--card-bg);z-index:1}
.project-card:hover .card-beam,.agency-card:hover .card-beam{opacity:1}
@keyframes beam-spin{to{transform:rotate(360deg)}}

.card-scanline{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.8) 50%,transparent 100%);box-shadow:0 0 12px rgba(255,255,255,0.8);opacity:0;pointer-events:none;z-index:2;top:-10px}
.project-card:hover .card-scanline,.agency-card:hover .card-scanline{opacity:0.9;animation:scanline-sweep 2s cubic-bezier(0.16,1,0.3,1) infinite}
@keyframes scanline-sweep{0%{top:-4px;opacity:0}15%{opacity:1}85%{opacity:0.9}100%{top:100%;opacity:0}}

/* ============ Hero ============ */
.hero-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:var(--space-2xl);align-items:center;min-height:calc(100vh - var(--nav-h) - 180px);padding:var(--space-2xl) 0 var(--space-2xl)}
.hero-hud{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--space-sm);font-family:var(--font-mono);font-size:0.68rem;letter-spacing:var(--tracking-widest);color:var(--ink-3);text-transform:uppercase;font-weight:600}
.hero-hud-dot{width:6px;height:6px;border-radius:50%;background:var(--ink);box-shadow:0 0 8px rgba(255,255,255,0.8);animation:pulse-dot 1.4s var(--ease-in-out) infinite;flex-shrink:0}
.hero-hud-sep{color:var(--rule);opacity:0.6}
.hero-hud-val{color:var(--ink-2);font-weight:700}

.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius-pill);padding:8px 16px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wider);color:var(--ink);margin-bottom:var(--space-lg);text-transform:uppercase}
.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 10px rgba(255,255,255,0.8);animation:pulse-dot 1.8s var(--ease-in-out) infinite;position:relative}
.hero-badge-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.6);animation:radar-ping 2.2s cubic-bezier(0,0,0.2,1) infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.82)}}
@keyframes radar-ping{0%{transform:scale(0.8);opacity:1}100%{transform:scale(3.2);opacity:0}}

.hero-title{font-size:var(--text-display);font-weight:800;line-height:var(--leading-none);letter-spacing:var(--tracking-tighter);margin-bottom:var(--space-md);text-wrap:balance;color:var(--ink)}

/* Hero Word Stagger Animation (Bottom to Top) */
.hero-word{display:inline-block;opacity:0;transform:translateY(40px);animation:hero-word-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards}
@keyframes hero-word-in{to{opacity:1;transform:translateY(0)}}
.hero-word:nth-of-type(1){animation-delay:0.18s}
.hero-word:nth-of-type(2){animation-delay:0.28s}
.hero-word:nth-of-type(3){animation-delay:0.38s}
.hero-word:nth-of-type(4){animation-delay:0.48s}
.hero-word:nth-of-type(5){animation-delay:0.58s}

/* Monochrome High-Contrast Title Emphasis */
.grad,.mono-highlight{
  color:var(--ink);
  display:inline-block;
  text-shadow:0 0 28px rgba(255,255,255,0.35);
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
}

.hero-desc{font-size:1.08rem;color:var(--ink-2);max-width:540px;line-height:var(--leading-relaxed);margin-bottom:var(--space-lg);text-wrap:pretty}
.btn-group{display:flex;gap:var(--space-sm);flex-wrap:wrap}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius-btn);font-size:0.92rem;font-weight:700;white-space:nowrap;min-height:44px;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out);text-decoration:none}
.btn::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transform:skewX(-25deg);transition:left 0.75s ease;pointer-events:none}
.btn:hover::before{left:160%}

.btn-primary{background:#ffffff;color:#000000;box-shadow:0 4px 20px rgba(255,255,255,0.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(255,255,255,0.4)}
.btn-primary:active{transform:translateY(0)}
.btn:disabled,.btn:disabled:hover{opacity:0.55;cursor:not-allowed;transform:none}

.btn-secondary{background:var(--card-bg);border:1px solid var(--glass-border);color:var(--ink)}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--glass-border-hover);background:var(--card-bg-elevated);box-shadow:0 8px 28px rgba(0,0,0,0.5)}
.btn-secondary:active{transform:translateY(0)}

/* Light mode primary button inversion */
body.light-theme .btn-primary{background:#000000;color:#ffffff;box-shadow:0 4px 20px rgba(0,0,0,0.25)}
body.light-theme .btn-primary:hover{box-shadow:0 12px 36px rgba(0,0,0,0.35)}

.hero-scroll-cue{display:inline-flex;align-items:center;gap:12px;margin-top:var(--space-2xl);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-3);letter-spacing:var(--tracking-wider);text-transform:uppercase;font-weight:600;opacity:0.85;transition:opacity var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);text-decoration:none}
.hero-scroll-cue:hover{opacity:1;color:var(--ink)}
.hero-scroll-mouse{width:20px;height:32px;border-radius:10px;border:1.5px solid var(--glass-border-hover);position:relative;display:flex;justify-content:center;background:var(--glass)}
.hero-scroll-dot{width:3px;height:6px;border-radius:3px;background:var(--ink);position:absolute;top:6px;animation:scroll-dot-slide 2s var(--ease-in-out) infinite}
@keyframes scroll-dot-slide{0%{opacity:0;transform:translateY(0)}30%{opacity:1}70%{opacity:0.8;transform:translateY(12px)}100%{opacity:0;transform:translateY(14px)}}

/* Hero orb visual */
.hero-right{display:flex;align-items:center;justify-content:center;perspective:900px}
.orb{position:relative;width:min(300px,64vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;will-change:transform;animation:float 7s var(--ease-in-out) infinite alternate}
@keyframes float{from{transform:translateY(-8px)}to{transform:translateY(10px)}}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);opacity:0.7;animation:spin 16s linear infinite,breathe 5s var(--ease-in-out) infinite alternate}
.orb-ring-2{position:absolute;inset:-12px;border-radius:50%;border:1.5px dashed rgba(255,255,255,0.3);opacity:0.6;animation:spin-reverse 24s linear infinite;pointer-events:none}
@keyframes spin-reverse{to{transform:rotate(-360deg)}}
.orb::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--glass-strong);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),0 24px 64px rgba(0,0,0,0.8)}
.orb img{position:relative;width:52%;height:52%;object-fit:contain;border-radius:24%;filter:drop-shadow(0 12px 32px var(--shadow-deep))}
body.light-theme .orb img{filter:drop-shadow(0 12px 32px var(--shadow-light))}

.hero-stats{display:flex;gap:var(--space-sm);margin-top:var(--space-xl);flex-wrap:wrap}
.hero-stat-item{background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--radius-input);padding:var(--space-2xs) var(--space-sm)}
.hero-stat-num{font-size:1.75rem;font-weight:700;color:var(--ink);display:block;line-height:1.2;letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.hero-stat-lbl{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:600}

/* ============ Marquee ============ */
.marquee-section{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--space-sm) 0;overflow:hidden;position:relative;z-index:2;margin-bottom:var(--space-3xl);background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:var(--space-xl);animation:marquee 26s linear infinite;white-space:nowrap;width:max-content}
.marquee-section:hover .marquee-track,.marquee-section:focus-within .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:0.82rem;font-weight:600;color:var(--ink-2);letter-spacing:var(--tracking-wide);padding:4px 12px;border-radius:var(--radius-pill);transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.marquee-item:hover{color:var(--ink);background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--glass-border-hover);transform:scale(1.05)}
.marquee-dot{width:5px;height:5px;border-radius:50%;background:var(--ink);flex-shrink:0;box-shadow:0 0 6px rgba(255,255,255,0.6)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ Section Headings ============ */
.section-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--ink-2);margin-bottom:var(--space-sm);display:inline-flex;align-items:center;gap:8px}
.section-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);box-shadow:0 0 8px rgba(255,255,255,0.8);flex-shrink:0}
.section-title-lg{font-size:var(--text-display-s);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--ink);margin-bottom:var(--space-xl);text-wrap:balance}
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-lg);gap:var(--space-md)}
.section-head-row .section-title-lg{margin-bottom:0}
.view-all-link{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.view-all-link:hover{color:var(--ink);transform:translateX(3px)}

/* ============ Agencies ============ */
.agencies-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin-bottom:var(--space-3xl)}
.agency-card{padding:var(--space-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);cursor:pointer}
.agency-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-sm)}
.agency-logo-img{width:44px;height:44px;border-radius:12px;object-fit:contain;box-shadow:0 4px 14px var(--shadow-deep)}
.agency-tag{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:var(--tracking-wide);color:var(--ink-3);display:block;margin-bottom:4px}
.agency-name{font-size:1.35rem;font-weight:700;color:var(--ink);display:block;letter-spacing:var(--tracking-tight)}
.agency-arrow{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass-strong);font-size:1.1rem;color:var(--ink);transition:transform var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.agency-card:hover .agency-arrow{transform:translate(3px,-3px);color:var(--ink);border-color:var(--glass-border-hover)}

/* ============ Capabilities ============ */
.caps-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-md);margin-bottom:var(--space-3xl)}
.cap-card{padding:var(--space-md) var(--space-lg);display:grid;grid-template-columns:48px minmax(0,0.8fr) minmax(0,1.6fr);gap:var(--space-md);align-items:center}
.cap-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--ink)}
.cap-title{font-size:1.1rem;font-weight:700;color:var(--ink)}
.cap-desc{font-size:0.9rem;color:var(--ink-2);line-height:1.7}

/* ============ Stats ============ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--space-md);margin-bottom:var(--space-3xl)}
.stat-card{padding:var(--space-lg) var(--space-md);text-align:center}
.stat-num{font-size:clamp(2.3rem,4.5vw,3.1rem);font-weight:800;color:var(--ink);line-height:1.08;margin-bottom:var(--space-2xs);display:block;letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;transition:text-shadow var(--dur-2) var(--ease-out)}
.stat-card:hover .stat-num{text-shadow:0 0 32px rgba(255,255,255,0.4)}
.stat-lbl{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--ink-3);font-weight:600}

/* ============ Project Cards ============ */
.featured-grid,.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:var(--space-md)}
.project-card{padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}
.project-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xs)}
.project-mini-logo{width:46px;height:46px;border-radius:12px;object-fit:cover;box-shadow:0 4px 14px var(--shadow-deep)}
.badge-row{display:flex;align-items:center;gap:10px;min-width:0}
.agency-badge{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:0.04em;padding:4px 12px;border-radius:var(--radius-pill);white-space:nowrap;color:var(--ink);background:rgba(255,255,255,0.06);border:1px solid var(--glass-border)}
body.light-theme .agency-badge{background:rgba(0,0,0,0.05);color:var(--ink)}

.status-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:0.04em;padding:4px 12px;border-radius:var(--radius-pill);color:var(--ink);background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);white-space:nowrap}
.status-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);box-shadow:0 0 6px rgba(255,255,255,0.8);animation:pulse-dot 1.8s var(--ease-in-out) infinite}
body.light-theme .status-badge{background:rgba(0,0,0,0.05)}

.project-title{font-size:1.3rem;font-weight:700;color:var(--ink);cursor:pointer;transition:color var(--dur-1) var(--ease-out)}
.project-title:hover{color:var(--ink)}
.project-desc{font-size:0.9rem;color:var(--ink-2);line-height:1.7}
.project-card-footer{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:auto;padding-top:var(--space-sm);border-top:1px solid var(--rule)}
.project-tech-list{display:flex;flex-wrap:wrap;gap:6px}
.project-tech-item{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:0.03em;padding:4px 12px;border-radius:var(--radius-pill);border:1px solid var(--glass-border);color:var(--ink-2)}
.project-btn-link{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-1) var(--ease-out)}
.project-btn-link:hover{color:var(--ink-2)}

/* BeatWave download */
.beatwave-download-container{display:flex;flex-direction:column;gap:var(--space-2xs);padding-top:var(--space-2xs)}
.beatwave-download-btn-group{display:flex;gap:var(--space-2xs)}
.btn-download-action{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:var(--radius-btn);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;white-space:nowrap;color:var(--ink);background:var(--glass-strong);border:1px solid var(--glass-border);min-height:44px;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.btn-download-action:hover{transform:translateY(-2px);background:var(--ink);color:var(--accent-ink);border-color:var(--ink);box-shadow:0 8px 24px rgba(255,255,255,0.2)}
.live-download-ticker{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--ink-2)}
.live-download-ticker.large-counter{font-size:0.95rem;color:var(--ink)}
.live-download-pulse{width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 10px rgba(255,255,255,0.8);animation:pulse-dot 1.4s var(--ease-in-out) infinite;flex-shrink:0}

/* UPI support button */
.upi-support-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:var(--radius-btn);color:var(--accent-ink);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;white-space:nowrap;background:var(--ink);min-height:44px;box-shadow:0 8px 24px rgba(0,0,0,0.5);transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.upi-support-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,255,255,0.2)}
.upi-support-btn img{width:20px;height:20px;object-fit:contain;border-radius:4px}

/* Contact CTA Strip */
.contact-cta-strip{padding:clamp(var(--space-xl),8vw,var(--space-3xl)) var(--space-lg);text-align:center;margin-top:var(--space-3xl);margin-bottom:var(--space-3xl);position:relative;overflow:hidden}
.contact-cta-strip::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:70%;height:80%;background:radial-gradient(ellipse,rgba(255,255,255,0.06),transparent 70%);pointer-events:none}
.contact-cta-strip .section-title-lg{margin-bottom:var(--space-sm);position:relative}
.contact-cta-strip .section-label{position:relative}
.contact-cta-strip p{color:var(--ink-2);max-width:480px;margin:0 auto var(--space-lg);font-size:0.95rem;position:relative}
.contact-cta-strip > div:last-child{position:relative}

/* Contact layout */
.contact-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl);margin-top:var(--space-lg)}
.contact-details{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-lg)}
.contact-card-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md)}
.contact-icon-box{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--ink)}
.contact-info-lbl{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-3);display:block;margin-bottom:2px}
.contact-info-val{font-size:0.92rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
a.contact-info-val:hover{color:var(--ink-2)}
.highlight-text{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.45;margin-bottom:var(--space-2xs)}

/* Contact Form */
.contact-form{display:flex;flex-direction:column;gap:var(--space-md);background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:var(--space-lg);box-shadow:0 4px 20px -4px var(--shadow-deep),inset 0 1px 0 var(--glass-highlight)}
.form-group{display:flex;flex-direction:column;gap:var(--space-2xs);min-height:0}
.form-lbl{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-3)}
.form-input,.form-textarea{background:var(--paper-2);border:1px solid var(--glass-border);border-radius:var(--radius-input);padding:12px 16px;color:var(--ink);font-size:0.92rem;font-family:var(--font-body);outline:none;width:100%}
.form-input:focus,.form-textarea:focus{border-color:var(--ink);box-shadow:0 0 0 2px rgba(255,255,255,0.2)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink-3)}
.form-textarea{min-height:140px;resize:vertical}

/* Page Intro */
.page-intro{padding-bottom:var(--space-xl);margin-bottom:var(--space-xl);border-bottom:1px solid var(--rule)}
.page-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--ink-2);margin-bottom:var(--space-sm);display:inline-flex;align-items:center;gap:8px}
.page-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);box-shadow:0 0 8px rgba(255,255,255,0.8);flex-shrink:0}
.page-title{font-size:var(--text-display-s);font-weight:800;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--ink);margin-bottom:var(--space-sm);text-wrap:balance}
.page-desc{font-size:1.06rem;color:var(--ink-2);max-width:640px;line-height:var(--leading-relaxed);text-wrap:pretty}

/* About Layout */
.about-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-xl)}
.about-text{display:flex;flex-direction:column;gap:var(--space-md)}
.about-text p{font-size:0.98rem;color:var(--ink-2);line-height:1.8;text-wrap:pretty}
.about-text blockquote{font-size:1.08rem;line-height:1.65;color:var(--ink);border-left:2px solid var(--ink);padding-left:var(--space-md);margin-bottom:var(--space-xs);font-weight:500;text-wrap:balance}
.about-sidebar{display:flex;flex-direction:column;gap:var(--space-md)}
.sidebar-box{padding:var(--space-lg)}
.sidebar-title{font-family:var(--font-display);font-size:0.95rem;font-weight:700;color:var(--ink);margin-bottom:var(--space-md);overflow-wrap:anywhere;min-width:0}
.sidebar-list{display:flex;flex-direction:column;gap:var(--space-xs)}
.sidebar-item{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2xs)}
.sidebar-item-lbl{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-3)}
.sidebar-item-val{font-size:var(--text-sm);font-weight:700;color:var(--ink);text-align:right}
.social-links-vertical{display:flex;flex-direction:column;gap:var(--space-2xs)}
.social-link-item{font-size:var(--text-sm);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur-1) var(--ease-out)}
.social-link-item:hover{color:var(--ink)}

/* Filter tabs */
.filter-tabs{display:flex;gap:var(--space-2xs);margin-bottom:var(--space-lg);flex-wrap:wrap}
.filter-tab{padding:8px 20px;border-radius:var(--radius-btn);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;white-space:nowrap;background:var(--card-bg);border:1px solid var(--glass-border);color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.filter-tab:hover{transform:translateY(-2px);border-color:var(--glass-border-hover);color:var(--ink);background:var(--card-bg-elevated)}
.filter-tab:active{transform:translateY(0)}
.filter-tab.active{background:var(--ink);color:var(--accent-ink);border-color:transparent;box-shadow:0 4px 16px rgba(255,255,255,0.2)}
.filter-tab.active:hover{color:var(--accent-ink)}

/* Tactile button ripple */
.btn,.filter-tab,.btn-download-action,.upi-support-btn{position:relative;overflow:hidden}
.btn-ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.4) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);animation:ripple-spread 0.6s cubic-bezier(0.16,1,0.3,1) forwards;pointer-events:none;z-index:10}
@keyframes ripple-spread{to{transform:translate(-50%,-50%) scale(4);opacity:0}}

/* Filter transition states */
.project-card{transition:opacity 0.35s cubic-bezier(0.16,1,0.3,1),transform 0.45s cubic-bezier(0.16,1,0.3,1),border-color var(--dur-2) var(--ease-out),box-shadow 0.45s cubic-bezier(0.16,1,0.3,1)}
.project-card.filter-hidden{opacity:0 !important;transform:scale(0.93) translateY(12px) !important;pointer-events:none !important;visibility:hidden;position:absolute;clip-path:inset(100%)}

/* Glass Toast Notification */
.toast-notification{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(40px) scale(0.94);opacity:0;background:var(--card-bg);border:1px solid var(--glass-border-hover);color:var(--ink);padding:11px 22px;border-radius:var(--radius-pill);box-shadow:0 16px 40px var(--shadow-deep);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;display:flex;align-items:center;gap:10px;z-index:10000;pointer-events:none;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),opacity 0.3s ease}
.toast-notification.active{transform:translateX(-50%) translateY(0) scale(1);opacity:1}
.toast-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}

/* Preview Modal */
.preview-modal{position:fixed;inset:0;z-index:1000;background:var(--veil);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:var(--space-md)}
.preview-modal.active{display:flex}
.preview-modal-content{background:var(--card-bg-elevated);border:1px solid var(--glass-border-hover);border-radius:24px;width:100%;max-width:540px;padding:var(--space-lg);position:relative;animation:modal-pop 0.3s var(--ease-out);box-shadow:0 32px 80px var(--shadow-deep),inset 0 1px 0 var(--glass-highlight)}
@keyframes modal-pop{from{transform:translateY(16px) scale(0.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.preview-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}
.preview-modal-header h3{font-size:1.3rem;font-weight:700;color:var(--ink)}
.preview-modal-close{width:44px;height:44px;border-radius:50%;color:var(--ink-2);display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--glass-border);cursor:pointer;transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.preview-modal-close:hover{color:var(--ink);border-color:var(--glass-border-hover);transform:scale(1.05)}
.preview-modal-body{display:flex;flex-direction:column;gap:var(--space-md)}
.preview-modal-hero{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);border-radius:var(--radius-input);background:var(--glass);border:1px solid var(--glass-border)}
.preview-modal-hero-logo{width:60px;height:60px;flex-shrink:0;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:var(--glass-strong);border:1px solid var(--glass-border)}
.preview-modal-hero-logo img{width:100%;height:100%;object-fit:cover}
.preview-modal-hero-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:2px;overflow-wrap:anywhere;min-width:0;color:var(--ink)}
.preview-modal-desc{font-size:0.88rem;color:var(--ink-2);line-height:1.65}
.preview-modal-url{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink);margin-top:4px;overflow-wrap:anywhere}
.preview-modal-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xs)}
.preview-modal-spec-item{border:1px solid var(--glass-border);background:var(--glass);border-radius:var(--radius-input);padding:var(--space-2xs);text-align:center}
.preview-modal-spec-lbl{font-family:var(--font-mono);font-size:0.62rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-3);margin-bottom:4px}
.preview-modal-spec-val{font-size:0.8rem;font-weight:700;color:var(--ink)}

/* ============ Chat Bubble ============ */
.chat-bubble-wrapper{position:fixed;bottom:var(--space-lg);right:var(--space-lg);z-index:800}
.chat-bubble-trigger{width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--accent-ink);box-shadow:0 10px 32px rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:transform var(--dur-1) var(--ease-out)}
.chat-bubble-trigger:hover{transform:translateY(-3px) scale(1.04)}
.chat-bubble-trigger:active{transform:scale(0.97)}
.chat-bubble-icon{display:flex;align-items:center;justify-content:center;color:var(--accent-ink);z-index:1}
.chat-bubble-icon svg{display:block}
.chat-bubble-pulse{position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(255,255,255,0.4);animation:ring-pulse 2.2s var(--ease-out) infinite}
@keyframes ring-pulse{0%{transform:scale(1);opacity:0.55}100%{transform:scale(1.35);opacity:0}}
.chat-box-container{position:absolute;bottom:72px;right:0;width:344px;background:var(--card-bg-elevated);border:1px solid var(--glass-border-hover);border-radius:24px;display:none;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px var(--shadow-deep),inset 0 1px 0 var(--glass-highlight);transform-origin:bottom right}
.chat-box-container.active{display:flex;animation:modal-pop 0.25s var(--ease-out)}
.chat-header{padding:var(--space-sm) var(--space-md);display:flex;align-items:center;justify-content:space-between;background:var(--glass);border-bottom:1px solid var(--glass-border)}
.chat-header-info{display:flex;align-items:center;gap:10px}
.chat-header-avatar{width:32px;height:32px;border-radius:50%;object-fit:contain;background:var(--glass-strong)}
.chat-header-title{font-family:var(--font-display);font-size:0.9rem;font-weight:700;color:var(--ink)}
.chat-close-btn{width:36px;height:36px;border-radius:50%;color:var(--ink-2);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.chat-close-btn:hover{color:var(--ink);background:var(--glass-strong)}
.chat-body{flex:1;max-height:300px;overflow-y:auto;padding:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-2xs);scrollbar-width:thin;scrollbar-color:var(--glass-border) transparent}
.chat-msg{padding:8px 16px;border-radius:16px;font-size:0.85rem;line-height:1.55;max-width:88%}
.chat-msg.user{background:var(--ink);color:var(--accent-ink);align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg.assistant{background:var(--glass);border:1px solid var(--glass-border);color:var(--ink-2);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg-typing{display:none;gap:5px;align-items:center;padding:8px 16px}
.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:typing-bounce 1.2s var(--ease-in-out) infinite}
.typing-dot:nth-child(2){animation-delay:0.2s}
.typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes typing-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.chat-pills-container{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chat-pill{padding:8px 16px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;white-space:nowrap;background:var(--glass);border:1px solid var(--glass-border);color:var(--ink-2);transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.chat-pill:hover{background:var(--ink);color:var(--accent-ink);border-color:transparent}
.chat-footer{padding:var(--space-2xs) var(--space-sm);border-top:1px solid var(--glass-border);display:flex;gap:var(--space-2xs);background:var(--glass)}
.chat-input{flex:1;min-width:0;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--radius-pill);padding:9px 16px;font-size:0.85rem;color:var(--ink);font-family:var(--font-body);outline:none}
.chat-input:focus{border-color:var(--ink)}
.chat-input::placeholder{color:var(--ink-3)}
.chat-send-btn{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;cursor:pointer;border:none;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.chat-send-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,255,255,0.25)}

/* ============ Footer ============ */
footer{position:relative;z-index:2;border-top:1px solid var(--rule);background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}
.footer-content{max-width:var(--max-w);margin:0 auto;padding:var(--space-lg) clamp(var(--space-sm),5vw,var(--space-lg));display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
.footer-brand{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--ink)}
.footer-brand span{color:var(--ink-2)}
.footer-content div{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-3)}
.footer-content a{transition:color var(--dur-1) var(--ease-out)}
.footer-content a:hover{color:var(--ink)}

/* ============ 404 Error Page ============ */
.error-layout{min-height:calc(100vh - var(--nav-h) - 180px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-2xl) 0;position:relative;z-index:2}
.error-code{font-size:clamp(5.5rem,16vw,11rem);font-weight:800;line-height:0.95;letter-spacing:var(--tracking-tighter);margin-bottom:var(--space-xs);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--ink);text-shadow:0 0 32px rgba(255,255,255,0.3)}
.error-title{font-size:clamp(1.4rem,4vw,2.4rem);font-weight:700;letter-spacing:var(--tracking-tight);color:var(--ink);margin-bottom:var(--space-sm);text-wrap:balance}
.error-desc{font-size:1rem;color:var(--ink-2);max-width:520px;line-height:var(--leading-relaxed);margin:0 auto var(--space-xl);text-wrap:pretty}
.error-hud-box{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-xl);max-width:460px;width:100%;text-align:left;font-family:var(--font-mono);font-size:var(--text-xs);box-shadow:0 8px 32px var(--shadow-deep)}
.error-hud-line{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule);gap:8px}
.error-hud-line:last-child{border-bottom:none}
.error-hud-lbl{color:var(--ink-3)}
.error-hud-val{color:var(--ink);font-weight:600}

/* ============ Responsive Breakpoints ============ */
@media(max-width:1024px){
  .hero-layout{grid-template-columns:1fr;text-align:center;gap:var(--space-xl)}
  .hero-right{order:-1;margin-bottom:var(--space-sm)}
  .hero-desc{margin-left:auto;margin-right:auto}
  .btn-group{justify-content:center}
  .hero-stats{justify-content:center}
  .agencies-grid{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr}
  .about-layout{grid-template-columns:1fr}
  .caps-grid{grid-template-columns:1fr}
  .cap-card{grid-template-columns:1fr;text-align:center;justify-items:center}
}

@media(max-width:768px){
  .nav-toggle{display:flex !important}
  .nav-links{display:none;position:absolute;top:76px;left:clamp(var(--space-sm),4vw,var(--space-lg));right:clamp(var(--space-sm),4vw,var(--space-lg));background:var(--card-bg-elevated);border:1px solid var(--glass-border-hover);border-radius:var(--radius-card);padding:var(--space-md);flex-direction:column;gap:var(--space-xs);box-shadow:0 24px 64px var(--shadow-deep)}
  .nav-links.open{display:flex}
  .nav-link a{display:block;padding:12px 16px;text-align:center;font-size:1rem}
  .chat-box-container{width:calc(100vw - 32px);right:-8px}
}

@media(min-width:769px){
  .nav-toggle{display:none !important}
  .nav-links{display:flex !important}
}

/* ============ Reduced Motion ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aurora-blob,.aurora::before{animation:none}
  .orb,.orb-ring,.orb-ring-2,.loader-logo,.loader-logo-wrap::before{animation:none}
  .scroll-progress-bar::after{display:none}
  .marquee-track{animation-duration:80s}
  .reveal,.reveal-up,.reveal-blur,.reveal-scale,.reveal-left,.stagger-group > *{transition:opacity 0.15s ease !important;transform:none !important}
  .curtain-strip{transition:opacity 0.2s ease !important;transform:none !important}
  .preloader.hidden .curtain-strip{opacity:0;transform:none !important}
  .enter-bottom,.hero-word{animation:none !important;opacity:1 !important;transform:none !important}
  .btn-ripple{display:none}
  .btn::before{display:none}
  .card-beam,.card-scanline{display:none}
  .hero-hud-dot,.hero-badge-dot,.live-download-pulse{animation:none}
  .chat-bubble-pulse{animation:none}
}

/* ============ Performance Tier: Mobile Viewports ============ */
@media(max-width:900px), (pointer:coarse){
  :root{
    --aurora-blur:0px;
    --blur-scale:0;
    --top-blur-h:0px;
  }
  
  #interaction-lines-canvas,
  .cursor-spotlight,
  .cursor-follower,
  .card-beam,
  .card-scanline,
  .progressive-blur-top,
  .progressive-blur-bottom{
    display:none !important;
  }

  .aurora{background:#000000}
  .aurora-blob,
  .aurora::before,
  .aurora::after{
    display:none !important;
    animation:none !important;
  }

  .agency-card::before, .cap-card::before, .stat-card::before, .project-card::before, .contact-card-item::before,
  .agency-card::after, .cap-card::after, .stat-card::after, .project-card::after, .contact-card-item::after{
    display:none !important;
  }

  .marquee-section,
  .header-container,
  .chat-box-container,
  .preview-modal-content,
  footer,
  .hero-stat-item,
  .orb::before,
  .preview-modal,
  .nav-links.open,
  .footer-statement,
  .toast-notification{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .marquee-section{background:var(--paper-2)}
  .header-container{background:var(--paper-2)}
  .chat-box-container,.preview-modal-content,.nav-links.open{background:var(--card-bg-elevated)}
  .chat-header,.chat-footer{background:var(--paper-2)}
  .hero-stat-item,.orb::before{background:var(--card-bg)}
  footer{background:var(--paper)}
  .footer-statement{background:var(--paper-2);box-shadow:inset 0 1px 0 var(--glass-highlight)}
  .footer-statement::before{display:none !important}

  .orb{animation:none !important;transform:none !important}
  .orb-ring,.orb-ring-2{animation:none !important;opacity:0.35 !important}

  .reveal,.reveal-up,.reveal-blur,.reveal-scale,.reveal-left,.stagger-group > *{
    filter:none !important;
    transform:translateY(18px);
    transition:opacity 0.4s ease-out, transform 0.4s ease-out !important;
  }
  .reveal.visible,.reveal-up.visible,.reveal-scale.visible,.reveal-left.visible,.stagger-group.visible > *{
    transform:translateY(0) !important;
    opacity:1 !important;
  }

  .agency-card,.cap-card,.stat-card,.project-card,.contact-card-item,.sidebar-box,.contact-form{
    transform:none !important;
    transform-style:flat !important;
    box-shadow:0 2px 10px var(--shadow-deep), inset 0 1px 0 var(--glass-highlight) !important;
  }
  .agency-card:hover,.cap-card:hover,.project-card:hover,.contact-card-item:hover{
    transform:none !important;
  }

  .agency-card,.cap-card,.stat-card,.project-card,.contact-card-item,.sidebar-box,.btn,.filter-tab,
  .hero-title,.hero-desc,.section-title-lg,.section-label,.page-title,.page-desc,
  .reveal,.reveal-up,.reveal-blur,.reveal-scale,.reveal-left,.stagger-group > *{
    will-change:auto !important;
  }
}