*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pu:#9B30FF;
  --pu2:#C060FF;
  --pu3:#6A0FD9;
  --cy:#00F5FF;
  --cy2:#00C8D4;
  --bg:#07050F;
  --bg2:#0D0A1A;
  --bg3:#100D20;
  --t:#E8E0FF;
  --tm:rgba(232,224,255,0.55);
  --td:rgba(232,224,255,0.2);
  --b:rgba(232,224,255,0.07);
  --ba:rgba(155,48,255,0.35);
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--t);
  font-family:'Rajdhani',sans-serif;
  overflow-x:hidden;
}

/* SCANLINES */
body::after{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 2px,
    rgba(0,0,0,0.12) 2px,rgba(0,0,0,0.12) 4px
  );
  pointer-events:none;
  z-index:9999;
}

@keyframes glitch1{
  0%,94%,100%{clip-path:inset(0 0 100% 0);transform:translateX(0)}
  95%{clip-path:inset(20% 0 60% 0);transform:translateX(-5px)}
  97%{clip-path:inset(50% 0 30% 0);transform:translateX(5px)}
}
@keyframes glitch2{
  0%,91%,100%{clip-path:inset(0 0 100% 0);transform:translateX(0)}
  92%{clip-path:inset(60% 0 10% 0);transform:translateX(4px);color:var(--cy)}
  95%{clip-path:inset(30% 0 50% 0);transform:translateX(-4px)}
}
@keyframes flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}
  20%,22%,24%,55%{opacity:0.35}
}
@keyframes scanbeam{
  0%{top:-5%}100%{top:105%}
}
@keyframes ticker{
  0%{transform:translateX(0)}100%{transform:translateX(-50%)}
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 12px rgba(0,245,255,0.15),inset 0 0 12px rgba(0,245,255,0.05)}
  50%{box-shadow:0 0 25px rgba(0,245,255,0.35),inset 0 0 20px rgba(0,245,255,0.1)}
}
@keyframes border-pulse{
  0%,100%{border-color:rgba(155,48,255,0.3)}
  50%{border-color:rgba(0,245,255,0.5)}
}

/* NAV */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 3rem;
  position:sticky;top:0;z-index:500;
  background:rgba(7,5,15,0.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(155,48,255,0.25);
}
nav::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--cy) 50%,transparent 100%);
  opacity:0.3;
}
.logo{
  font-family:'Syncopate',sans-serif;
  font-size:1.25rem;font-weight:700;letter-spacing:0.18em;
  color:var(--t);text-decoration:none;
  text-shadow:0 0 25px rgba(155,48,255,0.7);
}
.logo em{font-style:normal;color:var(--cy);text-shadow:0 0 15px rgba(0,245,255,0.9)}
.nav-links{display:flex;align-items:center;gap:2.5rem;list-style:none}
.nav-links a{
  font-family:'Share Tech Mono',monospace;
  font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--tm);text-decoration:none;transition:all 0.15s;
}
.nav-links a:hover{color:var(--cy);text-shadow:0 0 10px rgba(0,245,255,0.6)}
.nav-cta{
  font-family:'Share Tech Mono',monospace;
  font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--cy);text-decoration:none;
  border:1px solid rgba(0,245,255,0.4);
  padding:0.55rem 1.3rem;
  text-shadow:0 0 8px rgba(0,245,255,0.5);
  animation:pulse-glow 3s ease-in-out infinite,border-pulse 3s ease-in-out infinite;
  transition:all 0.2s;
}
.nav-cta:hover{background:rgba(0,245,255,0.1);color:#fff}

/* HERO */
.hero{
  min-height:92vh;padding:5rem 3rem;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.hero-scanbeam{
  position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--pu2),var(--cy),transparent);
  opacity:0.5;
  animation:scanbeam 8s linear infinite;
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(155,48,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(155,48,255,0.04) 1px,transparent 1px);
  background-size:50px 50px;
  pointer-events:none;
}
.hero-glow{
  position:absolute;
  top:20%;right:5%;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(106,15,217,0.18) 0%,transparent 65%);
  pointer-events:none;
}
.hero-glow2{
  position:absolute;
  bottom:10%;left:10%;
  width:350px;height:350px;
  background:radial-gradient(circle,rgba(0,245,255,0.06) 0%,transparent 65%);
  pointer-events:none;
}
.hero-tag{
  font-family:'Share Tech Mono',monospace;
  font-size:0.72rem;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--cy);margin-bottom:2.5rem;
  display:flex;align-items:center;gap:0.75rem;
  text-shadow:0 0 10px rgba(0,245,255,0.5);
  position:relative;z-index:2;
  animation:flicker 8s infinite;
}
.hero-tag::before{content:'>';color:var(--pu2);margin-right:0.25rem}
.glitch-wrap{position:relative;z-index:2;margin-bottom:2rem}
.glitch-title{
  font-family:'Syncopate',sans-serif;
  font-size:clamp(3.5rem,8vw,8rem);
  font-weight:700;line-height:0.98;letter-spacing:0.04em;
  color:var(--t);
  text-shadow:0 0 40px rgba(155,48,255,0.4);
  position:relative;display:block;
}
.glitch-title::before{
  content:attr(data-text);
  position:absolute;inset:0;
  color:var(--cy);left:3px;
  animation:glitch1 6s infinite;
  z-index:-1;
}
.glitch-title::after{
  content:attr(data-text);
  position:absolute;inset:0;
  color:var(--pu2);left:-3px;
  animation:glitch2 8s infinite;
  z-index:-1;
}
.glitch-sub{
  font-family:'Syncopate',sans-serif;
  font-size:clamp(3.5rem,8vw,8rem);
  font-weight:700;line-height:0.98;letter-spacing:0.04em;
  display:block;
  color:transparent;
  -webkit-text-stroke:1.5px var(--pu2);
  text-shadow:0 0 30px rgba(192,96,255,0.5);
  margin-top:0.1em;
}
.hero-desc{
  font-size:1.1rem;font-weight:400;color:var(--tm);
  max-width:560px;line-height:1.85;margin-bottom:3rem;
  position:relative;z-index:2;
  border-left:2px solid var(--pu3);
  padding-left:1.5rem;
}
.hero-btns{display:flex;gap:1.25rem;flex-wrap:wrap;position:relative;z-index:2}

/* BUTTONS */
.btn-cy{
  font-family:'Share Tech Mono',monospace;font-size:0.78rem;
  letter-spacing:0.12em;text-transform:uppercase;
  color:#000;background:var(--cy);border:none;
  padding:0.95rem 2.25rem;text-decoration:none;display:inline-block;
  box-shadow:0 0 25px rgba(0,245,255,0.4);transition:all 0.2s;cursor:pointer;
}
.btn-cy:hover{background:#fff;box-shadow:0 0 40px rgba(0,245,255,0.7)}
.btn-pu{
  font-family:'Share Tech Mono',monospace;font-size:0.78rem;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--pu2);background:transparent;
  border:1px solid rgba(155,48,255,0.45);
  padding:0.95rem 2.25rem;text-decoration:none;display:inline-block;
  text-shadow:0 0 10px rgba(192,96,255,0.4);
  box-shadow:0 0 15px rgba(155,48,255,0.08),inset 0 0 15px rgba(155,48,255,0.04);
  transition:all 0.2s;cursor:pointer;
}
.btn-pu:hover{background:rgba(155,48,255,0.12);box-shadow:0 0 30px rgba(155,48,255,0.3)}

/* TICKER */
.ticker{
  overflow:hidden;padding:0.7rem 0;
  background:var(--bg2);
  border-top:1px solid rgba(155,48,255,0.3);
  border-bottom:1px solid rgba(0,245,255,0.2);
  position:relative;
}
.ticker::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:linear-gradient(180deg,var(--pu),var(--cy));
}
.ticker-inner{
  display:flex;animation:ticker 24s linear infinite;white-space:nowrap;
}
.ticker-inner span{
  font-family:'Share Tech Mono',monospace;
  font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;
  padding:0 2rem;color:var(--tm);
}
.ticker-inner span.hi{color:var(--cy);text-shadow:0 0 8px rgba(0,245,255,0.5)}
.ticker-inner span.sep{color:var(--pu2);opacity:0.4}

/* SERVICES */
.services{padding:7rem 3rem;max-width:1280px;margin:0 auto}
.sec-eye{
  font-family:'Share Tech Mono',monospace;
  font-size:0.68rem;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--cy);margin-bottom:0.85rem;
  text-shadow:0 0 8px rgba(0,245,255,0.5);
  animation:flicker 7s infinite;
}
.sec-title{
  font-family:'Syncopate',sans-serif;
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:700;letter-spacing:0.05em;
  color:var(--t);line-height:1.1;
  text-shadow:0 0 20px rgba(155,48,255,0.35);
  margin-bottom:0.75rem;
}
.sec-sub{font-size:1rem;color:var(--tm);font-weight:300;max-width:500px;line-height:1.7;margin-bottom:4rem}
.svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;
  background:rgba(155,48,255,0.12);
  border:1px solid rgba(155,48,255,0.18);
}
.svc-card{
  background:var(--bg2);padding:2.25rem;
  position:relative;overflow:hidden;
  cursor:default;transition:background 0.2s;
}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pu3),var(--cy));
  transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease;
}
.svc-card:hover{background:var(--bg3)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-num{
  font-family:'Share Tech Mono',monospace;
  font-size:0.68rem;letter-spacing:0.2em;
  color:rgba(155,48,255,0.35);
  margin-bottom:1.1rem;display:block;
}
.svc-name{
  font-family:'Syncopate',sans-serif;
  font-size:0.78rem;font-weight:700;letter-spacing:0.06em;
  color:var(--t);margin-bottom:0.85rem;line-height:1.5;
}
.svc-desc{
  font-size:0.92rem;font-weight:400;
  color:var(--tm);line-height:1.75;margin-bottom:1.25rem;
}
.svc-pill{
  font-family:'Share Tech Mono',monospace;
  font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--cy);border:1px solid rgba(0,245,255,0.25);
  padding:0.22rem 0.7rem;display:inline-block;
  text-shadow:0 0 6px rgba(0,245,255,0.35);
}

/* WHY */
.why{
  background:var(--bg2);
  border-top:1px solid rgba(155,48,255,0.2);
  border-bottom:1px solid rgba(0,245,255,0.12);
  padding:7rem 3rem;
}
.why-inner{max-width:1280px;margin:0 auto}
.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:rgba(155,48,255,0.08);
  border:1px solid rgba(155,48,255,0.12);
  margin-top:4rem;
}
.why-cell{
  background:var(--bg2);padding:2.25rem 2rem;
  transition:background 0.2s;position:relative;
}
.why-cell:hover{background:var(--bg3)}
.why-num{
  font-family:'Share Tech Mono',monospace;
  font-size:2.2rem;color:var(--pu3);opacity:0.3;
  line-height:1;margin-bottom:1rem;display:block;
  text-shadow:0 0 20px var(--pu);
}
.why-t{
  font-size:1.05rem;font-weight:700;color:var(--t);
  margin-bottom:0.5rem;letter-spacing:0.04em;
}
.why-d{font-size:0.88rem;color:var(--tm);font-weight:300;line-height:1.75}

/* TERMINAL CTA */
.terminal{padding:7rem 3rem;max-width:1280px;margin:0 auto}
.term-box{
  background:var(--bg2);
  border:1px solid rgba(155,48,255,0.3);
  box-shadow:
    0 0 60px rgba(155,48,255,0.06),
    inset 0 0 60px rgba(155,48,255,0.02);
  padding:4rem;position:relative;overflow:hidden;
}
.term-bar{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pu3),var(--pu2),var(--cy),var(--pu2),var(--pu3));
}
.term-header{
  font-family:'Share Tech Mono',monospace;
  font-size:0.65rem;letter-spacing:0.15em;
  color:rgba(155,48,255,0.4);
  margin-bottom:2rem;display:flex;align-items:center;gap:1rem;
}
.term-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--pu3);opacity:0.4;display:inline-block;
}
.term-prompt{
  font-family:'Share Tech Mono',monospace;
  font-size:0.8rem;letter-spacing:0.15em;
  color:var(--cy);margin-bottom:1.5rem;
  text-shadow:0 0 8px rgba(0,245,255,0.5);
}
.term-h{
  font-family:'Syncopate',sans-serif;
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:700;letter-spacing:0.05em;
  color:var(--t);margin-bottom:1.25rem;line-height:1.1;
  text-shadow:0 0 30px rgba(155,48,255,0.35);
}
.term-h em{font-style:normal;color:var(--pu2);text-shadow:0 0 20px rgba(192,96,255,0.6)}
.term-sub{
  font-size:1rem;color:var(--tm);
  max-width:520px;line-height:1.8;margin-bottom:2.75rem;
}
.term-btns{display:flex;gap:1.25rem;flex-wrap:wrap}
.term-glow{
  position:absolute;top:-50px;right:-50px;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(0,245,255,0.05) 0%,transparent 65%);
  pointer-events:none;
}

/* FOOTER */
footer{
  border-top:1px solid rgba(155,48,255,0.2);
  background:var(--bg2);
  padding:2.5rem 3rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.25rem;
}
.f-logo{
  font-family:'Syncopate',sans-serif;
  font-size:1.05rem;font-weight:700;letter-spacing:0.18em;
  color:var(--t);text-shadow:0 0 15px rgba(155,48,255,0.5);
}
.f-logo em{font-style:normal;color:var(--cy);text-shadow:0 0 12px rgba(0,245,255,0.7)}
.f-links{display:flex;gap:2.25rem;flex-wrap:wrap}
.f-links a{
  font-family:'Share Tech Mono',monospace;
  font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--td);text-decoration:none;transition:all 0.15s;
}
.f-links a:hover{color:var(--cy);text-shadow:0 0 8px rgba(0,245,255,0.4)}
.f-copy{
  font-family:'Share Tech Mono',monospace;
  font-size:0.62rem;letter-spacing:0.08em;
  color:rgba(232,224,255,0.15);
}
/* PAGE HERO — shorter than homepage */
.page-hero{
  padding:5rem 3rem 4rem;
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(155,48,255,0.2);
}
.page-hero .hero-grid{position:absolute;inset:0;pointer-events:none}
.page-hero .hero-glow{position:absolute;top:0;right:5%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(106,15,217,0.15) 0%,transparent 65%);pointer-events:none}
.page-hero .hero-scanbeam{position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--pu2),var(--cy),transparent);
  opacity:0.5;animation:scanbeam 8s linear infinite;pointer-events:none}
.page-hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto}

/* BREADCRUMB */
.breadcrumb{
  font-family:'Share Tech Mono',monospace;
  font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--td);margin-bottom:2rem;
  display:flex;align-items:center;gap:0.75rem;
}
.breadcrumb a{color:var(--tm);text-decoration:none;transition:color 0.15s}
.breadcrumb a:hover{color:var(--cy)}
.breadcrumb span{color:var(--pu2)}

/* SERVICES NAV — jump links */
.svc-nav{
  background:var(--bg2);
  border-bottom:1px solid rgba(155,48,255,0.2);
  position:sticky;top:63px;z-index:400;
  overflow-x:auto;
}
.svc-nav-inner{
  max-width:1280px;margin:0 auto;
  display:flex;padding:0 3rem;
}
.svc-nav-inner a{
  font-family:'Share Tech Mono',monospace;
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--tm);text-decoration:none;
  padding:1rem 1.5rem;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:all 0.15s;
}
.svc-nav-inner a:hover{color:var(--cy);border-bottom-color:var(--cy)}
.svc-nav-inner a.active{color:var(--pu2);border-bottom-color:var(--pu2)}

/* SERVICE BLOCK — alternating layout */
.svc-block{
  padding:6rem 3rem;
  border-bottom:1px solid rgba(155,48,255,0.12);
  max-width:1280px;margin:0 auto;
}
.svc-block-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:start;
}
.svc-block-inner.reverse{direction:rtl}
.svc-block-inner.reverse > *{direction:ltr}

/* LEFT — meta panel */
.svc-meta{
  position:sticky;top:120px;
}
.svc-index{
  font-family:'Share Tech Mono',monospace;
  font-size:0.68rem;letter-spacing:0.2em;
  color:rgba(155,48,255,0.4);
  margin-bottom:1.25rem;display:block;
}
.svc-block-name{
  font-family:'Syncopate',sans-serif;
  font-size:clamp(1.6rem,3vw,2.5rem);
  font-weight:700;letter-spacing:0.05em;
  color:var(--t);line-height:1.1;
  text-shadow:0 0 20px rgba(155,48,255,0.3);
  margin-bottom:1.25rem;
}
.svc-block-tagline{
  font-size:1.05rem;font-weight:400;
  color:var(--tm);line-height:1.8;
  margin-bottom:2rem;
  border-left:2px solid var(--pu3);
  padding-left:1.25rem;
}
.svc-pills{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:2.5rem}

/* RIGHT — detail panel */
.svc-body{
  font-size:1rem;font-weight:400;
  color:var(--tm);line-height:1.85;
  margin-bottom:2.5rem;
}
.svc-body p{margin-bottom:1.25rem}
.svc-body p:last-child{margin-bottom:0}

/* FEATURE LIST */
.svc-features{
  border:1px solid rgba(155,48,255,0.18);
  background:var(--bg2);
  margin-bottom:2.5rem;
}
.svc-feature{
  display:flex;align-items:flex-start;gap:1.25rem;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid rgba(155,48,255,0.1);
  transition:background 0.15s;
}
.svc-feature:last-child{border-bottom:none}
.svc-feature:hover{background:var(--bg3)}
.svc-feature-bullet{
  font-family:'Share Tech Mono',monospace;
  font-size:0.7rem;color:var(--cy);
  text-shadow:0 0 6px rgba(0,245,255,0.5);
  margin-top:0.2rem;flex-shrink:0;
}
.svc-feature-title{
  font-size:0.95rem;font-weight:700;
  color:var(--t);margin-bottom:0.25rem;letter-spacing:0.03em;
}
.svc-feature-desc{
  font-size:0.85rem;color:var(--tm);font-weight:300;line-height:1.7;
}

/* TECH STACK TAGS */
.svc-stack{margin-bottom:2.5rem}
.svc-stack-label{
  font-family:'Share Tech Mono',monospace;
  font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--td);margin-bottom:0.75rem;display:block;
}
.svc-stack-tags{display:flex;flex-wrap:wrap;gap:0.5rem}
.svc-stack-tag{
  font-family:'Share Tech Mono',monospace;
  font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--pu2);
  border:1px solid rgba(155,48,255,0.3);
  background:rgba(155,48,255,0.06);
  padding:0.3rem 0.8rem;
  text-shadow:0 0 6px rgba(192,96,255,0.3);
}

/* DIVIDER between sections */
.svc-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(155,48,255,0.3),rgba(0,245,255,0.2),transparent);
  max-width:1280px;margin:0 auto;
}

/* RESPONSIVE */
@media(max-width:900px){
  .svc-block-inner{grid-template-columns:1fr;gap:3rem}
  .svc-block-inner.reverse{direction:ltr}
  .svc-meta{position:static}
  .svc-nav-inner{padding:0 1.5rem}
  .page-hero,.svc-block{padding-left:1.5rem;padding-right:1.5rem}
}

/* WORK PAGE */

/* FILTER BAR */
.filter-bar{
  background:var(--bg2);
  border-bottom:1px solid rgba(155,48,255,0.2);
  padding:0 3rem;
  display:flex;align-items:center;gap:0;
  overflow-x:auto;
}
.filter-btn{
  font-family:'Share Tech Mono',monospace;
  font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--tm);background:transparent;border:none;
  padding:1rem 1.5rem;cursor:pointer;
  border-bottom:2px solid transparent;
  white-space:nowrap;transition:all 0.15s;
}
.filter-btn:hover{color:var(--cy)}
.filter-btn.active{color:var(--pu2);border-bottom-color:var(--pu2)}

/* PROJECT GRID */
.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:1px;
  background:rgba(155,48,255,0.1);
  border:1px solid rgba(155,48,255,0.15);
  max-width:1280px;margin:0 auto;
}
.project-card{
  background:var(--bg2);
  padding:2.25rem;
  cursor:pointer;
  transition:background 0.2s;
  position:relative;overflow:hidden;
}
.project-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pu3),var(--cy));
  transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease;
}
.project-card:hover{background:var(--bg3)}
.project-card:hover::before{transform:scaleX(1)}
.project-card[data-hidden="true"]{display:none}

.project-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;
}
.project-num{
  font-family:'Share Tech Mono',monospace;
  font-size:0.65rem;letter-spacing:0.2em;
  color:rgba(155,48,255,0.4);
}
.project-type{
  font-family:'Share Tech Mono',monospace;
  font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--cy);border:1px solid rgba(0,245,255,0.25);
  padding:0.2rem 0.65rem;
  text-shadow:0 0 6px rgba(0,245,255,0.3);
}
.project-name{
  font-family:'Syncopate',sans-serif;
  font-size:0.9rem;font-weight:700;letter-spacing:0.05em;
  color:var(--t);margin-bottom:0.75rem;line-height:1.4;
}
.project-summary{
  font-size:0.88rem;color:var(--tm);font-weight:300;
  line-height:1.7;margin-bottom:1.5rem;
}
.project-tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.5rem}
.project-expand{
  font-family:'Share Tech Mono',monospace;
  font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--pu2);display:flex;align-items:center;gap:0.5rem;
  transition:color 0.15s;
}
.project-expand::after{content:'→';transition:transform 0.15s}
.project-card:hover .project-expand{color:var(--cy)}
.project-card:hover .project-expand::after{transform:translateX(4px)}

/* REAL badge */
.badge-real{
  font-family:'Share Tech Mono',monospace;
  font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--cy);border:1px solid rgba(0,245,255,0.3);
  background:rgba(0,245,255,0.05);
  padding:0.15rem 0.5rem;
}
.badge-case{
  font-family:'Share Tech Mono',monospace;
  font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--pu2);border:1px solid rgba(155,48,255,0.3);
  background:rgba(155,48,255,0.05);
  padding:0.15rem 0.5rem;
}

/* MODAL OVERLAY */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(7,5,15,0.92);
  backdrop-filter:blur(8px);
  z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  opacity:0;pointer-events:none;
  transition:opacity 0.2s;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--bg2);
  border:1px solid rgba(155,48,255,0.3);
  max-width:760px;width:100%;
  max-height:85vh;overflow-y:auto;
  position:relative;
  box-shadow:0 0 80px rgba(155,48,255,0.1);
}
.modal-bar{
  position:sticky;top:0;
  background:var(--bg2);
  border-bottom:1px solid rgba(155,48,255,0.2);
  padding:1rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
  z-index:10;
}
.modal-bar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pu3),var(--pu2),var(--cy),var(--pu2),var(--pu3));
}
.modal-label{
  font-family:'Share Tech Mono',monospace;
  font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  color:rgba(155,48,255,0.5);
}
.modal-close{
  font-family:'Share Tech Mono',monospace;
  font-size:0.72rem;letter-spacing:0.1em;
  color:var(--tm);background:none;border:1px solid rgba(255,255,255,0.08);
  padding:0.35rem 0.85rem;cursor:pointer;transition:all 0.15s;
}
.modal-close:hover{color:var(--cy);border-color:rgba(0,245,255,0.3)}
.modal-body{padding:2.5rem}
.modal-type{
  font-family:'Share Tech Mono',monospace;
  font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--cy);margin-bottom:0.75rem;display:flex;align-items:center;gap:0.75rem;
}
.modal-title{
  font-family:'Syncopate',sans-serif;
  font-size:clamp(1.4rem,3vw,2.2rem);
  font-weight:700;letter-spacing:0.05em;
  color:var(--t);line-height:1.1;
  text-shadow:0 0 20px rgba(155,48,255,0.3);
  margin-bottom:1.5rem;
}
.modal-section-label{
  font-family:'Share Tech Mono',monospace;
  font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--td);margin-bottom:0.6rem;display:block;
  margin-top:2rem;
}
.modal-section-label:first-of-type{margin-top:0}
.modal-text{
  font-size:0.95rem;color:var(--tm);font-weight:300;line-height:1.85;
  margin-bottom:0.75rem;
}
.modal-outcomes{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(155,48,255,0.1);
  border:1px solid rgba(155,48,255,0.15);
  margin-top:0.5rem;
}
.modal-outcome{
  background:var(--bg2);padding:0.85rem 1.25rem;
  display:flex;align-items:flex-start;gap:0.85rem;
  font-size:0.88rem;color:var(--tm);font-weight:300;line-height:1.6;
}
.modal-outcome-bullet{
  color:var(--cy);font-family:'Share Tech Mono',monospace;
  font-size:0.7rem;flex-shrink:0;margin-top:0.1rem;
  text-shadow:0 0 6px rgba(0,245,255,0.4);
}
.modal-stack{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.5rem}

@media(max-width:900px){
  .filter-bar{padding:0 1.5rem}
  .project-grid-wrap{padding:3rem 1.5rem}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE & TABLET
   Breakpoints: 768px (mobile), 1024px (tablet)
═══════════════════════════════════════════ */

@media(max-width:1024px){
  /* NAV */
  nav{padding:1rem 1.5rem}
  .nav-links{gap:1.5rem}

  /* HERO */
  .hero{padding:4rem 1.5rem}

  /* SECTIONS */
  .services{padding:5rem 1.5rem}
  .why{padding:5rem 1.5rem}
  .terminal{padding:5rem 1.5rem}

  /* SERVICE BLOCKS */
  .svc-block{padding:4rem 1.5rem}
  .svc-block-inner{gap:3rem}

  /* PAGE HERO */
  .page-hero{padding:4rem 1.5rem 3rem}

  /* FOOTER */
  footer{padding:2rem 1.5rem}
}

@media(max-width:768px){
  /* NAV — hide links, show only logo and CTA */
  .nav-links{display:none}
  nav{padding:1rem 1.5rem}
  .nav-cta{font-size:0.65rem;padding:0.45rem 0.9rem}

  /* HERO */
  .hero{
    min-height:auto;
    padding:4rem 1.5rem 3rem;
  }
  .hero-stats{
    flex-direction:column;gap:1.5rem;
    margin-top:3rem;padding-top:2rem;
  }
  .hero-btns{flex-direction:column}
  .btn-cy,.btn-pu{text-align:center;width:100%}
  .hero-glow,.hero-glow2{display:none}

  /* TICKER */
  .ticker-inner span{padding:0 1rem}

  /* SERVICES GRID */
  .svc-grid{grid-template-columns:1fr}
  .services{padding:4rem 1.5rem}

  /* WHY GRID */
  .why{padding:4rem 1.5rem}
  .why-grid{grid-template-columns:1fr}

  /* TERMINAL */
  .terminal{padding:4rem 1.5rem}
  .term-box{padding:2.5rem 1.5rem}
  .term-btns{flex-direction:column}

  /* FOOTER */
  footer{
    padding:2rem 1.5rem;
    flex-direction:column;
    align-items:flex-start;
    gap:1.25rem;
  }
  .f-links{gap:1.25rem}

  /* PAGE HERO */
  .page-hero{padding:3rem 1.5rem 2.5rem}
  .page-hero-inner .hero-desc{font-size:0.95rem}

  /* BREADCRUMB */
  .breadcrumb{margin-bottom:1.25rem}

  /* SERVICE BLOCKS (services page) */
  .svc-block{padding:3.5rem 1.5rem}
  .svc-block-inner{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .svc-block-inner.reverse{direction:ltr}
  .svc-meta{position:static}
  .svc-nav-inner{padding:0 1.5rem}

  /* ABOUT page grids */
  .why-inner .why-grid{grid-template-columns:1fr}

  /* WORK page */
  .project-grid{grid-template-columns:1fr}
  .filter-bar{padding:0 1.5rem}
  .modal-overlay{padding:1rem}
  .modal-body{padding:1.5rem}

  /* BLOG page */
  .blog-layout{grid-template-columns:1fr !important}
  .blog-sidebar{display:none}

  /* CONTACT page */
  .contact-layout{grid-template-columns:1fr !important}
  .contact-sidebar{display:none}
  .contact-name-row{grid-template-columns:1fr !important}
  .budget-grid{grid-template-columns:1fr 1fr !important}

  /* PRIVACY page */
  .privacy-layout{grid-template-columns:1fr !important}
  .privacy-toc{display:none}

  /* Inline grids used across about/privacy/contact */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 260px"]{
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:200px 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* Sticky sidebars — unstick on mobile */
  [style*="position:sticky"]{
    position:static !important;
  }

  /* Padding overrides for inline-styled sections */
  [style*="padding:6rem 3rem"],
  [style*="padding:5rem 3rem"],
  [style*="padding:7rem 3rem"]{
    padding-left:1.5rem !important;
    padding-right:1.5rem !important;
    padding-top:3.5rem !important;
    padding-bottom:3.5rem !important;
  }

  /* Gap overrides for inline grids */
  [style*="gap:5rem"]{gap:2.5rem !important}
  [style*="gap:3rem"]{gap:1.5rem !important}

  /* CTA strip */
  .cta-full{
    grid-template-columns:1fr !important;
    padding:3rem 1.5rem !important;
  }
  .cta-full a{width:100%;text-align:center}

  /* Budget radio grid */
  #budget-group{grid-template-columns:1fr 1fr !important}

  /* Form name/email row */
  #form-wrap > div:first-of-type{
    grid-template-columns:1fr !important;
  }

  /* Comparison table on about page */
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:480px){
  /* Extra small screens */
  .logo{font-size:1rem}
  .glitch-title{font-size:clamp(2.5rem,12vw,4rem)}
  .glitch-sub{font-size:clamp(2.5rem,12vw,4rem)}
  .sec-title{font-size:clamp(1.6rem,8vw,2.5rem)}
  .term-h{font-size:clamp(1.4rem,7vw,2rem)}
  .hero h1{font-size:clamp(2.5rem,12vw,4rem)}
  .svc-block-name{font-size:1.4rem}
  #budget-group{grid-template-columns:1fr !important}
  .hero-stats .stat-num{font-size:1.4rem}
  .term-box{padding:2rem 1.25rem}
  .modal-body{padding:1.25rem}
}
/* ── SAAS TEASER (homepage) ─────────────────────── */
:root { --am: #f59e0b; }

.saas-teaser {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0,245,255,0.04) 0%, rgba(13,10,26,0.98) 60%);
  border-top: 1px solid rgba(0,245,255,0.15);
  border-bottom: 1px solid rgba(155,48,255,0.2);
  padding: 6rem 3rem;
}

.saas-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.saas-product-card {
  background: var(--bg2);
  border: 1px solid rgba(155,48,255,0.2);
  border-left: 3px solid var(--cy);
  padding: 1.75rem;
  margin-top: 2rem;
  position: relative;
}

.saas-product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cy), transparent);
}

.saas-product-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--cy);
  text-shadow: 0 0 6px rgba(0,245,255,0.4);
  display: block;
  margin-bottom: 0.5rem;
}

.saas-product-name {
  font-family: 'Syncopate', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--t);
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 20px rgba(0,245,255,0.2);
}

.saas-product-tagline {
  font-size: 0.9rem;
  color: var(--tm);
  line-height: 1.75;
  margin-bottom: 1.25rem;
  font-weight: 300;
}

.saas-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Mockup (shared with old barbudi styles) */
.saas-screen { display: flex; justify-content: center; }

.barbudi-mockup {
  width: 100%;
  max-width: 440px;
  background: #0d0a1a;
  border: 1px solid rgba(0,245,255,0.2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,245,255,0.08), 0 0 120px rgba(155,48,255,0.05);
  font-family: 'Share Tech Mono', monospace;
}

.bm-bar {
  background: #111827;
  border-bottom: 1px solid rgba(0,245,255,0.15);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bm-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: inline-block;
}

.bm-title {
  font-size: 0.65rem;
  color: rgba(0,245,255,0.5);
  margin-left: 0.5rem;
  letter-spacing: 0.05em;
}

.bm-body {
  display: flex;
  min-height: 280px;
}

.bm-sidebar {
  width: 110px;
  background: #0a0f1e;
  border-right: 1px solid rgba(155,48,255,0.1);
  padding: 1rem 0.5rem;
  flex-shrink: 0;
}

.bm-logo {
  width: 28px; height: 28px;
  background: var(--am);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  color: #0d0a1a;
  margin: 0 auto 1rem;
}

.bm-nav-item {
  font-size: 0.6rem;
  color: rgba(148,163,184,0.5);
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-nav-item.active {
  color: var(--am);
  background: rgba(245,158,11,0.1);
  border-left: 2px solid var(--am);
  padding-left: calc(0.5rem - 2px);
}

.bm-main {
  flex: 1;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bm-stat-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0.4rem;
}

.bm-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
}

.bm-stat-val { font-size: 0.75rem; font-weight: 700; }
.bm-stat-label { font-size: 0.5rem; color: rgba(148,163,184,0.4); margin-top: 1px; }

.bm-chart-label { font-size: 0.55rem; color: rgba(0,245,255,0.4); }

.bm-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
  flex: 1;
}

.bm-bar-wrap {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

.bm-bar-bg {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: rgba(255,255,255,0.04);
  border-radius: 2px 2px 0 0;
}

.bm-bar-fg {
  width: 100%;
  background: var(--am);
  border-radius: 2px 2px 0 0;
  opacity: 0.8;
  position: relative;
  z-index: 1;
}

.bm-event-row { display: flex; gap: 0.4rem; }

.bm-event {
  font-size: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-event.teal  { background: rgba(20,184,166,0.12);  color: #14b8a6; border: 1px solid rgba(20,184,166,0.2);  }
.bm-event.purple{ background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.2); }

/* ── SAAS CARD (services page) ──────────────────── */
.saas-card {
  background: var(--bg3);
  border: 1px solid rgba(0,245,255,0.15);
  border-top: 2px solid var(--cy);
  padding: 1.75rem;
  margin-bottom: 2rem;
}

.saas-card-header { margin-bottom: 1.5rem; }

.saas-card-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--cy);
  text-shadow: 0 0 6px rgba(0,245,255,0.4);
  display: block;
  margin-bottom: 0.5rem;
}

.saas-card-name {
  font-family: 'Syncopate', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--t);
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 15px rgba(0,245,255,0.2);
}

.saas-card-desc {
  font-size: 0.9rem;
  color: var(--tm);
  line-height: 1.75;
  font-weight: 300;
}

/* Responsive */
@media (max-width: 900px) {
  .saas-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .saas-screen { display: none; }
  .saas-teaser { padding: 4rem 1.5rem; }
}

@media (max-width: 768px) {
  .saas-teaser { padding: 3.5rem 1.5rem; }
}