/* Home page background */
body.home {
  background-color: #0B0C10;
}
/* =========================
   HOME - HERO (OneMac)
   ========================= */

:root{
  --om-max: 1440px;
  --om-bg: #0B0C10;
  --om-text: rgba(255,255,255,.92);
  --om-muted: #979797;
  --om-line: rgba(255,255,255,.12);
}

.om-hero{
  position: relative;
  height: 1000px;
  margin-top: -150px;       
  padding: 240px 0 70px; 
  background: var(--om-hero-bg, var(--om-bg));
  overflow: hidden;
}

.om-hero__eclipse{
  position:absolute;
  left:50%;
  top:-240px;
  transform:translateX(-50%);
  width: 1100px;
  height: 1100px;
  background-image: var(--om-hero-eclipse);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 1;
  pointer-events:none;
  z-index: 0;
}

.om-hero__container{
  position: relative;
  z-index: 1;
  max-width: var(--om-max);
  margin: 0 auto;
  padding: 0 24px;
	padding-bottom:100px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

/* Content block */
.om-hero__content{
  width: 100%;
  max-width: 1200px;
}

/* Pill */
.om-hero__pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 5px 26px;
  border-radius: 100px;

  /* background (opacity-based, NOT stop-based) */
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.05),
      rgba(105,178,255,0.20)
    ) padding-box,
    linear-gradient(
      90deg,
      rgba(255,255,255,0.05),
      rgba(105,178,255,0.20)
    ) border-box;

  border: 1px solid transparent;

  box-shadow: 0 0 10px rgba(105,178,255,0.20);

  margin-bottom: 22px;
}


.om-hero__pillText{
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  text-align: center;

  background: linear-gradient(90deg, #FFFFFF 0%, #69B2FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* Title */
.om-hero__title{
  margin: 0 0 18px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;


  font-family: "Poppins", sans-serif;
  font-weight: 200 !important;
  font-style: normal;
  font-size: 74px;
  line-height: 94px;
  letter-spacing: 0;
  text-align: center;

  background: linear-gradient(90deg, #FFFFFF 0%, #575656 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.om-hero__desc{
  margin: 0 0 28px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
	
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: var(--om-muted);
  line-height: 1.4;
}

/* Buttons */
.om-hero__actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 34px;
}

.om-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
	
  padding: 10px 34px;
  border-radius: 100px;

  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;

  text-decoration: none;
  border: none;

  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}

.om-btn:hover{
  transform: translateY(-1px);
}

/* Primary button */
.om-btn--primary{
  color: #000;
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #979797 100%
  );
}

/* Secondary button */
.om-btn--secondary{
  color: #FFFFFF;
  background: linear-gradient(
    180deg,
    #575656 0%,
    #1E1E1E 100%
  );
}


/* Image */
/* Image */
.om-hero__media{
  width: 100%;
  margin: 0 auto;
  padding: 40px 0; /* top & bottom padding */
  display: flex;
  justify-content: center;
}

.om-hero__img{
  width: 100%;
  max-width: 1440px;
  height: auto;

  display: block;

  mix-blend-mode: lighten; /* Figma: Blend = Lighten */
  object-fit: contain;

  pointer-events: none;
  user-select: none;
}


/* Stats */
.om-hero__statsWrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:28px;
}

.om-hero__stats{
  width:90%;
  display:grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items:center;
}


/* Each stat: Row 1 = icon+label, Row 2 = value */
.om-stat{
  min-width:0;

  display:grid;
  grid-template-columns:20px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:12px;

  align-items:center;
  justify-items:start;

  padding: 0 60px;   /* ← THIS is the fix */
  box-sizing: border-box;
}


/* Icon */
.om-stat__icon{
  grid-column:1;
  grid-row:1;

  width:20px;
  height:20px;
  display:block;
  opacity:.8;
}

/* Label */
.om-stat__label{
  grid-column:2;
  grid-row:1;

  font-family:"Poppins",sans-serif;
  font-size:20px;
  font-weight:200;
  color:#979797;
  line-height:1;
  display:block;
}

/* Value always BELOW */
.om-stat__value{
  grid-column:1 / -1; /* span full width */
  grid-row:2;

  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;

  font-family:"Poppins",sans-serif;
  font-size:64px;
  font-weight:200;
  line-height:1;

  background:linear-gradient(90deg,#FFFFFF 0%,#575656 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Suffix */
.om-stat__suffix{
  font-size:24px;
  font-weight:200;
  color:#979797;
  line-height:1;
}

/* Divider */
.om-stat__divider{
  width:1px;
  height:96px;
  background:rgba(255,255,255,.14);
  justify-self:center;
}

/* Remove divider after LAST stat (your markup places divider AFTER stat) */
.om-hero__stats .om-stat:last-of-type + .om-stat__divider{
  display:none;
}



/* =========================
   HERO RESPONSIVE OPTIMIZATION (ADD-ON ONLY)
   DO NOT EDIT ABOVE RULES
   ========================= */

/* Laptops up to 1366px — only reduce text sizes */
@media (max-width: 1366px){
  .om-hero__title{ font-size: 64px; line-height: 82px; }
  .om-hero__desc{ font-size: 16px; }
  .om-stat__value{ font-size: 56px; }
  .om-stat__suffix{ font-size: 22px; }
  .om-stat__label{ font-size: 18px; }
}

/* Tablet Landscape up to 1200px — reduce text + adjust spacing slightly */
@media (max-width: 1200px){
  .om-hero{ height: auto; padding: 220px 0 70px; }
  .om-hero__title{ font-size: 58px; line-height: 74px; max-width: 680px; }
  .om-hero__desc{ font-size: 16px; max-width: 520px; }
  .om-hero__media{ padding: 30px 0; }
  .om-stat{ padding: 0 40px; }
  .om-stat__value{ font-size: 52px; }
  .om-stat__suffix{ font-size: 20px; }
    .om-hero__stats{
    width: 100%;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
  }

  .om-stat{
    padding: 0 36px;
  }

  .om-stat__label{
    font-size: 18px;
  }

  .om-stat__value{
    font-size: 52px;
  }

  .om-stat__suffix{
    font-size: 20px;
  }
	
	
}

/* Tablet Portrait up to 1024px — reduce more + center stats columns (wrap/center) */
@media (max-width: 1024px){
  .om-hero{ height: auto; padding: 200px 0 60px; }
  .om-hero__container{ padding-bottom: 80px; }
  .om-hero__eclipse{ width: 980px; height: 980px; top: -260px; }

  .om-hero__title{ font-size: 50px; line-height: 64px; max-width: 620px; }
  .om-hero__desc{ font-size: 15px; max-width: 520px; }

  .om-btn{ padding: 10px 30px; }

  /* Stats become 3 rows stacked, centered */
  .om-hero__stats{
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 22px;
    justify-items: center;
  }
  .om-stat{
    width: 100%;
    max-width: 560px;
    padding: 0;
    justify-items: center;
    grid-template-columns: 20px auto;
  }
  .om-stat__label{ text-align: center; }
  .om-stat__value{ justify-content: center; }
  .om-stat__divider{
    width: 100%;
    height: 1px;
    justify-self: center;
    background: rgba(255,255,255,.14);
  }
	
	  .om-hero__stats{
    width: 100%;
    grid-template-columns: 1fr 1px 1fr 1px 1fr; /* FORCE single row */
  }

  .om-stat{
    padding: 0 24px;
  }

  .om-stat__label{
    font-size: 16px;
  }

  .om-stat__value{
    font-size: 44px;
  }

  .om-stat__suffix{
    font-size: 18px;
  }

  .om-stat__divider{
    height: 72px;
  }
}

/* Mobile Landscape up to 880px — reduce more + tighten spacing */
@media (max-width: 880px){
  .om-hero{ margin-top: -120px; padding: 180px 0 55px; }
  .om-hero__title{ font-size: 44px; line-height: 58px; max-width: 560px; }
  .om-hero__desc{ font-size: 14px; max-width: 480px; }
  .om-hero__media{ padding: 22px 0; }

  .om-btn{ padding: 10px 28px; font-size: 15px; }

  .om-stat__value{ font-size: 48px; }
  .om-stat__suffix{ font-size: 18px; }
  .om-stat__label{ font-size: 17px; }
}

/* Mobile Portrait up to 767px — MOST IMPORTANT (pixel-clean alignment) */
@media (max-width: 767px){
  .om-hero{
    height: auto;
    margin-top: -108px;
    padding: 120px 0 50px;
  }

  .om-hero__container{
    padding: 0 18px;
    padding-bottom: 70px;
  }

  .om-hero__eclipse{
    width: 760px;
    height: 760px;
    top: -220px;
  }

  .om-hero__pill{
    height: 30px;
    padding: 5px 20px;
    margin-bottom: 19px;
  }
  .om-hero__pillText{ font-size: 13px; }

  .om-hero__title{
    font-size: 36px;
    line-height: 46px;
    max-width: 340px;
    margin-bottom: 14px;
  }

  .om-hero__desc{
    font-size: 14px;
    line-height: 1.45;
    max-width: 320px;
    margin-bottom: 22px;
  }

  .om-hero__actions{
    flex-direction: row;
	justify-content:center;
    gap: 12px;
    margin-bottom: 26px;
  }
  .om-btn{
    width: auto;
	min-width:150px
    padding: 12px 24px;
    font-size: 15px;
    line-height: 22px;
  }

  .om-hero__media{ padding: 18px 0; }

  /* Stats: clean stacked cards, centered */
  .om-hero__stats{
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 30px;
    justify-items: center;
  }

  .om-stat{
    width: 100%;
    max-width: 340px;
    grid-template-columns: 20px auto;
    column-gap: 10px;
    row-gap: 10px;
    justify-items: start;
  }

  .om-stat__label{ font-size: 16px; }
  .om-stat__value{ font-size: 40px; }
  .om-stat__suffix{ font-size: 16px; }

  .om-stat__divider{
    width: 100%;
    height: 1px;
  }
}

/* Smaller phones up to 420px — final tightening */
@media (max-width: 420px){
  /* your hero is forcing desktop sizing */
  .om-hero{
    height: auto;          
    margin-top: -131px;         
    padding: 160px 0 60px;      
  }

  .om-hero__container{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* pill should NEVER overflow */
  .om-hero__pill{
    max-width: 100%;
  }
  .om-hero__pillText{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* title + desc must scale down */
  .om-hero__title{
    max-width: 100%;
    font-size: 34px;
    line-height: 44px;
  }
  .om-hero__desc{
    max-width: 100%;
    font-size: 13px;
  }


  .om-hero__actions{
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
  }
  .om-btn{
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 14px;       
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
  }

  /* image never overflow */
  .om-hero__media{
    padding: 26px 0;
  }
  .om-hero__img{
    max-width: 100%;
  }

  /* stats grid padding is too heavy for 390px */
  .om-hero__stats{
    width: 100%;
  }
  .om-stat{
    padding: 0 16px;          /* was 60px -> that causes overflow */
  }
}

/* Very small up to 360px */
@media (max-width: 360px){
  .om-hero__title{ font-size: 30px; line-height: 40px; }
  .om-btn{ width: 200px; }
  .om-stat__value{ font-size: 34px; }
}

/* === TABLET FIX: force LEFT alignment for stats === */
@media (max-width: 1200px) and (min-width: 768px){

  .om-hero__statsWrap{
    justify-content: flex-start;   /* stop centering the block */
  }

  .om-hero__stats{
    width: 100%;
    justify-items: start;          /* grid items align left */
  }

  .om-stat{
    justify-items: start;
    text-align: left;
  }

  .om-stat__value{
    justify-content: flex-start;
    text-align: left;
  }
} 
/* ==================
   END HERO SECTION
   ================== */

/* =========================
   HOME - FEATURE CARDS (OneMac)
   ========================= */

.om-feat{
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  padding: 140px 0 140px;
}

/* Decorative eclipses */
.om-feat__decor{
  position: absolute;
  top: -260px;
  width: 356.86px;
  height: 694px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .12;
  filter: blur(200px);
  pointer-events: none;
  z-index: 0;
}

.om-feat__decor--left{
  left: -298px;
  transform: rotate(-9.46deg);
  background-image: var(--om-feat-ecl-left);
}

.om-feat__decor--right{
  right: -298px;
  transform: rotate(9.46deg);
  background-image: var(--om-feat-ecl-right);
}

.om-feat__container{
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px; 
}

/* Top row: heading left + description right */
.om-feat__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.om-feat__heading{
  margin: 0;
  width: 631px;
  max-width: 100%;

  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 40px;
  line-height: 50px;

  /* Heading gradient (Dark 2 -> Blue 2) */
  background: linear-gradient(90deg, #575656 0%, #69B2FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.om-feat__sub{
  margin: 0;
  width: 522px;
  max-width: 100%;

  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #979797;
	  align-self: flex-end;
}

/* allow underline/bold for “OneMac” if you wrap it with <u> or <strong> */
.om-feat__sub u{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.om-feat__sub strong,
.om-feat__sub b{
  font-weight: 500;
}

/* Cards layout */
.om-feat__grid{
  display: grid;
  grid-template-columns: 738px 522px; /* exact Figma */
  gap: 20px;
  align-items: stretch;
}

.om-featCard{
  position: relative;
  height: 410px;                
  border-radius: 20px;         
  background: #F6F6F6;          
  overflow: hidden;
  text-decoration: none;
  color: inherit;

  /* keep click area nice */
  display: block;
}

/* subtle hover only (no “messy” effects) */
.om-featCard:hover{
  filter: brightness(0.995);
}

/* Top-right arrow icon */
.om-featCard__icon{
  position: absolute;
  top: 26px;
  right: 26px;
  width: 22px;
  height: 22px;
  opacity: .55;
}
.om-featCard__icon img{
  width: 100%;
  height: 100%;
  display: block;
}

/* Title */
.om-featCard__title{
  position: absolute;
  left: 40px;
  top: 120px;

  width: 310px;
  max-width: calc(100% - 80px);

  font-family: "Poppins", sans-serif;
  font-weight: 275; /* Figma shows ~275 ExtraLight */
  font-size: 48px;
  line-height: 58px;
  color: #000000;
}

/* Media area on right */
.om-featCard__media{
  position: absolute;
  right: 0;
  top: 45%;
  width: 50%;
  height: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* All images inside media */
.om-featCard__img{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  max-width: 100%;
  height: auto;
  display: block;
  will-change: transform, opacity;
}

/* ===== Animations (on load) ===== */
/* Reduce motion safe */
@media (prefers-reduced-motion: reduce){
  .om-featCard__img{ animation: none !important; transform: translate(0,-50%) !important; opacity: 1 !important; }
}

/* Single: slide from right -> center-right */
.om-featCard[data-media="single"] .om-featCard__img--single{
  opacity: 0;
  transform: translate(120px, -50%);
  animation: omFeatInRight .9s cubic-bezier(.2,.8,.2,1) .25s forwards;
}

/* Layered 3 */
.om-featCard[data-media="layered_3"] .om-featCard__img--top{
  width: 89%;
  top: 33%;
  opacity: 0;
  transform: translate(0, -120px);
  animation: omFeatInTop .9s cubic-bezier(.2,.8,.2,1) .22s forwards;
}
.om-featCard[data-media="layered_3"] .om-featCard__img--mid{
    right: 52px;
    width: 41%;
    top: 70%;
  opacity: 0;
  transform: translate(120px, -50%);
  animation: omFeatInRight .9s cubic-bezier(.2,.8,.2,1) .32s forwards;
}
.om-featCard[data-media="layered_3"] .om-featCard__img--bottom{
  opacity: 0;
  transform: translate(0, 120px);
  animation: omFeatInBottom .9s cubic-bezier(.2,.8,.2,1) .26s forwards;
}

.om-featCard[data-media="layered_3"] .om-featCard__img--bot{
    width: 100%;
    top: 74%;
    animation: omFeatInBottom 1.6s cubic-bezier(.2,.8,.2,1) .35s forwards;
}


/* Stacked 2 */
.om-featCard[data-media="stacked_2"] .om-featCard__img--front{
  opacity: 0;
  transform: translate(120px, -50%);
  animation: omFeatInRight .9s cubic-bezier(.2,.8,.2,1) .10s forwards;
  z-index: 2;
	    width: 61%;
    top: 71%;
}
.om-featCard[data-media="stacked_2"] .om-featCard__img--back{
   width: 86%;
    height: auto;
    top: 51px;

  max-width: none;        /* REQUIRED */
  opacity: 0;
  transform: translate(0, 120px);
  animation: omFeatInBottom .9s cubic-bezier(.2,.8,.2,1) .28s forwards;
  z-index: 1;
}

/* Keyframes */
@keyframes omFeatInRight{
  to{ opacity: 1; transform: translate(0, -50%); }
}
@keyframes omFeatInTop{
  to{ opacity: 1; transform: translate(0, 0); }
}
@keyframes omFeatInBottom{
  to{ opacity: 1; transform: translate(0, 0); }
}
@keyframes omFeatInBottom{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   FEATURE CARDS - RESPONSIVE
   ========================= */

/* <= 1440 layout*/
@media (max-width: 1440px){
  .om-feat__container{ padding: 0 60px; }
}

/* Laptop screens */
@media (min-width: 1200px) and (max-width: 1440px){
  .om-feat__grid{
    grid-template-columns: 729px 571px;
    gap: 20px;
  }
	
  .om-feat__sub{
    width: 571px;
}
	
}

@media (min-width: 1280px) and (max-width: 1366){
  .om-feat__grid{
    grid-template-columns: 729px 571px !important;
    gap: 20px;
  }
	
  .om-feat__sub{
    width: 571px !important;
}
}


/* =========================
   (Portrait) 1024px tweaks
   Only image positioning overrides
   ========================= */
@media (min-width: 1000px) and (max-width: 1060px){

  .om-featCard[data-media="stacked_2"] .om-featCard__img--front{
    width: 35%;
    top: 67%;
  }

  .om-featCard[data-media="stacked_2"] .om-featCard__img--back{
    width: 54%;
    top: 19px;
  }

  .om-featCard[data-media="layered_3"] .om-featCard__img--bot{
    width: 84%;
    top: 92%;
  }

  .om-featCard[data-media="layered_3"] .om-featCard__img--mid{
    right: 61px;
    width: 36%;
    top: 71%;
  }

  .om-featCard[data-media="layered_3"] .om-featCard__img--top{
    width: 78%;
    top: 29%;
  }

}


/* <= 1024: stack heading row and cards */
@media (min-width: 768px) and (max-width: 1200px){

  .om-feat{ padding: 100px 0 110px; }

  .om-feat__top{
    flex-direction: row;
    gap: 16px;
    margin-bottom: 28px;
  }

  .om-feat__heading{
    width: 100%;
    font-size: 29px;
	line-height:39px;
  }

  .om-feat__sub{
    width: 100%;
  }

  .om-feat__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .om-featCard{ height: 390px; }

  .om-featCard__title{
    top: 110px;
    font-size: 44px;
    max-width: 282px;
  }

  .om-featCard__media{
    width: 56%;
  }
	
  .om-featCard[data-media="layered_3"] .om-featCard__img--top {
    width: 85%;
	top: 29%;
   }
	
   .om-featCard[data-media="layered_3"] .om-featCard__img--mid{
     right: 50px;
     width: 43%;
	 top: 69%;
	}
	
   .om-featCard[data-media="layered_3"] .om-featCard__img--bot {
     width: 91%;
     top: 73%;
    }
	
  .om-featCard[data-media="stacked_2"] .om-featCard__img--front {
    width: 42%;
    top: 67%;
   }
	
   .om-featCard[data-media="stacked_2"] .om-featCard__img--back {
    width: 61%;
    height: auto;
    top: 19px;
    }
}

/* <= 767: tighten paddings, card title scale */
@media (max-width: 767px){
  .om-feat{
    position: relative;
    z-index: 5;
    padding-bottom: 120px;
  }
  .om-feat__container{ 
	  padding: 0 18px; 
	}
	
  .om-feat__top{ 
	display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 40px;
	flex-direction:column
	}
	
  .om-feat__heading{
    font-size: 30px;
    line-height: 40px;
  }

  .om-feat__sub{
    font-size: 14px;
    line-height: 24px;
  }

  .om-featCard{ 
	  overflow: hidden;
	}
	
  .om-featCard__media{
    width: 52% !important;
    right: 0;
    top: 50% !important;
    transform: translateY(-50%) !important;
    overflow: hidden;
  }
	
	.om-feat__grid{
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

  .om-featCard__icon{
    top: 20px;
    right: 20px;
  }
	
  .om-featCard{
    overflow: hidden;
	height: 260px;
  }

  .om-featCard__title{
    left: 24px;
    top: 57px;
    font-size: 32px;
	line-height:42px;
    max-width: 195px;
  }
  
  .om-featCard__icon img{
		width:94%;
		height:94%
   }


  .om-featCard__media{
   width: 55% !important;
   right: 0 !important;
   top: 50% !important;
   transform: translateY(-50%) !important;
   overflow: hidden;
  }
	

  .om-featCard[data-media="single"] .om-featCard__img--single{
   top: 50% !important;
   transform: translate(0,-50%) !important;
  }
 .om-featCard[data-media="layered_3"] .om-featCard__img--top {
   width: 89%;
   top: 28%;
  }
 .om-featCard[data-media="layered_3"] .om-featCard__img--mid {
   right: 25px;
   width: 46%;
   top: 64%;
  }
 .om-featCard[data-media="layered_3"] .om-featCard__img--bot {
   width: 100%;
   top: 70%;
  }
 .om-featCard[data-media="stacked_2"] .om-featCard__img--front {
   width: 51%;
   top: 63%;
  }
 .om-featCard[data-media="stacked_2"] .om-featCard__img--back {
   width: 75%;
   top: 18px;  
  }
		
} /* END 767 */



/* <= 420: final tightening */
@media (max-width: 420px){
  .om-featCard{ height: 244px; }
  .om-featCard__title{ font-size: 30px; line-height:40px;  top: 60px; }
  .om-featCard__media{ width: 62%; }
}

/* ==================
   END FEATURE CARD SECTION
   ================== */

/* =========================
   HOME - REVIEWS (OneMac)
   ========================= */

.om-rev{
  position: relative;
  overflow: hidden;

  /* NO TOP PADDING (as per your design) */
  padding: 0 0 140px;

  /* plain white (fade handled on bg image only) */
  background: #FFFFFF;
}

.om-rev__container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* Background image wrapper (fixed width like Figma) */
.om-rev__bgWrap{
  position: relative;
  width: 1100px;      /* 1083.92 -> rounded */
  max-width: 100%;
  margin: 0 auto;
  z-index: 1;         /* stays behind text */
}

.om-rev__bg{
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 1;
}

/* Fade ONLY on bg image area (bottom -> top) */
.om-rev__bgWrap::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 200px;  /* adjust 160-240 if needed */
  background: linear-gradient(to top, #FFFFFF 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index: 2;
}

/* Center content (always above bg + fade) */
.om-rev__content{
  position: relative;
  z-index: 5;

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  margin-top: -128px; /* your current placement */
}

/* Rating row: 4.9 + star */
.om-rev__ratingRow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.om-rev__rating{
  font-family: "Poppins", sans-serif;
  font-weight: 275;
  font-size: 64px;
  line-height: 74px;
  letter-spacing: 0;

  /* TOP->BOTTOM gradient (575656 -> 69B2FF) */
  background: linear-gradient(to bottom, #575656 0%, #69B2FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.om-rev__star{
  width: 40px;
  height: 40px;
  display: block;
}

/* Title (blue) */
.om-rev__title{
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
  color: #69B2FF;
  margin-bottom: 8px;
}

/* Subtitle (grey) */
.om-rev__sub{
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #979797;
  margin-bottom: 18px;
}

/* Button */
.om-rev__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;

  /* LEFT->RIGHT gradient (575656 -> 1E1E1E) */
  background: linear-gradient(to right, #575656 0%, #1E1E1E 100%);
  color: #FFFFFF;

  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;

  transition: transform .2s ease, filter .2s ease;
  will-change: transform;
}

.om-rev__btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* =========================
   REVIEWS - RESPONSIVE
   ========================= */

@media (max-width: 1200px){
  .om-rev{ padding-bottom: 120px; }

  .om-rev__bgWrap{ width: 980px; }

  .om-rev__content{ margin-top: -106px; }

  .om-rev__rating{ font-size: 56px; line-height: 66px; }
  .om-rev__star{ width: 35px; height: 35px; }

  .om-rev__title{ font-size: 18px; line-height: 28px; }
  .om-rev__sub{ font-size: 15px; line-height: 24px; }

  .om-rev__btn{ font-size: 18px; line-height: 28px; padding: 10px 22px; }

  .om-rev__bgWrap::after{ height: 180px; }
}

@media (max-width: 767px){
  .om-rev{ padding-bottom: 120px; }
  .om-rev__container{ padding: 0 18px; }

  .om-rev__bgWrap{ width: 100%; }

  .om-rev__content{ margin-top: -44px; }

  .om-rev__rating{ font-size: 33px; line-height: 43px; }
  .om-rev__star{ width: 20px; height: 20px; }

  .om-rev__title{ font-size: 14px; line-height: 24px; margin-bottom:1px; }
  .om-rev__sub{ font-size: 12px; line-height: 22px; margin-bottom: 12px; }

  .om-rev__btn{ font-size: 13px; line-height: 23px; padding: 10px 18px; }

  .om-rev__bgWrap::after{ height: 160px; }
}

@media (max-width: 420px){
  .om-rev__content{ margin-top: -40px; }
  .om-rev__rating{ font-size: 33px; line-height: 43px; }
  .om-rev__btn{ font-size: 13px; line-height: 23px; }
  .om-rev__bgWrap::after{ height: 150px; }
}

/* ==================
   END REVIEWS SECTION
   ================== */

/* =========================
   HOME - ICON NETWORK (OneMac)
   ========================= */

.om-net{
  position: relative;
  padding: 120px 0; /* has TOP + BOTTOM padding (as you said) */
}

.om-net__container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

.om-net__layout{
  position: relative;
  max-width: 1280px;   /* your measured group */
  height: 430px;       /* your measured group */
  margin: 0 auto;

  /* controls for stems (so they CONNECT perfectly) */
  --stem-start: 98px;    
  --stem-h: 95px;        
}

/* main line across (white 10%) */
.om-net__layout::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top: 50%;
  height:1px;
  background: rgba(255,255,255,.10);
  pointer-events:none;
  opacity:1;
}

/* rows */
.om-net__row{
  position:absolute;
  left:0; right:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 40px;
  padding: 0;
}

.om-net__row--top{
  top: 22px;
  margin-bottom: 42px;
}

.om-net__row--bot{
  bottom: 0px;
  align-items:flex-start;
}

/* TOP ROW: bigger middle breathing space (so heading sits clean) */
.om-net__row--top .om-netItem:nth-child(2){
  margin-right: 180px; /* was none */
}
.om-net__row--top .om-netItem:nth-child(3){
  margin-left: 180px;  /* was none */
}

/* BOTTOM ROW: slightly smaller middle gap (as per design) */
.om-net__row--bot .om-netItem:nth-child(2){
  margin-right: 120px;
}
.om-net__row--bot .om-netItem:nth-child(3){
  margin-left: 120px;
}

/* CENTER block */
.om-net__center{
  position:absolute;
  left:50%;
  top: 16%;
  transform: translateX(-50%);
  width: 320px;
  text-align:center;
}

/* Heading (32px, 275 weight, gradient L->R white -> blue) */
.om-net__heading{
  font-family: "Poppins", sans-serif;
  font-weight: 275;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0 0 22px;
  background: linear-gradient(to right, #FFFFFF 0%, #69B2FF 100%);
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}

/* =========================
   Center logo stack  (✅ slightly bigger)
   ========================= */

.om-net__logoWrap{
  position: relative;
  width: 104px; 
  height: 104px;  
  margin: 0 auto;
}

.om-net__logoRing{
  position:absolute;
  inset:0;
  border-radius: 999px;
  border: 1px solid rgba(105,178,255,.10);
}

.om-net__logoGlow{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 140px; 
  height: 140px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: rgba(105,178,255,.14);
  filter: blur(100px);
  pointer-events:none;
}

.om-net__logoCircle{
  position:absolute;
  left:50%;
  top:50%;
  width: 76px;   
  height: 76px; 
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: linear-gradient(to bottom, #69B2FF 0%, #3B45F5 100%);
  display:grid;
  place-items:center;
  box-shadow: 0 0 18px rgba(255,255,255,.70);
}

.om-net__logo{
  width: 60px; 
  height: 48px; 
  object-fit: contain;
  display:block;
}

/* Item block */
.om-netItem{
  width: 185px;              
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 16px;
  text-align:center;
  position: relative;
}

/* Branch vertical stem to main line (fade to 0 near icon) */
.om-netItem::after{
  content:"";
  position:absolute;
  left:50%;
  width:1px;
  transform: translateX(-50%);
  pointer-events:none;
}

/* top: stem goes DOWN to the main line (and CONNECTS) */
.om-netItem--top::after{
  top: var(--stem-start);
  height: var(--stem-h);
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 100%
  );
}

/* bottom: stem goes UP to the main line (and CONNECTS) */
.om-netItem--bot::after{
  bottom: var(--stem-start);
  height: var(--stem-h);
  background: linear-gradient(to top,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 100%
  );
}

/* Icon box (48x48, radius 8, gradient bg + gradient border + glow) */
.om-netItem__iconBox{
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display:grid;
  place-items:center;

  /* gradient border trick */
  border: 1px solid transparent;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(105,178,255,.20) 100%) padding-box,
    linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(105,178,255,.20) 100%) border-box;

  /* inner + outer glow */
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.30),
    0 0 10px rgba(105,178,255,.20);
}

.om-netItem__icon{
  width: 24px;
  height: 24px;
  object-fit: contain;
  display:block;
}

/* Label (15px, 300 weight, white) */
.om-netItem__label{
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 25px;
  color: #FFFFFF;
}

/* ✅ Push ONLY the top row edge items closer to the bar edges */
.om-net__row--top .om-netItem:first-child{
  transform: translateX(-92px);  /* move left (tweak -24 to -60) */
}

/* 2️⃣ Second item – slightly left */
.om-net__row--top .om-netItem:nth-child(2){
  transform: translateX(-34px);
}

/* 3️⃣ Third item – slightly right */
.om-net__row--top .om-netItem:nth-child(3){
  transform: translateX(34px);
}

.om-net__row--top .om-netItem:last-child{
  transform: translateX(92px);   /* move right (tweak 24 to 60) */
}

/* =========================
   Bottom row stem override (2nd & 3rd only)
   ========================= */

.om-net__row--bot .om-netItem:nth-child(2),
.om-net__row--bot .om-netItem:nth-child(3){
  --stem-h: 87px; 
  --stem-start: 127px; 
}


/* =========================
   PULSE ANIMATION (logo -> items)
   Approx (blink traveling effect)
   ========================= */

/* logo subtle pulse */
.om-net__logoCircle{
  animation: omNetLogoPulse 3.2s ease-in-out infinite;
}
@keyframes omNetLogoPulse{
  0%, 100%{ filter:none; }
  45%{ filter: drop-shadow(0 0 18px rgba(105,178,255,.35)); }
  55%{ filter: drop-shadow(0 0 26px rgba(105,178,255,.55)); }
}

/* each stem gets a moving blue “spark” */
.om-netItem::before{
  content:"";
  position:absolute;
  left:50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  opacity: 0;
  pointer-events:none;
}

/* top spark travels from main line -> icon */
.om-netItem--top::before{
  top: var(--stem-start);
  height: 22px;
  background: rgba(105,178,255,.30);
  filter: blur(.2px);
  animation: omNetSparkTop 4.6s linear infinite;
  animation-delay: calc(var(--i) * .18s);
}

@keyframes omNetSparkTop{
  0%{ opacity:0; transform: translateX(-50%) translateY(var(--stem-h)); }
  8%{ opacity:1; }
  24%{ opacity:1; transform: translateX(-50%) translateY(0px); }
  38%{ opacity:0; }
  100%{ opacity:0; transform: translateX(-50%) translateY(0px); }
}

/* bottom spark travels from main line -> icon */
.om-netItem--bot::before{
  bottom: var(--stem-start);
  height: 22px;
  background: rgba(105,178,255,.30);
  filter: blur(.2px);
  animation: omNetSparkBot 4.6s linear infinite;
  animation-delay: calc(var(--i) * .18s);
}

@keyframes omNetSparkBot{
  0%{ opacity:0; transform: translateX(-50%) translateY(calc(var(--stem-h) * -1)); }
  8%{ opacity:1; }
  24%{ opacity:1; transform: translateX(-50%) translateY(0px); }
  38%{ opacity:0; }
  100%{ opacity:0; transform: translateX(-50%) translateY(0px); }
}

/* =========================
   MOBILE (NO LINES, LIST STYLE)
   ========================= */

.om-net__mobileList{
  display:none;
}

@media (max-width: 900px){
  .om-net{ padding: 96px 0; }
  .om-net__layout{ max-width: 1100px; }
}

/* =========================
   TABLET =(2 COLUMNS)
   ========================= */
@media (min-width: 768px) and (max-width: 1200px){

  /* hide desktop network */
  .om-net__layout::before,
  .om-net__row,
  .om-net__center{
    display:none;
  }

  /* show list (2 columns) */
  .om-net__mobileList{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 60px;       
    text-align:left;
    justify-content:center;
    align-items:start;
  }

  .om-net__heading--mobile{
    text-align:center;
    margin-bottom: 14px;
    grid-column: 1 / -1;    
  }

  .om-netMItem{
    width: 100%;
    display:flex;
    align-items:center;
    gap: 14px;
  }

  .om-netMItem__iconBox{
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display:grid;
    place-items:center;

    border: 1px solid transparent;
    background:
      linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(105,178,255,.20) 100%) padding-box,
      linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(105,178,255,.20) 100%) border-box;

    box-shadow:
      inset 0 0 10px rgba(255,255,255,.30),
      0 0 10px rgba(105,178,255,.20);
  }

  .om-netMItem__icon{
    width: 24px;
    height: 24px;
    object-fit: contain;
    display:block;
  }

  .om-netMItem__label{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.25;
    color: #FFFFFF;
  }
}


@media (max-width: 767px){
  .om-net{
    padding: 96px 0;
  }

  .om-net__layout{
    height: auto;
    max-width: 480px;
  }

  /* hide desktop network */
  .om-net__layout::before,
  .om-net__row,
  .om-net__center{
    display:none;
  }

  /* show mobile list */
  .om-net__mobileList{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align:left;
  }

  .om-net__heading--mobile{
    text-align:center;
    margin-bottom: 14px;
  }

  .om-netMItem{
    width: 100%;
    display:flex;
    align-items:center;
    gap: 14px;
  }

  .om-netMItem__iconBox{
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display:grid;
    place-items:center;

    border: 1px solid transparent;
    background:
      linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(105,178,255,.20) 100%) padding-box,
      linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(105,178,255,.20) 100%) border-box;

    box-shadow:
      inset 0 0 10px rgba(255,255,255,.30),
      0 0 10px rgba(105,178,255,.20);
  }

  .om-netMItem__icon{
    width: 24px;
    height: 24px;
    object-fit: contain;
    display:block;
  }

  .om-netMItem__label{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.25;
    color: #FFFFFF;
  }
}

/* ==================
   END ICON NETWORK
   ================== */

/* =========================
   HOME – BENEFITS CARDS
   ========================= */

.om-ben{
  position: relative;
  padding-top: 10px;        /* ONLY 10px top */
  padding-bottom: 120px;
}

/* container */
.om-ben__container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   HEADING
   ========================= */

.om-ben__heading{
  max-width: 932px;
  margin-bottom: 12px;

  font-family: "Poppins", sans-serif;
  font-weight: 275;
  font-size: 48px;
  line-height: 58px;

  background: linear-gradient(to right, #FFFFFF 0%, #575656 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   SUB HEADING
   ========================= */

.om-ben__sub{
  max-width: 391px;

  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;

  background: linear-gradient(to right, #979797 0%, #69B2FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   GRID (FLEXIBLE)
   ========================= */

.om-ben__grid{
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* =========================
   CARD (AUTO WIDTH)
   ========================= */

.om-benCard{
  position: relative;
  height: 270px;
  border-radius: 20px;
  padding: 24px;

  background-color: rgba(255,255,255,0.02);

  background-image: linear-gradient(
    to bottom,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.01)
  );

  border: 1px solid rgba(255,255,255,0.10);

  overflow: hidden;
}


/* =========================
   CARD TITLE
   ========================= */

.om-benCard__title{
  max-width: 260px;

  font-family: "Poppins", sans-serif;
  font-weight: 275;
  font-size: 20px;
  line-height: 30px;
  color: #C3C3C3;
}

/* =========================
   BENEFITS CARD – IMAGE BASE
   ========================= */

.om-benCard{
  position: relative;
  overflow: hidden;
}

/* Image container */
.om-benCard__media{
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Image itself */
.om-benCard__media img{
  position: absolute;

  width: 436px;  /* DEFAULT IMAGE WIDTH */
  height: auto;

  right: 0;  /* X position */
  bottom: 0;  /* Y position */

  opacity: 0;
  transform: translateX(40px);
  animation: benImageIn .8s ease forwards;
}

/* LOAD animation only */
@keyframes benImageIn{
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

/* Induvidual Image Positions/Width */
.om-benCard:nth-child(1) .om-benCard__media img{
  width: 486px;
  right: -10px;
  bottom: 1px;
}

.om-benCard:nth-child(2) .om-benCard__media img{
  width: 442px;
  right: 0px;
  bottom: 13px;
}

.om-benCard:nth-child(3) .om-benCard__media img{
  width: 340px;
  right: 0;
  bottom: 12px;
}

.om-benCard:nth-child(4) .om-benCard__media img{
  width: 380px;
  right: 0px;
  bottom: 29px;
}

.om-benCard:nth-child(5) .om-benCard__media img{
  width: 398px;
  right: 0;
  bottom: 29px;
}

.om-benCard:nth-child(6) .om-benCard__media img{
  width: 380px;
  right: 0px;
  bottom: 29px;
}

/* stagger */
.om-benCard:nth-child(1){ --ben-delay: .05s; }
.om-benCard:nth-child(2){ --ben-delay: .12s; }
.om-benCard:nth-child(3){ --ben-delay: .18s; }
.om-benCard:nth-child(4){ --ben-delay: .24s; }
.om-benCard:nth-child(5){ --ben-delay: .30s; }
.om-benCard:nth-child(6){ --ben-delay: .36s; }

/* =========================
   TABLET
   ========================= */

@media (max-width: 1200px){
  .om-ben__grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .om-benCard__media{
    width: 360px;
    right: -30px;
  }
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 767px){

  .om-ben__heading{
    font-size: 32px;
    line-height: 42px;
  }

  .om-ben__sub{
    font-size: 16px;
    line-height: 26px;
    max-width: 300px;
  }

  .om-ben__grid{
    grid-template-columns: 1fr;
  }

  .om-benCard{
    height: 240px;
  }

  .om-benCard__media{
    width: 280px;
    right: -20px;
    bottom: -10px;
  }
	
	/* Induvidual Image Positions/Width */
.om-benCard:nth-child(1) .om-benCard__media img{
  width: 425px;
  right: -10px;
  bottom: 1px;
}

.om-benCard:nth-child(2) .om-benCard__media img{
  width: 362px;
  right: 0px;
  bottom: 26px;
}

.om-benCard:nth-child(3) .om-benCard__media img{
  width: 332px;
  right: 0;
  bottom: 24px;
}

.om-benCard:nth-child(4) .om-benCard__media img{
  width: 339px;
  right: 0px;
  bottom: 29px;
}

.om-benCard:nth-child(5) .om-benCard__media img{
  width: 347px;
  right: 0;
  bottom: 29px;
}

.om-benCard:nth-child(6) .om-benCard__media img{
  width: 334px;
  right: 0px;
  bottom: 29px;
}
}

/* =========================================================
   HOME: Comparison (EMS vs CAS)  |  .om-comp
   ========================================================= */
.om-comp{
  padding: 80px 0;
}

.om-comp__container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px 150px; /* top | left-right | bottom */
}

.om-comp__heading{
  margin: 0 0 28px;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 275;

  /* Gradient text */
  background: linear-gradient(to right, #FFFFFF 0%, #575656 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  opacity: .92;
}

/* ---------- DESKTOP TABLE (3-column grid) ---------- */
.om-comp__table{
  display: grid;
  grid-auto-rows: auto;
  gap: 0;
  margin-top: 50px;

  position: relative;           /* needed for CAS outer border */
  --om-casW: 316px;             /* CAS width (desktop default) */
}

.om-comp__r{
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 316px 316px;
}

.om-comp__c{
  padding: 16px 24px;
  min-height: 52px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.05);
  box-sizing: border-box;
  position: relative; /* ok to keep */
}

/* Feature column cell */
.om-comp__c--feat{
  color: #979797;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;

  border-left: 1px solid rgba(255,255,255,.05);
}

/* EMS column borders */
.om-comp__c--ems{
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,.05);
  border-right: 1px solid rgba(255,255,255,.05);
}

/* CAS column background only */
.om-comp__c--cas{
  justify-content: center;
  background: rgba(105,178,255,.04);
}

/* CAS column OUTER border (single border for the whole column) */
.om-comp__table::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--om-casW);
  height: 100%;
  pointer-events: none;

  border: 1px solid transparent;
  border-image: linear-gradient(
    to bottom,
    rgba(105,178,255,.40),
    rgba(105,178,255,.10)
  ) 1;

  box-sizing: border-box;
}

/* Header row */
.om-comp__r--head .om-comp__c{
  min-height: 120px;
  align-items: flex-start;
  padding-top: 22px;
}

/* Feature HEAD should NOT show top + left border */
.om-comp__r--head .om-comp__c--feat{
  border-top: 0 !important;
  border-left: 0 !important;
}

/* EMS + CAS ONLY should have top border in header row */
.om-comp__r--head .om-comp__c--ems,
.om-comp__r--head .om-comp__c--cas{
  border-top: 1px solid rgba(255,255,255,.05);
}

/* head content wrapper */
.om-comp__c--head{
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Plan headings */
.om-comp__planName{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 500;
  background: linear-gradient(to right, #ffffff 0%, #757578 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 6px;
  display: block;
}

/* tagline ALWAYS on next line */
.om-comp__planTag{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 500;
  color: #69B2FF;
  opacity: .95;
  display: block;
  margin-top: 0;
}

/* Icons */
.om-comp__c--icon{
  justify-content: center;
}

.om-comp__mark{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* Ideal row */
.om-comp__r--ideal .om-comp__c{
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.om-comp__idealLabel{ opacity: .9; }

.om-comp__bullets{
  margin: 0;
  padding-left: 18px;
  color: #979797;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
}
.om-comp__bullets li{ margin: 4px 0; }

/* ---------- MOBILE ---------- */
.om-comp__mobile{ display:none; }

@media (max-width: 1024px){
  .om-comp__container{ padding: 0 24px; }
}

/* =========================================================
   TABLET FIX ONLY (iPad / 768px – 1024px)
   FIXES ONLY the CAS OUTER BORDER width (no other behavior change)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px){

  /* keep your tablet layout */
  .om-comp__r{
    grid-template-columns: minmax(260px, 1fr) 240px 240px;
  }

  .om-comp__c{
    padding: 14px 16px;
    min-height: 48px;
  }

  .om-comp__c--feat{
    font-size: 14px;
    line-height: 22px;
  }

  .om-comp__r--head .om-comp__c{
    min-height: 104px;
    padding-top: 18px;
  }

  .om-comp__planName{ font-size: 20px; }
  .om-comp__planTag{ font-size: 14px; }

  .om-comp__mark{
    width: 16px;
    height: 16px;
  }

  /* ✅ ONLY FIX: CAS outer border must match tablet CAS width */
  .om-comp__table{ --om-casW: 240px; }
}

@media (max-width: 767px){
  .om-comp{
    padding: 64px 0;
  }

  .om-comp__heading{
    margin-bottom: 50px;
    font-size: 28px;
    line-height: 38px;
  }

  .om-comp__table{ display:none; }
  .om-comp__mobile{
    display:block;
    max-width: 480px;
    margin: 0 auto;
  }

  /* each feature block */
  .om-compM{
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .om-compM__feature{
    padding: 12px 14px;
    color: #979797;
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .om-compM__pair{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .om-compM__cell{
    padding: 10px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    border-right: 1px solid rgba(255,255,255,.06);
  }
  .om-compM__cell:last-child{
    border-right: none;
    background: rgba(105,178,255,.04);
    position: relative;
  }
  .om-compM__cell:last-child::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-left: 1px solid transparent;
    border-image: linear-gradient(to bottom, rgba(105,178,255,.40), rgba(105,178,255,.10)) 1;
  }

  .om-compM__label{
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    opacity: .9;
  }

  .om-compM__mark{
    width: 16px;
    height: 16px;
    object-fit: contain;
    display:block;
  }

  /* plans list */
  .om-compMPlans{
    margin-top: 18px;
    padding: 10px 2px 0;
  }

  .om-compMPlan{
    margin-top: 18px;
  }

  .om-compMPlan__name{
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    opacity: .9;
    margin: 0 0 4px;
  }

  .om-compMPlan__tag{
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #69B2FF;
    margin: 0 0 10px;
    display:block;
  }

  .om-compMPlan__bullets{
    margin: 0;
    padding-left: 18px;
    color: #979797;
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 13px;
    line-height: 20px;
  }
  .om-compMPlan__bullets li{ margin: 4px 0; }
}
/* ================
   END COMPARISON
   ================ */

/* =========================================================
   HOME: Service CTA Strip (Swift)
   ========================================================= */
.om-swift{
  position: relative;
  background: #FFFFFF;
  padding: 190px 0 190px;
  overflow: hidden;
}

/* Right eclipse */
.om-swift::after{
  content:"";
  position:absolute;

  /* pull it into the section like Figma */
  right:0px;
  top:-80px;

  width:520px;
  height:calc(100% + 160px);

  background-image: var(--om-swift-eclipse);
  background-repeat:no-repeat;

  /* for tall PNGs, cover is correct (contain makes it vanish/thin) */
  background-size:cover;
  background-position:right center;

  pointer-events:none;
  transform:none;

  z-index:0;
}

/* content above */
.om-swift__container{
  position:relative;
  z-index:1;
}

/* Container matches your system */
.om-swift__container{
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  z-index: 1;
}

/* Text block width (your “~1040 content width” rule) */
.om-swift__text{
  max-width: 1040px;
}

/* Top text */
.om-swift__kicker{
  margin: 0 0 10px;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  color: #979797;
}

/* Heading */
.om-swift__heading{
  margin: 0 0 22px;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 48px;
  line-height: 58px;
  font-weight: 275;
  color: #979797;
}

/* Highlighted word gradient */
.om-swift__hHi{
  background: linear-gradient(to right, #69B2FF 100%, #575656 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Description */
.om-swift__desc{
  margin: 0;
  max-width: 847px; /* matches your screenshot width */
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 275;
  color: #979797;
  opacity: .85;
}

/* Button row (desktop button aligns into the strip area visually) */
.om-swift__btnRow{
  position: relative;
  height: 0;
}

/* Button */
.om-swift__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  color: #FFFFFF;
  background: linear-gradient(to right, #575656 0%, #1E1E1E 100%);
  position: absolute;
  right: 92px;     /* aligns with container padding */
  top: 53px;       /* sits inside the line box area */
  z-index: 2;
  white-space: nowrap;
}

/* Line box (the 1280-ish width strip inside your container) */
.om-swift__lineBox{
  position: relative;
  margin-top: 35px;
  width: 100%;
  max-width: 1280px;
  height: 85px;
  border-top: 1px solid rgba(105,178,255,.25);
  border-bottom: 1px solid rgba(105,178,255,.25);
}

/* Left note */
.om-swift__leftNote{
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  color: #69B2FF;
}

/* Vertical dividers (left-middle + right edge) */
.om-swift__lineBox::before,
.om-swift__lineBox::after{
  content:"";
  position:absolute;
  top: -18px;
  width: 1px;
  height: 123px;
  background: rgba(105,178,255,.25);
}

/* Middle divider (your screenshot shows around 469px from left) */
.om-swift__lineBox::before{
  left: 469px;
}

/* Right divider (edge) */
.om-swift__lineBox::after{
  right: 16px;
}

/* Subtle bottom grid line behind button area (the right cell feel) */
.om-swift__btn::before{
  content:"";
  position:absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 123px;
  background: rgba(105,178,255,.25);
  opacity: 1;
}

/* =========================
   Breakpoints you gave
   ========================= */

/* =========================
   Laptop (1201px – 1366px)
   ========================= */
@media (min-width: 1201px) and (max-width: 1366px){
  .om-swift__container{ padding: 0 60px; }
  .om-swift__btn{ right: 60px; }
}

/* =========================
   Tablet landscape (1025px – 1200px)
   ========================= */
@media (min-width: 1025px) and (max-width: 1200px){
  .om-swift__container{ padding: 0 48px; }
  .om-swift__btn{ right: 48px; }
  .om-swift__heading{ font-size: 44px; line-height: 54px; }
}

/* =========================
   Tablet portrait (881px – 1024px)
   ========================= */
@media (min-width: 881px) and (max-width: 1024px){
  .om-swift{
    padding: 80px 0 60px;
  }
  .om-swift__heading{ font-size: 40px; line-height: 50px; }
  .om-swift__desc{ font-size: 22px; line-height: 28px; }

  /* remove middle divider only at this size */
  .om-swift__lineBox::before{ display:none; }
}

/* =========================
   Mobile landscape (768px – 880px)
   ========================= */
@media (min-width: 768px) and (max-width: 880px){
  .om-swift__container{ padding: 0 28px; }
  .om-swift__btn{ right: 28px; }
}


/* Mobile portrait <= 767 (FOCUS) */
@media (max-width: 767px){
  .om-swift{
    padding: 70px 0 55px;
  }

  .om-swift__container{
    padding: 0 22px;
  }

  .om-swift__text{
    max-width: 100%;
  }

  .om-swift__kicker{
    font-size: 14px;
    line-height: 24px;
  }

  .om-swift__heading{
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 18px;
  }

  .om-swift__desc{
    max-width: 100%;
    font-size: 14px;
    line-height: 24px;
  }

  /* Button becomes normal block under text (like your mobile screenshot) */
  .om-swift__btnRow{
    height: auto;
    margin-top: 26px;
  }
  .om-swift__btn{
    position: static;
	  font-size:14px;
	  line-height:24px;
  }
  .om-swift__btn::before{ display:none; }

  .om-swift__lineBox{
    margin-top: 28px;
    height: 83px;
  }

  /* On mobile, remove the “469px” hard divider and keep only the right vertical */
  .om-swift__lineBox::before{
    display:none;
  }

  /* Left note sits inside the strip */
  .om-swift__leftNote{
    padding-left: 0;
	  font-size:14px;
	  line-height:24px;
  }
	
	.om-swift__lineBox::after{
		height:118px;
	}
}

/* ==================
   END SERVICE STRIP
   ================== */

/* =========================================================
   SIGN UP CTA SECTION
   ========================================================= */

.om-signup{
  position: relative;
  background: #ffffff;
  padding: 10px 0 190px;
  overflow: hidden;
}

/* container */
.om-signup__container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* card */
.om-signup__card{
  position: relative;
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;
  min-height: 446px;

  padding: 0;
  border-radius: 20px;

  background: linear-gradient(
    to bottom,
    rgba(105,178,255,.10),
    rgba(105,178,255,.20)
  );
  overflow: hidden;
	
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   ECLIPSE (IMAGE ONLY – NO OPACITY / NO ROTATION)
   ========================================================= */

.om-signup__eclipse{
  position: absolute;
  bottom: -140px;
  left: -220px;

  width: 550px;
  height: 550px;

  background: url('/wp-content/uploads/2026/01/Sign-Up-Eclipse.webp') no-repeat;
  background-size: contain;
  background-position: center;

  pointer-events: none;
  z-index: 0;
}

/* =========================================================
   CONTENT
   ========================================================= */

.om-signup__content{
  position: relative;
  z-index: 2;
  text-align: center;
}

/* heading */
.om-signup__heading{
  max-width: 650px;
  margin: 0 auto 20px;

  font-family: Poppins, system-ui, sans-serif;
  font-size: 40px;
  line-height: 50px;
  font-weight: 300;

  color: #69B2FF;
}

/* description */
.om-signup__desc{
  max-width: 800px;
  margin: 0 auto 50px;

  font-family: Poppins, system-ui, sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;

  color: #979797;
}

/* =========================================================
   BUTTON
   ========================================================= */

.om-signup__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 24px;
  min-width: 150px;

  border-radius: 100px;
  text-decoration: none;

  font-family: Poppins, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;

  background: linear-gradient(
    to right,
    #69B2FF 0%,
    #3B45F5 100%
  );
}

/* =========================================================
   DECORATIVE LINES
   ========================================================= */

/* vertical lines */
.om-signup__vline{
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 1px;

  background: linear-gradient(
    to bottom,
    rgba(105,178,255,.10),
    rgba(105,178,255,.20),
    rgba(105,178,255,.10)
  );

  z-index: 1;
}

.om-signup__vline--left{
  left: 40%;
}

.om-signup__vline--center{
  left: 60%;
}

/* horizontal lines */
.om-signup__hline{
  position: absolute;
  left: 0px;
  right: 0px;
  height: 1px;

  background: linear-gradient(
    to right,
    rgba(105,178,255,.10),
    rgba(105,178,255,.20),
    rgba(105,178,255,.10)
  );

  z-index: 1;
}

.om-signup__hline--top{
  top: 64%;
}

.om-signup__hline--bottom{
  bottom: 15%;
}

/* =========================================================
   SIGN UP CTA — TABLET ONLY
   ========================================================= */
@media (min-width: 769px) and (max-width: 1200px){

  .om-signup__vline--left{
    left: 35%;
  }

  .om-signup__vline--center{
    left: 64%;
  }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px){

  .om-signup{
    padding: 0 0 190px;
  }

  .om-signup__container{
    padding: 0 10px;
  }

  .om-signup__card{
    min-height: auto;
    padding: 40px 20px;
    border-radius: 16px;
	width:88%;
  }

  .om-signup__heading{
    font-size: 24px;
	  line-height:34px
  }

  .om-signup__desc{
    font-size: 12px;
	line-height:22px;
	min-width: 115px;
  }

  .om-signup__btn{
    font-size: 16px;
	line-height:26px;
  }
	
   .om-signup__hline {
    position: absolute;
    left: 0px;
    right: 0px;
	}
	
	.om-signup__vline {
    position: absolute;
    top: 0px;
		bottom: 0px;}

  .om-signup__vline--left{
    left: 50%;
  }
	
	.om-signup__hline--bottom{
		bottom: 7%;
	}

	
	.om-signup__hline--top{
	 top: 70%;
	}
	
  .om-signup__vline--center{
    left: 17%; 
  }
	
	.om-signup__vline--left {
		left: 81%;
	}

}


/* =========================================================
   HOME: Contact Cards (Final CTA) | .om-contact
   ========================================================= */

.om-contact{
  position: relative;
  overflow: hidden;
  padding: 190px 0; /* keep your section rhythm; adjust ONLY if you specify different */
}

/* background ellipse images (desktop only by default) */
.om-contact::before,
.om-contact::after{
  content:"";
  position:absolute;
  top: 0;
  width: 300px;
  height: 549px;
  background-repeat:no-repeat;
  background-size:contain;
  opacity: 1;
  pointer-events:none;
  z-index: 0;
}

.om-contact::before{
  left: 0;
  background-image: url("/wp-content/uploads/2026/01/CTA-PC-Left-image-scaled.webp");
}

.om-contact::after{
  right: 0;
  background-image: url("/wp-content/uploads/2026/01/CTA-PC-Right-Image-scaled.webp");
}

/* container */
.om-contact__container{
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px; /* desktop/laptop padding */
  text-align: center;
}

/* pill */
.om-contact__pill{
  width: 156px;
  margin: 0 auto 16px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 10px 16px;
  border-radius: 100px;

  background: linear-gradient(to right,
    rgba(255,255,255,.05),
    rgba(105,178,255,.20)
  );
  border: 1px solid transparent;
  box-shadow: 0 0 10px 0 rgba(105,178,255,.20);

  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;

  background-clip: padding-box;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  color: transparent;

  /* text gradient */
  background-image:
    linear-gradient(to right,
      #FFFFFF 0%,
      #69B2FF 100%
    ),
    linear-gradient(to right,
      rgba(255,255,255,.05),
      rgba(105,178,255,.20)
    );
  background-origin: border-box;
  background-clip: text, padding-box;
}



/* heading */
.om-contact__heading{
  margin: 0 0 10px;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 275;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0;
  text-align:center;

  background: linear-gradient(to right, #FFFFFF 0%, #575656 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  opacity: .95;
}

/* subtext */
.om-contact__subtext{
  margin: 0 0 50px; /* spacing before cards */
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
  text-align:center;

  background: linear-gradient(to right, #979797 0%, #69B2FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* cards wrapper */
.om-contact__cards{
  display:flex;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
  gap: 20px;
}

/* card */
.om-conCard{
  width: 413px;
  height: 223px;
  border-radius: 20px;
  background: rgba(255,255,255,.02);
  padding: 20px;

  text-align:left;
  display:flex;
  flex-direction:column;
}

/* Card hover: apply same hover background to every card */
.om-conCard{
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.om-conCard:hover{
  background: rgba(255,255,255,.03); /* match the first card hover feel */
  box-shadow: 0 0 0 1px rgba(105,178,255,.20) inset;
}

/* icon */
.om-conCard__icon{
  width: 48px;
  height: 48px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin: 0 0 68px;
}

.om-conCard__iconEl img,
.om-conCard__iconEl svg{
  width:48px;
  height:48px;
  display:block;
}

/* title */
.om-conCard__title{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;

  background: linear-gradient(to right, #FFFFFF 0%, #575656 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;

  margin: 0 0 8px;
}

/* description */
.om-conCard__desc{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 275;
  font-size: 14px;
  line-height: 24px;
  color: rgba(151,151,151,.9);

  margin: 0 0 16px;
}

/* links row area */
.om-conCard__links{
  margin-top:0;
  display:flex;
  flex-wrap:wrap;
  gap: 15px; /* gap between link items */
}

/* each link item */
.om-conLink{
  display:flex;
  align-items:center;
  gap: 4px;
  white-space: nowrap;     /* IMPORTANT */
  color: #69B2FF;          /* icon + text both blue */
}

.om-conLink__ico{
  width: 20px;
  height: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.om-conLink__icoEl img,
.om-conLink__icoEl svg{
  width:20px;
  height:20px;
  display:block;
}

/* link text */
.om-conLink__txt{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;

  color: #69B2FF;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.om-conLink__txt--plain{
  text-decoration: none;
  color: rgba(151,151,151,.9);
}

/* =========================================================
   MOBILE (as you specified)
   ========================================================= */
@media (max-width: 767px){

  .om-contact{
    padding: 120px 0;
  }

  /* mobile padding 10px */
  .om-contact__container{
    padding: 0 20px;
  }

  /* hide desktop ellipses on mobile */
  .om-contact::before,
  .om-contact::after{
    display:none;
  }

  /* pill mobile */
  .om-contact__pill{
    width: 141px;
    font-size: 14px;
    line-height: 24px;
  }

  /* heading mobile */
  .om-contact__heading{
    font-size: 32px;
    line-height: 42px;
  }

  /* subtext mobile */
  .om-contact__subtext{
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  /* stacked cards */
  .om-contact__cards{
    flex-direction:column;
    align-items:center;
    gap: 30px; /* your “~30px” between cards */
  }

  .om-conCard{
    width: 100%;
    max-width: 345px;
    height: 237px;
    padding: 15px; /* mobile padding */
  }

  /* links mobile */
  .om-conCard__links{
    gap: 15px;
  }
	
  .om-conCard__icon{
    margin: 0 0 76px;
   }

  .om-conLink__ico{
    width: 16px;
    height: 16px;
  }

  .om-conLink__icoEl img,
  .om-conLink__icoEl svg{
    width:16px;
    height:16px;
  }

  .om-conLink__txt{
    font-size: 14px;
    line-height: 24px;
    text-underline-offset: 2px;
  }
}