/* =============================================
   ODI Co., Ltd. — Design System Variables
   ============================================= */
:root {
  --color-primary:       #0A1628;
  --color-secondary:     #1C3557;
  --color-accent:        #1A6FD4;
  --color-accent-light:  #3B8FE8;
  --color-accent-glow:   rgba(26,111,212,0.12);
  --color-surface:       #F4F6F9;
  --color-surface-dark:  #EEF1F6;
  --color-white:         #FFFFFF;
  --color-text:          #1A1F2E;
  --color-text-sub:      #5A6478;
  --color-text-light:    #8A9BB0;
  --color-border:        #DDE1E9;
  --font-serif:  'Noto Serif KR','Georgia',serif;
  --font-sans:   'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  --font-en:     'Barlow','DM Sans',sans-serif;
  --fs-h1:   clamp(1.9rem,3.5vw,2.6rem);
  --fs-h2:   clamp(1.5rem,2.5vw,1.9rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8rem;
  --section-py: 7rem;
  --section-px: clamp(1.5rem,5vw,4rem);
  --container: 1200px;
  --gap-md: 2rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm:  0 2px 8px rgba(10,22,40,.07);
  --shadow-md:  0 6px 24px rgba(10,22,40,.10);
  --shadow-lg:  0 16px 48px rgba(10,22,40,.14);
  --shadow-blue: 0 8px 32px rgba(26,111,212,.18);
  --transition: 0.3s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-sans);color:var(--color-text);background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--section-px)}
.section{padding:var(--section-py) 0}
.section--dark{background:var(--color-primary);color:#fff}
.section--navy{background:var(--color-secondary);color:#fff}
.section--surface{background:var(--color-surface)}

/* Section Labels */
.section-label{font-family:var(--font-en);font-size:var(--fs-caption);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.section-label::before{content:'';display:block;width:28px;height:2px;background:var(--color-accent);flex-shrink:0}
.section-title{font-family:var(--font-serif);font-size:var(--fs-h1);font-weight:700;line-height:1.3;color:var(--color-text);margin-bottom:1rem}
.section--dark .section-title,.section--navy .section-title{color:#fff}
.section-sub{font-size:var(--fs-body);color:var(--color-text-sub);max-width:560px;line-height:1.8}
.section--dark .section-sub,.section--navy .section-sub{color:rgba(255,255,255,.6)}

/* Animations */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up.delay-1{transition-delay:.1s}
.fade-up.delay-2{transition-delay:.2s}
.fade-up.delay-3{transition-delay:.3s}
.fade-up.delay-4{transition-delay:.4s}
.fade-up.delay-5{transition-delay:.5s}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.8rem;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.9rem;font-weight:600;transition:var(--transition);letter-spacing:.02em}
.btn--primary{background:var(--color-accent);color:#fff}
.btn--primary:hover{background:var(--color-accent-light);box-shadow:var(--shadow-blue);transform:translateY(-1px)}
.btn--outline{border:1.5px solid rgba(255,255,255,.45);color:#fff}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--outline-dark{border:1.5px solid var(--color-border);color:var(--color-text)}
.btn--outline-dark:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* Grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-md)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-md)}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* Count-up */
.count-up{display:inline}

/* Page Hero */
.page-hero{background:var(--color-primary);padding:7rem 0 4rem;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(26,111,212,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(26,111,212,.06) 1px,transparent 1px);background-size:48px 48px}
.page-hero__label{font-family:var(--font-en);font-size:var(--fs-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.8rem;position:relative;z-index:1}
.page-hero__title{font-family:var(--font-serif);font-size:var(--fs-h1);font-weight:700;color:#fff;margin-bottom:.8rem;position:relative;z-index:1}
.page-hero__sub{color:rgba(255,255,255,.55);font-size:var(--fs-body);max-width:520px;position:relative;z-index:1}
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-caption);color:rgba(255,255,255,.4);margin-bottom:1.5rem;position:relative;z-index:1}
.breadcrumb a{color:rgba(255,255,255,.5)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:rgba(255,255,255,.25)}

@media(max-width:768px){:root{--section-py:4.5rem}.page-hero{padding:5.5rem 0 3rem}}