/* ═══════════════════════════════════════════════════
   LSP — Lifestylepanel Holdings Ltd · v3 Design System
   Dark Navy · Teal Accent · DM Sans
   ═══════════════════════════════════════════════════ */

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

:root{
  --t:    #14B8A6;
  --td:   #0d9488;
  --trgb: 20,184,166;
  --tgl:  rgba(20,184,166,.08);
  --bg:   #0C1220;
  --bg2:  #111827;
  --bg3:  #162032;
  --bg4:  #1d2d44;
  --ink:  #f0f6ff;
  --i2:   rgba(240,246,255,.55);
  --i3:   rgba(240,246,255,.3);
  --i4:   rgba(240,246,255,.12);
  --b:    rgba(255,255,255,.07);
  --b2:   rgba(255,255,255,.13);
  --w:    #ffffff;
  --s:    var(--bg2);
  --s2:   var(--bg3);
  --fH:   'DM Sans', sans-serif;
  --fB:   'DM Sans', sans-serif;
  --max:  1220px;
  --ease: cubic-bezier(.16,1,.3,1);
}

body.theme-care    { --t:#10b981; --td:#059669; --trgb:16,185,129 }
body.theme-stays   { --t:#3b82f6; --td:#2563eb; --trgb:59,130,246 }
body.theme-signs   { --t:#8b5cf6; --td:#7c3aed; --trgb:139,92,246 }
body.theme-insight { --t:#06b6d4; --td:#0891b2; --trgb:6,182,212 }
body.theme-eoc     { --t:#6366f1; --td:#4f46e5; --trgb:99,102,241 }
body.theme-hotspot { --t:#f97316; --td:#ea580c; --trgb:249,115,22 }

html { scroll-behavior:smooth }
body { background:var(--bg); color:var(--ink); font-family:var(--fH); font-size:16px; line-height:1.6; overflow-x:hidden }

/* Subtle dot grid texture */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.018;
  background-image:radial-gradient(circle, rgba(240,246,255,.8) 1px, transparent 1px);
  background-size:28px 28px;
}

/* ══════════════════════════════ CURSOR ══════════════════════════════ */
@media(hover:hover){
  body { cursor:none }
  #cur { position:fixed; width:7px; height:7px; border-radius:50%; background:var(--t); pointer-events:none; z-index:9999; left:-40px; top:-40px; transform:translate(-50%,-50%); transition:width .15s, height .15s, background .15s }
  #cur-r { position:fixed; width:30px; height:30px; border-radius:50%; border:1.5px solid rgba(var(--trgb),.4); pointer-events:none; z-index:9998; left:-40px; top:-40px; transform:translate(-50%,-50%); transition:width .3s, height .3s, border-color .3s, background .3s }
  body.hov #cur-r { width:46px; height:46px; background:rgba(var(--trgb),.07); border-color:rgba(var(--trgb),.75) }
  body.hov #cur { width:5px; height:5px }
}
@media(hover:none){ #cur,#cur-r { display:none } }

/* ══════════════════════════════ NAV ══════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500; height:68px;
  padding:0 56px; display:flex; align-items:center; justify-content:space-between;
  background:transparent; backdrop-filter:none;
  border-bottom:1px solid transparent; transition:border-color .4s, background .5s, backdrop-filter .5s
}
nav.on { background:rgba(12,18,32,.92); backdrop-filter:blur(18px) saturate(1.4); border-color:var(--b) }
.logo { display:flex; align-items:center; text-decoration:none }
.lmark { display:flex; align-items:center; transition:opacity .25s; flex-shrink:0 }
.logo:hover .lmark { opacity:.7 }
.lmark img { height:34px; width:auto; display:block }
body[class*="theme-"] .lmark img { height:34px; padding:0 }
.lword { display:none }
.nl { display:flex; gap:2px; list-style:none }
.nl a { font-size:.8rem; font-weight:500; color:var(--i2); text-decoration:none; padding:6px 13px; border-radius:6px; transition:color .2s, background .2s; position:relative; letter-spacing:.005em }
.nl a:hover { color:var(--ink); background:rgba(255,255,255,.05) }
.nl a.active { color:var(--ink) }
.nl a.active::after { content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:18px; height:2px; background:var(--t); border-radius:2px }
.has-drop { position:relative }
.drop {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(12px);
  list-style:none; background:var(--bg3); border:1px solid var(--b2); border-radius:10px;
  padding:6px; min-width:170px; opacity:0; visibility:hidden;
  transition:opacity .2s, transform .2s, visibility .2s;
  box-shadow:0 16px 48px rgba(0,0,0,.45); z-index:600
}
.has-drop:hover .drop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(4px) }
.drop li { padding:0 }
.drop a { display:block; padding:9px 16px; font-size:.8rem; font-weight:500; color:var(--i2); transition:color .15s, background .15s; border-radius:7px }
.drop a:hover { color:var(--t); background:rgba(var(--trgb),.08) }
.nr { display:flex; align-items:center; gap:10px }
.nbtn { font-size:.8rem; font-weight:700; background:var(--t); color:#fff; padding:9px 22px; border-radius:7px; text-decoration:none; transition:background .2s, transform .15s, box-shadow .2s; box-shadow:0 2px 14px rgba(var(--trgb),.28) }
.nbtn:hover { background:var(--td); transform:translateY(-1px); box-shadow:0 6px 24px rgba(var(--trgb),.38) }
.ham { display:none; width:36px; height:36px; border:none; background:transparent; cursor:pointer; position:relative; z-index:501; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0 }
.ham span { display:block; width:20px; height:1.5px; background:var(--ink); transition:all .3s; border-radius:2px }
body.nav-open .ham span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
body.nav-open .ham span:nth-child(2) { opacity:0; transform:scaleX(0) }
body.nav-open .ham span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }
.mob-menu { display:flex; position:fixed; inset:0; z-index:499; background:var(--bg2); padding:84px 32px 40px; flex-direction:column; gap:0; opacity:0; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease); pointer-events:none }
body.nav-open .mob-menu { opacity:1; transform:translateY(0); pointer-events:all }
.mob-menu a { font-size:1.05rem; font-weight:600; color:var(--i2); text-decoration:none; padding:13px 0; border-bottom:1px solid var(--b); transition:color .2s }
.mob-menu a:hover { color:var(--t) }
.mob-menu .mm-btn { margin-top:24px; display:block; font-weight:700; font-size:1rem; background:var(--t); color:#fff; padding:14px 32px; border-radius:8px; text-decoration:none; text-align:center; box-shadow:0 4px 18px rgba(var(--trgb),.3); border-bottom:none }

/* ══════════════════════════════ HERO ══════════════════════════════ */
.hero { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; position:relative; overflow:hidden; background:var(--bg); padding-top:0 }
.hero::before { content:''; display:block; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(135deg, rgba(7,63,58,.0) 0%, rgba(7,63,58,.27) 12%, rgba(10,107,100,.24) 28%, rgba(20,184,166,.078) 48%, rgba(8,145,178,.066) 60%, rgba(10,107,100,.228) 80%, rgba(7,63,58,.0) 100%); background-size:300% 300%; animation:heroGrad 12.8s ease infinite }
@keyframes heroGrad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero::after { content:''; position:absolute; bottom:0; right:0; width:50%; height:100%; background:rgba(255,255,255,.018); border-left:1px solid var(--b); pointer-events:none; z-index:0 }
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; will-change:transform }
.hero-orb-1 { width:680px; height:680px; top:-160px; left:-220px; background:radial-gradient(circle, rgba(20,184,166,.09) 0%, transparent 65%); animation:orbFloat1 20s ease-in-out infinite }
.hero-orb-2 { width:520px; height:520px; top:15%; right:-200px; background:radial-gradient(circle, rgba(99,102,241,.07) 0%, transparent 65%); animation:orbFloat2 26s ease-in-out infinite }
.hero-orb-3 { width:420px; height:420px; bottom:-80px; left:35%; background:radial-gradient(circle, rgba(6,182,212,.055) 0%, transparent 65%); animation:orbFloat3 18s ease-in-out infinite }
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 35%{transform:translate(45px,-35px) scale(1.06)} 70%{transform:translate(-18px,22px) scale(.96)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,28px) scale(1.05)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(28px,-22px) scale(1.07)} 80%{transform:translate(-14px,16px) scale(.97)} }
.hero-l { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:48px 56px 100px 56px }
.hero-r { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:68px 40px 100px 32px; gap:20px }
.h-tag { display:inline-flex; align-items:center; gap:9px; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--t); margin-bottom:28px; opacity:0; animation:up .6s .1s ease forwards }
.h-tag span { width:20px; height:1.5px; background:var(--t); display:block }
h1.hero-h { font-size:clamp(2.6rem,4.8vw,5rem); font-weight:800; line-height:1.09; letter-spacing:-.03em; color:var(--ink); margin-bottom:24px }
.hero-word { display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.13 }
.hero-word-inner { display:inline-block; animation:wordReveal .75s cubic-bezier(.16,1,.3,1) both }
@keyframes wordReveal { from{opacity:0;transform:translateY(65%)} to{opacity:1;transform:translateY(0)} }
h1.hero-h em { font-style:normal; font-weight:800; color:var(--t) }
.h-sub { font-size:.98rem; color:var(--i2); line-height:1.78; max-width:460px; margin-bottom:28px; opacity:0; animation:up .8s .35s ease forwards }
.h-btns { display:flex; align-items:center; gap:16px; opacity:0; animation:up .8s .48s ease forwards }
.b-fill { font-weight:700; font-size:.88rem; background:var(--t); color:#fff; padding:13px 28px; border-radius:7px; text-decoration:none; transition:background .2s, transform .2s, box-shadow .2s }
.b-fill:hover { background:var(--td); transform:translateY(-2px); box-shadow:0 8px 24px rgba(var(--trgb),.3) }
.b-link { font-weight:500; font-size:.88rem; color:var(--i2); text-decoration:none; display:flex; align-items:center; gap:6px; transition:color .2s, gap .2s; padding:13px 0 }
.b-link:hover { color:var(--t); gap:10px }
.hero-mobile-img { display:none }
.h-stats { position:absolute; bottom:0; left:0; right:0; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--b); background:transparent; backdrop-filter:blur(12px) }
.hst { padding:20px 32px; border-right:1px solid var(--b) }
.hst:last-child { border-right:none }
.hst-n { font-size:1.8rem; font-weight:800; color:var(--t); line-height:1.1; margin-bottom:4px; letter-spacing:-.03em }
.hst-l { font-size:.68rem; font-weight:600; color:var(--i3); letter-spacing:.05em; text-transform:uppercase }
.partner-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.2); padding:6px 16px; border-radius:100px; font-size:.72rem; font-weight:600; color:var(--t); margin-top:20px; opacity:0; animation:up .8s .62s ease forwards }
.partner-badge .pb-dot { width:5px; height:5px; border-radius:50%; background:var(--t); animation:pulse 2s ease infinite }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.35} }

/* ══════════════════════════════ HERO DEVICE MOCKUP ══════════════════════════════ */
.hero-device { width:100%; max-width:420px; background:var(--bg3); border:1px solid rgba(255,255,255,.11); border-radius:14px; overflow:hidden; box-shadow:0 28px 72px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04); opacity:0; animation:up .8s .3s ease forwards }
.hd-topbar { background:rgba(16,185,129,.1); border-bottom:1px solid rgba(16,185,129,.18); padding:11px 16px; display:flex; align-items:center; justify-content:space-between }
.hd-hospital { font-size:.68rem; font-weight:700; color:#10b981; letter-spacing:.01em }
.hd-room { font-size:.6rem; color:var(--i3); margin-top:2px }
.hd-live { display:inline-flex; align-items:center; gap:5px; font-size:.6rem; font-weight:700; color:#10b981 }
.hd-live span { width:6px; height:6px; border-radius:50%; background:#10b981; animation:pulse 2s ease infinite; display:block }
.hd-body { padding:14px 16px 12px }
.hd-greeting { margin-bottom:14px }
.hd-hello { font-size:.82rem; font-weight:600; color:var(--ink) }
.hd-hello strong { color:#10b981 }
.hd-sub { font-size:.65rem; color:var(--i3); margin-top:2px }
.hd-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px }
.hd-tile { background:var(--bg4); border:1px solid var(--b); border-radius:9px; padding:10px 6px 8px; display:flex; flex-direction:column; align-items:center; gap:5px }
.hd-tile.hd-tile-on { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.32) }
.hd-tile-ico { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.05); display:grid; place-items:center }
.hd-tile-ico svg { width:15px; height:15px; stroke:var(--i3) }
.hd-tile.hd-tile-on .hd-tile-ico { background:rgba(16,185,129,.18) }
.hd-tile.hd-tile-on .hd-tile-ico svg { stroke:#10b981 }
.hd-tile span { font-size:.57rem; font-weight:600; color:var(--i3); text-align:center; letter-spacing:.01em }
.hd-tile.hd-tile-on span { color:#10b981 }
.hd-nowplaying { background:rgba(255,255,255,.03); border:1px solid var(--b); border-radius:8px; padding:8px 12px; display:flex; align-items:center; justify-content:space-between }
.hd-np-dot { display:flex; align-items:center; gap:6px; font-size:.62rem; font-weight:600; color:var(--i2) }
.hd-np-dot span { width:5px; height:5px; border-radius:50%; background:#10b981; animation:pulse 1.5s ease infinite; display:block }
.hd-np-ch { font-size:.62rem; color:var(--i3) }
.hd-footer { border-top:1px solid var(--b); padding:9px 16px; display:flex; align-items:center; justify-content:space-between }
.hd-brand { font-size:.72rem; font-weight:800; color:var(--ink) }
.hd-brand em { font-style:normal; color:#10b981 }
.hd-foxtel { font-size:.58rem; font-weight:600; color:var(--i3); background:rgba(255,255,255,.05); border:1px solid var(--b); padding:3px 8px; border-radius:100px }

/* Solution list */
.platform-list { width:100%; max-width:480px; display:flex; flex-direction:column; gap:9px }
.pl-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:18px 20px; text-decoration:none; position:relative; border-radius:11px; border:1px solid var(--b); background:rgba(255,255,255,.03); transition:box-shadow .3s, border-color .3s, background .3s; opacity:0; animation:plSlide .7s ease forwards; transform-style:preserve-3d; will-change:transform }
.pl-item:nth-child(1){animation-delay:.45s}.pl-item:nth-child(2){animation-delay:.55s}.pl-item:nth-child(3){animation-delay:.65s}.pl-item:nth-child(4){animation-delay:.75s}.pl-item:nth-child(5){animation-delay:.85s}
@keyframes plSlide { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.pl-item:hover { box-shadow:0 12px 32px rgba(0,0,0,.28); border-color:rgba(var(--trgb),.35); background:rgba(var(--trgb),.05) }
.pl-number { font-size:.68rem; font-weight:700; color:var(--i4); min-width:18px; letter-spacing:.04em }
.pl-item:hover .pl-number { color:var(--t) }
.pl-body { display:flex; align-items:center; gap:13px }
.pl-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(var(--trgb),.1); border:1px solid rgba(var(--trgb),.2); color:var(--t); transition:background .25s, transform .3s }
.pl-item:hover .pl-icon { transform:scale(1.08); background:rgba(var(--trgb),.18) }
.pl-text { flex:1; min-width:0 }
.pl-name { font-weight:700; font-size:.96rem; letter-spacing:-.015em; color:var(--ink); margin-bottom:2px; line-height:1.3 }
.pl-name em { font-style:normal; color:var(--t) }
.pl-desc { font-size:.74rem; color:var(--i3); line-height:1.5 }
.pl-tags { display:flex; gap:5px; margin-top:4px }
.pl-tags span { font-size:.59rem; font-weight:700; padding:2px 8px; border-radius:100px; background:rgba(var(--trgb),.08); color:var(--t); border:1px solid rgba(var(--trgb),.15) }
.pl-arrow { color:var(--i4); transition:color .25s, transform .3s; display:flex; align-items:center }
.pl-item:hover .pl-arrow { color:var(--t); transform:translateX(3px) }
.pl-item.pl-care    { --trgb:16,185,129 }
.pl-item.pl-stays   { --trgb:59,130,246 }
.pl-item.pl-signs   { --trgb:139,92,246 }
.pl-item.pl-insight { --trgb:6,182,212 }
.pl-item.pl-eoc     { --trgb:99,102,241 }

@keyframes up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ══════════════════════════════ TRUSTED BY ══════════════════════════════ */
.trust-bar { padding:30px 56px; background:var(--bg); border-bottom:1px solid var(--b) }
.trust-bar-inner { max-width:var(--max); margin:0 auto; display:flex; align-items:center; gap:32px }
.trust-bar-label { font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--i3); white-space:nowrap; flex-shrink:0 }
.trust-logos { flex:1; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent); mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent) }
.trust-track { display:flex; align-items:center; gap:8px; width:max-content; animation:marqueeScroll 32s linear infinite }
.trust-track:hover { animation-play-state:paused }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.trust-track span, .trust-track .tb-badge { flex-shrink:0 }
.tb-badge { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; padding:8px 14px 8px 8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; transition:border-color .2s }
.tb-badge:hover { border-color:rgba(var(--trgb),.25) }
.tb-mono { width:34px; height:34px; border-radius:7px; background:rgba(var(--trgb),.1); border:1px solid rgba(var(--trgb),.18); display:grid; place-items:center; font-size:.58rem; font-weight:800; color:var(--t); letter-spacing:.04em; flex-shrink:0 }
.tb-name { font-size:.74rem; font-weight:600; color:var(--i2); white-space:nowrap }
.tb-net { font-size:.6rem; color:var(--i4); margin-top:1px; white-space:nowrap }

/* ══════════════════════════════ SECTION HEADERS ══════════════════════════════ */
.ey { font-size:.67rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--t); margin-bottom:14px; display:flex; align-items:center; gap:8px }
.ey::before { content:''; width:14px; height:1.5px; background:var(--t); flex-shrink:0 }
.sh { font-size:clamp(1.75rem,2.9vw,2.7rem); font-weight:800; letter-spacing:-.025em; line-height:1.15; color:var(--ink) }
.sh em { font-style:normal; font-weight:800; color:var(--t) }
.sp { font-size:.94rem; color:var(--i2); line-height:1.78; max-width:500px; margin-top:14px }

/* ══════════════════════════════ DARK TRUST SECTION ══════════════════════════════ */
.dark-section { background:var(--bg3); padding:80px 56px; position:relative; overflow:hidden }
.dark-section::before { content:''; position:absolute; top:-200px; right:-200px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(var(--trgb),.05) 0%, transparent 65%); pointer-events:none }
.ds-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; max-width:var(--max); margin:0 auto }
.ds-left .ey { color:var(--t) }
.ds-h { font-size:clamp(1.6rem,2.5vw,2.3rem); font-weight:800; letter-spacing:-.025em; line-height:1.18; color:var(--ink); margin-bottom:14px }
.ds-h em { font-style:normal; color:var(--t) }
.ds-p { font-size:.9rem; color:var(--i2); line-height:1.78 }
.ds-right { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--b); border-radius:12px; overflow:hidden; border:1px solid var(--b) }
.dsp { background:var(--bg2); padding:26px 24px; transition:background .3s }
.dsp:hover { background:rgba(var(--trgb),.07) }
.dsp-ico { width:34px; height:34px; border-radius:8px; background:rgba(var(--trgb),.1); border:1px solid rgba(var(--trgb),.2); display:grid; place-items:center; margin-bottom:12px; transition:background .25s }
.dsp:hover .dsp-ico { background:rgba(var(--trgb),.18) }
.dsp-ico svg { width:15px; height:15px; stroke:var(--t); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.dsp-t { font-weight:700; font-size:.83rem; color:var(--ink); margin-bottom:5px; line-height:1.35 }
.dsp-d { font-size:.76rem; color:var(--i3); line-height:1.65 }

/* ══════════════════════════════ SOLUTIONS SECTION ══════════════════════════════ */
.plat-sec { padding:96px 56px; background:var(--bg) }
.sec-hd { margin-bottom:52px }
.pg { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--b); border-radius:14px; overflow:hidden }
.pc { padding:44px 36px; border-right:1px solid var(--b); position:relative; background:var(--bg2); transition:background .3s }
.pc:last-child { border-right:none }
.pc:hover { background:var(--bg3) }
.pc-bar { position:absolute; top:0; left:0; right:0; height:2px; background:var(--t); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.76,0,.24,1) }
.pc:hover .pc-bar { transform:scaleX(1) }
.pc-tag { font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t); background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.16); padding:4px 10px; border-radius:100px; display:inline-block; margin-bottom:20px }
.pc-n { font-size:1.55rem; font-weight:800; letter-spacing:-.025em; color:var(--ink); margin-bottom:4px; line-height:1.1 }
.pc-n em { font-style:normal; color:var(--t) }
.pc-m { font-size:.7rem; font-weight:600; color:var(--i3); letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px }
.pc-d { font-size:.85rem; color:var(--i2); line-height:1.75; margin-bottom:22px }
.pc-fs { display:flex; flex-direction:column; gap:8px; margin-bottom:26px }
.pf { font-size:.8rem; color:var(--i2); display:flex; align-items:center; gap:8px }
.pf::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--t); flex-shrink:0 }
.pc-a { font-size:.78rem; font-weight:700; color:var(--t); text-decoration:none; letter-spacing:.02em; display:inline-flex; align-items:center; gap:6px; transition:gap .25s }
.pc-a:hover { gap:12px }

/* ══════════════════════════════ COMPANY/WHY SECTION ══════════════════════════════ */
.why-sec { padding:96px 56px; background:var(--bg2); border-top:1px solid var(--b) }
.why-inner { display:grid; grid-template-columns:380px 1fr; gap:80px; align-items:start; max-width:var(--max); margin:0 auto }
.why-nums { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:40px }
.wn { border-top:1px solid rgba(var(--trgb),.3); padding-top:14px }
.wn-v { font-size:2.3rem; font-weight:800; color:var(--t); line-height:1.1; margin-bottom:4px; letter-spacing:-.04em }
.wn-l { font-size:.7rem; font-weight:600; color:var(--i3); line-height:1.5 }
.why-items { display:flex; flex-direction:column }
.wi { padding:24px 0; border-bottom:1px solid var(--b); transition:padding-left .3s var(--ease) }
.wi:first-child { border-top:1px solid var(--b) }
.wi:hover { padding-left:6px }
.wi-h { display:flex; align-items:center; gap:12px; margin-bottom:8px }
.wi-num { font-size:.78rem; font-weight:700; color:var(--i4); width:24px; flex-shrink:0 }
.wi-t { font-weight:700; font-size:.94rem; color:var(--ink); flex:1; letter-spacing:-.01em }
.wi-arr { width:24px; height:24px; border-radius:50%; border:1px solid var(--b); display:grid; place-items:center; transition:all .25s; flex-shrink:0 }
.wi-arr svg { width:10px; height:10px; stroke:var(--i3); fill:none; stroke-width:2; stroke-linecap:round; transition:stroke .25s }
.wi:hover .wi-arr { background:var(--t); border-color:var(--t); transform:translateX(2px) }
.wi:hover .wi-arr svg { stroke:#fff }
.wi-b { font-size:.84rem; color:var(--i2); line-height:1.75; padding-left:36px }

/* ══════════════════════════════ CTA — TEAL GRADIENT BAND ══════════════════════════════ */
.cta-sec { padding:80px 56px }
.cta-in { background:linear-gradient(135deg, #073f3a 0%, #0a6b64 25%, #14B8A6 50%, #0891b2 75%, #073f3a 100%); background-size:300% 300%; border-radius:16px; padding:72px; display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; position:relative; overflow:hidden; animation:ctaGrad 10s ease infinite, ctaGlow 5s ease infinite }
@keyframes ctaGrad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ctaGlow { 0%,100%{box-shadow:0 8px 48px rgba(20,184,166,.18)} 50%{box-shadow:0 8px 72px rgba(20,184,166,.38), 0 0 0 1px rgba(20,184,166,.12)} }
.cta-in::before { content:''; position:absolute; right:-60px; top:-60px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none }
.cta-in::after { content:''; position:absolute; left:-80px; bottom:-80px; width:260px; height:260px; border-radius:50%; background:rgba(0,0,0,.08); pointer-events:none }
.cta-t { position:relative; z-index:1 }
.cta-ey { font-size:.67rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:12px; display:flex; align-items:center; gap:8px }
.cta-ey::before { content:''; width:14px; height:1.5px; background:rgba(255,255,255,.6) }
.cta-h { font-size:clamp(1.6rem,2.5vw,2.5rem); font-weight:800; letter-spacing:-.025em; line-height:1.18; color:#fff; margin-bottom:12px }
.cta-h em { font-style:normal; color:rgba(255,255,255,.85) }
.cta-p { font-size:.9rem; color:rgba(255,255,255,.7); line-height:1.75; max-width:460px }
.cta-btns { display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; flex-shrink:0 }
.cb1 { font-weight:700; font-size:.86rem; background:#fff; color:#0a6b64; padding:14px 32px; border-radius:8px; text-decoration:none; white-space:nowrap; text-align:center; transition:background .2s, transform .15s, box-shadow .2s }
.cb1:hover { background:rgba(255,255,255,.92); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.15) }
.cb2 { font-weight:600; font-size:.84rem; color:rgba(255,255,255,.8); padding:14px 32px; border-radius:8px; border:1.5px solid rgba(255,255,255,.35); text-decoration:none; text-align:center; white-space:nowrap; transition:all .2s }
.cb2:hover { color:#fff; border-color:rgba(255,255,255,.7) }

/* ══════════════════════════════ FOOTER ══════════════════════════════ */
footer { padding:56px 56px 36px; border-top:1px solid var(--b); background:var(--bg2) }
.ft { display:flex; justify-content:space-between; gap:48px; margin-bottom:48px; flex-wrap:wrap }
.ft p { font-size:.84rem; color:var(--i2); line-height:1.75; margin-top:12px; max-width:280px }
.ft-contact { margin-top:16px; display:flex; flex-direction:column; gap:5px }
.ft-contact a { font-size:.78rem; color:var(--i3); text-decoration:none; transition:color .2s }
.ft-contact a:hover { color:var(--t) }
.fc-h { font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--i3); margin-bottom:16px }
.fc-ul { list-style:none; display:flex; flex-direction:column; gap:10px }
.fc-ul a { font-size:.84rem; color:var(--i2); text-decoration:none; transition:color .2s }
.fc-ul a:hover { color:var(--t) }
.fb { display:flex; justify-content:space-between; align-items:center; padding-top:22px; border-top:1px solid var(--b); flex-wrap:wrap; gap:12px }
.fb-c { font-size:.72rem; color:var(--i3) }
.fb-l { display:flex; gap:20px }
.fb-l a { font-size:.72rem; color:var(--i3); text-decoration:none; transition:color .2s }
.fb-l a:hover { color:var(--i2) }

/* ══════════════════════════════ CONTACT PAGE ══════════════════════════════ */
.contact-sec { padding:96px 56px; background:var(--bg2); border-top:1px solid var(--b) }
.contact-grid { display:grid; grid-template-columns:1fr 400px; gap:64px; max-width:var(--max); margin:0 auto; align-items:start }
.cf-form { display:flex; flex-direction:column; gap:20px }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.cf-group { display:flex; flex-direction:column; gap:7px }
.cf-label { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--i3) }
.cf-input { background:var(--bg3); border:1px solid var(--b2); border-radius:9px; padding:13px 16px; font-size:.9rem; font-family:var(--fB); color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none }
.cf-input::placeholder { color:var(--i4) }
.cf-input:focus { border-color:rgba(var(--trgb),.5); box-shadow:0 0 0 3px rgba(var(--trgb),.08) }
textarea.cf-input { resize:vertical; min-height:130px; line-height:1.65 }
.cf-select { background:var(--bg3); border:1px solid var(--b2); border-radius:9px; padding:13px 16px; font-size:.9rem; font-family:var(--fB); color:var(--ink); outline:none; transition:border-color .2s; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,246,255,0.3)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center }
.cf-select option { background:var(--bg2) }
.cf-select:focus { border-color:rgba(var(--trgb),.5); box-shadow:0 0 0 3px rgba(var(--trgb),.08) }
.cf-submit { font-weight:700; font-size:.9rem; background:var(--t); color:#fff; padding:15px 36px; border-radius:9px; border:none; cursor:pointer; font-family:var(--fB); transition:background .2s, transform .15s, box-shadow .2s; text-align:center; align-self:flex-start; letter-spacing:-.01em }
.cf-submit:hover { background:var(--td); transform:translateY(-2px); box-shadow:0 8px 24px rgba(var(--trgb),.3) }
.cf-note { font-size:.75rem; color:var(--i3); line-height:1.7; margin-top:4px }
.contact-info { display:flex; flex-direction:column; gap:20px }
.ci-card { background:var(--bg3); border:1px solid var(--b); border-radius:14px; padding:32px; display:flex; flex-direction:column; gap:24px }
.ci-item { display:flex; align-items:flex-start; gap:14px }
.ci-ico { width:38px; height:38px; border-radius:9px; background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.16); display:grid; place-items:center; flex-shrink:0; margin-top:1px }
.ci-ico svg { width:17px; height:17px; stroke:var(--t); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.ci-label { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--i3); margin-bottom:4px }
.ci-val { font-size:.9rem; color:var(--ink); font-weight:500; line-height:1.55; text-decoration:none; transition:color .2s }
a.ci-val:hover { color:var(--t) }
.ci-hours { background:rgba(var(--trgb),.05); border:1px solid rgba(var(--trgb),.12); border-radius:10px; padding:18px 20px }
.ci-hours-h { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t); margin-bottom:10px }
.ci-hours-row { display:flex; justify-content:space-between; font-size:.8rem; color:var(--i2); padding:4px 0; border-bottom:1px solid var(--b) }
.ci-hours-row:last-child { border-bottom:none }
.ci-hours-row span:last-child { color:var(--ink); font-weight:500 }

/* ══════════════════════════════ REVEAL ══════════════════════════════ */
.r      { opacity:0; transform:translateY(22px);  transition:opacity .65s var(--ease), transform .65s var(--ease) }
.r-left { opacity:0; transform:translateX(-24px); transition:opacity .65s var(--ease), transform .65s var(--ease) }
.r-right{ opacity:0; transform:translateX(24px);  transition:opacity .65s var(--ease), transform .65s var(--ease) }
.r.in,.r-left.in,.r-right.in { opacity:1; transform:translate(0,0) }
.d1{transition-delay:.07s}.d2{transition-delay:.13s}.d3{transition-delay:.19s}.d4{transition-delay:.26s}.d5{transition-delay:.33s}.d6{transition-delay:.4s}

/* ══════════════════════════════ PLATFORM/SOLUTION PAGE HERO ══════════════════════════════ */
.plat-hero { min-height:72vh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:140px 56px 80px; position:relative; overflow:hidden; background-color:var(--bg); background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px); background-size:32px 32px }
/* animated gradient wash — inherits theme colour via --trgb so each product page gets its own tint */
.plat-hero::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg, rgba(var(--trgb),0) 0%, rgba(var(--trgb),.18) 15%, rgba(var(--trgb),.28) 40%, rgba(var(--trgb),.12) 62%, rgba(var(--trgb),0) 100%); background-size:300% 300%; animation:heroGrad 16s ease infinite }
.plat-hero::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 70% at 75% 40%, rgba(var(--trgb),.09) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 85% 80%, rgba(99,102,241,.06) 0%, transparent 55%), radial-gradient(ellipse 80% 40% at 50% 100%, transparent 30%, var(--bg) 100%); pointer-events:none }
/* thin teal glow line at top — left-anchored to match text */
.plat-hero-line { position:absolute; top:0; left:56px; width:200px; height:1px; background:linear-gradient(90deg, rgba(var(--trgb),.7), transparent); pointer-events:none }
/* max-width wrapper — same grid as all other sections */
.ph-inner { max-width:var(--max); width:100%; position:relative; z-index:1 }
.ph-breadcrumb { font-size:.72rem; font-weight:500; color:var(--i3); margin-bottom:28px; display:flex; align-items:center; gap:6px }
.ph-breadcrumb a { color:var(--i3); text-decoration:none; transition:color .2s }
.ph-breadcrumb a:hover { color:var(--t) }
.ph-breadcrumb .sep { color:var(--i4) }
.ph-tag { display:inline-flex; align-items:center; gap:9px; font-size:.67rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--t); margin-bottom:20px; opacity:0; animation:up .6s .1s ease forwards }
.ph-tag span { width:20px; height:1.5px; background:var(--t); display:block }
.ph-h { font-size:clamp(2.4rem,4.8vw,5rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; color:var(--ink); margin-bottom:24px; opacity:0; animation:up .8s .2s ease forwards }
.ph-h em { font-style:normal; color:var(--t) }
.ph-sub { font-size:1.05rem; color:var(--i2); line-height:1.78; max-width:520px; margin:0 0 36px; opacity:0; animation:up .8s .35s ease forwards }
.ph-btns { display:flex; gap:14px; opacity:0; animation:up .8s .48s ease forwards }

/* Hero split image */
.ph-hero-img-wrap { display:flex; align-items:center; justify-content:flex-end; opacity:0; animation:up .9s .4s ease forwards }
.ph-hero-img { max-width:100%; height:auto; display:block; filter:drop-shadow(0 32px 64px rgba(0,0,0,.55)) drop-shadow(0 0 80px rgba(var(--trgb),.12)) }
/* Browser chrome mockup (used for dashboard screenshots) */
.ph-browser-frame { width:100%; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:0 32px 72px rgba(0,0,0,.55), 0 0 80px rgba(var(--trgb),.1) }
.ph-browser-bar { background:#1d2535; padding:10px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid rgba(255,255,255,.07) }
.ph-browser-dot { width:9px; height:9px; border-radius:50%; display:block; flex-shrink:0 }
.ph-browser-dot:nth-child(1){ background:#ff5f57 }
.ph-browser-dot:nth-child(2){ background:#febc2e }
.ph-browser-dot:nth-child(3){ background:#28c840 }
.ph-browser-frame img { width:100%; display:block; border-radius:0 }
@media(max-width:900px){ .ph-hero-img-wrap { display:none } .ph-inner[style*="grid"] { grid-template-columns:1fr !important } }

/* ══════════════════════════════ FEATURES GRID ══════════════════════════════ */
.feat-sec { padding:96px 56px; background:var(--bg) }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--b); border-radius:14px; overflow:hidden; border:1px solid var(--b); max-width:var(--max); margin:0 auto }
.feat-card { background:var(--bg2); padding:38px 32px; transition:background .3s }
.feat-card:hover { background:var(--bg3) }
.fc-ico { width:42px; height:42px; border-radius:10px; background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.16); display:grid; place-items:center; margin-bottom:16px; transition:background .25s }
.feat-card:hover .fc-ico { background:rgba(var(--trgb),.16) }
.fc-ico svg { width:20px; height:20px; stroke:var(--t); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.fc-title { font-weight:700; font-size:.95rem; color:var(--ink); margin-bottom:8px; letter-spacing:-.01em; line-height:1.35 }
.fc-desc { font-size:.84rem; color:var(--i2); line-height:1.72 }

/* ══════════════════════════════ USE CASES ══════════════════════════════ */
.use-sec { padding:96px 56px; background:var(--bg2); border-top:1px solid var(--b) }
.use-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:var(--max); margin:0 auto }
.use-card { background:var(--bg3); border:1px solid var(--b); border-radius:12px; overflow:hidden; transition:border-color .3s, box-shadow .3s, transform .3s; padding:28px }
.uc-img { width:100%; height:220px; object-fit:contain; background:var(--bg2); display:block; border-radius:8px; margin-bottom:16px }
.use-card:hover { border-color:rgba(var(--trgb),.3); box-shadow:0 8px 32px rgba(0,0,0,.22); transform:translateY(-3px) }
.uc-tag { font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t); background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.15); padding:3px 10px; border-radius:100px; display:inline-block; margin-bottom:12px }
.uc-h { font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:8px; letter-spacing:-.01em; line-height:1.35 }
.uc-p { font-size:.84rem; color:var(--i2); line-height:1.72 }

/* ══════════════════════════════ INTEGRATION STRIP ══════════════════════════════ */
.int-strip { padding:56px; background:var(--bg3); border-top:1px solid var(--b); text-align:center }
.int-strip .ey { justify-content:center }
.int-strip .ey::before { display:none }
.int-items { display:flex; justify-content:center; gap:40px; flex-wrap:wrap; margin-top:28px }
.int-item { display:flex; flex-direction:column; align-items:center; gap:8px }
.int-item .ii-ico { width:50px; height:50px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--b); display:grid; place-items:center; transition:border-color .25s, background .25s }
.int-item:hover .ii-ico { border-color:rgba(var(--trgb),.3); background:rgba(var(--trgb),.08) }
.int-item .ii-ico svg { width:22px; height:22px; stroke:var(--t); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.int-item span { font-size:.7rem; font-weight:500; color:var(--i3) }

/* ══════════════════════════════ PROJECTS / INDUSTRIES GRID ══════════════════════════════ */
.proj-sec { padding:96px 56px; background:var(--bg) }
.proj-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:var(--max); margin:0 auto }
.proj-card { background:var(--bg2); border:1px solid var(--b); border-radius:12px; overflow:hidden; transition:border-color .3s, transform .3s, box-shadow .3s; position:relative }
.proj-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--t); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.76,0,.24,1); z-index:1 }
.proj-card:hover::before { transform:scaleX(1) }
.proj-card:hover { border-color:rgba(var(--trgb),.22); transform:translateY(-3px); box-shadow:0 10px 32px rgba(0,0,0,.25) }
.proj-img { width:100%; height:auto; max-height:165px; object-fit:contain; display:block }
.proj-body { padding:20px 20px 24px }
.proj-name { font-weight:700; font-size:.93rem; color:var(--ink); margin-bottom:4px; line-height:1.3 }
.proj-scope { font-size:.72rem; font-weight:700; color:var(--t); margin-bottom:8px; line-height:1.4 }
.proj-desc { font-size:.78rem; color:var(--i2); line-height:1.7 }

/* ══════════════════════════════ HARDWARE GRID ══════════════════════════════ */
.hw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:var(--max); margin:0 auto }
.hw-card { background:var(--bg2); border:1px solid var(--b); border-radius:14px; overflow:hidden; text-align:center; transition:border-color .3s, transform .3s, box-shadow .3s }
.hw-card:hover { border-color:rgba(var(--trgb),.25); transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.3) }
.hw-img-wrap { width:100%; height:210px; background:var(--bg3); display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden }
.hw-img-wrap img { max-width:100%; max-height:100%; object-fit:contain }
.hw-body { padding:24px 24px 28px }
.hw-icon { width:52px; height:52px; border-radius:12px; background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.16); display:grid; place-items:center; margin:0 auto 16px; transition:background .25s }
.hw-card:hover .hw-icon { background:rgba(var(--trgb),.16) }
.hw-icon svg { width:24px; height:24px; stroke:var(--t); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }
.hw-name { font-weight:700; font-size:1rem; color:var(--ink); margin-bottom:4px; line-height:1.3 }
.hw-size { font-size:.69rem; font-weight:700; color:var(--t); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px }
.hw-desc { font-size:.82rem; color:var(--i2); line-height:1.72 }
.hw-specs { margin-top:14px; display:flex; flex-wrap:wrap; gap:5px; justify-content:center }
.hw-spec { font-size:.63rem; font-weight:600; color:var(--i3); background:rgba(255,255,255,.04); border:1px solid var(--b); padding:3px 10px; border-radius:100px }

/* ══════════════════════════════ PACKAGES ══════════════════════════════ */
.pkg-sec { padding:96px 56px; background:var(--bg) }
.pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--max); margin:0 auto }
.pkg-card { border:1px solid var(--b); border-radius:14px; padding:36px 28px; position:relative; background:var(--bg2); transition:border-color .3s, transform .3s, box-shadow .3s }
.pkg-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.25) }
.pkg-card.featured { border-color:rgba(var(--trgb),.4); background:var(--bg3) }
.pkg-card.featured::before { content:'MOST POPULAR'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:.6rem; font-weight:700; letter-spacing:.1em; color:#fff; background:var(--t); padding:4px 14px; border-radius:100px }
.pkg-name { font-weight:800; font-size:1.2rem; color:var(--ink); margin-bottom:6px; letter-spacing:-.02em }
.pkg-desc { font-size:.82rem; color:var(--i2); line-height:1.72; margin-bottom:22px }
.pkg-features { display:flex; flex-direction:column; gap:9px; margin-bottom:24px }
.pkg-f { font-size:.8rem; color:var(--i2); display:flex; align-items:flex-start; gap:8px }
.pkg-f::before { content:'✓'; color:var(--t); font-weight:700; flex-shrink:0; margin-top:1px }
.pkg-cta { display:block; text-align:center; font-weight:700; font-size:.84rem; padding:12px 22px; border-radius:7px; text-decoration:none; transition:all .2s }
.pkg-cta-fill { background:var(--t); color:#fff }
.pkg-cta-fill:hover { background:var(--td); transform:translateY(-1px) }
.pkg-cta-outline { border:1px solid var(--b2); color:var(--i2) }
.pkg-cta-outline:hover { border-color:rgba(var(--trgb),.4); color:var(--t) }

/* ══════════════════════════════ JOURNEY DIAGRAM ══════════════════════════════ */
.journey-sec { padding:96px 56px; background:var(--bg2); position:relative; overflow:hidden; border-bottom:1px solid var(--b) }
.journey-sec::before { content:''; position:absolute; top:-150px; left:-150px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(var(--trgb),.04) 0%, transparent 70%); pointer-events:none }
.journey-wrap { display:flex; align-items:center; justify-content:center; gap:64px; margin-top:52px; flex-wrap:wrap }
.journey-track { position:relative; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:auto auto; gap:20px 12px; padding:40px 20px; flex-shrink:0; max-width:560px }
.journey-line { position:absolute; top:50%; left:24px; right:24px; height:1px; background:linear-gradient(90deg, rgba(var(--trgb),.06), rgba(var(--trgb),.18) 30%, rgba(var(--trgb),.18) 70%, rgba(var(--trgb),.06)); transform:translateY(-50%); z-index:0 }
.journey-node { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:transform .3s var(--ease) }
.journey-node:hover,.journey-node.active { transform:scale(1.08) }
.jn-dot { width:8px; height:8px; border-radius:50%; background:var(--bg3); border:2px solid var(--b2); transition:all .3s; flex-shrink:0 }
.journey-node.active .jn-dot { background:var(--t); border-color:var(--t); box-shadow:0 0 10px rgba(var(--trgb),.4) }
.jn-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:13px 10px; border-radius:10px; background:var(--bg3); border:1px solid var(--b); transition:all .25s; min-width:78px }
.journey-node.active .jn-card { border-color:rgba(var(--trgb),.3); background:rgba(var(--trgb),.06) }
.jn-ico { width:33px; height:33px; border-radius:8px; background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.14); display:grid; place-items:center }
.jn-ico svg { width:16px; height:16px; stroke:var(--t); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.jn-label { font-size:.61rem; font-weight:700; color:var(--i3); letter-spacing:.03em; white-space:nowrap; text-align:center }
.journey-node.active .jn-label,.journey-node:hover .jn-label { color:var(--ink) }
.journey-detail { max-width:280px; flex-shrink:0 }
.jd-title { font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:8px; line-height:1.3 }
.jd-desc { font-size:.86rem; color:var(--i2); line-height:1.72 }

/* ══════════════════════════════ HONEYCOMB ══════════════════════════════ */
.hive-sec { padding:96px 56px; background:var(--bg2); position:relative; overflow:hidden; border-bottom:1px solid var(--b) }
.hive-sec::before { content:''; position:absolute; bottom:-150px; right:-150px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(var(--trgb),.04) 0%, transparent 70%); pointer-events:none }
.hive-wrap { display:flex; align-items:center; justify-content:center; gap:64px; margin-top:52px; flex-wrap:wrap }
.hive-grid { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(2,1fr); gap:10px; flex-shrink:0; max-width:540px }
.hive-cell { position:relative; cursor:pointer; transition:transform .3s var(--ease) }
.hive-cell:hover,.hive-cell.active { transform:translateY(-4px) }
.hc-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:18px 10px; border-radius:12px; background:var(--bg3); border:1px solid var(--b); transition:all .3s; aspect-ratio:1; min-width:80px }
.hive-cell.active .hc-inner { border-color:rgba(var(--trgb),.35); background:rgba(var(--trgb),.06) }
.hive-cell:hover .hc-inner { border-color:rgba(var(--trgb),.25) }
.hc-inner svg { width:20px; height:20px; stroke:var(--t); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }
.hc-inner span { font-size:.61rem; font-weight:700; color:var(--i3); letter-spacing:.03em; text-align:center }
.hive-cell.active .hc-inner span,.hive-cell:hover .hc-inner span { color:var(--ink) }
.hive-hub { cursor:default }
.hive-hub:hover { transform:none }
.hive-hub .hc-inner { background:var(--bg); border-color:rgba(var(--trgb),.3) }
.hive-hub .hc-inner span { color:var(--t); font-size:.64rem; font-weight:800 }
.hive-detail { max-width:280px; flex-shrink:0 }
.hd-title { font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:8px; line-height:1.3 }
.hd-desc { font-size:.86rem; color:var(--i2); line-height:1.72 }

/* ══════════════════════════════ RADIAL DIAGRAM ══════════════════════════════ */
.radial-sec { padding:96px 56px; background:var(--bg2); position:relative; overflow:hidden; border-bottom:1px solid var(--b) }
.radial-sec::before { content:''; position:absolute; top:-150px; right:-150px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(var(--trgb),.05) 0%, transparent 70%); pointer-events:none }
.radial-wrap { display:flex; align-items:center; justify-content:center; gap:64px; margin-top:52px; flex-wrap:wrap }
.radial-ring { position:relative; width:520px; height:520px; flex-shrink:0 }
.radial-hub { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:88px; height:88px; border-radius:50%; background:var(--bg); border:1.5px solid rgba(var(--trgb),.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; z-index:5; box-shadow:0 8px 32px rgba(0,0,0,.3) }
.radial-hub svg { stroke:var(--t) }
.radial-hub span { font-size:.62rem; font-weight:700; color:var(--t); letter-spacing:.04em }
.radial-node { position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; transition:transform .3s var(--ease); transform:translate(-50%,-50%) }
.radial-node:hover,.radial-node.active { transform:translate(-50%,-50%) scale(1.12) }
.radial-node.active .rn-ico { background:rgba(var(--trgb),.12); border-color:var(--t) }
.rn-ico { width:44px; height:44px; border-radius:11px; background:var(--bg3); border:1px solid var(--b); display:grid; place-items:center; transition:all .25s }
.rn-ico svg { width:19px; height:19px; stroke:var(--t); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.radial-node:hover .rn-ico { background:rgba(var(--trgb),.1); border-color:rgba(var(--trgb),.3) }
.rn-label { font-size:.6rem; font-weight:700; color:var(--i3); letter-spacing:.03em; white-space:nowrap }
.radial-node:hover .rn-label,.radial-node.active .rn-label { color:var(--ink) }
.radial-node[data-pos="0"]{top:6%;left:50%}.radial-node[data-pos="1"]{top:11%;left:72%}.radial-node[data-pos="2"]{top:27%;left:86%}.radial-node[data-pos="3"]{top:50%;left:94%}.radial-node[data-pos="4"]{top:73%;left:86%}.radial-node[data-pos="5"]{top:89%;left:72%}.radial-node[data-pos="6"]{top:94%;left:50%}.radial-node[data-pos="7"]{top:89%;left:28%}.radial-node[data-pos="8"]{top:73%;left:14%}.radial-node[data-pos="9"]{top:50%;left:6%}.radial-node[data-pos="10"]{top:27%;left:14%}.radial-node[data-pos="11"]{top:11%;left:28%}
.radial-ring::before { content:''; position:absolute; top:50%; left:50%; width:72%; height:72%; transform:translate(-50%,-50%); border-radius:50%; border:1px dashed rgba(var(--trgb),.14); pointer-events:none }
.radial-ring::after { content:''; position:absolute; top:50%; left:50%; width:42%; height:42%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(var(--trgb),.08); pointer-events:none }
.radial-detail { max-width:280px; flex-shrink:0 }
.rd-title { font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:8px; line-height:1.3 }
.rd-desc { font-size:.86rem; color:var(--i2); line-height:1.72 }

/* ══════════════════════════════ PORTAL / SCREENSHOT SECTION ══════════════════════════════ */
.portal-sec { padding:96px 56px; background:var(--bg3); border-top:1px solid var(--b) }
.portal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:var(--max); margin:0 auto }
.portal-card { border-radius:12px; overflow:hidden; border:1px solid var(--b); background:var(--bg2); transition:border-color .3s, transform .3s, box-shadow .3s; isolation:isolate }
.portal-card:hover { border-color:rgba(var(--trgb),.25); transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,0,0,.3) }
.portal-card img { width:100%; height:auto; max-height:280px; object-fit:contain; display:block }
.portal-card-label { padding:12px 18px; background:var(--bg2); font-size:.79rem; font-weight:600; color:var(--i2); border-top:1px solid var(--b) }

/* ══════════════════════════════ STATS ROW ══════════════════════════════ */
.stats-row { padding:56px; background:var(--bg); border-top:1px solid var(--b); border-bottom:1px solid var(--b) }
.stats-inner { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--b) }
.stat-item { background:var(--bg); padding:30px 24px; text-align:center }
.stat-n { font-size:2.6rem; font-weight:800; color:var(--t); letter-spacing:-.04em; line-height:1 }
.stat-l { font-size:.72rem; font-weight:600; color:var(--i3); margin-top:6px; letter-spacing:.05em; text-transform:uppercase }

/* ══════════════════════════════ INDUSTRIES SECTION ══════════════════════════════ */
.ind-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--b); border-radius:14px; overflow:hidden; border:1px solid var(--b); max-width:var(--max); margin:0 auto }
.ind-card { background:var(--bg2); padding:40px 32px; transition:background .3s; text-decoration:none; display:block; position:relative; overflow:hidden }
.ind-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--t); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.76,0,.24,1) }
.ind-card:hover::before { transform:scaleX(1) }
.ind-card:hover { background:var(--bg3) }
.ind-ico { width:46px; height:46px; border-radius:11px; background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.16); display:grid; place-items:center; margin-bottom:18px }
.ind-ico svg { width:22px; height:22px; stroke:var(--t); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.ind-name { font-weight:800; font-size:1.1rem; color:var(--ink); margin-bottom:8px; letter-spacing:-.02em }
.ind-desc { font-size:.84rem; color:var(--i2); line-height:1.72; margin-bottom:18px }
.ind-tags { display:flex; flex-wrap:wrap; gap:5px }
.ind-tag { font-size:.63rem; font-weight:700; color:var(--t); background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.15); padding:3px 10px; border-radius:100px; letter-spacing:.04em }

/* ══════════════════════════════ PROFESSIONAL SERVICES ══════════════════════════════ */
.ps-sec { padding:96px 56px; background:var(--bg2); border-top:1px solid var(--b) }
.ps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:var(--max); margin:0 auto }
.ps-card { background:var(--bg3); border:1px solid var(--b); border-radius:12px; padding:28px 24px; transition:border-color .3s, transform .3s }
.ps-card:hover { border-color:rgba(var(--trgb),.25); transform:translateY(-3px) }
.ps-ico { width:40px; height:40px; border-radius:10px; background:rgba(var(--trgb),.08); border:1px solid rgba(var(--trgb),.15); display:grid; place-items:center; margin-bottom:14px }
.ps-ico svg { width:18px; height:18px; stroke:var(--t); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.ps-title { font-weight:700; font-size:.92rem; color:var(--ink); margin-bottom:6px }
.ps-desc { font-size:.8rem; color:var(--i2); line-height:1.7 }

/* ══════════════════════════════ SPLIT CONTENT ══════════════════════════════ */
.split-sec { padding:96px 56px; background:var(--bg) }
.split-inner { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; max-width:var(--max); margin:0 auto }
.split-inner.flip { direction:rtl }
.split-inner.flip > * { direction:ltr }
.split-img { border-radius:16px; background:var(--bg3); border:1px solid var(--b); padding:32px; display:flex; align-items:center; justify-content:center }
.split-img img { width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 24px 64px rgba(0,0,0,.55) }
.split-list { display:flex; flex-direction:column; gap:11px; margin-bottom:28px }
.sl-item { display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--i2); line-height:1.7 }
.sl-item::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--t); flex-shrink:0; margin-top:7px }

/* ══════════════════════════════ INDUSTRY HARDWARE + SOFTWARE STACK ══════════════════════════════ */
.ind-hw-stack { max-width:var(--max); margin:52px auto 0; display:grid; grid-template-columns:1fr 1px 1fr; gap:0 40px; padding:28px 32px; background:rgba(255,255,255,.022); border:1px solid var(--b); border-radius:14px; align-items:start }
.ihs-divider { background:var(--b2); width:1px; align-self:stretch }
.ihs-col { display:flex; flex-direction:column }
.ihs-label { font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--i3); margin-bottom:13px; display:flex; align-items:center; gap:7px }
.ihs-label svg { width:13px; height:13px; stroke:var(--i4); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.ihs-items { display:flex; flex-wrap:wrap; gap:7px }
.ihs-hw { display:inline-flex; align-items:center; gap:5px; font-size:.77rem; font-weight:500; padding:5px 11px; border-radius:6px; border:1px solid var(--b); background:rgba(255,255,255,.025); color:var(--i2); text-decoration:none; transition:border-color .2s, color .2s, background .2s; white-space:nowrap }
.ihs-hw:hover { border-color:rgba(var(--trgb),.3); color:var(--ink); background:rgba(var(--trgb),.05) }
.ihs-sw { display:inline-flex; align-items:center; font-size:.77rem; font-weight:600; padding:5px 12px; border-radius:6px; border:1px solid rgba(var(--sc),1); background:rgba(var(--sc),.08); color:rgb(var(--sc)); text-decoration:none; transition:background .2s, border-color .2s; white-space:nowrap }
.ihs-sw:hover { background:rgba(var(--sc),.18) }

/* ══════════════════════════════ RESPONSIVE ══════════════════════════════ */
@media(max-width:1100px){
  nav { padding:0 28px }
  .hero { grid-template-columns:1fr; min-height:auto }
  .hero::after { display:none }
  .hero-r { padding:40px 28px 80px; border-left:none; border-top:1px solid var(--b) }
  .hero-l { padding:110px 28px 32px }
  .hero-mobile-img { display:block; margin-top:32px; border-radius:12px; overflow:hidden; opacity:0; animation:up .8s .55s ease forwards }
  .hero-mobile-img img { width:100%; height:auto; display:block }
  .platform-list { max-width:100% }
  .h-stats { position:static }
  .radial-wrap,.hive-wrap,.journey-wrap { flex-direction:column; gap:40px }
  .radial-ring { width:360px; height:360px }
  .radial-hub { width:70px; height:70px }
  .rn-ico { width:36px; height:36px }
  .rn-label,.jn-label,.hc-inner span { font-size:.58rem }
  .radial-detail,.journey-detail,.hive-detail { text-align:center; max-width:400px }
  .why-inner { grid-template-columns:1fr; gap:48px }
  .pg,.ds-inner { grid-template-columns:1fr }
  .pc { border-right:none; border-bottom:1px solid var(--b) }
  .pc:last-child { border-bottom:none }
  .split-inner,.split-inner.flip { grid-template-columns:1fr; direction:ltr; gap:40px }
  .ind-hw-stack { grid-template-columns:1fr; }
  .ihs-divider { display:none }
  .ihs-col + .ihs-col { margin-top:20px; padding-top:20px; border-top:1px solid var(--b) }
  .ind-grid,.feat-grid { grid-template-columns:1fr 1fr }
  .ps-grid { grid-template-columns:1fr 1fr }
  .cta-in { padding:48px 36px; grid-template-columns:1fr }
  .plat-sec,.why-sec,.cta-sec,.dark-section,.feat-sec,.use-sec,.proj-sec,.pkg-sec,.int-strip,.journey-sec,.hive-sec,.radial-sec,.portal-sec,.stats-row,.ps-sec,.split-sec,.plat-hero,.contact-sec,footer { padding-left:28px!important; padding-right:28px!important }
  .contact-grid { grid-template-columns:1fr; gap:40px }
  .trust-bar { padding:28px }
}
@media(max-width:768px){
  .feat-grid,.pg,.use-grid,.pkg-grid,.ind-grid,.ps-grid { grid-template-columns:1fr }
  .proj-grid { grid-template-columns:1fr 1fr }
  .hw-grid { grid-template-columns:1fr 1fr }
  .h-stats { grid-template-columns:1fr 1fr }
  .hst:nth-child(2) { border-right:none }
  .stats-inner { grid-template-columns:1fr 1fr }
  .portal-grid { grid-template-columns:1fr }
  .ds-right { grid-template-columns:1fr }
  .trust-bar-inner { flex-wrap:wrap; gap:16px }
  .trust-logos { justify-content:flex-start }
  .cta-btns { flex-direction:row; flex-wrap:wrap }
  .cf-row { grid-template-columns:1fr }
  .ham { display:flex; flex-direction:column; justify-content:center }
  .nl,.nr { display:none }
  h1.hero-h { font-size:2.3rem }
}
@media(max-width:480px){
  .proj-grid,.hw-grid,.stats-inner { grid-template-columns:1fr }
  h1.hero-h { font-size:2rem }
  .hst { padding:16px 18px }
  .cta-in { padding:36px 24px }
}

/* ══════════════════════════════ MICRO-INTERACTIONS ══════════════════════════════ */

/* ── Button press states ─────────────────────────────────────────
   Nothing makes a UI feel more alive than buttons that physically
   respond to press. Emil: "scale(0.97) on :active gives instant
   feedback — the interface is listening."
   ────────────────────────────────────────────────────────────── */
.b-fill   { transition: background .2s ease, transform .15s var(--ease), box-shadow .2s ease }
.b-fill:active { transform: scale(0.97) }

.nbtn { transition: background .2s ease, transform .15s var(--ease), box-shadow .2s ease }
.nbtn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(var(--trgb),.15) }

.cb1 { transition: background .18s ease, transform .15s var(--ease), box-shadow .2s ease }
.cb1:active { transform: scale(0.97) }
.cb2 { transition: color .18s ease, border-color .18s ease, transform .15s var(--ease) }
.cb2:active { transform: scale(0.97) }

.cf-submit { transition: background .2s ease, transform .15s var(--ease), box-shadow .2s ease }
.cf-submit:active { transform: scale(0.97); box-shadow: none }

.pkg-cta-fill { transition: background .18s ease, transform .15s var(--ease) }
.pkg-cta-fill:active { transform: scale(0.97) }

/* ── Platform list — add hover lift ──────────────────────────── */
.pl-item { transition: box-shadow .25s var(--ease), border-color .22s ease, background .22s ease, transform .22s var(--ease) }
.pl-item:hover { transform: translateY(-2px) }

/* ── Solution cards — lift + shadow ─────────────────────────── */
.pc { transition: background .25s ease, transform .22s var(--ease), box-shadow .25s ease }
.pc:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.22) }

/* ── Proof-point cards — lift + icon twist ───────────────────── */
.dsp { transition: background .25s ease, transform .22s var(--ease) }
.dsp:hover { transform: translateY(-2px) }
.dsp-ico { transition: background .25s ease, transform .2s var(--ease) }
.dsp:hover .dsp-ico { transform: scale(1.12) rotate(-5deg) }

/* ── Feature cards ───────────────────────────────────────────── */
.feat-card { transition: background .25s ease, transform .22s var(--ease) }
.feat-card:hover { transform: translateY(-2px) }
.fc-ico { transition: background .25s ease, transform .2s var(--ease) }
.feat-card:hover .fc-ico { transform: scale(1.1) }

/* ── Industry cards — icon scale ─────────────────────────────── */
.ind-ico { transition: background .25s ease, transform .2s var(--ease) }
.ind-card:hover .ind-ico { transform: scale(1.1) }

/* ── Professional services — icon scale ─────────────────────── */
.ps-card { transition: border-color .25s ease, transform .22s var(--ease), box-shadow .25s ease }
.ps-ico { transition: background .25s ease, transform .2s var(--ease) }
.ps-card:hover .ps-ico { transform: scale(1.1) }

/* ── Integration strip icons ─────────────────────────────────── */
.int-item .ii-ico { transition: border-color .22s ease, background .22s ease, transform .2s var(--ease) }
.int-item:hover .ii-ico { transform: translateY(-3px) scale(1.06) }

/* ── Trust bar badges ────────────────────────────────────────── */
.tb-badge { transition: border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease }
.tb-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.22) }

/* ── Stats bar — subtle accent on hover ─────────────────────── */
.hst { transition: background .2s ease; cursor: default }
.hst:hover { background: rgba(var(--trgb),.04) }
.hst-n { transition: color .2s ease }
.hst:hover .hst-n { color: var(--ink) }

/* ── Why numbers — border glow on hover ─────────────────────── */
.wn { transition: border-color .25s ease }
.wn:hover { border-color: rgba(var(--trgb),.55) }
.wn-v { transition: color .25s ease }
.wn:hover .wn-v { color: var(--ink) }

/* ── Why items — fix transition:all on arrow ────────────────── */
.wi-arr { transition: background .22s var(--ease), border-color .22s ease, transform .22s var(--ease) }
.wi-arr svg { transition: stroke .22s ease }

/* ── Footer nav links — nudge on hover ──────────────────────── */
.fc-ul a { transition: color .18s ease, padding-left .18s var(--ease) }
.fc-ul a:hover { padding-left: 4px }

/* ── Stat items on platform pages ───────────────────────────── */
.stat-item { transition: background .2s ease }
.stat-item:hover { background: rgba(var(--trgb),.04) }
.stat-n { transition: color .2s ease }
.stat-item:hover .stat-n { color: var(--ink) }

/* ── Hardware carousel (hero-r replacement) ─────────────────── */
.hw-carousel { position:relative; width:100%; max-width:480px; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid var(--b) }
.hw-slide { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; display:flex; align-items:center; justify-content:center }
.hw-slide.active { opacity:1 }
.hw-slide img { width:100%; height:100%; object-fit:contain; padding:16px }
.hw-label { position:absolute; bottom:0; left:0; right:0; padding:10px 16px; background:linear-gradient(transparent,rgba(0,0,0,.6)); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.7); text-align:center }
.hw-dots { display:none }
.hw-dot { display:none }
@media(max-width:860px){.hw-carousel{max-width:100%}}
.hero-static-img { width:100%; max-width:480px }
.hero-static-img img { width:100%; height:auto; display:block; border-radius:16px }
@media(max-width:860px){.hero-static-img{max-width:100%}}

/* ── Reduced motion — keep only opacity/color transitions ────── */
@media (prefers-reduced-motion: reduce) {
  .pl-item, .pc, .dsp, .feat-card, .ind-card, .ps-card,
  .int-item .ii-ico, .tb-badge, .use-card, .proj-card,
  .portal-card, .hw-card, .pkg-card { transform: none !important; transition: background .2s ease, border-color .2s ease !important }
  .dsp-ico, .fc-ico, .ind-ico, .ps-ico { transform: none !important }
  .b-fill:active, .nbtn:active, .cb1:active, .cb2:active,
  .cf-submit:active, .pkg-cta-fill:active { transform: none !important }
}