/* ============================================================
   GLIDiC AI — Concept page (page-specific styles)
   Faithful recreation of the Figma "WEB / PC + SP" frames.
   ============================================================ */

.ai-concept {
  --navy:    rgb(0, 0, 104);    /* Trust Navy */
  --blue:    rgb(85, 156, 255); /* Empathy Blue */
  --ink:     rgb(68, 68, 68);   /* body copy */
  --ink-strong: rgb(51, 51, 51);
  --muted:   rgb(153, 153, 153);
  --subnav:  rgb(209, 228, 253);
  --hairline: rgb(204, 204, 204);

  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;

  --maxw: 1280px;
  --pad: 96px;

  position: relative;
  background: rgb(245, 248, 250);
  color: var(--ink);
  font-family: var(--font-jp);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
.ai-concept * { box-sizing: border-box; }
.ai-concept a { color: inherit; text-decoration: none; }
.ai-concept__pc-none {
    display: none;
  }
/* ---- ambient background glows ----------------------------
   one teal/cyan glow upper-right (by the hero), one blue glow
   lower-left (by the statement). JS sizes & positions each blob
   to its content anchor so it tracks the layout. ------------ */
.ai-concept__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ai-concept__blob {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
}
.ai-concept__blob--teal {
  background-image: url('../images/glow-teal.png');
  opacity: 1;
  transform: rotate(183.7deg);
}
.ai-concept__blob--blue {
  background-image: url('../images/glow-violet.png');
  opacity: 0.75;
  transform: rotate(135.8deg);
}

/* ---- floating orb (soft white light, no ring) ------------- */
.ai-concept__orb {
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  will-change: transform, width, height;
  transform-origin: top left;
  background: radial-gradient(circle at 50% 42%,
      #ffffff 0%,
      #ffffff 30%,
      rgba(244, 249, 255, 0.96) 52%,
      rgba(214, 232, 255, 0.72) 74%,
      rgba(190, 220, 255, 0.26) 100%);
}
.ai-concept__orb::after {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140,190,255,0.22) 0%, rgba(140,190,255,0) 70%);
}

/* ---- generic content width --------------------------------- */
.ai-concept__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ============================================================
   SUB NAVIGATION
   ============================================================ */
.ai-concept__subnav {
  position: relative;
  z-index: 2;
  background: var(--subnav);
}
.ai-concept__subnav .ai-concept__inner {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 86px);
}
.ai-concept__subnav a {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--muted);
  position: relative;
  padding: 4px 2px;
  transition: color .2s ease;
}
/* .ai-concept__subnav a:hover { color: var(--ink-strong); }
.ai-concept__subnav a.is-active { color: var(--ink-strong); }
.ai-concept__subnav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -16px;
  height: 3px;
  background: rgb(70,140,240);
} */

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.ai-concept__page {
  position: relative;
  z-index: 2;
  padding-bottom: 120px;
}

/* hero */
.ai-concept__hero { padding-top: 96px; }
.ai-concept__hero h1 {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 64px;
  line-height: 92px;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.ai-concept__lead {
  margin: 43px 0 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 32px;
  line-height: 60px;
  letter-spacing: 0.05em;
  color: var(--ink);
}

/* body prose */
.ai-concept__prose { font-family: var(--font-ui); color: var(--ink); }
.ai-concept__prose p {
  font-size: 20px;
  line-height: 55px;
  letter-spacing: 0.05em;
}
.ai-concept__p1 { margin-top: 162px; }
.ai-concept__p2 { margin-top: 96px; text-align: right; }
.ai-concept__prose p.ai-concept__statement {
  margin: 175px 0 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 65.5px;
  text-align: center;
}

/* divider */
.ai-concept__divider {
  position: relative;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, rgba(150,170,200,0) 0%, rgba(120,150,200,0.5) 50%, rgba(150,170,200,0) 100%);
  max-width: 890px;
  margin: 132px auto 0;
}

/* brand / logo section */
.ai-concept__brand {
  text-align: center;
  padding-top: 146px;
}
.ai-concept__eyebrow {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.6em;
  color: var(--ink);
  margin: 0 0 30px;
  padding-left: 0.6em;
}
.ai-concept__brand-logo { display: block; }
.ai-concept__brand-logo img {
  display: block;
  width: 100%;
  max-width: 454px;
  height: auto;
  margin: 0 auto;
}
.ai-concept__brand-copy {
  margin: 64px auto 0;
  max-width: 923px;
  font-family: var(--font-jp);
  font-size: 23px;
  line-height: 60px;
  letter-spacing: -0.01em;
  text-align: justify;
  color: var(--ink);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.ai-concept .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
.ai-concept .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width: 1180px) {
  .ai-concept { --pad: 56px; }
  .ai-concept__hero h1 { font-size: clamp(40px, 5.6vw, 64px); line-height: 1.45; }
  .ai-concept__lead { font-size: clamp(24px, 3vw, 32px); line-height: 1.85; }
  .ai-concept__prose p { font-size: clamp(17px, 1.9vw, 20px); line-height: 2.6; }
}

/* ============================================================
   RESPONSIVE — mobile (matches the SP frame)
   ============================================================ */
@media (max-width: 720px) {
  .ai-concept { --pad: 32px; }

  .ai-concept__subnav .ai-concept__inner {
    height: 48px;
    justify-content: flex-start;
    gap: 24px;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ai-concept__subnav a { font-size: 13px; white-space: nowrap; }
  .ai-concept__subnav a.is-active::after { bottom: -13px; }

  .ai-concept__page { padding-bottom: 64px; }

  /* hero — SP: 28/39 + 20/35, regular weight, left aligned */
  .ai-concept__hero { padding-top: 130px; }
  .ai-concept__hero h1 {
    font-size: 28px;
    line-height: 39px;
    letter-spacing: 0.01em;
  }
  .ai-concept__lead {
    font-size: 20px;
    line-height: 35px;
    margin-top: 34px;
    letter-spacing: 0.01em;
    font-weight: 400;
  }

  .ai-concept__sp-none {
    display: none;
  }

  .ai-concept__pc-none {
    display: inline-block;
  }

  /* body — SP: all three blocks 15/33, justify, regular, LEFT */
  .ai-concept__prose p {
    font-size: 15px;
    line-height: 33px;
    letter-spacing: 0.05em;
  }
  .ai-concept__p1 { margin-top: 90px; }
  .ai-concept__p2 { margin-top: 89px; text-align: justify; }
  .ai-concept__prose p.ai-concept__statement {
    font-size: 19px;
    line-height: 2.2;
    margin-top: 89px;
    text-align: center;
    font-weight: bold;
  }

  /* brand section — SP: divider → logo → copy, centered, NO eyebrow */
  .ai-concept__divider { margin-top: 160px; max-width: 312px; }
  .ai-concept__brand { padding-top: 65px; }
  .ai-concept__eyebrow { display: none; }
  .ai-concept__brand-logo img { max-width: 254px; }
  .ai-concept__brand-copy {
    font-size: 15px;
    line-height: 33px;
    letter-spacing: 0.05em;
    margin-top: 65px;
    text-align: justify;
  }

  .ai-concept__orb { width: 40px; height: 40px; }
  .ai-concept__blob--teal { opacity: 0.9; }
  .ai-concept__blob--blue { opacity: 0.62; }

  .ai-concept__blob--teal {
    transform: rotate(-162deg);
    width: 660px!important;
    height: 575.89px!important;
    left: 0!important;
    top: -121.82px!important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-concept .reveal { opacity: 1; transform: none; transition: none; }
}