/* ==========================================================================
   Faithe — Homepage  (Figma: 08. Build Homepage / Faithe - Desktop v2, 1440px)
   ========================================================================== */

:root{
  --black:#000000;
  --bg:#000000;
  --frame:#2A282F;
  --yellow:#FFDE77;
  --card:#1D1C1F;
  --icon-muted:#4C4F5E;
  --muted:#D1D5DB;
  --text:#FFFFFF;
  --dark-text:#2A282F;
  --content:1216px;
  --gutter:112px;
  --sans:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Newsreader','New York',ui-serif,Georgia,'Times New Roman',serif;
  --ui:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}

/* ---------- Layout helpers ---------- */
.container{
  max-width:var(--content);
  margin-inline:auto;
  padding-inline:clamp(20px,6vw,var(--gutter));
  width:100%;
}
.narrow{max-width:980px;}
.center{text-align:center;}
.center-text{text-align:center;}
.br-mobile{display:none;} /* forced line break shown only on mobile */

/* ---------- Typography ---------- */
.display{
  font-family:var(--sans);
  font-weight:700;
  font-size:60px;
  line-height:72px;
  letter-spacing:-0.5px;
  color:var(--text);
}
.display em,
.h-feature em,
.card-title em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--yellow);
  letter-spacing:0;
}
.display em{font-size:72px;line-height:1;}

.h-feature{
  font-family:var(--sans);
  font-weight:700;
  font-size:36px;
  line-height:44px;
  color:var(--text);
}
.h-feature em{font-size:44px;line-height:1;}

.serif-heading{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:44px;
  line-height:1;
  letter-spacing:-0.8px;
  color:var(--yellow);
}

.lead{
  font-size:24px;
  line-height:40px;
  letter-spacing:-0.5px;
  color:var(--text);
  font-weight:400;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ui);
  font-weight:700;
  font-size:20px;
  line-height:24px;
  border-radius:16px;
  border:0;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.btn-primary{
  background:var(--yellow);
  color:var(--dark-text);
  height:56px;
  padding:0 32px;
}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 8px 30px rgba(255,222,119,.25);transform:translateY(-1px);}

/* ==========================================================================
   HERO / SECTION 1
   ========================================================================== */
.hero{
  position:relative;
  background:#000 url('../assets/img/hero-bg.jpg') no-repeat top center;
  background-size:cover;
  overflow:hidden;
}

/* --- Nav --- */
.nav{position:relative;z-index:5;}
.nav-inner{
  max-width:1440px;
  margin-inline:auto;
  padding:20px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}
.logo{display:inline-flex;align-items:center;gap:12px;}
.logo-icon{width:64px;height:64px;}
.logo-name{
  font-family:var(--sans);
  font-weight:700;
  font-size:36px;
  color:#fff;
  letter-spacing:-0.5px;
}
.nav-menu{display:none;}
.nav-links{display:flex;align-items:center;gap:40px;}
.nav-close{display:none;}
.nav-link{
  font-family:var(--ui);
  font-weight:700;
  font-size:20px;
  line-height:24px;
  color:#fff;
  position:relative;
  white-space:nowrap;
}
.nav-link.is-active{color:var(--yellow);}
.nav-link.is-active::after{
  content:"";
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:-8px;
  width:60px;height:2px;border-radius:2px;
  background:var(--yellow);
  box-shadow:0 0 2px #fff;
}
.nav-btn{margin-left:8px;}
.nav-toggle{display:none;}

/* --- Hero content --- */
.hero-wrap{
  position:relative;
  max-width:1440px;
  margin-inline:auto;
  padding:0 var(--gutter);
  /* tall enough to fully contain the absolutely-positioned phone
     (top:100 + 770px image + drop shadow) so .hero's overflow:hidden
     never clips it at the bottom */
  min-height:900px;
}
.hero-copy{
  position:relative;
  z-index:3;
  max-width:561px;
  padding-top:154px;
}
.hero-copy .display{margin-bottom:40px;}
.hero-copy .lead{max-width:521px;margin-bottom:40px;}
.store-badge img{height:56px;width:auto;}
.hero-phone{
  position:absolute;
  top:100px;
  right:calc(var(--gutter) - 140px);
  width:770px;
  max-width:none;
  z-index:2;
  pointer-events:none;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.5));
}
.hero-phone img{display:block;width:100%;}

/* ==========================================================================
   SECTION 2 — FEATURES
   ========================================================================== */
.features{background:#000;position:relative;}

/* Bible videos showcase */
.video-showcase{padding-top:8rem;}
.video-showcase .h-feature{margin-bottom:30px;}
.video-carousel{
  margin-top:6px;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:20px;
}
.video-carousel img{width:100%;margin-bottom:8rem;}

/* Feature rows (verse explanations / ai chat) */
.feature-row{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  min-height:464px;
}
.feature-visual{position:absolute;top:0;width:60.76%;} /* 875 / 1440 */
.feature-visual.right{right:12.78%;}   /* frame right 1256 -> (1440-1256)/1440 */
.feature-visual.left{left:0;}
.feature-visual img{width:100%;}
.feature-copy{
  position:relative;
  z-index:2;
  max-width:640px;
  padding-top:98px;
}
.feature-copy .h-feature{margin-bottom:30px;}
.feature-copy.left-copy{margin-left:var(--gutter);}
.feature-copy.right-copy{
  margin-left:auto;
  margin-right:var(--gutter);
  text-align:right;
}

/* ... and more */
.and-more{padding-top:110px;}
.and-more .serif-heading{margin-bottom:80px;}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.feature-card{
  position:relative;
  border-radius:40px;
  background:var(--card);
  padding:40px;
  min-height:392px;
  overflow:hidden;
}
.feature-card::before{ /* silver gradient border (Figma #636679 -> transparent) */
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(200deg,#636679 0%,rgba(99,102,121,0) 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.feature-card > *{position:relative;z-index:1;}
.fc-icon{
  width:64px;height:64px;border-radius:16px;
  background:var(--icon-muted);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:50px;
}
.fc-icon img{width:64px;height:64px;border-radius:16px;}
.fc-icon-accent{background:linear-gradient(180deg,var(--yellow),#FBBC05);}
.card-title{
  font-family:var(--sans);
  font-weight:700;
  font-size:24px;
  line-height:1.15;
  margin-bottom:16px;
}
.card-title em{font-size:28px;}
.card-body{
  font-size:16px;
  line-height:24px;
  color:var(--text);
  opacity:.9;
}

/* ==========================================================================
   SECTION 3 — TESTIMONIALS
   ========================================================================== */
.testimonials{
  background:#000;
  position:relative;
}
/* Desktop: the original three-across row of review cards.
   On mobile (<=760px) this becomes a pinned scroll-through stack — see the
   mobile media query below. */
.testi-scroll{position:relative;}
.testi-sticky{padding:8rem 0 100px;}
.testimonials .title.display{margin-bottom:50px;text-align:center;}
.testi-stack{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  max-width:1274px;
  margin-inline:auto;
  padding-inline:clamp(20px,6vw,32px);
}
.testi-card{
  position:relative;
  flex:1 1 0;
  border-radius:40px;
  padding:40px;
  overflow:hidden;
  /* inner golden gradient, no border — glow bleeds in from the top-left
     and bottom-right corners, clipped to the rounded card
     (Figma: Ellipse 94 / Ellipse 95 inside a clipped frame) */
  background:
    radial-gradient(85% 80% at 0% 0%, rgba(255,222,119,.32) 0%, rgba(255,222,119,0) 58%),
    radial-gradient(85% 80% at 100% 100%, rgba(255,222,119,.32) 0%, rgba(255,222,119,0) 58%),
    #000;
}
.testi-card-lg{flex:1.15 1 0;padding:40px 40px 48px;}
.testi-card > *{position:relative;z-index:1;}
.stars{
  color:#FFCB45;
  font-size:20px;
  letter-spacing:3px;
  margin-bottom:30px;
}
.testi-title{
  font-family:var(--sans);
  font-weight:700;
  font-size:24px;
  line-height:1.2;
  margin-bottom:30px;
}
.testi-quote{
  font-size:16px;
  line-height:24px;
  color:var(--text);
  opacity:.85;
}
/* Per-card golden corner glows are applied via .testi-card box-shadow above. */

/* ==========================================================================
   SECTION 4 — FAQ
   ========================================================================== */
.faq{background:#000;padding:50px 0;}
.faq-inner{
  max-width:var(--content);
  margin-inline:auto;
  padding-inline:clamp(20px,6vw,var(--gutter));
  display:grid;
  grid-template-columns:1fr 760px;
  gap:64px;
  align-items:start;
}
.faq-heading{padding-top:120px;}
.faq-list{display:flex;flex-direction:column;gap:20px;}
.faq-item{
  position:relative;
  background:var(--card);
  border-radius:20px;
  overflow:hidden;
}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  background:none;border:0;cursor:pointer;
  color:#fff;
  font-family:var(--sans);
  font-weight:400;
  font-size:24px;
  line-height:40px;
  letter-spacing:-0.5px;
  padding:30px;
}
.faq-chevron{
  flex:0 0 auto;
  width:24px;height:24px;
  position:relative;
  transition:transform .3s ease;
}
.faq-chevron::before{
  content:"";position:absolute;top:6px;left:7px;
  width:9px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.faq-a > p{
  overflow:hidden;
  margin:0 30px;
  font-size:24px;
  line-height:40px;
  letter-spacing:-0.5px;
  color:#fff;
  border-top:2px solid var(--icon-muted);
  padding:0;
  opacity:0;
  transition:opacity .3s ease;
}
/* open state */
.faq-item.is-open{
  border-top:2px solid transparent;
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(200deg,var(--yellow) 0%,var(--card) 45%) border-box;
  border:2px solid transparent;
}
.faq-item.is-open .faq-q{color:var(--yellow);padding-bottom:20px;}
.faq-item.is-open .faq-chevron{transform:rotate(180deg);}
.faq-item.is-open .faq-chevron::before{border-color:var(--yellow);}
.faq-item.is-open .faq-a{grid-template-rows:1fr;}
.faq-item.is-open .faq-a > p{opacity:1;padding-top:20px;padding-bottom:30px;}

/* ==========================================================================
   SECTION 5 — CTA
   ========================================================================== */
.cta{
  background:#000;
  position:relative;
  padding:100px 0 120px;
  text-align:center;
  overflow:hidden;
}
.cta .h-feature{margin-bottom:30px;}
.cta .lead{margin-bottom:60px;max-width:980px;margin-inline:auto;}
.cta-btn{position:relative;z-index:2;}
.cta-glow{
  position:absolute;
  left:50%;bottom:-120px;transform:translateX(-50%);
  width:854px;max-width:90%;height:300px;
  background:var(--yellow);
  border-radius:50%;
  filter:blur(160px);
  opacity:.55;
  z-index:0;
  pointer-events:none;
}

/* ==========================================================================
   FOOTER / SECTION 6
   ========================================================================== */
.footer{background:#000;}
.footer-inner{
  max-width:var(--content);
  margin-inline:auto;
  padding:64px clamp(20px,6vw,var(--gutter));
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}
.footer-main{
  display:flex;
  flex-direction:column;
  gap:24px;
  flex:1;
  min-width:0;
}
.footer-logo .logo-icon{width:48px;height:48px;}
.footer-logo .logo-name{font-family:var(--ui);font-size:20px;font-weight:700;}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.footer-links a{
  font-size:16px;
  color:#fff;
  opacity:.92;
}
.footer-links a:hover{color:var(--yellow);opacity:1;}
.footer-legal{
  font-size:14px;
  line-height:20px;
  color:var(--muted);
}
.footer-social{
  flex-shrink:0;
  align-self:center;
}
.footer-social-links{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:20px;
}
.footer-social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:8px;
  opacity:.92;
  transition:opacity .15s ease, transform .15s ease;
}
.footer-social-links a:hover{
  opacity:1;
  transform:scale(1.08);
}
.footer-social-links img{
  display:block;
  width:24px;
  height:24px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:761px){
  .nav-menu{display:flex;align-items:center;gap:40px;}
  .nav-overlay-body{display:contents;}
}
/* Tighten the nav so the "Get Faithe" button always stays on one line
   (shrink links + padding to make room). */
@media (min-width:761px) and (max-width:1280px){
  .nav-inner{padding-inline:40px;gap:24px;}
  .nav-menu{gap:28px;}
  .nav-links{gap:24px;}
  .nav-link{font-size:16px;line-height:22px;}
  .logo-icon{width:52px;height:52px;}
  .logo-name{font-size:28px;}
  .nav-btn{flex-shrink:0;padding:0 24px;height:52px;font-size:18px;}
}

/* 1025–1400px: hero stays side-by-side; the copy and image become flex
   columns that scale together, so they shrink to fit without overlapping
   (and the image never drops to its own row). */
@media (min-width:1025px) and (max-width:1400px){
  .hero-wrap{
    display:flex;
    align-items:center;
    gap:clamp(24px,3vw,48px);
    min-height:0;
    padding:88px clamp(40px,5vw,88px) 56px;
  }
  .hero-copy{
    position:static;
    padding-top:0;
    max-width:none;
    flex:1 1 47%;
    min-width:0;
  }
  .hero-copy .display{font-size:clamp(40px,4.4vw,60px);line-height:1.08;}
  .hero-copy .display em{font-size:clamp(46px,5vw,72px);}
  .hero-copy .lead{max-width:none;}
  .hero-phone{
    position:static;
    top:auto;right:auto;
    width:auto;
    max-width:none;
    flex:1 1 53%;
    min-width:0;
    margin:0;
  }
}
/* <=1024px: not enough room for two columns — stack the hero. */
@media (max-width:1024px){
  .hero-wrap{display:flex;flex-direction:column;min-height:0;padding-bottom:40px;}
  .hero-copy{padding-top:60px;max-width:100%;}
  .hero-phone{position:relative;top:0;right:auto;width:min(560px,92%);margin:24px auto 0;}
}
@media (max-width:1100px){
  :root{--gutter:56px;}
  .display{font-size:48px;line-height:1.1;}
  .display em{font-size:56px;}

  /* Feature rows stack */
  .feature-row{display:flex;flex-direction:column;min-height:0;gap:24px;padding-block:20px;}
  .feature-visual{position:relative;width:100%;right:auto;left:auto;}
  .feature-copy{padding-top:0;max-width:100%;margin:0 auto;padding-inline:56px;}
  .feature-copy.right-copy{text-align:left;margin:0 auto;}

  /* FAQ stacks */
  .faq-inner{grid-template-columns:1fr;gap:32px;}
  .faq-heading{padding-top:0;}
  .faq-list{max-width:760px;}
}
@media (max-width:820px){
  .card-grid{grid-template-columns:1fr 1fr;}
  /* Tablet: stack the review cards into a centered column (previous design). */
  .testi-stack{flex-direction:column;max-width:520px;}
  .testi-card,.testi-card-lg{flex:none;width:100%;}
}

/* ==========================================================================
   MOBILE — matches Figma "09. Build Mobile Homepage" (Faithe - Mobile v2, 375px)
   ========================================================================== */
@media (max-width:760px){
  :root{--gutter:20px;}

  picture{display:block;}

  /* ---- Global mobile type ---- */
  .display{font-size:36px;line-height:44px;}
  .display em{font-size:42px;}
  .h-feature{font-size:36px;line-height:44px;}
  .h-feature em{font-size:42px;}
  .serif-heading{font-size:42px;line-height:50px;letter-spacing:-1.3px;}
  .lead{font-size:18px;line-height:28px;letter-spacing:0;}

  /* ---- Nav (fullscreen overlay, close arrow top-left, CTA bottom) ---- */
  .nav-inner{padding:12px 20px;gap:16px;}
  .logo-icon{width:48px;height:48px;}
  .logo-name{font-size:22px;}
  .nav-menu{
    position:fixed;inset:0;
    display:none;z-index:100;
    flex-direction:column;align-items:stretch;
    padding:12px 20px max(32px, env(safe-area-inset-bottom));
    background:var(--bg);
  }
  .nav-menu.is-open{display:flex;}
  .nav-overlay-body{
    flex:1;
    display:flex;
    flex-direction:column;align-items:flex-start;
    gap:40px;min-height:0;
  }
  .nav-close{
    display:flex;align-items:center;justify-content:flex-start;
    width:auto;height:auto;
    background:none;border:0;cursor:pointer;
    color:#fff;padding:0;flex-shrink:0;
  }
  .nav-close-icon{
    display:block;
    width:12px;height:12px;
    border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
  }
  .nav-links{
    display:flex;
    flex-direction:column;align-items:flex-start;
    gap:40px;padding:0;
  }
  .nav-link{font-size:24px;line-height:32px;text-align:left;}
  .nav-link.is-active::after{display:none;}
  .nav-btn{margin-left:0;width:100%;flex-shrink:0;}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:40px;background:none;border:0;cursor:pointer;padding:8px;
  }
  .nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;}

  body.nav-open{overflow:hidden;}

  /* ---- Hero: centered copy + mobile illustration, mobile bg crop ---- */
  .hero{
    background:#000 url('../assets/img/m-hero-bg.jpg') no-repeat top center;
    background-size:100% auto;
  }
  .hero-wrap{display:flex;flex-direction:column;min-height:0;padding:0 20px;}
  .hero-copy{
    padding-top:40px;max-width:100%;text-align:center;
    display:flex;flex-direction:column;align-items:center;
  }
  .hero-copy .display{margin-bottom:32px;}
  .hero-copy .lead{max-width:100%;margin-bottom:32px;}
  .store-badge img{height:48px;}
  .hero-phone{
    position:relative;top:0;right:auto;left:auto;
    width:100%;max-width:375px;margin:0 auto;
    display:block;filter:none;
  }
  .hero-phone img{width:100%;display:block;}

  /* ---- Bible videos (left-aligned heading + body) ---- */
  .video-showcase{padding-top:0;}
  .video-showcase .container{text-align:left;max-width:100%;}
  .video-showcase .lead.center-text{text-align:left;}
  .video-showcase .h-feature{margin-bottom:30px;margin-top: 4rem;}
  .video-carousel{margin-top:30px;padding-inline:0;max-width:100%;}
  .video-carousel img{width:100%;}

  /* ---- Feature rows: text first (left), image full-width below ---- */
  .feature-row{
    display:flex;flex-direction:column-reverse;
    min-height:0;gap:30px;padding:0 20px 50px;
  }
  .feature-visual{position:relative;width:100%;right:auto;left:auto;margin:0;}
  .feature-visual img{width:100%;}
  .feature-copy{padding-top:0;max-width:100%;margin:0;text-align:left;padding-inline:0;}
  .feature-copy.right-copy{text-align:left;margin:0;}
  .feature-copy .h-feature{margin-bottom:30px;}

  /* ---- ...and more (left heading, single-column large cards) ---- */
  .and-more{padding-top:30px;}
  .and-more .serif-heading{text-align:left;margin-bottom:30px;}
  .card-grid{grid-template-columns:1fr;gap:20px;}
  .feature-card{
    min-height:370px;padding:30px;border-radius:40px;
    display:flex;flex-direction:column;
  }
  .fc-icon{margin-bottom:0;}
  .card-title{margin-top:auto;font-size:38px;line-height:44px;margin-bottom:16px;}
  .card-title em{font-size:42px;}
  .card-body{font-size:16px;line-height:24px;}

  /* ---- Testimonials: pinned scroll-through stack (mobile only) ---- */
  .testi-sticky{padding:6rem 0 70px;}
  .testi-stack{flex-direction:column;max-width:100%;gap:20px;}
  .testi-card,.testi-card-lg{flex:none;width:100%;}
  .testi-card{padding:32px 24px;}
  .testi-card-lg{padding:32px 24px;}
  .testi-title{font-size:24px;}
  .testi-quote{font-size:16px;line-height:24px;}
  .br-mobile{display:inline;}

  /* JS adds .is-scrollstack on mobile to pin the viewport and scrub cards */
  .testimonials.is-scrollstack .testi-sticky{
    position:sticky;top:0;
    height:100vh;height:100svh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(20px,4vh,44px);
    padding:0 20px;
  }
  .testimonials.is-scrollstack .title.display{margin-bottom:0;}
  .testimonials.is-scrollstack .testi-stack{
    position:relative;
    width:min(520px,100%);max-width:520px;
    gap:0;padding:0;margin:0;
  }
  .testimonials.is-scrollstack .testi-card{
    position:absolute;top:50%;left:50%;
    width:100%;margin:0;
    transform:translate(-50%,-50%);
    will-change:transform,opacity;
    backface-visibility:hidden;
  }

  /* ---- FAQ: centered heading, single column ---- */
  .faq{padding:20px 0 50px;}
  .faq-inner{grid-template-columns:1fr;gap:30px;padding-inline:20px;}
  .faq-heading{padding-top:0;text-align:center;}
  .faq-list{max-width:100%;}
  .faq-q{font-size:18px;line-height:28px;padding:24px 20px;}
  .faq-item.is-open .faq-q{padding-bottom:18px;}
  .faq-a > p{font-size:16px;line-height:24px;margin-inline:20px;}

  /* ---- CTA: centered, 250px button, bottom glow ---- */
  .cta{padding:30px 0 50px;}
  .cta .lead{margin-bottom:40px;}
  .cta-btn{width:250px;max-width:100%;}
  .cta-glow{bottom:-40px;height:180px;width:306px;}

  /* ---- Footer ---- */
  .footer-inner{padding:30px 20px 50px;gap:24px;}
  .footer-main{gap:32px;}
  .footer-links{gap:12px 24px;max-width:290px;}
  .footer-social{align-self:flex-start;}
  .footer-social-links{gap:16px;}
  .footer-social-links a{width:36px;height:36px;}
  .footer-social-links img{width:22px;height:22px;}
}