/* ---------- Page shell ---------- */
.siot-page{
  background:#04060c;
  background-image:
    radial-gradient(1100px 520px at 85% -5%, rgba(47,123,255,.14), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(18,64,150,.18), transparent 55%);
  color:#c9d6ec;
  overflow-x:hidden;
}
.siot-page ::selection{background:#2f7bff;color:#ffffff}
.siot-para{
  font-size: 1.2rem;
  font-weight: 700;
}
/* Uniform section rhythm (30px on all devices, per spec) */
.siot-sec{padding-top:30px;padding-bottom:30px;position:relative}

/* ---------- Shared typography ---------- */
.siot-page h1,
.siot-page h2,
.siot-page h3{color:#ffffff;}
.siot-page h2{font-size:clamp(24px,3.2vw,38px);font-weight:700;line-height:1.2;letter-spacing:-.4px;margin-bottom:14px}
.siot-page h3{font-size:18px;font-weight:600;line-height:1.35;margin-bottom:10px}
.siot-page p{color:#aebcd6;line-height:1.75;margin-bottom:12px}
.siot-sec-head{max-width:900px;margin:0 auto 26px;text-align:center}
.siot-sec-head .siot-sec-lead{font-size:16.5px;color:#9fb2d2}
.siot-grad-text{
  background:linear-gradient(92deg,#6ea8ff 0%,#2f7bff 55%,#9cc6ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.siot-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  border:1px solid rgba(110,168,255,.35);
  background:rgba(47,123,255,.10);
  color:#8fc0ff;font-size:12.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
  margin-bottom:18px;
}
.siot-center{text-align:center;margin-top:24px}

/* ---------- Buttons ---------- */
.siot-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:12px;
  font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;
  will-change:transform;
}
.siot-btn svg{transition:transform .25s ease;flex:0 0 auto}
.siot-btn:hover svg{transform:translateX(4px)}
.siot-btn:focus-visible{outline:2px solid #8fc0ff;outline-offset:3px}
.siot-btn-primary{
  color:#ffffff;
  background:linear-gradient(120deg,#2f7bff,#0f4bbf 85%);
  box-shadow:0 10px 26px rgba(24,84,214,.38),inset 0 1px 0 rgba(255,255,255,.22);
}
.siot-btn-primary:hover{color:#ffffff;text-decoration:none;transform:translateY(-3px);box-shadow:0 16px 34px rgba(24,84,214,.5)}
.siot-btn-ghost{color:#dbe7ff;background:rgba(255,255,255,.05);border-color:rgba(158,192,255,.28)}
.siot-btn-ghost:hover{color:#ffffff;text-decoration:none;transform:translateY(-3px);background:rgba(47,123,255,.16);border-color:#2f7bff}
.siot-btn-line{color:#8fc0ff;background:transparent;border-color:rgba(110,168,255,.45);padding:11px 22px}
.siot-btn-line:hover{color:#ffffff;text-decoration:none;background:#2f7bff;border-color:#2f7bff;transform:translateY(-2px)}
.siot-btn-white{color:#06316e;background:#ffffff}
.siot-btn-white:hover{color:#041d46;text-decoration:none;transform:translateY(-3px);box-shadow:0 14px 30px rgba(2,10,30,.45)}
.siot-btn-outline-white{color:#ffffff;background:transparent;border-color:rgba(255,255,255,.55)}
.siot-btn-outline-white:hover{color:#ffffff;text-decoration:none;background:rgba(255,255,255,.14);transform:translateY(-3px)}

/* ---------- Scroll reveal ---------- */
.siot-page [data-siot-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.siot-page [data-siot-reveal].siot-shown{opacity:1;transform:none}
.siot-col{margin-bottom:22px;display:flex}
.siot-col > *{width:100%}

/* ---------- Custom scrollbars (sliders + scroll panes) ---------- */
.siot-prob-slider,
.siot-arch-scroll,
.siot-sec-scroll,
.siot-svc-nav{scrollbar-width:thin;scrollbar-color:#2f7bff rgba(18,34,66,.6)}
.siot-prob-slider::-webkit-scrollbar{height:8px}
.siot-arch-scroll::-webkit-scrollbar,
.siot-sec-scroll::-webkit-scrollbar{width:8px}
.siot-svc-nav::-webkit-scrollbar{height:6px}
.siot-prob-slider::-webkit-scrollbar-track,
.siot-arch-scroll::-webkit-scrollbar-track,
.siot-sec-scroll::-webkit-scrollbar-track,
.siot-svc-nav::-webkit-scrollbar-track{background:rgba(18,34,66,.55);border-radius:99px}
.siot-prob-slider::-webkit-scrollbar-thumb,
.siot-arch-scroll::-webkit-scrollbar-thumb,
.siot-sec-scroll::-webkit-scrollbar-thumb,
.siot-svc-nav::-webkit-scrollbar-thumb{
  border-radius:99px;
  background:linear-gradient(120deg,#6ea8ff,#2f7bff 60%,#0f4bbf);
  box-shadow:0 0 8px rgba(47,123,255,.7);
}
.siot-prob-slider::-webkit-scrollbar-thumb:hover,
.siot-arch-scroll::-webkit-scrollbar-thumb:hover,
.siot-sec-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(120deg,#9cc6ff,#2f7bff)}

/* ====================================================================
   1. HERO
==================================================================== */
.siot-hero{padding:46px 0 30px!important;position:relative;overflow:hidden; }
.siot-hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 380px at 78% 30%, rgba(47,123,255,.20), transparent 65%),
    radial-gradient(420px 300px at 12% 78%, rgba(15,75,191,.22), transparent 62%);
}
.siot-hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(110,168,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,168,255,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image:radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 100%);
}
.siot-h1{font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1.12;letter-spacing:-1px;margin-bottom:18px; margin-top: 100px!important;}
.siot-hero-lead{font-size:17px;max-width:560px}
.siot-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* Entrance: left content slides in from off-screen left */
.siot-hero-left{opacity:0;transform:translateX(-70px);transition:opacity 1s ease-out,transform 1s ease-out}
/* Entrance: right art slides in from off-screen right, then floats */
.siot-hero-right{opacity:0;transform:translateX(90px);transition:opacity 1.1s ease-out .15s,transform 1.1s ease-out .15s}
.siot-hero.siot-in .siot-hero-left,
.siot-hero.siot-in .siot-hero-right{opacity:1;transform:translateX(0)}
.siot-hero.siot-in .siot-hero-art{animation:siotFloat 6s ease-in-out 1.3s infinite}
@keyframes siotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.siot-hero-art{width:100%;max-width:600px;height:auto;display:block;margin:10px auto 0;filter:drop-shadow(0 24px 60px rgba(20,80,210,.35))}

/* Hero SVG micro-animations */
.siot-flow{stroke-dasharray:5 7;animation:siotDash 2.6s linear infinite}
@keyframes siotDash{to{stroke-dashoffset:-48}}
.siot-pulse-ring{transform-origin:center;transform-box:fill-box;animation:siotPulse 2.6s ease-out infinite}
.siot-d2{animation-delay:.6s}
.siot-d3{animation-delay:1.1s}
@keyframes siotPulse{0%{opacity:.85;transform:scale(.72)}100%{opacity:0;transform:scale(1.45)}}
.siot-blink{animation:siotBlink 1.8s ease-in-out infinite}
@keyframes siotBlink{0%,100%{opacity:1}50%{opacity:.25}}
.siot-bar{transform-origin:center bottom;transform-box:fill-box;animation:siotBar 2.2s ease-in-out infinite}
@keyframes siotBar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.siot-gear-spin{transform-origin:center;transform-box:fill-box;animation:siotSpin 9s linear infinite}
@keyframes siotSpin{to{transform:rotate(360deg)}}

/* ====================================================================
   2. TRUST BAR
==================================================================== */
.siot-trust-bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 22px;
  padding:18px 26px;border-radius:16px;
  border:1px solid rgba(110,168,255,.22);
  background:linear-gradient(180deg,rgba(20,42,86,.45),rgba(8,16,34,.65));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.siot-trust-item{display:flex;align-items:center;gap:10px;color:#d6e3f9;font-size:14px;font-weight:500}
.siot-trust-item svg{color:#5fa0ff;flex:0 0 auto}

/* ====================================================================
   Cards (shared glass card)
==================================================================== */
.siot-card{
  position:relative;height:100%;
  padding:26px 24px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(126,168,236,.16);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.siot-card:hover{transform:translateY(-6px);border-color:rgba(110,168,255,.5);box-shadow:0 20px 44px rgba(3,10,28,.6)}
.siot-card-glow::before{
  content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(110,168,255,.55),transparent 38%,transparent 70%,rgba(47,123,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;
}
.siot-card-glow:hover::before{opacity:1}
.siot-ico{
  width:52px;height:52px;border-radius:14px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;color:#8fc0ff;
  background:linear-gradient(150deg,rgba(47,123,255,.24),rgba(15,60,150,.14));
  border:1px solid rgba(110,168,255,.3);
}
.siot-card p:last-child{margin-bottom:0}

/* ====================================================================
   4. PROBLEMS — draggable slider (3 cards in view on desktop)
==================================================================== */
.siot-problems{
  background:radial-gradient(700px 340px at 50% 0%, rgba(15,60,150,.16), transparent 70%);
}
.siot-prob-sliderwrap{position:relative;padding:0 54px}
.siot-prob-slider{
  display:flex;gap:18px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:6px 4px 16px;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  -webkit-user-select:none;user-select:none;
}
.siot-prob-slider:focus-visible{outline:2px solid #8fc0ff;outline-offset:4px;border-radius:12px}
.siot-prob-slider.siot-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.siot-prob-slider.siot-dragging .siot-prob{pointer-events:none}
.siot-prob-slide{
  flex:0 0 calc((100% - 36px) / 3);
  scroll-snap-align:start;
}
.siot-slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#dbe7ff;cursor:pointer;
  background:rgba(10,22,48,.92);border:1px solid rgba(110,168,255,.45);
  box-shadow:0 10px 26px rgba(2,8,24,.6);
  transition:background .25s ease,transform .25s ease,color .25s ease,opacity .25s ease;
}
.siot-slider-btn:hover{background:#2f7bff;color:#ffffff;transform:translateY(-50%) scale(1.08)}
.siot-slider-btn:focus-visible{outline:2px solid #8fc0ff;outline-offset:3px}
.siot-slider-btn[disabled]{opacity:.35;cursor:default;pointer-events:none}
.siot-slider-prev{left:0}
.siot-slider-next{right:0}
.siot-slider-hint{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:2px;color:#6f8dc0;font-size:12.5px;
}
.siot-slider-hint svg{color:#5fa0ff}

.siot-prob{
  height:100%;padding:22px 20px;border-radius:16px;
  background:rgba(10,18,36,.62);
  border:1px solid rgba(126,168,236,.14);
  border-left:3px solid rgba(47,123,255,.6);
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.siot-prob:hover{transform:translateY(-5px);border-left-color:#6ea8ff;background:rgba(16,28,54,.75)}
.siot-prob-ico{
  width:44px;height:44px;border-radius:12px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;color:#8fc0ff;
  background:rgba(47,123,255,.14);border:1px solid rgba(110,168,255,.26);
}
.siot-prob h3{font-size:16.5px}
.siot-prob p{font-size:14.5px;margin-bottom:0}
.siot-prob-close{text-align:center;max-width:760px;margin:22px auto 0}
.siot-prob-close p{font-size:17px;color:#dbe7ff;font-weight:500;margin-bottom:18px}

/* ====================================================================
   5. SOLUTIONS TABLE
==================================================================== */
.siot-table-wrap{
  border-radius:18px;overflow:hidden;overflow-x:auto;
  border:1px solid rgba(110,168,255,.24);
  background:rgba(8,15,32,.7);
  -webkit-overflow-scrolling:touch;
}
.siot-table{width:100%;min-width:860px;border-collapse:collapse}
.siot-table thead th{
  background:linear-gradient(120deg,#123468,#0a2350);
  color:#ffffff;font-size:14px;font-weight:700;letter-spacing:.4px;text-align:left;
  padding:16px 18px;border-bottom:2px solid #2f7bff;white-space:nowrap;
}
.siot-table tbody td{
  padding:16px 18px;font-size:14px;line-height:1.65;color:#b7c6e2;vertical-align:top;
  border-bottom:1px solid rgba(126,168,236,.12);
}
.siot-table tbody tr{transition:background .25s ease}
.siot-table tbody tr:hover{background:rgba(47,123,255,.09)}
.siot-table tbody tr:last-child td{border-bottom:0}
.siot-table tbody td:first-child{color:#ffffff;font-weight:600}
.siot-table tbody td:last-child{color:#9cc6ff}
.siot-solve-note{text-align:center;max-width:820px;margin:20px auto 0;font-size:15.5px;color:#9fb2d2;font-style:italic}

/* ====================================================================
   6. SERVICES (vertical tabs)
==================================================================== */
.siot-svc-layout{display:flex;gap:26px;align-items:flex-start}
.siot-svc-nav{
  flex:0 0 300px;position:sticky;top:96px;
  display:flex;flex-direction:column;gap:6px;
  padding:12px;border-radius:18px;
  background:rgba(9,16,34,.72);border:1px solid rgba(110,168,255,.2);
}
.siot-svc-tab{
  text-align:left;padding:12px 16px;border-radius:12px;
  background:transparent;border:1px solid transparent;color:#aebcd6;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.siot-svc-tab:hover{color:#ffffff;background:rgba(47,123,255,.12);transform:translateX(4px)}
.siot-svc-tab:focus-visible{outline:2px solid #8fc0ff;outline-offset:2px}
.siot-svc-tab.siot-active{
  color:#ffffff;background:linear-gradient(120deg,rgba(47,123,255,.32),rgba(15,60,150,.22));
  border-color:rgba(110,168,255,.5);
}
.siot-svc-panels{flex:1 1 auto;min-width:0}
.siot-svc-panel{
  display:none;
  padding:30px 30px 26px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(110,168,255,.24);
  box-shadow:0 22px 50px rgba(2,8,24,.5);
}
.siot-svc-panel.siot-active{display:block;animation:siotFade .45s ease}
@keyframes siotFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.siot-svc-panel h3{font-size:22px;margin-bottom:14px}
.siot-svc-block{
  margin:14px 0;padding:16px 18px;border-radius:14px;
  background:rgba(10,20,42,.55);border:1px solid rgba(126,168,236,.14);
}
.siot-svc-block p{margin-bottom:0;font-size:14.5px}
.siot-svc-label{
  display:inline-block;margin-bottom:8px;padding:4px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:#8fc0ff;background:rgba(47,123,255,.14);border:1px solid rgba(110,168,255,.3);
}
.siot-svc-panel .siot-btn{margin-top:8px}

/* ====================================================================
   7. INDUSTRIES — 5 cards per row (2 rows of 10)
==================================================================== */
.siot-ind-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.siot-ind{
  height:100%;text-align:center;padding:22px 14px;border-radius:16px;
  background:rgba(10,18,36,.6);border:1px solid rgba(126,168,236,.14);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.siot-ind:hover{transform:translateY(-6px);border-color:#2f7bff;box-shadow:0 16px 36px rgba(3,10,28,.55)}
.siot-ind-ico{
  width:56px;height:56px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#8fc0ff;
  background:radial-gradient(circle at 35% 30%,rgba(110,168,255,.32),rgba(15,60,150,.12));
  border:1px solid rgba(110,168,255,.34);
  transition:transform .3s ease;
}
.siot-ind:hover .siot-ind-ico{transform:scale(1.08)}
.siot-ind h3{font-size:15.5px;margin-bottom:6px}
.siot-ind p{font-size:12.8px;margin-bottom:0;color:#93a6c6}

/* ====================================================================
   8. USE CASES
==================================================================== */
.siot-uc{
  height:100%;padding:22px 20px;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid rgba(126,168,236,.15);
  transition:transform .3s ease,border-color .3s ease;
}
.siot-uc::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#2f7bff,#8fc0ff);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.siot-uc:hover{transform:translateY(-5px);border-color:rgba(110,168,255,.45)}
.siot-uc:hover::after{transform:scaleX(1)}
.siot-uc-ico{
  width:44px;height:44px;border-radius:12px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;color:#8fc0ff;
  background:rgba(47,123,255,.14);border:1px solid rgba(110,168,255,.26);
}
.siot-uc h3{font-size:16.5px}
.siot-uc p{font-size:14px;margin-bottom:0}

/* ====================================================================
   9. TECH STACK
==================================================================== */
.siot-tech{background:radial-gradient(760px 380px at 50% 100%, rgba(15,60,150,.14), transparent 70%)}
.siot-tech-card{
  height:100%;padding:22px;border-radius:16px;
  background:rgba(9,16,34,.66);border:1px solid rgba(126,168,236,.16);
  transition:transform .3s ease,border-color .3s ease;
}
.siot-tech-card:hover{transform:translateY(-5px);border-color:rgba(110,168,255,.5)}
.siot-tech-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.siot-tech-head h3{margin:0;font-size:17px}
.siot-tech-ico{
  width:40px;height:40px;border-radius:10px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#8fc0ff;
  background:rgba(47,123,255,.16);border:1px solid rgba(110,168,255,.3);
}
.siot-tech-list{margin:0;padding:0;list-style:none}
.siot-tech-list li{
  position:relative;padding:6px 0 6px 20px;font-size:14px;color:#aebcd6;line-height:1.6;
}
.siot-tech-list li::before{
  content:"";position:absolute;left:2px;top:14px;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,#6ea8ff,#2f7bff);transform:rotate(45deg);
}
.siot-tech-card p{font-size:14px}
.siot-tech-note{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(126,168,236,.25);font-size:13px;color:#8fa3c8;margin-bottom:0}
.siot-tech-cta{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;
  background:linear-gradient(150deg,rgba(47,123,255,.2),rgba(9,16,34,.7));
  border-color:rgba(110,168,255,.4);
}
.siot-tech-cta p{color:#dbe7ff;font-size:15px}

/* ====================================================================
   10. PROCESS TIMELINE
==================================================================== */
.siot-timeline{position:relative;max-width:860px;margin:0 auto;padding-left:8px}
.siot-timeline::before{
  content:"";position:absolute;left:31px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,#2f7bff 0%,rgba(47,123,255,.15) 100%);
}
.siot-tl-item{position:relative;display:flex;gap:22px;padding:0 0 26px 0}
.siot-tl-item:last-child{padding-bottom:0}
.siot-tl-num{
  position:relative;z-index:1;flex:0 0 48px;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#ffffff;font-weight:800;font-size:16px;
  background:linear-gradient(140deg,#2f7bff,#0f4bbf);
  box-shadow:0 0 0 5px rgba(47,123,255,.16),0 8px 20px rgba(20,80,210,.4);
}
.siot-tl-body{
  flex:1;padding:18px 22px;border-radius:16px;
  background:rgba(10,18,36,.6);border:1px solid rgba(126,168,236,.15);
  transition:border-color .3s ease,transform .3s ease;
}
.siot-tl-body:hover{border-color:rgba(110,168,255,.45);transform:translateX(4px)}
.siot-tl-body h3{font-size:17px;margin-bottom:6px;color:#dbe7ff}
.siot-tl-body p{margin-bottom:0;font-size:14.5px}

/* ====================================================================
   11. ARCHITECTURE — equal columns, scrollable right pane
==================================================================== */
.siot-arch-diagram{
  height:auto;margin:0;display:flex;gap:16px;
  padding:24px 20px;border-radius:20px;
  background:rgba(8,15,32,.72);border:1px solid rgba(110,168,255,.24);
}
.siot-arch-stack{flex:1;display:flex;flex-direction:column;gap:10px}
.siot-arch-band{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:12px;position:relative;
  color:#dbe7ff;font-size:14.5px;font-weight:600;
  background:linear-gradient(120deg,rgba(47,123,255,.16),rgba(12,28,60,.5));
  border:1px solid rgba(110,168,255,.28);
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.siot-arch-band svg{color:#8fc0ff;flex:0 0 auto}
.siot-arch-band:hover{transform:translateX(6px);border-color:#6ea8ff;background:linear-gradient(120deg,rgba(47,123,255,.3),rgba(12,28,60,.6))}
.siot-arch-band:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-10px;width:2px;height:10px;
  background:rgba(110,168,255,.5);
}
.siot-arch-rails{display:flex;flex-direction:column;justify-content:space-between;padding:6px 0}
.siot-arch-rail{display:flex;flex-direction:column;align-items:center;gap:8px;height:48%}
.siot-arch-rail i{flex:1;width:2px;position:relative;background:rgba(110,168,255,.3);display:block}
.siot-arch-rail i::before{
  content:"";position:absolute;left:50%;margin-left:-3px;width:6px;height:6px;border-radius:50%;
  background:#8fc0ff;animation:siotRailUp 2.4s linear infinite;
}
.siot-arch-down i::before{animation-name:siotRailDown}
@keyframes siotRailUp{0%{bottom:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{bottom:calc(100% - 6px);opacity:0}}
@keyframes siotRailDown{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 6px);opacity:0}}
.siot-arch-rail b{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#6f8dc0;white-space:nowrap;
}
.siot-arch-down b{transform:none}

/* Right pane scrolls inside a height matched to the diagram (set by JS on desktop) */
.siot-arch-scroll{
  position:relative;
  overflow-y:auto;
  padding-right:12px;
  border-radius:16px;
}
.siot-arch-copy{display:flex;flex-direction:column;gap:10px}
.siot-arch-row{
  padding:14px 18px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(126,168,236,.12);
  transition:border-color .3s ease;
}
.siot-arch-row:hover{border-color:rgba(110,168,255,.4)}
.siot-arch-row h3{display:inline;font-size:15.5px;color:#8fc0ff;margin:0 6px 0 0}
.siot-arch-row p{display:inline;font-size:14.2px;margin:0}

/* ====================================================================
   13. BENEFITS
==================================================================== */
.siot-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;
}
.siot-stat{
  text-align:center;padding:22px 14px;border-radius:16px;
  background:linear-gradient(160deg,rgba(47,123,255,.16),rgba(9,16,34,.7));
  border:1px solid rgba(110,168,255,.3);
}
.siot-stat-num{
  display:block;font-size:34px;font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(92deg,#9cc6ff,#2f7bff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.siot-stat-label{display:block;margin-top:6px;font-size:12.8px;color:#93a6c6;line-height:1.5}
.siot-benefit{
  height:100%;display:flex;gap:14px;padding:18px;border-radius:14px;
  background:rgba(10,18,36,.55);border:1px solid rgba(126,168,236,.13);
  transition:border-color .3s ease,transform .3s ease;
}
.siot-benefit:hover{border-color:rgba(110,168,255,.45);transform:translateY(-3px)}
.siot-benefit-tick{
  flex:0 0 30px;width:30px;height:30px;border-radius:9px;margin-top:2px;
  display:flex;align-items:center;justify-content:center;color:#ffffff;
  background:linear-gradient(140deg,#2f7bff,#0f4bbf);
}
.siot-benefit h3{font-size:16px;margin-bottom:5px}
.siot-benefit p{font-size:14.2px;margin-bottom:0}
.siot-benefit-roi{background:linear-gradient(140deg,rgba(47,123,255,.16),rgba(10,18,36,.6));border-color:rgba(110,168,255,.35)}

/* ====================================================================
   14. WHY SISGAIN — 9 cards (5 per row, remaining row auto-centred)
==================================================================== */
.siot-why-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:18px;
}
.siot-why-card{
  flex:0 0 calc((100% - 72px) / 5);   /* 5 cards + 4 gaps of 18px */
  padding:22px 20px;border-radius:16px;position:relative;overflow:hidden;
  background:rgba(10,18,36,.6);border:1px solid rgba(126,168,236,.14);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.siot-why-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#6ea8ff,#2f7bff);
}
.siot-why-card:hover{transform:translateY(-6px);border-color:rgba(110,168,255,.5);box-shadow:0 18px 40px rgba(3,10,28,.55)}
.siot-why-card h3{font-size:15.5px;margin-bottom:8px}
.siot-why-card p{font-size:13.6px;margin-bottom:0}

/* ====================================================================
   15. CASE STUDIES — horizontal tabs, image on top
==================================================================== */
.siot-case-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-bottom:24px;
}
.siot-case-tab{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-width:220px;padding:14px 22px;border-radius:14px;
  text-align:left;cursor:pointer;
  background:rgba(9,16,34,.7);border:1px solid rgba(126,168,236,.2);color:#aebcd6;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.siot-case-tab:hover{color:#ffffff;border-color:rgba(110,168,255,.5);transform:translateY(-3px)}
.siot-case-tab:focus-visible{outline:2px solid #8fc0ff;outline-offset:3px}
.siot-case-tab.siot-active{
  color:#ffffff;
  background:linear-gradient(120deg,rgba(47,123,255,.35),rgba(15,60,150,.25));
  border-color:#2f7bff;
  box-shadow:0 12px 30px rgba(24,84,214,.35);
}
.siot-case-tab-title{font-size:15px;font-weight:700}
.siot-case-tab-sub{font-size:12px;color:#8fa3c8;letter-spacing:.4px;text-transform:uppercase}
.siot-case-tab.siot-active .siot-case-tab-sub{color:#9cc6ff}

.siot-case-panel{
  display:none;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid rgba(110,168,255,.24);
  box-shadow:0 24px 56px rgba(2,8,24,.5);
}
.siot-case-panel.siot-active{display:block;animation:siotFade .45s ease}
.siot-case-media{position:relative;height:320px}
.siot-case-media picture,.siot-case-media img{width:100%;height:100%}
.siot-case-media img{object-fit:cover;display:block}
.siot-case-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,8,20,.1) 40%,rgba(5,10,24,.85) 100%);
}
.siot-case-tag{
  position:absolute;top:16px;left:16px;z-index:1;
  padding:7px 14px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#ffffff;
  background:rgba(15,60,160,.85);border:1px solid rgba(140,190,255,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.siot-case-body{padding:28px 30px}
.siot-case-body h3{font-size:21px;margin-bottom:16px}
.siot-case-step{margin-bottom:14px}
.siot-case-step:last-child{margin-bottom:0}
.siot-case-step span{
  display:inline-block;margin-bottom:5px;padding:3px 11px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:#8fc0ff;background:rgba(47,123,255,.13);border:1px solid rgba(110,168,255,.28);
}
.siot-case-step p{font-size:14.3px;margin-bottom:0}
.siot-case-result{
  padding:14px 16px;border-radius:14px;
  background:rgba(47,123,255,.12);border:1px solid rgba(110,168,255,.35);
}
.siot-case-result span{color:#ffffff;background:#2f7bff;border-color:#2f7bff}

/* ====================================================================
   16. ENGAGEMENT MODELS
==================================================================== */
.siot-engage-card{
  height:100%;padding:26px 24px;border-radius:18px;position:relative;overflow:hidden;
  background:rgba(9,16,34,.66);border:1px solid rgba(126,168,236,.16);
  transition:transform .3s ease,border-color .3s ease;
}
.siot-engage-card::before{
  content:"";position:absolute;top:-70px;right:-70px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,123,255,.24),transparent 70%);
  transition:transform .35s ease;
}
.siot-engage-card:hover{transform:translateY(-6px);border-color:rgba(110,168,255,.5)}
.siot-engage-card:hover::before{transform:scale(1.5)}
.siot-engage-card h3{font-size:17.5px}
.siot-engage-card p{font-size:14.3px;margin-bottom:0}

/* ====================================================================
   17. SECURITY — shield left, scrollable items right (equal height)
==================================================================== */
.siot-security{background:radial-gradient(700px 380px at 15% 50%, rgba(15,60,150,.15), transparent 70%)}
.siot-sec-grid{display:flex;gap:30px;align-items:stretch}

.siot-sec-items{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.siot-sec-item{
  padding:18px 20px;border-radius:14px;
  background:rgba(10,18,36,.6);border:1px solid rgba(126,168,236,.14);
  transition:border-color .3s ease,transform .3s ease;
}
.siot-sec-item:hover{border-color:rgba(110,168,255,.45);transform:translateY(-3px)}
.siot-sec-item h3{font-size:16px;color:#8fc0ff;margin-bottom:6px}
.siot-sec-item p{font-size:14px;margin-bottom:0}
.siot-sec-item:last-child{grid-column:1 / -1}

/* ====================================================================
   18. FAQ
==================================================================== */
.siot-faq-list{max-width:860px;margin:0 auto}
.siot-faq-item{
  margin-bottom:12px;border-radius:14px;overflow:hidden;
  background:rgba(9,16,34,.66);border:1px solid rgba(126,168,236,.16);
  transition:border-color .3s ease;
}
.siot-faq-item.siot-open{border-color:rgba(110,168,255,.5)}
.siot-faq-item h3{margin:0}
.siot-faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;text-align:left;cursor:pointer;
  background:transparent;border:0;color:#ffffff;font-size:15.5px;font-weight:600;line-height:1.4;
  transition:color .25s ease;
}
.siot-faq-q:hover{color:#8fc0ff}
.siot-faq-q:focus-visible{outline:2px solid #8fc0ff;outline-offset:-3px}
.siot-faq-x{
  position:relative;flex:0 0 26px;width:26px;height:26px;border-radius:8px;
  background:rgba(47,123,255,.16);border:1px solid rgba(110,168,255,.35);
  transition:transform .3s ease,background .3s ease;
}
.siot-faq-x::before,.siot-faq-x::after{
  content:"";position:absolute;top:50%;left:50%;background:#8fc0ff;border-radius:2px;
  transform:translate(-50%,-50%);
}
.siot-faq-x::before{width:12px;height:2px}
.siot-faq-x::after{width:2px;height:12px;transition:transform .3s ease,opacity .3s ease}
.siot-open .siot-faq-x{transform:rotate(180deg);background:#2f7bff}
.siot-open .siot-faq-x::before,.siot-open .siot-faq-x::after{background:#ffffff}
.siot-open .siot-faq-x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.siot-faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.siot-faq-a-inner{padding:0 20px 20px}
.siot-faq-a-inner p{font-size:14.5px;margin-bottom:0}

/* ====================================================================
   19. FINAL CTA
==================================================================== */
.siot-cta-box{
  position:relative;overflow:hidden;
  padding:44px 40px;border-radius:26px;
  background:linear-gradient(130deg,#0c2a63 0%,#071736 55%,#040a18 100%);
  border:1px solid rgba(110,168,255,.4);
  box-shadow:0 30px 80px rgba(2,8,24,.65);
}
.siot-cta-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(440px 260px at 85% 15%, rgba(47,123,255,.32), transparent 65%),
    radial-gradient(340px 240px at 8% 90%, rgba(110,168,255,.14), transparent 60%);
}
.siot-cta-box h2{font-size:clamp(26px,3.4vw,40px)}
.siot-cta-box p{color:#c3d3ef;font-size:15.5px;position:relative}
.siot-cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;position:relative}
.siot-cta-visual{position:relative;margin:26px 0 0}
.siot-cta-visual img{
  width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid rgba(140,190,255,.4);
  box-shadow:0 22px 50px rgba(1,5,16,.6);
}
.siot-cta-chip{
  position:absolute;left:14px;bottom:14px;right:14px;
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;border-radius:12px;
  color:#eaf3ff;font-size:13px;font-weight:600;
  background:rgba(5,12,28,.85);border:1px solid rgba(110,168,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.siot-live-dot{
  width:9px;height:9px;border-radius:50%;background:#6ea8ff;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(110,168,255,.7);
  animation:siotLive 1.8s ease-out infinite;
}
@keyframes siotLive{to{box-shadow:0 0 0 10px rgba(110,168,255,0)}}

/* ====================================================================
   RESPONSIVE
==================================================================== */
@media (max-width:1199.98px){
  .siot-svc-nav{flex-basis:260px}
  .siot-why-card{flex-basis:calc((100% - 36px) / 3)}   /* 3 per row */
  .siot-ind-grid{grid-template-columns:repeat(5,1fr);gap:12px}
  .siot-ind{padding:18px 10px}
}
@media (max-width:991.98px){
  .siot-hero{padding-top:34px}
  .siot-hero-lead{max-width:100%}
  .siot-hero-art{margin-top:26px;max-width:520px}
  .siot-svc-layout{flex-direction:column}
  .siot-svc-nav{
    position:static;flex-basis:auto;width:100%;
    flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:10px;
    -webkit-overflow-scrolling:touch;
  }
  .siot-svc-tab{flex:0 0 auto;white-space:nowrap}
  .siot-svc-tab:hover{transform:none}
  .siot-stats{grid-template-columns:repeat(2,1fr)}
  /* Problems slider: 2 cards in view */
  .siot-prob-slide{flex-basis:calc((100% - 18px) / 2)}
  .siot-prob-sliderwrap{padding:0 48px}
  /* Industries: 3 per row */
  .siot-ind-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  /* Architecture: natural flow, no inner scroll (JS clears height) */
  .siot-arch-scroll{overflow-y:visible;padding-right:0;margin-top:22px}
  /* Security: stack, natural flow */
  .siot-sec-grid{flex-direction:column}
  .siot-sec-shield{flex-basis:auto;width:100%;padding:18px}
  .siot-sec-scroll{overflow-y:visible;padding-right:0}
  /* Case tabs */
  .siot-case-tab{min-width:180px;padding:12px 16px}
  .siot-case-media{height:260px}
}
@media (max-width:767.98px){
  .siot-page h2{font-size:24px}
  .siot-trust-bar{justify-content:flex-start}
  .siot-sec-items{grid-template-columns:1fr}
  .siot-timeline::before{left:23px}
  .siot-tl-num{flex-basis:36px;width:36px;height:36px;font-size:13.5px}
  .siot-tl-item{gap:14px}
  .siot-svc-panel{padding:22px 18px}
  .siot-case-body{padding:22px 18px}
  .siot-case-media{height:210px}
  .siot-case-tab{flex:1 1 calc(50% - 12px);min-width:150px}
  .siot-cta-box{padding:30px 20px}
  /* Problems slider: 1 card in view */
  .siot-prob-slide{flex-basis:100%}
  .siot-prob-sliderwrap{padding:0 44px}
  .siot-slider-btn{width:38px;height:38px}
  /* Industries: 2 per row */
  .siot-ind-grid{grid-template-columns:repeat(2,1fr)}
  /* Why cards: 2 per row */
  .siot-why-card{flex-basis:calc((100% - 18px) / 2)}
  /* Table becomes stacked cards on small screens */
  .siot-table{min-width:0}
  .siot-table thead{display:none}
  .siot-table tbody tr{display:block;padding:6px 0;border-bottom:1px solid rgba(126,168,236,.18)}
  .siot-table tbody tr:last-child{border-bottom:0}
  .siot-table tbody td{display:block;border-bottom:0;padding:8px 16px}
  .siot-table tbody td::before{
    content:attr(data-th);display:block;margin-bottom:3px;
    font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#6f8dc0;
  }
}
@media (max-width:575.98px){
  .siot-stats{grid-template-columns:1fr}
  .siot-hero-cta .siot-btn,.siot-cta-actions .siot-btn{width:100%;justify-content:center}
  .siot-prob-sliderwrap{padding:0}
  .siot-slider-btn{display:none}                /* touch swipe + scrollbar on phones */
  .siot-why-card{flex-basis:100%}
  .siot-case-tab{flex-basis:100%}
  .siot-ind-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .siot-ind h3{font-size:14px}
}
@media (max-width:399.98px){
  .siot-ind-grid{grid-template-columns:1fr}
}

/* ====================================================================
   REDUCED MOTION
==================================================================== */
@media (prefers-reduced-motion:reduce){
  .siot-page [data-siot-reveal]{opacity:1;transform:none;transition:none}
  .siot-hero-left,.siot-hero-right{opacity:1;transform:none;transition:none}
  .siot-hero.siot-in .siot-hero-art,
  .siot-live-dot,
  .siot-flow,.siot-pulse-ring,.siot-blink,.siot-bar,.siot-gear-spin,
  .siot-arch-rail i::before{animation:none}
  .siot-prob-slider{scroll-behavior:auto}
  .siot-btn,.siot-card,.siot-prob,.siot-uc,.siot-ind,.siot-tech-card,
  .siot-engage-card,.siot-sec-item,.siot-tl-body,.siot-arch-band,.siot-benefit,
  .siot-why-card,.siot-case-tab,.siot-slider-btn{transition:none}
}