:root{
  --bg: #101214;
  --bg-soft: #1c1e20;
  --card: rgba(255,255,255,0.045);
  --card-border: rgba(255,255,255,0.09);
  --text: #f3f5f9;
  --text-dim: #9aa3b5;
  --text-dimmer: #6b7386;
  --blue: #cbc912;
  --blue-soft: #e7e516;
  --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: rgb(250 255 61 / 12%);
    border: 1px solid rgb(243 255 61 / 30%);
  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:5px;
  font-weight:600;
  font-size:14.5px;
  transition:box-shadow .18s ease;
}
.header-btn{
    display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  border-radius:100px;
  font-weight:600;
  font-size:14.5px;
  transition:box-shadow .18s ease;
}
.btn-primary{
  background: linear-gradient(180deg, #dbd91f, #a8a70f);
    color: #0a0e17;
    border-radius: 5px;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(215 225 58 / 60%)}
.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%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;
}
.btn-primary .btn-icon{}
.btn-light .btn-icon{}
.btn-outline .btn-icon{}

/* ===== NAV ===== */
header{
  position:sticky;top:0;z-index:100;
  background:rgb(123 129 26 / 9%);
  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: rgb(123 125 28 / 22%);
    box-shadow: 0 10px 28px -12px rgb(241 225 108 / 17%);
    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:White;
  padding:9px 16px;border:1px solid var(--card-border);border-radius:5px;
  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:#d9e021;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;}
.logo-mobile{display:none;}

/* ===== 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(231,229,22,0.6);background:rgba(231,229,22,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%, #d9e02114 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: #d9e02138;
    border: 1px solid #d9e021;
    padding: 6px 12px 6px 9px;
    border-radius: 100px;
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px -6px rgb(202 204 62 / 50%);
}
.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:903px;margin:0 auto 22px;
  font-variant-ligatures:none;
}
.hero h1.hero-scramble .accent{
  background:linear-gradient(90deg, #d9e021 0%, #dcddbd 25%, #d9e021 50%, #dcddbd 75%, #d9e021 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;}
.scramble-word{display:inline-block;white-space:nowrap;}

.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:80px 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{display: flex;
        flex-direction: column;}
  .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;}
  .btn-primary{        padding: 24px;
        font-size: 14px;
        height: 42px;}
        .main-logo{display:none;}
        .logo-mobile{display:block;}
        .header-btn{
            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:3;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:2;}
}

/* ===== SECTIONS shared ===== */
section{padding:40px 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: 31px;*/
/*    background: rgb(214 255 57 / 10%);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;}*/
/*}*/



.services-section{
  padding:30px 24px;
  font-family:'Inter',sans-serif;
  color:#f3f5f9;
}
.svc-head{text-align:center;max-width:560px;margin:0 auto 52px;}
.svc-eyebrow{
  display:inline-block;font-size:12px;font-weight:600;color:#cbc912;
  background:rgba(203,201,18,0.12);border:1px solid rgba(203,201,18,0.3);
  padding:5px 14px;border-radius:100px;margin-bottom:18px;
}
.svc-head h2{font-size:34px;font-weight:600;line-height:1.2;margin:0 0 14px;font-family:'Space Grotesk',sans-serif;}
.svc-accent{color:#cbc912;}
.svc-head p{font-size:15px;color:#9aa3b5;line-height:1.6;margin:0;}

/* ---- Desktop / tablet: normal 3-column grid ---- */
.svc-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:1200px;margin:0 auto;
}
.svc-card{
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;padding:28px 24px;
  transition:transform .3s ease, border-color .3s ease;
}
.svc-card:hover{transform:translateY(-4px);border-color:rgba(203,201,18,0.4);}
.svc-icon{
  width:46px;height:46px;border-radius:30px;
  background:rgba(203,201,18,0.14);color:#cbc912;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.svc-icon svg{width:22px;height:22px;}
.svc-card h3{font-size:16.5px;font-weight:600;margin:0 0 8px;font-family:'Space Grotesk',sans-serif;}
.svc-card p{font-size:13px;color:#9aa3b5;line-height:1.55;margin:0 0 14px;}
.svc-card a{font-size:12.5px;font-weight:600;color:#cbc912;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.svc-card a .arr{display:inline-block;transition:transform .25s ease;}
.svc-card:hover a .arr{transform:translateX(4px);}

@media (max-width:980px){
  .svc-row{grid-template-columns:1fr 1fr;}
}

/* ---- Mobile: horizontal swipeable slider ---- */
@media (max-width:760px){
  .services-section{padding:20px 0;}
  .svc-head{padding:30px 20px;margin-bottom:36px;}
  .svc-head h2{font-size:26px;}

  .svc-row{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 20px 12px;
    margin:0;
    /* hide native scrollbar */
    scrollbar-width:none;
  }
  .svc-row::-webkit-scrollbar{display:none;}

  .svc-card{
    flex:0 0 82%;
    scroll-snap-align:center;
  }

  .svc-dots{
    display:flex;justify-content:center;gap:8px;margin-top:22px;
  }
  .svc-dots i{
    width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,0.18);
    transition:background .25s ease, width .25s ease;
    display:block;font-style:normal;
  }
  .svc-dots i.active{background:#cbc912;width:22px;border-radius:4px;}
}

/* dots stay hidden on desktop/tablet where it's a grid, not a slider */
@media (min-width:761px){
  .svc-dots{display:none;}
}





/* ===== 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:50px 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-section{padding:20px 24px;}
.stack-head{padding:30 0 30px;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;}

/* smaller, centered, glassmorphism sticky card
   (position:sticky + DOM order is what makes each card cover the
   previous one — none of that changed, just the size/background) */
.stack-card{
  position:sticky;
  top:110px;
  max-width:960px;
  min-height:460px;
  margin:0 auto 26px;
  display:flex;align-items:center;
  overflow:hidden;
  border-radius:28px;
  background:rgb(255 236 86 / 5%);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}

.stack-inner{
  position:relative;z-index:1;
  width:100%;
  padding:48px 52px;
}
.stack-inner-content{max-width:604px;}

/* stack-num, h3, p, and stack-tags are untouched from your original */

@media (max-width:900px){
  .stack-card{max-width:92%;min-height:420px;}
  .stack-inner{padding:36px;}
}
@media (max-width:700px){
  .stack-card{top:90px;min-height:auto;}
  .stack-inner{padding:28px 24px;}
  .stack-inner-content h3{font-size:24px;}
  .stack-inner-content p{font-size:13.5px;}
}
.stack-inner-content{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: #cbc91226;
    border: 1px solid #d9e02178;
    padding: 6px 13px;
    border-radius: 100px;
}
@media (max-width:700px){
  .stack-card{
    top:216px;
    min-height:320px;
    max-width:94%;
    border-radius:22px;
  }
  .stack-inner{padding:24px 20px;}
  .stack-inner-content h3{font-size:20px;line-height:1.3;}
  .stack-inner-content p{font-size:13px;line-height:1.5;margin-bottom:16px;}
  .stack-num{font-size:12px;margin-bottom:12px;}
  .stack-tags span{font-size:11px;padding:5px 10px;}
}

.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{
  border: 1px solid rgb(255 225 11 / 31%);
    border-radius: 12px;
  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);height:380px;}
.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: 30px;
    flex-shrink: 0;
    background: rgb(233 255 61 / 14%);
    display: flex;
    align-items: center;
    justify-content: center;
  color:var(--blue);
}
.stat-strip .icon svg{width:22px;height:22px; color: #d9e021;}
.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;padding-top:30px;}
  .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:20px 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;}
  .device-mock .laptop{height:300px;}
}


.coverflow{padding:90px 0 70px;overflow:hidden;background:#0a0e17;font-family:'Inter',sans-serif;width:auto;}
.coverflow-head{text-align:center;margin-bottom:64px;padding:0 20px;}
.cf-eyebrow{
  display:inline-block;font-size:12px;font-weight:600;color:#3d7bff;
  background:rgba(61,123,255,0.12);border:1px solid rgba(61,123,255,0.25);
  padding:5px 14px;border-radius:100px;margin-bottom:16px;
}
.coverflow-head h2{font-size:60px;font-weight:600;line-height:1.2;color:#f3f5f9;margin:0;}
.cf-accent{color:#3d7bff;}

.coverflow-stage{position:relative;display:flex;align-items:center;justify-content:center;}
.coverflow-track{
  position:relative;height:498px;    width: 1200px;
    max-width: 1277px;
  display:flex;align-items:center;justify-content:center;    margin-top: -70px;
}
.coverflow-card{
  position:absolute;top:50%;left:50%;
  width: 301px;
    height: 387px;
  margin:-150px 0 0 -115px; /* half height/width — GSAP-free centering base */
  border-radius:28px;
  padding:22px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;cursor:pointer;user-select:none;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  transition:transform .6s cubic-bezier(.22,.9,.3,1), opacity .6s ease;
}
.cf-top h3{font-size:19px;font-weight:700;margin:0 0 4px;}
.cf-top p{font-size:12.5px;color:rgba(255,255,255,0.78);margin:0;}
.cf-cta{
  display:none;align-items:center;gap:6px;text-decoration:none;
  background:linear-gradient(180deg, #dbd91f, #a8a70f);color:#0a0e17;font-size:12.5px;font-weight:700;
  padding:9px 14px;border-radius:5px;white-space:nowrap;
  box-shadow:0 8px 18px -6px rgba(0,0,0,0.35);
}
.cf-cta span{
  width:18px;height:18px;border-radius:50%;background:;color:#0a0e17;
  display:flex;align-items:center;justify-content:center;font-size:10px;
}
.coverflow-card.is-active .cf-cta{display:inline-flex;}
.cf-icon{font-size:155px;text-align:center;line-height:1;margin-top:1px;filter:drop-shadow(0 14px 20px rgba(0,0,0,0.35));    display: flex;
    justify-content: center;}

/* gradients matched closer to the reference image */
.card-indigo{background: rgb(255 236 86 / 5%);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgb(251 255 0 / 16%);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    
}

.cf-icon img{width:150px;}
.card-coral{background: rgb(255 236 86 / 5%);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgb(251 255 0 / 16%);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);}
    
.card-teal{background: rgb(255 236 86 / 5%);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgb(251 255 0 / 16%);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06)}
    
.card-green{background: rgb(255 236 86 / 5%);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgb(251 255 0 / 16%);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06)}
    
.card-blue{background: rgb(255 236 86 / 5%);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgb(251 255 0 / 16%);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06)}
    

.coverflow-nav{
  position:relative;z-index:20;flex-shrink:0;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.04);
  color:#f3f5f9;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
  margin:0 6px;
}
.coverflow-nav:hover{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.08);transform:scale(1.06);}

.coverflow-dots{display:flex;justify-content:center;gap:8px;margin-top:36px;}
.coverflow-dots i{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.18);
  transition:background .2s ease, width .2s ease;cursor:pointer;display:block;font-style:normal;
}
.coverflow-dots i.active{background:#3d7bff;width:22px;border-radius:4px;}

@media (max-width:760px){
  .coverflow-track{height:320px;}
  .coverflow-card{width:190px;height:250px;margin:-125px 0 0 -95px;padding:18px;}
  .cf-icon img{width:90px;}
  .coverflow-nav{width:38px;height:38px;font-size:17px;}
  .coverflow-head h2{font-size:26px;}
  .pros-img{display:none;}
}




.why-techzo{
  padding:100px 24px;
  font-family:'Inter',sans-serif;
  color:#f3f5f9;
}
.wt-head{text-align:center;max-width:600px;margin:-20px auto 64px;}
.wt-eyebrow{
  display:inline-block;font-size:12px;font-weight:600;color:#cbc912;
  background:rgba(203,201,18,0.12);border:1px solid rgba(203,201,18,0.3);
  padding:5px 14px;border-radius:100px;margin-bottom:18px;
}
.wt-head h2{font-size:36px;font-weight:600;line-height:1.2;margin:0;font-family:'Space Grotesk',sans-serif;}
.wt-accent{color:#cbc912;}

.wt-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  max-width:1300px;margin:0 auto;
}

.wt-card{
  position:relative;
  height:400px;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.09);
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1),
             border-color .3s ease, box-shadow .3s ease;
}
.wt-card.in-view{opacity:1;transform:translateY(0);}
.wt-card:hover{
  border-color:rgba(203,201,18,0.55);
  box-shadow:0 24px 48px -18px rgba(203,201,18,0.35);
}

.wt-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.wt-card:hover .wt-bg{transform:scale(1.08);}

.wt-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,14,23,0.35) 0%, rgba(10,14,23,0.55) 45%, rgba(10,14,23,0.94) 100%);
  transition:background .4s ease;
}
.wt-card:hover .wt-overlay{
  background:linear-gradient(180deg, rgba(10,14,23,0.55) 0%, rgba(80,78,10,0.4) 45%, rgba(10,14,23,0.96) 100%);
}

.wt-num{
  position:absolute;top:20px;right:22px;z-index:2;
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;
  color:rgba(255,255,255,0.5);letter-spacing:.05em;
  transition:color .3s ease;
}
.wt-card:hover .wt-num{color:rgba(203,201,18,0.9);}

.wt-content{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px;
}
.wt-icon{
  width:42px;height:42px;border-radius:35px;
  background:rgba(255,255,255,0.12);color:#fff;
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.wt-icon svg{width:20px;height:20px;}
.wt-card:hover .wt-icon{background:#cbc912;color:#0a0e17;transform:scale(1.08) rotate(-4deg);}

.wt-content h3{
  font-size:17.5px;font-weight:600;margin:0;color:#fff;line-height:1.3;
  font-family:'Space Grotesk',sans-serif;
  transition:transform .45s cubic-bezier(.22,.9,.3,1);
}
.wt-card:hover .wt-content h3{transform:translateY(-2px);}

/* description: hidden until hover, then slides up + fades in smoothly */
.wt-content p{
  font-size:13px;line-height:1.55;color:rgba(255,255,255,0.82);
  margin:0;max-height:0;opacity:0;
  transform:translateY(14px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,.9,.3,1), max-height .45s ease, margin-top .45s ease;
}
.wt-card:hover .wt-content p{
  opacity:1;transform:translateY(0);max-height:120px;margin-top:9px;
}

/* stagger the entrance reveal */
.wt-card:nth-child(1){transition-delay:0s;}
.wt-card:nth-child(2){transition-delay:.1s;}
.wt-card:nth-child(3){transition-delay:.2s;}
.wt-card:nth-child(4){transition-delay:.3s;}

@media (max-width:980px){
  .wt-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .why-techzo{padding:70px 20px;}
  .wt-head h2{font-size:27px;}
  .wt-grid{grid-template-columns:1fr;gap:16px;}
  .wt-card{height:280px;}
  /* no real hover on touch devices — keep text visible so it's still readable */
  .wt-content p{opacity:1;transform:none;max-height:none;margin-top:9px;}
}






.contact-form-section{
      font-family: 'Inter', sans-serif;
    color: #f3f5f9;
    padding: 0;
    border: solid 1px #cbc9122e;

}

.cf-split{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:720px;
}

/* ---- left half: image ---- */
.cf-image-side{
  position:relative;overflow:hidden;
  opacity:0;transform:translateX(-30px);
  transition:opacity .8s cubic-bezier(.22,.9,.3,1), transform .8s cubic-bezier(.22,.9,.3,1);
}
.cf-image-side.in-view{opacity:1;transform:translateX(0);}
.cf-image-side img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.cf-image-side:hover img{transform:scale(1.05);}
.cf-image-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,14,23,0.15) 0%, rgba(10,14,23,0.35) 55%, rgba(10,14,23,0.92) 100%);
}
.cf-image-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:44px;
}
.cf-image-tag{
  display:inline-block;font-size:12px;font-weight:600;color:#cbc912;
  background:rgba(203,201,18,0.14);border:1px solid rgba(203,201,18,0.35);
  padding:6px 14px;border-radius:100px;margin-bottom:14px;
}
.cf-image-caption p{
  font-size:20px;font-weight:600;line-height:1.4;color:#fff;margin:0;
  max-width:380px;font-family:'Space Grotesk',sans-serif;
}

/* ---- right half: form ---- */
.cf-form-side{
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 64px;
  opacity:0;transform:translateX(30px);
  transition:opacity .8s cubic-bezier(.22,.9,.3,1) .1s, transform .8s cubic-bezier(.22,.9,.3,1) .1s;
}
.cf-form-side.in-view{opacity:1;transform:translateX(0);}

.cf-head{margin-bottom:36px;}
.cf-eyebrow{
  display:inline-block;font-size:12px;font-weight:600;color:#cbc912;
  background:rgba(203,201,18,0.12);border:1px solid rgba(203,201,18,0.3);
  padding:5px 14px;border-radius:100px;margin-bottom:18px;
}
.cf-head h2{font-size:32px;font-weight:600;line-height:1.2;margin:0 0 12px;font-family:'Space Grotesk',sans-serif;}
.cf-accent{color:#cbc912;}
.cf-head p{font-size:14.5px;color:#9aa3b5;line-height:1.6;margin:0;max-width:420px;}

.cf-form{position:relative;max-width:460px;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;}

/* floating-label field */
.cf-field{position:relative;}
.cf-field-full{margin-bottom:26px;}

.cf-field input,
.cf-field select,
.cf-field textarea{
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:18px 16px 10px;
  font-size:14px;color:#f3f5f9;font-family:inherit;
  outline:none;resize:none;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.cf-field select{appearance:none;cursor:pointer;}
.cf-field textarea{padding-top:22px;}

.cf-field label{
  position:absolute;left:16px;top:18px;
  font-size:14px;color:#6b7386;pointer-events:none;
  transform-origin:left top;
  transition:transform .25s cubic-bezier(.22,.9,.3,1), color .25s ease, top .25s ease;
}

.cf-field input:focus + label,
.cf-field input:not(:placeholder-shown) + label,
.cf-field textarea:focus + label,
.cf-field textarea:not(:placeholder-shown) + label,
.cf-select-field.has-value label,
.cf-select-field select:focus + label{
  top:8px;
  transform:scale(0.76);
  color:#cbc912;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus{
  border-color:#cbc912;
  background:rgba(203,201,18,0.05);
  box-shadow:0 0 0 4px rgba(203,201,18,0.12);
}

.cf-line{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:#cbc912;border-radius:0 0 12px 12px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s cubic-bezier(.22,.9,.3,1);
  pointer-events:none;
}
.cf-field input:focus ~ .cf-line,
.cf-field select:focus ~ .cf-line,
.cf-field textarea:focus ~ .cf-line{transform:scaleX(1);}

.cf-caret{
  position:absolute;right:16px;top:18px;color:#6b7386;
  font-size:16px;pointer-events:none;transition:transform .3s ease, color .3s ease;
}
.cf-select-field select:focus ~ .cf-caret{color:#cbc912;transform:rotate(180deg);}

/* submit button */
.cf-submit{
  position:relative;width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,#dbd91f,#a8a70f);
  color:#0a0e17;font-weight:700;font-size:15px;font-family:inherit;
  border:none;border-radius:5px;padding:16px 28px;cursor:pointer;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cf-submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(203,201,18,0.55);}
.cf-submit:active{transform:translateY(0);}
.cf-submit-arrow{transition:transform .3s ease;display:inline-flex;}
.cf-submit:hover .cf-submit-arrow{transform:translateX(5px);}

.cf-ripple{
  position:absolute;border-radius:50%;
  background:rgba(10,14,23,0.25);
  transform:scale(0);
  animation:cf-ripple-anim .6s ease-out forwards;
  pointer-events:none;
}
@keyframes cf-ripple-anim{ to{ transform:scale(2.6); opacity:0; } }

.cf-submit.is-loading .cf-submit-text{opacity:0.5;}
.cf-submit.is-loading .cf-submit-arrow{animation:cf-spin .7s linear infinite;}
@keyframes cf-spin{ to{ transform:rotate(360deg); } }

/* success state */
.cf-form.is-sent .cf-row,
.cf-form.is-sent .cf-field-full,
.cf-form.is-sent .cf-submit{
  opacity:0;pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .3s ease, transform .3s ease;
  position:absolute;
}
.cf-success{
  display:none;align-items:center;justify-content:flex-start;gap:12px;
  flex-direction:column;text-align:left;padding:20px 0;
  opacity:0;transform:scale(0.9);
  transition:opacity .5s cubic-bezier(.22,.9,.3,1), transform .5s cubic-bezier(.22,.9,.3,1);
}
.cf-success svg{
  width:52px;height:52px;padding:14px;border-radius:50%;
  background:rgba(203,201,18,0.15);color:#cbc912;box-sizing:border-box;
}
.cf-success span{font-size:15px;color:#f3f5f9;font-weight:500;}
.cf-form.is-sent .cf-success{display:flex;opacity:1;transform:scale(1);}

@media (max-width:900px){
  .cf-split{grid-template-columns:1fr;min-height:auto;}
  .cf-image-side{height:280px;transform:translateY(-20px);}
  .cf-image-side.in-view{transform:translateY(0);}
  .cf-image-caption{padding:28px;}
  .cf-image-caption p{font-size:17px;}
  .cf-form-side{padding:50px 24px;transform:translateY(20px);}
  .cf-form-side.in-view{transform:translateY(0);}
  .cf-row{grid-template-columns:1fr;gap:20px;}
}



/* ---- Mobile: horizontal swipeable slider ---- */
@media (max-width:760px){
  .wt-grid{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 20px 12px;
    margin:0;
    scrollbar-width:none;
  }
  .wt-grid::-webkit-scrollbar{display:none;}

  .wt-card{
    flex:0 0 82%;
    scroll-snap-align:center;
    height:280px;
  }

  .wt-dots{
    display:flex;justify-content:center;gap:8px;margin-top:22px;
  }
  .wt-dots i{
    width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,0.18);
    transition:background .25s ease, width .25s ease;
    display:block;font-style:normal;cursor:pointer;
  }
  .wt-dots i.active{background:#cbc912;width:22px;border-radius:4px;}
}

/* dots hidden on desktop/tablet — it's a grid there, not a slider */
@media (min-width:761px){
  .wt-dots{display:none;}
}




.cf-error{
  display:none;margin-top:14px;font-size:13px;color:#ff8a8a;
  background:rgba(255,100,100,0.08);border:1px solid rgba(255,100,100,0.25);
  padding:10px 14px;border-radius:10px;
}
.cf-error.show{display:block;}