/* ========================================================= CardeX10 — Design tokens ========================================================= */ /* * Subsetted per-weight static fonts (see tools/subset_font.py) instead of * the ~2MB full variable font. Each file only contains the glyphs this * site actually uses, and the browser only downloads the specific weight * a piece of text needs — this cut the font payload from ~2MB to ~250KB * total, which matters a lot on slow mobile connections. */ @font-face { font-family: "Pretendard Variable"; src: url("/static/fonts/Pretendard-400.subset.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Pretendard Variable"; src: url("/static/fonts/Pretendard-500.subset.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Pretendard Variable"; src: url("/static/fonts/Pretendard-600.subset.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Pretendard Variable"; src: url("/static/fonts/Pretendard-700.subset.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Pretendard Variable"; src: url("/static/fonts/Pretendard-800.subset.woff2") format("woff2"); font-weight: 800; font-display: swap; } :root { --bg: #07070a; --bg-soft: #0b0b10; --surface: rgba(255, 255, 255, 0.045); --surface-strong: rgba(255, 255, 255, 0.08); --surface-border: rgba(255, 255, 255, 0.09); --text-primary: #f5f6f9; --text-secondary: rgba(245, 246, 249, 0.7); --text-tertiary: rgba(245, 246, 249, 0.46); --accent-cyan: #4fd1ff; --accent-indigo: #8b7bff; --accent-gradient: linear-gradient(90deg, var(--accent-cyan), var(--accent-indigo)); --accent-gradient-soft: linear-gradient(135deg, rgba(79, 209, 255, 0.16), rgba(139, 123, 255, 0.16)); --grade-1: #ef4444; --grade-4: #f59e0b; --grade-7: #a3e635; --grade-10: #22d3ee; --grade-gradient: linear-gradient(90deg, #ef4444 0%, #f59e0b 35%, #eab308 55%, #a3e635 75%, #22d3ee 100%); --radius-xl: 32px; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px; --container: 1180px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); /* Mobile Safari sometimes still allows horizontal rubber-banding/scroll when overflow-x: hidden is only set on — setting it on the root element too is the standard fix. max-width guards against any single element accidentally forcing the viewport wider than the screen. */ overflow-x: hidden; max-width: 100vw; } body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif; font-feature-settings: "tnum" 1; letter-spacing: -0.01em; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100vw; word-break: keep-all; position: relative; } a { color: inherit; text-decoration: none; } img, svg { display: block; } h1, h2, h3, h4, p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; } .icon { width: 1em; height: 1em; flex-shrink: 0; } .icon-sm { width: 16px; height: 16px; } .icon-md { width: 22px; height: 22px; } .icon-lg { width: 28px; height: 28px; } .icon-xl { width: 40px; height: 40px; } /* ========================================================= Progress bar + blob background ========================================================= */ .progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent-gradient); z-index: 1000; box-shadow: 0 0 12px rgba(79, 209, 255, 0.55); transition: width 0.08s linear; } .blob-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; } .blob-a { width: 620px; height: 620px; top: -220px; left: -160px; background: radial-gradient(circle at 30% 30%, rgba(79, 209, 255, 0.55), transparent 70%); animation: blobFloatA 26s ease-in-out infinite; } .blob-b { width: 560px; height: 560px; top: 12%; right: -220px; background: radial-gradient(circle at 60% 40%, rgba(139, 123, 255, 0.5), transparent 70%); animation: blobFloatB 32s ease-in-out infinite; } .blob-c { width: 480px; height: 480px; top: 55%; left: 8%; background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.4), transparent 70%); animation: blobFloatC 30s ease-in-out infinite; } .blob-d { width: 520px; height: 520px; bottom: -240px; right: 6%; background: radial-gradient(circle at 50% 50%, rgba(163, 230, 53, 0.22), transparent 70%); animation: blobFloatA 38s ease-in-out infinite reverse; } @keyframes blobFloatA { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, 40px) scale(1.08); } 66% { transform: translate(-30px, 70px) scale(0.94); } } @keyframes blobFloatB { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-70px, 50px) scale(1.05); } 70% { transform: translate(20px, -40px) scale(0.96); } } @keyframes blobFloatC { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -60px) scale(1.1); } } /* filter: blur(90px) animated forever on 4 large layers is a real GPU/CPU cost — fine on a desktop GPU, but can noticeably heat up and drain a phone since it never stops for as long as the tab is open. Mobile gets a much cheaper, static version: no continuous scale/translate recompute, smaller blur radius, and only 2 layers. */ @media (max-width: 860px) { .blob { animation: none; filter: blur(36px); } .blob-c, .blob-d { display: none; } } @media (prefers-reduced-motion: reduce) { .blob { animation: none; } html { scroll-behavior: auto; } } /* ========================================================= Header / Nav ========================================================= */ .site-header { position: sticky; top: 0; z-index: 900; padding: 6px 0; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease); border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(7, 7, 10, 0.72); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--surface-border); } .site-header__inner { max-width: var(--container); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 28px; flex-wrap: nowrap; } .site-header__actions { flex-shrink: 0; } .nav-toggle { flex-shrink: 0; margin-left: auto; } .brand__mark { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; } .brand__x10 { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .site-nav { display: flex; gap: 26px; margin-left: 12px; flex: 1; } .site-nav a { font-size: 14px; color: var(--text-secondary); transition: color 0.2s; white-space: nowrap; } .site-nav a:hover { color: var(--text-primary); } .site-header__actions { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 6px; min-width: 44px; min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .icon-menu-close { display: none; } .nav-toggle.is-open .icon-menu-open { display: none; } .nav-toggle.is-open .icon-menu-close { display: block; } .mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 10px 28px 22px; border-top: 1px solid var(--surface-border); } .mobile-nav a { padding: 12px 4px; font-size: 15px; color: var(--text-secondary); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .lang-toggle-mobile { display: flex !important; align-items: center; gap: 8px; color: var(--accent-cyan) !important; } .mobile-nav .btn { margin-top: 10px; justify-content: center; } .mobile-nav.is-open { display: flex; } /* ========================================================= Buttons ========================================================= */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--accent-gradient); color: #06070a; box-shadow: 0 8px 24px -8px rgba(79, 209, 255, 0.55); } .btn--primary:hover { box-shadow: 0 10px 30px -6px rgba(79, 209, 255, 0.7); } .btn--ghost { background: var(--surface); border-color: var(--surface-border); color: var(--text-secondary); } .btn--ghost:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.2); } .btn--lg { padding: 15px 28px; font-size: 15px; } .btn--block { width: 100%; justify-content: center; } /* ========================================================= Sections / typography ========================================================= */ main { position: relative; z-index: 1; } .section { padding: 128px 0; position: relative; } .section--tight { padding: 84px 0; } .section-head { max-width: 720px; margin: 0 0 56px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-cyan); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gradient); } .section-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; } .section-desc { margin-top: 16px; font-size: 17px; color: var(--text-secondary); line-height: 1.7; } .gradient-text { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================= Reveal-on-scroll ========================================================= */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-delay-1.in-view { transition-delay: 0.08s; } .reveal-delay-2.in-view { transition-delay: 0.16s; } .reveal-delay-3.in-view { transition-delay: 0.24s; } .reveal-delay-4.in-view { transition-delay: 0.32s; } /* ========================================================= Glass card ========================================================= */ .glass-card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); backdrop-filter: blur(20px); } /* ========================================================= Hero ========================================================= */ .hero { padding: 96px 0 60px; min-height: 92vh; display: flex; align-items: center; } .hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-border); font-size: 13px; color: var(--text-secondary); margin-bottom: 26px; } .hero__badge strong { color: var(--accent-cyan); font-weight: 700; } .hero h1 { font-size: clamp(38px, 5.6vw, 68px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.14; } .hero__desc { margin-top: 26px; font-size: 18px; color: var(--text-secondary); max-width: 520px; line-height: 1.75; } .hero__psa-hint { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-border); font-size: 13px; color: var(--text-secondary); max-width: 100%; transition: border-color 0.2s, background 0.2s, transform 0.2s; } .hero__psa-hint:hover { border-color: rgba(79, 209, 255, 0.4); background: var(--accent-gradient-soft); transform: translateY(-1px); } .hero__psa-hint strong { flex-shrink: 0; color: var(--accent-cyan); font-weight: 700; } .hero__psa-hint span { white-space: normal; } .hero__psa-hint svg { flex-shrink: 0; color: var(--text-tertiary); } .hero__actions { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; } .hero__meta { margin-top: 52px; display: flex; gap: 40px; flex-wrap: wrap; } .hero__meta-item .num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .hero__meta-item .label { margin-top: 4px; font-size: 13px; color: var(--text-tertiary); } .hero__patent-badge { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 10px 18px; border-radius: 999px; background: var(--accent-gradient-soft); border: 1px solid rgba(139, 123, 255, 0.4); font-size: 13px; color: var(--text-secondary); } .hero__patent-badge .icon { color: var(--accent-cyan); flex-shrink: 0; } .hero__patent-badge strong { color: #fff; font-weight: 800; } .hero__visual { position: relative; display: flex; justify-content: center; } /* Certificate slab (shared: hero preview + demo pages) */ .cert-card { width: 100%; max-width: 380px; border-radius: var(--radius-xl); padding: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid var(--surface-border); backdrop-filter: blur(24px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); position: relative; overflow: hidden; } .cert-card::before { content: ""; position: absolute; inset: 0; background: var(--accent-gradient-soft); opacity: 0.5; pointer-events: none; } .cert-card__top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; } .cert-card__brand { font-size: 13px; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } .cert-card__badge { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(34, 211, 238, 0.14); color: var(--accent-cyan); font-weight: 700; } .cert-card__gauge { position: relative; z-index: 1; margin: 26px auto 6px; width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient( from -90deg, var(--grade-1) 0deg, var(--grade-4) calc(var(--grade-deg, 320deg) * 0.35), var(--grade-7) calc(var(--grade-deg, 320deg) * 0.7), var(--grade-10) var(--grade-deg, 320deg), rgba(255, 255, 255, 0.06) var(--grade-deg, 320deg) 360deg ); } .cert-card__gauge::before { content: ""; position: absolute; width: 156px; height: 156px; border-radius: 50%; background: #0a0a10; } .cert-card__gauge-inner { position: relative; text-align: center; } .cert-card__gauge-num { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .cert-card__gauge-label { margin-top: 4px; font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.04em; } .cert-card__model { position: relative; z-index: 1; text-align: center; margin-top: 8px; } .cert-card__model .name { font-size: 17px; font-weight: 700; } .cert-card__model .meta { margin-top: 4px; font-size: 13px; color: var(--text-tertiary); } .cert-card__foot { position: relative; z-index: 1; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--surface-border); display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.02em; } .hero__visual-badge { position: absolute; bottom: -18px; left: -18px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(10, 10, 15, 0.9); border: 1px solid var(--surface-border); font-size: 13px; font-weight: 600; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); } .hero__visual-badge .icon { color: var(--accent-cyan); } /* ========================================================= Problem section ========================================================= */ .card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .problem-card { padding: 30px; border-radius: var(--radius-lg); } .problem-card .icon-wrap { width: 46px; height: 46px; border-radius: 14px; background: rgba(239, 68, 68, 0.12); color: #f87171; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .problem-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; } .problem-card p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.7; } /* ========================================================= Vision quote ========================================================= */ .vision { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; } .vision__quote { font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.5; letter-spacing: -0.01em; } .vision__quote span { color: var(--text-tertiary); } .vision__points { display: flex; flex-direction: column; gap: 18px; } .vision__point { display: flex; gap: 16px; padding: 20px; border-radius: var(--radius-md); } .vision__point .icon-wrap { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-gradient-soft); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .vision__point h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; } .vision__point p { font-size: 14px; color: var(--text-secondary); line-height: 1.65; } /* ========================================================= Pipeline ========================================================= */ .pipeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .pipeline::before { content: ""; position: absolute; top: 27px; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, var(--surface-border) 10%, var(--surface-border) 90%, transparent); z-index: 0; } .pipeline-step { position: relative; z-index: 1; padding: 26px 20px; border-radius: var(--radius-lg); text-align: left; } .pipeline-step .step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-gradient); color: #06070a; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; margin-bottom: 18px; } .pipeline-step h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; } .pipeline-step p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; } /* ========================================================= Grade scale system ========================================================= */ .grade-system { display: grid; grid-template-columns: 1fr; gap: 56px; } .grade-scale-bar { position: relative; padding: 34px; border-radius: var(--radius-xl); } .grade-scale-bar__track { height: 18px; border-radius: 999px; background: var(--grade-gradient); position: relative; } .grade-scale-bar__ticks { display: flex; justify-content: space-between; margin-top: 14px; } .grade-scale-bar__ticks span { font-size: 12.5px; color: var(--text-tertiary); font-weight: 600; width: 10%; text-align: center; } .grade-scale-bar__labels { display: flex; justify-content: space-between; margin-top: 20px; font-size: 13px; color: var(--text-secondary); } .grade-scale-bar__labels strong { color: var(--text-primary); } .grade-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .grade-item { padding: 26px; border-radius: var(--radius-lg); } .grade-item .icon-wrap { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-gradient-soft); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .grade-item h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .grade-item p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.65; } .grade-emphasis { margin-top: 20px; padding: 26px 28px; border-radius: var(--radius-lg); display: flex; align-items: flex-start; gap: 18px; background: var(--accent-gradient-soft); } .grade-emphasis .icon-wrap { width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .grade-emphasis strong { font-size: 15.5px; font-weight: 700; } .grade-emphasis p { margin-top: 8px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; } .grade-emphasis a { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--accent-cyan); text-decoration: none; } .grade-emphasis a:hover { text-decoration: underline; } @media (max-width: 560px) { .grade-emphasis { flex-direction: column; } } /* ========================================================= PSA mechanism section ========================================================= */ .psa-section { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .psa-quote { padding: 40px; border-radius: var(--radius-xl); position: relative; } .psa-quote .quote-mark { font-size: 60px; line-height: 1; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .psa-quote p { font-size: 22px; font-weight: 700; line-height: 1.5; margin-top: 10px; } .psa-quote .quote-attr { margin-top: 18px; font-size: 13.5px; color: var(--text-tertiary); } .quote-brand { font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; } .quote-brand__tm { font-size: 0.4em; font-weight: 700; margin-left: 1px; color: var(--text-tertiary); vertical-align: super; } .psa-stats { display: flex; flex-direction: column; gap: 20px; } .psa-stat { display: flex; align-items: baseline; gap: 14px; padding: 18px 22px; border-radius: var(--radius-md); } .psa-stat .num { font-size: 26px; font-weight: 800; white-space: nowrap; } .psa-stat .desc { font-size: 13.5px; color: var(--text-secondary); } /* ========================================================= Ecosystem accordion ========================================================= */ .ecosystem-tabs { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; } .ecosystem-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-border); color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .ecosystem-tab.is-active { background: var(--accent-gradient); color: #06070a; border-color: transparent; } .ecosystem-panels { position: relative; } .ecosystem-panel { display: none; grid-template-columns: 0.85fr 1.15fr; gap: 40px; padding: 38px; border-radius: var(--radius-xl); } .ecosystem-panel.is-active { display: grid; } .ecosystem-panel__head .icon-wrap { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-gradient-soft); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .ecosystem-panel__head h3 { font-size: 22px; font-weight: 800; margin-bottom: 12px; } .ecosystem-panel__head p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.7; } .ecosystem-panel__list { display: flex; flex-direction: column; gap: 16px; } .ecosystem-panel__list li { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--surface-border); font-size: 14px; color: var(--text-secondary); line-height: 1.6; } .ecosystem-panel__list li strong { color: var(--text-primary); } .ecosystem-panel__list .icon-wrap { width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ========================================================= Scope of application + Partnership revenue ========================================================= */ .scope-block { margin-bottom: 60px; } .scope-block__label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; } .scope-block__label .num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-gradient); color: #06070a; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } .scope-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .scope-item { padding: 26px 18px; border-radius: var(--radius-lg); text-align: center; } .scope-item .icon-wrap { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-gradient-soft); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .scope-item h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; } .scope-item p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; } .partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; } .partner-card { padding: 24px; border-radius: var(--radius-lg); } .partner-card .icon-wrap { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-gradient-soft); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .partner-card h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; } .partner-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.65; } .partner-card .revenue-tag { display: inline-flex; margin-top: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(34, 211, 238, 0.1); color: var(--accent-cyan); font-size: 11.5px; font-weight: 700; } /* ========================================================= Roadmap ========================================================= */ .roadmap-note { padding: 22px 26px; border-radius: var(--radius-lg); margin-bottom: 44px; display: flex; gap: 16px; align-items: flex-start; } .roadmap-note .icon-wrap { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-gradient-soft); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .roadmap-note p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.7; } .roadmap-note strong { color: var(--text-primary); } .roadmap-note .source-line { display: block; margin-top: 8px; font-size: 11.5px; color: var(--text-tertiary); } .roadmap { position: relative; display: flex; flex-direction: column; gap: 0; } .roadmap::before { content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, var(--accent-cyan), var(--accent-indigo), transparent); } .roadmap-phase { position: relative; padding: 0 0 44px 66px; } .roadmap-phase:last-child { padding-bottom: 0; } .roadmap-phase::before { content: ""; position: absolute; left: 14px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent-cyan); } .roadmap-phase .phase-tag { font-size: 12.5px; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 0.05em; } .roadmap-phase h3 { margin-top: 8px; font-size: 20px; font-weight: 800; } .roadmap-phase ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .roadmap-phase li { font-size: 14.5px; color: var(--text-secondary); padding-left: 18px; position: relative; line-height: 1.65; } .roadmap-phase li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); } /* ========================================================= Market stats ========================================================= */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat-card { padding: 30px 26px; border-radius: var(--radius-lg); } .stat-card .num { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 4px; } .stat-card .num .suffix { font-size: 20px; color: var(--accent-cyan); } .stat-card .label { margin-top: 10px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; } .stat-card .source { margin-top: 14px; font-size: 11.5px; color: var(--text-tertiary); } .psa-comparison { margin-top: 40px; padding: 30px; border-radius: var(--radius-lg); display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .psa-comparison .growth-line { flex: 1; min-width: 240px; } .growth-bars { display: flex; align-items: flex-end; gap: 10px; height: 90px; } .growth-bars .bar { flex: 1; border-radius: 6px 6px 0 0; background: rgba(139, 123, 255, 0.34); border: 1px solid rgba(139, 123, 255, 0.4); border-bottom: none; position: relative; } .growth-bars .bar.is-peak { background: var(--accent-gradient); border: none; } .growth-bars .bar span { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--text-tertiary); } /* ========================================================= CTA banner ========================================================= */ .cta-banner { border-radius: var(--radius-xl); padding: 70px 60px; text-align: center; position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(79, 209, 255, 0.12), rgba(139, 123, 255, 0.1)); border: 1px solid var(--surface-border); } .cta-banner h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; } .cta-banner p { margin-top: 16px; font-size: 16px; color: var(--text-secondary); max-width: 560px; margin-left: auto; margin-right: auto; } .cta-banner .hero__actions { justify-content: center; margin-top: 34px; } /* ========================================================= Footer ========================================================= */ .site-footer { border-top: 1px solid var(--surface-border); padding: 64px 0 28px; position: relative; z-index: 1; } .footer__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; } .footer__brand p { margin-top: 14px; font-size: 13.5px; color: var(--text-tertiary); max-width: 320px; line-height: 1.7; } .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .footer__col h4 { font-size: 13px; color: var(--text-tertiary); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em; } .footer__col a, .footer__col p, .footer__col button { display: block; font-size: 14px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.6; } .footer__col button { background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit; } .footer__col a:hover, .footer__col button:hover { color: var(--text-primary); } .footer__legal { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--surface-border); display: flex; justify-content: space-between; font-size: 12px; color: var(--text-tertiary); flex-wrap: wrap; gap: 8px; } /* ========================================================= Demo pages — shared ========================================================= */ .demo-shell { padding: 56px 0 100px; min-height: 80vh; } .demo-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; } .demo-header h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; } .demo-header p { margin-top: 10px; color: var(--text-secondary); font-size: 14.5px; max-width: 480px; } .demo-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-border); font-size: 12.5px; color: var(--text-tertiary); } .search-filters { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; } .filter-chip { padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-border); font-size: 13.5px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; } .filter-chip.is-active { background: var(--accent-gradient); color: #06070a; border-color: transparent; font-weight: 700; } .filter-chip--tag { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .filter-chip--tag.is-active { background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.5); color: #34d399; } .car-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .car-card { display: block; padding: 26px; border-radius: var(--radius-lg); transition: transform 0.25s var(--ease), border-color 0.25s; } .car-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); } .car-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .car-card__grade { width: 56px; height: 56px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--accent-gradient-soft); flex-shrink: 0; } .car-card__grade .g-num { font-size: 22px; font-weight: 800; line-height: 1; } .car-card__grade .g-max { font-size: 10px; color: var(--text-tertiary); } .car-card__category { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; } .car-card__tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 11px; border-radius: 999px; background: rgba(52, 211, 153, 0.14); border: 1px solid rgba(52, 211, 153, 0.35); color: #34d399; font-size: 11.5px; font-weight: 700; } .car-card__title { font-size: 18px; font-weight: 700; } .car-card__meta { margin-top: 6px; font-size: 13px; color: var(--text-tertiary); } .car-card__price { margin-top: 18px; font-size: 20px; font-weight: 800; } .car-card__price small { font-size: 12px; color: var(--text-tertiary); font-weight: 500; margin-left: 4px; } .car-card__footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--surface-border); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-secondary); } .car-card__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-cyan); font-weight: 700; } /* Certificate page */ .sale-status { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: var(--radius-lg); margin-bottom: 26px; flex-wrap: wrap; } .sale-status .icon-wrap { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sale-status__body { flex: 1 1 240px; } .sale-status__body h4 { font-size: 16px; margin-bottom: 4px; } .sale-status__body p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; } .sale-status--active { background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.3); } .sale-status--active .icon-wrap { background: rgba(52, 211, 153, 0.18); color: #34d399; } .sale-status--active h4 { color: #34d399; } .sale-status--inactive { background: var(--surface); border: 1px solid var(--surface-border); } .sale-status--inactive .icon-wrap { background: var(--surface-strong); color: var(--text-tertiary); } .certificate-shell { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: flex-start; } .certificate-shell .cert-card { max-width: none; position: sticky; top: 110px; } .cert-detail { display: flex; flex-direction: column; gap: 20px; } .cert-detail-card { padding: 28px; border-radius: var(--radius-lg); } .cert-detail-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .cert-detail-card__head h3 { font-size: 16px; font-weight: 700; } .score-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); } .score-row:first-of-type { border-top: none; } .score-row .icon-wrap { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .score-row__body { flex: 1; } .score-row__top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; margin-bottom: 6px; } .score-row__top .score-num { color: var(--accent-cyan); } .score-row__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .score-row__bar-fill { height: 100%; border-radius: 999px; background: var(--grade-gradient); } .score-row__desc { margin-top: 8px; font-size: 13px; color: var(--text-secondary); } .info-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .info-list .item .k { font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; } .info-list .item .v { font-size: 14.5px; font-weight: 600; } .verify-callout { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--accent-gradient-soft); border: 1px solid var(--surface-border); } .verify-callout .icon-wrap { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .verify-callout p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; } .verify-callout a { color: var(--accent-cyan); font-weight: 700; } /* Verify page */ .verify-shell { max-width: 620px; margin: 0 auto; text-align: center; } .verify-status { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: rgba(34, 211, 238, 0.12); color: var(--accent-cyan); font-weight: 700; font-size: 14px; margin-bottom: 30px; } .verify-checklist { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; text-align: left; } .verify-checklist .item { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--radius-md); } .verify-checklist .item .icon-wrap { width: 32px; height: 32px; border-radius: 10px; background: rgba(34, 211, 238, 0.12); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .verify-checklist .item p { font-size: 14px; color: var(--text-secondary); } .verify-checklist .item strong { color: var(--text-primary); } .not-found-shell { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1080px) { .hero__inner { grid-template-columns: 1fr; } /* Keep the natural DOM order (headline/copy, then the visual) on narrow screens. Forcing the visual to the top via `order: -1` meant mobile visitors saw the certificate/decorative card before any headline or context — confusing on first load. Desktop's side-by-side layout is unaffected since this only applies once the grid collapses to 1 column. */ .vision { grid-template-columns: 1fr; } .psa-section { grid-template-columns: 1fr; } .certificate-shell { grid-template-columns: 1fr; } .certificate-shell .cert-card { position: static; margin: 0 auto 20px; max-width: 380px; } .footer__inner { grid-template-columns: 1fr; } } @media (max-width: 860px) { .site-nav { display: none; } .site-header__actions .btn--ghost { display: none; } /* Keep the mobile header row to just logo + hamburger. The pill CTA is already duplicated inside the mobile-nav dropdown, and squeezing a long Korean/English label into this narrow row is what pushes the hamburger toward (or past) the edge of the screen on some real devices. */ .site-header__actions .btn--primary { display: none; } .nav-toggle { display: inline-flex; } .card-grid-3 { grid-template-columns: 1fr; } .pipeline { grid-template-columns: 1fr; } .pipeline::before { display: none; } .grade-items { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .scope-grid { grid-template-columns: repeat(2, 1fr); } .ecosystem-panel { grid-template-columns: 1fr; } .car-grid { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: 1fr; gap: 22px; } .section { padding: 84px 0; } /* .site-header is `position: sticky`, not fixed/overlay — it already reserves its own space in normal flow. The old 130px top padding here was leftover clearance for an overlay-style header that no longer exists, so it just left a big dead gap between the logo bar and the headline on phones. A modest 32px keeps some breathing room without the "something's broken" look. */ .hero { padding: 32px 0 50px; min-height: auto; } /* Long CTA labels (esp. English) must wrap instead of forcing horizontal overflow on narrow screens — .btn defaults to white-space: nowrap. */ .btn--lg { white-space: normal; text-align: center; } } @media (max-width: 560px) { .container { padding: 0 20px; } .site-header__inner { padding: 12px 20px; } .grade-items { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } .hero__meta { gap: 26px; } .cta-banner { padding: 46px 24px; } } /* ========================================================= Contact modal ========================================================= */ body.modal-open { overflow: hidden; } .modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 5, 8, 0.7); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease); } .modal-overlay.is-open { opacity: 1; visibility: visible; } .modal-panel { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 40px; background: var(--bg-soft); transform: translateY(14px) scale(0.97); opacity: 0; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .modal-overlay.is-open .modal-panel { transform: translateY(0) scale(1); opacity: 1; } .modal-close { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-border); color: var(--text-secondary); cursor: pointer; transition: color 0.2s, border-color 0.2s; } .modal-close:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.2); } .modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; margin-bottom: 18px; background: var(--accent-gradient-soft); border: 1px solid rgba(79, 209, 255, 0.3); color: var(--accent-cyan); } .modal-icon--success { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.35); color: #34d399; } .modal-body h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; } .modal-desc { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 26px; } .modal-success { text-align: center; } .modal-success .modal-icon { margin-left: auto; margin-right: auto; } .contact-form__hp { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } .contact-form__field { display: block; margin-bottom: 16px; } .contact-form__field span { display: block; font-size: 13px; color: var(--text-tertiary); margin-bottom: 7px; } .contact-form__field em { color: var(--accent-cyan); font-style: normal; } .contact-form__field input, .contact-form__field textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--surface-border); color: var(--text-primary); font-size: 14.5px; font-family: inherit; transition: border-color 0.2s, background 0.2s; } .contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: var(--text-tertiary); } .contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; border-color: rgba(79, 209, 255, 0.5); background: var(--surface-strong); } .contact-form__field textarea { resize: vertical; min-height: 110px; line-height: 1.6; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .contact-form__hint { margin: -8px 0 16px; font-size: 12.5px; color: var(--text-tertiary); } .contact-form__error { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; font-size: 13.5px; } .contact-form__submit { margin-top: 6px; } .contact-form__submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } @media (max-width: 560px) { .modal-panel { padding: 30px 22px; } .contact-form__row { grid-template-columns: 1fr; gap: 0; } } /* ========================================================= Opportunities page — hero ========================================================= */ .opp-hero { padding: 150px 0 40px; } @media (max-width: 860px) { /* Same overlay-clearance leftover as .hero: .site-header is sticky and already reserves its own space, so this just needs breathing room, not 150px of dead space above the back-link on phones. */ .opp-hero { padding: 32px 0 40px; } } .opp-back-link { margin-bottom: 22px; } .opp-back-link .icon-flip { transform: scaleX(-1); } .opp-hero .eyebrow { justify-content: flex-start; display: flex; } .opp-hero h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; max-width: 760px; margin-top: 14px; } .opp-hero .section-desc { max-width: 680px; margin-top: 18px; } .opp-disclaimer { display: flex; gap: 10px; align-items: flex-start; margin-top: 26px; padding: 14px 18px; border-radius: var(--radius-md); background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); color: var(--text-secondary); font-size: 13.5px; line-height: 1.65; max-width: 680px; } .opp-disclaimer .icon { flex-shrink: 0; margin-top: 2px; color: #f59e0b; } /* ========================================================= Opportunities hero — decorative constellation visual ========================================================= */ .opp-hero__visual { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; margin: 0 auto; pointer-events: none; overflow: hidden; /* branches rotate around an off-center pivot and would otherwise poke outside their box */ } .opp-hero__glow { position: absolute; top: 58%; left: 38%; width: 60%; height: 60%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(79, 209, 255, 0.2), transparent 70%); filter: blur(10px); border-radius: 999px; } .opp-hero__branch { position: absolute; inset: 0; transform-origin: 38% 58%; animation: branchSway var(--dur, 6s) ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes branchSway { 0%, 100% { transform: rotate(calc(var(--rot, 4deg) * -1)); } 50% { transform: rotate(var(--rot, 4deg)); } } .opp-hero__line { position: absolute; height: 1px; background: linear-gradient(90deg, rgba(79, 209, 255, 0.55), rgba(79, 209, 255, 0.08)); transform-origin: 0 50%; background-size: 200% 100%; animation: lineFlow 5s linear infinite; } .opp-hero__line--thin { height: 1px; background: linear-gradient(90deg, rgba(148, 163, 184, 0.4), rgba(148, 163, 184, 0.04)); opacity: 0.85; } @keyframes lineFlow { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } .opp-hero__node { position: absolute; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-border); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; color: var(--accent-cyan); box-shadow: 0 0 22px rgba(79, 209, 255, 0.22); z-index: 2; } .opp-hero__node--hub { width: 15%; background: var(--accent-gradient); color: #06070a; border-color: transparent; box-shadow: 0 0 60px rgba(79, 209, 255, 0.4); z-index: 3; } .opp-hero__node--hub .icon { width: 34%; height: 34%; } .opp-hero__dot { position: absolute; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 999px; background: radial-gradient(circle at 35% 30%, rgba(196, 235, 255, 0.95), rgba(79, 209, 255, 0.5) 45%, rgba(79, 209, 255, 0) 78%); box-shadow: 0 0 14px rgba(79, 209, 255, 0.5); z-index: 1; } .opp-hero__dot--violet { background: radial-gradient(circle at 35% 30%, rgba(228, 214, 255, 0.95), rgba(139, 92, 246, 0.55) 45%, rgba(139, 92, 246, 0) 78%); box-shadow: 0 0 14px rgba(139, 92, 246, 0.5); } @media (max-width: 1080px) { .opp-hero__visual { display: none; } } /* ========================================================= Projection chart ========================================================= */ .projection-panel { padding: 40px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; } .projection-chart { display: flex; align-items: flex-end; gap: 18px; height: 280px; padding: 0 4px; } .projection-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; } .projection-bar-total { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; white-space: nowrap; } .projection-bar { width: 100%; max-width: 56px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 10px 10px 4px 4px; overflow: hidden; background: var(--surface); border: 1px solid var(--surface-border); } .projection-bar__derivative { background: linear-gradient(180deg, var(--accent-indigo), rgba(139, 123, 255, 0.7)); } .projection-bar__core { background: linear-gradient(180deg, var(--accent-cyan), rgba(79, 209, 255, 0.55)); } .projection-bar-label { margin-top: 12px; font-size: 13px; color: var(--text-tertiary); font-weight: 600; } .projection-legend { display: flex; gap: 20px; margin-top: 22px; flex-wrap: wrap; } .projection-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); } .projection-legend .dot { width: 10px; height: 10px; border-radius: 999px; } .projection-legend .dot--core { background: var(--accent-cyan); } .projection-legend .dot--derivative { background: var(--accent-indigo); } .projection-side h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; } .projection-assumptions { list-style: none; display: flex; flex-direction: column; gap: 12px; } .projection-assumptions li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; padding-bottom: 12px; border-bottom: 1px solid var(--surface-border); } .projection-assumptions li:last-child { border-bottom: none; padding-bottom: 0; } .projection-assumptions .icon { flex-shrink: 0; margin-top: 2px; color: var(--accent-cyan); } .projection-share-note { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--accent-gradient-soft); border: 1px solid rgba(79, 209, 255, 0.25); font-size: 13px; color: var(--text-secondary); line-height: 1.6; } .projection-share-note strong { color: var(--text-primary); } /* ========================================================= Orbit diagram ========================================================= */ .orbit-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .orbit { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto; } .orbit__ring { position: absolute; inset: 8%; border: 1px dashed var(--surface-border); border-radius: 999px; } .orbit__line { position: absolute; top: 50%; left: 50%; height: 1px; width: 38%; background: linear-gradient(90deg, rgba(79, 209, 255, 0.4), transparent); transform-origin: 0 50%; transform: rotate(var(--angle, 0deg)); z-index: 1; } .orbit__hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 34%; aspect-ratio: 1 / 1; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 10px; background: var(--bg-soft); border: 1px solid rgba(79, 209, 255, 0.35); box-shadow: 0 0 0 1px rgba(79, 209, 255, 0.08), 0 20px 50px -20px rgba(79, 209, 255, 0.4); } .orbit__hub .icon { width: 26px; height: 26px; color: var(--accent-cyan); } .orbit__hub-title { font-size: 13px; font-weight: 800; line-height: 1.3; } .orbit__hub-sub { font-size: 10.5px; color: var(--text-tertiary); } .orbit__node { position: absolute; top: calc(50% + var(--y) * 1%); left: calc(50% + var(--x) * 1%); transform: translate(-50%, -50%); z-index: 2; width: 21%; aspect-ratio: 1 / 1; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--surface); border: 1px solid var(--surface-border); color: var(--text-secondary); cursor: pointer; text-align: center; transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s; } .orbit__node-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; animation: orbitFloat var(--dur, 5.5s) ease-in-out infinite; animation-delay: var(--delay, 0s); will-change: transform; } .orbit__node .icon { width: 18px; height: 18px; } .orbit__node span { font-size: 10px; font-weight: 700; line-height: 1.25; } .orbit__node:hover { border-color: rgba(79, 209, 255, 0.5); color: var(--text-primary); } .orbit__node.is-active { background: var(--accent-gradient); border-color: transparent; color: #06070a; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 10px 30px -10px rgba(79, 209, 255, 0.6); } @keyframes orbitFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .orbit-detail { padding: 34px; min-height: 300px; } .orbit-detail__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .orbit-detail__head .icon-wrap { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-gradient-soft); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .orbit-detail__head h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .orbit-detail__head p { font-size: 13.5px; color: var(--text-secondary); } .orbit-detail__list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .orbit-detail__list li { display: flex; gap: 10px; font-size: 14px; color: var(--text-secondary); line-height: 1.65; } .orbit-detail__list .icon { flex-shrink: 0; margin-top: 3px; color: var(--accent-cyan); } .orbit-detail__panel { display: none; } .orbit-detail__panel.is-active { display: block; animation: fadeInUp 0.35s var(--ease); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .orbit-hint { text-align: center; font-size: 13px; color: var(--text-tertiary); margin-top: 18px; } @media (prefers-reduced-motion: reduce) { .orbit__node-inner { animation: none; } } @media (max-width: 980px) { .projection-panel { grid-template-columns: 1fr; gap: 30px; padding: 30px; } .orbit-wrap { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 700px) { .orbit { max-width: 380px; } .orbit__node span { display: none; } .orbit__hub-sub { display: none; } } @media (max-width: 560px) { .projection-chart { height: 220px; gap: 10px; } .projection-bar-total { font-size: 11px; } .orbit { max-width: 300px; } .orbit__node { width: 24%; } .orbit__hub { width: 38%; } } .diag-jump-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: var(--accent-gradient); box-shadow: 0 8px 24px rgba(79, 209, 255, 0.28); text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); animation: diagJumpPulse 2.4s ease-in-out infinite; } .diag-jump-link svg { animation: diagJumpBounce 1.6s ease-in-out infinite; } .diag-jump-link:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(79, 209, 255, 0.4); } @keyframes diagJumpPulse { 0%, 100% { box-shadow: 0 8px 24px rgba(79, 209, 255, 0.28); } 50% { box-shadow: 0 8px 30px rgba(79, 209, 255, 0.5); } } @keyframes diagJumpBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } @media (prefers-reduced-motion: reduce) { .diag-jump-link, .diag-jump-link svg { animation: none; } } /* Diagnostic car-map: 30+ point checklist visualized as hotspots on a top-down car diagram (certificate page). */ .diag-map { margin-top: 24px; padding: 32px; } .diag-map__head { margin-bottom: 24px; } .diag-map__head h3 { font-size: 20px; font-weight: 700; } .diag-map__desc { margin-top: 10px; max-width: 640px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); } .diag-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; } .diag-legend__item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-tertiary); } .diag-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; } .diag-dot--excellent { background: var(--grade-10); } .diag-dot--good { background: var(--grade-7); } .diag-dot--attention { background: var(--grade-4); } .diag-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; } .diag-car { position: relative; width: 100%; max-width: 300px; aspect-ratio: 300 / 480; margin: 0 auto; } .diag-car__svg { position: absolute; inset: 0; width: 100%; height: 100%; } .diag-car__body { fill: var(--surface); stroke: var(--surface-border); stroke-width: 2; } .diag-car__glass { fill: rgba(79, 209, 255, 0.08); stroke: rgba(79, 209, 255, 0.25); stroke-width: 1.5; } .diag-car__roof { fill: rgba(255, 255, 255, 0.03); stroke: var(--surface-border); stroke-width: 1.5; } .diag-car__wheel { fill: rgba(0, 0, 0, 0.35); stroke: var(--surface-border); stroke-width: 1.5; } .diag-car__mirror, .diag-car__lamp { fill: rgba(255, 255, 255, 0.06); stroke: var(--surface-border); stroke-width: 1; } .diag-hotspot { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 2px solid var(--surface-border); cursor: pointer; padding: 0; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; z-index: 2; } .diag-hotspot__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--text-tertiary); } .diag-hotspot--excellent { border-color: rgba(34, 211, 238, 0.55); } .diag-hotspot--excellent .diag-hotspot__dot { background: var(--grade-10); } .diag-hotspot--good { border-color: rgba(163, 230, 53, 0.5); } .diag-hotspot--good .diag-hotspot__dot { background: var(--grade-7); } .diag-hotspot--attention { border-color: rgba(245, 158, 11, 0.55); } .diag-hotspot--attention .diag-hotspot__dot { background: var(--grade-4); } .diag-hotspot:hover { transform: translate(-50%, -50%) scale(1.15); } .diag-hotspot.is-active { transform: translate(-50%, -50%) scale(1.22); box-shadow: 0 0 0 5px rgba(79, 209, 255, 0.14); border-color: var(--accent-cyan); } .diag-detail__panel { display: none; } .diag-detail__panel.is-active { display: block; animation: fadeInUp 0.3s var(--ease); } .diag-detail__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .diag-detail__head .icon-wrap { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-gradient-soft); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .diag-detail__head h4 { font-size: 17px; font-weight: 700; } .diag-detail__score { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; } .diag-detail__score--excellent { color: var(--grade-10); } .diag-detail__score--good { color: var(--grade-7); } .diag-detail__score--attention { color: var(--grade-4); } .diag-detail__items { border-top: 1px solid rgba(255, 255, 255, 0.05); } .diag-hint { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 26px; font-size: 13px; color: var(--text-tertiary); } @media (max-width: 860px) { .diag-wrap { grid-template-columns: 1fr; } .diag-car { max-width: 220px; } } @media (max-width: 560px) { .diag-map { padding: 22px; } .diag-legend { gap: 12px; } }