@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root{
  --ink:#14171f;
  --paper:#f7f3ec;
  --paper-2:#efe9dc;
  --blue:#0d63e0;
  --blue-deep:#0a2fae;
  --red:#e2472b;
  --red-deep:#b8371f;
  --green:#1f7a4d;
  --gold:#d4a62a;
  --teal:#1f6f7a;
  --line:rgba(20,23,31,0.12);
  --muted:#6b6a63;
  --radius:14px;
  --shadow-sm:0 2px 8px rgba(20,23,31,0.06);
  --shadow-md:0 8px 30px rgba(20,23,31,0.09);
  --shadow-lg:0 24px 60px rgba(20,23,31,0.16);
}
.serif{font-family:'Fraunces',serif;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  animation:fadeIn .4s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
h1,h2,h3,.display{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-0.01em;
  margin:0;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}
::selection{background:var(--red);color:#fff;}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  background:rgba(247,243,236,0.82);backdrop-filter:blur(10px);
}
.nav .brand{font-family:'Space Grotesk';font-weight:700;font-size:19px;}
.nav .brand span{color:var(--red);}
.brand-link{display:inline-flex;align-items:center;text-decoration:none;line-height:0;cursor:pointer;gap:9px;}
.brand-logo-img{height:32px;width:auto;display:block;}
.brand-wordmark{height:20px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:24px;}
.nav a.navlink{font-size:14px;font-weight:500;text-decoration:none;opacity:0.75;transition:opacity .15s ease;}
.nav a.navlink:hover{opacity:1;}

/* marketing nav: brand | centered links | right CTA */
.nav-3col{display:grid;grid-template-columns:auto 1fr auto;column-gap:32px;}
.nav-3col .brand-link{grid-column:1;}
.nav-3col .nav-links{grid-column:2;justify-content:center;gap:40px;}
.nav-3col .nav-cta{grid-column:3;justify-self:end;}
.btn.mobile-cta{display:none;}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;padding:0;}
.menu-toggle span{display:block;width:16px;height:2px;background:var(--ink);margin:0 auto;border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;
  font-weight:600;font-size:14px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0px) scale(.98);box-shadow:var(--shadow-sm);}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:#000;}
.btn-accent{background:linear-gradient(135deg, var(--blue), var(--blue-deep));color:#fff;}
.btn-accent:hover{background:linear-gradient(135deg, var(--blue-deep), var(--blue-deep));filter:brightness(1.05);}
.btn-ghost{border-color:var(--line);background:transparent;color:var(--ink);box-shadow:none;}
.btn-ghost:hover{background:#fff;box-shadow:var(--shadow-sm);}

/* ---------- containers ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 40px;}
.page{min-height:100vh;}

/* ---------- hero ---------- */
/* Note: the actual .hero/.hero-top/.scroll-cue/.eyebrow/h1/p.sub/.cta-row
   rules live further down (see "hero: two-column on desktop" below) —
   kept there so they sit AFTER the mobile media query in source order.
   Only the .stat-ring primitives (still used inside .mockup-rings) stay here. */
.stat-ring-item{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;flex:0 1 auto;}
.stat-ring{position:relative;width:clamp(44px,16vw,110px);aspect-ratio:1/1;}
.stat-ring svg{display:block;width:100%;height:100%;animation:ringspin 9s linear infinite;}
.stat-ring .ring-bg{fill:none;stroke:var(--line);stroke-width:10;}
.stat-ring .ring-fg{fill:none;stroke:var(--blue);stroke-width:10;stroke-linecap:round;}
.stat-ring.c-green .ring-fg{stroke:var(--green);}
.stat-ring.c-gold .ring-fg{stroke:var(--gold);}
.stat-ring.c-teal .ring-fg{stroke:var(--teal);}
.stat-ring .ring-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 20%;text-align:center;
}
.stat-ring .num{font-family:'Space Grotesk';font-weight:700;font-size:clamp(12px,4.4vw,22px);line-height:1;white-space:nowrap;}
.stat-caption{
  font-size:clamp(9.5px,2.6vw,12.5px);color:var(--muted);text-align:center;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.25;max-width:100px;
}
@keyframes ringspin{from{transform:rotate(-90deg);}to{transform:rotate(270deg);}}
@media(prefers-reduced-motion:reduce){.stat-ring svg{animation:none;transform:rotate(-90deg);}}

/* signature ring */
.ring-wrap{position:relative;width:180px;height:180px;}
.ring-wrap svg{display:block;width:100%;height:100%;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:var(--line);stroke-width:10;}
.ring-fg{fill:none;stroke:var(--red);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s ease;}
.ring-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;padding:0 24%;text-align:center;
}
.ring-label .num{font-family:'Space Grotesk';font-weight:700;font-size:28px;line-height:1;white-space:nowrap;}
.ring-label .txt{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;line-height:1.25;margin-top:4px;}


/* ---------- role cards ---------- */
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px;}
.role-card{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;cursor:pointer;background:#fff;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  position:relative;box-shadow:var(--shadow-sm);
}
.role-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.role-card.selected{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink);}
.role-card .step-no{font-family:'JetBrains Mono';font-size:12px;color:var(--muted);}
.role-card h3{font-size:19px;margin:8px 0 6px;}
.role-card p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.4;}
.role-card .check{
  position:absolute;top:20px;right:20px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line);
}
.role-card.selected .check{background:var(--ink);border-color:var(--ink);}

/* ---------- form ---------- */
.panel{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:40px;margin:40px 0;box-shadow:var(--shadow-sm);
}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:9px;border:1px solid var(--line);
  font-family:'Inter';font-size:14px;background:var(--paper);
}
.field textarea{min-height:90px;resize:vertical;}
.step-track{display:flex;gap:8px;margin-bottom:30px;}
.step-track .dot{height:4px;flex:1;border-radius:2px;background:var(--line);}
.step-track .dot.done{background:var(--red);}

/* ---------- dashboard ---------- */
.dash{display:grid;grid-template-columns:280px 1fr;gap:32px;padding:40px;max-width:1200px;margin:0 auto;}
.side{border-right:1px solid var(--line);padding-right:24px;}
.side .avatar-block{text-align:center;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:24px;}
.avatar{width:88px;height:88px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-size:28px;font-weight:700;margin:0 auto 14px;}
.side nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);margin-bottom:4px;transition:background .15s ease;}
.side nav a.active{background:var(--ink);color:#fff;}
.side nav a:hover:not(.active){background:var(--line);}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;}
.stat{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff;}
.stat .num{font-family:'Space Grotesk';font-size:30px;font-weight:700;}
.stat .lbl{font-size:12.5px;color:var(--muted);margin-top:4px;}

.upload-row{
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:10px;background:#fff;
}
.upload-row.done{border-color:var(--green);}
.upload-row .tag{font-size:11px;font-family:'JetBrains Mono';padding:3px 9px;border-radius:99px;background:var(--line);}
.upload-row.done .tag{background:var(--green);color:#fff;}

.locked-banner{
  background:var(--ink);color:var(--paper);border-radius:16px;padding:26px 28px;
  display:flex;justify-content:space-between;align-items:center;margin-top:8px;
}
.locked-banner h3{color:#fff;font-size:18px;margin-bottom:4px;}
.locked-banner p{margin:0;color:rgba(247,243,236,0.7);font-size:13.5px;max-width:380px;}

table.visits{width:100%;border-collapse:collapse;margin-top:14px;}
table.visits th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--line);}
table.visits td{padding:12px 10px;font-size:13.5px;border-bottom:1px solid var(--line);}
.blur{filter:blur(4px);user-select:none;}

/* ---------- public profile — editorial / premium ---------- */
.pub-page{background:var(--paper);}
.pub-cover{
  height:260px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(226,71,43,0.55), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(212,166,42,0.45), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(31,122,77,0.35), transparent 55%),
    var(--ink);
}
.pub-cover::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 6px);
}
.edit-pill{
  position:absolute;top:22px;left:24px;padding:8px 16px;border-radius:99px;z-index:2;
  border:1px solid rgba(247,243,236,0.35);color:#fff;text-decoration:none;
  font-size:12.5px;font-weight:500;backdrop-filter:blur(6px);background:rgba(247,243,236,0.08);
}
.edit-pill:hover{background:rgba(247,243,236,0.18);}

.pub-identity{
  max-width:760px;margin:-84px auto 0;padding:0 40px;position:relative;z-index:2;
  display:flex;align-items:flex-end;gap:26px;
}
.pub-avatar{
  width:132px;height:132px;border-radius:28px;flex:0 0 auto;
  background:linear-gradient(155deg,var(--red),var(--red-deep));
  border:5px solid var(--paper);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces';font-size:44px;font-weight:600;color:#fff;
}
.pub-id-text{padding-bottom:14px;}
.pub-id-text h1{font-size:32px;color:var(--ink);display:flex;align-items:center;gap:8px;}
.verified{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--green);color:#fff;font-size:12px;flex:0 0 auto;
}
.pub-tagline{font-size:14.5px;color:var(--muted);margin-top:5px;}
.pub-id-text .role-pill{
  display:inline-block;margin-top:12px;padding:6px 15px;border-radius:99px;
  background:var(--ink);color:var(--paper);font-size:11.5px;font-family:'JetBrains Mono';letter-spacing:.03em;
}

.pub-body{max-width:760px;margin:38px auto 0;padding:0 40px 80px;position:relative;}
.pub-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start;}
.pub-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;margin-bottom:20px;
  box-shadow:var(--shadow-sm);
}
.pub-card h3{
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:18px;
  display:flex;align-items:center;gap:8px;
}
.pub-card h3::before{content:"";width:14px;height:2px;background:var(--red);display:inline-block;}
.pub-about-text{font-family:'Fraunces';font-size:19px;line-height:1.6;color:var(--ink);font-weight:500;}

.exp-item{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line);position:relative;padding-left:22px;}
.exp-item::before{content:"";position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:50%;background:var(--red);}
.exp-item:last-child{border:none;margin:0;padding-bottom:0;}
.exp-item .role{font-weight:600;font-size:15.5px;}
.exp-item .org{font-size:13px;color:var(--muted);margin-top:2px;}
.exp-item .when{font-size:11.5px;color:var(--muted);font-family:'JetBrains Mono';margin-top:3px;}

.skill-tags{display:flex;flex-wrap:wrap;gap:8px;}
.skill-tag{
  padding:7px 14px;border-radius:99px;background:var(--paper-2);border:1px solid var(--line);
  font-size:12.5px;font-weight:500;
}

.qr-card{text-align:center;position:sticky;top:24px;}
.qr-card .qr-frame{
  background:var(--paper-2);border-radius:16px;padding:16px;display:inline-block;margin-bottom:14px;
}
.qr-card p{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:16px;}
.doc-mini{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;}
.doc-mini:last-child{border:none;}
.doc-mini .ic{width:26px;height:26px;border-radius:7px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-family:'JetBrains Mono';color:var(--muted);flex:0 0 auto;}

.share-row{display:flex;gap:12px;margin-top:6px;}
.share-row .btn{flex:1;justify-content:center;}

/* ---------- employer browse ---------- */
.search-bar{display:flex;gap:10px;margin-bottom:28px;}
.search-bar input{flex:1;padding:14px 16px;border-radius:10px;border:1px solid var(--line);font-size:14px;background:#fff;}
.filter-select{padding:14px 16px;border-radius:10px;border:1px solid var(--line);font-size:14px;background:#fff;font-family:'Inter';color:var(--ink);}
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.candidate{
  border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;
  box-shadow:var(--shadow-sm);transition:transform .15s ease, box-shadow .15s ease;
}
.candidate:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.candidate-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.candidate-avatar{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:15px;
  background:linear-gradient(155deg,var(--red),var(--red-deep));
}
.candidate .name{font-weight:600;font-size:15.5px;}
.candidate .role{font-size:12px;color:var(--red);font-family:'JetBrains Mono';margin-top:1px;}
.candidate .desc{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px;}
.candidate .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.candidate .tags span{background:var(--paper-2);border-radius:99px;padding:4px 10px;font-size:11px;font-weight:500;}
.candidate .row-actions{display:flex;gap:8px;}
.candidate .row-actions .btn{flex:1;justify-content:center;padding:9px 14px;font-size:13px;}

footer.foot{padding:30px 40px;text-align:center;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);}

/* ---------- documents tab & avatar upload ---------- */
.dropzone{
  border:1.5px dashed var(--line);border-radius:16px;padding:34px;text-align:center;
  background:var(--paper-2);cursor:pointer;transition:border-color .15s ease, background .15s ease;
  margin-bottom:22px;
}
.dropzone:hover{border-color:var(--red);background:#fff;}
.dropzone .ic{font-size:26px;margin-bottom:8px;}
.dropzone strong{font-size:14.5px;}
.dropzone p{font-size:12.5px;color:var(--muted);margin-top:4px;}

.doc-list{display:flex;flex-direction:column;gap:10px;}
.doc-row{
  display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;background:#fff;box-shadow:var(--shadow-sm);
}
.doc-row .file-ic{
  width:38px;height:38px;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-family:'JetBrains Mono';font-weight:600;color:#fff;
}
.doc-row .file-ic.pdf{background:var(--red);}
.doc-row .file-ic.img{background:var(--green);}
.doc-row .meta{flex:1;}
.doc-row .meta .name{font-weight:600;font-size:13.5px;}
.doc-row .meta .sub{font-size:11.5px;color:var(--muted);margin-top:2px;}
.remove{
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-size:12px;font-weight:600;padding:6px 14px;border-radius:99px;flex:0 0 auto;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.remove:hover{color:var(--red);border-color:var(--red);background:rgba(226,71,43,0.06);}
.doc-row .remove{border:1px solid var(--line);}

.file-picker{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:9px;
  border:1px solid var(--line);background:var(--paper-2);cursor:pointer;font-size:13px;
  font-weight:600;color:var(--ink);transition:border-color .15s ease,background .15s ease;
}
.file-picker:hover{border-color:var(--ink);background:#fff;}
.doc-row .remove:hover{color:var(--red);}

.avatar-editable{position:relative;width:88px;height:88px;margin:0 auto 14px;}
.avatar-editable .cam{
  position:absolute;bottom:-2px;right:-2px;width:28px;height:28px;border-radius:50%;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;border:2px solid var(--paper);cursor:pointer;
}

@media(max-width:860px){
  .roles{grid-template-columns:1fr;}
  .dash{grid-template-columns:1fr;}
  .side{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:20px;}
  .grid-cards{grid-template-columns:1fr;}
  .testimonial-row{grid-template-columns:1fr;}
  .pricing-row{grid-template-columns:1fr;}
  .pub-grid{grid-template-columns:1fr;}
  .quick-stats{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
}

@media(max-width:600px){
  .wrap,.hero,.nav{padding-left:20px;padding-right:20px;}
  .hero{padding-top:90px;padding-bottom:70px;}
  .hero h1{font-size:clamp(30px,9vw,42px);}
  .hero p.sub{font-size:15.5px;}
  .hero-stats-row{justify-content:center;}
  .scroll-cue{display:none;}
  .nav{flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px 20px;position:relative;}
  .nav-3col{display:flex;}
  .menu-toggle{display:flex;order:2;margin-left:auto;}
  .btn.nav-cta{display:none;}
  .btn.mobile-cta{display:flex;}
  .nav-links{
    display:none;flex-direction:column;align-items:stretch;width:100%;
    order:4;margin-top:14px;gap:4px;
  }
  .nav-links.open{display:flex;}
  .nav-links a.navlink{margin-left:0;padding:10px 4px;border-top:1px solid var(--line);opacity:1;}
  .nav-links .btn{width:100%;justify-content:center;margin-top:6px;}
  .cta-row{flex-direction:column;align-items:stretch;}
  .cta-row .btn{justify-content:center;}
  .ring-wrap{width:120px;height:120px;margin:0 auto;}
  .ring-wrap:not(.sm) .ring-label .num{font-size:20px;}
  .ring-wrap:not(.sm) .ring-label .txt{font-size:9px;}
  .dash{padding:20px;gap:20px;}
  .pub-identity{flex-direction:column;align-items:flex-start;margin-top:-60px;}
  .pub-avatar{width:96px;height:96px;font-size:32px;}
  .pub-body{padding:0 20px 60px;}
  .pub-card{padding:22px;}
  .price-card{padding:24px;}
  .quick-stats{grid-template-columns:repeat(2,1fr);gap:10px;}
  .locked-banner{flex-direction:column;align-items:flex-start;gap:14px;}
  .locked-banner .btn{width:100%;justify-content:center;}
  .step-track{margin-bottom:20px;}
  .search-bar{flex-direction:column;}
  .candidate .row-actions{flex-direction:column;}
  table.visits{font-size:12px;display:block;overflow-x:auto;white-space:nowrap;}
  .panel{padding:24px;margin:24px 0;}
  .hero::before,.hero::after{display:none;}
}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:99px;
  font-size:13.5px;font-weight:500;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:200;
  display:flex;align-items:center;gap:8px;
}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast .dot{width:7px;height:7px;border-radius:50%;background:var(--green);}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,23,31,0.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:300;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.modal-overlay.show{opacity:1;pointer-events:auto;}
.modal-box{
  background:#fff;border-radius:20px;padding:30px;width:100%;max-width:420px;
  box-shadow:var(--shadow-lg);transform:translateY(12px);transition:transform .2s ease;
}
.modal-overlay.show .modal-box{transform:translateY(0);}
.modal-close{background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;line-height:1;}
.modal-close:hover{color:var(--red);}

.flex-between{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
@media(max-width:600px){
  .flex-between{flex-direction:column;align-items:stretch;}
  .flex-between .btn{width:100%;justify-content:center;}
  .flex-between svg{margin:0 auto;}
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-1{transition-delay:.05s;}
.reveal-2{transition-delay:.15s;}
.reveal-3{transition-delay:.25s;}

/* =======================================================================
   SaaS landing enhancements — nav scroll state, hero product preview,
   ambient motion, vertical marquee, animated stat rings, card tilt.
   ======================================================================= */

/* nav gains weight once you've scrolled past the hero, like a real app bar */
.nav{transition:box-shadow .25s ease, background-color .25s ease, padding .25s ease;}
.nav.is-scrolled{
  box-shadow:0 1px 0 var(--line), 0 12px 30px -18px rgba(20,23,31,0.35);
  background:rgba(247,243,236,0.94);
}

/* ---------- hero: two-column on desktop, copy + product preview ---------- */
.hero{
  padding:120px 40px 90px;text-align:left;position:relative;overflow:hidden;
  min-height:100vh;min-height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  align-items:center;gap:56px;
}
.hero-top{max-width:820px;grid-column:1;}
.hero-visual{grid-column:2;position:relative;}
.hero-stats-row{display:none;} /* superseded by .hero-mockup's own stat slide */

/* three slow-drifting ambient blobs instead of two static gradients */
.hero::before,.hero::after,.hero-visual::before{
  content:"";position:absolute;border-radius:50%;z-index:0;pointer-events:none;
}
.hero::before{
  top:-160px;right:-140px;width:460px;height:460px;
  background:radial-gradient(circle, rgba(226,71,43,0.17), transparent 70%);
  animation:blobDrift1 22s ease-in-out infinite alternate;
}
.hero::after{
  bottom:-180px;left:-110px;width:380px;height:380px;
  background:radial-gradient(circle, rgba(31,122,77,0.13), transparent 70%);
  animation:blobDrift2 26s ease-in-out infinite alternate;
}
.hero-visual::before{
  top:10%;right:10%;width:260px;height:260px;
  background:radial-gradient(circle, rgba(212,166,42,0.16), transparent 70%);
  animation:blobDrift3 18s ease-in-out infinite alternate;
}
@keyframes blobDrift1{from{transform:translate(0,0) scale(1);}to{transform:translate(-30px,26px) scale(1.08);}}
@keyframes blobDrift2{from{transform:translate(0,0) scale(1);}to{transform:translate(24px,-20px) scale(1.05);}}
@keyframes blobDrift3{from{transform:translate(0,0) scale(1);}to{transform:translate(-18px,18px) scale(1.1);}}
.hero > *{position:relative;z-index:1;}
.hero .eyebrow{
  font-family:'JetBrains Mono';font-size:12px;color:var(--red);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px;display:block;
}
.hero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.03;max-width:640px;}
.hero h1 em{font-style:normal;color:var(--blue);}
.hero p.sub{font-size:17.5px;color:var(--muted);max-width:500px;margin-top:22px;line-height:1.55;}
.hero .cta-row{margin-top:34px;display:flex;gap:14px;}
.scroll-cue{
  grid-column:1/-1;align-self:end;justify-self:center;margin-top:36px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--muted);text-decoration:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  animation:cueBounce 2.2s ease-in-out infinite;
}
.scroll-cue svg{width:16px;height:16px;}
@keyframes cueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* mobile collapse for the two-column hero — placed here, after the base
   .hero rule above, so it actually wins the cascade (a rule with equal
   specificity earlier in the file loses to one later, media query or not) */
@media(max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:100px;}
  .hero-top{max-width:none;}
  .hero-visual{grid-column:1;margin-top:40px;max-width:420px;justify-self:center;width:100%;}
}

/* ---------- hero product-preview mockup: the signature element ---------- */
/* A "browser chrome" card that cycles through what a shared TenaWork link
   actually opens to — CV, shop, booking page — because that switch, not a
   generic dashboard screenshot, is the one true thing the product does. */
.hero-mockup{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);overflow:hidden;
  animation:mockupFloat 6s ease-in-out infinite;
  transform-style:preserve-3d;will-change:transform;
}
@keyframes mockupFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.mockup-chrome{
  display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper-2);
}
.mockup-dot{width:9px;height:9px;border-radius:50%;background:var(--line);}
.mockup-url{
  margin-left:8px;font-family:'JetBrains Mono';font-size:11px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 12px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.mockup-body{position:relative;height:320px;}
.mockup-slide{
  position:absolute;inset:0;padding:22px;opacity:0;transform:translateX(14px);
  transition:opacity .5s ease, transform .5s ease;pointer-events:none;
}
.mockup-slide.active{opacity:1;transform:translateX(0);pointer-events:auto;}
.mockup-head{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.mockup-avatar{width:38px;height:38px;border-radius:10px;background:linear-gradient(155deg,var(--red),var(--red-deep));flex:0 0 auto;}
.mockup-head-name{font-family:'Space Grotesk';font-weight:700;font-size:14px;}
.mockup-head-sub{font-size:11.5px;color:var(--muted);}

.mockup-rings{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.mockup-rings .stat-ring{width:100%;}
.mockup-rings .stat-caption{font-size:9px;max-width:none;}

.mockup-products{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.mockup-product{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-2);}
.mockup-product-img{height:56px;background:linear-gradient(135deg,var(--paper-2),var(--line));}
.mockup-product-info{padding:8px;}
.mockup-product-price{font-size:11px;font-weight:700;color:var(--red);}
.mockup-banner{
  display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;
  border-radius:12px;padding:12px 14px;font-size:12px;
}
.mockup-banner strong{font-family:'Space Grotesk';font-size:15px;}

.mockup-slots{display:flex;flex-direction:column;gap:8px;}
.mockup-slot{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:12.5px;
}
.mockup-slot.booked{background:var(--paper-2);color:var(--muted);}
.mockup-slot .tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:99px;}
.mockup-slot.open .tag{background:rgba(31,122,77,0.14);color:var(--green);}
.mockup-slot.booked .tag{background:var(--line);color:var(--muted);}

.mockup-dots{display:flex;gap:6px;justify-content:center;padding:14px 0 18px;}
.mockup-dots .mdot{width:6px;height:6px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:width .2s ease,background .2s ease;}
.mockup-dots .mdot.active{background:var(--red);width:20px;border-radius:99px;}

@media(prefers-reduced-motion:reduce){
  .hero-mockup{animation:none;}
  .hero::before,.hero::after,.hero-visual::before{animation:none;}
}

/* ---------- vertical marquee strip ---------- */
.marquee-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);padding:22px 0;overflow:hidden;}
.marquee-label{font-family:'JetBrains Mono';font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;text-align:center;margin-bottom:14px;}
.marquee-track{display:flex;width:max-content;animation:marqueeScroll 32s linear infinite;}
.marquee-section:hover .marquee-track{animation-play-state:paused;}
.marquee-chip{
  display:flex;align-items:center;gap:8px;font-family:'Space Grotesk';font-weight:600;font-size:15px;
  color:var(--ink);padding:0 28px;white-space:nowrap;
}
.marquee-chip::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);margin-left:28px;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
}

/* ---------- gentle tilt-on-hover for feature/step/pricing cards ---------- */
@media(hover:hover) and (pointer:fine){
  .tilt-card{transition:transform .2s ease, box-shadow .2s ease;}
}

/* ---------- how it works: numbered steps with a connecting path ---------- */
.steps-row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.steps-row::before{
  content:"";position:absolute;top:48px;left:calc(16.5% + 10px);right:calc(16.5% + 10px);height:2px;
  background:repeating-linear-gradient(to right, var(--line) 0 8px, transparent 8px 16px);
  z-index:0;
}
.step-card{
  position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:28px;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease;
}
.step-card:hover{box-shadow:var(--shadow-md);}
.step-card h3{font-size:17px;margin-bottom:8px;}
.step-card p{font-size:13.5px;color:var(--muted);line-height:1.55;}
.step-icon{
  width:40px;height:40px;border-radius:11px;background:var(--paper-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:14px;
}
.step-icon svg{width:19px;height:19px;}
.step-num{
  font-family:'JetBrains Mono';font-size:12px;font-weight:600;color:var(--muted);
  margin-bottom:6px;letter-spacing:.04em;
}
@media(max-width:860px){
  .steps-row{grid-template-columns:1fr;}
  .steps-row::before{display:none;}
}

/* ---------- testimonial wall: continuous marquee, not a single-slide carousel ---------- */
.testi-wall{overflow:hidden;position:relative;}
.testi-wall::before,.testi-wall::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.testi-wall::before{left:0;background:linear-gradient(to right, var(--paper), transparent);}
.testi-wall::after{right:0;background:linear-gradient(to left, var(--paper), transparent);}
.testi-track{display:flex;width:max-content;gap:20px;animation:testiScroll 46s linear infinite;}
.testi-wall:hover .testi-track{animation-play-state:paused;}
.testimonial-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow-sm);
  width:340px;flex:0 0 auto;display:flex;flex-direction:column;
}
.testimonial-card .quote-mark{font-family:'Fraunces';font-size:40px;color:var(--red);line-height:1;margin-bottom:6px;opacity:.5;}
.testimonial-card p{font-family:'Fraunces';font-size:17px;line-height:1.5;margin-bottom:20px;color:var(--ink);flex:1;}
.who{display:flex;align-items:center;gap:10px;}
.who-avatar{
  width:36px;height:36px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(155deg,var(--blue),var(--blue-deep));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk';font-weight:700;font-size:13px;
}
.who strong{font-size:13.5px;}
.muted-sm{font-size:12px;color:var(--muted);}
@keyframes testiScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
  .testi-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
  .testi-wall::before,.testi-wall::after{display:none;}
}
@media(max-width:600px){.testimonial-card{width:280px;}}

/* ---------- pricing: monthly/annual toggle, backed by real annual rates ---------- */
.pricing-toggle{
  display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 34px;
}
.pricing-toggle-track{
  position:relative;display:flex;background:var(--paper-2);border:1px solid var(--line);
  border-radius:99px;padding:4px;font-size:13px;font-weight:600;
}
.pricing-toggle-track button{
  position:relative;z-index:1;border:none;background:none;padding:9px 20px;border-radius:99px;
  cursor:pointer;color:var(--muted);transition:color .2s ease;font-family:'Inter';font-size:13px;font-weight:600;
}
.pricing-toggle-track button.active{color:#fff;}
.pricing-toggle-thumb{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--ink);
  border-radius:99px;transition:transform .25s ease;z-index:0;
}
.pricing-toggle-track.annual .pricing-toggle-thumb{transform:translateX(100%);}
.pricing-save-badge{
  background:rgba(31,122,77,0.14);color:var(--green);font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:99px;
}
.price-card .price .price-period{font-size:13px;font-weight:500;color:var(--muted);}
.price-annual-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:-14px;margin-bottom:20px;}

/* ---------- FAQ: small icon bubble per question ---------- */
.faq-item{display:flex;gap:14px;border-bottom:1px solid var(--line);padding:2px 0;}
.faq-icon{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-size:14px;
  color:var(--blue);margin-top:16px;
}
.faq-body{flex:1;min-width:0;}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:16px 0;cursor:pointer;
  font-family:'Inter';font-weight:600;font-size:15px;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-q span{color:var(--red);font-size:18px;transition:transform .2s ease;flex:0 0 auto;}
.faq-item.open .faq-q span{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:14px;color:var(--muted);line-height:1.6;}
.faq-item.open .faq-a{max-height:160px;padding-bottom:18px;}

/* ---------- landing page: services/features teaser grid ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:0 auto;}
.feature-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;
  box-shadow:var(--shadow-sm);
}
.feature-ic{
  width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:14px;font-family:'Space Grotesk';margin-bottom:14px;
}
.feature-card h3{font-size:16px;margin-bottom:8px;}
.feature-card p{font-size:13.5px;color:var(--muted);line-height:1.55;}
@media(max-width:860px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.feature-grid{grid-template-columns:1fr;}}

/* ---------- FAQ + Contact: split section, FAQ left / form right ---------- */
.faq-contact-split{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
  max-width:1080px;margin:0 auto;
}
.split-col-title{
  font-family:'Space Grotesk';font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:18px;
}
.faq-col .faq-list{border-top:1px solid var(--line);}
.contact-col .contact-card{margin:0;}
.contact-col .contact-chips{grid-template-columns:1fr;} /* narrower column: stack instead of wrapping mid-word */
@media(max-width:860px){
  .faq-contact-split{grid-template-columns:1fr;gap:44px;}
}

/* ---------- contact form: visible focus state ---------- */
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,23,31,0.08);
}