/* ============ LEXPAY SOLUTIONS — DESIGN SYSTEM ============ */
:root{
  --ink:#101B2D;
  --ink-soft:#2A3547;
  --paper:#F7F8F6;
  --paper-warm:#FFFFFF;
  --slate:#4B5563;
  --slate-light:#8B93A1;
  --teal:#2F6E5B;
  --teal-light:#E7F0EC;
  --mint:#7CD9B5;
  --gold:#B8912B;
  --line:#DDE1E0;
  --radius:2px;
  --radius-lg:6px;
  --shadow: 0 30px 60px -20px rgba(16,27,45,0.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:100;
  background:rgba(247,248,246,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
nav.scrolled{box-shadow:0 8px 24px -18px rgba(16,27,45,0.4);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo{font-family:'Fraunces', serif; font-size:22px; font-weight:700; letter-spacing:-0.02em; display:flex; align-items:baseline; gap:2px;}
.logo span{color:var(--teal);}
.nav-links{display:flex; gap:34px; align-items:center;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--ink-soft); position:relative; padding:6px 0; transition:color .2s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--teal);}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--teal);}
.nav-cta{background:var(--ink); color:var(--paper) !important; padding:11px 22px; font-size:14px; font-weight:600; border-radius:var(--radius); transition:background .2s ease;}
.nav-cta:hover{background:var(--teal);}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;}
.nav-toggle span{width:22px; height:2px; background:var(--ink); display:block; transition:transform .25s ease, opacity .25s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- LANGUAGE SWITCHER (nav) ---------- */
.lang-switch{position:relative; margin-left:6px;}
.lang-current{display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--line); border-radius:20px; padding:7px 13px; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.03em; color:var(--ink-soft); cursor:pointer; transition:border-color .2s ease, color .2s ease;}
.lang-current:hover{border-color:var(--teal); color:var(--teal);}
.lang-current .chevron{font-size:8px; transition:transform .2s ease;}
.lang-switch.open .lang-current .chevron{transform:rotate(180deg);}
.lang-menu{position:absolute; top:calc(100% + 8px); right:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 28px -14px rgba(16,27,45,0.25); min-width:150px; padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:60;}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-option{display:block; padding:9px 12px; border-radius:6px; font-size:13.5px; color:var(--ink-soft);}
.lang-option:hover{background:var(--teal-light); color:var(--teal);}
.lang-option.active{color:var(--teal); font-weight:600;}

/* ---------- LANGUAGE SWITCHER (footer) ---------- */
.footer-lang{display:flex; gap:12px; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.03em;}
.footer-lang a{padding:0; color:var(--slate-light);}
.footer-lang a.active{color:var(--paper); font-weight:600;}
.footer-lang a:hover{color:var(--teal);}
.footer-lang .sep{color:rgba(255,255,255,0.2);}

/* ---------- BUTTONS ---------- */
.btn-primary{background:var(--ink); color:var(--paper); padding:15px 26px; font-size:14.5px; font-weight:600; border:none; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px; transition:background .2s ease, transform .2s ease;}
.btn-primary:hover{background:var(--teal); transform:translateY(-1px);}
.btn-secondary{background:transparent; color:var(--ink); padding:15px 24px; font-size:14.5px; font-weight:600; border-radius:var(--radius); border:1px solid var(--line); display:inline-flex; align-items:center; gap:8px; transition:border-color .2s ease, background .2s ease;}
.btn-secondary:hover{border-color:var(--ink); background:var(--paper-warm);}

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero{padding:64px 0 56px; border-bottom:1px solid var(--line);}
.eyebrow{font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--teal);}
.page-hero h1{font-size:42px; line-height:1.1; max-width:720px; margin-bottom:16px;}
.page-hero p{font-size:16.5px; color:var(--slate); max-width:600px;}
.breadcrumb{display:flex; gap:8px; font-size:13px; color:var(--slate-light); margin-bottom:22px;}
.breadcrumb a:hover{color:var(--teal);}

/* ---------- SECTION ---------- */
.section{padding:96px 0;}
.section-head{max-width:620px; margin-bottom:56px;}
.section-head h2{font-size:34px; line-height:1.15; margin-bottom:16px;}
.section-head p{color:var(--slate); font-size:16px;}
.section-alt{background:var(--paper-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- TRUST / STATS ---------- */
.stats-bar{display:flex; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--paper-warm);}
.stat{flex:1; padding:30px 26px; border-right:1px solid var(--line); text-align:left;}
.stat:last-child{border-right:none;}
.stat .num{font-family:'Fraunces', serif; font-size:34px; font-weight:600; color:var(--teal); line-height:1; margin-bottom:8px;}
.stat .lbl{font-size:13px; color:var(--slate);}

/* ---------- SERVICES GRID ---------- */
.services-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.service-card{background:var(--paper-warm); padding:34px 30px; transition:background .2s ease;}
.service-card:hover{background:var(--teal-light);}
.service-card .idx{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--gold); margin-bottom:18px;}
.service-card h3{font-size:19px; margin-bottom:10px; font-weight:600;}
.service-card p{font-size:14.5px; color:var(--slate); margin-bottom:16px;}
.service-card .link{font-size:13.5px; font-weight:600; color:var(--teal); display:inline-flex; align-items:center; gap:6px;}

/* ---------- PAYSLIP CARD ---------- */
.payslip{background:var(--ink); border-radius:6px; padding:36px 32px 30px; color:var(--paper); position:relative; box-shadow:var(--shadow);}
.payslip::before{content:""; position:absolute; left:-10px; top:60px; bottom:60px; width:2px; background:repeating-linear-gradient(to bottom, var(--gold) 0 6px, transparent 6px 12px); opacity:.6;}
.payslip-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.14);}
.payslip-head .tag{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-light); margin-bottom:6px;}
.payslip-head .name{font-size:16px; font-weight:600; font-family:'Fraunces',serif;}
.payslip-head .badge{background:var(--teal); color:var(--paper); font-family:'IBM Plex Mono', monospace; font-size:10.5px; padding:5px 10px; border-radius:20px; display:flex; align-items:center; gap:6px;}
.payslip-head .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mint);}
.payslip-row{display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace; font-size:13.5px; padding:9px 0; border-bottom:1px dashed rgba(255,255,255,0.12); color:#C7CDD8;}
.payslip-row span:last-child{color:var(--paper);}
.payslip-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.2);}
.payslip-total .lbl{font-size:13px; color:var(--slate-light);}
.payslip-total .amt{font-family:'Fraunces', serif; font-size:28px; font-weight:600; color:var(--mint);}
.payslip-note{margin-top:18px; font-size:11px; color:var(--slate-light); font-style:italic;}

/* ---------- HIGHLIGHT / DARK BOX ---------- */
.highlight-box{background:var(--ink); color:var(--paper); border-radius:6px; padding:44px; display:flex; flex-direction:column; justify-content:center;}
.highlight-box .eyebrow{color:var(--mint);}
.highlight-box .eyebrow::before{background:var(--mint);}
.highlight-box h3{color:var(--paper); font-size:26px; margin-bottom:16px; line-height:1.25;}
.highlight-box p{color:#B9C0CC; font-size:15px; margin-bottom:26px;}
.highlight-box .btn-primary{background:var(--mint); color:var(--ink);}
.highlight-box .btn-primary:hover{background:var(--paper);}

/* ---------- PROCESS ---------- */
.process-steps{display:flex; flex-direction:column;}
.step{display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--line);}
.step:first-child{padding-top:0;}
.step-num{font-family:'Fraunces', serif; font-size:22px; color:var(--slate-light); min-width:34px;}
.step h4{font-size:17px; margin-bottom:6px;}
.step p{font-size:14.5px; color:var(--slate);}

/* ---------- ACCORDION / FAQ ---------- */
.accordion{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-trigger{width:100%; text-align:left; background:none; border:none; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:600; color:var(--ink); font-family:'Fraunces', serif;}
.acc-trigger .plus{font-family:'IBM Plex Mono', monospace; font-size:18px; color:var(--teal); transition:transform .25s ease; flex-shrink:0; margin-left:16px;}
.acc-item.open .acc-trigger .plus{transform:rotate(45deg);}
.acc-panel{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.acc-panel-inner{padding:0 4px 22px; font-size:14.5px; color:var(--slate); max-width:680px;}

/* ---------- TABS ---------- */
.tabs-nav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:36px; border-bottom:1px solid var(--line);}
.tab-btn{background:none; border:none; padding:14px 18px; font-size:14px; font-weight:600; color:var(--slate); position:relative; border-radius:var(--radius) var(--radius) 0 0;}
.tab-btn:hover{color:var(--ink);}
.tab-btn.active{color:var(--teal);}
.tab-btn.active::after{content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--teal);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- TESTIMONIALS ---------- */
.testi-wrap{position:relative; max-width:720px; margin:0 auto; text-align:center;}
.testi-slide{display:none;}
.testi-slide.active{display:block;}
.testi-quote{font-family:'Fraunces', serif; font-size:22px; line-height:1.5; color:var(--ink); margin-bottom:22px; font-style:italic;}
.testi-name{font-size:14px; font-weight:600;}
.testi-role{font-size:12.5px; color:var(--slate-light);}
.testi-dots{display:flex; justify-content:center; gap:8px; margin-top:28px;}
.testi-dot{width:8px; height:8px; border-radius:50%; background:var(--line); border:none; padding:0;}
.testi-dot.active{background:var(--teal);}

/* ---------- CARDS (news / articles) ---------- */
.news-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
.news-card{background:var(--paper-warm); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;}
.news-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(16,27,45,0.25);}
.news-thumb{height:150px; background:linear-gradient(135deg, var(--ink), var(--teal)); position:relative;}
.news-thumb .tag{position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.15); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:5px 10px; border-radius:20px; backdrop-filter:blur(4px);}
.news-body{padding:22px 22px 26px; display:flex; flex-direction:column; flex:1;}
.news-date{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--slate-light); margin-bottom:10px;}
.news-body h3{font-size:17px; margin-bottom:10px; line-height:1.3;}
.news-body p{font-size:14px; color:var(--slate); margin-bottom:18px; flex:1;}
.news-body .link{font-size:13px; font-weight:600; color:var(--teal);}

/* ---------- ESTIMATOR (interactive tool) ---------- */
.estimator{background:var(--ink); border-radius:var(--radius-lg); padding:40px; color:var(--paper); display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.estimator-left h3{color:var(--paper); font-size:24px; margin-bottom:12px;}
.estimator-left p{color:#B9C0CC; font-size:14.5px; margin-bottom:24px;}
.est-field{margin-bottom:18px;}
.est-field label{display:flex; justify-content:space-between; font-size:13px; color:var(--slate-light); margin-bottom:8px;}
.est-field label .val{color:var(--mint); font-family:'IBM Plex Mono', monospace;}
input[type="range"]{width:100%; accent-color:var(--mint); height:4px;}
.est-select{width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:var(--paper); padding:10px 12px; border-radius:var(--radius); font-size:14px; font-family:'Inter',sans-serif;}
.est-result{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-lg); padding:28px;}
.est-result .row{display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace; font-size:13.5px; padding:8px 0; color:#C7CDD8; border-bottom:1px dashed rgba(255,255,255,0.12);}
.est-result .row span:last-child{color:var(--paper);}
.est-result .total{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.2);}
.est-result .total .amt{font-family:'Fraunces',serif; font-size:30px; color:var(--mint); font-weight:600;}
.est-note{font-size:11px; color:var(--slate-light); margin-top:14px; font-style:italic;}

/* ---------- VALUES / ICON CARDS ---------- */
.values-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.value-card{padding:0;}
.value-icon{width:44px; height:44px; border-radius:50%; background:var(--teal-light); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--teal); font-family:'Fraunces',serif; font-weight:600;}
.value-card h4{font-size:16.5px; margin-bottom:8px;}
.value-card p{font-size:13.5px; color:var(--slate);}

/* ---------- TIMELINE ---------- */
.timeline{position:relative; padding-left:32px; border-left:2px solid var(--line);}
.tl-item{position:relative; padding-bottom:40px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:""; position:absolute; left:-38px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--teal); border:3px solid var(--paper);}
.tl-year{font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--teal); margin-bottom:6px;}
.tl-item h4{font-size:17px; margin-bottom:6px;}
.tl-item p{font-size:14px; color:var(--slate); max-width:520px;}

/* ---------- TEAM ---------- */
.team-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.team-card{text-align:left;}
.team-avatar{width:100%; aspect-ratio:1; border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--teal-light), var(--paper-warm)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:30px; font-weight:600; color:var(--teal); margin-bottom:14px;}
.team-card h4{font-size:15.5px; margin-bottom:3px;}
.team-card .role{font-size:12.5px; color:var(--slate-light); font-family:'IBM Plex Mono', monospace;}

/* ---------- CONTACT ---------- */
.contact-info h2{font-size:34px; margin-bottom:18px;}
.contact-info p{color:var(--slate); margin-bottom:32px; font-size:15.5px;}
.contact-line{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line); font-size:14.5px;}
.contact-line:last-child{border-bottom:1px solid var(--line);}
.contact-line .k{font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate-light); min-width:90px;}
form.card-form{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.form-row.full{grid-template-columns:1fr;}
label{font-size:12.5px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:7px;}
input[type=text], input[type=email], input[type=tel], textarea, select.plain{width:100%; border:1px solid var(--line); background:var(--paper-warm); padding:12px 14px; font-family:'Inter', sans-serif; font-size:14px; border-radius:var(--radius); color:var(--ink);}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-light);}
textarea{resize:vertical; min-height:100px;}
.form-submit{width:100%; background:var(--ink); color:var(--paper); border:none; padding:15px; font-size:14.5px; font-weight:600; border-radius:var(--radius); cursor:pointer; margin-top:6px; transition:background .2s ease;}
.form-submit:hover{background:var(--teal);}
.form-success{display:none; background:var(--teal-light); border:1px solid var(--teal); color:var(--teal); padding:16px; border-radius:var(--radius); font-size:14px; margin-top:16px;}
.form-success.show{display:block;}
.map-block{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-top:28px; height:260px; position:relative; background:var(--paper-warm);}
.map-embed{width:100%; height:100%; border:0; display:block; filter:grayscale(0.15) contrast(1.02);}
.map-block::after{content:"Avenue de la Couronne 364A, 1050 Ixelles"; position:absolute; left:16px; bottom:16px; background:var(--ink); color:var(--paper); font-size:12px; font-family:'IBM Plex Mono',monospace; padding:8px 12px; border-radius:20px; pointer-events:none; box-shadow:0 8px 20px -8px rgba(16,27,45,0.5);}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:var(--slate-light); padding:64px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.1);}
footer .logo{color:var(--paper); margin-bottom:14px;}
footer .logo span{color:var(--mint);}
.footer-grid p{font-size:13.5px; line-height:1.7; max-width:280px;}
.footer-col h5{font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:#5B6577; margin-bottom:16px;}
.footer-col a{display:block; font-size:13.5px; padding:6px 0; color:var(--slate-light); transition:color .2s ease;}
.footer-col a:hover{color:var(--paper);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12px; color:#5B6577; flex-wrap:wrap; gap:12px;}

/* ---------- CTA BANNER ---------- */
.cta-banner{background:var(--ink); border-radius:var(--radius-lg); padding:56px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;}
.cta-banner h2{color:var(--paper); font-size:28px; max-width:480px;}
.cta-banner .btn-primary{background:var(--mint); color:var(--ink);}
.cta-banner .btn-primary:hover{background:var(--paper);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .services-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .news-grid{grid-template-columns:1fr 1fr;}
  .estimator{grid-template-columns:1fr;}
}
@media (max-width:920px){
  .nav-links{position:fixed; top:76px; left:0; right:0; background:var(--paper-warm); flex-direction:column; align-items:flex-start; padding:12px 32px 28px; gap:4px; border-bottom:1px solid var(--line); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;}
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-links a{width:100%; padding:12px 0;}
  .nav-links .nav-cta{margin-top:8px;}
  .nav-toggle{display:flex;}
  .lang-current{padding:6px 10px; font-size:11px;}
  .page-hero h1{font-size:32px;}
  .contact-cols, .about-cols{grid-template-columns:1fr !important;}
}
@media (max-width:600px){
  .services-grid, .values-grid, .team-grid, .news-grid, .footer-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .section{padding:64px 0;}
  .cta-banner{padding:36px 24px;}
  .stats-bar{flex-direction:column;}
  .stat{border-right:none; border-bottom:1px solid var(--line);}
  .stat:last-child{border-bottom:none;}
}