/* ─── 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-image: image-set(
    url('../../img/academy/v2/bg.webp') type('image/webp') 1x,
    url('../../img/academy/v2/bg.png') type('image/png') 1x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 800px) {
  html {
    background-attachment: scroll;
  }
}

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-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-16 { display: flex; flex-direction: column; gap: 16px; }
.flex-col-24 { display: flex; flex-direction: column; gap: 24px; }
.flex-col-28 { display: flex; flex-direction: column; gap: 28px; }

/* ─── 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);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  will-change: transform;
  transform: translateZ(0);
}
.logo {
  display: flex;
  align-items: center;
  height: 32px;
}

@media (max-width: 600px) {
  .logo { height: 24px; }
    
}

@media (max-width: 359px) {
  .logo { height: 20px; }
}

.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); }

/* ─── HAMBURGER MENU (SP only) ─── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 600;
}

.hamburger__line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.is-open .hamburger__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.is-open .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ─── MOBILE MENU (SP only) ─── */
.mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  width: 280px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 550;
  border-left: 1px solid var(--line-soft);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 32px 24px;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu__link {
  display: block;
  padding: 16px 0;
  font-size: 1rem;
  color: var(--mu);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  transition: color 0.2s;
}

.mobile-menu__link:hover {
  color: var(--ink);
}

.mobile-menu__cta {
  padding-top: 24px;
}

.mobile-menu__cta .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .nav-links--pc {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-menu {
    display: block;
  }

  nav {
    padding: 0 20px;
    height: 64px;
  }

  .mobile-menu {
    top: 64px;
  }
}

/* ─── 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-image:image-set(url('../../img/academy/v2/bg-dark.webp') type('image/webp') 1x, url('../../img/academy/v2/bg-dark.png') type('image/png') 1x); 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;
}

.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--skills .lbl { margin-bottom:14px; }
.subsection-title--skills .subsection-title__heading {
  font-size:1.2rem;
  margin-bottom:16px;
}

/* ─── LINE BADGE BUTTON ─── */
.line-btn-wrap {
  position: relative;
  display: inline-flex;
  padding-top: 15px;
}
.line-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 29px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: #1f1f36;
  font-feature-settings: 'palt' 1;
  pointer-events: none;
  z-index: 1;
}
.line-badge__icon {
  display: block;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
}
.line-btn-wrap--on-dark .line-badge {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--btn-grad-on-dark) border-box;
}

/* cta-common uses unified styles from jt-v3sections.css */
.cta-common { margin-top:40px; }
.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 {
  background:var(--text-grad-bg, var(--grad));
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ─── 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:100%; max-width:none;}
  .section-chip-title { font-size: 20px; }
  .data-cta .line-btn-wrap,
  .cta-common .line-btn-wrap { width: 100%; max-width:none; }
}

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