/* ============================================================
   IT&HR Ventures — a CM Ventures company
   Global stylesheet
   ============================================================ */

:root{
  --ink:#0B1F3A;
  --ink-deep:#061426;
  --ink-soft:#2A3F5C;
  --muted:#6B7C93;
  --line:#E4E0D9;
  --line-dark:rgba(255,255,255,.14);

  --teal:#2BA9CF;
  --teal-deep:#1B7FA0;
  --teal-light:#8FDCF2;
  --teal-wash:#EAF7FC;

  --cream:#FBF9F6;
  --paper:#FFFFFF;
  --sand:#F3EFE9;

  --gold:#C9A24A;

  --r-sm:10px;
  --r:16px;
  --r-lg:26px;
  --r-xl:40px;

  --shadow-s:0 1px 2px rgba(11,31,58,.05), 0 4px 14px rgba(11,31,58,.05);
  --shadow-m:0 2px 4px rgba(11,31,58,.04), 0 14px 40px rgba(11,31,58,.09);
  --shadow-l:0 30px 80px rgba(11,31,58,.16);

  --serif:"Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw:1180px;
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p{margin:0 0 1.1em}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px}
.wrap-narrow{max-width:860px}

/* ---------- Eyebrow / small caps label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--teal-deep);
  margin:0 0 1.1em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--teal); opacity:.7;
}
.on-dark .eyebrow, .dark .eyebrow{color:var(--teal-light)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.005em;
  padding:.92em 1.7em; border-radius:100px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em; height:1.05em; flex:none}

.btn-primary{background:var(--ink); color:#fff; box-shadow:0 8px 24px rgba(11,31,58,.24)}
.btn-primary:hover{background:var(--ink-deep); box-shadow:0 14px 34px rgba(11,31,58,.3)}

.btn-teal{background:var(--teal); color:#fff; box-shadow:0 8px 24px rgba(43,169,207,.32)}
.btn-teal:hover{background:var(--teal-deep); box-shadow:0 14px 34px rgba(43,169,207,.4)}

.btn-ghost{background:transparent; color:var(--ink); border-color:rgba(11,31,58,.2)}
.btn-ghost:hover{border-color:var(--ink); background:rgba(11,31,58,.04)}

.btn-light{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(8px)}
.btn-light:hover{background:#fff; color:var(--ink); border-color:#fff}

.btn-sm{padding:.62em 1.15em; font-size:.86rem}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:900;
  background:rgba(251,249,246,.94);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.nav.scrolled{border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(11,31,58,.05)}
.nav-in{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; text-decoration:none; flex:none}
.brand img{height:34px; width:auto}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  position:relative; text-decoration:none; color:var(--ink-soft);
  font-size:.94rem; font-weight:500; padding:.55em .95em; border-radius:100px;
  transition:color .2s, background .2s;
}
.nav-links a:hover{color:var(--ink); background:rgba(11,31,58,.045)}
.nav-links a.active{color:var(--ink); font-weight:600}
.nav-links a.active::after{
  content:""; position:absolute; left:50%; bottom:.15em; translate:-50% 0;
  width:16px; height:2px; border-radius:2px; background:var(--teal);
}
.nav-cta{display:flex; align-items:center; gap:10px}

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:12px; background:var(--paper); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.burger span{display:block; width:17px; height:1.6px; background:var(--ink); border-radius:2px; transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

@media(max-width:900px){
  .burger{display:flex}
  .nav-links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:14px 20px 22px; box-shadow:var(--shadow-m);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.85em 1em; font-size:1.05rem}
  .nav-links a.active::after{display:none}
  .nav-cta .btn{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink-deep);
  color:rgba(255,255,255,.78);
  padding:clamp(80px,12vw,140px) 0 clamp(90px,13vw,150px);
  isolation:isolate;
}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero::before{
  content:""; position:absolute; inset:-20% -10%; z-index:-2;
  background:
    radial-gradient(48% 60% at 18% 18%, rgba(43,169,207,.42), transparent 62%),
    radial-gradient(52% 66% at 88% 8%, rgba(29,105,168,.36), transparent 60%),
    radial-gradient(60% 70% at 62% 108%, rgba(143,220,242,.2), transparent 62%);
  filter:blur(10px);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2%,0) scale(1.08)}
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  html{scroll-behavior:auto}
}

.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr; gap:44px}}

.hero h1 .accent{
  font-style:italic; color:var(--teal-light);
  font-family:var(--serif);
}
.hero-lede{font-size:clamp(1.05rem,1.9vw,1.24rem); max-width:52ch; color:rgba(255,255,255,.76)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem}

.hero-note{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line-dark);
  font-size:.85rem; color:rgba(255,255,255,.5); max-width:44ch;
}

/* Hero side card */
.glass{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-lg);
  padding:30px;
  box-shadow:0 40px 90px rgba(0,0,0,.35);
}
.glass h3{color:#fff; font-size:1.15rem; margin-bottom:.9em}
.stat-row{display:flex; flex-direction:column; gap:0}
.stat{padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.stat:last-child{border-bottom:0; padding-bottom:0}
.stat b{
  display:block; font-family:var(--serif); font-size:2rem; color:#fff;
  line-height:1; margin-bottom:.28em; font-weight:600;
}
.stat b em{font-style:normal; color:var(--teal-light)}
.stat span{font-size:.83rem; color:rgba(255,255,255,.6); letter-spacing:.01em}

/* ============================================================
   SECTIONS
   ============================================================ */
section{position:relative}
.sec{padding:clamp(72px,10vw,120px) 0}
.sec-tight{padding:clamp(52px,7vw,84px) 0}
.sec-paper{background:var(--paper)}
.sec-sand{background:var(--sand)}
.sec-dark{background:var(--ink-deep); color:rgba(255,255,255,.72)}
.sec-dark h2,.sec-dark h3{color:#fff}

.sec-head{max-width:66ch; margin-bottom:clamp(38px,5vw,62px)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head p{font-size:1.06rem; color:var(--muted); margin-bottom:0}
.sec-dark .sec-head p{color:rgba(255,255,255,.62)}

.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- Page header (inner pages) ---------- */
.pagehead{
  background:var(--ink-deep); color:rgba(255,255,255,.75);
  padding:clamp(60px,8vw,96px) 0 clamp(52px,7vw,80px);
  position:relative; overflow:hidden; isolation:isolate;
}
.pagehead::before{
  content:""; position:absolute; inset:-30% -10%; z-index:-1;
  background:
    radial-gradient(46% 70% at 12% 10%, rgba(43,169,207,.4), transparent 60%),
    radial-gradient(46% 70% at 92% 30%, rgba(24,90,150,.4), transparent 62%);
  filter:blur(8px);
}
.pagehead h1{font-size:clamp(2.3rem,5.4vw,3.9rem); margin-bottom:.35em; color:#fff}
.pagehead p{max-width:60ch; color:rgba(255,255,255,.72); font-size:1.06rem; margin:0}
.pagehead .eyebrow{color:var(--teal-light)}

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid{display:grid; gap:24px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:940px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.g3,.g2{grid-template-columns:1fr}}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, border-color .35s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:rgba(43,169,207,.35)}
.card h3{margin-bottom:.5em}
.card p{color:var(--muted); font-size:.97rem; margin-bottom:0}

.card-num{
  font-family:var(--serif); font-size:.85rem; font-weight:600; letter-spacing:.12em;
  color:var(--teal); display:block; margin-bottom:1.4em;
}

.icon-badge{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--teal-wash); color:var(--teal-deep); margin-bottom:20px;
}
.icon-badge svg{width:23px; height:23px}

/* Feature link cards (home) */
.pill-card{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px 30px; text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, border-color .35s;
}
.pill-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--teal-light));
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.pill-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:rgba(43,169,207,.4)}
.pill-card:hover::after{transform:scaleX(1)}
.pill-card h3{margin-bottom:.45em}
.pill-card p{color:var(--muted); font-size:.97rem; flex:1}
.pill-card .go{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1.2em;
  font-size:.88rem; font-weight:600; color:var(--teal-deep);
}
.pill-card .go svg{width:15px; height:15px; transition:transform .3s}
.pill-card:hover .go svg{transform:translateX(4px)}

/* ============================================================
   SCHOLARSHIP + JOB LIST
   ============================================================ */
.toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:20px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:28px; box-shadow:var(--shadow-s);
  position:sticky; top:calc(var(--nav-h) + 10px); z-index:60;
}
.search-field{position:relative; flex:1; min-width:200px}
.search-field svg{
  position:absolute; left:14px; top:50%; translate:0 -50%;
  width:17px; height:17px; color:var(--muted); pointer-events:none;
}
.toolbar .search-field input, .search-field input{
  width:100%; font-family:var(--sans); font-size:.95rem; color:var(--ink);
  padding:.72em 1em .72em 2.6em; border:1px solid var(--line);
  border-radius:100px; background:var(--cream); outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.toolbar .search-field input:focus, .search-field input:focus{border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px rgba(43,169,207,.13)}

.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--ink-soft);
  padding:.52em 1.05em; border-radius:100px; border:1px solid var(--line);
  background:var(--cream); cursor:pointer; white-space:nowrap;
  transition:.2s;
}
.chip:hover{border-color:var(--teal); color:var(--teal-deep)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}

.count{font-size:.85rem; color:var(--muted); margin:0 0 20px}
.count b{color:var(--ink)}

.list{display:grid; gap:16px}

.item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 30px; position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.item:hover{transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:rgba(43,169,207,.35)}
.item-top{display:flex; justify-content:space-between; gap:24px; align-items:flex-start; flex-wrap:wrap}
.item h3{font-size:1.28rem; margin-bottom:.2em; max-width:34ch}
.item .org{
  font-size:.83rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--teal-deep); margin:0 0 .9em;
}
.item p.desc{color:var(--muted); font-size:.97rem; margin-bottom:1.1em; max-width:72ch}

.meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-bottom:1.2em}
.meta div{display:flex; flex-direction:column; gap:2px}
.meta dt{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.meta dd{margin:0; font-size:.95rem; font-weight:600; color:var(--ink)}

.tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:1.3em}
.tag{
  font-size:.74rem; font-weight:600; letter-spacing:.02em;
  padding:.34em .8em; border-radius:100px;
  background:var(--teal-wash); color:var(--teal-deep);
}

.deadline-flag{
  display:inline-flex; align-items:center; gap:.45em; flex:none;
  font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.46em .95em; border-radius:100px; border:1px solid;
}
.deadline-flag svg{width:13px; height:13px}
.df-soon{background:#FEF1F1; color:#B4232C; border-color:#F6D6D8}
.df-open{background:#EDF9F1; color:#1B7A45; border-color:#CFEBDB}
.df-rolling{background:var(--teal-wash); color:var(--teal-deep); border-color:#CBE9F4}
.df-closed{background:var(--sand); color:var(--muted); border-color:var(--line)}

.item-foot{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.note{font-size:.83rem; color:var(--muted); max-width:60ch; margin:0}
.note b{color:var(--ink-soft)}

.empty{
  text-align:center; padding:70px 24px; border:1px dashed var(--line);
  border-radius:var(--r-lg); color:var(--muted); background:var(--paper);
}
.empty h3{margin-bottom:.4em}

/* ---------- Verified strip ---------- */
.verified-strip{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--teal-wash); border:1px solid #CBE9F4;
  border-radius:var(--r); padding:16px 22px; margin-bottom:26px;
}
.verified-strip svg{width:20px; height:20px; color:var(--teal-deep); flex:none}
.verified-strip p{margin:0; font-size:.9rem; color:var(--ink-soft)}
.verified-strip b{color:var(--ink)}

/* ============================================================
   RESUME PAGE
   ============================================================ */
.split{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.option-card{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  padding:34px 32px; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.option-card.feature{
  background:var(--ink-deep); border-color:transparent; color:rgba(255,255,255,.72);
}
.option-card.feature h3{color:#fff}
.option-card.feature::before{
  content:""; position:absolute; inset:auto -30% -60% -30%; height:80%;
  background:radial-gradient(50% 100% at 50% 100%, rgba(43,169,207,.45), transparent 70%);
  pointer-events:none;
}
.option-card > *{position:relative}
.option-card .kicker{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:1.2em;
}
.option-card.feature .kicker{color:var(--teal-light)}
.option-card p{font-size:.97rem; color:var(--muted); flex:1}
.option-card.feature p{color:rgba(255,255,255,.7)}
.checks{list-style:none; padding:0; margin:0 0 1.8em; display:grid; gap:.7em}
.checks li{display:flex; gap:.7em; font-size:.93rem; line-height:1.5}
.checks li svg{width:17px; height:17px; flex:none; margin-top:3px; color:var(--teal)}

.free-badge{
  position:absolute; top:22px; right:22px;
  font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:.42em .9em; border-radius:100px;
  background:var(--gold); color:#2B1F00;
}

/* Analyzer */
.analyzer{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-m);
}
.tabs{display:flex; gap:6px; background:var(--sand); padding:5px; border-radius:100px; margin-bottom:22px; width:fit-content; max-width:100%; flex-wrap:wrap}
.tab{
  font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--muted);
  padding:.6em 1.3em; border:0; border-radius:100px; background:transparent; cursor:pointer;
  transition:.2s;
}
.tab.on{background:var(--paper); color:var(--ink); box-shadow:var(--shadow-s)}

textarea, input[type=text], input[type=email], select{
  width:100%; font-family:var(--sans); font-size:.96rem; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--cream); outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
textarea{min-height:280px; resize:vertical; line-height:1.6; font-size:.92rem}
textarea:focus, input:focus, select:focus{border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px rgba(43,169,207,.13)}
label{display:block; font-size:.83rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:.6em}
.field{margin-bottom:20px}
.hint{font-size:.82rem; color:var(--muted); margin:.6em 0 0}

.dropzone{
  border:1.5px dashed var(--line); border-radius:var(--r-lg); background:var(--cream);
  padding:44px 24px; text-align:center; cursor:pointer; transition:.25s;
}
.dropzone:hover,.dropzone.drag{border-color:var(--teal); background:var(--teal-wash)}
.dropzone svg{width:34px; height:34px; color:var(--teal); margin:0 auto 14px}
.dropzone b{display:block; color:var(--ink); font-size:1.02rem; margin-bottom:.3em}
.dropzone span{font-size:.87rem; color:var(--muted)}

.privacy-line{
  display:flex; align-items:center; gap:.6em; justify-content:center;
  font-size:.82rem; color:var(--muted); margin-top:18px;
}
.privacy-line svg{width:15px; height:15px; color:var(--teal-deep); flex:none}

/* Results */
.results{scroll-margin-top:100px; margin-top:38px; padding-top:38px; border-top:1px solid var(--line)}
.score-head{display:flex; align-items:center; gap:32px; flex-wrap:wrap; margin-bottom:34px}
.dial{position:relative; width:150px; height:150px; flex:none}
.dial svg{transform:rotate(-90deg); width:100%; height:100%}
.dial circle{fill:none; stroke-width:11; stroke-linecap:round}
.dial .track{stroke:var(--sand)}
.dial .val{stroke:var(--teal); transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.3,1), stroke .6s}
.dial-num{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
}
.dial-num b{font-family:var(--serif); font-size:2.7rem; color:var(--ink); line-height:1; font-weight:600}
.dial-num span{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.score-head .verdict{flex:1; min-width:220px}
.score-head .verdict h3{margin-bottom:.35em}
.score-head .verdict p{color:var(--muted); font-size:.97rem; margin:0}

.bars{display:grid; gap:18px; margin-bottom:36px}
.bar-row{display:grid; grid-template-columns:170px 1fr 48px; gap:16px; align-items:center}
@media(max-width:620px){.bar-row{grid-template-columns:120px 1fr 40px; gap:10px}}
.bar-row .lbl{font-size:.85rem; font-weight:600; color:var(--ink)}
.bar-track{height:8px; border-radius:100px; background:var(--sand); overflow:hidden}
.bar-fill{display:block; height:100%; border-radius:100px; background:var(--teal); width:0; transition:width 1s cubic-bezier(.2,.8,.3,1)}
.bar-row .pct{font-size:.83rem; font-weight:700; color:var(--muted); text-align:right}

.findings{display:grid; gap:12px}
.finding{
  display:flex; gap:16px; padding:20px 22px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--paper);
}
.finding .ico{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  font-size:.8rem; font-weight:800;
}
.f-crit .ico{background:#FEF1F1; color:#B4232C}
.f-warn .ico{background:#FFF7E8; color:#9A6800}
.f-good .ico{background:#EDF9F1; color:#1B7A45}
.f-tip  .ico{background:var(--teal-wash); color:var(--teal-deep)}
.finding h4{font-family:var(--sans); font-size:.98rem; font-weight:700; color:var(--ink); margin:0 0 .3em}
.finding p{font-size:.91rem; color:var(--muted); margin:0}
.finding code{
  background:var(--sand); padding:.12em .45em; border-radius:5px;
  font-size:.88em; color:var(--ink); font-family:ui-monospace,Menlo,Consolas,monospace;
}

.res-group-title{
  font-size:.75rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:30px 0 14px;
}

/* Netlify form */
.form-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-m);
}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:660px){.row2{grid-template-columns:1fr}}
.file-input{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--cream); font-size:.9rem; color:var(--ink-soft); cursor:pointer;
}
.file-input::file-selector-button{
  font-family:var(--sans); font-size:.85rem; font-weight:600; margin-right:14px;
  padding:.5em 1.1em; border:0; border-radius:100px; background:var(--ink); color:#fff; cursor:pointer;
}
.hp{position:absolute; left:-9999px; opacity:0}

/* ============================================================
   ACCORDION / FAQ
   ============================================================ */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--serif); font-size:1.14rem; color:var(--ink); font-weight:600;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:1.8px solid var(--teal); border-bottom:1.8px solid var(--teal);
  translate:0 -60%; rotate:45deg; transition:.3s;
}
.acc details[open] summary::after{rotate:225deg; translate:0 -25%}
.acc .acc-body{padding:0 40px 26px 0; color:var(--muted); font-size:.97rem}
.acc .acc-body p:last-child{margin-bottom:0}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{
  background:var(--ink-deep); color:rgba(255,255,255,.75);
  border-radius:var(--r-xl); padding:clamp(40px,6vw,68px);
  position:relative; overflow:hidden; text-align:center; isolation:isolate;
}
.cta-band::before{
  content:""; position:absolute; inset:-40% -20%; z-index:-1;
  background:radial-gradient(45% 60% at 30% 20%, rgba(43,169,207,.42), transparent 60%),
             radial-gradient(45% 60% at 75% 90%, rgba(24,90,150,.4), transparent 62%);
  filter:blur(6px);
}
.cta-band h2{color:#fff; max-width:20ch; margin-inline:auto}
.cta-band p{max-width:56ch; margin-inline:auto; color:rgba(255,255,255,.68)}
.cta-band .hero-actions{justify-content:center}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink-deep); color:rgba(255,255,255,.55); padding:70px 0 0}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:52px; border-bottom:1px solid var(--line-dark);
}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr; gap:34px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand img{height:38px; width:auto; margin-bottom:18px}
.foot-brand p{font-size:.9rem; color:rgba(255,255,255,.5); max-width:34ch; margin:0}
.foot-col h4{
  font-family:var(--sans); font-size:.72rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.9); margin:0 0 1.3em;
}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.85em}
.foot-col a{
  text-decoration:none; font-size:.92rem; color:rgba(255,255,255,.55);
  transition:color .2s;
}
.foot-col a:hover{color:var(--teal-light)}

.legal{padding:34px 0 44px; font-size:.72rem; line-height:1.75; color:rgba(255,255,255,.36)}
.legal p{margin:0 0 .9em; max-width:none}
.legal p:last-child{margin-bottom:0}
.legal strong{color:rgba(255,255,255,.55); font-weight:700}
.legal a{color:rgba(255,255,255,.5)}
.legal-bar{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:22px; margin-top:22px; border-top:1px solid rgba(255,255,255,.08);
  font-size:.75rem; color:rgba(255,255,255,.4);
}
.legal-bar .parent{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.32);
}

/* ============================================================
   MOTION
   ============================================================ */
.reveal{transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1)}
html.js .reveal:not(.in){opacity:0; transform:translateY(22px)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

::selection{background:var(--teal); color:#fff}

:focus-visible{outline:2.5px solid var(--teal); outline-offset:3px; border-radius:6px}

/* skip link */
.skip{
  position:absolute; left:-9999px; top:10px; z-index:1000;
  background:var(--ink); color:#fff; padding:.7em 1.2em; border-radius:100px;
  font-size:.9rem; text-decoration:none;
}
.skip:focus{left:20px}