:root{
    --hdt-primary:#0f2747;
    --hdt-secondary:#173b6d;
    --hdt-accent:#d4a017;
    --hdt-text:#1f2937;
    --hdt-muted:#6b7280;
    --hdt-bg:#f8fafc;
    --hdt-white:#ffffff;
    --hdt-border:#e5e7eb;
    --hdt-dark:#0b1220;
    --hdt-radius:18px;
    --hdt-shadow:0 14px 35px rgba(15, 39, 71, 0.08);
}

/* --------------------------------------------------
   GLOBAL
-------------------------------------------------- */
html{
    scroll-behavior:smooth;
}

body{
    font-family:"Segoe UI", Roboto, Arial, sans-serif;
    color:var(--hdt-text);
    background:var(--hdt-white);
    line-height:1.65;
}

a{
    text-decoration:none;
}

/* --------------------------------------------------
   BUTTONS
-------------------------------------------------- */
.btn-hdt-primary{
    background:var(--hdt-primary);
    color:#fff;
    border:1px solid var(--hdt-primary);
    border-radius:10px;
    padding:0.75rem 1.2rem;
    font-weight:600;
}

.btn-hdt-primary:hover{
    background:var(--hdt-secondary);
    border-color:var(--hdt-secondary);
    color:#fff;
}

.btn-hdt-outline{
    background:transparent;
    color:var(--hdt-primary);
    border:1px solid var(--hdt-primary);
    border-radius:10px;
    padding:0.75rem 1.2rem;
    font-weight:600;
}

.btn-hdt-outline:hover{
    background:var(--hdt-primary);
    color:#fff;
}

/* --------------------------------------------------
   TOPBAR
-------------------------------------------------- */
.topbar{
    background:var(--hdt-dark);
    color:rgba(255,255,255,0.85);
    font-size:0.92rem;
}

.topbar a{
    color:rgba(255,255,255,0.9);
}

/* --------------------------------------------------
   NAVBAR
-------------------------------------------------- */
.navbar{
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(10px);
    box-shadow:0 2px 18px rgba(0,0,0,0.04);
}

.navbar-brand{
    font-weight:700;
    color:var(--hdt-primary) !important;
    letter-spacing:0.2px;
}

.navbar-brand small{
    display:block;
    font-size:0.72rem;
    font-weight:500;
    color:var(--hdt-muted);
    letter-spacing:0.4px;
}

.nav-link{
    color:var(--hdt-text) !important;
    font-weight:500;
    padding-left:0.9rem !important;
    padding-right:0.9rem !important;
}

.nav-link:hover,
.nav-link.active{
    color:var(--hdt-primary) !important;
}

.navbar-toggler{
    border:0;
    box-shadow:none !important;
    padding:0.35rem 0.5rem;
}

/* --------------------------------------------------
   OFFCANVAS MOBILE MENU
-------------------------------------------------- */
.offcanvas.offcanvas-end{
    width:300px;
    border-left:1px solid var(--hdt-border);
    background:#ffffff;
}

.offcanvas-header{
    padding:1rem 1.25rem;
    border-bottom:1px solid var(--hdt-border);
}

.offcanvas-title{
    color:var(--hdt-primary);
    font-weight:700;
}

.offcanvas-body{
    padding:1rem 1.25rem 1.5rem;
}

.offcanvas .nav-link{
    padding:0.8rem 0.25rem !important;
    font-weight:600;
    color:var(--hdt-text) !important;
    border-bottom:1px solid #f1f5f9;
}

.offcanvas .nav-link.active,
.offcanvas .nav-link:hover{
    color:var(--hdt-primary) !important;
}

/* --------------------------------------------------
   COMMON SECTIONS
-------------------------------------------------- */
.page-hero-mini{
    background:linear-gradient(135deg, #f8fafc 0%, #eef4fb 100%);
    padding:70px 0 50px;
    border-bottom:1px solid var(--hdt-border);
}

.section-pad{
    padding:72px 0;
}

.section-title{
    font-size:2rem;
    font-weight:700;
    color:var(--hdt-primary);
    margin-bottom:0.75rem;
}

.section-subtitle{
    color:var(--hdt-muted);
    max-width:760px;
}

.section-kicker{
    display:inline-block;
    font-size:0.88rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--hdt-accent);
    margin-bottom:0.8rem;
}

.card-hdt{
    border:1px solid var(--hdt-border);
    border-radius:var(--hdt-radius);
    box-shadow:var(--hdt-shadow);
    background:var(--hdt-white);
}

/* --------------------------------------------------
   FLASH / STICKY CTA
-------------------------------------------------- */
.flash-wrap{
    position:relative;
    z-index:10;
}

.sticky-cta{
    position:fixed;
    right:18px;
    bottom:40px;
    z-index:1050;
}

.sticky-cta .btn{
    border-radius:999px;
    box-shadow:0 10px 25px rgba(15, 39, 71, 0.25);
    padding:0.85rem 1.15rem;
    font-weight:600;
}

/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */
.footer-main{
    background:var(--hdt-dark);
    color:rgba(255,255,255,0.82);
}

.footer-main h5,
.footer-main h6{
    color:#fff;
    font-weight:700;
}

.footer-main a{
    color:rgba(255,255,255,0.82);
}

.footer-main a:hover{
    color:#fff;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.10);
    color:rgba(255,255,255,0.65);
}

.footer-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    background:rgba(255,255,255,0.04);
    color:rgba(255,255,255,0.9);
    font-size:0.92rem;
}

/* --------------------------------------------------
   HOME PAGE
-------------------------------------------------- */
.home-hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top right, rgba(212,160,23,0.14), transparent 22%),
        radial-gradient(circle at left center, rgba(23,59,109,0.10), transparent 28%),
        linear-gradient(135deg, #f8fbff 0%, #eef4fb 55%, #f9fafb 100%);
    padding:92px 0 84px;
    border-bottom:1px solid var(--hdt-border);
}

.home-hero::before{
    content:"";
    position:absolute;
    top:-80px;
    right:-80px;
    width:280px;
    height:280px;
    background:rgba(15,39,71,0.05);
    border-radius:50%;
    filter:blur(20px);
}

.home-hero::after{
    content:"";
    position:absolute;
    bottom:-90px;
    left:-90px;
    width:260px;
    height:260px;
    background:rgba(212,160,23,0.08);
    border-radius:50%;
    filter:blur(20px);
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--hdt-border);
    color:var(--hdt-primary);
    font-weight:600;
    box-shadow:0 10px 28px rgba(15,39,71,0.07);
    margin-bottom:1.25rem;
}

.hero-title{
    font-size:clamp(2.2rem, 4vw, 4rem);
    line-height:1.12;
    font-weight:800;
    color:var(--hdt-primary);
    letter-spacing:-0.02em;
    margin-bottom:1.15rem;
}

.hero-text{
    font-size:1.08rem;
    color:var(--hdt-muted);
    max-width:640px;
    margin-bottom:1.8rem;
}

.hero-points{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px 18px;
    margin:1.5rem 0 2rem;
    padding:0;
    list-style:none;
}

.hero-points li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--hdt-text);
    font-weight:500;
}

.hero-points i{
    color:var(--hdt-accent);
    font-size:1rem;
    margin-top:2px;
}

.hero-card{
    position:relative;
    background:#fff;
    border:1px solid rgba(15,39,71,0.08);
    border-radius:24px;
    box-shadow:0 22px 50px rgba(15,39,71,0.10);
    padding:1.5rem;
}

.hero-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1rem;
}

.hero-card-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--hdt-accent);
    display:inline-block;
    margin-right:6px;
}

.hero-ui-panel{
    border:1px solid var(--hdt-border);
    border-radius:18px;
    padding:1rem;
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    margin-bottom:1rem;
}

.hero-stat-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
}

.hero-stat{
    border:1px solid var(--hdt-border);
    border-radius:16px;
    padding:1rem;
    background:#fff;
}

.hero-stat h4{
    margin:0;
    font-size:1.35rem;
    color:var(--hdt-primary);
    font-weight:800;
}

.hero-stat p{
    margin:0.3rem 0 0;
    color:var(--hdt-muted);
    font-size:0.94rem;
}

.trust-strip{
    background:var(--hdt-dark);
    color:rgba(255,255,255,0.88);
    padding:18px 0;
}

.trust-label{
    font-weight:600;
    color:rgba(255,255,255,0.72);
    white-space:nowrap;
}

.trust-items{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.trust-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    background:rgba(255,255,255,0.05);
    color:#fff;
    font-weight:500;
}

.solution-card,
.why-card,
.case-card,
.insight-card,
.stack-card{
    height:100%;
    border:1px solid var(--hdt-border);
    border-radius:22px;
    background:#fff;
    box-shadow:var(--hdt-shadow);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.solution-card:hover,
.why-card:hover,
.case-card:hover,
.insight-card:hover,
.stack-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(15,39,71,0.12);
}

.solution-card .icon-wrap,
.why-card .icon-wrap,
.stack-card .icon-wrap{
    width:58px;
    height:58px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:rgba(15,39,71,0.07);
    color:var(--hdt-primary);
    font-size:1.4rem;
    margin-bottom:1rem;
}

.solution-card h3,
.why-card h3,
.case-card h3,
.insight-card h3,
.stack-card h3{
    font-size:1.2rem;
    font-weight:700;
    color:var(--hdt-primary);
    margin-bottom:0.8rem;
}

.solution-card p,
.why-card p,
.case-card p,
.insight-card p,
.stack-card p{
    color:var(--hdt-muted);
    margin-bottom:0;
}

.solution-card .card-body,
.why-card .card-body,
.case-card .card-body,
.insight-card .card-body,
.stack-card .card-body{
    padding:1.6rem;
}

.why-section{
    background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.process-wrap{
    position:relative;
}

.process-line{
    position:absolute;
    top:50px;
    left:12%;
    right:12%;
    height:5px;
    background:linear-gradient(90deg, rgba(15,39,71,0.10), rgba(15,39,71,0.24), rgba(15,39,71,0.10));
    z-index:0;
}

.process-step{
    position:relative;
    z-index:1;
    text-align:center;
    padding:0 10px;
}

.process-circle{
    width:56px;
    height:56px;
    margin:0 auto 1rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:2px solid var(--hdt-primary);
    color:var(--hdt-primary);
    font-weight:800;
    box-shadow:0 10px 25px rgba(15,39,71,0.08);
}

.process-step h4{
    font-size:1.05rem;
    color:var(--hdt-primary);
    font-weight:700;
    margin-bottom:0.45rem;
}

.process-step p{
    color:var(--hdt-muted);
    font-size:0.95rem;
    margin-bottom:0;
}

.case-meta,
.insight-meta{
    font-size:0.88rem;
    color:var(--hdt-muted);
    margin-bottom:0.8rem;
}

.case-link,
.insight-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:1rem;
    font-weight:700;
    color:var(--hdt-primary);
}

.stack-chip-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:1rem;
}

.stack-chip{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid var(--hdt-border);
    color:var(--hdt-primary);
    font-weight:600;
    font-size:0.92rem;
}

.cta-band{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg, var(--hdt-primary) 0%, var(--hdt-secondary) 100%);
    color:#fff;
    border-radius:28px;
    padding:3rem 2rem;
    box-shadow:0 22px 50px rgba(15,39,71,0.22);
}

.cta-band::before{
    content:"";
    position:absolute;
    right:-60px;
    top:-60px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
}

.cta-band::after{
    content:"";
    position:absolute;
    left:-80px;
    bottom:-80px;
    width:240px;
    height:240px;
    border-radius:50%;
    background:rgba(255,255,255,0.05);
}

.cta-band h2{
    font-size:clamp(1.8rem, 3vw, 2.8rem);
    font-weight:800;
    margin-bottom:0.9rem;
}

.cta-band p{
    color:rgba(255,255,255,0.86);
    font-size:1.05rem;
    margin-bottom:0;
}

.home-divider{
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(15,39,71,0.12), transparent);
    margin:0 auto;
}

/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */
@media (max-width: 991.98px){
    .page-hero-mini{
        padding:56px 0 36px;
    }

    .section-pad{
        padding:56px 0;
    }

    .section-title{
        font-size:1.65rem;
    }

    .navbar-brand small{
        font-size:0.66rem;
    }

    .navbar-brand img{
        height:40px !important;
    }

    .home-hero{
        padding:68px 0 58px;
    }

    .hero-points{
        grid-template-columns:1fr;
    }

    .process-line{
        display:none;
    }
}

.form-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  padding: 2rem;
}

.hero-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.form-control,
.form-select {
  min-height: 50px;
  border-radius: 12px;
  border: 1px solid #dbe2ea;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 0.2rem rgba(29, 78, 216, 0.12);
}

textarea.form-control {
  min-height: 150px;
}

.info-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}