/* ===========================================================
ADS AI WEBSITE
Version : 2.0
Author  : ADS AI
===========================================================*/

/* ===========================================================
GOOGLE FONT
===========================================================*/

:root{

--primary:#2563eb;
--secondary:#06b6d4;
--accent:#38bdf8;

--dark:#050816;
--dark2:#091223;
--card:#0d1a30;

--white:#ffffff;
--text:#d8e3f1;
--muted:#8fa6c2;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--radius:18px;

--shadow:
0 15px 45px rgba(0,0,0,.35);

--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:

radial-gradient(circle at top left,#173a79 0%,transparent 35%),

radial-gradient(circle at bottom right,#005b88 0%,transparent 30%),

linear-gradient(180deg,#050816,#081423,#050816);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

/* ===========================================================
SCROLLBAR
===========================================================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#07101f;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

#2563eb,

#06b6d4

);

border-radius:30px;

}

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

h1,h2,h3,h4,h5,h6{

font-weight:800;

color:#fff;

line-height:1.2;

}

h1{

font-size:68px;

}

h2{

font-size:46px;

}

h3{

font-size:28px;

}

p{

color:var(--muted);

font-size:17px;

}

a{

text-decoration:none;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}

/* ===========================================================
CONTAINER
===========================================================*/

.section{

padding:110px 0;

position:relative;

}

.dark-section{

background:rgba(255,255,255,.02);

backdrop-filter:blur(18px);

}

.section-title{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:10px 20px;

border-radius:100px;

background:rgba(56,189,248,.12);

color:#4cc9ff;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.section-title h2{

margin-bottom:18px;

}

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

.header{

position:fixed;

top:0;

left:0;

right:0;

z-index:9999;

padding:18px 0;

background:rgba(5,8,22,.55);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,.05);

}

.logo{

font-size:34px;

font-weight:900;

color:#fff;

letter-spacing:2px;

}

.logo span{

color:#4cc9ff;

}

.navbar-nav{

gap:15px;

}

.nav-link{

color:#dbeafe !important;

font-weight:600;

position:relative;

}

.nav-link:hover{

color:#4cc9ff !important;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#38bdf8;

transition:.3s;

}

.nav-link:hover::after{

width:100%;

}

/* ===========================================================
BUTTONS
===========================================================*/

.btn{

border-radius:50px;

padding:14px 30px;

font-weight:700;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 18px 40px rgba(37,99,235,.55);

}

.btn-outline-light{

border:2px solid rgba(255,255,255,.25);

}

.btn-outline-light:hover{

background:#fff;

color:#081423;

}

/* ===========================================================
BACKGROUND GRID
===========================================================*/

.background-grid{

position:fixed;

inset:0;

pointer-events:none;

opacity:.05;

background-image:

linear-gradient(

rgba(255,255,255,.12) 1px,

transparent 1px),

linear-gradient(

90deg,

rgba(255,255,255,.12) 1px,

transparent 1px);

background-size:50px 50px;

z-index:-1;

}

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

.hero{

padding-top:180px;

padding-bottom:120px;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:

radial-gradient(

circle,

rgba(56,189,248,.25),

transparent 70%

);

right:-250px;

top:-150px;

filter:blur(40px);

animation:floatGlow 8s infinite alternate;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

background:rgba(37,99,235,.18);

border:1px solid rgba(56,189,248,.25);

border-radius:100px;

font-weight:700;

margin-bottom:30px;

}

.hero h1{

margin-bottom:30px;

}

.hero h1 span{

background:

linear-gradient(

90deg,

#4cc9ff,

#38bdf8,

#2563eb

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:50px;

}

.hero-stats{

display:flex;

gap:60px;

}

.hero-stats h2{

font-size:42px;

color:#4cc9ff;

margin-bottom:8px;

}

.hero-card{

background:rgba(255,255,255,.05);

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

backdrop-filter:blur(18px);

border-radius:25px;

padding:35px;

box-shadow:var(--shadow);

}

.hero-card-header{

display:flex;

align-items:center;

gap:12px;

font-weight:700;

margin-bottom:25px;

}

.online-dot{

width:12px;

height:12px;

border-radius:50%;

background:#22c55e;

box-shadow:0 0 18px #22c55e;

animation:pulse 1.8s infinite;

}

.terminal{

background:#06101f;

border-radius:18px;

padding:22px;

font-family:monospace;

margin-bottom:25px;

}

.terminal div{

margin:10px 0;

color:#7df9ff;

}

.dashboard-item{

margin-top:18px;

}

.progress{

height:12px;

background:#0e203b;

border-radius:20px;

overflow:hidden;

}

.progress-bar{

background:linear-gradient(90deg,#2563eb,#06b6d4);

}

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

.service-card{

height:100%;

padding:40px 35px;

background:rgba(255,255,255,.04);

backdrop-filter:blur(18px);

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

border-radius:22px;

transition:all .35s ease;

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:4px;

background:linear-gradient(90deg,#2563eb,#06b6d4,#38bdf8);

transition:.45s;

}

.service-card:hover::before{

left:0;

}

.service-card:hover{

transform:translateY(-12px);

border-color:#38bdf8;

box-shadow:

0 20px 45px rgba(37,99,235,.25);

}

.service-icon{

width:78px;

height:78px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

font-size:34px;

background:

linear-gradient(135deg,#2563eb,#06b6d4);

color:#fff;

}

.service-card h3{

margin-bottom:18px;

}

.service-card ul{

margin-top:25px;

padding-left:18px;

margin-bottom:30px;

}

.service-card li{

margin:10px 0;

color:#b7c7db;

}

.service-card a{

font-weight:700;

color:#4cc9ff;

}

.service-card a i{

margin-left:8px;

transition:.3s;

}

.service-card:hover a i{

margin-left:16px;

}

/* ===========================================================
PRODUCTS
===========================================================*/

.product-card{

height:100%;

padding:35px;

background:linear-gradient(

180deg,

rgba(255,255,255,.06),

rgba(255,255,255,.03)

);

border-radius:24px;

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

transition:.35s;

position:relative;

overflow:hidden;

}

.product-card:hover{

transform:translateY(-12px);

border-color:#38bdf8;

}

.product-card::after{

content:"";

position:absolute;

right:-70px;

top:-70px;

width:180px;

height:180px;

background:

radial-gradient(circle,

rgba(56,189,248,.18),

transparent);

}

.product-logo{

width:82px;

height:82px;

border-radius:24px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

margin-bottom:28px;

background:

linear-gradient(

135deg,

#2563eb,

#06b6d4

);

color:white;

}

.product-card h3{

margin-bottom:15px;

}

.product-tag{

display:inline-block;

padding:10px 18px;

margin-top:25px;

border-radius:40px;

background:#143256;

color:#72dbff;

font-weight:700;

font-size:14px;

letter-spacing:.5px;

}

/* ===========================================================
TECH STACK
===========================================================*/

.tech-card{

height:100%;

padding:35px;

border-radius:24px;

text-align:center;

background:rgba(255,255,255,.05);

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

transition:.35s;

}

.tech-card:hover{

transform:translateY(-10px);

border-color:#4cc9ff;

}

.tech-card i{

font-size:54px;

margin-bottom:25px;

background:linear-gradient(

135deg,

#38bdf8,

#2563eb

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.tech-card h4{

margin-bottom:15px;

}

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

.feature-card{

height:100%;

padding:35px;

text-align:center;

border-radius:22px;

background:rgba(255,255,255,.05);

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

transition:.35s;

}

.feature-card:hover{

transform:translateY(-12px);

background:rgba(37,99,235,.10);

}

.feature-card i{

font-size:42px;

margin-bottom:22px;

color:#38bdf8;

}

.feature-card h3{

margin-bottom:18px;

}

/* ===========================================================
PORTFOLIO
===========================================================*/

.portfolio-card{

height:100%;

padding:40px;

border-radius:24px;

background:rgba(255,255,255,.05);

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

transition:.35s;

position:relative;

overflow:hidden;

}

.portfolio-card:hover{

transform:scale(1.03);

border-color:#4cc9ff;

}

.portfolio-card::before{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:5px;

background:linear-gradient(

90deg,

#2563eb,

#38bdf8

);

}

.portfolio-card h3{

margin-bottom:20px;

}

/* ===========================================================
CARD HOVER EFFECT
===========================================================*/

.service-card,
.product-card,
.tech-card,
.feature-card,
.portfolio-card{

cursor:pointer;

}

.service-card:hover,
.product-card:hover,
.tech-card:hover,
.feature-card:hover,
.portfolio-card:hover{

box-shadow:

0 25px 60px rgba(0,0,0,.35);

}

/* ===========================================================
FLOATING GLOW
===========================================================*/

@keyframes floatGlow{

0%{

transform:translateY(0);

}

100%{

transform:translateY(30px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.15);

opacity:.65;

}

100%{

transform:scale(1);

opacity:1;

}

}

@keyframes floatCard{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.hero-card{

animation:floatCard 5s ease-in-out infinite;

}

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

.cta-section{

padding:120px 0;

position:relative;

overflow:hidden;

}

.cta-box{

background:linear-gradient(
135deg,
rgba(37,99,235,.22),
rgba(6,182,212,.18)
);

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

backdrop-filter:blur(20px);

border-radius:32px;

padding:80px;

text-align:center;

position:relative;

overflow:hidden;

}

.cta-box::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:420px;

height:420px;

border-radius:50%;

background:radial-gradient(circle,
rgba(56,189,248,.25),
transparent 70%);

}

.cta-box h2{

font-size:52px;

margin:25px 0;

}

.cta-box p{

max-width:760px;

margin:auto;

margin-bottom:45px;

font-size:19px;

}

.cta-badge{

display:inline-block;

padding:12px 22px;

border-radius:50px;

background:rgba(255,255,255,.08);

font-weight:700;

color:#4cc9ff;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

/* ===========================================================
CONTACT
===========================================================*/

.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}

.contact-card{

display:flex;

gap:22px;

align-items:flex-start;

padding:28px;

border-radius:22px;

background:rgba(255,255,255,.04);

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

transition:.35s;

}

.contact-card:hover{

transform:translateX(10px);

border-color:#38bdf8;

}

.contact-card i{

width:64px;

height:64px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

background:linear-gradient(
135deg,
#2563eb,
#06b6d4
);

color:white;

}

.contact-card h4{

margin-bottom:10px;

}

.contact-form{

background:rgba(255,255,255,.05);

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

border-radius:28px;

padding:45px;

backdrop-filter:blur(18px);

}

.form-control,

.form-select{

background:#081425;

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

color:white;

padding:18px;

border-radius:14px;

}

.form-control::placeholder{

color:#8fa6c2;

}

.form-control:focus,

.form-select:focus{

background:#081425;

color:white;

border-color:#38bdf8;

box-shadow:none;

}

textarea{

resize:none;

}

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

.footer{

padding:90px 0 35px;

background:#030712;

border-top:1px solid rgba(255,255,255,.06);

}

.footer-logo{

font-size:40px;

font-weight:900;

margin-bottom:20px;

}

.footer-logo span{

color:#38bdf8;

}

.footer h5{

margin-bottom:25px;

}

.footer ul{

list-style:none;

padding:0;

}

.footer li{

margin:12px 0;

}

.footer a{

color:#9fb5cf;

}

.footer a:hover{

color:#4cc9ff;

}

.social-links{

display:flex;

gap:15px;

margin-top:30px;

}

.social-links a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#10213d;

color:white;

transition:.35s;

}

.social-links a:hover{

transform:translateY(-6px);

background:#2563eb;

}

.footer-bottom{

margin-top:45px;

padding-top:25px;

display:flex;

justify-content:space-between;

flex-wrap:wrap;

border-top:1px solid rgba(255,255,255,.08);

}

/* ===========================================================
ANIMATIONS
===========================================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.7s;

}

.fade-up.show{

opacity:1;

transform:none;

}

.scale-up{

transform:scale(.92);

opacity:0;

transition:.6s;

}

.scale-up.show{

opacity:1;

transform:scale(1);

}

/* ===========================================================
UTILITY
===========================================================*/

.text-gradient{

background:linear-gradient(
90deg,
#4cc9ff,
#2563eb
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.shadow-lg{

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

}

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

@media(max-width:1200px){

.hero h1{

font-size:58px;

}

}

@media(max-width:992px){

.hero{

text-align:center;

padding-top:150px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

margin-bottom:60px;

}

.hero-card{

margin-top:40px;

}

.cta-box{

padding:60px 35px;

}

.cta-box h2{

font-size:42px;

}

.footer-bottom{

text-align:center;

justify-content:center;

gap:15px;

}

}

@media(max-width:768px){

.section{

padding:80px 0;

}

h1{

font-size:42px;

}

h2{

font-size:34px;

}

.hero p{

font-size:17px;

}

.hero-stats{

gap:30px;

}

.hero-stats h2{

font-size:32px;

}

.service-card,

.product-card,

.tech-card,

.feature-card,

.portfolio-card{

padding:28px;

}

.contact-form{

padding:30px;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:34px;

}

}

@media(max-width:576px){

.logo{

font-size:28px;

}

.hero{

padding-top:130px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-stats{

flex-direction:column;

gap:20px;

}

.footer{

text-align:center;

}

.social-links{

justify-content:center;

}

}

/* ===========================================================
STYLE.CSS — PART 4
FINAL JS SUPPORT + PRODUCTION POLISH
APPEND TO assets/css/style.css
===========================================================*/

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

.header{

transition:
background .3s ease,
box-shadow .3s ease,
padding .3s ease;

}

.header.scrolled{

background:rgba(5,8,22,.94);

box-shadow:
0 12px 35px rgba(0,0,0,.25);

padding:10px 0;

}

/* ===========================================================
ACTIVE NAVIGATION
===========================================================*/

.nav-link.active{

color:#4cc9ff !important;

}

.nav-link.active::after{

width:100%;

}

/* ===========================================================
NAVBAR TOGGLER
===========================================================*/

.navbar-toggler{

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

border-radius:12px;

padding:9px 11px;

box-shadow:none !important;

}

.navbar-toggler:focus{

box-shadow:
0 0 0 3px rgba(56,189,248,.16) !important;

}

.navbar-toggler-icon{

filter:
invert(1)
brightness(2);

}

/* ===========================================================
ACCESSIBLE KEYBOARD FOCUS
===========================================================*/

.keyboard-navigation a:focus-visible,
.keyboard-navigation button:focus-visible,
.keyboard-navigation input:focus-visible,
.keyboard-navigation select:focus-visible,
.keyboard-navigation textarea:focus-visible{

outline:
3px solid rgba(56,189,248,.85);

outline-offset:4px;

}

/* ===========================================================
SELECTION
===========================================================*/

::selection{

background:#2563eb;

color:#ffffff;

}

::-moz-selection{

background:#2563eb;

color:#ffffff;

}

/* ===========================================================
CARD POINTER GLOW SUPPORT
===========================================================*/

.service-card,
.product-card,
.tech-card,
.feature-card,
.portfolio-card{

isolation:isolate;

will-change:transform;

}

/* ===========================================================
BETTER FORM SELECT
===========================================================*/

.form-select{

color-scheme:dark;

cursor:pointer;

}

.form-select option{

background:#081425;

color:#ffffff;

}

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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{

-webkit-text-fill-color:#ffffff;

-webkit-box-shadow:
0 0 0 1000px #081425 inset;

transition:
background-color 9999s ease-in-out 0s;

}

/* ===========================================================
FORM BUTTON DISABLED
===========================================================*/

.contact-form button:disabled{

opacity:.8;

cursor:not-allowed;

transform:none !important;

}

/* ===========================================================
BUTTON RIPPLE SUPPORT
===========================================================*/

.btn{

isolation:isolate;

}

.btn > *{

position:relative;

z-index:2;

}

/* ===========================================================
SMOOTH ANCHOR OFFSET
===========================================================*/

section[id]{

scroll-margin-top:95px;

}

/* ===========================================================
FOOTER LINK POLISH
===========================================================*/

.footer li a{

position:relative;

display:inline-flex;

align-items:center;

}

.footer li a::before{

content:"";

width:0;

height:1px;

margin-right:0;

background:#38bdf8;

transition:
width .3s ease,
margin-right .3s ease;

}

.footer li a:hover::before{

width:14px;

margin-right:8px;

}

/* ===========================================================
SOCIAL ICON GLOW
===========================================================*/

.social-links a:hover{

box-shadow:
0 10px 30px rgba(37,99,235,.4);

}

/* ===========================================================
PAGE READY
===========================================================*/

body:not(.ads-page-ready){

opacity:.99;

}

body.ads-page-ready{

opacity:1;

}

/* ===========================================================
RESIZE PERFORMANCE
===========================================================*/

body.is-resizing *,
body.is-resizing *::before,
body.is-resizing *::after{

transition:none !important;

}

/* ===========================================================
PAGE HIDDEN PERFORMANCE
===========================================================*/

body.page-hidden .hero-card{

animation-play-state:paused;

}

/* ===========================================================
RESPONSIVE NAVIGATION PANEL
===========================================================*/

@media(max-width:991.98px){

.header{

padding:12px 0;

}

.navbar-collapse{

margin-top:16px;

padding:20px;

border-radius:20px;

background:
rgba(8,20,37,.97);

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

box-shadow:
0 20px 50px rgba(0,0,0,.35);

backdrop-filter:
blur(20px);

}

.navbar-nav{

gap:5px;

}

.nav-link{

padding:
12px 14px !important;

border-radius:10px;

}

.nav-link:hover,
.nav-link.active{

background:
rgba(56,189,248,.08);

}

.nav-link::after{

display:none;

}

.navbar-collapse .btn{

margin-left:0 !important;

margin-top:15px;

width:100%;

}

}

/* ===========================================================
MOBILE BACK TO TOP
===========================================================*/

@media(max-width:576px){

#adsBackToTop{

right:18px !important;

bottom:18px !important;

width:50px !important;

height:50px !important;

}

}

/* ===========================================================
TOUCH DEVICE OPTIMIZATION
===========================================================*/

@media(hover:none){

.service-card:hover,
.product-card:hover,
.tech-card:hover,
.feature-card:hover,
.portfolio-card:hover,
.contact-card:hover{

transform:none;

}

.hero-card{

animation:none;

}

}

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

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

html{

scroll-behavior:auto;

}

*,
*::before,
*::after{

animation-duration:.01ms !important;

animation-iteration-count:1 !important;

transition-duration:.01ms !important;

scroll-behavior:auto !important;

}

}

/* ===========================================================
PRINT
===========================================================*/

@media print{

.header,
.cta-section,
.social-links,
#adsBackToTop,
#adsScrollProgress,
#adsPointerSpotlight{

display:none !important;

}

body{

background:#ffffff;

color:#111827;

}

.section,
.footer{

padding:
30px 0;

}

h1,
h2,
h3,
h4,
h5,
h6,
p{

color:#111827 !important;

}

}

/* ===========================================================
VERY SMALL DEVICES
===========================================================*/

@media(max-width:380px){

.hero h1{

font-size:36px;

}

.section-title h2{

font-size:30px;

}

.hero-card{

padding:22px;

}

.contact-form{

padding:22px;

}

.cta-box{

padding:
38px 18px;

}

}

/* ===========================================================
LARGE DESKTOP
===========================================================*/

@media(min-width:1400px){

.container{

max-width:1320px;

}

.hero h1{

font-size:72px;

}

}

/* ===========================================================
END ADS AI V2 STYLESHEET
===========================================================*/
/* ===========================================================
ADS AI V2 - MOBILE RESPONSIVE MASTER FIX
=========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

.row > * {
    min-width: 0;
}

/* ===========================================================
TABLET AND MOBILE
=========================================================== */

@media (max-width: 991.98px) {

    .header {
        width: 100%;
        padding: 10px 0;
    }

    .header .container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .navbar {
        width: 100%;
        padding: 0;
    }

    .navbar-brand.logo,
    .logo {
        font-size: 27px;
        line-height: 1;
        margin-right: 0;
    }

    .navbar-toggler {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 48px;
        padding: 8px;
    }

    .navbar-collapse {
        width: 100%;
        max-width: 100%;
        margin-top: 14px;
    }

    .hero {
        width: 100%;
        min-height: auto;
        padding-top: 120px;
        padding-bottom: 70px;
        overflow: hidden;
    }

    .hero .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero .row {
        margin-left: 0;
        margin-right: 0;
    }

    .hero .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .hero .col-lg-6:first-child {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
        margin-bottom: 45px;
    }

    .hero .col-lg-6:last-child {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
    }

    .hero-tag {
        display: inline-flex;
        max-width: 100%;
        white-space: normal;
        text-align: center;
        font-size: 13px;
        padding: 9px 16px;
        margin-bottom: 22px;
    }

    .hero h1 {
        display: block !important;
        width: 100%;
        max-width: 100%;
        font-size: clamp(38px, 9vw, 56px);
        line-height: 1.08;
        letter-spacing: -1.5px;
        margin: 0 0 24px;
        overflow-wrap: break-word;
    }

    .hero h1 span {
        display: inline;
    }

    .hero p {
        width: 100%;
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        font-size: 17px;
        line-height: 1.7;
    }

    .hero-buttons {
        width: 100%;
        justify-content: center;
        margin-bottom: 38px;
    }

    .hero-stats {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px 40px;
        margin-bottom: 10px;
    }

    .hero-stats > div {
        min-width: 90px;
    }

    .hero-card {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        padding: 28px;
        transform: none !important;
        animation: none;
    }

    .terminal {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        padding: 20px;
    }

    .terminal div {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .dashboard {
        width: 100%;
    }

    .section {
        padding: 75px 0;
    }

    .section .container,
    .cta-section .container,
    .footer .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-title {
        width: 100%;
        max-width: 680px;
        margin-bottom: 45px;
    }

    .section-title h2 {
        font-size: clamp(32px, 7vw, 44px);
        overflow-wrap: break-word;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card {
        width: 100%;
        max-width: 100%;
    }

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

    .cta-box {
        width: 100%;
        max-width: 100%;
        padding: 50px 28px;
    }

    .cta-box h2 {
        font-size: clamp(32px, 7vw, 44px);
    }

    .contact-form {
        width: 100%;
        max-width: 100%;
    }
}

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

@media (max-width: 767.98px) {

    .hero {
        padding-top: 105px;
        padding-bottom: 60px;
        text-align: center;
    }

    .hero .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero h1 {
        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.1;
        letter-spacing: -1px;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.65;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        align-items: start;
    }

    .hero-stats > div {
        min-width: 0;
    }

    .hero-stats h2 {
        font-size: 28px;
    }

    .hero-stats p {
        font-size: 12px;
        line-height: 1.3;
        margin-bottom: 0;
    }

    .hero-card {
        padding: 20px;
        border-radius: 22px;
    }

    .hero-card-header {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .terminal {
        padding: 18px 14px;
        border-radius: 15px;
    }

    .terminal div {
        font-size: 12px;
        line-height: 1.55;
        margin: 8px 0;
    }

    .dashboard-item {
        margin-top: 16px;
    }

    .dashboard-item h5 {
        font-size: 15px;
    }

    .section {
        padding: 65px 0;
    }

    .section .container,
    .cta-section .container,
    .footer .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-title {
        margin-bottom: 38px;
    }

    .section-title span {
        font-size: 12px;
        padding: 8px 15px;
    }

    .section-title h2 {
        font-size: 32px;
        line-height: 1.15;
    }

    .section-title p {
        font-size: 15px;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card {
        padding: 25px 22px;
        border-radius: 20px;
    }

    .service-card h3,
    .product-card h3,
    .feature-card h3,
    .portfolio-card h3 {
        font-size: 23px;
    }

    .service-icon,
    .product-logo {
        width: 66px;
        height: 66px;
        font-size: 28px;
        border-radius: 18px;
    }

    .tech-card i {
        font-size: 44px;
    }

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

    .cta-box {
        padding: 42px 20px;
        border-radius: 24px;
    }

    .cta-box h2 {
        font-size: 31px;
        line-height: 1.15;
    }

    .cta-box p {
        font-size: 16px;
    }

    .cta-buttons {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    .contact-card {
        padding: 20px;
        gap: 15px;
    }

    .contact-card i {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 21px;
    }

    .contact-form {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .form-control,
    .form-select {
        width: 100%;
        min-width: 0;
        font-size: 16px;
        padding: 15px;
    }

    .footer {
        padding-top: 65px;
    }

    .footer .row > div {
        margin-bottom: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ===========================================================
SMALL MOBILE - 400PX AND BELOW
=========================================================== */

@media (max-width: 400px) {

    .header .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .logo,
    .navbar-brand.logo {
        font-size: 25px;
    }

    .navbar-toggler {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .hero {
        padding-top: 100px;
    }

    .hero .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero h1 {
        font-size: 34px;
        line-height: 1.08;
    }

    .hero p {
        font-size: 15px;
    }

    .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .hero-stats h2 {
        font-size: 25px;
    }

    .hero-stats p {
        font-size: 11px;
    }

    .hero-card {
        padding: 16px;
        border-radius: 18px;
    }

    .terminal {
        padding: 15px 11px;
    }

    .terminal div {
        font-size: 11px;
    }

    .section .container,
    .cta-section .container,
    .footer .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card {
        padding: 22px 18px;
    }

    .contact-form {
        padding: 20px 14px;
    }

    #adsBackToTop {
        right: 14px !important;
        bottom: 14px !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/* ===========================================================
END MOBILE RESPONSIVE MASTER FIX
=========================================================== */

/* ===========================================================
ADS AI V3 — LIGHTWEIGHT PREMIUM LIGHT THEME
PART 1 — FOUNDATION + HEADER + HERO
=========================================================== */

:root {
    --v3-bg: #f8fafc;
    --v3-bg-soft: #f1f5f9;
    --v3-surface: #ffffff;
    --v3-surface-glass: rgba(255, 255, 255, 0.82);

    --v3-primary: #4f46e5;
    --v3-primary-dark: #3730a3;
    --v3-cyan: #06b6d4;
    --v3-violet: #8b5cf6;
    --v3-emerald: #10b981;
    --v3-rose: #f43f5e;
    --v3-amber: #f59e0b;

    --v3-heading: #0f172a;
    --v3-text: #475569;
    --v3-muted: #64748b;

    --v3-border: rgba(15, 23, 42, 0.08);
    --v3-border-rich: rgba(79, 70, 229, 0.16);

    --v3-shadow-sm:
        0 8px 24px rgba(15, 23, 42, 0.05);

    --v3-shadow-md:
        0 18px 45px rgba(15, 23, 42, 0.08);

    --v3-shadow-rich:
        0 22px 55px rgba(79, 70, 229, 0.13);

    --v3-gradient:
        linear-gradient(
            135deg,
            #4f46e5 0%,
            #7c3aed 52%,
            #06b6d4 100%
        );
}

/* ===========================================================
GLOBAL LIGHT FOUNDATION
=========================================================== */

html {
    background: var(--v3-bg);
}

body {
    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(79, 70, 229, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(6, 182, 212, 0.07),
            transparent 25%
        ),
        var(--v3-bg);

    color: var(--v3-text);
}

body::before,
body::after {
    opacity: 0.22;
    pointer-events: none;
}

p {
    color: var(--v3-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--v3-heading);
}

a {
    color: var(--v3-primary);
}

/* ===========================================================
LIGHT SCROLLBAR
=========================================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #eef2f7;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            var(--v3-primary),
            var(--v3-violet)
        );

    border: 2px solid #eef2f7;
    border-radius: 999px;
}

/* ===========================================================
SELECTION
=========================================================== */

::selection {
    background: rgba(79, 70, 229, 0.18);
    color: var(--v3-heading);
}

::-moz-selection {
    background: rgba(79, 70, 229, 0.18);
    color: var(--v3-heading);
}

/* ===========================================================
HEADER — PREMIUM LIGHT GLASS
=========================================================== */

.header {
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);

    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.035);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.08);

    border-bottom:
        1px solid rgba(79, 70, 229, 0.08);
}

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

.logo,
.navbar-brand.logo {
    color: var(--v3-heading) !important;
}

.logo span,
.navbar-brand.logo span {
    background: var(--v3-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

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

.nav-link {
    color: #334155 !important;
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
    color: var(--v3-primary) !important;
}

.nav-link::after {
    background:
        linear-gradient(
            90deg,
            var(--v3-primary),
            var(--v3-cyan)
        );
}

/* ===========================================================
NAVBAR TOGGLER
=========================================================== */

.navbar-toggler {
    background: #ffffff;

    border:
        1px solid rgba(79, 70, 229, 0.14);

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.06) !important;
}

.navbar-toggler-icon {
    filter: none;
}

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

.btn-primary,
.btn-gradient {
    color: #ffffff !important;

    background: var(--v3-gradient);

    border: 0;

    box-shadow:
        0 12px 28px rgba(79, 70, 229, 0.22);
}

.btn-primary:hover,
.btn-gradient:hover {
    color: #ffffff !important;

    box-shadow:
        0 16px 34px rgba(79, 70, 229, 0.3);

    transform: translateY(-2px);
}

.btn-outline-light,
.btn-outline-primary {
    color: var(--v3-primary) !important;

    background:
        rgba(255, 255, 255, 0.86);

    border:
        1px solid rgba(79, 70, 229, 0.2);

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.05);
}

.btn-outline-light:hover,
.btn-outline-primary:hover {
    color: #ffffff !important;

    background: var(--v3-primary);

    border-color: var(--v3-primary);
}

/* ===========================================================
HERO — LIGHT AI GRADIENT CANVAS
=========================================================== */

.hero {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(79, 70, 229, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 22%,
            rgba(6, 182, 212, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 68% 82%,
            rgba(139, 92, 246, 0.09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 55%,
            #f1f5f9 100%
        );

    color: var(--v3-heading);
}

.hero::before {
    background-image:
        linear-gradient(
            rgba(79, 70, 229, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(79, 70, 229, 0.035) 1px,
            transparent 1px
        );

    opacity: 0.65;
}

.hero::after {
    background:
        radial-gradient(
            circle,
            rgba(79, 70, 229, 0.12),
            transparent 68%
        );

    opacity: 0.65;
}

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

.hero-tag {
    color: var(--v3-primary);

    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid rgba(79, 70, 229, 0.14);

    box-shadow:
        0 10px 28px rgba(79, 70, 229, 0.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-tag i {
    color: var(--v3-cyan);
}

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

.hero h1 {
    color: var(--v3-heading);
}

.hero p {
    color: #526277;
}

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

.hero-stats h2 {
    background: var(--v3-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-stats p {
    color: var(--v3-muted);
}

/* ===========================================================
HERO AI CARD
=========================================================== */

.hero-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 250, 252, 0.92)
        );

    border:
        1px solid rgba(79, 70, 229, 0.12);

    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.1),
        0 12px 35px rgba(79, 70, 229, 0.08);

    color: var(--v3-heading);
}

.hero-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(79, 70, 229, 0.45),
            rgba(6, 182, 212, 0.45),
            transparent
        );
}

.hero-card-header {
    color: var(--v3-heading);
}

/* ===========================================================
TERMINAL — LIGHT CODE PANEL
=========================================================== */

.terminal {
    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #eef2ff
        );

    border:
        1px solid rgba(79, 70, 229, 0.1);

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

.terminal div {
    color: #334155;
}

.terminal .green {
    color: #059669;
}

.terminal .blue {
    color: #2563eb;
}

.terminal .purple {
    color: #7c3aed;
}

.terminal .yellow {
    color: #d97706;
}

/* ===========================================================
DASHBOARD ITEMS
=========================================================== */

.dashboard-item {
    background:
        rgba(255, 255, 255, 0.82);

    border:
        1px solid rgba(15, 23, 42, 0.07);

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.045);
}

.dashboard-item h5 {
    color: var(--v3-heading);
}

.dashboard-item span,
.dashboard-item p {
    color: var(--v3-muted);
}

/* ===========================================================
SCROLL PROGRESS
=========================================================== */

#adsScrollProgress,
#scrollProgress {
    background: var(--v3-gradient) !important;

    box-shadow:
        0 0 16px rgba(79, 70, 229, 0.35);
}

/* ===========================================================
POINTER SPOTLIGHT — LIGHTWEIGHT
=========================================================== */

#adsPointerSpotlight,
#spotlight {
    opacity: 0.3 !important;

    background:
        radial-gradient(
            circle,
            rgba(79, 70, 229, 0.11),
            transparent 68%
        ) !important;
}

/* ===========================================================
PART 1 RESPONSIVE
=========================================================== */

@media (max-width: 991.98px) {

    .navbar-collapse {
        background:
            rgba(255, 255, 255, 0.97);

        border:
            1px solid rgba(79, 70, 229, 0.1);

        box-shadow:
            0 22px 55px rgba(15, 23, 42, 0.12);

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .nav-link:hover,
    .nav-link.active {
        background:
            rgba(79, 70, 229, 0.07);
    }

}

@media (max-width: 767.98px) {

    .hero {
        background:
            radial-gradient(
                circle at 20% 12%,
                rgba(79, 70, 229, 0.11),
                transparent 30%
            ),
            radial-gradient(
                circle at 85% 28%,
                rgba(6, 182, 212, 0.09),
                transparent 28%
            ),
            linear-gradient(
                180deg,
                #ffffff,
                #f8fafc
            );
    }

    .hero-card {
        box-shadow:
            0 20px 45px rgba(15, 23, 42, 0.09),
            0 8px 24px rgba(79, 70, 229, 0.07);
    }

}

/* ===========================================================
END ADS AI V3 LIGHT THEME — PART 1
=========================================================== */


/* ===========================================================
ADS AI V3 — LIGHTWEIGHT PREMIUM LIGHT THEME
PART 2 — SECTIONS + SERVICES + PRODUCTS + TECHNOLOGY
=========================================================== */

/* ===========================================================
GENERAL SECTION FOUNDATION
=========================================================== */

.section {
    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 250, 252, 0.98)
        );

    color: var(--v3-text);
}

.section:nth-of-type(even) {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f1f5f9 100%
        );
}

.dark-section {
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(79, 70, 229, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(6, 182, 212, 0.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #eef2ff 100%
        ) !important;

    color: var(--v3-text);
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
    color: var(--v3-heading);
}

.dark-section p {
    color: var(--v3-text);
}

/* ===========================================================
SECTION DECORATION
=========================================================== */

.section::before {
    opacity: 0.4;
}

.section-glow,
.section-orb {
    opacity: 0.35;
    filter: blur(70px);
}

/* ===========================================================
SECTION LABEL
=========================================================== */

.section-label,
.section-tag,
.eyebrow {
    color: var(--v3-primary);

    background:
        rgba(79, 70, 229, 0.07);

    border:
        1px solid rgba(79, 70, 229, 0.12);

    box-shadow:
        0 8px 24px rgba(79, 70, 229, 0.05);
}

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

.section-title h2 {
    color: var(--v3-heading);
}

.section-title h2 span {
    background:
        linear-gradient(
            100deg,
            var(--v3-primary),
            var(--v3-violet),
            var(--v3-cyan)
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-title p {
    color: var(--v3-text);
}

/* ===========================================================
UNIVERSAL PREMIUM CARD FOUNDATION
=========================================================== */

.service-card,
.product-card,
.tech-card,
.feature-card,
.portfolio-card,
.contact-card,
.ecosystem-card,
.analytics-card,
.testimonial-card,
.feature-box {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.96)
        ) !important;

    border:
        1px solid var(--v3-border) !important;

    box-shadow:
        var(--v3-shadow-sm) !important;

    color:
        var(--v3-text);

    overflow: hidden;
}

/* ===========================================================
CARD TOP ACCENT
=========================================================== */

.service-card::before,
.product-card::before,
.tech-card::before,
.feature-card::before,
.portfolio-card::before,
.contact-card::before,
.ecosystem-card::before,
.analytics-card::before,
.testimonial-card::before,
.feature-box::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--v3-primary),
            var(--v3-violet),
            var(--v3-cyan)
        );

    opacity: 0.75;

    z-index: 1;
}

/* ===========================================================
CARD SOFT GLOW
=========================================================== */

.service-card::after,
.product-card::after,
.tech-card::after,
.feature-card::after,
.portfolio-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    bottom: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(79, 70, 229, 0.08),
            transparent 70%
        );

    pointer-events: none;

    z-index: 0;
}

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

.service-card:hover,
.product-card:hover,
.tech-card:hover,
.feature-card:hover,
.portfolio-card:hover,
.contact-card:hover,
.ecosystem-card:hover,
.analytics-card:hover,
.testimonial-card:hover,
.feature-box:hover {
    border-color:
        rgba(79, 70, 229, 0.16) !important;

    box-shadow:
        var(--v3-shadow-rich) !important;
}

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

.service-card h3,
.service-card h4,
.product-card h3,
.product-card h4,
.tech-card h3,
.tech-card h4,
.feature-card h3,
.feature-card h4,
.portfolio-card h3,
.portfolio-card h4,
.contact-card h3,
.contact-card h4,
.ecosystem-card h3,
.analytics-card h3,
.testimonial-card h3,
.feature-box h3 {
    color:
        var(--v3-heading) !important;
}

.service-card p,
.product-card p,
.tech-card p,
.feature-card p,
.portfolio-card p,
.contact-card p,
.ecosystem-card p,
.analytics-card p,
.testimonial-card p,
.feature-box p {
    color:
        var(--v3-text) !important;
}

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

#services {
    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(79, 70, 229, 0.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(6, 182, 212, 0.05),
            transparent 28%
        ),
        #ffffff;
}

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

.service-card {
    min-height: 100%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        ) !important;
}

.service-card:nth-child(3n + 1)::before {
    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #8b5cf6
        );
}

.service-card:nth-child(3n + 2)::before {
    background:
        linear-gradient(
            90deg,
            #06b6d4,
            #2563eb
        );
}

.service-card:nth-child(3n + 3)::before {
    background:
        linear-gradient(
            90deg,
            #10b981,
            #06b6d4
        );
}

/* ===========================================================
SERVICE ICONS
=========================================================== */

.service-icon,
.card-icon,
.feature-icon {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--v3-primary),
            var(--v3-violet)
        ) !important;

    border:
        0 !important;

    box-shadow:
        0 12px 28px rgba(79, 70, 229, 0.18);
}

.service-card:nth-child(3n + 2) .service-icon {
    background:
        linear-gradient(
            135deg,
            #0891b2,
            #2563eb
        ) !important;

    box-shadow:
        0 12px 28px rgba(6, 182, 212, 0.18);
}

.service-card:nth-child(3n + 3) .service-icon {
    background:
        linear-gradient(
            135deg,
            #059669,
            #06b6d4
        ) !important;

    box-shadow:
        0 12px 28px rgba(16, 185, 129, 0.18);
}

/* ===========================================================
SERVICE LISTS
=========================================================== */

.service-card ul,
.product-card ul,
.tech-card ul,
.feature-card ul {
    color:
        var(--v3-text);
}

.service-card li,
.product-card li,
.tech-card li,
.feature-card li {
    color:
        var(--v3-text);
}

.service-card li::marker,
.product-card li::marker {
    color:
        var(--v3-primary);
}

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

.service-card a,
.product-card a,
.tech-card a,
.feature-card a,
.portfolio-card a {
    color:
        var(--v3-primary);
}

.service-card a:hover,
.product-card a:hover,
.tech-card a:hover,
.feature-card a:hover,
.portfolio-card a:hover {
    color:
        var(--v3-violet);
}

/* ===========================================================
PRODUCTS SECTION
=========================================================== */

#products {
    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(79, 70, 229, 0.09),
            transparent 26%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(6, 182, 212, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fafc,
            #eef2ff
        ) !important;
}

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

.product-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(248, 250, 252, 0.97)
        ) !important;

    border:
        1px solid rgba(79, 70, 229, 0.1) !important;
}

/* ===========================================================
PRODUCT CARD RICH COLOR VARIANTS
=========================================================== */

.product-card:nth-child(4n + 1)::before {
    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #8b5cf6
        );
}

.product-card:nth-child(4n + 2)::before {
    background:
        linear-gradient(
            90deg,
            #06b6d4,
            #2563eb
        );
}

.product-card:nth-child(4n + 3)::before {
    background:
        linear-gradient(
            90deg,
            #10b981,
            #06b6d4
        );
}

.product-card:nth-child(4n + 4)::before {
    background:
        linear-gradient(
            90deg,
            #f43f5e,
            #8b5cf6
        );
}

/* ===========================================================
PRODUCT BADGES
=========================================================== */

.product-badge,
.badge {
    color:
        var(--v3-primary);

    background:
        rgba(79, 70, 229, 0.08);

    border:
        1px solid rgba(79, 70, 229, 0.12);
}

.product-card:nth-child(4n + 2) .product-badge {
    color: #0891b2;

    background:
        rgba(6, 182, 212, 0.08);

    border-color:
        rgba(6, 182, 212, 0.14);
}

.product-card:nth-child(4n + 3) .product-badge {
    color: #059669;

    background:
        rgba(16, 185, 129, 0.08);

    border-color:
        rgba(16, 185, 129, 0.14);
}

.product-card:nth-child(4n + 4) .product-badge {
    color: #e11d48;

    background:
        rgba(244, 63, 94, 0.08);

    border-color:
        rgba(244, 63, 94, 0.14);
}

/* ===========================================================
PRODUCT ICONS
=========================================================== */

.product-icon {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--v3-primary),
            var(--v3-violet)
        ) !important;

    border:
        0 !important;

    box-shadow:
        0 12px 28px rgba(79, 70, 229, 0.18);
}

/* ===========================================================
TECHNOLOGY SECTION
=========================================================== */

#technology {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(139, 92, 246, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(6, 182, 212, 0.06),
            transparent 28%
        ),
        #ffffff;
}

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

.tech-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        ) !important;
}

.tech-card:nth-child(4n + 1)::before {
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #06b6d4
        );
}

.tech-card:nth-child(4n + 2)::before {
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #4f46e5
        );
}

.tech-card:nth-child(4n + 3)::before {
    background:
        linear-gradient(
            90deg,
            #059669,
            #06b6d4
        );
}

.tech-card:nth-child(4n + 4)::before {
    background:
        linear-gradient(
            90deg,
            #ea580c,
            #f59e0b
        );
}

/* ===========================================================
TECH ICONS
=========================================================== */

.tech-icon {
    color:
        var(--v3-primary) !important;

    background:
        rgba(79, 70, 229, 0.08) !important;

    border:
        1px solid rgba(79, 70, 229, 0.12) !important;
}

.tech-card:nth-child(4n + 2) .tech-icon {
    color:
        #7c3aed !important;

    background:
        rgba(124, 58, 237, 0.08) !important;

    border-color:
        rgba(124, 58, 237, 0.12) !important;
}

.tech-card:nth-child(4n + 3) .tech-icon {
    color:
        #059669 !important;

    background:
        rgba(16, 185, 129, 0.08) !important;

    border-color:
        rgba(16, 185, 129, 0.12) !important;
}

.tech-card:nth-child(4n + 4) .tech-icon {
    color:
        #ea580c !important;

    background:
        rgba(245, 158, 11, 0.09) !important;

    border-color:
        rgba(245, 158, 11, 0.14) !important;
}

/* ===========================================================
TECH PILLS / TAGS
=========================================================== */

.tech-pill,
.tech-tag,
.stack-tag {
    color:
        #334155 !important;

    background:
        #ffffff !important;

    border:
        1px solid rgba(15, 23, 42, 0.08) !important;

    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.04);
}

.tech-pill:hover,
.tech-tag:hover,
.stack-tag:hover {
    color:
        var(--v3-primary) !important;

    border-color:
        rgba(79, 70, 229, 0.18) !important;

    background:
        rgba(79, 70, 229, 0.04) !important;
}

/* ===========================================================
FEATURE BLOCKS
=========================================================== */

.feature-card,
.feature-box {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        ) !important;
}

.feature-card i,
.feature-box i {
    color:
        var(--v3-primary);
}

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

.analytics-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        ) !important;
}

.analytics-card strong,
.analytics-card .value,
.analytics-card .number {
    color:
        var(--v3-heading) !important;
}

.analytics-card .positive {
    color:
        #059669 !important;
}

.analytics-card .negative {
    color:
        #e11d48 !important;
}

/* ===========================================================
PROGRESS BARS
=========================================================== */

.progress {
    background:
        #e2e8f0 !important;
}

.progress-bar {
    background:
        var(--v3-gradient) !important;
}

/* ===========================================================
DIVIDERS
=========================================================== */

hr {
    border-color:
        rgba(15, 23, 42, 0.08);
}

/* ===========================================================
TABLE FOUNDATION
=========================================================== */

.table {
    color:
        var(--v3-text);
}

.table > :not(caption) > * > * {
    color:
        var(--v3-text);

    background:
        rgba(255, 255, 255, 0.75);

    border-bottom-color:
        rgba(15, 23, 42, 0.07);
}

.table thead th {
    color:
        var(--v3-heading);

    background:
        #f1f5f9;
}

/* ===========================================================
PART 2 RESPONSIVE
=========================================================== */

@media (max-width: 991.98px) {

    .section,
    .dark-section,
    #services,
    #products,
    #technology {
        background-attachment:
            scroll !important;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .feature-box {
        box-shadow:
            0 12px 32px rgba(15, 23, 42, 0.065) !important;
    }

}

@media (max-width: 767.98px) {

    .section {
        background:
            #ffffff;
    }

    .dark-section,
    #products {
        background:
            linear-gradient(
                180deg,
                #f8fafc,
                #eef2ff
            ) !important;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .feature-box,
    .analytics-card {
        background:
            #ffffff !important;

        box-shadow:
            0 10px 26px rgba(15, 23, 42, 0.06) !important;
    }

}

@media (hover: none) {

    .service-card:hover,
    .product-card:hover,
    .tech-card:hover,
    .feature-card:hover,
    .feature-box:hover,
    .analytics-card:hover {
        box-shadow:
            var(--v3-shadow-sm) !important;
    }

}

/* ===========================================================
END ADS AI V3 LIGHT THEME — PART 2
=========================================================== */


/* ===========================================================
ADS AI V3 — LIGHTWEIGHT PREMIUM LIGHT THEME
PART 3 — PORTFOLIO + CONTACT + CTA + FOOTER + FORMS
=========================================================== */

/* ===========================================================
PORTFOLIO SECTION
=========================================================== */

#portfolio {
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(79, 70, 229, 0.065),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(6, 182, 212, 0.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        ) !important;
}

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

.portfolio-card {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fafc 100%
        ) !important;

    border:
        1px solid rgba(15, 23, 42, 0.075) !important;

    box-shadow:
        0 12px 34px rgba(15, 23, 42, 0.06) !important;
}

.portfolio-card:nth-child(4n + 1)::before {
    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #8b5cf6
        );
}

.portfolio-card:nth-child(4n + 2)::before {
    background:
        linear-gradient(
            90deg,
            #06b6d4,
            #2563eb
        );
}

.portfolio-card:nth-child(4n + 3)::before {
    background:
        linear-gradient(
            90deg,
            #10b981,
            #06b6d4
        );
}

.portfolio-card:nth-child(4n + 4)::before {
    background:
        linear-gradient(
            90deg,
            #f43f5e,
            #8b5cf6
        );
}

.portfolio-card:hover {
    border-color:
        rgba(79, 70, 229, 0.16) !important;

    box-shadow:
        0 22px 52px rgba(79, 70, 229, 0.12) !important;
}

/* ===========================================================
PORTFOLIO VISUAL / IMAGE AREA
=========================================================== */

.portfolio-image,
.portfolio-visual,
.project-image,
.project-visual {
    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #ecfeff
        ) !important;

    border-bottom:
        1px solid rgba(15, 23, 42, 0.06);
}

.portfolio-image::after,
.portfolio-visual::after,
.project-image::after,
.project-visual::after {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(79, 70, 229, 0.045)
        );
}

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

.portfolio-content,
.project-content {
    color:
        var(--v3-text);
}

.portfolio-content h3,
.portfolio-content h4,
.project-content h3,
.project-content h4 {
    color:
        var(--v3-heading) !important;
}

.portfolio-content p,
.project-content p {
    color:
        var(--v3-text) !important;
}

/* ===========================================================
PORTFOLIO TAGS
=========================================================== */

.portfolio-tag,
.project-tag,
.portfolio-tags span,
.project-tags span {
    color:
        var(--v3-primary) !important;

    background:
        rgba(79, 70, 229, 0.065) !important;

    border:
        1px solid rgba(79, 70, 229, 0.11) !important;
}

/* ===========================================================
TESTIMONIALS
=========================================================== */

.testimonial-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        ) !important;

    border:
        1px solid rgba(15, 23, 42, 0.075) !important;
}

.testimonial-card::before {
    background:
        linear-gradient(
            90deg,
            var(--v3-primary),
            var(--v3-violet),
            var(--v3-cyan)
        );
}

.testimonial-card blockquote,
.testimonial-card .quote,
.testimonial-card p {
    color:
        var(--v3-text) !important;
}

.testimonial-card strong,
.testimonial-card h4,
.testimonial-card h5 {
    color:
        var(--v3-heading) !important;
}

.testimonial-card small,
.testimonial-card span {
    color:
        var(--v3-muted);
}

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

.ecosystem-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        ) !important;
}

.ecosystem-card i {
    color:
        var(--v3-primary);
}

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

#contact {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(79, 70, 229, 0.09),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(6, 182, 212, 0.075),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #eef2ff 100%
        ) !important;

    color:
        var(--v3-text);
}

#contact h1,
#contact h2,
#contact h3,
#contact h4,
#contact h5,
#contact h6 {
    color:
        var(--v3-heading);
}

#contact p {
    color:
        var(--v3-text);
}

/* ===========================================================
CONTACT INFO CARDS
=========================================================== */

.contact-card {
    background:
        rgba(255, 255, 255, 0.92) !important;

    border:
        1px solid rgba(79, 70, 229, 0.1) !important;

    box-shadow:
        0 14px 38px rgba(15, 23, 42, 0.065) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

.contact-card i,
.contact-icon {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--v3-primary),
            var(--v3-violet)
        ) !important;

    box-shadow:
        0 10px 26px rgba(79, 70, 229, 0.18);
}

.contact-card a {
    color:
        var(--v3-primary);
}

.contact-card a:hover {
    color:
        var(--v3-violet);
}

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

.contact-form,
.form-card {
    background:
        rgba(255, 255, 255, 0.96) !important;

    border:
        1px solid rgba(79, 70, 229, 0.1) !important;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.09),
        0 10px 30px rgba(79, 70, 229, 0.055) !important;

    color:
        var(--v3-text);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.contact-form h3,
.contact-form h4,
.form-card h3,
.form-card h4 {
    color:
        var(--v3-heading) !important;
}

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

.form-label,
.contact-form label {
    color:
        #334155 !important;

    font-weight:
        600;
}

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

.form-control,
.form-select,
.contact-form input,
.contact-form textarea,
.contact-form select {
    color:
        var(--v3-heading) !important;

    background:
        #ffffff !important;

    border:
        1px solid rgba(15, 23, 42, 0.11) !important;

    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.02);

    color-scheme:
        light;
}

.form-control::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color:
        #94a3b8 !important;
}

.form-control:hover,
.form-select:hover,
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover {
    border-color:
        rgba(79, 70, 229, 0.24) !important;
}

.form-control:focus,
.form-select:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    color:
        var(--v3-heading) !important;

    background:
        #ffffff !important;

    border-color:
        var(--v3-primary) !important;

    box-shadow:
        0 0 0 4px rgba(79, 70, 229, 0.1),
        0 10px 24px rgba(79, 70, 229, 0.06) !important;

    outline:
        none;
}

/* ===========================================================
SELECT OPTIONS
=========================================================== */

.form-select option,
.contact-form select option {
    color:
        var(--v3-heading);

    background:
        #ffffff;
}

/* ===========================================================
FORM AUTOFILL — LIGHT
=========================================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
    -webkit-text-fill-color:
        var(--v3-heading) !important;

    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset !important;

    caret-color:
        var(--v3-heading);

    transition:
        background-color 9999s ease-in-out 0s;
}

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

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color:
        var(--v3-emerald) !important;

    box-shadow:
        0 0 0 3px rgba(16, 185, 129, 0.08);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color:
        var(--v3-rose) !important;

    box-shadow:
        0 0 0 3px rgba(244, 63, 94, 0.08);
}

.valid-feedback {
    color:
        #059669;
}

.invalid-feedback {
    color:
        #e11d48;
}

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

.cta-section {
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eef2ff
        ) !important;
}

.cta-box {
    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #4338ca 0%,
            #7c3aed 52%,
            #0891b2 100%
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.2) !important;

    box-shadow:
        0 28px 70px rgba(79, 70, 229, 0.22) !important;

    color:
        #ffffff;
}

.cta-box::before {
    content:
        "";

    position:
        absolute;

    width:
        340px;

    height:
        340px;

    top:
        -220px;

    right:
        -120px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.1);

    pointer-events:
        none;
}

.cta-box::after {
    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    left:
        -150px;

    bottom:
        -180px;

    border-radius:
        50%;

    background:
        rgba(6, 182, 212, 0.18);

    pointer-events:
        none;
}

.cta-box h1,
.cta-box h2,
.cta-box h3,
.cta-box h4,
.cta-box h5,
.cta-box h6,
.cta-box p {
    color:
        #ffffff !important;
}

.cta-box .btn-light {
    color:
        var(--v3-primary) !important;

    background:
        #ffffff !important;

    border:
        0 !important;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.16);
}

.cta-box .btn-light:hover {
    color:
        var(--v3-primary-dark) !important;

    background:
        #f8fafc !important;

    transform:
        translateY(-2px);
}

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

.footer {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        ) !important;

    border-top:
        1px solid rgba(15, 23, 42, 0.07);

    color:
        var(--v3-text);
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    color:
        var(--v3-heading) !important;
}

.footer p {
    color:
        var(--v3-text) !important;
}

.footer a {
    color:
        var(--v3-text) !important;
}

.footer a:hover {
    color:
        var(--v3-primary) !important;
}

.footer li a::before {
    background:
        linear-gradient(
            90deg,
            var(--v3-primary),
            var(--v3-cyan)
        );
}

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

.footer .logo,
.footer-brand,
.footer .navbar-brand {
    color:
        var(--v3-heading) !important;
}

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

.social-links a {
    color:
        var(--v3-primary) !important;

    background:
        #ffffff !important;

    border:
        1px solid rgba(79, 70, 229, 0.12) !important;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.055);
}

.social-links a:hover {
    color:
        #ffffff !important;

    background:
        var(--v3-gradient) !important;

    border-color:
        transparent !important;

    box-shadow:
        0 12px 30px rgba(79, 70, 229, 0.22) !important;
}

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

.footer-bottom {
    border-top:
        1px solid rgba(15, 23, 42, 0.07);

    color:
        var(--v3-muted);
}

/* ===========================================================
BACK TO TOP
=========================================================== */

#adsBackToTop,
#backToTop {
    color:
        #ffffff !important;

    background:
        var(--v3-gradient) !important;

    border:
        0 !important;

    box-shadow:
        0 14px 32px rgba(79, 70, 229, 0.24) !important;
}

#adsBackToTop:hover,
#backToTop:hover {
    box-shadow:
        0 18px 38px rgba(79, 70, 229, 0.32) !important;
}

/* ===========================================================
MODALS
=========================================================== */

.modal-content {
    color:
        var(--v3-text);

    background:
        #ffffff;

    border:
        1px solid rgba(15, 23, 42, 0.08);

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.16);
}

.modal-header,
.modal-footer {
    border-color:
        rgba(15, 23, 42, 0.07);
}

.modal-title {
    color:
        var(--v3-heading);
}

/* ===========================================================
DROPDOWNS
=========================================================== */

.dropdown-menu {
    color:
        var(--v3-text);

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid rgba(15, 23, 42, 0.08);

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.12);
}

.dropdown-item {
    color:
        #334155;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color:
        var(--v3-primary);

    background:
        rgba(79, 70, 229, 0.065);
}

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

.accordion-item {
    background:
        #ffffff;

    border-color:
        rgba(15, 23, 42, 0.08);
}

.accordion-button {
    color:
        var(--v3-heading);

    background:
        #ffffff;
}

.accordion-button:not(.collapsed) {
    color:
        var(--v3-primary);

    background:
        rgba(79, 70, 229, 0.055);

    box-shadow:
        none;
}

.accordion-body {
    color:
        var(--v3-text);
}

/* ===========================================================
ALERTS
=========================================================== */

.alert-success {
    color:
        #047857;

    background:
        #ecfdf5;

    border-color:
        #a7f3d0;
}

.alert-danger {
    color:
        #be123c;

    background:
        #fff1f2;

    border-color:
        #fecdd3;
}

.alert-info {
    color:
        #0e7490;

    background:
        #ecfeff;

    border-color:
        #a5f3fc;
}

/* ===========================================================
PART 3 RESPONSIVE
=========================================================== */

@media (max-width: 991.98px) {

    #portfolio,
    #contact {
        background-attachment:
            scroll !important;
    }

    .contact-form,
    .form-card {
        box-shadow:
            0 18px 45px rgba(15, 23, 42, 0.08) !important;
    }

    .cta-box {
        box-shadow:
            0 20px 50px rgba(79, 70, 229, 0.18) !important;
    }

}

@media (max-width: 767.98px) {

    #portfolio {
        background:
            #ffffff !important;
    }

    #contact {
        background:
            linear-gradient(
                180deg,
                #f8fafc,
                #eef2ff
            ) !important;
    }

    .portfolio-card,
    .contact-card,
    .contact-form,
    .form-card,
    .testimonial-card,
    .ecosystem-card {
        background:
            #ffffff !important;

        box-shadow:
            0 10px 28px rgba(15, 23, 42, 0.065) !important;
    }

    .cta-box {
        background:
            linear-gradient(
                135deg,
                #4338ca,
                #7c3aed 58%,
                #0891b2
            ) !important;
    }

}

@media (max-width: 576px) {

    .contact-form,
    .form-card {
        border-radius:
            20px;
    }

    .cta-box {
        border-radius:
            22px;
    }

    #adsBackToTop,
    #backToTop {
        box-shadow:
            0 10px 26px rgba(79, 70, 229, 0.22) !important;
    }

}

/* ===========================================================
END ADS AI V3 LIGHT THEME — PART 3
=========================================================== */


/* ===========================================================
ADS AI V3 — LIGHTWEIGHT PREMIUM LIGHT THEME
PART 4 — MOBILE RESPONSIVE + PERFORMANCE + FINAL POLISH
=========================================================== */

/* ===========================================================
GLOBAL OVERFLOW SAFETY
=========================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

/* ===========================================================
LIGHTWEIGHT RENDERING
=========================================================== */

.service-card,
.product-card,
.tech-card,
.feature-card,
.portfolio-card,
.contact-card,
.ecosystem-card,
.analytics-card,
.testimonial-card,
.feature-box {
    transform:
        translateZ(0);

    backface-visibility:
        hidden;
}

/* ===========================================================
FINAL BODY COLOR CORRECTION
=========================================================== */

body {
    color:
        var(--v3-text) !important;
}

main {
    background:
        var(--v3-bg);
}

/* ===========================================================
FINAL DARK TEXT OVERRIDES
=========================================================== */

.text-white:not(.btn):not(.badge) {
    color:
        var(--v3-heading) !important;
}

.text-light {
    color:
        var(--v3-text) !important;
}

.text-white-50 {
    color:
        var(--v3-muted) !important;
}

.dark-section .text-white,
.dark-section .text-light,
.dark-section .text-white-50 {
    color:
        var(--v3-text) !important;
}

/* Keep CTA text white */
.cta-box .text-white,
.cta-box .text-light,
.cta-box .text-white-50 {
    color:
        #ffffff !important;
}

/* ===========================================================
FINAL MUTED TEXT
=========================================================== */

.text-muted {
    color:
        var(--v3-muted) !important;
}

/* ===========================================================
FINAL LINK POLISH
=========================================================== */

section a:not(.btn) {
    text-decoration:
        none;
}

section a:not(.btn):hover {
    color:
        var(--v3-violet);
}

/* ===========================================================
PREMIUM CARD BORDER CORRECTION
=========================================================== */

.card {
    color:
        var(--v3-text);

    background:
        #ffffff;

    border:
        1px solid rgba(15, 23, 42, 0.075);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.055);
}

.card-title {
    color:
        var(--v3-heading);
}

.card-text {
    color:
        var(--v3-text);
}

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

.list-group-item {
    color:
        var(--v3-text);

    background:
        #ffffff;

    border-color:
        rgba(15, 23, 42, 0.07);
}

/* ===========================================================
BREADCRUMB
=========================================================== */

.breadcrumb-item,
.breadcrumb-item a {
    color:
        var(--v3-muted);
}

.breadcrumb-item.active {
    color:
        var(--v3-heading);
}

/* ===========================================================
PAGINATION
=========================================================== */

.page-link {
    color:
        var(--v3-primary);

    background:
        #ffffff;

    border-color:
        rgba(15, 23, 42, 0.08);
}

.page-link:hover {
    color:
        var(--v3-violet);

    background:
        #f8fafc;
}

.page-item.active .page-link {
    color:
        #ffffff;

    background:
        var(--v3-primary);

    border-color:
        var(--v3-primary);
}

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

.keyboard-navigation a:focus-visible,
.keyboard-navigation button:focus-visible,
.keyboard-navigation input:focus-visible,
.keyboard-navigation select:focus-visible,
.keyboard-navigation textarea:focus-visible,
a:focus-visible,
button:focus-visible {
    outline:
        3px solid rgba(79, 70, 229, 0.55);

    outline-offset:
        4px;
}

/* ===========================================================
DESKTOP PERFORMANCE POLISH
=========================================================== */

@media (min-width: 992px) {

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card,
    .contact-card,
    .ecosystem-card,
    .analytics-card,
    .testimonial-card,
    .feature-box {
        transition:
            transform 0.28s ease,
            box-shadow 0.28s ease,
            border-color 0.28s ease;
    }

    .service-card:hover,
    .product-card:hover,
    .tech-card:hover,
    .feature-card:hover,
    .portfolio-card:hover,
    .contact-card:hover,
    .ecosystem-card:hover,
    .analytics-card:hover,
    .testimonial-card:hover,
    .feature-box:hover {
        transform:
            translateY(-6px);
    }

}

/* ===========================================================
TABLET — 991PX
=========================================================== */

@media (max-width: 991.98px) {

    body {
        background:
            #f8fafc;
    }

    .header {
        background:
            rgba(255, 255, 255, 0.95);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }

    .navbar-collapse {
        max-height:
            calc(100vh - 100px);

        overflow-y:
            auto;

        overscroll-behavior:
            contain;
    }

    .hero {
        min-height:
            auto;
    }

    .hero .row {
        align-items:
            center;
    }

    .hero-card {
        max-width:
            680px;

        margin-left:
            auto;

        margin-right:
            auto;
    }

    .section-title {
        max-width:
            760px;

        margin-left:
            auto;

        margin-right:
            auto;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card,
    .contact-card {
        height:
            100%;
    }

}

/* ===========================================================
MOBILE — 767PX
=========================================================== */

@media (max-width: 767.98px) {

    html {
        scroll-padding-top:
            78px;
    }

    section[id] {
        scroll-margin-top:
            78px;
    }

    body {
        background:
            #ffffff;
    }

    /* Header */

    .header {
        padding:
            10px 0 !important;

        background:
            rgba(255, 255, 255, 0.97);

        border-bottom:
            1px solid rgba(15, 23, 42, 0.07);

        box-shadow:
            0 8px 24px rgba(15, 23, 42, 0.055);
    }

    .header.scrolled {
        padding:
            8px 0 !important;
    }

    /* Navbar */

    .navbar-collapse {
        margin-top:
            12px;

        padding:
            14px;

        border-radius:
            18px;

        background:
            #ffffff;

        border:
            1px solid rgba(79, 70, 229, 0.1);

        box-shadow:
            0 18px 45px rgba(15, 23, 42, 0.11);
    }

    .nav-link {
        color:
            #334155 !important;

        padding:
            11px 12px !important;

        border-radius:
            10px;
    }

    .nav-link:hover,
    .nav-link.active {
        color:
            var(--v3-primary) !important;

        background:
            rgba(79, 70, 229, 0.065);
    }

    .navbar-collapse .btn {
        width:
            100%;

        margin-top:
            10px;
    }

    /* Hero */

    .hero {
        min-height:
            auto;

        padding-top:
            118px;

        padding-bottom:
            68px;

        background:
            radial-gradient(
                circle at 18% 10%,
                rgba(79, 70, 229, 0.1),
                transparent 28%
            ),
            radial-gradient(
                circle at 88% 30%,
                rgba(6, 182, 212, 0.08),
                transparent 25%
            ),
            linear-gradient(
                180deg,
                #ffffff,
                #f8fafc
            );
    }

    .hero::before {
        opacity:
            0.28;
    }

    .hero::after {
        opacity:
            0.25;
    }

    .hero-tag {
        max-width:
            100%;

        white-space:
            normal;

        line-height:
            1.45;
    }

    .hero h1 {
        font-size:
            clamp(2.35rem, 10vw, 3.5rem) !important;

        line-height:
            1.06 !important;

        letter-spacing:
            -0.04em;
    }

    .hero p {
        font-size:
            1rem;

        line-height:
            1.75;
    }

    .hero-buttons,
    .hero-actions {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            12px;
    }

    .hero-buttons .btn,
    .hero-actions .btn {
        width:
            100%;

        margin:
            0 !important;

        justify-content:
            center;
    }

    .hero-stats {
        gap:
            18px;
    }

    .hero-card {
        margin-top:
            34px;

        padding:
            24px;

        border-radius:
            22px;

        animation:
            none !important;

        box-shadow:
            0 16px 38px rgba(15, 23, 42, 0.08),
            0 8px 22px rgba(79, 70, 229, 0.06) !important;
    }

    .terminal {
        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }

    /* Sections */

    .section {
        padding-top:
            72px;

        padding-bottom:
            72px;
    }

    .section-title {
        margin-bottom:
            38px;
    }

    .section-title h2 {
        font-size:
            clamp(2rem, 8vw, 2.7rem) !important;

        line-height:
            1.12;
    }

    .section-title p {
        font-size:
            1rem;

        line-height:
            1.7;
    }

    /* Cards */

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card,
    .contact-card,
    .ecosystem-card,
    .analytics-card,
    .testimonial-card,
    .feature-box {
        width:
            100%;

        max-width:
            100%;

        transform:
            none !important;

        animation:
            none !important;
    }

    /* Contact */

    .contact-form,
    .form-card {
        padding:
            24px !important;

        border-radius:
            22px;
    }

    .form-control,
    .form-select,
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        min-height:
            50px;

        font-size:
            16px !important;
    }

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

    /* CTA */

    .cta-section {
        padding-top:
            64px;

        padding-bottom:
            64px;
    }

    .cta-box {
        padding:
            46px 24px !important;

        border-radius:
            24px;
    }

    .cta-box h2 {
        font-size:
            clamp(2rem, 8vw, 2.8rem) !important;
    }

    .cta-box .btn {
        width:
            100%;
    }

    /* Footer */

    .footer {
        text-align:
            left;
    }

    .footer .row > * {
        margin-bottom:
            24px;
    }

    .social-links {
        flex-wrap:
            wrap;
    }

}

/* ===========================================================
SMALL MOBILE — 576PX
=========================================================== */

@media (max-width: 575.98px) {

    .container {
        width:
            100%;

        padding-left:
            18px;

        padding-right:
            18px;
    }

    .hero {
        padding-top:
            108px;

        padding-bottom:
            58px;
    }

    .hero h1 {
        font-size:
            clamp(2.15rem, 11vw, 3rem) !important;
    }

    .hero p {
        font-size:
            0.98rem;
    }

    .hero-card {
        padding:
            20px;

        border-radius:
            20px;
    }

    .hero-stats {
        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width:
            100%;
    }

    .hero-stats > * {
        min-width:
            0;
    }

    .section {
        padding-top:
            62px;

        padding-bottom:
            62px;
    }

    .section-title {
        margin-bottom:
            32px;
    }

    .section-title h2 {
        font-size:
            clamp(1.85rem, 9vw, 2.4rem) !important;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card,
    .contact-card,
    .ecosystem-card,
    .analytics-card,
    .testimonial-card,
    .feature-box {
        padding:
            22px !important;

        border-radius:
            20px;
    }

    .contact-form,
    .form-card {
        padding:
            20px !important;
    }

    .cta-box {
        padding:
            40px 20px !important;
    }

    #adsBackToTop,
    #backToTop {
        width:
            48px !important;

        height:
            48px !important;

        right:
            16px !important;

        bottom:
            16px !important;
    }

}

/* ===========================================================
VERY SMALL MOBILE — 380PX
=========================================================== */

@media (max-width: 380px) {

    .container {
        padding-left:
            15px;

        padding-right:
            15px;
    }

    .hero h1 {
        font-size:
            2.05rem !important;
    }

    .hero-tag {
        font-size:
            0.78rem;
    }

    .hero-card {
        padding:
            17px;
    }

    .section-title h2 {
        font-size:
            1.85rem !important;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card,
    .contact-card,
    .ecosystem-card,
    .analytics-card,
    .testimonial-card,
    .feature-box {
        padding:
            18px !important;
    }

    .contact-form,
    .form-card {
        padding:
            18px !important;
    }

    .cta-box {
        padding:
            34px 17px !important;
    }

}

/* ===========================================================
TOUCH DEVICE PERFORMANCE
=========================================================== */

@media (hover: none),
       (pointer: coarse) {

    #adsPointerSpotlight,
    #spotlight {
        display:
            none !important;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card,
    .contact-card,
    .ecosystem-card,
    .analytics-card,
    .testimonial-card,
    .feature-box {
        transform:
            none !important;

        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease !important;
    }

    .hero-card {
        animation:
            none !important;
    }

}

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

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

    html {
        scroll-behavior:
            auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}

/* ===========================================================
HIGH CONTRAST SUPPORT
=========================================================== */

@media (prefers-contrast: more) {

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card,
    .contact-card,
    .contact-form,
    .form-card {
        border-color:
            rgba(15, 23, 42, 0.22) !important;
    }

    .nav-link {
        color:
            #1e293b !important;
    }

}

/* ===========================================================
PRINT — CLEAN LIGHT OUTPUT
=========================================================== */

@media print {

    body {
        color:
            #111827 !important;

        background:
            #ffffff !important;
    }

    .header,
    .cta-section,
    .social-links,
    #adsBackToTop,
    #backToTop,
    #adsScrollProgress,
    #scrollProgress,
    #adsPointerSpotlight,
    #spotlight {
        display:
            none !important;
    }

    .section,
    .dark-section,
    #services,
    #products,
    #technology,
    #portfolio,
    #contact,
    .footer {
        color:
            #111827 !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;
    }

    .service-card,
    .product-card,
    .tech-card,
    .feature-card,
    .portfolio-card,
    .contact-card {
        box-shadow:
            none !important;

        border:
            1px solid #d1d5db !important;
    }

}

/* ===========================================================
FINAL V3 LIGHT THEME ENFORCEMENT
=========================================================== */

body,
.section,
.dark-section,
#services,
#products,
#technology,
#portfolio,
#contact,
.footer {
    color:
        var(--v3-text);
}

.section-title h2,
.service-card h3,
.product-card h3,
.tech-card h3,
.feature-card h3,
.portfolio-card h3,
.contact-card h3 {
    color:
        var(--v3-heading) !important;
}

/* ===========================================================
END ADS AI V3 LIGHT THEME — PART 4
=========================================================== */


/* ===========================================================
ADS AI V3 — CONTACT FIELD BORDER VISIBILITY FIX
=========================================================== */

#contact .form-control,
#contact .form-select,
#contact input,
#contact textarea,
#contact select,
.contact-form .form-control,
.contact-form .form-select,
.contact-form input,
.contact-form textarea,
.contact-form select {
    color: #0f172a !important;

    background:
        #ffffff !important;

    border:
        1.5px solid #94a3b8 !important;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        inset 0 0 0 1px rgba(15, 23, 42, 0.015) !important;

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}

#contact .form-control:hover,
#contact .form-select:hover,
#contact input:hover,
#contact textarea:hover,
#contact select:hover,
.contact-form .form-control:hover,
.contact-form .form-select:hover,
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover {
    border-color:
        #64748b !important;
}

#contact .form-control:focus,
#contact .form-select:focus,
#contact input:focus,
#contact textarea:focus,
#contact select:focus,
.contact-form .form-control:focus,
.contact-form .form-select:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    color:
        #0f172a !important;

    background:
        #ffffff !important;

    border-color:
        #4f46e5 !important;

    box-shadow:
        0 0 0 4px rgba(79, 70, 229, 0.12),
        0 8px 20px rgba(79, 70, 229, 0.07) !important;

    outline:
        none !important;
}

#contact .form-control::placeholder,
#contact input::placeholder,
#contact textarea::placeholder,
.contact-form .form-control::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color:
        #94a3b8 !important;

    opacity:
        1;
}

#contact label,
.contact-form label,
#contact .form-label,
.contact-form .form-label {
    color:
        #334155 !important;

    font-weight:
        600;
}

/* Mobile field visibility */

@media (max-width: 767.98px) {

    #contact .form-control,
    #contact .form-select,
    #contact input,
    #contact textarea,
    #contact select,
    .contact-form .form-control,
    .contact-form .form-select,
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        border-width:
            1.5px !important;

        border-color:
            #94a3b8 !important;

        min-height:
            50px;
    }

}

/* ===========================================================
END ADS AI V3 CONTACT FIELD BORDER VISIBILITY FIX
=========================================================== */


/* ===========================================================
ADS AI V3 — HERO CTA AND STATS SPACING FIX
=========================================================== */

.hero-buttons,
.hero-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        28px;
}

.hero-buttons + .hero-stats,
.hero-actions + .hero-stats {
    margin-top:
        42px !important;
}

.hero-stats {
    display:
        flex;

    align-items:
        flex-start;

    flex-wrap:
        wrap;

    gap:
        34px;

    margin-top:
        42px;
}

.hero-stats > * {
    min-width:
        110px;
}

@media (max-width: 767.98px) {

    .hero-buttons,
    .hero-actions {
        margin-top:
            24px;

        gap:
            12px;
    }

    .hero-buttons + .hero-stats,
    .hero-actions + .hero-stats,
    .hero-stats {
        margin-top:
            34px !important;
    }

    .hero-stats {
        gap:
            22px;
    }

}

@media (max-width: 575.98px) {

    .hero-buttons,
    .hero-actions {
        width:
            100%;
    }

    .hero-buttons .btn,
    .hero-actions .btn {
        width:
            100%;
    }

    .hero-stats {
        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width:
            100%;

        gap:
            22px 16px;
    }

    .hero-stats > * {
        min-width:
            0;
    }

}

/* ===========================================================
END ADS AI V3 — HERO CTA AND STATS SPACING FIX
=========================================================== */


/* ===========================================================
ADS AI V3 — AI PLAYGROUND PREMIUM ORB CSS
Lightweight modern intelligence playground
=========================================================== */

.hero{

position:relative;

isolation:isolate;

overflow:hidden;

}

/* ===========================================================
PLAYGROUND ROOT
=========================================================== */

.ads-ai-playground{

position:absolute;

inset:0;

z-index:0;

overflow:hidden;

pointer-events:none;

contain:layout paint;

}

.ads-ai-playground__scene{

position:absolute;

inset:0;

overflow:hidden;

}

/* ===========================================================
CONNECTION CANVAS
=========================================================== */

.ads-ai-playground__connections{

position:absolute;

inset:0;

width:100%;

height:100%;

z-index:1;

opacity:.72;

pointer-events:none;

}

/* ===========================================================
KEEP HERO CONTENT ABOVE PLAYGROUND
=========================================================== */

.hero > .container{

position:relative;

z-index:4;

}

/* ===========================================================
ORB BASE
=========================================================== */

.ads-ai-orb{

--orb-size:72px;
--orb-x:50%;
--orb-y:50%;
--orb-color:#4f7cff;
--orb-color-soft:rgba(79,124,255,.24);

position:absolute;

left:var(--orb-x);

top:var(--orb-y);

width:var(--orb-size);

height:var(--orb-size);

z-index:2;

border-radius:50%;

transform:
translate3d(-50%,-50%,0);

will-change:transform;

pointer-events:none;

user-select:none;

}

/* ===========================================================
ORB HALO
=========================================================== */

.ads-ai-orb__halo{

position:absolute;

inset:-18%;

border-radius:50%;

background:
radial-gradient(
circle,
var(--orb-color-soft) 0%,
rgba(255,255,255,.08) 36%,
transparent 72%
);

filter:
blur(10px);

opacity:.82;

animation:
adsAiHaloPulse 3.8s ease-in-out infinite;

}

/* ===========================================================
ORB SURFACE
=========================================================== */

.ads-ai-orb__surface{

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

border-radius:50%;

background:
radial-gradient(
circle at 28% 22%,
rgba(255,255,255,.98) 0%,
rgba(255,255,255,.72) 12%,
transparent 28%
),
linear-gradient(
145deg,
rgba(255,255,255,.94) 0%,
rgba(255,255,255,.58) 24%,
var(--orb-color) 100%
);

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

box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset -10px -14px 24px rgba(15,23,42,.12),
0 10px 28px var(--orb-color-soft),
0 18px 48px rgba(15,23,42,.10);

backdrop-filter:
blur(8px);

-webkit-backdrop-filter:
blur(8px);

}

/* ===========================================================
ORB INNER RING
=========================================================== */

.ads-ai-orb__surface::before{

content:"";

position:absolute;

inset:9%;

border-radius:50%;

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

box-shadow:
inset 0 0 16px rgba(255,255,255,.18);

opacity:.75;

}

/* ===========================================================
ORB MICRO GRID
=========================================================== */

.ads-ai-orb__surface::after{

content:"";

position:absolute;

inset:0;

border-radius:50%;

background-image:
linear-gradient(
rgba(255,255,255,.12) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.12) 1px,
transparent 1px
);

background-size:
12px 12px;

mask-image:
radial-gradient(
circle,
#000 0%,
rgba(0,0,0,.7) 52%,
transparent 82%
);

-webkit-mask-image:
radial-gradient(
circle,
#000 0%,
rgba(0,0,0,.7) 52%,
transparent 82%
);

opacity:.32;

}

/* ===========================================================
ORB SHINE
=========================================================== */

.ads-ai-orb__shine{

position:absolute;

top:10%;

left:17%;

width:34%;

height:20%;

border-radius:50%;

background:
linear-gradient(
135deg,
rgba(255,255,255,.98),
rgba(255,255,255,.08)
);

filter:
blur(1px);

transform:
rotate(-24deg);

opacity:.9;

}

/* ===========================================================
ORB LABEL
=========================================================== */

.ads-ai-orb__label{

position:relative;

z-index:4;

display:flex;

align-items:center;

justify-content:center;

max-width:80%;

font-size:
clamp(10px,1vw,15px);

font-weight:800;

line-height:1;

letter-spacing:-.02em;

color:#ffffff;

text-shadow:
0 1px 2px rgba(15,23,42,.28),
0 0 12px rgba(255,255,255,.24);

}

/* ===========================================================
AI CORE ORB
=========================================================== */

.ads-ai-orb--ai{

--orb-size:96px;
--orb-x:82%;
--orb-y:23%;
--orb-color:#6d5dfc;
--orb-color-soft:rgba(109,93,252,.32);

}

.ads-ai-orb--ai .ads-ai-orb__label{

font-size:24px;

letter-spacing:-.06em;

}

/* ===========================================================
ERP ORB
=========================================================== */

.ads-ai-orb--erp{

--orb-size:78px;
--orb-x:72%;
--orb-y:69%;
--orb-color:#2563eb;
--orb-color-soft:rgba(37,99,235,.28);

}

/* ===========================================================
CRM ORB
=========================================================== */

.ads-ai-orb--crm{

--orb-size:72px;
--orb-x:93%;
--orb-y:57%;
--orb-color:#ec4899;
--orb-color-soft:rgba(236,72,153,.26);

}

/* ===========================================================
CLOUD ORB
=========================================================== */

.ads-ai-orb--cloud{

--orb-size:68px;
--orb-x:60%;
--orb-y:34%;
--orb-color:#06b6d4;
--orb-color-soft:rgba(6,182,212,.28);

}

/* ===========================================================
AUTOMATION ORB
=========================================================== */

.ads-ai-orb--automation{

--orb-size:64px;
--orb-x:89%;
--orb-y:82%;
--orb-color:#f97316;
--orb-color-soft:rgba(249,115,22,.26);

}

/* ===========================================================
DATA ORB
=========================================================== */

.ads-ai-orb--data{

--orb-size:58px;
--orb-x:54%;
--orb-y:79%;
--orb-color:#10b981;
--orb-color-soft:rgba(16,185,129,.26);

}

/* ===========================================================
SUBTLE STATIC FLOAT BEFORE JS PHYSICS
=========================================================== */

.ads-ai-orb--ai{

animation:
adsAiOrbFloatA 6.8s ease-in-out infinite;

}

.ads-ai-orb--erp{

animation:
adsAiOrbFloatB 7.6s ease-in-out infinite;

}

.ads-ai-orb--crm{

animation:
adsAiOrbFloatC 6.2s ease-in-out infinite;

}

.ads-ai-orb--cloud{

animation:
adsAiOrbFloatB 8.2s ease-in-out infinite reverse;

}

.ads-ai-orb--automation{

animation:
adsAiOrbFloatA 7.2s ease-in-out infinite reverse;

}

.ads-ai-orb--data{

animation:
adsAiOrbFloatC 8.8s ease-in-out infinite;

}

/* ===========================================================
PARTICLES
=========================================================== */

.ads-ai-particle{

position:absolute;

z-index:1;

width:7px;

height:7px;

border-radius:50%;

background:
rgba(79,124,255,.5);

box-shadow:
0 0 16px rgba(79,124,255,.38);

opacity:.55;

animation:
adsAiParticleFloat 7s ease-in-out infinite;

}

.ads-ai-particle--1{

left:58%;

top:18%;

}

.ads-ai-particle--2{

left:69%;

top:48%;

width:5px;

height:5px;

animation-delay:-1.2s;

}

.ads-ai-particle--3{

left:78%;

top:87%;

width:9px;

height:9px;

background:
rgba(236,72,153,.38);

animation-delay:-2.8s;

}

.ads-ai-particle--4{

left:95%;

top:31%;

width:5px;

height:5px;

background:
rgba(6,182,212,.45);

animation-delay:-4s;

}

.ads-ai-particle--5{

left:48%;

top:61%;

width:6px;

height:6px;

background:
rgba(16,185,129,.42);

animation-delay:-5.2s;

}

.ads-ai-particle--6{

left:87%;

top:14%;

width:4px;

height:4px;

background:
rgba(249,115,22,.44);

animation-delay:-3.4s;

}

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

@keyframes adsAiHaloPulse{

0%,
100%{

transform:
scale(.94);

opacity:.56;

}

50%{

transform:
scale(1.12);

opacity:.92;

}

}

@keyframes adsAiOrbFloatA{

0%,
100%{

transform:
translate3d(-50%,-50%,0)
translate3d(0,0,0)
rotate(0deg);

}

50%{

transform:
translate3d(-50%,-50%,0)
translate3d(12px,-16px,0)
rotate(4deg);

}

}

@keyframes adsAiOrbFloatB{

0%,
100%{

transform:
translate3d(-50%,-50%,0)
translate3d(0,0,0)
rotate(0deg);

}

50%{

transform:
translate3d(-50%,-50%,0)
translate3d(-15px,12px,0)
rotate(-5deg);

}

}

@keyframes adsAiOrbFloatC{

0%,
100%{

transform:
translate3d(-50%,-50%,0)
translate3d(0,0,0);

}

33%{

transform:
translate3d(-50%,-50%,0)
translate3d(10px,-9px,0);

}

66%{

transform:
translate3d(-50%,-50%,0)
translate3d(-8px,13px,0);

}

}

@keyframes adsAiParticleFloat{

0%,
100%{

transform:
translate3d(0,0,0)
scale(.8);

opacity:.25;

}

50%{

transform:
translate3d(8px,-18px,0)
scale(1.2);

opacity:.72;

}

}

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

@media(max-width:991.98px){

.ads-ai-playground{

opacity:.72;

}

.ads-ai-orb--ai{

--orb-size:82px;
--orb-x:84%;
--orb-y:20%;

}

.ads-ai-orb--erp{

--orb-size:66px;
--orb-x:72%;
--orb-y:73%;

}

.ads-ai-orb--crm{

--orb-size:62px;
--orb-x:92%;
--orb-y:57%;

}

.ads-ai-orb--cloud{

--orb-size:58px;
--orb-x:63%;
--orb-y:39%;

}

.ads-ai-orb--automation{

--orb-size:54px;
--orb-x:88%;
--orb-y:87%;

}

.ads-ai-orb--data{

--orb-size:50px;
--orb-x:56%;
--orb-y:84%;

}

}

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

@media(max-width:767.98px){

.ads-ai-playground{

opacity:.58;

}

.ads-ai-orb--ai{

--orb-size:68px;
--orb-x:84%;
--orb-y:17%;

}

.ads-ai-orb--erp{

--orb-size:54px;
--orb-x:74%;
--orb-y:77%;

}

.ads-ai-orb--crm{

--orb-size:50px;
--orb-x:91%;
--orb-y:54%;

}

.ads-ai-orb--cloud{

--orb-size:48px;
--orb-x:68%;
--orb-y:38%;

}

.ads-ai-orb--automation{

display:none;

}

.ads-ai-orb--data{

display:none;

}

.ads-ai-particle--3,
.ads-ai-particle--5,
.ads-ai-particle--6{

display:none;

}

.ads-ai-orb__label{

font-size:9px;

}

.ads-ai-orb--ai .ads-ai-orb__label{

font-size:18px;

}

}

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

@media(max-width:420px){

.ads-ai-playground{

opacity:.48;

}

.ads-ai-orb--ai{

--orb-size:60px;
--orb-x:85%;
--orb-y:15%;

}

.ads-ai-orb--erp{

--orb-size:48px;
--orb-x:78%;
--orb-y:81%;

}

.ads-ai-orb--crm{

--orb-size:44px;
--orb-x:91%;
--orb-y:58%;

}

.ads-ai-orb--cloud{

--orb-size:42px;
--orb-x:69%;
--orb-y:40%;

}

}

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

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

.ads-ai-orb,
.ads-ai-orb__halo,
.ads-ai-particle{

animation:none !important;

}

}

/* ===========================================================
END ADS AI V3 — AI PLAYGROUND PREMIUM ORB CSS
=========================================================== */

/* ===========================================================
ADS AI V3 - AI PLAYGROUND POINTER REACTION CSS
=========================================================== */

.ads-ai-orb{

--ads-pointer-x:0px;
--ads-pointer-y:0px;

}

.ads-ai-orb__surface{

transform:
translate3d(
var(--ads-pointer-x),
var(--ads-pointer-y),
0
);

transition:
transform .22s ease-out;

will-change:transform;

}

@media(hover:none),
(pointer:coarse){

.ads-ai-orb__surface{

transform:none;

transition:none;

}

}

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

.ads-ai-orb__surface{

transform:none !important;

transition:none !important;

}

}

/* ===========================================================
END ADS AI V3 - AI PLAYGROUND POINTER REACTION CSS
=========================================================== */

/* ===========================================================
ADS AI V3 - PLAYGROUND STACKING VISIBILITY FIX
Keep animated orbs above hero decorative layers
and below primary hero content
=========================================================== */

.hero{

position:relative;

isolation:isolate;

overflow:hidden;

}

.hero::before,
.hero::after{

z-index:0;

pointer-events:none;

}

.ads-ai-playground{

z-index:2 !important;

opacity:1 !important;

visibility:visible !important;

display:block !important;

}

.ads-ai-playground__scene{

z-index:2;

visibility:visible !important;

}

.ads-ai-playground__connections{

z-index:1;

}

.ads-ai-orb{

z-index:3 !important;

opacity:1 !important;

visibility:visible !important;

display:block !important;

}

.ads-ai-orb__surface{

opacity:1 !important;

visibility:visible !important;

}

.hero > .container{

position:relative;

z-index:4;

}

/* Mobile visibility tuning */

@media(max-width:991.98px){

.ads-ai-playground{

opacity:.88 !important;

}

}

@media(max-width:767.98px){

.ads-ai-playground{

opacity:.78 !important;

}

}

@media(max-width:420px){

.ads-ai-playground{

opacity:.68 !important;

}

}

/* ===========================================================
END ADS AI V3 - PLAYGROUND STACKING VISIBILITY FIX
=========================================================== */





/* ===========================================================
ADS AI V3 - ORB 5 SECOND BLAST LIFECYCLE
Small visible balls on desktop/mobile
Blast after five seconds and vanish
=========================================================== */

#adsAiPlayground{

position:absolute !important;
inset:0 !important;

display:block !important;
visibility:visible !important;
opacity:1 !important;

z-index:2 !important;

overflow:hidden !important;
pointer-events:none !important;

}

#adsAiPlaygroundScene{

position:absolute !important;
inset:0 !important;

display:block !important;
visibility:visible !important;
opacity:1 !important;

overflow:hidden !important;

z-index:2 !important;

}

#adsAiPlaygroundScene .ads-ai-orb{

--orb-size:52px;

position:absolute !important;

width:var(--orb-size) !important;
height:var(--orb-size) !important;

min-width:var(--orb-size) !important;
min-height:var(--orb-size) !important;

display:block !important;
visibility:visible !important;
opacity:.92 !important;

border-radius:50% !important;

z-index:3 !important;

pointer-events:none !important;

transform:
translate3d(-50%,-50%,0);

transform-origin:center center !important;

will-change:
transform,
opacity,
filter;

}

/* Keep the premium existing inner orb artwork visible */

#adsAiPlaygroundScene .ads-ai-orb__surface{

position:absolute !important;
inset:0 !important;

width:100% !important;
height:100% !important;

display:block !important;
visibility:visible !important;
opacity:1 !important;

border-radius:50% !important;

}

/* Reliable fallback visual behind existing premium surface */

#adsAiPlaygroundScene .ads-ai-orb::before{

content:"";

position:absolute;
inset:2px;

border-radius:50%;

background:
radial-gradient(
circle at 30% 24%,
rgba(255,255,255,.98) 0 7%,
rgba(255,255,255,.38) 8% 18%,
rgba(124,58,237,.92) 42%,
rgba(6,182,212,.88) 72%,
rgba(15,23,42,.96) 100%
);

border:
2px solid rgba(255,255,255,.82);

box-shadow:
0 0 0 3px rgba(124,58,237,.16),
0 8px 22px rgba(79,70,229,.24);

z-index:-1;

}

/* Existing labels remain readable */

#adsAiPlaygroundScene .ads-ai-orb__label{

display:flex !important;

align-items:center !important;
justify-content:center !important;

visibility:visible !important;
opacity:1 !important;

font-size:8px !important;
font-weight:800 !important;

}

/* Desktop initial distribution */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="ai"]{

left:10%;
top:22%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="erp"]{

left:25%;
top:72%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="crm"]{

left:42%;
top:18%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="cloud"]{

left:62%;
top:72%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="automation"]{

left:78%;
top:24%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="data"]{

left:91%;
top:68%;

}

/* Blast state */

#adsAiPlayground.ads-ai-playground--blast
.ads-ai-orb{

animation:
adsAiOrbBlast .72s
cubic-bezier(.16,.84,.32,1)
forwards !important;

}

/* Slight stagger creates a richer explosion */

#adsAiPlayground.ads-ai-playground--blast
.ads-ai-orb:nth-of-type(2){

animation-delay:.04s !important;

}

#adsAiPlayground.ads-ai-playground--blast
.ads-ai-orb:nth-of-type(3){

animation-delay:.08s !important;

}

#adsAiPlayground.ads-ai-playground--blast
.ads-ai-orb:nth-of-type(4){

animation-delay:.12s !important;

}

#adsAiPlayground.ads-ai-playground--blast
.ads-ai-orb:nth-of-type(5){

animation-delay:.16s !important;

}

#adsAiPlayground.ads-ai-playground--blast
.ads-ai-orb:nth-of-type(6){

animation-delay:.20s !important;

}

@keyframes adsAiOrbBlast{

0%{

opacity:.92;

filter:
brightness(1)
blur(0);

}

28%{

opacity:1;

filter:
brightness(2.2)
blur(0);

}

58%{

opacity:.88;

filter:
brightness(2.8)
blur(1px);

}

100%{

opacity:0;

filter:
brightness(4)
blur(10px);

transform:
translate3d(-50%,-50%,0)
scale(3.4)
rotate(32deg);

visibility:hidden;

}

}

/* Completely remove playground after blast */

#adsAiPlayground.ads-ai-playground--vanished{

opacity:0 !important;
visibility:hidden !important;
display:none !important;

}

/* Tablet */

@media(max-width:991.98px){

#adsAiPlaygroundScene .ads-ai-orb{

--orb-size:44px;

}

}

/* Mobile */

@media(max-width:576px){

#adsAiPlaygroundScene .ads-ai-orb{

--orb-size:36px;

opacity:.82 !important;

}

#adsAiPlaygroundScene .ads-ai-orb__label{

font-size:6px !important;

}

/* Keep mobile balls away from extreme clipping */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="ai"]{

left:10%;
top:18%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="erp"]{

left:18%;
top:70%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="crm"]{

left:38%;
top:28%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="cloud"]{

left:62%;
top:72%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="automation"]{

left:78%;
top:24%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="data"]{

left:88%;
top:62%;

}

}

/* Very small phones */

@media(max-width:380px){

#adsAiPlaygroundScene .ads-ai-orb{

--orb-size:32px;

}

}

/* Reduced motion:
show briefly, then simple fade instead of explosive scale */

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

#adsAiPlayground.ads-ai-playground--blast
.ads-ai-orb{

animation:
adsAiOrbReducedExit .3s linear forwards !important;

}

@keyframes adsAiOrbReducedExit{

to{

opacity:0;
visibility:hidden;

}

}

}

/* ===========================================================
END ADS AI V3 - ORB 5 SECOND BLAST LIFECYCLE
=========================================================== */

/* ===========================================================
ADS AI V3 - PROVEN VISIBLE BALL FACE FIX
Direct wrapper painting based on successful geometry test
=========================================================== */

#adsAiPlayground{

display:block !important;
visibility:visible !important;
opacity:1 !important;

z-index:20 !important;

}

#adsAiPlaygroundScene{

display:block !important;
visibility:visible !important;
opacity:1 !important;

z-index:21 !important;

}

#adsAiPlaygroundScene .ads-ai-orb{

--orb-size:44px;

display:block !important;
visibility:visible !important;
opacity:1 !important;

width:var(--orb-size) !important;
height:var(--orb-size) !important;

min-width:var(--orb-size) !important;
min-height:var(--orb-size) !important;

border-radius:50% !important;

/*
CRITICAL:
Paint directly on wrapper.
This is the same rendering method that visibly worked.
*/

background:
radial-gradient(
circle at 32% 26%,
#ffffff 0 7%,
rgba(255,255,255,.82) 8% 14%,
#8b5cf6 28%,
#6366f1 52%,
#06b6d4 78%,
#0f172a 100%
) !important;

border:
2px solid rgba(255,255,255,.92) !important;

box-shadow:
0 0 0 3px rgba(139,92,246,.20),
0 0 18px rgba(99,102,241,.42),
0 8px 22px rgba(15,23,42,.22) !important;

z-index:50 !important;

}

/*
Disable hidden negative fallback.
The ball face is now painted directly on wrapper.
*/

#adsAiPlaygroundScene .ads-ai-orb::before{

display:none !important;

}

/*
Keep existing premium surface optional,
but never depend on it for visibility.
*/

#adsAiPlaygroundScene .ads-ai-orb__surface{

display:block !important;
visibility:visible !important;
opacity:.34 !important;

}

/* Label always above ball face */

#adsAiPlaygroundScene .ads-ai-orb__label{

display:flex !important;
visibility:visible !important;
opacity:1 !important;

align-items:center !important;
justify-content:center !important;

position:absolute !important;
inset:0 !important;

color:#ffffff !important;

font-size:7px !important;
font-weight:900 !important;

text-shadow:
0 1px 4px rgba(15,23,42,.65);

z-index:80 !important;

}

/* Desktop */

@media(min-width:992px){

#adsAiPlaygroundScene .ads-ai-orb{

--orb-size:44px;

}

}

/* Tablet */

@media(min-width:577px) and (max-width:991.98px){

#adsAiPlaygroundScene .ads-ai-orb{

--orb-size:38px;

}

}

/* Mobile */

@media(max-width:576px){

#adsAiPlaygroundScene .ads-ai-orb{

--orb-size:32px;

}

#adsAiPlaygroundScene .ads-ai-orb__label{

font-size:6px !important;

}

}

/* Very small mobile */

@media(max-width:380px){

#adsAiPlaygroundScene .ads-ai-orb{

--orb-size:28px;

}

}

/* ===========================================================
END ADS AI V3 - PROVEN VISIBLE BALL FACE FIX
=========================================================== */

/* ===========================================================
ADS AI V3 - EXACT 5 SECOND VISIBILITY LOCK
=========================================================== */

/*
Initial state:
force playground and balls visible.
*/

#adsAiPlayground:not(.ads-ai-playground--blast):not(.ads-ai-playground--vanished){

display:block !important;
visibility:visible !important;
opacity:1 !important;

}

#adsAiPlayground:not(.ads-ai-playground--blast):not(.ads-ai-playground--vanished)
.ads-ai-orb{

display:block !important;
visibility:visible !important;
opacity:1 !important;

animation:none !important;

}

/*
Direct visible ball face.
Do not depend on inner surface.
*/

#adsAiPlayground:not(.ads-ai-playground--blast):not(.ads-ai-playground--vanished)
.ads-ai-orb{

background:
radial-gradient(
circle at 30% 24%,
#ffffff 0 7%,
#f0abfc 8% 16%,
#8b5cf6 34%,
#6366f1 58%,
#06b6d4 82%,
#0f172a 100%
) !important;

border:
2px solid rgba(255,255,255,.95) !important;

box-shadow:
0 0 0 3px rgba(139,92,246,.18),
0 0 16px rgba(99,102,241,.45),
0 8px 20px rgba(15,23,42,.20) !important;

}

/*
Blast only after JS adds the blast class.
*/

#adsAiPlayground.ads-ai-playground--blast
.ads-ai-orb{

visibility:visible !important;

animation:
adsAiExactFiveSecondBlast
700ms cubic-bezier(.16,.84,.32,1)
forwards !important;

}

@keyframes adsAiExactFiveSecondBlast{

0%{

opacity:1;

filter:
brightness(1);

}

35%{

opacity:1;

filter:
brightness(2.8);

}

100%{

opacity:0;

filter:
brightness(4)
blur(8px);

transform:
translate3d(-50%,-50%,0)
scale(3);

}

}

#adsAiPlayground.ads-ai-playground--vanished{

display:none !important;
visibility:hidden !important;
opacity:0 !important;

}

/* ===========================================================
END ADS AI V3 - EXACT 5 SECOND VISIBILITY LOCK
=========================================================== */

/* ===========================================================
ADS AI V3 - EXTRA PREMIUM COLOR BALLS
Same size as existing proven visible balls
=========================================================== */

/* Vision - hot pink */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="vision"]{

left:16%;
top:40%;

background:
radial-gradient(
circle at 30% 24%,
#ffffff 0 7%,
#fbcfe8 8% 15%,
#f472b6 30%,
#ec4899 56%,
#be185d 78%,
#500724 100%
) !important;

box-shadow:
0 0 0 3px rgba(236,72,153,.18),
0 0 18px rgba(236,72,153,.52),
0 8px 20px rgba(80,7,36,.20) !important;

}

/* Agents - vivid orange */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="agents"]{

left:31%;
top:84%;

background:
radial-gradient(
circle at 30% 24%,
#ffffff 0 7%,
#fed7aa 8% 15%,
#fb923c 30%,
#f97316 56%,
#ea580c 78%,
#431407 100%
) !important;

box-shadow:
0 0 0 3px rgba(249,115,22,.18),
0 0 18px rgba(249,115,22,.52),
0 8px 20px rgba(67,20,7,.20) !important;

}

/* API - emerald */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="api"]{

left:48%;
top:42%;

background:
radial-gradient(
circle at 30% 24%,
#ffffff 0 7%,
#a7f3d0 8% 15%,
#34d399 30%,
#10b981 56%,
#047857 78%,
#022c22 100%
) !important;

box-shadow:
0 0 0 3px rgba(16,185,129,.18),
0 0 18px rgba(16,185,129,.52),
0 8px 20px rgba(2,44,34,.20) !important;

}

/* RAG - premium gold */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="rag"]{

left:56%;
top:14%;

background:
radial-gradient(
circle at 30% 24%,
#ffffff 0 7%,
#fef3c7 8% 15%,
#fbbf24 30%,
#f59e0b 56%,
#b45309 78%,
#451a03 100%
) !important;

box-shadow:
0 0 0 3px rgba(245,158,11,.18),
0 0 18px rgba(245,158,11,.55),
0 8px 20px rgba(69,26,3,.20) !important;

}

/* Mobile - electric blue */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="mobile"]{

left:69%;
top:44%;

background:
radial-gradient(
circle at 30% 24%,
#ffffff 0 7%,
#bae6fd 8% 15%,
#38bdf8 30%,
#0ea5e9 56%,
#0369a1 78%,
#082f49 100%
) !important;

box-shadow:
0 0 0 3px rgba(14,165,233,.18),
0 0 18px rgba(14,165,233,.55),
0 8px 20px rgba(8,47,73,.20) !important;

}

/* Security - deep violet */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="security"]{

left:84%;
top:48%;

background:
radial-gradient(
circle at 30% 24%,
#ffffff 0 7%,
#ddd6fe 8% 15%,
#a78bfa 30%,
#8b5cf6 56%,
#6d28d9 78%,
#2e1065 100%
) !important;

box-shadow:
0 0 0 3px rgba(139,92,246,.18),
0 0 18px rgba(139,92,246,.55),
0 8px 20px rgba(46,16,101,.20) !important;

}

/* Growth - neon lime */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="growth"]{

left:72%;
top:88%;

background:
radial-gradient(
circle at 30% 24%,
#ffffff 0 7%,
#d9f99d 8% 15%,
#a3e635 30%,
#84cc16 56%,
#4d7c0f 78%,
#1a2e05 100%
) !important;

box-shadow:
0 0 0 3px rgba(132,204,22,.18),
0 0 18px rgba(132,204,22,.55),
0 8px 20px rgba(26,46,5,.20) !important;

}

/* Neural - rose red */

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="neural"]{

left:94%;
top:34%;

background:
radial-gradient(
circle at 30% 24%,
#ffffff 0 7%,
#fecdd3 8% 15%,
#fb7185 30%,
#f43f5e 56%,
#be123c 78%,
#4c0519 100%
) !important;

box-shadow:
0 0 0 3px rgba(244,63,94,.18),
0 0 18px rgba(244,63,94,.55),
0 8px 20px rgba(76,5,25,.20) !important;

}

/* Mobile-safe positions */

@media(max-width:576px){

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="vision"]{

left:14%;
top:36%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="agents"]{

left:24%;
top:82%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="api"]{

left:42%;
top:44%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="rag"]{

left:54%;
top:16%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="mobile"]{

left:66%;
top:52%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="security"]{

left:82%;
top:38%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="growth"]{

left:72%;
top:84%;

}

#adsAiPlaygroundScene
.ads-ai-orb[data-orb="neural"]{

left:92%;
top:66%;

}

}

/* ===========================================================
END ADS AI V3 - EXTRA PREMIUM COLOR BALLS
=========================================================== */









/* ===========================================================
ADS AI V6 - DOUBLE BRIGHT SPACED MUSEOMODERNO BRAND
=========================================================== */

.ads-ai-brand{

    position:relative;

    display:inline-flex !important;
    flex-direction:column !important;

    align-items:flex-start !important;
    justify-content:center !important;

    gap:0;

    min-width:max-content;

    padding:
    5px 3px 6px 3px !important;

    margin:0 !important;

    line-height:1 !important;

    text-decoration:none !important;

    white-space:nowrap;

    isolation:isolate;

}

/* Soft premium aura */

.ads-ai-brand::before{

    content:"";

    position:absolute;

    left:-12px;
    top:50%;

    width:118%;
    height:145%;

    transform:
    translateY(-50%);

    border-radius:999px;

    background:
    radial-gradient(
        ellipse at center,
        rgba(99,102,241,.18) 0%,
        rgba(139,92,246,.10) 42%,
        rgba(6,182,212,.06) 62%,
        transparent 76%
    );

    filter:
    blur(10px);

    opacity:.85;

    z-index:-1;

    pointer-events:none;

}

/* Main ads-ai brand */

.ads-ai-brand__name{

    position:relative;

    display:block;

    font-family:
    "MuseoModerno",
    sans-serif !important;

    font-size:36px;

    font-weight:900;

    line-height:.92;

    /*
    Increased character spacing.
    Previous design used negative spacing.
    */

    letter-spacing:.8px;

    text-transform:lowercase;

    font-variant-ligatures:none;

    background:
    linear-gradient(
        100deg,
        #6d28ff 0%,
        #7c3cff 18%,
        #4f46e5 38%,
        #2563ff 57%,
        #00a8ff 77%,
        #00d9ff 100%
    );

    background-size:
    180% 100%;

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:
    transparent;

    color:
    transparent;

    filter:
    drop-shadow(
        0 1px 0 rgba(255,255,255,.90)
    )
    drop-shadow(
        0 0 4px rgba(99,102,241,.32)
    )
    drop-shadow(
        0 0 9px rgba(37,99,235,.18)
    );

    transition:
    transform .28s ease,
    filter .28s ease;

}

/* Bright highlight pass */

.ads-ai-brand__name::after{

    content:"ads-ai";

    position:absolute;

    inset:0;

    font:inherit;

    letter-spacing:inherit;

    color:transparent;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.95) 0%,
        rgba(255,255,255,.28) 26%,
        transparent 48%
    );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:
    transparent;

    opacity:.58;

    pointer-events:none;

}

/* Tagline */

.ads-ai-brand__tagline{

    display:block !important;

    margin-top:7px;
    margin-left:2px;

    font-family:
    "MuseoModerno",
    sans-serif !important;

    font-size:8.5px;

    font-weight:700;

    line-height:1;

    /*
    Slightly spaced tagline too.
    */

    letter-spacing:.65px;

    color:#4f46e5;

    text-transform:none;

    text-shadow:
    0 0 7px rgba(79,70,229,.16);

}

/* No line / hyphen before tagline */

.ads-ai-brand__tagline::before{

    content:none !important;

    display:none !important;

}

/* Premium hover */

.ads-ai-brand:hover
.ads-ai-brand__name{

    transform:
    translateY(-1px)
    scale(1.025);

    filter:
    drop-shadow(
        0 1px 0 rgba(255,255,255,1)
    )
    drop-shadow(
        0 0 6px rgba(124,58,237,.42)
    )
    drop-shadow(
        0 0 13px rgba(0,174,255,.26)
    );

}

/* Tablet */

@media(max-width:991.98px){

    .ads-ai-brand__name{

        font-size:32px;

        letter-spacing:.7px;

    }

    .ads-ai-brand__tagline{

        margin-top:6px;

        font-size:7.5px;

        letter-spacing:.55px;

    }

}

/* Mobile */

@media(max-width:576px){

    .ads-ai-brand{

        padding:
        4px 2px 5px 2px !important;

    }

    .ads-ai-brand__name{

        font-size:29px;

        letter-spacing:.55px;

    }

    .ads-ai-brand__tagline{

        margin-top:5px;
        margin-left:1px;

        font-size:6.8px;

        letter-spacing:.42px;

    }

}

/* Very small mobile */

@media(max-width:380px){

    .ads-ai-brand__name{

        font-size:27px;

        letter-spacing:.45px;

    }

    .ads-ai-brand__tagline{

        font-size:6.2px;

        letter-spacing:.35px;

    }

}

/* Reduced motion */

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

    .ads-ai-brand__name{

        transition:none;

    }

}

/* ===========================================================
END ADS AI V6 - DOUBLE BRIGHT SPACED MUSEOMODERNO BRAND
=========================================================== */

/* ===========================================================
ADS AI V7 - MIDNIGHT GLASS PART 1 FOUNDATION
=========================================================== */

/* -----------------------------------------------------------
1. PREMIUM MIDNIGHT DESIGN TOKENS
----------------------------------------------------------- */

:root{
    --mg-bg:#060914;
    --mg-bg-deep:#03050c;
    --mg-bg-soft:#0a1020;

    --mg-surface:rgba(15,23,42,.62);
    --mg-surface-strong:rgba(15,23,42,.82);
    --mg-surface-soft:rgba(255,255,255,.045);

    --mg-border:rgba(148,163,184,.16);
    --mg-border-bright:rgba(129,140,248,.28);

    --mg-text:#f8fafc;
    --mg-muted:#a8b3c7;
    --mg-muted-soft:#7f8ca3;

    --mg-violet:#8b5cf6;
    --mg-indigo:#6366f1;
    --mg-blue:#3b82f6;
    --mg-cyan:#22d3ee;

    --mg-shadow:
        0 24px 70px rgba(0,0,0,.34);

    --mg-glow:
        0 0 42px rgba(99,102,241,.16);
}

/* -----------------------------------------------------------
2. GLOBAL CANVAS
----------------------------------------------------------- */

html{
    background:var(--mg-bg-deep);
}

body{
    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(99,102,241,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(34,211,238,.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            var(--mg-bg-deep) 0%,
            var(--mg-bg) 42%,
            #080d1a 100%
        ) !important;

    color:var(--mg-text) !important;
}

/* Premium ambient fixed light */

body::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(139,92,246,.09),
            transparent 34%
        );

    z-index:-1;
}

/* -----------------------------------------------------------
3. PREMIUM GLASS HEADER
----------------------------------------------------------- */

.header{
    background:
        linear-gradient(
            180deg,
            rgba(3,5,12,.88),
            rgba(6,9,20,.72)
        ) !important;

    border-bottom:
        1px solid rgba(148,163,184,.12) !important;

    box-shadow:
        0 10px 35px rgba(0,0,0,.20) !important;

    -webkit-backdrop-filter:
        blur(18px) saturate(145%);

    backdrop-filter:
        blur(18px) saturate(145%);
}

.header .navbar{
    background:transparent !important;
}

/* Navigation */

.header .nav-link{
    color:
        rgba(226,232,240,.82) !important;

    font-weight:600;

    transition:
        color .22s ease,
        transform .22s ease;
}

.header .nav-link:hover,
.header .nav-link:focus{
    color:#ffffff !important;

    transform:
        translateY(-1px);
}

/* Navbar toggle */

.navbar-toggler{
    border-color:
        rgba(148,163,184,.24) !important;

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

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

/* -----------------------------------------------------------
4. MUSEOMODERNO BRAND - MIDNIGHT COMPATIBILITY
----------------------------------------------------------- */

.ads-ai-brand{
    position:relative;
    z-index:3;
}

.ads-ai-brand__name{
    filter:
        drop-shadow(
            0 0 7px rgba(99,102,241,.32)
        )
        drop-shadow(
            0 0 15px rgba(34,211,238,.14)
        ) !important;
}

.ads-ai-brand__tagline{
    color:
        rgba(226,232,240,.84) !important;

    text-shadow:none !important;
}

/* -----------------------------------------------------------
5. CINEMATIC MIDNIGHT HERO
----------------------------------------------------------- */

.hero{
    position:relative !important;

    isolation:isolate;

    min-height:
        clamp(720px, 92vh, 940px);

    overflow:hidden !important;

    color:var(--mg-text) !important;

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(99,102,241,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 22%,
            rgba(34,211,238,.11),
            transparent 27%
        ),
        radial-gradient(
            circle at 64% 82%,
            rgba(139,92,246,.12),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #03050c 0%,
            #070b18 48%,
            #091020 100%
        ) !important;
}

/* Grid texture */

.hero::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    width:auto !important;
    height:auto !important;

    background-image:
        linear-gradient(
            rgba(148,163,184,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148,163,184,.045) 1px,
            transparent 1px
        ) !important;

    background-size:
        54px 54px !important;

    opacity:.42 !important;

    filter:none !important;

    animation:none !important;

    pointer-events:none;

    z-index:0 !important;
}

/* Hero vignette */

.hero::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(3,5,12,.04),
            rgba(3,5,12,.12) 55%,
            rgba(3,5,12,.58) 100%
        ) !important;

    opacity:1 !important;

    pointer-events:none;

    z-index:1;
}

/* Keep content above balls and atmosphere */

.hero > .container{
    position:relative !important;

    z-index:5 !important;
}

/* -----------------------------------------------------------
6. HERO TYPOGRAPHY
----------------------------------------------------------- */

.hero h1{
    color:#ffffff !important;

    text-shadow:
        0 2px 30px rgba(0,0,0,.28);

    letter-spacing:
        -.035em;
}

.hero h1 span,
.hero .gradient-text{
    background:
        linear-gradient(
            100deg,
            #a78bfa 0%,
            #818cf8 34%,
            #60a5fa 64%,
            #22d3ee 100%
        ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    -webkit-text-fill-color:
        transparent !important;

    color:transparent !important;
}

.hero p{
    color:
        rgba(203,213,225,.88) !important;
}

/* -----------------------------------------------------------
7. HERO GLASS CONTENT PANELS
----------------------------------------------------------- */

.hero .hero-content,
.hero .hero-card,
.hero .ai-console,
.hero .terminal,
.hero .dashboard-preview{
    border:
        1px solid rgba(148,163,184,.16);

    box-shadow:
        var(--mg-shadow),
        inset 0 1px 0 rgba(255,255,255,.055);

    -webkit-backdrop-filter:
        blur(16px);

    backdrop-filter:
        blur(16px);
}

/* -----------------------------------------------------------
8. PREMIUM BUTTONS
----------------------------------------------------------- */

.hero .btn-primary,
.header .btn-primary{
    border:
        1px solid rgba(165,180,252,.28) !important;

    background:
        linear-gradient(
            105deg,
            #7c3aed 0%,
            #4f46e5 48%,
            #2563eb 100%
        ) !important;

    color:#ffffff !important;

    box-shadow:
        0 12px 32px rgba(79,70,229,.28),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.hero .btn-primary:hover,
.header .btn-primary:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 40px rgba(79,70,229,.38),
        0 0 28px rgba(34,211,238,.10),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.hero .btn-outline-light{
    border:
        1px solid rgba(148,163,184,.28) !important;

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

    color:#f8fafc !important;

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

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}

.hero .btn-outline-light:hover{
    background:
        rgba(255,255,255,.10) !important;

    border-color:
        rgba(165,180,252,.42) !important;

    color:#ffffff !important;
}

/* -----------------------------------------------------------
9. BALL PLAYGROUND - PRESERVE PHYSICS, ENHANCE VISIBILITY
----------------------------------------------------------- */

.ads-ai-playground{
    z-index:2 !important;

    opacity:.96 !important;

    mix-blend-mode:normal !important;

    pointer-events:none !important;
}

.ads-ai-playground__scene{
    z-index:2 !important;
}

.ads-ai-playground__connections{
    z-index:1 !important;

    opacity:.58 !important;
}

/*
Important:
No transform, left, top, animation or physics properties
are changed here.
*/

.ads-ai-orb{
    z-index:3 !important;

    opacity:1 !important;

    visibility:visible !important;

    mix-blend-mode:normal !important;
}

/* Make existing balls pop on midnight background */

.ads-ai-orb::before{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 8px 22px rgba(0,0,0,.24),
        0 0 18px var(--orb-color-soft) !important;
}

/* -----------------------------------------------------------
10. SECTION RHYTHM
----------------------------------------------------------- */

.section{
    position:relative;

    color:var(--mg-text);

    background:
        linear-gradient(
            180deg,
            #070b17 0%,
            #090f1d 100%
        );
}

/* Alternate sections */

.section:nth-of-type(even){
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(99,102,241,.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #090f1d,
            #070b17
        );
}

/* Section headings */

.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6{
    color:#f8fafc;
}

.section p{
    color:var(--mg-muted);
}

/* -----------------------------------------------------------
11. GENERIC PREMIUM GLASS CARDS
----------------------------------------------------------- */

.section .card{
    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.78),
            rgba(15,23,42,.52)
        ) !important;

    border:
        1px solid var(--mg-border) !important;

    color:var(--mg-text) !important;

    box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.045);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}

.section .card:hover{
    transform:
        translateY(-5px);

    border-color:
        var(--mg-border-bright) !important;

    box-shadow:
        0 24px 60px rgba(0,0,0,.30),
        0 0 30px rgba(99,102,241,.08),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.section .card h1,
.section .card h2,
.section .card h3,
.section .card h4,
.section .card h5,
.section .card h6{
    color:#f8fafc !important;
}

.section .card p{
    color:var(--mg-muted) !important;
}

/* -----------------------------------------------------------
12. LINKS AND SMALL ACCENTS
----------------------------------------------------------- */

.section a:not(.btn){
    color:#93c5fd;
}

.section a:not(.btn):hover{
    color:#67e8f9;
}

/* -----------------------------------------------------------
13. MOBILE MIDNIGHT OPTIMIZATION
----------------------------------------------------------- */

@media(max-width:991.98px){

    .hero{
        min-height:
            clamp(700px, 88vh, 880px);
    }

    .header{
        background:
            rgba(3,5,12,.92) !important;
    }

    .navbar-collapse{
        background:
            rgba(7,11,24,.94);

        border:
            1px solid rgba(148,163,184,.14);

        border-radius:
            18px;

        margin-top:
            12px;

        padding:
            14px;

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

        -webkit-backdrop-filter:
            blur(18px);

        backdrop-filter:
            blur(18px);
    }

}

@media(max-width:576px){

    .hero{
        min-height:
            760px;

        background:
            radial-gradient(
                circle at 18% 14%,
                rgba(99,102,241,.18),
                transparent 28%
            ),
            radial-gradient(
                circle at 88% 30%,
                rgba(34,211,238,.09),
                transparent 25%
            ),
            linear-gradient(
                155deg,
                #03050c,
                #080d1b
            ) !important;
    }

    .hero::before{
        background-size:
            42px 42px !important;

        opacity:.30 !important;
    }

    .ads-ai-playground{
        opacity:.92 !important;
    }

}

/* -----------------------------------------------------------
14. REDUCED MOTION SAFETY
----------------------------------------------------------- */

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

    .hero .btn-primary,
    .header .btn-primary,
    .section .card,
    .header .nav-link{
        transition:none !important;
    }

}

/* ===========================================================
END ADS AI V7 - MIDNIGHT GLASS PART 1 FOUNDATION
=========================================================== */

/* ===========================================================
ADS AI V8 - MIDNIGHT GLASS PART 2 BENTO
=========================================================== */

/* -----------------------------------------------------------
1. SHARED SECTION ATMOSPHERE
----------------------------------------------------------- */

#services,
#products{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

#services{
    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(99,102,241,.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(34,211,238,.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #070b17 0%,
            #090f1d 100%
        ) !important;
}

#products{
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(139,92,246,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 82%,
            rgba(37,99,235,.09),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #080d1a 0%,
            #050914 100%
        ) !important;
}

/* Ambient light blobs */

#services::before,
#products::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(90px);
    opacity:.18;
    pointer-events:none;
    z-index:-1;
}

#services::before{
    left:-220px;
    top:24%;
    background:#6366f1;
}

#products::before{
    right:-220px;
    top:18%;
    background:#8b5cf6;
}

/* -----------------------------------------------------------
2. PREMIUM SECTION TITLES
----------------------------------------------------------- */

#services .section-title,
#products .section-title{
    position:relative;
    max-width:780px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:54px;
    z-index:2;
}

#services .section-title > span,
#products .section-title > span{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:7px 13px;
    border:
        1px solid rgba(129,140,248,.22);
    border-radius:999px;

    background:
        rgba(99,102,241,.075);

    color:#a5b4fc !important;

    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;

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

#services .section-title h2,
#products .section-title h2{
    margin-top:17px;

    color:#f8fafc !important;

    letter-spacing:-.035em;

    text-shadow:
        0 8px 35px rgba(0,0,0,.24);
}

#services .section-title p,
#products .section-title p{
    max-width:680px;
    margin-left:auto;
    margin-right:auto;

    color:#9eabc0 !important;
}

/* -----------------------------------------------------------
3. BENTO GRID FOUNDATION
Bootstrap row remains intact.
----------------------------------------------------------- */

#services > .container > .row,
#products > .container > .row{
    position:relative;
    z-index:2;
    align-items:stretch;
}

#services > .container > .row > [class*="col-"],
#products > .container > .row > [class*="col-"]{
    display:flex;
}

/* -----------------------------------------------------------
4. SERVICE BENTO CARDS
----------------------------------------------------------- */

#services .service-card{
    --bento-accent:#818cf8;
    --bento-accent-rgb:129,140,248;

    position:relative;
    isolation:isolate;

    width:100%;
    min-height:100%;

    padding:30px 28px !important;

    overflow:hidden;

    border:
        1px solid rgba(148,163,184,.15) !important;

    border-radius:24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(17,25,45,.86),
            rgba(10,16,31,.66)
        ) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.055);

    -webkit-backdrop-filter:
        blur(16px) saturate(130%);

    backdrop-filter:
        blur(16px) saturate(130%);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

/* Individual premium accent identity */

#services .row > div:nth-child(1) .service-card{
    --bento-accent:#a78bfa;
    --bento-accent-rgb:167,139,250;
}

#services .row > div:nth-child(2) .service-card{
    --bento-accent:#22d3ee;
    --bento-accent-rgb:34,211,238;
}

#services .row > div:nth-child(3) .service-card{
    --bento-accent:#60a5fa;
    --bento-accent-rgb:96,165,250;
}

#services .row > div:nth-child(4) .service-card{
    --bento-accent:#f472b6;
    --bento-accent-rgb:244,114,182;
}

#services .row > div:nth-child(5) .service-card{
    --bento-accent:#34d399;
    --bento-accent-rgb:52,211,153;
}

#services .row > div:nth-child(6) .service-card{
    --bento-accent:#fbbf24;
    --bento-accent-rgb:251,191,36;
}

/* Internal colored atmosphere */

#services .service-card::before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-72px;
    top:-82px;

    border-radius:50%;

    background:
        rgba(
            var(--bento-accent-rgb),
            .18
        );

    filter:blur(42px);

    pointer-events:none;

    z-index:-1;
}

/* Premium top edge */

#services .service-card::after{
    content:"";

    position:absolute;

    left:22px;
    right:22px;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--bento-accent-rgb),.78),
            transparent
        );

    opacity:.72;

    pointer-events:none;
}

#services .service-card:hover{
    transform:
        translateY(-7px);

    border-color:
        rgba(
            var(--bento-accent-rgb),
            .34
        ) !important;

    box-shadow:
        0 28px 72px rgba(0,0,0,.34),
        0 0 34px rgba(
            var(--bento-accent-rgb),
            .09
        ),
        inset 0 1px 0 rgba(255,255,255,.07);
}

/* Service icon */

#services .service-icon{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:58px;
    height:58px;

    margin-bottom:23px;

    border:
        1px solid rgba(
            var(--bento-accent-rgb),
            .28
        ) !important;

    border-radius:18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(var(--bento-accent-rgb),.19),
            rgba(var(--bento-accent-rgb),.07)
        ) !important;

    color:
        var(--bento-accent) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 10px 26px rgba(var(--bento-accent-rgb),.10);
}

#services .service-icon i{
    color:
        var(--bento-accent) !important;

    font-size:23px;
}

#services .service-card h3{
    color:#f8fafc !important;
    letter-spacing:-.025em;
}

#services .service-card p{
    color:#9aa8bd !important;
}

#services .service-card ul{
    margin-top:20px;
}

#services .service-card li{
    color:#c4cedd !important;
}

#services .service-card li::marker{
    color:
        var(--bento-accent);
}

/* -----------------------------------------------------------
5. DESKTOP ASYMMETRIC BENTO RHYTHM
No HTML modification.
----------------------------------------------------------- */

@media(min-width:992px){

    #services .row > div:nth-child(1) .service-card,
    #services .row > div:nth-child(6) .service-card{
        min-height:430px;
    }

    #services .row > div:nth-child(2) .service-card,
    #services .row > div:nth-child(5) .service-card{
        min-height:405px;
    }

    #services .row > div:nth-child(3) .service-card,
    #services .row > div:nth-child(4) .service-card{
        min-height:380px;
    }

}

/* -----------------------------------------------------------
6. PRODUCT GLASS MODULES
----------------------------------------------------------- */

#products .product-card{
    --product-accent:#818cf8;
    --product-accent-rgb:129,140,248;

    position:relative;
    isolation:isolate;

    display:flex;
    flex-direction:column;

    width:100%;
    min-height:350px;

    padding:30px 28px !important;

    overflow:hidden;

    border:
        1px solid rgba(148,163,184,.15) !important;

    border-radius:24px !important;

    background:
        linear-gradient(
            150deg,
            rgba(17,25,45,.88),
            rgba(7,12,25,.72)
        ) !important;

    box-shadow:
        0 22px 58px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.05);

    -webkit-backdrop-filter:
        blur(17px) saturate(130%);

    backdrop-filter:
        blur(17px) saturate(130%);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

/* Product identities */

#products .row > div:nth-child(1) .product-card{
    --product-accent:#a78bfa;
    --product-accent-rgb:167,139,250;
}

#products .row > div:nth-child(2) .product-card{
    --product-accent:#60a5fa;
    --product-accent-rgb:96,165,250;
}

#products .row > div:nth-child(3) .product-card{
    --product-accent:#22d3ee;
    --product-accent-rgb:34,211,238;
}

#products .row > div:nth-child(4) .product-card{
    --product-accent:#34d399;
    --product-accent-rgb:52,211,153;
}

#products .row > div:nth-child(5) .product-card{
    --product-accent:#f472b6;
    --product-accent-rgb:244,114,182;
}

#products .row > div:nth-child(6) .product-card{
    --product-accent:#fbbf24;
    --product-accent-rgb:251,191,36;
}

/* Product ambient orb */

#products .product-card::before{
    content:"";

    position:absolute;

    width:210px;
    height:210px;

    right:-95px;
    bottom:-110px;

    border-radius:50%;

    background:
        rgba(
            var(--product-accent-rgb),
            .18
        );

    filter:
        blur(48px);

    z-index:-1;

    pointer-events:none;
}

/* Fine luminous top border */

#products .product-card::after{
    content:"";

    position:absolute;

    left:24px;
    right:24px;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--product-accent-rgb),.76),
            transparent
        );

    opacity:.76;

    pointer-events:none;
}

#products .product-card:hover{
    transform:
        translateY(-7px)
        scale(1.008);

    border-color:
        rgba(
            var(--product-accent-rgb),
            .36
        ) !important;

    box-shadow:
        0 30px 78px rgba(0,0,0,.38),
        0 0 38px rgba(
            var(--product-accent-rgb),
            .10
        ),
        inset 0 1px 0 rgba(255,255,255,.07);
}

/* Product logo */

#products .product-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:60px;
    height:60px;

    margin-bottom:24px;

    border:
        1px solid rgba(
            var(--product-accent-rgb),
            .30
        ) !important;

    border-radius:19px !important;

    background:
        linear-gradient(
            145deg,
            rgba(var(--product-accent-rgb),.20),
            rgba(var(--product-accent-rgb),.065)
        ) !important;

    color:
        var(--product-accent) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 12px 28px rgba(var(--product-accent-rgb),.10);
}

#products .product-logo i{
    color:
        var(--product-accent) !important;

    font-size:24px;
}

#products .product-card h3{
    color:#f8fafc !important;
    letter-spacing:-.025em;
}

#products .product-card p{
    color:#9ca9bd !important;
}

/* Product tags */

#products .product-tag{
    display:inline-flex;
    align-items:center;

    width:max-content;

    margin-top:auto;

    padding:7px 11px !important;

    border:
        1px solid rgba(
            var(--product-accent-rgb),
            .22
        ) !important;

    border-radius:999px !important;

    background:
        rgba(
            var(--product-accent-rgb),
            .085
        ) !important;

    color:
        var(--product-accent) !important;

    font-size:11px;
    font-weight:800;
    letter-spacing:.055em;
}

/* -----------------------------------------------------------
7. PRODUCT DESKTOP RHYTHM
----------------------------------------------------------- */

@media(min-width:992px){

    #products .row > div:nth-child(1) .product-card,
    #products .row > div:nth-child(4) .product-card{
        min-height:390px;
    }

    #products .row > div:nth-child(2) .product-card,
    #products .row > div:nth-child(5) .product-card{
        min-height:365px;
    }

    #products .row > div:nth-child(3) .product-card,
    #products .row > div:nth-child(6) .product-card{
        min-height:340px;
    }

}

/* -----------------------------------------------------------
8. TABLET
----------------------------------------------------------- */

@media(max-width:991.98px){

    #services .section-title,
    #products .section-title{
        margin-bottom:42px;
    }

    #services .service-card,
    #products .product-card{
        min-height:100%;

        border-radius:21px !important;
    }

    #services .service-card{
        padding:26px 24px !important;
    }

    #products .product-card{
        padding:26px 24px !important;
    }

}

/* -----------------------------------------------------------
9. MOBILE
----------------------------------------------------------- */

@media(max-width:576px){

    #services .section-title,
    #products .section-title{
        margin-bottom:34px;
    }

    #services .section-title > span,
    #products .section-title > span{
        min-height:27px;

        padding:6px 10px;

        font-size:9px;
    }

    #services .service-card,
    #products .product-card{
        min-height:auto;

        padding:23px 20px !important;

        border-radius:19px !important;
    }

    #services .service-icon,
    #products .product-logo{
        width:52px;
        height:52px;

        border-radius:16px !important;
    }

    #services .service-icon i,
    #products .product-logo i{
        font-size:21px;
    }

}

/* -----------------------------------------------------------
10. REDUCED MOTION
----------------------------------------------------------- */

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

    #services .service-card,
    #products .product-card{
        transition:none !important;
    }

}

/* ===========================================================
END ADS AI V8 - MIDNIGHT GLASS PART 2 BENTO
=========================================================== */

/* ===========================================================
ADS AI V9 - MIDNIGHT GLASS PART 3 TECHNOLOGY PORTFOLIO
=========================================================== */

/* -----------------------------------------------------------
1. TECHNOLOGY SECTION ATMOSPHERE
----------------------------------------------------------- */

#technology{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 16% 18%,
            rgba(34,211,238,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 84% 70%,
            rgba(99,102,241,.12),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #060a15 0%,
            #090f1e 100%
        ) !important;
}

/* Constellation grid */

#technology::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(148,163,184,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148,163,184,.035) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    opacity:.50;

    z-index:-2;
}

/* Ambient constellation glow */

#technology::after{
    content:"";

    position:absolute;

    width:560px;
    height:560px;

    left:50%;
    top:52%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(99,102,241,.11),
            rgba(34,211,238,.035) 42%,
            transparent 70%
        );

    filter:
        blur(22px);

    pointer-events:none;

    z-index:-1;
}

/* -----------------------------------------------------------
2. TECHNOLOGY TITLE
----------------------------------------------------------- */

#technology .section-title{
    position:relative;

    max-width:790px;

    margin-left:auto;
    margin-right:auto;
    margin-bottom:52px;

    z-index:2;
}

#technology .section-title > span{
    display:inline-flex;
    align-items:center;

    min-height:30px;

    padding:
        7px 13px;

    border:
        1px solid rgba(34,211,238,.22);

    border-radius:
        999px;

    background:
        rgba(34,211,238,.065);

    color:
        #67e8f9 !important;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .16em;

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

#technology .section-title h2{
    margin-top:
        17px;

    color:
        #f8fafc !important;

    letter-spacing:
        -.035em;

    text-shadow:
        0 8px 35px rgba(0,0,0,.24);
}

#technology .section-title p{
    max-width:
        680px;

    margin-left:
        auto;

    margin-right:
        auto;

    color:
        #9eabc0 !important;
}

/* -----------------------------------------------------------
3. TECHNOLOGY GRID FOUNDATION
----------------------------------------------------------- */

#technology > .container > .row{
    position:relative;

    z-index:2;

    align-items:stretch;
}

#technology > .container > .row > [class*="col-"]{
    display:flex;
}

/* -----------------------------------------------------------
4. TECHNOLOGY CONSTELLATION CARDS
----------------------------------------------------------- */

#technology .tech-card{
    --tech-accent:#818cf8;
    --tech-rgb:129,140,248;

    position:relative;
    isolation:isolate;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:190px;

    padding:
        26px 20px !important;

    overflow:hidden;

    border:
        1px solid rgba(148,163,184,.14) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(17,25,45,.80),
            rgba(8,14,28,.66)
        ) !important;

    box-shadow:
        0 18px 48px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.05);

    -webkit-backdrop-filter:
        blur(15px)
        saturate(125%);

    backdrop-filter:
        blur(15px)
        saturate(125%);

    transition:
        transform .27s ease,
        border-color .27s ease,
        box-shadow .27s ease;
}

/* Eight technology identities */

#technology .row > div:nth-child(1) .tech-card{
    --tech-accent:#60a5fa;
    --tech-rgb:96,165,250;
}

#technology .row > div:nth-child(2) .tech-card{
    --tech-accent:#22d3ee;
    --tech-rgb:34,211,238;
}

#technology .row > div:nth-child(3) .tech-card{
    --tech-accent:#34d399;
    --tech-rgb:52,211,153;
}

#technology .row > div:nth-child(4) .tech-card{
    --tech-accent:#a78bfa;
    --tech-rgb:167,139,250;
}

#technology .row > div:nth-child(5) .tech-card{
    --tech-accent:#f472b6;
    --tech-rgb:244,114,182;
}

#technology .row > div:nth-child(6) .tech-card{
    --tech-accent:#fbbf24;
    --tech-rgb:251,191,36;
}

#technology .row > div:nth-child(7) .tech-card{
    --tech-accent:#fb7185;
    --tech-rgb:251,113,133;
}

#technology .row > div:nth-child(8) .tech-card{
    --tech-accent:#818cf8;
    --tech-rgb:129,140,248;
}

/* Inner constellation glow */

#technology .tech-card::before{
    content:"";

    position:absolute;

    width:
        130px;

    height:
        130px;

    left:
        50%;

    top:
        -78px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(
            var(--tech-rgb),
            .20
        );

    filter:
        blur(34px);

    pointer-events:none;

    z-index:-1;
}

/* Luminous top edge */

#technology .tech-card::after{
    content:"";

    position:absolute;

    left:
        20px;

    right:
        20px;

    top:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--tech-rgb),.82),
            transparent
        );

    opacity:
        .72;

    pointer-events:none;
}

#technology .tech-card:hover{
    transform:
        translateY(-7px)
        scale(1.015);

    border-color:
        rgba(
            var(--tech-rgb),
            .36
        ) !important;

    box-shadow:
        0 28px 68px rgba(0,0,0,.34),
        0 0 34px rgba(var(--tech-rgb),.11),
        inset 0 1px 0 rgba(255,255,255,.07);
}

/* Technology icons */

#technology .tech-card i{
    color:
        var(--tech-accent) !important;

    filter:
        drop-shadow(
            0 0 12px
            rgba(var(--tech-rgb),.24)
        );

    transition:
        transform .27s ease,
        filter .27s ease;
}

#technology .tech-card:hover i{
    transform:
        translateY(-2px)
        scale(1.07);

    filter:
        drop-shadow(
            0 0 18px
            rgba(var(--tech-rgb),.36)
        );
}

#technology .tech-card h3,
#technology .tech-card h4,
#technology .tech-card h5{
    color:
        #f8fafc !important;

    letter-spacing:
        -.02em;
}

#technology .tech-card p{
    color:
        #98a6bb !important;
}

/* -----------------------------------------------------------
5. DESKTOP CONSTELLATION RHYTHM
----------------------------------------------------------- */

@media(min-width:992px){

    #technology .row > div:nth-child(1) .tech-card,
    #technology .row > div:nth-child(4) .tech-card,
    #technology .row > div:nth-child(5) .tech-card,
    #technology .row > div:nth-child(8) .tech-card{
        min-height:
            210px;
    }

    #technology .row > div:nth-child(2) .tech-card,
    #technology .row > div:nth-child(3) .tech-card,
    #technology .row > div:nth-child(6) .tech-card,
    #technology .row > div:nth-child(7) .tech-card{
        min-height:
            188px;
    }

}

/* -----------------------------------------------------------
6. PORTFOLIO SECTION ATMOSPHERE
----------------------------------------------------------- */

#portfolio{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(139,92,246,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 82%,
            rgba(34,211,238,.07),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #090f1d 0%,
            #050914 100%
        ) !important;
}

#portfolio::before{
    content:"";

    position:absolute;

    width:
        480px;

    height:
        480px;

    right:
        -250px;

    top:
        24%;

    border-radius:
        50%;

    background:
        rgba(139,92,246,.16);

    filter:
        blur(100px);

    pointer-events:none;

    z-index:-1;
}

/* -----------------------------------------------------------
7. PORTFOLIO TITLE
----------------------------------------------------------- */

#portfolio .section-title{
    position:relative;

    max-width:
        790px;

    margin-left:
        auto;

    margin-right:
        auto;

    margin-bottom:
        54px;

    z-index:
        2;
}

#portfolio .section-title > span{
    display:inline-flex;
    align-items:center;

    min-height:
        30px;

    padding:
        7px 13px;

    border:
        1px solid rgba(167,139,250,.24);

    border-radius:
        999px;

    background:
        rgba(139,92,246,.075);

    color:
        #c4b5fd !important;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .16em;

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

#portfolio .section-title h2{
    margin-top:
        17px;

    color:
        #f8fafc !important;

    letter-spacing:
        -.035em;

    text-shadow:
        0 8px 35px rgba(0,0,0,.24);
}

#portfolio .section-title p{
    color:
        #9eabc0 !important;
}

/* -----------------------------------------------------------
8. PORTFOLIO GRID FOUNDATION
----------------------------------------------------------- */

#portfolio > .container > .row{
    position:relative;

    z-index:
        2;

    align-items:
        stretch;
}

#portfolio > .container > .row > [class*="col-"]{
    display:
        flex;
}

/* -----------------------------------------------------------
9. PREMIUM PORTFOLIO SHOWCASE CARDS
----------------------------------------------------------- */

#portfolio .portfolio-card{
    --portfolio-accent:#818cf8;
    --portfolio-rgb:129,140,248;

    position:relative;
    isolation:isolate;

    display:flex;
    flex-direction:column;

    width:100%;
    min-height:320px;

    padding:
        30px 28px !important;

    overflow:hidden;

    border:
        1px solid rgba(148,163,184,.15) !important;

    border-radius:
        25px !important;

    background:
        linear-gradient(
            145deg,
            rgba(17,25,45,.88),
            rgba(7,12,25,.72)
        ) !important;

    box-shadow:
        0 22px 60px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.055);

    -webkit-backdrop-filter:
        blur(17px)
        saturate(130%);

    backdrop-filter:
        blur(17px)
        saturate(130%);

    transition:
        transform .29s ease,
        border-color .29s ease,
        box-shadow .29s ease;
}

/* Six project identities */

#portfolio .row > div:nth-child(1) .portfolio-card{
    --portfolio-accent:#a78bfa;
    --portfolio-rgb:167,139,250;
}

#portfolio .row > div:nth-child(2) .portfolio-card{
    --portfolio-accent:#22d3ee;
    --portfolio-rgb:34,211,238;
}

#portfolio .row > div:nth-child(3) .portfolio-card{
    --portfolio-accent:#60a5fa;
    --portfolio-rgb:96,165,250;
}

#portfolio .row > div:nth-child(4) .portfolio-card{
    --portfolio-accent:#34d399;
    --portfolio-rgb:52,211,153;
}

#portfolio .row > div:nth-child(5) .portfolio-card{
    --portfolio-accent:#f472b6;
    --portfolio-rgb:244,114,182;
}

#portfolio .row > div:nth-child(6) .portfolio-card{
    --portfolio-accent:#fbbf24;
    --portfolio-rgb:251,191,36;
}

/* Large ambient project glow */

#portfolio .portfolio-card::before{
    content:"";

    position:absolute;

    width:
        220px;

    height:
        220px;

    right:
        -105px;

    top:
        -115px;

    border-radius:
        50%;

    background:
        rgba(
            var(--portfolio-rgb),
            .18
        );

    filter:
        blur(48px);

    pointer-events:none;

    z-index:
        -1;
}

/* Premium edge */

#portfolio .portfolio-card::after{
    content:"";

    position:absolute;

    left:
        24px;

    right:
        24px;

    top:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--portfolio-rgb),.82),
            transparent
        );

    opacity:
        .78;

    pointer-events:none;
}

#portfolio .portfolio-card:hover{
    transform:
        translateY(-8px)
        scale(1.008);

    border-color:
        rgba(
            var(--portfolio-rgb),
            .38
        ) !important;

    box-shadow:
        0 32px 82px rgba(0,0,0,.40),
        0 0 42px rgba(var(--portfolio-rgb),.11),
        inset 0 1px 0 rgba(255,255,255,.075);
}

/* Portfolio typography */

#portfolio .portfolio-card h3,
#portfolio .portfolio-card h4{
    color:
        #f8fafc !important;

    letter-spacing:
        -.025em;
}

#portfolio .portfolio-card p{
    color:
        #9ca9bd !important;
}

/* Any icons inside portfolio */

#portfolio .portfolio-card i{
    color:
        var(--portfolio-accent) !important;

    filter:
        drop-shadow(
            0 0 13px
            rgba(var(--portfolio-rgb),.22)
        );
}

/* Any links inside portfolio */

#portfolio .portfolio-card a:not(.btn){
    color:
        var(--portfolio-accent) !important;
}

/* -----------------------------------------------------------
10. DESKTOP PORTFOLIO SHOWCASE RHYTHM
----------------------------------------------------------- */

@media(min-width:992px){

    #portfolio .row > div:nth-child(1) .portfolio-card,
    #portfolio .row > div:nth-child(4) .portfolio-card{
        min-height:
            380px;
    }

    #portfolio .row > div:nth-child(2) .portfolio-card,
    #portfolio .row > div:nth-child(5) .portfolio-card{
        min-height:
            350px;
    }

    #portfolio .row > div:nth-child(3) .portfolio-card,
    #portfolio .row > div:nth-child(6) .portfolio-card{
        min-height:
            325px;
    }

}

/* -----------------------------------------------------------
11. TABLET
----------------------------------------------------------- */

@media(max-width:991.98px){

    #technology .section-title,
    #portfolio .section-title{
        margin-bottom:
            42px;
    }

    #technology .tech-card,
    #portfolio .portfolio-card{
        min-height:
            100%;

        border-radius:
            21px !important;
    }

    #portfolio .portfolio-card{
        padding:
            26px 24px !important;
    }

}

/* -----------------------------------------------------------
12. MOBILE
----------------------------------------------------------- */

@media(max-width:576px){

    #technology .section-title,
    #portfolio .section-title{
        margin-bottom:
            34px;
    }

    #technology .section-title > span,
    #portfolio .section-title > span{
        min-height:
            27px;

        padding:
            6px 10px;

        font-size:
            9px;
    }

    #technology .tech-card{
        min-height:
            155px;

        padding:
            21px 16px !important;

        border-radius:
            18px !important;
    }

    #portfolio .portfolio-card{
        min-height:
            auto;

        padding:
            23px 20px !important;

        border-radius:
            19px !important;
    }

}

/* -----------------------------------------------------------
13. REDUCED MOTION
----------------------------------------------------------- */

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

    #technology .tech-card,
    #portfolio .portfolio-card,
    #technology .tech-card i{
        transition:
            none !important;
    }

}

/* ===========================================================
END ADS AI V9 - MIDNIGHT GLASS PART 3 TECHNOLOGY PORTFOLIO
=========================================================== */

/* ===========================================================
ADS AI V10 - MIDNIGHT GLASS PART 4 COMMAND CENTER
=========================================================== */

/* -----------------------------------------------------------
1. WHY ADS AI SECTION DISCOVERY-SAFE FOUNDATION
----------------------------------------------------------- */

/*
The existing page has exactly six .feature-card elements.
We style their containing section without requiring a new ID.
*/

.section:has(.feature-card){
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(99,102,241,.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 76%,
            rgba(34,211,238,.075),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #060a15 0%,
            #090f1d 100%
        ) !important;
}

/* Ambient glow */

.section:has(.feature-card)::before{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:-280px;
    top:18%;

    border-radius:50%;

    background:
        rgba(99,102,241,.15);

    filter:
        blur(105px);

    pointer-events:none;

    z-index:-1;
}

/* -----------------------------------------------------------
2. WHY ADS AI TITLE
----------------------------------------------------------- */

.section:has(.feature-card) .section-title{
    position:relative;

    max-width:790px;

    margin-left:auto;
    margin-right:auto;
    margin-bottom:54px;

    z-index:2;
}

.section:has(.feature-card) .section-title > span{
    display:inline-flex;
    align-items:center;

    min-height:30px;

    padding:7px 13px;

    border:
        1px solid rgba(129,140,248,.23);

    border-radius:999px;

    background:
        rgba(99,102,241,.075);

    color:
        #a5b4fc !important;

    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;

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

.section:has(.feature-card) .section-title h2{
    margin-top:17px;

    color:#f8fafc !important;

    letter-spacing:-.035em;

    text-shadow:
        0 8px 35px rgba(0,0,0,.24);
}

.section:has(.feature-card) .section-title p{
    max-width:680px;

    margin-left:auto;
    margin-right:auto;

    color:#9eabc0 !important;
}

/* -----------------------------------------------------------
3. FEATURE GRID FOUNDATION
----------------------------------------------------------- */

.section:has(.feature-card) > .container > .row{
    position:relative;

    z-index:2;

    align-items:stretch;
}

.section:has(.feature-card)
> .container
> .row
> [class*="col-"]{
    display:flex;
}

/* -----------------------------------------------------------
4. WHY ADS AI FEATURE CARDS
----------------------------------------------------------- */

.feature-card{
    --feature-accent:#818cf8;
    --feature-rgb:129,140,248;

    position:relative;
    isolation:isolate;

    width:100%;
    min-height:240px;

    padding:28px 25px !important;

    overflow:hidden;

    border:
        1px solid rgba(148,163,184,.15) !important;

    border-radius:23px !important;

    background:
        linear-gradient(
            145deg,
            rgba(17,25,45,.84),
            rgba(8,14,28,.68)
        ) !important;

    box-shadow:
        0 20px 54px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.052);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(128%);

    backdrop-filter:
        blur(16px)
        saturate(128%);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

/* Six feature identities */

.section:has(.feature-card)
.row > div:nth-child(1) .feature-card{
    --feature-accent:#a78bfa;
    --feature-rgb:167,139,250;
}

.section:has(.feature-card)
.row > div:nth-child(2) .feature-card{
    --feature-accent:#22d3ee;
    --feature-rgb:34,211,238;
}

.section:has(.feature-card)
.row > div:nth-child(3) .feature-card{
    --feature-accent:#60a5fa;
    --feature-rgb:96,165,250;
}

.section:has(.feature-card)
.row > div:nth-child(4) .feature-card{
    --feature-accent:#34d399;
    --feature-rgb:52,211,153;
}

.section:has(.feature-card)
.row > div:nth-child(5) .feature-card{
    --feature-accent:#f472b6;
    --feature-rgb:244,114,182;
}

.section:has(.feature-card)
.row > div:nth-child(6) .feature-card{
    --feature-accent:#fbbf24;
    --feature-rgb:251,191,36;
}

/* Internal glow */

.feature-card::before{
    content:"";

    position:absolute;

    width:175px;
    height:175px;

    right:-82px;
    top:-88px;

    border-radius:50%;

    background:
        rgba(
            var(--feature-rgb),
            .18
        );

    filter:
        blur(42px);

    pointer-events:none;

    z-index:-1;
}

/* Luminous top edge */

.feature-card::after{
    content:"";

    position:absolute;

    left:22px;
    right:22px;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--feature-rgb),.80),
            transparent
        );

    opacity:.74;

    pointer-events:none;
}

.feature-card:hover{
    transform:
        translateY(-7px);

    border-color:
        rgba(
            var(--feature-rgb),
            .36
        ) !important;

    box-shadow:
        0 29px 72px rgba(0,0,0,.35),
        0 0 36px rgba(var(--feature-rgb),.10),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.feature-card i{
    color:
        var(--feature-accent) !important;

    filter:
        drop-shadow(
            0 0 13px
            rgba(var(--feature-rgb),.25)
        );
}

.feature-card h3,
.feature-card h4,
.feature-card h5{
    color:#f8fafc !important;

    letter-spacing:-.022em;
}

.feature-card p{
    color:#9ca9bd !important;
}

/* -----------------------------------------------------------
5. DESKTOP FEATURE RHYTHM
----------------------------------------------------------- */

@media(min-width:992px){

    .section:has(.feature-card)
    .row > div:nth-child(1) .feature-card,

    .section:has(.feature-card)
    .row > div:nth-child(6) .feature-card{
        min-height:285px;
    }

    .section:has(.feature-card)
    .row > div:nth-child(2) .feature-card,

    .section:has(.feature-card)
    .row > div:nth-child(5) .feature-card{
        min-height:265px;
    }

    .section:has(.feature-card)
    .row > div:nth-child(3) .feature-card,

    .section:has(.feature-card)
    .row > div:nth-child(4) .feature-card{
        min-height:245px;
    }

}

/* -----------------------------------------------------------
6. CINEMATIC CTA
----------------------------------------------------------- */

.cta-section{
    position:relative !important;
    isolation:isolate;
    overflow:hidden !important;

    color:#f8fafc !important;

    background:
        radial-gradient(
            circle at 18% 28%,
            rgba(139,92,246,.24),
            transparent 31%
        ),
        radial-gradient(
            circle at 84% 30%,
            rgba(34,211,238,.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 58% 110%,
            rgba(37,99,235,.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #03050c 0%,
            #080d1b 48%,
            #0b1122 100%
        ) !important;

    border-top:
        1px solid rgba(148,163,184,.10);

    border-bottom:
        1px solid rgba(148,163,184,.10);
}

/* Cinematic grid */

.cta-section::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(148,163,184,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148,163,184,.04) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    opacity:.42;

    pointer-events:none;

    z-index:0;
}

/* Vignette */

.cta-section::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(3,5,12,.08),
            rgba(3,5,12,.16) 58%,
            rgba(3,5,12,.52)
        );

    pointer-events:none;

    z-index:1;
}

.cta-section > .container{
    position:relative;

    z-index:3;
}

.cta-section h1,
.cta-section h2,
.cta-section h3{
    color:#ffffff !important;

    letter-spacing:-.035em;

    text-shadow:
        0 10px 40px rgba(0,0,0,.30);
}

.cta-section p{
    color:
        rgba(203,213,225,.88) !important;
}

/* CTA buttons */

.cta-section .btn-primary{
    border:
        1px solid rgba(165,180,252,.30) !important;

    background:
        linear-gradient(
            105deg,
            #7c3aed 0%,
            #4f46e5 48%,
            #2563eb 100%
        ) !important;

    color:#ffffff !important;

    box-shadow:
        0 14px 36px rgba(79,70,229,.31),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.cta-section .btn-primary:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 20px 46px rgba(79,70,229,.40),
        0 0 30px rgba(34,211,238,.10),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.cta-section .btn-outline-light{
    border:
        1px solid rgba(148,163,184,.30) !important;

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

    color:#f8fafc !important;

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

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}

.cta-section .btn-outline-light:hover{
    background:
        rgba(255,255,255,.11) !important;

    border-color:
        rgba(165,180,252,.44) !important;

    color:#ffffff !important;
}

/* -----------------------------------------------------------
7. CONTACT COMMAND CENTER SECTION
----------------------------------------------------------- */

#contact{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(34,211,238,.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 72%,
            rgba(139,92,246,.13),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #060a15 0%,
            #03050c 100%
        ) !important;
}

/* Command center grid */

#contact::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(148,163,184,.032) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148,163,184,.032) 1px,
            transparent 1px
        );

    background-size:
        56px 56px;

    opacity:.48;

    pointer-events:none;

    z-index:-2;
}

/* Contact ambient core */

#contact::after{
    content:"";

    position:absolute;

    width:540px;
    height:540px;

    right:-280px;
    top:18%;

    border-radius:50%;

    background:
        rgba(99,102,241,.14);

    filter:
        blur(105px);

    pointer-events:none;

    z-index:-1;
}

/* -----------------------------------------------------------
8. CONTACT TITLE
----------------------------------------------------------- */

#contact .section-title{
    position:relative;

    max-width:790px;

    margin-left:auto;
    margin-right:auto;
    margin-bottom:50px;

    z-index:2;
}

#contact .section-title > span{
    display:inline-flex;
    align-items:center;

    min-height:30px;

    padding:7px 13px;

    border:
        1px solid rgba(34,211,238,.22);

    border-radius:999px;

    background:
        rgba(34,211,238,.065);

    color:#67e8f9 !important;

    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;

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

#contact .section-title h2{
    margin-top:17px;

    color:#f8fafc !important;

    letter-spacing:-.035em;

    text-shadow:
        0 8px 35px rgba(0,0,0,.24);
}

#contact .section-title p{
    color:#9eabc0 !important;
}

/* -----------------------------------------------------------
9. CONTACT INFORMATION CARDS
----------------------------------------------------------- */

#contact .contact-card{
    --contact-accent:#818cf8;
    --contact-rgb:129,140,248;

    position:relative;
    isolation:isolate;

    overflow:hidden;

    border:
        1px solid rgba(148,163,184,.15) !important;

    border-radius:21px !important;

    background:
        linear-gradient(
            145deg,
            rgba(17,25,45,.84),
            rgba(8,14,28,.69)
        ) !important;

    color:#f8fafc !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.052);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(128%);

    backdrop-filter:
        blur(16px)
        saturate(128%);

    transition:
        transform .27s ease,
        border-color .27s ease,
        box-shadow .27s ease;
}

/* Four contact identities */

#contact .contact-card:nth-of-type(1){
    --contact-accent:#a78bfa;
    --contact-rgb:167,139,250;
}

#contact .contact-card:nth-of-type(2){
    --contact-accent:#22d3ee;
    --contact-rgb:34,211,238;
}

#contact .contact-card:nth-of-type(3){
    --contact-accent:#60a5fa;
    --contact-rgb:96,165,250;
}

#contact .contact-card:nth-of-type(4){
    --contact-accent:#34d399;
    --contact-rgb:52,211,153;
}

#contact .contact-card::before{
    content:"";

    position:absolute;

    width:140px;
    height:140px;

    right:-72px;
    top:-78px;

    border-radius:50%;

    background:
        rgba(
            var(--contact-rgb),
            .17
        );

    filter:
        blur(36px);

    pointer-events:none;

    z-index:-1;
}

#contact .contact-card:hover{
    transform:
        translateY(-5px);

    border-color:
        rgba(
            var(--contact-rgb),
            .34
        ) !important;

    box-shadow:
        0 26px 65px rgba(0,0,0,.34),
        0 0 30px rgba(var(--contact-rgb),.09),
        inset 0 1px 0 rgba(255,255,255,.07);
}

#contact .contact-card i{
    color:
        var(--contact-accent) !important;

    filter:
        drop-shadow(
            0 0 12px
            rgba(var(--contact-rgb),.24)
        );
}

#contact .contact-card h3,
#contact .contact-card h4,
#contact .contact-card h5{
    color:#f8fafc !important;
}

#contact .contact-card p,
#contact .contact-card span{
    color:#a5b1c3 !important;
}

#contact .contact-card a{
    color:#c7d2fe !important;
}

/* -----------------------------------------------------------
10. CONTACT FORM GLASS PANEL
----------------------------------------------------------- */

#contact form{
    position:relative;

    padding:
        clamp(22px, 3vw, 34px);

    border:
        1px solid rgba(148,163,184,.16);

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.82),
            rgba(7,12,25,.72)
        );

    box-shadow:
        0 26px 72px rgba(0,0,0,.31),
        inset 0 1px 0 rgba(255,255,255,.055);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(130%);

    backdrop-filter:
        blur(18px)
        saturate(130%);
}

/*
Visible field borders requested earlier.
High contrast on midnight background.
*/

#contact .form-control,
#contact .form-select,
#contact input,
#contact textarea,
#contact select{
    border:
        1px solid rgba(148,163,184,.34) !important;

    background:
        rgba(3,7,18,.64) !important;

    color:
        #f8fafc !important;

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

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

#contact .form-control::placeholder,
#contact input::placeholder,
#contact textarea::placeholder{
    color:
        #738198 !important;

    opacity:1;
}

#contact .form-control:hover,
#contact .form-select:hover,
#contact input:hover,
#contact textarea:hover,
#contact select:hover{
    border-color:
        rgba(165,180,252,.48) !important;
}

#contact .form-control:focus,
#contact .form-select:focus,
#contact input:focus,
#contact textarea:focus,
#contact select:focus{
    border-color:
        rgba(96,165,250,.82) !important;

    background:
        rgba(5,10,24,.82) !important;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.12),
        0 0 24px rgba(99,102,241,.08) !important;

    outline:none !important;
}

#contact label{
    color:
        #cbd5e1 !important;

    font-weight:
        600;
}

/* Native select option readability */

#contact select option{
    background:
        #0b1220;

    color:
        #f8fafc;
}

/* Contact submit */

#contact button[type="submit"],
#contact input[type="submit"]{
    border:
        1px solid rgba(165,180,252,.28) !important;

    background:
        linear-gradient(
            105deg,
            #7c3aed 0%,
            #4f46e5 48%,
            #2563eb 100%
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 14px 34px rgba(79,70,229,.28),
        inset 0 1px 0 rgba(255,255,255,.20);
}

/* -----------------------------------------------------------
11. TABLET
----------------------------------------------------------- */

@media(max-width:991.98px){

    .section:has(.feature-card) .section-title,
    #contact .section-title{
        margin-bottom:
            42px;
    }

    .feature-card{
        min-height:
            100%;

        border-radius:
            21px !important;
    }

    #contact form{
        border-radius:
            22px;
    }

}

/* -----------------------------------------------------------
12. MOBILE
----------------------------------------------------------- */

@media(max-width:576px){

    .section:has(.feature-card) .section-title,
    #contact .section-title{
        margin-bottom:
            34px;
    }

    .section:has(.feature-card)
    .section-title > span,

    #contact .section-title > span{
        min-height:
            27px;

        padding:
            6px 10px;

        font-size:
            9px;
    }

    .feature-card{
        min-height:
            auto;

        padding:
            23px 20px !important;

        border-radius:
            19px !important;
    }

    #contact .contact-card{
        border-radius:
            18px !important;
    }

    #contact form{
        padding:
            21px 18px;

        border-radius:
            19px;
    }

    .cta-section::before{
        background-size:
            42px 42px;

        opacity:
            .30;
    }

}

/* -----------------------------------------------------------
13. REDUCED MOTION
----------------------------------------------------------- */

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

    .feature-card,
    #contact .contact-card,
    .cta-section .btn-primary,
    #contact .form-control,
    #contact .form-select,
    #contact input,
    #contact textarea,
    #contact select{
        transition:
            none !important;
    }

}

/* ===========================================================
END ADS AI V10 - MIDNIGHT GLASS PART 4 COMMAND CENTER
=========================================================== */

/* ===========================================================
ADS AI V11 - MIDNIGHT GLASS PART 5 FINAL POLISH
=========================================================== */

/* -----------------------------------------------------------
1. GLOBAL MIDNIGHT POLISH TOKENS
----------------------------------------------------------- */

:root{
    --ads-midnight-0:#03050c;
    --ads-midnight-1:#060a15;
    --ads-midnight-2:#090f1d;
    --ads-midnight-3:#0d1528;

    --ads-text-main:#f8fafc;
    --ads-text-soft:#cbd5e1;
    --ads-text-muted:#94a3b8;

    --ads-line:rgba(148,163,184,.15);
    --ads-line-strong:rgba(148,163,184,.26);

    --ads-indigo:#818cf8;
    --ads-violet:#a78bfa;
    --ads-cyan:#22d3ee;
    --ads-blue:#60a5fa;

    --ads-glass:
        linear-gradient(
            145deg,
            rgba(17,25,45,.82),
            rgba(7,12,25,.68)
        );

    --ads-shadow:
        0 22px 60px rgba(0,0,0,.28);

    --ads-shadow-hover:
        0 30px 78px rgba(0,0,0,.38);

    --ads-radius-lg:24px;
    --ads-radius-md:20px;
    --ads-radius-sm:16px;
}

/* -----------------------------------------------------------
2. DOCUMENT FOUNDATION
----------------------------------------------------------- */

html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;

    background:
        var(--ads-midnight-0);
}

body{
    min-width:320px;

    overflow-x:hidden;

    background:
        var(--ads-midnight-0) !important;

    color:
        var(--ads-text-soft);

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}

/* Prevent accidental horizontal overflow */

img,
svg,
video,
canvas{
    max-width:100%;
}

/*
Important:
Do not constrain the AI connection canvas dimensions here.
Its own playground rules remain authoritative.
*/

#adsAiConnections{
    max-width:none;
}

/* -----------------------------------------------------------
3. PREMIUM TEXT SELECTION
----------------------------------------------------------- */

::selection{
    background:
        rgba(99,102,241,.38);

    color:
        #ffffff;
}

::-moz-selection{
    background:
        rgba(99,102,241,.38);

    color:
        #ffffff;
}

/* -----------------------------------------------------------
4. PREMIUM SCROLLBAR
----------------------------------------------------------- */

html{
    scrollbar-width:thin;

    scrollbar-color:
        rgba(129,140,248,.72)
        #050914;
}

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:
        #050914;
}

::-webkit-scrollbar-thumb{
    border:
        2px solid #050914;

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #8b5cf6,
            #4f46e5,
            #2563eb
        );
}

::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #a78bfa,
            #6366f1,
            #3b82f6
        );
}

/* -----------------------------------------------------------
5. SECTION RHYTHM
----------------------------------------------------------- */

section{
    position:relative;
}

.section{
    padding-top:
        clamp(76px, 8vw, 118px);

    padding-bottom:
        clamp(76px, 8vw, 118px);
}

/*
Soft visual seam between major sections.
No layout mutation.
*/

#services,
#products,
#technology,
#portfolio,
#contact{
    border-top:
        1px solid rgba(148,163,184,.07);
}

/* -----------------------------------------------------------
6. SECTION TITLE CONSISTENCY
----------------------------------------------------------- */

.section-title{
    position:relative;

    margin-bottom:
        clamp(34px, 5vw, 56px);
}

.section-title h2{
    line-height:
        1.08;

    letter-spacing:
        -.035em;
}

.section-title p{
    line-height:
        1.75;
}

/* -----------------------------------------------------------
7. PREMIUM HEADER FOUNDATION
----------------------------------------------------------- */

.header{
    border-bottom:
        1px solid rgba(148,163,184,.11);

    background:
        rgba(3,5,12,.72) !important;

    box-shadow:
        0 10px 38px rgba(0,0,0,.16);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(145%);

    backdrop-filter:
        blur(20px)
        saturate(145%);
}

/* Header luminous seam */

.header::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-1px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(129,140,248,.35) 25%,
            rgba(34,211,238,.30) 50%,
            rgba(167,139,250,.35) 75%,
            transparent 100%
        );

    opacity:.68;

    pointer-events:none;
}

/* -----------------------------------------------------------
8. BRAND FINAL POLISH
----------------------------------------------------------- */

.ads-ai-brand{
    position:relative;

    display:inline-flex !important;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    min-width:max-content;

    text-decoration:none !important;
}

.ads-ai-brand__name{
    line-height:1;

    letter-spacing:.075em;

    text-shadow:
        0 0 18px rgba(129,140,248,.20),
        0 0 28px rgba(34,211,238,.10);
}

.ads-ai-brand__tagline{
    margin-top:5px;

    line-height:1.1;

    letter-spacing:.11em;

    opacity:.78;
}

/* -----------------------------------------------------------
9. DESKTOP NAVIGATION
----------------------------------------------------------- */

@media(min-width:992px){

    .navbar-nav{
        align-items:center;

        gap:3px;
    }

    .navbar-nav .nav-link{
        position:relative;

        padding:
            10px 12px !important;

        border-radius:
            12px;

        color:
            #b8c4d6 !important;

        transition:
            color .20s ease,
            background .20s ease,
            transform .20s ease;
    }

    .navbar-nav .nav-link::after{
        content:"";

        position:absolute;

        left:50%;
        bottom:4px;

        width:0;
        height:2px;

        transform:
            translateX(-50%);

        border-radius:
            999px;

        background:
            linear-gradient(
                90deg,
                #8b5cf6,
                #22d3ee
            );

        box-shadow:
            0 0 12px rgba(34,211,238,.28);

        transition:
            width .22s ease;
    }

    .navbar-nav .nav-link:hover{
        color:
            #ffffff !important;

        background:
            rgba(255,255,255,.045);

        transform:
            translateY(-1px);
    }

    .navbar-nav .nav-link:hover::after{
        width:
            calc(100% - 24px);
    }

}

/* -----------------------------------------------------------
10. NAVBAR TOGGLER
----------------------------------------------------------- */

.navbar-toggler{
    position:relative;

    width:46px;
    height:42px;

    padding:0 !important;

    border:
        1px solid rgba(148,163,184,.22) !important;

    border-radius:
        13px !important;

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

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

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);

    transition:
        border-color .20s ease,
        background .20s ease,
        transform .20s ease;
}

.navbar-toggler:hover{
    border-color:
        rgba(129,140,248,.46) !important;

    background:
        rgba(129,140,248,.10) !important;

    transform:
        translateY(-1px);
}

.navbar-toggler:focus{
    box-shadow:
        0 0 0 4px rgba(99,102,241,.14) !important;
}

/* -----------------------------------------------------------
11. MOBILE NAVIGATION PANEL
----------------------------------------------------------- */

@media(max-width:991.98px){

    .navbar-collapse{
        margin-top:12px;

        padding:
            14px;

        border:
            1px solid rgba(148,163,184,.15);

        border-radius:
            18px;

        background:
            linear-gradient(
                145deg,
                rgba(15,23,42,.96),
                rgba(5,9,20,.95)
            );

        box-shadow:
            0 24px 64px rgba(0,0,0,.38),
            inset 0 1px 0 rgba(255,255,255,.055);

        -webkit-backdrop-filter:
            blur(20px)
            saturate(135%);

        backdrop-filter:
            blur(20px)
            saturate(135%);
    }

    .navbar-nav{
        gap:4px;
    }

    .navbar-nav .nav-link{
        padding:
            11px 13px !important;

        border:
            1px solid transparent;

        border-radius:
            12px;

        color:
            #cbd5e1 !important;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus{
        border-color:
            rgba(129,140,248,.18);

        background:
            rgba(129,140,248,.08);

        color:
            #ffffff !important;
    }

    .navbar-collapse .btn{
        width:100%;

        margin-top:8px;
        margin-left:0 !important;
    }

}

/* -----------------------------------------------------------
12. GLOBAL BUTTON CONSISTENCY
----------------------------------------------------------- */

.btn{
    position:relative;

    overflow:hidden;

    border-radius:
        13px !important;

    font-weight:
        700;

    letter-spacing:
        -.01em;

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

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

.btn:active{
    transform:
        translateY(0)
        scale(.985);
}

.btn-primary{
    border:
        1px solid rgba(165,180,252,.26) !important;

    background:
        linear-gradient(
            105deg,
            #7c3aed 0%,
            #4f46e5 48%,
            #2563eb 100%
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 13px 32px rgba(79,70,229,.25),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.btn-primary:hover{
    box-shadow:
        0 19px 42px rgba(79,70,229,.34),
        0 0 24px rgba(34,211,238,.08),
        inset 0 1px 0 rgba(255,255,255,.20);
}

/* -----------------------------------------------------------
13. SAFE BUTTON SHIMMER
----------------------------------------------------------- */

.btn-primary::before{
    content:"";

    position:absolute;

    top:-50%;
    bottom:-50%;

    left:-55%;

    width:34%;

    transform:
        skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );

    opacity:0;

    pointer-events:none;

    transition:
        left .48s ease,
        opacity .18s ease;
}

.btn-primary:hover::before{
    left:125%;

    opacity:1;
}

/* -----------------------------------------------------------
14. CARD TYPOGRAPHY CONSISTENCY
----------------------------------------------------------- */

.service-card h3,
.product-card h3,
.tech-card h3,
.portfolio-card h3,
.feature-card h3,
.contact-card h3{
    line-height:
        1.2;

    letter-spacing:
        -.024em;
}

.service-card p,
.product-card p,
.tech-card p,
.portfolio-card p,
.feature-card p,
.contact-card p{
    line-height:
        1.7;
}

/* -----------------------------------------------------------
15. UNIFIED CARD HOVER ACCELERATION
----------------------------------------------------------- */

.service-card,
.product-card,
.tech-card,
.portfolio-card,
.feature-card,
.contact-card{
    transform:
        translateZ(0);

    backface-visibility:
        hidden;
}

/*
Do not replace existing hover transforms.
Only improve rendering.
*/

.service-card:hover,
.product-card:hover,
.tech-card:hover,
.portfolio-card:hover,
.feature-card:hover,
.contact-card:hover{
    will-change:
        transform;
}

/* -----------------------------------------------------------
16. LINK POLISH
----------------------------------------------------------- */

main a:not(.btn),
section a:not(.btn){
    text-underline-offset:
        3px;

    text-decoration-thickness:
        1px;
}

main a:not(.btn):focus-visible,
section a:not(.btn):focus-visible{
    outline:
        2px solid rgba(96,165,250,.90);

    outline-offset:
        4px;

    border-radius:
        4px;
}

/* -----------------------------------------------------------
17. GLOBAL ACCESSIBLE FOCUS
----------------------------------------------------------- */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:
        2px solid rgba(96,165,250,.92);

    outline-offset:
        3px;
}

/* -----------------------------------------------------------
18. FOOTER PREMIUM MIDNIGHT
----------------------------------------------------------- */

footer,
.footer{
    position:relative;

    overflow:hidden;

    border-top:
        1px solid rgba(148,163,184,.11);

    background:
        linear-gradient(
            180deg,
            #050914 0%,
            #02040a 100%
        ) !important;

    color:
        #94a3b8 !important;
}

/* Footer luminous seam */

footer::before,
.footer::before{
    content:"";

    position:absolute;

    left:10%;
    right:10%;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(129,140,248,.42),
            rgba(34,211,238,.28),
            rgba(167,139,250,.42),
            transparent
        );

    pointer-events:none;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5{
    color:
        #f8fafc !important;
}

footer p,
footer li,
.footer p,
.footer li{
    color:
        #94a3b8 !important;
}

footer a,
.footer a{
    color:
        #b9c5d7 !important;

    text-decoration:
        none;

    transition:
        color .20s ease;
}

footer a:hover,
.footer a:hover{
    color:
        #ffffff !important;
}

/* -----------------------------------------------------------
19. AI PLAYGROUND PRESERVATION GUARD
----------------------------------------------------------- */

/*
Critical:
Keep the ball system visible and interactive according
to its existing Part 1-4 playground logic.
No animation, transform, opacity, or physics override.
*/

#adsAiPlayground{
    visibility:
        visible !important;
}

#adsAiPlaygroundScene{
    visibility:
        visible !important;
}

#adsAiPlayground .ads-ai-orb{
    visibility:
        visible !important;
}

/* -----------------------------------------------------------
20. MOBILE OVERFLOW PROTECTION
----------------------------------------------------------- */

@media(max-width:767.98px){

    body{
        overflow-x:
            hidden;
    }

    .container,
    .container-fluid{
        max-width:
            100%;
    }

    .section{
        padding-top:
            72px;

        padding-bottom:
            72px;
    }

    .section-title h2{
        overflow-wrap:
            anywhere;
    }

    .btn-lg{
        padding:
            12px 18px !important;

        font-size:
            .98rem !important;
    }

}

/* -----------------------------------------------------------
21. VERY SMALL MOBILE
----------------------------------------------------------- */

@media(max-width:380px){

    .ads-ai-brand__name{
        font-size:
            clamp(1.15rem, 7vw, 1.45rem) !important;
    }

    .ads-ai-brand__tagline{
        font-size:
            .52rem !important;

        letter-spacing:
            .075em;
    }

    .navbar-toggler{
        width:
            42px;

        height:
            39px;
    }

    .section{
        padding-top:
            62px;

        padding-bottom:
            62px;
    }

}

/* -----------------------------------------------------------
22. REDUCED MOTION
----------------------------------------------------------- */

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

    html{
        scroll-behavior:
            auto;
    }

    .btn,
    .btn-primary::before,
    .navbar-nav .nav-link,
    .navbar-nav .nav-link::after,
    .navbar-toggler,
    footer a,
    .footer a{
        transition:
            none !important;
    }

}

/* ===========================================================
END ADS AI V11 - MIDNIGHT GLASS PART 5 FINAL POLISH
=========================================================== */

/* ADS AI V12 - COMPACT PORTFOLIO COLOR ICONS */

/*
   Featured Products & Projects
   Compact content-fit cards with colorful glass icons.
   Ball playground rules intentionally untouched.
*/

#portfolio .row.g-4{
    align-items:stretch;
}

#portfolio .row.g-4 > [class*="col-"]{
    display:flex;
}

#portfolio .portfolio-card{
    width:100%;
    min-height:0 !important;
    height:auto !important;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;

    padding:28px 28px 26px !important;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.88),
            rgba(7,14,30,.94)
        ) !important;

    border:
        1px solid rgba(148,163,184,.16) !important;

    border-radius:24px !important;

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

    overflow:hidden;
}

#portfolio .portfolio-card::before{
    opacity:.72;
}

#portfolio .ads-project-icon{
    position:relative;

    width:54px;
    height:54px;

    flex:0 0 54px;

    display:grid;
    place-items:center;

    margin:0 0 20px;

    border-radius:17px;

    font-size:22px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 12px 30px var(--ads-icon-shadow);

    isolation:isolate;
}

#portfolio .ads-project-icon::before{
    content:"";

    position:absolute;
    inset:7px;

    border-radius:12px;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.32),
            transparent 42%
        );

    pointer-events:none;
}

#portfolio .ads-project-icon i{
    position:relative;
    z-index:2;

    color:var(--ads-icon-color);

    filter:
        drop-shadow(
            0 0 10px var(--ads-icon-glow)
        );
}

#portfolio .ads-project-icon--violet{
    --ads-icon-color:#c4b5fd;
    --ads-icon-glow:rgba(139,92,246,.88);
    --ads-icon-shadow:rgba(124,58,237,.28);

    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,.34),
            rgba(76,29,149,.18)
        );
}

#portfolio .ads-project-icon--cyan{
    --ads-icon-color:#67e8f9;
    --ads-icon-glow:rgba(6,182,212,.88);
    --ads-icon-shadow:rgba(6,182,212,.26);

    background:
        linear-gradient(
            145deg,
            rgba(6,182,212,.34),
            rgba(14,116,144,.16)
        );
}

#portfolio .ads-project-icon--blue{
    --ads-icon-color:#93c5fd;
    --ads-icon-glow:rgba(59,130,246,.88);
    --ads-icon-shadow:rgba(37,99,235,.28);

    background:
        linear-gradient(
            145deg,
            rgba(59,130,246,.34),
            rgba(30,64,175,.16)
        );
}

#portfolio .ads-project-icon--green{
    --ads-icon-color:#6ee7b7;
    --ads-icon-glow:rgba(16,185,129,.88);
    --ads-icon-shadow:rgba(5,150,105,.26);

    background:
        linear-gradient(
            145deg,
            rgba(16,185,129,.34),
            rgba(6,95,70,.16)
        );
}

#portfolio .ads-project-icon--pink{
    --ads-icon-color:#f9a8d4;
    --ads-icon-glow:rgba(236,72,153,.88);
    --ads-icon-shadow:rgba(219,39,119,.27);

    background:
        linear-gradient(
            145deg,
            rgba(236,72,153,.34),
            rgba(157,23,77,.16)
        );
}

#portfolio .ads-project-icon--amber{
    --ads-icon-color:#fde68a;
    --ads-icon-glow:rgba(245,158,11,.9);
    --ads-icon-shadow:rgba(217,119,6,.28);

    background:
        linear-gradient(
            145deg,
            rgba(245,158,11,.34),
            rgba(146,64,14,.16)
        );
}

#portfolio .portfolio-card h3{
    margin:
        0 0 12px !important;

    font-size:
        clamp(1.2rem, 1.55vw, 1.48rem) !important;

    line-height:1.18 !important;
}

#portfolio .portfolio-card p{
    margin:0 !important;

    line-height:1.62 !important;
}

#portfolio .portfolio-card:hover{
    transform:
        translateY(-6px) !important;

    border-color:
        rgba(129,140,248,.34) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 24px 58px rgba(0,0,0,.24) !important;
}

#portfolio .portfolio-card:hover .ads-project-icon{
    transform:
        translateY(-2px)
        scale(1.06);

    filter:
        saturate(1.18)
        brightness(1.08);
}

#portfolio .ads-project-icon{
    transition:
        transform .28s ease,
        filter .28s ease;
}

@media (max-width:991.98px){

    #portfolio .portfolio-card{
        padding:
            25px 24px 23px !important;
    }

    #portfolio .ads-project-icon{
        width:50px;
        height:50px;
        flex-basis:50px;

        margin-bottom:17px;

        border-radius:15px;

        font-size:20px;
    }
}

@media (max-width:575.98px){

    #portfolio .portfolio-card{
        padding:
            22px 20px 21px !important;

        border-radius:
            20px !important;
    }

    #portfolio .ads-project-icon{
        width:46px;
        height:46px;
        flex-basis:46px;

        margin-bottom:15px;

        border-radius:14px;

        font-size:18px;
    }

    #portfolio .portfolio-card h3{
        margin-bottom:
            9px !important;
    }
}

/* END ADS AI V12 - COMPACT PORTFOLIO COLOR ICONS */

/* ADS AI V13 - SERVICE AI IFRAME MODAL */

.ads-ai-xp-modal{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:grid;
    place-items:center;
    padding:clamp(14px,3vw,34px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .28s ease,
        visibility .28s ease;
}

.ads-ai-xp-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.ads-ai-xp-modal__backdrop{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(124,58,237,.25),
            transparent 35%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(6,182,212,.20),
            transparent 34%
        ),
        rgba(2,6,18,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.ads-ai-xp-modal__dialog{
    position:relative;
    width:min(1180px,96vw);
    height:min(780px,90vh);
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.16);
    background:#070b18;
    box-shadow:
        0 35px 100px rgba(0,0,0,.58),
        0 0 0 1px rgba(124,58,237,.10),
        0 0 80px rgba(6,182,212,.12);
    transform:
        translate3d(0,22px,0)
        scale(.975);
    transition:transform .32s cubic-bezier(.2,.8,.2,1);
}

.ads-ai-xp-modal.is-open
.ads-ai-xp-modal__dialog{
    transform:
        translate3d(0,0,0)
        scale(1);
}

.ads-ai-xp-modal__frame{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#070b18;
}

.ads-ai-xp-modal__close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:5;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.20);
    border-radius:50%;
    background:rgba(7,11,24,.72);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    box-shadow:
        0 10px 30px rgba(0,0,0,.32),
        0 0 24px rgba(124,58,237,.20);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.ads-ai-xp-modal__close:hover{
    transform:rotate(90deg) scale(1.06);
    background:rgba(124,58,237,.88);
    border-color:rgba(255,255,255,.45);
}

.ads-ai-xp-modal__close:focus-visible{
    outline:3px solid rgba(34,211,238,.72);
    outline-offset:3px;
}

body.ads-ai-xp-modal-open{
    overflow:hidden !important;
}

#services .service-card
a[data-ads-ai-experience]{
    cursor:pointer;
}

@media(max-width:767.98px){

    .ads-ai-xp-modal{
        padding:0;
    }

    .ads-ai-xp-modal__dialog{
        width:100vw;
        height:100dvh;
        max-width:none;
        max-height:none;
        border-radius:0;
        border:0;
    }

    .ads-ai-xp-modal__close{
        top:max(12px,env(safe-area-inset-top));
        right:12px;
        width:46px;
        height:46px;
    }
}

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

    .ads-ai-xp-modal,
    .ads-ai-xp-modal__dialog,
    .ads-ai-xp-modal__close{
        transition:none !important;
    }
}

/* END ADS AI V13 - SERVICE AI IFRAME MODAL */

/* ADS AI V14 - PRODUCT CARD IFRAME EXPERIENCE */

#products .product-card[data-ads-ai-product-xp]{
    cursor:pointer;
    position:relative;
    isolation:isolate;
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        border-color .28s ease,
        box-shadow .28s ease;
}

#products .product-card[data-ads-ai-product-xp]::after{
    content:"Explore";
    position:absolute;
    right:18px;
    bottom:17px;
    z-index:3;

    padding:7px 10px;
    border-radius:999px;

    color:rgba(226,232,240,.82);
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.10);

    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;

    opacity:0;
    transform:translateY(5px);

    transition:
        opacity .22s ease,
        transform .22s ease,
        color .22s ease,
        border-color .22s ease;
}

#products .product-card[data-ads-ai-product-xp]:hover{
    transform:translateY(-6px);

    border-color:
        rgba(129,140,248,.38);

    box-shadow:
        0 24px 55px rgba(0,0,0,.30),
        0 0 34px rgba(99,102,241,.10);
}

#products
.product-card[data-ads-ai-product-xp]:hover::after{
    opacity:1;
    transform:translateY(0);
    color:#fff;
    border-color:rgba(255,255,255,.20);
}

#products
.product-card[data-ads-ai-product-xp]:focus-visible{
    outline:
        3px solid
        rgba(34,211,238,.72);

    outline-offset:4px;
}

#products
.product-card[data-ads-ai-product-xp]
.product-logo{
    transition:
        transform .28s ease,
        filter .28s ease;
}

#products
.product-card[data-ads-ai-product-xp]:hover
.product-logo{
    transform:
        translateY(-2px)
        scale(1.06);

    filter:
        brightness(1.12);
}

@media(max-width:767.98px){

    #products
    .product-card[data-ads-ai-product-xp]::after{
        opacity:.78;
        transform:none;
    }
}

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

    #products
    .product-card[data-ads-ai-product-xp],
    #products
    .product-card[data-ads-ai-product-xp]::after,
    #products
    .product-card[data-ads-ai-product-xp]
    .product-logo{
        transition:none !important;
    }
}

/* END ADS AI V14 - PRODUCT CARD IFRAME EXPERIENCE */

/* ADS AI V15 - MOBILE MENU EXACT FIX */

@media (max-width: 991.98px) {

    /*
     * Keep header brand and toggler above
     * the expanded Midnight Glass panel.
     */
    .header .navbar {
        position: relative;
        min-height: 64px;
        align-items: center;
    }

    /*
     * Highly visible premium hamburger button.
     */
    .header .navbar-toggler {
        position: relative !important;
        z-index: 1003 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid rgba(129, 140, 248, 0.58) !important;
        border-radius: 14px !important;

        background:
            linear-gradient(
                135deg,
                rgba(124, 58, 237, 0.30),
                rgba(37, 99, 235, 0.24)
            ) !important;

        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.05) inset,
            0 8px 28px rgba(79, 70, 229, 0.24),
            0 0 22px rgba(56, 189, 248, 0.10) !important;

        color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header .navbar-toggler:hover,
    .header .navbar-toggler:focus,
    .header .navbar-toggler:active {
        color: #ffffff !important;
        border-color: rgba(165, 180, 252, 0.90) !important;
        outline: none !important;
        box-shadow:
            0 0 0 3px rgba(99, 102, 241, 0.18),
            0 10px 30px rgba(79, 70, 229, 0.30) !important;
    }

    /*
     * Force Bootstrap hamburger strokes white.
     */
    .header .navbar-toggler-icon {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        opacity: 1 !important;
        visibility: visible !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;

        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 24px 24px !important;
    }

    /*
     * Compact expanded menu panel.
     * Removes the large blank area above Home.
     */
    .header .navbar-collapse {
        margin-top: 10px !important;
        padding: 14px !important;

        border-radius: 18px !important;

        background:
            linear-gradient(
                160deg,
                rgba(12, 20, 39, 0.98),
                rgba(8, 15, 30, 0.98)
            ) !important;

        border:
            1px solid rgba(129, 140, 248, 0.16) !important;

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

    /*
     * Critical reset:
     * no inherited min-height or giant top spacing.
     */
    .header .navbar-collapse.show,
    .header .navbar-collapse.collapsing {
        padding-top: 14px !important;
        min-height: 0 !important;
    }

    .header .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 0 !important;
    }

    /*
     * Remove phantom decorative boxes
     * inherited from historical nav effects.
     */
    .header .navbar-nav::before,
    .header .navbar-nav::after,
    .header .nav-item::before,
    .header .nav-item::after,
    .header .nav-link::before,
    .header .nav-link::after {
        content: none !important;
        display: none !important;
    }

    /*
     * Remove empty generated/list spacing.
     */
    .header .navbar-nav > li:empty,
    .header .navbar-nav > .nav-item:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    .header .nav-item {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    .header .nav-link {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 10px 12px !important;

        border: 0 !important;
        border-radius: 12px !important;

        background: transparent !important;
        box-shadow: none !important;

        color: rgba(226, 232, 240, 0.90) !important;
        line-height: 1.35 !important;
    }

    .header .nav-link:hover,
    .header .nav-link:focus,
    .header .nav-link.active {
        color: #ffffff !important;

        background:
            linear-gradient(
                90deg,
                rgba(124, 58, 237, 0.16),
                rgba(37, 99, 235, 0.10)
            ) !important;
    }

    /*
     * Compact Book Meeting button.
     */
    .header .navbar-collapse .btn {
        width: 100% !important;

        margin-top: 8px !important;
        margin-bottom: 0 !important;

        min-height: 48px !important;
    }
}

/* END ADS AI V15 - MOBILE MENU EXACT FIX */

/* ADS AI V15 - FOOTER GLASS CARDS AI IFRAME */

.footer .row{
    align-items:stretch;
}

.ads-footer-menu-col{
    display:flex;
}

.ads-footer-menu-card{
    --footer-accent:#8b5cf6;
    --footer-accent-rgb:139,92,246;
    position:relative;
    width:100%;
    min-height:100%;
    padding:22px 18px 18px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:22px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(var(--footer-accent-rgb),.16),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(15,23,42,.82),
            rgba(5,10,24,.92)
        );
    box-shadow:
        0 20px 48px rgba(0,0,0,.2),
        inset 0 1px 0 rgba(255,255,255,.035);
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.ads-footer-menu-card:hover{
    transform:translateY(-5px);
    border-color:rgba(var(--footer-accent-rgb),.38);
    box-shadow:
        0 24px 58px rgba(0,0,0,.3),
        0 0 34px rgba(var(--footer-accent-rgb),.11);
}

.ads-footer-menu-card--violet{
    --footer-accent:#a78bfa;
    --footer-accent-rgb:139,92,246;
}

.ads-footer-menu-card--cyan{
    --footer-accent:#22d3ee;
    --footer-accent-rgb:6,182,212;
}

.ads-footer-menu-card--emerald{
    --footer-accent:#34d399;
    --footer-accent-rgb:16,185,129;
}

.ads-footer-menu-card--amber{
    --footer-accent:#fbbf24;
    --footer-accent-rgb:245,158,11;
}

.ads-footer-menu-card__head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.ads-footer-menu-card__icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            rgba(var(--footer-accent-rgb),.95),
            rgba(var(--footer-accent-rgb),.38)
        );
    border:1px solid rgba(var(--footer-accent-rgb),.5);
    box-shadow:
        0 12px 28px rgba(var(--footer-accent-rgb),.2);
}

.footer .ads-footer-menu-card h5{
    margin:0;
    font-size:1rem;
    color:#f8fafc;
}

.footer .ads-footer-menu-card ul{
    margin:0;
    padding:0;
    list-style:none;
}

.footer .ads-footer-menu-card li{
    margin:0;
}

.footer .ads-footer-menu-card .ads-footer-ai-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:10px 10px;
    margin:3px 0;
    border-radius:12px;
    color:#aebbd1;
    text-decoration:none;
    transition:
        color .22s ease,
        background .22s ease,
        transform .22s ease;
}

.footer .ads-footer-menu-card .ads-footer-ai-link::before{
    display:none !important;
    content:none !important;
}

.footer .ads-footer-menu-card .ads-footer-ai-link i{
    font-size:.72rem;
    color:var(--footer-accent);
    opacity:.55;
    transform:translateX(-4px);
    transition:
        opacity .22s ease,
        transform .22s ease;
}

.footer .ads-footer-menu-card .ads-footer-ai-link:hover{
    color:#fff;
    background:rgba(var(--footer-accent-rgb),.11);
    transform:translateX(3px);
}

.footer .ads-footer-menu-card .ads-footer-ai-link:hover i{
    opacity:1;
    transform:translateX(0);
}

/* V15 independent iframe modal */

.ads-footer-ai-modal{
    position:fixed;
    inset:0;
    z-index:100000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:clamp(10px,2vw,24px);
}

.ads-footer-ai-modal.is-open{
    display:flex;
}

.ads-footer-ai-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.82);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.ads-footer-ai-modal__dialog{
    --modal-accent-rgb:139,92,246;
    position:relative;
    z-index:1;
    width:min(1100px,96vw);
    height:min(760px,90vh);
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(var(--modal-accent-rgb),.4);
    background:#050816;
    box-shadow:
        0 35px 110px rgba(0,0,0,.62),
        0 0 55px rgba(var(--modal-accent-rgb),.16);
}

.ads-footer-ai-modal[data-tone="cyan"]
.ads-footer-ai-modal__dialog{
    --modal-accent-rgb:6,182,212;
}

.ads-footer-ai-modal[data-tone="emerald"]
.ads-footer-ai-modal__dialog{
    --modal-accent-rgb:16,185,129;
}

.ads-footer-ai-modal[data-tone="amber"]
.ads-footer-ai-modal__dialog{
    --modal-accent-rgb:245,158,11;
}

.ads-footer-ai-modal__topbar{
    height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:0 14px 0 20px;
    border-bottom:1px solid rgba(148,163,184,.14);
    background:
        linear-gradient(
            90deg,
            rgba(var(--modal-accent-rgb),.18),
            rgba(15,23,42,.94)
        );
}

.ads-footer-ai-modal__title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f8fafc;
    font-weight:800;
    font-size:.96rem;
}

.ads-footer-ai-modal__close{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
    background:rgba(255,255,255,.07);
    cursor:pointer;
    transition:
        transform .2s ease,
        background .2s ease;
}

.ads-footer-ai-modal__close:hover{
    transform:rotate(6deg) scale(1.05);
    background:rgba(var(--modal-accent-rgb),.28);
}

.ads-footer-ai-modal__frame{
    display:block;
    width:100%;
    height:calc(100% - 58px);
    border:0;
    background:#050816;
}

body.ads-footer-ai-modal-open{
    overflow:hidden;
}

@media (max-width:991.98px){
    .ads-footer-menu-col{
        width:50%;
        flex:0 0 50%;
        margin-top:18px;
    }
}

@media (max-width:575.98px){
    .ads-footer-menu-col{
        width:100%;
        flex:0 0 100%;
    }

    .ads-footer-menu-card{
        padding:18px 16px 14px;
        border-radius:19px;
    }

    .ads-footer-ai-modal{
        padding:8px;
    }

    .ads-footer-ai-modal__dialog{
        width:100%;
        height:94vh;
        border-radius:20px;
    }

    .ads-footer-ai-modal__topbar{
        height:54px;
    }

    .ads-footer-ai-modal__frame{
        height:calc(100% - 54px);
    }
}

@media (prefers-reduced-motion:reduce){
    .ads-footer-menu-card,
    .ads-footer-ai-link,
    .ads-footer-ai-link i,
    .ads-footer-ai-modal__close{
        transition:none !important;
    }
}

/* END ADS AI V15 - FOOTER GLASS CARDS AI IFRAME */

/* ADS AI V15 - MOBILE MENU GHOST FIX + ICONS */

/* ---------- NAV ICON FOUNDATION ---------- */

#menu .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

#menu .ads-ai-nav-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 11px;
    line-height: 1;

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

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

#menu .ads-ai-nav-label {
    display: inline-block;
}

/* ---------- SIX PREMIUM COLORS ---------- */

#menu .ads-ai-nav-icon--violet {
    color: #b79cff;
    background: rgba(124, 92, 255, .14);
    border-color: rgba(167, 139, 250, .28);
    box-shadow: 0 0 16px rgba(124, 92, 255, .10);
}

#menu .ads-ai-nav-icon--cyan {
    color: #43e7ff;
    background: rgba(0, 214, 255, .12);
    border-color: rgba(67, 231, 255, .26);
    box-shadow: 0 0 16px rgba(0, 214, 255, .09);
}

#menu .ads-ai-nav-icon--blue {
    color: #67a7ff;
    background: rgba(55, 125, 255, .13);
    border-color: rgba(103, 167, 255, .26);
    box-shadow: 0 0 16px rgba(55, 125, 255, .09);
}

#menu .ads-ai-nav-icon--green {
    color: #42e6a4;
    background: rgba(24, 211, 145, .12);
    border-color: rgba(66, 230, 164, .26);
    box-shadow: 0 0 16px rgba(24, 211, 145, .09);
}

#menu .ads-ai-nav-icon--pink {
    color: #ff74c8;
    background: rgba(255, 76, 180, .12);
    border-color: rgba(255, 116, 200, .26);
    box-shadow: 0 0 16px rgba(255, 76, 180, .09);
}

#menu .ads-ai-nav-icon--amber {
    color: #ffc94d;
    background: rgba(255, 181, 35, .12);
    border-color: rgba(255, 201, 77, .26);
    box-shadow: 0 0 16px rgba(255, 181, 35, .09);
}

#menu .nav-link:hover .ads-ai-nav-icon,
#menu .nav-link:focus-visible .ads-ai-nav-icon {
    transform: translateY(-1px) scale(1.05);
    border-color: currentColor;
}

/* ---------- MOBILE EXACT REPAIR ---------- */

@media (max-width: 991.98px) {

    /*
     * Critical ghost repair:
     * Bootstrap navbar-nav must not inherit old decorative
     * pseudo-elements or empty generated children.
     */

    #menu .navbar-nav::before,
    #menu .navbar-nav::after,
    #menu .nav-item::before,
    #menu .nav-item::after {
        content: none !important;
        display: none !important;
    }

    /*
     * Remove legacy empty direct elements that render as
     * the three rounded ghost boxes seen in mobile screenshot.
     * Real nav items and links remain untouched.
     */

    #menu .navbar-nav > span:empty,
    #menu .navbar-nav > div:empty,
    #menu .navbar-nav > i:empty,
    #menu .navbar-nav > a:empty,
    #menu .navbar-nav > li:empty {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /*
     * Compact mobile panel.
     */

    #menu.navbar-collapse {
        margin-top: 10px !important;
        padding: 12px !important;

        max-height: calc(100dvh - 88px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #menu .navbar-nav {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 3px !important;
    }

    #menu .nav-item {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 0 !important;
    }

    #menu .nav-link {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        gap: 10px !important;

        margin: 0 !important;
        padding: 8px 10px !important;

        min-height: 39px !important;

        border-radius: 10px;

        line-height: 1.2 !important;
    }

    #menu .ads-ai-nav-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;

        border-radius: 7px;

        font-size: 10px;
    }

    #menu .ads-ai-nav-label {
        line-height: 1.2;
    }

    /*
     * Preserve and strengthen hamburger visibility.
     */

    .navbar-toggler {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        height: 44px !important;

        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        position: relative;
        z-index: 1005;
    }

    .navbar-toggler-icon {
        display: block !important;

        width: 21px !important;
        height: 21px !important;

        opacity: 1 !important;
        visibility: visible !important;

        background-size: 21px 21px !important;
    }

    /*
     * Compact Book Meeting CTA.
     */

    #menu .btn {
        margin-top: 7px !important;
        min-height: 43px !important;
    }
}

/* Extra compact phones */

@media (max-width: 575.98px) {

    #menu.navbar-collapse {
        padding: 10px !important;
    }

    #menu .nav-link {
        padding: 7px 9px !important;
        min-height: 37px !important;
    }
}

/* END ADS AI V15 - MOBILE MENU GHOST FIX + ICONS */

/* ADS AI V16 - MOBILE MENU DIRECT CHILD GHOST REPAIR */

@media (max-width: 991.98px) {

    /*
     * #menu is the Bootstrap collapse container.
     * Only legitimate structural children are allowed to paint.
     * Historical empty/decorative direct children are neutralized.
     */

    #menu > :empty:not(.navbar-nav):not(.btn) {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /*
     * Same protection inside navbar-nav, but never touch
     * real nav items, links, icon spans, or labels.
     */

    #menu .navbar-nav > :empty:not(.nav-item) {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /*
     * Remove inherited list markers only.
     */

    #menu .navbar-nav,
    #menu .navbar-nav > li,
    #menu .nav-item {
        list-style: none !important;
    }

    #menu .navbar-nav > li::marker,
    #menu .nav-item::marker {
        content: "" !important;
        font-size: 0 !important;
    }

    /*
     * Preserve six real premium icons.
     */

    #menu .ads-ai-nav-icon {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /*
     * Preserve hamburger.
     */

    .header .navbar-toggler,
    .header .navbar-toggler-icon {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* END ADS AI V16 - MOBILE MENU DIRECT CHILD GHOST REPAIR */

/* =========================================================
   CONTACT FORM — FINAL TYPED TEXT VISIBILITY FIX
========================================================= */

#contact #contactForm input,
#contact #contactForm textarea,
#contact #contactForm select,
#contact #contactForm .form-control,
#contact #contactForm .form-select{

    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;

    background:#151a29 !important;
    caret-color:#ffffff !important;

    opacity:1 !important;
}

#contact #contactForm input:hover,
#contact #contactForm textarea:hover,
#contact #contactForm select:hover,
#contact #contactForm input:focus,
#contact #contactForm textarea:focus,
#contact #contactForm select:focus,
#contact #contactForm .form-control:focus,
#contact #contactForm .form-select:focus{

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    background:#151a29 !important;
    caret-color:#ffffff !important;

    border-color:#4f8cff !important;

    opacity:1 !important;
}

#contact #contactForm input::placeholder,
#contact #contactForm textarea::placeholder{

    color:#b8c2d4 !important;
    -webkit-text-fill-color:#b8c2d4 !important;

    opacity:1 !important;
}

#contact #contactForm select option{

    color:#f8fafc !important;
    background:#151a29 !important;
}

#contact #contactForm input:-webkit-autofill,
#contact #contactForm input:-webkit-autofill:hover,
#contact #contactForm input:-webkit-autofill:focus,
#contact #contactForm textarea:-webkit-autofill,
#contact #contactForm textarea:-webkit-autofill:hover,
#contact #contactForm textarea:-webkit-autofill:focus{

    -webkit-text-fill-color:#ffffff !important;

    -webkit-box-shadow:
        0 0 0 1000px #151a29 inset !important;

    box-shadow:
        0 0 0 1000px #151a29 inset !important;

    caret-color:#ffffff !important;
}

/* PATCH-006 PART-6: AI DRAFT LAYOUT FIX START */

#contact #contactForm .ai-draft-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;

    width:100% !important;

    margin:
        12px 0 18px 0 !important;

    padding:0 !important;
}

#contact #contactForm #generateAiDraftButton{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;

    width:100% !important;
    min-height:46px !important;

    margin:0 !important;
    padding:11px 18px !important;

    border:
        1px solid rgba(96,165,250,.55) !important;

    border-radius:12px !important;

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,.92),
            rgba(37,99,235,.92)
        ) !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    opacity:1 !important;

    box-shadow:
        0 10px 24px rgba(37,99,235,.25) !important;

    cursor:pointer !important;
}

#contact #contactForm #generateAiDraftButton:hover:not(:disabled){
    transform:translateY(-1px) !important;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #2563eb
        ) !important;

    border-color:
        rgba(147,197,253,.90) !important;

    box-shadow:
        0 14px 28px rgba(37,99,235,.34) !important;
}

#contact #contactForm #generateAiDraftButton:disabled{
    background:
        linear-gradient(
            135deg,
            rgba(71,85,105,.92),
            rgba(51,65,85,.92)
        ) !important;

    border-color:
        rgba(148,163,184,.34) !important;

    color:#cbd5e1 !important;
    -webkit-text-fill-color:#cbd5e1 !important;

    opacity:1 !important;

    box-shadow:none !important;

    cursor:not-allowed !important;
}

#contact #contactForm #generateAiDraftButton span{
    color:inherit !important;
    -webkit-text-fill-color:inherit !important;

    font-size:inherit !important;
    font-weight:inherit !important;

    opacity:1 !important;
}

#contact #contactForm #aiDraftHelp{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 4px !important;

    color:#cbd5e1 !important;
    -webkit-text-fill-color:#cbd5e1 !important;

    font-size:12px !important;
    font-weight:500 !important;
    line-height:1.5 !important;

    text-align:left !important;

    opacity:1 !important;
}

#contact #contactForm .ai-draft-notice{
    width:100% !important;

    margin:
        12px 0 0 0 !important;
}

#contact #contactForm textarea[name="message"]{
    margin-top:0 !important;
}

@media (max-width:575.98px){

    #contact #contactForm .ai-draft-actions{
        margin-bottom:16px !important;
    }

    #contact #contactForm #generateAiDraftButton{
        min-height:48px !important;
        font-size:13px !important;
    }

    #contact #contactForm #aiDraftHelp{
        padding:0 2px !important;
        text-align:center !important;
    }

}

/* PATCH-006 PART-6: AI DRAFT LAYOUT FIX END */