/* ============================================================
   AILIA LLM — Main Stylesheet
   Sections:
   1.  Global / Body
   2.  Hero Section (top-anyan-llama)
   3.  On-Device LLM Section
   4.  On-Device LLM — Diagram Elements
   5.  On-Device LLM — Illustrations / Use Case Line
   6.  Use Cases Section (use-cases)
   7.  Use Cases — Cards (Privacy / Performance / Stability)
   8.  Use Cases — Visual Cards (VLM / SLM / Local Chat)
   9.  Features Section
   10. AI Combination Section
   11. Support Section
   12. Responsive — Tablet / iPad (768px - 1024px)
   13. Responsive — Mobile (max-width: 767px)
   14. Responsive — Small Mobile (max-width: 480px)
============================================================ */


/* ============================================================
   1. GLOBAL / BODY
============================================================ */

.top-text, .llama-svg {
  opacity: 0;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Gray part */

.intro {
 background: #f2f2f2d6;
  padding: 80px 0; 
  text-align: center;
  width: 100%;
}

.intro__inner {
  max-width: 960px;
  margin: auto;
}
 
.intro__title {
  font-size: 28px;
  font-family: "SourceSerifPro-Bold", sans-serif;
  font-weight: 700;
  color: #E60039;
  margin-bottom: 16px;
}
 
.intro__text {
  font-size: 20px;
  font-family: "SourceSerifPro-Bold", sans-serif;
  color: #000000;
  max-width: auto;
  margin: 0 auto;
}
 
/* Responsive */
@media (max-width: 640px) {
  .intro {
    padding: 60px 6vw;
  }
 
  .intro__title {
    font-size: 20px;
  }
 
  .intro__text {
    font-size: 13px;
  }
}

.body {
  background: #ffffff;
  padding: 0;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Shared title block used across all sections */
.title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 1024px;
  height: auto;
  position: relative;
  margin: 0 auto;
}

.title-section {
  color: #000000;
  text-align: center;
  font-family: "SourceSerifPro-Bold", sans-serif;
  font-size: 28px;
  font-weight: 700;
  position: relative;
  width: 100%;
}

.red-line {
  color: #ec3055;
  text-align: center;
  font-family: "Montserrat-Bold", sans-serif;
  font-size: 26px;
  font-weight: 700;
  height: 26px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.description {
  color: #000000;
  text-align: center;
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 20px;
  line-height: 40px;
  font-weight: 400;
  position: relative;
  width: 100%;
}


/* ============================================================
   2. HERO SECTION — top-anyan-llama
============================================================ */

.top-anyan-llama {
  align-self: stretch;
  flex-shrink: 0;
  height: auto;
  min-height: 500px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0 5%;
  box-sizing: border-box;
  flex-wrap: wrap;
  overflow: hidden;
}

.background {
  width: 100%;
  height: 841px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  overflow: hidden;
}

.background2 {
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  object-fit: cover;
}

.simple-particule {
  width: 50%;
  max-width: 813px;
  height: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: visible;
}

.llama-svg {
  width: 90%;
  max-width: 364px;
  height: auto;
  position: relative;
  overflow: visible;
  aspect-ratio: 324.71 / 315;
}

.top-text {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  max-width: 750px;
  min-width: 280px;
  position: relative;
}

.llm {
  color: #ec3055;
  text-align: left;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 24px;
  line-height: 40px;
  font-weight: 700;
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ailia-llm-title {
  width: auto;
  height: auto;
}

.red-rectangle {
  background: #ec3055;
  flex-shrink: 0;
  width: 418px;
  height: 10px;
  position: relative;
}

.div3 {
  color: #ec3055;
  text-align: left;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 24px;
  line-height: 40px;
  font-weight: 700;
  position: relative;
  width: auto;
  display: block;
}

.mobile-br {
  display: none;
}


/* ============================================================
   3. ON-DEVICE LLM SECTION
============================================================ */

.on-device-llm {
  background: #ffffff;
  border-radius: 57px 57px 0px 0px;
  padding: 140px 5%;
  align-self: stretch;
  flex-shrink: 0;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  box-sizing: border-box;
}

.diagram {
  width: 100%;
  max-width: 1085px;
  height: auto;
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Ailia LLM white box */
.ailia-llm {
  background: #ffffff;
  border-radius: 21px;
  display: flex;
  flex-direction: row;
  gap: 45px;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 100%;
  max-width: 1085px;
  height: auto;
  position: relative;
  margin: 0 auto;
  box-shadow: 0px 0px 25px 0px rgba(20, 30, 83, 0.08);
  padding: 40px 0;
  box-sizing: border-box;
}

/* App boxes row — SDK, Edge Server, etc. */
.app {
  display: flex;
  flex-direction: row;
  gap: 23px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  height: auto;
  position: relative;
  width: 100%;
}

.gray-box {
  background: #f2f2f2d6;
  border-radius: 16px;
  flex: 1;
  min-width: 150px;
  max-width: 257px;
  height: 132px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px;
}

.text4 {
  color: #000000;
  text-align: center;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text4-sub {
color: #868281;
  text-align: center;
  font-family: "NotoSansJp-Regular", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  margin-top: 6px;

  max-width: 140px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   4. ON-DEVICE LLM — Diagram Elements
============================================================ */

.frame {
  display: flex;
  flex-direction: column;
  gap: 45px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 264px;  
  min-width: unset;
  position: relative;
}

.diagram-box {
 display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 264px;      /* ← fixe à 264px */
  height: auto;
  min-height: 78px;
  position: relative;
}

.diagram-blue-title {
  color: #141e53;
  text-align: left;
  font-family: "NotoSans-Black", sans-serif;
  font-size: 28px;
  line-height: 30.51px;
  letter-spacing: 2.18px;
  font-weight: 900;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.line {
  margin-top: -1px;
  border-style: solid;
  border-color: rgba(20, 30, 83, 0.15);
  border-width: 1px 0 0 0;
  flex-shrink: 0;
  width: 158px;
  height: 0px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}

.text3 {
  color: #000000;
  text-align: center;
  font-family: "NotoSansJp-Regular", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  position: relative;
}

.ailia-llm-svg2 {
  flex-shrink: 0;
  width: 263px;
  height: 36px;
  position: relative;
  overflow: visible;
  aspect-ratio: 263/36;
}


/* ============================================================
   5. ON-DEVICE LLM — Illustrations / Use Case Line
============================================================ */

.use-case-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 90%;
  max-width: 900px;
  height: auto;
  position: relative;
  margin: 0 auto;
}

.gray-line {
  flex: 1;
  height: 1px;
  background-color: rgba(20, 30, 83, 0.15);
  border: none;
  margin: 0;
  position: relative;
}

.text5 {
  color: #141e53;
  text-align: center;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 24px;
  line-height: 27px;
  font-weight: 700;
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gray-line-vertical {
  margin-top: -1px;
  border-style: solid;
  border-color: rgba(20, 30, 83, 0.15);
  border-width: 1px 0 0 0;
  width: 100px;
  height: 0px;
  position: absolute;
  left: calc(50% - 0px);
  top: calc(50% - -200px);
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}

.use-case-illustration {
  display: flex;
  flex-direction: row;
  gap: 72px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  height: auto;
  position: relative;
  width: 100%;
}

.illustration-box {
  display: flex;
  flex-direction: column;
  gap: 48.73px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  min-width: 188px;
  height: auto;
  position: relative;
}

.illustration-box2 {
  flex-shrink: 0;
  width: 187px;
  height: 122px;
  position: relative;
  aspect-ratio: 187/122;
}

.illustration-text {
  color: #141e53;
  text-align: center;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg {
  width: 187px;
  height: 122px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


/* ============================================================
   6. USE CASES SECTION — use-cases
============================================================ */

.use-cases {
  background: #f2f2f2d6;
  border-radius: 57px 57px 0px 0px;
  padding: 140px 5%;
  align-self: stretch;
  flex-shrink: 0;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 105px;
  box-sizing: border-box;
}

.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 90%;
  max-width: 1093px;
  margin: 0 auto 60px auto;
}

.text7 {
  color: #141e53;
  text-align: center;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 24px;
  line-height: 40px;
  font-weight: 700;
  width: 100%;
}

.llm-ai {
  color: #000000;
  text-align: center;
  font-family: "NotoSansJp-Regular", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  position: relative;
  width: 100%;
}


/* ============================================================
   7. USE CASES — Cards (Privacy / Performance / Stability)
============================================================ */

.use-description {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  width: 90%;
  max-width: 1920px;
  height: auto;
  position: relative;
  margin: 0 auto;
}

.use-case-box {
  padding: 0px 1px;
  display: flex;
  flex-direction: column;
  gap: 31px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 349px;
  position: relative;
}

.case-title {
  display: flex;
  flex-direction: row;
  gap: 19px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  position: relative;
}

.case-icon {
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}

.usecase-title {
  color: #141e53;
  text-align: left;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.case {
  background: #ffffff;
  border-radius: 21px;
  flex-shrink: 0;
  width: 100%;
  max-width: 350px;
  min-height: 280px;
  height: auto;
  position: relative;
  box-shadow: 0px 0px 100px 0px rgba(20, 30, 83, 0.05);
}

.case-description {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 85%;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 50%;
  transform: translateY(-50%);
}

.div17 {
  text-align: left;
  position: relative;
}

.use-case-title {
  color: #141e53;
  font-family: "NotoSansJp-Black", sans-serif;
  font-size: 18px;
  line-height: 30px;
  font-weight: 900;
}

.use-case-description {
  color: #000000;
  font-family: "NotoSansJp-Regular", sans-serif;
  font-size: 14px;
  line-height: 30px;
  letter-spacing: -0.01em;
}


/* ============================================================
   8. USE CASES — Visual Cards (VLM / SLM / Local Chat)
============================================================ */

.container {
 display: flex;
  flex-direction: row;
  gap: 31px;
  align-items: stretch; 
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  width: 90%;
  max-width: 1125px;
  height: auto;
  position: relative;
  margin: 0 auto;
}

.text-ai-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: auto;
}

.visual {
  background: #ffffff;
  border-radius: 21px;
  flex-shrink: 1;
  width: 350px;
  min-height: 500px;
  height: auto;
  position: relative;
  box-shadow: 0px 0px 100px 0px rgba(20, 30, 83, 0.05);
}

.container2 {
border-radius: 21px;
  width: calc(100% - 40px);
  height: auto;
  position: absolute;
  left: 20px;
  right: 20px;
  translate: none;
  top: 20px;
  aspect-ratio: 311/457;
}

.container-image {
  border-radius: 16.25px;
  height: 219.05px;
  position: absolute;
  right: 0.35px;
  left: 0.37548828125px;
  top: 0.97px;
  overflow: hidden;
}

.image-vlm {
  border-radius: 32.69px;
  border-style: solid;
  border-color: rgba(255, 170, 255, 0);
  border-width: 1.09px;
  width: 352.01px;
  height: 259.38px;
  position: absolute;
  left: calc(50% - 185.65px);
  top: 50%;
  translate: 0 -50%;
  object-fit: cover;
}

.image-slm2 {
  width: 422px;
  height: 328.03px;
  position: absolute;
  left: calc(50% - 224.5px);
  top: 50%;
  translate: 0 -50%;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
  object-fit: cover;
  aspect-ratio: 422/328.03;
}

.container-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  right: 0.34px;
  left: 0.37px;
  top: 236px;
  white-space: nowrap;
}

.title2 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 300px;
  height: 84px;
  position: relative;
}

.box-blue-title {
  display: flex;
  flex-direction: column;
  gap: 2.44px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 53.61px;
  position: relative;
}

.blue-title {
  background: #141e53;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 125px;
  width: auto;
  height: 26px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.box-title {
  color: #ffffff;
  text-align: center;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.vlm-qwen-2-vl {
  color: #141e53;
  text-align: left;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.slm-llm {
  color: #141e53;
  text-align: left;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.stt-tts {
  color: #141e53;
  text-align: left;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.title-text {
  color: #000000;
  text-align: left;
  font-family: "NotoSansJp-Regular", sans-serif;
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.line2 {
  margin-top: -1px;
  border-style: solid;
  border-color: rgba(20, 30, 83, 0.15);
  border-width: 1px 0 0 0;
  flex-shrink: 0;
  width: 292px;
  height: 0px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}

.box-use-description {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.use-case-title3 {
  color: #141e53;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
}

.use-case-title4 {
  color: #000000;
  font-family: "NotoSansJp-Regular", sans-serif;
  font-size: 12.635000228881836px;
  line-height: 30px;
  font-weight: 400;
}

.background3 {
  background: linear-gradient(
    270deg,
    rgba(255, 224, 235, 1) 0%,
    rgba(243, 116, 142, 1) 74.04088377952576%
  );
  border-radius: 32.69px;
  border-style: solid;
  border-color: #f2f2f2d6;
  border-width: 1.09px;
  width: 334.57px;
  height: 259.38px;
  position: absolute;
  left: -11.99px;
  top: -30.51px;
  box-shadow: 0px 4.36px 4.36px 0px rgba(0, 0, 0, 0.25);
}

.anyan-svg {
  width: 316.78px;
  height: 223.37px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: calc(50% - 99.23px);
  overflow: visible;
  aspect-ratio: 316.78/223.37;
}


/* ============================================================
   9. FEATURES SECTION
============================================================ */

.features {
  background: #ffffff;
  border-radius: 57px 57px 0px 0px;
  padding: 140px 5%;
  align-self: stretch;
  flex-shrink: 0;
  min-height: 900px;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  box-sizing: border-box;
}

.features-images {
  display: grid;
  grid-template-columns: repeat(4, 280px);
  gap: 24px;
  row-gap: 40px;
  justify-content: center;
  width: 90%;
  max-width: 1200px;
  height: auto;
  position: relative;
  margin: 0 auto;
}

.feature-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 270px;
  height: auto;
  position: relative;
}

.feature-box2 {
  flex-shrink: 0;
  width: 158.39px;
  height: 158.39px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.feature-text-box {
  color: #141e53;
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.feature-title {
  font-family: "NotoSansJp-Black", sans-serif;
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}

.feature-description {
  font-family: "NotoSansJp-Regular", sans-serif;
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
}

.feature-links {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.feature-link-btn {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-weight: 600;
  color: #ffffff;
  background: #ec3055;
  border-radius: 20px;
  text-decoration: none;
  text-align: center;
}

.feature-link-btn:hover {
  opacity: 0.8;
}

/* SVG icons inside feature-box2 */
.brain-svg {
  width: 108px;
  height: 95px;
  position: absolute;
  left: -0.1px;
  top: calc(50% - 50.19px);
  overflow: visible;
  aspect-ratio: 108/95;
}

.eye-svg {
  width: 87px;
  height: 85px;
  position: absolute;
  left: 0.42px;
  top: calc(50% - 44.19px);
  overflow: visible;
  aspect-ratio: 87/85;
}

.translate-svg {
  width: 101px;
  height: 84px;
  position: absolute;
  left: -0.06px;
  top: calc(50% - 43.23px);
  overflow: visible;
  aspect-ratio: 101/84;
}

.slm-svg {
  width: 119px;
  height: 73px;
  position: absolute;
  left: -0.42px;
  top: calc(50% - 38.19px);
  overflow: visible;
  aspect-ratio: 119/73;
}

.edge {
  width: 102px;
  height: 82px;
  position: absolute;
  left: 0.22px;
  top: calc(50% - 42.38px);
  overflow: visible;
  aspect-ratio: 102/82;
}

.cross-platform-svg {
  width: 143px;
  height: 140px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: calc(50% - 66.38px);
  overflow: visible;
}

.logo {
  width: 76.32%;
  height: 39.78%;
  position: absolute;
  right: 23.86%;
  left: -0.18%;
  bottom: 30.96%;
  top: 29.27%;
  overflow: visible;
  aspect-ratio: 120.88/63;
}

.image-translate {
  display: flex;
  flex-direction: column;
  gap: 10.56px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 223.37px;
  height: 285.1px;
  position: relative;
}

.image-translate2 {
  flex-shrink: 0;
  width: 158.39px;
  height: 158.39px;
  position: relative;
}


/* ============================================================
   10. AI COMBINATION SECTION
============================================================ */

.ai-combination {
  background: #ffffff;
  border-radius: 57px 57px 0px 0px;
  align-self: stretch;
  flex-shrink: 0;
  min-height: 1401px;
  height: auto;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.background4 {
  width: 3438px;
  height: 1763px;
  position: absolute;
  left: calc(50% - 1666px);
  top: 50%;
  translate: 0 -50%;
}

.background5 {
  width: 3438px;
  height: 1763px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: calc(50% - 780px);
  object-fit: cover;
  aspect-ratio: 2/1;
}

.wp-pic {
width: 280px;
  height: auto;
  position: absolute;
  left: calc(50% - 550px);
  top: 300px;
  transform-origin: 0 0;
  transform: rotate(22deg) scale(1, 1);
  object-fit: cover;
  aspect-ratio: 224.43/260;
}

.diagram-combination {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 1400px;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 105px;
  padding: 130px 5%;
  box-sizing: border-box;
}

/* Agent circle diagram */
.diagram-anyan {
  width: 100%;
  max-width: 1000px;
  height: auto;
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  overflow: visible;
}

.diagram-ai-agent {
  width: 600px;
  height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.circle {
  width: 343px;
  height: 343px;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  overflow: visible;
}

.arrow {
 width: 434px;
  height: 434px;
  position: absolute;
  left: 85px;
  top: 82px;
  opacity: 0.45;
  transform-origin: center center;
}

.icons {
  width: 460px;
  height: 460px;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

.ai-agent-diagram-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 133px;
  height: 106px;
}

/* LLM - top centre */
.ai-agent-diagram-container:nth-child(1) {
  top: -90px;
  left: 50%;
  translate: -50% 0;
}

/* AI Voice - left */
.ai-agent-diagram-container:nth-child(2) {
  top: 75%;
  left: -100px;
  translate: 0 -50%;
}

/* AI Speech - right */
.ai-agent-diagram-container:nth-child(3) {
  top: 75%;
  right: -100px;
  translate: 0 -50%;
}

.ai-agent-svg {
  flex-shrink: 0;
  width: 68.7px;
  height: 68.7px;
  position: relative;
  overflow: visible;
}

.diagram-text {
  color: #141e53;
  text-align: center;
  font-family: "Poppins-Medium", sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  position: relative;
}

.anyan {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

.anyan-svg2 {
  flex-shrink: 0;
  width: 195.35px;
  height: 177.11px;
  position: relative;
  overflow: visible;
}

.ai4 {
  color: #ec3055;
  text-align: center;
  font-family: "NotoSansJp-Black", sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 900;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Product link buttons — AI Voice / AI Speech */
.buttons-link {
  padding: 0px 0.8px;
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: auto;
  min-height: 240px;
  position: relative;
  width: 100%;
  min-width: 600px;
  box-sizing: border-box;
}

.ai-agent-box {
  border-radius: 0px 19px 19px 19px;
  flex-shrink: 0;
  width: 428.8px;
  height: 167.2px;
  position: relative;
  box-shadow: var(
    --shadow-box-shadow,
    0px 0px 134.17px 0px rgba(20, 30, 83, 0.05)
  );
  overflow: hidden;
  aspect-ratio: 428.8/167.2;
  cursor: pointer;
  transition: transform 300ms ease, filter 300ms ease;
}

.ai-agent-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  border-radius: inherit;
}
.ai-agent-box img {
  transition: transform 400ms ease;
}

.ai-agent-box:hover img {
  transform: scale(1.05);
}

.ai-agent-box:hover::after {
  background: rgba(255, 255, 255, 0.2);
}

.image-voice {
  border-radius: 0px 19.2px 19.2px 19.2px;
  width: 428.06px;
  height: 167.2px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  object-fit: cover;
  aspect-ratio: 428.06/167.2;
}

.image-speech {
  border-radius: 0px 19.2px 19.2px 19.2px;
  width: 428.06px;
  height: 167.2px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  object-fit: cover;
  aspect-ratio: 428.06/167.2;
}


/* ============================================================
   11. SUPPORT SECTION
============================================================ */

.support {
  background: #ffffff;
  border-radius: 57px 57px 0px 0px;
  padding: 140px 5%;
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 954px;
  height: auto;
  position: relative;
  box-sizing: border-box;
}

.buttons {
  display: flex;
  flex-direction: row;
  gap: 60px;
  row-gap: 60px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  width: 100%;
  max-width: 1370px;
  height: auto;
  position: relative;
}

.container4 {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 330px;
  min-height: 160px;
  position: relative;
}

.document-bt {
  flex-shrink: 0;
  width: 316px;
  height: 77px;
  position: relative;
}

.download-bt {
  flex-shrink: 0;
  width: 316px;
  height: 76px;
  position: relative;
}

.appli-bt {
  flex-shrink: 0;
  width: 316px;
  height: 76px;
  position: relative;
}

.sample-program-bt {
  flex-shrink: 0;
  width: 316px;
  height: 76px;
  position: relative;
}

.paper-bt {
  flex-shrink: 0;
  width: 316px;
  height: 76px;
  position: relative;
}

.support-slack-bt {
  flex-shrink: 0;
  width: 316px;
  height: 76px;
  position: relative;
}

.consultation-bt {
  flex-shrink: 0;
  width: 316px;
  height: 77px;
  position: relative;
}

.red-button {
  background: #ec3055;
  border-radius: 102.05px;
  border-style: solid;
  border-color: #ec3055;
  border-width: 2.05px;
  width: 316px;
  height: 76px;
  position: absolute;
  left: 0px;
  top: 0px;
  box-shadow: 0px 0px 25px 0px rgba(20, 30, 83, 0.05);
}

.document-bt:hover .red-button,
.download-bt:hover .red-button,
.appli-bt:hover .red-button {
  background: #f4748e;
}

.red-button {
  transition: background 300ms ease;
}

.sample-program-bt:hover .red-white-button,
.paper-bt:hover .red-white-button,
.support-slack-bt:hover .red-white-button,
.consultation-bt:hover .red-white-button {
  background: #f4748e;
}

.red-white-button {
  transition: background 300ms ease, border-color 300ms ease;
}

.red-white-button {
  background: #ffffff;
  border-radius: 102.05px;
  border-style: solid;
  border-color: #ec3055;
  border-width: 2.05px;
  width: 316px;
  height: 75px;
  position: absolute;
  left: 0px;
  top: 0.24px;
  box-shadow: 0px 0px 25px 0px rgba(20, 30, 83, 0.05);
}

.text-white-buttons {
  color: #ffffff;
  text-align: center;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.text-black-buttons {
  color: #000000;
  text-align: center;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.slack {
  color: #000000;
  text-align: center;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-description {
  color: #000000;
  text-align: center;
  font-family: "NotoSansJp-Regular", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  position: relative;
  height: auto;
}

.container6 {
  display: flex;
  flex-direction: column;
  gap: 5.1px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

.red-text-description {
  color: #ec3055;
  text-align: center;
  font-family: "NotoSansJp-Bold", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  position: relative;
  width: 318.48px;
  height: 47.53px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   12. RESPONSIVE — TABLET / iPAD (768px - 1024px)
============================================================ */



@media (min-width: 768px) and (max-width: 1024px) {

   .body {
    padding: 20px 0 0 0;
  }

  .features, .use-cases, .on-device-llm, .diagram-combination, .support {
    padding: 100px 5%;
    gap: 80px;
  }

  /* Hero stays side by side */
  .top-anyan-llama {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 30px 3%;
    align-items: center;
    justify-content: center;
  }

  .intro__text{
    width: 70%;
  }


  .top-text {
    align-items: flex-start;
    text-align: left;
    width: 50%;
    min-width: 0;
  }

  .llama-svg {
    width: 28%;
    max-width: 400px;
  }

  .llm {
    font-size: 20px;
    text-align: left;
    justify-content: left;
    width: 100%;
  }

  .ailia-llm-title {
    width: 70%;
    max-width: 400px;
    height: auto;
  }

  .ailia-llm {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 40px 24px;
  align-items: center;
}

.frame {
 display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: auto;
  gap: 20px;
}

.diagram-box {
  width: 210px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.diagram-blue-title {
  font-size: 22px;
  text-align: left;
  justify-content: flex-start;
}

.text3 {
  font-size: 13px;
  line-height: 22px;
}

.ailia-llm-svg2 {
  width: 80%;
  max-width: 220px;
}


.app {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 15px;
}

.gray-box {
  flex: 1;
  min-width: 0;
  height: 100px;
}

.text4 {
  font-size: 14px;
  white-space: nowrap;
}

.text4-sub {
  font-size: 10px;
  margin-top: 4px;
}

 .use-case-illustration  {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}
 .illustration-box {
flex: 1;
  min-width: 0;
  gap: 12px;
  margin: 0;
  align-items: center;
  justify-content: flex-start;
}

.illustration-box2 {
  width: 100%;
  max-width: 140px;
  height: auto;
  aspect-ratio: 187/122;
}

  .svg {
    width: 100%;
  height: 100%;
  object-fit: contain;
  }

  .illustration-text {
  white-space: normal;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  width: 100%;
}

  .red-rectangle {
    width: 70%;
    max-width: 400px;
    align-self: left;
  }

  .div3 {
    display: block;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .mobile-br {
    display: inline;
  }

  /* Use case cards stay horizontal on iPad */
  .use-description, .container {
    zoom: 0.7;
}

  /* Features — 3 columns on iPad */

  
  .features-images {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    zoom: 0.7;
  flex: 1;
  min-width: 0;
  gap: 5px;
  }

  .feature-text-box{
  zoom: 0.9;
  }

  .wp-pic {
  left: 1400px;
  top: 280px;
}
.buttons-link{
   zoom: 0.8;
}

.buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    zoom: 0.9;
  flex: 1;
  min-width: 0;
  gap: 10px;
  }


}


/* ============================================================
   13. RESPONSIVE — MOBILE (max-width: 767px)
============================================================ */

@media (max-width: 767px) {

  .body {
    padding: 40px 0%;
  }

  .features, .use-cases, .on-device-llm, .diagram-combination, .support {
    padding: 60px 5%;
    gap: 60px;
  }

  .ai-combination{
 min-height: 800px;
  height: auto;
  }

  /* --- Hero --- */
  .top-anyan-llama {
    flex-direction: column;
    gap: 30px;
    padding: 40px 5%;
    align-items: center;
  }

  .top-text {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .llama-svg {
    width: 70%;
    max-width: 400px;
  }

  .llm {
    font-size: 16px;
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  .ailia-llm-title {
    width: 90%;
    max-width: 300px;
    height: auto;
  }

  .red-rectangle {
    width: 90%;
    max-width: 300px;
    align-self: center;
  }

  .div3 {
    display: block;
    text-align: center;
    font-size: 13px;
    line-height: 26px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .mobile-br {
    display: inline;
  }

  /* --- On-Device LLM --- */
 
  .diagram {
    gap: 30px;
  }

  .ailia-llm {
    flex-direction: column;
    gap: 30px;
    padding: 50px 10px;
  }

  .frame {
    width: 100%;
    min-width: 0;
    gap: 20px;
  }

  .diagram-box {
    width: 100%;
    align-items: center;
    gap: 8px;
  }

  .diagram-blue-title {
    font-size: 20px;
    text-align: center;
    justify-content: center;
  }

  .line {
    width: 20%;
  }

  .text3 {
    font-size: 12px;
    line-height: 20px;
  }

  .ailia-llm-svg2 {
    width: 60%;
    max-width: 200px;
  }

  .app {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .text,
  .container-text {
    top: 275px;
   zoom: 0.9;
  flex: 1;
  min-width: 0;
}



.buttons-link {
   zoom: 0.8;
  flex: 1;
  min-width: 0;
}

  .gray-box {
    height: 100px;
    min-width: 120px;
  }

  .text4 {
    font-size: 12px;
  }

  .text4-sub {
    font-size: 9px;
    margin-top: 3px;
  }

  .use-case-line {
    width: 100%;
  }

  .gray-line {
    flex: 0 0 60px;
  }

  .gray-line-vertical {
    width: 100px;
    top: calc(50% - -260px);
  }

  .text5 {
    font-size: 18px;
  }

  .use-case-illustration {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    justify-content: center;
  }

  .illustration-box {
    min-width: 0;
    width: 120px;
    gap: 8px;
    margin: 0 auto;
  }

  .illustration-box2 {
    width: 110px;
    height: 110px;
  }

  .svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .illustration-text {
    font-size: 12px;
    white-space: nowrap;
  }

  /* --- Shared Title --- */
  .title {
    gap: 8px;
  }

  .title-section {
    font-size: 18px;
    word-break: keep-all;
  }

  .red-line {
    font-size: 18px;
  }

  .description {
    font-size: 14px;
    line-height: 26px;
    word-break: keep-all;
  }

  /* --- Use Cases --- */
 
  .text {
    margin: 0 auto 30px auto;
    gap: 8px;
  }

  .text7 {
    font-size: 18px;
    line-height: 28px;
  }

  .llm-ai {
    font-size: 14px;
    line-height: 24px;
  }

  .use-case-box {
    width: 100%;
    max-width: 349px;
  }

  .case {
    width: 100%;
    max-width: 349px;
  }

  /* --- Features --- */
  .features-images {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-box, .features {
  min-height: auto;
}

  /* --- AI Combination --- */

.diagram-ai-agent {
  width: 300px;
  height: 300px;
}

.circle {
  width: 190px;
  height: 190px;
}

.arrow {
  width: 300px;
  height: 300px;
  margin-left: -83px;
  margin-top: -83px;
  translate: none;
}

.icons {
  width: 230px;
  height: 230px;
}

.ai-agent-diagram-container{
  gap: 5px;
}

.ai-agent-diagram-container:nth-child(1) {
  top: -75px;
}

.ai-agent-diagram-container:nth-child(2) {
  left: -95px;
}

.ai-agent-diagram-container:nth-child(3) {
  right: -95px;
}

.ai-agent-svg {
  width: 34px;
  height: 34px;
}

.diagram-text {
  font-size: 12px;
  line-height: 16px;
}

.anyan-svg2 {
  width: 120px;
  height: auto;
}

.ai4 {
  font-size: 12px;
}

.buttons {
  gap: 30px;
  }
}


/* ============================================================
   14. RESPONSIVE — SMALL MOBILE (max-width: 480px)
============================================================ */

@media (max-width: 480px) {

  .features-images {
    grid-template-columns: 1fr;
  }

  .feature-box {
    align-items: center;
    width: 100%;
  }

  .feature-text-box {
    text-align: center;
    justify-content: center;
  }

  .feature-title,
  .feature-description {
    text-align: center;
  }

  .feature-box2 {
    justify-content: center;
    margin: 0 auto;
  }

}

/* ============================================================
   Safari — Font rendering fix
============================================================ */

@supports (-webkit-hyphens: none) {
  .title-section,.text7, .usecase-title, .use-case-title {
    font-weight: 600;
  }

  .red-line {
    font-weight: 600;
  }

  .diagram-blue-title, .feature-title {
    font-family: "NotoSans-Bold", sans-serif;
    font-weight: 600;
  }

  .intro__title,
  .text4,
  .text5,
  .illustration-text,
  .llm, .box-title, .div3 {
    font-weight: 500;
  }
}

    /* FOOTER */