@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root{--ink:#100613;--plum:#250621;--pink:#ff3dbd;--lilac:#d99bff;--cream:#fff4fb;--gold:#ffd2a0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:#fff;font-family:"DM Sans",Arial,sans-serif}
.hero{min-height:760px;position:relative;overflow:hidden;background:radial-gradient(circle at 82% 16%,#55164e 0,transparent 24%),radial-gradient(circle at 10% 100%,#35112e 0,transparent 32%),linear-gradient(120deg,#100613 0%,#1b071b 56%,#100613 100%)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(103deg,rgba(13,3,13,.92) 0%,rgba(18,4,17,.82) 43%,rgba(18,5,18,.1) 76%);pointer-events:none;z-index:1}.nav,.hero-grid{width:min(1180px,calc(100% - 64px));margin:auto;position:relative;z-index:2}.nav{height:92px;border-bottom:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-family:"Playfair Display",serif;font-size:21px;letter-spacing:3px;margin-right:auto}.brand img{width:43px;height:43px;object-fit:cover;object-position:50% 12%;border-radius:13px;box-shadow:0 0 22px rgba(255,61,189,.65)}.nav-link{color:#ead9eb;text-decoration:none;font-size:13px;letter-spacing:.08em}.hero-grid{min-height:668px;display:grid;grid-template-columns:52% 48%;align-items:center}.hero-copy{padding:70px 0 100px}.eyebrow,.section-kicker{font-size:11px;font-weight:600;letter-spacing:.24em;color:#f7a6dd;margin:0 0 23px}.hero h1{font-family:"Playfair Display","Noto Serif SC",serif;font-size:clamp(58px,6vw,88px);letter-spacing:-.06em;line-height:1.05;margin:0 0 28px}.hero h1 em{font-style:italic;background:linear-gradient(90deg,#ff8bdc,#ffd0a5);background-clip:text;-webkit-background-clip:text;color:transparent}.intro{max-width:390px;color:#e6cfe1;font-size:16px;line-height:1.85;margin:0 0 34px}.cta{display:inline-flex;align-items:center;gap:34px;padding:16px 21px 16px 24px;background:linear-gradient(100deg,#e71f96,#fb6fc5);box-shadow:0 12px 30px rgba(229,32,151,.27);color:#fff;text-decoration:none;font-size:14px;font-weight:600;transition:transform .2s}.cta:hover{transform:translateY(-3px)}.cta span{font-size:23px;line-height:.7}.subnote{margin:22px 0 0;font-size:10px;letter-spacing:.24em;color:#b589b2}.visual{position:relative;height:100%;min-height:610px;align-self:stretch}.visual-glow{position:absolute;width:74%;height:70%;right:0;top:13%;border-radius:50%;background:#eb249c;filter:blur(95px);opacity:.2}.visual img{position:absolute;right:-2%;bottom:0;width:115%;height:94%;object-fit:cover;object-position:center;mix-blend-mode:screen;filter:saturate(1.06) contrast(1.04);mask-image:linear-gradient(to right,transparent 0%,black 25%),linear-gradient(to top,black 82%,transparent);mask-composite:intersect}
.story{position:relative;isolation:isolate;padding:120px max(32px,calc((100vw - 940px)/2));background:linear-gradient(135deg,#fef4fa,#f9e4f1);color:#270b22;text-align:center;overflow:hidden}.story::before{content:"S";position:absolute;z-index:-1;top:-110px;left:50%;transform:translateX(-50%);font-family:"Playfair Display",serif;font-size:470px;line-height:1;color:#fff;opacity:.42}.section-kicker{color:#bb287d;margin-bottom:19px}.story h2{font-family:"Playfair Display","Noto Serif SC",serif;font-size:clamp(36px,4vw,55px);line-height:1.18;letter-spacing:-.05em;margin:0}.story-line{height:2px;width:48px;margin:29px auto;background:linear-gradient(90deg,#e42b9b,#9d41c9)}.story>p:last-child{max-width:530px;margin:0 auto;color:#765568;line-height:1.9;font-size:15px}footer{padding:32px;text-align:center;background:#120513;display:flex;flex-direction:column;gap:6px}footer span{font-family:"Playfair Display",serif;font-size:18px;letter-spacing:4px}footer small{font-size:9px;color:#b980ac;letter-spacing:.25em}
@media(max-width:700px){.hero{min-height:760px}.nav,.hero-grid{width:min(100% - 40px,520px)}.nav{height:78px}.nav-link{display:none}.hero-grid{min-height:680px;display:block}.hero-copy{position:relative;z-index:3;padding:68px 0 0}.hero h1{font-size:54px}.intro{font-size:15px;max-width:290px}.visual{position:absolute;inset:110px -20px 0 12%;min-height:0;z-index:1}.visual img{width:130%;height:88%;right:-29%;bottom:0;opacity:.72;mask-image:linear-gradient(to right,transparent 0%,black 39%),linear-gradient(to top,black 65%,transparent)}.visual-glow{right:-20%;top:26%;width:100%;height:50%;opacity:.27}.subnote{margin-top:20px}.story{padding:88px 28px}.story::before{font-size:350px;top:-70px}}

/* Keep the new editorial portrait's color and detail intact. */
.visual img{mix-blend-mode:normal}

/* Make the Sylo mark immediately recognizable. */
.nav{height:112px}
.brand{gap:16px;font-size:33px;font-weight:700;letter-spacing:5px;text-shadow:0 0 18px rgba(255,203,235,.55)}
.brand img{width:68px;height:68px;border-radius:20px;box-shadow:0 0 13px rgba(255,61,189,.95),0 0 32px rgba(255,61,189,.48)}
@media(max-width:700px){.nav{height:96px}.brand{font-size:27px;letter-spacing:4px}.brand img{width:58px;height:58px}}

/* Stronger top brand block with the supplied Traditional Chinese message. */
.nav{height:206px;align-items:flex-start;padding-top:24px}
.brand-stack{margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.brand{font-size:42px;letter-spacing:6px;gap:20px}
.brand img{width:94px;height:94px;border-radius:26px;box-shadow:0 0 16px rgba(255,61,189,1),0 0 44px rgba(255,61,189,.58)}
.brand-quote{max-width:760px;margin:0;color:#ffe7f7;font-family:"DM Sans","Noto Sans TC",sans-serif;font-size:18px;font-weight:600;line-height:1.7;letter-spacing:.04em;text-shadow:0 0 16px rgba(255,71,184,.44)}
@media(max-width:700px){.nav{height:208px;padding-top:18px}.brand{font-size:34px;letter-spacing:5px;gap:15px}.brand img{width:78px;height:78px;border-radius:22px}.brand-quote{max-width:100%;font-size:14px;line-height:1.7;letter-spacing:.02em}.nav-link{display:none}}

/* Focus the landing page on the visual and the direct-download action. */
.story{display:none}
.hero{min-height:100vh}.hero-grid{min-height:calc(100vh - 206px)}.hero-copy{padding:0 0 70px;align-self:end;position:relative;z-index:3}.hero-copy h1{display:block;margin:0 0 21px}.hero-copy .intro{display:block;margin:0 0 24px}.hero-copy .eyebrow{display:inline-flex;align-items:center;margin:0 0 13px;padding:9px 14px;border:1px solid rgba(255,158,218,.52);border-radius:999px;background:rgba(255,51,172,.13);color:#ffb8e4;font-size:15px;font-weight:700;letter-spacing:.08em;box-shadow:0 0 24px rgba(238,45,159,.16)}
.cta{max-width:440px;justify-content:space-between;padding:20px 24px 20px 27px;font-size:16px;line-height:1.35;border-radius:14px;background:linear-gradient(105deg,#d81485,#ff55b4);box-shadow:0 14px 36px rgba(239,31,153,.38)}.cta span{font-size:28px}
footer{width:100%;min-height:138px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#130513,#080208)}.footer-logo{width:66px;height:66px;object-fit:cover;object-position:50% 12%;border-radius:19px;box-shadow:0 0 13px rgba(255,61,189,.92),0 0 34px rgba(255,61,189,.42)}footer small{color:#eaa5d2;font-size:10px;letter-spacing:.18em}
@media(max-width:700px){.hero{min-height:760px}.hero-grid{min-height:552px}.hero-copy{padding-bottom:54px}.hero-copy .eyebrow{font-size:13px;padding:8px 12px}.cta{width:100%;max-width:330px;font-size:14px;padding:17px 18px 17px 20px}.cta span{font-size:24px}}

/* Center the complete conversion message and keep it fully readable on phones. */
.hero-grid{grid-template-columns:1fr}
.visual{position:absolute;inset:0;min-height:0;opacity:.62;pointer-events:none}
.visual img{right:0;width:58%;height:100%;mask-image:linear-gradient(to right,transparent 0%,black 42%),linear-gradient(to top,black 88%,transparent)}
.hero-copy{width:min(100%,780px);margin:auto;padding:58px 28px 72px;align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy h1{font-size:clamp(50px,7vw,82px);line-height:1.15}.hero-copy .intro{max-width:560px;font-size:16px}.hero-copy .eyebrow{margin-top:4px}.cta{width:min(100%,440px);text-align:left}
@media(min-width:701px){.hero-copy{margin-left:0;margin-right:auto;transform:translateX(-6%);align-items:flex-start;text-align:left}.hero-copy .intro{max-width:490px}}
@media(max-width:700px){html,body{overflow-x:hidden}.hero{min-height:100svh}.hero-grid{min-height:calc(100svh - 208px);width:100%;padding:0 18px}.visual{inset:0;opacity:.34}.visual img{width:100%;height:100%;right:0;object-position:72% center;mask-image:linear-gradient(to top,black 78%,transparent)}.hero-copy{width:100%;padding:28px 6px 32px;align-self:center}.hero-copy h1{font-size:clamp(40px,12vw,58px);line-height:1.18;letter-spacing:-.05em;margin-bottom:18px}.hero-copy .intro{max-width:330px;margin-bottom:22px;font-size:14px;line-height:1.7}.hero-copy .eyebrow{margin-bottom:12px;font-size:13px}.cta{width:min(100%,340px);max-width:340px;font-size:14px;text-align:left}.brand-quote{display:none}}