/* ============================================================
   Video Repair family pages (/videorepair/ Android, /videorepair-windows/)
   in the look of Video Repair Online (/tools/video-repair/): navy hero with
   the grid, heavy system type, pill buttons, white 22px cards.
   Loaded after each page's own <style>; everything is scoped to body.vrf.
   ============================================================ */
body.vrf{
  --vr-ink:#101622; --vr-soft:#5b6479; --vr-line:#e3e8f2; --vr-bg:#f6f8fc;
  --vr-volt:#3d8bff; --vr-volt2:#7cc4ff; --vr-coral:#1a6fe0;
  --vr-sh:0 1px 2px rgba(16,22,34,.04),0 8px 24px rgba(16,22,34,.06);
  --vr-sh2:0 14px 36px rgba(16,22,34,.10);
  --vr-ease:cubic-bezier(.2,.8,.2,1);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Cairo","Tajawal",sans-serif;
  color:var(--vr-ink); background:var(--vr-bg);
}

/* ---------- product bar: brand + Online · Android · Windows ---------- */
.vrf .nav{background:rgba(255,255,255,.92); border-bottom:1px solid var(--vr-line)}
.vrf .nav .brand{color:var(--vr-ink); font-weight:800; letter-spacing:-.01em}
.vrf .nav .links a{color:var(--vr-soft)}
.vrf .nav .links a:hover{color:var(--vr-ink)}
.vrf-switch{display:inline-flex; gap:3px; padding:4px; border-radius:999px; background:#eef2f9; border:1px solid var(--vr-line)}
.vrf .vrf-switch a{padding:.38rem .85rem; border-radius:999px; font-size:.84rem; font-weight:700; color:var(--vr-soft); white-space:nowrap}
.vrf .vrf-switch a:hover{color:var(--vr-ink)}
.vrf .vrf-switch a[aria-current="page"]{background:#fff; color:var(--vr-ink); box-shadow:0 2px 8px rgba(16,22,34,.10)}
@media(max-width:860px){ .vrf .nav .links a.hide-sm{display:none} }
@media(max-width:560px){
  .vrf .nav .brand .bt{display:none}
  .vrf .nav .links{gap:12px}
  .vrf .vrf-switch a{padding:.36rem .62rem; font-size:.8rem}
}

/* ---------- hero ---------- */
.vrf .hero{position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:radial-gradient(900px 520px at 6% 108%,#0f2656 0%,transparent 60%),
             radial-gradient(700px 420px at 92% -10%,rgba(61,139,255,.28) 0%,transparent 65%),
             linear-gradient(180deg,#09152a 0%,#071123 60%,#060e20 100%)}
.vrf .hero::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.35;
  background-image:linear-gradient(rgba(124,196,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(124,196,255,.08) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(ellipse 60% 80% at 30% 40%,#000 20%,transparent 75%)}
.vrf .hero h1{font-size:clamp(2.2rem,5vw,3.5rem); line-height:1.05; letter-spacing:-.035em; font-weight:850}
.vrf .hero .grid2 h1{font-size:clamp(2.1rem,3.4vw,2.85rem)}
.vrf .hero h1 span{background:linear-gradient(95deg,#7cc4ff 0%,#3d8bff 45%,#b8dcff 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.vrf .hero .head{font-weight:800; letter-spacing:-.02em; color:#cfe0ff}
.vrf .hero .sub{color:#a9bbd8; opacity:1}
.vrf .hero .sub b{color:#fff}
.vrf .hero .icon{background:none; box-shadow:0 14px 40px rgba(61,139,255,.35)}

/* buttons: the tool page's pills */
.vrf .btn{border-radius:999px; padding:.95rem 1.5rem; font-weight:700; line-height:1.1;
  transition:transform .2s var(--vr-ease),box-shadow .2s var(--vr-ease),background .2s}
.vrf .btn-store{color:#fff; border-color:transparent;
  background:linear-gradient(100deg,#2f7df6 0%,#1a5fd6 55%,#1347b8 100%);
  box-shadow:0 10px 30px rgba(47,125,246,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.vrf .btn-store:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(47,125,246,.45)}
.vrf .btn-ghost{color:#eaf2ff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18)}
.vrf .btn-ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-2px)}
.vrf .store-note{color:#a9bbd8; opacity:1}
.vrf .store-note a{color:var(--vr-volt2); text-decoration:underline; text-underline-offset:2px; font-weight:600}
.vrf .store-note a:hover{color:#fff}
.vrf .hero .shot img{border-radius:18px; border:1px solid rgba(124,196,255,.22); box-shadow:0 30px 80px rgba(0,0,0,.5)}

/* ---------- sections ---------- */
.vrf section.block{padding:clamp(3.5rem,8vw,5.5rem) 0}
.vrf h2.sec{font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:800; letter-spacing:-.025em; line-height:1.12; color:var(--vr-ink)}
.vrf p.sec-sub{color:var(--vr-soft); font-size:1.05rem}

/* cards */
.vrf .feat,.vrf .step,.vrf .review,.vrf .price,.vrf .plan,.vrf .faq details{
  background:#fff; border:1px solid var(--vr-line); border-radius:22px; box-shadow:var(--vr-sh);
  transition:transform .25s var(--vr-ease),box-shadow .25s var(--vr-ease),border-color .25s}
.vrf .feat:hover,.vrf .step:hover,.vrf .review:hover{transform:translateY(-3px); box-shadow:var(--vr-sh2); border-color:rgba(61,139,255,.35)}
.vrf .feat,.vrf .step{padding:1.5rem 1.4rem}
.vrf .feat h3,.vrf .step h3,.vrf .plan h3{font-weight:800; letter-spacing:-.01em}
.vrf .feat p,.vrf .step p{color:var(--vr-soft)}
.vrf .feat .em{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; margin-bottom:14px;
  color:#1a5fd6; background:linear-gradient(135deg,#eaf2ff,#d6e6ff); font-size:0}
.vrf .feat .em svg{width:24px; height:24px}
.vrf .step .n{width:34px; height:34px; color:#fff; background:linear-gradient(135deg,#3d8bff,#1347b8);
  box-shadow:0 6px 16px rgba(47,125,246,.3)}

/* lists */
.vrf .toolkit li::before,.vrf .trust .check{color:#22a45d}
.vrf .limits{background:linear-gradient(180deg,#fff8f1,#fff); border-color:#f3e3d3}
.vrf .trust{background:linear-gradient(180deg,#eef4ff,#f6f8fc); border-color:var(--vr-line)}
.vrf .pill{background:#fff; color:#1a5fd6; border:1px solid #d6e6ff}

/* price / plans */
.vrf .price{padding:2.2rem 2rem}
.vrf .price .free{font-size:1.5rem; letter-spacing:-.02em}
.vrf .plan{padding:1.8rem 1.6rem}
.vrf .plan.hi{border:1.5px solid rgba(61,139,255,.6); background:linear-gradient(180deg,#f3f8ff,#fff); box-shadow:0 18px 50px rgba(47,125,246,.16)}
.vrf .plan .badge{background:linear-gradient(90deg,#22c55e,#a3e635); color:#0b2b12; font-weight:800}
.vrf .plan .p{font-weight:850; letter-spacing:-.04em}

/* screenshots */
.vrf .shots img{border-radius:18px; border:1px solid var(--vr-line); box-shadow:var(--vr-sh2)}

/* faq */
.vrf .faq details{padding:1.1rem 1.3rem}
.vrf .faq details[open]{box-shadow:var(--vr-sh2)}
.vrf .faq summary{font-weight:750}
.vrf .faq summary::after{color:var(--vr-volt)}

/* the product's own footer strip */
.vrf footer:not(.nt-footer){background:#081530}
.vrf footer:not(.nt-footer) a{color:var(--vr-volt2)}