/* 헤더섹션 */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    background: transparent;
    transition:
      background-color 0.35s ease,
      backdrop-filter 0.35s ease,
      -webkit-backdrop-filter 0.35s ease,
      border-bottom-color 0.35s ease,
      box-shadow 0.35s ease;
  }
  
  .header--scrolled {
    background-color: rgba(10, 25, 47, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: rgba(0, 240, 255, 0.22);
    box-shadow: 0 4px 32px rgba(0, 240, 255, 0.06), 0 1px 0 rgba(0, 240, 255, 0.1);
  }

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
    gap: 1rem;  /* 추가 */
  }
  
  /* 로고 - 왼쪽 고정 */
  .header__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;  /* 추가 */
  }
  
  /* 네비게이션 - 중앙 정렬 */
  .header__nav {
    display: none;
    align-items: center;
    gap: 2rem;
    flex: 1;  /* 추가 */
    justify-content: center;  /* 추가 */
  }

  .header__family-btn {
    display: flex;       /* Flexbox 적용 */
    align-items: center;  /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 (필요시) */
    gap: 4px;            /* 텍스트와 화살표 사이의 간격 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}
  
  @media (min-width: 1024px) {
    .header__nav { 
        display: flex!important;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        flex: 1; 
    }
  }
  
  /* 액션 버튼 - 오른쪽 고정 */
  .header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;  /* 추가 */
  }
   
 
 
 /* Layer z-index tokens */
 .layer-background { position: absolute; inset: 0; z-index: 0; }
 .layer-glow       { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
 .layer-content    { position: relative; z-index: 10; }
 .layer-header     { z-index: 50; }
 .layer-overlay    { z-index: 100; }

 /* Screen-reader utility */
 .sr-only {
   position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
 }
 .sr-only--focusable:focus {
   position: static; width: auto; height: auto; overflow: visible;
   clip: auto; white-space: normal; padding: 0.5rem 1rem;
   background: var(--c-navy-light); color: var(--c-cyan);
 }
 .hide-tablet-up { display: block; }
 @media (min-width: 1024px) { .hide-tablet-up { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   IONE NETWORKS — Contact & Footer
   css/contact-footer.css  ·  Phase 5: Final Polish
   ─────────────────────────────────────────────────────────────────
   Load order:
     css/style.css → css/hero.css → css/bento.css → css/contact-footer.css
   ─────────────────────────────────────────────────────────────────
   목차:
     01. gradient-btn-primary  (Footer CTA + Contact 전송 버튼)
     02. Contact Section       (2-col grid: info panel + form)
     03. Contact Form Elements (field, select, textarea, privacy)
     04. Footer CTA Banner
     05. Footer Main Grid      (4-col, --c-navy-deep)
     06. Footer Company Column
     07. Footer Nav Columns    (솔루션 / 패밀리 사이트)
     08. Footer Business Card  (벤처 인증)
     09. Footer Bottom Bar
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   01. gradient-btn-primary
   CTA 버튼의 공통 그라디언트 스타일.
   style.css 의 .btn--primary 와 동일 비주얼이지만 더 넓은 버튼(full-width)
   에서도 완벽하게 작동하도록 독립 클래스로 제공.
   ───────────────────────────────────────────────────────────────── */

   .gradient-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 0.75rem;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-blue) 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    box-shadow:
      0 4px 20px rgba(0, 240, 255, 0.22),
      0 1px 4px  rgba(0,   0,   0, 0.20);
    transition:
      background-position 0.45s ease,
      box-shadow  0.25s ease,
      transform   0.20s ease,
      filter      0.20s ease;
  }
  
  .gradient-btn-primary:hover {
    background-position: 100% 50%;
    box-shadow:
      0 6px 32px rgba(0, 240, 255, 0.38),
      0 2px 8px  rgba(0,   0,   0, 0.22);
    transform: translateY(-1px);
  }
  
  .gradient-btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.95);
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     02. CONTACT SECTION
     ───────────────────────────────────────────────────────────────── */
  
  .contact-section {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
  }
  
  @media (min-width: 640px)  { .contact-section { padding: 7rem 0; } }
  @media (min-width: 1024px) { .contact-section { padding: 9rem 0; } }
  
  /* Background: subtle cyan-left gradient */
  .contact-section::before {
    content: '';
    position: absolute;
    top: -10rem;
    left: -8rem;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,240,255,0.028) 0%, transparent 70%);
    pointer-events: none;
    animation: pulse 6s ease-in-out infinite;
  }
  
  /* Section header */
  .contact-section__header {
    text-align: center;
    margin-bottom: 3.5rem;
  }
  
  @media (min-width: 640px) { .contact-section__header { margin-bottom: 4.5rem; } }
  
  /* 2-col grid: info panel (2fr) + form (3fr) */
  .contact-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  
  @media (min-width: 1024px) {
    .contact-section__grid {
      grid-template-columns: 2fr 3fr;
      gap: 4rem;
    }
  }
  
  
  /* ─── Info Panel (left) ─────────────────────────────────────────── */
  
  .contact__info-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    background-color: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.12);
  }
  
  .contact__info-title {
    color: #ffffff;
    font-size: clamp(1.625rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  
  .contact__info-highlight { color: var(--c-cyan); }
  
  .contact__info-desc {
    color: var(--c-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.8;
    margin-bottom: 2rem;
  }
  
  .contact__info-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .contact__info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: rgba(17, 34, 64, 0.60);
    border: 1px solid var(--c-border-light);
    transition: border-color 0.25s ease;
  }
  
  .contact__info-card:hover {
    border-color: rgba(0, 240, 255, 0.20);
  }
  
  .contact__info-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0,240,255,0.12), rgba(0,102,255,0.12));
  }
  
  .contact__info-card-label {
    display: block;
    color: var(--c-text-secondary);
    font-size: 0.75rem;
    margin-bottom: 0.125rem;
  }
  
  .contact__info-card-value {
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .contact__info-card-value:hover { color: var(--c-cyan); }
  
  
  /* ─────────────────────────────────────────────────────────────────
     03. CONTACT FORM
     ───────────────────────────────────────────────────────────────── */
  
  .contact__form-panel {
    position: relative;
    padding: 1.75rem;
    border-radius: 1rem;
    background-color: rgba(17, 34, 64, 0.50);
    border: 1px solid rgba(100, 116, 139, 0.20);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  @media (min-width: 640px) { .contact__form-panel { padding: 2.25rem; } }
  
  .contact__form-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
  }
  
  .contact__form-hint {
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    margin-bottom: 2rem;
  }
  
  .contact__form-hint-star { color: var(--c-cyan); }
  
  /* Fieldset: removes browser default styling */
  .contact__form-fields {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  
  /* 2-col row for phone + email */
  .contact__form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  @media (min-width: 640px) {
    .contact__form-row { grid-template-columns: repeat(2, 1fr); }
  }
  
  /* Field wrapper */
  .contact__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  /* Label row: icon + text + required star */
  .contact__field-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  .contact__field-label-icon { color: var(--c-cyan); }
  .contact__field-required   { color: var(--c-cyan); }
  
  /* Shared input styles */
  .contact__field-input,
  .contact__field-select,
  .contact__field-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: rgba(10, 25, 47, 0.60);
    border: 1px solid rgba(100, 116, 139, 0.25);
    color: var(--c-text-primary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    line-height: 1.6;
    outline: none;
    transition:
      border-color 0.20s ease,
      box-shadow   0.20s ease;
  }
  
  .contact__field-input::placeholder,
  .contact__field-textarea::placeholder {
    color: var(--c-text-dim);
  }
  
  /* Focus: cyan glow ring */
  .contact__field-input:focus,
  .contact__field-select:focus,
  .contact__field-textarea:focus {
    border-color: rgba(0, 240, 255, 0.32);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.08);
  }
  
  /* Error state */
  .contact__field-input--error,
  .contact__field-select--error,
  .contact__field-textarea--error {
    border-color: rgba(255, 100, 100, 0.60);
  }
  
  .contact__field-error {
    color: var(--c-error);
    font-size: 0.75rem;
    margin-top: -0.125rem;
  }
  
  /* Select: custom chevron */
  .contact__field-select {
    appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
  }
  
  .contact__field-select--placeholder { color: var(--c-text-dim); }
  
  .contact__select-wrap {
    position: relative;
  }
  
  .contact__select-chevron {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--c-text-dim);
    pointer-events: none;
    transition: color 0.20s ease;
  }
  
  .contact__select-wrap:focus-within .contact__select-chevron {
    color: var(--c-cyan);
  }
  
  /* Textarea */
  .contact__field-textarea {
    resize: none;
    line-height: 1.7;
  }
  
  /* Privacy note */
  .contact__privacy-note {
    text-align: center;
    margin-top: 1rem;
    color: var(--c-text-dim);
    font-size: 0.75rem;
    line-height: 1.6;
  }
  
  /* Privacy checkbox row */
  .contact__privacy-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 0.5rem;
  }
  
  .contact__privacy-checkbox {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(100, 116, 139, 0.40);
    background-color: rgba(10, 25, 47, 0.60);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    margin-top: 0.0625rem;
    transition: border-color 0.20s ease, background-color 0.20s ease;
  }
  
  .contact__privacy-checkbox:checked {
    background-color: var(--c-cyan);
    border-color: var(--c-cyan);
  }
  
  .contact__privacy-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 1px;
    width: 6px; height: 9px;
    border: 2px solid #060E1F;
    border-top: none;
    border-left: none;
    transform: rotate(42deg);
  }
  
  .contact__privacy-checkbox:focus {
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12);
    outline: none;
  }
  
  .contact__privacy-label {
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    cursor: pointer;
  }
  
  .contact__privacy-label a {
    color: var(--c-cyan);
    text-underline-offset: 2px;
  }
  
  /* Submit button (full-width, uses .gradient-btn-primary) */
  .contact__submit-btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
  }
  
  /* Input prefix icon wrap */
  .contact__input-wrap {
    position: relative;
  }
  
  .contact__input-wrap .contact__field-input {
    padding-left: 2.75rem;
  }
  
  .contact__input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-dim);
    pointer-events: none;
    transition: color 0.20s ease;
  }
  
  .contact__input-wrap:focus-within .contact__input-icon {
    color: var(--c-cyan);
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     04. FOOTER CTA BANNER
     ───────────────────────────────────────────────────────────────── */
  
  .footer {
    position: relative;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
  }
  
  .footer__cta-banner {
    position: relative;
    overflow: hidden;
  }
  
  /* Subtle gradient overlay behind CTA */
  .footer__cta-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(0, 240, 255, 0.02) 0%,
      rgba(0, 102, 255, 0.02) 100%
    );
    pointer-events: none;
  }
  
  .footer__cta-inner {
    position: relative;
    padding: 3.5rem 0;
    text-align: center;
  }
  
  @media (min-width: 640px) { .footer__cta-inner { padding: 5rem 0; } }
  
  .footer__cta-title {
    color: #ffffff;
    font-size: clamp(1.375rem, 3vw, 2.375rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  
  .footer__cta-highlight { color: var(--c-cyan); }
  
  .footer__cta-desc {
    max-width: 36rem;
    margin: 0 auto 2rem;
    color: var(--c-text-secondary);
    font-size: 1rem;
    line-height: 1.7;
  }
  
  .footer__cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .footer__cta-btn {
    min-width: 10rem;
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     05. FOOTER MAIN GRID (4-col, --c-navy-deep)
     ───────────────────────────────────────────────────────────────── */
  
  .footer__main {
    background-color: var(--c-navy-deep);
    border-top: 1px solid var(--c-border-faint);
  }
  
  .footer__main-inner {
    padding: 3rem 0;
  }
  
  @media (min-width: 640px) { .footer__main-inner { padding: 4rem 0; } }
  
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  @media (min-width: 640px) {
    .footer__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem 3rem;
    }
  }
  
  @media (min-width: 1024px) {
    .footer__grid { grid-template-columns: repeat(4, 1fr); }
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     06. FOOTER COMPANY COLUMN
     ───────────────────────────────────────────────────────────────── */
  
  .footer__company {
    grid-column: span 1;
  }
  
  @media (min-width: 640px)  { .footer__company { grid-column: span 2; } }
  @media (min-width: 1024px) { .footer__company { grid-column: span 1; } }
  
  .footer__logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  /* SVG logo inlined — matches hero section SVG logo */
  .footer__logo-svg {
    height: 2rem;
    width: auto;
  }
  
  .footer__tagline {
    margin-bottom: 1.125rem;
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.7;
  }
  
  .footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-style: normal;
  }
  
  .footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
  }
  
  .footer__contact-item--center { align-items: center; }
  
  .footer__contact-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--c-gray-600);
  }
  
  .footer__contact-icon--mt { margin-top: 0.125rem; }
  
  .footer__contact-link {
    color: var(--c-text-secondary);
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .footer__contact-link:hover { color: var(--c-cyan); }
  
  
  /* ─────────────────────────────────────────────────────────────────
     07. FOOTER NAV COLUMNS (솔루션 / 패밀리 사이트)
     ───────────────────────────────────────────────────────────────── */
  
  .footer__section-title {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
  }
  
  .footer__link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  
  .footer__link {
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .footer__link:hover { color: var(--c-cyan); }
  
  .footer__family-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .footer__family-link:hover { color: var(--c-cyan); }
  
  /* ExternalLink icon — hidden until hover */
  .footer__family-link-icon {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0;
    transition: opacity 0.20s ease;
  }
  
  .footer__family-link:hover .footer__family-link-icon { opacity: 1; }
  
  
  /* ─────────────────────────────────────────────────────────────────
     08. FOOTER BUSINESS CARD (벤처기업 인증)
     ───────────────────────────────────────────────────────────────── */
  
  .footer__biz-card {
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: rgba(17, 34, 64, 0.60);
    border: 1px solid rgba(100, 116, 139, 0.15);
  }
  
  .footer__biz-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  
  /* Certification badge placeholder (circular) */
  .footer__cert-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(0,102,255,0.15));
    border: 1px solid rgba(0, 240, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--c-cyan);
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.2;
  }
  
  .footer__biz-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .footer__biz-name {
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  
  .footer__biz-sub {
    color: var(--c-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.5;
  }
  
  .footer__biz-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--c-text-secondary);
    font-size: 0.75rem;
    line-height: 1.6;
  }
  
  .footer__biz-details > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  
  .footer__biz-label {
    color: var(--c-gray-slate);
    font-size: 0.6875rem;
  }
  
  .footer__biz-hours {
    color: var(--c-gray-slate);
    font-size: 0.6875rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--c-border-faint);
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     09. FOOTER BOTTOM BAR
     ───────────────────────────────────────────────────────────────── */
  
  .footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-top: 1px solid rgba(100, 116, 139, 0.10);
  }
  
  @media (min-width: 640px) {
    .footer__bottom { margin-top: 3rem; padding-top: 2rem; }
  }
  
  .footer__copyright {
    color: var(--c-text-dim);
    font-size: 0.75rem;
  }
  
  .footer__bottom-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer__bottom-link {
    color: var(--c-text-dim);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .footer__bottom-link:hover { color: var(--c-text-secondary); }
  
  
  /* ─────────────────────────────────────────────────────────────────
     API PREVIEW SECTION — index.html 에 삽입된 문서 미리보기 UI
     (#proof 와 #contact 사이)
     ───────────────────────────────────────────────────────────────── */
  
  .api-preview {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
  }
  
  @media (min-width: 640px)  { .api-preview { padding: 7rem 0; } }
  @media (min-width: 1024px) { .api-preview { padding: 9rem 0; } }
  
  /* Ambient glow from the right */
  .api-preview::after {
    content: '';
    position: absolute;
    top: 20%;
    right: -8rem;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,102,255,0.04) 0%, transparent 70%);
    pointer-events: none;
  }
  
  .api-preview__header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  @media (min-width: 640px) { .api-preview__header { margin-bottom: 4rem; } }
  
  /* ── Browser window chrome ──────────────────────────────────────── */
  .api-preview__window {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.20);
    background-color: rgba(6, 14, 31, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
      0 0 0 1px rgba(0, 240, 255, 0.04),
      0 24px 64px rgba(0, 0, 0, 0.40);
  }
  
  .api-preview__chrome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.12);
    background-color: rgba(10, 18, 36, 0.70);
  }
  
  .api-preview__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .api-preview__dot--red    { background-color: #FF5F56; }
  .api-preview__dot--yellow { background-color: #FFBD2E; }
  .api-preview__dot--green  { background-color: #27C93F; }
  
  .api-preview__chrome-label {
    margin-left: 0.75rem;
    color: var(--c-text-dim);
    font-size: 0.75rem;
    font-family: var(--font-mono);
  }
  
  /* ── Body: 2-col split ──────────────────────────────────────────── */
  .api-preview__body {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 24rem;
  }
  
  @media (min-width: 768px) {
    .api-preview__body { grid-template-columns: 14rem 1fr; }
  }
  
  /* ── Sidebar col ────────────────────────────────────────────────── */
  .api-preview__sidebar {
    border-right: 1px solid rgba(100, 116, 139, 0.10);
    padding: 1.25rem 0.75rem;
    background-color: rgba(6, 14, 31, 0.50);
  }
  
  .api-preview__sidebar-label {
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--c-text-dim);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  
  .api-preview__sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  
  .api-preview__sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--c-text-dim);
    font-size: 0.75rem;
  }
  
  .api-preview__sidebar-item--active {
    background-color: rgba(0, 240, 255, 0.06);
    color: var(--c-cyan);
    font-weight: 600;
  }
  
  /* ── Code col ───────────────────────────────────────────────────── */
  .api-preview__code-area {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .api-preview__endpoint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    background-color: rgba(6, 14, 31, 0.60);
    border: 1px solid rgba(100, 116, 139, 0.15);
    width: fit-content;
  }
  
  .api-preview__method {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background-color: rgba(0, 230, 118, 0.12);
    color: #00E676;
  }
  
  .api-preview__path {
    color: var(--c-text-primary);
    font-size: 0.8125rem;
    font-family: var(--font-mono);
  }
  
  /* Code blocks inside preview */
  .api-preview__code {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.12);
    background-color: rgba(4, 10, 22, 0.70);
  }
  
  .api-preview__code--response {
    border-color: rgba(0, 230, 118, 0.12);
  }
  
  .api-preview__code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.875rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.08);
    background-color: rgba(6, 14, 31, 0.50);
  }
  
  .api-preview__code-lang {
    color: var(--c-text-dim);
    font-size: 0.6875rem;
    font-family: var(--font-mono);
  }
  
  .api-preview__code-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-dim);
    font-size: 0.6875rem;
  }
  
  .api-preview__code-label--success { color: #00E676; }
  
  /* Live dot pulse */
  .api-preview__live-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background-color: #00E676;
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
  }
  
  .api-preview__pre {
    margin: 0;
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    line-height: 1.7;
    font-family: var(--font-mono);
    overflow-x: auto;
    color: var(--c-text-primary);
  }
  
  /* ── CTA bar ─────────────────────────────────────────────────────── */
  .api-preview__cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(100, 116, 139, 0.10);
    background-color: rgba(0, 240, 255, 0.012);
  }
  
  .api-preview__cta-text {
    color: var(--c-text-dim);
    font-size: 0.75rem;
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     CONTACT PAGE — 독립 페이지 전용 추가 스타일 (contact.html)
     ───────────────────────────────────────────────────────────────── */
  
  /* ── Page Hero (compact header above form) ──────────────────────── */
  .contact-page-hero {
    position: relative;
    padding: 5rem 0 3rem;
    overflow: hidden;
    border-bottom: 1px solid var(--c-border-faint);
  }
  
  @media (min-width: 640px) { .contact-page-hero { padding: 6rem 0 3.5rem; } }
  @media (min-width: 1024px) { .contact-page-hero { padding: 7rem 0 4rem; } }
  
  .contact-page-hero__inner {
    max-width: 52rem;
  }
  
  .contact-page-hero__title {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0.75rem 0 1rem;
  }
  
  .contact-page-hero__desc {
    color: var(--c-text-secondary);
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    line-height: 1.75;
    max-width: 40rem;
  }
  
  /* Breadcrumb */
  .contact-page-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
  }
  
  .contact-page-hero__bc-link {
    color: var(--c-text-dim);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  .contact-page-hero__bc-link:hover { color: var(--c-text-secondary); }
  
  .contact-page-hero__bc-sep {
    color: var(--c-text-dim);
  }
  
  .contact-page-hero__bc-current {
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  
  /* ── Info Panel extended stats ──────────────────────────────────── */
  .contact__info-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 2rem;
    border-top: 1px solid var(--c-border-faint);
    padding-top: 1.5rem;
  }
  
  .contact__info-stat {
    text-align: center;
  }
  
  .contact__info-stat-label {
    display: block;
    color: var(--c-text-dim);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.375rem;
  }
  
  .contact__info-stat-value {
    display: block;
    color: var(--c-cyan);
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1.2;
  }
  
  .contact__info-stat-unit {
    font-size: 0.875rem;
    font-weight: 600;
  }
  
  /* ── Active nav link indicator ──────────────────────────────────── */
  .header__nav-link--active {
    color: var(--c-cyan) !important;
  }
  
  .header__mobile-link--active {
    color: var(--c-cyan) !important;
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     LOGIN PAGE — 비즈아이원 로그인 전용 스타일 (login.html)
     ═══════════════════════════════════════════════════════════════════ */
  
  /* ── Root layout ──────────────────────────────────────────────────── */
  .login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--c-navy-deep);
    font-family: var(--font-sans);
    position: relative;
  }
  
  @media (min-width: 1024px) {
    .login { flex-direction: row; }
  }
  
  /* ── Fixed header ─────────────────────────────────────────────────── */
  .login__header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background-color: rgba(6, 14, 31, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 240, 255, 0.08);
  }
  
  .login__header-inner {
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  
  @media (min-width: 640px) {
    .login__header-inner { height: 4.5rem; }
  }
  
  .login__back-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
    min-width: 6rem;
  }
  
  .login__back-btn:hover { color: var(--c-text-primary); }
  
  .login__back-text {
    display: none;
  }
  
  @media (min-width: 480px) {
    .login__back-text { display: inline; }
  }
  
  .login__header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  
  .login__header-spacer {
    min-width: 6rem;
  }
  
  /* ── Left visual panel (desktop) ─────────────────────────────────── */
  .login__visual {
    display: none;
    position: relative;
    width: 50%;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--c-navy);
    padding-top: 4.5rem; /* header height offset */
  }
  
  @media (min-width: 1024px) {
    .login__visual { display: flex; flex-direction: column; }
  }
  
  .login__visual-bg {
    position: absolute;
    inset: 0;
  }
  
  .login__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(6, 14, 31, 0.96) 0%,
      rgba(0, 240, 255, 0.03) 50%,
      rgba(6, 14, 31, 0.98) 100%
    );
  }
  
  .login__visual-grid {
    position: absolute;
    inset: 0;
    opacity: 0.018;
    background-image:
      linear-gradient(var(--c-cyan) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-cyan) 1px, transparent 1px);
    background-size: 60px 60px;
  }
  
  /* Ambient glows */
  .login__visual-glow-1 {
    position: absolute;
    bottom: -5%; left: -10%;
    width: 500px; height: 500px;
    border-radius: 50%;
    filter: blur(180px);
    background-color: rgba(0, 240, 255, 0.04);
    pointer-events: none;
  }
  
  .login__visual-glow-2 {
    position: absolute;
    top: 15%; right: -10%;
    width: 380px; height: 380px;
    border-radius: 50%;
    filter: blur(160px);
    background-color: rgba(0, 102, 255, 0.05);
    pointer-events: none;
  }
  
  .login__visual-glow-3 {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 400px;
    border-radius: 50%;
    filter: blur(200px);
    background-color: rgba(0, 240, 255, 0.02);
    pointer-events: none;
  }
  
  
  /* Visual badge */
  .login__visual-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    background-color: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.12);
    margin-bottom: 2rem;
    width: fit-content;
  }
  
  .login__visual-badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--c-cyan);
    animation: pulse 2s ease-in-out infinite;
  }
  
  .login__visual-badge-text {
    color: var(--c-cyan);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .login__visual-title {
    color: white;
    font-size: clamp(1.75rem, 2.8vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  
  .login__visual-desc {
    color: var(--c-text-secondary);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 28rem;
    margin-bottom: 2.5rem;
  }
  
  /* Stats */
  .login__visual-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 26rem;
    margin-bottom: 2rem;
  }
  
  .login__visual-stat {
    padding: 1.125rem;
    border-radius: 0.75rem;
    background-color: rgba(17, 34, 64, 0.5);
    border: 1px solid var(--c-border-light);
  }
  
  .login__visual-stat-value {
    display: block;
    color: var(--c-cyan);
    font-size: 1.375rem;
    font-weight: 800;
    font-family: sans-serif;
    line-height: 1;
    margin-bottom: 0.25rem;
    margin-top: 9px;
  }
  
  .login__visual-stat-label {
    display: block;
    color: var(--c-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
  }
  
  /* Channel badges */
  .login__visual-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .login__visual-channel-badge {
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 240, 255, 0.15);
    background-color: rgba(0, 240, 255, 0.05);
    color: var(--c-cyan);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  
  /* Visual footer */
  .login__visual-footer {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 4rem;
    border-top: 1px solid var(--c-border-faint);
  }
  
  .login__visual-copyright {
    color: var(--c-text-dim);
    font-size: 0.75rem;
  }
  
  .login__visual-links {
    display: flex;
    gap: 1.5rem;
  }
  
  .login__visual-link {
    color: var(--c-text-dim);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  
  .login__visual-link:hover { color: var(--c-text-secondary); }
  
  /* ── Form side ────────────────────────────────────────────────────── */
  .login__form-side {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6rem 1.5rem 3rem;
    position: relative;
    overflow: hidden;
  }
  
  @media (min-width: 640px) {
    .login__form-side {
      padding: 7rem 2.5rem 3rem;
      align-items: center;
    }
  }
  
  @media (min-width: 1024px) {
    .login__form-side {
      width: 50%;
      flex: none;
      padding: 2rem 4rem;
      padding-top: 7rem;
    }
  }
  
  .login__form-side-glow {
    position: absolute;
    top: 40%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    border-radius: 50%;
    filter: blur(250px);
    background-color: rgba(0, 240, 255, 0.012);
    pointer-events: none;
  }
  
  .login__form-wrapper {
    width: 100%;
    max-width: 26rem;
    position: relative;
    z-index: 10;
  }
  
  /* ── Brand ─────────────────────────────────────────────────────────── */
  .login__brand {
    margin-bottom: 2rem;
    text-align: center;
  }
  
  @media (min-width: 640px) {
    .login__brand { text-align: left; }
  }
  
  .login__brand-icon {
    display: inline-flex;
    margin-bottom: 1rem;
  }
  
  .login__brand-title {
    color: white;
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.375rem;
  }
  
  .login__brand-sub {
    color: var(--c-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
  }
  
  /* ── Tabs ──────────────────────────────────────────────────────────── */
  .login__tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: rgba(10, 25, 47, 0.7);
    border: 1px solid var(--c-border-light);
  }
  
  .login__tab {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    color: var(--c-text-dim);
    font-family: var(--font-sans);
  }
  
  .login__tab--active {
    background: linear-gradient(135deg, rgba(0,240,255,0.1), rgba(0,102,255,0.1));
    color: var(--c-cyan);
  }
  
  .login__tab:hover:not(.login__tab--active) {
    color: var(--c-text-secondary);
  }
  
  /* ── Card (form container) ─────────────────────────────────────────── */
  .login__card {
    padding: 1.75rem;
    border-radius: 1rem;
    background-color: rgba(17, 34, 64, 0.4);
    border: 1px solid var(--c-border-subtle);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,240,255,0.04);
  }
  
  @media (min-width: 640px) {
    .login__card { padding: 2rem; }
  }
  
  /* ── API key info box ─────────────────────────────────────────────── */
  .login__apikey-info {
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background-color: rgba(0, 240, 255, 0.02);
    border: 1px solid rgba(0, 240, 255, 0.09);
    margin-bottom: 1.25rem;
  }
  
  .login__apikey-info-title {
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  
  .login__apikey-info-desc {
    color: var(--c-text-secondary);
    font-size: 0.75rem;
    line-height: 1.6;
  }
  
  /* ── Fields ────────────────────────────────────────────────────────── */
  .login__fields {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    border: none;
    padding: 0;
    margin: 0;
  }
  
  .login__field-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  
  .login__field-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  
  .login__field-label-icon {
    color: var(--c-cyan);
    flex-shrink: 0;
  }
  
  /* ── Input ─────────────────────────────────────────────────────────── */
  .login__input-wrap {
    position: relative;
  }
  
  .login__input {
    width: 100%;
    padding: 0.8125rem 1rem 0.8125rem 2.625rem;
    border-radius: 0.625rem;
    background-color: rgba(17, 34, 64, 0.65);
    border: 1.5px solid rgba(100, 116, 139, 0.35);
    color: white;
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
  }
  
  .login__input:focus {
    border-color: rgba(0, 240, 255, 0.55);
    background-color: rgba(17, 34, 64, 0.85);
    box-shadow:
      0 0 0 3px rgba(0, 240, 255, 0.09),
      inset 0 1px 3px rgba(0,0,0,0.2);
  }
  
  .login__input:hover:not(:focus) {
    border-color: rgba(100, 116, 139, 0.5);
  }
  
  .login__input::placeholder {
    color: rgba(148, 163, 184, 0.45);
  }
  
  .login__input--pw {
    padding-right: 3rem; /* room for eye toggle */
  }
  
  .login__input--error {
    border-color: rgba(255, 100, 100, 0.65) !important;
    background-color: rgba(64, 17, 17, 0.25) !important;
  }
  
  .login__input-icon {
    position: absolute;
    left: 0.8125rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-dim);
    pointer-events: none;
    transition: color 0.15s ease;
  }
  
  .login__input-wrap:focus-within .login__input-icon {
    color: var(--c-cyan);
  }
  
  .login__toggle-pw {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--c-text-dim);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 0;
    transition: color 0.15s ease;
  }
  
  .login__toggle-pw:hover { color: var(--c-text-secondary); }
  
  .login__field-error {
    color: var(--c-error);
    font-size: 0.75rem;
    line-height: 1.4;
  }
  
  /* ── Options (remember / forgot) ─────────────────────────────────── */
  .login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.375rem;
  }
  
  .login__remember {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    cursor: pointer;
    user-select: none;
  }
  
  .login__checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1.5px solid rgba(100, 116, 139, 0.4);
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    flex-shrink: 0;
  }
  
  .login__checkbox:checked {
    background-color: var(--c-cyan);
    border-color: var(--c-cyan);
  }
  
  .login__checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 0px;
    width: 5px; height: 9px;
    border: solid var(--c-navy);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  
  .login__remember-text {
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
  }
  
  .login__forgot {
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }
  
  .login__forgot:hover { opacity: 0.75; }
  
  /* ── Submit button ─────────────────────────────────────────────────── */
  .login__submit {
    width: 100%;
    margin-top: 1.375rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-sans);
    transition: box-shadow 0.20s ease, opacity 0.15s ease;
  }
  
  .login__submit:hover:not(:disabled) {
    box-shadow: 0 8px 32px rgba(0, 240, 255, 0.28) !important;
  }
  
  .login__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  /* ── Security notice ──────────────────────────────────────────────── */
  .login__security {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background-color: rgba(0, 230, 118, 0.025);
    border: 1px solid rgba(0, 230, 118, 0.07);
  }
  
  .login__security-text {
    color: var(--c-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
  }
  
  .login__security-highlight {
    color: var(--c-green);
    font-weight: 600;
  }
  
  /* ── Divider ──────────────────────────────────────────────────────── */
  .login__divider {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 1.5rem 0;
  }
  
  .login__divider-line {
    flex: 1;
    height: 1px;
    background-color: var(--c-border-light);
  }
  
  .login__divider-text {
    color: var(--c-text-dim);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
  }
  
  /* ── Quick action links ───────────────────────────────────────────── */
  .login__quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
  
  .login__quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.6875rem 0.875rem;
    border-radius: 0.625rem;
    background-color: rgba(10, 25, 47, 0.6);
    border: 1px solid var(--c-border-light);
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  
  .login__quick-btn:hover {
    border-color: rgba(0, 240, 255, 0.22);
    color: white;
  }
  
  /* ── Page footer ───────────────────────────────────────────────────── */
  .login__footer {
    margin-top: 2rem;
    text-align: center;
  }
  
  .login__footer-text {
    color: var(--c-text-dim);
    font-size: 0.8125rem;
  }
  
  .login__footer-link {
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.25rem;
    transition: opacity 0.15s ease;
  }
  
  .login__footer-link:hover { opacity: 0.75; }
  
  .login__footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 0.875rem;
  }
  
  .login__footer-nav {
    color: var(--c-text-dim);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  
  .login__footer-nav:hover { color: var(--c-text-secondary); }
  
  .login__footer-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background-color: var(--c-text-dim);
  }
  


/* ═══════════════════════════════════════════════════════════════════
   IONE NETWORKS — Bento Grid & Social Proof
   css/bento.css  ·  Phase 4: Bento Grid + Social Proof Build
   ─────────────────────────────────────────────────────────────────
   Load order:  css/style.css → css/hero.css → css/bento.css
   Fonts / 변수 / 리셋: style.css 에서 완전 제공
   ─────────────────────────────────────────────────────────────────
   목차:
     01. Scroll-Reveal (범용 .reveal 시스템)
     02. Bento Section + Grid Layout
     03. Bento Card Base
     04. Bento Card — Enterprise (코드 블록)
     05. Bento Card — Attendance (대시보드)
     06. Bento Card — Callback (라이브 피드)
     07. Bento Card — Custom R&D (Capability Grid)
     08. Social Proof Section + Grid
     09. Proof Card + Accent System
     10. Trust Bar
     11. Responsive (640 / 1024)
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   01. SCROLL-REVEAL — 범용 is-visible + JS-driven stagger
   ───────────────────────────────────────────────────────────────────
   scroll-reveal.js 가 각 카드에 --card-delay 를 동적으로 주입:
     el.style.setProperty('--card-delay', index * 0.12 + 's')
   CSS 는 그 값을 transition-delay 에 바인딩한다.
   ───────────────────────────────────────────────────────────────── */

/* 공통 초기 상태 */
.reveal,
.bento-card,
.proof-card {
  --card-delay: 0s;
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity   0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--card-delay),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--card-delay),
    border-color  0.35s ease,                /* hover border (override delay) */
    box-shadow    0.35s ease,
    background-color 0.35s ease;
}

/* 진입 완료 상태 */
.reveal.is-visible,
.bento-card.is-visible,
.proof-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .bento-card,
  .proof-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ─────────────────────────────────────────────────────────────────
   02. BENTO SECTION + GRID LAYOUT
   ───────────────────────────────────────────────────────────────── */

.bento {
  position: relative;
  padding: 4rem 0;
}

@media (min-width: 640px)  { .bento { padding: 6rem 0; } }
@media (min-width: 1024px) { .bento { padding: 8rem 0; } }

.bento__header {
  text-align: center;
  margin-bottom: 3rem;
}

@media (min-width: 640px) { .bento__header { margin-bottom: 4rem; } }

/* 4-col grid on desktop */
.bento__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .bento__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .bento__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
  }
}


/* ─────────────────────────────────────────────────────────────────
   03. BENTO CARD BASE
   ───────────────────────────────────────────────────────────────────
   .bento-card 는 style.css 의 .glass--card 를 베이스로 삼는다.
   HTML 에서: class="bento-card brand--cyan glass--card ..."
   brand--* 이 --brand-r/g/b 를 주입하면 모든 호버 효과가
   자동으로 해당 색으로 구동된다.
   ───────────────────────────────────────────────────────────────── */

.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;                      /* glass--card 의 r-xl 보강 */
  /* glass--card 가 background + border + border-radius + backdrop-filter 제공 */
  transition:
    border-color    0.35s ease,
    box-shadow      0.35s ease,
    transform       0.25s ease;
}

/* 호버 시 brand-hex 기반 테두리 + 미세 리프트 */
.bento-card:hover {
  border-color: rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.12),
    0 8px 32px rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.08);
  transform: translateY(-2px);
}

/* glass__hover-glow 는 style.css 에 이미 정의됨:
   brand-r/g/b 를 읽어 radial-gradient 그린다.
   bento-card 는 glass--card 를 상속하므로 자동 동작. */

/* Enterprise: 2×2 on desktop */
.bento-card--enterprise {
  grid-column: span 1;
  grid-row: span 1;
}

@media (min-width: 1024px) {
  .bento-card--enterprise {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Wide: 2-col on desktop */
.bento-card--wide {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .bento-card--wide { grid-column: span 2; }
}

/* ── Decorative glow orbs (brand-color driven) ───────────────── */
.bento-card__glow {
  position: absolute;
  top: -6rem;
  right: -6rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  transition: opacity 0.70s ease;
  /* brand--* 클래스가 --brand-r/g/b 를 설정 */
  background-color: rgba(var(--brand-r, 0), var(--brand-g, 240), var(--brand-b, 255), 0.025);
}

/* 앞쪽 hover glow (brand 색으로 자동) */
.bento-card__glow--hover {
  background-color: rgba(var(--brand-r, 0), var(--brand-g, 240), var(--brand-b, 255), 0.09);
  opacity: 0;
}
.bento-card:hover .bento-card__glow--hover { opacity: 1; }

/* 아래쪽 glow (hover 시 등장) */
.bento-card__glow--bottom {
  top: auto;
  right: auto;
  bottom: -5rem;
  left: -5rem;
  width: 12rem;
  height: 12rem;
  filter: blur(70px);
  opacity: 0;
}
.bento-card:hover .bento-card__glow--bottom { opacity: 1; }

/* Top-right small glow (callback) */
.bento-card__glow--top-right {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  background-color: rgba(var(--brand-r, 255), var(--brand-g, 107), var(--brand-b, 53), 0.08);
}

/* Bottom-left glow (revealed on hover) */
.bento-card__glow--bottom {
  top: auto;
  right: auto;
  bottom: -5rem;
  left: -5rem;
  width: 12rem;
  height: 12rem;
  filter: blur(70px);
  opacity: 0;
}
.bento-card:hover .bento-card__glow--bottom { opacity: 1; }

/* Top-right small glow (callback) */
.bento-card__glow--top-right {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}



@media (min-width: 640px) {
  .bento-card__inner { padding: 2rem; }
}

/* Card top block */
.bento-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

/* Header row: icon + label */
.bento-card__header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Icon wrap */
.bento-card__icon-wrap {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bento-card__icon-wrap--cyan {
  background-color: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.12);
}
.bento-card__icon-wrap--purple {
  background-color: rgba(108, 99, 255, 0.09);
  border: 1px solid rgba(108, 99, 255, 0.15);
}
.bento-card__icon-wrap--orange {
  background-color: rgba(255, 107, 53, 0.07);
  border: 1px solid rgba(255, 107, 53, 0.12);
}
.bento-card__icon-wrap--green {
  background-color: rgba(0, 230, 118, 0.07);
  border: 1px solid rgba(0, 230, 118, 0.12);
}

/* Label pill */
.bento-card__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bento-card__label--cyan   { color: var(--c-cyan);   }
.bento-card__label--purple { color: var(--c-purple); }
.bento-card__label--orange { color: var(--c-orange); }
.bento-card__label--green  { color: var(--c-green);  }

/* Titles */
.bento-card__title {
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.bento-card__title--sm {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 0.25rem;
  color: #ffffff;
  font-weight: 700;
}

/* Description */
.bento-card__desc {
  color: var(--c-text-secondary);
  font-size: 0.875rem;
  line-height: 1.7;
}

.bento-card__desc--sm {
  color: var(--c-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Arrow icon */
.bento-card__arrow {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-gray-600);
  flex-shrink: 0;
  transition: color 0.20s ease;
}

.bento-card:hover .bento-card__arrow--cyan   { color: var(--c-cyan-light);   }
.bento-card:hover .bento-card__arrow--purple { color: var(--c-purple-light); }
.bento-card:hover .bento-card__arrow--orange { color: var(--c-orange-light); }
.bento-card:hover .bento-card__arrow--green  { color: var(--c-green-light);  }

/* Tag list */
.bento-card__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.bento-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--c-navy);
  color: var(--c-text-secondary);
  border: 1px solid var(--c-border-light);
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────────
   04. BENTO CODE BLOCK  (Enterprise Card)
   ───────────────────────────────────────────────────────────────── */

.bento-code {
  flex: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--c-navy);
  border: 1px solid var(--c-border-light);
  margin-top: 0.75rem;
}

.bento-code__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--c-border-light);
}

.bento-code__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bento-code__dot--red    { background-color: rgba(239,  68,  68, 0.60); }
.bento-code__dot--yellow { background-color: rgba(234, 179,   8, 0.60); }
.bento-code__dot--green  { background-color: rgba( 34, 197,  94, 0.60); }

.bento-code__filename {
  margin-left: 0.5rem;
  color: var(--c-gray-500);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.bento-code__body {
  padding: 1rem;
  overflow-x: auto;
}

.bento-code__line {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.9;
  min-height: 1.4em;
}

/* Scroll-stagger animation for code lines */
.bento-code__line {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity  0.35s ease,
    transform 0.35s ease;
}

.bento-card.is-visible .bento-code__line { opacity: 1; transform: translateX(0); }

.bento-code__line:nth-child(1)  { transition-delay: 0.50s; }
.bento-code__line:nth-child(2)  { transition-delay: 0.57s; }
.bento-code__line:nth-child(3)  { transition-delay: 0.64s; }
.bento-code__line:nth-child(4)  { transition-delay: 0.71s; }
.bento-code__line:nth-child(5)  { transition-delay: 0.78s; }
.bento-code__line:nth-child(6)  { transition-delay: 0.85s; }
.bento-code__line:nth-child(7)  { transition-delay: 0.92s; }
.bento-code__line:nth-child(8)  { transition-delay: 0.99s; }
.bento-code__line:nth-child(9)  { transition-delay: 1.06s; }
.bento-code__line:nth-child(10) { transition-delay: 1.13s; }

.bento-code__line-num {
  color: var(--c-gray-600);
  width: 1.25rem;
  text-align: right;
  user-select: none;
  font-size: 11px;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────
   05. BENTO DASHBOARD  (Attendance Card)
   ───────────────────────────────────────────────────────────────── */

.bento-dash {
  flex: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--c-navy);
  border: 1px solid var(--c-border-light);
  margin-top: 0.75rem;
}

.bento-dash__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--c-border-light);
}

.bento-dash__header-label {
  color: var(--c-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bento-dash__header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bento-dash__header-date {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
}

.bento-dash__header-date--cyan   { color: var(--c-cyan);   }
.bento-dash__header-date--orange { color: var(--c-orange); }

.bento-dash__body { padding: 0.5rem 0; }

/* Attendance rows */

.bento-dash__row-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: rgba(108, 99, 255, 0.06);
  border: 1px solid rgba(108, 99, 255, 0.12);
}

.bento-dash__row-name {
  color: var(--c-gray-300);
  font-size: 12.5px;
  font-weight: 600;
}

.bento-dash__row-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bento-dash__row-time {
  color: var(--c-gray-600);
  font-size: 11px;
  font-family: var(--font-mono);
}

/* Status chips */
.bento-status {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 11px;
  font-weight: 600;
}

.bento-status--present { background-color: rgba(  0, 230, 118, 0.10); color: var(--c-green);   }
.bento-status--late    { background-color: rgba(255, 193,   7, 0.10); color: var(--c-warning); }
.bento-status--absent  { background-color: rgba(255,  82,  82, 0.10); color: var(--c-danger);  }

/* Payment flow */
.bento-flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: rgba(10, 25, 47, 0.56);
  border: 1px solid var(--c-border-light);
}

.bento-flow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.bento-flow__item-icon {
  margin-bottom: 0.125rem;
}

.bento-flow__item-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--c-text-secondary);
  white-space: nowrap;
}

.bento-flow__arrow {
  color: var(--c-text-dim);
  font-size: 12px;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────
   06. LIVE FEED  (Callback Card)
   ───────────────────────────────────────────────────────────────── */

.bento-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.bento-live-dot--orange { background-color: var(--c-orange); }

.bento-live__label {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.bento-live__label--orange { color: var(--c-orange); }

.bento-feed-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem;
  border-radius: 0.5rem;
  background-color: rgba(17, 34, 64, 0.50);
  border: 1px solid var(--c-border-light);
  margin-bottom: 0.5rem;
}

.bento-feed-item:last-child { margin-bottom: 0; }

.bento-feed-item__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: rgba(255, 107, 53, 0.06);
  border: 1px solid rgba(255, 107, 53, 0.10);
}

.bento-feed-item__body {
  flex: 1;
  min-width: 0;
}

.bento-feed-item__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}

.bento-feed-item__name {
  color: var(--c-gray-300);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bento-feed-item__phone {
  color: var(--c-gray-600);
  font-size: 10px;
  font-family: var(--font-mono);
}

.bento-feed-item__action {
  font-size: 11px;
  font-weight: 500;
}

.bento-feed-item__action--orange { color: var(--c-orange); }

.bento-feed-item__time {
  color: var(--c-gray-600);
  font-size: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Bottom metric bar */
.bento-metric {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 107, 53, 0.04);
  border: 1px solid rgba(255, 107, 53, 0.10);
}

.bento-metric__text {
  color: var(--c-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.bento-metric__highlight {
  color: var(--c-orange);
  font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────
   07. CAPABILITY GRID  (Custom R&D Card)
   ───────────────────────────────────────────────────────────────── */

.bento-capability {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex: 1;
}

@media (min-width: 640px) {
  .bento-capability { grid-template-columns: repeat(2, 1fr); }
}

.bento-capability__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  border-radius: 0.75rem;
  background-color: rgba(10, 25, 47, 0.56);
  border: 1px solid var(--c-border-light);
  transition: border-color 0.20s ease, background-color 0.20s ease;
}

.bento-capability__item:hover {
  border-color: rgba(0, 230, 118, 0.20);
  background-color: rgba(0, 230, 118, 0.02);
}

@media (min-width: 640px) {
  .bento-capability__item { padding: 1rem; }
}

.bento-capability__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: rgba(0, 230, 118, 0.03);
  border: 1px solid rgba(0, 230, 118, 0.07);
}

.bento-capability__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bento-capability__label {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
}

.bento-capability__desc {
  color: var(--c-text-secondary);
  font-size: 0.75rem;
  line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────────
   08. SOCIAL PROOF SECTION + GRID
   ───────────────────────────────────────────────────────────────── */

.proof {
  position: relative;
  padding: 4rem 0;
}

@media (min-width: 640px)  { .proof { padding: 6rem 0; } }
@media (min-width: 1024px) { .proof { padding: 8rem 0; } }

.proof__header {
  text-align: center;
  margin-bottom: 3rem;
}

@media (min-width: 640px) { .proof__header { margin-bottom: 4rem; } }

.proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .proof__grid { gap: 1.25rem; margin-bottom: 4rem; }
}

@media (min-width: 1024px) {
  .proof__grid { grid-template-columns: repeat(3, 1fr); }
}


/* ─────────────────────────────────────────────────────────────────
   09. PROOF CARD + ACCENT SYSTEM
   .accent--cyan / --purple / --orange 는 style.css 에 등록된 값 사용
   ───────────────────────────────────────────────────────────────── */

.proof-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--c-navy-light);
  border: 1px solid rgba(100, 116, 139, 0.25);
  transition: border-color 0.50s ease, transform 0.30s ease;
}

.proof-card:hover {
  border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.28);
  transform: translateY(-2px);
}

/* Accent glow — driven by --accent-r/g/b from modifier class */
.proof-card__hover-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.70s ease;
  background: radial-gradient(
    ellipse at bottom right,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.024),
    transparent 70%
  );
}

.proof-card:hover .proof-card__hover-glow { opacity: 1; }

/* Card inner */
.proof-card__inner {
  position: relative;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .proof-card__inner { padding: 1.75rem; }
}

/* Org identity */
.proof-card__org {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.proof-card__org-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Accent-driven background */
  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.07);
  border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.13);
}

.proof-card__org-icon .icon--accent { color: var(--accent-hex); }

.proof-card__org-name {
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Org type — accent colored */
.proof-card__org-type {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent-hex);
}

/* Quote block */
.proof-card__quote-section {
  flex: 1;
  margin-bottom: 1.25rem;
  border: none;
  padding: 0;
}

.proof-card__quote-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: 0.5rem;
  color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.25);
}



/* Metrics 2-col grid */
.proof-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.proof-card__metric {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--c-navy);
  border: 1px solid var(--c-border-light);
}

.proof-card__metric-value {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  /* Accent colored value */
  color: var(--accent-hex);
}

.proof-card__metric-label {
  color: var(--c-text-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Tech tags */
.proof-card__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.proof-card__tech-tag {
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background-color: var(--c-navy);
  color: var(--c-text-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  border: 1px solid var(--c-border-light);
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────────
   10. TRUST BAR — grayscale → color on hover
   ───────────────────────────────────────────────────────────────────
   기본: grayscale(1) + opacity 0.45  →  무채색 로고 바
   호버: grayscale(0) + opacity 1.0   →  브랜드 컬러 살아남
   ───────────────────────────────────────────────────────────────── */

.proof__trust {
  padding-top: 2rem;
  border-top: 1px solid var(--c-border-light);
}

@media (min-width: 640px) { .proof__trust { padding-top: 2.5rem; } }

.proof__trust-label {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--c-text-dim);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 640px) { .proof__trust-label { margin-bottom: 2rem; } }

.proof__trust-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px)  { .proof__trust-grid { gap: 1.25rem; } }
@media (min-width: 1024px) { .proof__trust-grid { gap: 1.75rem; } }

.proof__trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.07);
    border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.13);
  cursor: default;
  /* ── grayscale 필터 ─────────────────────────────────────────────
     모든 자식 요소(텍스트·아이콘·SVG)를 회색화.
     opacity 0.45 로 한 번 더 죽여서 차분한 무채색 효과.          */
}

@media (min-width: 640px) {
  .proof__trust-item { padding: 0.625rem 1.25rem; }
}


/* 체크 아이콘 랩 */
.proof__trust-check {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 240, 255, 0.08);
  flex-shrink: 0;
}

/* 로고 이름 텍스트 */
.proof__trust-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-gray-300);       /* grayscale 필터 위에서 흰색에 가깝게 */
  white-space: nowrap;
}



/* ═══════════════════════════════════════════════════════════════════
   IONE NETWORKS — API Docs Page
   css/api-docs.css  ·  Phase 5
   Load order: css/style.css → css/api-docs.css
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Header ────────────────────────────────────────────────────── */

.api-docs__header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(10, 25, 47, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.08);
}

.api-docs__header-inner {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .api-docs__header-inner { height: 5rem; }
}

.api-docs__header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.api-docs__back-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--c-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.20s ease;
}

.api-docs__back-btn:hover { color: #ffffff; }

.api-docs__divider {
  display: none;
  color: var(--c-border-subtle);
  font-size: 1.125rem;
}

@media (min-width: 640px) { .api-docs__divider { display: block; } }

.api-docs__title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.api-docs__title {
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
}

.api-docs__version {
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.16);
  color: var(--c-cyan);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.api-docs__header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.api-docs__header-logo {
  display: none;
}

@media (min-width: 640px) { .api-docs__header-logo { display: flex; align-items: center; } }

.api-docs__header-logo-img {
  height: 1.75rem;
  width: auto;
}

.api-docs__mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: none;
  border: 1px solid var(--c-border-light);
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: color 0.20s ease, border-color 0.20s ease;
}

.api-docs__mobile-toggle:hover {
  color: #ffffff;
  border-color: rgba(0, 240, 255, 0.20);
}

@media (min-width: 1024px) { .api-docs__mobile-toggle { display: none; } }


/* ─── Layout ─────────────────────────────────────────────────────── */

.api-docs__layout {
  display: flex;
  min-height: calc(100vh - 4rem);
  position: relative;
}

@media (min-width: 640px) {
  .api-docs__layout { min-height: calc(100vh - 5rem); }
}


/* ─── Sidebar ────────────────────────────────────────────────────── */

.api-docs__sidebar {
  width: 17rem;
  flex-shrink: 0;
  position: fixed;
  top: 4rem;
  bottom: 0;
  left: 0;
  z-index: 40;
  background-color: var(--c-navy-deep);
  border-right: 1px solid var(--c-border-faint);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1);
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,0.3) transparent;
}

.api-docs__sidebar::-webkit-scrollbar { width: 4px; }
.api-docs__sidebar::-webkit-scrollbar-thumb { background-color: rgba(100,116,139,0.3); border-radius: 2px; }

@media (min-width: 640px) { .api-docs__sidebar { top: 5rem; } }

@media (min-width: 1024px) {
  .api-docs__sidebar {
    transform: translateX(0) !important;
    position: sticky;
    top: 5rem;
    height: calc(100vh - 5rem);
    align-self: flex-start;
  }
}

.api-docs__sidebar--open {
  transform: translateX(0);
}


/* ─── Sidebar Nav ────────────────────────────────────────────────── */

.api-docs__sidebar-nav {
  padding: 1.5rem 0.75rem;
}

.api-docs__sidebar-label {
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--c-text-dim);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.api-docs__sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.api-docs__sidebar-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-secondary);
  font-size: 0.875rem;
  text-align: left;
  transition: background-color 0.20s ease, color 0.20s ease;
}

.api-docs__sidebar-btn:hover {
  background-color: rgba(0, 240, 255, 0.04);
  color: #ffffff;
}

.api-docs__sidebar-btn--active {
  background-color: rgba(0, 240, 255, 0.06);
  color: var(--c-cyan);
  font-weight: 600;
}

.api-docs__sidebar-btn--active:hover {
  background-color: rgba(0, 240, 255, 0.10);
}


/* ─── Sidebar CTA ────────────────────────────────────────────────── */

.api-docs__sidebar-cta {
  padding: 1rem 0.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--c-border-faint);
}

.api-docs__sidebar-cta-card {
  padding: 1rem;
  border-radius: 0.75rem;
  background-color: rgba(0, 240, 255, 0.02);
  border: 1px solid rgba(0, 240, 255, 0.09);
}

.api-docs__sidebar-cta-title {
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.api-docs__sidebar-cta-desc {
  color: var(--c-text-secondary);
  font-size: 0.75rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}


/* ─── Overlay ────────────────────────────────────────────────────── */

.api-docs__overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

@media (min-width: 1024px) { .api-docs__overlay { display: none !important; } }


/* ─── Content ────────────────────────────────────────────────────── */

.api-docs__content {
  flex: 1;
  min-width: 0;
  padding: 2rem 1rem;
}

@media (min-width: 640px) { .api-docs__content { padding: 2.5rem 2rem; } }

@media (min-width: 1024px) { .api-docs__content { padding: 3rem; } }

.api-docs__content-inner {
  max-width: 52rem;
  margin: 0 auto;
}


/* ─── Section articles ────────────────────────────────────────────── */

.api-docs__section {
  display: block;
}

.api-docs__section[hidden] {
  display: none;
}

.api-docs__section-title {
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.api-docs__section-desc {
  color: var(--c-text-secondary);
  font-size: 0.875rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.api-docs__info-box {
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  background-color: rgba(0, 240, 255, 0.02);
  border: 1px solid rgba(0, 240, 255, 0.12);
}

.api-docs__info-label {
  color: var(--c-cyan);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}

.api-docs__info-value {
  color: var(--c-text-primary);
  font-size: 0.875rem;
  font-family: var(--font-mono);
}

.api-docs__subtitle {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: 1.5rem;
}

.api-docs__subtitle--mt { margin-top: 2rem; }

.api-docs__inline-code {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: rgba(6, 14, 31, 0.80);
  color: var(--c-cyan);
  font-size: 0.8125rem;
  font-family: var(--font-mono);
}


/* ─── Code Block ─────────────────────────────────────────────────── */

.api-code-block {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
  background-color: rgba(6, 14, 31, 0.85);
  border: 1px solid rgba(100, 116, 139, 0.18);
}

.api-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--c-border-faint);
}

.api-code-block__lang {
  color: var(--c-text-dim);
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-mono);
}

.api-code-block__copy-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--c-text-dim);
  transition: color 0.20s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
}

.api-code-block__copy-btn:hover { color: #ffffff; background-color: rgba(255,255,255,0.05); }
.api-code-block__copy-btn--copied { color: var(--c-cyan) !important; }

.api-code-block__body {
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--c-text-primary);
  font-family: var(--font-mono);
  margin: 0;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,0.3) transparent;
}


/* ─── Endpoint badge ─────────────────────────────────────────────── */

.api-endpoint {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  background-color: rgba(6, 14, 31, 0.60);
  border: 1px solid rgba(100, 116, 139, 0.18);
}

.api-endpoint__method {
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.api-endpoint__method--post   { background-color: rgba(0,230,118,0.12); color: var(--c-green); }
.api-endpoint__method--get    { background-color: rgba(0,240,255,0.12); color: var(--c-cyan); }
.api-endpoint__method--put    { background-color: rgba(245,158,11,0.12); color: var(--c-amber, #F59E0B); }
.api-endpoint__method--delete { background-color: rgba(255,107,107,0.12); color: var(--c-error); }

.api-endpoint__path {
  color: var(--c-text-primary);
  font-size: 0.875rem;
  font-family: var(--font-mono);
}


/* ─── Param Table ────────────────────────────────────────────────── */

.api-param-table {
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}

.api-param-table th {
  text-align: left;
  padding: 0.625rem 1rem;
  color: var(--c-text-secondary);
  font-weight: 600;
  font-size: 0.75rem;
  background-color: rgba(6, 14, 31, 0.60);
  border-bottom: 1px solid var(--c-border-faint);
}

.api-param-table td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(100,116,139,0.07);
  vertical-align: top;
}

.api-param-table tr:last-child td { border-bottom: none; }

.api-param-table__name  { color: var(--c-cyan); font-family: var(--font-mono); }
.api-param-table__type  { color: var(--c-text-secondary); font-family: var(--font-mono); }
.api-param-table__desc  { color: var(--c-text-primary); }

.api-param-table__required {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: rgba(0,240,255,0.09);
  color: var(--c-cyan);
  font-size: 0.6875rem;
  font-weight: 600;
}

.api-param-table__optional {
  color: var(--c-text-dim);
  font-size: 0.75rem;
}


/* ─── Error Table ────────────────────────────────────────────────── */

.api-error-table {
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}

.api-error-table th {
  text-align: left;
  padding: 0.625rem 1rem;
  color: var(--c-text-secondary);
  font-weight: 600;
  font-size: 0.75rem;
  background-color: rgba(6, 14, 31, 0.60);
  border-bottom: 1px solid var(--c-border-faint);
}

.api-error-table td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(100,116,139,0.07);
}

.api-error-table tr:last-child td { border-bottom: none; }

.api-error-table__code--success { color: var(--c-green); font-family: var(--font-mono); font-weight: 600; }
.api-error-table__code--error   { color: var(--c-error); font-family: var(--font-mono); font-weight: 600; }
.api-error-table__msg  { color: var(--c-text-primary); }
.api-error-table__desc { color: var(--c-text-secondary); }


/* ─── Nav Arrows ─────────────────────────────────────────────────── */

.api-docs__nav-arrows {
  max-width: 52rem;
  margin-top: 3rem;
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--c-border-light);
}

.api-docs__nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-secondary);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: color 0.20s ease, background-color 0.20s ease;
}

.api-docs__nav-btn:hover {
  color: var(--c-cyan);
  background-color: rgba(0,240,255,0.04);
}

/* ═══════════════════════════════════════════════════════════════════
   IONE NETWORKS — Hero Section Precision CSS
   css/hero.css  ·  Phase 3: High-Fidelity Build
   ─────────────────────────────────────────────────────────────────
   Load order:  css/style.css  →  css/hero.css  (this file)
   Fonts: 구글 폰트는 style.css에서 단일 호출 — 중복 @import 없음.
   ─────────────────────────────────────────────────────────────────
   Pixel-extracted values from video analysis (ffmpeg frame analysis):
     Background:      rgb(9,  24, 47)  → var(--c-navy)  ✓
     Particle cyan:   rgb(13,184,236)  → rgba(0,240,255,α)
     Title cyan line: rgb(17,187,241)  → #11BBF1
     Counter core:    rgb(10,231,247)  → #0AE7F7
     Button grad L:   rgb( 8,121,149)  → #00C4D4
     Button grad R:   rgb( 4, 86,178)  → #0057E8
     Stat card bg:    rgb(13, 29, 54)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Hero-scoped custom properties ────────────────────────────── */
.hero {
  --hero-particle-color: rgba(0, 240, 255, 1);
  --hero-counter-color:  #0AE7F7;
  --hero-title-cyan:     #11BBF1;
  --hero-btn-l:          #00C4D4;   /* Left  of gradient (measured) */
  --hero-btn-r:          #0057E8;   /* Right of gradient (measured) */
  --hero-stat-bg:        rgba(13, 29, 54, 0.80);
  --hero-stat-border:    rgba(50, 80, 120, 0.45);
  --hero-stat-border-hover: rgba(0, 240, 255, 0.30);

  /* timing tokens — match Framer Motion values exactly */
  --hero-t-badge:   1.0s;
  --hero-t-h1:      0.8s;
  --hero-t-sub:     0.8s;
  --hero-t-counter: 1.0s;
  --hero-t-cta:     0.8s;
  --hero-t-stat:    0.6s;
  --hero-t-scroll:  0.8s;

  /* easing: cubic ease-out matching React spring default */
  --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION — Layout Shell
   ═══════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100svh;           /* use svh for mobile browser chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 5rem;            /* clear fixed header */
  background-color: var(--c-navy);
}

/* ─── Background layer ──────────────────────────────────────────── */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--c-navy);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image:
      linear-gradient(var(--c-cyan) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-cyan) 1px, transparent 1px);
    background-size: 80px 80px;
}

/* ─── Atmospheric glow orbs ─────────────────────────────────────── */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.hero__glow--top {
  top: -5%;
  left: 20%;
  width: 55vw;
  height: 55vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(
    circle,
    rgba(0, 240, 255, 0.028) 0%,
    transparent 65%
  );
  filter: blur(40px);
  animation: heroGlowPulse 6s ease-in-out infinite;
}

.hero__glow--bottom {
  bottom: -10%;
  right: 15%;
  width: 45vw;
  height: 45vw;
  max-width: 580px;
  max-height: 580px;
  background: radial-gradient(
    circle,
    rgba(0, 102, 255, 0.038) 0%,
    transparent 65%
  );
  filter: blur(40px);
  animation: heroGlowPulse 6s ease-in-out infinite 2s;
}

/* Dot-grid texture overlay */
.hero__grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.022;
  background-image:
    radial-gradient(circle, rgba(0, 240, 255, 0.9) 1px, transparent 1px);
  background-size: 48px 48px;
}

.hero__grid {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image:
      linear-gradient(var(--c-cyan) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-cyan) 1px, transparent 1px);
    background-size: 80px 80px;
  }

/* ─── Content container ─────────────────────────────────────────── */
.hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .hero__content { padding: 5rem 2rem 6rem; }
}

@media (min-width: 1024px) {
  .hero__content { padding: 6rem 2rem 7rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   HERO BADGE  ("Since 2009")
   Pixel data: bg ≈ rgb(11, 42, 63), text ≈ rgb(53, 177, 189)
   Animation: opacity 0→1, scale 0.9→1, delay 0.4s, dur 1.0s
   ═══════════════════════════════════════════════════════════════════ */

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 1rem;
  margin-bottom: 1.75rem;
  border-radius: 9999px;
  background-color: rgba(0, 240, 255, 0.055);
  border: 1px solid rgba(0, 240, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* entrance */
  opacity: 0;
  transform: scale(0.92);
  animation: heroFadeScale var(--hero-t-badge) var(--hero-ease) 0.4s forwards;
}

.hero__badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--c-cyan);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
  flex-shrink: 0;
  animation: heroDotPulse 2.4s ease-in-out infinite;
}

.hero__badge-text {
  color: rgba(53, 200, 220, 0.95);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   HERO HEADLINE
   White line 1: rgb(157,219,242)  Cyan line 2: rgb(17,187,241)
   Animation: opacity 0→1, y 30→0, delay 0.1s, dur 0.8s
   ═══════════════════════════════════════════════════════════════════ */


@media (min-width: 640px) {
  .hero__title { margin-bottom: 1.375rem; }
}

/* Line 2 — cyan gradient */
.hero__title-accent {
  display: block;
  /* Measured gradient: #11BBF1 left-edge, #05A3FF right-edge */
  background: linear-gradient(135deg, #11BBF1 0%, #0077FF 60%, #1EC8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  /* Subtle text-shadow simulated via filter glow on parent */
}

/* ─── Subtitle ──────────────────────────────────────────────────── */
.hero__subtitle {
  max-width: 44rem;
  margin: 0 auto 2.25rem;
  padding: 0 0.5rem;
  color: var(--c-text-secondary);
  font-size: clamp(0.9375rem, 1.8vw, 1.1875rem);
  line-height: 1.82;
  letter-spacing: 0.008em;

  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp var(--hero-t-sub) var(--hero-ease) 0.2s forwards;
}


/* ═══════════════════════════════════════════════════════════════════
   BIG COUNTER
   Core color: rgb(10,231,247) ≈ #0AE7F7
   Glow halo:  rgba(15,126,146,0.6) → shadow-blur simulation
   Animation: opacity 0→1, scale 0.9→1, delay 0.4s, dur 1.0s
   CountUp: 0 → 1,000,000,000 in 3000ms, cubic ease-out
   ═══════════════════════════════════════════════════════════════════ */

.hero__counter {
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: scale(0.9);
  animation: heroFadeScale var(--hero-t-counter) var(--hero-ease) 0.4s forwards;
}

@media (min-width: 640px) {
  .hero__counter { margin-bottom: 3.25rem; }
}

.hero__counter-value {
  font-family: var(--font-mono);
  font-size: clamp(2.125rem, 6.5vw, 5rem);  /* 34–80px */
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--hero-counter-color);
  user-select: none;
 
}

.hero__counter-plus {
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.72em;
  margin-left: 0.06em;
}

.hero__counter-label {
  margin-top: 0.625rem;
  font-size: clamp(0.8125rem, 1.4vw, 1rem);
  color: var(--c-text-secondary);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════
   CTA BUTTON GROUP
   Animation: opacity 0→1, y 30→0, delay 0.5s, dur 0.8s
   ═══════════════════════════════════════════════════════════════════ */

.hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3.75rem;
  padding: 0 1rem;

  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp var(--hero-t-cta) var(--hero-ease) 0.5s forwards;
}

@media (min-width: 540px) {
  .hero__cta-group {
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 4.5rem;
  }
}

/* ─── Primary CTA (Gradient Button) ─────────────────────────────── */
/* Pixel-measured gradient: L=#00C4D4, R=#0057E8 */
.hero__cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.75rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;

  background: linear-gradient(
    135deg,
    var(--hero-btn-l) 0%,
    #0088EE 45%,
    var(--hero-btn-r) 100%
  );
  background-size: 200% 200%;
  background-position: 0% 50%;

  /* Resting glow */
  box-shadow:
    0 4px 20px rgba(0, 196, 212, 0.30),
    0 1px 0 rgba(255,255,255,0.08) inset;

  transition:
    box-shadow    0.25s ease,
    transform     0.18s ease,
    background-position 0.5s ease,
    filter        0.25s ease;
}

.hero__cta-primary:hover {
  background-position: 100% 50%;
  box-shadow:
    0 6px 32px rgba(0, 210, 255, 0.48),
    0 0  48px rgba(0, 180, 255, 0.18),
    0 1px 0 rgba(255,255,255,0.12) inset;
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.hero__cta-primary:active {
  transform: translateY(0px);
  box-shadow:
    0 2px 12px rgba(0, 196, 212, 0.30),
    0 1px 0 rgba(255,255,255,0.08) inset;
  filter: brightness(0.97);
}

/* Arrow icon — slides right on hover */
.hero__cta-arrow {
  display: inline-flex;
  transition: transform 0.22s var(--hero-ease);
}

.hero__cta-primary:hover .hero__cta-arrow {
  transform: translateX(5px);
}

/* ─── Secondary CTA (Outline) ────────────────────────────────────── */
.hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.75rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-gray-300);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(100, 116, 139, 0.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    color       0.20s ease,
    border-color 0.20s ease,
    background  0.20s ease,
    transform   0.18s ease,
    box-shadow  0.20s ease;
}

.hero__cta-secondary:hover {
  color: #ffffff;
  border-color: rgba(0, 240, 255, 0.28);
  background: rgba(0, 240, 255, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.08);
}

.hero__cta-secondary:active {
  transform: translateY(0);
}

@media (min-width: 540px) {
  .hero__cta-primary,
  .hero__cta-secondary {
    width: auto;
    min-width: 10.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   STAT CARDS GRID
   Pixel data: bg=rgb(13,29,54), border=rgba(50,80,120,0.45)
   Animation: opacity 0→1, y 40→0
     card[0]: delay 0.6s
     card[1]: delay 0.7s
     card[2]: delay 0.8s
   Duration: 0.6s each, cubic ease-out
   ═══════════════════════════════════════════════════════════════════ */

.hero__stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 0.5rem;
}

@media (min-width: 640px) {
  .hero__stats-grid { gap: 1.25rem; }
}

/* Individual stat card */
.hero__stat-card {
  position: relative;
  /* Default: hidden, animated via JS class toggle for IntersectionObserver */
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity  var(--hero-t-stat) var(--hero-ease),
    transform var(--hero-t-stat) var(--hero-ease);
}

/* JS adds .is-visible → triggers entrance */
.hero__stat-card.is-visible { opacity: 1; transform: translateY(0); }

/* Stagger delays */
.hero__stat-card:nth-child(1) { transition-delay: 0.60s; }
.hero__stat-card:nth-child(2) { transition-delay: 0.70s; }
.hero__stat-card:nth-child(3) { transition-delay: 0.80s; }

/* Hover glow overlay */
.hero__stat-card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  background: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.07) 0%,
    transparent 70%
  );
}

.hero__stat-card:hover .hero__stat-card-glow { opacity: 1; }

/* Card inner box */
.hero__stat-card-inner {
  position: relative;
  padding: 1.125rem 0.875rem;
  border-radius: 0.875rem;
  /* Measured: bg rgb(13,29,54), border rgba(50,80,120,0.45) */
  background-color: var(--hero-stat-bg);
  border: 1px solid var(--hero-stat-border);
  text-align: center;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease,
    transform    0.20s ease;
  overflow: hidden;
}

@media (min-width: 640px) {
  .hero__stat-card-inner { padding: 1.5rem 1rem; }
}

.hero__stat-card:hover .hero__stat-card-inner {
  border-color: var(--hero-stat-border-hover);
  box-shadow: 0 4px 24px rgba(0, 240, 255, 0.09);
  transform: translateY(-2px);
}

/* Subtle shimmer on hover */
.hero__stat-card-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(0, 240, 255, 0.04) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: background-position 0.6s ease;
  pointer-events: none;
}

.hero__stat-card:hover .hero__stat-card-inner::after {
  background-position: 200% 0;
}

/* Stat icon */
.hero__stat-icon {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0 auto 0.625rem;
  /* Measured: rgb(58,161,183) → roughly 50% opacity cyan */
  color: rgba(0, 220, 255, 0.65);
}

@media (min-width: 640px) {
  .hero__stat-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.75rem;
  }
}

/* Stat value — white + small cyan suffix */
.hero__stat-value {
  color: #ffffff;
  font-size: clamp(1.375rem, 3.2vw, 2.125rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero__stat-suffix {
  color: var(--c-cyan);
  font-size: 0.68em;
  letter-spacing: 0;
  margin-left: 0.04em;
}

/* Stat label */
.hero__stat-label {
  margin-top: 0.375rem;
  color: var(--c-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════════════
   SCROLL INDICATOR
   Animation: opacity 0→1 at 1.5s delay
   Dot motion: y [0, 12, 0] loop, dur 1.5s
   ═══════════════════════════════════════════════════════════════════ */

.hero__scroll {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  opacity: 0;
  animation: heroFadeIn 0.8s ease 1.5s forwards;
}

@media (min-width: 640px) {
  .hero__scroll { display: block; }
}

.hero__scroll-track {
  width: 1.625rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(100, 116, 139, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.4375rem;
}

.hero__scroll-dot {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--c-cyan);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
  animation: heroScrollBounce 1.5s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */

/* Entrance: translate Y up + fade */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrance: scale up + fade */
@keyframes heroFadeScale {
  from {
    opacity: 0;
    transform: scale(0.90);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Simple fade-in */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Badge live dot pulse */
@keyframes heroDotPulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
  }
  50% {
    opacity: 0.45;
    box-shadow: 0 0 3px rgba(0, 240, 255, 0.3);
  }
}

/* Background glow orb breathing */
@keyframes heroGlowPulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.60; transform: scale(1.08); }
}

/* Scroll dot bounce — y: [0, 12, 0] */
@keyframes heroScrollBounce {
  0%        { transform: translateY(0px);  opacity: 1;   }
  50%       { transform: translateY(11px); opacity: 0.5; }
  100%      { transform: translateY(0px);  opacity: 1;   }
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .hero__counter-value { font-size: 1.875rem; letter-spacing: -0.05em; }
  .hero__stat-card-inner { padding: 0.875rem 0.625rem; }
  .hero__stat-value { font-size: 1.25rem; }
}

@media (min-width: 1280px) {
  .hero__content { padding-top: 7rem; }
  .hero__stats-grid { max-width: 44rem; gap: 1.5rem; }
}

/* Reduced motion: skip all entrance animations */
@media (prefers-reduced-motion: reduce) {
  .hero__badge,
  .hero__title,
  .hero__subtitle,
  .hero__counter,
  .hero__cta-group {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero__stat-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__scroll-dot { animation: none; }
  .hero__glow--top, .hero__glow--bottom { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   IONE NETWORKS — Design System Foundation
   css/style.css  ·  Phase 1: Design System Build
   ─────────────────────────────────────────────────────────────────
   Table of Contents
   ─────────────────────────────────────────────────────────────────
   01. FONT IMPORTS
   02. RESET
   03. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
       ├─ 3.1 Brand Colors
       ├─ 3.2 Accent / Hover States
       ├─ 3.3 Semantic Colors
       ├─ 3.4 Code Syntax Tokens
       ├─ 3.5 Surface Colors (Navy Scale)
       ├─ 3.6 Text Colors
       ├─ 3.7 Gray Palette
       ├─ 3.8 Border Colors
       ├─ 3.9 Spacing Scale
       ├─ 3.10 Border Radii
       ├─ 3.11 Typography
       ├─ 3.12 Elevation / Glow / Shadow
       ├─ 3.13 Transitions
       └─ 3.14 Brand / Accent Modifier System
   04. TYPOGRAPHY
       ├─ 4.1 Base
       ├─ 4.2 Headings
       ├─ 4.3 Display Text
       └─ 4.4 Utility Text Classes
   05. LAYOUT COMPONENTS (BEM)
       ├─ 5.1 Page Wrapper & Container
       ├─ 5.2 Glassmorphism
       ├─ 5.3 Gradient Text
       ├─ 5.4 Section Anatomy
       ├─ 5.5 Button System
       ├─ 5.6 Badge
       ├─ 5.7 Tag / Chip
       ├─ 5.8 Card (Glass)
       ├─ 5.9 Icon System
       ├─ 5.10 Form Controls
       └─ 5.11 Utility Helpers
   06. ANIMATIONS
   07. RESPONSIVE VISIBILITY HELPERS
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   01. FONT IMPORTS
   ═══════════════════════════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');


   /* ═══════════════════════════════════════════════════════════════════
      02. RESET
      Opinionated minimal reset — zero out UA defaults, enforce
      box-sizing, remove implicit list/form styles.
      ═══════════════════════════════════════════════════════════════════ */
   
   
   
   html {
     font-size: 16px;
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
     tab-size: 2;
   }
   
   body {
     min-height: 100vh;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
     font-family: sans-serif;
   }
   
   img,
   video,
   svg {
     display: block;
     max-width: 100%;
   }
   
   button,
   input,
   select,
   textarea {
     font: inherit;
     color: inherit;
     background: transparent;
     border: none;
     outline: none;
   }
   
   button {
     cursor: pointer;
   }
   
   a {
     text-decoration: none;
     color: inherit;
   }
   
   ul,
   ol {
     list-style: none;
   }
   
   table {
     border-collapse: collapse;
   }
   
   address {
     font-style: normal;
   }
   
   fieldset {
     border: none;
     padding: 0;
     margin: 0;
   }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      03. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
      Single source of truth — extracted from design analysis.
      ═══════════════════════════════════════════════════════════════════ */
   
   :root {
   
     /* ─── 3.1 Brand Colors ─────────────────────────────────────────── */
     --c-cyan:   #00F0FF;
     --c-blue:   #0066FF;
     --c-purple: #6C63FF;
     --c-orange: #FF6B35;
     --c-green:  #00E676;
   
     /* ─── 3.2 Accent / Hover States ───────────────────────────────── */
     --c-cyan-light:   #67e8f9;
     --c-purple-light: #a78bfa;
     --c-orange-light: #fb923c;
     --c-green-light:  #4ade80;
   
     /* ─── 3.3 Semantic Colors ─────────────────────────────────────── */
     --c-error:   #FF6B6B;
     --c-warning: #FFC107;
     --c-danger:  #FF5252;
     --c-amber:   #FFB74D;
   
     /* ─── 3.4 Code Syntax Token Colors ───────────────────────────── */
     --c-token-string:  #A8FF60;
     --c-token-param:   #FFD580;
     --c-token-comment: #4A6741;
   
     /* ─── 3.5 Surface Colors (Navy Scale) ─────────────────────────── */
     --c-navy:      #0A192F;  /* Primary background                   */
     --c-navy-light: #112240; /* Card / elevated surface              */
     --c-navy-deep:  #060E1F; /* Footer / deepest layer               */
   
     /* ─── 3.6 Text Colors ─────────────────────────────────────────── */
     --c-text-primary:   #CCD6F6; /* Body copy on dark                */
     --c-text-secondary: #8892B0; /* Descriptions, labels             */
     --c-text-dim:       #4A5568; /* Placeholder, copyright, muted    */
   
     /* ─── 3.7 Gray Palette (Neutral UI) ──────────────────────────── */
     --c-gray-300:  #d1d5db;
     --c-gray-400:  #9ca3af;
     --c-gray-500:  #6b7280;
     --c-gray-600:  #4b5563;
     --c-gray-slate: #64748b;
   
     /* ─── 3.8 Border Colors ───────────────────────────────────────── */
     --c-border:           rgba(100, 116, 139, 0.30);
     --c-border-light:     rgba(100, 116, 139, 0.15);
     --c-border-faint:     rgba(100, 116, 139, 0.10);
     --c-border-subtle:    rgba(100, 116, 139, 0.20);
     --c-border-cyan:      rgba(0, 240, 255, 0.12);
     --c-border-cyan-hover:rgba(0, 240, 255, 0.37);
   
     /* ─── 3.9 Spacing Scale ───────────────────────────────────────── */
     --sp-1:  0.25rem;  /*  4px */
     --sp-2:  0.50rem;  /*  8px */
     --sp-3:  0.75rem;  /* 12px */
     --sp-4:  1.00rem;  /* 16px */
     --sp-5:  1.25rem;  /* 20px */
     --sp-6:  1.50rem;  /* 24px */
     --sp-8:  2.00rem;  /* 32px */
     --sp-10: 2.50rem;  /* 40px */
     --sp-12: 3.00rem;  /* 48px */
   
     /* Section-level rhythm */
     --sp-section-sm: 4rem;   /*  64px */
     --sp-section-md: 6rem;   /*  96px */
     --sp-section-lg: 8rem;   /* 128px */
   
     /* ─── 3.10 Border Radii ───────────────────────────────────────── */
     --r-sm:   0.25rem;  /*  4px */
     --r-md:   0.50rem;  /*  8px */
     --r-lg:   0.75rem;  /* 12px */
     --r-xl:   1.00rem;  /* 16px */
     --r-2xl:  1.25rem;  /* 20px */
     --r-full: 9999px;
   
     /* ─── 3.11 Typography ─────────────────────────────────────────── */
     --font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Inter;
     --font-mono: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Inter;
   
     /* Size Scale (fluid-friendly reference values) */
     --text-xs:   0.75rem;   /* 12px */
     --text-sm:   0.8125rem; /* 13px */
     --text-base: 0.875rem;  /* 14px */
     --text-md:   1rem;      /* 16px */
     --text-lg:   1.125rem;  /* 18px */
     --text-xl:   1.25rem;   /* 20px */
     --text-2xl:  1.375rem;  /* 22px */
     --text-3xl:  1.5rem;    /* 24px */
   
     /* Weight Aliases */
     --fw-normal:    400;
     --fw-medium:    500;
     --fw-semibold:  600;
     --fw-bold:      700;
     --fw-extrabold: 800;
     --fw-black:     900;
   
     /* Letter Spacing — tech brand defaults */
     --ls-tight:    -0.025em;  /* Large display headings        */
     --ls-snug:     -0.02em;   /* Section titles                */
     --ls-normal:    0em;
     --ls-label:     0.08em;   /* ALL-CAPS labels               */
     --ls-badge:     0.12em;   /* Badge / section-label         */
     --ls-mono:      0.02em;   /* Monospace tracking            */
   
     /* Line Heights */
     --lh-tight:  1.15;
     --lh-snug:   1.25;
     --lh-normal: 1.5;
     --lh-body:   1.70;
     --lh-loose:  1.80;
   
     /* ─── 3.12 Elevation / Glow / Shadow ─────────────────────────── */
     --glow-cyan-sm: 0 4px 24px rgba(0, 240, 255, 0.19);
     --glow-cyan-md: 0 4px 24px rgba(0, 240, 255, 0.30);
     --glow-cyan-lg: 0 8px 32px rgba(0, 240, 255, 0.30);
     --shadow-deep:  0 25px 50px -12px rgba(0, 0, 0, 0.50);
     --shadow-card:  0 10px 30px rgba(0, 0, 0, 0.30);
   
     /* ─── 3.13 Transitions ────────────────────────────────────────── */
     --transition-fast:   0.15s ease;
     --transition-normal: 0.30s ease;
     --transition-slow:   0.50s ease;
   
     /* ─── 3.14 Brand / Accent Modifier System ─────────────────────
        Usage: add .brand--cyan (etc.) to a parent element, then
        child elements consume --brand-r / --brand-g / --brand-b for
        rgba() without hard-coding per-color values.
        ────────────────────────────────────────────────────────────── */
     /* Set defaults to cyan so bare consumers don't break */
     --brand-r: 0;
     --brand-g: 240;
     --brand-b: 255;
     --brand-hex: #00F0FF;
   
     --accent-r: 0;
     --accent-g: 240;
     --accent-b: 255;
     --accent-hex: #00F0FF;
   }
   
   /* Brand modifier classes */
   .brand--cyan    { --brand-r: 0;   --brand-g: 240; --brand-b: 255; --brand-hex: #00F0FF; }
   .brand--violet  { --brand-r: 167; --brand-g: 139; --brand-b: 250; --brand-hex: #A78BFA; }
   .brand--amber   { --brand-r: 245; --brand-g: 158; --brand-b: 11;  --brand-hex: #F59E0B; }
   .brand--emerald { --brand-r: 16;  --brand-g: 185; --brand-b: 129; --brand-hex: #10B981; }
   .brand--indigo  { --brand-r: 108; --brand-g: 99;  --brand-b: 255; --brand-hex: #6C63FF; }
   .brand--orange  { --brand-r: 255; --brand-g: 107; --brand-b: 53;  --brand-hex: #FF6B35; }
   .brand--gold    { --brand-r: 255; --brand-g: 193; --brand-b: 7;   --brand-hex: #FFC107; }
   .brand--silver  { --brand-r: 156; --brand-g: 163; --brand-b: 175; --brand-hex: #9CA3AF; }
   
   /* Accent modifier classes (proof-card color system) */
   .accent--cyan   { --accent-r: 0;   --accent-g: 240; --accent-b: 255; --accent-hex: #00F0FF; }
   .accent--purple { --accent-r: 108; --accent-g: 99;  --accent-b: 255; --accent-hex: #6C63FF; }
   .accent--orange { --accent-r: 255; --accent-g: 107; --accent-b: 53;  --accent-hex: #FF6B35; }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      04. TYPOGRAPHY
      ═══════════════════════════════════════════════════════════════════ */
   
   /* ─── 4.1 Base ──────────────────────────────────────────────────── */
   
   body {
     font-family: var(--font-sans);
     font-size: var(--text-md);
     font-weight: var(--fw-normal);
     color: var(--c-text-primary);
     background-color: var(--c-navy);
     line-height: var(--lh-normal);
   }
   
   /* ─── 4.2 Headings ──────────────────────────────────────────────── */
   
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-sans);
     font-weight: var(--fw-extrabold);
     color: #ffffff;
     line-height: var(--lh-snug);
     letter-spacing: var(--ls-snug);
   }
   
   /* Fluid heading scale — clamp(min, preferred, max) */
   h1 { font-size: clamp(2rem, 5vw, 3.75rem); }    /* 32–60px  */
   h2 { font-size: clamp(1.5rem, 3.5vw, 2.625rem); } /* 24–42px  */
   h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); } /* 20–30px  */
   h4 { font-size: clamp(1.125rem, 2vw, 1.5rem); }   /* 18–24px  */
   h5 { font-size: var(--text-xl); }
   h6 { font-size: var(--text-lg); }
   
   /* ─── 4.3 Display Text ──────────────────────────────────────────── */
   /* High-impact hero numbers and stats */
   
   .display--hero {
     font-family: var(--font-mono);
     font-size: clamp(2rem, 6vw, 4.5rem);
     font-weight: var(--fw-extrabold);
     letter-spacing: var(--ls-tight);
     line-height: 1;
     color: var(--c-cyan);
     text-shadow:
       0 0 40px rgba(0, 240, 255, 0.19),
       0 0 80px rgba(0, 240, 255, 0.06);
   }
   
   .display--404 {
     font-family: var(--font-mono);
     font-size: clamp(4rem, 15vw, 7.5rem);
     font-weight: var(--fw-extrabold);
     letter-spacing: var(--ls-tight);
     line-height: 1;
     color: var(--c-cyan);
     text-shadow: 0 0 60px rgba(0, 240, 255, 0.15);
     user-select: none;
   }
   
   /* ─── 4.4 Utility Text Classes ──────────────────────────────────── */
   
   /* Section anatomy labels */
   .section-label {
     display: block;
     color: var(--c-cyan);
     font-size: var(--text-sm);
     font-weight: var(--fw-semibold);
     letter-spacing: var(--ls-badge);
     text-transform: uppercase;
     margin-bottom: var(--sp-3);
   }
   
   .section-title {
     color: #ffffff;
     font-size: clamp(1.5rem, 3.5vw, 2.625rem);
     font-weight: var(--fw-extrabold);
     line-height: var(--lh-tight);
     letter-spacing: var(--ls-snug);
     margin-bottom: var(--sp-4);
   }
   
   .section-desc {
     color: var(--c-text-secondary);
     font-size: var(--text-md);
     line-height: var(--lh-body);
     max-width: 42rem;
     margin-left: auto;
     margin-right: auto;
   }
   
   /* Monospace text */
   .mono-text {
     font-family: var(--font-mono);
     letter-spacing: var(--ls-mono);
   }
   
   /* Gradient text accents */
   .gradient-text--cyan {
     background-image: linear-gradient(135deg, var(--c-cyan), var(--c-blue));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   .gradient-text--purple {
     background-image: linear-gradient(135deg, var(--c-cyan), var(--c-purple));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   /* Code syntax token colors */
   .code-token--cyan    { color: var(--c-cyan); }
   .code-token--muted   { color: var(--c-text-secondary); }
   .code-token--string  { color: var(--c-token-string); }
   .code-token--param   { color: var(--c-token-param); }
   .code-token--comment { color: var(--c-token-comment); }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      05. LAYOUT COMPONENTS (BEM)
      ═══════════════════════════════════════════════════════════════════ */
   
   /* ─── 5.1 Page Wrapper & Container ─────────────────────────────── */
   
   .page-wrapper {
     min-height: 100vh;
     width: 100%;
     background-color: var(--c-navy);
     font-family: var(--font-sans);
   }
   
   /*
     .container — constrained content lane
     Modifiers:
       .container--narrow  → 72rem max
       .container--wide    → 90rem max
       .container--full    → no max-width
   */
   .container {
     max-width: 80rem;
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--sp-4);
     padding-right: var(--sp-4);
   }
   
   @media (min-width: 640px) {
     .container {
       padding-left: var(--sp-6);
       padding-right: var(--sp-6);
     }
   }
   
   @media (min-width: 1024px) {
     .container {
       padding-left: var(--sp-8);
       padding-right: var(--sp-8);
     }
   }
   
   .container--narrow { max-width: 72rem; }
   .container--wide   { max-width: 90rem; }
   .container--full   { max-width: none; }
   
   /*
     .section — standard vertical rhythm block
     Modifiers: --sm / --md / --lg
   */
   .section {
     position: relative;
     padding-top: var(--sp-section-sm);
     padding-bottom: var(--sp-section-sm);
   }
   
   @media (min-width: 640px) {
     .section {
       padding-top: var(--sp-section-md);
       padding-bottom: var(--sp-section-md);
     }
   }
   
   @media (min-width: 1024px) {
     .section {
       padding-top: var(--sp-section-lg);
       padding-bottom: var(--sp-section-lg);
     }
   }
   
   .section--sm {
     padding-top: var(--sp-section-sm);
     padding-bottom: var(--sp-section-sm);
   }
   
   .section__header {
     text-align: center;
     margin-bottom: var(--sp-12);
   }
   
   @media (min-width: 640px) {
     .section__header { margin-bottom: 4rem; }
   }
   
   
   /* ─── 5.2 Glassmorphism ─────────────────────────────────────────── */
   /*
     .glass — base glass surface
     Modifiers:
       .glass--card    → rounded, bordered glass card
       .glass--panel   → heavier blur, used for modals/forms
       .glass--header  → nav bar glassmorphism
   */
   .glass {
     background-color: rgba(17, 34, 64, 0.45);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
   }
   
   .glass--card {
     background-color: rgba(17, 34, 64, 0.45);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px solid var(--c-border-subtle);
     border-radius: var(--r-xl);
   }
   
   .glass--panel {
     background-color: rgba(17, 34, 64, 0.50);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(100, 116, 139, 0.20);
     border-radius: var(--r-xl);
   }
   
   .glass--header {
     background-color: rgba(10, 25, 47, 0.92);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-bottom: 1px solid rgba(0, 240, 255, 0.08);
     box-shadow: 0 4px 30px rgba(0, 240, 255, 0.03);
   }
   
   .glass--surface {
     background-color: rgba(17, 34, 64, 0.60);
     border: 1px solid rgba(100, 116, 139, 0.15);
     border-radius: var(--r-lg);
   }
   
   /* Hover glow overlay — place as first child inside .glass--card */
   .glass__hover-glow {
     position: absolute;
     inset: 0;
     opacity: 0;
     pointer-events: none;
     transition: opacity var(--transition-slow);
     border-radius: inherit;
     background: radial-gradient(
       ellipse at top left,
       rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.03),
       transparent 70%
     );
   }
   
   .glass--card:hover .glass__hover-glow { opacity: 18; }
   
   
   /* ─── 5.3 Gradient Text (alias → typography section) ────────────
      Kept here as BEM aliases for component usage.
      ──────────────────────────────────────────────────────────────── */
   
   .gradient-text-cyan   { @extend .gradient-text--cyan; }
   .gradient-text-purple { @extend .gradient-text--purple; }
   /* Note: if not using a pre-processor, use .gradient-text--cyan directly */
   
   
   /* ─── 5.4 Section Anatomy ──────────────────────────────────────── */
   /* Decorative background elements for sections */
   
   .bg-glow {
     position: absolute;
     border-radius: 50%;
     pointer-events: none;
   }
   
   .bg-glow--cyan-top {
     top: 0;
     left: 25%;
     width: 600px;
     height: 600px;
     filter: blur(180px);
     background-color: rgba(0, 240, 255, 0.024);
     animation: pulse 4s ease-in-out infinite;
   }
   
   .bg-glow--blue-bottom {
     bottom: 0;
     right: 25%;
     width: 500px;
     height: 500px;
     filter: blur(180px);
     background-color: rgba(0, 102, 255, 0.04);
     animation: pulse 4s ease-in-out infinite 1s;
   }
   
   .bg-glow--center {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 900px;
     height: 500px;
     filter: blur(200px);
     background-color: rgba(0, 240, 255, 0.012);
   }
   
   .bg-grid {
     position: absolute;
     inset: 0;
     opacity: 0.025;
     pointer-events: none;
     background-image:
       linear-gradient(var(--c-cyan) 1px, transparent 1px),
       linear-gradient(90deg, var(--c-cyan) 1px, transparent 1px);
     background-size: 80px 80px;
   }
   
   .bg-grid--sm {
     background-size: 60px 60px;
   }
   
   
   /* ─── 5.5 Button System (BEM) ──────────────────────────────────── */
   /*
     Base:  .btn
     Sizes: .btn--sm  .btn--md (default)  .btn--lg
     Types: .btn--primary  .btn--outline  .btn--ghost  .btn--link
   */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--sp-2);
     padding: 0.75rem 1.5rem;
     border-radius: var(--r-lg);
     font-size: var(--text-md);
     font-weight: var(--fw-semibold);
     line-height: 1;
     border: 1px solid transparent;
     cursor: pointer;
     text-decoration: none;
     transition: all var(--transition-fast);
     white-space: nowrap;
     user-select: none;
   }
   
   /* Sizes */
   .btn--sm  { padding: 0.5rem 1.125rem;  font-size: var(--text-sm);  border-radius: var(--r-md); }
   .btn--md  { padding: 0.75rem 1.5rem;   font-size: var(--text-base); }
   .btn--lg  { padding: 1rem 2rem;        font-size: var(--text-md); }
   
   /* Primary — cyan gradient */
   .btn--primary {
     background: linear-gradient(135deg, var(--c-cyan), var(--c-blue));
     color: #ffffff;
     border-color: transparent;
   }
   
   
   .btn--primary:active { filter: brightness(0.96); }
   
   /* Outline — bordered, transparent bg */
   .btn--outline {
     background: transparent;
     color: var(--c-gray-300);
     border-color: var(--c-gray-600);
   }
   
   .btn--outline:hover {
     color: #ffffff;
     border-color: var(--c-gray-400);
   }
   
   /* Cyan Outline */
   .btn--outline-cyan {
     background: transparent;
     color: var(--c-cyan);
     border-color: rgba(0, 240, 255, 0.25);
   }
   
   .btn--outline-cyan:hover {
     background-color: rgba(0, 240, 255, 0.06);
     border-color: rgba(0, 240, 255, 0.5);
   }
   
   /* Ghost — no border, subtle hover */
   .btn--ghost {
     background: transparent;
     color: var(--c-text-secondary);
     border-color: transparent;
   }
   
   .btn--ghost:hover {
     color: #ffffff;
     background-color: rgba(255, 255, 255, 0.05);
   }
   
   /* Link — text-only */
   .btn--link {
     background: transparent;
     color: var(--c-cyan);
     border-color: transparent;
     padding-left: 0;
     padding-right: 0;
   }
   
   .btn--link:hover { opacity: 0.8; }
   
   /* Arrow icon inside button — animates on hover */
   .btn__arrow {
     transition: transform var(--transition-fast);
   }
   
   .btn:hover .btn__arrow { transform: translateX(4px); }
   
   /* Loading / disabled state */
   .btn:disabled,
   .btn[aria-disabled="true"] {
     opacity: 0.6;
     cursor: not-allowed;
     pointer-events: none;
   }
   
   
   /* ─── 5.6 Badge ─────────────────────────────────────────────────── */
   /*
     .badge — small inline status/label element
     Modifiers: --cyan (default) / --green / --orange / --purple
   */
   
   .badge {
     display: inline-flex;
     align-items: center;
     gap: var(--sp-2);
     padding: 0.375rem 0.875rem;
     border-radius: var(--r-full);
     font-size: var(--text-sm);
     font-weight: var(--fw-medium);
     letter-spacing: 0.02em;
     background-color: rgba(0, 240, 255, 0.06);
     border: 1px solid rgba(0, 240, 255, 0.12);
     color: var(--c-cyan);
   }
   
   .badge--green  { background-color: rgba(0, 230, 118, 0.07); border-color: rgba(0, 230, 118, 0.14); color: var(--c-green); }
   .badge--orange { background-color: rgba(255, 107, 53, 0.07); border-color: rgba(255, 107, 53, 0.14); color: var(--c-orange); }
   .badge--purple { background-color: rgba(108, 99, 255, 0.08); border-color: rgba(108, 99, 255, 0.16); color: var(--c-purple); }
   
   /* Live dot inside badge */
   .badge__dot {
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
     background-color: currentColor;
     animation: pulse 2s ease-in-out infinite;
   }
   
   /* Status chips (attendance, feed) */
   .status-chip {
     display: inline-block;
     padding: 0.125rem 0.5rem;
     border-radius: var(--r-sm);
     font-size: 0.625rem;
     font-weight: var(--fw-semibold);
     text-transform: uppercase;
     letter-spacing: 0.04em;
   }
   
   .status-chip--present { background-color: rgba(0, 230, 118, 0.10); color: var(--c-green); }
   .status-chip--late    { background-color: rgba(255, 193,   7, 0.10); color: var(--c-warning); }
   .status-chip--absent  { background-color: rgba(255,  82,  82, 0.10); color: var(--c-danger); }
   
   
   /* ─── 5.7 Tag / Chip ────────────────────────────────────────────── */
   /*
     .tag — small contextual label, often used in card footers
   */
   
   .tag {
     display: inline-block;
     padding: 0.25rem 0.625rem;
     border-radius: var(--r-md);
     font-size: var(--text-xs);
     font-weight: var(--fw-medium);
     color: var(--c-text-secondary);
     background-color: rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.03);
     border: 1px solid rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.07);
   }
   
   /* Mono variant for tech stacks */
   .tag--mono {
     font-family: var(--font-mono);
     font-size: var(--text-xs);
     background-color: var(--c-navy);
     border-color: var(--c-border-subtle);
   }
   
   /* API version tag */
   .tag--version {
     padding: 0.125rem 0.5rem;
     border-radius: var(--r-sm);
     background-color: rgba(0, 240, 255, 0.09);
     color: var(--c-cyan);
     font-size: 0.6875rem;
     font-weight: var(--fw-semibold);
   }
   
   
   /* ─── 5.8 Card (Glass) ──────────────────────────────────────────── */
   /*
     .card — base glass card
     Elements: __inner / __header / __body / __footer
     Modifiers: --hover-cyan / --hover-purple / --hover-orange / --hover-green
   */
   
   .card {
     position: relative;
     overflow: hidden;
     border-radius: var(--r-xl);
     background-color: var(--c-navy-light);
     border: 1px solid var(--c-border);
     transition: border-color var(--transition-normal);
   }
   
   .card__inner {
     position: relative;
     padding: var(--sp-6);
     height: 100%;
     display: flex;
     flex-direction: column;
   }
   
   @media (min-width: 640px) {
     .card__inner { padding: var(--sp-8); }
   }
   
   .card__header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: var(--sp-5);
   }
   
   .card__title {
     color: #ffffff;
     font-size: var(--text-2xl);
     font-weight: var(--fw-bold);
     line-height: var(--lh-snug);
     letter-spacing: -0.01em;
     margin-bottom: var(--sp-2);
   }
   
   .card__title--sm { font-size: var(--text-xl); }
   
   .card__desc {
     color: var(--c-text-secondary);
     font-size: var(--text-base);
     line-height: var(--lh-body);
   }
   
   .card__desc--sm { font-size: var(--text-sm); }
   
   /* Icon wrapper inside cards */
   .card__icon-wrap {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: var(--r-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .card__icon-wrap--cyan   { background-color: rgba(0, 240, 255, 0.06); border: 1px solid rgba(0, 240, 255, 0.12); }
   .card__icon-wrap--purple { background-color: rgba(108, 99, 255, 0.09); border: 1px solid rgba(108, 99, 255, 0.15); }
   .card__icon-wrap--orange { background-color: rgba(255, 107, 53, 0.07); border: 1px solid rgba(255, 107, 53, 0.12); }
   .card__icon-wrap--green  { background-color: rgba(0, 230, 118, 0.07); border: 1px solid rgba(0, 230, 118, 0.12); }
   
   /* Hover border modifiers */
   .card--hover-cyan:hover   { border-color: var(--c-border-cyan-hover); }
   .card--hover-purple:hover { border-color: rgba(108, 99, 255, 0.37); }
   .card--hover-orange:hover { border-color: rgba(255, 107, 53, 0.37); }
   .card--hover-green:hover  { border-color: rgba(0, 230, 118, 0.31); }
   
   /* Decorative glow orbs — absolutely positioned inside .card */
   .card__glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     pointer-events: none;
     transition: all var(--transition-slow);
   }
   
   .card__glow--tr { /* top-right */
     top: -6rem; right: -6rem;
     width: 18rem; height: 18rem;
   }
   
   .card__glow--bl { /* bottom-left */
     bottom: -5rem; left: -5rem;
     width: 12rem; height: 12rem;
     filter: blur(70px);
     opacity: 0;
   }
   
   .card:hover .card__glow--bl { opacity: 1; }
   
   .card__glow--cyan   { background-color: rgba(0, 240, 255, 0.08); }
   .card__glow--purple { background-color: rgba(108, 99, 255, 0.08); }
   .card__glow--orange { background-color: rgba(255, 107, 53, 0.07); }
   .card__glow--green  { background-color: rgba(0, 230, 118, 0.04); }
   
   /* Hover glow (initially hidden) */
   .card__glow--hover {
     opacity: 0;
     transition: opacity var(--transition-slow);
   }
   
   .card:hover .card__glow--hover { opacity: 1; }
   
   /* Metric block inside cards */
   .card-metric {
     padding: var(--sp-3);
     border-radius: var(--r-md);
     background-color: var(--c-navy);
     border: 1px solid var(--c-border-light);
   }
   
   .card-metric__value {
     font-size: var(--text-xl);
     font-weight: var(--fw-extrabold);
     line-height: 1;
     color: var(--accent-hex);
   }
   
   .card-metric__label {
     color: var(--c-text-secondary);
     font-size: var(--text-xs);
     font-weight: var(--fw-medium);
     margin-top: 0.25rem;
   }
   
   
   /* ─── 5.9 Icon System ───────────────────────────────────────────── */
   /*
     .icon -- sizing and color helper classes
     Usage: <svg class="icon--md icon--cyan">
   */
   
   .icon--xs   { width: 0.75rem;  height: 0.75rem;  flex-shrink: 0; }
   .icon--sm   { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
   .icon--md   { width: 1rem;     height: 1rem;     flex-shrink: 0; }
   .icon--base { width: 1.25rem;  height: 1.25rem;  flex-shrink: 0; }
   .icon--lg   { width: 1.5rem;   height: 1.5rem;   flex-shrink: 0; }
   .icon--xl   { width: 2rem;     height: 2rem;     flex-shrink: 0; }
   .icon--2xl  { width: 2.5rem;   height: 2.5rem;   flex-shrink: 0; }
   
   .icon--cyan      { color: var(--c-cyan);    }
   .icon--blue      { color: var(--c-blue);    }
   .icon--purple    { color: var(--c-purple);  }
   .icon--orange    { color: var(--c-orange);  }
   .icon--green     { color: var(--c-green);   }
   .icon--muted     { color: var(--c-gray-400); }
   .icon--dim       { color: var(--c-gray-600); }
   .icon--white     { color: #ffffff;          }
   .icon--accent    { color: var(--accent-hex); }
   .icon--cyan-soft { color: rgba(0, 240, 255, 0.37); }
   
   .icon--rotate-180  { transform: rotate(180deg); }
   .icon--transition  { transition: transform var(--transition-fast); }
   
   
   /* ─── 5.10 Form Controls ────────────────────────────────────────── */
   /*
     .field — wraps label + input
     .field__label / .field__input / .field__select / .field__textarea
     Modifiers: --error on input/select/textarea
   */
   
   .field {
     display: flex;
     flex-direction: column;
     gap: var(--sp-2);
   }
   
   .field__label {
     display: flex;
     align-items: center;
     gap: var(--sp-1);
     color: var(--c-text-primary);
     font-size: var(--text-base);
     font-weight: var(--fw-medium);
   }
   
   .field__required { color: var(--c-cyan); }
   
   /* Shared input styles */
   .field__input,
   .field__select,
   .field__textarea {
     width: 100%;
     padding: 0.75rem 1rem;
     border-radius: var(--r-lg);
     background-color: rgba(10, 25, 47, 0.60);
     border: 1px solid rgba(100, 116, 139, 0.25);
     color: var(--c-text-primary);
     font-size: var(--text-base);
     line-height: var(--lh-normal);
     outline: none;
     transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .field__input::placeholder,
   .field__textarea::placeholder {
     color: var(--c-text-dim);
   }
   
   .field__input:focus,
   .field__select:focus,
   .field__textarea:focus {
     border-color: rgba(0, 240, 255, 0.31);
     box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.08);
   }
   
   .field__input--error,
   .field__select--error,
   .field__textarea--error {
     border-color: rgba(255, 100, 100, 0.60);
   }
   
   .field__select {
     appearance: none;
     cursor: pointer;
   }
   
   .field__textarea { resize: none; }
   
   .field__error {
     color: var(--c-error);
     font-size: var(--text-xs);
   }
   
   /* Input with leading icon wrapper */
   .input-wrap {
     position: relative;
   }
   
   .input-wrap .field__input {
     padding-left: 2.75rem;
   }
   
   .input-wrap__icon {
     position: absolute;
     left: 0.875rem;
     top: 50%;
     transform: translateY(-50%);
     color: var(--c-text-dim);
     pointer-events: none;
     transition: color var(--transition-fast);
   }
   
   .input-wrap:focus-within .input-wrap__icon { color: var(--c-cyan); }
   
   /* Select chevron wrapper */
   .select-wrap {
     position: relative;
   }
   
   .select-wrap__chevron {
     position: absolute;
     right: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
     color: var(--c-text-dim);
   }
   
   
   /* ─── 5.11 Utility Helpers ──────────────────────────────────────── */
   
   /* Position */
   .pos-relative { position: relative; }
   .pos-absolute { position: absolute; }
   
   /* Display / Flex */
   .flex-center {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .flex-between {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .flex-col  { flex-direction: column; }
   .flex-wrap { flex-wrap: wrap; }
   
   /* Text */
   .text-center { text-align: center; }
   .text-right  { text-align: right; }
   
   /* Overflow */
   .overflow-hidden { overflow: hidden; }
   .overflow-x-auto { overflow-x: auto; }
   
   /* Spacing helpers */
   .space-y-2 > * + * { margin-top: var(--sp-2); }
   .space-y-4 > * + * { margin-top: var(--sp-4); }
   .ml-auto { margin-left: auto; }
   
   /* Sticky positions */
   .sticky-header { position: sticky; top: 0; z-index: 50; }
   .sticky-top-32 { position: sticky; top: 8rem; }
   
   /* Divider */
   .divider {
     display: flex;
     align-items: center;
     gap: var(--sp-4);
   }
   
   .divider__line {
     flex: 1;
     height: 1px;
     background-color: var(--c-border-light);
   }
   
   .divider__text {
     color: var(--c-text-dim);
     font-size: var(--text-xs);
     font-weight: var(--fw-medium);
     white-space: nowrap;
   }
   
   /* Nav underline hover effect */
   .nav-link-underline {
     position: relative;
   }
   
   .nav-link-underline::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--c-cyan);
     transition: width var(--transition-normal);
   }
   
   .nav-link-underline:hover::after { width: 100%; }
   
   /* Code block shell — used in bento and API docs */
   .code-block {
     position: relative;
     border-radius: var(--r-lg);
     overflow: hidden;
     background-color: rgba(6, 14, 31, 0.80);
     border: 1px solid rgba(100, 116, 139, 0.20);
   }
   
   .code-block__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem 1rem;
     border-bottom: 1px solid var(--c-border-light);
   }
   
   .code-block__dots {
     display: flex;
     align-items: center;
     gap: var(--sp-2);
   }
   
   .code-block__dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
   }
   
   .code-block__dot--red    { background-color: rgba(239,  68, 68, 0.60); }
   .code-block__dot--yellow { background-color: rgba(234, 179,  8, 0.60); }
   .code-block__dot--green  { background-color: rgba( 34, 197, 94, 0.60); }
   
   .code-block__filename {
     color: var(--c-gray-500);
     font-size: var(--text-xs);
     font-family: var(--font-mono);
     margin-left: var(--sp-2);
   }
   
   .code-block__body {
     padding: var(--sp-4);
     overflow-x: auto;
     font-family: var(--font-mono);
     font-size: 0.78125rem; /* 12.5px */
     line-height: 1.9;
     color: var(--c-text-primary);
   }
   
   .code-block__line {
     display: flex;
     align-items: center;
     gap: var(--sp-3);
   }
   
   .code-block__line-num {
     width: 1.25rem;
     text-align: right;
     color: var(--c-gray-600);
     font-size: 0.6875rem;
     user-select: none;
     flex-shrink: 0;
   }

   .font-family-base {
    font-family: sans-serif!important;
  }
   
   /* API HTTP method badges */
   .method-badge {
     display: inline-block;
     padding: 0.125rem 0.5rem;
     border-radius: var(--r-sm);
     font-size: var(--text-xs);
     font-weight: var(--fw-bold);
     text-transform: uppercase;
   }
   
   .method-badge--post   { background-color: rgba(0, 230, 118, 0.12); color: var(--c-green); }
   .method-badge--get    { background-color: rgba(0, 240, 255, 0.12); color: var(--c-cyan); }
   .method-badge--put    { background-color: rgba(255, 183, 77, 0.12); color: var(--c-amber); }
   .method-badge--delete { background-color: rgba(255, 107, 107, 0.12); color: var(--c-error); }
   
   /* Scrollbar — dark theme */
   ::-webkit-scrollbar        { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track  { background: var(--c-navy-deep); }
   ::-webkit-scrollbar-thumb  { background: var(--c-border); border-radius: var(--r-full); }
   ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.60); }
   
   /* Focus ring — global */
   :focus-visible {
     outline: 2px solid rgba(0, 240, 255, 0.60);
     outline-offset: 2px;
     border-radius: var(--r-sm);
   }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      06. ANIMATIONS
      ═══════════════════════════════════════════════════════════════════ */
   
   /* Generic pulse — used on dots, glows, badges */
   @keyframes pulse {
     0%, 100% { opacity: 1; }
     50%       { opacity: 0.50; }
   }
   
   /* Slow fade-in upward — page entry */
   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(1.5rem);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* Scroll mouse indicator */
   @keyframes scrollBounce {
     0%, 100% { transform: translateY(0); }
     50%       { transform: translateY(6px); }
   }
   
   /* Gentle glow breathing */
   @keyframes glowPulse {
     0%, 100% { box-shadow: var(--glow-cyan-sm); }
     50%       { box-shadow: var(--glow-cyan-lg); }
   }
   
   /* Subtle shimmer across a surface */
   @keyframes shimmer {
     0%   { background-position: -200% center; }
     100% { background-position: 200% center; }
   }
   
   /* Animation utility classes */
   .anim-fade-in-up {
     animation: fadeInUp var(--transition-slow) ease both;
   }
   
   .anim-pulse { animation: pulse 2s ease-in-out infinite; }
   
   /* Stagger delay helpers (use with .anim-fade-in-up) */
   .anim-delay-100 { animation-delay: 0.10s; }
   .anim-delay-200 { animation-delay: 0.20s; }
   .anim-delay-300 { animation-delay: 0.30s; }
   .anim-delay-400 { animation-delay: 0.40s; }
   .anim-delay-500 { animation-delay: 0.50s; }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      07. RESPONSIVE VISIBILITY HELPERS
      ═══════════════════════════════════════════════════════════════════ */
   
      .gradient-text--purple {
        display: inline;
      }
      
      @media (max-width: 640px) {
        .gradient-text--purple {
          display: block;
          line-height: 1.5;
        }
      }



/* ═══════════════════════════════════════════════════════════════════
   IONE NETWORKS — Bento Grid & Social Proof
   css/bento.css  ·  Phase 4: Bento Grid + Social Proof Build
   ─────────────────────────────────────────────────────────────────
   Load order:  css/style.css → css/hero.css → css/bento.css
   Fonts / 변수 / 리셋: style.css 에서 완전 제공
   ─────────────────────────────────────────────────────────────────
   목차:
     01. Scroll-Reveal (범용 .reveal 시스템)
     02. Bento Section + Grid Layout
     03. Bento Card Base
     04. Bento Card — Enterprise (코드 블록)
     05. Bento Card — Attendance (대시보드)
     06. Bento Card — Callback (라이브 피드)
     07. Bento Card — Custom R&D (Capability Grid)
     08. Social Proof Section + Grid
     09. Proof Card + Accent System
     10. Trust Bar
     11. Responsive (640 / 1024)
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   01. SCROLL-REVEAL — 범용 is-visible + JS-driven stagger
   ───────────────────────────────────────────────────────────────────
   scroll-reveal.js 가 각 카드에 --card-delay 를 동적으로 주입:
     el.style.setProperty('--card-delay', index * 0.12 + 's')
   CSS 는 그 값을 transition-delay 에 바인딩한다.
   ───────────────────────────────────────────────────────────────── */

/* 공통 초기 상태 */
.reveal,
.bento-card,
.proof-card {
  --card-delay: 0s;
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity   0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--card-delay),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--card-delay),
    border-color  0.35s ease,                /* hover border (override delay) */
    box-shadow    0.35s ease,
    background-color 0.35s ease;
}

/* 진입 완료 상태 */
.reveal.is-visible,
.bento-card.is-visible,
.proof-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .bento-card,
  .proof-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ─────────────────────────────────────────────────────────────────
   02. BENTO SECTION + GRID LAYOUT
   ───────────────────────────────────────────────────────────────── */

.bento {
  position: relative;
  padding: 4rem 0;
}

@media (min-width: 640px)  { .bento { padding: 6rem 0; } }
@media (min-width: 1024px) { .bento { padding: 1rem 0; } }

.bento__header {
  text-align: center;
  margin-bottom: 3rem;
}

@media (min-width: 640px) { .bento__header { margin-bottom: 4rem; } }

/* 4-col grid on desktop */
.bento__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .bento__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .bento__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
  }
}


/* ─────────────────────────────────────────────────────────────────
   03. BENTO CARD BASE
   ───────────────────────────────────────────────────────────────────
   .bento-card 는 style.css 의 .glass--card 를 베이스로 삼는다.
   HTML 에서: class="bento-card brand--cyan glass--card ..."
   brand--* 이 --brand-r/g/b 를 주입하면 모든 호버 효과가
   자동으로 해당 색으로 구동된다.
   ───────────────────────────────────────────────────────────────── */

.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;                      /* glass--card 의 r-xl 보강 */
  /* glass--card 가 background + border + border-radius + backdrop-filter 제공 */
  transition:
    border-color    0.35s ease,
    box-shadow      0.35s ease,
    transform       0.25s ease;
}

/* 호버 시 brand-hex 기반 테두리 + 미세 리프트 */
.bento-card:hover {
  border-color: rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.12),
    0 8px 32px rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.08);
  transform: translateY(-2px);
}

/* glass__hover-glow 는 style.css 에 이미 정의됨:
   brand-r/g/b 를 읽어 radial-gradient 그린다.
   bento-card 는 glass--card 를 상속하므로 자동 동작. */

/* Enterprise: 2×2 on desktop */
.bento-card--enterprise {
  grid-column: span 1;
  grid-row: span 1;
}

@media (min-width: 1024px) {
  .bento-card--enterprise {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Wide: 2-col on desktop */
.bento-card--wide {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .bento-card--wide { grid-column: span 2; }
}

/* ── Decorative glow orbs (brand-color driven) ───────────────── */
.bento-card__glow {
  position: absolute;
  top: -6rem;
  right: -6rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  transition: opacity 0.70s ease;
  /* brand--* 클래스가 --brand-r/g/b 를 설정 */
  background-color: rgba(var(--brand-r, 0), var(--brand-g, 240), var(--brand-b, 255), 0.025);
}

/* 앞쪽 hover glow (brand 색으로 자동) */
.bento-card__glow--hover {
  background-color: rgba(var(--brand-r, 0), var(--brand-g, 240), var(--brand-b, 255), 0.09);
  opacity: 0;
}
.bento-card:hover .bento-card__glow--hover { opacity: 1; }

/* 아래쪽 glow (hover 시 등장) */
.bento-card__glow--bottom {
  top: auto;
  right: auto;
  bottom: -5rem;
  left: -5rem;
  width: 12rem;
  height: 12rem;
  filter: blur(70px);
  opacity: 0;
}
.bento-card:hover .bento-card__glow--bottom { opacity: 1; }

/* Top-right small glow (callback) */
.bento-card__glow--top-right {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  background-color: rgba(var(--brand-r, 255), var(--brand-g, 107), var(--brand-b, 53), 0.08);
}

/* Bottom-left glow (revealed on hover) */
.bento-card__glow--bottom {
  top: auto;
  right: auto;
  bottom: -5rem;
  left: -5rem;
  width: 12rem;
  height: 12rem;
  filter: blur(70px);
  opacity: 0;
}
.bento-card:hover .bento-card__glow--bottom { opacity: 1; }

/* Top-right small glow (callback) */
.bento-card__glow--top-right {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

/* Card inner */
.bento-card__inner {
  position: relative;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .bento-card__inner { padding: 2rem; }
}

/* Card top block */
.bento-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

/* Header row: icon + label */
.bento-card__header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Icon wrap */
.bento-card__icon-wrap {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bento-card__icon-wrap--cyan {
  background-color: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.12);
}
.bento-card__icon-wrap--purple {
  background-color: rgba(108, 99, 255, 0.09);
  border: 1px solid rgba(108, 99, 255, 0.15);
}
.bento-card__icon-wrap--orange {
  background-color: rgba(255, 107, 53, 0.07);
  border: 1px solid rgba(255, 107, 53, 0.12);
}
.bento-card__icon-wrap--green {
  background-color: rgba(0, 230, 118, 0.07);
  border: 1px solid rgba(0, 230, 118, 0.12);
}

/* Label pill */
.bento-card__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -1px
  text-transform: uppercase;
}

.bento-card__label--cyan   { color: var(--c-cyan);   }
.bento-card__label--purple { color: var(--c-purple); }
.bento-card__label--orange { color: var(--c-orange); }
.bento-card__label--green  { color: var(--c-green);  }

/* Titles */
.bento-card__title {
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.bento-card__title--sm {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 0.25rem;
  color: #ffffff;
  font-weight: 700;
}

/* Description */
.bento-card__desc {
  color: var(--c-text-secondary);
  font-size: 0.875rem;
  line-height: 1.7;
}

.bento-card__desc--sm {
  color: var(--c-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Arrow icon */
.bento-card__arrow {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-gray-600);
  flex-shrink: 0;
  transition: color 0.20s ease;
}

.bento-card:hover .bento-card__arrow--cyan   { color: var(--c-cyan-light);   }
.bento-card:hover .bento-card__arrow--purple { color: var(--c-purple-light); }
.bento-card:hover .bento-card__arrow--orange { color: var(--c-orange-light); }
.bento-card:hover .bento-card__arrow--green  { color: var(--c-green-light);  }

/* Tag list */
.bento-card__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.bento-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--c-navy);
  color: var(--c-text-secondary);
  border: 1px solid var(--c-border-light);
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────────
   04. BENTO CODE BLOCK  (Enterprise Card)
   ───────────────────────────────────────────────────────────────── */

.bento-code {
  flex: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--c-navy);
  border: 1px solid var(--c-border-light);
  margin-top: 0.75rem;
}

.bento-code__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--c-border-light);
}

.bento-code__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bento-code__dot--red    { background-color: rgba(239,  68,  68, 0.60); }
.bento-code__dot--yellow { background-color: rgba(234, 179,   8, 0.60); }
.bento-code__dot--green  { background-color: rgba( 34, 197,  94, 0.60); }

.bento-code__filename {
  margin-left: 0.5rem;
  color: var(--c-gray-500);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.bento-code__body {
  padding: 1rem;
  overflow-x: auto;
  line-height: 0;
}

.bento-code__line {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 2;
  min-height: 1.4em;
}

/* Scroll-stagger animation for code lines */
.bento-code__line {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity  0.35s ease,
    transform 0.35s ease;
}

.bento-card.is-visible .bento-code__line { opacity: 1; transform: translateX(0); }

.bento-code__line:nth-child(1)  { transition-delay: 0.50s; }
.bento-code__line:nth-child(2)  { transition-delay: 0.57s; }
.bento-code__line:nth-child(3)  { transition-delay: 0.64s; }
.bento-code__line:nth-child(4)  { transition-delay: 0.71s; }
.bento-code__line:nth-child(5)  { transition-delay: 0.78s; }
.bento-code__line:nth-child(6)  { transition-delay: 0.85s; }
.bento-code__line:nth-child(7)  { transition-delay: 0.92s; }
.bento-code__line:nth-child(8)  { transition-delay: 0.99s; }
.bento-code__line:nth-child(9)  { transition-delay: 1.06s; }
.bento-code__line:nth-child(10) { transition-delay: 1.13s; }

.bento-code__line-num {
  color: var(--c-gray-600);
  width: 1.25rem;
  text-align: right;
  user-select: none;
  font-size: 11px;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────
   05. BENTO DASHBOARD  (Attendance Card)
   ───────────────────────────────────────────────────────────────── */

.bento-dash {
  flex: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--c-navy);
  border: 1px solid var(--c-border-light);
  margin-top: 0.75rem;
  max-height: 267px;
}

.bento-dash__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--c-border-light);
}

.bento-dash__header-label {
  color: var(--c-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bento-dash__header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bento-dash__header-date {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
}

.bento-dash__header-date--cyan   { color: var(--c-cyan);   }
.bento-dash__header-date--orange { color: var(--c-orange); }

.bento-dash__body { padding: 0.5rem 0; }

/* Attendance rows */
.bento-dash__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.875rem;
  transition: background-color 0.15s ease;
}

.bento-dash__row:hover            { background-color: rgba(255,255,255,0.018); }
.bento-dash__row--bordered        { border-bottom: 1px solid var(--c-border-faint); }

.bento-dash__row-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bento-dash__row-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: rgba(108, 99, 255, 0.06);
  border: 1px solid rgba(108, 99, 255, 0.12);
}

.bento-dash__row-name {
  color: var(--c-gray-300);
  font-size: 12.5px;
  font-weight: 600;
}

.bento-dash__row-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bento-dash__row-time {
  color: var(--c-gray-600);
  font-size: 11px;
  font-family: var(--font-mono);
}

/* Status chips */
.bento-status {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 11px;
  font-weight: 600;
}

.bento-status--present { background-color: rgba(  0, 230, 118, 0.10); color: var(--c-green);   }
.bento-status--late    { background-color: rgba(255, 193,   7, 0.10); color: var(--c-warning); }
.bento-status--absent  { background-color: rgba(255,  82,  82, 0.10); color: var(--c-danger);  }

/* Payment flow */
.bento-flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: rgba(10, 25, 47, 0.56);
  border: 1px solid var(--c-border-light);
}

.bento-flow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.bento-flow__item-icon {
  margin-bottom: 0.125rem;
}

.bento-flow__item-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-text-secondary);
  white-space: nowrap;
}

.bento-flow__arrow {
  color: var(--c-text-dim);
  font-size: 12px;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────
   06. LIVE FEED  (Callback Card)
   ───────────────────────────────────────────────────────────────── */

.bento-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.bento-live-dot--orange { background-color: var(--c-orange); }

.bento-live__label {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.bento-live__label--orange { color: var(--c-orange); }

.bento-feed-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem;
  border-radius: 0.5rem;
  background-color: rgba(17, 34, 64, 0.50);
  border: 1px solid var(--c-border-light);
  margin-bottom: 0.5rem;
}

.bento-feed-item:last-child { margin-bottom: 0; }

.bento-feed-item__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: rgba(255, 107, 53, 0.06);
  border: 1px solid rgba(255, 107, 53, 0.10);
}

.bento-feed-item__body {
  flex: 1;
  min-width: 0;
}

.bento-feed-item__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}

.bento-feed-item__name {
  color: var(--c-gray-300);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bento-feed-item__phone {
  color: var(--c-gray-600);
  font-size: 10px;
  font-family: var(--font-mono);
}

.bento-feed-item__action {
  font-size: 11px;
  font-weight: 500;
}

.bento-feed-item__action--orange { color: var(--c-orange); }

.bento-feed-item__time {
  color: var(--c-gray-600);
  font-size: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Bottom metric bar */
.bento-metric {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 107, 53, 0.04);
  border: 1px solid rgba(255, 107, 53, 0.10);
}

.bento-metric__text {
  color: var(--c-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.bento-metric__highlight {
  color: var(--c-orange);
  font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────
   07. CAPABILITY GRID  (Custom R&D Card)
   ───────────────────────────────────────────────────────────────── */

.bento-capability {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex: 1;
}

@media (min-width: 640px) {
  .bento-capability { grid-template-columns: repeat(2, 1fr); }
}

.bento-capability__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  border-radius: 0.75rem;
  background-color: rgba(10, 25, 47, 0.56);
  border: 1px solid var(--c-border-light);
  transition: border-color 0.20s ease, background-color 0.20s ease;
}

.bento-capability__item:hover {
  border-color: rgba(0, 230, 118, 0.20);
  background-color: rgba(0, 230, 118, 0.02);
}

@media (min-width: 640px) {
  .bento-capability__item { padding: 1rem; }
}

.bento-capability__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: rgba(0, 230, 118, 0.03);
  border: 1px solid rgba(0, 230, 118, 0.07);
}

.bento-capability__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bento-capability__label {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
}

.bento-capability__desc {
  color: var(--c-text-secondary);
  font-size: 0.75rem;
  line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────────
   08. SOCIAL PROOF SECTION + GRID
   ───────────────────────────────────────────────────────────────── */

.proof {
  position: relative;
  padding: 4rem 0;
}

@media (min-width: 640px)  { .proof { padding: 7rem 0; } }
@media (min-width: 1024px) { .proof { padding: 7rem 0; } }

.proof__header {
  text-align: center;
  margin-bottom: 3rem;
}

@media (min-width: 640px) { .proof__header { margin-bottom: 4rem; } }

.proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .proof__grid { gap: 1.25rem; margin-bottom: 4rem; }
}

@media (min-width: 1024px) {
  .proof__grid { grid-template-columns: repeat(3, 1fr); }
}


/* ─────────────────────────────────────────────────────────────────
   09. PROOF CARD + ACCENT SYSTEM
   .accent--cyan / --purple / --orange 는 style.css 에 등록된 값 사용
   ───────────────────────────────────────────────────────────────── */

.proof-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--c-navy-light);
  border: 1px solid rgba(100, 116, 139, 0.25);
  transition: border-color 0.50s ease, transform 0.30s ease;
}

.proof-card:hover {
  border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.28);
  transform: translateY(-2px);
}

/* Accent glow — driven by --accent-r/g/b from modifier class */
.proof-card__hover-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.70s ease;
  background: radial-gradient(
    ellipse at bottom right,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.024),
    transparent 70%
  );
}

.proof-card:hover .proof-card__hover-glow { opacity: 1; }

/* Card inner */
.proof-card__inner {
  position: relative;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .proof-card__inner { padding: 1.75rem; }
}

/* Org identity */
.proof-card__org {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.proof-card__org-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Accent-driven background */
  background-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.07);
  border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.13);
}

.proof-card__org-icon .icon--accent { color: var(--accent-hex); }

.proof-card__org-name {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
}

/* Org type — accent colored */
.proof-card__org-type {
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent-hex);
}

/* Quote block */
.proof-card__quote-section {
  flex: 1;
  margin-bottom: 1.25rem;
  border: none;
  padding: 0;
}

.proof-card__quote-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: 0.5rem;
  color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.25);
}

.proof-card__quote {
  color: var(--c-text-primary);
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* Metrics 2-col grid */
.proof-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.proof-card__metric {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--c-navy);
  border: 1px solid var(--c-border-light);
}

.proof-card__metric-value {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  /* Accent colored value */
  color: var(--accent-hex);
}

.proof-card__metric-label {
  color: var(--c-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Tech tags */
.proof-card__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.proof-card__tech-tag {
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background-color: var(--c-navy);
  color: var(--c-text-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  border: 1px solid var(--c-border-light);
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────────
   10. TRUST BAR — grayscale → color on hover
   ───────────────────────────────────────────────────────────────────
   기본: grayscale(1) + opacity 0.45  →  무채색 로고 바
   호버: grayscale(0) + opacity 1.0   →  브랜드 컬러 살아남
   ───────────────────────────────────────────────────────────────── */

.proof__trust {
  padding-top: 2rem;
  border-top: 1px solid var(--c-border-light);
}

@media (min-width: 640px) { .proof__trust { padding-top: 2.5rem; } }

.proof__trust-label {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--c-text-dim);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 640px) { .proof__trust-label { margin-bottom: 2rem; } }

.proof__trust-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px)  { .proof__trust-grid { gap: 1.25rem; } }
@media (min-width: 1024px) { .proof__trust-grid { gap: 1.75rem; } }


@media (min-width: 640px) {
  .proof__trust-item { padding: 0.625rem 1.25rem; }
}

/* 호버: 필터 해제 → 원래 컬러 복원 */
.proof__trust-item:hover {
  filter: grayscale(0) opacity(1);
  border-color: rgba(0, 240, 255, 0.20);
  background-color: rgba(0, 240, 255, 0.022);
}

/* 체크 아이콘 랩 */
.proof__trust-check {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 240, 255, 0.08);
  flex-shrink: 0;
}

/* 로고 이름 텍스트 */
.proof__trust-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-gray-300);       /* grayscale 필터 위에서 흰색에 가깝게 */
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   IONE NETWORKS — Contact & Footer
   css/contact-footer.css  ·  Phase 5: Final Polish
   ─────────────────────────────────────────────────────────────────
   Load order:
     css/style.css → css/hero.css → css/bento.css → css/contact-footer.css
   ─────────────────────────────────────────────────────────────────
   목차:
     01. gradient-btn-primary  (Footer CTA + Contact 전송 버튼)
     02. Contact Section       (2-col grid: info panel + form)
     03. Contact Form Elements (field, select, textarea, privacy)
     04. Footer CTA Banner
     05. Footer Main Grid      (4-col, --c-navy-deep)
     06. Footer Company Column
     07. Footer Nav Columns    (솔루션 / 패밀리 사이트)
     08. Footer Business Card  (벤처 인증)
     09. Footer Bottom Bar
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   01. gradient-btn-primary
   CTA 버튼의 공통 그라디언트 스타일.
   style.css 의 .btn--primary 와 동일 비주얼이지만 더 넓은 버튼(full-width)
   에서도 완벽하게 작동하도록 독립 클래스로 제공.
   ───────────────────────────────────────────────────────────────── */

   .gradient-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 0.75rem;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-blue) 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    box-shadow:
      0 4px 20px rgba(0, 240, 255, 0.22),
      0 1px 4px  rgba(0,   0,   0, 0.20);
    transition:
      background-position 0.45s ease,
      box-shadow  0.25s ease,
      transform   0.20s ease,
      filter      0.20s ease;
  }
  
  .gradient-btn-primary:hover {
    background-position: 100% 50%;
    transform: translateY(-1px);
  }
  
  
  
  /* ─────────────────────────────────────────────────────────────────
     02. CONTACT SECTION
     ───────────────────────────────────────────────────────────────── */
  
  .contact-section {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.03);
  }
  
  @media (min-width: 640px)  { .contact-section { padding: 7rem 0; } }
  @media (min-width: 1024px) { .contact-section { padding: 9rem 0; } }
  
  /* Background: subtle cyan-left gradient */
  .contact-section::before {
    content: '';
    position: absolute;
    top: -10rem;
    left: -8rem;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,240,255,0.028) 0%, transparent 70%);
    pointer-events: none;
    animation: pulse 6s ease-in-out infinite;
  }
  
  /* Section header */
  .contact-section__header {
    text-align: center;
    margin-bottom: 3.5rem;
  }
  
  @media (min-width: 640px) { .contact-section__header { margin-bottom: 4.5rem; } }
  
  /* 2-col grid: info panel (2fr) + form (3fr) */
  .contact-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  
  @media (min-width: 1024px) {
    .contact-section__grid {
      grid-template-columns: 2fr 3fr;
      gap: 4rem;
    }
  }
  
  
  /* ─── Info Panel (left) ─────────────────────────────────────────── */
  
  .contact__info-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    background-color: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.12);
  }
  
  .contact__info-title {
    color: #ffffff;
    font-size: clamp(1.625rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  
  .contact__info-highlight { color: var(--c-cyan); }
  
  .contact__info-desc {
    color: var(--c-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.8;
    margin-bottom: 2rem;
  }
  
  .contact__info-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .contact__info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: rgba(17, 34, 64, 0.60);
    border: 1px solid var(--c-border-light);
    transition: border-color 0.25s ease;
  }
  
  .contact__info-card:hover {
    border-color: rgba(0, 240, 255, 0.20);
  }
  
  .contact__info-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0,240,255,0.12), rgba(0,102,255,0.12));
  }
  
  .contact__info-card-label {
    display: block;
    color: var(--c-text-secondary);
    font-size: 0.75rem;
    margin-bottom: 0.125rem;
  }
  
  .contact__info-card-value {
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .contact__info-card-value:hover { color: var(--c-cyan); }
  
  
  /* ─────────────────────────────────────────────────────────────────
     03. CONTACT FORM
     ───────────────────────────────────────────────────────────────── */
  
  .contact__form-panel {
    position: relative;
    padding: 1.75rem;
    border-radius: 1rem;
    background-color: rgba(17, 34, 64, 0.50);
    border: 1px solid rgba(100, 116, 139, 0.20);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  @media (min-width: 640px) { .contact__form-panel { padding: 2.25rem; } }
  
  .contact__form-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
  }
  
  .contact__form-hint {
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    margin-bottom: 2rem;
  }
  
  .contact__form-hint-star { color: var(--c-cyan); }
  
  /* Fieldset: removes browser default styling */
  .contact__form-fields {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  
  /* 2-col row for phone + email */
  .contact__form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  @media (min-width: 640px) {
    .contact__form-row { grid-template-columns: repeat(2, 1fr); }
  }
  
  /* Field wrapper */
  .contact__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  /* Label row: icon + text + required star */
  .contact__field-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  .contact__field-label-icon { color: var(--c-cyan); }
  .contact__field-required   { color: var(--c-cyan); }
  
  /* Shared input styles */
  .contact__field-input,
  .contact__field-select,
  .contact__field-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: rgba(10, 25, 47, 0.60);
    border: 1px solid rgba(100, 116, 139, 0.25);
    color: var(--c-text-primary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    line-height: 1.6;
    outline: none;
    transition:
      border-color 0.20s ease,
      box-shadow   0.20s ease;
  }
  
  .contact__field-input::placeholder,
  .contact__field-textarea::placeholder {
    color: var(--c-text-dim);
  }
  
  /* Focus: cyan glow ring */
  .contact__field-input:focus,
  .contact__field-select:focus,
  .contact__field-textarea:focus {
    border-color: rgba(0, 240, 255, 0.32);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.08);
  }
  
  /* Error state */
  .contact__field-input--error,
  .contact__field-select--error,
  .contact__field-textarea--error {
    border-color: rgba(255, 100, 100, 0.60);
  }
  
  .contact__field-error {
    color: var(--c-error);
    font-size: 0.75rem;
    margin-top: -0.125rem;
  }
  
  /* Select: custom chevron */
  .contact__field-select {
    appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
  }
  
  .contact__field-select--placeholder { color: var(--c-text-dim); }
  
  .contact__select-wrap {
    position: relative;
  }
  
  .contact__select-chevron {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--c-text-dim);
    pointer-events: none;
    transition: color 0.20s ease;
  }
  
  .contact__select-wrap:focus-within .contact__select-chevron {
    color: var(--c-cyan);
  }
  
  /* Textarea */
  .contact__field-textarea {
    resize: none;
    line-height: 1.7;
  }
  
  /* Privacy note */
  .contact__privacy-note {
    text-align: center;
    margin-top: 1rem;
    color: var(--c-text-dim);
    font-size: 0.75rem;
    line-height: 1.6;
  }
  
  /* Privacy checkbox row */
  .contact__privacy-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 0.5rem;
  }
  
  .contact__privacy-checkbox {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(100, 116, 139, 0.40);
    background-color: rgba(10, 25, 47, 0.60);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    margin-top: 0.0625rem;
    transition: border-color 0.20s ease, background-color 0.20s ease;
  }
  
  .contact__privacy-checkbox:checked {
    background-color: var(--c-cyan);
    border-color: var(--c-cyan);
  }
  
  .contact__privacy-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 1px;
    width: 6px; height: 9px;
    border: 2px solid #060E1F;
    border-top: none;
    border-left: none;
    transform: rotate(42deg);
  }
  
  .contact__privacy-checkbox:focus {
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12);
    outline: none;
  }
  
  .contact__privacy-label {
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    cursor: pointer;
  }
  
  .contact__privacy-label a {
    color: var(--c-cyan);
    text-underline-offset: 2px;
  }
  
  /* Submit button (full-width, uses .gradient-btn-primary) */
  .contact__submit-btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
  }
  
  /* Input prefix icon wrap */
  .contact__input-wrap {
    position: relative;
  }
  
  .contact__input-wrap .contact__field-input {
    padding-left: 2.75rem;
  }
  
  .contact__input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-dim);
    pointer-events: none;
    transition: color 0.20s ease;
  }
  
  .contact__input-wrap:focus-within .contact__input-icon {
    color: var(--c-cyan);
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     04. FOOTER CTA BANNER
     ───────────────────────────────────────────────────────────────── */
  
  .footer {
    position: relative;
    border-top: 1px solid rgba(100, 116, 139, 0.15);
  }
  
  .footer__cta-banner {
    position: relative;
    overflow: hidden;
  }
  
  /* Subtle gradient overlay behind CTA */
  .footer__cta-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(0, 240, 255, 0.02) 0%,
      rgba(0, 102, 255, 0.02) 100%
    );
    pointer-events: none;
  }
  
  .footer__cta-inner {
    position: relative;
    padding: 3.5rem 0;
    text-align: center;
  }
  
  @media (min-width: 640px) { .footer__cta-inner { padding: 5rem 0; } }
  
  .footer__cta-title {
    color: #ffffff;
    font-size: clamp(1.375rem, 3vw, 2.375rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  
  .footer__cta-highlight { color: var(--c-cyan); }
  
  .footer__cta-desc {
    max-width: 36rem;
    margin: 0 auto 2rem;
    color: var(--c-text-secondary);
    font-size: 1rem;
    line-height: 1.7;
  }
  
  .footer__cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .footer__cta-btn {
    min-width: 10rem;
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     05. FOOTER MAIN GRID (4-col, --c-navy-deep)
     ───────────────────────────────────────────────────────────────── */
  
  .footer__main {
    background-color: var(--c-navy-deep);
    border-top: 1px solid var(--c-border-faint);
  }
  
  .footer__main-inner {
    padding: 3rem 0;
  }
  
  @media (min-width: 640px) { .footer__main-inner { padding: 4rem 0; } }
  
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  @media (min-width: 640px) {
    .footer__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem 3rem;
    }
  }
  
  @media (min-width: 1024px) {
    .footer__grid { grid-template-columns: repeat(4, 1fr); }
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     06. FOOTER COMPANY COLUMN
     ───────────────────────────────────────────────────────────────── */
  
  .footer__company {
    grid-column: span 1;
  }
  
  @media (min-width: 640px)  { .footer__company { grid-column: span 2; } }
  @media (min-width: 1024px) { .footer__company { grid-column: span 1; } }
  
  .footer__logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  /* SVG logo inlined — matches hero section SVG logo */
  .footer__logo-svg {
    height: 2rem;
    width: auto;
  }
  
  .footer__tagline {
    margin-bottom: 1.125rem;
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.7;
  }
  
  .footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-style: normal;
  }
  
  .footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
  }
  
  .footer__contact-item--center { align-items: center; }
  
  .footer__contact-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--c-gray-600);
  }
  
  .footer__contact-icon--mt { margin-top: 0.125rem; }
  
  .footer__contact-link {
    color: var(--c-text-secondary);
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .footer__contact-link:hover { color: var(--c-cyan); }
  
  
  /* ─────────────────────────────────────────────────────────────────
     07. FOOTER NAV COLUMNS (솔루션 / 패밀리 사이트)
     ───────────────────────────────────────────────────────────────── */
  
  .footer__section-title {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
  }
  
  .footer__link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  
  .footer__link {
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .footer__link:hover { color: var(--c-cyan); }
  
  .footer__family-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .footer__family-link:hover { color: var(--c-cyan); }
  
  /* ExternalLink icon — hidden until hover */
  .footer__family-link-icon {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0;
    transition: opacity 0.20s ease;
  }
  
  .footer__family-link:hover .footer__family-link-icon { opacity: 1; }
  
  
  /* ─────────────────────────────────────────────────────────────────
     08. FOOTER BUSINESS CARD (벤처기업 인증)
     ───────────────────────────────────────────────────────────────── */
  
  .footer__biz-card {
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: rgba(17, 34, 64, 0.60);
    border: 1px solid rgba(100, 116, 139, 0.15);
  }
  
  .footer__biz-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  
  /* Certification badge placeholder (circular) */
  .footer__cert-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(0,102,255,0.15));
    border: 1px solid rgba(0, 240, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--c-cyan);
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.2;
  }
  
  .footer__biz-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .footer__biz-name {
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  
  .footer__biz-sub {
    color: var(--c-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.5;
  }
  
  .footer__biz-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--c-text-secondary);
    font-size: 0.75rem;
    line-height: 1.6;
  }
  
  .footer__biz-details > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  
  .footer__biz-label {
    color: var(--c-gray-slate);
    font-size: 0.6875rem;
  }
  
  .footer__biz-hours {
    color: var(--c-gray-slate);
    font-size: 0.6875rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--c-border-faint);
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     09. FOOTER BOTTOM BAR
     ───────────────────────────────────────────────────────────────── */
  
  .footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-top: 1px solid rgba(100, 116, 139, 0.10);
  }
  
  @media (min-width: 640px) {
    .footer__bottom { margin-top: 3rem; padding-top: 2rem; }
  }
  
  .footer__copyright {
    color: var(--c-text-dim);
    font-size: 0.75rem;
  }
  
  .footer__bottom-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer__bottom-link {
    color: var(--c-text-dim);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  
  .footer__bottom-link:hover { color: var(--c-text-secondary); }
  
  
  /* ─────────────────────────────────────────────────────────────────
     API PREVIEW SECTION — index.html 에 삽입된 문서 미리보기 UI
     (#proof 와 #contact 사이)
     ───────────────────────────────────────────────────────────────── */
  
  .api-preview {
    position: relative;
    padding: 1rem 0;
    overflow: hidden;
  }
  
  @media (min-width: 640px)  { .api-preview { padding: 8rem 0; } }
  @media (min-width: 1024px) { .api-preview { padding: 8rem 0; } }
  
  /* Ambient glow from the right */
  .api-preview::after {
    content: '';
    position: absolute;
    top: 20%;
    right: -8rem;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,102,255,0.04) 0%, transparent 70%);
    pointer-events: none;
  }
  
  .api-preview__header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  @media (min-width: 640px) { .api-preview__header { margin-bottom: 4rem; } }
  
  /* ── Browser window chrome ──────────────────────────────────────── */
  .api-preview__window {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.20);
    background-color: rgba(6, 14, 31, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
      0 0 0 1px rgba(0, 240, 255, 0.04),
      0 24px 64px rgba(0, 0, 0, 0.40);
  }
  
  .api-preview__chrome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.12);
    background-color: rgba(10, 18, 36, 0.70);
  }
  
  .api-preview__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .api-preview__dot--red    { background-color: #FF5F56; }
  .api-preview__dot--yellow { background-color: #FFBD2E; }
  .api-preview__dot--green  { background-color: #27C93F; }
  
  .api-preview__chrome-label {
    margin-left: 0.75rem;
    color: var(--c-text-dim);
    font-size: 0.75rem;
    font-family: var(--font-mono);
  }
  
  /* ── Body: 2-col split ──────────────────────────────────────────── */
  .api-preview__body {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 24rem;
  }
  
  @media (min-width: 768px) {
    .api-preview__body { grid-template-columns: 14rem 1fr; }
  }
  
  /* ── Sidebar col ────────────────────────────────────────────────── */
  .api-preview__sidebar {
    border-right: 1px solid rgba(100, 116, 139, 0.10);
    padding: 1.25rem 0.75rem;
    background-color: rgba(6, 14, 31, 0.50);
  }
  
  .api-preview__sidebar-label {
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--c-text-dim);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  
  .api-preview__sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  
  .api-preview__sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--c-text-dim);
    font-size: 0.75rem;
  }
  
  .api-preview__sidebar-item--active {
    background-color: rgba(0, 240, 255, 0.06);
    color: var(--c-cyan);
    font-weight: 600;
  }
  
  /* ── Code col ───────────────────────────────────────────────────── */
  .api-preview__code-area {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .api-preview__endpoint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    background-color: rgba(6, 14, 31, 0.60);
    border: 1px solid rgba(100, 116, 139, 0.15);
    width: fit-content;
  }
  
  .api-preview__method {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background-color: rgba(0, 230, 118, 0.12);
    color: #00E676;
  }
  
  .api-preview__path {
    color: var(--c-text-primary);
    font-size: 0.8125rem;
    font-family: var(--font-mono);
  }
  
  /* Code blocks inside preview */
  .api-preview__code {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.12);
    background-color: rgba(4, 10, 22, 0.70);
  }
  
  .api-preview__code--response {
    border-color: rgba(0, 230, 118, 0.12);
  }
  
  .api-preview__code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.875rem;
    border-bottom: 1px solid rgba(100, 116, 139, 0.08);
    background-color: rgba(6, 14, 31, 0.50);
  }
  
  .api-preview__code-lang {
    color: var(--c-text-dim);
    font-size: 0.6875rem;
    font-family: var(--font-mono);
  }
  
  .api-preview__code-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-dim);
    font-size: 0.6875rem;
  }
  
  .api-preview__code-label--success { color: #00E676; }
  
  /* Live dot pulse */
  .api-preview__live-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background-color: #00E676;
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
  }
  
  .api-preview__pre {
    margin: 0;
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    line-height: 1.7;
    font-family: var(--font-mono);
    overflow-x: auto;
    color: var(--c-text-primary);
  }
  
  /* ── CTA bar ─────────────────────────────────────────────────────── */
  .api-preview__cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(100, 116, 139, 0.10);
    background-color: rgba(0, 240, 255, 0.012);
  }
  
  .api-preview__cta-text {
    color: var(--c-text-dim);
    font-size: 0.75rem;
  }
  
  
  /* ─────────────────────────────────────────────────────────────────
     CONTACT PAGE — 독립 페이지 전용 추가 스타일 (contact.html)
     ───────────────────────────────────────────────────────────────── */
  
  /* ── Page Hero (compact header above form) ──────────────────────── */
  .contact-page-hero {
    position: relative;
    padding: 5rem 0 3rem;
    overflow: hidden;
    border-bottom: 1px solid var(--c-border-faint);
  }
  
  @media (min-width: 640px) { .contact-page-hero { padding: 2rem 0 3.5rem; } }
  @media (min-width: 1024px) { .contact-page-hero { padding: 2rem 0 4rem; } }
  
  .contact-page-hero__inner {
    max-width: 52rem;
  }
  
  .contact-page-hero__title {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0.75rem 0 1rem;
  }
  
  .contact-page-hero__desc {
    color: var(--c-text-secondary);
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    line-height: 1.75;
    max-width: 40rem;
  }
  
  /* Breadcrumb */
  .contact-page-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
  }
  
  .contact-page-hero__bc-link {
    color: var(--c-text-dim);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.20s ease;
  }
  .contact-page-hero__bc-link:hover { color: var(--c-text-secondary); }
  
  .contact-page-hero__bc-sep {
    color: var(--c-text-dim);
  }
  
  .contact-page-hero__bc-current {
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  
  /* ── Info Panel extended stats ──────────────────────────────────── */
  .contact__info-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 2rem;
    border-top: 1px solid var(--c-border-faint);
    padding-top: 1.5rem;
  }
  
  .contact__info-stat {
    text-align: center;
  }
  
  .contact__info-stat-label {
    display: block;
    color: var(--c-text-dim);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.375rem;
  }
  
  .contact__info-stat-value {
    display: block;
    color: var(--c-cyan);
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1.2;
  }
  
  .contact__info-stat-unit {
    font-size: 0.875rem;
    font-weight: 600;
  }
  
  /* ── Active nav link indicator ──────────────────────────────────── */
  .header__nav-link--active {
    color: var(--c-cyan) !important;
  }
  
  .header__mobile-link--active {
    color: var(--c-cyan) !important;
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     LOGIN PAGE — 비즈아이원 로그인 전용 스타일 (login.html)
     ═══════════════════════════════════════════════════════════════════ */
  
  /* ── Root layout ──────────────────────────────────────────────────── */
  .login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--c-navy-deep);
    font-family: var(--font-sans);
    position: relative;
  }
  
  @media (min-width: 1024px) {
    .login { flex-direction: row; }
  }
  
  /* ── Fixed header ─────────────────────────────────────────────────── */
  .login__header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background-color: rgba(6, 14, 31, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 240, 255, 0.08);
  }
  
  .login__header-inner {
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  
  @media (min-width: 640px) {
    .login__header-inner { height: 4.5rem; }
  }
  
  .login__back-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
    min-width: 6rem;
  }
  
  .login__back-btn:hover { color: var(--c-text-primary); }
  
  .login__back-text {
    display: none;
  }
  
  @media (min-width: 480px) {
    .login__back-text { display: inline; }
  }
  
  .login__header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  
  .login__header-spacer {
    min-width: 6rem;
  }
  
  /* ── Left visual panel (desktop) ─────────────────────────────────── */
  .login__visual {
    display: none;
    position: relative;
    width: 50%;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--c-navy);
    padding-top: 4.5rem; /* header height offset */
  }
  
  @media (min-width: 1024px) {
    .login__visual { display: flex; flex-direction: column; }
  }
  
  .login__visual-bg {
    position: absolute;
    inset: 0;
  }
  
  .login__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(6, 14, 31, 0.96) 0%,
      rgba(0, 240, 255, 0.03) 50%,
      rgba(6, 14, 31, 0.98) 100%
    );
  }
  
  .login__visual-grid {
    position: absolute;
    inset: 0;
    opacity: 0.018;
    background-image:
      linear-gradient(var(--c-cyan) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-cyan) 1px, transparent 1px);
    background-size: 60px 60px;
  }
  
  /* Ambient glows */
  .login__visual-glow-1 {
    position: absolute;
    bottom: -5%; left: -10%;
    width: 500px; height: 500px;
    border-radius: 50%;
    filter: blur(180px);
    background-color: rgba(0, 240, 255, 0.04);
    pointer-events: none;
  }
  
  .login__visual-glow-2 {
    position: absolute;
    top: 15%; right: -10%;
    width: 380px; height: 380px;
    border-radius: 50%;
    filter: blur(160px);
    background-color: rgba(0, 102, 255, 0.05);
    pointer-events: none;
  }
  
  .login__visual-glow-3 {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 400px;
    border-radius: 50%;
    filter: blur(200px);
    background-color: rgba(0, 240, 255, 0.02);
    pointer-events: none;
  }
  
  .login__visual-content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
    align-self: flex-end;
  }
  
  /* Visual badge */
  .login__visual-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    background-color: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.12);
    margin-bottom: 2rem;
    width: fit-content;
  }
  
  .login__visual-badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--c-cyan);
    animation: pulse 2s ease-in-out infinite;
  }
  
  .login__visual-badge-text {
    color: var(--c-cyan);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .login__visual-title {
    color: white;
    font-size: clamp(1.75rem, 2.8vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  
  .login__visual-desc {
    color: var(--c-text-secondary);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 28rem;
    margin-bottom: 2.5rem;
  }
  
  /* Stats */
  .login__visual-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 26rem;
    margin-bottom: 2rem;
  }
  
  .login__visual-stat {
    padding: 1.125rem;
    border-radius: 0.75rem;
    background-color: rgba(17, 34, 64, 0.5);
    border: 1px solid var(--c-border-light);
  }
  
  
  .login__visual-stat-label {
    display: block;
    color: var(--c-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
  }
  
  /* Channel badges */
  .login__visual-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  
  /* Visual footer */
  .login__visual-footer {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 4rem;
    border-top: 1px solid var(--c-border-faint);
  }
  
  .login__visual-copyright {
    color: var(--c-text-dim);
    font-size: 0.75rem;
  }
  
  .login__visual-links {
    display: flex;
    gap: 1.5rem;
  }
  
  .login__visual-link {
    color: var(--c-text-dim);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  
  .login__visual-link:hover { color: var(--c-text-secondary); }
  
  /* ── Form side ────────────────────────────────────────────────────── */
  .login__form-side {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6rem 1.5rem 3rem;
    position: relative;
    overflow: hidden;
  }
  
  @media (min-width: 640px) {
    .login__form-side {
      padding: 7rem 2.5rem 3rem;
      align-items: center;
    }
  }
  
  @media (min-width: 1024px) {
    .login__form-side {
      width: 32%;
      flex: none;
      padding: 2rem 4rem;
      padding-top: 7rem;
    }
  }
  
  .login__form-side-glow {
    position: absolute;
    top: 40%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    border-radius: 50%;
    filter: blur(250px);
    background-color: rgba(0, 240, 255, 0.012);
    pointer-events: none;
  }
  
  .login__form-wrapper {
    width: 100%;
    max-width: 26rem;
    position: relative;
    z-index: 10;
  }
  
  /* ── Brand ─────────────────────────────────────────────────────────── */
  .login__brand {
    margin-bottom: 2rem;
    text-align: center;
  }
  
  @media (min-width: 640px) {
    .login__brand { text-align: left; }
  }
  
  .login__brand-icon {
    display: inline-flex;
    margin-bottom: 1rem;
  }
  
  .login__brand-title {
    color: white;
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.375rem;
  }
  
  .login__brand-sub {
    color: var(--c-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
  }
  
  /* ── Tabs ──────────────────────────────────────────────────────────── */
  .login__tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: rgba(10, 25, 47, 0.7);
    border: 1px solid var(--c-border-light);
  }
  
  .login__tab {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    color: var(--c-text-dim);
    font-family: var(--font-sans);
  }
  
  .login__tab--active {
    background: linear-gradient(135deg, rgba(0,240,255,0.1), rgba(0,102,255,0.1));
    color: var(--c-cyan);
  }
  
  .login__tab:hover:not(.login__tab--active) {
    color: var(--c-text-secondary);
  }
  
  /* ── Card (form container) ─────────────────────────────────────────── */
  .login__card {
    padding: 1.75rem;
    border-radius: 1rem;
    background-color: rgba(17, 34, 64, 0.4);
    border: 1px solid var(--c-border-subtle);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,240,255,0.04);
  }
  
  @media (min-width: 640px) {
    .login__card { padding: 2rem; }
  }
  
  /* ── API key info box ─────────────────────────────────────────────── */
  .login__apikey-info {
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background-color: rgba(0, 240, 255, 0.02);
    border: 1px solid rgba(0, 240, 255, 0.09);
    margin-bottom: 1.25rem;
  }
  
  .login__apikey-info-title {
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  
  .login__apikey-info-desc {
    color: var(--c-text-secondary);
    font-size: 0.75rem;
    line-height: 1.6;
  }
  
  /* ── Fields ────────────────────────────────────────────────────────── */
  .login__fields {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    border: none;
    padding: 0;
    margin: 0;
  }
  
  .login__field-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  
  .login__field-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  
  .login__field-label-icon {
    color: var(--c-cyan);
    flex-shrink: 0;
  }
  
  /* ── Input ─────────────────────────────────────────────────────────── */
  .login__input-wrap {
    position: relative;
  }
  
  .login__input {
    width: 100%;
    padding: 0.8125rem 1rem 0.8125rem 2.625rem;
    border-radius: 0.625rem;
    background-color: rgba(17, 34, 64, 0.65);
    border: 1.5px solid rgba(100, 116, 139, 0.35);
    color: white;
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
  }
  
  .login__input:focus {
    border-color: rgba(0, 240, 255, 0.55);
    background-color: rgba(17, 34, 64, 0.85);
    box-shadow:
      0 0 0 3px rgba(0, 240, 255, 0.09),
      inset 0 1px 3px rgba(0,0,0,0.2);
  }
  
  .login__input:hover:not(:focus) {
    border-color: rgba(100, 116, 139, 0.5);
  }
  
  .login__input::placeholder {
    color: rgba(148, 163, 184, 0.45);
  }
  
  .login__input--pw {
    padding-right: 3rem; /* room for eye toggle */
  }
  
  .login__input--error {
    border-color: rgba(255, 100, 100, 0.65) !important;
    background-color: rgba(64, 17, 17, 0.25) !important;
  }
  
  .login__input-icon {
    position: absolute;
    left: 0.8125rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-dim);
    pointer-events: none;
    transition: color 0.15s ease;
  }
  
  .login__input-wrap:focus-within .login__input-icon {
    color: var(--c-cyan);
  }
  
  .login__toggle-pw {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--c-text-dim);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 0;
    transition: color 0.15s ease;
  }
  
  .login__toggle-pw:hover { color: var(--c-text-secondary); }
  
  .login__field-error {
    color: var(--c-error);
    font-size: 0.75rem;
    line-height: 1.4;
  }
  
  /* ── Options (remember / forgot) ─────────────────────────────────── */
  .login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.375rem;
  }
  
  .login__remember {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    cursor: pointer;
    user-select: none;
  }
  
  .login__checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1.5px solid rgba(100, 116, 139, 0.4);
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    flex-shrink: 0;
  }
  
  .login__checkbox:checked {
    background-color: var(--c-cyan);
    border-color: var(--c-cyan);
  }
  
  .login__checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 0px;
    width: 5px; height: 9px;
    border: solid var(--c-navy);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  
  .login__remember-text {
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
  }
  
  .login__forgot {
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }
  
  .login__forgot:hover { opacity: 0.75; }
  
  /* ── Submit button ─────────────────────────────────────────────────── */
  .login__submit {
    width: 100%;
    margin-top: 1.375rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-sans);
    transition: box-shadow 0.20s ease, opacity 0.15s ease;
  }
  
  .login__submit:hover:not(:disabled) {
    box-shadow: 0 8px 32px rgba(0, 240, 255, 0.28) !important;
  }
  
  .login__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  /* ── Security notice ──────────────────────────────────────────────── */
  .login__security {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background-color: rgba(0, 230, 118, 0.025);
    border: 1px solid rgba(0, 230, 118, 0.07);
  }
  
  .login__security-text {
    color: var(--c-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
  }
  
  .login__security-highlight {
    color: var(--c-green);
    font-weight: 600;
  }
  
  /* ── Divider ──────────────────────────────────────────────────────── */
  .login__divider {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 1.5rem 0;
  }
  
  .login__divider-line {
    flex: 1;
    height: 1px;
    background-color: var(--c-border-light);
  }
  
  .login__divider-text {
    color: var(--c-text-dim);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
  }
  
  /* ── Quick action links ───────────────────────────────────────────── */
  .login__quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
  
  .login__quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.6875rem 0.875rem;
    border-radius: 0.625rem;
    background-color: rgba(10, 25, 47, 0.6);
    border: 1px solid var(--c-border-light);
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  
  .login__quick-btn:hover {
    border-color: rgba(0, 240, 255, 0.22);
    color: white;
  }
  
  /* ── Page footer ───────────────────────────────────────────────────── */
  .login__footer {
    margin-top: 2rem;
    text-align: center;
  }
  
  .login__footer-text {
    color: var(--c-text-dim);
    font-size: 0.8125rem;
  }
  
  .login__footer-link {
    color: var(--c-cyan);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.25rem;
    transition: opacity 0.15s ease;
  }
  
  .login__footer-link:hover { opacity: 0.75; }
  
  .login__footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 0.875rem;
  }
  
  .login__footer-nav {
    color: var(--c-text-dim);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  
  .login__footer-nav:hover { color: var(--c-text-secondary); }
  
  .login__footer-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background-color: var(--c-text-dim);
  }
  

/* ═══════════════════════════════════════════════════════════════════
   IONE NETWORKS — Hero Section Precision CSS
   css/hero.css  ·  Phase 3: High-Fidelity Build
   ─────────────────────────────────────────────────────────────────
   Load order:  css/style.css  →  css/hero.css  (this file)
   Fonts: 구글 폰트는 style.css에서 단일 호출 — 중복 @import 없음.
   ─────────────────────────────────────────────────────────────────
   Pixel-extracted values from video analysis (ffmpeg frame analysis):
     Background:      rgb(9,  24, 47)  → var(--c-navy)  ✓
     Particle cyan:   rgb(13,184,236)  → rgba(0,240,255,α)
     Title cyan line: rgb(17,187,241)  → #11BBF1
     Counter core:    rgb(10,231,247)  → #0AE7F7
     Button grad L:   rgb( 8,121,149)  → #00C4D4
     Button grad R:   rgb( 4, 86,178)  → #0057E8
     Stat card bg:    rgb(13, 29, 54)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Hero-scoped custom properties ────────────────────────────── */
.hero {
    --hero-particle-color: rgba(0, 240, 255, 1);
    --hero-counter-color:  #0AE7F7;
    --hero-title-cyan:     #11BBF1;
    --hero-btn-l:          #00C4D4;   /* Left  of gradient (measured) */
    --hero-btn-r:          #0057E8;   /* Right of gradient (measured) */
    --hero-stat-bg:        rgba(13, 29, 54, 0.80);
    --hero-stat-border:    rgba(50, 80, 120, 0.45);
    --hero-stat-border-hover: rgba(0, 240, 255, 0.30);
  
    /* timing tokens — match Framer Motion values exactly */
    --hero-t-badge:   1.0s;
    --hero-t-h1:      0.8s;
    --hero-t-sub:     0.8s;
    --hero-t-counter: 1.0s;
    --hero-t-cta:     0.8s;
    --hero-t-stat:    0.6s;
    --hero-t-scroll:  0.8s;
  
    /* easing: cubic ease-out matching React spring default */
    --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     HERO SECTION — Layout Shell
     ═══════════════════════════════════════════════════════════════════ */
  
  .hero {
    position: relative;
    min-height: 100svh;           /* use svh for mobile browser chrome */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 5rem;            /* clear fixed header */
    background-color: var(--c-navy);
  }
  
  /* ─── Background layer ──────────────────────────────────────────── */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--c-navy);
  }
  
 
  /* ─── Atmospheric glow orbs ─────────────────────────────────────── */
  .hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    
  }
  
  .hero__glow--top {
    top: -5%;
    left: 20%;
    width: 55vw;
    height: 55vw;
    max-width: 700px;
    max-height: 700px;
    background: radial-gradient(
      circle,
      rgba(0, 240, 255, 0.028) 0%,
      transparent 65%
    );
    filter: blur(40px);
    animation: heroGlowPulse 6s ease-in-out infinite;
  }
  
  .hero__glow--bottom {
    bottom: -10%;
    right: 15%;
    width: 45vw;
    height: 45vw;
    max-width: 580px;
    max-height: 580px;
    background: radial-gradient(
      circle,
      rgba(0, 102, 255, 0.038) 0%,
      transparent 65%
    );
    filter: blur(40px);
    animation: heroGlowPulse 6s ease-in-out infinite 2s;
  }
  
  /* Dot-grid texture overlay */
  .hero__grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.022;
    background-image:
      radial-gradient(circle, rgba(0, 240, 255, 0.9) 1px, transparent 1px);
    background-size: 48px 48px;
  }
  
  /* ─── Content container ─────────────────────────────────────────── */
  .hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 1.25rem 5rem;
    text-align: center;
    margin-top: -30px;
  }
  
  @media (min-width: 640px) {
    .hero__content { padding: 5rem 2rem 6rem; }
  }
  
  @media (min-width: 1024px) {
    .hero__content { padding: 6rem 2rem 10rem; }
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     HERO BADGE  ("Since 2009")
     Pixel data: bg ≈ rgb(11, 42, 63), text ≈ rgb(53, 177, 189)
     Animation: opacity 0→1, scale 0.9→1, delay 0.4s, dur 1.0s
     ═══════════════════════════════════════════════════════════════════ */
  
  .hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 1rem;
    margin-bottom: 1.75rem;
    border-radius: 9999px;
    background-color: rgba(0, 240, 255, 0.055);
    border: 1px solid rgba(0, 240, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  
    /* entrance */
    opacity: 0;
    transform: scale(0.92);
    animation: heroFadeScale var(--hero-t-badge) var(--hero-ease) 0.4s forwards;
  }
  
  .hero__badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--c-cyan);
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
    flex-shrink: 0;
    animation: heroDotPulse 2.4s ease-in-out infinite;
  }
  
  .hero__badge-text {
    color: rgba(53, 200, 220, 0.95);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     HERO HEADLINE
     White line 1: rgb(157,219,242)  Cyan line 2: rgb(17,187,241)
     Animation: opacity 0→1, y 30→0, delay 0.1s, dur 0.8s
     ═══════════════════════════════════════════════════════════════════ */
  
  .hero__title {
    margin: 0 0 1.125rem;
    font-size: clamp(1.875rem, 5.5vw, 4rem);  /* 30–64px */
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -3px;
    color: #ffffff;
  
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp var(--hero-t-h1) var(--hero-ease) 0.1s forwards;
  }
  
  @media (min-width: 640px) {
    .hero__title { margin-bottom: 1.375rem; }
  }
  
  
  
  /* ─── Subtitle ──────────────────────────────────────────────────── */
  .hero__subtitle {
    max-width: 44rem;
    margin: 0 auto 2.25rem;
    padding: 0 0.5rem;
    color: var(--c-text-secondary);
    font-size: clamp(0.9375rem, 1.8vw, 1.1875rem);
    line-height: 1.82;
    letter-spacing: 0.008em;
  
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp var(--hero-t-sub) var(--hero-ease) 0.2s forwards;
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     BIG COUNTER
     Core color: rgb(10,231,247) ≈ #0AE7F7
     Glow halo:  rgba(15,126,146,0.6) → shadow-blur simulation
     Animation: opacity 0→1, scale 0.9→1, delay 0.4s, dur 1.0s
     CountUp: 0 → 1,000,000,000 in 3000ms, cubic ease-out
     ═══════════════════════════════════════════════════════════════════ */
  
  .hero__counter {
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: scale(0.9);
    animation: heroFadeScale var(--hero-t-counter) var(--hero-ease) 0.4s forwards;
  }
  
  @media (min-width: 640px) {
    .hero__counter { margin-bottom: 3.25rem; }
  }
  
  
  
  .hero__counter-plus {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.72em;
    margin-left: 0.06em;
  }
  
  .hero__counter-label {
    margin-top: 0.625rem;
    font-size: clamp(0.8125rem, 1.4vw, 1rem);
    color: var(--c-text-secondary);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     CTA BUTTON GROUP
     Animation: opacity 0→1, y 30→0, delay 0.5s, dur 0.8s
     ═══════════════════════════════════════════════════════════════════ */
  
  .hero__cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 3.75rem;
    padding: 0 1rem;
  
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp var(--hero-t-cta) var(--hero-ease) 0.5s forwards;
  }
  
  @media (min-width: 540px) {
    .hero__cta-group {
      flex-direction: row;
      gap: 1rem;
      margin-bottom: 4.5rem;
    }
  }
  
  /* ─── Primary CTA (Gradient Button) ─────────────────────────────── */
  /* Pixel-measured gradient: L=#00C4D4, R=#0057E8 */
  .hero__cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.75rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
  
    background: linear-gradient(
      135deg,
      var(--hero-btn-l) 0%,
      #0088EE 45%,
      var(--hero-btn-r) 100%
    );
    background-size: 200% 200%;
    background-position: 0% 50%;
  
    /* Resting glow */
    box-shadow:
      0 4px 20px rgba(0, 196, 212, 0.30),
      0 1px 0 rgba(255,255,255,0.08) inset;
  
    transition:
      box-shadow    0.25s ease,
      transform     0.18s ease,
      background-position 0.5s ease,
      filter        0.25s ease;
  }
  
  .hero__cta-primary:hover {
    background-position: 100% 50%;
    box-shadow:
      0 6px 32px rgba(0, 210, 255, 0.48),
      0 0  48px rgba(0, 180, 255, 0.18),
      0 1px 0 rgba(255,255,255,0.12) inset;
    transform: translateY(-2px);
    filter: brightness(1.06);
  }
  
  .hero__cta-primary:active {
    transform: translateY(0px);
    box-shadow:
      0 2px 12px rgba(0, 196, 212, 0.30),
      0 1px 0 rgba(255,255,255,0.08) inset;
    filter: brightness(0.97);
  }
  
  /* Arrow icon — slides right on hover */
  .hero__cta-arrow {
    display: inline-flex;
    transition: transform 0.22s var(--hero-ease);
  }
  
  .hero__cta-primary:hover .hero__cta-arrow {
    transform: translateX(5px);
  }
  
  /* ─── Secondary CTA (Outline) ────────────────────────────────────── */
  .hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.75rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-gray-300);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(100, 116, 139, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  
    transition:
      color       0.20s ease,
      border-color 0.20s ease,
      background  0.20s ease,
      transform   0.18s ease,
      box-shadow  0.20s ease;
  }
  
  .hero__cta-secondary:hover {
    color: #ffffff;
    border-color: rgba(0, 240, 255, 0.28);
    background: rgba(0, 240, 255, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 240, 255, 0.08);
  }
  
  .hero__cta-secondary:active {
    transform: translateY(0);
  }
  
  @media (min-width: 540px) {
    .hero__cta-primary,
    .hero__cta-secondary {
      width: auto;
      min-width: 10.5rem;
    }
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     STAT CARDS GRID
     Pixel data: bg=rgb(13,29,54), border=rgba(50,80,120,0.45)
     Animation: opacity 0→1, y 40→0
       card[0]: delay 0.6s
       card[1]: delay 0.7s
       card[2]: delay 0.8s
     Duration: 0.6s each, cubic ease-out
     ═══════════════════════════════════════════════════════════════════ */
  
  .hero__stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
    max-width: 40rem;
    margin: 0 auto;
    white-space: nowrap;
  }
  
  @media (min-width: 640px) {
    .hero__stats-grid { gap: 1.25rem; }
  }
  
  /* Individual stat card */
  .hero__stat-card {
    position: relative;
    /* Default: hidden, animated via JS class toggle for IntersectionObserver */
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity  var(--hero-t-stat) var(--hero-ease),
      transform var(--hero-t-stat) var(--hero-ease);
  }
  
  /* JS adds .is-visible → triggers entrance */
  .hero__stat-card.is-visible { opacity: 1; transform: translateY(0); }
  
  /* Stagger delays */
  .hero__stat-card:nth-child(1) { transition-delay: 0.60s; }
  .hero__stat-card:nth-child(2) { transition-delay: 0.70s; }
  .hero__stat-card:nth-child(3) { transition-delay: 0.80s; }
  
  /* Hover glow overlay */
  .hero__stat-card-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    background: linear-gradient(
      135deg,
      rgba(0, 240, 255, 0.07) 0%,
      transparent 70%
    );
  }
  
  .hero__stat-card:hover .hero__stat-card-glow { opacity: 1; }
  
  /* Card inner box */
  .hero__stat-card-inner {
    position: relative;
    padding: 1.125rem 0.875rem;
    border-radius: 0.875rem;
    /* Measured: bg rgb(13,29,54), border rgba(50,80,120,0.45) */
    background-color: var(--hero-stat-bg);
    border: 1px solid var(--hero-stat-border);
    text-align: center;
    transition:
      border-color 0.25s ease,
      box-shadow   0.25s ease,
      transform    0.20s ease;
    overflow: hidden;
  }
  
  @media (min-width: 640px) {
    .hero__stat-card-inner { padding: 1.5rem 1rem; }
  }
  
  .hero__stat-card:hover .hero__stat-card-inner {
    border-color: var(--hero-stat-border-hover);
    box-shadow: 0 4px 24px rgba(0, 240, 255, 0.09);
    transform: translateY(-2px);
  }
  
  /* Subtle shimmer on hover */
  .hero__stat-card-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      105deg,
      transparent 40%,
      rgba(0, 240, 255, 0.04) 50%,
      transparent 60%
    );
    background-size: 200% 100%;
    background-position: -100% 0;
    transition: background-position 0.6s ease;
    pointer-events: none;
  }
  
  .hero__stat-card:hover .hero__stat-card-inner::after {
    background-position: 200% 0;
  }
  
  /* Stat icon */
  .hero__stat-icon {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0 auto 0.625rem;
    /* Measured: rgb(58,161,183) → roughly 50% opacity cyan */
    color: rgba(0, 220, 255, 0.65);
  }
  
  @media (min-width: 640px) {
    .hero__stat-icon {
      width: 1.5rem;
      height: 1.5rem;
      margin-bottom: 0.75rem;
    }
  }
  
  /* Stat value — white + small cyan suffix */
  .hero__stat-value {
    color: #ffffff;
    font-size: clamp(1.375rem, 3.2vw, 2.125rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  
  .hero__stat-suffix {
    color: var(--c-cyan);
    font-size: 0.68em;
    letter-spacing: 0;
    margin-left: 0.04em;
  }
  
  /* Stat label */
  .hero__stat-label {
    margin-top: 0.375rem;
    color: var(--c-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     SCROLL INDICATOR
     Animation: opacity 0→1 at 1.5s delay
     Dot motion: y [0, 12, 0] loop, dur 1.5s
     ═══════════════════════════════════════════════════════════════════ */
  
  .hero__scroll {
    position: absolute;
    bottom: 2.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    opacity: 0;
    animation: heroFadeIn 0.8s ease 1.5s forwards;
  }
  
  @media (min-width: 640px) {
    .hero__scroll { display: block; }
  }
  
  .hero__scroll-track {
    width: 1.625rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1.5px solid rgba(100, 116, 139, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.4375rem;
  }
  
  .hero__scroll-dot {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background-color: var(--c-cyan);
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
    animation: heroScrollBounce 1.5s ease-in-out infinite;
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     KEYFRAME ANIMATIONS
     ═══════════════════════════════════════════════════════════════════ */
  
  /* Entrance: translate Y up + fade */
  @keyframes heroFadeUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Entrance: scale up + fade */
  @keyframes heroFadeScale {
    from {
      opacity: 0;
      transform: scale(0.90);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Simple fade-in */
  @keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  /* Badge live dot pulse */
  @keyframes heroDotPulse {
    0%, 100% {
      opacity: 1;
      box-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
    }
    50% {
      opacity: 0.45;
      box-shadow: 0 0 3px rgba(0, 240, 255, 0.3);
    }
  }
  
  /* Background glow orb breathing */
  @keyframes heroGlowPulse {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%       { opacity: 0.60; transform: scale(1.08); }
  }
  
  /* Scroll dot bounce — y: [0, 12, 0] */
  @keyframes heroScrollBounce {
    0%        { transform: translateY(0px);  opacity: 1;   }
    50%       { transform: translateY(11px); opacity: 0.5; }
    100%      { transform: translateY(0px);  opacity: 1;   }
  }
  
  
  /* ═══════════════════════════════════════════════════════════════════
     RESPONSIVE ADJUSTMENTS
     ═══════════════════════════════════════════════════════════════════ */
  
 
  
  @media (min-width: 1280px) {
    .hero__content { padding-top: 8rem; }
    .hero__stats-grid { max-width: 44rem; gap: 1.5rem; }
  }
  
  /* Reduced motion: skip all entrance animations */
  @media (prefers-reduced-motion: reduce) {
    .hero__badge,
    .hero__title,
    .hero__subtitle,
    .hero__counter,
    .hero__cta-group {
      animation: none;
      opacity: 1;
      transform: none;
    }
    .hero__stat-card {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .hero__scroll-dot { animation: none; }
    .hero__glow--top, .hero__glow--bottom { animation: none; }
  }
  


/* ═══════════════════════════════════════════════════════════════════
   IONE NETWORKS — Design System Foundation
   css/style.css  ·  Phase 1: Design System Build
   ─────────────────────────────────────────────────────────────────
   Table of Contents
   ─────────────────────────────────────────────────────────────────
   01. FONT IMPORTS
   02. RESET
   03. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
       ├─ 3.1 Brand Colors
       ├─ 3.2 Accent / Hover States
       ├─ 3.3 Semantic Colors
       ├─ 3.4 Code Syntax Tokens
       ├─ 3.5 Surface Colors (Navy Scale)
       ├─ 3.6 Text Colors
       ├─ 3.7 Gray Palette
       ├─ 3.8 Border Colors
       ├─ 3.9 Spacing Scale
       ├─ 3.10 Border Radii
       ├─ 3.11 Typography
       ├─ 3.12 Elevation / Glow / Shadow
       ├─ 3.13 Transitions
       └─ 3.14 Brand / Accent Modifier System
   04. TYPOGRAPHY
       ├─ 4.1 Base
       ├─ 4.2 Headings
       ├─ 4.3 Display Text
       └─ 4.4 Utility Text Classes
   05. LAYOUT COMPONENTS (BEM)
       ├─ 5.1 Page Wrapper & Container
       ├─ 5.2 Glassmorphism
       ├─ 5.3 Gradient Text
       ├─ 5.4 Section Anatomy
       ├─ 5.5 Button System
       ├─ 5.6 Badge
       ├─ 5.7 Tag / Chip
       ├─ 5.8 Card (Glass)
       ├─ 5.9 Icon System
       ├─ 5.10 Form Controls
       └─ 5.11 Utility Helpers
   06. ANIMATIONS
   07. RESPONSIVE VISIBILITY HELPERS
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   01. FONT IMPORTS
   ═══════════════════════════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');


   /* ═══════════════════════════════════════════════════════════════════
      02. RESET
      Opinionated minimal reset — zero out UA defaults, enforce
      box-sizing, remove implicit list/form styles.
      ═══════════════════════════════════════════════════════════════════ */
   
   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     font-size: 16px;
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
     tab-size: 2;
   }
   
   body {
     min-height: 100vh;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
   }
   
   img,
   video,
   svg {
     display: block;
     max-width: 100%;
   }
   
   button,
   input,
   select,
   textarea {
     font: inherit;
     color: inherit;
     background: transparent;
     border: none;
     outline: none;
   }
   
   button {
     cursor: pointer;
   }
   
   a {
     text-decoration: none;
     color: inherit;
   }
   
   ul,
   ol {
     list-style: none;
   }
   
   table {
     border-collapse: collapse;
   }
   
   address {
     font-style: normal;
   }
   
   fieldset {
     border: none;
     padding: 0;
     margin: 0;
   }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      03. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
      Single source of truth — extracted from design analysis.
      ═══════════════════════════════════════════════════════════════════ */
   
   :root {
   
     /* ─── 3.1 Brand Colors ─────────────────────────────────────────── */
     --c-cyan:   #00F0FF;
     --c-blue:   #0066FF;
     --c-purple: #6C63FF;
     --c-orange: #FF6B35;
     --c-green:  #00E676;
   
     /* ─── 3.2 Accent / Hover States ───────────────────────────────── */
     --c-cyan-light:   #67e8f9;
     --c-purple-light: #a78bfa;
     --c-orange-light: #fb923c;
     --c-green-light:  #4ade80;
   
     /* ─── 3.3 Semantic Colors ─────────────────────────────────────── */
     --c-error:   #FF6B6B;
     --c-warning: #FFC107;
     --c-danger:  #FF5252;
     --c-amber:   #FFB74D;
   
     /* ─── 3.4 Code Syntax Token Colors ───────────────────────────── */
     --c-token-string:  #A8FF60;
     --c-token-param:   #FFD580;
     --c-token-comment: #4A6741;
   
     /* ─── 3.5 Surface Colors (Navy Scale) ─────────────────────────── */
     --c-navy:      #0A192F;  /* Primary background                   */
     --c-navy-light: #112240; /* Card / elevated surface              */
     --c-navy-deep:  #060E1F; /* Footer / deepest layer               */
   
     /* ─── 3.6 Text Colors ─────────────────────────────────────────── */
     --c-text-primary:   #CCD6F6; /* Body copy on dark                */
     --c-text-secondary: #8892B0; /* Descriptions, labels             */
     --c-text-dim:       #4A5568; /* Placeholder, copyright, muted    */
   
     /* ─── 3.7 Gray Palette (Neutral UI) ──────────────────────────── */
     --c-gray-300:  #d1d5db;
     --c-gray-400:  #9ca3af;
     --c-gray-500:  #6b7280;
     --c-gray-600:  #4b5563;
     --c-gray-slate: #64748b;
   
     /* ─── 3.8 Border Colors ───────────────────────────────────────── */
     --c-border:           rgba(100, 116, 139, 0.30);
     --c-border-light:     rgba(100, 116, 139, 0.15);
     --c-border-faint:     rgba(100, 116, 139, 0.10);
     --c-border-subtle:    rgba(100, 116, 139, 0.20);
     --c-border-cyan:      rgba(0, 240, 255, 0.12);
     --c-border-cyan-hover:rgba(0, 240, 255, 0.37);
   
     /* ─── 3.9 Spacing Scale ───────────────────────────────────────── */
     --sp-1:  0.25rem;  /*  4px */
     --sp-2:  0.50rem;  /*  8px */
     --sp-3:  0.75rem;  /* 12px */
     --sp-4:  1.00rem;  /* 16px */
     --sp-5:  1.25rem;  /* 20px */
     --sp-6:  1.50rem;  /* 24px */
     --sp-8:  2.00rem;  /* 32px */
     --sp-10: 2.50rem;  /* 40px */
     --sp-12: 3.00rem;  /* 48px */
   
     /* Section-level rhythm */
     --sp-section-sm: 4rem;   /*  64px */
     --sp-section-md: 6rem;   /*  96px */
     --sp-section-lg: 8rem;   /* 128px */
   
     /* ─── 3.10 Border Radii ───────────────────────────────────────── */
     --r-sm:   0.25rem;  /*  4px */
     --r-md:   0.50rem;  /*  8px */
     --r-lg:   0.75rem;  /* 12px */
     --r-xl:   1.00rem;  /* 16px */
     --r-2xl:  1.25rem;  /* 20px */
     --r-full: 9999px;
   
     /* ─── 3.11 Typography ─────────────────────────────────────────── */
     --font-sans: sans-serif, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
     --font-mono: sans-serif, 'Fira Mono', monospace;
   
     /* Size Scale (fluid-friendly reference values) */
     --text-xs:   16px;   /* 12px */
     --text-sm:   1.1rem; /* 13px */
     --text-base: 16px;  /* 14px */
     --text-md:   17px;      /* 16px */
     --text-lg:   19px;  /* 18px */
     --text-xl:  21px;   /* 20px */
     --text-2xl:  1.375rem;  /* 22px */
     --text-3xl:  1.5rem;    /* 24px */
   
     /* Weight Aliases */
     --fw-normal:    400;
     --fw-medium:    500;
     --fw-semibold:  600;
     --fw-bold:      700;
     --fw-extrabold: 800;
     --fw-black:     900;
   
     /* Letter Spacing — tech brand defaults */
     --ls-tight:    -0.025em;  /* Large display headings        */
     --ls-snug:     -0.02em;   /* Section titles                */
     --ls-normal:    0em;
     --ls-label:     0.08em;   /* ALL-CAPS labels               */
     --ls-badge:     0.12em;   /* Badge / section-label         */
     --ls-mono:      0.02em;   /* Monospace tracking            */
   
     /* Line Heights */
     --lh-tight:  1.15;
     --lh-snug:   1.25;
     --lh-normal: 1.5;
     --lh-body:   1.70;
     --lh-loose:  1.80;
   
     /* ─── 3.12 Elevation / Glow / Shadow ─────────────────────────── */
     --glow-cyan-sm: 0 4px 24px rgba(0, 240, 255, 0.19);
     --glow-cyan-md: 0 4px 24px rgba(0, 240, 255, 0.30);
     --glow-cyan-lg: 0 8px 32px rgba(0, 240, 255, 0.30);
     --shadow-deep:  0 25px 50px -12px rgba(0, 0, 0, 0.50);
     --shadow-card:  0 10px 30px rgba(0, 0, 0, 0.30);
   
     /* ─── 3.13 Transitions ────────────────────────────────────────── */
     --transition-fast:   0.15s ease;
     --transition-normal: 0.30s ease;
     --transition-slow:   0.50s ease;
   
     /* ─── 3.14 Brand / Accent Modifier System ─────────────────────
        Usage: add .brand--cyan (etc.) to a parent element, then
        child elements consume --brand-r / --brand-g / --brand-b for
        rgba() without hard-coding per-color values.
        ────────────────────────────────────────────────────────────── */
     /* Set defaults to cyan so bare consumers don't break */
     --brand-r: 0;
     --brand-g: 240;
     --brand-b: 255;
     --brand-hex: #00F0FF;
   
     --accent-r: 0;
     --accent-g: 240;
     --accent-b: 255;
     --accent-hex: #00F0FF;
   }
   
   /* Brand modifier classes */
   .brand--cyan    { --brand-r: 0;   --brand-g: 240; --brand-b: 255; --brand-hex: #00F0FF; }
   .brand--violet  { --brand-r: 167; --brand-g: 139; --brand-b: 250; --brand-hex: #A78BFA; }
   .brand--amber   { --brand-r: 245; --brand-g: 158; --brand-b: 11;  --brand-hex: #F59E0B; }
   .brand--emerald { --brand-r: 16;  --brand-g: 185; --brand-b: 129; --brand-hex: #10B981; }
   .brand--indigo  { --brand-r: 108; --brand-g: 99;  --brand-b: 255; --brand-hex: #6C63FF; }
   .brand--orange  { --brand-r: 255; --brand-g: 107; --brand-b: 53;  --brand-hex: #FF6B35; }
   .brand--gold    { --brand-r: 255; --brand-g: 193; --brand-b: 7;   --brand-hex: #FFC107; }
   .brand--silver  { --brand-r: 156; --brand-g: 163; --brand-b: 175; --brand-hex: #9CA3AF; }
   
   /* Accent modifier classes (proof-card color system) */
   .accent--cyan   { --accent-r: 0;   --accent-g: 240; --accent-b: 255; --accent-hex: #00F0FF; }
   .accent--purple { --accent-r: 108; --accent-g: 99;  --accent-b: 255; --accent-hex: #6C63FF; }
   .accent--orange { --accent-r: 255; --accent-g: 107; --accent-b: 53;  --accent-hex: #FF6B35; }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      04. TYPOGRAPHY
      ═══════════════════════════════════════════════════════════════════ */
   
   /* ─── 4.1 Base ──────────────────────────────────────────────────── */
   
   body {
     font-family: var(--font-sans);
     font-size: var(--text-md);
     font-weight: var(--fw-normal);
     color: var(--c-text-primary);
     background-color: var(--c-navy);
     line-height: var(--lh-normal);
   }
   
   /* ─── 4.2 Headings ──────────────────────────────────────────────── */
   
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-sans);
     font-weight: var(--fw-extrabold);
     color: #ffffff;
     line-height: var(--lh-snug);
     letter-spacing: var(--ls-snug);
   }
   
   /* Fluid heading scale — clamp(min, preferred, max) */
   h1 { font-size: clamp(2rem, 5vw, 3.75rem); }    /* 32–60px  */
   h2 { font-size: clamp(1.5rem, 3.5vw, 2.625rem); } /* 24–42px  */
   h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); } /* 20–30px  */
   h4 { font-size: clamp(1.125rem, 2vw, 1.5rem); }   /* 18–24px  */
   h5 { font-size: var(--text-xl); }
   h6 { font-size: var(--text-lg); }
   
   /* ─── 4.3 Display Text ──────────────────────────────────────────── */
   /* High-impact hero numbers and stats */
   
   .display--hero {
     font-family: var(--font-mono);
     font-size: clamp(2rem, 6vw, 4.5rem);
     font-weight: var(--fw-extrabold);
     letter-spacing: var(--ls-tight);
     line-height: 1;
     color: var(--c-cyan);
     text-shadow:
       0 0 40px rgba(0, 240, 255, 0.19),
       0 0 80px rgba(0, 240, 255, 0.06);
   }
   
   .display--404 {
     font-family: var(--font-mono);
     font-size: clamp(4rem, 15vw, 7.5rem);
     font-weight: var(--fw-extrabold);
     letter-spacing: var(--ls-tight);
     line-height: 1;
     color: var(--c-cyan);
     text-shadow: 0 0 60px rgba(0, 240, 255, 0.15);
     user-select: none;
   }
   
   /* ─── 4.4 Utility Text Classes ──────────────────────────────────── */
   
   /* Section anatomy labels */
   .section-label {
     display: block;
     color: var(--c-cyan);
     font-size: var(--text-sm);
     font-weight: var(--fw-semibold);
     letter-spacing: var(--ls-badge);
     text-transform: uppercase;
     margin-bottom: var(--sp-3);
     /* 💡 버튼 스타일링 (파란색 형광) */
    color: #4ee2ff; /* 글자 색 (밝은 파랑) */
    background-color: rgba(78, 226, 255, 0.1); /* 버튼 배경 (반투명 파랑) */
    padding: 0.5rem 1.25rem; /* 버튼 내부 여백 */
    border-radius: 999px; /* 둥근 버튼 모양 */
    border: 1px solid #4ee2ff; /* 파란 테두리 */
   
    /* 텍스트 스타일 추가 */
    font-size: 0.85rem; /* 글자 크기 조정 */
    letter-spacing: 0.05em; /* 자간 조정 */
    width: 170px;
    margin: 0 auto;
    margin-bottom: 31px;
   }
   
   .section-title {
     color: #ffffff;
     font-size: clamp(1.4rem, 3.5vw, 2.625rem);
     font-weight: var(--fw-extrabold);
     line-height: var(--lh-tight);
     letter-spacing: var(--ls-snug);
     margin-bottom: var(--sp-4);
   }
   
   .section-desc {
     color: var(--c-text-secondary);
     font-size: var(--text-md);
     line-height: var(--lh-body);
     max-width: 42rem;
     margin-left: auto;
     margin-right: auto;
     font-size: 0.95rem;
   }
   
   /* Monospace text */
   .mono-text {
     font-family: var(--font-mono);
     letter-spacing: var(--ls-mono);
   }
   
   /* Gradient text accents */
   .gradient-text--cyan {
     background-image: linear-gradient(135deg, var(--c-cyan), var(--c-blue));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   .gradient-text--purple {
     background-image: linear-gradient(135deg, var(--c-cyan), var(--c-purple));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   /* Code syntax token colors */
   .code-token--cyan    { color: var(--c-cyan); }
   .code-token--muted   { color: var(--c-text-secondary); }
   .code-token--string  { color: var(--c-token-string); }
   .code-token--param   { color: var(--c-token-param); }
   .code-token--comment { color: var(--c-token-comment); }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      05. LAYOUT COMPONENTS (BEM)
      ═══════════════════════════════════════════════════════════════════ */
   
   /* ─── 5.1 Page Wrapper & Container ─────────────────────────────── */
   
   .page-wrapper {
     min-height: 100vh;
     width: 100%;
     background-color: var(--c-navy);
     font-family: var(--font-sans);
   }
   
   /*
     .container — constrained content lane
     Modifiers:
       .container--narrow  → 72rem max
       .container--wide    → 90rem max
       .container--full    → no max-width
   */
   .container {
     max-width: 80rem;
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--sp-4);
     padding-right: var(--sp-4);
   }
   
   @media (min-width: 640px) {
     .container {
       padding-left: var(--sp-6);
       padding-right: var(--sp-6);
     }
   }
   
   @media (min-width: 1024px) {
     .container {
       padding-left: var(--sp-8);
       padding-right: var(--sp-8);
       margin: 9px auto;
     }
   }
   
   .container--narrow { max-width: 72rem; }
   .container--wide   { max-width: 90rem; }
   .container--full   { max-width: none; }
   
   /*
     .section — standard vertical rhythm block
     Modifiers: --sm / --md / --lg
   */
   .section {
     position: relative;
     padding-top: var(--sp-section-sm);
     padding-bottom: var(--sp-section-sm);
   }
   
   @media (min-width: 640px) {
     .section {
       padding-top: var(--sp-section-md);
       padding-bottom: var(--sp-section-md);
     }
   }
   
   @media (min-width: 1024px) {
     .section {
       padding-top: var(--sp-section-lg);
       padding-bottom: var(--sp-section-lg);
     }
   }
   
   .section--sm {
     padding-top: var(--sp-section-sm);
     padding-bottom: var(--sp-section-sm);
   }
   
   .section__header {
     text-align: center;
     margin-bottom: var(--sp-12);
   }
   
   @media (min-width: 640px) {
     .section__header { margin-bottom: 4rem; }
   }
   
   
   /* ─── 5.2 Glassmorphism ─────────────────────────────────────────── */
   /*
     .glass — base glass surface
     Modifiers:
       .glass--card    → rounded, bordered glass card
       .glass--panel   → heavier blur, used for modals/forms
       .glass--header  → nav bar glassmorphism
   */
   .glass {
     background-color: rgba(17, 34, 64, 0.45);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
   }
   
   .glass--card {
     background-color: rgba(17, 34, 64, 0.45);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px solid var(--c-border-subtle);
     border-radius: var(--r-xl);
   }
   
   .glass--panel {
     background-color: rgba(17, 34, 64, 0.50);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(100, 116, 139, 0.20);
     border-radius: var(--r-xl);
   }
   
   .glass--header {
     background-color: rgba(10, 25, 47, 0.92);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-bottom: 1px solid rgba(0, 240, 255, 0.08);
     box-shadow: 0 4px 30px rgba(0, 240, 255, 0.03);
   }
   
   .glass--surface {
     background-color: rgba(17, 34, 64, 0.60);
     border: 1px solid rgba(100, 116, 139, 0.15);
     border-radius: var(--r-lg);
   }
   
   /* Hover glow overlay — place as first child inside .glass--card */
  
   
   
   /* ─── 5.3 Gradient Text (alias → typography section) ────────────
      Kept here as BEM aliases for component usage.
      ──────────────────────────────────────────────────────────────── */
   
   .gradient-text-cyan   { @extend .gradient-text--cyan; }
   .gradient-text-purple { @extend .gradient-text--purple; }
   /* Note: if not using a pre-processor, use .gradient-text--cyan directly */
   
   
   /* ─── 5.4 Section Anatomy ──────────────────────────────────────── */
   /* Decorative background elements for sections */
   
   .bg-glow {
     position: absolute;
     border-radius: 50%;
     pointer-events: none;
   }
   
   .bg-glow--cyan-top {
     top: 0;
     left: 25%;
     width: 600px;
     height: 600px;
     filter: blur(180px);
     background-color: rgba(0, 240, 255, 0.024);
     animation: pulse 4s ease-in-out infinite;
   }
   
   .bg-glow--blue-bottom {
     bottom: 0;
     right: 25%;
     width: 500px;
     height: 500px;
     filter: blur(180px);
     background-color: rgba(0, 102, 255, 0.04);
     animation: pulse 4s ease-in-out infinite 1s;
   }
   
   .bg-glow--center {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 900px;
     height: 500px;
     filter: blur(200px);
     background-color: rgba(0, 240, 255, 0.012);
   }
   
   .bg-grid {
     position: absolute;
     inset: 0;
     opacity: 0.025;
     pointer-events: none;
     background-image:
       linear-gradient(var(--c-cyan) 1px, transparent 1px),
       linear-gradient(90deg, var(--c-cyan) 1px, transparent 1px);
     background-size: 80px 80px;
   }
   
   .bg-grid--sm {
     background-size: 60px 60px;
   }
   
   
   /* ─── 5.5 Button System (BEM) ──────────────────────────────────── */
   /*
     Base:  .btn
     Sizes: .btn--sm  .btn--md (default)  .btn--lg
     Types: .btn--primary  .btn--outline  .btn--ghost  .btn--link
   */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--sp-2);
     padding: 0.75rem 1.5rem;
     border-radius: var(--r-lg);
     font-size: var(--text-md);
     font-weight: var(--fw-semibold);
     line-height: 1;
     border: 1px solid transparent;
     cursor: pointer;
     text-decoration: none;
     transition: all var(--transition-fast);
     white-space: nowrap;
     user-select: none;
   }
   
   /* Sizes */
   .btn--sm  { padding: 0.5rem 1.125rem;  font-size: var(--text-sm);  border-radius: var(--r-md); }
   .btn--md  { padding: 0.75rem 1.5rem;   font-size: var(--text-base); }
   .btn--lg  { padding: 1rem 2rem;        font-size: var(--text-md); }
   
   /* Primary — cyan gradient */
   .btn--primary {
     background: linear-gradient(135deg, var(--c-cyan), var(--c-blue));
     color: #ffffff;
    border: none;
    
   }
   
   
   
   
   
   /* Outline — bordered, transparent bg */
   .btn--outline {
     background: transparent;
     color: var(--c-gray-300);
     border-color: var(--c-gray-600);
   }
   
   .btn--outline:hover {
     color: #ffffff;
     border-color: var(--c-gray-400);
   }
   
   /* Cyan Outline */
   .btn--outline-cyan {
     background: transparent;
     color: var(--c-cyan);
     border-color: rgba(0, 240, 255, 0.25);
   }
   
   .btn--outline-cyan:hover {
     background-color: rgba(0, 240, 255, 0.06);
     border-color: rgba(0, 240, 255, 0.5);
   }
   
   /* Ghost — no border, subtle hover */
   .btn--ghost {
     background: transparent;
     color: var(--c-text-secondary);
     border-color: transparent;
   }
   
   .btn--ghost:hover {
     color: #ffffff;
     background-color: rgba(255, 255, 255, 0.05);
   }
   
   /* Link — text-only */
   .btn--link {
     background: transparent;
     color: var(--c-cyan);
     border-color: transparent;
     padding-left: 0;
     padding-right: 0;
   }
   
   .btn--link:hover { opacity: 0.8; }
   
   /* Arrow icon inside button — animates on hover */
   .btn__arrow {
     transition: transform var(--transition-fast);
   }
   
   .btn:hover .btn__arrow { transform: translateX(4px); }
   
   /* Loading / disabled state */
   .btn:disabled,
   .btn[aria-disabled="true"] {
     opacity: 0.6;
     cursor: not-allowed;
     pointer-events: none;
   }
   
   
   /* ─── 5.6 Badge ─────────────────────────────────────────────────── */
   /*
     .badge — small inline status/label element
     Modifiers: --cyan (default) / --green / --orange / --purple
   */
   
   .badge {
     display: inline-flex;
     align-items: center;
     gap: var(--sp-2);
     padding: 0.375rem 0.875rem;
     border-radius: var(--r-full);
     font-size: var(--text-sm);
     font-weight: var(--fw-medium);
     letter-spacing: 0.02em;
     background-color: rgba(0, 240, 255, 0.06);
     border: 1px solid rgba(0, 240, 255, 0.12);
     color: var(--c-cyan);
   }
   
   .badge--green  { background-color: rgba(0, 230, 118, 0.07); border-color: rgba(0, 230, 118, 0.14); color: var(--c-green); }
   .badge--orange { background-color: rgba(255, 107, 53, 0.07); border-color: rgba(255, 107, 53, 0.14); color: var(--c-orange); }
   .badge--purple { background-color: rgba(108, 99, 255, 0.08); border-color: rgba(108, 99, 255, 0.16); color: var(--c-purple); }
   
   /* Live dot inside badge */
   .badge__dot {
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
     background-color: currentColor;
     animation: pulse 2s ease-in-out infinite;
   }
   
   /* Status chips (attendance, feed) */
   .status-chip {
     display: inline-block;
     padding: 0.125rem 0.5rem;
     border-radius: var(--r-sm);
     font-size: 0.625rem;
     font-weight: var(--fw-semibold);
     text-transform: uppercase;
     letter-spacing: 0.04em;
   }
   
   .status-chip--present { background-color: rgba(0, 230, 118, 0.10); color: var(--c-green); }
   .status-chip--late    { background-color: rgba(255, 193,   7, 0.10); color: var(--c-warning); }
   .status-chip--absent  { background-color: rgba(255,  82,  82, 0.10); color: var(--c-danger); }
   
   
   /* ─── 5.7 Tag / Chip ────────────────────────────────────────────── */
   /*
     .tag — small contextual label, often used in card footers
   */
   
   .tag {
     display: inline-block;
     padding: 0.25rem 0.625rem;
     border-radius: var(--r-md);
     font-size: var(--text-xs);
     font-weight: var(--fw-medium);
     color: var(--c-text-secondary);
     background-color: rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.03);
     border: 1px solid rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.07);
   }
   
   /* Mono variant for tech stacks */
   .tag--mono {
     font-family: var(--font-mono);
     font-size: var(--text-xs);
     background-color: var(--c-navy);
     border-color: var(--c-border-subtle);
   }
   
   /* API version tag */
   .tag--version {
     padding: 0.125rem 0.5rem;
     border-radius: var(--r-sm);
     background-color: rgba(0, 240, 255, 0.09);
     color: var(--c-cyan);
     font-size: 0.6875rem;
     font-weight: var(--fw-semibold);
   }
   
   
   /* ─── 5.8 Card (Glass) ──────────────────────────────────────────── */
   /*
     .card — base glass card
     Elements: __inner / __header / __body / __footer
     Modifiers: --hover-cyan / --hover-purple / --hover-orange / --hover-green
   */
   
   .card {
     position: relative;
     overflow: hidden;
     border-radius: var(--r-xl);
     background-color: var(--c-navy-light);
     border: 1px solid var(--c-border);
     transition: border-color var(--transition-normal);
   }
   
   .card__inner {
     position: relative;
     padding: var(--sp-6);
     height: 100%;
     display: flex;
     flex-direction: column;
   }
   
   @media (min-width: 640px) {
     .card__inner { padding: var(--sp-8); }
   }
   
   .card__header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: var(--sp-5);
   }
   
   .card__title {
     color: #ffffff;
     font-size: var(--text-2xl);
     font-weight: var(--fw-bold);
     line-height: var(--lh-snug);
     letter-spacing: -0.01em;
     margin-bottom: var(--sp-2);
   }
   
   .card__title--sm { font-size: var(--text-xl); }
   
   .card__desc {
     color: var(--c-text-secondary);
     font-size: var(--text-base);
     line-height: var(--lh-body);
   }
   
   .card__desc--sm { font-size: var(--text-sm); }
   
   /* Icon wrapper inside cards */
   .card__icon-wrap {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: var(--r-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .card__icon-wrap--cyan   { background-color: rgba(0, 240, 255, 0.06); border: 1px solid rgba(0, 240, 255, 0.12); }
   .card__icon-wrap--purple { background-color: rgba(108, 99, 255, 0.09); border: 1px solid rgba(108, 99, 255, 0.15); }
   .card__icon-wrap--orange { background-color: rgba(255, 107, 53, 0.07); border: 1px solid rgba(255, 107, 53, 0.12); }
   .card__icon-wrap--green  { background-color: rgba(0, 230, 118, 0.07); border: 1px solid rgba(0, 230, 118, 0.12); }
   
   /* Hover border modifiers */
   .card--hover-cyan:hover   { border-color: var(--c-border-cyan-hover); }
   .card--hover-purple:hover { border-color: rgba(108, 99, 255, 0.37); }
   .card--hover-orange:hover { border-color: rgba(255, 107, 53, 0.37); }
   .card--hover-green:hover  { border-color: rgba(0, 230, 118, 0.31); }
   
   /* Decorative glow orbs — absolutely positioned inside .card */
   .card__glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     pointer-events: none;
     transition: all var(--transition-slow);
   }
   
   .card__glow--tr { /* top-right */
     top: -6rem; right: -6rem;
     width: 18rem; height: 18rem;
   }
   
   .card__glow--bl { /* bottom-left */
     bottom: -5rem; left: -5rem;
     width: 12rem; height: 12rem;
     filter: blur(70px);
     opacity: 0;
   }
   
   .card:hover .card__glow--bl { opacity: 1; }
   
   .card__glow--cyan   { background-color: rgba(0, 240, 255, 0.08); }
   .card__glow--purple { background-color: rgba(108, 99, 255, 0.08); }
   .card__glow--orange { background-color: rgba(255, 107, 53, 0.07); }
   .card__glow--green  { background-color: rgba(0, 230, 118, 0.04); }
   
   /* Hover glow (initially hidden) */
   .card__glow--hover {
     opacity: 0;
     transition: opacity var(--transition-slow);
   }
   
   .card:hover .card__glow--hover { opacity: 1; }
   
   /* Metric block inside cards */
   .card-metric {
     padding: var(--sp-3);
     border-radius: var(--r-md);
     background-color: var(--c-navy);
     border: 1px solid var(--c-border-light);
   }
   
   .card-metric__value {
     font-size: var(--text-xl);
     font-weight: var(--fw-extrabold);
     line-height: 1;
     color: var(--accent-hex);
   }
   
   .card-metric__label {
     color: var(--c-text-secondary);
     font-size: var(--text-xs);
     font-weight: var(--fw-medium);
     margin-top: 0.25rem;
   }
   
   
   /* ─── 5.9 Icon System ───────────────────────────────────────────── */
   /*
     .icon -- sizing and color helper classes
     Usage: <svg class="icon--md icon--cyan">
   */
   
   .icon--xs   { width: 0.75rem;  height: 0.75rem;  flex-shrink: 0; }
   .icon--sm   { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
   .icon--md   { width: 1rem;     height: 1rem;     flex-shrink: 0; }
   .icon--base { width: 1.25rem;  height: 1.25rem;  flex-shrink: 0; }
   .icon--lg   { width: 1.5rem;   height: 1.5rem;   flex-shrink: 0; }
   .icon--xl   { width: 2rem;     height: 2rem;     flex-shrink: 0; }
   .icon--2xl  { width: 2.5rem;   height: 2.5rem;   flex-shrink: 0; }
   
   .icon--cyan      { color: var(--c-cyan);    }
   .icon--blue      { color: var(--c-blue);    }
   .icon--purple    { color: var(--c-purple);  }
   .icon--orange    { color: var(--c-orange);  }
   .icon--green     { color: var(--c-green);   }
   .icon--muted     { color: var(--c-gray-400); }
   .icon--dim       { color: var(--c-gray-600); }
   .icon--white     { color: #ffffff;          }
   .icon--accent    { color: var(--accent-hex); }
   .icon--cyan-soft { color: rgba(0, 240, 255, 0.37); }
   
   .icon--rotate-180  { transform: rotate(180deg); }
   .icon--transition  { transition: transform var(--transition-fast); }
   
   
   /* ─── 5.10 Form Controls ────────────────────────────────────────── */
   /*
     .field — wraps label + input
     .field__label / .field__input / .field__select / .field__textarea
     Modifiers: --error on input/select/textarea
   */
   
   .field {
     display: flex;
     flex-direction: column;
     gap: var(--sp-2);
   }
   
   .field__label {
     display: flex;
     align-items: center;
     gap: var(--sp-1);
     color: var(--c-text-primary);
     font-size: var(--text-base);
     font-weight: var(--fw-medium);
   }
   
   .field__required { color: var(--c-cyan); }
   
   /* Shared input styles */
   .field__input,
   .field__select,
   .field__textarea {
     width: 100%;
     padding: 0.75rem 1rem;
     border-radius: var(--r-lg);
     background-color: rgba(10, 25, 47, 0.60);
     border: 1px solid rgba(100, 116, 139, 0.25);
     color: var(--c-text-primary);
     font-size: var(--text-base);
     line-height: var(--lh-normal);
     outline: none;
     transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   }
   
   .field__input::placeholder,
   .field__textarea::placeholder {
     color: var(--c-text-dim);
   }
   
   .field__input:focus,
   .field__select:focus,
   .field__textarea:focus {
     border-color: rgba(0, 240, 255, 0.31);
     box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.08);
   }
   
   .field__input--error,
   .field__select--error,
   .field__textarea--error {
     border-color: rgba(255, 100, 100, 0.60);
   }
   
   .field__select {
     appearance: none;
     cursor: pointer;
   }
   
   .field__textarea { resize: none; }
   
   .field__error {
     color: var(--c-error);
     font-size: var(--text-xs);
   }
   
   /* Input with leading icon wrapper */
   .input-wrap {
     position: relative;
   }
   
   .input-wrap .field__input {
     padding-left: 2.75rem;
   }
   
   .input-wrap__icon {
     position: absolute;
     left: 0.875rem;
     top: 50%;
     transform: translateY(-50%);
     color: var(--c-text-dim);
     pointer-events: none;
     transition: color var(--transition-fast);
   }
   
   .input-wrap:focus-within .input-wrap__icon { color: var(--c-cyan); }
   
   /* Select chevron wrapper */
   .select-wrap {
     position: relative;
   }
   
   .select-wrap__chevron {
     position: absolute;
     right: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
     color: var(--c-text-dim);
   }
   
   
   /* ─── 5.11 Utility Helpers ──────────────────────────────────────── */
   
   
   /* Display / Flex */
   .flex-center {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .flex-between {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .flex-col  { flex-direction: column; }
   .flex-wrap { flex-wrap: wrap; }
   
   /* Text */
   .text-center { text-align: center; }
   .text-right  { text-align: right; }
   
   /* Overflow */
   .overflow-hidden { overflow: hidden; }
   .overflow-x-auto { overflow-x: auto; }
   
   /* Spacing helpers */
   .space-y-2 > * + * { margin-top: var(--sp-2); }
   .space-y-4 > * + * { margin-top: var(--sp-4); }
   .ml-auto { margin-left: auto; }
   
   /* Sticky positions */
   .sticky-header { position: sticky; top: 0; z-index: 50; }
   .sticky-top-32 { position: sticky; top: 8rem; }
   
   /* Divider */
   .divider {
     display: flex;
     align-items: center;
     gap: var(--sp-4);
   }
   
   .divider__line {
     flex: 1;
     height: 1px;
     background-color: var(--c-border-light);
   }
   
   .divider__text {
     color: var(--c-text-dim);
     font-size: var(--text-xs);
     font-weight: var(--fw-medium);
     white-space: nowrap;
   }
   
   /* Nav underline hover effect */
   .nav-link-underline {
     position: relative;
   }
   
   .nav-link-underline::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--c-cyan);
     transition: width var(--transition-normal);
   }
   
   .nav-link-underline:hover::after { width: 100%; }
   
   /* Code block shell — used in bento and API docs */
   .code-block {
     position: relative;
     border-radius: var(--r-lg);
     overflow: hidden;
     background-color: rgba(6, 14, 31, 0.80);
     border: 1px solid rgba(100, 116, 139, 0.20);
   }
   
   .code-block__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem 1rem;
     border-bottom: 1px solid var(--c-border-light);
   }
   
   .code-block__dots {
     display: flex;
     align-items: center;
     gap: var(--sp-2);
   }
   
   .code-block__dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
   }
   
   .code-block__dot--red    { background-color: rgba(239,  68, 68, 0.60); }
   .code-block__dot--yellow { background-color: rgba(234, 179,  8, 0.60); }
   .code-block__dot--green  { background-color: rgba( 34, 197, 94, 0.60); }
   
   .code-block__filename {
     color: var(--c-gray-500);
     font-size: var(--text-xs);
     font-family: var(--font-mono);
     margin-left: var(--sp-2);
   }
   
   .code-block__body {
     padding: var(--sp-4);
     overflow-x: auto;
     font-family: var(--font-mono);
     font-size: 0.78125rem; /* 12.5px */
     line-height: 1.9;
     color: var(--c-text-primary);
   }
   
   .code-block__line {
     display: flex;
     align-items: center;
     gap: var(--sp-3);
   }
   
   .code-block__line-num {
     width: 1.25rem;
     text-align: right;
     color: var(--c-gray-600);
     font-size: 0.6875rem;
     user-select: none;
     flex-shrink: 0;
   }
   
   /* API HTTP method badges */
   .method-badge {
     display: inline-block;
     padding: 0.125rem 0.5rem;
     border-radius: var(--r-sm);
     font-size: var(--text-xs);
     font-weight: var(--fw-bold);
     text-transform: uppercase;
   }
   
   .method-badge--post   { background-color: rgba(0, 230, 118, 0.12); color: var(--c-green); }
   .method-badge--get    { background-color: rgba(0, 240, 255, 0.12); color: var(--c-cyan); }
   .method-badge--put    { background-color: rgba(255, 183, 77, 0.12); color: var(--c-amber); }
   .method-badge--delete { background-color: rgba(255, 107, 107, 0.12); color: var(--c-error); }
   
   /* Scrollbar — dark theme */
   ::-webkit-scrollbar        { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track  { background: var(--c-navy-deep); }
   ::-webkit-scrollbar-thumb  { background: var(--c-border); border-radius: var(--r-full); }
   ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.60); }
   
   /* Focus ring — global */
   :focus-visible {
     outline: 2px solid rgba(0, 240, 255, 0.60);
     outline-offset: 2px;
     border-radius: var(--r-sm);
   }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      06. ANIMATIONS
      ═══════════════════════════════════════════════════════════════════ */
   
   /* Generic pulse — used on dots, glows, badges */
   @keyframes pulse {
     0%, 100% { opacity: 1; }
     50%       { opacity: 0.50; }
   }
   
   /* Slow fade-in upward — page entry */
   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(1.5rem);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* Scroll mouse indicator */
   @keyframes scrollBounce {
     0%, 100% { transform: translateY(0); }
     50%       { transform: translateY(6px); }
   }
   
   /* Gentle glow breathing */
   @keyframes glowPulse {
     0%, 100% { box-shadow: var(--glow-cyan-sm); }
     50%       { box-shadow: var(--glow-cyan-lg); }
   }
   
   /* Subtle shimmer across a surface */
   @keyframes shimmer {
     0%   { background-position: -200% center; }
     100% { background-position: 200% center; }
   }
   
   /* Animation utility classes */
   .anim-fade-in-up {
     animation: fadeInUp var(--transition-slow) ease both;
   }
   
   .anim-pulse { animation: pulse 2s ease-in-out infinite; }
   
   /* Stagger delay helpers (use with .anim-fade-in-up) */
   .anim-delay-100 { animation-delay: 0.10s; }
   .anim-delay-200 { animation-delay: 0.20s; }
   .anim-delay-300 { animation-delay: 0.30s; }
   .anim-delay-400 { animation-delay: 0.40s; }
   .anim-delay-500 { animation-delay: 0.50s; }
   
   
   /* ═══════════════════════════════════════════════════════════════════
      07. RESPONSIVE VISIBILITY HELPERS
      ═══════════════════════════════════════════════════════════════════ */
   
   /* 기본: 모바일 */
.hide-mobile { display: none; }
.show-mobile { display: inline; }
.show-tablet { display: none; }

/* 640px 이상(태블릿+PC) */
@media (min-width: 640px) {
  .hide-mobile { display: inline; }     /* 필요시 inline-block */
  .show-mobile { display: none; }
}

/* 태블릿만 */
@media (min-width: 640px) and (max-width: 1023px) {
  .show-tablet { display: inline; }     /* 필요시 inline-block */
}
   
   /* ═══════════════════════════════════════════════════════════════════
      END OF FILE — css/style.css
      IONE NETWORKS Design System · Phase 1
      ═══════════════════════════════════════════════════════════════════ */

      .login__visual-img {
        width: 100%;
        height: 100%;
        object-fit: cover;      /* 비율 유지하며 영역 꽉 채움 */
        opacity: 0.18;          /* 18% 투명도 — 배경으로만 사용 */
      }
     
      .header__family-dropdown {
        /* 316 */   position: absolute;
        /* 317 */   top: 100%;
        /* 318 */   right: 0;
        /* 319 */   margin-top: 0.75rem;
        /* 320 */   width: 18rem;
        /* 321 */   border-radius: 0.75rem;
        /* 322 */   overflow: hidden;
        /* 323 */   background-color: var(--c-navy-light);
        /* 324 */   border: 1px solid var(--c-border-cyan);
        /* 325 */   box-shadow: var(--shadow-deep);
        /* 326 */   z-index: 200;  ← 추가된 부분
        /* 327 */ }
        
        /* 329 */ .header__family-dropdown-inner {
        /* 330 */   padding: 0.5rem;
        /* 331 */ }
        
        /* 333 */ .header__family-item {
        /* 334 */   display: flex;
        /* 335 */   align-items: center;
        /* 336 */   justify-content: space-between;
        /* 337 */   padding: 0.75rem;
        /* 338 */   border-radius: 0.5rem;
        /* 339 */   text-decoration: none;
        /* 340 */   transition: background-color 0.2s;
        /* 341 */ }
        
        /* 343 */ .header__family-item:hover {
        /* 344 */   background-color: rgba(0, 240, 255, 0.06);
        /* 345 */ }
        
        /* 347 */ .header__family-item-text {
        /* 348 */   display: flex;
        /* 349 */   flex-direction: column;
        /* 350 */   gap: 2px;
        /* 351 */ }
        
        /* 353 */ .header__family-item-name {
        /* 354 */   color: white;
        /* 355 */   font-size: 14px;
        /* 356 */   font-weight: 600;
        /* 357 */ }
        
        /* 359 */ .header__family-item-desc {
        /* 360 */   color: var(--c-gray-500);
        /* 361 */   font-size: 12px;
        /* 362 */ }
        
        /* 364 */ .header__family-item-icon {
        /* 365 */   width: 14px;
        /* 366 */   height: 14px;
        /* 367 */   color: var(--c-gray-600);
        /* 368 */ }

        /* ================================================================
   BLOCK : .family  (섹션 루트)
   ================================================================ */

.family {
    position: relative;
    padding: 4rem 0;
  }
  
  @media (min-width: 640px)  { .family { padding: 6rem 0; } }
  @media (min-width: 1024px) { .family { padding: 8rem 0; } }
  
  /* ── 배경 래퍼 ── */
  .family__bg-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  
  /* ── 배경 글로우 ── */
  .family__bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 500px;
    border-radius: 50%;
    filter: blur(200px);
    background-color: rgba(0, 240, 255, 0.012);
  }
  
  /* ── 콘텐츠 래퍼 ── */
  .family__content {
    position: relative;
  }
  
  /* ── 섹션 헤더 ── */
  .family__header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  @media (min-width: 640px) { .family__header { margin-bottom: 4rem; } }
  
  /* ── 카드 그리드 ── */
  .family__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  @media (min-width: 640px)  { .family__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
  @media (min-width: 1024px) { .family__grid { grid-template-columns: repeat(3, 1fr); } }
  
  
  /* ================================================================
     BLOCK : .family-card  (브랜드 카드)
     ================================================================ */
  
  .family-card {
    position: relative;
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--c-navy-light);
    border: 1px solid rgba(100, 116, 139, 0.25);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.5s;
  }
  
  .family-card:hover {
    border-color: rgba(0, 240, 255, 0.31);
  }
  
  /* ── 호버 글로우 오버레이 ── */
  .family-card__hover-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s;
    background: radial-gradient(
      ellipse at top left,
      rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.03),
      transparent 70%
    );
  }
  
  .family-card:hover .family-card__hover-glow { opacity: 1; }
  
  /* ── 내부 패딩 ── */
  .family-card__inner {
    position: relative;
    padding: 1.25rem;
  }
  
  @media (min-width: 640px) { .family-card__inner { padding: 1.5rem; } }
  
  /* ── 상단 행 ── */
  .family-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  
  /* ── 브랜드 정보 (로고 + 텍스트) ── */
  .family-card__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  /* ── 로고 래퍼 ── */
  .family-card__logo-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: white;
    flex-shrink: 0;
    transition: box-shadow 0.5s;
    border: 1px solid rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.15);
  }
  
  /* ── 로고 이미지 ── */
  .family-card__logo {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
  }
  
  /* ── 브랜드 텍스트 묶음 ── */
  .family-card__brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  /* ── 브랜드명 ── */
  .family-card__name {
    color: white;
    font-size: 16px;
    font-weight: 700;
  }
  
  /* ── 태그라인 (브랜드 색으로 오버라이드됨) ── */
  .family-card__tagline {
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-hex);
  }
  
  /* ── 외부링크 화살표 아이콘 ── */
  .family-card__arrow {
    width: 16px;
    height: 16px;
    color: var(--c-gray-600);
    flex-shrink: 0;
    transition: color 0.2s;
  }
  
  .family-card:hover .family-card__arrow { color: rgba(0, 240, 255, 0.31); }
  
  /* ── 카드 설명 텍스트 ── */
  .family-card__desc {
    color: var(--c-text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  /* ── 기능 태그 리스트 ── */
  .family-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    list-style: none;
  }
  
  /* ── 기능 태그 아이템 ── */
  .family-card__tag {
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--c-text-secondary);
    font-size: 13px;
    font-weight: 500;
    background-color: rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.03);
    border: 1px solid rgba(var(--brand-r), var(--brand-g), var(--brand-b), 0.07);
  }
  
  
  /* ================================================================
     MODIFIER : .brand--{color}
     각 카드에 --brand-r/g/b/hex CSS 변수를 주입
     → .family-card__tagline / __hover-glow / __logo-wrap / __tag 에서 소비
     ================================================================ */
  
  .brand--cyan    { --brand-r: 0;   --brand-g: 240; --brand-b: 255; --brand-hex: #00F0FF; }
  .brand--violet  { --brand-r: 167; --brand-g: 139; --brand-b: 250; --brand-hex: #A78BFA; }
  .brand--amber   { --brand-r: 245; --brand-g: 158; --brand-b: 11;  --brand-hex: #F59E0B; }
  .brand--emerald { --brand-r: 16;  --brand-g: 185; --brand-b: 129; --brand-hex: #10B981; }
  .brand--indigo  { --brand-r: 108; --brand-g: 99;  --brand-b: 255; --brand-hex: #6C63FF; }
  .brand--orange  { --brand-r: 255; --brand-g: 107; --brand-b: 53;  --brand-hex: #FF6B35; }
  .brand--gold    { --brand-r: 255; --brand-g: 193; --brand-b: 7;   --brand-hex: #FFC107; }
  .brand--silver  { --brand-r: 156; --brand-g: 163; --brand-b: 175; --brand-hex: #9CA3AF; }

  .footer__cert-badge img {
    border-radius: 90%;
  }

  /* 모바일 nav */

  /* 모바일 메뉴: 기본은 안 보임(hidden), 열릴 때만 표시 */
#mobile-menu{
    width:100%;
    background:#0b1220;           /* 헤더가 어두우면 */
    color:#fff;
    border-top:1px solid rgba(255,255,255,.10);
  }
  
  /* 내부 레이아웃 */
  .header__mobile-menu-inner{
    padding:14px 16px 18px;
    display:flex;
    flex-direction:column;
    background: var(--c-navy);
  }
  
  .header__mobile-link,
  .header__mobile-family-link{
    display:block;
    padding:5px 0;
    color:inherit;
    text-decoration:none;
  }

  .header__mobile-divider a {
    padding-bottom: 9px;
    font-size: 0.9rem;
    color: #999;
  }
  
  .header__mobile-section-label{
    margin:10px 0 6px;
    font-weight:700;
    opacity:.9;
  }
  
  /* divider는 지금 div 안에 p+a들이 들어있어서 "구분선 + 여백"으로만 씁니다 */
  .header__mobile-divider{
    margin-top:8px;
    padding-top:-9px;
    border-top:1px solid rgba(255,255,255,.10);
  }
  
  /* CTA 버튼 여백 */
  .header__mobile-cta{
    margin-top:10px;
  }