:root{
  --bg: #ffffff;
  --bg2:#f6f8fb;
  --text:#0b1220;
  --muted:#5b677a;
  --line:#e6eaf0;
  --brand:#0d4b7a;
  --brand2:#0a3c63;
  --shadow: 0 10px 30px rgba(11, 18, 32, .08);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%; height:auto; display:block}

.container{width:min(1100px, 92vw); margin-inline:auto}

.skip{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  background:#fff; padding:.6rem 1rem; border:1px solid var(--line); border-radius:999px; z-index:999;
}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}
.brand{display:flex; align-items:center; gap:.65rem}
.brand__logo{width:34px; height:34px; object-fit:contain}
.brand__name{font-weight:800; letter-spacing:.2px}

.nav{
  display:flex; gap:1rem; align-items:center;
}
.nav a{
  padding:.45rem .65rem;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
}
.nav a:hover{background:var(--bg2); color:var(--text)}

.navToggle{
  display:none;
  background:transparent;
  border:1px solid var(--line);
  border-radius:12px;
  padding:.55rem .6rem;
  cursor:pointer;
}
.navToggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  margin:4px 0;
  border-radius:2px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 1.1rem;
  border-radius:999px;
  border:1px solid transparent;
  background:linear-gradient(180deg, var(--brand), var(--brand2));
  color:#fff;
  font-weight:800;
  box-shadow: 0 8px 18px rgba(13, 75, 122, .25);
  cursor:pointer;
}
.btn--ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--text);
  box-shadow:none;
}
.btn--small{padding:.6rem .85rem; font-weight:800}

.hero{
  padding: 3.2rem 0 2.2rem;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:2rem;
  align-items:stretch;
}
.kicker{
  margin:0 0 .65rem 0;
  font-weight:800;
  color:var(--brand);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
}
h1{
  margin:.2rem 0 .8rem;
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
.lead{
  color:var(--muted);
  font-size:1.05rem;
  margin:0 0 1.1rem;
}
.hero__cta{display:flex; gap:.75rem; flex-wrap:wrap}

.trust{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:.8rem;
}
.trust__item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:.8rem .85rem;
  background:#fff;
}
.trust__label{display:block; color:var(--muted); font-size:.85rem; font-weight:700}
.trust__value{display:block; font-weight:800; margin-top:.1rem}

.hero__card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding:1.1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.badge{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffff, #f7f9fc);
}
.badge__icon{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;

  border-radius:16px;
  border:1px solid var(--line);
  color:var(--brand);
  font-weight:900;

  padding:4px;
  box-sizing:border-box;
  line-height:1;
}
.badge__icon span{
  display:inline-block;
  line-height:1;
}
.badge__icon .chev{font-size:1.4rem}
.badge__icon .slash{
  position:relative;
  top: 2px;
  margin:0 2px;
}
.badge__title{font-weight:1000; font-size:1.1rem}
.badge__sub{color:var(--muted); font-weight:700; font-size:.95rem}

.mini{
  border:1px solid var(--line);
  border-radius:16px;
  padding:.85rem 1rem;
  background:#0b1220;
  color:#dbe6ff;
}
.mini__row{display:flex; align-items:center; gap:.35rem}
.dot{
  width:10px; height:10px; border-radius:999px;
  background:#2b3752;
  display:inline-block;
}
.mini__label{margin-left:.5rem; color:#9fb2d6; font-weight:800; font-size:.85rem}
.mini__code{
  margin:.6rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.9rem;
  white-space:pre;
  overflow:auto;
}

.section{
  padding: 3rem 0;
}
.section--alt{
  background:var(--bg2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.4rem;
}
.section__head h2{
  margin:0;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing:-.02em;
}
.section__head p{margin:0; color:var(--muted); font-weight:700}

.cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1rem;
}
.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:1.1rem;
}
.card h3{margin:.2rem 0 .35rem; font-size:1.1rem}
.card p{margin:0 0 .8rem; color:var(--muted); font-weight:650}
.card ul{margin:0; padding-left:1.1rem; color:#2a3750}
.card li{margin:.35rem 0}

/* Slider shell */
.work-slider{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.work-track{
  display:flex;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

/* Each card */
.work{
  flex:0 0 100%;
  display:grid;
  grid-template-columns: .45fr .55fr;
  gap:1.2rem;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  padding:1.25rem;
  box-sizing:border-box;
}
.work__logo{
  border:1px dashed var(--line);
  border-radius:16px;
  padding:1rem;
  background:linear-gradient(180deg,#ffffff,#f7f9fc);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100px;
}
.work__logo img{max-height:70px; margin:auto; object-fit:contain}
.work__wordmark{
  font-size:2rem;
  font-weight:900;
  color:#2a3750;
  letter-spacing:-.03em;
}
.work__wordmark--dapa{
  color:#006652;
  font-size:2.4rem;
  letter-spacing:.06em;
}
.lead2{color:var(--muted); font-weight:650; margin:.5rem 0 1rem}
.pillRow{display:flex; flex-wrap:wrap; gap:.5rem; margin:.7rem 0 1.1rem}
.pill{
  border:1px solid var(--line);
  background:#fff;
  padding:.45rem .7rem;
  border-radius:999px;
  font-weight:800;
  color:#2a3750;
  font-size:.9rem;
}
.work__cta{display:flex; gap:.75rem; flex-wrap:wrap}

/* Controls row: arrow — dots — arrow */
.work-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:1.25rem;
}
.work-slider__arrow{
  background:#fff;
  border:1px solid var(--line);
  border-radius:50%;
  width:2.75rem;
  height:2.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.15rem;
  color:#2a3750;
  box-shadow:var(--shadow);
  transition:background .15s, color .15s, box-shadow .15s;
  flex-shrink:0;
}
.work-slider__arrow:hover{
  background:#2a3750;
  color:#fff;
  box-shadow:0 4px 14px rgba(42,55,80,.18);
}

/* Dots */
.work-dots{
  display:flex;
  align-items:center;
  gap:.55rem;
}
.work-dot{
  width:.65rem;
  height:.65rem;
  border-radius:50%;
  border:none;
  background:var(--line);
  cursor:pointer;
  padding:0;
  transition:background .2s, transform .2s;
}
.work-dot.active{
  background:#2a3750;
  transform:scale(1.35);
}
.muted{color:var(--muted)}
.small{font-size:.92rem}

.why{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1rem;
}
.why__item{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:1.1rem;
}
.why__item h3{margin:.2rem 0 .35rem}
.why__item p{margin:0; color:var(--muted); font-weight:650}

.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.2rem;
  align-items:start;
}
.contact__meta{display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; margin-top:1.2rem}
.metaCard{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:1rem;
}
.metaCard__label{color:var(--muted); font-weight:800; font-size:.85rem}
.metaCard__value{font-weight:1000; margin-top:.15rem; display:block}

.form{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:1.1rem;
  display:grid;
  gap:.8rem;
}
label{display:grid; gap:.35rem; font-weight:800}
input, textarea{
  padding:.85rem .9rem;
  border:1px solid var(--line);
  border-radius:14px;
  font:inherit;
}
input:focus, textarea:focus{
  outline: 3px solid rgba(13, 75, 122, .18);
  border-color: rgba(13, 75, 122, .45);
}

.footer{
  padding:1.4rem 0;
}
.footer__inner{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  border-top:1px solid var(--line);
  padding-top:1.2rem;
  color:var(--muted);
  font-weight:750;
}
.footer__left{display:flex; align-items:center; gap:.6rem}
.footer__logo{width:22px; height:22px; object-fit:contain}
.footer__right{display:flex; gap:1rem}
.footer__right a{padding:.25rem .4rem; border-radius:10px}
.footer__right a:hover{background:var(--bg2)}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:#0b1220;
  color:#dbe6ff;
  border:1px solid rgba(255,255,255,.12);
  padding:.8rem 1rem;
  border-radius:999px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  max-width:min(720px, 92vw);
  text-align:center;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; }
  .cards{grid-template-columns: repeat(2, 1fr)}
  .work{grid-template-columns: 1fr}
  .work__logo{min-height:80px}
  .contact{grid-template-columns: 1fr}
  .trust{grid-template-columns: 1fr}
  .section__head{flex-direction:column; align-items:flex-start}
}
@media (max-width: 640px){
  .nav{display:none}
  .nav.open{
    display:flex;
    position:absolute;
    right:4vw;
    top:64px;
    flex-direction:column;
    padding:.7rem;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow: var(--shadow);
    min-width: 200px;
  }
  .navToggle{display:block}
  .cards{grid-template-columns: 1fr}
}


/* Contact card */
.contactCard{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:1.1rem;
}
.pill--link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}