/* irecovery.pro — the same dark look as the app: soft gradient backdrop, glass cards, blue-violet accent. */
:root {
  --bg: #0e0f16;
  --card: rgba(34, 36, 48, 0.62);
  --card-strong: rgba(40, 42, 56, 0.9);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f1f2f6;
  --text-2: #a6aabb;
  --text-3: #767b8e;
  --accent: #4b80ff;
  --accent-2: #7d63ff;
  --green: #45c983;
  --radius: 18px;
  --font: -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
  --display: -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* A class with display beats the hidden attribute: the apps search hides tiles with it. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* The app's backdrop: three soft colour blobs behind everything. */
body::before {
  content: ""; position: fixed; inset: -20vh -20vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 15% 10%, rgba(35, 58, 138, 0.55), transparent 70%),
    radial-gradient(38vw 38vw at 90% 15%, rgba(63, 42, 134, 0.5), transparent 70%),
    radial-gradient(45vw 45vw at 50% 100%, rgba(15, 77, 107, 0.45), transparent 70%);
}
img { max-width: 100%; height: auto; }
a { color: #7ea3ff; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }

/* --- header ------------------------------------------------------------------------------------- */
.top { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(14, 15, 22, 0.72); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font: 700 18px var(--display); }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.nav a { color: var(--text-2); position: relative; transition: color 0.2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transition: transform 0.25s; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a:hover::after { transform: scaleX(1); }
.top .btn { padding: 9px 16px; font-size: 14px; }
@media (max-width: 820px) { .nav { display: none; } .top .btn { margin-left: auto; } }

/* --- buttons -------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 14px;
  font: 600 16px var(--font); color: #fff; border: 0; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 28px rgba(75, 128, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 34px rgba(75, 128, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn svg { width: 20px; height: 20px; }
.btn-ghost { background: var(--card); box-shadow: none; border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { box-shadow: none; background: var(--card-strong); }

/* --- sections ------------------------------------------------------------------------------------- */
section { padding: 72px 0; }
.section-head { max-width: 680px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.section-head p { color: var(--text-2); margin: 0; font-size: 17px; }
.card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s, background-color 0.28s, box-shadow 0.28s;
}
/* Glass light that follows the pointer (site.js sets --mx/--my). */
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(126, 163, 255, 0.13), transparent 62%);
}
@media (hover: hover) {
  .card:hover::after { opacity: 1; }
  .step:hover, .price:hover, .cta:hover {
    transform: translateY(-4px); background-color: var(--card-strong); border-color: rgba(126, 163, 255, 0.32);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  }
  .app:hover { transform: translateY(-3px) scale(1.04); background-color: var(--card-strong); border-color: rgba(126, 163, 255, 0.3);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36); }
  .app:hover img, .app:hover .noicon { transform: scale(1.08); }
  .faq details:hover { border-color: var(--line-strong); background-color: var(--card-strong); }
  .shot:hover { transform: translateY(-4px) scale(1.012); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(126, 163, 255, 0.18); }
  .chip:hover { border-color: rgba(126, 163, 255, 0.5); color: var(--text); }
  .step:hover .ico { transform: scale(1.08) rotate(-4deg); }
}
.price.free:hover { border-color: rgba(69, 201, 131, 0.6); }

/* Blocks ease in as they come into view (site.js); without the script, or with reduced motion, they just stand. */
.reveal-ready .reveal { opacity: 0; translate: 0 18px;
  /* The hover transitions of cards and pictures are kept here: this rule replaces their own transition list. */
  transition: opacity 0.6s ease var(--delay, 0ms), translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0ms),
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s, background-color 0.28s, box-shadow 0.28s; }
.reveal-ready .reveal.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- hero ----------------------------------------------------------------------------------------- */
/* Text on the left, the whole app window on the right, inside the page. The page is wider here than elsewhere and
   the text column narrow, so the window gets about 800 px. */
.hero { padding: 64px 0 56px; }
.hero .wrap { width: min(1320px, 100% - 48px); display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 60px; align-items: center; }
.hero h1 { font-size: clamp(32px, 3.5vw, 48px); margin-bottom: 18px; }
.hero h1 em { font-style: normal; background: linear-gradient(135deg, #7ea3ff, #a78bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { color: var(--text-2); font-size: 18px; margin: 0 0 28px; max-width: 520px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .meta { margin-top: 14px; color: var(--text-3); font-size: 14px; }
.hero .meta b { color: var(--green); font-weight: 600; }
.hero-shot { position: relative; }
/* A soft light behind the window, in the accent colours. */
.hero-shot::before { content: ""; position: absolute; inset: 10% 4% 0 6%; z-index: -1; border-radius: 40px; filter: blur(60px);
  background: linear-gradient(135deg, rgba(75, 128, 255, 0.45), rgba(125, 99, 255, 0.4)); }
.shot { border-radius: 14px; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); display: block;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s; }
.hero-img { width: 100%; max-width: 820px; margin-left: auto; border-radius: 16px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(126, 163, 255, 0.12); }
@media (hover: hover) { .hero-img:hover { transform: none; } }
@media (max-width: 900px) {
  .hero { padding-top: 40px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero-img { max-width: 100%; }
}
/* On a phone the exe is of no use: say where to download it. */
.phone-note { display: none; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; }
@media (max-width: 640px) { .phone-note { display: block; } }

/* --- steps ---------------------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step { padding: 26px; position: relative; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 22px; right: 24px;
  font: 700 44px var(--display); color: rgba(255, 255, 255, 0.06); }
.step .ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; transition: transform 0.3s;
  background: linear-gradient(135deg, rgba(75, 128, 255, 0.25), rgba(125, 99, 255, 0.25)); color: #9db8ff; }
.step .ico svg { width: 24px; height: 24px; }
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { margin: 0; color: var(--text-2); font-size: 15px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* --- apps ----------------------------------------------------------------------------------------- */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.app { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 14px; text-align: center; }
.app img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.app .noicon { width: 56px; height: 56px; border-radius: 13px; display: grid; place-items: center; background: var(--card-strong);
  color: var(--text-2); font: 700 22px var(--display); transition: transform 0.28s; }
.app span { font-size: 13.5px; line-height: 1.3; color: var(--text); }
.app small { font-size: 12px; color: var(--text-3); line-height: 1.3; }
.apps-more { margin-top: 22px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; color: var(--text-2); }

/* catalog page filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.search { flex: 1 1 280px; padding: 13px 16px; border-radius: 13px; border: 1px solid var(--line-strong); background: var(--card);
  color: var(--text); font: 16px var(--font); outline: none; }
.search:focus { border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  font: 500 14px var(--font); cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.empty { color: var(--text-3); padding: 30px 0; display: none; }

/* --- pricing -------------------------------------------------------------------------------------- */
.prices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.price { padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.price .n { font: 700 18px var(--display); }
.price .sum { font: 700 32px var(--display); letter-spacing: -0.02em; }
.price .each { color: var(--text-3); font-size: 14px; }
.price.free { border-color: rgba(69, 201, 131, 0.45); background: linear-gradient(160deg, rgba(69, 201, 131, 0.14), var(--card)); }
.price.free .sum { color: var(--green); }
.price.best { border-color: rgba(125, 99, 255, 0.55); }
.tag { position: absolute; top: -11px; right: 16px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(125, 99, 255, 0.25); color: #c4b5ff; }
.note { margin-top: 22px; color: var(--text-2); font-size: 15px; }
@media (max-width: 980px) { .prices { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .prices { grid-template-columns: 1fr; } }

/* --- FAQ ------------------------------------------------------------------------------------------ */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { padding: 4px 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 13px; font-size: 24px; color: var(--text-3); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p, .faq details ol, .faq details ul { margin: 0 0 16px; color: var(--text-2); }
.faq details li { margin: 4px 0; }

/* --- install guide, terms -------------------------------------------------------------------------- */
.page { padding: 56px 0 72px; }
.page h1 { font-size: clamp(32px, 4.5vw, 46px); margin-bottom: 14px; }
.page .lead { color: var(--text-2); font-size: 18px; max-width: 720px; margin: 0 0 40px; }
/* The install guide: one row per step, the text and a picture side by side, sides taking turns. */
.install-head { max-width: 760px; margin-bottom: 44px; }
.install-head .lead { margin-bottom: 26px; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.flow-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px; align-items: center; padding: 38px 40px; }
.flow-step:nth-child(even) .flow-visual { order: -1; }
.flow-text .num { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  font: 700 20px var(--display); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 24px rgba(75, 128, 255, 0.35); }
.flow-text h2 { font-size: 26px; margin-bottom: 12px; }
.flow-text p { color: var(--text-2); margin: 0; font-size: 16.5px; }
.flow-visual { display: flex; justify-content: center; }
.flow-visual .shot { max-width: 100%; }
@media (hover: hover) { .flow-step:hover { border-color: rgba(126, 163, 255, 0.26); background-color: var(--card-strong); } }
@media (max-width: 860px) {
  .flow-step { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; }
  .flow-step:nth-child(even) .flow-visual { order: 0; }
}
.kbd { display: inline-block; padding: 1px 8px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--card-strong);
  color: var(--text); font-size: 14px; white-space: nowrap; }

/* Drawn pictures of what happens outside the app; .hl marks what to press. */
.mock { font-family: "Segoe UI", system-ui, sans-serif; }
.hl { position: relative; z-index: 0; }
.hl::after { content: ""; position: absolute; inset: -5px -8px; z-index: -1; border-radius: 9px; border: 2px solid #ffd166;
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.18); animation: hl-pulse 1.8s ease-in-out infinite; }
@keyframes hl-pulse { 50% { box-shadow: 0 0 0 9px rgba(255, 209, 102, 0.05); } }
.mock-file { display: flex; align-items: center; gap: 16px; width: min(440px, 100%); padding: 18px 20px; border-radius: 16px;
  background: var(--card-strong); border: 1px solid var(--line-strong); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.mock-file img { border-radius: 12px; flex: none; }
.mock-file div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mock-file b { font-size: 15.5px; color: var(--text); overflow-wrap: anywhere; }
.mock-file span { font-size: 13.5px; color: var(--text-3); }
.mock-file .mock-done { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.mock-file .mock-done svg { width: 18px; height: 18px; }
/* Windows SmartScreen: the blue window, before and after the details link. */
.mock-pair { display: grid; gap: 14px; width: min(460px, 100%); }
.mock-ss { padding: 18px 20px 14px; background: #0f5aa6; color: #fff; border-radius: 4px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }
.mock-ss h4 { margin: 0 0 8px; font: 600 19px "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
.mock-ss p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.mock-ss u { text-underline-offset: 2px; }
.ss-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.ss-buttons span { padding: 6px 14px; font-size: 13px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.55); }
.mock-list { list-style: none; margin: 0; padding: 22px 24px; width: min(460px, 100%); display: grid; gap: 14px;
  background: var(--card-strong); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.mock-list li { position: relative; padding-left: 34px; color: var(--text); font-size: 15px; line-height: 1.45; }
.mock-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.mock-list li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
/* The iPhone asking to trust the computer. */
.mock-phone { width: 250px; height: 320px; border-radius: 42px; padding: 14px; background: linear-gradient(160deg, #2a3150, #171a2b);
  border: 6px solid #2c2f3d; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); display: grid; place-items: center; position: relative; }
.mock-phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 76px; height: 20px; translate: -50% 0; border-radius: 12px; background: #0b0c12; }
.ios-alert { width: 100%; border-radius: 16px; background: rgba(242, 242, 247, 0.94); color: #111; text-align: center; overflow: hidden;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; }
.ios-alert b { display: block; padding: 16px 14px 4px; font-size: 15px; }
.ios-alert p { margin: 0; padding: 0 14px 14px; font-size: 12px; line-height: 1.35; color: #333; }
.ios-buttons { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(0, 0, 0, 0.15); }
.ios-buttons span { padding: 11px 0; font-size: 14.5px; color: #0a7aff; }
.ios-buttons span + span { border-left: 1px solid rgba(0, 0, 0, 0.15); }
.ios-buttons .hl { font-weight: 600; }
.ios-buttons .hl::after { inset: 3px 6px; }
@media (prefers-reduced-motion: reduce) { .hl::after { animation: none; } }
.terms { max-width: 820px; }
.terms section { padding: 0 0 26px; }
.terms h2 { font-size: 22px; margin-bottom: 10px; }
.terms p { color: var(--text-2); margin: 0 0 10px; }
.terms p.intro { color: var(--text); margin-bottom: 14px; }
.terms .clause-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.terms ul { margin: -4px 0 12px; padding-left: 40px; color: var(--text-2); }
.terms li { margin: 0 0 4px; }
.terms p.intro + section { margin-top: 18px; }
.terms .date { color: var(--text-3); margin-top: -8px; margin-bottom: 36px; }

/* --- CTA, footer ----------------------------------------------------------------------------------- */
.cta { text-align: center; padding: 56px 24px; }
.cta h2 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 12px; }
.cta p { color: var(--text-2); margin: 0 0 26px; }
footer { border-top: 1px solid var(--line); padding: 34px 0 44px; color: var(--text-3); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
footer nav a { color: var(--text-2); }
footer .contacts { flex-basis: 100%; color: var(--text-2); }
footer .contacts a { color: var(--text); }
footer .legal { flex-basis: 100%; font-size: 13px; }
.prices-note { margin: 22px auto 0; max-width: 720px; text-align: center; color: var(--text-3); font-size: 14px; line-height: 1.55; }
.prices-note a, .terms p a { color: #9db8ff; }