@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Design Tokens ── */
:root {
  --yellow: #ffb200;
  --dark-blue: #092f3d;
  --white: #ffffff;
  --gray: #f1f5f6;

  --font: 'Plus Jakarta Sans', sans-serif;

  --fs-link: 14px;
  --fs-body: 16px;
  --fs-h4: 24px;
  --fs-h3: 32px;
  --fs-h2: 48px;
  --fs-h1: 64px;

  --lh-link: 1.5;
  --lh-body: 1.5;
  --lh-h4: 1.2;
  --lh-h3: 1.2;
  --lh-h2: 1.1;
  --lh-h1: 1.1;

  --ls-link: -0.14px;
  --ls-h2: -1px;
  --ls-h1: -2px;

  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-section: 32px;
  --radius-hero: 40px;
  --radius-large: 80px;

  --content-max: 1080px;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--dark-blue);
  background: var(--white);
}

/* ── Typography ── */
.text-link {
  font-size: var(--fs-link);
  font-weight: 600;
  line-height: var(--lh-link);
  letter-spacing: var(--ls-link);
}

.text-body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

.text-h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
}

.text-h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
}

.text-h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.text-h1 {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.text-muted { opacity: 0.8; }
.text-muted-60 { opacity: 0.6; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-yellow { color: var(--yellow); }
.text-white { color: var(--white); }
.text-dark { color: var(--dark-blue); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-link);
  font-weight: 600;
  line-height: var(--lh-link);
  letter-spacing: var(--ls-link);
  white-space: nowrap;
  width: fit-content;
  transition: opacity 0.2s;
}
.btn:hover { opacity: 0.85; }

.btn-primary {
  background: var(--yellow);
  color: var(--dark-blue);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}

/* ── Tag ── */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: var(--radius-btn);
  background: var(--gray);
  font-size: var(--fs-link);
  font-weight: 600;
  line-height: var(--lh-link);
  letter-spacing: var(--ls-link);
  color: var(--dark-blue);
  width: fit-content;
}

/* ── Icon Container ── */
.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  overflow: hidden;
  flex-shrink: 0;
}
.icon-container--sm { width: 24px; height: 24px; }
.icon-container--md { width: 32px; height: 32px; }
.icon-container--lg { width: 48px; height: 48px; }
.icon-container--yellow { background: var(--yellow); }
.icon-container--dark { background: var(--dark-blue); }

.icon-container img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.icon-container i {
  line-height: 1;
}

.icon-container--sm i { font-size: 14px; }
.icon-container--md i { font-size: 19px; }
.icon-container--lg i { font-size: 28px; }

/* ── Accordion ── */
.accordion-item {
  width: 100%;
  cursor: pointer;
  transition: background 0.25s, padding 0.25s;
}

.accordion-item.is-open {
  background: var(--gray);
  border-radius: var(--radius-card);
  padding: 24px;
}

.accordion-item:not(.is-open) {
  padding: 12px 24px;
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.accordion-header .icon-container {
  transition: background 0.25s;
}

.accordion-item.is-open .accordion-header .icon-container {
  background: var(--dark-blue);
  color: var(--white);
}

.accordion-item:not(.is-open) .accordion-header .icon-container {
  background: var(--yellow);
  color: var(--dark-blue);
}

.accordion-title {
  flex: 1;
  min-width: 0;
}

.accordion-body {
  display: none;
  margin-top: 16px;
}

.accordion-item.is-open .accordion-body {
  display: block;
}

.accordion-icon-minus,
.accordion-icon-plus {
  display: none;
}

.accordion-item.is-open .accordion-icon-minus { display: inline-flex; }
.accordion-item.is-open .accordion-icon-plus { display: none; }
.accordion-item:not(.is-open) .accordion-icon-minus { display: none; }
.accordion-item:not(.is-open) .accordion-icon-plus { display: inline-flex; }

/* ── Navigation ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 60px;
  background: var(--gray);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
}

.nav-logo {
  width: 83.5px;
  height: 28.25px;
  flex-shrink: 0;
}

.nav-link {
  font-size: var(--fs-link);
  font-weight: 600;
  line-height: var(--lh-link);
  letter-spacing: var(--ls-link);
  white-space: nowrap;
  color: var(--dark-blue);
  transition: opacity 0.2s;
}
.nav-link:hover { opacity: 0.7; }

.nav-hamburger {
  display: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ── Mobile Menu ── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--dark-blue);
  flex-direction: column;
  align-items: flex-end;
  padding: 74px 24px 16px;
  gap: 24px;
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-menu-close {
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--white);
}

.mobile-menu-link {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--white);
  text-align: right;
  width: 100%;
}

/* ── Hero ── */
.hero-section {
  position: relative;
  z-index: 4;
  background: var(--gray);
  padding: 0 16px;
}

.hero-image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  height: 720px;
  border-radius: var(--radius-hero);
  overflow: hidden;
}

.hero-image__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-hero);
}

.hero-image__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-hero);
}

.hero-image__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-hero);
  background: linear-gradient(88deg, rgba(0,0,0,0.5) 24%, rgba(0,0,0,0) 66%);
}

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 480px;
}

.hero-headline span {
  display: block;
}

.hero-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── What is Alyas ── */
.what-section {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  min-height: 600px;
  border-radius: 0 0 var(--radius-large) var(--radius-large);
  background: var(--gray);
}

.what-section__inner {
  max-width: var(--content-max);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Body Section wrapper ── */
.body-section {
  position: relative;
  z-index: 2;
}

.body-inner {
  padding: 60px 0;
}

/* ── Problem Section ── */
.problem-section {
  padding: 60px;
}

.problem-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
}

.problem-header {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.problem-cards {
  display: flex;
  gap: 24px;
  width: 100%;
}

.problem-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--gray);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.problem-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Solution Section ── */
.solution-section {
  padding: 60px;
}

.solution-card {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  border-radius: var(--radius-section);
  overflow: hidden;
}

.solution-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.solution-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-card__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0));
}

.solution-content {
  position: relative;
  max-width: 768px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

/* ── Functionality Section ── */
.functionality-section {
  padding: 60px;
}

.functionality-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.functionality-header {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.functionality-features {
  display: flex;
  gap: 48px;
  align-items: center;
}

.functionality-accordion {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.functionality-image-wrap {
  flex: 1;
  position: relative;
  aspect-ratio: 540/440;
  border-radius: 20px;
  overflow: hidden;
}

.functionality-image-wrap__bg {
  position: absolute;
  inset: 0;
  background: var(--yellow);
}

.functionality-image-wrap__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 443px;
  height: 120px;
  background: var(--white);
  border: 2px solid var(--gray);
  border-radius: 20px;
  display: flex;
  gap: 32px;
  padding: 12px 12px 12px 16px;
  overflow: hidden;
}

.testimonial-card__text {
  flex: 1;
  min-width: 0;
}

.testimonial-card__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  border-radius: 8px;
  font-size: 20px;
  color: var(--dark-blue);
}

/* ── Process Section ── */
.process-section {
  position: relative;
  border-radius: var(--radius-large);
  background: var(--gray);
  padding: 100px 60px 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.process-header {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.process-header__titles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.process-steps {
  max-width: var(--content-max);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.process-step {
  display: flex;
  gap: 48px;
}

.process-step__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 60px;
}

.process-step__spacer {
  flex: 1;
}

.process-step__timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.process-step__line {
  flex: 1;
  width: 2px;
  min-height: 0;
  overflow: hidden;
}

.process-step__line img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zigzag: odd = left content, even = right content */
.process-step:nth-child(odd) {
  flex-direction: row;
}
.process-step:nth-child(odd) .process-step__content { order: 1; }
.process-step:nth-child(odd) .process-step__timeline { order: 2; }
.process-step:nth-child(odd) .process-step__spacer { order: 3; }

.process-step:nth-child(even) {
  flex-direction: row;
}
.process-step:nth-child(even) .process-step__spacer { order: 1; }
.process-step:nth-child(even) .process-step__timeline { order: 2; }
.process-step:nth-child(even) .process-step__content { order: 3; }

.process-step:last-child .process-step__line { display: none; }

/* ── Callout Section ── */
.callout-section {
  padding: 60px;
}

.callout-card {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 48px;
  padding: 60px;
  border-radius: var(--radius-section);
  overflow: hidden;
}

.callout-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.callout-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.callout-card__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.5), 50%, rgba(0,0,0,0));
}

.callout-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.callout-accordion-wrap {
  position: relative;
  flex: 1;
  background: var(--white);
  border-radius: 24px;
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.callout-accordion-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Methodology Section ── */
.methodology-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 60px;
}

.methodology-inner {
  max-width: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.methodology-desc {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  padding: 0 60px;
}

/* ── Workshop Section ── */
.workshop-section {
  padding: 0 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.workshop-card {
  position: relative;
  max-width: var(--content-max);
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  border-radius: var(--radius-section);
  overflow: hidden;
}

.workshop-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.workshop-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workshop-card__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
}

.workshop-content {
  position: relative;
  max-width: 768px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.workshop-footnote {
  max-width: var(--content-max);
  width: 100%;
  text-align: center;
}

/* ── Contact / Footer ── */
.contact-section {
  position: relative;
  z-index: 1;
}

.contact-inner {
  position: relative;
  background: var(--dark-blue);
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  padding: 60px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  justify-content: center;
  min-height: 519px;
  overflow: hidden;
}

.contact-vector {
  position: absolute;
  width: 670px;
  height: 894px;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 319px), calc(-50% + 0.5px));
  pointer-events: none;
}

.contact-wrapper {
  position: relative;
  max-width: var(--content-max);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.contact-content {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.footer {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.footer-logo {
  width: 83.5px;
  height: 28.25px;
  flex-shrink: 0;
}

.footer-copyright {
  flex: 1;
}

/* ────────────────────────────────
   RESPONSIVE — Mobile (< 768px)
   ──────────────────────────────── */
@media (max-width: 768px) {
  /* Nav */
  .navbar {
    padding: 64px 24px 16px;
    gap: 16px;
  }
  .nav-links {
    gap: 0;
  }
  .nav-link { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero */
  .hero-image {
    height: auto;
    padding: 60px 32px;
  }
  .hero-image__bg::after {
    background: rgba(0,0,0,0.5);
  }
  .hero-content .text-h1 {
    font-size: var(--fs-h2);
    letter-spacing: var(--ls-h2);
  }

  /* What */
  .what-section {
    padding: 60px 32px;
    min-height: auto;
    border-radius: 0 0 var(--radius-hero) var(--radius-hero);
  }
  .what-section .text-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0;
  }

  /* Problem */
  .problem-section { padding: 60px 16px; }
  .problem-header .text-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0;
  }
  .problem-cards {
    flex-direction: column;
  }

  /* Solution */
  .solution-section { padding: 60px 16px; }
  .solution-card {
    height: auto;
    padding: 60px 32px;
  }
  .solution-card__bg::after {
    background: rgba(0,0,0,0.5);
  }
  .solution-content .text-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0;
  }

  /* Functionality */
  .functionality-section { padding: 60px 16px; }
  .functionality-features {
    flex-direction: column;
    gap: 48px;
  }
  .functionality-image-wrap {
    aspect-ratio: 1;
    width: 100%;
  }
  .testimonial-card {
    width: 310px;
    height: 158px;
    top: auto;
    bottom: 24px;
    transform: translateX(-50%);
  }
  .functionality-header .text-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0;
  }

  /* Process */
  .process-section {
    border-radius: var(--radius-hero);
    padding: 100px 16px 60px;
  }
  .process-header .text-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0;
  }
  .process-step,
  .process-step:nth-child(odd),
  .process-step:nth-child(even) {
    flex-direction: row;
  }
  .process-step__spacer,
  .process-step:nth-child(odd) .process-step__spacer,
  .process-step:nth-child(even) .process-step__spacer {
    display: none;
  }
  .process-step:nth-child(odd) .process-step__timeline,
  .process-step:nth-child(even) .process-step__timeline { order: 1; }
  .process-step:nth-child(odd) .process-step__content,
  .process-step:nth-child(even) .process-step__content { order: 2; }
  .process-step { gap: 24px; }

  /* Callout */
  .callout-section { padding: 60px 16px; }
  .callout-card {
    height: auto;
    flex-direction: column;
    padding: 60px 32px;
    gap: 48px;
  }
  .callout-card__bg::after {
    background: rgba(0,0,0,0.5);
  }
  .callout-content .text-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0;
  }

  /* Methodology */
  .methodology-section { padding: 100px 16px; }
  .methodology-desc { padding: 0 60px; }
  .methodology-inner .text-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0;
  }

  /* Workshop */
  .workshop-section { padding: 0 16px; }
  .workshop-card {
    height: auto;
    padding: 60px 32px;
  }
  .workshop-card__bg::after {
    background: rgba(0,0,0,0.5);
  }
  .workshop-content .text-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0;
  }

  /* Contact */
  .contact-inner {
    border-radius: var(--radius-hero) var(--radius-hero) 0 0;
    padding: 60px 16px;
    min-height: auto;
  }
  .contact-vector {
    width: 279px;
    height: 371px;
    transform: translate(calc(-50% + 117.5px), calc(-50% + 134px));
  }
  .contact-content .text-h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0;
  }
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}