/* PhotoCleaner — photocleaner.ch
   Palette and card treatment mirror the app's locked design system:
   Signal Violet #7C5CFF for every non-destructive action, accentMagenta #C86DD7 as the
   gradient partner, glass surfaces with a hairline white border. The site should feel
   like the same object as the app. */

:root {
    --ground:        #FBFAFD;
    --ground-deep:   #F2F0F7;
    --surface:       #FFFFFF;
    --surface-glass: rgba(255, 255, 255, 0.72);
    --hairline:      rgba(20, 17, 28, 0.09);
    --ink:           #14111C;
    --ink-soft:      #3B3548;
    --muted:         #6B6577;
    --violet:        #7C5CFF;
    --violet-deep:   #5B3FD6;
    --magenta:       #C86DD7;
    --shadow-card:   0 1px 2px rgba(20, 17, 28, 0.04), 0 8px 24px rgba(20, 17, 28, 0.06);
    --shadow-lift:   0 2px 6px rgba(20, 17, 28, 0.06), 0 20px 48px rgba(92, 63, 214, 0.14);
    --orb-a:         rgba(124, 92, 255, 0.30);
    --orb-b:         rgba(200, 109, 215, 0.24);

    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Helvetica Neue", Helvetica, Arial, sans-serif;

    --measure: 66ch;
    --gutter: clamp(20px, 5vw, 40px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground:        #0C0A12;
        --ground-deep:   #07060C;
        --surface:       #171423;
        --surface-glass: rgba(30, 26, 44, 0.66);
        --hairline:      rgba(255, 255, 255, 0.11);
        --ink:           #F4F2F8;
        --ink-soft:      #CFC9DC;
        --muted:         #9A93A8;
        --violet:        #9B85FF;
        --violet-deep:   #B7A6FF;
        --magenta:       #D682E6;
        --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.34);
        --shadow-lift:   0 2px 8px rgba(0, 0, 0, 0.44), 0 24px 56px rgba(0, 0, 0, 0.5);
        --orb-a:         rgba(124, 92, 255, 0.26);
        --orb-b:         rgba(200, 109, 215, 0.18);
    }
}

:root[data-theme="dark"] {
    --ground:        #0C0A12;
    --ground-deep:   #07060C;
    --surface:       #171423;
    --surface-glass: rgba(30, 26, 44, 0.66);
    --hairline:      rgba(255, 255, 255, 0.11);
    --ink:           #F4F2F8;
    --ink-soft:      #CFC9DC;
    --muted:         #9A93A8;
    --violet:        #9B85FF;
    --violet-deep:   #B7A6FF;
    --magenta:       #D682E6;
    --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.34);
    --shadow-lift:   0 2px 8px rgba(0, 0, 0, 0.44), 0 24px 56px rgba(0, 0, 0, 0.5);
    --orb-a:         rgba(124, 92, 255, 0.26);
    --orb-b:         rgba(200, 109, 215, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        /* Must be zeroed too. The hero entrance uses fill-mode `both`, so a surviving
           delay would hold elements at their opacity:0 start state — a blank hero for
           anyone who asked for less motion, which is the opposite of the intent. */
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.032em;
    text-wrap: balance;
    font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.2rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.02em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 3px;
    border-radius: 4px;
}

img { max-width: 100%; display: block; }

/* ---------- layout ---------- */

.wrap {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 760px; }

section { padding-block: clamp(64px, 9vw, 116px); }

.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--violet);
    margin: 0 0 14px;
}

.lede {
    font-size: clamp(1.06rem, 1.9vw, 1.2rem);
    color: var(--muted);
    max-width: var(--measure);
}

.section-head { margin-bottom: clamp(32px, 5vw, 54px); }

/* ---------- header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-glass);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--hairline);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 62px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    font-weight: 650;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 26px);
    font-size: 0.94rem;
}
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--ink); text-decoration: none; }

/* ---------- hero ---------- */

.hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(72px, 11vw, 132px) clamp(52px, 8vw, 92px);
    overflow: hidden;
}

/* Gradient orbs — the same device the app uses behind every screen. */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    pointer-events: none;
}
.hero::before {
    width: 620px; height: 620px;
    background: var(--orb-a);
    top: -280px; left: -180px;
}
.hero::after {
    width: 520px; height: 520px;
    background: var(--orb-b);
    top: -140px; right: -200px;
}

.hero h1 { max-width: 15ch; }

.hero .lede {
    margin-top: 22px;
    font-size: clamp(1.12rem, 2.2vw, 1.32rem);
    color: var(--ink-soft);
    max-width: 54ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
}

.hero-note {
    margin-top: 18px;
    font-size: 0.9rem;
    color: var(--muted);
}

/* ---------- hero motion ----------
   Two ideas only, both drawn from the product rather than applied to it:
   the headline settles into place once, and a grid of tiles dissolves in a wave —
   the same motif the app icon is generated from, and the thing the app actually does.
   Everything is opacity and transform, so it stays on the compositor.

   The global prefers-reduced-motion rule collapses these to 0.01ms. Both animations
   use fill-mode `both`, so a reader with motion reduced lands on the final state
   instead of an invisible page. */

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.rise {
    animation: rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--d, 0) * 90ms);
}

/* The dissolve. Sits behind the headline on wide screens as texture, never as a
   competing graphic — once real screenshots are in place below, the hero should not
   be fighting them for attention. */
.dissolve {
    position: absolute;
    top: 50%;
    right: clamp(-60px, -2vw, 0px);
    transform: translateY(-50%);
    width: min(380px, 34vw);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    /* Fade the grid out towards the text so it reads as atmosphere. */
    -webkit-mask-image: radial-gradient(75% 75% at 72% 50%, #000 30%, transparent 78%);
    mask-image: radial-gradient(75% 75% at 72% 50%, #000 30%, transparent 78%);
}

.dissolve i {
    aspect-ratio: 1;
    border-radius: 6px;
    background: linear-gradient(140deg, var(--violet), var(--magenta));
    animation: dissolve-tile 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: calc(var(--w, 0) * 0.16s);
}

/* Cheap organic variation — a uniform grid reads as a loading state, not a library. */
.dissolve i:nth-child(3n)   { opacity: 0.72; border-radius: 8px; }
.dissolve i:nth-child(4n)   { background: linear-gradient(140deg, var(--magenta), var(--violet)); }
.dissolve i:nth-child(5n+2) { opacity: 0.55; }
.dissolve i:nth-child(7n+3) { border-radius: 11px; }

@keyframes dissolve-tile {
    0%, 14%   { opacity: 1; transform: scale(1); }
    40%, 60%  { opacity: 0.06; transform: scale(0.5) translateY(-8px); }
    86%, 100% { opacity: 1; transform: scale(1); }
}

/* Below this the headline would sit on top of the grid. */
@media (max-width: 900px) {
    .dissolve { display: none; }
}

/* ---------- narrow screens ----------
   The only responsive rule this stylesheet had was hiding the hero dissolve, and
   everything else leaned on `clamp()`. That holds for the prose, but not for the header:
   the brand plus four nav links measure ~409px against a 390px iPhone viewport, so the
   nav ran into the wordmark and clipped, and the page scrolled sideways by 16px.
   Measured in an iframe, because headless Chrome clamps its own window to 500px wide and
   will happily render a 500px layout into a 390px screenshot, which looks like overflow
   that is not there and hides overflow that is. */
@media (max-width: 560px) {
    .site-header .wrap {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 16px;
        min-height: 0;
        padding-block: 9px;
    }

    /* Second row, spread edge to edge — deliberate rather than cramped. */
    .site-nav {
        width: 100%;
        justify-content: space-between;
        font-size: 0.86rem;
        gap: 10px;
    }

    /* A phone is held in one hand: full-width targets beat a row of small ones. */
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
}

/* The orbs breathe, slowly enough that you notice the page feels alive without
   catching it moving. */
@keyframes drift-a {
    to { transform: translate(46px, 34px) scale(1.08); }
}
@keyframes drift-b {
    to { transform: translate(-38px, 26px) scale(1.05); }
}
.hero::before { animation: drift-a 26s ease-in-out infinite alternate; }
.hero::after  { animation: drift-b 31s ease-in-out infinite alternate; }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-decoration: none;
    border: 0.5px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn--primary {
    background: linear-gradient(135deg, var(--violet), var(--magenta));
    color: #FFFFFF;
    box-shadow: var(--shadow-lift);
}
.btn--primary:hover { opacity: 0.94; }

.btn--ghost {
    background: var(--surface-glass);
    border-color: var(--hairline);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}

.btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
}

/* ---------- glass cards ---------- */

.card {
    background: var(--surface-glass);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border: 0.5px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: clamp(22px, 3vw, 30px);
}

.grid {
    display: grid;
    gap: clamp(16px, 2.2vw, 22px);
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.feature h3 { margin-bottom: 9px; }
.feature p { color: var(--muted); font-size: 0.985rem; }

.feature-icon {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--violet), var(--magenta));
    color: #FFF;
    font-size: 1.15rem;
    margin-bottom: 16px;
}

/* ---------- steps ---------- */

.steps { counter-reset: step; display: grid; gap: 20px; }

.step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    align-items: start;
}

.step::before {
    counter-increment: step;
    content: counter(step);
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 0.5px solid var(--hairline);
    box-shadow: var(--shadow-card);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    color: var(--violet);
}

.step h3 { margin-bottom: 5px; }
.step p { color: var(--muted); font-size: 0.985rem; }

/* ---------- screenshots ---------- */

.shots {
    display: flex;
    gap: clamp(18px, 3vw, 30px);
    overflow-x: auto;
    padding-block: 8px 26px;
    padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.shots > * { scroll-snap-align: center; flex: 0 0 auto; }

/* iPhone bezel drawn in CSS so the raw screenshots stay reusable for App Store Connect. */
.device {
    width: 236px;
    padding: 9px;
    border-radius: 40px;
    background: linear-gradient(160deg, #2A2536, #100E18);
    box-shadow: var(--shadow-lift);
    position: relative;
}

.device-screen {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    background: var(--ground-deep);
    aspect-ratio: 1320 / 2868;
}

.device-screen img { width: 100%; height: 100%; object-fit: cover; }

/* Dynamic Island */
.device-screen::after {
    content: "";
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 78px; height: 22px;
    border-radius: 12px;
    background: #08070D;
    z-index: 2;
}

.device-caption {
    margin-top: 14px;
    text-align: center;
    font-size: 0.87rem;
    color: var(--muted);
}

/* Placeholder shown until real screenshots are dropped in. */
.shot-pending {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 6px;
    text-align: center;
    padding: 20px;
    background:
        radial-gradient(120% 80% at 50% 0%, var(--orb-a), transparent 60%),
        var(--ground-deep);
    color: var(--muted);
    font-size: 0.8rem;
}
.shot-pending strong { color: var(--ink); font-size: 0.94rem; }

/* ---------- privacy band ---------- */

.band {
    background: var(--ground-deep);
    border-block: 0.5px solid var(--hairline);
}

.claim-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.claim-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 13px;
    align-items: start;
    color: var(--ink-soft);
}

.claim-list li::before {
    content: "✓";
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--magenta));
    color: #FFF;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ---------- pricing ---------- */

.plan { display: flex; flex-direction: column; gap: 16px; }

.plan--featured {
    border-color: color-mix(in srgb, var(--violet) 40%, transparent);
    box-shadow: var(--shadow-lift);
}

.plan-name {
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet);
}

.plan-terms {
    font-size: 1.28rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.plan ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
    font-size: 0.97rem;
    color: var(--muted);
}
.plan ul li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.plan ul li::before { content: "—"; color: var(--violet); }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 12px; }

.faq details {
    background: var(--surface-glass);
    border: 0.5px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 18px 22px;
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    letter-spacing: -0.018em;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    float: right;
    color: var(--violet);
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { margin-bottom: 11px; }
.faq p { color: var(--muted); font-size: 0.97rem; }

/* ---------- legal / prose pages ---------- */

/* These carried no colour at all: same header and type as the landing page, but a flat
   ground under it, so privacy and support read as bare documents rather than as pages of
   the same site. They get the landing page's gradient orbs — smaller, dimmer, and only
   behind the title, because a legal page is read for minutes and the hero's full glow
   would sit under a wall of body text. */
.prose {
    position: relative;
    isolation: isolate;
    padding-block: clamp(48px, 7vw, 82px);
    overflow: hidden;
}

.prose::before,
.prose::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    pointer-events: none;
}

.prose::before {
    width: 460px; height: 460px;
    background: var(--orb-a);
    top: -260px; left: -170px;
    opacity: 0.75;
}

.prose::after {
    width: 380px; height: 380px;
    background: var(--orb-b);
    top: -180px; right: -150px;
    opacity: 0.7;
}

.prose h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); margin-bottom: 12px; }

.prose .updated {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 42px;
}

.prose h2 {
    font-size: 1.32rem;
    letter-spacing: -0.022em;
    margin-top: 42px;
    margin-bottom: 12px;
    padding-top: 22px;
    border-top: 0.5px solid var(--hairline);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; }

.prose h3 { font-size: 1.04rem; margin-top: 26px; margin-bottom: 7px; }

.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.1em; }
.prose li { margin-bottom: 8px; }

.prose strong { color: var(--ink); font-weight: 650; }

.callout {
    background: var(--surface-glass);
    border: 0.5px solid var(--hairline);
    border-left: 3px solid var(--violet);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin: 26px 0;
    box-shadow: var(--shadow-card);
}
.callout p { margin-bottom: 0; }

.table-scroll { overflow-x: auto; margin: 20px 0 26px; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 460px;
}
th, td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 0.5px solid var(--hairline);
    vertical-align: top;
}
th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 650;
}
td { color: var(--ink-soft); }

/* ---------- footer ---------- */

.site-footer {
    border-top: 0.5px solid var(--hairline);
    background: var(--ground-deep);
    padding-block: 46px;
    font-size: 0.92rem;
}

.site-footer .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 34px;
    align-items: center;
    justify-content: space-between;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.footer-legal { color: var(--muted); }

/* ---------- utility ---------- */

.stack-lg > * + * { margin-top: clamp(30px, 4vw, 44px); }
.center { text-align: center; }
.center .lede, .center .section-head .lede { margin-inline: auto; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--surface);
    color: var(--ink);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }