/* ==========================================================================
   RackForge business theme overrides
   Toned-down, blue/orange, server-business look. Loaded after style.css.
   ========================================================================== */

:root{
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* -- calmer global fx -------------------------------------------------- */
.subtitle.blink:before{
  animation: none;
  box-shadow: 0 0 6px 0px rgba(var(--primary-color-rgb), .6);
}

/* The template ships gradient, uppercase, label-swapping buttons. Replace the
   whole pattern with the quieter pill language used in the hero so every CTA
   on the site speaks the same way. */
a.btn-main,
a.btn-main:active,
a.btn-main:focus,
a.btn-main:visited,
.btn-main,
input[type=button].btn-main{
  height: auto !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  background: var(--primary-color) !important;
  background-image: none !important;
  color: #10070a !important;
  font-family: var(--title-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  box-shadow: none !important;
  border: 1px solid transparent;
  transition: transform .35s var(--ease-out), background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}

a.btn-main.btn-lg{ height: auto !important; padding: 15px 32px !important; font-size: 15px; }

a.btn-main.btn-line,
a.btn-line{
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.16);
}

/* retire the data-hover label swap: it animated margin-top and read as a gimmick */
a.btn-main span{ transition: none !important; margin-top: 0 !important; opacity: 1 !important; }
a.btn-main:hover span{ transform: none; margin-top: 0 !important; opacity: 1 !important; }
a.btn-main:before{ display: none !important; }

@media (hover: hover) and (pointer: fine){
  a.btn-main:hover{ background: #ff7d1f !important; }
  a.btn-main.btn-line:hover,
  a.btn-line:hover{ background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.3); }
  #filters a.selected{ box-shadow: none !important; }
}

a.btn-main:active,
button:active{
  transform: scale(.97);
}

/* -- skip link (keyboard users) ------------------------------------------ */
.skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100000;
  background: var(--primary-color);
  color: #10070a;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 14px;
  transform: translateY(-80px);
  transition: transform .2s var(--ease-out);
}

.skip-link:focus{
  transform: translateY(0);
  color: #10070a;
}

/* -- active nav item ------------------------------------------------------ */
#mainmenu > li > a.menu-item.current{
  color: var(--primary-color);
}

/* -- compact feature row (icon + text, used instead of a second icon grid) */
.rf-feature-row{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.icon-tile-sm{
  width: 44px;
  height: 44px;
  border-radius: 11px;
  flex: 0 0 44px;
  margin-bottom: 0;
}

.icon-tile-sm svg{
  width: 20px;
  height: 20px;
}

.rf-feature-row h4{
  margin-bottom: 4px;
  font-size: 16px;
}

.rf-feature-row p{
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 0;
}

/* -- 404 page -------------------------------------------------------------- */
.rf-404-icon{
  width: 140px;
  margin: 0 auto 28px;
}

/* -- tabular numerals for prices/stats ------------------------------------ */
.server-price span,
.stat-num,
.d-val{
  font-variant-numeric: tabular-nums;
}

/* -- respect reduced-motion preference ----------------------------------- */
@media (prefers-reduced-motion: reduce){
  .r730-layer, .gpu-wrap .r730-layer{ transition: none !important; }
  .gpu-wrap:hover .layer-shroud,
  .gpu-wrap:hover .layer-heatsink,
  .gpu-wrap:hover .layer-die,
  .gpu-wrap:hover .layer-vram,
  .gpu-wrap:hover .layer-pcb,
  .gpu-wrap.is-open .layer-shroud,
  .gpu-wrap.is-open .layer-heatsink,
  .gpu-wrap.is-open .layer-die,
  .gpu-wrap.is-open .layer-vram,
  .gpu-wrap.is-open .layer-pcb{ transform: none !important; }
  .r730-badge{ transition: none !important; opacity: 1 !important; transform: scale(1) !important; }

  .wow, .wow.fadeInUp, .wow.fadeInRight, .wow.fadeIn{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .subtitle.blink:before{ animation: none !important; }

  *{
    scroll-behavior: auto !important;
  }
}

/* -- forge loading animation (replaces the default spinner) ------------- */
#de-loader .lds-roller{ display: none; }

#rf-loader{ width: 220px; }
#rf-loader svg{ width: 100%; height: auto; overflow: visible; display: block; }

.rf-anvil{ fill: var(--bg-dark-3); stroke: rgba(0,0,0,.35); stroke-width: 1; }
.rf-anvil-top, .rf-anvil-horn{ fill: #45577c; }
.rf-anvil-g{ transform-origin: 110px 110px; animation: rf-anvil-hit 1.1s var(--ease-out) infinite; }

/* pivot sits at the end of the handle (the hand); the head starts raised at
   +50deg, accelerates into the anvil, rests on the strike, then lifts again */
.rf-hammer{
  transform-origin: 188px 84px;
  animation: rf-swing 1.1s cubic-bezier(.6,0,.9,.3) infinite;
}
.rf-hammer-head{ fill: #cdd5e0; stroke: rgba(0,0,0,.4); stroke-width: 1.5; }
.rf-hammer-face{ fill: #eef2f7; }
.rf-hammer-handle{ stroke: #8a5a2b; stroke-width: 6; stroke-linecap: round; }

@keyframes rf-swing{
  0%   { transform: rotate(50deg); animation-timing-function: cubic-bezier(.6,0,.9,.3); }
  36%  { transform: rotate(0deg);  animation-timing-function: linear; }
  46%  { transform: rotate(0deg);  animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  100% { transform: rotate(50deg); }
}

@keyframes rf-anvil-hit{
  0%, 35%, 46%, 100% { transform: translateY(0); }
  38% { transform: translateY(1.5px); }
}

/* sparks burst from the contact point at the moment of impact */
.rf-sparks{
  transform-origin: 110px 100px;
  opacity: 0;
  animation: rf-spark-burst 1.1s linear infinite;
}
@keyframes rf-spark-burst{
  0%, 34%  { opacity: 0; transform: scale(.25); }
  37%      { opacity: 1; transform: scale(.7); }
  56%      { opacity: 0; transform: scale(1.35); }
  100%     { opacity: 0; transform: scale(1.35); }
}
.rf-impact{
  transform-origin: 110px 101px;
  opacity: 0;
  animation: rf-impact 1.1s linear infinite;
}
@keyframes rf-impact{
  0%, 35% { opacity: 0; transform: scale(.2); }
  37%     { opacity: .9; transform: scale(1); }
  50%     { opacity: 0; transform: scale(2.2); }
  100%    { opacity: 0; }
}

#rf-loader-track{
  margin-top: 20px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  position: relative;
}
#rf-loader-bar{
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  animation: rf-bar-sweep 1.1s ease-in-out infinite;
  will-change: transform;
}
@keyframes rf-bar-sweep{
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

#rf-loader-label{
  margin-top: 14px;
  text-align: center;
  font-family: var(--title-font);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

@media (prefers-reduced-motion: reduce){
  .rf-hammer, .rf-anvil-g, .rf-sparks, .rf-impact{ animation: none; }
  .rf-hammer{ transform: rotate(0deg); }
  .rf-sparks, .rf-impact{ opacity: 0; }
  #rf-loader-bar{ animation: none; transform: none; width: 100%; }
}

/* -- logo (icon mark + css wordmark) ------------------------------------ */
.rf-logo{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.rf-logo-icon{
  height: 30px !important;
  width: auto !important;
}

.rf-logo-text{
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: lowercase;
  line-height: 1;
}

.rf-logo-text em{
  font-style: normal;
  color: var(--primary-color);
}

footer .rf-logo-icon{
  height: 32px !important;
}

footer .rf-logo-text{
  font-size: 24px;
}

/* -- dark-scheme cleanup for components that don't auto-adapt ----------- */
.dark-scheme .de_testi.light blockquote{
  background: var(--bg-dark-2);
  border: solid 1px rgba(255,255,255,.08);
}

.dark-scheme .de_testi.light blockquote:before{
  color: var(--bg-dark-2);
}

.dark-scheme .subfooter{
  background: var(--bg-dark-1);
  border-top: solid 1px rgba(255,255,255,.06);
}

.dark-scheme .form-control{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}

/* feature icon tiles (replaces stock purple pngs) */
.icon-tile{
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--bg-dark-2);
  border: solid 1px rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.icon-tile svg{
  width: 28px;
  height: 28px;
}

/* -- tech panel background (replaces jarallax stock imagery) ----------- */
.bg-panel-tech{
  position: relative;
  background: linear-gradient(180deg, var(--bg-dark-2) 0%, var(--bg-dark-1) 100%);
  overflow: hidden;
}

.bg-panel-tech:before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--secondary-color-rgb), .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--secondary-color-rgb), .14) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
}

.bg-panel-tech:after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--primary-color-rgb), .20), transparent 45%),
    radial-gradient(circle at 8% 92%, rgba(var(--secondary-color-rgb), .25), transparent 45%);
  pointer-events: none;
}

.bg-panel-tech > .row{
  position: relative;
  z-index: 2;
}

/* subtler variant used behind the hero */
.bg-panel-hero{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 75% 20%, rgba(var(--secondary-color-rgb), .18), transparent 60%), var(--bg-dark-1);
  overflow: hidden;
}

.bg-panel-hero:before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--secondary-color-rgb), .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--secondary-color-rgb), .10) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
}

.hero-title{
  font-size: 52px;
  line-height: 1.15;
  font-weight: 600;
}

.hero-text{
  max-width: 480px;
  color: rgba(255,255,255,.85);
}

@media (max-width: 991px){
  .hero-title{ font-size: 36px; }
}

/* -- shared exploded-view layer bits (GPU diagram, AI hardware page) ---- */
.r730-layer{
  transition: transform .32s var(--ease-out);
}

.r730-badge{
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(.6);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}



/* -- GPU card exploded view (AI hardware page) --------------------------- */
.gpu-wrap{
  position: relative;
  z-index: 2;
  padding: 10px;
}

.gpu-stage{
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.gpu-stage svg{
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

@media (hover: hover) and (pointer: fine){
  .gpu-wrap:hover .layer-shroud{ transform: translate(0px,-96px); }
  .gpu-wrap:hover .layer-heatsink{ transform: translate(60px,-50px); }
  .gpu-wrap:hover .layer-die{ transform: translate(0px,-8px); }
  .gpu-wrap:hover .layer-vram{ transform: translate(-60px,34px); }
  .gpu-wrap:hover .layer-pcb{ transform: translate(0px,72px); }
  .gpu-wrap:hover .r730-layer{ transition: transform .48s var(--ease-in-out); }
  .gpu-wrap:hover .r730-badge{ opacity: 1; transform: scale(1); transition: opacity .25s var(--ease-out) .18s, transform .25s var(--ease-out) .18s; }
}

.gpu-wrap.is-open .layer-shroud{ transform: translate(0px,-96px); }
.gpu-wrap.is-open .layer-heatsink{ transform: translate(60px,-50px); }
.gpu-wrap.is-open .layer-die{ transform: translate(0px,-8px); }
.gpu-wrap.is-open .layer-vram{ transform: translate(-60px,34px); }
.gpu-wrap.is-open .layer-pcb{ transform: translate(0px,72px); }
.gpu-wrap.is-open .r730-layer{ transition: transform .48s var(--ease-in-out); }
.gpu-wrap.is-open .r730-badge{ opacity: 1; transform: scale(1); transition: opacity .25s var(--ease-out) .18s, transform .25s var(--ease-out) .18s; }

.gpu-caption{
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.gpu-caption strong{
  color: #fff;
  font-weight: 600;
}

.gpu-hint{
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  transition: opacity .3s ease;
  pointer-events: none;
}

.gpu-wrap:hover .gpu-hint, .gpu-wrap.is-open .gpu-hint{ opacity: 0; }

.gpu-legend{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  opacity: .7;
  transition: opacity .4s ease;
}

.gpu-wrap:hover .gpu-legend, .gpu-wrap.is-open .gpu-legend{ opacity: 1; }

.gpu-legend li{
  font-size: 13px;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.gpu-legend .num{
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-color);
  color: #0b1220;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

.gpu-legend li:nth-child(even) .num{
  background: var(--tertiary-color);
}

/* -- stat tiles (locations section) -------------------------------------- */
.stat-tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-tile{
  background: rgba(255,255,255,.04);
  border: solid 1px rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 22px 20px;
}

.stat-tile .stat-num{
  font-family: var(--title-font);
  font-size: 34px;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

.stat-tile .stat-label{
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

/* -- server product cards (gallery) --------------------------------------- */
.server-card{
  background: var(--bg-dark-2);
  border: solid 1px rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 26px 20px 22px;
  height: 100%;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine){
  .server-card:hover{
    border-color: rgba(var(--primary-color-rgb), .5);
    transform: translateY(-4px);
  }
}

.server-card .server-icon{
  width: 100%;
  max-width: 140px;
  margin: 0 auto 18px;
  display: block;
}

.server-card .server-badge{
  display: inline-block;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tertiary-color);
  border: solid 1px rgba(var(--tertiary-color-rgb), .4);
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.server-card h3{
  margin-bottom: 4px;
}

.server-card .server-specs{
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 14px;
  min-height: 40px;
}

.server-card .server-price{
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 14px;
}

/* -- form consent checkboxes --------------------------------------------- */
.rf-consent{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  margin-top: 10px;
}

.rf-consent input[type="checkbox"]{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--primary-color);
}

.rf-consent label{
  font-size: 12px;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
}

.rf-consent label a{
  color: var(--tertiary-color);
  text-decoration: underline;
}

/* visible keyboard focus on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn-main:focus-visible{
  outline: 2px solid var(--tertiary-color);
  outline-offset: 2px;
}

/* -- legal page prose ----------------------------------------------------- */
.rf-legal p, .rf-legal li{
  color: rgba(255,255,255,.72);
  line-height: 1.7;
}

.rf-legal h2{
  margin-top: 40px;
  margin-bottom: 14px;
}

.rf-legal h2:first-of-type{
  margin-top: 0;
}

.rf-legal .rf-legal-notice{
  background: rgba(var(--primary-color-rgb), .08);
  border: solid 1px rgba(var(--primary-color-rgb), .3);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 13px;
  color: rgba(255,255,255,.8);
  margin-bottom: 40px;
}

.rf-legal .rf-placeholder{
  color: var(--tertiary-color);
  font-style: italic;
}

.server-card .server-price span{
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--title-font);
}

/* ==========================================================================
   RackForge design layer: technical-drawing language
   ========================================================================== */

/* -- eyebrow badge (replaces the plain .subtitle label) ------------------- */
.rf-eyebrow,
.subtitle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-family: var(--mono-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 22px;
}

.rf-eyebrow i,
.subtitle:before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
  flex: 0 0 6px;
}

/* the vendor stylesheet animates .subtitle.blink:before, keep it inert here */
.subtitle.blink:before{ animation: none; }

/* -- display typography --------------------------------------------------- */
.rf-display{
  font-size: clamp(38px, 4.5vw, 60px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 600;
  margin-bottom: 20px;
  text-wrap: balance;
}

.rf-lead{
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,.68);
  margin-bottom: 30px;
  text-wrap: pretty;
}

h2{ letter-spacing: -.028em; text-wrap: balance; }

/* -- button architecture: pill + nested icon disc ------------------------- */
.rf-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}

.rf-btn{
  --rf-btn-bg: rgba(255,255,255,.05);
  --rf-btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 9px 9px 22px;
  border-radius: 999px;
  background: var(--rf-btn-bg);
  color: var(--rf-btn-fg);
  border: 1px solid rgba(255,255,255,.14);
  font-family: var(--title-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .35s var(--ease-out), background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}

.rf-btn-primary{
  --rf-btn-bg: var(--primary-color);
  --rf-btn-fg: #10070a;
  border-color: transparent;
  font-weight: 600;
}

.rf-btn-ico{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  transition: transform .35s var(--ease-out), background-color .35s var(--ease-out);
}

.rf-btn-ghost .rf-btn-ico{ background: rgba(255,255,255,.09); }

.rf-btn-ico:before{
  content: "";
  width: 9px;
  height: 9px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
}

@media (hover: hover) and (pointer: fine){
  .rf-btn:hover{ border-color: rgba(255,255,255,.3); }
  .rf-btn-ghost:hover{ background: rgba(255,255,255,.09); }
  .rf-btn:hover .rf-btn-ico{ transform: translate(3px, -3px); }
}

.rf-btn:active{ transform: scale(.975); }

/* -- hero spec strip ------------------------------------------------------ */
.rf-spec{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px;
}

.rf-spec > div{
  padding-right: 34px;
  margin-right: 34px;
  border-right: 1px solid rgba(255,255,255,.08);
}

.rf-spec > div:last-child{ border-right: 0; margin-right: 0; padding-right: 0; }

.rf-spec dt{
  font-family: var(--mono-font);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 5px;
}

.rf-spec dd{
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* -- hero shell ----------------------------------------------------------- */
.rf-hero{
  padding-top: 190px;
  padding-bottom: 130px;
}

@media (max-width: 991px){
  .rf-hero{ padding-top: 150px; padding-bottom: 90px; }
}

/* -- nested-enclosure product cards -------------------------------------- */
.server-card{
  padding: 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.032);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
}

/* the illustration plate is the inner core of the enclosure */
.server-card .server-icon{
  max-width: none;
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(2,6,14,.5);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 18px;
}

/* pin price + CTA to the bottom so they line up across cards of any length */
.server-card .server-specs{ min-height: 0; }
.server-card .server-price{ margin-top: auto; }
.server-card .server-badge{ align-self: flex-start; }

.server-card a.btn-main{
  width: 100%;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.14);
}

@media (hover: hover) and (pointer: fine){
  .server-card a.btn-main:hover{
    background: var(--primary-color) !important;
    color: #10070a !important;
    border-color: transparent;
  }
}

.sequence .gallery-item{ display: flex; }
.sequence .gallery-item > .server-card{ width: 100%; }

/* -- section rhythm ------------------------------------------------------- */
section{ padding-top: 110px; padding-bottom: 110px; }

@media (max-width: 991px){
  section{ padding-top: 70px; padding-bottom: 70px; }
}

/* -- fixed grain overlay -------------------------------------------------- */
body:after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Optics pass: organic backdrop, glow, float, marquee
   (soft, hosting-style ambience layered over the technical drawing language)
   ========================================================================== */


/* the blueprint grid now sits on top of the blobs, more faintly */
.bg-panel-hero{ z-index: 1; background: transparent; }
.rf-hero{ background: transparent; }
.rf-hero > .container{ z-index: 2; }


.rf-float{
  animation: rf-bob 6s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

@keyframes rf-bob{
  from{ transform: translateY(0); }
  to{   transform: translateY(-12px); }
}


/* glowing accent on the key headline word */
.text-gradient{ text-shadow: 0 0 34px rgba(var(--primary-color-rgb), .28); }

/* -- rotating headline word ----------------------------------------------- */
.rf-rotate{ display: inline-block; white-space: nowrap; }
.rf-rotate.is-out{ opacity: 0; transform: translateY(.35em); filter: blur(4px); }
.rf-rotate{ transition: opacity .32s var(--ease-out), transform .32s var(--ease-out), filter .32s var(--ease-out); }

/* -- pulse ring on the primary CTA ---------------------------------------- */
.rf-btn-pulse{ position: relative; }
.rf-btn-pulse:after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), .55);
  animation: rf-pulse 2.6s cubic-bezier(.2,.7,.3,1) infinite;
  pointer-events: none;
}

@keyframes rf-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), .5); }
  70%{ box-shadow: 0 0 0 14px rgba(var(--primary-color-rgb), 0); }
  100%{ box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0); }
}

/* -- brand marquee -------------------------------------------------------- */
.rf-marquee-sec{
  padding: 34px 0 30px !important;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
}

.rf-marquee-label{
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--title-font);
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.38);
}

.rf-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.rf-marquee-track{
  display: flex;
  width: max-content;
  gap: 0;
  animation: rf-marquee 60s linear infinite;
  will-change: transform;
}

.rf-marquee-track span{
  padding: 0 46px;
  font-family: var(--title-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.28);
  white-space: nowrap;
  transition: color .3s var(--ease-out);
}

.rf-marquee:hover .rf-marquee-track{ animation-play-state: paused; }
.rf-marquee-track span:hover{ color: rgba(255,255,255,.8); }

@keyframes rf-marquee{
  from{ transform: translateX(0); }
  to{   transform: translateX(-16.6667%); }
}

.rf-marquee-sec .container{ margin: 0 auto; }
.rf-marquee-label{ display: block; width: 100%; }

/* -- centered section header --------------------------------------------- */
.rf-sec-head{
  max-width: 640px;
  margin: 0 auto 54px;
}

.rf-sec-head h2{ margin-bottom: 16px; }
.rf-sec-head p{ color: rgba(255,255,255,.62); margin: 0; }

/* -- icon tiles ----------------------------------------------------------- */
.rf-tile{
  height: 100%;
  padding: 30px 28px 28px;
  border-radius: 22px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .45s var(--ease-out), border-color .45s var(--ease-out), background-color .45s var(--ease-out);
}

.rf-tile-ico{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: rgba(var(--secondary-color-rgb), .12);
  border: 1px solid rgba(var(--tertiary-color-rgb), .22);
  box-shadow: 0 0 28px -6px rgba(var(--secondary-color-rgb), .5);
}

.rf-tile-ico svg{ width: 24px; height: 24px; }

.rf-tile h3{ font-size: 17px; margin-bottom: 8px; letter-spacing: -.01em; }
.rf-tile p{ font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0; }

@media (hover: hover) and (pointer: fine){
  .rf-tile:hover{
    transform: translateY(-5px);
    border-color: rgba(var(--tertiary-color-rgb), .35);
    background: rgba(255,255,255,.045);
  }
}

/* -- big stats row -------------------------------------------------------- */
.rf-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 575px){ .rf-stats{ grid-template-columns: 1fr; } }

.rf-stats b{
  display: block;
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}

.rf-stats b i{ font-style: normal; font-size: .46em; margin-left: 3px; letter-spacing: 0; }

.rf-stats span{
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  letter-spacing: .01em;
}

/* -- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .rf-float, .rf-marquee-track{ animation: none !important; }
  .rf-rotate{ transition: none !important; }
}

/* header right side: the enquiry button, vertically centred ------------- */
.menu_side_area{ display: flex !important; align-items: center; }
.menu_side_area .btn-main{ margin: 0; }

/* -- button helpers: full-width submit, disabled while sending ----------- */
.rf-btn-fullwidth{ width: 100%; justify-content: center; }
.rf-btn:disabled{ opacity: .6; cursor: default; }

/* ==========================================================================
   Hero use-case deck (replaces the archived R730 diagram)
   Five stacked cards, one per audience; the front card follows the rotating
   headline word, hovering or the dots pick one directly.
   ========================================================================== */
.rf-deck{
  position: relative;
  z-index: 2;
  max-width: 460px;
  margin: 0 0 0 auto;
  isolation: isolate;
}

.rf-deck:before{
  content: "";
  position: absolute;
  inset: -10% -14% 6%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 45% 45%, rgba(var(--secondary-color-rgb), .3), transparent 62%),
    radial-gradient(ellipse at 75% 65%, rgba(var(--primary-color-rgb), .14), transparent 60%);
  filter: blur(46px);
  pointer-events: none;
}

.rf-deck-stack{
  position: relative;
  height: 336px;
  margin-top: 70px;
}

.rf-deck-card{
  position: absolute;
  inset: 0 0 auto 0;
  padding: 26px 26px 24px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.025)), #0B1426;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px -30px rgba(0,0,0,.75);
  transform-origin: 100% 0;
  transition: transform .7s var(--ease-out), opacity .6s var(--ease-out), filter .6s var(--ease-out);
  will-change: transform;
}

.rf-deck-card[data-k="0"]{ transform: translate(0,0) scale(1);            opacity: 1;   z-index: 5; filter: none; }
.rf-deck-card[data-k="1"]{ transform: translate(22px,-20px) scale(.955);  opacity: .78; z-index: 4; filter: brightness(.82); pointer-events: none; }
.rf-deck-card[data-k="2"]{ transform: translate(44px,-40px) scale(.91);   opacity: .5;  z-index: 3; filter: brightness(.7);  pointer-events: none; }
.rf-deck-card[data-k="3"]{ transform: translate(66px,-60px) scale(.865);  opacity: .26; z-index: 2; filter: brightness(.6);  pointer-events: none; }
.rf-deck-card[data-k="4"]{ transform: translate(88px,-80px) scale(.82);   opacity: 0;   z-index: 1; pointer-events: none; }

.rf-deck-eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 18px;
}
.rf-deck-eyebrow .n{ color: var(--primary-color); }
.rf-deck-eyebrow:after{ content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }

.rf-deck-card h2{
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 12px;
}

.rf-deck-card p{
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.66);
  margin-bottom: 18px;
  min-height: 4.8em;
}

.rf-deck-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.rf-deck-chips span{
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(var(--secondary-color-rgb), .14);
  border: 1px solid rgba(var(--tertiary-color-rgb), .25);
  color: rgba(255,255,255,.8);
}

.rf-deck-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.rf-deck-link i{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-color); color: #10070a;
  position: relative; flex: 0 0 28px;
  transition: transform .35s var(--ease-out);
}
.rf-deck-link i:before{
  content: ""; position: absolute; left: 9px; top: 9px; width: 8px; height: 8px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.rf-deck-link:hover{ color: #fff; }
.rf-deck-link:hover i{ transform: translateX(3px); }

.rf-deck-dots{ display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.rf-deck-dots button{
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 26px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  transform-origin: center;
  transition: background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.rf-deck-dots button.is-active{ background: var(--primary-color); transform: scaleX(1.4); }

@media (max-width: 991px){
  .rf-deck{ max-width: 520px; margin: 24px auto 0; }
  .rf-deck-stack{ height: 320px; }
}

@media (prefers-reduced-motion: reduce){
  .rf-deck-card{ transition: none; }
}

/* -- brand filter above the server cards ---------------------------------- */
.rf-filter-bar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin: 0 0 30px;
  padding: 12px 14px 12px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.rf-filter-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.rf-filter-label i{ width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); }

.rf-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
}

.rf-filter button{
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.62);
  font-family: var(--title-font);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.rf-filter button:hover{ color: #fff; background: rgba(255,255,255,.06); }
.rf-filter button:active{ transform: scale(.97); }
.rf-filter button:focus-visible{ outline: 2px solid var(--tertiary-color); outline-offset: 2px; }
.rf-filter button.is-active{ background: var(--primary-color); color: #10070a; font-weight: 600; }

.rf-filter-count{
  margin-left: auto;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
}

@media (max-width: 575px){
  .rf-filter-bar{ border-radius: 16px; padding: 12px; }
  .rf-filter-count{ margin-left: 0; }
}

.sequence .gallery-item.is-hidden{ display: none; }

.rf-flash{ animation: rf-flash 1.4s var(--ease-out) 1; }
@keyframes rf-flash{
  0%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(var(--primary-color-rgb), .55); }
  100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 18px rgba(var(--primary-color-rgb), 0); }
}

/* -- honeypot field (spam trap, must stay invisible to people) ------------- */
.rf-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Subpage alignment: give every page the language the homepage established
   (blob backdrop, display typography, readable prose, nested panels)
   ========================================================================== */

/* -- subpage header ------------------------------------------------------- */
#subheader{
  padding-top: 190px;
  padding-bottom: 96px;
  background: var(--bg-dark-1);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

@media (max-width: 991px){
  #subheader{ padding-top: 148px; padding-bottom: 66px; }
}

#subheader > .container{ position: relative; z-index: 2; }

#subheader:after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--secondary-color-rgb), .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--secondary-color-rgb), .09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 45%, transparent);
}

#subheader h1{
  font-size: clamp(38px, 4.5vw, 60px);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 600;
  margin-bottom: 0;
  text-wrap: balance;
}

/* the subheader's lead sentence, where a page has one */
#subheader p{
  max-width: 52ch;
  margin-top: 18px;
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,.66);
}

/* -- long-form prose (about pages, legal pages) --------------------------- */
.rf-legal{
  max-width: 76ch;
  margin-left: auto;
  margin-right: auto;
  padding: 46px 48px;
  border-radius: 24px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

@media (max-width: 767px){
  .rf-legal{ padding: 28px 22px; border-radius: 18px; }
}

.rf-legal p, .rf-legal li{
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.7);
  text-wrap: pretty;
}

.rf-legal h2{
  position: relative;
  margin-top: 56px;
  margin-bottom: 16px;
  padding-top: 26px;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -.028em;
  border-top: 1px solid rgba(255,255,255,.08);
}

.rf-legal h2:before{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--primary-color);
}

.rf-legal h2:first-of-type{ margin-top: 0; padding-top: 0; border-top: 0; }
.rf-legal h2:first-of-type:before{ display: none; }

.rf-legal h3{ margin-top: 30px; margin-bottom: 10px; font-size: 18px; letter-spacing: -.015em; }

.rf-legal a{ color: var(--tertiary-color); text-decoration: underline; text-underline-offset: 3px; }
.rf-legal a:hover{ color: #fff; }

.rf-legal strong{ color: #fff; font-weight: 600; }

/* draft notice, now in the same nested-enclosure language as the cards */
.rf-legal .rf-legal-notice{
  display: flex;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(var(--primary-color-rgb), .07);
  border: 1px solid rgba(var(--primary-color-rgb), .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin-bottom: 48px;
}

.rf-legal .rf-legal-notice:before{
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--primary-color);
}

.rf-legal .rf-placeholder{
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: rgba(var(--tertiary-color-rgb), .12);
  border: 1px dashed rgba(var(--tertiary-color-rgb), .4);
  color: var(--tertiary-color);
  font-style: normal;
  font-family: var(--mono-font);
  font-size: .88em;
}

/* -- AI hardware page: same hero rhythm as the homepage -------------------- */
.r730-hero{ padding-top: 180px; padding-bottom: 120px; background: var(--bg-dark-1); }
.r730-hero .v-center{ display: block; min-height: 0; }

@media (max-width: 991px){
  .r730-hero{ padding-top: 140px; padding-bottom: 80px; }
}

.hero-title{
  font-size: clamp(38px, 4.5vw, 60px);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 600;
  margin-bottom: 20px;
  text-wrap: balance;
}

.hero-text{
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,.68);
  margin-bottom: 30px;
}

/* -- screen-reader-only text --------------------------------------------- */
.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Flat colour instead of gradients
   The template fades headings white to blue-grey and the accent word orange
   to blue. That two-tone fade is the look we are moving away from: headings
   are plain white, the accent word is plain orange.
   ========================================================================== */
.dark-scheme h1,
.dark-scheme h2,
.dark-scheme h3,
.dark-scheme h4,
.de-item.s2 h4{
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #fff;
}

.text-gradient{
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--primary-color);
  color: var(--primary-color);
  text-shadow: none;
}

/* stat numbers: were white-to-blue, now solid orange */
.rf-stats b{
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--primary-color);
}

/* loader bar: was blue-to-orange */
#rf-loader-bar{ background: var(--primary-color); }

/* ==========================================================================
   Cleaner surfaces: flat panels instead of coloured glows
   The tech panels and deck cards carried orange and blue radial washes.
   Flat surfaces with a hairline and a single inner highlight read calmer
   and less generated.
   ========================================================================== */
.bg-panel-tech{
  position: relative;
  background: #0E1729;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* A flat dot grid in one colour, no fade and no mask: it gives the panel a
   drawing-board surface that still reads as a distinct container. */
.bg-panel-tech:before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px !important;   /* see note on .scrollbar-v */
  pointer-events: none;
}

/* Corner brackets, the way a technical drawing frames its field. */
.bg-panel-tech:after{
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 12px;
  pointer-events: none;
  background:
    linear-gradient(var(--primary-color), var(--primary-color)) left top / 18px 1px no-repeat,
    linear-gradient(var(--primary-color), var(--primary-color)) left top / 1px 18px no-repeat,
    linear-gradient(var(--primary-color), var(--primary-color)) right top / 18px 1px no-repeat,
    linear-gradient(var(--primary-color), var(--primary-color)) right top / 1px 18px no-repeat,
    linear-gradient(var(--primary-color), var(--primary-color)) left bottom / 18px 1px no-repeat,
    linear-gradient(var(--primary-color), var(--primary-color)) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--primary-color), var(--primary-color)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--primary-color), var(--primary-color)) right bottom / 1px 18px no-repeat;
  opacity: .5;
}

.rf-deck:before{ display: none; }

.rf-deck-card{
  background: #0D1728;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 20px 20px !important;   /* see note on .scrollbar-v */
}

@media (max-width: 767px){
  .bg-panel-tech{ border-radius: 18px; }
}

/* -- scroll indicator ----------------------------------------------------- */
.scrollbar-v{
  border-radius: 2px;
  /* The colour itself is set by js/a11y.js from the scroll position, so the
     whole bar reads orange at the top of the page and blue at the bottom. */
}

/* ==========================================================================
   Craft pass: calmer motion, one elevation per surface, themed browser chrome
   ========================================================================== */

/* -- radii: cards sit at 14px, pills stay for small controls -------------- */
.bg-panel-tech,
.rf-deck-card,
.rf-tile,
.server-card,
.rf-legal{ border-radius: 14px; }

.bg-panel-tech:before{ border-radius: inherit; }
.rf-filter-bar{ border-radius: 14px; }

@media (max-width: 767px){
  .bg-panel-tech{ border-radius: 12px; }
  .rf-legal{ border-radius: 12px; }
}

/* -- one elevation per surface: a hairline OR a shadow, never both -------- */
.rf-deck-card{
  border: 0;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.8);
}

.rf-ex-shell{ box-shadow: none; }

/* -- motion: keep the deck and the counting, drop the rest ---------------- */
.rf-btn-pulse:after{ content: none; }
.rf-float{ animation: none; }

/* The blobs drifted, the artwork sat on top of a grid, and the panels carry
   their own dot grid: three textures competing. The hero keeps one. */
.bg-panel-hero:after{ display: none; }

/* -- browser surfaces the design would otherwise leave to the defaults ---- */
::selection{ background: var(--primary-color); color: #10070a; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--tertiary-color);
  outline-offset: 3px;
  border-radius: 4px;
}

html{ scrollbar-color: rgba(255,255,255,.22) transparent; scrollbar-width: thin; }

::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: var(--bg-dark-1); }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border: 3px solid var(--bg-dark-1);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.3); }

/* -- vertical rhythm: more air above a heading than below it -------------- */
.rf-sec-head{ margin-bottom: 44px; }
.rf-sec-head h2{ margin-bottom: 14px; }

h2{ margin-top: 0; }

/* -- mono earns its place on data, not on decoration ---------------------- */
.rf-deck-eyebrow{
  font-family: var(--title-font);
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(255,255,255,.5);
  font-weight: 500;
}

/* -- hero deck: the stack reads as edges, not as three legible cards ------ */
.rf-deck-card[data-k="1"]{ opacity: .55; }
.rf-deck-card[data-k="2"]{ opacity: .28; }
.rf-deck-card[data-k="3"]{ opacity: .12; }
.rf-deck-card[data-k="4"]{ opacity: 0; }

/* Back cards are dimmed as a whole, so their copy must not compete: it is
   the card's silhouette that should show, not its text. */
.rf-deck-card:not([data-k="0"]) h3,
.rf-deck-card:not([data-k="0"]) p,
.rf-deck-card:not([data-k="0"]) .rf-deck-chips,
.rf-deck-card:not([data-k="0"]) .rf-deck-link,
.rf-deck-card:not([data-k="0"]) .rf-deck-eyebrow{
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}

/* -- feature list: a spec sheet, not a wall of identical cards ------------- */
.rf-tile{
  height: auto;
  padding: 26px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-radius: 0;
  box-shadow: none;
}

.rf-tile-ico{
  width: auto;
  height: auto;
  margin-bottom: 16px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  justify-content: flex-start;
}

.rf-tile-ico svg{ width: 22px; height: 22px; }

.rf-tile h3{ font-size: 16px; }

@media (hover: hover) and (pointer: fine){
  .rf-tile:hover{
    transform: none;
    background: none;
    border-color: rgba(var(--primary-color-rgb), .55);
  }
  .rf-tile{ transition: border-color .35s var(--ease-out); }
}

/* -- accordion: a quiet marker instead of an orange block ----------------- */
.accordion-section-title:before{
  background: none !important;
  color: rgba(255,255,255,.45) !important;
  transition: color .25s var(--ease-out), transform .25s var(--ease-out);
}

.accordion-section-title:hover:before,
.accordion-section-title.active:before{ color: var(--primary-color) !important; }
.accordion-section-title.active:before{ transform: rotate(180deg); }

.dark-scheme .accordion.s2 .accordion-section-title{
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .25s var(--ease-out);
}
.dark-scheme .accordion.s2 .accordion-section-title:hover{ border-color: rgba(255,255,255,.2); }

/* -- one texture in the hero: the blueprint grid, nothing floating over it - */

/* -- the template turns every a:hover blue, including text on orange ------ */
a.btn-main:hover,
a.btn-main:hover span,
.rf-btn-primary:hover,
.rf-btn-primary:hover span{ color: #10070a !important; }

/* -- keep the unit suffix above the legibility floor ---------------------- */
.rf-stats b i{ font-size: max(14px, .46em); }

/* -- a word in the stat row, not a figure --------------------------------- */
.rf-stats .is-word b{
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -.03em;
}

/* -- product photo, sharing the plate the symbol sits on ------------------ */
.server-card .server-photo{
  width: 100%;
  aspect-ratio: 20 / 9;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(2,6,14,.5);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 18px;
  display: block;
}

/* -- navigation: drop the template's numbered menu items ------------------ */
#mainmenu > li::before{ content: none; }

/* -- model table inside the FAQ ------------------------------------------- */
.rf-models{
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 16px;
  font-size: 14px;
}

.rf-models th{
  text-align: left;
  padding: 0 14px 8px 0;
  font-family: var(--mono-font);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,.42);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.rf-models td{
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  vertical-align: top;
}

.rf-models tr:last-child td{ border-bottom: 0; }
.rf-models td:last-child{ font-variant-numeric: tabular-nums; white-space: nowrap; }

.rf-models a{
  color: var(--tertiary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rf-models a:hover{ color: #fff; }

.rf-models-note{
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
  margin: 0;
}

@media (max-width: 575px){
  .rf-models{ font-size: 13px; }
  .rf-models td:last-child{ white-space: normal; }
}

/* -- Kleinunternehmer-Hinweis in der Fussleiste --------------------------- */
.rf-ust-note{
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
}

/* ==========================================================================
   Anfrageformular (anfrage.html, contact.html)
   Rueckmeldung, gewaehltes System und die Pflicht-/Optional-Marker. Der
   Versand laeuft ueber Web3Forms, siehe js/web3forms.js.
   ========================================================================== */

/* Der Absende-Knopf ist jetzt ein <button>, nicht mehr ein <a>. Die
   Normalisierung oben ist an a.btn-main gebunden, deshalb hier noch einmal
   fuer das Button-Element. */
button.btn-main{
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button.btn-main span{ transition: none; margin-top: 0; opacity: 1; }
button.btn-main:before{ display: none; }
button.btn-main:disabled{ opacity: .55; cursor: progress; transform: none; }

@media (hover: hover) and (pointer: fine){
  button.btn-main:hover{ background: #ff7d1f !important; }
  button.btn-main:disabled:hover{ background: var(--primary-color) !important; }
}

/* -- Pflicht- und Optional-Marker am Feldnamen ---------------------------- */
.rf-req{ color: var(--primary-color); font-weight: 600; }

.rf-opt{
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,.4);
}

.rf-textarea-tall{ height: 262px; }

/* -- Rueckmeldung nach dem Absenden --------------------------------------- */
/* Sichtbar und ruhig: eine Haarlinie, kein Schatten, derselbe Radius wie
   die Karten. Der Erfolgsfall traegt den Markenton, der Fehlerfall rot,
   damit niemand einen Fehlschlag fuer eine Bestaetigung haelt. */
.rf-form-status{
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  border: 1px solid transparent;
}

.rf-form-status.is-ok{
  background: rgba(var(--tertiary-color-rgb), .1);
  border-color: rgba(var(--tertiary-color-rgb), .35);
  color: var(--tertiary-color);
}

.rf-form-status.is-error{
  background: rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.4);
  color: #ffb4b4;
}

/* -- gewaehltes System, aus der Adresszeile uebernommen -------------------- */
/* Eine Datenzeile, kein Ueberschrifts-Label: Bezeichner und Wert stehen
   auf einer Zeile, die Konfiguration darunter in Mono. */
.rf-auswahl{
  margin: 0 0 28px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.rf-auswahl-kicker{
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
}

.rf-auswahl-kicker:after{
  content: "·";
  margin: 0 8px;
  color: rgba(255,255,255,.3);
}

.rf-auswahl strong{
  font-size: 15.5px;
  color: #fff;
  letter-spacing: -.01em;
}

.rf-auswahl [data-specs]{
  display: block;
  margin-top: 6px;
  font-family: var(--mono-font);
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
}

/* -- der direkte Weg, falls jemand das Formular nicht mag ----------------- */
.rf-form-alt{
  margin-top: 26px;
  font-size: 14px;
  color: rgba(255,255,255,.55);
}

.rf-form-alt a{ color: var(--tertiary-color); }

/* -- Preishinweis unter dem Produktraster --------------------------------- */
.rf-preis-note{
  margin: 34px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
  max-width: 68ch;
}

/* -- Angebotsanfrage im mobilen Menue ------------------------------------ */
/* Die Vorlage blendet den Kopf-Knopf auf dem Handy aus
   (header.header-mobile .btn-main{display:none}). Damit der wichtigste
   Weg der Seite dort nicht verschwindet, springt an seiner Stelle dieser
   Menuepunkt ein, der auf dem Desktop verborgen bleibt. */
#mainmenu > li.rf-menu-mobile{ display: none; }
header.header-mobile #mainmenu > li.rf-menu-mobile{ display: block; }

/* -- lange ununterbrochene Zeichenfolgen in Rechtstexten ------------------ */
/* Das Muster-Widerrufsformular enthaelt Ausfuellzeilen aus 50 und mehr
   Unterstrichen. Die gelten als ein einziges Wort und ragen auf dem Handy
   rund 150px ueber den Rand hinaus, der Text ist dort abgeschnitten.
   "anywhere" trennt nur dann, wenn es anders nicht passt, normaler
   Fliesstext bleibt also unberuehrt. */
.rf-legal p{ overflow-wrap: anywhere; }