/* Shodhyantri — services hub band (home page)
   Loaded by content/index.html. Markup lives there as <section class="sy-hub">.
   Uses the site tokens: --paper --ink --body --mut --line --blue --blue-l --orange --ease */

.sy-hub{
  --hub-ink:var(--ink,#12212E);
  --hub-mut:var(--body,#41576A);
  --hub-line:rgba(10,38,68,.13);
  --hub-chip:var(--paper,#FFFFFF);
  --hub-edge:var(--line,#DCE6ED);
  position:relative;
  overflow:hidden;
  padding:clamp(52px,7vw,84px) 20px clamp(48px,6vw,72px);
  background:var(--paper,#FFFFFF);
  color:var(--hub-ink);
  isolation:isolate;
}
.sy-hub::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle, rgba(10,38,68,.20) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.28;
  -webkit-mask-image:radial-gradient(105% 78% at 50% 44%, #000 22%, transparent 74%);
  mask-image:radial-gradient(105% 78% at 50% 44%, #000 22%, transparent 74%);
}
.sy-hub > *{position:relative;z-index:1}

.sy-hub-head{max-width:660px;margin:0 auto clamp(24px,4vw,40px);text-align:center}
.sy-hub-eyebrow{
  display:inline-block;margin:0 0 14px;padding:5px 13px;
  border:1px solid rgba(0,88,126,.22);border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue,#00587E);background:rgba(0,88,126,.055);
}
.sy-hub h2{
  margin:0 0 12px;color:var(--ink,#12212E);text-wrap:balance;
  font-size:clamp(25px,4.4vw,40px);line-height:1.14;letter-spacing:-.02em;font-weight:700;
}
.sy-hub-lede{margin:0 auto;max-width:56ch;color:var(--body,#41576A);font-size:clamp(15px,1.6vw,17px);line-height:1.62}

.sy-hub-stage{
  position:relative;width:100%;max-width:1000px;margin:0 auto;
  aspect-ratio:1000/600;
}
.sy-hub-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sy-wire-base{stroke:var(--hub-line);stroke-width:1.25;fill:none}
.sy-wire-glow{
  stroke:var(--blue-l,#1B7FA8);stroke-width:2.25;fill:none;stroke-linecap:round;
  stroke-dasharray:54 446;stroke-dashoffset:500;
  filter:drop-shadow(0 0 4px rgba(27,127,168,.40));
  animation:sy-travel 4.4s linear infinite;
}
@keyframes sy-travel{to{stroke-dashoffset:0}}

.sy-hub-core{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  display:grid;place-items:center;
  width:clamp(72px,11vw,116px);aspect-ratio:1;
  border-radius:clamp(16px,2.4vw,26px);
  background:var(--paper,#fff);
  border:1px solid var(--line,#DCE6ED);
  box-shadow:0 0 0 9px rgba(0,88,126,.045), 0 2px 6px rgba(10,38,68,.06), 0 26px 56px -28px rgba(10,38,68,.45);
}
.sy-hub-core img{width:62%;height:auto;display:block}
.sy-hub-core::after{
  content:"";position:absolute;inset:-5px;border-radius:inherit;
  border:1.5px solid rgba(0,88,126,.30);
  animation:sy-ping 3.2s var(--hp-ease-io,cubic-bezier(.45,.05,.25,1)) infinite;
}
@keyframes sy-ping{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.17);opacity:0}
  100%{transform:scale(1.17);opacity:0}
}

.sy-chip{
  position:absolute;translate:-50% -50%;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 9px 11px;
  border-radius:999px;
  border:1px solid var(--hub-edge);
  background:var(--hub-chip);
  color:var(--hub-ink);text-decoration:none;white-space:nowrap;
  font-size:clamp(11.5px,1.25vw,14px);font-weight:600;letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(10,38,68,.05), 0 10px 22px -16px rgba(10,38,68,.55);
  transition:transform var(--hp-t-card,220ms) var(--ease,cubic-bezier(.22,.61,.36,1)),
             border-color 200ms, background-color 200ms, box-shadow 220ms, color 200ms;
}
.sy-chip svg{
  width:1.32em;height:1.32em;flex:none;
  stroke:var(--blue,#00587E);fill:none;stroke-width:1.65;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke 200ms, transform 260ms var(--ease,cubic-bezier(.22,.61,.36,1));
}
.sy-chip:hover,.sy-chip:focus-visible{
  transform:translateY(-3px);
  border-color:var(--orange,#F39200);
  background:#FFF6EA;
  color:var(--navy,#0A2644);
  box-shadow:0 10px 24px -12px rgba(243,146,0,.55);
  outline:none;
}
.sy-chip:focus-visible{box-shadow:0 0 0 3px rgba(243,146,0,.30)}
.sy-chip:hover svg,.sy-chip:focus-visible svg{stroke:var(--orange-d,#CE7B00);transform:scale(1.1)}
.sy-chip:active{transform:translateY(-1px)}

.sy-hub-foot{margin:clamp(24px,4vw,40px) auto 0;text-align:center}
.sy-hub-all{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 24px;border-radius:999px;
  background:var(--orange,#F39200);color:#0A2644;
  font-size:15px;font-weight:700;text-decoration:none;letter-spacing:-.01em;
  box-shadow:0 10px 24px -14px rgba(243,146,0,.9);
  transition:transform 200ms var(--ease,cubic-bezier(.22,.61,.36,1)), background-color 200ms;
}
.sy-hub-all:hover{background:var(--orange-d,#CE7B00);color:#fff;transform:translateY(-2px)}
.sy-hub-all svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sy-hub-note{margin:15px 0 0;font-size:13.5px;color:var(--mut,#7A8C9B)}
.sy-hub-note a{color:var(--blue,#00587E)!important;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sy-hub-note a:hover{color:var(--orange-d,#CE7B00)!important}

.sy-hub.sy-js .sy-chip{opacity:0;transform:translateY(10px) scale(.94)}
.sy-hub.sy-js.sy-in .sy-chip{
  opacity:1;transform:none;
  transition:opacity var(--hp-t-enter,560ms) var(--ease,cubic-bezier(.22,.61,.36,1)) var(--d,0ms),
             transform var(--hp-t-enter,560ms) var(--ease,cubic-bezier(.22,.61,.36,1)) var(--d,0ms);
}
.sy-hub.sy-js .sy-wire-base,.sy-hub.sy-js .sy-wire-glow{opacity:0;transition:opacity 700ms ease 300ms}
.sy-hub.sy-js.sy-in .sy-wire-base,.sy-hub.sy-js.sy-in .sy-wire-glow{opacity:1}

@media (max-width:860px){
  .sy-hub-stage{aspect-ratio:auto;max-width:560px}
  .sy-hub-wires{display:none}
  .sy-hub-core{position:static;translate:none;margin:0 auto 22px;width:72px}
  .sy-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sy-chip{position:static!important;translate:none;white-space:normal;
    justify-content:flex-start;padding:13px 14px;line-height:1.3;font-size:13.5px}
  .sy-hub.sy-js .sy-chip{transform:translateY(8px)}
}
@media (max-width:430px){
  .sy-hub-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .sy-wire-glow{animation:none;opacity:.55}
  .sy-hub-core::after{animation:none;opacity:.3}
  .sy-hub.sy-js .sy-chip{opacity:1;transform:none}
  .sy-chip,.sy-hub-all{transition:none}
}