:root{
  --bg:#ffffff;
  --soft:#f5f8ff;
  --soft2:#eef4ff;
  --soft3:#f2f4f8;
  --text:#0b0b0b;
  --muted: rgba(11,11,11,.72);
  --border:#dfe6f3;

  --shadow: 0 18px 40px rgba(0,0,0,.08);
  --radius:18px;
  --max:1180px;

  --s0:0px; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s7:56px; --s8:64px;

  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-22:22px;

  --tap:44px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(var(--tap) + var(--s2));
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}
:focus{outline:none}
:focus-visible{
  outline: 3px solid #000;
  outline-offset: 3px;
  border-radius: 10px;
}

.container{max-width:var(--max); margin:0 auto; padding:0 var(--s2);}
.section{padding: var(--s7) 0;}
.soft{background:var(--soft);}
.grid{display:grid; gap:var(--s2);}
.row{display:flex; gap:var(--s1); flex-wrap:wrap; align-items:center;}
.mt-1{margin-top:var(--s1)} .mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)} .mt-4{margin-top:var(--s4)}

.kicker{
  font-size:var(--fs-12);
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:500;
}
.kicker:before{
  content:"";
  width:28px;height:2px;border-radius:999px;
  background:#000; opacity:.18;
  display:inline-block; flex:0 0 auto;
}

h1,h2,h3{margin:0; color:var(--text);}
h1{
  font-size: clamp(30px, 6vw, 54px);
  line-height:1.08;
  margin-top: var(--s1);
  font-weight:700;
  letter-spacing:-.02em;
}
h2{
  font-size: clamp(24px, 4.6vw, 38px);
  line-height:1.18;
  margin-top: var(--s1);
  font-weight:700;
  letter-spacing:-.01em;
}
h3{font-size:var(--fs-18); line-height:1.25; font-weight:700;}
p{margin:0;}
.lead{font-size:var(--fs-16); color:var(--muted); max-width:72ch;}
.small{font-size:var(--fs-13); color:var(--muted);}
.strong{font-weight:700; color:var(--text);}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius:14px;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, filter .18s ease, background-color .18s ease, color .18s ease;
  gap:10px; white-space:nowrap; user-select:none;
  font-weight:700; font-size:var(--fs-14);
  text-decoration:none; -webkit-tap-highlight-color: transparent;
  color:inherit;
}
.btn:active{transform: translateY(1px);}
.btn-black{background:#000; color:#fff;}
.btn-black:hover{filter:brightness(1.08);}
.btn-outline{background:#fff; border-color:#000; color:#000;}
.btn-outline:hover{background:#000; color:#fff;}
.btn-mini{padding:10px 12px; border-radius:12px; font-size:var(--fs-13); min-height: 40px;}

.panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--soft2);
  padding:var(--s2);
}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  padding:var(--s2);
  box-shadow: var(--shadow);
}
.lift{transition: transform .18s ease;}
.lift:hover{transform:translateY(-2px);}

.chips{display:flex; gap:var(--s1); flex-wrap:wrap;}
.chip{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight:700;
  font-size:var(--fs-13);
}

/* HERO */
.hero{
  padding: var(--s7) 0 var(--s4);
  background:
    radial-gradient(900px 360px at 15% 0%, var(--soft2), #fff 60%),
    linear-gradient(180deg, #fff 0%, var(--soft) 55%, #fff 100%);
  overflow:hidden;
}
.hero-wrap{display:grid; gap:var(--s2); align-items:start;}

/* Right outcome card (PDF style) */
.outcome{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  padding: var(--s2);
  display:grid;
  gap: var(--s2);
  box-shadow: var(--shadow);
}
.out-grid{display:grid; grid-template-columns: 1fr; gap: var(--s1);}
.out-item{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding: var(--s2);
  background: var(--soft);
}
.out-item .t{font-weight:900;}
.out-item .d{margin-top:6px; font-size:var(--fs-13); color:var(--muted);}

.mini-roadmap{
  border:1px dashed #bfcbe6;
  border-radius: var(--radius);
  background: var(--soft2);
  padding: var(--s2);
  display:grid;
  gap: var(--s1);
}
.mini-row{
  display:flex;
  gap: var(--s2);
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.mini-no{
  width:30px;height:30px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  display:grid;place-items:center;
  font-weight:900;
  background:var(--soft);
  flex:0 0 auto;
}
.mini-title{font-weight:900;}
.mini-desc{margin-top:2px; font-size:var(--fs-13); color:var(--muted);}

/* 3-up cards */
.triple{display:grid; gap:var(--s2); margin-top: var(--s2);}
.mini-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  padding: var(--s2);
}
.mini-card .h{font-weight:900;}
.mini-card .p{margin-top:6px; font-size:var(--fs-13); color:var(--muted);}

/* Buckets (service cards) */
.bucket-grid{display:grid; gap:var(--s2); margin-top: var(--s2);}
.bucket{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  padding: var(--s2);
  box-shadow: var(--shadow);
  display:grid;
  gap: var(--s1);
}
.bucket-top{
  display:flex;
  justify-content:space-between;
  gap: var(--s1);
  align-items:flex-start;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid #000;
  font-size:var(--fs-12);
  font-weight:900;
  background:#fff;
  white-space:nowrap;
}
.bucket ul{
  margin:0;
  padding-left:18px;
  color: var(--muted);
  font-size: var(--fs-13);
}
.bucket .actions{
  display:flex;
  gap: var(--s1);
  flex-wrap:wrap;
  margin-top: var(--s1);
}

/* Process boxes */
.process{display:grid; gap:var(--s2); margin-top: var(--s2);}
.step{
  display:flex;
  gap:var(--s2);
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--s2);
  background: var(--soft2);
}
.no{
  width:34px;height:34px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  display:grid;place-items:center;
  font-weight:900;
  flex:0 0 auto;
}

/* Form */
.field-grid{display:grid; gap:var(--s2); margin-top: var(--s2);}
label{display:block; font-weight:900; font-size:var(--fs-13);}
.input, select, textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.14);
  border-radius:14px;
  padding: 12px 12px;
  font: inherit;
  background:#fff;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{min-height:120px; resize:vertical;}
.input:focus, select:focus, textarea:focus{
  border-color:#000;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.hint{margin-top:8px; font-size:var(--fs-13); color:var(--muted);}
.field-span-2{grid-column: 1 / -1;}

/* FAQ */
.faq{margin-top: var(--s2);}
details{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:var(--s2);
}
details + details{margin-top:var(--s1);}
summary{cursor:pointer; font-weight:900;}
details p{margin-top:var(--s1);}
summary::-webkit-details-marker{display:none;}
summary:before{
  content:"+";
  display:inline-block;
  width:18px;
  margin-right:8px;
  font-weight:900;
}
details[open] summary:before{content:"–";}

/* CTA band */
.cta-band{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--soft);
  padding:var(--s2);
  display:grid;
  gap:var(--s2);
  overflow:hidden;
}
.cta-media{
  border:1px dashed #bfcbe6;
  border-radius:var(--radius);
  background:var(--soft2);
  padding:var(--s2);
  min-height:220px;
  display:grid;
  place-items:center;
  text-align:center;
}

/* Mobile sticky CTA */
.mobile-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  background:#fff;
  border-top:1px solid var(--border);
  padding:10px 12px;
  display:flex;
  gap:var(--s1);
  z-index:60;
}
.mobile-cta a{flex:1}

/* Responsive */
@media (min-width: 481px){
  .out-grid{grid-template-columns: 1fr 1fr;}
  .triple{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .field-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 601px){
  .section{padding: var(--s8) 0;}
  .hero-wrap{grid-template-columns: 1.1fr .9fr; align-items:stretch;}
  .bucket-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .process{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .cta-band{grid-template-columns: 1.1fr .9fr; align-items:stretch;}
}
@media (min-width: 993px){
  body{padding-bottom:0;}
  .mobile-cta{display:none;}
  .bucket-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .process{grid-template-columns: repeat(4, minmax(0, 1fr));}
}

/* =========================
   HEADER / NAV (premium)
========================= */
.dd-header{
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.dd-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s2);
  padding: 12px 0;
}

/* Logo */
.dd-logo{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.dd-logo img{
  height: 38px; /* rectangle logo height */
  width: auto;
  display:block;
}

/* Desktop menu */
.dd-menu{
  display:none;
  align-items:center;
  gap: 6px;
}
.dd-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--text);
  border: 1px solid transparent;
  transition: background-color .18s ease, transform .12s ease, border-color .18s ease;
}
.dd-link:hover{
  background: var(--soft);
  border-color: rgba(0,0,0,.06);
}
.dd-link:active{ transform: translateY(1px); }
.dd-link.is-active{
  background: var(--soft2);
  border-color: rgba(0,0,0,.10);
}

/* Dropdown */
.dd-dropdown{ position:relative; }
.dd-dropbtn{ cursor:pointer; background:transparent; }
.dd-caret{
  width: 10px;
  height: 10px;
  display:inline-block;
  border-right: 2px solid rgba(0,0,0,.7);
  border-bottom: 2px solid rgba(0,0,0,.7);
  transform: rotate(45deg);
  margin-left: 2px;
  transition: transform .18s ease;
}
.dd-dropdown.is-open .dd-caret{ transform: rotate(-135deg); }

.dd-drop{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.dd-dropdown.is-open .dd-drop{
  opacity: 1;
  transform: translateY(0);
  pointer-events:auto;
}

.dd-drop a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--text);
  border: 1px solid transparent;
}
.dd-drop a:hover{
  background: var(--soft);
  border-color: rgba(0,0,0,.06);
}
.dd-sep{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 8px 6px;
}

/* Right CTA + burger */
.dd-cta{
  display:flex;
  align-items:center;
  gap: var(--s1);
}
.dd-burger{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 5px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.dd-burger span{
  display:block;
  width: 18px;
  height: 2px;
  background:#000;
  border-radius: 999px;
}
.dd-burger:active{ transform: translateY(1px); }

/* Mobile panel */
.dd-mobile{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding: 12px;
  margin: 0 0 12px;
  overflow:hidden;
  animation: ddSlide .18s ease;
}
@keyframes ddSlide{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}
.dd-m-link{
  display:flex;
  padding: 12px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  color: var(--text);
  border:1px solid transparent;
}
.dd-m-link:hover{ background: var(--soft); border-color: rgba(0,0,0,.06); }

.dd-m-details{
  border:1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 8px;
  margin: 8px 0;
  background: var(--soft2);
}
.dd-m-sum{
  cursor:pointer;
  font-weight: 900;
  padding: 10px 10px;
  border-radius: 12px;
  list-style:none;
}
.dd-m-details summary::-webkit-details-marker{ display:none; }
.dd-m-sub{
  display:grid;
  gap: 6px;
  padding: 8px;
}
.dd-m-sub a{
  display:flex;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 700;
  color: var(--text);
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
}
.dd-m-sub a:hover{ background: var(--soft); }

.dd-m-cta{ padding: 10px 0 4px; }

/* Desktop breakpoint */
@media (min-width: 993px){
  .dd-menu{ display:flex; }
  .dd-burger{ display:none; }
  .dd-mobile{ display:none !important; }
}

/* =========================
   HEADER / NAV (premium)
========================= */
.dd-header{
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.dd-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s2);
  padding: 12px 0;
}
.dd-logo{display:flex; align-items:center; text-decoration:none;}
.dd-logo img{height:38px; width:auto; display:block;}

.dd-menu{display:none; align-items:center; gap:6px;}
.dd-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px;
  text-decoration:none; font-weight:700; font-size:var(--fs-14);
  color:var(--text);
  border:1px solid transparent;
  transition: background-color .18s ease, transform .12s ease, border-color .18s ease;
}
.dd-link:hover{background:var(--soft); border-color:rgba(0,0,0,.06);}
.dd-link:active{transform:translateY(1px);}
.dd-link.is-active{background:var(--soft2); border-color:rgba(0,0,0,.10);}

.dd-dropdown{position:relative;}
.dd-dropbtn{cursor:pointer; background:transparent;}
.dd-caret{
  width:10px;height:10px; display:inline-block;
  border-right:2px solid rgba(0,0,0,.7);
  border-bottom:2px solid rgba(0,0,0,.7);
  transform:rotate(45deg);
  transition: transform .18s ease;
}
.dd-dropdown.is-open .dd-caret{transform:rotate(-135deg);}

.dd-drop{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:320px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.dd-dropdown.is-open .dd-drop{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.dd-drop a{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  font-size:var(--fs-14);
  color:var(--text);
  border:1px solid transparent;
}
.dd-drop a:hover{background:var(--soft); border-color:rgba(0,0,0,.06);}
.dd-sep{height:1px; background:rgba(0,0,0,.08); margin:8px 6px;}

.dd-cta{display:flex; align-items:center; gap:var(--s1);}
.dd-burger{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.dd-burger span{width:18px;height:2px;background:#000;border-radius:999px;display:block;}

.dd-mobile{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  padding:12px;
  margin:0 0 12px;
  animation: ddSlide .18s ease;
}
@keyframes ddSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.dd-m-link{
  display:flex;
  padding:12px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  color:var(--text);
  border:1px solid transparent;
}
.dd-m-link:hover{background:var(--soft); border-color:rgba(0,0,0,.06);}
.dd-m-details{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:8px;
  margin:8px 0;
  background:var(--soft2);
}
.dd-m-sum{cursor:pointer; font-weight:900; padding:10px 10px; border-radius:12px; list-style:none;}
.dd-m-details summary::-webkit-details-marker{display:none;}
.dd-m-sub{display:grid; gap:6px; padding:8px;}
.dd-m-sub a{
  display:flex;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  color:var(--text);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.dd-m-sub a:hover{background:var(--soft);}
.dd-m-cta{padding:10px 0 4px;}

@media (min-width: 993px){
  .dd-menu{display:flex;}
  .dd-burger{display:none;}
  .dd-mobile{display:none !important;}
}

/* =========================
   FOOTER
========================= */
.dd-footer{
  border-top:1px solid var(--border);
  background: var(--soft);
  padding: var(--s7) 0 var(--s4);
}
.dd-footer-grid{
  display:grid;
  gap: var(--s3);
}
.dd-footer-block{min-width: 0;}
.dd-footer-links{display:grid; gap:10px;}
.dd-footer-links a{
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  font-size: var(--fs-14);
  width: fit-content;
}
.dd-footer-links a:hover{ text-decoration: underline; }
.dd-footer-bottom{
  margin-top: var(--s4);
  padding-top: var(--s2);
  border-top: 1px solid rgba(0,0,0,.08);
}
@media (min-width: 601px){
  .dd-footer-grid{grid-template-columns: 1.2fr 1fr 1fr 1fr;}
}