/* =========================================================================
   Evara: additions on top of template style.css
   ========================================================================= */

/* ---------- Cormorant Garamond (titles + accents) ----------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

h1, h2, h3,
.section_title h2,
.section_title h2 span,
.banner_section .banner_text h1 {
  font-family: 'Cormorant Garamond', 'Manrope', serif;
  letter-spacing: -0.5px;
}

/* Hero title: oversized display treatment for the serif */
.banner_section .banner_text h1 {
  font-size: clamp(38px, 7.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -2px;
}

/* Italicize the color-accent spans inside titles */
.section_title h2 span,
.banner_section .banner_text h1 span,
.service_section .service_text h2 span,
.about_us_section .abt_text h2 span {
  font-style: italic;
}

/* Make the phone frame wrap tightly around the screen image with no
   visible gaps. The screen image is 1206x2622 (1:2.174 aspect); at 280px
   wide its natural height is 609px. We size the carousel stage to match
   that exact 280x609 box so object-fit:cover renders the image edge-to-edge
   with zero cropping and zero letterboxing. The frame overlay is sized to
   300x609 so its opaque bezels mask the image's rectangular corners.
   The carousel top aligns with the frame top (no margin offset) so the
   phone's notch bezel sits over the image's status-bar gutter. We also
   suppress the template's white ::before backplate, which would otherwise
   show at the sides during slide transitions. */
.banner_section .banner_slider #frmae_slider {
    margin-top: 0;
    height: 609px;
    overflow: visible;
}
.banner_section .banner_slider #frmae_slider::before {
    display: none;
}
.banner_section .banner_slider #frmae_slider .owl-stage-outer,
.banner_section .banner_slider #frmae_slider .owl-stage,
.banner_section .banner_slider #frmae_slider .owl-item,
.banner_section .banner_slider #frmae_slider .item,
.banner_section .banner_slider #frmae_slider .slider_img {
    height: 609px;
}
.banner_section .banner_slider #frmae_slider .owl-stage-outer {
    overflow: hidden;
    border-radius: 34px;
}
.banner_section .banner_slider #frmae_slider .slider_img img {
    width: 100%;
    height: 609px;
    object-fit: cover;
    object-position: center center;
}
.banner_section .banner_slider .slider_frame img {
    width: 300px;
    height: 609px;
    display: block;
}
.banner_section .banner_slider #frmae_slider .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50px;
}

/* Equalize feature card heights regardless of copy length: flex the Owl
   stage so all visible cards stretch to the tallest one, and pin each card's
   image to the bottom so the mockups line up across the row. */
#feature_slider.owl-carousel .owl-stage { display: flex; }
#feature_slider.owl-carousel .owl-stage .owl-item { display: flex; }
#feature_slider .item { display: flex; width: 100%; }
#feature_slider .feature_box {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#feature_slider .feature_box .img { margin-top: auto; }

/* Phone-frame mockup: wraps a full app screenshot (1206x2622 aspect)
   inside the iPhone frame PNG. Works responsively via % + aspect-ratio.
   Used in the features carousel and the download marquee. */
.img--phone {
  position: relative;
  width: 100%;
  max-width: 270px;
  aspect-ratio: 1206 / 2622;
  margin-left: auto;
  margin-right: auto;
}
.img--phone img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.img--phone::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/iphonescren.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Feature-card variant: shorten the container to match the keyftr
   placeholder footprint (270:343) so the phone rises from below the
   card edge — same visual rhythm as the not-yet-replaced placeholders.
   The image + frame inside keep their full-phone aspect (1206:2622)
   and are clipped by overflow:hidden. Top-corner radius matches the
   phone silhouette so the card's white doesn't peek past the bezel. */
#feature_slider .feature_box .img.img--phone {
  aspect-ratio: 270 / 343;
  overflow: hidden;
  border-top-left-radius: 11%;
  border-top-right-radius: 11%;
}
#feature_slider .feature_box .img.img--phone img,
#feature_slider .feature_box .img.img--phone::after {
  height: auto;
  aspect-ratio: 1206 / 2622;
}

/* Download-section marquee mock: CSS-built replacement for the old
   downloadScreen.png. A rounded purple slab holds two real .img--phone
   mocks — back phone tilts one way, front phone tilts the other and sits
   higher + larger. Screenshots drop straight into the phone frames, so
   swapping them later is just an <img src> change. Back phone is left
   as an empty frame until a second screenshot is provided. */
.downaload_section .download_stage {
  position: relative;
  width: min(525px, 90vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background-color: var(--primery);
  border-radius: 36px;
  transform: rotate(-9deg);
}
.downaload_section .download_phone {
  position: absolute;
  margin: 0;
  max-width: none;
}
.downaload_section .download_phone > img {
  border-radius: 12%;
}
.downaload_section .download_phone--back {
  width: 46%;
  top: -1%;
  left: 2%;
  transform: rotate(6deg);
  z-index: 1;
}
.downaload_section .download_phone--front {
  width: 52%;
  top: -5%;
  left: 43%;
  transform: rotate(11deg);
  z-index: 2;
}

.downaload_section .center_screen .app_btn {
  margin-top: 80px;
}

@media (max-width: 767px) {
  .downaload_section .download_stage {
    width: min(360px, 88%);
    border-radius: 28px;
  }
}

/* Service section: phone-frame the three screenshots while preserving the
   rotated purple ::before block and the star decorations. Phone height
   matches the old service_N.png rendered height (369x479 natural, aspect
   preserved for responsive shrink). Width derives from the phone's own
   aspect-ratio, centered via absolute + translateX. */
.service_section .service_blocks .inner_block .img {
  width: 100%;
  max-width: 369px;
  aspect-ratio: 369 / 479;
  margin-left: auto;
  margin-right: auto;
}
.service_section .service_blocks .inner_block .img--phone {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  max-width: none;
}
.service_section .service_blocks .inner_block .img--phone img {
  border: 0;
  border-radius: 12%;
}

/* ---------- Audio Samples Section (matches template section rhythm) ------ */
.samples_section { background-color: transparent; }

.samples_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 18px;
}

.sample {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--bg-white);
  border-radius: 20px;
  padding: 16px;
  border: 1px solid var(--light-greay);
  transition: box-shadow .25s ease, transform .25s ease;
}
.sample:hover {
  box-shadow: 0 18px 40px -22px rgba(42, 2, 17, 0.28);
  transform: translateY(-2px);
}
.sample.is-playing {
  border-color: var(--primery);
  box-shadow: 0 18px 40px -18px rgba(194, 24, 91, 0.32);
}

.sample__cover {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--light-greay);
}

.sample__body { min-width: 0; }
.sample__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-black);
  margin: 0 0 4px;
  line-height: 1.2;
}
.sample__blurb {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-greay);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sample__play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--primery);
  color: var(--bg-white);
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background-color .2s ease;
  flex-shrink: 0;
}
.sample__play:hover { transform: scale(1.06); }
.sample__play:focus-visible { outline: 2px solid var(--dark-black); outline-offset: 3px; }
.sample__play i { line-height: 1; }
.sample.is-playing .sample__play { background: var(--dark-black); }

/* Sticky player bar at bottom of the section */
.samples__player {
  position: sticky;
  bottom: 16px;
  margin: 32px auto 0;
  max-width: 560px;
  background: var(--bg-white);
  border: 1px solid var(--light-greay);
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: 0 18px 40px -22px rgba(42, 2, 17, 0.2);
}
.samples__label {
  font-size: 13px;
  color: var(--text-greay);
  text-align: center;
  margin-bottom: 8px;
}
.samples__track {
  height: 4px;
  background: var(--light-greay);
  border-radius: 999px;
  overflow: hidden;
}
.samples__bar {
  height: 100%;
  width: 0;
  background: var(--primery);
  border-radius: 999px;
  transition: width .1s linear;
}

/* Download CTA inline note */
.download_note {
  margin-top: 18px;
  text-align: center;
  color: var(--bg-white);
  font-size: 14px;
  opacity: .86;
}

/* ---------- Demo video modal -------------------------------------------- */
#demoModal .modal-body { background: var(--dark-black); padding: 0; }
#demoModal .modal-content { background: var(--dark-black); border: none; }
#demoModal #demoVideo { width: 100%; height: auto; display: block; background: #000; }

/* ---------- How it works step icons ------------------------------------- */
.how_it_inner .steps_block .icon .icon_inner {
  width: 54px;
  height: 54px;
  background: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how_it_inner .steps_block .icon .icon_inner i {
  font-size: 28px;
  line-height: 1;
  color: #7a3df7;
}

/* ---------- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sample, .sample__play { transition: none; }
  .samples__bar { transition: none; }
}

/* ---------- Mobile ------------------------------------------------------- */
@media (max-width: 480px) {
  .sample { grid-template-columns: 72px 1fr auto; gap: 12px; padding: 12px; }
  .sample__cover { width: 72px; height: 72px; }
  .sample__title { font-size: 16px; }
  .sample__blurb { font-size: 13px; }
  .sample__play { width: 44px; height: 44px; font-size: 16px; }
}

/* ---------- Contact page: single centered card + "or" divider ----------- */
.contact_listing.contact_listing--single {
  display: flex;
  justify-content: center;
}
.contact_listing.contact_listing--single > li {
  max-width: 360px;
  width: 100%;
}
.contact_or {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 360px;
  margin: 40px auto 0;
  color: #6c7078;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}
.contact_or::before,
.contact_or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

/* ---------- Footer download wordmark ------------------------------------ */
footer .download_side h3 {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.footer_brand_mark {
  height: 0.9em;
  width: auto;
  transform: translateY(0.1em);
}

/* ---------- Fabulous Apps signature dot --------------------------------- */
.design_by .fab_dot {
  color: #2563eb;
  font-size: 2.4em;
  line-height: 0;
  vertical-align: baseline;
  display: inline-block;
  margin-left: 1px;
}

/* ---------- Legal / privacy page --------------------------------------- */
.legal_section .legal_content {
  max-width: 820px;
  margin: 40px auto 0;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.75;
}
.legal_section .legal_content h3 {
  font-family: 'Cormorant Garamond', 'Manrope', serif;
  font-size: 28px;
  color: #0f172a;
  margin: 40px 0 12px;
  letter-spacing: -0.3px;
}
.legal_section .legal_content h3:first-child {
  margin-top: 0;
}
.legal_section .legal_content p {
  margin: 0 0 16px;
}
.legal_section .legal_content ul {
  list-style: disc outside;
  padding-left: 1.2em;
  margin: 0 0 20px 0.2em;
}
.legal_section .legal_content ul li {
  list-style: disc outside;
  margin-bottom: 8px;
}
.legal_section .legal_content a {
  color: #2563eb;
  text-decoration: underline;
}

/* ---------- Contact form ---------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cf_hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cf-turnstile {
  margin: 0 0 20px;
}
.cf_status {
  min-height: 24px;
  font-size: 14px;
  line-height: 1.4;
  padding: 6px 0;
}
.cf_status--pending { color: rgba(255, 255, 255, 0.75); }
.cf_status--success { color: #9ae6b4; }
.cf_status--error   { color: #feb2b2; }