:root { --ag-ink: #253148; --ag-blue: #006cae; --ag-yellow: #ffd600; --ag-pink: #e780a1; --ag-mint: #69c7bb; --ag-paper: #fffdf7; }
.ag-page { --footer-color: var(--ag-blue); }
.ag-page { background: var(--ag-paper); color: var(--ag-ink); }
.ag-hero { overflow: hidden; padding: clamp(74px, 11vw, 152px) 0 90px; background: #fff; position: relative; }
.ag-hero::before, .ag-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.ag-hero::before { width: min(48vw, 690px); aspect-ratio: 1; right: -10vw; top: -18vw; background: var(--ag-yellow); }
.ag-hero::after { width: min(25vw, 350px); aspect-ratio: 1; right: 23vw; bottom: -15vw; background: var(--ag-pink); }
.ag-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .65fr; align-items: end; gap: 9vw; }
.ag-kicker { margin: 0 0 12px; color: var(--ag-blue); font-size: .71rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.ag-logo { margin: 0 0 26px; color: #2d3140; font-family: var(--font-heading, 'Lora', Georgia, serif); font-size: clamp(2.25rem, 4.6vw, 4.5rem); font-weight: 700; line-height: .72; letter-spacing: -.08em; }
.ag-logo span { display: block; color: var(--ag-blue); font-family: "Comic Sans MS", "Segoe Print", cursive; font-size: .56em; font-weight: 400; letter-spacing: -.1em; transform: translateX(.12em) rotate(-4deg); }
.ag-logo i { display: inline-block; color: var(--ag-pink); font-family: Arial, sans-serif; font-size: .35em; letter-spacing: -.19em; transform: translate(.14em, -.35em); }
.ag-official-logo { display: block; width: clamp(170px, 21vw, 275px); height: auto; margin: 0 0 28px; }
.ag-hero h1 { max-width: 760px; margin: 0; font-family: var(--font-heading, 'Lora', Georgia, serif); font-size: clamp(3.25rem, 6vw, 6.6rem); line-height: .9; }
.ag-hero h1 + p { max-width: 560px; margin: 25px 0 0; font-size: 1.08rem; }
.ag-button { display: inline-flex; gap: 10px; align-items: center; margin-top: 32px; padding: 13px 20px; border: 2px solid var(--ag-ink); background: var(--ag-yellow); color: var(--ag-ink); font-size: .84rem; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.ag-button:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ag-blue); }
.ag-hero-note { padding: 28px 30px; background: var(--ag-ink); color: #fff; box-shadow: 12px 12px 0 var(--ag-blue); transform: rotate(2deg); }
.ag-hero-note span { color: var(--ag-yellow); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ag-hero-note p { margin: 12px 0 0; font-family: var(--font-heading, 'Lora', Georgia, serif); font-size: 1.4rem; line-height: 1.18; }
.ag-hero-classic { min-height: 620px; display: flex; align-items: center; padding: 0; border-bottom: 5px solid var(--ag-blue); background: #e8f3f7; }
.ag-hero-classic::before { display: none; }
.ag-hero-classic::after { display: block; inset: 0; width: auto; height: auto; aspect-ratio: auto; z-index: 1; border-radius: 0; background: linear-gradient(90deg, rgba(252,249,248,.96) 0%, rgba(252,249,248,.94) 30%, rgba(252,249,248,.9) 44%, rgba(252,249,248,.72) 54%, rgba(252,249,248,.28) 64%, rgba(252,249,248,0) 76%); }
.ag-hero-classic > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.9); }
.ag-hero-classic::selection { background: var(--ag-yellow); }
.ag-hero-classic .ag-hero-grid { z-index: 2; width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: block; }
.ag-hero-classic .ag-kicker { color: var(--ag-blue); }
.ag-hero-classic .ag-official-logo { width: clamp(170px, 18vw, 245px); }
.ag-hero-classic h1 { max-width: 640px; font-size: clamp(3.65rem, 6.25vw, 6rem); }
@media (max-width: 820px) { .ag-hero-classic::after { background: linear-gradient(90deg, #fcf9f8 0%, rgba(252,249,248,.97) 65%, rgba(252,249,248,.85) 100%); } }
.ag-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; padding: 110px 0; }
.ag-intro h2, .ag-section-heading h2, .ag-download h2 { margin: 0; font-family: var(--font-heading, 'Lora', Georgia, serif); font-size: clamp(2.3rem, 4.1vw, 4.45rem); line-height: .96; letter-spacing: -.055em; }
.ag-intro div:last-child { max-width: 550px; padding-top: 18px; font-size: 1.06rem; }
.ag-intro a { color: var(--ag-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.ag-courses { padding: 100px 0 115px; background: var(--ag-ink); color: #fff; }
.ag-results { padding: 74px 0; background: var(--ag-yellow); color: var(--ag-ink); }
.ag-results-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(42px, 9vw, 140px); align-items: center; }
.ag-results .ag-kicker { color: #5a4b00; }
.ag-results h2 { margin: 0; max-width: 620px; font-family: var(--font-heading, 'Lora', Georgia, serif); font-size: clamp(2.25rem, 4vw, 4rem); line-height: .98; letter-spacing: -.055em; }
.ag-results p:not(.ag-kicker) { margin: 0; max-width: 520px; font-size: 1rem; }
.ag-results .ag-button { margin-top: 20px; background: #fffdf7; }
.ag-section-heading { display: grid; grid-template-columns: 1fr .65fr; gap: 8vw; align-items: end; margin-bottom: 44px; }
.ag-section-heading .ag-kicker { color: var(--ag-yellow); }
.ag-section-heading > p { margin: 0; color: #dce5f1; font-size: .95rem; }
.ag-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ag-course-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ag-course { min-width: 0; min-height: 338px; display: flex; flex-direction: column; padding: 26px; color: var(--ag-ink); background: #fff; border-bottom: 8px solid var(--ag-yellow); overflow-wrap: anywhere; }
.ag-course:hover { color: var(--ag-ink); transform: translateY(-5px) rotate(-.35deg); }
.ag-course-darm { background: #f3efdf; border-color: var(--ag-yellow); }
.ag-course-energy { background: #d9f0eb; border-color: var(--ag-mint); }
.ag-course-weight { background: #f5dae3; border-color: var(--ag-pink); }
.ag-course-food { background: #fff3b6; border-color: var(--ag-yellow); }
.ag-course-acid { background: #e8f3f7; border-color: var(--ag-blue); }
.ag-number { color: var(--ag-blue); font-size: .75rem; font-weight: 700; }
.ag-course strong { margin-top: 38px; font-family: var(--font-heading, 'Lora', Georgia, serif); font-size: 2.25rem; letter-spacing: -.06em; line-height: .97; hyphens: manual; }
.ag-course-grid--five .ag-course { min-height: 350px; padding: 23px; }
.ag-course-grid--five .ag-course strong { margin-top: 32px; font-size: clamp(1.55rem, 2.3vw, 2.1rem); }
.ag-course-grid--five .ag-course p { font-size: .88rem; }
.ag-course p { color: #455168; }
.ag-course > span:last-child { margin-top: auto; color: var(--ag-blue); font-size: .79rem; font-weight: 700; }
.ag-download { padding: 100px 0; background: var(--ag-yellow); }
.ag-download-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(35px, 9vw, 140px); align-items: center; }
.ag-download img { width: min(100%, 400px); margin: 0 auto; display: block; filter: drop-shadow(13px 16px 0 rgba(37,49,72,.25)); }
.ag-download p:not(.ag-kicker) { max-width: 550px; }
.ag-button-dark { background: var(--ag-ink); border-color: var(--ag-ink); color: #fff; }
.ag-button-dark:hover { box-shadow: 5px 5px 0 var(--ag-pink); }
.ag-build-hero { padding: 96px 0 108px; overflow: hidden; background: radial-gradient(circle at 82% 24%, var(--ag-yellow) 0 13%, transparent 13.2%), #e8f3f7; }
.ag-build-hero > .wrap { max-width: 920px; margin-left: max(24px, calc((100% - 1180px) / 2)); }
.ag-breadcrumb { display: inline-block; margin-bottom: 52px; color: var(--ag-blue); font-size: .82rem; font-weight: 700; }
.ag-build-hero h1 { max-width: 760px; margin: 0; color: var(--ag-ink); font-family: var(--font-heading, 'Lora', Georgia, serif); font-size: clamp(3.6rem, 7vw, 7.1rem); line-height: .88; letter-spacing: -.065em; }
.ag-build-hero h1 + p { max-width: 620px; margin: 26px 0 0; font-size: 1.05rem; }
.ag-first-aid, .ag-complete { padding: 100px 0; }
.ag-first-aid { background: #fffdf7; }
.ag-week-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; padding: 1px; list-style: none; background: rgba(0,108,174,.25); }
.ag-week-grid li { min-height: 210px; padding: 26px; background: #fff; }
.ag-week-grid span, .ag-module-list span { color: var(--ag-blue); font-size: .74rem; font-weight: 700; letter-spacing: .1em; }
.ag-week-grid strong { display: block; margin: 16px 0 9px; font-family: var(--font-heading, 'Lora', Georgia, serif); font-size: 1.5rem; letter-spacing: -.04em; }
.ag-week-grid p { margin: 0; color: #4d596c; font-size: .87rem; }
.ag-complete { background: var(--ag-blue); color: #fff; }
.ag-complete .ag-section-heading .ag-kicker { color: var(--ag-yellow); }
.ag-complete .ag-section-heading > p { color: rgba(255,255,255,.8); }
.ag-module-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.ag-module-list div { display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 20px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.23); }
.ag-module-list span { color: var(--ag-yellow); }
.ag-module-list p { margin: 0; font-size: .89rem; line-height: 1.45; }
.ag-platform { padding: 96px 0; background: #d9f0eb; }
.ag-platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px, 10vw, 150px); align-items: start; }
.ag-platform h2, .ag-combination h2 { margin: 0; font-family: var(--font-heading, 'Lora', Georgia, serif); font-size: clamp(2.35rem, 4vw, 4.1rem); line-height: .98; letter-spacing: -.055em; }
.ag-platform ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(37,49,72,.28); }
.ag-platform li { padding: 16px 0; border-bottom: 1px solid rgba(37,49,72,.28); font-size: .97rem; }
.ag-platform li::before { content: '✦'; margin-right: 11px; color: var(--ag-blue); }
.ag-combination { padding: 88px 0; background: #fffdf7; }
.ag-combination-grid { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(42px, 10vw, 150px); padding: clamp(34px, 5vw, 64px); background: #f5dae3; }
.ag-combination p:not(.ag-kicker) { margin: 0; color: #455168; }
.ag-combination .ag-button { margin-top: 22px; background: #fffdf7; }
@media (max-width: 1050px) { .ag-course-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .ag-hero-grid, .ag-intro, .ag-results-grid, .ag-section-heading, .ag-download-grid, .ag-platform-grid, .ag-combination-grid { grid-template-columns: 1fr; } .ag-hero-note { max-width: 430px; } .ag-course-grid { grid-template-columns: 1fr; } .ag-course-grid--five { grid-template-columns: repeat(2, 1fr); } .ag-course { min-height: 250px; } .ag-hero::before { width: 70vw; top: -15vw; } .ag-hero-classic { min-height: 535px; } .ag-hero-classic .ag-hero-grid { width: min(100% - 32px, 1180px); } .ag-week-grid { grid-template-columns: repeat(2, 1fr); } .ag-module-list { grid-template-columns: repeat(2, 1fr); } .ag-build-hero > .wrap { width: min(100% - 48px, 1180px); margin: 0 auto; } }
@media (max-width: 560px) { .ag-course-grid--five, .ag-week-grid, .ag-module-list { grid-template-columns: 1fr; } .ag-first-aid, .ag-complete, .ag-platform, .ag-combination { padding: 68px 0; } .ag-build-hero { padding: 66px 0 76px; } .ag-breadcrumb { margin-bottom: 40px; } .ag-build-hero > .wrap { width: min(100% - 32px, 1180px); } }