/* YIFENG / Connected industries. All ornamental layers are progressive enhancements. */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:100px;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 100% 0,var(--accent-soft),transparent 55%)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:wait}
::selection{background:var(--accent);color:var(--accent-ink)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
section{position:relative;padding:var(--section-gap) 0}
section+section{border-top:1px solid var(--hairline)}
section .wrap{position:relative;z-index:1}
h1,h2,h3,h4{font-weight:600;text-wrap:balance}
p{overflow-wrap:anywhere}
.link{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--hairline-strong)}
.link:hover{color:var(--accent);text-decoration-color:currentColor}

/* A single, quiet navigation rail. */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--hairline);background:color-mix(in srgb,var(--bg) 83%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:background .25s}
.nav .wrap{display:flex;align-items:center;gap:28px;min-height:82px}
.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;font-size:1.02rem;font-weight:650;letter-spacing:.04em}
.brand::before{content:"";display:block;width:28px;height:28px;background:linear-gradient(135deg,var(--accent) 0 47%,transparent 47% 53%,var(--accent-secondary) 53%);clip-path:polygon(0 0,100% 0,75% 50%,100% 100%,0 100%,25% 50%);margin-right:2px}
.brand .en{display:inline-block;font:.57rem var(--mono);color:var(--fg-muted);letter-spacing:.14em;padding-left:13px;border-left:1px solid var(--hairline-strong)}
.nav a.link{font-size:.79rem;color:var(--fg-soft);text-decoration:none;white-space:nowrap;position:relative;line-height:2}
.nav a.link::after{content:"";position:absolute;bottom:-4px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav a.link:hover::after,.nav a.link[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav a.link:hover,.nav a.link.accent{color:var(--accent)}
.lang-switch{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:45px;min-height:34px;padding:4px 10px;border:1px solid var(--hairline-strong);border-radius:4px;font:.65rem var(--mono);letter-spacing:.05em;white-space:nowrap}
.lang-switch:hover{color:var(--accent);border-color:var(--accent)}
.brand-mark{width:34px;height:34px;flex:none;stroke:var(--accent)}
.brand:has(.brand-mark)::before{display:none}

/* The first scene: strong typography in front of a connected orbital field. */
.hero{isolation:isolate;position:relative;min-height:760px;min-height:min(900px,calc(100svh - 80px));display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--hairline);background:radial-gradient(ellipse at 85% 35%,var(--accent-soft),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 94%,transparent) 30%,transparent 72%),linear-gradient(0deg,var(--bg),transparent 25%);opacity:.9}
.hero>.wrap{position:relative;z-index:3;width:100%;padding-top:90px;padding-bottom:110px;pointer-events:none}
.hero>.wrap :is(a,button){pointer-events:auto}
.hero .kicker{display:inline-flex;align-items:center;gap:12px;margin-bottom:30px}
.kicker{font:.65rem/1.65 var(--mono);letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.hero .kicker::before{content:"";width:7px;height:7px;background:var(--accent);box-shadow:0 0 18px var(--accent-glow)}
h1.display{font-size:clamp(3.3rem,6.6vw,6.65rem);line-height:1.16;letter-spacing:-.055em;font-weight:600;max-width:820px;position:relative}
h1.display .grad{background:linear-gradient(100deg,var(--fg),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:480px;margin-top:30px;line-height:1.9;color:var(--fg-soft);font-size:1rem;letter-spacing:.02em}
.hero .flip{display:inline-block;min-width:4em;color:var(--accent);font-weight:500}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 22px;font:.8rem/1.4 var(--sans);border:1px solid var(--hairline-strong);border-radius:5px;background:transparent;color:var(--fg);transition:color .2s,background .2s,border-color .2s,transform .3s var(--ease)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:0 8px 26px color-mix(in srgb,var(--accent-glow) 50%,transparent)}
.btn.primary::after{content:"↗";font-size:1.1rem;line-height:1;margin-left:10px}
.btn.primary:hover{background:var(--fg);border-color:var(--fg);transform:translateY(-2px)}
.btn.ghost:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.hero-meta{max-width:620px;display:flex;gap:18px;align-items:center;margin-top:58px;padding-top:18px;border-top:1px solid var(--hairline);font:.58rem/1.8 var(--mono);letter-spacing:.12em;color:var(--fg-muted)}
.aurora{position:absolute;inset:-10%;z-index:0;opacity:.55;pointer-events:none;background:radial-gradient(ellipse at 80% 35%,var(--accent-glow),transparent 36%),radial-gradient(ellipse at 65% 90%,color-mix(in srgb,var(--accent-secondary) 12%,transparent),transparent 50%);filter:blur(26px);animation:yf-field-breathe 20s ease-in-out infinite alternate}
.hero-art{position:absolute;z-index:1;width:min(740px,58vw);aspect-ratio:1;right:-5%;top:50%;transform:translateY(-50%);translate:var(--pointer-x,0px) var(--pointer-y,0px);transition:translate 1s var(--ease);pointer-events:none;--field-turn:0deg;--field-drift:0px;opacity:.94}
.hero-art::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 65%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:38px 38px;transform:perspective(650px) rotateX(18deg) rotateZ(-18deg);mask-image:radial-gradient(ellipse,#000 10%,transparent 68%);-webkit-mask-image:radial-gradient(ellipse,#000 10%,transparent 68%);opacity:.44}
.orbit-core{position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle at 37% 32%,color-mix(in srgb,var(--fg) 70%,var(--accent)),var(--accent) 7%,color-mix(in srgb,var(--accent-secondary) 38%,var(--bg)) 30%,var(--bg) 68%);box-shadow:inset -24px -24px 50px var(--bg),0 0 65px var(--accent-glow),0 0 130px var(--accent-soft);transform:translateY(var(--field-drift));animation:yf-core-float 12s ease-in-out infinite}
.orbit-core::before{content:"";position:absolute;inset:8%;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:50%;background:repeating-linear-gradient(transparent 0 12px,color-mix(in srgb,var(--bg) 20%,transparent) 12px 13px);opacity:.5}
.orbit-core::after{content:"";position:absolute;inset:24%;border-radius:50%;background:var(--accent);filter:blur(26px);opacity:.16}
.orbit-ring{position:absolute;inset:15%;border:1px solid color-mix(in srgb,var(--accent) 44%,transparent);border-radius:50%;transform:rotateZ(-24deg) rotateX(62deg);box-shadow:0 0 14px var(--accent-soft),inset 0 0 12px var(--accent-soft);animation:yf-orbit-one 28s linear infinite}
.orbit-ring:nth-of-type(4){inset:9%;border-color:var(--hairline-strong);transform:rotateZ(54deg) rotateX(58deg);animation-name:yf-orbit-two;animation-duration:36s;animation-direction:reverse}
.orbit-ring:nth-of-type(5){inset:4%;border-style:dashed;border-color:var(--hairline);transform:rotateZ(112deg) rotateX(58deg);animation-name:yf-orbit-three;animation-duration:45s}
.orbit-ring.r1{inset:15%;border-style:solid;border-color:color-mix(in srgb,var(--accent) 44%,transparent);animation-name:yf-orbit-one;animation-duration:28s;animation-direction:normal}
.orbit-ring.r2{inset:9%;border-style:solid;border-color:var(--hairline-strong);animation-name:yf-orbit-two;animation-duration:36s;animation-direction:reverse}
.orbit-ring.r3{inset:4%;border-style:dashed;border-color:var(--hairline);animation-name:yf-orbit-three;animation-duration:45s;animation-direction:normal}
.orbit-ring::before{content:"";position:absolute;top:11%;left:13%;height:6px;width:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}
.hero-signal{position:absolute;padding:8px 12px;border:1px solid var(--hairline-strong);border-left:2px solid var(--accent);background:color-mix(in srgb,var(--bg) 85%,transparent);font:.54rem/1.8 var(--mono);color:var(--fg-muted);letter-spacing:.1em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-signal b{display:block;font-weight:400;color:var(--accent);letter-spacing:.08em}
.hero-signal:nth-last-child(3){top:20%;left:8%}
.hero-signal:nth-last-child(2){right:3%;top:43%}
.hero-signal:last-child{left:17%;bottom:12%}
.motion-control{position:absolute;right:var(--gutter);bottom:22px;z-index:5;background:transparent;border:0;color:var(--fg-muted);font:.57rem var(--mono);letter-spacing:.06em;padding:10px}
.motion-control::before{content:"Ⅱ";color:var(--accent);margin-right:9px}
.motion-control[aria-pressed="true"]::before{content:"▶"}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important}
html.motion-paused [data-reveal],html.motion-paused [data-split] span{animation:none!important;opacity:1!important;transform:none!important}
@keyframes yf-field-breathe{to{opacity:.85;transform:translate3d(-2%,3%,0) scale(1.04)}}
@keyframes yf-core-float{50%{transform:translateY(-10px) rotate(6deg)}}
@keyframes yf-orbit-one{from{transform:rotateZ(-24deg) rotateX(62deg) rotate(0)}to{transform:rotateZ(-24deg) rotateX(62deg) rotate(360deg)}}
@keyframes yf-orbit-two{from{transform:rotateZ(54deg) rotateX(58deg) rotate(0)}to{transform:rotateZ(54deg) rotateX(58deg) rotate(360deg)}}
@keyframes yf-orbit-three{from{transform:rotateZ(112deg) rotateX(58deg) rotate(0)}to{transform:rotateZ(112deg) rotateX(58deg) rotate(360deg)}}

/* Data stays legible, with restrained motion around it. */
.marquee{position:relative;border-bottom:1px solid var(--hairline);overflow:hidden;padding:18px 0;background:var(--bg)}
.marquee .track{display:flex;gap:56px;width:max-content;white-space:nowrap;animation:yf-marquee 42s linear infinite;font:.65rem/1.7 var(--mono);color:var(--fg-muted)}
.marquee .track span{position:relative;padding-right:38px}
.marquee .track span::after{content:"+";position:absolute;right:0;color:var(--accent)}
.marquee b{font-weight:500;color:var(--fg);margin-left:10px}
.marquee:hover .track{animation-play-state:paused}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-bottom:18px}
.sec-head h2{font-size:clamp(2rem,3.8vw,3.8rem);font-weight:500;letter-spacing:-.045em;line-height:1.25;max-width:920px}
.sec-head .more{font:.65rem var(--mono);color:var(--fg-muted);white-space:nowrap}
.yf-section-label{margin-bottom:38px}
.grid{display:grid;gap:18px}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{position:relative;isolation:isolate;display:block;min-width:0;background:linear-gradient(135deg,color-mix(in srgb,var(--bg-raised) 88%,transparent),var(--bg-raised));border:1px solid var(--hairline);border-radius:8px;padding:30px;overflow:hidden;transition:background .3s,border-color .3s,transform .45s var(--ease)}
.grid>.card{min-height:215px}
.card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(130deg,var(--accent-soft),transparent 58%);opacity:0;transition:opacity .4s}
a.card::before{content:"↗";position:absolute;right:25px;top:23px;color:var(--fg-muted);font-size:1.3rem;transition:color .2s,transform .3s}
.card:hover{border-color:color-mix(in srgb,var(--accent) 48%,var(--hairline));transform:translateY(-5px)}
.card:hover::after{opacity:1}
a.card:hover::before{color:var(--accent);transform:translate(2px,-2px)}
.card .spot{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 70%)}
.card:hover .spot{opacity:1}
.card .code{display:inline-block;position:relative;max-width:calc(100% - 25px);font:.61rem/1.6 var(--mono);letter-spacing:.12em;color:var(--accent);padding-bottom:18px}
.card .code::after{content:"";position:absolute;bottom:0;left:0;width:22px;height:1px;background:var(--accent);opacity:.5}
.card h3{font-size:1.3rem;line-height:1.5;letter-spacing:-.025em;font-weight:550;margin:22px 0 12px}
.card h4{font-size:1.05rem;color:var(--fg);margin:28px 0 12px}
.card p{color:var(--fg-muted);font-size:.88rem;line-height:1.95;max-width:860px}
.card p+p{margin-top:15px}
.card p a{color:var(--accent)}
.card .stat{font:.62rem/1.8 var(--mono);padding-top:19px;margin-top:28px;border-top:1px solid var(--hairline);color:var(--fg-muted)}
.card .stat b{color:var(--fg-soft);font-weight:400}
.card .btn{margin-top:22px}
.card>img{border-radius:50%;background:var(--accent-soft);border:1px solid var(--hairline);padding:5px}
.num{font:500 clamp(1.8rem,4vw,3.4rem)/1.2 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.num[data-counter]{font-variant-numeric:tabular-nums}

/* Editorial lists keep long titles and technical articles readable. */
.timeline{border-top:1px solid var(--hairline);padding:0}
.tl-item{position:relative;display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px 28px;border-bottom:1px solid var(--hairline);padding:29px 10px 29px 0;transition:padding .3s var(--ease),background .3s}
.tl-item::after{content:"↗";position:absolute;right:4px;top:31px;color:var(--fg-muted);font:1.2rem var(--mono)}
.tl-item:hover{padding-left:12px;background:var(--accent-soft)}
.tl-item time{font:.61rem/1.8 var(--mono);letter-spacing:.08em;color:var(--fg-muted);padding-top:7px}
.tl-item h4{font-size:clamp(1rem,1.7vw,1.3rem);line-height:1.6;letter-spacing:-.02em;padding-right:26px;font-weight:500}
.tl-item p{grid-column:2;font-size:.69rem!important;color:var(--fg-muted)}
.tl-item a:hover{color:var(--accent)}
.term{position:relative;background:color-mix(in srgb,var(--bg) 85%,#000);border:1px solid var(--hairline);border-left:2px solid var(--accent);border-radius:7px;padding:24px;font:.73rem/1.95 var(--mono);overflow:auto;color:var(--fg-soft)}
.term .tbar{display:flex;gap:6px;align-items:center;margin-bottom:19px;padding-bottom:16px;border-bottom:1px solid var(--hairline);color:var(--fg-muted);font-size:.62rem}
.term .dot{display:inline-block;width:6px;height:6px;background:var(--hairline-strong);border-radius:50%}
.term .dot:first-child{background:var(--accent);opacity:.65}
table.data{width:100%;border-collapse:collapse;font:.79rem/1.8 var(--sans)}
table.data th,table.data td{border-bottom:1px solid var(--hairline);text-align:left;padding:16px 14px}
table.data th{font:.59rem/1.8 var(--mono);letter-spacing:.08em;color:var(--fg-muted);font-weight:400;background:var(--accent-soft)}
table.data td{color:var(--fg-soft)}
table.data td b{color:var(--accent);font-weight:500}
table.data tr:hover td{background:var(--accent-soft)}

/* Persistent matrix navigation without covering the reading column. */
.dock{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:3px;padding:6px;border:1px solid var(--hairline-strong);border-radius:7px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 12px 40px #0003}
.dock a{position:relative;padding:9px 15px;border-radius:4px;font:.58rem/1.5 var(--mono);letter-spacing:.04em;color:var(--fg-muted);transition:color .2s,background .2s}
.dock a:hover,.dock a.on{color:var(--accent);background:var(--accent-soft)}
.dock a.on::after{content:"";position:absolute;left:50%;bottom:3px;width:3px;height:3px;border-radius:50%;background:var(--accent)}

/* Detailed pages and workspaces use the same tokens with a calmer rhythm. */
.auth{position:relative;max-width:420px;margin:9vh auto;padding:38px;background:var(--bg-raised);border:1px solid var(--hairline-strong);border-radius:10px;box-shadow:0 28px 85px #0002}
.auth::before{content:"";position:absolute;inset:0 20px auto;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.auth h2{font-size:1.5rem;letter-spacing:-.03em;margin-bottom:10px}
.auth .hint{font:.65rem/1.9 var(--mono);color:var(--fg-muted);margin-bottom:28px}
.auth label{display:block;font-size:.75rem;color:var(--fg-soft);margin-bottom:14px}
.auth input{display:block;width:100%;margin-top:8px;min-height:48px;padding:11px 14px;border-radius:5px;border:1px solid var(--hairline-strong);background:var(--bg);color:var(--fg);font:.9rem var(--sans)}
.auth input:focus{border-color:var(--accent)}
.auth .btn{width:100%;margin-top:12px}
.workspace{padding:48px 0 75px}
.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.workspace-head h1{font-size:clamp(1.8rem,3vw,2.7rem);letter-spacing:-.04em}
.workspace-head .kicker{margin-bottom:10px}
.workspace .sub{margin-top:12px;color:var(--fg-muted);font-size:.9rem}
.workspace-nav{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin:29px 0;padding:16px 0;border-block:1px solid var(--hairline)}
.workspace-nav a{font-size:.8rem;color:var(--fg-muted)}
.workspace-nav a:hover{color:var(--accent)}
.workspace .grid>.card{min-height:140px}
.workspace .card h2{font:500 clamp(1.6rem,3vw,2.8rem)/1.4 var(--mono);letter-spacing:-.05em;margin-top:15px}
.workspace .card p{font-size:.75rem}
.workspace-title{margin:40px 0 19px;font-size:1.2rem;letter-spacing:-.02em}
.table-scroll{overflow-x:auto;border:1px solid var(--hairline);border-radius:6px}
.notice{color:var(--fg-muted);font-size:.8rem;margin:18px 0;line-height:1.9}
.inline-form{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:23px 0}
.inline-form label{flex:1;min-width:220px;font-size:.78rem;color:var(--fg-muted)}
.inline-form input{display:block;width:100%;margin-top:8px;padding:12px 14px;min-height:47px;border:1px solid var(--hairline-strong);border-radius:5px;background:var(--bg-raised);color:var(--fg);font:.88rem var(--sans)}
form [data-feedback]{font-size:.78rem;margin-top:16px;line-height:1.9;min-height:1.8em;color:var(--accent)}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:10px;box-shadow:0 0 14px var(--accent-glow)}
[data-tickets] p{padding:13px 0;border-bottom:1px solid var(--hairline);font:.76rem/1.9 var(--mono);color:var(--fg-soft)}

/* Reusable vector-native surfaces for business-specific page compositions. */
.section-visual{position:relative;min-height:240px;overflow:hidden;border:1px solid var(--hairline);background:radial-gradient(ellipse at 70% 35%,var(--accent-soft),transparent 60%),var(--bg-raised);border-radius:8px}
.section-visual::after{content:"";position:absolute;inset:12%;border:1px solid var(--hairline);transform:perspective(450px) rotateX(30deg) rotateZ(-15deg);background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}
.product-illustration{position:relative;display:grid;place-items:center;min-height:190px;margin:-30px -30px 26px;background:radial-gradient(circle at 50% 30%,var(--accent-soft),transparent 70%),var(--bg-elevated);border-bottom:1px solid var(--hairline)}
.product-illustration svg{width:105px;height:105px;stroke:var(--accent);fill:none;stroke-width:1.3;filter:drop-shadow(0 12px 20px var(--accent-glow))}
[data-bu="game"] .hero-art{transform:translateY(-50%) rotate(-10deg)}
[data-bu="game"] .orbit-core{border-radius:24%;transform:rotate(-15deg);background:linear-gradient(145deg,var(--accent-secondary),var(--accent) 24%,#32274d 65%,#100b1d)}
[data-bu="game"] .hero::after{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 95%,transparent) 28%,transparent 72%),linear-gradient(0deg,var(--bg),transparent 30%)}
[data-bu="shop"] .orbit-core{border-radius:20%;background:linear-gradient(145deg,var(--accent-secondary),var(--accent) 25%,#895333 65%,var(--bg));box-shadow:0 24px 70px var(--accent-glow)}
[data-bu="pay"] .orbit-core{border-radius:30%;background:linear-gradient(135deg,#d3e7ff,var(--accent) 16%,#345b8c 45%,#11243b 80%)}
[data-bu="sso"] .hero-art{opacity:.45}
[data-bu="oa"] body::before,[data-bu="oa"] .aurora,[data-bu="oa"] .hero-art{display:none}
[data-bu="oa"] .nav{background:#fffffff0;box-shadow:0 4px 18px #243c5005}
[data-bu="oa"] .nav .wrap{min-height:72px}
[data-bu="oa"] .brand::before{width:24px;height:24px}
[data-bu="oa"] section{border-top:0}
[data-bu="oa"] .sec-head h2{font-size:clamp(1.4rem,2.8vw,2rem)}
[data-bu="oa"] .grid>.card{min-height:126px}
[data-bu="oa"] .card{box-shadow:0 5px 16px #193b5504;border-radius:8px}
[data-bu="oa"] .card:hover{transform:translateY(-2px);box-shadow:0 8px 22px #193b5508}
[data-bu="oa"] .card h3{font-size:1.05rem;margin-top:7px}
[data-bu="oa"] .term{background:#eef3f7;color:var(--fg-soft)}
[data-bu="oa"] .auth{box-shadow:0 15px 50px #294a6810}
[data-bu="oa"] table.data{background:#fff}

/* Footer: a deliberate closing scene. */
footer{position:relative;border-top:1px solid var(--hairline);margin-top:var(--section-gap);padding:68px 0 112px;background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg-raised) 65%,var(--bg)))}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:55px}
footer h5{font:.65rem/1.8 var(--mono);letter-spacing:.14em;color:var(--fg);font-weight:500;margin-bottom:23px}
footer .cols>div:first-child h5{font-size:1.35rem;font-family:var(--sans);letter-spacing:-.02em;margin-bottom:18px}
footer li{list-style:none;margin:11px 0;font-size:.75rem;line-height:1.9;color:var(--fg-muted)}
footer a:hover{color:var(--accent)}
footer .fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;margin-top:60px;padding-top:24px;border-top:1px solid var(--hairline);font:.58rem/1.8 var(--mono);letter-spacing:.035em;color:var(--fg-muted)}
[data-bu="oa"] footer{background:#eaf0f5;margin-top:50px;padding-top:40px}

/* Text remains present without JS; reveal effects never impose a permanent gate. */
[data-split] span{display:inline-block}
.js-motion [data-split] span{animation:yf-reveal .8s var(--ease) both;animation-delay:calc(min(var(--i),16)*25ms)}
.js-motion [data-reveal]{animation:yf-reveal .8s var(--ease) both;animation-delay:var(--reveal-delay,0ms)}
.js-motion [data-reveal].in{animation-delay:0ms}
html[lang="en"] h1.display{font-size:clamp(3.25rem,6.1vw,6.8rem);line-height:1.04;max-width:790px;letter-spacing:-.06em}
html[lang="en"] .hero .sub{line-height:1.8;letter-spacing:0}
html[lang="en"] .nav .wrap{gap:24px}
@media(min-width:1600px){.hero-art{right:0;width:min(840px,55vw)}.hero>.wrap{padding-top:115px;padding-bottom:135px}.hero{min-height:850px}}
@media(max-width:1100px){.brand .en{display:none}.nav .wrap{gap:23px}.hero-art{right:-18%;width:69vw;opacity:.7}.hero::after{background:linear-gradient(90deg,var(--bg),color-mix(in srgb,var(--bg) 95%,transparent) 25%,transparent 80%),linear-gradient(0deg,var(--bg),transparent 35%)}h1.display{max-width:720px}.hero .sub{max-width:460px}.grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-signal{display:none}}
@media(max-width:760px){:root{--gutter:24px}.nav .wrap{min-height:70px;gap:20px;overflow-x:auto;scrollbar-width:none}.nav .wrap::-webkit-scrollbar{display:none}.brand{font-size:.9rem}.brand::before{width:23px;height:23px}.nav a.link{font-size:.72rem}.nav .wrap>span{min-width:4px}.hero{min-height:740px;min-height:calc(90svh - 70px)}.hero>.wrap{padding-top:84px;padding-bottom:90px}.hero .kicker{font-size:.55rem;letter-spacing:.11em;margin-bottom:24px}h1.display{font-size:clamp(3rem,9.8vw,4.8rem);max-width:590px;line-height:1.19}.hero .sub{font-size:.9rem;max-width:460px;line-height:1.9}.hero-art{width:96vw;right:-38%;top:58%;opacity:.42}.hero::after{background:linear-gradient(90deg,var(--bg),color-mix(in srgb,var(--bg) 93%,transparent) 15%,transparent 100%),linear-gradient(0deg,var(--bg),transparent 35%)}.hero-meta{font-size:.5rem;line-height:2;letter-spacing:.08em;margin-top:42px;max-width:450px}.hero .btn{padding:12px 18px;min-height:46px;font-size:.76rem}.sec-head h2{font-size:clamp(1.8rem,6vw,2.5rem)}.sec-head .more{font-size:.55rem}.yf-section-label{font-size:.57rem;margin-bottom:28px}.card{padding:25px}.grid.c2{grid-template-columns:1fr}.grid.c3{gap:12px}.grid>.card{min-height:200px}.card .code{font-size:.54rem}.card h3{font-size:1.05rem;margin-top:18px}.card p{font-size:.8rem}.card .stat{font-size:.54rem}.card .stat b{display:inline-block}.tl-item{grid-template-columns:1fr;gap:8px;padding:24px 22px 24px 0}.tl-item p{grid-column:1}.tl-item time{padding:0}.tl-item h4{font-size:1.05rem}.tl-item::after{top:24px}.dock{bottom:12px;max-width:calc(100vw - 24px);overflow:auto;scrollbar-width:none}.dock a{padding:9px 11px;font-size:.54rem;flex-shrink:0}.auth{margin:9vh 24px;max-width:none;padding:30px}.workspace-head{align-items:flex-start}.workspace-head h1{font-size:1.75rem}.workspace-head .btn{padding:10px 13px;font-size:.7rem}.inline-form label{min-width:100%}.workspace .grid>.card{min-height:120px}.workspace .card h2{font-size:1.7rem}.workspace .grid.c3{grid-template-columns:1fr}.table-scroll{margin-inline:-4px}table.data{font-size:.72rem;min-width:470px}.card table.data{min-width:0}table.data th,table.data td{padding:13px 10px}.workspace-nav{gap:19px}.workspace-nav a{font-size:.74rem}.product-illustration{margin:-25px -25px 20px;min-height:150px}.product-illustration svg{width:85px;height:85px}footer .cols{grid-template-columns:1.1fr 1fr;gap:30px}footer .cols>div:first-child{grid-column:1/-1}footer .fine{font-size:.52rem;margin-top:35px}html[lang="en"] h1.display{font-size:clamp(2.8rem,9vw,4.8rem)}html[lang="en"] .nav .wrap{gap:20px}}
@media(max-width:440px){.grid.c3{grid-template-columns:1fr}.grid>.card{min-height:180px}.hero>.wrap{padding-top:65px;padding-bottom:80px}.hero{min-height:660px}.hero-art{right:-45%;width:115vw}.hero .sub{max-width:330px}.hero-meta{max-width:330px}.hero .kicker{max-width:280px}.card h3{font-size:1.18rem}.brand::before{width:19px;height:23px}.auth{margin-inline:18px}.dock a{padding:9px}.motion-control{bottom:17px;font-size:.5rem}.marquee .track{font-size:.58rem;gap:36px}.sec-head .more{display:none}}
@media(hover:none){.card:hover{transform:none}.card:hover::after{opacity:0}.tl-item:hover{padding-left:0;background:transparent}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion [data-reveal],.js-motion [data-split] span{opacity:1!important;transform:none!important}.aurora{opacity:.5}.motion-control{display:none}}