/* ============================================================
   BLOCK GEMINI CLOUD — landing page additions
   Uses inf-* base + adds cloud-specific elements:
   GPU rack viz, step pipeline, problem cards, ways-to-start
   tiers, FAQ accordion, lead form, sticky CTA bar.
============================================================ */

/* sticky bottom CTA bar */
.cl-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(5,7,15,0.92); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(79,200,255,0.22);
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  transform: translateY(110%); transition: transform 360ms cubic-bezier(.22,.61,.36,1);
}
.cl-sticky.on { transform: translateY(0); }
.cl-sticky-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cl-sticky-l .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--site-mint); box-shadow: 0 0 12px var(--site-mint); animation: inf-pulse 1.6s infinite; flex-shrink: 0; }
.cl-sticky-l .h { font-family: var(--font-display); font-size: 15px; color: #fff; line-height: 1.2; letter-spacing: -0.01em; }
.cl-sticky-l .s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--site-text-3); margin-top: 4px; }
.cl-sticky-r { display: flex; gap: 8px; flex-shrink: 0; }
.cl-sticky-r .btn { padding: 10px 18px; font-size: 13px; }
@media (max-width: 720px) {
  .cl-sticky { padding: 10px 14px; }
  .cl-sticky-l .s { display: none; }
  .cl-sticky-r .btn-ghost { display: none; }
}

/* hero — GPU rack viz */
.cl-rack { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 18px; }
.cl-rack-cell {
  height: 22px; background: linear-gradient(180deg, rgba(79,200,255,0.12), rgba(79,200,255,0.04));
  border: 1px solid rgba(79,200,255,0.25); position: relative; overflow: hidden;
}
.cl-rack-cell.hot { background: linear-gradient(180deg, rgba(255,176,32,0.22), rgba(255,176,32,0.06)); border-color: rgba(255,176,32,0.45); }
.cl-rack-cell.live { background: linear-gradient(180deg, rgba(94,255,164,0.22), rgba(94,255,164,0.06)); border-color: rgba(94,255,164,0.5); }
.cl-rack-cell::after { content:''; position: absolute; inset: 0 70% 0 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); animation: cl-shimmer 4s infinite; }
.cl-rack-cell.live::after { animation-duration: 1.6s; }
@keyframes cl-shimmer { 0% { transform: translateX(-30%); } 100% { transform: translateX(380%); } }

/* What this does — 6 step pipeline */
.cl-pipe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--site-line); position: relative; }
@media (max-width: 1100px) { .cl-pipe { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cl-pipe { grid-template-columns: 1fr; } }
.cl-pipe-step { padding: 28px 22px; border-right: 1px solid var(--site-line); position: relative; background: rgba(255,255,255,0.01); transition: background 220ms; }
.cl-pipe-step:hover { background: rgba(79,200,255,0.04); }
.cl-pipe-step:last-child { border-right: 0; }
.cl-pipe-step .num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); }
.cl-pipe-step .ico { width: 30px; height: 30px; color: var(--site-cyan); margin: 14px 0 12px; }
.cl-pipe-step .h { font-family: var(--font-display); font-size: 17px; color: #fff; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 6px; }
.cl-pipe-step .p { font-size: 12.5px; line-height: 1.5; color: var(--site-text-2); margin: 0; }
.cl-pipe-step::after {
  content: '→'; position: absolute; top: 50%; right: -10px; transform: translateY(-50%);
  width: 20px; height: 20px; line-height: 20px; text-align: center;
  font-family: var(--font-mono); color: var(--site-cyan); background: var(--site-bg); z-index: 2; font-size: 13px;
}
.cl-pipe-step:last-child::after { display: none; }
@media (max-width: 1100px) { .cl-pipe-step::after { display: none; } }

/* Problem cards */
.cl-pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--site-line); }
@media (max-width: 1000px) { .cl-pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cl-pain-grid { grid-template-columns: 1fr; } }
.cl-pain { padding: 26px 22px; border-right: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); background: rgba(255,77,79,0.02); }
.cl-pain .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: #FF7A95; }
.cl-pain .h { font-family: var(--font-display); font-size: 17px; color: #fff; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; margin: 12px 0 8px; }
.cl-pain .p { font-size: 13px; line-height: 1.55; color: var(--site-text-2); margin: 0; }

/* Capability tiles with mini-viz */
.cl-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px) { .cl-cap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cl-cap-grid { grid-template-columns: 1fr; } }
.cl-cap {
  border: 1px solid var(--site-line); padding: 22px;
  background: linear-gradient(180deg, rgba(15,21,48,0.55), rgba(5,7,15,0.35));
  display: flex; flex-direction: column; gap: 14px; transition: border-color 220ms, transform 220ms;
}
.cl-cap:hover { border-color: rgba(79,200,255,0.4); transform: translateY(-2px); }
.cl-cap-h-row { display: flex; gap: 12px; align-items: center; }
.cl-cap-h-row .ico { width: 22px; height: 22px; color: var(--site-cyan); }
.cl-cap-h { font-family: var(--font-display); font-size: 17px; color: #fff; font-weight: 500; letter-spacing: -0.01em; }
.cl-cap-p { font-size: 13px; line-height: 1.5; color: var(--site-text-2); margin: 0; }
.cl-cap-viz {
  margin-top: auto; padding: 12px 14px; border: 1px solid var(--site-line);
  background: rgba(0,0,0,0.4); font-family: var(--font-mono); font-size: 10.5px; color: var(--site-text-2);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
  letter-spacing: 0.06em;
}
.cl-cap-viz .v { color: var(--site-cyan); }
.cl-cap-viz .v.mint { color: var(--site-mint); }
.cl-cap-viz .v.amber { color: var(--site-amber); }
.cl-cap-viz .bar { flex: 1 1 auto; height: 4px; background: rgba(79,200,255,0.12); position: relative; overflow: hidden; }
.cl-cap-viz .bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--site-cyan); animation: cl-bar 3.4s ease-in-out infinite; }
.cl-cap-viz .bar.mint > i { background: var(--site-mint); animation-duration: 2.6s; }
.cl-cap-viz .bar.amber > i { background: var(--site-amber); animation-duration: 4.2s; }
@keyframes cl-bar { 0%, 100% { width: 18%; } 50% { width: 86%; } }
.cl-cap-viz .dots { display: flex; gap: 3px; }
.cl-cap-viz .dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--site-cyan); opacity: 0.4; }
.cl-cap-viz .dots span.on { opacity: 1; box-shadow: 0 0 6px var(--site-cyan); }

/* integrations hub */
.cl-hub { padding: 36px 28px; border: 1px solid var(--site-line); background: linear-gradient(180deg, rgba(15,21,48,0.55), rgba(5,7,15,0.35)); position: relative; overflow: hidden; }
.cl-hub-svg { width: 100%; height: 460px; display: block; }
@media (max-width: 800px) { .cl-hub-svg { height: 540px; } }

/* Ways to start tiers */
.cl-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .cl-tier-grid { grid-template-columns: 1fr; } }
.cl-tier {
  border: 1px solid var(--site-line); padding: 32px 28px;
  background: linear-gradient(180deg, rgba(15,21,48,0.55), rgba(5,7,15,0.35));
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.cl-tier.recommended { border-color: rgba(79,200,255,0.5); background: linear-gradient(180deg, rgba(0,85,255,0.10), rgba(5,7,15,0.45)); }
.cl-tier.recommended::before {
  content: 'Most chosen'; position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--site-mint);
  padding: 4px 10px; border: 1px solid rgba(94,255,164,0.4); background: rgba(94,255,164,0.06);
}
.cl-tier-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); }
.cl-tier-h { font-family: var(--font-display); font-size: 26px; color: #fff; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 14px 0 10px; }
.cl-tier-sub { font-size: 13.5px; color: var(--site-text-2); line-height: 1.55; margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--site-line); }
.cl-tier-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.cl-tier-list li { font-size: 13px; line-height: 1.5; color: var(--site-text); padding-left: 20px; position: relative; }
.cl-tier-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 1px; background: var(--site-cyan); }
.cl-tier-meta { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--site-text-3); letter-spacing: 0.1em; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--site-line); }
.cl-tier-meta b { color: #fff; font-weight: 500; }
.cl-tier-cta { margin-top: auto; }

/* FAQ */
.cl-faq { display: flex; flex-direction: column; border: 1px solid var(--site-line); }
.cl-faq-row { border-bottom: 1px solid var(--site-line); }
.cl-faq-row:last-child { border-bottom: 0; }
.cl-faq-q {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 20px 24px; cursor: pointer; user-select: none; transition: background 180ms;
}
.cl-faq-q:hover { background: rgba(79,200,255,0.04); }
.cl-faq-row.open .cl-faq-q { background: rgba(79,200,255,0.06); }
.cl-faq-q .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--site-cyan); }
.cl-faq-q .q { font-family: var(--font-display); font-size: 17px; color: #fff; font-weight: 500; letter-spacing: -0.01em; }
.cl-faq-q .chev { font-family: var(--font-mono); font-size: 18px; color: var(--site-text-2); transition: transform 220ms; }
.cl-faq-row.open .cl-faq-q .chev { transform: rotate(45deg); color: var(--site-cyan); }
.cl-faq-a { display: none; padding: 0 24px 22px 60px; }
.cl-faq-row.open .cl-faq-a { display: block; }
.cl-faq-a p { font-size: 14px; line-height: 1.65; color: var(--site-text-2); margin: 0; max-width: 880px; }

/* Lead form + final CTA */
.cl-final {
  position: relative; padding: 64px;
  border: 1px solid rgba(79,200,255,0.3);
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(0,85,255,0.18), transparent 70%),
    linear-gradient(180deg, rgba(15,21,48,0.6), rgba(5,7,15,0.4));
}
@media (max-width: 800px) { .cl-final { padding: 40px 22px; } }
.cl-final-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 1000px) { .cl-final-grid { grid-template-columns: 1fr; gap: 40px; } }
.cl-final-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--site-cyan); margin-bottom: 22px; }
.cl-final-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--site-mint); box-shadow: 0 0 10px var(--site-mint); animation: inf-pulse 1.6s infinite; }
.cl-final-h { font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -0.025em; color: #fff; font-weight: 400; margin: 0 0 22px; }
.cl-final-h .ac { background: linear-gradient(120deg, #4FC8FF 0%, #5EFFA4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cl-final-p { font-size: 16px; line-height: 1.55; color: var(--site-text-2); margin: 0 0 28px; max-width: 540px; }
.cl-final-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.cl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-form .full { grid-column: 1 / -1; }
.cl-form-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--site-cyan); grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cl-form-field { display: flex; flex-direction: column; gap: 6px; }
.cl-form-field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--site-text-3); }
.cl-form-field input, .cl-form-field select, .cl-form-field textarea {
  background: rgba(0,0,0,0.35); border: 1px solid var(--site-line-2); color: #fff;
  padding: 11px 14px; font-family: var(--font-sans); font-size: 14px; outline: 0; transition: border-color 180ms;
}
.cl-form-field input:focus, .cl-form-field select:focus, .cl-form-field textarea:focus { border-color: var(--site-cyan); }
.cl-form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FC8FF' stroke-width='1.6'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.cl-form-field select option { background: #0A1124; color: #fff; }
.cl-form-submit { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 8px; }
.cl-form-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--site-text-3); }

/* small chip */
.cl-trust-row { display: flex; gap: 18px; flex-wrap: wrap; padding: 22px 0 0; }
.cl-trust { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--site-line-2); font-family: var(--font-mono); font-size: 11px; color: var(--site-text-2); letter-spacing: 0.06em; }
.cl-trust .d { width: 6px; height: 6px; border-radius: 50%; background: var(--site-mint); box-shadow: 0 0 8px var(--site-mint); }

/* Make body have bottom padding when sticky bar visible */
body.cl-stuck { padding-bottom: 80px; }

/* ============================================================
   FACILITY — EBRC Luxembourg
============================================================ */
.cl-fac { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--site-line); }
@media (max-width: 1000px) { .cl-fac { grid-template-columns: 1fr; } }

.cl-fac-card {
  position: relative; padding: 36px 32px; overflow: hidden;
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(0,85,255,0.18), transparent 70%),
    linear-gradient(180deg, rgba(15,21,48,0.7), rgba(5,7,15,0.55));
  border-right: 1px solid var(--site-line);
  display: flex; flex-direction: column; gap: 24px;
}
@media (max-width: 1000px) { .cl-fac-card { border-right: 0; border-bottom: 1px solid var(--site-line); } }
.cl-fac-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); display: flex; gap: 10px; align-items: center; }
.cl-fac-tag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--site-mint); box-shadow: 0 0 10px var(--site-mint); animation: inf-pulse 1.6s infinite; }
.cl-fac-loc { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cl-fac-city { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 400; color: #fff; line-height: 1; letter-spacing: -0.025em; }
.cl-fac-city .dot { color: var(--site-cyan); }
.cl-fac-country { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--site-text-3); }
.cl-fac-coords { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--site-text-3); border-top: 1px solid var(--site-line-2); padding-top: 14px; display: flex; gap: 24px; flex-wrap: wrap; }
.cl-fac-coords b { color: var(--site-cyan); font-weight: 500; }

.cl-fac-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--site-line-2); }
.cl-fac-stat { padding: 18px 18px; border-right: 1px solid var(--site-line-2); border-bottom: 1px solid var(--site-line-2); }
.cl-fac-stat:nth-child(2n) { border-right: 0; }
.cl-fac-stat:nth-last-child(-n+2) { border-bottom: 0; }
.cl-fac-stat .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--site-cyan); margin-bottom: 8px; }
.cl-fac-stat .v { font-family: var(--font-display); font-size: 22px; color: #fff; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.cl-fac-stat .s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--site-text-3); margin-top: 4px; }

.cl-fac-body { padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; }
.cl-fac-h { font-family: var(--font-display); font-size: 26px; color: #fff; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.cl-fac-p { font-size: 14.5px; line-height: 1.65; color: var(--site-text-2); margin: 0; }
.cl-fac-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--site-line-2); }
.cl-fac-list li { padding: 14px 0; border-bottom: 1px solid var(--site-line-2); display: flex; gap: 14px; align-items: flex-start; }
.cl-fac-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--site-mint); }
.cl-fac-list .h { font-family: var(--font-display); font-size: 14.5px; color: #fff; font-weight: 500; letter-spacing: -0.005em; }
.cl-fac-list .p { font-size: 12.5px; color: var(--site-text-2); line-height: 1.5; margin-top: 3px; }

/* ============================================================
   USE-CASE BUILDER (interactive cluster sizer)
============================================================ */
.inf-builder { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--site-line); }
@media (max-width: 1000px) { .inf-builder { grid-template-columns: 1fr; } }
.inf-builder-controls { padding: 32px 30px; border-right: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 26px; background: rgba(255,255,255,0.01); }
@media (max-width: 1000px) { .inf-builder-controls { border-right: 0; border-bottom: 1px solid var(--site-line); } }
.inf-build-block { display: flex; flex-direction: column; gap: 12px; }
.inf-build-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); padding-bottom: 10px; border-bottom: 1px solid var(--site-line-2); }
.inf-build-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inf-build-chip {
  appearance: none; cursor: pointer; background: rgba(0,0,0,0.3); color: var(--site-text-2);
  border: 1px solid var(--site-line-2); padding: 9px 14px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em; transition: all 200ms; display: inline-flex; align-items: center; gap: 8px;
}
.inf-build-chip:hover { border-color: rgba(79,200,255,0.4); color: #fff; }
.inf-build-chip.on { background: rgba(0,85,255,0.16); border-color: var(--site-cyan); color: #fff; box-shadow: 0 0 0 1px var(--site-cyan) inset; }
.inf-build-chip .sub { font-size: 10px; color: var(--site-text-3); letter-spacing: 0.04em; }
.inf-build-chip.on .sub { color: var(--site-cyan); }
.inf-build-card {
  appearance: none; cursor: pointer; text-align: left; background: rgba(0,0,0,0.3); color: var(--site-text-2);
  border: 1px solid var(--site-line-2); padding: 14px 16px; transition: all 200ms; display: flex; flex-direction: column; gap: 4px;
}
.inf-build-card:hover { border-color: rgba(79,200,255,0.4); }
.inf-build-card.on { background: rgba(0,85,255,0.10); border-color: var(--site-cyan); }
.inf-build-card-h { font-family: var(--font-display); font-size: 14.5px; color: #fff; font-weight: 500; letter-spacing: -0.01em; }
.inf-build-card-p { font-size: 12px; color: var(--site-text-3); line-height: 1.45; }
.inf-build-card.on .inf-build-card-p { color: var(--site-text-2); }

.inf-builder-out { padding: 32px 30px; background: linear-gradient(180deg, rgba(15,21,48,0.55), rgba(5,7,15,0.4)); display: flex; flex-direction: column; gap: 18px; }
.inf-builder-out-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--site-line-2); }
.inf-builder-out-h .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--site-text-2); }
.inf-builder-out-h .live { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--site-mint); padding: 4px 10px; border: 1px solid rgba(94,255,164,0.35); background: rgba(94,255,164,0.06); }
.inf-builder-out-rows { display: flex; flex-direction: column; }
.inf-builder-out-rows .row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--site-line-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.inf-builder-out-rows .row:last-child { border-bottom: 0; }
.inf-builder-out-rows .row span { color: var(--site-text-3); }
.inf-builder-out-rows .row b { color: #fff; font-weight: 500; letter-spacing: 0.04em; }
.inf-builder-out-rows .row b.ok { color: var(--site-mint); }
.inf-builder-cta { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.inf-builder-cta .small { font-size: 10.5px; color: var(--site-text-3); letter-spacing: 0.04em; }

/* ============================================================
   INDUSTRIES (sidebar tabs + detail panel)
============================================================ */
.inf-ind-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 0; border: 1px solid var(--site-line); }
@media (max-width: 900px) { .inf-ind-wrap { grid-template-columns: 1fr; } }
.inf-ind-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--site-line); background: rgba(255,255,255,0.01); }
@media (max-width: 900px) { .inf-ind-tabs { border-right: 0; border-bottom: 1px solid var(--site-line); flex-direction: row; flex-wrap: wrap; } }
.inf-ind-tab {
  appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--site-line-2);
  padding: 16px 20px; cursor: pointer; text-align: left; color: var(--site-text-2);
  display: flex; gap: 12px; align-items: center; font-size: 13.5px; transition: all 180ms;
  font-family: var(--font-sans);
}
.inf-ind-tab:hover { background: rgba(79,200,255,0.04); color: #fff; }
.inf-ind-tab.on { background: rgba(0,85,255,0.10); color: #fff; border-left: 2px solid var(--site-cyan); padding-left: 18px; }
.inf-ind-tab.on svg { color: var(--site-cyan); }
.inf-ind-tab svg { color: var(--site-text-3); flex-shrink: 0; }
.inf-ind-tab span { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; }
@media (max-width: 900px) { .inf-ind-tab { flex: 1 1 50%; border-right: 1px solid var(--site-line-2); } .inf-ind-tab.on { border-left: 0; border-top: 2px solid var(--site-cyan); padding-left: 20px; } }

.inf-ind-detail { padding: 36px 36px; background: linear-gradient(180deg, rgba(15,21,48,0.4), rgba(5,7,15,0.3)); }
@media (max-width: 600px) { .inf-ind-detail { padding: 28px 22px; } }
.inf-ind-head { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--site-line-2); margin-bottom: 18px; }
.inf-ind-head h3 { font-family: var(--font-display); font-size: 26px; color: #fff; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.inf-ind-p { font-size: 14.5px; line-height: 1.6; color: var(--site-text-2); margin: 0 0 24px; max-width: 640px; }
.inf-ind-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-bottom: 24px; }
@media (max-width: 600px) { .inf-ind-uses { grid-template-columns: 1fr; } }
.inf-ind-use { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border: 1px solid var(--site-line-2); background: rgba(0,0,0,0.25); font-size: 13px; color: var(--site-text); }
.inf-ind-cta { padding-top: 18px; border-top: 1px solid var(--site-line-2); }

/* ============================================================
   OUTCOMES (stat grid)
============================================================ */
.inf-stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--site-line); }
@media (max-width: 1100px) { .inf-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .inf-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.inf-stat { padding: 26px 22px; border-right: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,0.01); transition: background 200ms; }
.inf-stat:hover { background: rgba(79,200,255,0.04); }
.inf-stats-grid > .inf-stat:nth-child(6n) { border-right: 0; }
@media (max-width: 1100px) { .inf-stats-grid > .inf-stat { border-right: 1px solid var(--site-line) !important; } .inf-stats-grid > .inf-stat:nth-child(3n) { border-right: 0 !important; } }
@media (max-width: 600px) { .inf-stats-grid > .inf-stat { border-right: 1px solid var(--site-line) !important; } .inf-stats-grid > .inf-stat:nth-child(2n) { border-right: 0 !important; } }
.inf-stat .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--site-cyan); }
.inf-stat .v { font-family: var(--font-display); font-size: 36px; color: #fff; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.inf-stat .l { font-size: 12.5px; line-height: 1.5; color: var(--site-text-2); margin-top: 4px; }