/*
Description: Styling for SmartPath home page
Theme Name: SmarthPath
Template: Home Page (update 08-2026).php
Updated: 08-2026
*/



  .navy-bg{background:var(--navy);}
  .text-blue{color:var(--blue);}
  .text-orange{color:var(--orange);}
  .bg-soft{background:var(--bg-soft);}
  .eyebrow{
    text-transform:uppercase;
    font-size:.9rem;
    color:var(--blue);
  }
  .eyebrow.light{color:var(--blue-light);}
  .btn-brand{
    background:var(--orange);
    border-color:var(--orange);
    color:#fff;
    font-weight:600;
  }
  .btn-brand:hover{background:#e85a2e;border-color:#e85a2e;color:#fff;}
  .btn-navy{background:#1a2745;border-color:#1a2745;color:#fff;}
  .btn-navy:hover{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600;}
  .btn-outline-brand{border:1.5px solid var(--navy);color:var(--navy);font-weight:600;}
  .btn-outline-brand:hover{background:var(--navy);color:#fff;}
  .btn-outline-white{border:1.5px solid rgba(255,255,255,.5);color:#fff;font-weight:600;}
  .btn-outline-white:hover{background:#fff;color:var(--navy);}

  /* Utility bar */
  .utility-bar{font-size:.8rem;}
  .utility-bar a{color:#fff;text-decoration:none;}
  .utility-bar a:hover{color:var(--blue-light);}

  /* Hero */
  .hero-section{
    background:linear-gradient(115deg,#f4f8fb 0%,#eef4fa 54%,#e9f5fb 100%);
    position:relative;
    overflow:hidden;
  }
  .hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.10;
    pointer-events:none;
  }
  .glow-one{width:420px;height:420px;background:var(--blue);top:-120px;right:-80px;}
  .glow-two{width:380px;height:380px;background:var(--orange);bottom:-140px;left:-100px;}
  .micro-proof span{color:var(--blue-light);margin-right:.25rem;}

  /* Product mockup */
  .mockup-card{
    background:#fff;
    border-radius:1rem;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    overflow:hidden;
    color:#20263a;
  }
  .mockup-topbar{
    background:#f1f3f8;
    padding:.6rem 1rem;
    display:flex;
    align-items:center;
    gap:.4rem;
    font-size:.75rem;
    color:#6b7280;
    border-bottom:1px solid var(--border-soft);
  }
  .mockup-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;}
  .metric-tile{
    background:var(--bg-soft);
    border-radius:.6rem;
    padding:.75rem;
  }
  .metric-tile strong{font-size:1.4rem;display:block;color:var(--navy);}
  .bars{display:flex;align-items:flex-end;gap:6px;height:70px;}
  .bars i{
    display:block;
    width:10px;
    background:linear-gradient(180deg,var(--blue-light),var(--blue));
    border-radius:3px 3px 0 0;
  }
  .status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
  .status-progress{background:var(--blue);}
  .status-scheduled{background:#f5b942;}
  .status-complete{background:#2ecc71;}
  .phone-mockup{
    background:var(--navy);
    border-radius:1.4rem;
    padding:1rem;
    color:#fff;
    max-width:220px;
    box-shadow:0 20px 50px rgba(0,0,0,.4);
  }

  /* Outcome cards (hover) */
  .feature-card{
    display:block;
    text-decoration:none;
    color:inherit;
    transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  }
  .feature-card:hover{transform:translateY(-3px);}
  .feature-card-light{border:1px solid var(--border-soft);background:#fff;}
  .feature-card-light:hover{border-color:var(--blue);box-shadow:0 10px 24px rgba(31,143,212,.14);}
  .feature-card-dark{background:var(--navy);border:1px solid transparent;color:#fff;}
  .feature-card-dark:hover{border-color:var(--blue-light);box-shadow:0 10px 24px rgba(90,183,245,.2);}
  .icon-tile{
    width:56px;height:56px;border-radius:.75rem;
    display:inline-flex;align-items:center;justify-content:center;
    background:#eaf4fd;color:var(--blue);font-size:1.4rem;
  }
  .icon-tile.on-dark{background:rgba(255,255,255,.08);color:var(--blue-light);}
  .number-badge{
    position:absolute;top:20px;right:24px;font-weight:700;font-size:.75rem;color:#c7cbd4;
  }
  .feature-card-dark .number-badge{color:rgba(255,255,255,.35);}

  /* Audience cards */
  .audience-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:1rem;
    padding:2rem;
    color:#fff;
    text-decoration:none;
    display:block;
    transition:border-color .2s ease,background .2s ease;
  }
  .audience-card:hover{border-color:var(--blue-light);background:rgba(255,255,255,.08);color:#fff;}
  .audience-card span{color:var(--blue-light);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}

  /* Workflow */
  .workflow-dot{
    width:56px;height:56px;border-radius:50%;
    background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:1.1rem;
    margin-bottom:1rem;
  }
  .workflow-step{position:relative;}
  .workflow-step .step-number{font-size:.75rem;font-weight:700;color:#c7cbd4;}

.workflow-line::before {
  content: "";
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--orange));
  height: 2px;
  position: absolute;
  top: 58px;
  left: 12.5%;
  right: 12.5%;
}


  /* Product tabs */
  .nav-tabs .nav-link{
    border:none;color:#6b7280;font-weight:600;padding:.75rem 1.1rem;
  }
  .nav-tabs .nav-link.active{
    color:var(--navy);border-bottom:3px solid var(--orange);background:transparent;
  }

  /* Case study */
  .case-visual{
    background:linear-gradient(135deg,#0f1830,#1f8fd4);
    border-radius:1rem;
    min-height:260px;
  }
  .quote-mark{line-height:1;}

  /* Integrations */
  .integration-badge{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:.6rem;
    padding:.6rem 1rem;
    color:#fff;
    font-weight:600;
    font-size:.85rem;
  }
  .integration-note{
    background:rgba(255,255,255,.05);
    border-left:3px solid var(--orange);
    border-radius:.5rem;
    padding:1rem 1.2rem;
  }
  .integration-note span{color:var(--orange);font-weight:700;font-size:.75rem;text-transform:uppercase;}

  /* Readiness */
  .readiness-item{border-top:1px solid var(--border-soft);padding:1.5rem 0;}
  .readiness-item .num{font-weight:800;color:var(--blue);font-size:0.9rem;}

  /* FAQ */
  .accordion-button:not(.collapsed){color:var(--navy);background:var(--bg-soft);box-shadow:none;}
  .accordion-button:focus{box-shadow:none;}


  .skip-link{
    position:absolute;left:-999px;top:auto;background:#fff;color:#000;padding:.5rem 1rem;z-index:2000;
  }
  .skip-link:focus{left:1rem;top:1rem;}


/* Global styling */

:root {
  --navy: #26456D;
  --blue: #1f8fd4;
  --blue-light: #5ab7f5 !important;
  --orange: #FC6606;
  --bg-soft: #E7ECF3;
  --border-soft: #e5e7eb;
}

h1, h2, h3, h4, h5, h6 {
  color: #2B3747;
}

.mt-neg-50 {
	margin-top: -50px;
}

/* Converts the image to 100% black and white */
.img-gray {
  filter: grayscale(100%);
}

/* Smoothly transition back to color when hovered */
.img-gray-hover:hover {
  filter: grayscale(0%);
  transition: filter 0.3s ease-in-out;
}