:root{
  --fg:#1d1d1f; --muted:#86868b; --bg:#ececed; --soft:#f5f5f7;
  --line:rgba(0,0,0,.08); --brand:#6e6e73; --brand-d:#424245; --max:820px;
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.6); --shadow:0 10px 40px rgba(20,20,40,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--fg);line-height:1.65;-webkit-font-smoothing:antialiased;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;background:#ececed;
  background-image:
    radial-gradient(55vw 55vw at 12% -8%, rgba(118,140,175,.20), transparent 60%),
    radial-gradient(45vw 45vw at 102% 6%, rgba(160,150,180,.18), transparent 55%),
    radial-gradient(50vw 40vw at 50% 108%, rgba(120,170,160,.14), transparent 60%),
    linear-gradient(180deg,#f3f3f6,#e9e9ec);
  background-attachment:fixed;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
a{color:var(--fg);text-decoration:none}
.post-body a{color:#0b60c9;text-decoration:none;border-bottom:1px solid rgba(11,96,201,.25)}
.post-body a:hover{border-bottom-color:#0b60c9}
img{max-width:100%;height:auto}
h1{font-size:2.6rem;line-height:1.08;margin:.1em 0 .3em;font-weight:800;letter-spacing:-.02em}
h2{font-size:1.55rem;margin:1.7em 0 .5em;font-weight:700;letter-spacing:-.01em}
h3{font-size:1.15rem;margin:1.3em 0 .4em;font-weight:700}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px;border-radius:10px;z-index:9}

/* glass surface helper */
.site-header,.hero,.card,.cta-box,.local,.faq details,.post-body blockquote{
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
}

/* header */
.site-header{
  position:sticky;top:0;z-index:5;
  background:rgba(255,255,255,.6);border-bottom:1px solid var(--line);
}
.row{display:flex;align-items:center;gap:16px;padding:14px 20px;max-width:var(--max);margin:0 auto}
.logo{font-weight:800;letter-spacing:-.02em;color:var(--fg);margin-right:auto;font-size:1.05rem}

/* footer */
.site-footer{
  margin-top:64px;padding:32px 0;font-size:.9rem;color:var(--muted);
  border-top:1px solid var(--line);background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.site-footer strong{color:var(--fg)}

/* buttons */
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#4a4a4d,#262629);color:#fff;
  padding:12px 22px;border-radius:12px;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .15s ease,box-shadow .15s ease,background .2s ease;
}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.24);background:linear-gradient(180deg,#565659,#1d1d1f)}
.cta-btn.ghost{
  background:rgba(255,255,255,.55);color:var(--fg);border:1px solid rgba(0,0,0,.1);
  box-shadow:0 4px 14px rgba(20,20,40,.06);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.cta-btn.ghost:hover{background:rgba(255,255,255,.8)}
.cta-btn i{margin-right:8px;font-size:1.05em}

/* hero */
.hero{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:26px;
  padding:52px 40px;margin-top:28px;box-shadow:var(--shadow);
}
.lead{font-size:1.22rem;color:var(--muted);margin:.5em 0 1.4em;max-width:60ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.intro{margin:30px 4px;font-size:1.05rem;color:#3a3a3d}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:20px 0}
.card{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);
  padding:20px;box-shadow:0 8px 28px rgba(20,20,40,.06);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(20,20,40,.12)}
.card h3{margin:.35em 0}
.card .more{font-size:.9rem;font-weight:700;color:var(--fg)}
.badge{
  display:inline-block;background:rgba(0,0,0,.06);color:var(--brand-d);
  font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.05em;
}

/* post */
.breadcrumb{font-size:.85rem;color:var(--muted);margin:26px 0 0}
.post{margin-top:8px}
.post .meta{color:var(--muted);font-size:.88rem;margin:.3em 0 1.4em;padding-bottom:1.2em;border-bottom:1px solid var(--line)}
.post-body p{margin:1.05em 0}
.post-body ul,.post-body ol{padding-left:1.3em}
.post-body li{margin:.4em 0}
.post-body blockquote{
  margin:1.4em 0;padding:1em 1.2em;border-left:3px solid var(--brand);
  background:rgba(255,255,255,.5);border-radius:12px;color:var(--fg);
}
.post-body code{background:rgba(0,0,0,.06);padding:.12em .4em;border-radius:5px;font-size:.9em}

/* table */
.table-wrap{overflow-x:auto;margin:1.4em 0;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:rgba(0,0,0,.03);font-weight:700}
tbody tr:last-child td{border-bottom:none}

/* faq */
.faq{margin-top:36px}
.faq details{
  border:1px solid var(--glass-brd);border-radius:14px;padding:2px 18px;margin:12px 0;
  background:var(--glass);box-shadow:0 4px 16px rgba(20,20,40,.05);
}
.faq summary{font-weight:600;cursor:pointer;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--muted);font-weight:400;font-size:1.3em;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 14px;color:#3a3a3d}

/* boxes */
.cta-box,.local{
  background:var(--glass-strong);border:1px solid var(--glass-brd);border-radius:22px;
  padding:28px;margin:36px 0;box-shadow:var(--shadow);
}
.cta-box h2{margin-top:0}
.related{margin-top:40px}

@media(max-width:560px){
  h1{font-size:2rem}html{font-size:16px}
  .hero{padding:36px 24px;border-radius:22px}
  .cta-box,.local{padding:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}