/* ================================================
   HYPERSCALER — EVA GROWTH ASSESSMENT
   Design: Instrument Serif italic titles,
   Plus Jakarta Sans body, numbered tiles,
   grain texture, single accent color
   ================================================ */

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

   :root {
     --bg:       #060410;
     --surface:  rgba(255,255,255,0.035);
     --border:   rgba(255,255,255,0.07);
     --purple:   #A855F7;
     --purple-d: #7C3AED;
     --purple-m: rgba(168,85,247,0.15);
     --white:    #FFFFFF;
     --text:     rgba(255,255,255,0.88);
     --muted:    rgba(255,255,255,0.38);
     --dim:      rgba(255,255,255,0.12);
     --error:    #F87171;
     --success:  #4ADE80;
     --r:        14px;
     --r-lg:     22px;
     --ease:     cubic-bezier(0.25, 0, 0, 1);
   }
   
   html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
   
   body {
     font-family: 'Plus Jakarta Sans', sans-serif;
     background: var(--bg);
     color: var(--text);
     min-height: 100dvh;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
   }
   
   /* Grain texture */
   .noise {
     position: fixed; inset: 0; z-index: 0;
     pointer-events: none;
     opacity: 0.028;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
     background-size: 180px;
   }
   
   /* Single ambient glow — bottom left */
   .bg-glow {
     position: fixed;
     bottom: -200px; left: -200px;
     width: 600px; height: 600px;
     background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 65%);
     pointer-events: none; z-index: 0;
     filter: blur(40px);
   }
   
   /* ─── Page layout ────────────────────────────── */
   .page {
     position: relative; z-index: 10;
     min-height: 100dvh;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0 16px 72px;
   }
   
   /* ─── Top bar ─────────────────────────────────── */
   .topbar {
     width: 100%; max-width: 700px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 22px 0 28px;
   }
   
   .logo {
     display: flex;
     align-items: center;
     gap: 9px;
     text-decoration: none;
     color: var(--white);
     font-family: 'Syne', sans-serif;
     font-size: 17px;
     font-weight: 600;
     letter-spacing: -0.01em;
   }
   
   .logo-img {
     height: 22px;
     width: auto;
     object-fit: contain;
   }
   
   .topbar-tag {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--muted);
   }
   
   /* ─── Card ───────────────────────────────────── */
   .card {
     width: 100%; max-width: 700px;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     overflow: hidden;
     /* subtle inner shadow for depth */
     box-shadow:
       inset 0 1px 0 rgba(255,255,255,0.06),
       0 32px 80px rgba(0,0,0,0.4);
   }
   
   /* ─── Segment progress ───────────────────────── */
   .seg-track {
     display: flex;
     gap: 4px;
     padding: 20px 28px 0;
   }
   
   .seg {
     flex: 1;
     height: 3px;
     background: rgba(255,255,255,0.07);
     border-radius: 100px;
     transition: background 0.35s var(--ease);
   }
   
   .seg.active { background: var(--purple); }
   .seg.done   { background: rgba(168,85,247,0.4); }
   
   /* ─── Viewport ───────────────────────────────── */
   .viewport {
     position: relative;
     min-height: 420px;
     padding: 0;
     overflow: hidden;
   }
   
   /* ─── Steps ──────────────────────────────────── */
   .step {
     display: none;
     will-change: transform, opacity;
   }
   
   .step.active {
     display: block;
     animation: stepIn 0.38s var(--ease) both;
   }
   
   .step.leaving {
     display: block;
     animation: stepOut 0.26s var(--ease) both;
     position: absolute;
     top: 0; left: 0; right: 0;
   }
   
   .step.active.from-back {
     animation: stepInBack 0.38s var(--ease) both;
   }
   
   @keyframes stepIn {
     from { opacity: 0; transform: translateX(32px); }
     to   { opacity: 1; transform: translateX(0); }
   }
   @keyframes stepOut {
     from { opacity: 1; transform: translateX(0); }
     to   { opacity: 0; transform: translateX(-24px); }
   }
   @keyframes stepInBack {
     from { opacity: 0; transform: translateX(-32px); }
     to   { opacity: 1; transform: translateX(0); }
   }
   
   /* ─── Step body ──────────────────────────────── */
   .step-body {
     padding: 32px 28px 24px;
     position: relative;
   }
   
   /* Large watermark number behind the title */
   .step-num {
     position: absolute;
     top: 18px; right: 24px;
     font-family: 'Syne', sans-serif;
     font-size: 96px;
     font-weight: 700;
     color: rgba(255,255,255,0.025);
     line-height: 1;
     user-select: none;
     pointer-events: none;
     letter-spacing: -0.04em;
   }
   
   /* ─── Question title ─────────────────────────── */
   .q {
     font-family: 'Instrument Serif', serif;
     font-style: normal;
     font-size: clamp(24px, 4.5vw, 32px);
     line-height: 1.2;
     color: var(--white);
     margin-bottom: 8px;
     letter-spacing: -0.01em;
   }
   
   /* italic highlight inside the title */
   .q em {
     font-style: italic;
     color: rgba(255,255,255,0.9);
   }
   
   .q-hint {
     font-size: 13.5px;
     font-weight: 300;
     color: var(--muted);
     margin-bottom: 24px;
     line-height: 1.5;
   }
   
   /* ─── Options ────────────────────────────────── */
   .opts {
     display: grid;
     gap: 8px;
     margin-top: 24px;
   }
   
   .opts.grid-2 { grid-template-columns: 1fr 1fr; }
   .opts.grid-1 { grid-template-columns: 1fr; }
   
   /* ─── Option card ────────────────────────────── */
   .opt {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 15px 18px;
     background: rgba(255,255,255,0.03);
     border: 1px solid rgba(255,255,255,0.07);
     border-left: 2.5px solid transparent;
     border-radius: var(--r);
     cursor: pointer;
     text-align: left;
     font-family: 'Plus Jakarta Sans', sans-serif;
     color: var(--text);
     transition:
       background  0.18s var(--ease),
       border-color 0.18s var(--ease),
       transform   0.18s var(--ease),
       box-shadow  0.18s var(--ease);
     position: relative;
   }
   
   .opt:hover {
     background: rgba(255,255,255,0.055);
     border-left-color: rgba(168,85,247,0.35);
     transform: translateX(1px);
   }
   
   .opt:active { transform: translateX(0); }
   
   .opt.selected {
     background: rgba(168,85,247,0.09);
     border-color: rgba(168,85,247,0.25);
     border-left-color: var(--purple);
   }
   
   /* Checkmark for selected */
   .opt.selected::after {
     content: '';
     position: absolute;
     top: 50%; right: 14px;
     transform: translateY(-50%);
     width: 16px; height: 16px;
     border-radius: 50%;
     background: var(--purple);
     background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: center;
   }
   
   /* ─── Option number (left pill) ────────────────── */
   .opt-n {
     font-family: 'Syne', sans-serif;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.05em;
     color: rgba(255,255,255,0.2);
     min-width: 22px;
     transition: color 0.18s var(--ease);
     flex-shrink: 0;
   }
   
   .opt.selected .opt-n { color: var(--purple); }
   
   .opt-l {
     font-size: 14px;
     font-weight: 500;
     color: rgba(255,255,255,0.85);
     line-height: 1.3;
     flex: 1;
   }
   
   /* stack layout for subtext */
   .opt-stack {
     display: flex;
     flex-direction: column;
     gap: 2px;
     flex: 1;
   }
   
   .opt-sub {
     font-size: 11.5px;
     font-weight: 300;
     color: var(--muted);
   }
   
   /* ─── Wide option (for steps 2 & 5) ────────────── */
   .opt.wide {
     padding: 16px 20px;
     gap: 16px;
   }
   
   .opt-body {
     display: flex;
     flex-direction: column;
     gap: 3px;
     flex: 1;
     padding-right: 20px; /* space for checkmark */
   }
   
   .opt-d {
     font-size: 12px;
     font-weight: 300;
     color: var(--muted);
     line-height: 1.4;
   }
   
   /* ─── Icon option (step 4) ─────────────────────── */
   .opt.ico-opt {
     gap: 12px;
   }
   
   .opt-ico {
     width: 32px; height: 32px;
     border-radius: 8px;
     background: rgba(255,255,255,0.04);
     border: 1px solid rgba(255,255,255,0.07);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: rgba(255,255,255,0.5);
     transition: background 0.18s var(--ease), color 0.18s var(--ease);
   }
   
   .opt.selected .opt-ico {
     background: rgba(168,85,247,0.15);
     border-color: rgba(168,85,247,0.3);
     color: var(--purple);
   }
   
   /* multi-select note */
   .multi-note {
     font-size: 11.5px;
     color: var(--muted);
     margin-top: 12px;
     font-style: italic;
     font-weight: 300;
     text-align: right;
   }
   
   /* ─── Lead form ──────────────────────────────── */
   .lead-fields {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-top: 24px;
   }
   
   .lf-row {
     display: flex;
     flex-direction: column;
     gap: 6px;
   }
   
   .lf-label {
     font-size: 12.5px;
     font-weight: 500;
     color: rgba(255,255,255,0.55);
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .lf-tag {
     font-size: 10px;
     font-weight: 400;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     padding: 2px 7px;
     border-radius: 100px;
   }
   
   .opt-tag {
     color: rgba(255,255,255,0.25);
     border: 1px solid rgba(255,255,255,0.1);
   }
   
   .req-tag {
     color: var(--purple);
     border: 1px solid rgba(168,85,247,0.35);
   }
   
   .lf-input {
     width: 100%;
     padding: 13px 16px;
     background: rgba(255,255,255,0.04);
     border: 1px solid rgba(255,255,255,0.09);
     border-radius: var(--r);
     color: var(--white);
     font-family: 'Plus Jakarta Sans', sans-serif;
     font-size: 14.5px;
     font-weight: 400;
     outline: none;
     transition: border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
     -webkit-appearance: none;
   }
   
   .lf-input::placeholder { color: rgba(255,255,255,0.18); }
   
   .lf-input:focus {
     border-color: rgba(168,85,247,0.5);
     background: rgba(168,85,247,0.05);
     box-shadow: 0 0 0 3px rgba(168,85,247,0.08);
   }
   
   .lf-input.has-error {
     border-color: rgba(248,113,113,0.6);
     box-shadow: 0 0 0 3px rgba(248,113,113,0.06);
   }
   
   .lf-err {
     font-size: 12px;
     color: var(--error);
     display: none;
   }
   .lf-err.show { display: block; }
   
   /* privacy */
   .privacy {
     font-size: 12px;
     font-weight: 300;
     color: rgba(255,255,255,0.25);
     text-align: center;
     padding: 4px 0;
   }
   
   /* ─── Submit button ──────────────────────────── */
   .submit-btn {
     width: 100%;
     padding: 17px 24px;
     background: linear-gradient(135deg, var(--purple-d) 0%, var(--purple) 100%);
     border: none;
     border-radius: var(--r);
     color: var(--white);
     font-family: 'Syne', sans-serif;
     font-size: 15px;
     font-weight: 700;
     letter-spacing: -0.01em;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     transition: opacity 0.18s, transform 0.18s var(--ease), box-shadow 0.18s;
     box-shadow: 0 6px 28px rgba(168,85,247,0.28);
     position: relative;
     overflow: hidden;
     margin-top: 4px;
   }
   
   .submit-btn::before {
     content: '';
     position: absolute; inset: 0;
     background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 60%);
   }
   
   .submit-btn:hover:not(:disabled) {
     opacity: 0.92;
     transform: translateY(-1px);
     box-shadow: 0 10px 36px rgba(168,85,247,0.38);
   }
   
   .submit-btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
     transform: none;
   }
   
   .sb-label, .sb-arr { position: relative; z-index: 1; }
   .sb-arr { font-size: 17px; }
   
   .sb-spin {
     display: none;
     width: 17px; height: 17px;
     border: 2px solid rgba(255,255,255,0.25);
     border-top-color: var(--white);
     border-radius: 50%;
     animation: spin 0.65s linear infinite;
     position: relative; z-index: 1;
   }
   .sb-spin.on { display: block; }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   /* ─── Footer nav ─────────────────────────────── */
   .foot {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 28px 26px;
     border-top: 1px solid rgba(255,255,255,0.055);
   }
   
   .back-btn {
     background: transparent;
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: var(--r);
     color: var(--muted);
     font-family: 'Plus Jakarta Sans', sans-serif;
     font-size: 13.5px;
     font-weight: 500;
     padding: 10px 18px;
     cursor: pointer;
     transition: color 0.18s, border-color 0.18s;
     visibility: hidden; /* hidden on step 1, visible after */
   }
   
   .back-btn.show {
     visibility: visible;
   }
   
   .back-btn:hover { color: var(--white); border-color: rgba(255,255,255,0.2); }
   
   .next-btn {
     background: var(--purple);
     border: none;
     border-radius: var(--r);
     color: var(--white);
     font-family: 'Plus Jakarta Sans', sans-serif;
     font-size: 13.5px;
     font-weight: 600;
     padding: 11px 26px;
     cursor: pointer;
     margin-left: auto;
     transition: opacity 0.18s, transform 0.18s var(--ease), box-shadow 0.18s;
     box-shadow: 0 4px 14px rgba(168,85,247,0.22);
   }
   
   .next-btn:hover:not(:disabled) {
     opacity: 0.88;
     transform: translateY(-1px);
     box-shadow: 0 7px 20px rgba(168,85,247,0.32);
   }
   
   .next-btn:disabled {
     opacity: 0.3;
     cursor: not-allowed;
     transform: none;
   }
   
   /* On step 8 hide the next btn (submit btn handles it) */
   .foot.step8 .next-btn { display: none; }
   
   /* ─── Thank You ──────────────────────────────── */
   .ty-card {
     display: none;
     width: 100%; max-width: 700px;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 32px 80px rgba(0,0,0,0.4);
     padding: 60px 40px;
     text-align: center;
     flex-direction: column;
     align-items: center;
     gap: 18px;
   }
   
   .ty-card.show {
     display: flex;
     animation: tyIn 0.5s var(--ease) both;
   }
   
   @keyframes tyIn {
     from { opacity: 0; transform: translateY(16px) scale(0.98); }
     to   { opacity: 1; transform: translateY(0) scale(1); }
   }
   
   .ty-check {
     width: 64px; height: 64px;
     border-radius: 50%;
     background: rgba(168,85,247,0.1);
     border: 1px solid rgba(168,85,247,0.25);
     display: flex; align-items: center; justify-content: center;
     margin-bottom: 4px;
     animation: checkPop 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.15s both;
   }
   @keyframes checkPop {
     from { transform: scale(0.4); opacity: 0; }
     to   { transform: scale(1); opacity: 1; }
   }
   
   .ty-h {
     font-family: 'Instrument Serif', serif;
     font-size: clamp(28px, 5vw, 40px);
     font-weight: 400;
     color: var(--white);
     letter-spacing: -0.02em;
   }
   
   .ty-p {
     font-size: 15px;
     font-weight: 300;
     color: var(--muted);
     max-width: 420px;
     line-height: 1.7;
   }
   
   .ty-stats {
     display: flex;
     align-items: center;
     gap: 0;
     border: 1px solid rgba(168,85,247,0.2);
     border-radius: var(--r);
     overflow: hidden;
     margin: 8px 0;
   }
   
   .ty-stat {
     padding: 18px 28px;
     display: flex;
     flex-direction: column;
     gap: 3px;
     align-items: center;
     background: rgba(168,85,247,0.05);
   }
   
   .ty-divider {
     width: 1px;
     align-self: stretch;
     background: rgba(168,85,247,0.2);
   }
   
   .ts-n {
     font-family: 'Syne', sans-serif;
     font-size: 22px;
     font-weight: 700;
     color: rgba(168,85,247,0.9);
   }
   
   .ts-l {
     font-size: 11px;
     font-weight: 400;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }
   
   .ty-cta {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: linear-gradient(135deg, var(--purple-d), var(--purple));
     color: var(--white);
     font-family: 'Syne', sans-serif;
     font-size: 14.5px;
     font-weight: 700;
     padding: 15px 34px;
     border-radius: 100px;
     text-decoration: none;
     letter-spacing: -0.01em;
     transition: opacity 0.18s, transform 0.18s var(--ease), box-shadow 0.18s;
     box-shadow: 0 8px 28px rgba(168,85,247,0.3);
     margin-top: 8px;
   }
   
   .ty-cta:hover {
     opacity: 0.9;
     transform: translateY(-2px);
     box-shadow: 0 14px 36px rgba(168,85,247,0.42);
   }
   
   .ty-sub {
     font-size: 12px;
     font-weight: 300;
     color: rgba(255,255,255,0.2);
     margin-top: -10px;
   }
   
   /* ─── Responsive ──────────────────────────────── */
   @media (max-width: 580px) {
     .page { padding: 0 12px 56px; }
     .topbar { padding: 16px 0 20px; }
     .topbar-tag { display: none; }
   
     .seg-track { padding: 16px 20px 0; gap: 3px; }
   
     .step-body { padding: 24px 20px 18px; }
     .foot { padding: 14px 20px 22px; }
   
     .step-num { font-size: 64px; top: 14px; right: 16px; }
   
     .opts.grid-2 { grid-template-columns: 1fr 1fr; gap: 7px; }
     .opt { padding: 13px 14px; gap: 10px; }
     .opt-l { font-size: 13px; }
     .opt-n { font-size: 10px; }
   
     .opt.wide .opt-d { display: none; }
     .opt-sub { display: none; }
   
     .opt.ico-opt .opt-ico { width: 28px; height: 28px; border-radius: 7px; }
   
     .ty-card { padding: 44px 24px; }
     .ty-stats { width: 100%; }
     .ty-stat { padding: 14px 16px; }
   }
   
   @media (max-width: 360px) {
     .opts.grid-2 { grid-template-columns: 1fr; }
   }
   
   /* ─── Scrollbar ───────────────────────────────── */
   ::-webkit-scrollbar { width: 3px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.25); border-radius: 100px; }