:root { --ink:#10251f; --ink-soft:#29453b; --paper:#f4f0e9; --cream:#fffdf8; --lime:#d8fa55; --orange:#ed5c38; --line:rgba(16,37,31,.18); --muted:#617069; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { 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); } .topbar nav { display:flex; gap:21px; } .topbar nav a { text-decoration:none; } .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); } footer { border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; flex-wrap:wrap; }
.shell,.section { max-width:1160px; margin:auto; } .hero { background:var(--ink); color:var(--cream); padding:54px 32px 70px; position:relative; } .hero::after { content:""; position:absolute; width:46vw; height:46vw; right:-15vw; bottom:-35vw; 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:.71rem; line-height:1; letter-spacing:.16em; font-weight:850; color:#609a83; } .hero .eyebrow,.strip .eyebrow { color:var(--lime); } 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; border-radius:0; font:inherit; font-weight:800; cursor:pointer; text-decoration:none; display:inline-block; 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:#b3c8bd; } .trust-row span+span::before { content:"/"; margin-right:18px; color:#609a83; }
.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; }
.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 (max-width:780px) { .topbar,footer { padding:18px 22px; } .topbar nav { display:none; } .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; } }