.sd-aic-cmp-wrap { position: relative; background: #11314a; border-radius: 24px; max-width: 960px; margin: 0 auto; padding: 48px 40px 44px; font-family: 'DM Sans', sans-serif; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,0.35); } .sd-aic-cmp-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,246,232,0.06) 20%, rgba(255,246,232,0.10) 50%, rgba(255,246,232,0.06) 80%, transparent 100%); } .sd-aic-cmp-wrap::after { content: ''; position: absolute; top: 20%; left: 10%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255,246,232,0.06) 0%, transparent 70%); pointer-events: none; } .sd-aic-cmp-header { text-align: center; margin-bottom: 44px; } .sd-aic-cmp-title { font-size: 28px; font-weight: 800; color: #FFF6E8; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.2; } .sd-aic-cmp-subtitle { font-size: 14px; font-weight: 400; color: rgba(255,246,232,0.40); margin: 0; line-height: 1.5; } .sd-aic-cmp-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: start; } .sd-aic-cmp-side { display: flex; flex-direction: column; align-items: center; gap: 28px; } .sd-aic-cmp-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; text-align: center; } .sd-aic-cmp-side--sd .sd-aic-cmp-label { color: #FFF6E8; } .sd-aic-cmp-side--other .sd-aic-cmp-label { color: rgba(255,246,232,0.30); } .sd-aic-cmp-donut { position: relative; width: 220px; height: 220px; border-radius: 50%; } .sd-aic-cmp-donut--sd { box-shadow: 0 0 20px rgba(255,246,232,0.08), 0 0 40px rgba(255,246,232,0.03); } .sd-aic-cmp-donut--other { box-shadow: 0 0 20px rgba(0,0,0,0.15); opacity: 0.85; } .sd-aic-cmp-donut svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .sd-aic-cmp-segment { cursor: pointer; transition: opacity 0.2s ease; } .sd-aic-cmp-segment:hover { opacity: 0.75; filter: brightness(1.15); } .sd-aic-cmp-tooltip { position: absolute; background: #FFF6E8; color: #11314a; font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.2); top: 50%; left: 50%; transform: translate(-50%, -50%); } .sd-aic-cmp-tooltip--visible { opacity: 1; } .sd-aic-cmp-donut-inner { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; border-radius: 50%; background: #11314a; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; } .sd-aic-cmp-donut--sd .sd-aic-cmp-donut-inner { box-shadow: inset 0 0 20px rgba(255,246,232,0.04); } .sd-aic-cmp-donut-num { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .sd-aic-cmp-side--sd .sd-aic-cmp-donut-num { color: #FFF6E8; } .sd-aic-cmp-side--other .sd-aic-cmp-donut-num { color: rgba(255,246,232,0.25); } .sd-aic-cmp-donut-unit { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.10em; margin-top: 4px; } .sd-aic-cmp-side--sd .sd-aic-cmp-donut-unit { color: rgba(255,246,232,0.50); } .sd-aic-cmp-side--other .sd-aic-cmp-donut-unit { color: rgba(255,246,232,0.18); } .sd-aic-cmp-legend { display: none; } .sd-aic-cmp-legend-item { display: flex; align-items: center; gap: 10px; } .sd-aic-cmp-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .sd-aic-cmp-legend-text { font-size: 12px; font-weight: 500; line-height: 1.3; } .sd-aic-cmp-side--sd .sd-aic-cmp-legend-text { color: rgba(255,246,232,0.70); } .sd-aic-cmp-side--other .sd-aic-cmp-legend-text { color: rgba(255,246,232,0.25); } .sd-aic-cmp-legend-pct { margin-left: auto; font-size: 11px; font-weight: 600; flex-shrink: 0; } .sd-aic-cmp-side--sd .sd-aic-cmp-legend-pct { color: rgba(255,246,232,0.45); } .sd-aic-cmp-side--other .sd-aic-cmp-legend-pct { color: rgba(255,246,232,0.15); } .sd-aic-cmp-vs { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; align-self: stretch; min-height: 300px; } .sd-aic-cmp-vs-line { width: 1px; flex: 1; background: linear-gradient(180deg, transparent, rgba(255,246,232,0.08) 30%, rgba(255,246,232,0.08) 70%, transparent); } .sd-aic-cmp-vs-badge { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,246,232,0.04); border: 1px solid rgba(255,246,232,0.10); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: rgba(255,246,232,0.35); text-transform: uppercase; letter-spacing: 0.06em; margin: 14px 0; flex-shrink: 0; } .sd-aic-cmp-callout { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,246,232,0.06); text-align: center; } .sd-aic-cmp-callout-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; } .sd-aic-cmp-callout-num { font-size: 44px; font-weight: 800; color: #FFF6E8; letter-spacing: -0.02em; line-height: 1; } .sd-aic-cmp-callout-suffix { font-size: 22px; font-weight: 700; color: #FFF6E8; } .sd-aic-cmp-callout-desc { font-size: 14px; font-weight: 400; color: rgba(255,246,232,0.40); margin-top: 8px; line-height: 1.5; } @media (max-width: 680px) { .sd-aic-cmp-wrap { padding: 36px 20px 32px; max-width: 100%; } .sd-aic-cmp-title { font-size: 22px; } .sd-aic-cmp-comparison { grid-template-columns: 1fr; gap: 12px; } .sd-aic-cmp-vs { flex-direction: row; min-height: auto; padding: 8px 0; } .sd-aic-cmp-vs-line { width: auto; height: 1px; flex: 1; } .sd-aic-cmp-vs-badge { margin: 0 16px; width: 36px; height: 36px; } .sd-aic-cmp-donut { width: 200px; height: 200px; } .sd-aic-cmp-donut-inner { width: 124px; height: 124px; } .sd-aic-cmp-donut-num { font-size: 40px; } .sd-aic-cmp-callout-num { font-size: 36px; } } @media (max-width: 480px) { .sd-aic-cmp-wrap { padding: 28px 16px 26px; border-radius: 18px; } .sd-aic-cmp-title { font-size: 19px; } .sd-aic-cmp-subtitle { font-size: 12px; } .sd-aic-cmp-header { margin-bottom: 28px; } .sd-aic-cmp-donut { width: 180px; height: 180px; } .sd-aic-cmp-donut-inner { width: 112px; height: 112px; } .sd-aic-cmp-donut-num { font-size: 34px; } .sd-aic-cmp-side { gap: 18px; } .sd-aic-cmp-callout { margin-top: 28px; padding-top: 20px; } .sd-aic-cmp-callout-num { font-size: 32px; } .sd-aic-cmp-callout-suffix { font-size: 18px; } .sd-aic-cmp-callout-desc { font-size: 12px; margin-top: 6px; } } @media (hover: none) { .sd-aic-cmp-segment:hover { opacity: 1; filter: none; } }