/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Astra Child Theme
 Author:       Brainstorm Force
 Author URI:   https://wpastra.com/
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

:root {
    /* Colors */
    --navy: #030B18;
    --navy-2: #060F1E;
    --navy-3: #091528;
    --navy-4: #0D1E38;
    --navy-glass: rgba(6, 15, 30, 0.75);
    --blue: #0050E6;
    --blue-2: #1A65FF;
    --blue-3: #3D7EFF;
    --blue-glow: rgba(0, 80, 230, 0.35);
    --blue-soft: rgba(26, 101, 255, 0.12);
    --cyan: #00D4FF;
    --cyan-2: #00EEFF;
    --cyan-glow: rgba(0, 212, 255, 0.2);
    --white: #FFFFFF;
    --w95: rgba(255, 255, 255, .95);
    --w80: rgba(255, 255, 255, .80);
    --w60: rgba(255, 255, 255, .60);
    --w40: rgba(255, 255, 255, .40);
    --w20: rgba(255, 255, 255, .20);
    --w10: rgba(255, 255, 255, .10);
    --w06: rgba(255, 255, 255, .06);
    --w03: rgba(255, 255, 255, .03);
    --grey-text: #94A3B8;
    --border: rgba(255, 255, 255, 0.08);
    --border-2: rgba(26, 101, 255, 0.25);
    /* Typography */
    --f-head: 'Barlow Condensed', sans-serif;
    --f-body: 'Barlow', sans-serif;
    /* Easing */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-2: cubic-bezier(.4, 0, .2, 1);
}

a {
    text-decoration: none;
    color: inherit
}

img {
    display: block;
    max-width: 100%
}

/* ═══════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════ */
#cur {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
    transform: translate(-50%, -50%);
    transition: width .25s, height .25s, background .25s
}

#cur-o {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0, 212, 255, .4);
    transform: translate(-50%, -50%);
    transition: width .3s, height .3s, border-color .3s
}

.single-post .site-content {
	background: var(--navy-2);
}

.single-post .site-content .ast-container{
max-width: 100%;
	background: var(--navy-2);
}

.single-post .site-content .ast-article-single {
	background: var(--navy-2);
}

.single-post .site-content .comments-area {
    display: none;
}

.single-post .site-content .post-navigation {
	max-width: 72%;
    margin: 0 auto;
}
@media(hover:none) {

    #cur,
    #cur-o {
        display: none
    }
}

#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 800;
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0 64px;
    transition: background .4s, backdrop-filter .4s, border .4s;
}

#nav.solid {
    background: rgba(3, 11, 24, .92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.n-logo {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    flex-shrink: 0;
}

.n-logo-icon {
    width: 32px;
    height: 32px;
    position: relative;
    flex-shrink: 0;
}

.n-logo-icon::before,
.n-logo-icon::after {
    content: '';
    position: absolute;
    border: 1.5px solid var(--blue-2);
}

.n-logo-icon::before {
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
}

.n-logo-icon::after {
    inset: 6px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-color: var(--cyan);
    opacity: .6
}

.n-links {
    display: flex;
    align-items: center;
    gap: 36px;
    margin: 0 auto;
}

.n-links a {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--w60);
    transition: color .2s;
    position: relative;
}

.n-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s var(--ease);
}

.n-links a:hover {
    color: var(--white)
}

.n-links a:hover::after {
    transform: scaleX(1)
}

.n-cta {
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--blue-2);
    color: var(--white);
    border: none;
    padding: 11px 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .25s;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.n-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent);
    opacity: 0;
    transition: opacity .3s;
}

.n-cta:hover {
    background: var(--blue-3);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px var(--blue-glow)
}

.n-cta:hover::before {
    opacity: 1
}

.breadcrumb-line {
	flex-grow: 1;
  	height: 2px;
  	background: linear-gradient(90deg, rgba(56, 189, 248, 0.2) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}

.hero {
    position: relative;
	height: 81vh;
    min-height: 82vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    overflow: hidden;
}

#hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .85;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(3, 11, 24, .3), var(--navy) 80%);
}

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 212, 255, .08);
    border: 1px solid rgba(0, 212, 255, .25);
    border-radius: 100px;
    padding: 7px 20px;
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeD .8s var(--ease) .3s forwards;
}

.hero-badge-title {
    margin-bottom: 0px !important;
	float: right;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
    animation: blip 2.5s ease-in-out infinite;
}

@keyframes blip {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(.7)
    }
}

.hero-badge span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyan);
}

.hero-h1 {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-size: clamp(50px, 8vw, 80px);
    line-height: .93;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 8px;
}

.hero-h1 .row {
    display: block;
    overflow: hidden;
}

.hero-h1 .row-inner {
    display: block;
    transform: translateY(100%);
    animation: rowUp .85s var(--ease) forwards;
}

.r1 .row-inner {
    animation-delay: .5s
}

.r2 .row-inner {
    animation-delay: .65s
}

.r3 .row-inner {
    animation-delay: .8s
}

.r3 .row-inner {
    background: linear-gradient(90deg, var(--blue-3), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes rowUp {
    to {
        transform: translateY(0)
    }
}

.hero-p {
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 300;
    color: var(--w60);
    line-height: 1.7;
    max-width: 640px;
    margin: 20px auto 30px;
    opacity: 0;
    animation: fadeD .9s var(--ease) 1.1s forwards;
}

.hero-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeD .9s var(--ease) 1.3s forwards;
}

.btn-A, .submit-btn input {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--blue-2);
    color: var(--white) !important;
    border: none;
    padding: 16px 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s var(--ease);
    position: relative;
    overflow: hidden;
}

.btn-A::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 50%, transparent 100%);
    transform: translateX(-100%);
}

.btn-A:hover {
    background: var(--blue-3);
    transform: translateY(-2px);
    box-shadow: 0 16px 48px var(--blue-glow)
}

.btn-A:hover::after {
    transition: transform .5s ease;
    transform: translateX(100%)
}

.btn-B {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--w80);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border);
    padding: 16px 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .25s;
}

.btn-B:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--w20);
    color: var(--white)
}

.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    opacity: 0;
    animation: fadeD .9s var(--ease) 1.6s forwards;
}

.hstat {
    padding: 24px 48px;
    border-right: 1px solid var(--border);
    text-align: center;
}

.hstat:last-child {
    border-right: none
}

.hstat-n {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--white), var(--blue-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hstat-l {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--w40);
    margin-top: 6px;
}

@keyframes fadeD {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* ═══════════════════════════════════════════
   TICKER
═══════════════════════════════════════════ */
.ticker-wrap {
    overflow: hidden;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--navy-2) !important;
    position: relative;
    z-index: 1;
}

.ticker-wrap::before,
.ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
}

.ticker-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--navy-2), transparent)
}

.ticker-wrap::after {
    right: 0;
    background: linear-gradient(-90deg, var(--navy-2), transparent)
}

.ticker-inner {
    display: flex;
    width: max-content;
    animation: tick 28s linear infinite
}

@keyframes tick {
    to {
        transform: translateX(-50%)
    }
}

.ti {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 32px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w40);
    white-space: nowrap;
}

.ti-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue-2);
    flex-shrink: 0
}

/* ═══════════════════════════════════════════
   SECTION UTILITIES
═══════════════════════════════════════════ */
.sec {
    padding: 100px 50px;
    position: relative;
    z-index: 1;
}

.sec-alt {
    background: var(--navy-2)
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-3);
    margin-bottom: 20px;
}

.eyebrow::before {
    content: '';
    width: 22px;
    height: 1.5px;
    background: var(--blue-3);
    border-radius: 1px
}

.sec-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(38px, 5vw, 70px);
    line-height: 60px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 24px;
}

.sec-title .dim {
    color: var(--w20)
}

.sec-body {
    font-size: 17px;
    font-weight: 300;
    color: var(--w60);
    line-height: 1.75;
    max-width: 560px;
}

.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s var(--ease), transform .9s var(--ease)
}

.reveal.on {
    opacity: 1;
    transform: none
}

.d1 {
    transition-delay: .05s
}

.d2 {
    transition-delay: .12s
}

.d3 {
    transition-delay: .2s
}

.d4 {
    transition-delay: .28s
}

/* ═══════════════════════════════════════════
   INTRO / THE GAP
═══════════════════════════════════════════ */
.gap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
    margin-top: 80px;
}

.gap-visual {
    position: relative
}

.glass-card {
    background: rgba(13, 30, 56, .7);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, transform .3s var(--ease);
}

.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(26, 101, 255, .08), transparent 60%);
    opacity: 0;
    transition: opacity .3s;
}

.glass-card:hover::before {
    opacity: 1
}

.glass-card:hover {
    border-color: var(--border-2);
    transform: translateY(-4px)
}

.gc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px
}

.gc-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-3);
}

.gc-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--blue-soft);
    border: 1px solid var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gc-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--blue-3);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.gc-val {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 52px;
    line-height: 1;
    letter-spacing: .02em;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--white) 40%, var(--blue-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gc-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--w50);
    line-height: 1.5
}

.gc-bar {
    margin-top: 20px;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.gc-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue-2), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--ease);
}

.gc-bar-fill.on {
    transform: scaleX(1)
}

.cards-stack {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.insight-list {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 0
}

.ins-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    cursor: default;
    transition: padding-left .3s var(--ease);
}

.ins-item:hover {
    padding-left: 10px
}

.ins-n {
    font-family: var(--f-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--blue-3);
    padding-top: 3px;
    flex-shrink: 0;
}

.ins-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 5px;
    letter-spacing: -.01em
}

.ins-text {
    font-size: 13px;
    font-weight: 300;
    color: var(--w50);
    line-height: 1.55
}

/* ═══════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════ */
.svc-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 72px;
    gap: 40px;
}

.svc-intro-note {
    font-size: 15px;
    font-weight: 300;
    color: var(--w50);
    line-height: 1.7;
    max-width: 340px;
    border-left: 2px solid var(--blue-2);
    padding-left: 20px;
}

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

.svc-card {
    background: rgba(13, 30, 56, .6);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 52px 48px;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: border-color .4s, background .4s, transform .4s var(--ease);
}

.svc-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-2), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.svc-card:hover {
    background: rgba(13, 30, 56, .9);
    border-color: var(--border-2);
    transform: translateY(-6px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .3), 0 0 0 1px var(--border-2);
}

.svc-card:hover::after {
    transform: scaleX(1)
}

.svc-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-3);
    background: var(--blue-soft);
    border: 1px solid var(--border-2);
    border-radius: 100px;
    padding: 5px 14px;
    margin-bottom: 28px;
}

.svc-tag-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan)
}

.svc-num {
    position: absolute;
    top: 40px;
    right: 48px;
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 80px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .05);
    line-height: 1;
    pointer-events: none;
    transition: -webkit-text-stroke .3s;
}

.svc-card:hover .svc-num {
    -webkit-text-stroke: 1px rgba(26, 101, 255, .15)
}

.svc-ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--blue-soft);
    border: 1px solid var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    transition: background .3s, box-shadow .3s;
}

.svc-card:hover .svc-ico {
    background: rgba(26, 101, 255, .2);
    box-shadow: 0 0 32px rgba(0, 212, 255, .15);
}

.svc-ico svg {
    width: 24px;
    height: 24px;
    stroke: var(--cyan);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.svc-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 14px;
    line-height: 1.05;
}

.svc-prob {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w30);
    margin-bottom: 10px;
}

.svc-text {
    font-size: 14px;
    font-weight: 300;
    color: var(--w60);
    line-height: 1.7;
    margin-bottom: 28px
}

.svc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px
}

.pill {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--w40);
    background: var(--border);
    border-radius: 100px;
    padding: 4px 12px;
    transition: color .2s, background .2s;
}

.svc-card:hover .pill {
    color: var(--blue-3);
    background: var(--blue-soft)
}

.svc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue-3);
    transition: gap .2s;
}

.svc-card:hover .svc-link {
    gap: 14px
}

.svc-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* ═══════════════════════════════════════════
   SOCIAL PROOF / NUMBERS
═══════════════════════════════════════════ */
.proof-section {
    background: var(--navy-3);
    padding: 100px 64px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.proof-section::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 80, 230, .12), transparent 60%);
    pointer-events: none;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 60px;
}

.proof-cell {
    padding: 48px 36px;
    border-right: 1px solid var(--border);
    position: relative;
    text-align: center;
    transition: background .3s;
}

.proof-cell:last-child {
    border-right: none
}

.proof-cell:hover {
    background: rgba(26, 101, 255, .06)
}

.proof-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--blue-soft);
    border: 1px solid var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.proof-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--blue-3);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.proof-num {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    letter-spacing: .02em;
    margin-bottom: 10px;
}

.proof-num .count {
    background: linear-gradient(135deg, var(--white), var(--blue-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.proof-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--w50);
    letter-spacing: .04em
}

/* ═══════════════════════════════════════════
   WHO WE SERVE
═══════════════════════════════════════════ */
.serve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 72px;
}

.serve-card {
    background: rgba(9, 21, 40, .7);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 60px 52px;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, transform .3s var(--ease);
}

.serve-card:hover {
    border-color: var(--border-2);
    transform: translateY(-4px)
}

.serve-glow {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 80, 230, .12), transparent 60%);
    transition: transform .6s var(--ease);
}

.serve-card:hover .serve-glow {
    transform: scale(1.4)
}

.serve-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(0, 212, 255, .08);
    border: 1px solid rgba(0, 212, 255, .2);
    border-radius: 100px;
    padding: 5px 14px;
    margin-bottom: 32px;
}

.serve-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 34px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 18px;
    line-height: 1.05;
}

.serve-desc {
    font-size: 15px;
    font-weight: 300;
    color: var(--w60);
    line-height: 1.7;
    margin-bottom: 36px
}

.serve-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 44px
}

.serve-li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--w70);
}

.chk {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--blue-soft);
    border: 1px solid var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chk svg {
    width: 10px;
    height: 10px;
    stroke: var(--cyan);
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* ═══════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════ */
.process-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 72px;
}

.p-step {
    background: var(--navy-2);
    padding: 52px 40px;
    position: relative;
    overflow: hidden;
    transition: background .3s;
    cursor: default;
}

.p-step:hover {
    background: rgba(26, 101, 255, .05)
}

.p-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-2), var(--cyan));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--ease);
}

.p-step:hover .p-line {
    transform: scaleX(1)
}

.p-n {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 72px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .06);
    margin-bottom: 24px;
    transition: -webkit-text-stroke .3s;
}

.p-step:hover .p-n {
    -webkit-text-stroke: 1px rgba(26, 101, 255, .2)
}

.p-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 10px;
    letter-spacing: -.01em
}

.p-text {
    font-size: 13px;
    font-weight: 300;
    color: var(--w50);
    line-height: 1.65
}

/* ═══════════════════════════════════════════
   PSYCHOLOGICAL TRIGGERS / VALUE PROPS
═══════════════════════════════════════════ */
.triggers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 72px;
}

.trig {
    background: rgba(13, 30, 56, .6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 40px 36px;
    transition: border-color .3s, transform .3s var(--ease), background .3s;
    cursor: default;
}

.trig:hover {
    border-color: var(--border-2);
    background: rgba(13, 30, 56, .9);
    transform: translateY(-4px);
}

.trig-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--blue-soft);
    border: 1px solid var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: box-shadow .3s;
}

.trig:hover .trig-icon {
    box-shadow: 0 0 24px rgba(0, 212, 255, .2)
}

.trig-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--cyan);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.trig-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: -.01em
}

.trig-text {
    font-size: 13px;
    font-weight: 300;
    color: var(--w50);
    line-height: 1.6
}

/* ═══════════════════════════════════════════
   INDUSTRIES
═══════════════════════════════════════════ */
.ind-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 52px;
}

.ind-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(13, 30, 56, .7);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 500;
    color: var(--w70);
    transition: all .25s;
    cursor: default;
}

.ind-chip:hover {
    border-color: var(--border-2);
    color: var(--white);
    background: rgba(26, 101, 255, .1)
}

.ind-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-2);
    flex-shrink: 0
}

/* ═══════════════════════════════════════════
   QUOTE / BRAND BELIEF
═══════════════════════════════════════════ */
.belief-section {
    background: var(--blue-2);
    padding: 80px 60px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.belief-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, .25) 0%, transparent 50%, rgba(0, 212, 255, .1) 100%);
}

.belief-q {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 200px;
    color: rgba(255, 255, 255, .07);
    line-height: .6;
    position: absolute;
    top: 20px;
    left: 48px;
    pointer-events: none;
}

.belief-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1
}

.belief-text {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(30px, 4.5vw, 58px);
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 32px;
}

.belief-src {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* ═══════════════════════════════════════════
   BLOG / KNOWLEDGE HUB
═══════════════════════════════════════════ */
.blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
    margin-top: 20px
}

.blog-cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--w50);
    background: var(--border);
    border-radius: 100px;
    padding: 7px 18px;
    cursor: pointer;
    transition: all .2s;
    border: 1px solid transparent;
}

.blog-cat:hover,
.blog-cat.active {
    background: var(--blue-soft);
    color: var(--blue-3);
    border-color: var(--border-2);
}

.blog-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
}

.blog-card {
    background: rgba(13, 30, 56, .6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .3s, transform .3s var(--ease);
    cursor: pointer;
}

.blog-card:hover {
    border-color: var(--border-2);
    transform: translateY(-4px)
}

.blog-thumb {
    height: 200px;
    position: relative;
    overflow: hidden;
    background: var(--navy-4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-thumb-lg {
    height: 260px
}

.blog-thumb-pattern {
    position: absolute;
    inset: 0;
    opacity: .4;
}

.blog-thumb-label {
    position: relative;
    z-index: 1;
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 42px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .12);
    text-align: center;
    padding: 0 20px;
}

.blog-body {
    padding: 28px
}

.blog-topic {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue-3);
    margin-bottom: 12px;
    display: block;
}

.blog-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.4;
    margin-bottom: 12px;
    letter-spacing: -.01em;
}

.blog-card:nth-child(1) .blog-title {
    font-size: 20px
}

.blog-excerpt {
    font-size: 13px;
    font-weight: 300;
    color: var(--w50);
    line-height: 1.6;
    margin-bottom: 20px
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--w30);
}

.blog-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--border)
}

/* ═══════════════════════════════════════════
   CTA FINAL
═══════════════════════════════════════════ */
.cta-final {
    background: var(--navy);
    padding: 160px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 80, 230, .15), transparent 60%);
    pointer-events: none;
}

.cta-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid rgba(26, 101, 255, .08);
    pointer-events: none;
}

.cta-ring-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 750px;
    height: 750px;
    border-radius: 50%;
    border: 1px solid rgba(26, 101, 255, .05);
    pointer-events: none;
}

.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-3);
    margin-bottom: 24px;
}

.cta-eyebrow::before,
.cta-eyebrow::after {
    content: '';
    width: 20px;
    height: 1.5px;
    background: var(--blue-3)
}

.cta-title {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: clamp(52px, 8vw, 110px);
    line-height: .92;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.cta-title span {
    background: linear-gradient(90deg, var(--blue-3), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-sub {
    font-size: 18px;
    font-weight: 300;
    color: var(--w60);
    max-width: 540px;
    margin: 0 auto 52px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.cta-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 80px auto 0;
    position: relative;
    z-index: 1;
}

.cta-card {
    background: rgba(13, 30, 56, .7);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 52px 48px;
    text-align: left;
    transition: border-color .3s;
}

.cta-card:hover {
    border-color: var(--border-2)
}

.cta-card-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-3);
    margin-bottom: 18px;
    display: block;
}

.cta-card-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1.1;
}

.cta-card-text {
    font-size: 14px;
    font-weight: 300;
    color: var(--w60);
    line-height: 1.65;
    margin-bottom: 32px
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
    background: var(--navy-2);
    border-top: 1px solid var(--border);
    padding: 80px 64px 44px;
}

.foot-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: 64px;
    margin-bottom: 64px;
}

.foot-logo {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.foot-about {
    font-size: 14px;
    font-weight: 300;
    color: var(--w40);
    line-height: 1.7;
    max-width: 280px;
    margin-bottom: 28px;
}

.foot-mkts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.fmkt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--w40);
    background: var(--border);
    border-radius: 100px;
    padding: 4px 12px;
    border: 1px solid var(--border);
}

.foot-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--w30);
    margin-bottom: 22px;
}

.foot-links {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.foot-links a {
    font-size: 14px;
    font-weight: 300;
    color: var(--w50);
    transition: color .2s
}

.foot-links a:hover {
    color: var(--white)
}

.foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.foot-copy {
    font-size: 12px;
    font-weight: 300;
    color: var(--w30)
}

.foot-legal {
    display: flex;
    gap: 24px
}

.foot-legal a {
    font-size: 12px;
    font-weight: 300;
    color: var(--w30);
    transition: color .2s
}

.foot-legal a:hover {
    color: var(--w60)
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1100px) {

    .gap-grid,
    .serve-grid,
    .cta-cards {
        grid-template-columns: 1fr
    }

    .svc-grid {
        grid-template-columns: 1fr
    }

    .blog-grid {
        grid-template-columns: 1fr 1fr
    }

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

    .triggers-grid {
        grid-template-columns: 1fr 1fr
    }

    .process-row {
        grid-template-columns: 1fr 1fr
    }

    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px
    }
}

@media(max-width:768px) {
    #nav {
        padding: 0 24px
    }

    .n-links {
        display: none
    }

    .hero,
    .sec,
    .proof-section,
    .belief-section,
    .cta-final,
    footer {
        padding-left: 24px;
        padding-right: 24px
    }

    .hstat {
        padding: 20px 24px
    }

    .blog-grid {
        grid-template-columns: 1fr
    }

    .proof-grid {
        grid-template-columns: 1fr 1fr
    }

    .triggers-grid,
    .process-row {
        grid-template-columns: 1fr
    }

    .foot-grid {
        grid-template-columns: 1fr
    }
}

.nymora-contact-form{
    max-width:900px;
    margin:0 auto;
}

.nymora-contact-form h2{
    font-size:48px;
    font-weight:700;
    margin-bottom:10px;
}

.nymora-contact-form .sub-title{
    font-size:20px;
    color:#666;
    margin-bottom:50px;
}

.nymora-contact-form label{
    display:flex;
    font-size:14px;
    font-weight:600;
    letter-spacing:2px;
    color:var(--w60) !important;
    margin-bottom:10px;
}

.form-row{
    display:flex;
    gap:25px;
}

.form-col{
    flex:1;
}

.nymora-contact-form input[type="text"],
.nymora-contact-form input[type="email"],
.nymora-contact-form textarea{
    width:100%;
    padding:18px 20px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#f6f3ef;
    font-size:18px;
}

.nymora-contact-form textarea{
    min-height:180px;
}

.nymora-contact-form .radio-buttons{
    margin-bottom:30px;
}

.nymora-contact-form .radio-buttons .wpcf7-list-item{
    margin:0 10px 10px 0;
}

.nymora-contact-form .radio-buttons .wpcf7-list-item label{
    display:inline-block;
    padding:12px 24px;
    border:1px solid #ddd;
    border-radius:30px;
    cursor:pointer;
    letter-spacing:0;
    font-size:18px;
    background:#fff;
}

.nymora-contact-form .radio-buttons input[type="radio"]{
    display:none;
}

.nymora-contact-form .radio-buttons input[type="radio"]:checked + span{
    color:#fff;
}

.nymora-contact-form .radio-buttons .wpcf7-list-item label:has(input:checked){
        background: #1A65FF;
    color: #fff !important;
    border-color: #1A65FF;
}

.bottom-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:30px;
}

.privacy-text{
    max-width:250px;
    color:#666;
    line-height:1.7;
}

.submit-btn input{
    background:#000;
    color:#fff;
    border:none;
    padding:18px 40px;
    border-radius:16px;
    font-size:20px;
    font-weight:600;
    cursor:pointer;
}

.submit-btn input:hover{
    opacity:.9;
}

@media(max-width:768px){

    .form-row,
    .bottom-row{
        flex-direction:column;
    }

    .submit-btn{
        width:100%;
    }

    .submit-btn input{
        width:100%;
    }

    .nymora-contact-form h2{
        font-size:36px;
    }
}