/* ========================================================================
   PINGKEEPER — MARKETING SHELL (shared by / and /blog/*)
   Base identity: deep aubergine-black, gold/orchid/aqua ("the quiet watch").
   Signature accent for alerts + nav highlights: "red-icy" —
     blaze  #FF3B4E  (alert red)
     ice    #C9EEFF  (icy white-blue)
   Lighting: a single soft light source from directly above, center —
   both left and right edges fall into shadow, like standing in a room
   lit by one skylight. This is a fixed ambient layer, not per-section.
   ======================================================================== */

:root{
  --bg:#0B0A13; --bg2:#14101F; --bg3:#0d0b16;
  --ink:#F4EFE8; --muted:#A79EC2; --faint:#6f6789;
  --gold:#E8C888; --gold-dim:#8a744a;
  --orchid:#B79CFF; --orchid-dim:#6c5ba8;
  --aqua:#7EE8D0;
  --danger:#FF8A7A;
  --blaze:#FF3B4E; --blaze-dim:#9c1c2b;
  --ice:#C9EEFF; --ice-dim:#6fa9c2;
  --line:rgba(244,239,232,0.10);
  --glass:linear-gradient(160deg, rgba(244,239,232,0.07), rgba(244,239,232,0.015));
  --radius-lg:32px; --radius-md:22px; --radius-sm:14px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Manrope', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', 'SF Mono', monospace;
}
.mk *{box-sizing:border-box;}
.mk{ background:var(--bg); color:var(--ink); font-family:var(--font-body); }
.mk ::selection{ background:var(--orchid); color:#0B0A13; }
.mk a{ color:inherit; }
.mk img, .mk svg{ display:block; }
.mk .serif{ font-family:var(--font-display); }
.mk .mono{ font-family:var(--font-mono); }
@media (prefers-reduced-motion: reduce){
  .mk *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- global lighting: skylight + side shadow ----------------
   One fixed layer: a soft radial glow dropping from top-center, and two
   vertical gradients pulling the left/right edges into shadow — like
   sunlight falling through a single opening above, room dim at the sides. */
.mk-light{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.mk-light::before{ /* the skylight beam, top-center */
  content:""; position:absolute; left:50%; top:-10vh; width:min(1100px,90vw); height:70vh;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(201,238,255,0.16), rgba(183,156,255,0.08) 38%, transparent 72%);
  filter:blur(6px);
}
.mk-light::after{ /* left + right shadow, both sides */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(3,2,6,0.55), transparent 22%, transparent 78%, rgba(3,2,6,0.55)),
    linear-gradient(180deg, transparent 60%, rgba(3,2,6,0.35) 100%);
}

/* ================= layout shell ================= */
.mk .page{ position:relative; z-index:2; }
.mk section{ position:relative; }
.mk .container{ max-width:1120px; margin:0 auto; padding:0 24px; }
@media (max-width:640px){ .mk .container{ padding:0 18px; } }
.mk .glass{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 80px -30px rgba(0,0,0,0.65);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.mk .eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.mk .eyebrow::before{ content:""; width:22px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.mk h1, .mk h2, .mk h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; margin:0; }
.mk .lede{ color:var(--muted); font-size:17px; line-height:1.7; max-width:46ch; }
.mk .btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px;
  font-family:var(--font-body); font-weight:700; font-size:15px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.mk .btn-primary{ background:var(--orchid); color:#181026;
  box-shadow:0 18px 45px -14px rgba(183,156,255,0.55); }
.mk .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 55px -12px rgba(183,156,255,0.75); }
.mk .btn-ghost{ background:rgba(244,239,232,0.03); color:var(--ink); border-color:var(--line); }
.mk .btn-ghost:hover{ background:rgba(244,239,232,0.07); transform:translateY(-2px); }

/* reveal-on-scroll */
.mk .reveal{ opacity:0; transform:translateY(28px); }
.mk .reveal.in{ opacity:1; transform:translateY(0); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }

.mk .chapter{ padding:104px 0; }
.mk .chapter-head{ max-width:640px; margin-bottom:56px; }
.mk .chapter-head h2{ font-size:clamp(28px,4vw,42px); line-height:1.14; margin-top:14px; }
.mk .chapter-num{ font-family:var(--font-mono); font-size:12px; color:var(--faint); letter-spacing:.1em; }

/* ================= NAV (with dropdown) ================= */
.mk-nav{
  position:sticky; top:0; z-index:70; width:100%;
  background:linear-gradient(180deg, rgba(11,10,19,0.88), rgba(11,10,19,0.72));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.mk-nav-inner{ max-width:1120px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.mk-brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:19px; text-decoration:none; color:var(--ink); font-weight:600; flex-shrink:0; white-space:nowrap; }
.mk-brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 8px var(--aqua); }
.mk-links{ display:flex; align-items:center; gap:6px; }
.mk-links > a, .mk-links > .mk-dd > button{
  font-family:var(--font-body); font-size:14.5px; color:var(--muted); text-decoration:none;
  background:none; border:none; cursor:pointer; padding:10px 14px; border-radius:10px;
  display:flex; align-items:center; gap:5px; transition:color .2s, background .2s;
}
.mk-links > a:hover, .mk-links > .mk-dd > button:hover{ color:var(--ink); background:rgba(244,239,232,0.05); }
.mk-links > a.active{ color:var(--ink); }
.mk-dd{ position:relative; }
.mk-dd > button svg{ width:14px; height:14px; transition:transform .2s; }
.mk-dd:hover > button svg, .mk-dd.open > button svg{ transform:rotate(180deg); }
.mk-dd-panel{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:280px; padding:10px; border-radius:18px; opacity:0; visibility:hidden; pointer-events:none;
  background:linear-gradient(160deg, rgba(20,16,31,0.98), rgba(13,11,22,0.98));
  border:1px solid var(--line); box-shadow:0 30px 70px -20px rgba(0,0,0,0.75);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.mk-dd:hover .mk-dd-panel, .mk-dd.open .mk-dd-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mk-dd-item{ display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:12px; text-decoration:none; color:var(--ink); }
.mk-dd-item:hover{ background:rgba(183,156,255,0.10); }
.mk-dd-item .ic{ width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, rgba(255,59,78,0.20), rgba(201,238,255,0.14)); border:1px solid var(--line); }
.mk-dd-item .ic svg{ width:16px; height:16px; color:var(--ice); }
.mk-dd-item b{ display:block; font-size:13.5px; font-weight:600; }
.mk-dd-item span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4; }
.mk-cta-group{ display:flex; align-items:center; gap:8px; }
.mk-cta-group a.login{ font-size:14px; color:var(--muted); text-decoration:none; padding:10px 14px; }
.mk-cta-group a.login:hover{ color:var(--ink); }
.mk-cta-group a.signup{ font-size:13.5px; font-weight:700; color:#181026; text-decoration:none;
  background:var(--orchid); padding:10px 18px; border-radius:999px; }
.mk-burger{ display:none; background:none; border:1px solid var(--line); border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.mk-burger svg{ width:18px; height:18px; color:var(--ink); }
@media (max-width:860px){
  .mk-links{ display:none; }
  .mk-cta-group a.login{ display:none; }
  .mk-burger{ display:flex; }
}
.mk-mobile-panel{ display:none; border-top:1px solid var(--line); padding:14px 20px 20px; }
.mk-mobile-panel.open{ display:block; }
.mk-mobile-panel a{ display:block; padding:12px 4px; color:var(--muted); text-decoration:none; font-size:15px; border-bottom:1px solid var(--line); }
.mk-mobile-panel a:last-child{ border-bottom:none; }

/* ================= footer ================= */
.mk footer{ padding:64px 0 34px; border-top:1px solid var(--line); }
.mk .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
@media (max-width:800px){ .mk .footer-grid{ grid-template-columns:1fr 1fr; } }
.mk .footer-brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:19px; margin-bottom:12px; }
.mk .footer-brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 8px var(--aqua); }
.mk footer p.desc{ color:var(--faint); font-size:13.5px; max-width:30ch; line-height:1.6; }
.mk footer h5{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 16px; font-weight:500; }
.mk footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.mk footer a{ text-decoration:none; color:var(--muted); font-size:13.5px; transition:color .2s; }
.mk footer a:hover{ color:var(--ink); }
.mk .footer-bottom{ text-align:center; font-family:var(--font-mono); font-size:11.5px; color:var(--faint); letter-spacing:.03em; }

/* ================= ambient blobs (reused by page sections) ================= */
.mk .ambient-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.mk .blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; }