/* atlas-page styles */

section#hero {
    background: #E7FFF9;
}

section#hero h1::after, section#hero p.subheading::after, section#hero p.below.subheading::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background-color: #000;
    margin: 10px 0;
}

section h2{
    font-weight: 500;
    font-size: 50px;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 0px;
}

section h2 strong{
  font-weight: 600;
}




@media screen and (min-width: 1155px) {
    section#hero {
  padding-bottom: 170px;
}

.page-atlas section#hero .grid .half.content-container {
   grid-column: auto / span 5;
   position: relative;
}

.page-atlas section#hero .grid .half.content-container h1{
    font-size: 50px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0%;
    margin-bottom: 0px;
}
.page-atlas section#hero .grid .start-7.half.image-container{
    grid-column-start: 6;
}

.page-atlas section#hero .grid .half.image-container {
   position: relative;
    grid-column: auto / span 7; 
}
.page-atlas section#hero .grid .half.image-container > div{
    position: absolute;
        max-width: 105%;
        left: -11%;
        right: 0;
        top: 80px;
        z-index: 9;
        background: #B3FFED;
        padding: 15px;
        border-radius: 13px;
}
}

.page-atlas section#hero .grid .half.content-container #button-container{
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.page-atlas section#hero .grid .half.content-container p.subheading{
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
}

.page-atlas section#hero .grid .half.content-container p.below.subheading{
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
}

.page-atlas section#hero .grid .half.content-container .list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  margin-top: 15px;
}

.page-atlas section#hero .grid .half.content-container .list li {
  position: relative;
  padding-left: 15px; /* space for icon */
  margin-bottom: 8px;
  font-family: DM Mono;
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    letter-spacing: 0%;
}

.page-atlas section#hero .grid .half.content-container .list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2695 3.7305L5.50025 0L3.7305 3.7305L0 5.50025L3.7305 7.2695L5.50025 11L7.2695 7.2695L11 5.50025L7.2695 3.7305Z' fill='black'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

img.direction {
    position: absolute;
    left: 68%;
    z-index: 10;
}


/* ---- --------------------------------------------Sections ------------------------------------------------------------ */

/**
 * Atlas — Why AI SDRs Fail Section Styles
 */

/* ---- Section ---- */
.atlas-fail {
  position: relative;
  background: #FFFCE6;
  padding: 100px 0;
  overflow: hidden;
}

.atlas-fail__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px;
  position: relative;
}

/* ---- Title Card ---- */
.atlas-fail__title-wrap {
  display: flex; justify-content: center;
  position: relative; z-index: 5;
}
.atlas-fail__title-card {
  background: #fff;
    border: 3px solid #000;
    border-radius: 20px;
    padding: 16px 40px;
    z-index: 10;
    box-shadow: 4px 4px 0px 0px #000000;
}
.atlas-fail__title-card h2 {
    font-weight: 500;
    font-size: 50px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 0px;
}
.atlas-fail__title-card h2 strong { font-weight: 700; }

/* ---- Connectors — positioned below title card ---- */
.atlas-fail__connectors {
  position: absolute;
  /* top: 138px; */
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  /* max-width: 1280px; */
  height: 180px;
  z-index: 2;
  pointer-events: none;
  padding: 0 24px;
}
.atlas-fail__conn {
  position: absolute;
}
.atlas-fail__conn--left {
  top: 50%;
    left: 22%;
  /* margin-left: -290px; */
  transform: translateX(-100%);
}
.atlas-fail__conn--cl {
  top: 22px;
  left: 22%;
  /* margin-left: -50px; */
  transform: translateX(-50%);
}
.atlas-fail__conn--cr {
  top: 22px;
  left: 80%;
  /* margin-left: 50px; */
  transform: translateX(-50%);
}
.atlas-fail__conn--right {
  top: 50%;
  left: 78%;
  /* margin-left: 290px; */
}

/* ---- Circles ---- */
.atlas-fail__circles {
  position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 30px auto 0;
    height: 400px;
}
.atlas-fail__circle { position: absolute; }

.atlas-fail__circle--1 { left: 0;    top: 10px; }
.atlas-fail__circle--2 { left: 27%;  top: 130px; }
.atlas-fail__circle--3 { right: 27%; top: 130px; }
.atlas-fail__circle--4 { right: 0;   top: 10px; }

.atlas-fail__ring {
  width: 250px;
    height: 250px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    border: 3px solid;
    font-family: DM Mono;
    font-weight: 500;
    font-size: 23px;
    line-height: 150%;
    text-align: center;
}

.atlas-fail__ring--blue { border-color: #2596FF; background: #E5F2FF;box-shadow: 3px 4px 0px 0px #2596FF; }
.atlas-fail__ring--pink { border-color: #EE1448; background: #FFECE8;box-shadow: 4px 4px 0px 0px #EE1448; }
.atlas-fail__ring--rose { border-color: #FF739D; background: #FFEBF1;box-shadow: 4px 4px 0px 0px #FF739D; }
.atlas-fail__ring--teal { border-color: #01E7B0; background: #E7FFF9;box-shadow: 4px 4px 0px 0px #01E7B0; }


/* ===========================================================
   ANIMATIONS
   =========================================================== */

/* Title */
.atlas-fail__title-card {
  opacity: 0; transform: translateY(-30px);
  transition: opacity .6s ease, transform .6s ease;
}
.atlas--visible .atlas-fail__title-card {
  opacity: 1; transform: translateY(0);
}

/* Connectors — fade in + slide down */
.atlas-fail__conn {
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
}
.atlas-fail__conn--left {
  transform: translateX(-100%) translateY(-10px);
  transition-delay: .4s;
}
.atlas-fail__conn--cl {
  transform: translateX(-50%) translateY(-10px);
  transition-delay: .5s;
}
.atlas-fail__conn--cr {
  transform: translateX(-50%) translateY(-10px);
  transition-delay: .6s;
}
.atlas-fail__conn--right {
  transform: translateY(-10px);
  transition-delay: .7s;
}
.atlas--visible .atlas-fail__conn--left {
  opacity: 1; transform: translateX(-100%) translateY(0);
}
.atlas--visible .atlas-fail__conn--cl {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.atlas--visible .atlas-fail__conn--cr {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.atlas--visible .atlas-fail__conn--right {
  opacity: 1; transform: translateY(0);
}

/* Circles — bounce in staggered */
.atlas-fail__circle {
  opacity: 0; transform: scale(0.2);
  transition: opacity .5s ease, transform .65s cubic-bezier(.34,1.56,.64,1);
}
.atlas--visible .atlas-fail__circle--1 { opacity: 1; transform: scale(1); transition-delay: .7s; }
.atlas--visible .atlas-fail__circle--2 { opacity: 1; transform: scale(1); transition-delay: .95s; }
.atlas--visible .atlas-fail__circle--3 { opacity: 1; transform: scale(1); transition-delay: 1.2s; }
.atlas--visible .atlas-fail__circle--4 { opacity: 1; transform: scale(1); transition-delay: 1.45s; }

/* Gentle float */
@keyframes atlas-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.atlas--visible .atlas-fail__circle--1 .atlas-fail__ring { animation: atlas-float 4s ease-in-out 1.5s infinite; }
.atlas--visible .atlas-fail__circle--2 .atlas-fail__ring { animation: atlas-float 4.5s ease-in-out 1.7s infinite; }
.atlas--visible .atlas-fail__circle--3 .atlas-fail__ring { animation: atlas-float 4s ease-in-out 1.9s infinite; }
.atlas--visible .atlas-fail__circle--4 .atlas-fail__ring { animation: atlas-float 4.5s ease-in-out 2.1s infinite; }


/* ---- Tagline ---- */
.atlas-fail__tagline {
  display: flex; align-items: center; justify-content: center;
  gap: 0; max-width: 1200px; margin: 50px auto 0;
  position: relative; z-index: 5;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s ease 1.6s, transform .5s ease 1.6s;
}
.atlas--visible .atlas-fail__tagline { opacity: 1; transform: translateY(0); }

.atlas-fail__tagline-line { flex: 1; height: 2px; background: #D8D8D8; }
.atlas-fail__tagline-dot { width: 10px; height: 10px; background: #D8D8D8; border-radius: 50%; flex-shrink: 0; margin: 0 -1px; }

/* Animated gradient pill */
.atlas-fail__tagline-pill {
  position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 60px;
    line-height: 150%;
    font-size: 28px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border-radius: 50px;
    white-space: nowrap;
    z-index: 0;
    box-shadow: 0 0 12px 2px rgba(255, 85, 0, .35), 0 0 24px 4px rgba(255, 85, 0, .15);
    animation: atlas-glow-pulse 2.5s ease-in-out infinite;
    margin: 0px 30px;
}
.atlas-fail__tagline-pill::before,
.atlas-fail__tagline-pill::after {
  content: ''; position: absolute; inset: -4px; border-radius: 54px; z-index: -1;
}
.atlas-fail__tagline-pill::before {
  background: conic-gradient(from var(--atlas-border-angle,0deg), #FF6106,#FFEC3D,#FF739D,#01E7B0,#FF6106);
  animation: atlas-border-spin 3s linear infinite;
}
.atlas-fail__tagline-pill::after { inset: 0; background: #fff; border-radius: 50px; }
.atlas-fail__tagline-pill > * { position: relative; z-index: 1; }
.atlas-fail__tagline-pill strong { font-weight: 700;margin-right: 8px;}

@keyframes atlas-border-spin { to { --atlas-border-angle: 360deg; } }
@keyframes atlas-glow-pulse {
  0%,100% { box-shadow: 0 0 12px 2px rgba(255,85,0,.35), 0 0 24px 4px rgba(255,85,0,.15); }
  50% { box-shadow: 0 0 18px 4px rgba(255,85,0,.5), 0 0 36px 8px rgba(255,85,0,.2); }
}
@property --atlas-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }


/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .atlas-fail__title-card, .atlas-fail__circle, .atlas-fail__tagline {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .atlas-fail__conn { opacity: 1 !important; transition: none !important; }
  .atlas-fail__conn--left { transform: translateX(-100%) !important; }
  .atlas-fail__conn--cl { transform: translateX(-50%) !important; }
  .atlas-fail__conn--cr { transform: translateX(-50%) !important; }
  .atlas-fail__conn--right { transform: none !important; }
  .atlas-fail__ring { animation: none !important; }
  .atlas-fail__tagline-pill, .atlas-fail__tagline-pill::before { animation: none !important; }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .atlas-fail__ring { width: 180px; height: 180px; font-size: 14px; padding: 26px; }
  .atlas-fail__circle--2 { left: 23%; }
  .atlas-fail__circle--3 { right: 23%; }
}
@media (max-width: 768px) {
  .atlas-fail { padding: 50px 16px 60px; }
  .atlas-fail__title-card { padding: 28px 32px; }
  .atlas-fail__title-card h2 { font-size: 26px; }
  .atlas-fail__connectors { display: none; }
  .atlas-fail__circles {
    height: auto; display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px; margin-top: 32px;
  }
  .atlas-fail__circle { position: static; justify-self: center; }
  .atlas-fail__ring { width: 160px; height: 160px; font-size: 13px; padding: 22px; }
  .atlas-fail__tagline { margin-top: 36px; }
  .atlas-fail__tagline-pill { font-size: 14px; padding: 12px 20px; }
  .atlas-fail__tagline-pill::before { inset: -3px; border-radius: 52px; }
  .atlas-fail__tagline-pill::after { border-radius: 48px; }
}
@media (max-width: 480px) {
  .atlas-fail__circles { grid-template-columns: 1fr; }
  .atlas-fail__ring { width: 180px; height: 180px; font-size: 14px; }
  .atlas-fail__tagline-pill { font-size: 13px; padding: 11px 18px; white-space: normal; text-align: center; }
}


/*--------------What Atlas Is/Is Not section=------------------*/

.atlas-wiin {
  text-align: center;  
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #ffffff 50%, #2596FF 50%);
  padding: 100px 0;
  margin: 0 auto;
}

/* ---- Decorative ---- */
svg.decor{
    position: absolute;
}

svg.decor.one{
    top: 150px;
    left: 0;
}

svg.decor.two{
    top:0;
    right: 0;
}

/* ---- Title ---- */

h2.atlas-wiin__title {
    margin-bottom: 80px;
}

/* ---- Grid ---- */
.atlas-wiin__grid {
  display: flex; gap: 50px; max-width: 1280px;
  margin: 0 auto 56px; align-items: flex-start;
  position: relative; z-index: 1;
}

/* ---- Cards ---- */
.atlas-wiin__card { background: #fff; border-radius: 18px; }

.atlas-wiin__card--left {
    flex: 1;
    border-top: 5px solid #FF5500;
    border-radius: 25px;
    box-shadow: 0px 0px 13px 0px #FFC37D;
}

.atlas-wiin__card-inner {
  background: #FEE9D0;padding: 40px 60px;border-radius: 25px;
}

.atlas-wiin__card--right {
  flex: 0.85; align-self: center;
  padding: 30px 40px 60px;
  box-shadow: 0 6px 28px rgba(0,0,0,.08);
  border-radius: 16px;
}

/* ---- Headings ---- */
.atlas-wiin__heading {
    font-weight: 600;
    font-size: 37px;
    line-height: 150%;
    letter-spacing: 0px;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}
.atlas-wiin__heading span{
    padding:5px 30px;
    background-color: #fff;
}

h3.atlas-wiin__heading.atlas-wiin__heading--dark span{
    background-color: #F8F8F8;
}

.atlas-wiin__heading--orange { color: #FF5500; }
.atlas-wiin__heading--dark   { color: #000; }

/* ---- Lists ---- */
.atlas-wiin__list {
  list-style: none; display: flex;
  flex-direction: column; gap: 30px; margin: 0px;
}
.atlas-wiin__list--cross { gap: 10px; }

.atlas-wiin__item {
  display: flex; align-items: center; gap: 14px;
  background: #fff; padding: 10px 15px;
  border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
    font-weight: 400;
    font-size: 29px;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: middle;
}

.atlas-wiin__list--cross .atlas-wiin__item {
  background: #FDFDFD;
 box-shadow: 0px 0px 4px 0px #82828240;
  /* border-bottom: 1px solid #eaeaea; */
}
.atlas-wiin__item--x2,
.atlas-wiin__item--x3 { margin-top: -4px; }

.atlas-wiin__icon {
  flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center;
}


/* ===========================================================
   ANIMATIONS — keyed to .atlas--visible (added by engine)
   ONLY GPU props: transform + opacity
   =========================================================== */

/* ---- Check list: slide in from left, staggered ---- */
.atlas-wiin__list--check .atlas-wiin__item {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .5s ease, transform .5s ease;
}
.atlas-wiin__icon--check {
  opacity: 0;
  transform: scale(0);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* Visible → items slide in */
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item {
  opacity: 1; transform: translateX(0);
}
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(1) { transition-delay: .10s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(2) { transition-delay: .30s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(3) { transition-delay: .50s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(4) { transition-delay: .70s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(5) { transition-delay: .90s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(6) { transition-delay: 1.10s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(7) { transition-delay: 1.30s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(8) { transition-delay: 1.50s; }

/* Visible → checkmarks pop */
.atlas--visible .atlas-wiin__icon--check {
  opacity: 1; transform: scale(1);
}
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(1) .atlas-wiin__icon--check { transition-delay: .35s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(2) .atlas-wiin__icon--check { transition-delay: .55s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(3) .atlas-wiin__icon--check { transition-delay: .75s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(4) .atlas-wiin__icon--check { transition-delay: .95s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(5) .atlas-wiin__icon--check { transition-delay: 1.15s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(6) .atlas-wiin__icon--check { transition-delay: 1.35s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(7) .atlas-wiin__icon--check { transition-delay: 1.55s; }
.atlas--visible .atlas-wiin__list--check .atlas-wiin__item:nth-child(8) .atlas-wiin__icon--check { transition-delay: 1.75s; }


/* ---- Cross list: bouncy drop from above → land rotated ---- */
.atlas-wiin__item--x1,
.atlas-wiin__item--x2,
.atlas-wiin__item--x3 {
  opacity: 0;
  transform: translateY(-70px) rotate(0deg);
  transition: opacity .45s ease, transform .6s cubic-bezier(.34, 1.4, .64, 1);
}

.atlas--visible .atlas-wiin__item--x1 {
  opacity: 1; transform: translateY(0) rotate(-4deg);
  transition-delay: .25s;
}
.atlas--visible .atlas-wiin__item--x2 {
  opacity: 1; transform: translateY(0) rotate(0.6deg);
  transition-delay: .45s;
}
.atlas--visible .atlas-wiin__item--x3 {
  opacity: 1; transform: translateY(0) rotate(-5deg);
  transition-delay: .65s;
}


/* ---- Accessibility: reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .atlas-wiin__list--check .atlas-wiin__item,
  .atlas-wiin__icon--check,
  .atlas-wiin__item--x1,
  .atlas-wiin__item--x2,
  .atlas-wiin__item--x3 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .atlas-wiin__tagline-pill,
  .atlas-wiin__tagline-pill::before {
    animation: none !important;
  }
}


/* ---- Tagline ---- */
.atlas-wiin__tagline {
  display: flex; align-items: center; justify-content: center; max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 1;
}
.atlas-wiin__tagline-line {
  flex: 1; height: 2px; background: #D8D8D8; border-radius: 1px;
}
.atlas-wiin__tagline-dot {
  width: 10px; height: 10px; background: #D8D8D8;
  border-radius: 50%; flex-shrink: 0;
}

/* Animated gradient border pill */
.atlas-wiin__tagline-pill {
 position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 60px;
    line-height: 150%;
    font-size: 28px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border-radius: 50px;
    white-space: nowrap;
    z-index: 0;
    box-shadow: 0 0 12px 2px rgba(255, 85, 0, .35), 0 0 24px 4px rgba(255, 85, 0, .15);
    animation: atlas-glow-pulse 2.5s ease-in-out infinite;
    margin: 0px 30px;
}


.atlas-wiin__tagline-pill::before,
.atlas-wiin__tagline-pill::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 54px;
  z-index: -1;
}

.atlas-wiin__tagline-pill::before {
  background: conic-gradient(
    from var(--atlas-border-angle, 0deg),
    #FF6106, #FFEC3D, #FF739D, #01E7B0, #FF6106
  );
  animation: atlas-border-spin 3s linear infinite;
}

.atlas-wiin__tagline-pill::after {
  inset: 0;
  background: #fff;
  border-radius: 50px;
}

.atlas-wiin__tagline-pill > * {
  position: relative; z-index: 1;
}
.atlas-wiin__tagline-pill strong {
  font-weight: 600; margin-right: 5px;
}

@keyframes atlas-border-spin {
  to { --atlas-border-angle: 360deg; }
}

@keyframes atlas-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 12px 2px rgba(255, 85, 0, .35),
                0 0 24px 4px rgba(255, 85, 0, .15);
  }
  50% {
    box-shadow: 0 0 18px 4px rgba(255, 85, 0, .5),
                0 0 36px 8px rgba(255, 85, 0, .2);
  }
}

@property --atlas-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .atlas-wiin__grid { gap: 28px; }
  .atlas-wiin__card-inner { padding: 28px 22px 24px; }
  .atlas-wiin__card--right { padding: 28px 22px 24px; }
}

@media (max-width: 768px) {
  .atlas-wiin { padding: 40px 16px 50px; }
  .atlas-wiin__title { font-size: 26px; margin-bottom: 32px; }
  .atlas-wiin__grid { flex-direction: column; gap: 24px; padding: 0 16px; }
  .atlas-wiin__card--left,
  .atlas-wiin__card--right { flex: none; width: 100%; }
  .atlas-wiin__card--right { align-self: auto; }
  .atlas-wiin__tagline-pill { font-size: 15px; padding: 12px 24px; }
  .atlas-wiin__tagline-pill::before { inset: -3px; border-radius: 52px; }
  .atlas-wiin__tagline-pill::after  { border-radius: 48px; }
  .atlas-wiin__flake--tl { width: 60px; height: 60px; }
  .atlas-wiin__flake--tr { width: 70px; height: 70px; }
}

/**
 * Atlas — How Atlas Thinks Section Styles
 * File: assets/css/atlas/atlas-think.css
 */

/* ---- Reset ---- */
.atlas-think *, .atlas-think *::before, .atlas-think *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ---- Section ---- */
.atlas-think {
  position: relative;
  background: #FFEBF1;
  padding: 100px 0px;
  overflow: hidden;
}
.atlas-think__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ---- Title ---- */
.atlas-think__title {
    text-align: center;
    font-weight: 500;
    font-size: 50px;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: middle;
}
.atlas-think__title strong {
  font-weight: 600;
}

/* ---- Pipeline ---- */
.atlas-think__pipeline {
     display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 1172px;
    margin: 75px auto 60px;
    position: relative;
}

/* ---- Steps ---- */
.atlas-think__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  width: 200px;
  position: relative;
  z-index: 2;
}

/* ---- Circles — ALL same size ---- */
.atlas-think__circle {
  width: 206px;
  height: 206px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.atlas-think__circle--orange { background: #FF5500; }
.atlas-think__circle--blue   { background: #2596FF; }
.atlas-think__circle--red    { background: #EE1448; }
.atlas-think__circle--pink   { background: #FF739D; }

/* ---- Labels & Descriptions ---- */
.atlas-think__label {
    font-weight: 500;
    font-size: 35px;
    line-height: 150%;
    letter-spacing: 0%;
}
.atlas-think__desc {
  font-family: DM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
}

/* ---- Connecting Bars: 3 short gradient bars between circles ---- */
.atlas-think__bar {
  flex: 1;
  height: 22px;
  border-radius: 7px;
  z-index: 1;
  margin-left: -20px;
  margin-right: -20px;
  align-self: flex-start;
  margin-top: 90px;
  position: relative;
  overflow: hidden;
}
.atlas-think__bar--1 {
  background: linear-gradient(90deg, #F97316, #4AA3E8);
}
.atlas-think__bar--2 {
  background: linear-gradient(90deg, #4AA3E8, #E63B6F);
}
.atlas-think__bar--3 {
  background: linear-gradient(90deg, #E63B6F, #F49CB8);
}

/* Subtle shimmer overlay — left to right loop */
.atlas-think__bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  border-radius: 7px;
  animation: atlas-bar-shimmer 2.5s ease-in-out infinite;
  animation-delay: inherit;
}
.atlas-think__bar--1::after { animation-delay: 0s; }
.atlas-think__bar--2::after { animation-delay: .3s; }
.atlas-think__bar--3::after { animation-delay: .6s; }

@keyframes atlas-bar-shimmer {
  0%   { left: -100%; }
  60%  { left: 100%; }
  100% { left: 100%; }
}

/* ---- CTA Button ---- */
.atlas-think #button-container{
    justify-content: center;
}


/* ===========================================================
   ANIMATIONS
   =========================================================== */

/* Title */
.atlas-think__title {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity .6s ease, transform .6s ease;
}
.atlas--visible .atlas-think__title {
  opacity: 1; transform: translateY(0);
}

/* Steps — scale up staggered left to right */
.atlas-think__step {
  opacity: 0;
  transform: scale(0.3) translateY(30px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.atlas--visible .atlas-think__step--1 { opacity: 1; transform: scale(1) translateY(0); transition-delay: .3s; }
.atlas--visible .atlas-think__step--2 { opacity: 1; transform: scale(1) translateY(0); transition-delay: .5s; }
.atlas--visible .atlas-think__step--3 { opacity: 1; transform: scale(1) translateY(0); transition-delay: .7s; }
.atlas--visible .atlas-think__step--4 { opacity: 1; transform: scale(1) translateY(0); transition-delay: .9s; }

/* Bars — grow from left, staggered */
.atlas-think__bar {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity .4s ease, transform .5s ease;
}
.atlas--visible .atlas-think__bar--1 { opacity: 1; transform: scaleX(1); transition-delay: .45s; }
.atlas--visible .atlas-think__bar--2 { opacity: 1; transform: scaleX(1); transition-delay: .65s; }
.atlas--visible .atlas-think__bar--3 { opacity: 1; transform: scaleX(1); transition-delay: .85s; }

/* CTA — fade up */
.atlas-think__cta-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease 1.1s, transform .5s ease 1.1s;
}
.atlas--visible .atlas-think__cta-wrap {
  opacity: 1; transform: translateY(0);
}


/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .atlas-think__title,
  .atlas-think__step,
  .atlas-think__bar,
  .atlas-think__cta-wrap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .atlas-think__bar::after { animation: none !important; }
}


/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .atlas-think__step { width: 170px; }
  .atlas-think__circle { width: 140px; height: 140px; }
  .atlas-think__bar { margin-top: 63px; }
  .atlas-think__label { font-size: 20px; }
}

@media (max-width: 768px) {
  .atlas-think { padding: 60px 16px 70px; }
  .atlas-think__title { font-size: 30px; margin-bottom: 48px; }

  .atlas-think__pipeline {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .atlas-think__step { width: 100%; max-width: 260px; }
  .atlas-think__circle { width: 130px; height: 130px; }

  /* Bars become vertical on mobile */
  .atlas-think__bar {
    width: 14px;
    height: 40px;
    flex: none;
    margin: -10px 0;
    margin-left: 0;
    margin-right: 0;
    align-self: center;
    margin-top: 0;
    transform-origin: top center;
  }
  .atlas-think__bar--1 { background: linear-gradient(180deg, #F97316, #4AA3E8); }
  .atlas-think__bar--2 { background: linear-gradient(180deg, #4AA3E8, #E63B6F); }
  .atlas-think__bar--3 { background: linear-gradient(180deg, #E63B6F, #F49CB8); }
  .atlas-think__cta { font-size: 15px; padding: 14px 32px; }
}

/**
 * Section 4: Your Control, Always
 * Connector tree with staggered cards, blinking sparkle stars, gradient tagline pill.
 */

.atlas-ctrl {
  position: relative;
  background: #fff;
  padding: 70px 24px 80px;
  overflow: hidden;
}
.atlas-ctrl__inner {
  max-width: 960px; margin: 0 auto; position: relative;
}

/* ---- Sparkle Stars (right side) ---- */
.atlas-ctrl__sparkles {
  position: absolute; top: 180px; right: -135px;
  z-index: 4; pointer-events: none;
}
.atlas-ctrl__star--sm {
  position: absolute; top: -15px; right: 90px;
}
.atlas-ctrl__star--lg {
  position: absolute; top: 20px; right: 0;
}
/* Blinking: stars swap color/opacity in a loop */
.atlas-ctrl__star--sm path {
  animation: atlas-star-blink-sm 2.4s ease-in-out infinite;
}
.atlas-ctrl__star--lg path {
  animation: atlas-star-blink-lg 2.4s ease-in-out infinite;
}
@keyframes atlas-star-blink-sm {
  0%, 100% { fill: #E7FFF9; opacity: .35; }
  50%      { fill: #01E7B0; opacity: 1; }
}
@keyframes atlas-star-blink-lg {
  0%, 100% { fill: #01E7B0; opacity: 1; }
  50%      { fill: #E7FFF9; opacity: .35; }
}

/* ---- Title Card ---- */
.atlas-ctrl__title-wrap {
  display: flex; justify-content: center;
  position: relative; z-index: 5;
}
.atlas-ctrl__title-card {
  background: #01E7B0; border: 5px solid #000000;
  border-radius: 20px; padding: 25px 0;width: 80%;
  text-align: center; box-shadow: 3px 4px 0px 0px #000000;
}

.atlas-ctrl__title-card h2 {
  font-weight: 600;
  font-size: 60px;
  line-height: 150%;
  letter-spacing: 0%;
  margin-bottom: 0px;
}

/* ---- Body: connector SVG + cards ---- */
.atlas-ctrl__body {
  position: relative;
  width: 100%;
  margin-top: -75px;
}
.atlas-ctrl__connectors {
  display: block;
  width: 35%;
  height: auto;
  pointer-events: none;
  margin-left: 3%;
}

/* ---- Cards ---- */
.atlas-ctrl__card {
  position: absolute;
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff;
  border-radius: 10px; padding: 15px 30px;
  font-size: 30px; font-weight: 400; color: #000;
  box-shadow: 0px 0px 6px 0px #00000040;
  white-space: nowrap;
  z-index: 3;
  transform: translateY(-50%);
}
/* .atlas-ctrl__card-icon { flex-shrink: 0; width: 20px; height: 20px; } */

/* Positions: derived from Figma dot coords (SVG 300×469, displayed at 26% width + 15% margin) */
.atlas-ctrl__card--1 { top: 34.33%; left: calc(8% + 26% * 80 / 300 + 14px); }
.atlas-ctrl__card--2 { top: 55.01%; left: calc(11% + 26% * 138 / 300 + 14px); }
.atlas-ctrl__card--3 { top: 76.33%; left: calc(14% + 26% * 224 / 300 + 14px); }
.atlas-ctrl__card--4 { top: 98.72%; left: calc(17% + 26% * 294 / 300 + 14px); }

/* ---- Tagline Pill ---- */
.atlas-ctrl__tagline {
  display: flex; align-items: center; justify-content: center;
  gap: 0; max-width: 1280px; margin: 100px auto 0;
  position: relative; z-index: 5;
}
.atlas-ctrl__tagline-line { flex: 1; height: 2px; background: #D8D8D8; }
.atlas-ctrl__tagline-dot {
  width: 10px; height: 10px; background: #D8D8D8;
  border-radius: 50%; flex-shrink: 0; margin: 0 -1px;
}
.atlas-ctrl__tagline-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 60px;
    line-height: 150%;
    font-size: 28px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border-radius: 50px;
    white-space: nowrap;
    z-index: 0;
    box-shadow: 0 0 12px 2px rgba(255, 85, 0, .35), 0 0 24px 4px rgba(255, 85, 0, .15);
    animation: atlas-glow-pulse 2.5s ease-in-out infinite;
    margin: 0px 30px;
}

.atlas-ctrl__tagline-pill::before,
.atlas-ctrl__tagline-pill::after {
  content: ''; position: absolute; inset: -4px; border-radius: 54px; z-index: -1;
}
.atlas-ctrl__tagline-pill::before {
  background: conic-gradient(from var(--atlas-border-angle,0deg), #FF6106,#FFEC3D,#FF739D,#01E7B0,#FF6106);
  animation: atlas-border-spin 3s linear infinite;
}
.atlas-ctrl__tagline-pill::after {
  inset: 0; background: #fff; border-radius: 50px;
}
@keyframes atlas-border-spin { to { --atlas-border-angle: 360deg; } }
@keyframes atlas-glow-pulse {
  0%,100% { box-shadow: 0 0 12px 2px rgba(255,85,0,.35), 0 0 24px 4px rgba(255,85,0,.15); }
  50%     { box-shadow: 0 0 18px 4px rgba(255,85,0,.5), 0 0 36px 8px rgba(255,85,0,.2); }
}
@property --atlas-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }


/* =========== SCROLL-TRIGGERED ANIMATIONS =========== */

/* Title drops in */
.atlas-ctrl__title-card {
  opacity: 0; transform: translateY(-20px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.atlas--visible .atlas-ctrl__title-card { opacity: 1; transform: translateY(0); }

/* Connectors soft fade */
.atlas-ctrl__conn { opacity: 0; transition: opacity .6s cubic-bezier(.4,0,.2,1); }
.atlas--visible .atlas-ctrl__conn--3 { opacity: 1; transition-delay: .5s; }
.atlas--visible .atlas-ctrl__conn--1 { opacity: 1; transition-delay: .8s; }
.atlas--visible .atlas-ctrl__conn--2 { opacity: 1; transition-delay: 1.1s; }
.atlas--visible .atlas-ctrl__conn--4 { opacity: 1; transition-delay: 1.4s; }

/* Cards float up */
.atlas-ctrl__card {
  opacity: 0;
  transform: translateY(calc(-50% + 8px));
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.atlas--visible .atlas-ctrl__card--1 { opacity: 1; transform: translateY(-50%); transition-delay: .85s; }
.atlas--visible .atlas-ctrl__card--2 { opacity: 1; transform: translateY(-50%); transition-delay: 1.15s; }
.atlas--visible .atlas-ctrl__card--3 { opacity: 1; transform: translateY(-50%); transition-delay: 1.45s; }
.atlas--visible .atlas-ctrl__card--4 { opacity: 1; transform: translateY(-50%); transition-delay: 1.75s; }

/* Sparkles fade in (blink animation runs continuously via path rules above) */
.atlas-ctrl__star--sm, .atlas-ctrl__star--lg {
  opacity: 0; transition: opacity .8s cubic-bezier(.4,0,.2,1) 1.9s;
}
.atlas--visible .atlas-ctrl__star--sm { opacity: 1; }
.atlas--visible .atlas-ctrl__star--lg { opacity: 1; }

/* Tagline */
.atlas-ctrl__tagline {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1) 2.1s, transform .7s cubic-bezier(.4,0,.2,1) 2.1s;
}
.atlas--visible .atlas-ctrl__tagline { opacity: 1; transform: translateY(0); }


/* =========== REDUCED MOTION =========== */
@media (prefers-reduced-motion: reduce) {
  .atlas-ctrl__title-card, .atlas-ctrl__tagline, .atlas-ctrl__conn {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .atlas-ctrl__card {
    opacity: 1 !important; transition: none !important;
    transform: translateY(-50%) !important;
  }
  .atlas-ctrl__star--sm, .atlas-ctrl__star--lg { opacity: 1 !important; transition: none !important; }
  .atlas-ctrl__star--sm path, .atlas-ctrl__star--lg path { animation: none !important; }
  .atlas-ctrl__tagline-pill, .atlas-ctrl__tagline-pill::before { animation: none !important; }
}


/* =========== RESPONSIVE =========== */
@media (max-width: 768px) {
  .atlas-ctrl { padding: 50px 16px 60px; }
  .atlas-ctrl__title-card { padding: 24px 36px; }
  .atlas-ctrl__title-card h2 { font-size: 28px; }
  .atlas-ctrl__sparkles { display: none; }
  .atlas-ctrl__connectors { display: none; }
  .atlas-ctrl__body { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; margin-top: 0; }
  .atlas-ctrl__card {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    font-size: 16px; padding: 16px 22px;
    border-left: 3px solid #00F0A0;
    white-space: normal;
  }
  .atlas--visible .atlas-ctrl__card { transform: none !important; }
  .atlas-ctrl__tagline { margin-top: 32px; }
  .atlas-ctrl__tagline-pill { font-size: 14px; padding: 12px 20px; }
}
@media (max-width: 480px) {
  .atlas-ctrl__tagline-pill { font-size: 13px; padding: 11px 18px; white-space: normal; text-align: center; }
}

/**
 Section 5: Atlas University
 * Semester cards with tape strips, rocking graduation cap hats,
 * stat counters, CTA, gradient tagline pill.
 */

/* ---- Tokens ---- */
:root {
  --uni-radius: 10px;
  --uni-border: 3px;
  --uni-shadow: 0 6px 24px rgba(0,0,0,.06);
  --uni-ink: #000;
  --uni-muted: #525b66;
}

/* ---- Base ---- */
/* .atlas-uni *, .atlas-uni *::before, .atlas-uni *::after { box-sizing: border-box; margin: 0; padding: 0; } */
/* .atlas-uni {
  background: #fff;
  padding: clamp(48px, 8vw, 88px) 0;
  color: var(--uni-ink);
} */

.atlas-uni {
  background: #fff;
  padding: 0 0 clamp(48px, 8vw, 88px);
  color: var(--uni-ink);
} 

.atlas-uni__header {
  background: #FDE8ED;
  padding: clamp(36px, 5vw, 56px) 24px;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.atlas-uni__title {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 120%;
  letter-spacing: 0%;
  color: #000;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.atlas-uni__title strong { font-weight: 700; }
.atlas--visible .atlas-uni__title { opacity: 1; transform: none; }

.atlas-uni__wrap {
  max-width: 1280px;
  margin: 0 auto;
  /* padding: 0 clamp(16px, 4vw, 32px); */
  padding: 0 22px;
}

/* ---- Grid ---- */
.atlas-uni__grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.atlas-uni__left { display: grid; gap: clamp(24px, 3vw, 36px); }
.atlas-uni__right { display: grid; gap: clamp(18px, 2.4vw, 24px); }

/* ---- Semester Cards ---- */
.atlas-uni__card {
  position: relative;
  display: flex; align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 30px 28px;
  margin-left: 42px;
  border-radius: var(--uni-radius);
  border: var(--uni-border) solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--uni-shadow);
  overflow: visible;
  isolation: isolate;
}

.atlas-uni__card h3 {
    font-size: clamp(30px, 2.4vw, 40px);
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0%;
    margin-bottom: 0px;
}

/* Color variants */
.atlas-uni__card--orange { --card-bg: #FFEAD1; --card-border: #FF5500; --tape-color: #FF5500; }
.atlas-uni__card--blue   { --card-bg: #E6F3FF; --card-border: #2596FF; --tape-color: #2596FF; }
.atlas-uni__card--pink   { --card-bg: #FFEBF1; --card-border: #FF739D; --tape-color: #FF739D; }
.atlas-uni__card--mint   { --card-bg: #E7FFF9; --card-border: #01E7B0; --tape-color: #01E7B0; }

/* ---- Tape (narrow strip on card left border) ---- */
.atlas-uni__tape {
  position: absolute;
  top: 5px; bottom: 5px;
  left: calc(-29px - var(--uni-border));
  width: 30px;
  background: var(--tape-color);
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0%;
  text-transform: uppercase;
}

/* ---- Graduation Cap — perched on top-right corner ---- */
.atlas-uni__hat {
  position: absolute;
  top: -29px;
  right: -22px;
  z-index: 2;
  pointer-events: none;
  color: var(--card-border);
  transform: rotate(8deg);
  transform-origin: 55% 100%;
  animation: hat-rock 1.2s ease-in-out infinite alternate;
}
@keyframes hat-rock {
  0%   { transform: rotate(-8deg); }
  100% { transform: rotate(12deg); }
}

/* ---- Stat Cards ---- */
.atlas-uni__stat {
  border-radius: var(--uni-radius);
  border: var(--uni-border) solid var(--stat-border, #111);
  background: var(--stat-bg, #fff);
  box-shadow: var(--uni-shadow);
  padding: clamp(20px, 2.6vw, 28px);
  text-align: center;
}
.atlas-uni__stat-num {
  font-weight: 600;
  font-size: clamp(45px, 5.5vw, 72px);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: 0px;
  color: var(--stat-accent, var(--uni-ink));
}
.atlas-uni__stat p {
  font-size: clamp(26px, 1.4vw, 30px);
  color: 000%;
}
.atlas-uni__stat-text {
  font-weight: 600 !important;
  font-size: clamp(30px, 2.2vw, 40px) !important;
  line-height: 120% !important;
  color: var(--uni-ink) !important;
}
.atlas-uni__stat--blue  { --stat-bg: #fff; --stat-border: #2596FF; --stat-accent: #2596FF; }
.atlas-uni__stat--pink  { --stat-bg: #fff; --stat-border: #FF739D; --stat-accent: #FF739D; }
.atlas-uni__stat--plain { --stat-bg: #fff;     --stat-border: #000; }

/* ---- CTA ---- */
.atlas-uni__cta-wrap {
  text-align: center;
  margin-top: clamp(32px, 4vw, 48px);
}


.atlas-uni #button-container{
    justify-content: center;
}

/* ---- Tagline Pill ---- */
.atlas-uni__tagline {
  display: flex; align-items: center; justify-content: center;
  max-width: 1200px; margin: clamp(32px, 4vw, 48px) auto 0;
}
.atlas-uni__tagline-line { flex: 1; height: 2px; background: #b0b8c4; }
.atlas-uni__tagline-dot {
  width: 10px; height: 10px; background: #b0b8c4;
  border-radius: 50%; flex-shrink: 0; margin: 0 -1px;
}
.atlas-uni__tagline-pill {
  position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 60px;
    line-height: 150%;
    font-size: 28px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border-radius: 50px;
    white-space: nowrap;
    z-index: 0;
    box-shadow: 0 0 12px 2px rgba(255, 85, 0, .35), 0 0 24px 4px rgba(255, 85, 0, .15);
    animation: atlas-glow-pulse 2.5s ease-in-out infinite;
    margin: 0px 30px;
}
.atlas-uni__tagline-pill::before,
.atlas-uni__tagline-pill::after {
  content: ''; position: absolute; inset: -4px; border-radius: 54px; z-index: -1;
}
.atlas-uni__tagline-pill::before {
 background: conic-gradient(from var(--atlas-border-angle,0deg), #FF6106,#FFEC3D,#FF739D,#01E7B0,#FF6106);
  animation: atlas-border-spin 3s linear infinite;
}
.atlas-uni__tagline-pill::after { inset: 0; background: #fff; border-radius: 50px; }


@keyframes uni-spin { to { --uni-angle: 360deg; } }
@keyframes uni-glow {
  0%,100% { box-shadow: 0 0 12px 2px rgba(255,85,0,.35), 0 0 24px 4px rgba(255,85,0,.15); }
  50%     { box-shadow: 0 0 18px 4px rgba(255,85,0,.5), 0 0 36px 8px rgba(255,85,0,.2); }
}
@property --uni-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }


/* =========== SCROLL ANIMATIONS =========== */

/* Left cards: slide from left */
[data-uni-reveal="1"],
[data-uni-reveal="2"],
[data-uni-reveal="3"],
[data-uni-reveal="4"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.22,1,.36,1);
}
/* Right stat cards: slide from right */
[data-uni-reveal="5"],
[data-uni-reveal="6"],
[data-uni-reveal="7"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.22,1,.36,1);
}
/* CTA + tagline: float up */
[data-uni-reveal="8"],
[data-uni-reveal="9"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.22,1,.36,1);
}
/* Staggered delays — alternating left/right cascade */
.atlas--visible [data-uni-reveal="1"] { opacity:1; transform:none; transition-delay:.1s; }
.atlas--visible [data-uni-reveal="5"] { opacity:1; transform:none; transition-delay:.2s; }
.atlas--visible [data-uni-reveal="2"] { opacity:1; transform:none; transition-delay:.4s; }
.atlas--visible [data-uni-reveal="6"] { opacity:1; transform:none; transition-delay:.5s; }
.atlas--visible [data-uni-reveal="3"] { opacity:1; transform:none; transition-delay:.7s; }
.atlas--visible [data-uni-reveal="7"] { opacity:1; transform:none; transition-delay:.8s; }
.atlas--visible [data-uni-reveal="4"] { opacity:1; transform:none; transition-delay:1.0s; }
.atlas--visible [data-uni-reveal="8"] { opacity:1; transform:none; transition-delay:1.3s; }
.atlas--visible [data-uni-reveal="9"] { opacity:1; transform:none; transition-delay:1.6s; }

/* Hat paused until visible */
.atlas-uni__hat { animation-play-state: paused; }
.atlas--visible .atlas-uni__hat { animation-play-state: running; }


/* =========== REDUCED MOTION =========== */
@media (prefers-reduced-motion: reduce) {
  [data-uni-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
  .atlas-uni__hat { animation: none !important; }
  .atlas-uni__tagline-pill, .atlas-uni__tagline-pill::before { animation: none !important; }
}


/* =========== RESPONSIVE =========== */
@media (max-width: 980px) {
  .atlas-uni__grid { grid-template-columns: 1fr; }
  .atlas-uni__right { grid-template-columns: 1fr 1fr; }
  .atlas-uni__stat--plain { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .atlas-uni__header { padding: 28px 16px; margin-bottom: 32px; }
  .atlas-uni__card { padding: 18px 20px; min-height: 72px; margin-left: 34px; }
  .atlas-uni__tape { width: 30px; font-size: 8px; left: calc(-30px - var(--uni-border)); }
  .atlas-uni__card h3 { font-size: 18px; }
  .atlas-uni__right { grid-template-columns: 1fr; }
  .atlas-uni__stat--plain { grid-column: auto; }
  .atlas-uni__tagline-pill { font-size: 14px; padding: 12px 20px; }
}
@media (max-width: 480px) {
  .atlas-uni__tagline-pill { white-space: normal; text-align: center; font-size: 13px; padding: 11px 18px; }
}

/**
 * Section 6: What Atlas Has Learned in the Wild
 * Timeline list with orange circle markers, gray connecting lines,
 * rotating asterisk decorative patterns, sequential scroll animation.
 */

/* ---- Base ---- */
.atlas-wild *, .atlas-wild *::before, .atlas-wild *::after { box-sizing: border-box; margin: 0; padding: 0; }
.atlas-wild {
  position: relative;
  background: #FCEBD4;
  padding: clamp(60px, 8vw, 100px) 24px;
  color: #0b0f1a;
  overflow: hidden;
}
.atlas-wild__inner {
  max-width: 870px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ---- Decorative Patterns (behind content) ---- */
.atlas-wild__pattern {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .7;
}
.atlas-wild__pattern svg {
  display: block;
  width: 100%; height: 100%;
  animation: wild-spin 20s linear infinite;
}
@keyframes wild-spin { to { transform: rotate(360deg); } }

.atlas-wild__pattern--left {
  width: clamp(140px, 18vw, 220px);
  height: clamp(140px, 18vw, 220px);
  left: clamp(60px, -3vw, -10px);
  top: 50%;
  transform: translateY(-50%);
}
.atlas-wild__pattern--right {
  width: clamp(120px, 16vw, 200px);
  height: clamp(120px, 16vw, 200px);
  right: clamp(-60px, -5vw, -30px);
  bottom: clamp(-50px, -4vw, -20px);
  overflow: hidden;
}

/* ---- Title ---- */
.atlas-wild__title {
  text-align: center;
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 500;
  line-height: 150%;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.atlas-wild__title strong { font-weight: 700; }

/* ---- Timeline List ---- */
.atlas-wild__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: clamp(40px, 8vw, 100px);
}
.atlas-wild__item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.atlas-wild__marker {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.atlas-wild__circle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.atlas-wild__circle svg { display: block; }

.atlas-wild__line {
  width: 2px;
  height: 48px;
  background: #c4c4c4;
  margin-left: 17px;
  flex-shrink: 0;
}
.atlas-wild__text {
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 100%;
  color: #000;
}


/* =========== SCROLL ANIMATIONS =========== */

/* Title */
.atlas-wild__title {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.atlas--visible .atlas-wild__title { opacity: 1; transform: none; }

/* Items — circle + text appear together */
[data-wild-item] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.4,0,.2,1);
}
[data-wild-item].wild--show { opacity: 1; }

/* Lines grow downward */
[data-wild-line] {
  transform: scaleY(0);
  transform-origin: top center;
}
[data-wild-line].wild--show {
  transform: scaleY(1);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}

/* Circle stroke draw-in */
[data-wild-item] .atlas-wild__circle svg circle:first-child {
  stroke-dasharray: 82;
  stroke-dashoffset: 82;
  transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);
}
[data-wild-item].wild--show .atlas-wild__circle svg circle:first-child {
  stroke-dashoffset: 0;
}

/* Patterns fade in */
.atlas-wild__pattern {
  opacity: 0;
  transition: opacity 1s ease .3s;
}
.atlas--visible .atlas-wild__pattern { opacity: .7; }


/* =========== REDUCED MOTION =========== */
@media (prefers-reduced-motion: reduce) {
  .atlas-wild__title, [data-wild-item], [data-wild-line] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  [data-wild-item] .atlas-wild__circle svg circle:first-child {
    stroke-dashoffset: 0 !important; transition: none !important;
  }
  .atlas-wild__pattern { opacity: .7 !important; transition: none !important; }
  .atlas-wild__pattern svg { animation: none !important; }
}


/* =========== RESPONSIVE =========== */
@media (max-width: 768px) {
  .atlas-wild { padding: 50px 16px; }
  .atlas-wild__list { padding-left: 16px; }
  .atlas-wild__line { height: 36px; }
  .atlas-wild__pattern--left { width: 100px; height: 100px; left: -30px; }
  .atlas-wild__pattern--right { width: 90px; height: 90px; right: -40px; }
}


/**
 * Section 7: Who Atlas Is Built For
 * Floating sticky-note cards with Figma-accurate tilts,
 * pivot from lifted bottom corners, continuous float loop.
 */

/**
 * Section 7: Who Atlas Is Built For
 */

/* .atlas-who *, .atlas-who *::before, .atlas-who *::after { box-sizing: border-box; margin: 0; padding: 0; } */
.atlas-who {
  position: relative;
  background: #fff;
  padding: clamp(60px, 8vw, 100px) 24px clamp(80px, 10vw, 120px);
  color: #000;
  overflow: hidden;
}
.atlas-who__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ---- Blue Arrow Decorations ---- */
.atlas-who__arrow {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease .2s;
}
.atlas-who__arrow svg { display: block; width: 100%; height: 100%; }
.atlas-who__arrow--tl {
 width: clamp(60px, 12vw, 200px);
    height: clamp(60px, 12vw, 200px);
    top: 0;
    left: 0;
    transform: rotate(0deg);
}
.atlas-who__arrow--tr {
  width: clamp(50px, 12vw, 180px);
    height: clamp(50px, 12vw, 180px);
    top: 115px;
    right: -45px;
    transform: rotate(135deg);
}
.atlas--visible .atlas-who__arrow { opacity: 1; }

/* ---- Title ---- */
.atlas-who__title {
  text-align: center;
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 500;
  line-height: 150%;
  margin-bottom: clamp(40px, 6vw, 72px);
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.atlas-who__title strong { font-weight: 800; }
.atlas--visible .atlas-who__title { opacity: 1; transform: none; }

/* ---- Cards Row ---- */
.atlas-who__cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: 20px 20px 60px;
  position: relative;
}

/* ---- Sticky Note Cards ---- */
.atlas-who__card {
  --tilt: 0deg;
  --tx: 0px;
  --ty: 0px;
  --float-amp: 8px;
  --float-rot: 0.8deg;
  --float-speed: 3.2s;
  --float-delay: 1s;
  width: clamp(190px, 22vw, 240px);
  height: clamp(190px, 22vw, 240px);
  padding: clamp(20px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  position: relative;
  will-change: transform;
}
.atlas-who__card h3 {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 8px;
}
.atlas-who__card p {
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 400;
  color: #333;
  line-height: 1.35;
}

/* ---- Card Variants ---- */
.atlas-who__card--1 {
  background: #F8D7E0;
  --tilt: -15deg;
  --ty: 10px;
  --float-amp: 10px;
  --float-rot: 1.1deg;
  --float-speed: 3.4s;
  --float-delay: .95s;
  transform-origin: 100% 100%;
  z-index: 3;
  margin-right: -50px;
}
.atlas-who__card--2 {
  background: #DAE4F7;
  --tilt: 12deg;
  --ty: 22px;
  --float-amp: 11px;
  --float-rot: -1.2deg;
  --float-speed: 3.1s;
  --float-delay: 1.10s;
  transform-origin: 0% 100%;
  z-index: 4;
  margin-right: -30px;
}
.atlas-who__card--3 {
  background: #DDF5ED;
  --tilt: 8deg;
  --ty: 64px;
  --float-amp: 9px;
  --float-rot: -1.0deg;
  --float-speed: 3.5s;
  --float-delay: 1.25s;
  transform-origin: 0% 100%;
  z-index: 5;
  margin-right: -16px;
  margin-top: 20px;
}
.atlas-who__card--4 {
  background: #F5DEC8;
  --tilt: -6deg;
  --ty: 28px;
  --float-amp: 8px;
  --float-rot: 0.8deg;
  --float-speed: 3.2s;
  --float-delay: 1.40s;
  transform-origin: 100% 100%;
  z-index: 6;
}

/* ---- Reveal + Float ---- */
[data-who-card] {
  opacity: 0;
  transform: translate(var(--tx), calc(var(--ty) - 120px)) rotate(0deg) scale(.96);
}
.atlas--visible [data-who-card="1"] {
  opacity: 1;
  transform: translate(var(--tx), var(--ty)) rotate(var(--tilt));
  transition: opacity .6s cubic-bezier(.4,0,.2,1) .28s, transform .85s cubic-bezier(.22,1,.36,1) .28s;
  animation: atlas-float var(--float-speed) ease-in-out var(--float-delay) infinite;
}
.atlas--visible [data-who-card="2"] {
  opacity: 1;
  transform: translate(var(--tx), var(--ty)) rotate(var(--tilt));
  transition: opacity .6s cubic-bezier(.4,0,.2,1) .55s, transform .85s cubic-bezier(.22,1,.36,1) .55s;
  animation: atlas-float var(--float-speed) ease-in-out var(--float-delay) infinite;
}
.atlas--visible [data-who-card="3"] {
  opacity: 1;
  transform: translate(var(--tx), var(--ty)) rotate(var(--tilt));
  transition: opacity .6s cubic-bezier(.4,0,.2,1) .82s, transform .85s cubic-bezier(.22,1,.36,1) .82s;
  animation: atlas-float var(--float-speed) ease-in-out var(--float-delay) infinite;
}
.atlas--visible [data-who-card="4"] {
  opacity: 1;
  transform: translate(var(--tx), var(--ty)) rotate(var(--tilt));
  transition: opacity .6s cubic-bezier(.4,0,.2,1) 1.09s, transform .85s cubic-bezier(.22,1,.36,1) 1.09s;
  animation: atlas-float var(--float-speed) ease-in-out var(--float-delay) infinite;
}

@keyframes atlas-float {
  0%   { transform: translate(var(--tx), var(--ty)) rotate(var(--tilt)); }
  25%  { transform: translate(var(--tx), calc(var(--ty) - var(--float-amp) * .55)) rotate(calc(var(--tilt) + var(--float-rot) * .55)); }
  50%  { transform: translate(var(--tx), calc(var(--ty) - var(--float-amp))) rotate(calc(var(--tilt) + var(--float-rot))); }
  75%  { transform: translate(var(--tx), calc(var(--ty) - var(--float-amp) * .35)) rotate(calc(var(--tilt) + var(--float-rot) * .35)); }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--tilt)); }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .atlas-who__title, [data-who-card], .atlas-who__arrow {
    opacity: 1 !important; transition: none !important;
  }
  [data-who-card] {
    transform: translate(var(--tx), var(--ty)) rotate(var(--tilt)) !important;
    animation: none !important;
  }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .atlas-who__cards { flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; }
  .atlas-who__card { margin: 0 !important; width: clamp(160px, 40vw, 200px); height: clamp(160px, 40vw, 200px); }
  .atlas-who__card--1, .atlas-who__card--2, .atlas-who__card--3 { margin-right: 0 !important; }
}
@media (max-width: 480px) {
  .atlas-who__card { width: 65vw; height: auto; min-height: 140px; }
  .atlas-who__arrow--tl { width: 50px; height: 50px; }
  .atlas-who__arrow--tr { width: 42px; height: 42px; }
}

/**
 * Section 8: Built for the Right Kind of Scale
 * Two-card layout with sequential reveal animation,
 * badge pop-ins, border draw, yellow asterisk decorations.
 */

/* ---- Base ---- */
.atlas-scale {
  position: relative;
  background: #FFFCE6;
  padding: 70px 0px;
  color: #000;
  overflow: hidden;
}
.atlas-scale__inner {
  max-width: 1240px;
  padding: 0px 22px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}


/* ---- Decorative Asterisks ---- */
.atlas-scale__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.atlas-scale__deco svg { display: block; width: 100%; height: 100%; }

.atlas-scale__deco--tr {
  width: clamp(100px, 16vw, 200px);
  height: clamp(100px, 16vw, 200px);
  top: -34px;
  right: clamp(-20px, -1vw, 20px);
}
.atlas-scale__deco--bl {
  width: clamp(100px, 16vw, 200px);
  height: clamp(100px, 16vw, 200px);
  bottom: clamp(-50px, 4vw, 40px);
  left: clamp(-60px, -4vw, -20px);
  clip-path: inset(0 35% 0 0);
}

/* ---- Title ---- */
.atlas-scale__title {
  text-align: center;
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 500;
  line-height: 150%;
  margin-bottom: clamp(48px, 6vw, 80px);
}

/* ---- Two-Card Layout ---- */
.atlas-scale__cards {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0;
  align-items: start;
  position: relative;
}

/* ---- Cards ---- */
.atlas-scale__card {
  position: relative;
  padding: clamp(32px, 4vw, 48px);
}

/* Left card — Figma: opacity 0.8, bg #FBFBFB, border 3px #ECECEC, radius 21px */
.atlas-scale__card--left {
  background: #FBFBFB;
  opacity: .5;
  border-radius: 21px;
  border: 3px solid #ECECEC;
  box-shadow: 0px 0px 8px 0px #E8E8E840;
  z-index: 1;
}

/* Right card — Figma: border 5px #01E7B0, radius 21px, shadow 5px 5px solid */
.atlas-scale__card--right {
  background: #fff;
  border-radius: 21px;
  border: 5px solid transparent;
  box-shadow: none;
  margin-top: clamp(100px, 12vw, 194px);
  margin-left: clamp(-80px, -7vw, -40px);
  z-index: 2;
}

/* ---- Badges ---- */
.atlas-scale__badge {
  position: absolute;
  width: 48px; height: 48px;
}
.atlas-scale__badge svg { display: block; width: 100%; height: 100%; }
.atlas-scale__badge--x { top: -20px; left: -14px; }
.atlas-scale__badge--check { top: -20px; right: -14px; }

/* ---- Card Content ---- */
.atlas-scale__card-title {
  font-size: clamp(32px, 2.4vw, 40px);
  font-weight: 600;
  line-height: 100%;
  margin-bottom: clamp(18px, 2.5vw, 28px);
}

.atlas-scale__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vw, 24px);
}
.atlas-scale__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: clamp(22px, 2.7vw, 27px);
  font-family: DM Mono;
  font-weight: 400;
  line-height: 150%;
  color: #000;
}


.atlas-scale__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.atlas-scale__list li.scale--show[data-scale-el="check-1"] .atlas-scale__icon{
  width: 50px;
  height: 50px;
  margin-top: 7px;
}

.atlas-scale__icon svg { display: block; }


/* =========== SCROLL ANIMATIONS =========== */

/* Title */
[data-scale-el="title"] {
  opacity: 0;
  transform: translateY(-24px);
}

/* Cards */
[data-scale-el="card-left"],
[data-scale-el="card-right"] {
  opacity: 0;
  transform: translateY(-36px);
}
/* Keep left card's faded look on reveal */
.scale--show[data-scale-el="card-left"] {
  opacity: .8 !important;
}

/* Badges — start hidden & scaled down */
[data-scale-el="badge-x"],
[data-scale-el="badge-check"] {
  opacity: 0;
  transform: scale(0);
}

/* Card titles */
[data-scale-el="title-left"],
[data-scale-el="title-right"] {
  opacity: 0;
  transform: translateX(-14px);
}

/* List items */
[data-scale-el^="x-"],
[data-scale-el^="check-"] {
  opacity: 0;
  transform: translateX(-18px);
}

/* Right card border hidden initially */
.atlas-scale__card--right {
  border-color: transparent;
}

/* Visible transitions */
.scale--show {
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.scale--show[data-scale-el] {
  opacity: 1;
  transform: none;
}

/* Badge bounce */
.scale--show[data-scale-el="badge-x"],
.scale--show[data-scale-el="badge-check"] {
  opacity: 1;
  transform: scale(1);
  transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.34,1.56,.64,1);
}

/* Border + shadow draw */
.atlas-scale__card--right.scale--border {
  border-color: #01E7B0;
  box-shadow: 5px 5px 0px 0px #01E7B0;
  transition: border-color .6s cubic-bezier(.4,0,.2,1), box-shadow .6s cubic-bezier(.4,0,.2,1);
}

/* Decos */
.atlas-scale__deco {
  opacity: 0;
  transition: opacity .8s ease .3s;
}
.atlas--visible .atlas-scale__deco { opacity: 1; }


/* =========== REDUCED MOTION =========== */
@media (prefers-reduced-motion: reduce) {
  [data-scale-el] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .atlas-scale__card--left { opacity: .8 !important; }
  .atlas-scale__card--right { border-color: #01E7B0 !important; box-shadow: 5px 5px 0px 0px #01E7B0 !important; }
  .atlas-scale__deco { opacity: 1 !important; transition: none !important; }
}


/* =========== RESPONSIVE =========== */
@media (max-width: 768px) {
  .atlas-scale__cards { grid-template-columns: 1fr; gap: 32px; }
  .atlas-scale__card--right { margin-top: 0; margin-left: 0; }
  .atlas-scale__deco--tr { width: 70px; height: 70px; }
  .atlas-scale__deco--bl { width: 80px; height: 80px; }
}
@media (max-width: 480px) {
  .atlas-scale__card { padding: 24px; border-radius: 14px; }
  .atlas-scale__badge { width: 40px; height: 40px; }
  .atlas-scale__badge--x { left: -8px; top: -16px; }
  .atlas-scale__badge--check { right: -8px; top: -16px; }
}


/* ----------------------------------------------Section 9------------------------------------- */

/* ============ HEADER — mint ============ */
.atlas-compare__header-bg {
  background: #E7FFF9;
  padding: 60px 24px;
}
.atlas-compare__header {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.atlas-compare__title {
font-weight: 500;
font-size: clamp(32px, 2.4vw, 40px);
line-height: 130%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
margin-bottom: 20px;
}
.atlas-compare__title strong { font-weight: 600; }
.atlas-compare__desc {
  max-width: 860px;
  margin: 0 auto;
  font-family: DM Mono;
font-weight: 400;
font-size: 20px;
line-height: 120%;
letter-spacing: 0%;
text-align: center;
}

/* ============ BODY — white ============ */
.atlas-compare__body {
  background: #fff;
  padding: clamp(48px, 6vw, 80px) 24px clamp(60px, 8vw, 100px);
}
.atlas-compare__body-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ============ COLUMNS ============ */
.atlas-compare__columns {
  display: flex;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  margin-bottom: clamp(64px, 8vw, 110px);
}
.atlas-compare__col--left {
  flex: 0.42;
  min-width: 0;
  border-radius: 20px;
  border: 1px solid #D7D7D7;
  overflow: hidden;
}
.atlas-compare__col--right {
  flex: 0.58;
  min-width: 0;
  border-radius: 20px;
  overflow: visible;
  transform: scale(1.08);
  transform-origin: top right;
}

/* ---- Left header ---- */
.atlas-compare__col-header--left {
  background: #F9F9F9;
  padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.5vw, 36px);
}
.atlas-compare__col-header--left h3 {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #1a1a2e;
}

/* ---- Right header ---- */
.atlas-compare__col-header--right {
  background: #FF5500;
  border: 3px solid #000;
  box-shadow: 4px 6px 0px 0px #000;
  border-radius: 20px 20px 0 0;
  padding: clamp(24px, 3vw, 40px) clamp(28px, 3.5vw, 48px);
}
.atlas-compare__col-header--right h3 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

/* ---- Column content ---- */
.atlas-compare__col-content {
  padding: clamp(22px, 2.8vw, 36px);
}
.atlas-compare__col-content--left {
  background: #fff;
}
.atlas-compare__col-content--right {
  background: #FFF3E0;
  border-radius: 0 0 20px 20px;
  padding: clamp(28px, 3.5vw, 48px);
}

/* ============ LISTS ============ */
.atlas-compare__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
}
.atlas-compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
font-weight: 300;
font-style: Light;
font-size: 24px;
line-height: 100%;
letter-spacing: 0%;
}
.atlas-compare__list li strong { font-weight: 700; }

.atlas-compare__icon {
  flex-shrink: 0;
  display: inline-block;
  margin-top: 2px;
}
.atlas-compare__icon--x {
  width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg width='31' height='30' viewBox='0 0 31 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23cx)'%3E%3Cpath d='M30.8572 26.946V27.1709C30.8226 27.3125 30.8142 27.4616 30.8011 27.6479C29.6181 28.5101 28.2106 29.0941 26.7685 29.2581C26.0844 29.3363 25.1342 29.3264 24.468 29.1649C22.8803 28.7785 21.3654 27.4268 20.1943 26.2825C19.6463 25.7483 19.1366 25.2191 18.6256 24.6513L17.4939 23.3915L13.8349 19.1897L12.5755 17.7834L11.2802 19.2109L10.5783 19.9936L7.89104 23.0585L4.44934 27.0243L1.90895 29.996L1.25117 29.8743C0.223315 28.0045-0.174218 26.2627 0.0705094 24.0984C0.148106 23.4139 0.339113 22.7964 0.661437 22.1976C1.45053 20.734 2.81504 19.4233 4.01719 18.3151L6.71993 16.0105L9.2257 13.9717C7.95193 12.3404 6.80111 10.6632 5.81146 8.85181C4.81345 7.02425 3.96943 5.1234 3.27704 3.15172C3.02992 2.44853 2.79116 1.7677 2.66701 1.03966C2.59538 0.616003 2.9189 0.233347 3.20541-0.00146484L4.53887 1.73912C5.65865 3.28342 6.82976 4.76931 8.06414 6.22167C9.51341 7.92623 10.9889 9.56991 12.5647 11.1887C14.328 9.65563 16.1413 8.2567 18.0801 7.00065C19.201 6.27509 20.3304 5.61662 21.5265 5.03643C23.599 4.07482 26.4855 2.943 28.6976 2.5591C29.0391 2.49947 29.5381 2.85479 29.7136 3.20639L27.8381 4.53574C26.4521 5.51848 25.0649 6.49127 23.7231 7.55227C20.9786 9.72148 18.3582 12.0087 15.8178 14.4401C17.2301 15.767 18.6292 16.9845 20.0832 18.1909L22.4183 20.1277L25.3491 22.5181L30.8548 26.9447L30.8572 26.946Z' fill='%23ED1C24'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='cx'%3E%3Crect width='30.8571' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") center/contain no-repeat;
}
.atlas-compare__icon--check {
  width: 28px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg width='38' height='35' viewBox='0 0 38 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.878 34.8429L0.000671387 21.2029C0.153103 20.9537 0.290137 20.7748 0.501077 20.5455L10.3414 26.04C17.307 16.3932 27.0256 5.88881 37.4371 0.012076C37.6096-0.0857677 38.0007 0.437084 38.0007 0.638887C26.77 10.7107 19.2563 21.423 12.5632 34.8719C12.4754 35.0478 12.0535 35.0462 11.878 34.8444V34.8429Z' fill='%2300A651'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============ BOTTOM FRAME ============ */
.atlas-compare__bottom {
  max-width: 1260px;
  margin: 0 auto;
}
.atlas-compare__frame {
  position: relative;
  padding-top: 40px;
  padding-left: 22px;
  padding-right: 22px;
}
.atlas-compare__pill-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.atlas-compare__pill {
  position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 60px;
    line-height: 150%;
    font-size: 28px;
    font-weight: 400;
    color: #000;
    background: #fff;
    border-radius: 50px;
    white-space: nowrap;
    z-index: 0;
    box-shadow: 0 0 12px 2px rgba(255, 85, 0, .35), 0 0 24px 4px rgba(255, 85, 0, .15);
    animation: atlas-glow-pulse 2.5s ease-in-out infinite;
    margin: 0px 30px;
}
.atlas-compare__pill::before,
.atlas-compare__pill::after {
  content: ''; position: absolute; border-radius: 54px; z-index: -1;
}
.atlas-compare__pill::before {
  inset: -4px;
  background: conic-gradient(from var(--cmp-angle, 0deg), #FF6106, #FFEC3D, #FF739D, #01E7B0, #FF6106);
  animation: cmp-spin 3s linear infinite;
}
.atlas-compare__pill::after { inset: 0; background: #fff; border-radius: 50px; }
@property --cmp-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes cmp-spin { to { --cmp-angle: 360deg; } }

/* Content box */
.atlas-compare__frame-body {
  position: relative;
  background: #fff;
  padding: clamp(20px, 4vw, 28px) clamp(28px, 3.5vw, 48px);
  padding-top: clamp(40px, 5vw, 56px);
  text-align: center;
  border-radius: 20px;
}
.atlas-compare__frame-body p {
  margin-bottom: 16px;
  font-family: DM Sans;
font-weight: 400;
font-style: Regular;
font-size: 25px;
line-height: 130%;
letter-spacing: 0%;
text-align: center;
}
.atlas-compare__frame-body p:last-child { margin-bottom: 0; }
.atlas-compare__frame-highlight {
 margin-top: 30px;
}
.atlas-compare__frame-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  border-radius: 20px;
}

/* ============ SCROLL ANIMATIONS ============ */
[data-cmp="header"] { opacity: 0; transform: translateY(-20px); }
[data-cmp="col-left"], [data-cmp="col-right"] { opacity: 0; transform: translateY(30px); }
[data-cmp^="x-"], [data-cmp^="c-"] { opacity: 0; transform: translateX(-16px); }
[data-cmp="bottom"] { opacity: 0; transform: translateY(24px); }
.cmp--show { transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.22,1,.36,1); }
.cmp--show[data-cmp] { opacity: 1; transform: none; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  [data-cmp] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .atlas-compare__pill::before { animation: none !important; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .atlas-compare__columns { flex-direction: column; align-items: stretch; }
  .atlas-compare__col--right { transform: none; }
  .atlas-compare__col-header--right { box-shadow: 3px 4px 0px 0px #000; }
  .atlas-compare__pill { font-size: 16px; padding: 10px 22px; }
}
@media (max-width: 480px) {
  .atlas-compare__header-bg { padding: 40px 16px; }
  .atlas-compare__body { padding: 36px 16px 60px; }
  .atlas-compare__pill { white-space: normal; text-align: center; font-size: 15px; padding: 10px 18px; }
}