/* =======================================================================
   TenaWork — Cryptomus-accurate dark theme
   Scoped entirely under body.dark-landing (index, services, employer/
   explore-profiles) so /dashboard, /profile, /auth etc. keep the original
   light theme from style.css completely untouched.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap');

body.dark-landing{
  /* surfaces */
  --dk-bg:#0B0E14;
  --dk-bg-2:#090A0F;
  --dk-card:#121721;
  --dk-card-2:#171D28;
  --dk-card-inset:#0F131C;

  /* borders */
  --dk-border:rgba(255,255,255,0.08);
  --dk-border-strong:#334155;
  --dk-border-hover:#818CF8;

  /* text */
  --dk-text:#FFFFFF;
  --dk-muted:#94A3B8;
  --dk-muted-dim:#64748B;
  --dk-input-text:#F8FAFC;

  /* accents */
  --dk-accent:#6366F1;
  --dk-accent-light:#818CF8;
  --dk-purple:#A855F7;
  --dk-cyan:#38BDF8;
  --dk-green:#22C55E;
  --dk-glow:rgba(99,102,241,0.18);
  --dk-glow-strong:rgba(99,102,241,0.35);

  background:var(--dk-bg);
  color:var(--dk-text);
}

body.dark-landing ::selection{background:var(--dk-accent);color:#fff;}

/* ---------- base typography ---------- */
body.dark-landing h1,
body.dark-landing h2,
body.dark-landing h3{
  color:#fff;font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-0.03em;
}
body.dark-landing p{color:var(--dk-muted);}
body.dark-landing .section-title{color:#fff;}
body.dark-landing .eyebrow{
  color:var(--dk-accent-light);font-size:0.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
}
body.dark-landing .muted-sm{color:var(--dk-muted-dim);}

/* ---------- nav ---------- */
body.dark-landing .nav{
  background:rgba(11,14,20,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
body.dark-landing .nav.is-scrolled{
  background:rgba(11,14,20,0.96);
  box-shadow:0 1px 0 rgba(255,255,255,0.05), 0 16px 40px -24px rgba(0,0,0,0.7);
}
body.dark-landing .brand-wordmark tspan{fill:#fff !important;}
body.dark-landing .brand-wordmark tspan:last-child{fill:var(--dk-accent-light) !important;}
body.dark-landing .nav a.navlink{color:var(--dk-muted);opacity:1;font-weight:500;}
body.dark-landing .nav a.navlink:hover{color:#fff;}
body.dark-landing .menu-toggle{background:var(--dk-card);border-color:var(--dk-border);}
body.dark-landing .menu-toggle span{background:#fff;}
body.dark-landing .nav-links.open{background:var(--dk-bg);border-bottom:1px solid var(--dk-border);}
body.dark-landing .credit-pill{background:var(--dk-card);border:1px solid var(--dk-border);color:var(--dk-muted);}

/* Store dropdown in nav — lives here (not merch-dark.css) since the
   header renders on every page, not just the store's own pages */
body.dark-landing .nav-dropdown-trigger{color:var(--dk-muted);}
body.dark-landing .nav-dropdown-trigger:hover{color:#fff;}
body.dark-landing .nav-cart-count{
  background:linear-gradient(135deg,var(--dk-accent),var(--dk-purple));color:#fff;
}
body.dark-landing .nav-dropdown-menu{
  background:var(--dk-card);border:1px solid var(--dk-border);box-shadow:0 20px 50px -20px rgba(0,0,0,0.6);
}
body.dark-landing .nav-dropdown-menu a{color:var(--dk-muted);}
body.dark-landing .nav-dropdown-menu a:hover{background:var(--dk-card-2);color:#fff;}

/* ---------- buttons ---------- */
body.dark-landing .btn-primary{
  background:#fff;color:#0B0E14;border:1px solid #fff;box-shadow:none;font-weight:700;
}
body.dark-landing .btn-primary:hover{background:#E2E8F0;}
body.dark-landing .btn-accent{
  background:linear-gradient(135deg, var(--dk-accent), var(--dk-purple));
  color:#fff;border:none;box-shadow:0 8px 28px -8px var(--dk-glow-strong);
}
body.dark-landing .btn-accent:hover{
  filter:brightness(1.08);box-shadow:0 10px 34px -6px var(--dk-glow-strong), 0 0 24px rgba(168,85,247,0.25);
}
body.dark-landing .btn-ghost{border:1px solid var(--dk-border-strong);color:#fff;background:transparent;box-shadow:none;}
body.dark-landing .btn-ghost:hover{background:var(--dk-card);border-color:var(--dk-border-hover);}

/* ---------- generic card hover glow (shared recipe) ---------- */
body.dark-landing .feature-card,
body.dark-landing .step-card,
body.dark-landing .vertical-card,
body.dark-landing .candidate,
body.dark-landing .credit-pack,
body.dark-landing .price-card,
body.dark-landing .contact-card{
  background:var(--dk-card);
  border:1px solid var(--dk-border);
  transition:border-color .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1);
}
body.dark-landing .feature-card:hover,
body.dark-landing .step-card:hover,
body.dark-landing .vertical-card:hover,
body.dark-landing .candidate:hover,
body.dark-landing .credit-pack:hover,
body.dark-landing .price-card:hover,
body.dark-landing .contact-card:hover{
  border-color:var(--dk-border-hover);
  box-shadow:0 0 20px rgba(99,102,241,0.15);
  transform:translateY(-5px);
}

/* ---------- landing fold: a soft ~60/40 split of the first screen on tall
   desktop viewports, WITHOUT ever cropping content.
   The previous version used a literal `height:100vh` on the fold plus
   `overflow:hidden` on the hero to force an exact 60/40 crop. That's fragile
   by construction: the instant the hero's real content (headline + copy +
   both CTA buttons + mockup) needs more than 60% of the available height,
   the overflow:hidden silently deletes the rest — no scrollbar, no visual
   cue, it's just gone. That happens on *any* landscape phone (e.g. a phone
   rotated sideways is ~380-430px tall) and on plenty of small laptop/browser
   windows — none of which are caught by a max-*width* breakpoint alone,
   since the width on a landscape phone is often 800-950px.
   Fix: min-height (a floor, never a ceiling) + flex-grow on the marquee so
   it soaks up any leftover space up to one screen on tall viewports, while
   the hero only ever takes the height its own content actually needs. That
   still fills a normal desktop screen edge-to-edge, but nothing is ever
   clipped, on any device, at any zoom level. ---------- */
body.dark-landing .landing-fold{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
}
body.dark-landing .landing-fold .hero{
  flex:0 0 auto;
  /* NOT overflow:visible here: .hero's own base rule (style.css) already
     sets overflow:hidden, and that's still needed — not for cropping height
     (removed above), but to contain its decorative ::before/::after glow
     blobs, which are fixed-size circles bleeding past the box on purpose
     via negative offsets. Since height is now auto instead of forced, this
     overflow:hidden no longer clips real content — only those blobs, which
     is what it was always meant to do. */
}
body.dark-landing .landing-fold .marquee-section{
  flex:1 0 auto;min-height:0;
}
@media(max-width:860px){
  body.dark-landing .landing-fold{min-height:0;display:block;}
  body.dark-landing .landing-fold .marquee-section{flex:none;}
}

/* ---------- hero: sized to fit the 60% share above, with bigger type/buttons ---------- */
body.dark-landing .hero{
  padding:56px 40px 20px;
}
body.dark-landing .hero::before{background:radial-gradient(circle, rgba(99,102,241,0.22), transparent 70%);}
body.dark-landing .hero::after{background:radial-gradient(circle, rgba(168,85,247,0.14), transparent 70%);}
body.dark-landing .hero-visual::before{background:radial-gradient(circle, rgba(56,189,248,0.14), transparent 70%);}
body.dark-landing .hero .eyebrow{margin-bottom:10px;font-size:0.8rem;}
body.dark-landing .hero h1{
  color:#fff;font-family:'Manrope',sans-serif;font-weight:800;
  font-size:clamp(36px,4.4vw,64px);line-height:1.02;letter-spacing:-0.03em;
  max-width:660px;
}
body.dark-landing .hero h1 em{color:var(--dk-accent-light);font-style:normal;}
body.dark-landing .hero p.sub{color:var(--dk-muted);font-size:17px;line-height:1.55;margin-top:14px;max-width:560px;}
body.dark-landing .hero .cta-row{margin-top:22px;gap:16px;}
body.dark-landing .hero .cta-row .btn{
  font-size:16.5px;padding:15px 30px;font-weight:700;
}
body.dark-landing .scroll-cue{display:none;}
@media(max-width:860px){
  body.dark-landing .hero{padding:110px 24px 40px;}
  body.dark-landing .hero h1{font-size:clamp(32px,8vw,48px);}
  body.dark-landing .hero .cta-row .btn{font-size:15px;padding:13px 24px;}
}

/* hero mockup: glassmorphic floating card with real 3D depth + mouse-tilt/glare */
body.dark-landing .hero-visual{
  perspective:1600px;
}
body.dark-landing .hero-mockup{
  background:linear-gradient(180deg, rgba(23,29,40,0.9), rgba(15,19,28,0.95));
  border:1px solid var(--dk-border);
  border-radius:20px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 1px 0 rgba(255,255,255,0.06) inset;
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  animation:mockupFloat3D 7s ease-in-out infinite;
  transition:box-shadow .3s ease;
}
body.dark-landing .hero-mockup.is-tilting{animation-play-state:paused;box-shadow:0 60px 120px -30px rgba(0,0,0,0.85),0 0 60px rgba(99,102,241,0.18),0 0 0 1px rgba(255,255,255,0.03) inset;}
body.dark-landing .hero-mockup::after{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:5;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.10) var(--glare-pos,40%), transparent 62%);
  opacity:0;transition:opacity .35s ease;
}
body.dark-landing .hero-mockup.is-tilting::after{opacity:1;}
/* ambient glow deepens the sense of depth behind the floating card */
body.dark-landing .hero-visual::before{
  filter:blur(10px);
}
@keyframes mockupFloat3D{
  0%{transform:perspective(1400px) rotateX(3deg) rotateY(-4deg) translateY(0) translateZ(0);}
  50%{transform:perspective(1400px) rotateX(-2deg) rotateY(4deg) translateY(-16px) translateZ(30px);}
  100%{transform:perspective(1400px) rotateX(3deg) rotateY(-4deg) translateY(0) translateZ(0);}
}
@media(prefers-reduced-motion:reduce){
  body.dark-landing .hero-mockup{animation:none;}
}
body.dark-landing .mockup-chrome{background:rgba(255,255,255,0.02);border-bottom:1px solid var(--dk-border);padding:9px 14px;}
body.dark-landing .mockup-dot{background:var(--dk-border-strong);}
body.dark-landing .mockup-url{background:var(--dk-bg);border-color:var(--dk-border);color:var(--dk-muted);}
body.dark-landing .mockup-body{height:220px;transform:translateZ(20px);}
body.dark-landing .mockup-slide{padding:16px;}
body.dark-landing .mockup-head{margin-bottom:12px;}
body.dark-landing .mockup-avatar{width:32px;height:32px;}
body.dark-landing .mockup-head-name{color:#fff;font-size:12.5px;}
body.dark-landing .mockup-head-sub{color:var(--dk-muted);font-size:10.5px;}
body.dark-landing .stat-ring{width:clamp(36px,12vw,72px);}
body.dark-landing .stat-ring .num{font-size:clamp(11px,3.4vw,16px);}
body.dark-landing .mockup-product{border-color:var(--dk-border);background:rgba(255,255,255,0.02);transform:translateZ(12px);}
body.dark-landing .mockup-product-img{height:40px;background:linear-gradient(135deg,var(--dk-card-2),var(--dk-border-strong));}
body.dark-landing .mockup-product-price{color:var(--dk-accent-light);}
body.dark-landing .mockup-banner{background:linear-gradient(135deg,var(--dk-accent),var(--dk-purple));transform:translateZ(24px);box-shadow:0 12px 30px -10px rgba(99,102,241,0.5);}
body.dark-landing .mockup-slot{border-color:var(--dk-border);color:var(--dk-muted);padding:7px 12px;}
body.dark-landing .mockup-slot.booked{background:rgba(255,255,255,0.02);color:var(--dk-muted-dim);}
body.dark-landing .stat-ring .ring-bg{stroke:var(--dk-border);}
body.dark-landing .stat-ring .ring-fg{stroke:var(--dk-accent-light);}
body.dark-landing .stat-caption{color:var(--dk-muted);font-size:8.5px;}
body.dark-landing .mockup-dots{padding:8px 0 12px;}
body.dark-landing .mockup-dots .mdot{background:var(--dk-border-strong);}
body.dark-landing .mockup-dots .mdot.active{background:var(--dk-accent-light);}

/* ---------- marquee: 40% share of the fold, blends flush into the page, logo chips ---------- */
body.dark-landing .marquee-section{
  background:transparent;border-top:none;border-bottom:none;
  position:relative;
  min-height:40vh;min-height:40svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 0;
}
body.dark-landing .marquee-label{color:var(--dk-muted-dim);font-size:0.75rem;letter-spacing:.16em;}
/* fixed-width, inset viewport (margins on both sides, like the Cryptomus
   reference) — this is also what the fade mask must live on, not the
   scrolling track: the track is very wide (holds the duplicated loop
   content), so a mask on it fades relative to that whole width and barely
   shows on screen. Masking this clipping window instead keeps the fade
   anchored to the visible left/right edges at all times, so each chip
   genuinely fades in from the right and out on the left as it scrolls. */
body.dark-landing .marquee-viewport{
  max-width:1180px;width:calc(100% - 80px);margin:0 auto;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
body.dark-landing .marquee-track{
  align-items:center;
}
body.dark-landing .marquee-chip{
  color:var(--dk-muted);font-weight:800;font-size:24px;gap:16px;padding:0 44px;
  font-family:'Manrope',sans-serif;letter-spacing:-0.01em;
}
body.dark-landing .marquee-chip::after{display:none;}
body.dark-landing .marquee-logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:0 0 auto;
  color:var(--logo-color, var(--dk-accent-light));
  filter:grayscale(1) brightness(1.7) opacity(0.55);
  transition:filter .25s ease, transform .25s ease;
}
body.dark-landing .marquee-logo svg{width:32px;height:32px;}
body.dark-landing .marquee-chip:hover .marquee-logo{
  filter:grayscale(0) brightness(1) opacity(1);
  transform:scale(1.08);
}
body.dark-landing .marquee-chip-label{white-space:nowrap;}
@media(max-width:860px){
  body.dark-landing .marquee-section{min-height:auto;padding:32px 0;}
  body.dark-landing .marquee-viewport{width:calc(100% - 40px);}
  body.dark-landing .marquee-chip{font-size:18px;padding:0 26px;gap:12px;}
  body.dark-landing .marquee-logo{width:34px;height:34px;}
  body.dark-landing .marquee-logo svg{width:24px;height:24px;}
}

/* ---------- feature spotlight: full-height, borderless, blends with body ---------- */
body.dark-landing .spotlight-card{
  background:transparent;
  border:none;
  border-radius:0;
  padding:24px 40px;
  margin-bottom:0;
  box-shadow:none;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  transition:none;
}
body.dark-landing .spotlight-row{
  display:grid;grid-template-columns:0.9fr 1.3fr;gap:56px;align-items:center;
  max-width:1600px;margin:0 auto;width:100%;
}
body.dark-landing .spotlight-row.reverse .spotlight-copy{order:2;}
body.dark-landing .spotlight-row.reverse .spotlight-visual{order:1;}
body.dark-landing .spotlight-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:0.8rem;
  color:var(--dk-cyan);text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px;font-weight:700;
}
body.dark-landing .spotlight-copy h3{font-size:clamp(32px,4vw,52px);line-height:1.08;margin-bottom:20px;color:#fff;}
body.dark-landing .spotlight-copy p{font-size:19px;line-height:1.65;max-width:520px;color:var(--dk-muted);}
body.dark-landing .spotlight-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
body.dark-landing .spotlight-list li{
  display:flex;align-items:center;gap:12px;font-size:16.5px;color:#E2E8F0;
}
body.dark-landing .spotlight-list li::before{
  content:"";width:20px;height:20px;border-radius:6px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--dk-accent),var(--dk-purple));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
body.dark-landing .spotlight-visual{position:relative;}
body.dark-landing .spotlight-frame{
  position:relative;border-radius:20px;
  padding:0;overflow:visible;
  min-height:540px;display:flex;align-items:center;justify-content:center;
}
body.dark-landing .spotlight-frame::before{
  content:"";position:absolute;inset:-40% -40% auto auto;width:60%;height:60%;
  background:radial-gradient(circle, var(--dk-glow-strong), transparent 70%);pointer-events:none;
  z-index:0;
}
body.dark-landing .spotlight-frame img{
  position:relative;z-index:1;
  width:100%;max-width:1000px;height:auto;
  max-height:min(80vh, 780px);
  object-fit:contain;
  display:block;margin:0 auto;border-radius:12px;
}
body.dark-landing .spotlight-frame .spotlight-fallback{
  position:relative;z-index:1;width:100%;height:220px;border-radius:12px;
  background:transparent;border:none;
  display:flex;align-items:center;justify-content:center;color:var(--dk-muted-dim);
  font-family:'JetBrains Mono';font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
}
body.dark-landing .spotlight-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;position:relative;z-index:1;}
body.dark-landing .spotlight-badge{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.03);border:1px solid var(--dk-border);
  border-radius:99px;padding:9px 16px;font-size:13.5px;color:var(--dk-muted);
}
body.dark-landing .spotlight-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--dk-green);}
body.dark-landing .spotlight-cta-row{
  display:flex;flex-wrap:wrap;gap:16px;margin-top:40px;
}
body.dark-landing .spotlight-cta-row .btn{
  font-size:18px;padding:18px 36px;font-weight:700;
}
@media(max-width:480px){
  body.dark-landing .spotlight-cta-row{flex-direction:column;}
  body.dark-landing .spotlight-cta-row .btn{width:100%;justify-content:center;}
}
@media(max-width:860px){
  body.dark-landing .spotlight-card{min-height:auto;padding:60px 24px;}
  body.dark-landing .spotlight-row{grid-template-columns:1fr;gap:32px;}
  body.dark-landing .spotlight-row.reverse .spotlight-copy,
  body.dark-landing .spotlight-row.reverse .spotlight-visual{order:0;}
  /* .spotlight-frame's base min-height:540px (style.css) is sized for the
     wide desktop two-column layout. Left as-is here, every feature preview
     image/fallback on mobile sat vertically centered inside a 540px-tall
     box — a wall of empty black space above and below a small graphic,
     repeated for all three feature sections, on every visit. Also switch
     overflow to hidden: the ambient glow behind the image is positioned via
     inset:-40% of the frame's OWN box, so on the narrow mobile frame it no
     longer has a nearby image to relate to and just reads as a stray glowing
     blob floating in empty space; clipping it here (image glow stays fully
     intact on desktop, unaffected) removes that with no visual loss. */
  body.dark-landing .spotlight-frame{min-height:0;overflow:hidden;}
}

/* ---------- NFC store promo (home page) ---------- */
body.dark-landing .nfc-promo{
  display:grid;grid-template-columns:0.85fr 1.25fr;gap:56px;align-items:center;
  max-width:1400px;margin:0 auto;
}
body.dark-landing .nfc-promo-copy h2{font-size:clamp(24px,3vw,36px);margin-top:12px;}
body.dark-landing .nfc-promo-copy p{font-size:16px;line-height:1.6;max-width:480px;margin-top:12px;}
body.dark-landing .nfc-feature-list{display:flex;flex-direction:column;gap:14px;margin-top:24px;}
body.dark-landing .nfc-feature{display:flex;align-items:center;gap:14px;}
body.dark-landing .nfc-feature-ic{
  width:40px;height:40px;border-radius:11px;flex:0 0 auto;
  background:var(--dk-card-2);border:1px solid var(--dk-border);color:var(--dk-accent-light);
  display:flex;align-items:center;justify-content:center;
}
body.dark-landing .nfc-feature-ic svg{width:19px;height:19px;}
body.dark-landing .nfc-feature div{display:flex;flex-direction:column;font-size:13.5px;}
body.dark-landing .nfc-feature strong{color:#fff;font-size:14.5px;}
body.dark-landing .nfc-feature span{color:var(--dk-muted);margin-top:2px;}

body.dark-landing .nfc-promo-visual{
  position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;
}
body.dark-landing .nfc-promo-glow{
  position:absolute;inset:5%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, var(--dk-glow-strong), transparent 70%);
}
body.dark-landing .nfc-promo-img{
  position:relative;z-index:1;width:100%;max-width:820px;height:auto;
  max-height:min(80vh, 760px);object-fit:contain;display:block;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
body.dark-landing .nfc-promo-fallback{
  position:relative;z-index:1;width:100%;height:220px;border-radius:16px;
  background:linear-gradient(135deg,var(--dk-card-2),var(--dk-bg-2));
  border:1px solid var(--dk-border);
  display:flex;align-items:center;justify-content:center;color:var(--dk-muted-dim);
  font-family:'JetBrains Mono';font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
@media(max-width:860px){
  body.dark-landing .nfc-promo{grid-template-columns:1fr;gap:32px;}
  body.dark-landing .nfc-promo-visual{min-height:300px;margin-top:12px;}
}

/* ---------- category / interactive grid (feature-grid) ---------- */
body.dark-landing .feature-ic,
body.dark-landing .feature-ic-svg{color:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,0.6);}
body.dark-landing .feature-card h3{color:#fff;}
body.dark-landing .feature-card p{color:var(--dk-muted);}

/* ---------- services page: category-of-account cards ---------- */
body.dark-landing .v-ic{background:var(--dk-card-2);color:var(--dk-accent-light);}
body.dark-landing .v-name{color:#fff;}
body.dark-landing .v-desc{color:var(--dk-muted);}
body.dark-landing .services-cta{
  background:linear-gradient(135deg, var(--dk-accent), var(--dk-purple));
  box-shadow:0 30px 70px -30px var(--dk-glow-strong);
}
body.dark-landing .services-cta h2{color:#fff;}
body.dark-landing .services-cta p{color:rgba(255,255,255,0.85);}
body.dark-landing .services-cta .btn{
  background:#fff !important;color:#4F46E5 !important;font-weight:700;
}
body.dark-landing .services-cta .btn:hover{box-shadow:0 0 24px rgba(255,255,255,0.35);}

/* ---------- how it works ---------- */
body.dark-landing .steps-row::before{
  background:repeating-linear-gradient(to right, var(--dk-border) 0 8px, transparent 8px 16px);
}
body.dark-landing .step-icon{background:var(--dk-card-2);border-color:var(--dk-border);color:var(--dk-accent-light);}
body.dark-landing .step-num{color:var(--dk-muted-dim);}
body.dark-landing .step-card h3{color:#fff;}
body.dark-landing .step-card p{color:var(--dk-muted);}

/* ---------- testimonials ---------- */
body.dark-landing .testi-wall::before{background:linear-gradient(to right, var(--dk-bg), transparent);}
body.dark-landing .testi-wall::after{background:linear-gradient(to left, var(--dk-bg), transparent);}
body.dark-landing .testimonial-card{
  background:var(--dk-card);border:1px solid var(--dk-border);box-shadow:none;
}
body.dark-landing .testimonial-card .quote-mark{color:var(--dk-accent-light);opacity:.8;}
body.dark-landing .testimonial-card p{color:#fff;}
body.dark-landing .who strong{color:#fff;}

/* ---------- pricing: gradient border on the active plan ---------- */
body.dark-landing .pricing-toggle-track{background:var(--dk-card);border-color:var(--dk-border);}
body.dark-landing .pricing-toggle-track button{color:var(--dk-muted);}
body.dark-landing .pricing-toggle-track button.active{color:#fff;}
body.dark-landing .pricing-toggle-thumb{background:linear-gradient(135deg,var(--dk-accent),var(--dk-purple));}
body.dark-landing .pricing-save-badge{background:rgba(34,197,94,0.14);color:var(--dk-green);}
body.dark-landing .price-card h3{color:#fff;}
body.dark-landing .price-card .price{color:#fff;}
body.dark-landing .price-card .price-period{color:var(--dk-muted);}
body.dark-landing .price-card li{color:var(--dk-muted);border-bottom-color:var(--dk-border);}
body.dark-landing .price-card li::before{color:var(--dk-green);}
body.dark-landing .price-annual-note{color:var(--dk-muted-dim);}
body.dark-landing .price-card.featured{
  position:relative;
  border:2px solid transparent;
  background:
    linear-gradient(var(--dk-card), var(--dk-card)) padding-box,
    linear-gradient(135deg, var(--dk-accent), var(--dk-purple)) border-box;
  box-shadow:0 0 40px rgba(99,102,241,0.22), 0 25px 60px -25px rgba(0,0,0,0.6);
}
body.dark-landing .price-card.featured:hover{
  box-shadow:0 0 50px rgba(99,102,241,0.32), 0 25px 60px -25px rgba(0,0,0,0.6);
  transform:translateY(-4px);
}
body.dark-landing .price-badge{
  background:linear-gradient(135deg,var(--dk-accent),var(--dk-purple));color:#fff;
  box-shadow:0 6px 18px -4px var(--dk-glow-strong);
}
body.dark-landing .price-card.featured .btn-accent{
  box-shadow:0 10px 30px -8px var(--dk-glow-strong), 0 0 20px rgba(168,85,247,0.25);
}

/* ---------- FAQ + contact ---------- */
body.dark-landing .faq-col .faq-list{border-top-color:var(--dk-border);}
body.dark-landing .faq-item{border-bottom-color:var(--dk-border);}
body.dark-landing .faq-icon{background:var(--dk-card-2);color:var(--dk-accent-light);}
body.dark-landing .faq-q{color:#fff;}
body.dark-landing .faq-q span{color:var(--dk-accent-light);}
body.dark-landing .faq-a{color:var(--dk-muted);}
body.dark-landing .split-col-title{color:var(--dk-muted-dim);}

body.dark-landing .contact-chip{
  background:var(--dk-card-2);border-color:var(--dk-border);color:#fff;
}
body.dark-landing .contact-chip:hover{border-color:var(--dk-border-hover);box-shadow:0 0 16px rgba(99,102,241,0.12);}
body.dark-landing .chip-ic{background:linear-gradient(135deg,var(--dk-accent),var(--dk-purple));color:#fff;}
body.dark-landing .chip-lbl{color:var(--dk-muted-dim);}
body.dark-landing .chip-val{color:#fff;}
body.dark-landing .contact-form-wrap{border-top-color:var(--dk-border);}

/* form fields — used by contact form, search bar, credits modal, everywhere */
body.dark-landing .field label{color:var(--dk-muted);}
body.dark-landing .field input,
body.dark-landing .field select,
body.dark-landing .field textarea,
body.dark-landing .search-bar input,
body.dark-landing .filter-select{
  background:#161C26;border:1px solid var(--dk-border-strong);color:var(--dk-input-text);
  font-family:'Inter';
}
body.dark-landing .field input::placeholder,
body.dark-landing .field textarea::placeholder,
body.dark-landing .search-bar input::placeholder{color:var(--dk-muted-dim);}
body.dark-landing .field input:focus,
body.dark-landing .field select:focus,
body.dark-landing .field textarea:focus,
body.dark-landing .search-bar input:focus,
body.dark-landing .filter-select:focus{
  outline:none;border-color:var(--dk-accent-light);box-shadow:0 0 0 3px var(--dk-glow);
}

/* ---------- explore profiles (employer.html) ---------- */
body.dark-landing .browse-wrap h2{color:#fff;}
body.dark-landing .candidate-avatar{
  background:linear-gradient(135deg,var(--dk-accent),var(--dk-purple));color:#fff;
}
body.dark-landing .candidate .name{color:#fff;}
body.dark-landing .candidate .role{color:var(--dk-cyan);}
body.dark-landing .candidate .desc{color:var(--dk-muted);}
body.dark-landing .candidate .tags span{background:var(--dk-card-2);color:var(--dk-muted);border:1px solid var(--dk-border);}

body.dark-landing .credit-pack{text-align:center;}
body.dark-landing .credit-pack.featured{
  border:2px solid transparent;
  background:
    linear-gradient(var(--dk-card), var(--dk-card)) padding-box,
    linear-gradient(135deg, var(--dk-accent), var(--dk-purple)) border-box;
}
body.dark-landing .credit-pack .pack-count{color:#fff;}
body.dark-landing .credit-pack .pack-lbl{color:var(--dk-muted);}
body.dark-landing .credit-pack .pack-price{color:var(--dk-muted);}

body.dark-landing .modal-overlay{background:rgba(5,7,11,0.75);}
body.dark-landing .modal-box{
  background:var(--dk-card);border:1px solid var(--dk-border);
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.8);
}
body.dark-landing .modal-box h3{color:#fff;}
body.dark-landing .modal-box p{color:var(--dk-muted);}
body.dark-landing .modal-close{color:var(--dk-muted);}
body.dark-landing .modal-close:hover{color:#fff;}

/* ---------- footer ---------- */
body.dark-landing .foot-dark{
  background:var(--dk-bg-2);border-top:1px solid rgba(255,255,255,0.05);
  padding:56px 40px 28px;
}
body.dark-landing .foot-grid{
  display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;max-width:1080px;margin:0 auto 40px;
}
body.dark-landing .foot-brand-col p{font-size:13px;color:var(--dk-muted-dim);line-height:1.6;margin-top:14px;max-width:260px;}
body.dark-landing .foot-col h4{font-size:0.75rem;color:#fff;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;font-weight:700;}
body.dark-landing .foot-col a{
  display:block;font-size:13.5px;color:var(--dk-muted);text-decoration:none;margin-bottom:11px;transition:color .15s ease;
}
body.dark-landing .foot-col a:hover{color:#fff;}
body.dark-landing .foot-social{display:flex;gap:10px;margin-top:16px;}
body.dark-landing .foot-social a{
  width:34px;height:34px;border-radius:9px;background:var(--dk-card);border:1px solid var(--dk-border);
  display:flex;align-items:center;justify-content:center;color:var(--dk-muted);margin:0;transition:border-color .15s ease, color .15s ease;
}
body.dark-landing .foot-social a:hover{border-color:var(--dk-border-hover);color:#fff;}
body.dark-landing .foot-bottom{
  max-width:1080px;margin:0 auto;padding-top:24px;border-top:1px solid rgba(255,255,255,0.05);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
}
body.dark-landing .foot-bottom-copy{font-size:12.5px;color:var(--dk-muted-dim);}
body.dark-landing .foot-selects{display:flex;gap:10px;}
body.dark-landing .foot-select{
  background:var(--dk-card);border:1px solid var(--dk-border-strong);color:var(--dk-muted);
  font-size:12.5px;padding:7px 12px;border-radius:8px;font-family:'Inter';
}
@media(max-width:860px){
  body.dark-landing .foot-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:520px){
  body.dark-landing .foot-grid{grid-template-columns:1fr;}
  body.dark-landing .foot-bottom{flex-direction:column;align-items:flex-start;}
}