/* =========================================================
   VeSure Mobile App Development Page
   Custom utility layer — built to replicate the exact visual
   output of the original Tailwind classes, running on top of
   Bootstrap 5.2.3. No layout, spacing, or color values were
   changed — every rule below maps 1:1 to the Tailwind utility
   it replaces.
   ========================================================= */

:root{
  --vesure-primary:#534AB7;
  --vesure-primary-dark:#3F388F;
  --vesure-primary-light:#6F66D1;
  --vesure-primary-50:#EEEDF8;
  --vesure-success:#1D9E75;
  --vesure-success-light:#E7F5F0;
  --vesure-accent:#D85A30;
  --vesure-accent-light:#FBEDE6;
  --vesure-ink:#0F172A;
  --vesure-ink-soft:#475569;
  --vesure-ink-mute:#94A3B8;
  --vesure-line:#E2E8F0;
  --vesure-surface:#F8FAFC;
  --vesure-card:#FFFFFF;
  --shadow-soft:0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.06);
  --shadow-card:0 1px 3px 0 rgba(15,23,42,0.05), 0 4px 12px -2px rgba(15,23,42,0.06);
  --shadow-lift:0 8px 24px -4px rgba(83,74,183,0.15);
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', system-ui, sans-serif;
  color:var(--vesure-ink);
  background:#fff;
}

/* ---------- Fade-in ---------- */
.fade-in{ animation:fadeIn .4s ease both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Details / summary (FAQ accordion) ---------- */
details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }
details > summary{ cursor:pointer; }
details[open] .chev{ transform:rotate(180deg); }
.chev{ transition:transform .2s ease; }

/* ---------- Color utilities ---------- */
.bg-vesure-primary{ background-color:var(--vesure-primary)!important; }
.bg-vesure-primary-50{ background-color:var(--vesure-primary-50)!important; }
.bg-vesure-success-light{ background-color:var(--vesure-success-light)!important; }
.bg-vesure-surface{ background-color:var(--vesure-surface)!important; }
.bg-white{ background-color:#fff!important; }
.bg-red-50{ background-color:#FEF2F2!important; }

.text-vesure-primary{ color:var(--vesure-primary)!important; }
.text-vesure-primary-50{ color:var(--vesure-primary-50)!important; }
.text-vesure-accent{ color:var(--vesure-accent)!important; }
.text-vesure-ink{ color:var(--vesure-ink)!important; }
.text-vesure-ink-soft{ color:var(--vesure-ink-soft)!important; }
.text-vesure-ink-mute{ color:var(--vesure-ink-mute)!important; }
.text-vesure-success{ color:var(--vesure-success)!important; }
.text-white{ color:#fff!important; }
.text-red-600{ color:#DC2626!important; }

.border-vesure-line{ border-color:var(--vesure-line)!important; }
.border-vesure-line\/60{ border-color:rgba(226,232,240,.6)!important; }
.border-white\/30{ border-color:rgba(255,255,255,.3)!important; }
.divide-vesure-line > * + *{ border-color:var(--vesure-line)!important; }

.hover-bg-primary-50:hover{ background-color:var(--vesure-primary-50)!important; }
.hover-bg-primary-dark:hover{ background-color:var(--vesure-primary-dark)!important; }
.hover-border-primary:hover{ border-color:var(--vesure-primary)!important; }
.hover-border-white:hover{ border-color:#fff!important; }
.hover-text-primary:hover{ color:var(--vesure-primary)!important; }
.hover-underline:hover{ text-decoration:underline!important; }
.hover-shadow-card:hover{ box-shadow:var(--shadow-card)!important; }
.hover-shadow-lift:hover{ box-shadow:var(--shadow-lift)!important; }

/* ---------- Hero gradient ---------- */
.bg-gradient-hero{
  background:linear-gradient(to bottom right, var(--vesure-primary-50), #fff, #fff);
}

/* ---------- Shadows ---------- */
.shadow-soft{ box-shadow:var(--shadow-soft)!important; }
.shadow-card{ box-shadow:var(--shadow-card)!important; }
.shadow-lift{ box-shadow:var(--shadow-lift)!important; }

/* ---------- Radius ---------- */
.rounded-xl{ border-radius:12px!important; }
.rounded-2xl{ border-radius:16px!important; }

/* ---------- Spacing additions not covered by Bootstrap's scale ---------- */
.gap-2-5{ gap:.625rem!important; }
.mt-0-5{ margin-top:.125rem!important; }
.mt-1-5{ margin-top:.375rem!important; }
.py-2-5{ padding-top:.625rem!important; padding-bottom:.625rem!important; }

/* ---------- Typography ---------- */
.tracking-tight{ letter-spacing:-0.02em; }
.tracking-wide{ letter-spacing:0.025em; }
.leading-relaxed{ line-height:1.65; }
.leading-tight-108{ line-height:1.08; }
.fw-extrabold{ font-weight:800; }

/* ---------- Aspect ratio boxes ---------- */
.aspect-16x7{ aspect-ratio:16/7; }
.aspect-16x5{ aspect-ratio:16/5; }
.aspect-4x5{ aspect-ratio:4/5; }
.aspect-2x1{ aspect-ratio:2/1; }
@media (min-width:992px){
  .lg-aspect-auto{ aspect-ratio:auto!important; }
}

/* ---------- Object fit helpers ---------- */
.object-fit-cover{ object-fit:cover; }
.object-position-top{ object-position:top; }

/* ---------- Fixed heights used on card images ---------- */
.h-card-img{ height:17.5rem; }      /* h-70 -> 280px */
.h-card-img-lg{ height:22.5rem; }   /* h-90 -> 360px */
.h-thumb-img{ height:8rem; }        /* h-32 -> 128px */

/* ---------- Misc component utilities ---------- */
.btn-vesure-primary{
  display:inline-flex; align-items:center; gap:.5rem;
  background-color:var(--vesure-primary); color:#fff;
  font-weight:600; padding:.75rem 1.5rem; border-radius:12px;
  box-shadow:var(--shadow-soft); border:none; transition:all .2s ease;
  text-decoration:none;
}
.btn-vesure-primary:hover{ background-color:var(--vesure-primary-dark); box-shadow:var(--shadow-lift); color:#fff; }

.btn-vesure-outline{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--vesure-line); color:var(--vesure-ink);
  font-weight:600; padding:.75rem 1.5rem; border-radius:12px;
  background:transparent; transition:all .2s ease; text-decoration:none;
}
.btn-vesure-outline:hover{ border-color:var(--vesure-primary); color:var(--vesure-primary); }

.btn-vesure-white{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; color:var(--vesure-primary);
  font-weight:600; padding:.75rem 1.5rem; border-radius:12px;
  border:none; transition:all .2s ease; text-decoration:none;
}
.btn-vesure-white:hover{ background-color:var(--vesure-primary-50); color:var(--vesure-primary); }

.btn-vesure-ghost-white{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,.3); color:#fff;
  font-weight:600; padding:.75rem 1.5rem; border-radius:12px;
  background:transparent; transition:all .2s ease; text-decoration:none;
}
.btn-vesure-ghost-white:hover{ border-color:#fff; color:#fff; }

/* ---------- Form controls (match original focus rings) ---------- */
.form-control-vesure,
.form-select-vesure{
  border:1px solid var(--vesure-line);
  border-radius:8px;
  font-size:.875rem;
  color:var(--vesure-ink);
  padding:.625rem .75rem;
  background-color:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control-vesure::placeholder{ color:var(--vesure-ink-mute); }
.form-control-vesure:focus,
.form-select-vesure:focus{
  border-color:var(--vesure-primary);
  box-shadow:0 0 0 3px rgba(83,74,183,.15);
  outline:none;
}

/* ---------- Card hover lift (services / cards with hover:shadow-card) ---------- */
.card-hover-lift{ transition:box-shadow .2s ease; }
.card-hover-lift:hover{ box-shadow:var(--shadow-card); }

/* ---------- Pricing / phase number circle ---------- */
.phase-number{
  width:2.5rem; height:2.5rem; border-radius:50%;
  background-color:var(--vesure-primary); color:#fff;
  font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* ---------- Icon badge boxes (used across services/why-choose/etc.) ---------- */
.icon-box-sm{ width:2.25rem; height:2.25rem; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.icon-box-md{ width:2.75rem; height:2.75rem; border-radius:12px; display:flex; align-items:center; justify-content:center; }

/* ---------- Responsive max-widths matching Tailwind container scale ---------- */
.container-7xl{ max-width:80rem; }
.container-5xl{ max-width:64rem; }
.container-4xl{ max-width:56rem; }
.container-3xl{ max-width:48rem; }
.container-2xl{ max-width:42rem; }
.container-xl{ max-width:36rem; }

/* ---------- Utility: section vertical padding matching py-16/py-20 ---------- */
.section-py{ padding-top:4rem; padding-bottom:4rem; }
@media (min-width:768px){
  .section-py{ padding-top:5rem; padding-bottom:5rem; }
}
.section-py-sm{ padding-top:3rem; padding-bottom:3rem; }
@media (min-width:768px){
  .section-py-sm{ padding-top:5rem; padding-bottom:5rem; }
}

/* ---------- Hero heading line-height/tracking ---------- */
.hero-h1{
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.08;
}
@media (min-width:768px){
  .hero-h1{ font-size:3.75rem!important; }
}

/* ---------- Section H2 heading (matches text-3xl -> md:text-4xl) ---------- */
.section-h2{
  font-size:1.875rem;
  font-weight:700;
  letter-spacing:-0.02em;
}
@media (min-width:768px){
  .section-h2{ font-size:2.25rem; }
}

/* ---------- Tech stack table ---------- */
.table-vesure thead{
  background-color:var(--vesure-surface);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.025em;
  color:var(--vesure-ink-mute);
}
.table-vesure td, .table-vesure th{
  padding:1rem 1.25rem;
  border-color:var(--vesure-line);
}
.table-vesure td:first-child{ font-weight:500; color:var(--vesure-ink); }
.table-vesure td:last-child{ color:var(--vesure-ink-soft); }

/* ---------- FAQ chevron rotate ---------- */
details[open] summary .chev{ transform:rotate(180deg); }