/* ===== design tokens ===== */
:root {
    --color-accent: #00AEFF;
    --color-accent-hover: #00aeffec;
    --color-white: #FFFFFF;
    --color-text: #FFFFFF;
    /* #999aa1 */
    --color-text-muted: #cccccc;
    --color-text-muted-2: #cccccc;
    --color-bg-top: #000a19;
    --color-bg-bottom: #010314;
    --color-nav-panel: #010816f5;
    --color-border-soft: #ffffff14;
    --color-border-login: #ffffff8c;
    --color-border-toggler: #ffffff59;
    --white-border-30: #ffffff24;
    --ring-glow: #2b9bf026;
    --owl-drop-shadow: #00aeff88;

    /* surfaces */
    --color-card-bg: #010516;
    --color-card-bg-2: #0a0d1f;
    --color-card-bg-3: #111323;
    --color-surface-soft: #fcfcfc0d;
    --color-photo-bg: #1b2236;

    /* borders */
    --color-border-faint: rgba(255, 255, 255, 0.1);
    --color-border-blue: rgba(0, 140, 255, 0.32);

    /* blue gradient (cards / glows) */
    --color-grad-blue-dark: #1F4FA8;
    --color-grad-blue-light: #68AAFF;

    /* misc */
    --color-linkedin: #1275B1;
    --color-glow-accent-15: rgba(0, 174, 255, .15);

    /* team photo tints */
    --team-tint-pink: #e7c9c1;
    --team-tint-green: #cfe0c8;
    --team-tint-blue: #c3d6dd;

    /* attack / intelligence cards */
    --color-attack-bg-top: #0b1730;
    --color-attack-bg-bottom: #060c1c;
    --color-attack-icon-top: #2EB9FF;
    --color-attack-icon-bottom: #1C4E99;
    --color-attack-icon-border: #34c0ff;
    --color-attack-icon-glow: rgba(46, 185, 255, .45);
    --color-border-card: #ffffff1f;

    --font-body: 'Urbanist', sans-serif;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: linear-gradient(180deg, var(--color-bg-top) 0%, var(--color-bg-bottom) 100%);
    overflow-x: hidden;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
}
.site-footer {
    margin-top: auto;
}
a
{
    text-decoration: none;
    color:var(--color-white);
    cursor: pointer;
}

/* twinkling gradient triangles */
.spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: twinkle 4s ease-in-out infinite;
    /* animation-delay: calc(var(--i) * 0.45s); */
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.50;
    }

    50% {
        opacity: 1;
    }
}

/* #00AEFF light travelling along the existing grid lines */
.line-flow-group {
    mix-blend-mode: screen;
}

.line-flow {
    fill: none;
    stroke: #9bdcff;
    stroke-width: 2.5;
    stroke-linecap: butt;
    stroke-dasharray: 22 78;
    filter: drop-shadow(0 0 4px #9bdcff);
    animation: lineFlow var(--dur, 5s) linear infinite;
    animation-delay: var(--d, 0s);
}

@keyframes lineFlow {
    0% {
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.hero {
    position: relative;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.bg-grid svg,
.bg-grid img {
    display: block;
    width: 73%;
    height: 95%;
    object-fit: cover;
    margin: 0 auto;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.hero-content img {
    width: 100%;
    max-width: 180px;
    height: auto;
}

.hero-owl {
    filter: drop-shadow(0 1px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px var(--owl-drop-shadow));
}

/* ===== hero text: intro (top) ===== */
.hero-intro {
    max-width: 725px;
    margin-bottom: 1rem;
}

.hero-title {
    color: var(--color-white);
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.hero-sub {
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 1.6rem;
}

.hero-cta .btn-contact,
.hero-cta .btn-login {
    padding: .25rem 1.2rem;
    font-size: 1rem;
}

/* ===== hero text: outro (bottom) ===== */
.hero-outro {
    margin-top: 1.5rem;
}

.hero-tagline {
    color: var(--color-white);
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 1.6rem;
}

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

.trust-badges img {
    width: 80px;
}

/* trust / certification badges */
.trust-badge {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--color-accent);
    background: radial-gradient(circle at 50% 35%, rgba(24, 160, 251, .18), rgba(1, 8, 22, .6));
    border: 2px solid var(--color-accent);
    box-shadow: inset 0 0 0 3px rgba(24, 160, 251, .25);
}

.trust-badge b {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .3px;
}

.trust-badge small {
    font-size: .5rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.trust-badge--apwg {
    color: #7ed957;
    border-color: #7ed957;
    background: radial-gradient(circle at 50% 35%, rgba(126, 217, 87, .2), rgba(1, 8, 22, .6));
    box-shadow: inset 0 0 0 3px rgba(126, 217, 87, .25);
}

.trust-badge--apwg small {
    color: #b9e8a3;
}

/* rings / tunnel UI */
.rings-ui {
    position: relative;
    width: 100%;
    /* max-width: 520px; */
    margin: 0 auto;
    filter: drop-shadow(0 0 30px var(--ring-glow));
}

/* glow png anchored to the right edge, outside the container */
.ring-glow {
    position: absolute;
    top: 45%;
    right: 0;
    width: 80%;
    max-width: 75vw;
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}

/* same glow mirrored onto the left edge */
.ring-glow-left {
    right: auto;
    left: 0;
    transform: translateY(-50%) scaleX(-1);
}

.rings-ui svg,
.rings-ui img {
    position: relative;
    z-index: 1;
    width: 100%;
    display: block;
}

.rings-ui-flip svg {
    transform: scaleX(-1);
}

/* rings stay static — no pulse */
.rings-ui .ring {
    transform-box: fill-box;
    transform-origin: center;
}

/* badges gently bob; dots glide along their ring via SVG motion (see markup) */
.rings-ui .ring-badge {
    transform-box: fill-box;
    transform-origin: center;
    animation: floaty 5s ease-in-out infinite;
}

.rings-ui .ring-badge:nth-of-type(2) {
    animation-delay: .6s;
}

.rings-ui .ring-badge:nth-of-type(3) {
    animation-delay: 1.2s;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }
}

/* ===== site header / navbar ===== */
.site-header {
    background-color: #010314;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}

.brand-logo {
    width: 40px;
    height: 46px;
    flex-shrink: 0;
}

.brand-text {
    line-height: 1;
}

.brand-name {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--color-white);
    letter-spacing: .3px;
}

.brand-name .accent {
    color: var(--color-accent);
}

.brand-sub {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .55em;
    color: var(--color-text-muted);
    margin-top: 2px;
    padding-left: 2px;
}

.site-header .nav-link {
    color: var(--color-text);
    font-weight: 500;
    font-size: 1rem;
    padding: .35rem 1.05rem;
    transition: color .2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .nav-link.show,
.site-header .nav-item.dropdown.show .nav-link {
    color: var(--color-accent);
}

.site-header .nav-link.active {
    color: var(--color-accent);
}

.site-header .dropdown-toggle::after {
    margin-left: .4em;
    vertical-align: middle;
}

.site-header .dropdown-menu {
    background: #181A2A;
    border: 2px solid #242535;
    border-radius: 9px;
    padding: .4rem;
    margin-top: .5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.site-header .dropdown-item {
    color: var(--color-text);
    font-weight: 500;
    font-size: .95rem;
    border-radius: .5rem;
    padding: .4rem .85rem;
    transition: background .2s ease, color .2s ease;
    margin-bottom: 2px;
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus,
.site-header .dropdown-item.active,
.site-header .dropdown-item:active {
    background: rgba(0, 174, 255, .12);
    color: var(--color-accent);
}

.site-header .dropdown-divider {
    border-top-color: rgba(255, 255, 255, .08);
}

/* multi-column dropdown with grouped headings */
.site-header .dropdown-cols {
    display: flex;
    align-items: flex-start;
}

.site-header .dropdown-col {
    flex: 1 1 auto;
}

.site-header .dropdown-col+.dropdown-col {
    margin-left: .5rem;
    padding-left: .75rem;
    border-left: 2px solid rgba(255, 255, 255, .08);
}

.site-header .dropdown-group-title {
    display: block;
    padding: .45rem .85rem .3rem;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-accent);
    white-space: nowrap;
}

.site-header .dropdown-col .dropdown-group-title+.dropdown-item {
    margin-top: 0;
}

.site-header .dropdown-col .dropdown-item+.dropdown-group-title {
    margin-top: .35rem;
}

.btn-contact {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 500;
    border: none;
    border-radius: 999px;
    padding: .25rem 1.2rem;
    transition: background .2s ease, transform .2s ease;
}

.btn-contact:hover {
    background: var(--color-accent-hover);
    color: var(--color-white);
}

.btn-login {
    background: transparent;
    color: var(--color-white);
    font-weight: 500;
    border: 1.5px solid var(--color-border-login);
    border-radius: 999px;
    padding: .25rem 1.2rem;
    transition: border-color .2s ease, color .2s ease;
}

.btn-login:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.navbar-toggler {
    border-color: transparent;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* white hamburger bars (dark theme) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== site footer ===== */
.site-footer {
    background-color: #010314;
    padding: 3.5rem 0rem 0.8rem 0rem;
    color: var(--color-text-muted);
    border-top:1px solid var(--white-border-30);
}

.footer-brand img {
    max-width: 180px;
    width: 100%;
    height: auto;
    display: block;
}

.iso-cert img {
    max-width: 120px;
}

.footer-tagline {
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 320px;
    margin: 1.1rem 0 1.4rem;
}

/* ISO certified badge */
.iso-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: linear-gradient(180deg, #4caf50, #2f7d3a);
    border-radius: 8px;
    padding: .4rem .8rem .4rem .5rem;
    box-shadow: 0 6px 16px rgba(63, 163, 77, .25);
}

.iso-badge-shield {
    width: 34px;
    height: 40px;
    flex-shrink: 0;
}

.iso-badge-text {
    line-height: 1;
    color: #fff;
}

.iso-badge-text b {
    display: block;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .3px;
}

.iso-badge-text small {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .25em;
    margin-top: 3px;
    opacity: .9;
}

/* columns */
.footer-heading {
    color: var(--color-white);
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 1.3rem;
}

.footer-links,
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: .85rem;
}

.footer-links a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 1rem;
    transition: color .2s ease;
}

.footer-links a:hover {
    color: var(--color-accent);
}

/* contact list with icons */
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: 1.1rem;
    font-size: 1rem;
    line-height: 1.5;
}

.footer-contact li svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-white);
}

.footer-contact a,
.footer-contact span {
    color: var(--color-white);
    text-decoration: none;
}

.footer-contact a:hover {
    color: var(--color-accent);
}

/* bottom bar */
.footer-divider {
    border: 0;
    border-top: 1px solid var(--white-border-30);
    margin: 2rem 0rem 1rem 0rem;
    opacity: 1;
}

.footer-copy,
.footer-credit {
    margin: 0;
    font-size: 1rem;
    color: var(--color-white);
}

.footer-credit a {
    color: var(--color-accent);
    text-decoration: none;
}

.footer-credit a:hover {
    text-decoration: underline;
}

.cta-grid-section {
    position: relative;
    width: 100%;
    min-height: 250px;
    /* margin: 30px 0px; */
    display: flex;
    align-items: center;
    overflow: hidden;
    /* SVG is 1920px wide; clip so it never overflows the body */
}

/* grid sits behind, anchored to the right (the diamonds live on the right
   half of the artwork) so the text on the left stays clear */
.cta-grid-img {
    position: absolute;
    inset: 0;
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
    object-position: right center;
    pointer-events: none;
    z-index: 2;
}
.cta-grid-img-2 .cta-grid-img {

    height: 55%;

}

/* flipped copy of the grid, anchored to the bottom */
.cta-grid-img-bottom {
    top: auto;
    bottom: 0;
    height: 27% !important;
    transform: scaleY(-1);
    opacity: 0.40;
}

/* text content above the grid, on the left */
.cta-grid-section .container {
    position: relative;
    z-index: 1;
}

.cta-grid-content {
    max-width: 560px;
}

.glow-section {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* artwork is 1920px wide; clip so it never overflows the body */
}

/* gradient artwork sits behind, stretched to cover the section */
.glow-section-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    z-index: 0;
}

/* content above the gradient */
.glow-section .container {
    position: relative;
    z-index: 1;
}

.glow-section-content {
    max-width: 720px;
}

.platform {
    position: relative;
    /* overflow: clip; */
    padding: 55px 0;
}

/* ---- Left: Bootstrap nav-pills restyled as an active-line list ---- */
.platform-nav {
    border-left: 2px solid var(--color-border-soft);
}

.platform-nav .nav-link {
    position: relative;
    text-align: left;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    padding: 16px 18px;
    border-radius: 0;
    opacity: .6;
    transition: color .25s ease, opacity .25s ease;
}

.platform-nav .nav-link:hover {
    opacity: .9;
    color: var(--color-white);
}

.platform-nav .nav-link.active {
    background: transparent;
    color: var(--color-white);
    opacity: 1;
}

/* the moving accent line */
.platform-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0px;
    bottom: 0px;
    width: 3px;
    border-radius: 0px;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}

/* ---- Right: card holding the tab panes ---- */
.platform-card {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--color-accent);
    border-radius: 16px;
    position: relative;
    background: #000316;
    padding: 30px;
    overflow: hidden;
}

/* let the active pane stretch full width and center inside the flex card */
.platform-card .tab-pane.active {
    width: 100%;
}

/* ---- ScrollSpy variant: the card becomes a scroll-box of stacked panels ---- */
.platform-scrollspy {
    display: block;
    /* override the flex centering of .platform-card */
    height: 420px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    /* step one panel at a time */
    scrollbar-width: none;
    /* Firefox: hide scrollbar */
}

.platform-scrollspy::-webkit-scrollbar {
    display: none;
}

/* WebKit: hide scrollbar */
.platform-pane {
    min-height: 100%;
    display: flex;
    align-items: center;
    scroll-snap-align: start;
}

/* glow overlay rendered ON TOP of the panel image (top-left corner) */
.platform-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../image/ellipse-815.svg") top left no-repeat;
    pointer-events: none;
    z-index: 2;
}

.platform-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.platform-visual svg,
.platform-visual img {
    width: 100%;
    height: auto;
    max-width: 320px;
}

.platform-visual .platform-globe-core {
    animation: platformSpin 18s linear infinite;
    transform-origin: center;
}

@keyframes platformSpin {
    to {
        transform: rotate(360deg);
    }
}

.platform-panel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
}

.platform-panel-text {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.7;
}

/* circular gradient glow behind the dark-web monitoring image */
.dwm-glow-img {
    position: relative;
}

.dwm-glow-img::before {
    content: "";
    position: absolute;
    top: 55%;
    left: 35%;
    width: 50%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #00AEFF 0%, #4C00CF 60%, rgba(76, 0, 207, 0) 100%);
    filter: blur(60px);
    opacity: .45;
    pointer-events: none;
    z-index: 0;
}

.dwm-glow-img img {
    position: relative;
    z-index: 1;
}

/* ===== how it works (step cards) ===== */
.how-it-works {
    padding: 70px 0;
}

.step-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 45px 15px 15px 15px;
    border: 1px solid var(--white-border-30);
    border-top: 0px;
    /* background: #000316; */
}

.step-badge {
    display: flex;
    align-items: center;
    margin-bottom: -15px;
    position: relative;
    z-index: 1;
}

.step-pill {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
    padding: 8px 30px;
    border-radius: 999px;
    /* background: radial-gradient(120% 140% at 30% 0%, #0b3b66 0%, #021129 100%); */
    /* border: 1px solid var(--color-accent); */
    box-shadow: 0 0 12px #00aeff4d, inset 0 0 20px 0 #0077FF;
}

.step-line {
    flex: 1 1 auto;
    height: 1px;
    margin-left: 8px;
    position: relative;
    background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
}

.step-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%,
            #ffffff 0%,
            #f2f4f5ef 22%,
            #b4d9ff 30%,
            #96bcfd 52%,
            #0077ff 62%,
            hsl(224, 84%, 58%) 80%,
            transparent 92%);
    /* box-shadow: 0 0 10px 2px #00aeffaa; */
    /* all 3 dots stay visible; each rides its own line in turn on one shared 6s timeline */
    animation: 6s linear infinite;
}

.step-row>[class*="col-"]:nth-child(1) .step-dot {
    animation-name: stepDot1;
}

.step-row>[class*="col-"]:nth-child(2) .step-dot {
    animation-name: stepDot2;
}

.step-row>[class*="col-"]:nth-child(3) .step-dot {
    animation-name: stepDot3;
}

/* box 1 runs first (5-25%); on reaching the end it hides, reappears with all at 81% */
@keyframes stepDot1 {
    0% {
        left: 0%;
        opacity: 1;
    }

    5% {
        left: 0%;
        opacity: 1;
    }

    25% {
        left: 100%;
        opacity: 1;
    }

    26% {
        left: 100%;
        opacity: 0;
    }

    /* vanish at the end of its line */
    27% {
        left: 0%;
        opacity: 0;
    }

    /* reset position while hidden */
    80% {
        left: 0%;
        opacity: 0;
    }

    81% {
        left: 0%;
        opacity: 1;
    }

    /* all three reappear together */
    100% {
        left: 0%;
        opacity: 1;
    }
}

/* box 2 waits at start (visible), runs second (30-50%), then hides */
@keyframes stepDot2 {
    0% {
        left: 0%;
        opacity: 1;
    }

    30% {
        left: 0%;
        opacity: 1;
    }

    50% {
        left: 100%;
        opacity: 1;
    }

    51% {
        left: 100%;
        opacity: 0;
    }

    52% {
        left: 0%;
        opacity: 0;
    }

    80% {
        left: 0%;
        opacity: 0;
    }

    81% {
        left: 0%;
        opacity: 1;
    }

    100% {
        left: 0%;
        opacity: 1;
    }
}

/* box 3 waits at start (visible), runs last (55-75%), then hides */
@keyframes stepDot3 {
    0% {
        left: 0%;
        opacity: 1;
    }

    55% {
        left: 0%;
        opacity: 1;
    }

    75% {
        left: 100%;
        opacity: 1;
    }

    76% {
        left: 100%;
        opacity: 0;
    }

    77% {
        left: 0%;
        opacity: 0;
    }

    80% {
        left: 0%;
        opacity: 0;
    }

    81% {
        left: 0%;
        opacity: 1;
    }

    100% {
        left: 0%;
        opacity: 1;
    }
}

/* ===== owl auto-scroll carousel (seamless CSS marquee) ===== */


.owl-marquee {
    overflow: hidden;
    width: 100%;
    /* fade the left/right edges so slides ease in and out */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.owl-track {
    display: flex;
    width: max-content;
    gap: 24px;
    /* the track holds two identical halves; moving -50% = exactly one set → seamless loop */
    animation: owlScroll 35s linear infinite;
    will-change: transform;
}

.owl-marquee:hover .owl-track {
    animation-play-state: paused;
}

/* when JS takes over (drag / buttons), it drives the transform itself */
.owl-marquee.owl-js {
    cursor: grab;
}

.owl-marquee.owl-js.is-grabbing {
    cursor: grabbing;
}

.owl-marquee.owl-js .owl-track {
    animation: none;
}

.owl-slide img,
.owl-slide span {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.owl-slide {
    flex: 0 0 auto;
    /* show 2 slides at a time: each ≈ half the marquee width, capped at 560px */
    width: min(560px, calc(50vw - 24px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* padding: 12px 20px; */
    /* border: 1px solid var(--color-accent); */
    border-radius: 8px;
    background: #000316;
}

.owl-slide img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.owl-slide span {
    color: var(--color-white);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    line-height: 1.4;
}

/* ---- logo variant: compact white tiles so coloured client logos stay legible ---- */
.owl-slide.owl-logo {
    width: 170px;
    /* height: 110px; */
    padding: 10px 5px;
    justify-content: center;
    border-color: var(--white-border-30);
    background: #ffffff;
}

.owl-slide.owl-logo img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 40px;
    object-fit: contain;
}

@keyframes owlScroll {
    from {
        transform: translateX(0);
    }

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

.step-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 14px;
}

.step-text {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
}

.step-icon {
    margin-top: auto;
    margin-left: auto;
    width: 125px;
    height: 100px;
}

/* ===== command center: image sits behind the intro text ===== */
.command-center-intro {
    position: absolute;
    top: 20%;
    width: 100%;
    z-index: 2;
}

.command-center-visual {
    z-index: 1;

}

.infastructure-monitor img {
    width: 50%;
    position: absolute;
    top: 49%;
    right: 25.1%;
    border-radius: 10px;
    box-shadow: 0 0 40px #00000085, 0 0 80px #0000005c;
}

.testimonial-card {
    height: 100%;
    /* border: 1px solid var(--color-border-soft); */
    border-radius: 6px;
    padding: 26px 24px;
    background: #0e1020;
    position: relative;
    overflow: hidden;
}

/* subtle accent glow along the bottom edge (matches screenshot) */
.testimonial-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #010D21 0%, #00AEFF 56%, #010D21 100%);
    /* box-shadow: 0 0 14px #00AEFF80; */
}

.testimonial-logo {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--color-white);
}

.testimonial-stars {
    color: #ffc107;
    font-size: 1rem;
    letter-spacing: 2px;
}

.testimonial-text {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.75;
    font-weight: 500;
    margin: 0 0 1.6rem;
}

.testimonial-author {
    margin-top: auto;
}

.testimonial-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
}

.testimonial-role,
.testimonial-country {
    display: block;
    font-size: .82rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.threat-cta {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    /* border: 1px solid var(--color-border-soft); */
    padding: 80px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00060f;
}

/* image fills the box and sits behind the text */
.threat-cta-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    z-index: 0;
}

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

.threat-cta-content .hero-sub {
    margin-bottom: 1.8rem;
}

/* ===== pricing / plan comparison ===== */
.price-section {
    padding: 50px 0;
    position: relative;
}

/* decorative blurred glow anchored top-left, behind the content */
.top-left-gradiant {
    position: absolute;
    top: -20%;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.top-left-gradiant img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 700px;
}

.price-section .container {
    position: relative;
    z-index: 1;
}

.price-head {
    text-align: left;
}

.price-card {
    position: relative;
    height: 100%;
    padding: 32px 26px 10px;
    border: 2px solid var(--white-border-30);
    border-radius: 18px;
    background: #01031436;
    overflow: hidden;
    margin-right: -7px;
}

.first-price-card {
    border-right: 0px;
}

/* featured (Elite) card: accent border + glow + corner ribbon */
.price-card--featured {
    border: 1px solid var(--color-accent);
    padding: 42px 26px 15px;
    /* box-shadow: 0 0 0 1px var(--color-accent), 0 0 35px #00aeff33; */
    background: #011831;
    margin-right: 0px;
    margin-left: -3px;
}

.price-ribbon {
    position: absolute;
    top: -15px;
    right: -57px;
    transform: rotate(45deg);
    background: #00aeff4d;
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 40px 48px 12px 48px;
    /* box-shadow: 0 2px 10px #00aeff66; */
}

.price-name {
    color: var(--color-white);
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 20px;
}

.price-cta {
    margin-bottom: 26px;
    padding: .55rem 1.2rem;
    font-weight: 600;
}

.price-group {
    margin-bottom: 18px;
}

.price-group-label {
    display: block;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.price-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.price-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 500;
    padding: 5px 0;
}

.ps-ico {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* blue check for included features */
.price-item.is-yes .ps-ico {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300AEFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* red cross for excluded features */
.price-item.is-no .ps-ico {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a6a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.price-item.is-no {
    color: var(--color-text-muted);
}

/* ===== blogs ===== */
.blogs-section {
    padding: 50px 0;
}

.blogs-title {
    font-size: 2.4rem;
    font-weight: 600;
}

.blog-card {
    display: flex;
    align-items: center;
    gap: 22px;
    border: 2px solid #242535;
    border-radius: 12px;
    padding: 15px;
}

.blog-thumb {
    flex: 0 0 50%;
    /* 5 of 12 columns */
    width: 50%;
    aspect-ratio: 7 / 4;
    /* bigger image area */
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.blog-card:hover .blog-thumb img {
    transform: scale(1.02);
}

.blog-body {
    flex: 1 1 auto;
}

.blog-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 12px;
}

.blog-title a {
    color: var(--color-white);
    text-decoration: none;
    transition: color .2s ease;
}

.blog-title a:hover {
    color: var(--color-accent);
}

.blog-tag {
    display: inline-block;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.blog-text {
    color: var(--color-text-muted-2);
    font-size: 14px;
    /* font-weight: 500; */
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blog-card:hover {
    border-color: var(--color-border-blue);
}
/* ===== blog listing page (Explore Our Blog & Articles) ===== */
.blog-hero {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 30px 30px;
    margin: 30px 0px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(0, 174, 255, 0.45) 0%, rgba(0, 96, 180, 0.18) 34%, rgba(1, 5, 22, 0) 62%),
        linear-gradient(90deg, #062a52 0%, #041634 42%, var(--color-card-bg) 100%);
    /* border: 1px solid var(--color-border-soft); */
}

/* grid overlay, same look as .surface-box::before */
.blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22.74px 22.74px;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 90%);
    mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 55%, #00000059 90%);
    pointer-events: none;
    z-index: 0;
}

/* keep hero content above the grid overlay */
.blog-hero__title,
.blog-hero__sub,
.blog-hero .legal-updated {
    position: relative;
    z-index: 1;
}

.blog-hero__title {
    font-size: 32px;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 10px;
}

.blog-hero__sub {
    font-size: 16px;
    color: var(--color-text-muted-2);
    margin: 0;
}

/* category filter chips */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.blog-chip {
    background: var(--color-card-bg-2);
    border: 1px solid var(--color-border-card);
    color: var(--color-text-muted-2);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s ease;
}

.blog-chip:hover {
    color: var(--color-text);
    border-color: var(--color-border-blue);
}

.blog-chip.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

/* post card (vertical) */
.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #181A2A;
    border: 2px solid #242535;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}

.post-card:hover {
    border-color: var(--color-border-blue);
}

.post-card__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 20px 20px 0px 20px;
}

.post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    transition: transform .4s ease;
}

.post-card:hover .post-card__thumb img {
    transform: scale(1.01);

}

.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px;
}

.post-card__cat {
    display: inline-block;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    background-color: #4b6bfb0d;
    width:fit-content;
    padding: 4px 10px;
    border-radius: 8px;
}

.post-card__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}

.post-card:hover .post-card__title {
    color: var(--color-accent);
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.post-card__avatar {
    width: 28px;
    /* height: 30px; */
    /* border-radius: 50%; */
    object-fit: cover;
    flex: 0 0 auto;
}

.post-card__author {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted-2);
}

.post-card__date {
    font-size: 14px;
     font-weight: 500;
    color: var(--color-text-muted-2);
}

.post-card__date::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-text-muted);
    vertical-align: middle;
    margin-right: 8px;
}

/* pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    flex-wrap: wrap;
}

.blog-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px !important;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.blog-pagination .page-link:hover {
    border-color: var(--color-border-blue);
}

.blog-pagination .page-item.active .page-link {
    background: var(--color-accent);
    color: #ffffff;
    border-radius: 8px;
}

.blog-pagination .page-item.disabled .page-link {
    color: var(--color-text-muted);
    cursor: default;
}

.blog-spinner {
    display: none;
    text-align: center;
    padding: 40px 0;
    color: var(--color-accent);
}

/* ===== blog detail / article page ===== */
.article-breadcrumb {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 26px;
}

.article-breadcrumb a {
    color: var(--color-text-muted-2);
    text-decoration: none;
    transition: color .2s ease;
}

.article-breadcrumb a:hover {
    color: var(--color-accent);
}

.article-head {
    margin-bottom: 20px;
}

.article-cat {
    display: inline-block;
    color: var(--color-accent);
    font-size: 16px;
    font-weight: 500;
    margin: 14px 0px;
}

.article-title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-text);
    margin: 0 0 20px;
    border-bottom:none;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.article-meta__avatar {
    width: 30px;
    /* height: 34px;
    border-radius: 50%; */
    object-fit: cover;
}

.article-meta__author {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted-2);
}

.article-meta__date {
    font-size: 14px;
    color: var(--color-text-muted-2);
    font-weight: 500;
}

.article-meta__date::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-text-muted);
    vertical-align: middle;
    margin-right: 8px;
}

.article-hero {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 36px;
    border: 1px solid var(--color-border-soft);
}

.article-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* rich text body */
.article-content {
    color: var(--color-text-muted-2);
    font-size: 1.02rem;
    line-height: 1.85;
    word-break: break-word;
}

.article-content > *:first-child {
    margin-top: 0;
}

.article-content p {
    margin: 0 0 1.15em;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.7em 0 .6em;
}

.article-content h1 { font-size: 1.9rem; }
.article-content h2 { font-size: 1.55rem; }
.article-content h3 { font-size: 1.3rem; }
.article-content h4 { font-size: 1.12rem; }

.article-content a {
    color: var(--color-accent);
    text-decoration: none;
}

.article-content a:hover {
    text-decoration: underline;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1.4em 0;
}

.article-content ul,
.article-content ol {
    padding-left: 1.4em;
    margin: 0 0 1.15em;
}

.article-content li {
    margin-bottom: .5em;
}

.article-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding: 4px 0 4px 18px;
    margin: 1.4em 0;
    color: var(--color-text-muted);
    font-style: italic;
}

.article-content pre {
    background: var(--color-card-bg-3);
    border: 1px solid var(--color-border-card);
    border-radius: 10px;
    padding: 16px;
    overflow: auto;
    font-size: .85rem;
    margin: 1.4em 0;
}

.article-content code {
    background: var(--color-card-bg-3);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .88em;
}

.article-content pre code {
    background: transparent;
    padding: 0;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: .95rem;
    display: block;
    overflow-x: auto;
}

.article-content th,
.article-content td {
    border: 1px solid var(--color-border-card);
    padding: 10px 12px;
    text-align: left;
}

.article-content th {
    background: var(--color-card-bg-3);
    color: var(--color-text);
}

.article-content hr {
    border: 0;
    border-top: 1px solid var(--color-border-card);
    margin: 2em 0;
}

/* related posts sidebar */
.related-panel {
    position: sticky;
    top: 90px;
}

.related-panel__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-accent) !important;
    margin: 0px;
    padding-bottom: 14px;
}

.related-post {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    text-decoration: none;
}

.related-post__img {
    flex: 0 0 140px;
    width: 85px;
    height: 85px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-card-bg-3);
}

.related-post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.related-post:hover .related-post__img img {
    transform: scale(1.06);
}

.related-post__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.related-post__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-white);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}

.related-post:hover .related-post__title {
    color: var(--color-accent);
}

.related-post__more {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    transition: opacity .2s ease;
}

.related-post:hover .related-post__more {
    opacity: .8;
}

/* ===== resolve (feature grid) ===== */
.resolve-section {
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

/* decorative graphic anchored to the top-right, behind the content */
.resolve-topright-glow {
    position: absolute;
    top: -115px;
    right: 0;
    width: 60%;
    height: auto;
    z-index: 0;
    pointer-events: none;
    /* soften the rectangular edges so the artwork fades into the body bg */
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 72% 38%, #000 40%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 75% at 72% 38%, #000 40%, transparent 78%);
}

.we-resolve-padding {
    padding-top: 170px;
}

.resolve-section .container {
    position: relative;
    z-index: 1;
}

.resolve-heading {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.25;
}

.resolve-card {
    position: relative;
    height: 100%;
    padding: 28px 26px 30px;
    border: 1px solid var(--color-accent);
    border-radius: 12px;
    background: #000517;
    overflow: hidden;
}

/* corner glow overlay, same as .platform-card::after */
.resolve-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../image/ellipse-815.svg") top left no-repeat;
    background-size: 160px auto;
    /* smaller corner glow */
    pointer-events: none;
    z-index: 0;
}

.resolve-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    margin-bottom: 22px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    box-shadow: inset 0 0 8px rgb(0 174 255 / 68%);
}

.resolve-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    image-rendering: -webkit-optimize-contrast;
}
.risk-icon
{

}
/* rounded-square feature icon box (translucent, accent icon) */
.feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: var(--color-accent);
    background: rgba(0, 174, 255, .08);
    border: 1px solid rgba(0, 174, 255, .25);
    box-shadow: inset 0 0 12px rgba(0, 174, 255, .25);
    margin-bottom: 20px;
}

.feat-icon svg {
    width: 26px;
    height: 26px;
}

/* risks band: dark fill + white 5% stroke + inner shadow (Figma) */
.risk-icon {
    background-color: #0E1020;
    border-radius: 8px;
    overflow: hidden;
    border: 2.28px solid rgba(255, 255, 255, .05);
    box-shadow: inset 0 -2.28px 9.12px rgba(0, 0, 0, .35);
}

/* image-based feature icon (no box) */
.risk-icon {
    display: inline-flex;
    width: 64px;
    margin-bottom: 20px;
}

.risk-icon img {
    width: 100%;
    height: auto;
}

/* threat-intelligence gradient cards */
.ti-card {
    /* border-radius: 14px; */
    padding: 2.5rem 1.5rem;
    background: linear-gradient(180deg, #0063AF 0%, #010314 100%);
    border: 1px solid #00AEFF;
}

.ti-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-accent);
    margin-bottom: 22px;
}

.ti-icon svg {
    width: 30px;
    height: 30px;
}

/* misconfiguration analysis banner (horizontal gradient card) */
.mcfg-card {
    /* border-radius: 16px; */
    padding: 40px 0px;
    background: linear-gradient(90deg, #010314 0%, #006BC0 100%);
    /* border: 1px solid rgba(255, 255, 255, .1); */
    /* overflow: hidden; */
}


.resolve-title {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 14px;
}

.resolve-text {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    margin: 0;
}

/* ===== final CTA (dark box with bottom blue glow) ===== */
/* ready CTA (full-width light-beam background) */
.ready-cta {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    text-align: center;
}

.ready-cta__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    z-index: 0;
}

.ready-cta__arrow {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 25%;
    pointer-events: none;
    z-index: 1;
    animation: readyBeamUp 3s ease-in-out infinite;
}

@keyframes readyBeamUp {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: .7;
    }
    50% {
        transform: translateX(-50%) translateY(-14px);
        opacity: 1;
    }
}

.ready-cta .container {
    position: relative;
    z-index: 1;
}

.ready-cta__content {
    max-width: 720px;
}

.ready-cta__content .hero-title {
    text-shadow: 0 0 30px rgba(0, 174, 255, .45);
}

.final-cta-section {
    padding: 50px 0 70px;
}

.final-cta {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--color-border-soft);
    background: radial-gradient(120% 100% at 50% 0%, #0a1326 0%, #04081a 55%, #020512 100%);
    padding: 70px 24px 80px;
}

/* the blurred blue glow anchored to the bottom edge */
.final-cta-glow {
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    width: 102%;
    max-width: none;
    pointer-events: none;
    z-index: 0;
}

.final-cta-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.final-cta-content .hero-title {
    font-size: 32px;
}

/* ---------- Threat Highlights (Brand Monitoring page) ---------- */
.threat-highlights {
    position: relative;
    overflow: hidden;
}

.th-card {
    position: relative;
    height: 100%;
    border-radius: 12px;
    padding: 1.5rem;
    background:
        #010314;
    border: 1px solid var(--color-border-toggler);
    box-shadow:
        inset 0 3.52px 20px 0 rgba(255, 255, 255, .25),
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 18px 40px rgba(0, 0, 0, .35);

}

/* blue gradient glow at bottom-left corner — dedicated class */
.th-card-glow {
    overflow: hidden;
}

.th-card-glow::before {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -10%;
    width: 50%;
    aspect-ratio: 1;
    transform: translate(-30%, 30%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(17, 164, 255, .36) 0%, rgba(17, 164, 255, 0) 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 2;
}

.th-card-glow > * {
    position: relative;
    z-index: 1;
}

/* push image to bottom & keep it small */
.th-card-glow {
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-bottom: 0px;
}

.th-card-glow img {
    width: auto !important;
    max-width: 100%;
    /* max-height: 150px; */
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%);
}

/* center dark-web image — separate mask */
.dw-center-img {
    width: auto !important;
    max-width: 100%;
}

.th-card__title {
    color: var(--color-white);
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: .55rem;
}

.th-card__text {
    color: var(--color-text-muted);
    font-size: .9rem;
    line-height: 1.55;
    margin: 0;
}

/* ===== stat cards (about-us hero) ===== */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    background: var(--color-card-bg-2);
    /* border: 1px solid var(--color-border-toggler); */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 18px 40px rgba(0, 0, 0, .35);
}

.stat-num {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
}

.stat-label {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.4;
}

/* ===== did you know (percentage stat cards) ===== */
.dyk-card {
    text-align: center;
    border-radius: 12px;
    padding: 2.25rem 1.5rem;
    /* background: #06101B; */
    border: 1px solid #00aeff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 2px 13px #00aeff13;
}

.dyk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    color: var(--color-accent);
    background: #181A2C;
    /* border: 1px solid var(--color-border-soft); */
}

.dyk-icon svg {
    width: 35px;
    height: 35px;
}

.dyk-num {
    color: var(--color-white);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
}

.dyk-num::after {
    content: "";
    display: block;
    width: 80px;
    height: 1.5px;
    margin: 1rem auto 1.25rem;
    background: linear-gradient(90deg, #111323 0%, #00AEFF 45%, #111323 100%);
}

.dyk-text {
    color: var(--color-text-muted);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== unified view: top background image ===== */
.uv-section {
    position: relative;
    overflow: hidden;
}

.uv-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1100px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 67% 67% at 50% 55%, #000000 35%, #a1a1a100 100%);
    mask-image: radial-gradient(ellipse 67% 67% at 50% 55%, #000000 35%, #a1a1a100 100%);
}

.uv-section .container {
    position: relative;
    z-index: 1;
    padding-top: clamp(60px, 15vw, 260px);
}

/* ===== platform-features hero image mask ===== */
.pf-hero-img {
    mix-blend-mode: screen;
}

/* ===== infrastructure hero: divider + 24/7 stat ===== */
.infra-hero-divider {
    width: 90px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #00AEFF, #2E6BFF);
    margin: 24px 0;
}

.infra-hero-stat__num {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
}

.infra-hero-stat__label {
    color: var(--color-text-muted);
    font-size: .95rem;
    line-height: 1.35;
}

/* ===== compliance hero bottom-left glow ===== */
.compliance-hero > .container {
    position: relative;
    overflow: hidden;
}

.compliance-hero-glow {
    position: absolute;
    left: 0;
    bottom: -50%;
    width: auto;
    height: 140%;
    max-width: none;
    /* transform: translate(-40%, 20%); */
    pointer-events: none;
    z-index: 0;
}

.compliance-hero > .container > .row {
    position: relative;
    z-index: 1;
}

/* ===== platform-features hero glows ===== */
.pf-hero {
    position: relative;
    overflow: hidden;
    border-radius: 9px;
}

.pf-hero-glow {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    width: 30%;
    max-width: 620px;
    height: auto;
}

.pf-hero-glow--tr {
    top: 0;
    right: 0;
}

.pf-hero-glow--bl {
    bottom: 0;
    left: 0;
}

.pf-hero .row {
    position: relative;
    z-index: 1;
}

/* ===== see it in action CTA (spire background) ===== */
.action-cta {
    position: relative;
    text-align: center;
    background: url("../image/see-techowl-shield-in-action.webp") no-repeat center top;
    background-size: min(645px, 100%) auto;
    padding-top: clamp(180px, 38vw, 360px);
    padding-bottom: 60px;
}

.action-cta__content {
    position: relative;
    z-index: 1;
}

/* ===== takedown coverage check list ===== */
.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 14px;
    color: var(--color-text-muted-2);
    font-size: 1rem;
    line-height: 1.5;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'%20fill='%2300AEFF'/%3E%3Cpath%20d='m8%2012%203%203%205-6'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ===== guiding principles card ===== */
.principle-icon {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin: 0 auto 18px;
}

.principle-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    padding: 22px 24px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-blue);
}

/* ===== human support card: blue gradient glow at bottom ===== */
.hs-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    padding: 28px 24px 22px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-faint);
}
/* 
.hs-card .resolve-text {
    margin-bottom: 26px;
} */

.hs-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -80px;
    transform: translateX(-50%);
    width: 85%;
    height: 90px;
    background: linear-gradient(90deg, var(--color-grad-blue-dark) 0%, var(--color-grad-blue-light) 100%);
    filter: blur(45px);
    opacity: .65;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

.hs-card > * {
    position: relative;
    z-index: 1;
}

/* ===== human support card image (bottom-right, masked) ===== */
.hs-img-wrap {
    text-align: right;
}

.hs-img-wrap img {
    display: block;
    width: 100%;
    max-width: 180px;
    margin-left: auto;
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%);
}

/* ===== platform commitments panel ===== */
.commit-panel {
    border-radius: 12px;
    padding: 2.5rem 2rem;
    background: var(--color-card-bg-3);
}

.commit-title {
    color: var(--color-accent);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: .75rem;
}

/* ===== cxo dashboard image glow (drop shadow) ===== */
.cxo-dashboard-img {
    filter: drop-shadow(0 0 25px var(--color-glow-accent-15));
    margin-top: 30px;
}

/* compliance "what is" image: gradient border + drop shadow */
.Compliance-dashboard-img {
    border-radius: 12px;
    /* radial gradient stroke (#070F1F -> #00AEFF), 1px inside, via background-clip */
    border: 1px solid #00AEFF;
    background-color: #0d0f1e;
    padding: 20px 10px;
    /* background: radial-gradient(120% 120% at 0% 100%, #070F1F 0%, #00AEFF 100%); */
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* ===== eyebrow label ===== */
.eyebrow-label {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 16px;
    border-radius: 9px;
    background: var(--color-surface-soft);
    /* border: 1px solid rgba(0, 174, 255, .35); */
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ===== pillars / values icon ===== */
.pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    /* height: 46px; */
    border-radius: 12px;
    background: var(--color-accent);
    color: var(--color-white);
    margin-bottom: 20px;
}

.pillar-icon svg {
    width: 24px;
    height: 24px;
}

/* ===== meet the experts (team cards) ===== */
.team-card {
    display: flex;
    flex-direction: column;
}

.team-photo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--color-photo-bg);
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* pastel tints behind photos (visible before real photos are added) */
.team-photo--pink  { background: var(--team-tint-pink); }
.team-photo--green { background: var(--team-tint-green); }
.team-photo--blue  { background: var(--team-tint-blue); }

.team-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem .25rem 0;
}

.team-name {
    color: var(--color-white);
    font-weight: 500;
    font-size:18px;
    margin: 0;
}

.team-role {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    margin: .15rem 0 0;
}

.team-linkedin {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 99999px;
    background: var(--color-linkedin);
    color: var(--color-white);
    transition: background .2s ease;
}

.team-linkedin svg {
    width: 18px;
    height: 18px;
}

.team-linkedin:hover {
    background: var(--color-accent-hover);
}

/* ===== dark-web intelligence (image + clickable list) ===== */
.dw-intel-imgbox {
    border-radius: 18px;
    overflow: hidden;
}

.dw-intel-imgbox img {
    border-radius: 12px;
        /* max-height: 375px; */
    width: 100% !important;
}

.dw-intel-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dw-intel-item {
    display: block;
    width: 100%;
    text-align: left;
    background-color: #0E1020;
    border: 1px solid #4b4b4b00;
    border-radius: 9px;
    padding: 15px 15px;
    cursor: pointer;

}

.dw-intel-item.active {
    background: transparent;
    border-color: #00AEFF;
    /* box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); */
}

.dw-intel-title {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    /* text-transform: uppercase; */
    margin-bottom: .6rem;
}

.dw-intel-text {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

/* ===== benefits strip ===== */
.benefits {
    position: relative;
    overflow: hidden;
    padding: 100px 0px;
}

.benefits-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #00aeff9c 0%, #4c00cf4f 60%, rgba(76, 0, 207, 0) 100%);
    filter: blur(60px);
    opacity: .45;
    pointer-events: none;
    z-index: 0;
}

.benefits-glow--bl {
    left: 0;
    bottom: 0;
    transform: translate(-30%, 40%);
}

.benefits-glow--tr {
    right: 0;
    top: 0;
    transform: translate(40%, -30%);
}

.benefits .container {
    position: relative;
    z-index: 1;
}

.benefits-box {
    display: flex;
    border: 1px solid var(--color-accent);

    overflow: hidden;
}

/* ===== find-the-threat CTA banner ===== */
.threat-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-radius: 18px;
    padding: 20px 40px;
    overflow: hidden;
  background-color: #0E1020;
}

/* top-center & bottom-center glow streaks */
.threat-cta__glow {
    position: absolute;
    left: 50%;
    width: 100%;
    max-width: 1000px;
    pointer-events: none;
    z-index: 0;
}

.threat-cta__glow svg {
    display: block;
    width: 100%;
    height: auto;
}

.threat-cta__glow--top {
    top: 0;
    transform: translate(-50%, -70%);
}

.threat-cta__glow--bottom {
    bottom: 0;
    transform: translate(-50%, 70%) scaleY(-1);
}

.threat-cta__content {
    flex: 1 1 35%;
    position: relative;
    z-index: 1;
}

.threat-cta__title {
    color: var(--color-white);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1.6rem;
}

.threat-cta__btn {
    display: inline-block;
    padding: .6rem 1.6rem;
    font-size: 1rem;
}

.threat-cta__art {
    flex: 1 1 45%;
    text-align: right;
    position: relative;
    z-index: 1;
}

.threat-cta__art img {
    max-width: 100%;
}

/* media-left variant: shield on the left (smaller), text on the right (wider) */
/* same card look as .compliance-card (blue gradient + blue border) */
.threat-cta--media-left {
    border: 1px solid #00aeff;
    background: linear-gradient(320deg, #010314 0%, #012A4D 56%, #0090FF 100%);
}

.threat-cta--media-left .threat-cta__art {
    flex: 1 1 40%;
    text-align: center;
    order: 1;
}

.threat-cta--media-left .threat-cta__content {
    flex: 1 1 55%;
    order: 2;
}


.benefit-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 20px;
    border-left: 1px solid var(--color-accent);
}

.benefit-item:first-child {
    border-left: none;
}

.benefit-icon {
    display: inline-flex;
    color: var(--color-accent);
    margin-bottom: 18px;
}

.benefit-icon svg {
    width: 34px;
    height: 34px;
}

.benefit-title {
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}


/* ===== share real-time analytics ===== */
.vshare-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.vshare-list li {
    position: relative;
    color: var(--color-text-muted);
    font-size: .98rem;
    line-height: 1.6;
    padding: 0 0 0 34px;
    margin-bottom: 18px;
}

/* blue check-circle bullet */
.vshare-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300AEFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.vshare-img {
    border-radius: 14px;
}

/* ===== how is shield different (feature grid) ===== */
.vdiff {
    position: relative;
    overflow: hidden;
    background: #060B18;
}

/* faint square grid overlay */
.vdiff::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 25px 25px;
    -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 30%, transparent 85%);
    mask-image: radial-gradient(100% 100% at 50% 50%, #00000059 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

.vdiff-glow {
    position: absolute;
    left: 50%;
    width: 100%;
    max-width: 1100px;
    pointer-events: none;
    z-index: 0;
}

.vdiff-glow svg {
    display: block;
    width: 100%;
    height: auto;
}

.vdiff-glow--top {
    top: 0;
    transform: translate(-50%, -72%) scaleY(-1);
}

.vdiff-glow--bottom {
    bottom: 0;
    transform: translate(-50%, 72%);
}

.vdiff .container {
    position: relative;
    z-index: 1;
}



.vdiff-icon img {
    width: 40px;
    height: auto;
    object-fit: contain;
    margin-bottom: 10px;
}

.vdiff-icon svg {
    width: 40px;
    height: 40px;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.vdiff-title {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 10px;
}

.vdiff-text {
    color: var(--color-text-muted);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}
.th-card-outcomes {
    position: relative;
    height: 100%;
    border-radius: 12px;
    padding: 1.5rem;
    background: #111323;
    /* border: 1px solid var(--color-border-toggler); */
    /* box-shadow: inset 0 3.52px 20px 0 rgba(255, 255, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px rgba(0, 0, 0, .35); */
}

/* ===== shared live view shield animation ===== */
.vview-img .vv-shield {
    animation: vvFloat 4s ease-in-out infinite;
}

.vview-img .vv-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: vvPulse 4s ease-in-out infinite;
}

.vview-img .vv-badge {
    transform-box: fill-box;
    transform-origin: center;
}

.vview-img .vv-badge1 {
    animation: vvFloat 3.4s ease-in-out infinite;
}

.vview-img .vv-badge2 {
    animation: vvFloat 4.2s ease-in-out .3s infinite;
}

.vview-img .vv-badge3 {
    animation: vvFloat 3.8s ease-in-out .6s infinite;
}

@keyframes vvFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes vvPulse {
    0%, 100% { opacity: .25; }
    50% { opacity: .55; }
}


/* ===== supercharge CTA ===== */
.vcta {
    position: relative;
    border-radius: 12px;
    padding: 90px 24px;
    overflow: hidden;
    /* border: 1px solid var(--color-border-soft); */
    background:
        #0e1020;
}

/* faint square grid, fading out toward the edges (own style) */
.vcta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 25px 25px;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 80%);
    mask-image: radial-gradient(80% 80% at 50% 50%, #00000059 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

.vcta__glow {
    position: absolute;
    left: 50%;
    width: 100%;
    max-width: 1100px;
    pointer-events: none;
    z-index: 0;
}

.vcta__glow svg {
    display: block;
    width: 100%;
    height: auto;
}

.vcta__glow--top {
    top: 0;
    transform: translate(-50%, -72%) scaleY(-1);
}

.vcta__glow--bottom {
    bottom: 0;
    transform: translate(-50%, 72%);
}

.vcta__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

/* ---------- Email Infrastructure image box (navy + top-right blue glow) ---------- */
.infra-box {
    border-radius: 12px;
    padding: 24px;
    background:
        radial-gradient(115% 120% at 100% 0%, rgba(80, 120, 210, .55) 0%, rgba(20, 45, 100, .28) 26%, rgba(2, 6, 20, 0) 55%);
    background-clip: padding-box;
    border: 1px solid var(--color-border-soft) !important;
}

.infra-box img {
    border-radius: 12px;
}

/* ---------- Protect Your Domain In 3 Simple Steps ---------- */
/* left heading stays centred beside the inner-scrolling steps box */
.steps-left {
    display: flex;
    align-items: center;
}

/* right column is a fixed-height box; steps snap one at a time inside it */
.steps-scroll {
    height: 460px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.steps-scroll::-webkit-scrollbar {
    display: none;
}

.step-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    scroll-snap-align: start;
}

.step-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.step-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.step-img {
    width: 60%;
    margin-top: 24px;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--color-border-soft);
    background:
        radial-gradient(80% 70% at 8% 6%, rgba(40, 95, 210, .55) 0%, rgba(10, 30, 80, 0) 48%),
        radial-gradient(95% 85% at 50% 108%, rgba(115, 49, 255, .45) 0%, rgba(53, 49, 255, .20) 38%, rgba(5, 12, 35, 0) 62%);
    background-clip: padding-box;
}

.step-img img {
    width: 85% !important;
    /* aspect-ratio: 1 / 1; */
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin: auto;
}

@media (max-width: 991.98px) {
    .steps-left {
        display: block;
        margin-bottom: 32px;
    }

    .steps-scroll {
        height: auto;
        overflow: visible;
        scroll-snap-type: none;
    }

    .step-item {
        height: auto;
        padding-bottom: 48px;
    }

    .step-img {
        width: 80%;
    }
}

/* ---------- Dark Web iceberg hero ---------- */
.iceberg-hero {
    position: relative;
    overflow: hidden;
    /* padding: 20px; */
    border-radius: 12px;
    background:
        #000E22;
}

/* curved arc glow SVG anchored to the top-left */
.iceberg-glow {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 650px;
    max-width: 80%;
    pointer-events: none;
    z-index: 0;
}

.iceberg-glow svg {
    width: 100%;
    height: auto;
    display: block;
}

/* blue -> purple blurred glow anchored to the bottom-right */
.iceberg-hero::after {
    content: "";
    position: absolute;
    right: 0%;
    bottom: 0%;
    width: 260px;
    height: 135px;
    max-width: 60%;
    background: linear-gradient(273deg, #0066FF 0%, #5E00FF 100%);
    filter: blur(90px);
    opacity: .45;
    border-radius: 24px;
    pointer-events: none;
    z-index: 1;
}

.iceberg-hero .row {
    position: relative;
    z-index: 1;
}

.iceberg-title {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.25;
}

.iceberg-img {
    max-width: 760px;
    /* feather the edges so the image's rectangle melts into the card bg */
    -webkit-mask:
        linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask:
        linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
}

@media (max-width: 991.98px) {
    .iceberg-title {
        font-size: 30px;
        text-align: center;
    }
}

/* ---------- Email Security By The Numbers ---------- */
.stats-numbers {
    position: relative;
    overflow: hidden;
}

.stats-lines {
    position: absolute;
    top: -85px;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .45;
}

.stats-lines svg {
    width: 100%;
    height: 100%;
    display: block;
}

.stats-content {
    position: relative;
}

.stats-content>.stats-eyebrow,
.stats-content>.row {
    position: relative;
    z-index: 1;
}

.stats-eyebrow {
    color: var(--color-text-muted-2);
    font-size: 16px;
    letter-spacing: .12em;
    margin-bottom: 70px;
}

.stat-value {
    color: var(--color-white);
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 14px;
}

.stat-label {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .stat-value {
        font-size: 42px;
    }

    .stats-numbers .col-md-4+.col-md-4 {
        margin-top: 36px;
    }
}

/* ---------- Email Infrastructure feature grid ---------- */
.email-features {
    position: relative;
    overflow: hidden;
}

.ef-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 9px;
    padding: 28px 24px 32px;
    text-align: center;
    background: #ffffff0d;
    border: 1px solid #ffffff0d;
}

.ef-card .resolve-text {
    margin-bottom: 26px;
}

.ef-icon {
    position: relative;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* blurred blue glow behind the icon */
.ef-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #0037ffad 0%, rgba(0, 174, 255, 0) 100%);
    filter: blur(50px);
    opacity: .45;
    pointer-events: none;
    z-index: 0;
}

.ef-icon img {
    position: relative;
    z-index: 1;
    width: 45%;
}

/* ---------- Protection Across Every Digital Surface (owl marquee cards) ---------- */
/* content-card variant of the owl slide: wider, transparent wrapper, left-aligned */
.owl-slide.owl-slide--card {
    width: min(620px, 86vw);
    padding: 6px 0;
    background: transparent;
    border-radius: 0;
    align-items: stretch;
    text-align: left;
    /* dragging the carousel shouldn't select the card text */
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Protection Across Every Digital Surface (center-peek carousel of boxes) ---------- */
/* scroll track: one box centred, neighbours peek on both sides (CSS scroll-snap) */
.peek-track {
    display: flex;
    gap: 35px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* side padding = (100% - slide width)/2 so the centred slide sits in the middle */
    padding: 10px 13%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.peek-track::-webkit-scrollbar {
    display: none;
}

.peek-slide {
    flex: 0 0 74%;
    scroll-snap-align: center;
}

.surface-box {
    position: relative;
    height: 100%;
    border-radius: 9px;
    padding: 40px 32px;
    overflow: hidden;
    border: 1px solid var(--box-border, var(--color-border-soft));
    /* per-box linear gradient: black -> accent hue (see modifiers below) */
    background: var(--box-grad, linear-gradient(90deg, #000000 0%, #45266E 100%));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);

    transition: opacity .35s ease, transform .35s ease;
}

/* faint square grid overlay on top of the gradient, fading out left -> right */
.surface-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22.74px 22.74px;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 90%);
    mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 55%, #00000059  90%);
    pointer-events: none;
    z-index: 0;
}

/* keep the card content above the grid overlay */
.surface-box>.row {
    position: relative;
    z-index: 1;
}



/* per-box gradient (black -> accent hue) + border. Purple uses the exact
   design value (#45266E); the rest follow the same black->hue scheme. */
.surface-box--purple {
    --box-grad: linear-gradient(90deg, #000000 0%, #45266E 100%);
    --box-border: #9D1CFF;
}

.surface-box--blue {
    --box-grad: linear-gradient(90deg, #000000 0%, #262C6E 100%);
    --box-border: #1C2FFF;
}

.surface-box--teal {
    --box-grad: linear-gradient(90deg, #000000 0%, #0B5472 100%);
    --box-border: #1CCAFF;
}

.surface-box--orange {
    --box-grad: linear-gradient(90deg, #000000 0%, #70321F 100%);
    --box-border: #922C00;
}

.surface-box--green {
    --box-grad: linear-gradient(90deg, #000000 0%, #1F7067 100%);
    --box-border: #01C08A;
}

.surface-box__art {
    width: 100%;
    max-width: 240px;
    height: auto;
}

.surface-box__title {
    color: var(--color-white);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 12px;
}

.surface-box__text {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    margin: 0;
}

/* ===== vendors hero (grid-overlay box, own style) ===== */
.vendors-hero {
    position: relative;
    border-radius: 16px;
    padding: 48px 40px;
    overflow: hidden;
}

/* faint square grid, fading out from left -> right */
.vendors-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 174, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 174, 255, .08) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(130% 130% at 50% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(130% 130% at 50% 50%, #00000059 55%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* soft accent glow on the right */
.vendors-hero::after {
    content: "";
    position: absolute;
    right: 0;
    /* top: 50%; */
    width: 420px;
    height: 420px;
    transform: translate(30%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 174, 255, .25) 0%, rgba(76, 0, 207, 0) 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.vendors-hero > .row {
    position: relative;
    z-index: 1;
}

/* ===== vendor leak detection accordion ===== */
.vlead-acc {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.vlead-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 18px 22px;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease;
}

.vlead-item.active {
    background: #0E1020;
    border-color: var(--color-border-soft);
}

.vlead-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.vlead-num {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1rem;
}

.vlead-head {
    color: var(--color-white);
    font-weight: 600;
    font-size: 1.1rem;
}

.vlead-item:not(.active) .vlead-head {
    color: var(--color-text-muted-2);
    font-weight: 500;
}

/* description: hidden until the item is active */
.vlead-desc {
    color: var(--color-text-muted);
    font-size: .92rem;
    line-height: 1.6;
    margin: 12px 0 0;
    /* indent under the title text */
    padding-left: 32px;
    display: none;
}

.vlead-item.active .vlead-desc {
    display: block;
}

.vlead-imgbox {
    position: relative;
    max-width: 370px;
    border-radius: 12px;
    padding: 24px;
    overflow: hidden;
   border: none;
}

.vlead-imgbox img {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    width: 100% !important;
    height: 255px;
    object-fit: contain;
}


/* prev / next controls below the carousel */
.peek-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

.peek-arrow {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-white);
    background: #010314;
    border: 1px solid var(--color-border-login);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.peek-arrow:hover:not(:disabled),
.peek-arrow:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
    outline: none;
}

.peek-arrow:disabled {
    opacity: .4;
    cursor: default;
}

@media (max-width: 991.98px) {
    .peek-slide {
        flex-basis: 86%;
    }

    .peek-track {
        padding: 10px 7%;
    }
}

@media (max-width: 767.98px) {
    .peek-slide {
        flex-basis: 100%;
    }

    .peek-track {
        padding: 10px 0%;
    }

    .surface-box {
        padding: 22px;
    }

    .surface-box__title {
        font-size: 19px;
    }

    .surface-box__art {
        max-width: 200px;
    }
}

/* ===== Brand takedown grid visual ===== */
.brand-takedown-visual {
    overflow: hidden;
}

.brand-takedown-visual .bt-grid {
    width: 100%;
    height: auto;
    display: block;
    /* Pull the grid up so it sits at the section bottom. A negative % (relative
       to width) scales with the SVG, so the overlap stays right on every screen.
       -170px / 1920 ≈ -8.85%. */
    margin-top: -12.85%;
}

/* The cell sits dim, then gently ramps up to a glow and fades back. */
@keyframes bt-cell-twinkle {

    0%,
    100% {
        stroke: #ffffff;
        stroke-opacity: 0.1;
    }

    50% {
        stroke: #00c3ffbe;
        stroke-opacity: 0.45;
    }
}

/* A scattered subset of cells twinkles — the rest stay dim. Mixing several
   primes (so cells don't line up into stripes) with different delays and
   durations (so they don't blink together) reads as random. */
.bt-grid>g[mask]>path:nth-child(7n+2) {
    animation: bt-cell-twinkle 7s ease-in-out 0.3s infinite;
}

.bt-grid>g[mask]>path:nth-child(11n+4) {
    animation: bt-cell-twinkle 8.4s ease-in-out 1.7s infinite;
}

.bt-grid>g[mask]>path:nth-child(13n+7) {
    animation: bt-cell-twinkle 6.1s ease-in-out 0.9s infinite;
}

.bt-grid>g[mask]>path:nth-child(17n+11) {
    animation: bt-cell-twinkle 9s ease-in-out 2.4s infinite;
}

.bt-grid>g[mask]>path:nth-child(19n+3) {
    animation: bt-cell-twinkle 7.7s ease-in-out 1.2s infinite;
}

.bt-grid>g[mask]>path:nth-child(23n+15) {
    animation: bt-cell-twinkle 6.8s ease-in-out 3.1s infinite;
}

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

    .bt-grid>g[mask]>path,
    .bt-grid .bt-glow {
        animation: none;
    }
}

/* Brand-monitoring hero glow — recreates the Figma "Angular" gradient.
   SVG exports it via <foreignObject>, which does not render through <img>,
   so we rebuild it as a native CSS conic-gradient.
   Figma stops: #00AEFF 0deg → transparent at 40% (144deg) → #00AEFF 360deg.
   The matrix(0.5445 0.18 …) export tilts it ~18° around ~71% / 72%. */
.brand-hero-glow {
    height: auto;
    background: conic-gradient(from 134.67deg at 68% 69%, #00AEFF 2deg, rgba(0, 0, 0, 0) 121deg, #00080f00 226deg, #00aeff 360deg);
    mix-blend-mode: normal;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

/* fixed-height scroll area — steps are scrolled through inside this box */
.enforcement-flow .ef-scroll {
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    scrollbar-width: thin;
    overflow-x: hidden;
    scrollbar-color: transparent transparent;
}

.enforcement-flow .ef-scroll::-webkit-scrollbar {
    width: 6px;
}

.enforcement-flow .ef-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 174, 255, .5);
    border-radius: 999px;
}

.enforcement-flow .ef-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    /* connecting vertical line behind the numbers */
    position: relative;
}

.enforcement-flow .ef-steps::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    /* long vertical dashes: 14px dash, 10px gap */
    background: repeating-linear-gradient(180deg,
            rgba(0, 174, 255, .55) 0 14px,
            transparent 14px 24px);
    /* dashes continuously flow downward (one period = 24px) */
    animation: ef-line-flow 1.1s linear infinite;
}

@keyframes ef-line-flow {
    to {
        background-position-y: 24px;
    }
}

.ef-step {
    position: relative;
    display: flex;
    gap: 1.2rem;
    padding-bottom: 2.6rem;
    /* Pure-CSS scroll reveal: each step animates as it enters the scroll box.
       view() ties the animation to the nearest scroller (.ef-scroll) — no JS.
       Browsers without scroll-timeline just show the step (ends at 100%). */
    animation: ef-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
}

.ef-step:last-child {
    padding-bottom: 0;
}

@keyframes ef-reveal {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ef-step__num {
    flex-shrink: 0;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--color-white);
    background: linear-gradient(180deg, #00AEFF 0%, #006999 100%);
    box-shadow: 0 0 0 5px rgba(0, 174, 255, .12);
    position: relative;
    z-index: 1;
}

.ef-step__tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .4px;
    color: var(--color-white);
    background: #011831;
    border: 1px solid rgba(0, 174, 255, .35);
    border-radius: 999px;
    padding: .15rem .8rem;
    margin-bottom: .7rem;
}

.ef-step__title {
    color: var(--color-white);
    font-size: 1.18rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.ef-step__text {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.ef-step__highlight {
    color: var(--color-accent);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .ef-step {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .enforcement-flow .ef-steps::before {
        animation: none;
    }
}

/* ===== Bottom CTA with glowing dome SVG behind the text ===== */
.bg-gradiant-cta-glow {
    background: radial-gradient(ellipse 60% 70% at 50% 0%, #b04aff0a 0%, rgba(2, 0, 20, 0) 100%);
}
.bg-gradiant-cta-glow .cta-glow__content
{
    padding-top: 4rem;
    padding-bottom: 7rem;
}
.cta-glow__content--dns .cta-glow__content
{
    padding-top: 7rem;
    padding-bottom: 7.5rem;
}
.cta-glow {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta-glow__bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1482px;
    pointer-events: none;
    z-index: 0;
    line-height: 0;
}

/* dome glow loaded from animated-svg/cta-dome-glow.svg (animations live inside it) */
.cta-glow__bg svg,
.cta-glow__bg img {
    width: 100%;
    height: auto;
    display: block;
}

/* DNS hero variant: dome glow sits behind the title/form and must stay
   fully visible (never cropped) at every breakpoint */
.cta-glow__bg--dns {
    top: 0;
    width: min(100%, 1100px);
    max-width: 1100px;
}

.cta-glow__bg--dns img {
    transform: rotate(180deg);
}



/* mail icon decoration on the hero's left side, with a self-drawing line */
.cta-mail-deco {
    position: absolute;
    left: 8%;
    top: 40%;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}

/* shield icon decoration on the hero's top-left corner */
.cta-shield-deco {
    position: absolute;
    left: 22%;
    top: 4%;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}

/* alert icon decoration on the hero's top-right corner */
.cta-alert-deco {
    position: absolute;
    right: 22%;
    top: 0%;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}

/* search icon decoration on the hero's bottom-right corner */
.cta-search-deco {
    position: absolute;
    right: 10%;
    bottom: 35%;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}

.cta-search-deco .draw-line {
    animation-duration: 3.2s;
    animation-delay: .6s;
}

/* stagger the two so they don't draw in sync */
.cta-mail-deco .draw-line {
    animation-duration: 2.8s;
    animation-delay: 0s;
}

.cta-shield-deco .draw-line {
    animation-duration: 3.6s;
    animation-delay: 1.2s;
}

.draw-line {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: drawLine 2.4s ease-in-out infinite;
}

@keyframes drawLine {
    0% {
        stroke-dashoffset: 150;
    }

    55%,
    100% {
        stroke-dashoffset: 0;
    }
}

/* decorative star dots band across the hero */
.cta-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
    line-height: 0;
}

.cta-stars svg {
    width: 100%;
    height: auto;
    display: block;
}

/* twinkling star dots */
.cta-stars rect {
    transform-box: fill-box;
    transform-origin: center;
    animation: starTwinkle 3s ease-in-out infinite;
}

.cta-stars rect:nth-child(2n) {
    animation-duration: 4s;
    animation-delay: .6s;
}

.cta-stars rect:nth-child(3n) {
    animation-duration: 2.4s;
    animation-delay: 1.2s;
}

.cta-stars rect:nth-child(4n) {
    animation-duration: 3.6s;
    animation-delay: 1.8s;
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: .25;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.cta-glow__content {
    position: relative;
    z-index: 1;
    padding-top: 7rem;
}

.cta-glow__content .hero-title {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== discovery -> intelligence flow graphic ===== */
.discovery-flow {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* side icon circles */
.df-node {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--color-accent);
    background: #fff;
    border: 1px solid rgba(0, 174, 255, .35);
    box-shadow: inset 0 0 18px rgba(0, 174, 255, .25), 0 0 25px rgba(0, 174, 255, .15);
}

.df-node svg {
    width: 30px;
    height: 30px;
}

/* connector line + node dot at the radar end */
.df-line {
    flex: 1 1 auto;
    max-width: 90px;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 174, 255, 0.534), rgba(0, 174, 255, .6));
    position: relative;
}

.df-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #00AEFF;
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(0, 174, 255, .8);
}

/* dots sit at the radar-facing end of each line */
.df-line--left::after {
    right: 0px;
}

.df-line--right::after {
    left: 0px;
}

/* center radar square */
.df-radar {
    flex: 0 0 auto;
    width: 120px;
    /* max-width: 38vw; */
    aspect-ratio: 1;
    border-radius: 12px;
    padding: 5px;
    background: linear-gradient(150deg, #2EA8FF 0%, #0A6FD6 55%, #014C9E 100%);
    /* box-shadow: 0 18px 50px rgba(0, 110, 220, .45); */
}

.df-radar svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)) drop-shadow(0 0 9px rgba(120, 200, 255, .4));
}

.df-sweep {
    transform-box: view-box;
    transform-origin: 150px 150px;
    animation: dfSweep 4s linear infinite;
}

@keyframes dfSweep {
    to {
        transform: rotate(360deg);
    }
}

/* ===== "Why TechOwl Shield" ===== */
.why-shield { padding: 30px 0; }
.why-shield__visual {
    border-radius: 16px;
    overflow: hidden;
}
.why-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.why-list li {
    position: relative;
    padding: 10px 0 10px 28px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.5;
    border-bottom: 1px solid var(--color-border-soft);
}
.why-list li:last-child { border-bottom: 0; }
/* blue glowing dot marker, aligned to the first line */
.why-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 21px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}

/* ===== "Built for rapid enforcement" cards ===== */
.enforce-card {
    height: 100%;
    text-align: center;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid #00aeff83;
    background: linear-gradient(180deg, #011123 0%, #010314 100%);
}

.enforce-icon {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.3rem;
}

.enforce-icon img {
    width: 100%;
    height: 100%;
    display: block;
        mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 53%, transparent 0%);
}
.enforce-icon-3 img
{
    mask-image: radial-gradient(ellipse 70% 70% at 50% 52%, #01083a 60%, transparent 76%);
}

/* centred text for the clock icon */
.enforce-icon__txt {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.enforce-icon__txt b {
    color: var(--color-white);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

.enforce-icon__txt span {
    color: var(--color-accent);
    font-size: .5rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 3px;
}


/* ===== "Your brand is already being targeted" CTA box ===== */

.target-cta__box {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    padding: 3.5rem 1.5rem 3rem;
    background: #000206;
    box-shadow: 0 0 60px rgba(0, 174, 255, .08);
}

/* inner glow overlay — sits ABOVE the art image (so the image is behind it)
   but below the text content */
.target-cta__box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 60px 0 rgba(0, 119, 255, .5);
    pointer-events: none;
    z-index: 1;
}

/* linear gradient border (#0077FF -> #00AEFF), inside — via mask trick */
.target-cta__box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg, #0077FF 0%, #00AEFF 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* background art layer (clipped to the rounded box) */
.target-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* full design art fills the box; its rectangular edges are faded into the
   box background (#000206) with a mask so there is no visible seam */
.target-cta__art {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 780px;
    height: 280px;
    object-fit: cover;
    object-position: center top;
    -webkit-mask-image: radial-gradient(135% 120% at 50% 0%, #000 55%, transparent 100%);
    mask-image: radial-gradient(135% 120% at 50% 0%, #000 55%, transparent 100%);
}

.target-cta__content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.target-cta__owl {
    width: 110px;
    height: auto;
    margin-bottom: 1.6rem;
    filter: drop-shadow(0 0 26px var(--owl-drop-shadow));
}

.target-cta .hero-title {
    margin-top: 14%;
}

/* ===== "Explore other capabilities" cards ===== */
.cap-card {
    display: block;
    height: 100%;
    padding: 1.6rem 1.5rem;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    text-decoration: none;
    background: transparent;
    transition: transform .3s ease;
}

/* gradient border only (transparent fill) via mask: #00AEFF -> 20% */
.cap-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.8px;
    background: radial-gradient(circle at 100% 0%, #00AEFF 0%, rgb(0 174 255 / 17%) 25%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.cap-card__title {
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .6rem;
}

.cap-card__text {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

.footer-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .4px;
    color: var(--color-white);
    background: #00aeff33;
    border: 1px solid #00AEFF;
    border-radius: 999px;
    padding: .15rem .8rem;
    margin-bottom: .7rem;
}
/* ===== EASM hero bars graphic (pure CSS) ===== */
.easm-bars {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.6vw, 14px);
    width: 100%;
}

.easm-bars .bar-row {
    display: flex;
    align-items: center;
}

.easm-bars .bar {
    height: clamp(12px, 2.4vw, 22px);
    border-radius: 2px;
    background: linear-gradient(90deg, #16baf6 0%, #2f74ef 55%, #5d6ca0 100%);
}

/* accent bar with the magenta shift */
.easm-bars .bar--alt {
    background: linear-gradient(90deg, #16baf6 0%, #7b6fd6 42%, #c46fb0 68%, #5d6ca0 100%);
}

/* mirror image of the left graphic (used on the right) */
.easm-bars--flip {
    transform: scaleX(-1);
}
.asset-discovery
{
    background-color: #ffffff0d;
    border: 1px solid #ffffff1a;
    padding: 15px;
    border-radius: 9px;
}

/* ===== asset-map: name badges overlaid on the diagram image ===== */
.asset-map {
    position: relative;
    width: 50%;
}

.asset-map .am-badge {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background-color: #ffffff0d;
    border: 1px solid #ffffff1a;
    color: var(--color-white);
    font-size: clamp(11px, 1.5vw, 15px);
    line-height: 1.25;
    text-align: center;
    padding: .45em .85em;
    border-radius: 8px;
    /* backdrop-filter: blur(2px); */
    pointer-events: none;
    opacity: 0;
    animation: amBadgeCycle 6s ease-in-out infinite;
}

@keyframes amBadgeCycle {
    0%   { opacity: 0; transform: translate(-50%, -35%) scale(.9); }
    8%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    95%  { opacity: 0; transform: translate(-50%, -62%) scale(.95); }
    100% { opacity: 0; transform: translate(-50%, -35%) scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
    .asset-map .am-badge {
        opacity: 1;
        animation: none;
    }
}

/* ===== Detect Suspicious Domains: full-width glow behind content ===== */
.suspicious-domains {
    position: relative;
    overflow: hidden;
}

.suspicious-glow {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.suspicious-domains .container {
    position: relative;
    z-index: 1;
}

/* ===== attack-path cards (gradient icon panel + text) ===== */
.attack-card {
    display: flex;
    align-items: stretch;
    height: 100%;
    border: 1px solid var(--color-border-card);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-attack-bg-top) 0%, var(--color-attack-bg-bottom) 100%);
}

.attack-card__icon {
    flex: 0 0 auto;
    width: clamp(80px, 28%, 115px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background: linear-gradient(160deg, var(--color-attack-icon-top) 0%, var(--color-attack-icon-bottom) 100%);
    border-right: 2px solid var(--color-attack-icon-border);
    box-shadow: 2px 0 16px var(--color-attack-icon-glow);
}

.attack-card__icon svg {
    width: 35px;
    height: 35px;
}

.attack-card__body {
    padding: 20px 22px;
}

.attack-card__body .resolve-title {
    margin-bottom: 8px;
}

/* ===== vendor-extends accordion (dark theme) ===== */
.eapm-accordion .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
}

.eapm-accordion .accordion-button {
    background: transparent;
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    padding: 1rem .25rem;
    box-shadow: none;
}

.eapm-accordion .accordion-button:not(.collapsed) {
    color: var(--color-accent);
    background: transparent;
    box-shadow: none;
}

.eapm-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* recolor the default chevron to white / accent */
.eapm-accordion .accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: .7;
}

.eapm-accordion .accordion-button:not(.collapsed)::after {
    filter: invert(56%) sepia(98%) saturate(2200%) hue-rotate(170deg) brightness(101%);
    opacity: 1;
}

.eapm-accordion .accordion-body {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.7;
    padding: 0 .25rem 1rem;
}

.vendor-acc-box {
    border-radius: 18px;
    padding: clamp(1rem, 3vw, 2rem);
    background: #00AEFF;
    box-shadow: inset 0 0 82px 0 #006FFF;
    /* overflow: hidden; */
    width: 350px;
    height: 300px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* concentric-circle decoration peeking out behind the box's top-right */
.vendor-acc-deco {
    position: absolute;
    top: -42%;
    right: 0%;
    width: 50%;
    z-index: 0;
    pointer-events: none;
}

.vendor-acc-deco svg {
    width: 100%;
    height: auto;
}

@media (max-width: 991.98px) {
    .vendor-acc-deco {
        display: none;
    }
}

.vendor-acc-box {
    position: relative;
    z-index: 1;
}

.vendor-acc-img {
    border-radius: 12px;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .3s ease;
}

/* ===== "You Cannot Secure What You Cannot See" hero ===== */
.secure-see {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.secure-grid {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1500px;
    height: auto;
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

.secure-title {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.25;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.secure-hand-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

.secure-hand {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
}

/* ===== risk-surface card (blue glow → navy gradient box) ===== */
.risk-card {
    border-radius: 16px;
    border: 1px solid #00aeff;
    padding: 30px 30px;
    background: linear-gradient(320deg, #010314 0%, #012A4D 56%, #0090FF 100%);
}

/* two-tile variant of risk-card */
.compliance-card {
    border-radius: 12px;
    border: 1px solid #00aeff;
    padding: 30px 30px;
    background: linear-gradient(320deg, #010314 0%, #012A4D 56%, #0090FF 100%);
}

/* ===== newsletter subscribe (same card look) ===== */
.newsletter-card {
    max-width: 880px;
    padding: 48px 30px;
}

.newsletter-icon {
    display: inline-flex;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

.newsletter-icon svg {
    width: 48px;
    height: 48px;
}

.newsletter-input {
    width: min(360px, 100%);
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--white-border-30);
    background: rgba(1, 5, 22, .45);
    color: var(--color-white);
    padding: 0 16px;
    font-size: 15px;
    outline: none;
}

.newsletter-form .btn-contact {
    height: 42px;
    padding: 0 1.2rem;
    border-radius: 10px;
}

.newsletter-input::placeholder {
    color: var(--color-text-muted-2);
}

.newsletter-input:focus {
    border-color: var(--color-accent);
}


/* soft vertical divider between the columns (white, fading out at top/bottom) */
.risk-card .row>[class*="col-"] {
    position: relative;
}

.risk-card .row>[class*="col-"]::before {
    content: "";
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 19%) 50%, rgba(255, 255, 255, 0) 100%);
}

/* 4 per row on lg+: no line before the first item */
@media (min-width: 992px) {
    .risk-card .row>[class*="col-"]:nth-child(4n+1)::before {
        display: none;
    }
}

/* 2 per row on md: no line before the first item of each row */
@media (min-width: 768px) and (max-width: 991.98px) {
    .risk-card .row>[class*="col-"]:nth-child(2n+1)::before {
        display: none;
    }
}

/* stacked on small screens: hide all dividers */
@media (max-width: 767.98px) {
    .risk-card .row>[class*="col-"]::before {
        display: none;
    }
}

/* ===== owl-face page preloader ===== */
/* Full-screen splash shown on every load/refresh. Sequence:
   1. two backdrop panels slide in (one from the left, one from the right) and
      each one carries its half of the owl face, so the logo arrives together
      with the background and meets in the centre,
   2. the owl blinks its eyes once,
   3. on exit the owl fades and the panels slide back out, revealing the page. */
.owl-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    /* solid black fill so the splash covers the page the instant it is added —
       the navy panels + owl then slide in smoothly on top, never revealing the
       page content underneath (no flash of the page before the loader). */
    background: #010314;
}

/* each panel is one half of the backdrop; its overflow:hidden also clips the
   owl half exactly at the centre seam. A plain vertical gradient keeps the
   seam invisible where the two panels meet. */
.owl-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
    background:
        linear-gradient(180deg, #061331 0%, var(--color-bg-top) 55%, var(--color-bg-bottom) 100%);
}

.owl-panel--left {
    left: 0;
    animation: owlBgInLeft .6s cubic-bezier(.2, .8, .25, 1) both;
}

.owl-panel--right {
    right: 0;
    animation: owlBgInRight .6s cubic-bezier(.2, .8, .25, 1) both;
}

/* the owl box is centred on the seam inside each panel; the panel edge clips
   it to a single half. Left panel keeps the left half, right panel the right. */
.owl-half {
    position: absolute;
    top: 50%;
    width: 92px;
    height: 102px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 12px var(--owl-drop-shadow));
    transition: opacity .2s ease;
}

.owl-half--left {
    left: 100%;
}

.owl-half--right {
    left: 0;
}

.owl-half svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* the owl is shown in its brand colours */
.owl-c1,
.owl-c2,
.owl-c4 {
    fill: #00AFEF;
}

.owl-c3,
.owl-c5,
.owl-c6 {
    fill: #2E538E;
}

.owl-c7 {
    fill: #FEFEFE;
}

/* the owl gently blinks while the page loads. The lid eases shut to a thin line
   and eases back open, looping softly — no hard snap, no full collapse. */
.owl-eye {
    transform-box: fill-box;
    transform-origin: center center;
    animation: owlBlink 2.1s ease-in-out .25s infinite both;
}

@keyframes owlBlink {

    0%,
    30%,
    100% {
        transform: scaleY(1);
    }

    45%,
    55% {
        transform: scaleY(0.08);
    }

    70% {
        transform: scaleY(1);
    }
}

@keyframes owlBgInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes owlBgInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/* exit: the owl fades out first, then the empty panels slide back out — so the
   logo only ever appears while arriving, never while leaving */
/* on exit, drop the solid black fill so the page shows through the gap as the
   panels slide back out — black only ever covers the page while arriving. */
.owl-preloader.is-leaving {
    background: transparent;
}

.owl-preloader.is-leaving .owl-half {
    opacity: 0;
}

.owl-preloader.is-leaving .owl-panel--left {
    animation: owlBgOutLeft .55s cubic-bezier(.55, 0, .85, .3) .18s forwards;
}

.owl-preloader.is-leaving .owl-panel--right {
    animation: owlBgOutRight .55s cubic-bezier(.55, 0, .85, .3) .18s forwards;
}

@keyframes owlBgOutLeft {
    to {
        transform: translateX(-100%);
    }
}

@keyframes owlBgOutRight {
    to {
        transform: translateX(100%);
    }
}

/* keep the page from scrolling while the splash is up, and paint the document
   black immediately (the owl-loading class is set in <head> before first paint)
   so there is no flash of page content before the splash panels slide in. */
html.owl-loading,
html.owl-loading body {
    overflow: hidden;
    background: #010314;
}

/* respect users who prefer less motion: no panel slide, no eye blink */
@media (prefers-reduced-motion: reduce) {

    .owl-panel--left,
    .owl-panel--right,
    .owl-eye {
        animation: none;
    }
}

/* ===== contact page (contact-* namespace) ===== */

/* decorative mesh-grid backdrop */
.contact__mesh {
    position: absolute;
    top: 15%;
    left: 8%;
    /* transform: translate(-50%, -50%); */
    z-index: -1;
    pointer-events: none;
}

.contact__mesh svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* faint static grid outline */
.contact-grid path {
    stroke: #ffffff;
    stroke-opacity: 0.12;
}

/* a few tiles fill with blue and gently twinkle */
.contact__mesh .spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: contactTwinkle 4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.5s);
}

@keyframes contactTwinkle {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* a bright dash of light travels along selected grid lines */
.contact__mesh .cta-line-flow {
    fill: none;
    stroke: #9bdcff;
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-dasharray: 22 78;
    opacity: 0.8;
    filter: drop-shadow(0 0 4px #9bdcff);
    animation: contactLineFlow var(--dur, 5s) linear infinite;
    animation-delay: var(--d, 0s);
}

@keyframes contactLineFlow {
    0%   { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

/* left column: heading + details */
.contact__lead {
    color: var(--color-text-muted-2);
    max-width: 30rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.contact__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact__item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    color: var(--color-text-muted-2);
}

.contact__item a {
    color: var(--color-text-muted-2);
    text-decoration: none;
    transition: color .2s ease;
}

.contact__item a:hover {
    color: var(--color-accent);
}

.contact__item svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--color-accent);
    margin-top: 2px;
}

/* right column: form card */
.contact__card {
    background: var(--color-card-bg-2);
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.contact-form .form-label {
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-text-muted-2);
    margin-bottom: .4rem;
}

.contact-form .form-control,
.contact-form .form-select {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
    color: var(--color-white);
    padding: .7rem .9rem;
    font-size: .95rem;
}

.contact-form .form-control::placeholder {
    color: var(--color-text-muted);
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    background: var(--color-card-bg);
    border-color: var(--color-accent);
    color: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-glow-accent-15);
}

.contact-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* phone field: country code + number */
.contact-form .phone-group {
    display: flex;
    gap: .6rem;
}

.contact-form .phone-group .form-select {
    flex: 0 0 6rem;
}

.contact-form .phone-group .form-control {
    flex: 1 1 auto;
}

/* consent row */
.contact-form .form-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .25rem 0 1.5rem;
}

.contact-form .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border-login);
}

.contact-form .form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.contact-form .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--color-glow-accent-15);
    border-color: var(--color-accent);
}

.contact-form .form-check-label {
    font-size: .85rem;
    color: var(--color-text-muted-2);
}

.contact-form .form-check-label a {
    color: var(--color-accent);
    text-decoration: none;
}

.contact-form .form-check-label a:hover {
    text-decoration: underline;
}

.contact-form .contact-submit {
    width: 100%;
    padding-block: .8rem;
    font-weight: 600;
}

/* ===== Datasheets grid ===== */
.ds-section-head {
    margin-bottom: 2rem;
}

.ds-section-head .hero-title {
    margin-bottom: .35rem;
}
.ds-section-head .ds-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .4px;
    color: var(--color-white);
    background: #00aeff21;
    border: 1px solid rgba(0, 174, 255, 1);
    border-radius: 999px;
    padding: .35rem 1rem;
    margin-bottom: .7rem;
}
.ds-card .resolve-text
{
    color: var(--color-text-muted-2);
    font-weight: unset;
}
.ds-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 9px;
    padding: 25px;
    background: #0B0D1A;
    border: 1px solid #ffffff17;
    transition: border-color .3s ease;
}

/* mouse-tracking spotlight glow — follows the cursor inside the card */
.ds-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
        rgba(0, 174, 255, 0.28) 0%,
        rgba(0, 174, 255, 0.10) 35%,
        transparent 65%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}


.ds-card:hover::before {
    opacity: 1;
}

/* keep card content above the glow layer */
.ds-card>* {
    position: relative;
    z-index: 1;
}
.ds-download
{
    background-color: transparent !important;
    color:var(--color-accent) !important;
    padding: 0px;
}
.ds-download:hover
{
    color:#0092d6 !important;
}

.ds-icon {
    width: 45px;
    height: 45px;
    border-radius: 999px;
    background: linear-gradient(180deg, #00AEFF 0%, #006999 100%);
    box-shadow: 0 0 0 7px #00aeff26;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.ds-icon i {
    font-size: 22px;
    color: #fff;
}

.ds-logo {
    height: 45px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 20px;
    margin-right: auto;
}

.ds-card .resolve-text {
    flex-grow: 1;
    margin-bottom: 22px;
}

.ds-card .btn-contact {
    width: fit-content;
}

/* ===== Featured full-width banner (TechOwl Shield) ===== */
.ds-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    border-radius: 12px;
    padding: 28px 36px;
    margin-bottom: 1.5rem;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(0, 174, 255, 0.22) 0%, rgba(0, 174, 255, 0.04) 45%, transparent 70%),
        #0B0D1A;
    border: 1px solid rgba(0, 174, 255, 0.45);
}

.ds-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 480px;
}

.ds-banner__logo {
    flex: 0 0 auto;
    width: 190px;
    max-width: 100%;
}

.ds-banner__logo svg,
.ds-banner__logo img {
    width: 100%;
    height: auto;
}

.ds-banner__text {
    margin: 0;
}

.ds-banner .ds-download {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

/* ===== Horizontal datasheet card (image left, content right) ===== */
.ds-card--row {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
}

.ds-card__media {
    /* flex: 0 0 120px; */
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.ds-card__media img {
    width: 100%;
    max-width: 380px;
    height: auto;
    /* filter: drop-shadow(0 6px 18px rgba(0, 174, 255, 0.25)); */
}

.ds-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ds-card--row .resolve-title {
    margin-bottom: .5rem;
}

.ds-card--row .resolve-text {
    margin-bottom: 16px;
}

/* ============================================================
   FAQ page — frequently asked questions accordion
   ============================================================ */
.faq-head {
    position: relative;
    z-index: 1;
    margin: 0 auto 30px;
}

.faq-accordion {
    position: relative;
    z-index: 1;
    /* max-width: 1160px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-accordion .accordion-item {
    background: var(--color-card-bg-3);
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    overflow: hidden;
}

.faq-accordion .accordion-header {
    margin: 0;
}

.faq-accordion .accordion-button {
    background: transparent;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    padding: 22px 26px;
    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--color-white);
    background: transparent;
    box-shadow: none;
}

.faq-accordion .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

/* replace Bootstrap's chevron with a + / − toggle */
.faq-accordion .accordion-button::after {
    content: "\002B";
    background-image: none;
    width: auto;
    height: auto;
    font-size: 24px;
    line-height: 1;
    font-weight: 300;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    transition: color .2s ease;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    content: "\2212";
    transform: none;
}

.faq-accordion .accordion-body {
    color: var(--color-text-muted-2);
    font-size: 14px;
    line-height: 1.7;
    padding: 0 26px 24px;
}

/* ============================================================
   Legal pages — privacy policy / terms (long-form content)
   ============================================================ */
.legal {
    position: relative;
    overflow: clip;
}

/* soft accent glow behind the page head */
/* .legal::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 820px;
    height: 520px;
    background: radial-gradient(ellipse at center, var(--color-glow-accent-15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
} */

/* ---- page head ---- */
.legal-head {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto 3rem;
    text-align: center;
}

.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--color-accent);
    background: #00aeff14;
    border: 1px solid var(--color-border-blue);
    border-radius: 999px;
    padding: .4rem 1rem;
    margin-bottom: 1.1rem;
}

.legal-badge i {
    font-size: 13px;
}

.legal-head .hero-title {
    margin-bottom: .75rem;
}

.legal-intro {
    color: var(--color-text-muted-2);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 auto 1.1rem;
    max-width: 620px;
}

.legal-updated {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-text-muted);
    font-size: 13px;
    margin: 0;
}

.legal-updated::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}

/* ---- two-column layout ---- */
.legal-layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.5rem;
    align-items: start;
    margin: 0 auto;
}

/* ---- sticky table of contents ---- */
.legal-toc {
    position: sticky;
    top: 100px;
    background: var(--color-card-bg-3);
    border: 1px solid var(--color-border-soft);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
}

.legal-toc__title {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 1rem;
    padding-left: .35rem;
}

.legal-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legal-toc__link {
    display: block;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.4;
    padding: .55rem .75rem;
    border-radius: 9px;
    border-left: 2px solid transparent;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.legal-toc__link:hover {
    color: var(--color-white);
    background: var(--color-surface-soft);
}

.legal-toc__link.active {
    color: var(--color-white);
    background: #00aeff14;
    border-left-color: var(--color-accent);
}

/* ---- content column ---- */
.legal-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* each section is its own card */
.legal-block {
    scroll-margin-top: 100px;
    background: var(--color-card-bg-3);
    /* border: 1px solid var(--color-border-soft); */
    
    border: 1px solid var(--color-border-soft);
    border-radius: 9px;
    padding: 2rem;
}

.legal-block__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.legal-block__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: linear-gradient(160deg, var(--color-attack-icon-top) 0%, var(--color-attack-icon-bottom) 100%);
    /* border: 1px solid var(--color-attack-icon-border); */
    box-shadow: 0 0 12px var(--color-attack-icon-glow);
    color: var(--color-white);
    font-size: 22px;
}

.legal-block h3 {
    color: var(--color-white);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 .5rem;
}

.legal-block p,
.legal-block li {
    color: var(--color-text-muted-2);
    font-size: 15px;
    line-height: 1.8;
}

.legal-block p {
    margin-bottom: 1rem;
}

.legal-block p:last-child {
    margin-bottom: 0;
}

/* custom bulleted lists with accent markers */
.legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.legal-list li {
    position: relative;
    padding-left: 1.7rem;
    margin: 0;
}

/* line-style check mark drawn with borders (no icon font) */
.legal-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .35rem;
    width: 6px;
    height: 11px;
    border: solid var(--color-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.legal-list li strong {
    color: var(--color-white);
    font-weight: 600;
}

.legal-link {
    color: var(--color-accent);
    font-weight: 500;
    transition: color .2s ease;
}

.legal-link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* highlighted grievance / contact card */
.legal-contact-card {
    background: var(--color-card-bg-2);
    border: 1px solid var(--color-border-soft);
    border-left: 3px solid var(--color-accent);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
}

.legal-contact-card p {
    margin-bottom: .4rem;
}

.legal-contact-card p:last-child {
    margin-bottom: 0;
}

/* ordered / nested step lists inside legal blocks (SOP workflow) */
.legal-steps {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legal-steps > li {
    color: var(--color-text-muted-2);
    font-size: 15px;
    line-height: 1.8;
}

.legal-steps > li::marker {
    color: var(--color-accent);
    font-weight: 600;
}

.legal-steps > li > strong {
    color: var(--color-white);
    font-weight: 600;
    display: block;
    margin-bottom: .4rem;
}

.legal-steps ul {
    list-style: disc;
    margin: .5rem 0 0;
    padding-left: 1.2rem;
}

.legal-steps ul li {
    color: var(--color-text-muted-2);
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: .35rem;
}

.legal-steps ul li::marker {
    color: var(--color-accent);
}

/* responsive data tables inside legal blocks (SOP definitions, timeline, etc.)
   — same palette as the dmarc/leak result tables for a consistent look */
.legal-table-wrap {
    overflow-x: auto;
    margin: .25rem 0;
    border-radius: 12px;
    border: 2px solid #222940;
}

.legal-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.legal-table-wrap::-webkit-scrollbar-thumb { background: rgba(241, 241, 241, .27); border-radius: 4px; }

.legal-table {
    width: 100%;
    min-width: 480px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: .85rem 1rem;
    border-bottom: 2px solid #222940;
    vertical-align: top;
    line-height: 1.7;
}

.legal-table thead th {
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 600;
    white-space: nowrap;
}

/* zebra striping — matches dmarc-table */
.legal-table tbody tr:nth-child(odd) td { background: #100D24; }
.legal-table tbody tr:nth-child(even) td { background: #0F162F; }

.legal-table tbody td {
    color: var(--color-white);
}

.legal-table tbody td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
    border-bottom: none;
}

.legal-table tbody tr:hover td {
    background: #ffffff08;
}

.legal-table ul {
    list-style: disc;
    margin: 0;
    padding-left: 1.1rem;
}

.legal-table ul li {
    margin-bottom: .3rem;
    color: var(--color-white);
}

.legal-table ul li:last-child {
    margin-bottom: 0;
}

/* emphasised warning callout (takedown confirmation notice) */
.legal-notice {
    background: var(--color-card-bg-2);
    border: 1px solid var(--color-warning-border, #F5A62333);
    border-left: 3px solid var(--color-warning, #F5A623);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: .5rem 0;
}

.legal-notice__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.legal-notice__head i {
    font-size: 24px;
    color: var(--color-warning, #F5A623);
}

.legal-notice__head h3 {
    margin: 0;
    color: var(--color-warning, #F5A623);
    font-size: 1.15rem;
    font-weight: 600;
}

.legal-notice__highlight {
    background: var(--color-card-bg-3);
    border: 1px solid var(--color-border-soft);
    border-radius: 9px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.legal-notice p,
.legal-notice li {
    color: var(--color-text-muted-2);
    font-size: 15px;
    line-height: 1.8;
}

.legal-notice strong {
    color: var(--color-white);
    font-weight: 600;
}

.legal-notice .legal-notice__danger {
    color: var(--color-warning, #F5A623);
    font-weight: 600;
}

/* ===== documentation blocks (syslog docs): example log, nav step, image ===== */
.legal-log {
    background: #26344b40;
    border-left: 3px solid var(--color-accent);
    border-radius: 6px;
    padding: 1rem 1.15rem;
    margin: 0 0 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-muted-2);
    word-break: break-word;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* "From the left menu, navigate to ..." pointer note */
.legal-doc-nav {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: var(--color-card-bg-2);
    border: 1px solid var(--color-border-soft);
    border-radius: 9px;
    padding: .8rem 1rem;
    margin: 1.1rem 0 0;
}
.legal-doc-nav i {
    color: var(--color-accent);
    font-size: 18px;
    margin-top: 2px;
    flex: none;
}
.legal-doc-nav p {
    margin: 0;
}
.legal-doc-nav strong {
    color: var(--color-accent);
    font-weight: 600;
}

/* documentation screenshot — plain, centered */
.legal-doc-img {
    width: 100%;
    max-width: 860px;
    height: auto;
    display: block;
    margin: 1.25rem auto 0;
    border: 1px solid var(--color-border-soft);
    border-radius: 9px;
}



/* inline highlight for IP / port / value strings in doc text */
.legal-doc-hl {
    color: var(--color-accent);
    font-weight: 600;
}

/* ==========================================================================
   DMARC Report Analyzer (free tool)  —  dmarc-* namespace
   ========================================================================== */
.dmarc-hero {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.dmarc-hero .hero-sub {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
    color: var(--color-text-muted-2);
}

/* ---- upload card ---- */
.dmarc-uploader {
    margin-top: 2.5rem;
}

.dmarc-uploader__row {
    align-items: center;
}

.dmarc-circuit-col {
    display: flex;
    align-items: center;
}

.dmarc-circuit-col--left { justify-content: flex-start; }
.dmarc-circuit-col--right { justify-content: flex-end; }

/* circuit decorations flanking the card, sized to their column */
.dmarc-uploader__circuit {
    width: 100%;
    height: auto;
    max-height: 400px;
    color: var(--color-accent);
    pointer-events: none;
}

/* whole board keeps a soft, slow breathing glow */
.dmarc-circuit {
    animation: circuitBreathe 6s ease-in-out infinite;
}

/* each trace "fires" a bright signal at random, then decays.
   Different durations + negative delays keep the traces permanently
   out of phase, so the firing never falls into a visible pattern. */
.dmarc-circuit path {
    opacity: .58;
    animation: circuitFlow 3s cubic-bezier(.4, 0, .2, 1) infinite;
    will-change: opacity, filter;
}

.dmarc-circuit path:nth-of-type(1) { animation-duration: 3.1s; animation-delay: -0.7s; }
.dmarc-circuit path:nth-of-type(2) { animation-duration: 2.3s; animation-delay: -2.0s; }
.dmarc-circuit path:nth-of-type(3) { animation-duration: 3.7s; animation-delay: -1.1s; }
.dmarc-circuit path:nth-of-type(4) { animation-duration: 2.9s; animation-delay: -0.2s; }
.dmarc-circuit path:nth-of-type(5) { animation-duration: 3.4s; animation-delay: -2.6s; }

@keyframes circuitFlow {
    0%   { opacity: .58; filter: drop-shadow(0 0 0 rgba(0, 174, 255, 0)); }
    14%  { opacity: 1;   filter: drop-shadow(0 0 9px rgba(0, 174, 255, .95)) brightness(1.45); }
    34%  { opacity: .5;  filter: drop-shadow(0 0 3px rgba(0, 174, 255, .3)); }
    100% { opacity: .58; filter: drop-shadow(0 0 0 rgba(0, 174, 255, 0)); }
}

@keyframes circuitBreathe {
    0%, 100% { opacity: .95; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dmarc-circuit,
    .dmarc-circuit path { animation: none; opacity: .6; }
}

.dmarc-card {
    position: relative;
    background: linear-gradient(150deg, rgba(0, 174, 255, .16) 0%, rgba(17, 19, 35, .6) 55%, rgba(17, 19, 35, .9) 100%);
    border: 1px solid var(--color-border-soft);
    border-radius: 20px;
    padding: 2.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.dmarc-drop {
    border: 2px dashed rgba(0, 174, 255, 0.76);
    border-radius: 14px;
    padding: 2.75rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.dmarc-drop:hover,
.dmarc-drop.is-dragover {
    border-color: var(--color-accent);
    background: rgba(0, 174, 255, .06);
}

.dmarc-drop__icon {
    width: 46px;
    height: 46px;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.dmarc-drop__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-white);
    margin: 0;
}

.dmarc-drop__title b { color: var(--color-accent); font-weight: 600; }

.dmarc-drop__hint {
    font-size: 14px;
    color: var(--color-white);
    margin: .4rem 0 0;
}

.dmarc-drop__file {
    display: none;
    margin: .9rem auto 0;
    max-width: 90%;
    font-size: .9rem;
    color: var(--color-white);
    word-break: break-all;
}

.dmarc-drop__file svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--color-accent); }

.dmarc-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.6rem;
}

.dmarc-analyze {
    padding: .65rem 2.2rem;
    font-size: 1rem;
}

.dmarc-analyze:disabled { opacity: .55; cursor: not-allowed; }

.dmarc-status {
    text-align: center;
    margin: 1.1rem auto 0;
    max-width: 640px;
    font-size: .9rem;
    color: var(--color-text-muted-2);
}

.dmarc-status.is-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .35);
    border-radius: 9px;
    padding: .7rem 1rem;
}

/* ---- report meta + results table ---- */
.dmarc-results {  margin: 0 auto; }

.dmarc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 auto 1.4rem;
    border-radius: 9px;
    padding: 1.5rem 1rem;
    background: #02112B;
    border: 1px solid var(--color-accent);
}

.dmarc-meta__item {
    position: relative;
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: .3rem;
    padding: .25rem 2.5rem;
    text-align: left;
}

/* dashed glowing-blue vertical divider between items */
.dmarc-meta__item + .dmarc-meta__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8%;
    height: 84%;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        var(--color-accent) 0 7px,
        transparent 7px 14px
    );
    filter: drop-shadow(0 0 4px var(--color-glow-accent-15, rgba(0, 174, 255, .5)));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.dmarc-meta__label {
    display: block;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: .1rem;
}

.dmarc-meta__value { font-size: 16px; color: var(--color-white); word-break: break-all; }

.dmarc-table-wrap {
    max-height: 520px;
    overflow: auto;
    border-radius: 12px;
    border: 2px solid #222940;
}

.dmarc-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.dmarc-table-wrap::-webkit-scrollbar-thumb { background: rgba(241, 241, 241, .27); border-radius: 4px; }

table.dmarc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    font-size: 16px;
}

table.dmarc-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #00AEFF;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    padding: .85rem 1rem;
    text-align: left;
    border-bottom: 2px solid #222940;
}

table.dmarc-table td {
    padding: .75rem 1rem;
    color: var(--color-white);
    border-bottom: 2px solid #222940;
    vertical-align: middle;
}

/* zebra striping */
table.dmarc-table tbody tr:nth-child(odd) td { background: #100D24; }
table.dmarc-table tbody tr:nth-child(even) td { background: #0F162F; }

table.dmarc-table tbody tr:hover td { background: #ffffff08; color: var(--color-white); }

.dmarc-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.dmarc-badge.is-pass { background: rgba(34, 197, 94, .15); color: #22c55e; }
.dmarc-badge.is-fail { background: rgba(239, 68, 68, .15); color: #ef4444; }

.dmarc-empty {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
}

/* ============================================================
   Credential Leak checker (credentialLeak.php)
   ============================================================ */
.leak-hero {
    position: relative;
    text-align: center;
    overflow: hidden;
    /* keep the decorative blobs from spilling out / causing horizontal scroll */
}

/* ---- decorative animated background blobs ---- */
.leak-hero__blob {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
}

.leak-hero__blob svg {
    display: block;
    width: 100%;
    height: auto;
}

.leak-hero__blob--left {
    top: -50px;
    left: clamp(-80px, -4vw, -20px);
    width: min(698px, 52vw);
    animation: leakBlobDriftA 18s ease-in-out infinite;
}

.leak-hero__blob--right {
    top: -150px;
    right: clamp(-150px, -8vw, -60px);
    width: min(723px, 55vw);
    animation: leakBlobDriftB 22s ease-in-out infinite;
}

@keyframes leakBlobDriftA {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .85; }
    50%      { transform: translate3d(18px, 24px, 0) rotate(4deg); opacity: 1; }
}

@keyframes leakBlobDriftB {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
    50%      { transform: translate3d(-22px, 20px, 0) rotate(-5deg); opacity: .8; }
}

.leak-hero .hero-sub {
    /* max-width: 620px; */
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-muted-2);
}

/* ---- search form ---- */
.leak-search {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    align-items: center;
    max-width: 620px;
    margin: 4rem auto;
}

.leak-search__field {
    position: relative;
    flex: 1 1 320px;
}

.leak-search__field svg {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-accent);
    pointer-events: none;
}

.leak-search__input {
    width: 100%;
    background: #111323;
    border: 1px solid #61616180;
    border-radius: 999px;
    color: var(--color-white);
    font-size: 1rem;
    padding: .7rem 1.1rem .7rem 2.75rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.leak-search__input::placeholder {
    color: var(--color-text-muted);
}

.leak-search__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-glow-accent-15);
}

.leak-search__btn {
    flex: 0 0 auto;
    padding: .7rem 2rem;
    font-size: 1rem;
}

/* ---- trust / feature strip ---- */
.leak-features {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    /* max-width: 1150px; */
    margin: 2.5rem auto 0;
    border-radius: 9px;
    padding: 1.5rem 1rem;
    background:#02112B;
    border: 1px solid var(--color-accent);
}

.leak-feature {
    position: relative;
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: .9rem;
    padding: .25rem 2.5rem;
    text-align: left;
}

/* dashed glowing-blue vertical divider between features */
.leak-feature + .leak-feature::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8%;
    height: 84%;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        var(--color-accent) 0 7px,
        transparent 7px 14px
    );
    filter: drop-shadow(0 0 4px var(--color-glow-accent-15, rgba(0, 174, 255, .5)));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.leak-feature__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
}

.leak-feature__icon img {
   border-radius: 6px;
}

.leak-feature__title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 .2rem;
}

.leak-feature__desc {
    font-size: 16px;
    color: var(--color-text-muted-2);
    margin: 0;
    line-height: 1.4;
}

/* ---- inline messages ---- */
.leak-message {
    max-width: 620px;
    margin: 1.5rem auto 0;
    border-radius: 12px;
    padding: .9rem 1.2rem;
    font-size: .95rem;
    text-align: center;
}

.leak-message--error {
    border: 1px solid #ff5c6c66;
    background: #ff5c6c14;
    color: #ff9ba4;
}

/* ---- results card (also used by the Subdomain Finder results) ---- */
.leak-results,
.sf-results {
    position: relative;
    /* max-width: 1150px; */
    margin: 2rem auto 0;
    border-radius: 9px;
    padding: 1.5rem;
    background: #02112B;
    border: 1px solid var(--color-accent);
    overflow: hidden;
}

.leak-results__head,
.sf-results__head {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.leak-results__title,
.sf-results__title {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: var(--color-white);
}

.leak-results__summary,
.sf-results__summary {
    margin: 0;
    color: var(--color-text-muted-2);
    font-size: 16px;
}

.leak-results__summary strong,
.sf-results__summary strong {
    color: var(--color-accent);
    font-weight: 700;
}

/* ---- tabs (pills) ---- */
.leak-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border: none;
    /* margin-bottom: 1.25rem; */
}

.leak-tabs .nav-link {
    border: 1px solid var(--color-border-toggler);
    background: transparent;
    color: var(--color-text-muted-2);
    font-weight: 500;
    font-size: .9rem;
    border-radius: 999px;
    padding: .4rem 1.1rem;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.leak-tabs .nav-link:hover {
    border-color: var(--color-accent);
    color: var(--color-white);
}

.leak-tabs .nav-link.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* ---- table (also used by the Subdomain Finder results) ---- */
.leak-table-wrap,
.sf-table-wrap {
    max-height: 520px;
    overflow: auto;
    border-radius: 12px;
    border: 2px solid #222940;
}

.leak-table-wrap::-webkit-scrollbar,
.sf-table-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.leak-table-wrap::-webkit-scrollbar-thumb,
.sf-table-wrap::-webkit-scrollbar-thumb {
    background-color: #ffffff33;
    border-radius: 4px;
}

.leak-table,
.sf-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 16px;
    white-space: nowrap;
}

.leak-table thead th,
.sf-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 18px;
    background: #00AEFF;
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: .85rem 1rem;
    border-bottom: 2px solid #222940;
}

.leak-table tbody td,
.sf-table tbody td {
    padding: .75rem 1rem;
    color: var(--color-white);
    border-bottom: 2px solid #222940;
    vertical-align: middle;
}

/* zebra striping */
.leak-table tbody tr:nth-child(odd) td,
.sf-table tbody tr:nth-child(odd) td {
    background: #100D24;
}

.leak-table tbody tr:nth-child(even) td,
.sf-table tbody tr:nth-child(even) td {
    background: #0F162F;
}

.leak-table tbody tr:hover td,
.sf-table tbody tr:hover td {
    background: #ffffff08;
    color: var(--color-white);
}

.leak-table .leak-col-url {
    word-break: break-all;
    /* white-space: normal; */
    max-width: 420px;
}
.leak-table .leak-col-username {
    word-break: break-all;
    white-space: normal;
    max-width: 420px;
}

.leak-pass {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    color: var(--color-white);
    word-break: break-all;
    white-space: normal;
    max-width: 420px;
}

.leak-empty td,
.leak-loading td,
.sf-table td.sf-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 1.25rem !important;
}

.leak-loading a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ---- spinner ---- */
.leak-spinner {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 8px;
    animation: leakRotate 2s linear infinite;
}

.leak-spinner circle {
    stroke: var(--color-accent);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
    animation: leakDash 1.5s ease-in-out infinite;
}

@keyframes leakRotate {
    100% { transform: rotate(360deg); }
}

@keyframes leakDash {
    0%   { stroke-dasharray: 1, 150;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* ============================================================
   Security Headers Analyzer (pages/security-header.blade.php)
   ============================================================ */
/* ---------- hero banner (glass card) ---------- */
.sh-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    /* full-bleed background image, always fits the full screen width (owl + globe
       stay at the edges, nothing spills outside the body) */
    padding: 105px 0;
    background-color: #010314;
    background-image: url('../image/security-headers-bg.webp');
    /* full screen width, natural height, no distortion; the #010314 fill blends
       into the image's near-black edges so top/bottom stay seamless */
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
}
/* box styled after the site-wide .vcta panel: navy + faint grid + blue glow arcs */
.sh-hero__inner {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    padding: 3.5rem clamp(1.5rem, 5vw, 3.5rem);
    border: 1px solid var(--color-accent);
    border-radius: 9px;
    background: rgba(14, 16, 32, .82);
    backdrop-filter: blur(2px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.sh-hero__inner-new {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    padding: 3.5rem clamp(1.5rem, 5vw, 3.5rem);
    /* border: 1px solid var(--color-accent); */
    border-radius: 9px;
    background: #111323;
    backdrop-filter: blur(2px);
    overflow: hidden;
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, .45); */
}
/* faint square grid, fading out toward the edges */
.sh-hero__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 25px 25px;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 80%);
    mask-image: radial-gradient(80% 80% at 50% 50%, #00000059 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}
/* blue glow arcs top & bottom (approximates the .vcta__glow SVGs) */
.sh-hero__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 42% at 50% -8%, rgba(0, 174, 255, .28) 0%, rgba(0, 174, 255, 0) 70%),
        radial-gradient(60% 42% at 50% 108%, rgba(0, 174, 255, .22) 0%, rgba(0, 174, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}
.sh-hero__inner > * { position: relative; z-index: 1; }
.sh-search { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; margin: 0 auto; }
.sh-search__field { position: relative; flex: 1 1 300px; }
.sh-search__field svg { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-accent); pointer-events: none; }
.sh-search__input {
    width: 100%;
    background: rgba(6, 8, 22, .6);
    border: 1px solid #61616180;
    border-radius: 999px;
    color: var(--color-white);
    font-size: 1rem;
    padding: .7rem 1.1rem .7rem 2.75rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sh-search__input::placeholder { color: var(--color-text-muted); }
.sh-search__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-glow-accent-15); }
.sh-search__btn { flex: 0 0 auto; padding: .7rem 2rem; font-size: 1rem; border-radius: 999px; }

/* ---------- results ---------- */
.sh-results { margin: 0 auto; }
.sh-error { max-width: 620px; margin: 0 auto; text-align: center; color: #ff6b6b; background: rgba(255, 107, 107, .08); border: 1px solid rgba(255, 107, 107, .35); border-radius: 9px; padding: .85rem 1rem; }

.sh-summary { display: flex; gap: 1.5rem; align-items: flex-start; background: #181A2A; border: 2px solid #242535; border-radius: 9px; padding: 1.5rem;  flex-wrap: wrap; }
.sh-summary__details { flex: 1 1 320px; min-width: 260px; }
.sh-meta { width: 100%; }
.sh-meta td { padding: 4px 0; font-size: 14px; color: var(--color-text-muted-2); vertical-align: top; }
.sh-meta td.label { width: 120px; color: var(--color-white); font-weight: 500; }
.sh-meta a { color: var(--color-accent); word-break: break-all; }
.sh-badges { margin-top: .4rem; }
.sh-badge { display: inline-flex; align-items: center; gap: .35rem; padding: 5px 12px; margin: 4px 6px 0 0; border-radius: 999px; color: #fff; font-weight: 500; font-size: 12.5px; }
.sh-badge.is-pass { background: #22c55e; }
.sh-badge.is-fail { background: #ef4444; }

.sh-section-title { margin: 1rem 0 1rem; padding: 12px 16px; font-size: 16px; font-weight: 500; color: var(--color-white); background: radial-gradient(120% 160% at 0% 0%, rgba(0, 174, 255, 0.45) 0%, rgba(0, 96, 180, 0.18) 34%, rgba(1, 5, 22, 0) 62%),
    linear-gradient(90deg, #062a52 0%, #041634 42%, var(--color-card-bg) 100%); border-radius: 9px; }
.sh-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #181A2A; border: 2px solid #242535; border-radius: 9px; overflow: hidden; word-break: break-all; }
.sh-table td { padding: 10px 14px; font-size: 14px; color: var(--color-text-muted-2); vertical-align: top; line-height: 1.6; }
.sh-table tr:not(:last-child) td { border-bottom: 1px solid var(--color-border-soft); }
.sh-table a { color: var(--color-accent); text-decoration: underline; }
.sh-table code { color: var(--color-white); font-size: 13.5px; }
.sh-table td.miss { color: #ff6b6b; font-weight: 600; width: 300px; }
.sh-table td.key { color: var(--color-accent); font-weight: 600; width: 220px; }
.sh-table td.extra { color: #22c55e; font-weight: 600; width: 220px; text-transform: capitalize; }
.sh-note { color: var(--color-text-muted); font-style: italic; }
.sh-ok { color: #22c55e; font-weight: 600; }

/* ============================================================
   Subdomain Finder (pages/subdomain-finder.blade.php)
   - hero reuses .sh-hero / .sh-search, only the artwork differs
   - results reuse the Leaked Credentials card + table styles
     (.sf-results / .sf-table are grouped with their .leak-* rules above)
   ============================================================ */
.sf-hero { background-image: url('../image/subdomain-finder.webp'); }
/* diagonal wave lines drifting behind the search card (clipped by the card's
   own overflow:hidden, so they never spill outside the rounded corners) */
.sf-hero__lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.sf-hero__lines img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /* min-width: 937px; */
    object-fit: cover;
}
/* soft blue -> cyan glow anchored to the card's bottom-right corner; the blur
   radius is what makes it read as a wash rather than a hard shape, and the
   card's overflow:hidden trims whatever hangs past the rounded corner */
.sh-hero__inner-new::after {
    content: "";
    position: absolute;
    right: 0px;
    bottom: -160px;
    width: 360px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(115deg, #39ACFF 0%, #85F9F9 100%);
    filter: blur(75px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
/* keep the heading and the search form above the artwork */
.sh-hero__inner-new > *:not(.sf-hero__lines) { position: relative; z-index: 1; }
.sf-table td.sf-sub { color: var(--color-accent); }

/* ============================================================
   SSL Checker (pages/ssl-checker.blade.php)
   - search form + results reuse .sh-search / .sh-* from above
   - the hero is composed rather than a flat background image: circuit
     traces on the left, the armoured owl on the right, and a beam of
     light falling from the top centre
   ============================================================ */
/* Before a check runs the page is shorter than the viewport, and the footer's
   margin-top:auto left a bare strip of page background between the hero and the
   footer. Letting <main> — and the hero inside it — take the leftover height
   fills that strip with the hero instead of moving the footer. */
.ssl-page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.ssl-page .ssl-hero {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
}
.ssl-page .ssl-hero > .container { width: 100%; }

.ssl-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 105px 0;
    /* background-color: #010314; */
}
.margin-top-ssl
{
    margin-top: 40px;
}
/* beam of light falling from the top centre — the same artwork the "Ready to see
   everything" CTA uses, re-anchored to the top of the hero and kept off the edges
   so its soft sides fade into the backdrop */
.ssl-hero__glow {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 100%);
    height: 100%;
    object-position: top center;
}
/* circuit board bleeding in from the left edge */
.ssl-hero__circuit {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    /* scaled to the hero's height so every trace stays in frame */
    height: 100%;
    width: auto;
    max-width: 34vw;
    pointer-events: none;
    z-index: 0;
}
/* the owl is anchored to the right edge and bleeds off the bottom, the way it
   sits in the reference banner */
.ssl-hero__owl {
    position: absolute;
    /* pushed past the edge so it is cropped on the right, as in the reference banner */
    right: -100px;
    /* bottom: -10%; */
    width: clamp(240px, 24vw, 400px);
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.ssl-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 0 auto;
}

/* ---------- results ---------- */
/* amber badge for a certificate that is still valid but expiring soon */
.sh-badge.is-warn { background: #f59e0b; }
.ssl-san { display: flex; flex-wrap: wrap; gap: .5rem; }
.ssl-san__item {
    padding: 6px 14px;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    background: #181A2A;
    color: var(--color-text-muted-2);
    font-size: 13.5px;
    word-break: break-all;
}
.ssl-chain__title {
    margin: 0 0 .6rem;
    color: var(--color-white);
    font-size: 15px;
    font-weight: 500;
}

/* ============================================================
   Free-tool AJAX search (see public/js/tool-search.js)
   Shared by Subdomain Finder, DNS Record Checker and Security Headers Analyzer.
   ============================================================ */
/* in-flight notice — replaces the results block while fetch() is running */
.tool-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin: 1.5rem auto;
    text-align: center;
    color: var(--color-text-muted);
}
.tool-loading__spinner {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-glow-accent-15);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: tool-spin .8s linear infinite;
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
/* the buttons keep their gradient while a scan runs, just visibly inert */
.sh-search__btn:disabled,
.dns-search__btn:disabled { opacity: .6; cursor: progress; }