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

:root{
  /* Remoticom Smart Tech brand palette (Brand Identity Guide p.26):
     Primary Blue #024c72 · Primary Grey #bfbebe · Accent Red #fb3640 */
  --navy:#024c72; --navy-deep:#013852; --navy-hover:#013a58;
  --red:#fb3640; --brand-grey:#bfbebe;
  --ink:#0b2536; --gray-1:#33495a; --gray-2:#5c7387; --gray-3:#8fa3b3;
  --gray-4:#d7e1e8; --gray-5:#f2f6f9; --white:#ffffff;
  --accent-red:#fb3640; --accent-orange:#ff8811;
  --radius-lg:22px; --radius-md:16px; --radius-sm:12px;
  --ease:cubic-bezier(.4,0,.2,1);
  --pad:clamp(20px, 5vw, 40px);
  --section-y:clamp(56px, 9vw, 100px);
  --font-head:'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:84px;}
body{
  font-family:var(--font-body);
  color:var(--ink); background:var(--white); line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; letter-spacing:-0.01em; line-height:1.12; color:var(--navy-deep);}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
table{max-width:100%;}
.wrap{max-width:1160px; margin:0 auto; padding:0 var(--pad);}
.accent-dot{color:var(--accent-red);}

/* ---- placeholders for photo/video content (on-brand mockup style) ---- */
.ph{
  position:relative; overflow:hidden;
  background-color:var(--gray-5);
  background-image:radial-gradient(rgba(2,76,114,0.16) 1.4px, transparent 1.4px);
  background-size:16px 16px;
  border:1px solid var(--gray-4);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-2); font-size:0.7rem; letter-spacing:0.03em; text-align:center; padding:10px;
  border-radius:var(--radius-md); width:100%;
}
.ph::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle at 30% 26%, rgba(2,76,114,0.10), transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 55'%3E%3Cpath d='M7 22C21 8 49 8 63 22' stroke='%23024c72' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18 33C27 24 43 24 52 33' stroke='%23024c72' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='35' cy='47' r='7' fill='%23024c72'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat; background-position:center, center; background-size:cover, 58px 45px;
  opacity:0.16;
}
.ph > *{position:relative; z-index:1;}
.ph img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}
.ph video{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}
.ph.contain img{object-fit:contain;}
.ph.dark{
  background-color:var(--navy-deep); color:#a9c3d6; border-color:#12557d;
  background-image:radial-gradient(rgba(255,255,255,0.12) 1.4px, transparent 1.4px);
  background-size:16px 16px;
}
.ph.dark::before{
  background-image:radial-gradient(circle at 30% 26%, rgba(255,255,255,0.06), transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 55'%3E%3Cpath d='M7 22C21 8 49 8 63 22' stroke='%23ffffff' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18 33C27 24 43 24 52 33' stroke='%23ffffff' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='35' cy='47' r='7' fill='%23ffffff'/%3E%3C/svg%3E");
  opacity:0.12;
}
/* text content of .ph (the bracketed note) sits above the watermark automatically since ::before paints behind normal content */
/* once a real photo fills a .ph, drop the mockup watermark and dot grid so no placeholder graphic shows through any letterboxing */
.ph:has(img){background-image:none; padding:0;}
.ph:has(img)::before{display:none;}
.ph:has(video){background-image:none; padding:0;}
.ph:has(video)::before{display:none;}
/* :has(img)/:has(video) above only carry the specificity of "img"/"video" (a type selector),
   so on .ph.dark (two classes) that reset loses the cascade and the dot-grid watermark shows
   through in any letterboxing. Repeat the reset scoped to .ph.dark so it always wins there. */
.ph.dark:has(img),
.ph.dark:has(video){background-image:none;}
.ph.dark:has(img)::before,
.ph.dark:has(video)::before{display:none;}
/* borderless variant: strip the placeholder frame entirely so only the photo shows, on either the light or dark .ph */
.ph.plain{background:none; border:none; padding:0;}
.ph iframe{width:100%; height:100%; border:0; border-radius:inherit; display:block;}
.ph:has(iframe){background-image:none; padding:0;}
.ph:has(iframe)::before{display:none;}
.video-ph{position:relative; cursor:pointer;}
.video-ph .play{
  width:64px; height:64px; border-radius:50%; border:1.5px solid var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1.2rem;
  position:relative; z-index:2; background:rgba(2,76,114,0.35); backdrop-filter:blur(4px);
  flex-shrink:0;
}
.video-ph .caption{position:absolute; bottom:16px; left:16px; right:16px; z-index:2; color:var(--white); font-size:0.72rem; letter-spacing:0.03em; text-align:left;}

.page-label{
  font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-2);
  border:1px solid var(--gray-4); border-radius:999px; padding:4px 12px; display:inline-block; margin:22px 0 0;
}
.breadcrumb{font-size:0.8rem; color:var(--gray-2); margin-bottom:28px;}
.breadcrumb a:hover{color:var(--navy);}

/* ---- header / nav ---- */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(2,76,114,0.09);}
.nav{display:flex; align-items:center; justify-content:center; height:64px; position:relative; gap:20px;}
.logo{position:absolute; left:var(--pad); top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:0.95rem; letter-spacing:-0.01em; white-space:nowrap;}
.logo-remoti{color:var(--navy);}
.logo-com{color:var(--brand-grey);}
.logo-img{height:34px; width:auto; display:block;}
nav.main-nav ul{list-style:none; display:flex; gap:clamp(16px,2.6vw,32px); flex-wrap:wrap; justify-content:center;}
nav.main-nav a{font-size:0.82rem; font-weight:500; color:var(--gray-1); padding:4px 0; border-bottom:1px solid transparent; transition:color .2s var(--ease);}
nav.main-nav a:hover{color:var(--navy);}
nav.main-nav a.active{color:var(--navy); font-weight:700;}
.nav-cta{position:absolute; right:var(--pad); border:none; background:var(--navy); color:var(--white); padding:9px 20px; border-radius:999px; font-size:0.78rem; font-weight:600; letter-spacing:0.01em; transition:background .2s var(--ease); white-space:nowrap;}
.nav-cta:hover{background:var(--red);}
.nav-cta-mobile{display:none;}

.nav-toggle-input{display:none;}
.burger{display:none; position:absolute; right:calc(var(--pad) - 9px); z-index:60; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; cursor:pointer;}
.burger span{display:block; width:26px; height:2px; background:var(--navy-deep); border-radius:2px;}

/* ---- eyebrow + specs ---- */
.eyebrow{font-size:0.8rem; font-weight:600; color:var(--red); letter-spacing:0.04em; margin-bottom:14px; text-transform:uppercase;}
.hero .eyebrow{color:var(--red);}
.specs{display:flex; gap:clamp(24px,6vw,50px); justify-content:center; margin-top:36px; flex-wrap:wrap;}
.specs div{text-align:center; min-width:90px;}
.specs b{display:block; font-family:var(--font-head); font-size:1.3rem; margin-bottom:4px; font-weight:700; color:var(--navy);}
.specs span{font-size:0.75rem; color:var(--gray-2); text-transform:uppercase; letter-spacing:0.05em;}
.hero .specs b{color:var(--white);}
.hero .specs span{color:#bcd6e8;}

/* ---- technology strip (badge row) ---- */
/* Flat, non-pill "tag" shape on purpose: pill + border + hover is reserved for real clickable
   buttons/links (.btn*, .hero-pill, .chip-row a) elsewhere in this file, so static info badges
   never get mistaken for buttons. */
.tech-strip{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
.tech-strip span{font-size:0.72rem; font-weight:600; letter-spacing:0.02em; color:var(--white); border-radius:6px; padding:7px 14px; background:rgba(255,255,255,0.10);}
.tech-strip.light span{color:var(--navy); background:var(--gray-5);}
abbr[title]{text-decoration:none; cursor:help;}

/* ---- animated hero mockup scene (stand-in for future video/photo) ---- */
.hero-scene-svg{position:absolute; inset:0; width:100%; height:100%; opacity:0.6;}
.pulse-dot{animation:dotPulse 2.6s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{opacity:.35;} 50%{opacity:1;}}
.mesh-flow{stroke-dasharray:6 9; animation:dashFlow 3.2s linear infinite;}
@keyframes dashFlow{to{stroke-dashoffset:-30;}}
.mockup-tag{position:absolute; z-index:3; left:18px; top:18px; display:flex; align-items:center; gap:7px; font-size:0.66rem; font-weight:600; letter-spacing:0.03em; color:#cfe1ec; background:rgba(3,25,40,0.55); border:1px solid rgba(255,255,255,0.22); padding:6px 12px; border-radius:999px; backdrop-filter:blur(6px);}
.mockup-tag .dot{width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px rgba(251,54,64,0.25); flex-shrink:0;}
.mockup-tag.light{color:var(--navy); background:rgba(255,255,255,0.85); border-color:var(--gray-4);}

/* ---- fake dashboard mockup (stand-in for ATLAS product screenshots) ---- */
.dash-mock{position:relative; width:100%; height:100%; min-height:260px; background:linear-gradient(160deg,#063149,var(--navy-deep)); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; color:var(--white); border:1px solid #0a3552; box-shadow:0 24px 48px rgba(2,20,35,0.35);}
.dash-mock-caption{margin-top:12px; font-size:0.72rem; color:var(--gray-2); text-align:center;}
.dash-mock .dash-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; background:#052a40; border-bottom:1px solid #0a3552; flex-shrink:0;}
.dash-mock .dash-bar span{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.25);}
.dash-mock .dash-bar b{margin-left:8px; font-size:0.68rem; font-weight:600; letter-spacing:0.04em; color:#cfe1ec; text-transform:uppercase;}
.dash-mock .dash-body{flex:1; display:grid; grid-template-columns:1.3fr 1fr; gap:1px; background:#0a3552;}
.dash-mock .dash-map{background:var(--navy-deep); position:relative; padding:14px;}
.dash-mock .dash-map .grid-lines{position:absolute; inset:0; background-image:linear-gradient(#0a3552 1px, transparent 1px), linear-gradient(90deg, #0a3552 1px, transparent 1px); background-size:26px 26px; opacity:0.6;}
.dash-mock .dash-map .node{position:absolute; width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(251,54,64,0.2);}
.dash-mock .dash-map .node.white{background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,0.15);}
.dash-mock .dash-side{background:#03202f; padding:14px; display:flex; flex-direction:column; gap:9px;}
.dash-mock .dash-row{display:flex; align-items:center; justify-content:space-between; font-size:0.62rem; color:#a9c3d6; background:rgba(255,255,255,0.04); border-radius:8px; padding:7px 9px;}
.dash-mock .dash-row b{color:#fff; font-weight:600;}
.dash-mock .dash-row .status{width:7px; height:7px; border-radius:50%; background:#3fbf7f; flex-shrink:0;}
.dash-mock .dash-row .status.warn{background:var(--red);}
.dash-mock .dash-chart{display:flex; align-items:flex-end; gap:4px; height:44px; margin-top:4px;}
.dash-mock .dash-chart i{flex:1; background:linear-gradient(180deg, var(--red), rgba(251,54,64,0.35)); border-radius:2px 2px 0 0;}

/* ---- executive quote (About Us — founder/CEO statement) ---- */
.exec-quote{background:var(--navy-deep); color:var(--white); padding:clamp(56px,9vw,100px) 0; position:relative; overflow:hidden;}
.exec-quote::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(circle at 82% 20%, rgba(251,54,64,0.14), transparent 55%), radial-gradient(circle at 8% 90%, rgba(255,255,255,0.06), transparent 45%);}
.exec-quote-grid{position:relative; z-index:1; display:grid; grid-template-columns:200px 1fr; gap:52px; align-items:center;}
.exec-photo-ph{width:200px; height:200px; border-radius:50%; flex-shrink:0; font-size:0.6rem; line-height:1.4; border-width:2px; border-color:var(--red);}
.exec-quote-mark{display:block; font-family:var(--font-head); font-size:4.6rem; line-height:0.7; height:0.7em; color:var(--red); font-weight:800; margin-bottom:22px;}
.exec-quote-text blockquote{font-family:var(--font-head); font-size:clamp(1.3rem,2.7vw,1.95rem); font-weight:600; line-height:1.38; color:var(--white); margin:0 0 26px; max-width:680px;}
.exec-quote-attr{display:flex; flex-direction:column; gap:3px;}
.exec-quote-attr .exec-name{font-size:0.98rem; font-weight:700; color:var(--white); letter-spacing:0.01em;}
.exec-quote-attr .exec-title{font-size:0.78rem; color:var(--red); font-weight:600; letter-spacing:0.03em; text-transform:uppercase;}

/* ---- spotlight: single-solution feature section, alternating light/dark ---- */
.spotlight{padding:var(--section-y) 0; text-align:center; border-bottom:1px solid var(--gray-5);}
.spotlight .ph{width:100%; max-width:900px; height:clamp(220px,42vw,400px); margin:0 auto 10px; border-radius:var(--radius-lg);}
.spotlight h2{font-size:clamp(1.7rem,4.2vw,2.8rem); margin-bottom:16px;}
.spotlight p{max-width:620px; margin:0 auto; color:var(--gray-2); font-size:1rem;}
.spotlight .readmore{display:inline-block; margin-top:30px; font-size:0.85rem; font-weight:600; color:var(--navy); border-bottom:1px solid var(--navy);}
.spotlight.dark{background:var(--navy-deep); color:var(--white); border-bottom:none;}
.spotlight.dark h2{color:var(--white);}
.spotlight.dark p{color:#bcd0dc;}
.spotlight.dark .readmore{color:var(--red); border-color:var(--red);}
.spotlight .specs{margin-top:40px; margin-bottom:6px;}

/* ---- hero (dark, photo bg) ---- */
.hero{position:relative; min-height:min(90vh, 800px); background:linear-gradient(160deg,#031f30 0%, var(--navy-deep) 45%, var(--navy) 100%); color:var(--white); display:flex; align-items:center; justify-content:center; text-align:center; border-bottom:none; padding:0 var(--pad);}
.hero-photo-ph{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.hero-photo-ph img, .hero-photo-ph video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,25,40,0.55) 0%, rgba(3,25,40,0.88) 100%);}
.hero-inner{position:relative; z-index:2; padding:clamp(56px,12vw,90px) 0; display:flex; flex-direction:column; align-items:center; width:100%; max-width:820px; margin:0 auto;}
.wifi-icon{margin-bottom:14px;}
.brand-wordmark{font-family:var(--font-head); font-size:clamp(2rem,6vw,3.2rem); line-height:1.08; font-weight:800; letter-spacing:-0.01em; margin-bottom:10px; color:#fff;}
.brand-tagline{font-size:clamp(0.98rem,2.6vw,1.25rem); font-weight:400; color:#cfe1ec; margin-bottom:26px;}
.hero p{max-width:560px; font-size:clamp(0.92rem,2.4vw,1.02rem); color:#cfe1ec; font-weight:400; margin-bottom:14px;}
.btn{display:inline-block; padding:13px 30px; font-size:0.85rem; font-weight:600; letter-spacing:0.01em; border:1.5px solid var(--white); color:var(--white); background:transparent; border-radius:999px; cursor:pointer; transition:all .2s var(--ease);}
.btn:hover{background:var(--red); color:var(--white); border-color:var(--red);}
.btn-dark{border-color:var(--navy); color:var(--white); background:var(--navy);}
.btn-dark:hover{background:var(--red); border-color:var(--red);}
.btn-pill{border-radius:999px; background:var(--navy); color:var(--white); border-color:var(--navy);}
.btn-pill:hover{background:var(--red); border-color:var(--red);}
.btn-outline-dark{border:1.5px solid var(--navy); color:var(--navy); background:transparent;}
.btn-outline-dark:hover{background:var(--red); color:var(--white); border-color:var(--red);}
.btn-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}

/* ---- simple page hero (for sub-pages) ---- */
.page-hero{padding:clamp(56px,10vw,90px) 0 clamp(40px,7vw,60px); border-bottom:none; text-align:center; background:var(--gray-5);}
.page-hero .wrap{display:flex; flex-direction:column; align-items:center;}
.page-hero .breadcrumb{align-self:center; margin-left:0;}
.page-hero h1{font-size:clamp(2rem,6vw,3.6rem); margin-bottom:20px; max-width:820px;}
.page-hero p{max-width:600px; color:var(--gray-2); font-size:clamp(0.95rem,2.4vw,1.08rem);}
.page-hero .hero-lead{max-width:720px;}
.page-hero .hero-lead p{max-width:none; margin-bottom:14px;}
.page-hero .hero-lead p:last-child{margin-bottom:0;}

/* ---- generic sections ---- */
section{padding:var(--section-y) 0; border-bottom:1px solid var(--gray-5);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:clamp(36px,6vw,56px); flex-wrap:wrap;}
.section-head.center{flex-direction:column; align-items:center; text-align:center;}
.section-head h2{font-size:clamp(1.6rem,4.4vw,2.6rem);}
.section-head h2.line-title{font-size:clamp(1.25rem,2.8vw,1.7rem);}
.section-head p{max-width:400px; color:var(--gray-2); font-size:0.95rem; font-weight:400;}
.section-head.center p{max-width:600px;}
.section-tag{font-size:0.78rem; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; display:block;}
.section-tag.indoor{color:var(--navy);}
.section-tag.outdoor{color:var(--red);}
.section-bg{background:var(--gray-5);}
.section-navy{background:var(--navy-deep); color:var(--white); border-bottom:none;}
.section-navy h2, .section-navy h3{color:var(--white);}
.section-navy p{color:#bcd0dc;}
.section-navy .section-tag{color:var(--red);}

/* ---- card grids ---- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,28px);}
.card{border:1px solid var(--gray-4); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s var(--ease), transform .25s var(--ease); background:var(--white);}
.card:hover{box-shadow:0 12px 32px rgba(2,76,114,0.12); transform:translateY(-2px);}
.card .ph{height:200px; border-radius:0; border:none; border-bottom:1px solid var(--gray-4);}
.card-grid-16x9 .ph{height:auto; aspect-ratio:1100/610;}
.card-body{padding:24px 22px 28px;}
.card-cat{font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--red); font-weight:700; display:block; margin-bottom:10px;}
.card h3{font-size:1.1rem; margin-bottom:10px;}
.card p{font-size:0.88rem; color:var(--gray-2); font-weight:400; margin-bottom:16px;}
.card .readmore{font-size:0.78rem; font-weight:600; color:var(--navy); border-bottom:1px solid var(--gray-4); display:inline-block; width:fit-content; transition:border-color .2s var(--ease);}
.card:hover .readmore{border-color:var(--navy);}

.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,28px);}
.category-band{background:var(--gray-5); padding:clamp(28px,5vw,44px) 0; width:100vw; margin-left:calc(50% - 50vw);}
.product-card{border:1px solid var(--gray-4); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow .25s var(--ease), transform .25s var(--ease); background:var(--white);}
.product-card:hover{box-shadow:0 10px 26px rgba(2,76,114,0.1); transform:translateY(-2px);}
.product-card .ph{aspect-ratio:1/1; height:auto; border-radius:0; border:none; border-bottom:1px solid var(--gray-4); padding:12px; background-color:var(--white);}
.product-card .ph img{width:100%; height:100%; object-fit:contain;}
.product-meta{padding:18px 22px 24px;}
.product-cat{font-size:0.62rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--red); font-weight:700; display:block; margin-bottom:6px;}
.product-card h3{font-size:1.05rem; font-weight:700;}
.product-card .desc{font-size:0.8rem; color:var(--gray-2); margin-top:6px;}
.product-card a.readmore{display:inline-block; margin-top:12px; font-size:0.74rem; font-weight:600; color:var(--navy); border-bottom:1px solid var(--gray-4);}
.product-card .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px;}
.product-card .cta-row a.readmore{margin-top:0;}
.product-card .cta-row .hero-pill{padding:8px 18px; font-size:0.76rem;}
.readmore.muted{color:var(--gray-2);}
.catalogue-note{margin-top:56px; font-size:0.85rem; color:var(--gray-2); text-align:center;}
.catalogue-note a{color:var(--navy); font-weight:600; border-bottom:1px solid var(--navy);}
.line-desc{max-width:520px; margin-top:10px;}
.line-group{margin-top:80px;}
.oem-badge{display:inline-flex; align-items:center; gap:6px; font-size:0.68rem; font-weight:600; color:#1a7a4c; background:#eaf7f0; border:1px solid #bfe6d1; border-radius:999px; padding:5px 10px; margin-top:10px;}

/* ---- feature tile (non-interactive spec/module list, e.g. ATLAS capabilities) ---- */
/* no hover lift/shadow here on purpose — this is a static list, not a clickable card */
.feature-tile{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--gray-5);}
.feature-tile .tick{width:20px; height:20px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.65rem; flex-shrink:0;}
.feature-tile b{font-family:var(--font-head); font-size:0.9rem; color:var(--navy-deep); font-weight:700;}
.cat-title{font-family:var(--font-head); font-size:1.05rem; font-weight:700; color:var(--navy-deep); margin:34px 0 16px;}
.section-head + .cat-title{margin-top:0;}

/* ---- architecture grid (One Portfolio. Multiple Architectures.) ---- */
.arch-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--gray-4); border-radius:var(--radius-lg); overflow:hidden;}
.arch-card{padding:26px 20px; border-right:1px solid var(--gray-4); position:relative; background:var(--white);}
.arch-card:last-child{border-right:none;}
.arch-num{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--navy); color:var(--white); font-size:0.72rem; font-weight:700; margin-bottom:14px;}
.arch-card .arch-label{font-size:0.72rem; color:var(--gray-3); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;}
.arch-card h4{font-family:var(--font-head); font-size:1.02rem; font-weight:700; margin-bottom:14px; color:var(--navy-deep);}
.arch-card .ph{height:210px; margin-bottom:14px; background-color:var(--white);}
.arch-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.arch-tags span{font-size:0.62rem; font-weight:600; color:var(--navy); background:var(--gray-5); border-radius:5px; padding:4px 8px;}
.arch-card .arch-desc{font-size:0.78rem; color:var(--gray-2);}
.arch-link{display:inline-block; margin-top:12px; font-size:0.72rem; font-weight:600; color:var(--navy); border-bottom:1px solid var(--gray-4);}
.arch-link:hover{border-color:var(--navy);}

/* ---- split (Indoor / Outdoor) ---- */
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,26px);}
.split-card{border-radius:var(--radius-lg); overflow:hidden; position:relative; min-height:440px; display:flex; flex-direction:column; justify-content:flex-end; color:var(--white); padding:34px;}
.split-card.indoor{background:linear-gradient(160deg,#0a4266,var(--navy));}
.split-card.outdoor{background:linear-gradient(160deg,#031c2c,var(--navy-deep));}
.split-card .ph{position:absolute; inset:0; border-radius:0; z-index:0; opacity:0.16; align-items:flex-start; justify-content:flex-start; padding:0; text-align:left; pointer-events:none; border:none;}
.split-card .content{position:relative; z-index:1;}
.split-card h3{font-size:clamp(1.4rem,3vw,1.9rem); color:var(--white); margin-bottom:10px;}
.split-card .tagline{font-size:0.85rem; color:var(--red); font-weight:600; margin-bottom:16px; letter-spacing:0.02em;}
.split-card ul{list-style:none; margin-bottom:22px;}
.split-card li{font-size:0.85rem; color:#dce9f1; padding:5px 0; display:flex; align-items:center; gap:8px;}
.split-card li::before{content:"✓"; color:var(--red); font-weight:700;}
.split-card a.btn{font-weight:600;}
.chip-row{display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; margin-bottom:22px; min-height:70px;}
.chip-row a{font-size:0.72rem; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,0.35); background:rgba(255,255,255,0.08); border-radius:999px; padding:5px 12px; transition:background .2s var(--ease), border-color .2s var(--ease);}
.chip-row a:hover{background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.65);}

/* ---- mesh breakthrough diagram ---- */
.mesh-visual{display:flex; flex-direction:column; align-items:center; gap:26px; padding:40px 0;}
.mesh-gateway{width:74px; height:74px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:0.62rem; font-weight:700; text-align:center; box-shadow:0 0 0 10px rgba(251,54,64,0.15);}
.mesh-nodes{display:grid; grid-template-columns:repeat(8,1fr); gap:14px; max-width:640px;}
.mesh-node{width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.14); border:1.5px solid rgba(255,255,255,.6); margin:0 auto;}
.mesh-caption{font-size:0.78rem; color:var(--red); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;}
.mesh-link{color:inherit; border-bottom:1px dashed rgba(255,255,255,0.5); transition:border-color .2s var(--ease);}
.mesh-link:hover{border-color:#fff;}

/* ---- detail page: gallery + video ---- */
.detail-hero{padding:0; border-bottom:none;}
.detail-hero .ph{height:clamp(240px,48vw,480px); border:none; border-radius:0; background-color:var(--white);}

/* ---- detail page: hero photo collage (multiple product photos, shown together, uncropped) ---- */
.detail-hero .ph.hero-collage{padding:0; display:grid; gap:3px; background:var(--gray-4); align-items:stretch; justify-content:normal;}
.hero-collage.count-2{grid-template-columns:2fr 1fr; grid-template-rows:1fr;}
.hero-collage.count-3{grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr;}
.hero-collage.count-3 .collage-item.main{grid-row:1 / span 2;}
.hero-collage .collage-item{position:relative; overflow:hidden; background:var(--white); display:flex; align-items:center; justify-content:center; min-width:0; min-height:0;}
.detail-hero .ph.hero-collage .collage-item img{width:100%; height:100%; object-fit:contain; object-position:center; display:block; border-radius:0;}
@media (max-width:640px){
  .detail-hero .ph.hero-collage{height:auto;}
  .hero-collage.count-2, .hero-collage.count-3{grid-template-columns:1fr; grid-template-rows:none;}
  .hero-collage.count-3 .collage-item.main{grid-row:auto;}
  .hero-collage .collage-item{aspect-ratio:4/3;}
}
.detail-meta{padding:clamp(28px,5vw,44px) 0;}
.detail-meta .wrap{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;}
.detail-meta h1{font-size:clamp(1.8rem,5.4vw,3.2rem);}
.detail-meta .cat{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--red); font-weight:700; margin-bottom:12px; display:block;}

.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2vw,18px);}
.gallery-grid .ph{height:220px; background-color:var(--white); padding:20px;}
.gallery-grid .ph img{object-fit:contain;}
.gallery-grid .ph.wide{grid-column:span 2;}
.gallery-grid .ph.slideshow img{position:absolute; top:20px; left:20px; width:calc(100% - 40px); height:calc(100% - 40px); opacity:0; transition:opacity 1.2s ease;}
.gallery-grid .ph.slideshow img.active{opacity:1;}

.video-block{margin-top:24px;}
.video-ph{height:clamp(220px,42vw,420px);}

.spec-table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.spec-table{width:100%; min-width:420px; border-collapse:collapse; font-size:0.88rem; margin-top:14px;}
.spec-table th{text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--gray-3); border-bottom:1px solid var(--gray-4); padding:12px 14px; white-space:nowrap;}
.spec-table td{padding:14px; border-bottom:1px solid var(--gray-5);}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,56px); align-items:center;}
.two-col .ph{height:clamp(220px,42vw,380px);}
.two-col-text p{color:var(--gray-2); font-size:0.98rem; margin-bottom:18px;}
.two-col-text h2{font-size:clamp(1.6rem,4.4vw,2.6rem); margin-bottom:22px;}

/* ---- values / benefit tiles ---- */
/* no hover lift here on purpose — these are static info blocks, not clickable cards */
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,20px);}
.value{background:var(--gray-5); border-radius:var(--radius-md); padding:28px 22px;}
.value .num{font-family:var(--font-head); font-size:0.7rem; color:var(--red); font-weight:700; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.04em;}
.value h4{font-size:0.98rem; margin-bottom:10px;}
.value p{font-size:0.82rem; color:var(--gray-2); font-weight:400;}

/* ---- stat strip (proven in the field) ---- */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.stat-strip .stat b{display:block; font-family:var(--font-head); font-size:clamp(1.6rem,4vw,2.3rem); color:var(--white); font-weight:800;}
.stat-strip .stat span{font-size:0.78rem; color:#bcd0dc; text-transform:uppercase; letter-spacing:0.04em;}
.deploy-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px;}
.deploy-card{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-md); padding:22px;}
.deploy-card .ph{height:auto; aspect-ratio:16/9; margin-bottom:16px;}
.deploy-card h4{color:var(--white); font-size:1rem; margin-bottom:10px;}
.deploy-row{display:flex; justify-content:space-between; font-size:0.78rem; color:#bcd0dc; padding:6px 0; border-top:1px solid rgba(255,255,255,0.1);}
.deploy-row b{color:var(--white);}
.deploy-row b a{color:inherit; border-bottom:1px dashed rgba(255,255,255,0.45);}
.deploy-row b a:hover{border-color:#fff;}

/* ---- pilot steps ---- */
.pilot-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,30px); margin:36px 0; position:relative;}
.pilot-steps::before{content:""; position:absolute; top:21px; left:0; right:0; height:2px; background:var(--gray-4); z-index:0;}
.pilot-step{position:relative; z-index:1;}
.pilot-step .circle{width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; margin-bottom:16px;}
.pilot-step h4{font-size:1.05rem; margin-bottom:8px;}
.pilot-step p{font-size:0.85rem; color:var(--gray-2);}

/* ---- our-journey timeline ---- */
.timeline-video{max-width:820px; margin:0 auto 48px;}
.timeline-video .ph{height:clamp(220px,40vw,380px); background-color:#000;}
.timeline-video .ph video{object-fit:contain;}
.timeline-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,30px); position:relative;}
.timeline-steps::before{content:""; position:absolute; top:21px; left:0; right:0; height:2px; background:var(--gray-4); z-index:0;}
.timeline-step{position:relative; z-index:1;}
.timeline-step .circle{width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; margin-bottom:16px; font-size:0.74rem; letter-spacing:0.02em;}
.timeline-step h4{font-size:0.96rem; margin-bottom:6px;}
.timeline-step p{font-size:0.82rem; color:var(--gray-2);}

/* ---- contact form ---- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,64px);}
.form-field{margin-bottom:22px;}
.form-field label{display:block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--gray-2); margin-bottom:8px;}
.form-field .input-ph{border:1px solid var(--gray-4); border-radius:var(--radius-sm); height:46px; background:var(--gray-5);}
.form-field .input-ph.textarea{height:120px;}
.form-field .input-field{display:block; width:100%; border:1px solid var(--gray-4); border-radius:var(--radius-sm); background:var(--gray-5); font-family:inherit; font-size:0.95rem; color:var(--ink); padding:0 14px; height:46px; transition:border-color .2s var(--ease), background .2s var(--ease);}
.form-field textarea.input-field{height:120px; padding:12px 14px; resize:vertical; line-height:1.5;}
.form-field .input-field:focus{outline:none; border-color:var(--navy); background:var(--white);}
input,textarea,button{font-family:inherit; font-size:inherit; color:inherit;}
.contact-info div{margin-bottom:28px;}
.contact-info h4{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--red); margin-bottom:8px;}
.contact-info p{font-size:0.98rem; color:var(--gray-1);}
.contact-card{border:1px solid var(--gray-4); border-radius:var(--radius-lg); padding:28px;}

/* ---- CTA (dark, used sparingly) ---- */
.cta{padding:clamp(70px,14vw,120px) 0; text-align:center; border-bottom:none; background:linear-gradient(160deg,#031f30,var(--navy-deep));}
.cta h2{font-size:clamp(1.9rem,5.6vw,3.4rem); max-width:760px; margin:0 auto 24px; color:var(--white);}
.cta p{max-width:520px; margin:0 auto 38px; color:#bcd0dc;}
.cta-btn-row{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
.cta .btn-dark{border-radius:999px; background:var(--red); border-color:var(--red);}
.cta .btn-outline{border:1.5px solid rgba(255,255,255,0.5); color:var(--white); border-radius:999px; padding:13px 30px; font-size:0.85rem; font-weight:600;}
.cta .btn-outline:hover{background:var(--red); border-color:var(--red);}

/* ---- CTA (light, clean closing sections — default from here on) ---- */
.cta-simple{padding:clamp(64px,12vw,110px) 0; text-align:center; border-bottom:none; background:var(--white);}
.cta-simple .section-tag{justify-content:center; display:block;}
.cta-simple h2{font-size:clamp(1.8rem,5vw,3rem); max-width:720px; margin:0 auto 18px; color:var(--navy-deep);}
.cta-simple p{max-width:520px; margin:0 auto 34px; color:var(--gray-2); font-size:1rem;}
.cta-simple .btn-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.btn-solid{display:inline-block; background:var(--navy-deep); color:var(--white); border:1.5px solid var(--navy-deep); border-radius:999px; padding:14px 32px; font-size:0.88rem; font-weight:600; letter-spacing:0.01em; transition:all .2s var(--ease);}
.btn-solid:hover{background:var(--red); border-color:var(--red);}
.btn-ghost{display:inline-block; background:transparent; color:var(--navy-deep); border:1.5px solid var(--gray-4); border-radius:999px; padding:14px 32px; font-size:0.88rem; font-weight:600; letter-spacing:0.01em; transition:all .2s var(--ease);}
.btn-ghost:hover{border-color:var(--red); background:var(--red); color:var(--white);}

/* ---- hero product grid (Apple-style featured tiles) ---- */
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--gray-4); border-bottom:1px solid var(--gray-4);}
.hero-tile{position:relative; min-height:560px; display:flex; flex-direction:column; align-items:center; padding:56px 32px 0; text-align:center; overflow:hidden; background:linear-gradient(165deg,#eef4f8,#dbe9f2);}
.hero-tile.dark{background:linear-gradient(165deg,#111113,#000);}
.hero-tile h3{font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.1rem); font-weight:700; margin-bottom:6px; color:var(--navy-deep);}
.hero-tile.dark h3{color:#fff;}
.hero-tile .tagline{font-size:1rem; color:var(--gray-1); margin-bottom:22px;}
.hero-tile.dark .tagline{color:#c7c7cc;}
.hero-btn-row{display:flex; gap:12px; margin-bottom:34px;}
.hero-pill{display:inline-block; padding:9px 22px; font-size:0.85rem; font-weight:600; border-radius:999px; transition:all .2s var(--ease);}
.hero-pill.solid{background:var(--navy); color:#fff; border:1.5px solid var(--navy);}
.hero-pill.solid:hover{background:var(--red); border-color:var(--red);}
.hero-pill.outline{border:1.5px solid var(--navy); color:var(--navy); background:transparent;}
.hero-pill.outline:hover{background:var(--red); border-color:var(--red); color:var(--white);}
.hero-tile.dark .hero-pill.solid{background:#fff; color:#000; border-color:#fff;}
.hero-tile.dark .hero-pill.solid:hover{background:var(--red); border-color:var(--red); color:var(--white);}
.hero-tile.dark .hero-pill.outline{border-color:#fff; color:#fff;}
.hero-tile.dark .hero-pill.outline:hover{background:var(--red); border-color:var(--red);}
.hero-photo{width:100%; flex:1; display:flex; align-items:flex-end; justify-content:center; margin-top:auto;}
.hero-photo img{max-width:82%; max-height:320px; object-fit:contain; filter:drop-shadow(0 26px 34px rgba(2,76,114,0.22));}
.hero-tile.dark .hero-photo img{filter:drop-shadow(0 26px 34px rgba(0,0,0,0.6));}
.hero-photo .hero-mock{width:82%; height:230px; border-radius:var(--radius-lg);}

/* ---- footer ---- */
footer{background:var(--navy-deep); color:#bcd0dc; padding:clamp(48px,8vw,70px) 0 30px;}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:50px;}
.footer-brand{display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:0.95rem;}
.footer-brand svg path, .footer-brand svg circle{stroke:var(--white); fill:var(--white);}
.footer-brand .logo-remoti{color:var(--white);}
.footer-brand .logo-com{color:var(--brand-grey);}
.footer-brand .logo-img{height:32px; width:auto; display:block;}
.footer-tag{font-size:0.72rem; color:var(--brand-grey); margin-top:6px; letter-spacing:0.03em;}
.footer-cols{display:flex; gap:clamp(30px,6vw,70px); flex-wrap:wrap;}
.footer-col h5{font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand-grey); margin-bottom:14px;}
.footer-col a, .footer-col p{display:block; font-size:0.83rem; color:#bcd0dc; margin-bottom:9px;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.72rem; color:var(--gray-3);}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1024px){
  .nav{justify-content:space-between; padding:0 var(--pad);}
  .logo{position:static; transform:none;}
  .burger{display:flex;}
  .nav-cta{display:none;}
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--white);
    border-bottom:1px solid var(--gray-4); box-shadow:0 12px 24px rgba(2,76,114,0.08);
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  nav.main-nav ul{flex-direction:column; align-items:flex-start; gap:0; padding:10px var(--pad) 18px;}
  nav.main-nav ul li{width:100%;}
  nav.main-nav a{display:block; padding:12px 0; font-size:0.92rem; width:100%;}
  nav.main-nav .nav-cta-mobile{display:block; margin-top:10px;}
  nav.main-nav .nav-cta-mobile a{background:var(--navy); color:var(--white); text-align:center; border-radius:999px; padding:12px 0; font-weight:600; transition:background .2s var(--ease);}
  nav.main-nav .nav-cta-mobile a:hover{background:var(--red);}
  .nav-toggle-input:checked ~ .main-nav{max-height:480px;}

  .card-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .two-col, .contact-grid{grid-template-columns:1fr;}
  .two-col{gap:32px;}
  .two-col > .ph{order:-1;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .detail-meta .wrap{justify-content:flex-start;}
  .arch-grid{grid-template-columns:1fr 1fr;}
  .arch-card{border-bottom:1px solid var(--gray-4);}
  .arch-card .ph{height:auto; aspect-ratio:4/3;}
  .split-grid{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr 1fr;}
  .deploy-grid{grid-template-columns:1fr;}
  .pilot-steps{grid-template-columns:1fr;}
  .pilot-steps::before{display:none;}
  .timeline-steps{grid-template-columns:1fr 1fr; row-gap:32px;}
  .timeline-steps::before{display:none;}
  .mesh-nodes{grid-template-columns:repeat(4,1fr);}
  .exec-quote-grid{grid-template-columns:1fr; text-align:center; gap:28px;}
  .exec-photo-ph{margin:0 auto;}
  .exec-quote-text blockquote{max-width:none;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-tile{min-height:460px; padding-top:44px;}
  .hero-photo-ph video{display:none;}
  .hero-photo-ph{background-image:url('../images/hero/hero-street-night.webp'); background-size:cover; background-position:center;}
}

@media (max-width:640px){
  :root{--pad:20px;}
  section{border-bottom-color:var(--gray-5);}
  .hero{min-height:auto; padding-top:0;}
  .hero-inner{padding:72px 0 56px;}
  .spotlight{padding:56px 0;}
  .spotlight .specs, .specs{gap:22px 34px;}
  .product-grid{grid-template-columns:1fr; gap:16px;}
  .product-card{display:flex; align-items:center;}
  .product-card .ph{width:110px; height:110px; flex:none; aspect-ratio:1/1; padding:8px; border-bottom:none; border-right:none;}
  .product-card .ph img{object-fit:contain;}
  .product-meta{padding:14px 16px; flex:1; min-width:0;}
  .product-card .cta-row{flex-direction:column; align-items:flex-start; gap:6px;}
  .timeline-steps{grid-template-columns:1fr; row-gap:24px;}
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-grid .ph.wide{grid-column:span 1;}
  .values-grid{grid-template-columns:1fr;}
  .section-head{margin-bottom:32px;}
  .cta-btn-row{flex-direction:column; width:100%;}
  .cta-btn-row .btn, .cta-btn-row .btn-dark, .cta-btn-row .btn-outline{width:100%; text-align:center;}
  .cta-simple .btn-row{flex-direction:column; width:100%;}
  .cta-simple .btn-row .btn-solid, .cta-simple .btn-row .btn-ghost{width:100%; text-align:center;}
  .footer-top{flex-direction:column; gap:32px;}
  .footer-cols{gap:32px;}
  .detail-meta .wrap{flex-direction:column; align-items:flex-start; gap:16px;}
  .detail-meta .cta-btn-row{width:100%;}
  .detail-meta .cta-btn-row a{flex:1; text-align:center;}
  .arch-grid{grid-template-columns:1fr;}
  .arch-card .ph{height:auto; aspect-ratio:4/3;}
  .stat-strip{grid-template-columns:1fr 1fr;}
}

/* ---- column-count helpers (used instead of inline grid-template-columns so responsive stacking still applies) ---- */
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1024px){
  .grid-3{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .grid-3, .grid-2{grid-template-columns:1fr;}
}