:root { --ink:#10251f; --ink-soft:#29453b; --paper:#f4f0e9; --cream:#fffdf8; --lime:#d8fa55; --orange:#ed5c38; --line:rgba(16,37,31,.18); --muted:#4e5f57; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--orange); outline-offset:4px; } .skip-link { position:fixed; left:16px; top:12px; z-index:20; background:var(--lime); color:var(--ink); padding:10px 14px; font-weight:800; transform:translateY(-160%); transition:transform .15s ease; } .skip-link:focus { transform:translateY(0); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; line-height:1.55; } a { color:inherit; } main { overflow:hidden; } .topbar,footer { max-width:1240px; margin:auto; padding:22px 32px; display:flex; justify-content:space-between; gap:20px; align-items:center; } .topbar { font-size:.9rem; border-bottom:1px solid var(--line); position:relative; } .topbar nav { display:flex; gap:21px; align-items:center; } .topbar nav a { text-decoration:none; min-height:44px; display:inline-flex; align-items:center; } .topbar nav a:hover,.text-link:hover { color:var(--orange); } .brand { font-weight:900; text-decoration:none; font-size:1.2rem; letter-spacing:-.06em; } .brand span { color:var(--orange); } .menu-toggle { display:none; background:var(--ink); color:var(--cream); min-height:44px; padding:9px 13px; } .nav-cta { background:var(--lime); color:var(--ink); font-weight:850; padding:9px 12px; } footer { border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; flex-wrap:wrap; } .sr-only { clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
.shell,.section { max-width:1160px; margin:auto; } .hero { background:var(--ink); color:var(--cream); padding:54px 32px 70px; position:relative; overflow:hidden; } .hero::after { content:""; position:absolute; width:clamp(300px,32vw,540px); height:clamp(300px,32vw,540px); right:clamp(-210px,-11vw,-90px); bottom:clamp(-285px,-19vw,-140px); border-radius:50%; background:var(--lime); opacity:.96; } .hero-layout { position:relative; z-index:1; display:grid; grid-template-columns:1.35fr .65fr; align-items:center; gap:80px; } .hero-copy { padding:55px 0 25px; } .eyebrow { margin:0 0 16px; font-size:.76rem; line-height:1.15; letter-spacing:.13em; font-weight:850; color:#3d6656; } .hero .eyebrow { color:var(--lime); } .strip .eyebrow { color:var(--ink); } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(4rem,8.5vw,7.4rem); letter-spacing:-.095em; line-height:.84; max-width:760px; margin-bottom:30px; } h1 em { color:var(--lime); font-style:normal; } h2 { font-size:clamp(2.2rem,4.6vw,4.15rem); letter-spacing:-.075em; line-height:.94; margin-bottom:20px; max-width:760px; } h3 { letter-spacing:-.04em; font-size:1.38rem; line-height:1.05; } .lead { max-width:620px; font-size:1.24rem; color:#d5ded9; } .actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:34px; } button,.button { border:0; padding:14px 19px; min-height:48px; border-radius:0; font:inherit; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease,background .2s ease; } button:hover,.button:hover { transform:translateY(-2px); } .primary { background:var(--lime); color:var(--ink); } .secondary { background:transparent; border:1px solid var(--ink); color:var(--ink); } .text-link { font-weight:800; text-decoration:none; } .text-link span { padding-left:6px; color:var(--lime); } .trust-row { display:flex; gap:18px; margin-top:62px; font-size:.76rem; font-weight:750; color:#d1ded7; } .trust-row span+span::before { content:"/"; margin-right:18px; color:#93aa9e; }
.hero-card { background:var(--cream); color:var(--ink); padding:24px; min-height:390px; display:flex; flex-direction:column; box-shadow:18px 18px 0 var(--orange); transform:rotate(2deg); } .card-top,.card-meta { display:flex; justify-content:space-between; gap:8px; font-size:.68rem; letter-spacing:.11em; font-weight:850; } .status-dot { color:var(--ink-soft); } .status-dot::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--orange); margin-right:5px; } .article-number { font-size:12rem; line-height:.78; letter-spacing:-.15em; font-weight:900; margin:40px 0 28px -8px; color:var(--ink); } .hero-card p { max-width:220px; font-size:1.1rem; font-weight:700; line-height:1.1; } .card-rule { height:1px; background:var(--ink); margin-top:auto; } .card-meta { padding-top:13px; letter-spacing:.04em; color:var(--muted); }
.section { padding:110px 32px; } .intro-section { display:grid; grid-template-columns:1fr .76fr; gap:100px; align-items:end; } .intro-copy { font-size:1.2rem; color:var(--ink-soft); margin:0; } .section-heading { display:flex; justify-content:space-between; gap:35px; align-items:end; margin-bottom:42px; } .section-heading>p { width:260px; color:var(--muted); margin:0; } .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .card { position:relative; min-height:260px; padding:28px; background:var(--cream); transition:background .2s ease,color .2s ease; } .card:hover { color:var(--cream); background:var(--ink); } .card b { font-size:2.1rem; letter-spacing:-.09em; color:var(--orange); display:block; margin-bottom:56px; } .card p { color:var(--muted); font-size:.92rem; } .card:hover p { color:#c7d1cb; } .card-arrow { position:absolute; right:25px; bottom:19px; color:var(--orange); font-size:1.4rem; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:860px; } .price-card { background:var(--cream); border:1px solid var(--line); border-top:5px solid var(--ink); padding:31px; } .price-card.featured { background:var(--ink); color:var(--cream); border-color:var(--ink); border-top-color:var(--lime); } .price-card h3 { font-size:3rem; letter-spacing:-.08em; margin:8px 0 14px; } .price-card ul { padding-left:18px; min-height:90px; } .price-card.featured .eyebrow { color:var(--lime); } .price-card.featured .button { background:var(--lime); color:var(--ink); } .notice { max-width:760px; font-size:.94rem; color:var(--muted); } .pricing-grid+.notice { margin-top:20px; }
.strip { background:var(--orange); color:var(--ink); padding:84px 32px; } .team-layout { display:grid; grid-template-columns:1.1fr .7fr; gap:100px; align-items:end; } .team-layout h2 { max-width:620px; } .team-layout p:not(.eyebrow) { font-size:1.18rem; font-weight:650; } .light { background:var(--ink); color:var(--cream); margin-top:16px; } .evidence-section { background:var(--cream); margin:0 auto; }
.faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:92px; align-items:start; } .faq-list { border-top:1px solid var(--line); } .faq-list details { border-bottom:1px solid var(--line); padding:21px 0; } .faq-list summary { cursor:pointer; list-style:none; font-size:1.12rem; font-weight:800; padding-right:30px; position:relative; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary::after { content:"+"; position:absolute; right:2px; color:var(--orange); font-size:1.5rem; line-height:.9; } .faq-list details[open] summary::after { content:"−"; } .faq-list p { color:var(--muted); margin:14px 28px 0 0; }
.article-hero { background:var(--ink); color:var(--cream); padding:85px 32px 105px; } .article-shell { max-width:880px; margin:auto; } .article-hero h1 { max-width:790px; } .article-hero .lead { color:#d5ded9; } .article-body { padding:78px 32px 110px; font-size:1.12rem; } .article-body h2 { font-size:clamp(2rem,4vw,3.4rem); margin:64px 0 20px; } .article-body p { max-width:720px; color:var(--ink-soft); } .article-kicker { color:var(--orange)!important; font-size:.76rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; } .article-note { border-left:6px solid var(--orange); background:var(--cream); padding:26px 30px; margin:46px 0; } .article-note p { margin:8px 0 0; } .article-disclaimer { color:var(--muted)!important; font-size:.9rem; }
.certificate-shell { max-width:960px; margin:80px auto; padding:0 28px 80px; } .sample-certificate { background:var(--cream); border:1px solid var(--ink); box-shadow:15px 15px 0 var(--orange); padding:clamp(32px,7vw,74px); text-align:center; } .certificate-brand { font-weight:900; letter-spacing:-.07em; font-size:1.55rem; margin-bottom:25px; } .certificate-brand span { color:var(--orange); } .certificate-rule { height:5px; background:var(--lime); max-width:170px; margin:0 auto 45px; } .sample-certificate h1 { margin:18px auto 24px; font-size:clamp(3.5rem,8vw,6.2rem); } .sample-certificate h2 { font-size:clamp(1.9rem,4vw,3.4rem); margin:20px auto 28px; } .sample-certificate .notice { margin:38px auto; } .certificate-footer { border-top:1px solid var(--line); padding-top:18px; display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:.86rem; text-align:left; }
.learner { max-width:920px; margin:50px auto; padding:0 28px; } .progress { height:8px; background:#dde3df; overflow:hidden; margin:16px 0 28px; } .progress i { display:block; height:100%; background:var(--orange); } .module-list { display:grid; gap:9px; } .module { width:100%; display:flex; justify-content:space-between; gap:14px; align-items:center; text-align:left; background:var(--cream); border:1px solid var(--line); padding:17px; } .module small { color:var(--muted); } .lesson { background:var(--cream); border:1px solid var(--line); padding:28px; } .lesson p { white-space:pre-line; } .message { max-width:720px; margin:80px auto; padding:0 28px; } .error { color:#a32c15; } .quiz-option { width:100%; text-align:left; margin:8px 0; background:var(--cream); border:1px solid var(--line); } .quiz-option.selected { border:2px solid var(--orange); background:#fff3ed; } .quiz-question { padding:20px 0; border-bottom:1px solid var(--line); } .checkout-form { display:grid; gap:16px; max-width:520px; margin-top:28px; } .checkout-form label { display:grid; gap:7px; font-weight:700; } .checkout-form label.check { display:block; font-size:.87rem; font-weight:600; line-height:1.45; } .checkout-form label.check input { width:auto; margin:0 9px 0 0; vertical-align:middle; } .checkout-form input,.checkout-form textarea { border:1px solid var(--line); background:var(--cream); padding:13px; font:inherit; border-radius:0; } button:disabled { opacity:.62; cursor:wait; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
@media (max-width:780px) { .topbar,footer { padding:18px 22px; } .menu-toggle { display:inline-flex; } .topbar nav { display:none; position:absolute; z-index:10; top:100%; left:0; right:0; background:var(--cream); border-bottom:1px solid var(--line); box-shadow:0 12px 28px rgba(16,37,31,.12); padding:15px 22px 22px; flex-direction:column; align-items:stretch; gap:5px; } .topbar nav.is-open { display:flex; } .topbar nav a { display:block; padding:11px 0; min-height:44px; } .topbar nav .nav-cta { padding:12px; text-align:center; margin-top:6px; } .hero,.section,.strip { padding-left:24px; padding-right:24px; } .hero-layout,.intro-section,.team-layout,.faq-section { grid-template-columns:1fr; gap:35px; } .hero-copy { padding-top:30px; } .hero-card { max-width:310px; min-height:330px; margin:5px 12px 30px auto; } .article-number { font-size:9rem; margin-top:25px; } .trust-row { margin-top:38px; flex-wrap:wrap; } .trust-row span+span::before { display:none; } .section { padding-top:76px; padding-bottom:76px; } .section-heading { display:block; } .section-heading>p { width:auto; } .grid,.pricing-grid { grid-template-columns:1fr; } .card { min-height:210px; } }