/* Restart Skills – public website */
:root{
  --night:#0A1633; --night-2:#0F2050; --blue:#1565E8; --blue-d:#0B47B8; --sky:#E8F0FF;
  --ember:#FF7A1A; --ember-d:#E2620A; --marigold:#FFB627; --chalk:#F4F7FC; --line:#DCE3F0;
  --ink:#16203A; --muted:#5B6785; --white:#fff; --ok:#0E9F6E; --bad:#D63B3B;
  --display:"Bricolage Grotesque", "Hind", system-ui, sans-serif;
  --body:"Hind", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;margin:0 0 .5em;color:inherit;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700}
h3{font-size:1.35rem;font-weight:600}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:600;font-size:16px;
  padding:12px 22px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;line-height:1.2}
.btn-ember{background:var(--ember);color:#fff}
.btn-ember:hover{background:var(--ember-d);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}
.btn-line{border-color:var(--line);color:var(--ink);background:#fff}
.btn-line:hover{border-color:var(--blue);color:var(--blue)}
.btn-lg{padding:15px 28px;font-size:17px;border-radius:14px}

/* header */
.site-head{background:var(--night);color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em}
.brand:hover{color:#fff}
.brand img{width:46px;height:auto}
.brand b{color:var(--ember);font-weight:700}
.brand .r{color:#5EA0FF}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:rgba(255,255,255,.78);padding:8px 12px;border-radius:8px;font-weight:500;font-size:16px}
.nav a:hover,.nav a.on{color:#fff;background:rgba(255,255,255,.07)}
.head-cta{display:flex;gap:10px}
.head-cta .btn{padding:9px 16px;font-size:15px}
.menu-btn{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:28px;cursor:pointer;padding:6px}
@media (max-width:980px){
  .nav,.head-cta{display:none}
  .menu-btn{display:block}
  .site-head.open .nav{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--night);padding:12px 20px 4px;margin:0}
  .site-head.open .head-cta{display:flex;position:absolute;top:calc(72px + 236px);left:0;right:0;background:var(--night);padding:8px 20px 20px}
}

/* hero */
.hero{background:var(--night);color:#fff;position:relative;overflow:hidden;padding:72px 0 140px}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.hero::before{width:520px;height:520px;background:#1565E8;opacity:.45;right:8%;top:-120px}
.hero::after{width:420px;height:420px;background:#FF7A1A;opacity:.33;right:-80px;bottom:-60px}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{max-width:12ch}
.hero .lede{font-size:19px;color:rgba(255,255,255,.8);max-width:34em;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 22px;color:rgba(255,255,255,.72);font-size:15px;padding:0;margin:0;list-style:none}
.hero-facts li{display:flex;align-items:center;gap:8px}
.hero-facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--marigold)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{padding:48px 0 120px}}

/* certificate mock */
.cert-mock{background:#fff;color:var(--ink);border-radius:18px;padding:28px 30px 24px;transform:rotate(-2.5deg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);position:relative;max-width:470px;margin-left:auto;border:1px solid #e9edf6}
.cert-mock::before{content:"";position:absolute;inset:10px;border:2px solid #F0D9A8;border-radius:12px;pointer-events:none}
.cert-mock .c-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.cert-mock .c-top img{width:40px;background:var(--night);border-radius:10px;padding:3px}
.cert-mock .c-top span{font-family:var(--display);font-weight:700;font-size:17px}
.cert-mock .c-kicker{font-size:13px;color:var(--muted);margin:0}
.cert-mock .c-name{font-family:var(--display);font-size:30px;font-weight:700;margin:2px 0 6px;color:var(--night)}
.cert-mock .c-course{font-size:15px;margin:0 0 18px}
.cert-mock .c-course b{color:var(--blue)}
.cert-mock .c-foot{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px dashed var(--line);padding-top:14px;font-size:13px;color:var(--muted)}
.cert-mock .c-foot strong{display:block;color:var(--ink);font-size:14px}
.cert-mock .seal{position:absolute;right:26px;top:24px;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFD27A,#FF8A1A);
  display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:13px;text-align:center;line-height:1.05;box-shadow:0 0 0 5px #FFF1DA}
.cert-mock .verified{position:absolute;left:-14px;bottom:-16px;background:var(--ok);color:#fff;border-radius:999px;padding:8px 16px 8px 12px;font-weight:600;font-size:14px;
  transform:rotate(2.5deg);display:flex;align-items:center;gap:6px;box-shadow:0 10px 25px -8px rgba(14,159,110,.6)}
@media (max-width:900px){.cert-mock{margin:10px auto 0;transform:rotate(-1.5deg)}}

/* verify strip */
.verify{position:relative;z-index:2;margin-top:-84px}
.verify-card{background:#fff;border-radius:20px;box-shadow:0 24px 60px -24px rgba(10,22,51,.35);border:1px solid var(--line);padding:28px;display:grid;grid-template-columns:1fr 1.25fr;gap:28px;align-items:center}
.verify-card h2{font-size:1.6rem;margin-bottom:.25em}
.verify-card p{color:var(--muted);margin:0}
.verify-form{display:flex;gap:10px}
.verify-form input,.field input,.field select,.field textarea{flex:1;min-width:0;font:inherit;font-size:17px;padding:13px 16px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--ink)}
.verify-form input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.verify-help{font-size:14px;color:var(--muted);margin-top:8px}
@media (max-width:860px){.verify-card{grid-template-columns:1fr}.verify-form{flex-direction:column}}

/* sections */
.sec{padding:96px 0}
.sec-chalk{background:var(--chalk)}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head p{color:var(--muted);font-size:18px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* courses */
.courses{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.course{background:#fff;border-radius:22px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.course-art{aspect-ratio:16/8;background-size:cover;background-position:center;position:relative}
.course-art .code{position:absolute;left:24px;bottom:18px;color:#fff;font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.02em;line-height:1}
.course-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.course-body h3{font-size:1.45rem;margin-bottom:.2em}
.course-body .sub{color:var(--muted);margin-bottom:16px}
.ticks{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%231565E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.course.orange .ticks li::before{background-color:#FFF0E3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23E2620A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.course-meta{display:flex;gap:18px;color:var(--muted);font-size:15px;margin-bottom:18px;flex-wrap:wrap}
.course-buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:18px}
.price{font-family:var(--display);font-weight:700;font-size:30px;line-height:1}
.price s{font-family:var(--body);font-weight:400;font-size:16px;color:var(--muted);margin-left:6px}
.upcoming{margin-top:24px;display:flex;align-items:center;gap:16px;background:#fff;border:1px dashed #C9D4EA;border-radius:16px;padding:16px 20px}
.upcoming .tag{background:#F0EBFF;color:#5B3BD6;border-radius:999px;padding:4px 12px;font-weight:600;font-size:14px;white-space:nowrap}
@media (max-width:860px){.courses{grid-template-columns:1fr}}

/* journey (a real sequence) */
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:step;position:relative}
.journey::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:3px;background:linear-gradient(90deg,var(--blue),var(--ember))}
.journey li{text-align:center;padding:0 12px;position:relative}
.journey li::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;margin:0 auto 16px;
  background:#fff;border:3px solid var(--blue);font-family:var(--display);font-weight:700;font-size:22px;color:var(--blue);position:relative}
.journey li:nth-child(n+4)::before{border-color:var(--ember);color:var(--ember-d)}
.journey li:last-child::before{background:var(--ember);color:#fff;border-color:var(--ember)}
.journey h3{font-size:1.1rem;margin-bottom:.3em}
.journey p{color:var(--muted);font-size:15px;margin:0}
@media (max-width:860px){
  .journey{grid-template-columns:1fr;gap:22px}
  .journey::before{left:27px;right:auto;top:10px;bottom:10px;width:3px;height:auto;background:linear-gradient(180deg,var(--blue),var(--ember))}
  .journey li{text-align:left;padding-left:76px;min-height:56px}
  .journey li::before{position:absolute;left:0;top:0;margin:0}
}

/* earn: level table + rank ladder */
.earn{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.levels{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.levels h3{margin-bottom:4px}
.levels .note{color:var(--muted);font-size:15px}
.lv{display:grid;grid-template-columns:86px 1fr 56px;align-items:center;gap:14px;padding:10px 0;border-top:1px solid #EEF2F9}
.lv:first-of-type{border-top:0}
.lv .bar{height:12px;background:#EEF3FC;border-radius:6px;overflow:hidden}
.lv .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#5EA0FF);border-radius:6px}
.lv strong{font-family:var(--display);font-size:20px;text-align:right}
.lv span{font-weight:600}
.ladder{display:flex;align-items:flex-end;gap:10px;height:380px}
.step{flex:1;min-width:0;color:#fff;border-radius:16px 16px 6px 6px;padding:16px 14px;display:flex;flex-direction:column}
.step:nth-child(1){height:170px;background:#24407F}
.step:nth-child(2){height:220px;background:#1D3A8A}
.step:nth-child(3){height:270px;background:#1554C7}
.step:nth-child(4){height:325px;background:linear-gradient(180deg,#FF9A3D,#E2620A)}
.step:nth-child(5){height:380px;background:linear-gradient(180deg,#FFB627,#FF7A1A)}
.step .pool{font-family:var(--display);font-weight:700;font-size:28px;line-height:1;margin-bottom:auto}
.step .pool em{font-style:normal;font-size:13px;font-weight:500;display:block;opacity:.9;margin-top:4px;font-family:var(--body);line-height:1.25}
.step b{font-family:var(--display);font-size:16px;line-height:1.15;display:block;margin:10px 0 6px}
.step small{display:block;font-size:13px;opacity:.88;line-height:1.35}
.earn-foot{color:var(--muted);font-size:15px;margin-top:16px}
@media (max-width:960px){.earn{grid-template-columns:1fr}}
@media (max-width:620px){.ladder{flex-direction:column;align-items:stretch;min-height:0}.ladder{height:auto}.step{height:auto !important;border-radius:14px;display:grid;grid-template-columns:96px 1fr;column-gap:12px;align-items:center}.step .pool{grid-row:span 2;margin:0}.step b{margin:0}}

/* why / features */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px}
.why div{border-left:3px solid var(--blue);padding-left:18px}
.why div:nth-child(even){border-color:var(--ember)}
.why h3{font-size:1.15rem;margin-bottom:.35em}
.why p{color:var(--muted);margin:0;font-size:16px}
@media (max-width:860px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.why{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--blue);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:10px 0 0}

/* cta band */
.band{background:var(--night);color:#fff;border-radius:26px;padding:48px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:var(--ember);filter:blur(100px);opacity:.35;right:-100px;top:-120px}
.band > *{position:relative;z-index:1}
.band h2{margin:0 0 .2em}
.band p{color:rgba(255,255,255,.75);margin:0}
@media (max-width:760px){.band{flex-direction:column;align-items:flex-start;padding:32px}}

/* footer */
.site-foot{background:#071028;color:rgba(255,255,255,.72);padding:64px 0 28px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.site-foot h4{color:#fff;font-size:16px;margin-bottom:12px}
.site-foot a{color:rgba(255,255,255,.72)}
.site-foot a:hover{color:#fff}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* inner pages */
.page-hero{background:var(--night);color:#fff;padding:64px 0 56px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--blue);filter:blur(110px);opacity:.4;right:-60px;top:-160px}
.page-hero .wrap{position:relative;z-index:1}
.page-hero p{color:rgba(255,255,255,.78);max-width:40em;font-size:18px;margin:0}
.prose{max-width:760px}
.prose h2{font-size:1.5rem;margin-top:1.6em}
.prose p,.prose li{color:#33405e}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-weight:600;font-size:15px}
.field textarea{min-height:120px}

/* verification result */
.result{border-radius:18px;padding:26px;border:2px solid var(--line);background:#fff}
.result.ok{border-color:#A7E3CB;background:#F2FBF7}
.result.bad{border-color:#F3C2C2;background:#FFF6F6}
.result .status{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:999px;padding:6px 14px;font-size:15px;margin-bottom:14px}
.result.ok .status{background:var(--ok);color:#fff}
.result.bad .status{background:var(--bad);color:#fff}
.kv{display:grid;grid-template-columns:180px 1fr;gap:10px 18px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
@media (max-width:560px){.kv{grid-template-columns:1fr}.kv dt{margin-top:6px}}
.pill{display:inline-block;border-radius:999px;padding:3px 12px;font-size:14px;font-weight:600;background:var(--sky);color:var(--blue-d)}
.pill.orange{background:#FFF0E3;color:var(--ember-d)}
.pill.green{background:#E3F6EE;color:#0B7C56}
.alert{border-radius:12px;padding:12px 16px;margin-bottom:16px;font-weight:500}
.alert-ok{background:#E3F6EE;color:#0B6B4A}
.alert-bad{background:#FDECEC;color:#A12A2A}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

/* auth pages */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:#fff}
.auth-side{background:var(--night);color:#fff;padding:40px 48px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-side::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:var(--blue);filter:blur(100px);opacity:.42;left:-120px;top:-140px}
.auth-side::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:var(--ember);filter:blur(100px);opacity:.3;right:-120px;bottom:-120px}
.auth-side > *{position:relative;z-index:1}
.auth-side .big-logo{width:min(340px,80%);margin:auto auto 22px}
.auth-side h2{font-size:clamp(1.6rem,2.4vw,2.1rem);margin:0 0 10px;max-width:16ch}
.auth-side p{color:rgba(255,255,255,.75);max-width:32em;margin:0 0 auto}
.auth-side ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;color:rgba(255,255,255,.82);font-size:15.5px}
.auth-side li{display:flex;gap:10px;align-items:center}
.auth-side li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--marigold);flex:none}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-box{width:100%;max-width:440px}
.auth-box h1{font-size:2rem;margin-bottom:.2em}
.auth-box .sub{color:var(--muted);margin-bottom:24px}
.auth-box .field input,.auth-box .field select{font-size:16px;padding:12px 14px;width:100%}
.auth-box .row2 > *{min-width:0}
.auth-box .btn{width:100%}
.auth-box .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-box .hint{font-size:13.5px;color:var(--muted)}
.auth-box .alt{text-align:center;margin-top:18px;color:var(--muted)}
.auth-top{display:none}
.captcha{display:flex;align-items:center;gap:10px}
.captcha .q{background:var(--chalk);border:2px solid var(--line);border-radius:12px;padding:11px 14px;font-weight:700;font-family:var(--display);white-space:nowrap}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:6px 0 18px}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--blue)}
.pw-wrap{position:relative}
.pw-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;padding:6px}
.cred{background:var(--chalk);border-radius:14px;padding:18px;margin:18px 0}
.cred .kv{grid-template-columns:130px 1fr}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-top{display:flex;background:var(--night);padding:14px 20px}
  .auth-main{align-items:flex-start;padding-top:28px}
}