/* ============================================================
   Dell Windows Server 2025 — Landing Page
   Desktop ≥ 1025px · Tablet 641–1024px · Mobile ≤ 640px
   ============================================================ */

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; }
a   { text-decoration: none; }

/* --- Page container ----------------------------------------- */
.page {
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Roboto', Arial, sans-serif;
}

/* ============================================================
   SECTION 1 · be_ready_for
   Photo + nav are overlay elements (position:absolute intentional).
   Text box is in normal flow, pushed down by margin-top.
   ============================================================ */

.s1 {
  position: relative;
  width: 100%;
  min-height: 695px;
  overflow: hidden;
}

.s1__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 8%;
}

.s1__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 39px 5% 0 6%;
  z-index: 10;
}

.s1__nav-dell img { height: 37px; width: auto; }
.s1__nav-ms  img { height: 44px; width: auto; }

.s1__box {
  position: relative;
  z-index: 1;
  margin-top: 198px;
  max-width: 552px;
  width: 46%;
  background: rgba(190, 175, 255, 0.80);
  padding: 32px 55px 40px 69px;
}

.s1__headline {
  font-size: 64px;
  font-weight: 300;
  line-height: 1.20;
  color: #2A145A;
}

.s1__rule {
  width: 38px;
  height: 9px;
  background: #DEDDFF;
  margin: 15px 0 18px;
}

.s1__body {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.35;
  color: #2A145A;
}

.s1__body strong { font-weight: 500; }

/* ============================================================
   SECTION 2 · accelerate
   Venn image is a decorative overlay (position:absolute intentional).
   Text column is in normal flow.
   ============================================================ */

.s2 {
  position: relative;
  width: 100%;
  min-height: 659px;
  background: #DEDDFF;
  overflow: hidden;
}

.s2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: #8E5CEE;
  z-index: 2;
}

.s2__venn {
  position: absolute;
  right: 0;
  top: 7px;
  height: calc(100% - 7px);
  width: auto;
}

.s2__left {
  position: relative;
  z-index: 1;
  padding: 80px 0 60px 73px;
  max-width: 463px;
}

.s2__heading-row {
  display: flex;
  align-items: flex-start;
}

.s2__accent {
  width: 32px;
  min-height: 127px;
  align-self: stretch;
  background: #8E5CEE;
  flex-shrink: 0;
  margin-top: 13px;
}

.s2__heading {
  font-size: 41px;
  font-weight: 300;
  line-height: 1.22;
  color: #000000;
  margin-left: 29px;
}

.s2__body {
  font-size: 23px;
  font-weight: 300;
  line-height: 1.38;
  color: #000000;
  margin-top: 38px;
}

/* ============================================================
   SECTIONS 3 / 4 / 5 — two-column flex panels
   Each section: text col (50%) + photo col (50%).
   ============================================================ */

.s3,
.s4,
.s5 {
  display: flex;
  width: 100%;
  min-height: 453px;
}

/* ── Section 3 · strengthen ── */

.s3__left {
  flex: 0 0 50%;
  background: #C8C0FF;
  padding: 78px 40px 40px 75px;
}

.s3__icon { width: 50px; height: 69px; }

.s3__heading {
  font-size: 41px;
  font-weight: 300;
  line-height: 1.00;
  color: #000000;
  margin-top: 18px;
}

.s3__body {
  font-size: 23px;
  font-weight: 300;
  line-height: 1.38;
  color: #000000;
  margin-top: 20px;
  max-width: 416px;
}

.s3__photo {
  flex: 0 0 50%;
  background-size: cover;
  background-position: center center;
}

/* ── Section 4 · unleash ── */

.s4 { background: #AA95F9; }

.s4__photo {
  flex: 0 0 50%;
  background-size: cover;
  background-position: center center;
}

.s4__right {
  flex: 0 0 50%;
  background: #AA95F9;
  padding: 51px 40px 40px 65px;
}

.s4__icon { width: 79px; height: 72px; }

.s4__heading {
  font-size: 41px;
  font-weight: 300;
  line-height: 1.22;
  color: #000000;
  margin-top: 20px;
  max-width: 360px;
}

.s4__body {
  font-size: 23px;
  font-weight: 300;
  line-height: 1.38;
  color: #000000;
  margin-top: 20px;
  max-width: 379px;
}

/* ── Section 5 · modernize ── */

.s5__left {
  flex: 0 0 50%;
  background: #8E5CEE;
  padding: 57px 40px 40px 75px;
}

.s5__icon { width: 69px; height: 80px; }

.s5__heading {
  font-size: 41px;
  font-weight: 300;
  line-height: 1.00;
  color: #ffffff;
  margin-top: 20px;
  max-width: 469px;
}

.s5__body {
  font-size: 23px;
  font-weight: 300;
  line-height: 1.38;
  color: #ffffff;
  margin-top: 20px;
  max-width: 419px;
}

.s5__photo {
  flex: 0 0 50%;
  background-size: cover;
  background-position: center center;
}

/* ============================================================
   SECTION 6 · highlights
   ============================================================ */

.s6 {
  width: 100%;
  background: #DEDDFF;
  padding-top: 100px;
}

.s6__header {
  background: #743CD3;
  margin-right: 10%;
  padding: 29px 0 0 84px;
  height: 147px;
}

.s6__eyebrow {
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.05em;
  margin: 0;
}

.s6__title {
  font-size: 41px;
  font-weight: 300;
  color: #ffffff;
  margin: 14px 0 0;
  line-height: 1.0;
}

.s6__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding-top: 86px;
  padding-bottom: 86px;
}

.s6__col:first-child { padding-left: 60px; padding-right: 30px;}
.s6__col:last-child  { padding-left: 30px; padding-right: 60px;}

.s6__item {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-top: 51px;
}
.s6__item:first-child { margin-top: 0; }

.s6__icon {
  width: 100px;
  height: 58px;
  object-fit: contain;
  object-position: center center;
  flex-shrink: 0;
}
.s6__icon--sm { 
  /* width: 85px;  */
  height: 49px; 
}

.s6__text {
  font-size: 23px;
  font-weight: 300;
  line-height: 1.38;
  color: #000000;
  margin: 0;
}

/* ============================================================
   SECTION 7 · oem_combined
   Rack image is a decorative overlay (position:absolute intentional).
   ============================================================ */

.s7 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.s7__top {
  width: 100%;
  min-height: 594px;
  background: #8E5CEE;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 81px 40px 40px;
}

.s7__title {
  font-size: 41px;
  font-weight: 300;
  line-height: 1.22;
  color: #ffffff;
  text-align: center;
}

.s7__bullets {
  list-style: none;
  margin-top: 35px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.s7__bullet {
  font-size: 22px;
  font-weight: 300;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 17px;
}

.s7__bullet::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 7px;
  background: #DEDDFF;
  flex-shrink: 0;
}

/* Rack straddles violet/lavender boundary — overlay is intentional */
.s7__rack {
  position: absolute;
  left: 6.4%;    /* 77 / 1200 */
  top: 279px;
  width: 87.2%;  /* 1046 / 1200 */
  height: auto;
  z-index: 2;
}

.s7__bottom {
  width: 100%;
  min-height: 562px;
  background: #DEDDFF;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
  z-index: 1;
}

.s7__col {
  position: relative;
  padding: 161px 34px 48px;
  text-align: center;
}

.s7__col:nth-child(2)::before,
.s7__col:nth-child(2)::after {
  content: '';
  position: absolute;
  top: 151px;   /* padding-top 161px − 10px */
  bottom: 38px; /* padding-bottom 48px − 10px */
  width: 1px;
  background: #743CD3;
}
.s7__col:nth-child(2)::before { left: 0; }
.s7__col:nth-child(2)::after  { right: 0; }

.s7__col-title {
  font-size: 25px;
  font-weight: 300;
  line-height: 1.25;
  color: #743CD3;
  margin: 0;
}

.s7__col-icon {
  display: block;
  width: auto;
  margin-inline: auto;
  height: 68px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.s7__col-subtitle {
  display: block;
  font-size: 21px;
  font-weight: 700;
  color: #555555;
  margin-top: 14px;
}

.s7__col-desc {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.38;
  color: #333333;
  margin-top: 4px;
}

/* ============================================================
   SECTION 8 · trust_oem
   ============================================================ */

.s8 { width: 100%; }

.s8__photo {
  width: 100%;
  height: 536px;
  background-size: cover;
  background-position: 50% 45%;
}

.s8__content {
  background: #743CD3;
  padding: 56px 87px 60px;
}

.s8__title {
  font-size: 41px;
  font-weight: 300;
  line-height: 1.22;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

.s8__subtitle {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: #ffffff;
  text-align: center;
  margin: 22px auto 0;
  max-width: 554px;
}

.s8__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 52px;
}

.s8__col {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.s8__col:first-child { padding-left: 20px; padding-right: 20px; }
.s8__col:last-child  { padding-left: 20px; padding-right: 20px; }

.s8__case {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.s8__icon {
  flex-shrink: 0;
  width: 77px;
  height: 60px;
  object-fit: contain;
  object-position: center center;
}

.s8__case-text {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: #ffffff;
  margin: 0;
}

/* ============================================================
   SECTION 9 · start_your_future  (no responsive adaptation)
   Title/button are overlaid on photo — position:absolute intentional.
   ============================================================ */

.s9 {
  position: relative;
  width: 100%;
  height: 625px;
  background-size: cover;
  background-position: center center;
}

.s9__title {
  position: absolute;
  left: 7.25%;
  top: 63px;
  font-size: 45px;
  font-weight: 300;
  line-height: 1.22;
  color: #2a145a;
  margin: 0;
  max-width: 65%;
}

.s9__btn {
  position: absolute;
  left: 7.25%;
  top: 235px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(404px, 34%);
  height: 64px;
  border: 2px solid #2a135a;
  color: #2a145a;
  font-size: 30px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  background: none;
}

/* ============================================================
   SECTION 10 · footer
   ============================================================ */

.s10 {
  width: 100%;
  min-height: 132px;
  background: #2a135a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5.2% 0 6.25%;
}

.s10__dell { width: 252px; height: 32px; flex-shrink: 0; }
.s10__ms   { width: 183px; height: 39px; flex-shrink: 0; }

/* ============================================================
   TABLET  (641px – 1024px)
   ============================================================ */

@media (max-width: 1024px) {

  /* Section 1 */
  .s1__box {
    width: 60%;
    padding: 28px 40px 36px 50px;
  }
  .s1__headline { font-size: 48px; }
  .s1__body     { font-size: 20px; }

  /* Section 2 */
  .s2__left  { max-width: 380px; padding-left: 48px; }
  .s2__heading { font-size: 34px; }
  .s2__body    { font-size: 20px; }

  /* Sections 3 / 4 / 5 — photo shrinks to 35%, text grows */
  .s3__left  { flex: 0 0 65%; padding-right: 32px; }
  .s3__photo { flex: 0 0 35%; }

  .s4__photo { flex: 0 0 35%; }
  .s4__right { flex: 0 0 65%; }

  .s5__left  { flex: 0 0 65%; }
  .s5__photo { flex: 0 0 35%; }

  .s3__heading, .s4__heading, .s5__heading { font-size: 34px; }
  .s3__body,   .s4__body,   .s5__body     { font-size: 20px; }

  /* Section 6 — single column */
  .s6__grid { grid-template-columns: 1fr; }
  .s6 { padding-top: 48px; }
  .s6__header { height: auto; padding: 20px 24px; }
  .s6__grid   { padding-top: 48px; padding-bottom: 48px; }
  .s6__col:first-child,
  .s6__col:last-child { padding-left: 24px; }
  .s6__col:last-child { margin-top: 36px; }
  .s6__title   { font-size: 34px; }
  

  /* Section 7 — single column bottom, no separators, reduced rack spacing */
  .s7__bottom { grid-template-columns: 1fr; min-height: auto; }
  .s7__col { padding-top: 60px; padding-bottom: 48px; }
  .s7__col:nth-child(2)::before,
  .s7__col:nth-child(2)::after { display: none; }
  .s7__title { font-size: 34px; }

  /* Section 8 — single column */
  .s8__grid    { grid-template-columns: 1fr; }
  .s8__col:last-child { padding-left: 20px; margin-top: 50px; }
  .s8__content { padding: 48px 60px 52px; }
  .s8__title   { font-size: 34px; }
  .s8__subtitle { font-size: 20px; }
  .s8__case-text { font-size: 20px; }
  .s8__photo   { height: 400px; }

  /* Section 9 */
  .s9          { height: 540px; }
  .s9__title   { font-size: 38px; max-width: 75%; }
  .s9__btn     { width: min(404px, 50%); }

  /* Footer — stays side-by-side on tablet */
}

/* ============================================================
   MOBILE  (≤ 640px)
   ============================================================ */

@media (max-width: 640px) {

  /* Section 1 — nav logos scale down */
  .s1__nav { padding: 20px 16px 0; }
  .s1__nav-dell img { height: 24px; }
  .s1__nav-ms  img { height: 28px; }

  .s1 { min-height: 520px; }
  .s1__box {
    width: 100%;
    max-width: 100%;
    margin-top: 120px;
    padding: 24px 32px 32px;
  }
  .s1__headline { font-size: 36px; }
  .s1__body     { font-size: 18px; }

  /* Section 2 — hide Venn, text full width */
  .s2 { min-height: 461px; }
  .s2__venn { display: none; }
  .s2__left {
    max-width: 100%;
    padding: 48px 32px 48px;
  }
  .s2__accent  { margin-top: 3px; min-height: 102px; align-self: flex-start; }
  .s2__heading { font-size: 28px; }
  .s2__body    { font-size: 18px; }

  /* Sections 3 / 4 / 5 — hide photos, text full width */
  .s3__photo,
  .s5__photo { display: none; }
  .s3__left  { flex: 0 0 100%; padding: 48px 32px; }
  .s5__left  { flex: 0 0 100%; padding: 48px 32px; }

  .s4__photo { display: none; }
  .s4__right { flex: 0 0 100%; padding: 48px 32px; }

  .s3__heading, .s4__heading, .s5__heading { font-size: 28px; }
  .s3__body,   .s4__body,   .s5__body     { font-size: 18px; }
  .s3__body { max-width: 100%; }

  /* Section 6 */
  .s6 { padding-top: 48px; }
  .s6__header { height: auto; padding: 20px 24px; }
  .s6__grid   { padding-top: 48px; padding-bottom: 48px; }
  .s6__col:first-child,
  .s6__col:last-child { padding-left: 24px; }
  .s6__col:last-child { margin-top: 36px; }
  .s6__eyebrow { font-size: 18px; }
  .s6__title   { font-size: 24px; }
  .s6__item    { gap: 16px; margin-top: 36px; }
  .s6__icon    { width: 64px; height: 37px; }
  .s6__text    { font-size: 18px; }

  /* Section 7 */
  .s7__top    { min-height: auto; padding: 48px 32px 40px; }
  .s7__rack   { display: none; }
  .s7__bottom { grid-template-columns: 1fr; min-height: auto; }
  .s7__col    { padding: 40px 32px; }
  .s7__col:nth-child(2)::before,
  .s7__col:nth-child(2)::after { display: none; }
  .s7__title  { font-size: 28px; }
  .s7__col-title { font-size: 21px; }

  /* Section 8 */
  .s8__photo   { height: 280px; }
  .s8__content { padding: 40px 24px 48px; }
  .s8__title   { font-size: 28px; }
  .s8__subtitle { font-size: 18px; max-width: 100%; }
  .s8__grid    { grid-template-columns: 1fr; }
  .s8__col:last-child { padding-left: 20px; margin-top: 40px; }
  .s8__case-text { font-size: 18px; }
  .s8__icon    { width: 64px; height: 50px; }

  .s9{
    height: 450px;
  }
  .s9__title { font-size: 32px; max-width: 90%;}
  .s9__btn{width: min(404px, 80%);}

  /* Footer — logos stack vertically */
  .s10 {
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 36px 0;
    min-height: auto;
  }
}