@font-face{font-family:flow-serif;src:url('../app/fonts/SourceHanSerifCN-Heavy.otf')}*{box-sizing:border-box}.line-home{margin:0;background:#d9eadf;color:#14251d;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;overflow-x:hidden}.line-home a{text-decoration:none;color:inherit}.line-nav{height:84px;width:min(1280px,calc(100% - 72px));margin:auto;display:flex;align-items:center;gap:42px}.line-logo{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:800;letter-spacing:-.04em}.logo-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#06c755;color:white;font-family:flow-serif,serif;font-size:22px}.line-navlinks{display:flex;gap:30px;margin-left:auto;color:#506e5f;font-size:12px}.line-navlinks a:hover{color:#06a94a}.line-download{display:flex;align-items:center;gap:14px;padding:12px 17px;border-radius:99px;background:#14251d;color:#fff!important;font-size:12px;font-weight:700}.line-download b{font-size:16px}.menu-button{display:none;border:0;background:none}.line-hero{position:relative;min-height:calc(100vh - 84px);width:min(1280px,calc(100% - 72px));margin:auto;padding:80px 0 76px;display:grid;grid-template-columns:47% 53%;align-items:center}.hero-copy-line{position:relative;z-index:2}.line-overline{margin:0 0 22px;color:#537566;font-size:10px;letter-spacing:.18em;font-weight:800}.hero-copy-line h1{margin:0;font-size:clamp(58px,8.5vw,122px);line-height:.96;letter-spacing:-.1em;color:#13271d}.hero-copy-line h1 span,.line-statement em,.gallery-head h2 span,.line-cta h2 span{color:#06a94a;font-style:normal}.line-intro{max-width:380px;margin:30px 0 27px;color:#567064;font-size:15px;line-height:1.85}.round-arrow{display:inline-flex;align-items:center;gap:16px;color:#173d2b;font-size:12px;font-weight:750}.round-arrow span{display:grid;place-items:center;width:36px;height:36px;border:1px solid #91b2a1;border-radius:50%;font-size:18px}.hero-stamp{position:absolute;left:-22px;top:27px;color:#ff4f64;font-size:11px;letter-spacing:.1em;line-height:1.2;transform:rotate(-8deg);font-weight:800}.hero-stamp small{font-size:7px;letter-spacing:.2em}.hero-collage{position:relative;height:min(68vw,680px);max-height:680px}.blob{position:absolute;border-radius:50%;filter:blur(1px)}.blob-green{width:78%;height:70%;right:1%;top:8%;background:#7bce96}.blob-pink{width:38%;height:38%;left:1%;bottom:4%;background:#ff8896}.cover-main{position:absolute;z-index:2}.bubble-person{width:92%;height:92%;right:-4%;top:4%;object-fit:contain;filter:blur(.65px);transform:rotate(2deg);animation:personBreathe 6s ease-in-out infinite}.air-bubble{position:absolute;z-index:5;border:2px solid rgba(13,119,169,.68);border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.68),rgba(45,180,224,.16) 32%,rgba(4,140,198,.35));box-shadow:inset -8px -10px 18px rgba(0,99,145,.16),0 6px 18px rgba(24,109,143,.13);opacity:0;animation:bubbleRise 6s ease-in infinite}.bubble-one{width:72px;height:72px;right:5%;bottom:28%;animation-delay:.2s}.bubble-two{width:42px;height:42px;right:25%;bottom:14%;animation-delay:2.1s}.bubble-three{width:95px;height:95px;right:-5%;bottom:9%;animation-delay:4s}.collage-label{position:absolute;z-index:6;left:3%;bottom:14%;display:grid;place-items:center;width:95px;height:95px;border-radius:50%;background:#ff5366;color:#fff;font-size:12px;line-height:1.1;font-weight:800;letter-spacing:.08em;transform:rotate(-12deg);animation:spinLabel 8s linear infinite}.collage-label span{font-size:16px}.scribble-line{position:absolute;right:1%;bottom:7%;z-index:6;color:#153f2b;font-size:19px;font-family:"Bradley Hand",cursive;line-height:.9;transform:rotate(8deg)}.hero-bottom{position:absolute;bottom:15px;left:0;right:0;display:flex;align-items:center;gap:16px;color:#6d887a;font-size:9px;letter-spacing:.14em}.scroll-line{height:1px;flex:1;background:#aec9bb}.line-statement{position:relative;width:100%;margin:auto;padding:180px max(36px,calc((100% - 1280px)/2)) 190px;background:#ff7c8c;color:#13271d}.line-statement h2{margin:0;max-width:700px;font-size:clamp(66px,10vw,150px);line-height:.87;letter-spacing:-.11em}.line-statement em{color:#fff}.statement-note{max-width:310px;margin:45px 0 0 43%;color:#653c43;font-size:14px;line-height:1.9}.line-gallery{padding:120px max(36px,calc((100% - 1280px)/2)) 180px;background:#87d6a0;overflow:hidden}.gallery-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;max-width:1280px;margin:auto}.gallery-head h2{margin:0;font-size:clamp(58px,8vw,115px);line-height:.9;letter-spacing:-.1em}.gallery-head h2 span{color:#fff}.gallery-head>a{justify-self:end;display:flex;gap:16px;align-items:center;color:#17452e;font-size:12px;font-weight:750}.gallery-track{display:flex;align-items:flex-end;gap:30px;width:max-content;margin:75px auto 0;transform:translateX(-3%)}.gallery-card{margin:0;width:280px}.gallery-image{width:100%;height:380px;overflow:hidden;box-shadow:10px 12px 0 rgba(20,65,43,.22);background:#173e2b}.gallery-card img{display:block;width:100%;height:100%;object-fit:cover}.gallery-card figcaption{margin-top:16px;color:#204f37;font-size:10px;letter-spacing:.12em}.card-a{transform:rotate(-4deg)}.card-b{width:330px;transform:translateY(-55px) rotate(3deg)}.card-c{transform:rotate(-2deg)}.card-c img{transform:scale(1.56);object-position:center 53%}.line-cta{position:relative;min-height:630px;padding:150px max(36px,calc((100% - 1280px)/2));background:#0d5638;color:#fff;overflow:hidden}.cta-word{position:absolute;right:-4%;bottom:-18%;font-size:clamp(250px,35vw,600px);font-weight:900;line-height:.8;letter-spacing:-.12em;color:rgba(255,255,255,.09)}.cta-content{position:relative;z-index:2}.line-cta .line-overline{color:#8ce5ab}.line-cta h2{margin:0;font-size:clamp(68px,10vw,150px);line-height:.86;letter-spacing:-.11em}.line-cta h2 span{color:#69e094}.line-button{display:inline-flex;gap:35px;align-items:center;margin-top:42px;padding:18px 22px;border-radius:99px;background:#ff6678;color:#fff!important;font-size:12px;font-weight:750}.line-button b{font-size:19px}.cta-orbit{position:absolute;z-index:2;right:18%;top:20%;font-size:76px;color:#ff6678;animation:spinLabel 10s linear infinite}.line-footer{display:flex;justify-content:space-between;gap:25px;width:100%;margin:auto;padding:26px max(36px,calc((100% - 1280px)/2));background:#11251b;color:#8ea096;font-size:9px;letter-spacing:.08em}.line-footer div{display:flex;gap:24px}.line-footer a:hover{color:#69e094}@keyframes personBreathe{0%,100%{transform:rotate(2deg) translateY(0) scale(1)}50%{transform:rotate(0) translateY(-8px) scale(1.015)}}@keyframes bubbleRise{0%{transform:translate(0,0) scale(.55);opacity:0}12%{opacity:.82}70%{opacity:.7}100%{transform:translate(-42px,-310px) scale(1.18);opacity:0}}@keyframes spinLabel{to{transform:rotate(348deg)}}@media(max-width:800px){.line-nav,.line-hero,.line-footer{width:calc(100% - 40px)}.line-nav{height:72px}.line-navlinks{display:none}.line-download{margin-left:auto}.menu-button{display:flex;flex-direction:column;gap:5px}.menu-button i{display:block;width:22px;height:1px;background:#14251d}.line-hero{display:block;padding:70px 0 95px;min-height:auto}.hero-copy-line h1{font-size:clamp(56px,14vw,100px)}.hero-collage{height:520px;margin-top:35px}.line-statement{padding:120px 20px}.line-statement h2{font-size:clamp(63px,17vw,120px)}.statement-note{margin-left:25%;margin-top:35px}.line-gallery{padding:90px 20px 120px}.gallery-head{display:block}.gallery-head>a{margin-top:25px}.gallery-track{margin-top:65px;margin-left:5%;gap:18px}.gallery-card{width:210px}.gallery-image{height:290px}.card-b{width:245px;transform:translateY(-30px) rotate(3deg)}.line-cta{min-height:530px;padding:110px 20px}.line-cta h2{font-size:clamp(66px,17vw,120px)}.cta-word{font-size:55vw}.line-footer{flex-wrap:wrap;padding-inline:20px}.line-footer>span:last-child{display:none}}@media(max-width:500px){.line-download{padding:10px 13px}.line-hero{padding-top:55px}.hero-collage{height:400px}.bubble-person{width:110%;right:-14%}.collage-label{width:75px;height:75px;font-size:10px}.scribble-line{font-size:15px}.line-footer div{gap:12px}}
/* Frosted-glass treatment for the bubble illustration. */
.bubble-scene::before{content:"";position:absolute;z-index:1;inset:8% 2% 5% 9%;border:1px solid rgba(255,255,255,.5);border-radius:48% 52% 46% 54%;background:linear-gradient(135deg,rgba(255,255,255,.31),rgba(206,246,223,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 24px 80px rgba(48,123,81,.14);-webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%)}
.bubble-scene .blob{filter:blur(9px);opacity:.78}
.bubble-person{filter:blur(4px) saturate(.82) contrast(.91) brightness(1.04) drop-shadow(0 0 24px rgba(255,218,160,.25));opacity:.92;-webkit-mask-image:radial-gradient(ellipse 68% 72% at 51% 52%,#000 48%,rgba(0,0,0,.82) 68%,transparent 100%);mask-image:radial-gradient(ellipse 68% 72% at 51% 52%,#000 48%,rgba(0,0,0,.82) 68%,transparent 100%)}

/* Defocused editorial treatment, inspired by frosted photographic layouts. */
.bubble-scene{overflow:hidden;border-radius:34px;background:linear-gradient(100deg,#18221d 0 45%,#d8dfcb 45% 100%);box-shadow:0 30px 80px rgba(27,67,46,.2)}
.bubble-scene::before{inset:-10%;border:0;border-radius:0;background:url('assets/bubble-figure.png') 58% 50%/105% auto no-repeat;opacity:.42;filter:blur(24px) saturate(.72) contrast(.9);transform:scale(1.14);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.bubble-scene::after{content:"字幕 Flow\A让每一句话，都有自己的节奏";white-space:pre;position:absolute;z-index:7;right:7%;bottom:8%;width:220px;padding:20px 22px;border:1px solid rgba(255,255,255,.22);border-radius:22px;background:rgba(15,27,21,.54);color:rgba(255,255,255,.92);font-size:12px;font-weight:700;line-height:1.8;letter-spacing:.02em;box-shadow:0 20px 45px rgba(7,18,12,.22),inset 0 1px 0 rgba(255,255,255,.18);-webkit-backdrop-filter:blur(20px) saturate(118%);backdrop-filter:blur(20px) saturate(118%)}
.bubble-scene .blob{opacity:.16;filter:blur(34px)}
.bubble-scene .blob-green{background:#c3edb4}.bubble-scene .blob-pink{background:#ffb1a5}
.bubble-person{width:104%;height:104%;right:-12%;top:1%;filter:blur(6px) saturate(.74) contrast(.88) brightness(1.06) drop-shadow(0 0 36px rgba(255,228,177,.32));opacity:.76;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.bubble-scene .collage-label{left:6%;bottom:8%;width:78px;height:78px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.24);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bubble-scene .scribble-line{display:none}
@media(max-width:500px){.bubble-scene::after{right:5%;bottom:5%;width:185px;padding:15px 17px;font-size:10px}.bubble-person{width:118%;right:-22%}}

/* Cooler, layered glass canvas for the opening screen. */
.line-home{background-color:#e8eeeb;background-image:radial-gradient(circle at 78% 8%,rgba(142,199,178,.52),transparent 27%),radial-gradient(circle at 18% 24%,rgba(255,255,255,.92),transparent 31%),radial-gradient(circle at 61% 72%,rgba(143,196,209,.24),transparent 30%),linear-gradient(125deg,#edf2ef 0%,#dce8e2 52%,#e8ece4 100%);background-attachment:fixed}
.line-nav{position:relative;z-index:20;margin-top:12px;height:68px;padding:0 22px;border:1px solid rgba(255,255,255,.7);border-radius:22px;background:rgba(247,251,249,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 42px rgba(38,78,58,.09);-webkit-backdrop-filter:blur(22px) saturate(130%);backdrop-filter:blur(22px) saturate(130%)}
.line-hero{isolation:isolate;margin-top:18px;padding-inline:34px}
.line-hero::before{content:"";position:absolute;z-index:-2;inset:0;border:1px solid rgba(255,255,255,.7);border-radius:42px;background:linear-gradient(130deg,rgba(255,255,255,.58),rgba(236,246,241,.25));box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(97,139,118,.09),0 28px 90px rgba(45,91,69,.12);-webkit-backdrop-filter:blur(28px) saturate(125%);backdrop-filter:blur(28px) saturate(125%)}
.line-hero::after{content:"";position:absolute;z-index:-1;width:42%;height:55%;left:34%;top:10%;border-radius:50%;background:rgba(93,201,151,.18);filter:blur(70px);pointer-events:none}
.bubble-scene{border:1px solid rgba(255,255,255,.62);background:linear-gradient(112deg,rgba(22,35,29,.88) 0 45%,rgba(231,238,224,.62) 45% 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 34px 85px rgba(31,68,49,.2);-webkit-backdrop-filter:blur(28px) saturate(120%);backdrop-filter:blur(28px) saturate(120%)}
.hero-copy-line h1{color:#13241c}.hero-copy-line h1 span{color:#0baa52}.line-intro{color:#557065}.hero-bottom{left:34px;right:34px}
@media(max-width:800px){.line-nav{width:calc(100% - 24px);padding-inline:14px}.line-hero{width:calc(100% - 24px);padding-inline:20px}.hero-bottom{left:20px;right:20px}}

.line-logo .logo-mark{display:block;width:38px;height:38px;border-radius:11px;object-fit:cover;background:none}
.bubble-scene{overflow:visible}
.bubble-scene::before{inset:0;border-radius:34px;transform:none}
.bubble-person{clip-path:inset(0 5% 0 0 round 34px)}
.air-bubble{overflow:visible}

/* Unified palette: the hero image becomes the glass background itself. */
.line-hero{overflow:hidden;background:rgba(241,247,243,.34)}
.line-hero::before{inset:-24px;z-index:-2;border:0;border-radius:54px;background:url('assets/bubble-figure.png') 82% 48%/67% auto no-repeat;box-shadow:none;filter:blur(17px) saturate(.72) contrast(.92);opacity:.48;transform:scale(1.05);-webkit-backdrop-filter:none;backdrop-filter:none}
.line-hero::after{inset:0;z-index:-1;width:auto;height:auto;left:0;top:0;border-radius:42px;background:linear-gradient(90deg,rgba(244,249,246,.94) 0%,rgba(239,247,242,.78) 39%,rgba(219,235,226,.28) 72%,rgba(226,240,232,.4) 100%);filter:none;border:1px solid rgba(255,255,255,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.bubble-scene{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.bubble-scene::before{display:none}
.bubble-scene .blob{display:none}
.bubble-person{width:108%;height:108%;right:-13%;top:-2%;opacity:.5;filter:blur(8px) saturate(.7) contrast(.86) brightness(1.08) drop-shadow(0 0 42px rgba(255,229,181,.28));clip-path:none;-webkit-mask-image:radial-gradient(ellipse 62% 68% at 54% 52%,#000 38%,rgba(0,0,0,.74) 68%,transparent 100%);mask-image:radial-gradient(ellipse 62% 68% at 54% 52%,#000 38%,rgba(0,0,0,.74) 68%,transparent 100%)}
.bubble-scene::after{right:2%;bottom:10%;background:rgba(18,43,31,.48);border-color:rgba(255,255,255,.25)}
.line-statement{background:rgba(243,248,245,.58);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.line-statement em{color:#0baa52}.statement-note{color:#597064}
.line-gallery,.line-cta{background:#0d5136;color:#f2fbf6}
.gallery-head h2,.gallery-head h2 span{color:#f2fbf6}.gallery-head>a{color:#9be4b7}.line-gallery .line-overline,.line-cta .line-overline{color:#8fc9a6}.gallery-card figcaption{color:#a9d4ba}.gallery-image{box-shadow:10px 12px 0 rgba(0,0,0,.2)}
.line-cta{border-top:1px solid rgba(255,255,255,.12)}
@media(max-width:800px){.line-hero::before{background-position:70% 70%;background-size:125% auto}.bubble-person{width:118%;right:-20%;opacity:.42}}

.line-intro{font-family:"Kaiti SC","STKaiti","KaiTi",serif;font-size:18px;font-weight:600;letter-spacing:.045em;line-height:1.9;color:#49695a}
.round-arrow{font-family:"Kaiti SC","STKaiti","KaiTi",serif;font-size:14px;letter-spacing:.04em}

/* Full-bleed first screen; the second section connects without a page-color seam. */
.line-nav{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(1280px,calc(100% - 48px));margin:0}
.line-hero{width:100%;min-height:100dvh;margin:0;padding:128px max(36px,calc((100% - 1280px)/2)) 72px;border-radius:0}
.line-hero::before,.line-hero::after{border-radius:0}
.hero-bottom{left:max(36px,calc((100% - 1280px)/2));right:max(36px,calc((100% - 1280px)/2));bottom:24px}
.line-statement{overflow:hidden;min-height:100dvh}
.line-statement>p,.line-statement>h2{position:relative;z-index:2}
.statement-art{position:absolute;z-index:1;right:-7%;bottom:-3%;width:54%;height:74%;object-fit:cover;object-position:48% center;opacity:.9;mix-blend-mode:multiply;transform:rotate(-3deg);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%)}
@media(max-width:800px){.line-nav{width:calc(100% - 24px)}.line-hero{padding:108px 20px 72px}.hero-bottom{left:20px;right:20px}.statement-art{right:-25%;width:90%;height:56%;opacity:.55}.line-statement{min-height:850px}}

/* Final colour system: glass mint / coral / forest / Klein blue. */
.line-statement{background:#ff7b8b;color:#13251c}
.line-statement .line-overline{color:#315f4c}.line-statement em{color:#fff}.statement-note{color:#6b3941;font-family:"Kaiti SC","STKaiti","KaiTi",serif;font-size:17px;line-height:1.9}
.statement-art{opacity:.88;mix-blend-mode:multiply;filter:saturate(.92) contrast(1.04);box-shadow:0 25px 70px rgba(92,25,38,.14)}
.line-cta{background:#002fa7;color:#fff}
.line-cta .line-overline{color:#a9c4ff}.line-cta h2{color:#fff}.line-cta h2 span{color:#8fd7ff}
.line-cta .cta-word{color:rgba(255,255,255,.1)}.line-cta .cta-orbit{color:#ff7b8b}
.line-button{background:#fff;color:#002fa7!important;box-shadow:0 16px 40px rgba(0,15,82,.24)}
.line-button:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(0,15,82,.3)}
.line-footer{background:#001d68;color:#9fb5f0}.line-footer a:hover{color:#fff}
.gallery-card img{transition:transform .45s ease,filter .45s ease}.gallery-card:hover img{transform:scale(1.035);filter:saturate(1.06)}.card-c:hover img{transform:scale(1.6)}
.line-download,.line-button,.round-arrow span{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}.line-download:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.bubble-person,.air-bubble,.cta-orbit{animation:none!important}.gallery-card img,.line-button,.line-download{transition:none!important}}

.download-actions{display:flex;gap:14px;align-items:center;margin-top:42px}
.download-actions .line-button{min-width:210px;margin-top:0;padding:15px 18px;gap:14px;justify-content:flex-start;white-space:nowrap}
.download-actions .line-button i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e7edff;color:#002fa7;font-size:10px;font-style:normal;font-weight:800}
.download-actions .line-button span{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#002fa7}
.download-actions .line-button small{font-size:8px;letter-spacing:.12em;opacity:.62}
.download-actions .line-button b{margin-left:auto}
.download-actions .secondary{background:rgba(255,255,255,.15);color:#fff!important;border:1px solid rgba(255,255,255,.34);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.download-actions .secondary span{color:#fff}.download-actions .secondary i{background:rgba(255,255,255,.16);color:#fff}
@media(max-width:620px){.download-actions{align-items:stretch;flex-direction:column}.download-actions .line-button{width:100%;min-width:0}}

.hero-platforms{display:flex;gap:10px;margin:28px 0 22px}
.hero-platforms a{display:flex;align-items:center;gap:11px;min-width:188px;padding:12px 14px;border:1px solid rgba(255,255,255,.72);border-radius:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 32px rgba(36,82,59,.1);-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%);transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.hero-platforms a:hover{transform:translateY(-2px);background:rgba(255,255,255,.76);box-shadow:inset 0 1px 0 #fff,0 17px 38px rgba(36,82,59,.14)}
.hero-platforms b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#102b20;color:#fff;font-size:9px;letter-spacing:.02em}
.hero-platforms span{display:flex;flex-direction:column;gap:1px;color:#143326;font-size:12px;font-weight:800;white-space:nowrap}
.hero-platforms small{color:#6d877a;font-size:8px;font-weight:600;letter-spacing:.06em}
.hero-platforms i{margin-left:auto;color:#0baa52;font-size:16px;font-style:normal;font-weight:800}
.statement-art{right:-4%;transform:translateX(-2%) rotate(-3deg)}
@media(max-width:620px){.hero-platforms{align-items:stretch;flex-direction:column}.hero-platforms a{width:100%;min-width:0}.statement-art{right:-14%;transform:translateX(-8%) rotate(-3deg)}}

.hero-platforms{gap:12px}
.hero-platforms a{min-width:215px;padding:15px 18px;border-radius:999px;background:rgba(255,255,255,.86)}
.hero-platforms a:nth-child(2){background:rgba(19,52,38,.1);border-color:rgba(18,59,41,.22)}
.hero-platforms a:nth-child(2) b{background:rgba(16,43,32,.76)}
.hero-platforms a:nth-child(2):hover{background:rgba(255,255,255,.56)}

.bubble-scene::after{display:none}
.floating-download{position:absolute;z-index:9;top:18%;right:10%;display:flex;align-items:center;justify-content:space-between;gap:30px;min-width:190px;padding:17px 20px;border:1px solid rgba(255,255,255,.35);border-radius:18px;background:rgba(20,48,36,.48);color:#fff!important;font-size:11px;font-weight:800;letter-spacing:.14em;box-shadow:0 18px 45px rgba(23,61,43,.16),inset 0 1px 0 rgba(255,255,255,.22);-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);transition:transform .2s ease,background-color .2s ease}
.floating-download span{font-size:18px;letter-spacing:0}.floating-download:hover{transform:translateY(-2px);background:rgba(12,40,27,.64)}
@media(max-width:620px){.floating-download{top:12%;right:2%;min-width:150px;padding:13px 15px}}

.statement-note{margin-top:68px;margin-left:38%}
.line-hero{background-color:#d8e5de}
.line-hero::after{background:linear-gradient(90deg,rgba(235,243,238,.94) 0%,rgba(218,233,225,.82) 40%,rgba(181,210,196,.4) 72%,rgba(194,218,206,.5) 100%)}
@media(max-width:620px){.statement-art{right:-18%;transform:translateX(-2%) rotate(-3deg)}.statement-note{margin-left:12%;margin-top:42px}}

/* Final hero art direction: deep forest glass with clear blue bubbles. */
.line-hero{
  background-color:#477d69;
  background-image:
    radial-gradient(circle at 77% 22%,rgba(170,213,195,.38),transparent 34%),
    radial-gradient(circle at 50% 92%,rgba(88,151,126,.42),transparent 46%),
    linear-gradient(122deg,#376d59 0%,#5d8e78 51%,#427460 100%);
}
.line-hero::before{
  background:url('assets/bubble-figure.png') 82% 48%/67% auto no-repeat;
  filter:blur(20px) saturate(.68) contrast(.9);
  opacity:.25;
}
.line-hero::after{
  background:linear-gradient(112deg,rgba(27,79,60,.42),rgba(105,153,133,.2) 52%,rgba(220,241,232,.13));
  border-color:rgba(219,244,233,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(3,24,17,.2);
  -webkit-backdrop-filter:blur(18px) saturate(112%);
  backdrop-filter:blur(18px) saturate(112%);
}
.hero-copy-line h1{color:#edf7f1;text-shadow:0 2px 30px rgba(2,22,15,.18)}
.hero-copy-line h1 span{color:#60d58e}
.line-overline{color:#a8c9bb}
.line-intro{color:#c5dacf}
.line-home .round-arrow{color:#e2f1e9}
.round-arrow span{border-color:rgba(211,239,226,.38);background:rgba(219,243,232,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.13);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hero-bottom{color:#92b4a5}.scroll-line{background:rgba(180,213,198,.32)}
.bubble-person{opacity:.4;filter:blur(9px) saturate(.72) contrast(.88) brightness(.92) drop-shadow(0 0 42px rgba(96,183,147,.18))}
.air-bubble{
  border:0;
  background:
    radial-gradient(circle at 31% 24%,rgba(232,251,255,.8) 0 7%,rgba(125,218,244,.42) 17%,rgba(37,164,220,.22) 44%,rgba(16,124,188,.12) 69%,rgba(5,77,137,.22) 100%);
  box-shadow:inset 10px 10px 20px rgba(226,250,255,.22),inset -12px -14px 24px rgba(6,89,159,.2),0 12px 30px rgba(1,25,38,.14);
  -webkit-backdrop-filter:blur(5px) saturate(130%);
  backdrop-filter:blur(5px) saturate(130%);
}
.floating-download{
  top:43%;
  left:18%;
  right:auto;
  min-width:252px;
  padding:22px 26px;
  border-color:rgba(220,244,233,.22);
  background:linear-gradient(135deg,rgba(104,142,125,.78),rgba(64,105,86,.88));
  font-size:16px;
  box-shadow:0 18px 46px rgba(2,28,19,.23),inset 0 1px 0 rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(20px) saturate(118%);
  backdrop-filter:blur(20px) saturate(118%);
}
.floating-download:hover{background:linear-gradient(135deg,rgba(119,158,140,.88),rgba(56,96,78,.94))}
.line-nav{border-color:rgba(225,245,236,.17);background:rgba(13,48,36,.58);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 14px 42px rgba(2,27,18,.18);-webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%)}
.line-logo{color:#edf7f1!important}.line-navlinks{color:#b7d0c4}.line-navlinks a:hover{color:#70dfa0}
.line-download{background:linear-gradient(135deg,#eff8f3,#cfe6da);color:#143c2e!important;box-shadow:0 10px 25px rgba(2,28,18,.18)}
.menu-button i{background:#edf7f1}

@media(max-width:800px){
  .line-hero::before{background-position:70% 70%;background-size:125% auto}
  .floating-download{top:38%;left:12%;right:auto}
}
@media(max-width:620px){
  .floating-download{top:34%;left:4%;right:auto;min-width:174px;padding:15px 17px;font-size:12px}
}
@media(prefers-reduced-transparency:reduce){
  .line-nav{background:#123b2d}
  .line-hero::after{background:rgba(13,49,37,.82)}
  .floating-download{background:#527e69}
}

/* Lighter jade-green canvas and a continuous glass edge for the main CTA. */
.line-hero{
  background-color:#b8d0c3;
  background-image:
    radial-gradient(circle at 76% 18%,rgba(238,247,242,.58),transparent 35%),
    radial-gradient(circle at 48% 94%,rgba(171,207,190,.38),transparent 47%),
    linear-gradient(122deg,#91b7a5 0%,#c1d6ca 53%,#b3ccbf 100%);
}
.line-hero::after{
  background:linear-gradient(112deg,rgba(76,126,103,.15),rgba(207,229,218,.12) 54%,rgba(246,251,248,.2));
  border-color:rgba(248,253,250,.42);
}
.hero-copy-line h1 span{color:#168856}
.hero-copy-line h1{white-space:nowrap}
.hero-copy-line .line-overline{color:#50685e}
.line-intro{color:#46564f}
.floating-download{
  overflow:hidden;
  border:2px solid rgba(231,249,240,.58);
  background-clip:padding-box;
  box-shadow:0 18px 46px rgba(39,83,64,.2),inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.3);
}

/* A single-purpose opening scene. Clicking it reveals the static site. */
.line-home.intro-active{overflow:hidden}
.skip-intro .site-intro{display:none}
.site-intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(218,234,225,.72);opacity:1;visibility:visible;-webkit-backdrop-filter:blur(16px) saturate(105%);backdrop-filter:blur(16px) saturate(105%);transition:opacity .6s ease,visibility 0s linear 0s}
.site-intro.is-leaving{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.intro-enter{position:relative;display:block;width:min(680px,calc(100vw - 32px));aspect-ratio:1.7;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.76);border-radius:28px;background:#eee8d9;color:#315d4c;box-shadow:0 28px 80px rgba(44,88,68,.18),inset 0 1px 0 rgba(255,255,255,.62);cursor:pointer;text-align:left}
.intro-enter:focus-visible{outline:3px solid rgba(59,116,90,.78);outline-offset:5px}
.intro-haze{display:none}
.intro-art{position:absolute;inset:0;overflow:hidden}
.intro-girl-source{position:absolute;left:0;top:0;width:76%;height:100%;object-fit:cover;object-position:48% 44%;-webkit-mask-image:linear-gradient(90deg,#000 0 68%,rgba(0,0,0,.72) 82%,transparent 100%);mask-image:linear-gradient(90deg,#000 0 68%,rgba(0,0,0,.72) 82%,transparent 100%)}
.intro-camera-prop{position:absolute;z-index:3;left:17%;top:48%;width:42%;height:auto;clip-path:inset(1% 1% 4% 1% round 28px);mix-blend-mode:multiply;transform-origin:50% 50%}
.intro-camera-flash{position:absolute;z-index:6;left:38%;top:49%;width:20%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,1) 0 4%,rgba(255,255,255,.88) 10%,rgba(255,248,218,.4) 34%,transparent 70%);opacity:0;visibility:hidden;pointer-events:none;transform:scale(.72);transform-origin:center;will-change:transform,opacity}
.intro-instruction{position:absolute;z-index:5;left:57%;top:39%;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.intro-instruction small{font-size:9px;font-weight:800;letter-spacing:.18em;color:#70877d}
.intro-instruction b{font-size:30px;line-height:1;letter-spacing:-.05em;color:#315d4c}
.intro-instruction strong{font-size:14px;letter-spacing:.08em;color:#60766c}
.site-intro.is-leaving .intro-enter,.site-intro.is-leaving .intro-camera-flash,.site-intro.is-leaving .intro-instruction{animation:none}
.line-home.site-entered .bubble-person,.line-home.site-entered .cta-orbit{animation:none!important}
.line-home.site-entered .air-bubble{animation:bubbleRise 6.8s ease-in infinite}
.line-home.site-entered .bubble-one{animation-delay:.2s}
.line-home.site-entered .bubble-two{animation-delay:2.2s}
.line-home.site-entered .bubble-three{animation-delay:4.3s}

@media(max-width:700px){
  .intro-enter{border-radius:24px}
  .intro-girl-source{width:80%}
  .intro-camera-prop{left:18%;top:50%;width:48%}
  .intro-instruction{left:54%;top:35%;right:auto;bottom:auto}
  .intro-instruction small{display:none}
  .intro-instruction b{font-size:22px}
  .intro-instruction strong{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .intro-enter,.intro-camera-flash,.intro-instruction{animation:none}
  .intro-enter,.intro-instruction{opacity:1;visibility:visible;filter:none;transform:none}
  .intro-camera-flash{display:none}
  .site-intro{transition:none}
}

/* Full-width forest navigation instead of a floating glass capsule. */
.line-nav{top:0;left:0;transform:none;width:100%;height:80px;padding:0 max(36px,calc((100% - 1280px)/2));border:0;border-radius:0;background:#3f6f5c;box-shadow:0 1px 0 rgba(19,58,42,.16);-webkit-backdrop-filter:none;backdrop-filter:none}
.line-navlinks{color:#c5d8cf}
.line-navlinks a:hover{color:#fff}
@media(max-width:800px){.line-nav{width:100%;padding-inline:20px}}

/* Keep the hero copy and CTA in separate visual lanes. */
.hero-copy-line h1{
  color:#29483c;
  font-size:clamp(58px,6.55vw,94px);
  line-height:.95;
  letter-spacing:-.085em;
  text-shadow:none;
}
.hero-copy-line h1 span{color:#087b49}
.floating-download{
  top:43%;
  left:48%;
  right:auto;
}

/* One clear intro lockup, placed where the portrait fades into light. */
.intro-instruction{
  left:64%;
  top:44%;
  flex-direction:row;
  align-items:baseline;
  gap:14px;
  white-space:nowrap;
  isolation:isolate;
}
.intro-instruction::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-32px -42px;
  background:radial-gradient(ellipse at center,rgba(238,232,217,.96) 0%,rgba(238,232,217,.72) 46%,transparent 74%);
  filter:blur(7px);
  pointer-events:none;
}
.intro-instruction small{display:none}
.intro-instruction b{
  color:#183e31;
  font-size:32px;
  font-weight:850;
  line-height:1;
  letter-spacing:-.065em;
}
.intro-instruction strong{
  position:relative;
  color:#3f5d52;
  font-size:11px;
  font-weight:750;
  letter-spacing:.08em;
}
.intro-instruction strong::after{
  content:" →";
  color:#183e31;
  font-size:14px;
}

@media(max-width:800px){
  .hero-copy-line h1{font-size:clamp(52px,11.5vw,82px)}
  .floating-download{top:42%;left:47%;right:auto}
}
@media(max-width:620px){
  .hero-copy-line h1{font-size:clamp(43px,12.2vw,62px)}
  .floating-download{top:40%;left:42%;right:auto}
}
@media(max-width:700px){
  .intro-instruction{left:54%;top:42%;gap:9px}
  .intro-instruction::before{inset:-22px -26px}
  .intro-instruction b{font-size:21px}
  .intro-instruction strong{font-size:9px}
}

/* Refine the opening composition: portrait left, entry cue under the title. */
.intro-girl-source{left:-6%;width:76%}
.intro-camera-prop{
  left:11%;
  z-index:4;
  mix-blend-mode:normal;
  filter:drop-shadow(0 10px 16px rgba(36,42,37,.16));
}
.intro-camera-flash{left:32%}
.intro-instruction{
  left:66%;
  top:39%;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.intro-instruction::before{inset:-30px -48px -34px -38px}
.intro-instruction b{font-size:34px}
.intro-instruction b{
  letter-spacing:.015em;
  word-spacing:.2em;
}
.intro-instruction strong{
  align-self:flex-end;
  color:#49665a;
  font-size:10px;
  letter-spacing:.14em;
}
.intro-instruction strong::after{
  position:absolute;
  left:calc(100% + 7px);
  top:50%;
  margin:0;
  transform:translateY(-52%);
}

.hero-copy-line h1{font-size:clamp(62px,7.2vw,104px)}
.floating-download{left:40%}

@media(max-width:700px){
  .intro-girl-source{left:-9%;width:82%}
  .intro-camera-prop{left:9%;width:48%}
  .intro-camera-flash{left:31%}
  .intro-instruction{left:58%;top:37%;gap:7px}
  .intro-instruction::before{inset:-20px -28px -24px -22px}
  .intro-instruction b{font-size:22px}
  .intro-instruction strong{font-size:8px;letter-spacing:.1em}
}
@media(max-width:800px){
  .hero-copy-line h1{font-size:clamp(54px,12vw,86px)}
  .floating-download{left:42%}
}
@media(max-width:620px){
  .hero-copy-line h1{font-size:clamp(46px,12.8vw,64px)}
  .floating-download{left:38%}
}

.line-logo span{
  letter-spacing:.045em;
  word-spacing:.16em;
}

.cta-word{
  bottom:0;
  line-height:1;
}

@media(max-width:800px){.menu-button{margin-left:auto}}

.gallery-card figcaption{
  width:100%;
  font-size:12px;
  text-align:center;
}

.download-actions .is-disabled{cursor:not-allowed;opacity:.58;box-shadow:none;transform:none}
.download-status{min-height:1.5em;margin:12px 0 0;color:#b9caff;font-size:11px}
.environment-badge{padding:4px 8px;border:1px solid rgba(0,47,167,.22);border-radius:999px;background:rgba(255,255,255,.55);color:#002fa7;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.statement-note .brand-name{
  color:#174d3a;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  font-weight:850;
  letter-spacing:-.025em;
}
.statement-note{color:#edf0ed}
.statement-note>span{display:block}

.intro-instruction b{
  display:flex;
  align-items:baseline;
  gap:13px;
  letter-spacing:normal;
  word-spacing:normal;
}
.intro-title-cn{
  color:#45685a;
  font-size:25px;
  font-weight:720;
  letter-spacing:.12em;
}
.intro-title-flow{
  color:#133f31;
  font-size:41px;
  font-style:normal;
  font-weight:900;
  letter-spacing:-.055em;
}
@media(max-width:700px){
  .intro-instruction b{gap:8px}
  .intro-title-cn{font-size:17px}
  .intro-title-flow{font-size:27px}
}

.card-c img{transform:scale(1.06);object-position:center}
.card-c:hover img{transform:scale(1.1)}

.line-intro>span,.statement-note>span{display:block}
.line-intro,.statement-note{
  max-width:460px;
  text-align:left;
}
.statement-note{margin-left:0}
@media(max-width:620px){
  .line-intro,.statement-note{max-width:100%;text-align:left}
  .statement-note{margin-left:0}
}

/* Keep every hero text element on one clear left baseline. */
.line-hero{
  padding-left:clamp(48px,6.5vw,112px);
  padding-right:clamp(48px,6.5vw,112px);
}
.hero-copy-line{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.hero-copy-line .line-overline,
.hero-copy-line h1,
.hero-copy-line .line-intro,
.hero-copy-line .round-arrow{
  margin-left:0;
  text-align:left;
}
@media(max-width:800px){
  .line-hero{padding-left:24px;padding-right:24px}
}

/* Center the download label while keeping the arrow on its own right edge. */
.floating-download{justify-content:center}
.floating-download>span{position:absolute;right:26px}
@media(max-width:620px){
  .floating-download>span{right:17px}
}

.statement-note{
  max-width:430px;
  margin-left:8%;
  text-align:center;
}
@media(max-width:620px){
  .statement-note{max-width:78%;margin-left:11%;text-align:center}
}

/* Shared editorial rhythm for the two supporting copy blocks. */
.line-intro,.statement-note{
  max-width:460px;
  text-align:left;
}
.statement-note{margin-left:0}
.line-statement h2{margin-left:-.075em}
.line-statement>.line-overline,
.line-statement>h2,
.line-statement>.statement-note{transform:translateX(-30px)}
@media(max-width:620px){
  .line-intro,.statement-note{max-width:100%;text-align:left}
  .statement-note{margin-left:0}
  .line-statement h2{margin-left:-.045em}
  .line-statement>.line-overline,
  .line-statement>h2,
  .line-statement>.statement-note{transform:translateX(-8px)}
}

/* Three interactive memories anchor the hero without becoming feature cards. */
.hero-feature-dock{
  position:absolute;
  z-index:20;
  left:50%;
  width:min(920px,calc(100% - 96px));
  bottom:clamp(28px,4.2vh,48px);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:end;
  pointer-events:none;
  transform:translateX(-50%);
}
@media(min-width:801px){
  .hero-feature-dock{
    bottom:max(clamp(28px,4.2vh,48px),calc(100% - 100vh + 36px));
  }
}
.feature-item{
  position:relative;
  width:104px;
  height:104px;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto;
}
.feature-item:nth-child(1),.feature-item:nth-child(2),.feature-item:nth-child(3){justify-self:center}
.feature-trigger{
  position:relative;
  display:block;
  width:104px;
  height:104px;
  padding:0;
  border:0;
  background:none;
  color:#183e31;
  cursor:pointer;
  font:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .28s ease,filter .28s ease;
}
.feature-trigger:focus-visible{outline:2px solid rgba(20,83,59,.85);outline-offset:7px;border-radius:33px}
.feature-visual{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  border:1px solid rgba(244,253,248,.76);
  border-radius:35px;
  background:#adc8bb;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 18px 36px rgba(42,88,68,.18),
    0 0 0 7px rgba(237,248,242,.12);
  transform-origin:50% 68%;
  will-change:transform;
  transition:box-shadow .3s ease,filter .3s ease;
}
.feature-visual::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.5),transparent 23%),
    linear-gradient(145deg,rgba(255,255,255,.15),transparent 44%,rgba(17,72,50,.18));
  pointer-events:none;
}
.feature-visual::after{
  content:"";
  position:absolute;
  z-index:3;
  right:10px;
  top:10px;
  width:18px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.62);
  filter:blur(2px);
  transform:rotate(-34deg);
  pointer-events:none;
}
.feature-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .4s ease}
.feature-creativity .feature-visual img{object-position:50% 36%;transform:scale(1.16)}
.feature-smooth .feature-visual img{object-position:53% 57%;transform:scale(1.42)}
.feature-intimacy .feature-visual img{object-position:53% 57%;transform:scale(1.38)}
.feature-trigger:hover .feature-visual,.feature-item.is-open .feature-visual{
  filter:saturate(1.05) contrast(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 22px 44px rgba(34,82,59,.24),
    0 0 0 10px rgba(235,249,241,.18);
}
.feature-trigger:hover img,.feature-item.is-open img{transform:scale(1.52)}
.feature-creativity .feature-trigger:hover img,.feature-creativity.is-open img{transform:scale(1.24)}
.feature-popover{
  position:absolute;
  z-index:8;
  bottom:calc(100% + 60px);
  display:block;
  width:286px;
  min-height:360px;
  padding:12px 12px 22px;
  border:1px solid rgba(231,246,238,.28);
  border-radius:32px;
  background:
    radial-gradient(circle at 78% 82%,rgba(31,162,98,.42),transparent 38%),
    linear-gradient(155deg,rgba(17,58,43,.96),rgba(8,98,56,.94));
  color:#f2f8f4;
  box-shadow:0 30px 75px rgba(21,65,46,.3),inset 0 1px 0 rgba(255,255,255,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform-origin:50% 100%;
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  backdrop-filter:blur(22px) saturate(120%);
  will-change:transform,opacity;
}
.feature-item:nth-child(1) .feature-popover,.feature-item:nth-child(2) .feature-popover,.feature-item:nth-child(3) .feature-popover{left:50%;right:auto;margin-left:-143px;transform-origin:50% 100%}
.feature-item.is-visible .feature-popover{opacity:1;visibility:visible}
.feature-popover::before{
  content:"✣";
  position:absolute;
  z-index:-1;
  left:50%;
  bottom:-58px;
  display:grid;
  place-items:center;
  width:218px;
  height:64px;
  border-radius:0 0 22px 22px;
  background:linear-gradient(120deg,#15a960,#087544);
  color:rgba(244,252,248,.92);
  font-size:26px;
  transform:translateX(-50%);
  clip-path:polygon(0 0,100% 0,100% 35%,96% 39%,96% 61%,100% 65%,100% 100%,0 100%,0 65%,4% 61%,4% 39%,0 35%);
  box-shadow:0 18px 34px rgba(19,87,56,.24);
}
.feature-popover::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:1px;
  background:rgba(226,245,236,.15);
}
.feature-card-art{
  position:relative;
  display:block;
  height:205px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.38);
  border-radius:22px;
  background:#e8eee9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.64);
}
.feature-card-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.2),transparent 45%,rgba(7,61,39,.1));
  pointer-events:none;
}
.feature-card-art::before{
  content:"";
  position:absolute;
  z-index:2;
  top:-38%;
  bottom:-38%;
  left:-58%;
  width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  opacity:0;
  pointer-events:none;
  transform:rotate(12deg);
}
.feature-card-art img{display:block;width:100%;height:100%;object-fit:cover;will-change:transform}
.feature-creativity .feature-card-art img{object-position:50% 43%;filter:saturate(.86) contrast(1.12) brightness(.94)}
.feature-smooth .feature-card-art img{object-position:50% 57%;filter:saturate(.9) contrast(1.08) brightness(1.02)}
.feature-intimacy .feature-card-art img{object-position:50% 56%;filter:saturate(.78) contrast(1.1) sepia(.08)}
.feature-item.is-visible .feature-card-art::before{animation:cardLightPass 2.8s .22s ease-in-out infinite}
.feature-creativity.is-visible .feature-card-art img{animation:cardArtExpand 6.2s ease-in-out infinite}
.feature-smooth.is-visible .feature-card-art img{animation:cardArtGlide 5.4s ease-in-out infinite}
.feature-intimacy.is-visible .feature-card-art img{animation:cardArtApproach 6.8s ease-in-out infinite}
.feature-index{
  position:relative;
  z-index:1;
  display:block;
  margin:17px 14px 5px;
  color:#90d4b1;
  font-size:8px;
  font-weight:850;
  letter-spacing:.17em;
}
.feature-keyword{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  gap:.01em;
  margin:0 12px;
  color:#f1f8f4;
  font-size:39px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.1em;
  text-shadow:0 5px 18px rgba(0,33,20,.18);
}
.feature-keyword span{display:inline-block;transform-origin:50% 80%}
.feature-description{
  position:relative;
  z-index:1;
  display:block;
  margin:8px 13px 0;
  color:#cee3d8;
  font-size:12px;
  font-weight:620;
  line-height:1.62;
}
.hero-copy-line{transition:opacity .3s ease,filter .3s ease}
.floating-download{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,opacity .3s ease,filter .3s ease}
.line-hero:has(.feature-item.is-open) .hero-copy-line,
.line-hero:has(.feature-item.is-open) .floating-download{
  opacity:.2!important;
  filter:blur(6px)!important;
  pointer-events:none;
}
.line-hero:has(.feature-item.is-open) .feature-item:not(.is-open) .feature-trigger{
  opacity:.32;
  filter:saturate(.55);
}
@keyframes cardLightPass{
  0%,35%{opacity:0;transform:translateX(0) rotate(12deg)}
  48%{opacity:.72}
  66%,100%{opacity:0;transform:translateX(520%) rotate(12deg)}
}
@keyframes cardArtExpand{
  0%,100%{transform:scale(1.03) translate3d(0,0,0)}
  50%{transform:scale(1.1) translate3d(-1.5%,1%,0)}
}
@keyframes cardArtGlide{
  0%,100%{transform:scale(1.08) translate3d(0,-1.5%,0)}
  50%{transform:scale(1.08) translate3d(0,2%,0)}
}
@keyframes cardArtApproach{
  0%,100%{transform:scale(1.04) translate3d(1%,0,0)}
  50%{transform:scale(1.1) translate3d(-1%,0,0)}
}

@media(max-width:800px){
  .hero-feature-dock{width:calc(100% - 56px);bottom:32px}
  .feature-item,.feature-trigger{width:86px;height:86px}
  .feature-visual{border-radius:29px}
  .feature-popover{width:270px;min-height:342px}
  .feature-item:nth-child(1) .feature-popover,.feature-item:nth-child(2) .feature-popover,.feature-item:nth-child(3) .feature-popover{margin-left:-135px}
  .feature-card-art{height:190px}
  .feature-keyword{font-size:37px}
}
@media(min-width:801px) and (max-height:720px){
  .feature-popover{
    bottom:calc(100% + 46px);
    width:260px;
    min-height:306px;
    padding:10px 10px 18px;
  }
  .feature-item:nth-child(1) .feature-popover,.feature-item:nth-child(2) .feature-popover,.feature-item:nth-child(3) .feature-popover{margin-left:-130px}
  .feature-card-art{height:158px;border-radius:19px}
  .feature-index{margin-top:13px}
  .feature-keyword{font-size:35px}
  .feature-popover::before{bottom:-48px;width:196px;height:54px}
}
@media(max-width:620px){
  .line-hero{padding-bottom:118px}
  .hero-feature-dock{width:calc(100% - 36px);bottom:25px}
  .feature-item,.feature-trigger{width:70px;height:70px}
  .feature-visual{border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 12px 25px rgba(42,88,68,.18),0 0 0 5px rgba(237,248,242,.12)}
  .feature-popover{
    position:absolute;
    left:auto!important;
    right:auto!important;
    bottom:calc(100% + 55px);
    width:278px;
    min-height:338px;
    margin-left:0!important;
    padding:11px 11px 20px;
    transform-origin:50% 100%!important;
    pointer-events:auto;
  }
  .feature-item:nth-child(1) .feature-popover{left:-2px!important}
  .feature-item:nth-child(2) .feature-popover{left:50%!important;margin-left:-139px!important}
  .feature-item:nth-child(3) .feature-popover{right:-2px!important}
  .feature-card-art{height:184px}
  .feature-keyword{font-size:36px}
  .feature-description{font-size:12px}
}
@media(prefers-reduced-transparency:reduce){
  .feature-popover{background:#124b35;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-copy-line,.floating-download,.feature-trigger,.feature-visual,.feature-visual img{transition:none!important;will-change:auto}
  .feature-card-art::before,.feature-card-art img{animation:none!important;will-change:auto}
  .feature-popover{will-change:auto;transform:none!important}
}

/* Card interaction: the thumbnail grows into a full-bleed memory card. */
.hero-feature-dock{width:min(980px,calc(100% - 72px));gap:18px;align-items:end}
.feature-item{width:112px;height:112px;transition:width .55s cubic-bezier(.16,1,.3,1),height .55s cubic-bezier(.16,1,.3,1)}
.feature-item.is-open{width:292px;height:350px;z-index:30}
.feature-trigger{width:112px;height:112px;transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.feature-item.is-open .feature-trigger{opacity:0;pointer-events:none;transform:scale(.82)}
.feature-visual{border-radius:28px;transition:box-shadow .45s ease,filter .45s ease,opacity .45s ease}
.feature-item.is-open .feature-visual{opacity:0}
.feature-popover{inset:auto 0 0;width:100%;min-height:0;height:100%;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.5);border-radius:28px;background:#1b3d30;box-shadow:0 28px 60px rgba(20,63,43,.32),inset 0 1px 0 rgba(255,255,255,.35);transform-origin:50% 100%}
.feature-item.is-visible .feature-popover{pointer-events:auto}
.feature-popover::before{display:none}
.feature-popover::after{inset:0;height:auto;border:0;background:linear-gradient(180deg,rgba(6,27,18,.08) 8%,rgba(6,27,18,.12) 35%,rgba(6,27,18,.72) 100%);z-index:1}
.feature-card-art{position:absolute;inset:0;height:auto;border:0;border-radius:0;box-shadow:none}
.feature-card-art::after{background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 42%,rgba(7,35,25,.2))}
.feature-card-art::before{z-index:3}
.feature-card-art img{position:absolute;inset:0;width:100%;height:100%;min-width:100%;min-height:100%;object-fit:cover;object-position:center;transform:scale(1.08);transition:transform 1.3s cubic-bezier(.16,1,.3,1),filter .7s ease}
.feature-smooth .feature-card-art img{object-position:50% 50%}
.feature-item.is-visible .feature-card-art img{transform:scale(1.2)}
.feature-index,.feature-keyword,.feature-description{position:absolute;z-index:4;left:0;right:0;margin-left:24px;margin-right:24px;text-align:center}
.feature-index{top:24px;margin-top:0;color:rgba(255,255,255,.78);font-size:9px;letter-spacing:.2em}
.feature-keyword{top:50%;display:block;margin-top:-29px;color:transparent;font-family:flow-serif,"PingFang SC",sans-serif;font-size:52px;font-weight:900;line-height:1.1;letter-spacing:-.12em;text-shadow:0 5px 24px rgba(0,0,0,.24);-webkit-background-clip:text;background-clip:text}
.feature-creativity .feature-keyword{background-image:linear-gradient(135deg,#f4ffab 8%,#a8f26c 48%,#42d7c0 100%);filter:drop-shadow(0 0 15px rgba(163,255,111,.22))}
.feature-smooth .feature-keyword{background-image:linear-gradient(135deg,#d5fbff 8%,#75dcff 48%,#a29bff 100%);filter:drop-shadow(0 0 15px rgba(91,208,255,.24))}
.feature-intimacy .feature-keyword{background-image:linear-gradient(135deg,#ffe0ef 8%,#ff9cc8 48%,#b88cff 100%);filter:drop-shadow(0 0 15px rgba(255,128,193,.22))}
.feature-keyword span{color:transparent;background-image:inherit;-webkit-background-clip:text;background-clip:text}
.feature-keyword span:nth-child(2){position:relative;top:-5px}
.feature-keyword span:nth-child(3){position:relative;top:3px}
.feature-description{top:calc(50% + 38px);margin-top:0;color:rgba(255,255,255,.94);font-size:15px;line-height:1.7;font-weight:650;letter-spacing:.01em;text-shadow:0 2px 14px rgba(0,0,0,.42)}
.feature-software-logos{position:absolute;z-index:4;left:0;right:0;bottom:22px;display:flex;align-items:center;justify-content:center;gap:9px}
.software-logo{display:grid;place-items:center;width:34px;height:30px;overflow:hidden;border:1px solid rgba(255,255,255,.36);border-radius:9px;background:rgba(10,24,19,.56);box-shadow:0 6px 14px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.software-logo i{font-style:normal;font-size:9px;font-weight:850;letter-spacing:-.04em}
.software-jianying{color:#fff}.software-jianying i{font-size:14px;transform:skewX(-8deg)}
.software-fcp{background:linear-gradient(135deg,rgba(255,70,86,.85),rgba(255,205,72,.82) 38%,rgba(58,203,150,.84) 66%,rgba(61,119,255,.88));color:#fff}
.software-resolve{border-color:rgba(143,234,255,.58);background:conic-gradient(from 210deg,rgba(255,82,93,.88),rgba(255,211,65,.86),rgba(53,193,255,.9),rgba(255,82,93,.88));color:#fff}
.software-pr{border-color:rgba(188,143,255,.7);background:#25134d;color:#d8b8ff}.software-pr i{font-size:13px}
.feature-popover::after{background:linear-gradient(180deg,rgba(6,27,18,.02) 5%,rgba(6,27,18,.16) 34%,rgba(6,27,18,.82) 100%),linear-gradient(115deg,rgba(93,240,189,.08),transparent 42%,rgba(28,123,255,.12))}
.feature-item.is-visible .feature-card-art img{animation:featureCardDrift 8s ease-in-out infinite alternate}
.feature-creativity.is-visible .feature-card-art img{animation:featureCardDrift 8.5s ease-in-out infinite alternate,featureCardColor 7s ease-in-out infinite alternate}
.feature-smooth.is-visible .feature-card-art img{animation:featureCardDrift 7.2s ease-in-out infinite alternate,featureCardColor 8s ease-in-out infinite alternate-reverse}
.feature-intimacy.is-visible .feature-card-art img{animation:featureCardDrift 9s ease-in-out infinite alternate,featureCardColor 7.8s ease-in-out infinite alternate}
.feature-item.is-open .feature-card-art::before{animation:cardLightPass 3.8s .35s ease-in-out infinite}
.feature-item:not(.is-open) .feature-popover{visibility:hidden}
.line-hero:has(.feature-item.is-open) .feature-item:not(.is-open){opacity:.42}
@keyframes featureCardDrift{0%{transform:scale(1.08) translate3d(-1.5%,-1%,0)}50%{transform:scale(1.14) translate3d(1%,1.5%,0)}100%{transform:scale(1.2) translate3d(-.5%,2.5%,0)}}
@keyframes featureCardColor{0%{filter:saturate(.86) brightness(.92) contrast(1)}50%{filter:saturate(1.18) brightness(1.04) contrast(1.06)}100%{filter:saturate(1.02) brightness(.96) contrast(1.12)}}
@media(max-width:800px){.hero-feature-dock{width:calc(100% - 40px);gap:10px}.feature-item{width:86px;height:86px}.feature-item.is-open{width:258px;height:320px}.feature-trigger{width:86px;height:86px}.feature-index{top:20px}.feature-keyword{font-size:45px}}
@media(max-width:620px){.hero-feature-dock{width:calc(100% - 28px);gap:7px}.feature-item{width:70px;height:70px}.feature-item.is-open{width:calc(100vw - 56px);height:300px}.feature-trigger{width:70px;height:70px}.feature-index{top:18px;font-size:8px}.feature-keyword{font-size:42px}.feature-description{top:calc(50% + 31px);font-size:13px}}

/* Let the opening animation live on the first-screen canvas. */
.site-intro{background:rgba(160,195,178,.12);-webkit-backdrop-filter:blur(5px) saturate(105%);backdrop-filter:blur(5px) saturate(105%)}

/* Looser, poster-wall rhythm for the maker gallery. */
.gallery-track{align-items:center;gap:clamp(8px,1.4vw,20px);margin-top:90px;padding:58px 0 72px;transform:translateX(-1%)}
.gallery-card{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.gallery-card:hover{z-index:5}
.card-a{width:300px;transform:translateY(58px) rotate(-7deg)}
.card-a .gallery-image{height:405px}
.card-b{z-index:2;width:365px;transform:translateY(-42px) rotate(4.5deg)}
.card-b .gallery-image{height:485px}
.card-c{width:315px;transform:translateY(38px) rotate(-6deg)}
.card-c .gallery-image{height:425px}
.card-c img{transform:scale(1.34);object-position:center 52%}
.card-c:hover img{transform:scale(1.4)}
.gallery-card:hover{transform:translateY(-12px) rotate(0deg)}
.card-a:hover{transform:translateY(42px) rotate(-3deg)}
.card-b:hover{transform:translateY(-55px) rotate(1.5deg)}
.card-c:hover{transform:translateY(22px) rotate(-2deg)}
@media(max-width:800px){.gallery-track{gap:12px;padding-block:38px 52px}.card-a{width:215px;transform:translateY(38px) rotate(-6deg)}.card-a .gallery-image{height:300px}.card-b{width:265px;transform:translateY(-24px) rotate(4deg)}.card-b .gallery-image{height:350px}.card-c{width:225px;transform:translateY(28px) rotate(-5deg)}.card-c .gallery-image{height:310px}}

/* Responsive contract: short laptops, tablets and phones. */
.hero-collage{height:clamp(360px,min(52vw,calc(100dvh - 210px)),680px)}
@media(min-width:801px) and (max-height:780px){
  .line-hero{padding-top:94px;padding-bottom:58px}
  .hero-collage{height:clamp(350px,calc(100dvh - 164px),540px)}
  .hero-copy-line h1{font-size:clamp(58px,7vw,88px)}
  .line-intro{margin-top:22px;margin-bottom:18px;font-size:16px;line-height:1.72}
  .hero-feature-dock{bottom:24px}
}
@media(min-width:801px) and (max-width:1100px){
  .line-hero{grid-template-columns:45% 55%;padding-left:48px;padding-right:48px}
  .hero-copy-line h1{font-size:clamp(58px,7.2vw,78px)}
  .floating-download{left:45%;min-width:205px;padding:18px 20px}
  .hero-feature-dock{width:calc(100% - 72px)}
  .gallery-track{gap:12px}
  .card-a{width:270px}.card-a .gallery-image{height:370px}
  .card-b{width:325px}.card-b .gallery-image{height:435px}
  .card-c{width:285px}.card-c .gallery-image{height:390px}
}
@media(max-width:800px){
  .line-hero{padding-top:96px;padding-bottom:104px}
  .hero-copy-line h1{font-size:clamp(52px,11.2vw,78px)}
  .line-intro{margin-top:24px;margin-bottom:20px;font-size:17px;line-height:1.75}
  .hero-collage{height:clamp(340px,52vw,400px);margin-top:24px}
  .floating-download{top:42%;left:42%;min-width:190px;padding:16px 18px}
  .line-statement{min-height:0;padding-top:110px;padding-bottom:120px}
  .line-gallery{padding-top:90px;padding-bottom:100px}
}
@media(max-width:620px){
  .line-nav{top:8px;height:62px}
  .line-logo .logo-mark{width:34px;height:34px}
  .line-hero{padding:86px 20px 102px}
  .hero-copy-line h1{font-size:clamp(44px,12.5vw,58px)}
  .line-intro{font-size:15px;line-height:1.68;letter-spacing:.025em}
  .hero-collage{height:clamp(285px,78vw,340px);margin-top:18px}
  .floating-download{top:38%;left:36%;min-width:164px;padding:14px 16px}
  .hero-feature-dock{display:flex;justify-content:space-between;align-items:flex-end}
  .feature-item.is-open{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(310px,44dvh)}
  .line-statement{padding:92px 20px 100px}
  .statement-note{margin-left:0;font-size:15px;text-align:left}
  .line-gallery{padding:80px 20px 90px}
  .gallery-track{display:flex;flex-direction:column;width:100%;margin:48px 0 0;padding:24px 0 20px;align-items:flex-start;gap:34px;transform:none}
  .gallery-card,.card-a,.card-b,.card-c{width:min(78vw,310px)}
  .card-a{align-self:flex-start;transform:translateX(-3%) rotate(-5deg)}
  .card-b{align-self:flex-end;transform:translateX(4%) rotate(4deg)}
  .card-c{align-self:flex-start;transform:translateX(2%) rotate(-4deg)}
  .card-a .gallery-image,.card-b .gallery-image,.card-c .gallery-image{height:min(106vw,410px)}
  .gallery-card:hover,.card-a:hover,.card-b:hover,.card-c:hover{transform:translateX(0) rotate(0)}
  .line-cta{min-height:0;padding:90px 20px 100px}
  .line-cta h2{font-size:clamp(58px,16vw,82px)}
  .line-footer{align-items:flex-start;flex-direction:column}
  .line-footer div{flex-wrap:wrap;row-gap:10px}
}
@media(min-width:1600px){
  .line-hero{padding-left:max(8vw,calc((100% - 1440px)/2));padding-right:max(8vw,calc((100% - 1440px)/2))}
  .hero-copy-line h1{font-size:min(6.8vw,112px)}
  .hero-feature-dock{width:min(1080px,calc(100% - 160px))}
}