@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,600;6..72,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root{
  --bg: #08111b;
  --paper: rgba(255,255,255,.78);
  --paper-soft: rgba(255,255,255,.70);
  --ink: #081321;
  --muted: #58667b;
  --line: rgba(20, 35, 60, .12);
  --shadow: 0 18px 48px rgba(8, 16, 32, .18);
  --shadow-soft: 0 12px 28px rgba(8, 16, 32, .14);

  --brand: #1b6bff;
  --brand2: #7c3aed;

  --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  --radius: 18px;
  --radius2: 22px;
  --container: 1120px;
  --measure: 72ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #07101a;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}
body::before{
  content:"";
  position: fixed;
  inset: -5%;
  z-index: -2;
  pointer-events: none;
  background-image:
    url("assets/img/blurred-bg-coastal.webp"),
    url("/assets/img/blurred-bg-coastal.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  filter: blur(22px) saturate(1.14) brightness(1.08);
  transform: scale(1.07);
  opacity: .92;
}
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 8% 6%, rgba(255,255,255,.18), transparent 62%),
    radial-gradient(900px 540px at 92% 12%, rgba(255,255,255,.12), transparent 58%),
    linear-gradient(180deg, rgba(7,16,26,.08), rgba(7,16,26,.28));
}

img{max-width:100%}
a{color: var(--brand); text-decoration:none}
a:hover{ text-decoration:underline }

.container{max-width: var(--container); margin: 0 auto; padding: 0 18px}

.skip-link{
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 999;
  background: rgba(8,16,28,.92);
  color: #fff;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.22);
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus{ top: 10px; outline: 2px solid rgba(255,255,255,.65); outline-offset: 2px; }

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248,250,255,.58);
  border-bottom: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(8,16,32,.10);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding: 10px 0;
}

/* Brand pop */
.site-header .brand,
.header-brand,
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(8,16,28,.34);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 24px rgba(255,255,255,.06);
  position: relative;
}
.site-header .brand::before,
.header-brand::before,
.brand::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:18px;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,.20), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.10), transparent 60%);
  filter: blur(10px);
  opacity:.9;
}
.site-header .brand img,
.header-brand img,
.brand img{
  height: 42px;
  width: auto;
  display:block;
  border-radius: 10px;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.35))
    drop-shadow(0 3px 8px rgba(0,0,0,.45))
    drop-shadow(0 0 10px rgba(255,255,255,.10));
}
.links{display:flex; gap:12px; flex-wrap:wrap}
.links a{
  color: rgba(11,18,32,.92);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  letter-spacing: .01em;
}
.links a:hover{
  background: rgba(27,107,255,.10);
  text-decoration:none;
}

.shell{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items:start;
  padding: 18px 0 44px;
}
.article{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: 0 14px 34px rgba(3,8,16,.18);
  overflow:hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.article-header{ padding: 24px 26px 0; }
.article-body{ padding: 22px 26px 10px; }

.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin: 0 0 10px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  color: rgba(11,18,32,.82);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

h1,h2,h3,h4,h5,h6{
  margin: 0 0 .55em;
  color: #07111f;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1{
  margin: 4px 0 10px;
  font-size: clamp(2.0rem, 3.1vw, 2.85rem);
  font-weight: 600;
  line-height: 1.03;
}
h2{
  font-size: clamp(1.30rem, 2.0vw, 1.70rem);
  line-height: 1.12;
}
h3{ font-size: 1.12rem; line-height: 1.18; }
h4{ font-size: 1rem; letter-spacing: -.01em; }
h5,h6{
  font-family: var(--font-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.2;
}

.subheadline{
  margin: 0 0 12px;
  color: rgba(11,18,32,.80);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.22vw, 18px);
  line-height: 1.58;
  font-weight: 500;
  max-width: 70ch;
}
.meta{
  display:flex; flex-wrap:wrap; gap:10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: .01em;
}
.meta span{display:inline-flex; align-items:center; gap:8px}
.dot{width:4px;height:4px;border-radius:999px;background:rgba(84,98,122,.55); display:inline-block}

.hero{
  margin: 18px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0c1220;
}
.hero img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-body p,
.article p{
  margin: 0 0 14px;
  max-width: var(--measure);
  font-size: 15.8px;
  line-height: 1.78;
  color: rgba(11,18,32,.93);
  font-weight: 500;
}
.article-body .intro p{
  font-size: 16.6px;
  line-height: 1.82;
  color: rgba(11,18,32,.95);
}
.article-body p strong{ font-weight: 800; color: #07111f; }
.article-body ul,
.article-body ol{
  margin: 0 0 14px 1.1rem;
  padding: 0;
  max-width: var(--measure);
}
.article-body li{
  margin: 0 0 8px;
  line-height: 1.72;
}
.article-body blockquote{
  margin: 18px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(27,107,255,.35);
  background: rgba(255,255,255,.52);
  border-radius: 12px;
  max-width: var(--measure);
  font-style: italic;
}

.block{
  margin: 22px 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.18));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.block-label{
  display:inline-flex; align-items:center; gap:10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(27,107,255,.08);
  color: rgba(11,18,32,.84);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.block h2{
  margin: 10px 0 10px;
  font-size: clamp(1.25rem, 1.75vw, 1.62rem);
  line-height: 1.12;
}
.block-fig{
  margin: 14px 0 0;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--line);
  background:#0c1220;
}
.block-fig img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.recap{
  margin: 26px 0 10px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(3,8,16,.12);
}
.recap h2{
  margin: 0 0 10px;
  font-size: 1.35rem;
  line-height: 1.1;
}

.rail{
  position: sticky;
  top: 76px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.card{
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(3,8,16,.14);
  overflow:hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card .card-h{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-weight: 800;
  color: rgba(11,18,32,.88);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.card .card-b{ padding: 12px 14px; }

.toc a{
  display:block;
  padding:7px 8px;
  border-radius:12px;
  color: rgba(11,18,32,.86);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
}
.toc a:hover{background: rgba(27,107,255,.08); text-decoration:none}
.toc small{color: var(--muted); font-weight:700}

.cta-grid{display:grid; gap:10px}
.cta{
  display:block;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.68);
}
.cta:hover{ text-decoration:none; border-color: rgba(27,107,255,.25) }
.cta-title{ font-weight: 800; color: rgba(11,18,32,.95); margin-bottom:2px; font-size: 14px; }
.cta-text{ color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.social-links{display:flex; gap:10px; flex-wrap:wrap}
.social-links a{
  font-weight:800; font-size:12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.66);
  color: rgba(11,18,32,.84);
}
.social-links a:hover{background: rgba(27,107,255,.08); text-decoration:none}

.share a{
  display:block;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.66);
  color: rgba(11,18,32,.84);
  font-weight: 750;
  margin-bottom: 8px;
  font-size: 13px;
}
.share a:hover{background: rgba(27,107,255,.08); text-decoration:none}

.ad-slot{
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.10));
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.ad-placeholder{
  color: rgba(84,98,122,.95);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 10px;
}

.site-footer{
  border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.foot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding: 18px 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}
.foot-links{display:flex; gap:10px; flex-wrap:wrap}
.foot a{ font-weight: 700; }

@media (max-width: 980px){
  .shell{ grid-template-columns: 1fr; }
  .rail{ position: static; }
}
@media (max-width: 560px){
  .container{ padding: 0 14px; }
  .nav{ align-items:flex-start; }
  .links{ gap: 8px; }
  .links a{ padding: 7px 8px; font-size: 13px; }
  .article-header, .article-body{ padding-left: 16px; padding-right: 16px; }
  .brand img{ height: 38px; }
  h1{ font-size: clamp(1.75rem, 7vw, 2.15rem); }
  .subheadline{ font-size: 15px; }
  .article-body p{ font-size: 15px; }
}

/* ===== Square card refresh (professional angular frame) ===== */
:root{
  --radius: 0px;
  --radius2: 0px;
}

.article,
.block,
.recap,
.card,
.cta,
.share a,
.ad-slot,
.block-fig,
.hero{
  border-radius: 0 !important;
  position: relative;
  border-color: rgba(9,16,28,.20) !important;
  box-shadow:
    0 14px 32px rgba(5,10,18,.12),
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 0 0 2px rgba(9,16,28,.045) !important;
}

.article::before,
.block::before,
.recap::before,
.card::before,
.cta::before,
.share a::before,
.ad-slot::before,
.block-fig::before,
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)) top left / 26px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)) top left / 1px 26px no-repeat,
    linear-gradient(rgba(27,107,255,.35), rgba(27,107,255,.35)) top right / 30px 1px no-repeat,
    linear-gradient(rgba(27,107,255,.35), rgba(27,107,255,.35)) top right / 1px 20px no-repeat,
    linear-gradient(rgba(124,58,237,.28), rgba(124,58,237,.28)) bottom left / 22px 1px no-repeat,
    linear-gradient(rgba(124,58,237,.28), rgba(124,58,237,.28)) bottom left / 1px 20px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) bottom right / 18px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) bottom right / 1px 18px no-repeat;
  opacity:.95;
}

.card .card-h,
.card .card-b,
.links a,
.social-links a,
.share a,
.cta{
  border-radius: 0 !important;
}

.block-fig img,
.hero img{
  border-radius: 0 !important;
}

.site-header{
  border-radius: 0 !important;
}

@media (max-width: 560px){
  .article,
  .block,
  .recap,
  .card,
  .cta,
  .share a,
  .ad-slot,
  .block-fig,
  .hero{
    box-shadow:
      0 10px 22px rgba(5,10,18,.10),
      inset 0 0 0 1px rgba(255,255,255,.24),
      inset 0 0 0 2px rgba(9,16,28,.04) !important;
  }
}

.toc-links{display:block}

/* ===== Homepage main page system ===== */
.home-main{padding:18px 0 44px}
.home-grid{display:grid; gap:18px}
.home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:16px;
  padding:18px;
}
.home-panel{
  background: var(--paper-soft);
  border:1px solid var(--line);
  box-shadow: 0 14px 34px rgba(3,8,16,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position:relative;
}
.home-panel::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)) top left / 26px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)) top left / 1px 26px no-repeat,
    linear-gradient(rgba(27,107,255,.35), rgba(27,107,255,.35)) top right / 30px 1px no-repeat,
    linear-gradient(rgba(27,107,255,.35), rgba(27,107,255,.35)) top right / 1px 20px no-repeat,
    linear-gradient(rgba(124,58,237,.28), rgba(124,58,237,.28)) bottom left / 22px 1px no-repeat,
    linear-gradient(rgba(124,58,237,.28), rgba(124,58,237,.28)) bottom left / 1px 20px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) bottom right / 18px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) bottom right / 1px 18px no-repeat;
  opacity:.95;
}
.home-panel > *{position:relative; z-index:2}
.home-hero h1{margin:4px 0 8px; font-size: clamp(2.05rem,3vw,2.8rem)}
.home-hero p{margin:0 0 12px; max-width:64ch}
.home-kicker{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:10px;
  padding:6px 10px; border:1px solid var(--line); background:rgba(255,255,255,.58);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:11px;
}
.home-search-box{
  border:1px solid var(--line); background:rgba(255,255,255,.72); padding:12px;
}
.home-search-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.home-search-row input{
  flex:1 1 260px; min-width:220px; border:1px solid rgba(9,16,28,.16);
  background:rgba(255,255,255,.9); color:#07111f; padding:12px 12px;
  font:600 14px/1.2 var(--font-ui);
}
.home-search-row input:focus{outline:2px solid rgba(27,107,255,.22); outline-offset:1px}
.home-btn{
  border:1px solid rgba(9,16,28,.18); background:linear-gradient(180deg, rgba(27,107,255,.95), rgba(27,107,255,.78));
  color:#fff; padding:11px 12px; font:800 13px/1 var(--font-ui); letter-spacing:.03em; text-transform:uppercase;
  cursor:pointer; min-height:40px;
}
.home-btn.secondary{
  background:rgba(255,255,255,.74); color:#07111f; border-color:rgba(9,16,28,.14);
}
.home-chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.home-chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 10px;
  border:1px solid var(--line); background:rgba(255,255,255,.58); color:#081321;
  font-weight:700; font-size:12px; text-decoration:none; cursor:pointer;
}
.home-chip.active, .home-chip:hover{background:rgba(27,107,255,.10); text-decoration:none}
.home-meta-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.home-meta-card{border:1px solid var(--line); background:rgba(255,255,255,.6); padding:12px}
.home-meta-card .label{font:800 11px/1 var(--font-ui); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px}
.home-meta-card .value{font:700 14px/1.35 var(--font-ui); color:#081321}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:12px}
.section-head h2{margin:0; font-size:1.5rem}
.section-head p{margin:0; color:var(--muted); font-size:13px; font-weight:600}
.home-two-col{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px}
.panel-pad{padding:16px}
.cards-grid{display:grid; gap:12px}
.post-card{
  display:grid; grid-template-columns: 220px 1fr; gap:14px; align-items:stretch;
  border:1px solid var(--line); background:rgba(255,255,255,.72); text-decoration:none; color:inherit;
  box-shadow: 0 8px 20px rgba(5,10,18,.08);
}
.post-card:hover{border-color:rgba(27,107,255,.28); background:rgba(255,255,255,.82); text-decoration:none}
.post-card .thumb{background:#0c1220; min-height:140px; display:block; overflow:hidden}
.post-card .thumb img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; display:block}
.post-card .content{padding:12px 12px 12px 0}
.post-card h3,.post-card h2{
  margin:0 0 6px; font-family:var(--font-display); font-weight:600;
  font-size:1.16rem; line-height:1.14; letter-spacing:-.012em;
}
.post-card .meta{margin:0 0 8px; font-size:11.5px}
.post-card .excerpt{margin:0 0 10px; color:rgba(11,18,32,.88); line-height:1.55; font-size:13.5px; max-width:60ch}
.post-card .btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 10px;
  border:1px solid rgba(27,107,255,.18); background:rgba(27,107,255,.08);
  color:#0f4fcb; font:800 12px/1 var(--font-ui); text-transform:uppercase; letter-spacing:.06em;
}
.post-card .btn:hover{text-decoration:none; background:rgba(27,107,255,.14)}
.post-card .tagline{font-weight:800; color:#081321}
.home-count{font-size:12px; color:var(--muted); font-weight:700}
.home-side-stack{display:grid; gap:12px}
.link-list{display:grid; gap:6px}
.link-list a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 10px; border:1px solid var(--line); background:rgba(255,255,255,.62); color:#081321; font-weight:700; font-size:13px;
}
.link-list a:hover{background:rgba(27,107,255,.10); text-decoration:none}
.link-list small{color:var(--muted); font-weight:700}
.category-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.category-grid a{padding:10px; border:1px solid var(--line); background:rgba(255,255,255,.62); color:#081321; font-weight:700; font-size:12px; line-height:1.25}
.category-grid a:hover{background:rgba(27,107,255,.10); text-decoration:none}
.area-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.area-card{border:1px solid var(--line); background:rgba(255,255,255,.66); padding:12px}
.area-card h3{margin:0 0 6px; font-size:1rem; font-family:var(--font-ui); font-weight:800; letter-spacing:.01em}
.area-card p{margin:0; color:var(--muted); font-size:12.5px; line-height:1.5}
.ad-banner{padding:6px; min-height:84px; background:rgba(255,255,255,.38)}
.ad-banner img{width:100%; height:auto; display:block; border:1px solid rgba(9,16,28,.14)}
.ad-banner-fallback{padding:12px; width:100%; text-align:center; color:#0f4fcb; font-weight:800; font-size:13px; background:rgba(255,255,255,.75)}
.home-feature-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.feature-tile{border:1px solid var(--line); background:rgba(255,255,255,.68); padding:12px; min-height:118px}
.feature-tile h3{margin:0 0 6px; font-size:1rem; font-family:var(--font-ui); font-weight:800}
.feature-tile p{margin:0; color:var(--muted); font-size:12.5px; line-height:1.5}
.home-cta-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.home-note{font-size:12px; color:var(--muted); line-height:1.55}
.faq-list details{border:1px solid var(--line); background:rgba(255,255,255,.66); padding:10px; margin-bottom:8px}
.faq-list summary{cursor:pointer; font-weight:800; color:#081321}
.faq-list p{margin:8px 0 0; color:rgba(11,18,32,.90); font-size:13.5px; line-height:1.6}
.home-footer-grid{display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:12px}
.muted{color:var(--muted)}
.empty-feed-note{padding:12px; border:1px dashed rgba(9,16,28,.18); color:var(--muted); background:rgba(255,255,255,.45); font-size:13px}
[data-hidden='true']{display:none !important}

@media (max-width: 980px){
  .home-hero, .home-two-col{grid-template-columns:1fr}
  .home-meta-grid, .home-feature-grid, .home-cta-row, .home-footer-grid{grid-template-columns:1fr}
  .area-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .post-card{grid-template-columns:1fr}
  .post-card .content{padding:12px}
  .category-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .home-main{padding-top:12px}
  .home-hero{padding:12px}
  .home-search-row{display:grid; grid-template-columns:1fr}
  .home-search-row input{min-width:0}
  .area-grid, .category-grid{grid-template-columns:1fr}
}
/* ===== End homepage main page system ===== */