:root{
  --bg:#071019;
  --panel:#0c1722;
  --panel2:#111e2a;
  --line:#2a3a47;
  --text:#f3f0e8;
  --muted:#9eabb4;
  --blue:#d3a94f;
  --blue2:#84a9bc;
  --good:#79b892;
  --warn:#d3a94f;
  --danger:#d77f79;
  --r:4px;
  --shadow:0 16px 42px rgba(0,0,0,.24);
}

html{background:var(--bg)}
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(132,169,188,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(132,169,188,.035) 1px,transparent 1px);
  background-size:48px 48px;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body:before{content:"";position:fixed;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--blue) 0 13%,#36566a 13% 100%);z-index:100;pointer-events:none}

h1,h2,.section-title,.statement,.pb-hero h1,.delivery h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
  letter-spacing:-.035em;
  text-wrap:balance;
}
h3{letter-spacing:-.01em}

.nav{height:78px;background:rgba(7,16,25,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav .shell{position:relative}
.nav .shell:after{content:"CAREER DECISION SYSTEM";position:absolute;left:24px;top:49px;color:#667884;font-size:.56rem;letter-spacing:.2em;pointer-events:none}
.brand{position:relative;padding-left:35px!important;font-family:Georgia,"Times New Roman",serif;font-size:1.05rem;font-weight:700;letter-spacing:.08em}
.brand:before{content:"✓";position:absolute;left:0;top:50%;width:24px;height:24px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid var(--blue);color:var(--blue);font:700 .78rem/1 Inter,sans-serif}
.brand i{color:var(--blue);font-family:Inter,sans-serif;font-weight:800}
.navlinks{gap:4px}
.navlinks button{padding:10px 12px;border-bottom:2px solid transparent;color:#aab5bd;font-size:.82rem;letter-spacing:.025em}
.navlinks button:hover{color:var(--text);border-bottom-color:var(--blue)}

.btn{border-radius:3px;border:1px solid #415461;background:#13222e;padding:11px 17px;box-shadow:none;letter-spacing:.035em;text-transform:uppercase;font-size:.78rem}
.btn.primary{border:1px solid var(--blue);background:var(--blue);color:#15202a;box-shadow:4px 4px 0 #213745}
.btn.primary:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #213745}
.btn.ghost{background:transparent;border-color:#354652}

.hero{position:relative;min-height:620px;gap:76px;padding:86px 0 96px;border-bottom:1px solid var(--line)}
.hero:before{content:"CAREERPROOF / 01";position:absolute;top:30px;left:0;color:#71818b;font-size:.62rem;letter-spacing:.2em}
.hero:after{content:"";position:absolute;left:0;bottom:-1px;width:160px;height:4px;background:var(--blue)}
.hero h1{font-size:clamp(3rem,6.4vw,6.3rem);line-height:.91;margin-top:22px;max-width:800px}
.hero p{font-size:1.08rem;line-height:1.75;max-width:620px;border-left:2px solid var(--blue);padding-left:18px}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--blue);font-size:.68rem;letter-spacing:.2em}
.eyebrow:before{content:"";width:22px;height:1px;background:currentColor}

.card{border-radius:var(--r);background:var(--panel);border:1px solid var(--line);box-shadow:none}
.demo{transform:none;padding:0;overflow:visible;border-top:4px solid var(--blue);box-shadow:var(--shadow)}
.demo:before{content:"CAREER MATCH REPORT";position:static;display:block;width:auto;height:auto;padding:12px 22px;background:#132431;filter:none;opacity:1;color:#a9b7c0;font-size:.62rem;letter-spacing:.19em}
.demohead,.matchline,.demo .score,.demo>p{margin-left:22px;margin-right:22px}
.demohead{padding-top:18px;border-bottom:1px solid var(--line);padding-bottom:12px}
.matchline{padding:16px 0 8px}
.matchline strong{color:var(--blue);font-family:Georgia,"Times New Roman",serif}
.track,.metricbar,.progress{border-radius:0;background:#1b2934}
.fill,.metricbar span,.progress span{border-radius:0;background:var(--blue)}

.section{position:relative;padding:94px 0;border-bottom:1px solid var(--line)}
.section:nth-of-type(even):before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:#09141e;z-index:-1;border-top:1px solid rgba(255,255,255,.02)}
.section-title{font-size:clamp(2.4rem,4.8vw,4.8rem);line-height:.98;max-width:900px}
.statement{font-size:clamp(2.2rem,4vw,4.4rem);color:#b7c6cd;border-top:1px solid var(--line);padding-top:28px;margin-top:34px}
.grid3{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature{min-height:210px;border:0;border-right:1px solid var(--line);padding:30px 28px;background:transparent}
.feature:last-child{border-right:0}
.feature b{display:inline-block;border-bottom:2px solid var(--blue);padding-bottom:6px;color:var(--blue)}
.feature h3{font-family:Georgia,"Times New Roman",serif;font-size:1.45rem}
.feature-list{gap:0;border-top:1px solid var(--line)}
.wide-feature{border:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;background:transparent;padding:25px 22px;grid-template-columns:42px 1fr}
.wide-feature:nth-child(even){border-right:0}
.icon{width:34px;height:34px;border-radius:0;border:1px solid #536873;color:var(--blue);font-size:.68rem}

.assessment{max-width:860px;margin-top:50px}
.progressmeta{padding:0 0 12px;border-bottom:1px solid var(--line);font-weight:700}
.progress{height:4px;margin-top:-1px;margin-bottom:30px}
.question{position:relative;border-top:4px solid var(--blue);padding:38px 42px 34px;box-shadow:var(--shadow)}
.question:after{content:"ASSESSMENT RECORD";position:absolute;right:28px;top:18px;color:#637480;font-size:.58rem;letter-spacing:.16em}
.question h2{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(1.65rem,3vw,2.45rem);padding-bottom:22px;border-bottom:1px solid var(--line)}
.options{gap:0;border-top:1px solid var(--line)}
.option{border-radius:0;border:0;border-bottom:1px solid var(--line);background:transparent;padding:16px 12px;min-height:56px}
.option:hover{background:#12212d;border-color:var(--line)}
.option.selected{background:#172934;border-left:3px solid var(--blue);border-bottom-color:var(--line)}
.option .dot{border-radius:2px;width:17px;height:17px;border-color:#657782}
.option.selected .dot{border:4px solid var(--blue);background:#1b2830}

.dashboard>h1,.intelligence>h1,.method>h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.6rem,5vw,5rem);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:26px}
.dashboard>h1:after,.intelligence>h1:after,.method>h1:after{content:"";display:block;width:100px;height:3px;background:var(--blue);position:relative;top:24px}
.stats{gap:0;border:1px solid var(--line)}
.stat{border-right:1px solid var(--line);border-radius:0;background:#0d1923}
.stat:last-child{border-right:0}
.stat strong{font-family:Georgia,"Times New Roman",serif;color:var(--text)}
.panel{border-radius:0;border-top:3px solid #506775}
.ranktable th{background:#101d28;color:#b2bcc3;border-bottom:2px solid var(--blue)}
.ranktable td{border-bottom:1px solid #263744}
.ranktable tbody tr:nth-child(even) td{background:rgba(255,255,255,.018)}
.pill,.chip{border-radius:2px;background:#142631;border-color:#405664;color:#c8d5db}
.pill{border-left:3px solid var(--blue)}
.input{border-radius:2px;background:#0b1721;border-color:#3b4d59}
.toolbar,.filter-grid,.v2tabs,.hardchips{padding:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(8,18,27,.72)}
.shortlist-grid{gap:0;border-top:1px solid var(--line)}
.short-card{border-radius:0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.dna{border-top:5px solid var(--blue);background:#0c1822;box-shadow:var(--shadow)}
.dna:before{content:"CAREERPROFILE / CONFIDENTIAL";display:block;color:#70818c;font-size:.62rem;letter-spacing:.17em;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}
.notice{background:#121f29;border-left-color:var(--blue);color:#b7c3ca}

.tool-grid{gap:0;border-top:1px solid var(--line)}
.tool{position:relative;border-radius:0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;min-height:220px;padding:30px}
.tool:before{content:"→";position:absolute;right:22px;top:20px;color:var(--blue);font-size:1.2rem}
.tool h2{font-family:Georgia,"Times New Roman",serif;font-weight:600}
.tool:hover{background:#0e1c27;border-color:var(--line)}
.report-top{border-top:5px solid var(--blue);box-shadow:var(--shadow)}
.big-score{font-family:Georgia,"Times New Roman",serif;color:var(--blue)}
.fact{border-radius:0;background:#0d1923;border-left:2px solid #425967}
.meter,.risk-track{height:10px;border-radius:0}

.pb-hero{position:relative;border-bottom:1px solid var(--line)}
.pb-hero:before{content:"CAREERPROOF RESEARCH SERIES / VOL. 01";position:absolute;top:24px;left:24px;color:#71818b;font-size:.62rem;letter-spacing:.18em}
.pb-hero h1{font-weight:600;letter-spacing:-.045em}
.pb-cover{transform:rotate(1deg);border:8px solid #e8e3d6;box-shadow:16px 18px 0 #1c303d,0 30px 80px rgba(0,0,0,.4)}
.pb-section{border-bottom:1px solid var(--line)}
.pb-factors{gap:0;border-top:1px solid var(--line)}
.pb-factor{border-radius:0;border:0;border-right:1px solid var(--line);background:transparent}
.pb-tools{background:var(--line)}
.pb-tools article{background:#0b1721}
.pb-final{background:#0c1b26;border-top:4px solid var(--blue);border-bottom:1px solid var(--line)}
.download-card{border-top:5px solid var(--blue);box-shadow:var(--shadow)}

.footer{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:800px){
  .nav{height:auto;min-height:72px;padding:9px 0}
  .nav .shell:after{display:none}
  .brand{padding-left:29px!important;font-size:.88rem}
  .brand:before{width:20px;height:20px}
  .hero{padding-top:64px;min-height:auto}
  .hero:before{top:20px}
  .hero h1{font-size:clamp(3rem,13vw,4.8rem)}
  .grid3{grid-template-columns:1fr}
  .feature{border-right:0;border-bottom:1px solid var(--line)}
  .wide-feature{border-right:0}
  .question{padding:30px 20px 24px}
  .question:after{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(even){border-right:0}
  .pb-cover{transform:none;box-shadow:8px 10px 0 #1c303d}
}

@media(max-width:520px){
  .shell{padding-left:15px;padding-right:15px}
  .navlinks{justify-content:flex-end}
  .navlinks button{font-size:.69rem;padding:7px 8px}
  .btn{padding:10px 13px}
  .hero h1{font-size:2.85rem}
  .section-title{font-size:2.45rem}
  .questionnav{gap:10px}
}