/* ============================================================
   NetSense aurora.css
   Branded pastel motion field + the flat card system that brings
   the index pages into line with the premium detail pages.

   Motion brief:
     four pastel brand washes drifting on long, unequal cycles so the
     field never visibly loops. Blur is doing the work, not opacity
     tricks. Transform-only, so it composites on the GPU and costs
     nothing on scroll. It must never compete with the content:
     if you notice it, it is too strong.
   ============================================================ */

.pdp{position:relative;background:#F7F9FC;isolation:isolate}

/* a soft accent wash under the hero so the fold is never a pale void */
.pdp-hero{position:relative}
.pdp-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 82% 0%,
      color-mix(in srgb,var(--ac,#1D4ED8) 14%,transparent) 0%,transparent 60%),
    linear-gradient(180deg,color-mix(in srgb,var(--ac,#1D4ED8) 6%,transparent),transparent 78%)}

/* ---------- the field ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.pdp > main,
.pdp > nav,
.pdp > footer,
.pdp > .pdp-crumbs{position:relative;z-index:1}

.aurora i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(64px);
  will-change:transform;
  transform:translateZ(0);
}

/* pastel brand washes. Deeper than before (the page read too pale), but still
   light enough to keep AA contrast on the ink text that sits over them. */
.aurora .a1{width:50vw;height:50vw;min-width:440px;min-height:440px;
  background:radial-gradient(circle at 50% 50%,#C3DBFF 0%,rgba(195,219,255,0) 70%);
  top:-16vh;left:-9vw;animation:auroraA 34s ease-in-out infinite alternate}

.aurora .a2{width:44vw;height:44vw;min-width:380px;min-height:380px;
  background:radial-gradient(circle at 50% 50%,#BFEEF6 0%,rgba(191,238,246,0) 70%);
  top:4vh;right:-11vw;animation:auroraB 43s ease-in-out infinite alternate}

.aurora .a3{width:46vw;height:46vw;min-width:400px;min-height:400px;
  background:radial-gradient(circle at 50% 50%,#DAD5FA 0%,rgba(218,213,250,0) 70%);
  bottom:-20vh;left:10vw;animation:auroraC 51s ease-in-out infinite alternate}

/* the fourth wash carries the page accent, so each product feels its own */
.aurora .a4{width:38vw;height:38vw;min-width:330px;min-height:330px;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--ac,#1D4ED8) 26%,transparent) 0%,transparent 68%);
  bottom:0;right:4vw;animation:auroraD 39s ease-in-out infinite alternate}

@keyframes auroraA{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(6vw,4vh,0) scale(1.12)}
  100%{transform:translate3d(-3vw,8vh,0) scale(1.04)}
}
@keyframes auroraB{
  0%  {transform:translate3d(0,0,0) scale(1.06)}
  50% {transform:translate3d(-7vw,6vh,0) scale(1)}
  100%{transform:translate3d(-2vw,-5vh,0) scale(1.14)}
}
@keyframes auroraC{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(8vw,-5vh,0) scale(1.1)}
  100%{transform:translate3d(-4vw,-2vh,0) scale(1.02)}
}
@keyframes auroraD{
  0%  {transform:translate3d(0,0,0) scale(1.08)}
  50% {transform:translate3d(-5vw,-6vh,0) scale(1)}
  100%{transform:translate3d(4vw,-3vh,0) scale(1.12)}
}

/* fine grain kills the banding that big blurred gradients always show */
.aurora::after{
  content:"";position:absolute;inset:0;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- panels float over the field ---------- */
.pdp-kpis{background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
          backdrop-filter:saturate(150%) blur(12px)}
.pdp-kpis .pdp-wrap{background:transparent;gap:0}
.pdp-kpi{background:transparent;border-right:1px solid var(--line2)}
.pdp-kpi:last-child{border-right:0}

.pdp-models{background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
          backdrop-filter:saturate(150%) blur(12px)}
.pdp-mtable tbody tr:hover{background:rgba(255,255,255,.75)}
.pdp-sib{background:rgba(255,255,255,.72)}

/* the footer is opaque, so it closes the field off cleanly */
.pdp .footer-rev{position:relative;z-index:1}

/* ---------- motion, honestly gated ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none !important}
}
/* coarse pointers get a lighter field: fewer layers, cheaper blur */
@media (max-width:760px){
  .aurora i{filter:blur(54px)}
  .aurora .a3{display:none}
}

/* ============================================================
   FLAT CARD SYSTEM
   Brings /products/, /solutions/, /resources/, /datasheets/ into the
   same language as the detail pages: hairlines, no gradients, no glow,
   no coloured image washes. One accent, used once.
   ============================================================ */
.pdp .section,
.pdp .suite,
.pdp .families,
.pdp .finder{background:transparent}
.pdp .bg-light{background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* product cards on the suite page */
.pdp .pcard{background:rgba(255,255,255,.78);border:1px solid var(--line);
  border-radius:14px;box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pdp .pcard:hover{transform:translateY(-2px);border-color:var(--pc);
  box-shadow:0 12px 30px rgba(10,14,23,.07)}
.pdp .pc-img{display:none}                 /* the photo washes were the noisiest thing here */
.pdp .pc-body{margin-top:0;padding:22px 22px 16px}
.pdp .pc-foot{background:transparent;border-top:1px solid var(--line2)}
.pdp .pc-family{background:transparent;border-color:var(--pc)}
.pdp .pc-chips li{background:transparent;border-color:var(--line)}
.pdp .pc-sol{background:transparent;border:1px solid var(--line)}
.pdp .pc-match{box-shadow:none}

/* solution cards */
.pdp .sol-card{background:rgba(255,255,255,.78);border:1px solid var(--line);
  border-radius:14px;box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pdp .sol-card:hover{transform:translateY(-2px);border-color:var(--pc);
  box-shadow:0 12px 30px rgba(10,14,23,.07)}
.pdp .sol-img{display:none}
.pdp .sol-body{margin-top:0;padding:24px}
.pdp .sol-prods em{background:transparent;border-color:var(--line)}

/* resource + datasheet cards */
.pdp .rcard,.pdp .ds,.pdp .dsm{
  background:rgba(255,255,255,.82);border:1px solid var(--line);box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pdp .rcard:hover,.pdp .ds:hover,.pdp .dsm:hover{
  transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,14,23,.1)}
.pdp .ds-ic{background:transparent;border:1px solid var(--line)}

/* Resources: real imagery makes the page (it read pale as text-only). The card
   photo gets a soft accent wash so it belongs to the resources section, and a
   clean gradient fade into the card body. */
.pdp .rcard{overflow:hidden}
.pdp .rcard-img{display:block !important;height:172px;position:relative;overflow:hidden;margin:0}
.pdp .rcard-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pdp .rcard:hover .rcard-img img{transform:scale(1.06)}
.pdp .rcard-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
     color-mix(in srgb,var(--ac,#7C3AED) 20%,transparent) 0%,
     transparent 42%, rgba(255,255,255,.06) 100%)}
.pdp .rcard-body{padding:20px 22px 22px;margin-top:0}
.pdp .rcard--case .rcard-img::after{background:linear-gradient(180deg,
     color-mix(in srgb,#16A34A 20%,transparent) 0%,transparent 42%)}
.pdp .rcard--paper .rcard-img::after{background:linear-gradient(180deg,
     color-mix(in srgb,#7C3AED 22%,transparent) 0%,transparent 42%)}

/* white papers now share the image-card grid, so drop the old icon layout */
.pdp .wp-grid{display:none}

/* the finder, restyled to the flat system */
.pdp .finder{border-bottom:1px solid var(--line)}
.pdp .ch{background:rgba(255,255,255,.7);border-color:var(--line)}
.pdp .ch:hover{border-color:var(--ink3)}
.pdp .ch[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);box-shadow:none}
.pdp .ch[aria-pressed="true"] .ch-tick svg{color:var(--ink)}
.pdp .fo-inner{background:var(--ink);border-radius:16px;box-shadow:none}
.pdp .fbtn{background:rgba(255,255,255,.7);border-color:var(--line)}
.pdp .fbtn.is-on{background:var(--ink);border-color:var(--ink)}

/* families block */
.pdp .fam{background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pdp .fam:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(10,14,23,.07)}

/* compare tray + modal stay dark: they are transient UI, not page content */
.pdp .cmp-tray{z-index:130}

/* the old dark CTA band never appears on these pages any more */
.pdp .cta-band{display:none}

/* ============================================================
   QA FIXES
   ============================================================ */

/* Section labels are now real <h2>s (they were <p>s, so every section on a
   product page was unaddressable to a screen reader and invisible to search).
   They must still LOOK like small caps labels, not headings. */
h2.pdp-lbl{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 28px;line-height:1.4}
@media(max-width:900px){h2.pdp-lbl{margin-bottom:0}}

/* ============================================================
   GLASS RHYTHM
   Sections alternate plain -> glass -> plain, so the page reads as
   distinct chapters instead of one undifferentiated column. The glass
   panel is where the aurora actually earns its keep: it diffuses the
   colour behind frosted acrylic rather than sitting flat behind text.
   ============================================================ */
.pdp-sec--glass{border-top:0 !important;padding:clamp(20px,3vw,34px) 0}
.pdp-sec--glass + .pdp-sec{border-top:0}

.pdp-glass{
  position:relative;
  padding:clamp(30px,4.2vw,58px);
  border-radius:22px;
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--ac,#1D4ED8) 7%,rgba(255,255,255,.74)),
    rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
          backdrop-filter:blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),         /* the top light-catch edge */
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 30px 70px -38px color-mix(in srgb,var(--ac,#1D4ED8) 55%,rgba(10,14,23,.5));
  overflow:hidden;
}
/* a single specular sweep across the top, the thing that reads as "glass" */
.pdp-glass::before{
  content:"";position:absolute;left:0;right:0;top:0;height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
  pointer-events:none;
}
/* a hairline of the page accent, so the glass still belongs to the product */
.pdp-glass::after{
  content:"";position:absolute;left:clamp(30px,4.2vw,58px);top:0;width:44px;height:2px;
  background:var(--ac,#1D4ED8);border-radius:0 0 2px 2px;
}
.pdp-glass > .pdp-split{position:relative;z-index:1}

/* inside glass, hairlines need to be a touch stronger to survive the blur */
.pdp-glass .pdp-caps li{border-top-color:rgba(10,14,23,.09)}
.pdp-glass .sol-caps{border-top-color:rgba(10,14,23,.55)}
.pdp-glass .sol-caps li{border-bottom-color:rgba(10,14,23,.09)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pdp-glass{background:rgba(255,255,255,.9)}
}
@media(max-width:640px){
  .pdp-glass{border-radius:16px}
  .pdp-glass::after{left:clamp(30px,4.2vw,58px)}
}

/* the suite/finder blocks still use .container while the detail pages use
   .pdp-wrap; align them so the left edge does not shift between pages */
.pdp .container{max-width:1120px;padding-left:32px;padding-right:32px}
@media(max-width:640px){.pdp .container{padding-left:20px;padding-right:20px}}

/* ============================================================
   DOWNLOADS
   ============================================================ */
.dl-group-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:24px}
.dl-group-ic{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:13px;
  background:rgba(255,255,255,.6);border:1px solid var(--line);color:var(--ac,#4338CA);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dl-group-ic svg{width:22px;height:22px}
.dl-group-title{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:650;letter-spacing:-.03em;
  color:var(--ink);margin:0 0 6px;line-height:1.2}
.dl-group-blurb{font-size:.98rem;line-height:1.6;color:var(--ink3);margin:0;max-width:60ch}

/* the row list: frosted, so the aurora reads through it */
.dl-list{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.7),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(20px) saturate(160%);
          backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 20px 50px -34px rgba(10,14,23,.28)}

.dl-item{display:flex;align-items:center;gap:18px;padding:18px 22px;
  border-top:1px solid rgba(10,14,23,.07);transition:background .18s,padding .2s}
.dl-item:first-child{border-top:0}
.dl-item:not(.is-pending):hover{background:rgba(255,255,255,.7);padding-left:26px}

.dl-plat{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--ink2)}
.dl-plat svg{width:20px;height:20px}

.dl-body{flex:1;min-width:0}
.dl-body b{display:block;font-size:1rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.dl-meta{display:block;font-size:.82rem;color:var(--ink3);margin-top:3px}

.dl-right{display:flex;align-items:center;gap:16px;flex:none}
.dl-ver{font-size:.76rem;font-weight:600;color:var(--ink3);white-space:nowrap}
.dl-pending{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#B26A00;background:#FFF4E0;border:1px solid #FCE4BD;padding:4px 9px;border-radius:20px;white-space:nowrap}
.dl-act{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:650;
  color:var(--ink);white-space:nowrap}
.dl-act svg{width:15px;height:15px}
.dl-item:not(.is-pending) .dl-act{color:var(--ac,#4338CA)}

.dl-item.is-pending{cursor:default}
.dl-item.is-pending .dl-body b,.dl-item.is-pending .dl-plat{opacity:.6}
.dl-item.is-pending .dl-act{color:var(--ink3);font-weight:500}

.dl-foot{font-size:.92rem;line-height:1.7;color:var(--ink3);max-width:70ch;margin:0}
.dl-foot a{color:var(--ink);font-weight:550;border-bottom:1px solid var(--line);transition:border-color .2s,color .2s}
.dl-foot a:hover{color:var(--ac,#4338CA);border-color:var(--ac,#4338CA)}

@media(max-width:600px){
  .dl-item{flex-wrap:wrap;gap:12px 14px}
  .dl-right{width:100%;justify-content:space-between;padding-left:56px}
  .dl-item:not(.is-pending):hover{padding-left:22px}
}

/* platform brand logos keep their own colour, not the box ink */
.dl-plat svg [fill]{fill:inherit}

/* ============================================================
   BECOME A PARTNER
   ============================================================ */
.pf-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start}
.pf-reasons{display:grid;gap:20px}
.pf-reason{padding-left:16px;border-left:2px solid var(--ac,#1D4ED8)}
.pf-reason b{display:block;font-size:1.02rem;font-weight:650;color:var(--ink);letter-spacing:-.01em;margin-bottom:5px}
.pf-reason p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink3)}

.pf-form-wrap{position:relative}
.pf-form{position:relative;padding:clamp(24px,3vw,38px);border-radius:20px;
  background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
          backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 30px 70px -40px color-mix(in srgb,var(--ac,#1D4ED8) 45%,rgba(10,14,23,.5))}
.pf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pf-row:has(.pf-field:only-child),
.pf-row .pf-field:not(.pf-half){grid-column:1 / -1}
.pf-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;min-width:0}
.pf-field label{font-size:.78rem;font-weight:650;color:var(--ink2);letter-spacing:.01em}
.pf-field input,.pf-field select,.pf-field textarea{
  font:inherit;font-size:.92rem;color:var(--ink);
  background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;transition:border-color .18s,box-shadow .18s;width:100%}
.pf-field textarea{resize:vertical}
.pf-field input:focus,.pf-field select:focus,.pf-field textarea:focus{
  outline:none;border-color:var(--ac,#1D4ED8);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ac,#1D4ED8) 15%,transparent)}
.pf-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23727C8C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.pf-submit{margin-top:6px;border:0;cursor:pointer;width:auto}
.pf-note{margin:16px 0 0;font-size:.8rem;line-height:1.6;color:var(--ink3)}
.pf-note b{color:var(--ink2);font-weight:650}
.pf-why > .pdp-lbl{margin-bottom:22px}

@media(max-width:820px){
  .pf-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:520px){
  .pf-row{grid-template-columns:1fr}
  .pf-field.pf-half{grid-column:1 / -1}
}