/* Based on PROJ-37 R5 homepage styles; static mainland landing page only. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{padding:0;margin:0}
body{min-width:320px;background:#f7fbf7}
a:focus-visible{outline:3px solid #35b8bd;outline-offset:3px}
.site {min-height:100vh; overflow:hidden; color:#183e4e; background:#f7fbf7; font-family:"Nunito", "Trebuchet MS", "PingFang SC", "Microsoft YaHei",system-ui,sans-serif}
.contentWidth {width:min(1160px,calc(100% - 60px));margin-inline:auto}
.siteHeader {position:relative;z-index:10;background:#e8f9ff;border-bottom:2px solid #bddfe8;box-shadow:0 3px 12px #256b821a}
.headerInner {width:min(1210px,calc(100% - 60px)); min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:auto}
.logo {display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;color:#255b65;font-size:20px;font-weight:900;letter-spacing:-.6px}
.logoStrong {color:#168b8b}
.logoSymbol {display:grid;place-items:center;width:36px;height:36px;margin-right:4px;border-radius:13px;background:#ffcd69;color:#fff;font-size:24px;transform:rotate(-8deg);box-shadow:0 4px 0 #e8ad52}
.logoImage {display:block;width:min(234px,calc(100vw - 42px));height:auto;object-fit:contain}

.nav {display:flex;align-items:center;gap:36px}
.nav a {font-size:14px;font-weight:800;color:#597480;text-decoration:none;transition:color .16s}
.nav a:hover,.nav .navCurrent {color:#087e87}
.nav .parentLink {padding:12px 18px;background:#fff;border:1px solid #cde4e9;border-radius:999px;color:#31616f;box-shadow:0 3px 0 #d1e7e7}
.hero {position:relative;background:radial-gradient(circle at 78% 31%,#d0f6ff 0,#d0f6ff00 30%),linear-gradient(155deg,#e6f9ff 0%,#d8f7fb 57%,#b9eaf2 100%);min-height:490px;padding:33px 0 68px;isolation:isolate}
.heroInner {position:relative;display:flex;align-items:center;justify-content:space-between;max-width:1180px;min-height:407px;width:calc(100% - 60px);margin:auto;gap:6px}
.heroText {position:relative;z-index:3;flex:0 0 49%;padding-top:4px}
.eyebrow {display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#fff7d6;color:#a26721;border:1px solid #fff0ab;border-radius:100px;font-size:13px;font-weight:900;letter-spacing:.35px;box-shadow:0 5px 14px #c6e7e08c}
.eyebrowStar {color:#f7a32c;font-size:18px}
.hero h1 {font-size:clamp(44px,4.65vw,68px);line-height:1.22;margin:20px 0 14px;color:#184e5e;font-weight:950;letter-spacing:-2.6px}
.hero h1 span {color:#08a7a0;text-shadow:0 3px 0 #fff7}
.heroText>p {font-size:17px;line-height:1.9;color:#58848c;font-weight:700;margin:0 0 28px}
.heroActions {display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.primaryButton,.ghostButton,.ghostDarkButton,.featureButton,.boardButton {min-height:52px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:16px;font-size:15px;font-weight:900;text-decoration:none;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.primaryButton {background:#ffad45;color:#623b17;box-shadow:0 6px 0 #ea9434}
.primaryButton:hover,.featureButton:hover,.boardButton:hover {transform:translateY(-2px);box-shadow:0 8px 0 #da892c}
.ghostButton {color:#167a82;background:#ffffffd6;border:1px solid #b8e2e9}
.ghostDarkButton {color:#187e83;background:#fff;border:1px solid #bcdfe0}
.heroNote {display:flex;align-items:center;gap:8px;margin-top:26px;font-size:12px;font-weight:800;color:#448593}
.heroVisual {position:relative;flex:1;min-width:0;min-height:390px;display:flex;align-items:center;justify-content:center}
.brandPicture {position:relative;z-index:2;width:min(100%,660px);height:auto;filter:drop-shadow(0 16px 16px #4c9a9f35);transform:translate(17px,15px)}
.visualSun {position:absolute;top:37px;right:70px;width:265px;height:265px;border-radius:50%;background:#fff9ce;box-shadow:0 0 0 38px #fff9ce55,0 0 0 72px #fff9ce24}
.floatingMarkOne,.floatingMarkTwo {position:absolute;color:#ffbe4d;font-size:45px;z-index:2}
.floatingMarkOne {top:18px;left:17%}.floatingMarkTwo {right:4%;bottom:55px;color:#50c4db;font-size:31px}
.heroCloudOne,.heroCloudTwo {position:absolute;border-radius:999px;background:#fff9;filter:blur(.2px);pointer-events:none}
.heroCloudOne {width:120px;height:35px;top:73px;left:47%}.heroCloudOne:after {content:"";position:absolute;bottom:8px;left:27px;width:58px;height:52px;border-radius:50%;background:inherit}
.heroCloudTwo {width:100px;height:26px;bottom:86px;right:7%}
.wave {position:absolute;bottom:-1px;left:0;width:100%;height:75px;background:#f7fbf7;clip-path:polygon(0 51%,7% 62%,16% 51%,26% 72%,37% 49%,46% 62%,56% 51%,66% 74%,76% 50%,86% 64%,94% 53%,100% 62%,100% 100%,0 100%);z-index:3}
.explore {padding:58px 0 74px}
.sectionHeading {display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:32px}
.kicker {font-size:12px;font-weight:950;letter-spacing:2px;color:#1ba2a1;margin:0 0 11px}
.sectionHeading h2 {font-size:clamp(30px,3.1vw,45px);line-height:1.2;margin:0 0 12px;color:#174857;font-weight:950;letter-spacing:-1.4px}
.sectionHeading h2 span {color:#12aaa1}
.sectionIntro {font-size:15px;color:#7a929a;font-weight:650;margin:0;line-height:1.8}
.countPill {background:#e4f6ec;color:#319171;padding:12px 16px;border-radius:20px;font-size:14px;font-weight:900;white-space:nowrap}
.islandGrid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.islandCard {--sky:#ffead5;--earth:#ecbba4;--grass:#a4d58f;--earthDeep:#e9a78b;display:block;background:#fff;border:2px solid #e5efec;border-radius:27px;overflow:hidden;text-decoration:none;box-shadow:0 7px 0 #e6efec,0 14px 28px #537a7710;transition:transform .2s,box-shadow .2s,border-color .2s}
.islandCard:hover {transform:translateY(-7px);border-color:#b0e2d4;box-shadow:0 13px 0 #e6efec,0 21px 40px #537a7720}
.coral {--sky:#ffe2d7;--earth:#f9a986;--grass:#f8c587;--earthDeep:#dd887a}
.gold {--sky:#fff2c3;--earth:#ecc26b;--grass:#edda87;--earthDeep:#daa94d}
.purple {--sky:#efe4ff;--earth:#b7a1e6;--grass:#d5bdeb;--earthDeep:#a184d3}
.cyan {--sky:#d8f5ff;--earth:#82cfe8;--grass:#a5e0d8;--earthDeep:#62b8d2}
.pink {--sky:#ffe6f3;--earth:#f4afd0;--grass:#f6d09c;--earthDeep:#db91ba}
.mint {--sky:#daf6dc;--earth:#8ec9a2;--grass:#a2d993;--earthDeep:#61b597}
.cardIllustration {height:180px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,var(--sky) 5%,#fff5e4 100%)}
.cardIllustration:before {content:"";position:absolute;z-index:-1;left:19%;top:22px;width:83px;height:83px;border-radius:50%;background:#ffffff8e}
.cardNumber {position:absolute;left:20px;top:16px;z-index:3;font-size:11px;font-weight:950;letter-spacing:1.4px;color:#7d7a777f}
.cardSkyMark {position:absolute;right:24px;top:15px;font-size:35px;opacity:.84;transform:rotate(12deg)}
.cardIcon {font-size:85px;line-height:1;position:relative;z-index:2;filter:drop-shadow(0 10px 2px #6e554528);transform:rotate(-5deg) translateY(-2px)}
.cardHill {position:absolute;bottom:-50px;width:255px;height:119px;border-radius:49% 51% 0 0;background:var(--earth);box-shadow:inset 0 14px 0 var(--grass),0 -1px 0 #ffffff50;z-index:1}
.cardGround {position:absolute;bottom:-74px;left:-8%;width:118%;height:116px;background:var(--earthDeep);border-radius:50% 50% 0 0;z-index:0;opacity:.65}
.cardText {padding:23px 23px 19px}
.cardMeta {display:flex;align-items:center;justify-content:space-between;gap:8px}
.cardLabel {font-size:10px;letter-spacing:1.6px;font-weight:950;color:#8aa1a3}
.status {font-size:11px;font-weight:900;padding:6px 9px;background:#f1f5f5;color:#89999b;border-radius:999px;white-space:nowrap}
.statusOpen {background:#daf8e5;color:#178862}
.cardText h3 {font-size:26px;letter-spacing:-.7px;font-weight:950;color:#254b52;margin:13px 0 4px}
.cardText p {font-size:13px;line-height:1.6;font-weight:650;color:#80989e;margin:0;min-height:24px}
.cardFooter {display:flex;align-items:center;justify-content:space-between;margin-top:19px;padding-top:14px;border-top:1px dashed #e5eeee;font-size:13px;font-weight:950;color:#299b97}
.cardArrow {display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#effaf5;color:#208e88;font-size:21px}
.featureSection {padding:0 0 68px}
.featureBox {border-radius:33px;padding:43px 52px;background:linear-gradient(112deg,#dff7e9 0%,#e3f8df 58%,#f8f6dc 100%);border:2px solid #d1ebdd;display:flex;align-items:center;justify-content:space-between;gap:48px;position:relative;overflow:hidden}
.featureBox:after {content:"";position:absolute;right:-70px;top:-100px;width:300px;height:300px;border-radius:50%;border:40px solid #ffffff61;pointer-events:none}
.featureLeft {display:flex;align-items:flex-start;gap:24px;flex:1 1 54%;z-index:1}
.featureIcon {font-size:63px;background:#fff6;padding:7px 12px;border-radius:24px}
.featureKicker {display:block;font-size:12px;font-weight:950;color:#38a17a;margin:5px 0 10px}
.featureLeft h2 {font-size:clamp(22px,2.2vw,32px);line-height:1.3;font-weight:950;letter-spacing:-1px;color:#216550;margin:0 0 11px}
.featureLeft p {color:#6a9185;font-size:14px;line-height:1.85;font-weight:700;margin:0 0 24px}
.featureButton {background:#22a47c;color:#fff;box-shadow:0 5px 0 #168d69}
.featureButton:hover {box-shadow:0 8px 0 #168d69}
.codeSample {position:relative;z-index:1;flex:0 1 400px;min-width:290px;border-radius:18px;background:#183e49;color:#eafaf9;box-shadow:0 18px 32px #2b70652e;overflow:hidden;transform:rotate(2deg)}
.codeTop {background:#294f59;padding:12px 16px;font-size:12px;color:#c6dcd9;text-align:center;position:relative}
.codeTop span {position:absolute;left:14px;top:15px;display:flex;gap:5px}
.codeTop i {width:9px;height:9px;border-radius:50%;background:#f38b8b}.codeTop i:nth-child(2){background:#e8c069}.codeTop i:nth-child(3){background:#84ccaa}
.codeSample code {display:block;padding:25px 23px;white-space:pre-line;line-height:2;font-size:15px;font-family:ui-monospace,"SFMono-Regular",monospace}
.codePurple {color:#a9e5fb}.codeYellow {color:#ffd98b}.codeComment {color:#75b6ac}.codeOutput {margin:0 20px 20px;padding:12px 14px;border-radius:10px;background:#20515a;color:#85f5c1;font-size:13px;font-weight:800}
.messageSection {padding:0 0 74px}
.messageBox {display:flex;align-items:center;gap:25px;padding:26px 31px;background:#fff;border:2px dashed #cbe1d8;border-radius:25px}
.messageGraphic {font-size:58px}
.messageBox div {flex:1}.messageBox .kicker {margin-bottom:4px;font-size:10px}
.messageBox h2 {margin:0 0 6px;color:#285862;font-size:24px;font-weight:950}
.messageBox p:last-child {color:#819a9f;font-size:13px;line-height:1.7;font-weight:650;margin:0}
.boardButton {background:#fff0d9;color:#ae742d;font-size:13px;border:1px solid #f8e1b6;box-shadow:0 5px 0 #f5e4c6}
.boardButton:hover {box-shadow:0 7px 0 #f5e4c6}
.siteFooter {padding:30px 0;background:#e8f5ef;border-top:1px solid #d6e9df}.siteFooter .contentWidth {display:flex;justify-content:space-between;gap:16px;color:#669089;font-size:12px;font-weight:750}.siteFooter span:first-child {font-weight:950;color:#328578}
/* Original shared-header styling, included locally without Next.js. */
.siteHeader {background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(235,249,253,.97));border-bottom:3px solid #9ed8e4;box-shadow:0 5px 18px rgba(23,99,118,.16)}
.headerInner{min-height:78px}
.headerRight{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-left:auto;min-width:0}
.nav{gap:31px}
.nav a:not(.parentLink){position:relative;display:inline-flex;align-items:center;min-height:44px;color:#496b78;font-size:14px;font-weight:850}
.nav a:not(.parentLink)::after{content:"";position:absolute;bottom:1px;left:0;right:0;height:3px;border-radius:99px;background:#159da0;transform:scaleX(0);transform-origin:center;transition:transform .16s}
.nav a:not(.parentLink):hover,.nav a:not(.parentLink).navCurrent{color:#087e87}
.nav a:not(.parentLink):hover::after,.nav a:not(.parentLink).navCurrent::after{transform:scaleX(1)}
.nav .parentLink{margin-left:9px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #b9dfec;background:#fff;box-shadow:0 4px 0 #cfebed,0 5px 12px #539baf12;color:#245a6b;font-weight:900}
.nav .parentLink:hover{border-color:#6bc5da;color:#087c85;background:#f3fdff}
.loginButton{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 15px;border-radius:999px;border:1.5px solid #b9dfec;background:#fff;color:#245a6b;font-size:13px;font-weight:900;text-decoration:none;white-space:nowrap;box-shadow:0 3px 0 #cfebed}
.loginButton:hover{color:#087c85;background:#f3fdff}
/* Keep the demo code line breaks in all browsers. */
.codeSample code{white-space:pre-wrap}
@media(max-width:980px){.nav{gap:16px}.hero h1{font-size:51px}.heroInner{min-height:390px}.brandPicture{transform:translate(7px,10px) scale(1.07)}.islandGrid{gap:15px}.cardText{padding:18px}.cardText h3{font-size:24px}.featureBox{padding:32px;gap:25px}.featureIcon{font-size:44px}.featureLeft{gap:15px}}
@media(max-width:800px){.headerInner{flex-wrap:wrap;justify-content:center;gap:5px;padding:8px 0}.headerRight{width:100%;justify-content:space-between;gap:8px;flex-wrap:wrap}.nav{gap:14px;flex:1 1 auto;justify-content:space-around}.nav a:not(.parentLink){font-size:12px;min-height:36px}.nav .parentLink{margin:0;min-height:38px;padding:8px 11px}.loginButton{min-height:38px;font-size:12px;padding:7px 12px}}
@media(max-width:720px){
 .contentWidth,.heroInner,.headerInner{width:calc(100% - 32px)}
 .headerInner{justify-content:center;padding:10px 0}
 .logoImage{width:min(220px,calc(100vw - 42px))}
 .headerRight{justify-content:center}
 .nav{width:100%;order:2;gap:12px;justify-content:space-between;overflow-x:auto;padding:5px 0 3px}
 .nav a{white-space:nowrap;font-size:12px}.nav .parentLink{padding:8px 11px}
 .loginButton{order:1}
 .hero{padding:24px 0 60px}.heroInner{flex-direction:column;text-align:center;gap:0}.heroText{flex-basis:auto;width:100%}
 .eyebrow{font-size:11px;padding:8px 12px}.hero h1{font-size:clamp(36px,9vw,52px);margin:15px 0 10px;letter-spacing:-1.8px}
 .heroText>p{font-size:14px;margin-bottom:21px}.heroActions{justify-content:center}.primaryButton,.ghostButton{font-size:13px;min-height:45px;padding:0 16px}
 .heroNote{justify-content:center;font-size:11px;margin-top:19px}.heroVisual{min-height:240px;width:100%;max-width:440px}.brandPicture{width:100%;height:auto;transform:translateY(5px)}
 .visualSun{top:22px;right:50px;width:180px;height:180px}.heroCloudOne{left:6%;top:23px}.wave{height:42px}
 .explore{padding:36px 0 46px}.sectionHeading{align-items:start;display:block}.sectionHeading h2{font-size:32px}.sectionIntro{font-size:13px}
 .countPill{display:inline-block;margin-top:16px;font-size:12px}.islandGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.cardIllustration{height:134px}
 .cardIcon{font-size:64px}.cardNumber{font-size:9px;left:10px;top:12px}.cardSkyMark{font-size:27px;right:9px}
 .cardText{padding:14px}.cardMeta{flex-wrap:wrap;gap:5px}.cardLabel{font-size:9px}.status{font-size:9px;padding:4px 6px}
 .cardText h3{font-size:21px;margin-top:10px}.cardText p{font-size:11px;min-height:36px}.cardFooter{font-size:11px;margin-top:11px;padding-top:11px}
 .cardArrow{width:27px;height:27px;font-size:17px}.featureSection{padding-bottom:34px}.featureBox{display:block;padding:23px}
 .featureLeft{display:block;text-align:center}.featureIcon{display:inline-block;font-size:44px;margin-bottom:10px}.featureLeft h2{font-size:23px}
 .featureLeft p{font-size:12px}.codeSample{min-width:0;margin-top:28px;transform:rotate(0)}.codeSample code{font-size:13px;padding:20px}
 .messageSection{padding-bottom:36px}.messageBox{padding:25px;display:block;text-align:center}.messageGraphic{display:block;font-size:50px;margin-bottom:15px}
 .messageBox h2{font-size:21px}.messageBox p:last-child{font-size:12px}.boardButton{margin-top:18px;font-size:12px}
 .siteFooter .contentWidth{display:block;text-align:center}.siteFooter span{display:block;margin:5px}
}
@media(max-width:400px){.nav{gap:7px}.nav a:not(.parentLink){font-size:11px}.nav .parentLink{font-size:11px;padding:7px 8px}}
@media(max-width:360px){.islandGrid{grid-template-columns:1fr}.cardIllustration{height:165px}.cardText p{min-height:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.islandCard,.primaryButton,.featureButton,.boardButton{transition:none}}