/* ============================  CARTES.css  ============================ */

/* ========= TOKENS (partagés) ========= */
:root{
  --ff-head:"Libre Baskerville",serif;
  --ff-body:"Almarai",sans-serif;

  --bg:#fff; --fg:#1a1a1a;
  --section-alt:#f4f4f4;
  --card-bg:#fff; --border:#e1e1e1;
  --accent:#043f82; --accent-hover:#1251b8;
  --overlay:rgba(0,0,0,.45);
}
[data-theme="dark"]{
  --bg:#121212; --fg:#f3f3f3;
  --section-alt:#1c1c1c;
  --card-bg:#1e1e1e; --border:#333;
  --accent:#5196ff; --accent-hover:#7cb0ff;
  --overlay:rgba(0,0,0,.55);
}

/* ========= BASE ========= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--ff-body);background:var(--bg);color:var(--fg);line-height:1.65;}
h1,h2,h3{font-family:var(--ff-head);line-height:1.25;color:var(--fg);}
h2{font-size:clamp(1.8rem,2vw + 1rem,2.5rem);margin-bottom:2rem;}
.ct-container{width:min(92%,1200px);margin-inline:auto;}
section{padding:4rem 0;}
section:nth-of-type(odd){background:var(--section-alt);}

/* ========= HERO ========= */
.ct-hero{
  position:relative;
  min-height:60vh;
  background:url("/static/css/images/girl_laugh1.png") center/cover no-repeat;
  /* background:url("/static/css/images/loan-hero.png") center/cover no-repeat; */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  isolation:isolate;
}
.ct-hero-overlay{position:absolute;inset:0;background:var(--overlay);z-index:-1;}
.ct-hero-content h1{font-size:clamp(2.1rem,4vw + 1rem,3.4rem);margin-bottom:1rem;color:#fff;}
.ct-hero-content p{font-size:clamp(1rem,1vw + .9rem,1.35rem);color:#f8f8f8;}

/* ========= FEATURE GRID ========= */
.ct-feature-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.ct-feature-card{background:var(--card-bg);padding:2rem 1.5rem;border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 10px rgb(0 0 0 / .05);text-align:center;transition:transform .3s ease;}
.ct-feature-card:hover{transform:translateY(-4px);}
.ct-feature-card h3{font-size:1.25rem;margin-bottom:.65rem;}

/* ========= STEP LIST ========= */
.ct-step-list{counter-reset:ct-stp;list-style:none;display:grid;gap:2.4rem;}
.ct-step-list li{display:flex;gap:1.2rem;align-items:flex-start;}
@media(max-width:600px){.ct-step-list li{flex-direction:column;}}
.ct-step-num{counter-increment:ct-stp;content:counter(ct-stp);flex:0 0 2.4rem;display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:50%;font-weight:700;height:2.4rem;}
.ct-step-content h3{font-size:1.15rem;margin-bottom:.35rem;}

/* ========= CYCLE GRID ========= */
.ct-cycle-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.ct-cycle-card{background:var(--card-bg);padding:2rem 1.5rem;border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 10px rgb(0 0 0 / .05);text-align:center;transition:transform .3s ease;}
.ct-cycle-card:hover{transform:translateY(-4px);}
.ct-cycle-card h3{font-size:1.25rem;margin-bottom:.5rem;}
.ct-deposit{margin-bottom:.4rem;font-weight:600;}
.ct-total{font-weight:600;color:var(--accent);}

/* ========= BENEFIT GRID ========= */
.ct-benefit-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.ct-benefit-card{background:var(--card-bg);padding:2rem 1.5rem;border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 10px rgb(0 0 0 / .05);text-align:center;transition:transform .3s ease;}
.ct-benefit-card:hover{transform:translateY(-4px);}

/* ========= CTA ========= */
.ct-cta {
  text-align: center;
  background: var(--accent);
  padding: 2.5rem 1rem;
}

/* Light mode: dark text */
html[data-theme="light"] .ct-cta,
html[data-theme="light"] .ct-cta h2,
html[data-theme="light"] .ct-cta p,
html[data-theme="light"] .ct-cta strong {
  color: #111; /* Dark readable text */
}

/* Dark mode: white text */
html[data-theme="dark"] .ct-cta,
html[data-theme="dark"] .ct-cta h2,
html[data-theme="dark"] .ct-cta p,
html[data-theme="dark"] .ct-cta strong {
  color: #fff;
}

.ct-cta h2 {
  margin-bottom: 1rem;
}

.ct-cta p {
  font-size: clamp(1rem, .9vw + .9rem, 1.25rem);
  margin-bottom: 2rem;
}

.ct-button {
  display: inline-block;
  padding: .65rem 1.6rem;
  background: #fff;
  color: var(--accent);
  font-weight: 600;
  border-radius: 6px;
  transition: background .25s ease, color .25s ease;
}

.ct-button:hover {
  background: var(--accent-hover);
  color: #fff;
}


/* Small screens spacing */
@media (max-width: 600px){
  .ct-container{ padding: 1.75rem 1rem; }
}

/* ========= ANIMATIONS ========= */
.ct-pre-fade{opacity:0;transform:translateY(18px);}
.ct-fade-in{transition:all .8s ease;opacity:1!important;transform:none!important;}

/* ========= End of carte page styles ========= */