:root { --navy: #06172d; --blue: #1984ff; --sky: #b9d9ff; --cream: #f4f0e8; --ink: #142a46; --line: rgba(164, 204, 246, .42); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body { margin: 0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
.hero { min-height: 780px; position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; overflow: hidden; color: white; }
.hero-image, .hero-wash { position: absolute; inset: 0; z-index: -2; }
.hero-image { background: url('images/ai365-hero.png') center / cover no-repeat; }
.hero-wash { z-index: -1; background: linear-gradient(90deg, rgba(3, 12, 27, .9), rgba(3, 12, 27, .6) 49%, rgba(3, 12, 27, .08)), linear-gradient(0deg, rgba(3, 12, 27, .84), transparent 55%); }
nav { display: flex; align-items: center; justify-content: space-between; padding: 15px clamp(24px, 5vw, 84px) 14px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.brand { display: inline-flex; align-items: center; gap: 12px; }.brand span { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #a9d4ff; border-radius: 50%; font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0; }.back { border-bottom: 1px solid #a9d4ff; padding-bottom: 3px; color: #d7ecff; }
.hero-content { align-self: center; max-width: 850px; margin: 0 clamp(24px, 10vw, 174px); padding: 60px 0 70px; }
.eyebrow { margin: 0 0 18px; color: #9cd0ff; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }.eyebrow.dark { color: #156ecc; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; } h1 { margin: 0; font-size: clamp(52px, 6.3vw, 104px); line-height: .9; letter-spacing: -.065em; } h1 em { color: #9ed4ff; } .lede { max-width: 580px; margin: 29px 0 0; color: #e0efff; font-size: clamp(18px, 1.45vw, 23px); line-height: 1.48; }.trigger { position: absolute; left: 50%; bottom: 135px; width: min(340px, 22vw); margin: 0; padding: 13px 16px; background: rgba(3, 20, 48, .22); color: #c8e5ff; font-size: 14px; line-height: 1.55; text-align: center; transform: translateX(-50%); }.trigger strong { display: block; color: #ffffff; font-weight: 700; text-align: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 25px; padding: 14px 18px; font-size: 14px; font-weight: 700; }.primary { background: var(--blue); color: white; }.secondary { border: 1px solid rgba(204, 231, 255, .8); color: #e8f6ff; }.button span { font-size: 20px; }
.availability { position: absolute; right: clamp(24px, 5vw, 84px); bottom: 125px; width: 244px; padding: 21px 22px; border: 1px solid rgba(141, 207, 255, .7); background: rgba(3, 20, 48, .72); backdrop-filter: blur(7px); }.availability p { margin: 0 0 13px; color: #a7d7ff; font-weight: 700; line-height: 1.05; text-transform: uppercase; }.availability p .this-month { display: inline; margin: 0; color: #b9e0ff; font-size: 15px; letter-spacing: .08em; }.availability p .availability-word { display: inline; margin: 0 0 0 5px; color: #a7d7ff; font-size: 10px; letter-spacing: .12em; }.availability strong { display: block; font: 400 31px/.98 Georgia, 'Times New Roman', serif; }.availability > span { display: block; margin-top: 13px; color: #d7eafa; font-size: 12px; }
.promise { display: grid; grid-template-columns: .58fr 1.42fr; gap: 8vw; padding: 105px clamp(24px, 8vw, 145px); background: var(--cream); }.promise h2, .session h2, .closing h2 { margin: 0; font-size: clamp(36px, 4.4vw, 68px); line-height: .98; letter-spacing: -.06em; }.promise p:not(.eyebrow) { max-width: 700px; margin: 27px 0 0; color: #43566d; font-size: 20px; line-height: 1.5; }
.session { padding: 105px clamp(24px, 8vw, 145px); background: var(--navy); color: white; }.session header { max-width: 780px; }.session-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 1250px; margin-top: 64px; }.session-grid article { min-height: 248px; padding: 29px; background: rgba(255, 255, 255, .055); }.session-grid span { color: #91c8ff; font-size: 12px; font-weight: 700; letter-spacing: .13em; }.session-grid h3 { margin: 35px 0 13px; font-size: 30px; letter-spacing: -.045em; }.session-grid p { margin: 0; color: #d2e1f1; line-height: 1.48; }
.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 clamp(24px, 8vw, 145px) 105px; background: var(--navy); }.detail-card { padding: 28px; background: #0d2748; color: white; }.detail-card span { color: #8ac3ff; font-size: 11px; font-weight: 800; letter-spacing: .15em; }.detail-card strong { display: block; margin-top: 17px; font: 400 30px/1 Georgia, 'Times New Roman', serif; }.detail-card p { margin: 12px 0 0; color: #c4d8ee; font-size: 14px; line-height: 1.4; }
.closing { padding: 110px 24px; background: #dbeaff; text-align: center; }.closing .eyebrow { color: #155aab; }.closing h2 { max-width: 900px; margin: 0 auto; }.closing .button { margin-top: 34px; } footer { padding: 26px 7vw; background: var(--navy); color: #a6bed9; font-size: 12px; }
@media (max-width: 750px) { .hero { min-height: 790px; }.hero-content { margin: 0 24px; padding-bottom: 183px; }.availability { right: 24px; bottom: 28px; }.trigger { left: 24px; bottom: 172px; width: calc(100% - 48px); }.promise { grid-template-columns: 1fr; gap: 28px; padding: 76px 24px; }.promise p:not(.eyebrow) { font-size: 18px; }.session { padding: 76px 24px; }.session-grid, .details { grid-template-columns: 1fr; }.session-grid { margin-top: 42px; }.details { padding: 0 24px 76px; }.closing { padding: 82px 24px; } }