/* ══════════════════════════════════════════════════
   SytronSoft — Light Theme (Scita/QDEX inspired)
   ══════════════════════════════════════════════════ */

/* ══ RESET & TOKENS ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white:#ffffff;
  --bg:#F5F7FA;
  --bg2:#ECEFF1;
  --bg3:#E0E4E8;
  --card:#ffffff;
  --border:#CFD8DC;
  --border2:#B0BEC5;
  --text:#000000;
  --text2:#000000;
  --text3:#1a1a1a;
  --primary:#1565C0;
  --primary2:#1976D2;
  --accent:#00B8D4;
  --accent2:#26C6DA;
  --red:#dc2626;
  --green:#16a34a;
  --teal:#0891b2;
  --gold:#d97706;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --mono:'IBM Plex Mono','Fira Code',monospace;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow:0 1px 3px rgba(13,27,42,.05),0 1px 2px rgba(13,27,42,.03);
  --shadow-md:0 4px 14px rgba(13,27,42,.07),0 2px 6px rgba(13,27,42,.04);
  --shadow-lg:0 12px 36px rgba(13,27,42,.09),0 4px 12px rgba(13,27,42,.05);
  --radius:8px;
  --radius-lg:12px;
  --max-w:1280px;
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--sans);background:#F0F2F5;color:var(--text);overflow-x:hidden;line-height:1.7;font-size:18px;font-weight:500}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ══ LAYOUT ══ */
.container{max-width:var(--max-w);margin:0 auto;padding:0 2rem}
section{padding:7rem 2rem;position:relative}
.section-bg{background:var(--bg)}

/* ══ TYPOGRAPHY ══ */
.section-tag{font-family:var(--mono);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.5rem}
h1{font-size:clamp(2.15rem,4vw,3.35rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--primary)}
h2{font-size:clamp(1.75rem,3vw,2.55rem);font-weight:700;line-height:1.2;color:var(--primary);margin-bottom:.75rem}
h3{font-size:1.38rem;font-weight:700;color:var(--text);margin-bottom:.4rem}
.lead{font-size:1.2rem;color:var(--text2);max-width:640px;line-height:1.9;font-weight:500}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* ══ BUTTONS ══ */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;font-family:var(--sans);font-size:.97rem;font-weight:600;border-radius:6px;transition:all .3s var(--ease);cursor:pointer;border:none;text-decoration:none}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover{background:var(--primary2);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:var(--white)}
.btn-accent{background:var(--accent);color:var(--white)}
.btn-accent:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,184,212,.25)}
.btn-white{background:var(--white);color:var(--primary);font-weight:700}
.btn-white:hover{background:var(--bg);box-shadow:var(--shadow-md)}

/* ══ UTILITY BAR ══ */
.utility-bar{position:fixed;top:0;left:0;right:0;z-index:910;height:36px;background:#0a1628;display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;font-size:.78rem;color:rgba(255,255,255,.7)}
.ub-left{display:flex;align-items:center;gap:1.5rem}
.ub-left span{display:flex;align-items:center;gap:.4rem}
.ub-left i{font-size:.7rem;color:var(--accent);opacity:.8}
.ub-right{display:flex;align-items:center;gap:1.2rem}
.ub-right a{color:rgba(255,255,255,.7);font-weight:500;transition:color .2s var(--ease);font-size:.78rem}
.ub-right a:hover{color:var(--white)}
.ub-sep{width:1px;height:14px;background:rgba(255,255,255,.15)}

/* ══ NO UTILITY BAR OVERRIDES ══ */
.no-ub nav{top:0}
.no-ub .mega-panel{top:72px}
.no-ub .hero{margin-top:72px}
.no-ub .mob-nav{top:72px}
.no-ub .page-header{margin-top:72px}

/* ══ NAV ══ */
nav{position:fixed;top:36px;left:0;right:0;z-index:900;height:72px;display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:0 2.5rem;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:all .4s var(--ease)}
nav.scrolled{box-shadow:0 2px 20px rgba(13,27,42,.08);border-bottom-color:var(--border);background:rgba(255,255,255,.98)}
.n-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;transition:transform .25s var(--ease)}
.n-logo:hover{transform:scale(1.02)}
.n-logo img{height:40px;width:auto}
.brand-name{font-size:1.3rem;font-weight:800;color:var(--primary);letter-spacing:.04em;font-family:var(--sans)}
.n-links{display:flex;align-items:center;gap:.3rem;height:100%}
.n-links li{list-style:none}
.n-links>li>a{font-size:1.02rem;font-weight:600;color:var(--text2);padding:.5rem 1.1rem;border-radius:6px;transition:color .25s var(--ease),background .25s var(--ease);position:relative}
.n-links>li>a:hover{color:var(--primary);background:rgba(21,101,192,.06)}
.n-links>li>a.active{color:var(--primary)}
.n-links>li>a::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:2px;background:var(--accent);border-radius:1px;transition:left .3s var(--ease),right .3s var(--ease)}
.n-links>li>a:hover::after{left:1rem;right:1rem}
.n-links>li>a.active::after{left:1rem;right:1rem}
.n-cta-link{background:var(--primary);color:var(--white) !important;padding:.55rem 1.4rem !important;border-radius:var(--radius) !important;font-size:.95rem !important;font-weight:600 !important;transition:all .3s var(--ease) !important}
.n-cta-link:hover{background:var(--primary2) !important;box-shadow:0 4px 15px rgba(21,101,192,.3) !important;transform:translateY(-1px) !important}
.n-cta-link::after{display:none !important}
.n-cta{padding:.6rem 1.6rem;background:var(--primary);color:var(--white);font-size:.84rem;font-weight:600;border-radius:var(--radius);transition:all .3s var(--ease);text-decoration:none;position:relative;overflow:hidden}
.n-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);transform:translateX(-100%);transition:transform .5s var(--ease)}
.n-cta:hover{background:var(--primary2);box-shadow:0 4px 15px rgba(21,101,192,.3);transform:translateY(-1px)}
.n-cta:hover::before{transform:translateX(100%)}
.n-ham{display:none;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius);background:var(--white);transition:all .3s var(--ease)}
.n-ham:hover{border-color:var(--primary);background:rgba(21,101,192,.04)}
.n-ham span{display:block;width:18px;height:2px;background:var(--text2);transition:all .3s var(--ease);transform-origin:center}
.n-ham.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.n-ham.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.n-ham.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mob-nav{position:fixed;top:108px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);padding:0 2rem;z-index:899;flex-direction:column;box-shadow:var(--shadow-lg);max-height:0;overflow:hidden;display:flex;transition:max-height .4s var(--ease),padding .4s var(--ease),opacity .3s var(--ease);opacity:0}
.mob-nav.open{max-height:calc(100vh - 72px);padding:1rem 2rem;opacity:1;overflow-y:auto}
.mob-nav a{font-size:.95rem;font-weight:600;color:var(--text2);padding:.8rem 0;border-bottom:1px solid var(--border);transition:color .25s var(--ease),padding-left .25s var(--ease)}
.mob-nav a:hover{color:var(--primary);padding-left:.5rem}
.mob-nav .mcta{margin-top:.8rem;background:var(--primary);color:var(--white);text-align:center;border:none;border-radius:var(--radius);font-weight:700;padding:.9rem;transition:all .25s var(--ease)}
.mob-nav .mcta:hover{background:var(--primary2);padding-left:0}

/* ══ MEGA DROPDOWN ══ */
.nav-dropdown{position:relative;height:100%;display:flex;align-items:center}
.nav-dropdown>a{display:flex;align-items:center;gap:.3rem}
.nav-dropdown>a::before{display:none}
.nav-dropdown .chevron{font-size:.55rem;transition:transform .3s var(--ease);margin-left:.15rem;opacity:.5;padding:.5rem;cursor:pointer}
.nav-dropdown:hover .chevron,.nav-dropdown.open .chevron{transform:rotate(180deg);opacity:1}
/* Invisible bridge: fills gap between nav link and mega-panel */
.nav-dropdown::after{content:'';position:absolute;bottom:0;left:0;right:0;height:12px;transform:translateY(100%)}
.mega-panel{position:fixed;top:108px;left:0;right:0;background:var(--white);border-top:3px solid var(--accent);box-shadow:0 12px 40px rgba(13,27,42,.12);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;pointer-events:none;z-index:898}
.nav-dropdown:hover .mega-panel,.nav-dropdown.open .mega-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:80ms}
.mega-inner{max-width:var(--max-w);margin:0 auto;padding:2.2rem 2rem 1.5rem;display:grid;gap:2rem;align-items:start}
.mega-inner.cols-4{grid-template-columns:repeat(4,1fr)}
.mega-inner.cols-3{grid-template-columns:repeat(3,1fr)}
.mega-inner.cols-5{grid-template-columns:repeat(5,1fr)}
.mega-coming-soon{font-size:.82rem;font-style:italic;color:var(--text3);padding:.5rem .6rem;display:flex;align-items:center;gap:.4rem}
.mega-coming-soon i{font-size:.75rem;color:var(--gold)}
.mega-cat-illus{width:100%;height:110px;display:flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.mega-cat-illus img{height:90px;width:auto;max-width:100%;object-fit:contain;transition:transform .3s var(--ease)}
.mega-col:hover .mega-cat-illus img{transform:scale(1.06)}
.mega-col h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--primary);font-weight:700;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:2px solid rgba(21,101,192,.15);min-height:2.8rem;display:flex;align-items:flex-end}
.mega-col a{display:flex;align-items:flex-start;gap:.7rem;font-size:.88rem;font-weight:500;color:var(--text2);padding:.55rem .6rem;border-radius:6px;transition:all .2s var(--ease)}
.mega-col a:hover{color:var(--primary);background:rgba(21,101,192,.05)}
.mega-col a:hover .mega-ico{background:var(--primary);color:var(--white)}
.mega-ico{width:32px;height:32px;border-radius:6px;background:rgba(21,101,192,.06);display:grid;place-items:center;flex-shrink:0;font-size:.78rem;color:var(--primary);transition:all .25s var(--ease)}
.mega-col a strong{display:block;font-size:.87rem;font-weight:600;color:var(--text);line-height:1.3}
.mega-col a:hover strong{color:var(--primary)}
.mega-col a em{display:block;font-size:.73rem;font-style:normal;color:var(--text3);line-height:1.4;margin-top:.15rem}
.mega-foot{grid-column:1/-1;border-top:1px solid var(--border);padding-top:1rem;display:flex;align-items:center;justify-content:space-between}
.mega-foot a{font-size:.85rem;font-weight:700;color:var(--primary);transition:all .2s}
.mega-foot a:hover{color:var(--accent);letter-spacing:.02em}

/* Mega dropdown — mobile accordion in mob-nav */
.mob-dropdown{position:relative}
.mob-dropdown>.mob-drop-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:.95rem;font-weight:600;color:var(--text2);border-bottom:1px solid var(--border);transition:color .25s var(--ease)}
.mob-dropdown>.mob-drop-toggle>a{flex:1;padding:.8rem 0 !important;border-bottom:none !important;font-size:inherit !important;font-weight:inherit !important;color:inherit !important}
.mob-dropdown>.mob-drop-toggle .mob-chev{font-size:.6rem;transition:transform .3s var(--ease);color:var(--text3);padding:.8rem .6rem .8rem 1rem;cursor:pointer}
.mob-dropdown.open>.mob-drop-toggle .mob-chev{transform:rotate(180deg)}
.mob-drop-panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.mob-dropdown.open .mob-drop-panel{max-height:800px}
.mob-drop-panel a{padding-left:1.5rem !important;font-size:.88rem !important;border-bottom-color:var(--bg2) !important;color:var(--text3) !important}
.mob-drop-panel a:hover{color:var(--primary) !important}
.mob-drop-panel .mob-drop-head{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);padding:.6rem 0 .2rem 1.5rem;border-bottom:none !important}

/* ══ HERO ══ */
.hero{position:relative;margin-top:108px;background:#0a1929;overflow:hidden;height:680px}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-overlay{position:absolute;inset:0;background:rgba(10,22,40,.35);z-index:1}
.hero-center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:11rem 2rem 6rem}
.hero-center h1{color:#ffffff;font-family:'Space Grotesk',sans-serif;font-size:clamp(1.8rem,4vw,3.6rem);line-height:1.2;font-weight:700;letter-spacing:-.02em;margin-bottom:1.2rem}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.btn-outline-light{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.5);padding:.7rem 1.8rem;font-family:var(--sans);font-size:.82rem;font-weight:600;border-radius:6px;transition:all .3s var(--ease);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.btn-outline-light:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.8)}
.hero-stats{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.7rem;flex-wrap:nowrap;justify-content:center;white-space:nowrap}
.hero-stat-box{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:.8rem 1.8rem;display:flex;align-items:center;gap:.7rem;transition:all .3s var(--ease)}
.hero-stat-box:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.hero-stat-val{font-size:1.5rem;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.hero-stat-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.75);line-height:1.2}
.slogan-section{background:var(--white);padding:3rem 2rem 1rem;text-align:center}
.slogan-heading{font-family:var(--sans);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;color:var(--dark);letter-spacing:-.01em;margin-bottom:.8rem}
.slogan-sub{font-size:.88rem;color:var(--text3);max-width:540px;margin:0 auto;line-height:1.6}
.stats-about{background:var(--bg2)}
.stats-about .stat-val{color:var(--primary)}
.stats-about .stat-label{color:var(--text3)}

/* ══ PRODUCTS LIST ══ */
/* Industry slider (home page) */
.indslider{max-width:var(--max-w);margin:2rem auto 0;overflow:hidden;position:relative}
.indslider-track{display:flex;gap:2rem;transition:transform .5s var(--ease)}
.indslider-card{flex-shrink:0}
.indslider-card .ind-card{height:100%}
.indslider-dots{display:flex;justify-content:center;gap:.5rem;margin-top:2rem}
.indslider-dot{width:10px;height:10px;border-radius:50%;background:var(--border2);cursor:pointer;transition:all .3s var(--ease);border:none;padding:0}
.indslider-dot.active{background:var(--primary);transform:scale(1.2)}

/* Product category panels */
.pcat-panel{display:none;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.pcat-panel.active{display:block}
.pcat-panel.active.pcat-visible{opacity:1;transform:translateY(0)}

/* Product showcase slider */
.pslider{max-width:var(--max-w);margin:3rem auto 0;overflow:hidden;position:relative}
.pslider-track{display:flex;gap:2.5rem;transition:transform .5s var(--ease)}
.pslider-card{flex-shrink:0;display:flex}
.pslider-track{align-items:stretch}
.pshow-card{display:flex;flex-direction:column;height:100%;width:100%}
.pshow-banner{flex-shrink:0}
.pshow-body{flex:1;display:flex;flex-direction:column}
.pshow-body p{flex:1}
.pslider-dots{display:flex;justify-content:center;gap:.5rem;margin-top:2rem}
.pslider-dot{width:10px;height:10px;border-radius:50%;background:var(--border2);cursor:pointer;transition:all .3s var(--ease);border:none;padding:0}
.pslider-dot.active{background:var(--primary);transform:scale(1.2)}
.pshow-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);transition:all .4s var(--ease)}
.pshow-card:hover{box-shadow:0 12px 35px rgba(21,101,192,.12);transform:translateY(-4px)}
.pshow-banner{height:220px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pshow-banner img{width:60%;height:70%;object-fit:contain;position:relative;z-index:1}
.pshow-banner--transport{background:linear-gradient(135deg,#0a1929 0%,#1565C0 100%)}
.pshow-banner--smartcity{background:linear-gradient(135deg,#0a1929 0%,#00838F 100%)}
.pshow-banner--security{background:linear-gradient(135deg,#0a1929 0%,#E65100 100%)}
.pshow-banner--hardware{background:linear-gradient(135deg,#0a1929 0%,#6A1B9A 100%)}
.pshow-banner--agriculture{background:linear-gradient(135deg,#0a1929 0%,#2E7D32 100%)}
.pshow-body{padding:1.8rem 2rem 2rem}
.pshow-tag{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.pshow-body h3{font-size:1.4rem;font-weight:700;color:var(--text);margin-bottom:.8rem}
.pshow-body p{font-size:.95rem;color:var(--text2);line-height:1.7;margin-bottom:1.2rem}
.pshow-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:700;color:var(--primary);transition:all .2s var(--ease)}
.pshow-link:hover{gap:.7rem;color:var(--accent)}
.pshow-card--coming{opacity:.7;border-style:dashed}
.pshow-card--coming:hover{transform:none;box-shadow:none}
.pshow-coming-badge{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.25rem .7rem;background:var(--gold);color:var(--white);border-radius:4px;margin-bottom:.5rem}

/* ══ FEATURE CARDS (products page) ══ */
.feat-layout{display:grid;grid-template-columns:1fr 2.2fr;gap:3rem;align-items:center}
.feat-intro h2{font-size:2rem;font-weight:800;color:var(--text);margin-bottom:1rem;line-height:1.25}
.feat-intro p{font-size:1rem;color:var(--text3);line-height:1.7;margin-bottom:.5rem}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem 1.8rem;text-align:left;display:flex;flex-direction:column;transition:all .4s var(--ease)}
.feat-card:hover{box-shadow:0 8px 30px rgba(21,101,192,.1);transform:translateY(-3px)}
.feat-ico{font-size:1.8rem;margin-bottom:1rem;color:var(--primary);transition:all .4s var(--ease)}
.feat-card:hover .feat-ico{color:var(--accent)}
.feat-title{font-weight:700;font-size:1.1rem;margin-bottom:.6rem;color:var(--text)}
.feat-desc{font-size:.88rem;color:var(--text3);line-height:1.7;flex:1}
.feat-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.88rem;font-weight:600;color:var(--primary);margin-top:1.2rem;transition:all .2s var(--ease)}
.feat-link:hover{color:var(--accent);gap:.6rem}

/* ══ PRODUCT DETAIL — page header actions ══ */
.prod-header-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem;position:relative;z-index:1}

/* ══ PRODUCT DETAIL — Split Hero ══ */
.ph-detail-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;align-items:center;position:relative;z-index:1;max-width:var(--max-w);margin:0 auto;text-align:left}
.ph-detail-grid>div:nth-child(2){position:relative;max-width:85%}
.ph-detail-content{text-align:left}
.ph-detail-content .ph-icon{margin-bottom:1rem}
.ph-detail-content h1{margin-bottom:.6rem}
.ph-detail-content .lead{margin-bottom:1rem}
.ph-detail-desc{font-size:1rem;color:rgba(255,255,255,.75);line-height:1.8;max-width:540px;margin-bottom:1.5rem}
.ph-detail-content .prod-header-actions{justify-content:flex-start}
.ph-detail-play{position:absolute;bottom:0;right:-20rem;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:.5rem}
.play-circle{width:80px;height:80px;border-radius:50%;background:#16a34a;border:2px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:all .4s var(--ease);animation:playPulse 2s ease-in-out infinite;box-shadow:0 0 20px rgba(22,163,74,.4)}
.play-circle i{font-size:2rem;color:var(--white);margin-left:4px;transition:all .4s var(--ease)}
@keyframes playPulse{0%,100%{box-shadow:0 0 20px rgba(22,163,74,.4);transform:scale(1)}50%{box-shadow:0 0 40px rgba(22,163,74,.7),0 0 60px rgba(22,163,74,.3);transform:scale(1.08)}}
.ph-detail-play:hover .play-circle{background:#15803d;border-color:var(--white);transform:scale(1.12);box-shadow:0 0 50px rgba(22,163,74,.6)}
.ph-detail-play:hover .play-circle i{color:var(--white)}
.play-label{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.08em;text-transform:uppercase}

/* ══ VIDEO MODAL ══ */
.video-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.video-modal.active{opacity:1;pointer-events:auto}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85)}
.video-modal-body{position:relative;z-index:1;max-width:2400px;width:96vw;max-height:88vh}
.video-modal-close{position:absolute;top:-2.6rem;right:0;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;transition:all .3s var(--ease)}
.video-modal-close:hover{background:rgba(255,255,255,.15);transform:scale(1.1)}
.video-modal-body video{width:100%;max-height:88vh;object-fit:contain;border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.5);background:#000}
.video-modal-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
.video-modal-loader.show{opacity:1}
.video-modal-loader .spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:vSpin .8s linear infinite}
@keyframes vSpin{to{transform:rotate(360deg)}}

/* ══ Product tabs (ER/Studio dark style) ══ */
.prod-tabs-section{padding:5rem 2rem;background:var(--white);color:var(--text)}
.prod-tabs-layout{display:grid;grid-template-columns:220px 1fr;gap:0;max-width:var(--max-w);margin:0 auto;background:transparent}
.prod-tab-nav{background:transparent;border-right:none;padding:1rem 0;display:flex;flex-direction:column;gap:.25rem}
.prod-tab-btn{display:block;width:100%;text-align:left;padding:.9rem 1.5rem;font-size:.9rem;font-weight:600;color:var(--text3);background:none;border:none;cursor:pointer;border-left:3px solid transparent;transition:all .25s var(--ease)}
.prod-tab-btn:hover{color:var(--primary)}
.prod-tab-btn.active{color:var(--primary);border-left-color:var(--accent);background:none}
.prod-tab-content{padding:2rem 2.5rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.prod-tab-panel h3{font-size:1.3rem;color:var(--primary);margin-bottom:1.5rem}
.features-2col{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.feature-group{background:linear-gradient(135deg,#0e2a4a 0%,#133a6b 100%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:1.5rem;transition:all .3s var(--ease)}
.feature-group:hover{box-shadow:0 6px 24px rgba(10,25,41,.3);transform:translateY(-2px);border-color:rgba(0,184,212,.3)}
.feature-group h4{font-size:1rem;color:var(--accent);margin-bottom:.8rem;font-weight:700}
.feature-group ul{list-style:disc;padding-left:1.2rem}
.feature-group ul li{font-size:.88rem;color:rgba(255,255,255,.85);line-height:1.8;margin-bottom:.3rem}
.feature-group ol{list-style:decimal;padding-left:1.2rem}
.feature-group ol li{font-size:.88rem;color:rgba(255,255,255,.85);line-height:1.8;margin-bottom:.3rem}
.feature-group.full-width{grid-column:1/-1}

/* ══ SERVICES — Tech Stacks Slider ══ */
.techstack-section{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}
.tslider{margin:2.5rem auto 0;overflow:hidden;position:relative}
.tslider-track{display:flex;gap:2rem;transition:transform .5s var(--ease)}
.tslider-card{flex-shrink:0;display:flex}
.tslider-card .tech-card{flex:1}
.tslider-dots{display:flex;justify-content:center;gap:.5rem;margin-top:5rem}
.tslider-dot{width:10px;height:10px;border-radius:50%;background:var(--border2);cursor:pointer;transition:all .3s var(--ease);border:none;padding:0}
.tslider-dot.active{background:var(--primary);transform:scale(1.2)}

/* All cards dark + center pop */
.tslider-card .tech-card{background:linear-gradient(135deg,#0e2a4a 0%,#133a6b 100%);border-color:rgba(255,255,255,.1);transition:all .5s var(--ease)}
.tslider-card .tech-card h3{color:var(--white);border-bottom-color:rgba(255,255,255,.15)}
.tslider-card .tech-card h3 .tech-h-ico{background:rgba(0,184,212,.2);color:var(--accent)}
.tslider-card .tech-card .tech-item{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.1)}
.tslider-card .tech-card .tech-icon{background:rgba(255,255,255,.1)}
.tslider-card .tech-card .tech-icon i{color:var(--accent)}
.tslider-card .tech-card::before{background:linear-gradient(180deg,var(--accent),var(--accent))}
.tslider-card .tech-card{transform:scale(1);opacity:1}
.tslider-card.center-card .tech-card{transform:scale(1.05);opacity:1;box-shadow:0 20px 60px rgba(0,184,212,.3),0 8px 24px rgba(10,25,41,.35);border-color:var(--accent)}
.tech-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem;transition:all .4s var(--ease);position:relative;overflow:hidden}
.tech-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:linear-gradient(180deg,var(--primary),var(--accent));transition:height .4s var(--ease)}
.tech-card:hover::before{height:100%}
.tech-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.tech-card h3{font-size:.95rem;font-weight:700;color:var(--primary);margin-bottom:1.2rem;padding-bottom:.6rem;border-bottom:2px solid rgba(21,101,192,.12);display:flex;align-items:center;gap:.5rem}
.tech-card h3 .tech-h-ico{width:28px;height:28px;border-radius:50%;background:rgba(21,101,192,.06);display:grid;place-items:center;font-size:.7rem;color:var(--primary);transition:all .4s var(--ease)}
.tech-card:hover h3 .tech-h-ico{background:var(--primary);color:var(--white)}
.tech-item{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;font-size:.85rem;color:var(--text2);border-bottom:1px solid var(--bg2);transition:padding-left .25s var(--ease)}
.tech-item:last-child{border-bottom:none}
.tech-card:hover .tech-item:hover{padding-left:.3rem;color:var(--primary)}
.tech-icon{width:30px;height:30px;border-radius:8px;background:var(--bg);display:grid;place-items:center;font-size:.85rem;flex-shrink:0;transition:all .25s var(--ease)}
/* ══ SERVICE CARDS (home page) ══ */
.svc-section{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}
.svc-section h2{color:var(--white)}
.svc-section .lead{color:#ffffff}
.svc-section .section-tag{color:var(--accent)}
.svc-section .btn-primary{background:var(--accent);color:var(--dark)}
.svc-section .btn-primary:hover{background:var(--white);color:var(--dark)}
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem;max-width:var(--max-w);margin-left:auto;margin-right:auto}
.svc-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:2rem 1.8rem;position:relative;overflow:hidden;transition:all .4s var(--ease)}
.svc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.svc-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.3);background:rgba(255,255,255,.1)}
.svc-card:hover::after{transform:scaleX(1)}
.svc-icon{width:48px;height:48px;border-radius:var(--radius);background:rgba(0,184,212,.12);display:grid;place-items:center;margin-bottom:1.2rem;transition:all .4s var(--ease)}
.svc-icon i{font-size:1.3rem;color:var(--accent);transition:all .4s var(--ease)}
.svc-card:hover .svc-icon{background:var(--accent);transform:translateY(-4px)}
.svc-card:hover .svc-icon i{color:var(--dark)}
.svc-card h3{font-size:1.25rem;color:var(--white);font-weight:700;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--accent)}
.svc-card ul{list-style:none}
.svc-card ul li{padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.88rem;color:#ffffff;padding-left:1rem;position:relative}
.svc-card ul li::before{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;background:var(--accent);border-radius:50%;transform:translateY(-50%)}
.svc-card ul li:last-child{border-bottom:none}
.svc-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:700;color:var(--accent);margin-top:1.2rem;transition:all .2s var(--ease)}
.svc-desc{font-size:1rem;color:#ffffff;line-height:1.75;margin-bottom:.5rem}
.svc-link:hover{gap:.6rem;color:var(--white)}

.services-list-section{margin-top:4rem}
.services-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}
.service-col{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;border-top:3px solid transparent;transition:all .4s var(--ease)}
.service-col:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-top-color:var(--accent)}
.service-col-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:2px solid var(--primary)}
.service-col-ico{width:40px;height:40px;border-radius:var(--radius);background:rgba(21,101,192,.08);display:grid;place-items:center;flex-shrink:0;transition:all .4s var(--ease)}
.service-col-ico i{font-size:1.1rem;color:var(--primary);transition:all .4s var(--ease)}
.service-col:hover .service-col-ico{background:var(--primary);transform:scale(1.1)}
.service-col:hover .service-col-ico i{color:var(--white)}
.service-col h3{font-size:1.05rem;color:var(--primary);font-weight:700;margin:0}
.service-col ul{list-style:none}
.service-col ul li{display:flex;align-items:center;gap:.5rem;padding:.7rem 0;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--text2)}
.service-col ul li:last-child{border:none}
.service-col ul li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.65rem;color:var(--accent);flex-shrink:0}
.service-col ul li a{color:var(--text2);transition:color .2s}
.service-col ul li a:hover{color:var(--primary)}

/* ══ PAGE HEADER ══ */
.page-header{padding:7rem 2rem 3.5rem;margin-top:108px;color:var(--white);text-align:center;position:relative;overflow:visible;background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}
.page-header .ph-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.page-header h1{color:var(--white);margin-bottom:.8rem;position:relative;z-index:1}
.page-header .lead{color:rgba(255,255,255,.85);margin:0 auto;position:relative;z-index:1}
.page-header .ph-icon{font-size:2.5rem;margin-bottom:1rem;opacity:.85;position:relative;z-index:1;animation:phFloat 4s ease-in-out infinite}
@keyframes phFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Page header variants */
.ph-products,.ph-services{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}

/* About & Contact: same dark gradient as others */
.ph-about{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}
.ph-contact{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%);padding:4.5rem 2rem 2.5rem}

/* ══ SPLIT HERO LAYOUT ══ */
.ph-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;max-width:var(--max-w);margin:0 auto;position:relative;z-index:1;padding:0 1rem}
.ph-split .ph-split-text{text-align:left}
.ph-split .ph-split-text h1{margin-bottom:.8rem}
.ph-split .ph-split-text .lead{margin:0 0 1.5rem}
.ph-split .ph-split-text .ph-icon{text-align:left}
.ph-split--reverse{direction:rtl}
.ph-split--reverse>*{direction:ltr}
.ph-split-img{display:flex;align-items:center;justify-content:center}
.ph-split-img img{width:100%;max-width:500px;height:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.3));animation:phFloat 4s ease-in-out infinite;border-radius:var(--radius-lg);object-fit:contain}
/* Services header: transparent PNG — no radius/shadow box */
.ph-services .ph-split-img img{max-width:600px;border-radius:0;filter:drop-shadow(0 10px 30px rgba(0,184,212,.25)) drop-shadow(0 20px 40px rgba(0,0,0,.4))}
/* Products header: transparent PNG — no radius/shadow box */
.ph-products .ph-split-img img{max-width:520px;border-radius:0;filter:drop-shadow(0 10px 30px rgba(0,184,212,.25)) drop-shadow(0 20px 40px rgba(0,0,0,.4))}

/* ══ SECTION IMAGES (body content — transparent PNGs) ══ */
.sec-img-wrap{display:flex;align-items:center;justify-content:center}
.sec-img-wrap img{width:100%;max-width:300px;height:auto;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(13,27,42,.10));transition:transform .4s var(--ease)}
.sec-img-wrap img:hover{transform:scale(1.05) translateY(-4px)}
/* Floating animation variant */
.sec-img-float img{animation:phFloat 5s ease-in-out infinite}
/* Image + text side-by-side layout */
.sec-split{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center;max-width:var(--max-w);margin:0 auto}
.sec-split--reverse{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:center;max-width:var(--max-w);margin:0 auto}
.sec-split--reverse .sec-img-wrap{order:2}

/* Service category pills */
.ph-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.ph-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .9rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.9);transition:all .3s var(--ease)}
.ph-pill:hover{background:rgba(0,184,212,.2);border-color:var(--accent)}
.ph-pill i{font-size:.65rem;color:var(--accent)}

/* ══ PROCESS STEPS ══ */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:2.5rem}
.process-step{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center;position:relative;transition:all .4s var(--ease)}
.process-step:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.process-num{position:absolute;top:1rem;right:1rem;font-size:2rem;font-weight:800;color:rgba(21,101,192,.08);font-family:var(--mono)}
.process-ico{width:50px;height:50px;border-radius:50%;background:rgba(21,101,192,.06);border:1px solid rgba(21,101,192,.12);display:grid;place-items:center;margin:0 auto 1rem;font-size:1.2rem;color:var(--primary);transition:all .4s var(--ease)}
.process-step:hover .process-ico{background:var(--primary);color:var(--white);transform:scale(1.1)}
.process-step:hover .process-ico i{color:var(--white)}
.process-ico i{transition:color .35s var(--ease)}
.process-step h4{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.5rem}
.process-step p{font-size:.83rem;color:var(--text2);line-height:1.7}

/* ══ ENGAGEMENT BOXES ══ */
.engage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:1.5rem}
.engage-box{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;text-align:center;border-top:3px solid transparent;transition:all .4s var(--ease)}
.engage-box:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-top-color:var(--accent)}
.engage-box-ico{width:50px;height:50px;border-radius:50%;background:rgba(21,101,192,.06);border:1px solid rgba(21,101,192,.12);display:grid;place-items:center;margin:0 auto 1rem;font-size:1.2rem;color:var(--primary);transition:all .4s var(--ease)}
.engage-box:hover .engage-box-ico{background:var(--primary)}
.engage-box:hover .engage-box-ico i{color:var(--white)}
.engage-box-ico i{transition:color .35s var(--ease)}
.engage-box h4{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.5rem}
.engage-box p{font-size:.83rem;color:var(--text2);line-height:1.7}

/* ══ INDUSTRIES ══ */
.ind-grid{display:flex;flex-wrap:wrap;gap:2rem;margin-top:2.5rem;max-width:var(--max-w);margin-left:auto;margin-right:auto;justify-content:center}
.ind-grid>.ind-card,.ind-grid>.ind-card--coming-soon{width:calc(33.333% - 1.34rem);min-width:280px}
.ind-card{background:var(--white);border:1px solid var(--border);border-left:3px solid transparent;border-radius:var(--radius-lg);padding:2.5rem;transition:all .4s var(--ease)}
.ind-card:hover{box-shadow:var(--shadow-md);border-left-color:var(--primary);background:linear-gradient(135deg,rgba(21,101,192,.03) 0%,var(--white) 100%)}
.ind-ico{font-size:2rem;margin-bottom:1rem}
.ind-t{font-size:1.12rem;font-weight:700;color:var(--text);margin-bottom:.5rem}
.ind-b{font-size:.97rem;color:var(--text3);line-height:1.75}
.ind-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.8rem}
.itag{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .5rem;background:var(--bg);border-radius:4px;color:var(--primary)}

/* ══ TEAM ══ */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:2.5rem}
.tc{background:var(--white);border:1px solid var(--border);border-left:3px solid transparent;border-radius:var(--radius-lg);padding:3rem;transition:all .4s var(--ease)}
.tc:hover{box-shadow:var(--shadow-lg);border-left-color:var(--accent);transform:translateY(-4px)}
.tc-av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:1.2rem;transition:transform .35s var(--ease)}
.tc:hover .tc-av{transform:scale(1.1)}
.tc-name{font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:.2rem}
.tc-role{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:1rem}
.tc-bio{font-size:.88rem;color:var(--text2);line-height:1.8;margin-bottom:1rem}
.tc-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.ttag{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .6rem;background:rgba(21,101,192,.06);border:1px solid rgba(21,101,192,.12);border-radius:4px;color:var(--primary);transition:all .25s var(--ease)}
.tc:hover .ttag{background:rgba(21,101,192,.1);border-color:rgba(21,101,192,.2)}

/* ══ CLIENTS ══ */
.cl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin-top:2.5rem}
.cl-cell{flex:0 1 240px;max-width:240px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.8rem 1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:all .4s var(--ease)}
.cl-cell:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--accent)}
.cl-logo{width:56px;height:56px;display:grid;place-items:center;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);border:2px solid rgba(21,101,192,.15);border-radius:50%;margin-bottom:1rem;background:rgba(21,101,192,.04);transition:all .4s var(--ease)}
.cl-cell:hover .cl-logo{background:rgba(21,101,192,.08);border-color:var(--primary)}
.cl-name{font-size:1rem;font-weight:700;color:var(--text)}
.cl-sub{font-size:.72rem;color:var(--text3);margin-top:.2rem}

/* ══ CONTACT ══ */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:2.5rem}
.form-g{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-g.full{grid-template-columns:1fr}
.form-field{display:flex;flex-direction:column;gap:.4rem}
.form-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.form-input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem 1rem;color:var(--text);font-family:var(--sans);font-size:.9rem;transition:all .25s;outline:none}
textarea.form-input{min-height:140px;resize:vertical}
select.form-input{cursor:pointer}
.form-submit{margin-top:1.2rem}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.ci{display:flex;gap:1rem;align-items:flex-start}
.ci-ico{width:44px;height:44px;background:rgba(21,101,192,.06);border:1px solid rgba(21,101,192,.12);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:1.2rem}

/* ══ ENGAGEMENT CARDS ══ */
.engage-card{display:flex;gap:1rem;align-items:flex-start;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.4rem;transition:all .3s var(--ease);border-left:3px solid transparent}
.engage-card:hover{box-shadow:var(--shadow-md);border-left-color:var(--accent)}
.engage-ico{width:36px;height:36px;border-radius:var(--radius);background:rgba(21,101,192,.06);display:grid;place-items:center;flex-shrink:0;transition:all .3s var(--ease)}
.engage-ico i{font-size:.85rem;color:var(--primary);transition:all .3s var(--ease)}
.engage-card:hover .engage-ico{background:var(--primary)}
.engage-card:hover .engage-ico i{color:var(--white)}
.engage-title{font-weight:700;font-size:.9rem;margin-bottom:.3rem;color:var(--text)}
.engage-desc{font-size:.82rem;color:var(--text2);line-height:1.6}
.ci-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:.15rem}
.ci-val{font-size:.92rem;color:var(--text2)}
.ci-val a{color:var(--primary);font-weight:600}
.ci-val a:hover{text-decoration:underline}

/* ══ FIND US — MAP + DETAILS ══ */
.find-us-section{padding:1rem 0}
.fu-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:stretch}
.fu-map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 30px rgba(13,27,42,.12);border:1px solid var(--border);min-height:420px;background:#f0f4f8}
.fu-map iframe{display:block;width:100%;height:100%;min-height:420px;border:0}
.fu-details{display:flex;flex-direction:column;gap:1rem}
.fu-card{display:flex;gap:1rem;align-items:flex-start;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.3rem;transition:all .3s var(--ease);flex:1}
.fu-card:hover{border-color:var(--accent);box-shadow:0 6px 22px rgba(0,184,212,.12);transform:translateY(-2px)}
.fu-ico{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;box-shadow:0 4px 12px rgba(21,101,192,.25)}
.fu-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:.25rem}
.fu-val{font-size:.92rem;color:var(--text);line-height:1.55}
.fu-val strong{color:var(--primary);font-weight:700}
.fu-val a{color:var(--primary);text-decoration:none;font-weight:600}
.fu-val a:hover{color:var(--accent);text-decoration:underline}

/* ══ LIFE AT SYTRONSOFT (GALLERY) ══ */
.ph-about-logo img{height:100px;width:auto}
.intro-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:3rem 3.5rem;border-left:4px solid var(--accent);box-shadow:0 4px 20px rgba(13,27,42,.06)}
.intro-card h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.08em;text-transform:uppercase}
.intro-card p{color:var(--text2);line-height:1.9;font-size:1.02rem}
.life-section{background:linear-gradient(135deg,#0e2a4a 0%,#133a6b 100%);color:var(--white);overflow:hidden}
.life-section .section-tag{color:var(--accent);border-color:rgba(0,184,212,.3)}
.life-section h2{color:var(--white)}
.life-section .lead{color:rgba(255,255,255,.75)}
.life-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.life-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.life-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.life-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.life-card:hover img{transform:scale(1.08)}
.life-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,25,41,.5) 100%);pointer-events:none;transition:opacity .4s var(--ease)}
.life-card:hover::after{opacity:.3}

/* ══ CTA BANNER ══ */
.cta-banner{border-radius:var(--radius-lg);padding:3.5rem;text-align:center;color:var(--white);position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;opacity:.06;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:24px 24px}
.cta-ico{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;margin:0 auto 1.2rem;font-size:1.4rem;color:var(--accent)}
.cta-banner h2{color:var(--white);margin-bottom:.6rem;position:relative}
.cta-banner p{color:#ffffff;font-size:1.07rem;margin-bottom:1.5rem;max-width:500px;margin-left:auto;margin-right:auto;position:relative}
.cta-banner .btn{position:relative}
.cta-banner .cta-ico{position:relative}

/* CTA variants */
.cta-home{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}
.cta-products{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}
.cta-services{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}
.cta-about{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}
.cta-contact{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}

/* ══ FOOTER ══ */
footer{background:#0a1929;padding:4rem 2rem 2rem;color:rgba(255,255,255,.9)}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;gap:2.5rem;max-width:var(--max-w);margin:0 auto 2.5rem}
.footer-logo-row{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.footer-logo-row img{height:40px}
.footer-company-name{font-size:1.3rem;font-weight:800;color:var(--white);letter-spacing:.03em}
.footer-brand p{font-size:.9rem;color:rgba(255,255,255,.85);line-height:1.7;max-width:300px;margin-bottom:1.5rem}
.footer-address{font-size:.85rem;color:rgba(255,255,255,.8);line-height:1.8}
.footer-address strong{color:#ffffff;font-weight:600}
.footer-address a{color:rgba(255,255,255,.85);transition:color .2s}
.footer-address a:hover{color:var(--accent)}
.footer-col h4{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--white);margin-bottom:1.2rem}
.footer-col a{display:block;font-size:.9rem;color:rgba(255,255,255,.85);padding:.35rem 0;transition:all .2s var(--ease)}
.footer-col a:hover{color:var(--white);padding-left:.3rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);max-width:var(--max-w);margin:0 auto;padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:rgba(255,255,255,.75)}
.footer-social{display:flex;gap:.8rem}
.footer-social a{width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--white);font-size:1rem;transition:all .2s var(--ease)}
.footer-social a:hover{background:var(--accent);color:var(--dark)}

/* ══ REVEAL ══ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv-left{opacity:0;transform:translateX(-40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv-right{opacity:0;transform:translateX(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv-left.on,.rv-right.on{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ══ WHY-GRID (index.html "Why SytronSoft" section) ══ */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;max-width:var(--max-w);margin:0 auto}
.why-row{display:flex;gap:1rem;align-items:flex-start;padding:.6rem;border-radius:var(--radius);transition:all .3s var(--ease);cursor:default}
.why-row:hover{background:var(--bg)}
.why-ico{width:36px;height:36px;background:var(--bg);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:1rem;transition:all .4s var(--ease)}
.why-ico i{color:var(--primary);transition:all .4s var(--ease)}
.why-row:hover .why-ico{background:var(--primary);transform:scale(1.15)}
.why-row:hover .why-ico i{color:var(--white)}

/* ══ FEATURES-4 (products.html "Key Features" section) ══ */
.features-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:2.5rem}

/* ══ TECH-INNER-GRID (services.html nested 2-col inside tech cards) ══ */
.tech-inner-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}

/* ══ STATS-BOX (index.html stats panel) ══ */
.stats-box{background:var(--bg);border-radius:var(--radius-lg);padding:2.5rem;text-align:center}

/* ══ WHAT MAKES US UNIQUE (index.html) ══ */
.unique-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:2.5rem;max-width:var(--max-w);margin-left:auto;margin-right:auto}
.unique-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem 1.8rem;text-align:center;position:relative;overflow:hidden;transition:all .4s var(--ease)}
.unique-card::before{content:'';position:absolute;top:0;left:50%;width:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent));transition:all .4s var(--ease);transform:translateX(-50%)}
.unique-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.unique-card:hover::before{width:100%;left:0;transform:none}
.unique-ico{width:52px;height:52px;border-radius:50%;background:rgba(21,101,192,.06);border:1px solid rgba(21,101,192,.12);display:grid;place-items:center;margin:0 auto 1.2rem;font-size:1.3rem;color:var(--primary);transition:all .4s var(--ease)}
.unique-card:hover .unique-ico{background:var(--primary);color:var(--white);transform:scale(1.1)}
.unique-card:hover .unique-ico i{color:var(--white)}
.unique-ico i{transition:color .35s var(--ease)}
.unique-card h4{font-size:1.12rem;font-weight:700;color:var(--text);margin-bottom:.5rem}
.unique-card p{font-size:.97rem;color:var(--text3);line-height:1.75}

/* ══ FEATURED PRODUCTS (index.html) ══ */
.fp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:2.5rem;max-width:var(--max-w);margin-left:auto;margin-right:auto}
.fp-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem 1.8rem;position:relative;overflow:hidden;transition:all .4s var(--ease);border-top:3px solid transparent}
.fp-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);border-top-color:var(--accent)}
.fp-ico{width:48px;height:48px;border-radius:var(--radius);background:rgba(21,101,192,.08);display:grid;place-items:center;margin-bottom:1.2rem;font-size:1.3rem;color:var(--primary);transition:all .4s var(--ease)}
.fp-card:hover .fp-ico{background:var(--primary);transform:translateY(-3px)}
.fp-card:hover .fp-ico i{color:var(--white)}
.fp-ico i{transition:color .35s var(--ease)}
.fp-card h4{font-size:1.05rem;font-weight:700;color:var(--primary);margin-bottom:.5rem}
.fp-card p{font-size:.85rem;color:var(--text3);line-height:1.75;margin-bottom:1rem}
.fp-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:700;color:var(--primary);transition:all .2s var(--ease)}
.fp-link:hover{gap:.6rem;color:var(--accent)}

/* ══ FONT AWESOME ICON STYLES ══ */
.tech-icon i{color:var(--primary);font-size:.9rem}
.ind-ico i{color:var(--primary);font-size:1.6rem}
.ci-ico i{color:var(--primary);font-size:1.1rem}

/* ══ ICON HOVER EFFECTS ══ */
.tech-card:hover .tech-icon{transform:scale(1.15);transition:transform .25s var(--ease)}
.tech-card:hover .tech-icon i{color:var(--accent);transition:color .25s var(--ease)}
.tech-icon{transition:transform .25s var(--ease)}
.ind-card:hover .ind-ico i{color:var(--accent)}
.ind-ico i{transition:all .4s var(--ease)}

/* ══ INDUSTRY CARD LINK ══ */
.ind-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.97rem;font-weight:700;color:var(--primary);margin-top:1rem;transition:all .2s var(--ease)}
.ind-link:hover{gap:.6rem;color:var(--accent)}

/* ══ COMING SOON (home + products) ══ */
.ind-card--coming-soon{border-style:dashed;opacity:.65}
.ind-card--coming-soon:hover{opacity:.75;transform:none;box-shadow:none}
.ind-coming-soon{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.2rem .6rem;background:var(--gold);color:var(--white);border-radius:4px;margin-bottom:.6rem}

/* ══ SCROLL OFFSET FOR ANCHOR TARGETS ══ */
[id="transportation"],[id="smart-cities"],[id="security"],[id="hardware"],[id="agriculture"]{scroll-margin-top:126px}
.features-4 > div{transition:all .25s var(--ease)}
.features-4 > div:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.ci{transition:all .25s var(--ease)}
.ci:hover .ci-ico{background:rgba(21,101,192,.06);transform:scale(1.08);transition:all .25s var(--ease)}
.ci-ico{transition:all .25s var(--ease)}

/* ══ CTA GRADIENT ANIMATION ══ */
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.cta-banner{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%)}

/* ══ CARD HOVER ENHANCEMENTS ══ */

/* ══ TAB FADE TRANSITIONS ══ */
.prod-tab-panel{display:none;opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.prod-tab-panel.active{display:block}
.prod-tab-panel.tab-visible{opacity:1;transform:none}

/* ══ BUTTON PRESS EFFECT ══ */
.btn:active{transform:translateY(0) !important}


/* ══ FORM FOCUS GLOW ══ */
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(21,101,192,.1),0 2px 8px rgba(21,101,192,.08);transform:translateY(-1px)}
.form-field:focus-within .form-label{color:var(--primary)}

/* ══ COUNTER VALUE ══ */
.counter-val{font-variant-numeric:tabular-nums}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px){
  .utility-bar{padding:0 2.5rem;font-size:.75rem}
  .ub-left{gap:1rem}
  .hero{height:300px}
  .hero-center{padding:9rem 2rem 5.5rem}
  .hero-center h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:1rem}
  .hero-btns{gap:.8rem;margin-top:.8rem}
  .hero-btns .btn,.hero-btns .btn-outline-light{font-size:.88rem;padding:.7rem 1.3rem}
  .hero-stats{gap:.5rem;bottom:1.2rem;flex-wrap:nowrap}
  .hero-stat-box{padding:.6rem 1rem}
  .hero-stat-val{font-size:1.3rem}
  .hero-stat-label{font-size:.58rem}
  .ph-detail-grid{grid-template-columns:1fr 1.3fr;gap:2rem}
  .ph-detail-content h1{font-size:2.4rem !important;margin-top:0 !important}
  .ph-detail-play img[alt="Robot pointing"]{width:110px !important}
  .play-circle{width:80px;height:80px}
  .play-circle i{font-size:1.5rem}
  .prod-tabs-layout{grid-template-columns:1fr}
  .prod-tab-nav{flex-direction:row;overflow-x:auto;padding:.5rem 0;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
  .prod-tab-btn{border-left:none;border-bottom:3px solid transparent;white-space:nowrap;padding:.8rem 1.2rem}
  .prod-tab-btn.active{border-left-color:transparent;border-bottom-color:var(--accent)}
  .prod-tab-content{border-radius:var(--radius);padding:1.5rem 1.8rem}
  .pshow-banner{height:180px}
  .pshow-body{padding:1.5rem 1.6rem 1.6rem}
  .pshow-body h3{font-size:1.25rem}
  .pshow-body p{font-size:.9rem}
  .pslider-track{gap:1.8rem}
  .contact-layout{grid-template-columns:1fr}
  .fu-grid{grid-template-columns:1fr;gap:1.5rem}
  .fu-map,.fu-map iframe{min-height:340px}
  .footer-grid{grid-template-columns:auto auto auto;grid-template-areas:"brand explore products" "brand services quick";gap:2rem 3.5rem;justify-content:space-between;align-items:start}
  .footer-brand{grid-area:brand;max-width:240px;padding-left:0}
  .footer-brand p{max-width:240px}
  .footer-col:nth-of-type(1){grid-area:explore}
  .footer-col:nth-of-type(2){grid-area:products}
  .footer-col:nth-of-type(3){grid-area:services}
  .footer-col:nth-of-type(4){grid-area:quick}
  .services-columns{grid-template-columns:repeat(2,1fr)}
  .svc-cards{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr;gap:1.8rem}
  .why-row{padding:.4rem;gap:.8rem}
  .why-ico{width:32px;height:32px;font-size:.85rem}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .cl-grid{grid-template-columns:repeat(2,1fr)}
  .feat-layout{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:repeat(3,1fr)}
  .features-4{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .engage-grid{grid-template-columns:repeat(2,1fr)}
  .unique-grid{grid-template-columns:repeat(2,1fr)}
  .fp-grid{grid-template-columns:repeat(2,1fr)}
  .mega-inner.cols-4{grid-template-columns:repeat(2,1fr)}
  .mega-inner.cols-3{grid-template-columns:repeat(3,1fr)}
  .mega-inner.cols-5{grid-template-columns:repeat(3,1fr)}
  nav{gap:1rem;padding:0 2rem;justify-content:space-between}
  .brand-name{font-size:1.2rem}
  .n-logo img{height:38px}
  .n-links{display:none !important}
  .n-ham{display:flex !important}
  .mega-panel{display:none !important}
  .mob-nav{padding:0 1.5rem}
  .mob-nav.open{padding:.6rem 1.5rem;max-height:calc(100vh - 108px)}
  .mob-nav a{font-size:.9rem;padding:.65rem 0}
  .mob-nav .mcta{margin-top:.6rem;padding:.7rem;font-size:.9rem}
  .mob-dropdown>.mob-drop-toggle{font-size:.9rem;padding:.65rem 0}
  .mob-drop-panel a{font-size:.82rem !important;padding:.45rem 0 .45rem 1.3rem !important}
  .mob-drop-panel .mob-drop-head{font-size:.65rem;padding:.45rem 0 .15rem 1.3rem}
  .mega-inner{padding:1.8rem 1.5rem 1.2rem;gap:1.5rem}
  .mega-col h4{font-size:.68rem;min-height:2.4rem}
  .mega-col a{font-size:.82rem;padding:.45rem .5rem;gap:.55rem}
  .mega-col a strong{font-size:.82rem}
  .mega-col a em{font-size:.7rem}
  .mega-ico{width:28px;height:28px;font-size:.72rem}
  .mega-cat-illus{height:80px;margin-bottom:.5rem}
  .mega-cat-illus img{height:64px}
  section{padding:4rem 2.5rem}
  .page-header{padding:6rem 2.5rem 3rem}
  .ph-split{gap:2rem}
  .ph-split-img img{max-width:400px}
  .ph-services .ph-split-img img{max-width:480px}
  /* Products page hero — same 2-column desktop layout, just smaller */
  .ph-products{padding:4.5rem 2rem 2rem}
  .ph-products .ph-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}
  .ph-products .ph-split-text{text-align:left;order:1}
  .ph-products h1{font-size:2rem;margin-bottom:.5rem}
  .ph-products .lead{font-size:.92rem;line-height:1.55;margin:0 0 1rem}
  .ph-products .ph-pills{margin-top:.9rem;gap:.4rem}
  .ph-products .ph-pill{font-size:.7rem;padding:.3rem .7rem}
  .ph-products .ph-split-img{display:flex;align-items:center;justify-content:center;order:2}
  .ph-products .ph-split-img img{max-width:360px;width:100%;height:auto}
  .sec-split{gap:2rem}
  .sec-split .sec-img-wrap img{max-width:300px}
  .life-gallery{gap:1.2rem}
  .cta-banner{padding:2.5rem 2rem}
  .ind-grid{gap:1.2rem;margin-top:1.8rem}
  .unique-grid{gap:1.2rem;margin-top:1.8rem}
  .svc-cards{gap:1.2rem;margin-top:1.8rem}
  .fp-grid{gap:1.2rem;margin-top:1.8rem}
  .features-4{gap:1.2rem;margin-top:1.8rem}
  .process-grid{gap:1.2rem;margin-top:1.8rem}
  .engage-grid{gap:1.2rem;margin-top:1.8rem}
  .ind-card{padding:1.4rem 1.2rem}
  .ind-card .ind-ico{font-size:1.5rem;margin-bottom:.6rem}
  .ind-t{font-size:1rem;margin-bottom:.35rem}
  .ind-b{font-size:.85rem;line-height:1.6}
  .ind-link{font-size:.85rem;margin-top:.7rem}
  .unique-card{padding:1.4rem 1.1rem}
  .unique-card .unique-ico{width:42px;height:42px;font-size:1rem;margin-bottom:.7rem}
  .unique-card h4{font-size:.98rem;margin-bottom:.35rem}
  .unique-card p{font-size:.84rem;line-height:1.6}
  .svc-card{padding:1.4rem 1.1rem}
  .svc-card .svc-icon{width:40px;height:40px;margin-bottom:.7rem}
  .svc-card .svc-icon i{font-size:1rem}
  .svc-card h3{font-size:1rem;margin-bottom:.6rem;padding-bottom:.45rem}
  .svc-card ul li{font-size:.82rem;padding:.35rem 0}
  .svc-link{font-size:.82rem;margin-top:.8rem}
  .fp-card{padding:1.5rem 1.2rem}
  .fp-card .fp-ico{width:42px;height:42px;font-size:1rem;margin-bottom:.7rem}
  .fp-card h4{font-size:.98rem;margin-bottom:.3rem}
  .fp-card p{font-size:.82rem;line-height:1.6;margin-bottom:.7rem}
  .fp-link{font-size:.8rem}
  .feat-card{padding:1.4rem 1.2rem}
  .feat-ico{font-size:1.5rem;margin-bottom:.7rem}
  .feat-title{font-size:1rem;margin-bottom:.4rem}
  .feat-desc{font-size:.84rem;line-height:1.6}
  .process-step{padding:1.5rem 1.2rem}
  .process-step h4{font-size:.92rem}
  .process-step p{font-size:.8rem;line-height:1.6}
  .process-num{font-size:1.6rem}
  .process-ico{width:42px;height:42px;font-size:1rem;margin-bottom:.7rem}
  .service-col{padding:1.6rem 1.3rem}
  .service-col h3{font-size:.98rem}
  .service-col ul li{font-size:.85rem;padding:.55rem 0}
  .stats-box{padding:1.5rem}
  .tslider-dots{margin-top:3rem}
  footer{padding:2.5rem 2.5rem 1.3rem}
  .footer-brand p{font-size:.85rem;margin-bottom:1rem}
  .footer-address{font-size:.8rem;line-height:1.7}
  .footer-logo-row img{height:36px}
  .footer-company-name{font-size:1.2rem}
  .footer-col h4{font-size:.78rem;margin-bottom:.8rem}
  .footer-col a{font-size:.86rem;padding:.3rem 0}
  .footer-bottom{padding-top:1.2rem;font-size:.78rem}
  .slogan-section{padding:2.5rem 1.5rem .8rem}
  .team-card,.tc{padding:2rem 1.6rem}
  .intro-card{padding:2.2rem 2rem}
  .intro-card p{font-size:.95rem;line-height:1.8}
  .ph-about-logo img{height:80px}
  .feat-card{padding:1.8rem 1.4rem}
  .tech-card{padding:1.8rem 1.4rem}
}
/* Products "See What's New" showcase — keep desktop sidebar layout at tablet (768-1024px) */
@media(min-width:768px) and (max-width:1024px){
  #pcatTabs{grid-template-columns:130px 1fr;gap:0}
  #pcatTabs .prod-tab-nav{flex-direction:column;overflow-x:visible;padding:.6rem 0;gap:.15rem;border-bottom:none;margin-bottom:0;border-right:1px solid var(--border)}
  #pcatTabs .prod-tab-btn{display:block;width:100%;text-align:left;padding:.5rem .6rem;font-size:.65rem;white-space:nowrap;border-left:3px solid transparent;border-bottom:none;line-height:1.25;letter-spacing:.01em}
  #pcatTabs .prod-tab-btn i{font-size:.7rem;margin-right:.3rem !important}
  #pcatTabs .prod-tab-btn.active{border-left-color:var(--accent);border-bottom-color:transparent}
  #pcatTabs .prod-tab-content{padding:1.5rem 1.5rem}
  /* Equal-height cards in the slider */
  #pcatTabs .pslider-track{align-items:stretch}
  #pcatTabs .pslider-card{display:flex}
  #pcatTabs .pshow-card{display:flex;flex-direction:column;height:100%;width:100%}
  #pcatTabs .pshow-banner{flex-shrink:0}
  #pcatTabs .pshow-body{flex:1;display:flex;flex-direction:column}
  #pcatTabs .pshow-body p{flex:1}
}
@media(max-width:768px){
  html,body{overflow-x:hidden}
  section{padding:3rem 1.2rem;overflow:hidden}
  .utility-bar{height:56px;flex-direction:column;justify-content:center;gap:.2rem;padding:0 1.2rem;text-align:center}
  .ub-left{justify-content:center;gap:.8rem;font-size:.72rem}
  .ub-right{justify-content:center;gap:.8rem;font-size:.72rem}
  .ub-sep{display:none}
  nav{top:56px;padding:0 1.2rem}
  .mob-nav{top:128px}
  .hero{margin-top:128px;min-height:280px;height:auto}
  .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero-center{padding:1.5rem 1.2rem;justify-content:center;gap:.2rem}
  .hero-center h1{font-size:1.4rem;line-height:1.25;margin-bottom:.6rem}
  .hero-center h1 br{display:none}
  .hero-btns{gap:.4rem;margin-top:.3rem;margin-bottom:1.5rem;flex-direction:row;justify-content:center;flex-wrap:nowrap;width:auto;max-width:none}
  .hero-btns .btn,.hero-btns .btn-outline-light{font-size:.65rem;padding:.4rem .7rem;width:auto;text-align:center;white-space:nowrap}
  .hero-stats{position:static;transform:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;width:100%;max-width:none;margin-top:.4rem;padding:0 .5rem}
  .hero-stat-box{padding:.4rem .2rem;flex-direction:column;gap:.1rem;text-align:center;justify-content:center}
  .hero-stat-val{font-size:.85rem}
  .hero-stat-label{font-size:.42rem;letter-spacing:.05em}
  .page-header{margin-top:128px}
  .ph-detail-grid{grid-template-columns:1fr;text-align:center;gap:1.5rem}
  .ph-detail-content{text-align:center}
  .ph-detail-content h1{font-size:2.6rem !important;margin-top:0 !important;margin-bottom:.4rem}
  .ph-detail-content .prod-header-actions{flex-direction:row;justify-content:center;width:auto;max-width:none;gap:.5rem}
  .ph-detail-content .prod-header-actions .btn{width:auto;font-size:.7rem;padding:.45rem .8rem}
  .ph-detail-content .lead{font-size:.95rem !important;margin-bottom:.5rem}
  .ph-detail-desc{margin-left:auto;margin-right:auto}
  .ph-detail-play{display:block !important;position:relative !important;right:auto !important;bottom:auto !important;margin-top:.8rem;text-align:center}
  .ph-detail-play>div{display:block !important}
  .ph-detail-play>div>div{display:inline-flex;flex-direction:column;align-items:center;gap:.3rem}
  .ph-detail-play .play-circle{width:44px;height:44px;font-size:.9rem}
  .ph-detail-play .play-label{font-size:.65rem}
  .ph-detail-play img[alt="Robot pointing"]{position:absolute !important;width:50px !important;left:calc(50% + 35px) !important;bottom:0}
  .play-circle{width:70px;height:70px}
  .play-circle i{font-size:1.3rem}
  .prod-header-actions{flex-direction:column;align-items:stretch;width:100%;max-width:280px;margin-left:auto;margin-right:auto}
  .prod-header-actions .btn{width:100%;text-align:center;justify-content:center}
  .prod-tabs-layout{grid-template-columns:1fr;overflow:hidden;max-width:100%;width:100%;box-sizing:border-box;margin-top:1rem !important}
  .prod-tab-nav{flex-direction:row;overflow-x:auto;gap:0;border-bottom:1px solid var(--border);border-right:none;margin-bottom:.8rem;padding:0;-webkit-overflow-scrolling:touch}
  .prod-tab-btn{border-left:none;border-bottom:2px solid transparent;white-space:nowrap;padding:.4rem .6rem;font-size:.6rem;text-align:center;line-height:1.2}
  .prod-tab-btn i{font-size:.5rem;margin-right:.15rem !important}
  .prod-tab-btn.active{border-left-color:transparent;border-bottom-color:var(--accent)}
  .prod-tab-content{padding:.5rem;border-radius:var(--radius);overflow:hidden;max-width:100%;box-sizing:border-box}
  .pshow-banner{height:90px}
  .pshow-banner img{width:60%;height:65%}
  .pshow-body{padding:.7rem .7rem .8rem}
  .pshow-body h3{font-size:.85rem;margin-bottom:.3rem}
  .pshow-body p{font-size:.7rem;line-height:1.5;margin-bottom:.6rem}
  .pshow-tag{font-size:.55rem}
  .pslider{padding:0;margin-top:1rem;overflow:hidden;width:100%;max-width:100%}
  .pslider-track{gap:1rem}
  .pslider-card{max-width:100%}
  .pshow-card{max-width:100%}
  .no-ub nav{top:0}
  .n-ham{display:flex !important;width:40px;height:40px}
  .no-ub .mob-nav{top:72px}
  .no-ub .hero{margin-top:72px}
  .mob-nav.open{padding:1rem 1.3rem;max-height:calc(100vh - 72px)}
  .mob-nav a{font-size:.92rem;padding:.7rem 0}
  .mob-dropdown>.mob-drop-toggle{font-size:.92rem;padding:.7rem 0}
  .mob-drop-panel a{font-size:.85rem !important;padding:.55rem 0 .55rem 1.3rem !important}
  .mob-drop-panel .mob-drop-head{font-size:.66rem;padding:.5rem 0 .15rem 1.3rem}
  section{padding:4rem 1.2rem;overflow:hidden}
  .container{padding:0 1.2rem}
  .ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
  .ind-grid>.ind-card,.ind-grid>.ind-card--coming-soon{width:auto;min-width:0}
  .ind-card{padding:1rem .8rem}
  .ind-card .ind-ico{font-size:1rem;margin-bottom:.4rem}
  .ind-t{font-size:.75rem}
  .ind-b{font-size:.65rem;line-height:1.4}
  .team-grid{grid-template-columns:1fr}
  .cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
  .cl-cell{max-width:none;padding:.6rem .8rem}
  .cl-name{font-size:.75rem}
  .cl-sub{font-size:.62rem}
  .form-g{grid-template-columns:1fr}
  .fu-grid{grid-template-columns:1fr;gap:1.2rem}
  .fu-map,.fu-map iframe{min-height:280px}
  .fu-card{padding:.9rem 1rem;gap:.85rem}
  .fu-ico{width:38px;height:38px;font-size:.9rem}
  .fu-val{font-size:.86rem}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .features-2col{grid-template-columns:1fr}
  .services-columns{grid-template-columns:1fr;gap:.8rem}
  .service-col{padding:.7rem .8rem}
  .service-col-head{margin-bottom:.5rem;padding-bottom:.4rem;gap:.4rem}
  .service-col-ico{width:28px;height:28px}
  .service-col-ico i{font-size:.75rem}
  .service-col h3{font-size:.8rem}
  .service-col ul li{font-size:.68rem;padding:.35rem 0;gap:.35rem}
  .service-col ul li::before{font-size:.5rem}
  .svc-cards{grid-template-columns:1fr;gap:.9rem;margin-top:1.2rem}
  .svc-section{padding:2.5rem 1.2rem}
  .svc-card{padding:1.1rem .9rem}
  .svc-card h3{font-size:.92rem;margin-bottom:.4rem;padding-bottom:.3rem}
  .svc-card .svc-desc{font-size:.78rem;line-height:1.5}
  .svc-link{font-size:.78rem;margin-top:.6rem}
  .hero-content{padding:0 1.5rem}
  .why-grid{grid-template-columns:1fr;gap:2rem}
  .feat-layout{grid-template-columns:1fr}
  .feat-intro{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6rem}
  .feat-intro .section-tag{grid-column:1/-1;margin-bottom:.1rem}
  .feat-intro h2{font-size:1.2rem;margin-bottom:.3rem}
  .feat-intro p{font-size:.78rem;line-height:1.5;margin-bottom:0}
  .feat-intro .sec-img-float{margin-top:0 !important;grid-row:2/4;grid-column:2}
  .feat-intro .sec-img-float img{max-width:100px}
  .feat-intro .btn{grid-column:1/-1;justify-self:start;margin-top:.5rem !important}
  .feat-grid{grid-template-columns:1fr;gap:.6rem}
  .feat-card{padding:.6rem .8rem;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 .5rem}
  .feat-ico{font-size:.9rem;margin-bottom:0;grid-row:1;grid-column:1;align-self:center}
  .feat-title{font-size:.72rem;margin-bottom:0;grid-row:1;grid-column:2;align-self:center}
  .feat-desc{font-size:.62rem;line-height:1.4;grid-row:2;grid-column:1 / -1;margin-top:.25rem}
  .features-4{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .process-step{padding:.8rem .7rem}
  .process-step h4{font-size:.72rem}
  .process-step p{font-size:.62rem;line-height:1.4}
  .process-ico{width:36px;height:36px;font-size:.85rem;margin-bottom:.4rem}
  .engage-grid{grid-template-columns:1fr}
  .unique-grid{grid-template-columns:repeat(2,1fr)}
  .fp-grid{grid-template-columns:1fr}
  .tech-inner-grid{grid-template-columns:1fr}
  .brand-name{font-size:1.1rem}
  .n-logo img{height:36px}
  .page-header{padding:5rem 1.2rem 2.5rem}
  .page-header h1{font-size:1.6rem}
  .page-header .lead{font-size:.88rem}
  .ph-split{grid-template-columns:1fr;text-align:center}
  .ph-split .ph-split-text{text-align:center}
  .ph-split .ph-split-text .lead{margin:0 auto 1.5rem}
  .ph-split--reverse{direction:ltr}
  .ph-split-img{order:-1}
  .ph-split-img img{max-width:280px;margin:0 auto}
  /* Services page — side-by-side header on mobile (same as products) */
  .ph-services .ph-split{grid-template-columns:1fr auto;text-align:left;gap:.6rem;align-items:start}
  .ph-services .ph-split-text{text-align:left;order:1}
  .ph-services .ph-split-img{order:2;align-self:start;margin-top:0}
  .ph-services .ph-split-img img{max-width:110px;animation:none}
  .ph-services .ph-split-text .lead{margin:0 0 .6rem;font-size:.78rem}
  .ph-services h1{font-size:1.3rem}
  .ph-products .ph-split-img img{max-width:300px}
  /* Products page — side-by-side header on mobile */
  .ph-products .ph-split{grid-template-columns:1fr auto;text-align:left;gap:.6rem;align-items:start}
  .ph-products .ph-split-text{text-align:left;order:1}
  .ph-products .ph-split-img{order:2;align-self:start;margin-top:0}
  .ph-products .ph-split-img img{max-width:110px;animation:none}
  .ph-products .ph-split-text .lead{margin:0 0 .6rem;font-size:.78rem}
  .ph-products h1{font-size:1.3rem}
  /* Contact page — side-by-side header on mobile (same as products/services) */
  .ph-contact .ph-split{grid-template-columns:1fr auto;text-align:left;gap:.6rem;align-items:start}
  .ph-contact .ph-split-text{text-align:left;order:1}
  .ph-contact .ph-split-img{order:2;align-self:start;margin-top:0}
  .ph-contact .ph-split-img img{max-width:110px;animation:none}
  .ph-contact .ph-split-text .lead{margin:0 0 .6rem;font-size:.78rem}
  .ph-contact h1{font-size:1.3rem}
  /* Contact form & info */
  .contact-layout{grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem}
  .contact-layout h2{font-size:1rem !important}
  .contact-info{gap:.8rem}
  .ci{gap:.6rem}
  .ci-ico{width:34px;height:34px;font-size:.85rem}
  .ci-label{font-size:.6rem}
  .ci-val{font-size:.78rem}
  /* Find Us section */
  .find-us-section{margin-top:1.5rem !important}
  .find-us-section h2{font-size:1.1rem !important}
  .find-us-section .lead{font-size:.78rem}
  .fu-grid{grid-template-columns:1fr;gap:1rem}
  .fu-map,.fu-map iframe{min-height:200px}
  .fu-card{padding:.7rem .8rem;gap:.6rem}
  .fu-ico{width:32px;height:32px;font-size:.8rem}
  .fu-label{font-size:.6rem}
  .fu-val{font-size:.72rem}
  /* Engagement models */
  .engage-section{margin-top:1.5rem !important}
  .engage-section h3{font-size:.95rem !important}
  .engage-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .engage-card{padding:.8rem .9rem;gap:.5rem}
  .engage-ico{width:30px;height:30px;min-width:30px;font-size:.7rem}
  .engage-ico i{font-size:.7rem}
  .engage-title{font-size:.72rem}
  .engage-desc{font-size:.62rem;line-height:1.4}
  .ph-pills{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:.3rem}
  .ph-pill{font-size:.55rem !important;padding:.18rem .45rem !important}
  .ph-products ~ section .text-center{text-align:left}
  .sec-split,.sec-split--reverse{grid-template-columns:1fr auto;gap:.6rem;text-align:left;align-items:start}
  .sec-split h2,.sec-split--reverse h2{font-size:1.1rem}
  .sec-img-wrap img{max-width:100px;margin:0}
  .sec-img-float img{max-width:100px}
  /* About intro — image on top, card below */
  .ph-about ~ section .sec-split{grid-template-columns:1fr;gap:.6rem;text-align:center}
  .ph-about ~ section .sec-split .sec-img-wrap{order:-1}
  .ph-about ~ section .sec-split .sec-img-wrap img{max-width:100px;margin:0 auto}
  .intro-card h2{font-size:.95rem !important;letter-spacing:.04em !important}
  .engage-card{flex-direction:column;gap:.6rem}
  .cl-grid{grid-template-columns:1fr 1fr}
  .stats-box{padding:1.5rem}
  .rv-left{transform:translateX(-20px)}
  .rv-right{transform:translateX(20px)}
  .life-gallery{grid-template-columns:1fr;max-width:500px;margin-left:auto;margin-right:auto}
  .cta-banner{background:linear-gradient(160deg,#0a1929 0%,#0e2a4a 40%,#133a6b 75%,#0a1929 100%) !important;padding:2rem 1.3rem}
  .cta-banner h2{font-size:1.35rem;margin-bottom:.4rem}
  .cta-banner p{font-size:.88rem;margin-bottom:1.2rem}
  .cta-ico{width:46px;height:46px;font-size:1.1rem;margin-bottom:.8rem}
  .indslider{padding:0 .8rem}
  .indslider-track{gap:1rem}
  .ind-card{padding:1.8rem 1.4rem}
  .unique-card{padding:1.6rem 1.2rem}
  .svc-card{padding:1.6rem 1.2rem}
  .process-step{padding:1.8rem 1.3rem}
  .service-col{padding:1.6rem 1.3rem}
  .service-col h3{font-size:1rem}
  .service-col ul li{font-size:.84rem;padding:.55rem 0}
  .tslider-dots{margin-top:2rem}
  .tslider-card .tech-card h3{font-size:.88rem}
  .tech-item{font-size:.82rem}
  .stats-box{padding:1.3rem}
  .team-card,.tc{padding:1.6rem 1.3rem}
  .intro-card{padding:1.6rem 1.3rem}
  .intro-card p{font-size:.88rem;line-height:1.75}
  .ph-about-logo{margin-top:-2rem !important}
  .ph-about-logo img{height:64px}
  .tc-av{width:52px;height:52px;font-size:1rem;margin-bottom:.8rem}
  .tc-name{font-size:1.05rem}
  .tc-role{font-size:.7rem}
  .tc-bio{font-size:.82rem;line-height:1.65}
  .ttag{font-size:.62rem;padding:.22rem .5rem}
  .engage-card{padding:1.1rem 1.2rem}
  .engage-title{font-size:.88rem}
  .engage-desc{font-size:.82rem}
  .form-input{font-size:.82rem;padding:.65rem .8rem;max-width:100%;box-sizing:border-box}
  .form-label{font-size:.68rem}
  textarea.form-input{min-height:100px}
  select.form-input{font-size:.75rem;text-overflow:ellipsis;width:100%;max-width:100%}
  .form-submit .btn{font-size:.8rem;padding:.65rem 1.2rem}
  .contact-layout>div{max-width:100%;overflow:hidden}
  .ci-ico{width:40px;height:40px;font-size:1.05rem}
  .ci-label{font-size:.68rem}
  .ci-val{font-size:.88rem}
  .feat-card{padding:1.5rem 1.2rem}
  .feature-group{padding:1.2rem 1.1rem}
  .feature-group h4{font-size:.92rem}
  .feature-group ul li{font-size:.82rem;line-height:1.65}
  .feature-group ol li{font-size:.82rem;line-height:1.65}
  .prod-tabs-section{padding:3rem 1.2rem}
  .prod-tab-panel h3{font-size:1.1rem;margin-bottom:1rem}
  .tech-card{padding:1.5rem 1.2rem}
  .slogan-section{padding:2rem 1.2rem .3rem}
  .slogan-heading{font-size:1.45rem;margin-bottom:.5rem}
  .slogan-sub{font-size:.82rem;line-height:1.55}
  footer{padding:2rem 1.2rem 1.2rem}
  .footer-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "explore products" "services quick";gap:1.2rem;margin-bottom:1.5rem}
  .footer-brand{grid-area:brand;width:100%;max-width:100%;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:1.2rem}
  .footer-brand p{max-width:100%;font-size:.82rem;margin-bottom:.8rem}
  .footer-logo-row img{height:32px}
  .footer-company-name{font-size:1.1rem}
  .footer-address{font-size:.78rem;line-height:1.6}
  .footer-col:nth-of-type(1){grid-area:explore}
  .footer-col:nth-of-type(2){grid-area:products}
  .footer-col:nth-of-type(3){grid-area:services}
  .footer-col:nth-of-type(4){grid-area:quick}
  .footer-col h4{margin-bottom:.5rem;font-size:.72rem}
  .footer-col a{font-size:.82rem;padding:.22rem 0}
  .footer-bottom{flex-direction:column;gap:.6rem;text-align:center;padding-top:1rem;font-size:.75rem}
  .section-tag{font-size:.72rem}
  h2{font-size:1.5rem;margin-bottom:.6rem}
  h3{font-size:1.2rem}
  .lead{font-size:.95rem;line-height:1.7}
  .ind-b,.svc-desc{font-size:.85rem;line-height:1.65}
  .ind-t{font-size:1.05rem}
  .unique-card h4{font-size:1.02rem}
  .unique-card p{font-size:.86rem;line-height:1.65}
  .process-step h4{font-size:.95rem}
  .process-step p{font-size:.82rem}
  .svc-card h3{font-size:1.1rem;margin-bottom:.7rem}
  .svc-card ul li{font-size:.84rem}
  .ind-ico,.unique-ico,.svc-icon,.feat-ico{width:44px;height:44px;font-size:1rem}
}
@media(max-width:480px){
  body{font-size:16px}
  .hero{min-height:240px}
  .hero-center{padding:1.2rem .8rem;gap:.15rem}
  .hero-center h1{font-size:1.2rem;line-height:1.25;margin-bottom:.5rem}
  .hero-btns{max-width:200px;gap:.4rem}
  .hero-btns .btn,.hero-btns .btn-outline-light{font-size:.65rem;padding:.4rem .7rem}
  .hero-stats{max-width:100%;gap:.3rem}
  .hero-stat-box{padding:.4rem .3rem}
  .hero-stat-val{font-size:.8rem}
  .hero-stat-label{font-size:.4rem}
  section{padding:3rem 1rem;overflow:hidden}
  .container{padding:0 1rem}
  h2{font-size:1.35rem}
  h3{font-size:1.1rem}
  .lead{font-size:.9rem;line-height:1.65}
  .section-tag{font-size:.68rem}
  .page-header{padding:4rem 1rem 2rem}
  .page-header h1{font-size:1.4rem}
  .page-header .lead{font-size:.85rem}
  .ph-detail-content h1{font-size:1.5rem !important}
  .ph-detail-content .lead{font-size:.88rem !important}
  .prod-tabs-section{padding:2.5rem 1rem}
  .prod-tab-btn{padding:.6rem .8rem;font-size:.78rem}
  .prod-tab-content{padding:1rem}
  .pshow-body{padding:1.1rem 1.1rem 1.3rem}
  .pshow-body h3{font-size:1.08rem}
  .pshow-body p{font-size:.82rem}
  .ind-card,.unique-card,.svc-card,.process-step,.service-col,.feat-card,.tech-card,.team-card,.tc,.intro-card{padding:1.4rem 1.1rem}
  .ind-t{font-size:1rem}
  .ind-b,.svc-desc,.unique-card p,.process-step p{font-size:.82rem;line-height:1.6}
  .unique-card h4,.svc-card h3,.feat-title,.process-step h4{font-size:.98rem}
  .ind-ico,.unique-ico,.svc-icon,.feat-ico{width:40px;height:40px;font-size:.92rem}
  .cta-banner{padding:1.7rem 1.1rem}
  .cta-banner h2{font-size:1.22rem}
  .cta-banner p{font-size:.82rem}
  .stats-box{padding:1.1rem}
  .stats-grid{gap:.8rem}
  .engage-title{font-size:.85rem}
  .engage-desc{font-size:.78rem}
  .form-input{font-size:.85rem;padding:.7rem .8rem}
  .form-label{font-size:.68rem}
  .fu-map,.fu-map iframe{min-height:230px}
  .fu-card{padding:.8rem .9rem;gap:.7rem}
  .fu-ico{width:34px;height:34px;font-size:.82rem}
  .fu-label{font-size:.62rem}
  .fu-val{font-size:.8rem;line-height:1.5}
  footer{padding:2rem 1rem 1rem}
  .footer-grid{gap:1.3rem}
  .footer-brand p{font-size:.8rem}
  .footer-address{font-size:.76rem}
  .footer-col a{font-size:.82rem}
  .footer-col h4{font-size:.74rem;margin-bottom:.6rem}
  .slogan-section{padding:1.7rem 1rem .3rem}
  .slogan-heading{font-size:1.3rem}
  .slogan-sub{font-size:.78rem}
  .mob-nav.open{padding:.8rem 1rem}
  .mob-nav a{font-size:.88rem;padding:.65rem 0}
  .mob-dropdown>.mob-drop-toggle{font-size:.88rem;padding:.65rem 0}
  .mob-drop-panel a{font-size:.82rem !important}
  .brand-name{font-size:1rem}
  .n-logo img{height:32px}
}
/* Products page — Features section at tablet (768-1024): heading+robot inline, 3 cards in one row */
@media(min-width:768px) and (max-width:1024px){
  .feat-layout{grid-template-columns:1fr;gap:1.8rem}
  .feat-intro{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.5rem}
  .feat-intro .section-tag{grid-column:1/-1;margin-bottom:.2rem}
  .feat-intro h2{margin-bottom:.4rem;font-size:1.5rem}
  .feat-intro p{margin-bottom:0;font-size:.9rem}
  .feat-intro .btn{grid-column:1/-1;justify-self:start;margin-top:.8rem !important}
  .feat-intro .sec-img-float{margin-top:0 !important;grid-row:2/4;grid-column:2}
  .feat-intro .sec-img-float img{max-width:160px;width:100%;height:auto}
  .feat-grid{grid-template-columns:repeat(3,1fr);gap:1rem}
  .feat-card{padding:1.3rem 1.1rem}
  .feat-title{font-size:.95rem}
  .feat-desc{font-size:.8rem;line-height:1.55}
}
/* Services page — tablet (768-1024): desktop-like header + inline sec-split + 3/4-in-row cards */
@media(min-width:768px) and (max-width:1024px){
  /* Page header — same treatment as .ph-products */
  .ph-services{padding:4.5rem 2rem 2rem}
  .ph-services .ph-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}
  .ph-services .ph-split-text{text-align:left;order:1}
  .ph-services h1{font-size:2rem;margin-bottom:.5rem}
  .ph-services .lead{font-size:.92rem;line-height:1.55;margin:0 0 1rem}
  .ph-services .ph-pills{margin-top:.9rem;gap:.4rem}
  .ph-services .ph-pill{font-size:.7rem;padding:.3rem .7rem}
  .ph-services .ph-split-img{display:flex;align-items:center;justify-content:center;order:2}
  .ph-services .ph-split-img img{max-width:360px;width:100%;height:auto}
  /* sec-split — heading + image inline (restore desktop auto 1fr at tablet) */
  .sec-split{grid-template-columns:auto 1fr;gap:1.8rem;text-align:left}
  .sec-split--reverse{grid-template-columns:1fr auto;gap:1.8rem;text-align:left}
  .sec-split .sec-img-wrap img,.sec-split--reverse .sec-img-wrap img{max-width:180px;margin:0}
  .sec-split h2,.sec-split--reverse h2{font-size:1.5rem}
  /* Service categories — 3 cards in one row */
  .services-columns{grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
  .service-col{padding:.35rem 1rem .8rem}
  .service-col-head{margin-bottom:.5rem;padding-bottom:.35rem;gap:.5rem}
  .service-col-ico{width:34px;height:34px}
  .service-col-ico i{font-size:.9rem}
  .service-col h3{font-size:.85rem}
  .service-col ul li{font-size:.72rem;padding:.4rem 0;gap:.4rem;line-height:1.4}
  .service-col ul li::before{font-size:.55rem}
  /* How We Work — 4 steps in one row */
  .process-grid{grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:1.5rem}
  .process-step{padding:.4rem .9rem .9rem}
  .process-num{font-size:1.2rem;top:.3rem;right:.5rem}
  .process-ico{width:36px;height:36px;font-size:.88rem;margin:0 auto .4rem}
  .process-step h4{font-size:.82rem;margin-bottom:.35rem}
  .process-step p{font-size:.72rem;line-height:1.5}
  /* Tech stack slider — compact cards (reduce overall height) */
  .tslider{margin-top:1.5rem}
  .tslider-track{gap:1.2rem}
  .tslider-card .tech-card{padding:.4rem 1.1rem .9rem}
  .tslider-card .tech-card h3{font-size:.8rem;margin-bottom:.45rem;padding-bottom:.3rem;gap:.4rem}
  .tslider-card .tech-card h3 .tech-h-ico{width:24px;height:24px;font-size:.62rem}
  .tslider-card .tech-card .tech-item{font-size:.72rem;padding:.32rem 0;gap:.5rem}
  .tslider-card .tech-card .tech-icon{width:24px;height:24px;font-size:.7rem;border-radius:6px}
  .tslider-card .tech-card .tech-icon i{font-size:.72rem}
  .tslider-dots{margin-top:1.5rem}
}
/* About page — tablet (768-1024): compact header + inline sec-split + 2/3/4-in-row cards */
@media(min-width:768px) and (max-width:1024px){
  /* Page header */
  .ph-about{padding:4.5rem 2rem 2rem}
  .ph-about h1{font-size:2rem;margin-bottom:.5rem}
  .ph-about .lead{font-size:.92rem;line-height:1.55}
  .ph-about-logo{margin-top:-2rem !important}
  .ph-about-logo img{height:72px}
  /* Intro card */
  .intro-card{padding:1.2rem 1.4rem}
  .intro-card h2{font-size:1.4rem}
  .intro-card p{font-size:.88rem;line-height:1.7}
  /* Team — 2 cards side by side */
  .team-grid{grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem}
  .tc,.team-card{padding:.9rem 1rem 1.1rem}
  .tc .tc-name{font-size:.95rem}
  .tc .tc-role{font-size:.78rem}
  .tc .tc-bio{font-size:.8rem;line-height:1.6}
  .tc .ttag{font-size:.68rem;padding:.25rem .55rem}
  /* Industries — 3 cards per row (flex) */
  .ind-grid{gap:1rem;margin-top:1.5rem}
  .ind-grid>.ind-card,.ind-grid>.ind-card--coming-soon{width:calc(33.333% - .67rem);min-width:0}
  .ind-card{padding:.6rem 1rem 1rem}
  .ind-card .ind-ico{font-size:1.2rem;margin-bottom:.4rem}
  .ind-t{font-size:.88rem;margin-bottom:.3rem}
  .ind-b{font-size:.75rem;line-height:1.55}
  .ind-tags{margin-top:.6rem;gap:.3rem}
  .itag{font-size:.65rem;padding:.2rem .45rem}
  /* Clients — 4 cells in a row */
  .cl-grid{grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:1.5rem}
  .cl-cell{padding:.6rem 1rem}
  .cl-logo{width:42px;height:42px;font-size:1rem}
  .cl-name{font-size:.82rem}
  .cl-sub{font-size:.68rem}
  /* Life gallery — keep 3 per row but smaller gap */
  .life-gallery{grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
  /* CTA banner */
  .cta-about{padding:1.8rem 1.5rem}
}
/* Contact page — tablet (768-1024): 2-col header + side-by-side form/info + compact cards */
@media(min-width:768px) and (max-width:1024px){
  /* Page header — keep 2-col desktop layout */
  .ph-contact{padding:4.5rem 2rem 2rem}
  .ph-contact .ph-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center;text-align:left}
  .ph-contact h1{font-size:2rem;margin-bottom:.5rem}
  .ph-contact .lead{font-size:.92rem;line-height:1.55;margin:0}
  .ph-contact .ph-split-img img{max-width:260px;width:100%;height:auto}
  /* Contact layout — form wider, info narrower */
  .contact-layout{grid-template-columns:1.8fr 1fr;gap:1.5rem;margin-top:1.5rem}
  .contact-layout h2{font-size:1.1rem !important}
  /* Form */
  .form-g{grid-template-columns:1fr 1fr;gap:.8rem}
  .form-input{font-size:.82rem;padding:.65rem .8rem}
  .form-label{font-size:.68rem}
  textarea.form-input{min-height:100px}
  /* Contact info — compact ci cards */
  .contact-info{gap:1rem}
  .ci{gap:.7rem}
  .ci-ico{width:38px;height:38px;font-size:.95rem}
  .ci-ico i{font-size:.95rem}
  .ci-label{font-size:.65rem}
  .ci-val{font-size:.82rem}
  /* Find Us — compact tablet layout (map left, details right) */
  .find-us-section{margin-top:2rem !important}
  .find-us-section h2{font-size:1.3rem}
  .fu-grid{grid-template-columns:1.2fr 1fr;gap:1rem;align-items:stretch}
  .fu-map,.fu-map iframe{min-height:300px}
  .fu-details{gap:.6rem}
  .fu-card{padding:.7rem .85rem;gap:.65rem}
  .fu-ico{width:34px;height:34px;font-size:.82rem}
  .fu-label{font-size:.62rem}
  .fu-val{font-size:.78rem;line-height:1.45}
  /* Engagement section — 4 cards in one horizontal row below form/info */
  .engage-section{margin-top:2rem !important}
  .engage-section h3{font-size:1rem;margin-bottom:.8rem}
  .engage-grid{grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:.8rem}
  .engage-card{flex-direction:column !important;gap:.5rem;padding:.8rem .9rem 1rem;align-items:flex-start}
  .engage-ico{width:32px;height:32px}
  .engage-ico i{font-size:.8rem}
  .engage-title{font-size:.78rem;margin-bottom:.2rem}
  .engage-desc{font-size:.7rem;line-height:1.5}
}
/* Footer — tablet (768-1024): brand-spanning layout + horizontal footer-bottom (opposite sides) */
@media(min-width:768px) and (max-width:1024px){
  .footer-grid{grid-template-columns:auto auto auto;grid-template-areas:"brand explore products" "brand services quick";gap:1.3rem 2.5rem;justify-content:space-between;align-items:start;margin-bottom:1.5rem}
  .footer-brand{grid-area:brand;max-width:240px}
  .footer-col:nth-of-type(1){grid-area:explore}
  .footer-col:nth-of-type(2){grid-area:products}
  .footer-col:nth-of-type(3){grid-area:services}
  .footer-col:nth-of-type(4){grid-area:quick}
  .footer-bottom{flex-direction:row;gap:0;text-align:left;justify-content:space-between;align-items:center;padding-top:1rem}
}

/* ══ Product Detail pages (ANPR etc.) — tablet ══ */
@media(min-width:768px) and (max-width:1024px){
  /* Header: content-left, image-right (compact) */
  .ph-product-detail{padding:2.5rem 1.5rem 2rem}
  .ph-detail-grid{grid-template-columns:1.1fr 1fr;gap:1.5rem;text-align:left;align-items:center}
  .ph-detail-content{text-align:left}
  .ph-detail-content h1{font-size:2rem !important;margin-top:0 !important;margin-bottom:.4rem}
  .ph-detail-content .lead{font-size:.88rem !important;margin-bottom:.5rem}
  .ph-detail-content .lead:first-of-type{font-size:.98rem !important}
  .ph-detail-content .prod-header-actions{justify-content:flex-start;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
  .ph-detail-content .prod-header-actions .btn,.ph-detail-content .prod-header-actions .btn-outline-light{font-size:.82rem;padding:.6rem 1rem}
  /* Play button + robot pointer — reflow below image at tablet */
  .ph-detail-play{display:flex !important;position:static !important;right:auto !important;bottom:auto !important;margin-top:1rem;justify-content:flex-end;gap:0}
  .ph-detail-play .play-circle{width:58px;height:58px;font-size:1.1rem}
  .ph-detail-play .play-label{font-size:.78rem}
  .ph-detail-play img[alt="Robot pointing"]{width:95px !important}

  /* Tab layout — keep sidebar vertical (like #pcatTabs) */
  .prod-tabs-section{padding:2.5rem 1.5rem}
  .prod-tabs-layout{grid-template-columns:170px 1fr;gap:0}
  .prod-tab-nav{flex-direction:column;overflow-x:visible;padding:.8rem 0;gap:.2rem;border-bottom:none;margin-bottom:0;border-right:1px solid var(--border)}
  .prod-tab-btn{display:block;width:100%;text-align:left;padding:.55rem .75rem;font-size:.72rem;white-space:normal;border-left:3px solid transparent;border-bottom:none;line-height:1.3;letter-spacing:.01em}
  .prod-tab-btn.active{border-left-color:var(--accent);border-bottom-color:transparent}
  .prod-tab-content{padding:1.3rem 1.5rem}
  .prod-tab-panel h3{font-size:1.1rem;margin-bottom:1rem}

  /* Feature cards — 2 per row, equal height, compact */
  .features-2col{grid-template-columns:1fr 1fr;gap:1rem;align-items:stretch}
  .feature-group{padding:1rem .9rem;display:flex;flex-direction:column;height:100%}
  .feature-group h4{font-size:.88rem;margin-bottom:.5rem;line-height:1.3}
  .feature-group ul{padding-left:1rem}
  .feature-group ul li{font-size:.76rem;line-height:1.55;margin-bottom:.2rem}
  .feature-group ol{padding-left:1rem}
  .feature-group ol li{font-size:.76rem;line-height:1.55;margin-bottom:.2rem}
}

/* ══ MEGA-PANEL — compact for laptop ══ */
@media(min-width:1025px) and (max-width:1800px){
  .mega-inner{padding:1.2rem 2rem 1rem;gap:1.2rem}
  .mega-cat-illus{height:60px;margin-bottom:.3rem}
  .mega-cat-illus img{height:48px}
  .mega-col h4{font-size:.65rem;min-height:auto;margin-bottom:.4rem;padding-bottom:.4rem}
  .mega-col a{font-size:.82rem;padding:.35rem .5rem;gap:.5rem}
  .mega-col a strong{font-size:.82rem}
  .mega-col a em{font-size:.68rem;margin-top:.1rem}
  .mega-ico{width:28px;height:28px;font-size:.72rem}
  .mega-foot{padding-top:.5rem}
}

/* ══ PRODUCT DETAIL — play button layout at laptop/desktop ══ */
@media(min-width:1025px) and (max-width:1800px){
  .ph-detail-play{position:relative !important;right:auto !important;bottom:auto !important;margin-top:1rem}
  .ph-detail-grid>div:nth-child(2){display:flex;flex-direction:column;align-items:center}
  .ph-detail-grid>div:nth-child(2)>img{max-width:65%}
  .ph-detail-grid>div:nth-child(2)>.dash-slider{max-width:65%}
}