:root {
    --primary: #0B63F6;
    --secondary: #FF6B00;
    --accent: #14B8A6;
    --text: #111827;
    --text-muted: #64748B;
    --bg: #f4f7ff;
    --surface: #FFFFFF;
    --border: rgba(15, 23, 42, 0.08);
    --shadow: 0 16px 45px rgba(15, 23, 42, 0.08);
    --radius: 22px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background: linear-gradient(180deg, #f7faff 0%, #f3f6ff 100%);
    color: var(--text);
    line-height: 1.6;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(11,99,246,0.08), transparent 28%), radial-gradient(circle at bottom right, rgba(255,107,0,0.08), transparent 28%);
    pointer-events: none;
    z-index: -1;
}

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

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

main {
    min-height: 60vh;
}

.page-wrapper {
    padding-top: 90px;
}

.fade-in {
    animation: fadeIn 0.8s ease both;
}

.hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-shell {
    position: relative;
}

.section-header {
    max-width: 720px;
    margin: 0 auto 24px;
}

.eyebrow {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(11, 99, 246, 0.1);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 0.85rem;
}

.h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.4rem;
}

.card-soft {
    border: 0;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.78);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.glass-card {
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(241,245,255,0.92));
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,0.8);
}

.hero-shell {
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: hidden;
}

.hero-shell .display-4 {
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.12;
}

.hero-subtle-card {
    position: absolute;
    right: 2rem;
    top: -1rem;
    width: 140px;
    height: 140px;
    border-radius: 28px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 2rem;
}

.hero-floating-card {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(11,99,246,0.18), rgba(255,107,0,0.14));
    color: var(--primary);
    box-shadow: var(--shadow);
    font-size: 1.4rem;
}

.dashboard-placeholder {
    border-radius: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(248,250,252,0.95), rgba(240,244,255,0.88));
    border: 1px solid rgba(11,99,246,0.12);
}

.dashboard-top {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.dashboard-pill {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(11,99,246,0.4);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
}

.dashboard-card {
    min-height: 84px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(11,99,246,0.1), rgba(255,107,0,0.08));
    border: 1px solid rgba(11,99,246,0.12);
}

.dashboard-card-lg {
    grid-row: span 2;
    min-height: 180px;
}

.dashboard-card-sm {
    min-height: 54px;
}

.btn-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: 0;
    box-shadow: 0 12px 24px rgba(11, 99, 246, 0.2);
}

.btn-outline {
    border: 1px solid rgba(11, 99, 246, 0.18);
    color: var(--primary);
    background: rgba(255,255,255,0.92);
}

.btn-gradient:hover, .btn-outline:hover {
    transform: translateY(-1px);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(11, 99, 246, 0.12);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.icon-pill {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(11,99,246,0.14), rgba(20,184,166,0.12));
    color: var(--primary);
    font-size: 1.15rem;
}

.link-cta {
    color: var(--primary);
    font-weight: 600;
}

.client-mark {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.gradient-card {
    background: linear-gradient(135deg, #0f172a 0%, #111827 45%, #1d4ed8 100%);
}

.carousel-control-prev, .carousel-control-next {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255,255,255,0.75);
    box-shadow: var(--shadow);
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: invert(0.35);
}

.accordion-button:not(.collapsed) {
    background: rgba(11, 99, 246, 0.07);
    color: var(--primary);
}

@media (max-width: 768px) {
    .page-wrapper {
        padding-top: 76px;
    }

    .hero-shell {
        padding-top: 0.5rem;
    }

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

    .dashboard-card-lg {
        grid-row: auto;
        min-height: 120px;
    }
}

.hero-tech{

position:relative;

overflow:hidden;

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(
135deg,
#0B63F6 0%,
#1647A8 45%,
#FF6A00 100%);

}

.hero-glow{

position:absolute;

width:650px;

height:650px;

right:-220px;

top:-180px;

background:

radial-gradient(circle,
rgba(255,255,255,.18),
transparent 70%);

filter:blur(60px);

animation:blob 10s infinite alternate;

}

.hero-content{

position:relative;

z-index:5;

animation:fadeUp .8s;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

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

backdrop-filter:blur(18px);

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

border-radius:50px;

color:#fff;

}

.hero-title{

font-size:68px;

font-weight:800;

line-height:1.1;

color:#fff;

margin:30px 0;

}

.hero-title span{

color:#FFD8A8;

}

.hero-desc{

font-size:19px;

line-height:1.8;

color:rgba(255,255,255,.9);

max-width:560px;

}

.hero-company{

display:flex;

align-items:center;

gap:20px;

color:white;

margin-top:40px;

}

.company-list{

display:flex;

gap:18px;

flex-wrap:wrap;

font-weight:600;

opacity:.8;

}

.dashboard{

background:white;

border-radius:30px;

padding:25px;

box-shadow:

0 40px 90px rgba(0,0,0,.15);

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

}

.dashboard-header{

display:flex;

gap:8px;

margin-bottom:20px;

}

.dashboard-header span{

width:12px;

height:12px;

border-radius:50%;

background:#ddd;

}

.dashboard-body{

display:grid;

grid-template-columns:2fr 1fr;

gap:18px;

}

.dashboard-card{

background:#F8FAFC;

padding:22px;

border-radius:20px;

}

.revenue{

background:

linear-gradient(
135deg,
#FF6A00,
#FFA600);

color:white;

}

.dashboard-chart{

grid-column:span 2;

height:170px;

background:#FFF7F0;

border-radius:20px;

padding:20px;

}

.chart-line{

height:100%;

border-radius:15px;

background:

linear-gradient(
90deg,
#FF6A00,
#FFD28A);

opacity:.25;

}

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

.hero-shell{

position:relative;

overflow:hidden;

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(
135deg,
#ffffff 0%,
#fff8f2 25%,
#f5f9ff 70%,
#ffffff 100%);

}

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

.hero-bg{

position:absolute;

inset:0;

overflow:hidden;

z-index:0;

}

.blob{

position:absolute;

border-radius:50%;

filter:blur(90px);

opacity:.55;

animation:blobMove 10s infinite alternate ease-in-out;

}

.blob1{

width:520px;

height:520px;

background:#ff6a00;

top:-180px;

right:-120px;

}

.blob2{

width:420px;

height:420px;

background:#0B63F6;

bottom:-120px;

left:-120px;

animation-duration:12s;

}

.blob3{

width:250px;

height:250px;

background:#FFD18F;

top:40%;

right:30%;

filter:blur(70px);

animation-duration:8s;

}

/*=====================
NETWORK
======================*/

#hero-network{

position:absolute;

inset:0;

width:100%;

height:100%;

opacity:.18;

z-index:0;

pointer-events:none;

}

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

.hero-shell .container{

position:relative;

z-index:5;

}

.display-4{

font-size:clamp(3rem,5vw,4.7rem);

font-weight:800;

line-height:1.08;

color:#0F172A;

}

.display-4 strong{

color:#ff6a00;

}

.lead{

font-size:19px;

color:#64748b;

max-width:620px;

line-height:1.8;

}

/*=====================
EYEBROW
======================*/

.eyebrow{

display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:999px;

background:rgba(255,106,0,.10);

color:#ff6a00;

font-weight:700;

letter-spacing:.5px;

}

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

.btn-gradient{

background:

linear-gradient(
135deg,
#ff6a00,
#ff8b00);

border:none;

color:white;

padding:15px 34px;

font-weight:700;

border-radius:999px;

box-shadow:

0 18px 40px rgba(255,106,0,.28);

transition:.35s;

}

.btn-gradient:hover{

transform:translateY(-5px);

box-shadow:

0 25px 60px rgba(255,106,0,.38);

}

.btn-outline{

background:white;

border:2px solid #ff6a00;

color:#ff6a00;

padding:15px 34px;

border-radius:999px;

transition:.35s;

}

.btn-outline:hover{

background:#ff6a00;

color:white;

}

/*=====================
CHIP
======================*/

.chip{

padding:12px 18px;

border-radius:999px;

background:white;

box-shadow:

0 10px 25px rgba(0,0,0,.05);

transition:.3s;

}

.chip:hover{

background:#ff6a00;

color:white;

transform:translateY(-4px);

}

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

.glass-card{

background:

rgba(255,255,255,.75);

backdrop-filter:blur(20px);

border-radius:28px;

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

box-shadow:

0 35px 70px rgba(15,23,42,.10);

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

}

.glass-card .card{

border:none;

border-radius:22px;

box-shadow:

0 15px 35px rgba(0,0,0,.08);

}

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

@keyframes blobMove{

0%{

transform:translate(0,0) scale(1);

}

100%{

transform:translate(50px,-30px) scale(1.15);

}

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}