:root{--ink:#191c20;--paper:#f3f2ef;--muted:#646b75;--line:#d3d8df;--blue:#8cbcf3;--blue-deep:#315e92;--blue-pale:#e1e9f3;--lime:var(--blue);--darkline:#383e47}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'PingFang SC','PingFang TC','Microsoft YaHei','Apple SD Gothic Neo',sans-serif;font-size:15px;line-height:1.65}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}a,button{transition:background .2s,color .2s,transform .2s,border-color .2s}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #315e92;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;letter-spacing:-.05em;line-height:1.16}h1{font-size:clamp(48px,5.5vw,80px)}h2{font-size:clamp(34px,3.8vw,54px)}h3{font-size:25px}p{color:var(--muted)}[x-cloak]{display:none!important}.wrap{max-width:1280px;width:calc(100% - 112px);margin:auto}.dark{background:var(--ink);color:var(--paper)}.dark p{color:#a5acb5}.eyebrow,.mono{font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace}.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:25px}.eyebrow:before{content:'';width:7px;height:7px;background:#315e92}.dark .eyebrow:before{background:var(--lime)}.accent{color:var(--lime)}.section{padding:104px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:48px}.section-head h2{max-width:740px}.section-head p{max-width:440px}.lead{font-size:18px;line-height:1.8;max-width:540px;margin-top:28px}.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:48px;padding:12px 23px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;border-radius:4px}.btn:after{content:'↗';font-size:19px;font-weight:400}.btn:hover{background:#2b343f;transform:translateY(-2px)}.btn.lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}.btn.lime:hover{background:#accff7}.btn.ghost{background:transparent;color:inherit;border-color:var(--line)}.dark .btn.ghost{border-color:#48505a}.text-link{display:inline-flex;align-items:center;gap:20px;font-size:14px;border-bottom:1px solid currentColor;padding-bottom:4px}.text-link:hover{gap:28px}.site-header{position:sticky;top:0;z-index:40;background:#191c20f5;color:var(--paper);border-bottom:1px solid var(--darkline);backdrop-filter:blur(15px)}.nav-inner{display:flex;align-items:center;gap:45px;min-height:80px}.logo{font-size:25px;font-weight:800;letter-spacing:-1.7px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.logo-mark{width:20px;height:20px;border:2px solid var(--lime);transform:rotate(-8deg);position:relative}.logo-mark:after{content:'';width:7px;height:7px;background:var(--lime);position:absolute;right:-5px;bottom:-5px}.desktop-nav{display:flex;gap:30px;align-items:center;flex:1}.nav-item{position:relative}.nav-trigger{border:0;background:none;padding:15px 0;display:flex;gap:9px;align-items:center;font-size:13px}.nav-trigger:hover,.nav-link:hover{color:var(--lime)}.nav-link{font-size:13px}.nav-right{display:flex;gap:24px;align-items:center;margin-left:auto}.nav-right .btn{min-height:38px;padding:7px 15px;font-size:12px}.dropdown{position:absolute;top:100%;left:-20px;background:#1f2329;border:1px solid #353e4a;padding:12px;min-width:245px;box-shadow:0 20px 50px #0004;border-radius:6px;z-index:45}.dropdown a,.dropdown button{display:block;width:100%;background:none;border:0;text-align:left;padding:11px 12px;font-size:13px}.dropdown a:hover,.dropdown button:hover{background:#2b3440;color:var(--lime)}.language-dropdown{left:auto;right:0;min-width:190px}.mobile-toggle{display:none;background:none;border:1px solid #4c545f;border-radius:3px;width:40px;height:38px}.mobile-nav{padding:15px 24px 26px;max-height:80vh;overflow:auto}.mobile-nav a{display:block;padding:10px 0;border-bottom:1px solid var(--darkline)}.mobile-nav .lang-row{padding-top:18px}.lang-row{display:flex;gap:15px;flex-wrap:wrap}.lang-row button{border:0;background:none;padding:4px 0;font-size:12px}.lang-row button.active{color:#315e92;border-bottom:1px solid currentColor}.dark .lang-row button.active{color:var(--lime)}.language-banner{background:var(--lime);color:var(--ink);font-size:12px;padding:9px 20px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}.language-banner button{background:none;border:0;text-decoration:underline}.language-banner .close{font-size:20px;line-height:1;text-decoration:none}.hero{padding:65px 0 0;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:18px;min-height:570px}.hero-copy{position:relative;z-index:2;padding:10px 0 45px}.hero h1{max-width:700px}.hero .lead{max-width:440px;font-size:16px}.hero-visual{position:relative;min-width:0;align-self:stretch;display:flex;align-items:center}.hero-art{width:135%;max-width:none;margin-left:-12%;filter:contrast(1.01);mix-blend-mode:lighten}.art-label{position:absolute;border-left:1px solid #687382;padding-left:14px;font-size:10px;color:#aeb5bf;line-height:1.8}.art-label.top{top:25px;right:0}.art-label.bottom{bottom:55px;left:12px}.signal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:7px;box-shadow:0 0 0 4px #8cbcf312}.hero-bottom{border-top:1px solid var(--darkline);display:grid;grid-template-columns:1fr 1fr 1fr;padding:24px 0 28px;gap:24px;font-size:12px;color:#a3aab3}.hero-bottom strong{font-weight:400;color:#dadfe6;font-size:16px;display:block;margin-bottom:3px}.hero-bottom>div+div{border-left:1px solid var(--darkline);padding-left:30px}.terminal{background:#0f1215;border:1px solid #3a4553;box-shadow:0 16px 35px #0003;border-radius:6px;overflow:hidden;color:#b4becb}.hero-terminal{position:absolute;bottom:45px;right:0;width:310px;z-index:3;transform:rotate(-2deg)}.terminal-bar{padding:11px 15px;border-bottom:1px solid #29313b;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.03em}.terminal-body{padding:19px;font-size:12px;min-height:140px;line-height:2}.terminal button{background:none;border:0;color:var(--lime);font-size:11px;text-align:left;padding:8px 0 0}.terminal .command{color:#e7ecf3}.terminal .cursor{display:inline-block;background:var(--lime);width:7px;height:13px;vertical-align:middle;animation:blink 1.5s infinite}@keyframes blink{50%{opacity:0}}.intro-line{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-bottom:65px}.intro-line h2{font-size:42px}.intro-line p{align-self:end;max-width:480px}.product-row{display:grid;grid-template-columns:55px 1fr 1.1fr 170px;gap:22px;padding:33px 0;border-top:1px solid var(--line);align-items:center}.product-row:last-child{border-bottom:1px solid var(--line)}.product-row .number{font-size:12px;color:#737c87;align-self:start;margin-top:6px}.product-row p{font-size:13px;margin-top:10px;max-width:300px}.product-row ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:#56606c}.product-row li:before{content:'↳';margin-right:7px;color:#4e6b92}.product-row:hover h3{color:#315e92}.product-row .text-link{justify-self:end}.network-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.network-layout h2{max-width:500px}.network-map{min-width:0;position:relative;background-image:radial-gradient(#384250 1px,transparent 1px);background-size:18px 18px;border:1px solid #323b47;border-radius:6px;padding:24px}.map-svg{width:100%;height:auto;display:block;overflow:visible}.map-svg path{fill:none;stroke:#3b4757;stroke-width:1.4}.map-svg path.active{stroke:var(--lime);stroke-width:2;stroke-dasharray:7 6;animation:dash 2s linear infinite}@keyframes dash{to{stroke-dashoffset:-52}}.map-svg text{fill:#cad3de;font:12px Arial}.map-svg circle{fill:var(--lime)}.route-controls{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0 0}.route-controls button,.tabs button{background:none;border:1px solid #495360;padding:8px 14px;border-radius:3px;font-size:12px}.route-controls button.active{background:var(--lime);color:var(--ink);border-color:var(--lime)}.route-readout{font-size:11px;color:#a7b2c0;margin-top:14px;min-height:38px}.network-partners{margin-top:65px;padding-top:28px;border-top:1px solid #353e4a;display:flex;gap:32px;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:15px;letter-spacing:-.02em}.network-partners .caption{color:#838e9c;font-size:11px}.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.price-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:31px;position:relative;display:flex;flex-direction:column;min-width:0}.price-card.featured{background:#e1e9f3}.price-card .tag{font-size:10px;letter-spacing:.04em;margin-bottom:25px;min-height:20px;color:#3e5470}.price{margin:22px 0;font-size:46px;line-height:1.1;letter-spacing:-.05em}.price small{font-size:13px;color:var(--muted);letter-spacing:0}.price-card ul{padding:20px 0;list-style:none;border-top:1px solid var(--line);font-size:13px;margin:0 0 20px;line-height:2.2;flex:1}.price-card li:before{content:'✓';margin-right:10px;color:#516a8a}.price-note{font-size:12px;margin-top:18px}.mac-teaser{display:grid;grid-template-columns:1fr 1fr;background:#e9e8e4;align-items:center;overflow:hidden;border-radius:5px}.mac-teaser img{width:100%;mix-blend-mode:multiply}.mac-teaser .copy{padding:65px;max-width:600px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.blog-card{min-width:0}.blog-card .cover{aspect-ratio:1.6;overflow:hidden;background:#1c2127;margin-bottom:23px;border-radius:4px}.blog-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.blog-card:hover img{transform:scale(1.05)}.blog-card h3{font-size:23px;line-height:1.4;margin:12px 0}.blog-card p{font-size:13px}.metadata{font-size:10px;color:#6f7884;display:flex;gap:13px;flex-wrap:wrap;letter-spacing:.03em}.blog-card .cover.abstract{display:flex;align-items:center;justify-content:center;background:#d3e2f4}.abstract-art{width:50%;height:68%;border:1px solid #455e7f;transform:rotate(-20deg);box-shadow:14px 14px 0 #839fc4,28px 28px 0 #6a84a7;display:flex;align-items:center;justify-content:center;font-size:24px;color:#3a4554}.bottom-cta{padding:65px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:40px;align-items:center}.bottom-cta h2{font-size:40px}.bottom-cta .actions{margin:0}.site-footer{padding:64px 0 25px}.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px}.footer-brand p{font-size:13px;margin-top:20px;max-width:260px}.footer-col{display:flex;flex-direction:column;align-items:start;gap:12px;font-size:12px}.footer-col strong{color:#76818f;font-size:10px;font-weight:400;margin-bottom:7px}.footer-col a:hover{color:var(--lime)}.footer-bottom{border-top:1px solid #313842;margin-top:65px;padding-top:23px;display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;font-size:10px;color:#858f9b}.page-hero{padding:76px 0 64px;border-bottom:1px solid var(--line)}.page-hero h1{max-width:880px}.page-hero .lead{max-width:650px}.breadcrumbs{font-size:11px;color:#6d7783;margin-bottom:36px}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tabs button{border-color:#b9c1cb;padding:10px 18px}.tabs button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:35px}.search{background:transparent;border:1px solid #b9c1cb;border-radius:3px;padding:11px 16px;width:250px;max-width:100%}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.facts{border-top:1px solid var(--line)}.fact{padding:25px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:140px 1fr;gap:22px}.fact strong{font-size:15px;font-weight:500}.fact p{font-size:13px}.faq{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item>button{display:flex;justify-content:space-between;gap:20px;width:100%;background:none;border:0;text-align:left;padding:24px 0;font-size:17px}.faq-item p{padding:0 35px 25px 0;font-size:14px;max-width:800px}.mac-hero .hero-grid{min-height:520px}.mac-hero .hero-art{mix-blend-mode:multiply;width:120%;margin-left:-10%}.mac-hero .art-label{color:#526072}.desktop-demo{border:1px solid #485361;border-radius:7px;overflow:hidden;background:#96a4b7}.browser-bar{background:#252a31;display:flex;gap:15px;align-items:center;padding:12px 20px;font-size:11px;color:#a7b2c0}.browser-address{background:#1c2026;padding:4px 25px;border-radius:4px;margin:auto;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.desktop-area{height:460px;position:relative;overflow:hidden;background:#93a3b9;background-image:repeating-radial-gradient(ellipse at 15% 120%,transparent 0 40px,#cfdae855 42px 44px,transparent 46px 68px)}.desktop-menubar{padding:8px 18px;background:#d5dfeba6;color:#2e3640;font-size:11px;display:flex;justify-content:space-between}.desktop-window{position:absolute;left:20%;top:85px;width:62%;border:1px solid #d4dbe4;background:#f0f3f8;color:#212831;border-radius:7px;box-shadow:0 30px 50px #272f393b;overflow:hidden;touch-action:none}.window-handle{padding:12px 15px;border-bottom:1px solid #cfd7e2;background:#dfe5ed;cursor:grab;display:flex;align-items:center;gap:16px;touch-action:none;user-select:none;font-size:11px}.traffic{display:flex;gap:5px}.traffic i{height:7px;width:7px;border-radius:50%;background:#95a2b4}.desktop-content{padding:26px;min-height:165px}.desktop-content h3{font-size:23px;margin-bottom:12px}.desktop-content p{font-size:13px;color:#6b7582}.dock{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;padding:8px;gap:9px;background:#d6dfeac9;border:1px solid #f8f9fb;border-radius:13px}.dock button{width:42px;height:42px;border:1px solid #94a4b8;border-radius:9px;background:#e7edf4;color:#2b3440;font:20px monospace}.dock button.active{box-shadow:0 3px 0 #343f4d}.demo-footer{padding:12px 20px;background:#1c2128;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:11px;color:#a2afc0}.demo-footer button{background:none;border:0;color:var(--lime)}.article-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:80px;align-items:start}.article-toc{position:sticky;top:115px;display:flex;flex-direction:column;gap:16px;font-size:13px}.article-toc strong{font-size:10px;letter-spacing:.1em;color:#757e8a}.article-toc a:hover{color:#42628c}.article-body h2{font-size:32px;margin:48px 0 22px;scroll-margin-top:110px}.article-body p{margin-bottom:22px;font-size:16px;line-height:1.95}.article-body img{border-radius:5px;margin-bottom:35px}.article-body blockquote{margin:35px 0;border-left:3px solid #6e8db6;padding:20px 25px;background:#dfe5ec;font-size:20px}.reading-progress{height:2px;background:var(--lime);position:fixed;left:0;top:80px;z-index:41;width:0}.notice{padding:16px 20px;border:1px solid #bac5d4;background:#e3e9f0;font-size:12px;color:#586575;border-radius:4px}.empty-state{padding:80px;text-align:center;border:1px dashed var(--line)}.modal-backdrop{position:fixed;inset:0;background:#0e1115b0;backdrop-filter:blur(6px);z-index:100;display:flex;align-items:center;justify-content:center;padding:22px}.modal{background:var(--paper);border:1px solid #9dadc1;max-width:520px;width:100%;padding:35px;box-shadow:0 30px 100px #0006;position:relative;border-radius:6px}.modal h2{font-size:32px;margin:24px 0 18px}.modal p{font-size:14px}.modal .close{position:absolute;right:20px;top:12px;background:none;border:0;font-size:27px}.modal .route{padding:12px;background:#dfe4eb;margin:20px 0;font-size:11px;overflow-wrap:anywhere}.reveal{transition:opacity .65s,transform .65s}.js-ready .reveal:not(.visible){opacity:0;transform:translateY(22px)}.comparison{width:100%;border-collapse:collapse;font-size:13px;margin-top:35px}.comparison th,.comparison td{text-align:left;border-bottom:1px solid var(--line);padding:18px 12px}.comparison th{font-weight:500;color:#505e70}.mobile-note{display:none}button[aria-pressed=true]{font-weight:600}@media(min-width:1500px){.hero-grid{min-height:650px}}@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.nav-inner{gap:25px}.desktop-nav{gap:20px}.nav-right{gap:15px}.hero-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:60px}.hero-terminal{width:270px}.network-layout{gap:35px}.mac-teaser .copy{padding:40px}.product-row{grid-template-columns:35px 1fr 1fr 130px;gap:15px}.article-layout{gap:40px;grid-template-columns:180px minmax(0,1fr)}}@media(max-width:800px){.wrap{width:calc(100% - 40px)}.desktop-nav,.nav-right>.login,.nav-right>.btn{display:none}.nav-inner{min-height:68px;gap:20px}.nav-right{gap:18px}.mobile-toggle{display:block}.logo{font-size:23px}.hero{padding-top:40px}.hero-grid{display:flex;flex-direction:column;gap:0;min-height:auto}.hero-copy{width:100%;padding:0}.hero h1{font-size:52px;max-width:600px}.hero .lead{max-width:500px;font-size:15px;margin-top:24px}.hero-visual{width:100%;min-height:355px;align-self:auto;margin-top:10px}.hero-art{width:110%;margin-left:-5%;max-height:440px;object-fit:cover}.hero-terminal{width:240px;bottom:20px;right:0}.terminal-body{padding:14px;min-height:124px;font-size:11px}.art-label.top{top:20px;right:0;font-size:9px}.art-label.bottom{left:5px;bottom:40px;font-size:9px;max-width:90px}.hero-bottom{gap:14px;padding:22px 0;font-size:10px}.hero-bottom strong{font-size:13px}.hero-bottom>div+div{padding-left:13px}.section{padding:65px 0}.section-head{display:block;margin-bottom:30px}.section-head>p,.section-head>.text-link{margin-top:20px}h2{font-size:36px}.intro-line{grid-template-columns:1fr;gap:25px;padding-bottom:35px}.intro-line h2{font-size:36px}.product-row{grid-template-columns:25px 1fr;gap:12px;padding:28px 0}.product-row>ul,.product-row>.text-link{grid-column:2;justify-self:start}.product-row>ul{padding:10px 0;display:block;line-height:2}.product-row h3{font-size:23px}.network-layout,.split{grid-template-columns:1fr;gap:35px}.network-map{padding:15px}.network-partners{gap:20px;margin-top:35px;font-size:13px}.network-partners .caption{width:100%}.price-card{padding:25px}.price-grid{grid-template-columns:1fr}.price-card .tag{margin-bottom:15px}.price-card h3{font-size:24px}.mac-teaser{grid-template-columns:1fr}.mac-teaser .copy{padding:34px 27px 0}.mac-teaser img{max-height:390px;object-fit:cover}.blog-grid{grid-template-columns:1fr;gap:36px}.blog-card .cover{aspect-ratio:1.8}.bottom-cta{display:block;padding:45px 0}.bottom-cta h2{font-size:34px}.bottom-cta .actions{margin-top:25px}.footer-top{grid-template-columns:1fr 1fr;gap:35px}.footer-brand{grid-column:1/-1}.footer-bottom{margin-top:40px}.page-hero{padding:44px 0 45px}.page-hero h1{font-size:45px}.lead{font-size:16px}.tabs{gap:6px}.tabs button{padding:9px 13px}.toolbar{gap:20px}.search{width:100%}.mac-hero .hero-art{width:110%;margin-left:-5%}.mac-hero .hero-visual{min-height:270px}.mac-hero .hero-grid{min-height:0}.desktop-area{height:355px}.desktop-window{left:6%;width:88%;top:75px}.desktop-content{padding:22px;min-height:140px}.desktop-content h3{font-size:21px}.browser-bar{padding:11px;font-size:9px}.browser-address{padding:3px 9px}.desktop-menubar{font-size:9px}.demo-footer{font-size:10px}.article-layout{grid-template-columns:1fr;gap:35px}.article-toc{position:static;border-bottom:1px solid var(--line);padding-bottom:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:13px 20px;font-size:12px}.article-toc strong{width:100%}.article-body h2{font-size:28px}.article-body p{font-size:15px}.reading-progress{top:68px}.fact{grid-template-columns:100px 1fr;gap:15px}.modal{padding:28px}.comparison{font-size:11px}.comparison th,.comparison td{padding:15px 5px}.empty-state{padding:50px 20px}.language-banner{gap:10px;font-size:11px}.eyebrow{font-size:10px;margin-bottom:20px}.mobile-note{display:block;font-size:11px;margin-top:15px}.desktop-note{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-ready .reveal:not(.visible){opacity:1;transform:none}} /* Deliberate line breaks and language-aware heading scale. */ h1,h2{white-space:pre-line;text-wrap:balance}.hero-line{display:block}html[lang=en] .hero h1{font-size:clamp(46px,4.9vw,72px)}.suggest-demo{background:none;border:0;color:inherit;font-size:10px;padding:0;text-decoration:underline}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:8px;left:10px;background:var(--lime);color:var(--ink);padding:10px 20px;z-index:150;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)} @media(max-width:800px){html[lang=en] .hero h1{font-size:46px}.hero h1{font-size:47px}.agent-visual{padding:22px!important}html[lang=ko] .hero h1{font-size:44px}.route-controls{gap:6px}.route-controls button{padding:8px 11px}} /* Keep the Chinese headline on intentional phrase boundaries at 390px. */ .hero h1{font-size:clamp(46px,4.9vw,72px)} @media(max-width:800px){.hero h1{font-size:clamp(36px,10.8vw,43px)}.page-hero h1{font-size:40px}html[lang=en] .hero h1{font-size:46px}html[lang=ko] .hero h1{font-size:42px}} /* 正式站:语言切换改为链接(原型是按钮) */ .lang-row a{padding:4px 0;font-size:12px}.lang-row a.active{color:#315e92;border-bottom:1px solid currentColor}.dark .lang-row a.active{color:var(--lime)}.dropdown a.active{color:var(--lime)} .tabs a.tab-link{border:1px solid #b9c1cb;padding:10px 18px;border-radius:3px;font-size:12px}.tabs a.tab-link.active{background:var(--ink);color:var(--paper);border-color:var(--ink)} @media(max-width:800px){.tabs a.tab-link{padding:9px 13px}} .pager{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:55px;padding-top:28px;border-top:1px solid var(--line);font-size:13px} /* Round two: blue actions and a narrative Mac workflow, alongside the desktop demo. */ .btn:not(.ghost):not(.lime){background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}.btn:not(.ghost):not(.lime):hover{background:#244b78}.scenario-layout{display:grid;grid-template-columns:260px minmax(0,1fr);border-top:1px solid var(--darkline)}.scenario-nav{padding:24px 32px 0 0;border-right:1px solid var(--darkline)}.scenario-nav button{display:flex;width:100%;gap:16px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--darkline);background:none;padding:20px 12px;font-size:14px;color:#b4becb}.scenario-nav button>span:last-child{margin-left:auto}.scenario-nav button .mono{font-size:10px}.scenario-nav button.active{background:var(--blue);color:var(--ink);border-radius:3px}.scenario-stage{padding:36px 0 0 44px;min-width:0}.scenario-stage h3{font-size:clamp(26px,2.7vw,38px)}.scenario-description{margin-top:20px;max-width:680px;min-height:84px;font-size:15px;line-height:1.85}.workflow-browser{margin-top:30px;border:1px solid #465362;border-radius:6px;overflow:hidden;background:#14181e}.workflow-browser .browser-bar{background:#242b34}.workflow-steps{display:grid;grid-template-columns:repeat(3,1fr);padding:30px 24px 0;gap:16px}.workflow-steps button{position:relative;background:none;border:0;border-top:1px solid #465362;color:#aeb8c7;text-align:left;padding:16px 0;font-size:12px;display:flex;flex-direction:column;gap:12px}.workflow-steps button.active{border-color:var(--blue);color:var(--blue)}.step-dot{display:grid;place-items:center;width:28px;height:28px;border:1px solid #465362;border-radius:50%;font-size:11px}.active>.step-dot,.done>.step-dot{background:var(--blue);color:var(--ink);border-color:var(--blue)}.workflow-output{padding:20px 24px;min-height:128px;border-top:1px solid #303943}.workflow-output p{font-size:15px;line-height:1.9;color:#d6dfeb}.workflow-controls{padding:18px 24px;display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid #303943}.workflow-controls button{background:none;border:0;border-bottom:1px solid currentColor;color:var(--blue)}.workflow-controls .text-link{font-size:12px;color:var(--blue)}.scenario-notes{display:grid;grid-template-columns:1fr 1fr;gap:36px;border-top:1px solid var(--darkline);margin-top:42px;padding-top:24px}.scenario-notes p{font-size:12px;color:#aeb8c7;line-height:1.9}@media(max-width:800px){.scenario-layout{grid-template-columns:1fr}.scenario-nav{border-right:0;padding:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px}.scenario-nav button{padding:14px 9px;gap:9px;font-size:12px}.scenario-stage{padding:25px 0 0}.scenario-description{min-height:0}.workflow-steps{padding:20px 16px 0;gap:10px}.workflow-output{padding:20px 16px;min-height:152px}.workflow-controls{padding:18px 16px}.scenario-notes{grid-template-columns:1fr;gap:16px}} /* Round three — editorial rhythm, visible control, room for life. Palette 01 unchanged. */ .core-benefits{background:var(--paper)}.core-benefits .section-head{align-items:start;gap:60px}.core-benefits h2{font-size:clamp(40px,4.6vw,66px)}.benefit-ledger{border-top:1px solid var(--ink)}.benefit-row{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.05fr) 100px;gap:30px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line)}.benefit-number{font-size:36px;letter-spacing:-.07em;color:var(--blue-deep);align-self:start;line-height:1.4}.benefit-scope{font-size:9px;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:10px}.benefit-row h3{font-size:25px;line-height:1.35;letter-spacing:-.04em}.benefit-row p{font-size:13px;line-height:1.9}.benefit-mark{justify-self:end;font-size:13px;color:var(--blue-deep);border-bottom:2px solid var(--blue);padding-bottom:8px}.benefit-row:hover .benefit-number{transform:translateX(5px)}.benefit-number{transition:transform .25s} .mac-hero{background:var(--paper)}.mac-hero .hero-copy{padding-bottom:55px}.mac-hero .hero-grid{grid-template-columns:1.12fr 1fr;gap:0;min-height:600px}.mac-hero .hero-copy h1{font-size:clamp(42px,4.5vw,66px)}.mac-hero .hero-copy .lead{max-width:520px}.mac-hero .price-note{color:var(--blue-deep);max-width:500px;line-height:1.9}.mac-hero+.core-benefits{padding-top:50px}.mac-spotlight{padding:50px 0 40px;overflow:hidden}.spotlight-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--darkline)}.spotlight-top .eyebrow{margin:0}.spotlight-top>.mono{font-size:10px;color:#a5acb5}.spotlight-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:25px;padding:75px 0 40px}.spotlight-grid h2{font-size:clamp(42px,4.3vw,62px)}.spotlight-grid .lead{font-size:16px}.spotlight-art{position:relative;min-width:0}.spotlight-art img{width:100%;border-radius:6px;opacity:.94}.night-console{margin:-40px 25px 0;position:relative;background:#14181e;border:1px solid #465362;padding:23px;border-radius:5px;font-size:13px;box-shadow:0 18px 35px #0003}.night-console small{font:9px monospace;color:#9ba9ba}.night-track{height:2px;background:#353e4a;margin:20px 0 12px;overflow:hidden}.night-track i{display:block;width:42%;height:100%;background:var(--blue);animation:night-shift 6s ease-in-out infinite}@keyframes night-shift{0%,100%{transform:translateX(0)}50%{transform:translateX(135%)}}.demo-caption{font-size:11px;line-height:1.8;margin-top:24px;max-width:1000px}.korea-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:100px}.korea-story .section-head{margin-bottom:30px}.korea-story h2{font-size:clamp(35px,3.6vw,50px)}.korea-story p{font-size:15px;line-height:1.9}.korea-proof{padding-top:10px}.korea-proof article{border-top:1px solid var(--line);padding:25px 0 35px}.korea-proof h3{font-size:24px;margin-bottom:16px}.korea-proof .text-link{margin-top:8px} .day-story .section-head p{color:#a5acb5}.day-story h2{font-size:clamp(40px,5vw,72px)}.day-contrast{display:grid;grid-template-columns:1fr 1fr;gap:50px;border-top:1px solid var(--darkline);padding:30px 0 45px}.day-contrast p{display:flex;flex-direction:column;gap:12px}.day-contrast .mono{font-size:10px;letter-spacing:.07em}.day-contrast strong{font-size:22px;font-weight:400;line-height:1.5}.day-contrast p:last-child{color:var(--blue)}.day-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.day-track article{border-top:1px solid #596777;padding-top:26px;position:relative}.day-track article:before{content:'';position:absolute;width:7px;height:7px;background:var(--blue);border-radius:50%;top:-4px;left:0;box-shadow:0 0 0 6px #8cbcf311}.day-time{font-size:46px;color:var(--blue);letter-spacing:-.05em;line-height:1.4}.day-track h3{font-size:23px;margin:18px 0 16px}.day-track p{font-size:14px}.audience-section{background:#e9edf2}.audience-list{border-top:1px solid #b9c6d5}.audience-list article{display:grid;grid-template-columns:50px minmax(0,.65fr) minmax(0,1.4fr);gap:28px;padding:28px 0;border-bottom:1px solid #c6d1dd;align-items:start}.audience-list .mono{font-size:11px;color:var(--blue-deep);padding-top:6px}.audience-list h3{font-size:25px;line-height:1.4}.audience-list p{font-size:14px;line-height:1.9}.use-cases .section-head{align-items:start}.use-cases .scenario-stage h3{line-height:1.3} .kvm-section{background:#e8edf4}.kvm-diagram{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #b9c6d5;padding:22px 28px;font-size:12px;margin-bottom:38px;flex-wrap:wrap}.kvm-diagram strong{font:12px monospace;letter-spacing:.04em}.kvm-diagram i{color:var(--blue-deep);font-style:normal}.kvm-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.kvm-controls button{border:1px solid #a9b9cc;border-radius:3px;padding:10px 19px;background:transparent;font-size:13px}.kvm-controls button.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.kvm-comparison{display:grid;grid-template-columns:1fr 1.25fr;gap:24px}.kvm-comparison article{border:1px solid #bcc8d7;background:var(--paper);padding:25px;min-width:0;border-radius:5px}.kvm-comparison h3{font-size:21px;line-height:1.4;margin-bottom:22px}.kvm-comparison .hardware-remote{background:var(--ink);color:var(--paper);border-color:var(--ink)}.kvm-screen{height:225px;background:#e2e5e9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid #ccd4df;padding:20px;position:relative;border-radius:3px}.kvm-screen p{font-size:13px}.kvm-screen-symbol{font:46px monospace;display:block;margin-bottom:18px;line-height:1}.software-remote>.kvm-screen{color:#85909d}.software-remote>p{margin-top:20px;font-size:12px}.hardware-remote .kvm-screen{background:#12171d;border-color:#465362}.hardware-remote .kvm-screen p{color:#cbd7e5}.kvm-live{position:absolute;top:15px;left:15px;text-align:left;color:var(--blue);font:9px monospace;letter-spacing:.04em}.kvm-live:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue);margin-right:7px}.kvm-state{width:100%;padding-top:25px}.kvm-state .kvm-screen-symbol{color:var(--blue)}.boot-meter{height:5px;width:120px;margin:15px auto 30px;background:#333d49;border-radius:3px;overflow:hidden}.boot-meter i{display:block;width:63%;height:100%;background:var(--blue)}.kvm-input{padding-top:20px;display:flex;flex-direction:column;gap:14px;min-height:95px}.kvm-input button{align-self:start;border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--blue);font-size:12px}.kvm-input>span{font-size:11px;color:#b1bdcd;line-height:1.7}.privacy-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;margin-top:65px}.privacy-track article{border-top:1px solid #556476;padding-top:28px}.privacy-node{width:42px;height:42px;border:1px solid var(--blue);border-radius:50%;display:grid;place-items:center;color:var(--blue);font-size:12px;margin-top:-50px;background:var(--ink);margin-bottom:24px;box-shadow:0 0 0 9px var(--ink)}.privacy-track h3{font-size:21px;line-height:1.5;margin-bottom:18px}.privacy-track p{font-size:14px;line-height:1.9} .agent-task{font-size:12px}.agent-task-head{display:flex;align-items:center;gap:6px;margin-bottom:18px;color:#344f70;font-size:11px}.agent-task .signal-dot{background:var(--blue-deep);margin:0;flex-shrink:0}.agent-log{min-height:66px;font-size:12px}.agent-log p{font-size:12px;line-height:1.8;color:#40546e}.agent-progress{height:4px;border-radius:3px;background:#c3d0df;margin:15px 0;overflow:hidden}.agent-progress i{height:100%;display:block;background:var(--blue-deep);transition:width .7s ease}.agent-task-controls{display:flex;justify-content:space-between;gap:16px;align-items:center}.agent-task-controls button{padding:0 0 2px;border:0;border-bottom:1px solid #6a7e98;background:none;font-size:11px}.agent-task-controls .mono{font-size:10px}.desktop-content:has(.agent-task){min-height:230px}.closing-story{padding:95px 0;overflow:hidden;position:relative}.closing-story .wrap{position:relative}.closing-story h2{font-size:clamp(42px,5.3vw,76px);max-width:860px;position:relative}.closing-story .lead{max-width:640px;font-size:17px;position:relative}.closing-story .actions,.closing-story .eyebrow{position:relative}.closing-orbit{position:absolute;width:450px;height:450px;right:-80px;top:-50px;opacity:.45;pointer-events:none}.closing-orbit i{position:absolute;inset:0;border:1px solid #69839f;border-radius:50%}.closing-orbit i:nth-child(2){inset:60px}.closing-orbit i:nth-child(3){inset:120px;background:#8cbcf30a}.closing-orbit span{position:absolute;inset:160px;display:grid;place-items:center;color:var(--blue);font-size:80px}.service-note{font-size:11px;line-height:1.9;padding:28px 0 38px;color:var(--muted)}.round3-cta .lead{font-size:15px}.round3-cta>div:first-child{max-width:720px}.round3-cta .actions{flex-shrink:0}.agent-outcomes{padding:75px 0;background:var(--blue-pale)}.agent-outcomes>.wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:80px}.outcome-list article{display:flex;gap:25px;padding:24px 0;border-top:1px solid #b9c6d5}.outcome-list article>.mono{font-size:11px;color:var(--blue-deep);padding-top:5px}.outcome-list h3{font-size:23px;line-height:1.3;margin-bottom:13px}.outcome-list p{font-size:14px}.plan-guide{padding-top:30px;padding-bottom:20px}.plan-guide h2{font-size:clamp(35px,3.4vw,48px)}.plan-guide-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:35px;border:1px solid var(--line);border-radius:5px;overflow:hidden}.need-options{padding:12px 28px;background:#e9edf2}.need-options button{display:flex;gap:18px;align-items:center;text-align:left;width:100%;padding:20px 0;border:0;border-bottom:1px solid #c8d2df;background:transparent;font-size:14px}.need-options button:last-child{border-bottom:0}.need-options button>span:last-child{margin-left:auto}.need-options button>.mono{font-size:10px;color:#687b92}.need-options button.active{color:var(--blue-deep)}.need-result{padding:35px;background:var(--paper);display:flex;align-items:center;min-height:310px}.need-result>article{width:100%;min-width:0}.need-result .mono{font-size:10px;color:var(--muted)}.need-result h3{font-size:34px;margin:16px 0}.need-result p{font-size:14px;line-height:1.9;margin-bottom:24px}.need-result .btn{font-size:13px} /* Shared subtle detail only: no blog/article/legal structural changes. */ ::selection{background:var(--blue);color:var(--ink)}.blog-card .cover,.article-body img{border:1px solid #8cbcf322}.faq-item>button:hover{color:var(--blue-deep)} @media(max-width:1100px){.benefit-row{grid-template-columns:50px minmax(0,1fr) minmax(0,1fr);gap:24px}.benefit-mark{display:none}.korea-grid{gap:45px}.mac-hero .hero-copy h1{font-size:50px}.spotlight-grid{gap:30px}.round3-cta{flex-wrap:wrap}.kvm-diagram{justify-content:flex-start}} @media(max-width:800px){.core-benefits .section-head{display:block}.core-benefits .section-head p{margin-top:24px}.core-benefits h2{font-size:40px}.benefit-row{grid-template-columns:38px minmax(0,1fr);gap:12px 18px;padding:26px 0}.benefit-number{font-size:27px}.benefit-row h3{font-size:24px}.benefit-row>p{grid-column:2;font-size:13px}.benefit-scope{font-size:9px;margin-bottom:7px}.mac-hero .hero-grid{min-height:0}.mac-hero .hero-copy{padding-bottom:0}.mac-hero .hero-copy h1,html[lang=en] .mac-hero .hero-copy h1,html[lang=ko] .mac-hero .hero-copy h1{font-size:clamp(34px,9.8vw,43px)}.mac-hero .hero-visual{min-height:240px}.mac-hero .price-note{font-size:11px}.mac-hero+.core-benefits{padding-top:35px}.mac-spotlight{padding:32px 0}.spotlight-top{align-items:start;flex-direction:column;gap:12px}.spotlight-top>.mono{font-size:9px}.spotlight-grid{grid-template-columns:1fr;padding:38px 0 25px;gap:40px}.spotlight-grid h2{font-size:40px}.spotlight-grid .lead{font-size:15px}.night-console{margin:-28px 12px 0;padding:20px;font-size:12px}.korea-grid{grid-template-columns:1fr;gap:32px}.korea-story h2{font-size:36px}.korea-story p{font-size:14px}.day-story h2{font-size:42px}.day-contrast{grid-template-columns:1fr;gap:25px;padding-bottom:40px}.day-contrast strong{font-size:20px}.day-track{grid-template-columns:1fr;gap:35px;padding-left:14px}.day-track article{padding-top:20px}.day-time{font-size:40px}.day-track h3{font-size:24px;margin-top:12px}.day-track p{font-size:14px}.audience-list article{grid-template-columns:25px minmax(0,1fr);gap:12px 16px}.audience-list h3{font-size:24px}.audience-list p{grid-column:2;font-size:13px}.kvm-diagram{padding:18px;gap:12px;font-size:11px}.kvm-diagram strong{font-size:11px}.kvm-controls{gap:7px;display:grid;grid-template-columns:1fr 1fr}.kvm-controls button{padding:10px 12px;font-size:12px}.kvm-comparison{grid-template-columns:1fr;gap:16px}.kvm-comparison article{padding:20px}.kvm-comparison h3{font-size:21px}.software-remote .kvm-screen{height:145px}.hardware-remote .kvm-screen{height:220px}.kvm-live{font-size:8px;left:12px;right:12px}.kvm-input{min-height:82px}.privacy-track{grid-template-columns:1fr;gap:45px;margin-top:55px}.privacy-track article{padding-left:58px;padding-top:0;border-top:0;border-left:1px solid #556476;margin-left:21px;position:relative}.privacy-node{position:absolute;top:0;left:-21px;margin:0}.privacy-track h3{font-size:21px}.privacy-track p{font-size:13px}.agent-task-head{font-size:10px;line-height:1.5;gap:8px}.agent-log p{font-size:11px}.desktop-content:has(.agent-task){padding:20px;min-height:240px}.desktop-area:has(.agent-task){height:445px}.desktop-window:has(.agent-task){top:60px}.closing-story{padding:65px 0}.closing-story h2{font-size:40px}.closing-story .lead{font-size:15px}.closing-orbit{width:280px;height:280px;right:-130px;top:0;opacity:.15}.closing-orbit span{inset:100px;font-size:60px}.closing-orbit i:nth-child(2){inset:40px}.closing-orbit i:nth-child(3){inset:80px}.service-note{font-size:10px;padding:25px 0 30px}.agent-outcomes{padding:60px 0}.agent-outcomes>.wrap{grid-template-columns:1fr;gap:30px}.outcome-list article{gap:18px}.plan-guide{padding-top:15px}.plan-guide h2{font-size:35px}.plan-guide-layout{grid-template-columns:1fr;margin-top:28px}.need-options{padding:8px 20px}.need-options button{font-size:13px;padding:17px 0;gap:13px}.need-result{padding:25px;min-height:310px}.need-result h3{font-size:30px}.need-result p{font-size:13px}.round3-cta .lead{font-size:14px}} @media(prefers-reduced-motion:reduce){.night-track i,.benefit-number,.agent-progress i{animation:none!important;transition:none!important}.benefit-row:hover .benefit-number{transform:none}} /* Korean wraps at word boundaries where space allows. */ html[lang=ko] main :is(h1,h2,h3,p){word-break:keep-all;overflow-wrap:break-word} /* Block headline lines already define their breaks; discard source formatting newlines. */ .hero h1:has(.hero-line){white-space:normal} /* Round four — selected E interface, B rack and F engineering visuals. */ .r4-product-stage{position:relative;min-width:0;padding:44px 0 48px;perspective:1400px;scroll-margin-top:110px}.r4-browser-shot{border:1px solid #b6c3d1;border-radius:11px;overflow:hidden;box-shadow:0 35px 50px -20px #191c2055,0 3px 8px #191c2012;background:#e1e9f3;transform:rotateY(-4deg) rotateX(2deg);position:relative}.r4-browser-toolbar{height:40px;display:flex;align-items:center;gap:16px;padding:0 13px;background:linear-gradient(#f7f8fa,#e1e9f3);border-bottom:1px solid #a8b8ca}.r4-browser-toolbar>svg{width:15px;fill:none;stroke:#646b75;stroke-width:1.3}.r4-window-dots{display:flex;gap:5px;flex-shrink:0}.r4-window-dots i{width:7px;height:7px;border:1px solid #8e9aab;border-radius:50%;background:#b3bfce}.r4-window-dots i:nth-child(2){background:#d0d8e2}.r4-window-dots i:nth-child(3){background:#e1e9f3}.r4-address{background:#f3f2efaa;border:1px solid #bac6d5;border-radius:5px;display:flex;gap:7px;align-items:center;justify-content:center;font:9px monospace;color:#646b75;flex:1;padding:4px 6px}.r4-address svg{width:11px;fill:none;stroke:currentColor;stroke-width:1.4}.r4-desktop-shot{height:388px;position:relative;overflow:hidden}.r4-desktop-wallpaper{position:absolute;inset:0;width:100%;height:100%}.r4-os-menu{height:25px;display:flex;gap:14px;align-items:center;padding:0 14px;position:relative;background:#191c2055;backdrop-filter:blur(15px);color:#e1e9f3;font-size:8px}.r4-os-menu time{margin-left:auto}.r4-desktop-folder{position:absolute;right:19px;top:45px;color:#e1e9f3;display:grid;justify-items:center;gap:3px;font-size:8px;text-shadow:0 1px 3px var(--ink)}.r4-desktop-folder svg{width:30px;height:30px;fill:#8cbcf3;stroke:#e1e9f3;stroke-width:.8;filter:drop-shadow(0 3px 5px #191c2033)}.r4-agent-window{position:absolute;top:56px;left:5%;width:83%;border:1px solid #94abc066;border-radius:7px;overflow:hidden;background:#191c20f5;color:#e1e9f3;box-shadow:0 16px 30px #191c2080;backdrop-filter:blur(16px)}.r4-agent-title{height:29px;display:flex;align-items:center;gap:20px;justify-content:space-between;padding:0 11px;background:#2b313a;border-bottom:1px solid #3f4956;font:8px monospace;color:#c4cedb}.r4-agent-title svg{width:12px;fill:none;stroke:currentColor;stroke-width:1.4}.r4-agent-title .r4-window-dots i{width:6px;height:6px;background:#7b8898;border:0}.r4-agent-tabs{display:flex;gap:20px;border-bottom:1px solid #3a4553;height:28px;padding:0 15px;font-size:8px;color:#8998aa}.r4-agent-tabs span{padding-top:7px}.r4-agent-tabs .r4-active{color:#d7e7fa;border-bottom:1px solid var(--blue)}.r4-agent-body{padding:12px 16px 9px;font:9px/1.7 'SFMono-Regular',Consolas,monospace}.r4-shell-command span{color:#8295ad}.r4-shell-command b{font-weight:400;color:var(--blue)}.r4-task-prompt{font-size:9px;color:#d7e0eb;padding:8px 0;border-bottom:1px solid #34404e;margin-bottom:8px}.r4-log-line{display:flex;align-items:start;gap:8px;margin:9px 0;color:#c4d0e0;line-height:1.5}.r4-log-line>svg{width:12px;height:12px;fill:none;stroke:var(--blue);stroke-width:1.5;margin-top:1px;flex-shrink:0}.r4-log-line span small{display:block;font-size:8px;color:#8798ad;margin-top:2px}.r4-log-line em{font-style:normal;font-size:8px;color:#8798ad;margin-left:auto;white-space:nowrap}.r4-current em{color:var(--blue)}.r4-progress-ring{width:10px;height:10px;border:1px solid #52647a;border-top-color:var(--blue);border-radius:50%;margin:2px 2px 0 0;flex-shrink:0}.r4-terminal-prompt{font-size:8px;color:#8b9bb0;border-top:1px solid #34404e;padding-top:8px}.r4-typing-cursor{display:inline-block;width:4px;height:10px;background:var(--blue);vertical-align:middle;margin-left:5px;animation:cursor 1.2s steps(2,start) 6}.r4-agent-footer{padding:6px 11px;border-top:1px solid #3a4553;font-size:7px;display:flex;justify-content:space-between;color:#a6b7cc}.r4-live-dot{display:inline-block;width:5px;height:5px;background:var(--blue);border-radius:50%;margin-right:5px;box-shadow:0 0 0 3px #8cbcf315;flex-shrink:0}.r4-dock{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);border:1px solid #d6e6fa55;border-radius:10px;background:#e1e9f330;backdrop-filter:blur(20px);display:flex;gap:8px;align-items:center;padding:6px 9px;box-shadow:0 5px 10px #191c2040}.r4-dock>span{width:27px;height:27px;border-radius:6px;background:linear-gradient(150deg,#e1e9f3,#8cbcf3);padding:5px;border:1px solid #e1e9f380}.r4-dock>span:nth-child(2){background:var(--ink);color:var(--blue)}.r4-dock svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3}.r4-dock>i{height:25px;width:1px;background:#e1e9f350}.r4-console-footer{display:flex;justify-content:space-between;background:#f3f2ef;padding:9px 12px;font-size:8px;color:var(--blue-deep)}.r4-console-footer .r4-live-dot{background:var(--blue-deep)}.r4-floating-status{position:absolute;z-index:2;display:flex;align-items:center;gap:11px;padding:14px 17px;border:1px solid #f3f2ef;border-radius:9px;background:#f3f2eff0;box-shadow:0 12px 30px #315e921a;backdrop-filter:blur(20px);font-size:11px}.r4-floating-status small{display:block;font-size:8px;color:var(--muted);margin-top:3px}.r4-floating-status>svg{width:24px;fill:none;stroke:var(--blue-deep);stroke-width:1.2}.r4-status-top{top:12px;right:12px;transform:rotate(1deg)}.r4-status-top>.r4-live-dot{margin-left:15px;background:var(--blue-deep)}.r4-status-bottom{bottom:16px;left:-16px;transform:rotate(-1deg)}.r4-status-avatar{width:31px;height:31px;background:var(--blue-pale);border-radius:50%;display:grid;place-items:center}.r4-status-avatar svg{width:19px;fill:none;stroke:var(--blue-deep);stroke-width:1.5} /* E: local product UI, including a compact secondary workload window. */ .mac-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:42px;min-height:650px} .mac-hero .hero-copy{padding-bottom:32px}.mac-hero .hero-copy h1{font-size:clamp(36px,3.65vw,55px);line-height:1.22}.mac-hero .hero-copy .lead{font-size:15px;line-height:1.9}.r4-product-stage{width:100%;padding:55px 0 62px}.r4-product-stage svg{display:block}.r4-product-stage p{margin:0}.r4-agent-window{width:78%;top:52px;left:4%;z-index:2}.r4-agent-body{padding-bottom:12px}.r4-desktop-shot{height:405px}.r4-agent-title{font-size:9px}.r4-agent-body,.r4-task-prompt{font-size:10px}.r4-agent-tabs,.r4-os-menu,.r4-console-footer{font-size:9px}.r4-agent-footer{font-size:8px}.r4-floating-status{font-size:12px;max-width:94%}.r4-floating-status small{font-size:10px}.r4-status-bottom{left:12px;bottom:20px}.r4-status-top{top:12px}.r4-product-stage .r4-dock{bottom:11px}.r4-report-window{position:absolute;right:3%;bottom:55px;width:47%;z-index:3;background:#f3f2ef;border:1px solid #bac6d5;border-radius:7px;box-shadow:0 12px 25px #191c2040;color:var(--ink);font-size:9px;transform:rotate(2deg)}.r4-report-title{padding:10px 12px;border-bottom:1px solid #d0d8e2;font-weight:600}.r4-report-row{display:flex;justify-content:space-between;gap:8px;margin:0 12px;padding:9px 0;border-bottom:1px solid #d0d8e2}.r4-report-row span:last-child{color:var(--blue-deep)}.r4-report-bars{height:31px;padding:8px 12px;display:flex;align-items:end;gap:8px}.r4-report-bars i{height:40%;background:var(--blue);flex:1}.r4-report-bars i:nth-child(2){height:75%}.r4-report-bars i:nth-child(3){height:55%}.r4-report-bars i:nth-child(4){height:100%}.r4-browser-shot{transform:rotateY(-3deg) rotateX(1deg)} /* B: rack media always carries an honest caption outside the image. */ .r4-rack{margin:0;min-width:0}.r4-rack img{display:block;width:100%;height:auto;border-radius:6px}.r4-caption{font-size:10px;line-height:1.65;color:var(--muted);padding-top:12px;text-align:left}.dark .r4-caption{color:#b3bdc9}.r4-rack-grid{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:70px}.r4-rack-grid h2{font-size:clamp(34px,3.4vw,49px);white-space:pre-line}.r4-rack-grid .lead{font-size:15px;line-height:1.95;margin-top:26px}.spotlight-art img{opacity:1;aspect-ratio:1.2;object-fit:cover;object-position:65% center}.spotlight-grid{gap:60px}.spotlight-grid h2{font-size:clamp(38px,3.7vw,54px)}.r4-cover-caption{display:block;font-size:10px;line-height:1.5;padding:8px 12px;background:var(--paper);color:var(--muted)}.blog-card>.r4-cover-caption{margin:-15px 0 18px;padding:0;background:transparent}.article-body img:has(+.r4-cover-caption){margin-bottom:0}.article-body .r4-cover-caption{margin-bottom:30px} /* F: shared engineering language; explicit labels remain HTML/SVG text for localization. */ .r4-blueprint{background:var(--ink);border:1px solid #3e4b5c;border-radius:7px;padding:16px 24px 24px;margin:35px 0}.r4-blueprint .engineering-svg{display:block;width:100%;height:auto;max-height:535px;margin:auto}.r4-blueprint text{fill:#c6d6ea;stroke:none;font-family:Arial,'PingFang SC',sans-serif;font-size:13px}.r4-blueprint .svg-note{fill:#8b9cb2;font-size:12px}.r4-blueprint .diagram-node{transition:stroke .2s,filter .2s}.r4-blueprint .diagram-node.is-active{stroke:var(--blue);filter:drop-shadow(0 0 7px #8cbcf37a)}.r4-blueprint .diagram-node.is-active .mac-geometry path{stroke:var(--blue)}.r4-diagram-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.r4-diagram-controls button{background:transparent;border:1px solid #455367;border-radius:4px;padding:9px 15px;color:#c6d6ea;font:inherit;font-size:12px;cursor:pointer}.r4-diagram-controls button:hover,.r4-diagram-controls button:focus-visible,.r4-diagram-controls button.active{background:#8cbcf317;color:var(--blue);border-color:var(--blue);outline-offset:3px}.r4-diagram-hint{color:#aab8c9;font-size:11px;text-align:center;margin-top:16px}.r4-state-icon{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;display:block;margin:8px auto 15px}.r4-network-figure{margin:0;min-width:0;width:100%}.r4-network-art{position:relative}.r4-network-svg{display:block;width:100%;height:auto;border-radius:7px}.r4-network-labels{position:absolute;inset:0;color:var(--blue-pale);font:11px/1.5 'SFMono-Regular',Consolas,monospace;pointer-events:none}.r4-network-labels>span{position:absolute;transform:translateX(-50%);text-align:center;max-width:30%;white-space:normal}.r4-net-vps{left:23.7%;top:5%}.r4-net-ai{left:50%;top:5%}.r4-net-mac{left:77.6%;top:5%}.r4-net-kr{left:50%;top:48%}.r4-net-browser{left:23%;top:93%}.r4-net-users{left:77.6%;top:93%}.r4-network-hero{padding:24px 0;min-width:0;align-self:center}.r4-network-hero .r4-network-figure{margin-top:5px}.r4-network-hero .hero-terminal{position:relative;right:auto;bottom:auto;margin:-5px 18px 0 auto;width:300px}.r4-network-hero .terminal-body{min-height:105px}.mac-teaser:has(.r4-network-figure){gap:32px;padding-right:30px}.mac-teaser .r4-network-figure{padding:25px 0}.mac-teaser .r4-caption{color:#aab8c9} @media(max-width:1100px){.mac-hero .hero-grid{gap:25px}.r4-rack-grid{gap:40px}.spotlight-grid{gap:35px}.r4-agent-window{width:90%}.r4-report-window{width:50%;bottom:38px}.r4-product-stage .r4-dock{display:none}.r4-network-labels{font-size:9px}} @media(max-width:800px){.mac-hero .hero-grid{gap:28px}.mac-hero .hero-copy h1,html[lang=en] .mac-hero .hero-copy h1,html[lang=ko] .mac-hero .hero-copy h1{font-size:clamp(33px,8.7vw,43px)}.mac-hero .hero-copy{padding-bottom:0}.r4-product-stage{padding:48px 0 62px;margin-top:0;perspective:none}.r4-browser-shot{transform:none}.r4-desktop-shot{height:335px}.r4-floating-status{padding:10px 12px;font-size:11px;gap:8px}.r4-floating-status small{font-size:9px}.r4-status-top{top:0;right:5px;transform:none}.r4-status-bottom{bottom:12px;left:5px;transform:none}.r4-agent-window{top:42px;left:4%;width:92%}.r4-agent-body{font-size:10px;padding:12px}.r4-agent-tabs{gap:18px}.r4-task-prompt{font-size:10px;line-height:1.6}.r4-report-window,.r4-desktop-folder,.r4-os-menu>span:not(:last-child){display:none}.r4-os-menu{font-size:9px;gap:10px}.r4-console-footer{gap:8px;font-size:8px}.r4-browser-toolbar{gap:8px;padding:0 9px}.r4-address{font-size:8px}.r4-agent-title{font-size:8px;gap:8px}.r4-rack-grid{grid-template-columns:1fr;gap:30px}.r4-rack-grid h2{font-size:34px}.spotlight-grid h2{font-size:36px}.spotlight-art img{aspect-ratio:1.3}.r4-blueprint{padding:8px 8px 20px}.r4-blueprint .engineering-svg{margin:0 auto 14px}.r4-diagram-controls{display:grid;grid-template-columns:1fr 1fr;padding:0 10px;gap:8px}.r4-diagram-controls button{font-size:11px;padding:10px 6px}.r4-diagram-hint{font-size:10px;padding:0 10px}.r4-network-hero{padding:22px 0 5px;min-height:0!important}.r4-network-hero .hero-terminal{margin:10px 0 0 auto;width:85%}.r4-network-labels{font-size:8px}.mac-teaser:has(.r4-network-figure){gap:18px;padding-right:0}.mac-teaser .r4-network-figure{width:calc(100% - 40px);margin:0 auto;padding:0 0 22px}.r4-caption{font-size:9px}.r4-rack-grid .lead{font-size:14px}.r4-state-icon{width:38px;height:38px}} @media(prefers-reduced-motion:reduce){.r4-typing-cursor,.r4-blueprint .diagram-node{animation:none!important;transition:none!important}.r4-browser-shot{transform:none}} /* Explicit language selectors override the earlier generic English hero scale. */ @media(min-width:801px){html[lang=en] .mac-hero .hero-copy h1{font-size:clamp(36px,3.05vw,46px);line-height:1.2}html[lang=ko] .mac-hero .hero-copy h1{font-size:clamp(36px,3.45vw,50px);line-height:1.3}} @media(max-width:800px){.r4-blueprint .engineering-svg text{font-size:19px}.r4-blueprint .engineering-svg .svg-note{font-size:16px}.r4-blueprint .engineering-svg>g:last-child{display:none}} /* Keep floating status clear of the browser connection footer. */ .r4-product-stage{padding-bottom:100px}.r4-status-bottom{bottom:18px} @media(max-width:800px){.r4-product-stage{padding-bottom:90px}.r4-status-bottom{bottom:10px}} /* Stack the topology and deployment demo on narrow screens. */ @media(max-width:800px){.r4-network-hero{flex-direction:column;align-items:stretch}.r4-network-hero .r4-network-figure{flex:none;width:100%}.r4-network-hero .hero-terminal{flex:none;width:85%;transform:none}.r4-network-labels{font-size:9px}} @media(max-width:800px){.r4-desktop-shot{height:380px}} /* 首页(线上文案版):长标题字号、网络要点、产品新品标签 */ .hero h1.home-title{font-size:clamp(36px,3.7vw,54px);max-width:none} .net-points{margin-top:30px;border-top:1px solid var(--darkline)} .net-points article{padding:20px 0;border-bottom:1px solid var(--darkline)} .net-points h3{font-size:19px;margin-bottom:8px} .net-points p{font-size:14px} .product-tag{display:inline-block;vertical-align:middle;margin-left:10px;padding:3px 8px;border-radius:3px;background:var(--blue-pale);color:var(--blue-deep);font-size:10px;letter-spacing:.08em;text-transform:uppercase} .core-benefits .section-head .text-link{display:inline-flex} @media(max-width:1100px){.hero h1.home-title{font-size:clamp(34px,4.4vw,46px)}}@media(max-width:800px){.hero h1.home-title{font-size:clamp(32px,9vw,42px)}} html[lang=en] .hero h1.home-title{font-size:clamp(34px,3.3vw,48px)} /* 首页「为什么选择 VPC.KR」:紧凑四列(只作用于首页 #why,Mac 页卖点区不受影响) */ #why{padding:72px 0 24px} #why .section-head{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:34px} #why .section-head h2{font-size:clamp(30px,2.9vw,42px);white-space:nowrap} #why .section-head>div{max-width:520px} #why .section-head p{font-size:14px} #why .benefit-ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} #why .benefit-row{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:0;padding:26px 26px 28px;border-bottom:0;border-right:1px solid var(--line)} #why .benefit-row:first-child{padding-left:0} #why .benefit-row:last-child{border-right:0;padding-right:0} #why .benefit-row>div{order:1} #why .benefit-number{order:0;font-size:13px;line-height:1;margin-bottom:22px;letter-spacing:.04em} #why .benefit-scope{margin-bottom:6px} #why .benefit-row h3{font-size:20px;margin-bottom:12px} #why .benefit-row>p{order:2;font-size:13px;line-height:1.8} #why .benefit-mark{display:none} @media(max-width:1100px){#why .section-head{display:block}#why .section-head h2{white-space:normal}#why .section-head>div{margin-top:18px}#why .benefit-ledger{grid-template-columns:repeat(2,minmax(0,1fr))}#why .benefit-row{border-bottom:1px solid var(--line)}#why .benefit-row:nth-child(2n){border-right:0;padding-right:0}#why .benefit-row:nth-child(2n+1){padding-left:0}} @media(max-width:560px){#why{padding:52px 0}#why .benefit-ledger{grid-template-columns:1fr}#why .benefit-row{border-right:0;padding:22px 0}#why .benefit-number{margin-bottom:14px}} /* 首页「全面解决方案」:三张带配图的横排卡片 */ #solutions .section-head{margin-bottom:34px} #solutions .section-head h2{font-size:clamp(30px,2.9vw,42px)} .solution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .solution-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;transition:border-color .2s,box-shadow .2s,transform .2s} .solution-card:hover{border-color:#aebfd3;box-shadow:0 18px 40px #191c2014;transform:translateY(-3px)} .solution-card.featured{border-color:var(--blue-deep);box-shadow:0 18px 40px #315e9222} .solution-media{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--ink)} .solution-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .solution-card:hover .solution-media img{transform:scale(1.04)} .solution-tag{position:absolute;top:12px;right:12px;background:var(--blue);color:var(--ink);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:3px} .solution-body{display:flex;flex-direction:column;flex:1;padding:24px 20px 20px} .solution-body h3{font-size:23px;margin-bottom:12px} .solution-body p{font-size:14px;line-height:1.8;margin-bottom:20px} .solution-body ul{list-style:none;padding:16px 0 0;margin:0 0 24px;border-top:1px solid var(--line);font-size:13px;line-height:2.1;flex:1} .solution-body li:before{content:'✓';margin-right:10px;color:var(--blue-deep);font-weight:700} .solution-body .btn{width:100%;justify-content:space-between} @media(max-width:1100px){.solution-grid{grid-template-columns:1fr 1fr}.solution-card.featured{order:-1;grid-column:1/-1}.solution-card.featured .solution-media{aspect-ratio:21/9}} @media(max-width:700px){.solution-grid{grid-template-columns:1fr}.solution-card.featured .solution-media{aspect-ratio:16/10}} /* 首页产品区(VPS 三型号 + Mac mini),来自 design/landing-redesign/home-products/products.css,类名均为 pd- 前缀 */ /* Products section. Load after site.css; all selectors stay inside pd- classes. */ .pd-section { --pd-dark-line: #3a424d; --pd-light-text: #b8c2cf; padding: 64px 0 88px; background: var(--paper, #f3f2ef); color: var(--ink, #191c20); } .pd-wrap { width: calc(100% - 112px); max-width: 1280px; margin-inline: auto; } .pd-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 40px; } .pd-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 19px; color: var(--blue-deep); font: 11px/1.5 'SFMono-Regular', Consolas, monospace; text-transform: uppercase; letter-spacing: .14em; } .pd-eyebrow::before { content: ''; width: 6px; height: 6px; background: currentColor; } .pd-title { max-width: 760px; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -.055em; line-height: 1.14; text-wrap: balance; } .pd-subtitle { max-width: 340px; flex: 0 1 340px; font-size: 14px; line-height: 1.85; padding-bottom: 3px; } .pd-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: stretch; } .pd-vps, .pd-mac { min-width: 0; border-radius: 6px; overflow: hidden; } .pd-vps { display: flex; flex-direction: column; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); } .pd-vps-head { padding: 28px 34px 27px; } .pd-card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; color: var(--blue); font: 10px/1.5 'SFMono-Regular', Consolas, monospace; letter-spacing: .09em; } .pd-server-icon { flex: 0 0 30px; width: 30px; height: 30px; stroke: currentColor; stroke-width: 1.1; } .pd-card-title { font-size: clamp(26px, 2.5vw, 34px); letter-spacing: -.04em; line-height: 1.25; } .pd-intro { margin-top: 14px; max-width: 610px; color: var(--pd-light-text); font-size: 13px; line-height: 1.85; } .pd-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 34px; border: 1px solid var(--pd-dark-line); border-radius: 4px; } .pd-tab { position: relative; min-width: 0; padding: 17px 16px 18px; border: 0; background: transparent; color: var(--pd-light-text); text-align: left; border-radius: 0; } .pd-tab + .pd-tab { border-left: 1px solid var(--pd-dark-line); } .pd-tab-name { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.025em; } .pd-tab-note { display: block; margin-top: 4px; font-size: 10px; line-height: 1.6; } .pd-tab:hover { background: #26303b; color: var(--paper); } .pd-tab[aria-selected="true"] { background: var(--blue-pale); color: var(--ink); } .pd-tab-indicator { position: absolute; bottom: -1px; left: 16px; right: 16px; height: 2px; background: transparent; } .pd-tab[aria-selected="true"] .pd-tab-indicator { background: var(--blue-deep); } .pd-panels { display: grid; flex: 1; } .pd-panel { min-width: 0; grid-area: 1 / 1; padding: 29px 34px 27px; display: flex; flex-direction: column; } .pd-model-headline { font-size: 22px; line-height: 1.45; letter-spacing: -.035em; font-weight: 400; margin: 0 0 23px; text-wrap: balance; } .pd-details { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 30px; flex: 1; } .pd-metric { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-top: 11px; } .pd-metric-value { font-size: clamp(38px, 4vw, 56px); line-height: 1.1; font-weight: 400; letter-spacing: -.065em; color: var(--blue); white-space: nowrap; } .pd-metric-label { color: var(--pd-light-text); font-size: 11px; margin-top: 10px; line-height: 1.6; } .pd-signal { display: flex; align-items: flex-end; width: 100%; max-width: 180px; height: 30px; gap: 5px; margin-top: 22px; } .pd-signal i { flex: 1; height: 100%; background: var(--blue); opacity: .18; border-top: 1px solid var(--blue); } .pd-signal i:nth-child(3n) { height: 65%; } .pd-signal i:nth-child(3n + 1) { height: 42%; } .pd-signal i:nth-child(n + 8) { opacity: .5; } .pd-specs { list-style: none; margin: 0; padding: 0; font-size: 12px; color: #d9e0e8; line-height: 1.65; align-self: start; } .pd-specs li { padding: 9px 0 9px 17px; border-top: 1px solid var(--pd-dark-line); position: relative; } .pd-specs li::before { content: ''; position: absolute; left: 0; top: 17px; width: 4px; height: 4px; background: var(--blue); } .pd-use { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin-top: 23px; padding: 14px 16px; background: #222930; border-left: 1px solid #5d789a; } .pd-use-label { font-size: 10px; letter-spacing: .05em; color: var(--blue); padding-top: 2px; white-space: nowrap; } .pd-use p { font-size: 12px; line-height: 1.8; color: var(--pd-light-text); } .pd-purchase { margin-top: 25px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pd-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .pd-price-label, .pd-price-unit { font-size: 11px; color: var(--pd-light-text); } .pd-price-value { font-size: 32px; line-height: 1.2; letter-spacing: -.055em; } .pd-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; padding: 12px 19px; min-height: 48px; font-size: 12px; font-weight: 600; line-height: 1.5; border: 1px solid transparent; border-radius: 3px; text-decoration: none; } .pd-button-primary { background: var(--blue); color: var(--ink); flex-shrink: 0; } .pd-button-primary:hover { background: #aecff6; } .pd-arrow { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.3; transition: transform .18s; } .pd-button:hover .pd-arrow { transform: translateX(3px); } .pd-shared { display: flex; gap: 16px 24px; flex-wrap: wrap; border-top: 1px solid var(--pd-dark-line); padding: 18px 34px; font-size: 10px; color: var(--pd-light-text); } .pd-shared span { display: flex; align-items: center; gap: 8px; } .pd-shared span::before { content: ''; width: 5px; height: 5px; border: 1px solid #8cbcf3a6; border-radius: 50%; } .pd-mac { background: #edeeec; border: 1px solid var(--line); display: flex; flex-direction: column; } .pd-mac-figure { position: relative; margin: 0; background: var(--ink); } .pd-mac-image { width: 100%; height: 216px; object-fit: cover; object-position: 48% 42%; } .pd-new { position: absolute; top: 20px; left: 24px; display: inline-flex; align-items: center; gap: 7px; background: var(--blue-pale); color: var(--ink); border-radius: 3px; padding: 5px 10px; font-size: 10px; line-height: 1.6; } .pd-new::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--blue-deep); } .pd-image-caption { padding: 8px 14px; color: #b8c2cf; background: var(--ink); font-size: 9px; line-height: 1.5; text-align: right; } .pd-mac-body { padding: 27px 27px 26px; display: flex; flex-direction: column; flex: 1; } .pd-mac-title { font-size: 27px; line-height: 1.25; letter-spacing: -.045em; text-wrap: balance; } .pd-mac-description { margin-top: 17px; font-size: 12px; line-height: 1.95; } .pd-mac-features { list-style: none; padding: 0; margin: 23px 0 25px; font-size: 11px; line-height: 1.75; } .pd-mac-features li { padding: 11px 0 11px 19px; border-top: 1px solid var(--line); position: relative; } .pd-mac-features li::before { content: ''; position: absolute; left: 1px; top: 17px; width: 7px; height: 4px; transform: rotate(-45deg); border-left: 1px solid var(--blue-deep); border-bottom: 1px solid var(--blue-deep); } .pd-button-secondary { border-color: #b5bec9; margin-top: auto; color: var(--ink); } .pd-button-secondary:hover { background: var(--blue-pale); border-color: var(--blue-deep); } .pd-tab:focus-visible, .pd-panel:focus-visible, .pd-vps .pd-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; z-index: 1; } .pd-panel:focus-visible { outline-offset: -7px; } .pd-mac .pd-button:focus-visible, .pd-language button:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 4px; } /* Review shell only. */ .pd-preview { background: var(--paper); } .pd-language { display: flex; justify-content: flex-end; gap: 3px; width: calc(100% - 112px); max-width: 1280px; margin: 20px auto 0; } .pd-language button { border: 1px solid transparent; background: transparent; min-width: 40px; min-height: 36px; font-size: 11px; color: var(--muted); border-radius: 3px; } .pd-language button[aria-pressed="true"] { color: var(--blue-deep); border-color: var(--line); background: var(--blue-pale); } .pd-language button:hover { color: var(--ink); } @media (max-width: 1100px) and (min-width: 1001px) { .pd-wrap, .pd-language { width: calc(100% - 64px); } .pd-vps-head, .pd-panel { padding-left: 25px; padding-right: 25px; } .pd-tabs { margin-inline: 25px; } .pd-details { gap: 20px; } .pd-metric-value { font-size: 43px; } .pd-mac-body { padding-inline: 22px; } .pd-mac-title { font-size: 24px; } } @media (max-width: 1000px) { .pd-section { padding-top: 45px; } .pd-wrap, .pd-language { width: calc(100% - 64px); } .pd-section-head { gap: 25px; } .pd-subtitle { flex-basis: 260px; } .pd-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .pd-title { font-size: 42px; } .pd-mac { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .pd-mac-figure { display: flex; flex-direction: column; } .pd-mac-image { height: 100%; min-height: 320px; flex: 1; object-position: 30% center; } .pd-mac-body { padding: 30px; } .pd-metric-value { font-size: 56px; } } @media (max-width: 600px) { .pd-section { padding: 33px 0 40px; } .pd-wrap, .pd-language { width: calc(100% - 36px); } .pd-language { margin-top: 12px; } .pd-language button { min-height: 40px; } .pd-section-head { display: block; margin-bottom: 28px; } .pd-eyebrow { margin-bottom: 15px; } .pd-title { font-size: 36px; max-width: 100%; } .pd-subtitle { margin-top: 18px; font-size: 13px; max-width: 310px; } .pd-vps-head { padding: 23px 20px 24px; } .pd-card-kicker { font-size: 9px; margin-bottom: 17px; } .pd-card-title { font-size: 27px; } .pd-intro { font-size: 12px; line-height: 1.9; } .pd-tabs { margin-inline: 14px; } .pd-tab { padding: 15px 10px 16px; } .pd-tab-name { font-size: 14px; white-space: nowrap; } .pd-tab-note { font-size: 9px; min-height: 29px; } .pd-tab-indicator { left: 10px; right: 10px; } .pd-panel { padding: 24px 20px; } .pd-model-headline { font-size: 21px; margin-bottom: 19px; } .pd-details { grid-template-columns: minmax(0, 1fr); gap: 22px; } .pd-metric { padding: 0; position: relative; } .pd-metric-value { font-size: 49px; } .pd-metric-label { font-size: 10px; max-width: 70%; } .pd-signal { position: absolute; width: 75px; right: 0; top: 8px; gap: 3px; } .pd-specs { font-size: 12px; } .pd-specs li { padding-block: 10px; } .pd-use { margin-top: 17px; padding: 13px; gap: 10px; } .pd-use p { font-size: 11px; } .pd-use-label { font-size: 9px; } .pd-purchase { flex-wrap: wrap; gap: 19px; margin-top: 23px; } .pd-price-value { font-size: 33px; } .pd-button-primary { width: 100%; } .pd-button { font-size: 13px; min-height: 49px; } .pd-shared { padding: 17px 20px; gap: 9px 16px; font-size: 9px; } .pd-shared span { gap: 6px; } .pd-mac { display: flex; } .pd-mac-image { height: 226px; min-height: 0; flex: none; object-position: center; } .pd-mac-body { padding: 25px 22px; } .pd-mac-title { font-size: 28px; } .pd-mac-description { font-size: 13px; } .pd-mac-features { font-size: 12px; } .pd-new { left: 20px; } } @media (prefers-reduced-motion: reduce) { .pd-section *, .pd-language button { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .pd-button:hover .pd-arrow { transform: none; } } /* 首页产品区:收紧高度、提升信息密度(只改间距与字号,内容不删) */ #home-products.pd-section{padding:56px 0 60px} #home-products .pd-section-head{margin-bottom:26px} #home-products .pd-eyebrow{margin-bottom:12px} #home-products .pd-title{font-size:clamp(28px,2.6vw,38px)} #home-products .pd-vps-head{padding:22px 30px 18px} #home-products .pd-card-kicker{margin-bottom:8px} #home-products .pd-server-icon{width:24px;height:24px;flex-basis:24px} #home-products .pd-card-title{font-size:clamp(22px,2vw,27px)} #home-products .pd-intro{margin-top:6px} #home-products .pd-tabs{margin:0 30px} #home-products .pd-tab{padding:10px 14px 11px} #home-products .pd-tab-name{font-size:15px} #home-products .pd-tab-note{margin-top:1px} #home-products .pd-panel{padding:18px 30px 18px} #home-products .pd-model-headline{font-size:18px;margin-bottom:12px} #home-products .pd-details{gap:24px} #home-products .pd-metric{padding-top:4px} #home-products .pd-metric-value{font-size:clamp(34px,3.2vw,44px)} #home-products .pd-metric-label{margin-top:6px} #home-products .pd-signal{display:none} #home-products .pd-specs li{padding:6px 0 6px 16px} #home-products .pd-specs li::before{top:14px} #home-products .pd-use{margin-top:14px;padding:9px 14px} #home-products .pd-purchase{margin-top:14px} #home-products .pd-price-value{font-size:28px} #home-products .pd-button{min-height:42px;padding:9px 17px} #home-products .pd-shared{padding:11px 30px} #home-products .pd-mac-image{height:168px} #home-products .pd-new{top:14px;left:16px} #home-products .pd-mac-body{padding:20px 22px 20px} #home-products .pd-mac-title{font-size:23px} #home-products .pd-mac-description{margin-top:9px;line-height:1.85} #home-products .pd-mac-features{margin:14px 0 16px} #home-products .pd-mac-features li{padding:7px 0 7px 19px} #home-products .pd-mac-features li::before{top:13px} @media(max-width:1000px){#home-products .pd-tabs{margin:0 20px}#home-products .pd-vps-head{padding:20px}#home-products .pd-panel{padding:18px 20px}#home-products .pd-shared{padding:11px 20px}} /* ── 导航「产品」两栏:VPS 三种型号 + Mac mini ── */ .dropdown.nav-mega{display:grid;grid-template-columns:1.55fr 1fr;gap:6px;min-width:560px;padding:10px} .nav-mega-col{display:flex;flex-direction:column;min-width:0;padding:6px} .nav-mega-mac{border-left:1px solid #353e4a;padding-left:12px} .nav-mega-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 12px 10px;margin-bottom:4px;border-bottom:1px solid #353e4a;font:11px 'SFMono-Regular',Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--lime)} .nav-mega-head small{font-size:10px;color:#7f8a98;letter-spacing:.04em;text-transform:none} .dropdown.nav-mega a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:4px} .dropdown.nav-mega a strong{font-weight:600;font-size:13px} .dropdown.nav-mega a small{font-size:11px;color:#8f9aa8} .dropdown.nav-mega a:hover small{color:#b9c6d6} .dropdown.nav-mega a.nav-mega-more{flex-direction:row;justify-content:space-between;margin-top:auto;font-size:12px;color:#aeb8c5} .mobile-nav .mobile-group{padding:16px 0 4px;font:10px 'SFMono-Regular',Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)} .mobile-nav a.mobile-sub{padding-left:14px} /* ── 定价页:两大产品族 ── */ .family-jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px} .family-jump a{display:inline-flex;align-items:center;gap:14px;border:1px solid #b9c1cb;border-radius:4px;padding:11px 16px;font-size:13px} .family-jump a .mono{font-size:10px;color:#4e6b92} .family-jump a:hover{border-color:var(--ink);background:#e1e9f3} .family-section{padding:72px 0 40px;scroll-margin-top:90px} .family-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px} .family-head .eyebrow{margin-bottom:16px} .family-head h2{font-size:clamp(30px,3vw,42px)} .family-head>.mono{font-size:11px;color:var(--muted);white-space:nowrap} .family-section .toolbar{margin-bottom:26px;align-items:center} .model-note{font-size:13px;max-width:520px;margin:0} .family-mac{border-top:1px solid var(--line);padding-bottom:88px} .mac-family-card{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#e9e8e4} .mac-family-card figure{margin:0;position:relative;min-height:300px;background:#191c20} .mac-family-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .mac-family-card figcaption{position:absolute;left:14px;bottom:12px;font-size:10px;color:#c9d2dc;background:#191c20b0;padding:3px 8px;border-radius:3px} .mac-family-copy{padding:38px 40px;display:flex;flex-direction:column;justify-content:center} .mac-family-copy>p:first-child{font-size:15px;color:var(--ink);line-height:1.8} .mac-family-copy ul{list-style:none;padding:18px 0;margin:18px 0 0;border-top:1px solid #cfd3d8;font-size:13px;line-height:2.1} .mac-family-copy li:before{content:'✓';margin-right:10px;color:#516a8a} .mac-family-copy .price-note{margin-top:4px} .mac-family-copy .actions{margin-top:22px} @media(max-width:1100px){.dropdown.nav-mega{min-width:500px}} @media(max-width:800px){.family-section{padding:52px 0 30px}.family-head{display:block}.family-head>.mono{display:block;margin-top:12px;white-space:normal}.mac-family-card{grid-template-columns:1fr}.mac-family-card figure{min-height:220px}.mac-family-copy{padding:26px 22px}.family-mac{padding-bottom:60px}} .dropdown.nav-mega{min-width:600px} .nav-mega-head span,.nav-mega-head small{white-space:nowrap} .dropdown.nav-mega a.nav-mega-img{width:auto;padding:0;margin:4px 12px 6px;height:96px;border-radius:4px;overflow:hidden;border:1px solid #353e4a} .nav-mega-img img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s} .nav-mega-img:hover img{opacity:1} @media(max-width:1100px){.dropdown.nav-mega{min-width:540px}} /* ── 定价页:四张型号卡(Mini / Native / AI / Mac mini) ── */ .price-grid.model-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .price .price-from{font-size:12px;letter-spacing:0;color:var(--muted);margin-right:8px;vertical-align:middle} .price-card.targeted{box-shadow:inset 0 0 0 2px #315e92} .price-card.mac-plan{background:var(--ink);color:var(--paper)} .price-card.mac-plan .tag{color:var(--lime)} .price-card.mac-plan .price small,.price-card.mac-plan .price .price-from{color:#a5acb5} .price-card.mac-plan ul{border-top-color:#383e47} .price-card.mac-plan li:before{color:var(--lime)} .price-card.mac-plan.targeted{box-shadow:inset 0 0 0 2px var(--lime)} .pd-mac-price{margin:14px 0 4px} @media(max-width:1100px){.price-grid.model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:800px){.price-grid.model-grid{grid-template-columns:1fr}} /* ── 定价页首屏压缩:笔记本一屏内要能看到价格卡 ── */ .pricing-hero{padding:40px 0 30px} .pricing-hero .eyebrow{margin-bottom:16px} .pricing-hero h1{font-size:clamp(32px,3vw,44px);line-height:1.2} .pricing-hero .lead{font-size:15px;line-height:1.7;margin-top:14px;max-width:720px} .pricing-hero .family-jump{margin-top:20px} .pricing-hero .family-jump a{padding:8px 14px;font-size:12px} .pricing-hero + .family-section{padding-top:36px} .pricing-hero + .family-section .family-head{margin-bottom:20px} .pricing-hero + .family-section .family-head .eyebrow{margin-bottom:10px} .pricing-hero + .family-section .family-head h2{font-size:clamp(26px,2.4vw,34px)} @media(max-width:800px){.pricing-hero{padding:30px 0 24px}.pricing-hero h1{font-size:30px}} /* 定价页首屏:用户觉得 44px 偏小,取中间值 */ .pricing-hero{padding:48px 0 32px} .pricing-hero h1{font-size:clamp(38px,3.7vw,54px);line-height:1.16} .pricing-hero .lead{font-size:16px;margin-top:18px} .pricing-hero .family-jump a{padding:10px 16px;font-size:13px} .pricing-hero + .family-section .family-head h2{font-size:clamp(28px,2.6vw,38px)} @media(max-width:800px){.pricing-hero h1{font-size:34px}} /* ── 首页首屏 hh:品牌方框里的首尔机房(Codex 方案 A,原型 design/landing-redesign/hero-explore/codex3/a.html) ── */ .hh{padding-top:46px} .hh-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:18px;align-items:center;min-height:589px} .hh-copy{position:relative;z-index:1;padding:0 0 30px} .hero h1.hh-title{font-size:49px;font-weight:600;line-height:1.23;letter-spacing:-.045em;max-width:none} .hh-line{display:block} .hh-title em{font-style:normal;color:var(--lime)} .hh-tail{display:block;font-size:.82em;margin-top:8px;letter-spacing:-.035em} .hh .lead{max-width:510px;line-height:1.9;margin-top:25px;font-size:16px} .hh .actions{margin-top:31px} .hh-visual{position:relative;margin:0;min-width:0;width:100%;height:589px;isolation:isolate} .hh-kicker{position:absolute;left:43px;right:23px;top:7px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#aab5c0;font-size:11px;z-index:2} .hh-place{font:10px 'SFMono-Regular',Consolas,monospace;letter-spacing:.16em;white-space:nowrap} .hh-place:before{content:'';display:inline-block;width:5px;height:5px;margin-right:9px;background:var(--lime)} .hh-art{position:absolute;top:10px;left:0;width:100%;height:530px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent),linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 88%,transparent),linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect} .hh-art img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten} .hh-products{position:absolute;left:43px;right:23px;bottom:39px;display:grid;grid-template-columns:1.15fr 1fr;border-top:1px solid #4b535d;padding-top:13px;z-index:2} .hh-products a{display:block;padding-right:15px} .hh-products a+a{border-left:1px solid var(--darkline);padding-left:25px} .hh-products strong{display:block;font-size:14px;font-weight:500;color:#e5e9ed} .hh-products small{display:block;font-size:11px;color:#aab5c0;letter-spacing:.02em;margin-top:3px} .hh-products a:hover strong{color:var(--lime)} .hh-note{position:absolute;bottom:13px;left:43px;right:23px;font-size:9px;color:#929ca7;line-height:1.5} .hh .hero-bottom strong{font-size:15px} html[lang=en] .hero h1.hh-title{font-size:51px} html[lang=ko] .hero h1.hh-title{font-size:46px;line-height:1.3} html[lang=ko] .hh-copy{word-break:keep-all} @media(max-width:1100px){.hero h1.hh-title,html[lang=en] .hero h1.hh-title,html[lang=ko] .hero h1.hh-title{font-size:38px}.hh-grid{grid-template-columns:1fr 1fr;gap:25px}.hh-kicker,.hh-products,.hh-note{left:10px;right:5px}.hh-kicker{font-size:10px}.hh-products a+a{padding-left:15px}} @media(max-width:800px){.hh{padding-top:37px}.hh-grid{display:flex;flex-direction:column;min-height:0;gap:0;align-items:stretch}.hh-copy{padding:0}.hero h1.hh-title{font-size:34px;line-height:1.26;letter-spacing:-.05em}.hh-tail{font-size:.86em;margin-top:4px}.hh .lead{font-size:13px;line-height:1.85;margin-top:20px}.hh .actions{margin-top:24px;gap:17px}.hh-visual{height:414px;margin-top:31px}.hh-kicker{top:0;left:0;right:0;font-size:9px}.hh-place{font-size:8px}.hh-art{top:7px;left:-20px;width:calc(100% + 40px);height:342px}.hh-products{left:0;right:0;bottom:40px;padding-top:12px}.hh-products strong{font-size:13px}.hh-products small{font-size:10px}.hh-products a+a{padding-left:18px}.hh-note{left:0;right:0;bottom:14px;font-size:8px}.hh .hero-bottom strong{font-size:12px;line-height:1.6}.hh .hero-bottom span{font-size:10px}html[lang=en] .hero h1.hh-title{font-size:36px;line-height:1.19}html[lang=ko] .hero h1.hh-title{font-size:33px;line-height:1.28}html[lang=en] .hh-kicker,html[lang=ko] .hh-kicker{font-size:8px}} /* hh 配图:容器与正方形图片同宽,椭圆渐隐到背景,避免左右出现硬边;去掉图下产品标签 */ .hh-art{left:50%;transform:translateX(-50%);width:auto;max-width:100%;aspect-ratio:1/1;height:560px;top:0;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,rgba(0,0,0,.55) 86%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,rgba(0,0,0,.55) 86%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add} .hh-note{bottom:12px;text-align:center} @media(max-width:800px){.hh-visual{height:380px}.hh-art{left:50%;width:auto;height:350px;top:4px}.hh-note{bottom:6px}} /* 首屏配图用 codex3 原版「首尔之门」(codex4 的 Mac mini 版已撤回),保留上面的椭圆渐隐 */ .hh-note{z-index:2} .hh .hero-bottom{position:relative;z-index:3}.hh-grid{position:relative;z-index:1} /* 右下角玻璃方块正好落在椭圆渐隐带里会发暗:叠加一块以方块为中心的局部不透明区域(两层遮罩取并集) */ .hh-art{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,rgba(0,0,0,.55) 86%,transparent 100%),radial-gradient(ellipse 13% 13% at 81% 75%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,rgba(0,0,0,.55) 86%,transparent 100%),radial-gradient(ellipse 13% 13% at 81% 75%,#000 62%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add} /* Mac 页首屏:沿用 mac-spotlight 机柜图区块,标题改为 h1 */ .mac-hero-spot{padding:40px 0 30px} .mac-hero-spot .spotlight-grid{padding:56px 0 30px} .mac-hero-spot h1{font-size:clamp(36px,3.4vw,50px);line-height:1.18} .mac-hero-spot .price-note{margin-top:22px;color:#a5acb5} @media(max-width:800px){.mac-hero-spot{padding:26px 0}.mac-hero-spot .spotlight-grid{padding:30px 0 20px}.mac-hero-spot h1{font-size:34px}} /* ── Mac 页信息密度:收紧留白与标题,五大卖点横排,适用人群收紧,KVM 线稿与桌面演示降高(只作用于 .mac-page) ── */ .mac-page .section{padding:64px 0} .mac-page .section-head{margin-bottom:28px;gap:40px} .mac-page .section-head h2{font-size:clamp(30px,2.9vw,42px)} .mac-page .section-head p{font-size:14px;max-width:460px} .mac-page .eyebrow{margin-bottom:18px} /* 五大卖点:5 列 */ .mac-page #core-benefits .benefit-ledger{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:28px;border-top:0} .mac-page #core-benefits .benefit-row{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:0;padding:22px 0 6px;border-top:1px solid var(--line);border-bottom:0} .mac-page #core-benefits .benefit-row>div{order:1} .mac-page #core-benefits .benefit-number{order:0;font-size:13px;line-height:1;margin-bottom:16px;letter-spacing:.04em} .mac-page #core-benefits .benefit-scope{margin-bottom:6px} .mac-page #core-benefits .benefit-row h3{font-size:18px;line-height:1.45;margin-bottom:10px} .mac-page #core-benefits .benefit-row>p{order:2;font-size:13px;line-height:1.8;max-width:none} .mac-page #core-benefits .benefit-mark{display:none} /* 适用人群 */ .mac-page .audience-list article{grid-template-columns:40px minmax(0,.5fr) minmax(0,1.5fr);gap:20px;padding:15px 0;align-items:center} .mac-page .audience-list .mono{padding-top:0} .mac-page .audience-list h3{font-size:19px} .mac-page .audience-list p{font-size:13px;line-height:1.75} /* 「离开电脑，工作照常」 */ .mac-page .day-contrast{padding:22px 0 30px} /* KVM 线稿与桌面演示 */ .mac-page .r4-blueprint{margin:22px 0;padding:12px 20px 18px} .mac-page .r4-blueprint .engineering-svg{max-height:400px} .mac-page .desktop-area{height:380px} .mac-page .closing-story{padding:64px 0} .mac-page .closing-story h2{font-size:clamp(32px,3.2vw,46px)} @media(max-width:1100px){.mac-page #core-benefits .benefit-ledger{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:800px){.mac-page .section{padding:48px 0}.mac-page #core-benefits .benefit-ledger{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}.mac-page .audience-list article{grid-template-columns:25px minmax(0,1fr);gap:6px 14px;align-items:start}.mac-page .desktop-area{height:320px}.mac-page .closing-story{padding:48px 0}} @media(max-width:560px){.mac-page #core-benefits .benefit-ledger{grid-template-columns:1fr}} /* KVM:宽屏下线稿在左、对比演示在右 */ @media(min-width:1101px){ .mac-page #kvm .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:32px;align-items:start} .mac-page #kvm .wrap>.eyebrow,.mac-page #kvm .wrap>.section-head,.mac-page #kvm .wrap>.demo-caption{grid-column:1/-1} .mac-page #kvm .r4-blueprint{grid-column:1;grid-row:3/span 2;margin:0} .mac-page #kvm .kvm-controls{grid-column:2;grid-row:3;margin:0 0 14px} .mac-page #kvm .kvm-comparison{grid-column:2;grid-row:4;margin:0} .mac-page #kvm .demo-caption{margin-top:18px} } /* ── Mac 页 .mac3:Codex 第三轮方向 A「在首尔就位」(原型 design/landing-redesign/mac-explore/round3/styles.css,只保留 A 用到的规则并加 .mac3 前缀) ── */ .mac3{--ink:#191c20;--paper:#f3f2ef;--blue:#8cbcf3;--deep:#315e92;--pale:#e1e9f3;--muted:#646c74;--line:#d5d8db;--white:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}.mac3{margin:0}.mac3 h1,.mac3 h2,.mac3 h3,.mac3 p,.mac3 figure{margin:0}.mac3 a{color:inherit;text-decoration:none}.mac3 button,.mac3 select{font:inherit;color:inherit}.mac3 button,.mac3 a,.mac3 summary,.mac3 select{-webkit-tap-highlight-color:transparent}.mac3 button,.mac3 summary,.mac3 select{cursor:pointer}.mac3 button{border:0}.mac3 button:focus-visible,.mac3 a:focus-visible,.mac3 summary:focus-visible,.mac3 select:focus-visible{outline:2px solid var(--deep);outline-offset:5px}.mac3 img{display:block;width:100%;height:auto}.mac3 svg{display:block}.mac3 p{line-height:1.8;white-space:pre-line}.mac3 h1,.mac3 h2,.mac3 h3,.mac3 .hero-title{white-space:pre-line}.mac3 h1,.mac3 .hero-title{font-size:66px;line-height:1.23;letter-spacing:-3.5px;font-weight:650}.mac3 h2{font-size:42px;line-height:1.35;letter-spacing:-1.5px;font-weight:600}.mac3 h3{font-size:21px;line-height:1.45;font-weight:600}.mac3 strong{font-weight:600}.mac3 .wrap{max-width:1280px;width:calc(100% - 128px);margin:0 auto}.mac3 .section{padding-top:112px;padding-bottom:112px}.mac3 .eyebrow,.mac3 .mini-label{font-family:"SFMono-Regular",Consolas,monospace}.mac3 .eyebrow{display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:1.3px;line-height:1.8;margin-bottom:28px;font-weight:500}.mac3 .square{display:inline-block;width:6px;height:6px;background:var(--deep);flex-shrink:0}.mac3 .blue{color:var(--deep)}.mac3 .section-intro{font-size:16px;line-height:1.9;color:var(--muted)}.mac3 .fine{font-size:11px!important;line-height:1.9!important;color:var(--muted);font-weight:400}.mac3 .lead{font-size:17px;line-height:1.95;color:var(--muted)}.mac3 .button{display:inline-flex;justify-content:space-between;align-items:center;gap:32px;min-height:54px;padding:16px 24px;background:var(--blue);font-size:14px;font-weight:600;border-radius:3px;transition:background .2s,transform .2s}.mac3 .button:hover{background:#a2c9f6;transform:translateY(-2px)}.mac3 .button>span:last-child:not(:first-child){font-size:23px;line-height:1}.mac3 .dark-button{background:var(--ink);color:white}.mac3 .dark-button:hover{background:var(--deep)}.mac3 .text-link{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:5px;font-size:13px}.mac3 .text-link:hover{color:var(--deep)}.mac3 .actions{display:flex;align-items:center;gap:26px}.mac3 [hidden]{display:none!important}.mac3 .a-hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding-top:75px;padding-bottom:58px;min-height:640px}.mac3 .hero-copy{position:relative;z-index:1}.mac3 .hero-copy .eyebrow{margin-bottom:32px}.mac3 .hero-copy .lead{margin:28px 0 30px}.mac3 .hero-price{display:flex;align-items:baseline;gap:9px;margin-top:27px;color:var(--muted);font-size:11px}.mac3 .hero-price strong{font-size:20px;color:var(--ink)}.mac3 .hero-art{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0}.mac3 .product-photo{position:relative}.mac3 .product-photo img{aspect-ratio:1.5;object-fit:cover}.mac3 .a-hero .product-photo img{aspect-ratio:1.08;object-fit:cover;object-position:48% center;border-radius:180px 180px 4px 4px}.mac3 .product-photo figcaption{font-size:9px;line-height:1.5;color:var(--muted);margin-top:13px;text-align:right}.mac3 .art-label{display:flex;align-items:center;gap:8px;margin-top:22px;font:9px/1.5 monospace;letter-spacing:1.5px;color:var(--muted)}.mac3 .art-label>span:last-child{margin-left:auto}.mac3 .proof-strip{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:27px 0;font-size:12px;font-weight:500}.mac3 .proof-strip i{height:5px;width:5px;background:#9aa8b9;transform:rotate(45deg)}.mac3 .a-apps{display:grid;grid-template-columns:1fr 1.15fr;gap:100px}.mac3 .app-content>.section-intro{margin-bottom:24px}.mac3 .app-row{display:grid;grid-template-columns:85px 1fr 1.3fr 6px;align-items:center;gap:12px;padding:23px 0;border-bottom:1px solid var(--line);font-size:12px}.mac3 .app-row .vendor{color:var(--muted);font-size:11px}.mac3 .app-row strong{font-size:14px}.mac3 .app-row>span[data-zh]{color:var(--muted);font-size:11px}.mac3 .app-dot{height:5px;width:5px;border:1px solid var(--deep);border-radius:50%}.mac3 .tool-note{display:flex;gap:24px;padding:25px 0;align-items:flex-start}.mac3 .tool-note>span{font-size:23px;color:var(--deep)}.mac3 .tool-note strong{font-size:14px}.mac3 .tool-note p{font-size:12px;color:var(--muted);margin-top:5px}.mac3 .network-section{background:var(--pale);padding:90px 0}.mac3 .network-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.mac3 .network-layout .section-intro{margin-top:25px;max-width:430px}.mac3 .location-stamp{display:flex;align-items:center;gap:20px;margin:33px 0 18px}.mac3 .location-stamp>span{border:1px solid #afc1d6;padding:13px 11px;color:var(--deep);font:20px monospace}.mac3 .location-stamp strong{font-size:14px}.mac3 .location-stamp p{font-size:11px;color:var(--muted);margin-top:4px}.mac3 .geo{position:relative;aspect-ratio:600/420;overflow:hidden;min-width:0;color:var(--deep);background:#e1e9f3}.mac3 .geo-grid{position:absolute;inset:0;background-image:linear-gradient(#315e9210 1px,transparent 1px),linear-gradient(90deg,#315e9210 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(ellipse,#000 40%,transparent 73%)}.mac3 .orbit{position:absolute;left:55%;top:41%;border:1px solid #315e9220;border-radius:50%;transform:translate(-50%,-50%);aspect-ratio:1}.mac3 .orbit-1{width:25%}.mac3 .orbit-2{width:53%}.mac3 .orbit-3{width:85%}.mac3 .geo-lines{width:100%;height:100%;position:absolute;inset:0;fill:none;stroke:#7596bb;stroke-width:1;stroke-dasharray:3 4}.mac3 .geo-seoul{position:absolute;left:55%;top:40%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%);background:var(--pale);padding:10px 18px}.mac3 .geo-seoul i{width:10px;height:10px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 7px #315e9215;margin-bottom:12px}.mac3 .geo-seoul strong{font-size:25px;letter-spacing:2px}.mac3 .geo-seoul small{font:9px monospace;letter-spacing:2px;margin-top:5px}.mac3 .geo-city{position:absolute;font-size:11px;display:flex;gap:7px;align-items:center}.mac3 .geo-city:before{content:"";width:5px;height:5px;background:#7995b7;border-radius:50%}.mac3 .tokyo{left:79%;top:48%}.mac3 .shanghai{left:14%;top:46%}.mac3 .hongkong{left:30%;top:72%}.mac3 .singapore{left:44%;top:86%}.mac3 .geo-caption{position:absolute;bottom:4px;left:0;width:100%;text-align:center;font-size:9px;color:#667c95}.mac3 .control-section{background:var(--ink);color:#f3f2ef;padding:96px 0}.mac3 .control-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.mac3 .control-section .eyebrow{color:#a9c8eb}.mac3 .control-section .square{background:var(--blue)}.mac3 .control-section .section-intro{color:#bdc4cc;margin-top:28px}.mac3 .control-section .fine{color:#909ca9;margin-top:22px;max-width:480px}.mac3 .control-interactive{min-width:0}.mac3 .kvm-diagram{padding:36px 30px 22px;border:1px solid #515e6d}.mac3 .diagram-top{display:flex;justify-content:space-between;gap:12px;font:9px monospace;letter-spacing:1px;color:#a9c8eb}.mac3 .diagram-path{display:flex;align-items:center;margin:32px 15px 24px;height:116px}.mac3 .device-outline{width:55px;height:116px;border:1px solid #a2b4c8;border-radius:12px;display:flex;flex-direction:column;align-items:center;padding-top:23px;gap:12px;background:linear-gradient(110deg,#a6b4c321,#a6b4c304);flex-shrink:0}.mac3 .device-outline i{display:block;width:11px;height:3px;background:#aec1d7;border-radius:3px}.mac3 .device-outline b{display:block;width:4px;height:4px;background:var(--blue);margin-top:10px;border-radius:50%}.mac3 .wires{flex:1;display:flex;flex-direction:column;gap:18px}.mac3 .wires span{height:1px;background:#8cbcf380;position:relative}.mac3 .wires span:after{content:"";position:absolute;right:40%;top:-2px;width:5px;height:5px;background:var(--blue)}.mac3 .kvm-box{height:75px;min-width:105px;border:1px solid #9eb8d5;display:flex;align-items:center;justify-content:center;position:relative;background:#8cbcf310;font:18px monospace;letter-spacing:2px}.mac3 .kvm-box i{width:4px;height:4px;background:var(--blue);position:absolute;bottom:8px;right:8px}.mac3 .diagram-caption{text-align:center;font-size:11px;color:#b3c0cf}.mac3 .control-tabs{display:flex;border-bottom:1px solid #515e6d;margin-top:18px}.mac3 .control-tabs button{flex:1;color:#99a9ba;background:transparent;padding:16px 8px;font-size:13px;border-bottom:2px solid transparent}.mac3 .control-tabs button[aria-selected=true]{color:var(--blue);border-color:var(--blue)}.mac3 .control-tabs button:focus-visible{outline-color:var(--blue);outline-offset:-5px}.mac3 .control-panels{font-size:12px;line-height:1.8;min-height:78px;padding-top:17px;color:#c2cad3}.mac3 .operations{display:grid;grid-template-columns:1fr 1.1fr;gap:80px}.mac3 .operation-cards{display:grid;grid-template-columns:1fr 1fr;gap:35px}.mac3 .line-icon{font-size:31px;color:var(--deep);display:block;margin-bottom:28px;font-weight:300}.mac3 .operation-cards h3{font-size:18px}.mac3 .operation-cards p{font-size:13px;color:var(--muted);margin-top:14px}.mac3 .ownership{padding:60px 0;background:#eae9e5}.mac3 .ownership-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.mac3 .ownership-grid article+article{border-left:1px solid var(--line);padding-left:40px}.mac3 .mini-label{font-size:9px;letter-spacing:1.3px;color:var(--deep)}.mac3 .ownership-grid h3{font-size:21px;margin-top:18px;margin-bottom:12px}.mac3 .ownership-grid p{font-size:13px;color:var(--muted)}.mac3 .faq-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:100px}.mac3 .faq details{border-bottom:1px solid var(--line)}.mac3 .faq details:first-child{border-top:1px solid var(--line)}.mac3 .faq summary{display:flex;align-items:center;justify-content:space-between;list-style:none;padding:24px 0;gap:24px;font-size:15px}.mac3 .faq summary::-webkit-details-marker{display:none}.mac3 .faq summary>span:last-child{font-size:22px;font-weight:300;color:var(--deep);transition:transform .2s}.mac3 .faq details[open] summary>span:last-child{transform:rotate(45deg)}.mac3 .faq details p{font-size:13px;color:var(--muted);padding:0 35px 24px 0}.mac3 .consult{padding:80px 0;background:var(--blue)}.mac3 .consult-layout{display:grid;grid-template-columns:1fr 1fr;gap:120px}.mac3 .consult h2{font-size:49px}.mac3 .consult .eyebrow{margin-bottom:22px}.mac3 .consult-layout>div>p{font-size:14px;margin-top:22px}.mac3 .price-panel{border-left:1px solid #315e9240;padding-left:70px}.mac3 .price{display:flex;align-items:baseline;gap:12px}.mac3 .price strong{font-size:66px;letter-spacing:-4px;font-weight:500}.mac3 .price>span{font-size:13px}.mac3 .price-panel>p{margin-top:8px!important}.mac3 .price-panel .button{margin:25px 0 9px;min-width:240px}.mac3 .consult .fine{color:#334c67}.mac3 .price-panel .text-link{margin:12px 0 10px;font-size:12px}@media(min-width:1500px){.mac3 .a-hero{min-height:720px}.mac3 .a-hero .product-photo img{max-height:540px}.mac3 .wrap{max-width:1280px}}@media(max-width:1150px){.mac3 .wrap{width:calc(100% - 72px)}.mac3 h1,.mac3 .hero-title{font-size:54px;letter-spacing:-2px}.mac3 h2{font-size:34px}.mac3 .a-apps,.mac3 .control-layout,.mac3 .faq-layout{gap:55px}.mac3 .network-layout,.mac3 .operations{gap:45px}.mac3 .a-hero{gap:24px}.mac3 .a-hero .actions{gap:18px;flex-wrap:wrap}.mac3 .hero-copy .lead{font-size:15px}.mac3 .consult-layout{gap:70px}.mac3 .price-panel{padding-left:50px}.mac3 .app-row{grid-template-columns:65px 1fr 1.2fr 5px}}@media(max-width:850px){.mac3 .wrap{width:calc(100% - 48px)}.mac3 .section{padding-top:75px;padding-bottom:75px}.mac3 .a-hero{padding-top:55px;padding-bottom:40px;min-height:0}.mac3 .a-hero .product-photo img{aspect-ratio:.8}.mac3 .hero-copy .eyebrow{font-size:8px;letter-spacing:.7px}.mac3 .hero-copy .lead{font-size:14px;white-space:normal}.mac3 h1,.mac3 .hero-title{font-size:43px}.mac3 h2{font-size:30px}.mac3 .hero-copy .actions{gap:20px}.mac3 .proof-strip{font-size:10px}.mac3 .a-apps,.mac3 .operations{grid-template-columns:1fr;gap:35px}.mac3 .a-apps h2{white-space:normal}.mac3 .network-layout{gap:25px;grid-template-columns:1fr 1.1fr}.mac3 .network-layout .section-intro{font-size:14px}.mac3 .control-layout{gap:40px;grid-template-columns:1fr 1fr}.mac3 .control-section h2{font-size:30px}.mac3 .control-section .section-intro{font-size:14px}.mac3 .kvm-diagram{padding:25px 18px 20px}.mac3 .diagram-top{font-size:7px;gap:5px}.mac3 .diagram-path{margin-left:5px;margin-right:5px}.mac3 .kvm-box{min-width:78px}.mac3 .ownership-grid{gap:25px}.mac3 .ownership-grid article+article{padding-left:25px}.mac3 .ownership-grid h3{font-size:18px}.mac3 .faq-layout{gap:35px;grid-template-columns:1fr 1.4fr}.mac3 .faq h2{font-size:30px}.mac3 .consult-layout{gap:40px}.mac3 .consult h2{font-size:38px}.mac3 .price-panel{padding-left:35px}.mac3 .price strong{font-size:55px}}@media(max-width:600px){.mac3 .wrap{width:calc(100% - 40px)}.mac3 .section{padding-top:64px;padding-bottom:64px}.mac3 h1,.mac3 .hero-title{font-size:43px;letter-spacing:-2px;line-height:1.25}.mac3 h2{font-size:31px;letter-spacing:-1px}.mac3 h3{font-size:20px}.mac3 .eyebrow{font-size:9px;letter-spacing:.6px;gap:8px;margin-bottom:23px}.mac3 .lead{font-size:14px}.mac3 .button{font-size:13px;min-height:50px;padding:14px 20px;gap:24px}.mac3 .text-link{font-size:12px}.mac3 .a-hero{grid-template-columns:1fr;padding-top:43px;padding-bottom:28px;gap:32px}.mac3 .hero-copy .eyebrow{font-size:9px;margin-bottom:25px}.mac3 .hero-copy .lead{font-size:14px;margin:22px 0 25px;white-space:pre-line;line-height:1.85}.mac3 .hero-copy .actions{gap:20px;align-items:center}.mac3 .hero-copy .actions .text-link{font-size:10px}.mac3 .hero-price{margin-top:20px;font-size:10px}.mac3 .hero-price strong{font-size:17px}.mac3 .a-hero .product-photo img{aspect-ratio:1.32;border-radius:100px 100px 3px 3px;object-position:center}.mac3 .product-photo figcaption{font-size:8px;margin-top:9px}.mac3 .art-label{font-size:8px;margin-top:13px;letter-spacing:1px}.mac3 .proof-strip{display:grid;grid-template-columns:1fr 1fr;gap:17px 10px;padding:22px 0;font-size:11px}.mac3 .proof-strip i{display:none}.mac3 .proof-strip>span{padding-left:13px;position:relative}.mac3 .proof-strip>span:before{position:absolute;content:"";width:4px;height:4px;background:var(--deep);left:0;top:6px}.mac3 .a-apps{gap:30px}.mac3 .a-apps h2{white-space:pre-line}.mac3 .section-intro{font-size:14px}.mac3 .app-content>.section-intro{font-size:14px;margin-bottom:15px}.mac3 .app-row{grid-template-columns:68px 1fr 5px;gap:8px;padding:20px 0}.mac3 .app-row strong{font-size:14px}.mac3 .app-row>span[data-zh]{grid-column:2;grid-row:2;font-size:11px}.mac3 .app-row .app-dot{grid-column:3;grid-row:1}.mac3 .app-row .vendor{font-size:10px}.mac3 .tool-note{padding:24px 0;gap:17px}.mac3 .fine{font-size:10px!important}.mac3 .network-section{padding:60px 0}.mac3 .network-layout{grid-template-columns:1fr;gap:26px}.mac3 .network-layout .section-intro{margin-top:22px}.mac3 .location-stamp{margin:25px 0 14px}.mac3 .geo{aspect-ratio:1.3;margin:0 -5px}.mac3 .geo-seoul strong{font-size:23px}.mac3 .geo-caption{font-size:8px;bottom:0}.mac3 .geo-seoul small{font-size:8px}.mac3 .geo-city{font-size:10px}.mac3 .control-section{padding:62px 0 48px}.mac3 .control-layout{grid-template-columns:1fr;gap:30px}.mac3 .control-section .section-intro{margin-top:22px}.mac3 .control-section .fine{margin-top:18px}.mac3 .kvm-diagram{padding:25px 22px 21px}.mac3 .diagram-top{font-size:8px}.mac3 .diagram-path{margin:28px 10px 23px}.mac3 .diagram-caption{font-size:10px}.mac3 .control-panels{min-height:72px;font-size:11px}.mac3 .control-tabs button{font-size:12px;padding:15px 8px}.mac3 .operation-cards{grid-template-columns:1fr;gap:27px}.mac3 .operation-cards article{padding:24px 0 0 52px;position:relative;border-top:1px solid var(--line)}.mac3 .operation-cards .line-icon{position:absolute;top:20px;left:0;font-size:29px}.mac3 .operation-cards p{margin-top:12px}.mac3 .ownership{padding:50px 0}.mac3 .ownership-grid{grid-template-columns:1fr;gap:25px}.mac3 .ownership-grid article+article{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}.mac3 .ownership-grid h3{font-size:20px;margin:12px 0 9px}.mac3 .ownership-grid p{font-size:13px}.mac3 .faq-layout{grid-template-columns:1fr;gap:28px}.mac3 .faq summary{font-size:13px;padding:22px 0;gap:15px}.mac3 .faq details p{font-size:12px;padding-right:15px}.mac3 .consult{padding:55px 0}.mac3 .consult-layout{grid-template-columns:1fr;gap:32px}.mac3 .consult h2{font-size:40px}.mac3 .consult-layout>div>p{font-size:13px}.mac3 .price-panel{border-left:0;border-top:1px solid #315e9240;padding-left:0;padding-top:27px}.mac3 .price strong{font-size:61px}.mac3 .price-panel .button{width:100%;margin-top:22px}.mac3 .price-panel .text-link{margin:10px 0}.mac3 html[lang=en] .hero-title,.mac3 html[lang=en] h1{font-size:39px;letter-spacing:-1.8px}.mac3 html[lang=en] h2{font-size:29px}.mac3 html[lang=ko] h1,.mac3 html[lang=ko] .hero-title{font-size:39px;letter-spacing:-1.5px}.mac3 html[lang=en] .hero-copy .actions .text-link{font-size:11px}}@media(prefers-reduced-motion:reduce){.mac3 *:before,.mac3 *:after{animation:none!important;transition:none!important}.mac3 .button:hover{transform:none}} /* .mac3 与站点通用类撞名的修正:.hero-art(站点首屏用 lighten 混合 + 135% 宽)、.eyebrow:before(站点自带小方块,原型自己有 .square) */ .mac3 .hero-art{width:auto;max-width:none;margin-left:0;filter:none;mix-blend-mode:normal} .mac3 .eyebrow:before{display:none} .mac3 .art-label{position:static;border-left:0;padding-left:0;top:auto;right:auto;bottom:auto;left:auto} .mac3 .kvm-diagram{display:block;gap:0;margin-bottom:0;font-size:inherit;flex-wrap:nowrap} .mac3 .price{margin:0;font-size:inherit;line-height:normal;letter-spacing:normal} .mac3 .faq{border-top:0} .mac3 .lead{max-width:none} .mac3 .hero-copy{padding:0} .mac3 p{color:inherit} /* ── Mac 页 .r4:首屏以下五段 + FAQ + 咨询(Codex 第四轮,原型 design/landing-redesign/mac-explore/round4/r4.css;地图点阵由 build-map.py 用 Natural Earth 1:50m 生成) ── */ /* New sections are scoped to .r4; the supplied hero styles stay intact. */ .r4{--r4-line:#cbd2da;--r4-muted:#5e6874} .r4 .r-section{padding:96px 0} .r4 .r-kicker{display:flex;align-items:center;gap:12px;font:11px/1.6 'SFMono-Regular',Consolas,monospace;letter-spacing:1.3px;color:var(--deep);margin-bottom:24px} .r4 .r-kicker b{font-weight:500;border-bottom:1px solid #9fb4cc;padding-bottom:3px} .r4 h2{font-size:44px;line-height:1.3;letter-spacing:-1.8px;font-weight:600;white-space:pre-line} .r4 h3{font-size:23px;line-height:1.45;letter-spacing:-.6px} .r4 p{white-space:normal} .r4 .r-intro{color:var(--r4-muted);font-size:16px;line-height:1.9;max-width:470px} .r4 .r-note{color:var(--r4-muted);font-size:11px;line-height:1.9} .r4 .r-head{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:end;margin-bottom:44px} .r4 .r-head .r-intro{padding-bottom:4px} .r4 .workbench{display:grid;grid-template-columns:1fr 1fr 1.08fr;background:#faf9f6;border:1px solid var(--r4-line)} .r4 .work-lane{padding:32px 30px 27px;min-width:0} .r4 .work-lane+.work-lane{border-left:1px solid var(--r4-line)} .r4 .work-type{font:10px/1.6 monospace;letter-spacing:1.4px;color:var(--deep);display:block;margin-bottom:30px} .r4 .work-lane>p{font-size:13px;color:var(--r4-muted);margin-top:12px;min-height:48px;max-width:290px} .r4 .tool-pair{margin-top:32px} .r4 .tool-pair>div{display:flex;gap:8px;justify-content:space-between;align-items:baseline;padding:13px 0;border-top:1px solid var(--r4-line)} .r4 .tool-pair strong{font-size:16px;font-weight:550;letter-spacing:-.4px} .r4 .tool-pair span{font-size:11px;color:var(--r4-muted)} .r4 .work-code{background:var(--pale)} .r4 .work-code .tool-pair{margin-top:32px} .r4 .environment-line{display:flex;gap:16px;align-items:center;margin:22px 0 15px;color:var(--deep);font-size:12px} .r4 .environment-line:before{content:'';width:19px;height:19px;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-5px)} .r4 .apps-note{max-width:1000px} .r4 .r-network{background:var(--pale);padding:72px 0 64px} .r4 .network-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #bccddd;margin-bottom:34px} .r4 .network-top .r-kicker{margin-bottom:20px} .r4 .location-code{font:11px monospace;letter-spacing:2px;color:var(--deep);margin-bottom:20px} .r4 .region-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:76px;align-items:center} .r4 .region-art{position:relative;min-width:0;align-self:stretch} .r4 .region-word{font-size:clamp(65px,7vw,100px);font-weight:550;letter-spacing:-6px;line-height:1;color:#315e9224;position:absolute;top:0;left:12px;pointer-events:none} .r4 .region-map{width:100%;height:auto;overflow:visible} .r4 .region-map text{font-family:inherit;font-size:13px;fill:var(--deep)} .r4 .region-map .seoul-label{font-size:21px;font-weight:600} .r4 .region-map .map-micro{font:9px monospace;letter-spacing:1px} .r4 .region-copy .r-intro{margin-top:24px} .r4 .region-facts{margin:26px 0 20px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #b8c9dc;padding-top:23px;gap:22px} .r4 .region-facts strong{display:block;font-size:16px;font-weight:600;margin-bottom:6px} .r4 .region-facts p{font-size:12px;color:var(--r4-muted)} .r4 .control-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:42px;align-items:stretch} .r4 .hardware-panel{background:var(--ink);color:var(--paper);padding:30px 34px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} .r4 .hardware-panel:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#a8c3e008 1px,transparent 1px),linear-gradient(90deg,#a8c3e008 1px,transparent 1px);background-size:28px 28px;pointer-events:none} .r4 .hardware-panel>*{position:relative} .r4 .hardware-top{display:flex;justify-content:space-between;align-items:center;font:10px/1.7 monospace;letter-spacing:1.2px;color:#a8bed7;gap:14px} .r4 .hardware-top span:last-child{border:1px solid #4d6075;padding:4px 8px;letter-spacing:0} .r4 .hardware-path{display:flex;align-items:center;min-height:168px;margin:13px 0} .r4 .hardware-node{border:1px solid #8098b1;padding:23px 17px;text-align:center;min-width:106px;background:#252b32} .r4 .hardware-node strong{font-size:18px;font-weight:500;white-space:nowrap} .r4 .hardware-node small{display:block;font-size:10px;color:#a8bed7;margin-top:6px} .r4 .hardware-node:last-child{background:#315e9244;border-color:#8cbcf3} .r4 .hardware-wires{flex:1;display:grid;gap:25px;min-width:90px} .r4 .hardware-wire{border-bottom:1px solid #8cbcf3;position:relative;text-align:center;color:#b8cee6;font-size:10px;padding-bottom:7px;letter-spacing:.5px} .r4 .hardware-wire:after{content:'';position:absolute;right:0;bottom:-3px;width:5px;height:5px;background:#8cbcf3} .r4 .hardware-state{border-top:1px solid #45515f;padding-top:20px;min-height:101px} .r4 .hardware-state strong{font-size:22px;font-weight:500;letter-spacing:-.6px} .r4 .hardware-state p{font-size:12px;color:#aebdcd;margin-top:9px} .r4 .scenario-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--r4-line)} .r4 .scenario{display:grid;grid-template-columns:30px 1fr 20px;gap:18px;align-items:start;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--r4-line);padding:23px 20px;flex:1;transition:background .2s} .r4 .scenario[aria-selected=true]{background:var(--pale)} .r4 .scenario:hover{background:#e1e9f380} .r4 .scenario-number{font:11px/2 monospace;color:var(--deep)} .r4 .scenario strong{display:block;font-size:19px;line-height:1.3;font-weight:600;margin-bottom:9px} .r4 .scenario small{display:block;color:var(--r4-muted);font-size:13px;line-height:1.75} .r4 .scenario-arrow{color:var(--deep);font-size:20px} .r4 .control-note{margin-top:22px;max-width:950px} .r4 .r-operations{padding:0 0 90px} .r4 .operations-block{display:grid;grid-template-columns:1fr 1fr;background:#eae9e4} .r4 .rack-photo{position:relative;min-height:560px;overflow:hidden;margin:0} .r4 .rack-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% center} .r4 .operations-copy{padding:48px 48px 40px} .r4 .operations-copy h2{font-size:37px} .r4 .ops-list{margin-top:32px} .r4 .ops-item{display:grid;grid-template-columns:32px 1fr;gap:18px;border-top:1px solid #c9cecf;padding:23px 0} .r4 .ops-item h3{font-size:18px;letter-spacing:-.4px} .r4 .ops-item p{font-size:13px;color:var(--r4-muted);margin-top:9px} .r4 .ops-symbol{width:28px;height:28px;fill:none;stroke:var(--deep);stroke-width:1.4;margin-top:4px} .r4 .responsibility{border-top:1px solid #c9cecf;padding-top:19px;display:flex;gap:10px 24px;flex-wrap:wrap;font-size:11px;color:var(--deep)} .r4 .r-ownership{padding:0 0 76px} .r4 .ownership-head{display:flex;gap:30px;justify-content:space-between;align-items:baseline;margin-bottom:35px} .r4 .ownership-head .r-kicker{margin-bottom:0} .r4 .ownership-head h2{font-size:29px;letter-spacing:-1px} .r4 .lifecycle{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;list-style:none;margin:0;padding:0} .r4 .lifecycle li{border-top:1px solid #a9b8ca;padding-top:22px;position:relative} .r4 .lifecycle li:before{content:'';position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--deep)} .r4 .phase{display:flex;justify-content:space-between;gap:10px;color:var(--deep);font-size:11px;margin-bottom:23px} .r4 .phase span:last-child{font-family:monospace;letter-spacing:1px} .r4 .lifecycle h3{font-size:21px;margin-bottom:10px} .r4 .lifecycle p{font-size:13px;color:var(--r4-muted);max-width:340px} .r4 .r-faq{border-top:1px solid var(--r4-line);padding:68px 0 76px} .r4 .faq-layout{gap:80px;grid-template-columns:.8fr 1.2fr} .r4 .r-faq h2{font-size:36px} .r4 .r-faq .r-intro{font-size:14px;margin-top:18px;max-width:300px} .r4 .faq details{border-bottom:1px solid var(--r4-line)} .r4 .faq details:first-child{border-top:1px solid var(--r4-line)} .r4 .faq summary{padding:21px 0;min-height:66px} .r4 .faq details p{font-size:13px;color:var(--r4-muted)} .r4 .consult{padding:68px 0} .r4 .consult h2{font-size:47px} .r4 .consult .r-kicker{color:#203e61} .r4 .consult .r-kicker b{border-color:#315e9270} .r4 .consult .fine{font-size:12px!important} .r4 .consult-layout{gap:70px} .r4 .price-panel{padding-left:60px} .r4 .consult-steps{display:flex;align-items:center;gap:12px;font-size:12px;margin-top:26px;color:#274d78;flex-wrap:wrap} .r4 .consult-steps i{font-style:normal} .r4-dialog{max-width:520px;width:calc(100% - 40px);border:1px solid #b8c8da;padding:40px;background:#f3f2ef;color:#191c20;border-radius:4px} .r4-dialog::backdrop{background:#191c20a6;backdrop-filter:blur(4px)} .r4-dialog h2{font-size:30px;line-height:1.4;margin-bottom:16px} .r4-dialog p{font-size:14px;line-height:1.9} .r4-dialog .close{position:absolute;right:13px;top:10px;background:none;border:0;font-size:24px;min-width:36px;min-height:36px} .r4-dialog .actions{margin-top:25px} @media(min-width:851px){.r4 .r-apps{padding-top:82px}} @media(max-width:1100px){ .r4 .r-head{gap:45px}.r4 h2{font-size:37px}.r4 .work-lane{padding:27px 22px}.r4 .work-lane h3{font-size:21px}.r4 .region-layout{gap:38px;grid-template-columns:1.15fr 1fr}.r4 .operations-copy{padding:36px 30px}.r4 .operations-copy h2{font-size:31px}.r4 .control-grid{gap:26px}.r4 .hardware-panel{padding:26px}.r4 .scenario{padding:21px 16px;gap:12px}.r4 .rack-photo{min-height:535px} } @media(max-width:850px){ .r4 .r-section{padding:70px 0}.r4 .r-head{grid-template-columns:1fr;gap:22px;margin-bottom:32px}.r4 .r-intro{max-width:620px;font-size:15px}.r4 h2{font-size:36px}.r4 .workbench{grid-template-columns:1fr 1fr}.r4 .work-code{grid-column:1/-1;border-left:0!important;border-top:1px solid var(--r4-line);display:grid;grid-template-columns:1fr 1fr;column-gap:30px}.r4 .work-code .work-type{grid-column:1/-1;margin-bottom:17px}.r4 .work-code .tool-pair{grid-column:2;grid-row:2/4;margin:0}.r4 .work-type{margin-bottom:20px}.r4 .work-lane>p{min-height:0}.r4 .region-layout{gap:24px;grid-template-columns:1fr 1fr}.r4 .region-facts{grid-template-columns:1fr;gap:14px}.r4 .region-facts strong{margin-bottom:3px}.r4 .region-word{font-size:64px;letter-spacing:-4px}.r4 .control-grid{grid-template-columns:1fr;gap:24px}.r4 .hardware-panel{padding:28px 36px}.r4 .hardware-path{margin:14px 25px}.r4 .scenario-list{display:grid;grid-template-columns:repeat(3,1fr)}.r4 .scenario{grid-template-columns:1fr;gap:8px;padding:20px 16px}.r4 .scenario+.scenario{border-left:1px solid var(--r4-line)}.r4 .scenario-arrow{display:none}.r4 .scenario small{font-size:12px}.r4 .operations-block{grid-template-columns:1fr 1fr}.r4 .operations-copy{padding:32px 24px}.r4 .operations-copy h2{font-size:28px}.r4 .ops-item{gap:12px;grid-template-columns:25px 1fr}.r4 .ops-item h3{font-size:16px}.r4 .rack-photo{min-height:550px}.r4 .r-operations{padding-bottom:65px}.r4 .ownership-head{display:block}.r4 .ownership-head .r-kicker{margin-bottom:18px}.r4 .lifecycle{gap:24px}.r4 .lifecycle h3{font-size:18px}.r4 .phase span:last-child{font-size:9px}.r4 .faq-layout{gap:35px}.r4 .r-faq h2{font-size:29px}.r4 .consult h2{font-size:38px}.r4 .price-panel{padding-left:30px}.r4 .consult-layout{gap:35px} } @media(max-width:600px){ .r4 .r-section{padding:58px 0}.r4 .r-kicker{font-size:10px;letter-spacing:.7px;margin-bottom:20px}.r4 h2{font-size:32px;letter-spacing:-1.2px}.r4 .r-intro{font-size:14px;line-height:1.85}.r4 .r-head{gap:20px;margin-bottom:28px}.r4 .workbench{grid-template-columns:1fr}.r4 .work-lane{padding:25px 24px}.r4 .work-lane+.work-lane{border-left:0;border-top:1px solid var(--r4-line)}.r4 .work-type{margin-bottom:14px;font-size:10px}.r4 .work-lane h3{font-size:23px}.r4 .work-lane>p{font-size:13px;max-width:none}.r4 .tool-pair{margin-top:22px}.r4 .tool-pair strong{font-size:15px}.r4 .tool-pair>div{padding:11px 0}.r4 .work-code{display:block}.r4 .work-code .tool-pair{margin-top:22px}.r4 .environment-line{font-size:11px;gap:12px;align-items:flex-start;line-height:1.8}.r4 .environment-line:before{flex-shrink:0;width:14px}.r4 .r-note{font-size:11px}.r4 .r-network{padding:46px 0 48px}.r4 .location-code{font-size:9px;letter-spacing:1px}.r4 .network-top{margin-bottom:26px;gap:15px}.r4 .network-top .r-kicker{font-size:9px}.r4 .region-layout{grid-template-columns:1fr;gap:16px}.r4 .region-copy{grid-row:1}.r4 .region-copy .r-intro{margin-top:19px}.r4 .region-facts{grid-template-columns:1fr 1fr;gap:20px;margin:22px 0 14px;padding-top:19px}.r4 .region-facts strong{font-size:15px}.r4 .region-facts p{font-size:12px}.r4 .region-art{margin-top:12px}.r4 .region-word{font-size:65px;left:0}.r4 .region-map text{font-size:17px}.r4 .region-map .seoul-label{font-size:26px}.r4 .region-map .map-micro{font-size:12px}.r4 .hardware-panel{padding:24px 20px}.r4 .hardware-top{font-size:9px;gap:8px;letter-spacing:.5px}.r4 .hardware-top span:last-child{padding:4px 6px;font-size:9px}.r4 .hardware-path{margin:14px 0;min-height:150px}.r4 .hardware-node{min-width:83px;padding:21px 9px}.r4 .hardware-node strong{font-size:15px}.r4 .hardware-node small{font-size:9px}.r4 .hardware-wire{font-size:9px}.r4 .hardware-state strong{font-size:21px}.r4 .hardware-state p{font-size:12px}.r4 .scenario-list{display:flex}.r4 .scenario{display:grid;grid-template-columns:22px 1fr 15px;padding:20px 16px;gap:13px}.r4 .scenario+.scenario{border-left:0}.r4 .scenario-arrow{display:block}.r4 .scenario strong{font-size:18px}.r4 .scenario small{font-size:13px}.r4 .control-note{margin-top:18px}.r4 .r-operations{padding-bottom:54px}.r4 .operations-block{grid-template-columns:1fr}.r4 .rack-photo{min-height:0;aspect-ratio:1.18}.r4 .operations-copy{padding:30px 24px}.r4 .operations-copy h2{font-size:30px}.r4 .ops-list{margin-top:25px}.r4 .ops-item{grid-template-columns:28px 1fr;gap:14px;padding:22px 0}.r4 .ops-item h3{font-size:18px}.r4 .responsibility{display:grid;gap:8px;font-size:12px}.r4 .r-ownership{padding-bottom:48px}.r4 .ownership-head{margin-bottom:28px}.r4 .ownership-head h2{font-size:27px;max-width:310px;line-height:1.4}.r4 .lifecycle{grid-template-columns:1fr;gap:0;margin-left:3px}.r4 .lifecycle li{border-top:0;border-left:1px solid #a9b8ca;padding:0 0 29px 26px}.r4 .lifecycle li:last-child{padding-bottom:0;border-color:transparent}.r4 .lifecycle li:before{top:5px;left:-4px}.r4 .phase{justify-content:flex-start;gap:18px;margin-bottom:12px}.r4 .lifecycle h3{font-size:21px;margin-bottom:8px}.r4 .lifecycle p{font-size:13px}.r4 .r-faq{padding:46px 0 52px}.r4 .faq-layout{grid-template-columns:1fr;gap:26px}.r4 .r-faq h2{font-size:30px}.r4 .r-faq .r-intro{margin-top:14px}.r4 .faq summary{font-size:14px;padding:21px 0}.r4 .faq details p{font-size:13px}.r4 .consult{padding:48px 0}.r4 .consult h2{font-size:38px}.r4 .price-panel{padding-left:0}.r4 .consult .fine{font-size:11px!important}.r4 .consult-steps{font-size:11px;gap:10px}.r4-dialog{padding:35px 25px}.prototype-links{gap:12px 20px} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.mac3 .button:hover,.btn:hover{transform:none!important}} /* 地图标签不再垫底色块(会盖住中国东北的陆地点):改用与背景同色的描边做光晕 */ .r4 .region-map text{paint-order:stroke;stroke:#e1e9f3;stroke-width:5px;stroke-linejoin:round} /* ===== Mac 页 01 AI 段 .r5(Codex 第五轮 C 方案,原型 design/landing-redesign/mac-explore/round5/r5-c.html;只取公共 + C 规则) ===== */ .r4 .r5{--r5-line:#cbd2da;--r5-muted:#5e6874;--r5-blue:#315e92;padding:78px 0 68px} .r5 .r5-lead{font-size:16px;line-height:1.9;color:var(--r5-muted);text-wrap:pretty} .r5 .r5-logo{display:block;width:34px;height:34px;flex:0 0 34px;object-fit:contain} .r5 .r5-brand{display:flex;align-items:center;gap:12px;min-width:0;font-size:20px;font-weight:550;letter-spacing:-.4px} .r5 .r5-label{display:block;font:11px/1.8 'SFMono-Regular',Consolas,monospace;color:var(--r5-blue);letter-spacing:1px} .r5 .r5-note{font-size:11px;line-height:1.8;color:var(--r5-muted);margin-top:22px;max-width:1100px} .r5 .r5-customer{font-size:13px;line-height:1.85;color:var(--r5-muted)} /* C: app support + a lasting personal environment. */ .r5 .r5-c-head{display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:end;margin-bottom:35px} .r5 .r5-c-head h2{font-size:41px;line-height:1.35} .r5 .r5-c-head .r5-lead{font-size:15px;max-width:470px;padding-bottom:3px} .r5 .r5-c-board{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--r5-line);background:#faf9f6} .r5 .r5-c-access{padding:31px 34px;min-width:0} .r5 .r5-board-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--r5-line)} .r5 .r5-board-heading h3{font-size:22px} .r5 .r5-board-heading>span{font:10px/1.6 monospace;color:var(--r5-muted);white-space:nowrap} .r5 .r5-c-apps{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;padding:28px 0} .r5 .r5-c-app{display:flex;gap:12px;align-items:center;min-width:0} .r5 .r5-c-app .r5-logo{width:30px;height:30px;flex-basis:30px;color:#344b67} .r5 .r5-c-app strong{display:block;font-size:14px;font-weight:550;line-height:1.6;letter-spacing:-.3px} .r5 .r5-c-app div>span{display:block;font-size:11px;line-height:1.6;color:var(--r5-muted);margin-top:4px} .r5 .r5-app-detail{font-size:12px;color:var(--r5-muted);border-top:1px solid #dee1e4;padding-top:16px;line-height:1.8} .r5 .r5-c-home{padding:33px 36px;background:#e1e9f3;border-left:1px solid var(--r5-line)} .r5 .r5-c-home h3{font-size:26px;line-height:1.5;letter-spacing:-.7px;margin-top:18px} .r5 .r5-persistence{list-style:none;padding:0;margin:25px 0 0;display:grid;gap:11px} .r5 .r5-persistence li{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.7;color:#46596f} .r5 .r5-persistence li>span:first-child{color:#7293b6;font-size:15px} .r5 .r5-c-evidence{display:flex;gap:26px;align-items:baseline;margin-top:23px} .r5 .r5-c-evidence .r5-label{flex-shrink:0} .r5.r5-c>.r5-note{margin-top:13px} @media(max-width:1150px){ .r5 .r5-c-head{gap:35px}.r5 .r5-c-head h2{font-size:35px}.r5 .r5-c-access{padding:28px}.r5 .r5-c-home{padding:30px}.r5 .r5-c-apps{gap:24px 16px} } @media(max-width:850px){ .r4 .r5{padding:64px 0 54px}.r5 .r5-lead{font-size:15px} .r5 .r5-c-head{grid-template-columns:1fr;gap:21px;margin-bottom:29px}.r5 .r5-c-head .r5-lead{max-width:650px}.r5 .r5-c-board{grid-template-columns:1fr}.r5 .r5-c-home{border-left:0;border-top:1px solid var(--r5-line)}.r5 .r5-c-app strong{font-size:15px}.r5 .r5-c-evidence{display:block}.r5 .r5-c-evidence p{margin-top:8px} } @media(max-width:600px){ .r4 .r5{padding:52px 0 45px}.r5 .r5-lead{font-size:14px;line-height:1.85}.r5 .r5-note{font-size:11px;line-height:1.85;margin-top:20px}.r5 .r5-label{font-size:10px;letter-spacing:.6px} .r5 .r5-c-head h2{font-size:30px;line-height:1.45;letter-spacing:-1.2px}.r5 .r5-c-head{gap:18px;margin-bottom:25px}.r5 .r5-c-head .r5-lead{font-size:14px}.r5 .r5-c-access{padding:23px 21px}.r5 .r5-board-heading{gap:12px;padding-bottom:20px;align-items:baseline;flex-wrap:wrap}.r5 .r5-board-heading h3{font-size:20px}.r5 .r5-board-heading>span{font-size:9px}.r5 .r5-c-apps{grid-template-columns:1fr;gap:20px;padding:24px 0}.r5 .r5-c-app{gap:14px}.r5 .r5-c-app .r5-logo{width:28px;height:28px;flex-basis:28px}.r5 .r5-c-app div{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline}.r5 .r5-c-app strong{font-size:14px}.r5 .r5-c-app div>span{margin:0;font-size:10px}.r5 .r5-app-detail{font-size:11px}.r5 .r5-c-home{padding:25px 22px}.r5 .r5-c-home h3{font-size:23px;margin-top:14px}.r5 .r5-persistence{gap:9px;margin-top:20px}.r5 .r5-persistence li{font-size:12px}.r5 .r5-c-evidence{margin-top:22px}.r5 .r5-c-evidence p{font-size:12px}.r5.r5-c>.r5-note{margin-top:19px} } @media(prefers-reduced-motion:reduce){.r5 *,.r5 *::before,.r5 *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ===== Mac 页 03 KVM 段 .r6/.r7(Codex 第六轮 A 版式 + 第七轮文案与图示,原型 design/landing-redesign/mac-explore/round7/r7.html;不含第六轮 B/C 规则) ===== */ /* Round 6: every selector is scoped to the replacement #control.r6 section. */ .r6{--r6-blue:#315e92;--r6-line:#c6d0dc;--r6-muted:#5e6874;--r6-soft:#e1e9f3;--r6-white:#fafaf7} .r6 .r6-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end;margin-bottom:40px} .r6 h2{font-size:44px;line-height:1.3;letter-spacing:-1.8px;font-weight:600} .r6 .r6-lead{font-size:15px;line-height:1.9;color:var(--r6-muted);max-width:470px} .r6 .r6-eyebrow{font-size:11px;font-weight:500;line-height:1.7;letter-spacing:.7px;color:var(--r6-blue)} .r6 .r6-index{font:11px/1.7 'SFMono-Regular',Consolas,monospace;color:var(--r6-blue)} .r6 .r6-body{font-size:14px;line-height:1.9;color:var(--r6-muted)} .r6 .r6-icon{width:28px;height:28px;flex-shrink:0;color:var(--r6-blue)} .r6 .r6-note{font-size:11px;line-height:1.85;color:var(--r6-muted);margin-top:22px} .r6 .r6-bottom-line{display:flex;align-items:center;gap:12px;padding:21px 0 0;color:var(--r6-blue)} .r6 .r6-bottom-line p{font-size:13px;line-height:1.8} .r6 .r6-bottom-line .r6-icon{width:20px;height:20px} /* A: three outcomes, with quiet, non-interactive screen fragments. */ .r6 .r6-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--r6-line);background:var(--r6-white)} .r6 .r6-card{padding:27px 28px 24px;min-width:0;display:flex;flex-direction:column} .r6 .r6-card+.r6-card{border-left:1px solid var(--r6-line)} .r6 .r6-card-top{display:flex;justify-content:space-between;gap:15px;margin-bottom:24px;align-items:baseline} .r6 .r6-card h3{font-size:24px;line-height:1.4;letter-spacing:-.8px;margin-bottom:12px} .r6 .r6-card .r6-body{flex:1} .r6 .r6-vignette{margin-top:30px;min-height:173px;background:#e8eef5;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px 18px 17px;border-radius:3px} .r6 .r6-vignette>.r6-icon{width:32px;height:32px;margin-bottom:18px} .r6 .r6-vignette-1{background:#e1e9f3} .r6 .r6-vignette-2{background:#eeeee8} .r6 .r6-start-track{height:4px;width:112px;background:#cad7e6;border-radius:5px;margin:5px 0 12px;overflow:hidden} .r6 .r6-start-track i{display:block;width:65%;height:100%;background:#7095be;border-radius:5px} .r6 .r6-caption{font-size:11px;line-height:1.7;color:#50657e;text-align:center;margin-top:8px} .r6 .r6-recovery-row{width:100%;max-width:220px;padding:9px 12px;background:#f9fbfd;border:1px solid #c4d1df;border-radius:3px;display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#315e92} .r6 .r6-backup-row{display:flex;align-items:center;gap:6px;font-size:12px;color:#53614d;margin:6px 0} .r6 .r6-backup-row .r6-icon{width:17px;height:17px;color:#53614d} @media(min-width:851px){.r6:lang(en) h2{font-size:38px;letter-spacing:-1.3px}.r6:lang(ko) h2{font-size:37px;letter-spacing:-1.3px}.r6:lang(en) .r6-card h3{font-size:22px}.r6:lang(ko) .r6-card h3{font-size:23px}.r6:lang(en) .r6-scene h3,.r6:lang(ko) .r6-scene h3{font-size:26px}.r6:lang(ko){word-break:keep-all;overflow-wrap:break-word}} @media(max-width:1100px){.r6 .r6-heading{gap:35px}.r6 h2{font-size:38px}.r6 .r6-card{padding:24px 20px}.r6 .r6-card h3{font-size:22px}.r6 .r6-editorial{gap:55px}.r6 .r6-scene{padding:28px}.r6 .r6-scene-content{gap:22px}.r6 .r6-scene h3{font-size:25px}.r6 .r6-picker{padding:26px 20px}.r6 .r6-choice{font-size:14px}} @media(max-width:850px){.r6 .r6-heading{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.r6 .r6-lead{max-width:620px}.r6 .r6-cards{grid-template-columns:1fr}.r6 .r6-card{display:grid;grid-template-columns:1.2fr 1fr;column-gap:28px;padding:26px}.r6 .r6-card+.r6-card{border-left:0;border-top:1px solid var(--r6-line)}.r6 .r6-card-top{grid-column:1;grid-row:1;margin-bottom:15px}.r6 .r6-card h3{grid-column:1;grid-row:2}.r6 .r6-card .r6-body{grid-column:1;grid-row:3}.r6 .r6-vignette{grid-column:2;grid-row:1/4;margin:0;min-height:170px}.r6.r6-enhanced .r6-experience{grid-template-columns:1fr}.r6 .r6-picker{border-right:0;border-bottom:1px solid var(--r6-line);padding:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.r6 .r6-picker>.r6-eyebrow{grid-column:1/-1;margin-bottom:5px}.r6 .r6-choice{grid-template-columns:1fr;gap:5px;padding:13px 10px;border:1px solid var(--r6-line);align-content:start}.r6 .r6-choice-arrow{display:none}.r6 .r6-picker-hint{grid-column:1/-1;margin-top:5px}.r6 .r6-scene{min-height:335px}.r6 .r6-editorial{grid-template-columns:1fr 1fr;gap:35px}.r6 .r6-editorial h2{font-size:32px}.r6 .r6-autonomy{padding:25px}.r6 .r6-outcome h3{font-size:22px}.r6 .r6-autonomy strong{font-size:22px}} @media(max-width:600px){ .r6.r6{padding:52px 0 48px}.r6 .r-kicker{font-size:10px;letter-spacing:.6px;margin-bottom:22px}.r6 h2{font-size:31px;line-height:1.45;letter-spacing:-1.2px}.r6 .r6-lead{font-size:14px;line-height:1.9}.r6 .r6-heading{gap:18px;margin-bottom:27px}.r6 .r6-body{font-size:13px;line-height:1.85}.r6 .r6-note{font-size:10px;line-height:1.85;margin-top:20px}.r6 .r6-eyebrow{font-size:10px;letter-spacing:.3px}.r6 .r6-bottom-line{padding-top:18px;align-items:flex-start;gap:9px}.r6 .r6-bottom-line p{font-size:12px}.r6 .r6-bottom-line .r6-icon{margin-top:2px;width:18px;height:18px} .r6 .r6-card{display:block;padding:24px 22px}.r6 .r6-card-top{margin-bottom:14px}.r6 .r6-card h3{font-size:23px;margin-bottom:10px}.r6 .r6-vignette{margin-top:20px;min-height:128px;padding:18px 16px 14px}.r6 .r6-vignette>.r6-icon{width:26px;height:26px;margin-bottom:10px}.r6 .r6-caption{font-size:10px}.r6 .r6-recovery-row{max-width:215px;padding:7px 11px;font-size:11px}.r6 .r6-backup-row{font-size:11px} .r6 .r6-picker{padding:17px 14px;gap:7px}.r6 .r6-choice{font-size:12px;line-height:1.6;padding:11px 8px}.r6 .r6-choice .r6-index{font-size:10px}.r6 .r6-picker-hint{font-size:10px;margin-top:4px}.r6 .r6-scene{padding:24px 22px;min-height:450px}.r6 .r6-scene-label{margin-bottom:20px;font-size:10px}.r6 .r6-scene-content{grid-template-columns:1fr;gap:23px}.r6 .r6-scene h3{font-size:26px;line-height:1.45;margin-bottom:13px}.r6 .r6-scene-art{min-height:130px;padding:17px}.r6 .r6-scene-art>.r6-icon{width:30px;height:30px;margin-bottom:10px}.r6 .r6-scene-art strong{font-size:14px}.r6 .r6-scene-art>span{margin-top:6px;font-size:10px} .r6 .r6-editorial{grid-template-columns:1fr;gap:30px}.r6 .r6-editorial h2{font-size:32px;line-height:1.45}.r6 .r6-statement>.r6-lead{margin-top:18px}.r6 .r6-autonomy{padding:24px;margin-top:25px;max-width:none}.r6 .r6-autonomy strong{font-size:23px;margin-top:14px}.r6 .r6-autonomy p{font-size:12px;max-width:250px;margin-top:13px}.r6 .r6-autonomy>.r6-icon{width:72px;height:72px;top:34px;right:24px}.r6 .r6-outcome{padding:22px 0 24px}.r6 .r6-outcome h3{font-size:22px;margin-bottom:10px}.r6 .r6-outcome-meta{margin-bottom:11px}.r6.r6-c>.r6-note{margin-top:23px} .r6:lang(en) h2,.r6:lang(en) .r6-editorial h2{font-size:29px;letter-spacing:-.9px}.r6:lang(ko) h2,.r6:lang(ko) .r6-editorial h2{font-size:29px;letter-spacing:-1px}.r6:lang(ko){word-break:keep-all;overflow-wrap:break-word}.r6:lang(en) .r6-choice,.r6:lang(ko) .r6-choice{font-size:11px}.r6:lang(en) .r6-scene h3,.r6:lang(ko) .r6-scene h3{font-size:24px} } @media(prefers-reduced-motion:reduce){.r6 *,.r6 *::before,.r6 *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* Round 7: quiet additions to the selected Round 6 A layout. */ .r7 .r6-card h3{font-size:23px;letter-spacing:-.8px} .r7 .r6-vignette{min-height:173px;padding:23px 16px 20px} .r7 .r6-vignette-1{background:#e9ede8} .r7 .r6-vignette-1>.r6-icon{color:#59715c} .r7 .r6-vignette-2{background:#e1e9f3} .r7 .r7-status-row{display:flex;justify-content:center;align-items:center;gap:9px;max-width:100%;min-height:36px;padding:8px 13px;border:1px solid #c4d1df;border-radius:3px;background:#f9fbfd;color:#315e92;font-size:12px;line-height:1.6;text-align:center} .r7 .r7-signal{flex-shrink:0;width:5px;height:5px;border-radius:50%;background:#6485ab;box-shadow:0 0 0 3px #6485ab15} .r7 .r7-recovery{border-color:#cbd5ca;background:#f9fbf7;color:#53664f;gap:12px} .r7 .r7-arrow{opacity:.65} .r7 .r7-power{background:transparent;border-color:transparent;padding-inline:0;gap:16px} .r7 .r7-power-cycle{display:flex;align-items:center;gap:4px;flex-shrink:0} .r7 .r7-power-cycle i{width:4px;height:4px;border-radius:50%;background:#aebed1} .r7 .r7-power-cycle i:last-child{width:6px;height:6px;background:#5077a3;box-shadow:0 0 0 3px #5077a315} .r7 .r6-caption{margin-top:10px} .r7:lang(en) .r6-card h3{font-size:22px;letter-spacing:-.5px} .r7:lang(ko){word-break:keep-all;overflow-wrap:break-word} .r7:lang(ko) .r6-card h3{font-size:22px} @media(min-width:851px){ .r7:lang(en) .r6-card h3,.r7:lang(ko) .r6-card h3{min-height:2.8em} } @media(min-width:851px) and (max-width:1100px){ .r7 .r6-card h3{min-height:2.8em} .r7 .r7-status-row{font-size:11px;padding-inline:9px;gap:7px} } @media(max-width:600px){ .r7 .r6-card{padding:24px 22px} .r7 .r6-card h3{font-size:22px;letter-spacing:-.7px} .r7 .r6-vignette{min-height:139px;padding:17px 12px 16px} .r7 .r7-status-row{font-size:11px;min-height:33px;padding:7px 10px} .r7 .r6-caption{font-size:10px;margin-top:8px} .r7:lang(en) .r6-card h3,.r7:lang(ko) .r6-card h3{font-size:22px} .r7:lang(en) .r6-eyebrow{letter-spacing:0} } @media(prefers-reduced-motion:reduce){ .r7 *,.r7 *::before,.r7 *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ===== Mac 页 04 运维段降高(11/8 用户:高度小一些)。原高度由机柜图 min-height 撑开 ===== */ .r4 .r-operations{padding-bottom:72px} .r4 .rack-photo{min-height:440px} .r4 .operations-copy{padding:38px 46px 30px} .r4 .operations-copy h2{font-size:34px} .r4 .ops-list{margin-top:22px} .r4 .ops-item{padding:18px 0} @media(max-width:1100px){.r4 .rack-photo{min-height:430px}.r4 .operations-copy{padding:30px 28px}} @media(max-width:850px){.r4 .rack-photo{min-height:400px}.r4 .r-operations{padding-bottom:56px}} @media(max-width:600px){.r4 .rack-photo{min-height:0;aspect-ratio:1.4}.r4 .r-operations{padding-bottom:48px}} /* ===== Mac 页首屏 .r8(Codex 第八轮 A「首尔硬件坐标」,原型 design/landing-redesign/mac-explore/round8/r8-a.html;不含 B 方案规则) ===== */ .r8{--r8-line:#bdcbd8;--r8-blue:#315e92;position:relative;padding-bottom:12px} .r8 .a-hero{grid-template-columns:1.05fr 1fr;gap:58px;min-height:0;padding-top:55px;padding-bottom:44px;align-items:center} .r8 .r8-copy{min-width:0} .r8 .r8-eyebrow{display:flex;align-items:center;gap:12px;font:10px/1.7 ui-monospace,SFMono-Regular,monospace;letter-spacing:1px;color:#52677b;margin-bottom:27px;flex-wrap:wrap} .r8 .r8-eyebrow i{width:7px;height:7px;background:#315e92} .r8 .r8-eyebrow>span:last-child{border-left:1px solid #aebcca;padding-left:12px;letter-spacing:.5px} .r8 h1{font-size:clamp(36px,3.4vw,49px);line-height:1.32;letter-spacing:-1.8px;font-weight:650;text-wrap:balance} .r8 h1>span{display:block} .r8 .r8-blue{color:var(--r8-blue)} .r8 .r8-lead{font-size:15px;line-height:1.95;color:#59636e;margin:23px 0 22px;max-width:510px;text-wrap:pretty;white-space:normal} .r8 .r8-ai{margin:0 0 26px;padding-left:14px;border-left:2px solid #9cbce0} .r8 .r8-ai small{display:block;font-size:10px;letter-spacing:1px;color:#677888;margin-bottom:10px} .r8 .r8-ai>div{display:flex;flex-wrap:wrap;gap:12px 23px;font-size:15px;font-weight:550;letter-spacing:-.3px;color:#334454} .r8 .r8-convert{display:flex;align-items:center;gap:26px} .r8 .r8-convert .button{min-width:174px;border-radius:2px;min-height:52px;padding:14px 20px} .r8 .r8-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;max-width:190px;font-size:11px;color:#5c6874} .r8 .r8-price>span:first-child{font-size:29px;line-height:1.2;color:#1c2936;font-weight:600;letter-spacing:-1px} .r8 .r8-price small{flex-basis:100%;font-size:10px;margin-top:2px} .r8 .r8-note{font-size:10px;line-height:1.7;color:#6b7781;margin-top:18px;text-wrap:pretty;white-space:normal} .r8 .r8-visual{position:relative;min-width:0;padding:0 15px;background:linear-gradient(90deg,#315e9212 1px,transparent 1px) 0 0/24px 24px,linear-gradient(#315e9212 1px,transparent 1px) 0 0/24px 24px;background-color:#e8edf0;border:1px solid var(--r8-line)} .r8 .r8-frame-top,.r8 .r8-frame-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;font:9px/1.5 ui-monospace,SFMono-Regular,monospace;letter-spacing:1px;color:#3d5975} .r8 .r8-frame-top{padding-top:17px} .r8 .r8-frame-bottom{background:#e8edf0} .r8 .r8-photo{position:relative;border:1px solid #9caab6} .r8 .r8-photo img{width:100%;height:412px;object-fit:cover;object-position:50% 50%;border-radius:0} .r8 .r8-photo:before,.r8 .r8-photo:after{content:"";position:absolute;width:19px;height:19px;border-color:#c9e3ff;z-index:1;pointer-events:none} .r8 .r8-photo:before{top:9px;left:9px;border-left:2px solid;border-top:2px solid;color:#c9e3ff} .r8 .r8-photo:after{bottom:9px;right:9px;border-right:2px solid;border-bottom:2px solid;color:#c9e3ff} .r8 .r8-corner{position:absolute;left:-12px;top:0;bottom:0;width:5px;background:repeating-linear-gradient(to bottom,#829ab3 0 1px,transparent 1px 12px)} .r8 .proof-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:24px 0 26px;align-items:start;border-top:1px solid var(--r8-line);border-bottom:1px solid var(--r8-line)} .r8 .proof-strip article{padding:0 23px;border-left:1px solid #cdd5dd;min-width:0} .r8 .proof-strip article:first-child{padding-left:0;border-left:0} .r8 .proof-strip article:last-child{padding-right:0} .r8 .r8-proof-top{display:flex;gap:10px;align-items:baseline;margin-bottom:9px} .r8 .r8-proof-top>span{font:9px/1.5 monospace;color:#6585a7} .r8 .proof-strip h3{font-size:14px;line-height:1.4;letter-spacing:0} .r8 .proof-strip p{font-size:11px;font-weight:400;line-height:1.8;color:#66717c;white-space:normal;text-wrap:pretty} @media(min-width:1500px){.r8 .a-hero{min-height:0}} @media(prefers-reduced-motion:reduce){.r8 .button{transition:none}.r8 .button:hover{transform:none}} @media(max-width:1150px){.r8 .a-hero{gap:30px}.r8 h1{font-size:37px}.r8 .r8-photo img{height:390px}.r8 .r8-convert{gap:18px}.r8 .proof-strip article{padding:0 16px}} @media(max-width:900px){.r8 .a-hero{grid-template-columns:1fr 1fr;gap:24px;padding-top:38px}.r8 h1{font-size:32px}.r8 .r8-lead{font-size:14px}.r8 .r8-convert{flex-wrap:wrap;gap:16px}.r8 .r8-photo img{height:390px}.r8 .proof-strip{grid-template-columns:1fr 1fr;gap:24px}.r8 .proof-strip article:nth-child(3){padding-left:0;border-left:0}} @media(max-width:600px){.r8 .a-hero{grid-template-columns:1fr;gap:30px;padding-top:33px;padding-bottom:26px}.r8 h1{font-size:33px;line-height:1.35;letter-spacing:-1.2px}.r8 .r8-eyebrow{font-size:9px;gap:9px;margin-bottom:22px;letter-spacing:.5px}.r8 .r8-eyebrow>span:last-child{padding-left:9px}.r8 .r8-lead{margin:18px 0 20px;font-size:14px;line-height:1.9}.r8 .r8-ai{margin-bottom:23px}.r8 .r8-ai>div{font-size:14px;gap:19px}.r8 .r8-convert{flex-wrap:nowrap;gap:20px}.r8 .r8-convert .button{min-width:158px;gap:15px;font-size:12px;padding:14px 16px}.r8 .r8-price{font-size:10px;max-width:160px}.r8 .r8-price>span:first-child{font-size:26px}.r8 .r8-note{margin-top:16px;font-size:10px}.r8 .r8-visual{padding:0 11px}.r8 .r8-photo img{height:292px}.r8 .r8-frame-top,.r8 .r8-frame-bottom{font-size:8px;padding:12px 0;letter-spacing:.7px}.r8 .proof-strip{gap:22px 0;padding:22px 0}.r8 .proof-strip article{padding:0 14px}.r8 .proof-strip article:nth-child(even){padding-right:0}.r8 .proof-strip h3{font-size:13px}.r8 .r8-proof-top{gap:7px}.r8 .proof-strip p{font-size:11px}} /* 05 使用周期正文避免单字孤行 */ .r4 .lifecycle p{text-wrap:pretty} /* ===== 首页网络板块 .hn(真实点阵地图深色版,原型 design/landing-redesign/home-network/hn.html;地图 build-map-dark.py 由 Natural Earth 1:50m 生成) ===== */ /* Home network — inherits the site's dark palette. No global overrides. */ .hn { --hn-muted: #a5acb5; padding: 76px 0 72px; background: var(--ink); color: var(--paper); } .hn .hn-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--darkline); } .hn .hn-kicker, .hn .hn-code { font: 11px/1.6 'SFMono-Regular', Consolas, monospace; letter-spacing: .15em; color: var(--blue); } .hn .hn-kicker { display: flex; align-items: center; gap: 12px; } .hn .hn-kicker i { width: 6px; height: 6px; background: currentColor; } .hn .hn-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 68px; align-items: center; padding-top: 34px; } .hn .hn-art, .hn .hn-copy { min-width: 0; } .hn .hn-map { display: block; width: 100%; height: auto; overflow: visible; } .hn .hn-word { font: 550 92px/1 Arial, sans-serif; letter-spacing: -6px; fill: var(--blue); opacity: .09; } .hn .hn-coast { stroke: var(--blue); opacity: .29; } .hn .hn-dots { fill: var(--blue); opacity: .46; } .hn .hn-arcs { fill: none; stroke: var(--blue); stroke-width: 1.25; stroke-dasharray: 3 5; opacity: .8; } .hn .hn-city { fill: var(--blue); } .hn .hn-label { fill: var(--blue); font: 13px Arial, 'PingFang SC', 'Apple SD Gothic Neo', sans-serif; paint-order: stroke fill; stroke: var(--ink); stroke-width: 3px; stroke-linejoin: round; } .hn .hn-seoul-label { font-size: 22px; font-weight: 600; } .hn .hn-micro { fill: var(--blue); font: 9px monospace; letter-spacing: 1.3px; } .hn .hn-seoul-ring { fill: var(--blue); fill-opacity: .09; stroke: var(--blue); stroke-opacity: .24; } .hn .hn-seoul-dot { fill: var(--blue); stroke: var(--ink); stroke-width: 2; } .hn .hn-heading { white-space: normal; font-size: clamp(32px, 3vw, 44px); line-height: 1.35; letter-spacing: -.045em; font-weight: 600; } .hn .hn-heading span { display: block; } .hn .hn-intro { margin-top: 25px; font-size: 15px; line-height: 1.95; color: var(--hn-muted); text-wrap: pretty; } .hn .hn-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; border-top: 1px solid var(--darkline); margin-top: 26px; padding-top: 23px; } .hn .hn-facts h3 { font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; } .hn .hn-facts p { margin-top: 8px; font-size: 12px; line-height: 1.85; color: var(--hn-muted); } .hn .hn-link { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; margin-top: 25px; border-bottom: 1px solid var(--blue); color: var(--blue); font-size: 13px; } .hn .hn-link:hover { color: var(--paper); border-color: var(--paper); } .hn .hn-link:focus-visible { outline-color: var(--blue); } @media (max-width: 1100px) { .hn .hn-layout { gap: 36px; grid-template-columns: 1.15fr 1fr; } .hn .hn-heading { font-size: 32px; } } @media (max-width: 760px) { .hn { padding: 48px 0 44px; } .hn .wrap { width: calc(100% - 40px); } .hn .hn-top { padding-bottom: 18px; } .hn .hn-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 28px; } .hn .hn-copy { grid-row: 1; } .hn .hn-heading { font-size: clamp(28px, 7.7vw, 40px); line-height: 1.4; } .hn .hn-intro { margin-top: 19px; font-size: 14px; line-height: 1.9; } .hn .hn-facts { gap: 20px; margin-top: 23px; padding-top: 19px; } .hn .hn-facts h3 { font-size: 15px; } .hn .hn-link { margin-top: 18px; } .hn .hn-label { font-size: 21px; stroke-width: 4px; } .hn .hn-seoul-label { font-size: 29px; } .hn .hn-micro { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .hn .hn-link { transition: none; } } /* 导航 Mac 栏:「查看详情」放在图片上方,不贴底 */ .dropdown.nav-mega a.nav-mega-more.nav-mega-detail{margin-top:2px} .dropdown.nav-mega .nav-mega-mac a.nav-mega-img{margin-bottom:12px} /* 顶部导航 Mac mini 单列 + NEW 标签(解决方案已移出顶部导航) */ .nav-badge{display:inline-block;margin-left:6px;padding:2px 5px 1px;border-radius:3px;background:var(--blue);color:#13161b;font:600 9px/1.2 'SFMono-Regular',Consolas,monospace;letter-spacing:.06em;font-style:normal;vertical-align:2px} .nav-link.nav-mac{display:inline-flex;align-items:center} .mobile-group .nav-badge{vertical-align:1px} /* 首页网络板块降高(11/8 用户:高度小一点):地图限高约 380px,收紧上下留白 */ @media (min-width: 761px){ .hn{padding:56px 0 52px} .hn .hn-layout{grid-template-columns:1fr 1fr;padding-top:26px;align-items:center} .hn .hn-map{max-width:540px} } /* ===== 全站按钮 A「收紧与统一」(Codex 评审,原型 design/landing-redesign/buttons/review.html;11/8 用户选 A) ===== */ /* VPC.KR · A / 收紧与统一 Append this file OR proposal-b.css after site.css; never append both. CSS only: preserves links, Alpine attributes, DOM order and container widths. */ .btn, .mac3 .button, .pd-button { box-sizing: border-box; justify-content: center; gap: 12px; min-height: 48px; max-width: 100%; padding: 12px 18px; border-radius: 4px; font-weight: 600; line-height: 1.4; text-align: center; /* No fixed height / nowrap: longer translations can grow vertically. */ overflow-wrap: anywhere; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .btn:hover, .mac3 .button:hover, .pd-button:hover { transform: none; } .btn:not(.ghost):not(.lime) { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--paper); } .btn.lime, .mac3 .button, .pd-button-primary { background: var(--blue); color: var(--ink); border-color: transparent; } .mac3 .dark-button { background: var(--ink); color: var(--paper); } .btn.ghost, .pd-button-secondary { background: transparent; color: inherit; border-color: #909ba8; } .dark .btn.ghost { border-color: #7d8998; } /* Fixed geometry, 1.8px stroke; no font-dependent arrow / inherited line box. */ .btn::after, .mac3 .button > span[aria-hidden="true"]:last-child { content: ""; display: block; width: 18px; height: 18px; flex: 0 0 18px; font-size: 0; line-height: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat; } .pd-button .pd-arrow { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.8; transition: none; } .pd-button:hover .pd-arrow { transform: none; } .nav-right .btn { min-height: 40px; padding: 8px 14px; gap: 10px; font-size: 12px; line-height: 1.4; } .nav-right .btn::after { width: 16px; height: 16px; flex-basis: 16px; } .hero .btn { min-height: 52px; padding: 14px 22px; } .solution-body .btn { justify-content: center; } #home-products .pd-button { min-height: 44px; padding: 10px 17px; } .r8 .r8-convert .button { gap: 12px; border-radius: 4px; } /* Retain .price-card's stretch and .price-panel's min-width / mobile width. */ .text-link, .mac3 .text-link, .hn .hn-link { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; padding-block: 8px; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; line-height: 1.5; transition: color 160ms ease, text-decoration-color 160ms ease; } .text-link:hover, .hn .hn-link:hover { gap: 12px; } /* Neutralize inherited hover on touch; intentional hover only below. */ .btn.lime:hover, .mac3 .button:hover, .pd-button-primary:hover { background: var(--blue); } .btn:not(.ghost):not(.lime):hover { background: var(--blue-deep); } .mac3 .dark-button:hover { background: var(--ink); } .btn.ghost:hover, .pd-button-secondary:hover { background: transparent; border-color: #909ba8; } .dark .btn.ghost:hover { border-color: #7d8998; } .mac3 .text-link:hover { color: inherit; } @media (hover: hover) and (pointer: fine) { .btn.lime:hover, .mac3 .button:hover, .pd-button-primary:hover { background: #accff7; border-color: var(--blue-deep); } .btn:not(.ghost):not(.lime):hover { background: #244b78; border-color: #244b78; } .mac3 .dark-button:hover { background: var(--blue-deep); } .btn.ghost:hover, .pd-button-secondary:hover { background: var(--blue-pale); color: var(--ink); border-color: var(--blue-deep); } .dark .btn.ghost:hover { background: #315e9233; color: var(--paper); border-color: var(--blue); } .text-link:hover, .mac3 .text-link:hover { color: var(--blue-deep); text-decoration-thickness: 2px; } .dark .text-link:hover, .mac3 .control-section .text-link:hover, .workflow-controls .text-link:hover, .hn .hn-link:hover { color: var(--blue); text-decoration-thickness: 2px; } } /* Dual ring remains visible on paper, blue and ink. No layout displacement. */ .btn:focus-visible, .mac3 .button:focus-visible, .text-link:focus-visible, .mac3 .text-link:focus-visible, .hn .hn-link:focus-visible, .pd-button:focus-visible, .pd-vps .pd-button:focus-visible, .pd-mac .pd-button:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); } .btn:active, .mac3 .button:active, .pd-button:active { transform: none; box-shadow: inset 0 0 0 2px #191c2030; } .btn:disabled, .mac3 button.button:disabled, button.pd-button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } /* Existing aria-selected/active logic is retained: touch size and focus only. */ .route-controls button, .tabs button, .mac3 .control-tabs button, .pricing-hero .family-jump a, .family-jump a { min-height: 44px; } .route-controls button:focus-visible, .tabs button:focus-visible, .mac3 .control-tabs button:focus-visible, .family-jump a:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); } @media (max-width: 600px) { .btn { padding-inline: 16px; } .hero .btn { padding-inline: 18px; } .r8 .r8-convert .button { gap: 12px; padding-inline: 16px; } .mac3 .price-panel .button { min-width: min(240px, 100%); } .mac3 .hero-copy .actions .text-link { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .btn, .btn::after, .mac3 .button, .pd-button, .pd-button .pd-arrow, .text-link, .mac3 .text-link, .hn .hn-link { transition: none; animation: none; } } @media (forced-colors: active) { .btn, .mac3 .button, .pd-button { border: 1px solid ButtonText; } .btn::after, .mac3 .button > span[aria-hidden="true"]:last-child { background: ButtonText; } }