/* ==========================================================================
   Shared components — used by more than one page.

   A separate file because register.html needs these but must NOT load
   custom.css: that stylesheet also overrides .themesflat-container to the
   Bootstrap width ladder, which would resize register.html's whole layout.

     .btn-split   the Express Interest CTA
     #contact     the partnership contact block in the purple band
   ========================================================================== */

/* ---- split button -------------------------------------------------
   The <a> is a 2px ring painted with a conic gradient whose start angle
   rotates continuously, so a band of light orbits the outline. The inner
   __core masks the middle of that gradient and clips a light sweep that
   runs across on hover. Reusable: put .btn-split on any <a>.

   The angle is animated through a registered custom property — without
   @property a custom property has no type, so it cannot interpolate and
   the keyframe would jump rather than turn. */
@property --btn-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.btn-split {
    /* also declared here, so the conic gradient still resolves (static)
       in a browser that does not support @property */
    --btn-a: 0deg;
    position: relative;
    display: inline-flex;
    height: 52px;
    padding: 2px;
    border-radius: 100px;
    background:
        conic-gradient(from var(--btn-a),
            rgba(104, 68, 237, .25) 0deg,
            #6844ED 55deg,
            #00E58F 130deg,
            rgba(0, 229, 143, .2) 200deg,
            #7C6BFF 290deg,
            rgba(104, 68, 237, .25) 360deg);
    animation: btnOrbit 4.5s linear infinite;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    width: max-content;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}

@keyframes btnOrbit {
    to { --btn-a: 360deg; }
}

.btn-split__core {
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: inherit;
    /* clips the sweep to the pill */
    overflow: hidden;
    /* lit from the arrow end, so the button reads as having a source */
    background:
        radial-gradient(120% 180% at 6% 50%, rgba(104, 68, 237, .55), transparent 62%),
        linear-gradient(180deg, #161A26 0%, #0B0D14 100%);
}

/* the sweep: parked off the right edge, drawn across on hover */
.btn-split__core::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 26%,
        rgba(255, 255, 255, .13) 44%,
        rgba(0, 229, 143, .30) 54%,
        transparent 72%);
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position-x: 150%;
    transition: background-position-x .85s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.btn-split:hover .btn-split__core::after,
.btn-split:focus-visible .btn-split__core::after {
    background-position-x: -70%;
}

.btn-split__icon {
    position: relative;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    /* the svg strokes with currentColor, so this is the arrow colour */
    color: #00E58F;
}

/* hairline seam where the solid swatch used to be */
.btn-split__icon::after {
    content: "";
    position: absolute;
    right: 0;
    top: 13px;
    bottom: 13px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .22), transparent);
}

.btn-split__icon svg {
    width: 18px;
    height: 18px;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* colour is set on the label itself, not left to inherit from the <a>.
   In the header the theme's `.menu-primary-menu li a { color:#fff }`
   outranks .btn-split, and a declaration on the span beats any
   inherited value regardless. */
.btn-split__label {
    position: relative;
    display: grid;
    place-items: center;
    padding: 0 24px 0 18px;
    white-space: nowrap;
    color: #fff;
    letter-spacing: .01em;
}

/* the theme slides a white 2px underline under nav links on hover;
   on this button it would streak across the bottom edge */
.menu-primary-menu > li > a.btn-split::before { content: none; }

.btn-split:hover,
.btn-split:focus-visible {
    transform: translateY(-2px);
    /* two-colour glow, matching the two ends of the orbiting ring */
    box-shadow: 0 14px 32px rgba(0, 229, 143, .22), 0 6px 20px rgba(104, 68, 237, .28);
}

.btn-split:hover .btn-split__icon svg,
.btn-split:focus-visible .btn-split__icon svg { transform: translateX(3px); }

@media (max-width: 767.98px) {
    .btn-split { height: 46px; font-size: 15px; }
    .btn-split__icon { flex-basis: 42px; }
    .btn-split__label { padding: 0 18px 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
    /* the ring stops turning and holds a static gradient */
    .btn-split { animation: none; }
    .btn-split,
    .btn-split__icon svg,
    .btn-split__core::after { transition: none; }
    .btn-split:hover { transform: none; }
    .btn-split:hover .btn-split__icon svg { transform: none; }
}


/* ---- contact block ----------------------------------------------- */

/* The block sat in a centred col-md-6 but with left-aligned text
   inside, so the copy started a quarter of the way across the
   card and read as off-centre. Full-width column plus centred
   text puts it on the card's real midline. */
#contact .conty { text-align: center; }

#contact .conty h3 { margin-bottom: 16px; }

#contact .conty__name {
    margin-bottom: 14px;
    opacity: .92;
}

/* Block-level flex, not inline-flex: inline-flex made each line
   an inline box, so the phone and the email flowed onto the
   same row. justify-content does the centring here since the
   parent's text-align has no effect on a flex container. */
#contact .conty__line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 10px;
}

#contact .conty__ico {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}

/* the theme colours and underlines links globally */
#contact .conty__line a {
    color: #fff;
    text-decoration: none;
    transition: opacity .3s ease;
}

#contact .conty__line a:hover {
    color: #fff;
    opacity: .78;
    text-decoration: underline;
}


/* ---- mobile menu stacking ------------------------------------------------
   The drawer is marked z-index: 999999 and its overlay 999, but both sit
   INSIDE <header>, and the theme gives that `position: relative; z-index: 100`
   until it goes sticky. A stacking context caps its descendants, so those
   numbers are meaningless at the top of the page — the whole menu system
   effectively renders at 100, which is exactly where a user opens it.

   Anything page-level above 100 then paints over the open drawer: the floating
   .elets-cta (1035, currently commented out), and every Bootstrap layer —
   .dropdown-menu 1000, .fixed-top 1030, .modal 1050, .tooltip 1070.

   The header already becomes 9999 once it is stuck, so the fix is simply to
   stop the value changing with scroll position. */
.header {
    z-index: 9999;
}