/* Vaultline / a tactile hardware workbench.
   Silver #eef0f5, paper #f8f9fc, ink #282439, iris #6545bd,
   lilac #e4daf6, blue #c6d7ee. Onest is retained for display and UI.
   One illustrated object leads; motion explains selection and state changes. */
:root{--motion-ease:cubic-bezier(.2,.75,.25,1);--motion-time:260ms}
.hero{grid-template-columns:1fr 1.07fr;column-gap:24px;padding-top:48px;padding-bottom:24px;background:#e9e4f2;box-shadow:inset 0 1px 0 #fff,0 12px 40px #38314b0a}
.hero:before{inset:0 0 0 48%;background-image:linear-gradient(#bcb1ce30 1px,transparent 1px),linear-gradient(90deg,#bcb1ce30 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,#000 30%)}
.hero h1{font-weight:550;letter-spacing:-.065em;line-height:1.02}
.hero-copy>p:not(.hero-kicker){font-size:15px;max-width:365px;color:#554c63}
.hero-kicker{margin-bottom:25px}.hero-symbol{color:#6545bd}
.hero-stage{margin:0 -20px 0 -28px;padding-top:20px;align-self:start}
.hero .hardware-label{left:auto;right:30px;top:0;background:transparent;box-shadow:none;border:0;padding:0;backdrop-filter:none;font-weight:500;font-size:12px}
.hardware-label small{font-size:11px;margin-left:14px;color:#726582}
.rack-art{height:400px;max-height:none;overflow:visible}
.hero .server-module{transition:translate 620ms var(--motion-ease),opacity 420ms ease;transform-box:view-box}
.hero[data-layer=cpu] .rack-top{translate:0 -24px}.hero[data-layer=cpu] .rack-middle,.hero[data-layer=cpu] .rack-bottom{opacity:.56}
.hero[data-layer=memory] .rack-top{translate:0 -40px;opacity:.45}.hero[data-layer=memory] .rack-middle{translate:32px -6px;opacity:1}.hero[data-layer=memory] .rack-bottom{opacity:.5}
.hero[data-layer=storage] .rack-top{translate:0 -48px;opacity:.4}.hero[data-layer=storage] .rack-middle{translate:0 -23px;opacity:.5}.hero[data-layer=storage] .rack-bottom{translate:32px 8px;opacity:1}
.hardware-controls{display:flex;gap:6px;padding:5px;margin:0 36px 12px;background:#d5cbe4;border:1px solid #c5b7d9;border-radius:var(--radius-card);box-shadow:inset 0 2px 3px #5445650a}
.hardware-controls button{position:relative;flex:1;min-width:0;min-height:57px;background:transparent;border:1px solid transparent;border-radius:var(--radius-control);padding:7px 8px;font:inherit;font-size:15px;font-weight:600;color:#5b4b70;cursor:pointer;transition:background var(--motion-time),box-shadow var(--motion-time),color var(--motion-time)}
.hardware-controls button span{display:block;font-size:10px;font-weight:400;margin-top:2px}
.hardware-controls button[aria-pressed=true]{background:#fff;border-color:#fff;color:#342545;box-shadow:0 3px 6px #48355c1c}
.hardware-controls button:focus-visible{outline:3px solid #6545bd;outline-offset:2px}
.hero-caption{margin:0 36px;background:transparent;box-shadow:none;border:0;border-radius:0;padding:10px 0;min-height:87px;align-items:start}
.hero-caption .caption-icon{display:none}.hero-caption strong{font-size:14px;line-height:1.4}.hero-caption div>span{font-size:12px;line-height:1.55;max-width:380px;color:#685c77;margin-top:5px}
.hero-bottom{margin-top:24px;border-color:#cbbfd9;padding-top:19px}.hero-regions{gap:18px}
.service-navigation{gap:12px;border:0;margin-top:22px;margin-bottom:64px}
.service-navigation a,.service-navigation a:first-child{padding:22px 20px 22px;border:1px solid #d8d9e4!important;border-radius:var(--radius-card);min-height:160px;background:#fff;box-shadow:0 3px 0 #e9e8ef}
.service-navigation a:before{content:'';display:block;width:36px;height:29px;margin-bottom:24px;border:1.5px solid #8e7ca6;border-radius:var(--radius-badge);background:repeating-linear-gradient(0deg,transparent 0 6px,#8e7ca645 6px 8px);box-shadow:5px 5px 0 #e8e0f0}
.service-navigation a[data-service-link=gpu]:before{width:29px;height:29px;border:5px double #ad866a;border-radius:var(--radius-badge);background:#eadbd0;box-shadow:5px 5px 0 #f1e8e1}
.service-navigation a[data-service-link=metal]:before{width:21px;height:35px;background:repeating-linear-gradient(0deg,#dce4ed 0 8px,#758ca3 8px 10px);border-color:#758ca3;box-shadow:5px 5px 0 #e3eaf2;margin-bottom:18px}
.service-navigation a[data-service-link=storage]:before{border-radius:50% / 25%;border-color:#789e9c;background:repeating-linear-gradient(0deg,#e0eeed 0 8px,#a4c1be 8px 10px);box-shadow:5px 5px 0 #e5f0ef}
.service-navigation strong{font-size:17px;letter-spacing:-.03em}.service-navigation span{font-size:11px;margin-top:6px}.service-navigation svg{top:25px;right:21px;transition:translate var(--motion-time) var(--motion-ease)}
.service-navigation a:is(:hover,:focus-visible){background:#f5f2fa;border-color:#b6a5cc!important}.service-navigation a:is(:hover,:focus-visible)>svg{translate:4px 0}
#hetznerCatalog .provider-catalog{background:#fff;border-color:#d6c9e4;box-shadow:0 5px 0 #ebe5f2;overflow:hidden}
#hetznerCatalog .provider-intro{align-items:center}#hetznerCatalog .provider-intro>p{max-width:650px;line-height:1.8;color:#63556f}
#hetznerStatus{padding:18px 20px;border-radius:var(--radius-control);background:#ede7f6;color:#604a77;font-size:13px;line-height:1.7}
#hetznerCatalog .provider-row{border-radius:var(--radius-control);background:#f8f7fb;margin:10px 0;padding:22px;border:1px solid #e5ddeb}
#hetznerCatalog .provider-row h4{font-size:23px;font-weight:550;letter-spacing:-.035em}
#hetznerCatalog .provider-price>strong{font-size:29px;letter-spacing:-.04em}
.offer-guide-tabs button{transition:background var(--motion-time),color var(--motion-time),box-shadow var(--motion-time)}
.offer-row>button,.provider-select,.config-nav button{transition:background 180ms,box-shadow 180ms,translate 180ms}
.offer-row>button:active,.provider-select:active,.config-nav button:not(:disabled):active{translate:0 2px}
.config-price-main strong{display:inline-block;font-variant-numeric:tabular-nums}.config-variants button{transition:background 180ms,color 180ms}
.config-choice:focus-within{background:#f8f4fc;border-radius:var(--radius-control)}.config-choice select:focus-visible{outline:3px solid #b09bd3;outline-offset:2px}
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=off]) dialog[open]{animation:panel-arrive 240ms var(--motion-ease)}
 html:not([data-motion=off]) .drawer:not([hidden]){animation:drawer-arrive 280ms var(--motion-ease)}
 html:not([data-motion=off]) .drawer-backdrop:not([hidden]){animation:backdrop-arrive 220ms ease}
}
@keyframes panel-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes drawer-arrive{from{opacity:.4;translate:30px 0}to{opacity:1;translate:0 0}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:1000px){.hero{padding:38px 30px 24px;column-gap:16px}.hero h1{font-size:60px}.hero-copy>p:not(.hero-kicker){font-size:13px}.hero-stage{margin:0 -12px 0 -20px}.rack-art{height:330px}.hardware-controls,.hero-caption{margin-left:20px;margin-right:20px}.hero .hardware-label{right:20px}.hero-caption div>span{font-size:11px}.service-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}.service-navigation a{min-height:145px}}
@media(max-width:700px){.hero{display:flex;flex-direction:column;padding:28px 23px 22px;min-height:0}.hero-copy{padding:0}.hero h1{font-size:clamp(44px,11vw,66px)}.hero-copy>p:not(.hero-kicker){font-size:14px;max-width:410px}.hero-stage{width:100%;max-width:430px;align-self:center;margin:32px 0 0;padding-top:26px}.rack-art{height:310px}.hero .hardware-label{left:0;right:auto;font-size:11px}.hardware-label small{display:none}.hardware-controls{margin:0 0 10px}.hero-caption{margin:0;min-height:102px}.hero-caption div>span{font-size:12px}.hero-bottom{font-size:10px;width:100%;margin-top:12px}.hero-regions{gap:12px}.service-navigation{gap:10px;margin-top:16px;margin-bottom:40px}.service-navigation a,.service-navigation a:first-child{padding:18px 14px;min-height:170px}.service-navigation strong{font-size:15px;line-height:1.35}.service-navigation span{font-size:11px;line-height:1.5}.service-navigation svg{right:14px;top:23px}.service-navigation a:before{margin-bottom:20px}.service-navigation a[data-service-link=metal]:before{margin-bottom:14px}#hetznerCatalog .provider-row{padding:18px}#hetznerStatus{padding:15px;font-size:12px}}
@media(max-width:370px){.hero{padding-left:18px;padding-right:18px}.rack-art{height:270px}.hero-caption{min-height:120px}.hardware-controls button{font-size:14px}.hardware-controls button span{font-size:9px}.service-navigation strong{font-size:14px}}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}