/* ═══════════════════════════════════════════════════════
   IMALIWAY v3 — main.css
   Tema: Dark (Visily) com toggle claro/escuro
   Brand: iMali / Paytek · Maputo, Moçambique
═══════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:inherit;border:none;background:none;}
ul{list-style:none;}
input{font-family:inherit;}

/* ─── BRAND TOKENS (fixos) ─── */
:root{
  --green:        #52A828;
  --green-dark:   #2E7D1E;
  --green-light:  #6DC135;
  --green-tint:   rgba(82,168,40,.12);
  --green-tint2:  rgba(82,168,40,.22);
  --green-glow:   rgba(82,168,40,.15);

  --mpesa-bg:#E8F5E9; --mpesa-fg:#1B5E20; --mpesa-bd:#A5D6A7;
  --mkesh-bg:#E3F2FD; --mkesh-fg:#0D47A1; --mkesh-bd:#90CAF9;
  --emola-bg:#FFF3E0; --emola-fg:#BF360C; --emola-bd:#FFCC80;

  --font-head:'Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:9999px;
  --t-fast:150ms ease; --t-norm:250ms ease; --t-slow:400ms ease;
}

/* ═══════════════════════════════════════════════════════
   TEMA ESCURO (default)
═══════════════════════════════════════════════════════ */
[data-theme="dark"]{
  --bg-page:      #0C0C0C;
  --bg-section:   #111111;
  --bg-alt:       #0C0C0C;
  --bg-card:      #181818;
  --bg-card-hover:#1F1F1F;
  --bg-input:     #1A1A1A;
  --bg-code:      #0D1117;
  --bg-terminal:  #0D1117;

  --border:       rgba(255,255,255,.09);
  --border-hover: rgba(255,255,255,.18);
  --border-strong:rgba(255,255,255,.25);

  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,.6);
  --text-muted:     rgba(255,255,255,.35);
  --text-placeholder:rgba(255,255,255,.25);

  --nav-bg:       rgba(12,12,12,.88);
  --nav-border:   rgba(255,255,255,.07);
  --nav-link:     rgba(255,255,255,.55);
  --nav-link-hover:#FFFFFF;

  --hero-headline:#FFFFFF;
  --hero-bg:      #0C0C0C;

  --method-card:  #181818;
  --method-border:rgba(255,255,255,.09);
  --method-hover: #222222;

  --stepper-bg:   #111111;
  --screen-bg:    #1A1A1A;
  --screen-bar:   #252525;
  --screen-border:rgba(255,255,255,.1);
  --screen-input: #242424;
  --screen-text:  rgba(255,255,255,.75);

  --dev-bg:       #0C0C0C;
  --pillar-bg:    #181818;
  --pillar-border:rgba(255,255,255,.09);

  --faq-bg:       #111111;
  --faq-card:     #181818;
  --faq-border:   rgba(255,255,255,.09);
  --faq-hover:    rgba(82,168,40,.15);
  --faq-text:     rgba(255,255,255,.65);

  --cta-bg:       #111111;
  --cta-card:     #181818;
  --cta-border:   rgba(82,168,40,.3);

  --cert-bg:      #111111;
  --cert-card:    #181818;
  --cert-border:  rgba(255,255,255,.09);
  --cert-bdm:     #333333;
  --cert-simo-bg: #1a2535;
  --cert-mpesa-bg:#1a2b1e;
  --cert-emola-bg:#2b1a12;
  --cert-mkesh-bg:#1e1a2b;

  --footer-bg:    #080808;
  --footer-border:rgba(255,255,255,.06);
  --footer-text:  rgba(255,255,255,.38);
  --footer-link:  rgba(255,255,255,.45);
  --footer-link-h:#6DC135;

  --sh-card: 0 4px 24px rgba(0,0,0,.4);
  --sh-green: 0 0 32px rgba(82,168,40,.2);
}

/* ═══════════════════════════════════════════════════════
   TEMA CLARO
═══════════════════════════════════════════════════════ */
[data-theme="light"]{
  --bg-page:      #FFFFFF;
  --bg-section:   #F7F8F6;
  --bg-alt:       #FFFFFF;
  --bg-card:      #FFFFFF;
  --bg-card-hover:#F7F8F6;
  --bg-input:     #F7F8F6;
  --bg-code:      #0D1117;
  --bg-terminal:  #0D1117;

  --border:       #E4E4E4;
  --border-hover: #CCCCCC;
  --border-strong:#AAAAAA;

  --text-primary:   #1A1A1A;
  --text-secondary: #555555;
  --text-muted:     #888888;
  --text-placeholder:#AAAAAA;

  --nav-bg:       rgba(255,255,255,.92);
  --nav-border:   #E4E4E4;
  --nav-link:     #555555;
  --nav-link-hover:#1A1A1A;

  --hero-headline:#1A1A1A;
  --hero-bg:      #F7F8F6;

  --method-card:  #FFFFFF;
  --method-border:#E4E4E4;
  --method-hover: #F7F8F6;

  --stepper-bg:   #F7F8F6;
  --screen-bg:    #FFFFFF;
  --screen-bar:   #F0F0F0;
  --screen-border:#E4E4E4;
  --screen-input: #F7F8F6;
  --screen-text:  #333333;

  --dev-bg:       #F7F8F6;
  --pillar-bg:    #FFFFFF;
  --pillar-border:#E4E4E4;

  --faq-bg:       #F7F8F6;
  --faq-card:     #FFFFFF;
  --faq-border:   #E4E4E4;
  --faq-hover:    #F0F9EA;
  --faq-text:     #555555;

  --cta-bg:       #1A1A1A;
  --cta-card:     #242424;
  --cta-border:   rgba(82,168,40,.4);

  --cert-bg:      #FFFFFF;
  --cert-card:    #FFFFFF;
  --cert-border:  #E4E4E4;
  --cert-bdm:     #1A1A1A;
  --cert-simo-bg: #E3F2FD;
  --cert-mpesa-bg:#E8F5E9;
  --cert-emola-bg:#FFF3E0;
  --cert-mkesh-bg:#EDE7F6;

  --footer-bg:    #1A1A1A;
  --footer-border:rgba(255,255,255,.07);
  --footer-text:  rgba(255,255,255,.28);
  --footer-link:  rgba(255,255,255,.5);
  --footer-link-h:#6DC135;

  --sh-card: 0 4px 16px rgba(0,0,0,.09);
  --sh-green: 0 4px 20px rgba(82,168,40,.18);
}

/* ─── TRANSITION on theme change ─── */
body,
.navbar,.hero,.methods-section,.stepper-section,
.usecases-section,.dev-section,.faq-section,
.cta-section,.certs-section,.footer,
.method-card,.faq-item,.cert-card,.panel-screen,
.dev-pillar,.cta-card,.footer-lnk {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* ─── BASE ─── */
body { font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--text-primary); background:var(--bg-page); overflow-x:hidden; }
h1,h2,h3,h4,h5 { font-family:var(--font-head); line-height:1.12; color:var(--text-primary); }
p { color:var(--text-secondary); line-height:1.65; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ─── REVEAL ─── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ─── SECTION COMMON ─── */
.section-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green-tint); border:1px solid var(--green-tint2);
  color:var(--green-light);
  font-family:var(--font-head); font-size:.65rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 14px; border-radius:var(--r-full);
  margin-bottom:16px;
}
.section-tag.center { display:flex; width:fit-content; margin:0 auto 16px; }
.section-h { font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:800; letter-spacing:-.025em; margin-bottom:14px; color:var(--text-primary); }
.section-h.center { text-align:center; }
.section-h.left   { text-align:left; }
.section-p { font-size:1.02rem; color:var(--text-secondary); max-width:560px; margin-bottom:40px; }
.section-p.center { text-align:center; margin:0 auto 40px; }

/* ─── HERO ACCENT ─── */
.hero-accent { color:var(--green-light); }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-head); font-weight:700; font-size:.88rem; letter-spacing:.01em;
  border-radius:var(--r-md); padding:0 22px; height:44px;
  transition:all var(--t-fast); white-space:nowrap; cursor:pointer;
}
.btn-primary { background:var(--green); color:#fff; box-shadow:0 2px 12px rgba(82,168,40,.32); }
.btn-primary:hover { background:var(--green-dark); transform:translateY(-1px); box-shadow:0 5px 20px rgba(82,168,40,.45); }
.btn-primary:active { transform:translateY(0); }
.btn-ghost  { background:transparent; color:var(--text-primary); border:1.5px solid var(--border-strong); }
.btn-ghost:hover { background:var(--bg-card); border-color:var(--border-hover); }
.btn-lg { height:52px; font-size:.95rem; padding:0 30px; border-radius:var(--r-lg); }

.btn-ghost-nav { background:transparent; color:var(--nav-link); border:1px solid var(--border); font-family:var(--font-head); font-weight:600; font-size:.8rem; padding:0 14px; height:34px; border-radius:var(--r-md); transition:all var(--t-fast); }
.btn-ghost-nav:hover { border-color:var(--border-hover); color:var(--nav-link-hover); }
.btn-primary-nav { background:var(--green); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.8rem; padding:0 14px; height:34px; border-radius:var(--r-md); transition:all var(--t-fast); }
.btn-primary-nav:hover { background:var(--green-dark); }

/* ════════════════════════════════════
   NAVBAR
════════════════════════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--nav-bg); backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--nav-border);
  transition:box-shadow var(--t-norm), background var(--t-norm), border-color var(--t-norm);
}
.navbar.scrolled { box-shadow:0 2px 20px rgba(0,0,0,.3); }
.nav-wrap {
  max-width:1200px; margin:0 auto; padding:0 24px;
  height:66px; display:flex; align-items:center; gap:32px;
}
.nav-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark .logo-ring,.logo-mark .logo-dot,.logo-mark .logo-m { color:var(--text-primary); }
.logo-text { font-family:var(--font-head); font-size:1.18rem; font-weight:400; color:var(--text-primary); }
.logo-text strong { font-weight:900; }
.logo-text em { font-style:normal; font-weight:700; color:var(--green-light); }
.nav-links { display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.nav-link { font-family:var(--font-head); font-size:.83rem; font-weight:600; color:var(--nav-link); padding:7px 13px; border-radius:var(--r-md); transition:all var(--t-fast); }
.nav-link:hover,.nav-link.active { color:var(--nav-link-hover); background:rgba(255,255,255,.06); }
[data-theme="light"] .nav-link:hover,[data-theme="light"] .nav-link.active { background:#F7F8F6; }
.nav-end { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Theme toggle */
.theme-toggle {
  width:34px; height:34px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); background:var(--bg-card);
  border:1px solid var(--border); transition:all var(--t-fast);
}
.theme-toggle:hover { color:var(--text-primary); border-color:var(--border-hover); }
.theme-icon { display:flex; align-items:center; justify-content:center; }
/* Show correct icon per theme */
[data-theme="dark"]  .theme-icon-light { display:none; }
[data-theme="light"] .theme-icon-dark  { display:none; }

.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; border-radius:var(--r-md); }
.hamburger span { display:block; width:22px; height:2px; background:var(--text-primary); border-radius:2px; transition:all var(--t-fast); }
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu { display:none; flex-direction:column; gap:6px; padding:14px 24px 22px; background:var(--bg-section); border-top:1px solid var(--border); }
.mob-link { font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--text-primary); padding:11px 0; border-bottom:1px solid var(--border); }
.mob-ctas { display:flex; gap:10px; margin-top:10px; }

/* ════════════════════════════════════
   HERO (Visily dark style)
════════════════════════════════════ */
.hero {
  min-height:100dvh; padding:130px 0 90px;
  background:var(--hero-bg); position:relative; overflow:hidden;
  display:flex; align-items:center;
}
/* Grain texture */
.hero-noise {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity:.028; mix-blend-mode:overlay;
}
/* Green glows */
.hero-glow-left {
  position:absolute; top:-10%; left:-5%;
  width:55vw; height:55vw; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(82,168,40,.1) 0%, transparent 65%);
}
.hero-glow-right {
  position:absolute; bottom:-10%; right:-5%;
  width:45vw; height:45vw; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(82,168,40,.07) 0%, transparent 65%);
}
.hero-inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:28px; max-width:820px; }

/* Badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:9px; width:fit-content;
  background:transparent; border:1px solid var(--green-tint2);
  color:var(--green-light);
  font-family:var(--font-head); font-size:.62rem; font-weight:700;
  letter-spacing:.1em; padding:6px 16px; border-radius:var(--r-full);
}
.hero-badge-dot {
  width:7px; height:7px; border-radius:50%; background:var(--green-light);
  box-shadow:0 0 0 3px rgba(109,193,53,.2);
  animation:hbPulse 2s ease infinite;
}
@keyframes hbPulse {
  0%,100%{box-shadow:0 0 0 3px rgba(109,193,53,.2);}
  50%{box-shadow:0 0 0 7px rgba(109,193,53,.06);}
}

/* Headline — Visily style: massive uppercase */
.hero-title {
  font-family:var(--font-head);
  font-size:clamp(3rem,8vw,6.5rem);
  font-weight:900;
  line-height:.96;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:var(--hero-headline);
}
[data-theme="light"] .hero-title { color:#1A1A1A; }

.hero-sub { font-size:1.08rem; color:var(--text-secondary); max-width:480px; line-height:1.7; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:12px; }

/* Cert row */
.hero-cert { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--border); }
.cert-label { font-family:var(--font-head); font-size:.6rem; font-weight:700; color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; }
.cert-icons { display:flex; gap:8px; flex-wrap:wrap; }
.cert-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-head); font-size:.65rem; font-weight:700;
  padding:4px 11px; border-radius:var(--r-full);
  border:1px solid var(--border); color:var(--text-secondary);
  background:var(--bg-card);
}
.cert-bdm  { border-color:var(--border-hover); }
.cert-simo { border-color:rgba(25,118,210,.3); color:#90CAF9; }
.cert-secure { border-color:var(--green-tint2); color:var(--green-light); }

/* ════════════════════════════════════
   METHODS (Stitch style)
════════════════════════════════════ */
.methods-section { padding:96px 0; background:var(--bg-section); }
.methods-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:40px; }
.method-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:22px 18px;
  background:var(--method-card); border:1px solid var(--method-border);
  border-radius:var(--r-xl);
  transition:all var(--t-norm);
}
.method-card:hover:not(.method-soon) {
  background:var(--method-hover); border-color:rgba(82,168,40,.3);
  box-shadow:var(--sh-green); transform:translateY(-3px);
}
.method-icon-ring {
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.mpesa-ring  { background:var(--mpesa-bg); }
.mkesh-ring  { background:var(--mkesh-bg); }
.emola-ring  { background:var(--emola-bg); }
.neutral-ring{ background:var(--bg-input); color:var(--text-secondary); }
[data-theme="dark"] .neutral-ring { background:rgba(255,255,255,.08); }
.method-initial { font-family:var(--font-head); font-size:1.35rem; font-weight:900; }
.method-name { font-family:var(--font-head); font-size:.88rem; font-weight:800; color:var(--text-primary); }
.method-desc { font-size:.75rem; color:var(--text-secondary); line-height:1.5; flex:1; }
.method-pill {
  font-family:var(--font-head); font-size:.62rem; font-weight:700;
  background:var(--green-tint); color:var(--green-light);
  border:1px solid var(--green-tint2); padding:3px 10px; border-radius:var(--r-full);
}
.method-soon { opacity:.55; border-style:dashed; }
.method-soon-pill { background:var(--bg-input); color:var(--text-muted); border-color:var(--border); }

/* ════════════════════════════════════
   STEPPER
════════════════════════════════════ */
.stepper-section { padding:96px 0; background:var(--stepper-bg); }
.step-tabs { display:flex; align-items:center; justify-content:center; gap:0; margin:40px 0 36px; flex-wrap:wrap; }
.step-tab { display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 18px; border-radius:var(--r-lg); transition:all var(--t-fast); min-width:90px; }
.step-tab:hover { background:var(--green-tint); }
.step-num {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:.8rem; font-weight:800;
  background:var(--bg-input); color:var(--text-muted); border:1px solid var(--border);
  transition:all var(--t-fast);
}
.step-lbl { font-family:var(--font-head); font-size:.7rem; font-weight:600; color:var(--text-muted); transition:color var(--t-fast); }
.step-tab.active .step-num { background:var(--green); color:#fff; border-color:transparent; box-shadow:0 2px 12px rgba(82,168,40,.45); }
.step-tab.active .step-lbl { color:var(--green-light); }
.step-conn { width:36px; height:2px; background:var(--border); flex-shrink:0; }

.step-panels { }
.step-panel { display:none; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; animation:pnlIn .35s ease; }
.step-panel.active { display:grid; }
@keyframes pnlIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Browser frame */
.panel-screen {
  background:var(--screen-bg); border:1px solid var(--screen-border);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-card);
}
.screen-bar {
  display:flex; align-items:center; gap:7px;
  padding:10px 14px; background:var(--screen-bar); border-bottom:1px solid var(--screen-border);
}
.sbar-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.sbar-url {
  flex:1; text-align:center; background:var(--bg-input);
  border:1px solid var(--border); border-radius:6px;
  padding:3px 10px; font-family:var(--font-mono); font-size:.67rem; color:var(--text-muted);
}
.screen-body { padding:18px; display:flex; flex-direction:column; gap:10px; }
.screen-title { font-family:var(--font-head); font-size:.9rem; font-weight:800; color:var(--screen-text); }
.screen-input {
  padding:9px 12px; border:1px solid var(--border); border-radius:var(--r-md);
  font-size:.8rem; color:var(--screen-text); background:var(--screen-input);
  width:100%; pointer-events:none; display:block;
}
.screen-btn {
  background:var(--green); color:#fff;
  font-family:var(--font-head); font-size:.82rem; font-weight:700;
  border-radius:var(--r-md); padding:10px; text-align:center;
}
.screen-note { font-size:.65rem; color:var(--text-muted); text-align:center; }

/* KYC */
.kyc-item { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; border-radius:var(--r-md); background:var(--bg-input); margin-bottom:6px; }
.kyc-n { width:22px; height:22px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; color:var(--text-muted); flex-shrink:0; }
.kyc-item strong { font-family:var(--font-head); font-size:.78rem; font-weight:700; color:var(--screen-text); display:block; }
.kyc-item small  { font-size:.65rem; color:var(--text-muted); }
.kyc-done  { border-left:3px solid var(--green); }
.kyc-done .kyc-n { background:var(--green); color:#fff; }
.kyc-active { border-left:3px solid var(--green); background:var(--green-tint); }
.kyc-active .kyc-n { background:var(--green); color:#fff; }
.kyc-pending { opacity:.55; }

/* API Keys */
.apikey-box { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px; }
.apikey-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.apikey-label { font-family:var(--font-head); font-size:.67rem; font-weight:700; color:var(--text-muted); }
.env-badge { font-family:var(--font-head); font-size:.58rem; font-weight:800; padding:2px 8px; border-radius:var(--r-full); }
.env-live    { background:#1a2b1e; color:#56d364; border:1px solid rgba(86,211,100,.3); }
.env-sandbox { background:#2b2315; color:#ffa657; border:1px solid rgba(255,166,87,.3); }
.apikey-val { font-family:var(--font-mono); font-size:.72rem; color:var(--text-secondary); background:var(--bg-page); border:1px solid var(--border); border-radius:var(--r-sm); padding:6px 10px; margin-bottom:7px; letter-spacing:.04em; }
.apikey-btns { display:flex; gap:6px; }
.apikey-btn { padding:4px 10px; border:1px solid var(--border); border-radius:var(--r-sm); font-family:var(--font-head); font-size:.65rem; font-weight:600; color:var(--text-muted); background:var(--bg-page); pointer-events:none; }

/* Sandbox */
.sandbox-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sb-label { font-family:var(--font-head); font-size:.65rem; font-weight:700; color:var(--text-muted); display:block; margin-bottom:4px; }
.sb-response { background:var(--bg-code); border-radius:var(--r-md); padding:10px 12px; margin-top:8px; font-family:var(--font-mono); font-size:.7rem; line-height:1.85; }
.sb-comment { color:#6e7681; font-style:italic; }
.sb-key { color:#79c0ff; }
.sb-colon { color:#c9d1d9; }
.sb-str { color:#a5d6ff; }
.sb-ok { color:#56d364; }

/* Live txns */
.live-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.live-badge { font-family:var(--font-head); font-size:.62rem; font-weight:700; background:rgba(82,168,40,.15); color:var(--green-light); border:1px solid var(--green-tint2); padding:3px 9px; border-radius:var(--r-full); animation:livePulse 1.5s ease infinite; }
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.live-sub { font-size:.7rem; color:var(--text-muted); }
.live-txns { display:flex; flex-direction:column; gap:8px; }
.live-txn { display:flex; align-items:center; gap:10px; background:var(--bg-input); border-radius:var(--r-md); padding:9px 12px; }
.txn-m { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:.72rem; font-weight:800; flex-shrink:0; }
.txn-info { flex:1; font-size:.72rem; color:var(--text-muted); line-height:1.45; }
.txn-info strong { font-family:var(--font-mono); font-size:.7rem; color:var(--screen-text); }
.txn-val { font-family:var(--font-head); font-size:.82rem; font-weight:800; color:var(--green-light); }

/* Panel info */
.panel-info { display:flex; flex-direction:column; gap:16px; }
.panel-badge {
  display:inline-flex; background:var(--green-tint); color:var(--green-light);
  border:1px solid var(--green-tint2);
  font-family:var(--font-head); font-size:.65rem; font-weight:700;
  padding:4px 13px; border-radius:var(--r-full); width:fit-content;
}
.panel-badge-ok { background:var(--green); color:#fff; border-color:transparent; }
.panel-title { font-size:1.3rem; font-weight:800; color:var(--text-primary); }
.panel-desc { font-size:.9rem; line-height:1.7; }
.panel-list { display:flex; flex-direction:column; gap:8px; }
.panel-list li { display:flex; align-items:center; gap:10px; font-size:.87rem; color:var(--text-secondary); }
.panel-list li::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; }
.panel-nav { display:flex; align-items:center; gap:12px; margin-top:4px; }
.btn-step-prev,.btn-step-next { font-family:var(--font-head); font-size:.8rem; font-weight:700; padding:8px 17px; border-radius:var(--r-md); transition:all var(--t-fast); }
.btn-step-prev { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.btn-step-prev:hover:not(:disabled) { background:var(--bg-card); }
.btn-step-prev:disabled { opacity:.35; cursor:not-allowed; }
.btn-step-next { background:var(--green); color:#fff; }
.btn-step-next:hover { background:var(--green-dark); }
.step-progress { display:flex; gap:6px; align-items:center; }
.sp { width:8px; height:8px; border-radius:50%; background:var(--border); transition:all var(--t-norm); }
.sp.active { background:var(--green); width:22px; border-radius:4px; }

/* ════════════════════════════════════
   USE CASES (placeholder)
════════════════════════════════════ */
.usecases-section { padding:80px 0; background:var(--bg-alt); }
.uc-placeholder {
  border:2px dashed var(--border); border-radius:var(--r-xl);
  padding:60px 40px; text-align:center;
  color:var(--text-muted); font-family:var(--font-head); font-size:.9rem;
}

/* ════════════════════════════════════
   DEVELOPER (Stitch)
════════════════════════════════════ */
.dev-section { padding:96px 0; background:var(--dev-bg); border-radius: 0 0 24px 24px; }
.dev-inner { display:grid; grid-template-columns:1fr 1.3fr; gap:64px; align-items:center; }
.dev-content { display:flex; flex-direction:column; gap:20px; }
.dev-pillars { display:flex; flex-direction:column; gap:12px; }
.dev-pillar {
  display:flex; gap:14px; align-items:flex-start;
  background:var(--pillar-bg); border:1px solid var(--pillar-border);
  border-radius:var(--r-lg); padding:16px 18px;
  transition:border-color var(--t-fast);
}
.dev-pillar:hover { border-color:rgba(82,168,40,.3); }
.pillar-icon {
  width:36px; height:36px; border-radius:var(--r-md); flex-shrink:0;
  background:var(--green-tint); border:1px solid var(--green-tint2);
  display:flex; align-items:center; justify-content:center; color:var(--green-light);
}
.dev-pillar h4 { font-family:var(--font-head); font-size:.8rem; font-weight:800; color:var(--text-primary); letter-spacing:.04em; margin-bottom:4px; }
.dev-pillar p  { font-size:.8rem; color:var(--text-secondary); line-height:1.55; margin:0; }

/* Terminal (Stitch curl style) */
.dev-terminal { background:var(--bg-terminal); border-radius:var(--r-2xl); overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.07); }
.term-header { display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07); }
.term-dot { width:11px; height:11px; border-radius:50%; }
.term-title { font-family:var(--font-mono); font-size:.68rem; color:rgba(255,255,255,.3); flex:1; }
.term-tabs { display:flex; gap:2px; }
.term-tab { font-family:var(--font-head); font-size:.62rem; font-weight:700; padding:4px 10px; border-radius:var(--r-sm); color:rgba(255,255,255,.35); transition:all var(--t-fast); }
.term-tab.active { background:rgba(82,168,40,.2); color:var(--green-light); }
.term-body { padding:22px 24px 26px; overflow:auto; }
.term-body pre { overflow:visible; }
.term-body code { font-family:var(--font-mono); font-size:.82rem; line-height:1.9; color:#c9d1d9; white-space:pre; }
.t-cmd  { color:#ff7b72; }
.t-url  { color:#79c0ff; }
.t-flag { color:#d2a8ff; }
.t-str  { color:#a5d6ff; }
.t-obj  { color:#c9d1d9; }
.t-key  { color:#79c0ff; }
.t-num  { color:#ffa657; }
.t-comment { color:#6e7681; font-style:italic; }
.t-ok   { color:#56d364; }

/* ════════════════════════════════════
   FAQ (Figma style)
════════════════════════════════════ */
.faq-section { padding:96px 0; background:var(--faq-bg); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:40px; align-items:start; }
.faq-item { background:var(--faq-card); border:1px solid var(--faq-border); border-radius:var(--r-lg); overflow:hidden; transition:border-color var(--t-fast); }
.faq-item:has(.faq-q[aria-expanded="true"]) { border-color:rgba(82,168,40,.4); }
.faq-q {
  width:100%; text-align:left; display:flex; align-items:center;
  justify-content:space-between; gap:16px;
  padding:17px 20px;
  font-family:var(--font-head); font-size:.87rem; font-weight:700;
  color:var(--text-primary); transition:color var(--t-fast);
}
.faq-q:hover { color:var(--green-light); }
.faq-q[aria-expanded="true"] { color:var(--green-light); }
.faq-q em { font-style:italic; font-weight:600; }
.faq-icon {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--bg-input); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:300; transition:all var(--t-fast);
}
.faq-q[aria-expanded="true"] .faq-icon { background:var(--green-tint); color:var(--green-light); transform:rotate(45deg); }
.faq-a {
  padding:16px 20px; font-size:.86rem; color:var(--faq-text); line-height:1.7;
  border-top:1px solid var(--border);
}
.faq-a[hidden] { display:none; }
.faq-a a { color:var(--green-light); text-decoration:underline; }

/* ════════════════════════════════════
   CTA (Stitch style)
════════════════════════════════════ */
.cta-section { padding:60px 0; background:var(--cta-bg); }
.cta-card {
  background:var(--cta-card); border:1px solid var(--cta-border);
  border-radius:var(--r-2xl); padding:56px 40px;
  text-align:center; position:relative; overflow:hidden;
  box-shadow:var(--sh-green);
}
.cta-card::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(82,168,40,.12) 0%, transparent 60%);
}
.cta-card-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:16px; }
.cta-icon { color:var(--green-light); opacity:.8; margin-bottom:4px; }
.cta-title { font-family:var(--font-head); font-size:clamp(1.5rem,3.5vw,2.2rem); font-weight:900; letter-spacing:-.02em; color:#fff; }
.cta-desc { color:rgba(255,255,255,.55); font-size:.95rem; max-width:400px; line-height:1.65; }

/* ════════════════════════════════════
   CERTIFICATIONS
════════════════════════════════════ */
.certs-section { padding:96px 0; background:var(--cert-bg); }
.certs-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:40px; }
.cert-card {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:24px 20px; min-width:170px; max-width:195px; flex:1;
  background:var(--cert-card); border:1px solid var(--cert-border);
  border-radius:var(--r-xl); text-align:center;
  transition:all var(--t-norm);
}
.cert-card:hover { box-shadow:var(--sh-green); transform:translateY(-3px); border-color:rgba(82,168,40,.3); }
.cert-seal {
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:.72rem; font-weight:900;
}
.cert-bdm  { background:var(--cert-bdm); color:#fff; }
.cert-simo { background:var(--cert-simo-bg); color:#90CAF9; }
.cert-mpesa{ background:var(--cert-mpesa-bg); color:#56d364; }
.cert-emola{ background:var(--cert-emola-bg); color:#ffa657; }
.cert-mkesh{ background:var(--cert-mkesh-bg); color:#d2a8ff; }
.cert-card h3 { font-family:var(--font-head); font-size:.86rem; font-weight:800; color:var(--text-primary); }
.cert-card p  { font-size:.74rem; color:var(--text-secondary); line-height:1.5; }
.cert-tag { font-family:var(--font-head); font-size:.63rem; font-weight:700; padding:3px 12px; border-radius:var(--r-full); }
.tag-reg  { background:var(--cert-bdm); color:#fff; }
.tag-cert { background:var(--cert-simo-bg); color:#90CAF9; border:1px solid rgba(25,118,210,.3); }
.tag-intg { background:var(--green-tint); color:var(--green-light); border:1px solid var(--green-tint2); }

/* ════════════════════════════════════
   FOOTER (Stitch style)
════════════════════════════════════ */
.footer { background:var(--footer-bg); }
.footer-top {
  max-width:1200px; margin:0 auto; padding:64px 24px 48px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
}
.footer-brand { display:flex; flex-direction:column; gap:16px; }
.footer-logo-link { display:flex; align-items:center; gap:10px; }
.footer-tagline { font-size:.82rem; color:var(--footer-text); line-height:1.7; }
.footer-socials { display:flex; gap:8px; }
.soc-btn { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.07); color:rgba(255,255,255,.45); display:flex; align-items:center; justify-content:center; transition:all var(--t-fast); }
.soc-btn:hover { background:var(--green); color:#fff; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-col-h { font-family:var(--font-head); font-size:.6rem; font-weight:800; color:rgba(255,255,255,.28); letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
.footer-lnk { font-size:.83rem; color:var(--footer-link); transition:color var(--t-fast); }
.footer-lnk:hover { color:var(--footer-link-h); }
.footer-bottom { border-top:1px solid var(--footer-border); padding:18px 24px; max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:4px; }
.footer-copy { font-family:var(--font-head); font-size:.6rem; font-weight:700; color:rgba(255,255,255,.2); letter-spacing:.04em; }
.footer-reg  { font-size:.58rem; color:rgba(255,255,255,.15); letter-spacing:.04em; }

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width:1100px) {
  .methods-grid { grid-template-columns:repeat(3,1fr); }
  .footer-top   { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:960px) {
  .dev-inner    { grid-template-columns:1fr; }
  .step-panel.active { grid-template-columns:1fr; }
  .panel-screen { display:none; }
}
@media (max-width:768px) {
  .nav-links,.btn-ghost-nav,.btn-primary-nav { display:none; }
  .hamburger { display:flex; }
  .mobile-menu { display:flex; }
  .methods-grid { grid-template-columns:1fr 1fr; }
  .faq-grid     { grid-template-columns:1fr; }
  .certs-grid   { flex-direction:column; align-items:center; }
  .footer-top   { grid-template-columns:1fr 1fr; }
  .step-conn    { display:none; }
  .hero-title   { font-size:clamp(2.4rem,10vw,5rem); }
}
@media (max-width:540px) {
  .container { padding:0 16px; }
  .methods-grid { grid-template-columns:1fr 1fr; }
  .footer-top   { grid-template-columns:1fr; }
  .cta-card     { padding:40px 24px; }
  .hero-title   { font-size:clamp(2rem,12vw,3.5rem); }
}


/* ─── RESET (apenas para este componente) ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:inherit;border:none;background:none;}
ul{list-style:none;}

/* ─── BRAND TOKENS (fixos) ─── */
:root{
  --green:        #52A828;
  --green-dark:   #2E7D1E;
  --green-light:  #6DC135;
  --green-tint:   rgba(82,168,40,.12);
  --green-tint2:  rgba(82,168,40,.22);
  --green-glow:   rgba(82,168,40,.15);

  --font-head:'Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:9999px;
  --t-fast:150ms ease; --t-norm:250ms ease; --t-slow:400ms ease;
}

/* ═══════════════ TEMA ESCURO (default) ═══════════════ */
[data-theme="dark"]{
  --bg-page:      #0C0C0C;
  --bg-section:   #111111;
  --bg-card:      #181818;
  --bg-card-hover:#1F1F1F;
  --bg-input:     #1A1A1A;
  --border:       rgba(255,255,255,.09);
  --border-hover: rgba(255,255,255,.18);
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,.6);
  --text-muted:     rgba(255,255,255,.35);
  --method-card:  #181818;
  --method-border:rgba(255,255,255,.09);
  --method-hover: #222222;
  --sh-card: 0 4px 24px rgba(0,0,0,.4);
  --sh-green: 0 0 32px rgba(82,168,40,.2);
  --card-list-bg: #1a1f2e;
  --file-item-hover: #222839;
}

/* ═══════════════ TEMA CLARO ═══════════════ */
[data-theme="light"]{
  --bg-page:      #FFFFFF;
  --bg-section:   #F7F8F6;
  --bg-card:      #FFFFFF;
  --bg-card-hover:#F7F8F6;
  --bg-input:     #F7F8F6;
  --border:       #E4E4E4;
  --border-hover: #CCCCCC;
  --text-primary:   #1A1A1A;
  --text-secondary: #555555;
  --text-muted:     #888888;
  --method-card:  #FFFFFF;
  --method-border:#E4E4E4;
  --method-hover: #F7F8F6;
  --sh-card: 0 4px 16px rgba(0,0,0,.09);
  --sh-green: 0 4px 20px rgba(82,168,40,.18);
  --card-list-bg: #f1f5f9;
  --file-item-hover: #e2e8f0;
}

/* ─── Transition on theme change ─── */
.features-section,
.feature-card,
.feature-list-item {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* ─── BASE ─── */
body { font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--text-primary); background:var(--bg-page); overflow-x:hidden; }
h2,h3 { font-family:var(--font-head); line-height:1.12; color:var(--text-primary); }
p { color:var(--text-secondary); line-height:1.65; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ─── REVEAL ─── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ─── SECTION COMMON ─── */
.section-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green-tint); border:1px solid var(--green-tint2);
  color:var(--green-light);
  font-family:var(--font-head); font-size:.65rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 14px; border-radius:var(--r-full);
  margin-bottom:16px;
}
.section-tag.center { display:flex; width:fit-content; margin:0 auto 16px; }
.section-h { font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:800; letter-spacing:-.025em; margin-bottom:14px; color:var(--text-primary); }
.section-h.center { text-align:center; }
.section-p { font-size:1.02rem; color:var(--text-secondary); max-width:560px; margin-bottom:40px; }
.section-p.center { text-align:center; margin:0 auto 40px; }

/* ═══════════════ FEATURES SECTION ═══════════════ */
.features-section { padding:96px 0; background:var(--bg-section); }
.features-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 colunas iguais na horizontal */
  gap:16px;
  margin-top:40px;
}

/* ═══════════════ FEATURE CARD ═══════════════ */
.feature-card {
  display:flex; flex-direction:column; gap:14px;
  padding:26px 22px;
  background:var(--method-card);
  border:1px solid var(--method-border);
  border-radius:var(--r-xl);
  transition:all var(--t-norm);
  position:relative; overflow:hidden;
}
.feature-card:hover {
  background:var(--method-hover);
  border-color:rgba(82,168,40,.3);
  box-shadow:var(--sh-green);
  transform:translateY(-3px);
}
.feature-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--green-light),transparent);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.feature-card:hover::after { opacity:1; }

/* Ícone do card */
.feature-icon-ring {
  width:46px; height:46px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--green-tint);
  border:1px solid var(--green-tint2);
  color:var(--green-light);
}

/* Título e descrição */
.feature-card h3 {
  font-family:var(--font-head); font-size:1.05rem; font-weight:800;
  color:var(--text-primary); letter-spacing:-.01em;
}
.feature-card .feature-desc {
  font-size:.85rem; color:var(--text-secondary); line-height:1.55; flex:1;
}

/* ═══════════════ LISTA DE FUNCIONALIDADES ═══════════════ */
.feature-list {
  display:flex; flex-direction:column; gap:8px; margin-top:4px;
}
.feature-list-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px;
  background:var(--card-list-bg);
  border-radius:var(--r-md);
  font-size:.78rem; color:var(--text-secondary);
  transition:background var(--t-fast);
  cursor:default;
}
.feature-list-item:hover { background:var(--file-item-hover); }
.feature-list-icon {
  width:16px; height:16px; flex-shrink:0; color:var(--green-light);
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1100px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:640px) {
  .features-grid { grid-template-columns: 1fr; }
  .container { padding:0 16px; }
  .features-section { padding:64px 0; }
}
 /* ═══════════════ HERO (Visily dark) – centralizado ═══════════════ */
.hero {
  min-height: 100dvh;
  padding: 130px 0 90px;
  background: var(--hero-bg);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: .028;
  mix-blend-mode: overlay;
}

.hero-glow-left {
  position: absolute;
  top: -10%;
  left: -5%;
  width: 55vw;
  height: 55vw;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(82,168,40,.1) 0%, transparent 65%);
}

.hero-glow-right {
  position: absolute;
  bottom: -10%;
  right: -5%;
  width: 45vw;
  height: 45vw;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(82,168,40,.07) 0%, transparent 65%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  max-width: 960px;            /* mais largura → mais palavras por linha no h1 */
  margin: 0 auto;
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--hero-headline);
}

.hero-accent {
  color: var(--green-light);
}

.hero-sub {
  font-size: 1.08rem;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.7;
  margin: 0 auto;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Badge e certificações (preservado para reutilização) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--green-tint2);
  color: var(--green-light);
  font-family: var(--font-head);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 6px 16px;
  border-radius: var(--r-full);
}

.hero-cert {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  justify-content: center;
}

.cert-label {
  font-family: var(--font-head);
  font-size: .6rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cert-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.cert-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-head);
  font-size: .65rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-card);
}

/* ═══════════════ Cards abaixo da hero ═══════════════ */
/* Certificações na hero */
.hero-cert {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  justify-content: center;
}
.cert-label {
  font-family: var(--font-head);
  font-size: .6rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cert-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.cert-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-head);
  font-size: .65rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-card);
}
.cert-simo   { border-color: rgba(25, 118, 210, .3); color: #90CAF9; }
.cert-secure { border-color: var(--green-tint2); color: var(--green-light); }

/* Hero cards (logos/parceiros) — sempre lado a lado, imagem centrada, texto no fundo */
.hero-cards {
  display: flex;
  flex-wrap: nowrap;            /* sempre lado a lado, sem quebra */
  justify-content: center;
  gap: 20px;
  margin-top: 4px;
  width: 70;
  
}
.hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12;                      /* removemos o gap para controlo fino */
 
  flex: 1 1 0%;               /* distribui o espaço disponível */
  backdrop-filter: blur(8px);
  transition:
    border-color var(--t-norm),
    box-shadow var(--t-norm),
    transform var(--t-norm);
}
.hero-card:hover {
  border-color: var(--green-tint2);
  box-shadow: var(--sh-green);
  transform: translateY(-2px);
}

/* Wrapper da imagem — ocupa o espaço restante e centraliza a imagem */
.hero-card-img {
  flex: 1;                    /* empurra o texto para o fundo */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-light);
}
.hero-card-img img {
  max-height: 66px;
  width: auto;
  object-fit: contain;
}

/* Texto do card — fixo no fundo */
.hero-card-label {
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  white-space: nowrap;         /* evita quebra do texto */
}
/* ════════════════════════════════════
   CARROSSEL DE MÉTODOS
   (substitui a grelha estática)
════════════════════════════════════ */
.methods-carousel {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 40px;
}

/* Faixa que desliza */
.methods-track {
  display: flex;
  gap: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Cada card ocupa sempre a mesma largura */
  --card-width: calc((100% - 48px) / 4); /* 4 cards visíveis */
  width: 100%;
}

/* Cada card dentro do carrossel */
.methods-carousel .method-card {
  flex: 0 0 var(--card-width);
  min-width: 180px; /* largura mínima para ecrãs pequenos */
  transition: transform var(--t-norm), box-shadow var(--t-norm);
  user-select: none;
}

/* Botões laterais */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  cursor: pointer;
}
.carousel-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--green-light);
  color: var(--green-light);
  box-shadow: var(--sh-green);
}
.carousel-btn:active { transform: translateY(-50%) scale(0.95); }
.carousel-btn-left  { left: -20px; }
.carousel-btn-right { right: -20px; }

/* Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: all var(--t-norm);
  padding: 0;
}
.carousel-dot.active {
  background: var(--green);
  width: 24px;
  border-radius: 5px;
}

/* Responsivo – adapta número de cards visíveis */
@media (max-width: 1100px) {
  .methods-track { --card-width: calc((100% - 32px) / 3); }
}
@media (max-width: 768px) {
  .methods-track { --card-width: calc((100% - 16px) / 2); }
  .carousel-btn-left  { left: -12px; }
  .carousel-btn-right { right: -12px; }
}
@media (max-width: 540px) {
  .methods-track { --card-width: 85%; }
  .methods-carousel .method-card { min-width: 0; }
}
/* ════════════════════════ FLIP CARDS (sempre lado a lado, tamanho ajustável) ════════════════════════ */
.certs-section {
  padding: 96px 0;
  background: var(--cert-bg, #111);
}

/* Container – agora força distribuição igual sem overflow */
.certs-grid {
  display: flex;
  flex-wrap: nowrap;               /* nunca quebra linha */
  justify-content: center;        /* centraliza o conjunto */
  gap: 20px;
  margin-top: 40px;
}

/* Cada card ocupa uma fração igual do espaço disponível */
.flip-card {
  flex: 1 1 0%;                   /* cresce e encolhe igualmente, base 0 */
  min-width: 0;                   /* permite reduzir abaixo do conteúdo */
  max-width: 220px;               /* limite máximo para não esticar demais */
  height: 260px;
  perspective: 1200px;
}
/* altura fixa pode ser convertida para aspect-ratio se preferir responsividade vertical */

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

/* Faces */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r-xl, 16px);
  overflow: hidden;                /* evita vazamento de conteúdo */
  display: flex;
  align-items: flex-end;
}

.flip-front {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  box-shadow: var(--sh-card, 0 4px 24px rgba(0,0,0,.4));
}

/* Overlay escuro */
.flip-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
  z-index: 1;
}

/* Texto – dimensionado para se adaptar a cards estreitos */
.flip-content {
  position: relative;
  z-index: 2;
  padding: 16px 10px;
  width: 100%;
  text-align: center;
  color: #fff;
  /* fonte adaptável */
  font-size: clamp(0.6rem, 2vw, 0.8rem);
}

.flip-front .flip-content {
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.flip-content h3 {
  font-family: var(--font-head, 'Inter', sans-serif);
  font-size: clamp(0.7rem, 2.2vw, 1rem);
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.2;
}

.flip-content p {
  font-size: inherit;
  line-height: 1.5;
  opacity: 0.95;
  margin: 0;
}

.flip-content strong {
  color: var(--green-light, #6DC135);
}

/* Verso */
.flip-back {
  transform: rotateY(180deg);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: var(--sh-card, 0 4px 24px rgba(0,0,0,.4));
  align-items: center;
  justify-content: center;
}

.flip-back .flip-content {
  padding: 16px 10px;
}

/* Tags */
.cert-tag {
  font-family: var(--font-head, 'Inter', sans-serif);
  font-size: clamp(0.5rem, 1.8vw, 0.63rem);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tag-reg  { background: #1a1a1a; color: #fff; border: 1px solid rgba(255,255,255,.2); }
.tag-cert { background: #0d47a1; color: #bbdefb; border: 1px solid #1565c0; }
.tag-intg { background: var(--green-tint, rgba(82,168,40,.15)); color: var(--green-light, #6DC135); border: 1px solid var(--green-tint2, rgba(82,168,40,.25)); }

/* ─── Responsivo: reduz gaps e tamanhos mínimos ─── */
@media (max-width: 1100px) {
  .certs-grid { gap: 14px; }
  .flip-card { max-width: 190px; height: 230px; }
}

@media (max-width: 768px) {
  .certs-grid { gap: 10px; }
  .flip-card { max-width: 160px; height: 200px; }
}

@media (max-width: 540px) {
  .certs-grid {
    gap: 6px;
    justify-content: space-evenly;  /* distribui bem em ecrãs pequenos */
  }
  .flip-card {
    max-width: none;                /* remove limite máximo, deixa flex decidir */
    height: 180px;
  }
  .flip-content h3 { font-size: clamp(0.6rem, 3.5vw, 0.8rem); }
  .cert-tag { display: none; }     /* esconde tags em ecrãs muito pequenos (opcional) */
}