:root{
  --dp-orange:#ff7a00;
  --dp-orange-2:#ff9a3d;
  --dp-ink:#0b1220;
}
.dp-front-body{
  background: #cecece;
  color: var(--dp-ink);
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  margin:0;
}

.dp-front-main{ flex: 1 0 auto; }
.dp-front-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px;
}
.dp-front-header{
  padding: 18px 0;
}
.dp-front-header .dp-front-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.dp-front-brand{
  font-weight:800;
  letter-spacing:.4px;
  text-decoration:none;
  color:var(--dp-ink);
  display:flex;
  align-items:center;
  gap:10px;
}
.dp-front-nav{
  display:flex;
  gap:18px;
  align-items:center;
}
.dp-front-navlink{
  text-decoration:none;
  color:#374151;
  font-size:14px;
  padding:8px 10px;
  border-radius:12px;
}
.dp-front-navlink:hover{
  background: rgba(17,24,39,.04);
  color:#111827;
}
.dp-front-main{
  padding: 22px 0 60px;
}
.dp-front-hero{
  padding: 14px 0 10px;
}
.dp-front-hero-inner{
  background:#ffffff;
  border-radius: 18px;
  border: 1px solid #eef2f7;
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 520px;
}
.dp-front-hero-left{
  padding: 46px 46px 34px;
}
.dp-front-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(255,122,0,.10);
  color:#9a4a00;
  border:1px solid rgba(255,122,0,.18);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
}
.dp-front-title{
  margin: 18px 0 10px;
  font-weight: 900;
  font-size: 48px;
  line-height: 1.05;
}
.dp-front-title span{
  background: linear-gradient(90deg, var(--dp-orange), var(--dp-orange-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.dp-front-sub{
  max-width: 520px;
  color:#6b7280;
  font-size: 15px;
  line-height: 1.6;
  margin: 10px 0 22px;
}
.dp-front-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn-orange{
  background: linear-gradient(180deg, var(--dp-orange), #ff6a00);
  border: 0;
  color:#111827;
  font-weight:800;
}
.btn-orange:hover{
  filter: brightness(.98);
  color:#111827;
}
.dp-front-metrics{
  margin-top: 26px;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.dp-front-metric{
  border-top: 1px solid #eef2f7;
  padding-top: 14px;
  min-width: 160px;
}
.dp-front-metric-k{
  font-weight:800;
}
.dp-front-metric-v{
  color:#6b7280;
  font-size:13px;
}
.dp-front-hero-right{
  position:relative;
  background: linear-gradient(135deg, rgba(255,122,0,.20), rgba(99,102,241,.12));
}
.dp-front-illustration{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dp-front-blob{
  position:absolute;
  border-radius: 999px;
  filter: blur(0px);
  opacity: .9;
}
.dp-front-blob-a{
  width: 420px;
  height: 420px;
  background: rgba(99,102,241,.24);
  left: 10%;
  top: 12%;
}
.dp-front-blob-b{
  width: 380px;
  height: 380px;
  background: rgba(255,122,0,.26);
  right: -8%;
  bottom: -10%;
}
.dp-front-phone{
  width: 280px;
  height: 410px;
  background:#ffffff;
  border-radius: 22px;
  border: 1px solid rgba(17,24,39,.08);
  position:relative;
  box-shadow: 0 25px 60px rgba(17,24,39,.10);
}
.dp-front-phone-head{
  height: 46px;
  border-bottom: 1px solid #eef2f7;
  border-radius: 22px 22px 0 0;
  background: #fafafa;
}
.dp-front-phone-body{ padding: 16px; }
.dp-front-phone-line{
  height: 10px;
  background:#eef2f7;
  border-radius: 999px;
  margin-bottom: 12px;
}
.dp-front-phone-line.w-80{ width: 80%; }
.dp-front-phone-line.w-60{ width: 60%; }
.dp-front-phone-chip{
  height: 46px;
  border-radius: 16px;
  background: rgba(255,122,0,.10);
  border:1px solid rgba(255,122,0,.16);
  margin: 14px 0;
}
.dp-front-card{
  position:absolute;
  width: 200px;
  background:#fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 50px rgba(17,24,39,.10);
}
.dp-front-card-k{ color:#6b7280; font-size:12px; }
.dp-front-card-v{ font-weight:800; margin-top:2px; }
.dp-front-minirow{ display:flex; gap:8px; align-items:center; margin-top:10px; color:#6b7280; font-size:12px; }
.dp-front-dot{ width:8px; height:8px; border-radius:999px; background: var(--dp-orange); display:inline-block; }
.dp-front-card-top{ left: 10%; top: 12%; }
.dp-front-card-mid{ right: 6%; top: 38%; }
.dp-front-card-bot{ left: 16%; bottom: 10%; }

.dp-front-footer{
  padding: 14px 0 18px;
  margin-top: auto;
  border-top: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
}
.dp-front-footlink{
  color:#111827;
  text-decoration:none;
}
.dp-front-footlink:hover{
  text-decoration:underline;
}

/* Footer copyright bar */
.dp-front-copybar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.9rem;color:rgba(11,18,32,.72)}
.dp-front-copybar .dp-copy-left{flex:1;min-width:260px}
.dp-front-copybar .dp-copy-right{flex:1;min-width:260px;display:flex;justify-content:flex-end;align-items:center;gap:6px}
.dp-front-footer .dp-pay-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(17,24,39,.10);background:rgba(255,255,255,.8);color:rgba(11,18,32,.92);font-size:.78rem;line-height:1;white-space:nowrap}
.dp-front-footer .dp-pay-badge i{opacity:.9}
.dp-front-footer .dp-heart{color:var(--dp-orange)}

@media (max-width: 992px){
  .dp-front-hero-inner{ grid-template-columns: 1fr; }
  .dp-front-hero-right{ min-height: 420px; }
  .dp-front-title{ font-size: 40px; }
  .dp-front-nav{ display:none; }
}


/* Auth pages */
.dp-auth-wrap{ padding: 18px 0 60px; }
.dp-auth-card{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius: 18px;
  overflow:hidden;
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  min-height: 520px;
}
.dp-auth-left{
  background: linear-gradient(135deg, rgba(255,122,0,.18), rgba(99,102,241,.12));
  padding: 38px;
  position:relative;
}
.dp-auth-brand{ display:flex; gap:12px; align-items:center; }
.dp-auth-logo{
  width:46px;height:46px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(17,24,39,.06);
}
.dp-auth-name{ font-weight:900; letter-spacing:.4px; }
.dp-auth-tag{ font-size:12px; color:#6b7280; margin-top:2px; }
.dp-auth-quote{ margin-top: 34px; }
.dp-auth-qtitle{ font-weight:900; font-size:28px; }
.dp-auth-qsub{ color:#6b7280; margin-top:6px; max-width: 320px; }
.dp-auth-bullets{ margin-top: 26px; display:grid; gap:10px; color:#374151; font-size:13px; }
.dp-auth-bullets i{ color:#16a34a; }
.dp-auth-right{ padding: 44px; }
@media (max-width: 992px){
  .dp-auth-card{ grid-template-columns: 1fr; }
  .dp-auth-left{ display:none; }
  .dp-auth-right{ padding: 26px; }
}


/* Sections + blocks (Nameshift-like) */
.dp-front-section{ padding: 44px 0; }
.dp-front-section-alt{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,24,39,.06);
  border-radius: 18px;
  padding: 44px 0;
}
.dp-front-section-head{ margin-bottom: 18px; }
.dp-front-h2{ font-weight: 900; letter-spacing: -.2px; margin: 0 0 6px; }
.dp-front-p{ color:#6b7280; margin:0; max-width: 720px; }

.dp-front-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.dp-front-block{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius: 16px;
  padding: 16px 16px 14px;
}
.dp-front-block:hover{
  background:#fcfcfd;
}
.dp-front-block-ic{
  width:44px;height:44px;border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,122,0,.10);
  border:1px solid rgba(255,122,0,.18);
  color:#9a4a00;
}
.dp-front-block-title{ font-weight: 900; margin-top: 10px; }
.dp-front-block-desc{ color:#6b7280; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.dp-front-block-meta{ color:#9ca3af; font-size: 12px; margin-top: 10px; }

.dp-front-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.dp-front-step{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius: 16px;
  padding: 16px 16px 14px;
}
.dp-front-step-nr{
  width:34px;height:34px;border-radius: 12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background: rgba(17,24,39,.06);
}
.dp-front-step-title{ font-weight: 900; margin-top: 10px; }
.dp-front-step-desc{ color:#6b7280; font-size: 13px; line-height:1.5; margin-top: 6px; }

.dp-front-cta{
  margin-top: 20px;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.dp-front-cta-title{ font-weight: 900; }
.dp-front-cta-sub{ color:#6b7280; font-size: 13px; margin-top: 2px; }
.dp-front-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width: 992px){
  .dp-front-grid{ grid-template-columns: 1fr; }
  .dp-front-steps{ grid-template-columns: 1fr; }
  .dp-front-cta{ flex-direction: column; align-items: flex-start; }
}


/* Auth overlay (full screen) */
.dp-auth-overlay{
  min-height: calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px 0 60px;
}
.dp-auth-shell{
  width: 100%;
  max-width: 1040px;
  padding: 0 18px;
}
.dp-auth-backdrop{
  position: relative;
}
.dp-auth-backdrop:before{
  content:"";
  position:absolute;
  inset:-24px;
  border-radius: 26px;
  background: radial-gradient(900px 520px at 18% 20%, rgba(255,122,0,.18), transparent 55%),
              radial-gradient(800px 480px at 78% 20%, rgba(99,102,241,.16), transparent 60%),
              rgba(255,255,255,.55);
  border: 1px solid rgba(17,24,39,.06);
  backdrop-filter: blur(6px);
}
.dp-auth-backdrop > *{ position: relative; }

.dp-auth-card{
  box-shadow: 0 30px 80px rgba(17,24,39,.14);
}

@media (max-width: 992px){
  .dp-auth-overlay{ min-height: auto; }
  .dp-auth-card{ box-shadow: 0 18px 50px rgba(17,24,39,.12); }
}



/* Wide segmented tabs (full-width)
   Usage: <ul class="nav nav-tabs dp-tabs dp-tabs-wide"> ...
          <ul class="nav nav-pills dp-tabs dp-tabs-wide"> ... */
.dp-tabs.dp-tabs-wide,
.dp-tabs-wide{
  border: 1px solid rgba(11,18,32,.12) !important;
  border-bottom: 1px solid rgba(11,18,32,.12) !important;
  background: rgba(255,255,255,.85);
  border-radius: 8px;
  padding: 6px;
  gap: 6px;
  width: 100%;
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 10px 24px rgba(17,24,39,.06);
}
.dp-tabs-wide.nav-tabs{ border-bottom: 0 !important; }
.dp-tabs-wide .nav-item{
  flex: 1 1 180px;
}
.dp-tabs-wide .nav-link{
  width: 100%;
  border: 0 !important;
  border-radius: 8px !important;
  padding: .65rem .9rem;
  font-weight: 700;
  text-align: center;
  justify-content: center;
  display:flex;
  align-items:center;
  gap: .45rem;
  color: #111827 !important;
  background: transparent !important;
  white-space: nowrap;
}
.dp-tabs-wide .nav-link:hover{
  background: rgba(0,0,0,.04) !important;
}
.dp-tabs-wide .nav-link.active{
  background: rgba(255,122,0,.14) !important;
  box-shadow: 0 8px 18px rgba(255,122,0,.12);
  border: 1px solid rgba(255,122,0,.22) !important;
}
.dp-tabs-wide .nav-link.active,
.dp-tabs-wide .nav-link.active i{ color:#111827 !important; }

/* Make segmented tabs play nice inside flex toolbars */
.dp-tabs-wide{ flex: 1 1 auto; }



/* Force containers to 1400px */
@media (min-width: 1400px){
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl{
    max-width: 1400px !important;
  }
}


/* DOMEINBASE radius standard: 8px everywhere */
:root{
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-xl: 8px;
  --bs-border-radius-xxl: 8px;
  --bs-border-radius-pill: 8px;
}
.rounded,
.rounded-0,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-5,
.card,
.btn,
.dropdown-menu,
.form-control,
.form-select,
.input-group-text,
.alert,
.modal-content,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.dp-card,
.dp-tile,
.dp-metric-tile{
  border-radius: 8px !important;
}

/* dp-tabs-wide-radius-8 */
.dp-tabs.dp-tabs-wide,
.dp-tabs-wide{ border-radius: 8px !important; }
.dp-tabs-wide .nav-link{ border-radius: 8px !important; }