/* ═══════════ RESET & BASE ═══════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Inter',sans-serif;
  background:#000000;
  color:#6b7280;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:rgba(255,255,255,0.15);color:#fff}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:#000000}
::-webkit-scrollbar-thumb{background:#1a1a2e;border-radius:2px}

/* ═══════════ CSS VARIABLES ═══════════ */
:root{
  --bg-void:#000000;
  --bg-deep:#030305;
  --bg-surface:rgba(12,12,20,0.8);
  --glass-bg:rgba(255,255,255,0.02);
  --glass-bg-hover:rgba(255,255,255,0.04);
  --glass-border:rgba(255,255,255,0.05);
  --glass-border-hover:rgba(255,255,255,0.12);
  --text-primary:#ffffff;
  --text-secondary:#9ca3af;
  --text-muted:#4b5563;
  --accent-teal:#00d4b4;
  --accent-teal-dim:rgba(0,212,180,0.12);
  --accent-teal-glow:rgba(0,212,180,0.06);
  --accent-gold:#c9a84c;
  --accent-gold-dim:rgba(201,168,76,0.1);
}

/* ═══════════ NOISE TEXTURE OVERLAY ═══════════ */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;opacity:0.35;
}

/* ═══════════ AMBIENT ORBS ═══════════ */
.orb{
  position:fixed;border-radius:50%;pointer-events:none;
  filter:blur(100px);z-index:0;
  transition:transform 0.1s linear;
  will-change:transform;
}
.orb-1{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,212,180,0.04) 0%,transparent 70%);
  top:-200px;right:-150px;
}
.orb-2{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(201,168,76,0.03) 0%,transparent 70%);
  bottom:-100px;left:-150px;
}
.orb-3{
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(255,255,255,0.02) 0%,transparent 70%);
  top:50%;left:30%;
  transform:translateY(-50%);
}

/* ═══════════ GRID BACKGROUND ═══════════ */
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%);
}

/* ═══════════ GLASSMORPHISM SYSTEM ═══════════ */
.glass{
  background:rgba(5,5,8,0.72);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.05);
}
.glass-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.005) 100%);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.05);
  transition:all 0.4s cubic-bezier(0.23,1,0.32,1);
  position:relative;overflow:hidden;
}
.glass-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.03) 0%,transparent 60%);
  opacity:0;transition:opacity 0.4s ease;pointer-events:none;
}
.glass-card:hover{
  background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.01) 100%);
  border-color:rgba(255,255,255,0.1);
  transform:translateY(-4px) translateZ(0);
  box-shadow:0 24px 64px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.04),inset 0 1px 0 rgba(255,255,255,0.06);
}
.glass-card:hover::before{opacity:1}

.glass-metric{
  background:rgba(255,255,255,0.015);
  border:1px solid rgba(255,255,255,0.04);
  transition:all 0.35s ease;
  position:relative;overflow:hidden;
}
.glass-metric::after{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
}
.glass-metric:hover{
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.15);
  transform:translateY(-3px);
  box-shadow:0 20px 40px rgba(0,0,0,0.5),0 0 20px rgba(255,255,255,0.02);
}

/* ═══════════ NAVBAR ═══════════ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border-bottom:1px solid rgba(255,255,255,0.03);
  transition:all 0.3s ease;
}
#navbar.scrolled{
  background:rgba(0,0,0,0.9);
  border-bottom-color:rgba(255,255,255,0.06);
  box-shadow:0 4px 40px rgba(0,0,0,0.8);
}
.nav-inner{
  max-width:1320px;margin:0 auto;
  padding:0 2rem;
  height:68px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:14px;cursor:pointer;text-decoration:none;}
.logo-graphic{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo:hover .logo-graphic{transform:scale(1.08);}
.logo-text{
  font-size:0.875rem;font-weight:800;color:#fff;
  letter-spacing:0.18em;text-transform:uppercase;
}
.logo-text span{font-weight:300;color:var(--text-muted);}

.nav-links{display:flex;align-items:center;gap:2.5rem;}
.nav-btn{
  background:none;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:0.6875rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-muted);
  transition:color 0.25s ease;
  padding:4px 0;position:relative;
}
.nav-btn::after{
  content:'';
  position:absolute;bottom:-2px;left:0;right:0;height:1px;
  background:#fff;
  transform:scaleX(0);transition:transform 0.3s ease;
  transform-origin:left;
}
.nav-btn:hover,.nav-btn.active{color:#fff;}
.nav-btn.active::after{transform:scaleX(1)}

/* Dark Premium Buttons */
.btn-primary{
  padding:10px 22px;
  background:linear-gradient(135deg, #1f2937, #0f172a);
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:2px;
  font-family:'Inter',sans-serif;
  font-size:0.6875rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;
  transition:all 0.3s ease;
}
/* Login button — ghost outline variant for nav */
.btn-login{
  padding:8px 18px;
  background:transparent;
  color:var(--text-secondary);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:2px;
  font-family:'Inter',sans-serif;
  font-size:0.6875rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;
  transition:all 0.25s ease;
}
.btn-login:hover{
  color:#fff;
  border-color:rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.04);
}



/* ═══════════ MAIN LAYOUT ═══════════ */
#app{position:relative;z-index:10}
.page{display:none;min-height:100vh;padding-top:68px;}
.page.active{display:block;animation:pageIn 0.5s cubic-bezier(0.23,1,0.32,1) forwards;}
@keyframes pageIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.container{max-width:1320px;margin:0 auto;padding:0 2rem;}

/* ═══════════ 3D PARALLAX ELEMENTS ═══════════ */
.parallax-layer{will-change:transform;transition:transform 0.05s linear;}

/* ═══════════ HERO ═══════════ */
#hero-section{
  min-height:calc(100vh - 68px);
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;
  padding:6rem 2rem 4rem;
  max-width:1320px;margin:0 auto;
  position:relative;
}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:2px;
  padding:5px 14px;
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:#fff;
  margin-bottom:2rem;
}
.eyebrow-dot{
  width:5px;height:5px;
  background:#fff;border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}

.hero-headline{
  font-family:'Oswald',sans-serif;
  font-size:clamp(4rem,10vw,9.5rem);
  font-weight:700;
  color:#fff;
  line-height:0.95;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  margin-bottom:1.75rem;
  max-width:900px;
}

.hero-sub{
  font-size:1.0625rem;line-height:1.75;
  color:var(--text-secondary);
  max-width:480px;
  margin-bottom:2.75rem;
  font-weight:300;
}

.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:5rem;}

.btn-ghost{
  padding:13px 28px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:2px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:0.75rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;
  transition:all 0.3s ease;
}
.btn-ghost:hover{
  border-color:rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.05);
  transform:translateY(-1px);
}

/* ═══════════ METRICS STRIP ═══════════ */
.metrics-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  width:100%;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.03);
  border-top:1px solid rgba(255,255,255,0.06);
}
@media(max-width:768px){.metrics-strip{grid-template-columns:repeat(2,1fr)}}
.metric-cell{
  padding:2rem 1.75rem;
  background:rgba(3,3,5,0.8);
  text-align:center;
  transition:background 0.3s ease;
  position:relative;
}
.metric-cell::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  opacity:0;transition:opacity 0.3s ease;
}
.metric-cell:hover{background:rgba(255,255,255,0.02);}
.metric-cell:hover::before{opacity:1}
.metric-label{
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:0.625rem;
}
.metric-value{
  font-size:2rem;font-weight:800;
  color:#fff;letter-spacing:-0.03em;
  line-height:1;margin-bottom:0.375rem;
}
.metric-sub{font-size:0.7rem;color:var(--text-secondary);}

/* ═══════════ SCROLL REVEAL ═══════════ */
.reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity 0.7s ease,transform 0.7s ease;
}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}

/* ═══════════ SECTION HEADER ═══════════ */
.section-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:2px;padding:4px 12px;
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:#fff;
  margin-bottom:1.25rem;
}
.section-title{
  font-size:clamp(1.75rem,3.5vw,3rem);
  font-weight:800;color:#fff;
  letter-spacing:-0.025em;line-height:1.1;
  margin-bottom:1rem;
}
.section-body{
  font-size:0.875rem;line-height:1.8;
  color:var(--text-secondary);max-width:560px;
}

/* ═══════════ DIVIDER ═══════════ */
.divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);
  margin:0;
}

/* ═══════════ SOLUTIONS PAGE ═══════════ */
.solutions-page{padding:5rem 0;}
.col-label{
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:6px 14px;border-radius:2px;
  margin-bottom:1.5rem;display:inline-block;
}
.col-label.teal{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
}
.col-label.gold{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--text-secondary);
}
.solutions-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
  margin-bottom:3rem;
}
@media(max-width:900px){.solutions-grid{grid-template-columns:1fr}}

.sol-card{padding:2rem;border-radius:0;}
.sol-icon{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;border-radius:2px;
}
.sol-icon.teal{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
}
.sol-icon.gold{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
}
.sol-title{
  font-size:1rem;font-weight:700;color:#fff;
  margin-bottom:0.625rem;
}
.sol-desc{
  font-size:0.8125rem;line-height:1.75;
  color:var(--text-muted);margin-bottom:1.25rem;
}
.sol-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.5rem;}
.tag{
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:3px 10px;border-radius:2px;
}
.tag.teal{
  background:rgba(255,255,255,0.05);
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
}
.tag.gold{
  background:rgba(255,255,255,0.02);
  color:var(--text-secondary);
  border:1px solid rgba(255,255,255,0.1);
}
.tag.neutral{
  background:rgba(255,255,255,0.02);
  color:var(--text-muted);
  border:1px solid rgba(255,255,255,0.05);
}

.sol-btn{
  width:100%;padding:11px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:2px;
  color:var(--text-secondary);
  font-family:'Inter',sans-serif;
  font-size:0.65rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;
  transition:all 0.3s ease;
}
.sol-btn:hover{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.3);
  color:#fff;
}

/* Process panel */
.process-panel{
  background:rgba(255,255,255,0.01);
  border:1px solid rgba(255,255,255,0.04);
  padding:3rem;
  margin-top:3rem;
}
.process-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;
}
@media(max-width:768px){.process-grid{grid-template-columns:1fr;gap:2rem}}
.process-step{
  padding-left:1.25rem;
  border-left:2px solid rgba(255,255,255,0.1);
  transition:border-color 0.3s ease;
  margin-bottom:1.5rem;
}
.process-step:hover{border-left-color:rgba(255,255,255,0.5)}
.step-label{
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:#fff;margin-bottom:4px;
}
.step-text{font-size:0.8125rem;color:var(--text-muted);line-height:1.7;}

/* ═══════════ EMI CALCULATOR ═══════════ */
.calc-page{padding:5rem 0;}
.calc-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;
  align-items:start;
}
@media(max-width:768px){.calc-wrap{grid-template-columns:1fr}}

.calc-panel{padding:2.5rem;}
.calc-tabs{
  display:flex;border-bottom:1px solid rgba(255,255,255,0.05);
  margin-bottom:2rem;
}
.calc-tab{
  flex:1;padding-bottom:14px;
  background:none;border:none;
  font-family:'Inter',sans-serif;
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-muted);
  cursor:pointer;transition:all 0.3s ease;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.calc-tab.active{color:#fff;border-bottom-color:#fff;}

.slider-group{margin-bottom:1.75rem;}
.slider-label{
  display:flex;justify-content:space-between;
  margin-bottom:10px;
}
.slider-label span:first-child{
  font-size:0.6875rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-muted);
}
.slider-val{
  font-size:0.8125rem;font-weight:700;
  color:#fff;
  background:rgba(255,255,255,0.05);
  padding:2px 10px;border-radius:2px;
}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:3px;
  background:rgba(255,255,255,0.1);
  border-radius:0;outline:none;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;height:16px;
  background:#fff;border-radius:50%;
  cursor:pointer;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
  box-shadow:0 0 10px rgba(255,255,255,0.2);
}
input[type=range]::-webkit-slider-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 0 16px rgba(255,255,255,0.4);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;
  background:#fff;border-radius:50%;border:none;
  cursor:pointer;
}

.calc-result{
  border-top:1px solid rgba(255,255,255,0.05);
  padding-top:1.75rem;margin-top:1.75rem;
}
.emi-display{
  font-size:2.75rem;font-weight:900;
  color:#fff;letter-spacing:-0.03em;
  margin-bottom:0.375rem;
}
.emi-note{font-size:0.75rem;color:var(--text-muted);}

.calc-apply{
  width:100%;padding:14px;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.15);
  border-radius:2px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:0.75rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;
  margin-top:1.5rem;
  transition:all 0.3s ease;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.calc-apply:hover{
  background:linear-gradient(135deg,rgba(255,255,255,0.15),rgba(255,255,255,0.05));
  border-color:rgba(255,255,255,0.3);
  box-shadow:0 0 24px rgba(255,255,255,0.1);
  transform:translateY(-1px);
}

/* Donut chart */
.donut-wrap{
  position:relative;width:160px;height:160px;
  margin:0 auto 1.5rem;
}
.donut-wrap svg{transform:rotate(-90deg);}
.donut-center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
}
.donut-pct{font-size:1.375rem;font-weight:800;color:#fff;}
.donut-lbl{font-size:0.6rem;color:var(--text-muted);margin-top:2px;text-transform:uppercase;letter-spacing:0.08em;}

.legend{display:flex;flex-direction:column;gap:10px;margin-bottom:1.5rem;}
.legend-item{display:flex;align-items:center;gap:10px;font-size:0.75rem;color:var(--text-muted);}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* Calc summary */
.calc-summary{padding:1.5rem;}
.summary-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.625rem 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.summary-row:last-child{border-bottom:none;}
.summary-key{font-size:0.75rem;color:var(--text-muted);}
.summary-val{font-size:0.8125rem;font-weight:700;color:#fff;}

/* ═══════════ ENQUIRY PAGE ═══════════ */
.enquiry-page{padding:5rem 0;}
.enquiry-grid{
  display:grid;grid-template-columns:1fr 1.5fr;gap:3.5rem;align-items:start;
}
@media(max-width:900px){.enquiry-grid{grid-template-columns:1fr}}

.info-block{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  padding:1.5rem;margin-top:2rem;
}
.info-block-title{
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:0.875rem;
}
.info-block-body{
  font-size:0.8125rem;line-height:1.9;
  color:#6b7280;
}

.enquiry-card{position:relative;}
.card-top-line{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
}

/* Form fields */
.form-group{margin-bottom:1.25rem;}
.form-label{
  display:block;
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}
.form-input{
  width:100%;
  padding:11px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:2px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:0.875rem;
  outline:none;
  transition:border-color 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
}
.form-input:focus{
  border-color:rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.05);
  box-shadow:0 0 0 3px rgba(255,255,255,0.05);
}
.form-input::placeholder{color:var(--text-muted);}
.form-select option{background:#0a0a12;color:#fff;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

.form-error{
  background:rgba(239,68,68,0.07);
  border:1px solid rgba(239,68,68,0.2);
  padding:10px 14px;
  font-size:0.8rem;color:#f87171;
  margin-bottom:1rem;border-radius:2px;
}

.form-submit{
  width:100%;padding:15px;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.15);
  border-radius:2px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:0.75rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;
  transition:all 0.3s ease;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.form-submit:hover{
  background:linear-gradient(135deg,rgba(255,255,255,0.15),rgba(255,255,255,0.05));
  border-color:rgba(255,255,255,0.3);
  box-shadow:0 0 24px rgba(255,255,255,0.1);
  transform:translateY(-1px);
}

.form-disclaimer{
  font-size:0.65rem;line-height:1.6;
  color:var(--text-muted);text-align:center;margin-top:1rem;
}

/* Success state */
.success-wrap{text-align:center;padding:3rem 1.5rem;}
.success-icon{
  width:72px;height:72px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;
}
.success-title{font-size:1.375rem;font-weight:700;color:#fff;margin-bottom:0.75rem;}
.success-sub{font-size:0.875rem;color:var(--text-muted);line-height:1.8;margin-bottom:2rem;}
.success-steps{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  padding:1.5rem;text-align:left;margin-bottom:2rem;
}
.success-step-title{
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:#fff;margin-bottom:1rem;
}
.success-step-item{
  display:flex;align-items:center;gap:8px;
  font-size:0.8125rem;color:var(--text-secondary);
  margin-bottom:0.625rem;
}

/* ═══════════ FOOTER ═══════════ */
footer{
  background:#000000;
  border-top:1px solid rgba(255,255,255,0.05);
  padding:2rem 0;position:relative;z-index:10;
}
.footer-inner{
  max-width:1320px;margin:0 auto;padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
}
.footer-legal{font-size:0.65rem;color:var(--text-muted);max-width:520px;line-height:1.7;}
.footer-copy{font-size:0.65rem;color:var(--text-muted);}

/* ═══════════ 3D FLOATING SHAPES ═══════════ */
.shape-3d{
  position:absolute;pointer-events:none;
  animation:float3d 8s ease-in-out infinite;
  will-change:transform;
}
@keyframes float3d{
  0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}
  25%{transform:translateY(-12px) rotateX(5deg) rotateY(3deg)}
  50%{transform:translateY(-8px) rotateX(-3deg) rotateY(-5deg)}
  75%{transform:translateY(-16px) rotateX(4deg) rotateY(6deg)}
}

/* ═══════════ SCROLL 3D TILT WRAPPER ═══════════ */
.tilt-card{
  transition:transform 0.4s ease;
  transform-style:preserve-3d;
}

/* ═══════════════════════════════════════════
   RESPONSIVE UTILITIES & MOBILE NAVBAR
   ═══════════════════════════════════════════ */

/* Default Desktop view layouts */
.desktop-only { display: flex !important; }
.mobile-toggle-btn { display: none; }
.mobile-menu-drawer { display: none; }

/* Hamburger Button Styling */
.mobile-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  padding: 0;
  z-index: 210;
}
.hamburger-bar {
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: left center;
}

/* Transform Hamburger bars to 'X' when open */
.mobile-toggle-btn.is-active .hamburger-bar:nth-child(1) { transform: rotate(45deg) translateY(-2px); }
.mobile-toggle-btn.is-active .hamburger-bar:nth-child(2) { opacity: 0; width: 0; }
.mobile-toggle-btn.is-active .hamburger-bar:nth-child(3) { transform: rotate(-45deg) translateY(2px); }

/* Mobile Menu Panel */
.mobile-menu-drawer {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  height: 0;
  background: rgba(5, 5, 7, 0.96);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-bottom: 0 solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  z-index: 199;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-bottom 0.2s ease;
}
.mobile-menu-drawer.is-open {
  height: calc(100vh - 68px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-drawer-links {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu-drawer.is-open .mobile-drawer-links {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.mobile-nav-btn {
  background: none;
  border: none;
  color: #4b5563;
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.05em;
  padding: 6px 0;
  cursor: pointer;
  width: 100%;
  transition: color 0.2s ease;
}
.mobile-nav-btn:hover, .mobile-nav-btn.active {
  color: #ffffff;
}
.drawer-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent);
  margin: 0.5rem 0;
}

/* ═══════════════════════════════════════════
   MEDIA QUERY BREAKPOINT (TABLET/MOBILE)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-toggle-btn { display: flex !important; }
  .mobile-menu-drawer { display: block; }

  .nav-inner {
    padding: 0 1.25rem;
  }
  .container {
    padding: 0 1.25rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ARCHON FINANCE — V2.0 ADDITIONS
   All new styling for app.js features. Reuses the existing token system,
   sharp radii (0 / 2px), hairline borders, Inter type, and uppercase micro-
   labels. No V1 selectors are modified. A reduced-motion master guard sits at
   the very end of this block.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Centered section header (new sections only) ─── */
.section-head{ text-align:center; margin-bottom:3.5rem; }
.section-head .section-badge{ margin-left:auto; margin-right:auto; }
.section-head .section-body{ margin-left:auto; margin-right:auto; }
.section-head .section-title{ margin-left:auto; margin-right:auto; }

/* ═══════════ CUSTOM CURSOR (feature 3) ═══════════ */
html.archon-has-cursor,
html.archon-has-cursor *{ cursor:none !important; }
html.archon-has-cursor input,
html.archon-has-cursor textarea,
html.archon-has-cursor select{ cursor:text !important; }

.archon-cursor-dot,
.archon-cursor-ring{
  position:fixed; top:0; left:0; z-index:9999;
  pointer-events:none; border-radius:50%;
  will-change:transform; mix-blend-mode:difference;
}
.archon-cursor-dot{
  width:6px; height:6px; background:#fff;
  transition:opacity .2s ease;
}
.archon-cursor-ring{
  width:30px; height:30px;
  border:1px solid rgba(255,255,255,0.45);
  transition:width .25s cubic-bezier(0.23,1,0.32,1),
             height .25s cubic-bezier(0.23,1,0.32,1),
             border-color .25s ease, opacity .2s ease;
}
.archon-cursor-ring.is-active{
  width:46px; height:46px; border-color:rgba(255,255,255,0.8);
}
.archon-cursor-ring.is-press{ width:22px; height:22px; }

/* ═══════════ PARTICLE FIELD (feature 5) ═══════════ */
#particle-field{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}

/* ═══════════ DYNAMIC GLASS CARDS (feature 4) ═══════════ */
/* Tilt-enabled cards get a 3D-aware transform + a cursor-following highlight.
   The highlight rides on the existing overflow:hidden so it stays clipped. */
.glass-card.tilt-card{
  will-change:transform;
  transition:transform .4s cubic-bezier(0.23,1,0.32,1),
             box-shadow .4s cubic-bezier(0.23,1,0.32,1),
             border-color .4s ease, background .4s ease;
}
.glass-card.tilt-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,0.06), transparent 60%);
  opacity:0; transition:opacity .35s ease; z-index:1;
}
.glass-card.tilt-card.is-live::after{ opacity:1; }
.glass-card.tilt-card.is-live{ border-color:rgba(255,255,255,0.14); }

/* Magnetic targets: JS sets the transform inline; just hint the compositor. */
.btn-primary,.btn-ghost,.form-submit,.calc-apply,.assess-nav-btn,.assess-analyze,.market-cta{
  will-change:transform;
}

/* ═══════════ MARKET INTELLIGENCE (feature 6) ═══════════ */
/* Vertical padding only — longhand keeps .container's horizontal gutters
   (2rem desktop / 1.25rem mobile) intact regardless of source order. */
.market-section{ padding-top:5rem; padding-bottom:5rem; }
.market-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.market-card{ padding:1.5rem; border-radius:0; display:flex; flex-direction:column; }
.market-card-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.1rem;
}
.market-label{
  font-size:0.6rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-secondary);
}
.market-value{ display:flex; align-items:baseline; gap:4px; margin-bottom:0.9rem; }
.market-num{
  font-size:2rem; font-weight:800; color:#fff;
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
}
.market-unit{ font-size:0.8rem; font-weight:600; color:var(--text-muted); }
.sparkline{ width:100%; height:28px; margin-bottom:0.9rem; }
.sparkline polyline{
  fill:none; stroke:rgba(255,255,255,0.28);
  stroke-width:1.4; vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
}
.market-note{ font-size:0.75rem; line-height:1.6; color:var(--text-muted); margin-top:auto; }

/* Trend chips — coloured by direction but deliberately tasteful (teal up,
   warm-muted down) so neither reads as alarming good/bad. */
.trend-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.65rem; font-weight:700; letter-spacing:0.02em;
  padding:3px 8px; border-radius:2px; white-space:nowrap;
}
.trend-chip svg{ width:9px; height:9px; }
.trend-chip.up{ color:var(--accent-teal); background:rgba(0,212,180,0.08); }
.trend-chip.down{ color:#c9a06a; background:rgba(201,160,106,0.08); }

/* RBI / news card variant */
.market-card--news{ justify-content:flex-start; }
.market-date{
  font-size:0.6rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent-gold);
}
.market-news-title{
  font-size:1.05rem; font-weight:700; color:#fff;
  line-height:1.35; letter-spacing:-0.01em; margin-bottom:0.6rem;
}
.market-cta{
  margin-top:1.1rem; align-self:flex-start;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:0.75rem; font-weight:600;
  color:#fff; letter-spacing:0.01em;
  border-bottom:1px solid rgba(255,255,255,0.25);
  padding-bottom:2px; transition:border-color .25s ease, opacity .25s ease;
}
.market-cta:hover{ border-color:rgba(255,255,255,0.7); }

@media(max-width:900px){ .market-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .market-grid{ grid-template-columns:1fr; } }

/* ═══════════ ASSESSMENT ENGINE (features 1 + 2) ═══════════ */
.assess-page{ padding-top:5rem; padding-bottom:5rem; }
.assess-layout{
  display:grid; grid-template-columns:1fr 320px; gap:1.5rem; align-items:start;
}
.assess-shell{ padding:2.5rem; border-radius:0; position:relative; }

/* Progress indicator */
.assess-progress{ margin-bottom:2rem; }
.assess-progress-meta{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:0.75rem;
}
.assess-step-name{ font-size:0.95rem; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.assess-step-count{
  font-size:0.6rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-muted);
}
.assess-track{ height:2px; background:rgba(255,255,255,0.08); overflow:hidden; }
.assess-track-fill{
  display:block; height:100%; width:20%;
  background:linear-gradient(90deg,rgba(255,255,255,0.4),rgba(255,255,255,0.9));
  transition:width .45s cubic-bezier(0.23,1,0.32,1);
}

/* Stacked, sliding steps. All steps share one grid cell so the panel height is
   stable (no layout jump); only the active step is visible + tabbable. */
.assess-viewport{ display:grid; }
.assess-step{
  grid-area:1 / 1;
  opacity:0; visibility:hidden; transform:translateX(26px);
  transition:opacity .35s ease, transform .35s cubic-bezier(0.23,1,0.32,1);
}
.assess-step.is-active{ opacity:1; visibility:visible; transform:none; }
.assess-step.is-prev{ transform:translateX(-26px); }

.assess-q{ font-size:1.35rem; font-weight:700; color:#fff; letter-spacing:-0.02em; margin-bottom:0.4rem; }
.assess-help{ font-size:0.8rem; line-height:1.6; color:var(--text-secondary); margin-bottom:1.6rem; }

/* Option cards (category + product) */
.assess-options{ display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; }
.assess-options.two{ grid-template-columns:1fr 1fr; }
.assess-option{
  text-align:left; cursor:pointer;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:2px; padding:1.1rem 1.15rem;
  display:flex; flex-direction:column; gap:0.45rem;
  font-family:'Inter',sans-serif;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.assess-option:hover{ border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.035); }
.assess-option.is-selected{
  border-color:rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);
}
.assess-option-ic{ width:26px; height:26px; color:#fff; opacity:0.85; }
.assess-option-ic svg{ width:100%; height:100%; }
.assess-option-t{ font-size:0.9rem; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.assess-option-d{ font-size:0.72rem; line-height:1.5; color:var(--text-muted); }

/* Sliders inside the assessment (reuse global input[type=range] + .slider-label) */
.assess-slider{ margin-bottom:1.5rem; }
.assess-live{
  display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; margin-top:1.75rem;
  border-top:1px solid rgba(255,255,255,0.05); padding-top:1.5rem;
}
.assess-live-item{ display:flex; flex-direction:column; gap:0.3rem; }
.assess-live-k{
  font-size:0.58rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
}
.assess-live-v{ font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }

/* Fields + chips */
.assess-field{ margin-bottom:1.4rem; }
.assess-field-label{
  display:block; font-size:0.6rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:0.6rem;
}
.assess-chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.assess-chip{
  cursor:pointer; font-family:'Inter',sans-serif;
  font-size:0.78rem; font-weight:600; color:var(--text-secondary);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:2px; padding:7px 13px;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.assess-chip:hover{ border-color:rgba(255,255,255,0.2); color:#fff; }
.assess-chip.is-selected{ color:#fff; border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.06); }

.assess-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.assess-inline-val{ font-size:0.78rem; color:var(--text-secondary); margin-top:0.5rem; }
.assess-inline-val span{ color:#fff; font-weight:700; }

/* Step-5 recap */
.assess-recap{
  margin:1.6rem 0; border:1px solid rgba(255,255,255,0.06);
  border-radius:2px; padding:0.4rem 1rem;
}
.recap-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.6rem 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.recap-row:last-child{ border-bottom:none; }
.recap-k{ font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.recap-v{ font-size:0.85rem; font-weight:700; color:#fff; }

/* Analyze + nav buttons */
.assess-analyze{
  width:100%; margin-top:0.5rem; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:0.9rem; font-weight:700;
  color:#000; background:#fff; border:none; border-radius:2px; padding:14px;
  letter-spacing:0.01em; transition:opacity .25s ease, transform .25s ease;
}
.assess-analyze:hover{ opacity:0.9; }
.assess-actions{
  display:flex; justify-content:space-between; gap:1rem; margin-top:2rem;
  border-top:1px solid rgba(255,255,255,0.05); padding-top:1.5rem;
}
.assess-nav-btn{
  cursor:pointer; font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:600;
  border-radius:2px; padding:10px 20px; letter-spacing:0.01em;
  transition:opacity .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.assess-nav-btn.ghost{
  color:var(--text-secondary); background:none; border:1px solid rgba(255,255,255,0.12);
}
.assess-nav-btn.ghost:hover{ color:#fff; border-color:rgba(255,255,255,0.3); }
.assess-nav-btn.solid{ color:#000; background:#fff; border:1px solid #fff; }
.assess-nav-btn.solid:hover{ opacity:0.9; }
.assess-nav-btn:disabled{ opacity:0.35; cursor:not-allowed; pointer-events:none; }

/* Aside — required documents */
.assess-aside{ position:sticky; top:88px; }
.assess-docs{ padding:1.5rem; border-radius:0; }
.assess-docs-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:0.4rem; }
.assess-docs-title{ font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#fff; }
.assess-docs-count{ font-size:0.6rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.assess-docs-sub{ font-size:0.75rem; line-height:1.6; color:var(--text-muted); margin-bottom:1.1rem; }
.assess-docs-foot{
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.05);
  font-size:0.65rem; letter-spacing:0.04em; color:var(--text-muted);
}

/* Document checklist (shared aside + results) with add/remove animation */
.doc-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.55rem; }
.doc-item{
  display:flex; align-items:center; gap:0.65rem;
  font-size:0.82rem; color:var(--text-secondary);
}
.doc-tick{
  flex:0 0 18px; width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--accent-teal); border:1px solid rgba(0,212,180,0.3);
  background:rgba(0,212,180,0.06);
}
.doc-tick svg{ width:11px; height:11px; }
.doc-name{ color:#cbd5e1; }
.doc-item.doc-entering{ opacity:0; transform:translateX(-8px); }
.doc-item.doc-entering.doc-in{ opacity:1; transform:none; transition:opacity .35s ease, transform .35s cubic-bezier(0.23,1,0.32,1); }
.doc-item.doc-leaving{ opacity:0; transform:translateX(8px); transition:opacity .3s ease, transform .3s ease; }

/* Loading state */
.assess-loading{ display:flex; justify-content:center; padding:1rem 0 2rem; }
.assess-loading-inner{ padding:3rem 2.5rem; border-radius:0; text-align:center; max-width:460px; width:100%; }
.assess-radar{
  width:64px; height:64px; margin:0 auto 1.75rem; position:relative;
}
.assess-radar span{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  animation:assessPing 2.4s cubic-bezier(0,0,0.2,1) infinite;
}
.assess-radar span:nth-child(2){ animation-delay:0.8s; }
.assess-radar span:nth-child(3){ animation-delay:1.6s; }
.assess-radar i{
  position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:#fff; box-shadow:0 0 12px rgba(255,255,255,0.5);
}
@keyframes assessPing{ 0%{ transform:scale(0.25); opacity:0.9; } 100%{ transform:scale(1); opacity:0; } }
.assess-loading-title{ font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:1.5rem; letter-spacing:-0.01em; }
.assess-loading-steps{ list-style:none; padding:0; margin:0; text-align:left; max-width:300px; margin-inline:auto; }
.assess-loading-steps li{
  position:relative; padding:0.5rem 0 0.5rem 1.6rem;
  font-size:0.82rem; color:var(--text-muted);
  transition:color .3s ease;
}
.assess-loading-steps li::before{
  content:''; position:absolute; left:0; top:50%; width:10px; height:10px; margin-top:-5px;
  border-radius:50%; border:1px solid rgba(255,255,255,0.2);
  transition:background .3s ease, border-color .3s ease;
}
.assess-loading-steps li.is-active{ color:#fff; }
.assess-loading-steps li.is-active::before{ border-color:#fff; background:rgba(255,255,255,0.4); }
.assess-loading-steps li.is-done{ color:var(--text-secondary); }
.assess-loading-steps li.is-done::before{ border-color:var(--accent-teal); background:var(--accent-teal); }

/* ─── Results ─── */
.assess-results{ display:flex; flex-direction:column; gap:1.5rem; }
.result-hero{ padding:2.5rem; border-radius:0; position:relative; }
.result-score{ display:flex; align-items:center; gap:2.5rem; flex-wrap:wrap; }
.score-ring{ position:relative; width:160px; height:160px; flex:0 0 160px; }
.score-ring svg{ width:160px; height:160px; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:rgba(255,255,255,0.08); stroke-width:8; }
.ring-fg{
  fill:none; stroke:#fff; stroke-width:8; stroke-linecap:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(0.23,1,0.32,1);
}
.ring-fg[data-band="low"]{ stroke:var(--accent-teal); }
.ring-fg[data-band="moderate"]{ stroke:#fff; }
.ring-fg[data-band="elevated"]{ stroke:#c9a06a; }
.score-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.score-num{ font-size:2.6rem; font-weight:800; color:#fff; line-height:1; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.score-lbl{ font-size:0.58rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); margin-top:0.3rem; }
.result-verdict{ flex:1; min-width:240px; }
.verdict-title{ font-size:1.5rem; font-weight:800; color:#fff; letter-spacing:-0.02em; margin-bottom:0.4rem; }
.verdict-sub{ font-size:0.85rem; line-height:1.7; color:var(--text-secondary); margin-bottom:1.25rem; }
.verdict-chips{ display:flex; gap:0.75rem; flex-wrap:wrap; }
.vchip{
  display:flex; flex-direction:column; gap:0.25rem;
  border:1px solid rgba(255,255,255,0.08); border-radius:2px; padding:0.6rem 0.9rem;
}
.vchip-k{ font-size:0.55rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.vchip-v{ font-size:1rem; font-weight:800; color:#fff; }

.result-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.result-stat{ padding:1.5rem; border-radius:0; display:flex; flex-direction:column; gap:0.4rem; }
.rs-k{ font-size:0.6rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); }
.rs-v{ font-size:1.6rem; font-weight:800; color:#fff; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.rs-sub{ font-size:0.7rem; line-height:1.5; color:var(--text-muted); }

.result-lower{ display:grid; grid-template-columns:1fr 320px; gap:1.5rem; align-items:start; }
.result-summary{ padding:2rem; border-radius:0; }
.result-summary-head{ font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#fff; margin-bottom:1rem; }
.result-summary-body{ font-size:0.875rem; line-height:1.8; color:var(--text-secondary); }
.result-disclaimer{
  margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,0.05);
  font-size:0.68rem; line-height:1.6; color:var(--text-muted);
}
.result-docs{ padding:1.5rem; border-radius:0; }
.result-actions{ display:flex; justify-content:flex-end; gap:1rem; flex-wrap:wrap; }

/* Assessment responsiveness */
@media(max-width:900px){
  .assess-layout{ grid-template-columns:1fr; }
  .assess-aside{ position:static; }
  .result-lower{ grid-template-columns:1fr; }
  .result-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .assess-shell{ padding:1.75rem 1.4rem; }
  .assess-options,.assess-options.two,.assess-grid2{ grid-template-columns:1fr; }
  .assess-live{ grid-template-columns:1fr 1fr; }
  .result-grid{ grid-template-columns:1fr; }
  .result-score{ gap:1.5rem; }
  .result-actions{ justify-content:stretch; }
  .result-actions .assess-nav-btn{ flex:1; text-align:center; }
}

/* ═══════════ PAGE TRANSITIONS (feature 7) ═══════════ */
/* The outgoing page lifts + fades; the inline router then runs its own pageIn
   keyframe on the incoming page. */
.page.is-leaving{
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
/* Subtle per-page ambient shift (kept very gentle). */
body[data-page="assessment"] .orb-1{ opacity:0.8; }
body[data-page="calculator"] .orb-2{ opacity:0.85; }

/* ═══════════ REDUCED-MOTION MASTER GUARD ═══════════ */
@media (prefers-reduced-motion: reduce){
  .archon-cursor-dot,.archon-cursor-ring{ display:none !important; }
  .glass-card.tilt-card{ transform:none !important; box-shadow:none !important; }
  .glass-card.tilt-card::after{ display:none !important; }
  .assess-step{ transition:none !important; }
  .assess-track-fill,.ring-fg,.doc-item.doc-entering.doc-in,.doc-item.doc-leaving{ transition:none !important; }
  .assess-radar span{ animation:none !important; }
  .page.is-leaving{ transition:none !important; transform:none !important; }
  #particle-field{ display:none !important; }
}

/* ═══════════ ABOUT PAGE ═══════════ */
.about-page{
  padding:5rem 0 6rem;
  display:flex;
  flex-direction:column;
  gap:3rem;
}

/* Header */
.about-header{ margin-bottom:0.5rem; }

/* Mission statement block */
.about-statement{
  padding:2.75rem 3rem;
  border-radius:0;
}
.about-statement-text{
  font-size:1rem;
  line-height:1.9;
  color:var(--text-secondary);
  max-width:820px;
}
.about-statement-text strong{
  color:#fff;
  font-weight:600;
}

/* Three pillars */
.about-pillars{
  display:grid;
  grid-template-columns:1fr 1px 1fr 1px 1fr;
  gap:0;
  border:1px solid rgba(255,255,255,0.05);
  background:rgba(255,255,255,0.015);
  position:relative;overflow:hidden;
}
.about-pillars::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
}
.about-pillar{
  padding:2.25rem 2rem;
}
.about-divider-v{
  background:rgba(255,255,255,0.05);
  width:1px;
}
.about-pillar-year{
  font-size:1.75rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.03em;
  line-height:1;
  margin-bottom:0.375rem;
}
.about-pillar-label{
  font-size:0.6rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:0.875rem;
}
.about-pillar-body{
  font-size:0.8125rem;
  line-height:1.75;
  color:var(--text-muted);
}

/* How we operate */
.about-ops{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:4rem;
  align-items:start;
  padding:2.5rem 0;
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.about-ops-item{
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
  padding-bottom:1.5rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
  margin-bottom:1.5rem;
}
.about-ops-num{
  font-size:0.6rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--text-muted);
  padding-top:3px;
  flex-shrink:0;
  width:20px;
}
.about-ops-title{
  font-size:0.875rem;
  font-weight:700;
  color:#fff;
  margin-bottom:0.3rem;
}
.about-ops-body{
  font-size:0.8125rem;
  line-height:1.7;
  color:var(--text-muted);
}

/* Founder card */
.about-founder{
  border-radius:0;
  padding:2.25rem 2.5rem;
}
.about-founder-inner{
  display:flex;
  align-items:center;
  gap:1.75rem;
}
.about-founder-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.875rem;
  font-weight:700;
  color:var(--text-secondary);
  letter-spacing:0.05em;
  flex-shrink:0;
}
.about-founder-name{
  font-size:1rem;
  font-weight:700;
  color:#fff;
  margin-bottom:0.2rem;
}
.about-founder-title{
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:0.625rem;
}
.about-founder-line{
  font-size:0.875rem;
  color:var(--text-secondary);
  line-height:1.6;
  font-style:italic;
}

/* CTA strip */
.about-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  padding-top:1rem;
}

/* Responsive */
@media(max-width:900px){
  .about-pillars{ grid-template-columns:1fr; }
  .about-divider-v{ display:none; }
  .about-pillar{ border-bottom:1px solid rgba(255,255,255,0.05); }
  .about-pillar:last-child{ border-bottom:none; }
  .about-ops{ grid-template-columns:1fr; gap:2.5rem; }
  .about-statement{ padding:2rem 1.5rem; }
}
@media(max-width:600px){
  .about-founder-inner{ flex-direction:column; align-items:flex-start; }
  .about-cta{ flex-direction:column; align-items:flex-start; }
}