:root { --bg: #000000; --bg-soft: #0a0a0a; --bg-card: #111111; --text: #ffffff; --muted: #ffffff; --accent: #ffcc00; --accent-light: #ffd700; --accent-bright: #ffe033; --line: rgba(255, 204, 0, 0.6); --line-subtle: rgba(255, 204, 0, 0.35); --border: 2px solid var(--line); --border-subtle: 2px solid var(--line-subtle); --shadow: 0 12px 32px rgba(0, 0, 0, 0.55); --radius: 16px; --space-1: 0.55rem; --space-2: 0.9rem; --space-3: 1.25rem; --space-4: 1.6rem; --space-5: 2.1rem; --space-6: 3rem; --section-gap: var(--space-5); --bar-h: 70px; --topbar-h: calc(var(--bar-h) + 2px + env(safe-area-inset-top, 0px)); --mobile-menu-width: 62vw; --page-gutter: 4vw; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 12px); background-color: #000000; color-scheme: dark; min-height: 100%; min-height: 100dvh; } body { min-height: 100%; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom, 0px); font-family: "Segoe UI", "Inter", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } .container { width: min(1120px, 92%); margin: 0 auto; } .topbar { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); backdrop-filter: blur(12px); background: rgba(0, 0, 0, 0.95); border-bottom: 2px solid var(--line); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); } .nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: var(--bar-h); gap: 1.8rem; position: relative; } .logo { display: inline-flex; align-items: center; line-height: 0; } .logo img { height: 43px; width: auto; max-width: min(215px, 57vw); object-fit: contain; display: block; } .menu { display: flex; gap: 1.6rem; align-items: center; justify-content: flex-end; } .menu a { color: #ffffff; font-size: 1.04rem; transition: color 0.2s ease; }
.menu a:hover { color: var(--accent-light); }
.menu a[aria-current="page"] { color: var(--accent); } .menu-cta { justify-self: end; } .menu-cta.btn-primary, .menu-cta.btn-primary:hover { color: #000000; } .nav-toggle { display: none; } .hamburger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--line); background: transparent; align-items: center; justify-content: center; cursor: pointer; justify-self: end; } .hamburger span { display: block; width: 18px; height: 2px; background: var(--accent-light); border-radius: 999px; position: relative; transition: transform 0.2s ease, opacity 0.2s ease; } .hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--accent-light); border-radius: 999px; transition: transform 0.2s ease; } .hamburger span::before { top: -6px; } .hamburger span::after { top: 6px; } .mobile-menu { display: none; } .mobile-menu-backdrop { display: none; margin: 0; padding: 0; border: 0; appearance: none; background: transparent; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: none; border-radius: 12px; padding: 0.62rem 1.25rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease; white-space: nowrap; } .btn-primary { color: #000000; background: linear-gradient(135deg, #ffe033, var(--accent)); box-shadow: none; }
.btn-primary:hover { background: linear-gradient(135deg, #ffd700, #e6b800); box-shadow: none; }
.btn-outline { color: var(--accent-bright); border: 2px solid var(--line); background: transparent; }
.btn-outline:hover { background: transparent; border-color: var(--accent-bright); } .hero-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.6rem; align-items: center; padding-top: var(--section-gap); padding-bottom: var(--section-gap); border-bottom: 2px solid var(--line-subtle); } .hero-content { display: flex; flex-direction: column; gap: var(--space-3); } .hero-content h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15; margin: 0; color: var(--accent-light); background: linear-gradient(135deg, #fff176 0%, var(--accent-bright) 45%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-content p { color: #ffffff; max-width: 60ch; margin: 0; font-size: 1.04rem; line-height: 1.7; }
.hero-content p a { color: var(--accent-bright); text-decoration: none; font-weight: 700; }
.hero-content p a:hover { color: var(--accent-light); text-decoration: underline; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .hero-actions .btn { min-width: 180px; } .hero-card { border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow); padding: 1rem; } .table-preview { border-radius: 12px; border: 2px solid var(--line); overflow: hidden; aspect-ratio: 1 / 1; background: #000000; } .table-preview img { width: 100%; height: 100%; object-fit: cover; } .history-preview { aspect-ratio: 5 / 2; } .history-preview img { object-fit: contain; } body > .container:not(.nav):not(.hero-wrap), main > .container:not(.hero-wrap) { position: relative; padding-top: var(--section-gap); padding-bottom: var(--section-gap); border-bottom: 2px solid var(--line-subtle); display: flex; flex-direction: column; gap: var(--space-3); } body > .container:not(.nav):not(.hero-wrap):last-of-type, main > .container:not(.hero-wrap):last-of-type { border-bottom: 0; } h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.18; margin: 0; color: var(--accent-light); }
.subtitle { color: #ffffff; margin: 0; line-height: 1.7; }
.container > p { color: #ffffff; }
.subtitle a, .container > p a { color: var(--accent-bright); font-weight: 600; text-decoration: none; }
.subtitle a:hover, .container > p a:hover { color: var(--accent-light); text-decoration: underline; } .article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .article-card { border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg-card); padding: 1.1rem; box-shadow: var(--shadow); } .article-card h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: var(--space-2); color: var(--accent-light); } .article-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; } .tag { display: inline-block; font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; color: #ffffff; margin-bottom: 0.5rem; } .section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .count-badge { border: 2px solid var(--line); border-radius: 999px; padding: 0.45rem 0.85rem; color: #ffffff; background: var(--bg-soft); font-size: 0.9rem; } .article-media { aspect-ratio: 16 / 10; background: #000000; } .article-media img { width: 100%; height: 100%; object-fit: cover; } .article-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.72rem; } .article-body h3 { font-size: 1.15rem; line-height: 1.35; color: var(--accent-light); } .article-meta { color: var(--muted); font-size: 0.85rem; } .article-link { align-self: flex-start; margin-top: auto; color: #000000; background: linear-gradient(135deg, #ffe033, var(--accent)); border-radius: 10px; padding: 0.5rem 0.9rem; font-size: 0.9rem; font-weight: 700; } .strategy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .strategy-item { border-radius: 14px; border: 2px solid var(--line); background: var(--bg-card); padding: 1rem; } .strategy-item h3, .strategy-item h4 { color: var(--accent-light); font-size: 1rem; line-height: 1.3; margin-bottom: var(--space-1); } .strategy-item p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; } .provider-table-wrap { border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); } .provider-table { width: 100%; border-collapse: collapse; } .provider-table thead th { background: var(--bg-soft); color: var(--accent-light); text-align: left; font-weight: 700; font-size: 0.95rem; padding: 0.85rem 1rem; border-bottom: 2px solid var(--line-subtle); }
.provider-table tbody tr:hover { background: rgba(255, 204, 0, 0.08); }
.provider-table td { padding: 0.8rem 1rem; border-bottom: 2px solid var(--line-subtle); color: var(--muted); font-size: 0.95rem; }
.provider-table tbody tr:last-child td { border-bottom: 0; } .toc-page-anchor { position: absolute; top: 0; left: 0; display: block; height: 0; width: 0; overflow: hidden; pointer-events: none; } .toc-panel { border: 2px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; background: var(--bg-card); box-shadow: var(--shadow); } .toc-label { color: var(--accent-light); font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; margin: 0 0 0.8rem; } .toc-tree, .toc-tree ol { margin: 0; padding-left: 0; list-style: none; } .toc-tree { color: var(--text); display: flex; flex-direction: column; gap: 0.45rem; counter-reset: section; } .toc-tree > li { line-height: 1.6; counter-increment: section; position: relative; padding-left: 1.35rem; } .toc-tree > li::before { content: counter(section) "."; color: var(--text); position: absolute; left: 0; top: 0; width: 1.1rem; text-align: left; font-variant-numeric: tabular-nums; } .toc-tree a { color: var(--accent-bright); transition: color 0.2s ease; } .toc-tree a:hover { color: var(--accent-light); text-decoration: underline; } .toc-tree > li > ol { margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.32rem; counter-reset: subsection; } .toc-tree > li > ol > li { counter-increment: subsection; position: relative; line-height: 1.55; padding-left: 2.28rem; } .toc-tree > li > ol > li::before { content: counter(section) "." counter(subsection) "."; color: var(--muted); position: absolute; left: 0; top: 0; width: 2.05rem; text-align: left; font-variant-numeric: tabular-nums; } .faq-list { display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { border: 2px solid var(--line); border-radius: 12px; background: var(--bg-card); overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: 0.95rem 1rem; color: var(--accent-light); font-weight: 600; position: relative; padding-right: 2.6rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--accent-light); font-size: 1.15rem; line-height: 1; } .faq-item[open] summary::after { content: "-"; } .faq-item[open] summary { border-bottom: 2px solid var(--line-subtle); background: var(--bg-soft); } .faq-item > p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin: 0; padding: 0.35rem 1rem 1rem; } .article-card p a, .strategy-item p a, .faq-item > p a, .provider-table td a, .article-body p a, .footer a { color: var(--accent-bright); font-weight: 600; text-decoration: none; }
.article-card p a:hover, .strategy-item p a:hover, .faq-item > p a:hover, .provider-table td a:hover, .article-body p a:hover, .footer a:hover { color: var(--accent-light); text-decoration: underline; } .footer { border-top: 2px solid var(--line); padding: 0; padding-bottom: env(safe-area-inset-bottom, 0px); color: #ffffff; font-size: 0.9rem; background: #0a0a0a; display: flex; align-items: center; min-height: calc(var(--bar-h) + 2px + env(safe-area-inset-bottom, 0px)); } .footer-inner { display: flex; justify-content: center; align-items: center; text-align: center; min-height: var(--bar-h); width: 100%; } @media (max-width: 980px) { .hero-wrap { grid-template-columns: 1fr; } .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .topbar { backdrop-filter: none; } .nav { grid-template-columns: auto auto; justify-content: space-between; gap: 1rem; } .logo { width: fit-content; max-width: fit-content; } .menu, .menu-cta { display: none; } .hamburger { display: inline-flex; grid-column: 2; justify-self: end; position: relative; z-index: 130; } .nav-toggle:checked + .hamburger span { background: transparent; } .nav-toggle:checked + .hamburger span::before { transform: translateY(6px) rotate(45deg); } .nav-toggle:checked + .hamburger span::after { transform: translateY(-6px) rotate(-45deg); } .mobile-menu-backdrop { display: none; position: fixed; top: var(--topbar-h); left: 0; right: var(--mobile-menu-width); bottom: 0; z-index: 110; margin: 0; padding: 0; border: 0; appearance: none; background: transparent; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; } html:has(#mobile-nav-toggle:checked) .mobile-menu-backdrop { display: block; } .mobile-menu { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: var(--mobile-menu-width); z-index: 120; margin: 0; padding: 0.75rem 1rem 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 0.25rem; background: rgba(0, 0, 0, 0.98); border: 0; border-left: 2px solid var(--line); border-radius: 0; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5); transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform 0.28s ease, visibility 0.28s ease; overflow-y: auto; } .mobile-menu a { display: block; padding: 0.65rem 0.75rem; border-radius: 8px; color: var(--text); font-size: 0.98rem; } .mobile-menu a:hover { background: rgba(255, 204, 0, 0.12); color: #ffffff; }
.mobile-menu a[aria-current="page"] { background: rgba(255, 204, 0, 0.12); color: var(--accent); } html:has(#mobile-nav-toggle:checked) .mobile-menu { transform: translateX(0); visibility: visible; pointer-events: auto; } .hero-wrap { gap: var(--space-3); padding-top: var(--page-gutter); padding-bottom: var(--section-gap); } .hero-card { order: 1; } .hero-content { order: 2; } .hero-content .hero-actions { order: 1; margin-bottom: 0; } .hero-content h1 { order: 2; margin-bottom: 0; } .hero-content p { order: 3; margin-bottom: 0; } body > .container:not(.nav):not(.hero-wrap), main > .container:not(.hero-wrap):not(.register-wrap) { padding-top: var(--section-gap); padding-bottom: var(--section-gap); gap: var(--space-3); } .article-grid, .strategy-list { grid-template-columns: 1fr; } .table-preview:not(.history-preview), .article-media { min-height: 185px; } .history-preview { aspect-ratio: auto; } .history-preview img { height: auto; object-fit: cover; } .register-wrap.hero-wrap { grid-template-columns: 1fr; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; gap: var(--space-3); } .register-left .hero-card { display: block; border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--bg-card); padding: 1rem; } .register-left .table-preview { width: 100%; max-width: none; height: auto; min-height: 185px; } .register-lead { max-width: none; } .register-btn { width: 100%; max-width: none; } } @media (max-width: 460px) { .btn { width: 100%; } .hero-actions { width: 100%; } }.article-grid .article-card.article-card-teaser{display:flex;flex-direction:column;height:100%;gap:var(--space-3)}.article-card-thumb-link{display:block;border-radius:10px;outline:none;text-decoration:none;color:inherit}.article-card-thumb-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.article-card-thumb-link .article-card-thumb{position:relative;aspect-ratio:1/1;width:100%;padding:0;box-sizing:border-box;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:#000000}.article-card-thumb-link .article-card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}.article-card-teaser .article-card-body{display:flex;flex-direction:column;gap:0.35rem;flex:1 1 auto;min-height:0}.article-card-teaser .article-card-body h3{margin-top:0;margin-bottom:0;color:var(--accent)}.article-card-teaser .article-card-body p{margin:0;flex:1 1 auto;color:var(--muted)}.article-card-read-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;width:100%;box-sizing:border-box;margin-top:auto;padding:0.7rem 1.2rem;font-weight:600;font-size:0.95rem;color:#0a0a0a;text-decoration:none;border:none;border-radius:12px;cursor:pointer;background:linear-gradient(135deg,#ffe033,#ffcc00);box-shadow:none;transition:filter .18s ease,transform .15s ease}.article-card-read-btn-label{display:inline-flex;align-items:center;line-height:1.25}.article-card-read-btn-arrow{display:inline-flex;flex-shrink:0;align-items:center;line-height:0}.article-card-read-btn-arrow svg{display:block}.article-card-read-btn:hover{filter:brightness(1.05);box-shadow:none}.article-card-read-btn:active{transform:translateY(1px)}.article-card-read-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.register-wrap{max-width:920px;margin-inline:auto;border-bottom:0}.register-left,.register-right{display:flex;flex-direction:column;gap:var(--space-3)}.register-left .register-intro{display:contents}.register-left .hero-card{order:0}.register-left .register-btn{order:1}.register-left .register-tag{order:2}.register-left .register-intro h1{order:3}.register-left .register-lead{order:4}.register-tag{margin:0;font-size:0.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--accent-light);font-weight:700}.register-intro h1{margin:0;font-size:clamp(1.75rem,5vw,2.4rem);line-height:1.15;color:var(--accent-light);background:linear-gradient(135deg,#fff176 0%,var(--accent-bright) 45%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.register-lead{margin:0;color:#ffffff;font-size:1rem;line-height:1.7;max-width:42ch}.register-btn{width:100%;padding:0.85rem 1.4rem;font-size:1.05rem}.register-divider{margin:0;border:0;border-top:2px solid var(--line-subtle);width:100%}.register-perks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.65rem}.register-perks li{position:relative;padding-left:1.45rem;color:#ffffff;font-size:0.98rem;line-height:1.55}.register-perks li::before{content:"";position:absolute;left:0;top:0.45rem;width:0.55rem;height:0.55rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(255,204,0,0.25)}.register-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.75rem}.register-steps li{display:flex;align-items:flex-start;gap:0.75rem;color:#ffffff;font-size:0.95rem;line-height:1.55}.register-step-num{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:999px;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--accent-light);font-size:0.82rem;font-weight:700;background:rgba(255,204,0,0.08)}.register-step-text{flex:1;padding-top:0.15rem}.register-note{margin:0;color:var(--muted);font-size:0.88rem;line-height:1.6}.register-support{margin-top:var(--space-3);border:2px solid var(--line);border-radius:14px;padding:1.15rem 1.2rem;background:linear-gradient(160deg,rgba(255,204,0,0.1) 0%,rgba(0,0,0,0.35) 100%);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:0.7rem}.register-support-label{margin:0;font-size:0.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--accent-light);font-weight:700}.register-support-title{margin:0;font-size:1.08rem;line-height:1.35;color:var(--accent-light);font-weight:700}.register-support-text{margin:0;color:#ffffff;font-size:0.92rem;line-height:1.65}.register-line-link{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;padding:0.75rem 1rem;border:2px solid #05a847;border-radius:12px;background:#06c755;color:#ffffff;font-weight:700;font-size:0.95rem;transition:background 0.2s ease,border-color 0.2s ease,filter 0.2s ease}.register-line-link:hover{background:#05b34c;border-color:#049940;color:#ffffff;filter:brightness(1.03)}.register-side-label{margin:0;font-size:0.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--accent-light);font-weight:700}.register-perks-panel{display:flex;flex-direction:column;gap:0.75rem;border:2px solid var(--line-subtle);border-radius:12px;padding:1rem 1.05rem;background:rgba(255,204,0,0.05)}@media (min-width:701px){.register-page{padding-top:var(--section-gap);padding-bottom:var(--section-gap)}.register-wrap.hero-wrap{padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:0;border:2px solid var(--line);border-radius:var(--radius);background:var(--bg-card);box-shadow:var(--shadow);overflow:hidden}.register-left{padding:1.75rem 2rem;border-right:2px solid var(--line-subtle);justify-content:flex-start}.register-right{padding:1.75rem 2rem;justify-content:flex-start;gap:var(--space-3)}.register-divider-mobile{display:none}.register-support{margin-top:0}.register-lead{max-width:none}.register-btn{width:100%;max-width:none;align-self:stretch}}