:root{
  --bg:#f7fbfe; --accent:#0b6fb8; --accent-2:#2b7fae; --muted:#657786; --card:#ffffff; --maxw:1240px;
  --gap:18px; --radius:12px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:var(--font-sans); background:var(--bg); color:#0b2540; padding:18px; -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 320px; gap:var(--gap); align-items:start;}

header{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; gap:12px; align-items:center}
.brand .logo{height:56px; width:56px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700}
nav{display:flex; gap:12px; align-items:center}
nav a{color:var(--accent-2); text-decoration:none; padding:6px 10px; border-radius:8px}
nav a:hover{background:rgba(11,111,184,0.06)}

.hero, .card{background:var(--card); padding:16px; border-radius:var(--radius); box-shadow:0 4px 20px rgba(11,111,184,0.04); margin-top:12px}

h1,h2,h3{margin:0 0 8px 0}
p,ul,li,blockquote{margin:0 0 8px 0; line-height:1.5}
ul{padding-left:20px}
blockquote{padding-left:12px; border-left:3px solid var(--accent-2); color:var(--muted)}

aside{grid-column:2/3}
.aside-card{background:var(--card); padding:12px; border-radius:var(--radius); box-shadow:0 4px 14px rgba(11,111,184,0.04); margin-bottom:12px}
.calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:8px}
.day{background:#f7fbff; padding:8px; border-radius:6px; text-align:center; font-size:0.9rem}

footer{grid-column:1/-1; margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:0.85rem; color:var(--muted)}

@media(max-width:1000px){
  .wrap{grid-template-columns:1fr; padding:12px}
  aside{order:3}
}
@media(max-width:560px){
  nav{display:none}
}
