/* shinefy.app — dark neon like the app (App/DesignSystem/Theme.swift). No external fonts or scripts.
   Logical properties (inline-start/end) keep ar/he mirrored. */
:root {
  --bg: #060a18;           /* Theme.background */
  --bg-raised: #0c1330;    /* Theme.backgroundRaised */
  --cyan: #22d3ee;
  --indigo: #6366f1;
  --violet: #a855f7;
  --success: #34d399;
  --ink: #ffffff;
  --muted: rgb(255 255 255 / 0.62);
  --faint: rgb(255 255 255 / 0.38);
  --glass: rgb(255 255 255 / 0.055);
  --glass-strong: rgb(255 255 255 / 0.09);
  --stroke: rgb(255 255 255 / 0.11);
  --accent: linear-gradient(90deg, var(--cyan), var(--violet));
  --accent-diag: linear-gradient(135deg, var(--cyan), var(--indigo), var(--violet));
  --radius: 24px;
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Thai", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; position: relative; min-height: 100vh;
  background: transparent; color: var(--ink);
  font: 17px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The glow behind the top of every page. */
body::before {
  content: ""; position: absolute; z-index: -1; top: 0; inset-inline: 0; height: 1100px; pointer-events: none;
  background:
    radial-gradient(620px 420px at 12% 0%, rgb(34 211 238 / 0.2), transparent 70%),
    radial-gradient(760px 520px at 88% 6%, rgb(168 85 247 / 0.24), transparent 70%),
    radial-gradient(900px 600px at 50% 60%, rgb(99 102 241 / 0.1), transparent 70%);
}
:lang(ja) body, :lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { line-break: strict; word-break: auto-phrase; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { font-family: var(--round); line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgb(6 10 24 / 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--stroke);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 800 21px/1 var(--round); }
.brand:hover { text-decoration: none; }
.brand img, .brand .mark { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.brand .mark { filter: drop-shadow(0 4px 14px rgb(168 85 247 / 0.45)); }
.nav { display: flex; gap: 22px; margin-inline-start: auto; font-size: 15px; }
.nav a { color: var(--muted); }
.nav a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 760px) { .nav { display: none; } .lang { margin-inline-start: auto; } }
@media (max-width: 360px) { .lang summary span { display: none; } }

/* Language menu (no JavaScript: <details>) */
.lang { position: relative; font-size: 15px; }
.lang summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--stroke); color: var(--ink); background: var(--glass);
}
.lang summary::-webkit-details-marker { display: none; }
.lang svg { width: 17px; height: 17px; }
.lang ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none;
  background: var(--bg-raised); border: 1px solid var(--stroke); border-radius: 16px; min-width: 170px;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}
.lang li a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--ink); }
.lang li a:hover, .lang li a[aria-current] { background: var(--glass-strong); text-decoration: none; }

/* Buttons: gradient capsule (GradientButton in the app) and the glass “coming soon” label */
.btn, .soon {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 15px 28px; border-radius: 999px;
  font: 600 17px/1.2 var(--round);
}
.btn {
  color: #fff; background: var(--accent); border: 1px solid rgb(255 255 255 / 0.25);
  box-shadow: 0 10px 32px rgb(168 85 247 / 0.45);
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.soon { color: var(--ink); background: var(--glass-strong); border: 1px solid rgb(255 255 255 / 0.18); }
.btn svg, .soon svg { width: 20px; height: 20px; flex: none; }
.soon svg { color: var(--cyan); }

/* Hero */
.hero { overflow: hidden; } /* the illustration's glow is wider than narrow screens */
.hero .wrap {
  display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 48px;
  padding-top: 80px; padding-bottom: 72px;
}
.hero h1 {
  font-size: clamp(40px, 6.2vw, 70px); font-weight: 850; padding-bottom: 0.06em;
  background: linear-gradient(100deg, #fff 25%, #a5f3fc 60%, #d8b4fe 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: clamp(18px, 2vw, 20px); margin-top: 20px; max-width: 34em; color: var(--muted); }
.hero-note { margin-top: 14px; font-size: 15px; color: var(--faint); }

/* Hero illustration: a glass “screen” with the scan ring and a few categories (no numbers). */
.hero-art { position: relative; justify-self: center; width: min(350px, 86vw); }
.hero-art::before {
  content: ""; position: absolute; inset: 8% -14% 0; border-radius: 50%;
  background: radial-gradient(circle, rgb(99 102 241 / 0.5), rgb(168 85 247 / 0.18) 45%, transparent 70%);
  filter: blur(28px);
}
.device {
  position: relative; border-radius: 46px; padding: 18px 18px 22px;
  background: linear-gradient(180deg, rgb(12 19 48 / 0.92), rgb(6 10 24 / 0.94));
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.device::before { content: ""; display: block; width: 92px; height: 26px; border-radius: 999px; background: #000; margin: 0 auto 18px; }
.gauge { position: relative; width: 196px; margin: 0 auto 22px; }
.gauge > svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 14px rgb(34 211 238 / 0.4)); }
.gauge .track { fill: none; stroke: rgb(255 255 255 / 0.08); stroke-width: 11; }
.gauge .arc { fill: none; stroke-width: 11; stroke-linecap: round; }
.gauge-center {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 0 44px; text-align: center; font: 600 13px/1.25 var(--round); color: var(--muted);
}
.gauge-center svg { width: 34px; height: 34px; color: #fff; }
.art-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.art-rows li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--stroke); font: 600 15px/1.2 var(--round);
}
.art-rows .tile { width: 32px; height: 32px; border-radius: 10px; margin: 0; }
.art-rows .tile svg { width: 18px; height: 18px; }
.chev { margin-inline-start: auto; color: var(--faint); display: grid; }
.chev svg { width: 16px; height: 16px; }
[dir="rtl"] .chev svg { transform: scaleX(-1); }
.art-btn {
  margin-top: 16px; padding: 14px; border-radius: 999px; text-align: center; font: 600 16px/1.2 var(--round);
  background: var(--accent); border: 1px solid rgb(255 255 255 / 0.25); box-shadow: 0 8px 26px rgb(168 85 247 / 0.4);
}
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; padding-top: 52px; gap: 44px; }
  .hero-sub { margin-inline: auto; }
}

/* Icon tiles: gradients from Theme.Tint */
.tile {
  flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
}
.tile svg { width: 26px; height: 26px; }
.t-accent { background: var(--accent-diag); }
.t-photos { background: linear-gradient(135deg, #f472b6, #fb923c); }
.t-videos { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.t-screenshots { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.t-blurry { background: linear-gradient(135deg, #64748b, #6366f1); }
.t-contacts { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.t-folder { background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.t-pdf { background: linear-gradient(135deg, #f43f5e, #fb7185); }
.t-image { background: linear-gradient(135deg, #10b981, #22d3ee); }
.t-duplicates { background: linear-gradient(135deg, #14b8a6, #22d3ee); }
.t-live { background: linear-gradient(135deg, #facc15, #f97316); }
.t-messenger { background: linear-gradient(135deg, #22c55e, #10b981); }
.t-battery { background: linear-gradient(135deg, #34d399, #22d3ee); }
.t-privacy { background: linear-gradient(135deg, #6366f1, #a855f7); }

/* Sections and glass cards */
section { padding: 88px 0; }
section.tight { padding: 8px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.section-head.start { text-align: start; margin: 0 0 28px; }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 850; }
.section-head p { color: var(--muted); margin-top: 12px; font-size: 19px; }
.card {
  background: linear-gradient(150deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.03) 55%);
  border: 1px solid var(--stroke); border-radius: var(--radius); padding: 28px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.card .tile { margin-bottom: 18px; }
.card h3 { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.card p { color: var(--muted); }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cats .card { padding: 22px; }
.cats .card h3 { font-size: 18px; }
.cats .card p { font-size: 15px; }
.cats .tile { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px; }
.cats .tile svg { width: 23px; height: 23px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.more { margin-top: 20px; }
@media (max-width: 1000px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .cats, .grid3 { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
  .card { padding: 24px; }
}

/* Bullet points with icons (safety, Vault, privacy) */
.points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.points li {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 20px;
  background: var(--glass); border: 1px solid var(--stroke);
}
.points svg { flex: none; width: 24px; height: 24px; color: var(--cyan); margin-top: 1px; }

/* “Nothing is deleted without you” */
.safe {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 36px; align-items: center; padding: 44px;
  border-radius: 32px; border: 1px solid rgb(255 255 255 / 0.14);
  background: linear-gradient(135deg, rgb(34 211 238 / 0.12), rgb(99 102 241 / 0.08), rgb(168 85 247 / 0.14));
}
.safe h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 850; }
.safe .points li { background: rgb(6 10 24 / 0.45); }
@media (max-width: 860px) { .safe { grid-template-columns: 1fr; padding: 30px 22px; text-align: center; } .safe .points { text-align: start; } }

/* Vault */
.vault { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.vault .points svg { color: var(--violet); }
.vault-art { position: relative; justify-self: center; width: min(340px, 80vw); aspect-ratio: 1; display: grid; place-items: center; }
.vault-art::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgb(168 85 247 / 0.35), transparent 65%); filter: blur(24px);
}
.vault-grid {
  position: absolute; inset: 6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 18px; border-radius: 34px; background: var(--glass); border: 1px solid var(--stroke);
}
.vault-grid span { border-radius: 16px; opacity: 0.55; filter: blur(7px); }
.vault-lock {
  position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--accent-diag); border: 1px solid rgb(255 255 255 / 0.3);
  box-shadow: 0 0 0 10px rgb(6 10 24 / 0.55), 0 18px 50px rgb(168 85 247 / 0.55);
}
.vault-lock svg { width: 50px; height: 50px; }
@media (max-width: 860px) { .vault { grid-template-columns: 1fr; gap: 40px; } .vault .section-head.start { text-align: center; } }

/* Screenshots: a horizontal strip with scroll snapping (only when Design/Screenshots exist) */
.shots {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 20px 26px;
  max-width: 1360px; margin: 0 auto; scrollbar-width: thin;
}
.shots img {
  flex: none; width: 250px; height: auto; border-radius: 30px; scroll-snap-align: center;
  border: 1px solid var(--stroke); box-shadow: 0 18px 44px rgb(0 0 0 / 0.45);
}
@media (min-width: 1360px) { .shots { justify-content: center; } }

/* Privacy */
.privacy { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: center; }
.privacy .section-head.start { margin: 0; }
.privacy .points svg { color: var(--success); }
.more-link { display: inline-block; margin-top: 18px; font-weight: 600; }
[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }
@media (max-width: 860px) { .privacy { grid-template-columns: 1fr; } .privacy .section-head.start { text-align: center; } }

/* Price */
.price {
  text-align: center; border-radius: 34px; padding: 58px 28px; position: relative; overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: linear-gradient(125deg, rgb(34 211 238 / 0.24), rgb(99 102 241 / 0.24) 50%, rgb(168 85 247 / 0.3));
}
.price h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 850; }
.price p { max-width: 640px; margin: 14px auto 0; font-size: 19px; color: rgb(255 255 255 / 0.82); }
.price .soon { background: rgb(6 10 24 / 0.5); }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--glass); border: 1px solid var(--stroke); border-radius: 20px; padding: 0 24px; }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0; font: 700 18px/1.35 var(--round);
  display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan); font-size: 24px; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; color: var(--muted); }

/* Footer */
footer { border-top: 1px solid var(--stroke); padding: 36px 0 48px; color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer nav a { color: var(--muted); }
footer .note { margin-inline-start: auto; }
@media (max-width: 640px) { footer .note { margin-inline-start: 0; width: 100%; } }

/* Documents: privacy, terms, support, 404 */
.doc { max-width: 760px; margin: 0 auto; padding: 64px 20px 88px; }
.doc h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 850; margin-bottom: 18px; }
.doc h2 { font-size: 24px; font-weight: 800; margin: 40px 0 12px; }
.doc p, .doc li { color: rgb(255 255 255 / 0.86); }
.doc strong { color: var(--ink); }
.doc p + p, .doc ul + p, .doc ol + p, .doc p + ul, .doc p + ol { margin-top: 12px; }
.doc ul, .doc ol { padding-inline-start: 22px; margin: 0; }
.doc li { margin: 8px 0; }
.doc li::marker { color: var(--cyan); }
.doc .lead { font-size: 20px; color: var(--ink); }
.doc .muted { color: var(--muted); margin-top: 10px; font-size: 15px; }
.doc .notice { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--stroke); color: var(--muted); font-size: 15px; }