:root { --navy:#102d63; --ink:#1d3155; --coral:#ff725e; --turquoise:#14b9c3; --purple:#8965c9; --cream:#fff9ec; --yellow:#ffc849; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"M PLUS Rounded 1c", sans-serif; }
main { overflow:hidden; }
.hero { position:relative; padding:30px max(20px, calc((100vw - 560px) / 2 + 20px)) 42px; color:var(--white); background:radial-gradient(circle at 82% 10%, #7751bc 0 14%, transparent 14.3%), linear-gradient(145deg, #102d63 0%, #153773 59%, #263e7a 100%); text-align:center; isolation:isolate; }
.hero::after { position:absolute; z-index:-1; right:-120px; bottom:-100px; width:300px; height:300px; border:45px solid rgba(255,255,255,.08); border-radius:50%; content:""; }
.hero__confetti { position:absolute; inset:14px 10% auto; display:flex; justify-content:space-between; color:#ffda63; font-size:1.7rem; transform:rotate(-7deg); }.hero__confetti span:nth-child(2),.hero__confetti span:nth-child(4) { color:#ff8a76; font-size:1rem; }
.eyebrow { position:relative; margin:0 0 22px; color:#ffdc72; font-size:.67rem; font-weight:900; letter-spacing:.12em; }
.hero__title-wrap { position:relative; padding:18px 12px 17px; border-radius:30px; background:#fffdf6; box-shadow:0 10px 0 rgba(4,20,54,.18); }.title-kicker { margin:0 0 2px; color:var(--turquoise); font-size:clamp(1.15rem, 5.4vw, 1.65rem); font-weight:900; letter-spacing:.02em; }.hero h1 { margin:0; color:var(--coral); font-size:clamp(3rem, 13vw, 4.6rem); font-weight:900; line-height:.95; letter-spacing:-.08em; text-shadow:2px 3px 0 #ffe1a2; }.hero h1 span { display:inline-block; margin-left:7px; font-size:.58em; vertical-align:top; transform:rotate(10deg); }.hero__lead { margin:25px 0 14px; font-size:1.05rem; font-weight:900; }.hero__badges { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }.hero__badges span { padding:7px 12px; border:1px solid rgba(255,255,255,.6); border-radius:99px; background:rgba(255,255,255,.15); font-size:.73rem; font-weight:800; }.hero__image-wrap { width:min(410px, 98%); margin:27px auto 0; border:5px solid var(--white); border-radius:50%; background:#fff; box-shadow:0 12px 0 rgba(3,20,54,.28); overflow:hidden; }.hero__image-wrap img { display:block; width:100%; }.members-note { display:inline-block; margin:25px 0 0; padding:8px 13px; border-radius:9px; color:#ffedbd; background:rgba(0,0,0,.17); font-size:.73rem; font-weight:700; }
.section { width:min(680px, 100%); margin:0 auto; padding:66px 24px; }.section-label { margin:0 0 9px; color:var(--coral); font-size:.72rem; font-weight:900; letter-spacing:.13em; }.intro h2,.examples h2,.event-info h2 { margin:0; color:var(--navy); font-size:clamp(1.85rem, 8.4vw, 2.7rem); font-weight:900; line-height:1.35; letter-spacing:-.06em; }.intro h2 em { color:var(--coral); font-style:normal; }.intro > p:last-child { margin:24px 0 0; color:#536583; font-size:1rem; font-weight:500; line-height:1.95; }
.talks { display:grid; gap:14px; width:min(680px, 100%); margin:0 auto; padding:0 24px 65px; }.talk-card { position:relative; min-height:142px; padding:22px 24px; border:3px solid var(--navy); border-radius:22px; color:var(--white); box-shadow:7px 7px 0 var(--navy); overflow:hidden; }.talk-card::after { position:absolute; right:-18px; bottom:-34px; width:115px; height:115px; border:18px solid rgba(255,255,255,.18); border-radius:50%; content:""; }.talk-card--coral { background:var(--coral); }.talk-card--turquoise { background:var(--turquoise); }.talk-card--purple { background:var(--purple); }.talk-card__number { margin:0 0 3px; color:rgba(255,255,255,.72); font-size:.7rem; font-weight:900; letter-spacing:.1em; }.talk-card h3 { position:relative; z-index:1; margin:0 0 5px; font-size:1.32rem; }.talk-card p:last-child { position:relative; z-index:1; margin:0; font-size:.88rem; font-weight:700; line-height:1.6; }
.examples { max-width:none; background:#f1eaff; }.examples__heading,.use-case-list,.examples__note { width:min(632px, 100%); margin-left:auto; margin-right:auto; }.use-case-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; padding:0; margin-top:28px; list-style:none; }.use-case-list li { padding:12px 12px 12px 31px; border-radius:14px; color:#4e3e78; background:#fff; box-shadow:0 3px 0 #d9ccef; font-size:.8rem; font-weight:800; line-height:1.45; }.use-case-list li::before { display:inline-grid; place-items:center; width:17px; height:17px; margin-left:-22px; margin-right:5px; border-radius:50%; color:#fff; background:var(--purple); content:"✓"; font-size:.65rem; }.examples__note { margin-top:25px; margin-bottom:0; color:#685c7d; font-size:.9rem; font-weight:700; line-height:1.8; }
.event-info { padding:65px max(24px, calc((100vw - 632px) / 2)); background:var(--cream); }.event-info dl { display:grid; gap:11px; margin:30px 0 20px; }.event-info dl div { display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:start; padding:16px; border:2px solid #e4d9c4; border-radius:16px; background:var(--white); }.event-info dt { display:inline-flex; justify-content:center; padding:5px 6px; border-radius:7px; color:var(--white); background:var(--turquoise); font-size:.75rem; font-weight:900; }.event-info dd { margin:0; color:var(--ink); font-size:.9rem; font-weight:800; line-height:1.65; }.event-info small { color:#60708a; font-size:.76rem; font-weight:500; }.event-info__rule { margin:0; color:#6c7080; font-size:.76rem; text-align:center; }.event-info__cta { margin-top:26px; padding:23px 17px; border-radius:20px; color:var(--white); background:var(--navy); text-align:center; box-shadow:0 7px 0 #091b3d; }.event-info__cta strong { display:block; font-size:.98rem; line-height:1.6; }.event-info__cta span { display:block; margin-top:10px; color:#ffe17d; font-size:.75rem; font-weight:800; }
footer { padding:28px 20px 38px; color:#fff; background:#0b234d; text-align:center; } footer p { margin:0 0 6px; font-size:.85rem; font-weight:900; } footer span { color:#b9dfea; font-size:.72rem; font-weight:700; }
@media (min-width:560px) { .hero { padding-top:42px; }.talks { grid-template-columns:repeat(3, 1fr); }.talk-card { min-height:190px; }.use-case-list { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:360px) { .hero { padding-inline:16px; }.section { padding-inline:20px; }.event-info { padding-inline:20px; }.event-info dl div { grid-template-columns:72px 1fr; padding:13px; }.use-case-list { grid-template-columns:1fr; } }