/* Ascend Community Group – Mobile-first responsive styles (v3 with yellow theme) */
:root{
  --brand:#1f3c88;           /* deep blue accents */
  --brand-10: rgba(31,60,136,.10);
  --text:#0e152b;            /* dark navy for strong contrast */
  --muted:#4e5875;
  --bg:#fff8e6;              /* soft professional yellow */
  --surface:#fff2cc;         /* lighter surface yellow */
  --radius:14px; --shadow:0 8px 28px rgba(19,32,75,.08);
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); line-height:1.6}
img{max-width:100%; height:auto; display:block; border-radius:12px}
a{text-decoration:none; color:var(--brand)}

.container{max-width:1100px; margin:0 auto; padding:0 16px}
.section{padding:56px 0}
.section--alt{background:var(--surface)}

h1,h2,h3{line-height:1.2; margin:0 0 .55em; letter-spacing:-.015em}
h1{font-size: clamp(1.6rem, 5vw + 1rem, 2.4rem)}
h2{font-size: clamp(1.25rem, 2.8vw + 1rem, 1.9rem)}
h3{font-size:1.12rem}
p{margin:0 0 1em; color:var(--muted)}

.header{position:sticky; top:0; z-index:30; background:#fffef6; border-bottom:1px solid #e6ecfb; backdrop-filter:saturate(180%) blur(8px)}
.header__inner{display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px; padding:0 4px}
.brand{font-weight:700; color:var(--brand); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav{display:flex; gap:20px; align-items:center}
.nav a{color:#20263a; opacity:.9}
.nav a.btn{color:#fff}

.nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #dbe3ff; border-radius:10px; background:#fff}
.nav-toggle span{width:18px; height:2px; background:#222; position:relative; display:block}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:#222}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}

.nav-mobile{display:none; position:fixed; inset:64px 0 0 0; background:#fffef6; padding:16px; border-top:1px solid #e6ecfb; overflow:auto}
.nav-mobile a{display:block; padding:14px 10px; border-radius:10px; border:1px solid #eef1ff; margin-bottom:10px; color:#20263a; background:#ffffff}
.nav-open .nav-mobile{display:block}

.btn{display:inline-block; background:var(--brand); color:#fff; padding:12px 16px; border-radius:12px; font-weight:600; box-shadow:var(--shadow)}
.btn--ghost{background:transparent; border:1px solid #dee6ff; color:#20263a}

.grid-2{display:grid; grid-template-columns:1fr; gap:20px; align-items:center}
@media (min-width: 860px){
  .container{padding:0 20px}
  .section{padding:72px 0}
  .grid-2{grid-template-columns:1.05fr .95fr; gap:28px}
  .nav-toggle{display:none}
  .nav{display:flex}
  .nav-mobile{display:none !important}
}

.hero{background:linear-gradient(180deg, var(--brand-10), transparent)}
.badges{display:flex; gap:10px; list-style:none; margin:12px 0 0; padding:0; flex-wrap:wrap}
.badges li{background:#fff; border:1px solid #e8edfb; padding:8px 12px; border-radius:999px; font-size:.9rem}

.cards{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width: 860px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px} }
.card{background:#fff; border:1px solid #e9eefb; border-radius:14px; padding:16px; box-shadow:var(--shadow)}
.card__media{margin-top:10px}

.notice{background:#fff; border:1px dashed #cfd8ff; padding:14px; border-radius:12px; font-size:.95rem; color:#4f5770}

footer{background:#0f1a3b; color:#dfe6ff}
.footer__inner{max-width:1100px; margin:0 auto; padding:24px 16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
footer a{color:#dfe6ff}

input, textarea{font:inherit}
input, textarea, select, button{touch-action:manipulation}
label input, label textarea{width:100%; padding:12px; border-radius:12px; border:1px solid #dfe6ff}