/* ====== Brand Theme ====== */
:root {
  --blue:#0B63CE;
  --blue-700:#0a54ad;
  --orange:#F59E0B;
  --red:#EE2C1A;

  --ink:#0E2439;
  --ink-2:#17314d;
  --muted:#415A77;

  --line:#E6EEF7;
  --bg:#F7FBFF;
  --bg-2:#F1F6FF;
  --surface:#FFFFFF;

  --dark:#0B1220;
  --dark-2:#0F1A2E;
  --soft:#EEF6FF;

  --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.08);
}

* { box-sizing:border-box }
html, body { margin:0; padding:0 }
body {
  font: 16px/1.6 "Inter", "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;

h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }

  color:var(--ink);
  background:#fff;
}
.container { max-width:1160px; margin:0 auto; padding:0 18px }

/* ====== Sections ====== */
.section { padding:56px 0; background:var(--surface) }
.section.alt { background:linear-gradient(180deg,var(--bg-2),#fff) }
.section.dark { background:linear-gradient(180deg,var(--dark),var(--dark-2)); color:#cbd6e9 }

/* ====== Header ====== */
.site-header {
  position:sticky; top:0; z-index:70;
  background:linear-gradient(180deg,#ffffff, #f9fbff 80%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease, transform .18s ease;
}
.site-header.scrolled { box-shadow:0 10px 24px rgba(0,0,0,.06) }

.header-inner {
  display:flex; align-items:center; gap:16px;
  padding:8px 0;
}
.brand { display:flex; align-items:flex-end }
.brand img {
  height:52px;
  transform:translateY(3px);
}
@media (max-width:900px){
  .brand img { height:46px; transform:translateY(2px) }
}

.desktop-nav { display:flex; margin-left:auto; align-items:center; gap:8px; flex-wrap:wrap }
.desktop-nav a {
  color:var(--ink);
  text-decoration:none;
  padding:10px 12px; border-radius:12px;
  border:1px solid transparent;
}
.desktop-nav a:hover { background:var(--soft); border-color:var(--line) }
.desktop-nav a.is-active { background:var(--bg); border-color:var(--line) }

/* Primary Gradient Button */
.btn-primary {
  background: linear-gradient(90deg, var(--blue) 0%, #673ab7 50%, var(--red) 100%) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(11, 99, 206, 0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, var(--orange) 0%, #ff5f6d 50%, var(--red) 100%);
  box-shadow: 0 8px 22px rgba(238, 44, 26, 0.35);
}
.btn-primary,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active {
  color: #fff !important;
}
.header-btn {
  padding: 10px 20px;
  font-size: 0.92rem;
  border-radius: 14px;
}

.burger { display:none; margin-left:8px; background:transparent; border:0; font-size:26px; line-height:1 }
@media (max-width:900px){
  .desktop-nav { display:none }
  .header-inner { justify-content:space-between }
  .burger {
    display:block; margin-left:auto; position:relative; z-index:71;
    -webkit-tap-highlight-color:transparent;
  }
}

/* ===== Desktop Nav Dropdown ===== */
.desktop-nav .has-submenu { position: relative; }
.desktop-nav .has-submenu > a { display: flex; align-items: center; gap: 4px; }
.desktop-nav .has-submenu > a::after {
  content: "";
  border: 5px solid transparent;
  border-top-color: var(--ink);
  margin-left: 4px;
  transition: transform 0.2s ease;
}
.desktop-nav .has-submenu:hover > a::after { transform: rotate(180deg); }
.desktop-nav .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface);
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 200px;
  box-shadow: var(--shadow);
  z-index: 99;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s ease;
}
.desktop-nav .submenu a {
  display: block;
  padding: 8px 14px;
  color: var(--ink);
  white-space: nowrap;
  border-radius: 6px;
}
.desktop-nav .submenu a:hover { background: var(--soft); }
.desktop-nav .has-submenu:hover .submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ===== Mobile Drawer FIXED ===== */
.mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 82%;
  max-width: 320px;
  background: #fff;
  color: var(--ink);
  box-shadow: -4px 0 18px rgba(0,0,0,0.15);
  border-left: 1px solid var(--line);
  padding: 16px 0;
  overflow-y: auto;
  z-index: 9000;              /* above backdrop */
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-drawer.open { transform: translateX(0); }

/* Drawer inner wrapper */
.mobile-drawer .drawer-inner {
  position: relative;
  z-index: 2; /* ensure above backdrop */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Backdrop */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 8990; /* behind drawer */
}

/* Drawer links */
.mobile-drawer a.drawer-link {
  font-weight: 600;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}
.mobile-drawer a.drawer-link:hover {
  background: var(--bg-2);
  color: var(--blue);
}

/* Accordion toggle */
.mobile-drawer .accordion-toggle {
  all: unset;
  display: block;
  width: 100%;
  padding: 14px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  position: relative;
  text-align: left;
}
.mobile-drawer .accordion-toggle::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.mobile-drawer .accordion-item.open .accordion-toggle::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Accordion submenu */
.mobile-drawer .accordion-content {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.mobile-drawer .accordion-content a {
  display: block;
  padding: 12px 20px;
  font-weight: 500;
  color: var(--ink-2);
}
.mobile-drawer .accordion-content a:hover {
  background: #fff;
  color: var(--blue);
}

/* CTA button */
.mobile-drawer .drawer-cta {
  margin: 16px;
  padding: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--blue),var(--red));
  color: #fff !important;
  font-weight: 600;
  text-align: center;
  display: block;
}
/* Remove browser default arrow/marker from accordion buttons */

/* ====== Hero ====== */
.hero {
  padding:78px 0;
  background:radial-gradient(1200px 400px at 5% -10%, var(--bg), #fff 60%);
}
.hero h1 { font-size:46px; line-height:1.1; margin:0 }
.hero p.lead { max-width:880px; color:var(--ink-2); opacity:.94; font-size:18px; margin-top:10px }
.kicker { text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-size:12px }

.hero--pro {
  position:relative; padding:96px 0 72px;
  background:
    radial-gradient(1200px 400px at 5% -10%, var(--bg), #fff 60%),
    linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  overflow:hidden;
}
.hero--pro .gtitle {
  font-size:52px; line-height:1.04; margin:0;
  background:linear-gradient(90deg,var(--blue),var(--red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width:900px){ .hero--pro .gtitle{font-size:40px} }
.hero--pro .sub { max-width:900px; color:var(--ink-2); opacity:.96; font-size:18px; margin-top:12px }

.cta-ghost {
  padding:12px 14px; border-radius:14px; border:1px solid var(--line);
  text-decoration:none; color:var(--ink);
}
.cta-ghost:hover { background:var(--bg) }

.hero-blobs::before, .hero-blobs::after {
  content:""; position:absolute; border-radius:999px; filter:blur(38px); opacity:.5; pointer-events:none;
}
.hero-blobs::before {
  width:420px; height:420px; left:-120px; top:-140px;
  background:radial-gradient(closest-side,rgba(11,99,206,.35),transparent 70%);
  animation:blob1 12s ease-in-out infinite alternate;
}
.hero-blobs::after {
  width:360px; height:360px; right:-120px; top:-80px;
  background:radial-gradient(closest-side,rgba(238,44,26,.28),transparent 70%);
  animation:blob2 14s ease-in-out infinite alternate;
}
@keyframes blob1 { from{transform:translateY(0)} to{transform:translateY(22px)} }
@keyframes blob2 { from{transform:translateY(0)} to{transform:translateY(-18px)} }

/* Scroll cue */
.scroll-cue { display:inline-flex; align-items:center; gap:8px; color:var(--muted); margin-top:14px; font-size:14px }
.scroll-cue .dot { width:6px; height:6px; border-radius:999px; background:var(--muted); animation:bop 1.2s infinite }
@keyframes bop { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }

/* ====== Grids, Tiles & Cards ====== */
.grid { display:grid; gap:18px }
.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)) }
.cols-3 { grid-template-columns:repeat(3,1fr) }
@media (max-width:1100px){.cols-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.cols-4,.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cols-4,.cols-3{grid-template-columns:1fr}}

.tile {
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px;
  position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile::before {
  content:""; position:absolute; inset:-1px; border-radius:18px;
  background:linear-gradient(135deg,rgba(11,99,206,.25),rgba(238,44,26,.25));
  opacity:0; transition:opacity .2s ease; z-index:0;
}
.tile > * { position:relative; z-index:1 }
.tile:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#dbe7f9 }
.tile:hover::before { opacity:1 }

.icon-circle {
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:10px;
  background:linear-gradient(135deg,var(--bg-2),#fff);
  border:1px solid var(--line); color:var(--blue);
}
.ico { width:22px; height:22px; display:block }

/* Premium tile v2 (glow) */
/* Default tile background with subtle brand gradient */
.tile.v2 {
  background: linear-gradient(135deg,
    rgba(11,99,206,0.08) 0%,
    rgba(103,58,183,0.08) 50%,
    rgba(238,44,26,0.08) 100%
  ), #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  transition: all 0.3s ease;
}

/* Hover → switch to warm gradient background */
.tile.v2:hover {
  background: linear-gradient(135deg,
    rgba(245,158,11,0.15) 0%,   /* orange */
    rgba(255,95,109,0.15) 50%, /* pinkish */
    rgba(238,44,26,0.15) 100%  /* red */
  ), #fff;
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}


/* Cards, pills, product cards */
.card { border:1px solid var(--line); border-radius:var(--radius); padding:16px; background:#fff;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#dbe7f9 }
.pills { display:flex; flex-wrap:wrap; gap:8px }
.pills span { background:#EEF6FF; border:1px solid #D9E7F6; border-radius:999px; padding:6px 10px; font-size:12px }

.pcard {
  border:1px solid var(--line); border-radius:18px; padding:16px; background:#fff;
  display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcard:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#dbe7f9 }
.pthumb { width:64px; height:64px; border-radius:14px; object-fit:contain; background:#f2f7ff; border:1px solid var(--line) }

/* Stats */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
@media (max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}
.stat {
  background:linear-gradient(135deg,var(--blue),var(--blue-700));
  color:#fff; border-radius:16px; padding:18px;
}
.stat b { font-size:32px; display:block; line-height:1.2 }
.stat span { opacity:.95 }

/* ===== Journey / Timeline (modernized) ===== */
.timeline {
  position: relative;
  margin: 28px 0;
  padding-left: 48px; /* more space for timeline dots */
}
.timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(var(--blue), var(--red));
  border-radius: 6px;
  opacity: 0.2;
}

/* timeline items */
.t-item {
  position: relative;
  margin: 0 0 32px 0;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  animation: fadeInUp 0.6s ease forwards;
}
.t-item:last-child { margin-bottom: 0; }

/* milestone circle */
.mile-dot {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--blue),var(--blue-700));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(11,99,206,0.25);
  transition: all 0.3s ease;
}
.t-item:hover .mile-dot {
  background: linear-gradient(135deg,var(--orange),var(--red));
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 16px rgba(238,44,26,0.35);
}

/* milestone content */
.mile-content {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mile-content strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.mile-content p {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.t-item:hover .mile-content {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.1);
}

/* subtle fade-up animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Logos strip */
.logos { display:flex; gap:28px; flex-wrap:wrap; align-items:center; opacity:.9 }
.logos img { height:28px; filter:grayscale(100%) contrast(1.1); opacity:.85 }
.logos img:hover { filter:none; opacity:1 }

/* Marquee logos */
.marquee { overflow:hidden; mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent) }
.marquee-track { display:flex; gap:36px; animation:marquee 18s linear infinite; align-items:center }
.marquee img { height:28px; filter:grayscale(100%) contrast(1.1); opacity:.85 }
.marquee img:hover { filter:none; opacity:1 }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Testimonials */
.testi { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media(max-width:860px){.testi{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.testi{grid-template-columns:1fr}}
.quote {
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px;
  box-shadow:0 8px 28px rgba(0,0,0,.05)
}
.quote .who { margin-top:10px; color:var(--muted); font-size:14px }

/* FAQ */
.faq { display:grid; gap:12px }
.faq details { border:1px solid var(--line); border-radius:14px; background:#fff; padding:10px }
.faq summary { cursor:pointer; font-weight:600; list-style:none }
.faq summary::-webkit-details-marker{display:none}
.faq p { color:var(--muted); margin:8px 0 0 }

/* Tech stack badges */
.badges { display:flex; flex-wrap:wrap; gap:8px }
.badge { border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 10px; font-size:12px }

/* Highbar chips */
.highbar { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.highbar .chip { font-size:12px; border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 10px }

/* ====== Footer ====== */
.site-footer {
  background:linear-gradient(180deg,var(--dark),var(--dark-2));
  color:#cbd6e9;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:40px
}
.site-footer .cta {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; padding:28px 0
}
.site-footer .cta h3 { margin:0 0 6px; color:#e7efff }
.site-footer .cta p { margin:0; color:#9db0cf }
.site-footer .cols {
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:10px 0 24px
}
@media (max-width:860px){.site-footer .cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer strong { color:#e7efff; display:block; margin-bottom:6px }
.site-footer a { display:block; color:#b7c6de; text-decoration:none; margin:6px 0 }
.site-footer a:hover { color:#ffffff }
.legal { color:#8fa3c2; font-size:12px; padding:10px 0 26px; border-top:1px solid rgba(255,255,255,.06); margin-top:10px }




/* Header Button (slimmer variant) */
.header-btn {
  padding: 10px 20px;
  font-size: 0.92rem;
  border-radius: 14px;
}

/* Footer Button (stronger, slightly rectangular) */
/* Footer Button (stronger, slightly rectangular) */
.site-footer .btn-primary {
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25),
              0 0 12px rgba(238, 44, 26, 0.35);
}

.site-footer .btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, var(--orange) 0%, #ff5f6d 50%, var(--red) 100%);
  box-shadow: 0 6px 20px rgba(238, 44, 26, 0.45);
}

.site-footer .cta {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
  padding: 28px 24px;
}

/* Header button — slimmer */
.header-btn {
  padding: 10px 20px;
  font-size: 0.92rem;
  border-radius: 14px;
}

/* Hover state */
.site-footer .btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, var(--orange) 0%, #ff5f6d 50%, var(--red) 100%);
  box-shadow: 0 6px 20px rgba(238, 44, 26, 0.45);
}

/* Sticky CTA */
.sticky-cta {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9500;

  background: linear-gradient(135deg, var(--blue), var(--red));
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;       /* slightly smaller than footer button */
  padding: 10px 20px;      /* balanced pill shape */
  border-radius: 999px;    /* full pill */
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(11, 99, 206, 0.35);
  transition: all 0.25s ease;
}

.sticky-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--orange), var(--red));
  box-shadow: 0 10px 24px rgba(238, 44, 26, 0.45);
}



/* Sticky WhatsApp CTA */
.sticky-wa {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 9500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(37,211,102,0.35),
              0 0 0 2px rgba(255,255,255,.6);
  animation: fadeUp 0.6s ease both;
}
.sticky-wa svg { width: 26px; height: 26px; display: block }

@media (max-width: 520px) {
  .sticky-wa {
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(66px + env(safe-area-inset-bottom));
    width: 52px; height: 52px;
  }
  .sticky-wa svg { width: 24px; height: 24px }
}

/* Entrance animation for stickies */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ====== Animations ====== */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease }
.reveal.in { opacity:1; transform:none }
.floaty { animation:floaty 6s ease-in-out infinite }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.reveal.d1{transition-delay:.05s}
.reveal.d2{transition-delay:.1s}
.reveal.d3{transition-delay:.15s}
.reveal.d4{transition-delay:.2s}
/* ===== Approach (scoped) ===== */
.container.wide{max-width:1280px}

/* subtle band + progress rail */
.section.approach{background:linear-gradient(180deg,var(--bg-2),#fff)}
.approach .progress-rail{
  position:relative;height:10px;margin:6px 0 14px;border-top:1px solid var(--line);
  border-left:2px solid var(--line);border-radius:10px 0 0 10px;
}
.approach .progress-rail .dot{
  position:absolute;top:-9px;width:18px;height:18px;border-radius:12px;
  background:radial-gradient(closest-side, #fff 35%, rgba(11,99,206,.15) 36%, rgba(11,99,206,.15) 62%, transparent 63%);
  border:1px solid var(--line);box-shadow:0 6px 14px rgba(0,0,0,.06)
}
.approach .progress-rail .d1{left:6%}
.approach .progress-rail .d2{left:28%}
.approach .progress-rail .d3{left:55%}
.approach .progress-rail .d4{left:82%}

/* timeline */
.approach .timeline{position:relative;padding-left:22px}
.approach .timeline::before{
  content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--line)
}
.approach .t-item{position:relative;padding:10px 0 16px 4px}
.approach .t-item::before{
  content:"";position:absolute;left:-6px;top:8px;width:12px;height:12px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 4px rgba(11,99,206,.12)
}
.approach .step-badge{
  display:inline-grid;place-items:center;margin-right:8px;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-700));color:#fff;
  font-weight:700;font-size:13px
}
.approach .muted{color:var(--ink-2)}
.approach .mini-list{margin:8px 0 0 18px;color:var(--ink)}
.approach .mini-list li{margin:4px 0}

/* phase mini tiles */
.approach .phase{display:flex;align-items:flex-start;gap:10px}
.approach .phase-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg,var(--bg-2),#fff);border:1px solid var(--line)
}
.approach .phase-ico .ico{width:20px;height:20px}

/* KPI rings (pure CSS) */
.approach .kpi-rings{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.approach .kpi-rings{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.approach .kpi-rings{grid-template-columns:1fr}}
.approach .ring-kpi{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;
  display:grid;justify-items:center;gap:8px;box-shadow:0 6px 18px rgba(0,0,0,.05)
}
.approach .ring{
  --size:96px; --gap:7px; --p:.8; /* fallback progress if not set inline */
  width:var(--size);height:var(--size);border-radius:50%;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--blue) calc(360deg * var(--p)), #eaf1ff 0);
}
.approach .ring::before{ 
  content:"";position:absolute;inset:var(--gap);background:#fff;border-radius:50%;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.03)
}
.approach .ring .val{position:relative;font-weight:700}
.approach .kpi-label{color:var(--muted);font-size:13px}
.approach .ring {
  background: conic-gradient(
    var(--blue) 0%,
    #673ab7 calc(360deg * var(--p)/2),
    var(--red) calc(360deg * var(--p)),
    #eaf1ff 0
  );
}

/* support tiles row reuses .tile.v2 — nothing else needed */

/* responsive fix for the four grids under this section */
.approach .phase-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.approach .phase-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.approach .phase-cards{grid-template-columns:1fr}}
/* Approach tiles grid */
.approach-tiles{margin-top:24px}
.approach-tiles .tile{
  display:grid;gap:8px;
  border:1px solid var(--line);border-radius:18px;
  padding:18px;background:#fff;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.approach-tiles .tile:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:#dbe7f9;
}
.approach-tiles .tile strong{font-size:18px;color:var(--ink)}
.approach-tiles .tile p{margin:0;color:var(--ink-2)}
.approach-tiles .mini-list{margin:6px 0 0 16px;font-size:14px;color:var(--ink-2)}
.approach-tiles .mini-list li{margin:3px 0}
/* ===== Careers (scoped) ===== */
.page-careers .hero--pro{
  /* keep your base hero style, add mesh + blobs to match screenshot */
  background:
    radial-gradient(1200px 400px at 5% -10%, var(--bg), #fff 60%),
    linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  position:relative; overflow:hidden;
}
.page-careers .hero--pro::before,
.page-careers .hero--pro::after{
  content:""; position:absolute; border-radius:999px; filter:blur(38px); opacity:.45; pointer-events:none;
}
.page-careers .hero--pro::before{
  width:480px; height:480px; left:-140px; top:-160px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--blue) 70%, transparent), transparent 70%);
  animation:blob1 12s ease-in-out infinite alternate;
}
.page-careers .hero--pro::after{
  width:420px; height:420px; right:-140px; top:-100px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--red) 55%, transparent), transparent 70%);
  animation:blob2 14s ease-in-out infinite alternate;
}

/* gradient headline like the image */
.page-careers .hero--pro .gtitle{
  background:linear-gradient(90deg,var(--blue), var(--blue-700) 35%, var(--red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.02em;
}
.page-careers .icon-circle {
  background: linear-gradient(135deg, var(--blue) 0%, #673ab7 50%, var(--red) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.page-careers .tile:hover .icon-circle {
  background: linear-gradient(135deg, var(--orange) 0%, #ff5f6d 50%, var(--red) 100%);
  transform: rotate(8deg) scale(1.1);
  box-shadow: 0 6px 16px rgba(238,44,26,0.3);
}
.page-careers .pcard,
.page-careers .tile {
  background: linear-gradient(135deg,
    rgba(11,99,206,0.06) 0%,     /* blue faint */
    rgba(103,58,183,0.06) 50%,   /* purple faint */
    rgba(238,44,26,0.06) 100%    /* red faint */
  ), #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: all 0.3s ease;
}

/* Hover → brighter glow */
.page-careers .pcard:hover,
.page-careers .tile:hover {
  background: linear-gradient(135deg,
    rgba(245,158,11,0.15) 0%,    /* orange glow */
    rgba(255,95,109,0.15) 50%,   /* pinkish glow */
    rgba(238,44,26,0.15) 100%    /* red glow */
  ), #fff;
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* lighter chips */
.page-careers .highbar .chip{
  background:#fff; border-color:var(--line);
}

/* ===== Better Careers form ===== */
.page-careers .apply .card{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow);
}
.page-careers .apply .shell{
  display:grid; gap:18px; grid-template-columns:1.2fr .8fr;
}
@media (max-width:980px){ .page-careers .apply .shell{ grid-template-columns:1fr; } }

.page-careers .apply .side{
  border:1px solid var(--line); border-radius:16px; padding:18px;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 40%),
    radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, var(--red) 12%, transparent), transparent 45%),
    #fff;
}

/* floating labels (uses your form-field sizing) */
.page-careers .floating{ position:relative; }
.page-careers .floating input,
.page-careers .floating textarea,
.page-careers .floating select{
  width:100%; height:48px; padding:22px 14px 10px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
}
.page-careers .floating textarea{ min-height:110px; padding-top:26px; }
.page-careers .floating label{
  position:absolute; left:12px; top:12px; font-size:12px; color:var(--muted);
  background:#fff; padding:0 6px; border-radius:6px; pointer-events:none;
  transform:translateY(-10px); transition:opacity .15s ease;
}
.page-careers .floating :is(input,textarea,select):focus{
  outline:none; border-color:#cfe0fb; box-shadow:0 0 0 4px rgba(11,99,206,.14);
}

/* Dropzone + progress */
.page-careers .dropzone{
  border:1.5px dashed #cbd5e1; border-radius:14px; padding:18px; text-align:center;
  background:var(--bg-2); transition:.15s ease;
}
.page-careers .dropzone.dragover{ background:#eef2ff; border-color:var(--blue); }
.page-careers .progress{ height:8px; width:100%; background:#e6eef7; border-radius:999px; overflow:hidden; display:none; }
.page-careers .progress > span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--blue),var(--red)); }

/* Counters & meta */
.page-careers .counter{ font-size:12px; color:var(--muted); text-align:right; }
.page-careers .apply .actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* keep your hero blob animations */
@keyframes blob1 { from{transform:translateY(0)} to{transform:translateY(22px)} }
@keyframes blob2 { from{transform:translateY(0)} to{transform:translateY(-18px)} }
/* ====== Tile Modern UI Enhancements ====== */
.tile.v2, .card, .pcard {
  position: relative;
  border-radius: 18px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: all 0.35s ease;
  overflow: hidden;
  cursor: pointer;
}

/* Gradient hover glow */
.tile.v2::before, .card::before, .pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, var(--blue), var(--orange));
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude; 
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Hover states */
.tile.v2:hover, .card:hover, .pcard:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.tile.v2:hover::before, .card:hover::before, .pcard:hover::before {
  opacity: 1;
}

/* Icons inside circle */
.icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--blue) 0%, #673ab7 50%, var(--red) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.tile.v2:hover .icon-circle {
  transform: rotate(8deg) scale(1.1);
  background: linear-gradient(135deg, var(--red) 0%, #673ab7 50%, var(--blue) 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}


/* Text inside tiles */
.tile.v2 strong, .card strong {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}
.tile.v2 p, .card p {
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 6px;
  color: var(--muted);
}

/* Stats with counter animation */
.stats .stat {
  text-align: center;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg,var(--blue),var(--blue-700)); /* gradient stays */
  color:#fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s ease;
}
.stats .stat:hover {
  transform: translateY(-5px) scale(1.05);
  background: linear-gradient(135deg,var(--orange),var(--red));   /* hover theme */
}
.stats .stat b {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color:#fff;   /* keep white text */
}
.stats .stat span {
  color: rgba(255,255,255,0.9);
}

/* Product Cards (pcard) */
.pcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.pcard img.pthumb {
  border-radius: 12px;
  transition: transform 0.3s ease;
  width: 100%;
  height: auto;
}
.pcard:hover img.pthumb {
  transform: scale(1.05);
}

/* Marquee logos animation */
.marquee-track {
  display: flex;
  gap: 50px;
  animation: scroll 25s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes scroll {
  from {transform: translateX(0);}
  to {transform: translateX(-50%);}
}

/* Pills upgrade */
.pills span, .badge {
  display: inline-block;
  background: #f4f7fb;
  border-radius: 30px;
  padding: 4px 12px;
  font-size: 0.82rem;
  margin: 3px;
  color: var(--ink-2);
  font-weight: 500;
  transition: background 0.3s ease;
}
.pills span:hover, .badge:hover {
  background: var(--blue);
  color: #fff;
}

/* FAQ smooth */
.faq details {
  border: 1px solid #e4e9f2;
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}
.faq details[open] {
  background: #f8faff;
  border-color: var(--blue);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-2);
}
/* Gradient icons everywhere */
/* Default gradient (logo theme) */
.icon-circle.theme,
.phase-ico {
  background: linear-gradient(135deg, var(--blue) 0%, #673ab7 50%, var(--red) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* On hover → brighter warm gradient */
.tile.v2:hover .icon-circle.theme,
.tile.v2:hover .phase-ico {
  background: linear-gradient(135deg, var(--orange) 0%, #ff5f6d 50%, var(--red) 100%);
  transform: rotate(8deg) scale(1.1);
  box-shadow: 0 6px 16px rgba(238,44,26,0.3);
}
/* --- Careers Job Card Final Spacing Fix --- */
.page-careers .job-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 24px 22px;       /* balanced padding */
  gap: 16px;                /* even spacing between icon, title, pills, and text */
  min-height: 260px;        /* consistent card height */
  text-align: left;
}

.page-careers .job-card .icon-circle {
  width: 60px;
  height: 60px;
  margin-bottom: 8px;       /* space below icon */
  flex-shrink: 0;
}

.page-careers .job-card .job-content {
  display: flex;
  flex-direction: column;
  gap: 8px;                 /* space between title, pills, and description */
}

.page-careers .job-card strong {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.page-careers .job-card .pills {
  margin: 6px 0;
  gap: 8px;                 /* nice spacing between pills */
}

.page-careers .job-card .muted {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 2px;
}
/* Force all icons inside gradient circles to white */
.icon-circle svg,
.icon-circle .ico,
.tile.v2 .icon-circle svg,
.tile.v2 .icon-circle .ico {
  fill: #fff !important;
  color: #fff !important;
}
/* Force white icons ONLY inside gradient circles */
.icon-circle.theme svg,
.icon-circle.theme .ico,
.tile.v2 .icon-circle svg,
.tile.v2 .icon-circle .ico,
.page-careers .icon-circle svg {
  fill: #fff !important;
  color: #fff !important;
}

/* For light circles (used in approach / KPI / infra tiles) → dark icons */
.phase-ico svg,
.phase-ico .ico,
.approach-tiles .icon-circle svg,
.approach-tiles .icon-circle .ico {
  fill: var(--ink) !important;
  color: var(--ink) !important;
}
/* Careers filter bar spacing */
.page-careers .filters {
  margin-bottom: 24px;   /* space below filters */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Job cards grid spacing */
.page-careers .job-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;   /* space between cards */
  margin-top: 10px;
}

/* Job card consistent height */
.page-careers .job-card {
  min-height: 280px;  /* balanced height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Space between heading and filters */
.page-careers h2, 
.page-careers h3, 
.page-careers .kicker {
  margin-bottom: 12px; /* give heading some breathing room */
}

.page-careers .filters {
  margin: 12px 0 28px;  /* top & bottom spacing */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* Careers Filters Bar */
.page-careers .filters {
  margin: 16px 0 32px;          /* spacing above & below */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;                    /* gap between inputs */
  align-items: center;
}

/* Inputs & Dropdowns */
.page-careers .filters input[type="text"],
.page-careers .filters select {
  height: 42px;                 /* consistent height */
  min-width: 180px;             /* default width */
  padding: 0 14px;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
}

/* Hover & Focus */
.page-careers .filters input[type="text"]:focus,
.page-careers .filters select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11,99,206,0.15);
}

/* Placeholder styling */
.page-careers .filters input[type="text"]::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

/* Make responsive */
@media (max-width: 860px) {
  .page-careers .filters {
    flex-direction: column;
    align-items: stretch;
  }
  .page-careers .filters input[type="text"],
  .page-careers .filters select {
    width: 100%;      /* full width on small screens */
    min-width: auto;
  }
}
/* Remove browser default arrow/marker from accordion buttons */
.accordion-toggle {
  all: unset;                 /* reset ALL browser default button styles */
  display: block;
  width: 100%;
  padding: 14px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: #fff !important;  /* force pure white */
  cursor: pointer;
  position: relative;           /* for arrow positioning */
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.accordion-toggle::-webkit-details-marker { display: none; }

/* 🔥 Force mobile drawer and submenus to pure white */
.mobile-drawer .drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Links (top-level) */
.mobile-drawer a.drawer-link {
  font-weight: 600;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.mobile-drawer a.drawer-link:hover {
  background: var(--bg-2);
  color: var(--blue);
}

/* Accordion items */
.mobile-drawer .accordion-item {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* Accordion toggle with arrow */
.mobile-drawer .accordion-toggle::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.mobile-drawer .accordion-item.open .accordion-toggle::after {
  transform: translateY(-50%) rotate(180deg);
}



/* 🔥 Mobile Drawer Final Styles (clean + consistent) */

/* Drawer inner wrapper */
.mobile-drawer .drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Top-level links */
.mobile-drawer a.drawer-link {
  font-weight: 600;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.mobile-drawer a.drawer-link:hover {
  background: var(--bg-2);
  color: var(--blue);
}

/* Accordion items */
.mobile-drawer .accordion-item {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* Accordion toggle */
.mobile-drawer .accordion-toggle {
  all: unset;
  display: block;
  width: 100%;
  padding: 14px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  position: relative;
  text-align: left;
  border: none;
  box-shadow: none;
}
.mobile-drawer .accordion-toggle::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.mobile-drawer .accordion-item.open .accordion-toggle::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Accordion submenu (consistent light grey) */
.mobile-drawer .accordion-content {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.mobile-drawer .accordion-content a {
  display: block;
  padding: 12px 20px;
  font-weight: 500;
  color: var(--ink-2);
}
.mobile-drawer .accordion-content a:hover {
  background: #fff;
  color: var(--blue);
}

/* Book button area */
.mobile-drawer .drawer-cta {
  margin: 16px;
  padding: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--blue),var(--red));
  color: #fff !important;
  font-weight: 600;
  text-align: center;
  display: block;
}
/* ✅ Force all mobile drawer items to light grey */
#mobile-drawer,
#mobile-drawer .drawer-inner,
#mobile-drawer .accordion-item,
#mobile-drawer .accordion-toggle,
#mobile-drawer .accordion-content,
#mobile-drawer a.drawer-link {
  background: var(--bg-2) !important;
  background-color: var(--bg-2) !important;
  color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ✅ Hover effect stays white */
#mobile-drawer a:hover,
#mobile-drawer .accordion-content a:hover {
  background: #fff !important;
  color: var(--blue) !important;
}

/* ✅ Arrow color stays muted */
#mobile-drawer .accordion-toggle::after {
  color: var(--muted) !important;
}
/* ===== Mobile Drawer Modern Upgrade ===== */

/* Slide + fade animation */
.mobile-drawer {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.3s ease;
}
.mobile-drawer.open {
  transform: translateX(0);
  opacity: 1;
}

/* Rounded corners + shadow glow */
.mobile-drawer {
  border-radius: 20px 0 0 20px;
  box-shadow: -6px 0 24px rgba(0,0,0,0.25);
}

/* Bigger tap targets */
.mobile-drawer a.drawer-link,
.mobile-drawer .accordion-toggle {
  padding: 16px 22px;
  font-size: 1rem;
}

/* Gradient left highlight */
.mobile-drawer a.drawer-link:hover,
.mobile-drawer .accordion-content a:hover {
  background: linear-gradient(to right, var(--bg-2), #fff);
  border-left: 4px solid var(--blue);
  color: var(--blue);
}

/* Smooth accordion animation */
.mobile-drawer .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-drawer .accordion-item.open .accordion-content {
  max-height: 500px; /* adjust if needed */
}

/* Sticky CTA at bottom */
.mobile-drawer .drawer-cta {
  position: sticky;
  bottom: 0;
  background: linear-gradient(90deg,var(--blue),var(--red));
  margin: 20px;
  font-size: 1rem;
  padding: 16px;
  border-radius: 14px;
}
/* === Modern Contact Form Styles === */
.contact-form {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: var(--shadow);
  animation: fadeInUp 0.6s ease both;
}

.contact-form .form-title {
  margin: 0;
  font-size: 1.4rem;
  color: var(--ink);
}

.contact-form .form-sub {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Responsive grid for first row */
.contact-form .two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .contact-form .two-cols {
    grid-template-columns: 1fr;
  }
}

/* Floating labels */
.floating {
  position: relative;
}
.floating input,
.floating textarea {
  width: 100%;
  padding: 16px 14px 10px 40px; /* extra left padding for icon */
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: all 0.25s ease;
  font-size: 0.95rem;
}
.floating textarea { min-height: 110px; padding-top: 22px; }

.floating label {
  position: absolute;
  left: 38px;
  top: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  background: #fff;
  padding: 0 6px;
  border-radius: 6px;
  transition: all 0.25s ease;
  pointer-events: none;
}

/* On focus */
.floating input:focus,
.floating textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(11,99,206,.15);
}
.floating input:focus + label,
.floating textarea:focus + label,
.floating input:not(:placeholder-shown) + label,
.floating textarea:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 0.75rem;
  color: var(--blue);
}

/* Icons inside inputs */
.with-icon .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--muted);
}

/* Submit button animation */
.contact-form .submit-btn {
  padding: 14px 24px;
  font-size: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-form .submit-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(238, 44, 26, 0.35);
}
/* Branch Cards */
.branch-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.branch-card h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.branch-card p {
  margin: 2px 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.branch-card .muted {
  color: var(--muted);
  font-size: 0.85rem;
}
.branch-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.footer-contact .contact-item {
  display: flex;
  align-items: center;
  gap: 8px;             /* spacing between icon and text */
  margin: 6px 0;
}

.footer-contact .contact-item .icon {
  font-size: 1rem;
  line-height: 1;
}

.footer-contact a {
  color: #b7c6de;
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-contact a:hover {
  color: #fff;
}
/* 🌍 Flag Marquee */
.flag-marquee {
  overflow: hidden;
  margin-top: 14px;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.flag-track {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  animation: scrollFlags 18s linear infinite;
  font-size: 0.95rem;
}

.flag-track span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
}

.flag-track span:hover {
  color: var(--blue);
  transform: scale(1.05);
  transition: all 0.25s ease;
}

@keyframes scrollFlags {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}