/* Piqelo v76.1 — premium visual refinement.
   Visual-only pass: keep the existing information architecture and layout intact.
   Direction: restrained, trustworthy, tactile and high-resolution rather than futuristic. */

:root{
  --pv-line:rgba(119,166,188,.24);
  --pv-line-strong:rgba(112,190,196,.34);
  --pv-surface:rgba(7,27,42,.94);
  --pv-surface-2:rgba(9,33,49,.96);
  --pv-surface-soft:rgba(255,255,255,.026);
  --pv-ink:#f4f9fc;
  --pv-muted:#9db2c0;
  --pv-accent:#62d9cb;
  --pv-accent-2:#75b9e8;
  --pv-shadow:0 20px 52px rgba(0,8,18,.24);
  --pv-shadow-soft:0 10px 28px rgba(0,8,18,.18);
}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{letter-spacing:-.002em}
::selection{background:rgba(93,211,198,.26);color:#fff}

/* ---------------------------------------------------------
   1. Core surfaces: same geometry, more precise materials
   --------------------------------------------------------- */
.hero21,
.quickFinder,
#topPickPanel,
.savedShortlist,
.fullShortlist,
.result,
.detailPanel,
.compareHero,
.compareSection,
.compareVerdict,
.rankcard,
.panel{
  border-color:var(--pv-line)!important;
}

.hero21{
  background:
    radial-gradient(circle at 72% 4%,rgba(91,167,196,.10),transparent 31%),
    linear-gradient(120deg,rgba(4,18,31,.98),rgba(6,28,43,.92) 48%,rgba(5,24,37,.86))!important;
  box-shadow:0 30px 80px rgba(0,7,17,.30),inset 0 1px 0 rgba(255,255,255,.038)!important;
}
.hero21:before{
  opacity:.24!important;
  filter:blur(28px)!important;
  background:radial-gradient(circle,rgba(75,174,202,.58),rgba(66,191,176,.23) 48%,transparent 72%)!important;
  box-shadow:none!important;
}
.hero21:after{
  background:linear-gradient(90deg,rgba(3,15,27,.985) 0%,rgba(3,17,29,.90) 40%,rgba(3,16,26,.24) 70%,rgba(3,15,26,.40) 100%)!important;
}

.quickFinder{
  border-color:rgba(103,171,194,.30)!important;
  background:linear-gradient(180deg,rgba(8,32,48,.94),rgba(6,25,39,.94))!important;
  box-shadow:0 16px 42px rgba(0,7,16,.22),inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(18px) saturate(112%)!important;
}

.selectBox{
  border-color:rgba(109,154,177,.28)!important;
  background:linear-gradient(180deg,rgba(11,39,56,.96),rgba(7,29,44,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 5px 14px rgba(0,8,17,.10)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.selectBox:hover{border-color:rgba(112,190,196,.42)!important}
.selectBox:focus-within{
  border-color:rgba(102,211,198,.58)!important;
  box-shadow:0 0 0 3px rgba(93,211,198,.09),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.selectBox small{color:#82a0b2!important;font-weight:650!important;letter-spacing:.012em!important}
.selectBox select{color:#f4fafc!important}

/* ---------------------------------------------------------
   2. Buttons: quiet luxury, clear states, tactile detail
   --------------------------------------------------------- */
:where(.btn,.findBtn,.option,.tagPill,.liveStatus,.compareClear,#compareNowBtn,.savedShortlistActions button,#topPickPanel a,#topPickPanel button){
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,filter .16s ease,color .16s ease!important;
}

.btn,
.savedShortlistActions .btn,
.compareClear{
  border-color:rgba(104,154,179,.28)!important;
  background:linear-gradient(180deg,rgba(17,52,70,.94),rgba(10,38,55,.96))!important;
  color:#dce9ef!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 7px 18px rgba(0,7,15,.12)!important;
  font-weight:820!important;
}
.btn:hover,
.savedShortlistActions .btn:hover,
.compareClear:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(118,190,198,.42)!important;
  background:linear-gradient(180deg,rgba(20,60,78,.98),rgba(11,43,60,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 10px 24px rgba(0,7,15,.18)!important;
}
.btn:active,.findBtn:active,#compareNowBtn:active{transform:translateY(0) scale(.985)!important}

.btn.primary,
.findBtn,
#compareNowBtn,
#topPickPanel #spotlightDetails{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(161,235,222,.34)!important;
  background:linear-gradient(180deg,#79ded2 0%,#58cbbb 52%,#45b8ad 100%)!important;
  color:#052026!important;
  text-shadow:0 1px 0 rgba(255,255,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52),inset 0 -1px 0 rgba(0,61,67,.18),0 10px 24px rgba(33,158,153,.17)!important;
  font-weight:900!important;
}
.btn.primary:hover,
.findBtn:hover,
#compareNowBtn:hover,
#topPickPanel #spotlightDetails:hover{
  transform:translateY(-1px)!important;
  filter:saturate(1.02) brightness(1.035)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(0,61,67,.16),0 14px 30px rgba(33,158,153,.21)!important;
}

.findBtn{letter-spacing:-.01em!important}

:where(.btn,.findBtn,.option,.desktopNav button,.tagPill,.liveStatus,select):focus-visible{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(92,211,198,.13),0 0 0 1px rgba(104,229,214,.60)!important;
}

/* ---------------------------------------------------------
   3. Small controls / navigation
   --------------------------------------------------------- */
.option{
  border-color:rgba(104,151,175,.24)!important;
  background:rgba(8,29,43,.78)!important;
  color:#a8bac5!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.026)!important;
}
.option:hover{
  border-color:rgba(113,180,190,.38)!important;
  color:#e4eef3!important;
  background:rgba(12,41,56,.90)!important;
}
.option.active{
  border-color:rgba(102,207,193,.44)!important;
  background:linear-gradient(180deg,rgba(36,104,107,.92),rgba(25,77,83,.94))!important;
  color:#f3fbfa!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px rgba(0,10,18,.13)!important;
}

.tagPill,.liveStatus{
  border-color:rgba(104,158,181,.27)!important;
  background:linear-gradient(180deg,rgba(10,35,51,.84),rgba(6,26,40,.90))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.036)!important;
}
.liveStatus{color:#95d9ca!important}

.desktopNav button{color:#c6d6df!important;font-weight:720!important}
.desktopNav button:hover,.desktopNav button.active{color:#f1f7fa!important}
.desktopNav button:after{
  height:1px!important;
  background:linear-gradient(90deg,rgba(114,185,222,.88),rgba(95,218,202,.92))!important;
  box-shadow:0 1px 8px rgba(75,183,181,.14)!important;
}

/* ---------------------------------------------------------
   4. Type hierarchy: cleaner, calmer, more editorial
   --------------------------------------------------------- */
.eyebrow{
  color:#83d8cf!important;
  letter-spacing:.24em!important;
  font-weight:850!important;
}
.heroCopy h1{letter-spacing:-.047em!important}
.heroCopy h1 .grad{
  background:linear-gradient(96deg,#85bfe8 0%,#7ed5d0 52%,#8ed7bf 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.heroCopy>p{color:#b9c9d2!important}
.fineLabel{color:#849ead!important;letter-spacing:.10em!important}
.finderTrust{color:#8fa7b5!important}

/* ---------------------------------------------------------
   5. Winner / recommendation surfaces
   --------------------------------------------------------- */
#topPickPanel{
  border-color:rgba(104,165,184,.30)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(91,175,185,.055),transparent 25%),
    linear-gradient(118deg,rgba(7,29,44,.985),rgba(5,24,38,.985))!important;
  box-shadow:0 24px 62px rgba(0,7,16,.24),inset 0 1px 0 rgba(255,255,255,.038)!important;
}
#topPickPanel .winnerSpotlightLeft,
#topPickPanel .reviewConsensus,
#topPickPanel .homePC,
#topPickPanel .spotlightPriceRow{
  border-color:rgba(110,164,182,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.026)!important;
}
#topPickPanel .winnerSpotlightLeft{
  background:
    radial-gradient(circle at 82% 32%,rgba(92,188,173,.055),transparent 28%),
    linear-gradient(130deg,rgba(9,38,53,.965),rgba(7,28,43,.975))!important;
}
#topPickPanel .scoreRing{
  box-shadow:0 0 0 6px rgba(83,202,181,.045),0 13px 28px rgba(0,7,14,.18)!important;
}
#topPickPanel .whyBox>b:before{
  border-color:rgba(92,197,177,.24)!important;
  background:rgba(61,165,146,.09)!important;
}
#topPickPanel .homePC.pro{background:linear-gradient(145deg,rgba(16,62,59,.28),rgba(8,35,44,.32))!important}
#topPickPanel .homePC.con{background:linear-gradient(145deg,rgba(73,58,34,.23),rgba(36,34,31,.28))!important}

#topPickPanel #spotlightBestOfferCta:not([hidden]){
  border-color:rgba(100,196,177,.34)!important;
  border-left-color:#6ed8c1!important;
  background:linear-gradient(120deg,rgba(18,70,70,.88),rgba(8,38,49,.97) 66%)!important;
  box-shadow:0 13px 30px rgba(0,7,15,.17),inset 0 1px 0 rgba(255,255,255,.047)!important;
}
#topPickPanel #spotlightBestOfferCta:not([hidden]):hover{
  box-shadow:0 17px 36px rgba(0,7,15,.22),inset 0 1px 0 rgba(255,255,255,.065)!important;
}

/* ---------------------------------------------------------
   6. Trust rail: premium, factual, intentionally understated
   --------------------------------------------------------- */
#home .trustStripPremium{
  border-color:rgba(109,166,184,.27)!important;
  background:rgba(7,27,41,.92)!important;
  box-shadow:0 20px 48px rgba(0,7,15,.20),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#home .trustStripPremium:before{
  background:linear-gradient(90deg,rgba(100,206,193,.035),transparent 28%,transparent 72%,rgba(95,160,200,.032))!important;
}
#home .trustStripPremium .trustItem{
  background:linear-gradient(180deg,rgba(10,35,50,.95),rgba(6,26,40,.975))!important;
}
#home .trustStripPremium .trustItem:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(180deg,rgba(12,40,55,.975),rgba(7,29,43,.985))!important;
}
#home .trustStripPremium .trustIcon{
  color:#82d8cf!important;
  border-color:rgba(102,191,188,.28)!important;
  background:linear-gradient(145deg,rgba(20,66,76,.82),rgba(8,33,46,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 20px rgba(0,7,15,.18)!important;
}
#home .trustStripPremium .trustKicker{color:#84cfc7!important;letter-spacing:.125em!important}
#home .trustStripPremium .trustCopy b{color:#f2f8fb!important;font-weight:820!important}
#home .trustStripPremium .trustCopy small{color:#93aab8!important}
#home .trustStripPremium .trustProof{
  border-color:rgba(107,176,183,.20)!important;
  color:#9fc3c6!important;
  background:rgba(12,42,54,.62)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
#home .trustStripPremium .trustProof i{
  background:#78d7c8!important;
  box-shadow:0 0 0 3px rgba(120,215,200,.08)!important;
}

/* ---------------------------------------------------------
   7. Result / shortlist cards
   --------------------------------------------------------- */
.savedShortlist,
.fullShortlist,
.result{
  background:linear-gradient(180deg,rgba(8,30,45,.955),rgba(6,25,38,.975))!important;
  box-shadow:var(--pv-shadow-soft),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
.savedShortlist:hover,
.result:hover{
  border-color:rgba(110,179,188,.34)!important;
}
.fullShortlist summary{
  color:#d8e5eb!important;
  font-weight:800!important;
}

/* ---------------------------------------------------------
   8. Product detail + comparison
   --------------------------------------------------------- */
#product-detail .detailPanel,
#product-detail .detailHero,
#compare .compareHero,
#compare .compareSection,
#compare .compareVerdict,
#compare .compareCard{
  background:linear-gradient(180deg,rgba(8,30,45,.96),rgba(6,25,38,.98))!important;
  border-color:rgba(107,161,181,.25)!important;
  box-shadow:0 18px 44px rgba(0,7,15,.18),inset 0 1px 0 rgba(255,255,255,.028)!important;
}
#compare .compareCard:hover{border-color:rgba(110,181,188,.36)!important}

/* ---------------------------------------------------------
   9. Guides / editorial cards
   --------------------------------------------------------- */
.rankcard,.hero>.panel{
  background:linear-gradient(180deg,rgba(9,31,45,.965),rgba(6,25,38,.985))!important;
  border-color:rgba(108,160,181,.24)!important;
  box-shadow:0 16px 40px rgba(0,7,15,.17),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.rankcard{transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease!important}
.rankcard:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(108,181,188,.36)!important;
  box-shadow:0 20px 48px rgba(0,7,15,.22),inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* ---------------------------------------------------------
   10. Motion restraint + mobile finish
   --------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  :where(.btn,.findBtn,.option,.rankcard,.trustItem){transition:none!important}
}

@media(max-width:780px){
  .hero21{box-shadow:0 20px 52px rgba(0,7,17,.25),inset 0 1px 0 rgba(255,255,255,.03)!important}
  .quickFinder{backdrop-filter:blur(14px) saturate(108%)!important}
  .btn,.findBtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 16px rgba(0,7,15,.12)!important}
  #home .trustStripPremium{box-shadow:0 16px 36px rgba(0,7,15,.18),inset 0 1px 0 rgba(255,255,255,.035)!important}
}