:root {
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  --font-primary-spacing: -1px;
}

/* FEATURE BLOCKS */

section.features {
  background: #172128
    radial-gradient(
      40% 10% at center 0%,
      rgba(255, 255, 255, 0.1) 4%,
      rgba(98, 255, 179, 0) 70%,
      rgba(23, 33, 40, 0) 100%
    );
  position: relative;
  width: 100%;
  padding: 200px 0;
  overflow: hidden;
}

.shine {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(255, 255, 255, 0) 0%,
    rgba(252, 255, 255, 0.8) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  position: absolute;
  top: 1px;
  left: 0;
  height: 1px;
  width: 100%;
}

section.features .features-wrapper {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

section.features .feature {
  padding-bottom: 60px;
  margin-bottom: 120px;
}

section.features .subtitle {
  text-transform: uppercase;
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 7px;
  text-align: center;
  margin: 0 0 80px;
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(252, 210, 205, 1) 15%,
    rgba(189, 183, 213, 1) 65%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section.features .feature .title {
  font-family: var(--font-primary);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: var(--font-primary-spacing);
  color: #fff;
  margin-bottom: 20px;
}

section.features .feature .description {
  font-family: var(--font-secondary);
  font-size: 20px;
  font-weight: 400;
  color: #aab9c5;
  line-height: 1.6em;
}

/* Feature Wide (Block 1) */
section.features .feature-wide,
section.features .feature-wide .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section.features .feature-wide .title {
  flex-basis: 40%;
  margin: 0 0 0 auto;
}

section.features .feature-wide .description {
  flex-basis: 33%;
  margin: 0 auto 0 80px;
}

section.features .feature-wide .image {
  margin: 80px auto 20px;
  position: relative;
  width: 100%;
  text-align: center;
}

.feature-wide .frame {
  transform: perspective(1500px) translate3d(0px, 0px, -250px) rotateX(27deg) scale(0.9, 0.9);
  box-shadow: 0 70px 40px -20px rgba(0, 0, 0, 0.2);
  transition: 0.4s ease-in-out transform;
  
  width: 480px;
  height: 300px;
  position: relative;
  z-index: 3;
}

.feature.feature-wide .frame.front {
  background: linear-gradient(225deg, rgba(250, 247, 244, 0.1) -25%, rgba(16, 25, 32, 0.2) 35%);
}

.feature.feature-wide .in-view .frame {
  transform: translate3d(0px, 0px, -250px);
  transition: transform 0.7s ease 1s;
}

.feature.feature-wide .in-view .frame:first-of-type {
  transform: perspective(1000px) rotateY(25deg);
}

.feature.feature-wide .in-view .frame:last-of-type {
  transform: perspective(1000px) rotateY(-25deg);
  background: linear-gradient(225deg, rgba(250, 247, 244, 0.1) -25%, rgba(16, 25, 32, 0.2) 35%);
}

.feature.feature-wide .in-view .frame.secondary:first-of-type {
  transition: transform 0.8s ease 1.1s;
}

.feature.feature-wide .in-view .frame.secondary:last-of-type {
  transition: transform 0.9s ease 1.2s;
}

.feature-wide .frame.secondary {
  width: 360px;
  height: 240px;
  position: absolute;
  z-index: 2;
}

.feature-wide .frame.secondary:first-of-type {
  top: 35px;
  left: -280px;
}

.feature-wide .frame.secondary:last-of-type {
  top: 35px;
  right: -280px;
}

.feature.feature-wide .frame.secondary:first-of-type .central { padding: 50px; }
.feature.feature-wide .frame.secondary:last-of-type .central { padding: 50px; display: flex; justify-content: end; }

.feature.feature-wide .frame.secondary .app-cloud,
.feature.feature-wide .frame.secondary .app-mail {
  width: 128px;
  height: 128px;
  border-radius: 16px;
  outline: 5px solid #141a1f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #aab9c5;
}

.feature.feature-wide .frame.secondary .app-cloud {
  box-shadow: inset 1px 0px 0px 1px rgba(33, 43, 48, 1);
}

.feature.feature-wide .frame.secondary .app-mail {
  box-shadow: inset -1px 0px 0px 1px rgba(33, 43, 48, 1);
}

.feature.feature-wide .frame.secondary .app-cloud i,
.feature.feature-wide .frame.secondary .app-mail i {
  font-size: 48px;
  color: #aab9c5;
}

.feature.feature-wide .frame.secondary:first-of-type .central .sq-m { position: absolute; top: 30%; right: 20%; }
.feature.feature-wide .frame.secondary:last-of-type .central .sq-m { position: absolute; top: 30%; left: 20%; transform: rotate(180deg); }

/* Feature Left (Block 2) */
section.features .feature-left {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section.features .feature-left .image { flex-basis: 45%; }
section.features .feature-left .content { flex-basis: 38%; margin: 70px 0 0 auto; }
section.features .feature-left .content .title { margin: 0 0 20px 0; max-width: 100%; }

.feature.feature-left .frame {
  transform: perspective(1000px) rotateY(25deg);
  padding: 70px 90px;
  width: 580px;
  height: 400px;
}
.feature.feature-left .in-view .frame {
  transform: perspective(3000px) rotateY(2deg);
  transition: transform 1s ease 1s;
}

section.features .feature-left .sq-m:first-child { position: absolute; left: 25px; top: 25px; }
section.features .feature-left .sq-m:last-child { position: absolute; right: 25px; bottom: 25px; transform: rotate(180deg); }

/* Feature Right (Block 3) */
section.features .feature-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section.features .feature-right .image { flex-basis: 45%; text-align: right; }
section.features .feature-right .content { flex-basis: 50%; margin: 80px auto 0 0; }
.feature-right .content .title { max-width: 85%; margin: 0 0 20px 0; }
section.features .feature-right .content .description { max-width: 74%; }

.feature.feature-right .frame {
  padding: 50px 60px;
  transform: perspective(1500px) rotateY(-15deg);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  transition: transform 1s ease 0s;
  width: 580px;
  height: 400px;
  background: linear-gradient(-135deg, rgba(250, 247, 244, 0.1) -25%, rgba(16, 25, 32, 0.2) 35%);
}

.feature.feature-right .in-view .frame {
  transform: perspective(3000px) rotateY(-2deg);
  transition: transform 1s ease 1s;
}

section.features .feature-right .sq-m:first-child { position: absolute; left: 55px; bottom: -45px; flex-wrap: nowrap; }
section.features .feature-right .sq-m:last-child { position: absolute; right: 0px; top: -35px; flex-wrap: nowrap; }

/* Base Frame Styles */
.graphic {
  position: relative;
  display: inline-block;
}

.frame {
  border-radius: 32px;
  border: 2px solid #2c3a45;
  box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.3),
    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(250, 247, 244, 0.1) -35%, rgba(16, 25, 32, 0.2) 35%);
  position: relative;
  z-index: 1;
  transition: transform 1s ease 0s;
}

/* Animations and Elements */
.sq-l { width: 188px; height: 188px; display: flex; flex-wrap: wrap; justify-content: space-between; position: absolute; z-index: 0; }
.sq-m { width: 84px; height: 84px; display: flex; flex-wrap: wrap; }
.sq-s { width: 25%; height: 25%; display: block; position: relative; }
.sq-s:after { content: ""; width: 2px; height: 2px; position: absolute; left: 50%; top: 50%; background-color: #fff; display: block; }

.feature-wide .sq-l { top: 50%; left: 50%; transform: translate(-50%, -47%); }
.feature-wide .sq-l .sq-m:first-child { transform: rotate(270deg); }
.feature-wide .sq-l .sq-m:nth-child(2) { transform: rotate(180deg); }
.feature-wide .sq-l .sq-m:nth-child(4) { transform: rotate(90deg); }

/* Statcharts (Wide block) */
.feature.feature-wide .frame.secondary .statchart {
  position: absolute; width: 84%; display: flex; height: 70px; justify-content: space-between; align-items: flex-end;
  bottom: 1px; left: 50%; right: 50%; transform: translate(-50%, 0);
}
.feature.feature-wide .frame.secondary .statchart .bar { flex-basis: 19%; background: rgba(46, 57, 64, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.feature.feature-wide .frame.secondary:last-of-type .statchart { transform: translate(-50%, 0) scaleX(-1); }
.feature.feature-wide .frame.secondary .statchart .bar:nth-of-type(2n) { background: rgba(68, 85, 94, 0.6); }

.feature.feature-wide .in-view .frame.secondary .statchart .bar:first-child { height: 1%; animation: 0.7s bar-grow1 ease-in-out forwards 1s; }
.feature.feature-wide .in-view .frame.secondary .statchart .bar:nth-child(2) { height: 1%; animation: 0.7s bar-grow2 ease-in-out forwards 1.2s; }
.feature.feature-wide .in-view .frame.secondary .statchart .bar:nth-child(3) { height: 1%; animation: 0.7s bar-grow3 ease-in-out forwards 1.4s; }
.feature.feature-wide .in-view .frame.secondary .statchart .bar:nth-child(4) { height: 1%; animation: 0.7s bar-grow4 ease-in-out forwards 1.6s; }
.feature.feature-wide .in-view .frame.secondary .statchart .bar:nth-child(5) { height: 1%; animation: 0.7s bar-grow5 ease-in-out forwards 1.8s; }

@keyframes bar-grow1 { 0% { height: 1%; } 100% { height: 40%; } }
@keyframes bar-grow2 { 0% { height: 1%; } 100% { height: 70%; } }
@keyframes bar-grow3 { 0% { height: 1%; } 100% { height: 90%; } }
@keyframes bar-grow4 { 0% { height: 1%; } 100% { height: 25%; } }
@keyframes bar-grow5 { 0% { height: 1%; } 100% { height: 50%; } }

.feature-wide .frame.front .central { display: flex; justify-content: space-between; align-items: center; padding: 115px 100px; position: relative; z-index: 2; }
.feature-wide .frame.front .central .square {
  border-radius: 16px; width: 64px; height: 64px; outline: 5px solid #141a1f;
  background: linear-gradient(320deg, rgba(81, 87, 92, 0.6) -25%, rgba(36, 48, 58, 0.5) 35%);
  box-shadow: inset 0px -1px 1px 0px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  display: flex; align-items: center; justify-content: center;
}
.feature-wide .frame.front .central .square:nth-child(2) { background: linear-gradient(320deg, rgba(81, 87, 92, 0.9) -25%, rgba(36, 48, 58, 0.8) 35%); }
.feature-wide .frame.front .central .square i { font-size: 32px; color: #80919e; }
.feature-wide .frame .central { width: 100%; height: 100%; }

section.features .feature-wide .frame .ruler { width: 100%; height: 8%; display: flex; align-items: flex-end; position: absolute; bottom: 15px; left: 8px; }
section.features .feature-wide .frame .ruler .stick { width: 6.5%; border-right: 1px solid #43525d; border-top: 0; height: 50%; }
section.features .feature-wide .frame .ruler .stick:nth-of-type(5n) { height: 100%; border-right: 1px solid #788996; }

/* Blip animations */
.in-view .sq-s:first-child:after { opacity: 0.08; animation: blip1 10s linear infinite 1s; }
.in-view .sq-s:nth-child(2) { opacity: 0.1; animation: blip5 8s linear infinite 2.5s; }
.sq-s:nth-child(3) { opacity: 0.2; }
.sq-s:nth-child(4) { opacity: 0.3; }
.in-view .sq-s:nth-child(5) { opacity: 0.55; animation: blip2 10s linear infinite 1.1s; }
.sq-s:nth-child(6) { opacity: 0.2; }
.sq-s:nth-child(7) { opacity: 0.08; }
.sq-s:nth-child(8) { opacity: 0.04; animation: blip6 7s linear infinite 5s; }
.in-view .sq-s:nth-child(9) { opacity: 0.45; animation: blip3 10s linear infinite 1.2s; }
.sq-s:nth-child(10) { opacity: 0.04; }
.in-view .sq-s:nth-child(11) { opacity: 0.1; animation: blip5 8s linear infinite 3.5s; }
.sq-s:nth-child(12) { opacity: 0.12; }
.in-view .sq-s:nth-child(13) { opacity: 0.25; animation: blip4 10s linear infinite 1.3s; }
.in-view .sq-s:nth-child(14) { opacity: 0.45; animation: blip3 10s linear infinite 1.4s; }
.in-view .sq-s:nth-child(15) { opacity: 0.55; animation: blip2 10s linear infinite 1.5s; }
.in-view .sq-s:nth-child(16) { opacity: 0.08; animation: blip1 10s linear infinite 1.6s; }

@keyframes blip1 { 0%, 5%, 15%, 100% { opacity: 0.08; } 10% { opacity: 1; } }
@keyframes blip2 { 0%, 5%, 15%, 100% { opacity: 0.55; } 10% { opacity: 1; } }
@keyframes blip3 { 0%, 5%, 15%, 100% { opacity: 0.45; } 10% { opacity: 1; } }
@keyframes blip4 { 0%, 5%, 15%, 100% { opacity: 0.25; } 10% { opacity: 1; } }
@keyframes blip5 { 0%, 5%, 25%, 100% { opacity: 0.1; } 15% { opacity: 1; } }
@keyframes blip6 { 0%, 10%, 30%, 100% { opacity: 0.04; } 20% { opacity: 1; } }

/* Glow */
.image .glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 280px; height: 280px; background: rgba(192, 240, 255, 0.05);
  border-radius: 50%; z-index: 0; filter: blur(55px);
}

/* Left Feature - Dates Matrix */
.frame .days, .frame .dates { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; }
.frame .days .day { flex-basis: 14.28%; text-align: center; height: 40px; color: #fff; font-size: 11px; font-weight: 700; }
.frame .dates .date { flex-basis: 14.28%; text-align: center; color: #7fa5c2; height: 40px; }
.frame .dates .date.faded { color: #303f4a; }
.frame .dates .marker {
  position: absolute; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
  border-radius: 20px; height: 36px;
}

.frame .dates .marker.pto { background: rgba(74, 109, 136, 0.2); width: 36px; opacity: 0; top: 35px; left: 10px; animation: pto-extend 14s ease-in-out infinite; }
.frame .dates .marker.medical { background: rgba(185, 30, 30, 0.2); opacity: 0; width: 36px; top: 155px; left: 123px; animation: medical-extend 16s ease-in-out infinite; }
.frame .dates .marker.special { background: rgba(61, 158, 71, 0.2); opacity: 0; width: 36px; top: 115px; left: 66px; animation: marker-fade 10s linear 1.8s infinite; }

@keyframes marker-fade { 0%, 20%, 100% { width: 36px; opacity: 0; } 25%, 95% { width: 36px; opacity: 1; } }
@keyframes pto-extend { 0%, 20%, 100% { width: 36px; opacity: 0; } 25%, 95% { width: 36px; opacity: 1; } 30%, 90% { width: 208px; opacity: 1; } }
@keyframes medical-extend { 0%, 20%, 100% { width: 36px; opacity: 0; } 25%, 95% { width: 36px; opacity: 1; } 30%, 90% { width: 151px; opacity: 1; } }

/* Right Feature - Chart */
.frame .chart-wrapper { display: flex; position: relative; width: 100%; height: 100%; }
.frame .chart-wrapper .waves { width: 95%; height: 100%; position: absolute; right: 0; bottom: 0; display: flex; align-items: end; }
.frame .chart-wrapper .marker { width: 5%; height: 100%; border-left: 1px dotted #fff; position: absolute; left: 50%; opacity: 0; transition: 0.5s ease-in-out; z-index: 5; }
.in-view .frame .chart-wrapper .marker { left: 55%; transition: 0.7s ease-out 1.2s; opacity: 1; }
.frame .chart-wrapper .marker .dot {
  width: 16px; height: 16px; border-radius: 50%; background-color: #fff; position: absolute; left: -8px; border: 4px solid #172128; outline: 1px solid #fff;
}
.frame .chart-wrapper .marker .dot:first-child { top: 53%; }
.frame .chart-wrapper .marker .dot:nth-child(2) { top: 68%; }
.frame .chart-wrapper .marker .dot:nth-child(3) { top: 83%; }

.frame .chart-wrapper .waves img {
  max-width: 100%;
  --g: linear-gradient(#000 0 0) content-box no-repeat;
  mask: linear-gradient(#000 0 0), var(--g) 100% 100% / var(--_s, 100%);
  -webkit-mask: linear-gradient(#000 0 0), var(--g) 100% 100% / var(--_s, 100%);
  -webkit-mask-composite: xor, source-over;
  mask-composite: exclude, add;
  transition: 0.7s ease-in-out 0.8s;
}
.feature-right .in-view .frame .chart-wrapper .waves img { --_s: 0%; }

.frame .chart { height: 100%; width: 90%; }
.frame .ruler { width: 10%; height: 100%; }
.frame .ruler .stick { height: 3.68%; border-top: 1px solid #43525d; width: 50%; }
.frame .chart .stick { height: 3.68%; width: 100%; }
.frame .chart .stick:nth-child(7n), .frame .chart .stick:first-child { border-top: 1px dashed #43525d; }
.frame .ruler .stick:first-child, .frame .ruler .stick:nth-child(7n) { width: 100%; }

/* MEDIA QUERIES FOR RESPONSIVE DESIGN */
@media screen and (max-width: 1440px) {
  section.features .feature .title {
    font-size: 40px;
  }
}

@media screen and (max-width: 1080px) {
  section.features .feature-left .content,
  section.features .feature-right .content,
  section.features .feature-wide .content {
    margin-left: auto;
    margin-right: auto;
  }

  section.features .feature {
    margin-bottom: 80px;
  }

  section.features .feature-left .image {
    flex-basis: 100%;
    order: 2;
    text-align: center;
  }

  section.features .feature-left .content {
    flex-basis: 100%;
    order: 1;
  }

  section.features .feature-wide .content .title,
  section.features .feature-wide .content .description {
    flex-basis: 100%;
  }

  section.features .feature-left .content .title,
  section.features .feature-wide .content .title {
    margin: 20px auto;
    text-align: center;
  }

  section.features .content .title {
    max-width: 560px;
  }

  section.features .feature-left .content .description,
  section.features .feature-wide .content .description {
    max-width: 480px;
    margin: 0 auto 60px;
  }

  section.features .feature-right .image {
    flex-basis: 100%;
    order: 2;
    text-align: center;
  }

  section.features .feature-right .content {
    flex-basis: 100%;
    order: 1;
  }

  section.features .feature-right .content .title {
    margin: 20px auto;
    text-align: center;
  }

  section.features .feature-right .content .description {
    max-width: 480px;
    margin: 0 auto 60px;
  }

  section.features .subtitle {
    margin: 0 0 40px;
  }
}

@media screen and (max-width: 580px) {
  section.features {
    padding: 80px 0 40px;
  }

  section.features .feature-wide .graphic {
    transform: scale(0.5);
    transform-origin: center;
  }

  section.features .feature-left .graphic,
  section.features .feature-right .graphic {
    transform: scale(0.6);
    transform-origin: center;
  }

  section.features .feature-left .image,
  section.features .feature-right .image,
  section.features .feature-wide .image {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  section.features .feature-wide .image {
    margin: 0 auto;
    overflow-x: hidden;
  }

  section.features .feature-left .content .description,
  section.features .feature-right .content .description,
  section.features .feature-wide .content .description,
  section.features .feature {
    margin-bottom: 0;
  }

  section.features .feature-left .content,
  section.features .feature-right .content,
  section.features .feature-wide .content {
    margin: 0;
  }

  section.features .feature .title {
    font-size: 24px;
  }

  section.features .feature-left .content .title,
  section.features .feature-right .content .title,
  section.features .feature-wide .content .title {
    margin: 0 0 20px 0;
    max-width: 100%;
  }

  section.features .feature {
    padding-bottom: 0;
  }

  section.features .subtitle {
    font-size: 12px;
    margin: 0 0 20px 0;
    letter-spacing: 4px;
    line-height: 1.4em;
  }

  section.features .feature .description {
    font-size: 14px;
  }
}

@media screen and (max-width: 420px) {
  .feature-wide .frame.secondary:first-of-type {
    left: -200px;
  }

  .feature-wide .frame.secondary:last-of-type {
    right: -200px;
  }
}