.canon-home{background:#101216;color:#f3f3f5;font-family:'DM Sans',sans-serif}
.canon-home .site-header{position:absolute;background:transparent;border:0}
.welcome-scene{position:relative;min-height:820px;min-height:min(920px,100svh);display:flex;align-items:center;justify-content:center;padding:160px 24px 150px;isolation:isolate;background:#12131b url('/img/canon-city.png') center 60%/cover}
.welcome-scene:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,10,15,.78),rgba(9,10,15,.42) 40%,rgba(9,10,15,.45) 65%,#101216),linear-gradient(90deg,rgba(14,10,18,.32),transparent 50%,rgba(14,10,18,.32))}
.welcome-content{text-align:center;max-width:800px;width:100%;margin:auto}
.home-eyebrow{font-size:10px;letter-spacing:.15em;font-weight:700;color:#79a9ff;line-height:1.7;margin:0 0 24px}
.welcome-content .home-eyebrow{color:#ddd6df;font-size:9px;letter-spacing:.2em}
.welcome-content .home-eyebrow>span{display:inline-block;width:6px;height:6px;background:#0052e0;border-radius:50%;margin-right:9px;box-shadow:0 0 18px #0052e0}
.welcome-wordmark{width:min(570px,85%);display:block;margin:0 auto 25px;mix-blend-mode:screen}
.welcome-content h1{font:700 clamp(27px,3vw,42px)/1.15 'DM Sans',sans-serif;letter-spacing:-.035em;margin:0 0 20px}
.welcome-copy{font-size:14px;line-height:1.9;color:#d0cdd5;text-shadow:0 2px 14px #000}
.welcome-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:32px}
.home-join{display:inline-flex;align-items:center;justify-content:center;gap:36px;background:#0052e0;padding:17px 25px;font-size:12px;font-weight:700;border-radius:4px;box-shadow:0 8px 40px #0052e020;transition:background .2s,transform .2s}
.home-join:hover{background:#2673f5;transform:translateY(-2px)}
.home-join span{font-size:19px;font-weight:400}
.home-watch{display:inline-flex;gap:12px;align-items:center;font-size:12px;font-weight:600;padding:15px 0;color:#ece8ef}
.home-watch>span{font-size:24px;color:#79a9ff}
.home-watch:hover{color:#79a9ff}
.scene-bottom{position:absolute;bottom:36px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#93939f;font-size:8px;letter-spacing:.14em}
.scene-bottom a{color:#d5d1da;display:flex;align-items:center;gap:16px}
.scene-bottom a span{font-size:18px;color:#79a9ff}
.home-start{max-width:1200px;margin:auto;padding:105px 40px;display:grid;grid-template-columns:1fr 1.2fr;gap:100px;scroll-margin-top:30px}
.canon-home h2{font:700 clamp(38px,4.2vw,58px)/1.08 'Barlow Condensed',sans-serif;letter-spacing:-.02em}
.canon-home h2 span{color:#79a9ff}
.start-intro>p:last-child,.creator-invite>p:not(.home-eyebrow){font-size:14px;line-height:1.9;color:#a6a5b1;max-width:370px;margin-top:24px}
.start-steps{list-style:none;padding:0;margin:0;display:grid}
.start-steps li{display:flex;gap:25px;padding:25px 0;border-bottom:1px solid #ffffff12}
.start-steps li:first-child{padding-top:0}
.step-number{color:#79a9ff;font-size:10px;padding-top:5px}
.start-steps li>div{flex:1}
.start-steps a{display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:600;font-size:17px}
.start-steps a>span{color:#73727e;font-weight:400;font-size:20px}
.start-steps a:hover,.start-steps a:hover>span{color:#79a9ff}
.start-steps p{font-size:13px;color:#93939f;line-height:1.8;margin:10px 25px 0 0}
.home-creators{max-width:1200px;margin:auto;border-top:1px solid #ffffff12;padding:65px 40px 80px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}
.creator-art{position:relative;min-height:350px;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse,#0052e00b,transparent 68%)}
.creator-art img{width:250px;height:250px;object-fit:contain;mix-blend-mode:screen;transform:rotate(-12deg);opacity:.8}
.creator-art>span{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.22em;color:#6e6d7c}
.home-text-link{display:inline-flex;align-items:center;gap:45px;font-size:12px;font-weight:700;padding:20px 0 13px;margin-top:12px;border-bottom:1px solid #0052e0}
.home-text-link span{font-size:20px;color:#79a9ff}
.home-text-link:hover{color:#79a9ff}
.home-signoff{max-width:1120px;margin:0 auto;padding:38px 0;border-block:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;gap:25px}
.home-signoff p{font-size:22px;letter-spacing:-.03em;color:#a6a5b1}
.home-signoff strong{color:white;font-weight:600}
.home-signoff a{font-size:12px;display:flex;gap:30px;align-items:center}
.home-signoff a span{color:#79a9ff;font-size:20px}
.canon-home .site-footer{border:0;background:#101216}
@media(min-width:1500px){.welcome-scene{min-height:850px}}
@media(max-width:850px){.welcome-scene{min-height:760px}.home-start{gap:45px;padding:75px 30px}.home-creators{gap:40px;padding:50px 30px}.home-signoff{margin:0 30px}.creator-art img{width:210px}}
@media(max-width:620px){.welcome-scene{min-height:730px;padding:145px 22px 130px;background-position:65% center}.welcome-wordmark{width:100%;margin-bottom:28px}.welcome-content .home-eyebrow{font-size:8px;letter-spacing:.13em}.welcome-content h1{font-size:26px}.welcome-copy{font-size:12px}.welcome-actions{flex-direction:column;gap:10px;margin-top:25px}.home-join{min-width:225px}.scene-bottom{bottom:28px;justify-content:center}.scene-bottom>span{display:none}.home-start{grid-template-columns:1fr;padding:62px 24px;gap:36px}.start-intro>p:last-child{margin-top:18px}.start-steps li{padding:23px 0}.home-creators{grid-template-columns:1fr;padding:45px 24px 60px;gap:20px}.creator-art{min-height:220px;order:2}.creator-art img{width:160px;height:160px}.home-signoff{margin:0 24px;align-items:flex-start;flex-direction:column;padding:30px 0}.home-signoff p{font-size:21px}.canon-home h2{font-size:43px}}
@media(prefers-reduced-motion:reduce){.home-join{transition:none}}

.canon-home .site-header .brand img{mix-blend-mode:screen}

/* Cinematic, left-aligned welcome inspired by the reference. */
.canon-home{background:#101113}
.canon-home .welcome-scene{min-height:740px;min-height:clamp(680px,92svh,1000px);margin:18px 18px 0;border:1px solid #ffffff16;border-radius:12px;overflow:hidden;justify-content:flex-start;padding:170px 6.5% 145px;background-position:center center;background-color:#171719}
.welcome-scene:before{background:linear-gradient(90deg,rgba(12,13,16,.96),rgba(12,13,16,.8) 28%,rgba(12,13,16,.32) 58%,rgba(12,13,16,.08)),linear-gradient(0deg,rgba(12,13,16,.75),transparent 35%,rgba(12,13,16,.35))}
.welcome-scene:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(125deg,transparent 32%,#ffffff03 32%,#ffffff03 47%,transparent 47%)}
.welcome-content{text-align:left;max-width:620px;margin:0;width:55%}
.welcome-content .home-eyebrow{color:#c2b7b5;font-size:10px;letter-spacing:.18em;margin-bottom:26px}
.welcome-content h1{font:500 clamp(44px,5vw,76px)/1.08 'DM Sans',Arial,sans-serif;letter-spacing:-.05em;margin-bottom:25px;color:#f0e8df}
.welcome-content h1 span{color:#0052e0}
.welcome-copy{font-size:15px;line-height:1.85;color:#c1bdbb;text-shadow:none}
.welcome-actions{justify-content:flex-start;gap:26px;margin-top:30px;flex-wrap:wrap}
.home-join{background:#151516;border:1px solid #ffffff26;border-radius:6px;padding:16px 22px;gap:28px;box-shadow:0 8px 25px #0003;font-weight:500;color:#f3ece5}
.home-join:hover{background:#2c2520;border-color:#0052e0}
.home-watch{font-weight:400;color:#d5ceca}
.home-watch>span{color:#0052e0;font-size:22px}
.home-watch:hover{color:#0052e0}
.scene-bottom{left:7%;right:7%;bottom:30px;color:#c1b9b3;font-size:8px}
.scene-bottom a span{color:#0052e0}
.canon-home .home-start{padding-top:85px}
@media(min-width:1600px){.welcome-content{max-width:700px}}
@media(max-width:900px){.canon-home .welcome-scene{padding:155px 6% 120px;min-height:680px}.welcome-content{width:70%}.welcome-content h1{font-size:56px}}
@media(max-width:620px){.canon-home .welcome-scene{margin:10px 10px 0;border-radius:9px;min-height:680px;min-height:max(680px,90svh);padding:150px 25px 100px;background-position:62% center}.welcome-content{width:100%;max-width:440px}.welcome-scene:before{background:linear-gradient(90deg,#0c0d10e6,#0c0d1080),linear-gradient(0deg,#0c0d10b3,transparent 55%)}.welcome-content h1{font-size:clamp(42px,10vw,58px)}.welcome-content .home-eyebrow{font-size:8px;letter-spacing:.13em}.welcome-copy{font-size:13px}.welcome-actions{align-items:flex-start;gap:8px;flex-direction:column}.home-join{min-width:0}.scene-bottom{bottom:25px}.canon-home .home-start{padding-top:60px}}

/* Centered welcome and live community statistics. */
.stats-home .welcome-scene{justify-content:center;padding-top:160px;padding-bottom:120px}
.stats-home .welcome-content{width:100%;max-width:780px;text-align:center;margin:auto}
.stats-home .welcome-scene:before{background:linear-gradient(180deg,#0c1019b8,#101827b8 55%,#0b111bdb)}
.stats-home .welcome-content .home-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border:1px solid #ffffff21;border-radius:30px;background:#131c2cc9;color:#9dbfff;font-size:9px;margin-bottom:22px}
.stats-home .welcome-content .home-eyebrow>span{margin:0;background:#0052e0;box-shadow:0 0 12px #0052e050}
.stats-home .welcome-content h1{font-weight:700;font-size:clamp(42px,5vw,70px);line-height:1.12;margin-bottom:20px}
.stats-home .welcome-copy{color:#b9c5d4}
.server-stats{display:flex;justify-content:center;margin:34px auto 0;max-width:540px}
.server-stats>div{flex:1;display:flex;flex-direction:column;gap:10px;padding:0 22px}
.server-stats>div+div{border-left:1px solid #ffffff16}
.server-stats strong{font-size:clamp(28px,3vw,42px);line-height:1.2;color:#0052e0;font-variant-numeric:tabular-nums}
.server-stats span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8}
.server-status{font-size:11px;color:#a3afbf;margin-top:20px;min-height:16px}
.stats-home .welcome-actions{justify-content:center;margin-top:25px}
.stats-home .home-join{background:#0052e0;color:#141518;border-color:#0052e0;border-radius:30px;font-weight:600}
.stats-home .home-join:hover{background:#2673f5}
.stats-home .home-watch{padding:15px 23px;border:1px solid #ffffff25;border-radius:30px;background:#ffffff05}
@media(max-width:620px){.stats-home .welcome-scene{padding:135px 20px 90px}.stats-home .welcome-content h1{font-size:clamp(36px,10vw,52px)}.stats-home .welcome-actions{flex-direction:row;align-items:center;gap:12px}.server-stats>div{padding:0 10px}.server-stats span{font-size:8px;letter-spacing:.09em}.server-stats{margin-top:28px}.stats-home .welcome-copy br{display:none}}

.canon-home .welcome-scene.constellation-scene{background:radial-gradient(ellipse at 18% 30%,#30213b55,transparent 50%),radial-gradient(ellipse at 85% 65%,#1d304955,transparent 55%),#0b1019;border-color:#ffffff16}
.stats-home .constellation-scene:before{background:radial-gradient(ellipse at center,#0b101970 0%,transparent 65%);z-index:1;pointer-events:none}
.constellation-scene:after{display:none}
.constellation-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.constellation-scene .welcome-content,.constellation-scene .scene-bottom{position:relative;z-index:2}
.constellation-scene .scene-bottom{position:absolute}