/* StremoTV — feature cards v2 (3D icon + colour glow + tilt) and the /offline page.
   Shared by index.html, features.html and offline.html. Plain CSS, no build step. */

/* ---------- feature card v2 ---------- */
.fcard{--c:#44d6ff;position:relative;overflow:hidden;border-radius:1.25rem;padding:1.5rem 6.6rem 1.5rem 1.5rem;
  background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.09);isolation:isolate;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .5s ease;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.fcard::before{content:"";position:absolute;z-index:-1;width:240px;height:240px;right:-70px;top:-80px;border-radius:50%;
  background:radial-gradient(circle,var(--c) 0%,transparent 68%);opacity:.32;transition:opacity .45s ease,transform .7s ease}
.fcard::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,80%) var(--my,0%),rgba(255,255,255,.07),transparent 45%);opacity:0;transition:opacity .3s}
.fcard h3{font-family:Sora,sans-serif;font-weight:600;color:#fff}
.fcard p{margin-top:.5rem;font-size:.875rem;line-height:1.55;color:#9aa4b8}
.fcard .f3d{position:absolute;right:14px;top:16px;width:84px;height:84px;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.fcard:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 26px 60px -26px color-mix(in srgb,var(--c) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent)}
.fcard:hover::before{opacity:.62;transform:scale(1.18)}
.fcard:hover::after{opacity:1}
.fcard:hover .f3d{transform:translateY(-6px) rotate(-7deg) scale(1.09)}
.fcard.no-js:hover{transform:perspective(1100px) rotateX(2deg) rotateY(-3deg) translateY(-5px)}
@media (max-width:480px){.fcard{padding-right:5.4rem}.fcard .f3d{width:66px;height:66px;right:10px;top:14px}}

/* big "bento" card (Offline) */
.fcard-hero{padding:1.75rem;display:grid;gap:1.5rem;align-items:center}
@media (min-width:1024px){.fcard-hero{grid-template-columns:1fr 1.15fr;padding:2rem}}
.fcard-hero .shot{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.8);transform:rotate(1.2deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fcard-hero:hover .shot{transform:rotate(0) translateY(-4px)}
.fcard-hero .shot img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;object-position:top}
.fcard-hero .f3d{position:static;width:72px;height:72px;margin-bottom:.75rem}
.new-pill{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 'Space Grotesk',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#ffd6de;padding:6px 10px;border-radius:999px;background:rgba(255,77,109,.16);border:1px solid rgba(255,77,109,.45)}
.new-pill i{width:7px;height:7px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 10px #ff4d6d;animation:npulse 1.8s ease-in-out infinite}
@keyframes npulse{50%{opacity:.35}}
.nav-new{display:inline-block;margin-left:5px;width:6px;height:6px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 8px #ff4d6d;vertical-align:super}

/* step cards ("3 simple steps") — fcard + big gradient number */
.fcard .stepno{font:800 2.4rem/1 Sora,sans-serif;letter-spacing:-.02em;margin-bottom:.6rem;
  background:linear-gradient(135deg,var(--c),#87e1ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- spec tiles ("Built for Performance") ---------- */
.spec{--c:#44d6ff;position:relative;overflow:hidden;isolation:isolate;border-radius:1rem;padding:1.1rem 1.15rem 1.2rem 4.5rem;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .35s ease}
.spec::before{content:"";position:absolute;z-index:-1;left:-40px;top:-50px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,var(--c) 0%,transparent 70%);opacity:.18;transition:opacity .35s ease}
.spec .sico{position:absolute;left:1rem;top:1.05rem;width:2.5rem;height:2.5rem;border-radius:.8rem;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 35%,#0b0f17));
  box-shadow:0 10px 22px -10px var(--c),inset 0 1px 0 rgba(255,255,255,.25)}
.spec .sico .material-symbols-outlined{font-size:1.3rem}
.spec .slabel{font:600 11px/1.2 'Space Grotesk',monospace;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 65%,#fff)}
.spec .pills{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.35rem}
.spec .pills span{font-size:.8rem;font-weight:500;line-height:1;padding:.38rem .6rem;border-radius:999px;color:#e6ebf5;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:border-color .3s ease,background .3s ease}
.spec:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 50%,transparent);
  box-shadow:0 20px 44px -24px color-mix(in srgb,var(--c) 75%,transparent)}
.spec:hover::before{opacity:.38}
.spec:hover .pills span{border-color:color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent)}

/* ---------- /offline page ---------- */
.device{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:#0b0f17;
  box-shadow:0 36px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(68,214,255,.06)}
.device video,.device img{display:block;width:100%;height:auto}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  font:800 15px/1 Sora,sans-serif;color:#0b0f17;background:linear-gradient(135deg,#44d6ff,#2f6bff)}
.shot-card{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0b0f17;
  box-shadow:0 20px 50px -22px rgba(0,0,0,.75)}
.shot-card img{display:block;width:100%;height:auto}
.avail td,.avail th{padding:.85rem 1rem;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;font-size:.9rem}
.avail th{font:600 12px/1 'Space Grotesk',monospace;letter-spacing:.12em;text-transform:uppercase;color:#87e1ff}
.avail tr:last-child td{border-bottom:0}
.yes{color:#4ade80;font-weight:600}.no{color:#9aa4b8}
.legal-note{font-size:12px;color:#9aa4b8;display:flex;gap:8px;align-items:flex-start}

@media (prefers-reduced-motion:reduce){
  .fcard,.fcard .f3d,.fcard::before,.fcard-hero .shot,.spec{transition:none!important;transform:none!important}
  .new-pill i{animation:none}
}