/* AdultCam public pages (landing + info pages). Same palette as the app. */
:root { --bg:#000; --fg:#f8fafc; --card:#0c0c0d; --muted:#181818; --muted-fg:#a1a1aa; --border:#27272a; --accent:#e11d48; --accent-2:#be123c;
  --radius:16px; color-scheme:dark; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--fg); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:#fda4af; }
:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.wrap { max-width:1120px; margin:0 auto; padding:0 16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 24px; border-radius:14px;
  font-weight:800; font-size:1.05rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .2s, transform .2s; font-family:inherit; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 8px 30px rgba(225,29,72,.35); }
.btn-primary:hover { background:var(--accent-2); }
.btn-ghost { background:rgba(255,255,255,.04); border-color:var(--border); color:var(--fg); }
.btn-small { min-height:40px; padding:0 14px; font-size:.9rem; border-radius:10px; box-shadow:none; }

/* top bar */
.top { position:sticky; top:0; z-index:20; background:rgba(0,0,0,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding-top:env(safe-area-inset-top, 0px); }
.brand { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; min-width:0; }
.brand img { border-radius:10px; flex:0 0 auto; }
.brand b { font-size:1.15rem; }
.brand small { display:block; color:var(--muted-fg); font-size:.78rem; line-height:1.1; white-space:nowrap; }

/* footer */
.foot { color:var(--muted-fg); font-size:.85rem; border-top:1px solid var(--border); padding:28px 0 40px; margin-top:40px; }
.foot .disc { margin:0 0 16px; }
.foot-links { display:flex; flex-wrap:wrap; gap:6px 0; }
.foot-links > * { padding:0 10px; border-right:1px solid #3f3f46; line-height:1.2; }
.foot-links > *:first-child { padding-left:0; }
.foot-links > *:last-child { border-right:0; }
.foot-links a { color:#d4d4d8; text-decoration:none; }
.foot-links a:hover { color:#fff; text-decoration:underline; }

/* info pages */
.page { max-width:760px; padding-top:40px; }
.page h1 { font-size:clamp(2rem, 6vw, 2.8rem); letter-spacing:-.02em; line-height:1.1; margin:0 0 8px; }
.page .updated { color:var(--muted-fg); margin:0 0 28px; }
.page h2 { font-size:1.3rem; margin:32px 0 8px; }
.page p, .page li { color:#d4d4d8; }
.page ul { padding-left:22px; }
.page details { border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin:0 0 10px; background:var(--card); }
.page summary { cursor:pointer; font-weight:700; color:var(--fg); }
.page details p { margin:0; padding-top:10px; }
.page .cta-box { margin:36px 0 0; padding:20px; border-radius:var(--radius); background:var(--muted); border:1px solid var(--border); }

@media (max-width:899px) { .foot { padding-bottom:110px; } }
@media (prefers-reduced-motion: reduce) { .btn { transition:none; } }

/* top bar link + install guide page */
.page ol.steps { padding-left:22px; } .page ol.steps li { margin-bottom:6px; }
.page .tip { background:var(--muted); border-radius:12px; padding:14px 16px; margin:12px 0; }
.page .tip p { margin:0; }
.page nav.toc { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }
.page nav.toc a { background:var(--muted); color:var(--fg); text-decoration:none; padding:8px 14px; border-radius:20px; font-weight:600; }

/* top bar: hamburger menu left of the logo */
.top-l { display:flex; align-items:center; gap:12px; position:relative; }
.menu-btn { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.04); color:var(--fg); cursor:pointer; }
.menu-btn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
/* ☰ turns into ✕ while the menu is open */
.menu-btn svg path { transform-box:fill-box; transform-origin:center; transition:transform .2s, opacity .2s; }
.menu-btn[aria-expanded=true] { background:var(--fg); color:#000; border-color:var(--fg); }
.menu-btn[aria-expanded=true] .l1 { transform:translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded=true] .l2 { opacity:0; }
.menu-btn[aria-expanded=true] .l3 { transform:translateY(-5px) rotate(-45deg); }
/* dropdown card that grows open from under the button */

.menu { position:absolute; top:calc(100% + 10px); left:0; width:min(280px, calc(100vw - 32px));
  background:#141416; border:1px solid #2a2a2e; border-radius:16px; padding:8px; box-shadow:0 18px 50px rgba(0,0,0,.6);
  transform-origin:top left; animation:menu-in .18s ease-out; }
@keyframes menu-in { from { opacity:0; transform:scale(.92) translateY(-6px); } }
.menu .wrap { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; min-height:0; max-width:none; padding:0; }
.menu a { display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:10px; color:var(--fg); text-decoration:none; font-weight:700; font-size:1.02rem; }
.menu a::after { content:"›"; margin-left:auto; color:var(--muted-fg); font-size:1.3rem; }
.menu a:hover, .menu a:focus-visible { background:#202024; color:#fff; }
@media (prefers-reduced-motion: reduce) { .menu { animation:none; } .menu-btn svg path { transition:none; } }
@media (max-width:380px) { .brand small { display:none; } }

/* motion – off for visitors who turned animations off */
@media (prefers-reduced-motion: no-preference) {
  /* menu links slide in one after another */
  .menu a { animation:menu-item .3s cubic-bezier(.22,1,.36,1) both; }
  .menu a:nth-child(2) { animation-delay:.04s } .menu a:nth-child(3) { animation-delay:.08s } .menu a:nth-child(4) { animation-delay:.12s }
  .menu a:nth-child(5) { animation-delay:.16s } .menu a:nth-child(6) { animation-delay:.2s }
  @keyframes menu-item { from { opacity:0; transform:translateX(-12px); } }
}
/* FAQ: the answer opens and closes smoothly (script in site.php) */
.page details > :not(summary) { overflow:hidden; }
.page summary { list-style:none; display:flex; align-items:center; gap:10px; }
.page summary::-webkit-details-marker { display:none; }
.page summary::after { content:"+"; margin-left:auto; font-size:1.4rem; line-height:1; color:var(--muted-fg); transition:transform .25s; }
.page details[open] summary::after { transform:rotate(45deg); }