@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root{
  --ink: oklch(0.18 0.012 255);
  --ink-2: oklch(0.24 0.014 255);
  --ink-line: oklch(0.34 0.014 255);
  --ivory: oklch(0.972 0.008 85);
  --ivory-2: oklch(0.935 0.012 85);
  --line: oklch(0.86 0.012 85);
  --mute: oklch(0.52 0.012 255);
  --mute-d: oklch(0.70 0.012 255);
  --gold: oklch(0.76 0.12 75);
  --gold-deep: oklch(0.58 0.12 70);
  --teal: oklch(0.76 0.12 195);
  --sans: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --serif: var(--sans);
  --latin: var(--sans);
  --mono: var(--sans);
  --dk: oklch(0.18 0.012 255);
}
*{box-sizing:border-box;margin:0;padding:0}
deck-stage section{
  font-family:var(--sans); color:var(--ink); background:var(--ivory);
  padding:96px 120px 110px; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  letter-spacing:-0.01em; word-break:keep-all;
}
section.dark{background:var(--dk); color:oklch(0.975 0.004 85)}
section.dark .mute{color:var(--mute-d)}
.mute{color:var(--mute)}
.gold{color:var(--gold-deep)} section.dark .gold{color:var(--gold)}

/* chrome */
.chrome{position:absolute; left:120px; right:120px; bottom:48px; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:18px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
section.dark .chrome{color:var(--mute-d)}
.eyebrow{font-family:var(--mono); font-size:22px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); display:flex; gap:18px; align-items:center}
section.dark .eyebrow{color:var(--gold)}
.eyebrow::before{content:''; width:44px; height:2px; background:currentColor}

h1,h2,h3{font-weight:700; letter-spacing:-0.03em; text-wrap:balance}
.title{font-family:var(--serif); font-size:64px; line-height:1.22; margin-top:26px; font-weight:700}
.title em, .it{font-family:var(--latin); font-style:italic; font-weight:500; letter-spacing:0}
.lead{font-size:30px; line-height:1.55; color:var(--mute); margin-top:24px; max-width:1400px; text-wrap:pretty}
section.dark .lead{color:var(--mute-d)}
.body{font-size:26px; line-height:1.55; text-wrap:pretty}
.small{font-size:24px; line-height:1.5}
.label{font-family:var(--mono); font-size:20px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
section.dark .label{color:var(--mute-d)}
.grow{flex:1}
.rule{height:1px; background:var(--line); width:100%}
section.dark .rule{background:var(--ink-line)}

.grid{display:grid; gap:28px}
.card{background:#fff; border:1px solid var(--line); padding:36px 36px; border-radius:4px; display:flex; flex-direction:column; gap:14px}
section.dark .card{background:var(--ink-2); border-color:var(--ink-line)}
.card h3{font-size:34px; line-height:1.25}
.card .num{font-family:var(--mono); font-size:20px; color:var(--gold-deep); letter-spacing:.1em}
section.dark .card .num{color:var(--gold)}
.card p{font-size:24px; line-height:1.5; color:var(--mute); text-wrap:pretty}
section.dark .card p{color:var(--mute-d)}

.tag{display:inline-block; font-family:var(--mono); font-size:18px; padding:6px 12px; border:1px solid var(--line); border-radius:2px; letter-spacing:.05em; color:var(--mute)}
section.dark .tag{border-color:var(--ink-line); color:var(--mute-d)}
.tags{display:flex; flex-wrap:wrap; gap:10px}

.stat .v{font-family:var(--latin); font-size:120px; line-height:1; font-weight:500; letter-spacing:-0.02em}
.stat .v small{font-size:.45em}
.stat .k{font-size:24px; color:var(--mute); margin-top:12px}
section.dark .stat .k{color:var(--mute-d)}

.ph{background:repeating-linear-gradient(135deg, var(--ivory-2) 0 12px, var(--ivory) 12px 24px); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:18px; color:var(--mute); text-align:center; padding:20px}
section.dark .ph{background:repeating-linear-gradient(135deg, var(--ink-2) 0 12px, var(--ink) 12px 24px); border-color:var(--ink-line); color:var(--mute-d)}

.note{font-size:20px; color:var(--mute); line-height:1.5}
section.dark .note{color:var(--mute-d)}

/* section divider */
section.divider{justify-content:flex-end; padding-bottom:160px}
.divider .big-num{position:absolute; right:90px; top:40px; font-family:var(--latin); font-style:italic; font-size:520px; line-height:1; color:var(--ink-2)}
.divider h2{font-family:var(--serif); font-size:100px; line-height:1.15; position:relative}
.divider .lead{position:relative}

/* ===== Gothic typography system (Pretendard only) ===== */
deck-stage section *{font-style:normal !important}
deck-stage section{font-feature-settings:'ss06','tnum' 0; -webkit-font-smoothing:antialiased}
.title{font-weight:700; letter-spacing:-0.045em}
.title em, .it, .cover h1 em{font-weight:300 !important; letter-spacing:-0.04em; color:var(--gold-deep)}
section.dark .title em, section.dark .it{color:var(--gold)}
.eyebrow, .label, .chrome, .tag, .card .num{font-weight:600; letter-spacing:.16em}
.chrome{font-weight:500}
.stat .v{font-weight:600 !important; letter-spacing:-0.055em; font-feature-settings:'tnum'}
.stat .v small{font-weight:400}
.divider h2{font-weight:800; letter-spacing:-0.05em}

/* ===== Section themes ===== */
/* 01 AX — electric indigo */
section.t-ax{--gold: oklch(0.74 0.14 265); --gold-deep: oklch(0.52 0.18 268);
  --ivory: oklch(0.968 0.010 265); --ivory-2: oklch(0.93 0.016 265); --line: oklch(0.87 0.018 265);
  --ink-2: oklch(0.25 0.05 268); --ink-line: oklch(0.36 0.05 268); --dk: oklch(0.17 0.045 270)}
/* 02 Investment & Insurance — deep emerald */
section.t-inv{--gold: oklch(0.78 0.12 168); --gold-deep: oklch(0.50 0.11 170);
  --ivory: oklch(0.968 0.010 165); --ivory-2: oklch(0.93 0.016 165); --line: oklch(0.87 0.016 165);
  --ink-2: oklch(0.24 0.035 190); --ink-line: oklch(0.35 0.035 190); --dk: oklch(0.17 0.03 195)}
/* 03 Accelerating — ember coral */
section.t-acc{--gold: oklch(0.74 0.14 40); --gold-deep: oklch(0.56 0.16 38);
  --ivory: oklch(0.970 0.012 55); --ivory-2: oklch(0.935 0.018 55); --line: oklch(0.87 0.02 55);
  --ink-2: oklch(0.25 0.035 35); --ink-line: oklch(0.36 0.035 35); --dk: oklch(0.18 0.025 35)}
/* 04 Valuen&Members — champagne on bordeaux */
section.t-mem{--gold: oklch(0.80 0.10 80); --gold-deep: oklch(0.56 0.10 70);
  --ivory: oklch(0.968 0.014 80); --ivory-2: oklch(0.93 0.02 80); --line: oklch(0.86 0.022 75);
  --ink-2: oklch(0.25 0.045 15); --ink-line: oklch(0.37 0.045 15); --dk: oklch(0.17 0.04 15)}

/* light-slide section tint band */
section.t-ax:not(.dark)::before, section.t-inv:not(.dark)::before, section.t-acc:not(.dark)::before, section.t-mem:not(.dark)::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:14px; background:var(--gold-deep)}
section.t-ax:not(.dark){background:var(--ivory) radial-gradient(circle, oklch(0.52 0.18 268 / .10) 1.4px, transparent 1.6px) 0 0/32px 32px}
section.t-inv:not(.dark){background:var(--ivory) repeating-linear-gradient(0deg, oklch(0.50 0.11 170 / .07) 0 1px, transparent 1px 54px)}
section.t-acc:not(.dark){background:var(--ivory) repeating-linear-gradient(135deg, oklch(0.56 0.16 38 / .05) 0 1px, transparent 1px 40px)}
section.t-mem:not(.dark){background:var(--ivory) radial-gradient(circle at 100% 0%, oklch(0.80 0.10 80 / .28), transparent 55%)}
section.t-ax.dark{background:var(--dk) radial-gradient(circle, oklch(0.74 0.14 265 / .14) 1.4px, transparent 1.6px) 0 0/32px 32px}
section.t-inv.dark{background:var(--dk) repeating-linear-gradient(0deg, oklch(0.78 0.12 168 / .07) 0 1px, transparent 1px 54px)}
section.t-acc.dark{background:var(--dk) repeating-linear-gradient(135deg, oklch(0.74 0.14 40 / .06) 0 1px, transparent 1px 40px)}
section.t-mem.dark{background:var(--dk) radial-gradient(circle at 100% 0%, oklch(0.80 0.10 80 / .16), transparent 55%)}

/* ===== Divider pictograms ===== */
section.divider .big-num{display:none}
.picto{position:absolute; right:0; top:0; width:1100px; height:1080px; pointer-events:none}
.picto svg{width:100%; height:100%; display:block}
.picto{color:var(--gold); opacity:.85; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%); mask-image:linear-gradient(90deg, transparent 0%, #000 30%)}
.divider .pnum{position:absolute; left:120px; top:96px; font-size:220px; font-weight:800; letter-spacing:-0.06em; line-height:.9;
  color:transparent; -webkit-text-stroke:2px var(--gold); opacity:.9}
.divider .ptag{position:absolute; right:120px; bottom:60px; font-size:20px; font-weight:600; letter-spacing:.2em; color:var(--gold); text-transform:uppercase}
.divider .lead{max-width:900px}
.divider h2, .divider .eyebrow{position:relative; z-index:1}
