/* hatline models — redesign. Ink, pearl, orchid; the cut diamond is the one signature. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root{
  --ink:#0b1018;--ink-2:#131b28;--pearl:#eef2f6;--orchid:#5fd4e0;--orchid-deep:#1f4fd8;--ice:#cfe6ff;
  --bg:var(--ink);--panel:var(--ink-2);--pink:var(--orchid);--muted:#aaa2b6;--line:#ffffff1f;
  --display:'Bricolage Grotesque','Arial Narrow',Arial,sans-serif;--body:'Hanken Grotesk',Arial,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
}
body{font-family:var(--body);font-size:15px;line-height:1.7;background:var(--ink);color:var(--pearl)}
h1,h2,h3{font-family:var(--display);font-weight:600;font-stretch:88%;line-height:1;letter-spacing:-.02em}
em{font-style:normal;color:var(--orchid)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--orchid)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orchid);outline-offset:3px}

/* buttons */
.button{background:var(--orchid);color:var(--ink);border:0;border-radius:999px;padding:16px 26px;gap:22px;font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.01em}
.button:hover{background:#8fe6ee;transform:translateY(-2px)}
.outline{border:1px solid currentColor;border-radius:999px}

/* header */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:36px;padding:10px 4vw;background:var(--pearl);color:var(--ink);border-bottom:1px solid #131b2414}
.topbar .brand{margin-right:auto}.topbar .brand img{width:170px;height:auto;display:block;filter:none;mix-blend-mode:multiply}
.topbar nav{display:flex;gap:30px;font-size:13px;font-weight:500}
.topbar nav a,.topbar .header-access{position:relative}
.topbar nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--orchid-deep);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.topbar nav a:hover::after{transform:scaleX(1)}
.topbar .header-access{font-size:13px;font-weight:500;margin:0}.topbar .header-access span{color:var(--orchid-deep)}
.topbar .outline{padding:10px 20px;font-size:13px;font-weight:600;border-color:var(--ink);transition:background .2s,color .2s}
.topbar .outline:hover{background:var(--ink);color:var(--pearl)}

/* hero */
.masthead{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 71px);display:grid;align-content:center;padding:clamp(48px,8vw,110px) 4vw;background:
  radial-gradient(60% 70% at 85% 45%,#1f4fd866,transparent 70%),radial-gradient(40% 50% at 100% 100%,#5fd4e026,transparent 70%),var(--ink)}
.masthead-copy{position:relative;z-index:1;max-width:min(860px,100%)}
.masthead .eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 28px}
.masthead .eyebrow::before{content:"";width:34px;height:1px;background:var(--orchid)}
.masthead h1{font-size:clamp(58px,10.5vw,168px);font-weight:700;font-stretch:84%;letter-spacing:-.03em;line-height:.9;margin:0 0 clamp(28px,4vw,48px)}
.masthead h1 em{display:block;color:transparent;-webkit-text-stroke:2px var(--orchid)}
.masthead-lede{max-width:460px;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:#ddd6e6;margin:0 0 34px}
.masthead-lede strong{color:#fff}
.cut{position:absolute;z-index:-1;right:-6vw;top:50%;width:min(62vw,880px);transform:translateY(-50%);pointer-events:none}
.cut svg{display:block;width:100%;height:auto;overflow:visible}
.cut .outline-path{fill:none;stroke:var(--ice);stroke-width:.35;stroke-linejoin:round}
.cut .rule{stroke:#cfe6ff66;stroke-width:.18;fill:none}
.cut .facet{fill:var(--orchid);opacity:.06;animation:glint 7s ease-in-out infinite}
.cut .f2{animation-delay:-1.2s;fill:var(--ice)}.cut .f3{animation-delay:-2.6s}.cut .f4{animation-delay:-4s;fill:var(--ice)}.cut .f5{animation-delay:-5.3s}
@keyframes glint{0%,100%{opacity:.04}50%{opacity:.34}}

/* the story: questions left, answer right */
.tale{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,7vw,120px);padding:clamp(64px,9vw,130px) 4vw;background:var(--pearl);color:var(--ink)}
.tale-questions{position:sticky;top:110px;align-self:start;margin:0;padding:0;list-style:none}
.tale-questions li{font-family:var(--display);font-stretch:85%;font-weight:600;font-size:clamp(28px,3.6vw,52px);line-height:1.02;letter-spacing:-.03em;padding:20px 0;border-top:1px solid #131b2428}
.tale-questions li:last-child{border-bottom:1px solid #131b2428}
.tale-questions b{color:var(--orchid-deep);font-weight:600}
.tale-body{max-width:560px;font-size:17px;line-height:1.7;color:#334050}
.tale-body p{margin:0 0 22px}.tale-body strong{color:var(--ink)}
.tale-body .free{display:inline-block;background:var(--ink);color:var(--pearl);padding:3px 11px;border-radius:6px;font-weight:600;line-height:1.5}
.tale-end{font-family:var(--display);font-stretch:85%;font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.025em;color:var(--ink);margin:42px 0 30px}
.tale-end em{color:var(--orchid-deep)}
.tale .button{background:var(--ink);color:var(--pearl)}.tale .button:hover{background:var(--orchid-deep)}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;background:var(--orchid);color:var(--ink);padding:16px 0;font-family:var(--display);font-stretch:80%;font-weight:700;font-size:clamp(20px,2.4vw,30px);letter-spacing:.02em;text-transform:uppercase}
.marquee-track{display:inline-flex;gap:34px;animation:slide 32s linear infinite}
.marquee-track span{display:inline-flex;gap:34px;align-items:center}.marquee-track i{font-style:normal;font-size:.6em}
@keyframes slide{to{transform:translateX(-50%)}}

/* path: a real sequence, so it is numbered */
.path{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,7vw,120px);padding:clamp(64px,9vw,130px) 4vw;background:var(--ink)}
.path-intro h2{font-size:clamp(44px,6vw,92px);letter-spacing:-.04em;margin:0 0 22px}
.path-intro p:last-child{color:var(--muted);max-width:340px}
.path ol{list-style:none;margin:0;padding:0;counter-reset:s}
.path li{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:6px 18px;padding:30px 0;border-top:1px solid var(--line)}
.path li:last-child{border-bottom:1px solid var(--line)}
.path li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;font-family:var(--mono);font-size:13px;color:var(--ice);padding-top:8px}
.path h3{font-size:clamp(26px,2.6vw,38px);margin:0}
.path li p{margin:0;color:var(--muted);max-width:420px}
.path li{transition:background .25s,padding .25s}.path li:hover{background:linear-gradient(90deg,#5fd4e014,transparent);padding-left:12px}

/* finale */
.finale{position:relative;overflow:hidden;text-align:center;padding:clamp(80px,12vw,170px) 4vw;background:var(--ink-2);border-top:1px solid var(--line)}
.finale::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 50% 120%,#1f4fd899,transparent 70%)}
.finale>*{position:relative}
.finale h2{font-size:clamp(46px,8vw,128px);font-weight:700;font-stretch:84%;letter-spacing:-.03em;line-height:.95;margin:0 0 36px}
.finale .subtle{display:inline-block;margin-top:26px;font-size:14px;color:var(--ice);text-decoration:underline;text-underline-offset:4px}

/* footer */
.foot{display:grid;grid-template-columns:1fr auto;gap:28px 40px;padding:48px 4vw 26px;background:var(--ink);border-top:1px solid var(--line)}
.foot .footer-wordmark{font-family:var(--display);font-stretch:80%;font-weight:700;font-size:40px;letter-spacing:-.04em;line-height:.9}
.foot .footer-wordmark span{display:inline;font:inherit;letter-spacing:inherit;margin:0 0 0 8px;text-transform:none;color:var(--orchid)}
.foot p{margin:6px 0 0;color:var(--muted);font-size:13px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 26px;align-self:center;justify-content:flex-end;font-size:13px}
.foot nav a:hover{color:var(--orchid)}
.foot .company-line{grid-column:1/-1;margin:0;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:#8c849a}
.foot small{grid-column:1/-1;color:#6f6880;font-size:11px}

/* inner pages inherit the dark palette */
.page h1{font-size:clamp(46px,6vw,88px);letter-spacing:-.04em}
.page .lead{color:#c9c1d4;font-size:17px}
.panel{background:var(--ink-2);border-radius:14px}
input,select,textarea{color:var(--pearl);border-radius:8px;background:#080c12;border-color:#ffffff2e}
input:focus,select:focus,textarea:focus{border-color:var(--orchid)}
.talent-card img,.placeholder{border-radius:12px}
.badge{border-radius:999px;font-family:var(--mono);background:#5fd4e01c}
.sidebar{background:var(--ink-2)}
.notice{background:#1d3a35;color:#d9f6ee;border-radius:10px}.notice.error{background:#4a1d27;color:#ffe3e6}
.legal-page{max-width:1000px}.legal-page h1{font-size:clamp(40px,5vw,64px)}
.legal-copy{max-width:760px;color:#d0c8da}
.legal-copy h2{font-family:var(--body);font-stretch:100%;font-size:18px;line-height:1.5;margin:35px 0 12px;font-weight:700;color:#fff;letter-spacing:0}
.legal-copy a{text-decoration:underline;text-underline-offset:3px}.legal-copy ul{padding-left:22px}
.legal-copy .legal-company{padding:22px;border:1px solid var(--line);border-radius:12px;margin-block:25px}.legal-copy p{margin-bottom:18px}

@media(max-width:900px){
  .topbar{flex-wrap:wrap;gap:10px 18px;padding:10px 5vw}.topbar .brand img{width:130px}
  .topbar nav{order:5;width:100%;gap:22px;padding-top:8px;border-top:1px solid #131b2418;justify-content:center}
  .topbar .header-access{font-size:12px}.topbar .outline{padding:8px 14px;font-size:12px}
  .topbar{flex-wrap:wrap;gap:8px 12px}.topbar .brand{flex:1 1 auto}.topbar .lg{display:none}.topbar .header-access,.topbar .outline{white-space:nowrap}
  .masthead{min-height:0}.cut{width:130vw;right:-45vw;opacity:.55}
  .tale,.path{grid-template-columns:1fr}.tale-questions{position:static}
  .foot{grid-template-columns:1fr}.foot nav{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.cut .facet{animation:none;opacity:.12}.marquee-track{animation:none}}
select option{background:var(--ink-2);color:var(--pearl)}
::placeholder{color:#7d8798}
input:-webkit-autofill{-webkit-text-fill-color:var(--pearl);box-shadow:0 0 0 40px #080c12 inset}

.email-img{height:1.6em;width:auto;vertical-align:middle;user-select:none}
.topbar .lg{font-style:normal}

/* Splash după trimiterea aplicației */
.splash-open{overflow:hidden}
.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;overflow:auto;background:radial-gradient(60% 55% at 50% 40%,#1f4fd877,transparent 70%),var(--ink);color:var(--pearl);animation:splash-in .5s ease both}
.splash.out{animation:splash-out .35s ease both}
.splash-card{position:relative;z-index:1;max-width:560px;text-align:center}
.splash-gem{width:min(46vw,190px);height:auto;margin:0 auto 22px;display:block;overflow:visible;filter:drop-shadow(0 0 28px #5fd4e088)}
.splash-gem .g-fill{fill:#5fd4e01a;opacity:0;animation:splash-fill 1s .9s ease forwards}
.splash-gem .g-rule path{fill:none;stroke:var(--ice);stroke-width:.35;stroke-linejoin:round;opacity:0;animation:splash-fill 1s 1.1s ease forwards}
.splash-gem .g-line{fill:none;stroke:var(--orchid);stroke-width:1.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:splash-draw 1.3s .2s cubic-bezier(.6,0,.2,1) forwards}
.splash .eyebrow{opacity:0;animation:splash-up .6s 1s ease forwards}
.splash h2{font-size:clamp(34px,7vw,60px);font-weight:700;font-stretch:86%;letter-spacing:-.025em;line-height:1;margin:0 0 18px;opacity:0;animation:splash-up .7s 1.15s ease forwards}
.splash h2 em{color:var(--orchid);font-style:italic}
.splash-lede{margin:0 auto 26px;max-width:46ch;color:var(--ice);font-size:16px;line-height:1.6;opacity:0;animation:splash-up .7s 1.35s ease forwards}
.splash-steps{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.splash-steps li{display:flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;opacity:0;animation:splash-up .6s ease forwards}
.splash-steps li:nth-child(1){animation-delay:1.5s}.splash-steps li:nth-child(2){animation-delay:1.65s}.splash-steps li:nth-child(3){animation-delay:1.8s}
.splash-steps b{color:var(--orchid);font-size:11px;letter-spacing:.1em}
.splash .button{opacity:0;animation:splash-up .6s 1.95s ease forwards}
.splash-spark i{position:absolute;width:14px;height:14px;background:var(--ice);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:splash-twinkle 3.2s ease-in-out infinite}
.splash-spark i:nth-child(1){left:12%;top:18%;animation-delay:1.2s}.splash-spark i:nth-child(2){left:82%;top:14%;width:20px;height:20px;animation-delay:1.6s}
.splash-spark i:nth-child(3){left:24%;top:72%;width:18px;height:18px;animation-delay:2s}.splash-spark i:nth-child(4){left:74%;top:68%;animation-delay:.8s}
.splash-spark i:nth-child(5){left:50%;top:8%;width:10px;height:10px;animation-delay:2.2s}.splash-spark i:nth-child(6){left:6%;top:48%;width:10px;height:10px;animation-delay:1.4s}
.splash-spark i:nth-child(7){left:92%;top:44%;width:12px;height:12px;animation-delay:2.4s}.splash-spark i:nth-child(8){left:60%;top:88%;width:10px;height:10px;animation-delay:1s}
@keyframes splash-in{from{opacity:0}}
@keyframes splash-out{to{opacity:0}}
@keyframes splash-draw{to{stroke-dashoffset:0}}
@keyframes splash-fill{to{opacity:1}}
@keyframes splash-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes splash-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(45deg)}}
@media(prefers-reduced-motion:reduce){.splash,.splash *{animation-duration:.01s!important;animation-delay:0s!important}}