/* ============================================================
   KAYRA International Trading — Feuille de style globale
   ============================================================ */
:root {
  --red:       #D42B2B;
  --red-dk:    #9B1C1C;
  --red-lt:    #F05252;
  --dark:      #0E1117;
  --dark2:     #161B25;
  --dark3:     #1E2533;
  --white:     #FFFFFF;
  --off:       #F7F8FA;
  --gray:      #6B7280;
  --gray-lt:   #9CA3AF;
  --border-lt: rgba(0,0,0,.09);
  --border-dk: rgba(255,255,255,.08);
  --shadow:    0 2px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 36px rgba(0,0,0,.14);
  --ease:      cubic-bezier(.16,1,.3,1);
  --ff:        'Montserrat', sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--ff); background:var(--white); color:var(--dark); overflow-x:hidden; line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ---- CONTAINER ---- */
.container { max-width:1180px; margin:0 auto; padding:0 2rem; }

/* ---- SCROLL REVEAL ---- */
.sr { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.sr.visible { opacity:1; transform:none; }
.sr-d1 { transition-delay:.1s; }
.sr-d2 { transition-delay:.2s; }
.sr-d3 { transition-delay:.3s; }
.sr-d4 { transition-delay:.4s; }

/* ============================================================
   NAVBAR
   ============================================================ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:var(--white);
  border-bottom:1px solid var(--border-lt);
  height:68px; padding:0 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:box-shadow .3s;
}
#nav.shadow { box-shadow:0 2px 20px rgba(0,0,0,.1); }

/* Logo */
.nav-logo { display:flex; align-items:center; gap:.65rem; }
.nav-logo-icon {
  width:36px; height:36px; background:var(--red); border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-logo-icon svg { width:18px; height:18px; stroke:white; fill:none; stroke-width:2; }
.nav-logo-stack { display:flex; flex-direction:column; gap:1px; line-height:1; }
.nav-logo-brand {
  font-size:1.15rem; font-weight:900; letter-spacing:.14em;
  color:var(--red); text-transform:uppercase; line-height:1;
}
.nav-logo-brand sup { font-size:.42rem; font-weight:700; vertical-align:super; letter-spacing:0; }
.nav-logo-line {
  font-size:.48rem; font-weight:300; letter-spacing:.04em;
  color:var(--gray); display:block; line-height:1.35; white-space:nowrap;
}

/* Links */
.nav-links { display:flex; align-items:center; gap:.2rem; }
.nav-links a {
  font-size:.78rem; font-weight:600; color:var(--gray);
  padding:.42rem .9rem; border-radius:6px;
  transition:color .2s, background .2s;
  display:flex; align-items:center; gap:.3rem;
}
.nav-links a:hover, .nav-links a.act { color:var(--dark); background:var(--off); }
.nav-sep { width:1px; height:16px; background:rgba(0,0,0,.1); margin:0 .25rem; }

/* CTA Button */
.btn-nav {
  background:var(--red); color:white;
  font-size:.76rem; font-weight:800; letter-spacing:.05em;
  padding:.56rem 1.35rem; border-radius:50px;
  display:flex; align-items:center; gap:.5rem;
  box-shadow:0 2px 12px rgba(212,43,43,.28);
  transition:background .2s, transform .2s, box-shadow .2s;
  border:none; cursor:pointer; font-family:var(--ff);
}
.btn-nav:hover { background:var(--red-dk); transform:translateY(-1px); box-shadow:0 4px 20px rgba(212,43,43,.38); }
.btn-nav svg { width:13px; height:13px; stroke:white; fill:none; stroke-width:2; }

/* Hamburger */
.ham { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:.5rem; }
.ham span { display:block; width:22px; height:2px; background:var(--dark); border-radius:2px; transition:.3s; }

/* Mobile menu */
.mob-nav {
  display:none; position:fixed; inset:0; z-index:899;
  background:rgba(255,255,255,.99); flex-direction:column;
  align-items:center; justify-content:center; gap:2rem;
}
.mob-nav.open { display:flex; }
.mob-nav a { font-size:1.25rem; font-weight:700; color:var(--dark); transition:color .2s; }
.mob-nav a:hover { color:var(--red); }
.mob-close {
  position:absolute; top:1.5rem; right:2rem;
  font-size:1.7rem; cursor:pointer; color:var(--gray);
  background:none; border:none; font-family:var(--ff);
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  margin-top:68px;
  background:linear-gradient(160deg,#9B1C1C 0%,#C0392B 40%,#1a0808 100%);
  padding:5rem 2rem 4rem;
  text-align:center; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute;
  width:600px; height:600px; border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.page-hero-eyebrow {
  font-size:.62rem; font-weight:700; letter-spacing:.45em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:.8rem; position:relative; z-index:1;
}
.page-hero h1 {
  font-size:clamp(2rem,5vw,3.2rem); font-weight:900; color:white;
  letter-spacing:-.02em; line-height:1.1; position:relative; z-index:1;
}
.page-hero p {
  font-size:1rem; color:rgba(255,255,255,.75); max-width:520px;
  margin:.9rem auto 0; line-height:1.7; position:relative; z-index:1;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-hd { text-align:center; margin-bottom:3.5rem; }
.sec-hd h2 {
  font-size:clamp(1.7rem,4vw,2.6rem); font-weight:900;
  letter-spacing:-.02em; margin-bottom:.75rem; line-height:1.15;
}
.sec-hd p { font-size:.97rem; color:var(--gray); max-width:520px; margin:0 auto .9rem; line-height:1.7; }
.sec-hd .bar { width:56px; height:3px; border-radius:2px; background:var(--red); margin:0 auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--red); color:white;
  font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.9rem 2.2rem; border-radius:50px;
  box-shadow:0 4px 20px rgba(212,43,43,.3);
  transition:background .2s, transform .2s, box-shadow .2s;
  border:none; cursor:pointer; font-family:var(--ff);
}
.btn-primary:hover { background:var(--red-dk); transform:translateY(-2px); box-shadow:0 8px 28px rgba(212,43,43,.4); }
.btn-primary svg { width:14px; height:14px; stroke:white; fill:none; stroke-width:2; }

.btn-outline {
  display:inline-flex; align-items:center; gap:.55rem;
  background:transparent; color:var(--red);
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.85rem 2rem; border-radius:50px; border:2px solid var(--red);
  transition:background .2s, color .2s; cursor:pointer; font-family:var(--ff);
}
.btn-outline:hover { background:var(--red); color:white; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background:white; border-radius:14px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  background:var(--dark2);
  padding:3.5rem 0 2rem;
  border-top:1px solid var(--border-dk);
}
.ft-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem; margin-bottom:3rem;
}
.ft-brand {
  font-size:1.35rem; font-weight:900; color:white;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:.3rem;
}
.ft-brand span { color:var(--red); }
.ft-brand sup { font-size:.45rem; font-weight:700; color:var(--red); }
.ft-sub { font-size:.6rem; font-weight:300; letter-spacing:.05em; color:var(--gray); margin-bottom:1rem; }
.ft-tag { font-size:.82rem; color:var(--gray-lt); line-height:1.75; max-width:270px; margin-bottom:1.1rem; }
.ft-addr { font-size:.78rem; color:var(--gray-lt); line-height:1.8; }
.ft-addr strong { color:rgba(255,255,255,.6); font-weight:600; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; display:block; margin-bottom:.2rem; margin-top:.8rem; }
.ft-ch { font-size:.6rem; font-weight:800; letter-spacing:.4em; text-transform:uppercase; color:var(--red); margin-bottom:1.2rem; }
.ft-ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.ft-ul a { font-size:.83rem; color:var(--gray-lt); transition:color .2s; }
.ft-ul a:hover { color:white; }
.ft-bot {
  border-top:1px solid var(--border-dk); padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.ft-copy { font-size:.67rem; color:rgba(107,114,128,.4); letter-spacing:.05em; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-ov {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.65); backdrop-filter:blur(5px);
  align-items:center; justify-content:center; padding:1rem;
}
.modal-ov.open { display:flex; }
.modal-box {
  background:white; border-radius:20px;
  width:100%; max-width:580px; max-height:90vh; overflow-y:auto;
  animation:mIn .35s var(--ease);
}
@keyframes mIn { from{opacity:0;transform:scale(.95) translateY(14px)} to{opacity:1;transform:none} }
.modal-hd {
  background:linear-gradient(135deg,var(--red-dk),var(--red));
  padding:1.7rem 2rem; border-radius:20px 20px 0 0;
  display:flex; justify-content:space-between; align-items:flex-start;
}
.modal-hd h3 { font-size:1.1rem; font-weight:900; color:white; margin-bottom:.2rem; }
.modal-hd p { font-size:.78rem; color:rgba(255,255,255,.75); }
.modal-x {
  background:rgba(255,255,255,.2); border:none; cursor:pointer;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:white; transition:background .2s; flex-shrink:0; font-family:var(--ff);
}
.modal-x:hover { background:rgba(255,255,255,.3); }
.modal-body { padding:2rem; }
.modal-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* Form controls */
.fg { margin-bottom:1.1rem; }
.fg label { display:block; font-size:.74rem; font-weight:700; color:var(--dark); margin-bottom:.4rem; }
.fc {
  width:100%; padding:.7rem 1rem;
  background:var(--off); border:1.5px solid #E5E7EB; border-radius:8px;
  font-family:var(--ff); font-size:.85rem; color:var(--dark);
  transition:border-color .2s, box-shadow .2s; outline:none;
}
.fc:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(212,43,43,.1); }
textarea.fc { resize:vertical; min-height:110px; }
select.fc { cursor:pointer; }
.btn-send {
  width:100%; padding:.9rem;
  background:linear-gradient(135deg,var(--red-dk),var(--red));
  color:white; font-family:var(--ff); font-size:.82rem; font-weight:800;
  letter-spacing:.08em; border:none; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  transition:transform .2s, box-shadow .2s;
}
.btn-send:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(212,43,43,.4); }
.btn-send svg { width:15px; height:15px; stroke:white; fill:none; stroke-width:2; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px) {
  .ft-grid { grid-template-columns:1fr 1fr; }
  .ft-grid>*:first-child { grid-column:1/-1; }
}
@media(max-width:768px) {
  .ham { display:flex; }
  .nav-links, .btn-nav { display:none; }
  .modal-row { grid-template-columns:1fr; }
  .ft-grid { grid-template-columns:1fr; }
  .page-hero { padding:4rem 1.5rem 3rem; }
}
@media(max-width:480px) {
  .container { padding:0 1.25rem; }
}