:root { --white: #ffffff; --blue: #2463eb; --blue-hover: #1d4ed8; --blue-soft: rgba(36, 99, 235, 0.08); --blue-muted: rgba(36, 99, 235, 0.14); --bg: #ffffff; --bg-alt: #f0f6ff; --surface: #ffffff; --surface-2: #f5f9ff; --text: #0f172a; --muted: #475569; --border: #e2e8f0; --shadow: 0 12px 40px rgba(36, 99, 235, 0.1); --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.08); --radius: 14px; --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--text); background: linear-gradient(180deg, var(--bg-alt) 0%, var(--white) 28%, var(--white) 100%); line-height: 1.6; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; color: var(--blue-hover); } img { max-width: 100%; height: auto; display: block; } .wrap { width: min(1120px, 92vw); margin-inline: auto; } .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(36, 99, 235, 0.06); } .site-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; flex-wrap: wrap; } .logo { font-weight: 700; letter-spacing: 0.04em; color: var(--text); text-decoration: none; } .logo span { color: var(--blue); } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 100; width: 44px; height: 44px; position: relative; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px auto; transition: all 0.3s ease; } .nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; } .nav a { color: var(--muted); font-size: 0.92rem; text-decoration: none; } .nav a:hover { color: var(--blue); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.15rem; border-radius: 10px; font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--blue); color: var(--white); border-color: var(--blue); } .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--white); } .btn-secondary { background: var(--white); border-color: var(--blue); color: var(--blue); } .btn-secondary:hover { background: var(--blue-soft); color: var(--blue-hover); } .hero { padding: 3.5rem 0 3rem; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; margin: 0 0 0.75rem; letter-spacing: -0.02em; color: var(--text); } .lead { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.5rem; max-width: 52ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .doc-note { font-size: 0.85rem; color: var(--muted); } .hero-visual { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-lg); max-width: 800px; margin-inline: auto; } .hero-visual img { border-radius: calc(var(--radius) - 6px); width: 100%; aspect-ratio: 1 / 1; object-fit: contain; } section { padding: 3rem 0; } section:nth-of-type(even) { background: var(--bg-alt); border-block: 1px solid var(--blue-muted); } .section-title { font-size: 1.5rem; margin: 0 0 0.35rem; color: var(--text); } .section-sub { color: var(--muted); margin: 0 0 1.75rem; max-width: 70ch; } .highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--text); } .card p { margin: 0; color: var(--muted); font-size: 0.95rem; } .gallery-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } .stage { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; min-height: 320px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .stage img { max-height: min(450px, 60vh); width: auto; margin-inline: auto; } .video-container { max-width: 800px; margin-inline: auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-lg); } .video-container video { width: 100%; border-radius: calc(var(--radius) - 6px); display: block; } .download-box { background: var(--bg-alt); border: 1px solid var(--blue-muted); border-radius: var(--radius); padding: 2.5rem; text-align: center; } .thumbs { display: flex; flex-direction: row; gap: 0.5rem; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; } .thumbs button { flex: 0 0 120px; scroll-snap-align: start; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: pointer; opacity: 0.85; transition: opacity 0.15s ease, border-color 0.15s ease; } .thumbs button:hover, .thumbs button.is-active { opacity: 1; border-color: var(--blue); } .thumbs img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; } .thumbs::-webkit-scrollbar { height: 6px; } .thumbs::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 10px; } .thumbs::-webkit-scrollbar-thumb { background: var(--blue-muted); border-radius: 10px; } .spec-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--white); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } table.spec { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--white); } table.spec th, table.spec td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); } table.spec thead th { width: 33.33%; color: var(--muted); font-weight: 600; } table.spec tbody th { width: 32%; color: var(--muted); font-weight: 500; } table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: none; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } } .site-footer { padding: 2rem 0; border-top: 1px solid var(--border); background: var(--bg-alt); color: var(--muted); font-size: 0.85rem; } .footer-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }