/* ===== Product Orbit (neumorphic) ===== */
:root{
  --bg: #d0d6e2;
  --surface: #e6ebf5;
  --muted: #2d3440;
  --accentA: #6aa0ff;
  --accentB: #57e3c1;
  --shadow-dark: rgba(0,0,0,.15);
  --shadow-light: rgba(255,255,255,.8);
}

.product-orbit{
  --size: clamp(260px, 42vw, 520px);
  --ring-w: 2px;
  --spin-a: 28s;
  --spin-b: 42s;

  position: relative;
  width: var(--size);
  height: var(--size);
  margin-inline: auto;
  filter: drop-shadow(0 20px 30px rgba(15,23,42,.12));
  user-select: none;
  -webkit-user-drag: none;
}

/* soft background glow */
.product-orbit .orbit-bg{
  position:absolute; inset:-10%;
  background:
    radial-gradient(40% 35% at 30% 25%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(35% 30% at 70% 75%, rgba(86,203,255,.25), transparent 65%),
    radial-gradient(30% 25% at 75% 25%, rgba(87,227,193,.25), transparent 65%);
  filter: blur(10px);
  border-radius: 40px;
  pointer-events: none;
}

/* center core */
.product-orbit .orbit-core{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 22px;
  display:grid; place-items:center;
  background: linear-gradient(145deg, var(--surface), #f3f6fb);
  box-shadow:
    12px 12px 24px var(--shadow-dark),
    -12px -12px 24px var(--shadow-light),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.product-orbit .core-logo{ width:64x; height:64px; }
.product-orbit .core-ring{
  position:absolute; inset:-16px;
  border-radius: 28px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.6), transparent 60%);
  filter: blur(8px); pointer-events:none;
}

/* rings */
.product-orbit .orbit-ring{
  position:absolute; inset:0;
  border-radius: 999px;
  pointer-events: none;
}
.product-orbit .ring-a{
  border: var(--ring-w) dashed rgba(106,160,255,.35);
  animation: orbitSpinA var(--spin-a) linear infinite;
}
.product-orbit .ring-b{
  inset: 8%;
  border: var(--ring-w) dashed rgba(87,227,193,.35);
  animation: orbitSpinB var(--spin-b) linear infinite reverse;
}

/* orbit items */
.product-orbit .orbit-item{
  --item: 64px;
  position:absolute;
  width: var(--item); height: var(--item);
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(145deg, var(--surface), #f3f6fb);
  box-shadow:
    6px 6px 14px rgba(0,0,0,.12),
    -6px -6px 14px rgba(255,255,255,.8),
    inset 0 1px 0 rgba(255,255,255,.45);
  pointer-events: auto; /* clickable */
  transform: translate(-50%, -50%); /* because we position by top/left centers */
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-orbit .orbit-item img{ width: 34px; height: 34px; }

.product-orbit .orbit-item:hover{
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.10),
    inset -6px -6px 14px rgba(255,255,255,.75);
}

/* positions on rings (4 items per ring) */
.product-orbit .ring-a .orbit-item:nth-child(1){ top: 6%;   left: 50%; }
.product-orbit .ring-a .orbit-item:nth-child(2){ top: 50%;  left: 94%; }
.product-orbit .ring-a .orbit-item:nth-child(3){ top: 94%;  left: 50%; }
.product-orbit .ring-a .orbit-item:nth-child(4){ top: 50%;  left: 6%;  }

.product-orbit .ring-b .orbit-item:nth-child(1){ top: 12%;  left: 50%; }
.product-orbit .ring-b .orbit-item:nth-child(2){ top: 50%;  left: 88%; }
.product-orbit .ring-b .orbit-item:nth-child(3){ top: 88%;  left: 50%; }
.product-orbit .ring-b .orbit-item:nth-child(4){ top: 50%;  left: 12%; }

/* signals */
.product-orbit .orbit-signal{
  position:absolute; inset:-2%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(106,160,255,.12), transparent 60%, rgba(87,227,193,.10));
  animation: sweep 6s linear infinite;
  mix-blend-mode: soft-light; pointer-events:none;
}
.product-orbit .orbit-signal.s1{ animation-duration: 7.5s; opacity:.55; }
.product-orbit .orbit-signal.s2{ inset: -6%; animation-duration: 10s; opacity:.35; }

/* live label that follows hover */
.product-orbit .orbit-label{
  position:absolute; left:50%; bottom: -18px;
  transform: translateX(-50%);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #6b7486;
  background: rgba(255,255,255,.6);
  padding: 6px 10px; border-radius: 999px;
  box-shadow:
    2px 2px 6px rgba(0,0,0,.10),
    -2px -2px 6px rgba(255,255,255,.75);
}

/* Animations */
@keyframes orbitSpinA { to{ transform: rotate(360deg); } }
@keyframes orbitSpinB { to{ transform: rotate(-360deg); } }
@keyframes sweep      { to{ transform: rotate(360deg); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .product-orbit .ring-a,
  .product-orbit .ring-b,
  .product-orbit .orbit-signal{ animation: none; }
}


:root{
    --bg: #e9edf5;
    --pill:#d4d9e3;          /* same tone for soft neumorphism */
    --text:#2d3440;
    --texth3:#2d3440;
    --textp:#2d3440;;
    --muted: #7c8696;

    --pill-r:55px;           /* pill end-cap radius */
    --arc-stroke:30px;       /* colored arc thickness */
    --spine-w:6px;          /* center spine width */
    --spine-gap:calc(var(--spine-w)/2 + 14px); /* gap between pill and spine */

    --sky:#4b7796;           /* arc gradient start */
 
   /* quick knobs */
  --hero-min-h: 220px;          /* hero height on desktop */
  --hero-pad-y: 48px;           /* vertical padding inside hero */
  --hero-gap-bottom: 24px;      /* space below hero before products */

  --hero-bg: #ebeff7;          /* page bg tint */
  --hero-top: #ebeff7;         /* soft highlight */
  --hero-accent: #eceff9;       /* sweep line tint */
  --hero-accent-2:#2ea7ff;

  --hero-pill-bg:#ffffff;       /* banner chip bg */
  --hero-text:#162844;

    

    --left-gap-from-spine: -72px;   /* LEFT items stop this far before the spine */
    --right-gap-from-spine: -72px;  /* RIGHT items stop this far before the spine */

    --list-pad-x: 0px;      /* left/right padding for the whole prod-list */
    --list-pad-y: 0px;      /* top/bottom padding for the whole prod-list */
    --row-gap: 21px;        /* vertical space between items */

  /* (optional) card inner padding controls */
  --card-pad-x: 32px;     /* left/right padding inside each pill */
  --card-pad-y: 10px;     /* top/bottom padding inside each pill */
  /* --- Button look controls --- */
  --btn-size: 98px;                 /* badge diameter */
  --btn-icon: 44px;                 /* icon size */
  --btn-bg-1:#d4d9e3;               /* highlight */
  --btn-bg-2:#d4d9e3;               /* base tint */
  --btn-border:#d4d9e3;             /* subtle rim */
  --btn-ring:rgba(2, 8, 12, 0.28);  /* focus ring */
  --btn-shadow:0 20px 34px rgba(0, 2, 4, 0.22);
  --btn-shadow-hover:0 18px 28px rgba(20,40,80,.26);
  --btn-shadow-pressed:0 8px 14px rgba(20,40,80,.18);
  --btn-inset-pressed:inset 6px 8px 14px rgba(10,20,40,.08);


  --inset-offset: 18px;              /* how far the inner shadow is offset (↘︎ / ↖︎) */
  --inset-blur:   42px;              /* blur radius of inset shadows */
  --inset-spread: 0px;               /* spread – keep 0 for soft edges */

  --inset-dark:   rgba(163, 164, 166, 0.2);  /* inner darkness (bottom-right)  */
  --inset-light:  rgba(255,255,255,.98);  /* inner highlight (top-left)     */
  --rim-dark:     rgba(7, 34, 88, 0.14);  /* extra inner rim (top/bottom)   */
  --rim-light:    #020713;  /* inner glow opposite the rim    */


  }




/*--------------------------------------------------------------
# Static Hero Section
--------------------------------------------------------------*/
.hero-animated{
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-min-h);
  margin-bottom: var(--hero-gap-bottom);
  background: linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-bg-alt, #f3f6fb) 100%);
  /* replaced radial-gradient with a soft linear gradient */
  overflow: hidden;
}

/* subtle animated light sweep */
.hero-animated::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(63,107,255,.08), transparent);
  background-size: 200% 100%;
  animation: heroSweep 8s linear infinite;
  pointer-events:none;
}

@keyframes heroSweep{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.hero-animated .container {
  padding-top: 100px;   /* increase top spacing */
  padding-bottom: 60px;/* keep good vertical breathing */
  padding-left: 140px;  /* add left padding */
  padding-right: 20px; /* optional */
  position: relative;
  z-index: 1;
}

/* pill-like heading chip */
.banner-heading{
  display: inline-block;
  background: var(--hero-pill-bg);
  padding: 18px 28px;
  border-radius: 999px;
  box-shadow:
    inset 12px 14px 30px rgba(0,0,0,.08),
    inset -12px -14px 30px rgba(255,255,255,.95),
    0 16px 32px rgba(28,48,88,.12);
}

.hero-animated h1 { margin: 0 0 10px;
      font-weight: 800;
      letter-spacing: .04em;
      color: var(--slate, var(--text));
      margin: 10px 0 6px;
      font-size: clamp(32px, 4vw, 42px);
    }


.hero-animated h2 {
  margin: 0 0 10px;
  font-weight: 800;
  color: var(--slate, #0f172a);
  font-size: clamp(32px, 4vw, 42px);
  
}

.hero-animated p {
  margin: 0;
  font-size: 1.125rem;
  color: var(--muted, #64748b);
}

/* optional thin bottom separator glow */
.hero-animated::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:10px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(20,40,80,.06) 100%);
  pointer-events:none;
}

/* responsive */
@media (max-width: 768px){
  :root{
    --hero-min-h: 160px;
    --hero-pad-y: 28px;
    --hero-gap-bottom: 16px;
  }
}



/* hero end container bottom curve */



  .wrap{max-width:1100px; margin:56px auto; padding:10 22px; position:relative}

  /* One-column stack + a vertical spine at center */
  .prod-list{position:relative;
    display:flex; flex-direction:column; 
    gap: var(--row-gap);}

/* Hide the center spine */
.prod-list::before{
  display: none !important;
}
  .prod-item{position:relative; width:100%}

  /* Pill card occupies half width (minus spine gap) and anchors left or right */
  .prod-card{
    position:relative; 
    width:calc(50% - var(--spine-gap));
    background:var(--pill); 
    border-radius:var(--pill-r);
    min-height:120px; 
    display:flex; 
    align-items:center; 
    padding: var(--card-pad-y) var(--card-pad-x);
    /* darker inset neumorphism */
   box-shadow:
    inset var(--inset-offset) var(--inset-offset) var(--inset-blur) var(--inset-spread) var(--inset-dark),
    inset calc(-1 * var(--inset-offset)) calc(-1 * var(--inset-offset)) var(--inset-blur) var(--inset-spread) var(--inset-light),
    0 16px 34px rgba(23, 37, 84, .10); /* subtle outer lift from page */
  position: relative;
  }

  
  .prod-card::after{
    content:""; position:absolute; 
    inset:0; 
    border-radius:var(--pill-r);
    box-shadow:inset 2px 1px 10px rgba(172, 171, 171, 0.85); 
    pointer-events:none;
  }

  /* Align the half-width pill per row */
 /* LEFT item: goes from left edge → (center - gap) */
.is-left  .prod-card{
  width: calc(50% - var(--spine-gap) - var(--left-gap-from-spine));
  margin-right: auto;
}

/* RIGHT item: goes from right edge ← (center - gap) */
.is-right .prod-card{
  width: calc(50% - var(--spine-gap) - var(--right-gap-from-spine));
  margin-left: auto;
}

  /* Text block (h3 & p start at same x) */
  .prod-text{max-width:760px}
  .prod-text h3{margin:0 0 6px; font-weight:500; }
  .prod-text p{margin:0; color:var(--textp); }

  /* Badge INSIDE the pill on the spine side (inside edge) */
.prod-badge{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--btn-size); height:var(--btn-size); border-radius:50%;
  display:grid; place-items:center;
  /* button visuals */
  background: radial-gradient(120% 120% at 70% 30%, var(--btn-bg-1) 0 35%, var(--btn-bg-2) 100%);
  border:1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    filter .18s ease;
}
  .prod-badge img{
  width:var(--btn-icon); height:var(--btn-icon); object-fit:contain; display:block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.06));
}
/* glossy top highlight */
.prod-badge::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  pointer-events:none;
}
/* Hover = lift slightly */
.prod-badge:hover{
  transform:translateY(calc(-50% - 1px));
  box-shadow: var(--btn-shadow-hover);
}

/* Pressed = subtle sink + inner shadow */
.prod-badge:active{
  transform:translateY(-50%) scale(.985);
  box-shadow: var(--btn-shadow-pressed), var(--btn-inset-pressed);
}

/* Keyboard focus ring */
.prod-badge:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px var(--btn-ring),
    var(--btn-shadow-hover);
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .prod-badge{ transition:none }
}





  .is-left  .prod-badge{ right:10px; }          /* inside edge toward spine */
  .is-left  .prod-card{  padding-right:162px; }

  .is-right .prod-badge{ left:10px;  }
  .is-right .prod-card{  padding-left:162px;  }

  /* Outside edge arc hugs pill rim (mathematically aligned) */
  /* Multi-color arc (3-stop conic gradient) */
.edge-arc{
  --R: var(--pill-r);
  --t: var(--arc-stroke);
  --sweep: 180deg;       /* length of arc */
  --stop2: 90deg;        /* middle color stop inside the sweep */

  width: calc((var(--R) + var(--t)) * 2);
  height: calc((var(--R) + var(--t)) * 2);
  position:absolute; top:50%; transform:translateY(-50%);
  pointer-events:none; z-index:1;

  /* 3 colors across the arc, then transparent after the sweep */
  background:
    conic-gradient(from var(--start-angle),
      var(--arc-c1) 0deg,
      var(--arc-c2) var(--stop2),
      var(--arc-c3) var(--sweep),
      transparent  var(--sweep) 360deg);

  /* ring thickness mask (keep only [R .. R+t]) */
  -webkit-mask: radial-gradient(circle at center,
      transparent calc(var(--R) - .5px),
      #000       calc(var(--R) - .5px),
      #000       calc(var(--R) + var(--t)),
      transparent calc(var(--R) + var(--t) + .5px));
          mask: radial-gradient(circle at center,
      transparent calc(var(--R) - .5px),
      #000       calc(var(--R) - .5px),
      #000       calc(var(--R) + var(--t)),
      transparent calc(var(--R) + var(--t) + .5px));
  filter: drop-shadow(0 8px 16px rgba(46,167,255,.18));
}
  
/* Arc hugs the INSIDE edge, same side as the badge */
.is-left  .edge-arc{  right: calc(-1 * var(--arc-stroke));  --start-angle:360deg; --sweep:180deg; } /* left item → icon on right → arc on right */
.is-right .edge-arc{  left:  calc(-1 * var(--arc-stroke));  --start-angle:180deg; --sweep:180deg; } /* right item → icon on left  → arc on left  */

/* Arc color palettes (per item) */
.arc-ocean   { --arc-c1:#1aa1ff; --arc-c2:#2dd4ff; --arc-c3:#828bee; }
.arc-forest  { --arc-c1:#828bee; --arc-c2:#84cc16; --arc-c3:#828bee; }
.arc-lime    { --arc-c1:#84cc16; --arc-c2:#ff8a4c; --arc-c3:#22c55e; }
.arc-sunset  { --arc-c1:#ff8a4c; --arc-c2:#b8648d; --arc-c3:#ff5e62; }
.arc-rose    { --arc-c1:#ff6bb3; --arc-c2:#ff8ad4; --arc-c3:#8b5cf6; }
.arc-gold    { --arc-c1:#f59e0b; --arc-c2:#fbbf24; --arc-c3:#ef4444; }

  /* Mobile: stack full width, center everything */
  @media (max-width:900px){
    .prod-card{ width:100%; padding:92px 24px 28px }
    .prod-badge{ left:50%; transform:translate(-50%,-50%) }
    .edge-arc{ display:none }
    .prod-text{ text-align:center; margin:0 auto }
  }