:root { --ink:#17211f; --muted:#65726f; --paper:#f4f6f0; --lime:#d9f36a; --teal:#0f776d; --deep:#123b36; --line:rgba(23,33,31,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Noto Sans SC',sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px,calc(100% - 48px)); margin:0 auto; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid var(--line); background:rgba(244,246,240,.9); position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.03em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--lime); border-radius:50%; font:700 11px 'DM Mono',monospace; }
nav { display:flex; align-items:center; gap:28px; color:#52615d; font-size:14px; }
nav a:hover { color:var(--teal); }
.nav-cta { padding:10px 16px; border:1px solid var(--ink); border-radius:99px; color:var(--ink); }
.hero { display:grid; grid-template-columns:1.08fr .92fr; gap:60px; min-height:620px; align-items:center; padding:78px 0 96px; }
.eyebrow { margin:0 0 22px; color:var(--teal); font:500 12px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-weight:900; letter-spacing:-.06em; line-height:1.08; }
h1 { max-width:650px; margin-bottom:24px; font-size:clamp(48px,7vw,84px); }
h1 em { color:var(--teal); font-style:normal; }
.lede { max-width:540px; color:var(--muted); font-size:18px; line-height:1.8; }
.hero-actions { display:flex; gap:12px; margin:34px 0 42px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:7px; font-weight:700; font-size:14px; }
.button-primary { background:var(--ink); color:var(--paper); }
.button-primary:hover { background:var(--teal); }
.button-ghost { border:1px solid var(--line); }
.proof-row { display:flex; flex-wrap:wrap; gap:10px; color:#52615d; font:12px 'DM Mono',monospace; }
.proof-row span { padding:8px 11px; border:1px solid var(--line); border-radius:99px; }
.hero-poster { width:100%; max-width:480px; justify-self:end; overflow:hidden; border-radius:18px; background:#091015; box-shadow:18px 20px 0 var(--lime); transform:rotate(1deg); }
.hero-poster img { display:block; width:100%; height:auto; }
.hero-card { min-height:390px; padding:26px; color:var(--paper); background:var(--deep); border-radius:22px; box-shadow:18px 20px 0 var(--lime); transform:rotate(2deg); }
.hero-card-top,.hero-card-foot { display:flex; align-items:center; gap:8px; font:12px 'DM Mono',monospace; color:#abc7bf; }
.card-code { margin-left:auto; color:var(--lime); }
.status-dot { width:8px; height:8px; background:var(--lime); border-radius:50%; box-shadow:0 0 0 5px rgba(217,243,106,.14); }
.metric { display:flex; align-items:baseline; gap:10px; margin-top:78px; }
.metric strong { font:700 clamp(90px,12vw,146px)/.9 'Manrope',sans-serif; letter-spacing:-.09em; color:var(--lime); }
.metric span { color:#b4d0c9; font:500 16px 'DM Mono',monospace; }
.hero-card p { margin:14px 0 50px; font-size:18px; line-height:1.6; }
.line-chart { height:58px; display:flex; align-items:flex-end; gap:7px; border-bottom:1px solid rgba(217,243,106,.4); }
.line-chart span { flex:1; background:var(--lime); border-radius:5px 5px 0 0; }
.line-chart span:nth-child(1){height:34%}.line-chart span:nth-child(2){height:45%}.line-chart span:nth-child(3){height:39%}.line-chart span:nth-child(4){height:57%}.line-chart span:nth-child(5){height:66%}.line-chart span:nth-child(6){height:78%}.line-chart span:nth-child(7){height:96%}
.hero-card-foot { justify-content:space-between; margin-top:14px; }
.band { background:var(--lime); }
.band-grid { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:90px; }
.band p { margin:0; font-size:17px; font-weight:700; }
.band-items { display:flex; gap:25px; color:#4a5d38; font:500 12px 'DM Mono',monospace; }
.section { padding:120px 0; }
.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:end; margin-bottom:62px; }
.section-heading h2 { margin:0; font-size:clamp(38px,5vw,60px); }
.section-heading > p:last-child { max-width:360px; margin:0; color:var(--muted); line-height:1.8; }
.cards { display:grid; gap:16px; }.cards.three { grid-template-columns:repeat(3,1fr); }.cards.two { grid-template-columns:repeat(2,1fr); }
.info-card { min-height:240px; padding:28px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.24); }
.info-card:hover { border-color:var(--teal); transform:translateY(-4px); transition:.25s ease; }
.card-number { color:var(--teal); font:500 12px 'DM Mono',monospace; }.info-card h3 { margin:46px 0 12px; font-size:22px; }.info-card p { color:var(--muted); line-height:1.7; }
.section-dark { background:var(--deep); color:var(--paper); }.method-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; }.eyebrow-light { color:var(--lime); }.method-grid h2 { margin:0; font-size:clamp(40px,5vw,62px); }
.checklist { list-style:none; padding:0; margin:0; border-top:1px solid rgba(244,246,240,.24); }.checklist li { display:flex; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid rgba(244,246,240,.24); color:#dbe8df; }.checklist span { width:30px; color:var(--lime); font:12px 'DM Mono',monospace; }
.case-section { display:grid; grid-template-columns:1.03fr .97fr; gap:72px; align-items:center; }.case-image { overflow:hidden; border-radius:16px; background:#dee5d9; }.case-image img { display:block; width:100%; height:auto; }.case-copy h2 { margin:0 0 22px; font-size:clamp(37px,4.5vw,56px); }.case-copy p:not(.eyebrow) { color:var(--muted); line-height:1.85; }.text-link { display:inline-block; margin-top:17px; color:var(--teal); font-weight:700; }
.poster-heading { margin-bottom:44px; }.poster-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.poster-grid figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#e7ece3; }.poster-grid img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }.poster-grid figcaption { padding:14px 16px 16px; color:var(--muted); font:12px 'DM Mono',monospace; }
.contact-section { padding:100px 0; background:var(--teal); color:var(--paper); }.contact-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; }.contact-grid h2 { margin:0 0 20px; font-size:clamp(40px,5vw,64px); }.contact-note { max-width:520px; color:#c7e2dc; line-height:1.8; }.contact-box { padding:28px; background:var(--deep); border-radius:14px; }.contact-label { color:#a9cbc3; font:12px 'DM Mono',monospace; }.contact-keyword { margin:24px 0 14px; color:var(--lime); font:700 38px 'Manrope',sans-serif; }.contact-box p { color:#d1e5df; line-height:1.7; }.contact-placeholder { margin-top:30px; padding-top:18px; border-top:1px solid rgba(244,246,240,.2); color:#9bbab3; font-size:13px; }
.footer { padding:22px 0; color:#6b7b76; font:12px 'DM Mono',monospace; }.footer .shell { display:flex; justify-content:space-between; gap:20px; }
.article { max-width:820px; padding:78px 0 110px; }.article h1 { font-size:clamp(42px,6vw,70px); }.article h2 { margin:56px 0 20px; font-size:34px; }.article p,.article li { color:var(--muted); font-size:17px; line-height:1.9; }.article li+li { margin-top:10px; }.article .lede { margin-bottom:30px; }.article-cta { margin-top:58px; padding:28px; border-radius:14px; background:var(--deep); color:var(--paper); }.article-cta p { color:#c7e2dc; }.article-cta .button-primary { background:var(--lime); color:var(--ink); }
@media (max-width:800px) { .topbar { padding:0 18px; }.topbar nav a:not(.nav-cta) { display:none; }.shell { width:min(100% - 36px,620px); }.hero,.section-heading,.method-grid,.case-section,.contact-grid { grid-template-columns:1fr; }.hero { gap:55px; padding:65px 0 90px; }.hero-poster { max-width:460px; width:calc(100% - 14px); margin:0 auto; justify-self:center; }.hero-card { max-width:520px; width:calc(100% - 14px); margin:0 auto; }.band-grid { display:block; padding:23px 0; }.band-items { margin-top:14px; gap:16px; flex-wrap:wrap; }.section { padding:82px 0; }.section-heading { gap:20px; margin-bottom:38px; }.cards.three,.cards.two,.poster-grid { grid-template-columns:1fr; }.info-card { min-height:0; }.method-grid,.case-section,.contact-grid { gap:42px; }.contact-section { padding:80px 0; }.footer .shell { display:block; }.footer span+span { display:block; margin-top:8px; } }