/* Fonts */
@font-face {
  font-family: 'GalanoClassic';
  src: url('./fonts/GalanoClassic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GalanoClassic';
  src: url('./fonts/GalanoClassic-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Base */
:root {
  --bg-purple: #7b5cd6;
  --bg-purple-dark: #6b4bc7;
  --bg-purple-original: #8e65c1;
  --bg-purple-light: #d7c3fa;
  --bg-black-muted: #2a2831;
  --deep-plum: #4e3e78;
  --primary-muted: #E57150;
  --primary-logo-dark: #e96248;
  --primary-test: #f56045;
  --primary-orange-organic: #d87943;
  --secondary-purple: #4c4654;  
  --matte-black: #323232;
  --muted-plum: #5a4f6b;
  --white: #ffffff;
  --matte-white: #F2F2F2;
  --bg-warm-white: #f6f5f7;
  --btn-green: #39c087;
  --btn-green-org: #41cab6;
  --btn-green-org-muted: #3CB6A3;
  --muted-dark-green: #6a9989;
  --card: #f3f4f6;
  --card-dark: #1e1e22;
  --container: 1200px;
  --tile-height: 300px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg-warm-white);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.primary-btn {
  display: inline-block;
  /* background: var(--primary-logo-dark); */
  background: #D86152;
  /* background: #E07A5F; */
  color: var(--white);
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}

.login { color: var(--text); text-decoration: none; margin-right: 16px; font-weight: 600; }

.nowrap { white-space: nowrap; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-warm-white);
  border-bottom: 1px solid #ececf1;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand { font-weight: 900; letter-spacing: .5px; }
.brand img { height: 58px; width: auto; display: block; }
.nav { display: none; gap: 24px; align-items: center; }
.nav-link { color: var(--text); text-decoration: none; font-weight: 600; }
.nav-dropdown { background: transparent; border: 0; cursor: pointer; font-weight: 700; }
.header-cta { display: flex; align-items: center; }

@media (min-width: 900px) { .nav { display: flex; } }

/* Hero */
.hero {
  background:
    /* radial-gradient(circle at 12px 12px, rgba(255,255,255,.15) 1px, transparent 1px) 0 0/32px 32px, */
    /* linear-gradient(90deg, var(--matte-white), var(--bg-warm-white)); */
    linear-gradient(180deg, #f6f5f7, #1f1f1f);
  color: var(--white);
  padding: 46px 0 0;
  overflow: visible;
  min-height: 60vh;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.hero-title {
  font-family: 'DM Sans', 'GalanoClassic', Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 4vw, 40px);  
  line-height: 1.2;
  margin: 0 0 16px 0;
  color: var(--secondary-purple);
  /* color: #3d2f5f; */
  /* color: #3D405B; */
  letter-spacing: -0.05em;
}
.hero-sub { max-width: 48ch;
   /* color: var(--muted-plum);  */
   color: #3D405B;
   font-size: 18px; 
   font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
    font-weight: 500; }
.hero-actions { margin-top: 24px; }
.hero-eyebrow {
  display: inline-block;
  margin: 0 0 12px 0;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #9F9AA4;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.hero-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  margin-bottom: -180px; /* overlap into next section */
  position: relative;
  z-index: 2;
}

.hero-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* right: calc(-100vw + 100%); */
  bottom: 0;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.7) 1px, transparent 1px) 0 0/32px 32px;
  z-index: -1;
  pointer-events: none;
}
.cards-col { display: grid; gap: 16px; grid-auto-rows: min-content; }
/* Stagger the right-hand column to start lower */
.hero-right .cards-col:nth-child(2) { margin-top: 64px; }
.card {
  border-radius: 12px;
  background: var(--card);
  height: var(--tile-height); /* lock card height so images don't change size */
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, color 160ms ease;
  text-decoration: none;
  color: inherit;
}
/* Make link cards feel clickable */
a.card { cursor: pointer; }
.card > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* Minimal hover/focus effect */
.card:hover,
.card:focus-visible { 
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.22);
  filter: saturate(1.03);
}

/* Dark CTA card hover: brighten background and set text to white */
.card.placeholder.dark:hover,
.card.placeholder.dark:focus-visible {
  color: #ffffff;
  filter: brightness(1.12) saturate(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}
.card.placeholder.dark { background: var(--card-dark); color: #bfbfc6; display: grid; place-items: center; font-weight: 700; }
.card.small {}
.card.medium {}
.card.tall {}
.card.wide {}
.hide-on-mobile { display: none; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.2fr 1fr; align-items: center; }
  .hero-title { font-size: 64px; }
  .hide-on-mobile { display: initial; }
  .hero-right { margin-bottom: -220px; }
  .why { padding-top: 80px; }
}

@media (max-width: 899px) {
  .hero-right { margin-bottom: -100px; }
  .why { padding-top: 120px; }
}

@media (max-width: 600px) {
  .hero-right { margin-bottom: -60px; }
  .why { padding-top: 100px; }
}

/* Why trust us */
.why { 
  background: var(--bg-warm-white); 
  padding: 46px 0 72px; 
  position: relative;
  z-index: 1;
}
.why-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.section-badge {
  display: inline-block;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif; 
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #6E9984;
  color: var(--matte-white);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.why-title { 
  font-size: clamp(32px, 5vw, 40px);
  margin: 0 0 16px 0;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif; 
  font-weight: 600;
  color: var(--matte-black);
}
.why-text { max-width: 850px; }
.why-text p { 
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.5; 
  color: #323232; 
}
.why-aside { display: none; }

.why-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.why-gallery .card { min-height: 220px; }
.why-gallery .dark.center { display: grid; place-items: center; color: #bfbfc6; font-weight: 700; }

@media (min-width: 900px) {
  .why-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; }
  .why-aside { display: block; }
}

/* AI Feature section */
.ai-feature {
  padding: 128px 0;
  background: var(--bg-warm-white);
}
.ai-feature-grid {
  display: grid;
  gap: 80px;
  align-items: center;
}
.ai-feature-copy {
  max-width: 560px;
}
.ai-feature-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #43c96a;
  color: #0b3d1f;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.ai-feature-title {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.1;
  margin: 0 0 24px 0;
  color: var(--secondary-purple);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-feature-title svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}
.ai-feature-sub {
  font-size: 18px;
  line-height: 1.6;
  color: #49475a;
  margin: 0 0 32px 0;
}
.ai-feature-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 24px;
}
.ai-feature-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}
.point-icon {
  font-size: 24px;
  line-height: 1;
}
.ai-feature-points strong {
  font-size: 18px;
  color: var(--secondary-purple);
}
.ai-feature-points p {
  margin: 4px 0 0 0;
  color: #4f5061;
  line-height: 1.5;
}
.ai-feature-visual {
  display: flex;
  justify-content: center;
}
.ai-feature-image {
  width: min(520px, 95%);
  border-radius: 32px;
  box-shadow:
    0 30px 80px rgba(47, 33, 71, 0.18),
    0 8px 20px rgba(47, 33, 71, 0.12);
}

@media (min-width: 980px) {
  .ai-feature-grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

@media (max-width: 979px) {
  .ai-feature {
    padding: 96px 0;
  }
  .ai-feature-grid {
    gap: 48px;
  }
  .ai-feature-phone {
    width: min(360px, 100%);
  }
}

@media (max-width: 640px) {
  .ai-feature {
    padding: 72px 0;
  }
  .ai-feature-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ai-feature-phone {
    padding: 20px 18px 26px;
  }
  .ai-feature-phone-screen {
    padding: 20px;
    gap: 14px;
  }
}

/* Features Grid 4 - White boxes */
.features-grid-4 {
  padding: 48px 0;
  background: var(--bg-warm-white);
}

.features-grid-4-title {
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  font-weight: 600;
  font-size: 40px;
  text-align: center;
  color: var(--matte-black);
  margin: 0 0 12px 0;
  /* line-height: 1.2; */
}

.features-grid-4-subtitle {
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  text-align: center;
  color: var(--matte-black);
  margin: 0 0 64px 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.3;
}

.features-grid-4-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.feature-box {
  background: transparent;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.feature-box--purple {
  background: #608788;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feature-box--purple .feature-box-title,
.feature-box--purple p {
  color: var(--matte-white) !important;
}

.feature-box-title {
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 14px 0;
  color: var(--matte-black);
  text-align: left;
  line-height: 1.2;
}

.feature-box p {
  color: var(--matte-black);
  font-size: 16px;
  line-height: 1.5;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  margin: 0;
}

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

@media (max-width: 600px) {
  .features-grid-4-container {
    grid-template-columns: 1fr;
  }
}

/* Benefits section */
.benefits { padding: 48px 0; background: var(--bg-warm-white); }
.benefits-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 48px; 
  align-items: center;
  background: #2d5f5f;
  clip-path: polygon(100px 0%, 100% 0%, 100% 1000px, 100% 100%, calc(100% - 60px) 100%, 0% 100%, 0% calc(100% - 60px), 0% 0%);
  padding: 56px 48px;
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
  overflow: visible;
}
.benefits { overflow: visible; }
.benefits-title { 
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif; 
  font-weight: 700;
  font-size: 40px; 
  margin: 0 0 32px 0; 
  color: var(--matte-white);
}
.benefits-left .primary-btn { 
  display: inline-block; 
}
.benefits-list ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}
.benefits-list li { 
  padding: 12px 0 12px 36px; 
  position: relative; 
  color: var(--matte-white); 
  font-size: 18px; 
  line-height: 1.6;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
}
.benefits-list li::before { 
  content: '✓'; 
  position: absolute; 
  left: 0; 
  color: var(--btn-green-org);
  font-weight: 700; 
  font-size: 20px; 
}

@media (min-width: 900px) {
  .benefits-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

@media (max-width: 600px) {
  .benefits-grid { padding: 40px 24px; }
}

/* Features section */
.features { padding: 48px 0 120px; background: var(--bg-warm-white); }
.features-title { 
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif; 
  font-size: 40px; 
  text-align: center; 
  margin: 0 0 12px 0;
}
.features-sub {
  max-width: 70ch;
  margin: 0 auto 40px auto;
  text-align: center;
  color: #323232;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
}
.feature-cards { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 24px; 
  align-items: start;
}
.feature-card { 
  border-radius: 16px; 
  background: #fff; 
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.feature-card-head { 
  background: var(--muted-dark-green); 
  color: var(--matte-white); 
  padding: 20px 24px; 
  font-weight: 800; 
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  height: 80px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.feature-card-body { 
  padding: 32px 24px; 
  background: #fff; 
  display: flex;
  flex-direction: column;
  text-align: center;
  flex: 1;
}
.feature-card-body p { 
  margin: 0 0 24px 0; 
  color: #323232; 
  font-size: 16px; 
  line-height: 1.6; 
}
.feature-icon { 
  font-size: 48px; 
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 900px) {
  .feature-cards { grid-template-columns: repeat(4, 1fr); }
}

/* Testimonial section */
.testimonial { padding: 32px 0; background: var(--bg-warm-white); }
.testimonial-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 48px; 
  align-items: center;
}
.testimonial--reverse .testimonial-grid {
  /* same structure; order handled by markup */
}
.testimonial-shape {
  /* background: #2d5f5f; */
  background: #5f8787;
  clip-path: polygon(0% 0%, calc(100% - 60px) 0%, 100% 60px, 100% calc(100% - 60px), 100% 100%, 60px 100%, 0% calc(100% - 60px), 0% 0%);
  padding: 24px; /* smaller interior space */
  min-height: 160px; /* about half of original */
  width: 100%;
  max-width: 50vw; /* extend to half the page */
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
}
.testimonial--reverse .testimonial-shape { justify-self: end; }
.testimonial--reverse .testimonial-shape {
  /* mirror the clipped corners (top-left and bottom-right) */
  clip-path: polygon(0% 0%, calc(100% - 120px) 0%, 100% 120px, 100% calc(100% - 120px), 100% 100%, 100px 100%, 0% calc(100% - 80px), 0% 0%);
}
.testimonial-content { 
  color: var(--matte-white); 
  text-align: left; 
}
.testimonial-content .testimonial-text {
  padding: 0;
  text-align: left;
}
.testimonial-quote { 
  font-size: 28px; 
  line-height: 1.4; 
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  font-weight: 500;
  margin: 0;
  color: rgba(255,255,255,.95);
}
.testimonial-text { 
  padding: 0 24px; 
}
.testimonial-title { 
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif; 
  font-weight: 700;
  font-size: 28px; /* reduced */
  margin: 0 0 12px 0; /* reduced */
  color: #323232;
  text-align: left;
}
.testimonial-text p { 
  color: #323232; 
  font-size: 16px; /* reduced */
  line-height: 1.5; /* reduced */
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  margin: 0;
}

@media (max-width: 900px) {
  .testimonial-shape { max-width: 100%; }
}

@media (min-width: 900px) {
  .testimonial-grid { grid-template-columns: 1.2fr 1fr; gap: 64px; }
  .testimonial-shape { min-height: 500px; }
}

/* 4-column testimonial grid */
.testimonial-grid-4-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.testimonial-grid-4 .testimonial-shape {
  max-width: 100%;
  width: 100%;
  min-height: 200px;
  height: 100%;
  justify-self: stretch;
  align-items: center;
  justify-content: center;
  padding: 24px;
  display: flex;
}

.testimonial-grid-4 .testimonial-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #323232;
  overflow: hidden;
  justify-content: center;
  flex: 1;
}

.testimonial-grid-4 .testimonial-content .testimonial-title {
  color: #323232;
  margin: 0 0 12px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex-shrink: 0;
}

.testimonial-grid-4 .testimonial-content .testimonial-text {
  color: #323232;
  padding: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-size: 16px;
  line-height: 1.5;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  flex-shrink: 0;
}

.testimonial-grid-4 .testimonial-text {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

@media (max-width: 600px) {
  .testimonial-grid-4-container {
    grid-template-columns: 1fr;
  }
}

/* How it started section */
.how-it-started {
  padding: 96px 0;
  background: var(--bg-warm-white);
  color: var(--text);
}
.how-it-started-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
.how-it-started-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a5aa8;
  margin: 0 0 16px 0;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
}
.how-it-started-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 24px 0;
  color: var(--text);
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
}
.how-it-started-text {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  color: #4b405f;
  margin: 0;
  max-width: 680px;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
}
.how-it-started-aside {
  display: none;
}

@media (min-width: 900px) {
  .how-it-started-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
  }
  .how-it-started-aside {
    display: block;
  }
}

/* Mission card (purple box) */
.mission-card {
  background: var(--bg-purple-light);
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
  color: #3d2f5f;
}
.mission-label {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 20px 0;
  color: #6a5aa8;
  font-weight: 700;
}
.mission-title {
  margin: 0 0 24px 0;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  color: #3d2f5f;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
}
.mission-icon { margin-top: 8px; }
.mission-icon svg { width: 44px; height: 44px; display: block; }

/* Footer */
.site-footer {
  background: var(--matte-black);
  color: var(--matte-white);
  padding: 64px 0 48px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-logo-image {
  width: 160px;
  height: auto;
  display: block;
}

.footer-title {
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 20px 0;
  color: #fff;
}

.footer-links-group {
  display: flex;
  gap: 64px;
  margin-left: auto;
  text-align: right;
  flex-wrap: wrap;
}

.footer-section {
  min-width: 200px;
}

.footer-section--contact {
  text-align: right;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  transition: opacity 0.2s;
}

.footer-links a:hover {
  opacity: 0.7;
}

.footer-contact {
  color: #fff;
  font-size: 14px;
  line-height: 1.8;
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
}

.footer-contact p {
  margin: 0 0 12px 0;
}

.footer-contact a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-contact a:hover {
  opacity: 0.7;
}

.footer-logo .ifs-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.ifs-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 32px;
  height: 32px;
}

.hex {
  width: 12px;
  height: 12px;
  background: #fff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: absolute;
}

.hex-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
}

.hex-bottom-left {
  bottom: 0;
  left: 0;
  background: #b0b0b0;
}

.hex-bottom-right {
  bottom: 0;
  right: 0;
  background: #b0b0b0;
}

.ifs-text {
  display: flex;
  flex-direction: column;
}

.ifs-main {
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  line-height: 1;
}

.ifs-sub {
  font-family: 'DM Sans','GalanoClassic', Inter, sans-serif;
  font-size: 12px;
  color: #b0b0b0;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .footer-links-group {
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    flex-direction: column;
    gap: 32px;
  }

  .footer-links-group {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
  }

  .footer-section--contact {
    text-align: left;
  }
}