:root {
  --surface-default: #070b18;
  --surface-raised: #0d1428;
  --surface-card: rgba(17, 27, 52, .86);
  --surface-glass: rgba(12, 20, 40, .76);
  --surface-soft: rgba(121, 150, 255, .08);
  --primary-brand: linear-gradient(135deg, #6ee7ff 0%, #7487ff 52%, #a855f7 100%);
  --cta-button: linear-gradient(135deg, #ffd166 0%, #ff9f43 100%);
  --cta-button-text: #171106;
  --accent-cyan: #69e6ff;
  --accent-purple: #a78bfa;
  --accent-orange: #ffad57;
  --text-primary: #f7f9ff;
  --text-secondary: #aeb9d2;
  --text-on-glass: #f7f9ff;
  --border-subtle: rgba(151, 170, 224, .17);
  --focus-ring: #70e4ff;
  --font-heading: Montserrat, 'Segoe UI', Arial, sans-serif;
  --font-body: Inter, 'Segoe UI', Arial, sans-serif;
  --fs-xl: clamp(2.25rem, 6vw, 4.8rem);
  --fs-lg: clamp(1.75rem, 3.6vw, 3rem);
  --fs-md: clamp(1.15rem, 2vw, 1.4rem);
  --fs-sm: 1rem;
  --fs-base: 1rem;
  --fs-xs: .82rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 36px;
  --space-6: 72px;
  --space-7: 104px;
  --container-max: 1180px;
  --container-pad: clamp(18px, 4vw, 32px);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-full: 999px;
  --shadow-soft: 0 22px 70px rgba(0, 0, 0, .28);
  --shadow-glow: 0 0 45px rgba(105, 230, 255, .13);
  --transition-fast: .22s cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font-body); font-size: 16px; line-height: 1.7; scroll-behavior: smooth; background: var(--surface-default); color: var(--text-primary); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; overflow-x: hidden; text-rendering: optimizeLegibility; background: radial-gradient(circle at 85% 5%, rgba(105,230,255,.1), transparent 25rem), radial-gradient(circle at 5% 35%, rgba(167,139,250,.09), transparent 28rem), var(--surface-default); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background-image: radial-gradient(rgba(255,255,255,.32) .65px, transparent .65px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 70%); }
main { overflow: hidden; }
img, video { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
::selection { color: #07101d; background: var(--accent-cyan); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; color: var(--text-primary); margin-bottom: var(--space-3); text-wrap: balance; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); letter-spacing: -.02em; }
h4 { font-size: var(--fs-sm); }
p { color: var(--text-secondary); margin-bottom: var(--space-3); max-width: 72ch; }
ul, ol { padding-left: 1.25rem; margin-bottom: var(--space-3); color: var(--text-secondary); }
li + li { margin-top: .45rem; }
blockquote { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent-cyan); color: var(--text-secondary); background: var(--surface-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-5) 0; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.section { position: relative; padding-block: var(--space-7); }
.section:nth-child(even) { background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(121,150,255,.045), rgba(255,255,255,.015)); }
.section h2:not(.card h2) { max-width: 800px; }
.section > .container > h2:first-child { margin-bottom: var(--space-5); }

.surface-card, .card, .surface-glass { border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); }
.surface-card, .card { background: linear-gradient(145deg, rgba(21,33,63,.94), rgba(11,18,36,.92)); border-radius: var(--radius-md); }
.surface-glass, .glass { color: var(--text-on-glass); background: var(--surface-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-md); }
.card { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 32px); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 42%; height: 2px; background: var(--primary-brand); opacity: .85; }
.card:hover { transform: translateY(-6px); border-color: rgba(105,230,255,.35); box-shadow: var(--shadow-soft), var(--shadow-glow); }
.card > *:last-child { margin-bottom: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 44px; min-height: 50px; padding: 0 25px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-full); font: 700 .92rem var(--font-heading); white-space: nowrap; transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast); }
.btn-primary { color: #07101d; background: linear-gradient(135deg, #d7f9ff, var(--accent-cyan)); box-shadow: 0 10px 32px rgba(105,230,255,.2); }
.btn-cta { color: var(--cta-button-text); background: var(--cta-button); box-shadow: 0 12px 35px rgba(255,173,87,.22); }
.btn:hover { filter: brightness(1.08); transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.98); }
.badge { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid currentColor; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.badge-cyan { color: var(--accent-cyan); background: rgba(105,230,255,.08); }
.badge-purple { color: #c4b5fd; background: rgba(167,139,250,.09); }

.input, input:not([type=submit]):not([type=checkbox]):not([type=radio]), textarea, select { width: 100%; min-height: 50px; padding: 12px 16px; color: var(--text-primary); background: rgba(5,10,24,.72); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
textarea { min-height: 145px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 4px rgba(105,230,255,.1); }
label { font-weight: 600; color: #e8edfa; }

.stack > * + * { margin-top: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.flex { display: flex; gap: var(--space-3); }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex > * { min-width: 0; }
.hidden { display: none !important; }

/* Shared presentation for all page-specific hero blocks. */
[class$="-hero"] { isolation: isolate; overflow: hidden; background: linear-gradient(135deg, rgba(28,48,93,.88), rgba(36,20,70,.76)) !important; }
[class$="-hero"]::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -190px; z-index: -1; border-radius: 50%; background: rgba(105,230,255,.14); filter: blur(2px); }
[class$="-hero"] h1 { background: linear-gradient(110deg, #fff 15%, #c9f7ff 55%, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
[class$="-hero"] img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border: 1px solid rgba(255,255,255,.17); box-shadow: 0 30px 80px rgba(0,0,0,.42), 0 0 60px rgba(105,230,255,.08); }
[class$="-hero"] p, [class$="-cta"] p { color: #d5def1; font-size: clamp(1rem, 1.5vw, 1.12rem); }
[class$="-cta"] { background: linear-gradient(135deg, #182a58, #351b65) !important; }
[class$="-cta"] h2 { color: #fff; }

@media (max-width: 900px) {
  :root { --space-6: 56px; --space-7: 76px; }
  .section { padding-block: var(--space-7); }
}
@media (max-width: 600px) {
  :root { --space-5: 28px; --space-6: 48px; --space-7: 62px; }
  html { font-size: 15px; }
  .section { padding-block: var(--space-7); }
  .btn { width: 100%; white-space: normal; text-align: center; }
  .card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
