/* ==========================================================================
   N5 Technologies — Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:            #06070d;
  --bg-soft:       #0a0c17;
  --surface:       #0f1220;
  --surface-2:     #131729;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  --text:          #f3f4f8;
  --text-dim:      #a8adc4;
  --text-faint:    #6b7090;

  --violet:  #7c5cff;
  --blue:    #3b82f6;
  --cyan:    #22d3ee;
  --pink:    #f472b6;

  --grad-primary: linear-gradient(120deg, var(--violet), var(--blue) 55%, var(--cyan));
  --grad-text:    linear-gradient(100deg, #b6a8ff 0%, #8ab4ff 45%, #6be8ff 100%);
  --grad-border:  linear-gradient(120deg, rgba(124,92,255,.6), rgba(34,211,238,.6));

  --shadow-glow: 0 0 0 1px rgba(124,92,255,.15), 0 20px 60px -20px rgba(59,130,246,.45);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --container: 1240px;
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:600;
  line-height:1.15;
  margin:0;
  letter-spacing:-0.01em;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--violet); color:#fff; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

.text-gradient{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.rotator{
  display:inline-block;
  transition:opacity .35s ease, transform .35s ease, filter .35s ease;
}
.rotator.rotator-out{
  opacity:0;
  transform:translateY(-14px);
  filter:blur(4px);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--text-dim);
  background:rgba(124,92,255,.08);
  border:1px solid var(--border);
  padding:7px 16px 7px 8px;
  border-radius:999px;
  letter-spacing:.01em;
}
.eyebrow .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--grad-primary);
  box-shadow:0 0 12px var(--cyan);
}
.eyebrow-badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:6px;
  background:linear-gradient(120deg,var(--violet),var(--cyan));
  color:#04050a;
  letter-spacing:.03em;
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  font-size:15px;
  font-weight:600;
  border-radius:12px;
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn svg{ width:16px; height:16px; transition:transform .25s ease; }
.btn:hover svg{ transform:translateX(3px); }

.btn-primary{
  color:#05060c;
  background:var(--grad-primary);
  box-shadow:0 10px 30px -8px rgba(124,92,255,.65);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -8px rgba(124,92,255,.8); }

.btn-ghost{
  color:var(--text);
  background:rgba(255,255,255,.02);
  border-color:var(--border-strong);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.06); transform:translateY(-2px); }

.btn-sm{ padding:10px 18px; font-size:13.5px; border-radius:10px; }
.btn-block{ width:100%; }

/* ==========================================================================
   Background FX
   ========================================================================== */
.bg-fx{
  position:fixed; inset:0;
  z-index:-2;
  background:
    radial-gradient(1000px 600px at 12% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(1200px 700px at 50% 120%, rgba(59,130,246,.10), transparent 60%),
    var(--bg);
}
.bg-grid{
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, #000 30%, transparent 75%);
}

/* ==========================================================================
   Header
   ========================================================================== */
/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding:calc(var(--nav-h) + 76px) 0 100px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:40px;
  align-items:center;
}
.hero-copy .eyebrow{ margin-bottom:22px; }
.hero-title{
  font-size:clamp(34px, 4.6vw, 60px);
  margin-bottom:22px;
}
.hero-sub{
  font-size:17px;
  color:var(--text-dim);
  max-width:520px;
  margin-bottom:34px;
}
.hero-cta-row{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:44px;
}
.hero-stats{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.hero-stats .stat b{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:26px;
  font-weight:700;
}
.hero-stats .stat span{
  font-size:13px;
  color:var(--text-faint);
}

/* --- Hero visual --- */
.hero-visual{
  position:relative;
  height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(50px);
  opacity:.55;
  z-index:0;
}
.orb-1{ width:280px; height:280px; background:var(--violet); top:0; left:6%; animation:drift1 12s ease-in-out infinite; }
.orb-2{ width:220px; height:220px; background:var(--cyan); bottom:6%; right:2%; animation:drift2 14s ease-in-out infinite; }
.orb-3{ width:180px; height:180px; background:var(--blue); bottom:30%; left:0%; animation:drift1 16s ease-in-out infinite reverse; }

@keyframes drift1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(20px,-24px) scale(1.08); }
}
@keyframes drift2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-18px,20px) scale(1.06); }
}

.orbit-ring{
  position:absolute;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:50%;
  z-index:1;
}
.orbit-ring.r1{ width:420px; height:420px; animation:spin 34s linear infinite; }
.orbit-ring.r2{ width:330px; height:330px; animation:spin 26s linear infinite reverse; }

@keyframes spin{ to{ transform:rotate(360deg); } }

.tech-chip{
  position:absolute;
  display:flex; align-items:center; gap:7px;
  padding:8px 13px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  background:rgba(15,18,32,.85);
  border:1px solid var(--border-strong);
  border-radius:999px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55);
  z-index:5;
  animation:float 6s ease-in-out infinite;
}
.tech-chip i{
  width:8px;height:8px;border-radius:50%;
  background:var(--grad-primary);
  flex:none;
}
.chip-1{ top:2%; left:4%;   animation-delay:.2s; }
.chip-2{ top:14%; right:0%;  animation-delay:1.4s; }
.chip-3{ bottom:20%; left:-4%; animation-delay:.8s; }
.chip-4{ bottom:4%; right:8%; animation-delay:2s; }
.chip-5{ top:44%; left:-8%; animation-delay:1s; }

@keyframes float{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-12px); }
}

/* Code window */
.device-code{
  position:relative;
  z-index:4;
  width:360px;
  border-radius:16px;
  background:linear-gradient(180deg,#12142280,#0c0e18);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
  backdrop-filter:blur(6px);
  animation:float 7s ease-in-out infinite;
  transform:translate(-30px,-10px) rotate(-2deg);
}
.device-code{
  display:flex;
  flex-direction:column;
  height:280px;
}
.device-code .win-bar{
  display:flex; align-items:center; gap:6px;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  flex:none;
}
.win-bar .dot-b{ width:9px;height:9px;border-radius:50%; }
.win-bar .dot-b:nth-child(1){ background:#ff5f57; }
.win-bar .dot-b:nth-child(2){ background:#febc2e; }
.win-bar .dot-b:nth-child(3){ background:#28c840; }
.win-bar span{ margin-left:8px; font-size:11.5px; color:var(--text-faint); }
.device-code pre{
  margin:0; padding:16px 18px 20px;
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:12.5px;
  line-height:1.85;
  color:#c9cee0;
  white-space:pre-wrap;
  flex:1;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:none;
}
.device-code pre::-webkit-scrollbar{ display:none; }
.code-kw{ color:#c792ea; }
.code-fn{ color:#82aaff; }
.code-str{ color:#c3e88d; }
.code-cm{ color:#5c6183; }
.code-cursor{
  display:inline-block; width:7px; height:14px;
  background:var(--cyan); vertical-align:middle; margin-left:2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* Phone mockup */
.device-phone{
  position:absolute;
  z-index:6;
  right:-6px; bottom:-24px;
  width:172px;
  height:340px;
  padding:10px;
  border-radius:32px;
  background:linear-gradient(160deg,#171a2c,#0b0d18);
  border:1px solid var(--border-strong);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03);
  animation:float 8s ease-in-out infinite;
  animation-delay:.5s;
  transform:rotate(4deg);
}
.device-phone::before{
  content:'';
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:46px; height:5px; border-radius:4px;
  background:rgba(255,255,255,.15);
}
.phone-screen{
  width:100%; height:100%;
  border-radius:22px;
  background:
    linear-gradient(160deg, rgba(124,92,255,.35), rgba(34,211,238,.18) 60%, transparent),
    #0c0f1c;
  padding:16px 12px;
  display:flex; flex-direction:column; gap:9px;
  overflow:hidden;
}
.phone-screen .ph-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.phone-screen .ph-avatar{ width:22px;height:22px;border-radius:50%; background:var(--grad-primary); }
.phone-screen .ph-dots{ display:flex; gap:3px; }
.phone-screen .ph-dots i{ width:4px;height:4px;border-radius:50%; background:rgba(255,255,255,.3); }
.ph-card{
  height:38px; border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.ph-card.tall{ height:66px; }
.ph-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateX(-100%);
  animation:shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%); } }
.ph-bar{
  margin-top:auto;
  display:flex; justify-content:space-around;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.ph-bar i{ width:16px;height:16px;border-radius:5px; background:rgba(255,255,255,.14); }
.ph-bar i.on{ background:var(--grad-primary); }

.float-card{
  position:absolute;
  z-index:7;
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  border-radius:14px;
  background:rgba(15,18,32,.9);
  border:1px solid var(--border-strong);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
  animation:float 6.5s ease-in-out infinite;
}
.float-card .ic{
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-primary);
  flex:none;
}
.float-card .ic svg{ width:16px;height:16px;color:#04050a; }
.float-card b{ font-size:13.5px; display:block; }
.float-card span{ font-size:11px; color:var(--text-faint); }

.card-deploy{ left:-4%; top:40%; animation-delay:1.6s; }
.card-rating{ left:8%; bottom:2%; animation-delay:.4s; }

.conn-svg{ position:absolute; inset:0; z-index:2; overflow:visible; }
.conn-svg path{
  fill:none; stroke:url(#connGrad); stroke-width:1.4;
  stroke-dasharray:5 7;
  animation:dash 3s linear infinite;
  opacity:.55;
}
@keyframes dash{ to{ stroke-dashoffset:-120; } }

@media (max-width: 1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ height:480px; margin-top:20px; }
  .hero-copy{ text-align:center; }
  .hero-copy .eyebrow, .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-cta-row, .hero-stats{ justify-content:center; }
}
@media (max-width: 520px){
  .device-code{ width:290px; }
  .device-phone{ width:140px; height:280px; right:0; }
}

/* ==========================================================================
   Section shell
   ========================================================================== */
section{ position:relative; padding:110px 0; }
.section-head{
  max-width:640px;
  margin:0 auto 60px;
  text-align:center;
}
.section-head .eyebrow{ margin-bottom:18px; }
.section-head h2{ font-size:clamp(28px,3.4vw,42px); margin-bottom:16px; }
.section-head p{ color:var(--text-dim); font-size:16px; }

/* ---- Stacked reveal heading (e.g. Services) ---- */
.services-head{ max-width:760px; }
.stack-heading{
  font-size:clamp(32px, 5.4vw, 58px);
  line-height:1.16;
  margin-bottom:20px;
}
.stack-line{ display:block; }
.stack-line + .stack-line{ margin-top:4px; }
.accent{
  color:var(--cyan);
  font-weight:700;
}

.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Marquee ---------- */
.marquee-wrap{
  padding:36px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  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);
}
.marquee-label{
  text-align:center; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:26px;
}
.marquee-track{
  display:flex; gap:64px; width:max-content;
  animation:marquee 28s linear infinite;
}
.marquee-track span{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:19px;
  color:var(--text-faint);
  white-space:nowrap;
  display:flex; align-items:center; gap:10px;
}
.marquee-track span i{ width:6px;height:6px;border-radius:50%; background:var(--text-faint); opacity:.5; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Services ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.service-card{
  position:relative;
  padding:30px 26px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border:1px solid var(--border);
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-strong);
  background:linear-gradient(180deg, rgba(124,92,255,.08), rgba(255,255,255,0));
}
.service-icon{
  width:48px; height:48px;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.25);
  margin-bottom:22px;
}
.service-icon svg{ width:23px; height:23px; color:var(--cyan); }
.service-card h3{ font-size:19px; margin-bottom:10px; }
.service-card p{ color:var(--text-dim); font-size:14.5px; margin-bottom:18px; }
.service-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.service-tags span{
  font-size:11.5px; font-weight:600; padding:4px 10px;
  border-radius:999px; background:rgba(255,255,255,.05);
  color:var(--text-faint); border:1px solid var(--border);
}

/* ---------- Services showcase (tabbed, auto-advancing) ---------- */
.showcase{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:28px;
  align-items:start;
}

.showcase-tabs{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:680px;
  overflow-y:auto;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(124,92,255,.45) transparent;
}
.showcase-tabs::-webkit-scrollbar{ width:4px; }
.showcase-tabs::-webkit-scrollbar-thumb{ background:rgba(124,92,255,.45); border-radius:99px; }
.stab{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  width:100%;
  text-align:left;
  padding:16px 16px 18px;
  border-radius:16px;
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  transition:background .3s ease, border-color .3s ease;
}
.stab:hover{ background:rgba(255,255,255,.03); }
.stab.active{
  background:linear-gradient(180deg, rgba(124,92,255,.08), rgba(255,255,255,.02));
  border-color:var(--border);
}
.stab-num{
  flex:none;
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12.5px;
  background:var(--surface); border:1px solid var(--border-strong);
  color:var(--text-faint);
  transition:background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.stab.active .stab-num{
  background:var(--grad-primary); color:#05060c; border-color:transparent;
  box-shadow:0 0 0 5px rgba(124,92,255,.14);
}
.stab-body{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.stab-title{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15.5px;
  color:var(--text-faint);
  transition:color .3s ease;
}
.stab.active .stab-title{ color:var(--text); }
.stab-desc{
  font-size:13px; line-height:1.55; color:var(--text-faint);
  opacity:.55;
  transition:opacity .3s ease;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
  min-height:calc(13px * 1.55 * 2);
}
.stab.active .stab-desc{ opacity:1; }
.stab .service-tags{
  max-height:0; opacity:0; margin-top:0;
  overflow:hidden;
  transition:max-height .35s ease, opacity .25s ease, margin-top .35s ease;
}
.stab.active .service-tags{ max-height:32px; opacity:1; margin-top:1px; }
.stab-progress{
  position:absolute; left:16px; right:16px; bottom:0;
  height:2px; border-radius:2px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.stab.active .stab-progress{ background:rgba(255,255,255,.1); }
.stab-progress i{
  display:block; height:100%; width:0%;
  background:var(--grad-primary);
  border-radius:2px;
}
.stab-progress i.run{ animation:fillBar var(--dur, 5000ms) linear forwards; }
.stab-progress i.paused{ animation-play-state:paused; }
@keyframes fillBar{ from{ width:0%; } to{ width:100%; } }

/* ---- Stage ---- */
.showcase-stage{
  position:relative;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  overflow:hidden;
  min-height:680px;
  position:sticky;
  top:104px;
}
.showcase-stage .stage-glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(320px 220px at 75% 15%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(300px 220px at 15% 85%, rgba(34,211,238,.14), transparent 60%);
  filter:blur(10px);
  z-index:0;
}
.showcase-stage .orbit-ring{ opacity:.5; }
.showcase-stage .orbit-ring.r1{ top:50%; left:50%; margin:-210px 0 0 -210px; }
.showcase-stage .orbit-ring.r2{ top:50%; left:50%; margin:-165px 0 0 -165px; }

.stage-panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  padding:30px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(.98);
  transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
  pointer-events:none;
  z-index:1;
}
.stage-panel.active{
  opacity:1; transform:translateY(0) scale(1);
  visibility:visible;
  transition-delay:0s;
  pointer-events:auto;
  z-index:2;
}
.showcase-detail-link{
  position:absolute; right:24px; bottom:22px; z-index:8;
  display:flex; align-items:center; gap:9px;
  padding:10px 14px; border:1px solid var(--border-strong); border-radius:10px;
  background:rgba(15,18,32,.88); color:var(--text-dim);
  backdrop-filter:blur(10px); font-size:11.5px; font-weight:700;
  transition:color .2s, border-color .2s, transform .2s;
}
.showcase-detail-link:hover{ color:var(--cyan); border-color:rgba(34,211,238,.4); transform:translateY(-2px); }
.showcase-detail-link span{ font-size:16px; }

/* generic stagger reveal, replayed whenever an ancestor gains .active */
.stagger > *, .stagger-item{
  opacity:0; transform:translateY(12px);
  transition:opacity .45s ease, transform .45s ease;
}
.stage-panel.active .stagger > *,
.stage-panel.active .stagger-item{ opacity:1; transform:translateY(0); }
.stage-panel.active .stagger > *:nth-child(1),
.stage-panel.active > .stagger-item:nth-child(1){ transition-delay:.05s; }
.stage-panel.active .stagger > *:nth-child(2),
.stage-panel.active > .stagger-item:nth-child(2){ transition-delay:.14s; }
.stage-panel.active .stagger > *:nth-child(3),
.stage-panel.active > .stagger-item:nth-child(3){ transition-delay:.22s; }
.stage-panel.active .stagger > *:nth-child(4){ transition-delay:.30s; }
.stage-panel.active .stagger > *:nth-child(5){ transition-delay:.38s; }
.stage-panel.active .stagger > *:nth-child(6){ transition-delay:.46s; }

.mockup{ position:relative; z-index:3; width:100%; max-width:420px; }

/* --- Browser mock (Web) --- */
.browser-mock{
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#12142280,#0c0e18);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
}
.browser-bar{ gap:10px; }
.url-pill{
  flex:1; display:flex; align-items:center; gap:6px;
  margin-left:6px; padding:5px 12px;
  border-radius:999px; background:rgba(255,255,255,.05);
  font-size:11px; color:var(--text-faint);
}
.url-pill .lock{ width:8px; height:8px; border-radius:2px; background:var(--text-faint); opacity:.6; }
.browser-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:12px; }
.skel-line{ height:9px; border-radius:5px; background:rgba(255,255,255,.14); }
.skel-line.w30{ width:30%; }
.skel-line.w60{ width:60%; }
.skel-line.big{ height:16px; }
.skel-row{ display:flex; gap:10px; margin:4px 0 6px; }
.skel-btn{ width:84px; height:28px; border-radius:8px; background:var(--grad-primary); }
.skel-btn.ghost{ background:rgba(255,255,255,.06); border:1px solid var(--border-strong); }
.skel-cards{ display:flex; gap:10px; }
.skel-card{
  flex:1; height:54px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.skel-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateX(-100%);
  animation:shimmer 2.6s ease-in-out infinite;
}
.stage-badge{
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:14px;
  background:rgba(15,18,32,.9);
  border:1px solid var(--border-strong);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
}
.stage-badge svg{ width:18px; height:18px; color:var(--cyan); flex:none; }
.stage-badge b{ font-size:13.5px; display:block; }
.stage-badge span{ font-size:11px; color:var(--text-faint); }

/* --- Phone mock (Mobile) reused, positioned within stage --- */
.device-phone.big{
  position:relative; inset:auto; right:auto; bottom:auto;
  width:190px; height:376px;
  transform:none;
  animation:float 8s ease-in-out infinite;
  z-index:3;
}
.badge-store{ position:relative; }

/* --- Design canvas (UI/UX) --- */
.design-mock{
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#12142280,#0c0e18);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
  padding:18px;
}
.design-toolbar{ display:flex; gap:10px; margin-bottom:16px; }
.d-tool{
  width:28px; height:28px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
}
.d-tool.active{ background:var(--grad-primary); border-color:transparent; }
.design-canvas{
  position:relative; height:200px; border-radius:12px;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:16px 16px;
  border:1px solid var(--border);
  overflow:hidden;
}
.d-shape{ position:absolute; }
.d-sq{
  width:90px; height:64px; top:24px; left:28px; border-radius:10px;
  background:linear-gradient(135deg, rgba(124,92,255,.5), rgba(59,130,246,.3));
  border:1px solid rgba(255,255,255,.18);
}
.d-circle{
  width:56px; height:56px; border-radius:50%; top:40px; right:40px;
  background:linear-gradient(135deg, rgba(34,211,238,.5), rgba(59,130,246,.25));
  border:1px solid rgba(255,255,255,.18);
}
.d-line{
  width:120px; height:3px; border-radius:2px; bottom:34px; left:34px;
  background:rgba(255,255,255,.25);
}
.d-line::after{
  content:''; position:absolute; left:0; top:-3px; width:9px; height:9px; border-radius:50%;
  background:var(--cyan);
}
.d-cursor{
  position:absolute; width:14px; height:14px;
  background:var(--grad-primary);
  clip-path:polygon(0 0, 0 80%, 30% 60%, 55% 100%, 70% 90%, 45% 55%, 100% 45%);
  animation:cursorMove 6s ease-in-out infinite;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
@keyframes cursorMove{
  0%,100%{ transform:translate(30px,30px); }
  25%{ transform:translate(150px,50px); }
  50%{ transform:translate(200px,140px); }
  75%{ transform:translate(70px,120px); }
}
.design-swatches{ display:flex; gap:10px; margin-top:16px; }
.design-swatches i{ width:24px; height:24px; border-radius:7px; border:1px solid rgba(255,255,255,.18); }
.sw-1{ background:#7c5cff; } .sw-2{ background:#3b82f6; } .sw-3{ background:#22d3ee; } .sw-4{ background:#f472b6; }

/* --- Pipeline (Cloud & DevOps) --- */
.pipeline-mock{
  border-radius:16px; padding:34px 26px;
  background:linear-gradient(180deg,#12142280,#0c0e18);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
}
.pipe-row{ display:flex; align-items:center; justify-content:center; }
.pipe-node{
  padding:12px 18px; border-radius:12px;
  font-size:13px; font-weight:600;
  background:rgba(255,255,255,.05); border:1px solid var(--border-strong);
  color:var(--text-dim);
  white-space:nowrap;
}
.pipe-node.done{ color:var(--text); border-color:rgba(34,211,238,.4); }
.pipe-node.active{
  background:var(--grad-primary); color:#05060c; border-color:transparent;
  box-shadow:0 0 0 5px rgba(124,92,255,.14);
}
.pipe-line{
  position:relative; flex:1; min-width:36px; height:2px;
  background:rgba(255,255,255,.12);
  margin:0 4px;
}
.pipe-line i{
  position:absolute; top:50%; left:0; width:7px; height:7px; margin-top:-3.5px;
  border-radius:50%; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:pipeDot 2.2s linear infinite;
}
@keyframes pipeDot{ 0%{ left:0%; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }
.pipe-status{
  margin-top:26px; display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:13px; color:var(--text-dim);
}

/* --- Terminal (API & Backend) --- */
.terminal-mock{
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#12142280,#0c0e18);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
}
.term-live{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-size:10.5px; color:var(--text-faint); white-space:nowrap;
}
.term-body{
  margin:0; padding:16px 20px 18px;
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.9; color:#c9cee0;
  display:flex; flex-direction:column;
  height:210px; overflow-y:auto; scrollbar-width:none;
}
.term-body::-webkit-scrollbar{ display:none; }
.term-line{ white-space:pre; animation:lineIn .35s ease; flex:none; }
@keyframes lineIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* --- Dashboard (Maintenance & Support) --- */
.dash-mock{
  width:100%; max-width:420px;
  border-radius:16px; padding:26px 26px 22px;
  background:linear-gradient(180deg,#12142280,#0c0e18);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
}
.dash-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dash-top b{ font-size:14.5px; }
.dash-live{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-faint); }
.pulse-dot{
  width:8px; height:8px; border-radius:50%; background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.6);
  animation:pulse 1.8s ease-out infinite;
  display:inline-block;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); }
  70%{ box-shadow:0 0 0 9px rgba(52,211,153,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); }
}
.dash-chart{ width:100%; height:80px; display:block; margin-bottom:18px; }
.dash-stats{ display:flex; justify-content:space-between; gap:12px; }
.dash-stats div{ text-align:center; flex:1; }
.dash-stats b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:19px; }
.dash-stats span{ font-size:11.5px; color:var(--text-faint); }

/* --- Website redevelopment --- */
.rebuild-mock{
  padding:18px; border-radius:18px;
  background:linear-gradient(180deg,#121422cc,#0c0e18);
  border:1px solid var(--border-strong); box-shadow:var(--shadow-glow);
}
.rebuild-labels,.rebuild-gains{ display:flex; align-items:center; justify-content:space-between; }
.rebuild-labels{ margin-bottom:11px; color:var(--text-faint); font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
.rebuild-window{ position:relative; height:250px; overflow:hidden; border:1px solid var(--border); border-radius:13px; background:#090b13; }
.rebuild-old,.rebuild-new{ position:absolute; inset:0; padding:30px; }
.rebuild-old{ opacity:.55; background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.025) 24px); }
.rebuild-old i{ display:block; width:72%; height:11px; margin-bottom:13px; border-radius:3px; background:rgba(255,255,255,.12); }
.rebuild-old i:nth-child(2){ width:46%; }.rebuild-old i:nth-child(3){ width:88%; }
.rebuild-old div{ height:90px; margin-top:25px; border:1px dashed rgba(255,255,255,.16); }
.rebuild-new{ display:flex; flex-direction:column; align-items:flex-start; background:radial-gradient(circle at 75% 20%,rgba(34,211,238,.17),transparent 34%),#0d1020; clip-path:inset(0 0 0 50%); animation:rebuildReveal 4.4s ease-in-out infinite; }
.rebuild-new strong{ margin-top:20px; max-width:250px; font-family:'Space Grotesk',sans-serif; font-size:27px; line-height:1.1; }
.rebuild-new > span{ width:68%; height:8px; margin:15px 0; border-radius:5px; background:rgba(255,255,255,.14); }
.rebuild-new button{ padding:8px 15px; border:0; border-radius:8px; color:#05060c; background:var(--grad-primary); font:600 11px inherit; }
.rebuild-new div{ display:flex; gap:8px; width:100%; margin-top:auto; }.rebuild-new div i{ flex:1; height:52px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid var(--border); }
.rebuild-sweep{ position:absolute; inset:0 auto 0 50%; width:2px; background:var(--cyan); box-shadow:0 0 18px var(--cyan); animation:rebuildSweep 4.4s ease-in-out infinite; }
.rebuild-sweep i{ position:absolute; top:50%; left:50%; width:28px; height:28px; border-radius:50%; border:2px solid var(--cyan); background:#0c0e18; transform:translate(-50%,-50%); }
.rebuild-sweep i::before,.rebuild-sweep i::after{ content:''; position:absolute; top:8px; width:7px; height:7px; border-top:1px solid var(--cyan); border-left:1px solid var(--cyan); }.rebuild-sweep i::before{ left:5px; transform:rotate(-45deg); }.rebuild-sweep i::after{ right:5px; transform:rotate(135deg); }
.rebuild-gains{ gap:12px; margin-top:14px; font-size:11.5px; color:var(--text-faint); }.rebuild-gains b{ color:var(--cyan); font-size:14px; }
@keyframes rebuildReveal{ 0%,12%,100%{ clip-path:inset(0 0 0 78%); } 48%,66%{ clip-path:inset(0 0 0 18%); } }
@keyframes rebuildSweep{ 0%,12%,100%{ left:78%; } 48%,66%{ left:18%; } }

/* --- ERP & CRM software --- */
.erp-mock{
  padding:20px; overflow:hidden; border-radius:18px;
  background:linear-gradient(180deg,#131629,#0b0d17);
  border:1px solid var(--border-strong); box-shadow:var(--shadow-glow);
}
.erp-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--border); }
.erp-top > div{ display:flex; flex-direction:column; gap:3px; }.erp-top > div span{ color:var(--text-faint); font-size:10px; text-transform:uppercase; letter-spacing:.09em; }.erp-top > div b{ font-size:14px; }
.erp-live{ display:flex; align-items:center; gap:6px; color:#83e9bd; font-size:10px; }.erp-live i{ width:7px; height:7px; border-radius:50%; background:#34d399; animation:pulse 1.8s ease-out infinite; }
.erp-board{ position:relative; height:230px; margin:12px -4px 8px; }
.erp-links{ position:absolute; inset:0; width:100%; height:100%; }.erp-links path{ fill:none; stroke:rgba(34,211,238,.45); stroke-width:1.5; stroke-dasharray:5 6; animation:erpFlow 1.5s linear infinite; }
.erp-module{ position:absolute; display:flex; align-items:center; gap:8px; width:130px; padding:10px; border-radius:11px; background:rgba(255,255,255,.045); border:1px solid var(--border); box-shadow:0 12px 25px -20px #000; animation:erpModule 4s ease-in-out infinite; }
.erp-module > i{ display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:8px; color:var(--cyan); background:rgba(34,211,238,.09); font:700 13px 'Space Grotesk',sans-serif; font-style:normal; }.erp-module span{ display:flex; flex-direction:column; min-width:0; }.erp-module b{ font-size:11px; }.erp-module small{ color:var(--text-faint); font-size:8.5px; white-space:nowrap; }
.erp-sales{ left:0; top:22px; }.erp-customers{ right:0; top:22px; animation-delay:-1s; }.erp-stock{ left:0; bottom:16px; animation-delay:-2s; }.erp-finance{ right:0; bottom:16px; animation-delay:-3s; }
.erp-core{ position:absolute; left:50%; top:50%; display:grid; place-items:center; width:96px; height:96px; border-radius:25px; transform:translate(-50%,-50%); text-align:center; background:linear-gradient(145deg,rgba(124,92,255,.32),rgba(34,211,238,.15)); border:1px solid rgba(124,92,255,.55); box-shadow:0 0 35px rgba(124,92,255,.2); }.erp-core span{ position:absolute; top:14px; color:var(--cyan); font:700 9px 'Space Grotesk',sans-serif; }.erp-core b{ font:600 13px/1.1 'Space Grotesk',sans-serif; }.erp-core i{ position:absolute; inset:-7px; border:1px solid rgba(34,211,238,.3); border-radius:30px; animation:erpCorePulse 2.4s ease-out infinite; }
.erp-data-dot{ position:absolute; z-index:3; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }.dot-a{ animation:erpDotA 2.8s ease-in-out infinite; }.dot-b{ animation:erpDotB 2.8s .7s ease-in-out infinite; }.dot-c{ animation:erpDotC 2.8s 1.4s ease-in-out infinite; }.dot-d{ animation:erpDotD 2.8s 2.1s ease-in-out infinite; }
.erp-activity{ display:flex; gap:7px; overflow:hidden; }.erp-activity span{ flex:1; padding:8px 7px; border-radius:8px; background:rgba(52,211,153,.06); color:var(--text-faint); font-size:8.5px; white-space:nowrap; animation:erpActivity 4s ease-in-out infinite; }.erp-activity span:nth-child(2){ animation-delay:-1.3s; }.erp-activity span:nth-child(3){ animation-delay:-2.6s; }.erp-activity i{ color:#34d399; font-style:normal; }
@keyframes erpFlow{ to{ stroke-dashoffset:-22; } }
@keyframes erpModule{ 0%,100%{ border-color:var(--border); transform:translateY(0); } 50%{ border-color:rgba(34,211,238,.35); transform:translateY(-3px); } }
@keyframes erpCorePulse{ 0%{ opacity:.8; transform:scale(.88); } 80%,100%{ opacity:0; transform:scale(1.18); } }
@keyframes erpDotA{ 0%,12%{ left:28%; top:25%; opacity:0; } 25%{ opacity:1; } 75%{ opacity:1; } 88%,100%{ left:49%; top:49%; opacity:0; } }
@keyframes erpDotB{ 0%,12%{ left:71%; top:25%; opacity:0; } 25%{ opacity:1; } 75%{ opacity:1; } 88%,100%{ left:50%; top:49%; opacity:0; } }
@keyframes erpDotC{ 0%,12%{ left:28%; top:76%; opacity:0; } 25%{ opacity:1; } 75%{ opacity:1; } 88%,100%{ left:49%; top:51%; opacity:0; } }
@keyframes erpDotD{ 0%,12%{ left:71%; top:76%; opacity:0; } 25%{ opacity:1; } 75%{ opacity:1; } 88%,100%{ left:50%; top:51%; opacity:0; } }
@keyframes erpActivity{ 0%,100%{ opacity:.35; } 45%,70%{ opacity:1; color:#bcefd8; } }

/* --- Advertisement --- */
.ad-scene{ position:relative; width:100%; max-width:430px; min-height:390px; display:flex; align-items:center; justify-content:center; }
.ad-card{ overflow:hidden; border-radius:17px; background:#0d101d; border:1px solid var(--border-strong); box-shadow:var(--shadow-glow); }
.ad-kicker{ display:block; padding:10px 16px; color:var(--text-faint); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.ad-art{ position:relative; height:150px; padding:30px; overflow:hidden; background:linear-gradient(135deg,rgba(124,92,255,.8),rgba(34,211,238,.48)); }
.ad-art strong{ position:relative; z-index:2; font:700 25px/1.12 'Space Grotesk',sans-serif; }.ad-art i{ position:absolute; width:180px; height:180px; right:-45px; top:-70px; border:35px solid rgba(255,255,255,.13); border-radius:50%; animation:adOrbit 5s linear infinite; }
.ad-copy{ display:flex; flex-direction:column; gap:5px; padding:16px 18px 9px; }.ad-copy b{ font-size:14px; }.ad-copy span{ font-size:11.5px; color:var(--text-faint); }
.ad-button{ margin:6px 18px 18px; padding:9px 12px; border-radius:8px; background:rgba(124,92,255,.16); color:#cfc7ff; font-size:11px; font-weight:700; }.ad-button span{ float:right; }
.ad-target{ position:absolute; left:-45px; top:5px; width:130px; height:130px; z-index:4; }.ad-target i{ position:absolute; inset:0; border:1px solid rgba(34,211,238,.5); border-radius:50%; animation:targetPulse 3s ease-out infinite; }.ad-target i:nth-child(2){ inset:21px; animation-delay:.3s; }.ad-target i:nth-child(3){ inset:42px; animation-delay:.6s; }.ad-target b{ position:absolute; inset:0; display:grid; place-items:center; color:var(--cyan); font-size:22px; }
.ad-result{ position:absolute; right:-18px; bottom:10px; z-index:5; animation:resultFloat 3.4s ease-in-out infinite; }.ad-result b{ color:#69e6f4; font-size:19px; }
@keyframes adOrbit{ to{ transform:rotate(360deg); } } @keyframes targetPulse{ 0%,100%{ transform:scale(.82); opacity:.28; } 50%{ transform:scale(1); opacity:.85; } } @keyframes resultFloat{ 50%{ transform:translateY(-10px); } }

/* --- Social media marketing --- */
.social-scene{ position:relative; width:100%; max-width:420px; display:grid; place-items:center; min-height:430px; }
.social-phone{ width:270px; padding:14px; border-radius:24px; background:#0d101d; border:1px solid var(--border-strong); box-shadow:var(--shadow-glow); }
.social-profile{ display:flex; align-items:center; gap:9px; }.social-profile > i{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--grad-primary); color:#070812; font:700 10px 'Space Grotesk',sans-serif; }.social-profile span{ display:flex; flex-direction:column; font-size:11px; }.social-profile small{ color:var(--text-faint); font-size:9px; }.social-profile em{ margin-left:auto; color:var(--text-faint); font-style:normal; }
.social-visual{ position:relative; display:flex; align-items:flex-end; height:210px; margin:12px -5px; padding:22px; overflow:hidden; border-radius:14px; background:linear-gradient(145deg,#6e4ff1,#197eaa); }.social-visual span{ position:relative; z-index:2; font:700 22px/1.1 'Space Grotesk',sans-serif; }.social-visual i{ position:absolute; width:170px; height:170px; right:-40px; top:-25px; border-radius:45% 55% 60% 40%; background:rgba(255,255,255,.12); animation:socialBlob 6s ease-in-out infinite; }
.social-actions{ display:flex; justify-content:space-between; padding:2px 2px 9px; font-size:10.5px; color:var(--text-dim); }.social-actions b{ color:#ff7aa9; }.social-caption{ padding:8px 2px 3px; border-top:1px solid var(--border); color:var(--text-faint); font-size:10.5px; line-height:1.45; }.social-caption b{ color:var(--text); }
.social-bubble{ position:absolute; z-index:5; padding:9px 12px; border:1px solid var(--border-strong); border-radius:999px; background:rgba(15,18,32,.94); box-shadow:0 12px 25px -12px #000; color:var(--text-dim); font-size:11px; animation:socialPop 4.2s ease-in-out infinite; }.social-bubble b{ color:#ff7aa9; }.sb-one{ left:0; top:90px; }.sb-two{ right:-4px; top:180px; animation-delay:-1.4s; }.sb-three{ left:8px; bottom:65px; animation-delay:-2.8s; }
@keyframes socialBlob{ 50%{ transform:rotate(35deg) scale(1.12); border-radius:60% 40% 35% 65%; } } @keyframes socialPop{ 0%,100%{ opacity:.35; transform:translateY(8px) scale(.94); } 35%,70%{ opacity:1; transform:translateY(0) scale(1); } }

/* --- Public relations --- */
.pr-mock{ position:relative; overflow:hidden; padding:23px; border-radius:16px; background:#eeece6; color:#171717; box-shadow:var(--shadow-glow); transform:rotate(-1deg); }
.pr-masthead{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:3px double #222; }.pr-masthead span{ font:700 20px Georgia,serif; }.pr-masthead i{ font:700 9px inherit; letter-spacing:.12em; }
.pr-story{ width:75%; padding:22px 4px 24px; }.pr-label{ color:#6048cf; font-size:9px; font-weight:800; letter-spacing:.13em; }.pr-story h3{ margin:8px 0 10px; color:#171717; font:700 28px/1.05 Georgia,serif; }.pr-story p{ color:#555; font:12px/1.5 Georgia,serif; }
.pr-outlets{ display:flex; gap:8px; padding-top:13px; border-top:1px solid #aaa; }.pr-outlets span{ flex:1; text-align:center; color:#777; font-size:8px; font-weight:800; letter-spacing:.08em; animation:pressGlow 3.6s ease-in-out infinite; }.pr-outlets span:nth-child(2){ animation-delay:-.9s; }.pr-outlets span:nth-child(3){ animation-delay:-1.8s; }.pr-outlets span:nth-child(4){ animation-delay:-2.7s; }
.pr-signal{ position:absolute; right:19px; top:95px; width:100px; height:100px; }.pr-signal i{ position:absolute; inset:30px; border:2px solid #6048cf; border-radius:50%; animation:prSignal 2.8s ease-out infinite; }.pr-signal i:nth-child(2){ animation-delay:.7s; }.pr-signal i:nth-child(3){ animation-delay:1.4s; }.pr-signal b{ position:absolute; inset:0; display:grid; place-items:center; color:#6048cf; font:800 14px 'Space Grotesk',sans-serif; }
@keyframes prSignal{ 0%{ transform:scale(.35); opacity:.9; } 100%{ transform:scale(2.1); opacity:0; } } @keyframes pressGlow{ 50%{ color:#6048cf; transform:translateY(-2px); } }

/* --- Performance marketing --- */
.growth-mock{ padding:22px; border:1px solid var(--border-strong); border-radius:17px; background:linear-gradient(180deg,#121422,#0b0d17); box-shadow:var(--shadow-glow); }
.growth-top{ display:flex; justify-content:space-between; align-items:center; }.growth-top div{ display:flex; flex-direction:column; }.growth-top span,.growth-number span,.growth-stats span{ color:var(--text-faint); font-size:10.5px; }.growth-top b{ font-size:14px; }.growth-top > i{ display:flex; align-items:center; gap:6px; color:#78e7b3; font-size:10px; font-style:normal; }.growth-top > i span{ width:6px; height:6px; border-radius:50%; background:#34d399; animation:pulse 1.8s ease-out infinite; }
.growth-number{ display:grid; grid-template-columns:1fr auto; align-items:end; margin-top:25px; }.growth-number span{ grid-column:1/-1; }.growth-number b{ font:700 37px 'Space Grotesk',sans-serif; }.growth-number i{ margin-bottom:7px; color:#78e7b3; font-size:11px; font-style:normal; }
.growth-chart{ position:relative; display:flex; align-items:end; gap:10px; height:160px; margin:9px 0 20px; padding:15px 10px 0; border-bottom:1px solid var(--border); background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.04) 39px); }.growth-chart > span{ flex:1; height:var(--bar); border-radius:5px 5px 0 0; background:linear-gradient(180deg,rgba(34,211,238,.65),rgba(124,92,255,.18)); transform-origin:bottom; animation:barGrow 2.8s ease-in-out infinite alternate; }.growth-chart > span:nth-child(2n){ animation-delay:-.8s; }.growth-chart > span:nth-child(3n){ animation-delay:-1.6s; }.growth-chart svg{ position:absolute; inset:10px 0 0; width:100%; height:120px; overflow:visible; }.growth-chart path{ fill:none; stroke:#e9fbff; stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:430; animation:growthLine 3.2s ease-in-out infinite; filter:drop-shadow(0 0 5px rgba(34,211,238,.8)); }
.growth-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.growth-stats div{ display:flex; flex-direction:column; gap:5px; padding:10px; border-radius:9px; background:rgba(255,255,255,.035); }.growth-stats b{ font-size:13px; }
@keyframes barGrow{ from{ transform:scaleY(.68); opacity:.55; } to{ transform:scaleY(1); opacity:1; } } @keyframes growthLine{ 0%{ stroke-dashoffset:430; } 55%,100%{ stroke-dashoffset:0; } }

@media (max-width: 1080px){
  .showcase{ grid-template-columns:1fr; }
  .showcase-stage{ min-height:640px; order:-1; position:relative; top:auto; }
  .showcase-tabs{ max-height:none; overflow:visible; padding-right:0; }
}
@media (max-width: 560px){
  .stab{ padding:14px 14px 18px; gap:12px; }
  .stab-num{ width:32px; height:32px; font-size:12px; }
  .showcase-stage{ min-height:540px; }
  .device-phone.big{ width:150px; height:296px; }
  .stage-panel{ padding:20px; }
  .ad-target{ left:-10px; }.ad-result{ right:-4px; }
  .social-phone{ width:235px; }.social-bubble{ font-size:9.5px; }.sb-two{ right:0; }
  .pr-story h3{ font-size:23px; }.pr-signal{ right:5px; }
  .growth-stats b{ font-size:11px; }
  .erp-mock{ padding:15px; }.erp-board{ transform:scale(.86); margin:-2px -30px -4px; }.erp-activity span{ text-align:center; font-size:0; }.erp-activity span i{ font-size:11px; }
}

@media (prefers-reduced-motion: reduce){
  .rebuild-new{ clip-path:inset(0 0 0 45%); }
  .rebuild-new,.rebuild-sweep,.ad-art i,.ad-target i,.ad-result,.social-visual i,
  .social-bubble,.pr-signal i,.pr-outlets span,.growth-chart > span,.growth-chart path,
  .erp-live i,.erp-links path,.erp-module,.erp-core i,.erp-data-dot,.erp-activity span{ animation:none; }
  .rebuild-sweep{ left:45%; }.social-bubble{ opacity:1; transform:none; }.growth-chart path{ stroke-dashoffset:0; }
  .erp-data-dot{ display:none; }
}

/* ---------- Process (hub & spoke) ---------- */
.process-hub{
  position:relative;
  display:grid;
  grid-template-columns:1fr 220px 1fr;
  align-items:stretch;
  gap:0 56px;
  max-width:1080px;
  margin:0 auto;
  min-height:480px;
}
.process-connectors{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
.process-connectors path{
  fill:none;
  stroke-width:1.5;
  opacity:.65;
  stroke-dasharray:5 6;
  animation:connDash 1.4s linear infinite;
}
@keyframes connDash{ to{ stroke-dashoffset:-22; } }
@media (prefers-reduced-motion: reduce){
  .process-connectors path{ animation:none; }
}

.process-col{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
}

.process-card{
  padding:22px 24px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--border);
  transition:transform .3s ease, border-color .3s ease;
}
.process-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.process-icon{
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.3);
  margin-bottom:14px;
}
.process-icon svg{ width:20px; height:20px; color:var(--cyan); }
.process-card h4{ font-size:16px; margin-bottom:6px; }
.process-tag{
  display:inline-block;
  font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--text-faint);
  margin-bottom:10px;
}
.process-card p{ font-size:13px; line-height:1.55; color:var(--text-faint); }

/* hub */
.process-hub-center{
  position:relative;
  z-index:2;
  width:220px; height:220px;
  flex:none;
  align-self:center;
  display:flex; align-items:center; justify-content:center;
}
.hub-glow{
  position:absolute; inset:-30%;
  background:radial-gradient(circle, rgba(124,92,255,.35), rgba(34,211,238,.12) 55%, transparent 75%);
  filter:blur(16px);
  animation:drift1 10s ease-in-out infinite;
}
.process-hub-center .orbit-ring{ opacity:.6; }
.process-hub-center .orbit-ring.r1{ width:200px; height:200px; top:50%; left:50%; margin:-100px 0 0 -100px; }
.process-hub-center .orbit-ring.r2{ width:152px; height:152px; top:50%; left:50%; margin:-76px 0 0 -76px; }
.hub-core{
  position:relative; z-index:2;
  width:92px; height:92px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-primary);
  box-shadow:0 0 44px -6px rgba(124,92,255,.75), 0 0 0 8px rgba(124,92,255,.08);
  animation:hubPulse 3.4s ease-in-out infinite;
}
.hub-core img{ width:40px; height:auto; }
@keyframes hubPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

@media (max-width: 900px){
  .process-hub{
    display:flex; flex-direction:column; align-items:center;
    gap:16px; min-height:0;
  }
  .process-connectors{ display:none; }
  .process-hub-center{ order:-1; margin-bottom:8px; }
  .process-col{ width:100%; gap:16px; }
}

/* ---------- Industries We Serve (single-window sticky card stack) ---------- */
#work{ padding-bottom:0; }
.industry-stack{
  position:relative;
  width:100%;
}
.industry-slide-wrap{ position:relative; }
.industry-slide{
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:32px;
  border:1px solid var(--border-strong);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02) inset;
  padding:0 64px;
  transform:scale(calc(1 - var(--stack-progress, 0) * .025));
  filter:brightness(calc(1 - var(--stack-progress, 0) * .18));
  transform-origin:50% 12%;
  will-change:transform, filter;
}
.industry-slide-inner{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
}

.industry-copy{ max-width:460px; }
.industry-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,92,255,.14);
  border:1px solid rgba(124,92,255,.3);
  margin-bottom:22px;
}
.industry-icon svg{ width:24px; height:24px; color:var(--cyan); }
.industry-num{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:12.5px; font-weight:700; letter-spacing:.08em;
  color:var(--text-faint);
  margin-bottom:10px;
}
.industry-copy h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(28px,3vw,38px);
  font-weight:600;
  margin-bottom:16px;
}
.industry-copy > p{
  font-size:15.5px; line-height:1.65; color:var(--text-dim);
  margin-bottom:26px;
}
.industry-check{ display:flex; flex-direction:column; gap:14px; }
.industry-check li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:14.5px; color:var(--text-dim);
}
.industry-check .ico-check{ margin-top:2px; }

.industry-visual{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.industry-visual .mockup{ width:100%; max-width:380px; }
.industry-visual .device-phone.big{ transform:scale(.88); }

/* Animated industry scenes */
.scene-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--border);
  font-size:11px; color:var(--text-faint);
}
.scene-topbar > div{ display:flex; align-items:center; gap:7px; color:var(--text); }
.scene-topbar .pulse-dot{ width:7px; height:7px; }
.scene-topbar strong{ font-size:12.5px; }

.newsroom-mock,.care-mock,.kitchen-mock{
  max-width:430px !important;
  padding:20px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(18,20,34,.96),rgba(9,11,20,.96));
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
}
.newsroom-mock{ overflow:hidden; }
.newsroom-mock:hover *,
.newsroom-mock:focus-within *{ animation-play-state:paused !important; }
.news-lead{ display:grid; grid-template-columns:124px 1fr; gap:16px; align-items:center; }
.news-thumb{
  position:relative; height:94px; overflow:hidden; border-radius:12px;
  background:
    linear-gradient(135deg,rgba(124,92,255,.75),rgba(244,114,182,.28)),
    linear-gradient(35deg,transparent 45%,rgba(255,255,255,.14) 46% 54%,transparent 55%);
}
.news-thumb::after{
  content:''; position:absolute; inset:-50%;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.2) 50%,transparent 62%);
  animation:newsShine 3.4s ease-in-out infinite;
}
.news-thumb span{
  position:absolute; z-index:1; left:9px; bottom:9px;
  padding:4px 7px; border-radius:5px; background:#ef476f;
  color:#fff; font-size:8px; font-weight:800; letter-spacing:.08em;
}
.news-lines{ display:flex; flex-direction:column; gap:8px; }
.news-lines i{
  display:block; height:9px; border-radius:5px;
  background:linear-gradient(90deg,rgba(255,255,255,.17),rgba(255,255,255,.06),rgba(255,255,255,.17));
  background-size:220% 100%; animation:newsSkeleton 2.2s linear infinite;
}
.news-lines i:nth-child(2){ width:86%; animation-delay:-.45s; }
.news-lines i:nth-child(3){ width:62%; animation-delay:-.9s; }
.news-lines small{ color:var(--cyan); font-size:9.5px; margin-top:3px; }
.news-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.news-metrics > div{
  display:grid; grid-template-columns:1fr auto; gap:5px;
  padding:11px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid var(--border);
}
.news-metrics span{ font-size:9.5px; color:var(--text-faint); }
.news-metrics strong{ font-size:11px; color:#56e39f; }
.news-metrics i{ grid-column:1/-1; height:3px; overflow:hidden; border-radius:4px; background:rgba(255,255,255,.08); }
.news-metrics b{ display:block; width:78%; height:100%; border-radius:inherit; background:var(--grad-primary); animation:metricGrow 3s ease-in-out infinite alternate; }
.news-metrics > div:nth-child(2) b{ width:64%; animation-delay:-1.2s; }
.news-ticker{ overflow:hidden; margin:0 -20px -20px; padding:9px 0; border-top:1px solid var(--border); color:var(--text-faint); font-size:9px; white-space:nowrap; }
.news-ticker div{ width:max-content; animation:newsTicker 13s linear infinite; }
.news-ticker span{ color:#56e39f; font-weight:700; }
@keyframes newsShine{ 0%,30%{ transform:translateX(-70%); } 75%,100%{ transform:translateX(70%); } }
@keyframes newsSkeleton{ to{ background-position:-220% 0; } }
@keyframes metricGrow{ from{ transform:scaleX(.45); } to{ transform:scaleX(1); } }
@keyframes newsTicker{ to{ transform:translateX(-50%); } }

.patient-row{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.patient-avatar{
  width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px;
  background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#05060c; font-size:11px; font-weight:800;
}
.patient-row > div:nth-child(2){ display:flex; flex-direction:column; flex:1; }
.patient-row strong{ font-size:12.5px; }
.patient-row span{ font-size:9px; color:var(--text-faint); }
.patient-row > b{ padding:4px 8px; border-radius:99px; background:rgba(52,211,153,.1); color:#56e39f; font-size:9px; }
.vitals-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.vitals-grid div{ padding:10px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid var(--border); }
.vitals-grid span,.vitals-grid small{ display:block; color:var(--text-faint); font-size:8.5px; font-weight:500; }
.vitals-grid strong{ display:flex; align-items:baseline; gap:3px; margin-top:4px; font-size:18px; }
.ecg-chart{ position:relative; height:82px; margin:12px 0 8px; overflow:hidden; border-radius:10px; background:rgba(34,211,238,.025); }
.ecg-chart svg{ display:block; width:100%; height:100%; }
.ecg-gridline{ fill:none; stroke:rgba(255,255,255,.045); stroke-width:1; }
.ecg-line{ fill:none; stroke:#34d399; stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:1; animation:ecgDraw 2.4s linear infinite; filter:drop-shadow(0 0 4px rgba(52,211,153,.7)); }
.ecg-scan{ position:absolute; top:0; bottom:0; width:40px; background:linear-gradient(90deg,transparent,rgba(52,211,153,.13),transparent); animation:ecgScan 2.4s linear infinite; }
.care-sync{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; font-size:9px; color:var(--text-faint); }
.care-sync i{ height:4px; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.08); }
.care-sync b{ display:block; height:100%; background:var(--grad-primary); animation:syncFill 3s ease-in-out infinite; }
.care-sync strong{ color:var(--cyan); font-size:9px; }
.care-alert{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:12px; padding:8px; border-radius:9px; background:rgba(52,211,153,.07); color:#9ce8c1; font-size:9.5px; animation:careAlert 3s ease-in-out infinite; }
.care-alert i{ display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#34d399; color:#07120c; font-style:normal; font-weight:800; }
@keyframes ecgDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:-1; } }
@keyframes ecgScan{ from{ left:-40px; } to{ left:100%; } }
@keyframes syncFill{ 0%{ width:0; } 55%,100%{ width:100%; } }
@keyframes careAlert{ 0%,100%{ opacity:.62; } 50%{ opacity:1; } }

.kitchen-mock{ position:relative; overflow:visible; }
.kitchen-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px; }
.kitchen-stats div{ padding:9px 7px; text-align:center; border-radius:9px; background:rgba(255,255,255,.035); border:1px solid var(--border); }
.kitchen-stats strong{ display:block; font-size:13px; color:var(--cyan); }
.kitchen-stats span{ display:block; margin-top:2px; font-size:7.5px; color:var(--text-faint); }
.ticket-lane{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.order-ticket{
  min-width:0; padding:10px 9px; border-radius:10px; background:#111524; border:1px solid var(--border-strong);
  box-shadow:0 10px 25px -18px #000; animation:ticketFloat 4s ease-in-out infinite;
}
.order-ticket:nth-child(2){ animation-delay:-1.3s; }
.order-ticket:nth-child(3){ animation-delay:-2.6s; }
.order-ticket header,.order-ticket footer{ display:flex; justify-content:space-between; gap:4px; align-items:center; }
.order-ticket header{ padding-bottom:7px; margin-bottom:7px; border-bottom:1px dashed var(--border-strong); }
.order-ticket header strong{ font-size:10px; }
.order-ticket header span{ padding:2px 4px; border-radius:4px; background:rgba(124,92,255,.16); color:#b6a8ff; font-size:6.5px; }
.ticket-two header span{ background:rgba(245,158,11,.13); color:#fbbf24; }
.ticket-three header span{ background:rgba(52,211,153,.13); color:#56e39f; }
.order-ticket p{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:4px 0; font-size:7.5px; color:var(--text-dim); }
.order-ticket footer{ padding-top:7px; margin-top:8px; border-top:1px dashed var(--border-strong); font-size:6.5px; color:var(--text-faint); }
.order-ticket footer b{ color:var(--text-dim); }
.order-toast{
  position:absolute; right:-16px; bottom:-28px; display:flex; align-items:center; gap:9px;
  min-width:188px; padding:10px 12px; border-radius:12px; background:rgba(15,18,32,.95);
  border:1px solid rgba(34,211,238,.3); box-shadow:0 14px 35px -12px #000;
  animation:orderToast 5s ease-in-out infinite;
}
.order-toast > i{ display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:var(--grad-primary); color:#05060c; font-style:normal; font-weight:800; }
.order-toast span{ display:flex; flex-direction:column; color:var(--text-faint); font-size:7.5px; }
.order-toast strong{ color:var(--text); font-size:9.5px; }
@keyframes ticketFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes orderToast{ 0%,15%{ opacity:0; transform:translateY(12px) scale(.96); } 25%,75%{ opacity:1; transform:none; } 88%,100%{ opacity:0; transform:translateY(-8px); } }

/* New industry workflow scenes */
.industry-tech-mock{
  position:relative; max-width:430px !important; min-height:330px; padding:20px; overflow:hidden;
  border-radius:18px; background:linear-gradient(180deg,rgba(18,20,34,.97),rgba(9,11,20,.97));
  border:1px solid var(--border-strong); box-shadow:var(--shadow-glow);
}
.industry-toast{
  position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:9px;
  min-width:180px; padding:10px 12px; border:1px solid rgba(34,211,238,.28); border-radius:12px;
  background:rgba(15,18,32,.95); box-shadow:0 14px 35px -12px #000; animation:industryToast 4.8s ease-in-out infinite;
}
.industry-toast > i{ display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:var(--grad-primary); color:#05060c; font-style:normal; font-weight:800; }
.industry-toast span{ display:flex; flex-direction:column; color:var(--text-faint); font-size:7.5px; }.industry-toast b{ color:var(--text); font-size:9.5px; }
@keyframes industryToast{ 0%,12%,100%{ opacity:0; transform:translateY(12px) scale(.96); } 24%,78%{ opacity:1; transform:none; } }

/* Real estate */
.property-map{
  position:relative; height:225px; overflow:hidden; border-radius:13px;
  background:linear-gradient(35deg,rgba(34,211,238,.035),rgba(124,92,255,.08));
  border:1px solid var(--border);
}
.map-road{ position:absolute; width:140%; height:20px; left:-20%; top:45%; border-block:1px dashed rgba(255,255,255,.1); background:rgba(255,255,255,.025); transform:rotate(-22deg); }
.map-road.road-b{ top:48%; transform:rotate(31deg); }
.map-pin{ position:absolute; width:14px; height:14px; border:3px solid var(--cyan); border-radius:50% 50% 50% 0; transform:rotate(-45deg); animation:mapPin 3s ease-in-out infinite; }
.pin-a{ left:18%; top:24%; }.pin-b{ right:22%; top:18%; animation-delay:-1s; }.pin-c{ left:45%; bottom:18%; animation-delay:-2s; }
.property-card{ position:absolute; left:50%; top:50%; width:190px; padding:14px; border-radius:12px; transform:translate(-50%,-50%); background:rgba(13,16,29,.94); border:1px solid rgba(124,92,255,.4); box-shadow:0 18px 40px -18px #000; animation:propertyCard 5s ease-in-out infinite; }
.property-card span{ display:block; color:var(--cyan); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }.property-card b{ display:block; margin:5px 0 2px; font-size:12px; }.property-card small{ color:var(--text-faint); font-size:8.5px; }
@keyframes mapPin{ 50%{ filter:drop-shadow(0 0 9px var(--cyan)); transform:rotate(-45deg) translate(4px,-4px) scale(1.2); } } @keyframes propertyCard{ 50%{ transform:translate(-50%,-54%); border-color:rgba(34,211,238,.5); } }

/* Banking and finance */
.finance-balance{ padding:14px 15px; border-radius:12px; background:linear-gradient(120deg,rgba(59,130,246,.18),rgba(34,211,238,.07)); border:1px solid var(--border); }
.finance-balance span{ display:block; color:var(--text-faint); font-size:9px; }.finance-balance b{ display:block; margin:2px 0; font:700 25px 'Space Grotesk',sans-serif; }.finance-balance i{ color:#56e39f; font-size:8px; font-style:normal; }
.finance-flow{ position:relative; display:grid; gap:8px; margin-top:12px; }.finance-flow > span{ display:grid; grid-template-columns:34px 1fr auto; align-items:center; padding:9px; border-radius:9px; background:rgba(255,255,255,.035); border:1px solid var(--border); }.finance-flow span i{ color:var(--cyan); font-size:7px; font-style:normal; }.finance-flow span b{ font-size:9px; }.finance-flow span small{ color:#82e9bc; font-size:8px; }
.finance-flow > em{ position:absolute; inset:-30% 0; width:40px; background:linear-gradient(90deg,transparent,rgba(34,211,238,.09),transparent); transform:skewX(-16deg); animation:financeSweep 3.6s ease-in-out infinite; }
.security-scan{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px; border-radius:9px; background:rgba(52,211,153,.055); color:var(--text-faint); font-size:8px; }.security-scan i{ width:8px; height:8px; border-radius:50%; background:#34d399; animation:pulse 1.8s ease-out infinite; }.security-scan b{ margin-left:auto; color:#56e39f; }
@keyframes financeSweep{ 0%,20%{ left:-25%; } 75%,100%{ left:110%; } }

/* Travel and tourism */
.travel-route{ position:relative; height:105px; margin:8px 4px 14px; }.travel-route > i{ position:absolute; top:40px; width:13px; height:13px; border:3px solid var(--cyan); border-radius:50%; }.travel-start{ left:8px; }.travel-end{ right:8px; }.route-line{ position:absolute; left:22px; right:22px; top:46px; border-top:2px dashed rgba(34,211,238,.38); }.travel-plane{ position:absolute; top:27px; left:18px; color:#e9fbff; font-size:21px; filter:drop-shadow(0 0 7px var(--cyan)); animation:planeTrip 4.8s ease-in-out infinite; }.travel-route div{ position:absolute; left:3px; right:3px; bottom:4px; display:flex; justify-content:space-between; color:var(--text-faint); font-size:9px; }
.trip-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.trip-cards div{ display:flex; gap:6px; padding:9px 7px; border-radius:9px; background:rgba(255,255,255,.035); border:1px solid var(--border); animation:tripCard 4s ease-in-out infinite; }.trip-cards div:nth-child(2){ animation-delay:-1.3s; }.trip-cards div:nth-child(3){ animation-delay:-2.6s; }.trip-cards i{ color:var(--cyan); font-size:7px; font-style:normal; }.trip-cards span{ display:flex; flex-direction:column; }.trip-cards b{ font-size:8.5px; }.trip-cards small{ color:var(--text-faint); font-size:6.7px; white-space:nowrap; }
@keyframes planeTrip{ 0%,10%{ left:18px; transform:rotate(5deg); } 48%,58%{ left:calc(100% - 43px); transform:rotate(5deg); } 60%{ transform:rotate(185deg); } 90%,100%{ left:18px; transform:rotate(185deg); } } @keyframes tripCard{ 50%{ border-color:rgba(34,211,238,.32); transform:translateY(-3px); } }

/* Quick commerce */
.delivery-track{ position:relative; height:105px; padding-top:35px; }.delivery-track > span{ display:block; height:4px; margin:0 13px; border-radius:4px; background:linear-gradient(90deg,var(--violet),var(--cyan)); }.delivery-rider{ position:absolute; left:12px; top:25px; display:grid; place-items:center; width:24px; height:24px; border:2px solid var(--cyan); border-radius:50%; color:#e9fbff; font-size:7px; font-style:normal; background:#111524; animation:riderMove 5s ease-in-out infinite; }.delivery-track div{ display:flex; justify-content:space-between; margin-top:13px; }.delivery-track b{ color:var(--text-faint); font-size:7px; font-weight:600; }
.quick-items{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.quick-items span{ display:flex; flex-direction:column; align-items:center; padding:10px 5px; border-radius:9px; background:rgba(255,255,255,.035); color:var(--text-faint); font-size:7px; }.quick-items i{ color:var(--cyan); font:700 14px 'Space Grotesk',sans-serif; font-style:normal; }.quick-toast{ bottom:12px; }
@keyframes riderMove{ 0%,12%{ left:12px; } 48%,62%{ left:calc(100% - 36px); } 100%{ left:12px; } }

/* Government tendering */
.tender-title{ display:grid; grid-template-columns:1fr auto; padding:12px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid var(--border); }.tender-title span{ grid-column:1/-1; color:var(--text-faint); font-size:8px; }.tender-title b{ font-size:11px; }.tender-title i{ color:var(--cyan); font-size:8px; font-style:normal; }.tender-progress{ height:5px; margin:10px 0 14px; overflow:hidden; border-radius:5px; background:rgba(255,255,255,.07); }.tender-progress b{ display:block; height:100%; width:78%; border-radius:inherit; background:var(--grad-primary); transform-origin:left; animation:tenderFill 3.2s ease-in-out infinite; }
.tender-list{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }.tender-list span{ padding:8px; border-radius:8px; background:rgba(255,255,255,.025); color:var(--text-dim); font-size:7.5px; }.tender-list i{ margin-right:5px; color:#56e39f; font-style:normal; }.tender-list i.pending{ color:#fbbf24; animation:tenderPending 1.5s ease-in-out infinite; }
.deadline-pulse{ display:flex; gap:9px; align-items:center; margin-top:12px; padding:9px; border:1px solid rgba(245,158,11,.18); border-radius:9px; background:rgba(245,158,11,.05); }.deadline-pulse > i{ width:9px; height:9px; border-radius:50%; background:#fbbf24; animation:pulse 1.8s ease-out infinite; }.deadline-pulse span{ display:flex; flex-direction:column; color:var(--text-faint); font-size:7px; }.deadline-pulse b{ color:var(--text); font-size:8.5px; }
@keyframes tenderFill{ 0%{ transform:scaleX(.3); } 55%,100%{ transform:scaleX(1); } } @keyframes tenderPending{ 50%{ opacity:.3; } }

/* Legal solutions */
.legal-mock::after{ content:''; position:absolute; top:60px; bottom:20px; left:50%; width:1px; background:linear-gradient(transparent,rgba(124,92,255,.5),transparent); animation:legalScan 4s ease-in-out infinite; }
.legal-head{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:end; padding:12px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.035); }.legal-head div{ display:flex; flex-direction:column; color:var(--text-faint); font-size:8px; }.legal-head b{ color:var(--text); font-size:11px; }.legal-head > i{ padding:4px 7px; border-radius:99px; background:rgba(124,92,255,.12); color:#b8aaff; font-size:7px; font-style:normal; }
.legal-timeline{ position:relative; display:grid; gap:10px; margin:16px 0; padding-left:25px; }.legal-timeline::before{ content:''; position:absolute; left:9px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--violet),var(--cyan)); }.legal-timeline span{ position:relative; display:flex; justify-content:space-between; padding:9px 10px; border-radius:8px; background:rgba(255,255,255,.03); color:var(--text-dim); font-size:8px; animation:legalStep 4.5s ease-in-out infinite; }.legal-timeline span:nth-child(2){ animation-delay:-1.5s; }.legal-timeline span:nth-child(3){ animation-delay:-3s; }.legal-timeline i{ position:absolute; left:-21px; top:10px; width:10px; height:10px; border:2px solid var(--cyan); border-radius:50%; background:#0d101d; font-style:normal; }.legal-timeline b{ color:#56e39f; font-size:7px; }
.legal-timeline .active{ background:rgba(124,92,255,.09); }.legal-timeline .active i{ box-shadow:0 0 9px var(--cyan); }
.document-sign{ position:relative; z-index:1; display:flex; align-items:center; gap:8px; padding:9px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.03); }.document-sign span{ display:flex; align-items:center; gap:6px; color:var(--text-dim); font-size:7.5px; }.document-sign span i{ color:var(--cyan); font-style:normal; }.document-sign em{ flex:1; border-top:1px dashed var(--border-strong); }.document-sign strong{ color:#b8aaff; font-size:7.5px; animation:signReady 2.5s ease-in-out infinite; }
@keyframes legalScan{ 0%,15%{ left:10%; opacity:0; } 30%,70%{ opacity:1; } 85%,100%{ left:90%; opacity:0; } } @keyframes legalStep{ 50%{ transform:translateX(4px); background:rgba(124,92,255,.08); } }
@keyframes signReady{ 50%{ color:var(--cyan); } }

@media (min-width: 781px){
  .industry-stack{
    max-width:var(--container);
    margin:0 auto;
    padding:0 28px 160px;
    display:flex;
    flex-direction:column;
    gap:32px;
  }
  .industry-slide-wrap,
  .industry-slide-wrap > .container{
    display:contents;
  }
  .industry-slide{
    position:sticky;
    top:104px;
    width:100%;
    height:calc(100vh - 136px);
    min-height:500px;
    max-height:620px;
  }
}

@media (max-width: 780px){
  .industry-stack{
    display:block; width:100%; padding-bottom:40px;
    overflow:visible;
  }
  .industry-slide-wrap{ display:block; width:100%; max-width:none; }
  .industry-slide-wrap + .industry-slide-wrap{ margin-top:24px; }
  .industry-slide-wrap > .container{ display:block; width:100%; }
  .industry-slide{
    position:relative;
    top:auto;
    width:100%; height:auto; min-height:0;
    padding:42px 30px; border-radius:24px;
    transform:none;
    filter:none;
  }
  .industry-slide-inner{ display:flex; flex-direction:column; gap:32px; width:100%; max-width:100%; min-width:0; overflow:hidden; text-align:center; }
  .industry-copy{ width:100%; max-width:100%; min-width:0; margin:0 auto; overflow-wrap:anywhere; }
  .industry-icon{ margin:0 auto 18px; }
  .industry-copy h3{ font-size:29px; }
  .industry-copy > p{ margin-bottom:21px; font-size:14px; }
  .industry-check{ gap:11px; text-align:left; }
  .industry-check li{ font-size:12.5px; }
  .industry-visual{ order:-1; width:100%; min-width:0; min-height:0; margin-bottom:2px; }
  .industry-visual .mockup{ width:100%; max-width:100%; min-width:0; }
  .industry-visual .device-phone.big{ width:160px; height:316px; transform:none; }
  .newsroom-mock,.care-mock,.kitchen-mock,.industry-tech-mock{ width:100%; max-width:430px; text-align:left; }
  .newsroom-mock{ min-width:0; max-width:100% !important; contain:layout paint; }
  .newsroom-mock *{ min-width:0; }
  .newsroom-mock .scene-topbar{ align-items:flex-start; }
  .newsroom-mock .scene-topbar > span{ max-width:42%; overflow-wrap:anywhere; text-align:right; }
  .news-lead{ width:100%; grid-template-columns:minmax(76px,105px) minmax(0,1fr); }
  .news-lines{ width:100%; min-width:0; overflow:hidden; }
  .news-lines i{ max-width:100%; }
  .news-metrics{ width:100%; min-width:0; }
  .news-metrics > div{ min-width:0; }
  .news-ticker{ width:auto; max-width:calc(100% + 40px); overflow:hidden; }
  .travel-mock{ min-width:0; }
  .order-toast{ right:-6px; }
}

@media (max-width: 420px){
  .industry-slide-wrap > .container{ padding-inline:14px; }
  .industry-slide{ padding:28px 18px; }
  .news-lead{ grid-template-columns:1fr; gap:12px; }
  .news-thumb{ width:100%; height:96px; }
  .newsroom-mock,.care-mock,.kitchen-mock,.industry-tech-mock{ padding:15px; }
  .news-ticker{ margin:0 -15px -15px; }
  .trip-cards{ grid-template-columns:1fr; gap:5px; }
  .trip-cards div{ padding:6px 7px; }
  .trip-cards small{ white-space:normal; }
  .order-toast{ position:relative; right:auto; bottom:auto; margin:10px 0 -4px auto; }
}

@media (max-width: 520px){
  .news-metrics{ grid-template-columns:1fr; gap:7px; }
}

@media (max-width: 350px){
  .industry-slide{ padding-inline:15px; }
  .news-metrics{ grid-template-columns:1fr; gap:7px; }
  .newsroom-mock .scene-topbar > span{ font-size:8.5px; }
}

@media (prefers-reduced-motion: reduce){
  .news-thumb::after,.news-lines i,.news-metrics b,.news-ticker div,
  .ecg-line,.ecg-scan,.care-sync b,.care-alert,.order-ticket,.order-toast,
  .industry-toast,.map-pin,.property-card,.finance-flow > em,.security-scan i,.travel-plane,
  .trip-cards div,.delivery-rider,.tender-progress b,.tender-list i.pending,
  .deadline-pulse > i,.legal-mock::after,.legal-timeline span{ animation:none; }
  .document-sign strong{ animation:none; }
  .care-sync b{ width:100%; }
  .order-toast{ opacity:1; transform:none; }
}

/* ---------- Stats band ---------- */
.stats-band{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(124,92,255,.10), rgba(34,211,238,.06));
  padding:52px 40px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
}
.stats-band .stat b{
  display:block; font-family:'Space Grotesk',sans-serif;
  font-size:clamp(30px,3.4vw,44px); font-weight:700;
}
.stats-band .stat span{ font-size:13.5px; color:var(--text-dim); }

/* ---------- Why us ---------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:64px;
}
.why-card{ padding:6px; }
.why-card .service-icon{ margin-bottom:18px; }
.why-card h4{ font-size:16px; margin-bottom:8px; }
.why-card p{ font-size:14px; color:var(--text-faint); }

/* ---------- Testimonials ---------- */
.testi-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.testi-card{
  padding:30px 26px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
}
.testi-stars{ color:var(--cyan); font-size:14px; margin-bottom:16px; letter-spacing:2px; }
.testi-card p{ font-size:14.5px; color:var(--text-dim); margin-bottom:22px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:#05060c;
}
.testi-person b{ display:block; font-size:14px; }
.testi-person span{ font-size:12.5px; color:var(--text-faint); }

/* ---------- Maintenance plan / price comparison ---------- */
.price-compare{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:0 28px;
  max-width:980px;
  margin:0 auto;
}
.compare-col{ display:flex; }
.compare-card{
  position:relative;
  width:100%;
  padding:34px 30px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
}
.compare-label{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600; font-size:17px;
  margin-bottom:22px;
}

/* left card: itemized cost list */
.cost-list{ display:flex; flex-direction:column; margin-bottom:18px; }
.cost-list li{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 0;
  border-bottom:1px solid var(--border);
  font-size:13.5px;
}
.cost-list li:first-child{ padding-top:0; }
.cost-list li span{ color:var(--text-dim); }
.cost-list li b{ color:var(--text-faint); font-weight:600; white-space:nowrap; }
.cost-list li b i{ font-style:normal; font-weight:500; color:var(--text-faint); opacity:.8; }
.cost-total{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:16px 0 20px;
  margin-bottom:20px;
  border-bottom:1px dashed var(--border-strong);
}
.cost-total span{ font-size:13px; color:var(--text-faint); }
.cost-total b{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; color:var(--text);
}
.cost-total b i{ font-style:normal; font-size:14px; color:var(--text-faint); font-weight:500; }
.cost-note{ font-size:12.5px; line-height:1.6; color:var(--text-faint); font-style:italic; margin-bottom:24px; }
.cost-cons{ display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.cost-cons li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-faint); }
.ico-x{
  flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3);
  position:relative;
}
.ico-x::before, .ico-x::after{
  content:''; position:absolute; top:50%; left:50%; width:8px; height:1.6px;
  background:#f87171; border-radius:1px;
}
.ico-x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.ico-x::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* VS divider */
.compare-vs{
  display:flex; align-items:center; justify-content:center;
}
.compare-vs span{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px;
  background:var(--grad-primary); color:#05060c;
  box-shadow:0 0 0 6px var(--bg), 0 0 30px -6px rgba(124,92,255,.7);
}

/* right card: featured plan */
.compare-card.featured{
  background:linear-gradient(var(--surface), var(--surface)) padding-box,
             var(--grad-border) border-box;
  border:1px solid transparent;
  box-shadow:var(--shadow-glow);
}
.popular-badge{
  position:absolute; top:-13px; right:28px;
  padding:6px 14px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  background:var(--grad-primary); color:#05060c;
}
.price-toggle{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  margin-bottom:22px; align-self:flex-start;
}
.toggle-opt{
  display:flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--text-faint);
  background:transparent; border:none;
  transition:background .25s ease, color .25s ease;
}
.toggle-opt.active{ background:var(--grad-primary); color:#05060c; }
.save-chip{
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px;
  background:rgba(255,255,255,.15); color:inherit;
}
.toggle-opt:not(.active) .save-chip{ background:rgba(52,211,153,.15); color:#34d399; }
.price-display{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.price-display b{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:44px; color:var(--text);
}
.price-display b i{ font-style:normal; font-size:16px; color:var(--text-faint); font-weight:500; }
.price-sub{ font-size:12.5px; color:var(--text-faint); }
.plan-checklist{ display:flex; flex-direction:column; gap:13px; margin-bottom:28px; }
.plan-checklist li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-dim); }
.ico-check{
  flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:var(--grad-primary);
  position:relative;
}
.ico-check::after{
  content:''; position:absolute; top:48%; left:50%;
  width:8px; height:4.5px; border-left:1.6px solid #05060c; border-bottom:1.6px solid #05060c;
  transform:translate(-50%,-60%) rotate(-45deg);
}
.compare-card.featured .btn{ margin-top:auto; }
.plan-note{ text-align:center; font-size:12px; color:var(--text-faint); margin-top:12px; }

@media (max-width: 860px){
  .price-compare{ grid-template-columns:1fr; gap:20px; max-width:480px; }
  .compare-vs{ margin:-4px 0; }
  .popular-badge{ right:50%; transform:translateX(50%); }
}

/* ---------- CTA banner ---------- */
.cta-banner{
  border-radius:28px;
  padding:70px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
  border:1px solid var(--border-strong);
  background:radial-gradient(600px 300px at 50% 0%, rgba(124,92,255,.25), transparent), var(--surface);
}
.cta-banner h2{ font-size:clamp(26px,3.6vw,40px); margin-bottom:16px; }
.cta-banner p{ color:var(--text-dim); max-width:520px; margin:0 auto 30px; }
.cta-banner .hero-cta-row{ justify-content:center; margin:0; }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:40px;
  align-items:start;
}
.contact-info-card{
  padding:34px 30px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
}
.contact-info-card h3{ font-size:20px; margin-bottom:14px; }
.contact-info-card p{ color:var(--text-dim); font-size:14.5px; margin-bottom:26px; }
.contact-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.contact-row .ic{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(124,92,255,.12); border:1px solid rgba(124,92,255,.25);
  flex:none;
}
.contact-row .ic svg{ width:17px;height:17px; color:var(--cyan); }
.contact-row b{ display:block; font-size:14px; }
.contact-row span{ font-size:13px; color:var(--text-faint); }
.social-row{ display:flex; gap:10px; margin-top:28px; }
.social-row a{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.social-row a:hover{ border-color:var(--border-strong); background:rgba(255,255,255,.07); transform:translateY(-2px); }
.social-row svg{ width:16px; height:16px; }

.contact-form{
  padding:34px 30px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%;
  padding:13px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  color:var(--text);
  font-family:inherit; font-size:14px;
  transition:border-color .2s ease, background .2s ease;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--violet); background:rgba(124,92,255,.06);
}
.form-note{ font-size:12.5px; color:var(--text-faint); margin-top:12px; text-align:center; }

/* ---------- Footer ---------- */
footer{
  padding:64px 0 30px;
  border-top:1px solid var(--border);
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:36px;
  padding-bottom:48px;
}
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ color:var(--text-faint); font-size:14px; max-width:280px; margin-bottom:20px; }
.footer-col h5{
  font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-faint); margin-bottom:18px; font-weight:700;
}
.footer-col a{
  display:block; font-size:14.5px; color:var(--text-dim);
  margin-bottom:12px; transition:color .2s ease;
}
.footer-col a:hover{ color:var(--text); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:26px; border-top:1px solid var(--border);
  font-size:13px; color:var(--text-faint); flex-wrap:wrap; gap:14px;
}
.footer-bottom .social-row{ margin-top:0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .testi-grid{ grid-template-columns:1fr; }
  .stats-band{ grid-template-columns:repeat(2,1fr); }
  .process-row{ grid-template-columns:repeat(3,1fr); row-gap:36px; }
  .process-row::before{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  section{ padding:80px 0; }
  .services-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .stats-band{ grid-template-columns:1fr 1fr; padding:36px 22px; }
  .process-row{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* Back to top */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:150;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,18,32,.85); border:1px solid var(--border-strong);
  backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top svg{ width:16px; height:16px; }