/* dropnook.app — one stylesheet, no web fonts, light and dark follow the system. */
:root{
  --bg:#F4F7F8; --surface:#FFFFFF; --band:#EAF1F2; --ink:#121B21; --ink-2:#33434C; --muted:#5A6B75;
  --line:#D6DFE3; --accent:#0B6E75; --accent-ink:#075056; --accent-soft:#DFEFF0; --public:#B45309;
  --on-accent:#FFFFFF; --shadow:0 24px 60px -28px rgba(18,27,33,.45), 0 4px 14px -8px rgba(18,27,33,.18);
  --radius:14px; color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A1013; --surface:#141C21; --band:#0F171B; --ink:#E3EBEF; --ink-2:#C2CFD6; --muted:#93A4AE;
    --line:#24313A; --accent:#54C0C4; --accent-ink:#8CD9DC; --accent-soft:#13302F; --public:#F0A54A;
    --on-accent:#08161A; --shadow:0 24px 60px -28px rgba(0,0,0,.9), 0 4px 14px -8px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{margin:0; background:var(--bg); color:var(--ink);
     font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     -webkit-text-size-adjust:100%}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent)}
code{font:.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--accent-soft);
     color:var(--accent-ink); padding:.1em .35em; border-radius:4px}
h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0}
h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem); text-align:center; margin-bottom:14px}
h3{font-size:1.08rem; letter-spacing:-.01em}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
section{padding:84px 0}
.band{background:var(--band)}
.sub{color:var(--muted); text-align:center; max-width:640px; margin:0 auto 34px}
.sub.wide{max-width:780px}
.center{text-align:center; justify-content:center}
.ctas + .sub{margin-top:18px}

/* ---------------------------------------------------------------- Header */
.top{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 86%, transparent);
     -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:24px; height:64px}
.brand img{height:26px; width:auto}
.links{display:flex; gap:22px; margin-left:auto}
.links a{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:550}
.links a:hover{color:var(--accent)}
.top-right{display:flex; align-items:center; gap:14px}
.langs{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.langs a{color:var(--muted); text-decoration:none; font-size:13px; font-weight:650; padding:6px 10px}
.langs a[aria-current="page"]{background:var(--accent); color:var(--on-accent)}

/* ---------------------------------------------------------------- Buttons */
.btn{display:inline-block; background:var(--accent); color:var(--on-accent); text-decoration:none;
     font-weight:650; font-size:16px; padding:12px 22px; border-radius:10px; border:1px solid var(--accent);
     transition:filter .15s, background .15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--line)}
.btn.ghost:hover{background:var(--accent-soft); filter:none}
.btn.small{font-size:14px; padding:7px 14px; border-radius:8px}
.ctas{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0}

/* ---------------------------------------------------------------- Hero */
.hero{padding:72px 0 88px;
      background:radial-gradient(900px 520px at 85% 0%, var(--accent-soft), transparent 70%)}
.hero-in{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:56px; align-items:center}
.kicker{color:var(--accent); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px}
h1{font-size:clamp(2.3rem, 5.2vw, 3.7rem); font-weight:780; letter-spacing:-.03em}
.lead{font-size:1.18rem; color:var(--ink-2); margin:22px 0 0; max-width:34em}
.note{color:var(--muted); font-size:14px; margin:22px 0 0}
.hero-shot{display:block; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
           border:1px solid var(--line); transition:transform .2s}
.hero-shot:hover{transform:translateY(-2px)}

/* ---------------------------------------------------------------- Features */
.grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:38px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px}
.card svg{width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round;
          stroke-linejoin:round; margin-bottom:14px}
.card.public svg{stroke:var(--public)}
.card p{color:var(--ink-2); margin:8px 0 0; font-size:15.5px}

/* ---------------------------------------------------------------- Screenshots */
.shots{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px}
.shots a{color:var(--ink-2); text-decoration:none; font-weight:600; font-size:15px}
.shots picture{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line);
               box-shadow:var(--shadow); margin-bottom:10px; transition:transform .2s}
.shots a:hover picture{transform:translateY(-3px)}
.shots a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- Light / dark slider */
.compare{--pos:50%; position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
         box-shadow:var(--shadow); background:var(--surface); cursor:ew-resize; touch-action:pan-y;
         -webkit-user-select:none; user-select:none}
.compare img{width:100%; pointer-events:none; -webkit-user-drag:none}
.compare img.dark{position:absolute; inset:0; height:100%; clip-path:inset(0 0 0 var(--pos))}
.compare .handle{position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px; background:#FFFFFF;
                 box-shadow:0 0 0 1px rgba(10,16,19,.18), 0 0 14px rgba(10,16,19,.35)}
.compare .handle svg{position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px; padding:12px;
                 border-radius:50%; background:#FFFFFF; fill:none; stroke:#121B21; stroke-width:2.2; stroke-linecap:round;
                 stroke-linejoin:round; box-shadow:0 0 0 1px rgba(10,16,19,.12), 0 6px 18px rgba(10,16,19,.4)}
.compare:focus-within .handle svg{outline:3px solid var(--accent); outline-offset:3px}
.compare input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.compare .mode{position:absolute; top:4.5%; display:flex; align-items:center; gap:6px; font-size:14px; font-weight:650;
               padding:5px 12px 5px 9px; border-radius:999px; box-shadow:0 4px 14px rgba(10,16,19,.25); white-space:nowrap}
.compare .mode svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.compare .mode.lt{right:calc(100% - var(--pos) + 14px); background:#0B6E75; color:#FFFFFF}
.compare .mode.dk{left:calc(var(--pos) + 14px); background:#54C0C4; color:#08161A}

/* ---------------------------------------------------------------- How, security */
.diagram{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
         padding:14px; box-shadow:var(--shadow)}
.checks{list-style:none; padding:0; margin:34px auto 0; max-width:820px; display:grid; gap:16px}
.checks li{position:relative; padding:18px 20px 18px 56px; background:var(--surface); border:1px solid var(--line);
           border-radius:var(--radius); color:var(--ink-2)}
.checks li::before{content:""; position:absolute; left:20px; top:20px; width:22px; height:22px; border-radius:50%;
           background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
.checks b{color:var(--ink)}

/* ---------------------------------------------------------------- Install */
.steps{list-style:none; padding:0; margin:38px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
       gap:20px; counter-reset:step}
.steps li{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
          counter-increment:step}
.steps li::before{content:counter(step); display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
          background:var(--accent-soft); color:var(--accent-ink); font-weight:750; margin-bottom:14px}
.steps p{color:var(--ink-2); margin:8px 0 0; font-size:15.5px}

/* ---------------------------------------------------------------- FAQ */
details{background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:12px 0; padding:0 20px}
summary{cursor:pointer; font-weight:650; padding:16px 0; list-style:none; position:relative; padding-right:28px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:0; top:12px; font-size:22px; color:var(--accent); font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:0 0 18px; color:var(--ink-2)}

/* ---------------------------------------------------------------- Footer */
.foot{border-top:1px solid var(--line); padding:34px 0 48px; color:var(--muted); font-size:14.5px; text-align:center}
.foot b{color:var(--ink)}
.foot .fine{font-size:13px; max-width:760px; margin:10px auto 0}

/* ---------------------------------------------------------------- Narrow screens */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr; gap:40px}
  .grid,.shots,.steps{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .links{display:none}
  .top-right{margin-left:auto}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  section{padding:60px 0}
  .hero{padding:44px 0 60px}
  .grid,.shots,.steps{grid-template-columns:1fr}
  .brand img{height:21px}
  .compare .mode{font-size:12px; padding:3px 9px 3px 7px}
  .compare .handle svg{width:44px; height:44px; margin:-22px 0 0 -22px; padding:10px}
  .top-right .btn{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}}