/* ==========================================================
   Talenta Pros — "Clean & premium" layer (Oct 2026)
   Loaded last. Navy + gold brand, one type family,
   calmer rhythm, shorter page. Hidden sections stay in the
   DOM (scripts depend on their IDs) — remove a selector from
   the "Trimmed sections" list below to bring one back.
   ========================================================== */

:root{
  --navy:#0E1B3D; --navy-2:#1A2C5B; --blue:#224191; --gold:#E3A62B; --gold-2:#ECBA56; --gold-soft:#FAF0DD;
  --ink:#0E1B3D; --muted:#5A6580; --line:#E3E6EF; --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F7FB;
  --display:"Poppins","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;
  --type-hero:clamp(36px,3.5vw,52px);
  --type-section:clamp(30px,3.4vw,44px);
  --radius:16px;
  --shadow:0 1px 2px rgba(14,27,61,.04),0 12px 32px -12px rgba(14,27,61,.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EEF1F8; --muted:#A3ADC6; --line:#24304F; --bg:#0A1226; --surface:#111B35; --surface-2:#0E1830; --gold-soft:#32260E;
  }
}
:root[data-theme="dark"]{
  --ink:#EEF1F8; --muted:#A3ADC6; --line:#24304F; --bg:#0A1226; --surface:#111B35; --surface-2:#0E1830; --gold-soft:#32260E;
}

/* ---------- One type family everywhere ---------- */
html body, html body main, html body main p, html body button, html body input,
html body select, html body textarea, html body footer{
  font-family:var(--body) !important;
}
html body main h1, html body main h2, html body main h3{
  font-family:var(--display) !important; letter-spacing:-.025em !important; color:inherit;
}
/* Handwritten / serif / mono accents → clean sans */
html body main em, html body main h1 em, html body main h2 em,
html body .hero-note, html body [class*="hand"], html body .rot{
  font-family:var(--display) !important; font-style:normal !important;
}
html body main .eyebrow, html body main .sec-head .eyebrow, html body .ledger-top b, html body .ledger-top span{
  font-family:var(--body) !important; font-size:12px !important; font-weight:700 !important;
  letter-spacing:.14em !important; text-transform:uppercase; color:var(--gold) !important;
}
html body main{ background:var(--bg); color:var(--ink); }
html body{ background:var(--bg) !important; }

/* ---------- Decorative noise off ---------- */
.tiles, .orb, .hero-note, .hero-ledger-stamp, #confetti, #sprog{ display:none !important; }

/* ---------- Trimmed sections (kept in DOM, not shown) ---------- */
#tp-financial-story, #start, #features, section.block:has(#px), #portal-steps,
#practice-case, #support, #career, #skills, #partners{ display:none !important; }

/* ---------- Announcement + nav ---------- */
html body .announcement{ background:var(--navy) !important; }
html body .announcement a{ color:#DCE2F0 !important; font-weight:500; font-size:14px; }
html body .announcement a strong{ color:var(--gold) !important; }
html body header.nav{
  background:rgba(255,255,255,.92) !important; backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line) !important; box-shadow:none !important;
  transition:box-shadow .3s ease, background .3s ease;
}
html body header.nav.is-scrolled{ box-shadow:0 10px 30px -18px rgba(14,27,61,.35) !important; }
html body .nav .logo img, html body .logo img{
  content:url("tp-logo-h.png") !important; height:46px !important; width:auto !important; max-width:min(230px,52vw) !important;
}
html body footer#contact .logo img{ content:url("tp-logo-h.png") !important; height:56px !important; }
html body header.nav .nav-links a:not(.btn){ color:#3A4666 !important; font-weight:600 !important; font-size:15px !important; }
html body header.nav .nav-links a:not(.btn):hover{ color:var(--navy) !important; }
html body header.nav .tool{ border-color:var(--line) !important; background:transparent !important; color:var(--navy) !important; }
html body header.nav .tool svg{ stroke:var(--navy) !important; }
html body header.nav .btn-login{ border:1.5px solid var(--line) !important; color:var(--navy) !important; background:transparent !important; }
html body header.nav .btn-login:hover{ border-color:var(--navy) !important; }
html body header.nav .nav-links > span.tools{ border-color:var(--line) !important; }
/* Dark mode header */
:root[data-theme="dark"] body header.nav{ background:rgba(10,18,38,.92) !important; border-color:var(--line) !important; }
:root[data-theme="dark"] body .nav .logo img, :root[data-theme="dark"] body footer#contact .logo img{ content:url("tp-logo-h-white.png") !important; }
:root[data-theme="dark"] body header.nav .nav-links a:not(.btn), :root[data-theme="dark"] body header.nav .btn-login{ color:#D6DCEB !important; }
:root[data-theme="dark"] body header.nav .tool svg{ stroke:#D6DCEB !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body header.nav{ background:rgba(10,18,38,.92) !important; border-color:var(--line) !important; }
  :root:not([data-theme="light"]) body .nav .logo img, :root:not([data-theme="light"]) body footer#contact .logo img{ content:url("tp-logo-h-white.png") !important; }
  :root:not([data-theme="light"]) body header.nav .nav-links a:not(.btn), :root:not([data-theme="light"]) body header.nav .btn-login{ color:#D6DCEB !important; }
  :root:not([data-theme="light"]) body header.nav .tool svg{ stroke:#D6DCEB !important; }
}

/* ---------- Buttons ---------- */
html body .btn{ border-radius:999px !important; font-weight:700 !important; letter-spacing:0 !important; }
html body .btn-gold{
  background:var(--gold) !important; color:var(--navy) !important; border:0 !important;
  box-shadow:0 8px 20px -10px rgba(227,166,43,.8) !important;
}
html body .btn-gold:hover{ background:var(--gold-2) !important; transform:translateY(-1px); }
html body .btn-line{
  background:transparent !important; color:var(--ink) !important;
  border:1.5px solid var(--line) !important; box-shadow:none !important;
}
html body .btn-line:hover{ border-color:var(--ink) !important; }

/* ---------- Hero ---------- */
html body main .hero{
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(227,166,43,.10), transparent 60%),
    linear-gradient(180deg,#F6F8FC 0%, var(--bg) 100%) !important;
  padding:clamp(56px,8vw,104px) 0 clamp(56px,7vw,88px) !important;
  border-bottom:1px solid var(--line);
}
:root[data-theme="dark"] body main .hero{ background:linear-gradient(180deg,#0E1833 0%, var(--bg) 100%) !important; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body main .hero{ background:linear-gradient(180deg,#0E1833 0%, var(--bg) 100%) !important; } }
html body main .hero h1{
  font-size:var(--type-hero) !important; line-height:1.04 !important; font-weight:800 !important;
  color:var(--ink) !important; margin:14px 0 22px !important; max-width:none;
}
html body main .hero h1 em{ display:inline-block !important; white-space:nowrap; transform:none !important; rotate:none !important; animation:none !important; }
html body main .hero h1 em{ color:var(--gold) !important; font-weight:800 !important; }
html body main .hero .lede{ color:var(--muted) !important; max-width:52ch; font-size:18px !important; line-height:1.65 !important; }
html body main .hero .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
html body main .hero .hero-ctas .btn{ padding:15px 26px !important; font-size:16px !important; }
html body main .hero-facts{ margin-top:34px !important; gap:0 !important; display:flex; flex-wrap:wrap; }
html body main .hero-facts > div{
  padding:0 22px !important; border-left:1px solid var(--line); color:var(--muted) !important; font-size:13px !important;
}
html body main .hero-facts > div:first-child{ padding-left:0 !important; border-left:0; }
html body main .hero-facts b{ display:block; color:var(--ink) !important; font-size:17px !important; font-family:var(--display) !important; }
html body main .ledger{
  border-radius:var(--radius) !important; box-shadow:var(--shadow) !important;
  border:1px solid var(--line) !important; transform:none !important; background:var(--surface) !important;
}
html body main .ledger-stage::before, html body main .ledger-stage::after{ display:none !important; }
html body main .ledger-intro p{ font-family:var(--body) !important; font-style:normal !important; color:var(--muted) !important; }

/* Trust strip */
html body main .wf-band{
  background:var(--navy) !important; color:#C9D1E6 !important; border:0 !important;
  font-size:15px !important; padding:18px 20px !important;
}
html body main .wf-band b{ color:var(--gold) !important; }

/* ---------- Section rhythm ---------- */
html body main > section.block, html body main > section.qbw, html body main > section.price-band,
html body main > section.price-compare{
  padding-top:clamp(64px,8vw,104px) !important; padding-bottom:clamp(64px,8vw,104px) !important;
}
html body main .sec-head{ margin-bottom:clamp(32px,4vw,52px) !important; }
html body main .sec-head h2, html body main section > .wrap > h2{
  font-size:var(--type-section) !important; line-height:1.1 !important; font-weight:800 !important; max-width:20ch;
}
html body main .sec-head p{ color:var(--muted) !important; max-width:60ch; }

/* Alternate light bands for calm rhythm */
html body main #practice, html body main #instructor, html body main #faq{ background:var(--surface-2) !important; }

/* Dark band → brand navy (curriculum only) */
html body main #curriculum{ background:var(--navy) !important; }
html body main #curriculum .sec-head h2{ color:#fff !important; }
html body main #curriculum .sec-head p{ color:#C9D1E6 !important; }
/* Light bands */
html body main #portal, html body main #payroll{ background:var(--bg) !important; }
html body main #portal .sec-head h2, html body main #payroll h2{ color:var(--ink) !important; }
html body main #portal .sec-head p, html body main #payroll p{ color:var(--muted) !important; }
html body main #payroll{ border-top:1px solid var(--line); }

/* Cards */
html body main .card, html body main .fx-card, html body main .price-card, html body main .plan{
  border-radius:var(--radius) !important;
}

/* Instructor */
html body main .teacher{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:20px !important; box-shadow:var(--shadow) !important; padding:clamp(24px,4vw,44px) !important;
}
html body main .teacher .av img{ border-radius:18px !important; }
html body main .teacher .creds span{
  background:var(--gold-soft) !important; color:var(--ink) !important; border:0 !important; border-radius:999px !important;
}
html body main .teacher .q{ font-family:var(--body) !important; font-style:normal !important; color:var(--muted) !important; }

/* ---------- Pricing: calm, premium ---------- */
html body main #pricing{ background:var(--navy) !important; }
html body main #pricing .ptick{ display:none !important; }
html body main #pricing .price-head h2{ color:#fff !important; }
html body main #pricing .price-head p{ color:#C9D1E6 !important; }
html body main #pricing .rot, html body main #pricing .hl{ color:var(--gold) !important; }
html body main #pricing .hl svg{ display:none !important; }
html body main #pricing .plans{ background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; gap:20px !important; }
html body main #pricing .ticket{
  background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:20px !important;
  box-shadow:var(--shadow) !important; transform:none !important;
}
html body main #pricing .ticket.pop{ border:2px solid var(--gold) !important; box-shadow:0 24px 48px -20px rgba(227,166,43,.55) !important; }
html body main #pricing .ticket::before, html body main #pricing .ticket::after{ display:none !important; }
html body main #pricing .pname{
  background:none !important; box-shadow:none !important; transform:none !important; padding:0 !important;
  font-family:var(--display) !important; font-size:26px !important; font-weight:800 !important; color:var(--ink) !important;
}
html body main #pricing .pname i{ display:none !important; }
html body main #pricing .hook{ color:var(--gold) !important; letter-spacing:.14em !important; font-size:12px !important; font-weight:700 !important; }
html body main #pricing .amt, html body main #pricing .amt .cnt{
  font-family:var(--display) !important; font-weight:800 !important; color:var(--ink) !important; letter-spacing:-.03em !important;
}
html body main #pricing .was{ font-family:var(--body) !important; }
html body main #pricing .badge{ background:var(--gold-soft) !important; color:var(--ink) !important; border:0 !important; border-radius:999px !important; }
html body main #pricing .btn-plan{ background:var(--navy) !important; color:#fff !important; border:0 !important; }
html body main #pricing .ticket.pop .btn-plan{ background:var(--gold) !important; color:var(--navy) !important; }
html body main #pricing .trust-strip, html body main #pricing .finder, html body main #pricing .undecided, html body main #pricing .callout{ color:#C9D1E6; }

/* Final CTA */
html body main .wf-final{
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(227,166,43,.18), transparent 70%),
    var(--navy) !important;
  color:#fff !important; padding:clamp(72px,9vw,112px) 20px !important;
}
html body main .wf-final h2{ color:#fff !important; }
html body main .wf-final p{ color:#C9D1E6 !important; }

/* WhatsApp button: smaller, quieter */
html body [class*="whatsapp"], html body .wa-float{ transform:scale(.92); transform-origin:bottom right; }

@media (max-width:760px){
  html body main .hero h1{ max-width:none; }
  html body main .hero-facts > div{ padding:0 14px !important; }
  html body main .hero .hero-ctas .btn{ flex:1 1 100%; justify-content:center; text-align:center; }
}


/* ==========================================================
   Smooth scroll + scroll animations
   ========================================================== */
html{ scroll-behavior:smooth; scroll-padding-top:96px; }

/* Reveal on scroll (only when motion.js is running) */
html.pv-on .pv{
  transform:translate3d(0,36px,0);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--pv-delay,0ms); will-change:transform;
}
html.pv-on .pv.pv-in{ transform:none; }

/* Scroll-down cue: mouse with rolling wheel + cascading chevrons */
html body main .hero{ position:relative; }
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; opacity:.85; transition:opacity .4s ease; z-index:2;
}
.scroll-cue:hover{ opacity:1; }
.scroll-cue.is-hidden{ opacity:0; pointer-events:none; }
.scroll-cue .mouse{
  width:24px; height:38px; border:2px solid var(--ink); border-radius:14px;
  position:relative; margin-bottom:6px; opacity:.7;
}
.scroll-cue .wheel{
  position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px;
  border-radius:2px; background:var(--gold); animation:tp-wheel 1.8s cubic-bezier(.6,0,.4,1) infinite;
}
.scroll-cue .chev{
  width:10px; height:10px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); opacity:0; animation:tp-chev 1.8s ease-in-out infinite;
}
.scroll-cue .chev + .chev{ animation-delay:.25s; margin-top:-4px; }
@keyframes tp-wheel{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(12px); opacity:0; } 100%{ transform:translateY(0); opacity:0; } }
@keyframes tp-chev{ 0%{ opacity:0; transform:rotate(45deg) translate(-4px,-4px); } 50%{ opacity:1; } 100%{ opacity:0; transform:rotate(45deg) translate(4px,4px); } }
@media (max-width:760px){ .scroll-cue{ display:none; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.pv-on .pv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .scroll-cue .wheel, .scroll-cue .chev{ animation:none; opacity:1; }
}

/* Dark mode: hero ledger card legibility */
:root[data-theme="dark"] body main .ledger, :root[data-theme="dark"] body main .ledger *:not(.ledger-ok):not(.ledger-top b):not(.ledger-top span){ color:var(--ink) !important; }
:root[data-theme="dark"] body main .ledger-top{ background:var(--surface) !important; border-color:var(--line) !important; }
:root[data-theme="dark"] body main .ledger .ledger-note, :root[data-theme="dark"] body main .ledger-intro p{ color:var(--muted) !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body main .ledger, :root:not([data-theme="light"]) body main .ledger *:not(.ledger-ok):not(.ledger-top b):not(.ledger-top span){ color:var(--ink) !important; }
  :root:not([data-theme="light"]) body main .ledger-top{ background:var(--surface) !important; border-color:var(--line) !important; }
  :root:not([data-theme="light"]) body main .ledger .ledger-note, :root:not([data-theme="light"]) body main .ledger-intro p{ color:var(--muted) !important; }
}

/* Reveal cards stay fully readable before they animate */
html body .tp-reveal{ opacity:1 !important; }

/* HJA Global footer logo: white version in dark mode */
:root[data-theme="dark"] body footer#contact .foot-parent img{content:url("hja-global-logo-white.png")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body footer#contact .foot-parent img{content:url("hja-global-logo-white.png")}}
:root[data-theme="dark"] body footer#contact .foot-parent small{color:#A9B2C8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body footer#contact .foot-parent small{color:#A9B2C8}}

/* Pricing cards: single tag, clean header, access shown with price (Oct 2026) */
#pricing .plans .ticket{display:flex;flex-direction:column}
#pricing .plans .ticket .badge{position:static;transform:none;align-self:center;display:inline-block;margin:0 0 14px;padding:5px 12px;border-radius:999px;font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--surface-2);color:var(--navy);border:1px solid var(--line);box-shadow:none}
#pricing .plans .ticket.pop .badge{background:var(--navy);color:#fff;border-color:var(--navy)}
#pricing .plans .ticket .pname{margin-top:0}
#pricing .plans .ticket .pname i{display:none}
#pricing .plans .ticket .perday{color:var(--muted)}
#pricing .plans .ticket .perday b{color:var(--navy);font-weight:600}
#pricing .plans .ticket .was{color:var(--muted);text-decoration-color:var(--muted)}
#pricing .plans .ticket .save{background:var(--gold-soft);color:var(--navy);border:1px solid var(--gold)}
#pricing .plans .ticket .launch{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
#pricing .plans .ticket .launch::before{background:var(--gold)}
#pricing .plans .ticket .plan-summary{margin-top:0}
#pricing .plans .ticket .was::after{background:var(--muted)}
#pricing .plans .ticket .save{box-shadow:none;font-weight:700}
@media (min-width:921px){#pricing .plans .ticket .plan-summary,#pricing .plans .ticket.pop .plan-summary{height:auto;min-height:0}#pricing .plans .ticket .plan-summary,#pricing .plans .ticket.pop .plan-summary{height:330px}}