/* ============================================================
   WZSysTech — Design System
   Luxury Technology, not Cyberpunk Gaming.
   ============================================================ */

:root{
  /* -- Color: Luxury Technology palette -- */
  --bg-0:        #08090b;   /* near-black base */
  --bg-1:        #0e1013;   /* dark graphite panels */
  --bg-2:        #15181d;   /* elevated graphite */
  --border-hair: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.14);

  --text-0:      #f4f6f8;   /* off-white */
  --text-1:      #b9bfc9;   /* muted gray */
  --text-2:      #767c87;   /* dim gray */

  --accent-blue:   #3f7bff;
  --accent-cyan:   #34d2e0;
  --accent-violet: #8a5cf6;

  --grad-signature: linear-gradient(120deg, var(--accent-blue) 0%, var(--accent-cyan) 55%, var(--accent-violet) 100%);
  --glow-blue:   0 0 60px rgba(63,123,255,0.25);
  --glow-cyan:   0 0 60px rgba(52,210,224,0.20);

  /* -- Type -- */
  --font-display: 'Manrope', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-hero:   clamp(2.6rem, 6vw, 6rem);
  --fs-h1:     clamp(2.1rem, 4.2vw, 3.8rem);
  --fs-h2:     clamp(1.7rem, 3vw, 2.75rem);
  --fs-h3:     clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-lead:   clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.875rem;
  --fs-eyebrow: 0.78rem;

  /* -- Spacing / layout -- */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .25s;
  --dur-med: .55s;
  --dur-slow: .9s;

  --header-h: 84px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.08;margin:0;letter-spacing:-0.02em;}
p{margin:0;}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-cyan);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--grad-signature);
}

.section{padding-block:var(--section-y); position:relative;}
.section-alt{background:var(--bg-1); border-top:1px solid var(--border-hair); border-bottom:1px solid var(--border-hair);}

.section-head{
  max-width:760px;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.section-head h2{margin-top:.9rem;}
.section-head p{margin-top:1.1rem; color:var(--text-1); font-size:var(--fs-lead); max-width:640px;}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head.center .eyebrow::before{display:none;}

/* -- Buttons -- */
.btn{
  --btn-fg: var(--bg-0);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.95rem 1.7rem;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  white-space:nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn svg{width:16px;height:16px;flex:none;}
.btn-primary{
  background:var(--text-0);
  color:var(--btn-fg);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--glow-blue); background:#fff;}
.btn-ghost{
  background:transparent;
  color:var(--text-0);
  border-color:var(--border-soft);
}
.btn-ghost:hover{ border-color:var(--accent-cyan); color:var(--accent-cyan); transform:translateY(-2px);}
.btn-wa{
  background:rgba(52,210,224,0.08);
  color:var(--accent-cyan);
  border-color:rgba(52,210,224,0.35);
}
.btn-wa:hover{ background:rgba(52,210,224,0.16); transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-sm{padding:.7rem 1.3rem;font-size:.72rem;}

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition: height var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  height:66px;
  background:rgba(8,9,11,0.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border-hair);
  box-shadow:0 10px 40px rgba(0,0,0,0.35);
}
.header-inner{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.logo{
  font-family:var(--font-display); font-weight:800; font-size:1.28rem; letter-spacing:-.02em;
  display:flex; align-items:center; gap:.5rem;
}
.logo .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--grad-signature);
  box-shadow:0 0 12px var(--accent-cyan);
}
.main-nav{display:flex; align-items:center; gap:2.1rem;}
.main-nav a{
  font-size:.92rem; color:var(--text-1); position:relative; padding:.3rem 0;
  transition:color var(--dur-fast) var(--ease-out);
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--grad-signature); transition:width var(--dur-fast) var(--ease-out);
}
.main-nav a:hover{color:var(--text-0);}
.main-nav a:hover::after{width:100%;}
.header-cta{display:flex; align-items:center; gap:1rem;}
.header-phone{
  display:flex; flex-direction:column; align-items:flex-end; font-family:var(--font-mono); font-size:.78rem; color:var(--text-2); line-height:1.3;
}
.header-phone a{color:var(--text-0); font-weight:600;}
.nav-item{position:relative;}
.nav-item > a{display:flex; align-items:center; gap:.35rem;}
.nav-item .chev{width:10px;height:10px; transition:transform var(--dur-fast) var(--ease-out);}
.nav-item:hover .chev, .nav-item.is-open .chev{transform:rotate(180deg);}
.dropdown{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px);
  width:min(560px, 80vw);
  background:rgba(14,16,19,0.92);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border-hair); border-radius:var(--radius-m);
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  padding:1.4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.2rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.nav-item:hover .dropdown, .nav-item.is-open .dropdown, .dropdown:hover{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s;
}
.dropdown a{
  display:flex; flex-direction:column; gap:.15rem; padding:.7rem .8rem; border-radius:10px;
  transition:background var(--dur-fast);
}
.dropdown a:hover{background:rgba(255,255,255,0.05);}
.dropdown a:hover::after{width:0;}
.dropdown a .d-title{font-size:.9rem; color:var(--text-0); font-weight:600;}
.dropdown a .d-sub{font-size:.76rem; color:var(--text-2);}
.dropdown-foot{grid-column:1/-1; margin-top:.6rem; padding-top:.9rem; border-top:1px solid var(--border-hair); display:flex; justify-content:space-between; align-items:center;}
.dropdown-foot span{font-family:var(--font-mono); font-size:.72rem; color:var(--text-2); text-transform:uppercase; letter-spacing:.08em;}
.dropdown-foot a{color:var(--accent-cyan); font-size:.82rem; padding:0;}

.mobile-sub{max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-out);}
.mobile-nav li.has-sub.is-open .mobile-sub{max-height:600px;}
.mobile-sub-toggle{
  display:inline-flex; align-items:center; gap:.6rem; width:100%; justify-content:space-between;
}
.mobile-sub-toggle .chev{width:14px;height:14px; transition:transform var(--dur-fast) var(--ease-out); flex:none;}
li.has-sub.is-open .mobile-sub-toggle .chev{transform:rotate(180deg);}
.mobile-sub a{
  font-size:1.05rem; font-weight:600; padding:.5rem 0 .5rem 1rem; color:var(--text-1);
  opacity:1; transform:none;
}
.mobile-sub a:hover{color:var(--accent-cyan);}

.main-nav a.is-active{color:var(--text-0);}
.main-nav a.is-active::after{width:100%;}
.nav-item.is-current > a{color:var(--text-0);}

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px;height:44px; border:1px solid var(--border-soft); border-radius:50%;
  background:transparent; cursor:pointer; align-items:center;
}
.menu-toggle span{width:16px;height:1.5px;background:var(--text-0); transition:all var(--dur-fast) var(--ease-out);}
.menu-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-toggle.is-open span:nth-child(2){opacity:0;}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ============ MOBILE NAV ============ */
.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:rgba(8,9,11,0.98);
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter) 3rem;
  transform:translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.mobile-nav.is-open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s;}
.mobile-nav ul{display:flex; flex-direction:column; gap:.2rem;}
.mobile-nav li{
  overflow:hidden;
}
.mobile-nav a{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem,8vw,2.6rem); padding:.5rem 0; color:var(--text-0);
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color var(--dur-fast);
}
.mobile-nav.is-open a{opacity:1; transform:translateY(0);}
.mobile-nav a:hover{color:var(--accent-cyan);}
.mobile-nav-footer{margin-top:2.5rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start;}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + 2rem);
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg canvas{width:100%; height:100%; display:block;}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, transparent 0%, var(--bg-0) 85%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:2; width:100%;}
.hero-content{max-width:880px;}
.breadcrumb{
  font-family:var(--font-mono); font-size:.76rem; color:var(--text-2);
  display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.6rem;
}
.breadcrumb a{color:var(--text-2); transition:color var(--dur-fast);}
.breadcrumb a:hover{color:var(--accent-cyan);}
.breadcrumb .sep{color:var(--text-2); opacity:.5; margin:0 .1rem;}
.breadcrumb span[aria-current]{color:var(--text-1);}
.hero-content .eyebrow{margin-bottom:1.6rem;}
.hero h1{
  font-size:var(--fs-hero);
  color:var(--text-0);
}
.hero h1 .grad{
  background:var(--grad-signature);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{
  margin-top:1.6rem; font-size:var(--fs-lead); color:var(--text-1); max-width:640px;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem;}
.hero-phone{
  margin-top:2.2rem; display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.85rem; color:var(--text-2);
}
.hero-phone a{color:var(--text-0); font-weight:600;}
.scroll-cue{
  position:absolute; bottom:2.4rem; left:var(--gutter); z-index:2;
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--text-2); text-transform:uppercase;
}
.scroll-cue .line{width:1px; height:32px; background:linear-gradient(var(--text-2), transparent); position:relative; overflow:hidden;}
.scroll-cue .line::after{content:"";position:absolute; top:-32px; left:0; width:100%; height:32px; background:var(--accent-cyan); animation:scrollcue 2.2s var(--ease-in-out) infinite;}
@keyframes scrollcue{ to{ top:32px; } }

/* Load sequence overlay */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--bg-0);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s var(--ease-out), visibility 0s linear .5s;
}
.loader.is-done{opacity:0; visibility:hidden;}
.loader-word{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,5vw,2.6rem);
  opacity:0; position:absolute; letter-spacing:-.02em;
}
.loader-word.grad{background:var(--grad-signature); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ============ TRUST STRIP ============ */
.trust{padding-block:clamp(3rem,6vw,5rem); border-top:1px solid var(--border-hair); border-bottom:1px solid var(--border-hair);}
.trust-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; margin-bottom:2.6rem;}
.trust-head h2{font-size:var(--fs-h2);}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-hair); border:1px solid var(--border-hair); border-radius:var(--radius-m); overflow:hidden;}
.trust-item{background:var(--bg-0); padding:1.8rem 1.6rem; display:flex; flex-direction:column; gap:.4rem;}
.trust-num{font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.4vw,2.6rem);}
.trust-num .grad{background:var(--grad-signature); -webkit-background-clip:text; background-clip:text; color:transparent;}
.trust-label{color:var(--text-2); font-size:.86rem;}

/* ============ SERVICES ============ */
.services-list{display:flex; flex-direction:column;}
.service-row{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,5rem);
  align-items:center; padding-block:clamp(3rem,7vw,5.5rem);
  border-top:1px solid var(--border-hair);
}
.services-list .service-row:last-child{border-bottom:1px solid var(--border-hair);}
.service-row.reverse{grid-template-columns:1.1fr 0.9fr;}
.service-row.reverse .service-visual{order:2;}
.service-index{font-family:var(--font-mono); font-size:.78rem; color:var(--text-2); letter-spacing:.1em;}
.service-copy h3{font-size:var(--fs-h2); margin-top:.6rem;}
.service-copy p.lead{color:var(--text-1); margin-top:1rem; font-size:1.03rem; max-width:480px;}
.tag-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem;}
.tag{
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-1);
  border:1px solid var(--border-hair); padding:.4rem .8rem; border-radius:999px;
}
.service-copy .btn{margin-top:1.8rem;}

.service-visual{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-l);
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border-hair); overflow:hidden;
}
.service-visual .glow{position:absolute; width:60%; height:60%; border-radius:50%; filter:blur(70px); opacity:.35;}

/* Browser mock */
.mock-browser{position:absolute; inset:8%; border-radius:12px; background:var(--bg-0); border:1px solid var(--border-hair); box-shadow:0 30px 60px rgba(0,0,0,.5); overflow:hidden;}
.mock-browser .bar{height:32px; display:flex; align-items:center; gap:6px; padding-inline:12px; border-bottom:1px solid var(--border-hair);}
.mock-browser .dot{width:8px;height:8px;border-radius:50%; background:var(--border-soft);}
.mock-browser .body{padding:16px; display:flex; flex-direction:column; gap:10px;}
.mock-bar{height:10px; border-radius:4px; background:var(--bg-2);}
.mock-bar.grad{background:var(--grad-signature); opacity:.7;}

/* Phone mock */
.mock-phone{position:absolute; right:12%; top:50%; transform:translateY(-50%); width:44%; aspect-ratio:9/18; border-radius:26px; background:var(--bg-0); border:1px solid var(--border-soft); box-shadow:0 30px 60px rgba(0,0,0,.55); padding:10px;}
.mock-phone .screen{width:100%; height:100%; border-radius:18px; background:linear-gradient(180deg, var(--bg-1), var(--bg-0)); overflow:hidden; padding:14px; display:flex; flex-direction:column; gap:8px;}
.mock-phone .notch{width:36%; height:5px; border-radius:4px; background:var(--bg-2); align-self:center; margin-bottom:6px;}
.mock-card{border-radius:10px; background:var(--bg-2); padding:10px; display:flex; flex-direction:column; gap:6px;}

/* Dashboard mock */
.mock-dash{position:absolute; inset:8%; border-radius:12px; background:var(--bg-0); border:1px solid var(--border-hair); display:grid; grid-template-columns:70px 1fr; overflow:hidden;}
.mock-dash .side{border-right:1px solid var(--border-hair); padding:14px 10px; display:flex; flex-direction:column; gap:10px;}
.mock-dash .side i{width:100%; height:8px; border-radius:4px; background:var(--bg-2);}
.mock-dash .main{padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start;}
.mock-dash .card{background:var(--bg-1); border:1px solid var(--border-hair); border-radius:8px; padding:10px; height:64px; position:relative; overflow:hidden;}
.mock-dash .card::after{content:""; position:absolute; left:8px; right:8px; bottom:8px; height:4px; border-radius:2px; background:var(--grad-signature); opacity:.6;}

/* AI network mock */
.mock-ai{position:absolute; inset:0;}

/* generic node svg styles */
.node-svg circle{fill:var(--bg-2); stroke:var(--border-soft);}
.node-svg .active{stroke:var(--accent-cyan);}
.node-svg line{stroke:var(--border-hair);}
.node-svg .flow{stroke:var(--accent-cyan); stroke-dasharray:4 6;}

/* ============ INFRASTRUCTURE ============ */
.infra-band{background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(63,123,255,0.08), transparent 60%), var(--bg-1);}
.infra-diagram{
  margin-top:3rem; border:1px solid var(--border-hair); border-radius:var(--radius-l);
  background:var(--bg-0); padding:clamp(1.5rem,4vw,3.5rem);
}
.infra-flow{display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap;}
.infra-node{
  flex:1 1 130px; text-align:center; padding:1.2rem .8rem; border:1px solid var(--border-hair);
  border-radius:var(--radius-m); background:var(--bg-1); cursor:pointer; position:relative;
  transition:border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.infra-node .ico{width:34px;height:34px;margin-inline:auto .7rem; opacity:.85;}
.infra-node .label{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;}
.infra-node.is-active{border-color:var(--accent-cyan); box-shadow:var(--glow-cyan); transform:translateY(-4px);}
.infra-connector{flex:0 0 34px; height:1px; background:var(--border-soft); position:relative; overflow:hidden; align-self:center; margin-top:1.4rem;}
.infra-connector::after{content:""; position:absolute; top:0; left:-40%; width:40%; height:100%; background:var(--accent-cyan); animation:infraflow 2.4s linear infinite;}
@keyframes infraflow{ to{ left:140%; } }
.infra-detail{
  margin-top:2.2rem; padding-top:2rem; border-top:1px solid var(--border-hair);
  display:none; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.4rem;
}
.infra-detail.is-visible{display:grid;}
.infra-detail-item{display:flex; align-items:center; gap:.7rem; font-size:.92rem; color:var(--text-1);}
.infra-detail-item .dot{width:6px;height:6px;border-radius:50%; background:var(--accent-cyan);}
.infra-services-grid{margin-top:5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-hair); border:1px solid var(--border-hair); border-radius:var(--radius-m); overflow:hidden;}
.infra-service-card{background:var(--bg-0); padding:2rem; display:flex; flex-direction:column; gap:.8rem;}
.infra-service-card h4{font-size:1.15rem; font-family:var(--font-display); font-weight:700;}
.infra-service-card ul{display:flex; flex-direction:column; gap:.4rem; margin-top:.4rem;}
.infra-service-card li{font-size:.88rem; color:var(--text-1); position:relative; padding-left:1rem;}
.infra-service-card li::before{content:"—"; position:absolute; left:0; color:var(--text-2);}

/* ============ TECH STACK ============ */
.stack-grid{margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.stack-cat{border:1px solid var(--border-hair); border-radius:var(--radius-m); padding:1.6rem; background:var(--bg-1); transition:border-color var(--dur-fast), transform var(--dur-fast);}
.stack-cat:hover{border-color:var(--border-soft); transform:translateY(-3px);}
.stack-cat h4{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-cyan);}
.stack-chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem;}
.stack-chip{font-size:.82rem; color:var(--text-1); border:1px solid var(--border-hair); border-radius:8px; padding:.4rem .7rem;}

/* ============ WHY US ============ */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-hair); border:1px solid var(--border-hair); border-radius:var(--radius-m); overflow:hidden; margin-top:2.5rem;}
.why-card{background:var(--bg-0); padding:2.2rem; min-height:220px; display:flex; flex-direction:column; justify-content:space-between; transition:background var(--dur-fast);}
.why-card:hover{background:var(--bg-1);}
.why-num{font-family:var(--font-mono); font-size:.78rem; color:var(--text-2);}
.why-card h4{font-size:1.2rem; margin-top:1.6rem;}
.why-card p{color:var(--text-1); margin-top:.6rem; font-size:.94rem;}

/* ============ PROCESS TIMELINE ============ */
.timeline{position:relative; margin-top:3.5rem;}
.timeline-track{position:absolute; left:24px; top:0; bottom:0; width:1px; background:var(--border-hair);}
.timeline-track .fill{position:absolute; top:0; left:0; width:100%; height:0%; background:var(--grad-signature); transition:height .1s linear;}
.timeline-step{position:relative; padding-left:70px; padding-bottom:clamp(2.5rem,5vw,4rem); display:grid; grid-template-columns:1fr 1.4fr; gap:2rem; align-items:start;}
.timeline-step:last-child{padding-bottom:0;}
.timeline-dot{position:absolute; left:14px; top:2px; width:22px; height:22px; border-radius:50%; background:var(--bg-0); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center;}
.timeline-dot::after{content:""; width:6px;height:6px;border-radius:50%; background:var(--text-2);}
.timeline-step.is-active .timeline-dot{border-color:var(--accent-cyan); box-shadow:var(--glow-cyan);}
.timeline-step.is-active .timeline-dot::after{background:var(--accent-cyan);}
.timeline-num{font-family:var(--font-mono); color:var(--text-2); font-size:.85rem;}
.timeline-step h4{font-size:1.5rem; margin-top:.4rem;}
.timeline-step p{color:var(--text-1); margin-top:.6rem; max-width:420px;}

/* ============ INDUSTRIES ============ */
.industries-grid{margin-top:2.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;}
.industry-chip{
  border:1px solid var(--border-hair); border-radius:var(--radius-m); padding:1.4rem 1.2rem;
  background:var(--bg-1); transition:border-color var(--dur-fast), transform var(--dur-fast), background var(--dur-fast);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.industry-chip:hover{border-color:var(--accent-cyan); transform:translateY(-3px); background:var(--bg-2);}
.industry-chip span{font-size:.96rem; font-weight:600;}
.industry-chip svg{width:16px;height:16px; opacity:.5;}
.industry-chip.wide{grid-column:span 2;}

/* ============ CASE STUDIES ============ */
.case-grid{margin-top:2.5rem; display:grid; grid-template-columns:1fr; gap:1.4rem;}
.case-card{
  border:1px solid var(--border-hair); border-radius:var(--radius-l); padding:clamp(1.6rem,4vw,3rem);
  background:linear-gradient(160deg, var(--bg-1), var(--bg-0));
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
}
.case-card .case-meta{display:flex; flex-direction:column; gap:.3rem;}
.case-card .case-meta .k{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-2);}
.case-card .case-meta .v{font-size:.98rem;}
.case-placeholder-note{margin-top:1.2rem; font-size:.82rem; color:var(--text-2); font-family:var(--font-mono);}

/* ============ AI FLOW ============ */
.ai-flow-wrap{margin-top:3rem; border:1px solid var(--border-hair); border-radius:var(--radius-l); background:var(--bg-0); padding:clamp(1.6rem,4vw,3rem);}
.ai-flow{display:flex; align-items:center; justify-content:space-between; gap:.4rem; flex-wrap:wrap;}
.ai-node{flex:1 1 120px; text-align:center; padding:1.1rem .6rem; border:1px solid var(--border-hair); border-radius:var(--radius-m); background:var(--bg-1); font-size:.84rem;}
.ai-node .label{font-weight:600;}
.ai-connector{flex:0 0 28px; height:1px; background:var(--border-soft); position:relative; overflow:hidden; margin-top:0;}
.ai-connector::after{content:""; position:absolute; top:0; left:-50%; width:50%; height:100%; background:var(--accent-violet); animation:infraflow 2s linear infinite;}
.ai-tabs{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.4rem;}
.ai-tab{font-family:var(--font-mono); font-size:.76rem; padding:.55rem 1rem; border-radius:999px; border:1px solid var(--border-hair); color:var(--text-1); cursor:pointer; transition:border-color var(--dur-fast), color var(--dur-fast);}
.ai-tab.is-active{border-color:var(--accent-violet); color:var(--text-0); background:rgba(138,92,246,0.1);}

/* ============ PERFORMANCE ============ */
.perf-grid{margin-top:2.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-hair); border:1px solid var(--border-hair); border-radius:var(--radius-m); overflow:hidden;}
.perf-item{background:var(--bg-0); padding:1.8rem; display:flex; flex-direction:column; gap:.6rem; align-items:flex-start;}
.perf-item svg{width:26px;height:26px; color:var(--accent-cyan);}
.perf-item span{font-size:.92rem; color:var(--text-1);}

/* ============ TESTIMONIALS ============ */
.testi-wrap{margin-top:2.5rem; position:relative;}
.testi-track{display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:none;}
.testi-track::-webkit-scrollbar{display:none;}
.testi-card{
  scroll-snap-align:start; flex:0 0 min(480px,88vw); border:1px solid var(--border-hair); border-radius:var(--radius-l);
  padding:2rem; background:var(--bg-1); display:flex; flex-direction:column; gap:1.2rem;
}
.testi-stars{display:flex; gap:.2rem; color:var(--accent-cyan);}
.testi-quote{font-size:1.02rem; color:var(--text-0); line-height:1.6;}
.testi-person{display:flex; flex-direction:column; gap:.1rem; margin-top:auto;}
.testi-person .name{font-weight:700;}
.testi-person .role{color:var(--text-2); font-size:.85rem;}
.testi-placeholder{border:1px dashed var(--border-soft); color:var(--text-2); font-family:var(--font-mono); font-size:.82rem; padding:2rem; border-radius:var(--radius-l); text-align:center;}
.testi-nav{display:flex; gap:.8rem; margin-top:1.4rem;}
.testi-nav button{width:40px;height:40px;border-radius:50%; border:1px solid var(--border-hair); background:transparent; color:var(--text-0); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color var(--dur-fast);}
.testi-nav button:hover{border-color:var(--accent-cyan);}

/* ============ FAQ ============ */
.faq-list{margin-top:2.5rem; border-top:1px solid var(--border-hair);}
.faq-item{border-bottom:1px solid var(--border-hair);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--text-0);
  padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; cursor:pointer;
}
.faq-q .plus{width:22px;height:22px; flex:none; position:relative;}
.faq-q .plus::before,.faq-q .plus::after{content:""; position:absolute; background:var(--text-0); transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);}
.faq-q .plus::before{left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%);}
.faq-q .plus::after{top:0; left:50%; width:1.5px; height:100%; transform:translateX(-50%);}
.faq-item.is-open .faq-q .plus::after{transform:translateX(-50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-out);}
.faq-a-inner{padding-bottom:1.6rem; color:var(--text-1); max-width:640px;}

/* ============ CONTACT ============ */
.contact-band{position:relative; overflow:hidden;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start;}
.contact-info h2{font-size:var(--fs-h1);}
.contact-info p{color:var(--text-1); margin-top:1.2rem; font-size:var(--fs-lead); max-width:420px;}
.contact-info .btn{margin-top:2rem;}
.contact-direct{margin-top:2.6rem; display:flex; flex-direction:column; gap:.5rem;}
.contact-direct a{font-family:var(--font-mono); color:var(--text-0); font-size:1.05rem;}
.contact-direct .k{font-size:.76rem; color:var(--text-2); text-transform:uppercase; letter-spacing:.08em;}

.form{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
.form .full{grid-column:1/-1;}
.field{display:flex; flex-direction:column; gap:.5rem;}
.field label{font-size:.78rem; color:var(--text-2); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em;}
.field input, .field select, .field textarea{
  background:var(--bg-1); border:1px solid var(--border-hair); border-radius:var(--radius-s);
  padding:.85rem 1rem; color:var(--text-0); font-family:var(--font-body); font-size:.95rem;
  transition:border-color var(--dur-fast);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent-cyan);}
.field textarea{resize:vertical; min-height:110px;}
.form-note{grid-column:1/-1; font-size:.8rem; color:var(--text-2); margin-top:.3rem;}
.form-status{grid-column:1/-1; font-size:.88rem; padding:.8rem 1rem; border-radius:var(--radius-s); display:none;}
.form-status.is-visible{display:block;}
.form-status.success{background:rgba(52,210,224,0.1); color:var(--accent-cyan); border:1px solid rgba(52,210,224,0.3);}
.form-status.error{background:rgba(255,90,90,0.08); color:#ff8080; border:1px solid rgba(255,90,90,0.3);}

/* ============ FOOTER ============ */
.site-footer{border-top:1px solid var(--border-hair); padding-top:clamp(3rem,6vw,5rem); background:var(--bg-1);}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem;}
.footer-brand .logo{margin-bottom:.9rem;}
.footer-brand p{color:var(--text-1); font-size:.95rem; max-width:280px;}
.footer-brand .btn{margin-top:1.6rem;}
.footer-col h5{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-2); margin-bottom:1.1rem;}
.footer-col ul{display:flex; flex-direction:column; gap:.65rem;}
.footer-col a{color:var(--text-1); font-size:.9rem; transition:color var(--dur-fast);}
.footer-col a:hover{color:var(--accent-cyan);}
.footer-bottom{
  border-top:1px solid var(--border-hair); padding-block:1.6rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.82rem; color:var(--text-2);
}
.footer-bottom .legal{display:flex; gap:1.5rem;}
.footer-bottom a:hover{color:var(--text-0);}

/* ============ FLOATING WHATSAPP ============ */
.float-wa{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:90;
  width:58px; height:58px; border-radius:50%;
  background:#1fa855; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform var(--dur-fast) var(--ease-out);
}
.float-wa:hover{transform:scale(1.08);}
.float-wa svg{width:28px;height:28px; color:#fff;}
.float-wa::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:#1fa855;
  animation:wapulse 2.4s ease-out infinite;
}
@keyframes wapulse{ 0%{transform:scale(1); opacity:.6;} 100%{transform:scale(1.9); opacity:0;} }
.float-wa .tooltip{
  position:absolute; right:70px; top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--bg-2); border:1px solid var(--border-hair); padding:.5rem .9rem; border-radius:8px;
  font-size:.8rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--dur-fast), transform var(--dur-fast);
}
.float-wa:hover .tooltip{opacity:1; transform:translateY(-50%) translateX(0);}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{width:6px;height:6px; background:var(--accent-cyan);}
.cursor-ring{width:34px;height:34px; border:1px solid var(--border-soft); transition:width var(--dur-fast), height var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);}
.cursor-ring.is-active{width:56px; height:56px; border-color:var(--accent-cyan); background:rgba(52,210,224,0.08);}
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{cursor:none;}

/* ============ REVEAL UTILITIES ============ */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}
[data-reveal="scale"]{transform:scale(.94);}
[data-reveal="scale"].is-visible{transform:scale(1);}
[data-stagger] > *{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
[data-stagger].is-visible > *{opacity:1; transform:translateY(0);}

.section-divider{height:1px; background:linear-gradient(90deg, transparent, var(--border-soft), transparent);}

/* ============ INNER-PAGE HERO (compact) ============ */
.page-hero{padding-top:1.2rem; padding-bottom:clamp(2.5rem,6vw,4rem);}
.page-hero .eyebrow{margin-bottom:1.2rem;}
.page-hero h1{font-size:clamp(2.2rem,5vw,4rem);}
.page-hero .hero-lead{margin-top:1.3rem;}

/* ============ RELATED / CROSS-LINK GRID ============ */
.related-grid{margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-hair); border:1px solid var(--border-hair); border-radius:var(--radius-m); overflow:hidden;}
.related-card{background:var(--bg-0); padding:1.6rem; display:flex; flex-direction:column; gap:.4rem; transition:background var(--dur-fast);}
.related-card:hover{background:var(--bg-1);}
.related-card .k{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-2);}
.related-card .v{font-weight:700; font-size:1.02rem;}
.related-card .arrow{color:var(--accent-cyan); font-size:.85rem; margin-top:.4rem;}

/* ============ SUB-NAV PILLS (services / infra index pages) ============ */
.subnav-pills{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem;}
.subnav-pill{
  font-family:var(--font-mono); font-size:.78rem; padding:.55rem 1.05rem; border-radius:999px;
  border:1px solid var(--border-hair); color:var(--text-1); transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.subnav-pill:hover{border-color:var(--accent-cyan); color:var(--text-0); background:rgba(52,210,224,0.06);}

/* ============ PAGE TRANSITION VEIL ============ */
.page-veil{position:fixed; inset:0; z-index:250; background:var(--bg-0); transform:scaleY(0); transform-origin:top; pointer-events:none;}
.page-veil.is-active{transition:transform .45s var(--ease-in-out);}

/* ============ NOT-A-VENDOR STRIP / SIMPLE CONTENT BLOCKS ============ */
.prose{max-width:680px; color:var(--text-1); font-size:1.02rem; display:flex; flex-direction:column; gap:1.1rem;}
.prose h3{color:var(--text-0); font-size:1.3rem; margin-top:1rem;}
.prose ul{display:flex; flex-direction:column; gap:.5rem; padding-left:0;}
.prose li{position:relative; padding-left:1.2rem;}
.prose li::before{content:"—"; position:absolute; left:0; color:var(--text-2);}

/* skip link */
.skip-link{position:absolute; left:-999px; top:0; background:var(--accent-cyan); color:var(--bg-0); padding:.8rem 1.2rem; z-index:1000; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

:focus-visible{outline:2px solid var(--accent-cyan); outline-offset:3px;}