/* ─── TOKENS ─── */
:root {
  /* Colors */
  --w:   #FFFFFF;
  --off: #F8F8FA;
  --ink: #0C0C0F;
  --ink2:#2A2A35;
  --mu:  #7A7A90;
  --text-body: #1F1F36;
  --primary: #4C00FF;
  
  /* Brand Colors */
  --g1: #4B2FFF;
  --g2: #C040E0;
  --g3: #FF4FA0;
  --g4: #FF8060;
  --accent-purple: #3C00FF;
  --accent-pink: #ED0F68;
  --accent-light-purple: #E8E1FF;
  --accent-light-pink: #FF579A;
  
  /* Gradients */
  --grad: linear-gradient(135deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 75%, var(--g4) 100%);
  --grad-120: linear-gradient(120deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 75%, var(--g4) 100%);
  --grad2: linear-gradient(120deg, var(--g1) 0%, var(--g3) 100%);
  --grad-label: linear-gradient(106deg, var(--accent-purple) 8%, var(--accent-pink) 94%);
  --grad-label-w: linear-gradient(106deg, var(--accent-light-purple) 8%, var(--accent-light-pink) 94%);
  --grad-blue: linear-gradient(105deg, #2B8EFF 7%, #478AFF 35%, #6F5DFF 118%);
  --grad-triangle-left: linear-gradient(118deg, #201A4E 0%, #3F34A0 38%, #7B5CFF 72%, #C44DDB 100%);
  --grad-triangle-right: linear-gradient(110deg, #FF6FBA 0%, #FF4FA0 20%, #8A48E5 58%, var(--g1) 100%);
  --grad-triangle-attn: linear-gradient(135deg, #5A38FF 0%, #D947B8 100%);
  
  /* Buttons & Shadows */
  --btn-grad-on-dark: linear-gradient(107.45deg, #2BB8E8 7.0012%, #478AFF 35.071%, #B63FE3 117.89%);
  --primary-shadow: 0 6px 28px rgba(75,47,255,.25);
  
  /* Misc */
  --radius-sm: 6px;
  --line-soft: rgba(0,0,0,.05);
  --r: 20px;
  
  /* Typography */
  --font-heading: 'IBM Plex Sans', 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-mono: 'DM Mono', monospace;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
  scroll-behavior:smooth;
  background-image: url('../../img/academy/v2/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body {
  font-family: var(--font-body);
  font-size:16px;
  line-height:1.6;
  background: transparent;
  color:var(--text-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Typography defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Utility: Gradient text */
.text-grad {
  --text-grad-bg:var(--grad);
  background:var(--text-grad-bg);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.text-grad-main {
  background: var(--grad-120);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-grad-secondary {
  background: var(--grad-label);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-grad-light {
  background: var(--grad-label-w);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-grad-blue {
  background: var(--grad-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-grad--light {
  --text-grad-bg:linear-gradient(90deg,#fff,rgba(255,255,255,.6));
}

/* Utility: Flex layouts */
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col-4 { display: flex; flex-direction: column; gap: 4px; }
.flex-col-12 { display: flex; flex-direction: column; gap: 12px; }
.flex-col-16 { display: flex; flex-direction: column; gap: 16px; }
.flex-col-19 { display: flex; flex-direction: column; gap: 19px; }
.flex-col-24 { display: flex; flex-direction: column; gap: 24px; }
.flex-col-28 { display: flex; flex-direction: column; gap: 28px; }
.flex-col-36 { display: flex; flex-direction: column; gap: 36px; }

.flex-row { display: flex; flex-direction: row; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-48 { gap: 48px; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }

/* Utility: Backgrounds */
.bg-light { background: rgba(248,248,250,0.72); }
.bg-white { background: rgba(255, 255, 255, 0.8); }
.bg-white-98 { background: rgba(255, 255, 255, 0.98); }

/* ─── NAV ─── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:80px;
  background:rgba(255,255,255,0.62);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.logo {
  display: flex;
  align-items: center;
  height: 32px;
}

@media (max-width: 600px) {
  .logo { height: 24px; }
    
}
.logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-a {
  font-size:1rem; color:var(--mu); letter-spacing:0;
  text-decoration:none; transition:color .2s;
}
.nav-a:hover { color:var(--ink); }

/* ─── BUTTON SYSTEM ─── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  white-space:nowrap;
  transition:opacity .2s, transform .2s, box-shadow .2s, background-color .2s, color .2s;
}
.btn:hover { transform:translateY(-2px); }
.btn svg path { stroke:currentColor; }

.btn--on-light {
  background:var(--primary);
  color:#fff;
  font-size:.88rem;
  padding:14px 30px;
  box-shadow:var(--primary-shadow);
}
.btn--on-light:hover { opacity:.92; box-shadow:0 12px 40px rgba(75,47,255,.4); }

.btn--on-dark {
  background:var(--btn-grad-on-dark);
  color:#fff;
  font-size:.88rem;
  padding:14px 30px;
  box-shadow:0 6px 28px rgba(75,47,255,.25);
  border:none;
}
.btn--on-dark:hover { opacity:.92; box-shadow:0 12px 40px rgba(75,47,255,.4); }

.btn--header {
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:8px 16px;
  background:var(--primary);
  color:#fff;
  box-shadow:var(--primary-shadow);
}
.btn--header:hover {
  opacity:.9;
  transform:translateY(-1px);
  box-shadow:0 10px 32px rgba(75,47,255,.35);
}

.btn--lg {
  font-size:1rem;
  padding:18px 44px;
}

.btn--sp {
  min-height:46px;
}

.btn--cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px 32px;
  font-size:1.125rem;
  font-weight:700;
  color:#fff;
  background:var(--btn-grad-on-dark);
  border-radius:6px;
  text-decoration:none;
  transition:all .3s ease;
  box-shadow:0 6px 28px rgba(75,47,255,.25);
  font-feature-settings:'palt' 1;
}
.btn--cta:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 36px rgba(75,47,255,.3);
}
.btn--cta svg {
  width:24px;
  height:24px;
}

/* ─── SECTION SHARED ─── */
.sec       { padding:100px 0; }
.sec-off   { padding:100px 0; background:rgba(248,248,250,0.42); }
.sec-ink   { padding:100px 0; background-color:rgba(39,34,89,1); background-image:url('../../img/academy/v2/bg-dark.png'); background-size:cover; background-position:center top; background-repeat:no-repeat;}
.wrap      { max-width:1080px; margin:0 auto; padding:0 60px; }
.wrap-sm   { max-width:820px;  margin:0 auto; padding:0 60px; }

.lbl {
  font-family: var(--font-heading);
  font-size:.625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mu);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.lbl::before,
.lbl::after { content:''; width:20px; height:1px; background:currentColor; flex-shrink:0; }
.lbl-grad { color:transparent; --text-grad-bg:var(--grad-label); }
.lbl-grad::before,
.lbl-grad::after { background:var(--grad-label); }
.lbl-w { color:transparent; --text-grad-bg:var(--grad-label-w); }
.lbl-w::before,
.lbl-w::after { background:var(--grad-label-w); }

h2.sh {
  font-family: var(--font-heading);
  font-size:clamp(1.75rem,4vw,2.25rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.05em;
  margin-bottom:16px;
  text-align:center;
}
h2.sh em { font-style:normal; --text-grad-bg:var(--grad-label); }
h2.sh-w { color:#fff; }
h2.sh-w em { --text-grad-bg:var(--grad-label-w); }

.section-title { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:40px; }
.section-title .lbl { margin-bottom:16px; }
.section-title .sh { margin-bottom:0; }

.section-chip-title {
  display: flex;
  align-items: center;
  background: rgba(236, 225, 255, 0.82);
  padding: 8px 16px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: #0c0c0f;
  white-space: nowrap;
  margin: 0;
}

/* Common text styles */
.body-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink2);
}

.heading-xl { font-size: 44px; font-weight: 700; line-height: 1.4; letter-spacing: -1px; }
.heading-lg { font-size: 36px; font-weight: 700; line-height: 1.4; letter-spacing: -2px; }
.heading-md { font-size: 32px; font-weight: 700; line-height: 1.6; letter-spacing: -2px; }
.heading-sm { font-size: 20px; font-weight: 700; line-height: 1.4; }
.heading-xs { font-size: 18px; font-weight: 700; }

.attn-title,
.feature-header,
.data-header,
.about-card-title-wrap {
  margin-bottom:40px;
}

.subsection-title { display:flex; flex-direction:column; }
.subsection-title .lbl { margin-bottom:16px; }
.subsection-title__heading {
  font-family:'Syne',sans-serif;
  font-size:1.25rem;
  font-weight:800;
  margin-bottom:20px;
}
.subsection-title--mt64 { margin-top:64px; }
.subsection-title--mt56 { margin-top:56px; }
.subsection-title--skills .lbl { margin-bottom:14px; }
.subsection-title--skills .subsection-title__heading {
  font-size:1.2rem;
  margin-bottom:16px;
}

.cta-common { text-align:center; margin-top:64px; }
.cta-common__note {
  font-size:.8rem;
  color:var(--mu);
  margin-top:8px;
  letter-spacing:.06em;
}
.cta-common--dark .cta-common__note { color:var(--w); }
.cta-common--compact { margin-top:0; }

.sec-num {
  font-family:'Syne',sans-serif;
  font-size:clamp(80px,12vw,160px);
  font-weight:800; line-height:1;
  letter-spacing:-.04em;
  opacity:.07; user-select:none;
  position:absolute; right:0; top:-20px;
}

.logo,
.lbl-grad,
.lbl-w,
h2.sh em,
h2.sh-w em,
.sec-num,
.fqm,
.flogo {
  background:var(--text-grad-bg, var(--grad));
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ─── ANIM ─── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  nav{padding:0 20px;} .nav-links .nav-a{display:none;}
  .nav-links{gap:0;}
  .btn--header{font-size:.78rem;padding:8px 12px;}
  .section-title{margin-bottom:20px;}
  .attn-title,
  .feature-header,
  .data-header,
  .about-card-title-wrap { margin-bottom:20px; }
  .sec,.sec-off,.sec-ink{padding:40px 0;}
  .wrap,.wrap-sm{padding:0 24px;}
  .btn--sp{width:min(100%,368px);}
  .section-chip-title { font-size: 20px; }
}

@media(max-width:600px){
  .btn--cta{width:100%;font-size:1rem;padding:14px 20px;}
  .section-chip-title { font-size: 18px; }
}