:root{
  --bg: #0a0e17;
  --bg-soft: #0d1220;
  --card: rgba(255,255,255,0.045);
  --card-border: rgba(255,255,255,0.09);
  --text: #f3f5f9;
  --text-dim: #9aa3b5;
  --text-dimmer: #6b7386;
  --blue: #0EA7F2;
  --blue-soft: #2b5fd9;
  --radius: 14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* NOTE: no html{scroll-behavior:smooth} here on purpose — Lenis (in
   animations.js) drives smooth scrolling on desktop, and the native CSS
   smoothing was fighting it (both trying to animate scrollTop at once),
   which is what caused scrolling to drag and then catch up in a rush.
   Anchor-link fallback still gets a smooth scroll via the explicit
   {behavior:'smooth'} option in script.js, independent of this rule. */
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-0.02em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  color:var(--blue);
  background:rgba(61,123,255,0.12);
  border:1px solid rgba(61,123,255,0.25);
  padding:5px 14px;
  border-radius:100px;
  margin-bottom:18px;
}
.accent{color:var(--blue);}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  border-radius:100px;
  font-weight:600;
  font-size:14.5px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary{
  background:linear-gradient(180deg,#4a86ff,var(--blue-soft));
  color:#fff;
  box-shadow:0 8px 24px -8px rgba(61,123,255,0.6);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(61,123,255,0.75);}
.btn-light{background:#fff;color:#0a0e17;}
.btn-light:hover{transform:translateY(-2px);}
.btn-outline{border:1px solid var(--card-border);color:var(--text);}
.btn-outline:hover{border-color:rgba(255,255,255,0.3);transform:translateY(-2px);}
.btn-icon{
  width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;
}
.btn-primary .btn-icon{background:rgba(255,255,255,0.25);}
.btn-light .btn-icon{background:rgba(10,14,23,0.85);color:#fff;}
.btn-outline .btn-icon{background:rgba(255,255,255,0.1);}

/* ===== NAV ===== */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,14,23,0.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
header.scrolled{
  background:rgba(8,11,18,0.92);
  box-shadow:0 10px 28px -12px rgba(0,0,0,0.5);
  border-bottom-color:rgba(255,255,255,0.1);
}
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;max-width:1200px;margin:0 auto;
}
.menu-btn{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--text-dim);
  padding:9px 16px;border:1px solid var(--card-border);border-radius:100px;
  transition:border-color .2s ease, color .2s ease;
}
.menu-btn:hover{color:var(--text);border-color:rgba(255,255,255,0.25);}
.menu-btn span.bars{
  display:flex;flex-direction:column;gap:3px;
  width:15px;height:13px;justify-content:center;
}
.menu-btn span.bars i{
  width:15px;height:2px;background:var(--text-dim);display:block;border-radius:2px;
  transition:transform .3s ease, opacity .2s ease, background .2s ease;
  transform-origin:center;
}
/* hamburger -> X morph when menu is open (driven by aria-expanded, no extra JS needed) */
.menu-btn[aria-expanded="true"] span.bars i:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span.bars i:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span.bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
.logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;}
.logo-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(160deg,#5c96ff,var(--blue-soft));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;color:#fff;
  box-shadow:0 6px 16px -4px rgba(61,123,255,0.7);
}
.logo-text{line-height:1.1;}
.logo-text b{font-size:17px;font-weight:700;letter-spacing:0.02em;display:block;}
.logo-text small{font-size:9px;color:var(--text-dimmer);letter-spacing:0.18em;}

/* ===== MENU PANEL ===== */
.menu-overlay{
  position:fixed;inset:0;background:rgba(6,9,16,0.6);
  backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
  z-index:150;
}
.menu-overlay.open{opacity:1;pointer-events:auto;}
.menu-panel{
  position:fixed;top:0;left:0;bottom:0;
  width:320px;max-width:82vw;
  background:var(--bg-soft);
  border-right:1px solid var(--card-border);
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:151;
  display:flex;flex-direction:column;
  padding:26px 26px 30px;
}
.menu-panel.open{transform:translateX(0);}
.menu-panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:38px;}
.menu-close{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--text-dim);
  transition:transform .25s ease, border-color .2s ease, color .2s ease;
}
.menu-close:hover{color:#fff;border-color:rgba(255,255,255,0.3);transform:rotate(90deg);}
.menu-links{list-style:none;display:flex;flex-direction:column;gap:2px;margin-bottom:auto;}
.menu-links li a{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 6px;font-size:17px;font-weight:500;
  color:#e6e9f0;border-bottom:1px solid rgba(255,255,255,0.05);
  transition:color .18s ease, padding-left .18s ease;
}
.menu-links li a:hover,.menu-links li a.active{color:var(--blue);padding-left:12px;}
.menu-links li a .arrow{font-size:14px;color:var(--text-dimmer);transition:transform .25s ease;}
.menu-links li a:hover .arrow{transform:translateX(4px);}
.menu-links li a::after{
  content:'';position:absolute;left:6px;right:6px;bottom:0;height:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.menu-links li a:hover::after,.menu-links li a.active::after{transform:scaleX(1);}
.menu-panel-foot{padding-top:24px;}
.menu-panel-foot p{font-size:12.5px;color:var(--text-dimmer);margin-bottom:14px;}
.menu-panel-foot a.email{font-size:14px;color:var(--blue);font-weight:600;display:block;margin-bottom:18px;}
.menu-social{display:flex;gap:10px;}
.menu-social span{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-dim);
}
body.no-scroll{overflow:hidden;}

/* ===== SPLIT-TEXT WORD REVEAL (used by animations.js) ===== */
.split-line{display:inline-block;overflow:hidden;vertical-align:top;}
.split-word{display:inline-block;will-change:transform;}

/* ===== CUSTOM CURSOR (desktop only; created dynamically by animations.js) ===== */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none !important;z-index:160;
  border-radius:50%;transform:translate(-50%,-50%);
}
.cursor-dot{width:6px;height:6px;background:var(--blue);}
.cursor-ring{
  width:34px;height:34px;border:1px solid rgba(255,255,255,0.35);
  transition:width .25s ease,height .25s ease,border-color .25s ease,background .25s ease;
  display:flex;align-items:center;justify-content:center;
}
.cursor-ring.is-hover{width:52px;height:52px;border-color:rgba(61,123,255,0.6);background:rgba(61,123,255,0.08);}
.cursor-ring.is-view{width:76px;height:76px;border-color:transparent;background:rgba(10,14,23,0.8);}
.cursor-ring .cursor-label{opacity:0;font-size:11px;font-weight:600;letter-spacing:.04em;color:#fff;transition:opacity .2s ease;}
.cursor-ring.is-view .cursor-label{opacity:1;}
body.has-custom-cursor,body.has-custom-cursor a,body.has-custom-cursor button{cursor:none;}
@media (max-width:1024px){
  .cursor-dot,.cursor-ring{display:none !important;}
}

/* ===== HERO (home) — from-scratch redesign =====
   Canvas particle-network background + character-scramble headline
   reveal + pure-CSS orbiting service icons around a central core.
   Replaces the earlier photo/glass-card hero entirely. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:82vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:50px 0 0px;
  background:radial-gradient(circle at 50% 20%, #0d1830 0%, var(--bg) 62%);
}
.hero-canvas{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;
}
.hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 35%, var(--bg) 92%),
    linear-gradient(180deg, rgba(6,9,16,0.35) 0%, transparent 18%, transparent 78%, var(--bg) 100%);
}

/* small label that appears near the cursor when it connects to one of
   the canvas network's labelled "service" nodes */
.hero-node-tag{
  position:absolute;top:0;left:0;z-index:8;
  pointer-events:none;opacity:0;
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;color:#eaf1ff;white-space:nowrap;
  background:rgba(12,17,28,0.85);
  border:1px solid rgba(120,170,255,0.35);
  padding:6px 12px 6px 9px;border-radius:100px;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px -6px rgba(61,123,255,0.5);
}
.hero-node-tag::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 3px rgba(61,123,255,0.25);
  flex-shrink:0;
}
@media (max-width:1024px){
  .hero-node-tag{display:none;}
}

.hero-content{position:relative;z-index:2;text-align:center;}
.hero-tag{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;color:#c7d3ea;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
  padding:7px 16px 7px 12px;border-radius:100px;margin-bottom:26px;
}
.hero-tag-dot{
  width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 3px rgba(61,123,255,0.25);
  animation:hero-tag-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-tag-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(61,123,255,0.25);}
  50%{box-shadow:0 0 0 6px rgba(61,123,255,0.1);}
}

.hero h1.hero-scramble{
  text-align:center;font-size:58px;font-weight:600;
  line-height:1.12;max-width:860px;margin:0 auto 22px;
  font-variant-ligatures:none;
}
.hero h1.hero-scramble .accent{
  background:linear-gradient(90deg,#3d7bff 0%,#a9c8ff 25%,#3d7bff 50%,#a9c8ff 75%,#3d7bff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hero-shimmer 7s linear infinite;
}
@keyframes hero-shimmer{ to { background-position:-200% center; } }
.scramble-ch{display:inline-block;}

.hero-sub{
  font-size:17px;color:var(--text-dim);max-width:520px;
  margin:0 auto 34px;line-height:1.6;
}

.hero-cta-row{
  display:flex;align-items:center;justify-content:center;gap:22px;
  flex-wrap:wrap;margin-bottom:42px;
}
.hero-play{
  display:inline-flex;align-items:center;gap:12px;
  font-size:14px;font-weight:600;color:var(--text);
}
.hero-play-ring{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.hero-play:hover .hero-play-ring{border-color:var(--blue);background:rgba(61,123,255,0.12);transform:scale(1.06);}
.hero-play-ring .play{
  width:16px;height:16px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#0a0e17;font-size:7px;
}

.hero-live-stats{
  display:flex;align-items:center;justify-content:center;
  gap:44px;flex-wrap:wrap;
}
.live-stat{text-align:center;}
.live-stat b{
  font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;
  display:block;color:#fff;line-height:1.2;
}
.live-stat span{font-size:12.5px;color:var(--text-dim);}

/* ---- orbiting service icons (pure CSS spin + counter-spin) ---- */
.hero-orbit{
  position:relative;z-index:2;
  width:280px;height:280px;
  margin:36px auto 0;
}
.orbit-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:82px;height:82px;border-radius:50%;
  background:linear-gradient(160deg,#5c96ff,var(--blue-soft));
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.15), 0 12px 34px -6px rgba(61,123,255,0.65);
  z-index:2;
}
.orbit-ring{position:absolute;inset:0;}
.orbit-ring-1{animation:orbit-spin 26s linear infinite;}
.orbit-ring-2{animation:orbit-spin-rev 34s linear infinite;}
@keyframes orbit-spin{ to { transform:rotate(360deg); } }
@keyframes orbit-spin-rev{ to { transform:rotate(-360deg); } }
.orbit-item{
  position:absolute;top:50%;left:50%;
  width:0;height:0;
}
.orbit-ring-1 .orbit-item-0{transform:rotate(0deg) translateX(122px);}
.orbit-ring-1 .orbit-item-1{transform:rotate(120deg) translateX(122px);}
.orbit-ring-1 .orbit-item-2{transform:rotate(240deg) translateX(122px);}
.orbit-ring-2 .orbit-item-0{transform:rotate(60deg) translateX(78px);}
.orbit-ring-2 .orbit-item-1{transform:rotate(180deg) translateX(78px);}
.orbit-ring-2 .orbit-item-2{transform:rotate(300deg) translateX(78px);}
.orbit-icon-inner{
  position:absolute;top:0;left:0;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(10px);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.orbit-ring-1 .orbit-item-0 .orbit-icon-inner{animation:orbit-counter-spin 26s linear infinite;}
.orbit-ring-1 .orbit-item-1 .orbit-icon-inner{animation:orbit-counter-spin 26s linear infinite;}
.orbit-ring-1 .orbit-item-2 .orbit-icon-inner{animation:orbit-counter-spin 26s linear infinite;}
.orbit-ring-2 .orbit-item-0 .orbit-icon-inner{animation:orbit-counter-spin-rev 34s linear infinite;}
.orbit-ring-2 .orbit-item-1 .orbit-icon-inner{animation:orbit-counter-spin-rev 34s linear infinite;}
.orbit-ring-2 .orbit-item-2 .orbit-icon-inner{animation:orbit-counter-spin-rev 34s linear infinite;}
@keyframes orbit-counter-spin{ to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes orbit-counter-spin-rev{ to { transform:translate(-50%,-50%) rotate(360deg); } }
.orbit-icon-inner:hover{
  transform:translate(-50%,-50%) scale(1.18);
  border-color:rgba(61,123,255,0.6);background:rgba(61,123,255,0.14);
  z-index:3;
}
.orbit-icon-inner::after{
  content:attr(data-label);
  position:absolute;top:120%;left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:600;color:#dfe4ee;white-space:nowrap;
  background:rgba(10,14,23,0.85);padding:4px 9px;border-radius:6px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.orbit-icon-inner:hover::after{opacity:1;}
.hero-orbit:hover .orbit-ring{animation-play-state:paused;}
.hero-orbit:hover .orbit-icon-inner{animation-play-state:paused;}

.hero-scroll-cue{
  position:relative;z-index:2;margin-top:56px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--text-dimmer);
}
.hero-scroll-line{
  width:1px;height:34px;background:rgba(255,255,255,0.14);
  position:relative;overflow:hidden;
}
.hero-scroll-line i{
  position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:linear-gradient(180deg,transparent,var(--blue));
  animation:hero-scroll-drip 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-drip{
  0%{top:-40%;} 100%{top:100%;}
}
@media (prefers-reduced-motion: reduce){
  .hero-tag-dot,.orbit-ring-1,.orbit-ring-2,
  .orbit-ring-1 .orbit-icon-inner,.orbit-ring-2 .orbit-icon-inner,
  .hero-scroll-line i,.hero h1.hero-scramble .accent{animation:none;}
}
@media (max-width:980px){
  .hero h1.hero-scramble{font-size:40px;}
}
@media (max-width:700px){
  .hero{padding:120px 0 60px;min-height:auto;}
  .hero h1.hero-scramble{font-size:29px;margin-bottom:16px;}
  .hero-sub{font-size:15px;margin-bottom:26px;}
  .hero-cta-row{margin-bottom:40px;}
  .hero-live-stats{gap:26px;}
  .live-stat b{font-size:24px;}
  .hero-orbit{width:220px;height:220px;margin-top:36px;}
  .orbit-core{width:64px;height:64px;font-size:14px;}
  .orbit-ring-1 .orbit-item-0{transform:rotate(0deg) translateX(96px);}
  .orbit-ring-1 .orbit-item-1{transform:rotate(120deg) translateX(96px);}
  .orbit-ring-1 .orbit-item-2{transform:rotate(240deg) translateX(96px);}
  .orbit-ring-2 .orbit-item-0{transform:rotate(60deg) translateX(58px);}
  .orbit-ring-2 .orbit-item-1{transform:rotate(180deg) translateX(58px);}
  .orbit-ring-2 .orbit-item-2{transform:rotate(300deg) translateX(58px);}
  .orbit-icon-inner{width:40px;height:40px;font-size:15px;}
  .hero-scroll-cue{display:none;}
}

/* ===== PAGE HERO (interior pages: websites-work, graphics-work) ===== */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:170px 0 90px;
}
.page-hero-bg{position:absolute;inset:0;z-index:-2;}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(0.32) saturate(1.05);}
.page-hero-veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(6,9,16,0.55) 0%, rgba(6,9,16,0.75) 55%, var(--bg) 100%);
}
/* ambient depth glow — two soft blurred orbs (used on interior page-heroes) */
.hero-glow{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(70px);opacity:0.35;
}
.hero-glow-a{
  width:420px;height:420px;top:-8%;left:-6%;
  background:radial-gradient(circle,rgba(93,150,255,0.55),transparent 70%);
}
.hero-glow-b{
  width:360px;height:360px;bottom:-10%;right:-6%;
  background:radial-gradient(circle,rgba(140,190,255,0.4),transparent 70%);
}
@media (max-width:700px){
  .hero-glow{display:none;}
}
.page-hero .wrap{text-align:center;position:relative;z-index:2;}
.page-hero h1{font-size:48px;font-weight:600;line-height:1.16;max-width:680px;margin:0 auto 18px;}
.page-hero p.lead{color:var(--text-dim);font-size:16px;max-width:520px;margin:0 auto;}
.page-crumb{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;color:var(--text-dimmer);margin-bottom:18px;
}
.page-crumb a{color:var(--text-dim);}
.page-crumb a:hover{color:var(--blue);}

/* ===== FILTER TABS ===== */
.filter-tabs{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
  margin-top:38px;
}
.filter-tab{
  font-size:13px;font-weight:500;color:var(--text-dim);
  padding:9px 18px;border-radius:100px;border:1px solid var(--card-border);
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.filter-tab:hover{color:var(--text);border-color:rgba(255,255,255,0.25);}
.filter-tab.active{
  color:#fff;background:var(--blue);border-color:var(--blue);
}

/* ===== PORTFOLIO GRID ===== */
.portfolio-section{padding-top:20px;}
.portfolio-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.portfolio-card{
  border-radius:18px;overflow:hidden;
  background:var(--card);border:1px solid var(--card-border);
  transition:transform .25s ease, border-color .25s ease;
}
.portfolio-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.2);}
.portfolio-card.hidden{display:none;}
.portfolio-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;}
.portfolio-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.portfolio-card:hover .portfolio-thumb img{transform:scale(1.05);}
.portfolio-thumb .cat-tag{
  position:absolute;top:14px;left:14px;
  font-size:10.5px;font-weight:600;color:#dfe4ee;
  background:rgba(10,14,23,0.6);backdrop-filter:blur(6px);
  padding:5px 12px;border-radius:100px;
}
.portfolio-body{padding:20px 22px 24px;}
.portfolio-body h3{font-size:18px;font-weight:600;margin-bottom:8px;line-height:1.3;}
.portfolio-body p{font-size:13px;color:var(--text-dim);margin-bottom:14px;line-height:1.55;}
.portfolio-body a{font-size:12.5px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:6px;}
.portfolio-body a .arr{display:inline-block;transition:transform .25s ease;}
.portfolio-card:hover .portfolio-body a .arr{transform:translateX(4px);}

/* ===== MASONRY GALLERY — real project cards (websites-work.html /
   graphics-work.html), varied card sizes via the ar-tall/ar-wide/
   ar-square/ar-short classes, hover reveal + external-link cue. ===== */
.gallery-grid{
  column-count:4;column-gap:22px;
}
.gallery-grid .work-card{
  display:block;break-inside:avoid;margin-bottom:22px;
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--card-border);background:var(--card);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.gallery-grid .work-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,0.22);
  box-shadow:0 20px 40px -16px rgba(0,0,0,0.55);
}
.gallery-grid .work-card.hidden{display:none;}

.work-thumb{aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft);}
.work-card.ar-tall .work-thumb{aspect-ratio:3/4.3;}
.work-card.ar-wide .work-thumb{aspect-ratio:16/10;}
.work-card.ar-square .work-thumb{aspect-ratio:1/1;}
.work-card.ar-short .work-thumb{aspect-ratio:16/11;}
.work-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.work-card:hover .work-thumb img{transform:scale(1.07);}

.work-overlay{
  position:absolute;inset:0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;
  background:linear-gradient(0deg,rgba(6,9,16,0.92) 0%,rgba(6,9,16,0.08) 62%,transparent 100%);
}
.work-overlay .tag{
  font-size:10px;font-weight:700;color:#8fb4ff;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.work-overlay h4{
  font-size:14.5px;font-weight:600;color:#fff;line-height:1.35;
}
.work-card:hover .work-overlay .tag{opacity:1;transform:translateY(0);}

/* small external-link cue, pure CSS (no extra markup needed) */
.work-card::after{
  content:'↗';position:absolute;top:14px;right:14px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:rgba(10,14,23,0.6);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;line-height:1;
  opacity:0;transform:translateY(-6px) scale(.85);
  transition:opacity .25s ease, transform .25s ease;
}
.work-card:hover::after{opacity:1;transform:translateY(0) scale(1);}

@media (max-width:1100px){
  .gallery-grid{column-count:3;}
}
@media (max-width:760px){
  .gallery-grid{column-count:2;column-gap:14px;}
  .gallery-grid .work-card{margin-bottom:14px;}
}
@media (max-width:480px){
  .gallery-grid{column-count:1;}
}

/* ===== SECTIONS shared ===== */
section{padding:100px 0;position:relative;}
.section-tight{padding:70px 0;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}

/* ===== SERVICES — row of cards that cascade downward at different
   speeds as the section scrolls past, so they visually "carry into"
   the section beneath instead of just cutting off. ===== */
.services-head{text-align:center;max-width:560px;margin:0 auto 52px;}
.services-head h2{font-size:34px;font-weight:600;line-height:1.2;margin-bottom:14px;}
.services-head p{color:var(--text-dim);font-size:15px;}
.services-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.service-card{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:18px;padding:26px 24px;
  transition:transform .3s ease, border-color .3s ease;
  will-change:transform;
}
.service-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.2);}
.service-card .icon{
  width:46px;height:46px;border-radius:13px;
  background:rgba(61,123,255,0.14);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.service-card .icon svg{width:22px;height:22px;}
.service-card h3{font-size:16.5px;font-weight:600;margin-bottom:8px;}
.service-card p{font-size:13px;color:var(--text-dim);line-height:1.55;margin-bottom:14px;}
.service-card a{font-size:12.5px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:6px;}
.service-card a .arr{display:inline-block;transition:transform .25s ease;}
.service-card:hover a .arr{transform:translateX(4px);}
@media (max-width:980px){
  .services-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .services-row{grid-template-columns:1fr;}
}

/* ===== STICKY STACK — panels pin in place and get covered by the next
   one sliding in from the right as you scroll (native CSS sticky does
   the stacking; animations.js only animates the slide-in). ===== */
.stack-section{padding:0;}
.stack-head{padding:100px 0 60px;text-align:center;}
.stack-head h2{font-size:34px;font-weight:600;line-height:1.2;margin-bottom:14px;}
.stack-head p{color:var(--text-dim);font-size:15px;max-width:460px;margin:0 auto;}
.stack-card{
  position:sticky;top:0;
  height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.08);
}
.stack-card-bg{position:absolute;inset:0;z-index:0;}
.stack-card-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(0.4) saturate(1.05);}
.stack-card-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(6,9,16,0.92) 30%, rgba(6,9,16,0.55) 65%, rgba(6,9,16,0.3) 100%);
}
.stack-inner{
  position:relative;z-index:1;
  max-width:1200px;margin:0 auto;padding:0 32px;
  width:100%;
}
.stack-inner-content{max-width:520px;}
.stack-num{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  color:var(--blue);margin-bottom:18px;letter-spacing:0.04em;
}
.stack-num::before{content:'';width:28px;height:1px;background:var(--blue);display:inline-block;}
.stack-inner-content h3{font-size:32px;font-weight:600;line-height:1.2;margin-bottom:16px;}
.stack-inner-content p{color:var(--text-dim);font-size:15px;line-height:1.6;margin-bottom:22px;max-width:440px;}
.stack-tags{display:flex;flex-wrap:wrap;gap:8px;}
.stack-tags span{
  font-size:12px;color:#dfe4ee;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);padding:6px 13px;border-radius:100px;
}
@media (max-width:700px){
  .stack-card{height:100svh;}
  .stack-inner-content h3{font-size:24px;}
  .stack-inner-content p{font-size:13.5px;}
}

.about{background:linear-gradient(180deg,transparent,rgba(61,123,255,0.035),transparent);}
.about-grid{
  display:grid;
  grid-template-columns:0.85fr 1fr 1fr;
  gap:32px;align-items:start;
}
.about h2{font-size:34px;font-weight:600;line-height:1.22;margin-bottom:16px;}
.about p.lead{color:var(--text-dim);font-size:14.5px;max-width:340px;margin-bottom:26px;}
.about-card{
  border-radius:18px;overflow:hidden;position:relative;
  aspect-ratio:3/4;
  transition:transform .35s ease;
}
.about-card:hover{transform:translateY(-4px);}
.about-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.about-card:hover img{transform:scale(1.04);}
.about-card .tag{
  position:absolute;top:20px;left:20px;
  font-size:11px;color:#dfe4ee;background:rgba(10,14,23,0.5);
  padding:6px 12px;border-radius:100px;backdrop-filter:blur(6px);
}
.about-card .cap{
  position:absolute;bottom:0;left:0;right:0;
  padding:22px;background:linear-gradient(0deg,rgba(6,9,16,0.94) 40%,transparent);
}
.about-card .cap h3{font-size:19px;font-weight:600;color:#fff;line-height:1.3;margin-bottom:8px;}
.about-card .cap p{font-size:12.5px;color:var(--text-dim);line-height:1.5;}

.about-right{display:flex;flex-direction:column;gap:22px;}
.stat-line{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--card-border);font-size:13.5px;}
.stat-line span:first-child{color:var(--text-dim);}
.stat-line span:last-child{font-weight:700;font-family:'Space Grotesk',sans-serif;}
.stat-line:last-child{border-bottom:none;}
.testimonial{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:16px;padding:22px;
  transition:transform .3s ease, border-color .3s ease;
}
.testimonial:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.18);}
.testimonial .who{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.testimonial .who img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
.testimonial .who b{font-size:14px;display:block;}
.testimonial .who small{font-size:12px;color:var(--text-dimmer);}
.testimonial p{font-size:13.5px;color:var(--text-dim);margin-bottom:10px;}
.testimonial a{font-size:12.5px;color:var(--blue);font-weight:600;}

.work h2{font-size:38px;font-weight:600;line-height:1.2;margin-bottom:18px;max-width:460px;}
.work p.lead{color:var(--text-dim);font-size:15.5px;max-width:440px;margin-bottom:30px;}
.project-card{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:20px;padding:28px;
  display:grid;grid-template-columns:1fr 1.3fr;gap:20px;align-items:center;
  transition:transform .3s ease, border-color .3s ease;
}
.project-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.18);}
.project-card .badge{font-size:11px;color:var(--blue);font-weight:600;margin-bottom:10px;}
.project-card h3{font-size:22px;font-weight:600;margin-bottom:10px;}
.project-card p{font-size:13.5px;color:var(--text-dim);margin-bottom:14px;}
.project-card a.case{font-size:13px;font-weight:600;color:var(--blue);}
.device-mock{position:relative;}
.device-mock img{border-radius:8px;transition:transform .5s ease;}
.device-mock .laptop{width:100%;border:1px solid rgba(255,255,255,0.08);}
.project-card:hover .device-mock .laptop{transform:scale(1.015);}
.device-mock .phone{
  position:absolute;bottom:-14px;right:-4%;width:32%;
  border-radius:16px;border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.6);
}
.dots{display:flex;gap:6px;justify-content:center;margin-top:20px;}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.2);}
.dots i.active{background:var(--blue);width:18px;border-radius:4px;}

.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  background:var(--card);border:1px solid var(--card-border);
  border-radius:18px;padding:34px 36px;margin-top:70px;
}
.stat-strip .item{display:flex;align-items:center;gap:14px;}
.stat-strip .icon{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  background:rgba(61,123,255,0.14);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);
}
.stat-strip .icon svg{width:22px;height:22px;}
.stat-strip .item b{
  font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:700;
  display:block;line-height:1.2;
}
.stat-strip .item span{font-size:12.5px;color:var(--text-dim);}

.cta{padding:0 0 100px;}
.cta-box{
  border-radius:26px;overflow:hidden;position:relative;
  min-height:340px;display:flex;align-items:center;
}
.cta-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.6);}
.cta-box .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,9,16,0.9) 30%,rgba(6,9,16,0.15));}
.cta-content{position:relative;padding:56px;max-width:480px;}
.cta-content h2{font-size:34px;font-weight:600;margin-bottom:14px;line-height:1.2;}
.cta-content p{font-size:15px;color:var(--text-dim);margin-bottom:26px;max-width:380px;}

footer{border-top:1px solid var(--card-border);padding:60px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:24px;margin-bottom:50px;}
.foot-about p{font-size:13.5px;color:var(--text-dim);margin:18px 0 20px;max-width:260px;}
.foot-social{display:flex;gap:10px;}
.foot-social span{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-dim);
}
.foot-col h4{font-size:13.5px;font-weight:600;margin-bottom:16px;}
.foot-col a{display:block;font-size:13px;color:var(--text-dim);margin-bottom:10px;}
.foot-contact div{display:flex;gap:8px;font-size:13px;color:var(--text-dim);margin-bottom:12px;align-items:flex-start;}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;border-top:1px solid var(--card-border);
  font-size:12.5px;color:var(--text-dimmer);flex-wrap:wrap;gap:10px;
}
.foot-bottom .links{display:flex;gap:20px;}

/* .reveal: default visible (safe if JS/CDN fails); GSAP sets the hidden
   "from" state at runtime via animations.js before animating in. */
.reveal{opacity:1;}


/* ===== TRUSTED-BY LOGO MARQUEE ===== */
.trusted-strip{padding:44px 0;border-bottom:1px solid var(--card-border);}
.trusted-strip .label{
  text-align:center;font-size:12px;color:var(--text-dimmer);
  letter-spacing:0.06em;margin-bottom:24px;
}
.logo-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.logo-track{
  display:flex;align-items:center;gap:64px;width:max-content;
  animation:marquee-scroll 26s linear infinite;
}
.logo-marquee:hover .logo-track{animation-play-state:paused;}
.logo-track span{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;
  letter-spacing:0.02em;color:var(--text-dim);opacity:0.55;white-space:nowrap;
}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .logo-track{animation:none;}
}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .grid-2{grid-template-columns:1fr;gap:34px;}
  .about-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .about-grid > div:first-child{grid-column:1/-1;}
  .about-card{aspect-ratio:16/10;}
  .project-card{grid-template-columns:1fr;}
  .device-mock{order:-1;}
  .stat-strip{grid-template-columns:repeat(2,1fr);row-gap:26px;}
  .foot-grid{grid-template-columns:1fr 1fr;row-gap:34px;}
  .portfolio-grid{grid-template-columns:1fr 1fr;gap:22px;}
  .page-hero{padding:150px 0 70px;}
  .page-hero h1{font-size:36px;}
}
@media (max-width:700px){
  .wrap{padding:0 20px;}
  nav{padding:16px 20px;}
  .menu-btn span.label{display:none;}
  section{padding:60px 0;}
  .about h2,.work h2{font-size:28px;}
  .about-grid{grid-template-columns:1fr;}
  .about-grid > div:first-child{grid-column:auto;}
  .about p.lead{max-width:none;}
  .stat-strip{grid-template-columns:1fr;gap:22px;padding:26px 22px;}
  .cta-content{padding:32px 24px;max-width:none;}
  .cta-content h2{font-size:26px;}
  .cta-box{min-height:300px;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px 16px;}
  .foot-about{grid-column:1/-1;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
  .page-hero{padding:130px 0 56px;}
  .page-hero h1{font-size:28px;}
  .portfolio-grid{grid-template-columns:1fr;}
  .filter-tabs{gap:8px;}
  .filter-tab{padding:8px 14px;font-size:12.5px;}
}