/* GPU servers and custom infrastructure.

   Both pages are built from the site's own vocabulary — .sh-container,
   .sh-button, .sh-eyebrow, and the price block and location chips from the
   dedicated grid. What is here is what those did not already cover.

   The first version of this sheet assumed .sh-section and .sh-section-muted
   existed. They do not: every page of this theme names its own bands, the way
   secure-hosting names .sh-secure-hero. Without them the two pages rendered as
   full-bleed text with no rhythm, which read as no styles at all. They are
   defined here, once, against the same tokens the rest of the theme uses so the
   vertical rhythm matches the pages either side of them. */

/* -------------------------------------------------------------------- bands */
.sh-gpu .sh-section,
.sh-quote .sh-section { padding: var(--sh-section-y) 0; }

.sh-gpu .sh-section-muted,
.sh-quote .sh-section-muted { background: var(--sh-paper); }

.sh-gpu .sh-section h2,
.sh-quote .sh-section h2 {
    max-width: 760px;
    margin: 0 0 12px;
    font: 700 clamp(24px, 2.6vw, 34px)/1.12 var(--sh-font-heading);
    letter-spacing: -.04em;
}

.sh-section-lede {
    max-width: 62ch;
    margin: 0 0 var(--sh-heading-gap);
    color: var(--sh-muted);
    line-height: 1.75;
}

.sh-gpu-note {
    max-width: 70ch;
    margin: 22px 0 0;
    color: var(--sh-muted);
    font-size: 13px;
    line-height: 1.7;
}
.sh-gpu-subsection-title { max-width: 760px; margin: 0 0 12px; font: 700 clamp(22px, 2.2vw, 30px)/1.15 var(--sh-font-heading); letter-spacing: -.035em; }


/* -------------------------------------------------------------------- heroes */
.sh-gpu-hero,
.sh-quote-hero {
    padding: var(--sh-hero-y) 0;
    color: #fff;
    background: radial-gradient(circle at 78% 22%, rgba(53,216,255,.22), transparent 46%), var(--sh-navy);
}

.sh-gpu-hero-grid,
.sh-quote-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: center;
}

.sh-gpu-hero h1,
.sh-quote-hero h1 {
    margin: 12px 0 0;
    font: 700 clamp(30px, 3.6vw, 48px)/1.08 var(--sh-font-heading);
    letter-spacing: -.045em;
}

.sh-gpu-lede,
.sh-quote-lede {
    max-width: 36em;
    margin: 20px 0 24px;
    color: #b9c8de;
    font-size: 17px;
    line-height: 1.7;
}

.sh-gpu-highlights,
.sh-quote-highlights {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 10px;
    color: #cfdcef;
    font-size: 15px;
}
.sh-gpu-highlights li,
.sh-quote-highlights li { position: relative; padding-left: 26px; }
.sh-gpu-highlights li::before,
.sh-quote-highlights li::before {
    content: '';
    position: absolute;
    top: .55em;
    left: 0;
    width: 14px;
    height: 6px;
    border-left: 2px solid var(--sh-cyan);
    border-bottom: 2px solid var(--sh-cyan);
    transform: rotate(-45deg);
}

.sh-gpu-from { margin: 22px 0 0; color: #b9c8de; font-size: 14px; }
.sh-gpu-from strong { color: #fff; }

.sh-quote-art svg {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
    color: rgba(53,216,255,.75);
}

/* One visual system, two product stories. The layered panel and technical grid
   are shared; the SVGs provide the specific meaning (accelerated compute versus
   an architecture assembled from several infrastructure types). */
.sh-gpu-art,
.sh-quote-art { position: relative; }
.sh-service-visual-canvas {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(53,216,255,.24);
    border-radius: 24px;
    background:
        linear-gradient(rgba(53,216,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53,216,255,.035) 1px, transparent 1px),
        linear-gradient(150deg, rgba(24,53,91,.72), rgba(7,18,36,.86));
    background-size: 26px 26px, 26px 26px, auto;
    box-shadow: 0 32px 80px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05);
}
.sh-service-visual-canvas::before,
.sh-service-visual-canvas::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    filter: blur(24px);
    pointer-events: none;
}
.sh-service-visual-canvas::before { top: -18%; right: -12%; width: 48%; aspect-ratio: 1; background: rgba(53,216,255,.16); }
.sh-service-visual-canvas::after { bottom: -24%; left: -10%; width: 44%; aspect-ratio: 1; background: rgba(128,87,255,.15); }
.sh-service-visual-canvas svg { position: relative; z-index: 1; max-width: none; }
.sh-gpu-art .sh-visual-float,
.sh-quote-art .sh-visual-float { animation: sh-infra-float 5.8s ease-in-out infinite; transform-origin: center; }
.sh-gpu-art .sh-visual-fan { animation: sh-infra-spin 9s linear infinite; transform-box: fill-box; transform-origin: center; }
.sh-gpu-art .sh-visual-fan-delay { animation-duration: 11s; animation-direction: reverse; }
.sh-gpu-art .sh-visual-data,
.sh-quote-art .sh-visual-flow { animation: sh-infra-signal 2.6s ease-in-out infinite; }

@keyframes sh-infra-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sh-infra-spin { to { transform: rotate(360deg); } }
@keyframes sh-infra-signal { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ------------------------------------------------------------- gpu machines */
.sh-gpu-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.sh-gpu-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--sh-line);
    border-radius: 18px;
    background: #fff;
}
.sh-gpu-card-title {
    margin: 0;
    font: 700 19px/1.25 var(--sh-font-heading);
    letter-spacing: -.02em;
}

.sh-gpu-specs { margin: 0; display: grid; gap: 8px; font-size: 14px; }
.sh-gpu-specs > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sh-line);
}
.sh-gpu-specs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.sh-gpu-specs dt { color: var(--sh-muted); }
.sh-gpu-specs dd { margin: 0; text-align: right; font-weight: 600; }

.sh-gpu-card .sh-dedicated-price { margin-top: auto; }

/* --------------------------------------------------------------- on request */
.sh-gpu-request-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sh-gpu-request {
    padding: 24px;
    border: 1px dashed #c2cddc;
    border-radius: 18px;
    background: rgba(255,255,255,.6);
}
.sh-gpu-request h3 {
    margin: 0 0 8px;
    font: 700 17px/1.25 var(--sh-font-heading);
    letter-spacing: -.02em;
}
.sh-gpu-request-specs {
    margin: 0 0 14px;
    color: var(--sh-muted);
    font-size: 13px;
    line-height: 1.65;
}
.sh-gpu-request-state { margin: 0 0 14px; }

.sh-gpu-badge {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid #c2cddc;
    border-radius: 999px;
    color: var(--sh-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sh-gpu-badge-stock {
    border-color: rgba(7,94,62,.35);
    color: var(--sh-green-on-light);
    background: rgba(7,94,62,.07);
}

.sh-gpu-request-link {
    color: var(--sh-blue-on-light);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.sh-gpu-request-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------- grids of cards */
.sh-gpu-uses,
.sh-gpu-why,
.sh-quote-criteria,
.sh-quote-approaches {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.sh-gpu-uses, .sh-gpu-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sh-gpu-uses > article,
.sh-gpu-why > article,
.sh-quote-criteria > article,
.sh-quote-approaches > article {
    padding: 26px;
    border: 1px solid var(--sh-line);
    border-radius: 18px;
    background: #fff;
}

.sh-gpu-uses h3,
.sh-gpu-why h3,
.sh-quote-criteria h3,
.sh-quote-approaches h3 {
    margin: 0 0 10px;
    font: 700 17px/1.3 var(--sh-font-heading);
    letter-spacing: -.02em;
}
.sh-gpu-uses p,
.sh-gpu-why p,
.sh-quote-criteria p,
.sh-quote-approaches p {
    margin: 0;
    color: var(--sh-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* ----------------------------------------------------------------- faq, cta */
.sh-gpu .sh-faq,
.sh-quote .sh-faq { max-width: 860px; }

.sh-faq-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--sh-line);
}
.sh-faq-item summary {
    cursor: pointer;
    font: 700 16px/1.45 var(--sh-font-heading);
    list-style: none;
}
.sh-faq-item summary::-webkit-details-marker { display: none; }
.sh-faq-item summary::after {
    content: '+';
    float: right;
    color: var(--sh-blue-on-light);
    font-size: 20px;
    line-height: 1;
}
.sh-faq-item[open] summary::after { content: '−'; }
.sh-faq-item p {
    max-width: 75ch;
    margin: 12px 0 0;
    color: var(--sh-muted);
    line-height: 1.75;
}

.sh-gpu-closing { text-align: center; }
.sh-gpu-closing p {
    max-width: 60ch;
    margin: 0 auto 26px;
    color: var(--sh-muted);
    line-height: 1.75;
}
.sh-gpu-closing .sh-hero-actions { justify-content: center; }
/* The closing block sits on paper, so the dark-surface secondary button would
   be white on white. */
.sh-gpu-closing .sh-button-secondary,
.sh-quote .sh-section:not(.sh-quote-hero) .sh-button-secondary {
    color: var(--sh-ink) !important;
    border-color: #c2cddc;
    background: #fff;
}

/* ---------------------------------------------------------------- quote page */
.sh-quote-outcomes { background: #fff; }
.sh-quote-outcomes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sh-quote-outcomes-grid article { padding: 28px; border: 1px solid var(--sh-line); border-radius: 18px; background: var(--sh-paper); }
.sh-quote-outcomes-grid h3 { margin: 20px 0 9px; font: 700 19px/1.25 var(--sh-font-heading); letter-spacing: -.025em; }
.sh-quote-outcomes-grid p { margin: 0; color: var(--sh-muted); line-height: 1.7; }

.sh-infra-icon { display: block; width: 100%; max-width: 148px; }
.sh-infra-icon svg { display: block; width: 100%; height: auto; }
.sh-infra-icon-panel { fill: #0d1e37; stroke: rgba(53,216,255,.42); }
.sh-infra-icon-grid { fill: none; stroke: rgba(53,216,255,.10); stroke-width: 1; }
.sh-infra-icon-main { fill: none; stroke: #55dfff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-infra-icon-accent { fill: none; stroke: #8affc1; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-infra-icon-dot { fill: #8affc1; stroke: none; }

.sh-quote-criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-quote-criteria > article { display: grid; grid-template-columns: 148px 1fr; align-content: start; column-gap: 24px; }
.sh-quote-criteria > article .sh-infra-icon { grid-row: 1 / span 2; }
.sh-quote-criteria > article h3 { align-self: end; }

.sh-quote-components {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 36px;
    padding: 0;
}
.sh-quote-components li {
    display: flex;
    min-width: 0;
    padding: 16px;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--sh-line);
    border-radius: 16px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
}
.sh-quote-components .sh-infra-icon { width: 76px; flex: 0 0 76px; }
.sh-quote-approaches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-quote-approaches .sh-infra-icon { margin-bottom: 18px; }
.sh-quote-process .sh-infra-icon { width: 112px; margin-top: 16px; }

.sh-quote-process {
    list-style: none;
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
}
.sh-quote-process h3 {
    margin: 14px 0 8px;
    font: 700 17px/1.3 var(--sh-font-heading);
}
.sh-quote-process p { margin: 0; color: var(--sh-muted); line-height: 1.7; }
.sh-quote-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--sh-blue-on-light);
    background: rgba(57,120,255,.1);
    font: 700 16px var(--sh-font-heading);
}

/* ------------------------------------------------------------------ the form */
.sh-quote-form-section {
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(53,216,255,.14), transparent 34%),
        radial-gradient(circle at 10% 100%, rgba(128,87,255,.18), transparent 36%),
        #071326;
}
.sh-quote-form-section > .sh-container > h2 { color: #fff; }
.sh-quote-form-section > .sh-container > .sh-section-lede { color: #b9c7da; }

.sh-quote-form-wrap { max-width: 900px; }

.sh-quote-form {
    display: grid;
    gap: 22px;
    padding: 32px;
    border: 1px solid var(--sh-line);
    border-radius: 18px;
    background: #fff;
}

.sh-quote-fields {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.sh-quote-field { display: flex; flex-direction: column; gap: 7px; }
.sh-quote-field > span {
    color: var(--sh-ink);
    font-size: 13px;
    font-weight: 700;
}
.sh-quote-field em { color: var(--sh-muted); font-style: normal; }

.sh-quote-field input,
.sh-quote-field select,
.sh-quote-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #c7d4e3;
    border-radius: 9px;
    color: var(--sh-ink);
    background: #fff;
    font: 500 14px var(--sh-font-body);
}
.sh-quote-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.sh-quote-field input:focus-visible,
.sh-quote-field select:focus-visible,
.sh-quote-field textarea:focus-visible {
    outline: 2px solid var(--sh-blue);
    outline-offset: 1px;
}
.sh-quote-field-wide { grid-column: 1 / -1; }

.sh-quote-workloads { margin: 0; padding: 0; border: 0; }
.sh-quote-workloads legend {
    padding: 0 0 12px;
    color: var(--sh-ink);
    font-size: 13px;
    font-weight: 700;
}
.sh-quote-workloads > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.sh-quote-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.sh-quote-check input { width: 18px; height: 18px; }

.sh-quote-legal { margin: 0; color: var(--sh-muted); font-size: 13px; line-height: 1.65; max-width: 70ch; }
.sh-quote-form .sh-button { justify-self: start; }

/* Off-screen rather than display:none — a bot reading the DOM should find a
   field that looks ordinary, and a screen reader should skip it. */
.sh-quote-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sh-quote-result {
    margin-bottom: 26px;
    padding: 20px 24px;
    border-radius: 14px;
}
.sh-quote-result h3 { margin: 0 0 6px; font: 700 17px var(--sh-font-heading); }
.sh-quote-result p { margin: 0; line-height: 1.7; }
.sh-quote-result-ok {
    border: 1px solid rgba(7,94,62,.35);
    color: var(--sh-green-on-light);
    background: rgba(7,94,62,.08);
}
.sh-quote-result-error {
    border: 1px solid rgba(179,38,30,.35);
    color: #8c1d18;
    background: rgba(179,38,30,.07);
}

/* -------------------------------------------------------------------- small */
@media (max-width: 900px) {
    .sh-quote-outcomes-grid, .sh-quote-approaches { grid-template-columns: 1fr; }
    .sh-quote-process { grid-template-columns: 1fr; }
    .sh-quote-criteria, .sh-quote-components { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-quote-workloads > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-gpu-request-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-gpu-uses, .sh-gpu-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-gpu-hero-grid, .sh-quote-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .sh-quote-art { display: block; width: min(100%, 360px); margin: -8px auto 0; }
    .sh-service-visual-canvas { padding: 10px; border-radius: 18px; }
    .sh-gpu .sh-section, .sh-quote .sh-section { padding: 44px 0; }
    .sh-quote-form { padding: 22px; }
}

@media (max-width: 560px) {
    .sh-quote-criteria, .sh-quote-components { grid-template-columns: 1fr; }
    .sh-quote-criteria > article { grid-template-columns: 96px 1fr; column-gap: 18px; }
    .sh-quote-criteria > article .sh-infra-icon { width: 96px; }
    .sh-quote-workloads > div { grid-template-columns: 1fr; }
    .sh-gpu-request-grid { grid-template-columns: 1fr; }
    .sh-gpu-uses, .sh-gpu-why { grid-template-columns: 1fr; }
    .sh-gpu-hero-grid, .sh-quote-hero-grid { gap: 28px; }
    .sh-quote-art { width: min(88vw, 310px); }
}

@media (prefers-reduced-motion: reduce) {
    .sh-gpu-art .sh-visual-float,
    .sh-quote-art .sh-visual-float,
    .sh-gpu-art .sh-visual-fan,
    .sh-gpu-art .sh-visual-data,
    .sh-quote-art .sh-visual-flow { animation: none; }
}