/* ===========================
   XGSLab Home (based on NEPLAN)
   =========================== */

:root {
  --primary: #192231;
  --primary-2: #7cf7e2;
  --primary-hover: #0ea5e9;
  --primary-active: #0284c7;

  --accent: #7c3aed;
  --accent-soft: #efeafd;
  --text: #0e1b2b;
  --muted: #5b6472;
  --ring: rgba(124, 58, 237, .25);
  --shadow: rgba(2, 8, 23, .12);

  --panel: #ffffff;
  --panel-soft: #f6f8fb;
  --rule: rgba(14, 27, 43, .10);
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #f3f5f8;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Reserve space for header */
  padding-top: 5.5rem;
}

/* ===========================
   HERO
   =========================== */
.section-neplan-home {
  padding: clamp(16px, 3.5vw, 28px) 16px;
}

.hero-card-neplan-home {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  min-height: clamp(360px, 52vw, 520px);
  border-radius: clamp(24px, 3vw, 44px);
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(2, 8, 23, .22);
  background: #000;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: 72% 50%;
}

/* readability gradients */
.hero-card-neplan-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 22% 14%, rgba(91, 157, 255, .14), transparent 60%),
    radial-gradient(760px 360px at 86% 18%, rgba(124, 247, 226, .12), transparent 65%),
    linear-gradient(90deg,
      rgba(0, 0, 0, .88) 0%,
      rgba(0, 0, 0, .64) 36%,
      rgba(0, 0, 0, .28) 58%,
      rgba(0, 0, 0, .08) 70%,
      rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
}

.hero-card-neplan-home::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* z-index guard so following sections never hide behind hero */
.section-neplan-home .hero-card-neplan-home { position: relative; z-index: 1; }
.section-neplan-description,
.section-neplan-cta-buttons,
.section-key-areas,
.section-neplan-cards,
.section-neplan-last-part { position: relative; z-index: 2; }

.inner-neplan-home {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 1.05fr .65fr;
  gap: clamp(16px, 3.5vw, 48px);
  align-items: center;
  padding: clamp(18px, 4vw, 48px);
}

.content-neplan-home { color: #fff; }

.title-neplan-home {
  margin: 0 0 clamp(10px, 2.5vw, 36px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: .2px;
  font-size: clamp(2rem, 5.8vw, 6rem);
}

.title-neplan-home2 {
  margin: 0 0 clamp(10px, 2.5vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .2px;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
}

.subtitle-neplan-home {
  margin: 0 0 clamp(24px, 3.2vw, 36px);
  max-width: 60ch;
  font-size: clamp(.96rem, 1.25vw, 1.08rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
}

/* hero CTAs */
.cta-row-neplan-home {
  display: flex; flex-wrap: wrap; gap: 12px;
}

.btn-neplan-home {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .9rem 1.25rem; border-radius: 999px;
  text-decoration: none; font-weight: 700; color: #fff;
  border: 2px solid transparent;
  background: linear-gradient(80deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 24px rgba(2, 8, 23, .35);
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.btn-neplan-home:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(14, 165, 233, .45);
}
.btn-neplan-home:active { background: var(--primary-active); border-color: var(--primary-active); transform: none; }
.btn-neplan-home .arrow { font-size: 1.05em; line-height: 1; }

/* right-side image */
.device-neplan-home {
  align-self: end; 
  justify-self: center;
  width: clamp(280px, 34vw, 500px);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .45));
}
.device-neplan-home img:first-child {
  width: 180px;
  margin-left: 160px;         /* make logo smaller */
  height: auto;
  margin-bottom: 30px;  /* small spacing between logo and next image */
  object-fit: contain;
  display: block;
}

.device-neplan-home img:last-child {
  width: 450px;         /* keep main image larger */
  height: auto;
  object-fit: contain;
  display: block;
}


/* responsive hero */
@media (max-width: 900px) {
  .inner-neplan-home { grid-template-columns: 1fr; align-items: start; }
  .device-neplan-home { display: none; }
  .hero-card-neplan-home { background-position: 60% 50%; }
}

/* ===========================
   Key Areas (headline)
   =========================== */
.section-key-areas {
  background: #fff;
  padding: clamp(28px, 1vw, 72px) 16px 0;
  color: var(--text);
}
.container-key-areas {
  max-width: 1100px; 
  margin: 0 auto; 
  text-align: left; 
  position: relative;
  animation: keyFadeUp .6s ease both;
}
.eyebrow-key-areas {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 .5rem; font-size: clamp(.82rem, .95vw, .95rem);
  font-weight: 800; letter-spacing: .3px; color: #0e1b2b; opacity: .8;
}
.eyebrow-key-areas::before {
  content: ""; width: 28px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}
.heading-key-areas {
  margin: 0; line-height: 1.15; letter-spacing: .2px; font-weight: 800;
  font-size: clamp(1.6rem, 6vw, 3rem); color: #0e1b2b;
}
.brand-key-areas {
  background: linear-gradient(90deg, red, rgb(136, 1, 1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes keyFadeUp { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

/* ===========================
   Description / Table
   =========================== */
.section-neplan-description {
  background: #fff; color: var(--text);
  padding: clamp(28px, 1vw, 72px) 16px;
  margin-top: 50px;
}
.container-neplan-description { max-width: 1100px; margin: 0 auto; }
.head-neplan-description h3 {
  margin: 0 0 .45rem; font-weight: 900; letter-spacing: .2px;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: #0e1b2b; text-align: center;
}
.head-neplan-description p {
  margin: 0 0 1.2rem; text-align: center; max-width: 100ch; opacity: .9;
  line-height: 1.65; font-size: clamp(.98rem, 1.2vw, 1.05rem);
}
.subhead-neplan-description {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%;
  margin: 0.6rem auto .6rem; 
  font-size: clamp(1.1rem, 1.4vw, 1.2rem); 
  font-weight: 900; 
  text-align: center;
  margin-top: 100px;
}

.tablewrap-neplan-description {
  position: relative; 
  border-radius: 16px; 
  box-shadow: 0 20px 40px rgba(2,8,23,.10);
  border: 1px solid var(--rule); 
  overflow: hidden;
}
.tablewrap-neplan-description::before {
  content: ""; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 0; 
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2)); z-index: 1;
}

.table-neplan-description { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; color: #0e1b2b; }
.table-neplan-description thead th {
  text-align: left; padding: .9rem 1rem;
  background: linear-gradient(180deg, #f7f9fc, #f1f5fb); border-bottom: 1px solid var(--rule);
  font-weight: 800; letter-spacing: .2px; position: relative;
}
.table-neplan-description tbody th,
.table-neplan-description tbody td {
  padding: 1rem; vertical-align: top; border-bottom: 1px solid var(--rule);
}
.table-neplan-description tbody th[scope="row"] { width: 32%; font-weight: 900; text-align: left; }

/* row hover */
.table-neplan-description tbody tr:hover {
  background: linear-gradient(0deg, rgba(91,157,255,.06), rgba(124,247,226,.06));
}

/* scroll-in animation */
.row-neplan-description { opacity: 0; transform: translateX(-26px); transition: opacity .6s ease, transform .6s ease; }
.row-neplan-description.in-view-neplan-description { opacity: 1; transform: translateX(0); }
.row-neplan-description:nth-child(2){ transition-delay: .05s; }
.row-neplan-description:nth-child(3){ transition-delay: .10s; }
.row-neplan-description:nth-child(4){ transition-delay: .15s; }
.row-neplan-description:nth-child(5){ transition-delay: .20s; }

/* stacked table on mobile */
@media (max-width: 720px) {
  .table-neplan-description thead {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
  }
  .table-neplan-description tbody tr { display: block; border-bottom: 1px solid var(--rule); }
  .table-neplan-description tbody th[scope="row"],
  .table-neplan-description tbody td { display: block; width: 100%; border-bottom: none; padding: .85rem 1rem; }
  .table-neplan-description tbody th[scope="row"] {
    font-size: 1.05rem; background: linear-gradient(90deg, rgba(91,157,255,.08), rgba(124,247,226,.08));
    border-bottom: 1px dashed var(--rule); border-top-left-radius: 12px; border-top-right-radius: 12px;
  }
  .table-neplan-description tbody td { position: relative; padding-top: .6rem; }
  .table-neplan-description tbody td::before {
    content: attr(data-label); display: block; font-weight: 800; opacity: .75; margin-bottom: .25rem;
  }
}

/* ===========================
   CTA / Highlights
   =========================== */
:root {
  --primary: #0f766e; /* teal-700 */
  --primary-2: #155e75; /* cyan-800 */
  --primary-hover: #0e7490;
  --primary-active: #134e4a;
}

.section-neplan-cta-buttons {
  background: #fff; color: var(--text);
  padding: clamp(28px, 6vw, 72px) 16px;
}
.container-neplan-cta-buttons {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(18px, 4vw, 40px); align-items: center;
}
.eyebrow-neplan-cta-buttons {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
  font-size: .9rem; font-weight: 800; opacity: .85;
}
.eyebrow-neplan-cta-buttons::before {
  content: ""; width: 28px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}
.title-neplan-cta-buttons {
  margin: 0 0 .5rem; font-weight: 800; letter-spacing: .2px; line-height: 1.15;
  font-size: clamp(1.4rem, 4.6vw, 2.2rem);
}
.highlights-neplan-cta-buttons { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .65rem; }
.highlights-neplan-cta-buttons li {
  position: relative; padding-left: 30px; line-height: 1.6;
}
.highlights-neplan-cta-buttons li::before {
  content: "✔"; position: absolute; left: 0; top: .05rem; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 0 0 3px #fff inset, 0 2px 8px rgba(16, 24, 39, .12);
}

.actions-neplan-cta-buttons {
  display: grid; gap: clamp(10px, 1.8vw, 14px); align-content: start;
}
.btn-neplan-cta-buttons {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.25rem; border-radius: 999px; text-decoration: none; font-weight: 700; color: #fff;
  border: 2px solid transparent; background: linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 24px rgba(2, 8, 23, .25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn-neplan-cta-buttons:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(14, 165, 233, .35); }
.btn-neplan-cta-buttons:active { background: var(--primary-active); border-color: var(--primary-active); transform: translateY(0); }
.btn-neplan-cta-buttons:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px rgba(14,165,233,.6), 0 0 0 6px rgba(91,157,255,.25); }

@keyframes ctaFadeUp-neplan { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none;} }
.intro-neplan-cta-buttons, .actions-neplan-cta-buttons { animation: ctaFadeUp-neplan .6s ease both; }
.actions-neplan-cta-buttons { animation-delay: .08s; }

@media (max-width: 860px) {
  .container-neplan-cta-buttons { grid-template-columns: 1fr; text-align: center; }
  .highlights-neplan-cta-buttons li { padding-left: 26px; text-align: left; }
  .actions-neplan-cta-buttons { justify-items: center; }
  .btn-neplan-cta-buttons { width: min(520px, 100%); }
}

/* ===========================
   Feature Cards
   =========================== */
.section-neplan-cards { padding: clamp(24px, 5vw, 56px) 16px; background: #fff; }
.container-neplan-cards { max-width: 1200px; margin: 0 auto; }
.grid-neplan-cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}
@media (max-width: 700px) {
  .grid-neplan-cards { grid-template-columns: 1fr; }
}
.card-neplan-cards {
  background: #fff; border: 1px solid rgba(14, 27, 43, .08); border-radius: 20px;
  padding: clamp(16px, 2.4vw, 22px); box-shadow: 0 10px 26px var(--shadow);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease, opacity .6s ease;
  position: relative; overflow: hidden; isolation: isolate;
  opacity: 0; transform: translateX(-28px);
}
.card-neplan-cards::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px;
  background: linear-gradient(90deg, var(--accent), #7cf7e2); opacity: .9;
}
.card-neplan-cards:hover { transform: translateY(-6px); border-color: var(--ring); box-shadow: 0 18px 40px rgba(2, 8, 23, .18); }
.iconwrap-neplan-cards {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(124,58,237,.18); margin-bottom: 10px;
}
.title-neplan-cards { font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 800; color: var(--text); margin: 6px 0 8px; }
.desc-neplan-cards { color: var(--muted); line-height: 1.6; margin: 0 0 12px; font-size: .98rem; }
.list-neplan-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-neplan-cards li { color: var(--text); font-size: .98rem; position: relative; padding-left: 28px; }
.list-neplan-cards li::before {
  content: "✔"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; line-height: 1; background: #0f172a; color: #fff;
}

/* Reveal cards on view */
.card-neplan-cards.in-view-neplan-cards { opacity: 1; transform: translateX(0); }
.card-neplan-cards:nth-child(1){ transition-delay: .05s; }
.card-neplan-cards:nth-child(2){ transition-delay: .10s; }
.card-neplan-cards:nth-child(3){ transition-delay: .15s; }
.card-neplan-cards:nth-child(4){ transition-delay: .20s; }

/* ===========================
   Last Panel / How it works
   =========================== */
.section-neplan-last-part { background: #fff; color: var(--text); padding: clamp(28px, 3vw, 72px) 16px; }
.container-neplan-last-part { max-width: 1100px; margin: 0 auto; }
.panel-neplan-last-part {
  background: var(--panel); border: 0 solid var(--rule); border-radius: 16px;
  box-shadow: 0 20px 40px rgba(2, 8, 23, .10); padding: clamp(16px, 3vw, 22px);
  position: relative; overflow: hidden;
}
.panel-neplan-last-part::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}
.title-neplan-last-part { margin: 0 0 .75rem; font-weight: 900; font-size: clamp(1.15rem, 2vw, 1.35rem); }

.steps-neplan-last-part { list-style: none; margin: 0; padding: 6px 0 0; position: relative; }
.steps-neplan-last-part::before {
  content: ""; position: absolute; left: 18px; top: 12px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, rgba(15,118,110,.22), rgba(21,94,117,.22));
}
.step-neplan-last-part {
  display: grid; grid-template-columns: 40px 1fr; align-items: start; gap: 12px; padding: 8px 0;
  opacity: 0; transform: translateY(10px); animation: rise-last-part .6s ease forwards;
}
.step-neplan-last-part:nth-child(1){ animation-delay: .04s; }
.step-neplan-last-part:nth-child(2){ animation-delay: .10s; }
.step-neplan-last-part:nth-child(3){ animation-delay: .16s; }
.step-neplan-last-part:nth-child(4){ animation-delay: .22s; }

@keyframes rise-last-part { to { opacity: 1; transform: none; } }

.num-neplan-last-part {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 6px 14px rgba(2, 8, 23, .18);
}
.body-neplan-last-part { line-height: 1.65; color: var(--text); }
.label-neplan-last-part { font-weight: 900; }

.actions-neplan-last-part {
  align-items: center; text-align: center; justify-items: center;
  margin-top: clamp(16px, 3.5vw, 26px); padding-top: clamp(10px, 2vw, 14px);
  border-top: 1px dashed var(--rule); display: grid; gap: clamp(12px, 2vw, 16px);
}
.group-neplan-last-part { display: grid; gap: 8px; }
.btn-row-neplan-last-part { display: flex; flex-wrap: wrap; gap: 12px; }

.btn-neplan-last-part {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.15rem; border-radius: 999px; font-weight: 800; color: #fff; text-decoration: none;
  border: 2px solid transparent; background: linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 24px rgba(2, 8, 23, .18);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn-neplan-last-part:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-2px); }
.btn-neplan-last-part:active { background: var(--primary-active); border-color: var(--primary-active); transform: none; }

.btn-ghost-neplan-last-part {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .78rem 1.05rem; border-radius: 999px; font-weight: 800; color: #0f3f46; text-decoration: none;
  border: 2px solid rgba(15, 118, 110, .35);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(246,248,251,.85));
  box-shadow: 0 4px 14px rgba(2, 8, 23, .10);
  transition: transform .25s ease, border-color .25s ease, filter .25s ease;
}
.btn-ghost-neplan-last-part:hover { transform: translateY(-2px); border-color: var(--primary); filter: brightness(1.02); }
@media (max-width: 640px) {
  .btn-row-neplan-last-part a { flex: 1 1 100%; text-align: center; }
}

/* ===========================
   Reveal on Scroll (generic)
   =========================== */
.reveal-mobility {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: transform, opacity;
}
.reveal-mobility[data-reveal="left"]  { transform: translateX(32px); }
.reveal-mobility[data-reveal="right"] { transform: translateX(-32px); }
.reveal-mobility.is-visible-mobility  { opacity: 1; transform: none; }