/*
  GENERATED FILE — do not edit directly.
  Built by scripts/build_css.py
  Theme: svicloudtvbox-lumen
  Bundle: Compare page
*/
.compare-page{background:linear-gradient(170deg,rgba(4,9,23,0.95) 0%,rgba(8,20,45,0.9) 55%,rgba(15,34,70,0.75) 100%);color:var(--lumen-text-primary);padding:0 clamp(20px,6vw,64px) clamp(56px,8vw,96px);display:grid;gap:clamp(var(--space-2xl),7vw,var(--space-3xl));overflow-x:hidden}
@media(max-width:600px){.compare-page{padding-top:env(safe-area-inset-top,0px);padding-left:calc(clamp(16px,5vw,22px)+env(safe-area-inset-left,0px));padding-right:calc(clamp(16px,5vw,22px)+env(safe-area-inset-right,0px));padding-bottom:calc(clamp(56px,8vw,96px)+env(safe-area-inset-bottom,0px))}
}
.compare-hero{position:relative;isolation:isolate;width:100vw;margin:0 calc(50% - 50vw);padding:clamp(12px,4.2vw,46px) 0 clamp(20px,4.6vw,52px);background:var(--gradient-lumen-hero);overflow:hidden}
@media(max-width:600px){.compare-hero{width:100%;margin-left:0;margin-right:0;padding-top:calc(clamp(26px,10vw,48px)+env(safe-area-inset-top,0px));padding-left:calc(clamp(16px,5vw,22px)+env(safe-area-inset-left,0px));padding-right:calc(clamp(16px,5vw,22px)+env(safe-area-inset-right,0px))}
}
.compare-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,12,30,0.78) 0%,rgba(4,15,32,0.34) 30%,rgba(4,12,30,0.8) 100%);pointer-events:none}
.compare-hero__inner{position:relative;z-index:2;width:min(1020px,calc(100% - clamp(32px,6vw,96px)));margin:0 auto}
@media(max-width:600px){.compare-hero__inner{width:min(520px,100%);margin:0 auto;padding:0}
.compare-hero__surface{padding:clamp(22px,7vw,30px) clamp(18px,5vw,24px)}
}
.compare-hero__surface{display:grid;gap:clamp(var(--space-lg),5vw,var(--space-2xl));padding:clamp(28px,6vw,52px);border-radius:var(--radius-hero);border:1px solid rgba(126,246,227,0.24);background:linear-gradient(160deg,rgba(8,22,48,0.86),rgba(6,18,40,0.92));box-shadow:0 28px 64px rgba(4,12,30,0.58);backdrop-filter:var(--glass-blur-soft);overflow:hidden}
.compare-hero__body{display:grid;gap:clamp(var(--space-sm),2.6vw,var(--space-lg));text-align:center;justify-items:center}
.compare-hero__body>*{justify-self:center}
@media(max-width:959px){.compare-hero__inner{gap:clamp(var(--space-xl),12vw,var(--space-3xl))}
.compare-hero__subtitle{margin:0 auto}
}
@media(min-width:960px){.compare-hero__body{text-align:left;justify-items:flex-start}
.compare-hero__body>*{justify-self:flex-start}
}
.compare-hero__badge{display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;border-radius:999px;border:1px solid rgba(126,246,227,0.34);background:rgba(10,26,52,0.64);backdrop-filter:var(--glass-blur-soft);letter-spacing:0.18em;font-size:0.8rem;text-transform:uppercase;color:rgba(226,240,255,0.9);box-shadow:0 18px 42px rgba(6,16,35,0.45);margin-top:0}
.compare-hero__title{font-family:var(--font-accent);font-size:clamp(2.3rem,4.2vw,3.5rem);letter-spacing:-0.018em;color:rgba(232,242,255,0.97);text-shadow:0 24px 54px rgba(6,16,35,0.68);margin:0;word-break:keep-all}
.compare-hero__subtitle{max-width:min(620px,var(--max-width-readable));margin:0;color:rgba(220,236,255,0.86);font-size:clamp(1rem,1.9vw,1.12rem);line-height:1.65;text-shadow:0 18px 46px rgba(5,14,32,0.58)}
.compare-hero__actions{display:flex;flex-wrap:wrap;gap:clamp(var(--space-xs),2vw,var(--space-sm));justify-content:center}
@media(min-width:960px){.compare-hero__actions{justify-content:flex-start}
}
.compare-hero__action{min-width:clamp(156px,22vw,210px);justify-content:center}
.compare-hero__highlights{display:flex;flex-wrap:wrap;gap:clamp(12px,3vw,20px);margin:0;padding:0;list-style:none;justify-content:center}
@media(min-width:960px){.compare-hero__highlights{justify-content:flex-start}
}
.compare-hero__highlight{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:var(--radius-lg);border:1px solid rgba(126,246,227,0.24);background:rgba(7,18,39,0.68);box-shadow:0 18px 38px rgba(4,12,30,0.48)}
.compare-hero__highlight-model{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:999px;font-size:0.74rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(6,18,36,0.96);background:linear-gradient(135deg,rgba(126,246,227,0.9),rgba(68,185,255,0.85));border:1px solid rgba(126,246,227,0.52);box-shadow:0 10px 24px rgba(34,168,232,0.45)}
.compare-hero__highlight-text{font-size:0.94rem;font-weight:500;color:rgba(224,238,255,0.92)}
.compare-hero__actions .lumen-pill--primary{background:linear-gradient(135deg,#7ef6e3 0%,#38b7ff 100%);color:#041327;box-shadow:0 16px 32px rgba(34,164,222,0.45);border:none}
.compare-hero__actions .lumen-pill--primary:hover,.compare-hero__actions .lumen-pill--primary:focus-visible{background:linear-gradient(135deg,#96f7ea 0%,#54c5ff 100%);box-shadow:0 18px 36px rgba(34,164,222,0.52);color:#041327}
.compare-hero__actions .lumen-pill--ghost{border-color:rgba(255,255,255,0.72);color:rgba(244,248,255,0.92);background:rgba(7,22,44,0.45)}
.compare-hero__actions .lumen-pill--ghost:hover,.compare-hero__actions .lumen-pill--ghost:focus-visible{border-color:rgba(255,255,255,0.88);background:rgba(9,28,56,0.62);color:rgba(255,255,255,0.98);box-shadow:0 18px 36px rgba(5,14,32,0.48)}
.compare-hero__devices{position:relative;display:grid;grid-auto-flow:column;align-items:end;justify-content:center;gap:clamp(10px,3vw,24px);padding:6px 0}
@media(min-width:960px){.compare-hero__devices{justify-content:flex-start}
}
.compare-hero__device{width:clamp(240px,36vw,420px);height:auto;filter:drop-shadow(0 18px 46px rgba(5,14,34,0.55));transition:transform var(--transition-normal),filter var(--transition-normal)}
.compare-hero__device--10p{transform:translateY(6px) rotate(-4deg)}
.compare-hero__device--10s{transform:translateY(0) rotate(5deg)}
.compare-hero__devices:hover .compare-hero__device--10p,.compare-hero__devices:focus-within .compare-hero__device--10p{transform:translateY(2px) rotate(-2.5deg) scale(1.015)}
.compare-hero__devices:hover .compare-hero__device--10s,.compare-hero__devices:focus-within .compare-hero__device--10s{transform:translateY(-2px) rotate(3deg) scale(1.02)}
.compare-hero__background{position:absolute;top:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);z-index:0;pointer-events:none;overflow:hidden}
@media(max-width:600px){.compare-hero__background{left:0;width:100%;transform:none}
}
.compare-hero__photo{position:absolute;inset:-12% -18% -10%;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:saturate(1.02) contrast(1.04);opacity:0.42}
.compare-hero__photo--primary{background-image:linear-gradient(160deg,rgba(5,15,34,0.58),rgba(5,15,34,0.82)),url('../images/svicloud-10p-plus-lifestyle-2.png');background-image:linear-gradient(160deg,rgba(5,15,34,0.58),rgba(5,15,34,0.82)),image-set(url('../images/svicloud-10p-plus-lifestyle-2.webp') type('image/webp'),url('../images/svicloud-10p-plus-lifestyle-2.png') type('image/png'))}
.compare-hero__photo--secondary{background-image:url('../images/svicloud-10s-lifestyle-1.png');background-image:image-set(url('../images/svicloud-10s-lifestyle-1.webp') type('image/webp'),url('../images/svicloud-10s-lifestyle-1.png') type('image/png'));mix-blend-mode:screen;opacity:0.2;transform:scale(1.08) translate(4%,-4%)}
.compare-hero__gradient{position:absolute;border-radius:999px;filter:blur(140px);opacity:0.65;mix-blend-mode:screen;animation:compareHeroDrift 22s ease-in-out infinite alternate}
.compare-hero__gradient--teal{width:clamp(300px,44vw,520px);height:clamp(300px,44vw,520px);top:-12%;left:-18%;background:radial-gradient(circle,rgba(126,246,227,0.68) 0%,rgba(126,246,227,0) 70%)}
.compare-hero__gradient--iris{width:clamp(260px,40vw,480px);height:clamp(260px,40vw,480px);bottom:-16%;right:-14%;background:radial-gradient(circle,rgba(143,150,255,0.55) 0%,rgba(143,150,255,0) 70%);animation-duration:28s;animation-delay:-5s}
.compare-hero__gradient--amber{width:clamp(220px,32vw,420px);height:clamp(220px,32vw,420px);top:30%;right:12%;background:radial-gradient(circle,rgba(255,185,99,0.42) 0%,rgba(255,185,99,0) 68%);animation-duration:24s;animation-delay:-11s}
.compare-hero__mesh{position:absolute;inset:-28%;background-image:linear-gradient(115deg,rgba(143,150,255,0.12) 0%,transparent 55%),linear-gradient(-120deg,rgba(126,246,227,0.16) 10%,transparent 58%),radial-gradient(circle at 18% 22%,rgba(143,150,255,0.18),transparent 62%);opacity:0.45;mix-blend-mode:screen;animation:compareHeroMesh 34s linear infinite}
@keyframes compareHeroDrift{0%{transform:translate3d(0,0,0) scale(1);opacity:0.6}
50%{transform:translate3d(10px,-16px,0) scale(1.06);opacity:0.78}
100%{transform:translate3d(-14px,14px,0) scale(0.98);opacity:0.65}
}
@keyframes compareHeroMesh{0%{transform:rotate(0deg) scale(1)}
50%{transform:rotate(6deg) scale(1.04)}
100%{transform:rotate(0deg) scale(1)}
}
@media(max-width:959px){.compare-hero__media{max-width:340px}
}
@media(max-width:599px){.compare-hero{padding-bottom:calc(clamp(26px,10vw,48px)+env(safe-area-inset-bottom,0px))}
.compare-hero__metrics{justify-content:center}
.compare-hero__metric{min-width:clamp(180px,82vw,260px)}
.compare-hero__photo{inset:-22% -28% -18%;opacity:0.34}
.compare-hero__devices{grid-auto-flow:row;justify-content:center;justify-items:center;gap:6px}
.compare-hero__device--10p,.compare-hero__device--10s{transform:translateY(0) rotate(0deg)}
.compare-hero__device{width:clamp(160px,88vw,320px)}
.compare-hero__title{font-size:clamp(1.9rem,7vw,2.3rem);word-break:break-word;overflow-wrap:anywhere}
}
.compare-differences__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(var(--space-md),4vw,var(--space-lg))}
.compare-difference-card{position:relative;padding:clamp(22px,4vw,28px);border-radius:var(--radius-xl);border:1px solid rgba(126,246,227,0.18);background:rgba(7,18,44,0.78);backdrop-filter:var(--glass-blur-soft);display:grid;gap:12px;box-shadow:0 24px 60px rgba(6,18,40,0.48)}
.compare-difference-card::after{content:"";position:absolute;inset:auto 18px 18px auto;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(126,246,227,0.32),transparent 70%);filter:blur(16px);opacity:0.4}
.compare-difference-card__model{position:absolute;top:16px;right:16px;padding:6px 12px;border-radius:999px;font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;background:rgba(126,246,227,0.16);border:1px solid rgba(126,246,227,0.32);color:rgba(232,242,255,0.9)}
.compare-difference-card--10s .compare-difference-card__model{background:rgba(143,150,255,0.16);border-color:rgba(143,150,255,0.32)}
.compare-difference-card__title{margin:36px 0 0;color:rgba(232,242,255,0.94);font-size:1.2rem;letter-spacing:-0.01em}
.compare-difference-card__copy{margin:0;color:rgba(214,232,255,0.82);line-height:1.6}
.compare-products__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(var(--space-lg),5vw,var(--space-xl));max-width:clamp(640px,80vw,1080px);margin:0 auto}
.compare-product-card{border-radius:var(--radius-2xl);border:1px solid rgba(126,246,227,0.16);background:rgba(7,18,44,0.8);backdrop-filter:var(--glass-blur-strong);box-shadow:0 30px 80px rgba(6,18,44,0.5);display:grid;gap:20px;overflow:hidden;min-height:520px}
.compare-product-card--highlight{border-color:rgba(126,246,227,0.3);box-shadow:0 34px 90px rgba(8,22,52,0.6)}
.compare-product-card__media{position:relative;display:grid;place-items:center;padding:clamp(6px,1.2vw,10px);border-bottom:1px solid rgba(126,246,227,0.18);background:linear-gradient(180deg,rgba(10,26,54,0.86) 0%,rgba(6,18,40,0.92) 100%);aspect-ratio:4 / 3}
.compare-product-card__media img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 44px rgba(5,14,34,0.55));transform:translateZ(0);transition:transform var(--transition-normal),filter var(--transition-normal)}
.compare-product-card:hover .compare-product-card__media img,.compare-product-card:focus-within .compare-product-card__media img{transform:translateY(-2px) scale(1.02);filter:drop-shadow(0 22px 54px rgba(5,14,34,0.6))}
.compare-product-card__header{display:grid;gap:16px;padding:clamp(26px,4vw,34px);background:linear-gradient(145deg,rgba(18,44,80,0.92),rgba(24,56,98,0.7))}
.compare-product-card--highlight .compare-product-card__header{background:linear-gradient(150deg,rgba(18,44,72,0.95),rgba(22,64,102,0.72))}
.compare-product-card__title{margin:0;color:rgba(232,242,255,0.95);font-size:1.6rem;letter-spacing:-0.01em}
.compare-product-card__price{margin:0;font-size:2rem;font-weight:600;color:rgba(126,246,227,0.86);text-shadow:0 20px 46px rgba(6,18,35,0.55)}
.compare-product-card__lead{margin:0;color:rgba(214,232,255,0.84);line-height:1.65}
.lumen-pill--ghost{color:#03111f;border:none;background:var(--lumen-accent-teal);box-shadow:0 20px 42px rgba(94,230,208,0.4);transition:transform var(--transition-normal),box-shadow var(--transition-normal),filter var(--transition-normal)}
.lumen-pill--ghost:hover,.lumen-pill--ghost:focus-visible{transform:translateY(-2px);box-shadow:0 26px 58px rgba(94,230,208,0.5);filter:brightness(1.02)}
.compare-product-card__list{list-style:none;margin:0;padding:clamp(22px,4vw,28px);display:grid;gap:16px;color:var(--lumen-text-feature)}
.compare-product-card__list li{position:relative;padding-left:28px;color:var(--lumen-text-feature);line-height:1.68;font-size:0.98rem;text-shadow:0 16px 40px rgba(6,16,35,0.52)}
.compare-product-card__list li::before{content:'';position:absolute;top:10px;left:0;width:16px;height:16px;border-radius:50%;border:1px solid var(--lumen-bullet-border);background:var(--lumen-bullet-gradient);box-shadow:var(--lumen-bullet-shadow)}
.compare-product-card--highlight .compare-product-card__list li::before{background:var(--lumen-bullet-gradient-strong);box-shadow:var(--lumen-bullet-shadow-strong)}
.compare-product-card__divider{margin:clamp(18px,4vw,26px) clamp(24px,5vw,36px) 0;height:1px;background:linear-gradient(90deg,transparent,rgba(126,246,227,0.35),transparent);border:none;opacity:0.6}
.compare-product-card__comparison{padding:clamp(18px,4vw,28px) clamp(24px,5vw,36px) clamp(26px,5vw,36px);display:grid;gap:clamp(16px,3vw,24px);background:linear-gradient(180deg,rgba(7,20,48,0.78) 0%,rgba(5,14,32,0.9) 100%);border-radius:0 0 var(--radius-2xl) var(--radius-2xl);border-top:1px solid rgba(126,246,227,0.24);box-shadow:inset 0 24px 48px rgba(4,12,30,0.56)}
.compare-product-card__comparison-title{margin:0;font-size:0.86rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(224,240,255,0.9)}
.compare-product-card__comparison-list{display:grid;gap:clamp(14px,3vw,20px)}
.compare-product-card__comparison-item{display:grid;gap:8px;padding:16px 18px;border-radius:var(--radius-lg);border:1px solid var(--lumen-border-accent-soft);background:rgba(10,28,60,0.82);box-shadow:0 20px 40px rgba(5,14,34,0.5);transition:border-color var(--transition-normal),background var(--transition-normal),box-shadow var(--transition-normal)}
.compare-product-card__comparison-item dt{margin:0;font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(224,240,255,0.85);font-weight:600}
.compare-product-card__comparison-item dd{margin:0;font-size:1.02rem;line-height:1.65;color:rgba(236,246,255,0.98)}
.compare-product-card__comparison-item.is-highlight{border-color:rgba(126,246,227,0.45);background:linear-gradient(160deg,rgba(16,54,92,0.92),rgba(6,22,44,0.88));box-shadow:0 24px 52px rgba(6,18,44,0.6)}
@media(max-width:720px){.compare-product-card__media{aspect-ratio:4 / 3;padding:8px 10px 4px}
.compare-product-card__media img{width:100%}
.compare-product-card__divider{margin:16px 18px 0}
.compare-product-card__comparison{border-radius:0 0 var(--radius-xl) var(--radius-xl);padding:18px 18px 24px;gap:16px}
.compare-product-card__comparison-item{padding:14px 14px}
.compare-product-card__comparison-item dd{font-size:0.98rem}
}
@media(max-width:540px){.compare-product-card__media{aspect-ratio:4 / 3;padding:6px 8px 4px}
.compare-product-card__media img{width:100%}
.compare-product-card__comparison{border-radius:0 0 var(--radius-xl) var(--radius-xl);padding:18px 18px 24px}
.compare-product-card__comparison-item{padding:12px 12px}
.compare-product-card__comparison-item dd{font-size:0.95rem}
}
.compare-final-cta{position:relative;margin-top:clamp(var(--space-2xl),8vw,var(--space-3xl));display:flex;justify-content:center;padding:clamp(24px,5vw,40px) 0}
.compare-final-cta::before{content:;position:absolute;inset:auto 10% -18%;height:clamp(220px,36vw,320px);border-radius:50%;background:radial-gradient(circle at center,rgba(126,246,227,0.28),transparent 70%);filter:blur(60px);opacity:0.6;pointer-events:none}
.compare-final-cta{position:relative;margin-top:clamp(var(--space-3xl),10vw,var(--space-4xl));display:flex;justify-content:center;padding:clamp(32px,8vw,56px) 0}
.compare-final-cta::before{content:;position:absolute;inset:auto 8% -30%;height:clamp(260px,40vw,380px);border-radius:50%;background:radial-gradient(circle at center,rgba(126,246,227,0.24),transparent 70%);filter:blur(70px);opacity:0.55;pointer-events:none}
.compare-final-cta__inner{position:relative;z-index:1;max-width:clamp(760px,80vw,1040px);width:100%;border-radius:calc(var(--radius-2xl)+8px);border:1px solid rgba(126,246,227,0.18);background:linear-gradient(140deg,rgba(10,26,54,0.95) 0%,rgba(5,14,34,0.94) 100%);box-shadow:0 44px 120px rgba(6,18,46,0.6),inset 0 1px 0 var(--lumen-border-accent-soft);padding:clamp(36px,7vw,64px);display:grid;gap:clamp(20px,4vw,32px);justify-items:center;text-align:center;overflow:hidden}
.compare-final-cta__inner::before,.compare-final-cta__inner::after{content:;position:absolute;border-radius:999px;filter:blur(40px);opacity:0.5;pointer-events:none}
.compare-final-cta__inner::before{inset:-40% 18% auto;height:clamp(210px,32vw,280px);background:radial-gradient(circle at center,rgba(94,230,208,0.18),transparent 70%)}
.compare-final-cta__inner::after{inset:auto 28% -45%;height:clamp(220px,34vw,300px);background:radial-gradient(circle at center,rgba(144,160,255,0.16),transparent 70%)}
.compare-final-cta__badge{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:999px;border:1px solid rgba(214,232,255,0.24);letter-spacing:0.22em;font-size:0.8rem;text-transform:uppercase;color:rgba(224,236,255,0.82);background:rgba(10,32,64,0.55);box-shadow:0 16px 36px rgba(6,18,44,0.45)}
.compare-final-cta__title{margin:0;font-family:var(--font-accent);font-size:clamp(2.4rem,4.8vw,3.4rem);letter-spacing:-0.018em;color:rgba(236,246,255,0.97);text-shadow:0 28px 64px rgba(4,12,32,0.75)}
.compare-final-cta__copy{margin:0;max-width:640px;color:rgba(210,230,255,0.78);font-size:1.1rem;line-height:1.85}
.compare-final-cta__actions{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,22px);justify-content:center}
.compare-final-cta__actions .lumen-pill{min-width:min(220px,45vw);box-shadow:0 26px 80px rgba(94,230,208,0.45);transition:transform var(--transition-normal),box-shadow var(--transition-normal),filter var(--transition-normal)}
.compare-final-cta__actions .lumen-pill:hover,.compare-final-cta__actions .lumen-pill:focus-visible{transform:translateY(-4px);box-shadow:0 36px 110px rgba(94,230,208,0.6);filter:brightness(1.08)}
@media(max-width:520px){.compare-final-cta{padding:28px 0}
.compare-final-cta__badge{letter-spacing:0.18em;font-size:0.72rem}
.compare-final-cta__copy{font-size:1rem}
}