:root {
  color-scheme: dark;
  --bg: #070b11;
  --bg-2: #0a1018;
  --surface: rgba(13, 20, 31, 0.72);
  --surface-strong: rgba(17, 28, 42, 0.92);
  --line: rgba(148, 209, 255, 0.14);
  --line-strong: rgba(103, 232, 249, 0.35);
  --text: #edf7ff;
  --muted: #9fb2c7;
  --soft: #617489;
  --cyan: #22d3ee;
  --cyan-2: #67e8f9;
  --purple: #b794ff;
  --amber: #f5a524;
  --green: #3ddc97;
  --danger: #ff6b6b;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  --radius: 24px;
  --max: 1180px;
  --font-display: "Chakra Petch", "Space Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 211, 238, 0.18), transparent 34rem),
    radial-gradient(circle at 90% 10%, rgba(183, 148, 255, 0.16), transparent 32rem),
    radial-gradient(circle at 50% 95%, rgba(61, 220, 151, 0.08), transparent 28rem),
    linear-gradient(180deg, #05080d 0%, var(--bg) 42%, #05070b 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
a { color: inherit; text-decoration: none; }
p { color: var(--muted); line-height: 1.7; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 32px), var(--max));
  margin: 16px auto 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5, 10, 17, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
}
.brand { display: inline-flex; gap: 12px; align-items: center; min-width: 210px; }
.brand-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 15px;
  color: #061018; font: 800 22px/1 var(--font-display);
  background: linear-gradient(135deg, var(--cyan), var(--green) 52%, var(--purple));
  box-shadow: 0 0 30px rgba(34, 211, 238, .35);
}
.brand strong { display: block; font-family: var(--font-display); letter-spacing: .04em; }
.brand small { display: block; color: var(--soft); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; margin-top: 2px; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a { color: var(--muted); padding: 10px 14px; border-radius: 999px; font-size: 14px; transition: .2s ease; }
.site-nav a:hover, .site-nav a.active { color: var(--text); background: rgba(103, 232, 249, .09); }
.site-nav .nav-cta { color: #061018; background: linear-gradient(135deg, var(--cyan), var(--cyan-2)); font-weight: 700; }
    .site-nav .nav-login { color: #061018; background: linear-gradient(135deg, #00e5ff, #00b8d4); font-weight: 700; border: none; }
.nav-toggle { display: none; color: var(--text); background: transparent; border: 0; font-size: 26px; }

.section-shell { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }
.hero { position: relative; display: grid; grid-template-columns: 1.04fr .96fr; gap: 48px; align-items: center; min-height: calc(100vh - 96px); padding: 76px 0 56px; }
.aurora-field { position: absolute; inset: 0; pointer-events: none; filter: blur(8px); opacity: .9; }
.aurora-field span { position: absolute; border-radius: 999px; transform: rotate(-18deg); }
.aurora-field span:nth-child(1) { width: 54%; height: 16px; left: 2%; top: 20%; background: linear-gradient(90deg, transparent, rgba(34,211,238,.9), transparent); box-shadow: 0 0 80px var(--cyan); }
.aurora-field span:nth-child(2) { width: 42%; height: 12px; right: 6%; top: 34%; background: linear-gradient(90deg, transparent, rgba(183,148,255,.75), transparent); box-shadow: 0 0 80px var(--purple); }
.aurora-field span:nth-child(3) { width: 35%; height: 10px; left: 20%; bottom: 24%; background: linear-gradient(90deg, transparent, rgba(61,220,151,.65), transparent); box-shadow: 0 0 60px var(--green); }
.hero-copy, .hero-panel, .page-hero, .contact-copy, .contact-form, .security-panel, .pricing-note, .cta-band { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 16px; color: var(--cyan-2); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.04; margin: 0; letter-spacing: -0.045em; }
h1 { font-size: clamp(48px, 7vw, 86px); max-width: 840px; }
h2 { font-size: clamp(32px, 4vw, 54px); }
h3 { font-size: 22px; letter-spacing: -0.025em; }
.lead { font-size: clamp(18px, 2vw, 22px); max-width: 720px; margin: 24px 0 0; }
.narrow { max-width: 760px; margin-inline: auto; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #061018; background: linear-gradient(135deg, var(--cyan), var(--green)); box-shadow: 0 0 42px rgba(34,211,238,.22); border-color: transparent; }
.button.ghost { background: rgba(103,232,249,.06); color: var(--text); }
.button.full { width: 100%; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.trust-row span, .principle-grid span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.03); font-size: 13px; }
.hero-panel, .deep-card, .feature-card, .price-card, .security-panel, .security-list article, .contact-form, .contact-cards article, .pricing-note, .cta-band, .audience-grid article, .workflow-steps article, .trust-panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17, 28, 42, .78), rgba(7, 12, 19, .66));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.hero-panel { border-radius: 32px; padding: 18px; overflow: hidden; }
.panel-top { display: flex; align-items: center; gap: 8px; color: var(--soft); font: 12px var(--font-display); letter-spacing: .13em; text-transform: uppercase; }
.panel-top span { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); opacity: .75; }
.panel-top span:nth-child(2) { background: var(--purple); } .panel-top span:nth-child(3) { background: var(--amber); } .panel-top em { margin-left: auto; font-style: normal; }
.radar-card { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; padding: 28px 10px 24px; }
.orb { position: relative; width: 132px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(103,232,249,.25), rgba(103,232,249,.05) 42%, transparent 70%); border: 1px solid var(--line-strong); box-shadow: inset 0 0 45px rgba(34,211,238,.18), 0 0 60px rgba(34,211,238,.22); }
.orb::before, .orb::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(103,232,249,.2); border-radius: 50%; }
.orb::after { inset: 38px; border-color: rgba(183,148,255,.35); }
.orb i { position: absolute; inset: 50% auto auto 50%; width: 46%; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); transform-origin: left center; animation: sweep 4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.metric-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.metric-grid article { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: rgba(255,255,255,.035); }
.metric-grid b { display: block; font: 800 30px/1 var(--font-display); color: var(--cyan-2); } .metric-grid span { color: var(--soft); font-size: 13px; }
.signal-list { margin-top: 16px; padding: 14px; border-radius: 18px; background: rgba(0,0,0,.18); }
.signal-list p { margin: 9px 0; font-size: 14px; } .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:10px; } .cyan{background:var(--cyan)} .purple{background:var(--purple)} .amber{background:var(--amber)}

.split { display: grid; grid-template-columns: .8fr 1fr; gap: 36px; align-items: end; padding: 64px 0 28px; }
.copy-block { border-left: 1px solid var(--line-strong); padding-left: 24px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 28px 0 54px; }
.feature-card { border-radius: var(--radius); padding: 28px; }
.icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: var(--cyan-2); border: 1px solid var(--line-strong); margin-bottom: 24px; background: rgba(103,232,249,.07); }
.audience-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; padding: 22px 0 54px; }
.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.audience-grid article { border-radius: 22px; padding: 20px; min-height: 126px; }
.audience-grid strong, .workflow-steps strong { display: block; font-family: var(--font-display); color: var(--text); letter-spacing: -.02em; }
.audience-grid span, .workflow-steps span { display: block; margin-top: 10px; color: var(--muted); line-height: 1.55; }
.workflow-section { padding: 14px 0 54px; }
.workflow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.workflow-steps article { position: relative; border-radius: 24px; padding: 22px; overflow: hidden; }
.workflow-steps article::after { content: ""; position: absolute; inset: auto -22px -42px auto; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.18), transparent 68%); }
.workflow-steps b { display: inline-block; margin-bottom: 18px; color: var(--cyan-2); font: 800 14px var(--font-display); letter-spacing: .18em; }
.trust-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; align-items: center; border-radius: 32px; padding: 30px; margin: 8px auto 58px; }
.trust-panel .principle-grid { margin-top: 0; justify-content: flex-start; }
.cta-band { display: flex; justify-content: space-between; gap: 24px; align-items: center; border-radius: 32px; padding: 34px; margin-bottom: 80px; }
.cta-band p { max-width: 720px; }
.page-hero { text-align: center; padding: 96px 0 54px; }
.feature-deep { display: grid; gap: 22px; padding-bottom: 80px; }
.deep-card { display: grid; grid-template-columns: .86fr 1.14fr; gap: 36px; align-items: center; padding: 28px; border-radius: 32px; }
.deep-card.reverse { grid-template-columns: 1.14fr .86fr; } .deep-card.reverse .deep-visual { order: 2; }
.deep-visual { min-height: 260px; border-radius: 26px; border: 1px solid var(--line); position: relative; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(34,211,238,.25), transparent 58%), rgba(255,255,255,.03); }
.deep-visual span { position: absolute; inset: 22%; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 0 80px rgba(34,211,238,.22); }
.deep-visual.voice::before, .deep-visual.ops::before, .deep-visual.assistant::before, .deep-visual.nordef::before { content:""; position:absolute; inset:22px; border-radius:22px; background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(103,232,249,.2) 17px 18px); mask-image: radial-gradient(circle, black, transparent 70%); }
.deep-visual.ops { background: radial-gradient(circle at 30% 30%, rgba(245,165,36,.2), transparent 40%), radial-gradient(circle at 70% 60%, rgba(34,211,238,.2), transparent 50%), rgba(255,255,255,.03); }
.deep-visual.assistant { background: radial-gradient(circle at 65% 35%, rgba(183,148,255,.28), transparent 48%), rgba(255,255,255,.03); }
.deep-visual.nordef { background: radial-gradient(circle at 50% 28%, rgba(245,165,36,.24), transparent 36%), radial-gradient(circle at 72% 68%, rgba(34,211,238,.18), transparent 46%), linear-gradient(135deg, rgba(12,18,27,.9), rgba(19,29,42,.72)); }
.deep-visual.nordef span { inset: 18% 28%; border-radius: 34px 34px 58px 58px; background: radial-gradient(circle at 50% 20%, rgba(245,165,36,.22), transparent 62%); box-shadow: inset 0 0 55px rgba(245,165,36,.12), 0 0 80px rgba(34,211,238,.18); }

/* Features: placér NORDEF radar som et kort ikon i visuell blokk */
.deep-card .nordef-radar {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 84px;
  min-width: 84px;
  height: 84px;
}

.check-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; color: var(--muted); }
.check-list li { position: relative; padding-left: 28px; } .check-list li::before { content: "✓"; position: absolute; left:0; color: var(--green); font-weight: 900; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-bottom: 38px; align-items: stretch; }
.pricing-hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.product-pricing { width: min(calc(100% - 32px), 1540px); padding-bottom: 24px; }
.price-card { position: relative; border-radius: 28px; padding: 24px; display: flex; flex-direction: column; overflow: hidden; }
.price-card::after { content: ""; position: absolute; inset: auto -42px -60px auto; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.16), transparent 70%); pointer-events: none; }
.price-card.featured { border-color: rgba(103,232,249,.55); transform: translateY(-12px); background: linear-gradient(180deg, rgba(23, 39, 58, .9), rgba(8, 14, 22, .78)); }
.price-card.nordef-card { border-color: rgba(245,165,36,.34); background: linear-gradient(180deg, rgba(31, 26, 17, .78), rgba(7, 12, 19, .7)); }
.price-card.nordef-card::after { background: radial-gradient(circle, rgba(245,165,36,.18), transparent 70%); }
.badge { position: absolute; top: 16px; right: 16px; padding: 7px 10px; border-radius: 999px; color: #061018; background: linear-gradient(135deg,var(--amber),var(--cyan)); font-weight: 900; font-size: 12px; }
.price-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border: 1px solid var(--line-strong); border-radius: 16px; color: var(--cyan-2); background: rgba(103,232,249,.07); font: 800 22px/1 var(--font-display); }
.product-summary { min-height: 88px; margin-bottom: 0; }
.price { margin: 18px 0 10px; color: var(--text); font: 800 clamp(30px, 2.4vw, 38px)/1 var(--font-display); } .price span { display: block; margin-top: 8px; color: var(--soft); font: 500 14px var(--font-body); }
.setup-price { display: inline-flex; width: fit-content; margin: 0 0 4px; padding: 8px 11px; border: 1px solid rgba(245,165,36,.28); border-radius: 999px; color: #ffd896; background: rgba(245,165,36,.08); font-size: 13px; font-weight: 800; }
.price-card .button { margin-top: auto; position: relative; z-index: 1; }
.nordef-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 4px 0 6px; }
.nordef-card-header h2 { margin-right: auto; }
.nordef-radar {
  position: relative;
  width: 72px;
  min-width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(245, 165, 36, 0.35);
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 165, 36, 0.32), rgba(11, 18, 28, 0.9) 58%),
    radial-gradient(circle at 50% 50%, rgba(245, 165, 36, 0.08) 0 42%, transparent 62%);
  overflow: hidden;
  box-shadow: inset 0 0 35px rgba(245, 165, 36, .2), 0 0 40px rgba(34, 211, 238, .14);
}
.nordef-radar::before,
.nordef-radar::after,
.nordef-radar .radar-sweep {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.nordef-radar::before {
  background:
    radial-gradient(circle, rgba(245, 165, 36, 0.22) 0, transparent 58%),
    conic-gradient(from 0deg, rgba(103, 232, 249, 0.28), rgba(103, 232, 249, 0.0) 42%, rgba(0,0,0, 0) 100%);
  transform-origin: 50% 50%;
  animation: nordef-scan 12s linear infinite;
  filter: saturate(1.1);
}
.nordef-radar::after {
  inset: 14px;
  border: 1px solid rgba(245, 165, 36, 0.28);
  opacity: 0.7;
  animation: nordef-pulse 2.8s ease-out infinite;
}
.nordef-radar .radar-sweep {
  inset: 24px;
  background:
    linear-gradient(90deg,
      rgba(34, 211, 238, 0.45),
      rgba(34, 211, 238, 0),
      rgba(245, 165, 36, 0));
  transform-origin: 50% 50%;
  animation: nordef-fan 5.5s linear infinite;
  opacity: 0.5;
}
@keyframes nordef-scan {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes nordef-fan {
  from { transform: rotate(-88deg); opacity: .22; }
  35% { opacity: .72; }
  100% { transform: rotate(272deg); opacity: .22; }
}
@keyframes nordef-pulse {
  0% { opacity: .1; transform: scale(0.86); }
  35% { opacity: .48; }
  100% { opacity: .08; transform: scale(1.11); }
}
@media (max-width: 560px) {
  .nordef-radar { width: 66px; min-width: 66px; height: 66px; }
}
.pricing-factors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pricing-factors strong { display: block; font-family: var(--font-display); color: var(--text); letter-spacing: -.02em; }
.pricing-factors span { display: block; margin-top: 10px; color: var(--muted); line-height: 1.55; }
.pricing-note { border-radius: 28px; padding: 30px; margin-bottom: 80px; }
.pricing-note-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.security-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; padding-bottom: 56px; }
.security-panel { border-radius: 32px; padding: 32px; }
.shield { height: 220px; display: grid; place-items: center; }
.shield span { width: 130px; height: 156px; border: 1px solid var(--line-strong); border-radius: 36px 36px 54px 54px; background: radial-gradient(circle at 50% 25%, rgba(103,232,249,.32), transparent 60%); box-shadow: inset 0 0 55px rgba(34,211,238,.18), 0 0 70px rgba(34,211,238,.25); }
.security-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.security-list article { border-radius: 24px; padding: 24px; }
.principles { padding-bottom: 80px; } .principle-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.contact-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 34px; align-items: center; padding: 92px 0 80px; min-height: calc(100vh - 150px); }
.contact-cards { display: grid; gap: 12px; margin-top: 34px; }
.contact-cards article { border-radius: 20px; padding: 18px; } .contact-cards strong { display:block; } .contact-cards span { color: var(--muted); font-size: 14px; }
.contact-form { border-radius: 30px; padding: 28px; display:grid; gap:16px; }
label { display:grid; gap:8px; color: var(--muted); font-weight:700; font-size:14px; }
input, textarea { width:100%; border:1px solid var(--line); border-radius:16px; padding:14px 16px; color:var(--text); background:rgba(0,0,0,.22); font: inherit; outline:none; }
input:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34,211,238,.12); }
.form-note { font-size: 13px; margin: 0; color: var(--soft); }
.site-footer { display:flex; justify-content:space-between; gap:18px; align-items:center; width:min(calc(100% - 32px), var(--max)); margin:0 auto; padding:26px 0 36px; border-top:1px solid var(--line); color:var(--soft); }
.site-footer p { margin:0; font-size:14px; } .site-footer div { display:flex; gap:16px; } .site-footer a { color:var(--muted); font-size:14px; }
.reveal { opacity: 0; transform: translateY(18px); animation: rise .72s ease forwards; } .delay-1{animation-delay:.12s}.delay-2{animation-delay:.24s}.delay-3{animation-delay:.36s}
@keyframes rise { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .nav-toggle { display:block; }
  .site-header { border-radius: 24px; align-items:flex-start; }
  .site-nav { display:none; position:absolute; left:12px; right:12px; top:70px; flex-direction:column; align-items:stretch; padding:12px; border:1px solid var(--line); border-radius:20px; background:rgba(5,10,17,.96); }
  .site-nav.open { display:flex; } .site-nav a { text-align:center; }
  .hero, .split, .deep-card, .deep-card.reverse, .pricing-breakdown, .security-layout, .contact-layout, .audience-section, .trust-panel { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .deep-card.reverse .deep-visual { order:0; }
  .card-grid, .security-list, .audience-grid, .workflow-steps, .pricing-factors { grid-template-columns:1fr; }
  .product-summary { min-height: auto; }
  .hero { min-height: auto; padding-top: 58px; }
  .cta-band { flex-direction:column; align-items:flex-start; }
  .price-card.featured { transform:none; }
}
@media (max-width: 560px) {
  .site-header { width: calc(100% - 20px); margin-top: 10px; }
  .brand { min-width:auto; } .brand small { display:none; }
  h1 { font-size: 42px; }
  .radar-card { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:1fr; }
  .hero-panel, .deep-card, .price-card, .contact-form { padding:20px; border-radius:24px; }
  .pricing-grid { grid-template-columns:1fr; }
  .page-hero { padding-top: 70px; }
}


/* Pricing v2: product sections with independent card rows */
.product-pricing.pricing-grid {
  display: block;
}
.product-pricing .pricing-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-bottom: 1.5rem;
}
.product-pricing .pricing-section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .product-pricing .pricing-row { grid-template-columns: 1fr; }
}


/* Public performance band */
.performance-band {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 22px;
  align-items: stretch;
  margin-top: 10px;
  margin-bottom: 34px;
}
.performance-band > div:first-child,
.performance-metrics article {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}
.performance-band h2 { margin-top: 0; }
.performance-band p { color: var(--t2); line-height: 1.65; }
.performance-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.performance-metrics article { min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.performance-metrics b { display:block; font: 800 clamp(2rem, 4vw, 3.4rem)/1 var(--font-display); color: var(--cyan-2); letter-spacing: -.05em; }
.performance-metrics span { display:block; margin-top: 12px; color: var(--soft); line-height: 1.45; }
@media (max-width: 900px) {
  .performance-band { grid-template-columns: 1fr; }
  .performance-metrics { grid-template-columns: 1fr; }
}