/* home_page.css */
/* ==========================================================================
   1. VARIABILE ȘI SETĂRI DE BAZĂ (ROOT)
   ========================================================================== */
:root {
    --ifs-dark-blue: var(--primaryColor); /* Culoarea principala a brandului */
    --ifs-teal: var(--secondaryColor);  /* Culoarea secundara a brandului */
    --ifs-light-teal: #A8E6E9;
    --ifs-light-bg: #F8F9FA;
    --ifs-white: #FFFFFF;
    --ifs-text-light: #CCD6F6;
    --ifs-text-dark: #334155;

	--ifs-radius-xl: 1.5rem;
	--ifs-radius-lg: 1rem;
	--ifs-shadow-sm: 0 6px 18px rgba(0,0,0,0.06);
	--ifs-shadow-md: 0 14px 34px rgba(0,0,0,0.10);
	--ifs-shadow-xl: 0 26px 60px rgba(0,0,0,0.18);
	--ifs-border: rgba(15, 23, 42, 0.10);
	--ifs-grad-hero: radial-gradient(1200px 600px at 20% 20%, rgba(168,230,233,.25), transparent 60%);

}

.home-page {
    width: 100%;
    background-color: var(--ifs-light-bg);
}

#app {
    position: relative;
    z-index: 1;
    background: white;
    transition: transform 0.3s ease-out;
}

/* ==========================================================================
   2. HERO SECTION (.hero-section-ifs)
   ========================================================================== */
.hero-section-ifs {
    background-color: var(--ifs-dark-blue);
    color: var(--white);
    padding: 5rem 0 10rem 0;
    position: relative;
    overflow: hidden;
}

.hero-section-ifs * {
    color: var(--white);
}

.hero-section-ifs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23F8F9FA' fill-opacity='1' d='M0,192L80,170.7C160,149,320,107,480,112C640,117,800,171,960,197.3C1120,224,1280,224,1360,224L1440,224L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    transform: translateY(1px);
}

.hero-logo-ifs { 
    height: 12rem; 
    margin-bottom: 2rem;
}

.hero-list-ifs { 
    padding-left: 0; 
    list-style: none; 
    font-size: 1.1rem; 
}

.hero-list-ifs li { 
    position: relative;
    padding-left: 2em; 
    margin-bottom: 0.8rem; 
    color: var(--ifs-text-light); 
}

.hero-list-ifs .fa-li { 
    left: 0; 
    color: var(--ifs-teal); 
}

.hero-btn-ifs { 
    background-color: var(--ifs-teal); 
    border-color: var(--ifs-teal); 
    padding: 0.8rem 2.5rem; 
    font-weight: 600; 
    border-radius: 50px;
}

.hero-lottie-container-ifs { 
    background: transparent !important; 
}



.hero-section-ifs{
  background-image: var(--ifs-grad-hero);
}

.hero-media-ifs{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-video-shell-ifs{
  position:relative;
  width:100%;
  max-width:560px;
  border-radius: var(--ifs-radius-xl);
  overflow:hidden;
  box-shadow: var(--ifs-shadow-xl);
  border: 1px solid rgba(255,255,255,0.18);
}

.hero-video-ifs{
  width:100%;
  height: 460px;
  object-fit: cover;
  display:block;
}

.hero-video-overlay-ifs{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
}

.hero-trust-ifs{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip-ifs{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  font-weight:600;
  font-size:.95rem;
}

.hero-intents-ifs{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.intent-card-ifs{
  text-decoration:none;
  padding: 1.1rem 1.1rem;
  border-radius: var(--ifs-radius-lg);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 22px rgba(0,0,0,0.16);
  transition: transform .25s ease, background .25s ease;
}

.intent-card-ifs:hover{ transform: translateY(-6px); background: rgba(255,255,255,0.10); }

.intent-title-ifs{ font-weight:800; font-size:1.05rem; margin-bottom:.25rem; }
.intent-desc-ifs{ color: var(--ifs-text-light); opacity:.95; margin-bottom:.6rem; }
.intent-cta-ifs{ font-weight:700; color: var(--ifs-teal); }

@media (max-width: 992px){
  .hero-video-ifs{ height: 320px; }
  .hero-intents-ifs{ grid-template-columns: 1fr; }
}




/* ==========================================================================
   3. SUBPLATFORMS SECTION
   ========================================================================== */
.subplatforms-section-ifs { 
    padding: 6rem 0; 
    background-color: var(--ifs-light-bg); 
}

.scroll-wrapper-ifs {
    overflow: hidden;
    padding: 20px 0;
}

.subplatform-scroll-container-ifs {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 1rem 2rem; 
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
}

.subplatform-scroll-container-ifs::-webkit-scrollbar { 
    display: none; /* Chrome/Safari */
}

.platform-logo-ifs { 
    height: 2.5rem; 
    width: auto; 
    object-fit: contain; 
    margin-bottom: 1rem;
}

.platform-card-ifs{
  flex: 0 0 640px;
  min-height: 360px;
  scroll-snap-align: center;
  border-radius: var(--ifs-radius-xl);
  border: 1px solid var(--ifs-border);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: var(--ifs-shadow-md);
  display: flex;
  overflow: visible; /* IMPORTANT pentru efectul 3D */
  position: relative;
  transition: transform .28s ease, box-shadow .28s ease;
}

.platform-card-ifs::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: radial-gradient(800px 260px at 20% 0%, rgba(168,230,233,.25), transparent 55%);
  pointer-events:none;
  z-index:0;
}

.platform-card-ifs:hover{
  transform: translateY(-10px);
  box-shadow: var(--ifs-shadow-xl);
}

.platform-info-ifs{
  flex: 1.15;
  padding: 2.3rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  z-index:1;
}

.platform-topline-ifs{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.platform-badge-ifs{
  display:inline-flex;
  align-items:center;
  padding:.4rem .7rem;
  border-radius:999px;
  background: rgba(168,230,233,0.22);
  border: 1px solid rgba(168,230,233,0.35);
  font-weight:800;
  font-size:.85rem;
  color: var(--ifs-text-dark);
}

.platform-title-ifs{
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ifs-dark-blue);
}

.platform-desc-ifs{
  color: var(--ifs-text-dark);
  opacity: .92;
  margin-top: .75rem;
  margin-bottom: .9rem;
}

.platform-tags-ifs{
  list-style:none;
  padding:0;
  margin: .6rem 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.platform-tags-ifs li{
  padding:.35rem .6rem;
  border-radius:999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(248,249,250,0.75);
  font-weight:800;
  font-size:.85rem;
  color: var(--ifs-text-dark);
}

.platform-actions-ifs{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top: 1.1rem;
}

.platform-actions-ifs .btn{
  border-radius: 999px;
  padding: .7rem 1.05rem;
  font-weight: 800;
}

.platform-actions-ifs .btn-outline-primary{
  background: rgba(255,255,255,0.9);
}

.platform-preview-ifs{
  flex: 0.85;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
  z-index:1;
  padding: 1.6rem 1.6rem 1.2rem 0;
  background: transparent;
  overflow: visible;
  perspective: 1000px;
}

.platform-preview-ifs::after{
  content:"";
  position:absolute;
  right: 26px;
  bottom: 22px;
  width: 72%;
  height: 62%;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(15,23,42,0.08), rgba(15,23,42,0.02));
  filter: blur(0.2px);
  transform: skewX(-2deg);
  z-index:0;
}

.platform-preview-img-ifs{
  width: 100%;
  max-width: 330px;
  height: auto;
  border-radius: 1.25rem;
  transform: translateX(16px) translateY(-10px) rotateY(-12deg) rotateZ(1deg);
  transform-origin: 80% 80%;
  box-shadow: 0 26px 70px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.55);
  position:relative;
  z-index:1;
  transition: transform .28s ease, box-shadow .28s ease;
}

.platform-card-ifs:hover .platform-preview-img-ifs{
  transform: translateX(20px) translateY(-14px) rotateY(-14deg) rotateZ(1.2deg) scale(1.02);
  box-shadow: 0 34px 86px rgba(0,0,0,0.30);
}

/* păstrează scroll-snap + „carusel” */
.subplatform-scroll-container-ifs{
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

@media (max-width: 768px){
  .platform-card-ifs{
    flex: 0 0 88vw;
    flex-direction: column;
    min-height: auto;
  }

  .platform-info-ifs{
    padding: 1.4rem;
  }

  .platform-preview-ifs{
    order: -1;
    padding: 1.1rem 1.1rem 0.9rem;
  }

  .platform-preview-img-ifs{
    max-width: 100%;
    transform: translateY(-6px) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0 18px 44px rgba(0,0,0,0.22);
  }

  .platform-card-ifs:hover .platform-preview-img-ifs{
    transform: translateY(-8px) scale(1.01);
  }
}


.scroll-wrapper-nav-ifs{
  position:relative;
}

.scroll-arrow-ifs{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--ifs-border);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--ifs-shadow-sm);
  display:grid;
  place-items:center;
  z-index: 5;
  transition: transform .2s ease, opacity .2s ease;
}

.scroll-arrow-ifs.left{ left: 10px; }
.scroll-arrow-ifs.right{ right: 10px; }

.scroll-arrow-ifs:hover{ transform: translateY(-50%) scale(1.05); }
.scroll-arrow-ifs:disabled{ opacity: .35; cursor: not-allowed; }

.scroll-wrapper-nav-ifs::before,
.scroll-wrapper-nav-ifs::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 70px;
  z-index:4;
  pointer-events:none;
}

.scroll-wrapper-nav-ifs::before{
  left:0;
  background: linear-gradient(90deg, var(--ifs-light-bg), transparent);
}

.scroll-wrapper-nav-ifs::after{
  right:0;
  background: linear-gradient(270deg, var(--ifs-light-bg), transparent);
}

.drag-hint-ifs{
  text-align:center;
  margin-top: .75rem;
  color: var(--ifs-text-dark);
  opacity: .8;
  font-weight: 600;
}


/* ==========================================================================
   4. HOW IT WORKS SECTION
   ========================================================================== */
.how-it-works-section-ifs { 
    background-color: var(--primaryColor); 
    padding: 6rem 0; 
}

.how-it-works-section-ifs * {
    color: var(--white);
}

.how-it-works-section-ifs img {
    height: 120px;
    width: auto;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.how-it-works-section-ifs .col-lg-3:hover img {
    transform: scale(1.1);
}

.how-it-works-section-ifs{
	position: relative;
	overflow: visible;
}

.how-it-works-section-ifs::before{
	content:"";
	position:absolute;
	inset:0;
	overflow:hidden;
	pointer-events:none;
	z-index:0;
}

.how-it-works-section-ifs .container{
	position: relative;
	z-index: 1;
}

.how-head-ifs .how-sub-ifs{
	max-width: 780px;
	margin: 0 auto;
	opacity: .95;
	font-weight: 600;
}

.how-layout-ifs{
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

.how-nav-ifs{
	position: sticky;
	top: 88px;
	display: grid;
	gap: 10px;
	padding: 12px;
	border-radius: var(--ifs-radius-lg);
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.20);
	backdrop-filter: blur(10px);
}

.how-nav-btn-ifs {
	width: 100%;
	text-align: left;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.08);
	color: var(--textColor);
	font-weight: 900;
	border-radius: 14px;
	padding: .85rem .95rem;
	display: flex;
	gap: .7rem;
	align-items: center;
	transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.how-nav-btn-ifs * {
	color: var(--textColor);
}

.how-nav-btn-ifs:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.14); }
.how-nav-btn-ifs.is-active{ background: rgba(168,230,233,0.22); border-color: rgba(168,230,233,0.38); }

.how-tracks-ifs{
	display: grid;
	gap: 18px;
}

.how-track-ifs{
	border-radius: var(--ifs-radius-xl);
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(20,181,190,0.8);
	box-shadow: 0 16px 42px rgba(0,0,0,0.18);
	padding: 22px;
}

.how-track-top-ifs{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.how-track-title-ifs{
	font-weight: 950;
	letter-spacing: -0.02em;
	margin: 0;
}

.how-chip-ifs{
	display:inline-flex;
	align-items:center;
	padding: .45rem .7rem;
	border-radius: 999px;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.18);
	font-weight: 800;
	font-size: .85rem;
}

.how-steps-ifs{
	display: grid;
	gap: 12px;
	margin-top: 12px;
}

.how-step-ifs{
	display:grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 12px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(0,0,0,0.08);
	transform: translateY(10px);
	opacity: .70;
	transition: transform .35s ease, opacity .35s ease, background .35s ease, border-color .35s ease;
}

.how-step-ifs.is-active{
	transform: translateY(0);
	opacity: 1;
	background: rgba(255,255,255,0.10);
	border-color: rgba(168,230,233,0.35);
}

.how-step-icon-ifs{
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display:grid;
	place-items:center;
	background: rgba(168,230,233,0.20);
	border: 1px solid rgba(168,230,233,0.35);
}

.how-step-title-ifs{ font-weight: 950; }
.how-step-text-ifs{ opacity: .95; }

.how-cta-ifs{
	margin-top: 16px;
}

.how-btn-ifs{
	border-radius: 999px;
	font-weight: 950;
	padding: .75rem 1.1rem;
}

/* Mobile */
@media (max-width: 992px){
	.how-layout-ifs{
		grid-template-columns: 1fr;
	}
	.how-nav-ifs{
		position: relative;
		top: auto;
		grid-template-columns: repeat(3, minmax(0,1fr));
	}
	.how-nav-btn-ifs{
		justify-content: center;
		text-align: center;
	}
	.how-track-top-ifs{
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ==========================================================================
   5. TESTIMONIALS SECTION
   ========================================================================== */
.testimonials-section-ifs{
	padding: 6rem 0;
	background: linear-gradient(180deg, var(--ifs-light-bg), #ffffff);
	position: relative;
	overflow: hidden;
}

.testi-sub-ifs{
	max-width: 720px;
	color: var(--ifs-text-dark);
	opacity: .92;
	font-weight: 600;
}

/* Google card */
.google-card-ifs{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 16px;
	padding: 18px 18px;
	border-radius: var(--ifs-radius-xl);
	background: rgba(255,255,255,0.95);
	border: 1px solid var(--ifs-border);
	box-shadow: var(--ifs-shadow-md);
	margin-bottom: 18px;
}

.google-logo-ifs{
	display:flex;
	align-items:center;
	gap: 10px;
	font-weight: 900;
	color: var(--ifs-text-dark);
}

.google-logo-ifs i{
	font-size: 1.2rem;
}

.google-rating-ifs{
	display:flex;
	align-items:center;
	gap: 16px;
	margin-top: 10px;
}

.google-score-ifs{
	font-size: 2.1rem;
	font-weight: 950;
	color: var(--ifs-dark-blue);
	line-height: 1;
}

.google-stars-row-ifs{
	display:flex;
	gap: 4px;
	align-items:center;
}

.google-stars-row-ifs i{
  	color: #f4b400; /* galben Google star */
}

.google-count-ifs{
	font-weight: 800;
	color: var(--ifs-text-dark);
	opacity: .85;
	margin-top: 4px;
}

.google-actions-ifs{
	display:flex;
	flex-wrap:wrap;
	gap: 10px;
}

.google-actions-ifs .btn{
	border-radius: 999px;
	font-weight: 900;
	}

/* Carousel */
.testi-carousel-ifs{
	border-radius: var(--ifs-radius-xl);
	border: 1px solid var(--ifs-border);
	background: rgba(255,255,255,0.92);
	box-shadow: var(--ifs-shadow-md);
	overflow: hidden;
}

.testi-carousel-track-ifs{
	display:flex;
	gap: 12px;
	padding: 14px;
	overflow:hidden;
	scroll-behavior:smooth;
}

.testi-slide-ifs{
	flex: 0 0 100%;
	border-radius: 18px;
	border: 1px solid rgba(15,23,42,0.10);
	background: linear-gradient(180deg, #ffffff, #fbfdff);
	padding: 20px;
	position: relative;
	transform: translateY(10px);
	opacity: .92;
	transition: transform .35s ease, opacity .35s ease;
}

.testi-quote-ifs{
	position:absolute;
	top: -18px;
	left: 18px;
	font-size: 70px;
	line-height: 1;
	color: rgba(168,230,233,0.55);
	font-weight: 900;
}

.testi-text-ifs{
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ifs-text-dark);
	font-style: italic;
	margin: 8px 0 16px;
}

.testi-author-ifs{
	display:flex;
	gap: 12px;
	align-items:center;
}

.testi-avatar-ifs{
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(168,230,233,0.45);
}

.testi-name-ifs{
	font-weight: 950;
	color: var(--ifs-dark-blue);
}

.testi-badge-ifs{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	margin-top: 4px;
	font-weight: 800;
	font-size: .85rem;
	padding: .3rem .55rem;
	border-radius: 999px;
	background: rgba(168,230,233,0.22);
	border: 1px solid rgba(168,230,233,0.35);
}

/* Controls */
.testi-controls-ifs{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 10px;
	padding: 12px 14px 16px;
}

.testi-btn-ifs{
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 1px solid var(--ifs-border);
	background: rgba(255,255,255,0.92);
	box-shadow: var(--ifs-shadow-sm);
	display:grid;
	place-items:center;
	transition: transform .2s ease;
}

.testi-btn-ifs:hover{ transform: scale(1.05); }

.testi-dots-ifs{
  	display:flex;
	gap: 8px;
	align-items:center;
	justify-content:center;
	flex: 1;
}

.testi-dot-ifs{
		width: 10px;
		height: 10px;
		border-radius: 999px;
		background: rgba(15,23,42,0.20);
		border: 1px solid rgba(15,23,42,0.10);
		transition: transform .2s ease, width .2s ease, background .2s ease;
}

.testi-dot-ifs.is-active{
	width: 26px;
	background: rgba(20,181,190,0.55);
	transform: translateY(-1px);
}

/* Metrics */
.testi-metrics-ifs{
	display:grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 10px;
	margin-top: 16px;
}

.metric-ifs{
	border-radius: 16px;
	padding: 12px 14px;
	background: rgba(255,255,255,0.75);
	border: 1px solid var(--ifs-border);
	box-shadow: var(--ifs-shadow-sm);
}

.metric-val-ifs{
	font-weight: 950;
	color: var(--ifs-dark-blue);
}

.metric-lbl-ifs{
	color: var(--ifs-text-dark);
	opacity: .85;
	font-weight: 700;
	font-size: .95rem;
}

/* Mockup effects */
.testi-mockup-ifs{
	position: relative;
	transform: translateY(0);
	will-change: transform;
}

.mockup-glow-ifs{
	position:absolute;
	inset: -20px;
	border-radius: 40px;
	background: radial-gradient(340px 340px at 50% 40%, rgba(168,230,233,.32), transparent 60%);
	filter: blur(10px);
	z-index: -1;
}

/* Responsive */
@media (max-width: 992px){
	.google-card-ifs{
		flex-direction: column;
		align-items: flex-start;
	}
	.testi-metrics-ifs{
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   6. SPECIALIST CTA BANNER (#specialisti)
   ========================================================================== */
#specialisti {
    background-color: var(--ifs-dark-blue);
    color: var(--white);
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
}

#specialisti * { color: var(--white); }

#specialisti::before, #specialisti::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background-color: var(--ifs-teal);
    opacity: 0.1;
}

#specialisti::before { width: 300px; height: 300px; top: -100px; left: -100px; }
#specialisti::after { width: 400px; height: 400px; bottom: -150px; right: -150px; }

#specialisti .lead {
    color: var(--ifs-text-light);
    max-width: 700px;
    margin: 0 auto 2rem auto;
}

/* ==========================================================================
   7. ARTICLES SECTION
   ========================================================================== */
.articles-section-ifs {
    padding: 6rem 0;
    background-color: var(--ifs-light-bg);
}

.article-card-ifs {
    background-color: var(--ifs-white);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.article-card-ifs:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.article-content-ifs h3 a {
    color: var(--ifs-dark-blue);
    text-decoration: none;
    transition: color 0.2s;
}

.article-content-ifs h3 a:hover {
    color: var(--ifs-teal);
}

.article-image-placeholder {
    height: 200px;
    background-color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   8. FAQ SECTION
   ========================================================================== */
.faq-section {
    padding: 6rem 0;
    background-color: var(--ifs-white);
}

.faq-section .accordion-item {
    border: none;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem !important;
}

.faq-section .accordion-button {
    font-weight: 600;
    padding: 1.25rem;
    border-radius: 0.75rem !important;
}

.faq-section .accordion-button:not(.collapsed) {
    background-color: var(--ifs-dark-blue);
    color: var(--white);
    box-shadow: none;
}

.faq-section .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A192F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq-section .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ==========================================================================
   10. MISC / ANIMATIONS / UTILITIES
   ========================================================================== */
.scroll-container { display: grid; place-items: center; }

.mouse {
	width: 2.5rem;
	height: 4.5rem;
	border: 3px solid var(--white);
	border-radius: 3rem;
	display: inline-flex;
}

.mouse-wheel {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	background-color: var(--white);
	border-radius: 50%;
	margin: auto;
	animation: moveWheel 1.25s linear infinite;
}

@keyframes moveWheel {
	0% { opacity: 1; transform: translateY(-1rem); }
	100% { opacity: 0; transform: translateY(1rem); }
}

/* Three.js / Canvas transparent settings */
#three-container { 
    position: relative; 
    background: transparent !important; 
}

#three-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}


.mid-video-band-ifs{
  padding: 6rem 0;
  background: linear-gradient(180deg, var(--ifs-white), var(--ifs-light-bg));
}

.band-video-shell-ifs{
  border-radius: var(--ifs-radius-xl);
  overflow:hidden;
  box-shadow: var(--ifs-shadow-md);
  border: 1px solid var(--ifs-border);
}

.band-video-ifs{
  width:100%;
  height: 360px;
  object-fit: cover;
  display:block;
}

.band-points-ifs{
  display:grid;
  gap:.65rem;
}

.band-point-ifs{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.75rem 1rem;
  border-radius: 999px;
  background: rgba(168,230,233,0.20);
  border: 1px solid rgba(168,230,233,0.35);
  font-weight: 700;
}


.back-to-top-ifs{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--ifs-border);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--ifs-shadow-md);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 999;
}

.back-to-top-ifs.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


[data-reveal]{
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  transition: opacity .55s ease, transform .55s ease;
  will-change: transform, opacity;
}

html[data-scroll-dir="up"] [data-reveal]{
  transform: translateY(-18px) scale(0.99);
}

[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .back-to-top-ifs{ transition:none; }
  .intent-card-ifs{ transition:none; }
  .platform-card-ifs{ transition:none; }
}