*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --blue:#0a47e0;--navy:#0a1535;--teal:#00b894;--green:#00a651;
  --red:#e8273a;--amber:#f59e0b;--light:#f5f7ff;--border:#e2e8f4;
  --muted:#6b7a99;
  
  /* ─── FONT CHANGES HERE (Ek hi baar me sab badalne ke liye) ─── */
  --body-font: "Inter", sans-serif;         /* Pure Body & UI ke liye */
  --heading-font: "Space Grotesk", sans-serif; /* Sabhi Headings ke liye */
  
  /* Agar aap baki tech elements ka font change karna chahein toh (Optional) */
  --orb: "Space Grotesk", sans-serif;       /* Orbitron ki jagah Space Grotesk kiya */
  --lato: "Inter", sans-serif;              /* Lato ki jagah Inter kiya */
  --mono: "Share Tech Mono", monospace;
  --nav-height: 76px;
}

html{scroll-behavior:smooth}

/* ─── APPLICATION ON BODY & UI ─── */
body{
    background:#fff;
    color:var(--navy);
    font-family: var(--body-font); /* Ab poori body par "Inter" lag gaya */
    font-size: 1rem;
    line-height: 1.7;
    overflow-x:hidden;
}

/* ─── APPLICATION ON ALL HEADINGS ─── */
h1, h2, h3, h4, h5, h6, .section-heading, .section-title {
    font-family: var(--heading-font) !important; /* Ab sabhi headings "Space Grotesk" ho gayi */
    font-weight: 700; /* Bold */
    letter-spacing: -0.02em; /* Smart Tech look ke liye */
}

/* Forms aur input text ke liye bhi Inter Font */
input, select, button, .live-slots {
    font-family: var(--body-font);
    font-weight: 500; /* Medium weight */
}

::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f0f4ff}::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px}

/* ─── NAV ─────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;background:transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;box-shadow:none;transition:background 0.35s ease,border-color 0.35s ease,box-shadow 0.35s ease}
nav.nav-scrolled{background:rgba(255,255,255,0.92);border-bottom-color:rgba(10,71,224,0.1);box-shadow:0 2px 24px rgba(10,71,224,0.08)}
.nav-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;padding:0 1.5rem;height:76px;gap:1rem}
.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;min-width:0}
.nav-logo-img{
  display:block;
  height:clamp(2.85rem,5.8vw,3.5rem);
  width:auto;
  max-width:min(16rem,58vw);
  flex-shrink:0;
  object-fit:contain;
  object-position:left center;
  transform-origin:left center;
}
.footer-logo-img{
  display:block;
  height:clamp(2.65rem,5.2vw,3.25rem);
  width:auto;
  max-width:min(15rem,90vw);
  flex-shrink:0;
  object-fit:contain;
  object-position:left center;
  transform-origin:left center;
}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.nav-logo-text .brand{font-family:var(--orb);font-size:clamp(1.02rem,2.3vw,1.28rem);font-weight:900;letter-spacing:2px;color:var(--navy);white-space:nowrap}
.nav-logo-text .brand span{color:var(--blue)}
.nav-logo-text .sub{font-size:clamp(0.64rem,1.6vw,0.86rem);color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap}
#services,#about-us,#portfolio,#why-us,#contact{scroll-margin-top:calc(var(--nav-height) + 12px)}
.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:6px;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
.nav-menu{display:flex;align-items:center;list-style:none;flex:1;margin:0 0 0 1.75rem;padding:0}
.nav-menu>li{display:flex;align-items:center}
.nav-menu>li>a{display:block;padding:7px 9px;color:var(--muted);text-decoration:none;font-size:clamp(0.86rem,1.4vw,0.98rem);font-weight:700;letter-spacing:0.4px;text-transform:uppercase;border-radius:6px;transition:color 0.2s,background 0.2s,box-shadow 0.2s;white-space:nowrap;text-align:left}
.nav-menu>li>a:hover{color:var(--blue);background:rgba(10,71,224,0.06)}
.nav-menu>li>a.active,
.nav-menu>li>a[aria-current="true"]{
  color:var(--blue);
  background:rgba(10,71,224,0.12);
  box-shadow:inset 0 -2px 0 var(--blue);
  font-weight:900;
}
.nav-cta{margin-left:auto;flex-shrink:0;background:var(--blue);color:#fff;padding:10px 20px;border-radius:7px;font-family:var(--lato);font-size:clamp(0.9rem,1.55vw,1.08rem);font-weight:900;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:none;box-shadow:0 4px 14px rgba(10,71,224,0.28);transition:box-shadow 0.3s,transform 0.2s;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.nav-cta:hover{box-shadow:0 6px 22px rgba(10,71,224,0.45);transform:translateY(-1px)}

@media(max-width:960px){
  .hamburger{display:flex}
  .nav-cta{display:none}
  .nav-menu{flex:none;margin-left:0}
  .footer-logo-img{height:clamp(2.45rem,8vw,3rem);max-width:min(92vw,13.5rem)}
}

/* ─── HERO ────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding-top:76px;background:#fff}
.hero-infinite-grid{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-grid-layer{position:absolute;inset:0;width:100%;height:100%;color:rgba(10,21,53,0.35)}
.hero-grid-dim{opacity:0.05;z-index:0}
.hero-grid-glow{
  opacity:0.4;
  z-index:1;
  pointer-events:none;
  mask-image:radial-gradient(300px circle at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(300px circle at 50% 50%,#000,transparent);
}
.hero-grid-orbs{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none}
.hero-orb-orange{right:-20%;top:-20%;width:40%;height:40%;background:rgba(249,115,22,0.4);filter:blur(120px)}
.hero-orb-primary{right:10%;top:-10%;width:20%;height:20%;background:rgba(10,71,224,0.3);filter:blur(100px)}
.hero-orb-blue{left:-10%;bottom:-20%;width:40%;height:40%;background:rgba(59,130,246,0.4);filter:blur(120px)}

/* Gemini-style glow overlay */
.hero-gemini-glow{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-gemini-glow-inner{
  position:absolute;
  width:100%;
  height:100%;
  background:radial-gradient(600px circle at 50% 50%,rgba(217,239,255,0.55) 0%,rgba(207,231,255,0.35) 35%,rgba(231,243,255,0.2) 60%,rgba(255,255,255,0) 100%);
  filter:blur(40px);
  opacity:0.7;
  transition:transform 0.1s ease-out;
  will-change:transform;
}



/* Animations */
@keyframes floatBlob1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(0.98)}}
@keyframes floatBlob2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-25px,25px) scale(1.03)}66%{transform:translate(20px,-20px) scale(0.97)}}
@keyframes floatBlob3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,25px) scale(1.04)}66%{transform:translate(-20px,-20px) scale(0.96)}}
@keyframes heroBlobFloat1{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(40px,-40px) rotate(5deg)}50%{transform:translate(-30px,30px) rotate(-3deg)}75%{transform:translate(20px,40px) rotate(3deg)}}
@keyframes heroBlobFloat2{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(-35px,35px) rotate(-4deg)}50%{transform:translate(30px,-25px) rotate(4deg)}75%{transform:translate(-25px,-30px) rotate(-2deg)}}
@keyframes heroBlobFloat3{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(30px,35px) rotate(3deg)}50%{transform:translate(-25px,-30px) rotate(-3deg)}75%{transform:translate(35px,-25px) rotate(2deg)}}
@keyframes heroBlobFloat4{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(-20px,-30px) rotate(-2deg)}50%{transform:translate(25px,25px) rotate(2deg)}75%{transform:translate(-30px,20px) rotate(-1deg)}}
@keyframes scrollBtnGlow{0%,100%{opacity:0.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-content{position:relative;z-index:10;text-align:center;padding:0 2rem;animation:fadeUp 0.8s ease both;pointer-events:none}
.hero-content .hero-btns,.hero-content button{pointer-events:auto}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(10,71,224,0.07);border:1px solid rgba(10,71,224,0.18);padding:7px 20px;border-radius:40px;font-family:var(--mono);font-size:0.68rem;color:var(--blue);letter-spacing:2px;margin-bottom:1.8rem}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 1.5s infinite}
.hero h1{font-family:var(--orb);font-size:clamp(1.8rem,4.5vw,3.5rem);font-weight:900;line-height:1.08;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin-bottom:0.4rem}
.hero h1 .accent{color:var(--blue);display:block}
.hero h1 .sub-title{display:block;font-size:clamp(0.9rem,2vw,1.4rem);color:var(--muted);font-weight:700;letter-spacing:2px;margin-top:0.3rem}
.hero-desc{font-size:1.05rem;color:var(--muted);max-width:560px;margin:1.6rem auto 2.4rem;line-height:1.8;font-weight:300}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-primary{background:var(--blue);color:#fff;padding:13px 36px;border-radius:7px;font-family:var(--lato);font-size:0.8rem;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:none;box-shadow:0 6px 24px rgba(10,71,224,0.3);transition:box-shadow 0.3s,transform 0.2s}
.btn-primary:hover{box-shadow:0 8px 32px rgba(10,71,224,0.5);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--blue);padding:13px 36px;border-radius:7px;font-family:var(--lato);font-size:0.8rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:2px solid rgba(10,71,224,0.3);transition:border-color 0.3s,background 0.3s}
.btn-outline:hover{border-color:var(--blue);background:rgba(10,71,224,0.05)}
.hero-stats{display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap;margin-top:3.5rem;padding-top:2.5rem;border-top:1.5px solid var(--border)}
.hero-stat{text-align:center}
.hero-stat-val{font-family:var(--orb);font-size:1.8rem;font-weight:900;color:var(--blue)}
.hero-stat-lbl{font-size:0.72rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:4px}

/* ─── SECTIONS ────────────────────────────────────────── */
.section{padding:5rem 1.5rem}
.section-white{background:#fff}
.section-light{background:var(--light)}
.section-dark{background:var(--navy)}
.container{max-width:1400px;margin:0 auto}
#services > .container{
  width:100%;
  max-width:100%;
  padding-left:0.25rem;
  padding-right:0.25rem;
  box-sizing:border-box;
}
.section-label{font-family:var(--lato);font-size:0.8rem;font-weight:700;color:var(--teal);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:0.6rem;text-align:center}
.section-title{font-family:var(--orb);font-size:clamp(1.4rem,3vw,2rem);font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--navy);text-align:center;margin-bottom:0.7rem}
.section-title.light{color:#fff}
.section-sub{text-align:center;color:var(--muted);font-size:0.95rem;max-width:560px;margin:0 auto 2.5rem;line-height:1.75}
.section-sub.light{color:rgba(255,255,255,0.55)}
.section-divider{width:48px;height:3px;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:2px;margin:0 auto 1.2rem}

/* ─── TABS ────────────────────────────────────────────── */
.tab-bar-sticky-wrap{
  position:relative;
  z-index:1;
  margin-bottom:2rem;
}
.tab-bar-placeholder{
  display:none;
  width:100%;
}
.tab-bar-sticky-wrap.is-tab-bar-fixed .tab-bar-placeholder{
  display:block;
}
.tab-bar-sticky-wrap.tab-bar-sticky-wrap--hidden{
  margin-bottom:0;
}
.tab-bar-sticky-wrap.tab-bar-sticky-wrap--hidden .tab-bar-placeholder{
  display:none!important;
  height:0!important;
}
.tab-bar.tab-bar--hidden,
.tab-bar-sticky-wrap.tab-bar-sticky-wrap--hidden .tab-bar{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.tab-bar{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:0;
  position:relative;
  z-index:1;
  padding:8px 4px;
}
.tab-bar.tab-bar--fixed{
  position:fixed;
  left:0;
  right:0;
  top:var(--nav-height);
  z-index:190;
  margin:0;
  padding:10px max(1rem,calc(50vw - 688px));
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(10,71,224,0.12);
  box-shadow:0 8px 28px rgba(10,71,224,0.14);
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  justify-content:flex-start;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(10,71,224,0.35) transparent;
  contain:layout style;
}
.tab-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#fff;border:1.5px solid var(--border);color:var(--muted);font-family:var(--lato);font-size:0.7rem;font-weight:700;letter-spacing:0.4px;cursor:pointer;transition:all 0.22s;text-transform:uppercase;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.04);flex-shrink:0}
.tab-btn .ti{font-size:0.95rem}
.tab-btn:hover{border-color:var(--blue);color:var(--blue);background:rgba(10,71,224,0.04)}
.tab-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 4px 14px rgba(10,71,224,0.28)}
#services .tab-panel{overflow-x:clip}
.tab-panel{display:none;width:100%;max-width:100%;box-sizing:border-box;opacity:0;visibility:hidden}
.tab-panel.active{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  opacity:1;
  visibility:visible;
  animation:panelIn 0.38s ease forwards;
  scroll-margin-top:calc(var(--nav-height) + 72px);
}
.panel-inner{display:flex;gap:2.5rem;align-items:center;width:100%;background:#fff;border-radius:16px;border:1.5px solid var(--border);padding:2rem 2.5rem;box-shadow:0 4px 30px rgba(10,71,224,0.07)}
.panel-inner.rev{flex-direction:row-reverse}
.panel-text{flex:1}
.panel-text h3{font-family:var(--orb);font-size:1rem;font-weight:900;color:var(--navy);letter-spacing:1px;text-transform:uppercase;margin-bottom:0.6rem}
.panel-tag{
  display:inline-block;
  background:rgba(10,71,224,0.08);
  color:var(--blue);
  font-family:var(--lato);
  font-size:0.6rem;
  font-weight:700;
  letter-spacing:2px;
  padding:7px 16px;
  border-radius:30px;
  margin-bottom:0.9rem;
}
.panel-text p{color:var(--muted);line-height:1.8;font-size:0.88rem;margin-bottom:1rem}
.panel-features{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:1.2rem}
.panel-features li{display:flex;align-items:flex-start;gap:9px;font-size:0.83rem;color:var(--navy)}
.panel-features li::before{content:"";flex-shrink:0;width:17px;height:17px;border-radius:50%;background:rgba(0,184,148,0.12);border:1.5px solid var(--teal);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' fill='none' stroke='%2300b894' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px;margin-top:1px}
.panel-visual{flex:0 0 260px;height:230px;border-radius:14px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--navy) 0%,#1a2a5e 100%);display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(10,71,224,0.18);box-shadow:0 8px 30px rgba(10,71,224,0.12)}

/* Mobile Apps tab */
.mobile-panel{align-items:stretch}
.mobile-panel-text{flex:1;min-width:0}
.mobile-lead{font-size:0.92rem;color:var(--muted);line-height:1.75;margin-bottom:1rem}
.mobile-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.1rem}
.mobile-chips span{
  font-family:var(--lato);
  font-size:0.58rem;
  font-weight:700;
  letter-spacing:0.5px;
  padding:5px 10px;
  border-radius:20px;
  background:rgba(10,71,224,0.07);
  border:1px solid rgba(10,71,224,0.15);
  color:var(--navy);
}
.mobile-subhead{
  font-family:var(--orb);
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:0.5rem;
}
.mobile-features{margin-bottom:1rem}
.tech-stack-label{
  font-family:var(--orb);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.55rem;
}
.tech-stack-group{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  margin:0.65rem 0 0.45rem;
}
.tech-stack-group:first-of-type{margin-top:0.35rem}
.tech-logos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:0.2rem}
.tech-logo{
  font-family:var(--mono);
  font-size:0.62rem;
  font-weight:900;
  padding:5px 11px;
  border-radius:6px;
  color:#fff;
  letter-spacing:0.4px;
  line-height:1.3;
}
.tech-logo.flutter{background:#02569B}
.tech-logo.rn{background:#087ea4}
.tech-logo.swift{background:#F05138}
.tech-logo.kotlin{background:#7F52FF}
.tech-logo.android-native{background:#3ddc84;color:#fff}
.tech-logo.react{background:#61dafb;color:#0a1a2e}
.tech-logo.nextjs{background:#111;color:#fff}
.tech-logo.node{background:#339933;color:#fff}
.tech-logo.typescript{background:#3178C6}
.tech-logo.graphql{background:#E10098}
.tech-logo.aws{background:#FF9900;color:#232f3e}
.tech-logo.python{background:#3776AB}
.tech-logo.fastapi{background:#009688}
.tech-logo.spring{background:#6DB33F;color:#fff}
.tech-logo.java{background:#E76F00}
.tech-logo.go{background:#00ADD8;color:#0a1a2e}
.tech-logo.docker{background:#2496ED}
.tech-logo.k8s{background:#326CE5}
.tech-logo.kafka{background:#231F20}
.tech-logo.terraform{background:#7B42BC}
.tech-logo.postgres{background:#336791}
.tech-logo.mongodb{background:#47A248}
.tech-logo.redis{background:#DC382D}
.tech-logo.elasticsearch{background:#005571}
.tech-logo.dynamodb{background:#4053D6}
.tech-logo.cassandra{background:#1287B1}
.tech-logo.mysql{background:#4479A1}
.tech-logo.neo4j{background:#018BFF}
.tech-logo.firebase{background:#FFCA28;color:#1a1a1a}
.tech-logo.supabase{background:#3ECF8E;color:#0a1a2e}
.tech-logo.timescale{background:#FDB515;color:#1a1a1a}
.tech-logo.clickhouse{background:#FFCC01;color:#1a1a1a}

.mobile-dev-visual{
  flex:0 0 440px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.mobile-animation-stack{
  position:relative;
  display:block;
  height:300px;
  min-height:300px;
  width:100%;
  flex-shrink:0;
  min-width:0;
}
.code-terminal{
  position:relative;
  z-index:2;
  height:100%;
  min-height:0;
  background:#0d1117;
  border-radius:12px;
  border:1.5px solid #21262d;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
}
.code-terminal-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  background:#161b22;
  border-bottom:1px solid #21262d;
}
.ct-dot{width:10px;height:10px;border-radius:50%}
.ct-dot.r{background:#ff5f57}
.ct-dot.y{background:#febc2e}
.ct-dot.g{background:#28c840}
.ct-title{
  margin-left:auto;
  font-family:var(--mono);
  font-size:0.52rem;
  color:#8b949e;
  letter-spacing:1px;
}
.code-terminal-body{
  flex:1;
  padding:12px 14px;
  overflow-y:auto;
  max-height:calc(300px - 40px);
  font-family:var(--mono);
  font-size:0.62rem;
  line-height:1.65;
  transition:max-height .45s ease,opacity .35s ease,padding .35s ease;
}
.code-line{white-space:pre-wrap;word-break:break-all;margin-bottom:2px}
.code-line.cmd{color:#79c0ff}
.code-line.ok{color:#3fb950}
.code-line.info{color:#d2a8ff}
.code-line.success{color:#ffa657;font-weight:700;margin-top:4px}
.code-terminal-body::after{
  content:'▋';
  color:#58a6ff;
  animation:cursorBlink 0.8s step-end infinite;
}
.store-badges{
  display:flex;
  flex-direction:column;
  gap:8px;
  opacity:1;
  flex-shrink:0;
  margin-top:2px;
}
.store-badges-row{
  display:flex;
  gap:10px;
}
.store-badges-row .store-badge{flex:1}
.store-badges.stores-live .store-badge{
  box-shadow:0 6px 20px rgba(0,166,81,0.25);
  border-color:rgba(0,166,81,0.45);
}
.store-badge{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  background:var(--navy);
  color:#fff;
  border:1px solid rgba(255,255,255,0.12);
}
.store-badge span{display:flex;flex-direction:column;line-height:1.2}
.store-badge small{font-size:0.48rem;opacity:0.75;text-transform:uppercase;letter-spacing:0.5px}
.store-badge strong{font-family:var(--orb);font-size:0.62rem;letter-spacing:0.5px}
.store-badge.appstore svg{color:#fff}
.store-badge.playstore{background:linear-gradient(135deg,#0f9d58,#1a73e8)}
.store-badge.webstore{
  background:linear-gradient(135deg,var(--blue),#0636a8);
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.store-badge.webstore .store-badge-globe{
  flex-shrink:0;
  width:24px;
  height:24px;
  color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.store-badge.webstore:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(10,71,224,0.35);
  border-color:rgba(255,255,255,0.28);
}
.store-badges.stores-live .store-badge.webstore{
  box-shadow:0 6px 20px rgba(10,71,224,0.3);
  border-color:rgba(255,255,255,0.28);
}

/* Mobile build: terminal folds → deploy scene overlays same slot */
#mobileCodeTerminal{
  transition:height .45s ease,min-height .45s ease,opacity .35s ease,box-shadow .35s ease;
}
#mobileCodeTerminal.terminal-hidden{
  display:none!important;
}
#mobileCodeTerminal.morph-to-file{
  animation:terminalMorphToFile 1.1s cubic-bezier(.45,.05,.2,1) forwards;
  z-index:5;
}
.mobile-dev-visual.phase-deploy #mobileCodeTerminal{
  height:100%;
}
.mobile-dev-visual.phase-deploy #mobileCodeTerminal.terminal-folded{
  height:auto;
  min-height:0;
  box-shadow:0 6px 20px rgba(0,0,0,0.18);
}
.mobile-dev-visual.phase-deploy #mobileCodeTerminal.terminal-folded .code-terminal-body{
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  overflow:hidden;
}
.mobile-dev-visual.phase-deploy #mobileCodeTerminal.terminal-folded .code-terminal-body::after{
  display:none;
}
#mobileStoreBadges.stores-uploading .store-badge strong{
  color:#ffc857;
  animation:storeUploadPulse 1.2s ease-in-out infinite;
}
#mobileStoreBadges.stores-uploading .store-badge{
  pointer-events:none;
}
@keyframes storeUploadPulse{
  0%,100%{opacity:1}
  50%{opacity:0.55}
}
.mobile-dev-visual.phase-deploy #mobileBuildScene{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.mobile-dev-visual.phase-deploy .mobile-animation-stack{
  display:block;
  height:300px;
}
.mobile-dev-visual.phase-deploy #mobileCodeTerminal{
  height:100%;
}
.mobile-dev-visual.phase-deploy .build-center,
.mobile-dev-visual.phase-deploy #mobileDeployFiles{
  display:block;
}
.mobile-dev-visual.phase-deploy #mobileDeployFiles[aria-hidden="true"]{
  display:none!important;
}
.mobile-build-scene{
  position:absolute;
  inset:0;
  z-index:1;
  height:100%;
  max-height:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  margin:0;
  background:linear-gradient(180deg,#f4f7fd 0%,#e6ecf8 100%);
  border:1.5px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  transition:opacity .4s ease,visibility .4s ease;
}
.build-platforms{
  position:absolute;
  left:0;right:0;bottom:12px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:6px;
  padding:0 6px;
  z-index:1;
  pointer-events:none;
}
.mobile-dev-visual.phase-deploy .build-platforms{
  gap:12px;
  padding:0 10px;
}
.build-center{
  position:absolute;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  width:260px;
  height:210px;
  z-index:2;
}
.build-center .publish-success{
  position:absolute;
  left:50%;
  top:58%;
  right:auto;
  bottom:auto;
  width:auto;
  min-width:140px;
  max-width:200px;
  padding:14px 20px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(244,247,253,0.96);
  border-radius:10px;
  border:1.5px solid rgba(0,166,81,0.25);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-50%) scale(0.88);
  transition:opacity .45s ease,transform .45s ease,visibility .45s;
  z-index:6;
  pointer-events:none;
  box-shadow:0 6px 20px rgba(0,166,81,0.12);
}
.build-center .publish-success.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}
.build-center .publish-success-icon{
  color:var(--green);
  filter:drop-shadow(0 4px 12px rgba(0,166,81,0.35));
  animation:successPop .55s cubic-bezier(.2,.8,.2,1);
}
.build-center .publish-success-icon .success-ring{
  stroke-dasharray:176;
  stroke-dashoffset:176;
  animation:successRing .6s ease forwards .1s;
}
.build-center .publish-success-icon .success-tick{
  stroke-dasharray:48;
  stroke-dashoffset:48;
  animation:successTick .45s ease forwards .45s;
}
.build-center .publish-success-text{
  margin:0;
  font-family:var(--lato);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--navy);
  text-align:center;
  line-height:1.2;
  animation:successTextIn .4s ease forwards .55s;
  opacity:0;
  transform:translateY(4px);
}
.build-center .publish-success.show .publish-success-text{
  opacity:1;
  transform:translateY(0);
}
@keyframes successPop{
  0%{transform:scale(0.5);opacity:0}
  70%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}
@keyframes successRing{
  to{stroke-dashoffset:0}
}
@keyframes successTick{
  to{stroke-dashoffset:0}
}
@keyframes successTextIn{
  to{opacity:1;transform:translateY(0)}
}
.deploy-files{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.deploy-file{
  position:absolute;
  left:50%;
  top:42%;
  width:48px;
  height:62px;
  margin:0;
  color:var(--blue);
  opacity:0;
  transform:translate(-50%,-50%) scale(0.45);
  filter:drop-shadow(0 6px 14px rgba(10,71,224,0.35));
  transition:opacity .35s ease;
  pointer-events:none;
}
.deploy-file.visible.deploy-file-android{
  opacity:1;
  transform:translate(calc(-50% - 26px),-50%) scale(0.92);
}
.deploy-file.visible.deploy-file-web{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  z-index:4;
}
.deploy-file.visible.deploy-file-ios{
  opacity:1;
  transform:translate(calc(-50% + 26px),-50%) scale(0.92);
}
.deploy-file-android.morph-in{
  animation:fileMorphInAndroid .55s cubic-bezier(.2,.8,.2,1) forwards;
}
.deploy-file-web.morph-in{
  animation:fileMorphInWeb .55s cubic-bezier(.2,.8,.2,1) forwards .1s;
}
.deploy-file-ios.morph-in{
  animation:fileMorphInIos .55s cubic-bezier(.2,.8,.2,1) forwards .2s;
}
.deploy-file.fly-android{
  animation:fileIntoAndroid 1.15s cubic-bezier(.55,.05,.25,1) forwards;
}
.deploy-file.fly-web{
  animation:fileIntoWeb 1.15s cubic-bezier(.55,.05,.25,1) forwards;
}
.deploy-file.fly-ios{
  animation:fileIntoIos 1.15s cubic-bezier(.55,.05,.25,1) forwards;
}
.build-platforms .platform{
  flex:1 1 0;
  min-width:0;
  width:0;
  max-width:104px;
  padding:6px 6px;
  box-sizing:border-box;
}
.platform{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-width:0;
  border-radius:10px;
  background:#fff;
  border:1.5px solid var(--border);
  opacity:0.35;
  filter:grayscale(1);
  transform:scale(0.92);
  transition:opacity .45s,filter .45s,transform .45s,box-shadow .45s,border-color .45s;
}
.platform svg{color:var(--muted)}
.platform.android svg{color:#3ddc84}
.platform.web svg{color:var(--blue)}
.platform.ios svg{color:#111}
.platform .platform-icon,
.platform svg.platform-icon,
.platform > svg{
  width:30px;
  height:30px;
  flex-shrink:0;
}
.platform.platform-link{
  text-decoration:none;
  color:inherit;
  pointer-events:none;
}
.platform.platform-link.deployed{
  pointer-events:auto;
  cursor:pointer;
}
.platform.platform-link.deployed:hover{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,71,224,0.2),0 8px 24px rgba(10,71,224,0.25);
}
.platform.deployed{
  opacity:1;
  filter:none;
  transform:scale(1.05);
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,166,81,0.2),0 8px 24px rgba(0,166,81,0.25);
  animation:platformPop .5s ease;
}
.mobile-dev-visual.phase-deploy .build-platforms .platform.deployed{
  transform:scale(1.04);
}
.platform-name{
  font-family:var(--lato);
  font-size:0.48rem;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  width:100%;
  min-height:2.35em;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.15;
}
.platform.deployed .platform-name{color:var(--navy)}
.mobile-dev-visual.phase-deploy .platform-name{
  font-size:0.58rem;
  letter-spacing:0.6px;
}
.deployed-tag{
  font-family:var(--lato);
  font-size:0.48rem;
  font-weight:700;
  color:var(--green);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s,transform .35s;
}
.platform.deployed .deployed-tag{opacity:1;transform:translateY(0)}
.mobile-dev-visual.phase-deploy .deployed-tag{
  font-size:0.54rem;
  letter-spacing:0.5px;
}
.mobile-dev-visual.phase-deploy .build-center{
  top:48%;
}
.mobile-dev-visual.phase-deploy .build-center .publish-success{
  top:62%;
  max-width:220px;
  min-width:158px;
  padding:16px 24px 14px;
  gap:9px;
  border-radius:12px;
}
.mobile-dev-visual.phase-deploy .build-center .publish-success-text{
  font-size:0.92rem;
  letter-spacing:1.05px;
}
.platform.absorbing .platform-glow{
  opacity:1;
  transform:scale(1.4);
}
.platform-glow{
  position:absolute;
  inset:-8px;
  border-radius:14px;
  background:radial-gradient(circle,rgba(0,166,81,0.45) 0%,transparent 70%);
  opacity:0;
  transform:scale(0.6);
  transition:opacity .35s,transform .5s ease;
  pointer-events:none;
}
@keyframes terminalMorphToFile{
  0%{transform:translateY(0) scale(1);opacity:1;border-radius:12px}
  45%{transform:translateY(36px) scale(0.72);opacity:.92}
  100%{transform:translateY(64px) scale(0.42);opacity:0;border-radius:6px}
}
@keyframes fileMorphInAndroid{
  0%{opacity:0;transform:translate(calc(-50% - 26px),calc(-50% + 14px)) scale(0.35)}
  100%{opacity:1;transform:translate(calc(-50% - 26px),-50%) scale(0.92)}
}
@keyframes fileMorphInWeb{
  0%{opacity:0;transform:translate(-50%,calc(-50% + 14px)) scale(0.35)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes fileMorphInIos{
  0%{opacity:0;transform:translate(calc(-50% + 26px),calc(-50% + 14px)) scale(0.35)}
  100%{opacity:1;transform:translate(calc(-50% + 26px),-50%) scale(0.92)}
}
@keyframes fileIntoAndroid{
  0%{left:42%;top:42%;opacity:1;transform:translate(-50%,-50%) scale(0.92)}
  70%{left:22%;top:72%;opacity:.9;transform:translate(-50%,-50%) scale(.5)}
  100%{left:16%;top:78%;opacity:0;transform:translate(-50%,-50%) scale(.15)}
}
@keyframes fileIntoWeb{
  0%{left:50%;top:42%;opacity:1;transform:translate(-50%,-50%) scale(1)}
  70%{left:50%;top:72%;opacity:.9;transform:translate(-50%,-50%) scale(.5)}
  100%{left:50%;top:78%;opacity:0;transform:translate(-50%,-50%) scale(.15)}
}
@keyframes fileIntoIos{
  0%{left:58%;top:42%;opacity:1;transform:translate(-50%,-50%) scale(0.92)}
  70%{left:78%;top:72%;opacity:.9;transform:translate(-50%,-50%) scale(.5)}
  100%{left:84%;top:78%;opacity:0;transform:translate(-50%,-50%) scale(.15)}
}
@keyframes platformPop{
  0%{transform:scale(0.85)}
  60%{transform:scale(1.08)}
  100%{transform:scale(1.05)}
}
@keyframes cursorBlink{50%{opacity:0}}
.vbg{position:absolute;inset:0;background-image:radial-gradient(rgba(10,71,224,0.18) 1px,transparent 1px);background-size:20px 20px}
.vi{font-size:4.5rem;filter:drop-shadow(0 0 24px rgba(10,71,224,0.5));animation:iconFloat 3s ease-in-out infinite}
.vbadge{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(0,184,148,0.15);border:1px solid var(--teal);color:var(--teal);font-family:var(--mono);font-size:0.55rem;letter-spacing:2px;padding:4px 12px;border-radius:20px;white-space:nowrap}

/* ─── AI SOLUTIONS TAB ────────────────────────────────── */
#tab-ai{
  width:100%;
  max-width:100%;
  overflow:visible;
  box-sizing:border-box;
}
.ai-panel{align-items:stretch}
.ai-panel .panel-inner{
  flex-direction:column!important;
  align-items:stretch;
  gap:1.75rem;
  padding:1.35rem 1rem 1.5rem;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:visible;
}
.ai-panel-text{
  flex:none;
  width:100%;
  max-width:100%;
  min-width:0;
  order:2;
  overflow:visible;
  box-sizing:border-box;
}
#tab-ai .panel-text h3{
  font-size:0.9rem;
  max-width:100%;
  overflow-wrap:break-word;
}
.ai-lead{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  margin-bottom:1rem;
  max-width:100%;
  color:var(--muted);
}
.ai-lead-line{
  display:block;
  font-size:0.84rem;
  line-height:1.6;
  color:var(--muted);
}
#tab-ai .panel-text p{max-width:100%}
#tab-ai .tech-logo{font-size:0.56rem;padding:4px 8px}
#tab-ai .tech-logos{gap:5px}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.1rem}
.ai-chips span{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  padding:5px 10px;
  border-radius:20px;
  background:rgba(10,71,224,0.07);
  border:1px solid rgba(10,71,224,0.15);
  color:var(--navy);
}
.ai-subhead{
  font-family:var(--orb);
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:0.5rem;
}
.ai-features{margin-bottom:1rem}
.tech-logo.tensorflow{background:#FF6F00}
.tech-logo.pytorch{background:#EE4C2C}
.tech-logo.sklearn{background:#F7931E;color:#1a1a1a}
.tech-logo.onnx{background:#333}
.tech-logo.hf{background:#FFD21E;color:#1a1a1a}
.tech-logo.opencv{background:#5C3EE8}
.tech-logo.yolo{background:#111}
.tech-logo.roboflow{background:#6706CE}
.tech-logo.cuda{background:#76B900;color:#1a1a1a}
.tech-logo.nvidia{background:#76B900;color:#1a1a1a}
.tech-logo.sagemaker{background:#FF9900;color:#232f3e}
.tech-logo.spark{background:#E25A1C}

.ai-dev-visual{
  flex:none;
  width:100%;
  max-width:min(620px,94vw);
  margin:0 auto;
  order:1;
  padding:0;
  box-sizing:border-box;
}
.ai-warehouse-scene{
  position:relative;
  width:100%;
  max-width:100%;
  height:360px;
  border-radius:14px;
  overflow:hidden;
  border:1.5px solid rgba(10,71,224,0.28);
  box-shadow:0 14px 48px rgba(10,71,224,0.2);
  background:#0a1628;
}
.ai-scene-sky{
  position:absolute;
  inset:0 0 38%;
  background:linear-gradient(180deg,#0f2248 0%,#152a52 55%,#1a3058 100%);
}
.ai-scene-floor{
  position:absolute;
  left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,#1e2d4a 0%,#141f33 100%);
  border-top:2px solid rgba(10,71,224,0.25);
}
.ai-scene-floor::before{
  content:'';
  position:absolute;
  inset:8px 0 0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,0.04) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(0deg,rgba(255,255,255,0.03) 0 1px,transparent 1px 32px);
  opacity:0.7;
}
.ai-shelf{
  position:absolute;
  top:22%;
  width:11%;
  height:36%;
  background:linear-gradient(180deg,#2a3f66,#1a2844);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:4px;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.35);
}
.ai-shelf::after{
  content:'';
  position:absolute;
  left:8%;right:8%;
  top:20%;height:3px;
  background:rgba(255,255,255,0.12);
  box-shadow:0 28px 0 rgba(255,255,255,0.1),0 56px 0 rgba(255,255,255,0.08);
}
.ai-shelf-left{left:3%}
.ai-shelf-right{right:3%}
.ai-zone{
  position:absolute;
  top:10%;
  width:18%;
  padding:7px 6px;
  z-index:2;
  text-align:center;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  border:1.5px dashed rgba(255,255,255,0.15);
  transition:box-shadow .4s,border-color .4s,background .4s;
}
.ai-zone span{
  display:block;
  font-family:var(--orb);
  font-size:0.52rem;
  font-weight:900;
  letter-spacing:1px;
  color:#e8eef8;
  text-transform:uppercase;
}
.ai-zone small{
  font-family:var(--mono);
  font-size:0.42rem;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.5px;
}
.ai-zone-a{left:14%}
.ai-zone-b{left:50%;transform:translateX(-50%)}
.ai-zone-reject{
  right:6%;
  z-index:4;
  background:rgba(120,22,34,0.72);
  border:2px solid rgba(255,95,110,0.85);
  box-shadow:0 0 14px rgba(232,39,58,0.45),inset 0 0 12px rgba(255,80,90,0.12);
}
.ai-zone-reject span{
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.45);
}
.ai-zone-reject small{color:rgba(255,210,215,0.95)}
.ai-zone::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:5px;
  width:22px;
  height:14px;
  margin-left:-11px;
  border-radius:3px;
  opacity:0;
  transform:scale(0);
}
.ai-zone-a::after{background:linear-gradient(145deg,#c8924a,#8b5e2b);border:1px solid #6b4420}
.ai-zone-b::after{background:linear-gradient(145deg,#c8924a,#8b5e2b);border:1px solid #6b4420}
.ai-zone-reject::after{background:linear-gradient(145deg,#6b8f4a,#3d5528);border:1px solid #c0392b}
#tab-ai.active .ai-zone-a::after{animation:aiZoneAStock 18s ease-in-out infinite}
#tab-ai.active .ai-zone-b::after{animation:aiZoneBStock 18s ease-in-out infinite}
#tab-ai.active .ai-zone-reject::after{animation:aiZoneRejectStock 18s ease-in-out infinite}
.ai-conveyor{
  position:absolute;
  left:10%;right:10%;
  bottom:44px;
  height:64px;
  z-index:2;
}
.ai-conveyor-belt{
  position:absolute;
  inset:0;
  border-radius:8px;
  background:#2a3548;
  border:2px solid #3d4d66;
  overflow:hidden;
}
.ai-conveyor-belt::after{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 14px,rgba(255,255,255,0.06) 14px,rgba(255,255,255,0.06) 28px);
}
#tab-ai.active .ai-conveyor-belt::after{
  animation:aiBeltScroll 1.2s linear infinite;
}
.ai-parcel{
  position:absolute;
  bottom:14px;
  width:54px;
  height:40px;
  border-radius:5px;
  background:linear-gradient(145deg,#c8924a,#8b5e2b);
  border:1.5px solid #6b4420;
  box-shadow:0 4px 10px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.ai-parcel-label{
  font-family:var(--orb);
  font-size:0.46rem;
  font-weight:900;
  color:#fff8ee;
  letter-spacing:0.4px;
  text-align:center;
  line-height:1.15;
}
.ai-parcel-label strong{
  font-family:var(--orb);
  font-weight:900;
  font-size:0.5rem;
  letter-spacing:0.5px;
  display:block;
}
.ai-parcel-ghost strong{
  font-family:var(--orb);
  font-weight:900;
  font-size:0.44rem;
}
.ai-parcel-1{left:8%}
.ai-parcel-2{left:38%}
.ai-parcel-bad{
  left:68%;
  background:linear-gradient(145deg,#8b4a4a,#5c2828);
  border-color:#e8273a;
  box-shadow:0 0 0 2px rgba(255,90,100,0.75),0 4px 12px rgba(232,39,58,0.4);
}
.ai-parcel-bad .ai-parcel-label{color:#ffe0e0;font-weight:800}
.ai-parcel-ghost{
  position:absolute;
  width:40px;
  height:28px;
  border-radius:5px;
  background:linear-gradient(145deg,#c8924a,#8b5e2b);
  border:1.5px solid #6b4420;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:0.36rem;
  font-weight:700;
  color:#fff8ee;
  opacity:0;
  z-index:5;
  pointer-events:none;
}
.ai-ghost-bad{
  background:linear-gradient(145deg,#6b8f4a,#3d5528);
  border-color:#c0392b;
  color:#ffc9c9;
}
.ai-robot{
  position:absolute;
  bottom:30%;
  left:50%;
  width:86px;
  height:118px;
  transform:translateX(-50%);
  z-index:4;
}
.ai-robot-shadow{
  position:absolute;
  bottom:-4px;left:50%;
  width:54px;height:10px;
  margin-left:-27px;
  background:radial-gradient(ellipse,rgba(0,0,0,0.45) 0%,transparent 70%);
  border-radius:50%;
}
.ai-robot-base{
  position:absolute;
  bottom:0;left:50%;
  width:56px;height:16px;
  margin-left:-28px;
  background:linear-gradient(180deg,#5a6a82,#3d4d66);
  border-radius:6px;
  border:1px solid #7a8aa8;
}
.ai-robot-torso{
  position:absolute;
  bottom:14px;left:50%;
  width:48px;height:52px;
  margin-left:-24px;
  background:linear-gradient(180deg,#7a8eb8,#4a5e88);
  border-radius:10px 10px 6px 6px;
  border:1.5px solid #9aafd4;
}
.ai-robot-head{
  position:absolute;
  top:-22px;left:50%;
  width:34px;height:26px;
  margin-left:-17px;
  background:linear-gradient(180deg,#8ea4cc,#5a7098);
  border-radius:8px 8px 4px 4px;
  border:1.5px solid #b8cce8;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.ai-robot-eye{
  width:6px;height:6px;
  border-radius:50%;
  background:#00e5a0;
  box-shadow:0 0 8px #00e5a0;
}
.ai-robot-scan{
  position:absolute;
  bottom:-2px;left:50%;
  width:28px;height:3px;
  margin-left:-14px;
  background:linear-gradient(90deg,transparent,#00e5a0,transparent);
  opacity:0;
}
.ai-robot-chest{
  position:absolute;
  bottom:8px;left:50%;
  transform:translateX(-50%);
  font-family:var(--orb);
  font-size:0.5rem;
  font-weight:900;
  color:rgba(255,255,255,0.85);
  letter-spacing:1px;
}
.ai-robot-arm{
  position:absolute;
  top:8px;right:-8px;
  width:36px;height:8px;
  transform-origin:left center;
  transform:rotate(-18deg);
}
.ai-robot-forearm{
  width:28px;height:8px;
  background:linear-gradient(90deg,#6a7e9e,#4a5e7e);
  border-radius:4px;
  border:1px solid #8a9ebe;
}
.ai-robot-gripper{
  position:absolute;
  right:-6px;top:-4px;
  width:12px;height:16px;
  border:2px solid #9aafd4;
  border-radius:0 0 4px 4px;
  border-top:none;
}
.ai-robot-held{
  position:absolute;
  right:-18px;top:-8px;
  width:16px;height:12px;
  border-radius:3px;
  background:#c8924a;
  border:1px solid #6b4420;
  opacity:0;
}
.ai-soft-panel{
  position:absolute;
  top:6%;
  left:3%;
  right:auto;
  width:min(38%,200px);
  max-width:200px;
  z-index:2;
  background:#0d1117;
  border:1.5px solid #21262d;
  border-radius:8px;
  overflow:hidden;
  opacity:0.55;
  transform:translateY(4px);
  transition:opacity .4s,transform .4s,box-shadow .4s;
}
.ai-soft-header{
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  background:#161b22;
  border-bottom:1px solid #21262d;
  font-family:var(--mono);
  font-size:0.42rem;
  color:#8b949e;
  letter-spacing:0.5px;
}
.ai-soft-dot{width:7px;height:7px;border-radius:50%;background:#ff5f57}
.ai-soft-dot:nth-child(2){background:#febc2e}
.ai-soft-dot.g{background:#28c840}
.ai-soft-body{padding:6px 8px}
.ai-soft-line{
  font-family:var(--mono);
  font-size:0.4rem;
  color:#58a6ff;
  line-height:1.55;
  opacity:0.35;
}
.ai-soft-status{
  padding:4px 8px 6px;
  font-family:var(--mono);
  font-size:0.4rem;
  color:#3fb950;
  border-top:1px solid #21262d;
  opacity:0;
}
.ai-task-strip{
  position:absolute;
  left:0;right:0;bottom:0;
  width:100%;
  height:38px;
  z-index:7;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  background:linear-gradient(0deg,rgba(0,0,0,0.55) 0%,transparent 100%);
  border-top:1px solid rgba(255,255,255,0.08);
  box-sizing:border-box;
}
.ai-task-badge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:20px;
  background:rgba(10,71,224,0.85);
  border:1px solid rgba(0,229,160,0.35);
  font-family:var(--mono);
  font-size:0.48rem;
  font-weight:700;
  color:#fff;
  letter-spacing:0.3px;
  text-align:center;
  opacity:0;
  transform:translateY(6px);
  max-width:100%;
}
.ai-scan-beam{
  position:absolute;
  top:32%;
  left:50%;
  width:100px;height:2px;
  margin-left:-50px;
  background:linear-gradient(90deg,transparent,rgba(0,229,160,0.9),transparent);
  opacity:0;
  z-index:5;
  pointer-events:none;
}

/* AI scene animation loop — 18s pick → place → highlight */
#tab-ai.active .ai-robot{animation:aiRobotMove 18s ease-in-out infinite}
#tab-ai.active .ai-robot-arm{animation:aiRobotArm 18s ease-in-out infinite}
#tab-ai.active .ai-robot-scan{animation:aiRobotScan 18s ease-in-out infinite}
#tab-ai.active .ai-robot-held{animation:aiRobotHeld 18s ease-in-out infinite}
#tab-ai.active .ai-parcel-1{animation:aiParcel1OnBelt 18s ease-in-out infinite}
#tab-ai.active .ai-parcel-2{animation:aiParcel2OnBelt 18s ease-in-out infinite}
#tab-ai.active .ai-parcel-bad{animation:aiParcelBadOnBelt 18s ease-in-out infinite}
#tab-ai.active .ai-ghost-a{animation:aiGhostToZoneA 18s ease-in-out infinite}
#tab-ai.active .ai-ghost-b{animation:aiGhostToZoneB 18s ease-in-out infinite}
#tab-ai.active .ai-ghost-bad{animation:aiGhostToReject 18s ease-in-out infinite}
#tab-ai.active .ai-zone-a{animation:aiZoneAGlow 18s ease-in-out infinite}
#tab-ai.active .ai-zone-b{animation:aiZoneBGlow 18s ease-in-out infinite}
#tab-ai.active .ai-zone-reject{animation:aiZoneRejectGlow 18s ease-in-out infinite}
#tab-ai.active .ai-soft-panel{animation:aiSoftPanelActive 18s ease-in-out infinite}
#tab-ai.active .ai-soft-line.l1{animation:aiSoftLine1 18s ease-in-out infinite}
#tab-ai.active .ai-soft-line.l2{animation:aiSoftLine2 18s ease-in-out infinite}
#tab-ai.active .ai-soft-line.l3{animation:aiSoftLine3 18s ease-in-out infinite}
#tab-ai.active .ai-soft-line.l4{animation:aiSoftLine4 18s ease-in-out infinite}
#tab-ai.active .ai-soft-status{animation:aiSoftStatus 18s ease-in-out infinite}
#tab-ai.active .ai-task-1{animation:aiTaskShow1 18s ease-in-out infinite}
#tab-ai.active .ai-task-2{animation:aiTaskShow2 18s ease-in-out infinite}
#tab-ai.active .ai-task-3{animation:aiTaskShow3 18s ease-in-out infinite}
#tab-ai.active .ai-scan-beam{animation:aiScanBeam 18s ease-in-out infinite}

@keyframes aiBeltScroll{to{background-position:28px 0}}
@keyframes aiRobotMove{
  0%,3%{left:50%}
  5%,9%{left:22%}
  10%,12%{left:22%}
  13%,18%{left:26%}
  19%,26%{left:26%}
  28%,32%{left:66%}
  33%,35%{left:66%}
  36%,41%{left:82%}
  42%,49%{left:82%}
  51%,55%{left:44%}
  56%,58%{left:44%}
  59%,64%{left:50%}
  65%,72%{left:50%}
  74%,95%{left:58%}
  100%{left:50%}
}
@keyframes aiRobotArm{
  0%,4%{transform:rotate(-12deg)}
  8%,11%{transform:rotate(48deg)}
  12%,17%{transform:rotate(6deg)}
  18%,21%{transform:rotate(42deg)}
  22%,27%{transform:rotate(-8deg)}
  31%,34%{transform:rotate(46deg)}
  35%,40%{transform:rotate(4deg)}
  41%,44%{transform:rotate(40deg)}
  45%,50%{transform:rotate(-6deg)}
  54%,57%{transform:rotate(46deg)}
  58%,63%{transform:rotate(6deg)}
  64%,67%{transform:rotate(38deg)}
  68%,73%{transform:rotate(-8deg)}
  74%,96%{transform:rotate(-4deg)}
  100%{transform:rotate(-12deg)}
}
@keyframes aiRobotScan{
  0%,30%,52%,74%,100%{opacity:0}
  32%,35%{opacity:1}
  54%,57%{opacity:1}
}
@keyframes aiRobotHeld{
  0%,8%{opacity:0}
  9%,12%{opacity:1;background:linear-gradient(145deg,#c8924a,#8b5e2b);border:1px solid #6b4420}
  13%,20%{opacity:1}
  21%,32%{opacity:0}
  33%,36%{opacity:1;background:linear-gradient(145deg,#6b8f4a,#3d5528);border:1px solid #c0392b}
  37%,43%{opacity:1}
  44%,53%{opacity:0}
  54%,57%{opacity:1;background:linear-gradient(145deg,#c8924a,#8b5e2b);border:1px solid #6b4420}
  58%,66%{opacity:1}
  67%,100%{opacity:0}
}
@keyframes aiParcel1OnBelt{
  0%,7%{opacity:1;transform:scale(1);box-shadow:0 4px 10px rgba(0,0,0,0.35)}
  8%,10%{opacity:1;transform:scale(1.1);box-shadow:0 0 16px rgba(0,229,160,0.7)}
  11%,100%{opacity:0;transform:scale(0.5)}
}
@keyframes aiParcel2OnBelt{
  0%,52%{opacity:1;transform:scale(1)}
  53%,55%{opacity:1;transform:scale(1.1);box-shadow:0 0 16px rgba(0,229,160,0.7)}
  56%,100%{opacity:0;transform:scale(0.5)}
}
@keyframes aiParcelBadOnBelt{
  0%,30%{opacity:1;transform:scale(1)}
  31%,33%{opacity:1;transform:scale(1.1);box-shadow:0 0 16px rgba(232,39,58,0.75)}
  34%,100%{opacity:0;transform:scale(0.5)}
}
@keyframes aiGhostToZoneA{
  0%,11%{opacity:0;left:22%;bottom:30%}
  12%,17%{opacity:1;left:24%;bottom:42%}
  18%,21%{opacity:1;left:20%;bottom:64%}
  22%,48%{opacity:0}
}
@keyframes aiGhostToZoneB{
  0%,56%{opacity:0;left:44%;bottom:30%}
  57%,62%{opacity:1;left:48%;bottom:42%}
  63%,66%{opacity:1;left:50%;bottom:64%}
  67%,100%{opacity:0}
}
@keyframes aiGhostToReject{
  0%,35%{opacity:0;left:66%;bottom:30%}
  36%,40%{opacity:1;left:70%;bottom:42%}
  41%,44%{opacity:1;left:84%;bottom:62%}
  45%,100%{opacity:0}
}
@keyframes aiZoneAStock{
  0%,21%{opacity:0;transform:translateX(-50%) scale(0)}
  22%,48%{opacity:1;transform:translateX(-50%) scale(1)}
  49%,100%{opacity:0;transform:translateX(-50%) scale(0)}
}
@keyframes aiZoneBStock{
  0%,65%{opacity:0;transform:translateX(-50%) scale(0)}
  66%,92%{opacity:1;transform:translateX(-50%) scale(1)}
  93%,100%{opacity:0;transform:translateX(-50%) scale(0)}
}
@keyframes aiZoneRejectStock{
  0%,43%{opacity:0;transform:translateX(-50%) scale(0)}
  44%,58%{opacity:1;transform:translateX(-50%) scale(1)}
  59%,100%{opacity:0;transform:translateX(-50%) scale(0)}
}
@keyframes aiZoneAGlow{
  0%,20%,100%{box-shadow:none;border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);transform:scale(1)}
  22%,36%{box-shadow:0 0 24px rgba(0,229,160,0.55);border-color:rgba(0,229,160,0.85);background:rgba(0,166,81,0.22);transform:scale(1.06)}
}
@keyframes aiZoneBGlow{
  0%,64%,100%{box-shadow:none;border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);transform:translateX(-50%) scale(1)}
  66%,80%{box-shadow:0 0 24px rgba(10,71,224,0.55);border-color:rgba(10,71,224,0.85);background:rgba(10,71,224,0.2);transform:translateX(-50%) scale(1.06)}
}
@keyframes aiZoneRejectGlow{
  0%,42%,100%{
    box-shadow:0 0 14px rgba(232,39,58,0.45),inset 0 0 10px rgba(255,80,90,0.1);
    border-color:rgba(255,95,110,0.85);
    background:rgba(120,22,34,0.72);
    transform:scale(1);
  }
  44%,58%{
    box-shadow:0 0 32px rgba(255,70,90,0.9),inset 0 0 16px rgba(255,120,130,0.25);
    border-color:#ff5a6a;
    background:rgba(160,28,42,0.92);
    transform:scale(1.08);
  }
}
@keyframes aiSoftPanelActive{
  0%,72%,100%{opacity:0.5;transform:translateY(4px);box-shadow:none}
  74%,96%{opacity:1;transform:translateY(0);box-shadow:0 0 28px rgba(10,71,224,0.4)}
}
@keyframes aiSoftLine1{
  0%,74%,100%{opacity:0.3}
  76%,84%{opacity:1;color:#3fb950}
}
@keyframes aiSoftLine2{
  0%,78%,100%{opacity:0.3}
  80%,88%{opacity:1;color:#3fb950}
}
@keyframes aiSoftLine3{
  0%,82%,100%{opacity:0.3}
  84%,92%{opacity:1;color:#3fb950}
}
@keyframes aiSoftLine4{
  0%,86%,100%{opacity:0.3}
  88%,94%{opacity:1;color:#3fb950}
}
@keyframes aiSoftStatus{
  0%,88%,100%{opacity:0}
  90%,96%{opacity:1}
}
@keyframes aiTaskShow1{
  0%,2%{opacity:0;transform:translateY(6px)}
  4%,26%{opacity:1;transform:translateY(0)}
  28%,100%{opacity:0}
}
@keyframes aiTaskShow2{
  0%,28%,100%{opacity:0;transform:translateY(6px)}
  30%,50%{opacity:1;transform:translateY(0)}
  52%,100%{opacity:0}
}
@keyframes aiTaskShow3{
  0%,52%,100%{opacity:0;transform:translateY(6px)}
  54%,96%{opacity:1;transform:translateY(0)}
}
@keyframes aiScanBeam{
  0%,30%,52%,74%,100%{opacity:0}
  32%,35%{opacity:0.95;left:66%}
  54%,57%{opacity:0.9;left:44%}
}

/* ─── POS & PAYMENTS TAB ──────────────────────────────── */
#tab-parking.tab-panel.active{
  display:none;
  min-height:0;
  margin:0;
  padding:0;
}
#tab-pos{
  width:100%;
  max-width:100%;
  overflow:visible;
  box-sizing:border-box;
}
.pos-panel{align-items:stretch}
.pos-panel-text{
  flex:1;
  min-width:0;
}
#tab-pos .panel-text h3{
  font-size:0.9rem;
  max-width:100%;
  overflow-wrap:break-word;
}
.pos-lead{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  margin-bottom:1rem;
  max-width:100%;
}
.pos-lead-line{
  display:block;
  font-size:0.84rem;
  line-height:1.6;
  color:var(--muted);
}
.pos-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.1rem}
.pos-chips span{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  padding:5px 10px;
  border-radius:20px;
  background:rgba(0,184,148,0.08);
  border:1px solid rgba(0,184,148,0.22);
  color:var(--teal);
}
.pos-subhead{
  font-family:var(--orb);
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:0.5rem;
}
.pos-features{margin-bottom:0}

.pos-dev-visual{
  flex:0 0 320px;
  min-width:0;
  max-width:360px;
}
.pos-scene{
  position:relative;
  width:100%;
  padding:1.5rem 1rem 1.25rem;
  border-radius:14px;
  overflow:visible;
  border:1.5px solid rgba(0,184,148,0.28);
  box-shadow:0 14px 48px rgba(0,184,148,0.15);
  background:linear-gradient(165deg,#0c1828 0%,#122238 45%,#162a42 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:620px;
}
.pos-machine-stage{
  --pos-paper-space:175px;
  position:relative;
  width:250px;
  margin:0 auto;
  overflow:visible;
}
.pos-paper-zone{
  height:var(--pos-paper-space);
  position:relative;
  overflow:hidden;
  z-index:22;
  margin-bottom:-1px;
}
.pos-printer{
  position:relative;
  height:36px;
  background:linear-gradient(180deg,#f8f9fb 0%,#e8ecf1 100%);
  border-radius:14px 14px 0 0;
  border:2px solid #d5dbe3;
  border-bottom:none;
  z-index:18;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 4px 12px rgba(0,0,0,0.08);
}
.pos-printer-roll{
  position:absolute;
  top:8px;
  left:50%;
  width:56px;
  height:13px;
  border-radius:7px;
  background:repeating-linear-gradient(90deg,#ece8e0 0 4px,#d8d2c8 4px 8px);
  border:1px solid #a39e94;
  transform:translateX(-50%);
  transform-origin:center center;
}
.pos-printer-led{
  position:absolute;
  right:12px;
  top:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2a3340;
  box-shadow:inset 0 0 2px rgba(0,0,0,0.5);
}
.pos-printer-slot{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:124px;
  height:5px;
  background:#080c12;
  border-radius:2px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.9);
  z-index:2;
}
.pos-receipt-outlet{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:140px;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}
.pos-receipt-strip{
  transform:translateY(100%);
  will-change:transform;
}
.pos-receipt{
  width:140px;
  padding:10px 11px 14px;
  background:linear-gradient(180deg,#fffef9 0%,#f4f0e6 55%,#ebe6dc 100%);
  border-radius:0 0 3px 3px;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    2px 0 4px rgba(0,0,0,0.06),
    -2px 0 4px rgba(0,0,0,0.06);
  font-family:var(--mono);
  font-size:0.48rem;
  line-height:1.45;
  color:#1a1a1a;
  position:relative;
}
.pos-receipt::before{
  content:'';
  display:block;
  height:3px;
  margin:-10px -11px 8px;
  background:linear-gradient(180deg,#e8e4dc,#f5f2ea);
  border-bottom:1px dashed #ccc;
}
.pos-device-body{
  position:relative;
  z-index:10;
  background:linear-gradient(180deg,#ffffff 0%,#f3f5f8 100%);
  border:2px solid #d8dee6;
  border-radius:0 0 16px 16px;
  padding:6px;
  box-shadow:0 16px 40px rgba(0,0,0,0.14);
}
.pos-screen{
  display:flex;
  flex-direction:column;
  min-height:320px;
  height:320px;
  overflow:hidden;
  background:linear-gradient(180deg,#0d1520 0%,#111c2a 100%);
  border-radius:12px;
  border:1px solid rgba(10,71,224,0.28);
  padding:14px 12px 12px;
  box-shadow:inset 0 0 24px rgba(10,71,224,0.1);
  transition:box-shadow 0.35s ease,transform 0.15s ease;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.pos-screen:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}
.pos-rcpt-brand{
  text-align:center;
  font-weight:900;
  letter-spacing:1px;
  font-size:0.5rem;
  margin-bottom:4px;
}
.pos-rcpt-rule{
  height:1px;
  background:repeating-linear-gradient(90deg,#bbb 0 3px,transparent 3px 6px);
  margin:4px 0;
}
.pos-rcpt-row{
  display:flex;
  justify-content:space-between;
  gap:6px;
}
.pos-rcpt-row.muted{color:#666}
.pos-rcpt-row.total{
  font-weight:900;
  font-size:0.52rem;
  margin-top:2px;
}
.pos-rcpt-meta{
  text-align:center;
  font-size:0.44rem;
  color:#555;
  margin-top:3px;
}
.pos-screen-ui{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  font-family:var(--mono);
  font-size:0.72rem;
  line-height:1.2;
  color:rgba(255,255,255,0.9);
  will-change:transform,opacity;
}
.pos-slip-lines{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  padding:0;
}
.pos-slip-title{
  font-weight:900;
  color:var(--teal);
  margin:0 0 4px;
  font-size:0.78rem;
  line-height:1.15;
}
.pos-slip-row{
  display:flex;
  justify-content:space-between;
  margin:0;
  gap:8px;
  line-height:1.2;
  font-size:0.72rem;
}
.pos-slip-row.dim{color:rgba(255,255,255,0.45)}
.pos-slip-total{
  display:flex;
  justify-content:space-between;
  margin:6px 0 0;
  padding-top:6px;
  border-top:1px dashed rgba(255,255,255,0.22);
  font-weight:900;
  color:#fff;
  font-size:0.82rem;
  line-height:1.2;
}
.pos-stand{
  width:100%;
  height:14px;
  margin-top:2px;
  background:linear-gradient(180deg,#f0f3f7 0%,#e2e7ee 100%);
  border:2px solid #d8dee6;
  border-top:none;
  border-radius:0 0 12px 12px;
  box-shadow:0 8px 18px rgba(0,0,0,0.1);
}
.pos-pay-touch{
  margin-top:auto;
  width:100%;
  padding:12px 10px;
  border-radius:10px;
  font-family:var(--orb);
  font-size:0.78rem;
  font-weight:900;
  letter-spacing:1.5px;
  text-align:center;
  color:#fff;
  background:linear-gradient(180deg,#00c896 0%,#00a884 100%);
  box-shadow:0 4px 16px rgba(0,184,148,0.4);
  pointer-events:none;
}
.pos-machine-stage.paying .pos-screen{
  transform:scale(0.985);
  box-shadow:inset 0 0 28px rgba(0,184,148,0.35);
}
.pos-machine-stage.paying .pos-pay-touch{
  filter:brightness(0.9);
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.25);
}
.pos-approved{
  position:absolute;
  top:1rem;
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  font-family:var(--orb);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:1px;
  color:#3fb950;
  background:rgba(63,185,80,0.12);
  border:1px solid rgba(63,185,80,0.45);
  padding:6px 14px;
  border-radius:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.35s ease,transform 0.35s ease;
  z-index:10;
  white-space:nowrap;
}
.pos-approved.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.pos-scene-caption{
  margin:0.65rem 0 0;
  font-family:var(--mono);
  font-size:0.5rem;
  letter-spacing:1px;
  color:rgba(255,255,255,0.4);
  text-align:center;
}
.pos-machine-stage.printing .pos-screen-ui{
  animation:posScreenSlideUp 3.2s ease-in-out forwards;
}
.pos-machine-stage.printing .pos-screen{
  box-shadow:inset 0 0 22px rgba(0,184,148,0.28);
}
.pos-machine-stage.printing .pos-printer-roll{
  animation:posRollFeed 3.4s linear forwards;
}
.pos-machine-stage.printing .pos-printer-led{
  animation:posLedBlink 0.45s ease-in-out infinite;
}
.pos-machine-stage.printing .pos-receipt-strip{
  animation:posReceiptRise 3.2s linear forwards;
}
.pos-machine-stage.printing .pos-receipt::after{
  content:'';
  position:absolute;
  left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,transparent,rgba(0,184,148,0.45),transparent);
  animation:posPrintHead 0.35s linear infinite;
}
.pos-machine-stage:not(.printing) .pos-receipt-strip{
  transform:translateY(100%);
}
@keyframes posScreenSlideUp{
  0%{transform:translateY(0);opacity:1}
  14%{transform:translateY(-10px);opacity:1}
  100%{transform:translateY(-92px);opacity:0.15}
}
@keyframes posReceiptRise{
  0%{transform:translateY(100%)}
  100%{transform:translateY(0)}
}
@keyframes posRollFeed{
  0%{transform:translateX(-50%) rotate(0deg)}
  100%{transform:translateX(-50%) rotate(-720deg)}
}
@keyframes posLedBlink{
  0%,100%{background:#2a3340;box-shadow:none}
  50%{background:#3fb950;box-shadow:0 0 8px rgba(63,185,80,0.85)}
}
@keyframes posPrintHead{
  0%{top:0;opacity:0.2}
  50%{opacity:1}
  100%{top:100%;opacity:0.2}
}

/* ─── CHALLAN TAB ─────────────────────────────────────── */
#tab-challan{
  width:100%;
  max-width:100%;
  overflow:visible;
}
.challan-panel{
  align-items:stretch;
  gap:2rem;
  padding:1.75rem 2rem;
}
.challan-panel-text{
  flex:1 1 44%;
  min-width:240px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.challan-lead{
  font-size:0.88rem;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:1rem;
}
.challan-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:1.1rem;
}
.challan-chips span{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  padding:5px 10px;
  border-radius:20px;
  background:rgba(232,39,58,0.08);
  border:1px solid rgba(232,39,58,0.22);
  color:#c41e2a;
}
.challan-features{margin-bottom:0}
.challan-dev-visual{
  flex:1 1 50%;
  min-width:0;
  max-width:400px;
}
.challan-scene{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(165deg,#1a1520 0%,#12182a 50%,#0f1420 100%);
  border:1.5px solid rgba(232,39,58,0.25);
  box-shadow:0 14px 48px rgba(232,39,58,0.12);
}
#challanCanvas{
  display:block;
  width:100%;
  height:auto;
}
.challan-scene-ui{
  position:absolute;
  top:8px;
  left:8px;
  right:8px;
  pointer-events:none;
}
.challan-live-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:0.52rem;
  font-weight:900;
  letter-spacing:0.8px;
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  background:rgba(0,0,0,0.45);
}
.challan-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  animation:challanPulse 1s ease infinite;
  box-shadow:0 0 8px var(--red);
}
@keyframes challanPulse{
  0%,100%{opacity:1}
  50%{opacity:0.35}
}
.challan-ticket{
  display:flex;
  align-items:stretch;
  gap:10px;
  margin:0;
  padding:10px 12px;
  background:rgba(15,20,35,0.92);
  border-top:1.5px solid rgba(232,39,58,0.35);
  opacity:0.4;
  transform:translateY(8px);
  transition:opacity 0.45s ease,transform 0.45s ease;
}
.challan-ticket-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.challan-ticket-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.challan-ticket.visible{
  opacity:1;
  transform:translateY(0);
}
.challan-ticket.issued{
  border-top-color:rgba(0,166,81,0.5);
  box-shadow:0 -4px 20px rgba(0,166,81,0.15);
}
.challan-photo-wrap{
  position:relative;
  flex-shrink:0;
  width:88px;
  border-radius:8px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.2);
  background:#0a0e14;
}
.challan-photo-wrap.flash{
  animation:challanPhotoFlash 0.35s ease;
}
@keyframes challanPhotoFlash{
  0%,100%{border-color:rgba(255,255,255,0.2)}
  50%{border-color:#fff;box-shadow:0 0 20px rgba(255,255,255,0.8)}
}
#challanPhotoCanvas{
  display:block;
  width:88px;
  height:66px;
}
.challan-photo-tag{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  font-family:var(--mono);
  font-size:0.42rem;
  font-weight:900;
  letter-spacing:0.6px;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  background:rgba(232,39,58,0.85);
  padding:2px 0;
}
.challan-ticket-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  justify-content:center;
}
.challan-plate{
  font-family:var(--orb);
  font-size:0.85rem;
  font-weight:900;
  letter-spacing:2px;
  color:#fff;
  background:#1a2a5e;
  border:2px solid #f5c518;
  padding:3px 8px;
  border-radius:4px;
  width:fit-content;
}
.challan-violation{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#ff6b7a;
}
.challan-loc{
  font-family:var(--mono);
  font-size:0.52rem;
  font-weight:800;
  color:#93c5fd;
  line-height:1.4;
}
.challan-pin{margin-right:2px}
.challan-fine{
  flex:1;
  min-width:0;
  font-family:var(--mono);
  font-size:0.72rem;
  font-weight:900;
  line-height:1.35;
  letter-spacing:0.3px;
  color:#ff2d3d;
  background:rgba(232,39,58,0.12);
  border:2px solid rgba(255,45,61,0.55);
  border-radius:8px;
  padding:8px 10px;
  text-shadow:0 0 12px rgba(255,45,61,0.35);
  opacity:0;
  transform:scale(0.96);
  transition:opacity 0.35s ease,transform 0.35s ease;
}
.challan-fine.visible{
  opacity:1;
  transform:scale(1);
}
.challan-ticket.issued .challan-fine{
  border-color:rgba(255,80,90,0.75);
  box-shadow:0 0 14px rgba(232,39,58,0.25);
}
.challan-issued{
  align-self:center;
  font-family:var(--mono);
  font-size:0.5rem;
  font-weight:900;
  letter-spacing:0.8px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  color:rgba(255,255,255,0.35);
  padding:4px 0;
  transition:color 0.35s,background 0.35s;
}
.challan-ticket.issued .challan-issued{
  color:#fff;
  background:var(--green);
  border-radius:4px;
  padding:8px 4px;
}

/* ─── CLOUD TAB ───────────────────────────────────────── */
#tab-cloud{
  width:100%;
  max-width:100%;
  overflow:visible;
}
.cloud-panel{
  align-items:stretch;
  gap:2rem;
  padding:1.75rem 2rem;
}
.cloud-panel-text{
  flex:1 1 44%;
  min-width:240px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.cloud-lead{
  font-size:0.88rem;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:1rem;
}
.cloud-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:1.1rem;
}
.cloud-chips span{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  padding:5px 10px;
  border-radius:20px;
  background:rgba(10,71,224,0.08);
  border:1px solid rgba(10,71,224,0.22);
  color:var(--blue);
}
.cloud-features{margin-bottom:0}
.cloud-dev-visual{
  flex:1 1 54%;
  min-width:0;
  max-width:580px;
}
.cloud-scene{
  width:100%;
  min-height:340px;
  padding:1.15rem 1.15rem 1rem;
  border-radius:14px;
  background:linear-gradient(165deg,#0a1220 0%,#101c30 50%,#0d1728 100%);
  border:1.5px solid rgba(10,71,224,0.28);
  box-shadow:0 14px 48px rgba(10,71,224,0.14);
  font-family:var(--mono);
}
.cloud-dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:0.75rem;
}
.cloud-dash-title{
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
}
.cloud-live-pill{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:0.52rem;
  font-weight:900;
  letter-spacing:0.8px;
  color:#fff;
}
.cloud-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  animation:cloudPulse 1.45s ease infinite;
  box-shadow:0 0 8px var(--green);
}
@keyframes cloudPulse{
  0%,100%{opacity:1}
  50%{opacity:0.35}
}
.cloud-pipeline{
  display:flex;
  align-items:center;
  gap:0;
  margin-bottom:0.45rem;
}
.cloud-pipe-step{
  flex:1;
  text-align:center;
  font-size:0.48rem;
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  padding:6px 4px;
  border-radius:8px;
  border:1px solid transparent;
  transition:transform 0.52s ease,color 0.52s ease,background 0.52s ease,border-color 0.52s ease,box-shadow 0.52s ease;
  transform:scale(1);
  transform-origin:center center;
  position:relative;
  z-index:0;
}
.cloud-pipe-icon{
  display:block;
  font-size:0.85rem;
  margin-bottom:2px;
  transition:transform 0.52s ease,font-size 0.52s ease;
}
.cloud-pipe-step.active{
  color:#fff;
  background:rgba(10,71,224,0.35);
  border-color:rgba(96,165,250,0.5);
  box-shadow:0 0 14px rgba(10,71,224,0.35);
  transform:scale(1.14);
  z-index:2;
}
.cloud-pipe-step.active .cloud-pipe-icon{
  transform:scale(1.1);
  font-size:0.95rem;
}
.cloud-pipe-step.done{
  color:#8dffd0;
  border-color:rgba(0,255,160,0.35);
}
.cloud-pipe-line{
  width:12px;
  height:2px;
  background:rgba(255,255,255,0.15);
  flex-shrink:0;
  transition:background 0.52s ease;
}
.cloud-pipe-line.active{background:var(--teal)}
.cloud-pipe-status{
  margin:0 0 0.75rem;
  font-size:0.5rem;
  font-weight:700;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.55);
  text-align:center;
}
.cloud-widgets{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:8px;
}
.cloud-widget{
  padding:8px 8px 7px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  transition:transform 0.52s ease,border-color 0.52s ease,box-shadow 0.52s ease,background 0.52s ease;
  transform:scale(1);
  transform-origin:center center;
  position:relative;
  z-index:0;
}
.cloud-widget.highlight{
  border-color:rgba(96,165,250,0.55);
  background:rgba(10,71,224,0.18);
  box-shadow:0 0 20px rgba(10,71,224,0.32);
  transform:scale(1.1);
  z-index:2;
}
.cloud-widget.highlight .cloud-scale-bars span{
  filter:brightness(1.15);
}
.cloud-widget.highlight #cloudChartCanvas{
  transform:scale(1.06);
  transform-origin:center bottom;
}
.cloud-widget-label{
  display:block;
  font-size:0.46rem;
  font-weight:900;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin-bottom:5px;
}
.cloud-widget-val{
  display:block;
  font-size:0.48rem;
  font-weight:800;
  color:#a5d8ff;
  margin-top:4px;
}
.cloud-scale-bars{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:4px;
  height:42px;
}
.cloud-scale-bars span{
  flex:1;
  height:var(--h,40%);
  min-height:4px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#38bdf8,#0a47e0);
  transition:height 0.75s cubic-bezier(0.22,1,0.36,1);
}
.cloud-shield{
  font-size:1.4rem;
  text-align:center;
  line-height:1;
  transition:transform 0.52s ease,filter 0.52s ease;
}
.cloud-widget.highlight .cloud-shield{
  transform:scale(1.2);
  filter:drop-shadow(0 0 10px rgba(0,255,160,0.65));
}
#cloudChartCanvas{
  display:block;
  width:100%;
  height:56px;
  border-radius:4px;
  transition:transform 0.52s ease;
}
.cloud-alert-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:42px;
}
.cloud-alert-item{
  font-size:0.44rem;
  font-weight:800;
  letter-spacing:0.3px;
  padding:4px 6px;
  border-radius:5px;
  animation:cloudAlertIn 0.55s ease;
}
.cloud-alert-item.warn{
  background:rgba(245,158,11,0.2);
  border:1px solid rgba(245,158,11,0.45);
  color:#fcd34d;
}
.cloud-alert-item.ok{
  background:rgba(0,166,81,0.2);
  border:1px solid rgba(0,255,160,0.4);
  color:#8dffd0;
}
.cloud-alert-item.info{
  background:rgba(10,71,224,0.25);
  border:1px solid rgba(96,165,250,0.4);
  color:#93c5fd;
}
@keyframes cloudAlertIn{
  from{opacity:0;transform:translateX(8px)}
  to{opacity:1;transform:translateX(0)}
}
.cloud-logs{
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  background:#0d1117;
}
.cloud-logs-head{
  padding:5px 8px;
  font-size:0.46rem;
  font-weight:900;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
  background:#161b22;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.cloud-logs-body{
  max-height:72px;
  overflow:hidden;
  padding:6px 8px;
  font-size:0.44rem;
  line-height:1.55;
  color:#8b949e;
}
.cloud-log-line{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  animation:cloudLogIn 0.5s ease;
}
.cloud-log-line.ok{color:#3fb950}
.cloud-log-line.warn{color:#d29922}
.cloud-log-line.info{color:#79c0ff}
@keyframes cloudLogIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ─── ATTENDANCE TAB ──────────────────────────────────── */
#tab-attend{
  width:100%;
  max-width:100%;
  overflow:visible;
}
.attend-panel{
  align-items:stretch;
  gap:2rem;
  padding:1.75rem 2rem;
}
.attend-panel-text{
  flex:1 1 46%;
  min-width:240px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.attend-lead{
  font-size:0.88rem;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:1rem;
}
.attend-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:1.1rem;
}
.attend-chips span{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  padding:5px 10px;
  border-radius:20px;
  background:rgba(0,184,148,0.08);
  border:1px solid rgba(0,184,148,0.25);
  color:var(--teal);
}
.attend-features{margin-bottom:0}
.attend-visual-wrap{
  flex:1 1 48%;
  min-width:0;
  max-width:320px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.attend-dev-visual{
  width:100%;
  display:flex;
  justify-content:center;
}
.attend-store-badges{margin-top:0}
.attend-store-badges .store-badge{
  text-decoration:none;
  color:#fff;
  transition:transform .2s ease,box-shadow .2s ease;
}
.attend-store-badges .store-badge:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,0.2);
}
.attend-scene{
  width:100%;
  max-width:280px;
  padding:1rem 0.85rem 0.75rem;
  border-radius:14px;
  background:linear-gradient(165deg,#0a1220 0%,#101c30 50%,#0d1728 100%);
  border:1.5px solid rgba(10,71,224,0.28);
  box-shadow:0 14px 48px rgba(10,71,224,0.14);
}
.attend-phone{
  margin:0 auto;
  width:200px;
  padding:10px 10px 16px;
  border-radius:32px;
  background:linear-gradient(160deg,#f4f6fa 0%,#dce3ef 100%);
  border:2px solid #c5cedd;
  box-shadow:0 18px 40px rgba(10,30,80,0.22),inset 0 1px 0 rgba(255,255,255,0.9);
}
.attend-phone-speaker{
  width:56px;
  height:5px;
  margin:0 auto 8px;
  border-radius:10px;
  background:#9aa8bc;
}
.attend-phone-screen{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:#0b0f18;
  border:2px solid #1e2a3d;
}
#attendFaceCanvas{
  display:block;
  width:100%;
  height:auto;
  vertical-align:top;
}
.attend-screen-ui{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:8px 8px 10px;
  pointer-events:none;
}
.attend-screen-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.attend-punch-title{
  margin:0;
  width:100%;
  text-align:center;
  font-family:var(--orb);
  font-size:0.95rem;
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.65);
  padding:6px 0 2px;
}
.attend-cam-label{
  font-family:var(--mono);
  font-size:0.52rem;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#fff;
  padding:4px 10px;
  border-radius:12px;
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.2);
}
.attend-hint{
  align-self:center;
  margin:auto 0 0;
  text-align:center;
  font-family:var(--mono);
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:0.7px;
  text-transform:uppercase;
  color:#fff;
  padding:7px 12px;
  border-radius:8px;
  background:rgba(0,0,0,0.62);
  border:1px solid rgba(255,255,255,0.18);
  text-shadow:0 1px 6px rgba(0,0,0,0.8);
  max-width:92%;
}
.attend-geo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(0,166,81,0.35);
  border:1.5px solid rgba(0,255,160,0.5);
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#e8fff5;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.35s ease,transform 0.35s ease;
}
.attend-geo.show{
  opacity:1;
  transform:translateY(0);
}
.attend-geo.warn{
  background:rgba(245,158,11,0.2);
  border-color:rgba(245,158,11,0.45);
  color:#fcd34d;
}
.attend-phone-btn{
  width:42px;
  height:42px;
  margin:10px auto 0;
  border-radius:50%;
  border:2px solid #b8c4d4;
  background:linear-gradient(180deg,#eef2f8,#d4dce8);
}
.attend-live-stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:0.7rem;
  font-family:var(--mono);
  font-size:0.62rem;
}
.attend-live-pill{
  display:flex;
  align-items:center;
  gap:6px;
  color:#fff;
  font-weight:900;
  letter-spacing:1px;
}
.attend-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#f59e0b;
  animation:attendPulse 1s ease infinite;
  box-shadow:0 0 8px #f59e0b;
}
.attend-live-dot.verified{
  background:var(--green);
  box-shadow:0 0 8px var(--green);
}
.attend-verified{
  font-weight:900;
  font-size:0.65rem;
  letter-spacing:0.8px;
  color:#6dffd4;
  text-shadow:0 0 12px rgba(0,255,160,0.45);
  opacity:0;
  transform:scale(0.9);
  transition:opacity 0.3s ease,transform 0.3s ease;
}
.attend-verified.show{
  opacity:1;
  transform:scale(1);
}
@keyframes attendPulse{
  0%,100%{opacity:1}
  50%{opacity:0.35}
}

/* ─── SOCIETY / ESTATE TAB ────────────────────────────── */
#tab-society{
  width:100%;
  max-width:100%;
  overflow:visible;
}
.society-panel{
  align-items:stretch;
  gap:2rem;
  padding:1.75rem 2rem;
}
.society-panel-text{
  flex:1 1 46%;
  min-width:240px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.society-lead{
  font-size:0.88rem;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:1rem;
}
.society-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:1.1rem;
}
.society-chips span{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  padding:5px 10px;
  border-radius:20px;
  background:rgba(0,184,148,0.08);
  border:1px solid rgba(0,184,148,0.28);
  color:#0d9b7a;
}
.society-features{margin-bottom:0}
.society-visual-wrap{
  flex:1 1 48%;
  min-width:0;
  max-width:320px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.society-dev-visual{
  width:100%;
  display:flex;
  justify-content:center;
}
.society-store-badges{margin-top:0}
.society-store-badges .store-badge{
  text-decoration:none;
  color:#fff;
  transition:transform .2s ease,box-shadow .2s ease;
}
.society-store-badges .store-badge:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,0.2);
}
.society-scene{
  width:100%;
  max-width:280px;
  padding:1rem 0.85rem 0.75rem;
  border-radius:14px;
  background:linear-gradient(165deg,#071510 0%,#0f241c 50%,#0a1a14 100%);
  border:1.5px solid rgba(0,184,148,0.32);
  box-shadow:0 14px 48px rgba(0,184,148,0.12);
}
.society-phone{
  margin:0 auto;
  width:200px;
  padding:10px 10px 16px;
  border-radius:32px;
  background:linear-gradient(160deg,#f4f6fa 0%,#dce3ef 100%);
  border:2px solid #c5cedd;
  box-shadow:0 18px 40px rgba(10,50,40,0.2),inset 0 1px 0 rgba(255,255,255,0.9);
}
.society-phone-speaker{
  width:56px;
  height:5px;
  margin:0 auto 8px;
  border-radius:10px;
  background:#9aa8bc;
}
.society-phone-screen{
  position:relative;
  min-height:300px;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg,#0e1a16 0%,#0a1210 100%);
  border:2px solid #1a2e28;
}
.society-phone-btn{
  width:42px;
  height:42px;
  margin:10px auto 0;
  border-radius:50%;
  border:2px solid #b8c4d4;
  background:linear-gradient(180deg,#eef2f8,#d4dce8);
}
.soc-screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:10px 10px 12px;
  opacity:0;
  transform:translateX(14px) scale(0.98);
  pointer-events:none;
  transition:opacity 0.4s ease,transform 0.4s ease;
}
.soc-screen.active{
  opacity:1;
  transform:translateX(0) scale(1);
  pointer-events:auto;
}
.soc-app-bar{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--orb);
  font-size:0.72rem;
  font-weight:900;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:#e8fff8;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(0,184,148,0.2);
}
.soc-app-icon{font-size:1rem;line-height:1}
.soc-gate-view{
  position:relative;
  flex:1;
  min-height:120px;
  margin:4px 0 8px;
  border-radius:10px;
  background:linear-gradient(180deg,#1a2e28 0%,#0d1814 100%);
  border:1px solid rgba(0,184,148,0.15);
  overflow:hidden;
}
.soc-gate-pole{
  position:absolute;
  left:18px;
  bottom:0;
  width:8px;
  height:72px;
  background:linear-gradient(90deg,#4a5568,#9aa8bc);
  border-radius:4px 4px 0 0;
  z-index:2;
}
.soc-barrier{
  position:absolute;
  left:22px;
  bottom:58px;
  width:72px;
  height:6px;
  background:repeating-linear-gradient(90deg,#f5c518 0,#f5c518 8px,#1a1a1a 8px,#1a1a1a 16px);
  border-radius:3px;
  transform-origin:left center;
  transform:rotate(0deg);
  transition:transform 0.55s cubic-bezier(0.34,1.2,0.64,1);
  z-index:3;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.soc-screen-gate.gate-entry .soc-barrier,
.soc-screen-gate.gate-exit .soc-barrier{
  transform:rotate(-72deg);
}
.soc-car-track{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:0 8px 14px;
}
.soc-car{
  font-size:2rem;
  line-height:1;
  transform:translateX(-120%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
.soc-screen-gate.gate-entry .soc-car{
  animation:socCarIn 1.6s ease forwards;
}
.soc-screen-gate.gate-exit .soc-car{
  animation:socCarOut 1.6s ease forwards;
}
@keyframes socCarIn{
  0%{transform:translateX(-120%)}
  55%{transform:translateX(28%)}
  100%{transform:translateX(22%)}
}
@keyframes socCarOut{
  0%{transform:translateX(22%)}
  100%{transform:translateX(130%)}
}
.soc-plate{
  font-family:var(--orb);
  font-size:0.68rem;
  font-weight:900;
  letter-spacing:1.5px;
  color:#1a1a1a;
  background:#f5c518;
  border:2px solid #1a2a5e;
  padding:4px 10px;
  border-radius:4px;
  width:fit-content;
  margin:0 auto 8px;
  opacity:0;
  transform:scale(0.9);
  transition:opacity 0.35s ease,transform 0.35s ease;
}
.soc-screen-gate.gate-entry .soc-plate,
.soc-screen-gate.gate-exit .soc-plate{
  opacity:1;
  transform:scale(1);
}
.soc-gate-badge{
  text-align:center;
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.8px;
  padding:6px 12px;
  border-radius:8px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.35s ease,transform 0.35s ease,background 0.3s,color 0.3s;
}
.soc-gate-badge.entry{
  color:#d1fae5;
  background:rgba(0,166,81,0.35);
  border:1.5px solid rgba(0,255,160,0.45);
}
.soc-gate-badge.exit{
  color:#fef3c7;
  background:rgba(245,158,11,0.25);
  border:1.5px solid rgba(251,191,36,0.5);
}
.soc-screen-gate.gate-entry .soc-gate-badge.entry,
.soc-screen-gate.gate-exit .soc-gate-badge.exit{
  opacity:1;
  transform:translateY(0);
}
.soc-screen-gate.gate-exit .soc-gate-badge.entry{opacity:0}
.soc-visitor-card{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:10px 8px;
  border-radius:12px;
  background:rgba(0,184,148,0.08);
  border:1px solid rgba(0,184,148,0.22);
}
.soc-visitor-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--orb);
  font-size:0.85rem;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#0a7c59,#00b894);
  margin-bottom:8px;
}
.soc-visitor-name{
  margin:0 0 4px;
  font-family:var(--orb);
  font-size:0.82rem;
  font-weight:900;
  color:#fff;
}
.soc-visitor-flat,
.soc-visitor-host{
  margin:0 0 6px;
  font-family:var(--mono);
  font-size:0.52rem;
  font-weight:700;
  color:rgba(255,255,255,0.65);
}
.soc-qr{
  position:relative;
  width:72px;
  height:72px;
  margin:8px 0;
  border-radius:8px;
  background:#fff;
  border:2px solid #0a7c59;
  overflow:hidden;
}
.soc-qr-grid{
  position:absolute;
  inset:8px;
  background:
    linear-gradient(90deg,#111 2px,transparent 2px) 0 0/12px 12px,
    linear-gradient(#111 2px,transparent 2px) 0 0/12px 12px;
  opacity:0.85;
}
.soc-qr-scan{
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,#00b894,transparent);
  box-shadow:0 0 10px #00b894;
  animation:socQrScan 1.8s ease-in-out infinite;
}
.soc-screen-visitor.active .soc-qr-scan{animation-play-state:running}
@keyframes socQrScan{
  0%,100%{top:8px;opacity:0.6}
  50%{top:calc(100% - 12px);opacity:1}
}
.soc-visitor-stamp{
  font-family:var(--orb);
  font-size:0.7rem;
  font-weight:900;
  letter-spacing:2px;
  color:#00ffb0;
  border:2px solid #00ffb0;
  padding:4px 14px;
  border-radius:4px;
  transform:rotate(-8deg) scale(1.4);
  opacity:0;
  transition:opacity 0.35s ease,transform 0.4s cubic-bezier(0.34,1.4,0.64,1);
}
.soc-screen-visitor.stamp-show .soc-visitor-stamp{
  opacity:1;
  transform:rotate(-8deg) scale(1);
}
.soc-alert-card{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:14px 10px;
  border-radius:12px;
  background:rgba(232,39,58,0.1);
  border:1.5px solid rgba(255,80,90,0.35);
}
.soc-alert-bell{
  font-size:2rem;
  margin-bottom:6px;
  animation:socBellShake 0.9s ease-in-out infinite;
}
.soc-screen-maint.active .soc-alert-bell{animation-play-state:running}
@keyframes socBellShake{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-12deg)}
  75%{transform:rotate(12deg)}
}
.soc-alert-title{
  margin:0 0 4px;
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:#ff8a96;
}
.soc-alert-amt{
  margin:0 0 6px;
  font-family:var(--orb);
  font-size:1.35rem;
  font-weight:900;
  color:#ff4d5e;
  text-shadow:0 0 16px rgba(255,45,61,0.35);
}
.soc-alert-due,
.soc-alert-note{
  margin:0 0 6px;
  font-family:var(--mono);
  font-size:0.52rem;
  font-weight:700;
  color:rgba(255,255,255,0.6);
}
.soc-alert-btn{
  margin-top:auto;
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,#e8273a,#ff4d5e);
  border:none;
  border-radius:8px;
  padding:10px 20px;
  cursor:default;
  animation:socBtnPulse 1.2s ease infinite;
}
@keyframes socBtnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,39,58,0.45)}
  50%{box-shadow:0 0 0 8px rgba(232,39,58,0)}
}
.soc-pay-card{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 10px;
  border-radius:12px;
  background:rgba(10,71,224,0.12);
  border:1px solid rgba(10,71,224,0.28);
}
.soc-pay-label{
  margin:0 0 4px;
  font-family:var(--mono);
  font-size:0.52rem;
  font-weight:800;
  color:rgba(255,255,255,0.55);
  text-transform:uppercase;
  letter-spacing:0.6px;
}
.soc-pay-amt{
  margin:0 0 12px;
  font-family:var(--orb);
  font-size:1.4rem;
  font-weight:900;
  color:#fff;
}
.soc-upi{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(0,0,0,0.25);
  margin-bottom:12px;
}
.soc-upi-icon{
  font-family:var(--mono);
  font-size:0.5rem;
  font-weight:900;
  color:#fff;
  background:#5f259f;
  padding:4px 6px;
  border-radius:4px;
}
.soc-upi-id{
  font-family:var(--mono);
  font-size:0.55rem;
  font-weight:800;
  color:#c4b5fd;
}
.soc-pay-btn{
  width:100%;
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,#0a7c59,#00b894);
  border:none;
  border-radius:8px;
  padding:11px;
  cursor:default;
  transition:transform 0.2s,opacity 0.3s;
}
.soc-screen-pay.pay-done .soc-pay-btn{
  opacity:0.45;
  transform:scale(0.96);
}
.soc-pay-success{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  color:#6dffd4;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.4s ease,transform 0.4s ease;
}
.soc-screen-pay.pay-done .soc-pay-success{
  opacity:1;
  transform:translateY(0);
}
.soc-pay-check{
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:#fff;
  font-size:0.75rem;
}
.society-live-stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:0.7rem;
  font-family:var(--mono);
  font-size:0.62rem;
}
.society-live-pill{
  display:flex;
  align-items:center;
  gap:6px;
  color:#e8fff8;
  font-weight:900;
  letter-spacing:0.6px;
}
.society-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#00b894;
  animation:societyPulse 1s ease infinite;
  box-shadow:0 0 8px #00b894;
}
@keyframes societyPulse{
  0%,100%{opacity:1}
  50%{opacity:0.35}
}
.society-dots{
  display:flex;
  gap:5px;
}
.society-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:background 0.3s,transform 0.3s;
}
.society-dots span.active{
  background:#00b894;
  transform:scale(1.2);
  box-shadow:0 0 8px rgba(0,184,148,0.6);
}

/* Society pricing (below panel content) */
#tab-society .society-pricing{
  position:relative;
  margin:0 1.25rem 1.5rem;
  border-radius:20px;
  overflow:hidden;
  background:#0a0a0f;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 50px rgba(10,30,80,0.2);
}
.society-pricing-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.society-pricing-grid-lines{
  position:absolute;
  inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(58,58,58,0.15) 1px,transparent 1px);
  background-size:70px 80px;
  opacity:0.35;
}
.society-pricing-glow{
  position:absolute;
  left:10%;
  right:10%;
  top:0;
  height:100%;
  background:radial-gradient(circle at center,rgba(32,108,232,0.55) 0%,transparent 70%);
  opacity:0.55;
  mix-blend-mode:multiply;
}
.society-pricing-inner{
  position:relative;
  z-index:1;
  padding:2rem 1.25rem 1.5rem;
}
.society-pricing-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 1.5rem;
}
.society-pricing-title{
  margin:0 0 0.5rem;
  font-family:var(--orb);
  font-size:clamp(1.1rem,2.2vw,1.45rem);
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#fff;
}
.society-pricing-sub{
  margin:0 0 1.25rem;
  font-size:0.82rem;
  line-height:1.65;
  color:rgba(255,255,255,0.65);
}
.society-pricing-switch{
  position:relative;
  display:inline-flex;
  padding:4px;
  border-radius:999px;
  background:#171717;
  border:1px solid #404040;
}
.society-period-btn{
  position:relative;
  z-index:2;
  border:none;
  background:transparent;
  color:#d1d5db;
  font-family:var(--lato);
  font-size:0.78rem;
  font-weight:700;
  padding:0.55rem 1.25rem;
  border-radius:999px;
  cursor:pointer;
  transition:color 0.2s;
}
.society-period-btn.active{color:#fff}
.society-save-badge{
  margin-left:4px;
  font-size:0.62rem;
  font-weight:800;
  color:#93c5fd;
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.society-period-indicator{
  position:absolute;
  top:4px;
  left:4px;
  width:calc(50% - 4px);
  height:calc(100% - 8px);
  border-radius:999px;
  background:linear-gradient(to top,#2563eb,#3b82f6);
  border:2px solid #2563eb;
  box-shadow:0 4px 16px rgba(37,99,235,0.45);
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
  z-index:1;
}
.society-period-indicator.is-yearly{transform:translateX(100%)}
.society-pricing-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0.85rem;
  max-width:920px;
  margin:0 auto;
}
.society-price-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.15rem 1rem 1rem;
  border-radius:14px;
  border:1px solid #404040;
  background:linear-gradient(135deg,#171717 0%,#262626 50%,#171717 100%);
  color:#fff;
  text-align:left;
}
.society-price-card-popular{
  border-color:rgba(59,130,246,0.55);
  box-shadow:0 -8px 40px rgba(9,0,255,0.25);
  z-index:2;
  transform:scale(1.02);
}
.society-popular-badge{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:0.55rem;
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:20px;
  background:linear-gradient(to top,#3b82f6,#2563eb);
  color:#fff;
  white-space:nowrap;
}
.society-plan-name{
  margin:0 0 0.35rem;
  font-size:1.35rem;
  font-weight:700;
  color:#fff;
}
.society-plan-desc{
  margin:0 0 0.85rem;
  font-size:0.72rem;
  line-height:1.5;
  color:rgba(255,255,255,0.6);
  min-height:2.2em;
}
.society-plan-price{
  display:flex;
  align-items:baseline;
  gap:2px;
  margin-bottom:0.25rem;
}
.society-currency{
  font-size:1.1rem;
  font-weight:600;
  color:#fff;
}
.society-amount{
  font-size:1.85rem;
  font-weight:700;
  letter-spacing:-0.5px;
  color:#fff;
  transition:opacity 0.2s;
}
.society-period-label{
  font-size:0.78rem;
  color:rgba(255,255,255,0.55);
  margin-left:2px;
}
.society-plan-cta{
  width:100%;
  margin:0.75rem 0 0.85rem;
  padding:0.7rem 1rem;
  border-radius:10px;
  font-family:var(--lato);
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform 0.2s,box-shadow 0.2s;
}
.society-plan-cta:active{transform:scale(0.98)}
.society-plan-cta-primary{
  border:1px solid #3b82f6;
  background:linear-gradient(to top,#3b82f6,#2563eb);
  color:#fff;
  box-shadow:0 6px 20px rgba(37,99,235,0.35);
}
.society-plan-cta-outline{
  border:1px solid #525252;
  background:linear-gradient(to top,#0a0a0a,#404040);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.society-plan-includes{
  padding-top:0.75rem;
  border-top:1px solid #404040;
  flex:1;
}
.society-includes-title{
  margin:0 0 0.55rem;
  font-size:0.78rem;
  font-weight:700;
  color:#fff;
}
.society-plan-includes ul{
  list-style:none;
  margin:0;
  padding:0;
}
.society-plan-includes li{
  position:relative;
  padding-left:1rem;
  margin-bottom:0.4rem;
  font-size:0.68rem;
  line-height:1.45;
  color:rgba(255,255,255,0.72);
}
.society-plan-includes li::before{
  content:'';
  position:absolute;
  left:0;
  top:0.45em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#737373;
}
.society-pricing-note{
  margin:1rem auto 0;
  max-width:720px;
  text-align:center;
  font-size:0.65rem;
  line-height:1.55;
  color:rgba(255,255,255,0.45);
}
@media(max-width:900px){
  #tab-society .society-pricing{margin:0 0.75rem 1.25rem}
  .society-pricing-cards{grid-template-columns:1fr;max-width:320px}
  .society-price-card-popular{transform:none}
}

/* ─── COFFEE VENDING TAB ──────────────────────────────── */
#tab-coffee{
  width:100%;
  max-width:100%;
  overflow:visible;
}
.coffee-panel{
  align-items:stretch;
  gap:2rem;
  padding:1.75rem 2rem;
}
.coffee-panel-text{
  flex:1 1 46%;
  min-width:240px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.coffee-lead{
  font-size:0.88rem;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:1rem;
}
.coffee-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:1.1rem;
}
.coffee-chips span{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  padding:5px 10px;
  border-radius:20px;
  background:rgba(111,78,55,0.1);
  border:1px solid rgba(139,90,43,0.28);
  color:#8b5a2b;
}
.coffee-features{margin-bottom:0}
.coffee-dev-visual{
  flex:1 1 48%;
  min-width:0;
  max-width:360px;
  display:flex;
  justify-content:center;
}
.coffee-scene{
  position:relative;
  width:100%;
  max-width:340px;
  padding:1rem 0.85rem 0.75rem;
  border-radius:14px;
  background:linear-gradient(165deg,#1a120c 0%,#2a1c12 45%,#1e140e 100%);
  border:1.5px solid rgba(196,165,116,0.35);
  box-shadow:0 14px 48px rgba(80,50,20,0.2);
}
.coffee-layout{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:10px;
  align-items:stretch;
}
.coffee-machine{
  display:flex;
  flex-direction:column;
  padding:10px 10px 8px;
  border-radius:12px;
  background:linear-gradient(180deg,#4a3728 0%,#2e2118 55%,#1f1610 100%);
  border:2px solid #6f4e37;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.08),0 8px 24px rgba(0,0,0,0.35);
}
.coffee-m-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.coffee-m-brand{
  font-family:var(--orb);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#f5e6d3;
}
.coffee-m-led{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 8px #4ade80;
  animation:coffeeLed 1.2s ease infinite;
}
@keyframes coffeeLed{
  0%,100%{opacity:1}
  50%{opacity:0.4}
}
.coffee-m-display{
  padding:8px;
  border-radius:8px;
  background:#0a0806;
  border:1px solid rgba(196,165,116,0.25);
  margin-bottom:8px;
  text-align:center;
}
.coffee-qr{
  position:relative;
  width:64px;
  height:64px;
  margin:0 auto 6px;
  border-radius:6px;
  background:#fff;
  border:2px solid #8b5a2b;
  overflow:hidden;
}
.coffee-qr-inner{
  position:absolute;
  inset:8px;
  background:
    linear-gradient(90deg,#222 2px,transparent 2px) 0 0/10px 10px,
    linear-gradient(#222 2px,transparent 2px) 0 0/10px 10px;
}
.coffee-qr-scanline{
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,#c4a574,transparent);
  opacity:0;
}
.coffee-scene.coffee-m-scan .coffee-qr-scanline{
  opacity:1;
  animation:coffeeQrScan 1.2s ease-in-out infinite;
}
@keyframes coffeeQrScan{
  0%,100%{top:6px}
  50%{top:calc(100% - 10px)}
}
.coffee-scene.coffee-m-scan .coffee-qr{
  animation:coffeeQrPulse 0.8s ease infinite;
}
@keyframes coffeeQrPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(196,165,116,0.5)}
  50%{box-shadow:0 0 0 6px rgba(196,165,116,0)}
}
.coffee-m-status{
  margin:0;
  font-family:var(--mono);
  font-size:0.48rem;
  font-weight:800;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#c4a574;
  min-height:1.2em;
}
.coffee-scene.coffee-m-pay .coffee-m-status,
.coffee-scene.coffee-o-sync .coffee-m-status{color:#6dffa8}
.coffee-m-drinks{
  display:flex;
  gap:4px;
  margin-bottom:8px;
}
.coffee-drink{
  flex:1;
  font-family:var(--mono);
  font-size:0.4rem;
  font-weight:900;
  letter-spacing:0.3px;
  text-transform:uppercase;
  color:#d4c4b0;
  background:rgba(0,0,0,0.25);
  border:1px solid rgba(196,165,116,0.2);
  border-radius:6px;
  padding:6px 2px;
  cursor:default;
  transition:background 0.25s,border-color 0.25s,color 0.25s,transform 0.2s;
}
.coffee-scene.coffee-m-pay .coffee-drink.active,
.coffee-scene.coffee-m-brew .coffee-drink.active{
  color:#fff;
  background:rgba(196,165,116,0.35);
  border-color:#f5e6d3;
  transform:scale(1.04);
}
.coffee-m-dispenser{
  position:relative;
  height:72px;
  margin-bottom:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.coffee-nozzle{
  width:14px;
  height:10px;
  background:#3d2e22;
  border-radius:4px 4px 0 0;
  border:1px solid #6f4e37;
}
.coffee-liquid{
  width:4px;
  height:0;
  background:linear-gradient(180deg,#6f4e37,#c4a574);
  border-radius:0 0 2px 2px;
  opacity:0;
  transition:height 0.15s linear,opacity 0.2s;
}
.coffee-scene.coffee-m-brew .coffee-liquid,
.coffee-scene.coffee-o-sync .coffee-liquid{
  opacity:1;
  height:36px;
  animation:coffeePour 1.2s ease forwards;
}
@keyframes coffeePour{
  0%{height:0}
  100%{height:36px}
}
.coffee-cup-slot{
  position:absolute;
  bottom:0;
  display:flex;
  justify-content:center;
  width:100%;
}
.coffee-cup{
  width:28px;
  height:32px;
  border-radius:0 0 10px 10px;
  border:2px solid #e8dcc8;
  border-top:none;
  background:rgba(255,255,255,0.08);
  position:relative;
  overflow:hidden;
  transform:translateY(4px);
  transition:transform 0.45s ease;
}
.coffee-cup::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  background:linear-gradient(180deg,#8b5a2b,#4a3728);
  transition:height 1s ease;
}
.coffee-scene.coffee-m-brew .coffee-cup::after,
.coffee-scene.coffee-o-sync .coffee-cup::after{height:72%}
.coffee-scene.coffee-m-take .coffee-cup{
  transform:translateY(-18px) scale(1.02);
  animation:coffeeCupOut 0.6s ease forwards;
}
@keyframes coffeeCupOut{
  0%{transform:translateY(4px)}
  100%{transform:translateY(-22px)}
}
.coffee-m-tray{
  height:8px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#3d2e22,#2a1f16);
  border:1px solid #6f4e37;
}
.coffee-remote-badge{
  position:absolute;
  left:50%;
  top:42px;
  transform:translateX(-50%) translateY(-6px);
  font-family:var(--mono);
  font-size:0.42rem;
  font-weight:900;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:#fff;
  background:rgba(10,71,224,0.85);
  border:1px solid rgba(120,160,255,0.5);
  padding:4px 8px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  z-index:4;
}
.coffee-scene.coffee-o-sync .coffee-remote-badge{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  animation:coffeeBadgePop 0.4s ease;
}
@keyframes coffeeBadgePop{
  0%{transform:translateX(-50%) scale(0.85);opacity:0}
  100%{transform:translateX(-50%) scale(1);opacity:1}
}
.coffee-machine{position:relative}
.coffee-side{
  position:relative;
  min-height:200px;
}
.coffee-side-panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  transform:translateX(10px);
  pointer-events:none;
  transition:opacity 0.4s ease,transform 0.4s ease;
}
.coffee-side-panel.active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.coffee-side-title{
  margin:0 0 8px;
  font-family:var(--mono);
  font-size:0.48rem;
  font-weight:900;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#c4a574;
  text-align:center;
}
.coffee-mini-phone{
  width:72px;
  padding:8px 6px 12px;
  border-radius:16px;
  background:linear-gradient(160deg,#eef2f8,#d4dce8);
  border:2px solid #b8c4d4;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}
.coffee-scene.coffee-m-scan .coffee-mini-phone{
  animation:coffeePhoneMove 1.2s ease-in-out infinite;
}
@keyframes coffeePhoneMove{
  0%,100%{transform:translateX(-4px) rotate(-4deg)}
  50%{transform:translateX(6px) rotate(2deg)}
}
.coffee-mini-screen{
  border-radius:10px;
  background:#111;
  padding:10px 6px;
  text-align:center;
}
.coffee-mini-qr{
  display:block;
  width:36px;
  height:36px;
  margin:0 auto 6px;
  background:
    linear-gradient(90deg,#ccc 2px,transparent 2px) 0 0/8px 8px,
    linear-gradient(#ccc 2px,transparent 2px) 0 0/8px 8px;
  border:1px solid #8b5a2b;
}
.coffee-mini-label{
  font-family:var(--mono);
  font-size:0.4rem;
  font-weight:900;
  color:#6dffa8;
  letter-spacing:0.4px;
}
.coffee-scan-arrow{
  margin-top:10px;
  font-size:1.2rem;
  color:#c4a574;
  opacity:0.6;
  animation:coffeeArrow 0.9s ease infinite;
}
@keyframes coffeeArrow{
  0%,100%{transform:translateX(0);opacity:0.4}
  50%{transform:translateX(6px);opacity:1}
}
.coffee-browser{
  width:100%;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(196,165,116,0.35);
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
}
.coffee-browser-bar{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 8px;
  background:#e8eaed;
  border-bottom:1px solid #d0d4d9;
}
.coffee-browser-bar span:first-child,
.coffee-browser-bar span:nth-child(2),
.coffee-browser-bar span:nth-child(3){
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ccc;
}
.coffee-browser-bar span:nth-child(1){background:#ff5f57}
.coffee-browser-bar span:nth-child(2){background:#febc2e}
.coffee-browser-bar span:nth-child(3){background:#28c840}
.coffee-url{
  flex:1;
  font-family:var(--mono);
  font-size:0.42rem;
  font-weight:700;
  color:#555;
  text-align:center;
  margin-left:4px;
}
.coffee-browser-body{
  padding:10px 10px 12px;
  background:linear-gradient(180deg,#faf8f5,#f0ebe3);
}
.coffee-menu-head{
  margin:0 0 8px;
  font-family:var(--orb);
  font-size:0.62rem;
  font-weight:900;
  color:#4a3728;
}
.coffee-menu-list{
  list-style:none;
  margin:0 0 10px;
  padding:0;
}
.coffee-menu-list li{
  font-family:var(--mono);
  font-size:0.48rem;
  font-weight:700;
  color:#6f4e37;
  padding:6px 8px;
  border-radius:6px;
  margin-bottom:4px;
  border:1px solid transparent;
  transition:background 0.25s,border-color 0.25s;
}
.coffee-scene.coffee-o-pick .coffee-menu-list li:nth-child(2),
.coffee-scene.coffee-o-place .coffee-menu-list li:nth-child(2),
.coffee-scene.coffee-o-sync .coffee-menu-list li:nth-child(2),
.coffee-menu-list li.selected{
  background:rgba(139,90,43,0.15);
  border-color:rgba(139,90,43,0.35);
  color:#4a3728;
}
.coffee-place-btn{
  width:100%;
  font-family:var(--mono);
  font-size:0.5rem;
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,#8b5a2b,#6f4e37);
  border:none;
  border-radius:8px;
  padding:9px;
  cursor:default;
  transition:transform 0.2s,opacity 0.3s;
}
.coffee-scene.coffee-o-place .coffee-place-btn{
  animation:coffeeBtnPress 0.35s ease;
}
@keyframes coffeeBtnPress{
  0%,100%{transform:scale(1)}
  50%{transform:scale(0.96)}
}
.coffee-order-toast{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:8px;
  font-family:var(--mono);
  font-size:0.45rem;
  font-weight:900;
  color:#0d7a4e;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.35s ease,transform 0.35s ease;
}
.coffee-scene.coffee-o-place .coffee-order-toast,
.coffee-scene.coffee-o-sync .coffee-order-toast{
  opacity:1;
  transform:translateY(0);
}
.coffee-hand{
  position:absolute;
  right:12px;
  bottom:48px;
  font-size:2rem;
  transform:translateY(40px) rotate(-10deg);
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4));
  transition:opacity 0.35s ease,transform 0.5s cubic-bezier(0.34,1.2,0.64,1);
  z-index:5;
}
.coffee-scene.coffee-m-take .coffee-hand{
  opacity:1;
  transform:translateY(-8px) rotate(0deg);
}
.coffee-live-stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:0.75rem;
  font-family:var(--mono);
  font-size:0.6rem;
}
.coffee-live-pill{
  display:flex;
  align-items:center;
  gap:6px;
  color:#f5e6d3;
  font-weight:900;
  letter-spacing:0.5px;
}
.coffee-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c4a574;
  animation:coffeeLivePulse 1s ease infinite;
  box-shadow:0 0 8px #c4a574;
}
@keyframes coffeeLivePulse{
  0%,100%{opacity:1}
  50%{opacity:0.35}
}
.coffee-dots{
  display:flex;
  gap:5px;
}
.coffee-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.22);
  transition:background 0.3s,transform 0.3s;
}
.coffee-dots span.active{
  background:#c4a574;
  transform:scale(1.2);
  box-shadow:0 0 8px rgba(196,165,116,0.55);
}

/* ─── GOVT PROJECTS TAB ───────────────────────────────── */
#tab-govt{
  width:100%;
  max-width:100%;
  overflow:visible;
}
.govt-panel{
  flex-direction:column;
  align-items:stretch;
  gap:1.5rem;
  padding:1.75rem 2rem;
}
.govt-intro{
  text-align:center;
  max-width:720px;
  margin:0 auto;
}
.govt-intro .panel-tag{margin-bottom:0.75rem}
.govt-intro h3{margin-bottom:0.55rem}
.govt-lead{
  font-size:0.88rem;
  line-height:1.75;
  color:var(--muted);
  margin:0;
}
.govt-projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  width:100%;
}
.govt-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:1.25rem 1rem 1.1rem;
  border-radius:14px;
  background:#fff;
  border:1.5px solid var(--border);
  box-shadow:0 4px 18px rgba(10,71,224,0.06);
  transition:border-color 0.3s,box-shadow 0.3s,transform 0.35s cubic-bezier(0.22,1,0.36,1);
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(20px) scale(0.97);
}
.govt-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--teal));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.35s ease;
}
#tab-govt.active .govt-card,
#tab-govt.govt-replay .govt-card{
  animation:govtCardIn 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}
#tab-govt.active .govt-card:nth-child(1),
#tab-govt.govt-replay .govt-card:nth-child(1){animation-delay:0.05s}
#tab-govt.active .govt-card:nth-child(2),
#tab-govt.govt-replay .govt-card:nth-child(2){animation-delay:0.1s}
#tab-govt.active .govt-card:nth-child(3),
#tab-govt.govt-replay .govt-card:nth-child(3){animation-delay:0.15s}
#tab-govt.active .govt-card:nth-child(4),
#tab-govt.govt-replay .govt-card:nth-child(4){animation-delay:0.2s}
#tab-govt.active .govt-card:nth-child(5),
#tab-govt.govt-replay .govt-card:nth-child(5){animation-delay:0.25s}
#tab-govt.active .govt-card:nth-child(6),
#tab-govt.govt-replay .govt-card:nth-child(6){animation-delay:0.3s}
@keyframes govtCardIn{
  to{opacity:1;transform:translateY(0) scale(1)}
}
.govt-card:hover{
  border-color:rgba(10,71,224,0.35);
  box-shadow:0 12px 32px rgba(10,71,224,0.14);
  transform:translateY(-5px) scale(1.02);
}
.govt-card:hover::before{transform:scaleX(1)}
.govt-card-logo{
  width:88px;
  height:88px;
  flex-shrink:0;
  margin-bottom:0.75rem;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(145deg,#f8fafc 0%,#eef2f8 100%);
  border:1.5px solid rgba(10,71,224,0.12);
  transition:transform 0.35s ease,box-shadow 0.35s ease;
}
.govt-card-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  transform:scale(1.14);
  transition:transform 0.35s ease;
}
.govt-card:hover .govt-card-logo{
  box-shadow:0 8px 22px rgba(10,71,224,0.15);
  transform:scale(1.05);
}
.govt-card:hover .govt-card-logo img{transform:scale(1.2)}
.govt-logo-center img{
  object-fit:contain;
  object-position:center center;
  transform:scale(1.02);
  padding:4px;
  box-sizing:border-box;
}
.govt-card:hover .govt-logo-center img{transform:scale(1.08)}
.govt-card-title{
  font-family:var(--orb);
  font-size:0.72rem;
  font-weight:900;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 0.45rem;
  line-height:1.35;
}
.govt-card-desc{
  font-size:0.78rem;
  line-height:1.6;
  color:var(--muted);
  margin:0 0 0.65rem;
  flex:1;
}
.govt-card-tag{
  font-family:var(--mono);
  font-size:0.54rem;
  font-weight:800;
  letter-spacing:0.6px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:20px;
  background:rgba(10,71,224,0.08);
  border:1px solid rgba(10,71,224,0.2);
  color:var(--blue);
}

/* ─── EVENT MGMT TAB ──────────────────────────────────── */
#tab-events{
  width:100%;
  max-width:100%;
  overflow:visible;
}
.events-panel{
  align-items:stretch;
  gap:2rem;
  padding:1.75rem 2rem;
}
.events-panel-text{
  flex:1 1 42%;
  min-width:240px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.events-lead{
  font-size:0.88rem;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:1rem;
}
.events-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:1.1rem;
}
.events-chips span{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  padding:5px 10px;
  border-radius:20px;
  background:rgba(10,71,224,0.08);
  border:1px solid rgba(10,71,224,0.22);
  color:var(--blue);
}
.events-features{margin-bottom:0}
.events-dev-visual{
  flex:1 1 52%;
  min-width:0;
  max-width:580px;
  display:flex;
  flex-direction:column;
}
.events-scene{
  position:relative;
  width:100%;
  box-sizing:border-box;
  padding:1rem 1.1rem 0.85rem;
  border-radius:14px;
  overflow:hidden;
  border:1.5px solid rgba(10,71,224,0.28);
  box-shadow:0 14px 48px rgba(10,71,224,0.14);
  background:linear-gradient(165deg,#0a1220 0%,#101c30 50%,#0d1728 100%);
}
#eventParkCanvas{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  box-sizing:border-box;
}
.events-live-stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:0.75rem;
  padding-top:0.7rem;
  border-top:1px solid rgba(255,255,255,0.1);
  font-family:var(--mono);
  font-size:0.62rem;
  color:rgba(255,255,255,0.75);
}
.events-slot-counts{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:6px 12px;
  border-radius:8px;
  background:rgba(0,166,81,0.18);
  border:1.5px solid rgba(0,255,160,0.4);
  box-shadow:0 0 14px rgba(0,255,160,0.2);
}
.events-slot-count strong,
.events-slot-count #eventParkTotal{
  font-weight:900;
  font-size:0.92rem;
  letter-spacing:0.5px;
  color:#6dffd4;
  text-shadow:0 0 10px rgba(0,255,180,0.5);
}
.events-slot-sep{
  font-weight:800;
  font-size:0.85rem;
  color:rgba(255,255,255,0.55);
}
.events-slot-label{
  font-weight:700;
  font-size:0.58rem;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.65);
}
.events-slot-counts.events-slot-flash{
  animation:eventSlotCountPulse 0.45s ease;
}
@keyframes eventSlotCountPulse{
  0%{box-shadow:0 0 14px rgba(0,255,160,0.2);border-color:rgba(0,255,160,0.4)}
  50%{box-shadow:0 0 22px rgba(0,255,200,0.65);border-color:rgba(0,255,200,0.85);background:rgba(0,200,120,0.32)}
  100%{box-shadow:0 0 14px rgba(0,255,160,0.2);border-color:rgba(0,255,160,0.4)}
}
.events-live-stats strong{color:var(--teal);font-size:0.78rem}
.events-live-pill{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.58rem;
  font-weight:800;
  letter-spacing:1px;
  color:#fff;
}
.events-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  animation:pulse 1s infinite;
  box-shadow:0 0 8px var(--green);
}
.events-scene-caption{
  margin:0.6rem 0 0;
  padding:0 0.15rem;
  font-family:var(--mono);
  font-size:0.5rem;
  letter-spacing:0.6px;
  color:rgba(255,255,255,0.42);
  text-align:center;
  line-height:1.5;
}

/* ─── PARKING DEMO ────────────────────────────────────── */
#parking-demo.parking-hidden{
  display:none!important;
}

/* ─── PORTFOLIO SECTION ───────────────────────────────── */
.portfolio-section{
  position:relative;
  overflow:hidden;
  padding:4.5rem 0 4rem;
  background:linear-gradient(165deg,#f8faff 0%,#eef3fc 40%,#f5f8ff 100%);
}
.portfolio-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.pf-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.45;
  animation:pfOrbFloat 14s ease-in-out infinite;
}
.pf-orb-1{width:320px;height:320px;background:rgba(10,71,224,0.18);top:-80px;left:-60px}
.pf-orb-2{width:280px;height:280px;background:rgba(0,184,148,0.14);bottom:-40px;right:-40px;animation-delay:-5s}
.pf-orb-3{width:200px;height:200px;background:rgba(99,102,241,0.12);top:40%;left:45%;animation-delay:-9s}
@keyframes pfOrbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(24px,-18px) scale(1.06)}
}
.pf-grid{
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(10,71,224,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(10,71,224,0.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);
}
.portfolio-container{position:relative;z-index:1}
.portfolio-sub{max-width:640px;margin-left:auto;margin-right:auto}
.portfolio-stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem 2.5rem;
  margin-top:1.75rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(10,71,224,0.1);
}
.pf-stat{text-align:center}
.pf-stat-val{
  display:block;
  font-family:var(--orb);
  font-size:1.5rem;
  font-weight:900;
  color:var(--blue);
  letter-spacing:0.5px;
}
.pf-stat-lbl{
  font-size:0.68rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-top:4px;
}
.portfolio-stats-more{
  margin-top:0.75rem;
  padding-top:0;
  border-top:none;
  gap:1rem 2rem;
}
.portfolio-stats-note{
  max-width:620px;
  margin:1.1rem auto 0;
  text-align:center;
  font-size:0.82rem;
  line-height:1.65;
  color:var(--muted);
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.15rem;
  margin-top:2.5rem;
}
.portfolio-card{
  position:relative;
  padding:1.35rem 1.2rem 1.15rem;
  border-radius:16px;
  background:rgba(255,255,255,0.82);
  border:1.5px solid rgba(10,71,224,0.1);
  box-shadow:0 8px 32px rgba(10,71,224,0.06);
  overflow:hidden;
  opacity:0;
  transform:translateY(28px) scale(0.97);
  transition:opacity 0.55s cubic-bezier(0.22,1,0.36,1),transform 0.55s cubic-bezier(0.22,1,0.36,1),border-color 0.3s,box-shadow 0.35s;
  transition-delay:calc(var(--pf-i, 0) * 0.05s);
}
.portfolio-card.visible,
.portfolio-card.cms-card,
.cms-grid .portfolio-card{
  opacity:1;
  transform:translateY(0) scale(1);
}
.portfolio-card.visible:hover{
  border-color:rgba(10,71,224,0.28);
  box-shadow:0 16px 48px rgba(10,71,224,0.12);
  transform:translateY(-4px) scale(1.01);
}
.pf-card-shine{
  position:absolute;
  inset:-50% -50%;
  background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(10,71,224,0.06) 60deg,transparent 120deg);
  opacity:0;
  transition:opacity 0.4s;
  pointer-events:none;
}
.portfolio-card:hover .pf-card-shine{opacity:1;animation:pfShineSpin 4s linear infinite}
@keyframes pfShineSpin{to{transform:rotate(360deg)}}
.pf-icon{
  font-size:2rem;
  line-height:1;
  display:block;
  margin-bottom:0.65rem;
  filter:drop-shadow(0 4px 8px rgba(10,71,224,0.12));
}
.pf-title{
  font-family:var(--orb);
  font-size:0.82rem;
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 0.5rem;
  line-height:1.3;
}
.pf-desc{
  font-size:0.8rem;
  line-height:1.65;
  color:var(--muted);
  margin:0 0 0.85rem;
  min-height:3.9em;
}
.pf-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:0.65rem;
}
.pf-tags span{
  font-family:var(--mono);
  font-size:0.48rem;
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:20px;
  background:rgba(10,71,224,0.07);
  border:1px solid rgba(10,71,224,0.14);
  color:var(--blue);
}
.pf-badge{
  position:absolute;
  top:12px;
  right:12px;
  font-family:var(--mono);
  font-size:0.45rem;
  font-weight:900;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#0d7a4e;
  background:rgba(0,166,81,0.1);
  border:1px solid rgba(0,166,81,0.28);
  padding:3px 8px;
  border-radius:20px;
}
.parking-video{
  margin-top:2.5rem;
  margin-bottom:0;
  padding-top:2.5rem;
  border-top:1.5px solid rgba(10,71,224,0.1);
  text-align:center;
}
.parking-video .video-thumb-link{margin:0 auto}
.video-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
  max-width:960px;
  margin:1.5rem auto 0;
}
.video-grid .video-thumb-link{max-width:none;margin:0}
.video-card-caption{
  margin:0.75rem 0 0;
  font-size:0.88rem;
  color:var(--muted);
  line-height:1.55;
  text-align:center;
}
.video-card-caption strong{
  display:block;
  color:var(--navy);
  font-family:var(--orb);
  font-size:0.95rem;
  margin-bottom:0.25rem;
}
.parking-page-showreel{
  margin-top:3rem;
  padding-top:2.5rem;
  border-top:1.5px solid var(--border);
}
@media(max-width:700px){
  .video-grid{grid-template-columns:1fr;max-width:480px}
}
.parking-video-more{
  margin:1.25rem auto 0;
  font-size:0.92rem;
  color:var(--muted);
  line-height:1.6;
}
.parking-video-more a{
  color:var(--blue);
  font-weight:700;
  text-decoration:none;
}
.parking-video-more a:hover{text-decoration:underline}
.parking-store-badges{
  max-width:440px;
  margin:0.85rem auto 0;
}
.parking-store-badges .store-badge{
  text-decoration:none;
  color:#fff;
  transition:transform .2s ease,box-shadow .2s ease;
}
.parking-store-badges .store-badge:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,0.2);
}
.portfolio-head-below-video{
  margin-top:0;
  padding-top:0;
}
.portfolio-head-below-video .portfolio-stats{
  border-top:none;
  padding-top:0.5rem;
}
.portfolio-grid{margin-top:0}

/* ─── ABOUT US ────────────────────────────────────────── */
.about-section{
  position:relative;
  overflow:hidden;
  padding:4.5rem 0;
  background:linear-gradient(180deg,#fff 0%,#f4f7fd 100%);
}
.about-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.about-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.4;
}
.about-orb-1{width:360px;height:360px;background:rgba(10,71,224,0.12);top:-100px;right:-80px}
.about-orb-2{width:280px;height:280px;background:rgba(0,184,148,0.1);bottom:-60px;left:-40px}
.about-container{position:relative;z-index:1}
.about-intro{
  text-align:center;
  max-width:720px;
  margin:0 auto 3rem;
}
.about-lead{
  font-size:1.02rem;
  line-height:1.85;
  color:var(--muted);
  margin:0 0 1.25rem;
}
.about-pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.about-pills span{
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:20px;
  background:rgba(10,71,224,0.07);
  border:1px solid rgba(10,71,224,0.18);
  color:var(--blue);
}
.leadership-block{text-align:center}
.leadership-title{
  font-family:var(--orb);
  font-size:clamp(1.1rem,2.5vw,1.45rem);
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 0.5rem;
}
.leadership-sub{
  font-size:0.9rem;
  color:var(--muted);
  max-width:560px;
  margin:0 auto 2rem;
  line-height:1.7;
}
.leadership-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  gap:1rem;
  max-width:1180px;
  margin:0 auto;
  font-family:'Poppins',var(--lato),sans-serif;
}
.leader-card{
  width:100%;
  max-width:220px;
  background:#0a0a0a;
  color:#fff;
  border-radius:16px;
  overflow:hidden;
  text-align:left;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.55s cubic-bezier(0.22,1,0.36,1),transform 0.55s cubic-bezier(0.22,1,0.36,1),box-shadow 0.35s ease;
  transition-delay:calc(var(--lc-i, 0) * 0.1s);
  box-shadow:0 12px 32px rgba(0,0,0,0.18);
}
.leader-card.visible{
  opacity:1;
  transform:translateY(0);
}
.leader-card:hover{
  box-shadow:0 18px 40px rgba(10,71,224,0.22);
  transform:translateY(-4px);
}
.leader-card.visible:hover{transform:translateY(-4px)}
.leader-photo-wrap{
  position:relative;
  overflow:hidden;
  border-radius:16px 16px 0 0;
}
.leader-photo-wrap img{
  display:block;
  width:100%;
  height:228px;
  object-fit:cover;
  object-position:center top;
  transition:transform 0.3s ease;
}
.leader-card:hover .leader-photo-wrap img{transform:scale(1.05)}
.leader-photo-fade{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:140px;
  background:linear-gradient(to top,#0a0a0a 0%,transparent 100%);
  pointer-events:none;
}
.leader-body{padding:0 0.85rem 1rem}
.leader-tagline{
  margin:0 0 0.75rem;
  padding-bottom:0.75rem;
  border-bottom:1px solid #4b5563;
  font-size:0.68rem;
  font-weight:500;
  line-height:1.55;
  color:rgba(255,255,255,0.92);
}
.leader-name{
  margin:0.5rem 0 0;
  font-size:0.78rem;
  font-weight:600;
  color:#fff;
}
.leader-role{
  margin:0.25rem 0 0;
  font-size:0.68rem;
  font-weight:600;
  background:linear-gradient(90deg,#8b5cf6,#e0724a,#9938ca);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@media(max-width:900px){
  .leader-card{max-width:200px}
  .leader-photo-wrap img{height:205px}
}
@media(max-width:600px){
  .leadership-grid{gap:0.75rem}
  .leader-card{max-width:calc(50% - 0.5rem);min-width:165px}
  .leader-photo-wrap img{height:185px}
  .leader-tagline{font-size:0.62rem}
}
@media(max-width:768px){
  .about-section{padding:3rem 0}
}
@media(max-width:768px){
  .portfolio-section{padding:3rem 0 2.5rem}
  .portfolio-grid{grid-template-columns:1fr;gap:0.85rem}
  .pf-desc{min-height:0}
}
#parking-demo.section{
  padding-top:3rem;
  padding-bottom:2.5rem;
}
#parking-demo .section-sub{
  margin-bottom:1.25rem;
}
#parking-demo .demo-left{
  gap:8px;
}
#parking-demo .event-panel-header{
  padding:8px 12px;
}
#parking-demo .event-stages{
  padding:8px 10px;
  gap:4px;
}
#parking-demo .stage{
  min-width:68px;
  padding:6px 5px;
  gap:3px;
}
#parking-demo .stage-icon{
  font-size:1.15rem;
}
#parking-demo .stage-name{
  font-size:0.6rem;
}
#parking-demo .stage-status{
  font-size:0.62rem;
}
.demo-section-inner{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:14px;
  align-items:start;
  width:100%;
}

.demo-left{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

#parkCanvas{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  border-radius:12px;
  border:1.5px solid var(--border);
  box-shadow:0 4px 24px rgba(10,71,224,0.1);
  image-rendering:auto;
  opacity:1;
  transition:opacity 0.55s ease,box-shadow 0.55s ease;
}
#parkCanvas.parking-dimmed{
  opacity:0.32;
  box-shadow:0 2px 12px rgba(10,71,224,0.06);
}

.event-panel{
  background:linear-gradient(165deg,#0f2248 0%,var(--navy) 55%,#081028 100%);
  border-radius:12px;
  border:2px solid rgba(10,71,224,0.55);
  overflow:hidden;
  transform:none;
  box-shadow:
    0 8px 36px rgba(10,71,224,0.35),
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 0 48px rgba(0,184,148,0.12);
}
.event-panel-header{
  background:linear-gradient(90deg,rgba(10,71,224,0.45),rgba(0,184,148,0.25));
  border-bottom:1px solid rgba(255,255,255,0.15);
  padding:10px 16px;display:flex;align-items:center;justify-content:space-between;
}
.eph-title{
  font-family:var(--lato);
  font-size:0.76rem;
  font-weight:900;
  color:#fff;
  letter-spacing:2px;
  text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.eph-live{
  display:flex;align-items:center;gap:6px;
  font-family:var(--lato);
  font-size:0.7rem;
  font-weight:800;
  color:#fff;
  letter-spacing:0.5px;
}
.eph-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1s infinite;box-shadow:0 0 8px var(--green)}
.event-stages{
  display:flex;align-items:center;
  padding:12px 14px;gap:5px;
  overflow-x:auto;
}
.stage{
  flex:1;min-width:76px;
  border-radius:9px;border:1.5px solid rgba(255,255,255,0.12);
  padding:9px 7px;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:transform 0.35s ease,border-color 0.35s ease,box-shadow 0.35s ease,background 0.35s ease;
  position:relative;overflow:hidden;
  background:rgba(255,255,255,0.06);
}
.stage.active{
  transform:scale(1.1);
  z-index:2;
  border-color:rgba(255,255,255,0.55);
  background:rgba(0,184,148,0.22);
  box-shadow:0 0 28px rgba(0,184,148,0.55),0 4px 16px rgba(0,0,0,0.25);
}
.stage.active.denied{
  border-color:rgba(255,255,255,0.5);
  background:rgba(232,39,58,0.25);
  box-shadow:0 0 28px rgba(232,39,58,0.5),0 4px 16px rgba(0,0,0,0.25);
}
.stage.done{
  border-color:rgba(255,255,255,0.28);
  background:rgba(0,166,81,0.14);
}
.stage-glow{position:absolute;inset:0;border-radius:9px;opacity:0;background:radial-gradient(circle,rgba(255,255,255,0.18) 0%,transparent 70%);animation:stageGlow 1s ease-in-out infinite;pointer-events:none}
.stage.active .stage-glow{opacity:1}
.stage.active.denied .stage-glow{background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 70%)}
.stage-icon{font-size:1.35rem;transition:transform 0.35s;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.stage.active .stage-icon{transform:scale(1.2)}
.stage-name{
  font-family:var(--lato);
  font-size:0.66rem;
  font-weight:800;
  color:rgba(255,255,255,0.88);
  letter-spacing:0.6px;
  text-transform:uppercase;
  text-align:center;
  line-height:1.2;
}
.stage.active .stage-name{color:#fff;font-weight:900}
.stage.active.denied .stage-name{color:#fff;font-weight:900}
.stage.done .stage-name{color:rgba(255,255,255,0.9);font-weight:700}
.stage-status{
  font-family:var(--lato);
  font-size:0.68rem;
  font-weight:800;
  color:rgba(255,255,255,0.65);
  text-align:center;
  line-height:1.2;
}
.stage.active .stage-status{color:#fff;font-weight:900}
.stage.active.denied .stage-status{color:#fff;font-weight:900}
.stage.done .stage-status{color:rgba(255,255,255,0.85);font-weight:700}
.sarr{
  color:rgba(255,255,255,0.2);
  font-size:0.85rem;
  font-weight:700;
  flex-shrink:0;
  transition:color 0.35s,transform 0.35s;
}
.sarr.lit{color:#fff;transform:scale(1.15);text-shadow:0 0 10px rgba(0,184,148,0.8)}

.demo-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

/* ANPR card */
.anpr-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(10,71,224,0.05);
  opacity:1;
  transform:scale(1);
  transform-origin:center top;
  transition:opacity 0.55s ease,transform 0.55s cubic-bezier(0.22,1,0.36,1),box-shadow 0.55s ease,border-color 0.55s ease;
  position:relative;
  z-index:1;
}
.anpr-card.anpr-focused{
  opacity:1;
  transform:scale(1.05);
  border-color:rgba(10,71,224,0.45);
  box-shadow:0 16px 44px rgba(10,71,224,0.28),0 0 0 3px rgba(10,71,224,0.12);
  z-index:3;
}
.card-hdr{background:var(--light);border-bottom:1px solid var(--border);padding:8px 14px;display:flex;justify-content:space-between;align-items:center}
.card-title{font-family:var(--orb);font-size:0.52rem;color:var(--blue);letter-spacing:3px;text-transform:uppercase}
.live-dw{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:0.56rem;color:var(--green)}
.ldot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 1s infinite}
.anpr-screen{padding:12px 14px}
.anpr-lbl{font-family:var(--mono);font-size:0.54rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.plate-disp{background:#fffce0;color:#0a1535;font-family:var(--mono);font-size:1.28rem;font-weight:900;padding:8px 12px;border-radius:5px;border:2px solid #c8b900;text-align:center;letter-spacing:3px;width:100%;display:block;position:relative;overflow:hidden;transition:box-shadow 0.4s,border-color 0.4s;-webkit-font-smoothing:antialiased}
.plate-disp.scanning{border-color:var(--blue);box-shadow:0 0 14px rgba(10,71,224,0.4);animation:platePulse 0.8s ease-in-out infinite}
.plate-disp.auth{border-color:var(--green);box-shadow:0 0 14px rgba(0,166,81,0.4)}
.plate-disp.deny{border-color:var(--red);box-shadow:0 0 14px rgba(232,39,58,0.4)}
.scan-beam-el{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(10,71,224,0.9);box-shadow:0 0 10px rgba(10,71,224,0.6);animation:beam 1.6s linear infinite;display:none}
.anpr-status{margin-top:8px;font-family:var(--mono);font-size:0.74rem;font-weight:700;color:var(--navy)}
.anpr-status.scanning{color:var(--amber)}
.anpr-status.ok{color:var(--green);font-weight:700}
.anpr-status.no{color:var(--red);font-weight:700}

/* Barrier widget */
.barrier-widget{background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;box-shadow:0 2px 10px rgba(10,71,224,0.04)}
.bw-label{font-family:var(--mono);font-size:0.54rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:7px}
.bw-bar-bg{height:7px;background:#e2e8f4;border-radius:4px;overflow:hidden;margin-bottom:5px}
.bw-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--teal));width:0%;transition:width 0.12s linear}
.bw-status{font-family:var(--mono);font-size:0.6rem;color:var(--muted);display:flex;justify-content:space-between}
.bw-status .angle{color:var(--blue);font-weight:700}

/* Stats row */
.stats-row{display:flex;gap:8px}
.mini-stat{flex:1;background:var(--light);border:1.5px solid var(--border);border-radius:9px;padding:10px 12px}
.mini-stat-lbl{font-family:var(--mono);font-size:0.52rem;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}
.mini-stat-val{font-family:var(--orb);font-size:1.4rem;font-weight:900;color:var(--blue);line-height:1.1;margin-top:3px}

/* Log table */
.log-card{background:#fff;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(10,71,224,0.05)}
#logTable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.63rem}
#logTable th{padding:7px 10px;text-align:left;color:var(--muted);font-size:0.52rem;letter-spacing:1.5px;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--light)}
#logTable td{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--navy)}
.s-ok{color:var(--green);font-weight:700}
.s-no{color:var(--red);font-weight:700}
.log-row-new{animation:rowIn 0.35s ease both}
.log-row-new.auth-row{animation:rowIn 0.35s ease both,rowHighlightGreen 2.5s ease forwards}
.log-row-new.deny-row{animation:rowIn 0.35s ease both,rowHighlightRed 2.5s ease forwards}

/* ─── PRODUCTS ────────────────────────────────────────── */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.prod-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:1.4rem 1.2rem;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(10,71,224,0.04)}
.prod-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--teal));transform:scaleX(0);transition:transform 0.3s;transform-origin:left}
.prod-card:hover::before{transform:scaleX(1)}
.prod-card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 10px 28px rgba(10,71,224,0.12)}
.prod-icon{font-size:2rem;margin-bottom:0.8rem;display:block}
.prod-title{font-family:var(--orb);font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.prod-desc{font-size:0.8rem;color:var(--muted);line-height:1.6}

/* ─── WHY US ──────────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.why-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:1.6rem;transition:border-color 0.3s,transform 0.3s}
.why-card:hover{border-color:var(--teal);transform:translateY(-3px)}
.why-num{font-family:var(--orb);font-size:1.8rem;font-weight:900;color:#fff;margin-bottom:0.4rem}
.why-title{font-size:0.9rem;font-weight:900;color:#fff;margin-bottom:0.4rem}
.why-desc{font-size:0.8rem;color:rgba(255,255,255,0.42);line-height:1.65}

/* ─── CONTACT ─────────────────────────────────────────── */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-info h3{font-family:var(--orb);font-size:0.95rem;font-weight:900;color:var(--navy);margin-bottom:1.2rem;text-transform:uppercase;letter-spacing:1px}
.contact-info p{color:var(--muted);line-height:1.8;margin-bottom:1.4rem;font-size:0.88rem}
.contact-items{display:flex;flex-direction:column;gap:11px}
.contact-item{display:flex;align-items:flex-start;gap:11px}
.ci-icon{width:36px;height:36px;border-radius:8px;background:rgba(10,71,224,0.07);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0}
.ci-text{font-size:0.86rem;color:var(--navy);line-height:1.5}
.ci-text span{display:block;font-size:0.68rem;color:var(--muted);margin-bottom:2px;text-transform:uppercase;letter-spacing:1px}
.contact-form{background:var(--light);border:1.5px solid var(--border);border-radius:14px;padding:1.8rem}
.contact-form h4{font-family:var(--orb);font-size:0.7rem;color:var(--navy);letter-spacing:1px;text-transform:uppercase;margin-bottom:1.2rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:0.7rem;font-weight:700;color:var(--navy);margin-bottom:5px;letter-spacing:0.5px;text-transform:uppercase}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--lato);font-size:0.88rem;color:var(--navy);background:#fff;outline:none;transition:border-color 0.25s,box-shadow 0.25s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,71,224,0.08)}
.form-group textarea{resize:vertical;min-height:80px}

/* ─── FOOTER ──────────────────────────────────────────── */
footer{background:var(--navy);padding:2.5rem 1.5rem 1.5rem}
.footer-inner{max-width:1400px;margin:0 auto}
.footer-top{display:flex;gap:2.5rem;margin-bottom:2rem;flex-wrap:wrap}
.footer-brand{flex:1;min-width:200px}
.footer-brand-lockup{display:flex;align-items:center;gap:10px;margin-bottom:0.85rem}
.footer-mark{display:none}
.footer-brand-name{font-family:var(--orb);font-size:clamp(0.95rem,2.4vw,1.1rem);font-weight:900;letter-spacing:2px;color:#fff}
.footer-brand-name span{color:#6eb5ff}
.footer-brand-sub{font-size:clamp(0.64rem,1.55vw,0.8rem);color:rgba(255,255,255,0.4);letter-spacing:1.2px;text-transform:uppercase;margin-top:2px}
.footer-logo{display:none}
.footer-brand p{font-size:clamp(0.95rem,2.1vw,1.06rem);color:rgba(255,255,255,0.35);line-height:1.7}
.footer-col{flex:1;min-width:130px}
.footer-col h4{font-family:var(--mono);font-size:clamp(0.76rem,1.8vw,0.9rem);color:var(--teal);letter-spacing:2px;text-transform:uppercase;margin-bottom:0.9rem}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:0.5rem}
.footer-col ul li a{color:rgba(255,255,255,0.36);text-decoration:none;font-size:clamp(0.95rem,2.1vw,1.06rem);transition:color 0.2s}
.footer-col ul li a:hover{color:rgba(255,255,255,0.85)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding-top:1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem}
.footer-bottom p{font-family:var(--mono);font-size:clamp(0.76rem,1.55vw,0.9rem);color:rgba(255,255,255,0.2);letter-spacing:1px}
.footer-bottom span{color:var(--teal)}

/* ─── ANIMATIONS ──────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.2}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes beam{0%{top:0}100%{top:calc(100% - 3px)}}
@keyframes stageGlow{0%,100%{opacity:0.55}50%{opacity:1}}
@keyframes platePulse{0%,100%{box-shadow:0 0 8px rgba(10,71,224,0.3)}50%{box-shadow:0 0 20px rgba(10,71,224,0.65)}}
@keyframes rowHighlightGreen{0%{background:rgba(0,166,81,0.18);transform:scale(1.01)}30%{background:rgba(0,166,81,0.08)}100%{background:transparent;transform:scale(1)}}
@keyframes rowHighlightRed{0%{background:rgba(232,39,58,0.16);transform:scale(1.01)}30%{background:rgba(232,39,58,0.07)}100%{background:transparent;transform:scale(1)}}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:600px){
  footer{padding:2.2rem 1rem 1.2rem}
  .footer-top{gap:1.3rem;margin-bottom:1.2rem}
  .footer-col{min-width:110px}
  .footer-col ul li{margin-bottom:0.45rem}
  .footer-bottom{gap:0.35rem}
}
@media(max-width:1024px){
  .govt-projects-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .demo-section-inner{grid-template-columns:1fr}
  .demo-right{flex-direction:column;flex-wrap:nowrap}
  .anpr-card,.barrier-widget,.log-card,.stats-row{flex:1 1 100%;min-width:0;width:100%}
}
@media(max-width:768px){
  .panel-inner{flex-direction:column!important;padding:1.5rem}
  .panel-visual{flex:none;width:100%;height:190px}
  .mobile-dev-visual{flex:none;width:100%}
  .ai-dev-visual{flex:none;width:100%;max-width:100%;padding:0}
  .ai-warehouse-scene{height:300px}
  .ai-panel .panel-inner{gap:1.25rem;padding:1.15rem 0.9rem}
  .pos-dev-visual{flex:none;width:100%;max-width:100%}
  .events-panel{gap:1.25rem;padding:1.15rem 0.9rem}
  .events-dev-visual{flex:none;width:100%;max-width:100%}
  .events-panel-text{min-width:0}
  .events-scene{padding:0.85rem 0.75rem 0.7rem}
  .events-live-stats{margin-top:0.6rem;padding-top:0.55rem}
  .challan-panel{padding:1.15rem 0.9rem;gap:1.15rem}
  .challan-dev-visual{flex:none;width:100%;max-width:100%}
  .cloud-panel{padding:1.15rem 0.9rem;gap:1.15rem}
  .cloud-dev-visual{flex:none;width:100%;max-width:100%}
  .attend-panel{padding:1.15rem 0.9rem;gap:1.15rem}
  .attend-visual-wrap{flex:none;width:100%;max-width:100%}
  .attend-scene{max-width:100%}
  .society-panel{padding:1.15rem 0.9rem;gap:1.15rem}
  .society-visual-wrap{flex:none;width:100%;max-width:100%}
  .society-scene{max-width:100%}
  .coffee-panel{padding:1.15rem 0.9rem;gap:1.15rem}
  .coffee-dev-visual{flex:none;width:100%;max-width:100%}
  .coffee-scene{max-width:100%}
  .coffee-layout{grid-template-columns:1fr}
  .govt-panel{padding:1.15rem 0.9rem;gap:1.15rem}
  .govt-projects-grid{grid-template-columns:1fr;gap:0.85rem}
  .govt-card{padding:1rem 0.85rem}
  .pos-machine-stage{width:220px;--pos-paper-space:145px}
  .pos-screen{min-height:280px;height:280px}
  .pos-receipt-outlet{width:128px;margin-left:-64px;top:24px}
  .pos-receipt{width:128px;font-size:0.42rem}
  #tab-ai .tech-logo{font-size:0.52rem;padding:3px 7px}
  .ai-conveyor{bottom:40px;height:58px}
  .mobile-animation-stack{height:260px;min-height:260px}
  .mobile-dev-visual.phase-deploy .mobile-animation-stack{height:260px;min-height:260px}
  .mobile-dev-visual.phase-deploy .build-center .publish-success{
    max-width:196px;
    min-width:142px;
    padding:14px 20px 12px;
  }
  .mobile-dev-visual.phase-deploy .build-center .publish-success-text{font-size:0.84rem}
  .mobile-dev-visual.phase-deploy #mobileCodeTerminal.terminal-folded .code-terminal-body{
    max-height:0;
  }
  .code-terminal-body{max-height:calc(260px - 40px)}
  .build-platforms{padding:0 4px}
  .contact-wrap{grid-template-columns:1fr}
  .demo-right{flex-direction:column}
}
/* ─── VIDEO EMBED ─────────────────────────────────────── */
.video-section{
  margin-top:3rem;
  padding-top:2.5rem;
  border-top:1.5px solid var(--border);
}
.video-section .section-label,
.video-section .section-title,
.video-section .section-sub{text-align:center}
.video-thumb-link{
  position:relative;
  display:block;
  width:100%;
  max-width:960px;
  margin:0 auto;
  border-radius:14px;
  overflow:hidden;
  border:1.5px solid var(--border);
  box-shadow:0 8px 40px rgba(10,71,224,0.15);
  background:#000;
  aspect-ratio:16/9;
  text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.video-thumb-link:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 48px rgba(10,71,224,0.22);
}
.video-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.video-play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:72px;
  border-radius:50%;
  background:rgba(10,71,224,0.92);
  box-shadow:0 4px 24px rgba(0,0,0,0.35);
  pointer-events:none;
}
.video-play-btn::after{
  content:'';
  position:absolute;
  top:50%;
  left:54%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:14px 0 14px 24px;
  border-color:transparent transparent transparent #fff;
}
.video-thumb-label{
  position:absolute;
  bottom:14px;
  right:14px;
  padding:6px 12px;
  border-radius:6px;
  background:rgba(0,0,0,0.65);
  color:#fff;
  font-family:var(--orb);
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}
.video-cta-wrap{text-align:center;margin-top:1.2rem}
.contact-item a{color:var(--blue);text-decoration:none;font-weight:700}
.contact-item a:hover{text-decoration:underline}

@media(max-width:480px){.section{padding:3.5rem 1rem}.nav-inner{padding:0 1rem}.hero-stats{gap:1.2rem}}

/* ADDITIONAL IMPROVEMENTS */
.nav-logo-img,
.footer-logo-img {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: auto;
}
.contact-map-wrap iframe {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.contact-item a {
  transition: color 0.2s ease;
}