/* Fame idm — "Daylight" design system. One stylesheet for the whole site. */

:root{
  --bg:#ffffff; --bg-soft:#fafbfd; --ink:#0f172a; --muted:#64748b; --faint:#94a3b8;
  --line:#eef1f5; --line-2:#e9edf3; --accent:#2563eb; --accent-press:#1d4ed8;
  --accent-soft:#eff4ff; --dark:#0f172a;
  --donate:#e11d48; --donate-soft:#fff6f6; --donate-line:#f5dada;
  --radius:12px; --radius-lg:16px;
  --shadow-pop:0 24px 50px -20px rgba(15,23,42,.35);
  --maxw:1080px; --maxw-prose:820px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

/* ---- layout ---- */
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.prose{max-width:var(--maxw-prose); margin:0 auto; padding:30px 24px 72px;}
.section{padding:56px 0;}
.section-soft{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-dark{background:var(--dark); color:#fff;}
.center{text-align:center;}

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 24px;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand-mark{width:26px; height:26px; border-radius:7px; background:var(--accent); display:inline-flex; align-items:center; justify-content:center;}
.brand-mark svg{width:15px; height:15px; color:#fff;}
.nav-links{display:flex; align-items:center; gap:20px; font-size:14px;}
.nav-links a{color:var(--muted);}
.nav-links a:hover{color:var(--ink); text-decoration:none;}
.nav-links a.is-active{color:var(--ink);}
.nav-cta{background:var(--accent); color:#fff !important; padding:7px 14px; border-radius:8px; font-weight:600;}
.nav-cta:hover{background:var(--accent-press); text-decoration:none;}

/* ---- hero ---- */
.hero{text-align:center; padding:64px 24px 44px; background:radial-gradient(680px 280px at 50% -40px, var(--accent-soft), transparent 70%);}
.eyebrow{display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:5px 12px; border-radius:999px; margin-bottom:18px;}
h1,.h1{font-size:clamp(34px,6vw,48px); line-height:1.05; font-weight:800; letter-spacing:-.025em; margin:0 0 14px;}
.lede{font-size:clamp(15px,2.2vw,18px); color:var(--muted); max-width:560px; margin:0 auto 26px;}
.meta{font-size:12.5px; color:var(--faint); margin-top:14px;}
.meta strong{color:var(--muted);}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:9px; font-weight:600; font-size:14.5px; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, box-shadow .16s ease, background .12s ease;}
.btn svg{width:16px; height:16px;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.28);}
.btn-primary:hover{background:var(--accent-press); transform:translateY(-2px); text-decoration:none; box-shadow:0 12px 28px rgba(37,99,235,.36);}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line-2);}
.btn-ghost:hover{border-color:#cdd6e4; text-decoration:none;}
.btn-dark{background:var(--dark); color:#fff;}
.btn-dark:hover{background:#1e293b; transform:translateY(-2px); text-decoration:none;}
.btn-link{color:var(--accent); font-weight:600; font-size:14.5px;}
.cta-row{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;}

/* ---- trust strip ---- */
.trust{display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:center; padding:16px 24px; color:var(--muted); font-size:13px;}
.trust span{white-space:nowrap;}

/* ---- section heads ---- */
.section-head{text-align:center; margin-bottom:26px;}
.section-head h2{font-size:clamp(22px,3.5vw,28px); margin:0 0 6px;}
.section-head p{color:var(--muted); margin:0; font-size:14.5px;}

/* ---- features ---- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.feature{border:1px solid var(--line-2); border-radius:var(--radius); padding:20px; background:#fff;}
.feature-icon{width:36px; height:36px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:17px;}
.feature-icon svg{width:18px; height:18px;}
.feature h3{margin:0 0 5px; font-size:15.5px;}
.feature p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.55;}

/* ---- hub ---- */
.hub{display:grid; grid-template-columns:repeat(4,1fr); gap:13px;}
.hub-card{display:block; border:1px solid var(--line-2); border-radius:var(--radius); padding:18px; background:#fff; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;}
.hub-card:hover{transform:translateY(-2px); text-decoration:none; box-shadow:var(--shadow-pop);}
.hub-card .t{font-weight:600; font-size:14.5px; color:var(--ink); margin-bottom:3px;}
.hub-card .d{color:var(--muted); font-size:12.5px;}
.hub-card--download{background:var(--accent-soft); border-color:#dbe6fb;}
.hub-card--donate{background:var(--donate-soft); border-color:var(--donate-line);}

/* ---- showcase ---- */
.showcase{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center;}
.kicker{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);}
.showcase h2{font-size:22px; margin:6px 0 8px;}
.showcase p{color:var(--muted); font-size:14.5px; margin:0;}

/* ---- window frame (screenshots) ---- */
.window{max-width:600px; margin:30px auto 0; border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-pop); background:#fff; text-align:left;}
.window-bar{position:relative; display:flex; align-items:center; gap:7px; padding:9px 12px; background:var(--bg-soft); border-bottom:1px solid var(--line);}
.window-bar i{width:10px; height:10px; border-radius:50%; background:#dfe3ea; display:inline-block;}
.window-bar .title{position:absolute; left:0; right:0; text-align:center; font-size:12px; font-weight:600; color:var(--muted); pointer-events:none;}
.window-body img{display:block; width:100%;}

/* ---- footer ---- */
.footer{border-top:1px solid var(--line); text-align:center; padding:28px 24px 40px; color:var(--faint); font-size:12.5px;}
.footer-links{display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; margin-bottom:10px;}
.footer-links a{color:var(--muted);}
.footer p{margin:0;}

/* ---- prose (content + legal) ---- */
.prose h1{margin:0 0 8px;}
.prose .lede{margin-left:0; margin-right:0; text-align:left; max-width:660px;}
.prose h2{font-size:22px; font-weight:700; margin:34px 0 12px; letter-spacing:-.01em;}
.prose h3{font-size:16px; font-weight:600; margin:22px 0 8px;}
.prose p,.prose li{color:#475569; font-size:15.5px;}
.prose strong{color:var(--ink);}
.prose ul,.prose ol{padding-left:22px;}
.prose li{margin-bottom:6px;}
.updated{color:var(--faint); font-size:13px; margin-bottom:30px;}

code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:13px; background:var(--bg-soft); border:1px solid var(--line); padding:1px 6px; border-radius:5px; color:var(--ink);}
pre{background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; padding:14px 16px; overflow-x:auto; font-size:13px;}
pre code{background:none; border:none; padding:0;}
table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14px;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-weight:600; color:var(--ink); background:var(--bg-soft); font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
td code{white-space:nowrap;}

/* ---- cards / callouts / grids ---- */
.card{background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); padding:20px 22px;}
.callout{background:var(--accent-soft); border:1px solid #dbe6fb; border-radius:var(--radius); padding:16px 20px; margin:18px 0; font-size:14.5px;}
.card-grid,.method-grid,.alt-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:22px 0;}
.card h3{margin-top:0;}

/* ---- download cards ---- */
.dl-card{margin:18px 0 14px; padding:26px; border:1px solid #dbe6fb; border-radius:var(--radius-lg); background:radial-gradient(700px 260px at 50% -60px, var(--accent-soft), transparent 70%); text-align:center; display:flex; flex-direction:column; gap:13px; align-items:center;}
.dl-card.android{border-color:var(--line-2); background:var(--bg-soft);}
.dl-meta{color:var(--muted); font-size:13px;}
.dl-meta strong{color:var(--ink);}

/* ---- browser cards (extension) ---- */
.browser-card{display:flex; gap:14px; align-items:center; padding:18px 20px; border-radius:var(--radius); background:#fff; border:1px solid var(--line-2); transition:transform .12s ease, border-color .12s ease;}
.browser-card:hover{border-color:#cdd6e4; text-decoration:none; transform:translateY(-1px);}
.browser-card .logo{width:34px; height:34px; flex-shrink:0; color:var(--muted);}
.browser-card .title{font-weight:600; color:var(--ink); font-size:14.5px;}
.browser-card .sub{font-size:12.5px; color:var(--faint); margin-top:2px;}

/* ---- donate ---- */
.donate-card{margin:22px 0; padding:30px; border:1px solid var(--donate-line); border-radius:var(--radius-lg); background:radial-gradient(700px 240px at 50% -40px, #ffeef0, transparent 70%); text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;}
.donate-heart{width:52px; height:52px; color:var(--donate); animation:heart-pulse 2.4s ease-in-out infinite;}
@keyframes heart-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.btn-donate{background:var(--donate); color:#fff; box-shadow:0 8px 20px rgba(225,29,72,.28);}
.btn-donate:hover{background:#be123c; transform:translateY(-2px); text-decoration:none;}
.fineprint{color:var(--faint); font-size:12.5px; max-width:520px; margin:4px auto 0;}
.method h3{margin:0 0 6px; font-size:15px;}
.method p{margin:0 0 10px; color:var(--muted); font-size:13.5px;}
.method a{font-weight:600; font-size:14px;}

/* ---- details / FAQ ---- */
details{background:#fff; border:1px solid var(--line-2); border-radius:10px; margin:8px 0;}
details[open]{background:var(--bg-soft);}
summary{padding:14px 18px; cursor:pointer; font-weight:600; color:var(--ink); list-style:none; position:relative;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; position:absolute; right:18px; top:11px; font-size:18px; color:var(--accent);}
details[open] summary::after{content:"\2212";}
details > *:not(summary){padding:0 18px 16px; color:#475569; font-size:14.5px;}
details ul{padding-left:36px;}

/* ---- changelog ---- */
.release{background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); padding:22px 26px; margin:18px 0;}
.release header{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.release h2{margin:0; font-size:21px; font-weight:700;}
.release .date{color:var(--faint); font-size:13px;}
.release h3{font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px;}
.release ul{padding-left:22px; margin:0;}
.release li{color:#475569; font-size:14.5px; margin-bottom:4px;}
.tag{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:5px;}
.tag--latest{background:var(--accent-soft); color:var(--accent);}
.tag--security{background:#fde8e8; color:#dc2626;}

/* ---- responsive ---- */
@media (max-width:760px){
  .features{grid-template-columns:1fr;}
  .hub{grid-template-columns:1fr 1fr;}
  .showcase{grid-template-columns:1fr;}
  .section{padding:44px 0;}
}
@media (max-width:620px){
  .nav-links a:not(.nav-cta){display:none;}
}
@media (max-width:430px){
  .hub{grid-template-columns:1fr;}
}