/* ===================================
GLOBAL STYLING
=================================== */

/* Images now carry intrinsic width/height attributes (T2.3) so the browser can
   reserve space and avoid layout shift. Those attributes also supply a height,
   which distorts any image whose CSS constrains only ONE axis — and 25 selectors
   in this file set an img width with no height. `height: auto` restores the
   aspect ratio in those cases.

   Deliberately placed at the very top and at the lowest possible specificity
   (0,0,1): every existing rule that sets an explicit height is either more
   specific or later in the cascade, so it still wins. Do not move this lower. */
img{
    height: auto;
}

body{
    background:#010b1d;
    font-family:'Poppins', sans-serif;
    overflow-x: hidden;
}

a{
    text-decoration:none;
    transition:0.3s;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
}

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

.blueritt-header{
    position:relative;
    background:#010b1d;
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:18px 20px;
    z-index:999;
    
    position: fixed;
    width: 100%;
    /* Was 39px, to clear the fixed policy announcement bar. That bar was removed
       17 Aug 2026 (see includes/header.php); with it gone the offset left a
       39px strip of page showing above a fixed header. Restore 39px here,
       51px in responsive.css and 42px on .policy-pg if the bar comes back. */
    top:0;
}

.blueritt-header::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(to right,#ff6a00,#0057ff);
}

/* ===================================
LOGO
=================================== */

.header-logo img{
    max-width:220px;
}

/* Brand lockup: logo + "A Product of ReverCe Technologies" (2 Sep 2026).

   Sized to cost the header NO extra height, which is what keeps the nav and the
   Sign In / Sign Up buttons where they were. Measured before adding it: the
   header is 76px — 18px padding top and bottom around a 40px content box, and
   that 40px is set by the 39px CTA buttons, not by the logo. The logo image is
   26px, so there were 13px going spare beside it.

   The tagline spends exactly that: 2px gap + 11px line box = 13px, taking the
   brand block from 27px to 39px — level with the buttons, one pixel under the
   content box. The header stays 76px, so nothing below it moves and the row's
   align-items:center keeps the nav and buttons centred against the taller
   block on its own.

   If the logo or the CTA buttons are ever resized, re-measure: the moment the
   brand block exceeds the button height it starts driving the header height,
   and every page's top offset is tuned to 76px. */
.header-brand{
    display:block;
    line-height:0;          /* kills the inline-image descender gap under the logo */
}

.header-brand-tagline{
    display:block;
    align-items: center;
    margin-top:4px;
    font-size:8px;
    font-style: italic;
    line-height:11px;
    letter-spacing:0.3px;
    white-space:nowrap;
    /* Centred under the logo, not ranged left against it. .header-brand is
       exactly the logo's width, so centring the text inside it centres it on
       the mark. If the logo is ever swapped for one of a different width this
       stays correct — it follows the image rather than a hardcoded offset. */
    text-align:center;
    color:rgba(255,255,255,0.55);
}

/* ===================================
MENU
=================================== */

.main-menu{
    display:flex;
    align-items:center;
    gap:38px;
    justify-content:center;
    margin: 0;
    padding: 0;
}

.menu-item{
    position:relative;
}

.menu-item > a{
    color:#ffffff;
    font-size: 16px;
    font-weight: 300;
    font-family: "Commissioner", sans-serif;
    text-decoration: none;
}

.menu-item.active > a{
    color:#2c5de3;
}

.menu-item > a:hover{
    color:#2c5de3;
}

.menu-item i{
    font-size:12px;
    margin-left:6px;
}

/* ===================================
HEADER ACTIONS
=================================== */

.header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:15px;
}
section.hero-section {
    background-size: cover !important;
        background-position: center !important;
}

.header-btn{
 min-width: 115px;
    height: 39px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    font-family: "Bricolage Grotesque", sans-serif;
    letter-spacing: -0.72px;
    text-decoration: none;
}

.login-btn{
    border:1px solid #0057ff;
    color:#ffffff;
}

.signup-btn{
    border:1px solid #ff6a00;
    background:rgba(255,106,0,0.10);
    color:#ffffff;
}

.header-btn:hover{
    transform:translateY(-2px);
}

.search-btn{
    background:transparent;
    border:none;
    color:#ff6a00;
    font-size:28px;
}

/* ===================================
MEGA DROPDOWN
=================================== */


.mega-links {
display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 50px;
}


.has-dropdown{
    position:unset;
}

.bl-content {
    color: #8B8B8B;
    font-size: 18px;
    line-height: 26px;
    font-weight: 300;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.54px;
    width: 70%;
}

.mega-dropdown{
    position:absolute;
    top:70px;
    left:0px;
    width:100%;
    background:#020d22;
    border-top:1px solid rgba(255,255,255,0.06);
    padding:35px 40px;
    opacity: 0;
    visibility: hidden;
    transition:0.3s;
}

.has-dropdown:hover .mega-dropdown{
    opacity:1;
    visibility:visible;
    top:80px;
}

.mega-dropdown-wrapper{
    display:grid;
    grid-template-columns:320px 1fr 320px;
    gap:50px;
}

/* ===================================
DROPDOWN TITLE
=================================== */

.dropdown-title{
    color:#ffffff;
    font-size: 19px;
    font-weight:500;
    margin-bottom:25px;
    letter-spacing: -0.44px;
    font-family: "Commissioner", sans-serif;
}

/* ===================================
SERVICE CARD
=================================== */

.services-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.service-card{
    display:flex;
    align-items:center;
    gap:18px;
    background:#071b42;
    border-radius:14px;
    padding:18px;
}

.service-card{
    opacity:0.45;
    transition:all .3s ease;
}

.service-card.active{
    opacity:1;
    background:#071b42;
    border:1px solid rgba(255,255,255,0.08);
}

.service-card:hover{
    opacity:1;
}

.service-icon{
    width:52px;
    height:52px;
    background:#0d2a60;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.service-icon img
{
    width: 30px;
}

.service-content h6{
    color:#ffffff;
    font-size: 17px;
    margin:0;
    letter-spacing: 0.17px;
    font-family: "Commissioner", sans-serif;
}

/* ===================================
CENTER LINKS
=================================== */

.dropdown-link-group ul{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding: 0;
}

.dropdown-link-group ul li a{
    color: #51698E;
    font-size: 17px;
    text-decoration: none;
}

.dropdown-link-group ul li a:hover{
    color:#ffffff;
}

.support-group{
    margin-top:70px;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,0.08);
}

.support-group.dropdown-link-group ul {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}


/* ===================================
PROMO CARD
=================================== */

.promo-card{
    background:#071b42;
    border-radius:20px;
    padding:20px;
}

.promo-image img{
width: 100%;
    border-radius: 18px;
    height: 227px;
    object-fit: cover;
}

.promo-content{
    margin-top:20px;
}

.promo-content h4{
    color:#ffffff;
    font-size: 17px;
    line-height:1.3;
    margin-bottom:18px;
    letter-spacing: -0.39px;
    font-family: "Commissioner", sans-serif;
}

.promo-content p{
    color:#c7d3ea;
    font-size: 14px;
    line-height:1.7;
    margin-bottom:25px;
    letter-spacing: -0.32px;
    font-family: "Commissioner", sans-serif;
    font-weight: 300;
}

.theme-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:190px;
    height:50px;
    border-radius:50px;
    border:1px solid #ff6a00;
    color:#ffffff;
    font-size:16px;
}

.theme-btn:hover{
    background:#ff6a00;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width:1399px){

    .mega-dropdown{
        width:1100px;
    }

}

@media(max-width:991px){

    .main-menu{
        display:none;
    }

}



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

.hero-section{
    position: relative;
    overflow: hidden;
    padding: 190px 0 70px;
    background: #000917;
    z-index: 1;
    /*background-image: url(../images/hero-bg.webp);*/
    background-position: center -130px;
    background-repeat: no-repeat;
}

/* ===================================
BACKGROUND BLUR
=================================== */

.hero-blur{
    position: absolute;
    border-radius: 50%;
    filter: blur(180px);
    z-index: -1;
}

.hero-blur-left{
    width: 650px;
    height: 650px;
    background: rgba(255, 98, 0, 0.35);
    top: -250px;
    left: -220px;
}

.hero-blur-right{
    width: 700px;
    height: 700px;
    background: rgba(0, 76, 255, 0.35);
    top: -180px;
    right: -220px;
}

/* ===================================
CONTENT
=================================== */

.hero-content{
    position: relative;
}

/* ===================================
RINGS
=================================== */

.hero-rings{
    position: relative;
    width: 420px;
    height: 420px;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring{
    position: absolute;
    border-radius: 50%;
}

.ring-1{
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 98, 0, 0.18);
}

.ring-2{
    width: 300px;
    height: 300px;
    border: 2px solid rgba(0, 76, 255, 0.55);
}

.ring-3{
    width: 190px;
    height: 190px;
    border: 2px solid rgba(255, 98, 0, 0.45);
}

/* ===================================
CENTER LOGO
=================================== */

.hero-logo{
    width: 92px;
    height: 92px;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo img{
    width: 100%;
}

/* ===================================
TITLE
=================================== */

.hero-title{
    color: #FFFFFF;
    font-size: 58px;
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -1.33px;
    margin-bottom: 30px;
    margin-top: -140px;
    font-family: "Commissioner", sans-serif;
        position: relative;
}

/* ===================================
DESCRIPTION
=================================== */

.hero-description{
    max-width: 980px;
    margin: 0 auto 45px;
    color: #8B8B8B;
    font-size: 18px;
    line-height: 26px;
    font-weight: 300;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.54px;
    width: 70%;
}

/* ===================================
BUTTON
=================================== */

.hero-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 152px;
    height: 48px;
    padding: 0 40px;
    border-radius: 100px;
    border: 1px solid #FF6200;
    background: rgba(255, 98, 0, 0.08);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    transition: 0.3s;
    font-family: "Bricolage Grotesque", sans-serif;
    text-decoration: none;
}

.hero-btn span{
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-btn:hover{
    background: #FF6200;
    color: #FFFFFF;
    transform: translateY(-3px);
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 1399px){

    .hero-title{
        font-size: 66px;
    }

}

@media(max-width: 991px){

    /* Puts the burger beside the logo instead of wrapping below it. Moved from
       the 767 block with the rest of the burger's layout — left behind, the
       header stacked to 98px at 768-991px instead of the 71px single row. */
    .header-logo {
    display: flex;
    justify-content: space-between;
    color: #ffff;
    }

    /* Sign In / Sign Up hidden from 991px down, matching mobile. Moved here from
       the 767 block on 17 Aug 2026 — the class is used exactly once, on the
       header's button column, so this is a breakpoint change rather than a new
       rule. The CTAs are not lost: the drawer carries its own Sign In / Sign Up
       in .ux_bottom_cta_wrap_2026, which is now styled at these widths too. */
    .d-none-mb{ display: none; }

    /* Bootstrap's `.row > *` sets width:100%, max-width:100% and gutter padding,
       and includes/style.php loads the Bootstrap CDN AFTER style.css — so on a
       specificity tie Bootstrap wins. The drawer is a direct child of the header
       row, so its width:340px below was being overridden to the full viewport
       (measured 850px at a 850px viewport). Qualifying the selector with
       .blueritt-header takes it to (0,2,0) and settles it. */
    .blueritt-header .ux_fullscreen_menu_2026{
        width:340px;
        max-width:340px;
        padding-left:0;
        padding-right:0;
    }

    /* Same stacking problem the ≥992px fix solved: below 992px each column
       claims its own full-width row, so the emptied nav column left a blank
       band and pushed the header to 137px. */
    .blueritt-header .row{
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:space-between;
    }

    .blueritt-header .row > .col-lg-8{
        display:none;
    }

    /* The logo column must span the header, not shrink to its content: the
       burger lives inside .header-logo, which uses justify-content:space-between
       to push it to the right edge — and space-between needs free space to
       distribute. Shrink-wrapping the column left the burger glued to the logo.
       Safe to take the full width here because the nav and button columns are
       both display:none in this range. */
    .blueritt-header .row > .col-lg-2{
        flex:1 1 auto;
        width:auto;
        max-width:none;
    }

    .hero-section{
        padding: 140px 0 100px;
    }

    .hero-rings{
        width: 300px;
        height: 300px;
    }

    .ring-1{
        width: 300px;
        height: 300px;
    }

    .ring-2{
        width: 220px;
        height: 220px;
    }

    .ring-3{
        width: 140px;
        height: 140px;
    }

    .hero-title{
        font-size: 48px;
        line-height: 1.3;
    }

    .hero-description{
        font-size: 18px;
    }

}

@media(max-width: 767px){

    .hero-title{
        font-size: 38px;
    }

    .hero-btn{
        min-width: 220px;
        height: 58px;
        font-size: 18px;
    }

}




/* ===================================
TRUSTED SECTION
=================================== */

.trusted-section{
    position: relative;
    padding: 50px 0;
    overflow: hidden;
    background: #000917;
}

/* ===================================
HEADING
=================================== */

.trusted-heading{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    margin-bottom: 30px;
}

.trusted-heading .line{
    width: 520px;
    height: 1px;
    background: rgba(255,255,255,0.06);
}

.trusted-heading h5{
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    white-space: nowrap;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.15px;
}

/* ===================================
SLIDER
=================================== */

.trusted-slider{
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* ===================================
TRACK
=================================== */

.trusted-track{
    display: flex;
    align-items: center;
    width: max-content;
    animation: trustedScroll 28s linear infinite;
}

/* ===================================
LOGO
=================================== */

.trusted-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    padding: 0 45px;
}

.trusted-logo img{
    max-width: 240px;
    /* opacity: 0.18; */
    transition: 0.3s;
}

.trusted-logo:hover img{
    opacity: 1;
}

/* ===================================
ANIMATION
=================================== */

@keyframes trustedScroll{

    0%{
        transform: translateX(0);
    }

    100%{
        transform: translateX(-50%);
    }

}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 991px){

    .trusted-heading{
        gap: 18px;
        margin-bottom: 45px;
    }

    .trusted-heading .line{
        width: 180px;
    }

    .trusted-heading h5{
        font-size: 18px;
    }

    .trusted-logo{
        min-width: 220px;
        padding: 0 25px;
    }

    .trusted-logo img{
        max-width: 160px;
    }

}




/* ===================================
VIDEO SECTION
=================================== */

.video-section{
    padding: 50px 0;
    background: #000917;
}

/* ===================================
VIDEO WRAPPER
=================================== */

.video-wrapper{
    position: relative;
    overflow: hidden;
    border-radius: 28px;
}

/* ===================================
VIDEO
=================================== */

.video-wrapper video{
    width: 100%;
    /* height:auto is required, not cosmetic. The element carries width="1920"
       height="1080" so the box is reserved before the video mounts (preload="none",
       poster only). Without height:auto the browser uses the literal 1080 attribute
       and renders a 1080px-tall element; with it, the attributes act as an
       aspect-ratio hint and the poster scales to 16:9. */
    height: auto;
    display: block;
    border-radius: 28px;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 991px){

    .video-wrapper{
        border-radius: 18px;
    }

    .video-wrapper video{
        border-radius: 18px;
    }

}

@media(max-width: 767px){

    .video-section{
        padding-bottom: 80px;
    }

}


/* ===================================
ABOUT SECTION
=================================== */

.about-section{
    padding: 50px 0;
    background: #000917;
}

/* ===================================
TOP TAG
=================================== */

.section-tag{
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 5px 14px 5px 24px;
    border: 1px solid #FF6200;
    border-radius: 100px;
    background: rgba(255, 98, 0, 0.08);
    margin-bottom: 30px;
}

.section-tag span{
    color: #FF5900;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.72px;
    font-family: "Bricolage Grotesque", sans-serif;
}

.section-tag strong{
    color: #FFFFFF;
    font-weight: 500;
}

.tag-arrow{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
}

/* ===================================
TITLE
=================================== */

.about-title{
    color: #FFFFFF;
    font-size: 52px;
    line-height: 1.25;
    font-weight: 500;
    margin-bottom: 55px;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.42px;
}

/* ===================================
TITLE ICON
=================================== */

.title-icon{
}

.title-icon img{
    width: 62px;
    margin: 0px 0 0px;
}

/* ===================================
DESCRIPTION
=================================== */

.about-description{
    color: #FFFFFF;
    font-size: 52px;
    line-height: 1.25;
    font-weight: 500;
    margin-bottom: 55px;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.42px;
}

.about-description span{
    position: relative;
}

.about-description span::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: #FF6200;
}

/* ===================================
STATS ROW
=================================== */

.stats-row{
    row-gap: 30px;
}

/* ===================================
CARD
=================================== */

.stats-card{
    background: #041A49;
    border-radius: 26px;
    padding: 50px 40px;
    height: 100%;
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border: 1.5px solid rgb(93 131 197 / 35%);
    text-align: center;
}

/* ===================================
NUMBER
=================================== */

.stats-card h3{
    color: #FFFFFF;
    font-size: 58px;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.46px;
}

/* ===================================
TEXT
=================================== */

.stats-card p{
    color: #A2A2A2;
    font-size: 22px;
    margin: 0;
    font-family: "Commissioner", sans-serif;
    font-weight: 300;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 1399px){

    .about-title{
        font-size: 68px;
    }

    .about-description{
        font-size: 38px;
    }

}

@media(max-width: 991px){

    .about-section{
        padding: 70px 0 90px;
    }

    .section-tag{
        margin-bottom: 35px;
    }

    .section-tag span{
        font-size: 16px;
    }

    .about-title{
        font-size: 48px;
        line-height: 1.4;
    }

    .title-icon{
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }

    .title-icon img{
        width: 28px;
    }

    .about-description{
        font-size: 28px;
        margin-bottom: 50px;
    }

    .stats-card{
        padding: 35px 28px;
    }

    .stats-card h3{
        font-size: 48px;
    }

    .stats-card p{
        font-size: 18px;
    }

}

@media(max-width: 767px){

    /* "Trusted By Sellers Across The UK And Beyond ⭐" wrapped to two lines on
       every phone narrower than 414px, which turns the pill into a lozenge with
       a ragged second line. Two things made it too wide, and the copy is
       neither of them:

       1. The 24px left padding is vestigial. It balanced `.tag-arrow`, a 42px
          circle that used to sit inside this pill and is commented out in
          index.php. With that gone it is just 10px of empty space on one side,
          and it makes the pill visibly lopsided as well as too wide. 14px
          matches the right-hand padding already there.

       2. At a flat 16px the copy needs 336px of text width. Trimming the
          padding leaves (viewport - 54) for it, which fits 16px from 390 up but
          not below, so the type has to come down on the narrowest phones.

       The clamp is sized from that measurement rather than guessed: the string
       costs ~21px of width per 1px of font-size, so (100vw - 54) / 21 is the
       largest type that fits, and `4.5vw - 2.5px` sits just under it with about
       1px of headroom at every width — 12px at 320, 13.7 at 360, 15.1 at 390,
       and back to the full 16px from 414 up, where it already fitted.

       max-width:100% rather than white-space:nowrap: if this copy is ever
       lengthened it should wrap again — untidy but harmless — rather than push
       the pill past its container and give the whole page a horizontal
       scrollbar. */
    .section-tag{
        padding-left: 14px;
        max-width: 100%;
    }

    .section-tag span{
        font-size: clamp(12px, calc(4.5vw - 2.5px), 16px);
    }

    .about-title{
        font-size: 38px;
    }

    .about-description{
        font-size: 22px;
        line-height: 1.5;
    }

}




/* ===================================
WHO BUILT FOR SECTION
=================================== */

.built-for-section{
    padding: 50px 0;
    background: #000917;
    position: relative;
    overflow: visible;
}

/* ===================================
SECTION HEADING
=================================== */

.section-heading{
    margin-bottom: 60px;
}

.section-heading h2{
    color: #FFFFFF;
    font-size: 43px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.34px;
    margin: 0;
    font-family: "Commissioner", sans-serif;
}

/* ===================================
ITEM
=================================== */

.built-for-item{
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    z-index: 9;
}

/* ===================================
CONTENT
=================================== */

.built-for-content{
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.built-for-content h3{
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.26px;
    font-family: "Commissioner", sans-serif;
}

.built-for-content p{
    color: #9D9D9D;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.18px;
}

/* ===================================
BUTTON
=================================== */

.theme-btn{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 16px 34px;
    border: 1px solid #FF6200;
    border-radius: 100px;
    background: rgba(255, 98, 0, 0.10);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;
    transition: 0.3s ease;
}

.theme-btn span{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.theme-btn:hover{
    background: #FF6200;
    color: #FFFFFF;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 1399px){

    .section-heading h2{
        font-size: 58px;
    }

    .built-for-content h3{
        font-size: 36px;
    }

    .built-for-content p{
        font-size: 22px;
    }

}

@media(max-width: 991px){

    .built-for-section{
        padding: 80px 0;
    }

    .section-heading{
        margin-bottom: 40px;
    }

    .section-heading h2{
        font-size: 44px;
    }

    .built-for-item{
        padding: 30px 0;
    }

    .built-for-content{
        margin-bottom: 25px;
    }

    .built-for-content h3{
        font-size: 30px;
    }

    .built-for-content p{
        font-size: 18px;
    }

    .theme-btn{
        font-size: 18px;
        padding: 14px 16px 14px 28px;
    }

}

@media(max-width: 767px){

    .section-heading h2{
        font-size: 36px;
    }

    .built-for-content{
        display: block;
    }

    .built-for-content h3{
        margin-bottom: 12px;
        font-size: 28px;
    }

    .built-for-content p{
        font-size: 17px;
        line-height: 1.7;
    }

}



/* ===================================
FEATURE CARD SECTION
=================================== */

.feature-card-section{
    padding: 50px 0;
    background: #000917;
    position: relative;
    /* overflow-x: hidden; */
}

/* ===================================
BACKGROUND GLOW
=================================== */

.feature-card-section::before{
    content: "";
    position: absolute;
    left: -610px;
    bottom: -550px;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, #FF5900 0%, rgba(255, 98, 0, 0) 70%);
    pointer-events: none;
    z-index: 1;
    opacity: 47%;
}

.feature-card-section::after{
    content: "";
    position: absolute;
    right: -550px;
    top: -550px;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, #155DFC 0%, rgba(0, 76, 255, 0) 70%);
    pointer-events: none;
    opacity: 47%;
}

/* ===================================
CARD WRAPPER
=================================== */

.feature-card-wrapper{
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    border: 1.5px solid rgb(93 131 197 / 35%);
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    padding: 60px 70px 0;
    position: relative;
    z-index: 9;
}

/* ===================================
LEFT CONTENT
=================================== */

.feature-card-content{
    padding-bottom: 60px;
}

/* ===================================
BADGE
=================================== */

.feature-badge{
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 100px;
    border: 1px solid #FF6200;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 20px;
    background: rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}

.feature-badge::before{
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 100px;
    background: linear-gradient(90deg,#0057FF,#FF6200);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

/* ===================================
HEADING
=================================== */

.feature-card-content h2{
    font-size: 52px;
    line-height: 1.05;
    font-weight: 300;
    color: #FFFFFF;
    margin-bottom: 10px;
    letter-spacing: -1.2px;
    max-width: 500px;
    font-family: "Bricolage Grotesque", sans-serif;
}

/* ===================================
PARAGRAPH
=================================== */

.feature-card-content p{
    font-size: 16px;
    line-height: 1.7;
    color: #9D9D9D;
    margin-bottom: 20px;
    max-width: 650px;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.13px;
    width: 80%;
}

/* ===================================
BUTTON
=================================== */

.theme-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    border-radius: 100px;
    border: 1px solid #FF5900;
    background: rgba(255,98,0,0.08);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-family: "Bricolage Grotesque", sans-serif;
}

.theme-btn::before{
}

.theme-btn:hover{
    background: #FF6200;
    color: #FFFFFF;
}

/* ===================================
IMAGE
=================================== */

.feature-card-image{
    /* position: relative; */
    text-align: right;
}

.feature-card-image img{
    width: 100%;
    max-width: 640px;
    display: block;
    margin-left: auto;
    position: absolute;
    bottom: 0px;
    right: 0;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 1399px){

    .feature-card-content h2{
        font-size: 58px;
    }

    .feature-card-content p{
        font-size: 20px;
    }

}

@media(max-width: 991px){

    .feature-card-section{
        padding: 80px 0;
    }

    .feature-card-wrapper{
        padding: 50px 40px 0;
    }

    .feature-card-content{
        padding-bottom: 50px;
    }

    .feature-card-content h2{
        font-size: 46px;
    }

    .feature-card-content p{
        font-size: 18px;
    }

    .theme-btn{
        font-size: 22px;
        padding: 16px 34px;
    }

    .feature-card-image{
        margin-top: 20px;
    }

}

@media(max-width: 767px){

    .feature-card-wrapper{
        padding: 35px 25px 0;
        border-radius: 24px;
    }

    .feature-badge{
        font-size: 14px;
        padding: 10px 16px;
    }

    .feature-card-content h2{
        font-size: 34px;
        line-height: 1.15;
    }

    .feature-card-content p{
        font-size: 16px;
        line-height: 1.8;
    }

    .theme-btn{
        font-size: 18px;
        padding: 14px 28px;
    }

}



/* ===================================
PRODUCT ANALYSIS SECTION
=================================== */

.product-analysis-section{
    padding: 50px 0 120px;
    background: #000917;
    position: relative;
    /* overflow: hidden; */
}

/* ===================================
BACKGROUND GLOW
=================================== */

.product-analysis-section::before{
    content: "";
    position: absolute;
    left: -350px;
    top: 50%;
    transform: translateY(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255,98,0,0.22) 0%, rgba(255,98,0,0) 70%);
    pointer-events: none;
    display: none;
}

.product-analysis-section::after{
    content: "";
    position: absolute;
    right: -250px;
    top: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0,87,255,0.18) 0%, rgba(0,87,255,0) 70%);
    pointer-events: none;
}

/* ===================================
LEFT CONTENT
=================================== */

.analysis-content{
    position: relative;
    z-index: 2;
}

/* ===================================
TOP HEADING
=================================== */

.analysis-top-heading{
    font-size: 52px;
    line-height: 1.12;
    font-weight: 600;
    margin-bottom: 20px;
    max-width: 720px;
    background: linear-gradient(90deg,#6D5B69 0%, #123D92 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.42px;
    opacity: .7;
}

/* ===================================
MAIN HEADING
=================================== */

.analysis-main-heading{
    font-size: 52px;
    line-height: 1.12;
    font-weight: 500;
    color: #FFFFFF;
    max-width: 690px;
    margin-bottom: 30px;
    letter-spacing: -0.42px;
    font-family: "Commissioner", sans-serif;
}

/* ===================================
CTA CARD
=================================== */

.analysis-cta-card{
    padding: 28px 20px;
    border-radius: 28px;
    position: relative;
    background: rgba(0, 10, 35, 0.65);
    overflow: hidden;
    width: max-content;
}

.analysis-cta-card::before{
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 28px;
    background: linear-gradient(90deg,#FF6200,#FFFFFF);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

.analysis-cta-card p{
    color: #9D9D9D;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 20px;
    font-family: "Commissioner", sans-serif;
    font-weight: 100;
    letter-spacing: -0.16px;
}

/* ===================================
BUTTON
=================================== */

.theme-btn{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 10px 18px 20px;
    border-radius: 100px;
    background: rgba(255,98,0,0.14);
    border: 1px solid #FF6200;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    transition: 0.3s ease;
    font-family: "Bricolage Grotesque", sans-serif;
}

.theme-btn span{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.theme-btn:hover{
    background: #FF6200;
    color: #FFFFFF;
}

/* ===================================
RIGHT VISUAL
=================================== */

.analysis-visual{
    position: relative;
    height: 100%;
    /* min-height: 700px; */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* ===================================
CURVE LINE
=================================== */

.curve-line{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.curve-line svg{
    width: 100%;
    height: auto;
}

.curve-line path{
    stroke: rgba(255,255,255,0.75);
    stroke-width: 2;
    fill: none;
}

/* ===================================
STATS
=================================== */

.analysis-stats{
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 0px;
}
.analysis-stats img{
    width: 100%;
}
.analysis-stats h2{
    font-size: 240px;
    line-height: 0.9;
    font-weight: 700;
    margin: 0;
    letter-spacing: -8px;
    color: transparent;
    -webkit-text-stroke: 2px #FF6200;
}

.analysis-stats p{
    color: #003D93;
    font-size: 40px;
    font-weight: 400;
    margin-top: 20px;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.32px;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 1399px){

    .analysis-top-heading{
        font-size: 58px;
    }

    .analysis-main-heading{
        font-size: 60px;
    }

    .analysis-stats h2{
        font-size: 180px;
    }

}

@media(max-width: 991px){

    .product-analysis-section{
        padding: 90px 0;
    }

    .analysis-top-heading{
        font-size: 44px;
        margin-bottom: 25px;
    }

    .analysis-main-heading{
        font-size: 46px;
        margin-bottom: 40px;
    }

    .analysis-cta-card{
        padding: 30px;
        margin-bottom: 60px;
    }

    .analysis-cta-card p{
        font-size: 22px;
    }

    .theme-btn{
        font-size: 20px;
        padding: 15px 24px;
    }

    .analysis-visual{
        min-height: auto;
    }

    .analysis-stats h2{
        font-size: 130px;
    }

    .analysis-stats p{
        font-size: 34px;
    }

}

@media(max-width: 767px){

    .analysis-top-heading{
        font-size: 34px;
    }

    .analysis-main-heading{
        font-size: 36px;
        line-height: 1.2;
    }

    .analysis-cta-card{
        padding: 24px;
        border-radius: 22px;
    }

    .analysis-cta-card p{
        font-size: 18px;
    }

    .theme-btn{
        font-size: 16px;
        padding: 13px 22px;
    }

    .analysis-stats h2{
        font-size: 90px;
        -webkit-text-stroke: 1px #FF6200;
    }

    .analysis-stats p{
        font-size: 24px;
    }

}



/* ===================================
FEATURE SHOWCASE SECTION
=================================== */

.feature-showcase-section{
    background: #000917;
    position: relative;
    overflow: hidden;
    padding-bottom: 70px;
}

/* ===================================
CARD
=================================== */

.feature-showcase-card{
    position: relative;
    height: 100%;
    background: #000917;
    /* border-right: 1px solid rgba(255,255,255,0.04); */
}

/* ===================================
IMAGE
=================================== */

.feature-showcase-image{
    position: relative;
    overflow: hidden;
}

.feature-showcase-image img{
    width: 100%;
    display: block;
}

/* ===================================
CONTENT
=================================== */

.feature-showcase-content{
    padding: 48px 42px 55px;
}

.feature-showcase-content h3{
    color: #FFFFFF;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 500;
    margin-bottom: 22px;
    letter-spacing: -0.24px;
    font-family: "Commissioner", sans-serif;
}

.feature-showcase-content p{
    color: #9D9D9D;
    font-size: 20px;
    line-height: 27px;
    font-weight: 400;
    margin: 0;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.16px;
    font-weight: 300;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 1399px){

    .feature-showcase-content{
        padding: 40px 35px 50px;
    }

    .feature-showcase-content h3{
        font-size: 44px;
    }

    .feature-showcase-content p{
        font-size: 20px;
    }

}

@media(max-width: 991px){

    .feature-showcase-card{
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .feature-showcase-content{
        padding: 35px 28px 45px;
    }

    .feature-showcase-content h3{
        font-size: 36px;
        margin-bottom: 18px;
    }

    .feature-showcase-content p{
        font-size: 18px;
        line-height: 1.8;
    }

}

@media(max-width: 767px){

    .feature-showcase-content{
        padding: 28px 22px 35px;
    }

    .feature-showcase-content h3{
        font-size: 28px;
        line-height: 1.2;
    }

    .feature-showcase-content p{
        font-size: 16px;
        line-height: 1.8;
    }

}





/* ===================================
PRODUCT PLATFORM SECTION
=================================== */

.product-platform-section{
    background: #000610;
    position: relative;
    /* overflow: hidden; */
    padding-bottom: 50px;
}

/* ===================================
TOP TABS
=================================== */

.platform-tabs-wrapper{
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.platform-tabs{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.platform-tab-btn{
    width: 14.33%;
    height: 120px;
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
    position: relative;
    transition: 0.3s ease;
}

.platform-tab-btn:last-child{
    border-right: 0;
}

.platform-tab-btn::before{
    content: "";
    position: absolute;
    width: stretch;
    height: 80px;
    border-radius: 100px;
    background: rgba(255,98,0,0.10);
    border: 1px solid #FF6200;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 0.3s ease;
    width: 100%;
}

.platform-tab-btn.active::before{
    opacity: 1;
}

.platform-tab-btn span{
    position: relative;
    z-index: 2;
}

/* ===================================
MAIN CARD
=================================== */

.platform-card{
    position: relative;
    overflow: hidden;
}

/* ===================================
IMAGE
=================================== */

.platform-image-wrapper{
    position: relative;
    z-index: 2;
    margin: -90px 0 0;
}

.platform-main-image{
    width: 100%;
    display: block;
}

/* ===================================
BIG TYPOGRAPHY
=================================== */

.platform-big-text{
    /* position: absolute; */
    left: 0;
    right: 0;
    bottom: 810px;
    z-index: 3;
    pointer-events: none;
    margin: 0 0 40px;
}

.platform-big-text h2{
    margin: 0;
    position: relative;
    text-align: center;
}

.platform-big-text .left-text{
    position: absolute;
    left: 30px;
    top: 0;
    font-size: 140px;
    font-weight: 700;
    line-height: 1;
    color: rgba(0,58,145,0.65);
    letter-spacing: -1.28px;
    font-family: "Commissioner", sans-serif;
}

.platform-big-text .right-text{
    position: absolute;
    right: 20px;
    top: 0;
    font-size: 140px;
    font-weight: 700;
    line-height: 1;
    color: rgba(0,58,145,0.65);
    letter-spacing: -1.28px;
    font-family: "Commissioner", sans-serif;
}

.platform-big-text .bottom-text{
    display: inline-block;
    font-size: 140px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: -1.28px;
    margin-top: 140px;
    font-family: "Commissioner", sans-serif;
}

/* ===================================
CONTENT
=================================== */

.platform-content{
    position: relative;
    z-index: 5;
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0 40px;
}

.platform-heading{
    font-size: 30px;
    line-height: 1.2;
    color: #FFFFFF;
    font-weight: 500;
    margin-bottom: 18px;
    letter-spacing: -0.24px;
    font-family: "Commissioner", sans-serif;
    display: inline-block;
    margin: 0 20px 0 0;
    display: block;
}

.platform-description{
    font-size: 22px;
    line-height: 1.7;
    color: #9D9D9D;
    margin-bottom: 18px;
    /* max-width: 670px; */
    letter-spacing: -0.18px;
    display: inline-block;
}

.platform-small-text{
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.45);
    max-width: 649px;
    margin-bottom: 30px;
    letter-spacing: -0.13px;
}

/* ===================================
BUTTON
=================================== */

.theme-btn{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    border-radius: 100px;
    border: 1px solid #FF6200;
    background: rgba(255,98,0,0.10);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: 0.3s ease;
}

.theme-btn span{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.theme-btn:hover{
    background: #FF6200;
    color: #FFFFFF;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 1600px){

    .platform-big-text .left-text,
    .platform-big-text .right-text{
        font-size: 130px;
    }

    .platform-big-text .bottom-text{
        font-size: 110px;
    }

}

@media(max-width: 1199px){

    .platform-big-text{
        bottom: 300px;
    }

    .platform-big-text .left-text,
    .platform-big-text .right-text{
        font-size: 90px;
    }

    .platform-big-text .bottom-text{
        font-size: 80px;
        margin-top: 80px;
    }

    .platform-heading{
        font-size: 42px;
    }

    .platform-description{
        font-size: 22px;
    }

}

@media(max-width: 991px){

    .platform-tabs{
        flex-direction: column;
    }

    .platform-tab-btn{
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .platform-big-text{
        position: relative;
        bottom: auto;
        margin-top: -100px;
        margin-bottom: 40px;
    }

    .platform-big-text .left-text,
    .platform-big-text .right-text{
        position: relative;
        display: block;
        left: auto;
        right: auto;
        font-size: 70px;
    }

    .platform-big-text .bottom-text{
        margin-top: 20px;
        font-size: 70px;
    }

    .platform-content{
        padding: 0 25px;
    }

    .platform-heading{
        font-size: 34px;
    }

    .platform-description{
        font-size: 18px;
    }

    .platform-small-text{
        font-size: 16px;
    }

}

@media(max-width: 767px){

    .platform-big-text .left-text,
    .platform-big-text .right-text{
        font-size: 48px;
    }

    .platform-big-text .bottom-text{
        font-size: 46px;
    }

    .platform-heading{
        font-size: 28px;
    }

}






/* ===================================
COMMON SECTION HEADING
=================================== */

.section-heading{
    margin-bottom: 20px;
}

.section-heading h2{
    font-size: 43px;
    line-height: 1.15;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 20px;
    letter-spacing: -0.34px;
    font-family: "Commissioner", sans-serif;
}

.section-heading p{
    font-size: 18px;
    line-height: 1.7;
    color: #9D9D9D;
    max-width: 1100px;
    margin: 0;
    letter-spacing: -0.14px;
    font-family: "Commissioner", sans-serif;
}

/* ===================================
DATA SOURCES SECTION
=================================== */

.data-sources-section{
    position: relative;
    /* overflow: hidden; */
    padding: 50px 1px;
    background: #000610;
}

.data-sources-section::before{
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, #155DFC 0%, rgba(0, 0, 0, 0) 70%);
    left: -350px;
    bottom: -650px;
    z-index: 1;
    opacity: 47%;
}

.data-sources-section::after{
    content: "";
    position: absolute;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, #FF5900 0%, rgba(0, 0, 0, 0) 70%);
    right: -600px;
    top: 40px;
    opacity: 47%;
    z-index: 1;
}

.data-source-card{
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border-radius: 28px;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 30px;
    position: relative;
    overflow: hidden;
    transition: 0.4s ease;
    z-index: 9;
}

.data-source-card:hover{
    transform: translateY(-6px);
}

.data-source-icon{
    margin-bottom: 20px;
}

.data-source-icon img{
    width: 60px;
}

.data-source-card h3{
    font-size: 26px;
    line-height: 1.3;
    color: #FFFFFF;
    font-weight: 300;
    text-align: center;
    margin: 0;
    font-family: "Commissioner", sans-serif;
}
.data-source-card p{text-align: center;    color: #8a8a8a;    margin: 10px 0 0;    font-size: 16px;    font-family: "Commissioner", sans-serif;    font-weight: 400;}


.mt-70{
    margin-top: 70px;
}

/* ===================================
CTA SECTION
=================================== */

.platform-cta-section{
    position: relative;
    background: #000610;
    padding: 50px 0;
    overflow: visible;
}

.platform-cta-box{
    border: 1px solid rgba(97,128,255,0.35);
    border-radius: 42px;
    overflow: hidden;
    padding: 90px 90px;
    position: relative;
    background: #000000;
    z-index: 0;
}

.platform-cta-box::before{
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0,72,255,0.10) 0%, rgba(0,0,0,0) 70%);
    left: -200px;
    bottom: -250px;
}

.platform-cta-content{
    position: relative;
    z-index: 3;
}

.platform-cta-content h2{
    font-size: 43px;
    line-height: 1.12;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 30px;
    letter-spacing: -0.34px;
    max-width: 720px;
    font-family: "Commissioner", sans-serif;
}

.platform-cta-content p{
    font-size: 18px;
    line-height: 1.7;
    color: #9D9D9D;
    max-width: 720px;
    margin-bottom: 42px;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.14px;
    font-weight: 300;
}

.platform-cta-image{
    position: relative;
    z-index: 3;
}

.platform-cta-image img{
    width: 100%;
    max-width: 380px;
}

/* ===================================
THEME BUTTON
=================================== */

.theme-btn{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 30px;
    border-radius: 100px;
    border: 1px solid #FF6200;
    background: rgba(255,98,0,0.12);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s ease;
}

.theme-btn span{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.theme-btn:hover{
    background: #FF6200;
    color: #FFFFFF;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 1399px){

    .section-heading h2{
        font-size: 52px;
    }

    .platform-cta-content h2{
        font-size: 56px;
    }

}

@media(max-width: 1199px){

    .section-heading h2{
        font-size: 46px;
    }

    .section-heading p{
        font-size: 20px;
    }

    .data-source-card{
        min-height: 260px;
    }

    .data-source-card h3{
        font-size: 28px;
    }

    .platform-cta-box{
        padding: 70px 60px;
    }

    .platform-cta-content h2{
        font-size: 48px;
    }

    .platform-cta-content p{
        font-size: 20px;
    }

}

@media(max-width: 991px){

    .data-sources-section{
        padding: 100px 0;
    }

    .section-heading{
        text-align: center;
    }

    .section-heading h2{
        font-size: 40px;
    }

    .section-heading p{
        font-size: 18px;
        margin: auto;
    }

    .platform-cta-box{
        padding: 60px 40px;
    }

    .platform-cta-content{
        text-align: center;
        margin-bottom: 60px;
    }

    .platform-cta-content h2{
        max-width: 100%;
        font-size: 42px;
    }

    .platform-cta-content p{
        max-width: 100%;
    }

}

@media(max-width: 767px){

    .section-heading h2{
        font-size: 34px;
    }

    .data-source-card{
        min-height: 220px;
    }

    .data-source-icon{
        width: 100px;
        height: 100px;
    }

    .data-source-icon img{
        width: 50px;
    }

    .data-source-card h3{
        font-size: 24px;
    }

    .platform-cta-box{
        border-radius: 28px;
        padding: 50px 24px;
    }

    .platform-cta-content h2{
        font-size: 34px;
    }

    .platform-cta-content p{
        font-size: 17px;
    }

    .theme-btn{
        font-size: 16px;
        padding: 15px 24px;
    }

}







/* ===================================
TESTIMONIAL SECTION
=================================== */

.testimonial-section{
    position: relative;
    /* overflow: hidden; */
    padding: 50px 0;
    background: #000610;
}

.testimonial-section::before{
    content: "";
    position: absolute;
    width: 850px;
    height: 850px;
    background: radial-gradient(circle, rgba(0,72,255,0.18) 0%, rgba(0,0,0,0) 70%);
    left: -280px;
    top: -150px;
    display: none;
}

.testimonial-section::after{
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255,98,0,0.10) 0%, rgba(0,0,0,0) 70%);
    right: -200px;
    bottom: -150px;
}

.testimonial-top-content p{
    font-size: 18px;
    line-height: 1.7;
    color: #9D9D9D;
    margin: 0;
    letter-spacing: -0.14px;
    font-family: "Commissioner", sans-serif;
}

/* ===================================
TESTIMONIAL CARD
=================================== */

.testimonial-card{
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border-radius: 30px;
    padding: 34px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.4s ease;
    position: relative;
    overflow: hidden;
}

.testimonial-card:hover{
    transform: translateY(-6px);
}

.testimonial-user{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.testimonial-user-image img{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-user-info h4{
    font-size: 18px;
    line-height: 1.2;
    color: #FFFFFF;
    font-weight: 400;
    margin-bottom: 0px;
    letter-spacing: -0.14px;
    font-family: "Commissioner", sans-serif;
}

.testimonial-user-info span{
    font-size: 14px;
    color: #9D9D9D;
}

.testimonial-card p{
    letter-spacing: -0.14px;
    font-size: 18px;
    line-height: 24px;
    color: rgba(255,255,255,0.82);
    margin-bottom: 35px;
    font-family: "Commissioner", sans-serif;
    font-weight: 200;
}

/* ===================================
BUTTON INSIDE CARD
=================================== */

.testimonial-btn{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-radius: 100px;
    border: 1px solid #FF6200;
    background: rgba(255,98,0,0.12);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    transition: 0.3s ease;
    width: fit-content;
}

.testimonial-btn span{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.testimonial-btn:hover{
    background: #FF6200;
    color: #FFFFFF;
}

/* ===================================
VIDEO CARD
=================================== */

.testimonial-video-card{
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    height: 60%;
    min-height: 560px;
}

.testimonial-video-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-video-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.10) 45%,
    rgba(0,0,0,0) 100%);
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 34px;
}

.testimonial-video-content h4{font-size: 18px;line-height: 1.2;color: #FFFFFF;font-weight: 400;margin-bottom: 5px;letter-spacing: -0.14px;font-family: "Commissioner", sans-serif;}

.testimonial-video-content p{font-size: 14px;color: #9D9D9D;}

.video-play-btn{
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 24px;
    text-decoration: none;
    transition: 0.3s ease;
}

.video-play-btn:hover{
    background: #FF6200;
    color: #FFFFFF;
}

.mt-80{
    margin-top: 80px;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width: 1399px){

    .testimonial-user-info h4{
        font-size: 24px;
    }

    .testimonial-card p{
        font-size: 20px;
    }

}

@media(max-width: 1199px){

    .testimonial-section{
        padding: 100px 0;
    }

    .testimonial-video-card{
        min-height: 600px;
    }

}

@media(max-width: 991px){

    .testimonial-top-content{
        margin-top: 30px;
    }

    .testimonial-video-card{
        min-height: 500px;
    }

}

@media(max-width: 767px){

    .testimonial-card{
        padding: 26px;
        min-height: auto;
    }

    .testimonial-user-info h4{
        font-size: 22px;
    }

    .testimonial-card p{
        font-size: 18px;
    }

    .testimonial-btn{
        font-size: 15px;
    }

    .testimonial-video-content h4{
        font-size: 26px;
    }

    .video-play-btn{
        width: 65px;
        height: 65px;
        font-size: 18px;
    }

}








/* =========================================
FEATURES SECTION
========================================= */

.features-accordion-section{
    position: relative;
    /* overflow: hidden; */
    padding: 50px 0;
    background: #000610;
}

/* BACKGROUND GLOW */

.features-accordion-section::before{
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    left: -250px;
    top: -250px;
    background: radial-gradient(circle, rgba(12,74,255,0.18) 0%, rgba(0,0,0,0) 70%);
    z-index: 0;
}

.features-accordion-section::after{
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    right: -250px;
    bottom: -200px;
    background: radial-gradient(circle, rgba(255,98,0,0.12) 0%, rgba(0,0,0,0) 70%);
    display: none;
}

/* =========================================
SECTION TITLE
========================================= */

.section-title-wrapper{
    margin-bottom: 70px;
}

.section-title{
    color: #3A517B;
    font-size: 43px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    letter-spacing: -0.34px;
    font-family: "Commissioner", sans-serif;
}

/* =========================================
ACCORDION WRAPPER
========================================= */

.features-accordion-wrapper{
    display: flex;
    align-items: stretch;
    gap: 20px;
    min-height: auto;
}

/* =========================================
TABS
========================================= */

.feature-tab{
    position: relative;
    border-radius: 34px;
    border: 1px solid rgba(53,94,180,0.45);
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border: 1.5px solid rgb(93 131 197 / 35%);
    overflow: hidden;
    transition: all 0.45s ease;
}

/* ACTIVE */

.feature-tab.active{
    width: 100%;
    max-width: 1080px;
    padding: 48px;
}

.feature-tab.active .collapsed-title{display:none;}
/* COLLAPSED */

.feature-tab.collapsed{
    width: 86px;
    min-width: 86px;
    cursor: pointer;
    background: #000917;
}

/* =========================================
COLLAPSED TITLE
========================================= */

.collapsed-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    writing-mode: vertical-rl;
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    white-space: nowrap;
}

/* =========================================
CONTENT
========================================= */

.feature-tab-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    height: 100%;
    flex-direction: column;
}

.feature-left-content{
    /* width: 100%; */
}


.feature-left-content h3{
    color: #ff6200;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: -0.24px;
    font-family: "Commissioner", sans-serif;
}
.feature-left-content h4{
    color: #FFFFFF;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: -0.24px;
    font-family: "Commissioner", sans-serif;
}
.feature-left-content p{
    letter-spacing: -0.14px;
    font-size: 18px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 10px;
    font-family: "Commissioner", sans-serif;
    font-weight: 400;
}

/* =========================================
LINKS
========================================= */

.feature-links-wrapper{
    display: flex;
    gap: 0px;
}

.feature-links-wrapper ul{
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
}

.feature-links-wrapper li{
    margin-bottom: 0px;
    /* display: inline-flex; */
    align-items: center;
    /* gap: 16px; */
    color: rgba(255,255,255,0.90);
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    transition: 0.3s ease;
    letter-spacing: -0.18px;
}

.feature-links-wrapper li span{
    display: block;
    color: #9D9D9D;
    font-size: 18px;
    font-weight: 400;
    width: 80%;
}

.feature-links-wrapper li:last-child{
    margin-bottom: 0;
}

.feature-links-wrapper a span{
    color: #0D63FF;
    font-size: 34px;
}

/* =========================================
IMAGE
========================================= */

.feature-right-image{
    width: 100%;
}

.feature-right-image img{
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

/* HIDE CONTENT IN COLLAPSED */

.feature-tab.collapsed .feature-tab-content{
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}
.hero-blur.hero-blur-left.lf-1 {
    z-index: 1;
    left: auto;
    right: -64px;
    top: auto;
    bottom: -140px;
}
.hero-blur.hero-blur-right.lf-2 {
    left: 0;
    z-index: 1;
    top: auto;
    bottom: -140px;
}

   /* SECTION */
      .pricing-section {
       padding: 80px 0px 80px;
    background: #000610;
    min-height: 100vh;
        position: relative;
    /* Clips the decorative blur. .hero-blur-left.lf-1 above sets right:-64px,
       deliberately hanging 64px past this section's right edge, and this was
       the only .hero-blur on the site with no clipping ancestor — so it pushed
       the document 64px wider than the viewport on every desktop width.
       .hero-section has carried `overflow:hidden` for the same reason since
       the blurs were introduced; this section was simply missed.
       Not visible to users, because body{overflow-x:hidden} was swallowing it,
       but that is a blunt global guard and this fixes the cause instead. */
    overflow: hidden;
      }

      .container {
        max-width: 1280px;
        margin: auto;
      }
    .card-crd:last-child {
    border: none;
    padding-right: 0;
}
      /* TOP */
      .title-crd {
          text-align: center;
        font-family: "Commissioner", sans-serif;
        font-size: 52px;
        line-height: 1;
        color: #f5f2ea;
        margin-bottom: 50px;
      }

      .switch-crd-wrapper {
        display: flex;
        justify-content: center;
        margin-bottom: 55px;
      }

      .switch-crd {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .switch-crd button {
        border: none;
        background: transparent;
        color: #b8b6b2;
        font-size: 14px;
        cursor: pointer;
        padding: 10px 18px;
        border-radius: 12px;
        transition: 0.3s;
      }

      .switch-crd button.active {
        background: #2f2f2f;
        color: #fff;
      }

      /* GRID */
      .pricing-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 26px;
        background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border: 1.5px solid rgb(93 131 197 / 35%);
    border-radius: 30px;
    padding: 34px 28px;
    min-height: 670px;
    flex-direction: column;
    transition: 0.35s ease;
    position: relative;
    overflow: hidden;
    z-index:2;
      }
.card-crd .hero-btn {
    width: 100%;
    margin-bottom: 15px;
}
  .icon img {
    width: auto;
    height: 35px;
}
  
      /* CARD-crd */
      .card-crd {
           border-right: 1px solid #ffffff3d;
    padding-right: 25px;
    position: relative;
      }

      /*.card-crd:hover {*/
      /*  transform: translateY(-6px);*/
      /*  box-shadow:*/
      /*    0 0 0 1px rgba(91, 123, 164, 0.08),*/
      /*    0 30px 80px rgba(0, 0, 0, 0.55);*/
      /*}*/

      /*.card-crd::before {*/
      /*  content: "";*/
      /*  position: absolute;*/
      /*  inset: 0;*/
      /*  border-radius: 30px;*/
      /*  background: linear-gradient(*/
      /*    to bottom,*/
      /*    rgba(255, 255, 255, 0.02),*/
      /*    transparent 20%*/
      /*  );*/
      /*  pointer-events: none;*/
      /*}*/

      /* ICON-crd */
      .icon-crd {
        width: 44px;
        margin-bottom: 24px;
      }

      /* TITLE-crd */
      .plan-name {
font-family: "Commissioner", sans-serif;
    font-size: 28px;
    line-height: 1.2;
    color: #faf6ed;
    margin-bottom: 10px;
      }

      .plan-subtitle-crd {
    font-size: 15px;
    font-weight: 400;
    color: #b0aba3;
    margin-bottom: 14px;
      }

      /* PRICE */
      .price {
        font-size: 42px;
        font-weight: 600;
        color: #ffffff;
            margin-bottom: 10px;
            font-family: "Commissioner", sans-serif;
        /*position: absolute;*/
        /*right: 30px;*/
        /*top: 0;*/
      }

      .price small {
         font-size: 16px;
        color: #b7b2ab;
        font-weight: 400;
        text-transform: capitalize;
      }

      .billing {
        font-size: 14px;
        color: #b0aba3;
        line-height: 1.8;
        margin-bottom: 18px;
      }

      .description {
        font-size: 12px;
        line-height: 1.7;
        color: #b8b4ae;
        margin-bottom: 10px;
        text-align: center;
      }

      /* BUTTON */
      .btn-crd {
        width: 100%;
        height: 52px;
        border: none;
        border-radius: 12px;
        background:#ffffff;
        color: #000000;
        font-size: 18px;
        cursor: pointer;
        transition: 0.25s;
        margin-bottom: 14px;
        font-weight: 600;
      }

      .btn-crd:hover {
        background: #ffffff;
      }

      .note-crd {
        text-align: center;
        color: #99948d;
        font-size: 12px;
        margin-bottom: 22px;
      }

      /* DIVIDER-crd */
      .divider-crd {
        height: 1px;
        background: #ffffff3d;
        margin-bottom: 22px;
      }

      /* CONTENT */
      .section-name {
         font-size: 18px;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 14px;
      }

      .category-crd {
        color: #ffffff;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 12px;
      }

      .feature-list {
    list-style: none;
    margin-bottom: 24px;
    padding-left: 0px;
      }

      .feature-list li {
        position: relative;
        padding-left: 22px;
        color: #ece7de;
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 6px;
      }

      .feature-list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        color: #f1eee8;
        font-size: 13px;
      }

      /* RESPONSIVE */
      @media (max-width: 1200px) {
        .pricing-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 768px) {
        .title-crd {
          font-size: 40px;
        }

        .pricing-grid {
          grid-template-columns: 1fr;
        }

        .card-crd {
          min-height: auto;
        }

        .plan-name {
          font-size: 38px;
        }

        .price {
          font-size: 36px;
        }
      }


/* =========================================
RESPONSIVE
========================================= */

@media(max-width: 1399px){

    .feature-left-content h3{
        font-size: 46px;
    }

    .feature-links-wrapper a{
        font-size: 24px;
    }

}

@media(max-width: 1199px){

    .features-accordion-wrapper{
        flex-direction: column;
    }

    .feature-tab.active{
        max-width: 100%;
    }

    .feature-tab.collapsed{
        width: 100%;
        min-width: 100%;
        height: 80px;
    }

    .collapsed-title{
        writing-mode: initial;
        transform: translate(-50%, -50%);
    }

    .feature-tab-content{
        flex-direction: column;
    }

    .feature-left-content{
        width: 100%;
    }

    .feature-right-image{
        width: 100%;
    }

}

@media(max-width: 767px){

    .features-accordion-section{
        padding: 100px 0;
    }

    .section-title{
        font-size: 52px;
    }

    .feature-tab.active{
        padding: 30px;
    }

    .feature-left-content h3{
        font-size: 34px;
        margin-bottom: 40px;
    }

    .feature-links-wrapper{
        flex-direction: column;
        gap: 25px;
    }

    .feature-links-wrapper a{
        font-size: 20px;
    }

}





/* =========================================
GLOBAL NETWORK SECTION
========================================= */

.global-network-section{
    position: relative;
    /* overflow: hidden; */
    padding: 50px 0 0;
    background: #000610;
}

/* LEFT BLUE GLOW */

.global-network-section::before{
    content: "";
    position: absolute;
    width: 750px;
    height: 750px;
    left: -250px;
    top: 200px;
    background: radial-gradient(circle, rgba(14,75,255,0.18) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    display: none;
}

/* RIGHT ORANGE GLOW */

.global-network-section::after{
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    right: -480px;
    top: -300px;
    background: radial-gradient(circle, #FF5900 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    opacity: 33%;
    z-index: 1;
}

/* =========================================
HEADING
========================================= */

.global-network-heading{
    margin-bottom: 80px;
}

.global-network-heading h2{
    color: #FFFFFF;
    font-size: 52px;
    line-height: 1.08;
    font-weight: 300;
    margin-bottom: 24px;
    letter-spacing: -0.42px;
    font-family: "Commissioner", sans-serif;
}

.global-network-heading p{
    max-width: 850px;
    margin: 0 auto;
    color: #9D9D9D;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.14px;
    font-family: "Commissioner", sans-serif;
}

/* =========================================
MAP IMAGE
========================================= */

.global-network-map{
    position: relative;
    text-align: center;
}

.global-network-map img{
    width: 100%;
    max-width: 1450px;
    object-fit: contain;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width: 1399px){

    .global-network-heading h2{
        font-size: 58px;
    }

}

@media(max-width: 991px){

    .global-network-section{
        padding: 100px 0 80px;
    }

    .global-network-heading{
        margin-bottom: 60px;
    }

    .global-network-heading h2{
        font-size: 46px;
    }

    .global-network-heading p{
        font-size: 18px;
    }

}

@media(max-width: 767px){

    .global-network-heading h2{
        font-size: 34px;
        line-height: 1.2;
    }

    .global-network-heading p{
        font-size: 16px;
    }

}







/* =========================================
CTA SECTION
========================================= */

.cta-section{
    position: relative;
    overflow: hidden;
    padding: 0px 0;
    background: #000610;
}

/* =========================================
CTA BOX
========================================= */

.cta-box{
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: 300px 0px;
    background:
        linear-gradient(
            90deg,
            rgba(255,94,0,0.22) 0%,
            rgba(4,11,29,0.92) 34%,
            rgba(13,74,255,0.26) 100%
        );
    background-image: url(../images/bottom-cta.webp);
    background-size: cover;
    background-position: center, center;
    padding-bottom: 50px;
    display: flex;
    align-content: flex-end;
    flex-wrap: wrap;
}

/* =========================================
BACKGROUND LOGO
========================================= */

/* =========================================
CONTENT
========================================= */

.cta-content{
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

.cta-content h2{
    color: #FFFFFF;
    font-size: 43px;
    line-height: 1.05;
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: -0.34px;
    font-family: "Commissioner", sans-serif;
}

.cta-content p{
    max-width: 760px;
    margin: 0 auto 40px;
    color: rgba(255,255,255,0.48);
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.14px;
    font-family: "Commissioner", sans-serif;
}

/* =========================================
BUTTON
========================================= */

.theme-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 66px;
    padding: 0 34px;
    border-radius: 100px;
    border: 2px solid #B44B00;
    background: rgba(63,22,0,0.65);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;
    transition: all 0.35s ease;
}

.theme-btn span{
    font-size: 24px;
    transition: transform 0.35s ease;
}

.theme-btn:hover{
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(255,94,0,0.18);
}

.theme-btn:hover span{
    transform: translateX(4px);
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width: 1399px){

    .cta-content h2{
        font-size: 62px;
    }

}

@media(max-width: 991px){

    .cta-section{
        padding: 100px 0;
    }

    .cta-box{
        padding: 120px 30px;
    }

    .cta-content h2{
        font-size: 50px;
    }

    .cta-content p{
        font-size: 18px;
    }

}

@media(max-width: 767px){

    .cta-box{
        border-radius: 26px;
        padding: 90px 24px;
    }

    .cta-content h2{
        font-size: 38px;
        line-height: 1.15;
    }

    .cta-content p{
        font-size: 16px;
        margin-bottom: 30px;
    }

    .theme-btn{
        height: 56px;
        padding: 0 24px;
        font-size: 16px;
    }

}





/* =========================================
CONTACT FORM SECTION
========================================= */

.contact-form-section{
    position: relative;
    overflow: hidden;
    padding: 150px 0;
    background: #000610;
}

/* LEFT BLUE GLOW */

.contact-form-section::before{
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    left: -250px;
    top: 150px;
    background: radial-gradient(circle, rgba(10,71,255,0.20) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    display: none;
}

/* BOTTOM ORANGE GLOW */

.contact-form-section::after{
    content: "";
    position: absolute;
    width: 1500px;
    height: 1100px;
    left: 50%;
    bottom: -400px;
    transform: translateX(-50%);
    background: radial-gradient(circle, #FF5900 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    opacity: 47%;
}

/* =========================================
SECTION TITLE
========================================= */

.contact-section-title{
    margin-bottom: 70px;
}

.contact-section-title h1, .contact-section-title h2{
    color: #FFFFFF;
    font-size: 43px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.34px;
    margin: 0;
    font-family: "Commissioner", sans-serif;
}

/* =========================================
CARDS
========================================= */

.contact-info-card,
.contact-form-wrapper{
    position: relative;
    height: 100%;
    border-radius: 34px;
    border: 1px solid rgba(47,88,179,0.45);
    background: rgba(2,12,30,0.92);
}

/* LEFT CARD */

.contact-info-card{
    min-height: 100%;
    padding: 42px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* RIGHT FORM */

.contact-form-wrapper{
    padding: 42px 34px;
}

/* =========================================
HEADINGS
========================================= */

.contact-info-card h3,
.contact-form-heading h3{
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: -0.18px;
    font-family: "Commissioner", sans-serif;
}

.contact-form-heading{
    margin-bottom: 34px;
}

.contact-form-heading p{
    color: #9D9D9D;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
LIST
========================================= */

.contact-info-card ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.contact-info-card ul li{
    position: relative;
    color: #9D9D9D;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 18px;
    padding-left: 22px;
    letter-spacing: 0.12px;
}

.contact-info-card ul li:last-child{
    margin-bottom: 0;
}

.contact-info-card ul li::before{
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0B63FF;
    left: 0px;
    top: 10px;
}

/* =========================================
FORM
========================================= */

.form-group{
    position: relative;
    z-index: 9;
}

.form-group input,
.form-group textarea{
    width: 100%;
    border: 1px solid rgba(16,43,101,0.70);
    background: rgba(1,10,25,0.95);
    border-radius: 18px;
    outline: none;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.form-group input{
    height: 72px;
    padding: 0 24px;
}

.form-group textarea{
    height: 220px;
    resize: none;
    padding: 24px;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color: rgba(255,255,255,0.38);
}

.form-group input:focus,
.form-group textarea:focus{
    border-color: rgba(255,94,0,0.65);
}

/* =========================================
BUTTON
========================================= */

.theme-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: auto;
    padding: 8px 20px;
    border-radius: 100px;
    background: rgba(61,21,0,0.72);
    border: 2px solid #B84D00;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 300;
    text-decoration: none;
    transition: all 0.35s ease;
    /* z-index: 9; */
}

.theme-btn span{
    font-size: 20px;
    transition: 0.3s ease;
}

.theme-btn:hover{
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(255,94,0,0.16);
}

.theme-btn:hover span{
    transform: translateX(4px);
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width: 1399px){

    .contact-section-title h1, .contact-section-title h2{
        font-size: 58px;
    }

    .contact-info-card h3,
    .contact-form-heading h3{
        font-size: 34px;
    }

}

@media(max-width: 991px){

    .contact-form-section{
        padding: 100px 0;
    }

    .contact-section-title{
        margin-bottom: 50px;
    }

    .contact-section-title h1, .contact-section-title h2{
        font-size: 46px;
    }

}

@media(max-width: 767px){

    .contact-section-title h1, .contact-section-title h2{
        font-size: 34px;
        line-height: 1.2;
    }

    .contact-info-card,
    .contact-form-wrapper{
        padding: 28px 22px;
        border-radius: 24px;
    }

    .contact-info-card h3,
    .contact-form-heading h3{
        font-size: 28px;
    }

    .form-group input{
        height: 60px;
        font-size: 16px;
    }

    .form-group textarea{
        height: 180px;
        font-size: 16px;
    }

    .theme-btn{
        height: 56px;
        font-size: 16px;
        padding: 0 26px;
    }

}









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

.main-footer{
    position: relative;
    overflow: hidden;
    padding-top: 90px;
    background: #000610;
}

/* TOP BORDER */

.main-footer::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(255,94,0,0.75),
        rgba(0,77,255,0.75)
    );
    display: none;
}

/* =========================================
TOP AREA
========================================= */

.footer-top{
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* LOGO */

.footer-logo img{
    max-width: 220px;
}

/* SOCIAL */

.footer-social{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    /* The TrustBox is a flex sibling of the icon row. Allow wrapping so a wide widget
       drops to its own line instead of squeezing the icons off the container edge. */
    flex-wrap: wrap;
}

/* The TrustBox ships data-style-width="100%", so it needs an explicit width — an
   auto-width flex item collapses to the tiny fallback link before Trustpilot's script
   runs, and the widget then never sizes itself at all.

   280px is measured, not guessed. Trustpilot's Review Collector reflows "Review us on
   Trustpilot" onto two lines below roughly this width; 200px and 240px both still wrap
   (verified in Chrome). Don't reduce it without re-checking in a browser — the widget is
   a cross-origin iframe, so its wrap point can't be read from the DOM.

   This is also why .footer-top is col-lg-4 / col-lg-8 rather than 6/6: the icon row is
   378px and the old 6/6 split left only ~624px usable, so 280 + 16 + 378 = 674 overflowed
   and wrapped the row. The logo needs 199px, so the 4/8 split costs nothing. */
/* Trustpilot review CTA — a real element, so it aligns with the icon row by construction.
   Deliberately NOT the TrustBox iframe: that widget only picks its single-line layout at
   ~280px, then draws a ~186px button centred inside it, and the centring happens inside a
   cross-origin iframe where no CSS of ours can reach it. Matching it to the icons needed
   an !important override of Trustpilot's inline width plus a hard-coded -47px offset —
   undetectable if it ever drifted, because the iframe can't be measured from the DOM.
   Since the Review Collector renders no dynamic data (no score, no count), the iframe
   bought nothing. Height and radius track the icon circles so the row stays flush. */
.trustpilot-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;                 /* same as .footer-social-icons a */
    padding: 0 16px;
    border-radius: 21px;
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    color: #C7CEDB;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    flex: 0 0 auto;
    will-change: transform;
    transition: background-color .28s ease, color .28s ease,
                box-shadow .28s ease, transform .28s ease;
}

.trustpilot-cta-star{
    flex: 0 0 auto;
    display: block;
    /* Green by default as the brand cue; turns white on hover so it stays visible against
       the green fill. Driven by `color` because the path uses fill="currentColor". */
    color: #00B67A;
    transition: color .28s ease;
}

.trustpilot-cta:hover,
.trustpilot-cta:focus-visible{
    background: #00B67A;          /* Trustpilot green, matching the icons' brand-on-hover rule */
    color: #FFFFFF;
    box-shadow: none;
    transform: translateY(-3px);
}

.trustpilot-cta:hover .trustpilot-cta-star,
.trustpilot-cta:focus-visible .trustpilot-cta-star{
    color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce){
    .trustpilot-cta{ transition: background-color .28s ease, color .28s ease, box-shadow .28s ease; }
    .trustpilot-cta:hover,
    .trustpilot-cta:focus-visible{ transform: none; }
}

.footer-social-icons{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    /* Never shrink below the icons' natural size: squeezing is what pushed them out of
       line with the divider above. */
    flex: 0 0 auto;
}

.footer-social-icons a{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    /* Dull by default so the icons read as secondary and colour means "you're on it". */
    background: rgba(255,255,255,0.08);
    color: #8A94A6;
    /* The ring is an inset shadow, NOT a border. With `border` the default
       background-clip:border-box paints the gradient underneath the border ring, and on
       hover that ring goes transparent — which leaves a rough seam where the gradient
       meets the rounded edge. An inset shadow has no border box to seam against, so the
       background fills the full circle and the edge stays clean. It also keeps the box
       exactly 42px without depending on box-sizing. */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    text-decoration: none;
    /* Promote up front. The hover applies a transform, which moves the element onto a GPU
       layer mid-transition; letting Chrome decide that late is what makes a rounded
       gradient edge re-rasterise and look ragged. */
    will-change: transform;
    transition: background-color .28s ease, color .28s ease,
                box-shadow .28s ease, transform .28s ease;
}

/* Hover/focus lights the circle in each network's own brand colour.
   Matched on href so no per-network class is needed in the markup, and :focus-visible is
   included so keyboard users get the same affordance as the mouse. */
.footer-social-icons a:hover,
.footer-social-icons a:focus-visible{
    color: #FFFFFF;
    box-shadow: none;
    transform: translateY(-3px);
}

.footer-social-icons a[href*="facebook.com"]:hover,
.footer-social-icons a[href*="facebook.com"]:focus-visible{ background: #1877F2; }

.footer-social-icons a[href*="tiktok.com"]:hover,
.footer-social-icons a[href*="tiktok.com"]:focus-visible{ background: #010101; box-shadow: inset 0 0 0 1px #FE2C55; }

.footer-social-icons a[href*="x.com"]:hover,
.footer-social-icons a[href*="x.com"]:focus-visible{ background: #000000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

.footer-social-icons a[href*="youtube.com"]:hover,
.footer-social-icons a[href*="youtube.com"]:focus-visible{ background: #FF0000; }

.footer-social-icons a[href*="linkedin.com"]:hover,
.footer-social-icons a[href*="linkedin.com"]:focus-visible{ background: #0A66C2; }

.footer-social-icons a[href*="pinterest.com"]:hover,
.footer-social-icons a[href*="pinterest.com"]:focus-visible{ background: #BD081C; }

/* Instagram has no single brand colour, so it gets its gradient.
   A linear ramp, NOT the familiar radial `circle at 30% 107%` one: that gradient is built
   for a large rounded-square app icon, where its pale #FDF497 core sits out in the corner.
   On a 42px circle the core lands inside the visible area and reads as a washed-out light
   blotch at the bottom-left rather than part of a smooth ramp. The diagonal keeps the
   brand sequence (warm → magenta → violet → blue) and stays clean at this size. */
.footer-social-icons a[href*="instagram.com"]:hover,
.footer-social-icons a[href*="instagram.com"]:focus-visible{
    background: linear-gradient(45deg,
                #F58529 0%, #DD2A7B 45%, #8134AF 72%, #515BD4 100%);
}

/* Respect a reduced-motion preference: keep the colour change, drop the lift. */
@media (prefers-reduced-motion: reduce){
    .footer-social-icons a{ transition: background-color .28s ease, color .28s ease, box-shadow .28s ease; }
    .footer-social-icons a:hover,
    .footer-social-icons a:focus-visible{ transform: none; }
}

/* =========================================
MIDDLE AREA
========================================= */

.footer-middle{
    padding: 70px 0 80px;
}

/* ABOUT */

.footer-about{
    max-width: 360px;
}

.footer-about p{
    color: #A8B0BF;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    font-family: "Commissioner", sans-serif;
}

/* WIDGET */

.footer-widget h4{
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 32px;
    font-family: "Commissioner", sans-serif;
}

/* LINKS */

.footer-widget ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-widget ul li{
    margin-bottom: 10px;
}

.footer-widget ul li:last-child{
    margin-bottom: 0;
}

.footer-widget ul li a{
    color: rgba(255,255,255,0.46);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: "Commissioner", sans-serif;
}

.footer-widget ul li a:hover{
    color: #FF5E00;
    padding-left: 4px;
}

/* =========================================
BOTTOM AREA
========================================= */

.footer-bottom{
    padding: 34px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
}

/* POLICY */

.footer-policy{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-policy a,
.footer-policy span{
    color: rgba(255,255,255,0.42);
    font-size: 14px;
    text-decoration: none;
    font-family: "Bricolage Grotesque", sans-serif;
}

.footer-policy a:hover{
    color: #FF5E00;
}

/* COPYRIGHT */

.footer-copyright{
    text-align: center;
}

.footer-copyright p{
    margin: 0;
    color: rgba(255,255,255,0.40);
    font-size: 14px;
    line-height: 1.7;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 300;
}

.brand-highlight{
    color: #FF5E00;
    font-weight: 500;
}

/* CREDIT */

.footer-credit{
    text-align: right;
}

.footer-credit p{
    margin: 0;
    color: rgba(255,255,255,0.40);
    font-size: 14px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 300;
}

.footer-credit a{
    color: #FF5E00;
    font-weight: 700;
    text-decoration: none;
}






/* ==========================================
LANDING STRATEGY SECTION
========================================== */

.landing-strategy-section{
    padding: 50px 0;
    background: #000917;
    position: relative;
    overflow: hidden;
}

.landing-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
    margin-bottom: 40px;
}

.landing-heading{
    max-width: 850px;
}

.landing-heading h2{
font-size: 52px;
    line-height: 1.12;
    font-weight: 500;
    color: #FFFFFF;
    max-width: 690px;
    margin-bottom: 30px;
    letter-spacing: -0.42px;
    font-family: "Commissioner", sans-serif;
}

.landing-heading p{
    max-width: 760px;
    color: #9D9D9D;
    font-size: 20px;
    line-height: 27px;
    font-weight: 400;
    margin: 0;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.16px;
    font-weight: 300;
}

.landing-btn-wrap{
    flex-shrink: 0;
}

.landing-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 35px;
}

.landing-card{
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border: 1.5px solid rgb(93 131 197 / 35%);
    border-radius: 34px;
    padding: 35px;
    transition: .4s ease;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.landing-card:hover{
    transform: translateY(-8px);
}

.landing-icon{
}
.tb-bl-sc {
    margin-top: 35px;
}
.landing-icon img{
    width: 60px;
    margin: 0 0 30px;
}

.landing-card h3{
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
    margin-bottom: 22px;
    letter-spacing: -0.24px;
    font-family: "Commissioner", sans-serif;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-card p{
color: #9D9D9D;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    margin: 0;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.16px;
    font-weight: 300;
    /*display: -webkit-box;*/
    /*-webkit-box-orient: vertical;*/
    /*-webkit-line-clamp: 2;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
}
/* ==========================================
BETTER SHOWCASE HERO
========================================== */

.lp-showcase-section{
    /* Was 190px, sized for the announcement bar; 150px is what the bar's own
       'closed' state already used. Restore 190px if the bar comes back. */
    padding: 150px 0 50px;
    background: #000917;
    position: relative;
    overflow: hidden;
}

section.lp-showcase-section .hero-blur {
    z-index: 9;
}

/* Glow BG */

.lp-showcase-section::before{
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(255,208,0,0.12) 0%, transparent 70%);
    top: -300px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Top Content */

.lp-showcase-top{
    text-align: center;
    max-width: 950px;
    margin: auto;
    position: relative;
    z-index: 2;
}

.section-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 100px;
    border: 1px solid rgba(255,208,0,0.25);
    background: rgba(255,208,0,0.08);
    color: #FF6200;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 35px;
    backdrop-filter: blur(10px);
}

.lp-showcase-top h1{
    /* font-size: 82px; */
    /* line-height: 1.05; */
    /* color: #fff; */
    /* font-weight: 700; */
    /* letter-spacing: -3px; */
    /* margin-bottom: 30px; */
    margin: 0;
}

.lp-showcase-top p{
    /* max-width: 760px; */
    /* margin: auto; */
    /* font-size: 21px; */
    /* line-height: 1.8; */
    /* color: rgba(255,255,255,0.7); */
    width: 80%;
    margin: 20px auto 0;
}

/* Buttons */

.lp-showcase-btns{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 45px;
}

.secondary-btn{
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff !important;
}

.secondary-btn:hover{
    border-color: #FF6200;
    color: #FF6200 !important;
}

/* Showcase */

.lp-preview-wrapper{
    margin-top: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 2;
}

.preview-glow{
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255,208,0,0.18) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

/* Frame */

.lp-preview-frame{
    width: 100%;
    max-width: 1180px;
    background: linear-gradient(180deg,#141414 0%, #0d0d0d 100%);
    border-radius: 24px;
    padding: 0px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 80px rgba(0,0,0,0.7);
    position: relative;
}

.lp-preview-frame img{
    width: 100%;
    border-radius: 24px;
    display: block;
}

/* Floating Tags */

.floating-tag{
    position: absolute;
    padding: 18px 28px;
    border-radius: 100px;
    background: rgba(255,208,0,0.18);
    border: 1px solid rgba(255,208,0,0.2);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    z-index: 3;
}

.floating-tag span{
    width: 10px;
    height: 10px;
    background: #FF6200;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.tag-left{
    left: 16px;
    top: 40px;
}

.tag-right{
    right: -20px;
    bottom: 90px;
}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1400px){

    .lp-showcase-top h1{
        font-size: 68px;
    }

}

@media(max-width:991px){

    .lp-showcase-section{
        padding: 120px 0 90px;
    }

    .lp-showcase-top h1{
        font-size: 52px;
        line-height: 1.1;
    }

    .lp-showcase-top p{
        font-size: 18px;
    }

    .lp-preview-frame{
        padding: 20px;
    }

    .tag-left{
        left: 20px;
        top: 30px;
    }

    .tag-right{
        right: 20px;
        bottom: 30px;
    }

}

@media(max-width:767px){

    .lp-showcase-top h1{
        font-size: 40px;
        letter-spacing: -1px;
    }

    .lp-showcase-btns{
        flex-direction: column;
    }

    .floating-tag{
        font-size: 14px;
        padding: 14px 18px;
    }

    .lp-preview-wrapper{
        margin-top: 70px;
    }

    .lp-preview-frame{
        border-radius: 26px;
    }

}


/* ==========================================
SERVICES PLATFORM SECTION
========================================== */

.services-platform-section{
    padding: 50px 0;
    background: #000917;
    position: relative;
    overflow: hidden;
}

.services-platform-top{
    max-width: 1100px;
    margin-bottom: 70px;
}

.section-mini-title{
    display: inline-block;
    color: #FF6200;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 28px;
    text-transform: uppercase;
}

.services-platform-top h2 {
    font-size: 36px;
    line-height: 46px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 30px;
    letter-spacing: -0.42px;
    font-family: "Commissioner", sans-serif;
}
.services-platform-top p{max-width: 810px;
    color: #9D9D9D;
    font-size: 20px;
    line-height: 27px;
    font-weight: 400;
    margin: 0;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.16px;
    font-weight: 300;}
/* Grid */

.services-platform-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
}

/* Card */

.platform-service-card{
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border: 1.5px solid rgb(93 131 197 / 35%);
    border-radius: 34px;
    padding: 34px;
    position: relative;
    overflow: hidden;
    transition: .4s ease;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.platform-service-card:hover{
    transform: translateY(-10px);
    
}

.platform-card-content h3{
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
    margin-bottom: 22px;
    letter-spacing: -0.24px;
    font-family: "Commissioner", sans-serif;
}

.platform-card-content p{
    color: #9D9D9D;
    font-size: 18px;
    line-height: 26px;
    margin: 0;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.16px;
    font-weight: 300;
}

/* Image */

.platform-card-image{
    margin-top: 50px;
}

.platform-card-image img{
    width: 100%;
    border-radius: 20px;
    display: block;
    opacity: .9;
}


/* =========================
   OUR APPROACH SECTION
========================= */

.approach-section{
    padding: 50px 0;
    background: #000610;
    position:relative;
    overflow:hidden;
}

.approach-section .container{
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:0 20px;
}

/* Top Area */

.approach-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:40px;
    margin-bottom: 50px;
}

.approach-heading h2{
    font-size: 43px;
    line-height: 1.15;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 10px;
    letter-spacing: -0.34px;
    font-family: "Commissioner", sans-serif;
}

.approach-heading p{
    color: #9D9D9D;
    font-size: 20px;
    line-height: 27px;
    margin: 0;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.16px;
    font-weight: 300;
}

/* Button */

.primary-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:18px 34px;
    border:1px solid rgba(255,214,0,0.35);
    border-radius:60px;
    background:rgba(255,214,0,0.08);
    color:#FF6200;
    text-decoration:none;
    font-size:20px;
    font-weight:600;
    transition:0.35s ease;
    white-space:nowrap;
}

.primary-btn:hover{
    background:#FF6200;
    color:#000;
    transform:translateY(-3px);
}

.primary-btn i{
    font-size:14px;
}

/* Grid */

.approach-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

/* Card */

.approach-card{
    position:relative;
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border-radius: 19px;
    padding: 22px 20px;
    min-height: auto;
    border: 1.5px solid rgb(93 131 197 / 35%);
    transition:0.4s ease;
    z-index: 9;
}

.approach-card:hover{
    transform:translateY(-10px);
    border-color:rgba(255,214,0,0.2);
    box-shadow:0 20px 50px rgba(255,214,0,0.06);
}

.step-number{
    position:absolute;
    top:36px;
    right:36px;
    font-size:32px;
    font-weight:700;
    /* A `color#FF6200` declaration sat here, missing its colon. Invalid, so it
       was dropped — and it is followed by an opaque-white `color`, which would
       have won anyway. Removed rather than repaired: repairing it would have
       been a no-op, and changing the colour to orange is a design decision, not
       a typo fix. See the note in plans/06-assistant.md if orange was intended. */
    color: #ffffff;
}

/* Icon */

.icon-wrap{
}

.icon-wrap img{
    width: 50px;
    margin: 0 0 30px;
}

/* Content */

.approach-card h3{
    font-size: 32px;
    line-height: 1.05;
    font-weight: 300;
    color: #FFFFFF;
    margin-bottom: 10px;
    letter-spacing: -1.2px;
    max-width: 500px;
    font-family: "Bricolage Grotesque", sans-serif;
}

.approach-card p{font-size: 16px;line-height: 1.7;color: #9D9D9D;font-family: "Commissioner", sans-serif;letter-spacing: -0.13px;}

/* Responsive */

@media(max-width:1200px){

    .approach-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .approach-heading h2{
        font-size:58px;
    }

}

@media(max-width:768px){

    .approach-section{
        padding:80px 0;
    }

    .approach-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .approach-grid{
        grid-template-columns:1fr;
    }

    .approach-heading h2{
        font-size:44px;
    }

    .approach-heading p{
        font-size:18px;
    }

    .approach-card{
        min-height:auto;
        padding:34px 28px;
    }

    .approach-card h3{
        font-size:32px;
    }

    .approach-card p{
        font-size:18px;
    }

    .step-number{
        font-size:24px;
        top:28px;
        right:28px;
    }

    .primary-btn{
        font-size:17px;
        padding:16px 26px;
    }

}


/* =========================================
   BLUERITT CASE STUDY SECTION
========================================= */

.blueritt-case-study{
    position:relative;
    padding: 50px 0;
    background: #000610;
    /* overflow:hidden; */
}

.blueritt-case-study::before{
    content:'';
    position: absolute;
    left: -610px;
    bottom: 380px;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, #FF5900 0%, rgba(255, 98, 0, 0) 70%);
    pointer-events: none;
    z-index: 1;
    opacity: 47%;
}

.blueritt-case-study::after{
    content:'';
    position: absolute;
    right: -300px;
    top: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 87, 255, 0.18) 0%, rgba(0, 87, 255, 0) 70%);
    pointer-events: none;
}

.case-study-wrapper{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:70px;
    align-items:start;
    position:relative;
    z-index:2;
}

/* =======================
   LEFT SIDE
======================= */

.preview-window{
    position:relative;
    background:linear-gradient(180deg,#141414 0%, #0b0b0b 100%);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:34px;
    padding:22px;
    overflow:hidden;
    box-shadow:
    0 20px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.window-topbar{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.window-topbar span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#2a2a2a;
}

.window-topbar span:first-child{
    background:#FF6200;
}

.preview-window img{
    width:100%;
    border-radius:22px;
    display:block;
    object-fit:cover;
}

.floating-badge{
    position:absolute;
    bottom:35px;
    right:35px;
    background:linear-gradient(135deg,#FF6200 0%, #b89600 100%);
    color:#000;
    padding:14px 24px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    box-shadow:0 10px 25px rgba(255,208,0,0.25);
}

.case-info{
    padding-top:40px;
}

.case-label{
    display:inline-block;
    color:#FF6200;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:22px;
}

.case-info h2{
     font-size: 43px;
     line-height: 1.15;
     font-weight: 500;
     color: #FFFFFF;
     margin-bottom: 20px;
     letter-spacing: -0.34px;
     font-family: "Commissioner", sans-serif;
}

.case-info p{
    color: #9D9D9D;
    font-size: 20px;
    line-height: 27px;
    margin: 0 0 30px;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.16px;
    font-weight: 300;
}

/* =======================
   BUTTON
======================= */

.primary-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:18px 34px;
    border-radius:60px;
    text-decoration:none;
    background:rgba(255,208,0,0.08);
    border:1px solid rgba(255,208,0,0.25);
    color:#FF6200;
    font-weight:600;
    font-size:17px;
    transition:all 0.35s ease;
}

.primary-btn:hover{
    background:#FF6200;
    color:#000;
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(255,208,0,0.22);
}

/* =======================
   RIGHT SIDE
======================= */

.scope-heading{
    margin-bottom:38px;
}

.scope-heading span{
    display:inline-block;
    color:#FF6200;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:700;
    margin-bottom:16px;
}

.scope-heading h3{
     font-size: 43px;
     line-height: 1.15;
     font-weight: 500;
     color: #FFFFFF;
     margin-bottom: 20px;
     letter-spacing: -0.34px;
     font-family: "Commissioner", sans-serif;
}

.scope-item{
    display:flex;
    gap:20px;
    align-items:flex-start;
    padding:34px;
    border-radius:32px;
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border: 1.5px solid rgb(93 131 197 / 35%);
    margin-bottom:24px;
    transition:all 0.35s ease;
    position:relative;
    overflow:hidden;
}

/* .scope-item::before{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, #0057ff2e, transparent 45%);
    opacity:0;
    transition:0.35s ease;
} */

.scope-item:hover::before,
.scope-item.active::before{
    opacity:1;
}

.scope-item:hover{
    transform:translateY(-5px);
    border-color:rgb(93 131 197 / 35%);
}

.scope-icon{
    /* width:84px; */
    /* height:84px; */
    /* min-width:84px; */
    /* border-radius:24px; */
    /* background:#0f0f0f; */
    /* border:1px solid rgba(255,255,255,0.05); */
    /* display:flex; */
    /* align-items:center; */
    /* justify-content:center; */
}

.scope-icon img{
    height: 45px;
    width: auto;   /* constrains height only; without this the intrinsic width
                      attribute (T2.3) sets the width and squashes the icon */
    filter: brightness(14.5);
}

.scope-content h4{
    color: #FFFFFF;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    margin: -10px 0 10px;
    letter-spacing: -0.26px;
    font-family: "Commissioner", sans-serif;
}

.scope-content p{
    color: #9D9D9D;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.18px;
}

ul.cntct-sc li span svg {
    width: 26px;
}

ul.cntct-sc li span {
    display: block;
    padding-bottom: 10px;
}

ul.cntct-sc li:before {
    display: none;
}

ul.cntct-sc li {
padding-left: 0;
    border-top: 1px solid #46364d;
    padding-top: 22px;
    padding-bottom: 20px;
    margin-bottom: 0;
}

.cn-map iframe {
    width: 100%;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}


tr.border.border-defaultborder.dark\:border-defaultborder\/10 td:first-child {
    padding-left: 16px;
}


ul.cntct-sc li a {
      color: #fff;
    text-decoration: none;
    font-size: 18px;
}

ul.cntct-sc h3 {
    margin-bottom: 8px;
    font-size: 18px;
}


.ab-tsc {
    /*background-image: url(../images/abt-banner2.webp);*/
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    background-position: center 40px;
        padding-bottom: 0;
}

.ab-tsc p.hero-description {
    color: #ffff;font-size: 20px;
}

.ab-case{
    position: sticky;
    top: 10px;

}

section.blg-sc {
    background: #000610;
    padding:80px 0px;
}

section.blg-sc img {
    height: 240px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

section.blg-sc .landing-card {
    margin-bottom: 30px;
}

.landing-card a {
    text-decoration: none;
    color: inherit;
}


p.dynamic-service-description {
    color: #c1c1c1;
    font-family: "Commissioner", sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
}


            button.ti-btn {
              width: 100%;
              height: 52px;
              border: none;
              border-radius: 12px;
              background: #ffffff;
              color: #000000;
              font-size: 18px;
              cursor: pointer;
              transition: 0.25s;
              margin-bottom: 14px;
              font-weight: 600;

            }

            .tx-head {
              font-family: "Commissioner", sans-serif;
              font-size: 35px;
              line-height: 1;
              color: #faf6ed;
              margin-bottom: 10px;
            }

            .top-sc-tb ul.nav.nav-pills {
    justify-content: center;
    width: fit-content;
    background: rgb(0 0 0 / 0%);
   border: 1.5px solid rgb(93 131 197 / 35%);
    margin: 0px auto;
    padding: 3px;
    border-radius: 80px;
            }

            .top-sc-tb button.nav-link {
          text-transform: uppercase;
    padding: 3px 20px;
    font-weight: 500;
    border-radius: 100px;
    color: #aaa;
    border: 1px solid #00000000;
            }
            p.whitespace-normal.text-center.cont-p {
    font-size: 14px;
    color: #b0aba3;
    line-height: 1.5;
    margin-bottom: 10px;
}


th.text-info-tb b {
    color: #ff6200;
}
.tb-sc {
    width: 80%;
    margin: 40px auto 0;
}
.tb-fx {
    display: flex;
    align-items: center;
}

.tb-fx img {
    height: 32px;
    width: auto;   /* see .scope-icon img — height-only rule, needs width:auto so the
                      intrinsic width attribute doesn't stretch the badge */
    margin-right: 9px;
    margin-top: 7px;
    margin-bottom: 10px;
}
tr.text-hd-sc td {
    border-radius: 30px !important;
    padding-left: 16px;
}
tr.text-hd-sc {
    background: #ffffff38;
    border-radius: 30px !important;
}
            .top-sc-tb button.nav-link.active {
 background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    color: #ffffff;
    border-color:rgb(93 131 197 / 35%);
            }
h2.title-crd.prcng {
text-align: center;
    font-family: "Commissioner", sans-serif;
    font-size: 46px;
    line-height: 1;
    color: #f5f2ea;
    margin-bottom: 30px;
    margin-top: 40px;
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -1.33px;

}

.box-body button.hero-btn {    width: 90%;margin: 0 0 20px;}

            .box-body {
              gap: 26px;
             
              background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
             border: 1.5px solid rgb(93 131 197 / 35%);
              border-radius: 30px;
              padding: 34px 28px;
              min-height: 740px;
              flex-direction: column;
              transition: 0.35s ease;
              position: relative;
              overflow: hidden;
              z-index: 2;
            }

          
            tr.text-hd-sc span {
              font-family: "Commissioner", sans-serif;
              font-size: 22px;
              line-height: 1;
              color: #ffffff !important;
              font-weight: 500 !important;
            }

            .badge {
              display: inline-flex !important;
              align-items: center !important;
              padding: .25rem .45rem !important;
              font-size: 12px !important;
              font-weight: 600 !important;
              height: 27px !important;
              border-radius: 32px !important;
            }

            .bg-success {
              color: #ffffff;
              background: #00ff247a !important;
            }

            .bg-failed {
              color: #ffffff;
              background: #dc3038c4 !important;
            }

            .flex.justify-center {
              text-align: center;
            }

            th.text-info-tb {
              font-style: italic;
              font-size: 16px;
              border-bottom: 1px solid #ffffff45 !important;
            }

            .cont-p {
              margin: 0;
            }

            /* add on tab  */

            .box-body .accordion-button {
              background: transparent !important;
              color: #ffff;
              font-weight: 700;
            }


            .box-body .accordion,
            .box-body .accordion-item {
              background: transparent;
            }

            .adon-box {
              background: #0000003d;
              border: 1px solid rgb(93 131 197 / 35%);
              border-radius: 14px;
              padding: 28px 22px;
              text-align: center;
              transition: border-color .2s;
              background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
            }
            .hero-blur.hero-blur-right.lf-2 {
    display: none;
}

            .adon-box a {
              display: block;
              width: 100%;
              background: #ffffffbf;
              color: #f66700;
              text-decoration: none;
              padding: 10px;
              font-weight: 500;
              border-radius: 7px;
              margin-top: 23px;
              font-weight: 700;
            }

            .icon {
          margin-bottom: 15px;
        
            }
            .b2b-adon-s .icon{
               padding-right: 10px;
    margin: 0;
            }
.b2b-adon-cnt {
    width: 100%;
}
            .adon-box h4 {
          margin-top: 16px;
    font-family: "Commissioner", sans-serif;
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 300 !important;
    margin-bottom: 0;
    color:gray;
            }

            .accordion-button::after {
              filter: brightness(56);
            }

            .pkg-logo img {
              width: 270px;
              filter: brightness(40.5);
            }

            .tb-sc .accordion-item,
            .box-body .accordion-button {
              border-color: #ffffff45 !important;
              outline: none !important;
              box-shadow: none !important;
            }

            /* add on sc  */
            .ax-wrap {
              color: #fff;
              padding: 100px 0px;
              text-align: center;
              /* min-height: 100vh; */
              padding-bottom: 0;
            }

            .ax-eyebrow {
              font-size: 11px;
              letter-spacing: 3px;
              color:#ff6200;
              text-transform: uppercase;
              margin-bottom: 16px
            }

            .ax-headline {
    text-transform: capitalize;
    text-align: center;
    font-family: "Commissioner", sans-serif;
    font-size: 46px;
    color: #f5f2ea;
    margin-bottom: 20px;
    margin-top: 10px;
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -1.33px;
}


            .ax-subtext {
              font-size: 16px;
              color: #aaa;
              max-width: 680px;
              margin: 0 auto 48px;
              line-height: 1.6
            }
            
            

            .ax-tabs-wrap {
          display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 70%;
    margin: 0px auto;
    margin-bottom: 40px !important;
            }

            .ax-tab-btn {
              background: transparent;
              border: 1px solid #333;
              color: #aaa;
              padding: 9px 18px;
              border-radius: 999px;
              font-size: 12px;
              font-weight: 600;
              letter-spacing: 1px;
              cursor: pointer;
              text-transform: uppercase;
              transition: all .2s
            }

            .ax-tab-btn:hover {
              border-color: #666;
              color: #fff
            }

            .ax-tab-btn.ax-active {
    color: #ffffff;
    border-color: rgb(93 131 197 / 35%);
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
            }

            .ax-cards-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
              gap: 16px;
              max-width: 1100px;
              margin: 0 auto
            }

            .ax-card {
              background: #111;
              border: 1px solid #222;
              border-radius: 14px;
              padding: 28px 22px;
              text-align: center;
              transition: border-color .2s
            }

            .ax-card:hover {
              border-color: #444
            }

            .ax-card-price {
              font-size: 28px;
              font-weight: 700;
              color: #fff;
              margin-bottom: 4px
            }

            .ax-card-price span {
              font-size: 15px;
              font-weight: 400;
              color: #888
            }

            .ax-card-title {
              font-size: 11px;
              letter-spacing: 2px;
              text-transform: uppercase;
              color: #bbb;
              margin: 12px 0 14px;
              font-weight: 600
            }

            .ax-card-desc {
              font-size: 13px;
              color: #777;
              line-height: 1.65
            }

            .ax-tab-panel {
              display: none
            }

            .ax-tab-panel.ax-panel-active {
              display: block
            }

            .adon-sc {
              position: relative;
              z-index: 1;
            }


.b2b-adon-s p {
 color: gray;
    margin-bottom: 0px;
    line-height: 1.2;
}

.b2b-adon-s span {
color: gray;
    /* font-style: italic; */
    font-size: 16px;
    font-weight: 300;
}

.b2b-adon-s h4 {
  margin-top: 10px;
    font-family: "Commissioner", sans-serif;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500 !important;
    color: #fff;
    margin: 20px 0 5px;
}


.adon-box h5 {
   
    font-family: "Commissioner", sans-serif;
    text-transform: capitalize;
    font-size: 26px;
    font-weight: 500 !important;
}
.b2b-adon-s .adon-box {
 display: flex;
    /* align-items: center; */
    text-align: left;
    justify-content: space-between;
    gap: 10px;
    height: 160px;
    padding:22px;
}
/* =========================================
FAQ SECTION
========================================= */

.faq-section{
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background: #010B1D;
}


.faq-section h2{color: #ff6200;    font-size: 26px;    line-height: 1.05;    font-weight: 500;    letter-spacing: -0.34px;    font-family: "Commissioner", sans-serif;    margin: 60px 0 30px 0;}

/* =========================================
FAQ WRAPPER
========================================= */

.faq-wrapper{
    max-width: 1050px;
    margin: auto;
}

/* =========================================
FAQ ITEM
========================================= */

.faq-item{
    border: 1px solid rgba(38,76,148,0.45);
    background: rgba(5,16,36,0.94);
    border-radius: 24px;
    margin-bottom: 22px;
    overflow: hidden;
    transition: all .3s ease;
}

.faq-item.active{
    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d82 0%, #051f5c 45%, #020e26 100%);
    border-color: rgb(93 131 197 / 35%);
}

/* =========================================
QUESTION
========================================= */

.faq-question{
    position: relative;
    cursor: pointer;
    padding: 32px 85px 32px 34px;
}

.faq-question h3{
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1.5;
    font-weight: 500;
    margin: 0;
    font-family: "Commissioner", sans-serif;
}

/* =========================================
ICON
========================================= */

.faq-icon{
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(255,255,255,0.06);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #FFFFFF;

    transition: all .3s ease;
}

.faq-item.active .faq-icon{
    background: #FF6200;
    transform: translateY(-50%) rotate(45deg);
}

/* =========================================
ANSWER
========================================= */

.faq-answer{    display: none;    padding: 0 34px 34px;}
.faq-answer p{    color: rgba(255,255,255,0.56);    font-size: 18px;    line-height: 1.4;    margin: 0 0 10px;}
.faq-answer h6{    color: #fff;    font-size: 20px;    font-weight: 500;    margin: 20px 0 5px;}
.faq-answer ul{    display: flex;    flex-wrap: wrap;    gap: 10px;}
.faq-answer ul li{    color: rgba(255,255,255,0.56);    position: relative;width: 100%;}
.faq-answer ul li:after{content:'';width: 5px;height: 5px;background: #ff6200;position: absolute;left: -25px;top: 10px;border-radius: 30px;}



.blg-img img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: 11px;
}

.blg-img {
    padding-bottom: 50px;
}




/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px){

    .faq-section{
        padding: 100px 0;
    }

    .faq-question h3{
        font-size: 22px;
    }

    .faq-answer p{
        font-size: 16px;
    }

}

@media(max-width:767px){

    .faq-question{
        padding: 26px 70px 26px 24px;
    }

    .faq-question h3{
        font-size: 18px;
    }

    .faq-answer{
        padding: 0 24px 28px;
    }

    .faq-icon{
        right: 20px;
        width: 36px;
        height: 36px;
    }

}




/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1400px){

    .services-platform-top h2{
        font-size: 54px;
    }

    .platform-card-content h3{
        font-size: 38px;
    }

}

@media(max-width:991px){

    .services-platform-grid{
        grid-template-columns: 1fr;
    }

    .services-platform-top h2{
        font-size: 42px;
    }

    .platform-service-card{
        min-height: auto;
    }

}

@media(max-width:767px){

    .services-platform-section{
        padding: 90px 0;
    }

    .services-platform-top h2{
        font-size: 34px;
        line-height: 1.2;
    }

    .platform-service-card{
        padding: 26px;
        border-radius: 24px;
    }

    .platform-card-content h3{
        font-size: 30px;
    }

    .platform-card-content p{
        font-size: 17px;
    }

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1400px){

    .landing-heading h2{
        font-size: 58px;
    }

    .landing-card h3{
        font-size: 34px;
    }

}

@media(max-width:991px){

    .landing-top{
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-grid{
        grid-template-columns: 1fr;
    }

    .landing-heading h2{
        font-size: 48px;
    }

    .landing-heading p{
        font-size: 18px;
    }

    .landing-card{
        min-height: auto;
    }

}

@media(max-width:767px){

    .landing-strategy-section{
        padding: 90px 0;
    }

    .landing-heading h2{
        font-size: 38px;
    }

    .landing-card{
        padding: 30px;
        border-radius: 26px;
    }

    .landing-card h3{
        font-size: 30px;
    }

    .landing-card p{
        font-size: 17px;
        max-width: 100%;
    }

}



section.terms-content-section {
    background: #000610;
    color: #ffff;
    padding: 100px 0px;
}


/* =========================================
RESPONSIVE
========================================= */

@media(max-width: 1199px){

    .footer-widget h4{
        font-size: 28px;
    }

    .footer-widget ul li a,
    .footer-about p{
        font-size: 17px;
    }

}

.ux_fullscreen_menu_2026 {
    display: none;
}

@media(max-width: 991px){

    .footer-social{
        justify-content: flex-start;
        margin-top: 30px;
    }

    .footer-middle{
        padding: 60px 0;
    }

    .footer-widget h4{
        margin-bottom: 22px;
    }

    .footer-copyright,
    .footer-credit{
        text-align: left;
    }

}

    
    /* =========================
       DESKTOP
    ========================== */

    /* The @media(min-width:768px) drawer block was removed 17 Aug 2026. It set
   width:340px and animated `left` from -340px to 0, but the position:fixed it
   depended on lived in the mobile block, so it never had a positioned element
   to act on — at 1024px the drawer was a static flex item stretched to 984px.
   The extracted 0-991px block now supplies the whole set and animates
   transform, which the mobile block's own comment explains is the safer
   mechanism on iOS. Leaving `left:-340px` in place would also have stacked
   with translateX(-100%) and double-offset the closed state. */

/* Both toggles are <button> elements (was <div>): reset native chrome and give a
   visible response to tap/focus. Previously 30x34px with no feedback at all, which
   read as "broken" while the page was still loading.

   The 48x48 touch target is provided by the ::after overlay below rather than by
   min-width/min-height. Sizing the button itself made it the tallest item in the
   .header-logo flex row, which grew the header from 71px to 85px, pushed the icon
   18px left and knocked the logo off centre. The overlay gives the same hit area
   with zero layout impact. */
.ux_menu_toggle_btn_2026,
.ux_menu_close_btn_2026 {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Invisible 48x48 tap target, centred on the glyph. Does not affect layout. */
.ux_menu_toggle_btn_2026::after,
.ux_menu_close_btn_2026::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
}
.ux_menu_toggle_btn_2026:active,
.ux_menu_close_btn_2026:active {
    opacity: .55;
}
.ux_menu_toggle_btn_2026:focus-visible,
.ux_menu_close_btn_2026:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ux_menu_toggle_btn_2026 {
    display: none;
}

/* Drawer and burger styling, 0-991px.
   Extracted from the max-width:767px block on 17 August 2026. Every rule here
   was mobile-only, which is why enabling the burger above 767px produced a
   full-width, unstyled skeleton of blue underlined links rather than a menu.
   991px is deliberate: it is exactly where Bootstrap's col-lg-* stops applying
   and the header's three-column row stops working, so it is the width at which
   the horizontal nav has to give way to the drawer. The unrelated mobile rules
   (footer, hero, html) stay behind in the 767 block. */
@media(max-width: 991px){

    
    
    .ux_menu_toggle_btn_2026 {
    display: block;      /* matches production; shrink-wraps as a flex item */
    position: relative;  /* containing block for the ::after tap target */
}



.ux_navbar_wrap_2026{
      width:100%;
      background:#111;
      color:#fff;
      padding:18px 20px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .ux_logo_text_2026{
      font-size:24px;
      font-weight:bold;
    }

    .ux_menu_toggle_btn_2026{
      font-size:34px;
      cursor:pointer;
      line-height:1;
    }

    /* =========================
       FULLSCREEN MENU
    ========================== */

    /* Parked off-screen with transform, not `left`. A fixed element at left:-100%
       with visibility:visible is not clipped by an ancestor's overflow-x:hidden on
       iOS Safari, which lets the page pan sideways and renders the drawer cut off.
       transform is also composited, so opening no longer triggers layout per frame. */
    .ux_fullscreen_menu_2026{
    position: fixed;
    top: 0;
    left: 0;
    width: 340px;   /* phones widen to 100% in the 767 block below */
    height: 100vh;
    background: #010818;
    z-index: 99999;
    overflow-y: auto;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s ease, visibility 0s linear .3s;
    }

.ux_bottom_cta_wrap_2026 a {
    margin-bottom: 22px;
}
    .ux_fullscreen_menu_2026.active_menu_2026{
      transform: translateX(0);
      visibility: visible;
      pointer-events: auto;
      transition: transform .3s ease, visibility 0s;
    }

    @media (prefers-reduced-motion: reduce) {
      .ux_fullscreen_menu_2026 { transition: none; }
    }

    /* =========================
       TOP AREA
    ========================== */

    .ux_menu_top_area_2026{
      width:100%;
    }

    /* Close Button */
    .ux_menu_close_btn_2026{
      position:absolute;
      top:20px;
      right:25px;
      color:#fff;
      font-size:42px;
      cursor:pointer;
      line-height:1;
      display:block;
    }

    /* Logo Area */
    .ux_menu_logo_area_2026{
    text-align: left;
    margin-bottom: 30px;
    padding-top: 5px;
    padding-left: 20px;
    }

    .ux_menu_logo_area_2026 img{
    width: 190px;
    max-width: 100%;
    object-fit: contain;
    }

    /* =========================
       MENU
    ========================== */

    .ux_menu_list_2026{
    list-style: none;
    width: 100%;
    padding-left: 0;
    }

    .ux_menu_item_2026{
      border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .ux_menu_link_2026{
      display:block;
      color:#fff;
      text-decoration:none;
      padding:22px;
      font-size:22px;
      transition:0.3s;
    }

    .ux_menu_link_2026:hover{
      background:#2d2d2d;
    }

    /* =========================
       SUBMENU
    ========================== */

    .ux_submenu_wrap_2026{
      display:none;
      background:#2a2a2a;
      list-style:none;
    }

    /* Replaces jQuery slideToggle() — see the inline handler in includes/header.php */
    .ux_submenu_wrap_2026.is-open{
      display:block;
    }

    /* Chevron drawn in CSS, replacing the bare "▼" glyph, which screen readers
       announced as text and which could not rotate to signal open state. */
    .ux_submenu_caret_2026{
      display:inline-block;
      width:8px;
      height:8px;
      margin-left:10px;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform:translateY(-2px) rotate(45deg);
      transition:transform .2s ease;
    }
    .ux_has_submenu_toggle_2026[aria-expanded="true"] .ux_submenu_caret_2026{
      transform:translateY(2px) rotate(-135deg);
    }

    .ux_submenu_link_2026{
      display:block;
      color:#fff;
      text-decoration:none;
      padding:18px 22px 18px 45px;
      font-size:18px;
      border-top:1px solid rgba(255,255,255,0.05);
    }

    .ux_submenu_link_2026:hover{
      background:#3a3a3a;
    }

    /* =========================
       CTA BUTTONS
    ========================== */

    .ux_bottom_cta_wrap_2026{
      width:100%;
      padding:25px 20px 35px;
    }

    .ux_cta_btn_2026{
      width:100%;
      display:block;
      text-align:center;
      text-decoration:none;
      padding:16px;
      border-radius:8px;
      font-size:18px;
      font-weight:600;
      margin-bottom:15px;
      transition:0.3s;
    }

    /* Sign Up */   
    .ux_signup_btn_2026{
      background:#ffffff;
      color:#111;
    }

    .ux_signup_btn_2026:hover{
      background:#e5e5e5;
    }

    /* Sign In */
    .ux_signin_btn_2026{
      background:transparent;
      border:2px solid #fff;
      color:#fff;
    }

    .ux_signin_btn_2026:hover{
      background:#fff;
      color:#111;
    }
}

@media(max-width: 767px){
    /* Phones get a full-screen sheet; 768-991px keeps the 340px side panel.
       Same .blueritt-header qualifier, same reason as above. */
    .blueritt-header .ux_fullscreen_menu_2026{ width: 100%; max-width: 100%; }


    .main-footer{
        padding-top: 70px;
    }

    .footer-logo img{
        max-width: 180px;
    }

    .footer-about p,
    .footer-widget ul li a,
    .footer-policy a,
    .footer-policy span,
    .footer-copyright p,
    .footer-credit p{
        font-size: 15px;
    }

    .footer-widget h4{
        font-size: 24px;
    }

    .footer-middle{
        padding: 50px 0;
    }

    .footer-bottom{
        padding: 26px 0;
    }
    
    .case-study-wrapper{
            display: block;
    }
    .case-scope {
    margin-top: 80px;
}

.hero-blur.hero-blur-right {
    width: auto;
}

    
html {
    overflow-x: hidden;
}
.approach-heading {
    width: 100%;
}

}



.parallax-wrap{/* position: relative; */}    
.stats-1{position: absolute;width: 930px;left: -30px;top: 80px;z-index: -1;box-shadow: 0px 5px 19px 2px #00000047;opacity: .5;}
.stats-2{position: absolute;width: 730px;right: 0;bottom: -80px;z-index: -1;box-shadow: 0px 5px 19px 2px #00000047;opacity: .5;}

.approach-heading {
    width: 60%;
}





.counter{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0;
}

.counter .digit-box{
    height:1em;
    overflow:hidden;
    display:inline-block;
}

.counter .digit{
    display:flex;
    flex-direction:column;
    transition:transform 2s cubic-bezier(.19,1,.22,1);
}

.counter .digit span{
    display:flex;
    align-items:center;
    justify-content:center;
    height:1em;
    line-height:1em;
}

.whoweare{}
.whoweare p{color: #9D9D9D;    font-size: 20px;    line-height: 27px;    margin: 0 0 30px;    font-family: "Commissioner", sans-serif;    letter-spacing: -0.16px;    font-weight: 300;}
.whoweare .scope-heading {    margin-bottom: 0px;}
.services-platform-section.copy .services-platform-grid{grid-template-columns: repeat(2, 1fr);}
.services-platform-section.copy .platform-service-card{min-height: auto;}
.services-platform-section.copy .platform-card-content p{margin: 0 0 20px;}
.services-platform-section.copy .services-platform-top {    margin-bottom: 40px;}


.owner-quote{padding: 0;    margin: -50px 0 0;}
.owner-quote .feature-card-wrapper{    background-image: url(../images/owner-img.webp);    background-size: cover;    background-position: top;    background-repeat: no-repeat;    padding: 60px;    height: 700px;    display: flex;    flex-direction: column;    justify-content: flex-end;    border: 0px solid rgb(93 131 197 / 35%);}
.owner-quote .feature-card-wrapper .feature-card-content{    border: 1.5px solid rgb(93 131 197 / 35%);    background: radial-gradient(ellipse 86% 61% at 6% 14%, #0a2d8257 0%, #051f5c70 45%, #020e2669 100%);    padding: 30px;    border-radius: 30px;    margin: 0px 0 0px;    backdrop-filter: blur(10px);}
.owner-quote .feature-card-wrapper .feature-card-content h2{font-size: 34px;    max-width: max-content;    line-height: 1.2;}
.owner-quote .feature-card-wrapper .feature-card-content h6{    margin: 0px 0 0;    font-size: 20px;    color: #fff;    font-weight: 300;}
.owner-quote .feature-card-wrapper .feature-card-content h6 span{    display: block;    color: #aaa;    margin: 2px 0 0;    font-size: 16px;}

td p {
    margin: 0;
}
.tb-ptm td {
    padding-bottom: 30px !important;
}

section.use-cases {
    background: #000610;
    color: #ffff;
    padding: 100px 0px;
}
.quote-box {
    background-color: #ffffff2b;
    margin: 20px auto;
    padding: 20px;
    width: 100%;
    position: relative;
    border-radius: 10px;
    color: #eae8e8;
    margin-bottom: 30px;
}

.cases-heading {
    font-size: 24px;
    padding-bottom: 0;
    font-weight: 500;
    color: #ffff;
    margin-top: 40px;
    padding-bottom: 5px;
}

section.use-cases {
    color: #b3b3b3;
    font-size: 20px;
    line-height: 27px;
    font-family: "Commissioner", sans-serif;
    letter-spacing: -0.16px;
    font-weight: 300;
}
p.cases-paragraph {
    padding-bottom: 20px;
}

ul.cases-list {
    list-style: disc;
    padding-left: 20px;
}

ul.cases-list li {
    padding-bottom: 10px;
}


.pricing-bottom-text{    text-align: center;}
.pricing-bottom-text p{color: rgb(255 255 255);    font-size: 24px;    line-height: 1.6;    font-weight: 400;    letter-spacing: -0.14px;    font-family: "Commissioner", sans-serif;    margin: 30px auto 0;    font-style: italic;    width: 40%;}











/* ==========================================================================
   Privacy Policy Section Styles
   Matches: .terms-content-section > .container > .terms-content-wrapper
   ========================================================================== */
 
.terms-content-section {
  padding: 60px 0;
  background-color: #ffffff;
  color: #444444;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.7;
}
 
.terms-content-section .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
 
/* Paragraphs */
.terms-content-wrapper p {
  margin: 0 0 16px;
  font-size: 16px;
}
 
.terms-content-wrapper strong {
  font-weight: 600;
  color: #f2f2f2;
}
 
/* Headings */
.terms-content-wrapper h3 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eaeaea;
}
 
.terms-content-wrapper h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 32px 0 12px;
}
 
.terms-content-wrapper h5 {
  font-size: 17px;
  font-weight: 600;
  color: #2b2b2b;
  margin: 24px 0 10px;
}
 
/* First heading shouldn't have extra top margin */
.terms-content-wrapper > h3:first-of-type,
.terms-content-wrapper > h4:first-of-type {
  margin-top: 0;
}
 
/* Lists */
.terms-content-wrapper ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
 
.terms-content-wrapper li {
  margin-bottom: 8px;
  font-size: 16px;
  position: relative;
}
.terms-content-wrapper li:after{content:'';width: 5px;height: 5px;background: #fff;position: absolute;left: -20px;top: 10px;border-radius: 30px;} 
 
.terms-content-wrapper li:last-child {
  margin-bottom: 0;
}
 
/* Table */
.terms-content-wrapper table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 15px;
}
 
.terms-content-wrapper table th,
.terms-content-wrapper table td {
  border: 1px solid #e5e5e5;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}
 
.terms-content-wrapper table th {
  background-color: #f7f7f9;
  font-weight: 600;
  color: #1a1a1a;
}
 
.terms-content-wrapper table tbody tr:nth-child(even) td {
  background-color: #000000;
}
 
/* Links inside content */
.terms-content-wrapper a {
  color: #2563eb;
  text-decoration: underline;
}
 
.terms-content-wrapper a:hover {
  color: #1d4ed8;
}
 
/* Responsive */
@media (max-width: 768px) {
  .terms-content-section {
    padding: 40px 0;
  }
 
  .terms-content-wrapper h3 {
    font-size: 20px;
    margin: 32px 0 12px;
  }
 
  .terms-content-wrapper h4 {
    font-size: 18px;
    margin: 28px 0 10px;
  }
 
  .terms-content-wrapper h5 {
    font-size: 16px;
  }
 
  .terms-content-wrapper table,
  .terms-content-wrapper table th,
  .terms-content-wrapper table td {
    font-size: 14px;
    padding: 10px 12px;
  }
}













.radar-animation{
    position:relative;
    width:380px;
    height:380px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin: 0 auto;
}

.center-logo{
    width: 120px;
    height: 120px;
    border-radius:50%;
    background: #090b28;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
}

.center-logo img{
    width: 105px;
    border-radius: 50%;
}

.circle{
    position:absolute;
    border-radius:50%;
    transform-origin:center;
}

/* Orange outer ring */
.c1{
    width:380px;
    height:380px;
    background:
    radial-gradient(circle,
    transparent 55%,
    rgba(255,106,0,.15) 65%,
    #ff6600 82%,
    #ff6600 100%);
    animation:pulse1 4s infinite;
}

/* Blue ring */
.c2{
    width:290px;
    height:290px;
    background:
    radial-gradient(circle,
    transparent 55%,
    rgba(37,99,235,.25) 70%,
    #2563eb 90%);
    animation:pulse2 4s infinite .3s;
}

/* Orange glow ring */
.c3{
    width:190px;
    height:190px;
    background:
    radial-gradient(circle,
    transparent 40%,
    rgba(255,106,0,.3) 70%,
    rgba(255,106,0,.8) 100%);
    animation:pulse3 4s infinite .6s;
}

/* Inner blue glow */
.c4{
    width:120px;
    height:120px;
    background:
    radial-gradient(circle,
    rgba(37,99,235,.9) 0%,
    rgba(37,99,235,.3) 70%,
    transparent 100%);
    animation:pulse4 4s infinite .9s;
}

@keyframes pulse1{
    0%,100%{
        transform:scale(1);
        opacity:.8;
    }
    50%{
        transform:scale(1.06);
        opacity:1;
    }
}

@keyframes pulse2{
    0%,100%{
        transform:scale(1);
        opacity:.75;
    }
    50%{
        transform:scale(1.08);
        opacity:1;
    }
}

@keyframes pulse3{
    0%,100%{
        transform:scale(1);
        opacity:.6;
    }
    50%{
        transform:scale(1.12);
        opacity:1;
    }
}

@keyframes pulse4{
    0%,100%{
        transform:scale(1);
        opacity:.8;
    }
    50%{
        transform:scale(1.15);
        opacity:1;
    }
}



.blg-pg .landing-card p{display: -webkit-box;
    -webkit-box-orient: vertical;
     -webkit-line-clamp: 2; 
     overflow: hidden; 
     text-overflow: ellipsis;}
     
     
     


.trial-announce-main{text-align: center;}     
.trial-announce-main p{font-size: 16px; width: max-content; margin: 40px auto 0; padding: 4px 9px; border-radius: 9px; color: #ff6200; border: 1.5px solid rgb(93 131 197 / 35%); position: relative; font-style: italic;}     
/*.trial-announce-main p:after{    content: '';background-image: url(../images/blueritt-arrow.png);    position: absolute;    right: -70px;    top: -40px;    width: 65px;    height: 55px;    background-size: contain;    filter: contrast(0.2);    background-repeat: no-repeat;    transform: rotate(-29deg);    z-index: 9;}*/








/* z-index must sit above the tawk.to chat widget, which sets 1000003 / 1000004 on its
   own injected iframes and so was rendering on top of this panel — covering the right
   third of the "Reject" button on mobile. tawk's values are inline on its iframes and
   cannot be lowered from here, so this panel has to go above them instead. */
.cookie-banner{position:fixed;bottom:25px;left:25px;max-width:430px;width:calc(100% - 40px);z-index:2000000;background:rgba(20,20,20,.75);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.45);display:none;animation:cookieUp .5s ease;}

@keyframes cookieUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

.cookie-content h4{margin:0 0 12px;color:#fff;font-size:22px;}
.cookie-content p{margin:0;color:#cfcfcf;line-height:1.7;}
/* Mobile-only one-line copy. Two versions of the sentence rather than one
   responsive one: the notice has to say enough to be a valid consent notice on
   a desktop panel, and short enough to be a bar on a phone. No amount of CSS
   shortens a sentence. */
.cookie-short{display:none;}
.cookie-buttons{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.cookie-btn{padding:12px 26px;border:none;border-radius:50px;cursor:pointer;font-weight:600;transition:.3s;}
/* "Accept All" on the desktop panel, "Accept" in the mobile bar — 23px of width
   back on a 360px screen, which is the difference between the bar fitting on
   one row and wrapping to two. */
.cookie-btn .lbl-short{display:none;}
.cookie-btn.primary{background:#3b82f6;color:#fff;}
.cookie-btn.primary:hover{background:#2563eb;}
.cookie-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;}
.cookie-btn.secondary:hover{background:rgba(255,255,255,.08);}
.cookie-link{color:#59b4ff;text-decoration:none;font-weight:600;}
.cookie-link:hover{text-decoration:underline;}

@media(max-width:768px){

/* Single-line bar.
   History of this panel on a 740px phone: 388px tall originally (52% of the
   screen, covering the headline and the hero call-to-action), then ~190px once
   the buttons were put on one row and the type tightened. Both were still a
   sheet sitting over the content someone came to read.
   This is the third pass and a different shape rather than a smaller one: the
   heading and the long paragraph are dropped, a one-line version of the copy
   carries the policy link inline, and the buttons move beside the text instead
   of below it. That lands at roughly 64px — the height of the buttons plus
   padding, and about a twelfth of the screen.
   Buttons keep the 44px minimum from the previous pass. The bar got shorter by
   losing rows, not by shrinking touch targets. */
.cookie-banner{left:0;right:0;bottom:0;width:auto;max-width:none;padding:10px 14px;border-radius:0;border-left:0;border-right:0;border-bottom:0;}
.cookie-content{display:flex;align-items:center;gap:12px;}
.cookie-content h4{display:none;}
.cookie-full{display:none;}
.cookie-short{display:block;flex:1 1 auto;min-width:0;margin:0;font-size:12.5px;line-height:1.35;color:#cfcfcf;}
.cookie-short a{color:#59b4ff;text-decoration:underline;white-space:nowrap;}
.cookie-buttons{flex:0 0 auto;margin-top:0;gap:8px;flex-wrap:nowrap;}
.cookie-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;font-size:13.5px;white-space:nowrap;border-radius:10px;}
.cookie-btn .lbl-long{display:none;}
.cookie-btn .lbl-short{display:inline;}
/* The policy link moves into the sentence above, where it costs no width of
   its own. Hidden here rather than deleted so the desktop panel keeps it. */
.cookie-buttons .cookie-link{display:none;}

}



.diff{}
.diff.active{background: radial-gradient(ellipse 86% 61% at 6% 14%, #d55a2dab 0%, #ff6a0061 45%, #1b151a 100%) !important;    border: 1px solid #ff6a00 !important;}
.forb2b{    width: 90%;}


.abt-functionimage{width: 100%;    margin: -160px 0 0 0;}

.ceo-profile{    display: flex;    align-items: center;    gap: 20px;    margin: 30px 0 0;}
.ceo-profile img{display:none;width: 55px;border-radius: 60px;margin: 0px 0 0;}





.blueritt-header.header-main.showmenu {/* top: 0; */}

/*Marquee stile*/
.marquee{background: #001b57;position: relative;width: 100%;height: 100%;overflow: hidden;padding: 10px 0 5px;position: fixed;width: 100%;top: 0;z-index: 99;height: auto;}
.marquee .scroll{  width: 100%;  display: flex; justify-content: center;}
.marquee .scroll div{    /*animation: animate-marquee 80s linear infinite;*/    animation-delay: -40s;    display: flex;}
.marquee .scroll div:nth-child(2){  animation: animate-marquee-2 80s linear infinite;  animation-delay: -80s;}
.marquee .scroll div .category{}
.category{  color: #fff;  clear: both;  display: inline-block;  overflow: hidden;  white-space: nowrap;  margin: 0;  font-size: 14px;  font-weight: 300;  line-height: 24px;  font-family: "Commissioner", sans-serif;}
.category a{color:#FFF;text-decoration: none;}
.announcement-bar-img{width: 24px; margin: 0 10px 0 10px;}
/*Responsive marquee*/
@media (max-width:767px){
  .category{font-size: 12px;
        width: 80%;
        margin: 0 auto;
        text-align: center;
        line-height: 18px;
        white-space: unset;}
  .marquee .scroll div{font-size: 25px;}
  .announcement-bar-img{display:none;}
}

@keyframes animate-marquee{
	0%{
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	100%{
		-moz-transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

@keyframes animate-marquee-2{
	0%{
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-moz-transform: translateX(-200%);
		-webkit-transform: translateX(-200%);
		transform: translateX(-200%);
	}
}

.policy-pg .blueritt-header{top: 0;}  /* was 42px — announcement bar */


.announcement-close{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    line-height:1;
}

.announcement-close:hover{
    opacity:.8;
}



/* body.announcement-closed rules removed 17 Aug 2026 — their values are now the
   defaults above, so the class no longer changes anything. The class itself is
   still set by assets/js/functions.js if the bar is ever restored. */
.blg-pg .blueritt-header{    top: 0px;}



.sale-pormotion{width: 300px;}

/* ===================================
PRICING PROMO WIDGET
===================================

Replaces assets/images/Widget-With-Text.svg, which was one flat image used on all
four plan tabs — so every tab advertised the annual code, and the "valid until"
date could not change without re-exporting artwork. It was still showing an offer
that expired on 31 Aug 2026 the day after it expired.

Content comes from includes/promo-widget.php; the offer table lives there and
nowhere else.

Deliberately a plain card rather than a recreation of the old illustration. Two
attempts at rebuilding that artwork in CSS landed close but not right, and a
near-miss of a familiar graphic looks worse than something simple done properly.
=================================== */

.br-promo{
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
    padding: 22px 18px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, #0a1c44 0%, #061229 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    text-align: center;
    font-family: "Bricolage Grotesque", sans-serif;
    /* The pricing tables set nowrap on their cells; this has its own wrapping. */
    white-space: normal;
}

/* The discount leads, because it is what sells. The old artwork showed only the
   code and never the percentage at all. */
.br-promo-flag{
    display: block;
    color: #FF6200;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
}

.br-promo-label{
    display: block;
    margin: 12px 0 8px;
    color: #8B96AB;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

/* Dashed box: the ordinary visual shorthand for "this is a coupon code", and it
   separates the code from the label without needing another colour. */
.br-promo-coderow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px dashed rgba(255, 98, 0, 0.55);
    border-radius: 10px;
    background: rgba(255, 98, 0, 0.07);
}

/* Real, selectable text. The artwork this replaced was outlined vector, so the
   code could not be selected — people had to retype it from a picture. */
.br-promo-code{
    color: #FFFFFF;
    font-size: clamp(17px, 5.5vw, 20px);
    font-weight: 800;
    letter-spacing: 0.6px;
    line-height: 1.1;
    word-break: break-all;
    user-select: all;
}

.br-promo-copy{
    flex: none;
    padding: 5px 11px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.25s;
}

.br-promo-copy:hover{
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
}

.br-promo-copy.is-copied{
    background: #1f9d55;
    border-color: #1f9d55;
}

.br-promo-copy:focus-visible{
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.br-promo-until{
    display: block;
    margin-top: 12px;
    color: #8B96AB;
    font-family: "Commissioner", sans-serif;
    font-size: 11.5px;
    font-weight: 300;
}

.br-promo-until b{
    color: #FFFFFF;
    font-weight: 600;
}

/* ===================================
WHICH SLOT SHOWS
===================================

The page has two layouts. Above 767px the comparison table is shown and the promo
sits in its header cell. At 767px and below, the JS after the tables rebuilds each
table as cards and hides the table — taking the in-table promo with it, which is
why mobile visitors saw no promo code at all. The cards slot lives outside the
table and takes over there.
=================================== */

.br-promo-slot--cards{
    display: none;
}

@media(max-width: 767px){

    .br-promo-slot--cards{
        display: block;
        margin: 0 0 18px;
    }

    .br-promo-slot--table{
        display: none;
    }

    .br-promo{
        width: 100%;
        max-width: 340px;
    }

}


/* =========================================
HEADER NAV — INTERMEDIATE WIDTH FIX (992–1280px)
=========================================
The header row is a Bootstrap col-lg-2 / col-lg-8 / col-lg-2 split. Those are
percentage columns, but their contents are not: the two header buttons need
~240px together and the column only offers 159px at 992px and 193px at 1200px,
so the button group overflowed LEFT out of its own column and sat on top of the
nav links. Measured: at 1200px the buttons column starts at x=987 while the
first button starts at x=935.

At the same time .main-menu is flex-wrap:nowrap with a fixed 38px gap, so as the
middle column narrowed the links could not reflow — they shrank until labels
like "Plans & Pricing" wrapped onto two and then three lines, which is what made
the header grow taller as well as overlap.

It looked fine at both ends and broke only in between because ≥1280px there is
enough slack to absorb the button overflow, and <992px the col-lg-* classes stop
applying entirely, so the three groups stack instead of sharing a row.

The fix is to stop sizing the three groups as percentages of the viewport and
size them to their content instead: logo and buttons take exactly what they
need, the nav takes whatever is left, and the gap scales with the viewport
rather than staying at 38px. Scoped to ≥992px so the stacked layout below it is
untouched. */
@media(min-width:992px){

    .blueritt-header .row{
        flex-wrap:nowrap;
    }

    /* Logo and buttons: size to content, never shrink below it. */
    .blueritt-header .row > .col-lg-2{
        flex:0 0 auto;
        width:auto;
        max-width:none;
    }

    /* Nav: takes the remaining space. min-width:0 is load-bearing — without it
       a flex item refuses to shrink below its content width and pushes the
       buttons back off the row. */
    .blueritt-header .row > .col-lg-8{
        flex:1 1 auto;
        width:auto;
        max-width:none;
        min-width:0;
    }

    .blueritt-header .main-menu{
        gap:clamp(14px,2.2vw,38px);
    }

    /* Labels stay on one line; the gap absorbs the pressure instead. */
    .blueritt-header .main-menu .nav-link{
        white-space:nowrap;
    }

}


/* 992–1139px: make the nav fit rather than hand over to the burger.

   Handing over was the first instinct and it is a trap here. The burger and its
   drawer exist, and the JS drives them correctly at any width — but the drawer's
   entire visual design (27 selectors: the panel, the list, links, submenus, the
   CTA block) lives inside the @media(max-width:767px) block, tangled with 13
   unrelated mobile rules for the footer, hero and html. Enabling the burger at
   1000px therefore opens a full-width, unstyled skeleton of blue underlined
   links. Verified in a real browser before backing it out. Re-scoping that
   design properly is a worthwhile refactor, but it is not a nav-overlap fix.

   So instead: tighten the gap and the type just in this band so the six links,
   the logo and both buttons fit on one row. Everything stays visible — no CTA
   is hidden, no menu is swapped — and below 992px the layout stacks as it
   always did. */
@media(min-width:992px) and (max-width:1139px){

    .blueritt-header .main-menu{
        gap:12px;
    }

    .blueritt-header .main-menu .nav-link{
        font-size:14px;
    }

    /* The buttons are what overflowed their column in the first place; a little
       less horizontal padding buys the nav the room it needs. */
    .blueritt-header .header-btn{
        padding-left:16px;
        padding-right:16px;
        font-size:14px;
    }

}

/* =========================================
ICONS — replaces the Font Awesome CDN stylesheet
=========================================
PageSpeed flagged two things this fixes at once: a render-blocking stylesheet
from a third CDN domain (cdnjs), and "Font display — est savings 140 ms", which
was Font Awesome's own `font-display: block` holding icon rendering back.

The site used exactly 12 of Font Awesome's icons. Loading ~110 KB of CSS plus a
webfont from a third-party origin to draw twelve shapes is the whole problem, so
they are inlined here as SVG masks (glyphs taken verbatim from
@fortawesome/fontawesome-free 6.5.2 — same shapes, not redrawn).

Why masks rather than replacing 552 <i> tags with <svg> elements: the existing
markup and every CSS rule that targets it keep working untouched. `mask` +
`background-color: currentColor` inherits `color` exactly like a font glyph did,
and sizing in `em` keeps `font-size` working as before — so .faq-icon i,
.footer-social-icons a i and the rest need no changes at all.
========================================= */

.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands{
    display:inline-block;
    width:1em;
    height:1em;
    vertical-align:-0.125em;   /* matches Font Awesome's own baseline nudge */
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain;    mask-size:contain;
}

.fa-angle-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");}
.fa-chevron-down{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");}
.fa-facebook-f{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/%3E%3C/svg%3E");}
.fa-instagram{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");}
.fa-linkedin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z'/%3E%3C/svg%3E");}
.fa-pinterest{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z'/%3E%3C/svg%3E");}
.fa-play{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E");}
.fa-plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E");}
.fa-search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");}
.fa-tiktok{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/%3E%3C/svg%3E");}
.fa-x-twitter{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");}
.fa-youtube{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");}
.fa-magnifying-glass{-webkit-mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");}

/* =========================================
FONTS — self-hosted, replacing the Google Fonts CDN
=========================================
Google Fonts was the last third-party render-blocking origin: a stylesheet from
fonts.googleapis.com which then referenced font files on fonts.gstatic.com, so a
DNS lookup and TLS handshake on TWO hosts stood between the HTML and the first
painted character. Self-hosting collapses that to files already on this origin,
which also inherit the 1-year immutable cache from .htaccess (the Google CDN
served them with a much shorter lifetime we could not control).

Only the latin and latin-ext subsets are kept. Google serves several per family
(vietnamese, cyrillic, greek); unicode-range means a browser only ever fetches
the one it needs, and this site is UK English — latin-ext already covers the
pound sign, accented characters and curly quotes. Non-Latin text would fall back
to the system font, which is the correct trade for four files instead of nine.

font-display:swap is preserved from the original, so text paints immediately in
the fallback and swaps when the webfont arrives.

Regenerate: fetch the css2 URLs with a modern browser User-Agent (the response
varies by UA — an old one gets .ttf instead of .woff2), download the woff2 files
into assets/css/fonts/, and rewrite each url() to a relative path.
========================================= */

/* Bricolage Grotesque — latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque — latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Commissioner — latin-ext */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/commissioner-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Commissioner — latin */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/commissioner-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===================================
HERO D — "The Stack", rebuilt 4 September 2026

Five product surfaces BUILT in CSS and fanned so each one peeks.

Two things this fixes from the first pass:
  - it used the rejected screenshots, which rendered at 39% with 6-8px text and
    a sidebar of chrome nobody outside the app needs. These cards are markup, so
    the type is sharp at any density and each surface shows only what earns its
    place.
  - "stack" meant peeking, not stacked square. The fan below offsets each card
    up and to the right so a readable strip of every one behind is visible
    before anything moves.

The stage is wider than a card on purpose: the fan needs somewhere to go.
=================================== */

.hero-section.hero-d{ padding: 110px 0 84px; overflow: hidden; }

.hero-d-grid{
    display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:54px; align-items:center;
}

.hero-d-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    height:30px; padding:0 15px; margin-bottom:22px; border-radius:999px;
    border:1px solid rgba(120,150,255,.30); background:rgba(120,150,255,.08);
    font-size:12px; font-weight:600; letter-spacing:.7px; text-transform:uppercase;
    color:rgba(255,255,255,.84);
}
.hero-d-eyebrow i{ flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#ff6200; box-shadow:0 0 0 3px rgba(255,98,0,.22); }

.hero-d-title{
    font-family:'Bricolage Grotesque','Commissioner',sans-serif;
    font-weight:700; font-size:clamp(32px,3.7vw,50px); line-height:1.07;
    letter-spacing:-1.5px; color:#fff; margin:0 0 18px;
}
.hero-d-sub{ font-size:17.5px; line-height:1.6; color:rgba(255,255,255,.62); margin:0 0 26px; max-width:42ch; }

.hero-d-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.hero-d-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    height:52px; padding:0 26px; border-radius:999px;
    font-size:16px; font-weight:600; text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hero-d-btn-primary{ background:linear-gradient(96deg,#ff7a1a,#ff3d2e); color:#fff; box-shadow:0 12px 30px rgba(255,90,20,.30); }
.hero-d-btn-primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 16px 38px rgba(255,90,20,.42); }
.hero-d-btn-ghost{ color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.03); }
.hero-d-btn-ghost:hover{ color:#fff; border-color:rgba(255,255,255,.44); transform:translateY(-2px); }

.hero-d-proof{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px; font-size:13.5px; color:rgba(255,255,255,.46); margin-bottom:24px; }
.hero-d-proof b{ color:rgba(255,255,255,.92); font-weight:600; }
.hero-d-proof em{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.26); }

.hero-d-tabs{ display:flex; gap:7px; flex-wrap:wrap; }
.hero-d-tabs button{
    height:34px; padding:0 14px; border-radius:999px; cursor:pointer;
    border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
    font-family:'Commissioner',sans-serif; font-size:12.5px; font-weight:600;
    color:rgba(255,255,255,.58);
    transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.hero-d-tabs button:hover{ color:#fff; border-color:rgba(255,255,255,.34); }
.hero-d-tabs button:focus-visible{ outline:2px solid #6084ff; outline-offset:2px; }
.hero-d-tabs button[aria-selected="true"]{ color:#fff; border-color:transparent; background:linear-gradient(96deg,#ff8a2b,#ff2d78); }

/* ---- the fan ---- */

.hero-d-stagearea{ perspective:1500px; }

.hero-d-stack{
    position:relative;
    aspect-ratio:1.24 / 1;      /* taller: the fan now rises as much as it spreads */
    cursor:pointer;
}

.hero-d-card{
    position:absolute;
    left:0; bottom:0;
    width:68%;                  /* narrower card, so the wider fan still lands inside the stage */
    /* Fixed height, not content height. Each surface holds different content,
       so left to size themselves the cards came out between 260px and 330px
       tall and the fan read as ragged rather than as a deck. */
    height:60%;
    display:flex; flex-direction:column;
    border-radius:16px; overflow:hidden;
    border:1px solid rgba(110,140,235,.28);
    background:linear-gradient(180deg,#0C1234 0%,#070C22 100%);
    box-shadow:0 26px 60px rgba(0,0,0,.55);
    transform-origin:-6% 118%;  /* pivot below and left of the card, so the fan opens up and to the right */
    transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease, filter .6s ease;
    will-change:transform;
}

/* the fan: each card behind steps up and right, so a strip of every one shows */
/* An aggressive fan, angled like a dealt hand.

   Rotation pivots from the bottom-left corner, so each card swings up and out
   from a shared point rather than sliding sideways — that pivot is what makes
   it read as a hand of cards instead of a stepped stack.

   The cards behind stay clearly legible; depth is carried by offset, angle and
   scale, with only a light brightness falloff. Dimming them further made them
   read as shadows, which defeats the point of a peek. */
/* Rotation is NEGATIVE on purpose. Turning clockwise from this pivot swings
   each card's top edge DOWN, which buried the title bars behind the front card
   and turned an informative peek into a decorative one. Anticlockwise lifts the
   tops clear, so "IntelliScan", "SourceLink" and the rest stay readable in the
   fan. */
/* Six cards since 7 Sep (Product Vault). The ENVELOPE is unchanged — the last
   card still lands at 49% / -44% / -12.8deg / .88 — so the deck occupies exactly
   the space it always did; the steps between cards just got smaller. Widening
   the fan for a sixth card instead would have pushed it past the stage. */
.hero-d-card[data-pos="0"]{ transform:translate(0,0)        rotate(0deg)     scale(1);    opacity:1;   filter:none;                          z-index:7; }
.hero-d-card[data-pos="1"]{ transform:translate(9.8%,-8.8%)  rotate(-2.56deg) scale(.976); opacity:1;   filter:brightness(.95) saturate(.96);  z-index:6; }
.hero-d-card[data-pos="2"]{ transform:translate(19.6%,-17.6%) rotate(-5.12deg) scale(.952); opacity:.98; filter:brightness(.89) saturate(.91);  z-index:5; }
.hero-d-card[data-pos="3"]{ transform:translate(29.4%,-26.4%) rotate(-7.68deg) scale(.928); opacity:.95; filter:brightness(.83) saturate(.86);  z-index:4; }
.hero-d-card[data-pos="4"]{ transform:translate(39.2%,-35.2%) rotate(-10.24deg) scale(.904); opacity:.90; filter:brightness(.76) saturate(.79);  z-index:3; }
.hero-d-card[data-pos="5"]{ transform:translate(49%,-44%)   rotate(-12.8deg) scale(.88);  opacity:.84; filter:brightness(.69) saturate(.72) blur(.4px); z-index:2; }

/* ---- shared card furniture ---- */

.hero-d-bar{
    display:flex; align-items:center; gap:6px;
    padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.07);
    font-size:11.5px; font-weight:600; letter-spacing:.3px; color:rgba(255,255,255,.5);
}
.hero-d-bar s{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.14); text-decoration:none; }
.hero-d-bar span{ margin-left:7px; }

.hero-d-body{ flex:1 1 auto; min-height:0; padding:14px; display:flex; flex-direction:column; gap:12px; justify-content:center; }

.hero-d-found b{ display:block; font-size:15px; font-weight:700; color:#fff; letter-spacing:-.3px; }
.hero-d-found i{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,.40); }

/* metric row */
.hero-d-metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.hero-d-metrics span{ padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); }
.hero-d-metrics i{ display:block; font-style:normal; font-size:10px; color:rgba(255,255,255,.44); margin-bottom:2px; }
.hero-d-metrics b{ font-size:15px; font-weight:700; color:#fff; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }

/* product rows */
.hero-d-rows{ display:flex; flex-direction:column; gap:7px; }
.hero-d-rows > div{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:10px;
    border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02);
}
.hero-d-rows em{ flex:1 1 auto; font-style:normal; font-size:12px; color:rgba(255,255,255,.74); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-d-rows b{ font-size:13px; font-weight:700; color:#fff; }
.hero-d-thumb{
    width:30px; height:30px; flex:0 0 auto; border-radius:7px; text-decoration:none;
    background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.10);
}
.hero-d-thumb-tall{ width:46px; height:52px; border-radius:9px; }

/* IntelliScan card */
.hero-d-body-scan{
    background:
        radial-gradient(60% 80% at 22% 20%, rgba(96,132,255,.30) 0%, rgba(96,132,255,0) 62%),
        radial-gradient(56% 70% at 82% 76%, rgba(255,45,120,.24) 0%, rgba(255,45,120,0) 66%);
    align-items:center; text-align:center; padding:20px 14px;
}
.hero-d-badge{
    display:inline-flex; height:24px; align-items:center; padding:0 11px; border-radius:999px;
    border:1px solid rgba(255,255,255,.18); background:rgba(10,16,40,.6);
    font-size:10.5px; font-weight:600; color:rgba(255,255,255,.74);
}
.hero-d-scan-title{
    font-family:'Bricolage Grotesque','Commissioner',sans-serif;
    font-size:21px; font-weight:700; letter-spacing:-.6px; color:#fff; margin:0;
}
.hero-d-field{
    width:100%; display:flex; align-items:center; gap:9px;
    height:42px; padding:0 5px 0 12px; border-radius:999px;
    border:1px solid transparent;
    background-image:linear-gradient(#0B1234,#0B1234), linear-gradient(96deg,#6084ff,#ff2d78 55%,#ff8a2b);
    background-origin:border-box; background-clip:padding-box,border-box;
}
.hero-d-spark{
    width:24px; height:24px; flex:0 0 auto; border-radius:50%; text-decoration:none;
    background:linear-gradient(135deg,#ff7a1a,#ff2d78);
}
.hero-d-field em{ flex:1 1 auto; font-style:normal; font-size:13px; color:#fff; text-align:left; }
.hero-d-field b{
    flex:0 0 auto; height:32px; padding:0 13px; border-radius:999px;
    display:inline-flex; align-items:center;
    background:linear-gradient(96deg,#ff7a1a,#ff3d2e);
    font-size:11.5px; font-weight:600; color:#fff; white-space:nowrap;
}
.hero-d-chips{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.hero-d-chips span{
    height:26px; padding:0 11px; border-radius:999px; display:inline-flex; align-items:center;
    border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
    font-size:11px; color:rgba(255,255,255,.62);
}

/* SourceLink card */
.hero-d-supplier{ display:flex; gap:12px; align-items:center; }
.hero-d-score{ position:relative; width:64px; height:64px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.hero-d-score svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero-d-score u{ position:relative; text-decoration:none; font-size:17px; font-weight:700; color:#8ff0be; }
.hero-d-score u i{ font-style:normal; font-size:10px; }
.hero-d-supplier em{ display:block; font-style:normal; font-size:13px; font-weight:600; color:#fff; margin-bottom:6px; }
.hero-d-tags{ display:flex; gap:6px; margin-bottom:6px; }
.hero-d-tags span{
    height:22px; padding:0 9px; border-radius:999px; display:inline-flex; align-items:center;
    border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
    font-size:10px; color:rgba(255,255,255,.66);
}
.hero-d-tags .gold{ border-color:rgba(255,176,32,.4); color:#ffd28a; background:rgba(255,176,32,.08); }
.hero-d-supplier p{ margin:0; font-size:11.5px; color:rgba(255,255,255,.5); }
.hero-d-supplier p b{ color:#fff; font-weight:600; }

/* MarginMax card */
.hero-d-inputs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hero-d-inputs span{ padding:9px 11px; border-radius:10px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.02); }
.hero-d-inputs i{ display:block; font-style:normal; font-size:10px; color:rgba(255,255,255,.42); margin-bottom:4px; }
.hero-d-inputs b{ font-size:14px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.hero-d-profit{
    padding:14px; border-radius:13px;
    /* Two halves — gross and net — in one panel rather than two stacked panels:
       the card is fixed-height and clips, and this is the tallest of the six. */
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    background:linear-gradient(125deg,#e0452f 0%,#c9366b 48%,#5b4bd6 100%);
    box-shadow:0 14px 32px rgba(200,60,80,.24);
}
/* A hairline rather than gap alone: the panel is one continuous gradient, so
   without it the two figures read as one row of four numbers.

   The gutter is split across both columns rather than left as grid gap, so the
   two content boxes come out the same width (to within the 1px border). With
   the padding on the second column alone it was 14px narrower than the first,
   and at 320 its value was the one that ran out of the card. */
.hero-d-pcol{ min-width:0; }
.hero-d-pcol:first-child{ padding-right:13px; }
.hero-d-pcol + .hero-d-pcol{ padding-left:13px; border-left:1px solid rgba(255,255,255,.22); }
.hero-d-pcol > i{ display:block; font-style:normal; font-size:11px; line-height:1.3; color:rgba(255,255,255,.8); margin-bottom:4px; }
.hero-d-pcol > b{
    display:block; font-family:'Bricolage Grotesque','Commissioner',sans-serif;
    font-size:30px; font-weight:800; letter-spacing:-1.2px; color:#fff; line-height:1;
}
.hero-d-kpis{ display:flex; gap:8px; margin-top:11px; }
.hero-d-kpis span{ flex:1 1 0; padding:7px 10px; border-radius:9px; background:rgba(255,255,255,.16); }
.hero-d-kpis i{ display:block; font-style:normal; font-size:9.5px; line-height:1.3; color:rgba(255,255,255,.8); margin-bottom:2px; }
/* 13.5, not 14: at 992-1200 the stage is at its narrowest relative to the card,
   and two chips of "133.78%" at 14px were 4px wider than the half-panel. */
.hero-d-kpis b{ font-size:13.5px; line-height:1.25; font-weight:700; color:#fff; }

/* SocialPulse card */
.hero-d-trend{ display:flex; gap:11px; }
.hero-d-trend > div{ flex:1 1 auto; min-width:0; }
.hero-d-trend em{ display:block; font-style:normal; font-size:12.5px; font-weight:600; color:#fff; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-d-tmetrics{ display:flex; gap:8px; margin-bottom:9px; }
.hero-d-tmetrics span{ flex:1 1 0; padding:7px 9px; border-radius:9px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); }
.hero-d-tmetrics i{ display:block; font-style:normal; font-size:9.5px; color:rgba(255,255,255,.44); margin-bottom:3px; }
.hero-d-tmetrics b{ font-size:13px; font-weight:700; color:#fff; }
.hero-d-spark-row{ display:flex; align-items:flex-end; gap:3px; height:20px; }
.hero-d-spark-row s{ flex:1 1 auto; height:var(--h); border-radius:2px; text-decoration:none; background:linear-gradient(180deg,#ff8a2b,rgba(255,138,43,.25)); }

/* ---- responsive ---- */

@media(max-width:1199px){
    .hero-d-grid{ gap:36px; }
    .hero-d-card{ width:80%; }
}

@media(max-width:991px){
    .hero-section.hero-d{ padding:104px 0 60px; }
    .hero-d-grid{ grid-template-columns:1fr; gap:34px; }
    /* Copy first, panels after. The stage used to carry order:-1, which put a
       wall of cards above the headline — the visitor met the product before
       being told what it was. DOM order is already copy-then-stage, so this
       just stops overriding it. */
    .hero-d-stack{ max-width:560px; margin:0 auto; }
    .hero-d-sub{ max-width:none; }
}

@media(max-width:767px){
    /* The column centres as a whole here. On a phone the grid has already
       collapsed to one column and the card stack below is centred in it, so
       left-aligned copy above a centred deck read as two different layouts
       stacked on each other.

       text-align carries the pill, the headline and the sub. The other three
       are flex containers, where text-align does nothing to the boxes — each
       needs its own main-axis centring. The buttons are the exception: they
       are already flex:1 1 100% below, so they fill the row and have nothing
       left to centre. */
    .hero-d-copy{ text-align:center; }
    .hero-d-proof,
    .hero-d-tabs{ justify-content:center; }

    /* The sub ran wider than the headline it sits under — 357px against 320px
       at 390, and 473px against 407px from 480 up, because .hero-d-sub drops
       to max-width:none at 991 and then just fills the column.

       320px is the headline's own measure: the title is clamp(32px,3.7vw,50px)
       and 3.7vw does not overtake 32px until an 865px viewport, so across this
       whole breakpoint the type is 32px and its longest line ("Commerce
       Intelligence") is 320px wide. Capping here therefore reads as the same
       measure at 360-390 and a deliberately shorter one above, never wider.
       margin-inline centres the box itself — text-align only centres the lines
       inside it. */
    .hero-d-sub{ max-width:320px; margin-inline:auto; }

    .hero-d-btn{ flex:1 1 100%; height:54px; }

    /* The eyebrow is a fixed-height pill (30px) carrying 41 characters of
       uppercase. At 12px with .7px tracking that copy needs a 399px viewport,
       so on every phone narrower than that it wrapped to a second line — and
       the second line fell straight out of the bottom of the pill, because the
       height is fixed and the border is drawn at 30px.

       Sized against the viewport instead: the copy costs ~27.2px of width per
       1px of font-size (tracking in em, so it shrinks with the type), against
       (viewport - 58px) of room once the 22px of padding, the 6px dot and the
       6px gap are paid for. That holds one line from 320px up, and clamps back
       to the desktop 12px at 407px.

       nowrap is the guarantee: if the copy is ever lengthened it will overflow
       visibly here rather than silently break the pill open again.

       It stays inline-flex, which is what lets the column's text-align centre
       it: the pill is an inline-level box hugging its copy, so it is centred
       the same way a line of text is. */
    .hero-d-eyebrow{
        white-space:nowrap; max-width:100%;
        padding:0 11px; gap:6px;
        font-size:clamp(9px,2.95vw,12px); letter-spacing:.05em;
    }

    /* The card's height is proportional (a % of the stage) but its CONTENT has
       a fixed minimum — measured at 323px on desktop, in a 325px card. Keeping
       aspect-ratio:1.24/1 here gave a ~289px stage and a ~173px card, roughly
       half what the content needs, and overflow:hidden simply cut it off.
       So on a phone the stage gets an explicit height and the card takes most
       of it, rather than a fraction of a box sized for a wide screen.
       MarginMax is the tall one — it needs 342px where the other four need 326,
       so the stage is sized for it rather than for the average. 84% of 430px
       = 361px, leaving ~19px of headroom for font fallback and reflow. */
    .hero-d-stack{ aspect-ratio:auto; height:430px; }

    /* The FRONT card is centred on the screen, and the fan opens into the space
       left over.
       ------------------------------------------------------------------------
       The previous 4.7% centred the deck's *bounding box* — front card plus the
       whole up-and-right throw — which is the right answer on desktop, where
       the fan is a wide spread and reads as one object. On a phone the throw is
       short and the cards behind show only as a thin stepped edge, so the thing
       the eye centres on is the front card alone. At 4.7% that card sat 17px
       left of centre at 390 (29.2px of gutter against 46.1px), which is exactly
       the off-centre look being reported.

       The three numbers are locked together and must stay so:
           left 7%  +  width 86%  +  max throw 7%  =  100%
       Centring the card means equal 7% gutters, which leaves 7% — not the old
       14% — for the fan before it reaches the stage edge. So the horizontal
       steps halve. The VERTICAL steps do not: they are what lifts each card's
       title bar clear of the one in front, and the stage has room for them
       (16% of 430px = 68.8px, against the card's own 84%). The peek stays as
       legible as it was; it just leans less. */
    .hero-d-card{ width:86%; height:84%; left:7%; }

    .hero-d-card[data-pos="1"]{ transform:translate(1.4%,-3.2%)  rotate(-1.12deg) scale(.988); }
    .hero-d-card[data-pos="2"]{ transform:translate(2.8%,-6.4%)  rotate(-2.24deg) scale(.976); }
    .hero-d-card[data-pos="3"]{ transform:translate(4.2%,-9.6%)  rotate(-3.36deg) scale(.964); }
    .hero-d-card[data-pos="4"]{ transform:translate(5.6%,-12.8%) rotate(-4.48deg) scale(.952); }
    .hero-d-card[data-pos="5"]{ transform:translate(7%,-16%)     rotate(-5.6deg)  scale(.94); }

    .hero-d-metrics b{ font-size:13.5px; }
    .hero-d-pcol > b{ font-size:26px; }

    /* ---- SourceLink: the match row ran off the side of its own card ----

       .hero-d-supplier is a two-item flex: the 64px score ring, then a div
       holding the title and the three tags. That div is a flex item, so it
       takes min-width:auto and cannot shrink below its content's min-content
       width — and its content includes .hero-d-tags, a nested flex row of
       three pills that do not wrap. Those pills are 255px together, so the
       div had a 255px floor no matter how narrow the card got.

       Measured: the body's scrollWidth was a constant 327px against a client
       width of 255 at a 320px viewport, 287 at 360 and 313 at 390 — so the row
       overflowed by 63px, 32px and 7px respectively, and overflow:hidden on
       the card cut "verified manufacturer" mid-word along with two of the five
       stars.

       min-width:0 removes the floor, which lets the title wrap; flex-wrap lets
       the tags take a second line rather than a wider one. Height is free
       here — SourceLink had 55-66px of slack at the bottom of its card, and a
       wrapped tag row costs 27 of it. */
    .hero-d-supplier > div{ min-width:0; }
    .hero-d-tags{ flex-wrap:wrap; row-gap:5px; }

    /* SocialPulse's engagement grid is fixed further down, in the block that
       defines it — these rules and that definition have equal specificity, so
       the one written later wins and an override here would do nothing. */
}

@media(prefers-reduced-motion: reduce){
    .hero-d-card{ transition:none; }
    .hero-d-btn:hover{ transform:none; }
}


/* ===================================
HERO D — content polish (4 September 2026)

Measured fill before this pass: Explorer 84%, IntelliScan 68%, SourceLink 68%,
MarginMax 101% (overflowing), SocialPulse 95%. Two cards read as half-empty and
one was spilling — the deck only works if every card looks finished, because
any of them can be the one on top.

Bodies now start at the top and distribute, rather than centring a short stack
of blocks and leaving dead space above and below.
=================================== */

.hero-d-body{ justify-content:flex-start; }

/* IntelliScan — the search now returns something, so the card finishes its
   thought instead of stopping at an empty field. */
.hero-d-scanout{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px;
    width:100%; margin-top:2px;
}
.hero-d-scanout span{
    padding:8px 9px; border-radius:9px; text-align:left;
    border:1px solid rgba(255,255,255,.09); background:rgba(9,14,36,.55);
}
.hero-d-scanout i{ display:block; font-style:normal; font-size:9.5px; color:rgba(255,255,255,.46); margin-bottom:3px; }
.hero-d-scanout b{ font-size:14px; font-weight:700; color:#fff; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }

/* SourceLink — the detail row the real screen shows under a match */
.hero-d-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.hero-d-facts span{
    padding:8px 10px; border-radius:9px;
    border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025);
}
.hero-d-facts i{ display:block; font-style:normal; font-size:9.5px; color:rgba(255,255,255,.44); margin-bottom:3px; }
.hero-d-facts b{ font-size:13px; font-weight:700; color:#fff; }

/* "19 more" — says the list continues, which one card cannot otherwise show */
.hero-d-more{
    display:flex; align-items:center; gap:8px;
    padding:9px 11px; border-radius:10px;
    border:1px dashed rgba(255,255,255,.12); background:rgba(255,255,255,.015);
}
.hero-d-more s{
    width:20px; height:20px; border-radius:50%; margin-right:-10px; text-decoration:none;
    border:1.5px solid #0b1130;
    background:linear-gradient(135deg,#2b3a72,#16204a);
}
.hero-d-more s:first-child{ background:linear-gradient(135deg,#ff8a2b,#ff2d78); }
.hero-d-more s:nth-child(2){ background:linear-gradient(135deg,#6084ff,#2b3a72); }
.hero-d-more em{ margin-left:14px; font-style:normal; font-size:11.5px; color:rgba(255,255,255,.5); }

.hero-d-tags span:last-child{ letter-spacing:.2px; }

/* MarginMax was 5px over its box — the profit panel carried the excess */
.hero-d-profit{ padding:12px; }
.hero-d-pcol > b{ font-size:27px; }
.hero-d-kpis{ margin-top:9px; }
.hero-d-kpis span{ padding:6px 8px; }

@media(max-width:767px){
    /* Two chips side by side stopped fitting once the panel split in half.
       flex:1 1 0 cannot shrink a chip below its own text, and "133.78%" alone
       needs more than the 124px column, so the pair overflowed the card by
       34px — the last value ran off the right edge.

       Stacked instead, each set as label | value on a single line. Each still
       reads as its own box, and the pair is SHORTER than the one chip row it
       replaces — 46px against 60.5px — which this card needs, because its
       content clears its fixed height by only 3px. */
    .hero-d-kpis{ flex-direction:column; gap:4px; margin-top:8px; }
    .hero-d-kpis span{
        display:flex; align-items:baseline; justify-content:space-between;
        gap:6px; padding:3px 7px;
    }
    /* At 320 the column is only 99px, and "Margin" + "133.78%" on one line
       needed 107 — the value ran out past the card. Both scale with the
       viewport rather than adding a second breakpoint for one phone. */
    .hero-d-kpis i{ margin-bottom:0; font-size:clamp(9px,2.6vw,10px); }
    .hero-d-kpis b{ font-size:clamp(11px,3.2vw,12.5px); }
}

@media(max-width:767px){
    .hero-d-scanout b, .hero-d-facts b{ font-size:12px; }
    .hero-d-more em{ font-size:10.5px; }
}


/* Explorer went 24px over once it carried three product rows. Tightening the
   rows rather than dropping one: a list of two reads as a stub, three reads as
   a list. */
.hero-d-rows{ gap:6px; }
.hero-d-rows > div{ padding:6px 9px; }
.hero-d-thumb{ width:26px; height:26px; border-radius:6px; }
.hero-d-rows em{ font-size:11.5px; }
.hero-d-rows b{ font-size:12.5px; }


/* SocialPulse — rebuilt as a list.

   One product left a third of the card empty, its thumbnail read as an
   unfinished grey square, and seven bars stretched across the full width came
   out as slabs rather than a trend. Three rows fill the card, match what the
   real screen shows, and give the sparkline a narrow column where it reads as
   a rising line. Figures are the real top three from SocialPulse. */
.hero-d-tlist{ display:flex; flex-direction:column; gap:7px; }
.hero-d-tlist > div{
    display:flex; align-items:center; gap:10px;
    padding:7px 9px; border-radius:10px;
    border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.022);
}
.hero-d-tlist em{
    flex:1 1 auto; min-width:0; font-style:normal;
    font-size:11.5px; font-weight:600; color:rgba(255,255,255,.86);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero-d-tlist em u{
    display:block; text-decoration:none; margin-top:2px;
    font-size:9.5px; font-weight:400; color:rgba(255,255,255,.40);
}
.hero-d-views{ flex:0 0 auto; text-align:right; }
.hero-d-views b{ display:block; font-size:12.5px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.hero-d-views i{ font-style:normal; font-size:9px; color:rgba(255,255,255,.40); }

/* ===================================
HERO D — Product Vault collections (13 September 2026)

The card's claim is "43 products across 21 collections", which it could only
ever state as a number. These are the collections.

Deliberately inside the card, not floating around it: at the size a tile has to
be out in the stage it is too small for a busy lifestyle photo to read as
anything, and the fan behind it competes. In here they get a clean dark ground,
a consistent crop and a caption.
=================================== */
/* Cards carrying an extra block: Product Vault gained the collection strip and
   SocialPulse the engagement band, and both then needed 289-296px of content in
   a 282px body. justify-content:center splits an overflow across BOTH ends, so
   scrollHeight reports 0 and the only visible symptom is the last row sitting
   hard against the card's bottom edge. Measure headroom, not scrollHeight. */
.hero-d-body-tight{ gap:9px; }
.hero-d-vaultstrip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.hero-d-vaultstrip figure{ margin:0; min-width:0; }
.hero-d-vaultstrip img{
    display:block; width:100%; height:30px; object-fit:cover;
    border-radius:7px;
    border:1px solid rgba(255,255,255,.12);
    /* The source art is bright daylight product photography on a card that is
       nearly black. Left raw it glares; this seats it on the card's ground
       without washing the colour out. */
    filter:saturate(.92) brightness(.94);
}
.hero-d-vaultstrip figcaption{
    margin-top:4px; text-align:center;
    font-size:8.5px; line-height:1.1; color:rgba(255,255,255,.46);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media(max-width:991px){
    .hero-d-vaultstrip img{ height:30px; }
    .hero-d-vaultstrip figcaption{ display:none; }
}

/* Social Engagement — the four totals off the SocialPulse screen. Four columns
   at card scale, so the icon is a 22px ring rather than the 40px one the app
   uses; the gradient ring is the app's, kept because it is what makes the row
   read as SocialPulse and not as a generic stat strip.

   grid, not flex: equal columns mean the four figures line up on a common
   baseline whatever their width, so "163" does not sit higher than "209.04K". */
.hero-d-engage{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;
    padding:6px 2px 0;
    border-top:1px solid rgba(255,255,255,.07);
}
.hero-d-engage span{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.hero-d-engage s{
    width:22px; height:22px; margin-bottom:5px; text-decoration:none;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; color:#fff;
    background:linear-gradient(135deg,#4f7cf7 0%,#a45bd8 52%,#ff5c5c 100%);
}
.hero-d-engage s svg{ width:12px; height:12px; }
.hero-d-engage i{
    font-style:normal; font-size:8.5px; letter-spacing:.02em;
    color:rgba(255,255,255,.46); margin-bottom:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.hero-d-engage b{
    font-size:12.5px; font-weight:700; color:#fff; letter-spacing:-.3px;
    font-variant-numeric:tabular-nums;
}

@media(max-width:767px){
    /* Two rows of two rather than four cramped columns.

       ---- and the cells lie down, because four stacked ones did not fit ----

       A cell that stacks a 22px ring above a label above a value is 54px tall.
       Four of them, two-up, cost 116px where the desktop's single row of four
       costs 54 — which pushed SocialPulse's body to 334px inside a card whose
       height is fixed at 319px. With overflow:hidden on the card, the second
       trend row simply lost its lower half. It was the only card in the deck
       with negative slack, and it had it at every phone width.

       So the ring moves beside the text instead of above it. Grid areas rather
       than a wrapper element, so the markup does not change: ~27px a cell,
       ~62px the block, and the card closes with room to spare.

       align-items:center on the ring only — the label and value stay in their
       own rows, which keeps the four values on a common baseline across the
       two columns, the thing the four-column grid was chosen for originally. */
    .hero-d-engage{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 6px; }
    .hero-d-engage span{
        display:grid; grid-template-columns:auto minmax(0,1fr);
        grid-template-areas:"icon label" "icon value";
        align-items:center; column-gap:7px; text-align:left;
    }
    .hero-d-engage s{ grid-area:icon; margin-bottom:0; }
    .hero-d-engage i{ grid-area:label; margin-bottom:1px; }
    .hero-d-engage b{ grid-area:value; }
}

/* narrow column, so seven bars read as a rise rather than as blocks */
.hero-d-tlist .hero-d-spark{
    flex:0 0 auto; width:46px; height:20px;
    display:flex; align-items:flex-end; gap:2px;
    background:none; border-radius:0;
}
.hero-d-tlist .hero-d-spark s{
    flex:1 1 auto; height:var(--h); border-radius:1.5px; text-decoration:none;
    background:linear-gradient(180deg,#ff8a2b,rgba(255,138,43,.28));
}

@media(max-width:767px){
    .hero-d-tlist em{ font-size:10.5px; }
    .hero-d-tlist .hero-d-spark{ display:none; }
}


/* ===================================
HERO D — detail pass (5 September 2026)

The five cards were built entirely from type and boxes: six thumbnail slots sat
empty, and across the whole stack there was exactly one SVG and no images at
all. Sharp text was the right call — the rejected screenshots failed because
they were unreadable — but "no screenshots" got applied as "no pictures", and
the cards read as wireframes.

Everything added here is either a real asset the site already ships (so nothing
new goes into a deploy) or vector drawn at final size, which keeps the original
sharpness argument intact.
=================================== */

/* Product thumbnails. These slots were empty rounded squares — the single most
   obvious "unfinished" tell on the front card. */
.hero-d-thumb{
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.62);
    background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.035));
}
.hero-d-thumb svg{ width:70%; height:70%; }

/* Platform marks. Amazon and Alibaba already sit on this exact dark ground in
   the trusted-by strip, and TikTok.svg is pure #fff, so all three carry over. */
.hero-d-plat{
    height:13px; width:auto; margin-left:auto; align-self:center;
    opacity:.72; object-fit:contain;
}
.hero-d-found{ display:flex; align-items:center; flex-wrap:wrap; column-gap:10px; }
.hero-d-found b, .hero-d-found i{ flex:0 0 auto; }
.hero-d-found b{ width:100%; }
.hero-d-found i + .hero-d-plat{ margin-left:auto; }

/* Star ratings, drawn rather than typed. "4.8 ★" as text was the only rating
   signal in a product tool whose whole job is judging products. */
.hero-d-stars{
    display:inline-flex; align-items:center; gap:1.5px; flex:0 0 auto;
    color:#ffc046;
}
.hero-d-stars svg{ width:9px; height:9px; }
.hero-d-stars u{
    text-decoration:none; margin-left:5px;
    font-size:11px; font-weight:600; color:rgba(255,255,255,.60);
    font-variant-numeric:tabular-nums;
}
.hero-d-rows .hero-d-stars{ margin-left:auto; }
.hero-d-rows em{ flex:1 1 auto; min-width:0; }

/* .hero-d-tags span (0,1,1) out-specifies .hero-d-stars (0,1,0), so the stars
   came out grey here while the identical markup rendered gold in the rows. */
.hero-d-tags span.hero-d-stars{ color:#ffc046; }

/* TikTok ships as a 122x122 square icon, not a wordmark like the other two —
   at the wordmark's 13px height it was an unreadable blob. */
.hero-d-plat-icon{ height:17px; }

.hero-d-tick{ display:inline-flex; align-items:center; gap:5px; }
.hero-d-tick svg{ width:11px; height:11px; color:#35d07f; flex:0 0 auto; }

.hero-d-chip-flag{ gap:6px; }
.hero-d-chip-flag svg{ width:14px; height:10px; border-radius:2px; flex:0 0 auto; }
.hero-d-flagfact{ display:inline-flex; align-items:center; gap:6px; }
.hero-d-flagfact svg{ width:15px; height:10px; border-radius:2px; }

/* Price distribution. .hero-d-spark-row was written for the first pass and then
   never used by any card — this is what it was for. */
.hero-d-dist{
    display:flex; align-items:center; gap:10px;
    margin-top:3px; padding:6px 10px; border-radius:10px;   /* card is fixed-height and clips */
    border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02);
}
.hero-d-dist i{
    font-style:normal; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase;
    color:rgba(255,255,255,.40); flex:0 0 auto;
}
.hero-d-dist .hero-d-spark-row{ flex:1 1 auto; height:18px; }
.hero-d-dist u{
    text-decoration:none; font-size:11.5px; font-weight:600;
    color:rgba(255,255,255,.70); flex:0 0 auto; font-variant-numeric:tabular-nums;
}

/* MarginMax cost breakdown — the card had 56px of unused height and showed a
   profit figure with nothing to explain where it came from. */
.hero-d-break{ margin-top:12px; }
.hero-d-breakbar{
    display:flex; height:8px; border-radius:999px; overflow:hidden;
    background:rgba(255,255,255,.05);
}
.hero-d-breakbar s{ width:var(--w); text-decoration:none; }
.hero-d-breakbar .c1{ background:linear-gradient(90deg,#6084ff,#4a68d8); }
.hero-d-breakbar .c2{ background:linear-gradient(90deg,#ff8a2b,#ff6a1f); }
.hero-d-breakbar .c3{ background:linear-gradient(90deg,#35d07f,#28b06a); }
.hero-d-legend{
    display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px;
    font-size:11px; color:rgba(255,255,255,.48);
}
.hero-d-legend span{ display:inline-flex; align-items:center; gap:6px; }
.hero-d-legend u{ width:7px; height:7px; border-radius:2px; text-decoration:none; }
.hero-d-legend .c1{ background:#6084ff; }
.hero-d-legend .c2{ background:#ff8a2b; }
.hero-d-legend .c3{ background:#35d07f; }
.hero-d-legend b{ color:rgba(255,255,255,.80); font-weight:600; }

/* The AI dot in the search field was a bare gradient circle */
.hero-d-spark{ display:inline-flex; align-items:center; justify-content:center; }
.hero-d-spark svg{ width:11px; height:11px; }

@media(max-width:767px){
    .hero-d-rows .hero-d-stars{ display:none; }   /* price is what matters at this width */
    .hero-d-dist i{ display:none; }

    /* 3px back from the breakdown. MarginMax now carries two profit figures,
       and at 360 — where the panel labels wrap to two lines — it finished 1px
       over its fixed box. Has to sit after the .hero-d-break{margin-top:12px}
       above rather than with the other MarginMax mobile rules, or it loses the
       cascade to it. The body's own 12px gap still separates the two blocks. */
    .hero-d-break{ margin-top:9px; }
}


/* =========================================================================
   CURRENCY SWITCH — pricing page
   Billing is USD; GBP is guidance only, hence the note that appears with it.
   Prices live in the lookup table in plans-and-pricing.php.

   Styling deliberately mirrors .top-sc-tb .nav-pills / .nav-link.p-tb on this
   page, so the two control rows read as one system. It sits on a dark section,
   not on the white body — hence the light text.
   ========================================================================= */
.cur-switch-wrap {
    text-align: center;
    margin: 0 auto 22px;
}

.cur-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: transparent;
    border: 1.5px solid rgba(93, 131, 197, .35);
    border-radius: 80px;
}

.cur-btn {
    padding: 3px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
    color: #aaa;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}

.cur-btn:hover {
    color: #fff;
}

.cur-btn.is-active {
    color: #fff;
    border-color: #ff6a00;
    background-image: radial-gradient(86% 61% at 6% 14%, rgba(213, 90, 45, .67) 0%, rgba(255, 106, 0, .38) 45%, rgb(27, 21, 26) 100%);
}

.cur-btn:focus-visible {
    outline: 2px solid #ff6a00;
    outline-offset: 3px;
}

.cur-note {
    max-width: 620px;
    margin: 14px auto 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .60);
}

.cur-note strong {
    color: rgba(255, 255, 255, .88);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .cur-btn {
        padding: 3px 16px;
        font-size: 14px;
    }

    .cur-note {
        font-size: 12px;
        padding: 0 14px;
    }
}

/* ===================================
HERO D — "the tool just ran" (8 September 2026)
===================================

The first pass at this was 5px lifts and plain fades. Technically correct,
visually invisible — you could not tell it had happened. This one commits.

The idea: a dealt card should read as a screen that has just FINISHED WORKING and
is showing you the result. Three layers, choreographed rather than scattered:

  1. a light sweep crosses the card, once — the scan
  2. each content block RESOLVES out of blur, rising and scaling up
  3. the data draws itself: bars grow past their mark and settle, figures count
     and then land with a pop

Magnitudes are deliberately large enough to see: 18px of travel, 0.93 scale,
10px of blur. Subtlety was the problem, not the solution.

Still only on the front card, still only on a deal, still nothing on first paint
— this hero is the LCP element and its opening frame stays still and complete.
Everything animates opacity / transform / filter, or a scale inside an
already-fixed-height row, so none of it can shift layout.
=================================== */

/* 1 — THE SCAN. Clipped by the card's own overflow:hidden and 16px radius. */
.hero-d-card.is-dealing::after {
    content: "";
    position: absolute;
    inset: -20% -60%;
    pointer-events: none;
    z-index: 9;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, .10) 46%,
        rgba(255, 170, 90, .16) 50%,
        rgba(255, 255, 255, .10) 54%,
        transparent 62%);
    animation: heroDSweep .9s cubic-bezier(.32, 0, .18, 1) both;
}
@keyframes heroDSweep {
    from { transform: translateX(-70%); }
    to   { transform: translateX(70%); }
}

/* 2 — CONTENT RESOLVES. Blur is what makes this feel tactile rather than
   merely moved; it reads as focus being found. */
@keyframes heroDResolve {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.93);
        filter: blur(10px);
    }
}
.hero-d-card.is-dealing .hero-d-body > * {
    animation: heroDResolve .60s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-d-card.is-dealing .hero-d-body > *:nth-child(1) { animation-delay: .04s; }
.hero-d-card.is-dealing .hero-d-body > *:nth-child(2) { animation-delay: .12s; }
.hero-d-card.is-dealing .hero-d-body > *:nth-child(3) { animation-delay: .20s; }
.hero-d-card.is-dealing .hero-d-body > *:nth-child(4) { animation-delay: .28s; }
.hero-d-card.is-dealing .hero-d-body > *:nth-child(5) { animation-delay: .36s; }
.hero-d-card.is-dealing .hero-d-body > *:nth-child(n+6) { animation-delay: .44s; }

/* 3 — THE DATA DRAWS ITSELF.
   Bars overshoot their mark and settle. scaleY, not height: it is composited,
   and the overshoot is what makes it feel drawn rather than revealed. */
@keyframes heroDBarDraw {
    from { transform: scaleY(0); opacity: .25; }
}
.hero-d-card.is-dealing .hero-d-spark-row s,
.hero-d-card.is-dealing .hero-d-tlist .hero-d-spark s {
    transform-origin: bottom;
    animation: heroDBarDraw .62s cubic-bezier(.34, 1.42, .64, 1) both;
}
.hero-d-card.is-dealing .hero-d-spark-row s:nth-child(1),
.hero-d-card.is-dealing .hero-d-tlist .hero-d-spark s:nth-child(1) { animation-delay: .30s; }
.hero-d-card.is-dealing .hero-d-spark-row s:nth-child(2),
.hero-d-card.is-dealing .hero-d-tlist .hero-d-spark s:nth-child(2) { animation-delay: .35s; }
.hero-d-card.is-dealing .hero-d-spark-row s:nth-child(3),
.hero-d-card.is-dealing .hero-d-tlist .hero-d-spark s:nth-child(3) { animation-delay: .40s; }
.hero-d-card.is-dealing .hero-d-spark-row s:nth-child(4),
.hero-d-card.is-dealing .hero-d-tlist .hero-d-spark s:nth-child(4) { animation-delay: .45s; }
.hero-d-card.is-dealing .hero-d-spark-row s:nth-child(5),
.hero-d-card.is-dealing .hero-d-tlist .hero-d-spark s:nth-child(5) { animation-delay: .50s; }
.hero-d-card.is-dealing .hero-d-spark-row s:nth-child(6),
.hero-d-card.is-dealing .hero-d-tlist .hero-d-spark s:nth-child(6) { animation-delay: .55s; }
.hero-d-card.is-dealing .hero-d-spark-row s:nth-child(n+7),
.hero-d-card.is-dealing .hero-d-tlist .hero-d-spark s:nth-child(n+7) { animation-delay: .60s; }

/* The cost-breakdown bar wipes in from the left AS WELL AS resolving.
   It is a direct child of .hero-d-body, so it also matches the rule above at
   equal specificity — declaring only the wipe here would have replaced the
   resolve rather than added to it, and the block would never rise or unblur.
   Two animations, two delays: resolve on the cascade's beat, wipe just after. */
@keyframes heroDWipe { from { clip-path: inset(0 100% 0 0); } }
.hero-d-card.is-dealing .hero-d-break,
.hero-d-card.is-dealing .hero-d-legend {
    animation: heroDResolve .60s cubic-bezier(.16, 1, .3, 1) both,
               heroDWipe    .70s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .20s, .34s;
}

/* Star ratings fill left to right, so a rating reads as being awarded. */
@keyframes heroDStar { from { clip-path: inset(0 100% 0 0); opacity: .4; } }
.hero-d-card.is-dealing .hero-d-stars {
    animation: heroDStar .5s ease-out both;
    animation-delay: .40s;
}

/* 4 — THE FIGURE LANDS. Applied by the script the instant its count-up
   finishes, so the pop is exactly on the beat rather than on a guessed delay. */
@keyframes heroDLand {
    0%   { transform: scale(1);    text-shadow: none; }
    38%  { transform: scale(1.17); text-shadow: 0 0 20px rgba(255, 150, 60, .8); }
    100% { transform: scale(1);    text-shadow: none; }
}
.hero-d-card .is-landed {
    animation: heroDLand .46s cubic-bezier(.34, 1.5, .64, 1);
}

/* Asked not to animate? Then nothing does. The cards ship finished, so this
   simply leaves them as they are. */
@media (prefers-reduced-motion: reduce) {
    .hero-d-card.is-dealing,
    .hero-d-card.is-dealing *,
    .hero-d-card.is-dealing::after,
    .hero-d-card .is-landed {
        animation: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}

/* ===================================
HERO D — the deck's own tells (8 September 2026)
===================================

Two things the deck was not saying out loud.

1. THE AUTOPLAY WAS INVISIBLE. It deals every 4.6s with nothing to indicate it,
   so the first deal reads as something you did rather than something it does. A
   line filling across the active tab makes the rhythm legible, gives the eye
   something to follow between deals, and — because it visibly stops on hover —
   turns "it paused" into feedback instead of a coincidence.

2. THE FAN RESETTLED IN UNISON. Every card shares one .6s transition, so the
   whole hand snapped at once. Cards do not do that. A few frames of delay per
   position lets it ripple back from the front, which is most of the difference
   between "six divs moved" and "a hand of cards".
=================================== */

/* 1 — autoplay progress on the active tab. */
.hero-d-tabs button { position: relative; overflow: hidden; }

.hero-d-tabs button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff8a2b, #ff2d78);
    transform: scaleX(0);
    transform-origin: left;
    /* Matches the 4600ms interval in the script. If one changes, change both. */
    animation: heroDTick 4.6s linear both;
}
@keyframes heroDTick { to { transform: scaleX(1); } }

/* Paused with the deck — on hover, off-screen, or after a tab click. Freezing
   the bar mid-fill is the whole point: it says the pause was deliberate. */
.hero-d-tabs.is-paused button[aria-selected="true"]::after {
    animation-play-state: paused;
}

/* 2 — the hand resettles from the front outwards, not all at once. */
.hero-d-card[data-pos="1"] { transition-delay: .035s; }
.hero-d-card[data-pos="2"] { transition-delay: .070s; }
.hero-d-card[data-pos="3"] { transition-delay: .105s; }
.hero-d-card[data-pos="4"] { transition-delay: .140s; }
.hero-d-card[data-pos="5"] { transition-delay: .175s; }

@media (prefers-reduced-motion: reduce) {
    .hero-d-tabs button[aria-selected="true"]::after { animation: none; transform: scaleX(1); }
    .hero-d-card[data-pos] { transition-delay: 0s; }
}

/* ===================================
HERO D — pointer parallax (8 September 2026)
===================================

The fan tilts a few degrees towards the cursor. Applied to .hero-d-stack, NOT
to the cards: each card's transform is its position in the fan, and overwriting
it would collapse the hand. The stage already carries perspective:1500px, so
rotating the stack inside it is real 3D rather than a skew.

The transition is deliberately kept while tracking. An instant follow feels
twitchy and cheap; ~350ms of lag reads as the deck having weight.

Guarded to fine pointers. On a phone there is no cursor to track, and most of
this site's traffic is mobile — median scroll depth there is 22.8%.
=================================== */

@media (hover: hover) and (pointer: fine) {
    .hero-d-stack {
        transform: rotateX(var(--hero-tilt-x, 0deg)) rotateY(var(--hero-tilt-y, 0deg));
        transition: transform .35s cubic-bezier(.22, 1, .36, 1);
        will-change: transform;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-d-stack { transform: none !important; transition: none !important; }
}