:root { --primary: #86e100; --black:#111111; --deep:#1C1C1C; --mid:#2B2B2B; --light:#F5F5F5; --white:#ffffff; --shadow:0 16px 40px rgba(0,0,0,.10); --radius:18px; }
* { box-sizing:border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color:var(--black); background:var(--light); line-height:1.65; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
header, .site-header { background:linear-gradient(135deg, var(--black), var(--deep)); color:#fff; position:sticky; top:0; z-index:50; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.container { width:min(1120px, calc(100% - 32px)); margin:0 auto; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; }
.logo img { width:118px; max-height:44px; object-fit:contain; }
nav { display:flex; gap:10px; align-items:center; }
nav a { padding:9px 12px; border-radius:999px; color:#f8f8f8; font-size:14px; }
nav a:hover { background:rgba(134,225,0,.16); color:var(--primary); }
.mobile-nav { width:100%; justify-content:space-between; background:rgba(255,255,255,.08); border-radius:999px; padding:5px; }
.desktop-nav { display:none; }
.hero, .banner { background:radial-gradient(circle at 90% 10%, rgba(134,225,0,.32), transparent 34%), linear-gradient(135deg, #101010, #202020); color:#fff; padding:44px 0; }
.banner-grid { display:grid; gap:28px; align-items:center; }
.hero h1, .banner h1 { font-size:34px; line-height:1.16; margin:0 0 16px; letter-spacing:-.03em; }
.hero p { color:#e8e8e8; margin:0 0 18px; }
.tag-row { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
.tag { background:rgba(134,225,0,.13); border:1px solid rgba(134,225,0,.42); color:#f6ffe9; padding:8px 12px; border-radius:999px; font-size:13px; }
section { padding:34px 0; }
.section-title { font-size:28px; margin:0 0 14px; letter-spacing:-.02em; }
.lead { font-size:17px; color:#444; }
.card { background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06); }
.card h2, .card h3 { margin-top:0; }
.grid { display:grid; gap:18px; }
.grid.two, .grid.three { grid-template-columns:1fr; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 20px; background:var(--primary); color:#102000; font-weight:800; border-radius:999px; box-shadow:0 10px 24px rgba(134,225,0,.28); border:none; }
.btn:hover { transform:translateY(-1px); }
.notice { border-left:5px solid var(--primary); background:#fff; border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.faq { display:grid; gap:14px; }
.faq-item { background:#fff; border-radius:16px; padding:18px; box-shadow:0 10px 28px rgba(0,0,0,.07); }
.faq-item h3 { margin:0 0 8px; }
.list { padding-left:20px; }
.cta-box { background:linear-gradient(135deg, rgba(134,225,0,.18), #fff); border:1px solid rgba(134,225,0,.28); border-radius:22px; padding:24px; }
.footer { background:linear-gradient(135deg, var(--deep), var(--black)); color:#f4f4f4; padding:36px 0 18px; margin-top:28px; }
.footer-grid { display:grid; gap:24px; }
.footer a { display:block; color:#f4f4f4; margin:8px 0; }
.footer-logo { width:120px; margin-bottom:12px; }
.copyright { border-top:1px solid rgba(255,255,255,.12); margin-top:24px; padding-top:16px; color:#d8d8d8; font-size:14px; }
@media (min-width: 768px) { .mobile-nav { display:none; } .desktop-nav { display:flex; } .banner-grid { grid-template-columns:1.15fr .85fr; } .hero h1, .banner h1 { font-size:46px; } .grid.two { grid-template-columns:repeat(2,1fr); } .grid.three { grid-template-columns:repeat(3,1fr); } .footer-grid { grid-template-columns:1.4fr .8fr 1.2fr; } }
@media (min-width: 1024px) { section { padding:46px 0; } .hero, .banner { padding:72px 0; } .card { padding:28px; } }