/* Angelio hub: "Wings". A bright morning sky, soft clouds and a floating feather. */
:root { --sky: #5bb4ff; --sky-2: #dff1ff; --ink: #183153; --muted: #4b6584; --sun: #ffc93c; --card: #ffffff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 12px; }
body { margin: 0; color: var(--ink); font: 17px/1.55 Nunito, system-ui, sans-serif; background: linear-gradient(#7cc4ff 0, #bfe3ff 420px, #f2f9ff 900px) #f2f9ff no-repeat; min-height: 100vh; overflow-x: hidden; }
a { color: #2a6db3; }
main { max-width: 920px; margin: 0 auto; padding: 0 16px 40px; position: relative; overflow-x: clip; }
html { overflow-x: clip; }
header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 14px 0; position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 8px; font: 800 1.5rem "Baloo 2", sans-serif; color: #fff; text-shadow: 0 2px 0 #3a8fd9; text-decoration: none; }
.brand img { border-radius: 10px; box-shadow: 0 2px 0 #3a8fd9; }
nav { margin-left: auto; display: flex; gap: 6px; }
nav a { color: #fff; text-decoration: none; font-weight: 800; background: rgb(255 255 255 / .25); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
nav a:hover { background: rgb(255 255 255 / .4); }
/* Phones: three equal buttons that always fit (they wrap their text if the phone uses big fonts). */
@media (max-width: 560px) {
  nav { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  nav a { font-size: .88rem; padding: 6px 4px; text-align: center; white-space: normal; line-height: 1.15; display: flex; align-items: center; justify-content: center; }
}
.hero { text-align: center; padding: 22px 0 56px; position: relative; }
.hero > * { position: relative; z-index: 1; }
.sun { position: absolute !important; z-index: 0 !important; right: 4%; top: 0; width: 90px; height: 90px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 14px rgb(255 201 60 / .25), 0 0 60px var(--sun); }
.feather { font-size: 4rem; display: inline-block; animation: drift 5s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .12)); }
@keyframes drift { 0%, 100% { transform: translate(-10px, 0) rotate(-14deg); } 50% { transform: translate(10px, -12px) rotate(10deg); } }
h1 { font: 800 clamp(2.4rem, 9vw, 4rem)/1 "Baloo 2", sans-serif; color: #fff; text-shadow: 0 3px 0 #3a8fd9, 0 8px 20px rgb(30 80 150 / .3); margin: 6px 0 12px; }
.lede { max-width: 32em; margin: 0 auto 20px; font-size: 1.12rem; font-weight: 700; color: #1f4470; }
.cta { display: inline-block; background: var(--sun); color: #4a3300; font: 800 1.2rem "Baloo 2", sans-serif; padding: 12px 30px; border-radius: 999px; text-decoration: none; box-shadow: 0 5px 0 #d99a12; }
.cta:active { transform: translateY(4px); box-shadow: none; }
.cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .9; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
/* The sky spans the whole window (not just the centered column), clouds drift at the edges. */
body { position: relative; }
.sky { position: absolute; left: 0; right: 0; top: 0; height: 640px; overflow: hidden; pointer-events: none; z-index: 0; }
main { z-index: 1; }
.c1 { width: 140px; height: 44px; left: 3%; top: 300px; } .c1::before { width: 60px; height: 60px; left: 22px; top: -30px; } .c1::after { width: 44px; height: 44px; left: 70px; top: -20px; }
.c2 { width: 110px; height: 36px; right: 4%; top: 380px; } .c2::before { width: 48px; height: 48px; left: 18px; top: -24px; } .c2::after { width: 34px; height: 34px; left: 58px; top: -16px; }
.c3 { width: 170px; height: 52px; left: 14%; top: 120px; opacity: .7; } .c3::before { width: 70px; height: 70px; left: 30px; top: -36px; } .c3::after { width: 50px; height: 50px; left: 90px; top: -24px; }
.c4 { width: 150px; height: 46px; right: 16%; top: 210px; opacity: .75; } .c4::before { width: 62px; height: 62px; left: 26px; top: -32px; } .c4::after { width: 44px; height: 44px; left: 80px; top: -20px; }
@media (max-width: 700px) { .c3, .c4 { display: none; } }
.subject h2 { font: 800 1.6rem "Baloo 2", sans-serif; margin: 34px 0 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.cardc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 16px 18px; border-radius: 36px 36px 28px 28px; text-decoration: none; color: var(--ink);
  background: var(--card); box-shadow: 0 8px 0 #cfe6fb, 0 16px 30px rgb(40 100 170 / .12); transition: transform .2s; }
a.cardc:hover { transform: translateY(-5px) rotate(-1deg); }
a.cardc:active { transform: translateY(4px); box-shadow: 0 2px 0 #cfe6fb; }
.cardc img, .cardc .em { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; font-size: 2.6rem; background: var(--sky-2); }
.cardc b { font: 800 1.3rem "Baloo 2", sans-serif; }
.cardc small { background: var(--sky-2); color: #2a6db3; font-weight: 800; font-size: .78rem; padding: 2px 10px; border-radius: 999px; }
.cardc p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.35; }
.cardc.soon { opacity: .55; box-shadow: none; background: rgb(255 255 255 / .55); border: 2px dashed #b9d8f5; }
.panel { margin-top: 36px; padding: 22px; border-radius: 28px; background: #fff; box-shadow: 0 8px 0 #cfe6fb; }
.panel h2 { font: 800 1.5rem "Baloo 2", sans-serif; margin: 0 0 6px; }
.panel h3 { margin: 10px 0 4px; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.duo div { background: var(--sky-2); border-radius: 20px; padding: 4px 14px 10px; }
.duo p { margin: 4px 0; }
footer { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 30px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #eaf3ff; --muted: #b4c7e0; --card: #1c2b45; --sky-2: #253a5c; }
  body { background: linear-gradient(#1d3a66 0, #142744 420px, #0f1c33 900px) #0f1c33 no-repeat; }
  .lede { color: #d6e7ff; } .cardc { box-shadow: 0 8px 0 #0b1526; } .panel { box-shadow: 0 8px 0 #0b1526; }
  .cloud, .cloud::before, .cloud::after { background: #2b4470; } .cardc small { color: #9fcdff; } a { color: #9fcdff; }
  .cardc.soon { background: rgb(28 43 69 / .55); border-color: #2b4470; }
}
@media (prefers-reduced-motion: reduce) { .feather { animation: none; } html { scroll-behavior: auto; } }