/* Shared styles for Contact, Features, How It Works, Partnerships, Pricing */

    :root{
      --ink:#0a0a0a;
      --muted:#6b7280;
      --line:#e6e7eb;
      --panel:#ffffff;
      --chip:#f3f4f6;
      --section:#f6f7f8;
      --radius:14px;
      --shadow:0 6px 24px rgba(0,0,0,.06);
      --shadow-lg:0 10px 24px rgba(0,0,0,.10);
    }

/* Contact & Partnerships */
    /* Hero */
    .contact-hero{
      overflow:hidden;
      padding:72px 0 56px;
      background:
        radial-gradient(900px 420px at 85% -120px, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
        radial-gradient(700px 380px at -10% 110%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #fbfbfc 0%, #f8f9fb 38%, #ffffff 100%);
    }
    .contact-hero .lead{ color:var(--muted); }

    /* Sections & cards */
    .contact-section{ padding:64px 0; }
    .section-title.centered{ text-align:center; }
    .section-subtitle{ color:var(--muted); text-align:center; }
    .contact-card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:22px;
      box-shadow:var(--shadow);
      height:100%;
    }

    /* Form */
    .form-label{ font-weight:600; }
    .form-control,.form-select{
      border:1px solid var(--line);
      border-radius:10px;
    }
    .form-control:focus,.form-select:focus{
      border-color:#cfd2d8;
      box-shadow:0 0 0 .2rem rgba(0,0,0,.05);
    }
    .error-message { color:#dc2626; font-size:.875rem; margin-top:.25rem; min-height:1em; }
    .is-invalid { border-color:#dc2626 !important; }
    .form-success { color:#16a34a; }
    .form-error-global { color:#dc2626; margin-bottom:10px; display:none; }

    /* Contact info list */
    .contact-info-item{
      display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line);
    }
    .contact-info-item:last-child{ border-bottom:none; }
    .contact-icon{
      width:42px; height:42px; border-radius:999px;
      display:grid; place-items:center;
      background:#fff; border:1px solid var(--line); color:#111;
      flex:0 0 auto;
    }
    .text-muted{ color:var(--muted)!important; }

    /* Social links */
    .social-links a{
      display:inline-flex; align-items:center; justify-content:center;
      width:36px; height:36px; border-radius:999px;
      background:rgba(0,0,0,.04); border:1px solid var(--line); color:#111; margin-right:8px;
      transition:background .2s ease, transform .2s ease;
    }
    .social-links a:hover{ background:#f3f4f6; transform:translateY(-2px); }

    /* Map */
    .map-container{
      height:380px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-bottom:64px;
    }
    .map-container iframe{ width:100%; height:100%; border:0; display:block; }

    /* FAQ */
    .faq-section{ padding:64px 0; }
    .faq-item{
      background:#fff; border:1px solid var(--line); border-radius:var(--radius);
      padding:18px; margin-bottom:12px; box-shadow:var(--shadow);
    }
    .faq-question{ font-weight:700; display:flex; align-items:center; gap:.6rem; }
    .faq-question i{ color:#111; }

    /* Responsive tweaks */
    @media (max-width: 768px){
      .contact-hero{ padding:56px 0 40px; text-align:center; }
      .map-container{ height:260px; margin-bottom:40px; }
    }

/* Features */
    /* ===========================
       FEATURES PAGE (Black & White)
       =========================== */

    /* Hero */
    .features-hero{
      padding:72px 0 56px;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(900px 420px at 85% -120px, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
        radial-gradient(700px 380px at -10% 110%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #fbfbfc 0%, #f6f7f8 38%, #ffffff 100%);
    }
    .features-hero .lead{ color:var(--muted); }

    /* Sections */
    .features-section{ padding:64px 0; }
    .section-title.centered{ text-align:center; }
    .section-subtitle{
      color:var(--muted);
      text-align:center;
      margin-bottom:1.5rem;
    }

    /* Feature cards */
    .feature-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:22px;
      height:100%;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .feature-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-lg);
      border-color:#dcdcdc;
    }
    .feature-icon{
      width:52px; height:52px;
      display:grid; place-items:center;
      border-radius:12px;
      border:1px solid var(--border);
      background:#fff; color:#000;
      margin-bottom:.75rem;
      font-size:1.35rem;
    }
    .feature-list{
      list-style:none;
      padding-left:0;
      margin:14px 0 0;
    }
    .feature-list li{
      display:flex; align-items:center;
      gap:.6rem;
      margin:.35rem 0;
    }
    .feature-list li i{ color:#111; }

    /* Demo */
    .demo-section{
      padding:64px 0;
      background:linear-gradient(to bottom, #f7f7f7, #ffffff);
      position:relative; overflow:hidden;
    }
    .demo-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow-lg);
      padding:20px;
    }

    /* Tabs (nav-pills) – monochrome */
    .nav-pills .nav-link{
      border:1px solid var(--border);
      background:#fff;
      color:var(--text);
      margin:0 .25rem;
    }
    .nav-pills .nav-link:hover{ background:var(--lighter); }
    .nav-pills .nav-link.active{
      background:#111 !important;
      color:#fff !important;
      border-color:#111 !important;
    }

    /* Upload / Security / Sharing right-panels */
    .border.rounded-3.bg-white{
      border:1px solid var(--border) !important;
      background:#fff !important;
    }
    .border-primary{ border-color:#111 !important; }   /* toggled via JS */
    .text-primary{ color:#111 !important; }            /* icon tint in panels */

    /* Inputs and small buttons in demo areas */
    .btn-outline-secondary{
      border-color:var(--border);
      color:var(--text);
      background:#fff;
    }
    .btn-outline-secondary:hover{
      background:var(--lighter);
      border-color:#d4d4d4;
      color:#000;
    }
    .form-check-input:checked{
      background-color:#111;
      border-color:#111;
    }

    /* Progress bars – mono */
    .progress{
      height:5px;
      background-color:#efefef;
      border-radius:999px;
    }
    .progress-bar{ background-color:#111 !important; }

    /* Use Cases */
    .use-cases{
      padding:64px 0;
      background:var(--section);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .use-case-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:20px;
      height:100%;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .use-case-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-lg);
      border-color:#dcdcdc;
    }
    .use-case-icon{
      width:48px; height:48px;
      display:grid; place-items:center;
      border-radius:12px;
      border:1px solid var(--border);
      background:#fff; color:#000;
      margin-bottom:.6rem;
      font-size:1.25rem;
    }

    /* Integrations */
    .integration-section{ padding:64px 0; }
    .integration-logo{
      height:26px;
      margin:8px 16px;
      filter:grayscale(1);
      opacity:.85;
      transition:opacity .2s ease, filter .2s ease, transform .2s ease;
    }
    .integration-logo:hover{
      opacity:1; filter:grayscale(0); transform:translateY(-2px);
    }

    /* CTA */
    .features-section .btn-brand{ font-weight:700; }

    /* Responsive tweaks */
    @media (max-width: 992px){
      .features-hero{ text-align:center; }
    }
    @media (max-width: 768px){
      .demo-card{ padding:16px; }
      .features-section, .demo-section, .use-cases, .integration-section{ padding:48px 0; }
    }

/* How It Works */
    /* ===============  HOW IT WORKS — B&W  =============== */

    /* Hero */
    .hero{
      padding:72px 0 56px;
      position:relative; overflow:hidden;
      background:
        radial-gradient(900px 420px at 85% -120px, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
        radial-gradient(700px 380px at -10% 110%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #fbfbfc 0%, #f6f7f8 38%, #ffffff 100%);
    }
    .hero .lead{ color:var(--muted); }

    /* Sections */
    .section{ padding:64px 0; }
    .section-title.centered{ text-align:center; }
    .section-subtitle{ color:var(--muted); text-align:center; margin-bottom:1.25rem; }

    /* Steps */
    .step-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:22px; height:100%;
      text-align:center;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .step-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#dcdcdc; }
    .step-number{
      width:40px; height:40px; border-radius:999px;
      display:grid; place-items:center;
      background:#fff; border:1px solid var(--line);
      font-weight:700; margin:0 auto .75rem;
    }
    .feature-icon{
      width:52px; height:52px; border-radius:12px;
      display:grid; place-items:center;
      border:1px solid var(--line);
      background:#fff; color:#000;
      font-size:1.35rem;
    }
    .step-card .feature-icon{ background:#fff !important; color:#000 !important; }

    /* Detail section */
    .detail-section{ padding:64px 0; background:#fff; }
    .detail-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:22px;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      height:100%;
    }
    .detail-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#dcdcdc; }

    .detail-card .list-unstyled li i{ color:#111 !important; }
    .detail-card .text-success,
    .detail-card .text-warning,
    .detail-card .text-primary,
    .detail-card .text-info{ color:#111 !important; }

    .detail-card .bg-light{
      background:#f6f7f8 !important;
      border:1px solid var(--line);
    }
    .detail-card h6{ font-weight:700; }

    .text-muted{ color:var(--muted) !important; }

    @media (max-width: 992px){
      .hero{ text-align:center; }
    }
    @media (max-width: 768px){
      .section, .detail-section{ padding:48px 0; }
    }

/* Pricing */
    *{ font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
    body{ color:var(--ink); }
    /* ===== HERO ===== */
    .pricing-hero{
      overflow:hidden;
      padding:72px 0 56px;
      background:
        radial-gradient(900px 420px at 85% -120px, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
        radial-gradient(700px 380px at -10% 110%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #fbfbfc 0%, #f8f9fb 38%, #ffffff 100%);
    }
    .pricing-hero .lead{ color:var(--muted); }

    /* Sections */
    .section-title.centered{ text-align:center; }
    .section-subtitle{ color:var(--muted); text-align:center; }
    .pricing-section{ background:var(--section); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:64px 0; }
    .comparison-section, .testimonial-section, .faq-section{ padding:64px 0; }

    /* Plan cards */
    .plan{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:28px 22px;
      height:100%;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#dcdcdc; }
    .plan-title{ font-weight:700; margin-bottom:.35rem; }
    .plan-price{ font-size:38px; font-weight:800; margin-bottom:.35rem; }
    .plan .text-muted{ color:var(--muted)!important; }
    .plan-features{ list-style:none; padding-left:0; margin:1rem 0 1.25rem; }
    .plan-features li{ margin:.45rem 0; display:flex; align-items:center; gap:.5rem; }
    .check{ color:#111; }
    .plan.featured{ border-color:#111; box-shadow:var(--shadow-lg); position:relative; }
    .plan.featured::before{
      content:'Most Popular';
      position:absolute; top:-12px; right:22px;
      background:#111; color:#fff; font-size:.72rem; font-weight:800;
      padding:.18rem .75rem; border-radius:999px;
    }

    /* Comparison Table */
    .comparison-table .table{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .comparison-table thead th{
      background:#f8f9fb;
      color:#111;
      border-bottom:1px solid var(--line);
    }
    .comparison-table tbody td{
      vertical-align:middle;
      border-color:var(--line);
    }

    /* Testimonials */
    .testimonial-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:22px;
      height:100%;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .testimonial-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#dcdcdc; }
    .testimonial-text p{ color:#111; margin-bottom:1rem; }
    .testimonial-author{ display:flex; align-items:center; gap:.75rem; }
    .testimonial-avatar{
      width:40px; height:40px; border-radius:999px;
      display:grid; place-items:center;
      background:#f3f4f6; border:1px solid var(--line); font-weight:700; color:#111;
    }

    /* FAQ */
    .faq-item{
      background:#fff; border:1px solid var(--line); border-radius:var(--radius);
      padding:18px; margin-bottom:12px; box-shadow:var(--shadow);
    }
    .faq-question{ font-weight:700; display:flex; align-items:center; gap:.6rem; }
    .faq-question i{ color:#111; }
    .faq-section .text-muted{ color:var(--muted)!important; }

    /* Responsive */
    @media (max-width: 768px){
      .pricing-hero{ padding:56px 0 40px; text-align:center; }
    }
body {
    background: #141414 !important;
}

h1.display-5.fw-bold.mb-3 {
    color: #fff;
    line-height: 42px;
}

h1.display-5.fw-bold.mb-3 span {
    color: #fff;
}

.hero .lead {
    color: #fff !important;
}

a.btn.btn-ghost.btn-lg {
    background: #fff;
}

.section-title.centered {
    color: #fff;
}

.logo-strip img {
    filter: unset;
}

header.hero.hero-pro.py-5.py-lg-6.position-relative {
    padding-top: 100px !important;
}

.text-muted {
    color: #ccc !important;
}

.glass-card .toolbar {
    background: #2f2f2f;
}

.pill {
    background: none !important;
    color: #fff;
    font-size: 12px;
}

.navbar .btn-ghost {
    border-radius: 5px;
    background: #fff;
    color: #000;
}

li.nav-item.ms-2 a {
    border-radius: 5px;
}

.nav-link {
    color: #fff !important;
}

li.nav-item {}

main {
    background: #141414 !important;
}

header.hero {
    background: none !important;
}

.navbar {
    border-bottom: 1px solid #2f2f2f;
}

.feature-card {
    background-color: #242424;
    border-color: #efefef;
    border: 1px solid #444444;
}

.feature-card h5 {
    color: #fff;
}

.feature-icon {
    border: 1px solid #8d8d8dcc;
    background: #525252;
}

.feature-icon i {
    color: #fff;
}

section {
    background: #141414 !important;
    border-top: 1px solid #404040 !important;
    border-bottom: 1px solid #2c2c2c !important;
}

.step-card {
    background: #fff;
    background-color: #242424;
    border-color: #efefef;
    border: 1px solid #444444;
}

h6 {
    color: #fff;
}

.step-number {
    width: 30px;
    height: 30px;
}

.feature-icon {
    width: 32px;
    height: 32px;
}

.section-title {
    color: #fff;
}

.btn-ghost {
    background: #fff;
}

.d-flex.align-items-start i {
    color: #fff;
}

.d-flex.align-items-start {}

/* .text-muted.small { */
    /* color: #202020 !important; */
/* } */

p.text-muted.mb-0.small {
    color: #fff !important;
}

.faq-item {
    background: #fff;
    background-color: #242424;
    border-color: #efefef;
    border: 1px solid #444444;
}

h6.faq-question i {
    color: #fff;
}

.cta-section {
    background: #fff;
    background-color: #242424;
    border-color: #efefef;
    border: 1px solid #444444;
}

h2.fw-bold.mb-3 {
    color: #fff;
}

body {
    color: #fff !important;
}

.demo-card {
    background: #242424;
    border-color: #efefef;
    border: 1px solid #444444;
}

.feature-list li i {
    color: #fff;
}

.nav-pills .nav-link.active {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

.nav-link::before {
    display: none;
}

.nav-pills .nav-link {
    background: #242424;
    border: 1px solid #959494;
}

.border.rounded-3.bg-white {
    background-color: #3e3e3e !important;
    border-color: #efefef !important;
    border: 1px solid #444444 !important;
}

.text-primary {
    color: #fff !important;
}

.section-subtitle {
    color: #fff;
}

.use-case-card {
    background-color: #242424;
    border-color: #efefef;
    border: 1px solid #444444;
}

.btn-brand {
    background: none;
    border: 1px solid #fff;
}
.step-number {
    width: 30px;
    height: 30px;
}
section.integration-section a.btn.btn-brand {
    color: #000;
}
.feature-icon.mx-auto.mb-3 i {
    color: #000;
}

.step-card .step-number {
    color: #000;
}

section.integration-section {}

.d-flex.justify-content-center.gap-3.flex-wrap {}

.d-flex.justify-content-center.gap-3.flex-wrap a.btn.btn-brand.btn-lg {
    border: 1px solid #fff;
    background: no-repeat;
}
section.integration-section .text-center.mt-5 a {
    background: #ffffff;
}

/****/
.detail-card {
    background-color: #242424;
    border-color: #efefef;
    border: 1px solid #444444;
}

.detail-card .bg-light {
    background-color: #464646 !important;
    border-color: #efefef;
    border: 1px solid #444444;
}

.detail-card .text-success, .detail-card .text-warning, .detail-card .text-primary, .detail-card .text-info {
    color: #fff !important;
}

.detail-card .list-unstyled li i {
    color: #fff !important;
}
.plan {
    background-color: #242424;
    border-color: #efefef;
    border: 1px solid #444444;
}

.plan-price {
    color: #fff;
}

.plan .text-muted {
    color: #ffffff !important;
}

.plan .check {
    color: #fff;
}
.plan.featured::before { 
    background: #2563eb; 
}

.comparison-table .table {
    background-color: #242424 !important;
    border-color: #efefef;
    border: 1px solid #a5a5a5 !important;
}

.comparison-table thead th {
    background-color: unset;
    border-color: #efefef;
    border: none;
    color: #fff;
}

.comparison-table tbody td {
    background-color: unset;
    border-color: #efefef;
    border: none;
    color: #fff;
}

.comparison-table tbody tr:nth-child(odd) {
    background: #444444 !important;
}

.comparison-table {
    border: 1px solid #767676;
}
.faq-section .text-muted {
    color: #fff !important;
}

.contact-card {
    background-color: #242424;
    border-color: #efefef;
    border: 1px solid #444444;
}

.form-control {
    background: #383838;
    border: 1px solid #606060;
}

.form-floating>.form-select {
    background: #383838;
    border: 1px solid #606060;
    color: #fff;
}

button#refreshCaptcha {
    background: #ccc;
}

.social-links a {
    color: #fff;
}

footer {
    padding-top: 50px;
    background-color: #242424;
}

.footer-grid {
    display: flex;
    grid-column-gap: 100px;
    margin-bottom: 57px;
}

.compinfo {
    width: 35%;
}

.compinfo img {
    margin-bottom: 17px;
}

.compinfo p {
    width: 100%;
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
}

.compinfo ul {
    display: flex;
    padding-left: 0;
    list-style-type: none;
    grid-column-gap: 20px;
    margin-bottom: 0;
}

.footer-link span {
    color: #fff;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    display: inline-flex;
    margin-bottom: 21px;
}

.footer-link ul {
    display: flex;
    flex-direction: column;
    grid-row-gap: 13px;
    margin-bottom: 0;
    padding-left:0;
}

.footer-link ul li {
    width: 90%;
    display: flex;
    align-items: flex-start;
    grid-column-gap: 15px;
    
}

.footer-link ul li a {
    color: #fff;
    font-size: 18px;
    line-height: 26px;
    white-space: nowrap;
    text-decoration: none;
}

.footer-link ul li svg {
    top: 2px;
    flex-shrink: 0;
    position: relative;
}

.footer-grid .footer-link:last-of-type ul li span {
    margin-bottom: 0px;
    font-weight: 400;
}


.compinfo p.text-secondary {
    color: #fff !important;
    opacity: 0.5;
    font-size: 16px;
}

.copyright-wrap {
    display: flex;
    padding: 47px 0 38px;
    border-top: 1px solid rgba(255, 255, 255, 60%);
    justify-content: space-between;
}

.copyright-wrap ul {
    list-style-type: initial;
    padding-left: 0;
    display: flex;
    grid-column-gap: 37px;
    margin-bottom: 0;
    list-style-type:none;
    padding-left:0;
}

.copyright-wrap ul li a, .copyright-wrap span {
    color: #fff;
    font-size: 18px;
    line-height: 24px;
}

.copyright-wrap ul li a {
    text-decoration: none;
    color: #fff;
}

.join-grid 
{
    padding: 40px;
	border-radius: 15px;
    background-color: #0460C7;
}

.join-grid 
{
    display: flex;
    grid-column-gap: 113px;
}

.join-left h2 
{
    font-size: 45px;
    line-height: 61px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 1px;
}

.join-left .btn-action-wrap 
{
    margin-bottom: 0;
    justify-content: flex-start;
}

.join-left a.action-filled:hover
{
    background-color: #0460C7;	
}

.join-left 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.join-left p {
    margin-bottom: 50px;
}

section.joindigital-sect {
    position: relative;
    z-index: 9;
    background: none !important;
    border: none !important;
}

footer {
    padding-top: 200px;
    position: relative;
       margin-top: -140px;
}

@media only screen and (min-width: 300px) and (max-width: 991px) 
{
.join-left h2 {
        font-size: 26px;
        line-height: 36px;
    }

.join-grid {
    flex-direction: column;
}

.join-right img {
    width: 200px;
    margin-top: 50px;
}
    .footer-grid {
        grid-row-gap: 40px;
        margin-top: 0px !important;
        margin-bottom: 40px !important;
    }
	
    footer {
        padding-bottom: 0px;
		padding-top: 40px;
    }

	.footer-grid{
        flex-direction: column;
    }	
	
	.compinfo {
        width: 100%;
    }

    .copyright-wrap {
        padding: 40px 0 40px;
    }

	.copyright-wrap {
        grid-row-gap: 40px;
        flex-direction: column;
    }

	.copyright-wrap ul {
        flex-direction: column;
        grid-row-gap: 10px;
    }	

}