.h2-container { width:100%; max-width:1176px; margin-inline:auto; }
.h2-hero { padding:80px 40px 72px; background:radial-gradient(ellipse at 90% 10%,rgba(0,201,123,.12),transparent 65%),#09261c; }
.h2-hero-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:64px; align-items:center; }
.h2-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--color-green-bright); font-size:14px; line-height:1.7; font-weight:600; }
.h2-hero h1 { font-size:clamp(42px,4.5vw,66px); font-weight:750; letter-spacing:-2.8px; line-height:1.08; margin:24px 0; }
.h2-hero h1 > span { color:var(--color-green-bright); }
.h2-lead { max-width:525px; margin:0 0 28px; font-size:18px; line-height:1.85; color:var(--color-muted); }
.h2-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.h2-text-link { display:inline-flex; align-items:center; gap:8px; font-size:14px; line-height:1.6; font-weight:550; text-decoration:none; color:var(--color-green-bright); padding-block:10px; }
.h2-text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.h2-text-link .p-icon { width:17px; height:17px; }
.h2-small { display:block; font-size:12px; line-height:1.8; color:var(--color-muted); margin-top:16px; }
.h2-channels { display:flex; flex-wrap:wrap; gap:20px; padding-top:28px; margin-top:28px; border-top:1px solid var(--color-border); }
.h2-channels > span { display:inline-flex; align-items:center; gap:7px; color:#b4cabd; font-size:12px; }
.h2-channels .p-icon { width:16px; height:16px; }
.h2-preview { min-width:0; padding:24px; background:#102f23; border:1px solid rgba(190,225,205,.2); border-radius:20px; box-shadow:0 24px 64px rgba(0,0,0,.15); }
.h2-preview-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--color-border); }
.h2-preview-top > span:first-child { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.h2-preview-top .p-icon { width:18px; height:18px; color:var(--color-green-bright); }
.h2-preview-tag { color:var(--color-muted); font-size:10px; padding:4px 7px; border:1px solid var(--color-border); border-radius:5px; }
.h2-example-message { display:flex; align-items:flex-start; gap:12px; padding:24px 0; }
.h2-avatar { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:38px; height:38px; background:#285b43; border-radius:12px; font-size:12px; font-weight:650; }
.h2-example-message strong { display:block; font-size:13px; margin-bottom:5px; }
.h2-example-message div > span { font-size:11px; color:var(--color-muted); }
.h2-example-message p { font-size:14px; line-height:1.7; color:#dae9df; margin:14px 0 0; padding:14px; background:rgba(255,255,255,.04); border-radius:0 12px 12px; }
.h2-preview-steps { display:grid; gap:10px; list-style:none; padding:0; margin:0; }
.h2-preview-steps li { display:flex; align-items:flex-start; gap:10px; background:rgba(255,255,255,.025); border:1px solid var(--color-border); border-radius:10px; padding:14px 12px; }
.h2-preview-steps li > span:first-child { color:var(--color-green-bright); }
.h2-preview-steps .p-icon { width:18px; height:18px; }
.h2-preview-steps li > div { min-width:0; flex:1; }
.h2-preview-steps strong { display:block; font-size:12px; line-height:1.6; font-weight:600; }
.h2-preview-steps p { font-size:11px; line-height:1.7; color:var(--color-muted); margin:5px 0 0; }
.h2-step-label { font-size:9px; color:#d9e8dd; background:rgba(0,201,123,.08); padding:4px 6px; border-radius:5px; white-space:nowrap; }
.h2-preview-bottom { display:flex; align-items:center; gap:8px; color:#b9d7c7; font-size:11px; line-height:1.7; margin-top:22px; }
.h2-section { padding:80px 40px; }
.h2-section-tinted { background:#0b2118; border-block:1px solid var(--color-border); }
.h2-section h2, .h2-final h2 { font-size:clamp(30px,3.3vw,44px); font-weight:700; letter-spacing:-1.4px; line-height:1.18; margin:16px 0 20px; }
.h2-section-heading { max-width:720px; margin-bottom:36px; }
.h2-section-heading > p, .h2-section-copy { font-size:16px; line-height:1.9; color:var(--color-muted); margin:0 0 20px; max-width:560px; }
.h2-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.h2-card { padding:28px; background:#0e2119; border:1px solid var(--color-border); border-radius:16px; }
.h2-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:42px; height:42px; background:rgba(0,201,123,.08); color:var(--color-green-bright); border-radius:11px; }
.h2-card h3, .h2-how-steps h3 { font-size:18px; line-height:1.5; font-weight:650; letter-spacing:-.3px; margin:22px 0 12px; }
.h2-card p, .h2-how-steps p { color:var(--color-muted); font-size:15px; line-height:1.85; margin:0; }
.h2-how-grid, .h2-example-grid, .h2-start-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:80px; }
.h2-how-steps { list-style:none; padding:0; margin:0; display:grid; gap:28px; }
.h2-how-steps li { display:flex; gap:18px; padding-bottom:28px; border-bottom:1px solid var(--color-border); }
.h2-how-steps li:last-child { padding-bottom:0; border-bottom:0; }
.h2-how-steps li > span { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; border:1px solid rgba(255,210,63,.3); border-radius:10px; color:var(--color-yellow); font-size:12px; }
.h2-how-steps h3 { margin:0 0 8px; }
.h2-example-board { display:grid; justify-items:center; gap:12px; padding:32px; background:#0e2119; border:1px solid var(--color-border); border-radius:18px; }
.h2-example-board > div { width:100%; padding:20px; background:rgba(255,255,255,.025); border:1px solid var(--color-border); border-radius:12px; }
.h2-example-board > div > span { display:block; color:var(--color-muted); font-size:11px; margin-bottom:10px; }
.h2-example-board strong { font-size:15px; line-height:1.7; font-weight:550; }
.h2-flow-arrow { display:inline-flex; color:var(--color-green-bright); }
.h2-example-board > .h2-example-board-last { border-color:rgba(0,201,123,.4); }
.h2-example-board-last > span { color:var(--color-green-bright) !important; }
.h2-plan-note { color:var(--color-muted); font-size:12px; line-height:1.9; margin-top:24px; padding-top:20px; border-top:1px solid var(--color-border); }
.h2-start-options { display:grid; gap:12px; }
.h2-start-options > a { display:flex; align-items:center; gap:14px; padding:22px; border:1px solid var(--color-border); background:rgba(255,255,255,.02); border-radius:12px; text-decoration:none; transition:border-color .2s; }
.h2-start-options > a:hover { border-color:var(--color-green); }
.h2-start-options > a > span:nth-child(2) { flex:1; min-width:0; }
.h2-start-options strong { display:block; font-size:14px; font-weight:600; }
.h2-start-options span > span { display:block; margin-top:8px; font-size:12px; line-height:1.8; color:var(--color-muted); }
.h2-start-options > a > .p-icon { width:18px; height:18px; color:var(--color-green-bright); }
.h2-faq { max-width:800px; }
.h2-faq details { border-bottom:1px solid var(--color-border); }
.h2-faq summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0; cursor:pointer; list-style:none; font-size:16px; line-height:1.6; font-weight:550; }
.h2-faq summary::-webkit-details-marker { display:none; }
.h2-faq summary .p-icon { width:18px; height:18px; color:var(--color-green-bright); }
.h2-faq details[open] summary .p-icon { transform:rotate(180deg); }
.h2-faq details p { color:var(--color-muted); font-size:15px; line-height:1.9; margin:0 0 24px; }
.h2-faq a { color:var(--color-green-bright); text-underline-offset:4px; }
.h2-final { text-align:center; padding:80px 24px; background:radial-gradient(ellipse at center,rgba(0,201,123,.09),transparent 70%),#09261c; }
.h2-final h2 { font-size:clamp(36px,4vw,52px); }
.h2-final h2 span { color:var(--color-green-bright); }
.h2-final p { color:var(--color-muted); font-size:16px; line-height:1.8; margin:0 0 28px; }
@media (max-width:1050px) {
  .h2-hero-grid { gap:32px; }
  .h2-hero h1 { font-size:50px; }
  .h2-how-grid, .h2-example-grid, .h2-start-panel { gap:40px; }
  .h2-step-label { display:none; }
}
@media (max-width:800px) {
  .h2-hero-grid, .h2-how-grid, .h2-example-grid, .h2-start-panel { grid-template-columns:minmax(0,1fr); gap:40px; }
  .h2-hero-copy { max-width:620px; }
  .h2-hero h1 { font-size:clamp(42px,7vw,58px); }
  .h2-preview { max-width:580px; width:100%; }
  .h2-card-grid { grid-template-columns:1fr; }
  .h2-card { padding:24px; }
  .h2-card h3 { margin-top:16px; }
}
@media (max-width:540px) {
  .h2-hero { padding:48px 24px; }
  .h2-hero h1 { font-size:clamp(36px,10vw,46px); letter-spacing:-1.7px; }
  .h2-lead { font-size:16px; }
  .h2-actions { align-items:stretch; flex-direction:column; gap:12px; }
  .h2-actions .h2-text-link { justify-content:center; }
  .h2-channels { gap:14px; }
  .h2-channels > span { font-size:11px; }
  .h2-section { padding:56px 24px; }
  .h2-section h2 { letter-spacing:-.8px; }
  .h2-preview { padding:18px; }
  .h2-preview-steps strong { font-size:12px; }
  .h2-example-board { padding:20px; }
  .h2-start-options > a { gap:10px; padding:16px; }
  .h2-start-options strong { font-size:13px; }
  .h2-final { padding-block:56px; }
}