:root{--pink:#D50069;--turq:#39C7CE;--blue:#222753;--max:1140px}
.tu-wrap{max-width:var(--max);margin:0 auto;padding:0 10px}
.tu-hero{position:relative;background:#000;background-position:center;background-size:cover;background-repeat:no-repeat;margin-top:0;padding:clamp(28px,5vw,56px) 0}
.tu-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.9)}
.tu-hero .inner{position:relative;z-index:1;text-align:center}
.tu-hero h1{margin:0 0 12px 0;line-height:1.15;font-weight:800;font-size:clamp(28px,4vw,48px);color:#fff}
.tu-hero .fx-grad{background:linear-gradient(90deg,#fff 0%,var(--pink) 25%,var(--turq) 50%,#fff 75%,#fff 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:uppdatera-hemsida-title-sheen 8s linear infinite}
.tu-hero .fx-underline{position:relative}
.tu-hero .fx-underline::after{content:"";position:absolute;left:0;right:0;margin:0 auto;bottom:-6px;height:3px;width:100%;max-width:90%;background:linear-gradient(90deg,var(--pink),#fff,var(--turq));background-size:200% 100%;animation:uppdatera-hemsida-underline-move 6s linear infinite;border-radius:3px}
.tu-hero .lead{color:#fff;font-size:20px;line-height:1.7;text-shadow:1px 1px 1px rgba(0,0,0,.25);margin:0}
@keyframes uppdatera-hemsida-title-sheen{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes uppdatera-hemsida-underline-move{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.tu-info{background:#F9F9F9;padding:40px 0}
.tu-info .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.tu-info .img img{width:100%;height:auto;border-radius:16px;box-shadow:0 12px 24px rgba(0,0,0,.15)}
.tu-info h2{margin:0 0 8px 0;font-size:clamp(22px,3.2vw,34px);font-weight:800;color:#fff;background:#000;padding:12px 16px;border-radius:10px;display:inline-block;text-shadow:none}
.tu-info h2 .hl{background:linear-gradient(180deg,var(--pink) 0%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;color:#fff}
.tu-info p{margin:8px 0 0 0;font-size:18px;line-height:1.7}
.tu-compare{padding:20px 0 56px}
.tu-compare .head{text-align:center;margin:0 0 20px 0}
.tu-compare .head h3{margin:0 0 8px 0;font-size:clamp(24px,3.4vw,40px);font-weight:800}
.tu-compare .head p{margin:0;font-size:18px;color:#374151}
.tu-compare .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ba-card{background:linear-gradient(180deg,#0b0b0b 0%,#111 100%);border:1px solid #1f2937;border-radius:20px;box-shadow:0 10px 24px rgba(0,0,0,.28);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.ba-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.ba-slider{--pos:50%;position:relative;width:100%;height:var(--h,520px);overflow:hidden;background:#000}
.ba-img{position:absolute;inset:0;margin:0}
.ba-img img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#000}
.ba-before{z-index:1}
.ba-after{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;z-index:3;top:0;bottom:0;left:var(--pos);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;cursor:ew-resize;touch-action:none}
.ba-line{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.ba-knob{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);border:2px solid #e5e7eb}
.ba-handle:focus .ba-knob{outline:3px solid #39C7CE;outline-offset:2px}
.tu-badge{position:absolute;top:12px;left:12px;background:rgba(17,24,39,.6);backdrop-filter:saturate(160%) blur(4px);-webkit-backdrop-filter:saturate(160%) blur(4px);color:#fff;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ba-after .tu-badge{left:auto;right:12px}
.tu-tag{display:block;text-align:center;color:#e5e7eb;padding:12px 0 14px;font-size:13px;letter-spacing:.12em;opacity:.9}
@media (max-width:1100px){.tu-compare .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.tu-info .grid{grid-template-columns:1fr}}
@media (max-width:700px){.tu-compare .grid{grid-template-columns:1fr}}