/* =========================================================
   DESIGN TOKENS
========================================================= */

:root{
    --bh-c12-surface:
      rgba(9,16,31,.78);

    --bh-c12-surface-strong:
      rgba(8,14,28,.94);

    --bh-c12-line:
      rgba(151,174,210,.13);

    --bh-c12-line-accent:
      rgba(55,224,230,.22);

    --bh-c12-text:
      rgba(244,249,255,.96);

    --bh-c12-muted:
      rgba(201,214,230,.70);

    --bh-c12-shadow:
      0 22px 70px rgba(0,0,0,.28);

    --bh-c12-radius:
      22px;
}


/* =========================================================
   HEADER / NAVIGATION
========================================================= */

.navbar{
    border-bottom:
      1px solid
      rgba(255,255,255,.075) !important;

    background:
      linear-gradient(
        110deg,
        rgba(19,17,54,.96),
        rgba(20,24,55,.95) 34%,
        rgba(38,23,68,.94) 67%,
        rgba(14,23,48,.96)
      ) !important;

    backdrop-filter:
      blur(18px)
      saturate(135%) !important;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(135%) !important;

    box-shadow:
      0 8px 30px rgba(0,0,0,.20),
      inset 0 -1px 0 rgba(255,255,255,.025) !important;
}


.nav-links{
    gap:7px !important;
}


.nav-links > a,
.nav-links > button,
.bh-custom-solutions-trigger{
    border:
      1px solid
      rgba(255,255,255,.085) !important;

    border-radius:
      11px !important;

    background:
      rgba(255,255,255,.035) !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.025);

    font-weight:
      750 !important;

    transition:
      transform .18s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease !important;
}


.nav-links > a:hover,
.nav-links > button:hover,
.bh-custom-solutions-trigger:hover{
    border-color:
      rgba(77,226,234,.32) !important;

    background:
      rgba(40,215,227,.075) !important;

    box-shadow:
      0 7px 22px
      rgba(0,0,0,.18) !important;

    transform:
      translateY(-1px) !important;
}


.nav-btn.nav-cta{
    border-color:
      rgba(255,183,76,.30) !important;

    background:
      linear-gradient(
        135deg,
        rgba(246,156,48,.96),
        rgba(236,91,105,.94)
      ) !important;

    color:
      #fff !important;

    box-shadow:
      0 8px 25px
      rgba(239,111,78,.21) !important;
}


/* =========================================================
   ANNOUNCEMENT STRIP
========================================================= */

.scroll-banner{
    border-top:
      1px solid
      rgba(255,255,255,.035) !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.08) !important;

    background:
      linear-gradient(
        90deg,
        rgba(62,62,192,.98),
        rgba(105,58,202,.98),
        rgba(19,150,184,.97)
      ) !important;

    box-shadow:
      0 8px 22px
      rgba(0,0,0,.18) !important;
}


.scroll-content{
    font-weight:
      750 !important;

    letter-spacing:
      .015em;
}


/* =========================================================
   HERO
========================================================= */

.hero{
    width:
      min(
        1180px,
        calc(100% - 30px)
      ) !important;

    max-width:
      1180px !important;

    box-sizing:
      border-box;

    padding:
      56px 34px 48px !important;

    border:
      1px solid
      rgba(104,140,206,.15);

    border-radius:
      30px;

    overflow:
      hidden;

    isolation:
      isolate;

    background:
      radial-gradient(
        circle at 12% 5%,
        rgba(66,70,214,.17),
        transparent 34%
      ),
      radial-gradient(
        circle at 90% 9%,
        rgba(171,63,208,.12),
        transparent 35%
      ),
      linear-gradient(
        145deg,
        rgba(11,18,37,.93),
        rgba(9,15,31,.86)
      );

    box-shadow:
      0 28px 80px
      rgba(0,0,0,.27),
      inset 0 1px 0
      rgba(255,255,255,.035);
}


.hero-company-badge{
    border:
      1px solid
      rgba(75,221,230,.20) !important;

    border-radius:
      999px !important;

    background:
      rgba(34,204,216,.055) !important;

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.025);
}


.hero h1{
    max-width:
      1000px;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-wrap:
      balance;

    filter:
      drop-shadow(
        0 8px 20px
        rgba(0,0,0,.15)
      );
}


.hero-subtitle{
    max-width:
      820px;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    color:
      rgba(225,235,247,.78) !important;

    text-wrap:
      pretty;
}


.hero-actions{
    gap:
      10px !important;

    align-items:
      center;

    justify-content:
      center;
}


.hero-actions a,
.hero-actions button{
    min-height:
      46px;

    padding:
      12px 18px !important;

    border-radius:
      12px !important;

    box-shadow:
      0 9px 26px
      rgba(0,0,0,.16);

    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease !important;
}


.hero-actions a:hover,
.hero-actions button:hover{
    transform:
      translateY(-2px) !important;

    box-shadow:
      0 13px 30px
      rgba(0,0,0,.22) !important;
}


.hero-actions .primary-home{
    border:
      1px solid
      rgba(76,227,226,.28) !important;
}


.hero-actions .secondary-home{
    border:
      1px solid
      rgba(157,177,216,.18) !important;

    background:
      rgba(255,255,255,.035) !important;
}


/* =========================================================
   MARKET CLOCK
========================================================= */

.hero-clock-container{
    width:
      min(
        860px,
        calc(100% - 28px)
      ) !important;

    box-sizing:
      border-box;

    border:
      1px solid
      rgba(82,220,225,.15) !important;

    border-radius:
      17px !important;

    background:
      linear-gradient(
        135deg,
        rgba(6,12,25,.88),
        rgba(12,21,39,.82)
      ) !important;

    box-shadow:
      0 18px 44px
      rgba(0,0,0,.24) !important;
}


/* =========================================================
   PRODUCT ECOSYSTEM
========================================================= */

.home-suite-section{
    width:
      min(
        1180px,
        calc(100% - 28px)
      ) !important;

    box-sizing:
      border-box;
}


.home-section-heading{
    max-width:
      900px;

    margin-left:
      auto;

    margin-right:
      auto;
}


.home-section-heading h2{
    text-wrap:
      balance;
}


.home-product-card{
    border-color:
      rgba(145,169,207,.13) !important;

    box-shadow:
      0 18px 45px
      rgba(0,0,0,.20),
      inset 0 1px 0
      rgba(255,255,255,.025) !important;

    transition:
      transform .20s ease,
      border-color .20s ease,
      box-shadow .20s ease !important;
}


.home-product-card:hover{
    transform:
      translateY(-3px);

    border-color:
      rgba(67,222,229,.24) !important;

    box-shadow:
      0 25px 55px
      rgba(0,0,0,.25),
      inset 0 1px 0
      rgba(255,255,255,.035) !important;
}


.product-mini{
    border-color:
      rgba(255,255,255,.075) !important;

    background:
      rgba(255,255,255,.025) !important;
}


.product-home-actions a{
    border-radius:
      10px !important;

    transition:
      transform .18s ease,
      border-color .18s ease,
      background .18s ease !important;
}


.product-home-actions a:hover{
    transform:
      translateY(-1px);
}


/* =========================================================
   DYNAMIC CUSTOM / WORKFLOW SECTIONS
========================================================= */

#custom-digital-solutions,
#custom-digital-use-cases,
#custom-platform-capabilities,
.bhavya-project-section,
.bh-c6-section,
#bhavya-market-analytics-suite{
    scroll-margin-top:
      145px;
}


.bh-c6-group{
    border-color:
      rgba(144,170,208,.11) !important;

    box-shadow:
      0 20px 48px
      rgba(0,0,0,.20) !important;
}


.bh-c6-card{
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease !important;
}


.bh-c6-card:hover{
    transform:
      translateY(-2px);
}


/* =========================================================
   MARKET SUITE — FRAME ONLY
   Inner product/data logic intentionally untouched.
========================================================= */

#bhavya-market-analytics-suite{
    border-radius:
      24px;
}


.bh-market-suite-shell > .hero-clock-container,
.bh-market-suite-shell > .price-ticker,
.bh-market-suite-shell > .showcase-section{
    border-color:
      rgba(135,163,204,.12) !important;
}


.bh-market-suite-shell > .price-ticker{
    box-shadow:
      0 20px 46px
      rgba(0,0,0,.22) !important;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
    border-top:
      1px solid
      rgba(255,255,255,.07) !important;

    background:
      linear-gradient(
        180deg,
        rgba(7,13,27,.98),
        rgba(5,10,21,.99)
      ) !important;

    box-shadow:
      0 -20px 60px
      rgba(0,0,0,.12);
}


.footer-section{
    border-radius:
      14px;
}


.footer-section a{
    transition:
      color .18s ease,
      transform .18s ease !important;
}


/* =========================================================
   ACCESSIBILITY / KEYBOARD
========================================================= */

.nav-btn:focus-visible,
.hero-actions a:focus-visible,
.hero-actions button:focus-visible,
.product-home-actions a:focus-visible,
.bh-custom-solutions-trigger:focus-visible{
    outline:
      2px solid
      rgba(80,235,239,.90) !important;

    outline-offset:
      3px;
}


/* =========================================================
   LIGHT MODE
========================================================= */

body.light .navbar{
    background:
      linear-gradient(
        110deg,
        rgba(249,250,255,.97),
        rgba(243,246,255,.96)
      ) !important;

    border-bottom-color:
      rgba(46,70,114,.12) !important;

    box-shadow:
      0 8px 28px
      rgba(36,54,89,.08) !important;
}


body.light .nav-links > a,
body.light .nav-links > button,
body.light .bh-custom-solutions-trigger{
    color:
      #1e293b !important;

    border-color:
      rgba(45,67,111,.12) !important;

    background:
      rgba(255,255,255,.60) !important;
}


body.light .hero{
    border-color:
      rgba(62,89,142,.13);

    background:
      radial-gradient(
        circle at 12% 5%,
        rgba(93,91,213,.10),
        transparent 34%
      ),
      radial-gradient(
        circle at 90% 9%,
        rgba(166,74,201,.08),
        transparent 35%
      ),
      linear-gradient(
        145deg,
        rgba(255,255,255,.98),
        rgba(246,249,255,.96)
      );

    box-shadow:
      0 25px 65px
      rgba(43,60,98,.10);
}


body.light .hero-subtitle{
    color:
      rgba(42,57,80,.76) !important;
}


body.light .hero-clock-container{
    background:
      rgba(255,255,255,.90) !important;

    border-color:
      rgba(56,95,160,.12) !important;

    box-shadow:
      0 15px 38px
      rgba(41,60,97,.10) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .hero{
        padding:
          46px 24px 40px !important;

        border-radius:
          24px;
    }


    .hero-actions{
        gap:
          9px !important;
    }


    .hero-actions a,
    .hero-actions button{
        flex:
          1 1 220px;

        max-width:
          330px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:680px){

    .navbar{
        border-radius:
          0 !important;
    }


    .nav-links.show{
        width:
          min(
            92vw,
            330px
          ) !important;

        padding:
          12px !important;

        gap:
          7px !important;

        border:
          1px solid
          rgba(255,255,255,.10);

        border-radius:
          15px !important;

        background:
          rgba(8,14,29,.97) !important;

        box-shadow:
          0 22px 55px
          rgba(0,0,0,.34) !important;
    }


    .nav-links.show > a,
    .nav-links.show > button,
    .nav-links.show .bh-custom-solutions-trigger{
        width:
          100%;

        box-sizing:
          border-box;

        text-align:
          left;
    }


    .scroll-banner{
        font-size:
          12px !important;
    }


    .hero{
        width:
          calc(100% - 20px) !important;

        padding:
          38px 16px 32px !important;

        border-radius:
          21px;
    }


    .hero h1{
        letter-spacing:
          -1.2px !important;

        line-height:
          1.08 !important;
    }


    .hero-subtitle{
        line-height:
          1.62 !important;

        margin-bottom:
          25px !important;
    }


    .hero-actions{
        display:
          grid !important;

        grid-template-columns:
          1fr !important;

        width:
          min(
            100%,
            420px
          );

        margin-left:
          auto;

        margin-right:
          auto;
    }


    .hero-actions a,
    .hero-actions button{
        width:
          100%;

        max-width:
          none;

        min-height:
          45px;

        justify-content:
          center;
    }


    .hero-clock-container{
        width:
          calc(100% - 20px) !important;

        border-radius:
          15px !important;
    }


    .home-suite-section{
        width:
          calc(100% - 20px) !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .hero{
        padding:
          32px 13px 28px !important;
    }


    .hero-company-badge{
        font-size:
          9px !important;

        letter-spacing:
          .75px !important;
    }


    .hero-actions a,
    .hero-actions button{
        font-size:
          12px !important;

        padding:
          11px 13px !important;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .nav-links > a,
    .nav-links > button,
    .hero-actions a,
    .hero-actions button,
    .home-product-card,
    .bh-c6-card{
        transition:
          none !important;
    }

}