:root {
  --ink: #17213d;
  --ink-soft: #526078;
  --cream: #fffaf5;
  --paper: #f6f1eb;
  --teal: #2ea7a3;
  --teal-deep: #1d7778;
  --coral: #ed725b;
  --gold: #f3bd5d;
  --lavender: #e9e1fb;
  --plum: #6f527e;
  --line: rgba(23, 33, 61, .12);
  --shadow-lg: 22px 25px 52px rgba(24, 36, 69, .14), -16px -16px 36px rgba(255, 255, 255, .72);
  --shadow-sm: 9px 10px 21px rgba(27, 39, 74, .12), -8px -8px 16px rgba(255, 255, 255, .72);
  --radius-xl: 36px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --shell: 1200px;
  --transition: 240ms cubic-bezier(.2,.72,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; overflow-x: hidden; }
body.dialog-open { overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.04em; line-height: 1.03; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #f7c064; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 18px; top: -60px; padding: 10px 15px; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 800; box-shadow: var(--shadow-sm); transition: top var(--transition); }
.skip-link:focus { top: 18px; }
.shell { width: min(calc(100% - 44px), var(--shell)); margin-inline: auto; }
.page-noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

/* Navigation */
.site-header { position: fixed; z-index: 60; inset: 0 0 auto; padding: 15px 0; transition: padding var(--transition), background var(--transition), box-shadow var(--transition); }
.site-header.is-scrolled { padding: 9px 0; background: rgba(255, 250, 245, .83); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(23,33,61,.07); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 900; font-size: 1.08rem; letter-spacing: -.06em; }
.brand > span:last-child > span { color: var(--coral); }
.brand-mark { display: inline-flex; position: relative; width: 30px; height: 30px; border-radius: 12px; background: linear-gradient(135deg, var(--coral), #fa9878); box-shadow: inset -3px -3px 6px rgba(172,67,44,.18), inset 3px 3px 6px rgba(255,255,255,.35), 4px 6px 10px rgba(237,114,91,.26); overflow: hidden; }
.brand-mark i { position: absolute; display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); }
.brand-mark i:nth-child(1) { top: 7px; left: 7px; }.brand-mark i:nth-child(2) { top: 12px; left: 13px; }.brand-mark i:nth-child(3) { top: 18px; left: 19px; }
.primary-nav { display: flex; align-items: center; gap: 27px; font-size: .88rem; font-weight: 750; }
.primary-nav > a:not(.nav-cta) { position: relative; color: #38435c; }.primary-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; border-radius: 2px; background: var(--coral); transition: width var(--transition); }.primary-nav > a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta { padding: 10px 14px 10px 17px; border-radius: 999px; color: #fff; background: var(--ink); box-shadow: inset 1px 1px 0 rgba(255,255,255,.15), 4px 5px 12px rgba(23,33,61,.18); transition: transform var(--transition), box-shadow var(--transition); }.nav-cta:hover { transform: translateY(-2px); box-shadow: inset 1px 1px 0 rgba(255,255,255,.15), 7px 9px 15px rgba(23,33,61,.22); }
.nav-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 14px; color: var(--ink); background: #fff9f4; box-shadow: var(--shadow-sm); }.nav-toggle span:not(.sr-only) { display: block; width: 19px; height: 2px; margin: 5px auto; background: currentColor; transition: transform var(--transition); }

/* Shared typography, accents & waves */
.section-with-wave { position: relative; overflow: hidden; padding: 116px 0 178px; }
.wave-divider { position: absolute; z-index: 3; right: 0; bottom: -1px; left: 0; width: 100%; height: 132px; line-height: 0; pointer-events: none; }.wave-divider svg { display: block; width: 100%; height: 100%; fill: var(--next-section); }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: var(--teal-deep); font-size: .73rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.eyebrow > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 10px; color: var(--teal-deep); background: #d7f2ed; font-size: .7rem; letter-spacing: 0; box-shadow: inset 2px 2px 5px rgba(255,255,255,.7), inset -2px -2px 5px rgba(32,135,131,.14); }.eyebrow-light { color: #c5f4ef; }.eyebrow-light > span { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 2px 2px 4px rgba(255,255,255,.18), inset -2px -2px 5px rgba(0,0,0,.16); }
h1 { max-width: 720px; margin-bottom: 23px; color: #fff; font-size: clamp(3.15rem, 6.2vw, 6rem); font-weight: 850; }.hero h1 em, .section-copy h2 em, .heading-split h2 em, .faq h2 em { color: var(--gold); font-style: normal; }.section-copy h2, .heading-split h2, .faq h2 { margin-bottom: 24px; font-size: clamp(2.1rem, 4vw, 4.2rem); font-weight: 850; }.section-copy h2 em, .heading-split h2 em { color: var(--coral); font-style: normal; }.section-copy > p:not(.eyebrow), .heading-aside p, .faq-heading > p:not(.eyebrow) { max-width: 600px; color: var(--ink-soft); font-size: 1rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 49px; padding: 13px 19px; border: 1px solid transparent; border-radius: 15px; font-weight: 850; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }.button-primary { color: var(--ink); background: linear-gradient(135deg, #ffcf72, #f1ad50); box-shadow: inset 2px 2px 7px rgba(255,255,255,.5), inset -4px -4px 8px rgba(163,104,26,.16), 9px 13px 24px rgba(0,0,0,.18); }.button-primary:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: inset 2px 2px 7px rgba(255,255,255,.5), inset -4px -4px 8px rgba(163,104,26,.16), 12px 17px 28px rgba(0,0,0,.23); }.button-secondary { color: var(--ink); background: #fdf9f3; box-shadow: var(--shadow-sm); }.button-secondary:hover { transform: translateY(-2px); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-deep); font-size: .91rem; font-weight: 850; }.text-link span { transition: transform var(--transition); }.text-link:hover span { transform: translateX(4px); }.light-link { color: #dff9f6; }
.reveal { opacity: 1; transform: none; }.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 650ms cubic-bezier(.2,.72,.2,1), transform 650ms cubic-bezier(.2,.72,.2,1); }.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hero */
.hero { min-height: min(870px, 100svh); padding-top: 157px; color: #fff; background: radial-gradient(circle at 75% 33%, rgba(46,167,163,.4), transparent 25%), radial-gradient(circle at 22% 88%, rgba(237,114,91,.24), transparent 33%), #17213d; }
.hero-grid { position: relative; z-index: 4; display: grid; grid-template-columns: 1.04fr .96fr; min-height: 615px; align-items: center; gap: 15px; }.hero-copy { padding: 31px 0 85px; }.hero-lede { max-width: 620px; margin-bottom: 30px; color: #d8dfed; font-size: clamp(1rem, 1.5vw, 1.15rem); }.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 48px; color: #c5cedd; font-size: .78rem; font-weight: 650; }.hero-trust b { color: #fff; font-size: 1rem; }.hero-trust i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--coral); }
.hero-visual { position: relative; min-height: 587px; align-self: stretch; }.mascot-halo { position: absolute; z-index: 1; top: 53px; right: 8%; width: min(430px, 80%); aspect-ratio: 1; border-radius: 45% 55% 60% 40% / 50% 42% 58% 50%; background: linear-gradient(145deg, rgba(74,201,194,.68), rgba(87,111,182,.22)); box-shadow: inset 19px 20px 34px rgba(255,255,255,.23), inset -19px -20px 38px rgba(9,26,65,.24), 0 0 75px rgba(77,192,186,.2); transform: rotate(-13deg); }.mascot-hero { position: absolute; z-index: 3; right: 0; bottom: -22px; width: min(470px, 105%); height: auto; filter: drop-shadow(18px 25px 20px rgba(4,11,29,.32)); transform-origin: bottom center; transition: transform .6s cubic-bezier(.2,.72,.2,1); }.hero-visual:hover .mascot-hero { transform: translateY(-9px) rotate(1deg); }.hero-rings i { position: absolute; z-index: 0; right: 8%; top: 84px; width: min(426px, 82%); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }.hero-rings i:nth-child(2) { transform: scale(.78) rotate(21deg); border-style: dashed; }.hero-rings i:nth-child(3) { transform: scale(1.17) rotate(-9deg); border-color: rgba(251,202,110,.22); }.float-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 15px; color: #fff; background: rgba(18,36,70,.55); box-shadow: 10px 12px 22px rgba(1,9,27,.2), inset 1px 1px 0 rgba(255,255,255,.13); backdrop-filter: blur(8px); animation: float 5s ease-in-out infinite; }.float-card span { color: var(--gold); font-size: 1rem; }.float-card small { font-size: .68rem; font-weight: 850; letter-spacing: .03em; }.float-card--one { top: 152px; left: 3%; }.float-card--two { right: -1%; bottom: 130px; animation-delay: -2.2s; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); }.orb-one { width: 320px; height: 320px; top: -90px; left: -95px; background: radial-gradient(circle at 60% 60%, rgba(54,175,169,.5), rgba(54,175,169,0) 67%); }.orb-two { width: 430px; height: 430px; right: -120px; top: 17%; background: radial-gradient(circle at 45% 55%, rgba(237,114,91,.19), rgba(237,114,91,0) 68%); }.orb-three { width: 210px; height: 210px; right: 40%; bottom: 1%; background: radial-gradient(circle at 45% 55%, rgba(246,196,100,.12), rgba(246,196,100,0) 68%); }

/* Intro */
.intro { background: var(--paper); }.intro-grid, .categories-grid, .activities-grid, .guide-grid, .faq-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(42px, 7vw, 115px); }.section-visual { position: relative; min-height: 475px; }.intro-visual { display: grid; place-items: center; }.clay-blob { position: absolute; width: min(400px, 90%); aspect-ratio: 1; border-radius: 48% 52% 40% 60% / 52% 38% 62% 48%; box-shadow: inset 18px 20px 30px rgba(255,255,255,.65), inset -18px -18px 26px rgba(91,61,121,.18), 15px 20px 30px rgba(41,41,70,.11); }.clay-blob--lavender { background: linear-gradient(145deg, #ded5f2, #b9a9dd); transform: rotate(14deg); }.mascot-intro { position: relative; z-index: 2; width: min(365px, 80%); filter: drop-shadow(13px 18px 14px rgba(52,35,82,.22)); transition: transform .5s var(--transition); }.intro-visual:hover .mascot-intro { transform: translateY(-8px) rotate(-2deg); }.visual-note { position: absolute; z-index: 3; padding: 9px 12px; border-radius: 13px; color: var(--plum); background: #fff7ee; box-shadow: var(--shadow-sm); font-size: .72rem; font-weight: 850; }.note-a { top: 23%; left: 0; transform: rotate(-7deg); }.note-b { right: -1%; bottom: 25%; transform: rotate(8deg); color: var(--teal-deep); }
.principle-list { display: grid; gap: 13px; margin-top: 31px; }.principle-card { display: flex; gap: 14px; align-items: flex-start; padding: 15px 17px; border-radius: 17px; background: rgba(255,255,255,.5); box-shadow: inset 1px 1px 0 rgba(255,255,255,.85), 3px 5px 12px rgba(34,40,57,.05); }.number-dot { flex: 0 0 auto; display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: #fff; background: var(--plum); box-shadow: inset 2px 2px 5px rgba(255,255,255,.2), inset -2px -2px 4px rgba(31,16,45,.2); font-size: .72rem; font-weight: 900; }.principle-card h3 { margin: 1px 0 4px; font-size: .93rem; }.principle-card p { margin: 0; color: var(--ink-soft); font-size: .82rem; }

/* Explore / cards */
.explore { background: #fffaf5; }.section-heading { margin-bottom: 37px; }.heading-split { display: grid; grid-template-columns: 1.1fr .72fr; align-items: end; gap: 50px; }.heading-split h2 { max-width: 600px; margin-bottom: 0; }.heading-aside { display: grid; gap: 12px; padding-bottom: 5px; }.heading-aside p { margin-bottom: 0; font-size: .92rem; }.explore-feature { position: relative; display: flex; align-items: center; min-height: 151px; margin-bottom: 28px; padding: 27px 282px 27px 30px; border-radius: var(--radius-lg); color: #f7fbfb; background: linear-gradient(115deg, #267f82, #3ca5a2); box-shadow: inset 3px 3px 10px rgba(255,255,255,.16), inset -5px -7px 15px rgba(9,70,68,.19), 11px 15px 28px rgba(29,119,120,.13); overflow: hidden; }.explore-feature::after { content: ""; position: absolute; top: -105px; right: 129px; width: 290px; height: 290px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }.feature-copy { position: relative; z-index: 2; display: grid; gap: 5px; }.mini-label { color: #b9f2ee; font-size: .71rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.feature-copy strong { font-size: clamp(1.2rem, 2.4vw, 1.8rem); line-height: 1.08; letter-spacing: -.04em; }.feature-copy p { margin: 0; color: #d6f4f1; font-size: .84rem; }.feature-mascot-wrap { position: absolute; z-index: 2; right: 18px; bottom: -41px; width: 250px; }.mascot-explore { width: 100%; filter: drop-shadow(12px 15px 11px rgba(7,51,50,.27)); }
.directory-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }.search-field { display: flex; align-items: center; min-width: 290px; padding: 0 16px; border: 1px solid rgba(23,33,61,.08); border-radius: 15px; color: var(--teal-deep); background: #f7f4ef; box-shadow: inset 4px 4px 9px rgba(25,38,64,.06), inset -4px -4px 9px rgba(255,255,255,.74); }.search-field > span:not(.sr-only) { font-size: 1.35rem; transform: translateY(-1px); }.search-field input { width: 100%; min-height: 47px; margin-left: 10px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .85rem; }.search-field input::placeholder { color: #8c96a6; }.filter-scroller { display: flex; gap: 7px; overflow-x: auto; padding: 5px 2px 7px; scrollbar-width: thin; }.filter-chip { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(23,33,61,.09); border-radius: 999px; color: #4b5870; background: #fffdfa; font-size: .74rem; font-weight: 800; transition: color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition); }.filter-chip:hover { transform: translateY(-2px); box-shadow: 3px 5px 9px rgba(23,33,61,.1); }.filter-chip.is-active { color: #fff; border-color: var(--ink); background: var(--ink); box-shadow: inset 1px 1px 0 rgba(255,255,255,.15); }.results-status { margin: 0 0 15px; color: #697389; font-size: .8rem; font-weight: 700; }
.community-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }.community-card { display: flex; min-height: 278px; flex-direction: column; padding: 21px; border: 1px solid rgba(23,33,61,.08); border-radius: 23px; background: #fffdfa; box-shadow: 8px 10px 17px rgba(28,33,55,.075), inset 3px 3px 6px rgba(255,255,255,.85), inset -3px -3px 7px rgba(32,39,54,.025); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }.community-card:hover { z-index: 1; border-color: rgba(46,167,163,.42); box-shadow: 13px 18px 28px rgba(28,33,55,.13), inset 3px 3px 6px rgba(255,255,255,.85); transform: translateY(-6px); }.community-card[hidden] { display: none; }.card-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 17px; }.tag { display: inline-flex; align-items: center; min-height: 25px; padding: 5px 9px; border-radius: 9px; font-size: .66rem; font-weight: 900; letter-spacing: .02em; }.tag-tech { color: #295dac; background: #e0ecff; }.tag-education { color: #956422; background: #fff0ca; }.tag-outdoor { color: #247c68; background: #d9f4e9; }.tag-arts { color: #7b4e90; background: #f0dff8; }.tag-social { color: #b5544a; background: #ffe1db; }.tag-business { color: #485a85; background: #e3e8f6; }.location { max-width: 48%; overflow: hidden; color: #778095; font-size: .66rem; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; }.community-card h3 { margin-bottom: 11px; font-size: 1.13rem; font-weight: 900; }.community-card h3 span { color: #70798e; font-weight: 760; }.community-card > p { margin-bottom: 15px; color: #5e687d; font-size: .83rem; line-height: 1.55; }.activity-line { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 0; border-top: 1px dashed rgba(23,33,61,.14); color: #536077; font-size: .74rem; font-weight: 730; }.activity-line span { color: var(--coral); font-size: 1.05rem; }.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-top: 8px; }.card-footer > span { color: #9299a7; font-size: .62rem; font-weight: 700; }.card-action { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; color: var(--teal-deep); background: transparent; font-size: .74rem; font-weight: 900; }.card-action span { transition: transform var(--transition); }.card-action:hover span { transform: translate(2px,-2px); }.empty-state { max-width: 500px; margin: 38px auto 0; padding: 40px 28px; border-radius: 24px; text-align: center; background: #f8f4ee; box-shadow: var(--shadow-sm); }.empty-state > span { display: grid; width: 46px; height: 46px; margin: 0 auto 15px; place-items: center; border-radius: 16px; color: var(--teal-deep); background: #dff3ef; font-size: 1.4rem; }.empty-state h3 { margin-bottom: 7px; font-size: 1.25rem; }.empty-state p { margin: 0 0 20px; color: var(--ink-soft); font-size: .85rem; }.noscript-note { padding: 16px; border-radius: 14px; background: #fff1d5; font-size: .84rem; }

/* Categories */
.categories { background: #e9f5f0; }.category-stack { display: grid; gap: 8px; margin-top: 28px; }.category-route { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 9px 11px; border: 1px solid rgba(23,33,61,.06); border-radius: 16px; text-align: left; color: var(--ink); background: rgba(255,255,255,.46); box-shadow: inset 2px 2px 5px rgba(255,255,255,.62), 3px 4px 8px rgba(20,69,67,.05); transition: transform var(--transition), background var(--transition), box-shadow var(--transition); }.category-route:hover { background: #fffcf7; box-shadow: var(--shadow-sm); transform: translateX(5px); }.category-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; font-weight: 900; box-shadow: inset 2px 2px 4px rgba(255,255,255,.63), inset -2px -2px 4px rgba(23,33,61,.12); }.icon-blue { color: #2d61a7; background: #dce9ff; }.icon-yellow { color: #a46a24; background: #ffe7b2; }.icon-green { color: #207d64; background: #cff0e3; }.icon-purple { color: #7e4d91; background: #ecd9f4; }.icon-coral { color: #ba594c; background: #ffe0d8; }.icon-ink { color: #4e5d82; background: #e1e6f3; }.category-route b, .category-route small { display: block; }.category-route b { font-size: .83rem; letter-spacing: -.02em; }.category-route small { margin-top: 1px; color: #68738a; font-size: .69rem; }.category-route > i { color: #8c97a5; font-style: normal; transition: transform var(--transition); }.category-route:hover > i { transform: translate(3px,-3px); color: var(--coral); }.categories-visual { display: grid; place-items: center; }.category-sun { position: absolute; width: min(385px, 88%); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(140deg, #ffce77, #ee8e69); box-shadow: inset 18px 18px 30px rgba(255,255,255,.35), inset -19px -20px 29px rgba(181,72,44,.2), 16px 22px 30px rgba(45,86,79,.14); }.mascot-categories { position: relative; z-index: 2; width: min(372px, 80%); filter: drop-shadow(13px 18px 14px rgba(54,46,43,.22)); transition: transform .5s var(--transition); }.categories-visual:hover .mascot-categories { transform: translateY(-9px) rotate(2deg); }.orbit-tag { position: absolute; z-index: 3; padding: 8px 11px; border-radius: 10px; color: var(--teal-deep); background: #fffdf8; box-shadow: var(--shadow-sm); font-size: .72rem; font-weight: 850; }.orbit-tag--one { top: 22%; left: 0; transform: rotate(-9deg); }.orbit-tag--two { right: 1%; bottom: 18%; transform: rotate(7deg); color: var(--coral); }

/* Activities */
.activities { background: #fff8ec; }.activities-visual { display: grid; place-items: center; }.mascot-activities { position: relative; z-index: 3; width: min(395px, 88%); filter: drop-shadow(14px 19px 14px rgba(70,50,19,.22)); }.activity-ray { position: absolute; z-index: 1; width: min(390px, 90%); height: 78px; border-radius: 50%; background: #ffcf75; box-shadow: inset 10px 10px 18px rgba(255,255,255,.28), inset -12px -12px 17px rgba(190,129,42,.15); }.ray-one { transform: rotate(21deg) translate(15px,-38px); }.ray-two { transform: rotate(-31deg) translate(-15px,25px); background: #f0b761; }.ray-three { transform: rotate(90deg) translate(5px,0); background: #fae0ab; }.activity-list { display: grid; gap: 9px; margin-top: 27px; }.activity-item { display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 11px 13px 11px 11px; border: 0; border-radius: 17px; color: var(--ink); text-align: left; background: #fffdf9; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }.activity-item:hover { transform: translateX(6px); box-shadow: 8px 10px 19px rgba(77,57,26,.12), -5px -5px 13px rgba(255,255,255,.68); }.activity-count { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; color: #fff; background: var(--coral); box-shadow: inset 2px 2px 4px rgba(255,255,255,.21), inset -2px -2px 4px rgba(101,39,27,.16); font-size: .67rem; font-weight: 900; }.activity-item b, .activity-item small { display: block; }.activity-item b { font-size: .85rem; letter-spacing: -.02em; }.activity-item small { color: #758096; font-size: .71rem; }.activity-item i { color: var(--coral); font-style: normal; transition: transform var(--transition); }.activity-item:hover i { transform: translateX(4px); }.agenda-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 13px; border: 1px solid #eed9ad; border-radius: 14px; background: #fff2d4; }.agenda-note > span { display: grid; flex: 0 0 auto; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; background: #c98a38; font-size: .68rem; font-weight: 900; }.agenda-note p { margin: 0; color: #725b36; font-size: .72rem; }.agenda-note b { color: #6d4a16; }

/* Guide */
.guide { color: var(--ink); background: #eeeefa; }.steps-list { display: grid; gap: 12px; margin: 30px 0 22px; padding: 0; list-style: none; counter-reset: steps; }.steps-list li { display: flex; align-items: flex-start; gap: 15px; }.steps-list > li > span { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 13px; color: #fff; background: var(--plum); box-shadow: inset 2px 2px 4px rgba(255,255,255,.18), inset -2px -2px 4px rgba(29,19,43,.15); font-size: .68rem; font-weight: 900; }.steps-list h3 { margin: 2px 0 4px; font-size: .95rem; }.steps-list p { margin: 0; color: #667189; font-size: .82rem; }.safety-box { display: flex; gap: 13px; padding: 17px; border-radius: 19px; background: #d8f2ec; box-shadow: inset 3px 3px 7px rgba(255,255,255,.62), inset -4px -4px 7px rgba(21,112,105,.1); }.safety-icon { display: grid; flex: 0 0 auto; width: 33px; height: 33px; place-items: center; border-radius: 12px; color: #fff; background: var(--teal); box-shadow: inset 2px 2px 4px rgba(255,255,255,.24), inset -2px -2px 4px rgba(14,91,89,.18); font-weight: 900; }.safety-box h3 { margin: 1px 0 5px; font-size: .86rem; }.safety-box p { margin: 0; color: #3f6665; font-size: .76rem; }.guide-visual { display: grid; place-items: center; }.guide-platform { position: absolute; bottom: 30px; width: min(410px, 92%); height: 130px; border-radius: 50%; background: linear-gradient(155deg,#d7c9f1,#b69bdc); box-shadow: inset 13px 18px 20px rgba(255,255,255,.5), inset -15px -14px 19px rgba(63,34,92,.17), 14px 18px 26px rgba(49,42,71,.13); }.mascot-guide { position: relative; z-index: 3; width: min(390px, 85%); filter: drop-shadow(12px 17px 13px rgba(49,38,76,.23)); }.guide-star { position: absolute; z-index: 4; color: var(--gold); filter: drop-shadow(2px 3px 3px rgba(35,42,80,.16)); }.star-a { top: 17%; left: 7%; font-size: 2.1rem; }.star-b { right: 6%; top: 33%; font-size: 1.4rem; }

/* FAQ & footer */
.faq { color: #fff; padding-bottom: 190px; background: radial-gradient(circle at 77% 24%, rgba(77,112,170,.35), transparent 24%), #17213d; }.faq-grid { grid-template-columns: .8fr 1.2fr; align-items: start; }.faq-heading > p:not(.eyebrow) { color: #c6cfdd; }.faq h2 { margin-bottom: 18px; color: #fff; }.faq h2 em { color: #84d6d1; }.mascot-faq { width: min(285px, 72%); margin: 19px 0 -66px 6%; filter: drop-shadow(12px 18px 16px rgba(2,9,27,.28)); }.faq-list { display: grid; gap: 9px; }.faq-item { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: rgba(255,255,255,.07); box-shadow: inset 2px 2px 5px rgba(255,255,255,.07), 6px 8px 15px rgba(2,8,22,.13); }.faq-item h3 { margin: 0; }.faq-item h3 button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 19px; padding: 18px; border: 0; color: #f8f9fc; text-align: left; background: transparent; font-size: .9rem; font-weight: 810; }.faq-item h3 button > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 9px; color: #17213d; background: #bcece7; font-size: 1.15rem; font-weight: 500; line-height: 1; transition: transform var(--transition); }.faq-item h3 button[aria-expanded="true"] > span { transform: rotate(45deg); }.faq-answer { padding: 0 18px 18px; color: #cbd3e1; font-size: .81rem; }.faq-answer p { margin: 0; }.site-footer { position: relative; z-index: 1; padding: 32px 0 20px; color: #d5dced; background: #10172d; }.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .55fr; gap: 40px; align-items: center; min-height: 200px; }.brand-footer { color: #fff; }.footer-brand > p { max-width: 265px; margin: 18px 0 14px; color: #aab5c8; font-size: .81rem; }.footer-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #b5c3d9; background: rgba(255,255,255,.05); font-size: .66rem; font-weight: 750; }.footer-pill span { color: #78d6c9; font-size: .55rem; }.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }.footer-links h2 { margin-bottom: 13px; color: #e9edf7; font-size: .77rem; letter-spacing: .02em; }.footer-links a { display: block; width: max-content; margin: 7px 0; color: #9dabc1; font-size: .74rem; transition: color var(--transition), transform var(--transition); }.footer-links a:hover { color: #fff; transform: translateX(3px); }.footer-mascot-wrap { align-self: end; }.mascot-footer { width: 175px; margin: -102px auto -20px; filter: drop-shadow(10px 14px 14px rgba(0,0,0,.3)); }.footer-bottom { display: flex; justify-content: space-between; gap: 25px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.09); }.footer-bottom p { max-width: 740px; margin: 0; color: #8996af; font-size: .66rem; }.footer-bottom p:last-child { flex: 0 0 auto; }

/* Modal */
.community-dialog { width: min(640px, calc(100% - 30px)); max-height: min(710px, calc(100svh - 30px)); padding: 0; border: 0; border-radius: 28px; color: var(--ink); background: transparent; box-shadow: 0 27px 80px rgba(4,10,29,.38); }.community-dialog::backdrop { background: rgba(10,17,36,.65); backdrop-filter: blur(5px); }.dialog-shell { position: relative; max-height: inherit; overflow-y: auto; padding: 34px; border-radius: inherit; background: #fffcf8; }.dialog-close { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 12px; color: var(--ink); background: #f1ece5; box-shadow: inset 2px 2px 4px rgba(255,255,255,.62), inset -2px -2px 5px rgba(23,33,61,.08); font-size: 1.4rem; line-height: 1; transition: transform var(--transition); }.dialog-close:hover { transform: rotate(90deg); }.dialog-kicker { margin-bottom: 14px; color: var(--teal-deep); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.dialog-title { max-width: 510px; margin-bottom: 12px; font-size: clamp(1.8rem, 4vw, 2.5rem); }.dialog-scope { display: flex; align-items: center; gap: 8px; margin-bottom: 21px; color: #657188; font-size: .8rem; font-weight: 800; }.dialog-scope::before { content: "⌖"; color: var(--coral); font-size: 1.15rem; }.dialog-description { color: #536077; font-size: .95rem; }.dialog-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }.dialog-section h3 { margin-bottom: 10px; font-size: .87rem; letter-spacing: -.02em; }.dialog-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.dialog-list li { position: relative; padding-left: 18px; color: #59647a; font-size: .83rem; }.dialog-list li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }.source-list a { display: inline-flex; align-items: center; gap: 7px; margin: 5px 5px 0 0; padding: 8px 10px; border: 1px solid rgba(23,33,61,.1); border-radius: 10px; color: var(--teal-deep); background: #effaf7; font-size: .75rem; font-weight: 850; transition: transform var(--transition), background var(--transition); }.source-list a:hover { background: #ddf3ee; transform: translateY(-2px); }.dialog-accessed { margin: 12px 0 0; color: #8a94a6; font-size: .68rem; }.dialog-cta { margin-top: 22px; }.dialog-cta .button { width: 100%; color: #fff; background: var(--ink); box-shadow: inset 2px 2px 5px rgba(255,255,255,.12), 5px 8px 14px rgba(23,33,61,.2); }

@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-11px) rotate(2deg); } }

@media (max-width: 980px) {
  .community-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.directory-tools { align-items: stretch; flex-direction: column; }.search-field { min-width: 0; }.filter-scroller { padding-bottom: 5px; }.hero-grid { grid-template-columns: 1fr .84fr; }.hero-visual { min-height: 500px; }.mascot-hero { width: min(410px, 113%); }.heading-split { gap: 28px; }.footer-grid { grid-template-columns: 1fr 1fr .45fr; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }.shell { width: min(calc(100% - 32px), var(--shell)); }.site-header { padding: 10px 0; }.site-header.is-scrolled { padding: 7px 0; }.nav-toggle { display: block; }.primary-nav { position: absolute; top: calc(100% + 7px); right: 16px; left: 16px; display: grid; gap: 4px; padding: 11px; border: 1px solid rgba(23,33,61,.08); border-radius: 18px; background: rgba(255,250,245,.96); box-shadow: 11px 18px 31px rgba(21,30,54,.14); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transform: translateY(-9px); transition: opacity var(--transition), transform var(--transition); }.primary-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }.primary-nav > a:not(.nav-cta) { padding: 10px; }.primary-nav > a:not(.nav-cta)::after { display: none; }.nav-cta { margin-top: 5px; text-align: center; }.hero { min-height: auto; padding-top: 115px; }.hero-grid { display: flex; min-height: 0; flex-direction: column; gap: 0; }.hero-copy { padding: 31px 0 8px; }.hero h1 { max-width: 600px; font-size: clamp(3rem,13vw,4.8rem); }.hero-lede { font-size: .98rem; }.hero-actions { gap: 19px; }.hero-trust { margin-top: 29px; }.hero-visual { width: min(100%, 460px); min-height: 410px; margin: -7px auto 0; }.mascot-halo { top: 42px; right: 5%; width: 312px; }.mascot-hero { right: 50%; bottom: -20px; width: 360px; transform: translateX(50%); }.hero-visual:hover .mascot-hero { transform: translateX(50%) translateY(-8px) rotate(1deg); }.hero-rings i { right: 9%; top: 56px; width: 314px; }.float-card--one { top: 90px; left: 1%; }.float-card--two { right: 0; bottom: 63px; }.section-with-wave { padding: 82px 0 132px; }.wave-divider { height: 78px; }.intro-grid, .categories-grid, .activities-grid, .guide-grid, .faq-grid, .heading-split { grid-template-columns: 1fr; }.intro-grid, .activities-grid { gap: 20px; }.section-visual { min-height: 370px; }.intro-visual { order: -1; }.clay-blob { width: 305px; }.mascot-intro { width: 265px; }.visual-note { font-size: .64rem; }.note-a { left: 3%; }.note-b { right: 4%; }.heading-split { gap: 12px; margin-bottom: 25px; }.heading-split h2, .section-copy h2, .faq h2 { font-size: clamp(2.22rem,9vw,3.35rem); }.explore-feature { min-height: 245px; align-items: flex-start; margin-bottom: 20px; padding: 24px 20px 0; }.feature-copy { max-width: 255px; }.feature-copy strong { font-size: 1.38rem; }.explore-feature::after { top: 75px; right: -10px; width: 210px; height: 210px; }.feature-mascot-wrap { right: 1px; bottom: -31px; width: 208px; }.community-grid { grid-template-columns: 1fr; }.community-card { min-height: 250px; }.categories-grid { gap: 13px; }.categories-visual { order: -1; min-height: 350px; }.category-sun { width: 290px; }.mascot-categories { width: 280px; }.orbit-tag--one { left: 4%; }.orbit-tag--two { right: 4%; }.activities-visual { min-height: 335px; }.mascot-activities { width: 290px; }.activity-ray { width: 300px; }.guide-grid { gap: 26px; }.guide-visual { order: -1; min-height: 365px; }.mascot-guide { width: 290px; }.guide-platform { width: 305px; }.faq-grid { gap: 21px; }.faq-heading { display: grid; grid-template-columns: 1fr 145px; column-gap: 8px; }.faq-heading .eyebrow, .faq-heading h2, .faq-heading > p { grid-column: 1 / -1; }.mascot-faq { grid-column: 2; width: 150px; margin: -7px 0 -50px auto; }.faq-list { margin-top: -12px; }.site-footer { padding-top: 17px; }.footer-grid { grid-template-columns: 1fr 125px; gap: 20px; min-height: 170px; }.footer-links { grid-column: 1; gap: 18px; }.footer-mascot-wrap { grid-column: 2; grid-row: 1 / 3; align-self: end; }.mascot-footer { width: 135px; margin: -43px -2px -12px auto; }.footer-bottom { display: block; }.footer-bottom p + p { margin-top: 12px; }.dialog-shell { padding: 30px 21px 22px; }.dialog-close { top: 9px; right: 9px; }
}
@media (max-width: 390px) { .hero-actions { align-items: flex-start; flex-direction: column; gap: 13px; }.hero-trust { align-items: flex-start; flex-direction: column; gap: 5px; }.hero-trust i { display: none; }.feature-mascot-wrap { opacity: .74; }.activity-item { grid-template-columns: 34px 1fr; }.activity-item i { display: none; }.category-route small { font-size: .64rem; }.footer-grid { grid-template-columns: 1fr 104px; }.mascot-footer { width: 118px; }.faq-item h3 button { padding: 15px; font-size: .84rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; } }